/* ============================================================
   CSS VARIABLES — GLOBAL DESIGN TOKENS
   ============================================================ */
:root {
  /* ── Brand colours ─────────────────────────────────────── */
  --black:      #151515;
  --white:      #FFFCF9;
  --coral:      #FD5D2D;
  --blue:       #1283E8;
  --yellow:     #FFDD00;
  --green:      #007B32;
  --pink:       #FF9AEA;
  --grey-light: #f5f5f0;
  --border:     1px solid var(--black);

  /* ── Fonts ─────────────────────────────────────────────── */
  --font-display: 'Climate Crisis', sans-serif;
  --font-body:    'Work Sans', sans-serif;

  /* ── Fluid type scale ──────────────────────────────────── */
  --text-display:    clamp(4rem,    14vw,   14rem);
  --text-hero:       clamp(2.5rem,   8vw,    8rem);
  --text-heading:    clamp(1.5rem,  3.5vw,  3.5rem);
  --text-subheading: clamp(1.125rem, 2vw,    2rem);
  --text-body-lg:    clamp(1rem,    1.5vw,  1.375rem);
  --text-body:       clamp(0.875rem, 1vw,   1.125rem);
  --text-price:      clamp(1.125rem, 1.5vw, 1.5rem);
  --text-sm:         clamp(0.6875rem,0.5vw,  0.875rem);
  --text-label:      clamp(0.625rem, 0.7vw,  0.75rem);
  --text-caption:    clamp(0.6875rem,0.75vw, 0.8125rem);

  /* ── Fluid spacing ─────────────────────────────────────── */
  --gutter:          clamp(1rem,   3.125vw, 5rem);
  --space-section:   clamp(3rem,   10vw,    9.375rem);
  --space-component: clamp(1.5rem,  4vw,    3.75rem);
  --space-element:   clamp(0.75rem, 2vw,    1.5rem);
  --gap:             clamp(0.75rem, 1.5vw,  1.25rem);
  --banner-indent:   10%; /* proportional inset for contained banners — uncapped so it stays narrow on 4K */

  /* ── Form field padding ────────────────────────────────── */
  --input-py: clamp(0.5rem, 0.75vw, 0.75rem);  /* 8px → 12px */
  --input-px: clamp(0.75rem, 1vw, 0.875rem);   /* 12px → 14px */
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; font-family: var(--font-body); }
ul { list-style: none; }
h1, h2 { font-weight: 400; }

/* ============================================================
   BUTTONS — single unified system
   All variants share the .btn base. Shadow colour adapts via
   Hover shadow is always #151515 (black) regardless of button colour.
   ============================================================ */
.btn {
  font-family: var(--font-body);
  font-weight: 800;
  padding: 14px 28px;
  background: var(--yellow);
  color: var(--black);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 #151515;
}

/* Colour variants — text is always black except .btn-black which uses white */
.btn-coral   { background: var(--coral);  color: var(--white); border-color: var(--coral);  }
.btn-green   { background: var(--green);  color: var(--white); border-color: var(--green);  }
.btn-blue    { background: var(--blue);   color: var(--black); border-color: var(--blue);   }
.btn-pink    { background: var(--pink);   color: var(--black); border-color: var(--pink);   }
.btn-black   { background: var(--black);  color: var(--white); border-color: var(--black);  }
.btn-yellow  { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.btn-white   { background: var(--white);  color: var(--black); border-color: rgba(21,21,21,0.15); }
.btn-outline { background: transparent;   color: var(--black); border: 2px solid var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); box-shadow: 3px 3px 0 #151515; }

/* Size variants */
.btn-sm  { padding: 8px 18px;  font-size: 11px; }
.btn-lg  { padding: 18px 36px; font-size: 15px; }

/* ============================================================
   MARQUEE ANIMATION
   ============================================================ */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announcement-bar {
  background: var(--pink);
  color: var(--black);
  overflow: hidden;
  white-space: nowrap;
  height: 54px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--black);
}
.announcement-bar .track {
  display: inline-flex;
  align-items: center;
  animation: marquee 24s linear infinite;
  white-space: nowrap;
}
.announcement-bar .track .item {
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  letter-spacing: 0.05em;
  padding: 0 var(--gap);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Icon inherits text size — overrides Phosphor inline px */
.announcement-bar .track .item .ph-fill,
.announcement-bar .track .item .ph-bold {
  font-size: 1em !important;
  line-height: inherit !important;
}
/* Static (non-scrolling) variant */
.announcement-bar--static {
  height: auto;
  white-space: normal;
  padding: 10px 0;
}
.announcement-bar--static .track {
  animation: none;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap);
  width: 100%;
  padding: 0 var(--gutter);
}


/* ============================================================
   HEADER
   ============================================================ */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--gutter);
  border-bottom: 2px solid var(--black);
  border-top: 1px solid var(--black);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 10001;
  height: var(--nav-height);
}
.logo {
  display: flex;
  padding: 6px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.logo-text {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -0.5px;
  line-height: 1;
}
.site-logo {
  height: 48px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ── Mobile header: hamburger | logo centred | search + cart ─ */
@media (max-width: 47.9375rem) {
  /* DO NOT override position here — sticky must stay on header */
  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    pointer-events: none;
  }
  .logo a { pointer-events: auto; }
  .site-logo { height: 38px; }
  .wishlist-header-btn { display: none !important; }
  .header-account   { display: none !important; }
  .header-icons     { padding-right: 0; gap: 0; }
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 0;
}
.sb-nav-list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.sb-nav-list > .menu-item {
  position: relative;
  display: flex;
  align-items: center;
}
.main-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-lg);
  color: var(--black);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.main-nav a:hover { opacity: 0.6; }

/* ── Chevron for parent items ────────────────────────────── */
.main-nav .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.main-nav .menu-item-has-children:hover > a::after,
.main-nav .menu-item-has-children:focus-within > a::after {
  transform: rotate(225deg) translateY(1px);
}

/* ── Desktop dropdown ────────────────────────────────────── */
.main-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--white);
  border: 2px solid var(--black);
  box-shadow: 5px 5px 0 var(--black);
  list-style: none;
  padding: 6px 0;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}
.main-nav .menu-item:hover > .sub-menu,
.main-nav .menu-item:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.main-nav .sub-menu .menu-item { position: relative; display: block; }
.main-nav .sub-menu .menu-item a {
  padding: 10px 20px;
  font-size: var(--text-body);
  font-weight: 500;
  white-space: nowrap;
  display: block;
  opacity: 1;
  transition: background 0.1s;
}
.main-nav .sub-menu .menu-item a:hover {
  background: var(--yellow);
  color: var(--black);
  opacity: 1;
}
/* Nested sub-menus fly out right */
.main-nav .sub-menu .sub-menu {
  left: 100%;
  top: -6px;
}

/* ── Hamburger button — mobile only ─────────────────────── */
.sb-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 6px;
  flex-shrink: 0;
  order: -1;
}
.sb-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--black);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.sb-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sb-nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sb-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 47.9375rem) {
  .main-nav  { display: none; }
  .sb-nav-toggle { display: flex; }
}

/* ============================================================
   MOBILE NAV DRAWER
   ============================================================ */
.sb-mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: min(400px, 90vw);
  height: 100vh;
  height: 100dvh;
  background: var(--black);
  color: var(--white);
  z-index: 10211;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sb-mobile-nav.is-open { transform: translateX(0); }

.sb-mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 10210;
  cursor: pointer;
}
.sb-mobile-nav-backdrop.is-open { display: block; }

/* Drawer header */
.sb-mobile-nav-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px var(--gutter);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.sb-mobile-nav-logo img { filter: invert(1) brightness(1.1); }
.sb-mobile-nav-logo img {
  height: 34px;
  width: auto;
  display: block;
}
.sb-mobile-nav-logo span {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--white);
  text-transform: uppercase;
}
.sb-mobile-nav-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 28px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.sb-mobile-nav-close:hover { opacity: 1; }

/* Drawer nav links */
.sb-mobile-nav-body {
  flex: 1;
  overflow-y: auto;
}
.sb-mobile-nav-body .sb-nav-list {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  gap: 0;
}
.sb-mobile-nav-body .menu-item { display: block; position: relative; }

/* Parent items: flex row so <a> + toggle button sit side by side */
.sb-mobile-nav-body .menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.sb-mobile-nav-body .menu-item > a {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  color: var(--white);
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color 0.15s, background 0.15s;
  opacity: 1;
  white-space: normal;
}
.sb-mobile-nav-body .menu-item > a::after { display: none; }
.sb-mobile-nav-body .menu-item > a:hover { color: var(--yellow); background: rgba(255,255,255,0.04); opacity: 1; }
.sb-mobile-nav-body .menu-item.current-menu-item > a,
.sb-mobile-nav-body .menu-item.current-menu-ancestor > a { color: var(--yellow); }

/* Sub-toggle: sibling <button> after the <a>, added by JS */
.sb-sub-toggle {
  background: none;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  width: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.sb-sub-toggle:hover { color: var(--yellow); background: rgba(255,255,255,0.04); }
.menu-item.is-open > .sb-sub-toggle {
  color: var(--yellow);
}

/* Sub-menu takes full row below the link + button */
.sb-mobile-nav-body .menu-item-has-children > .sub-menu {
  flex-basis: 100%;
}

/* Mobile sub-menu */
.sb-mobile-nav-body .sub-menu {
  display: none;
  position: static;
  background: rgba(255,255,255,0.04);
  border: none;
  box-shadow: none;
  padding: 4px 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  min-width: 0;
}
.sb-mobile-nav-body .menu-item.is-open > .sub-menu { display: block; }
.sb-mobile-nav-body .sub-menu .menu-item > a {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 500;
  text-transform: none;
  color: rgba(255,255,255,0.7);
  padding: 10px calc(var(--gutter) + 16px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sb-mobile-nav-body .sub-menu .menu-item > a:hover { color: var(--yellow); }

/* Drawer footer */
.sb-mobile-nav-foot {
  padding: var(--space-element) var(--gutter) calc(var(--space-element) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Account pill (logged in) */
.sb-mobile-account-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 12px 14px;
  margin-bottom: 4px;
  transition: filter 0.15s, background 0.15s;
  color: var(--white);
}
.sb-mobile-account-pill:hover { background: rgba(255,255,255,0.1); }
.sb-mobile-account-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}
.sb-mobile-account-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.sb-mobile-account-name {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--white);
}
.sb-mobile-account-tier {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
}
.sb-mobile-account-tier.is-vip { color: var(--yellow); }

/* Login button */
.sb-mobile-login-btn {
  display: block;
  text-align: center;
  width: 100%;
  margin-bottom: 4px;
}

/* Icon links (wishlist, rewards, contact) */
.sb-mobile-nav-foot-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color 0.15s;
}
.sb-mobile-nav-foot-link:last-child { border-bottom: none; }
.sb-mobile-nav-foot-link:hover { color: var(--yellow); }
.sb-mobile-nav-foot-link i { flex-shrink: 0; opacity: 0.55; }
.sb-mobile-nav-foot-link:hover i { opacity: 1; }
.sb-drawer-wl-count {
  margin-left: auto;
  background: var(--coral);
  color: var(--white);
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sb-drawer-wl-count.is-hidden { display: none; }
.header-actions {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 12px;
}
.header-icons {
  display: flex;
  gap: 2px;
  align-items: center;
}

/* Icon buttons — search, wishlist, cart */
.header-icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--black);
  transition: opacity 0.15s;
  text-decoration: none;
}
.header-icon-btn:hover { opacity: 0.6; }

/* Shared badge (cart & wishlist) */
.header-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--coral);
  color: #fff;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  box-sizing: border-box;
}

/* Lucide icons */
.lucide-icon { display: flex; align-items: center; justify-content: center; }
.lucide-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Account section (right of icons, separated by border) */
.header-account {
  border-left: 2px solid var(--black);
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px 0 40px;
}
.header-account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--black);
  transition: opacity 0.15s;
}
.header-account-btn:hover { opacity: 0.6; }
.header-account-name {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.header-account-tier {
  font-family: 'Work Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--black);
  color: var(--white);
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
/* VIP badge — black/yellow with metallic shine sweep */
.header-account-tier.is-vip {
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: var(--yellow);
  letter-spacing: .1em;
}
.header-account-tier.is-vip::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.45) 50%,
    transparent 80%
  );
  animation: vip-shine 2.8s ease-in-out infinite;
}
@keyframes vip-shine {
  0%   { left: -120%; }
  35%  { left: 120%; }
  100% { left: 120%; }
}
.header-login-btn {
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: var(--black);
  background: #FFDD00;
  white-space: nowrap;
  border: none;
  padding: 10px 14px;
  transition: background 0.15s, color 0.15s;
}
.header-login-btn:hover { background: var(--black); color: var(--white); }

/* ============================================================
   HERO + PROMO NAV — together = exactly 100vh minus chrome
   ============================================================ */
:root {
  --bar-height: 54px;
  --nav-height: 70px;
  --chrome: calc(var(--bar-height) + var(--nav-height));
}

/* Wrapper: fills the viewport below the fixed chrome */
.hero-promo-wrapper {
  height: calc(100vh - var(--chrome));
  min-height: 560px;
  display: flex;
  flex-direction: column;
}

/* Hero slider: 2/3 of the wrapper */
.hero-slider {
  flex: 2;
  position: relative;
  overflow: hidden;
}

/* Mobile hero height — clamp(420px, 65vh, 560px)
   667px phone → 434px · 844px phone → 549px
   Promo nav stacks naturally below. */
@media (max-width: 47.9375rem) {
  .hero-promo-wrapper {
    height: auto;
    min-height: 0;
  }
  .hero-slider {
    height: clamp(420px, 65vh, 560px);
    flex: none;
  }
}

/* Individual slides — stacked, crossfade */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* ── Slide 1: Coral · smack smack smack ───────────── */
.slide-1 {
  background: #FD5D2D;
  background: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-text-stack {
  font-family: var(--font-display);
  font-size: clamp(80px, 19vw, 320px);
  line-height: 0.85;
  text-transform: lowercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  position: absolute;
  inset: 0;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}
.hero-text-stack .l1 { color: var(--yellow); animation: smack-from-left  0.5s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
.hero-text-stack .l2 { color: var(--yellow); opacity: 0.7; animation: smack-from-right 0.5s cubic-bezier(0.16,1,0.3,1) 0.2s  both; }
.hero-text-stack .l3 { color: var(--yellow); opacity: 0.45; animation: smack-from-left  0.5s cubic-bezier(0.16,1,0.3,1) 0.35s both; }

@keyframes smack-from-left {
  from { transform: translateX(-130%); }
  to   { transform: translateX(0); }
}
@keyframes smack-from-right {
  from { transform: translateX(130%); }
  to   { transform: translateX(0); }
}
@keyframes starburst-pop {
  from { transform: translate(-50%, -50%) scale(0) rotate(-15deg); }
  to   { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
.hero-starburst {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(640px, 90vw, 1400px);
  z-index: 2;
  pointer-events: none;
  animation: starburst-pop 0.6s cubic-bezier(0.34, 1.46, 0.64, 1) 0.65s both;
}
.hero-starburst img { width: 100%; height: auto; display: block; }
.hit-different-badge {
  position: absolute;
  bottom: 10%; right: 5%;
  z-index: 4;
  transform: rotate(-14deg);
  width: clamp(160px, 18vw, 280px);
}
.hit-different-badge img { width: 100%; height: auto; }

/* ── Slides 2 & 3: full-cover image ─────────────────── */
.slide-fill-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Slider dots */
.hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  border: 1.5px solid rgba(0,0,0,0.3);
  transition: all 0.2s;
  padding: 0;
}
.hero-dot.is-active {
  background: var(--white);
  width: 28px;
  border-radius: 6px;
}

/* ── ACF slide types ───────────────────────────────────── */

/* ② Image slide — full-bleed responsive background */
.sb-hero-slide--img {
  background-image: var(--slide-bg-d, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none; /* when tag is <a> */
}
@media (max-width: 47.9375rem) {
  .sb-hero-slide--img {
    background-image: var(--slide-bg-m, var(--slide-bg-d, none));
  }
}

/* Full-slide link: no underline */
a.hero-slide { display: block; text-decoration: none; }

/* ============================================================
   PROMO NAV BAR — 1/3 of wrapper height
   ============================================================ */
.promo-nav {
  display: grid;
  grid-template-columns: repeat(var(--pn-count, 4), 1fr);
  gap: var(--gap);
  background: transparent;
  padding: var(--gap) var(--gutter);
}
.pn-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 2 / 1;
}
.pn-box:hover { transform: translate(-3px,-3px); box-shadow: 3px 3px 0 var(--black); }
.pn-box-label {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.2s;
  position: relative;
  z-index: 2;
}
.pn-box:hover .pn-box-label { opacity: 1; }


/* ============================================================
   JOIN BANNER
   ============================================================ */
.join-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--green);
  color: var(--white);
  overflow: hidden;
  margin: var(--space-section) var(--gutter) 0;
}
.join-banner-text {
  padding: var(--space-component);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-element);
}
.join-banner-text h2 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--white);
}
.join-banner-text h2 .highlight { color: var(--pink); }
.join-banner-text p {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--white);
  max-width: 560px;
}
.join-banner-btns {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
}
.join-banner-visual {
  position: relative;
  overflow: hidden;
  min-height: 300px;
}
.join-banner-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ============================================================
   SECTION SPACING — 150px top padding per section
   ============================================================ */
.sb-section {
  padding-top: 150px;
  padding-bottom: 0;
}
.sb-section-inner {
  padding-left: 40px;
  padding-right: 40px;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: var(--space-section) var(--gutter) var(--space-element);
}
.section-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  text-transform: uppercase;
  line-height: 1;
}
/* Single product: related / recently viewed sections */
.sp-related-section { padding: var(--space-section) var(--gutter) 0; }
.sp-related-section .section-header { margin: 0 0 var(--space-element); }

/* Carousel — horizontal scroll strip */
.sp-related-section .product-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--gap);
  padding: 0 0 var(--space-element); /* bottom space for scrollbar */
  margin-bottom: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--coral) var(--black);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.sp-related-section .product-grid::-webkit-scrollbar { height: 4px; }
.sp-related-section .product-grid::-webkit-scrollbar-track { background: var(--black); }
.sp-related-section .product-grid::-webkit-scrollbar-thumb { background: var(--coral); }
/* Mobile: fixed-width cards, horizontal scroll */
.sp-related-section .product-grid .product-card {
  flex: 0 0 clamp(180px, 44vw, 240px);
  width: clamp(180px, 44vw, 240px);
}
/* Desktop ≥ 768px: fixed 4-col grid — cards stay quarter-width regardless of item count */
@media (min-width: 48rem) {
  .sp-related-section .product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow-x: visible;
    flex-wrap: initial;
    padding-bottom: 0;
    scrollbar-width: initial;
  }
  .sp-related-section .product-grid .product-card {
    flex: unset;
    width: auto;
  }
}
.view-all-link {
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--coral);
  border-bottom: 2px solid var(--coral);
  padding-bottom: 2px;
  transition: color 0.15s;
}
.view-all-link:hover { color: var(--black); border-color: var(--black); }

/* ============================================================
   PRODUCT GRID — Modern Borderless Cards
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  padding: 0;
  margin-top: var(--space-element);
  margin-bottom: var(--space-element);
}

/* Homepage product grids — provides own gutter (no parent container) */
.sb-home-grid {
  padding: 0 var(--gutter);
  margin-bottom: var(--space-section);
}
.sb-home-grid--no-mb { margin-bottom: 0; }
.sb-shop-all-cta {
  text-align: center;
  padding: var(--space-element) var(--gutter) var(--space-section);
}

/* ── Card Shell ─────────────────────────────────────────────── */
.product-card {
  background: var(--white);
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.product-card:hover {
  transform: translate(-5px, -5px);
  box-shadow: 5px 5px 0 var(--black);
  outline: 0.5px solid #ccc;
}
.product-card:hover .p-wishlist { opacity: 1; transform: scale(1); }
.product-card:hover .p-arrow { opacity: 1; }

/* ── Badge Wrap ─────────────────────────────────────────────── */
.p-badge-wrap {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  pointer-events: none;
}

/* ── Badge base — colour driven by inline --pbg / --ptxt vars ── */
.p-badge {
  --pbg: var(--coral);
  --ptxt: var(--white);
  background: var(--pbg);
  color: var(--ptxt);
  font-family: var(--font-display);
  font-size: clamp(8px, 2.8cqw, 11px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  pointer-events: none;
}

/* ── Shape variants ──────────────────────────────────────── */
.p-badge--rect { padding: 5px 10px; border-radius: 0; }
.p-badge--oval { padding: 5px 14px; border-radius: 999px; }
.p-badge--star {
  position: relative;
  width: max-content;           /* stretches to fit any label length */
  min-width: clamp(40px, 10cqw, 60px);
  height: clamp(30px, 7cqw, 46px);
  padding: 0 clamp(12px, 3.5cqw, 18px); /* horizontal padding = spike overhang */
  font-size: clamp(7px, 2cqw, 10px);
  background: transparent;
  isolation: isolate;
  overflow: visible;
}
/* Starburst shape — clip-path on ::before only, text is never clipped */
.p-badge--star::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pbg);
  clip-path: polygon(
    50% 0%, 60.9% 9.4%, 75% 6.7%, 79.7% 20.3%,
    93.3% 25%, 90.6% 39.1%, 100% 50%, 90.6% 60.9%,
    93.3% 75%, 79.7% 79.7%, 75% 93.3%, 60.9% 90.6%,
    50% 100%, 39.1% 90.6%, 25% 93.3%, 20.3% 79.7%,
    6.7% 75%, 9.4% 60.9%, 0% 50%, 9.4% 39.1%,
    6.7% 25%, 20.3% 20.3%, 25% 6.7%, 39.1% 9.4%
  );
  z-index: -1;
}

/* ── Single product ──────────────────────────────────────── */
.sp-main-img { position: relative; }
.sp-main-img .p-badge-wrap { top: 8px; left: 8px; }
.sp-main-img .p-badge { font-size: clamp(10px, 1.2vw, 14px); }
.sp-main-img .p-badge--star {
  height: clamp(36px, 3vw, 52px);
  padding: 0 clamp(16px, 1.8vw, 26px);
  font-size: clamp(8px, 0.9vw, 13px);
}

/* ── Gallery nav arrows on sp-main-img ──────────────────────
   Design-system shadow-shift hover (matches .btn pattern).
   The arrow uses translateY(-50%) for vertical centering, so the
   hover transform must combine the lift with the centering offset.
   ───────────────────────────────────────────────────────────── */
.sp-img-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 40px;
  height: 40px;
  background: rgba(255,252,249,0.9);
  backdrop-filter: blur(4px);
  border: var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  transition: background 0.15s, color 0.15s, transform 0.1s, box-shadow 0.1s;
}
.sp-img-arrow:hover {
  background: var(--black);
  color: var(--white);
  transform: translate(-3px, calc(-50% - 3px));
  box-shadow: 3px 3px 0 var(--black);
}
.sp-img-arrow:active {
  transform: translateY(-50%);
  box-shadow: none;
}
.sp-img-arrow-prev { left: 12px; }
.sp-img-arrow-next { right: 12px; }

/* ── Image Container ────────────────────────────────────────── */
.p-img {
  aspect-ratio: 1;
  width: 100%;
  background: var(--grey-light);
  position: relative;
  overflow: hidden;
  border-radius: 0;
}
.p-img-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}
.p-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.product-card:hover .p-img img { transform: scale(1.05); }

/* ── Gallery Arrows ─────────────────────────────────────────── */
.p-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 32px;
  height: 32px;
  background: rgba(255,252,249,0.92);
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
  color: var(--black);
}
.p-arrow:hover { background: var(--black); color: var(--white); }
.p-arrow-prev { left: 8px; }
.p-arrow-next { right: 8px; }

/* ── Sale Flash Marquee ─────────────────────────────────────── */
.p-sale-marquee {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 28px;
  overflow: hidden;
  background: var(--black);
  z-index: 3;
}
.p-sale-marquee__track {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  animation: pMarquee 4s linear infinite;
}
.p-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 18px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--yellow);
  flex-shrink: 0;
}
@keyframes pMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Wishlist Heart ─────────────────────────────────────────── */
.p-wishlist {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 252, 249, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.p-wishlist:hover { background: var(--coral); color: var(--white); }
.p-wishlist.is-active,
.p-wishlist.is-wishlisted { opacity: 1; transform: scale(1); }

/* ── Product Info ───────────────────────────────────────────── */
.p-info { padding: var(--space-element) var(--gap); }
.p-brand {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999;
  margin-bottom: 4px;
}
.p-name {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 10px;
  min-height: 3em;
  color: var(--black);
}
.p-name a { color: inherit; }
.p-name a:hover { text-decoration: underline; text-underline-offset: 2px; }

.p-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: -4px;
  margin-bottom: 8px;
}
.p-rating-count {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: rgba(21,21,21,0.55);
  line-height: 1;
}

/* ── Pricing ────────────────────────────────────────────────── */
.p-rrp {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  color: rgba(21,21,21,0.75);
}
.p-rrp-label { font-family: var(--font-body); font-size: var(--text-label); color: rgba(21,21,21,0.35); margin-left: 3px; }

/* Sale pricing — slashed original + sale price */
.p-price-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.p-price-row .p-rrp {
  text-decoration: line-through;
  opacity: 0.45;
  color: var(--black);
  margin-left: 0;
}
.p-price-row .p-rrp-label {
  opacity: 0.45;
  margin-left: 0;
}
.p-sale-price {
  font-family: var(--font-body);
  font-size: var(--text-price);
  font-weight: 700;
  color: var(--coral);
  line-height: 1.1;
}
.p-member-price {
  margin-top: 6px;
}
.p-member-badge {
  display: inline-flex;
  align-items: stretch;
  height: 38px;
  overflow: hidden;
}
.p-member-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  padding: 0 11px;
  flex-shrink: 0;
}
.p-member-icon svg { display: block; }
.p-member-amount {
  display: flex;
  align-items: center;
  background: var(--coral);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-price);
  padding: 0 14px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* VIP active badge — yellow */
.p-member-badge--active .p-member-amount {
  background: var(--yellow);
  color: var(--black);
}
.p-member-was {
  display: flex;
  align-items: center;
  background: var(--coral);
  color: rgba(255,255,255,0.55);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0 6px 0 10px;
  text-decoration: line-through;
  white-space: nowrap;
  text-decoration-color: rgba(255,255,255,0.7);
}
/* "VIP" pill label inside active badge */
.p-member-vip-label {
  display: flex;
  align-items: center;
  background: var(--black);
  color: var(--yellow);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0 7px;
  white-space: nowrap;
}
.p-points {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.02em;
}
/* Guest join nudge on product cards */
.p-join-nudge {
  color: rgba(21,21,21,0.55);
  font-weight: 500;
}
.p-join-nudge a {
  color: var(--coral);
  font-weight: 700;
  text-decoration: none;
}
.p-join-nudge a:hover { text-decoration: underline; }
/* Guest join nudge on single product page */
.sp-guest-nudge {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: rgba(21,21,21,0.55);
  font-weight: 500;
}
.sp-guest-nudge a {
  color: var(--coral);
  font-weight: 700;
  text-decoration: none;
}
.sp-guest-nudge a:hover { text-decoration: underline; }
.p-vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--black);
  letter-spacing: 0.02em;
}
.p-vip-word { color: var(--coral); }
.p-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
}
.p-stars { color: var(--yellow); font-size: var(--text-sm); letter-spacing: 0.05em; }
.p-rating-num { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; }

/* ── Mobile: always show heart; member badge stretches full width ── */
@media (max-width: 47.9375rem) {
  .product-card { border-radius: 0; }
  .p-img { border-radius: 0; }
  .p-wishlist { opacity: 1; transform: scale(1); }
  .p-member-badge { display: flex; width: 100%; }
  .p-member-amount { flex: 1; justify-content: center; }
}

/* ============================================================
   HEAD SHOP + CATEGORY GRID
   ============================================================ */
.headshop-header {
  padding: var(--space-section) var(--gutter) 0;
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: end;
  gap: var(--space-component);
}
.headshop-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.headshop-header p {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--black);
}
@media (max-width: 900px) {
  .headshop-header {
    grid-template-columns: 1fr;
    gap: var(--space-element);
    padding-top: var(--space-component);
  }
}
.sb-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  padding: var(--space-section) var(--gutter);
}
.cat-card-img {
  display: block;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cat-card-img:hover { transform: translate(-3px,-3px); box-shadow: 3px 3px 0 var(--black); }
.cat-card-img img {
  width: 100%;
  height: auto;
  display: block;
}
.cat-card {
  aspect-ratio: 1;
  padding: 20px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 0.85;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s;
}
.cat-card:hover { transform: scale(1.02); }
.cat-card span { word-break: break-word; position: relative; z-index: 2; }
.cat-img-circle {
  position: absolute;
  bottom: -15px;
  right: -15px;
  width: 58%;
  height: 58%;
  background: rgba(0,0,0,0.08);
  border-radius: 50%;
  z-index: 1;
  border: 2px dashed rgba(0,0,0,0.2);
}
.cc-bongs     { background: #5c8aff; color: var(--black); }
.cc-grinders  { background: #b3ff00; color: var(--green); }
.cc-pipes     { background: #9e98ff; color: var(--pink); }
.cc-parts     { background: #ff9000; color: var(--yellow); }
.cc-access    { background: #c783ff; color: var(--blue); }
.cc-cleaning  { background: #ff766b; color: var(--yellow); }
.cc-papers    { background: #ff6bba; color: var(--yellow); }
.cc-dabs      { background: #ffe600; color: var(--green); }

/* ============================================================
   MYSTERY BOXES
   ============================================================ */
.mystery-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0 var(--gutter);
  margin-top: var(--space-section);
  align-items: stretch;
}

/* LEFT pink panel */
.mystery-main {
  background: var(--pink);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  container-type: inline-size;
}
.mystery-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-element) var(--space-component) 0;
  position: relative;
  z-index: 3;
}
.mystery-subtitle {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-body);
  color: var(--black);
}
.mystery-hot-badge {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body);
  text-align: right;
  color: var(--black);
  line-height: 1.5;
}
.mystery-main-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 13cqw, 6.875rem);
  color: var(--coral);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  padding: var(--space-element) var(--space-component) 0;
  position: relative;
  z-index: 3;
}
.mystery-box-img {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-element) var(--space-component);
  z-index: 2;
}
.mystery-box-img > img {
  width: clamp(220px, 75%, 440px);
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
}
.shop-now-badge {
  position: absolute;
  bottom: 5%;
  left: 2%;
  width: clamp(200px, 38%, 360px);
  z-index: 4;
  display: block;
  transition: transform 0.2s;
}
.shop-now-badge:hover { transform: scale(1.08); }
.shop-now-badge img { width: 100%; height: auto; display: block; }
.mystery-boxes-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 13cqw, 6.875rem);
  color: var(--coral);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  padding: 0 var(--space-component) var(--space-element);
  position: relative;
  z-index: 3;
}
.mystery-desc {
  padding: var(--space-element) var(--space-component) var(--space-component);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--black);
  position: relative;
  z-index: 3;
  text-align: center;
}

/* RIGHT tier blocks */
.mystery-tiers {
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
  padding-left: var(--space-element);
}
.tier-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: var(--space-element) var(--gap);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  transition: filter 0.15s, transform 0.15s;
}
.tier-block:hover { transform: translate(-3px,-3px); box-shadow: 3px 3px 0 var(--black); }
.tier-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  line-height: 1.25;
}
.tier-ref { flex-shrink: 0; }
.tier-desc-text { text-align: right; }
.tier-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 13cqw, 10rem);
  text-transform: uppercase;
  line-height: 0.9;
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: var(--space-element) 0;
}
.tier-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.25;
}
.tier-price { font-weight: 600; }
.tier-price .per { font-weight: 400; font-size: var(--text-body); }
.tier-value { font-weight: 400; }

.tb-starter  { background: var(--yellow); }
.tb-starter .tier-name { color: var(--coral); }
.tb-starter .tier-top-row, .tb-starter .tier-bottom-row { color: var(--black); }

.tb-sessions { background: var(--green); }
.tb-sessions .tier-name { color: var(--pink); }
.tb-sessions .tier-top-row, .tb-sessions .tier-bottom-row { color: var(--white); }

.tb-ultimate { background: var(--blue); }
.tb-ultimate .tier-name { color: var(--yellow); }
.tb-ultimate .tier-top-row, .tb-ultimate .tier-bottom-row { color: var(--white); }

/* ============================================================
   PRICING / MEMBERSHIP TIERS
   ============================================================ */
.pricing-section {
  position: relative;
  overflow: hidden;
  background: var(--black);
  background-image: url('../images/pricing-bg.png');
  background-size: cover;
  background-position: center;
  padding: var(--space-section) clamp(var(--gutter), calc(50vw - 40rem), 15%);
}
.pricing-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.tier-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-element) var(--gap);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.tier-card:hover {
  transform: translateY(-8px);
  box-shadow: 3px 3px 0 #151515;
}
.tier-guest-card { background: var(--pink);  color: var(--black); }
.tier-elite-card { background: var(--coral); color: var(--black); }
.tier-free-card  { background: var(--blue);  color: var(--black); }
.tier-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-element);
}
.tier-oval-wrap {
  position: relative;
  width: 100%;
  margin-bottom: var(--gap);
  text-align: center;
}
.tier-oval {
  width: 100%;
  height: 125px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tier-guest-card .tier-oval { background: var(--coral); }
.tier-elite-card .tier-oval { background: var(--yellow); }
.tier-free-card  .tier-oval { background: var(--pink); }
.tier-oval-name {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.375rem);
  text-align: center;
  color: var(--black);
  line-height: 1;
}
.popular-badge {
  display: inline-block;
  margin: var(--gap) auto 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--yellow);
  padding: 4px 12px;
  text-align: center;
}
.tier-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
  flex-grow: 1;
  margin-top: var(--gap);
}
.tier-feature-row {
  display: flex;
  align-items: center;
  gap: calc(var(--gap) * 0.5);
}
/* Both icons: background locked to glyph size so no bleed */
.tier-feature-result .ph-check-square,
.tier-feature-result .ph-x-square {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
/* Check-square: square fill = oval colour, black shows through checkmark cutout */
.tier-guest-card .tier-feature-result .ph-check-square { color: var(--coral);  background: var(--black); }
.tier-elite-card .tier-feature-result .ph-check-square { color: var(--yellow); background: var(--black); }
.tier-free-card  .tier-feature-result .ph-check-square { color: var(--pink);   background: var(--black); }
/* X-square: solid black square, white shows through X cutout */
.tier-feature-result .ph-x-square { color: var(--black); background: var(--white); }
.tier-feature-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  letter-spacing: 0.05em;
  color: var(--black);
  flex: 0 0 auto;
  white-space: nowrap;
}
.tier-feature-dots {
  flex: 1;
  min-width: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  margin: 0 calc(var(--gap) * 0.5);
}
.tier-feature-result {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-body-lg);
  color: var(--black);
  letter-spacing: 0.05em;
  flex: 0 0 auto;
  justify-content: flex-start;
  white-space: nowrap;
}
.tier-result--no { opacity: 1; }
.tier-cta-btn {
  margin-top: var(--space-element);
  width: 100%;
  justify-content: center;
}

/* ============================================================
   MEMBERSHIP PAGE — Do the Math + Calculator
   ============================================================ */
.mem-math {
  background: var(--black);
  color: var(--white);
  padding: var(--space-section) clamp(var(--gutter), calc(50vw - 40rem), 15%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-component);
  align-items: start;
}
.mem-math__label {
  display: block;
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
  margin-bottom: var(--gap);
}
.mem-math__title {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: 1;
  margin-bottom: var(--space-element);
}
.mem-math__intro {
  font-size: var(--text-body-lg);
  opacity: 0.75;
  margin-bottom: var(--space-component);
  max-width: 480px;
}
.mem-math__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mem-math__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--gap) 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mem-math__item-label { font-size: var(--text-body); }
.mem-math__item-value {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  color: var(--yellow);
  white-space: nowrap;
}
.mem-math__total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--gap);
  border-top: 2px solid var(--white);
  margin-top: var(--gap);
}
.mem-math__total-label {
  font-size: var(--text-body-lg);
  font-weight: 700;
}
.mem-math__total-value {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  color: var(--yellow);
}
.mem-math__sub-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--gap);
  font-size: var(--text-body);
}
.mem-math__net {
  color: var(--pink);
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  opacity: 1;
}
.mem-calc {
  background: rgba(255,255,255,0.06);
  padding: var(--space-component) var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}
.mem-calc__label {
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
}
.mem-calc__heading {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  line-height: 1;
}
.mem-calc__input-wrap {
  display: flex;
  align-items: center;
  gap: var(--gap);
  background: rgba(255,255,255,0.08);
  padding: var(--input-py) var(--input-px);
  border: 1px solid rgba(255,255,255,0.2);
}
.mem-calc__input-wrap:focus-within { border-color: var(--coral); }
.mem-calc__dollar {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  color: var(--yellow);
  line-height: 1;
}
.mem-calc__input {
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  color: var(--white);
  width: 100%;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
}
.mem-calc__input::placeholder { color: rgba(255,255,255,0.3); }
.mem-calc__per {
  font-size: var(--text-sm);
  opacity: 0.5;
  white-space: nowrap;
}
.mem-calc__month-label {
  font-size: var(--text-sm);
  opacity: 0.55;
  margin-top: calc(var(--gap) * -0.5);
}
.mem-calc__results[hidden],
.mem-calc__verdict[hidden] { display: none !important; }
.mem-calc__results {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mem-calc__result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--gap) 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mem-calc__result-label { font-size: var(--text-body); opacity: 0.75; }
.mem-calc__result-value {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  color: var(--yellow);
}
.mem-calc__verdict {
  background: var(--blue);
  color: var(--white);
  padding: var(--gap) var(--input-px);
  text-align: center;
}
.mem-calc__verdict-text {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  line-height: 1.1;
}
.mem-calc__verdict-sub {
  font-size: var(--text-body);
  font-weight: 600;
  margin-top: calc(var(--gap) * 0.25);
  opacity: 0.75;
}
@media (max-width: 768px) {
  .mem-math { grid-template-columns: 1fr; }
}

/* ============================================================
   MEMBERSHIP PAGE — The Ranks
   ============================================================ */
.mem-ranks {
  padding: var(--space-section) clamp(var(--gutter), calc(50vw - 40rem), 15%);
  background: var(--white);
}
.mem-ranks__header {
  text-align: center;
  margin-bottom: var(--space-component);
}
.mem-ranks__label {
  display: block;
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
  margin-bottom: var(--gap);
}
.mem-ranks__title {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: 1;
}
.mem-ranks__sub {
  font-size: var(--text-body-lg);
  max-width: 600px;
  margin: var(--gap) auto 0;
  opacity: 0.65;
}
.mem-ranks__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.mem-rank-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-element) var(--gap);
  gap: var(--gap);
  transition: transform 0.15s, box-shadow 0.15s;
}
.mem-rank-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--black);
}
.mem-rank-card__icon { line-height: 1; }
.mem-rank-card__name {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  line-height: 1;
}
.mem-rank-card__desc {
  font-size: var(--text-body);
  flex: 1;
}
.mem-rank-card__xp {
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.65;
}
.mem-rank-card--rookie  { background: var(--pink);   color: var(--black); }
.mem-rank-card--regular { background: var(--green);  color: var(--white); }
.mem-rank-card--legend  { background: var(--blue);   color: var(--white); }
.mem-rank-card--og      { background: var(--yellow); color: var(--black); }
.mem-ranks__earn {
  text-align: center;
  font-size: var(--text-body);
  margin-top: var(--space-component);
  opacity: 0.7;
}
.mem-ranks__earn a {
  color: var(--coral);
  font-weight: 700;
  text-decoration: underline;
}
@media (max-width: 900px) {
  .mem-ranks__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .mem-ranks__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   GIVEAWAY
   ============================================================ */
.giveaway-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: visible;
  background: var(--white);
  margin-top: var(--space-section);
}
.giveaway-text {
  position: relative;
  z-index: 1;
  padding: var(--space-section) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
  justify-content: center;
}
.giveaway-text .btn { align-self: flex-start; }
.giveaway-heading-wrap {
  position: relative;
  display: block;
}
.giveaway-heading-wrap h2 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 0.90;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--black);
}
.giveaway-badge-oval {
  position: absolute;
  top: -4%;
  left: 52%;
  width: clamp(160px, 20vw, 270px);
  height: auto;
  transform: rotate(-6deg);
  z-index: 2;
}
.giveaway-text p {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--black);
  max-width: 480px;
}
.giveaway-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  padding: var(--space-section) var(--gutter);
  overflow: hidden;
}
.giveaway-prize-img {
  width: clamp(360px, 100%, 900px);
  height: auto;
  position: relative;
  z-index: 1;
}

/* ============================================================
   HOT ITEM TICKER
   ============================================================ */
.hot-ticker {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  height: clamp(4rem, 14vw, 8rem);
}
.hot-ticker-track {
  display: flex;
  flex: 0 0 auto;
  animation: marquee 18s linear infinite;
}
.hot-block {
  flex: 0 0 clamp(264px, 66vw, 528px);
  height: clamp(4rem, 14vw, 8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hot-block-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: clamp(48px, 12vw, 96px);
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.hot-asterisk {
  font-size: 1.4em;
  line-height: 1;
}
.hot-block:last-child .hot-block-text {
  font-size: clamp(45px, 11.25vw, 90px);
}

/* Mobile: smaller tiles so ~2–3 are visible at once */
@media (max-width: 47.9375rem) {
  .hot-ticker { height: 9vw; }
  .hot-block { flex: 0 0 45vw; height: 9vw; }
  .hot-block-text { font-size: 7.5vw; }
  .hot-block:last-child .hot-block-text { font-size: 7vw; }
}

/* ============================================================
   COLLECTIONS TRUST BAR  (yellow strip at bottom of warehouse photo)
   ============================================================ */
/* Collections section — trust bar floats over the warehouse photo */
.collections-section .footer-trust-wrap {
  position: absolute;
  bottom: 60px;
  left: 60px;
  right: 60px;
  z-index: 3;
  padding: 0;
}
@media (max-width: 767px) {
  .collections-section .footer-trust-wrap { display: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
/* ── Trust bar ──────────────────────────────────────────────── */
/* Values bar — 3-col icon/title/body, yellow bg */
.sb-values-bar { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--black); }
.sb-values-bar__item { display: flex; flex-direction: column; gap: var(--space-element); padding: var(--space-component) var(--gutter); background: var(--yellow); }
.sb-values-bar__icon { color: var(--black); display: flex; }
.sb-values-bar__title { font-family: var(--font-display); font-size: var(--text-subheading); line-height: 1; text-transform: uppercase; color: var(--black); }
.sb-values-bar__body { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.5; color: var(--black); margin: 0; }
@media (max-width: 768px) { .sb-values-bar { grid-template-columns: 1fr; } }

.footer-trust-wrap {
  padding: var(--space-component) var(--gutter);
}
.footer-trust-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--black);
}
@media (width >= 48rem) {
  .footer-trust-bar { grid-template-columns: 1fr 1fr; }
}
@media (width >= 64rem) {
  .footer-trust-bar { grid-template-columns: repeat(4, 1fr); }
}
.footer-trust-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
  padding: var(--space-component) var(--gutter);
  background: var(--yellow);
}
.footer-trust-title {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 400;
  color: var(--black);
  line-height: 1;
  text-transform: uppercase;
}
.footer-trust-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--black);
  line-height: 1.25;
}

.footer {
  background: var(--coral);
  position: relative;
  overflow: hidden;
}
.footer-top {
  padding: var(--space-component) var(--gutter) 0;
}
.footer-brand-logo img { width: 80%; height: auto; display: block; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  padding-bottom: 40px;
}
.footer-brand-email {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  color: var(--black);
  line-height: 1.3;
  padding: 10px 0;
}
.footer-brand-email a { color: var(--black); }
.footer-brand-email a:hover { opacity: 0.6; }
.footer-social {
  display: flex;
  gap: 38px;
  padding: 10px 0;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.footer-social a:hover { opacity: 0.6; }
.footer-social svg { width: 28px; height: 28px; }
.footer-payment { margin-top: 0; }
.footer-payment-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--black);
  opacity: 0.6;
  margin-bottom: 8px;
}
.footer-payment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.payment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 4px;
  padding: 5px 9px;
  height: 34px;
}
.payment-badge-logo {
  height: 18px;
  width: auto;
  max-width: 56px;
  display: block;
  object-fit: contain;
}
.footer-contact-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.footer-col-title {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--black);
  padding: 10px;
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { padding: 0; }
.footer-col ul li a {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--black);
  padding: 10px;
  display: block;
  line-height: 1.3;
  transition: opacity 0.15s;
}
.footer-col ul li a:hover { opacity: 0.6; }
.footer-hot-ticker {
  display: flex;
  overflow: hidden;
  background: var(--yellow);
  height: 48px;
  align-items: center;
}
.footer-hot-track {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  animation: marquee 20s linear infinite;
  white-space: nowrap;
}
.footer-hot-item {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--black);
  padding: 0 20px;
}
.footer-hot-sep {
  font-size: 18px;
  color: var(--black);
  opacity: 0.5;
}

.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-element) var(--gutter);
  border-top: 1px solid var(--black);
}
.footer-copyright {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--black);
  line-height: 1.3;
}
/* footer wordmark styles below in Footer Wordmark section */

/* ============================================================
   WOO: CART NOTIFICATION
   ============================================================ */
.sb-cart-notice {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--green);
  color: var(--white);
  padding: 14px 22px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: var(--border);
  z-index: 9999;
  transform: translateX(calc(100% + 48px));
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
  pointer-events: none;
}
.sb-cart-notice.show {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.cart-count.is-hidden { display: none; }

/* ============================================================
   SIDE CART DRAWER
   ============================================================ */
.sc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 10002;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.sc-backdrop.is-open { opacity: 1; visibility: visible; }

/* ── Side Cart Drawer ───────────────────────────────────────── */
.sc-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(500px, 100vw);
  height: 100vh;
  height: 100dvh;
  background: var(--white);
  z-index: 10003;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: var(--border);
}
.sc-drawer.is-open { transform: translateX(0); }

/* Header */
.sc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: var(--border);
  flex-shrink: 0;
}
.sc-title {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  line-height: 1;
  text-transform: uppercase;
}
.sc-count {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  color: #999;
}
.sc-close {
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  padding: 0;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.sc-close:hover { opacity: 1; }

/* Shipping progress bar */
.sc-shipping-bar {
  padding: 12px 20px;
  border-bottom: var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc-shipping-track {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
}
.sc-shipping-track::before {
  content: '';
  display: block;
  width: 100%;
  height: 10px;
  background: rgba(21,21,21,0.15);
  border-radius: 100px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.sc-shipping-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 10px;
  transform: translateY(-50%);
  background: var(--coral);
  border-radius: 100px;
  transition: width 0.4s ease;
  z-index: 1;
}
.sc-shipping-icon {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.4s ease;
  z-index: 2;
  width: 40px;
  height: 40px;
  background: var(--black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.sc-shipping-icon i { font-size: 18px; color: var(--white); line-height: 1; }
.sc-shipping-text {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.4;
  color: var(--black);
}
.sc-shipping-text .woocommerce-Price-amount { font-weight: 600; color: var(--coral); }
.sc-shipping-text strong { font-weight: 600; color: var(--coral); }

/* Scrollable body */
.sc-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  padding: 0;
}

/* Cart items */
.sc-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--space-element) 20px;
  border-bottom: 1px solid rgba(21,21,21,0.08);
}
.sc-item-img {
  width: 90px;
  height: 90px;
  background: var(--grey-light);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-item-img img { width: 100%; height: 100%; object-fit: cover; }
.sc-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sc-item-name {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.3;
  color: var(--black);
  display: block;
}
.sc-item-name:hover { color: var(--coral); }
.sc-item-attrs {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: #999;
}
.sc-item-price {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--coral);
}
.sc-item-qty {
  display: inline-flex;
  align-items: center;
}
.sc-qty-btn {
  width: 32px;
  height: 32px;
  background: var(--white);
  border: var(--border);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 400;
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sc-qty-btn:hover { background: var(--grey-light); }
.sc-qty-val {
  width: 36px;
  height: 32px;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--black);
  border-top: var(--border);
  border-bottom: var(--border);
  border-left: none;
  border-right: none;
  line-height: 32px;
}
.sc-item-remove {
  background: none;
  border: none;
  color: var(--black);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.sc-item-remove:hover { opacity: 0.45; }

/* Order note */
.sc-note {
  padding: var(--space-element) 20px;
  border-top: var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc-note-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--black);
  display: block;
  text-transform: uppercase;
}
.sc-note-input {
  width: 100%;
  padding: 10px 12px;
  border: var(--border);
  background: var(--grey-light);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--black);
  resize: none;
  min-height: 60px;
}
.sc-note-input::placeholder { color: rgba(21,21,21,0.4); }
.sc-note-input:focus { outline: none; border-color: var(--coral); }

/* Empty cart */
.sc-empty {
  padding: var(--space-section) var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-element);
}
.sc-empty-icon { color: #ccc; }
.sc-empty-icon svg { width: 48px; height: 48px; }
.sc-empty-text {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: #999;
}
.sc-empty-btn { border: var(--border); }

/* Related / You might also like — accordion */
.sc-related {
  border-top: var(--border);
}
.sc-related-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--black);
}
.sc-related-trigger:hover { opacity: 0.7; }
.sc-related-chevron {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.sc-related-trigger[aria-expanded="true"] .sc-related-chevron {
  transform: rotate(180deg);
}
.sc-related-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  padding: 0 20px;
}
.sc-related-body.is-open {
  max-height: 400px;
  padding-bottom: 16px;
}
/* legacy title — replaced by trigger */
.sc-related-title {
  font-family: 'Work Sans', sans-serif !important;
  font-size: var(--text-sm) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #999 !important;
  line-height: 1 !important;
}
/* Grid of product cards — horizontal scroll */
.sc-related-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--coral) var(--black);
}
.sc-related-grid::-webkit-scrollbar { height: 3px; }
.sc-related-grid::-webkit-scrollbar-track { background: var(--black); }
.sc-related-grid::-webkit-scrollbar-thumb { background: var(--coral); }
/* Wrapper: product card + add button stacked */
.sc-related-item {
  flex: 0 0 140px;
  width: 140px;
  display: flex;
  flex-direction: column;
}
/* Constrain product card inside mini cart */
.sc-related-item .product-card {
  font-size: 0.8em; /* scale text slightly */
}
.sc-related-item .p-info { padding: 6px 8px 8px; }
.sc-related-item .p-name { font-size: var(--text-caption); min-height: 0; margin-bottom: 4px; }
.sc-related-item .p-brand { font-size: 9px; }
.sc-related-item .p-rrp,
.sc-related-item .p-points,
.sc-related-item .p-vip-badge { display: none; }
.sc-related-item .p-member-badge { height: 26px; }
.sc-related-item .p-member-amount {
  font-size: var(--text-body);
  padding: 0 8px;
  background: var(--coral);
}
.sc-related-item .p-member-badge--active .p-member-amount {
  background: var(--yellow);
  color: var(--black);
}
.sc-related-item .p-member-vip-label {
  font-size: 9px;
  padding: 0 5px;
}
.sc-related-item .p-member-icon { padding: 0 6px; }
.sc-related-item .p-member-icon svg { width: 14px; height: 10px; }
.sc-related-item .p-wishlist { display: none; } /* no wishlist in mini cart */
.sc-related-add {
  width: 100%;
  border-radius: 0;
  height: 30px;
  font-size: 10px !important;
  padding: 0 8px !important;
  letter-spacing: 0.05em;
}

/* Footer: subtotal + buttons */
.sc-footer {
  padding: 12px 20px;
  border-top: var(--border);
  flex-shrink: 0;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: var(--black);
}
.sc-subtotal-amount {
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: var(--black);
}
.sc-btn-view,
.sc-btn-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  height: 48px;
}
.sc-btn-view { border: var(--border); background: var(--white); }

/* Mobile — full width */
@media (max-width: 600px) {
  .sc-drawer { width: 100vw; }
  .sc-item-img { width: 72px; height: 72px; }
}

/* ============================================================
   CART PAGE
   ============================================================ */
/* ============================================================
   CART PAGE — Figma node 382-9892
   ============================================================ */
.sb-cart-page {
  padding: 44px clamp(var(--gutter), calc(50vw - 40rem), 15%) 80px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Header */
.sb-cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.sb-cart-title {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: 1;
  text-transform: uppercase;
  color: var(--black);
}
.sb-cart-continue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--coral);
  line-height: 1.4;
}
.sb-cart-continue:hover { opacity: 0.75; }
.sb-cart-continue svg { stroke: var(--coral); flex-shrink: 0; }

/* Empty state */
.sb-cart-empty {
  text-align: center;
  padding: 80px 20px;
}
.sb-cart-empty-icon { margin-bottom: 16px; color: #ccc; }
.sb-cart-empty-icon svg { width: 56px; height: 56px; }
.sb-cart-empty h2 { font-family: var(--font-display); font-size: var(--text-heading); line-height: 1; text-transform: uppercase; margin-bottom: 8px; }
.sb-cart-empty p { color: #888; margin-bottom: 24px; font-size: 16px; }

/* Shipping banner */
.sb-cart-shipping-bar {
  background: var(--coral);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid rgba(21,21,21,0.15);
  border-bottom: 1px solid rgba(21,21,21,0.15);
}
.sb-shipping-track-wrap {
  position: relative;
  height: 60px;
  display: flex;
  align-items: center;
}
.sb-shipping-track {
  width: 100%;
  height: 16px;
  background: rgba(21,21,21,0.15);
  border-radius: 100px;
  position: relative;
  overflow: visible;
}
.sb-shipping-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--white);
  border-radius: 100px;
  transition: width 0.4s ease;
}
.sb-shipping-truck {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: var(--black);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 0.4s ease;
  z-index: 2;
}
.sb-shipping-text {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 500;
  line-height: 1.3;
  color: var(--white);
}
.sb-shipping-text .woocommerce-Price-amount { font-weight: 600; }
.sb-shipping-text strong { font-weight: 600; color: var(--white); }
.sb-shipping-text .sb-ship-label { color: var(--black); }

/* Two-column layout */
.sb-cart-layout {
  display: grid;
  grid-template-columns: 1fr clamp(300px, 36%, 520px);
  gap: 40px;
  align-items: start;
}

/* LEFT — Cart items */
.sb-cart-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Cart Item Row — shared token rules (desktop + mobile) ───
   Desktop: 6-col grid  img | name | price | qty | total | ×
   Mobile:  named-area  img | name | ×
                        img | qty  | .
   Mirrors minicart (sc-item) layout on mobile.
   ──────────────────────────────────────────────────────────── */

/* Column header */
.sb-cart-row-header {
  display: grid;
  grid-template-columns: 80px 1fr 90px 108px 90px 40px;
  gap: 12px 20px;
  align-items: center;
  padding: 10px 30px;
  border-bottom: 1px solid var(--black);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(21,21,21,0.45);
}
.sb-cart-row-header span:nth-child(3),
.sb-cart-row-header span:nth-child(4),
.sb-cart-row-header span:nth-child(5) { text-align: center; }

/* Item row — desktop 6-col */
.sb-cart-row {
  display: grid;
  grid-template-columns: 80px 1fr 90px 108px 90px 40px;
  gap: 12px 20px;
  align-items: center;
  padding: 16px 30px;
  border-bottom: 1px solid rgba(21,21,21,0.08);
}

/* Image */
.sb-cart-item-img {
  width: 80px;
  height: 80px;
  background: #f7f4ef;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-cart-item-img img { width: 100%; height: 100%; object-fit: cover; }

/* Info column */
.sb-cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sb-cart-item-name {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.35;
  color: var(--black);
  display: block;
}
.sb-cart-item-name:hover { color: var(--coral); }
.sb-cart-item-meta {
  font-size: var(--text-caption);
  color: #aaa;
}

/* Mobile-only price inside info — hidden on desktop */
.sb-cart-item-price-mob {
  display: none;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--coral);
  margin-top: 2px;
}

/* Price col (desktop) */
.sb-cart-col-price {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--coral);
  white-space: nowrap;
  text-align: center;
}

/* Qty stepper */
.sb-cart-col-qty { display: flex; justify-content: center; }
.sb-cart-qty {
  display: inline-flex;
  align-items: center;
  width: 108px;
}
.sb-cart-qty-btn {
  width: 36px;
  height: 36px;
  background: var(--white);
  border: var(--border);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 400;
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.1s;
}
.sb-cart-qty-btn:hover { background: #f0ede8; }
.sb-cart-qty-input {
  width: 36px;
  height: 36px;
  text-align: center;
  border-top: var(--border);
  border-bottom: var(--border);
  border-left: none;
  border-right: none;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--black);
  background: var(--white);
  -moz-appearance: textfield;
}
.sb-cart-qty-input::-webkit-inner-spin-button,
.sb-cart-qty-input::-webkit-outer-spin-button { display: none; }
.sb-cart-qty-input:focus { outline: none; }

/* Total col */
.sb-cart-col-total {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--black);
  white-space: nowrap;
  text-align: center;
}

/* Remove — identical to .sc-item-remove in minicart */
.sb-cart-col-remove {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-cart-remove {
  background: none;
  border: none;
  color: var(--black);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.3;
  transition: opacity 0.15s;
}
.sb-cart-remove:hover { opacity: 0.55; }

/* Order note */
.sb-cart-note {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sb-cart-note-label {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.9px;
  color: var(--black);
  display: block;
}
.sb-cart-note-input {
  width: 100%;
  height: 75px;
  padding: 16px;
  border: none;
  background: rgba(21,21,21,0.10);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.9px;
  color: var(--black);
  resize: none;
}
.sb-cart-note-input::placeholder { color: rgba(21,21,21,0.4); }
.sb-cart-note-input:focus { outline: none; }

/* Update cart — layout only, typography from .btn */
.sb-cart-update { align-self: flex-start; }

/* RIGHT — Order summary */
.sb-cart-summary {
  position: sticky;
  top: 100px;
  background: #ffffff;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sb-cart-summary-title {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  line-height: 1;
  text-transform: uppercase;
  color: var(--black);
}

/* Coupon */
.sb-cart-coupon {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.sb-cart-coupon-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
  display: block;
}
.sb-cart-coupon-row {
  display: flex;
  gap: var(--gap);
  align-items: stretch;
}
.sb-cart-coupon-input {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  padding: 0 var(--gap);
  border: var(--border);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--black);
  background: var(--white);
}
.sb-cart-coupon-input::placeholder { color: #aaa; }
.sb-cart-coupon-input:focus { outline: none; border-color: var(--coral); }
.sb-cart-coupon-btn { flex-shrink: 0; height: 44px; padding-top: 0; padding-bottom: 0; }
/* Applied coupon pills — shared across cart + checkout */
.sb-applied-coupons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.sb-applied-coupon {
  display: inline-flex;
  align-items: stretch;
  background: var(--black);
  color: var(--yellow);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sb-applied-coupon-code {
  padding: 5px 10px;
}
.sb-applied-coupon-remove {
  display: flex;
  align-items: center;
  padding: 5px 9px;
  background: none;
  border: none;
  border-left: 1px solid rgba(255,221,0,0.25);
  color: var(--yellow);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.sb-applied-coupon-remove:hover { opacity: 1; }

.sb-cart-coupon-msg {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  padding: 6px 0 2px;
}

/* Discount row count "(N)" */
.sb-cart-discount-count {
  font-size: var(--text-caption);
  font-weight: 400;
  opacity: 0.5;
  margin-left: 2px;
}

/* Coupon code pill inside discount row — black/yellow pair */
.sb-cart-coupon-tag {
  display: inline-block;
  background: var(--black);
  color: var(--yellow);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Shipping calculator */
.sb-cart-ship-calc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0 4px;
  border-top: 1px solid rgba(21,21,21,0.08);
}
.sb-cart-ship-calc-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(21,21,21,0.5);
}
.sb-cart-ship-calc-row { display: flex; gap: var(--gap); }
.sb-cart-ship-calc-input {
  flex: 1;
  padding: var(--input-py) var(--input-px);
  border: var(--border);
  font-family: var(--font-body);
  font-size: var(--text-body);
  background: var(--white);
  color: var(--black);
  border-radius: 0;
}
.sb-cart-ship-calc-input:focus { outline: none; border-color: var(--coral); }
.sb-cart-ship-calc-btn {
  padding: 0 16px;
  background: var(--black);
  color: var(--white);
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.sb-cart-ship-calc-btn:hover { opacity: 0.75; }
.sb-cart-ship-rates {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sb-cart-ship-rate {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--black);
  cursor: pointer;
}
.sb-cart-ship-rate input[type="radio"] {
  accent-color: var(--black);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}
.sb-cart-ship-rate-label { flex: 1; }
.sb-cart-ship-rate-cost { font-weight: 700; white-space: nowrap; }

/* Totals rows */
.sb-cart-totals {
  display: flex;
  flex-direction: column;
  border-top: var(--border);
}
.sb-cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--black);
  border-bottom: 1px solid rgba(21,21,21,0.08);
}
.sb-cart-total-row > span:last-child { font-weight: 700; }
.sb-cart-discount > span:last-child { color: var(--green); }
.sb-cart-total-row--secondary {
  font-size: var(--text-caption);
  color: #aaa;
  padding: 4px 0;
  border-bottom: none;
}
.sb-cart-total-row--secondary span:last-child { font-weight: 500; color: #aaa; }
.sb-cart-ship-note {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  color: #999;
}

/* "excl. shipping" note on Total label */
.sb-cart-total-note {
  font-size: var(--text-caption);
  font-weight: 400;
  color: #aaa;
  margin-left: 4px;
}

/* Grand total */
.sb-cart-total-divider {
  height: 1px;
  background: var(--black);
  margin: 0;
}
.sb-cart-total-final {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 800;
  color: var(--black);
}

/* Checkout — full width, inherits .btn yellow */
.sb-cart-checkout-btn {
  display: flex;
  width: 100%;
  height: 52px;
  padding-top: 0;
  padding-bottom: 0;
}

/* ── Cart updating state ─────────────────────────────────── */
.sb-cart-row.is-updating { opacity: 0.4; pointer-events: none; transition: opacity 0.15s; }

/* ── Mode 1: Desktop ( ≥ 64rem / 1024px ) ───────────────────
   2-col layout · 5-col row grid · sticky right summary
   ─────────────────────────────────────────────────────────── */

/* ── Mode 2: Mobile ( < 64rem / 1024px ) ────────────────────
   Single column · minicart-style named-area row · summary unsticks
   ─────────────────────────────────────────────────────────── */
@media (max-width: 63.9375rem) {
  .sb-cart-page { padding: 24px var(--gutter) 60px; gap: 20px; }
  .sb-cart-layout { grid-template-columns: 1fr; gap: var(--space-component); }
  .sb-cart-summary { position: static; padding: var(--space-element) 0; }
  .sb-cart-layout { gap: var(--space-section); }
  .sb-cart-row-header { display: none; }
  .sb-cart-row {
    grid-template-columns: 72px 108px 1fr 40px;
    grid-template-rows: auto auto;
    grid-template-areas:
      "img info  info   remove"
      "img qty   total  remove";
    gap: 6px 12px;
    padding: 14px 0;
  }
  .sb-cart-item-img {
    grid-area: img;
    grid-row: 1 / 3;
    width: 72px;
    height: 72px;
    align-self: start;
  }
  .sb-cart-item-info { grid-area: info; grid-column: 2 / 4; }
  .sb-cart-item-price-mob { display: block; }
  .sb-cart-col-price { display: none; }
  .sb-cart-col-qty { grid-area: qty; justify-content: flex-start; }
  .sb-cart-col-total {
    grid-area: total;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
  }
  .sb-cart-col-remove {
    grid-area: remove;
    grid-row: 1 / 3;
    align-self: center;
    justify-content: center;
  }
}

/* ============================================================
   CHECKOUT PAGE — distraction-free (no header/footer)
   ============================================================ */
.sb-checkout-body .announcement-bar,
.sb-checkout-body header,
.sb-checkout-body .footer,
.sb-checkout-body .hot-ticker,
.sb-checkout-body .sc-drawer,
.sb-checkout-body .sc-backdrop,
.sb-checkout-body .sb-cart-notice,
.sb-checkout-body .footer-hit-badge,
.sb-checkout-body .footer-wordmark-wrap,
.sb-checkout-body .woocommerce-info { display: none !important; }

.sb-checkout-page {
  padding: var(--space-element) clamp(var(--gutter), calc(50vw - 40rem), 15%) var(--space-section);
}

/* Checkout header */
.sb-checkout-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-element) 0;
  border-bottom: var(--border);
  margin-bottom: var(--space-component);
}
.sb-checkout-logo { flex-shrink: 0; line-height: 0; }
.sb-checkout-logo img { height: 42px; width: auto; max-width: 180px; object-fit: contain; }
.sb-checkout-secure {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
}

/* Two-column layout */
.sb-checkout-layout {
  display: grid;
  grid-template-columns: 1fr clamp(280px, 36%, 420px);
  gap: var(--space-component);
  align-items: start;
}

/* Left column sections */
.sb-checkout-section {
  margin-bottom: var(--space-component);
  padding-bottom: var(--space-component);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.sb-checkout-section:last-child { border-bottom: none; margin-bottom: 0; }

/* Section headings — Work Sans, not Climate Crisis.
   Trustworthy + readable at checkout is more important than brand impact. */
.sb-checkout-section-title {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--black);
  margin-bottom: var(--space-element);
}
.sb-checkout-login-wrap { margin-bottom: var(--space-element); }
.sb-checkout-login-prompt {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: #888;
  margin-bottom: 0;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb-checkout-login-toggle {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--coral);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s;
}
.sb-checkout-login-toggle:hover { opacity: 0.7; }

/* Inline login form — collapsed by default */
.sb-checkout-login-form {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
  overflow: hidden;
}
.sb-checkout-login-form.is-open {
  grid-template-rows: 1fr;
}
.sb-checkout-login-inner {
  min-height: 0;
  padding-top: var(--space-element);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.sb-checkout-login-actions {
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.sb-checkout-forgot {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: #999;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.sb-checkout-forgot:hover { color: var(--coral); }
.sb-checkout-login-msg {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  min-height: 1em;
  padding: 0;
}
.sb-checkout-login-msg.is-error { color: #c0392b; }
.sb-checkout-login-msg.is-success { color: var(--green); }

/* Form grid rows */
.sb-checkout-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.sb-checkout-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.sb-checkout-field { margin-bottom: 0; }

/* WooCommerce field overrides */
.sb-checkout-form .form-row {
  margin-bottom: var(--gap);
  padding: 0;
}
.sb-checkout-form .form-row label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  display: block;
  color: var(--black);
}
.sb-checkout-form .form-row label .required { color: var(--coral); }
.sb-input,
.sb-checkout-form .input-text,
.sb-checkout-form select,
.sb-checkout-form textarea {
  width: 100%;
  padding: var(--input-py) var(--input-px);
  border: var(--border);
  font-family: var(--font-body);
  font-size: var(--text-body);
  background: var(--white);
  color: var(--black);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s;
}
.sb-input:focus,
.sb-checkout-form .input-text:focus,
.sb-checkout-form select:focus {
  border-color: var(--coral);
  outline: none;
}
.sb-textarea { resize: vertical; min-height: 80px; }

/* Select2 state/country — match input height/style exactly */
.sb-checkout-form .select2-container,
.sb-address-grid .select2-container { width: 100% !important; }

.sb-checkout-form .select2-container--default .select2-selection--single,
.sb-address-grid .select2-container--default .select2-selection--single {
  height: auto;
  min-height: calc(var(--input-py) * 2 + 1lh + 2px);
  padding: var(--input-py) var(--input-px);
  border: var(--border);
  border-radius: 0;
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  display: flex;
  align-items: center;
}
.sb-checkout-form .select2-container--default .select2-selection--single .select2-selection__rendered,
.sb-address-grid .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.4;
  color: var(--black);
  font-size: var(--text-body);
}
.sb-checkout-form .select2-container--default .select2-selection--single .select2-selection__placeholder,
.sb-address-grid .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #aaa;
}
.sb-checkout-form .select2-container--default .select2-selection--single .select2-selection__arrow,
.sb-address-grid .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 12px;
  display: flex;
  align-items: center;
}
.sb-checkout-form .select2-container--default.select2-container--open .select2-selection--single,
.sb-checkout-form .select2-container--default.select2-container--focus .select2-selection--single,
.sb-address-grid .select2-container--default.select2-container--open .select2-selection--single,
.sb-address-grid .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--coral);
  outline: none;
}
.sb-checkout-form .form-row.address-field .select2-container,
.sb-address-grid .form-row.address-field .select2-container {
  display: block;
}
.select2-dropdown {
  border: var(--border);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
}
.select2-results__option--highlighted { background: var(--coral) !important; }

/* Payment methods */
.sb-checkout-payment .wc_payment_methods { list-style: none; padding: 0; }
.sb-checkout-payment .wc_payment_method {
  padding: var(--space-element) var(--gap);
  border: var(--border);
  margin-bottom: var(--gap);
  transition: border-color 0.15s, background 0.15s;
}
.sb-checkout-payment .wc_payment_method:has(input[name="payment_method"]:checked) {
  border-color: var(--coral);
  background: #FFF7F3;
}
.sb-checkout-payment .wc_payment_method label {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  cursor: pointer;
  display: inline;
  text-transform: none;
  letter-spacing: 0;
}
.sb-checkout-payment .wc_payment_method input[type="radio"] {
  accent-color: var(--coral);
  margin-right: 8px;
}
.sb-checkout-payment .payment_box {
  padding: var(--gap) 0 0 26px;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: #666;
  line-height: 1.5;
}
/* Strip browser 2px groove border from ALL fieldsets inside payment boxes */
.sb-checkout-payment .payment_box fieldset,
.woocommerce-order-pay #payment .payment_box fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
/* Hide save-payment fieldset when its inner <p> is hidden (existing card selected) */
.sb-checkout-payment .payment_box fieldset:has(.woocommerce-SavedPaymentMethods-saveNew[style*="display: none"]),
.woocommerce-order-pay #payment .payment_box fieldset:has(.woocommerce-SavedPaymentMethods-saveNew[style*="display: none"]) {
  display: none;
}
.sb-checkout-no-payment {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: #888;
  padding: var(--space-element);
  background: var(--grey-light);
  text-align: center;
}

/* Place order — follows .btn design system: yellow bg, black text, hover shadow */
.sb-checkout-form #place_order,
.sb-checkout-payment #place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 14px 28px;
  border: none;
  background: var(--yellow);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sb-checkout-form #place_order:hover,
.sb-checkout-payment #place_order:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--black);
}

/* Privacy + terms */
.woocommerce-privacy-policy-text {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: #999;
  text-align: center;
  margin: 10px 0 0;
  line-height: 1.5;
}
.woocommerce-privacy-policy-text a {
  color: var(--coral);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Terms checkbox — scoped inside .sb-checkout-form to beat form label specificity */
.sb-checkout-form .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: var(--gap);
}
.sb-checkout-form .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-body) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--black) !important;
  line-height: 1.4 !important;
  margin-bottom: 0 !important;
}
.sb-checkout-form .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  flex-shrink: 0;
  accent-color: var(--coral);
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  cursor: pointer;
}
.sb-checkout-form .woocommerce-terms-and-conditions-wrapper a {
  color: var(--coral);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-transform: none;
  letter-spacing: 0;
}
.sb-checkout-form .woocommerce-terms-and-conditions-wrapper abbr.required {
  color: var(--black);
  opacity: 0.3;
  font-weight: 400;
  text-decoration: none;
  border: none;
  cursor: default;
  font-size: var(--text-body);
}

/* Trust badges — single row, no wrapping */
.sb-checkout-trust {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(12px, 2vw, 20px);
  margin-top: var(--space-element);
  padding-top: var(--space-element);
  border-top: 1px solid rgba(0,0,0,0.06);
  overflow-x: auto;
}
.sb-checkout-trust-item {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
  flex-shrink: 0;
}

/* Right column: order summary */
.sb-checkout-right {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-element));
}
.sb-checkout-summary {
  background: var(--grey-light);
  border: var(--border);
  padding: 0;
}
.sb-summary-toggle {
  display: none;
  width: 100%;
  padding: var(--space-element) var(--gap);
  justify-content: space-between;
  align-items: center;
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
}
.sb-summary-total { font-weight: 900; }
.sb-summary-content { padding: var(--space-element); }
.sb-summary-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999;
  margin-bottom: var(--space-element);
}

/* Summary items */
.sb-summary-items { margin-bottom: var(--space-element); }
.sb-summary-item {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.sb-summary-item:last-child { border-bottom: none; }
.sb-summary-item-img {
  position: relative;
  width: 52px;
  height: 52px;
  background: var(--white);
  flex-shrink: 0;
}
.sb-summary-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,0.08);
  display: block;
}
.sb-summary-item-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  background: var(--black);
  color: var(--white);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-summary-item-info { flex: 1; min-width: 0; }
.sb-summary-item-name {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1.3;
  color: var(--black);
}
.sb-summary-item-price {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  flex-shrink: 0;
  color: var(--black);
}

/* Summary totals */
.sb-summary-totals {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: var(--space-element);
}
.sb-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--black);
}
.sb-summary-row span:last-child { font-weight: 600; }
.sb-summary-discount span:last-child { color: var(--green); }
.sb-summary-total-final {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 800;
  padding-top: var(--space-element);
  margin-top: var(--space-element);
  border-top: var(--border);
}

/* ── Responsive ─────────────────────────────────────────────
   Same logic as cart: content = 80rem between 1280-1920px.
   At ~900px it's tight — collapse to single column.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 56rem) {
  .sb-checkout-layout { grid-template-columns: 1fr; gap: var(--space-element); }
  .sb-checkout-right { position: static; order: -1; margin-bottom: var(--space-element); }
  .sb-summary-toggle { display: flex; }
  .sb-summary-content { display: none; }
  .sb-checkout-summary.is-open .sb-summary-content { display: block; }
  .sb-checkout-row,
  .sb-checkout-row-3 { grid-template-columns: 1fr; }
}
@media (max-width: 47.9375rem) {
  .sb-checkout-page { padding: var(--space-element) var(--gutter) var(--space-section); }
}

/* ============================================================
   COLLECTIONS / WAREHOUSE SECTION
   ============================================================ */
.collections-section {
  position: relative;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
}
.collections-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/section-collections.png');
  background-size: cover;
  background-position: center top;
}

/* .footer-payment-img replaced by .footer-payment-badges + .payment-badge */

/* Footer wordmark — layered: video behind, subtract overlay on top */
.footer-wordmark-wrap {
  position: relative;
  width: 100%;
  background: var(--coral);
  overflow: hidden;
}

/* Video is taller than its container — JS shifts it on scroll for parallax */
.footer-smack-video {
  display: block;
  width: 100%;
  height: 140%;
  object-fit: cover;
  position: absolute;
  top: -20%;
  left: 0;
  will-change: transform;
}

/* Subtract overlay: coral bg with transparent letter cutouts → video shines through */
.footer-smack-overlay {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* Bouncing + draggable Hit Different badge — positioned relative to .footer */
.footer-hit-badge {
  position: absolute;
  width: clamp(224px, 25.2vw, 392px);
  z-index: 20;
  cursor: grab;
  user-select: none;
  transform-origin: center center;
}
.footer-hit-badge:active { cursor: grabbing; }
.footer-hit-badge img { width: 100%; height: auto; display: block; pointer-events: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  /* .sb-cat-grid stays 4-col at 1200px — gap handled by var(--gap) */
  .join-banner-text { padding-left: var(--gutter); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (max-width: 900px) {
  .promo-nav { grid-template-columns: repeat(min(var(--pn-count, 4), 2), 1fr); }
  .sb-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .giveaway-section { grid-template-columns: 1fr; }
  .mystery-blocks { grid-template-columns: 1fr; gap: var(--space-component); }
  .mystery-tiers { grid-template-rows: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .join-banner { grid-template-columns: 1fr; }
  .join-banner-visual { min-height: 200px; }
}
@media (max-width: 768px) {
  .main-nav { display: none; }
  .hero-text-stack { font-size: 22vw; }
  .hit-different-sticker { right: 5%; font-size: 18px; padding: 16px 14px; }
  /* .sb-cat-grid — gutter token handles mobile padding */
  /* .mystery-blocks — gutter token handles mobile padding */
  .join-banner-text { padding: var(--space-component) var(--gutter); }
  /* .headshop-header — @900px handles layout, gutter token handles sides */
  .giveaway-text { padding: var(--space-component) var(--gutter); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-top { padding: 30px 20px 0; }
  .footer-bottom-bar { flex-direction: column; gap: 10px; }
}
/* Pricing tiers — responsive */
@media (max-width: 1023px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .tier-card--featured { order: -1; }
}


/* ============================================================
   PRODUCT ARCHIVE / SHOP PAGE
   ============================================================ */

/* Archive hero — now rendered via template-parts/campaign-hero.php + campaign.css */

/* ── Category strip ────────────────────────────────────────── */
.sb-cat-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 19px;
  padding: var(--space-component) var(--gutter);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  background: var(--white);
  scrollbar-width: thin;
  scrollbar-color: var(--coral) var(--black);
}
.sb-cat-strip::-webkit-scrollbar {
  height: 4px;
}
.sb-cat-strip::-webkit-scrollbar-track {
  background: var(--black);
}
.sb-cat-strip::-webkit-scrollbar-thumb {
  background: var(--coral);
}
.sb-cat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.sb-cat-chip:hover { transform: translateY(-4px); }
.sb-cat-chip-img {
  width: 212px;
  height: 209px;
  border-radius: 0;
  overflow: hidden;
  border: none;
  background: #f5f5f5;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Cycling brand-color backgrounds for category chips */
.sb-cat-strip .sb-cat-chip:nth-child(1) .sb-cat-chip-img { background: var(--coral); }
.sb-cat-strip .sb-cat-chip:nth-child(2) .sb-cat-chip-img { background: var(--blue); }
.sb-cat-strip .sb-cat-chip:nth-child(3) .sb-cat-chip-img { background: var(--yellow); }
.sb-cat-strip .sb-cat-chip:nth-child(4) .sb-cat-chip-img { background: var(--green); }
.sb-cat-strip .sb-cat-chip:nth-child(5) .sb-cat-chip-img { background: var(--pink); }
.sb-cat-strip .sb-cat-chip:nth-child(6) .sb-cat-chip-img { background: var(--coral); }
.sb-cat-strip .sb-cat-chip:nth-child(7) .sb-cat-chip-img { background: var(--blue); }
.sb-cat-strip .sb-cat-chip:nth-child(8) .sb-cat-chip-img { background: var(--yellow); }
/* Large decorative background text */
.sb-cat-chip-bg-name {
  position: absolute;
  font-family: var(--font-display);
  font-size: 64px;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(0,0,0,0.12);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.sb-cat-chip-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}
.sb-cat-chip-name {
  font-size: 19px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--black);
  white-space: nowrap;
}
/* Tablet: medium chips */
@media (max-width: 64rem) {
  .sb-cat-chip-img { width: 160px; height: 158px; }
  .sb-cat-chip-name { font-size: 16px; }
}
/* Mobile: small chips — show ~2.5 at once */
@media (max-width: 48rem) {
  .sb-cat-strip { gap: var(--gap); }
  .sb-cat-chip-img { width: 110px; height: 108px; }
  .sb-cat-chip-name { font-size: 13px; }
}

/* ── Sub-category chip strip (shown on parent category pages) ── */
.sb-subcat-strip {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--space-element) var(--gutter);
  background: var(--white);
  border-bottom: 1px solid var(--black);
  flex-wrap: wrap;
}
.sb-subcat-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999;
  flex-shrink: 0;
  white-space: nowrap;
}
.sb-subcat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.sb-subcat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--input-py) var(--input-px);
  border: var(--border);
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--black);
  white-space: nowrap;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sb-subcat-chip:hover {
  transform: translate(-2px,-2px);
  box-shadow: 2px 2px 0 var(--black);
}
.sb-subcat-chip.is-active {
  background: var(--black);
  color: var(--white);
}
.sb-subcat-count {
  font-size: var(--text-label);
  font-weight: 800;
  color: rgba(0,0,0,0.35);
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
}
.sb-subcat-chip.is-active .sb-subcat-count {
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.12);
}

/* ── Shop layout: sidebar + grid ───────────────────────────── */
.sb-shop-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--white);
  padding: 0 var(--gutter) var(--space-component);
}

/* ── SIDEBAR — off-canvas drawer by default ──────────────── */
.sb-filters {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  bottom: 0;
  z-index: 10003;
  background: var(--white);
  height: 100vh;
  box-shadow: 8px 0 24px rgba(0,0,0,0.15);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-top: var(--space-element);
}
.sb-filters.is-open {
  display: block;
  transform: translateX(0);
}
.sb-filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 10002;
}
.sb-filter-backdrop.is-open {
  display: block;
}
.sb-filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-element) var(--gutter);
  border-bottom: var(--border);
}
.sb-filters-title {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 1.75vw, 1.75rem);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
}
.sb-filters-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.sb-filters-close:hover { opacity: 1; }

/* Filter form */
.sb-filter-form { padding: 0 0 var(--space-component) 0; }

/* Search */
.sb-filter-search-wrap { position: relative; }
.sb-filter-search {
  width: 100%;
  padding: var(--input-py) var(--input-px);
  border: 1px solid var(--black);
  font-family: var(--font-body);
  font-size: var(--text-body);
  background: var(--grey-light);
  outline: none;
  transition: border-color 0.15s;
}
.sb-filter-search:focus { border-color: var(--coral); }
.sb-filter-search::placeholder { color: #aaa; }

/* Collapsible filter groups */
.sb-filter-group {
  padding: var(--space-element) var(--gutter);
  border-bottom: 1px solid rgba(21,21,21,0.1);
}
.sb-filter-details { list-style: none; }
.sb-filter-details > summary { list-style: none; }
.sb-filter-details > summary::-webkit-details-marker { display: none; }

.sb-filter-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--black);
  margin-bottom: var(--space-element);
  display: block;
}
.sb-filter-toggle-label {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0;
  user-select: none;
  margin-bottom: 0;
}
.sb-filter-toggle-label::after {
  content: '+';
  font-size: var(--text-body);
  font-weight: 400;
  color: #999;
}
.sb-filter-details[open] > .sb-filter-toggle-label { margin-bottom: var(--space-element); }
.sb-filter-details[open] > .sb-filter-toggle-label::after { content: '−'; }

.sb-filter-options { padding-bottom: 8px; }

.sb-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: var(--text-body);
  cursor: pointer;
  transition: opacity 0.1s;
}
.sb-filter-option:hover { opacity: 0.7; }
.sb-filter-option.is-checked .sb-filter-name { font-weight: 700; }
.sb-filter-option input {
  accent-color: var(--black);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.sb-filter-name { flex: 1; font-weight: 400; font-family: var(--font-body); }
.sb-filter-count {
  font-size: var(--text-sm);
  color: #999;
  font-weight: 400;
}

/* Filter actions */
.sb-filter-actions { padding-top: var(--space-element); }
.sb-filter-apply { width: 100%; }
.sb-filter-clear {
  display: block;
  text-align: center;
  margin-top: 10px;
  padding: 6px;
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999;
  transition: color 0.15s;
}
.sb-filter-clear:hover { color: var(--coral); }

/* ── MAIN CONTENT ─────────────────────────────────────────── */
.sb-shop-main { padding: var(--space-element) 0 0; }
/* Product grid: no extra padding — parent sb-shop-layout has var(--gutter) */
/* .product-grid has no padding by default — parent section provides the gutter */

/* Toolbar */
.sb-shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-element) 0;
  border-bottom: var(--border);
  gap: var(--gap);
  flex-wrap: nowrap;
}
/* AJAX loading state */
.sb-shop-main.is-loading .product-grid {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.2s;
}
.sb-shop-main.is-loading .sb-pagination { opacity: 0.4; }
.sb-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-width: 0;
}
.sb-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-shrink: 0;
}
/* Filter toggle — design system style, self-contained (no .btn dependency) */
.sb-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: var(--border);
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--input-py) var(--input-px);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.sb-filter-toggle-btn:hover {
  transform: translate(-2px,-2px);
  box-shadow: 2px 2px 0 var(--black);
}
.sb-filter-toggle-btn svg { flex-shrink: 0; width: 15px; height: 15px; }
.sb-toolbar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--coral);
  color: var(--white);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 800;
}
.sb-result-count {
  font-size: var(--text-body-lg);
  font-weight: 400;
  font-family: var(--font-body);
  color: var(--black);
}

/* Sort dropdown */
.sb-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb-sort-label {
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--black);
  white-space: nowrap;
  font-family: var(--font-body);
}
@media (max-width: 47.9375rem) {
  .sb-sort-label { display: none; }
  .sb-sort-select {
    padding-left: 8px;
    padding-right: 28px;
    background-position: right 8px center;
    font-size: var(--text-sm);
  }
}
.sb-sort-select {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  padding: 10px 36px 10px 16px;
  border: 1px solid var(--black);
  background: rgba(21, 21, 21, 0.10);
  color: var(--black);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23151515' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  min-width: 0;
  width: auto;
}

/* Active filter pills */
.sb-active-filters {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--space-element) 0;
  border-bottom: var(--border);
  flex-wrap: wrap;
}
.sb-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  background: var(--black);
  color: var(--white);
  border: none;
}
.sb-pill-x {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: rgba(255,255,255,0.5);
  padding: 0;
  transition: color 0.1s;
}
.sb-pill-x:hover { color: var(--white); }
.sb-clear-all-link {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.sb-clear-all-link:hover { color: var(--black); }

/* ── Archive grid: 4 columns ───────────────────────────── */
.sb-archive-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 20px 0;
  margin-bottom: 0;
}

/* Pagination */
.sb-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
  padding: var(--space-component) 0 var(--space-section);
  border-top: var(--border);
}
.sb-pagination a,
.sb-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-element);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  border: var(--border);
  background: var(--white);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.sb-pagination a:hover {
  transform: translate(-2px,-2px);
  box-shadow: 2px 2px 0 var(--black);
}
.sb-pagination .current {
  background: var(--black);
  color: var(--white);
}
.sb-pagination .dots {
  border: none;
  min-width: auto;
  padding: 0;
  color: #999;
}

/* No products */
.sb-no-products {
  padding: 100px 40px;
  text-align: center;
}
.sb-no-products-icon {
  margin-bottom: 16px;
  color: #ccc;
}
.sb-no-products-icon svg { width: 56px; height: 56px; }
.sb-no-products h2 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sb-no-products p {
  color: #888;
  font-size: 15px;
  margin-bottom: 24px;
}
.sb-no-products .btn {
  border: var(--border);
}

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */

/* Breadcrumb */
.sb-breadcrumb {
  padding: var(--space-element) var(--gutter);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  color: #999;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: var(--border);
}
.sb-breadcrumb a { color: #999; transition: color 0.15s; }
.sb-breadcrumb a:hover { color: var(--coral); }
.sb-bc-current { color: var(--black); }

/* 5-column product row for Recently Viewed / Related */
.sp-row-grid { grid-template-columns: repeat(5, 1fr) !important; }
@media (max-width: 900px) { .sp-row-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 600px) { .sp-row-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* Two-column layout */
.sp-layout {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 0;
  padding: 0 var(--gutter);
}

/* Gallery column
   ─────────────────────────────────────────────────────────────
   Layout: flex row, two children — .sp-thumbs-wrap (left, fixed 80px) and
   .sp-main-img (right, flex:1, square via aspect-ratio).
   align-items: stretch (default) makes the thumb wrap match the main
   image height. Thumbs inside use flex: 1 so they distribute equally
   across the available strip height — responsive to any viewport.
   ───────────────────────────────────────────────────────────── */
.sp-gallery {
  padding: var(--space-component) var(--space-component) var(--space-component) 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-component);
  align-self: start;
  position: sticky;
  top: var(--nav-height);
}
.sp-badge { z-index: 3; }
.sp-main-img {
  background: var(--grey-light);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 1;
  position: relative;
}
.sp-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
}
@media (hover: hover) {
  .sp-main-img { cursor: zoom-in; }
}
/* Thumb wrap width scales with viewport so it tracks the main image as it grows.
   The wrap stretches vertically (align-self: stretch) to match .sp-main-img height,
   and thumbs inside use flex: 1 to distribute equally across the available height. */
.sp-thumbs-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  order: -1;
  flex-shrink: 0;
  width: clamp(70px, 5.5vw, 120px);
  align-self: stretch;
}
.sp-thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}
/* Up/down arrows on the thumb strip — design-system shadow-shift on hover */
.sp-thumb-nav {
  width: 100%;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border);
  background: var(--white);
  cursor: pointer;
  color: var(--black);
  flex-shrink: 0;
  transition: transform 0.1s, box-shadow 0.1s, background 0.12s;
}
.sp-thumb-nav:hover {
  background: var(--black);
  color: var(--white);
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--black);
}
.sp-thumb-nav:active {
  transform: translate(0, 0);
  box-shadow: none;
}
.sp-thumb {
  width: 100%;
  flex: 1;
  min-height: 0;
  max-height: clamp(100px, 10vw, 180px);
  border: var(--border);
  background: var(--grey-light);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.1s;
}
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-thumb.is-active { border-color: var(--coral); }
.sp-thumb.is-hidden { display: none; }
.sp-thumb:hover {
  opacity: 0.85;
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--black);
}
.sp-thumb:active {
  transform: translate(0, 0);
  box-shadow: none;
}

/* Info column */
.sp-info {
  padding: var(--space-component) 0 var(--space-component) var(--space-component);
  display: flex;
  flex-direction: column;
  gap: var(--space-component);
  border-left: var(--border);
}
.sp-info-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}
.sp-title-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}
.sp-cat {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999;
}
.sp-title {
  font-family: var(--font-body);
  font-size: var(--text-heading);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}
.sp-sku {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  color: #999;
}

/* Pricing */
.sp-pricing {
  padding: var(--space-element) 0;
  border-top: var(--border);
  border-bottom: var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}
.sp-rrp {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  color: rgba(21,21,21,0.75);
}
.sp-rrp-label {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  color: #bbb;
  margin-left: 4px;
}
/* On-sale strikethrough — proportional sales on both lines. */
.sp-rrp .sp-was,
.p-rrp .sp-was {
  text-decoration: line-through;
  opacity: 0.45;
  margin-right: 6px;
  font-weight: 500;
}
/* Strikethrough inside the branded badge (coral or VIP-yellow). */
.p-member-badge .p-member-was {
  text-decoration: line-through;
  opacity: 0.5;
  margin-right: 6px;
  font-weight: 600;
}
.p-member-badge .p-member-amount { font-weight: 700; }

/* "From" prefix stacking — sits above the dollar amount, smaller + uppercase.
   Saves horizontal space on variable-product cards. Applied to both the top
   RRP amount (.p-rrp-amount.has-prefix) and the inner branded badge amount
   (.p-member-amount.has-prefix). */
.p-amount-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 1px;
}
.p-amount-prefix {
  font-family: var(--font-body);
  font-size: 0.42em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}
.p-amount-value {
  line-height: 1.05;
}
.p-rrp-amount.has-prefix .p-amount-prefix { opacity: 0.55; }
.p-member-badge .p-member-amount.has-prefix .p-amount-prefix { opacity: 0.75; }

/* Align the top RRP row to the bottom edge so the strikethrough, the stacked
   FROM/$X, and the trailing label all share the same price-baseline. Without
   this, the 2-line stack makes the single-line siblings sit at the top. */
.p-rrp,
.sp-rrp {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 2px;
}
.p-rrp .sp-was,
.sp-rrp .sp-was,
.p-rrp .p-rrp-amount,
.sp-rrp .p-rrp-amount,
.p-rrp .p-rrp-label,
.sp-rrp .p-rrp-label {
  line-height: 1.05;
}

/* When the badge contains the stacked-prefix amount, the content is taller
   than the default 38px badge — grow vertically so the SB icon stretches
   alongside and the price has comfortable breathing room. */
.p-member-badge:has(.p-amount-stack) {
  min-height: 52px;
  height: auto;
}
.p-member-badge:has(.p-amount-stack) .p-member-amount {
  padding: 6px 16px;
}
.p-member-badge:has(.p-amount-stack) .p-member-icon {
  padding: 0 13px;
}
.p-member-badge:has(.p-amount-stack) .p-member-was {
  padding: 0 8px 0 12px;
}
.sp-member-wrap {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: nowrap;
}
.sp-member-wrap .p-member-badge {
  width: auto;
  flex-shrink: 0;
}
/* SP page secondary label — sits next to the branded price badge.
   Kept compact so long copy ("Select a colour to see your price",
   "Members pay less, join free") doesn't dominate the layout. */
.sp-vip-label {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--coral);
}
.sp-vip-label a {
  color: var(--coral);
  font-weight: 700;
  text-decoration: underline;
}
.sp-vip-label--hint {
  color: rgba(21,21,21,0.55);
  font-weight: 500;
  font-style: italic;
}

/* Small contexts: hide struck-through price, just show VIP amount on yellow */
.sc-related-item .p-member-was,
.search-result-price .p-member-was { display: none; }

/* Badges row (delivery + points) */
.sp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.sp-badge-item {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
  padding: 5px var(--gap);
}
.sp-badge-delivery {
  background: var(--blue);
  color: var(--white);
}
.sp-badge-points {
  background: var(--green);
  color: var(--white);
}

/* Attributes */
.sp-attributes {
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}
.sp-attr-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}
.sp-attr-label {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--black);
  flex-shrink: 0;
}
.sp-attr-pills {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sp-attr-pill {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  padding: var(--input-py) var(--input-px);
  border: var(--border);
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
}
.sp-attr-pill:hover {
  transform: translate(-2px,-2px);
  box-shadow: 2px 2px 0 var(--black);
}
.sp-attr-pill.is-selected {
  background: var(--black);
  color: var(--white);
}

/* Add to cart */
.sp-add-to-cart {
  display: flex;
  gap: var(--gap);
}
/* Locked variant (tier/VIP gate): the button is a non-clickable status pill.
   No hover, no pointer cursor — communicates "this is just a state, not an
   action you can take." Real CTA happens inside the lock overlay on the gallery. */
.sp-cart-btn--static {
  cursor: default;
  pointer-events: none;
  text-align: center;
  line-height: 1.2;
  flex: 1;
}
.sp-cart-btn--static:hover { transform: none; box-shadow: none; }
.sp-cart-btn--vip-locked { background: #151515; color: #FFDD00; border: 2px solid #FFDD00; }
.sp-cart-btn--tier-locked { border: 2px solid currentColor; }
.sp-qty {
  display: flex;
  align-items: stretch;
}
.sp-qty-btn {
  width: 52px;
  height: 52px;
  background: var(--white);
  border: var(--border);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.1s;
}
.sp-qty-btn:hover { background: var(--grey-light); }
.sp-qty-input {
  width: 52px;
  height: 52px;
  text-align: center;
  border: var(--border);
  border-left: none;
  border-right: none;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  -moz-appearance: textfield;
  color: var(--black);
  background: var(--white);
}
.sp-qty-input::-webkit-inner-spin-button { display: none; }
/* .sp-cart-btn: layout only — typography inherits from .btn */
.sp-cart-btn {
  flex: 1;
  height: 52px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Short description */
.sp-short-desc {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--black);
}

/* Expandable tabs */
.sp-tab { border-top: var(--border); }
.sp-tab:last-child { border-bottom: var(--border); }
.sp-tab-header {
  padding: var(--space-element) 0;
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}
.sp-tab-header::-webkit-details-marker { display: none; }
.sp-tab-header::after {
  content: '+';
  font-size: var(--text-body-lg);
  font-weight: 400;
  color: #999;
}
.sp-tab[open] .sp-tab-header::after { content: '−'; }
.sp-tab-content {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--black);
  /* Bottom padding inside the animated container so it isn't clipped
     while height transitions between 0 ↔ scrollHeight. */
  padding-bottom: var(--space-element);
}
.sp-tab-content > * { padding-bottom: var(--space-element); }
.sp-tab-content > *:last-child { padding-bottom: 0; }

/* ─── Product card: mini colour dot strip ─── */
.p-card-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.p-card-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--swatch-bg, #ccc);
  display: inline-block;
  flex-shrink: 0;
  outline: 1.5px solid rgba(21,21,21,0.12);
  outline-offset: 1px;
}

/* ─── Colour swatches (variable product) ─── */
.sp-swatches { margin-bottom: var(--space-element); }
.sp-swatch-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--black);
  margin-bottom: var(--gap);
}
.sp-swatch-label span {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.sp-swatch-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.sp-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--swatch-bg, #cccccc);
  border: 2px solid transparent;
  outline: 3px solid transparent;
  outline-offset: 3px;
  cursor: pointer;
  transition: outline-color 0.15s, transform 0.15s;
  position: relative;
  flex-shrink: 0;
}
.sp-swatch:hover:not(:disabled) { transform: scale(1.12); }
.sp-swatch.is-active { outline-color: var(--black); }
.sp-swatch--oos,
.sp-swatch:disabled { opacity: 0.35; cursor: not-allowed; }
.sp-swatch--oos::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.55) 3px,
    rgba(255,255,255,0.55) 4px
  );
}

/* ─── Reviews summary in tab header ─── */
.sp-tab-rev-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  color: #666;
}
.sp-tab-rev-num   { font-weight: 700; color: var(--black); }
.sp-tab-rev-count { color: #999; }
.sp-tab-rev-meta--empty { color: #999; font-style: italic; }

/* ─── Star rating (inline SVG-ish, pure CSS) ─── */
.sb-stars {
  --star-size: 14px;
  display: inline-flex;
  gap: 1px;
  line-height: 1;
}
.sb-star {
  position: relative;
  width: var(--star-size);
  height: var(--star-size);
  background:
    radial-gradient(circle, transparent 0, transparent 100%),
    #e6e6e6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .587l3.668 7.431 8.2 1.193-5.934 5.787 1.402 8.169L12 18.896l-7.336 3.871 1.402-8.169L.132 9.211l8.2-1.193z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .587l3.668 7.431 8.2 1.193-5.934 5.787 1.402 8.169L12 18.896l-7.336 3.871 1.402-8.169L.132 9.211l8.2-1.193z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sb-star-fill {
  display: block;
  height: 100%;
  background: var(--yellow);
}

/* ─── Reviews block ─── */
.sb-reviews { font-family: var(--font-body); color: var(--black); }

/* Summary */
.sb-rev-summary {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
  padding: var(--space-element) 0;
  border-bottom: var(--border);
  margin-bottom: var(--space-element);
}
.sb-rev-avg { text-align: center; }
.sb-rev-avg-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--black);
  margin-bottom: 6px;
}
.sb-rev-avg-count {
  font-size: 0.8rem;
  color: #666;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sb-rev-bars { display: grid; gap: 4px; }
.sb-rev-bar-row {
  display: grid;
  grid-template-columns: 28px 1fr 32px;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.sb-rev-bar-label { font-weight: 700; }
.sb-rev-bar-track {
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}
.sb-rev-bar-fill {
  display: block;
  height: 100%;
  background: var(--yellow);
  transition: width 0.4s ease;
}
.sb-rev-bar-count { text-align: right; color: #888; font-size: 0.8rem; }

/* Write CTA */
.sb-rev-write-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--grey-light);
  border: 1.5px solid var(--black);
  border-radius: 8px;
  margin-bottom: var(--space-element);
  flex-wrap: wrap;
}
.sb-rev-write-copy strong {
  display: block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
}
.sb-rev-write-copy span   { display: block; font-size: 0.85rem; color: #666; margin-top: 2px; }
.sb-rev-write-btn { flex-shrink: 0; }

.sb-rev-write-cta--pending {
  background: #FFF9EC;
  border-color: #E6A817;
}
.sb-rev-write-cta--pending .sb-rev-write-copy strong { color: #9B6E00; }
.sb-rev-write-cta--pending .sb-rev-write-copy span   { color: #7A5800; }

.sb-rev-write-cta--done {
  background: #F0F7F1;
  border-color: #2E8A4A;
}
.sb-rev-write-cta--done .sb-rev-write-copy strong { color: #1B5E2E; }
.sb-rev-write-cta--done .sb-rev-write-copy span   { color: #2A6E3F; }

/* Review list */
.sb-rev-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sb-rev-item,
.sb-rev-list .comment,
.sb-rev-list li {
  border: 0 !important;
  background: transparent;
  padding: var(--space-element) 0;
  list-style: none;
  margin: 0;
}
/* The visible separator between reviews lives on the inner wrapper so we
   get one line per review (not double from <li> + .sb-rev-item-inner). */
.sb-rev-item-inner {
  border-top: 1px solid #eee;
  padding-top: var(--space-element);
}
.sb-rev-list > li:first-child .sb-rev-item-inner { border-top: 0; padding-top: 0; }

.sb-rev-head {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  gap: 12px;
  margin-bottom: 6px;
}
.sb-rev-avatar {
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}
.sb-rev-head-meta { min-width: 0; }
.sb-rev-author    { font-size: 0.95rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sb-rev-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sb-rev-stars-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.sb-rev-date { font-size: 0.78rem; color: #999; }
.sb-rev-body {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 0 52px; /* align with meta column (40px avatar + 12px gap) */
}
.sb-rev-body p { margin: 0 0 6px; }
.sb-rev-body p:last-child { margin-bottom: 0; }

/* Photos */
.sb-rev-photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sb-rev-photo {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  overflow: hidden;
  display: block;
  border: 1px solid #eee;
}
.sb-rev-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; }
.sb-rev-photo:hover img { transform: scale(1.05); }

/* Empty / verify-only */
.sb-rev-empty,
.sb-rev-verify-only {
  font-size: 0.95rem;
  color: #666;
  padding: var(--space-element) 0;
  text-align: center;
}

/* Form */
.sb-rev-form-wrap {
  margin-top: var(--space-element);
  padding: var(--space-element);
  background: var(--grey-light);
  border: 1.5px solid var(--black);
  border-radius: 8px;
}
.sb-rev-form-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 16px;
}
.sb-rev-field { margin-bottom: 14px; }
.sb-rev-field label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sb-rev-field label .req { color: #c62828; }
.sb-rev-field input[type=text],
.sb-rev-field input[type=email],
.sb-rev-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #ddd;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: #fff;
  transition: border-color 0.15s ease;
}
.sb-rev-field input:focus,
.sb-rev-field textarea:focus { outline: none; border-color: var(--black); }

/* Star picker (5★ flexbox-reverse trick) */
.sb-rev-stars-input {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}
.sb-rev-stars-input input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sb-rev-stars-input label {
  font-size: 2rem;
  cursor: pointer;
  color: #e6e6e6;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  transition: color 0.1s ease;
}
.sb-rev-stars-input label:hover,
.sb-rev-stars-input label:hover ~ label,
.sb-rev-stars-input input:checked ~ label { color: var(--yellow); }
.sb-rev-stars-input input:focus-visible + label { outline: 2px solid var(--black); outline-offset: 2px; }

.sb-rev-hint { font-size: 0.78rem; color: #888; margin: 4px 0 12px; }
.sb-rev-loginreq {
  text-align: center;
  padding: var(--space-element);
  background: #fff8dc;
  border: 1.5px dashed var(--black);
  border-radius: 6px;
}
.sb-rev-pagination ul {
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: var(--space-element) 0;
  margin: 0;
}
.sb-rev-pagination a, .sb-rev-pagination span {
  padding: 6px 12px;
  border: 1px solid var(--black);
  border-radius: 4px;
  text-decoration: none;
  color: var(--black);
  font-size: 0.85rem;
}
.sb-rev-pagination .current { background: var(--black); color: #fff; }

@media (max-width: 600px) {
  .sb-rev-summary { grid-template-columns: 1fr; text-align: center; }
  .sb-rev-write-cta { flex-direction: column; align-items: flex-start; }
  .sb-rev-write-btn { width: 100%; }
}

/* ─── Earned-toast notifier ──────────────────────────────────────
   Stacks at bottom-center. Toasts fly in from below, hold for a
   beat, then float up and fade. Sits above everything (modals
   typically live at 9999 — we go higher).
   ─────────────────────────────────────────────────────────────── */
.sb-notify-stack {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 4vw, 32px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse; /* newest sits closest to bottom */
  align-items: center;
  gap: 10px;
  z-index: 2147483000; /* above every WP, Woo, plugin overlay */
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.sb-notify-toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  color: #fff;
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
  opacity: 0;
  transform: translateY(60px) scale(0.92);
  transition:
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.35s ease;
  white-space: nowrap;
}
.sb-notify-toast.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.sb-notify-toast.is-out {
  opacity: 0;
  transform: translateY(-24px) scale(0.96);
  transition:
    transform 0.45s ease,
    opacity 0.45s ease;
}
/* XP — green */
.sb-notify-xp {
  background: var(--green);
  color: #fff;
}
/* Points — blue */
.sb-notify-pts {
  background: var(--blue);
  color: #fff;
}
.sb-notify-amount {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  line-height: 1;
}
.sb-notify-label {
  font-weight: 600;
  font-size: 0.72rem;
  opacity: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@media (prefers-reduced-motion: reduce) {
  .sb-notify-toast,
  .sb-notify-toast.is-in,
  .sb-notify-toast.is-out {
    transition: opacity 0.2s ease;
    transform: none;
  }
}
@media (max-width: 480px) {
  .sb-notify-toast { padding: 12px 18px; }
  .sb-notify-amount { font-size: 1.4rem; }
  .sb-notify-label  { display: none; } /* keep mobile toasts compact */
}

/* ─── PDP-only: tint the related / trust strips with grey-light ─── */
body.single-product .sp-related-section,
body.single-product .footer-trust-wrap {
  background: var(--grey-light);
}
body.single-product .sp-related-section { padding-bottom: var(--space-section); }

/* Spec table */
.sp-spec-table {
  width: 100%;
  border-collapse: collapse;
}
.sp-spec-table th,
.sp-spec-table td {
  padding: var(--space-element) 0;
  border-bottom: var(--border);
  font-family: var(--font-body);
  font-size: var(--text-body);
  text-align: left;
}
.sp-spec-table th {
  font-weight: 700;
  width: 35%;
  color: var(--black);
}
.sp-spec-table td { color: #666; }

/* ============================================================
   WOO OVERRIDES — neutralise default WC elements
   ============================================================ */
.sb-wc-wrapper {
  /* neutral — inner templates handle their own max-width and padding */
}

/* Order-pay has no inner template wrapper, so centre it here */
.woocommerce-order-pay .sb-wc-wrapper {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-component) var(--gutter);
}
/* Ensure brand background throughout */
html, body, .site, #page, #content, .site-content, .entry-content, .woocommerce { background-color: #FFFCF9 !important; }

/* Kill any WC default elements that leak through */
.woocommerce-breadcrumb { display: none; }
.woocommerce-result-count,
.woocommerce-ordering { display: none; }
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-notices-wrapper {
  padding: 0 clamp(var(--gutter), calc(50vw - 40rem), 15%);
}

/* ── WooCommerce Notices — Design System ─────────────────── */
/* 3 states: success (green/white) · error (coral/black) · info (blue/white) */
/* Icon injected via ::before SVG data URI — Lucide style 1.5px stroke       */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  position: relative;
  display: block;
  padding: 14px 20px 14px 48px;
  margin: var(--gap) 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.5;
  list-style: none;
  border: none;
  border-radius: 0;
}
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Success — green bg · white text · check-circle */
.woocommerce-message {
  background: var(--green);
  color: var(--white);
}
.woocommerce-message::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFCF9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}
.woocommerce-message a:not(.button):not(.wc-forward) { color: var(--white); text-decoration: underline; }
.woocommerce-message .button,
.woocommerce-message .wc-forward {
  display: inline-flex;
  align-items: center;
  padding: 3px 14px;
  margin-left: 10px;
  background: rgba(255,252,249,0.18);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 1px solid rgba(255,252,249,0.4);
  transition: background 0.15s;
  vertical-align: middle;
}
.woocommerce-message .button:hover { background: rgba(255,252,249,0.32); }

/* Error — coral bg · black text · x-circle */
.woocommerce-error {
  background: var(--coral);
  color: var(--black);
}
.woocommerce-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151515' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
}
.woocommerce-error a:not(.button) { color: var(--black); text-decoration: underline; }
.woocommerce-error li {
  list-style: none;
  padding: 2px 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--black);
}
.woocommerce-error li::before { display: none; }

/* Info — blue bg · white text · info-circle */
.woocommerce-info {
  background: var(--blue);
  color: var(--white);
}
.woocommerce-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFCF9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}
.woocommerce-info a:not(.button):not(.wc-forward) { color: var(--white); text-decoration: underline; }
.woocommerce-info .button,
.woocommerce-info .wc-forward {
  display: inline-flex;
  align-items: center;
  padding: 3px 14px;
  margin-left: 10px;
  background: rgba(255,252,249,0.18);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 1px solid rgba(255,252,249,0.4);
  transition: background 0.15s;
  vertical-align: middle;
}
.woocommerce-info .button:hover { background: rgba(255,252,249,0.32); }

/* Inline field validation errors */
.woocommerce-invalid .sb-input,
.woocommerce-invalid input,
.woocommerce-invalid select {
  border-color: rgba(21,21,21,0.5) !important;
}
.woocommerce-invalid-required-field label::after,
.woocommerce-invalid label::after {
  content: ' — required';
  font-size: var(--text-label);
  font-weight: 400;
  color: rgba(21,21,21,0.4);
  text-transform: none;
  letter-spacing: 0;
}
.woocommerce-invalid-email label::after {
  content: ' — invalid email';
}
/* The inline error message text */
.woocommerce-error + .form-row .woocommerce-form-row--wide,
span.required { color: var(--black); opacity: 0.4; }

/* Field-level inline notice */
.sb-checkout-form .woocommerce-invalid-required-field .input-text,
.sb-checkout-form .woocommerce-invalid .input-text {
  border-color: rgba(21,21,21,0.4);
  background: rgba(21,21,21,0.02);
}

/* ============================================================
   RESPONSIVE — ARCHIVE & SINGLE PRODUCT
   ============================================================ */

/* Single product: stacks below 900px
   ─────────────────────────────────────────────────────────────
   Root cause of prior overflow: flex items default to
   `min-width: auto` (sized to content's intrinsic min). When the
   thumb strip is wider than the viewport, every flex ancestor
   refuses to shrink below that intrinsic width, even with
   `width: 100%`. Grid tracks have the same trap via `1fr`
   = `minmax(auto, 1fr)`. Fix = `min-width: 0` up the chain +
   `minmax(0, 1fr)` on the grid track.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Grid track must allow shrinking — minmax(0, 1fr), not 1fr */
  .sp-layout { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .sp-gallery {
    position: static;
    border-bottom: var(--border);
    padding: 0;
    gap: 0;
    flex-direction: column;
    min-width: 0; /* break min-content chain — was a grid item */
  }
  /* Square main image — explicit height from vw bypasses aspect-ratio/flex ambiguity */
  .sp-main-img {
    flex: none;
    width: 100%;
    height: 100vw;
    max-height: 600px;
  }
  /* Thumb wrapper: block element + min-width: 0 so it actually respects parent width */
  .sp-thumbs-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-shrink: 1; /* override base flex-shrink: 0 */
    order: 0;
    padding: var(--gap) var(--gutter);
    border-top: var(--border);
    box-sizing: border-box;
  }
  .sp-thumb-nav { display: none; }
  /* Scrollable horizontal strip — same pattern as .sb-cat-strip */
  .sp-thumbs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--gap);
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gap);
  }
  .sp-thumbs::-webkit-scrollbar { display: none; }
  /* Reset desktop flex behavior — mobile thumbs are fixed 60×76 in a scroll strip */
  .sp-thumb {
    flex: none;
    width: 60px;
    height: 76px;
    min-height: 0;
    max-height: none;
    scroll-snap-align: start;
  }
  .sp-info { padding: var(--space-component) var(--gutter); border-left: none; gap: var(--space-component); }
  .sp-cart-btn { height: 52px; }
}

/* Toolbar stacks + drawer full-width on very small screens */
@media (max-width: 600px) {
  .sb-filters { width: 100%; }
}

/* ── Desktop ≥ 1024px: sidebar inline, 3-col grid ───────── */
@media (min-width: 64rem) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }

  .sb-shop-layout {
    grid-template-columns: 290px 1fr;
    gap: 0 var(--space-component);
  }
  .sb-filters {
    display: block;
    position: sticky;
    top: var(--nav-height);
    height: calc(100vh - var(--nav-height));
    width: auto;
    z-index: 1;
    transform: none;
    box-shadow: none;
    transition: none;
    padding-top: 20px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }
  .sb-filters-close { display: none; }
  .sb-filter-toggle-btn { display: none; }
  .sb-shop-main { padding: var(--space-element) 0 0; }
  /* Desktop: flush to layout edges — parent sb-shop-layout provides gutter */
  .sb-filters-header { padding-left: 0; }
  .sb-filter-form { padding-right: 20px; }
  .sb-filter-group { padding-left: 0; padding-right: 0; }
  .sb-shop-main .product-grid {
    grid-template-columns: repeat(3, 1fr);
    padding: 0;
  }
}

/* ── Wide ≥ 1280px: 4-col grid inside shop ──────────────── */
@media (min-width: 80rem) {
  .sb-shop-main .product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   BLOG
   ============================================================ */
.sb-blog-layout {
  padding: 40px;
}
.sb-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.sb-blog-card {
  border: var(--border);
  background: var(--white);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.sb-blog-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--black);
}
.sb-blog-thumb {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--grey-light);
}
.sb-blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sb-blog-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  opacity: 0.3;
}
.sb-blog-info { padding: 20px; }
.sb-blog-date {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #999;
}
.sb-blog-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  margin: 8px 0 10px;
}
.sb-blog-title a { color: var(--black); }
.sb-blog-title a:hover { color: var(--coral); }
.sb-blog-excerpt {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 12px;
}
.sb-blog-read {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--coral);
  border-bottom: 2px solid var(--coral);
  padding-bottom: 2px;
}
.sb-blog-read:hover { color: var(--black); border-color: var(--black); }

@media (max-width: 900px) {
  .sb-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sb-blog-grid { grid-template-columns: 1fr; }
  .sb-blog-layout { padding: 20px; }
}

/* ============================================================
   POLICY / SUPPORT PAGES
   ============================================================ */
/* policy-breadcrumb is an alias of sb-breadcrumb (kept for policy-layout.php compatibility) */
.policy-breadcrumb {
  padding: var(--space-element) var(--gutter);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  color: #999;
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.policy-breadcrumb a { color: #999; transition: color 0.15s; }
.policy-breadcrumb a:hover { color: var(--coral); }
.policy-breadcrumb-sep { color: #ccc; }
.policy-breadcrumb span:last-child { color: var(--black); }

.policy-hero {
  background: var(--black);
  color: var(--white);
  padding: var(--space-component) var(--gutter);
  text-align: center;
}
.policy-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--white);
}

/* "Last updated" meta line */
.policy-last-updated {
  font-size: var(--text-caption);
  color: #999;
  margin-bottom: var(--space-component);
}

/* Content — max-width intentional for long-form reading comfort */
.policy-content {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-section) var(--gutter);
}

.policy-section {
  margin-bottom: var(--space-component);
  padding-bottom: var(--space-component);
  border-bottom: 1px solid #e8e8e3;
}
.policy-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.policy-section h2 {
  font-family: var(--font-body);
  font-size: var(--text-subheading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  color: var(--black);
}
.policy-section p {
  font-size: var(--text-body);
  line-height: 1.6;
  color: #444;
  margin-bottom: 12px;
}
.policy-section p:last-child { margin-bottom: 0; }

.policy-section ul,
.policy-section ol:not(.policy-steps) {
  font-size: var(--text-body);
  line-height: 1.6;
  color: #444;
  margin: var(--space-element) 0;
  padding-left: var(--space-component);
}
.policy-section ul { list-style: disc; }
.policy-section ol:not(.policy-steps) { list-style: decimal; }
.policy-section li {
  margin-bottom: 8px;
  padding-left: 4px;
}
.policy-section li:last-child { margin-bottom: 0; }
.policy-section li strong { color: var(--black); }

.policy-section a { color: var(--coral); border-bottom: 1px solid var(--coral); }
.policy-section a:hover { color: var(--black); border-color: var(--black); }

.policy-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-element);
  font-size: var(--text-body);
}
.policy-table th,
.policy-table td {
  padding: 12px 16px;
  text-align: left;
  border: var(--border);
}
.policy-table th {
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-label);
  letter-spacing: 0.08em;
}
.policy-table tbody tr:nth-child(even) { background: var(--grey-light); }

/* Return steps */
.policy-steps {
  list-style: none;
  margin-top: var(--space-element);
}
.policy-steps li {
  display: flex;
  gap: var(--space-element);
  align-items: flex-start;
  padding: var(--space-element) 0;
  border-bottom: 1px solid #e8e8e3;
}
.policy-steps li:last-child { border-bottom: none; }
.policy-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--coral);
  color: var(--white);
  font-weight: 900;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.policy-steps strong { display: block; font-size: var(--text-body); margin-bottom: 4px; font-weight: 800; }
.policy-steps p { font-size: var(--text-body); color: #666; margin-bottom: 0; line-height: 1.6; }

/* Contact page */
.policy-content--wide {
  max-width: 1100px;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px);
  gap: var(--space-component);
  align-items: start;
}

.contact-form { display: flex; flex-direction: column; gap: var(--space-element); }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.form-group label span { color: var(--coral); }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea,
.policy-content input[type="text"],
.policy-content input[type="email"],
.policy-content select,
.policy-content textarea {
  width: 100%;
  padding: var(--input-py) var(--input-px);
  border: var(--border);
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--black);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--coral);
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form .btn { align-self: flex-start; gap: 8px; }
.contact-form .btn-black {
  background: var(--black);
  color: var(--white);
}
.contact-form .btn-black:hover {
  transform: translate(-3px,-3px);
  box-shadow: 3px 3px 0 var(--coral);
}

.contact-success {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: rgba(0,123,50,0.08);
  border: 2px solid var(--green);
  font-size: 15px;
  margin-bottom: 20px;
}
.contact-success i { color: var(--green); flex-shrink: 0; }
.contact-error {
  padding: 14px 20px;
  background: rgba(253,93,45,0.08);
  border: 2px solid var(--coral);
  font-size: 14px;
  color: var(--coral);
  font-weight: 600;
  margin-bottom: 20px;
}

.contact-info { display: flex; flex-direction: column; gap: var(--gap); }
.contact-info-card {
  padding: var(--space-component) var(--gap);
}

/* Opening Hours — green */
.contact-info .contact-info-card:nth-child(1) {
  background: var(--green);
  color: var(--white);
}
/* Email Us — yellow */
.contact-info .contact-info-card:nth-child(2) {
  background: var(--yellow);
  color: var(--black);
}

.contact-info-icon {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.15);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--gap);
}
.contact-info .contact-info-card:nth-child(2) .contact-info-icon {
  background: rgba(0,0,0,0.1);
  color: var(--black);
}
.contact-info-card h3 {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-element);
  color: inherit;
}
.contact-info-card address,
.contact-info-card p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-style: normal;
  line-height: 1.7;
  color: inherit;
}
.contact-info-sub {
  font-size: var(--text-caption) !important;
  opacity: 0.65;
  margin-top: 6px;
}
.contact-info-card a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.contact-info-card a:hover { opacity: 0.75; }

.contact-hours { list-style: none; margin-top: 6px; }
.contact-hours li {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: inherit;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.contact-hours li:last-child { border-bottom: none; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
  .policy-hero { padding: 40px 20px 32px; }
  .policy-breadcrumb { padding: 12px 20px; }
  .policy-content { padding: 32px 20px 60px; }
}
@media (max-width: 600px) {
  .policy-table { font-size: 13px; }
  .policy-table th,
  .policy-table td { padding: 10px 12px; }
}

/* ============================================================
   WISHLIST
   ============================================================ */

/* Header badge — positioning handled by .header-badge */
.wishlist-count.is-hidden { display: none; }

/* Wishlist button on product card */
.p-wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  background: var(--white);
  border: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.p-wishlist:hover {
  transform: translate(-3px,-3px);
  box-shadow: 3px 3px 0 var(--black);
}
.p-wishlist.is-active {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
  opacity: 1;
  transform: scale(1);
}
.p-wishlist i {
  display: block;
  line-height: 1;
  pointer-events: none;
}

/* ── Wishlist page ───────────────────────────────────────── */
.sb-wishlist-page {
  padding-top: var(--space-section);
  padding-bottom: 0;
  padding-left: clamp(var(--gutter), calc(50vw - 40rem), 15%);
  padding-right: clamp(var(--gutter), calc(50vw - 40rem), 15%);
}
/* 3-col grid — 2-col mobile, 3-col from tablet up */
#sbWishlistGrid {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) {
  #sbWishlistGrid { grid-template-columns: repeat(3, 1fr); }
}

/* Header */
.sb-wishlist-header {
  display: flex;
  align-items: baseline;
  gap: var(--gap);
  margin-bottom: var(--space-component);
  padding-bottom: var(--space-element);
  border-bottom: var(--border);
}
.sb-wishlist-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.02em;
}
.sb-wishlist-count-label {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  color: #999;
}
@media (max-width: 48rem) {
  .sb-wishlist-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sb-wishlist-title { font-size: var(--text-heading); letter-spacing: 0; }
}

/* Empty state */
.sb-wishlist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-section) var(--gutter);
  text-align: center;
  gap: var(--space-element);
}
.sb-wishlist-empty-icon {
  width: 64px;
  height: 64px;
  color: #ccc;
}
.sb-wishlist-empty-heading {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  text-transform: uppercase;
  line-height: 1;
}
.sb-wishlist-empty-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: #666;
  max-width: 320px;
}

/* Skeleton loading cards */
.skeleton-card { animation: skeletonPulse 1.4s ease-in-out infinite; }
.skeleton-img {
  background: #e8e8e3;
  aspect-ratio: 1;
  width: 100%;
}
.skeleton-info { padding: var(--space-element) var(--gap); }
.skeleton-line {
  background: #e8e8e3;
  height: 12px;
  margin-top: var(--gap);
  border-radius: 2px;
  width: 80%;
}
.skeleton-line--short { width: 50%; }
.skeleton-line--price { width: 60%; height: 20px; margin-top: var(--space-element); }

@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ============================================================
   SEARCH DRAWER
   ============================================================ */
.search-drawer {
  position: fixed;
  top: calc(var(--bar-height) + var(--nav-height));
  left: 0;
  right: 0;
  z-index: 10002;
  background: var(--white);
  border-bottom: var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.25s;
  pointer-events: none;
}
.search-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.search-drawer__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid rgba(21,21,21,0.08);
}
.search-drawer__icon { color: #888; flex-shrink: 0; }
.search-drawer__input {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--black);
  outline: none;
  padding: 0;
}
.search-drawer__input::placeholder { color: #bbb; }
/* Suppress browser's native type="search" clear button */
.search-drawer__input::-webkit-search-cancel-button,
.search-drawer__input::-webkit-search-decoration { display: none; }
.search-drawer__input[type=search]::-ms-clear { display: none; }
.search-drawer__close {
  width: 40px;
  height: 40px;
  background: none;
  border: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}
.search-drawer__close:hover {
  transform: translate(-3px,-3px);
  box-shadow: 3px 3px 0 var(--black);
}

.search-results-dropdown {
  padding: 0 var(--gutter);
  max-height: 480px;
  overflow-y: auto;
}
.search-results-dropdown:empty { display: none; }

.search-result-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(21,21,21,0.06);
  text-decoration: none;
  color: var(--black);
  transition: background 0.1s;
  cursor: pointer;
}
.search-result-item:hover,
.search-result-item.is-focused {
  background: var(--grey-light);
  margin: 0 calc(-1 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.search-result-item:last-of-type { border-bottom: none; }

.search-result-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  flex-shrink: 0;
  border: var(--border);
  background: #f7f4ef;
}
.search-result-img-ph {
  width: 60px;
  height: 60px;
  background: #f7f4ef;
  flex-shrink: 0;
  border: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
}
.search-result-info { flex: 1; min-width: 0; }
.search-result-name {
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.search-result-name mark {
  background: var(--yellow);
  color: var(--black);
  font-weight: 900;
  padding: 0 2px;
}
/* Right-side price column */
.search-result-price {
  flex-shrink: 0;
  text-align: right;
}
.search-result-rrp {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(21,21,21,0.4);
  white-space: nowrap;
}
.search-result-rrp-label {
  display: block;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(21,21,21,0.3);
  margin-top: 1px;
}
/* Scale down the member badge inside search results */
.search-result-price .p-member-badge {
  margin-top: 6px;
  height: 28px;
  justify-content: flex-end;
}
.search-result-price .p-member-icon { padding: 0 8px; }
.search-result-price .p-member-amount {
  font-size: var(--text-body);
  padding: 0 10px;
}

.search-results-footer {
  padding: 16px var(--gutter) 20px;
  border-top: 1px solid rgba(21,21,21,0.08);
}
.search-results-footer a {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--coral);
  border-bottom: 2px solid var(--coral);
  padding-bottom: 2px;
}
.search-results-footer a:hover { color: var(--black); border-color: var(--black); }

.search-drawer-empty {
  padding: 32px var(--gutter);
  text-align: center;
  color: rgba(21,21,21,0.45);
  font-size: var(--text-body);
}

.search-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 10001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.search-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .search-drawer__input { font-size: 18px; }
  .search-results-dropdown { max-height: 60vh; }
  .search-result-img,
  .search-result-img-ph { width: 48px; height: 48px; }
}

/* ============================================================
   THANK YOU PAGE
   ============================================================ */
/* ── Thank You page — centered, max 760px, standard gutter ─── */
.sb-thankyou {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-component) var(--gutter) var(--space-section);
}

/* Hero */
.sb-thankyou-hero {
  text-align: center;
  padding: var(--space-component) 0;
}
.sb-thankyou-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: var(--white);
  margin-bottom: var(--space-element);
}
.sb-thankyou-icon--success { background: var(--green); }
.sb-thankyou-icon--fail { background: #c00; font-size: 28px; font-weight: 900; }
.sb-thankyou-title {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--space-element);
  color: var(--black);
}
.sb-thankyou-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  color: var(--black);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto;
}

/* Order meta strip */
.sb-thankyou-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--border);
  margin-bottom: var(--space-component);
}
.sb-thankyou-meta-item {
  padding: var(--space-element);
  border-right: var(--border);
}
.sb-thankyou-meta-item:last-child { border-right: none; }
.sb-thankyou-meta-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--black);
  margin-bottom: 6px;
}
.sb-thankyou-meta-value {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: var(--black);
}

/* Sections */
.sb-thankyou-section { margin-bottom: var(--space-component); }
.sb-thankyou-games-intro {
  margin: 0 0 var(--space-element);
  color: var(--black);
}
.sb-thankyou-section-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--black);
  border-bottom: var(--border);
  padding-bottom: var(--gap);
  margin-bottom: var(--space-element);
}
.sb-thankyou-address {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--black);
  margin: 0;
}
.sb-thankyou-actions {
  display: flex;
  gap: var(--gap);
  justify-content: center;
  margin-top: var(--space-component);
  flex-wrap: wrap;
}
.sb-thankyou-actions + p {
  margin-top: var(--space-element);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: rgba(21,21,21,0.6);
}
.sb-thankyou-actions + p a { color: var(--black); font-weight: 600; }
.sb-thankyou-failed { text-align: center; padding: var(--space-section) 0; }

/* Shipping address box */
.sb-thankyou-addr-box {
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
  background: var(--grey-light);
  border: var(--border);
  padding: var(--space-element) var(--gutter);
}
.sb-thankyou-addr-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-thankyou-gateway-note {
  margin-top: var(--gap);
  padding: var(--space-element) var(--gutter);
  background: var(--yellow);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  border: var(--border);
}
.sb-thankyou-gateway-note h2,
.sb-thankyou-gateway-note h3 {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--gap);
  color: var(--black);
}
.sb-thankyou-gateway-note p { margin-bottom: 4px; }
.sb-thankyou-gateway-note strong { font-weight: 700; }

/* What happens next — steps */
.sb-thankyou-steps { display: flex; flex-direction: column; }
.sb-ty-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 var(--gap);
  position: relative;
}
/* Connecting line between steps */
.sb-ty-step:not(.sb-ty-step--last)::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 40px;
  width: 2px;
  height: calc(100% - 40px);
  background: var(--black);
  opacity: 0.1;
  z-index: 0;
}
.sb-ty-step-num {
  position: relative;
  width: 40px;
  height: 40px;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}
.sb-ty-step-line { display: none; }
.sb-ty-step-body { padding: 8px 0 var(--space-element); }
.sb-ty-step--last .sb-ty-step-body { padding-bottom: 0; }
.sb-ty-step-title {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--black);
}
.sb-ty-step-desc {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: #666;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 48rem) {
  .sb-thankyou-meta { grid-template-columns: 1fr 1fr; }
  .sb-thankyou-meta-item:nth-child(2) { border-right: none; }
  .sb-thankyou-meta-item:nth-child(3),
  .sb-thankyou-meta-item:nth-child(4) { border-top: var(--border); }
}

/* ============================================================
   GENERIC PAGE WRAPPER (page.php)
   ============================================================ */
.sb-page-wrap { max-width: 1200px; margin: 0 auto; padding: 60px 40px; min-height: 50vh; }
.sb-page-wrap--account { padding: 0; max-width: none; }
.sb-page-wrap--account .woocommerce { margin: 0; padding: 0; }

/* ============================================================
   MY ACCOUNT — CUSTOM LAYOUT
   ============================================================ */
/* ── My Account layout — 2 columns ──────────────────────── */
/* Sticky sidebar + natural page scroll.
   HQ panel is a global fixed drawer — not a layout column.
   Sidebar stays pinned; content scrolls with the browser (one scrollbar). */
.sb-account-layout {
  display: grid;
  grid-template-columns: clamp(180px, 18vw, 260px) 1fr;
  align-items: start;
  border-top: var(--border);
  min-height: calc(100vh - var(--chrome));
  background: linear-gradient(
    to right,
    var(--grey-light) clamp(180px, 18vw, 260px),
    var(--white) clamp(180px, 18vw, 260px)
  );
}

.sb-account-sidebar {
  background: transparent;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--chrome);
  max-height: calc(100vh - var(--chrome));
  overflow-y: auto;
  scrollbar-width: thin;
}
.sb-account-sidebar-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ── Avatar / profile block ─────────────────────────────── */
.sb-account-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-component) var(--gap) var(--space-element);
  gap: var(--gap);
}
.sb-account-avatar-circle {
  width: 72px;
  height: 72px;
  background: var(--coral);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sb-account-avatar img {
  width: 72px;
  height: 72px;
  object-fit: cover;
}
.sb-account-name {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-body-lg);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--black);
}
.sb-account-email {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--black);
  text-align: center;
}
.sb-account-tier {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 16px;
  background: var(--black);
  color: var(--white);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-account-tier.is-vip {
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: var(--yellow);
  letter-spacing: 0.1em;
}
.sb-account-tier.is-vip::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.45) 50%,
    transparent 80%
  );
  animation: vip-shine 2.8s ease-in-out infinite;
}
.sb-account-points-mini {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--black);
}
.sb-account-points-mini span { color: var(--black); }

/* ── Tier trigger card ───────────────────────────────────── */
.sb-tier-trigger {
  width: 100%;
  padding: var(--space-element) var(--space-component);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  border: none;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.15s;
}
.sb-tier-trigger:hover { opacity: 0.9; }
.sb-tier-trigger-rank {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.125rem);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.02em;
}
.sb-tier-trigger-xp {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--text-subheading);
  font-weight: 600;
  color: var(--pt, var(--white));
}
.sb-tier-trigger-bar {
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,0.1);
  margin: 4px 0;
}
.sb-tier-trigger-fill {
  height: 100%;
  background: var(--pt, var(--white));
  transition: width 0.4s ease;
}
.sb-tier-trigger-hint {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--pt, var(--white));
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Tier colours — bg + CSS vars set by admin inline CSS; design-system vars are fallbacks */
.sb-tier-trigger--rookie  { background: var(--pink);   --pt: var(--green); }
.sb-tier-trigger--rookie  .sb-tier-trigger-rank { color: var(--pt, var(--green)); }
.sb-tier-trigger--regular { background: var(--green);  --pt: var(--yellow); }
.sb-tier-trigger--regular .sb-tier-trigger-rank { color: var(--pt, var(--yellow)); }
.sb-tier-trigger--legend  { background: var(--blue);   --pt: var(--pink); }
.sb-tier-trigger--legend  .sb-tier-trigger-rank { color: var(--pt, var(--pink)); }
.sb-tier-trigger--og      { background: var(--yellow); --pt: var(--blue); }
.sb-tier-trigger--og      .sb-tier-trigger-rank { color: var(--pt, var(--blue)); }

/* ── Nav links ───────────────────────────────────────────── */
.sb-account-nav { padding: var(--space-element) 0; }
.sb-account-nav-link {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--gap) var(--space-element);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--black);
  text-decoration: none;
  border-left: 4px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-account-nav-link:hover { background: var(--grey-light); }
.sb-account-nav-link.is-active {
  background: var(--white);
  border-left-color: var(--coral);
  color: var(--coral);
}
.sb-account-nav-link i { width: 22px; height: 22px; flex-shrink: 0; }
.sb-account-nav-link.logout-link {
  margin-top: auto;
  border-top: var(--border);
}

/* ── Main content ────────────────────────────────────────── */
/* Horizontal padding grows on wide viewports so content doesn't stretch endlessly —
   same technique as the cart page. 50% - 28rem approaches zero at ~900px cell width,
   and the 20% cap keeps breathing room at 1920px+. */
.sb-account-content {
  padding: var(--space-component) clamp(var(--space-component), calc(50% - 28rem), 20%);
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════
   HQ GLOBAL SIDE DRAWER + TAB
   Fixed overlay, works on every page for logged-in users.
   Auto-opens on woocommerce-account pages.
   ═══════════════════════════════════════════════════════════ */

/* ── Drawer panel ────────────────────────────────────────── */
.sb-hq-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  height: 100vh;
  height: 100dvh;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 10200;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  border-left: var(--border);
  display: flex;
  flex-direction: column;
}
.sb-hq-panel.is-open {
  transform: translateX(0);
  box-shadow: -8px 0 40px rgba(0,0,0,0.18);
}

/* Tier colour schemes — controlled via WP Admin → Smack Bang → Settings → Tier Colours
   Defaults output as inline <style id="sb-tier-colours"> via wp_head (inc/admin-panel.php) */

/* Panel header — sticky, uses the dark contrast colour */
.sb-hq-panel-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap) var(--space-element);
  background: var(--pb, #151515);
  border-bottom: 2px solid var(--pt, #FFDD00);
  flex-shrink: 0;
}
.sb-hq-panel-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--pt, #FFDD00);
  line-height: 1;
}
.sb-hq-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  color: var(--pt, #FFDD00);
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.sb-hq-close-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.4);
}

/* ── Side Tab ────────────────────────────────────────────── */
.sb-hq-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10202;
  width: 44px;
  padding: 22px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: none;
  box-shadow: -4px 4px 0 var(--pb, #151515);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.sb-hq-tab:hover {
  transform: translateY(-50%) translate(-3px, -3px);
  box-shadow: -1px 1px 0 var(--pb, #151515);
}
.sb-hq-tab-rank {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--pt, #151515);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.sb-hq-tab-pts {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pt, #151515);
  opacity: 0.7;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
/* Tab slides out when panel is open */
body.sb-hq-open .sb-hq-tab {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(60px);
}

/* ── Backdrop ────────────────────────────────────────────── */
.sb-hq-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 10199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
body.sb-hq-open .sb-hq-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ── sb-panel-* classes used by account-panel.php ──────── */

.sb-panel-inner {
  display: flex;
  flex-direction: column;
}

/* Tier trigger fills panel width (no bg override — keeps tier bg) */
.sb-panel-tier-btn.sb-tier-trigger {
  width: 100%;
  border-bottom: 3px solid var(--pb, #151515);
}

/* Panel sections */
.sb-panel-section {
  padding: var(--gap) var(--space-element);
}
.sb-panel-divider {
  height: 1px;
  background: var(--pb, #151515);
  opacity: 0.15;
  margin: 0 var(--space-element);
}
.sb-panel-section-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pt, #151515);
  opacity: 0.6;
  margin-bottom: var(--gap);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Membership */
.sb-panel-vip-status {
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.sb-panel-vip-pill {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.75rem;
  background: var(--pb, #151515);
  color: var(--pt, #FFDD00);
  flex-shrink: 0;
}
.sb-panel-vip-thankyou {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--pt, #151515);
  opacity: 0.75;
  text-decoration: underline;
}
.sb-panel-free-status {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.sb-panel-free-pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.75rem;
  background: var(--pb, #151515);
  color: var(--pt, #FFFCF9);
  align-self: flex-start;
}
.sb-panel-upgrade-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pt, #151515);
  text-decoration: none;
  padding: 0.5rem 0.875rem;
  border: 2px solid var(--pt, #151515);
  align-self: flex-start;
  transition: background 0.15s, color 0.15s, transform 0.1s, box-shadow 0.1s;
}
.sb-panel-upgrade-cta:hover {
  background: var(--pb, #151515);
  color: var(--pa, #FFDD00);
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--black);
}
.sb-panel-upgrade-cta i { width: 14px; height: 14px; }

/* Points */
.sb-panel-pts-big {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--pt, #151515);
  letter-spacing: -0.02em;
}
.sb-panel-pts-sub {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--pt, #151515);
  opacity: 0.75;
  margin-top: 0.25rem;
}
.sb-panel-pts-sub strong { opacity: 1; font-weight: 700; }
.sb-panel-pts-link {
  display: inline-block;
  margin-top: var(--gap);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pt, #151515);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sb-panel-pts-tag {
  font-size: 0.5625rem;
  padding: 0.125rem 0.375rem;
  background: var(--pb, #151515);
  color: var(--pt, #FFDD00);
  letter-spacing: 0.05em;
  font-weight: 800;
  opacity: 1;
  margin-left: 0.25rem;
}

/* Check-in */
.sb-panel-checkin-done {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--pt, #151515);
}
.sb-panel-checkin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: var(--gap) var(--space-element);
  background: var(--pb, #151515);
  color: var(--pa, #FFDD00);
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sb-panel-checkin-btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--black);
}
.sb-panel-checkin-btn i { width: 16px; height: 16px; }
.sb-panel-streak {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  margin-top: var(--gap);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--pt, #151515);
  opacity: 0.8;
}

/* Games */
.sb-panel-games-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.sb-panel-game-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3125rem;
  padding: var(--gap) 0.5rem;
  background: var(--pb, #151515);
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sb-panel-game-link:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--black);
}
.sb-panel-game-icon { font-size: 1.375rem; line-height: 1; }
.sb-panel-game-name {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pa, #FFDD00);
  text-align: center;
}

/* Game Room CTA — single-row promo link (replaces older 2x2 grid layout) */
.sb-panel-games-cta {
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: 100%;
  padding: var(--gap) var(--space-element);
  background: var(--pb, #151515);
  color: var(--pt, #FFDD00);
  text-decoration: none;
  border: 2px solid var(--pb, #151515);
  transition: transform 0.1s, box-shadow 0.1s, background 0.15s, color 0.15s;
}
.sb-panel-games-cta:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--black);
  background: var(--pa, #FFDD00);
  color: var(--pb, #151515);
}
.sb-panel-games-emojis {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}
.sb-panel-games-emojis img.emoji {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  vertical-align: middle;
}
.sb-panel-games-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}
.sb-panel-games-text strong {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: inherit;
}
.sb-panel-games-text small {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.75;
  color: inherit;
}
.sb-panel-games-arrow {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.sb-panel-games-cta:hover .sb-panel-games-arrow {
  transform: translateX(4px);
}

/* Recent Activity */
.sb-panel-activity-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sb-panel-activity-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: var(--gap) 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.sb-panel-activity-row:last-child { border-bottom: none; }
.sb-panel-activity-label {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--pt, #151515);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
.sb-panel-activity-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  flex-shrink: 0;
}
.sb-panel-activity-xp {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--pb, #151515);
}
.sb-panel-activity-time {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--pt, #151515);
  opacity: 0.6;
  white-space: nowrap;
}
.sb-panel-activity-empty {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--pt, #151515);
  opacity: 0.6;
}

/* Rank Drop pill — surfaces unlocked drops at the top of the panel */
.sb-panel-dealpill { padding: 0 var(--space-element); }
.sb-panel-dealpill-link {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--gap) var(--space-element);
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0 var(--coral);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sb-panel-dealpill-link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--coral);
}
.sb-panel-dealpill-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.sb-panel-dealpill-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.sb-panel-dealpill-text strong {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: inherit;
}
.sb-panel-dealpill-text small {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Explainer link — footer of panel pointing to /rewards/ */
.sb-panel-explainer-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pt, #151515);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.15s ease;
}
.sb-panel-explainer-link:hover { opacity: 0.75; }

/* ═══════════════════════════════════════════════════════════
   POINTS PAGE — matches Figma node 441:6139
   ═══════════════════════════════════════════════════════════ */
.sb-points-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-component);
}

/* Balance card — black bg */
.sb-pts-balance-card {
  background: var(--black);
  padding: 30px 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
}
.sb-pts-bal-left {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.sb-pts-bal-number {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5.625rem);
  font-weight: 400;
  line-height: 1;
  color: var(--blue);
  letter-spacing: -0.02em;
}
.sb-pts-bal-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
}
.sb-pts-bal-value {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: rgba(255,255,255,0.6);
}
.sb-pts-bal-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 160px;
}

/* Tier badge on balance card */
.sb-pts-tier-badge {
  width: 100%;
  padding: 16px 20px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
}
.sb-pts-tier-badge.sb-pts-tier--rookie  { background: var(--pink);   color: var(--green); }
.sb-pts-tier-badge.sb-pts-tier--regular { background: var(--green);  color: var(--yellow); }
.sb-pts-tier-badge.sb-pts-tier--legend  { background: var(--blue);   color: var(--pink); }
.sb-pts-tier-badge.sb-pts-tier--og      { background: var(--yellow); color: var(--blue); }

.sb-pts-earn-rate {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--white);
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sb-pts-earn-rate strong { font-weight: 800; }

/* Section titles */
.sb-pts-section-title {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--black);
  margin-bottom: var(--space-element);
}

/* How to Earn */
.sb-pts-earn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-component) var(--space-section);
}
.sb-pts-earn-item {
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.sb-pts-earn-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sb-pts-earn-icon-wrap svg { width: 24px; height: 24px; }
.sb-pts-earn-icon { font-size: 24px; flex-shrink: 0; }
.sb-pts-earn-item > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sb-pts-earn-item strong {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: var(--black);
  text-transform: uppercase;
}
.sb-pts-earn-item span {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: #555;
}

/* Redeem section */
.sb-pts-redeem {
  background: var(--white);
  border: var(--border);
  padding: var(--space-component);
}
.sb-pts-redeem-info {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--black);
  margin-bottom: var(--space-element);
  line-height: 1.5;
}
.sb-pts-redeem-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}
/* Points stepper — mirrors cart qty style */
.sb-pts-stepper-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.sb-pts-stepper-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(21,21,21,0.5);
}
.sb-pts-stepper {
  display: inline-flex;
  align-items: center;
  border: var(--border);
  width: fit-content;
  overflow: hidden;
}
/* Buttons inside stepper — container provides outer border, no own border */
.sb-pts-stepper .sb-cart-qty-btn {
  width: 44px;
  height: 44px;
  border: none;
  flex-shrink: 0;
}
.sb-pts-step-input {
  width: 100px;
  height: 44px;
  text-align: center;
  border: none;
  border-left: var(--border);
  border-right: var(--border);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--black);
  background: var(--white);
  -moz-appearance: textfield;
  padding: 0 var(--gap);
}
.sb-pts-step-input::-webkit-inner-spin-button,
.sb-pts-step-input::-webkit-outer-spin-button { display: none; }
.sb-pts-step-input:focus { outline: none; }
.sb-pts-stepper-hint {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: rgba(21,21,21,0.45);
}
.sb-pts-slider-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: rgba(21,21,21,0.45);
}
.sb-pts-redeem-preview {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--black);
}
.sb-pts-redeem-preview strong {
  color: var(--coral);
}
.sb-pts-btn {
  display: block;
  width: 100%;
  background: var(--black);
  color: var(--yellow);
  border: var(--border);
  padding: var(--space-element) var(--space-component);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-align: center;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sb-pts-btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--black);
}
.sb-pts-btn--small {
  padding: var(--gap) var(--space-element);
  font-size: var(--text-label);
  width: auto;
  display: inline-block;
}

/* Locked state */
.sb-pts-redeem--locked .sb-pts-locked-bar {
  height: 6px;
  background: rgba(21,21,21,0.1);
  margin: var(--gap) 0;
}
.sb-pts-locked-fill {
  height: 100%;
  background: var(--coral);
  transition: width 0.4s ease;
}

/* Points History */
.sb-pts-history-wrap { }
.sb-pts-history-table-wrap { overflow-x: auto; }
.sb-pts-history-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-body);
}
.sb-pts-history-table thead tr {
  background: var(--black);
  color: var(--white);
}
.sb-pts-history-table th {
  padding: var(--space-element) var(--gap);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--white);
}
.sb-pts-history-table td {
  padding: var(--space-element) var(--gap);
  border-bottom: 1px solid rgba(21,21,21,0.08);
  font-weight: 400;
  color: var(--black);
  vertical-align: middle;
}
.sb-pts-note {
  font-size: var(--text-caption);
  color: rgba(21,21,21,0.5);
}
.sb-pts-earn  { font-weight: 700; color: var(--green); }
.sb-pts-spend { font-weight: 700; color: var(--coral); }

/* My Coupons */
.sb-pts-coupon-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin-bottom: var(--space-element);
}
.sb-pts-coupon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--space-element);
  border: var(--border);
  background: var(--white);
  flex-wrap: wrap;
}
.sb-pts-coupon--used,
.sb-pts-coupon--expired {
  opacity: 0.55;
  background: var(--grey-light);
}
.sb-pts-coupon-code-wrap {
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.sb-pts-coupon-code {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--black);
}
.sb-pts-coupon--used .sb-pts-coupon-code,
.sb-pts-coupon--expired .sb-pts-coupon-code {
  text-decoration: line-through;
}
.sb-pts-coupon-meta {
  display: flex;
  align-items: center;
  gap: var(--space-element);
  flex-wrap: wrap;
}
.sb-pts-coupon-value {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--black);
}
.sb-pts-coupon-pts,
.sb-pts-coupon-date {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: rgba(21,21,21,0.45);
}
.sb-pts-coupon-status {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
}
.sb-pts-coupon-status--available { background: rgba(0,123,50,0.1);  color: var(--green); }
.sb-pts-coupon-status--used      { background: rgba(21,21,21,0.06); color: rgba(21,21,21,0.45); }
.sb-pts-coupon-status--expired   { background: rgba(253,93,45,0.1); color: var(--coral); }

/* History pagination */
.sb-pts-history-nav {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin-top: var(--space-element);
}
.sb-pts-page-info {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: rgba(21,21,21,0.5);
  flex: 1;
  text-align: center;
}
.sb-pts-page-info strong { color: var(--black); }
#sb-pts-history-body { transition: opacity 0.2s ease; }
.sb-pts-history-more {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: rgba(21,21,21,0.45);
  margin-top: var(--gap);
}

/* Redeem result — follows Section 10 notice pattern */
#sb-pts-redeem-result {
  position: relative;
  display: block;
  padding: 14px 20px 14px 48px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.5;
  background: var(--green);
  color: var(--white);
  border: none;
  margin-top: var(--gap);
}
#sb-pts-redeem-result::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFCF9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}
#sb-pts-redeem-result.error {
  background: var(--coral);
  color: var(--black);
}
#sb-pts-redeem-result.error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151515' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
}

/* ── Referrals page ──────────────────────────────────────── */
.sb-ref-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-component);
}
.sb-ref-hero {
  background: var(--coral);
  padding: var(--space-component);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-component);
  align-items: start;
}
.sb-ref-hero h3 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0 0 var(--space-element);
  color: var(--yellow);
}
.sb-ref-hero p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--white);
  margin: 0;
}
.sb-ref-hero strong { color: var(--yellow); }
.sb-ref-hero .sb-ref-link-label { color: rgba(255,252,249,0.65); }
.sb-ref-hero .sb-ref-link-row input {
  background: var(--white);
  border-color: var(--white);
}
.sb-ref-hero .sb-ref-copied { color: var(--yellow); font-weight: 800; }
/* Link card internal flow */
.sb-ref-link-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}
/* Share buttons on hero — white bg, black border */
.sb-ref-hero .sb-ref-share-btn {
  background: var(--white);
  border-color: var(--white);
}
.sb-ref-hero .sb-ref-share-btn:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
@media (max-width: 48rem) {
  .sb-ref-hero { grid-template-columns: 1fr; }
}
.sb-ref-link-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--gap);
  color: rgba(21,21,21,0.5);
}
.sb-ref-link-row {
  display: flex;
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.sb-ref-link-row input {
  flex: 1;
  padding: var(--input-py) var(--input-px);
  font-family: var(--font-body);
  font-size: var(--text-body);
  border: var(--border);
  background: var(--grey-light);
  color: var(--black);
}
.sb-ref-copied {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.sb-ref-share-btns {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
}
.sb-ref-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--gap) var(--space-element);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: var(--border);
  cursor: pointer;
  background: var(--white);
  color: var(--black);
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sb-ref-share-btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--black);
}
.sb-ref-share-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Stats — each card gets its own pair class from PHP */
.sb-ref-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.sb-ref-stat {
  padding: var(--space-component) var(--space-element);
  text-align: center;
  background: var(--pair-bg, var(--grey-light));
  color: var(--pair-text, var(--black));
  transition: transform 0.15s, box-shadow 0.15s;
}
.sb-ref-stat:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--black);
}
.sb-ref-stat-val {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--pair-text, var(--black));
}
.sb-ref-stat-lbl {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pair-text, var(--black));
  opacity: 0.7;
  margin-top: 6px;
}
.sb-ref-how {
  border: var(--border);
  padding: var(--space-component);
}
/* Steps — mirrors .policy-steps pattern exactly */
.sb-ref-steps {
  list-style: none;
  margin: var(--space-element) 0 0;
  padding: 0;
}
.sb-ref-step {
  display: flex;
  gap: var(--space-element);
  align-items: flex-start;
  padding: var(--space-element) 0;
  border-bottom: 1px solid rgba(21,21,21,0.08);
}
.sb-ref-step:last-child { border-bottom: none; }
.sb-ref-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--coral);
  color: var(--white);
  font-weight: 900;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-ref-step strong {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--black);
}
.sb-ref-step span {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: rgba(21,21,21,0.6);
  line-height: 1.6;
}
.sb-ref-history { margin-bottom: var(--space-component); }
/* Referrals empty state — Section 10 info notice pattern */
.sb-ref-empty {
  position: relative;
  display: block;
  padding: 14px 20px 14px 48px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.5;
  background: var(--blue);
  color: var(--white);
  border: none;
}
.sb-ref-empty::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFCF9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}
.sb-ref-status {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sb-ref-status--converted { background: rgba(253,93,45,0.1);   color: var(--coral); }
.sb-ref-status--rewarded  { background: rgba(0,123,50,0.1);    color: var(--green); }
.sb-ref-status--pending   { background: rgba(21,21,21,0.06);   color: rgba(21,21,21,0.5); }

@media (max-width: 48rem) {
  .sb-ref-hero  { grid-template-columns: 1fr; }
  .sb-ref-stats { grid-template-columns: 1fr 1fr; }
}

/* Responsive — account layout collapses */
@media (max-width: 64rem) {
  .sb-account-layout {
    grid-template-columns: 1fr;
    min-height: 0; /* remove viewport-height lock — no more forced grey gap */
    background: var(--white);
  }
  .sb-account-sidebar {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: var(--border);
  }
  .sb-account-content {
    padding: var(--space-component) var(--space-element);
  }

  /* ── Mobile sidebar: compact header + horizontal scroll nav ── */

  /* Avatar block goes horizontal: avatar left, name+tier right */
  .sb-account-avatar {
    flex-direction: row;
    align-items: center;
    padding: var(--gap) var(--space-element);
    gap: var(--space-element);
    text-align: left;
  }
  .sb-account-avatar-circle,
  .sb-account-avatar img {
    width: 44px;
    height: 44px;
    font-size: 18px;
    flex-shrink: 0;
  }
  .sb-account-identity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }
  .sb-account-name { font-size: var(--text-sm); text-align: left; }
  .sb-account-tier { align-self: flex-start; }

  /* Nav becomes a horizontal scroll strip */
  .sb-account-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0;
    gap: 0;
    scrollbar-width: none;
    border-top: var(--border);
  }
  .sb-account-nav::-webkit-scrollbar { display: none; }

  .sb-account-nav-link {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
    font-size: 9px;
    letter-spacing: 0.06em;
    flex-shrink: 0;
  }
  .sb-account-nav-link i { width: 18px; height: 18px; }
  .sb-account-nav-link.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--coral);
  }
  .sb-account-nav-link.logout-link {
    margin-top: 0;
    border-top: none;
    border-left: var(--border);
    margin-left: auto;
  }
}
/* HQ drawer always full-height on mobile */
@media (max-width: 48rem) {
  .sb-hq-panel { width: 100%; }
  .sb-hq-tab { top: auto; bottom: 80px; transform: none; }
  .sb-hq-tab:hover { transform: translate(-3px, -3px); }
  body.sb-hq-open .sb-hq-tab { transform: translateX(100%); }
  .sb-pts-earn-grid { grid-template-columns: 1fr; gap: var(--space-element); }
  .sb-pts-balance-card { flex-direction: column; }
}

/* ── Dashboard ───────────────────────────────────────────── */
.sb-dash-welcome {
  font-family: var(--font-body);
  font-size: var(--text-subheading);
  font-weight: 800;
  margin-bottom: var(--space-element);
}
.sb-dash-welcome span:not(.sb-tier-badge) { color: var(--coral); }

.sb-dash-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-bottom: var(--space-component);
}
@media (max-width: 900px) {
  .sb-dash-cards { grid-template-columns: repeat(2, 1fr); }
}
/* Cards use colour pair system — pair class sets --pair-bg / --pair-text */
.sb-dash-card {
  padding: var(--space-element);
  background: var(--pair-bg, var(--white));
  color: var(--pair-text, var(--black));
  transition: transform 0.15s, box-shadow 0.15s;
}
.sb-dash-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: 3px 3px 0 var(--black);
}
.sb-dash-card-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pair-text, rgba(21,21,21,0.45));
  opacity: 0.65;
  margin-bottom: 6px;
}
.sb-dash-card-value {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  line-height: 1;
  color: var(--pair-text, var(--black));
}
.sb-dash-card-value--word {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 700;
}
.sb-dash-card-sub {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--pair-text, rgba(21,21,21,0.5));
  opacity: 0.75;
  margin-top: 4px;
}
.sb-dash-card-sub a { color: var(--pair-text, var(--coral)); }

/* ─── Daily Check-in Streak panel ─── */
.sb-dash-streak {
  padding: var(--space-element);
  background: var(--pair-bg, var(--green));
  color: var(--pair-text, var(--white));
  margin-bottom: var(--space-component);
  position: relative;
}
.sb-dash-streak-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sb-dash-streak-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pair-text, var(--white));
  opacity: 0.85;
}
.sb-dash-streak-num { display: inline-flex; align-items: baseline; gap: 6px; }
.sb-dash-streak-count {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1;
  color: var(--yellow);
}
.sb-dash-streak-unit {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pair-text, var(--white));
  opacity: 0.7;
}
.sb-dash-streak-dots {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 12px;
  max-width: 360px;
}
.sb-dash-streak-dot {
  aspect-ratio: 1 / 1;
  border: 2px solid var(--pair-text, var(--white));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pair-text, var(--white));
  background: transparent;
  opacity: 0.5;
  transition: background 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
}
.sb-dash-streak-dot.is-done {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
  opacity: 1;
}
.sb-dash-streak-dot.is-current {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
  opacity: 1;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  transform: translate(-1px, -1px);
}
.sb-dash-streak-foot {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--pair-text, var(--white));
  opacity: 0.85;
}
.sb-dash-streak-status.is-done   { font-weight: 700; opacity: 1; }
.sb-dash-streak-status.is-bonus {
  color: var(--yellow);
  font-weight: 700;
  opacity: 1;
}
.sb-dash-streak-checkin-btn {
  margin-top: var(--space-element);
  align-self: flex-start;
}
@media (max-width: 480px) {
  .sb-dash-streak-dots { gap: 4px; }
  .sb-dash-streak-dot  { font-size: 0.7rem; }
}

/* ─── Milestone reward timeline ─── */
.sb-dash-streak-milestones {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px solid rgba(255,255,255,0.2);
}
.sb-dash-streak-milestones-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pair-text, var(--white));
  opacity: 0.85;
  margin-bottom: 12px;
}
.sb-dash-streak-milestones-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.sb-dash-ms-chip {
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 6px;
  padding: 12px;
  text-align: center;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 110px;
  justify-content: space-between;
}
.sb-dash-ms-day {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.sb-dash-ms-reward {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--pair-text, var(--white));
}
.sb-dash-ms-eta {
  font-family: var(--font-body);
  font-size: 0.7rem;
  opacity: 0.6;
  margin-top: 4px;
}
.sb-dash-ms-claim-btn {
  background: var(--yellow);
  color: var(--black);
  border: 1.5px solid var(--black);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sb-dash-ms-claim-btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--black);
}
.sb-dash-ms-code {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--yellow);
  color: var(--black);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 0.78rem;
  margin-top: 4px;
  word-break: break-all;
}
/* State variants */
.sb-dash-ms-chip--unlocked {
  background: rgba(255,221,0,0.18);
  border-color: var(--yellow);
  animation: sb-ms-pulse 2.2s ease-in-out infinite;
}
.sb-dash-ms-chip--claimed {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
  opacity: 0.85;
}
.sb-dash-ms-chip--claimed .sb-dash-ms-reward { opacity: 0.7; }
@keyframes sb-ms-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,221,0,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(255,221,0,0); }
}

.sb-dash-section-title {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-element);
  padding-bottom: 10px;
  border-bottom: var(--border);
}

.sb-dash-quick-links {
  display: flex;
  gap: var(--gap);
  margin-top: var(--space-component);
  flex-wrap: wrap;
}

/* Inline links */
.sb-link-coral { color: var(--coral); text-decoration: none; }
.sb-link-coral:hover { text-decoration: underline; }
.sb-empty-note {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: rgba(21,21,21,0.45);
}
.sb-table-scroll { overflow-x: auto; }

/* ── Orders table ────────────────────────────────────────── */
.sb-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-body);
}
.sb-orders-table th {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-element) var(--gap);
  text-align: left;
}
.sb-orders-table td {
  padding: var(--space-element) var(--gap);
  border-bottom: 1px solid rgba(21,21,21,0.08);
  vertical-align: middle;
}
.sb-orders-table tr:last-child td { border-bottom: none; }
.sb-orders-table tr:hover td { background: var(--grey-light); }

/* Order status badges */
.order-status {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.order-status--completed  { background: rgba(0,123,50,0.1);    color: var(--green); }
.order-status--processing { background: rgba(18,131,232,0.1);  color: var(--blue);  }
.order-status--pending    { background: rgba(255,221,0,0.3);   color: var(--black); }
.order-status--cancelled  { background: rgba(253,93,45,0.1);   color: var(--coral); }
.order-status--on-hold    { background: rgba(255,154,234,0.3); color: var(--black); }
.order-status--refunded   { background: rgba(21,21,21,0.06);   color: rgba(21,21,21,0.5); }

.sb-orders-table .btn-sm {
  padding: 6px 14px;
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.sb-orders-table .btn-sm:hover {
  transform: translate(-3px,-3px);
  box-shadow: 3px 3px 0 var(--black);
}

/* ── My Subscriptions ────────────────────────────────────── */
.sb-sub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  margin-bottom: var(--space-component);
}
.sb-sub-card {
  display: flex;
  flex-direction: column;
  border: var(--border);
  overflow: hidden;
  font-family: var(--font-body);
}

/* Card header — tier colour band */
.sb-sub-head {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-element) var(--gap);
  padding-right: 80px;
  min-height: 88px;
}
.sb-sub-head-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sb-sub-ref {
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
}
.sb-sub-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.03em;
}

/* Tier colour variants (match tier-block palette) */
.sb-sub-card--starter  .sb-sub-head { background: var(--yellow); color: var(--black); }
.sb-sub-card--starter  .sb-sub-name { color: var(--coral); }
.sb-sub-card--sessions .sb-sub-head { background: var(--green);  color: var(--white); }
.sb-sub-card--sessions .sb-sub-name { color: var(--pink); }
.sb-sub-card--ultimate .sb-sub-head { background: var(--blue);   color: var(--white); }
.sb-sub-card--ultimate .sb-sub-name { color: var(--yellow); }
.sb-sub-card--vip      .sb-sub-head { background: var(--black);  color: var(--white); }
.sb-sub-card--vip      .sb-sub-name { color: var(--yellow); }

/* Status pill — absolute top-right of header */
.sb-sub-status {
  position: absolute;
  top: var(--space-element);
  right: var(--gap);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
}
.sb-sub-status--active     { background: var(--green);  color: var(--white); }
.sb-sub-status--hold       { background: var(--yellow); color: var(--black); }
.sb-sub-status--pending    { background: var(--coral);  color: var(--white); }
.sb-sub-status--cancelling { background: var(--coral);  color: var(--white); opacity: 0.7; }
.sb-sub-status--cancelled  { background: rgba(21,21,21,0.08); color: rgba(21,21,21,0.5); }

/* Card body */
.sb-sub-body {
  flex: 1;
  padding: var(--space-element) var(--gap);
  border-top: var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-sub-price {
  font-size: var(--text-subheading);
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--black);
}
.sb-sub-value {
  font-size: var(--text-label);
  font-weight: 600;
  color: rgba(21,21,21,0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sb-sub-meta {
  margin-top: var(--space-element);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-sub-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: rgba(21,21,21,0.6);
}

/* Card footer */
.sb-sub-foot {
  padding: var(--space-element) var(--gap);
  border-top: var(--border);
}
.sb-sub-foot .btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: var(--text-sm);
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.sb-sub-foot .btn-sm:hover {
  transform: translate(-2px,-2px);
  box-shadow: 2px 2px 0 var(--black);
}

/* "Add another" buttons row */
.sb-sub-add-more {
  margin-top: var(--space-element);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
}

/* ── Subscriptions empty state ───────────────────────────── */
.sb-sub-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-element);
  padding: var(--space-component) 0;
}
.sb-sub-empty-icon { color: rgba(21,21,21,0.15); }
.sb-sub-empty-title {
  font-family: var(--font-body);
  font-size: var(--text-heading);
  font-weight: 700;
  color: var(--black);
  margin: 0;
}
.sb-sub-empty-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: rgba(21,21,21,0.6);
  max-width: 520px;
  margin: 0;
}
.sb-sub-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.sb-sub-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sb-sub-tier-pill:hover {
  transform: translate(-2px,-2px);
  box-shadow: 2px 2px 0 var(--black);
}
.sb-sub-tier-pill--starter  { background: var(--yellow); color: var(--black); }
.sb-sub-tier-pill--sessions { background: var(--green);  color: var(--white); }
.sb-sub-tier-pill--ultimate { background: var(--blue);   color: var(--white); }
.sb-sub-tier-pill-ref {
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0.55;
}
.sb-sub-tier-pill-name {
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: 700;
}
.sb-sub-tier-pill-price {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  opacity: 0.75;
}
@media (max-width: 600px) {
  .sb-sub-grid { grid-template-columns: 1fr; }
}

/* Empty state actions + tier-nav override */
.sb-sub-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

/* tier-nav inside My Subscriptions empty state — horizontal strip, no hover lift on parent */
.sb-sub-tier-nav {
  width: 100%;
  margin-bottom: var(--space-element);
}
.sb-sub-tier-nav .tier-block {
  font-size: 0.9em;
}

/* Subscription period suffix in price display */
.sb-sub-period {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  opacity: 0.65;
  margin-left: 2px;
}

/* ── View Subscription detail page ──────────────────────────── */
.sb-tfoot-period {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: rgba(21,21,21,0.45);
  margin-left: 3px;
}

/* Detail card — wider body layout */
.sb-sub-card--detail { margin-bottom: var(--space-component); }

.sb-sub-body--detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}
.sb-sub-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px var(--gap);
}
.sb-sub-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: rgba(21,21,21,0.65);
}
.sb-sub-detail-row strong { color: var(--black); font-weight: 600; }
.sb-sub-detail-label {
  flex: 1;
  font-size: var(--text-sm);
  color: rgba(21,21,21,0.45);
}

/* Action buttons row */
.sb-sub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  padding-top: var(--space-element);
  border-top: var(--border);
}

/* Billing address */
.sb-sub-address {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-style: normal;
  color: rgba(21,21,21,0.65);
  line-height: 1.6;
  margin-bottom: var(--space-component);
}

@media (max-width: 600px) {
  .sb-sub-detail-grid { grid-template-columns: 1fr; }
  .sb-sub-actions { flex-direction: column; }
  .sb-sub-actions .btn { width: 100%; justify-content: center; }
}

/* ── Order Pay (Change Payment / Manual Renewal) ─────────── */
.woocommerce-order-pay {
  font-family: var(--font-body);
}
.woocommerce-order-pay h1,
.woocommerce-order-pay .entry-title {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 700;
  margin-bottom: var(--space-element);
}

/* WCS info notice — override WC blue default */
.woocommerce-order-pay .woocommerce-info {
  display: block;
  padding: 14px var(--gap);
  background: rgba(21,21,21,0.04);
  border: var(--border);
  border-left: 3px solid var(--black);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--black);
  margin-bottom: var(--space-element);
}
.woocommerce-order-pay .woocommerce-info::before { content: none; }

/* Order review table */
.woocommerce-order-pay table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-body);
  margin-bottom: var(--space-element);
  border: var(--border);
}
.woocommerce-order-pay table.shop_table thead th {
  padding: 10px var(--gap);
  text-align: left;
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(21,21,21,0.5);
  background: rgba(21,21,21,0.04);
  border-bottom: var(--border);
}
.woocommerce-order-pay table.shop_table td {
  padding: 12px var(--gap);
  border-bottom: var(--border);
  vertical-align: middle;
}
.woocommerce-order-pay table.shop_table tfoot td,
.woocommerce-order-pay table.shop_table tfoot th {
  padding: 12px var(--gap);
  border-bottom: var(--border);
}
.woocommerce-order-pay table.shop_table tfoot tr:last-child td,
.woocommerce-order-pay table.shop_table tfoot tr:last-child th {
  border-bottom: none;
}
.woocommerce-order-pay table.shop_table tfoot .order-total td,
.woocommerce-order-pay table.shop_table tfoot .order-total th {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 700;
}

/* Payment section */
.woocommerce-order-pay #payment {
  border: var(--border);
  padding: var(--space-element) var(--gap);
  margin-bottom: var(--space-element);
}
.woocommerce-order-pay #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 var(--space-element) 0;
  padding: 0 0 var(--space-element) 0;
  border-bottom: var(--border);
}
.woocommerce-order-pay #payment ul.payment_methods li {
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  border-top: var(--border);
}
.woocommerce-order-pay #payment ul.payment_methods li:first-child {
  border-top: none;
  padding-top: 0;
}
.woocommerce-order-pay #payment ul.payment_methods label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.woocommerce-order-pay #payment .payment_box {
  background: transparent;
  padding: var(--space-element) 0 0 0;
  margin-top: 0;
  border: none;
  font-family: var(--font-body);
}
/* Test mode notice */
.woocommerce-order-pay #payment .testmode-info {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  color: rgba(21,21,21,0.55);
  background: rgba(21,21,21,0.03);
  border-left: 3px solid rgba(21,21,21,0.15);
  padding: 8px 10px;
  margin: 0 0 var(--space-element) 0;
  line-height: 1.5;
}
.woocommerce-order-pay #payment .testmode-info strong {
  font-weight: 600;
  color: var(--black);
}
.woocommerce-order-pay #payment .testmode-info a {
  color: var(--black);
  font-weight: 500;
}
/* Saved payment method token list */
.woocommerce-order-pay #payment .woocommerce-SavedPaymentMethods {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-order-pay #payment .woocommerce-SavedPaymentMethods li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: var(--border);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  border-top: none;
}
.woocommerce-order-pay #payment .woocommerce-SavedPaymentMethods li:last-child {
  border-bottom: none;
}
.woocommerce-order-pay #payment .woocommerce-SavedPaymentMethods label {
  font-weight: 400;
  font-size: var(--text-body);
}
.woocommerce-order-pay #payment .woocommerce-SavedPaymentMethods input[type="radio"] {
  accent-color: var(--coral);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}
/* Stripe hidden style probe — UPE reads computed styles of this input to build appearance.
   On order-pay there is no .sb-checkout-form wrapper so it gets no tokens without this rule. */
.woocommerce-order-pay #payment #wc-stripe-hidden-style-input {
  padding: var(--input-py) var(--input-px);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--black);
  background-color: var(--white);
  border: var(--border);
  border-radius: 0;
  box-shadow: none;
}
/* Stripe UPE card form */
.woocommerce-order-pay #payment #wc-stripe-upe-form {
  border: none;
  margin: 0;
  padding: var(--space-element) 0 0 0;
}
.woocommerce-order-pay #payment .wc-stripe-upe-element {
  padding: var(--space-element) var(--gap);
  background: rgba(21,21,21,0.025);
  border: var(--border);
}

/* Place order / Add payment method button */
.woocommerce-order-pay #payment #place_order,
.woocommerce-order-pay #add_payment_method #place_order {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  border: 2px solid var(--black);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  text-transform: none;
  letter-spacing: 0;
  margin-top: var(--space-element);
}
.woocommerce-order-pay #payment #place_order:hover,
.woocommerce-order-pay #add_payment_method #place_order:hover {
  transform: translate(-3px,-3px);
  box-shadow: 3px 3px 0 var(--black);
  background: var(--white);
  color: var(--black);
}

/* Account forms */
.sb-account-form .woocommerce-Input,
.sb-account-form input[type="text"],
.sb-account-form input[type="email"],
.sb-account-form input[type="password"],
.sb-account-form input[type="tel"] {
  width: 100%;
  padding: var(--input-py) var(--input-px);
  border: var(--border);
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--black);
  border-radius: 0;
  appearance: none;
  transition: border-color 0.15s;
}
.sb-account-form input:focus {
  outline: none;
  border-color: var(--coral);
}

/* ── WC Edit Address / Edit Account forms (native WC, no custom wrapper) ── */
.woocommerce-address-fields,
.woocommerce-EditAccountForm {
  font-family: var(--font-body);
}
.woocommerce-address-fields__field-wrapper,
.woocommerce-EditAccountForm fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-bottom: var(--space-element);
  border: none;
  padding: 0;
}
.woocommerce-address-fields__field-wrapper .form-row,
.woocommerce-EditAccountForm .form-row {
  margin: 0;
  padding: 0;
  flex: 1 1 220px;
}
.woocommerce-address-fields__field-wrapper .form-row-wide,
.woocommerce-EditAccountForm .form-row-wide {
  flex: 1 1 100%;
}
.woocommerce-address-fields label,
.woocommerce-EditAccountForm label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--black);
}
.woocommerce-address-fields input.input-text,
.woocommerce-address-fields select,
.woocommerce-EditAccountForm input.input-text,
.woocommerce-EditAccountForm input[type="password"],
.woocommerce-EditAccountForm select {
  width: 100%;
  padding: var(--input-py) var(--input-px);
  border: var(--border);
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--black);
  border-radius: 0;
  appearance: none;
  transition: border-color 0.15s;
}
.woocommerce-address-fields input.input-text:focus,
.woocommerce-address-fields select:focus,
.woocommerce-EditAccountForm input:focus,
.woocommerce-EditAccountForm select:focus {
  outline: none;
  border-color: var(--coral);
}
.woocommerce-address-fields .form-row.woocommerce-invalid input,
.woocommerce-address-fields .form-row.woocommerce-invalid select {
  border-color: var(--coral);
}
.woocommerce-address-fields .woocommerce-error,
.woocommerce-EditAccountForm .woocommerce-error {
  font-size: var(--text-sm);
  color: var(--coral);
  margin-top: 4px;
  list-style: none;
  padding: 0;
}
.woocommerce-address-fields .button,
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-address-fields button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  border: 2px solid var(--black);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  margin-top: var(--space-element);
}
.woocommerce-address-fields .button:hover,
.woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-address-fields button[type="submit"]:hover {
  transform: translate(-3px,-3px);
  box-shadow: 3px 3px 0 var(--black);
  background: var(--white);
  color: var(--black);
}
/* Page heading in account content area */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 700;
  margin-bottom: var(--space-element);
}
@media (max-width: 600px) {
  .woocommerce-address-fields__field-wrapper .form-row,
  .woocommerce-EditAccountForm .form-row { flex: 1 1 100%; }
}

/* ── View Order ──────────────────────────────────────────── */
.sb-view-order { display: flex; flex-direction: column; gap: var(--space-component); }
.sb-vo-section {
  display: flex;
  flex-direction: column;
}
.sb-view-order-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #666;
  text-decoration: none;
  margin-bottom: 4px;
}
.sb-view-order-back:hover { color: var(--coral); }
/* Order items table helpers */
.sb-vo-items-table { margin-bottom: 0; }
.sb-col-center { text-align: center; }
.sb-col-right  { text-align: right; }
.sb-vo-product-cell {
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.sb-vo-product-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: var(--border);
  background: #f7f4ef;
  flex-shrink: 0;
}
.sb-vo-sku {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: rgba(21,21,21,0.45);
  margin-top: 2px;
}
.sb-vo-product-title {
  color: var(--black);
  text-decoration: none;
  transition: color 0.15s ease;
}
.sb-vo-product-title:hover { color: var(--orange, #FD5D2D); text-decoration: underline; }
.sb-vo-product-img-link { display: block; flex-shrink: 0; }
.sb-vo-product-img-link:hover .sb-vo-product-img { transform: scale(1.04); }
.sb-vo-product-img { transition: transform 0.15s ease; }
.sb-vo-review-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--yellow);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sb-vo-review-cta:hover {
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 var(--black);
  color: var(--black);
}
.sb-tfoot-label    { color: rgba(21,21,21,0.5); }
.sb-tfoot-free     { color: var(--green); font-weight: 700; }
.sb-tfoot-discount { color: var(--green); font-weight: 700; }
.sb-tfoot-coupon-code {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  background: var(--black);
  color: var(--yellow);
  vertical-align: middle;
  margin-left: 4px;
}
.sb-tfoot-total td { border-top: var(--border); font-weight: 700; padding-top: var(--space-element); }
/* Pay notice — pending-payment orders */
.sb-vo-pay-notice {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  padding: var(--space-element) var(--space-component);
  border: var(--border);
  border-left: 4px solid var(--black);
  background: rgba(21,21,21,0.03);
}
.sb-vo-pay-notice p {
  margin: 0;
  flex: 1;
  min-width: 160px;
  font-size: var(--text-body);
  font-weight: 500;
}

/* Addresses */
.sb-vo-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.sb-vo-addr-block {
  border: var(--border);
  padding: var(--space-element);
  background: var(--grey-light);
}
.sb-vo-addr-title {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(21,21,21,0.45);
  margin-bottom: var(--gap);
}
.sb-vo-addr-meta {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: rgba(21,21,21,0.6);
  margin-top: 4px;
}

/* Order notes */
.sb-vo-notes { display: flex; flex-direction: column; gap: var(--gap); }
.sb-vo-note {
  border-left: 3px solid var(--coral);
  padding: var(--gap) var(--space-element);
  background: var(--grey-light);
}
.sb-vo-note-date {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(21,21,21,0.45);
  margin-bottom: 4px;
}
.sb-vo-note-text { font-family: var(--font-body); font-size: var(--text-body); color: var(--black); }
.sb-vo-note-text p { margin: 0; }

@media (max-width: 640px) {
  .sb-vo-addresses { grid-template-columns: 1fr; }
}

/* Edit Account form — 2-col layout */
.sb-edit-account-form { width: 100%; }

.sb-account-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-component);
  align-items: start;
}
.sb-account-col { min-width: 0; }

/* Password col gets a subtle left separator on desktop */
.sb-account-col--pw {
  padding-left: var(--space-component);
  border-left: var(--border);
}

/* "Same as billing" — follows Section 10 success notice pattern */
.sb-shipping-same {
  position: relative;
  display: block;
  padding: 14px 20px 14px 48px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.5;
  background: var(--green);
  color: var(--white);
  border: none;
}
.sb-shipping-same::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFCF9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}

/* Address grid inside a column — single column (no nested 2-col) */
.sb-address-grid--single {
  grid-template-columns: 1fr;
  max-width: none;
}
.sb-address-grid--single .form-row-first,
.sb-address-grid--single .form-row-last {
  grid-column: auto;
}

/* Edit-address actions — WCS notice paragraph + save button */
.sb-edit-address-actions {
  margin-top: var(--space-element);
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}
.sb-edit-address-actions p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: rgba(21,21,21,0.6);
  margin: 0;
}

/* Mobile — stack both 2-col grids */
@media (max-width: 56rem) {
  .sb-account-2col { grid-template-columns: 1fr; }
  .sb-account-col--pw { padding-left: 0; border-left: none; border-top: var(--border); padding-top: var(--space-component); }
}

.sb-form-row-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.sb-form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.sb-form-field label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--black);
}
.sb-form-field .required { color: var(--coral); }
.sb-form-field input {
  width: 100%;
  padding: var(--input-py) var(--input-px);
  border: var(--border);
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--black);
  border-radius: 0;
  appearance: none;
  transition: border-color 0.15s;
}
.sb-form-field input:focus { outline: none; border-color: var(--coral); }
.sb-field-hint { font-family: var(--font-body); font-size: var(--text-caption); color: rgba(21,21,21,0.45); }
.sb-form-divider { border: none; border-top: var(--border); margin: var(--space-component) 0; }
.sb-ship-toggle {
  display: flex;
  align-items: center;
  gap: var(--gap);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--black);
  margin-bottom: var(--space-element);
}
.sb-ship-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--black);
  flex-shrink: 0;
}

/* ── Address fields inside edit-account form ── */
.sb-address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap); }
.sb-address-grid .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.sb-address-grid .form-row-wide { grid-column: 1 / -1; }
.sb-address-grid label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--black);
}
.sb-address-grid .required { color: var(--coral); }
.sb-address-grid input[type="text"],
.sb-address-grid input[type="email"],
.sb-address-grid input[type="tel"],
.sb-address-grid select {
  width: 100%;
  padding: var(--input-py) var(--input-px);
  border: var(--border);
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--black);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s;
}
.sb-address-grid input:focus,
.sb-address-grid select:focus { border-color: var(--coral); }
.sb-address-grid .woocommerce-input-wrapper { width: 100%; }
@media (max-width: 600px) { .sb-address-grid { grid-template-columns: 1fr; } }

/* Login / Register two-col */
.sb-login-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: calc(100vh - var(--bar-height) - var(--nav-height));
  border-top: var(--border);
}
.sb-login-col {
  padding: var(--space-section) clamp(var(--gutter), 6vw, var(--space-section));
}
.sb-login-col:first-child { border-right: var(--border); }

/* Column heading */
.sb-login-col h2 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--gap);
  color: var(--black);
}
.sb-login-col p.sb-login-desc {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: #666;
  line-height: 1.6;
  margin-bottom: var(--space-component);
}

/* Form rows */
.sb-login-col .form-row { margin-bottom: var(--gap); }
.sb-login-col label.sb-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  color: var(--black);
}
.sb-login-col input[type="text"],
.sb-login-col input[type="email"],
.sb-login-col input[type="password"] {
  width: 100%;
  padding: var(--input-py) var(--input-px);
  border: var(--border);
  font-family: var(--font-body);
  font-size: var(--text-body);
  background: var(--white);
  color: var(--black);
  border-radius: 0;
  appearance: none;
  transition: border-color 0.15s;
}
.sb-login-col input:focus {
  outline: none;
  border-color: var(--coral);
}
.sb-login-col input::placeholder { color: #bbb; }

/* Remember me + forgot */
.sb-login-col .sb-login-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap);
}
.sb-login-col .sb-login-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: #666;
  cursor: pointer;
}
.sb-login-col .sb-login-remember input[type="checkbox"] {
  width: auto;
  accent-color: var(--coral);
}
.sb-login-col .forgot-link {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: #999;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.sb-login-col .forgot-link:hover { color: var(--coral); }

/* Submit button — inherits .btn .btn-black */
.sb-login-col .btn { margin-top: var(--space-element); width: 100%; }

/* Privacy text */
.sb-login-col .woocommerce-privacy-policy-text {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: #999;
  margin-top: var(--space-element);
  line-height: 1.6;
}
.sb-login-col .woocommerce-privacy-policy-text a { color: var(--coral); }

/* WooCommerce error/notice within login columns */
.sb-login-col .woocommerce-error,
.sb-login-col .woocommerce-message,
.sb-login-col .woocommerce-info {
  margin-bottom: var(--space-element);
}

/* Points page */
.sb-points-balance {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 20px 0 32px;
}
.sb-points-big {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  color: var(--coral);
}
.sb-points-label {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

@media (max-width: 56rem) {
  .sb-account-content { padding: 24px 20px; }
  .sb-dash-cards { grid-template-columns: 1fr; }
  .sb-login-layout { grid-template-columns: 1fr; min-height: auto; }
  .sb-login-col:first-child { border-right: none; border-bottom: var(--border); }
  .sb-login-col { padding: var(--space-component) var(--gutter); }
}
@media (max-width: 600px) {
  .sb-orders-table { font-size: 12px; }
  .sb-orders-table th,
  .sb-orders-table td { padding: 10px 10px; }
}

/* ── Single-column login variant (lost password / reset password) ── */
.sb-login-layout--single {
  grid-template-columns: 1fr;
  max-width: 480px;
  margin: 0 auto;
  border: none;
  min-height: 0;
}
.sb-login-layout--single .sb-login-col {
  border-right: none;
  border: none;
  padding: var(--space-section) var(--gutter);
}
.sb-login-layout--single .btn {
  margin-top: var(--space-element);
  width: 100%;
}
.sb-login-layout--single .sb-view-order-back {
  margin-top: var(--space-component);
  display: inline-flex;
}
/* Lost password — sent confirmation state */
.sb-lp-sent-icon {
  color: var(--black);
  margin-bottom: var(--space-element);
  display: block;
}
.sb-lp-resend {
  margin-top: var(--space-element);
  font-size: var(--text-body);
  color: rgba(21,21,21,0.55);
  text-align: center;
}
.sb-lp-resend a {
  color: var(--black);
  font-weight: 600;
  text-decoration: underline;
}

/* ── 404 ─────────────────────────────────────────────────────────── */
.sb-404-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--bar-height) - var(--nav-height) - 120px);
  padding: var(--space-section) var(--gutter);
  border-top: var(--border);
}
.sb-404-inner {
  text-align: center;
  max-width: 520px;
}
.sb-404-num {
  font-family: var(--font-display);
  font-size: clamp(4rem, 18vw, 9rem);
  line-height: 1;
  color: var(--yellow);
  letter-spacing: -0.02em;
}
.sb-404-heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  text-transform: uppercase;
  color: var(--black);
  margin: var(--gap) 0 var(--space-component);
  line-height: 1.1;
}
.sb-404-desc {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: #666;
  line-height: 1.6;
  margin-bottom: var(--space-component);
}
.sb-404-actions {
  display: flex;
  gap: var(--gap);
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .sb-404-actions { flex-direction: column; }
  .sb-404-actions .btn { width: 100%; }
}

/* ============================================================
   SEARCH RESULTS PAGE
   ============================================================ */
.sb-search-page {
  padding: var(--space-section) clamp(var(--gutter), calc(50vw - 40rem), 15%) var(--space-section);
}
.sb-search-header {
  margin-bottom: var(--space-component);
  padding-bottom: var(--space-element);
  border-bottom: var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}
.sb-search-heading {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  color: var(--black);
}
.sb-search-count {
  font-family: var(--font-display);
  color: var(--coral);
}
.sb-search-term {
  border-bottom: 3px solid var(--yellow);
  padding-bottom: 1px;
}

.sb-search-form {
  display: flex;
  gap: 0;
  max-width: 560px;
}
.sb-search-inline-input {
  flex: 1;
  min-width: 0;
  padding: var(--input-py) var(--input-px);
  border: var(--border);
  border-right: none;
  font-family: var(--font-body);
  font-size: var(--text-body);
  background: var(--white);
  color: var(--black);
  outline: none;
}
.sb-search-inline-input:focus { border-color: var(--coral); }
.sb-search-inline-input::placeholder { color: #bbb; }
.sb-search-inline-input::-webkit-search-cancel-button,
.sb-search-inline-input::-webkit-search-decoration { display: none; }
.sb-search-inline-input[type=search]::-ms-clear { display: none; }
.sb-search-form .btn { flex-shrink: 0; gap: 6px; }

.sb-search-grid {
  padding: 0;
}

.sb-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-section) var(--gutter);
  text-align: center;
  gap: var(--space-element);
}
.sb-search-empty i { width: 56px; height: 56px; color: #ccc; }
.sb-search-empty h3 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--black);
}
.sb-search-empty p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: #888;
  line-height: 1.6;
  max-width: 360px;
}
.sb-search-suggestions { margin-top: var(--gap); }

@media (max-width: 47.9375rem) {
  .sb-search-form { flex-direction: column; max-width: 100%; }
  .sb-search-inline-input { border-right: var(--border); }
}

/* ── XP Widget (HQ panel + any future use) ──────────────── */
.sb-xp-widget {
  border: var(--border);
  padding: var(--space-element) var(--space-component);
  margin-bottom: var(--space-component);
  background: var(--white);
}
.sb-xp-widget-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: var(--space-element);
  flex-wrap: wrap;
}
.sb-xp-widget-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.sb-xp-widget-num {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: 1;
  color: var(--black);
}
.sb-xp-widget-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Tier badges ─────────────────────────────────────────── */
.sb-tier-badge {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  vertical-align: middle;
  margin-left: 8px;
}
/* sb-tier-badge colours output dynamically via wp_head (inc/admin-panel.php) */

/* ── XP progress bar ─────────────────────────────────────── */
.sb-xp-progress-wrap { margin-top: 4px; }
.sb-xp-progress-bar {
  height: 6px;
  background: rgba(21,21,21,0.08);
  border: var(--border);
  overflow: hidden;
}
.sb-xp-bar-fill {
  height: 100%;
  background: var(--coral);
  transition: width 0.6s ease;
}
.sb-xp-progress-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: rgba(21,21,21,0.5);
  margin-top: 4px;
}

/* ── Check-in ────────────────────────────────────────────── */
.sb-checkin-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.sb-checkin-btn {
  background: var(--black);
  color: var(--white);
  border: var(--border);
  padding: var(--input-py) var(--space-element);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sb-checkin-btn:hover:not(:disabled) {
  transform: translate(-3px,-3px);
  box-shadow: 3px 3px 0 var(--black);
}
.sb-checkin-btn.sb-checkin-done,
.sb-checkin-btn:disabled {
  background: rgba(21,21,21,0.06);
  color: rgba(21,21,21,0.35);
  border-color: rgba(21,21,21,0.15);
  cursor: default;
  transform: none;
  box-shadow: none;
}
.sb-checkin-streak {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--coral);
}

/* XP Toast */
.sb-xp-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--black);
  color: var(--white);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  z-index: 99999;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
  white-space: nowrap;
}
.sb-xp-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
  .sb-xp-widget-top { flex-direction: column; align-items: flex-start; }
  .sb-checkin-wrap { align-items: flex-start; }
}

/* ── 18+ Age Gate ─────────────────────────────────────────────────────────── */
.sb-age-gate {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .4s;
}
.sb-age-gate--hidden {
  opacity: 0;
  pointer-events: none;
}
.sb-age-gate-overlay {
  position: absolute;
  inset: 0;
  background: rgba(21,21,21,.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.sb-age-gate-box {
  position: relative;
  z-index: 1;
  background: var(--white);
  border: 3px solid var(--black);
  padding: 48px 40px;
  max-width: 460px;
  width: 90%;
  text-align: center;
}
.sb-age-gate-logo {
  margin-bottom: 20px;
  background: var(--black);
  display: inline-flex;
  padding: 10px 14px;
}
.sb-age-gate-title {
  font-family: var(--font-display);
  font-size: 32px;
  margin: 0 0 12px;
  line-height: 1.1;
}
.sb-age-gate-sub {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 28px;
}
.sb-age-gate-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.sb-age-gate-btn {
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  border: 2px solid var(--black);
  cursor: pointer;
  transition: background .2s, color .2s;
  min-width: 140px;
}
.sb-age-gate-btn--yes {
  background: var(--black);
  color: var(--white);
}
.sb-age-gate-btn--yes:hover {
  background: var(--coral);
  border-color: var(--coral);
}
.sb-age-gate-btn--no {
  background: transparent;
  color: var(--black);
}
.sb-age-gate-btn--no:hover {
  background: #eee;
}
.sb-age-gate-legal {
  font-size: 11px;
  color: #999;
}
.sb-age-gate-legal a {
  color: var(--coral);
  text-decoration: underline;
}

@media (max-width: 480px) {
  .sb-age-gate-box { padding: 32px 24px; }
  .sb-age-gate-title { font-size: 26px; }
}

/* ── Prize Wheel ──────────────────────────────────────────────────────────── */
.sb-wheel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 0 16px;
}
.sb-wheel-intro {
  font-size: 14px;
  color: #555;
  text-align: center;
  margin: 0;
}
.sb-wheel-spun-msg {
  font-size: 14px;
  color: #888;
  text-align: center;
  padding: 24px;
  border: var(--border);
  background: #fafafa;
  width: 100%;
  box-sizing: border-box;
}
.sb-wheel-result-box {
  text-align: center;
  padding: 16px 28px;
  border: 2px solid var(--black);
  background: var(--white);
  animation: sb-pop-in .3s ease;
}
.sb-wheel-result-xp {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--coral);
  line-height: 1;
}
.sb-wheel-result-label {
  font-size: 14px;
  color: #555;
  margin-top: 4px;
}
.sb-wheel-result-total {
  font-size: 12px;
  color: #888;
  margin-top: 8px;
}
@keyframes sb-pop-in {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Check-in Popup ───────────────────────────────────────────────────────── */
.sb-checkin-popup {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99998;
  transform: translateY(24px);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.sb-checkin-popup--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sb-checkin-popup-inner {
  background: var(--white);
  border: 2px solid var(--black);
  box-shadow: 6px 6px 0 var(--black);
  padding: 20px 22px 18px;
  width: 360px;
  position: relative;
  border-radius: 4px;
  container-type: inline-size;
}
.sb-checkin-popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: rgba(21,21,21,0.45);
  padding: 4px;
  transition: color 0.15s ease;
}
.sb-checkin-popup-close:hover { color: var(--black); }
.sb-checkin-popup-icon {
  font-size: 28px;
  margin-bottom: 6px;
  display: inline-block;
}
.sb-checkin-popup-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 7.8cqw, 2.1rem);
  letter-spacing: 0.01em;
  margin-bottom: 4px;
  line-height: 1;
  color: var(--black);
  white-space: nowrap;
}
.sb-checkin-popup-sub {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(21,21,21,0.55);
  line-height: 1.5;
  margin-bottom: 14px;
}
.sb-popup-stamps {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 12px;
}
.sb-popup-stamp {
  width: 34px;
  height: 34px;
  border: 2px solid var(--black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: rgba(21,21,21,0.35);
  background: var(--white);
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.sb-popup-stamp--done {
  background: var(--black);
  color: var(--yellow);
  transform: scale(1.05);
}
.sb-popup-stamp--current {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--black);
  box-shadow: 2px 2px 0 var(--black);
}
.sb-checkin-popup-days {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(21,21,21,0.55);
  text-align: center;
  margin-bottom: 14px;
  line-height: 1.4;
}
.sb-checkin-popup-btn {
  width: 100%;
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
  padding: 12px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 8px;
  display: block;
  box-shadow: 0 0 0 var(--black);
}
.sb-checkin-popup-btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--black);
}
.sb-checkin-popup-btn.sb-checkin-done,
.sb-checkin-popup-btn:disabled {
  background: var(--green);
  color: var(--white);
  border-color: var(--black);
  cursor: default;
  box-shadow: none;
  transform: none;
}
.sb-checkin-popup-later {
  width: 100%;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(21,21,21,0.4);
  cursor: pointer;
  padding: 6px;
  text-decoration: underline;
  display: block;
  text-align: center;
  letter-spacing: 0.02em;
}
.sb-checkin-popup-later:hover { color: var(--black); }

@media (max-width: 480px) {
  .sb-checkin-popup { right: 12px; bottom: 12px; }
  .sb-checkin-popup-inner { width: calc(100vw - 48px); }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT US PAGE  (v2 — Figma 411-9344)
═══════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.au-hero {
  position: relative;
  background: var(--coral);
  padding: var(--space-section) clamp(var(--gutter), calc(50vw - 40rem), 15%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-component);
}
.au-hero-bg-text {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--yellow);
  text-align: center;
  pointer-events: none;
}
.au-hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-element);
}
.au-hero-title {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: 1.0;
  color: var(--black);
  margin: 0;
}
.au-hero-tagline {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--white);
  margin: 0;
  max-width: 760px;
}
.au-hero-body {
  max-width: 820px;
  text-align: center;
}
.au-hero-body p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--white);
  margin: 0 0 var(--gap);
}
.au-hero-body p:last-child { margin-bottom: 0; }
.au-hero-stats {
  display: flex;
  gap: var(--gap);
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.au-hero-stats .au-stat-oval:nth-child(1) { transform: rotate(-9deg); }
.au-hero-stats .au-stat-oval:nth-child(2) { transform: rotate(6deg); }
.au-hero-stats .au-stat-oval:nth-child(3) { transform: rotate(-5deg); }
.au-hero-stats .au-stat-oval:nth-child(4) { transform: rotate(8deg); }

/* ── VALUES ── */
.au-values-new {
  background: var(--pink);
  padding: var(--space-section) clamp(var(--gutter), calc(50vw - 40rem), 15%);
}
.au-values-header {
  text-align: center;
  margin-bottom: var(--space-component);
}
.au-values-header .mb-section-label { color: var(--black); }
.au-values-new .footer-trust-wrap { padding-left: 0; padding-right: 0; }

/* ── STATS (shared between hero stats + any other oval-stat layouts) ── */
.au-stat-oval {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: var(--space-element) var(--space-component);
  text-align: center;
  gap: var(--gap);
  flex: 1;
  min-width: 0;
  height: clamp(120px, 12vw, 180px);
}
.au-stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 4rem);
  line-height: 0.9;
}
.au-stat-lbl {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ── FINAL CTA ── */
.au-cta-new {
  display: flex;
  flex-direction: column;
  background: var(--blue) url('../images/au-cta-bg.svg') center / cover no-repeat;
  overflow: hidden;
  padding-bottom: var(--space-section);
}
.au-cta-new .footer-trust-wrap { padding: 0; margin: 0 var(--gutter); }
.au-cta-top {
  display: flex;
  align-items: flex-end;
  min-height: 620px;
}
.au-cta-img-wrap {
  flex-shrink: 0;
  width: 35%;
  align-self: flex-end;
}
.au-cta-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.au-cta-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  align-self: center;
  gap: var(--space-element);
  padding: var(--space-component) var(--gutter) var(--space-component) var(--space-component);
}
.au-cta-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0;
}
.au-cta-body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--black);
  margin: 0;
}
.au-cta-btns {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
}

/* ── TAGLINE BLOCK ── */
.au-tagline-block {
  background: var(--white);
  padding: var(--space-section) clamp(var(--gutter), calc(50vw - 40rem), 15%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-element);
}
.au-tagline-block-line {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--black);
  text-align: center;
}
.au-tagline-coral {
  color: var(--coral);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .au-cta-img-wrap { width: 40%; }
  .au-stat-oval { width: 220px; height: 110px; }
  .au-hero-stats .au-stat-oval { width: auto; height: auto; }
  .au-stat-num { font-size: 52px; }
}
@media (max-width: 768px) {
  .au-hero { padding: 60px 24px; gap: 40px; }
  .au-tagline-block { text-align: center; }
  .au-cta-top { flex-direction: column; min-height: unset; }
  .au-cta-img-wrap { width: 100%; align-self: auto; }
  .au-cta-content { padding: 40px 24px; }
  .au-stat-oval { width: 180px; height: 90px; }
  .au-hero-stats .au-stat-oval { width: auto; height: auto; }
  .au-stat-num { font-size: 42px; }
}
@media (max-width: 768px) {
  .au-hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); place-items: center; }
  .au-hero-stats .au-stat-oval { transform: none; width: 100%; height: auto; aspect-ratio: 1; flex: none; max-width: none; border-radius: 50%; }
}
@media (max-width: 480px) {
  .au-stat-num { font-size: 36px; }
}

/* ═══════════════════════════════════════════════════════════════
   MYSTERY BOXES PAGE
═══════════════════════════════════════════════════════════════ */

/* MB tier nav strip (horizontal row, below hero ticker) */
.mb-tier-nav { display: flex; flex-direction: row; gap: var(--gap); padding: var(--space-component) var(--gutter); }

/* How it works */
.mb-how { padding: var(--space-section) clamp(var(--gutter), calc(50vw - 40rem), 15%); background: var(--white); }
.mb-section-label { font-family: var(--font-body); font-size: var(--text-label); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--coral); display: block; margin-bottom: var(--gap); }
.mb-how__header { margin-bottom: var(--space-component); }
.mb-how__title { font-family: var(--font-display); font-size: var(--text-heading); line-height: 1.0; margin: 0; }
.mb-how__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.mb-how__card { background: var(--yellow); padding: var(--space-component); display: flex; flex-direction: column; gap: var(--space-element); position: relative; }
.mb-how__icon-wrap { width: 80px; height: 80px; background: var(--pink); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--black); position: absolute; top: var(--space-element); right: var(--space-element); }
.mb-how__num { font-family: var(--font-display); font-size: var(--text-heading); line-height: 1; color: var(--black); }
.mb-how__name { font-family: var(--font-body); font-size: var(--text-subheading); font-weight: 800; text-transform: uppercase; line-height: 1.1; color: var(--black); }
.mb-how__body { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.5; color: var(--black); margin: 0; }

/* Choose your box */
.mb-choose { padding: var(--space-section) clamp(var(--gutter), calc(50vw - 40rem), 15%); background: var(--pink); text-align: center; }
.mb-choose__header { margin-bottom: var(--space-section); }
.mb-choose__title { font-family: var(--font-display); font-size: var(--text-heading); line-height: 0.9; margin: 0; color: var(--black); }
.mb-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); align-items: start; }

/* Card base */
.mb-card { position: relative; display: flex; flex-direction: column; overflow: visible; min-width: 0; container-type: inline-size; }
.mb-card--featured { margin-top: calc(var(--space-component) * -1); }

/* Question mark badge */
.mb-card__qmark { position: absolute; top: -44px; left: 50%; transform: translateX(-50%); width: 88px; height: 88px; z-index: 2; pointer-events: none; }
.mb-card__qmark img { width: 100%; height: 100%; object-fit: contain; }

/* Card head */
.mb-card__head { padding: calc(var(--space-component) + 36px) var(--space-component) var(--space-component); display: flex; flex-direction: column; gap: var(--space-element); text-align: center; }
.mb-card-badge { font-family: 'Barlow Condensed', sans-serif; font-size: var(--text-body); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.mb-card-name { font-family: var(--font-display); font-size: clamp(1rem, 9cqw, 3.5rem); line-height: 0.95; white-space: nowrap; }
.mb-card-tagline { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.4; }

/* Card body */
.mb-card__body { padding: var(--space-component); display: flex; flex-direction: column; gap: var(--space-element); flex: 1; text-align: left; }
.mb-card-price { display: flex; align-items: baseline; justify-content: center; gap: var(--gap); }
.mb-card-price__amount { font-family: var(--font-display); font-size: clamp(1.5rem, 9cqw, 3.5rem); line-height: 1; }
.mb-card-per { font-family: var(--font-body); font-size: var(--text-body-lg); font-weight: 500; }
.mb-card-value { display: block; text-align: center; padding: var(--gap) var(--space-element); font-family: var(--font-body); font-size: var(--text-body); font-weight: 800; }
.mb-card-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--gap); flex: 1; }
.mb-card-items li { display: flex; align-items: center; gap: var(--gap); font-family: var(--font-body); font-size: var(--text-body); font-weight: 700; text-transform: uppercase; line-height: 1.2; }
.mb-card-img { display: flex; justify-content: center; padding: var(--space-element) 0; }
.mb-card-img img { width: 65%; max-width: 260px; object-fit: contain; }
.mb-card-btn { display: block; text-align: center; }

/* STARTER — black / green */
.mb-card--starter .mb-card__head { background: var(--black); color: var(--white); }
.mb-card--starter .mb-card__body { background: var(--black); color: var(--white); }
.mb-card--starter .mb-card-badge { color: var(--white); opacity: .6; }
.mb-card--starter .mb-card-name { color: var(--green); }
.mb-card--starter .mb-card-value { background: var(--green); color: var(--white); }
.mb-card--starter .mb-card-items li i { color: var(--green); }

/* ULTIMATE — yellow head / coral body */
.mb-card--ultimate .mb-card__head { background: var(--yellow); color: var(--black); }
.mb-card--ultimate .mb-card__body { background: var(--coral); color: var(--white); }
.mb-card--ultimate .mb-card-badge { color: var(--black); opacity: .6; }
.mb-card--ultimate .mb-card-name { color: var(--coral); }
.mb-card--ultimate .mb-card-value { background: var(--yellow); color: var(--coral); }
.mb-card--ultimate .mb-card-price__amount { color: var(--white); }
.mb-card--ultimate .mb-card-per { color: var(--white); }
.mb-card--ultimate .mb-card-items li i { color: var(--yellow); }

/* SESSIONS — black / blue */
.mb-card--sessions .mb-card__head { background: var(--black); color: var(--white); }
.mb-card--sessions .mb-card__body { background: var(--black); color: var(--white); }
.mb-card--sessions .mb-card-badge { color: var(--white); opacity: .6; }
.mb-card--sessions .mb-card-name { color: var(--blue); }
.mb-card--sessions .mb-card-value { background: var(--blue); color: var(--white); }
.mb-card--sessions .mb-card-items li i { color: var(--blue); }

/* What's inside */
.mb-inside { padding: var(--space-section) clamp(var(--gutter), calc(50vw - 40rem), 15%); background: var(--white); border-top: var(--border); text-align: center; }
.mb-inside__header { margin-bottom: var(--space-component); }
.mb-inside__sub { font-family: var(--font-body); font-size: var(--text-body-lg); color: #666; margin: var(--gap) 0 0; }
.mb-inside-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-component); }
.mb-inside-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-element); }
.mb-inside-circle { width: 75%; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mb-inside-circle img { width: 75%; height: 75%; object-fit: contain; }
.mb-inside-name { font-family: var(--font-body); font-size: var(--text-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.mb-inside-sub { font-family: var(--font-body); font-size: var(--text-body); color: #666; }

/* XP strip */
.mb-xp-strip { background: var(--yellow); border-top: var(--border); border-bottom: var(--border); padding: var(--space-element) var(--gutter); display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; justify-content: center; }
.mb-xp-bolt { display: flex; align-items: center; color: var(--black); }
.mb-xp-text { font-family: var(--font-body); font-size: var(--text-body-lg); font-weight: 600; }
.mb-xp-link { font-family: var(--font-body); font-weight: 800; color: var(--black); text-decoration: underline; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════
   REWARDS / MARKETING PAGE COMPONENTS (.rw-*)
   Shared between /rewards/, /hall-of-fame/ and any future
   marketing page. Tokens-first; mirrors the design system.
   ════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.rw-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: var(--space-component);
  padding: var(--space-section) var(--gutter) var(--space-component);
  background: var(--black);
  min-height: 60vh;
  overflow: hidden;
}
.rw-hero::before {
  content: "";
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(253, 93, 45, 0.22), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.rw-hero-inner,
.rw-hero-visual { position: relative; z-index: 1; }
.rw-hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--gap);
}
.rw-hero-title { margin: 0 0 var(--space-element); }
.rw-title-line1,
.rw-title-line2,
.rw-title-line3 {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
}
.rw-title-line1 { font-size: var(--text-hero);                  color: var(--white); }
.rw-title-line2 { font-size: clamp(2rem, 6vw, 4.5rem);          color: var(--coral); }
.rw-title-line3 { font-size: clamp(2rem, 6vw, 4.5rem);          color: var(--yellow); }
.rw-hero-sub {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 var(--space-element);
  max-width: 40ch;
}
.rw-hero-btns {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
}
.rw-hero .btn-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}
.rw-hero .btn-outline:hover {
  background: var(--white);
  color: var(--black);
  box-shadow: 3px 3px 0 var(--coral);
}

/* Badge stack — sticker aesthetic with hard offset shadows */
.rw-badge-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: flex-end;
}
.rw-hs-badge {
  display: inline-block;
  padding: 0.875rem 1.75rem 0.625rem;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}
.rw-hs-badge:hover {
  transform: translate(-2px, -2px) rotate(0deg);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
}
.rw-hs--rookie  { background: var(--pink);   color: var(--green);  transform: rotate(2deg); }
.rw-hs--regular { background: var(--green);  color: var(--yellow); transform: rotate(-2deg); }
.rw-hs--legend  { background: var(--blue);   color: var(--pink);   transform: rotate(1.5deg); }
.rw-hs--og      { background: var(--yellow); color: var(--blue);   transform: rotate(-1.5deg); }

@media (max-width: 768px) {
  .rw-hero {
    grid-template-columns: 1fr;
    padding: var(--space-component) var(--gutter);
    min-height: auto;
    gap: var(--space-element);
  }
  .rw-hero::before { right: -30%; width: 80%; }
  .rw-badge-stack {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
  }
}

/* ── Shared marketing section base ── */
.rw-section { padding: var(--space-component) var(--gutter); }
.rw-section--dark { background: var(--black); color: var(--white); }
.rw-section-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: var(--gap);
}
.rw-section--dark .rw-section-label { color: var(--yellow); opacity: 0.85; }
.rw-section-title {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 var(--gap);
}
.rw-section--dark .rw-section-title { color: var(--white); }
.rw-section-sub {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.65);
  margin: 0 0 var(--space-element);
  max-width: 60ch;
}
.rw-section--dark .rw-section-sub { color: rgba(255, 255, 255, 0.65); }

/* ── Tier chip — canonical rank palette (shared across pages) ── */
.sb-tier-chip {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.sb-tier-chip--rookie  { background: var(--pink);   color: var(--green); }
.sb-tier-chip--regular { background: var(--green);  color: var(--yellow); }
.sb-tier-chip--legend  { background: var(--blue);   color: var(--pink); }
.sb-tier-chip--og      { background: var(--yellow); color: var(--blue); }

/* ════════════════════════════════════════════════════════════
   MY ACCOUNT → RANK DROPS TAB
   Used by woocommerce/myaccount/deals.php
   ════════════════════════════════════════════════════════════ */
.sb-deals-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}
.sb-deals-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-element);
  align-items: center;
  padding: var(--space-element);
  background: var(--black);
  color: var(--white);
}
.sb-deals-hero-text h3 {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 var(--gap);
  color: var(--yellow);
}
.sb-deals-hero-text p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  max-width: 50ch;
}
.sb-deals-progress-card {
  text-align: right;
  padding-left: var(--space-element);
  border-left: 2px solid rgba(255, 255, 255, 0.15);
}
.sb-deals-progress-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.sb-deals-progress-num {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--coral);
  margin-top: 0.25rem;
}
.sb-deals-progress-sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.25rem;
}
@media (max-width: 700px) {
  .sb-deals-hero { grid-template-columns: 1fr; }
  .sb-deals-progress-card { text-align: left; padding-left: 0; border-left: none; border-top: 2px solid rgba(255,255,255,0.15); padding-top: var(--gap); }
}

.sb-deals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 900px) { .sb-deals-grid { grid-template-columns: 1fr; } }

.sb-deal-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--space-element);
  background: var(--white);
  border: 2px solid var(--black);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sb-deal-card.is-unlocked { box-shadow: 4px 4px 0 var(--yellow); }
.sb-deal-card.is-claimed { background: var(--grey-light); opacity: 0.92; }
.sb-deal-card.is-locked  { opacity: 0.75; }
.sb-deal-card.is-expired { opacity: 0.5; }

.sb-deal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}
.sb-deal-card-status {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(21, 21, 21, 0.65);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.sb-deal-card.is-unlocked .sb-deal-card-status { color: var(--coral); }
.sb-deal-card.is-claimed .sb-deal-card-status  { color: var(--green); }

.sb-deal-prize {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sb-deal-prize-amt {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--coral);
}
.sb-deal-currency { font-size: 0.55em; vertical-align: top; opacity: 0.6; }
.sb-deal-prize-lbl {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(21, 21, 21, 0.55);
}

.sb-deal-product {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--gap);
  background: var(--grey-light);
  border: 1px solid rgba(21, 21, 21, 0.1);
}
.sb-deal-product-img { flex-shrink: 0; line-height: 0; }
.sb-deal-product-img img { width: 64px; height: 64px; object-fit: cover; display: block; }
.sb-deal-product-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.sb-deal-product-name {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--black);
  text-decoration: none;
}
.sb-deal-product-name:hover { text-decoration: underline; }
.sb-deal-product-price {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(21, 21, 21, 0.6);
}
.sb-deal-product-price .amount { font-weight: 700; }
.sb-deal-no-product {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0;
  padding: var(--gap);
  background: rgba(255, 221, 0, 0.15);
  border-left: 3px solid var(--yellow);
  color: rgba(21, 21, 21, 0.7);
}

.sb-deal-progress {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.sb-deal-progress-bar {
  height: 8px;
  background: rgba(21, 21, 21, 0.1);
  overflow: hidden;
}
.sb-deal-progress-fill {
  height: 100%;
  background: var(--coral);
  transition: width 0.4s ease;
}
.sb-deal-progress-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(21, 21, 21, 0.65);
}
.sb-deal-progress-text strong { color: var(--black); font-weight: 800; }

.sb-deal-claim-btn { width: 100%; }

/* Active state — drop is live, "Add to cart" CTA */
.sb-deal-active {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--gap);
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
}
.sb-deal-active-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}
.sb-deal-active p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0;
  color: inherit;
}
.sb-deal-active .btn { align-self: flex-start; }
.sb-deal-expiry {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(21, 21, 21, 0.6);
  margin-top: 0.25rem;
}
.sb-deal-expiry strong { color: var(--coral); font-weight: 800; }

/* Redeemed state — locked-in win */
.sb-deal-redeemed {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--gap);
  background: var(--green);
  color: var(--white);
  border: 2px solid var(--green);
}
.sb-deal-redeemed strong {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sb-deal-redeemed a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--yellow);
}

/* Expired state */
.sb-deal-expired {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(21, 21, 21, 0.5);
  padding: var(--gap);
  background: rgba(21, 21, 21, 0.05);
  border: 1px dashed rgba(21, 21, 21, 0.25);
  text-align: center;
}

.sb-deals-fine-print {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(21, 21, 21, 0.55);
  line-height: 1.6;
  margin: 0;
}
.sb-deals-fine-print a { color: var(--blue); text-decoration: underline; }

/* ── FAQ Accordion (shared design-system component) ──────────
   Uses HTML <details>/<summary>. Two namespaces map to the same
   ruleset: .sb-faq (canonical, for new pages) and .mb-faq
   (legacy alias kept so page-mystery-boxes.php keeps working). */
.sb-faq,
.mb-faq {
  padding: var(--space-section) clamp(var(--gutter), calc(50vw - 40rem), 15%);
  background: var(--white);
  border-top: var(--border);
  text-align: center;
}
.sb-faq__header,
.mb-faq__header { margin-bottom: var(--space-component); }
.sb-faq-list,
.mb-faq-list {
  margin: 0;
  border-top: var(--border);
  text-align: left;
}
.sb-faq-item,
.mb-faq-item {
  border-bottom: var(--border);
  background: var(--white);
}
.sb-faq-item--featured { background: var(--grey-light); }
.sb-faq-q,
.mb-faq-q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--space-element);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-subheading);
  cursor: pointer;
  user-select: none;
}
.sb-faq-q::-webkit-details-marker,
.mb-faq-q::-webkit-details-marker { display: none; }
.sb-faq-icon,
.mb-faq-icon {
  width: 28px;
  height: 28px;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  transition: background 0.15s;
}
.sb-faq-icon::before,
.mb-faq-icon::before { content: '+'; }
details[open] .sb-faq-icon,
details[open] .mb-faq-icon { background: var(--coral); }
details[open] .sb-faq-icon::before,
details[open] .mb-faq-icon::before { content: '−'; }
.sb-faq-a,
.mb-faq-a {
  padding: 0 var(--space-element) var(--space-element);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  color: #444;
}
.sb-faq-a p { margin: 0 0 var(--gap); }
.sb-faq-a p:last-child { margin-bottom: 0; }
.sb-faq-a a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 1024px) {
  .mb-cards { grid-template-columns: 1fr; }
  .mb-card--featured { margin-top: var(--space-section); }
}
@media (max-width: 768px) {
  .mb-how__grid { grid-template-columns: 1fr; }
  .mb-inside-grid { grid-template-columns: repeat(2,1fr); gap: var(--space-element); }
  .mb-tier-nav { flex-direction: column; }
}

/* Badge card base, tier backgrounds, and OG ::after sheen are defined in
   functions.php inline CSS (wp_add_inline_style on smackbang-main) — that's the
   canonical source. Only the :hover lift stays here (not in inline CSS). */
.sb-badge-card:hover { box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.65); }

/* ── Inner card elements ── */
.sb-bc-bleed-text {
  font-family: var(--font-display);
  position: absolute;
  text-transform: uppercase;
  line-height: 0.85;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.sb-bc-cutout {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.15));
}

.sb-bc-star {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.sb-bc-halftone {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#0c61ad 25%, transparent 25%);
  background-size: 6px 6px;
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}

.sb-bc-xp-bar {
  position: absolute;
  bottom: 48px;
  left: 20px;
  right: 20px;
  height: 6px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  overflow: hidden;
  z-index: 20;
}
.sb-bc-xp-fill {
  height: 100%;
  background: #FFDD00;
  border-radius: 3px;
}

.sb-bc-labels {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 20;
  text-transform: uppercase;
  pointer-events: none;
}
.sb-bc-label-rank {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.sb-bc-label-center {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

@media (max-width: 600px) {
  .sb-badge-card { width: 260px; height: 364px; }
  .sb-bc-bleed-text { transform-origin: top left; }
}

/* ─── Referral CTA partial (template-parts/referral-cta.php) ──────────────── */
.sb-referral-cta {
  background: var(--coral);
  color: var(--white);
  padding: var(--space-component);
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}
.sb-referral-cta__title {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  line-height: 1;
  letter-spacing: -0.01em;
}
.sb-referral-cta__sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--white);
  opacity: 0.92;
}
.sb-referral-cta__sub strong { font-weight: 700; }
.sb-referral-cta__link-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap);
  align-items: stretch;
}
.sb-referral-cta__url {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--black);
  padding: var(--input-py) var(--input-px);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  width: 100%;
  min-width: 0;
}
.sb-referral-cta__url:focus { outline: none; border-color: var(--black); }
.sb-referral-cta__copy { white-space: nowrap; }
.sb-referral-cta__copied {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: calc(var(--gap) * -1 + 4px);
}
.sb-referral-cta__share {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.sb-referral-cta__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.sb-referral-cta__share-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--black);
  color: var(--white);
}
.sb-referral-cta__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  padding-top: var(--space-element);
  border-top: 1px solid rgba(255,255,255,0.25);
}
.sb-referral-cta__stats > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sb-referral-cta__stats strong {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: 1;
}
.sb-referral-cta__stats span {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
  margin-top: 4px;
}
.sb-referral-cta__more {
  color: var(--white);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sb-referral-cta__more:hover { color: var(--yellow); }

.sb-thankyou-section--referral { padding: 0; }
.sb-thankyou-section--referral > .sb-referral-cta { width: 100%; }

@media (max-width: 600px) {
  .sb-referral-cta__link-row { grid-template-columns: 1fr; }
  .sb-referral-cta__share-btn span { display: none; }
  .sb-referral-cta__share-btn { padding: 10px 12px; }
}

/* ─── Promo Event boost chip + site-wide banner ───────────────────────────── */
.sb-boost-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  background: var(--yellow);
  color: var(--black);
  padding: 2px 7px 3px;
  font-size: 0.78em;
  margin-left: 6px;
  vertical-align: baseline;
  white-space: nowrap;
  position: relative;
  transform-origin: center;
  animation: sbBoostPulse 1.8s ease-in-out infinite;
  box-shadow: 1px 1px 0 var(--black);
}
.sb-boost-chip--xp     { background: var(--green);  color: var(--white); }
.sb-boost-chip--points { background: var(--coral);  color: var(--white); }
.sb-boost-chip--lg     { font-size: 1em; padding: 4px 10px 5px; }
.sb-boost-chip--tag    { font-size: 0.65em; padding: 1px 5px 2px; margin-left: 4px; box-shadow: none; }
.sb-boost-chip[data-mult^="1."] { animation-duration: 2.4s; }

@keyframes sbBoostPulse {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.08) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sb-boost-chip { animation: none; }
}

/* Site-wide event banner — sits above header, below announcement marquee */
.sb-event-bar {
  background: var(--yellow);
  color: var(--black);
  padding: 4px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  border-bottom: 1px solid var(--black);
  position: relative;
  z-index: 10000;
  text-align: center;
  min-height: 32px;
}
.sb-event-bar__inner {
  /* Defensive resets — guard against collisions with .sb-promo-banner__inner in campaign.css */
  padding: 0 !important;
  margin: 0;
  max-width: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.sb-event-bar__chip {
  font-family: var(--font-display);
  font-size: 1.35em;
  line-height: 1;
  background: var(--black);
  color: var(--yellow);
  padding: 2px 7px 3px;
  letter-spacing: -0.02em;
  box-shadow: 2px 2px 0 var(--white);
  animation: sbBoostPulse 1.8s ease-in-out infinite;
}
.sb-event-bar__title { font-weight: 800; }
.sb-event-bar__scope {
  background: var(--black);
  color: var(--white);
  padding: 2px 7px 3px;
  font-size: 0.85em;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.sb-event-bar__countdown {
  font-family: var(--font-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  opacity: 0.85;
  text-transform: none;
  letter-spacing: 0;
}
.sb-event-bar__close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--black);
  border: 0;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  opacity: 0.6;
  transition: opacity 0.15s, transform 0.15s;
}
.sb-event-bar__close:hover { opacity: 1; transform: translateY(-50%) scale(1.15); }
.sb-event-bar__close:focus-visible { outline: 2px solid var(--black); outline-offset: 1px; opacity: 1; }

@media (max-width: 600px) {
  .sb-event-bar { padding: 5px 36px 5px var(--gap); }
  .sb-event-bar__inner { gap: 6px; font-size: 11px; }
  .sb-event-bar__chip { font-size: 1.1em; padding: 1px 6px 2px; }
  .sb-event-bar__close { right: 6px; width: 24px; height: 24px; font-size: 20px; }
}