/* === SEACCESS Customizations === */

/* === FONT LOADING === */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/* === HEADER === */


.page-header {
    background-color: #232020;
}
.page-header .panel.wrapper {
    border-bottom: none !important;
    background-color: #FFFFFF !important;
    color: #747474 !important;
}
.header.panel > .header.links {
    float: none !important;
}
.header.panel > .header.links > li > a,
.header.panel > .header.links > li > a:visited {
    color: #747474 !important;
}
/* hides 'create account' */
.header.panel > .header.links > li:last-child{
    display: none !important;
}
.header.panel > .header.links > li {
    font-size: 13px !important;
}
@media (min-width: 769px), print {
    .page-header .header.panel {
        max-width: none !important;
    }
    .panel.header .links {
        display: block !important;
    }
    .header.content {
        max-width: none !important;
    }
    .header.panel > .header.links {
        float: none !important;
    }
    .header.panel > .header.links > .authorization-link:after {
        display: none !important;
    }
    .header.panel > .header.links > li.welcome {
        float: left !important;
    }
    .header.panel > .header.links > .link.authorization-link {
        float: right !important;
        text-transform: uppercase;
        font-weight: 800;
        color: #000000;
    }
}    

/* === BODY === */
body {
    font-family: "Roboto", "Roboto Slab" !important;
}
.block.block-new-customer {
    background-color: #fff0cf;
    padding: 10px;
}



/* === home page === */
body.cms-home.page-layout-1column.cms-index-index.page-layout-cms-full-width div.page-title-wrapper {
    display: none;
}

/* === brands category page === */
body.page-products.categorypath-brands.category-brands .page-main .columns {
    display: none;
}

body.page-products.categorypath-brands.category-brands h2 {
    border-bottom: 1px solid #000;
}

/* ==============================
   Brands Alphabet = Responsive Button Row
   Target markup:
   <div class="brands-alphabet"><ul><li><a>...</a></li>...</ul></div>
   ============================== */

.brands-alphabet {
  /* spacing around the whole control */
  margin: 12px 0;
}

.brands-alphabet ul {
  /* make it a responsive horizontal row */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;

  /* nice alignment */
  justify-content: flex-start;
  align-items: center;
}

.brands-alphabet li {
  /* remove inline styles influence */
  margin: 0;
  padding: 0;
}

.brands-alphabet a {
  /* button look */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 44px;          /* thumb-friendly */
  height: 40px;
  padding: 0 12px;

  border: 1px solid #d7dbe0;
  border-radius: 999px;     /* pill */
  background: #fff;

  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: #1f2937;           /* neutral dark */

  /* smooth feel */
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.brands-alphabet a:hover {
  background: #f3f4f6;
  border-color: #c8cdd3;
}

.brands-alphabet a:active {
  transform: translateY(1px);
}

.brands-alphabet a:focus,
.brands-alphabet a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(197, 0, 46, 0.35); /* accessible focus ring */
  border-color: rgba(197, 0, 46, 0.75);
}

/* Optional: highlight the currently targeted letter section */
.brands-alphabet a[aria-current="true"],
.brands-alphabet a.is-active {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

/* ==============================
   Responsive tweaks
   ============================== */

/* Tablet: slightly tighter */
@media (max-width: 1024px) {
  .brands-alphabet ul { gap: 8px; }
  .brands-alphabet a  { height: 38px; min-width: 42px; font-size: 14px; }
}

/* Mobile: fill the row nicely; bigger touch targets */
@media (max-width: 640px) {
  .brands-alphabet ul {
    gap: 8px;
  }

  .brands-alphabet a {
    flex: 1 1 44px;   /* allows wrapping into tidy rows */
    min-width: 44px;
    height: 44px;     /* mobile touch */
    padding: 0 10px;
    font-size: 15px;
  }

}
@media (max-width: 768px) {
    .stat-box {
        padding: 1.6rem .75rem !important;
    }
  }

/* === FOOTER === */
.copyright,
.page-footer {
    background-color: #000000 !important;
}

.footer.content .links a,
.footer.content .links a:visited
 {
    color: #bf2227 !important;
}

/* === Buttons === */
button.action.tocart.primary,
button.action.subscribe.primary {
    background-color: #bf2227 !important;
    border: 1px solid #bf2227 !important;
    color: #fff !important;
}


/* --- Desktop: make the PageBuilder columns behave like true columns --- */
/* =========================================================
   Footer PageBuilder row: lock columns to 3-up on desktop
   and fix newsletter form overflow inside BQX8U9T column
   ========================================================= */

@media (min-width: 768px) {
    


  /* The PageBuilder "column-line" is already display:flex; width:100%.
     Ensure it doesn't allow weird stretching and keeps columns aligned. */
  #html-body .page-footer .pagebuilder-column-line[data-pb-style="A16CQQ4"]{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 24px; /* optional - remove if you don't want spacing */
  }

  /* Force each of the 3 columns to truly be 1/3 in flex terms */
  #html-body .page-footer .pagebuilder-column-line[data-pb-style="A16CQQ4"] > .pagebuilder-column[data-pb-style="DY6M1S9"],
  #html-body .page-footer .pagebuilder-column-line[data-pb-style="A16CQQ4"] > .pagebuilder-column[data-pb-style="KLVJEBE"],
  #html-body .page-footer .pagebuilder-column-line[data-pb-style="A16CQQ4"] > .pagebuilder-column[data-pb-style="BQX8U9T"]{
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
    min-width: 0 !important;           /* CRITICAL: allows children to shrink */
    box-sizing: border-box;
  }

  /* If you used gap above, the 3x 33.333% + gap can exceed 100%.
     This makes the newsletter column slightly flexible to avoid overflow. */
  #html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"]{
    flex: 1 1 33.3333% !important;     /* allow it to shrink a bit */
  }
}

/* =========================================================
   Footer newsletter: force input + button layout to behave
   Scope: PageBuilder column BQX8U9T only
   ========================================================= */

#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .block.newsletter,
#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .block.newsletter .content,
#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .block.newsletter form.form.subscribe {
  width: 100% !important;
  max-width: 100% !important;
}

/* Make the form a row: field grows, button stays sized */
#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] form.form.subscribe {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
}

/* Kill Magento newsletter floats that break in flex columns */
#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .block.newsletter .field,
#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .block.newsletter .control,
#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .block.newsletter .actions {
  float: none !important;
}

/* Fieldset must be a proper flex item */
#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .block.newsletter .fieldset {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Field must actually take space */
#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .field.newsletter {
  flex: 1 1 auto !important;
  min-width: 0 !important; /* CRITICAL: prevents input from disappearing */
  margin: 0 !important;
}

/* Make control/label a sane block that can size the input */
#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .field.newsletter .control {
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* Label wraps the input: make label behave, but hide ONLY the text span */
#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .field.newsletter label {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .field.newsletter label > .label {
  /* keep for accessibility but remove from layout */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Force the input to exist and fill the available width + match button height */
#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] input#newsletter {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Make the control and field fill the row height too */
#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .field.newsletter .control,
#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .field.newsletter label {
  height: 100% !important;
}

/* Button should NOT eat remaining space */
#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .actions {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .actions .action.subscribe {
  width: auto !important;
  white-space: nowrap !important;
  min-width: 140px;
}

/* Optional: remove duplicate "Newsletter" title inside block (you already have an H3) */
#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .block.newsletter .title {
  display: none;
}

/* Mobile: keep input + button on one row */
@media (max-width: 640px) {
  #html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] form.form.subscribe {
    flex-direction: row !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
  }

  #html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .field.newsletter {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    max-width: calc(100% - 120px) !important;
  }

  #html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .field.newsletter .control,
  #html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .field.newsletter label {
    width: 100% !important;
    height: 100% !important;
  }

  #html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] input#newsletter {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  #html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .actions {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }

  #html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] .actions .action.subscribe {
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

#html-body .page-footer .pagebuilder-column[data-pb-style="BQX8U9T"] h3 {
        color:  #bf2227 !important;
    }

    .product-info-main .product-add-form {
  padding-top: 0px !important;
} 

.product-info-main .product-info-price {
    margin-bottom: none !important; 
} 

.product.data.items.collapsed > [role=tablist] > .item.title > .switch {
    color: #fff !important;
    background: #c5002e !important;
}
.product.data.items.collapsed > [role=tablist] > .item.title.active > .switch, 
.product.data.items.collapsed > [role=tablist] > .item.title.active > .switch:focus, 
.product.data.items.collapsed > [role=tablist] > .item.title.active > .switch:hover {
    background: #ffffff !important;
    color: #333 !important;
    text-decoration: none;
}
/* Breadcrumbs — desktop separator color */
@media screen and (min-width: 768px) {
    .breadcrumbs .item:not(:last-child)::after {
        color: #000;
        margin: 0 6px;
    }
}