/* Salim Distro redesign: shell (utility bar, header, nav, tools, search, pre-footer,
   footer, age-gate skin). Wave 1, 2026-09-22.
   Markup: template-parts/sdx-header.php, template-parts/sdx-footer.php.
   Behaviour: js/sdx-shell.js.
   Same rules as sdx-components.css: every selector carries an sdx- class (or
   #sd-agegate / .sd-ag-*), values from sdx-tokens.css. Breakpoints are the mockup's:
   1120 / 980 (menu toggle) / 720 / 640 / 420 / 390. */

/* ---------- shared shell type ---------- */
.sdx-root .sdx-utility,
.sdx-root .sdx-header,
.sdx-root .sdx-prefooter,
.sdx-root .sdx-footer {
  font-family: var(--sdx-sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------- utility bar ---------- */
.sdx-root .sdx-utility {
  position: relative;
  z-index: var(--sdx-z-utility);
  background: var(--sdx-orange);
  color: var(--sdx-on-accent);
  font: 600 var(--sdx-text-10)/1 var(--sdx-mono);
  letter-spacing: var(--sdx-track-utility);
  text-transform: uppercase;
}
.sdx-root .sdx-utility__inner {
  height: var(--sdx-utility-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sdx-space-16);
}
.sdx-root .sdx-utility a { color: var(--sdx-on-accent); text-decoration: none; }
.sdx-root .sdx-utility a:hover { color: var(--sdx-on-accent); text-decoration: underline; }
.sdx-root .sdx-utility a:focus-visible { outline: 2px solid var(--sdx-on-accent); outline-offset: var(--sdx-focus-offset-sm); }

/* ---------- header ---------- */
.sdx-root .sdx-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px); /* WordPress core sets this when the admin bar shows */
  z-index: var(--sdx-z-header);
  background: var(--sdx-header-bg);
  border-bottom: 1px solid var(--sdx-line);
  -webkit-backdrop-filter: blur(var(--sdx-header-blur));
  backdrop-filter: blur(var(--sdx-header-blur));
  color: var(--sdx-ink);
}
.sdx-root .sdx-header__grid {
  height: var(--sdx-header-h);
  display: grid;
  grid-template-columns: var(--sdx-header-brand-col) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sdx-space-28);
}
.sdx-root .sdx-header__brand { display: flex; align-items: center; min-width: 0; }

/* Logo: sd_logo_markup() (functions.php) prints the locked mark and wordmark. Only the
   wordmark colour and the mark's backing change on the light header, exactly as
   mockup.css "BRAND LOCK 2026-09-20". Colours are literal on purpose (brand lock). */
.sdx-root .sdx-header .sd-brand { text-decoration: none; }
/* CEO 2026-09-22 "the logo doesn't match": the approved logo is the orange S on its dark green
   square (live header, eBay store logo). Keep the square on the light header: live tile geometry
   (7px pad, 15px radius) on the live forest #1F3D2B. The SVG itself is untouched. */
.sdx-root .sdx-header .sd-brand__mark { background: #1F3D2B; padding: 7px; border-radius: 15px; }
.sdx-root .sdx-header .sd-brand__word { color: #1F3D2B; }
.sdx-root .sdx-header .sd-brand__word em { color: #E24A16; }

/* ---------- primary nav (wp_nav_menu, theme_location "primary") ---------- */
.sdx-root .sdx-nav { min-width: 0; }
.sdx-root .sdx-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sdx-space-18);
  margin: 0;
  padding: 0;
  list-style: none;
  font: 600 var(--sdx-text-14)/1.2 var(--sdx-sans);
}
.sdx-root .sdx-nav__list li { position: relative; margin: 0; padding: 0; list-style: none; }
.sdx-root .sdx-nav__list a {
  position: relative;
  display: inline-block;
  padding: var(--sdx-space-8) 0;
  color: var(--sdx-ink);
  text-decoration: none;
  white-space: nowrap;
}
.sdx-root .sdx-nav__list a:hover,
.sdx-root .sdx-nav__list a:focus { color: var(--sdx-ink); text-decoration: none; }
.sdx-root .sdx-nav__list a:focus-visible { outline: var(--sdx-focus-ring); outline-offset: var(--sdx-focus-offset-sm); }
.sdx-root .sdx-nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--sdx-orange);
  transition: right var(--sdx-dur-fast) ease;
}
.sdx-root .sdx-nav__list > li > a:hover::after,
.sdx-root .sdx-nav__list > li.current-menu-item > a::after,
.sdx-root .sdx-nav__list > li.current-menu-ancestor > a::after { right: 0; }

/* Desktop dropdowns (the live menu has 5 parents with sub-menus). */
.sdx-root .sdx-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--sdx-space-16));
  z-index: 2;
  min-width: var(--sdx-submenu-w);
  margin: 0;
  padding: var(--sdx-space-8) 0;
  list-style: none;
  border: 1px solid var(--sdx-ink);
  background: var(--sdx-paper);
  box-shadow: var(--sdx-shadow-card-hover);
  visibility: hidden;
  opacity: 0;
  transform: translateY(var(--sdx-space-6));
  transition: opacity var(--sdx-dur-fast) ease, transform var(--sdx-dur-fast) ease, visibility 0s linear var(--sdx-dur-fast);
}
.sdx-root .sdx-nav__list li:hover > .sub-menu,
.sdx-root .sdx-nav__list li:focus-within > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.sdx-root .sdx-nav__list .sub-menu a {
  display: block;
  padding: var(--sdx-space-9) var(--sdx-space-16);
  font-weight: 500;
}
.sdx-root .sdx-nav__list .sub-menu a:hover { background: var(--sdx-white); color: var(--sdx-orange-dark); }

/* Sub-menu toggle buttons are injected by sdx-shell.js for the mobile panel only. */
.sdx-root .sdx-nav__subtoggle { display: none; }

/* Menu items the header already offers as tools. Markup is kept (plugins filter these
   items); they are only hidden inside this header. See WAVE1_NOTES.md.
   - menu-item-1827 = the Cart menu item. Guests must never see a cart (FEATURE_MAP X2);
     approved buyers get .sdx-tool--cart instead.
   - sd-nav-login = "Log In" / "My Account" (renamed by quick-order-pad.php F9); the
     My account tool links to the same page.
   - sd-nav-qo = "Quick Order" appended for approved buyers (quick-order-pad.php F8);
     hidden only on desktop, where the Quick order button shows. */
.sdx-root .sdx-nav__list > li.menu-item-1827,
.sdx-root .sdx-nav__list > li.sd-nav-login { display: none; }
@media (min-width: 1200px) {
  .sdx-root .sdx-nav__list > li.sd-nav-qo { display: none; }
}

/* ---------- header tools ---------- */
.sdx-root .sdx-tools { display: flex; align-items: center; gap: var(--sdx-space-9); }
.sdx-root .sdx-tool {
  position: relative;
  min-height: var(--sdx-icon-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sdx-space-7);
  box-sizing: border-box;
  padding: 0 var(--sdx-space-9);
  border: 0;
  background: transparent;
  color: var(--sdx-ink);
  font: 700 var(--sdx-text-12)/1 var(--sdx-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.sdx-root .sdx-tool:hover,
.sdx-root .sdx-tool:focus { color: var(--sdx-ink); text-decoration: none; }
.sdx-root .sdx-tool::after {
  content: "";
  position: absolute;
  left: var(--sdx-space-9);
  right: var(--sdx-space-9);
  bottom: var(--sdx-space-3);
  height: 2px;
  background: var(--sdx-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sdx-dur-fast) ease;
}
.sdx-root .sdx-tool:hover::after { transform: scaleX(1); }
.sdx-root .sdx-tool:focus-visible { outline: var(--sdx-focus-ring); outline-offset: var(--sdx-focus-offset-sm); }
.sdx-root .sdx-tool svg {
  width: var(--sdx-icon-tool);
  height: var(--sdx-icon-tool);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* cart count: .sdx-count look; .sd-cart-count is the class salim-b2b quick-order.php
   updates after an add (MARKUP_CONTRACT rule 21). */
.sdx-root .sdx-tool__count {
  min-width: var(--sdx-count);
  height: var(--sdx-count);
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0 var(--sdx-space-5);
  border-radius: var(--sdx-radius-badge);
  background: var(--sdx-orange);
  color: var(--sdx-on-accent);
  font: 600 var(--sdx-text-9)/1 var(--sdx-mono);
}
.sdx-root .sdx-tools__search { color: var(--sdx-ink); }

/* hamburger (visible <=980px) */
.sdx-root .sdx-menu-btn {
  width: var(--sdx-icon-btn);
  height: var(--sdx-icon-btn);
  display: none;
  place-items: center;
  align-content: center;
  gap: var(--sdx-space-6);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--sdx-radius-0);
  background: transparent;
  box-shadow: none;
  color: var(--sdx-ink);
  cursor: pointer;
}
.sdx-root .sdx-menu-btn:hover { background: transparent; color: var(--sdx-ink); }
.sdx-root .sdx-menu-btn:focus-visible { outline: var(--sdx-focus-ring); outline-offset: var(--sdx-focus-offset-sm); }
.sdx-root .sdx-menu-btn__bar {
  display: block;
  width: var(--sdx-menu-bar-w);
  height: 2px;
  background: currentColor;
  transition: transform var(--sdx-dur-fast) ease;
}
.sdx-root .sdx-menu-btn[aria-expanded="true"] .sdx-menu-btn__bar:first-child { transform: translateY(var(--sdx-space-4)) rotate(45deg); }
.sdx-root .sdx-menu-btn[aria-expanded="true"] .sdx-menu-btn__bar:last-child { transform: translateY(calc(-1 * var(--sdx-space-4))) rotate(-45deg); }

/* ---------- search panel ---------- */
.sdx-root .sdx-search {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  background: var(--sdx-forest);
  color: var(--sdx-on-accent);
  transition: max-height var(--sdx-dur-panel) ease, visibility 0s linear var(--sdx-dur-panel);
}
.sdx-root .sdx-search.sdx-is-open {
  max-height: var(--sdx-search-h);
  visibility: visible;
  transition-delay: 0s;
}
.sdx-root .sdx-search__inner {
  height: var(--sdx-search-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sdx-space-20);
  margin-top: 0;
  margin-bottom: 0;
}
.sdx-root .sdx-search__label {
  margin: 0;
  color: var(--sdx-on-accent);
  font: 600 var(--sdx-text-11)/1.2 var(--sdx-mono);
  letter-spacing: var(--sdx-track-control);
  text-transform: uppercase;
}
.sdx-root .sdx-search .sdx-search__input {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: var(--sdx-space-12) 0;
  border: 0;
  border-bottom: 1px solid var(--sdx-rule-on-dark-strong);
  border-radius: var(--sdx-radius-0);
  background: transparent;
  box-shadow: none;
  color: var(--sdx-on-accent);
  font: 400 var(--sdx-text-22)/1.3 var(--sdx-sans);
  outline: 0;
}
.sdx-root .sdx-search .sdx-search__input:focus {
  border-bottom-color: var(--sdx-orange);
  background: transparent;
  box-shadow: none;
  color: var(--sdx-on-accent);
  outline: 0;
}
.sdx-root .sdx-search .sdx-search__input::placeholder { color: var(--sdx-placeholder-on-dark); opacity: 1; }
.sdx-root .sdx-search .sdx-search__close { color: var(--sdx-on-accent); font: 400 var(--sdx-text-30)/1 var(--sdx-sans); }
.sdx-root .sdx-search .sdx-search__close:hover { color: var(--sdx-on-accent); }

/* ---------- header responsive ---------- */
/* Header nav collapses to the menu button below 1200px (deputy 2026-09-22, measured: the
   approved-buyer header needs ~1240px, the guest header ~990px). Other bands keep 980. */
@media (max-width: 1120px) {
  .sdx-root .sdx-header__grid { grid-template-columns: var(--sdx-header-brand-col-md) minmax(0, 1fr) auto; gap: var(--sdx-space-18); }
  .sdx-root .sdx-nav__list { gap: var(--sdx-space-14); font-size: var(--sdx-text-13); }
  .sdx-root .sdx-tool { padding-inline: var(--sdx-space-6); }
  .sdx-root .sdx-tools { gap: var(--sdx-space-3); }
}
@media (max-width: 1199px) {
  .sdx-root .sdx-header__grid { grid-template-columns: minmax(0, 1fr) auto; }
  .sdx-root .sdx-menu-btn { display: grid; }
  .sdx-root .sdx-tools__qo { display: none; }
  /* the nav becomes a panel under the header */
  .sdx-root .sdx-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--sdx-header-h);
    display: none;
    max-height: calc(100dvh - var(--sdx-header-h) - var(--sdx-utility-h));
    overflow-y: auto;
    padding: var(--sdx-space-24);
    box-sizing: border-box;
    border-bottom: 1px solid var(--sdx-ink);
    background: var(--sdx-paper);
  }
  .sdx-root .sdx-nav.sdx-is-open { display: block; }
  .sdx-root .sdx-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: var(--sdx-text-16);
  }
  .sdx-root .sdx-nav__list > li { border-bottom: 1px solid var(--sdx-line); }
  .sdx-root .sdx-nav__list > li > a { padding: var(--sdx-space-14) 0; }
  .sdx-root .sdx-nav__list > li > a::after { display: none; }
  .sdx-root .sdx-nav__list .sub-menu {
    position: static;
    min-width: 0;
    padding: 0 0 var(--sdx-space-10) var(--sdx-space-16);
    border: 0;
    background: transparent;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .sdx-root .sdx-nav__list .sub-menu a { padding: var(--sdx-space-8) 0; }
  .sdx-root .sdx-nav__list .sub-menu a:hover { background: transparent; }
  /* Once sdx-shell.js has added the toggles, sub-menus start collapsed. Without JS
     they stay open, so every link is still reachable. */
  .sdx-root .sdx-nav--enhanced .sdx-nav__list .sub-menu { display: none; }
  .sdx-root .sdx-nav--enhanced .sdx-nav__list li.sdx-is-open > .sub-menu { display: block; }
  .sdx-root .sdx-nav--enhanced .sdx-nav__list > li.menu-item-has-children {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .sdx-root .sdx-nav--enhanced .sdx-nav__list > li.menu-item-has-children > .sub-menu { grid-column: 1 / -1; }
  .sdx-root .sdx-nav__subtoggle {
    width: var(--sdx-icon-btn);
    height: var(--sdx-icon-btn);
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--sdx-radius-0);
    background: transparent;
    box-shadow: none;
    color: var(--sdx-ink);
    cursor: pointer;
  }
  .sdx-root .sdx-nav__subtoggle:hover { background: transparent; color: var(--sdx-orange-dark); }
  .sdx-root .sdx-nav__subtoggle:focus-visible { outline: var(--sdx-focus-ring); outline-offset: calc(-1 * var(--sdx-focus-offset-sm)); }
  .sdx-root .sdx-nav__subtoggle svg { width: var(--sdx-icon-sm); height: var(--sdx-icon-sm); fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--sdx-dur-fast) ease; }
  .sdx-root .sdx-nav__subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
}
@media (max-width: 782px) {
  /* WordPress core: the admin bar is 46px here; from 600px down it scrolls away. */
  .sdx-root .sdx-nav { max-height: calc(100dvh - var(--sdx-header-h)); }
}
@media (max-width: 720px) {
  .sdx-root .sdx-tool > .sdx-tool__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .sdx-root .sdx-tool { width: var(--sdx-control-h-sm); padding: 0; }
  .sdx-root .sdx-tool::after { display: none; }
  .sdx-root .sdx-tool .sdx-tool__count {
    position: absolute;
    right: -1px;
    top: var(--sdx-space-3);
    min-width: var(--sdx-count-sm);
    height: var(--sdx-count-sm);
    padding: 0 var(--sdx-space-4);
    font-size: var(--sdx-text-8);
  }
}
@media (max-width: 640px) {
  .sdx-root .sdx-shell { width: min(100% - var(--sdx-shell-gutter-sm), var(--sdx-shell-max)); }
  .sdx-root .sdx-utility__inner { justify-content: center; }
  .sdx-root .sdx-utility__inner > span:not(:first-child) { display: none; }
  .sdx-root .sdx-header__grid { height: var(--sdx-header-h-sm); }
  .sdx-root .sdx-nav { top: var(--sdx-header-h-sm); }
  .sdx-root .sdx-tools { gap: 0; }
  .sdx-root .sdx-search__inner { grid-template-columns: 1fr auto; }
  .sdx-root .sdx-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sdx-root .sdx-header .sd-brand__word { font-size: var(--sdx-text-19); }
  .sdx-root .sdx-header .sd-brand__mark svg { width: 32px; height: 32px; }
}
@media (max-width: 600px) {
  .sdx-root .sdx-header { top: 0; }
}
@media (max-width: 420px) {
  .sdx-root .sdx-header .sd-brand__word { font-size: var(--sdx-text-16); }
  .sdx-root .sdx-header .sd-brand__mark svg { width: 28px; height: 28px; }
}
@media (max-width: 390px) {
  .sdx-root .sdx-header__grid { gap: var(--sdx-space-4); }
  .sdx-root .sdx-header .sd-brand { gap: var(--sdx-space-7); }
  .sdx-root .sdx-tools__search,
  .sdx-root .sdx-menu-btn,
  .sdx-root .sdx-tool { width: var(--sdx-icon-btn-sm); }
}

/* ---------- pre-footer: ticker + coverage band (kept from the live kadence_footer) ---------- */
.sdx-root .sdx-cov { background: var(--sdx-forest); color: var(--sdx-on-accent); padding: var(--sdx-space-72) 0; }
.sdx-root .sdx-cov__in {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--sdx-space-55);
  align-items: center;
}
.sdx-root .sdx-cov__h2 {
  margin: 0 0 var(--sdx-space-18);
  color: var(--sdx-on-accent);
  font: 400 var(--sdx-text-display-sm)/1.02 var(--sdx-display);
  letter-spacing: var(--sdx-track-display);
}
.sdx-root .sdx-cov__p {
  max-width: 48ch;
  margin: 0 0 var(--sdx-space-28);
  color: var(--sdx-cov-text);
  font: 400 var(--sdx-text-16)/1.6 var(--sdx-sans);
}
.sdx-root .sdx-cov__cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sdx-space-22); }
/* salim-offer-copy inserts <p class="sd-offer-line"> in front of the guest button on the
   front page (anchor: the exact sd-cov__btn tag). Give it its own row. */
.sdx-root .sdx-cov__cta .sd-offer-line { flex: 0 0 100%; margin: 0; }
.sdx-root .sdx-cov .sd-cov__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--sdx-control-h);
  padding: 0 var(--sdx-space-24);
  border: 1px solid transparent;
  border-radius: var(--sdx-radius-crisp);
  background: var(--sdx-orange-btn);
  color: var(--sdx-on-accent);
  font: 700 var(--sdx-text-16)/1.2 var(--sdx-sans);
  letter-spacing: var(--sdx-track-button);
  text-decoration: none;
  transition: transform var(--sdx-dur-fast) ease, background var(--sdx-dur-fast) ease;
}
.sdx-root .sdx-cov .sd-cov__btn:hover { background: var(--sdx-orange-btn-hover); color: var(--sdx-on-accent); transform: var(--sdx-btn-lift); }
.sdx-root .sdx-cov .sd-cov__btn:focus-visible { outline: var(--sdx-focus-ring); outline-offset: var(--sdx-focus-offset); }
.sdx-root .sdx-cov__link {
  padding-bottom: var(--sdx-space-3);
  border-bottom: 1px solid var(--sdx-orange);
  color: var(--sdx-on-accent);
  font: 700 var(--sdx-text-14)/1.2 var(--sdx-sans);
  text-decoration: none;
}
.sdx-root .sdx-cov__link:hover { color: var(--sdx-kicker-light); }
.sdx-root .sdx-cov__link:focus-visible { outline: var(--sdx-focus-ring); outline-offset: var(--sdx-focus-offset); }
.sdx-root .sdx-cov__proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--sdx-rule-on-dark);
  border-left: 1px solid var(--sdx-rule-on-dark);
}
.sdx-root .sdx-cov__tile {
  display: flex;
  flex-direction: column;
  gap: var(--sdx-space-10);
  padding: var(--sdx-space-26) var(--sdx-space-24) var(--sdx-space-24);
  border-right: 1px solid var(--sdx-rule-on-dark);
  border-bottom: 1px solid var(--sdx-rule-on-dark);
  background: var(--sdx-cov-tile);
}
.sdx-root .sdx-cov__fig {
  color: var(--sdx-orange);
  font: 400 var(--sdx-text-figure)/1 var(--sdx-display);
  letter-spacing: var(--sdx-track-drawer);
}
/* the tick tile: drawn, sized to the figures' cap height */
.sdx-root .sdx-cov__check { display: block; width: .86em; height: 1em; }
.sdx-root .sdx-cov__lbl { color: var(--sdx-cov-text); font: 400 var(--sdx-text-14)/1.5 var(--sdx-sans); }
@media (max-width: 980px) {
  .sdx-root .sdx-cov__in { grid-template-columns: 1fr; gap: var(--sdx-space-30); }
}
@media (max-width: 640px) {
  .sdx-root .sdx-cov { padding: var(--sdx-space-48) 0; }
}
@media (max-width: 420px) {
  .sdx-root .sdx-cov__proof { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */
/* .salim-footer / __inner / __brand / __bottom are contract classes (MARKUP_CONTRACT
   rule 20): the newsletter button, the payment badges and the WhatsApp float's
   padding-bottom:92px all key on them. No padding-bottom is set here so that the
   salim-talk-to-team rule keeps working. */
.sdx-root .sdx-footer {
  padding-top: var(--sdx-space-75);
  background: var(--sdx-footer-bg);
  color: var(--sdx-on-accent);
}
.sdx-root .sdx-footer a { color: var(--sdx-footer-text); text-decoration: none; }
.sdx-root .sdx-footer a:hover { color: var(--sdx-on-accent); text-decoration: none; }
.sdx-root .sdx-footer a:focus-visible { outline: var(--sdx-focus-ring); outline-offset: var(--sdx-focus-offset-sm); }
.sdx-root .sdx-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--sdx-space-40);
}
.sdx-root .sdx-footer__blurb {
  max-width: var(--sdx-footer-blurb-w);
  margin: var(--sdx-space-18) 0 0;
  color: var(--sdx-footer-text);
  font: 400 var(--sdx-text-14)/1.6 var(--sdx-sans);
}
.sdx-root .sdx-footer__head {
  display: block;
  margin: 0 0 var(--sdx-space-18);
  color: var(--sdx-footer-muted);
  font: 600 var(--sdx-text-10)/1.2 var(--sdx-mono);
  letter-spacing: var(--sdx-track-label);
  text-transform: uppercase;
}
.sdx-root .sdx-footer__list { margin: 0; padding: 0; list-style: none; }
.sdx-root .sdx-footer__list li { margin: 0; padding: 0; list-style: none; }
.sdx-root .sdx-footer__list a,
.sdx-root .sdx-footer__contact a,
.sdx-root .sdx-footer__contact > span {
  display: block;
  margin: var(--sdx-space-8) 0;
  color: var(--sdx-footer-text);
  font: 400 var(--sdx-text-14)/1.5 var(--sdx-sans);
}
.sdx-root .sdx-footer__contact { font-style: normal; }
.sdx-root .sdx-footer__contact .sdx-footer__mail { display: block; margin: var(--sdx-space-10) 0; }
.sdx-root .sdx-footer__contact .sdx-footer__mail small {
  display: block;
  margin-bottom: 2px;
  color: var(--sdx-footer-muted);
  font: 600 var(--sdx-text-9)/1.3 var(--sdx-mono);
  letter-spacing: var(--sdx-track-label-sm);
  text-transform: uppercase;
}
.sdx-root .sdx-footer__contact .sdx-footer__mail a { margin: 0; }
/* WhatsApp + Facebook: the logos alone, side by side, footer text color, orange on hover.
   44px tap boxes; the first 28px mark lines up with the text column (CEO 2026-09-26). */
.sdx-root .sdx-footer__contact .sdx-footer__socials { display: flex; gap: 6px; margin: var(--sdx-space-14) 0 var(--sdx-space-4) -8px; }
.sdx-root .sdx-footer__contact a.sdx-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  color: var(--sdx-footer-text);
  transition: color var(--sdx-dur, .2s) ease;
}
.sdx-root .sdx-footer__contact a.sdx-footer__social svg { display: block; width: 28px; height: 28px; }
.sdx-root .sdx-footer__contact a.sdx-footer__social:hover,
.sdx-root .sdx-footer__contact a.sdx-footer__social:focus-visible { color: var(--sdx-orange); }

/* Drawn arrow (sdx_arrow()): scales with the text it sits in. */
.sdx-arrow { display: inline-block; width: .72em; height: .72em; vertical-align: 0; overflow: visible; }

.sdx-root .sdx-footer__compliance {
  margin-top: var(--sdx-space-64);
  padding: var(--sdx-space-28) 0;
  border-top: 1px solid var(--sdx-rule-on-dark);
  border-bottom: 1px solid var(--sdx-rule-on-dark);
}
.sdx-root .sdx-footer__disclosures {
  display: grid;
  grid-template-columns: 1fr minmax(var(--sdx-footer-warn-min), var(--sdx-footer-warn-max));
  gap: var(--sdx-space-48);
  align-items: stretch;
}
.sdx-root .sdx-footer__label {
  display: block;
  margin-bottom: var(--sdx-space-7);
  color: var(--sdx-footer-fda-label);
  font: 600 var(--sdx-text-9)/1.3 var(--sdx-mono);
  letter-spacing: var(--sdx-track-label);
  text-transform: uppercase;
}
.sdx-root .sdx-footer__fda {
  margin: 0;
  color: var(--sdx-footer-fda);
  font: 400 var(--sdx-text-10)/1.65 var(--sdx-sans);
  text-align: left;
}
/* The warning text stays one unbroken string (compliance grep), so "WARNING:" is not
   split out in orange as the mockup does. */
.sdx-root .sdx-footer__warn {
  display: flex;
  align-items: center;
  margin: 0;
  padding: var(--sdx-space-18) var(--sdx-space-20);
  border: 1px solid var(--sdx-orange);
  border-radius: var(--sdx-radius-0);
  color: var(--sdx-on-accent);
  font: 700 var(--sdx-text-12)/1.5 var(--sdx-sans);
  text-align: left;
}

.sdx-root .sdx-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sdx-space-12);
  margin-top: var(--sdx-space-26);
  padding-bottom: var(--sdx-space-25);
  color: var(--sdx-footer-faint);
  font: 500 var(--sdx-text-9)/1.4 var(--sdx-mono);
  letter-spacing: var(--sdx-track-label-sm);
  text-transform: uppercase;
}
/* salim-seo-fixes injects <span class="salim-footer__pay"> (card badges) as the middle child. */
.sdx-root .sdx-footer__bottom .salim-footer__pay { display: flex; gap: var(--sdx-space-8); align-items: center; }

@media (max-width: 980px) {
  .sdx-root .sdx-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .sdx-root .sdx-footer__grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .sdx-root .sdx-footer__compliance { margin-top: var(--sdx-space-48); padding-top: var(--sdx-space-25); }
  .sdx-root .sdx-footer__disclosures { grid-template-columns: 1fr; gap: var(--sdx-space-22); }
  .sdx-root .sdx-footer__warn { padding: var(--sdx-space-16); font-size: var(--sdx-text-11); }
}
@media (max-width: 640px) {
  .sdx-root .sdx-footer__grid { grid-template-columns: 1fr 1fr; }
  .sdx-root .sdx-footer__grid > div:last-child { grid-column: 1 / -1; }
  .sdx-root .sdx-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sdx-space-10); }
}

/* ---------- age gate skin (salim-b2b.php:1185, markup + script untouched) ----------
   The plugin prints its own <style> in wp_footer with selectors like
   "#sd-agegate .sd-ag-card" (1,1,0). Prefixing .sdx-root gives (1,2,0), so these win
   regardless of print order. [hidden] handling is left to the plugin. */
.sdx-root #sd-agegate {
  background: var(--sdx-gate-backdrop);
  font-family: var(--sdx-sans);
}
.sdx-root #sd-agegate .sd-ag-card {
  width: min(var(--sdx-gate-w), 100%);
  max-width: var(--sdx-gate-w);
  padding: var(--sdx-space-34);
  border-radius: var(--sdx-radius-0);
  background: var(--sdx-paper);
  box-shadow: var(--sdx-shadow-gate);
  color: var(--sdx-ink);
}
.sdx-root #sd-agegate .sd-ag-eyebrow {
  margin: 0 0 var(--sdx-space-18);
  color: var(--sdx-orange);
  font: 600 var(--sdx-text-11)/1.2 var(--sdx-mono);
  letter-spacing: var(--sdx-track-kicker);
  text-transform: uppercase;
}
.sdx-root #sd-agegate .sd-ag-title {
  margin: 0 0 var(--sdx-space-12);
  color: var(--sdx-ink);
  font: 400 var(--sdx-text-38)/1 var(--sdx-display);
  letter-spacing: var(--sdx-track-display);
}
.sdx-root #sd-agegate .sd-ag-copy {
  max-width: 40ch;
  margin: 0 auto var(--sdx-space-24);
  color: var(--sdx-muted);
  font: 400 var(--sdx-text-16)/1.5 var(--sdx-sans);
}
.sdx-root #sd-agegate .sd-ag-btns { display: grid; gap: var(--sdx-space-9); margin: 0; }
.sdx-root #sd-agegate .sd-ag-btn {
  min-height: var(--sdx-control-h);
  padding: 0 var(--sdx-space-24);
  border: 1px solid transparent;
  border-radius: var(--sdx-radius-crisp);
  font: 700 var(--sdx-text-16)/1.2 var(--sdx-sans);
  letter-spacing: var(--sdx-track-button);
  transition: transform var(--sdx-dur-fast) ease, background var(--sdx-dur-fast) ease, border-color var(--sdx-dur-fast) ease;
}
.sdx-root #sd-agegate .sd-ag-yes { background: var(--sdx-orange-btn); color: var(--sdx-on-accent); }
.sdx-root #sd-agegate .sd-ag-yes:hover { background: var(--sdx-orange-btn-hover); transform: var(--sdx-btn-lift); }
.sdx-root #sd-agegate .sd-ag-no { background: transparent; border-color: var(--sdx-line); color: var(--sdx-ink); }
.sdx-root #sd-agegate .sd-ag-no:hover { border-color: var(--sdx-ink); transform: var(--sdx-btn-lift); }
.sdx-root #sd-agegate .sd-ag-btn:focus-visible { outline: var(--sdx-focus-ring); outline-offset: var(--sdx-focus-offset); }
.sdx-root #sd-agegate .sd-ag-warn {
  margin: var(--sdx-space-24) 0 0;
  padding-top: var(--sdx-space-16);
  border-top: 1px solid var(--sdx-line);
  color: var(--sdx-muted);
  font: 400 var(--sdx-text-11)/1.5 var(--sdx-sans);
  letter-spacing: 0;
}
@media (max-width: 640px) {
  .sdx-root #sd-agegate .sd-ag-card { padding: var(--sdx-space-26) var(--sdx-space-20); }
  .sdx-root #sd-agegate .sd-ag-title { font-size: var(--sdx-text-30); }
}
@media (prefers-reduced-motion: reduce) {
  .sdx-root #sd-agegate .sd-ag-btn { transition: none; }
  .sdx-root #sd-agegate .sd-ag-yes:hover,
  .sdx-root #sd-agegate .sd-ag-no:hover { transform: none; }
}

/* CEO 2026-09-23 (checkout screenshot): WooCommerce block totals sidebars do NOT follow the scroll on the new
   site. Woo makes them position:sticky top:24px; the new header is sticky too, so the card slid under it and
   read as a moving, clipped card. Cart + checkout only; nothing else on those pages is restyled here. */
.sdx-root.woocommerce-checkout .wc-block-checkout__sidebar.is-sticky,
.sdx-root.woocommerce-cart .wc-block-cart__sidebar.is-sticky { position: static; top: auto; }

/* CEO 2026-09-23 class fix (sticky bugs): anything that sticks to the TOP of the screen must sit below the
   sticky header, never under it. One offset for every such element; the header is 76px (+1px rule), 66px at
   640px and below. Found by Beast sticky_scan.py (stuck elements whose top is under the header). */
:root { --sdx-stick-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--sdx-header-h) + 1px); }
@media (max-width: 640px) { :root { --sdx-stick-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--sdx-header-h-sm) + 1px); } }
/* salim-b2b flavour grid header row ("Flavor / Price / Quantity"): plugin CSS sticks it at top:0. */
.sdx-root .sd-qo-grid .sd-qo-head { top: var(--sdx-stick-top); }
/* WooCommerce block notices: on narrow screens Woo pins the snackbar 10px from the top, i.e. under the header. */
/* Fixed (not sticky): at page top the utility bar sits above the header, so clear both. */
@media (max-width: 781px) { .sdx-root .wc-block-components-notices__snackbar { top: calc(var(--sdx-stick-top) + var(--sdx-utility-h) + 10px); } }


/* CEO 2026-09-26: "My account" hover shows Sign out. Desktop pointer only; on touch the
   icon still opens /my-account/, which carries WooCommerce's own Log out link. */
.sdx-root .sdx-account { position: relative; display: inline-flex; }
.sdx-root .sdx-account__menu { display: none; }
@media (hover: hover) and (min-width: 1200px) {
  .sdx-root .sdx-account--in .sdx-account__menu {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 3;
    min-width: 150px;
    padding: var(--sdx-space-8) 0;
    border: 1px solid var(--sdx-ink);
    background: var(--sdx-paper);
    box-shadow: var(--sdx-shadow-card-hover);
    visibility: hidden;
    opacity: 0;
    transform: translateY(var(--sdx-space-6));
    transition: opacity var(--sdx-dur-fast) ease, transform var(--sdx-dur-fast) ease, visibility 0s linear var(--sdx-dur-fast);
  }
  .sdx-root .sdx-account--in:hover .sdx-account__menu,
  .sdx-root .sdx-account--in:focus-within .sdx-account__menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .sdx-root .sdx-account__signout {
    display: block;
    padding: var(--sdx-space-9) var(--sdx-space-16);
    color: var(--sdx-ink);
    font: 500 var(--sdx-text-14, 14px)/1.2 var(--sdx-sans);
    text-decoration: none;
    white-space: nowrap;
  }
  .sdx-root .sdx-account__signout:hover,
  .sdx-root .sdx-account__signout:focus-visible { background: var(--sdx-white); color: var(--sdx-orange-dark); }
}

/* CEO 2026-10-09: approved-buyer header overlapped ("salim distro joins the shop all text") after
   Special Offers joined the menu. Buyers carry Quick order + Cart, so their row is ~110px longer than
   a guest's. Measured in Chrome with the buyer tools: fits with 16-35px clearance on both sides. */
@media (min-width: 1200px) {
  .sdx-root.logged-in .sdx-header__grid { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sdx-space-18); }
  .sdx-root.logged-in .sdx-nav__list { gap: 11px; font-size: var(--sdx-text-13); justify-content: safe center; }
}
@media (min-width: 1200px) and (max-width: 1259px) {
  .sdx-root.logged-in .sdx-tool--account .sdx-tool__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* RESTORED 2026-10-12: both 10-01 phone blocks were lost when this file was rolled back between 10-01 and 10-09 (no move logged it). */
/* iPhone, CEO 2026-10-01: Safari zooms the whole page when a field under 16px is tapped.
   Touch screens only, so the desktop look is unchanged. Sources: shop search 15px and
   per-page 13px (functions.php inline), sort 14px (style.css), cart qty 90% (Kadence), block-cart qty 14px, footer
   newsletter email 15px (found signed in, same day). */
@media (pointer: coarse) {
  .salim-search input[type="search"],
  .salim-ppp select,
  .woocommerce-ordering select.orderby,
  .woocommerce table.shop_table input,
  .woocommerce .quantity input.qty,
  .wc-block-components-quantity-selector__input,
  .sn-foot__email { font-size: 16px !important; }
}

/* Phones, 2026-10-01: sdx-product-cart.css sets the cart count to position:relative (to anchor the add
   ring) and, loading later at equal specificity, undid the absolute badge above. The badge then sat in
   the row and squeezed the cart icon to 13px on every page that loads that file (seen on iPhone and
   Android). Absolute still anchors the ring. */
@media (max-width: 720px) {
  .sdx-root .sdx-tool.sdx-tool--cart .sdx-cart-count { position: absolute; }
}