/* ==========================================================================
   Smoke Mart Australia — Global chrome
   Tokens + base + header + navigation + drawers + footer
   All geometry measured from the reference storefront.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Colour */
  --sm-red:            #EF1D35;
  --sm-red-dark:       #D1071E;
  --sm-red-hover:      #D1071E;
  --sm-black:          #000000;
  --sm-white:          #FFFFFF;
  --sm-surface:        #F5F5F5;
  --sm-surface-alt:    #FAFAFA;
  --sm-border:         #DBDBDB;
  --sm-border-light:   #E5E5E5;
  --sm-text:           #000000;
  --sm-text-warm:      #3D3935;
  --sm-text-muted:     #666666;
  --sm-text-faint:     #8B8B8B;
  --sm-legal-yellow:   #FFFF00;
  --sm-success:        #1F7A3D;
  --sm-error:          #D1071E;

  /* Typography */
  --sm-font: "Gotham Narrow","Barlow Semi Condensed",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sm-fs-body:        14px;
  --sm-lh-body:        21px;
  --sm-fs-card-title:  16px;
  --sm-lh-card-title:  24px;
  --sm-fs-h1:          32px;
  --sm-fs-h1-product:  24px;
  --sm-fs-h2:          24px;
  --sm-fs-h2-sm:       18px;
  --sm-fs-h3:          18px;
  --sm-fs-price-lg:    32px;
  --sm-fs-price-md:    26px;
  --sm-fs-btn:         16px;
  --sm-fs-nav:         14px;
  --sm-fs-meta:        13px;
  --sm-fs-eyebrow:     12px;
  --sm-fw-light:       300;
  --sm-fw-regular:     400;
  --sm-fw-medium:      500;
  --sm-fw-semibold:    600;
  --sm-fw-bold:        700;
  --sm-ls-eyebrow:     .04em;

  /* Layout */
  --sm-container:      1400px;
  --sm-toolbar:        1440px;
  --sm-pad-desktop:    14px;
  --sm-pad-tablet:     24px;
  --sm-pad-mobile:     10px;
  --sm-header-h:       64px;
  --sm-header-h-sm:    119px;
  --sm-grid-gap:       16px;
  --sm-card-max:       256px;
  --sm-drawer-w:       350px;

  /* Components */
  --sm-radius-pill:    25px;
  --sm-radius-input:   8px;
  --sm-radius-card:    0px;
  --sm-btn-pad-y:      13px;
  --sm-btn-pad-x:      24px;
  --sm-shadow-panel:   0 6px 24px rgba(0,0,0,.10);
  --sm-transition:     .18s ease;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--sm-white);
  color:var(--sm-text);
  font-family:var(--sm-font);
  font-size:var(--sm-fs-body);
  line-height:var(--sm-lh-body);
  font-weight:var(--sm-fw-regular);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* WooCommerce/theme resets */
body.sm-no-scroll{ overflow:hidden; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }
button{ font-family:inherit; }

h1,h2,h3,h4,h5,h6{ margin:0 0 8px; font-weight:var(--sm-fw-bold); line-height:1.2; color:var(--sm-text); }
h1{ font-size:var(--sm-fs-h1); font-weight:var(--sm-fw-bold); line-height:1; }
h2{ font-size:var(--sm-fs-h2); font-weight:var(--sm-fw-bold); }
h3{ font-size:var(--sm-fs-h3); font-weight:var(--sm-fw-semibold); }
p{ margin:0 0 14px; }

.sm-visually-hidden,
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute;
  left:0; top:0;
  z-index:9999;
  transform:translateY(-120%);
  background:var(--sm-black);
  color:var(--sm-white);
  padding:10px 16px;
  transition:transform .15s ease;
}
.skip-link:focus{ transform:translateY(0); outline:2px solid var(--sm-white); }

:focus-visible{ outline:2px solid var(--sm-red); outline-offset:2px; }

/* --------------------------------------------------------------------------
   3. LAYOUT — container behaviour measured from reference
   -------------------------------------------------------------------------- */
.sm-container{
  width:100%;
  max-width:var(--sm-container);
  margin:0 auto;
  padding:0 var(--sm-pad-desktop);
}
@media (max-width:1439px){ .sm-container{ max-width:none; padding:0 var(--sm-pad-tablet); } }
@media (max-width:767px){ .sm-container{ padding:0 var(--sm-pad-mobile); } }

.sm-main{ display:block; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.sm-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--sm-font);
  font-size:var(--sm-fs-btn);
  font-weight:var(--sm-fw-medium);
  line-height:16px;
  padding:var(--sm-btn-pad-y) var(--sm-btn-pad-x);
  border-radius:var(--sm-radius-pill);
  border:0;
  background:var(--sm-black);
  color:var(--sm-white);
  cursor:pointer;
  text-align:center;
  transition:background var(--sm-transition), color var(--sm-transition);
}
.sm-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wp-block-button__link:hover{
  background:var(--sm-red-dark);
  color:var(--sm-white);
}
.sm-btn--red{ background:var(--sm-red); }
.sm-btn--red:hover{ background:var(--sm-red-dark); }
.sm-btn--outline{
  background:transparent; color:var(--sm-black); border:1px solid var(--sm-black);
  padding:calc(var(--sm-btn-pad-y) - 1px) calc(var(--sm-btn-pad-x) - 1px);
}
.sm-btn--outline:hover{ background:var(--sm-black); color:var(--sm-white); }
.sm-btn--block{ width:100%; }
.sm-btn--sm{ font-size:var(--sm-fs-meta); padding:9px 18px; }

/* --------------------------------------------------------------------------
   5. FORMS
   -------------------------------------------------------------------------- */
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=search],input[type=number],select,textarea{
  font-family:var(--sm-font);
  font-size:16px;
  color:var(--sm-text-warm);
  background:var(--sm-white);
  border:1px solid var(--sm-border);
  border-radius:var(--sm-radius-input);
  padding:11px 14px;
  width:100%;
  line-height:1.4;
}
input::placeholder,textarea::placeholder{ color:var(--sm-text-faint); }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--sm-text-warm); }
label{ display:block; font-size:var(--sm-fs-body); color:var(--sm-text-muted); margin-bottom:6px; }
.required{ color:var(--sm-red-dark); }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.sm-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:600;
  background:var(--sm-red);
  height:var(--sm-header-h);
  color:var(--sm-white);
}
.sm-toolbar{ position:relative; }
/* offset for fixed header */
.sm-header-spacer{ height:var(--sm-header-h); }

.sm-toolbar{
  width:100%;
  max-width:var(--sm-toolbar);
  margin:0 auto;
  height:110px;
  padding:10px 32px 0 16px;
  display:grid;
  grid-template-columns:165px 651px 296px 280px;
  align-items:start;
  gap:0;
}

/* 6.1 Logo */
.sm-logo{
  display:flex;
  align-items:center;
  min-width:0;
  height:47px;
}
.sm-logo a{ display:flex; align-items:center; height:100%; }
.sm-logo img{ max-height:34px; width:auto; }
.sm-logo__text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  font-size:19px;
  font-weight:var(--sm-fw-bold);
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--sm-white);
  white-space:nowrap;
  line-height:1;
  max-width:100%;
  overflow:hidden;
}
.sm-logo__text span{
  font-size:9.5px;
  font-weight:var(--sm-fw-light);
  letter-spacing:.24em;
}

/* 6.2 Primary navigation */
.sm-nav{ position:relative; padding-top:7px; }
.sm-nav__list{
  display:flex;
  list-style:none;
  margin:0; padding:0;
  align-items:center;
  min-width:0;
}
.sm-nav__item{
  position:relative;
  /* Reference uses 5px 8px 8px with seven short labels. The target's category
     names are longer, so the horizontal padding is trimmed to keep all seven
     items inside the measured 651px navigation column without clipping. */
  padding:5px 6px 8px;
}
.sm-nav__link{
  display:block;
  font-size:var(--sm-fs-nav);
  font-weight:var(--sm-fw-bold);
  line-height:16px;
  color:var(--sm-white);
  white-space:nowrap;
  padding:0;
}
.sm-nav__link:hover{ text-decoration:underline; text-underline-offset:3px; }
.sm-nav__item.is-active > .sm-nav__link{ text-decoration:underline; text-underline-offset:3px; }
.sm-nav__caret{ display:none; }

/* 6.3 Mega menu */
.sm-mega{
  position:absolute;
  top:100%; left:0;
  min-width:651px;
  background:var(--sm-white);
  color:var(--sm-black);
  box-shadow:var(--sm-shadow-panel);
  padding:20px 24px 24px;
  display:none;
  z-index:610;
}
.sm-mega.is-open{ display:block; }
.sm-mega__grid{
  column-count:2;
  column-gap:32px;
}
.sm-mega__link{
  display:block;
  font-size:var(--sm-fs-nav);
  font-weight:var(--sm-fw-medium);
  color:var(--sm-text-warm);
  line-height:19px;
  padding:9px 0;
  break-inside:avoid;
  border-bottom:0;
}
.sm-mega__link:hover{ color:var(--sm-red-dark); text-decoration:underline; text-underline-offset:3px; }

/* 6.4 Search */
.sm-search{ position:relative; }
.sm-search__form{
  position:relative;
  display:block;
  height:40px;
}
.sm-search input.sm-search__input{
  height:40px;
  border:0;
  border-radius:100px;
  background:var(--sm-white);
  /* left inset matches the reference's 39px text start; the right inset clears
     the absolutely-positioned submit button (reference uses 39px there). */
  padding:0 52px 0 39px;
  font-size:16px;
  color:var(--sm-text-warm);
}
.sm-search__input::placeholder{ color:var(--sm-text-faint); }
.sm-search__submit{
  position:absolute;
  right:14px; top:0;
  height:40px;
  width:32px;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--sm-black);
}
.sm-search__submit svg{ width:20px; height:20px; }

/* Search overlay */
.sm-search-overlay{
  position:fixed;
  top:var(--sm-header-h); left:0; right:0; bottom:0;
  z-index:590;
  display:none;
}
.sm-search-overlay.is-open{ display:block; }
.sm-search-overlay__scrim{
  position:absolute; inset:0;
  background:rgba(0,0,0,.35);
}
.sm-search-overlay__panel{
  position:relative;
  background:var(--sm-white);
  max-width:600px;
  margin:0 auto;
  padding:20px 24px 24px;
  max-height:calc(100vh - var(--sm-header-h) - 40px);
  overflow-y:auto;
  box-shadow:var(--sm-shadow-panel);
}
.sm-search-overlay__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.sm-search-overlay__label{
  font-size:var(--sm-fs-meta);
  font-weight:var(--sm-fw-bold);
  letter-spacing:var(--sm-ls-eyebrow);
  text-transform:uppercase;
  color:var(--sm-black);
}
.sm-search-overlay__close{
  background:none; border:0; padding:0; cursor:pointer;
  font-size:var(--sm-fs-meta); color:var(--sm-text-muted);
}
.sm-search-overlay__close:hover{ text-decoration:underline; }
.sm-search-overlay__results{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px 24px;
}
.sm-suggestion{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
}
.sm-suggestion__info{ min-width:0; }
.sm-suggestion__name{
  display:block;
  font-size:var(--sm-fs-body);
  color:var(--sm-black);
  line-height:18px;
}
.sm-suggestion__name b{ font-weight:var(--sm-fw-bold); }
.sm-suggestion__price{
  display:block;
  font-size:var(--sm-fs-body);
  font-weight:var(--sm-fw-medium);
  color:var(--sm-black);
  margin-top:5px;
}
.sm-suggestion__add{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--sm-black);
  color:var(--sm-white);
  border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.sm-suggestion__add:hover{ background:var(--sm-red-dark); }
.sm-suggestion__add svg{ width:16px; height:16px; }
.sm-search-overlay__all{ margin-top:18px; display:flex; justify-content:center; }
.sm-search-overlay__empty{ padding:16px 0; color:var(--sm-text-muted); }

/* 6.5 Header actions */
.sm-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  height:47px;
  color:var(--sm-white);
}
.sm-actions__stores,
.sm-actions__account{
  display:flex; align-items:center; gap:6px;
  font-size:var(--sm-fs-meta);
  font-weight:var(--sm-fw-regular);
  color:var(--sm-white);
  white-space:nowrap;
}
.sm-actions__stores svg,
.sm-actions__account svg{ width:16px; height:16px; flex:0 0 auto; }
.sm-actions__auth{ display:flex; align-items:center; gap:6px; }
.sm-actions__auth a{ font-size:var(--sm-fs-meta); font-weight:var(--sm-fw-bold); }
.sm-actions__auth a:hover{ text-decoration:underline; text-underline-offset:3px; }
.sm-actions__sep{ opacity:.6; }
.sm-actions__cart{
  position:relative;
  display:flex; align-items:center;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--sm-white);
}
.sm-actions__cart svg{ width:24px; height:24px; }
.sm-actions__count{
  position:absolute;
  top:-6px; right:-9px;
  min-width:18px; height:18px;
  border-radius:9px;
  background:var(--sm-white);
  color:var(--sm-red);
  font-size:11px;
  font-weight:var(--sm-fw-bold);
  display:flex; align-items:center; justify-content:center;
  padding:0 5px;
  line-height:1;
}
.sm-actions__count[hidden]{ display:none; }

/* 6.6 Hamburger */
.sm-burger{
  display:none;
  width:42px; height:42px;
  margin:3px 0 0 0;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--sm-white);
  align-items:center; justify-content:center;
}
.sm-burger svg{ width:24px; height:24px; }

/* --------------------------------------------------------------------------
   7. MOBILE NAV DRAWER
   -------------------------------------------------------------------------- */
.sm-drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  width:var(--sm-drawer-w);
  max-width:89vw;
  background:var(--sm-white);
  color:var(--sm-black);
  z-index:700;
  transform:translateX(100%);
  transition:transform .25s ease;
  display:flex;
  flex-direction:column;
  box-shadow:-4px 0 24px rgba(0,0,0,.12);
}
.sm-drawer.is-open{ transform:translateX(0); }
.sm-drawer[hidden]{ display:none; }
.sm-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid var(--sm-border-light);
  flex:0 0 auto;
}
.sm-drawer__title{
  font-size:var(--sm-fs-body);
  font-weight:var(--sm-fw-bold);
  text-transform:uppercase;
  letter-spacing:var(--sm-ls-eyebrow);
}
.sm-drawer__close{
  background:none; border:0; padding:6px; cursor:pointer;
  color:var(--sm-black);
  display:flex; align-items:center;
}
.sm-drawer__close svg{ width:16px; height:16px; }
.sm-drawer__body{ flex:1 1 auto; overflow-y:auto; }
.sm-drawer__scrim{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  z-index:690;
  display:none;
}
.sm-drawer__scrim.is-open{ display:block; }

/* 7.1 Nav drill-down */
.sm-mnav__list{ list-style:none; margin:0; padding:0; }
.sm-mnav__row{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  border-bottom:1px solid var(--sm-border-light);
  background:none;
}
.sm-mnav__link,
.sm-mnav__toggle{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  font-size:16px;
  color:var(--sm-text-warm);
  background:none; border:0; text-align:left; cursor:pointer;
  min-height:54px;
}
.sm-mnav__toggle svg{ width:14px; height:14px; flex:0 0 auto; margin-left:12px; }
.sm-mnav__sub{ display:none; list-style:none; margin:0; padding:0; background:var(--sm-surface); }
.sm-mnav__sub.is-open{ display:block; }
.sm-mnav__sub .sm-mnav__link{ padding:14px 20px 14px 34px; font-size:15px; }
.sm-mnav__group{ border-top:8px solid var(--sm-surface); padding:4px 0; }
.sm-mnav__group a{ display:flex; align-items:center; gap:12px; padding:14px 20px; font-size:16px; }
.sm-mnav__group svg{ width:18px; height:18px; flex:0 0 auto; }
.sm-mnav__account-sub{ padding:0 20px 16px 50px; font-size:var(--sm-fs-body); }
.sm-mnav__account-sub a{ text-decoration:underline; text-underline-offset:3px; }
.sm-mnav__account-sub span{ margin:0 6px; color:var(--sm-border); }

/* --------------------------------------------------------------------------
   8. MINI-CART DRAWER
   -------------------------------------------------------------------------- */
.sm-cart-drawer__body{ padding:0 20px; }
.sm-minicart__empty{ padding:32px 0; text-align:center; color:var(--sm-text-muted); }
.sm-minicart__items{ list-style:none; margin:0; padding:0; }
.sm-minicart__item{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:12px;
  padding:16px 0;
  border-bottom:1px solid var(--sm-border-light);
  align-items:start;
}
.sm-minicart__thumb img{ width:64px; height:64px; object-fit:cover; background:var(--sm-surface); }
.sm-minicart__name{ font-size:var(--sm-fs-body); line-height:18px; color:var(--sm-black); display:block; }
.sm-minicart__meta{ font-size:var(--sm-fs-meta); color:var(--sm-text-muted); margin-top:4px; }
.sm-minicart__remove{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--sm-text-muted); font-size:12px; text-decoration:underline;
  margin-top:6px;
}
.sm-minicart__price{ font-size:var(--sm-fs-body); font-weight:var(--sm-fw-medium); white-space:nowrap; }
.sm-minicart__foot{ padding:18px 0 24px; }
.sm-minicart__row{ display:flex; justify-content:space-between; margin-bottom:14px; font-size:16px; }
.sm-minicart__row strong{ font-weight:var(--sm-fw-bold); }
.sm-minicart__note{ font-size:var(--sm-fs-meta); color:var(--sm-text-muted); margin-bottom:14px; }

/* --------------------------------------------------------------------------
   9. FOOTER
   -------------------------------------------------------------------------- */
.sm-footer{
  background:var(--sm-black);
  color:var(--sm-white);
  font-size:var(--sm-fs-body);
}
.sm-footer__inner{
  max-width:1376px;              /* measured: footer container is narrower than the main 1400px one */
  margin:0 auto;
  padding:37px 32px 32px;
  display:grid;
  grid-template-columns:787fr 0px 525fr;
  align-items:start;
}
.sm-footer__cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 24px;
}
.sm-footer__list{ list-style:none; margin:0; padding:0; }
.sm-footer__list li{ margin:0 0 9px; }
.sm-footer__list a{
  color:var(--sm-white);
  font-size:var(--sm-fs-body);
  line-height:19px;
  opacity:.95;
}
.sm-footer__list a:hover{ text-decoration:underline; text-underline-offset:3px; opacity:1; }

.sm-footer__signup{
  grid-column:3;              /* measured columns: 787px | 0px | 525px */
  max-width:525px;
  min-width:0;
}
.sm-footer__signup-title{
  font-size:16px;
  font-weight:var(--sm-fw-medium);
  text-transform:uppercase;
  letter-spacing:var(--sm-ls-eyebrow);
  margin:0 0 14px;
  color:var(--sm-white);
}
.sm-footer__signup form{ display:flex; gap:12px; align-items:flex-start; }
.sm-footer__signup input[type=email]{
  flex:1 1 auto;
  height:42px;
  background:var(--sm-white);
  border:0;
  border-radius:0;
  padding:0 14px;
  font-size:16px;
}
.sm-footer__signup button{
  flex:0 0 auto;
  background:var(--sm-red);
  color:var(--sm-white);
  border:0;
  border-radius:var(--sm-radius-pill);
  height:42px;
  padding:0 26px;
  font-family:var(--sm-font);
  font-size:16px;
  font-weight:var(--sm-fw-medium);
  cursor:pointer;
  text-transform:uppercase;
}
.sm-footer__signup button:hover{ background:var(--sm-red-dark); }
.sm-footer__legalnote{
  font-size:11px;
  line-height:15px;
  color:#BBBBBB;
  margin:10px 0 0;
}
.sm-footer__legalnote a{ text-decoration:underline; color:#BBBBBB; }
.sm-footer__bottom{
  max-width:1376px;
  margin:0 auto;
  padding:14px 32px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-top:1px solid #1A1A1A;
}
.sm-footer__pay{ display:flex; align-items:center; gap:10px; }
.sm-footer__pay span{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:28px; background:var(--sm-white); border-radius:3px;
  font-size:9px; font-weight:var(--sm-fw-bold); color:var(--sm-black);
  letter-spacing:.02em;
}
.sm-footer__copyright{
  font-size:var(--sm-fs-meta);
  color:#BBBBBB;
  text-align:right;
}
.sm-footer__social{ display:flex; gap:12px; align-items:center; }
.sm-footer__social a{ display:flex; color:var(--sm-white); }
.sm-footer__social svg{ width:20px; height:20px; }

/* --------------------------------------------------------------------------
   10. NOTICES / STATES
   -------------------------------------------------------------------------- */
.sm-notice{
  background:var(--sm-surface);
  border-left:3px solid var(--sm-black);
  padding:14px 18px;
  font-size:var(--sm-fs-body);
  margin-bottom:20px;
}
.sm-notice--success{ border-left-color:var(--sm-success); background:#F2F8F4; }
.sm-notice--error{ border-left-color:var(--sm-error); background:#FDF3F4; }

/* Optional regulatory band slot — left empty for target-specific compliance copy */
.sm-legal-band{ display:none; }
.sm-legal-band.is-active{ display:block; background:var(--sm-legal-yellow); color:var(--sm-black); text-align:center; font-weight:var(--sm-fw-medium); padding:7px 10px; font-size:var(--sm-fs-body); }

/* Breadcrumbs */
.sm-breadcrumb{
  font-size:var(--sm-fs-body);
  color:var(--sm-text-muted);
  padding:0;
  margin:0 0 10px;
  line-height:24px;
}
.sm-breadcrumb a{ color:var(--sm-red-dark); }
.sm-breadcrumb a:hover{ text-decoration:underline; }
.sm-breadcrumb .sep{ margin:0 7px; color:var(--sm-text-faint); }

/* Pagination */
.sm-pagination{ display:flex; justify-content:center; align-items:center; gap:8px; padding:34px 0 10px; }
.sm-pagination .page-numbers{
  min-width:38px; height:38px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--sm-border); border-radius:8px;
  font-size:var(--sm-fs-body); font-weight:var(--sm-fw-semibold);
  color:var(--sm-text-muted); background:var(--sm-white);
}
.sm-pagination .page-numbers.current{ background:var(--sm-black); border-color:var(--sm-black); color:var(--sm-white); }
.sm-pagination .page-numbers:hover{ border-color:var(--sm-black); color:var(--sm-black); }

/* Loading state */
.sm-loading{ opacity:.5; pointer-events:none; }
.sm-spinner{
  width:18px; height:18px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%;
  animation:sm-spin .7s linear infinite;
}
@keyframes sm-spin{ to{ transform:rotate(360deg); } }

/* Back to top */
.sm-backtop{
  position:fixed; right:24px; bottom:24px; z-index:500;
  background:rgba(242,242,242,.6);
  color:var(--sm-black);
  border:0; cursor:pointer;
  border-radius:var(--sm-radius-pill);
  padding:10px 18px;
  font-family:var(--sm-font); font-size:var(--sm-fs-eyebrow); font-weight:var(--sm-fw-medium);
  display:none;
  align-items:center; gap:6px;
  backdrop-filter:blur(4px);
}
.sm-backtop.is-visible{ display:inline-flex; }

/* ==========================================================================
   11. RESPONSIVE CHROME
   Breakpoints measured on the reference storefront.
   ≥1440  full nav · grid 165 | nav | 296 | 280
   1024– ≥ burger replaces nav · grid 50 | 165 | 1fr | auto
   ≤767   mobile header 119px · 3-col grid · search on row 2
   ========================================================================== */

/* Content offset for the fixed header */
.sm-site{ padding-top:var(--sm-header-h); }

/* ---- ≥1440px: reference desktop header ---- */
@media (min-width:1440px){
  .sm-burger{ display:none; }
  .sm-nav{ display:block; }
  .sm-toolbar{ grid-template-columns:165px 651px 296px 280px; padding:10px 32px 0 16px; }
  .sm-search{ grid-column:3; }
  .sm-actions{ grid-column:4; }
}

/* ---- 1024–1439px: navigation collapses into the drawer ---- */
@media (max-width:1439px){
  .sm-burger{ display:flex; }
  .sm-nav{ display:none; }
  .sm-toolbar{
    grid-template-columns:50px 165px minmax(0,1fr) auto;
    padding:10px 24px 0 16px;
    column-gap:16px;
  }
  .sm-search{ grid-column:3; }
  .sm-actions{ grid-column:4; }
}

/* ---- ≤1023px: tighten header actions ---- */
@media (max-width:1023px){
  .sm-actions{ gap:14px; }
  .sm-actions__stores span{ display:none; }
}

/* ---- ≤767px: reference mobile header (two rows, 119px) ---- */
@media (max-width:767px){
  :root{ --sm-header-h:119px; }
  .sm-header{ height:var(--sm-header-h-sm); }
  .sm-toolbar{
    height:var(--sm-header-h-sm);
    /* left cluster (burger + pin) · logo · right cluster (person + cart) */
    grid-template-columns:minmax(0,1fr) minmax(165px,50%) minmax(0,1fr);
    grid-template-rows:46px 63px;      /* measured: row 2 search starts at y=56 */
    padding:10px 0 0;
    column-gap:0;
    row-gap:0;
    align-items:start;
  }
  .sm-burger{ grid-column:1; grid-row:1; justify-self:start; margin:2px 0 0 8px; }
  .sm-logo{ grid-column:2; grid-row:1; justify-self:center; height:46px; min-width:0; }
  .sm-logo a{ min-width:0; justify-content:center; }
  .sm-logo__text{ font-size:18px; align-items:center; text-align:center; }
  .sm-logo__text span{ font-size:9px; }
  .sm-actions{
    grid-column:3; grid-row:1;
    justify-self:end;
    gap:12px;
    padding-right:10px;
    min-width:0;
  }
  /* The pin is positioned into the left cluster, matching the reference layout. */
  .sm-actions__stores{
    position:absolute;
    left:56px;
    top:14px;
    height:24px;
  }
  /* Mobile header row 1 mirrors the reference exactly:
     [hamburger][pin]  ·  [logo centred]  ·  [person][cart]
     The "Stores" and "Join | Sign in" labels collapse to their glyphs. */
  .sm-actions__stores{ display:flex; order:-1; }
  .sm-actions__stores span{ display:none; }
  .sm-actions__account{ order:0; }
  .sm-actions__auth{ display:none; }
  .sm-search{
    grid-column:1 / -1;
    grid-row:2;
    height:63px;
    display:flex;
    /* Reference mobile field sits at y=64 (8px below the row top) at 358x40,
       i.e. 16px side insets inside a 390px viewport — not centred. */
    align-items:flex-start;
    padding:8px 16px 0;
  }
  .sm-search__form{ width:100%; }
  .sm-search__form,
  .sm-search input.sm-search__input,
  .sm-search__submit{ height:40px; }
  .sm-search input.sm-search__input{ font-size:16px; padding:0 52px 0 39px; }

  /* Overlay + drawers sit under the taller header */
  .sm-search-overlay{ top:var(--sm-header-h-sm); }
  .sm-search-overlay__panel{ max-width:none; margin:0; }
  .sm-search-overlay__results{ grid-template-columns:1fr; }

  /* Footer stacks to one column */
  .sm-footer__inner{
    grid-template-columns:1fr;
    padding:16px 15px;
    gap:24px;
  }
  .sm-footer__cols{ grid-template-columns:1fr 1fr; gap:0 16px; }
  .sm-footer__signup{ grid-column:auto; max-width:none; }
  .sm-footer__bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:14px 15px 20px;
  }
  .sm-footer__copyright{ text-align:left; }

  .sm-backtop{ right:12px; bottom:12px; }
}

/* ---- 768–1023px: footer two columns ---- */
@media (min-width:768px) and (max-width:1023px){
  .sm-footer__inner{
    grid-template-columns:1fr 1fr;
    padding:37px 24px 78px;
  }
  .sm-footer__signup{ grid-column:auto; max-width:none; }
  .sm-footer__bottom{ padding:14px 24px 20px; }
}

/* ---- ≤480px: tighter chrome ---- */
@media (max-width:480px){
  .sm-logo__text{ font-size:15px; }
  .sm-drawer{ width:100%; max-width:100%; }
  .sm-footer__cols{ grid-template-columns:1fr; gap:0; }
  .sm-footer__signup form{ flex-wrap:wrap; }
  .sm-footer__signup input[type=email]{ flex:1 1 100%; }
  .sm-footer__signup button{ flex:1 1 100%; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  html{ scroll-behavior:auto; }
}