/* ═══════════════════════════════════════════════════════════════
   SUMMERTOWN METALS — Brand overlay
   Applies on top of Hummingbird's compiled theme.css.
   Loaded from templates/_partials/stylesheets.tpl
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Allura&family=DM+Sans:wght@400;500;600;700&display=swap');

:root,
[data-bs-theme=light] {
  /* Brand tokens */
  --brand-red:        #B41B27;
  --brand-red-dark:   #8C1019;
  --brand-red-soft:   #f5d9dc;
  --brand-slate:      #5A8499;
  --brand-slate-dark: #3F6478;
  --brand-navy:       #1B2A3D;
  --brand-cream:      #FAF6EF;

  /* Override Bootstrap primary */
  --bs-primary:       #B41B27;
  --bs-primary-rgb:   180, 27, 39;
  --bs-link-color:    #B41B27;
  --bs-link-hover-color: #8C1019;
  --bs-link-color-rgb: 180, 27, 39;

  /* Type */
  --bs-body-font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  --bs-heading-font-family: "Oswald", "Arial Narrow", sans-serif;
  --bs-body-color: #1B2333;
}

/* ───── Typography */
body {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  color: #1B2333;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Oswald", "Arial Narrow", sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--brand-navy);
}
.page-title, .h1.page-title, h1.page-title { letter-spacing: 0.01em; }

/* ───── Header — utility (top) bar */
.header-top {
  background: var(--brand-navy);
  color: #d8dde6;
}
.header-top a { color: #d8dde6; }
.header-top a:hover { color: #fff; }
.header-top .header-block { color: #d8dde6; }

/* ───── Header — main strip */
.header-bottom { background: #fff; box-shadow: 0 1px 0 #E5DDD0; }
.header-bottom__logo img { max-height: 72px; width: auto; }

/* ───── Header — full-width nav (red mega bar) */
.header-nav-full-width {
  background: var(--brand-red);
  color: #fff;
}
.header-nav-full-width a { color: #fff; }
.header-nav-full-width a:hover { color: #fff; background: var(--brand-red-dark); }
.header-nav-full-width .top-menu > li > a,
.header-nav-full-width .navbar-nav .nav-link {
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 18px 16px;
}
.header-nav-full-width .top-menu > li > a:hover,
.header-nav-full-width .top-menu > li.active > a {
  background: var(--brand-red-dark);
  border-bottom: 3px solid #fff;
  margin-bottom: -3px;
}

/* ───── Buttons */
.btn-primary,
.btn-action,
.btn[class*="btn-add-to-cart"] {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: #fff !important;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 13px;
  border-radius: 2px;
}
.btn-primary:hover,
.btn-action:hover,
.btn[class*="btn-add-to-cart"]:hover {
  background-color: var(--brand-red-dark) !important;
  border-color: var(--brand-red-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px var(--brand-red);
}
.btn-secondary {
  background-color: transparent;
  border: 2px solid var(--brand-navy);
  color: var(--brand-navy);
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 13px;
  border-radius: 2px;
}
.btn-secondary:hover {
  background-color: var(--brand-navy);
  color: #fff;
}

/* ───── Forms — inputs accent */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 0.2rem rgba(180,27,39,0.15);
}

/* ───── Product cards */
.product-miniature .product-title a {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brand-navy);
}
.product-miniature .product-title a:hover { color: var(--brand-red); }
.product-miniature .product-price-and-shipping .price {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  color: var(--brand-navy);
}
.product-miniature .regular-price { color: #79808e; }
.product-flag,
.product-flag.discount,
.product-flag.new,
.product-flag.on-sale {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  border-radius: 2px;
}

/* ───── Product page */
.product-prices .current-price,
.product-prices .product-price,
.current-price-value {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  color: var(--brand-navy);
}
.product-prices .discount-percentage,
.product-flag.discount {
  background: var(--brand-red);
  color: #fff;
}

/* ───── Breadcrumb */
.breadcrumb {
  background: var(--brand-cream);
  border-bottom: 1px solid #E5DDD0;
  padding: 12px 0;
  font-size: 12px;
}
.breadcrumb a { color: #4a5566; }
.breadcrumb a:hover { color: var(--brand-red); }
.breadcrumb-item.active,
.breadcrumb-item:last-child { color: var(--brand-navy); font-weight: 600; }

/* ───── Section titles (featured / new / bestsellers) */
.featured-products .h2,
.products-section-title,
.section-title {
  font-family: "Oswald", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--brand-navy);
  font-weight: 700;
}

/* ───── Footer */
.footer-container,
.footer,
footer.footer,
#footer {
  background: #0E1626;
  color: #c2c8d4;
}
.footer-container *,
.footer *,
footer.footer *,
#footer * { color: inherit; }
.footer-container a,
.footer a,
footer.footer a,
#footer a {
  color: #8893a4;
}
.footer-container a:hover,
.footer a:hover,
footer.footer a:hover,
#footer a:hover { color: #fff; }
.footer-container h3,
.footer-container h4,
.footer-container h5,
.footer h3, .footer h4, .footer h5,
#footer h3, #footer h4, #footer h5 {
  font-family: "Oswald", sans-serif;
  color: #fff;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 14px;
}
.footer-before {
  background: var(--brand-navy);
  color: #c2c8d4;
}

/* Newsletter input on dark footer */
.footer .form-control,
#footer .form-control {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}
.footer .form-control::placeholder,
#footer .form-control::placeholder { color: #6b7587; }

/* ───── Reassurance block (free delivery, warranty, etc.) */
.block-reassurance {
  background: var(--brand-cream);
  border-color: #E5DDD0;
}
.block-reassurance li {
  border-color: #E5DDD0;
}
.block-reassurance li img,
.block-reassurance li svg { filter: brightness(0); }

/* ───── Category headers */
.category-header,
.page-header,
#category .category-header {
  background: var(--brand-slate);
  color: #fff;
}
.category-header h1,
.page-header h1,
#category .category-header h1 {
  color: #fff;
}
.category-description { color: rgba(255,255,255,0.92); }

/* ───── Facets sidebar — just minimal Oswald headings, otherwise default */
#search_filters_wrapper > h4,
#search_filters > h4,
.block-category-filter-title,
.facets-title,
#search_filters .facet__title,
.facet__title,
.facet-title {
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-navy);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE: hide the inline left-column entirely.
   Hummingbird ships a "Filter" button (in products-top.tpl) that
   opens an offcanvas with the same facets — that's the proper
   mobile filter UX. We just need to keep our inline #left-column
   from rendering at the top of the page.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  /* Hide the inline left-column on mobile (filters live in the offcanvas) */
  #left-column,
  .left-column,
  .wrapper__left-column,
  #stm-mobile-filters {
    display: none !important;
  }
  /* Hide the category-tree list inside the offcanvas too — top nav covers it */
  #offcanvas-faceted .block-categories,
  #offcanvas-faceted #categories_block_left,
  #offcanvas-faceted .block_categorytree,
  #offcanvas-faceted .block-categorytree,
  #offcanvas-faceted .ps_categorytree,
  #offcanvas-faceted #ps_categorytree,
  #offcanvas-faceted nav.block-categories,
  #offcanvas-faceted .category-top-menu,
  #offcanvas-faceted .category-sub-menu,
  .stm-offcanvas-faceted .block-categories,
  .stm-offcanvas-faceted #categories_block_left,
  .stm-offcanvas-faceted .block_categorytree,
  .stm-offcanvas-faceted .block-categorytree,
  .stm-offcanvas-faceted .ps_categorytree,
  .stm-offcanvas-faceted .category-top-menu,
  .stm-offcanvas-faceted .category-sub-menu {
    display: none !important;
  }
  /* Nuclear: hide every direct child of the offcanvas body except the
     facets/filters wrapper and the active-filters block. */
  #offcanvas-faceted .offcanvas-body > *:not(#search_filters):not(#search_filters_wrapper):not(.search-filters):not(.search-filters-wrapper):not(#js-active-search-filters):not(.js-search-filters-clear-all-wrapper):not(.facets-title):not(p) {
    display: none !important;
  }
  /* Style the offcanvas filter panel (Hummingbird's mobile filter UI) */
  .stm-offcanvas-faceted,
  #offcanvas-faceted {
    width: min(92vw, 360px) !important;
    background: #fff;
  }
  .stm-offcanvas-faceted .offcanvas-header,
  #offcanvas-faceted .offcanvas-header {
    background: var(--brand-navy);
    color: #fff;
    padding: 14px 22px;
  }
  .stm-offcanvas-faceted .offcanvas-title,
  #offcanvas-faceted .offcanvas-title {
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    letter-spacing: 0.18em;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
  }
  .stm-offcanvas-faceted .offcanvas-header .btn-close,
  #offcanvas-faceted .offcanvas-header .btn-close {
    filter: invert(1) brightness(1.4);
  }
  .stm-offcanvas-faceted .offcanvas-body,
  #offcanvas-faceted .offcanvas-body {
    padding: 0;
  }
  .stm-offcanvas-faceted #search_filters,
  .stm-offcanvas-faceted #search_filters_wrapper,
  #offcanvas-faceted #search_filters,
  #offcanvas-faceted #search_filters_wrapper {
    padding: 16px 22px;
  }
  /* When facets live inside our offcanvas, give them the same
     always-expanded, single-title look as desktop. */
  #offcanvas-faceted .facet .collapse,
  #offcanvas-faceted .facet ul.collapse,
  #offcanvas-faceted .collapse,
  .stm-offcanvas-faceted .facet .collapse,
  .stm-offcanvas-faceted .collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
  }
  /* Hide the duplicate mobile-only toggle row */
  #offcanvas-faceted .facet .title.d-md-none,
  #offcanvas-faceted .facet .title[data-bs-toggle="collapse"],
  #offcanvas-faceted .facet .title[data-target],
  .stm-offcanvas-faceted .facet .title.d-md-none,
  .stm-offcanvas-faceted .facet .title[data-bs-toggle="collapse"] {
    display: none !important;
  }
  /* Show the desktop facet title in the offcanvas */
  #offcanvas-faceted .facet > .facet-title,
  #offcanvas-faceted .facet > p.facet-title,
  #offcanvas-faceted .facet > h6.facet-title,
  .stm-offcanvas-faceted .facet > .facet-title {
    display: block !important;
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 10px;
    font-size: 13px;
  }
  /* Make each facet row tappable and roomy */
  #offcanvas-faceted .facet,
  .stm-offcanvas-faceted .facet {
    border-bottom: 1px solid #E5DDD0;
    padding: 14px 0;
  }
  #offcanvas-faceted .facet ul li,
  #offcanvas-faceted .facet .facet-label,
  #offcanvas-faceted .facet a.search-link,
  #offcanvas-faceted .facet a.js-search-link,
  .stm-offcanvas-faceted .facet ul li,
  .stm-offcanvas-faceted .facet .facet-label,
  .stm-offcanvas-faceted .facet a.search-link,
  .stm-offcanvas-faceted .facet a.js-search-link {
    pointer-events: auto !important;
    cursor: pointer;
    padding: 6px 0;
    font-size: 15px;
  }
  /* Touch-friendly checkbox / radio */
  #offcanvas-faceted .facet input[type="checkbox"],
  #offcanvas-faceted .facet input[type="radio"],
  .stm-offcanvas-faceted .facet input[type="checkbox"],
  .stm-offcanvas-faceted .facet input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    accent-color: var(--brand-red);
  }
  /* Active filters list inside offcanvas */
  #offcanvas-faceted #js-active-search-filters,
  .stm-offcanvas-faceted #js-active-search-filters {
    background: var(--brand-cream);
    padding: 12px 22px;
    margin: 0 -22px 12px;
  }
  /* "Clear all" button inside the offcanvas */
  #offcanvas-faceted .js-search-filters-clear-all,
  .stm-offcanvas-faceted .js-search-filters-clear-all {
    background: transparent;
    border: 0;
    color: var(--brand-red);
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
    padding: 4px 0;
  }
  /* Make sure the "Filter" button itself is branded */
  .products__filter-button,
  .js-search-toggler,
  #search_filter_toggler {
    background: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    color: #fff !important;
    font-family: "Oswald", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
  }
}
#left-column > *:not(#search_filters):not(#search_filters_wrapper):not(.search-filters):not(.search-filters-wrapper):not(#js-active-search-filters):not(.js-search-filters-clear-all-wrapper) {
  display: none !important;
}
/* Belt-and-suspenders for nested category-tree markup */
#left-column .block-categories,
#left-column #categories_block_left,
#left-column .block_categorytree,
#left-column .block-categorytree,
#left-column .ps_categorytree,
#left-column #ps_categorytree,
#left-column nav.block-categories,
#left-column .category-top-menu,
.block-categories,
#categories_block_left,
.block_categorytree,
.block-categorytree,
.ps_categorytree,
#ps_categorytree {
  display: none !important;
}
/* And remove the "Categories" facet from inside ps_facetedsearch if it appears */
#search_filters .facet[data-name="Categories" i],
#search_filters .facet.facet--categories,
.facet--category,
.facet--categories {
  display: none !important;
}

/* ───── Facet collapse — force always-expanded for clickability ─────
   Hummingbird's facets.tpl uses Bootstrap collapse to hide filter values
   behind a toggle button. If the BS collapse JS isn't initialising (which
   can happen on this theme stack), the filters look "flat" and unclickable.
   Force every facet's value list to be visible regardless of collapse state,
   and hide the mobile-only toggle buttons that would otherwise look broken. */
/* ───── Facet collapse — force always-expanded for clickability ─────
   Desktop only — on mobile the drawer handles expand/collapse itself. */
@media (min-width: 992px) {
  #search_filters .facet .collapse,
  #search_filters .facet ul.collapse,
  #search_filters_wrapper .collapse,
  .facet .collapse,
  section.facet .collapse,
  section.facet ul.collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
  }
  /* Hide the duplicate mobile toggle title — the desktop title is enough */
  #search_filters .facet .title.d-md-none,
  section.facet .title.d-md-none,
  .facet > .title[data-bs-toggle="collapse"],
  .facet > .title[data-target] {
    display: none !important;
  }
}

/* Mobile — desktop title hidden in favor of single .title toggle */
@media (max-width: 991px) {
  /* No special facet markup styling here — Hummingbird's offcanvas
     handles the mobile filter UI completely. */
}

/* Make sure the facet labels/inputs are interactive */
#search_filters .facet ul li,
#search_filters .facet .facet-label,
#search_filters .facet a.search-link,
#search_filters .facet a.js-search-link,
.facet ul li,
.facet .facet-label,
.facet a.search-link,
.facet a.js-search-link {
  pointer-events: auto !important;
  cursor: pointer;
}

/* ───── Hero / image slider */
.imageslider-arrow-prev,
.imageslider-arrow-next { color: var(--brand-red); }
.swiper-pagination-bullet-active { background: var(--brand-red); }

/* ───── Tags / chips */
.badge.bg-primary { background-color: var(--brand-red) !important; }
.badge.bg-secondary { background-color: var(--brand-navy) !important; }

/* ───── Pagination */
.pagination .page-link {
  color: var(--brand-navy);
  border-color: #E5DDD0;
}
.pagination .page-item.active .page-link {
  background: var(--brand-red);
  border-color: var(--brand-red);
}

/* ───── Cursive script accent helper */
.summertown-script {
  font-family: "Allura", cursive !important;
  font-weight: 400;
  color: var(--brand-red);
  letter-spacing: 0;
}

/* ───── Slogan footer ribbon */
.summertown-slogan {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--brand-red);
  text-align: center;
  padding: 8px 0;
  background: var(--brand-cream);
  border-top: 1px solid #E5DDD0;
  border-bottom: 1px solid #E5DDD0;
}
.summertown-slogan em {
  font-family: "Allura", cursive;
  font-style: normal;
  text-transform: none;
  font-size: 1.6em;
  font-weight: 400;
  color: var(--brand-red);
  margin: 0 4px;
  letter-spacing: 0;
}

/* ───── Top contact bar custom */
.header-top .ps-contact-info,
.header-top .ps_contactinfo {
  font-family: "DM Sans", sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV — hamburger toggle, off-canvas drawer
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Mobile header — bulletproof absolute positioning so nothing
     hooked into displayTop can break the layout */
  .header { box-shadow: 0 1px 0 #E5DDD0; }
  .header-bottom { padding: 0 !important; }
  .header-bottom__container {
    padding: 0 !important;
    max-width: 100% !important;
  }
  .header-bottom__row {
    display: block !important;
    position: relative !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  /* Hide every direct child of the header row by default — we'll
     bring back only the bits we need with explicit positioning */
  .header-bottom__row > * {
    display: none !important;
  }

  /* Hamburger — pinned hard-left */
  .header-bottom__row .stm-mobile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    background: transparent;
    color: var(--brand-navy);
    cursor: pointer;
    z-index: 5;
    -webkit-tap-highlight-color: rgba(180,27,39,0.2);
  }
  .stm-mobile-toggle .material-icons { font-size: 28px; line-height: 1; }

  /* Search icon — pinned hard-right */
  .header-bottom__row .stm-mobile-search-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    background: transparent;
    color: var(--brand-navy);
    cursor: pointer;
    z-index: 5;
    -webkit-tap-highlight-color: rgba(180,27,39,0.2);
  }
  .stm-mobile-search-toggle .material-icons { font-size: 22px; line-height: 1; }

  /* Logo — centered absolutely */
  .header-bottom__row .header-bottom__logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    left: 56px !important;
    right: 56px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
  }
  /* When menu is open, swap the header logo to the white version
     so it's visible on top of the drawer's navy header bar */
  body.stm-nav-open .header-bottom__row .header-bottom__logo img,
  body.stm-nav-open .header-bottom__row .header-bottom__logo .logo {
    content: url("../img/logo-white.png");
  }
  body.stm-nav-open .header-bottom__row .header-bottom__logo {
    z-index: 10002 !important;
  }
  body.stm-nav-open .stm-mobile-toggle {
    color: #fff !important;
    z-index: 10002 !important;
  }
  .header-bottom__logo .header-bottom__h1 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
  }
  .header-bottom__logo .navbar-brand {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
  }
  .header-bottom__logo img,
  .header-bottom__logo .logo {
    max-height: 40px !important;
    height: 40px !important;
    width: auto !important;
    object-fit: contain;
  }

  /* Search slide-down — full width, OUTSIDE the row */
  .header-bottom__row .search-widgets,
  .header-bottom__row #search_widget {
    display: none !important;
  }
  /* When search-open, we move the search widget OUT of the row via JS
     into a separate slot below the header, see header.tpl */
  .stm-search-slot {
    display: none;
    background: var(--brand-cream);
    border-top: 1px solid #E5DDD0;
    padding: 12px 14px;
  }
  body.stm-search-open .stm-search-slot { display: block; }
  .stm-search-slot form,
  .stm-search-slot #search_widget form {
    display: flex !important;
    align-items: center !important;
    background: #fff;
    border: 1.5px solid #E5DDD0;
    border-radius: 4px;
    padding: 0 12px !important;
    height: 42px;
    position: relative;
    margin: 0 !important;
  }
  .stm-search-slot .material-icons.search {
    color: #79808e;
    font-size: 18px !important;
    margin-right: 8px;
    flex-shrink: 0;
    position: static !important;
    top: auto !important; left: auto !important;
  }
  .stm-search-slot .material-icons.clear { display: none !important; }
  .stm-search-slot input[name="s"],
  .stm-search-slot input[type="text"] {
    flex: 1 1 auto !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    outline: none !important;
    font-size: 15px;
    height: 100%;
    box-shadow: none !important;
  }

  /* Nav drawer — full screen on mobile */
  #_desktop_top_menu {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #fff !important;
    z-index: 10000 !important;
    transform: translateY(-100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.stm-nav-open #_desktop_top_menu { transform: translateY(0); }

  /* Drawer header bar — branded with logo + close X */
  #_desktop_top_menu::before {
    content: "";
    display: block;
    height: 56px;
    background: var(--brand-navy);
  }
  /* Close (X) button injected by JS */
  .stm-drawer-close {
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10001 !important;
    width: 44px !important;
    height: 44px !important;
    border: 0;
    background: transparent;
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  .stm-drawer-close .material-icons { font-size: 28px; line-height: 1; }
  body.stm-nav-open .stm-drawer-close { display: inline-flex !important; }

  /* MENU label inside the drawer header */
  #_desktop_top_menu .top-menu {
    list-style: none; margin: 0; padding: 0;
    display: block !important;
  }
  #_desktop_top_menu .top-menu[data-depth="0"] > li.category {
    border-bottom: 1px solid #E5DDD0;
    display: block !important;
  }
  #_desktop_top_menu .top-menu[data-depth="0"] > li.category > a.dropdown-item {
    display: block !important;
    padding: 22px 28px !important;
    color: var(--brand-navy) !important;
    font-family: "Oswald", sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    background: transparent !important;
    border-bottom: 0 !important;
    line-height: 1.1;
  }
  #_desktop_top_menu .top-menu[data-depth="0"] > li.category > a.dropdown-item:active {
    background: var(--brand-cream) !important;
    color: var(--brand-red) !important;
  }
  #_desktop_top_menu .sub-menu {
    background: var(--brand-cream);
    padding: 6px 0 10px;
    display: block !important;
  }
  #_desktop_top_menu .sub-menu a.dropdown-item {
    display: block !important;
    padding: 14px 28px 14px 48px !important;
    color: #4a5566 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 16px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  #_desktop_top_menu .clearfix { display: none !important; }

  /* Backdrop no longer needed since drawer is full-screen */
  .stm-nav-backdrop { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP MENU — explicit horizontal layout
   (fallback in case Hummingbird's compiled CSS combiner misses it)
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  /* Hide mobile-only toggles on desktop */
  .stm-mobile-toggle,
  .stm-mobile-search-toggle,
  .stm-nav-backdrop { display: none !important; }
  /* Desktop menu container */
  #_desktop_top_menu {
    flex: 1 1 auto;
    min-width: 0;
  }
  #_desktop_top_menu .top-menu[data-depth="0"] {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: nowrap;
  }
  #_desktop_top_menu .top-menu[data-depth="0"] > li.category {
    position: relative;
    list-style: none;
  }
  #_desktop_top_menu .top-menu[data-depth="0"] > li.category > a.dropdown-item {
    display: inline-flex;
    align-items: center;
    padding: 18px 16px;
    color: var(--brand-navy);
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    background: transparent;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
  }
  #_desktop_top_menu .top-menu[data-depth="0"] > li.category:hover > a.dropdown-item,
  #_desktop_top_menu .top-menu[data-depth="0"] > li.category.current > a.dropdown-item {
    color: var(--brand-red);
    border-bottom-color: var(--brand-red);
    background: rgba(180,27,39,0.04);
  }

  /* Submenu — appears on hover, never the inline accordion */
  #_desktop_top_menu .top-menu[data-depth="0"] > li.category .sub-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    box-shadow: 0 18px 36px -10px rgba(27,42,61,0.22);
    border-top: 3px solid var(--brand-red);
    z-index: 100;
    padding: 14px 0;
  }
  #_desktop_top_menu .top-menu[data-depth="0"] > li.category:hover .sub-menu {
    display: block !important;
  }
  #_desktop_top_menu .top-menu[data-depth="0"] .sub-menu .top-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
  }
  #_desktop_top_menu .top-menu[data-depth="0"] .sub-menu a.dropdown-item {
    display: block;
    padding: 10px 24px;
    color: var(--brand-navy);
    font-size: 14px;
    font-family: "DM Sans", sans-serif;
    text-transform: none;
    letter-spacing: 0;
    transition: color 0.15s, background 0.15s;
  }
  #_desktop_top_menu .top-menu[data-depth="0"] .sub-menu a.dropdown-item:hover {
    color: var(--brand-red);
    background: var(--brand-cream);
  }

  /* Hide the mobile chevron toggle icons on desktop */
  #_desktop_top_menu .navbar-toggler.collapse-icons,
  #_desktop_top_menu .hidden-md-up {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH WIDGET — keep it inline at a reasonable width
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  /* Force the whole header row to lay out on a single line */
  .header-bottom__row {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .header-bottom__logo {
    flex: 0 0 auto !important;
  }
  /* Menu eats remaining space, search sits flush right */
  #_desktop_top_menu {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    align-self: center !important;
    margin: 0 !important;
  }
  #search_widget.search-widgets {
    flex: 0 0 320px !important;
    width: 320px !important;
    max-width: 320px !important;
    margin: 0 0 0 16px !important;
    align-self: center !important;
  }

  /* The form — proper inline flex with icon + input on one row */
  #search_widget form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: var(--brand-cream);
    border: 1.5px solid #E5DDD0;
    border-radius: 4px;
    padding: 0 12px !important;
    height: 42px;
    margin: 0 !important;
    position: relative;
  }
  #search_widget form .material-icons.search {
    color: #79808e;
    font-size: 18px !important;
    flex-shrink: 0;
    margin-right: 8px;
    order: 0;
    line-height: 1;
    position: static !important;
    top: auto !important;
    left: auto !important;
  }
  #search_widget form .material-icons.clear { display: none !important; }
  #search_widget input[type="text"],
  #search_widget input[name="s"] {
    flex: 1 1 auto !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    outline: none !important;
    font-size: 14px;
    color: var(--brand-navy);
    order: 1;
    min-width: 0;
    height: 100%;
    box-shadow: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — image slider, custom text, banner
   ═══════════════════════════════════════════════════════════════ */

.homeslider-container { position: relative; overflow: hidden; }
.homeslider-container .slide img { width: 100%; height: auto; display: block; }
.homeslider-container .caption {
  position: absolute; bottom: 24px; left: 24px; max-width: 520px;
  background: rgba(27,42,61,0.78); color: #fff; padding: 24px 28px;
  border-radius: 4px;
}
.homeslider-container .caption h2 {
  font-family: "Oswald", sans-serif;
  font-size: clamp(24px, 3vw, 36px); color: #fff;
  letter-spacing: 0.02em; margin-bottom: 6px;
}
.homeslider-container .caption h3 {
  font-family: "Oswald", sans-serif;
  color: #FFC15E; letter-spacing: 0.14em; font-size: 13px;
  margin-bottom: 10px; text-transform: uppercase;
}
.homeslider-container .caption p { font-size: 14px; line-height: 1.55; }

#custom-text { padding: 48px 0; }
#custom-text h2,
.featured-products .h2,
section > h1 {
  font-family: "Oswald", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--brand-navy);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

/* "All products" link styling */
section > a {
  display: inline-block;
  margin-top: 18px;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--brand-red);
}
section > a:hover { color: var(--brand-red-dark); }

/* Storefront homepage — make the "All products" link prominent */
.stm-storefront__products > section > a,
.page-content--home section > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 36px auto 12px !important;
  padding: 16px 36px !important;
  font-family: "Oswald", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 15px !important;
  color: #fff !important;
  background: var(--brand-red);
  border: 2px solid var(--brand-red);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
  align-self: center;
}
.stm-storefront__products > section > a:hover,
.page-content--home section > a:hover {
  background: var(--brand-red-dark) !important;
  border-color: var(--brand-red-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px var(--brand-red);
}
.stm-storefront__products > section > a::after,
.page-content--home section > a::after {
  content: " →";
  font-weight: 700;
}

/* Products grid */
.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 12px 0;
}
@media (max-width: 991px) { .products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .products { grid-template-columns: repeat(2, 1fr); } }

/* Banner */
.banner img { width: 100%; height: auto; }
.banner { display: block; margin: 32px 0; }

/* Hide the demo "Hummingbird" sample products' Quick view by default — looks cleaner */
.product-miniature__quickview-button { background: rgba(255,255,255,0.92); }

/* ═══════════════════════════════════════════════════════════════
   "CONTACT TO PURCHASE" CARD — shown on every product page
   ═══════════════════════════════════════════════════════════════ */

.stm-contact-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 22px 0;
  padding: 18px 22px;
  background: var(--brand-cream);
  border: 1px solid #E5DDD0;
  border-left: 4px solid var(--brand-red);
  border-radius: 4px;
}
.stm-contact-card__photo {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(180,27,39,0.18);
}
.stm-contact-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.stm-contact-card__body { flex: 1; min-width: 0; }
.stm-contact-card__eyebrow {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--brand-red);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.stm-contact-card__name {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--brand-navy);
  margin: 0 0 2px;
  line-height: 1.1;
}
.stm-contact-card__role {
  font-size: 13px;
  color: #4a5566;
  margin-bottom: 10px;
}
.stm-contact-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.stm-contact-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-navy);
  text-decoration: none;
  transition: color 0.15s;
}
.stm-contact-card__link:hover { color: var(--brand-red); }
.stm-contact-card__link .material-icons {
  font-size: 18px;
  color: var(--brand-red);
}

@media (max-width: 575px) {
  .stm-contact-card { flex-direction: column; text-align: center; align-items: center; padding: 22px 18px; }
  .stm-contact-card__links { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   MINIMAL FOOTER
   ═══════════════════════════════════════════════════════════════ */

.stm-footer {
  background: var(--brand-navy);
  color: #c2c8d4;
  padding: 40px 0 0;
  margin-top: 64px;
}
.stm-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding-bottom: 32px;
  align-items: flex-start;
}
.stm-footer__contact {
  display: flex;
  align-items: center;
  gap: 16px;
}
.stm-footer__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--brand-red);
  flex-shrink: 0;
}
.stm-footer__contact-body { min-width: 0; }
.stm-footer__eyebrow {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--brand-red);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.stm-footer__name {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.stm-footer__contact-links {
  font-size: 14px;
  color: #c2c8d4;
}
.stm-footer__contact-links a {
  color: #c2c8d4;
  text-decoration: none;
  transition: color 0.15s;
}
.stm-footer__contact-links a:hover { color: #fff; }
.stm-footer__sep { color: #4a5566; margin: 0 6px; }

.stm-footer__address address {
  font-style: normal;
  font-size: 14px;
  color: #c2c8d4;
  line-height: 1.55;
}

.stm-footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: #6b7587;
  letter-spacing: 0.04em;
}
.stm-footer__slogan {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--brand-red);
}
.stm-footer__slogan em {
  font-family: "Allura", cursive;
  font-style: normal;
  text-transform: none;
  font-size: 1.6em;
  font-weight: 400;
  margin: 0 4px;
  letter-spacing: 0;
  vertical-align: -0.15em;
}

@media (max-width: 767px) {
  .stm-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .stm-footer__base {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HIDE STUFF: comments, social, old footer chrome
   ═══════════════════════════════════════════════════════════════ */

/* Hide "Notify me when available" email-alerts form on product page */
.product-mailalert,
#product-mailalert,
.js-mailalert,
.mailalert,
[id*="mailalert"],
[class*="mailalert"] {
  display: none !important;
}

/* Hide "NEW" product flag — catalog mode, no new-arrival callouts */
.product-flags .new,
.product-flag.new,
li.badge.new,
.badge.new,
[class*="product-flag"].new {
  display: none !important;
}

/* "Out of stock" → re-label as "SOLD" with red banner.
   Hide the original text via 0 font-size, swap it via ::before.
   Add a clear "SOLD" callout next to the price for emphasis. */
.product-flags .out_of_stock,
.product-flags .out-of-stock,
.product-flag.out_of_stock,
.product-flag.out-of-stock,
li.badge.out_of_stock,
li.badge.out-of-stock,
.badge.out_of_stock,
.badge.out-of-stock,
[class*="product-flag"].out_of_stock,
[class*="product-flag"].out-of-stock {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--brand-red) !important;
  color: #fff !important;
  font-family: "Oswald", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-size: 0 !important;
  padding: 6px 14px !important;
  border-radius: 2px !important;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(180,27,39,0.25);
}
.product-flags .out_of_stock::before,
.product-flags .out-of-stock::before,
.product-flag.out_of_stock::before,
.product-flag.out-of-stock::before,
li.badge.out_of_stock::before,
li.badge.out-of-stock::before,
.badge.out_of_stock::before,
.badge.out-of-stock::before,
[class*="product-flag"].out_of_stock::before,
[class*="product-flag"].out-of-stock::before {
  content: "SOLD";
  font-size: 12px;
  letter-spacing: 0.16em;
}

/* On product tiles, make the SOLD flag span the full top of the image
   as a red banner so it reads at a glance. */
.product-miniature .product-flags li.badge.out_of_stock,
.product-miniature .product-flags li.badge.out-of-stock,
.product-miniature .product-flag.out_of_stock,
.product-miniature .product-flag.out-of-stock {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
  padding: 8px 14px !important;
  font-size: 0 !important;
  z-index: 3;
}
.product-miniature .product-flags li.badge.out_of_stock::before,
.product-miniature .product-flags li.badge.out-of-stock::before,
.product-miniature .product-flag.out_of_stock::before,
.product-miniature .product-flag.out-of-stock::before {
  font-size: 13px;
}

/* Dim the image of sold items slightly so the banner reads cleanly */
.product-miniature:has(.out_of_stock) .product-miniature__image,
.product-miniature:has(.out-of-stock) .product-miniature__image {
  opacity: 0.7;
  filter: grayscale(0.2);
}

/* Product detail page — SOLD banner across the cover image (proportional) */
.product__container .product-flags li.badge.out_of_stock,
.product__container .product-flags li.badge.out-of-stock,
.product__container .product-flag.out_of_stock,
.product__container .product-flag.out-of-stock,
.product-cover .product-flags li.badge.out_of_stock,
.product-cover .product-flags li.badge.out-of-stock,
.product-cover .product-flag.out_of_stock,
.product-cover .product-flag.out-of-stock {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  right: auto !important;
  transform: none !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--brand-red) !important;
  color: #fff !important;
  font-family: "Oswald", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-size: 0 !important;
  padding: 10px 22px !important;
  border-radius: 3px !important;
  box-shadow: 0 4px 14px rgba(180,27,39,0.3);
  z-index: 10;
}
.product__container .product-flags li.badge.out_of_stock::before,
.product__container .product-flags li.badge.out-of-stock::before,
.product__container .product-flag.out_of_stock::before,
.product__container .product-flag.out-of-stock::before,
.product-cover .product-flags li.badge.out_of_stock::before,
.product-cover .product-flags li.badge.out-of-stock::before,
.product-cover .product-flag.out_of_stock::before,
.product-cover .product-flag.out-of-stock::before {
  font-size: 22px;
  letter-spacing: 0.2em;
  line-height: 1;
}

/* Cover image dim for sold items */
.product__container .product-cover,
.product__container .product-images,
.product__container .product__left {
  position: relative;
}
.product__container:has(.out_of_stock) .product-cover img,
.product__container:has(.out-of-stock) .product-cover img {
  opacity: 0.7;
}

/* Add a prominent "SOLD" line in the product details column,
   below the price, so it's unmistakable on the right side too. */
.product__container:has(.out_of_stock) .product__right .product-prices,
.product__container:has(.out-of-stock) .product__right .product-prices {
  position: relative;
}
.product__container:has(.out_of_stock) .product__right .product-prices::after,
.product__container:has(.out-of-stock) .product__right .product-prices::after {
  content: "SOLD";
  display: block;
  margin-top: 14px;
  padding: 14px 22px;
  background: var(--brand-red);
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(180,27,39,0.3);
}
#product-availability .material-icons,
.product-availability .material-icons,
#product-availability i { display: none !important; }

/* Hide Quick view buttons on product tiles — direct-link only */
.product-miniature__quickview-button,
.product-miniature__quickview-touch,
.js-quickview,
button.js-quickview,
[data-ps-action="open-quickview"] {
  display: none !important;
}

/* Hide product comments (reviews) — catalog mode, no reviews */
.product-comments,
.product-list-reviews,
.product-comments__list,
#product-comments-list,
.js-post-product-comment,
.grade-stars,
.comments-nb,
#productCommentsBlock,
.product-comments-additional-info,
.product-comments-comment-content,
.product-comments-block,
.empty-product-comment,
#empty-product-comment,
[id*="product-comment"],
[class*="product-comment"],
[id*="ProductComment"],
[class*="ProductComment"] {
  display: none !important;
}

/* Social follow icons — hide everywhere */
.ps-social-follow,
.social-follow,
#social-follow,
.ps_sharebuttons,
.social-sharing,
.product-additional-info .ps_sharebuttons {
  display: none !important;
}

/* Belt-and-suspenders: nuke the default PrestaShop footer chrome
   in case any module hooks render into it instead of our custom footer */
.footer__before,
.footer__main-top,
.footer__main-bottom,
.email_subscription,
.block_newsletter,
.copyright {
  display: none !important;
}

/* "Back to main site" link in the top-left utility bar */
.stm-back-link a {
  display: inline-flex;
  align-items: center;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d8dde6;
  text-decoration: none;
  transition: color 0.15s;
}
.stm-back-link a:hover { color: #fff; }

/* Hide "Sign in" / user account links — catalog mode, no accounts */
.user-info,
#_desktop_user_info,
#_mobile_user_info,
#_mobile_ps_customersignin,
.header-top__right .user-info,
.header-block--user,
a.login,
a.logout { display: none !important; }

/* Hide product details accordion (Brand / Reference) — description is enough */
#product-details,
#product_details,
.product-details,
.product__accordion .product-details { display: none !important; }

/* Hide Customer Reassurance (Security / Delivery / Return policy) block */
.block-reassurance,
#block-reassurance,
.product__bottom-right,
.reassurance-icons-block,
[id*="reassurance"] { display: none !important; }

/* Now that the right column on the product page is empty, let the
   description/accordion span the full width of the bottom section */
.product__bottom { grid-template-columns: 1fr !important; }
.product__bottom-left { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; }

/* "X other products in the same category" / cross-sell grid on product page
   NUKED — module unhooked via config/theme.yml; this rule belt-and-suspenders
   in case the module is re-hooked manually in admin. */
body section.ps-categoryproducts,
body .ps-categoryproducts { display: none !important; }

/* "X other products in the same category" / cross-sell grid on product page
   Belt-and-suspenders: target both the section AND the product-miniature
   articles inside, since module render order can swap classes.
*/
section.ps-categoryproducts,
section.ps-viewedproduct,
section.ps-bestsellers,
section.ps-newproducts,
section.ps-featuredproducts,
section.ps-crossselling,
.product-accessories {
  margin: 56px auto 0;
  max-width: 1320px;
  padding: 0 16px;
}
section.ps-categoryproducts > .module-products,
section.ps-viewedproduct > .module-products,
section.ps-bestsellers > .module-products,
section.ps-newproducts > .module-products,
section.ps-featuredproducts > .module-products,
section.ps-crossselling > .module-products {
  width: 100%;
  max-width: 100%;
}
section.ps-categoryproducts h1,
section.ps-categoryproducts h2,
section.ps-categoryproducts h3,
section.ps-viewedproduct h1,
section.ps-viewedproduct h2,
section.ps-viewedproduct h3,
section.ps-bestsellers h1,
section.ps-bestsellers h2,
section.ps-bestsellers h3,
section.ps-newproducts h1,
section.ps-newproducts h2,
section.ps-newproducts h3,
section.ps-featuredproducts h1,
section.ps-featuredproducts h2,
section.ps-featuredproducts h3,
section.ps-crossselling h1,
section.ps-crossselling h2,
section.ps-crossselling h3,
.module-products .section-title {
  font-family: "Oswald", sans-serif !important;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-navy);
  margin: 0 0 22px !important;
}

/* THE GRID — force on the list wrapper.
   Use body-prefixed selectors to win specificity against
   Hummingbird's compiled theme.css. */
body section.ps-categoryproducts .module-products__list,
body section.ps-viewedproduct .module-products__list,
body section.ps-bestsellers .module-products__list,
body section.ps-newproducts .module-products__list,
body section.ps-featuredproducts .module-products__list,
body section.ps-crossselling .module-products__list,
body .module-products__list,
body .module-products .products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  flex-direction: row !important;
}
/* Each card constrained to its grid cell */
body .module-products__list > *,
body .module-products__list .product-miniature,
body .module-products .products .product-miniature,
body section.ps-categoryproducts .product-miniature,
body section.ps-viewedproduct .product-miniature {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
  display: block !important;
}
/* Image cannot exceed the card */
body .module-products__list .product-miniature__image-container,
body .module-products__list .thumbnail-container,
body .module-products .products .product-miniature__image-container,
body .module-products .products .thumbnail-container,
body section.ps-categoryproducts .product-miniature__image-container,
body section.ps-categoryproducts .thumbnail-container {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  display: block !important;
}
body .module-products__list .product-miniature__image,
body .module-products__list .product-miniature img,
body .module-products__list picture,
body .module-products__list picture img,
body .module-products .products .product-miniature__image,
body .module-products .products .product-miniature img,
body .module-products .products picture,
body section.ps-categoryproducts .product-miniature img,
body section.ps-categoryproducts picture,
body section.ps-categoryproducts picture img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute;
  inset: 0;
}
@media (max-width: 991px) {
  body .module-products__list,
  body .module-products .products,
  body section.ps-categoryproducts .module-products__list,
  body section.ps-viewedproduct .module-products__list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 575px) {
  body .module-products__list,
  body .module-products .products,
  body section.ps-categoryproducts .module-products__list,
  body section.ps-viewedproduct .module-products__list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   STOREFRONT HOMEPAGE
   Clean product grid; no hero/slider/banner.
   ═══════════════════════════════════════════════════════════════ */

/* Belt-and-suspenders: hide leftover home modules if they're still
   hooked on an existing install (theme.yml unhooks only apply on
   fresh install / theme switch). */
.page-content--home .homeslider-container,
.page-content--home #custom-text,
.page-content--home .banner,
.page-content--home > section + section,
.page-content--home > section + section ~ section {
  display: none !important;
}
/* ↑ keep the FIRST <section> on the home page (Our Products / featured)
   and hide every section that follows it (New products, On sale). */

/* Sidebar IS shown on category pages — leave it visible.
   The block-categories module is unhooked via theme.yml, so only
   the faceted-search filter renders here. */

.stm-storefront { padding: 0; }
.stm-storefront__header {
  text-align: center;
  padding: 48px 0 32px;
  border-bottom: 1px solid #E5DDD0;
  margin-bottom: 36px;
}
.stm-storefront__eyebrow {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--brand-red);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.stm-storefront__title {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.0;
  color: var(--brand-navy);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}
.stm-storefront__sub {
  font-size: 15px;
  color: #4a5566;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.5;
}
.stm-storefront__sub a {
  color: var(--brand-red);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed var(--brand-red);
}
.stm-storefront__sub a:hover {
  color: var(--brand-red-dark);
  border-bottom-color: var(--brand-red-dark);
}

/* The featured-products section that lives inside HOOK_HOME — strip
   its default <section><h1> chrome since our header provides the title. */
.stm-storefront__products > section > h1 { display: none; }
.stm-storefront__products > section > a {
  /* "All products" footer link */
  display: inline-block;
  margin: 32px auto 0;
  text-align: center;
}
.stm-storefront__products > section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.stm-storefront__products .products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 991px) { .stm-storefront__products .products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .stm-storefront__products .products { grid-template-columns: repeat(2, 1fr); gap: 14px; } }