/* === 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: 768px), 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: 767px) {
    .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;
    }
}

/* =====================================================================
   Custom option groups (Hope, 2026-10-27, "Custom Options - CSS").
   Adjusted: the theme's QTY | checkbox | Description grid (_patch.less,
   .product-options-wrapper .options-list) is kept, so rows are not turned
   into flex rows and the qty box is not pushed right. Collapsed state is the
   .option-group-collapsed class set by js/custom.js, not an inline style.
   ===================================================================== */

/* Fix 3: each option group is a light gray card with a red left accent */
#product-options-wrapper > .fieldset > .field {
  background:#f7f7f8 !important;
  border:1px solid #e2e2e5 !important;
  border-left:4px solid #c0272d !important;
  border-radius:0 !important;
  padding:14px 16px 12px !important;
  margin:0 0 14px !important;
}
#product-options-wrapper > .fieldset > .field > .label {
  display:flex !important; justify-content:space-between !important;
  align-items:center !important; cursor:pointer !important;
  float:none !important; width:auto !important; text-align:left !important;
  margin:0 0 10px !important; padding:0 0 8px !important;
  border-bottom:1px solid #e2e2e5 !important;
  font-size:13px !important; font-weight:700 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important;
  color:#222 !important;
}
/* Luma sizes .control for a side-by-side label column (~80% wide); the label
   now sits on top, so let the options fill the card: equal 16px left/right */
#product-options-wrapper > .fieldset > .field > .control {
  width:100% !important; float:none !important; margin-left:0 !important;
}
/* the theme sizes the title span itself (20px/900), so restyle it too */
#product-options-wrapper > .fieldset > .field > .label > span {
  font-size:13px !important; font-weight:700 !important;
}
#product-options-wrapper .options-list .field.choice {
  background:#fff !important;
  border:1px solid #e2e2e5 !important; border-radius:4px !important;
  padding:8px 12px !important; margin:0 0 6px !important;
  transition:border-color .2s ease !important;
}
#product-options-wrapper .options-list .field.choice:hover { border-color:#c0272d !important; }
#product-options-wrapper .options-list .field.choice input.checkbox {
  accent-color:#c0272d; width:16px; height:16px; margin:0 !important;
}
#product-options-wrapper .options-list .field.choice > .label {
  margin:0 !important; padding:0 !important;
  font-size:14px !important; color:#333 !important;
}
#product-options-wrapper .price-notice {
  color:#c0272d !important; font-weight:600 !important; margin-left:6px !important;
}
#product-options-wrapper .label-qty {
  font-size:13px !important; color:#555 !important;
}
#product-options-wrapper .label-qty input.qty {
  height:30px !important;
  border:1px solid #ccc !important; border-radius:4px !important;
}
#product-options-wrapper .label-qty input.qty:disabled { background:#f2f2f2 !important; }

/* Fix 4: a collapsed group shows as a clean bar */
#product-options-wrapper > .fieldset > .field.option-group-collapsed {
  padding:12px 16px !important;
}
#product-options-wrapper > .fieldset > .field.option-group-collapsed > .label {
  border-bottom:0 !important; margin:0 !important; padding:0 !important;
}

/* Fix 5: guests see no option prices, so hide the stray "+" too */
body:not(.customer-logged-in) #product-options-wrapper .price-notice {
  display:none !important;
}

/* PDP "Availability by Warehouse" box (Hope, 2026-10-27) */
.anarchy-source-qty-box {
  background:#fff !important;
  border:1px solid #e2e2e5 !important; border-radius:6px !important;
  overflow:hidden !important; max-width:none !important;
  margin:18px 0 !important; padding:0 !important;
}
.anarchy-source-qty-title {
  background:#222 !important; color:#fff !important;
  font-size:13px !important; font-weight:700 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important;
  padding:10px 14px !important; margin:0 !important;
}
.anarchy-source-qty-row {
  display:block !important;
  padding:10px 14px !important; margin:0 !important;
  border-top:1px solid #eee !important;
}
.anarchy-source-qty-list .anarchy-source-qty-row:first-child { border-top:0 !important; }
.anarchy-source-qty-row .anarchy-source-name {
  display:block !important; font-weight:600 !important;
  font-size:14px !important; color:#222 !important;
}
.anarchy-source-qty-row .anarchy-source-value {
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  margin-top:4px !important; font-size:13px !important; font-weight:600 !important;
  color:#1e7b3a !important;
}
.anarchy-source-qty-row .anarchy-source-value::before {
  content:""; width:8px; height:8px; border-radius:50%; background:#2ea44f;
}
.anarchy-source-qty-row.out-of-stock .anarchy-source-value { color:#757575 !important; }
.anarchy-source-qty-row.out-of-stock .anarchy-source-value::before { background:#9e9e9e; }

/* Footer: company name heading had the default top margin, so the address column sat
   ~23px below the links column. Align both columns to the top of the footer. */
.page-footer .footer-company-info > h4:first-child { margin-top: 0; }

/* Pages without breadcrumbs (login, forgot password, quote cart, search terms, 404,
   Contact Us...) had their title touching the nav bar. Breadcrumb pages already get ~13px
   from the breadcrumbs; full-width pages (home hero) use .page-main-full-width and are
   untouched. Customer account pages (body.account) already have their own top spacing. */
body:not(.account):not(:has(.breadcrumbs li)) .page-main { padding-top: 24px; }

/* Phones, customer account pages: Luma pulls the collapsible MY ACCOUNT menu 21px above
   the content (top:-21px), which overlaps this theme's taller header. Start it 12px below
   the header and move the content down by the same 33px. */
@media (max-width: 767px) {
    body.account .block-collapsible-nav { top: 12px; }
    body.account .page-main { padding-top: 74px; }
}

/* Phones: Luma hides breadcrumbs, so on breadcrumb pages (categories, products, Advanced
   Search, Orders and Returns...) the page title ended up touching the header. Hero pages
   (About Us, Careers) have no visible title wrapper and are unaffected. */
@media (max-width: 767px) {
    body:not(.account):has(.breadcrumbs li) .page-main .page-title-wrapper { padding-top: 20px; }
}

/* Footer links for logged-in customers only: Orders and Returns (My Orders) and
   MageDelight's Offers just for you (which points guests at the login page). */
body:not(.customer-logged-in) .footer.links li:has(> a[href*="/sales/order/history"]),
body:not(.customer-logged-in) .footer.links li:has(> a[href*="/customer/account/login"]) { display: none !important; }

/* Space before the footer. Standard pages (forms, account, catalog, search) ended flush
   against it (e.g. the Orders and Returns Continue button). CMS pages are excluded: their
   full-width bands (Home, Careers, RMA, Support) are meant to meet the footer. The Privacy
   page is CMS but plain text, so it gets the same gap. */
body:not(.cms-page-view):not(.cms-index-index) .page-main { padding-bottom: 40px; }
.cms-page-view .privacy-policy { margin-bottom: 40px; }

/* Responsive image / overflow fixes (2026-10-30 image audit).
   - Phones: the theme sets the logo to height 50px while its width stays capped at 150px,
     squashing it (3.85:1 shown as 3:1). Let the width follow the height instead.
   - Phones: the theme fixes product cards at width 168px; with padding and border that is
     185px, so the right card ran 3px off screen. Fill the column instead, and let the
     "Login to Request Quote" button wrap so it fits the narrower card. */
@media (max-width: 767px) {
    .logo img { width: auto; height: 50px; max-width: none; }
    .page-products .products-grid .product-item-info { width: 100%; box-sizing: border-box; }
    .products-grid .product-item-info .action.primary {
        white-space: normal; width: 100%; box-sizing: border-box; padding-left: 8px; padding-right: 8px;
    }
}

/* Home hero banner: the wording is part of the image, and the Page Builder row is a fixed
   600px tall with background-size: cover, so whenever the screen's shape differs from the
   image's the sides were cropped (desktop lost the start of every line; phones lost the
   end). Size the row to each image's own proportions so the whole image always shows.
   Desktop slider1_desktop.png is 2025x750; mobile Slider4_mobile_1_.png is 750x900.
   Matched by image file name because Page Builder renames its style IDs on every save;
   if the banner image is replaced, update the file name and ratio here. */
#html-body .page-main-full-width [data-background-images*="slider1_desktop.png"] {
    min-height: 0;
    aspect-ratio: 2025 / 750;
}
@media (max-width: 767px) {
    #html-body .page-main-full-width [data-background-images*="slider1_desktop.png"] {
        aspect-ratio: 750 / 900;
    }
}

/* Product page tabs (Swissup EasyTabs). The tab-title row is a non-wrapping flex row; on
   tablets (768-1023px) it was wider than its container (896px in 713px at 768), which pushed
   the floated tab content 183px off the right edge. Keep the row inside its container and let
   it scroll sideways; EasyTabs' own < > arrow buttons then scroll it (verified). Scrollbar
   hidden because the arrows are the control. Selector is more specific than Magento's desktop
   rule (.product.data.items.collapsed > [role=tablist] { overflow-x: visible }), which loads later. */
.catalog-product-view .product.data.items.collapsed > .easytabs-tablist[role="tablist"] {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.catalog-product-view .product.data.items.collapsed > .easytabs-tablist[role="tablist"]::-webkit-scrollbar { display: none; }

/* Footer newsletter. (1) The theme's ".account .block" card style (white, rounded, bordered)
   also caught the footer newsletter on account pages, wrapping it in a white box with a strip
   right of Subscribe. (2) The form is a CSS table and, on phones, the email field shrank to
   its content (~99px) leaving a gap before the button. Lay it out as a flex row instead:
   the field fills the space, Subscribe sits flush against it. */
.account .page-footer .block.newsletter {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.page-footer .block.newsletter form.form.subscribe {
    display: flex !important;
    align-items: stretch;
    width: 100%;
}
.page-footer .block.newsletter .field.newsletter {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    max-width: none;
    margin: 0 !important;
}
.page-footer .block.newsletter .field.newsletter .control,
.page-footer .block.newsletter .field.newsletter .control label,
.page-footer .block.newsletter .field.newsletter .control input {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
}
.page-footer .block.newsletter .actions {
    display: block !important;
    flex: 0 0 auto;
    width: auto !important;
}

/* Tablets (768-1023px): signed-in customers get an extra QUOTE nav item, which pushed CAREERS
   ~3px past the right edge (sideways scroll). Tighten the gap between top-level items. */
@media (min-width: 768px) and (max-width: 1023px) {
    .page-wrapper .nav-sections .navigation > ul > li.level0 { margin-right: 6px; }
}