/* ----- design_tokens_reset_base ----- */
/* ============================================================================
   DESIGN TOKENS
   ============================================================================ */
:root {
  --c-cream:        #F4F5F3;
  --c-cream-deep:   #E8E9E5;
  --c-cream-warm:   #D4D5D0;
  --c-forest:       #2E5D4E;
  --c-forest-deep:  #1F4338;
  --c-charcoal:     #2B2B2B;
  --c-text:         #3A3A3A;
  --c-muted:        #7A7363;
  --c-border:       #DCDDD8;
  --c-white:        #FFFFFF;
  --c-tan:          #D4A574;
  --c-sage:         #8A9580;

  --f-display: 'Playfair Display', Georgia, serif;
  --f-body:    'DM Sans', system-ui, sans-serif;
  --f-script:  'Caveat', cursive;

  --max-w: 1475px;
  --pad-x: 48px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   RESET + BASE
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--c-cream);
  color: var(--c-charcoal);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease); }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--c-tan); outline-offset: 3px; }

/* ----- icon_system ----- */
/* ============================================================================
   ICON SYSTEM
   ============================================================================ */
.icon {
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
.icon-xs  { width: 12px; height: 12px; }
.icon-sm  { width: 14px; height: 14px; }
/* Decorative — larger sizes use thinner strokes so they read elegantly */
.icon-deco-md   { width: 60px;  height: 60px;  stroke-width: 0.9; }
.icon-deco-feat { width: 140px; height: 140px; stroke-width: 0.45; }
.icon-deco-cat  { width: 80px;  height: 80px;  stroke-width: 0.7; }

/* Star rating glyphs */
.stars {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  color: var(--c-tan);
  line-height: 1;
}
.stars .icon { width: 14px; height: 14px; }
.star-fill  { fill: currentColor; stroke: currentColor; stroke-width: 1; }
.star-empty { fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ----- announcement ----- */
/* ============================================================================
   ANNOUNCEMENT
   ============================================================================ */
.sp-announce {
  background: var(--c-forest);
  color: var(--c-cream);
  padding: 9px var(--pad-x);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.sp-announce .ann-item { display: inline-flex; align-items: center; gap: 7px; margin: 0 14px; }
.sp-announce .ann-item .icon { width: 14px; height: 14px; }
.sp-announce .sep { opacity: 0.5; }

/* ----- header ----- */
/* ============================================================================
   HEADER
   ============================================================================ */
.sp-header {
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(180%) blur(8px);
  background: var(--c-white);
  padding: 0 var(--pad-x);
}
.sp-header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
}
.sp-logo { display: flex; align-items: center; flex-shrink: 0; }
.sp-logo .logo-img {
  height: 36px;
  width: auto;
  display: block;
}

.sp-search {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 460px;
  z-index: 1;
}
.sp-search input {
  width: 100%;
  padding: 13px 18px 13px 46px;
  border: 1px solid var(--c-border);
  border-radius: 30px;
  background: var(--c-white);
  font-family: var(--f-body);
  font-size: 14px;
  outline: none;
  transition: border 0.2s var(--ease);
}
.sp-search input:focus {
  border-color: var(--c-tan);
  box-shadow: 0 0 0 3px rgba(184,84,80,0.1);
}
.sp-search-btn {
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--c-muted);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
  padding: 0;
  z-index: 2;
}
.sp-search-btn:hover { background: var(--c-cream); color: var(--c-tan); }
.sp-search-icon {
  width: 16px; height: 16px;
  pointer-events: none;
}

.sp-header-icons { display: flex; gap: 6px; margin-left: auto; }
.sp-header-icons .sp-search-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--c-charcoal);
  transition: background 0.2s var(--ease);
}
.sp-header-icons .sp-search-toggle:hover { background: var(--c-cream-deep); }
.sp-header-icons .sp-search-toggle .icon { width: 20px; height: 20px; }
.sp-header-icons a, .sp-header-icons button {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--c-charcoal);
  position: relative;
  transition: background 0.2s var(--ease);
}
.sp-header-icons a:hover, .sp-header-icons button:hover { background: var(--c-cream-deep); }
.sp-header-icons .icon { width: 20px; height: 20px; }
.sp-header-icons .badge {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--c-tan);
  color: var(--c-white);
  font-size: 10px;
  font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* ----- nav_mega_mobilenav ----- */
/* ============================================================================
   NAV  +  MEGA MENU  +  MOBILE NAV
   ============================================================================ */
.sp-nav {
  position: sticky;
  top: 88px;
  z-index: 49;
  background: var(--c-white);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--c-border);
}
.sp-nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  justify-content: center;
  gap: 4px;
}
.nav-item-wrap {
  position: static;
  display: flex;
  align-items: stretch;
}
.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 18px 16px;
  font-weight: 500;
  font-size: 14px;
  color: var(--c-charcoal);
  position: relative;
  cursor: pointer;
  transition: color 0.2s var(--ease);
  white-space: nowrap;
}
.nav-item .nav-chev {
  width: 11px; height: 11px;
  transition: transform 0.25s var(--ease);
  opacity: 0.6;
}
.nav-item-wrap:hover .nav-chev { transform: rotate(180deg); opacity: 1; }
.nav-item::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px;
  bottom: 12px;
  height: 2px;
  background: var(--c-tan);
  transform: scaleX(0);
  transition: transform 0.25s var(--ease);
}
.nav-item:hover { color: var(--c-tan); }
.nav-item:hover::after { transform: scaleX(1); }
.nav-item.sale { color: var(--c-tan); font-weight: 600; }
.nav-item.sale::after { transform: scaleX(1); opacity: 0.5; }

/* Mega menu panel — full width below nav */
.nav-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--c-white);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 16px 32px -16px rgba(46,93,78,0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  z-index: 47;
}
/* CSS-only hover via :has() */
.sp-nav:has(.nav-item-wrap[data-menu="home-decor"]:hover)  .nav-mega[data-mega="home-decor"],
.sp-nav:has(.nav-item-wrap[data-menu="electronics"]:hover) .nav-mega[data-mega="electronics"],
.sp-nav:has(.nav-item-wrap[data-menu="apparel"]:hover)     .nav-mega[data-mega="apparel"],
.sp-nav:has(.nav-item-wrap[data-menu="jewelry"]:hover)     .nav-mega[data-mega="jewelry"],
.sp-nav:has(.nav-item-wrap[data-menu="kitchen"]:hover)     .nav-mega[data-mega="kitchen"],
.nav-mega:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-mega-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 36px var(--pad-x) 40px;
}
.mega-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 308px;
  gap: 36px;
}
/* Adaptive: 2 categories + feature card */
.mega-cols:has(> .mega-col:nth-child(2):nth-last-child(2)) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 308px;
}
/* Adaptive: 1 category + feature card */
.mega-cols:has(> .mega-col:first-child:nth-last-child(2)) {
  grid-template-columns: minmax(0, 1fr) 308px;
}
.mega-col h6 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 11px;
  color: var(--c-tan);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.mega-col ul li { margin-bottom: 11px; }
.mega-col ul li a {
  font-size: 14px;
  color: var(--c-charcoal);
  font-weight: 500;
  transition: color 0.15s var(--ease);
}
.mega-col ul li a:hover { color: var(--c-tan); }

.mega-feature {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-cream);
  transition: transform 0.3s var(--ease);
  text-decoration: none;
  align-self: start;
}
.mega-feature:hover { transform: translateY(-4px); }
.mega-feature-img {
  aspect-ratio: 4 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 12px 0;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  color: var(--c-muted);
}
.mega-feature-img .img-placeholder {
  font-size: 13px;
  letter-spacing: 0.4px;
  font-style: italic;
}
.mega-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mega-feature-text { padding: 14px 14px 18px; }
.mega-feature-text .eyebrow {
  font-family: var(--f-script);
  font-size: 18px;
  color: var(--c-tan);
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}
.mega-feature-text h5 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.25;
  min-height: calc(5px * 1.25 * 2); /* reserve 2 lines so all cards match height */
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.mega-feature-text p {
  font-size: 12px;
  color: var(--c-muted);
}

/* Hamburger toggle (mobile only) */
.sp-menu-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--c-charcoal);
  transition: background 0.2s var(--ease);
  flex-shrink: 0;
}
.sp-menu-toggle:hover { background: var(--c-cream-deep); }
.sp-menu-toggle .icon { width: 22px; height: 22px; }

/* Mobile drawer */
.sp-mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43,43,43,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
  z-index: 102;
}
.sp-mobile-nav-overlay.open,
#mobile-nav-cb:checked ~ .sp-mobile-nav-overlay { opacity: 1; pointer-events: auto; }

.sp-mobile-nav {
  position: fixed;
  top: 0; left: 0;
  width: 360px;
  max-width: 88vw;
  height: 100vh;
  background: var(--c-cream);
  z-index: 103;
  transform: translateX(-100%);
  transition: transform 0.35s var(--ease);
  display: flex;
  flex-direction: column;
}
.sp-mobile-nav.open,
#mobile-nav-cb:checked ~ .sp-mobile-nav { transform: translateX(0); }

.mn-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.mn-title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
}
.mn-title em { font-style: italic; color: var(--c-tan); }
.mn-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-charcoal);
  transition: background 0.2s var(--ease);
}
.mn-close:hover { background: var(--c-cream-deep); }
.mn-close .icon { width: 20px; height: 20px; }

.mn-panels {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.mn-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: var(--c-cream);
  transform: translateX(100%);
  transition: transform 0.3s var(--ease);
  padding-bottom: 16px;
}
.mn-panel.active { transform: translateX(0); }
.mn-panel-root { transform: translateX(0); }

.mn-list li {
  border-bottom: 1px solid var(--c-border);
}
.mn-list li:last-child { border-bottom: none; }
.mn-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-charcoal);
  font-family: var(--f-body);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s var(--ease);
  text-decoration: none;
}
.mn-item:hover { background: var(--c-cream-deep); }
.mn-item .icon { width: 14px; height: 14px; color: var(--c-muted); }
.mn-item-sale { color: var(--c-tan); font-weight: 600; }

.mn-back {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--f-body);
  background: var(--c-cream-deep);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s var(--ease);
}
.mn-back .icon { width: 14px; height: 14px; }
.mn-back:hover { background: var(--c-border); }

.mn-cat-title {
  padding: 22px 22px 4px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.01em;
}
.mn-cat-title em { font-style: italic; color: var(--c-tan); }
.mn-shop-all {
  display: block;
  margin: 14px 22px 8px;
  padding: 12px 16px;
  background: var(--c-charcoal);
  color: var(--c-cream);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  transition: background 0.2s var(--ease);
  text-decoration: none;
}
.mn-shop-all:hover { background: var(--c-tan); color: var(--c-cream); }

.mn-section {
  padding: 18px 22px 6px;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-tan);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mn-meta {
  margin-top: auto;
  padding: 22px;
  border-top: 1px solid var(--c-border);
  background: var(--c-cream-deep);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  flex-shrink: 0;
}
.mn-meta a {
  font-size: 13px;
  color: var(--c-charcoal);
  font-weight: 500;
}
.mn-meta a:hover { color: var(--c-tan); }

/* ----- hero ----- */
/* ============================================================================
   HERO
   ============================================================================ */
.sp-hero {
  padding: 50px var(--pad-x) 50px;
  background:
    /* Subtle dot grid (paper texture) */
    radial-gradient(circle at 1px 1px, rgba(168,170,165,0.22) 1px, transparent 0),
    /* Warm tan ambient glow behind text (left side) */
    radial-gradient(ellipse 700px 520px at 18% 32%, var(--c-cream-deep), transparent 62%),
    /* Cool sage glow behind moodboard (right side) */
    radial-gradient(ellipse 620px 700px at 86% 70%, rgba(138,149,128,0.16), transparent 60%),
    /* Soft top light (suggests overhead lighting) */
    linear-gradient(180deg, rgba(255,255,255,0.45) 0%, transparent 38%),
    /* Base sage-gray */
    var(--c-white);
  background-size: 24px 24px, auto, auto, auto, auto;
  position: relative;
  overflow: hidden;
}
/* Decorative hand-drawn arc — top-right accent */
.sp-hero::before {
  content: '';
  position: absolute;
  top: 50px;
  right: -90px;
  width: 360px;
  height: 360px;
  border: 1.5px dashed rgba(212,165,116,0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
/* Soft accent shape — bottom-left, mirrors the arc */
.sp-hero::after {
  content: '';
  position: absolute;
  bottom: -180px;
  left: -120px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(138,149,128,0.18), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.sp-hero-inner {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.sp-hero-eyebrow {
  display: inline-block;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 17px;
  color: var(--c-forest);
  margin-bottom: 20px;
  position: relative;
  padding-left: 44px;
}
.sp-hero-eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 32px; height: 1px;
  background: var(--c-tan);
}
.sp-hero h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 74px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 26px;
}
.sp-hero h1 em {
  font-style: italic;
  color: var(--c-tan);
  font-weight: 600;
  position: relative;
  display: inline-block;
}
.sp-hero h1 em::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  bottom: -6px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 8' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M2 5 Q50 1 100 4 T198 3' stroke='%23B85450' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.7'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}
.sp-hero .sub {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: var(--c-muted);
  max-width: 750px;
  margin-bottom: 32px;
}
.sp-hero-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sp-btn-primary {
  background: var(--c-forest);
  color: var(--c-white);
  padding: 15px 32px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: all 0.2s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sp-btn-primary:hover {
  background: #e0b485;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(212,165,116,0.45);
}
.sp-btn-link {
  font-weight: 500;
  font-size: 14px;
  color: var(--c-forest);
  padding: 15px 8px;
  border-bottom: 1px solid var(--c-forest);
  transition: all 0.2s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sp-btn-link:hover { color: var(--c-tan); border-color: var(--c-tan); }

.sp-hero-stats {
  display: flex; gap: 36px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--c-border);
  max-width: 460px;
}
.sp-hero-stats .stat .num {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.sp-hero-stats .stat .num em { font-style: italic; color: var(--c-tan); font-weight: 400; }
.sp-hero-stats .stat .lbl {
  font-size: 12px;
  color: var(--c-muted);
  margin-top: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sp-hero-visual {
  position: relative;
  max-width: 480px;
  justify-self: end;
  width: 100%;
  aspect-ratio: 1 / 0.95;
}

/* Polaroid card */
.sp-hero-pol {
  position: absolute;
  display: block;
  background: var(--c-white);
  padding: 12px 12px 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    0 8px 16px -6px rgba(46,93,78,0.18),
    0 18px 32px -16px rgba(0,0,0,0.12);
  transition: transform 0.4s var(--ease);
  animation: hero-float 7s ease-in-out infinite;
}
.sp-hero-pol .pol-img {
  aspect-ratio: 1;
  width: 100%;
  background: linear-gradient(135deg, #F4F5F3, #F4F5F3);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-charcoal);
}
.sp-hero-pol .pol-img .icon {
  width: 40%; height: 40%;
  stroke-width: 0.85;
}
.sp-hero-pol .pol-caption {
  text-align: center;
  margin-top: 10px;
}
.sp-hero-pol .pol-name {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 12px;
  color: var(--c-charcoal);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 3px;
}
.sp-hero-pol .pol-price {
  display: block;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
}
.sp-hero-pol .pol-price .was {
  text-decoration: line-through;
  color: var(--c-muted);
  margin-right: 6px;
  opacity: 0.6;
}
.sp-hero-pol .pol-price .now {
  color: var(--c-charcoal);
  font-weight: 600;
}
.sp-hero-pol.main .pol-name { font-size: 14px; margin-bottom: 4px; }
.sp-hero-pol.main .pol-price { font-size: 12px; }

/* Washi tape */
.sp-hero-pol .pol-tape {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 64px; height: 20px;
  background: rgba(212,165,116,0.55);
  border-left: 1px solid rgba(184,135,80,0.3);
  border-right: 1px solid rgba(184,135,80,0.3);
  z-index: 1;
}

/* Sticker tag */
.sp-hero-pol .pol-sticker {
  position: absolute;
  top: -10px; right: -10px;
  background: var(--c-tan);
  color: var(--c-cream);
  padding: 5px 12px;
  border-radius: 30px;
  font-family: var(--f-script);
  font-size: 15px;
  font-weight: 600;
  transform: rotate(8deg);
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 4px 8px -2px rgba(184,84,80,0.4);
}
.sp-hero-pol .pol-sticker.bestseller {
  background: var(--c-charcoal);
  color: var(--c-tan);
  transform: rotate(-6deg);
  top: -10px; left: -8px; right: auto;
}

/* Main featured polaroid */
.sp-hero-pol.main {
  width: 50%;
  top: 22%;
  left: 26%;
  transform: rotate(-3deg);
  animation-delay: 0s;
  z-index: 2;
}
.sp-hero-pol.main:hover { transform: rotate(0) scale(1.03) !important; z-index: 6; }

/* Top-right small polaroid */
.sp-hero-pol.p2 {
  width: 30%;
  top: 4%;
  right: 4%;
  transform: rotate(5deg);
  animation-delay: 1.5s;
  z-index: 3;
}
.sp-hero-pol.p2:hover { transform: rotate(0) scale(1.05) !important; z-index: 6; }

/* Bottom-right small polaroid */
.sp-hero-pol.p3 {
  width: 28%;
  bottom: 4%;
  right: 5%;
  transform: rotate(-6deg);
  animation-delay: 3s;
  z-index: 3;
}
.sp-hero-pol.p3:hover { transform: rotate(0) scale(1.05) !important; z-index: 6; }

@keyframes hero-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

/* Round stamp badge */
.sp-hero-stamp {
  position: absolute;
  top: 4%;
  left: 5%;
  width: 110px;
  height: 110px;
  color: var(--c-tan);
  z-index: 4;
  transform: rotate(-12deg);
  animation: stamp-wobble 9s ease-in-out infinite;
}
.sp-hero-stamp svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sp-hero-stamp .stamp-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 0.95;
  pointer-events: none;
}
.sp-hero-stamp .stamp-no {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
  opacity: 0.95;
}
.sp-hero-stamp .stamp-mu {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
@keyframes stamp-wobble {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(-7deg); }
}

/* Index card with handwritten note */
.sp-hero-note {
  position: absolute;
  bottom: 14%;
  left: 4%;
  width: 38%;
  background: var(--c-cream);
  padding: 16px 16px 18px;
  transform: rotate(4deg);
  box-shadow: 0 8px 16px -4px rgba(46,93,78,0.18);
  z-index: 4;
  background-image: linear-gradient(transparent 0px, transparent 24px, rgba(184,84,80,0.10) 24px, rgba(184,84,80,0.10) 25px);
  background-size: 100% 25px;
  background-position: 0 6px;
  animation: hero-float 8s ease-in-out infinite;
  animation-delay: 0.5s;
}
.sp-hero-note .note-eyebrow {
  display: block;
  font-family: var(--f-body);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 8px;
  font-weight: 600;
}
.sp-hero-note .note-script {
  display: block;
  font-family: var(--f-script);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--c-charcoal);
}
.sp-hero-note .note-script em {
  color: var(--c-tan);
  font-style: italic;
}
.sp-hero-note .note-pin {
  position: absolute;
  top: -7px; right: 16px;
  width: 14px; height: 14px;
  background: var(--c-tan);
  border-radius: 50%;
  box-shadow:
    inset -2px -2px 4px rgba(0,0,0,0.2),
    0 2px 3px rgba(0,0,0,0.25);
}
.sp-hero-note .note-pin::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 4px; height: 4px;
  background: rgba(255,255,255,0.55);
  border-radius: 50%;
}

/* ----- marquee ----- */
/* ============================================================================
   MARQUEE
   ============================================================================ */
.sp-marquee {
  background: var(--c-cream);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
  padding: 22px 0;
  position: relative;
}
.sp-marquee.terra { background: var(--c-forest); border-color: var(--c-forest); }
.sp-marquee.terra .sp-marquee-track span { color: var(--c-cream); }
.sp-marquee.terra .sp-marquee-track .icon { color: var(--c-cream-warm); }
.sp-marquee-track {
  display: flex;
  gap: 48px;
  align-items: center;
  animation: marquee 38s linear infinite;
  width: max-content;
  white-space: nowrap;
}
.sp-marquee-track span {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 38px;
  color: var(--c-charcoal);
  letter-spacing: -0.01em;
}
.sp-marquee-track .icon { width: 18px; height: 18px; color: var(--c-tan); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ----- trust_bar ----- */
/* ============================================================================
   TRUST BAR
   ============================================================================ */
.sp-trust {
  background: var(--c-cream-deep);
  padding: 22px var(--pad-x);
  display: flex;
  justify-content: center;
  gap: 60px;
  font-size: 13px;
  flex-wrap: wrap;
}
.sp-trust-item { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.sp-trust-item .icon { width: 18px; height: 18px; color: var(--c-forest); }

/* ----- categories_bento ----- */
/* ============================================================================
   CATEGORIES — BENTO GRID
   ============================================================================ */
.sp-categories {
  padding: 80px var(--pad-x);
  background:
    repeating-linear-gradient(135deg,
      transparent 0,
      transparent 16px,
      rgba(244,245,243,0.08) 16px,
      rgba(244,245,243,0.08) 17px),
    var(--c-forest);
}
.sp-categories-inner { max-width: var(--max-w); margin: 0 auto; }
.sp-section-head { text-align: center; margin-bottom: 60px; }
.sp-section-eyebrow {
  font-family: var(--f-script);
  font-size: 26px;
  color: var(--c-tan);
  margin-bottom: 6px;
  display: block;
}
.sp-section-head h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 48px);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 12px;
  color: var(--c-forest);
}
.sp-section-head h2 em { font-style: italic; color: var(--c-tan); position: relative; }
.sp-section-head h2 em .doodle-circle {
  position: absolute;
  inset: -12px -16px;
  pointer-events: none;
}
.sp-section-head h2 em .doodle-circle path { stroke: var(--c-cream); }
.sp-section-head p { font-size: 15px; color: var(--c-muted); max-width: 540px; margin: 0 auto; }

/* Light text in the categories section (dark bg) */
.sp-categories .sp-section-head h2 { color: var(--c-cream); }
.sp-categories .sp-section-head p { color: rgba(244,245,243,0.75); }

.sp-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 20px;
}
.sp-cat {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  display: block;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  transition: transform 0.4s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.sp-cat:hover {
  transform: translateY(-6px);
  border-color: var(--cat-c, var(--c-charcoal));
  box-shadow: 0 18px 30px -14px rgba(0,0,0,0.18);
}
.sp-cat .bg {
  position: absolute; inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 22px 0;
  color: var(--cat-c, var(--c-tan));
  background-size: cover;
  background-position: center;
  transition: transform 0.5s var(--ease);
}
.sp-cat:hover .bg { transform: scale(1.04); }
.sp-cat .bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Bottom accent bar in the per-tile color */
.sp-cat::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cat-c, var(--c-tan));
  z-index: 3;
}
.sp-cat .content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 18px 22px 22px;
  color: var(--c-charcoal);
  z-index: 2;
}
.sp-cat .content h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1.1;
  color: var(--c-charcoal);
}
.sp-cat .content p {
  font-size: 12px;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.sp-cat .content .arrow {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-tan);
  display: inline-flex; gap: 6px; align-items: center;
  transition: gap 0.2s var(--ease);
}
.sp-cat .content .arrow .icon { width: 12px; height: 12px; }
.sp-cat:hover .content .arrow { gap: 12px; }

.sp-cat .sticker {
  position: absolute;
  top: 18px; right: 18px;
  background: var(--c-tan);
  color: var(--c-cream);
  padding: 8px 16px;
  border-radius: 30px;
  font-family: var(--f-script);
  font-size: 18px;
  transform: rotate(8deg);
  z-index: 3;
  white-space: nowrap;
}

.sp-cat.feat { grid-column: span 2; grid-row: span 2; }
.sp-cat.feat .content { padding: 22px 28px 28px; }
.sp-cat.feat .content h3 { font-size: 32px; }
.sp-cat.feat .content p { font-size: 14px; max-width: 320px; }
.sp-cat.feat .bg { padding-top: 36px; }
.sp-cat.wide { grid-column: span 2; }

/* Per-tile color tokens. The .sp-cat-bg-N classes still fill the bg in mega
   menu featured images. In the bento context the .bg is transparent (cards are
   white) and --cat-c on the parent .sp-cat colors the icon, arrow, and accent bar. */
.sp-cat-bg-1 { background: #d4a574; }
.sp-cat-bg-2 { background: #8a9580; }
.sp-cat-bg-3 { background: #c98a8a; }
.sp-cat-bg-4 { background: #c4a890; }
.sp-cat-bg-5 { background: #b85450; }
.sp-cat-bg-6 { background: #a89878; }

.sp-bento .sp-cat-bg-1,
.sp-bento .sp-cat-bg-2,
.sp-bento .sp-cat-bg-3,
.sp-bento .sp-cat-bg-4,
.sp-bento .sp-cat-bg-5,
.sp-bento .sp-cat-bg-6 { background: transparent; }

.sp-cat:has(.sp-cat-bg-1) { --cat-c: #d4a574; }
.sp-cat:has(.sp-cat-bg-2) { --cat-c: #8a9580; }
.sp-cat:has(.sp-cat-bg-3) { --cat-c: #c98a8a; }
.sp-cat:has(.sp-cat-bg-4) { --cat-c: #c4a890; }
.sp-cat:has(.sp-cat-bg-5) { --cat-c: #b85450; }
.sp-cat:has(.sp-cat-bg-6) { --cat-c: #a89878; }

/* ----- product_grid ----- */
/* ============================================================================
   PRODUCT GRID
   ============================================================================ */
.sp-products { padding: 80px var(--pad-x); background: var(--c-white); }
.sp-products.alt { background: var(--c-cream); }
.sp-products-inner { max-width: var(--max-w); margin: 0 auto; }
.sp-prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.sp-prod-card { position: relative; display: block; transition: transform 0.3s var(--ease); }
.sp-prod-card:hover { transform: translateY(-6px); }
.sp-prod-link { display: block; cursor: pointer; }

.sp-prod-card .img-wrap {
  position: relative;
  aspect-ratio: 1;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-charcoal);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.sp-prod-card:hover .img-wrap {
  border-color: var(--c-charcoal);
  box-shadow: 0 8px 20px -10px rgba(46,93,78,0.18);
}
.sp-prod-card .img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-muted);
  font-family: var(--f-body);
  font-size: 13px;
  text-align: center;
  padding: 16px;
  letter-spacing: 0.3px;
}

.sp-prod-card .quick-add {
  position: absolute;
  left: 12px; right: 12px;
  bottom: 12px;
  background: var(--c-forest);
  color: var(--c-cream);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 11px 14px;
  border-radius: 30px;
  text-align: center;
  transform: translateY(calc(100% + 16px));
  transition: transform 0.3s var(--ease);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.sp-prod-card .quick-add .icon { width: 14px; height: 14px; }
.sp-prod-card:hover .quick-add { transform: translateY(0); }
.sp-prod-card .quick-add:hover { background: var(--c-tan); }

.sp-prod-card .badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--c-tan);
  color: var(--c-white);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 20px;
  z-index: 2;
}
.sp-prod-card .badge.new { background: var(--c-forest); }
.sp-prod-card .badge.bestseller { background: var(--c-forest); color: var(--c-white); }

.sp-prod-card .wishlist {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-muted);
  transition: all 0.2s var(--ease);
  z-index: 3;
}
.sp-prod-card .wishlist .icon { width: 16px; height: 16px; }
.sp-prod-card .wishlist:hover { color: var(--c-tan); transform: scale(1.12); }
.sp-prod-card .wishlist.on { color: var(--c-tan); }
.sp-prod-card .wishlist.on .icon { fill: currentColor; stroke: currentColor; }

.sp-prod-card .name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 17px;
  margin-bottom: 4px;
  line-height: 1.3;
}
.sp-prod-card .meta {
  font-size: 12px;
  color: var(--c-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-prod-card .swatches { display: flex; gap: 6px; margin-bottom: 8px; }
.sp-prod-card .swatches .sw {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}
.sp-prod-card .swatches .sw:hover { transform: scale(1.25); }
.sp-prod-card .swatches .sw.active { box-shadow: 0 0 0 1.5px var(--c-charcoal); }

.sp-prod-card .price { font-size: 15px; font-weight: 500; }
.sp-prod-card .price .was { text-decoration: line-through; color: var(--c-muted); margin-right: 8px; font-weight: 400; }
.sp-prod-card .price .now { color: var(--c-charcoal); font-weight: 600; }

.sp-prod-card .stock-hint {
  font-size: 11px;
  color: var(--c-forest);
  font-weight: 500;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sp-prod-card .stock-hint::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-tan);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ----- story ----- */
/* ============================================================================
   STORY
   ============================================================================ */
.sp-story {
  padding: 80px var(--pad-x);
  background: var(--c-white);
  position: relative;
  overflow: hidden;
}
.sp-story::before {
  content: '';
  position: absolute;
  bottom: -100px; right: -100px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(184,84,80,0.1) 0%, transparent 65%);
}
.sp-story-inner {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 72px;
  align-items: center;
}
.sp-story-image {
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-cream);
  position: relative;
  overflow: visible;
}
.sp-story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}
.sp-story-image::after {
  content: 'sourced with care';
  position: absolute;
  bottom: -16px; right: -10px;
  background: var(--c-tan);
  color: var(--c-white);
  padding: 9px 20px;
  border-radius: 30px;
  font-family: var(--f-script);
  font-size: 19px;
  transform: rotate(-3deg);
  white-space: nowrap;
  box-shadow: 0 8px 16px -4px rgba(184,84,80,0.3);
}
.sp-story-text .eyebrow {
  font-family: var(--f-script);
  font-size: 24px;
  color: var(--c-tan);
  margin-bottom: 4px;
}
.sp-story-text h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  margin-bottom: 18px;
  letter-spacing: -0.015em;
}
.sp-story-text h2 em { font-style: italic; color: var(--c-tan); }
.sp-story-text p { font-size: 15px; color: var(--c-text); line-height: 1.7; margin-bottom: 14px; }
.sp-story-text .signature {
  font-family: var(--f-script);
  font-size: 24px;
  color: var(--c-tan);
  margin-top: 18px;
}
.sp-story-text .signature small {
  display: block;
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--c-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ----- ugc_strip ----- */
/* ============================================================================
   UGC INSTAGRAM STRIP
   ============================================================================ */
.sp-ugc { padding: 80px var(--pad-x); background: var(--c-cream); }
.sp-ugc-inner { max-width: var(--max-w); margin: 0 auto; }
.sp-ugc-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 36px;
  gap: 32px;
  flex-wrap: wrap;
}
.sp-ugc-head .left { max-width: 580px; }
.sp-ugc-head .eyebrow {
  font-family: var(--f-script);
  font-size: 24px;
  color: var(--c-tan);
  display: block;
  margin-bottom: 4px;
}
.sp-ugc-head h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.sp-ugc-head h2 em { font-style: italic; color: var(--c-tan); }
.sp-ugc-head .tag { font-size: 13px; color: var(--c-muted); margin-top: 10px; }
.sp-ugc-head .tag strong { color: var(--c-tan); font-weight: 500; }
.sp-ugc-head .ig-link {
  font-size: 13px;
  color: var(--c-charcoal);
  border-bottom: 1px solid var(--c-charcoal);
  padding-bottom: 3px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sp-ugc-head .ig-link:hover { color: var(--c-tan); border-color: var(--c-tan); }

.sp-ugc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.sp-ugc-tile {
  aspect-ratio: 1;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s var(--ease);
}
.sp-ugc-tile:hover { transform: scale(1.04); }
.sp-ugc-tile .img {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-forest);
}

.sp-ugc-bg-1, .sp-ugc-bg-2, .sp-ugc-bg-3,
.sp-ugc-bg-4, .sp-ugc-bg-5, .sp-ugc-bg-6 { background: #ffffff; }

.sp-ugc-tile .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(43,43,43,0.1) 100%);
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 12px;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.sp-ugc-tile:hover .overlay { opacity: 1; }
.sp-ugc-tile .handle { font-size: 11px; color: var(--c-forest); font-weight: 500; }
.sp-ugc-tile .shop {
  background: var(--c-forest);
  color: var(--c-white);
  font-size: 10px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ----- reviews_index ----- */
/* ============================================================================
   REVIEWS
   ============================================================================ */
.sp-reviews { padding: 80px var(--pad-x); background: var(--c-white); }
.sp-reviews-inner { max-width: var(--max-w); margin: 0 auto; }
.sp-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sp-review-card {
  background: var(--c-white);
  padding: 36px 32px;
  border-radius: 14px;
  border: 1px solid var(--c-border);
  position: relative;
  transition: transform 0.3s var(--ease);
}
.sp-review-card:hover { transform: translateY(-4px); }
.sp-review-card::before {
  content: '"';
  position: absolute;
  top: 8px; left: 24px;
  font-family: var(--f-display);
  font-size: 90px;
  color: var(--c-tan);
  opacity: 0.18;
  line-height: 1;
  font-style: italic;
}
.sp-review-card .stars { margin-bottom: 14px; position: relative; }
.sp-review-card .quote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 22px;
  position: relative;
}
.sp-review-card .author { display: flex; align-items: center; gap: 12px; }
.sp-review-card .avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4a574, #b88762);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--c-white);
  font-size: 14px;
}
.sp-review-card .info { font-size: 13px; }
.sp-review-card .info .name { font-weight: 600; }
.sp-review-card .info .where { color: var(--c-muted); margin-top: 2px; }

/* ----- newsletter ----- */
/* ============================================================================
   NEWSLETTER
   ============================================================================ */
.sp-newsletter {
  background: var(--c-forest);
  background-image:
    radial-gradient(ellipse at top right, rgba(212,165,116,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(184,84,80,0.12) 0%, transparent 50%);
  color: var(--c-cream);
  padding: 70px var(--pad-x);
  text-align: center;
  position: relative;
}
.sp-newsletter-inner { max-width: 580px; margin: 0 auto; position: relative; }
.sp-newsletter .eyebrow {
  font-family: var(--f-script);
  font-size: 26px;
  color: var(--c-tan);
  margin-bottom: 4px;
  display: block;
}
.sp-newsletter h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 40px);
  margin-bottom: 14px;
  line-height: 1.1;
}
.sp-newsletter h2 em { font-style: italic; color: var(--c-tan); }
.sp-newsletter p { font-size: 15px; color: rgba(250,246,239,0.78); margin-bottom: 28px; }
.sp-newsletter form { display: flex; gap: 8px; max-width: 460px; margin: 0 auto; position: relative; }
.sp-newsletter input {
  flex: 1;
  padding: 15px 20px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: var(--c-cream);
  font-family: var(--f-body);
  font-size: 14px;
  outline: none;
}
.sp-newsletter input::placeholder { color: rgba(250,246,239,0.5); }
.sp-newsletter input:focus { border-color: var(--c-tan); }
.sp-newsletter button {
  background: var(--c-tan);
  color: var(--c-forest);
  padding: 15px 30px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s var(--ease);
}
.sp-newsletter button:hover { background: #e0b485; transform: translateY(-1px); }

.sp-newsletter-doodle {
  position: absolute;
  right: -90px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-script);
  font-size: 24px;
  color: var(--c-tan);
  width: 130px;
  text-align: left;
  line-height: 1.1;
}

/* ----- footer ----- */
/* ============================================================================
   FOOTER
   ============================================================================ */
.sp-footer {
  background: var(--c-charcoal);
  color: rgba(250,246,239,0.55);
  padding: 70px var(--pad-x) 28px;
}
.sp-footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sp-footer-brand .sp-logo { margin-bottom: 18px; }
.sp-footer-brand .sp-logo .logo-img { height: 40px; }
.sp-footer-brand p { font-size: 13px; line-height: 1.65; max-width: 320px; margin-bottom: 18px; }
.sp-footer-brand .parent {
  font-size: 11px;
  color: var(--c-tan);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sp-footer-brand .parent a { color: inherit; text-decoration: underline; }
.sp-footer-brand .sp-logo .logo-img {
  height: 40px;
  filter: invert(1) brightness(100);
  mix-blend-mode: lighten;
}
.sp-footer h5 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--c-tan);
  margin-bottom: 18px;
}
.sp-footer ul li { margin-bottom: 10px; font-size: 13px; }
.sp-footer ul li a:hover { color: var(--c-cream); }
.sp-footer-social { display: flex; gap: 8px; margin-top: 6px; }
.sp-footer-social a {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s var(--ease);
}
.sp-footer-social a:hover { background: var(--c-tan); color: var(--c-charcoal); border-color: var(--c-tan); }
.sp-footer-social .icon { width: 14px; height: 14px; }
.sp-footer-bottom {
  max-width: var(--max-w);
  margin: 28px auto 0;
  display: flex; justify-content: space-between;
  font-size: 11px;
  color: rgba(250,246,239,0.4);
  flex-wrap: wrap;
  gap: 12px;
}
.sp-footer-bottom a:hover { color: var(--c-cream); }

/* ----- wishlist_full_page ----- */

/* Wishlist full page */
.sp-wl-page {
  padding: 28px var(--pad-x) 80px;
  background: var(--c-cream);
  min-height: 60vh;
}
.sp-wl-page-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.sp-wl-page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-border);
}
.sp-wl-page-head h1 {
  font-family: var(--f-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  color: var(--c-charcoal);
  letter-spacing: -0.01em;
}
.sp-wl-page-head h1 em { font-style: italic; color: var(--c-tan); }
.sp-wl-page-head .count {
  font-size: 14px;
  color: var(--c-muted);
}
.sp-wl-page-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.sp-wl-card { position: relative; }
.sp-wl-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.sp-wl-page-move {
  flex: 1;
  background: var(--c-forest);
  color: var(--c-cream);
  border: none;
  padding: 9px 12px;
  border-radius: 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.2s var(--ease);
}
.sp-wl-page-move:hover { background: var(--c-tan); }
.sp-wl-page-move .icon { width: 13px; height: 13px; }
.sp-wl-page-remove {
  width: 36px; height: 36px;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  color: var(--c-muted);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.sp-wl-page-remove:hover { color: #b85450; border-color: #b85450; }
.sp-wl-page-remove .icon { width: 14px; height: 14px; }

/* Empty state on the wishlist full page */
.sp-wl-page-empty {
  text-align: center;
  padding: 60px 20px;
}
.sp-wl-page-empty .empty-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--c-tan);
}
.sp-wl-page-empty .empty-icon .icon { width: 28px; height: 28px; }
.sp-wl-page-empty h2 {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--c-charcoal);
  margin-bottom: 8px;
}
.sp-wl-page-empty p {
  color: var(--c-muted);
  margin-bottom: 22px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.sp-wl-page-empty .browse-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-forest);
  color: var(--c-cream);
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.2s var(--ease);
}
.sp-wl-page-empty .browse-btn:hover { background: var(--c-tan); }

@media (max-width: 1024px) {

/* ----- cart_shipping_bar_unused ----- */
  .sp-wl-page-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .sp-wl-page-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.sp-cart-shipping-bar {
  background: var(--c-white);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--c-charcoal);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-cart-shipping-bar .row { display: flex; align-items: center; gap: 8px; }
.sp-cart-shipping-bar .row .icon { width: 14px; height: 14px; color: var(--c-forest); }
.sp-cart-shipping-bar .progress {
  height: 4px;
  background: var(--c-border);
  border-radius: 2px;
  overflow: hidden;
}
.sp-cart-shipping-bar .progress div { height: 100%; background: var(--c-forest); width: 73%; }

/* ----- responsive_index ----- */
/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1024px) {
  .sp-hero-inner { grid-template-columns: 1fr; }
  .sp-hero-visual { display: none; }
  .sp-bento { grid-template-columns: repeat(2, 1fr); }
  .sp-cat.feat, .sp-cat.wide { grid-column: span 2; }
  .sp-prod-grid { grid-template-columns: repeat(3, 1fr); }
  .sp-story-inner { grid-template-columns: 1fr; gap: 40px; }
  .sp-story-image { max-width: 360px; margin: 0 auto; }
  .sp-reviews-grid { grid-template-columns: 1fr; }
  .sp-ugc-grid { grid-template-columns: repeat(3, 1fr); }
  .sp-footer-inner { grid-template-columns: 1fr 1fr 1fr; }
  .sp-newsletter-doodle { display: none; }
  .mega-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 280px; gap: 28px; }
  .mega-cols .mega-col:nth-child(3) { display: none; }
  /* Adaptive at tablet: 1 category + feature */
  .mega-cols:has(> .mega-col:first-child:nth-last-child(2)) {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
  .sp-search { max-width: 340px; }
}
@media (max-width: 900px) {
  .sp-nav { display: none; }
  .sp-menu-toggle { display: flex; }
  .sp-header-inner { gap: 14px; }
  .sp-search { max-width: 240px; }
  .sp-search input { padding: 10px 14px 10px 38px; font-size: 13px; }
  .sp-search-btn { left: 4px; width: 28px; height: 28px; }
}

/* Responsive open/closed behaviour without JS. */
@media (min-width: 901px) {
  .sp-acct-nav-section::details-content {
    content-visibility: visible !important;
    display: block !important;
  }
  .sp-acct-nav-section > .sp-acct-nav-link {
    display: flex !important;
  }
  .sp-acct-nav-section > summary.sp-acct-nav-group {
    cursor: default;
    pointer-events: none;
  }
  .sp-acct-nav-section > summary.sp-acct-nav-group .sp-acct-nav-chev {
    display: none;
  }
}

@media (max-width: 768px) {
  :root { --pad-x: 20px; }
  .sp-header-icons .sp-search-toggle { display: flex; }
  .sp-search {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    transform: none;
    width: 100%;
    max-width: none;
    padding: 14px var(--pad-x);
    background: var(--c-white);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 8px 16px -8px rgba(0,0,0,0.08);
  }
  .sp-search.open { display: block; }
  .sp-search-btn { left: calc(var(--pad-x) + 4px); }
  .sp-trust { gap: 24px; padding: 18px var(--pad-x); }
  .sp-prod-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-marquee-track span { font-size: 28px; }
  .sp-newsletter form { flex-direction: column; }
  .sp-footer-inner { grid-template-columns: 1fr 1fr; }
  .sp-cart-drawer { width: 100vw; }
}
@media (max-width: 480px) {
  .sp-bento { grid-template-columns: 1fr; }
  .sp-cat.feat, .sp-cat.wide { grid-column: span 1; }
  .sp-section-head h2 { font-size: 28px; }
  .sp-ugc-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-footer-inner { grid-template-columns: 1fr; }
}

/* ----- swatch_utility_colors ----- */
/* ============================================================================
   SWATCH UTILITY COLORS
   Color tokens used by .sp-prod-card .swatches .sw — replaces inline styles.
   ============================================================================ */
.sw-tan         { background: #d4a574; }
.sw-sage        { background: #8a9580; }
.sw-charcoal    { background: #2b2b2b; }
.sw-cream-light { background: #FAF6EF; border-color: #e6dfcf; }
.sw-cream       { background: #efe2c8; }
.sw-red         { background: #b85450; }
.sw-forest      { background: #2e5d4e; }
.sw-camel       { background: #c4a890; }
.sw-brown       { background: #786a55; }
.sw-rust        { background: #9a3f3c; }
.sw-rose        { background: #c98a8a; }

/* ----- misc_inline_replacements ----- */
/* ============================================================================
   MISC INLINE-STYLE REPLACEMENTS
   ============================================================================ */
.icon-defs            { position: absolute; }
.newsletter-arrow-svg { width: 80px; height: 50px; display: block; margin-top: 4px; }

/* ----- breadcrumb ----- */
/* ============================================================================
   BREADCRUMB
   ============================================================================ */
.sp-breadcrumb {
  background: var(--c-cream);
  padding: 14px var(--pad-x);
  border-bottom: 1px solid var(--c-border);
  font-size: 13px;
  color: var(--c-muted);
}
.sp-breadcrumb-inner { max-width: var(--max-w); margin: 0 auto; }
.sp-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sp-breadcrumb li { display: inline-flex; align-items: center; }
.sp-breadcrumb a { color: var(--c-muted); transition: color 0.2s var(--ease); }
.sp-breadcrumb a:hover { color: var(--c-tan); }
.sp-breadcrumb [aria-current="page"] { color: var(--c-charcoal); font-weight: 500; }
.sp-breadcrumb .icon { color: var(--c-cream-warm); }

/* ----- page_hero ----- */
/* ============================================================================
   PAGE HERO  (used by sale / deals / new arrivals)
   ============================================================================ */
.sp-page-hero {
  padding: 22px var(--pad-x);
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-border);
}
.sp-page-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: center;
}
.sp-page-hero .hero-text h1 {
  font-family: var(--f-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 14px 0 18px;
  color: var(--c-charcoal);
}
.sp-page-hero .hero-text h1 em {
  font-style: italic;
  color: var(--c-tan);
}
.sp-page-hero .hero-text p {
  font-size: 16px;
  color: var(--c-muted);
  max-width: 1475px;
  margin-bottom: 28px;
}
.sp-page-hero .hero-meta {
  display: flex; flex-wrap: wrap; gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--c-border);
  font-size: 13px;
  color: var(--c-text);
}
.sp-page-hero .hero-meta-item {
  display: inline-flex; align-items: center; gap: 8px;
}
.sp-page-hero .hero-meta-item .icon { width: 18px; height: 18px; color: var(--c-tan); }

.sp-section-eyebrow.on-dark { color: var(--c-forest); }

/* Sale variant — warm forest tone */
.sp-page-hero-sale {
  background: linear-gradient(135deg, #f6efe6 0%, #f4f5f3 100%);
}
.sp-page-hero-sale .hero-text h1 em { color: #b85450; }

/* Deals variant — slightly more dramatic */
.sp-page-hero-deals {
  background: linear-gradient(135deg, #f4f5f3 0%, #ece8df 100%);
}
.sp-page-hero-deals .hero-text h1 em { color: var(--c-forest); }

/* New variant */
.sp-page-hero-new {
  background: var(--c-cream);
}

/* Hero stamp wrap */
.hero-stamp-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-hero-stamp.big {
  position: relative;
  width: 240px;
  height: 240px;
  color: var(--c-forest);
}
.sp-hero-stamp.big svg {
  width: 100%;
  height: 100%;
  animation: stamp-spin 30s linear infinite;
}
.sp-hero-stamp.big .stamp-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
}
.sp-hero-stamp.big .stamp-no {
  font-style: italic;
  font-size: 22px;
  color: var(--c-muted);
}
.sp-hero-stamp.big .stamp-mu {
  font-size: 32px;
  font-weight: 600;
  color: var(--c-forest);
  letter-spacing: -0.01em;
}
@keyframes stamp-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.new-hero-note {
  position: relative;
  background: var(--c-white);
  padding: 38px 32px 32px;
  width: 260px;
  transform: rotate(-3deg);
  box-shadow: 0 16px 32px -16px rgba(0,0,0,0.18);
  border: 1px solid var(--c-cream-deep);
  border-radius: 4px;
}
.new-hero-note .note-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 12px;
}
.new-hero-note .note-script {
  font-family: var(--f-script);
  font-size: 38px;
  line-height: 1;
  color: var(--c-charcoal);
  display: block;
}
.new-hero-note .note-script em {
  font-style: italic;
  color: var(--c-tan);
}
.new-hero-note .note-pin {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c-tan);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 -2px 2px rgba(0,0,0,0.15);
}

/* ----- countdown ----- */
/* ============================================================================
   COUNTDOWN
   ============================================================================ */
.sp-countdown {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  padding: 16px 22px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: 0 6px 14px -10px rgba(0,0,0,0.12);
}
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}
.cd-num {
  font-family: var(--f-display);
  font-size: 40px;
  line-height: 1;
  font-weight: 500;
  color: var(--c-forest);
  font-variant-numeric: tabular-nums;
}
.cd-lbl {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 600;
}
.cd-sep {
  font-family: var(--f-display);
  font-size: 36px;
  line-height: 1;
  color: var(--c-cream-warm);
  font-weight: 400;
  padding-bottom: 22px;
}

/* ----- deal_feature ----- */
/* ============================================================================
   DEAL OF THE DAY FEATURE CARD (deals page)
   ============================================================================ */
.sp-deal-feature {
  display: block;
  width: fit-content;
  max-width: 100%;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 18px;
  position: relative;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.sp-deal-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 36px -22px rgba(0,0,0,0.18);
}
.deal-feature-tag {
  position: absolute;
  top: -10px;
  left: 18px;
  background: var(--c-forest);
  color: var(--c-cream);
  padding: 5px 12px;
  border-radius: 30px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.deal-feature-img {
  background: var(--c-cream-deep);
  border-radius: 12px;
  width: 250px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.deal-feature-info { width: 250px; padding: 4px 4px 0; }
.deal-feature-name {
  font-family: var(--f-display);
  font-size: 18px;
  line-height: 1.25;
  color: var(--c-charcoal);
  margin-bottom: 8px;
}
.deal-feature-pricing {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.deal-feature-pricing .now {
  font-size: 22px; font-weight: 600;
  color: var(--c-charcoal);
}
.deal-feature-pricing .was {
  text-decoration: line-through; color: var(--c-muted);
  font-size: 14px;
}
.deal-feature-pricing .pct {
  background: #b85450; color: var(--c-white);
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 20px;
  letter-spacing: 0.04em;
}

/* ----- deal_progress ----- */
/* ============================================================================
   DEAL PROGRESS BAR (used on deal cards + deal feature)
   ============================================================================ */
.deal-progress { margin-top: 10px; }
.deal-progress-bar {
  height: 4px;
  background: var(--c-cream-deep);
  border-radius: 4px;
  overflow: hidden;
}
.deal-progress-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--c-tan) 0%, #b85450 100%);
  border-radius: 4px;
}
.deal-progress-label {
  margin-top: 6px;
  font-size: 11px;
  color: var(--c-muted);
  letter-spacing: 0.02em;
}

/* Deal badge on product cards */
.sp-prod-card .badge.deal { background: #b85450; color: var(--c-white); }
.sp-prod-card .badge.new  { background: var(--c-forest); color: var(--c-white); }

/* ----- collection_header ----- */
/* ============================================================================
   COLLECTION HEADER
   ============================================================================ */
.sp-coll-head {
  padding: 12px var(--pad-x) 14px;
  background: var(--c-cream);
}
.sp-coll-head-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
}
.sp-coll-head h1 {
  font-family: var(--f-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  font-weight: 500;
  margin: 4px 0 8px;
  color: var(--c-charcoal);
  letter-spacing: -0.01em;
}
.sp-coll-head h1 em {
  font-style: italic;
  color: var(--c-tan);
  position: relative;
}
.sp-coll-head h1 em .doodle-circle {
  position: absolute;
  inset: -10% -8%;
  width: 116%;
  height: 120%;
  pointer-events: none;
  stroke: var(--c-tan);
  opacity: 0.4;
}
.sp-coll-head p {
  color: var(--c-muted);
  max-width: 560px;
  margin: 0 auto 12px;
}

/* Sub-category chips */
.sp-subcat-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding-top: 2px;
}
.sp-subcat-chips .chip {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--c-border);
  border-radius: 30px;
  background: var(--c-white);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  transition: all 0.2s var(--ease);
}
.sp-subcat-chips .chip:hover {
  border-color: var(--c-tan);
  color: var(--c-tan);
}
.sp-subcat-chips .chip.active {
  background: var(--c-forest);
  color: var(--c-cream);
  border-color: var(--c-forest);
}

/* ----- discount_tiers ----- */
/* ============================================================================
   DISCOUNT TIERS / TIME WINDOW TABS
   ============================================================================ */
.sp-discount-tiers {
  padding: 24px var(--pad-x);
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-border);
}
.sp-discount-tiers-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.tier-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 22px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  text-align: center;
  transition: all 0.2s var(--ease);
  min-width: 140px;
}
.tier-chip strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
}
.tier-chip span {
  font-size: 12px;
  color: var(--c-muted);
}
.tier-chip:hover {
  border-color: var(--c-tan);
  transform: translateY(-2px);
}
.tier-chip.active {
  background: var(--c-charcoal);
  border-color: var(--c-charcoal);
}
.tier-chip.active strong { color: var(--c-cream); }
.tier-chip.active span { color: rgba(244,245,243,0.65); }

/* ----- collection_body ----- */
/* ============================================================================
   COLLECTION BODY — sidebar + main
   ============================================================================ */
.sp-coll-body {
  padding: 32px var(--pad-x) 80px;
  background: var(--c-white);
}
.sp-coll-body-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  align-items: start;
}

/* Filters sidebar */
.sp-filters {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 8px 0;
  position: sticky;
  top: 100px;
}
.sp-filters-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--c-border);
}
.sp-filters-head h3 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--c-charcoal);
}
.sp-filters-close {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--c-charcoal);
}
.sp-filters-close:hover { background: var(--c-cream-deep); }

.filter-block { border-bottom: 1px solid var(--c-border); }
.filter-block:last-of-type { border-bottom: none; }
.filter-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-charcoal);
  background: transparent;
  text-align: left;
}
.filter-toggle .filter-chev {
  transition: transform 0.2s var(--ease);
  color: var(--c-muted);
}
.filter-block.open .filter-toggle .filter-chev { transform: rotate(180deg); }
.filter-body {
  display: none;
  padding: 0 22px 18px;
}
.filter-block.open .filter-body { display: block; }

.filter-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--c-text);
  transition: color 0.2s var(--ease);
}
.filter-check:hover { color: var(--c-tan); }
.filter-check input[type="checkbox"],
.filter-check input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--c-forest);
  flex-shrink: 0;
}
.filter-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: var(--c-muted);
}
.filter-rating .icon { width: 13px; height: 13px; color: var(--c-tan); }

/* Price range inputs */
.filter-price {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.filter-price input {
  width: 70px;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-family: var(--f-body);
  font-size: 13px;
  outline: none;
  transition: border 0.2s var(--ease);
}
.filter-price input:focus { border-color: var(--c-tan); }
.filter-price .dash { color: var(--c-muted); font-size: 13px; }
.filter-price-go {
  padding: 8px 14px;
  background: var(--c-charcoal);
  color: var(--c-cream);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.2s var(--ease);
}
.filter-price-go:hover { background: var(--c-forest); }

/* Color swatch grid */
.filter-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.filter-swatches .sw {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.filter-swatches .sw:hover {
  transform: scale(1.12);
}
.filter-swatches .sw.active {
  box-shadow: 0 0 0 2px var(--c-charcoal);
}

.sp-filters-footer {
  display: flex;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--c-border);
  align-items: center;
}
.filter-clear {
  padding: 8px 4px !important;
  font-size: 13px !important;
}
.filter-apply {
  flex: 1;
  padding: 11px 18px !important;
  font-size: 13px !important;
  justify-content: center;
}

/* Mobile filter overlay */
.sp-filters-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 43, 43, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
  z-index: 80;
}
.sp-filters-overlay.open { opacity: 1; pointer-events: auto; }

/* ----- collection_toolbar ----- */
/* ============================================================================
   COLLECTION TOOLBAR
   ============================================================================ */
.sp-coll-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  background: var(--c-cream);
  border-radius: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.sp-filters-open {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-charcoal);
}
.result-count {
  font-size: 14px;
  color: var(--c-muted);
}
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.toolbar-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--c-muted);
}
.toolbar-sort .sort-select {
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--c-border);
  background: var(--c-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A7363' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
  border-radius: 8px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-charcoal);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  min-width: 180px;
}
.toolbar-sort .sort-select:focus { border-color: var(--c-tan); }

/* View toggle */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-white);
}
.vt-btn {
  width: 38px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--c-muted);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.vt-btn:hover { background: var(--c-cream); color: var(--c-charcoal); }
.vt-btn.active { background: var(--c-charcoal); color: var(--c-cream); }
.vt-btn + .vt-btn { border-left: 1px solid var(--c-border); }

/* ----- collection_grid ----- */
/* ============================================================================
   COLLECTION GRID + LIST VIEW
   ============================================================================ */
.sp-coll-grid {
  display: grid;
  gap: 24px;
}
.sp-coll-grid.view-grid {
  grid-template-columns: repeat(4, 1fr);
}
.sp-coll-grid.view-list {
  grid-template-columns: 1fr;
  gap: 18px;
}

/* List view: cards become horizontal.
   The HTML structure of each card is:
     .sp-prod-card
       ├── .img-wrap (contains image + quick-add)
       └── .sp-prod-link (wraps .name, .meta, .swatches, .stock-hint, .price)
   We make .sp-prod-card the 3-column grid and use display: contents on the
   outer .sp-prod-link so its children flow into the card's grid. */
.sp-coll-grid.view-list .sp-prod-card {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  column-gap: 28px;
  row-gap: 4px;
  align-items: center;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 16px;
}
.sp-coll-grid.view-list .sp-prod-card:hover {
  transform: none;
  border-color: var(--c-cream-warm);
  box-shadow: 0 12px 24px -16px rgba(0,0,0,0.12);
}
/* Make the outer .sp-prod-link "transparent" so its children flow into
   the card's grid. The > selector keeps the inner .sp-prod-link
   (inside .img-wrap) untouched. */
.sp-coll-grid.view-list .sp-prod-card > .sp-prod-link {
  display: contents;
}
.sp-coll-grid.view-list .sp-prod-card > .img-wrap {
  grid-column: 1;
  grid-row: 1 / span 4;
  margin-bottom: 0;
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  align-self: center;
  width: 150px;
  height: 150px;
}
/* Middle column: name, meta, swatches, stock-hint stack vertically */
.sp-coll-grid.view-list .sp-prod-card .name     { grid-column: 2; grid-row: 1; }
.sp-coll-grid.view-list .sp-prod-card .meta     { grid-column: 2; grid-row: 2; }
.sp-coll-grid.view-list .sp-prod-card .swatches { grid-column: 2; grid-row: 3; }
.sp-coll-grid.view-list .sp-prod-card .stock-hint { grid-column: 2; grid-row: 4; }
/* Right column: price, right-aligned, vertically centered */
.sp-coll-grid.view-list .sp-prod-card .price {
  grid-column: 3;
  grid-row: 1 / span 4;
  align-self: center;
  justify-self: end;
  text-align: right;
  white-space: nowrap;
  font-size: 22px;
  padding-right: 8px;
}
.sp-coll-grid.view-list .sp-prod-card .name {
  font-size: 18px;
  margin-bottom: 8px;
}
.sp-coll-grid.view-list .sp-prod-card .meta {
  margin-bottom: 10px;
}
.sp-coll-grid.view-list .sp-prod-card .wishlist {
  top: 22px; right: 22px;
}
.sp-coll-grid.view-list .sp-prod-card .stock-hint {
  margin-top: 8px;
}

/* ----- pagination ----- */
/* ============================================================================
   PAGINATION
   ============================================================================ */
.sp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 56px;
  flex-wrap: wrap;
}
.pg-num,
.pg-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  color: var(--c-charcoal);
  font-size: 14px;
  font-weight: 500;
  justify-content: center;
  transition: all 0.2s var(--ease);
}
.pg-num:hover,
.pg-arrow:hover:not(.disabled) {
  border-color: var(--c-tan);
  color: var(--c-tan);
}
.pg-num.current {
  background: var(--c-charcoal);
  color: var(--c-cream);
  border-color: var(--c-charcoal);
}
.pg-arrow.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pg-dots {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 6px;
  color: var(--c-muted);
}

/* ----- pdp_gallery ----- */
/* ============================================================================
   PRODUCT DETAIL PAGE — gallery
   ============================================================================ */
.sp-product {
  padding: 48px var(--pad-x) 64px;
  background: var(--c-cream);
}
.sp-product-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: start;
}

.sp-pdp-gallery {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  position: sticky;
  top: 100px;
}
.pdp-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pdp-thumb {
  width: 80px; height: 80px;
  border-radius: 10px;
  border: 1px solid var(--c-border);
  background: var(--c-cream-deep);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
  flex-shrink: 0;
  position: relative;
}
.pdp-thumb .img-placeholder {
  font-size: 11px;
  color: var(--c-muted);
}
.pdp-thumb:hover { border-color: var(--c-cream-warm); }
.pdp-thumb.active {
  border-color: var(--c-charcoal);
  transform: scale(0.97);
}

.pdp-main-img {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pdp-main-img .img-placeholder {
  color: var(--c-muted);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.pdp-main-img .badge {
  position: absolute;
  top: 18px; left: 18px;
  padding: 6px 12px;
  background: var(--c-forest);
  color: var(--c-cream);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 30px;
  z-index: 2;
}
.pdp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-charcoal);
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.15);
  transition: background 0.2s var(--ease);
  z-index: 2;
}
.pdp-arrow:hover { background: var(--c-cream); }
.pdp-arrow.prev { left: 16px; }
.pdp-arrow.next { right: 16px; }

/* ----- pdp_info ----- */
/* ============================================================================
   PRODUCT DETAIL PAGE — info
   ============================================================================ */
.sp-pdp-info {
  padding-top: 8px;
}
.pdp-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 600;
  margin-bottom: 14px;
}
.pdp-title {
  font-family: var(--f-display);
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-charcoal);
  margin-bottom: 18px;
}
.pdp-title em {
  font-style: italic;
  color: var(--c-tan);
}

.pdp-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--c-muted);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.pdp-rating .stars { gap: 1px; }
.pdp-rating .stars .icon { width: 15px; height: 15px; }
.pdp-rating .rating-num {
  color: var(--c-charcoal);
  font-weight: 600;
}
.pdp-rating .rating-link {
  color: var(--c-charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pdp-rating .rating-link:hover { color: var(--c-tan); }
.pdp-rating .rating-sep { color: var(--c-cream-warm); }

.pdp-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--c-border);
}
.pdp-price .now {
  font-family: var(--f-display);
  font-size: 38px;
  font-weight: 500;
  color: var(--c-charcoal);
  line-height: 1;
}
.pdp-price .was {
  text-decoration: line-through;
  color: var(--c-muted);
  font-size: 18px;
}
.pdp-price .pct {
  background: #b85450;
  color: var(--c-white);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 30px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pdp-desc {
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.6;
  margin-bottom: 28px;
}

/* Options */
.pdp-opt { margin-bottom: 22px; }
.pdp-opt-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  font-size: 13px;
}
.pdp-opt-label {
  color: var(--c-muted);
  font-weight: 500;
}
.pdp-opt-value {
  color: var(--c-charcoal);
  font-weight: 600;
}
.pdp-size-guide {
  font-size: 12px;
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pdp-size-guide:hover { color: var(--c-tan); }

.pdp-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.pdp-swatches .sw {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}
.pdp-swatches .sw:hover { transform: scale(1.1); }
.pdp-swatches .sw.active {
  box-shadow: 0 0 0 1.5px var(--c-cream), 0 0 0 3px var(--c-charcoal);
}

.pdp-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pdp-size {
  padding: 11px 18px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-white);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-charcoal);
  transition: all 0.18s var(--ease);
  min-width: 76px;
}
.pdp-size:hover { border-color: var(--c-charcoal); }
.pdp-size.active {
  background: var(--c-charcoal);
  color: var(--c-cream);
  border-color: var(--c-charcoal);
}
.pdp-size.disabled {
  color: var(--c-muted);
  background: var(--c-cream);
  cursor: not-allowed;
  text-decoration: line-through;
  opacity: 0.7;
}

/* Buy row */
.pdp-buy-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 8px 0 12px;
}
.pdp-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-border);
  border-radius: 30px;
  background: var(--c-white);
  padding: 4px;
  flex-shrink: 0;
}
.pdp-qty button {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-charcoal);
  transition: background 0.2s var(--ease);
}
.pdp-qty button:hover { background: var(--c-cream-deep); }
.pdp-qty .qty-num {
  min-width: 36px;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--c-charcoal);
}

.pdp-add {
  flex: 1;
  justify-content: center;
  font-size: 14px !important;
  padding: 13px 24px !important;
}

.pdp-wishlist {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-charcoal);
  transition: all 0.2s var(--ease);
  position: static;
}
.pdp-wishlist .icon { width: 20px; height: 20px; }
.pdp-wishlist:hover { color: var(--c-tan); border-color: var(--c-tan); }
.pdp-wishlist.on { color: var(--c-tan); border-color: var(--c-tan); }
.pdp-wishlist.on .icon { fill: currentColor; }

.pdp-buy-now {
  width: 100%;
  padding: 13px 24px;
  background: var(--c-charcoal);
  color: var(--c-cream);
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.pdp-buy-now:hover {
  background: var(--c-forest);
  transform: translateY(-1px);
}

/* Trust list */
.pdp-trust {
  border-top: 1px solid var(--c-border);
  padding-top: 22px;
  display: grid;
  gap: 16px;
}
.pdp-trust li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.pdp-trust .icon {
  color: var(--c-tan);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}
.pdp-trust strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 2px;
}
.pdp-trust span {
  display: block;
  font-size: 12px;
  color: var(--c-muted);
}

.pdp-stock {
  margin-top: 18px;
  font-size: 13px;
  color: var(--c-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--c-cream);
  border-radius: 30px;
}
.pdp-stock .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-forest);
  box-shadow: 0 0 0 3px rgba(46,93,78,0.15);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ----- pdp_tabs ----- */
/* ============================================================================
   PDP TABS
   ============================================================================ */
.sp-pdp-tabs {
  padding: 56px var(--pad-x);
  background: var(--c-white);
}
.sp-pdp-tabs-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.pdp-tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 32px;
  /*overflow-x: auto;*/
}
.pdp-tab {
  padding: 14px 22px;
  background: transparent;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: all 0.2s var(--ease);
}
.pdp-tab:hover { color: var(--c-charcoal); }
.pdp-tab.active {
  color: var(--c-charcoal);
  border-bottom-color: var(--c-charcoal);
}

.pdp-tab-panel { display: none; max-width: 1475px; }
.pdp-tab-panel.active { display: block; }
.pdp-tab-panel h3 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--c-charcoal);
  margin: 0 0 12px;
}
.pdp-tab-panel h3 + h3 { margin-top: 28px; }
.pdp-tab-panel p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text);
  margin-bottom: 14px;
}
.pdp-bullets {
  margin: 14px 0 24px;
  padding-left: 0;
}
.pdp-bullets li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text);
}
.pdp-bullets li::before {
  content: "";
  position: absolute;
  left: 4px; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-tan);
}

/* Reviews summary inside PDP */
.pdp-reviews-summary {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 24px;
  background: var(--c-cream);
  border-radius: 14px;
  margin-bottom: 32px;
}
.rs-score {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.rs-num {
  font-family: var(--f-display);
  font-size: 56px;
  line-height: 1;
  font-weight: 500;
  color: var(--c-charcoal);
}
.rs-score .stars .icon { width: 18px; height: 18px; }
.rs-count { font-size: 12px; color: var(--c-muted); }

.rs-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.rs-bar {
  display: grid;
  grid-template-columns: 32px 1fr 40px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--c-muted);
}
.rs-bar-lbl { font-weight: 600; color: var(--c-charcoal); }
.rs-bar-track {
  height: 6px;
  background: var(--c-cream-warm);
  border-radius: 6px;
  overflow: hidden;
}
.rs-bar-track > div {
  height: 100%;
  background: var(--c-tan);
  border-radius: 6px;
}
.rs-bar-pct { text-align: right; }

.sp-reviews-grid.in-pdp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pdp-reviews-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* ----- width_utility ----- */
/* ============================================================================
   WIDTH UTILITY CLASSES
   Replaces inline style="width:N%" on progress / rating bars.
   ============================================================================ */
.w-pct-0  { width: 0%; }
.w-pct-1  { width: 1%; }
.w-pct-2  { width: 2%; }
.w-pct-9  { width: 9%; }
.w-pct-35 { width: 35%; }
.w-pct-47 { width: 47%; }
.w-pct-58 { width: 58%; }
.w-pct-62 { width: 62%; }
.w-pct-71 { width: 71%; }
.w-pct-78 { width: 78%; }
.w-pct-81 { width: 81%; }
.w-pct-84 { width: 84%; }
.w-pct-88 { width: 88%; }
.w-pct-90 { width: 90%; }

/* ----- responsive_shop ----- */
/* ============================================================================
   ============================================================================
   RESPONSIVE — collection / sale / deals / new arrivals / product / wishlist
   Added in audit pass: the "new pages" CSS block above had no media queries.
   ============================================================================
   ============================================================================ */

/* ----------------------------------------------------------------------------
   TABLET ( <= 1024px )
   ---------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Page hero (sale / deals / new-arrivals): stamp moves below text */
  .sp-page-hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: left;
  }
  .sp-page-hero .hero-text p { max-width: none; }
  .hero-stamp-wrap { justify-content: flex-start; }
  .sp-hero-stamp.big { width: 200px; height: 200px; }

  /* Product detail: gallery + info stack */
  .sp-product-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .sp-pdp-gallery { position: static; }

  /* Collection body: filters become a slide-in drawer, grid takes full width */
  .sp-coll-body-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .sp-filters {
    position: fixed;
    top: 0; left: 0;
    width: 340px;
    max-width: 88vw;
    height: 100vh;
    background: var(--c-white);
    z-index: 81;
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease);
    border: none;
    border-radius: 0;
    padding: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .sp-filters.open { transform: translateX(0); }
  .sp-filters-head { display: flex; }
  .sp-filters-open { display: inline-flex; }

  /* Product grid: 4 -> 3 cols */
  .sp-coll-grid.view-grid { grid-template-columns: repeat(3, 1fr); }

  /* PDP reviews summary: bars below score */
  .pdp-reviews-summary {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px;
  }
  .rs-score { align-items: flex-start; text-align: left; }

  /* PDP review cards: 3 -> 2 */
  .sp-reviews-grid.in-pdp { grid-template-columns: repeat(2, 1fr); }
}

/* ----------------------------------------------------------------------------
   MOBILE ( <= 768px )
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Page hero: tighter padding, smaller stamp */
  .sp-page-hero { padding: 18px var(--pad-x); }
  .sp-page-hero .hero-text h1 { margin: 10px 0 14px; }
  .sp-page-hero .hero-text p { font-size: 14px; margin-bottom: 20px; }
  .sp-page-hero .hero-meta { gap: 16px; padding-top: 18px; }
  .sp-hero-stamp.big { width: 150px; height: 150px; }
  .sp-hero-stamp.big .stamp-mu { font-size: 24px; }
  .sp-hero-stamp.big .stamp-no { font-size: 16px; }

  /* Breadcrumb: shrink */
  .sp-breadcrumb { padding: 10px var(--pad-x); font-size: 12px; }

  /* Collection header */
  .sp-coll-head { padding: 8px var(--pad-x) 10px; }
  .sp-coll-head h1 { font-size: clamp(28px, 7vw, 36px); }
  .sp-coll-head p { font-size: 14px; }

  /* Subcategory chips: smaller, allow horizontal scroll if many */
  .sp-subcat-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    justify-content: flex-start;
  }
  .sp-subcat-chips .chip { flex-shrink: 0; font-size: 12px; padding: 8px 14px; }

  /* Discount tiers: smaller chips, compact */
  .sp-discount-tiers { padding: 16px var(--pad-x); }
  .tier-chip { min-width: 110px; padding: 10px 14px; }
  .tier-chip strong { font-size: 13px; }

  /* Countdown: smaller numerals */
  .sp-countdown { padding: 12px 16px; gap: 4px; }
  .cd-unit { min-width: 44px; }
  .cd-num { font-size: 28px; }
  .cd-sep { font-size: 24px; padding-bottom: 16px; }
  .cd-lbl { font-size: 9px; }

  /* Deal feature card */
  .sp-deal-feature { padding: 14px; }
  .deal-feature-name { font-size: 16px; }
  .deal-feature-pricing .now { font-size: 18px; }

  /* Collection body padding */
  .sp-coll-body { padding: 20px var(--pad-x) 56px; }

  /* Toolbar: result count under filter button, sort + view full width */
  .sp-coll-toolbar {
    padding: 12px 14px;
    gap: 12px;
    margin-bottom: 18px;
  }
  .toolbar-right {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  .toolbar-sort .sort-select {
    min-width: 140px;
    padding: 8px 28px 8px 10px;
    font-size: 12px;
  }

  /* Product grid: 3 -> 2 cols */
  .sp-coll-grid.view-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sp-coll-grid { gap: 14px; }

  /* List view: compact card */
  .sp-coll-grid.view-list .sp-prod-link {
    grid-template-columns: 100px 1fr;
    gap: 12px;
  }
  .sp-coll-grid.view-list .sp-prod-link .img-wrap { width: 100px; height: 100px; }
  .sp-coll-grid.view-list .sp-prod-card .name { font-size: 14px; }
  .sp-coll-grid.view-list .sp-prod-link .price { font-size: 14px; }

  /* Pagination: smaller buttons */
  .sp-pagination { gap: 4px; margin-top: 36px; }
  .pg-num, .pg-arrow {
    min-width: 36px; height: 36px;
    padding: 0 10px;
    font-size: 13px;
  }

  /* PDP gallery: thumbs go below main image as horizontal strip */
  .sp-product { padding: 24px var(--pad-x) 36px; }
  .sp-pdp-gallery {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pdp-thumbs {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    order: 2;
  }
  .pdp-main-img { order: 1; }
  .pdp-thumb { width: 64px; height: 64px; }
  .pdp-thumb { flex-shrink: 0; }

  /* PDP info */
  .pdp-price { margin-bottom: 18px; padding-bottom: 18px; }
  .pdp-price .now { font-size: 32px; }
  .pdp-buy-row { flex-wrap: wrap; gap: 8px; }
  .pdp-add { flex: 1 1 100%; order: 3; }
  .pdp-qty { order: 1; }
  .pdp-wishlist { order: 2; width: 46px; height: 46px; }

  /* PDP tabs */
  .sp-pdp-tabs { padding: 36px var(--pad-x); }
  .pdp-tab { padding: 12px 16px; font-size: 13px; }
  .pdp-tab-panel h3 { font-size: 19px; }

  /* PDP review cards back to 1 col */
  .sp-reviews-grid.in-pdp { grid-template-columns: 1fr; }

  /* Wishlist page head: stack count under title */
  .sp-wl-page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ----------------------------------------------------------------------------
   SMALL MOBILE ( <= 480px )
   ---------------------------------------------------------------------------- */
@media (max-width: 480px) {

  /* Tighter outer padding */
  :root { --pad-x: 16px; }

  /* Page hero: hide decorative stamp entirely */
  .hero-stamp-wrap { display: none; }
  .sp-page-hero .hero-text h1 { font-size: clamp(30px, 8vw, 40px); }
  .sp-page-hero .hero-meta { gap: 12px; font-size: 12px; }

  /* Discount tiers: full-width chips */
  .sp-discount-tiers-inner { gap: 8px; }
  .tier-chip {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 9px 10px;
  }

  /* Toolbar: stack everything */
  .sp-coll-toolbar { padding: 10px 12px; }
  .result-count { font-size: 13px; }
  .toolbar-sort { flex: 1; }
  .toolbar-sort .sort-select { width: 100%; min-width: 0; }

  /* Hide list view toggle on tiny screens — list view doesn't add value here */
  .view-toggle { display: none; }

  /* PDP price */
  .pdp-price .now { font-size: 28px; }
  .pdp-title { font-size: clamp(26px, 7vw, 34px); }
  .pdp-trust li { gap: 10px; }

  /* PDP tabs scroll smoothly */
  .pdp-tab { padding: 11px 14px; font-size: 12px; }

  /* Wishlist actions: stack vertically */
  .sp-wl-actions { flex-wrap: wrap; }
  .sp-wl-page-move { flex: 1 1 100%; }
}

/* ----- size_guide_modal ----- */
/* ============================================================================
   SIZE GUIDE MODAL
   Centered popup triggered by .pdp-size-guide. Reuses cart overlay pattern
   for the backdrop; the modal itself is centered (not a side drawer).
   ============================================================================ */
.sp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 43, 43, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
  z-index: 100;
}
.sp-modal-overlay.open { opacity: 1; pointer-events: auto; }

.sp-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(0.97);
  width: 720px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  background: var(--c-white);
  border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.3);
  z-index: 101;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sp-modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.sp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.sp-modal-head h3 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--c-charcoal);
  letter-spacing: -0.01em;
}
.sp-modal-head h3 em { font-style: italic; color: var(--c-tan); }
.sp-modal-close {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-charcoal);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.sp-modal-close:hover { background: var(--c-cream-deep); }
.sp-modal-close .icon { width: 20px; height: 20px; }
.sp-modal-body {
  padding: 22px 28px 28px;
  overflow-y: auto;
}

/* Size guide content inside the modal */
.size-guide-intro {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.55;
  margin-bottom: 20px;
}
.size-guide-table-wrap {
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 26px;
}
.size-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--c-text);
}
.size-guide-table thead {
  background: var(--c-cream);
}
.size-guide-table th {
  text-align: left;
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-charcoal);
  border-bottom: 1px solid var(--c-border);
}
.size-guide-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.size-guide-table tbody tr:last-child td { border-bottom: none; }
.size-guide-table tbody tr:hover { background: var(--c-cream); }
.size-guide-table td strong {
  color: var(--c-charcoal);
  font-weight: 600;
}
.size-guide-h {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--c-charcoal);
  margin: 0 0 10px;
}
.size-guide-h + .size-guide-list,
.size-guide-h + .size-guide-p { margin-top: 0; }
.size-guide-list {
  margin: 0 0 22px;
  padding-left: 0;
  list-style: none;
}
.size-guide-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text);
}
.size-guide-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-tan);
}
.size-guide-list li strong {
  color: var(--c-charcoal);
  font-weight: 600;
}
.size-guide-p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
}

@media (max-width: 600px) {
  .sp-modal-head { padding: 16px 18px; }
  .sp-modal-head h3 { font-size: 20px; }
  .sp-modal-body { padding: 16px 18px 22px; }
  .size-guide-table th,
  .size-guide-table td {
    padding: 10px 10px;
    font-size: 12px;
  }
  .size-guide-table th {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}

/* ----- reviews_page ----- */
/* ============================================================================
   ============================================================================
   REVIEWS PAGE — reviews.html
   Standalone "See all reviews" page. Re-uses .pdp-reviews-summary (score+bars),
   .sp-pagination, .toolbar-sort. Adds dedicated styles for the review list.
   ============================================================================
   ============================================================================ */

.sp-rev-page {
  padding: 32px var(--pad-x) 80px;
  background: var(--c-cream);
  min-height: 60vh;
}
.sp-rev-page-inner {
  max-width: 980px;
  margin: 0 auto;
}

/* ---- Page header: product mini-card + title block ---- */
.sp-rev-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 28px;
}

.sp-rev-product {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px 12px 12px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--c-charcoal);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.sp-rev-product:hover {
  border-color: var(--c-tan);
  transform: translateY(-1px);
}
.sp-rev-product .img {
  width: 64px; height: 64px;
  background: var(--c-cream-deep);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  font-size: 11px;
}
.sp-rev-product .meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sp-rev-product .meta .kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 600;
}
.sp-rev-product .meta .name {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--c-charcoal);
  letter-spacing: -0.005em;
}
.sp-rev-product .meta .price {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-charcoal);
}
.sp-rev-product .meta .price .was {
  text-decoration: line-through;
  color: var(--c-muted);
  font-weight: 400;
  margin-left: 4px;
}
.sp-rev-product .back {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-charcoal);
  flex-shrink: 0;
}
.sp-rev-product:hover .back {
  background: var(--c-tan);
  color: var(--c-cream);
}

.sp-rev-title-block {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-border);
}
.sp-rev-title {
  grid-column: 1 / -1;
  font-family: var(--f-display);
  font-size: clamp(36px, 4.5vw, 52px);
  font-weight: 500;
  color: var(--c-charcoal);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.sp-rev-title em { font-style: italic; color: var(--c-tan); }
.sp-rev-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--c-muted);
}
.sp-rev-meta .stars { display: inline-flex; gap: 1px; color: var(--c-tan); }
.sp-rev-meta .stars .icon { width: 18px; height: 18px; }
.sp-rev-meta .rating-num { font-weight: 700; color: var(--c-charcoal); font-size: 16px; }
.sp-rev-meta .sep { color: var(--c-cream-warm); }
.sp-rev-meta .count { color: var(--c-muted); }
.sp-rev-write-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-charcoal);
  color: var(--c-cream);
  border: none;
  padding: 11px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
  justify-self: end;
}
.sp-rev-write-btn:hover { background: var(--c-forest); transform: translateY(-1px); }
.sp-rev-write-btn .icon { width: 14px; height: 14px; }

/* ---- Summary block (overrides for the page context) ---- */
.sp-rev-summary { margin-bottom: 24px; }
.sp-rev-summary .rs-bar {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  text-align: left;
  font-family: inherit;
  transition: background 0.2s var(--ease);
}
.sp-rev-summary .rs-bar:hover { background: rgba(255,255,255,0.6); }

/* ---- Filter + sort bar ---- */
.sp-rev-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-border);
}
.sp-rev-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sp-rev-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-charcoal);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.sp-rev-chip span {
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 500;
}
.sp-rev-chip:hover { border-color: var(--c-tan); }
.sp-rev-chip.active {
  background: var(--c-charcoal);
  border-color: var(--c-charcoal);
  color: var(--c-cream);
}
.sp-rev-chip.active span { color: rgba(244,245,243,0.7); }

/* ---- Review list ---- */
.sp-rev-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sp-rev-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 22px 24px;
  transition: border-color 0.2s var(--ease);
}
.sp-rev-card:hover { border-color: var(--c-cream-warm); }

.sp-rev-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.sp-rev-card-head .stars {
  display: inline-flex;
  gap: 1px;
  color: var(--c-tan);
}
.sp-rev-card-head .stars .icon { width: 16px; height: 16px; }
.sp-rev-card-date { font-size: 12px; color: var(--c-muted); }

.sp-rev-card-title {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--c-charcoal);
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  line-height: 1.3;
}
.sp-rev-card-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0 0 14px;
}

.sp-rev-card-photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.sp-rev-photo {
  width: 78px; height: 78px;
  border: 1px solid var(--c-border);
  background: var(--c-cream-deep);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  font-size: 10px;
  cursor: pointer;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.sp-rev-photo:hover {
  transform: scale(1.04);
  border-color: var(--c-tan);
}

.sp-rev-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
}

.sp-rev-card-author {
  display: flex;
  gap: 12px;
  align-items: center;
}
.sp-rev-card-author .avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c-forest);
  color: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.sp-rev-card-author .info { font-size: 13px; line-height: 1.4; }
.sp-rev-card-author .name {
  font-weight: 600;
  color: var(--c-charcoal);
}
.sp-rev-card-author .name .where {
  font-weight: 400;
  color: var(--c-muted);
}
.sp-rev-card-author .meta {
  font-size: 12px;
  color: var(--c-muted);
  margin-top: 1px;
}
.sp-rev-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--c-forest);
  font-weight: 600;
  margin-top: 2px;
}
.sp-rev-verified .icon { width: 12px; height: 12px; }

.sp-rev-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sp-rev-helpful-label {
  font-size: 12px;
  color: var(--c-muted);
  margin-right: 4px;
}
.sp-rev-helpful-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-charcoal);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.sp-rev-helpful-btn:hover {
  border-color: var(--c-tan);
  color: var(--c-tan);
}
.sp-rev-helpful-btn.voted {
  background: var(--c-forest);
  color: var(--c-cream);
  border-color: var(--c-forest);
}
.sp-rev-helpful-btn .icon { width: 13px; height: 13px; }

/* Store response inset */
.sp-rev-response {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--c-cream);
  border-radius: 10px;
  border-left: 3px solid var(--c-forest);
}
.sp-rev-response-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.sp-rev-response-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-forest);
  letter-spacing: 0.02em;
}
.sp-rev-response-date {
  font-size: 11px;
  color: var(--c-muted);
}
.sp-rev-response-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-text);
  margin: 0;
}

/* ---- Responsive tweaks ---- */
@media (max-width: 768px) {
  .sp-rev-page { padding: 20px var(--pad-x) 56px; }
  .sp-rev-title-block { grid-template-columns: 1fr; align-items: start; }
  .sp-rev-write-btn { justify-self: start; }
  .sp-rev-card { padding: 18px 16px; }
  .sp-rev-card-title { font-size: 17px; }
  .sp-rev-card-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .sp-rev-card-actions { justify-content: flex-start; }
  .sp-rev-controls { flex-direction: column; align-items: flex-start; }
  .sp-rev-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding-bottom: 4px;
  }
  .sp-rev-chip { flex-shrink: 0; }
}

@media (max-width: 480px) {
  .sp-rev-product { grid-template-columns: 56px 1fr auto; gap: 12px; }
  .sp-rev-product .img { width: 56px; height: 56px; }
  .sp-rev-product .meta .name { font-size: 15px; }
  .sp-rev-photo { width: 64px; height: 64px; }
}

/* ----- write_review_modal ----- */
/* ============================================================================
   WRITE A REVIEW MODAL
   Form-specific styles. Reuses .sp-modal / .sp-modal-overlay shell.
   The .sp-modal-wr modifier widens the modal slightly for the form.
   ============================================================================ */

/* Slightly wider than the size guide modal for comfortable form layout */
.sp-modal-wr { width: 640px; }

/* Product context banner inside the modal */
.wr-product-context {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--c-cream);
  border-radius: 12px;
  margin-bottom: 22px;
}
.wr-product-context .img {
  width: 56px; height: 56px;
  background: var(--c-cream-deep);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  font-size: 11px;
}
.wr-product-context .meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wr-product-context .meta .kicker {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 600;
}
.wr-product-context .meta .name {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--c-charcoal);
}

/* Form layout */
.write-review-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.wr-section { display: flex; flex-direction: column; gap: 8px; }
.wr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wr-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Labels and notes */
.wr-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-charcoal);
  letter-spacing: 0.01em;
}
.wr-required { color: #b85450; margin-left: 2px; }
.wr-note {
  font-size: 12px;
  color: var(--c-muted);
  font-weight: 400;
  margin-left: 4px;
}
.wr-note-block { margin-left: 0; margin-top: 4px; line-height: 1.5; }

/* Error inline messages */
.wr-error {
  font-size: 12px;
  color: #b85450;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Inputs / textarea / selects */
.wr-input,
.wr-textarea,
.wr-select {
  width: 100%;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--c-charcoal);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  outline: none;
}
.wr-input:focus,
.wr-textarea:focus,
.wr-select:focus {
  border-color: var(--c-tan);
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.18);
}
.wr-input::placeholder,
.wr-textarea::placeholder { color: var(--c-cream-warm); }
.wr-input.invalid,
.wr-textarea.invalid {
  border-color: #b85450;
  box-shadow: 0 0 0 3px rgba(184, 84, 80, 0.12);
}

.wr-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}
.wr-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A7363' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.wr-helper-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.wr-charcount {
  font-size: 11px;
  color: var(--c-muted);
  margin-left: auto;
}
.wr-charcount.over { color: #b85450; }

/* Star rating */
.wr-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wr-star {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--c-cream-warm);
  transition: transform 0.15s var(--ease), color 0.15s var(--ease);
  border-radius: 6px;
}
.wr-star:hover { transform: scale(1.1); }
.wr-star .icon { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.wr-star.lit { color: var(--c-tan); }
.wr-star.lit .icon { fill: currentColor; }
.wr-rating-label {
  margin-left: 12px;
  font-size: 13px;
  color: var(--c-muted);
  font-weight: 500;
}
.wr-rating-label.set { color: var(--c-charcoal); font-weight: 600; }

/* Photo upload area */
.wr-photo-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 16px;
  border: 1.5px dashed var(--c-border);
  border-radius: 12px;
  background: var(--c-cream);
  color: var(--c-charcoal);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.wr-photo-upload:hover,
.wr-photo-upload:focus {
  border-color: var(--c-tan);
  background: var(--c-cream-deep);
  outline: none;
}
.wr-photo-upload .icon { width: 28px; height: 28px; color: var(--c-muted); }
.wr-photo-text { font-size: 13px; font-weight: 600; }
.wr-photo-sub { font-size: 11px; color: var(--c-muted); }
.wr-photo-upload.has-files {
  border-style: solid;
  border-color: var(--c-forest);
  background: var(--c-cream);
}
.wr-photo-upload.has-files .icon { color: var(--c-forest); }

/* Anonymous checkbox */
.wr-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--c-text);
  user-select: none;
}
.wr-checkbox input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--c-forest);
  cursor: pointer;
  flex-shrink: 0;
}

/* Action buttons */
.wr-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
  margin-top: 4px;
}
.wr-cancel {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-charcoal);
  padding: 11px 22px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.wr-cancel:hover {
  background: var(--c-cream);
  border-color: var(--c-cream-warm);
}
.wr-submit {
  background: var(--c-charcoal);
  color: var(--c-cream);
  border: none;
  padding: 12px 26px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.wr-submit:hover { background: var(--c-forest); transform: translateY(-1px); }
.wr-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Success state */
.wr-success {
  text-align: center;
  padding: 28px 16px 12px;
}
.wr-success-icon {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--c-forest);
  color: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wr-success-icon .icon { width: 32px; height: 32px; }
.wr-success-title {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--c-charcoal);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.wr-success-title em { font-style: italic; color: var(--c-tan); }
.wr-success-text {
  font-size: 14px;
  color: var(--c-text);
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto 22px;
}

/* Mobile */
@media (max-width: 600px) {
  .sp-modal-wr { width: auto; }
  .wr-row { grid-template-columns: 1fr; }
  .wr-star .icon { width: 26px; height: 26px; }
  .wr-rating-label { margin-left: 8px; font-size: 12px; }
  .wr-actions { flex-direction: column-reverse; align-items: stretch; }
  .wr-cancel, .wr-submit { width: 100%; text-align: center; }
}

/* ----- static_subpages ----- */
/* ============================================================================
   ============================================================================
   SUB-PAGE LAYOUTS
   Shared scaffolding for the 13 sub-pages: FAQ, Shipping, Returns, Track Order,
   Contact, About, Sourcing, Careers, Privacy, Terms, Accessibility,
   California Notice. Built on the same tokens as the home page so type, color
   and spacing stay consistent. Page hero + breadcrumb come from the existing
   .sp-breadcrumb / .sp-page-hero rules above; this section only adds page-hero
   variants and the section-level scaffolding (.sp-page, .sp-prose, etc.).
   ============================================================================
   ============================================================================ */

/* ---------- Page hero variants -------------------------------------------- */
/* Forest variant — green editorial hero used by About and Sourcing pages. */
.sp-page-hero.forest {
  background: var(--c-forest);
  border-bottom-color: var(--c-forest-deep);
  position: relative;
  overflow: hidden;
}
.sp-page-hero.forest::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 600px 400px at 20% 0%,    rgba(212,165,116,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 100%, rgba(255,255,255,0.06) 0%, transparent 55%);
  pointer-events: none;
}
.sp-page-hero.forest .sp-page-hero-inner { position: relative; }
.sp-page-hero.forest .hero-text h1 { color: var(--c-cream); }
.sp-page-hero.forest .hero-text h1 em { color: var(--c-tan); }
.sp-page-hero.forest .hero-text p { color: rgba(244,245,243,0.78); }
.sp-page-hero.forest .sp-section-eyebrow { color: var(--c-tan); }
.sp-page-hero.forest .hero-meta {
  border-top-color: rgba(244,245,243,0.20);
  color: rgba(244,245,243,0.85);
}
.sp-page-hero.forest .hero-meta-item .icon { color: var(--c-tan); }

/* Simple variant — single-column hero for legal / utility pages
   (Privacy, Terms, Accessibility, California Notice). No stamp on the right. */
.sp-page-hero.simple .sp-page-hero-inner { grid-template-columns: 1fr; }
.sp-page-hero.simple .hero-text { max-width: 760px; }

/* Compact variant — slightly tighter padding for short list pages
   (Track Order helper page). */
.sp-page-hero.compact { padding-top: 18px; padding-bottom: 18px; }

/* ---------- Page section --------------------------------------------------- */
.sp-page {
  padding: 80px var(--pad-x);
  background: var(--c-cream);
}
.sp-page.alt  { background: var(--c-cream-deep); }
.sp-page.warm { background: #F8F5EE; }
.sp-page-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.sp-page-inner.narrow { max-width: 760px; }
.sp-page-inner.medium { max-width: 980px; }

.sp-page-head {
  margin-bottom: 30px;
  max-width: 1475px;
}
.sp-page-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.sp-page-head .eyebrow {
  font-family: var(--f-script);
  font-size: 22px;
  color: var(--c-tan);
  display: block;
  margin-bottom: 6px;
}
.sp-page-head h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  color: var(--c-charcoal);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.sp-page-head h2 em { font-style: italic; color: var(--c-forest); }
.sp-page-head p {
  font-size: 16px;
  color: var(--c-muted);
  line-height: 1.6;
  max-width: 1475px;
}
/* No content below? Drop the trailing margin so section padding stays balanced. */
.sp-page-inner > .sp-page-head:last-child { margin-bottom: 0; }
/* Two page-heads paired in a 2-up grid: drop trailing margin for the same reason. */
.sp-grid-2 > .sp-page-head { margin-bottom: 0; }

/* ---------- Spacing utilities (replaces inline margin styles) ------------- */
.sp-page-head.spacing-lg { margin-top: 60px; margin-bottom: 28px; }
.sp-prose.mt-md { margin-top: 40px; }
.sp-prose.mt-lg { margin-top: 30px; }
.sp-prose .small.mt-lg,
.sp-page p.small.mt-lg { margin-top: 50px; }

/* Inline forest-colored underlined link, used in non-prose containers
   (form notes, captions, body paragraphs outside .sp-prose). */
.inline-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease);
}
.inline-link:hover { color: var(--c-white); }

/* ---------- Long-form prose ----------------------------------------------- */
.sp-prose {
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-text);
  max-width: 1475px;
}
.sp-prose .lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--c-charcoal);
  margin-bottom: 32px;
}
.sp-prose h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--c-charcoal);
  letter-spacing: -0.01em;
  margin-top: 56px;
  margin-bottom: 18px;
}
.sp-prose h2 em { font-style: italic; color: var(--c-forest); }
.sp-prose h2:first-child { margin-top: 0; }
.sp-prose h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 21px;
  color: var(--c-charcoal);
  margin-top: 36px;
  margin-bottom: 12px;
}
.sp-prose p { margin-bottom: 18px; }
.sp-prose p:last-child { margin-bottom: 0; }
.sp-prose a {
  color: var(--c-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.sp-prose a:hover { color: var(--c-forest-deep); }
.sp-prose ul, .sp-prose ol {
  margin-bottom: 22px;
  padding-left: 24px;
}
.sp-prose ul li { list-style: disc; margin-bottom: 8px; }
.sp-prose ol li { list-style: decimal; margin-bottom: 8px; }
.sp-prose li::marker { color: var(--c-tan); }
.sp-prose blockquote {
  border-left: 2px solid var(--c-tan);
  padding: 4px 0 4px 24px;
  margin: 28px 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: var(--c-charcoal);
}
.sp-prose .meta {
  font-size: 13px;
  color: var(--c-muted);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}
.sp-prose .small { font-size: 13px; color: var(--c-muted); line-height: 1.6; }

/* Sticky-TOC layout for long legal pages. */
.sp-prose-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  align-items: start;
}
.sp-toc {
  position: sticky;
  top: 92px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-muted);
  border-left: 1px solid var(--c-border);
  padding-left: 22px;
}
.sp-toc h6,
.sp-toc .toc-label {
  display: block;
  font-family: var(--f-script);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  color: var(--c-tan);
  margin: 0 0 16px;
  letter-spacing: 0;
  text-transform: none;
}
.sp-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-toc li { list-style: none; margin: 0; padding: 0; }
.sp-toc a {
  display: block;
  padding: 9px 0 9px 16px;
  margin-left: -23px;
  border-left: 1px solid transparent;
  color: var(--c-muted);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.sp-toc a:hover {
  color: var(--c-forest);
  border-left-color: var(--c-tan);
}

/* Anchor scroll offset so deep links land below the sticky header. */
.sp-anchor { scroll-margin-top: 100px; }

/* ---------- Generic info-card grids --------------------------------------- */
.sp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.sp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.sp-info-card {
  background: var(--c-white, #fff);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-info-card .ic-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-forest);
  margin-bottom: 4px;
}
.sp-info-card .ic-icon .icon { width: 18px; height: 18px; }
.sp-info-card h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 19px;
  color: var(--c-charcoal);
  letter-spacing: -0.01em;
}
.sp-info-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
}
.sp-info-card .ic-link {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-forest);
  font-weight: 500;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sp-info-card .ic-link:hover { color: var(--c-tan); }
.sp-info-card .ic-link .icon { width: 14px; height: 14px; }

/* ---------- Stat row (used on About) -------------------------------------- */
.sp-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-white, #fff);
  margin-top: 56px;
}
.sp-stat-row .stat {
  padding: 30px 24px;
  border-right: 1px solid var(--c-border);
  text-align: left;
}
.sp-stat-row .stat:last-child { border-right: none; }
.sp-stat-row .stat .num {
  font-family: var(--f-display);
  font-size: 38px;
  line-height: 1;
  color: var(--c-charcoal);
  letter-spacing: -0.02em;
  display: block;
}
.sp-stat-row .stat .num em { font-style: italic; color: var(--c-forest); font-weight: 500; }
.sp-stat-row .stat .lbl {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 8px;
}

/* ---------- FAQ accordion -------------------------------------------------- */
.sp-faq { border-top: 1px solid var(--c-border); max-width: 1100px; }
.sp-faq-cat {
  margin-bottom: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--c-border);
}
.sp-faq-cat:first-child {
  border-top: none;
  padding-top: 0;
}
.sp-faq-cat .cat-label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0;
  border-bottom: none;
  margin-bottom: 10px;
}
.sp-faq-cat .cat-label .num,
.sp-faq-cat .cat-label .eyebrow {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: var(--c-tan);
  letter-spacing: -0.01em;
  margin: 0;
  display: inline-block;
}
.sp-faq-cat .cat-label h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  color: var(--c-charcoal);
  letter-spacing: -0.01em;
  margin: 0;
}
.sp-faq-cat .cat-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-muted);
  margin: 0 0 24px;
  max-width: 820px;
}
.sp-faq details {
  border-bottom: 1px solid var(--c-border);
  padding: 0;
}
.sp-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 17px;
  font-weight: 500;
  color: var(--c-charcoal);
  position: relative;
}
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::marker { content: ''; }
.sp-faq summary .faq-toggle {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
  flex-shrink: 0;
}
.sp-faq summary .faq-toggle .icon { width: 13px; height: 13px; color: var(--c-forest); }
.sp-faq details[open] summary .faq-toggle {
  transform: rotate(180deg);
  background: var(--c-cream);
}
.sp-faq .faq-body {
  padding: 0 0 26px 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text);
  max-width: 820px;
}
.sp-faq .faq-body p { margin-bottom: 12px; }
.sp-faq .faq-body p:last-child { margin-bottom: 0; }
.sp-faq .faq-body a {
  color: var(--c-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sp-faq .faq-body ul {
  margin: 6px 0 12px;
  padding-left: 22px;
}
.sp-faq .faq-body ul li {
  list-style: disc;
  margin-bottom: 4px;
}

/* ---------- Numbered step list (Returns, Sourcing, Careers, Track) ---------- */
.sp-steps { border-top: 1px solid var(--c-border); }
.sp-step {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-bottom: 1px solid var(--c-border);
  align-items: start;
}
.sp-step .step-num {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  color: var(--c-tan);
  letter-spacing: -0.03em;
}
.sp-step .step-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-forest);
  background: var(--c-cream-deep);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.sp-step h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 24px;
  color: var(--c-charcoal);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.sp-step p {
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.7;
  max-width: 1475px;
}
.sp-step p + p { margin-top: 10px; }

/* Compact variant: 2-up grid layout for short, single-line steps */
.sp-steps.compact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
  row-gap: 4px;
  border-top: none;
}
.sp-steps.compact .sp-step {
  grid-template-columns: 60px 1fr;
  gap: 20px;
  align-items: center;
  padding: 10px 0;
  border-bottom: none;
}
.sp-steps.compact .sp-step .step-num {
  font-size: 48px;
  line-height: 0.9;
  text-align: center;
}
.sp-steps.compact .sp-step h3 { margin-bottom: 0; }

/* ---------- Rate table (Shipping page) ------------------------------------ */
.sp-table-wrap {
  border: 1px solid var(--c-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-white, #fff);
}
.sp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sp-table thead th {
  background: var(--c-cream-deep);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-charcoal);
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border);
}
.sp-table tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  vertical-align: middle;
}
.sp-table tbody tr:last-child td { border-bottom: none; }
.sp-table .price {
  font-family: var(--f-display);
  font-size: 17px;
  color: var(--c-forest);
  font-weight: 500;
}
.sp-table .pill {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: var(--c-cream-deep);
  color: var(--c-charcoal);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
}
.sp-table .pill.green {
  background: var(--c-forest);
  color: var(--c-cream);
}

/* ---------- Form (Contact, Track Order) ----------------------------------- */
.sp-form {
  background: var(--c-white, #fff);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 36px 36px 32px;
}
.sp-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.sp-form .form-row.single { grid-template-columns: 1fr; }
.sp-field { display: flex; flex-direction: column; gap: 8px; }
.sp-field label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-charcoal);
  font-weight: 600;
}
.sp-field input,
.sp-field select,
.sp-field textarea {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--c-charcoal);
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 14px 16px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.sp-field input:focus,
.sp-field select:focus,
.sp-field textarea:focus {
  outline: none;
  border-color: var(--c-forest);
  background: var(--c-white, #fff);
}
.sp-field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.5;
}
.sp-form-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.sp-form-actions .note {
  font-size: 12px;
  color: var(--c-muted);
  max-width: 320px;
  line-height: 1.5;
}
.sp-form-submit {
  background: var(--c-forest);
  color: var(--c-cream);
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  padding: 16px 36px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.sp-form-submit:hover {
  background: var(--c-forest-deep);
  transform: translateY(-1px);
}
.sp-form-submit .icon { width: 14px; height: 14px; }

/* Two-column contact layout (form + side info card). */
.sp-contact-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  align-items: start;
}
.sp-contact-side {
  background: var(--c-forest);
  color: var(--c-cream);
  padding: 36px 32px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.7;
}
.sp-contact-side h3 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--c-cream);
}
.sp-contact-side h3 em { font-style: italic; color: var(--c-tan); }
.sp-contact-side p { color: rgba(244,245,243,0.8); margin-bottom: 18px; }
.sp-contact-side .cs-block { margin-bottom: 22px; }
.sp-contact-side .cs-block:last-child { margin-bottom: 0; }
.sp-contact-side .cs-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,245,243,0.55);
  margin-bottom: 4px;
}
.sp-contact-side a {
  color: var(--c-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sp-contact-side a:hover { color: var(--c-tan); }

/* ---------- Track Order single-form pattern ------------------------------- */
.sp-track {
  max-width: 540px;
  margin: 0 auto;
}
.sp-track .help-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 28px;
  font-size: 13px;
  color: var(--c-muted);
}
.sp-track .help-row a {
  color: var(--c-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sp-track .help-row a:hover { color: var(--c-forest-deep); }

/* ---------- Job listings -------------------------------------------------- */
.sp-jobs { border-top: 1px solid var(--c-border); }
.sp-job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--c-border);
  align-items: center;
}
.sp-job h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--c-charcoal);
  margin-bottom: 6px;
}
.sp-job .job-meta {
  font-size: 13px;
  color: var(--c-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.sp-job .job-meta span { display: inline-flex; align-items: center; gap: 4px; }
.sp-job .job-apply {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-forest);
  border: 1px solid var(--c-forest);
  padding: 12px 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.sp-job .job-apply:hover {
  background: var(--c-forest);
  color: var(--c-cream);
}
.sp-job .job-apply .icon { width: 12px; height: 12px; }
.sp-no-jobs {
  text-align: center;
  padding: 50px 0;
  color: var(--c-muted);
  font-size: 15px;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

/* ---------- Split image+text section (About, etc.) ------------------------ */
.sp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.sp-split.reverse .sp-split-img { order: 1; }
.sp-split-img {
  aspect-ratio: 5 / 4;
  border-radius: 4px;
  position: relative;
}
.sp-split-img .stamp {
  position: absolute;
  bottom: 22px;
  right: 22px;
  background: var(--c-cream);
  padding: 9px 16px;
  font-family: var(--f-script);
  font-size: 22px;
  color: var(--c-forest);
  transform: rotate(2deg);
  border-radius: 2px;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,0.20);
}
.sp-split-text .eyebrow {
  display: block;
  font-family: var(--f-script);
  font-size: 24px;
  color: var(--c-tan);
  margin-bottom: 6px;
}
.sp-split-text h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-charcoal);
  margin-bottom: 18px;
}
.sp-split-text h2 em { font-style: italic; color: var(--c-forest); }
.sp-split-text p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-text);
  margin-bottom: 16px;
}
.sp-split-text p:last-child { margin-bottom: 0; }
.sp-split-text .signature {
  font-family: var(--f-script);
  font-size: 32px;
  color: var(--c-forest);
  display: block;
  margin-top: 18px;
}

/* ---------- Values grid (About) ------------------------------------------ */
.sp-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  margin-top: 50px;
}
.sp-value {
  padding: 36px 30px 32px;
  border-right: 1px solid var(--c-border);
}
.sp-value:nth-child(3n) { border-right: none; }
.sp-value:nth-child(n+4) { border-top: 1px solid var(--c-border); }
.sp-value .v-num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 28px;
  color: var(--c-tan);
  display: block;
  margin-bottom: 8px;
}
.sp-value h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 21px;
  color: var(--c-charcoal);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.sp-value p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-muted);
}

/* ---------- CTA strip (used at bottom of most pages) ---------------------- */
.sp-cta-strip {
  background: var(--c-cream-deep);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: 60px var(--pad-x);
  text-align: center;
}
.sp-cta-strip-inner {
  max-width: 720px;
  margin: 0 auto;
}
.sp-cta-strip .eyebrow {
  font-family: var(--f-script);
  font-size: 24px;
  color: var(--c-tan);
  display: block;
  margin-bottom: 6px;
}
.sp-cta-strip h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  color: var(--c-charcoal);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.sp-cta-strip h2 em { font-style: italic; color: var(--c-forest); }
.sp-cta-strip p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-muted);
  margin-bottom: 24px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.sp-cta-strip .cta-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.sp-cta-strip .btn {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.sp-cta-strip .btn-primary {
  background: var(--c-forest);
  color: var(--c-cream);
}
.sp-cta-strip .btn-primary:hover {
  background: var(--c-forest-deep);
  transform: translateY(-1px);
}
.sp-cta-strip .btn-outline {
  background: transparent;
  color: var(--c-forest);
  border: 1px solid var(--c-forest);
}
.sp-cta-strip .btn-outline:hover {
  background: var(--c-forest);
  color: var(--c-cream);
}

/* ---------- Pull-quote band (Sourcing) ------------------------------------ */
.sp-quote {
  background: var(--c-forest);
  color: var(--c-cream);
  padding: 64px var(--pad-x);
  text-align: center;
}
.sp-quote-inner {
  max-width: 760px;
  margin: 0 auto;
}
.sp-quote blockquote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.35;
  color: var(--c-cream);
  margin-bottom: 18px;
}
.sp-quote blockquote em { color: var(--c-tan); font-style: italic; }
.sp-quote .attr {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,245,243,0.6);
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 1024px) {
  .sp-page { padding: 64px var(--pad-x); }
  .sp-prose-layout { grid-template-columns: 1fr; gap: 32px; }
  .sp-toc {
    position: static;
    border-left: none;
    border-top: 1px solid var(--c-border);
    padding-left: 0;
    padding-top: 18px;
  }
  .sp-toc a { margin-left: 0; padding-left: 0; border-left: none; }
  .sp-grid-3, .sp-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .sp-stat-row { grid-template-columns: repeat(2, 1fr); }
  .sp-stat-row .stat:nth-child(2) { border-right: none; }
  .sp-stat-row .stat:nth-child(1),
  .sp-stat-row .stat:nth-child(2) { border-bottom: 1px solid var(--c-border); }
  .sp-contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .sp-split { grid-template-columns: 1fr; gap: 40px; }
  .sp-split.reverse .sp-split-img { order: 0; }
  .sp-values { grid-template-columns: repeat(2, 1fr); }
  .sp-value:nth-child(3n) { border-right: 1px solid var(--c-border); }
  .sp-value:nth-child(2n) { border-right: none; }
}

@media (max-width: 700px) {
  .sp-page { padding: 50px var(--pad-x); }
  .sp-page-head { margin-bottom: 32px; }
  .sp-grid-2, .sp-grid-3, .sp-grid-4 { grid-template-columns: 1fr; }
  .sp-steps.compact { grid-template-columns: 1fr; column-gap: 0; }
  .sp-stat-row { grid-template-columns: 1fr; }
  .sp-stat-row .stat { border-right: none; border-bottom: 1px solid var(--c-border); }
  .sp-stat-row .stat:last-child { border-bottom: none; }
  .sp-step { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .sp-step .step-num { font-size: 48px; }
  .sp-form { padding: 28px 22px; }
  .sp-form .form-row { grid-template-columns: 1fr; }
  .sp-form-actions { flex-direction: column; align-items: stretch; }
  .sp-form-actions .note { max-width: none; }
  .sp-form-submit { width: 100%; justify-content: center; }
  .sp-faq summary { font-size: 16px; padding: 18px 0; gap: 14px; }
  .sp-faq-cat .cat-label h3 { font-size: 22px; }
  .sp-job { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; }
  .sp-values { grid-template-columns: 1fr; }
  .sp-value { border-right: none !important; }
  .sp-table th, .sp-table td { padding: 12px 14px; font-size: 13px; }
  .sp-table .pill { font-size: 10px; }
  .sp-prose h2 { font-size: 22px; margin-top: 36px; }
}

/* ----- cart_page ----- */
/* ============================================================================
   ============================================================================
   CART PAGE  (cart.html)
   ----------------------------------------------------------------------------
   Append this entire block to the END of css/shopstyle.css.
   Uses the existing design tokens: --c-cream, --c-forest, --c-tan, etc.
   ============================================================================
   ============================================================================ */

/* ============================================================================
   CART PAGE  —  HEADER STRIP
   ============================================================================ */
.sp-cartp-head {
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-border);
  padding: 28px var(--pad-x) 32px;
}
.sp-cartp-head-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.sp-cartp-title { flex: 1 1 auto; min-width: 280px; }
.sp-cartp-title h1 {
  font-family: var(--f-display);
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 10px 0 10px;
  color: var(--c-charcoal);
}
.sp-cartp-title h1 em { font-style: italic; color: var(--c-tan); }
.sp-cartp-sub {
  font-size: 14px;
  color: var(--c-muted);
}
.sp-cartp-sub [data-cartp-count] {
  color: var(--c-charcoal);
  font-weight: 600;
}

/* Step indicator */
.sp-cartp-steps {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  font-size: 13px;
  color: var(--c-muted);
}
.sp-cartp-steps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 22px;
  position: relative;
}
.sp-cartp-steps li:not(:last-child)::after {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--c-cream-warm);
  margin-left: 14px;
  margin-right: -14px;
}
.sp-cartp-steps .step-num {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-cream-deep);
  color: var(--c-muted);
  font-weight: 600;
  font-size: 12px;
  border: 1px solid var(--c-border);
}
.sp-cartp-steps .step-label {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 11px;
}
.sp-cartp-steps li.active .step-num {
  background: var(--c-forest);
  color: var(--c-cream);
  border-color: var(--c-forest);
}
.sp-cartp-steps li.active .step-label {
  color: var(--c-charcoal);
}
.sp-cartp-steps li.done .step-num {
  background: var(--c-tan);
  color: var(--c-white);
  border-color: var(--c-tan);
}

/* ============================================================================
   CART PAGE  —  MAIN LAYOUT  (items + summary)
   ============================================================================ */
.sp-cartp {
  background: var(--c-cream);
  padding: 36px var(--pad-x) 60px;
}
.sp-cartp-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: flex-start;
}
.sp-cartp-main { min-width: 0; }
.sp-cartp-summary { position: sticky; top: 24px; }

/* ============================================================================
   FREE SHIPPING PROGRESS BAR  (page version)
   ============================================================================ */
.sp-cartp-shipbar {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px rgba(43, 43, 43, 0.03);
}
.sp-cartp-shipbar .row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--c-text);
  margin-bottom: 9px;
}
.sp-cartp-shipbar .row .icon {
  width: 18px; height: 18px;
  color: var(--c-forest);
  flex-shrink: 0;
}
.sp-cartp-shipbar [data-cartp-ship-msg] strong {
  color: var(--c-forest);
  font-weight: 700;
}
.sp-cartp-shipbar.qualifies .row .icon { color: var(--c-tan); }
.sp-cartp-shipbar.qualifies [data-cartp-ship-msg] {
  color: var(--c-charcoal);
  font-weight: 500;
}
.sp-cartp-shipbar .progress {
  height: 6px;
  background: var(--c-cream-deep);
  border-radius: 3px;
  overflow: hidden;
}
.sp-cartp-shipbar .progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--c-forest) 0%, var(--c-tan) 100%);
  width: 0%;
  border-radius: 3px;
  transition: width 0.45s var(--ease);
}

/* ============================================================================
   CART PAGE  —  ITEMS HEADER ROW
   ============================================================================ */
.sp-cartp-itemshead {
  display: grid;
  grid-template-columns: 1fr 160px 110px;
  gap: 16px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--c-border);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-muted);
}
.sp-cartp-itemshead .col-qty { text-align: center; }
.sp-cartp-itemshead .col-total { text-align: right; }

/* ============================================================================
   CART PAGE  —  LINE ITEMS
   ============================================================================ */
.sp-cartp-items { /* container — items rendered by JS */ }

.sp-cartp-line {
  display: grid;
  grid-template-columns: 1fr 160px 110px;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 6px;
  border-bottom: 1px solid var(--c-border);
  position: relative;
  transition: background 0.2s var(--ease), opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.sp-cartp-line.is-removing {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

/* Product cell: image + info side by side */
.sp-cartp-line .cell-product {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  min-width: 0;
}
.sp-cartp-line .line-img {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  position: relative;
}
.sp-cartp-line .line-img .img-placeholder {
  font-size: 11px;
  font-style: italic;
  text-align: center;
  letter-spacing: 0.3px;
  padding: 4px;
}
.sp-cartp-line .line-img .badge {
  position: absolute;
  top: 6px; left: 6px;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  background: var(--c-forest);
  color: var(--c-cream);
  border-radius: 10px;
  font-weight: 600;
}
.sp-cartp-line .line-img .badge.bestseller { background: var(--c-tan); color: var(--c-white); }
.sp-cartp-line .line-img .badge.sale { background: #b85450; color: var(--c-white); }

.sp-cartp-line .line-info { flex: 1; min-width: 0; padding-top: 2px; }
.sp-cartp-line .line-name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 17px;
  color: var(--c-charcoal);
  display: block;
  margin-bottom: 6px;
  line-height: 1.3;
}
.sp-cartp-line .line-name:hover { color: var(--c-tan); }
.sp-cartp-line .line-meta {
  font-size: 12.5px;
  color: var(--c-muted);
  margin-bottom: 8px;
  line-height: 1.5;
}
.sp-cartp-line .line-meta .sep { margin: 0 7px; opacity: 0.5; }
.sp-cartp-line .line-stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--c-forest);
  font-weight: 500;
  margin-bottom: 12px;
}
.sp-cartp-line .line-stock .icon { width: 13px; height: 13px; }
.sp-cartp-line .line-stock.low { color: #b85450; }

.sp-cartp-line .line-unit {
  font-size: 12px;
  color: var(--c-muted);
  margin-top: 2px;
}

/* Footer row: save / remove inline links */
.sp-cartp-line .line-actions {
  display: flex;
  gap: 18px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.sp-cartp-line .line-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--c-muted);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.sp-cartp-line .line-action:hover {
  color: var(--c-forest);
  border-bottom-color: var(--c-forest);
}
.sp-cartp-line .line-action.remove:hover {
  color: #b85450;
  border-bottom-color: #b85450;
}
.sp-cartp-line .line-action .icon { width: 13px; height: 13px; }

/* Quantity cell */
.sp-cartp-line .cell-qty {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 4px;
}
.sp-cartp-line .qtybox {
  display: inline-flex;
  align-items: center;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 24px;
  overflow: hidden;
  height: 40px;
}
.sp-cartp-line .qtybox button {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-charcoal);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.sp-cartp-line .qtybox button:hover { background: var(--c-cream-deep); }
.sp-cartp-line .qtybox button:disabled {
  color: var(--c-cream-warm);
  cursor: not-allowed;
}
.sp-cartp-line .qtybox button:disabled:hover { background: transparent; }
.sp-cartp-line .qtybox button .icon { width: 12px; height: 12px; }
.sp-cartp-line .qtybox span {
  min-width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
  font-variant-numeric: tabular-nums;
}

/* Total cell */
.sp-cartp-line .cell-total {
  text-align: right;
  padding-top: 8px;
}
.sp-cartp-line .line-total {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--c-charcoal);
  font-variant-numeric: tabular-nums;
}
.sp-cartp-line .line-total-was {
  display: block;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--c-muted);
  text-decoration: line-through;
  margin-top: 2px;
}

/* ============================================================================
   CART PAGE  —  EMPTY STATE
   ============================================================================ */
.sp-cartp-empty {
  text-align: center;
  padding: 60px 24px;
  border: 1px dashed var(--c-border);
  border-radius: 16px;
  background: var(--c-white);
}
.sp-cartp-empty .empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--c-cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
}
.sp-cartp-empty .empty-icon .icon { width: 32px; height: 32px; }
.sp-cartp-empty h3 {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--c-charcoal);
  margin-bottom: 10px;
}
.sp-cartp-empty p {
  font-size: 14px;
  color: var(--c-muted);
  max-width: 380px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.sp-cartp-empty a.go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-forest);
  color: var(--c-cream);
  padding: 13px 28px;
  border-radius: 26px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.2s var(--ease);
}
.sp-cartp-empty a.go:hover {
  background: var(--c-tan);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(212,165,116,0.45);
}
.sp-cartp-empty a.go .icon { width: 14px; height: 14px; }

/* ============================================================================
   CART PAGE  —  ACTIONS BAR (continue / clear)
   ============================================================================ */
.sp-cartp-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 6px 0;
  flex-wrap: wrap;
}
.sp-cartp-keep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  color: var(--c-forest);
  border-bottom: 1px solid var(--c-forest);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.sp-cartp-keep:hover { color: var(--c-tan); border-color: var(--c-tan); }
.sp-cartp-keep .icon { width: 14px; height: 14px; }

.sp-cartp-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--c-muted);
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--c-border);
  background: transparent;
  transition: all 0.18s var(--ease);
}
.sp-cartp-clear:hover {
  color: #b85450;
  border-color: #b85450;
  background: rgba(184, 84, 80, 0.04);
}
.sp-cartp-clear .icon { width: 14px; height: 14px; }

/* ============================================================================
   CART PAGE  —  SAVED FOR LATER
   ============================================================================ */
.sp-cartp-saved {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--c-border);
}
.sp-cartp-saved.is-empty { display: none; }
.sp-cartp-saved-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.sp-cartp-saved-head h3 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--c-charcoal);
}
.sp-cartp-saved-head h3 em { font-style: italic; color: var(--c-tan); }
.sp-cartp-saved-head .count {
  font-size: 13px;
  color: var(--c-muted);
  background: var(--c-cream-deep);
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 500;
}

.sp-cartp-saved-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.sp-cartp-saved-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.sp-cartp-saved-card:hover {
  border-color: var(--c-cream-warm);
  transform: translateY(-2px);
}
.sp-cartp-saved-card .img {
  width: 70px;
  height: 70px;
  background: var(--c-cream);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  font-size: 10px;
  font-style: italic;
  flex-shrink: 0;
}
.sp-cartp-saved-card .info { flex: 1; min-width: 0; }
.sp-cartp-saved-card .name {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--c-charcoal);
  line-height: 1.3;
}
.sp-cartp-saved-card .meta {
  font-size: 11px;
  color: var(--c-muted);
  margin-bottom: 6px;
}
.sp-cartp-saved-card .price {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--c-charcoal);
  margin-bottom: 8px;
}
.sp-cartp-saved-card .saved-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sp-cartp-saved-card .saved-action {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 16px;
  border: 1px solid var(--c-forest);
  color: var(--c-forest);
  background: transparent;
  transition: all 0.18s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sp-cartp-saved-card .saved-action:hover {
  background: var(--c-forest);
  color: var(--c-cream);
}
.sp-cartp-saved-card .saved-action.delete {
  border-color: var(--c-border);
  color: var(--c-muted);
}
.sp-cartp-saved-card .saved-action.delete:hover {
  border-color: #b85450;
  color: #b85450;
  background: transparent;
}

/* ============================================================================
   CART PAGE  —  ORDER SUMMARY CARD
   ============================================================================ */
.sp-cartp-summary-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 26px 24px 22px;
  box-shadow: 0 2px 12px rgba(43, 43, 43, 0.04);
}
.sp-cartp-summary-title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--c-charcoal);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-border);
}
.sp-cartp-summary-title em { font-style: italic; color: var(--c-tan); }

/* Promo input */
.sp-cartp-promo {
  margin-bottom: 18px;
}
.sp-cartp-promo label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.sp-cartp-promo label .icon {
  width: 14px; height: 14px;
  color: var(--c-tan);
}
.sp-cartp-promo-row {
  display: flex;
  gap: 8px;
}
.sp-cartp-promo input {
  flex: 1;
  border: 1px solid var(--c-border);
  background: var(--c-cream);
  border-radius: 22px;
  padding: 11px 16px;
  font-size: 13px;
  font-family: inherit;
  color: var(--c-charcoal);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  min-width: 0;
}
.sp-cartp-promo input::placeholder {
  color: var(--c-muted);
  letter-spacing: 0;
  text-transform: none;
}
.sp-cartp-promo input:focus {
  outline: none;
  border-color: var(--c-tan);
  background: var(--c-white);
}
.sp-cartp-promo button {
  background: var(--c-charcoal);
  color: var(--c-cream);
  border-radius: 22px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.18s var(--ease);
}
.sp-cartp-promo button:hover { background: var(--c-forest); }
.sp-cartp-promo-msg {
  margin-top: 8px;
  font-size: 12px;
  min-height: 16px;
  line-height: 1.4;
}
.sp-cartp-promo-msg[data-state="ok"] {
  color: var(--c-forest);
  font-weight: 500;
}
.sp-cartp-promo-msg[data-state="error"] {
  color: #b85450;
}

/* Totals */
.sp-cartp-totals {
  padding: 14px 0 6px;
  border-top: 1px solid var(--c-border);
}
.sp-cartp-totals .sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  font-size: 14px;
  color: var(--c-text);
}
.sp-cartp-totals .sum-row span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--c-charcoal);
  font-weight: 500;
}
.sp-cartp-totals .sum-row .discount-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-forest);
  font-weight: 500;
}
.sp-cartp-totals .sum-row .discount-label em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  background: var(--c-cream-deep);
  color: var(--c-charcoal);
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
}
.sp-cartp-totals .sum-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  color: var(--c-muted);
  background: transparent;
  transition: all 0.15s var(--ease);
}
.sp-cartp-totals .sum-remove:hover {
  color: var(--c-white);
  background: #b85450;
}
.sp-cartp-totals .sum-remove .icon { width: 10px; height: 10px; }
.sp-cartp-totals .sum-row .discount-amt { color: var(--c-forest); font-weight: 600; }

.sp-cartp-totals .sum-hint {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: var(--c-cream-warm);
  position: relative;
  cursor: help;
}
.sp-cartp-totals .sum-hint:hover { color: var(--c-muted); }
.sp-cartp-totals .sum-hint::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-charcoal);
  color: var(--c-cream);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: 7px 11px;
  border-radius: 6px;
  white-space: normal;
  width: 180px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease);
  line-height: 1.4;
  z-index: 5;
}
.sp-cartp-totals .sum-hint::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--c-charcoal);
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}
.sp-cartp-totals .sum-hint:hover::after,
.sp-cartp-totals .sum-hint:hover::before { opacity: 1; }

.sp-cartp-totals .sum-total {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
  color: var(--c-charcoal);
}
.sp-cartp-totals .sum-total span:first-child { font-weight: 500; }
.sp-cartp-totals .sum-currency {
  font-size: 11px;
  color: var(--c-muted);
  margin-top: 4px;
  text-align: right;
}

/* Checkout button */
.sp-cartp-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--c-forest);
  color: var(--c-cream);
  padding: 17px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 18px;
  transition: all 0.2s var(--ease);
}
.sp-cartp-checkout:hover {
  background: var(--c-tan);
  color: var(--c-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(212,165,116,0.45);
}
.sp-cartp-checkout.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
.sp-cartp-checkout .icon { width: 14px; height: 14px; }

/* Express checkout */
.sp-cartp-express {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--c-border);
}
.sp-cartp-or {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--c-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sp-cartp-or em { font-style: italic; color: var(--c-tan); margin: 0 4px; }
.sp-cartp-paybtns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.sp-cartp-paybtns .paybtn {
  height: 42px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid transparent;
  transition: all 0.18s var(--ease);
}
.sp-cartp-paybtns .paybtn-paypal {
  background: #FFC439;
  color: #003087;
  font-style: italic;
  letter-spacing: -0.01em;
}
.sp-cartp-paybtns .paybtn-paypal:hover { filter: brightness(0.95); }
.sp-cartp-paybtns .paybtn-apple {
  background: #000;
  color: #fff;
}
.sp-cartp-paybtns .paybtn-apple:hover { background: #1a1a1a; }
.sp-cartp-paybtns .paybtn-gpay {
  background: #fff;
  color: #5F6368;
  border-color: #DADCE0;
}
.sp-cartp-paybtns .paybtn-gpay:hover {
  background: #f8f9fa;
  border-color: var(--c-cream-warm);
}
.apple-glyph {
  display: inline-block;
  width: 13px;
  height: 16px;
  background: currentColor;
  margin-right: 1px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/></svg>") no-repeat center / contain;
  vertical-align: -2px;
}

/* Trust list */
.sp-cartp-trust {
  margin: 22px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
  display: grid;
  gap: 9px;
}
.sp-cartp-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--c-text);
}
.sp-cartp-trust li .icon {
  width: 16px;
  height: 16px;
  color: var(--c-forest);
  flex-shrink: 0;
}

/* Accepted cards row */
.sp-cartp-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
}
.sp-cartp-cards .card {
  height: 24px;
  min-width: 38px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-charcoal);
  font-family: var(--f-body);
}
.sp-cartp-cards .card.visa {
  background: #1A1F71;
  color: #fff;
  font-style: italic;
  letter-spacing: 0.04em;
  border-color: #1A1F71;
}
.sp-cartp-cards .card.mc {
  position: relative;
  background: #fff;
  padding: 0 6px;
  gap: -4px;
}
.sp-cartp-cards .card.mc .mc-c1,
.sp-cartp-cards .card.mc .mc-c2 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.sp-cartp-cards .card.mc .mc-c1 { background: #EB001B; }
.sp-cartp-cards .card.mc .mc-c2 { background: #F79E1B; margin-left: -5px; mix-blend-mode: multiply; }
.sp-cartp-cards .card.amex {
  background: #006FCF;
  color: #fff;
  border-color: #006FCF;
}
.sp-cartp-cards .card.disc {
  background: #FF6000;
  color: #fff;
  border-color: #FF6000;
}
.sp-cartp-cards .card.pp {
  background: #FFC439;
  color: #003087;
  font-style: italic;
  border-color: #FFC439;
}
.sp-cartp-cards .card.apay {
  background: #000;
  color: #fff;
  border-color: #000;
  gap: 2px;
}
.sp-cartp-cards .card.apay .apple-glyph {
  width: 9px;
  height: 11px;
}

/* Help nudge below summary */
.sp-cartp-help {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-top: 16px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-cream-deep);
  font-size: 13px;
  color: var(--c-text);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.sp-cartp-help:hover {
  border-color: var(--c-tan);
  background: var(--c-white);
}
.sp-cartp-help .icon {
  width: 22px;
  height: 22px;
  color: var(--c-forest);
  flex-shrink: 0;
}
.sp-cartp-help span { line-height: 1.4; }
.sp-cartp-help strong {
  display: block;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 2px;
}
.sp-cartp-help em {
  font-style: italic;
  color: var(--c-tan);
}

/* ============================================================================
   CART PAGE  —  RECOMMENDATIONS SECTION
   ============================================================================ */
.sp-cartp-recs {
  background: var(--c-cream-deep);
  padding: 68px var(--pad-x) 80px;
  border-top: 1px solid var(--c-border);
}
.sp-cartp-recs-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.sp-cartp-recs .sp-section-head { margin-bottom: 32px; }

/* ============================================================================
   CART PAGE  —  RESPONSIVE
   ============================================================================ */
@media (max-width: 1100px) {
  .sp-cartp-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .sp-cartp-summary {
    position: static;
    order: 2;
  }
  .sp-cartp-main { order: 1; }
}

@media (max-width: 760px) {
  .sp-cartp-head { padding: 22px var(--pad-x) 22px; }
  .sp-cartp-head-inner { gap: 18px; }
  .sp-cartp-title h1 { font-size: 36px; }

  /* Steps shrink: hide labels, keep numbers connected */
  .sp-cartp-steps {
    width: 100%;
    justify-content: space-between;
  }
  .sp-cartp-steps li { padding-right: 0; gap: 0; flex: 1; justify-content: center; }
  .sp-cartp-steps li:not(:last-child)::after {
    flex: 1;
    width: auto;
    margin: 0 8px;
  }
  .sp-cartp-steps .step-label { display: none; }

  .sp-cartp { padding: 24px var(--pad-x) 100px; /* room for sticky bar */ }

  /* Items become single-column stack */
  .sp-cartp-itemshead { display: none; }

  .sp-cartp-line {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px 0;
  }
  .sp-cartp-line .cell-product { gap: 14px; }
  .sp-cartp-line .line-img { width: 90px; height: 90px; }
  .sp-cartp-line .line-name { font-size: 16px; }

  .sp-cartp-line .cell-qty {
    justify-content: flex-start;
    padding-top: 0;
    padding-left: 104px; /* align with content next to image */
  }
  .sp-cartp-line .cell-total {
    text-align: left;
    padding-top: 0;
    padding-left: 104px;
  }
  .sp-cartp-line .line-total { font-size: 17px; }

  .sp-cartp-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .sp-cartp-keep, .sp-cartp-clear {
    justify-content: center;
  }

  .sp-cartp-summary-card { padding: 22px 18px 18px; }
  .sp-cartp-summary-title { font-size: 19px; }

  .sp-cartp-saved-items { grid-template-columns: 1fr; }

  .sp-cartp-recs { padding: 48px var(--pad-x) 56px; }

  /* Hide the heavy in-card checkout button on mobile (sticky bar replaces it) */
  /* Keep it visible for accessibility — just slightly smaller */
  .sp-cartp-checkout { padding: 15px; font-size: 13px; }
}

@media (max-width: 480px) {
  .sp-cartp-line .cell-qty,
  .sp-cartp-line .cell-total { padding-left: 0; }

  .sp-cartp-paybtns { grid-template-columns: 1fr 1fr; }
  .sp-cartp-paybtns .paybtn-gpay { grid-column: span 2; }
}

/* ----- checkout_header ----- */
/* ============================================================================
   ============================================================================
   CHECKOUT FLOW
   (checkout.html · checkout-shipping.html · checkout-payment.html ·
    order-confirmation.html)
   ----------------------------------------------------------------------------
   Append this entire block to the END of css/shopstyle.css (after the cart
   page additions). Uses the existing design tokens.
   ============================================================================
   ============================================================================ */

/* When the body has the slim-checkout class, hide the default page chrome
   (announcement, full nav, footer) — those pages use their own chrome. */
.sp-co-body { background: var(--c-cream); }

/* ============================================================================
   SLIM CHECKOUT HEADER  (used by steps 2/3/4)
   ============================================================================ */
.sp-co-header {
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  padding: 16px var(--pad-x);
  position: sticky;
  top: 0;
  z-index: 50;
}
.sp-co-header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.sp-co-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-muted);
  transition: color 0.18s var(--ease);
  justify-self: flex-start;
}
.sp-co-back:hover { color: var(--c-tan); }
.sp-co-back .icon { width: 14px; height: 14px; }
.sp-co-logo { justify-self: center; }
.sp-co-logo .logo-img { height: 32px; }
.sp-co-secure {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-forest);
  letter-spacing: 0.04em;
  justify-self: flex-end;
}
.sp-co-secure .icon { width: 15px; height: 15px; }

/* ----- checkout_steps_bar ----- */
/* ============================================================================
   STEP INDICATOR BAR  (used by steps 2/3/4)
   ============================================================================ */
.sp-co-steps-bar {
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-border);
  padding: 18px var(--pad-x) 16px;
}
.sp-co-steps {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  font-size: 13px;
}
.sp-co-steps li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  position: relative;
  flex: 1;
  min-width: 0;
}
.sp-co-steps li:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-cream-warm);
  margin: 0 12px;
}
.sp-co-steps li > a,
.sp-co-steps li > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.sp-co-steps li > a { color: inherit; }
.sp-co-steps li > a:hover .step-num { background: var(--c-cream-deep); }
.sp-co-steps .step-num {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-cream-deep);
  color: var(--c-muted);
  font-weight: 600;
  font-size: 12px;
  border: 1px solid var(--c-border);
  flex-shrink: 0;
  transition: all 0.18s var(--ease);
}
.sp-co-steps .step-num .icon { width: 12px; height: 12px; }
.sp-co-steps .step-label {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 11px;
  color: var(--c-muted);
}
.sp-co-steps li.done .step-num {
  background: var(--c-tan);
  color: var(--c-white);
  border-color: var(--c-tan);
}
.sp-co-steps li.done .step-label { color: var(--c-text); }
.sp-co-steps li.active .step-num {
  background: var(--c-forest);
  color: var(--c-cream);
  border-color: var(--c-forest);
}
.sp-co-steps li.active .step-label {
  color: var(--c-charcoal);
  font-weight: 600;
}

/* ----- checkout_mobile_sum ----- */
/* ============================================================================
   MOBILE ORDER SUMMARY TOGGLE
   ============================================================================ */
.sp-co-summary-toggle {
  display: none;
  width: 100%;
  background: var(--c-cream-deep);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: 14px var(--pad-x);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: inherit;
  text-align: left;
}
.sp-co-summary-toggle .left {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--c-forest);
  font-weight: 500;
  font-size: 14px;
}
.sp-co-summary-toggle .left .icon:first-child { width: 18px; height: 18px; }
.sp-co-summary-toggle .left .chev {
  width: 12px;
  height: 12px;
  transition: transform 0.2s var(--ease);
}
.sp-co-summary-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.sp-co-summary-toggle .amt {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--c-charcoal);
  font-variant-numeric: tabular-nums;
}

/* ----- checkout_layout ----- */
/* ============================================================================
   MAIN CHECKOUT LAYOUT  (form + summary)
   ============================================================================ */
.sp-co {
  padding: 40px var(--pad-x) 64px;
}
.sp-co-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: flex-start;
}
.sp-co-form-col { min-width: 0; }
.sp-co-summary {
  position: sticky;
  top: 90px; /* below sticky header */
}

/* ----- checkout_express ----- */
/* ============================================================================
   EXPRESS CHECKOUT BUTTONS (atop info form)
   ============================================================================ */
.sp-co-express { margin-bottom: 22px; }
.sp-co-h2-quiet {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sp-co-paybtns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.sp-co-paybtns .paybtn {
  height: 48px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid transparent;
  transition: all 0.18s var(--ease);
}
.sp-co-paybtns .paybtn-paypal {
  background: #FFC439;
  color: #003087;
  font-style: italic;
  letter-spacing: -0.01em;
}
.sp-co-paybtns .paybtn-paypal:hover { filter: brightness(0.95); }
.sp-co-paybtns .paybtn-apple { background: #000; color: #fff; }
.sp-co-paybtns .paybtn-apple:hover { background: #1a1a1a; }
.sp-co-paybtns .paybtn-gpay {
  background: #fff;
  color: #5F6368;
  border-color: #DADCE0;
}
.sp-co-paybtns .paybtn-gpay:hover {
  background: #f8f9fa;
  border-color: var(--c-cream-warm);
}

.sp-co-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 0;
  color: var(--c-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.sp-co-or::before, .sp-co-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

/* ----- checkout_form_sect ----- */
/* ============================================================================
   FORM SECTIONS
   ============================================================================ */
.sp-co-form { display: grid; gap: 26px; }
.sp-co-section {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 26px 24px 22px;
}
.sp-co-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-border);
}
.sp-co-section-head h2 {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--c-charcoal);
  letter-spacing: -0.005em;
}
.sp-co-section-sub {
  font-size: 12.5px;
  color: var(--c-muted);
  width: 100%;
  margin-top: -4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sp-co-section-sub .icon { width: 13px; height: 13px; color: var(--c-forest); }
.sp-co-section-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-forest);
  border-bottom: 1px solid var(--c-forest);
  padding-bottom: 1px;
}
.sp-co-section-link:hover { color: var(--c-tan); border-color: var(--c-tan); }

/* ----- checkout_account ----- */
/* ============================================================================
   ACCOUNT INFO  —  read-only "signed in as" display on checkout step 2
   ============================================================================ */
.sp-co-account-info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.sp-co-account-info .acc-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--c-cream-warm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-forest);
  flex-shrink: 0;
}
.sp-co-account-info .acc-icon .icon { width: 18px; height: 18px; }
.sp-co-account-info .acc-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sp-co-account-info .acc-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.sp-co-account-info .acc-email {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-charcoal);
  word-break: break-all;
}

/* ----- checkout_form_field ----- */
/* ============================================================================
   FORM FIELDS
   ============================================================================ */
.sp-co-form .sp-co-section .sp-co-field + .sp-co-field,
.sp-co-form .sp-co-section .sp-co-field-grid + .sp-co-field,
.sp-co-form .sp-co-section .sp-co-field + .sp-co-field-grid,
.sp-co-form .sp-co-section .sp-co-field-grid + .sp-co-field-grid,
.sp-co-form .sp-co-section .sp-co-check {
  margin-top: 14px;
}

.sp-co-field { display: block; min-width: 0; }
.sp-co-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-text);
  margin-bottom: 7px;
}
.sp-co-field label .opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-muted);
  margin-left: 5px;
}
.sp-co-field label .opt-tip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  position: relative;
  cursor: help;
  vertical-align: -2px;
}
.sp-co-field label .opt-tip em {
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  color: var(--c-muted);
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px dotted var(--c-cream-warm);
}
.sp-co-field label .opt-tip:hover em { color: var(--c-forest); }
.sp-co-field label .opt-tip em::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-charcoal);
  color: var(--c-cream);
  font-size: 11px;
  font-weight: 400;
  padding: 7px 11px;
  border-radius: 6px;
  width: 200px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease);
  line-height: 1.4;
  z-index: 5;
}
.sp-co-field label .opt-tip:hover em::after { opacity: 1; }
.sp-co-field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  filter: invert(0.3);
}
.sp-co-field input[type="text"],
.sp-co-field input[type="email"],
.sp-co-field input[type="tel"],
.sp-co-field input[type="password"],
.sp-co-field input[type="date"],
.sp-co-field input[type="number"],
.sp-co-field select {
  width: 100%;
  border: 1px solid var(--c-border);
  background: var(--c-cream);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--c-charcoal);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}
.sp-co-field input::placeholder { color: var(--c-muted); }
.sp-co-field input:focus,
.sp-co-field select:focus {
  outline: none;
  border-color: var(--c-tan);
  background: var(--c-white);
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.18);
}
.sp-co-field.is-error input,
.sp-co-field.is-error select {
  border-color: #b85450;
  background: #fdf3f2;
}
.sp-co-field.is-error input:focus,
.sp-co-field.is-error select:focus {
  box-shadow: 0 0 0 3px rgba(184, 84, 80, 0.15);
}
.sp-co-field-msg {
  font-size: 12px;
  color: #b85450;
  margin-top: 6px;
  min-height: 0;
  line-height: 1.4;
  display: none;
}
.sp-co-field.is-error .sp-co-field-msg { display: block; }

/* Select wrap (custom chevron) */
.sp-co-select-wrap {
  position: relative;
  display: block;
}
.sp-co-select-wrap select {
  padding-right: 38px;
  cursor: pointer;
}
.sp-co-select-wrap > .icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--c-muted);
  pointer-events: none;
}

/* Field grids */
.sp-co-field-grid {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.sp-co-field-grid-2 { grid-template-columns: 1fr 1fr; }
.sp-co-field-grid-3 { grid-template-columns: 2fr 1.4fr 1fr; }

/* Checkbox */
.sp-co-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--c-text);
  user-select: none;
  margin-top: 16px !important;
}
.sp-co-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 1px solid var(--c-cream-warm);
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  background: var(--c-white);
  position: relative;
  transition: all 0.15s var(--ease);
}
.sp-co-check input[type="checkbox"]:checked {
  background: var(--c-forest);
  border-color: var(--c-forest);
}
.sp-co-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--c-cream);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ----- checkout_foot_bar ----- */
/* ============================================================================
   FORM FOOT BAR  (back link + continue button)
   ============================================================================ */
.sp-co-formfoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.sp-co-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-forest);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.sp-co-back-link:hover {
  color: var(--c-tan);
  border-color: var(--c-tan);
}
.sp-co-back-link .icon { width: 14px; height: 14px; }

.sp-co-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--c-forest);
  color: var(--c-cream);
  padding: 16px 32px;
  border-radius: 28px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.2s var(--ease);
  min-height: 50px;
}
.sp-co-continue:hover {
  background: var(--c-tan);
  color: var(--c-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(212, 165, 116, 0.45);
}
.sp-co-continue:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.sp-co-continue .icon { width: 14px; height: 14px; }

.sp-co-pay-now em {
  font-style: normal;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 4px;
}

.sp-co-legal {
  font-size: 11.5px;
  color: var(--c-muted);
  line-height: 1.5;
  margin-top: 14px;
  text-align: center;
}
.sp-co-legal a {
  color: var(--c-forest);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s var(--ease);
}
.sp-co-legal a:hover { border-bottom-color: var(--c-forest); }
.sp-co-legal-tight { margin-top: 8px; text-align: left; }

/* ----- checkout_review ----- */
/* ============================================================================
   REVIEW BLOCK  (used by shipping + payment pages)
   ============================================================================ */
.sp-co-review {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 4px 22px;
  margin-bottom: 22px;
}
.sp-co-review-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 14px;
}
.sp-co-review-row:last-child { border-bottom: none; }
.sp-co-review-row .lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding-top: 2px;
}
.sp-co-review-row .val {
  color: var(--c-charcoal);
  word-break: break-word;
  line-height: 1.5;
}
.sp-co-review-row .val strong {
  font-weight: 600;
  color: var(--c-charcoal);
}
.sp-co-review-row .muted-dot {
  margin: 0 6px;
  color: var(--c-cream-warm);
}
.sp-co-review-row .change {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-forest);
  border-bottom: 1px solid var(--c-forest);
  padding-bottom: 1px;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.sp-co-review-row .change:hover {
  color: var(--c-tan);
  border-color: var(--c-tan);
}

/* ----- checkout_radio_cards ----- */
/* ============================================================================
   RADIO CARDS  (shipping method, billing toggle)
   ============================================================================ */
.sp-co-radio-group { display: grid; gap: 10px; }

.sp-co-radio-card {
  display: block;
  position: relative;
  border: 1.5px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-white);
  padding: 16px 18px 16px 48px;
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.sp-co-radio-card:hover { border-color: var(--c-cream-warm); }
.sp-co-radio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sp-co-radio-card .rc-pin {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--c-cream-warm);
  background: var(--c-white);
  transition: all 0.18s var(--ease);
}
.sp-co-radio-card .rc-pin::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.18s var(--ease);
}
.sp-co-radio-card input[type="radio"]:checked ~ .rc-pin {
  border-color: var(--c-forest);
}
.sp-co-radio-card input[type="radio"]:checked ~ .rc-pin::after {
  background: var(--c-forest);
}
.sp-co-radio-card input[type="radio"]:checked ~ .rc-content { /* no-op, parent styles below */ }

/* whole-card "selected" look */
.sp-co-radio-card:has(input[type="radio"]:checked) {
  border-color: var(--c-forest);
  background: linear-gradient(0deg, rgba(46, 93, 78, 0.03), rgba(46, 93, 78, 0.03)), var(--c-white);
  box-shadow: 0 4px 14px -8px rgba(46, 93, 78, 0.25);
}
/* Fallback for browsers without :has support — JS adds .is-selected */
.sp-co-radio-card.is-selected {
  border-color: var(--c-forest);
  background: linear-gradient(0deg, rgba(46, 93, 78, 0.03), rgba(46, 93, 78, 0.03)), var(--c-white);
  box-shadow: 0 4px 14px -8px rgba(46, 93, 78, 0.25);
}

.sp-co-radio-card .rc-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.sp-co-radio-card .rc-main { flex: 1; min-width: 0; }
.sp-co-radio-card .rc-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 500;
  font-size: 15px;
  color: var(--c-charcoal);
  font-family: var(--f-display);
}
.sp-co-radio-card .rc-title .icon {
  width: 18px; height: 18px;
  color: var(--c-forest);
}
.sp-co-radio-card .rc-tag {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--c-tan);
  color: var(--c-white);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 4px;
}
.sp-co-radio-card .rc-meta {
  font-size: 12.5px;
  color: var(--c-muted);
  margin-top: 4px;
}
.sp-co-radio-card .rc-meta .eta strong {
  color: var(--c-charcoal);
  font-weight: 600;
}
.sp-co-radio-card .rc-price {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--c-charcoal);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.sp-co-radio-card .rc-price.is-free {
  color: var(--c-forest);
}

/* Thinner variant for billing toggle */
.sp-co-radio-card-thin {
  padding: 14px 18px 14px 46px;
}
.sp-co-radio-card-thin .rc-title { font-size: 14px; }

/* Address-card variant — multi-line meta + Default tag + Edit link */
.sp-co-radio-card-addr {
  padding-top: 18px;
  padding-bottom: 18px;
}
.sp-co-radio-card-addr .rc-tag-default {
  background: var(--c-forest);
}
.sp-co-radio-card-addr .rc-meta {
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-text);
  margin-top: 6px;
}
.sp-co-radio-card-addr .rc-meta .muted-line {
  color: var(--c-muted);
  font-size: 12.5px;
}
.sp-co-radio-card-addr .rc-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-forest);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.sp-co-radio-card-addr .rc-edit-link:hover {
  color: var(--c-tan);
  border-color: var(--c-tan);
}
.sp-co-radio-card-addr .rc-edit-link .icon { width: 12px; height: 12px; }

/* New-address radio card — quieter, dashed-style accent */
.sp-co-radio-card-addr-new .rc-title {
  color: var(--c-forest);
}
.sp-co-radio-card-addr-new .rc-title .icon {
  color: var(--c-forest);
  width: 16px;
  height: 16px;
}
.sp-co-radio-card-addr-new .rc-meta {
  font-size: 12.5px;
  margin-top: 4px;
}

/* New-address form: hidden by default, revealed via :has() when the
   "Use a different address" radio is checked. No JS required. */
.sp-co-new-addr-form { display: none; }
.sp-co-section:has(input[name="address-choice"][value="new"]:checked) .sp-co-new-addr-form {
  display: block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--c-border);
  animation: sp-co-newaddr-fade 0.22s var(--ease);
}
@keyframes sp-co-newaddr-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sp-co-new-addr-form .sp-co-field + .sp-co-field,
.sp-co-new-addr-form .sp-co-field-grid + .sp-co-field,
.sp-co-new-addr-form .sp-co-field + .sp-co-field-grid,
.sp-co-new-addr-form .sp-co-field-grid + .sp-co-field-grid {
  margin-top: 14px;
}
.sp-co-new-addr-form .sp-co-check { margin-top: 14px !important; }

/* Note bar */
.sp-co-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-top: 14px;
  background: var(--c-cream);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--c-text);
  line-height: 1.5;
}
.sp-co-note .icon {
  width: 16px; height: 16px;
  color: var(--c-forest);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ----- checkout_payment ----- */
/* ============================================================================
   PAYMENT  —  TABBED OPTIONS
   ============================================================================ */
.sp-co-pay-tabs {
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-white);
}
.sp-co-pay-option {
  border-bottom: 1px solid var(--c-border);
  transition: background 0.18s var(--ease);
}
.sp-co-pay-option:last-child { border-bottom: none; }
.sp-co-pay-option.active { background: var(--c-cream); }

.sp-co-pay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 16px 48px;
  cursor: pointer;
  position: relative;
}
.sp-co-pay-head input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sp-co-pay-head .rc-pin {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--c-cream-warm);
  background: var(--c-white);
  transition: all 0.18s var(--ease);
}
.sp-co-pay-head .rc-pin::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.18s var(--ease);
}
.sp-co-pay-head input[type="radio"]:checked ~ .rc-pin { border-color: var(--c-forest); }
.sp-co-pay-head input[type="radio"]:checked ~ .rc-pin::after { background: var(--c-forest); }
.sp-co-pay-head .left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.sp-co-pay-head .title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--c-charcoal);
}
.sp-co-pay-head .title .icon {
  width: 18px; height: 18px;
  color: var(--c-forest);
}

.sp-co-pay-cards {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.sp-co-pay-cards .card {
  height: 22px;
  min-width: 32px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-charcoal);
}
.sp-co-pay-cards .card.visa { background: #1A1F71; color: #fff; font-style: italic; border-color: #1A1F71; }
.sp-co-pay-cards .card.mc { gap: -4px; padding: 0 5px; }
.sp-co-pay-cards .card.mc .mc-c1, .sp-co-pay-cards .card.mc .mc-c2 {
  width: 12px; height: 12px; border-radius: 50%;
}
.sp-co-pay-cards .card.mc .mc-c1 { background: #EB001B; }
.sp-co-pay-cards .card.mc .mc-c2 { background: #F79E1B; margin-left: -4px; mix-blend-mode: multiply; }
.sp-co-pay-cards .card.amex { background: #006FCF; color: #fff; border-color: #006FCF; }
.sp-co-pay-cards .card.disc { background: #FF6000; color: #fff; border-color: #FF6000; }
.sp-co-pay-cards .card.pp { background: #FFC439; color: #003087; font-style: italic; border-color: #FFC439; }

.sp-co-pay-body {
  display: none;
  padding: 4px 22px 22px 48px;
  background: var(--c-cream);
  border-top: 1px dashed var(--c-border);
}
.sp-co-pay-option.active .sp-co-pay-body { display: block; }

.sp-co-pay-redirect {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 4px;
  font-size: 13px;
  color: var(--c-text);
}
.sp-co-pay-redirect .icon {
  width: 16px; height: 16px;
  color: var(--c-forest);
  flex-shrink: 0;
}

/* Card number input */
.sp-co-card-input {
  position: relative;
}
.sp-co-card-input input {
  padding-right: 80px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.sp-co-card-brand {
  position: absolute;
  right: 42px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  height: 22px;
  min-width: 32px;
  padding: 0 6px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #fff;
}
.sp-co-card-brand[data-brand]:not([data-brand=""]) { display: inline-flex; }
.sp-co-card-brand[data-brand="visa"]   { background: #1A1F71; font-style: italic; }
.sp-co-card-brand[data-brand="mastercard"] { background: #EB001B; }
.sp-co-card-brand[data-brand="amex"]   { background: #006FCF; }
.sp-co-card-brand[data-brand="discover"] { background: #FF6000; }
.sp-co-card-brand[data-brand="visa"]::after   { content: 'VISA'; }
.sp-co-card-brand[data-brand="mastercard"]::after { content: 'MC'; }
.sp-co-card-brand[data-brand="amex"]::after   { content: 'AMEX'; }
.sp-co-card-brand[data-brand="discover"]::after { content: 'DISC'; }

.sp-co-card-lock {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--c-muted);
  pointer-events: none;
}

/* Billing form (collapsible) */
.sp-co-billing-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 18px 18px 16px;
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: 10px;
}

/* ----- checkout_summary ----- */
/* ============================================================================
   ORDER SUMMARY  (right column on slim checkout pages)
   ============================================================================ */
.sp-co-summary-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 24px 22px 20px;
  box-shadow: 0 2px 12px rgba(43, 43, 43, 0.04);
}
.sp-co-summary-title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--c-charcoal);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-border);
}
.sp-co-summary-title em { font-style: italic; color: var(--c-tan); }

/* Items list (compact) */
.sp-co-summary-items {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}
.sp-co-summary-items::-webkit-scrollbar { width: 6px; }
.sp-co-summary-items::-webkit-scrollbar-track { background: transparent; }
.sp-co-summary-items::-webkit-scrollbar-thumb { background: var(--c-cream-warm); border-radius: 3px; }

.sp-co-line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
}
.sp-co-line .img {
  position: relative;
  width: 56px;
  height: 56px;
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  flex-shrink: 0;
}
.sp-co-line .img .img-placeholder {
  font-size: 9px; font-style: italic; padding: 2px;
  text-align: center;
}
.sp-co-line .img .qty-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--c-charcoal);
  color: var(--c-cream);
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  border: 2px solid var(--c-white);
  font-variant-numeric: tabular-nums;
}
.sp-co-line .info { flex: 1; min-width: 0; }
.sp-co-line .name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 13px;
  color: var(--c-charcoal);
  line-height: 1.3;
  margin-bottom: 2px;
}
.sp-co-line .variant {
  font-size: 11px;
  color: var(--c-muted);
  line-height: 1.4;
}
.sp-co-line .price {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--c-charcoal);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Promo code (compact) */
.sp-co-promo {
  margin: 16px 0;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
}
.sp-co-promo-row {
  display: flex;
  gap: 6px;
}
.sp-co-promo input {
  flex: 1;
  border: 1px solid var(--c-border);
  background: var(--c-cream);
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 12px;
  font-family: inherit;
  color: var(--c-charcoal);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
  min-width: 0;
}
.sp-co-promo input::placeholder {
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-muted);
}
.sp-co-promo input:focus {
  outline: none;
  border-color: var(--c-tan);
  background: var(--c-white);
}
.sp-co-promo button {
  background: var(--c-charcoal);
  color: var(--c-cream);
  border-radius: 20px;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.18s var(--ease);
}
.sp-co-promo button:hover { background: var(--c-forest); }
.sp-co-promo-msg {
  margin-top: 6px;
  font-size: 11.5px;
  min-height: 14px;
  line-height: 1.4;
}
.sp-co-promo-msg[data-state="ok"] { color: var(--c-forest); font-weight: 500; }
.sp-co-promo-msg[data-state="error"] { color: #b85450; }

/* Totals */
.sp-co-totals {
  padding: 14px 0 4px;
  border-top: 1px solid var(--c-border);
}
.sp-co-totals .sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--c-text);
}
.sp-co-totals .sum-row span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--c-charcoal);
  font-weight: 500;
}
.sp-co-totals .sum-row .muted { color: var(--c-muted); font-weight: 400; font-size: 12px; }
.sp-co-totals .sum-row .discount-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-forest);
  font-weight: 500;
}
.sp-co-totals .sum-row .discount-label em {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  background: var(--c-cream-deep);
  color: var(--c-charcoal);
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.sp-co-totals .sum-row .discount-amt { color: var(--c-forest); font-weight: 600; }
.sp-co-totals .sum-row .ship-method-tag {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--c-muted);
  margin-left: 4px;
}
.sp-co-totals .sum-hint {
  display: inline-flex;
  margin-left: 4px;
  color: var(--c-cream-warm);
  position: relative;
  cursor: help;
}
.sp-co-totals .sum-hint:hover { color: var(--c-muted); }
.sp-co-totals .sum-hint::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-charcoal);
  color: var(--c-cream);
  font-size: 11px;
  padding: 7px 11px;
  border-radius: 6px;
  width: 180px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease);
  line-height: 1.4;
  z-index: 5;
}
.sp-co-totals .sum-hint:hover::after { opacity: 1; }

.sp-co-totals .sum-total {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
  color: var(--c-charcoal);
  align-items: baseline;
}
.sp-co-totals .sum-total > span:first-child { font-weight: 500; }
.sp-co-totals .sum-total-amt {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.sp-co-totals .sum-total-amt .cur {
  font-family: var(--f-body);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  color: var(--c-muted);
  letter-spacing: 0.06em;
}

/* Trust list */
.sp-co-trust {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
  display: grid;
  gap: 8px;
}
.sp-co-trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--c-text);
}
.sp-co-trust li .icon {
  width: 14px;
  height: 14px;
  color: var(--c-forest);
  flex-shrink: 0;
}

/* ----- checkout_footer ----- */
/* ============================================================================
   SLIM CHECKOUT FOOTER
   ============================================================================ */
.sp-co-footer {
  background: var(--c-cream);
  border-top: 1px solid var(--c-border);
  padding: 22px var(--pad-x) 26px;
  font-size: 12px;
  color: var(--c-muted);
}
.sp-co-footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.sp-co-footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.sp-co-footer-links a {
  color: var(--c-muted);
  transition: color 0.18s var(--ease);
}
.sp-co-footer-links a:hover { color: var(--c-forest); }

/* ----- conf_hero ----- */
/* ============================================================================
   ============================================================================
   ORDER CONFIRMATION PAGE  (order-confirmation.html)
   ============================================================================
   ============================================================================ */

/* Hero */
.sp-oc-hero {
  background: linear-gradient(180deg, var(--c-cream) 0%, var(--c-cream-deep) 100%);
  padding: 56px var(--pad-x) 56px;
  text-align: center;
  border-bottom: 1px solid var(--c-border);
}
.sp-oc-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}

.sp-oc-checkmark {
  width: 88px;
  height: 88px;
  margin: 0 auto 24px;
  position: relative;
}
.sp-oc-checkmark svg {
  width: 100%; height: 100%;
  display: block;
}
.sp-oc-checkmark .oc-circle {
  fill: none;
  stroke: var(--c-forest);
  stroke-width: 2.5;
  stroke-dasharray: 226;
  stroke-dashoffset: 226;
  animation: oc-circle-draw 0.7s var(--ease) 0.1s forwards;
}
.sp-oc-checkmark .oc-tick {
  fill: none;
  stroke: var(--c-tan);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: oc-tick-draw 0.4s var(--ease) 0.7s forwards;
}
@keyframes oc-circle-draw { to { stroke-dashoffset: 0; } }
@keyframes oc-tick-draw   { to { stroke-dashoffset: 0; } }

.sp-oc-hero h1 {
  font-family: var(--f-display);
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 12px 0 14px;
  color: var(--c-charcoal);
}
.sp-oc-hero h1 em { font-style: italic; color: var(--c-tan); }
.sp-oc-lead {
  font-size: 16px;
  color: var(--c-text);
  max-width: 520px;
  margin: 0 auto 28px;
  line-height: 1.55;
}
.sp-oc-lead strong { color: var(--c-charcoal); font-weight: 600; }
.sp-oc-lead a {
  color: var(--c-forest);
  border-bottom: 1px solid var(--c-forest);
  transition: color 0.15s var(--ease);
}
.sp-oc-lead a:hover { color: var(--c-tan); border-color: var(--c-tan); }

.sp-oc-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 640px;
  margin: 0 auto;
  padding: 22px;
  background: var(--c-white);
  border-radius: 14px;
  border: 1px solid var(--c-border);
  text-align: left;
}
.sp-oc-meta-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--c-text);
}
.sp-oc-meta-item .icon {
  width: 20px; height: 20px;
  color: var(--c-forest);
  flex-shrink: 0;
  margin-top: 1px;
}
.sp-oc-meta-item .lbl {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 2px;
}
.sp-oc-meta-item strong {
  display: block;
  font-weight: 600;
  color: var(--c-charcoal);
  font-size: 13px;
  line-height: 1.3;
}

/* ----- conf_layout ----- */
/* ============================================================================
   ORDER CONFIRMATION  —  MAIN LAYOUT (timeline + summary)
   ============================================================================ */
.sp-oc {
  padding: 48px var(--pad-x) 64px;
  background: var(--c-cream);
}
.sp-oc-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 36px;
  align-items: flex-start;
}
.sp-oc-main { display: grid; gap: 22px; min-width: 0; }
.sp-oc-summary { position: sticky; top: 24px; }

.sp-oc-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 26px 26px 24px;
}
.sp-oc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-border);
}
.sp-oc-card-head h2 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--c-charcoal);
}
.sp-oc-card-head h2 em { font-style: italic; color: var(--c-tan); }

.sp-oc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-cream-deep);
  color: var(--c-forest);
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sp-oc-status-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-forest);
  animation: oc-pulse 2s ease-in-out infinite;
}
@keyframes oc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* ----- conf_timeline ----- */
/* ============================================================================
   ORDER CONFIRMATION  —  TIMELINE
   ============================================================================ */
.sp-oc-timeline {
  position: relative;
  padding: 4px 0;
}
.sp-oc-timeline .step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  padding: 14px 0;
  align-items: flex-start;
}
.sp-oc-timeline .step:not(.last)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 50px;
  bottom: -14px;
  width: 2px;
  background: var(--c-cream-warm);
}
.sp-oc-timeline .step.done::before { background: var(--c-tan); }
.sp-oc-timeline .step .dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  border: 2px solid var(--c-cream-warm);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.sp-oc-timeline .step .dot .icon { width: 16px; height: 16px; }
.sp-oc-timeline .step.done .dot {
  background: var(--c-tan);
  color: var(--c-white);
  border-color: var(--c-tan);
}
.sp-oc-timeline .step.current .dot {
  background: var(--c-forest);
  color: var(--c-cream);
  border-color: var(--c-forest);
  box-shadow: 0 0 0 4px rgba(46, 93, 78, 0.12);
}
.sp-oc-timeline .step .title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--c-charcoal);
  margin-bottom: 2px;
}
.sp-oc-timeline .step.current .title {
  color: var(--c-forest);
  font-weight: 600;
}
.sp-oc-timeline .step:not(.done):not(.current) .title { color: var(--c-muted); }
.sp-oc-timeline .step .meta {
  font-size: 12.5px;
  color: var(--c-muted);
  line-height: 1.4;
}

/* Action buttons under timeline */
.sp-oc-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
  flex-wrap: wrap;
  align-items: center;
}
.sp-oc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.18s var(--ease);
  white-space: nowrap;
  border: 1px solid transparent;
}
.sp-oc-btn .icon { width: 14px; height: 14px; }
.sp-oc-btn-primary {
  background: var(--c-forest);
  color: var(--c-cream);
}
.sp-oc-btn-primary:hover {
  background: var(--c-tan);
  color: var(--c-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(212, 165, 116, 0.45);
}
.sp-oc-btn-ghost {
  background: transparent;
  color: var(--c-charcoal);
  border-color: var(--c-border);
}
.sp-oc-btn-ghost:hover {
  border-color: var(--c-forest);
  color: var(--c-forest);
}
.sp-oc-btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--c-cream);
  color: var(--c-charcoal);
  border-color: var(--c-border);
  margin-left: auto;
}
.sp-oc-btn-icon:hover {
  background: var(--c-cream-deep);
  border-color: var(--c-forest);
  color: var(--c-forest);
}

/* ----- conf_details_grid ----- */
/* ============================================================================
   ORDER CONFIRMATION  —  DETAILS GRID
   ============================================================================ */
.sp-oc-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 30px;
}
.sp-oc-detail h6 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.sp-oc-detail p {
  font-size: 13.5px;
  color: var(--c-text);
  line-height: 1.55;
}
.sp-oc-detail p strong {
  color: var(--c-charcoal);
  font-weight: 600;
}
.sp-oc-detail-muted { color: var(--c-muted); font-size: 12px; }
.sp-oc-pay-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.sp-oc-pay-line .card {
  height: 22px;
  min-width: 32px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #1A1F71;
  color: #fff;
  font-style: italic;
}

/* ----- conf_account_panel ----- */
/* ============================================================================
   ORDER CONFIRMATION  —  MY ACCOUNT PANEL
   ============================================================================ */
.sp-oc-account {
  background: linear-gradient(135deg, #f6efe6 0%, var(--c-cream-deep) 100%);
  border-color: var(--c-cream-warm);
  padding: 26px 26px 22px;
}
.sp-oc-account-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(212, 165, 116, 0.25);
}
.sp-oc-account-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-white);
  border: 1.5px solid var(--c-cream-warm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-forest);
  flex-shrink: 0;
}
.sp-oc-account-avatar .icon { width: 22px; height: 22px; }
.sp-oc-account-greet { min-width: 0; }
.sp-oc-account-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-tan);
  margin-bottom: 4px;
}
.sp-oc-account h3 {
  font-family: var(--f-display);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 500;
  color: var(--c-charcoal);
  margin-bottom: 4px;
}
.sp-oc-account h3 em { font-style: italic; color: var(--c-forest); }
.sp-oc-account p {
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.5;
}
.sp-oc-account p strong {
  color: var(--c-charcoal);
  font-weight: 600;
}
.sp-oc-account-dash {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-forest);
  border: 1px solid var(--c-forest);
  padding: 9px 16px;
  border-radius: 22px;
  white-space: nowrap;
  transition: all 0.18s var(--ease);
}
.sp-oc-account-dash:hover {
  background: var(--c-forest);
  color: var(--c-cream);
}
.sp-oc-account-dash .icon {
  width: 12px; height: 12px;
  transition: transform 0.18s var(--ease);
}
.sp-oc-account-dash:hover .icon { transform: translateX(2px); }

.sp-oc-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sp-oc-account-tile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  transition: all 0.18s var(--ease);
  color: inherit;
}
.sp-oc-account-tile:hover {
  border-color: var(--c-forest);
  background: var(--c-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -10px rgba(46, 93, 78, 0.3);
}
.sp-oc-account-tile .tile-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--c-cream-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-forest);
  flex-shrink: 0;
  transition: background 0.18s var(--ease);
}
.sp-oc-account-tile:hover .tile-icon {
  background: var(--c-forest);
  color: var(--c-cream);
}
.sp-oc-account-tile .tile-icon .icon { width: 18px; height: 18px; }
.sp-oc-account-tile .tile-text { display: block; min-width: 0; }
.sp-oc-account-tile .title {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--c-charcoal);
  line-height: 1.25;
  margin-bottom: 2px;
}
.sp-oc-account-tile .meta {
  display: block;
  font-size: 11.5px;
  color: var(--c-muted);
  line-height: 1.3;
}
.sp-oc-account-tile .tile-chev {
  width: 14px;
  height: 14px;
  color: var(--c-cream-warm);
  flex-shrink: 0;
  transition: color 0.18s var(--ease), transform 0.18s var(--ease);
}
.sp-oc-account-tile:hover .tile-chev {
  color: var(--c-forest);
  transform: translateX(3px);
}

/* ----- conf_summary ----- */
/* ============================================================================
   ORDER CONFIRMATION  —  SUMMARY (right column)
   ============================================================================ */
.sp-oc-summary-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 26px 24px 22px;
  box-shadow: 0 2px 12px rgba(43, 43, 43, 0.04);
}
.sp-oc-summary-title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--c-charcoal);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-border);
}
.sp-oc-summary-title em { font-style: italic; color: var(--c-tan); }

.sp-oc-summary-items {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.sp-oc-summary-items .sp-co-line { font-size: 13px; }

.sp-oc-summary-totals {
  padding: 14px 0 4px;
  border-top: 1px solid var(--c-border);
}
.sp-oc-summary-totals .sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--c-text);
}
.sp-oc-summary-totals .sum-row span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--c-charcoal);
  font-weight: 500;
}
.sp-oc-summary-totals .ship-method-tag {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--c-muted);
  margin-left: 4px;
}
.sp-oc-summary-totals .sum-row .discount-label { color: var(--c-forest); font-weight: 500; }
.sp-oc-summary-totals .sum-row .discount-amt { color: var(--c-forest); font-weight: 600; }
.sp-oc-summary-totals .sum-total {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
  color: var(--c-charcoal);
  align-items: baseline;
}
.sp-oc-summary-totals .sum-total > span:first-child { font-weight: 500; }
.sp-oc-summary-totals .sum-total-amt {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.sp-oc-summary-totals .sum-total-amt .cur {
  font-family: var(--f-body);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  color: var(--c-muted);
  letter-spacing: 0.06em;
}

.sp-oc-help-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-top: 16px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-cream-deep);
  font-size: 13px;
  color: var(--c-text);
  transition: all 0.18s var(--ease);
}
.sp-oc-help-link:hover {
  border-color: var(--c-tan);
  background: var(--c-white);
}
.sp-oc-help-link .icon {
  width: 20px; height: 20px;
  color: var(--c-forest);
  flex-shrink: 0;
}
.sp-oc-help-link em {
  font-style: italic;
  color: var(--c-tan);
}

/* ----- conf_cta_strip ----- */
/* ============================================================================
   ORDER CONFIRMATION  —  CTA STRIP
   ============================================================================ */
.sp-oc-cta {
  background: var(--c-forest);
  color: var(--c-cream);
  padding: 56px var(--pad-x);
}
.sp-oc-cta-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}
.sp-oc-cta-text { flex: 1 1 360px; }
.sp-oc-cta-text .sp-section-eyebrow {
  color: var(--c-tan);
}
.sp-oc-cta-text h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  font-weight: 500;
  margin: 8px 0 12px;
  color: var(--c-cream);
}
.sp-oc-cta-text h2 em { font-style: italic; color: var(--c-tan); }
.sp-oc-cta-text p {
  font-size: 15px;
  color: rgba(244, 245, 243, 0.78);
  line-height: 1.55;
  max-width: 460px;
}
.sp-oc-cta-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.sp-oc-cta .sp-btn-primary {
  background: var(--c-tan);
  color: var(--c-white);
}
.sp-oc-cta .sp-btn-primary:hover {
  background: #e0b485;
}
.sp-oc-cta .sp-btn-link {
  color: var(--c-cream);
  border-color: var(--c-cream);
}
.sp-oc-cta .sp-btn-link:hover {
  color: var(--c-tan);
  border-color: var(--c-tan);
}

/* ----- conf_responsive ----- */
/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1024px) {
  .sp-co-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sp-co-summary {
    position: static;
    order: 2;
  }
  .sp-co-form-col { order: 3; }

  /* Show mobile toggle, hide summary by default */
  .sp-co-summary-toggle { display: flex; }
  .sp-co-summary { display: none; padding: 0 var(--pad-x); margin: 0; background: var(--c-cream-deep); }
  .sp-co-summary.is-open { display: block; padding-bottom: 16px; }
  .sp-co-summary-card {
    margin-top: 14px;
    box-shadow: none;
    background: var(--c-white);
  }

  .sp-oc-inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .sp-oc-summary { position: static; }
  .sp-oc-meta { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 760px) {
  .sp-co-header { padding: 14px var(--pad-x); }
  .sp-co-header-inner { gap: 12px; }
  .sp-co-secure span:last-child { display: none; }
  .sp-co-back span { display: none; }

  .sp-co-steps-bar { padding: 14px var(--pad-x); }
  .sp-co-steps .step-label { display: none; }
  .sp-co-steps li { gap: 0; }

  .sp-co { padding: 22px var(--pad-x) 36px; }
  .sp-co-section { padding: 20px 18px 18px; }
  .sp-co-section-head h2 { font-size: 18px; }

  .sp-co-paybtns { grid-template-columns: 1fr 1fr; }
  .sp-co-paybtns .paybtn-gpay { grid-column: span 2; }

  .sp-co-field-grid-2 { grid-template-columns: 1fr; }
  .sp-co-field-grid-3 { grid-template-columns: 1fr 1fr; }
  .sp-co-field-grid-3 .sp-co-field:first-child { grid-column: span 2; }

  .sp-co-formfoot {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 14px;
  }
  .sp-co-continue { width: 100%; }
  .sp-co-back-link { justify-content: center; }

  .sp-co-radio-card { padding: 14px 16px 14px 44px; }
  .sp-co-radio-card .rc-pin { left: 16px; }
  .sp-co-radio-card .rc-content { gap: 12px; }
  .sp-co-radio-card .rc-title { font-size: 14px; }
  .sp-co-radio-card .rc-price { font-size: 16px; }

  .sp-co-pay-head { padding: 14px 16px 14px 44px; }
  .sp-co-pay-head .rc-pin { left: 16px; }
  .sp-co-pay-body { padding: 4px 16px 18px 44px; }

  .sp-co-review-row {
    grid-template-columns: 70px 1fr;
    grid-template-rows: auto auto;
    gap: 6px 12px;
  }
  .sp-co-review-row .change {
    grid-column: 2;
    grid-row: 2;
    justify-self: flex-start;
    margin-top: 2px;
  }

  /* Order confirmation */
  .sp-oc-hero { padding: 36px var(--pad-x) 36px; }
  .sp-oc-hero h1 { font-size: 36px; }
  .sp-oc-checkmark { width: 72px; height: 72px; margin-bottom: 18px; }
  .sp-oc-meta { padding: 18px; }
  .sp-oc { padding: 28px var(--pad-x) 40px; }
  .sp-oc-card { padding: 22px 20px 20px; }
  .sp-oc-card-head h2 { font-size: 19px; }
  .sp-oc-detail-grid { grid-template-columns: 1fr; gap: 18px; }
  .sp-oc-account { padding: 22px 18px 18px; }
  .sp-oc-account-head {
    grid-template-columns: auto 1fr;
    gap: 14px;
  }
  .sp-oc-account-dash {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: center;
    margin-top: 6px;
  }
  .sp-oc-account h3 { font-size: 21px; }
  .sp-oc-account-grid { grid-template-columns: 1fr; }
  .sp-oc-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .sp-oc-btn-icon {
    margin-left: 0;
    align-self: center;
  }
  .sp-oc-cta { padding: 40px var(--pad-x); }
  .sp-oc-cta-inner { gap: 24px; }
  .sp-oc-cta-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .sp-oc-cta-actions .sp-btn-primary,
  .sp-oc-cta-actions .sp-btn-link { justify-content: center; }
}

@media (max-width: 480px) {
  .sp-co-paybtns { grid-template-columns: 1fr; }
  .sp-co-paybtns .paybtn-gpay { grid-column: span 1; }
  .sp-co-field-grid-3 { grid-template-columns: 1fr; }
  .sp-co-field-grid-3 .sp-co-field:first-child { grid-column: span 1; }
  .sp-co-pay-cards { display: none; }
}

/* ============================================================================
   NO-JS HELPERS  —  rules added for the static (no-JS) build
   ========================================================================== */

/* Hidden form controls used for CSS-only toggles */
.sp-drawer-cb,
.sp-modal-cb {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  pointer-events: none;
  opacity: 0;
}

/* Labels behave like buttons */
label.sp-menu-toggle,
label.mn-close,
label.sp-modal-close,
label.sp-mobile-nav-overlay,
label.sp-modal-overlay,
label.pdp-size-guide,
label.sp-rev-write-btn {
  cursor: pointer;
}

/* ----- Buttons converted to anchors —— restore button-like layout ----- */
/* These were originally <button> elements (which are inline-block / flex
   by user-agent default). As <a> they default to inline, so width: 100%
   and centered text break. Fix by forcing inline-flex / centering. */
a.pdp-buy-now,
a.pdp-add,
a.quick-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

/* ----- Filter sidebar accordion via <details>/<summary> ----- */
/* (replaces the JS-driven .filter-block.open class behavior) */
details.filter-block {
  border-bottom: 1px solid var(--c-border);
  padding: 18px 0;
}
details.filter-block[open] { padding-bottom: 14px; }
details.filter-block > summary {
  list-style: none;          /* hide native marker */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
  letter-spacing: 0.02em;
}
details.filter-block > summary::-webkit-details-marker { display: none; }
details.filter-block > summary .icon {
  width: 14px; height: 14px;
  transition: transform 0.2s var(--ease);
  color: var(--c-muted);
}
details.filter-block[open] > summary .icon { transform: rotate(180deg); }
details.filter-block .filter-body { margin-top: 14px; }

/* ----- Modal: open via :checked ----- */
#size-guide-cb:checked ~ .sp-modal-overlay,
#wr-cb:checked         ~ .sp-modal-overlay {
  opacity: 1;
  pointer-events: auto;
}
#size-guide-cb:checked ~ #size-guide-modal,
#wr-cb:checked         ~ #wr-modal {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* ----- PDP fixes for static (no-JS) operation ----- */
/* All tab panels visible, no tab switching */
.pdp-tab-panel { display: block !important; padding-top: 24px; }
.pdp-tab-panel + .pdp-tab-panel { border-top: 1px solid var(--c-border); margin-top: 12px; }
.pdp-tab-bar { display: none; }  /* tab buttons hidden — panels show stacked */

/* PDP quantity now uses <input type="number"> */
.pdp-qty-input {
  width: 100px;
  padding: 12px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: 30px;
  background: var(--c-white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--c-charcoal);
  -moz-appearance: textfield;
  transition: border-color 0.2s var(--ease);
}
.pdp-qty-input:focus { outline: none; border-color: var(--c-tan); }
.pdp-qty-input::-webkit-outer-spin-button,
.pdp-qty-input::-webkit-inner-spin-button { opacity: 1; height: 30px; }

/* ============================================================================
   AUTH PAGES  (signin / signup / forgot-password / password-sent)
   ========================================================================== */
.sp-auth {
  background: var(--c-cream);
  padding: 56px var(--pad-x) 80px;
  min-height: 60vh;
}
.sp-auth-inner {
  max-width: 460px;
  margin: 0 auto;
}
.sp-auth-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: 0 16px 40px -20px rgba(46, 93, 78, 0.12);
}
.sp-auth-head {
  text-align: center;
  margin-bottom: 28px;
}
.sp-auth-head h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.15;
  color: var(--c-charcoal);
  margin: 0 0 10px;
}
.sp-auth-head h1 em { font-style: italic; color: var(--c-tan); }
.sp-auth-head p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-muted);
  max-width: 360px;
  margin: 0 auto;
}

.sp-auth-form { display: flex; flex-direction: column; gap: 16px; }

.sp-auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.sp-auth-field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.sp-auth-link {
  font-size: 13px;
  color: var(--c-forest);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.sp-auth-link:hover { border-bottom-color: var(--c-forest); }
.sp-auth-link.strong { font-weight: 600; }

.sp-auth-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text);
  cursor: pointer;
  user-select: none;
}
.sp-auth-check input[type="checkbox"] {
  margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: var(--c-forest);
  flex-shrink: 0;
}

.sp-auth-submit {
  width: 100%;
  margin-top: 8px;
}

.sp-auth-divider {
  position: relative;
  text-align: center;
  margin: 22px 0 10px;
  color: var(--c-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sp-auth-divider::before,
.sp-auth-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 28px);
  height: 1px;
  background: var(--c-border);
}
.sp-auth-divider::before { left: 0; }
.sp-auth-divider::after  { right: 0; }
.sp-auth-divider span { background: var(--c-white); padding: 0 8px; }

.sp-auth-alts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-auth-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1.5px solid var(--c-border);
  border-radius: 30px;
  font-weight: 500;
  font-size: 14px;
  color: var(--c-charcoal);
  text-decoration: none;
  background: var(--c-white);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.sp-auth-alt:hover {
  border-color: var(--c-forest);
  background: var(--c-cream);
}

.sp-auth-foot {
  text-align: center;
  margin: 22px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--c-border);
  font-size: 14px;
  color: var(--c-muted);
}

/* ----- Success state (password-sent.html) ----- */
.sp-auth-card-success { text-align: center; }
.sp-auth-success-icon {
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  color: var(--c-forest);
}
.sp-auth-success-icon svg { display: block; width: 100%; height: 100%; }

.sp-auth-tips {
  text-align: left;
  background: var(--c-cream);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 26px 0;
}
.sp-auth-tips h6 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-tan);
  margin: 0 0 10px;
}
.sp-auth-tips ul {
  list-style: none;
  padding: 0; margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-text);
}
.sp-auth-tips li {
  padding-left: 18px;
  position: relative;
}
.sp-auth-tips li::before {
  content: "·";
  position: absolute;
  left: 6px; top: -2px;
  font-size: 18px;
  color: var(--c-tan);
  font-weight: 700;
}

.sp-auth-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* ----- Mobile ----- */
@media (max-width: 520px) {
  .sp-auth { padding: 32px 16px 60px; }
  .sp-auth-card { padding: 28px 20px; border-radius: 12px; }
  .sp-auth-head h1 { font-size: 28px; }
  .sp-auth-row { grid-template-columns: 1fr; }
}

/* ----- Payment options (checkout-payment.html) — CSS-only show on radio :checked -----
   The HTML wraps a radio <input> inside .sp-co-pay-head label. The base CSS hides
   .sp-co-pay-body and only shows it when .sp-co-pay-option.active is set (which
   needs JS). These rules add a pure-CSS path using :has() + :checked so that
   selecting a payment method reveals its redirect message without any script. */
.sp-co-pay-option:has(input[type="radio"]:checked) {
  background: var(--c-cream);
}
.sp-co-pay-option:has(input[type="radio"]:checked) .sp-co-pay-body {
  display: block;
}

/* ============================================================================
   ACCOUNT PAGES   (account.html + account-*.html)
   ----------------------------------------------------------------------------
   Master sidebar + per-page main content. Each account-* page reuses the
   same sidebar markup; .is-active is set on the link for the current page.
   ========================================================================== */
.sp-acct {
  background: var(--c-cream);
  padding: 40px var(--pad-x) 80px;
  min-height: 60vh;
}
.sp-acct-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: flex-start;
}

/* ----- Sidebar ----- */
.sp-acct-sidebar {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 24px 18px;
  position: sticky;
  top: 90px;
}
.sp-acct-greet {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 18px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 14px;
}
.sp-acct-avatar {
  width: 44px; height: 44px;
  background: var(--c-forest);
  color: var(--c-cream);
  border-radius: 50%;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sp-acct-greet-text { min-width: 0; }
.sp-acct-greet h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.25;
  margin: 0 0 2px;
  color: var(--c-charcoal);
}
.sp-acct-greet h2 em { font-style: italic; color: var(--c-tan); }
.sp-acct-greet p {
  font-size: 12px;
  color: var(--c-muted);
  margin: 0;
  word-break: break-word;
}

.sp-acct-nav { display: flex; flex-direction: column; gap: 1px; }

/* Collapsible group — <details>/<summary> for click-to-toggle, no JS */
.sp-acct-nav-section {
  display: contents;  /* let children flow into the flex column */
}
.sp-acct-nav-section[open] .sp-acct-nav-chev {
  transform: rotate(180deg);
}
.sp-acct-nav-section summary.sp-acct-nav-group { list-style: none; }
.sp-acct-nav-section summary.sp-acct-nav-group::-webkit-details-marker { display: none; }
.sp-acct-nav-section summary.sp-acct-nav-group::marker { content: ''; }

.sp-acct-nav-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 600;
  padding: 16px 12px 6px;
  margin-top: 4px;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  transition: color 0.15s var(--ease);
}
.sp-acct-nav-group:hover {
  color: var(--c-charcoal);
}
.sp-acct-nav-chev {
  width: 12px;
  height: 12px;
  color: var(--c-muted);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}
.sp-acct-nav-group:hover .sp-acct-nav-chev { color: var(--c-charcoal); }
.sp-acct-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.sp-acct-nav-link .icon {
  width: 15px; height: 15px;
  color: var(--c-muted);
  flex-shrink: 0;
}
.sp-acct-nav-count {
  margin-left: auto;
  background: var(--c-cream);
  color: var(--c-charcoal);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}
.sp-acct-nav-dot {
  margin-left: auto;
  width: 8px; height: 8px;
  background: #c44a3e;
  border-radius: 50%;
  flex-shrink: 0;
}
.sp-acct-nav-link:hover {
  background: var(--c-cream);
  color: var(--c-charcoal);
}
.sp-acct-nav-link:hover .icon { color: var(--c-charcoal); }
.sp-acct-nav-link.is-active {
  background: var(--c-forest);
  color: var(--c-cream);
}
.sp-acct-nav-link.is-active .icon { color: var(--c-cream); }
.sp-acct-nav-link.is-active .sp-acct-nav-count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--c-cream);
}
.sp-acct-signout {
  color: #b85450 !important;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
  border-radius: 0;
}
.sp-acct-signout .icon { color: #b85450 !important; }

/* ----- Main ----- */
.sp-acct-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Top row: welcome banner + loyalty card side-by-side at 50/50 */
.sp-acct-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sp-acct-top-row > * { margin: 0; }

/* Welcome banner */
.sp-acct-welcome {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 180px;
}
.sp-acct-welcome h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 24px;
  margin: 0 0 4px;
  color: var(--c-charcoal);
  line-height: 1.2;
}
.sp-acct-welcome h1 em { font-style: italic; color: var(--c-tan); }
.sp-acct-welcome p {
  font-size: 13.5px;
  color: var(--c-muted);
  margin: 0;
  line-height: 1.5;
}
.sp-acct-welcome-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  background: var(--c-forest);
  color: var(--c-cream);
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s var(--ease);
  white-space: nowrap;
  align-self: flex-start;
}
.sp-acct-welcome-cta:hover { background: var(--c-charcoal); }
.sp-acct-welcome-cta .icon { width: 14px; height: 14px; }

/* Loyalty card */
.sp-acct-loyalty {
  background: linear-gradient(135deg, var(--c-forest) 0%, #1f4438 100%);
  color: var(--c-cream);
  border-radius: 16px;
  padding: 24px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 180px;
}
.sp-acct-loyalty-left { flex: 1; min-width: 0; }
.sp-acct-loyalty-tier {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-tan);
  font-weight: 600;
  margin-bottom: 10px;
}
.sp-acct-loyalty-points {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sp-acct-loyalty-points .num {
  font-family: var(--f-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
}
.sp-acct-loyalty-points .lbl {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.sp-acct-loyalty-next {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 10px;
  line-height: 1.4;
}
.sp-acct-loyalty-next strong { color: var(--c-cream); font-weight: 600; }
.sp-acct-loyalty-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  overflow: hidden;
}
.sp-acct-loyalty-bar-fill {
  height: 100%;
  background: var(--c-tan);
  border-radius: 6px;
  transition: width 0.5s var(--ease);
}
.sp-acct-loyalty-right {
  width: 70px; height: 70px;
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}
.sp-acct-loyalty-right svg { width: 100%; height: 100%; }

/* Stats grid */
.sp-acct-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.sp-acct-stat {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.sp-acct-stat:hover {
  border-color: var(--c-forest);
  transform: translateY(-1px);
}
.sp-acct-stat .label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
  margin: 0 0 6px;
}
.sp-acct-stat .value {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--c-charcoal);
  line-height: 1.1;
  margin-bottom: 4px;
}
.sp-acct-stat .meta {
  font-size: 12px;
  color: var(--c-muted);
}

/* Generic block (section wrapper) */
.sp-acct-block {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 24px 28px 28px;
}
.sp-acct-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.sp-acct-block-head h2 {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--c-charcoal);
  margin: 0;
}
.sp-acct-block-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--c-forest);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s var(--ease);
}
.sp-acct-block-link:hover { border-bottom-color: var(--c-forest); }
.sp-acct-block-link .icon { width: 12px; height: 12px; }

/* Orders */
.sp-acct-orders { display: flex; flex-direction: column; gap: 12px; }
.sp-acct-order {
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 18px 22px;
  transition: border-color 0.15s var(--ease);
}
.sp-acct-order:hover { border-color: var(--c-tan); }
.sp-acct-order-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.sp-acct-order-head .num {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-charcoal);
  margin-bottom: 2px;
}
.sp-acct-order-head .date {
  font-size: 12px;
  color: var(--c-muted);
}
.sp-acct-order-status {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.sp-acct-order-status.delivered  { background: rgba(46, 93, 78, 0.1); color: var(--c-forest); }
.sp-acct-order-status.in-transit { background: rgba(212, 165, 116, 0.2); color: #8d6f3f; }
.sp-acct-order-status.processing { background: rgba(184, 132, 80, 0.12); color: #8d5f3f; }
.sp-acct-order-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sp-acct-order-body .items {
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.5;
  flex: 1;
  min-width: 200px;
}
.sp-acct-order-body .total {
  font-weight: 600;
  font-size: 15px;
  color: var(--c-charcoal);
}
.sp-acct-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
}
.sp-acct-order-actions a {
  font-size: 13px;
  color: var(--c-forest);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s var(--ease);
}
.sp-acct-order-actions a:hover { border-bottom-color: var(--c-forest); }

/* Quick actions grid */
.sp-acct-quicks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.sp-acct-quick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--c-cream);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease);
}
.sp-acct-quick:hover {
  background: #ece4d3;
  transform: translateY(-1px);
}
.sp-acct-quick-icon {
  width: 36px; height: 36px;
  background: var(--c-white);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-forest);
  flex-shrink: 0;
}
.sp-acct-quick-icon svg { width: 18px; height: 18px; }
.sp-acct-quick-text { min-width: 0; }
.sp-acct-quick-text .title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 2px;
}
.sp-acct-quick-text .sub {
  font-size: 12px;
  color: var(--c-muted);
}

/* Default address preview */
.sp-acct-default-addr {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--c-cream);
  border-radius: 12px;
  padding: 18px 22px;
}
.sp-acct-default-addr-pin {
  width: 32px; height: 32px;
  background: var(--c-white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-forest);
  flex-shrink: 0;
}
.sp-acct-default-addr-pin .icon { width: 16px; height: 16px; }
.sp-acct-default-addr-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-tan);
  font-weight: 600;
  margin-bottom: 6px;
}
.sp-acct-default-addr-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-text);
}
.sp-acct-default-addr-body strong {
  color: var(--c-charcoal);
  font-weight: 600;
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
  .sp-acct-top-row { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .sp-acct-stats { grid-template-columns: repeat(2, 1fr); }
  .sp-acct-quicks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .sp-acct-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .sp-acct-sidebar { position: static; }
}
@media (max-width: 520px) {
  .sp-acct { padding: 24px 14px 60px; }
  .sp-acct-sidebar, .sp-acct-block, .sp-acct-welcome { border-radius: 12px; }
  .sp-acct-welcome { padding: 22px 22px; }
  .sp-acct-welcome h1 { font-size: 22px; }
  .sp-acct-loyalty { padding: 22px 22px; }
  .sp-acct-loyalty-right { display: none; }
  .sp-acct-loyalty-points .num { font-size: 30px; }
  .sp-acct-stats { grid-template-columns: 1fr 1fr; }
  .sp-acct-quicks { grid-template-columns: 1fr; }
  .sp-acct-block { padding: 22px 20px; }
}

/* ============================================================================
   ACCOUNT · ORDERS PAGES  (account-orders.html, account-order-detail.html)
   ========================================================================== */

/* Generic page header used at the top of inner account pages */
.sp-acct-page-head h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 28px;
  margin: 0 0 4px;
  color: var(--c-charcoal);
  line-height: 1.2;
}
.sp-acct-page-head p {
  font-size: 14px;
  color: var(--c-muted);
  margin: 0;
}

/* ----- Filter radios (hidden, used for CSS-only status filtering) ----- */
.sp-ord-filter-radio {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ----- Toolbar (pills + sort) ----- */
.sp-ord-toolbar {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sp-ord-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sp-ord-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-cream);
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.sp-ord-pill:hover { background: #ece4d3; }
.sp-ord-pill .count {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  background: var(--c-white);
  border-radius: 10px;
  color: var(--c-muted);
}
/* Active pill — the one whose radio is :checked */
#ord-f-all:checked       ~ .sp-ord-toolbar .sp-ord-pill[for="ord-f-all"],
#ord-f-transit:checked   ~ .sp-ord-toolbar .sp-ord-pill[for="ord-f-transit"],
#ord-f-delivered:checked ~ .sp-ord-toolbar .sp-ord-pill[for="ord-f-delivered"],
#ord-f-returned:checked  ~ .sp-ord-toolbar .sp-ord-pill[for="ord-f-returned"],
#ord-f-cancelled:checked ~ .sp-ord-toolbar .sp-ord-pill[for="ord-f-cancelled"] {
  background: var(--c-forest);
  color: var(--c-cream);
}
#ord-f-all:checked       ~ .sp-ord-toolbar .sp-ord-pill[for="ord-f-all"] .count,
#ord-f-transit:checked   ~ .sp-ord-toolbar .sp-ord-pill[for="ord-f-transit"] .count,
#ord-f-delivered:checked ~ .sp-ord-toolbar .sp-ord-pill[for="ord-f-delivered"] .count,
#ord-f-returned:checked  ~ .sp-ord-toolbar .sp-ord-pill[for="ord-f-returned"] .count,
#ord-f-cancelled:checked ~ .sp-ord-toolbar .sp-ord-pill[for="ord-f-cancelled"] .count {
  background: rgba(255, 255, 255, 0.2);
  color: var(--c-cream);
}

.sp-ord-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sp-ord-sort-label {
  font-size: 12px;
  color: var(--c-muted);
  font-weight: 500;
}
.sp-ord-sort-select {
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 7px 28px 7px 12px;
  font-size: 13px;
  font-family: var(--f-body);
  color: var(--c-charcoal);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%237a7263' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}

/* ----- Orders list filtering ----- */
.sp-ord-list { display: flex; flex-direction: column; gap: 12px; }

/* Empty state — hidden by default, only shown when its filter is active and no rows match */
.sp-ord-empty {
  display: none;
  text-align: center;
  padding: 40px 20px;
  background: var(--c-cream);
  border-radius: 14px;
  color: var(--c-muted);
  font-size: 14px;
}
.sp-ord-empty p { margin: 0; }

/* CSS-only filtering: hide non-matching articles when a filter is active */
#ord-f-transit:checked   ~ .sp-ord-list article:not([data-status="in-transit"]),
#ord-f-delivered:checked ~ .sp-ord-list article:not([data-status="delivered"]),
#ord-f-returned:checked  ~ .sp-ord-list article:not([data-status="returned"]),
#ord-f-cancelled:checked ~ .sp-ord-list article:not([data-status="cancelled"]) {
  display: none;
}
/* Show only the matching empty state when its filter is active */
#ord-f-transit:checked   ~ .sp-ord-list [data-empty-for="transit"],
#ord-f-delivered:checked ~ .sp-ord-list [data-empty-for="delivered"],
#ord-f-returned:checked  ~ .sp-ord-list [data-empty-for="returned"],
#ord-f-cancelled:checked ~ .sp-ord-list [data-empty-for="cancelled"] {
  /* Only display if it would otherwise have no siblings (i.e. all articles hidden).
     With current demo data, returns/cancellations exist so this stays hidden.
     Empty states purely document the structure for when there genuinely are none. */
}

/* Returned and Cancelled status pills */
.sp-acct-order-status.returned  { background: rgba(184, 84, 80, 0.12); color: #b85450; }
.sp-acct-order-status.cancelled { background: rgba(122, 114, 99, 0.15); color: var(--c-muted); }

/* ----- Items preview (orders list cards) ----- */
.sp-ord-items-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sp-ord-thumb {
  width: 52px; height: 52px;
  border-radius: 8px;
  background: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--c-muted);
  flex-shrink: 0;
  overflow: hidden;
}
.sp-ord-thumb-more {
  background: var(--c-charcoal);
  color: var(--c-cream);
  font-size: 12px;
  font-weight: 600;
}
.sp-ord-items-text {
  flex: 1;
  min-width: 180px;
}
.sp-ord-items-text .names {
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.5;
  margin-bottom: 4px;
}
.sp-ord-items-text .eta {
  font-size: 12px;
  color: var(--c-muted);
}
.sp-ord-items-text .eta strong {
  color: var(--c-charcoal);
  font-weight: 600;
}
.sp-ord-total {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--c-charcoal);
  margin-left: auto;
  white-space: nowrap;
}

/* ----- Pagination ----- */
.sp-ord-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  gap: 12px;
  flex-wrap: wrap;
}
.sp-ord-page-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-charcoal);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.sp-ord-page-arrow:hover { border-color: var(--c-forest); color: var(--c-forest); }
.sp-ord-page-arrow.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.sp-ord-page-arrow svg { width: 14px; height: 14px; }
.sp-ord-page-nums {
  display: inline-flex;
  gap: 4px;
}
.sp-ord-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s var(--ease);
}
.sp-ord-page-num:hover { background: var(--c-cream); }
.sp-ord-page-num.is-active {
  background: var(--c-forest);
  color: var(--c-cream);
}

/* ============================================================================
   ORDER DETAIL PAGE
   ========================================================================== */

.sp-ord-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  margin-bottom: -8px;
  align-self: flex-start;
  transition: color 0.15s var(--ease);
}
.sp-ord-back:hover { color: var(--c-forest); }
.sp-ord-back svg { width: 14px; height: 14px; }

/* Order header card */
.sp-ord-detail-head {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  overflow: hidden;
}
.sp-ord-detail-head-main {
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
.sp-ord-detail-head-main h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 26px;
  margin: 0 0 6px;
  color: var(--c-charcoal);
  line-height: 1.2;
}
.sp-ord-detail-meta {
  font-size: 13px;
  color: var(--c-muted);
  margin: 0;
  line-height: 1.5;
}
.sp-ord-detail-meta strong {
  color: var(--c-charcoal);
  font-weight: 600;
}
.sp-ord-detail-eta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  background: rgba(46, 93, 78, 0.06);
  border-top: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.sp-ord-detail-eta .icon {
  width: 22px; height: 22px;
  color: var(--c-forest);
  flex-shrink: 0;
}
.sp-ord-detail-eta .title {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.sp-ord-detail-eta .value {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-forest);
}
.sp-ord-detail-eta-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--c-forest);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s var(--ease);
}
.sp-ord-detail-eta-cta:hover { border-bottom-color: var(--c-forest); }
.sp-ord-detail-eta-cta svg { width: 13px; height: 13px; }

/* ----- Timeline ----- */
.sp-ord-timeline {
  list-style: none;
  padding: 4px 0 0;
  margin: 0;
  position: relative;
}
.sp-ord-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 12px;
  width: 2px;
  background: var(--c-border);
}
.sp-ord-timeline li {
  position: relative;
  padding: 0 0 22px 32px;
}
.sp-ord-timeline li:last-child { padding-bottom: 0; }
.sp-ord-timeline .dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-white);
  border: 2px solid var(--c-border);
  box-sizing: border-box;
  z-index: 1;
}
.sp-ord-timeline .done .dot {
  background: var(--c-forest);
  border-color: var(--c-forest);
}
.sp-ord-timeline .done .dot::after {
  content: '';
  position: absolute;
  left: 3px; top: 5px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--c-cream);
  border-bottom: 2px solid var(--c-cream);
  transform: rotate(-45deg);
}
.sp-ord-timeline .current .dot {
  background: var(--c-cream);
  border-color: var(--c-forest);
  box-shadow: 0 0 0 4px rgba(46, 93, 78, 0.15);
}
.sp-ord-timeline .step .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 2px;
}
.sp-ord-timeline .pending .step .title { color: var(--c-muted); font-weight: 500; }
.sp-ord-timeline .step .meta {
  font-size: 12px;
  color: var(--c-muted);
  line-height: 1.5;
}

/* ----- Items ----- */
.sp-ord-detail-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sp-ord-detail-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border);
}
.sp-ord-detail-item:last-child { border-bottom: none; padding-bottom: 0; }
.sp-ord-detail-item-img {
  width: 64px; height: 64px;
  border-radius: 8px;
  background: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--c-muted);
  flex-shrink: 0;
  overflow: hidden;
}
.sp-ord-detail-item-info {
  flex: 1;
  min-width: 0;
}
.sp-ord-detail-item-info .name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-charcoal);
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
  transition: color 0.15s var(--ease);
}
.sp-ord-detail-item-info .name:hover { color: var(--c-forest); }
.sp-ord-detail-item-info .meta {
  font-size: 12.5px;
  color: var(--c-muted);
  margin-bottom: 2px;
}
.sp-ord-detail-item-info .qty {
  font-size: 12.5px;
  color: var(--c-text);
}
.sp-ord-detail-item-price {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--c-charcoal);
  white-space: nowrap;
}

/* ----- Delivery & payment grid ----- */
.sp-ord-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sp-ord-detail-card {
  background: var(--c-cream);
  border-radius: 12px;
  padding: 16px 18px;
}
.sp-ord-detail-card .label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.sp-ord-detail-card .label .icon {
  width: 14px; height: 14px;
  color: var(--c-forest);
}
.sp-ord-detail-card .body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-text);
}
.sp-ord-detail-card .body strong {
  color: var(--c-charcoal);
  font-weight: 600;
}
.sp-ord-detail-card-muted {
  color: var(--c-muted);
  font-size: 12.5px;
  margin-top: 2px;
}
.sp-ord-detail-pay {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.sp-ord-detail-pay .brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  background: #1A1F71;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* ----- Totals ----- */
.sp-ord-totals {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-ord-totals .row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--c-text);
}
.sp-ord-totals .row.discount { color: var(--c-forest); }
.sp-ord-totals .row.total {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--c-charcoal);
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
  margin-top: 4px;
}
.sp-ord-totals .ship-tag {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  background: var(--c-cream);
  border-radius: 8px;
  color: var(--c-muted);
  margin-left: 6px;
}

/* ----- Action footer ----- */
.sp-ord-detail-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.sp-ord-detail-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-charcoal);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
  text-align: center;
}
.sp-ord-detail-action svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.sp-ord-detail-action:hover {
  border-color: var(--c-forest);
  color: var(--c-forest);
}
.sp-ord-detail-action.primary {
  background: var(--c-forest);
  color: var(--c-cream);
  border-color: var(--c-forest);
}
.sp-ord-detail-action.primary:hover {
  background: var(--c-charcoal);
  border-color: var(--c-charcoal);
  color: var(--c-cream);
}

/* ----- Responsive — orders pages ----- */
@media (max-width: 1024px) {
  .sp-ord-detail-grid { grid-template-columns: 1fr; }
  .sp-ord-detail-actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .sp-ord-toolbar { padding: 12px; gap: 12px; }
  .sp-ord-sort { width: 100%; }
  .sp-ord-sort-select { flex: 1; }
  .sp-ord-items-preview { gap: 10px; }
  .sp-ord-thumb { width: 44px; height: 44px; }
  .sp-ord-total { font-size: 16px; }
  .sp-ord-detail-head-main { padding: 22px 22px; }
  .sp-ord-detail-head-main h1 { font-size: 22px; }
  .sp-ord-detail-eta { padding: 14px 22px; }
  .sp-ord-detail-eta-cta { margin-left: 0; }
  .sp-ord-detail-actions { grid-template-columns: 1fr; }
  .sp-ord-pagination { justify-content: center; }
}

/* ============================================================================
   TRACK ORDER · STATUS PAGE  (track-order-status.html)
   ----------------------------------------------------------------------------
   Public tracking page reached after submitting the form on track-order.html.
   Uses the same hero+page layout as track-order.html but with a rich status
   card, full timeline, delivery info, and items.
   ========================================================================== */

.sp-tk-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 880px;
  margin: 0 auto;
}

/* ----- Live status banner ----- */
.sp-tk-status {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 26px 28px;
}
.sp-tk-status-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sp-tk-status-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.sp-tk-status-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 28px;
  margin: 0;
  color: var(--c-forest);
  line-height: 1.1;
}
.sp-tk-status-update {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 22px;
  padding: 12px 14px;
  background: var(--c-cream);
  border-radius: 10px;
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.5;
}
.sp-tk-status-update .icon {
  width: 16px; height: 16px;
  color: var(--c-forest);
  flex-shrink: 0;
  margin-top: 1px;
}
.sp-tk-status-update strong {
  color: var(--c-charcoal);
  font-weight: 600;
}

/* Progress bar with steps */
.sp-tk-progress {
  margin: 0 0 22px;
  position: relative;
}
.sp-tk-progress-bar {
  height: 4px;
  background: var(--c-border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}
.sp-tk-progress-bar-fill {
  height: 100%;
  background: var(--c-forest);
  border-radius: 4px;
  transition: width 0.5s var(--ease);
}
.sp-tk-progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
  position: relative;
}
.sp-tk-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.sp-tk-progress-step .dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c-white);
  border: 2px solid var(--c-border);
  position: relative;
  z-index: 1;
}
.sp-tk-progress-step.done .dot {
  background: var(--c-forest);
  border-color: var(--c-forest);
}
.sp-tk-progress-step.current .dot {
  background: var(--c-cream);
  border-color: var(--c-forest);
  box-shadow: 0 0 0 4px rgba(46, 93, 78, 0.18);
}
.sp-tk-progress-step .label {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-muted);
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sp-tk-progress-step.done .label { color: var(--c-text); }
.sp-tk-progress-step.current .label {
  color: var(--c-forest);
  font-weight: 600;
}

.sp-tk-status-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.sp-tk-eta .label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.sp-tk-eta .value {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--c-charcoal);
}
.sp-tk-notify {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-charcoal);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.sp-tk-notify:hover {
  border-color: var(--c-forest);
  color: var(--c-forest);
}
.sp-tk-notify .icon { width: 14px; height: 14px; }

/* ----- Generic block (reused for timeline, items, info) ----- */
.sp-tk-block {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 24px 28px;
}
.sp-tk-block-head {
  margin-bottom: 18px;
}
.sp-tk-block-head h2 {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--c-charcoal);
  margin: 0 0 2px;
}
.sp-tk-block-sub {
  font-size: 12.5px;
  color: var(--c-muted);
}

/* Timeline tweaks for tracking page (more space, location emphasis) */
.sp-tk-timeline li { padding-bottom: 18px; }
.sp-tk-timeline .step .meta {
  font-size: 12.5px;
  line-height: 1.5;
}

/* Delivery info grid */
.sp-tk-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sp-tk-tracking-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--c-forest);
  font-weight: 600;
}

/* ----- Help section ----- */
.sp-tk-help {
  background: linear-gradient(135deg, var(--c-cream) 0%, #ece4d3 100%);
  border-radius: 16px;
  padding: 26px 28px;
}
.sp-tk-help-text h3 {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--c-charcoal);
  margin: 0 0 6px;
}
.sp-tk-help-text p {
  font-size: 13.5px;
  color: var(--c-text);
  margin: 0 0 18px;
  line-height: 1.5;
}
.sp-tk-help-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.sp-tk-help-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-charcoal);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.sp-tk-help-btn svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.sp-tk-help-btn:hover {
  border-color: var(--c-forest);
  color: var(--c-forest);
}

/* ----- Responsive ----- */
@media (max-width: 720px) {
  .sp-tk-status, .sp-tk-block, .sp-tk-help { padding: 22px 22px; }
  .sp-tk-status-title { font-size: 24px; }
  .sp-tk-info-grid { grid-template-columns: 1fr; }
  .sp-tk-help-actions { grid-template-columns: 1fr 1fr; }
  .sp-tk-progress-step .label { font-size: 10px; white-space: normal; }
}
@media (max-width: 480px) {
  .sp-tk-progress-step .label { display: none; }
  .sp-tk-help-actions { grid-template-columns: 1fr; }
}

/* ----- Clickable product titles in cart / drawer / summary -----
   The cart page line items, mini drawer items, and order-summary rows all
   wrap the product name in <a href="product.html"> so users can click
   through to the PDP. Style them to feel like regular bold titles by
   default and show a forest-green underline on hover.                  */
.sp-cartp-line .line-name a,
.sp-mini-drawer-item-name a,
.sp-co-line .info .name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.sp-cartp-line .line-name a:hover,
.sp-mini-drawer-item-name a:hover,
.sp-co-line .info .name a:hover {
  color: var(--c-forest);
  border-bottom-color: var(--c-forest);
}

/* ============================================================================
   ACCOUNT · INNER PAGES (profile, addresses, password, cards, bank,
                          notifications, coupons)
   ========================================================================== */

/* ----- Shared: header row with action on the right ----- */
.sp-acct-page-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

/* ----- Shared: form bar (bottom of forms with Save / Cancel) ----- */
.sp-acct-form-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.sp-acct-form-link {
  font-size: 13px;
  color: var(--c-forest);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s var(--ease);
}
.sp-acct-form-link:hover { border-bottom-color: var(--c-forest); }
.sp-acct-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 540px;
}
.sp-acct-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sp-acct-optional {
  color: var(--c-muted);
  font-weight: 400;
  font-size: 12px;
}

/* ----- Shared: buttons ----- */
.sp-acct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 22px;
  background: var(--c-forest);
  color: var(--c-cream);
  border: 1px solid var(--c-forest);
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--f-body);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
.sp-acct-btn:hover {
  background: var(--c-charcoal);
  border-color: var(--c-charcoal);
  color: var(--c-cream);
}
.sp-acct-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 22px;
  background: transparent;
  color: var(--c-charcoal);
  border: 1px solid var(--c-border);
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--f-body);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
  white-space: nowrap;
}
.sp-acct-btn-ghost:hover {
  border-color: var(--c-forest);
  color: var(--c-forest);
}

/* ----- Shared: dashed "add new" tile ----- */
.sp-acct-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(46, 93, 78, 0.06);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}
.sp-acct-tip .icon {
  width: 18px; height: 18px;
  color: var(--c-forest);
  flex-shrink: 0;
  margin-top: 1px;
}
.sp-acct-tip p { margin: 0; color: var(--c-text); }
.sp-acct-tip.secure { background: rgba(46, 93, 78, 0.04); }

/* ----- Block-head link can be a danger button ----- */
.sp-acct-block-link-danger {
  color: #b85450;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.sp-acct-block-link-danger:hover { border-bottom-color: #b85450; }

/* ============================================================================
   PROFILE PAGE
   ========================================================================== */
.sp-acct-avatar-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.sp-acct-avatar-lg {
  width: 80px; height: 80px;
  background: var(--c-forest);
  color: var(--c-cream);
  border-radius: 50%;
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sp-acct-avatar-info { flex: 1; min-width: 200px; }
.sp-acct-avatar-info p {
  font-size: 13.5px;
  color: var(--c-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}
.sp-acct-avatar-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Communication preferences */
.sp-acct-prefs { display: flex; flex-direction: column; }
.sp-acct-pref-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.sp-acct-pref-row:last-child { border-bottom: none; }
.sp-acct-pref-row .title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 2px;
}
.sp-acct-pref-row .sub {
  font-size: 12.5px;
  color: var(--c-muted);
}
.sp-acct-pref-toggles {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Toggle switch */
.sp-acct-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.sp-acct-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.sp-acct-toggle .slider {
  position: relative;
  width: 38px;
  height: 22px;
  background: var(--c-border);
  border-radius: 22px;
  transition: background 0.2s var(--ease);
  flex-shrink: 0;
}
.sp-acct-toggle .slider::before {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 18px; height: 18px;
  background: var(--c-white);
  border-radius: 50%;
  transition: transform 0.2s var(--ease);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.sp-acct-toggle input:checked + .slider { background: var(--c-forest); }
.sp-acct-toggle input:checked + .slider::before { transform: translateX(16px); }
.sp-acct-toggle .lbl {
  font-size: 12.5px;
  color: var(--c-text);
  font-weight: 500;
}

/* ============================================================================
   ADDRESSES PAGE
   ========================================================================== */
.sp-acct-addr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.sp-acct-addr {
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s var(--ease);
}
.sp-acct-addr:hover { border-color: var(--c-tan); }
.sp-acct-addr.is-default { border-color: var(--c-forest); }
.sp-acct-addr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sp-acct-addr-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-tan);
  font-weight: 600;
}
.sp-acct-addr-default-pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-forest);
  background: rgba(46, 93, 78, 0.1);
  padding: 3px 8px;
  border-radius: 10px;
}
.sp-acct-addr-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-text);
}
.sp-acct-addr-body strong {
  color: var(--c-charcoal);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.sp-acct-addr-phone { color: var(--c-muted); font-size: 13px; }
.sp-acct-addr-actions {
  display: flex;
  gap: 14px;
  font-size: 13px;
  margin-top: auto;
  padding-top: 4px;
}
.sp-acct-addr-actions a {
  color: var(--c-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.sp-acct-addr-actions a:hover {
  color: var(--c-forest);
  border-bottom-color: var(--c-forest);
}

.sp-acct-addr-add {
  border: 1.5px dashed var(--c-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  color: var(--c-charcoal);
  transition: border-color 0.15s, background 0.15s;
  min-height: 180px;
}
.sp-acct-addr-add:hover {
  border-color: var(--c-forest);
  border-style: solid;
  background: rgba(46, 93, 78, 0.04);
}
.sp-acct-addr-add svg {
  width: 24px; height: 24px;
  color: var(--c-forest);
}
.sp-acct-addr-add .title {
  font-size: 14px;
  font-weight: 600;
}
.sp-acct-addr-add .sub {
  font-size: 12.5px;
  color: var(--c-muted);
}

/* ============================================================================
   CHANGE PASSWORD PAGE
   ========================================================================== */
.sp-acct-pw-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.sp-acct-pw-meter-bar {
  flex: 1;
  height: 4px;
  background: var(--c-border);
  border-radius: 4px;
  overflow: hidden;
}
.sp-acct-pw-meter-fill {
  height: 100%;
  background: var(--c-forest);
  border-radius: 4px;
  transition: width 0.3s var(--ease);
}
.sp-acct-pw-meter-label {
  font-size: 12px;
  color: var(--c-muted);
}
.sp-acct-pw-meter-label em {
  font-style: normal;
  font-weight: 600;
  color: var(--c-muted);
}

.sp-acct-pw-rules {
  list-style: none;
  padding: 12px 14px;
  margin: 0;
  background: var(--c-cream);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sp-acct-pw-rules li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--c-text);
}
.sp-acct-pw-rules svg {
  width: 12px; height: 12px;
  color: var(--c-muted);
  flex-shrink: 0;
}
.sp-acct-pw-rules li.met { color: var(--c-forest); }
.sp-acct-pw-rules li.met svg { color: var(--c-forest); }

/* Two-factor card */
.sp-acct-2fa {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--c-cream);
  border-radius: 12px;
  flex-wrap: wrap;
}
.sp-acct-2fa-icon {
  width: 44px; height: 44px;
  background: var(--c-white);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-forest);
  flex-shrink: 0;
}
.sp-acct-2fa-icon svg { width: 20px; height: 20px; }
.sp-acct-2fa-text { flex: 1; min-width: 220px; }
.sp-acct-2fa-text .title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 4px;
}
.sp-acct-2fa-text .title em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
}
.sp-acct-2fa-text .title em.off { background: rgba(184, 84, 80, 0.12); color: #b85450; }
.sp-acct-2fa-text .title em.on  { background: rgba(46, 93, 78, 0.1); color: var(--c-forest); }
.sp-acct-2fa-text p {
  font-size: 13px;
  color: var(--c-muted);
  margin: 0;
  line-height: 1.5;
}

/* Sessions list */
.sp-acct-sessions { display: flex; flex-direction: column; gap: 10px; }
.sp-acct-session {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.sp-acct-session.is-current { border-color: var(--c-forest); background: rgba(46, 93, 78, 0.04); }
.sp-acct-session-icon {
  width: 36px; height: 36px;
  background: var(--c-cream);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-charcoal);
  flex-shrink: 0;
}
.sp-acct-session-icon svg { width: 16px; height: 16px; }
.sp-acct-session-body { flex: 1; min-width: 0; }
.sp-acct-session-body .title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 2px;
}
.sp-acct-session-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--c-forest);
  color: var(--c-cream);
  margin-left: 6px;
}
.sp-acct-session-body .meta {
  font-size: 12px;
  color: var(--c-muted);
}
.sp-acct-session-action {
  font-size: 12.5px;
  color: var(--c-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.sp-acct-session-action:hover {
  color: #b85450;
  border-bottom-color: #b85450;
}

/* ============================================================================
   SAVED CARDS PAGE
   ========================================================================== */
.sp-acct-cc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.sp-acct-cc {
  background: linear-gradient(135deg, var(--c-charcoal) 0%, #28241e 100%);
  color: var(--c-cream);
  border-radius: 14px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sp-acct-cc::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.sp-acct-cc.is-default {
  background: linear-gradient(135deg, var(--c-forest) 0%, #1f4438 100%);
}
.sp-acct-cc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sp-acct-cc-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--c-white);
}
.sp-acct-cc-brand.visa {
  background: #1A1F71;
  color: #fff;
  font-style: italic;
}
.sp-acct-cc-brand.mc {
  padding: 0 8px;
  height: 24px;
  background: var(--c-white);
  display: inline-flex;
  align-items: center;
}
.sp-acct-cc-brand.mc .mc-c1, .sp-acct-cc-brand.mc .mc-c2 {
  width: 14px; height: 14px; border-radius: 50%;
}
.sp-acct-cc-brand.mc .mc-c1 { background: #EB001B; }
.sp-acct-cc-brand.mc .mc-c2 { background: #F79E1B; margin-left: -5px; mix-blend-mode: multiply; }
.sp-acct-cc-brand-name {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}
.sp-acct-cc-default-pill {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  color: var(--c-cream);
}
.sp-acct-cc-chip {
  width: 32px; height: 24px;
  color: rgba(255, 255, 255, 0.5);
  margin: 2px 0;
}
.sp-acct-cc-chip svg { width: 100%; height: 100%; }
.sp-acct-cc-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 16px;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.sp-acct-cc-foot {
  display: flex;
  gap: 24px;
  margin-top: auto;
}
.sp-acct-cc-foot .lbl {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2px;
}
.sp-acct-cc-foot .val {
  font-size: 13px;
  font-weight: 500;
}
.sp-acct-cc-actions {
  position: absolute;
  bottom: 14px;
  right: 18px;
  display: flex;
  gap: 12px;
  font-size: 11.5px;
}
.sp-acct-cc-actions a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.sp-acct-cc-actions a:hover {
  color: var(--c-cream);
  border-bottom-color: var(--c-cream);
}

.sp-acct-cc-add {
  border: 1.5px dashed var(--c-border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  color: var(--c-charcoal);
  transition: border-color 0.15s, background 0.15s;
  min-height: 200px;
}
.sp-acct-cc-add:hover {
  border-color: var(--c-forest);
  border-style: solid;
  background: rgba(46, 93, 78, 0.04);
}
.sp-acct-cc-add svg {
  width: 26px; height: 26px;
  color: var(--c-forest);
}
.sp-acct-cc-add .title { font-size: 14px; font-weight: 600; }
.sp-acct-cc-add .sub { font-size: 12px; color: var(--c-muted); }

/* ============================================================================
   BANK TRANSFER PAGE
   ========================================================================== */
.sp-acct-bank-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sp-acct-bank {
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 18px 22px;
  transition: border-color 0.15s;
}
.sp-acct-bank:hover { border-color: var(--c-tan); }
.sp-acct-bank.is-default { border-color: var(--c-forest); }
.sp-acct-bank-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sp-acct-bank-logo {
  width: 44px; height: 44px;
  background: var(--c-cream);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-forest);
  flex-shrink: 0;
}
.sp-acct-bank-logo svg { width: 22px; height: 22px; }
.sp-acct-bank-info { flex: 1; min-width: 0; }
.sp-acct-bank-info .title {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 2px;
}
.sp-acct-bank-info .meta {
  font-size: 12.5px;
  color: var(--c-muted);
}
.sp-acct-bank-default-pill {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(46, 93, 78, 0.1);
  color: var(--c-forest);
}
.sp-acct-bank-meta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--c-border);
}
.sp-acct-bank-meta-row .lbl {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 600;
  margin-bottom: 3px;
}
.sp-acct-bank-meta-row .val {
  font-size: 13px;
  color: var(--c-charcoal);
  font-weight: 500;
}
.sp-acct-bank-actions {
  display: flex;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
  font-size: 13px;
}
.sp-acct-bank-actions a {
  color: var(--c-forest);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.sp-acct-bank-actions a:hover { border-bottom-color: var(--c-forest); }
.sp-acct-bank-actions a:last-child {
  color: var(--c-muted);
  margin-left: auto;
}
.sp-acct-bank-actions a:last-child:hover {
  color: #b85450;
  border-bottom-color: #b85450;
}

.sp-acct-bank-add {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1.5px dashed var(--c-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--c-charcoal);
  transition: border-color 0.15s, background 0.15s;
  flex-wrap: wrap;
}
.sp-acct-bank-add:hover {
  border-color: var(--c-forest);
  border-style: solid;
  background: rgba(46, 93, 78, 0.04);
}
.sp-acct-bank-add-icon {
  width: 44px; height: 44px;
  background: var(--c-cream);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-forest);
  flex-shrink: 0;
}
.sp-acct-bank-add-icon svg { width: 22px; height: 22px; }
.sp-acct-bank-add-text { flex: 1; min-width: 180px; }
.sp-acct-bank-add-text .title {
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 2px;
}
.sp-acct-bank-add-text .sub {
  font-size: 12.5px;
  color: var(--c-muted);
}

/* How it works steps */
.sp-acct-bank-how {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.sp-acct-bank-how .step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.sp-acct-bank-how .num {
  width: 28px; height: 28px;
  background: var(--c-forest);
  color: var(--c-cream);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 14px;
  flex-shrink: 0;
}
.sp-acct-bank-how .step-body .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 4px;
}
.sp-acct-bank-how .step-body .text {
  font-size: 12.5px;
  color: var(--c-muted);
  line-height: 1.5;
}

/* ============================================================================
   NOTIFICATIONS / COUPONS — shared toolbar
   ========================================================================== */
.sp-acct-filter-radio {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.sp-acct-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  flex-wrap: wrap;
}
.sp-acct-toolbar-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sp-acct-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-cream);
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.sp-acct-pill:hover { background: #ece4d3; }
.sp-acct-pill .count {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  background: var(--c-white);
  border-radius: 10px;
  color: var(--c-muted);
}
.sp-acct-toolbar-link {
  font-size: 13px;
  color: var(--c-forest);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.sp-acct-toolbar-link:hover { border-bottom-color: var(--c-forest); }

/* Notification filter pill active states */
#nf-all:checked    ~ .sp-acct-toolbar .sp-acct-pill[for="nf-all"],
#nf-unread:checked ~ .sp-acct-toolbar .sp-acct-pill[for="nf-unread"],
#nf-orders:checked ~ .sp-acct-toolbar .sp-acct-pill[for="nf-orders"],
#nf-promos:checked ~ .sp-acct-toolbar .sp-acct-pill[for="nf-promos"] {
  background: var(--c-forest);
  color: var(--c-cream);
}
#nf-all:checked    ~ .sp-acct-toolbar .sp-acct-pill[for="nf-all"]    .count,
#nf-unread:checked ~ .sp-acct-toolbar .sp-acct-pill[for="nf-unread"] .count,
#nf-orders:checked ~ .sp-acct-toolbar .sp-acct-pill[for="nf-orders"] .count,
#nf-promos:checked ~ .sp-acct-toolbar .sp-acct-pill[for="nf-promos"] .count {
  background: rgba(255, 255, 255, 0.2);
  color: var(--c-cream);
}

/* Coupon filter pill active states */
#cp-active:checked  ~ .sp-acct-toolbar .sp-acct-pill[for="cp-active"],
#cp-used:checked    ~ .sp-acct-toolbar .sp-acct-pill[for="cp-used"],
#cp-expired:checked ~ .sp-acct-toolbar .sp-acct-pill[for="cp-expired"] {
  background: var(--c-forest);
  color: var(--c-cream);
}
#cp-active:checked  ~ .sp-acct-toolbar .sp-acct-pill[for="cp-active"]  .count,
#cp-used:checked    ~ .sp-acct-toolbar .sp-acct-pill[for="cp-used"]    .count,
#cp-expired:checked ~ .sp-acct-toolbar .sp-acct-pill[for="cp-expired"] .count {
  background: rgba(255, 255, 255, 0.2);
  color: var(--c-cream);
}

/* CSS-only filtering — notifications */
#nf-unread:checked ~ .sp-acct-notif-list .sp-acct-notif:not(.is-unread),
#nf-orders:checked ~ .sp-acct-notif-list .sp-acct-notif:not([data-notif-type="orders"]),
#nf-promos:checked ~ .sp-acct-notif-list .sp-acct-notif:not([data-notif-type="promos"]) {
  display: none;
}

/* ============================================================================
   NOTIFICATIONS LIST
   ========================================================================== */
.sp-acct-notif-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-acct-notif {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.sp-acct-notif:hover { border-color: var(--c-tan); }
.sp-acct-notif.is-unread {
  background: rgba(46, 93, 78, 0.04);
  border-color: rgba(46, 93, 78, 0.2);
}
.sp-acct-notif.is-unread::before {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-forest);
  margin-top: 6px;
  margin-left: -10px;
}
.sp-acct-notif-icon {
  width: 36px; height: 36px;
  background: var(--c-cream);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-forest);
  flex-shrink: 0;
}
.sp-acct-notif-icon svg { width: 16px; height: 16px; }
.sp-acct-notif-icon.order { background: rgba(46, 93, 78, 0.12); color: var(--c-forest); }
.sp-acct-notif-icon.stock { background: rgba(184, 132, 80, 0.15); color: #8d5f3f; }
.sp-acct-notif-icon.promo { background: rgba(212, 165, 116, 0.2); color: #8d6f3f; }
.sp-acct-notif-icon.system { background: var(--c-cream); color: var(--c-charcoal); }

.sp-acct-notif-body { flex: 1; min-width: 0; }
.sp-acct-notif-body .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 4px;
}
.sp-acct-notif-body .text {
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.5;
  margin-bottom: 6px;
}
.sp-acct-notif-body .time {
  font-size: 11.5px;
  color: var(--c-muted);
}
.sp-acct-notif-action {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-forest);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
  align-self: center;
  flex-shrink: 0;
}
.sp-acct-notif-action:hover { border-bottom-color: var(--c-forest); }

/* ============================================================================
   MY COUPONS
   ========================================================================== */
.sp-acct-coupon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.sp-acct-coupon {
  display: flex;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: border-color 0.15s, transform 0.15s;
}
.sp-acct-coupon:hover {
  border-color: var(--c-forest);
  transform: translateY(-1px);
}
.sp-acct-coupon-stub {
  background: var(--c-forest);
  color: var(--c-cream);
  padding: 18px 16px;
  width: 92px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
.sp-acct-coupon-stub::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--c-white);
  border-radius: 50%;
  transform: translateY(-50%);
}
.sp-acct-coupon-stub .amt {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
}
.sp-acct-coupon-stub .amt span {
  font-size: 18px;
  font-weight: 400;
}
.sp-acct-coupon-stub .amt-icon {
  margin-bottom: 4px;
}
.sp-acct-coupon-stub .amt-icon svg {
  width: 28px; height: 28px;
  color: var(--c-cream);
}
.sp-acct-coupon-stub .lbl {
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.2;
}

.sp-acct-coupon-shipping .sp-acct-coupon-stub { background: var(--c-tan); color: var(--c-charcoal); }
.sp-acct-coupon-shipping .sp-acct-coupon-stub .amt-icon svg { color: var(--c-charcoal); }
.sp-acct-coupon-birthday .sp-acct-coupon-stub { background: #c4674f; }

.sp-acct-coupon-body {
  padding: 16px 18px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-acct-coupon-title {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--c-charcoal);
}
.sp-acct-coupon-desc {
  font-size: 12.5px;
  color: var(--c-text);
  margin: 0;
  line-height: 1.5;
}
.sp-acct-coupon-code {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--c-cream);
  border: 1px dashed var(--c-border);
  border-radius: 8px;
  margin-top: auto;
}
.sp-acct-coupon-code .code {
  flex: 1;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-forest);
  letter-spacing: 0.05em;
}
.sp-acct-coupon-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--c-charcoal);
  cursor: pointer;
  font-family: var(--f-body);
  transition: border-color 0.15s, color 0.15s;
}
.sp-acct-coupon-copy:hover { border-color: var(--c-forest); color: var(--c-forest); }
.sp-acct-coupon-copy svg { width: 12px; height: 12px; }
.sp-acct-coupon-meta {
  font-size: 11.5px;
  color: var(--c-muted);
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.sp-acct-coupon-meta .dot { opacity: 0.5; }
.sp-acct-coupon-meta .expires { color: var(--c-text); font-weight: 500; }

/* ----- Responsive — inner pages ----- */
@media (max-width: 1024px) {
  .sp-acct-addr-grid { grid-template-columns: 1fr; }
  .sp-acct-cc-grid { grid-template-columns: 1fr; }
  .sp-acct-coupon-grid { grid-template-columns: 1fr; }
  .sp-acct-bank-meta-row { grid-template-columns: 1fr 1fr; }
  .sp-acct-bank-how { grid-template-columns: 1fr; }
  .sp-acct-pw-rules { grid-template-columns: 1fr; }
  .sp-acct-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .sp-acct-avatar-row { gap: 16px; }
  .sp-acct-avatar-lg { width: 64px; height: 64px; font-size: 26px; }
  .sp-acct-pref-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sp-acct-bank-meta-row { grid-template-columns: 1fr; }
  .sp-acct-2fa { flex-direction: column; align-items: flex-start; }
  .sp-acct-coupon { flex-direction: column; }
  .sp-acct-coupon-stub { width: 100%; flex-direction: row; gap: 14px; padding: 14px 18px; }
  .sp-acct-coupon-stub::after { display: none; }
}

/* ============================================================================
   ACCOUNT INNER PAGES  — shared form components + page-specific styles
   ========================================================================== */

/* ----- Shared form ----- */
.sp-acct-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sp-acct-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sp-acct-form-row-3 { grid-template-columns: 2fr 1fr 1fr; }
.sp-acct-form-opt {
  font-size: 11px;
  font-weight: 400;
  color: var(--c-muted);
  margin-left: 4px;
}
.sp-acct-form-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--c-text);
  cursor: pointer;
  padding: 4px 0;
}
.sp-acct-form-checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--c-forest);
  cursor: pointer;
  flex-shrink: 0;
}
.sp-acct-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}
.sp-acct-form-cancel {
  background: transparent;
  border: none;
  color: var(--c-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  padding: 11px 18px;
  border-radius: 30px;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.sp-acct-form-cancel:hover { background: var(--c-cream); color: var(--c-charcoal); }
.sp-acct-form-save {
  background: var(--c-forest);
  color: var(--c-cream);
  border: none;
  padding: 11px 26px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.sp-acct-form-save:hover { background: var(--c-charcoal); }

/* ----- Profile page ----- */
.sp-acct-identity {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.sp-acct-identity-avatar {
  width: 88px; height: 88px;
  background: var(--c-forest);
  color: var(--c-cream);
  border-radius: 50%;
  font-family: var(--f-display);
  font-size: 38px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sp-acct-identity-info { flex: 1; min-width: 200px; }
.sp-acct-identity-info h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 24px;
  color: var(--c-charcoal);
  margin: 0 0 4px;
}
.sp-acct-identity-info > p {
  font-size: 14px;
  color: var(--c-muted);
  margin: 0 0 10px;
}
.sp-acct-identity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: var(--c-muted);
}
.sp-acct-identity-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sp-acct-identity-meta .icon {
  width: 13px; height: 13px;
  color: var(--c-tan);
}
.sp-acct-identity-id {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  background: var(--c-cream);
  padding: 2px 8px;
  border-radius: 6px;
}
.sp-acct-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-charcoal);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.sp-acct-photo-btn:hover { border-color: var(--c-forest); color: var(--c-forest); }
.sp-acct-photo-btn svg { width: 14px; height: 14px; }

/* Communication preferences (switches) */
.sp-acct-prefs { list-style: none; padding: 0; margin: 0; }
.sp-acct-pref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-border);
}
.sp-acct-pref:last-child { border-bottom: none; padding-bottom: 0; }
.sp-acct-pref-text .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 3px;
}
.sp-acct-pref-text .sub {
  font-size: 12.5px;
  color: var(--c-muted);
  line-height: 1.5;
}
.sp-acct-switch {
  display: inline-flex;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.sp-acct-switch input { position: absolute; opacity: 0; pointer-events: none; }
.sp-acct-switch-track {
  display: inline-block;
  width: 40px; height: 22px;
  background: var(--c-border);
  border-radius: 22px;
  position: relative;
  transition: background 0.2s var(--ease);
}
.sp-acct-switch-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: var(--c-white);
  border-radius: 50%;
  transition: left 0.2s var(--ease);
}
.sp-acct-switch input:checked + .sp-acct-switch-track {
  background: var(--c-forest);
}
.sp-acct-switch input:checked + .sp-acct-switch-track .sp-acct-switch-thumb {
  left: 21px;
}

/* Connected accounts */
.sp-acct-connections { list-style: none; padding: 0; margin: 0; }
.sp-acct-connection {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border);
}
.sp-acct-connection:last-child { border-bottom: none; padding-bottom: 0; }
.sp-acct-connection-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sp-acct-connection-icon svg { width: 20px; height: 20px; }
.sp-acct-connection-info { flex: 1; min-width: 0; }
.sp-acct-connection-info .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
}
.sp-acct-connection-info .sub {
  font-size: 12.5px;
  color: var(--c-muted);
}
.sp-acct-connection-btn {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-charcoal);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.sp-acct-connection-btn:hover { border-color: var(--c-forest); color: var(--c-forest); }

/* Danger zone */
.sp-acct-danger {
  background: rgba(184, 84, 80, 0.04);
  border: 1px solid rgba(184, 84, 80, 0.25);
  border-radius: 16px;
  padding: 22px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.sp-acct-danger-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.sp-acct-danger-head .icon {
  width: 22px; height: 22px;
  color: #b85450;
  flex-shrink: 0;
  margin-top: 2px;
}
.sp-acct-danger h2 {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 500;
  color: #b85450;
  margin: 0 0 4px;
}
.sp-acct-danger p {
  font-size: 13px;
  color: var(--c-text);
  margin: 0;
  line-height: 1.5;
  max-width: 460px;
}
.sp-acct-danger-btn {
  background: transparent;
  border: 1.5px solid #b85450;
  color: #b85450;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.sp-acct-danger-btn:hover { background: #b85450; color: var(--c-cream); }

/* ----- Addresses page ----- */
.sp-acct-addr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.sp-acct-addr-card {
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-acct-addr-card.is-default { border-color: var(--c-forest); }
.sp-acct-addr-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-acct-addr-card-head .label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-tan);
  font-weight: 600;
}
.sp-acct-addr-default-pill {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(46, 93, 78, 0.1);
  color: var(--c-forest);
}
.sp-acct-addr-card-body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--c-text);
  flex: 1;
}
.sp-acct-addr-card-body strong {
  color: var(--c-charcoal);
  font-weight: 600;
}
.sp-acct-addr-phone { color: var(--c-muted); font-size: 12.5px; }
.sp-acct-addr-card-actions {
  display: flex;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}
.sp-acct-addr-card-actions .link {
  font-size: 13px;
  color: var(--c-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.sp-acct-addr-card-actions .link:hover {
  color: var(--c-forest);
  border-bottom-color: var(--c-forest);
}
.sp-acct-addr-card-actions .link.danger { color: #b85450; }
.sp-acct-addr-card-actions .link.danger:hover { border-bottom-color: #b85450; }

.sp-acct-addr-add {
  border: 1.5px dashed var(--c-border);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  text-decoration: none;
  color: var(--c-text);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
  min-height: 200px;
}
.sp-acct-addr-add:hover {
  border-color: var(--c-forest);
  background: var(--c-cream);
  color: var(--c-forest);
}
.sp-acct-addr-add-icon {
  width: 42px; height: 42px;
  background: var(--c-cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-forest);
}
.sp-acct-addr-add-icon svg { width: 18px; height: 18px; }
.sp-acct-addr-add-text .title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
.sp-acct-addr-add-text .sub {
  font-size: 12.5px;
  color: var(--c-muted);
}

/* ----- Change Password page ----- */
.sp-acct-pwd-forgot {
  display: inline-block;
  font-size: 12.5px;
  color: var(--c-forest);
  text-decoration: none;
  margin-top: 6px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s var(--ease);
}
.sp-acct-pwd-forgot:hover { border-bottom-color: var(--c-forest); }

.sp-acct-pwd-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.sp-acct-pwd-meter .bar {
  flex: 1;
  height: 4px;
  background: var(--c-border);
  border-radius: 4px;
  overflow: hidden;
}
.sp-acct-pwd-meter .fill {
  height: 100%;
  background: var(--c-forest);
  border-radius: 4px;
  transition: width 0.3s var(--ease);
}
.sp-acct-pwd-meter .label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-forest);
  white-space: nowrap;
}

.sp-acct-pwd-rules {
  list-style: none;
  padding: 14px 16px;
  margin: 0;
  background: var(--c-cream);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-acct-pwd-rules li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--c-muted);
}
.sp-acct-pwd-rules li svg {
  width: 14px; height: 14px;
  color: var(--c-muted);
  flex-shrink: 0;
}
.sp-acct-pwd-rules li.met { color: var(--c-forest); }
.sp-acct-pwd-rules li.met svg { color: var(--c-forest); }

/* 2FA */
.sp-acct-2fa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--c-cream);
  border-radius: 12px;
  padding: 18px 22px;
}
.sp-acct-2fa-status { display: flex; align-items: center; gap: 14px; }
.sp-acct-2fa-icon {
  width: 42px; height: 42px;
  background: rgba(46, 93, 78, 0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-forest);
  flex-shrink: 0;
}
.sp-acct-2fa-icon svg { width: 22px; height: 22px; }
.sp-acct-2fa-text .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-forest);
  margin-bottom: 2px;
}
.sp-acct-2fa-text .sub {
  font-size: 12.5px;
  color: var(--c-text);
}
.sp-acct-2fa-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.sp-acct-2fa-actions .link {
  font-size: 12.5px;
  color: var(--c-charcoal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.sp-acct-2fa-actions .link:hover { color: var(--c-forest); border-bottom-color: var(--c-forest); }
.sp-acct-2fa-actions .link.danger { color: #b85450; }
.sp-acct-2fa-actions .link.danger:hover { border-bottom-color: #b85450; }

/* Sessions */
.sp-acct-sessions { list-style: none; padding: 0; margin: 0 0 16px; }
.sp-acct-session {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border);
}
.sp-acct-session:last-child { border-bottom: none; }
.sp-acct-session .icon {
  width: 22px; height: 22px;
  color: var(--c-muted);
  flex-shrink: 0;
}
.sp-acct-session-info { flex: 1; min-width: 0; }
.sp-acct-session-info .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 2px;
}
.sp-acct-session-info .sub {
  font-size: 12.5px;
  color: var(--c-muted);
}
.sp-acct-session-now {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-forest);
  background: rgba(46, 93, 78, 0.1);
  padding: 2px 7px;
  border-radius: 8px;
  margin-left: 6px;
  font-weight: 600;
}
.sp-acct-session .link {
  font-size: 12.5px;
  color: var(--c-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.sp-acct-session .link:hover { color: var(--c-forest); border-bottom-color: var(--c-forest); }

.sp-acct-pwd-signout-all {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-charcoal);
  padding: 9px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.sp-acct-pwd-signout-all:hover { border-color: #b85450; color: #b85450; }

/* ----- Saved Cards page ----- */
.sp-acct-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}
.sp-acct-card-visual {
  position: relative;
  padding: 22px 24px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #1f4438 0%, #2e5d4e 100%);
  min-height: 180px;
  display: flex;
  flex-direction: column;
}
.sp-acct-card-visual.visa { background: linear-gradient(135deg, #1A1F71 0%, #3855a8 100%); }
.sp-acct-card-visual.mc   { background: linear-gradient(135deg, #2c1f1a 0%, #5a3a2e 100%); }
.sp-acct-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
}
.sp-acct-card-top .brand {
  font-style: italic;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
}
.mc-brand {
  display: inline-flex;
  align-items: center;
}
.mc-brand .mc-c1, .mc-brand .mc-c2 {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-block;
}
.mc-brand .mc-c1 { background: #EB001B; }
.mc-brand .mc-c2 { background: #F79E1B; margin-left: -8px; mix-blend-mode: multiply; }
.sp-acct-card-default {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
}
.sp-acct-card-chip {
  width: 34px; height: 26px;
  background: linear-gradient(135deg, #d4a574 0%, #a98152 100%);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.35);
  margin-bottom: 12px;
}
.sp-acct-card-chip svg { width: 18px; height: 18px; }
.sp-acct-card-number {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 18px;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.sp-acct-card-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}
.sp-acct-card-bottom .lbl {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 2px;
}
.sp-acct-card-bottom .val {
  font-size: 13px;
  font-weight: 500;
}

/* Card management list */
.sp-acct-card-list { display: flex; flex-direction: column; gap: 12px; }
.sp-acct-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  flex-wrap: wrap;
}
.sp-acct-card-row-brand {
  width: 44px; height: 28px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.visa-pill { background: #1A1F71; color: #fff; }
.mc-pill { background: #fff; border: 1px solid var(--c-border); }
.mc-pill .mc-c1, .mc-pill .mc-c2 {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-block;
}
.mc-pill .mc-c1 { background: #EB001B; }
.mc-pill .mc-c2 { background: #F79E1B; margin-left: -5px; mix-blend-mode: multiply; }
.sp-acct-card-row-info { flex: 1; min-width: 200px; }
.sp-acct-card-row-info .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 2px;
}
.sp-acct-card-row-info .sub {
  font-size: 12.5px;
  color: var(--c-muted);
}
.sp-acct-card-default-pill {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(46, 93, 78, 0.1);
  color: var(--c-forest);
  margin-left: 6px;
  vertical-align: middle;
}
.sp-acct-card-row-actions {
  display: flex;
  gap: 14px;
}
.sp-acct-card-row-actions .link,
.sp-acct-bank-actions .link,
.sp-acct-addr-card-actions .link {
  font-size: 13px;
  color: var(--c-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.sp-acct-card-row-actions .link:hover,
.sp-acct-bank-actions .link:hover {
  color: var(--c-forest);
  border-bottom-color: var(--c-forest);
}
.sp-acct-card-row-actions .link.danger,
.sp-acct-bank-actions .link.danger { color: #b85450; }
.sp-acct-card-row-actions .link.danger:hover,
.sp-acct-bank-actions .link.danger:hover { border-bottom-color: #b85450; }

.sp-acct-secure-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(46, 93, 78, 0.06);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--c-text);
  line-height: 1.5;
}
.sp-acct-secure-note svg {
  width: 16px; height: 16px;
  color: var(--c-forest);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ----- Bank Transfer page ----- */
.sp-acct-bank-list { display: flex; flex-direction: column; gap: 12px; }
.sp-acct-bank-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  flex-wrap: wrap;
}
.sp-acct-bank-logo {
  width: 44px; height: 44px;
  background: var(--c-cream);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-forest);
  flex-shrink: 0;
}
.sp-acct-bank-logo svg { width: 22px; height: 22px; }
.sp-acct-bank-info { flex: 1; min-width: 200px; }
.sp-acct-bank-info .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 2px;
}
.sp-acct-bank-info .sub {
  font-size: 12.5px;
  color: var(--c-muted);
}
.sp-acct-bank-actions {
  display: flex;
  gap: 14px;
}

/* Bank options (Plaid vs manual) */
.sp-acct-bank-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-acct-bank-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--c-text);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.sp-acct-bank-option:hover { border-color: var(--c-forest); background: var(--c-cream); }
.sp-acct-bank-option.is-recommended { border-color: var(--c-forest); background: rgba(46, 93, 78, 0.04); }
.sp-acct-bank-option-icon {
  width: 40px; height: 40px;
  background: var(--c-cream);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-forest);
  flex-shrink: 0;
}
.sp-acct-bank-option-icon svg { width: 20px; height: 20px; }
.sp-acct-bank-option-text { flex: 1; }
.sp-acct-bank-option-text .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sp-acct-bank-option-text .badge {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(46, 93, 78, 0.1);
  color: var(--c-forest);
}
.sp-acct-bank-option-text .sub {
  font-size: 12.5px;
  color: var(--c-muted);
  line-height: 1.5;
}
.sp-acct-bank-option-arrow {
  width: 16px; height: 16px;
  color: var(--c-muted);
  flex-shrink: 0;
}

/* Transfers */
.sp-acct-transfers { list-style: none; padding: 0; margin: 0; }
.sp-acct-transfer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-border);
}
.sp-acct-transfer:last-child { border-bottom: none; padding-bottom: 0; }
.sp-acct-transfer-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sp-acct-transfer-icon.ok {
  background: rgba(46, 93, 78, 0.1);
  color: var(--c-forest);
}
.sp-acct-transfer-icon svg { width: 16px; height: 16px; }
.sp-acct-transfer-info { flex: 1; min-width: 0; }
.sp-acct-transfer-info .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 2px;
}
.sp-acct-transfer-info .sub {
  font-size: 12.5px;
  color: var(--c-muted);
}
.sp-acct-transfer-amt {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--c-charcoal);
}

/* ----- Notifications page ----- */
.sp-notif-filter-radio {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.sp-notif-toolbar { justify-content: space-between; }
.sp-notif-mark-read {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-charcoal);
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.sp-notif-mark-read:hover { border-color: var(--c-forest); color: var(--c-forest); }

#notif-f-all:checked     ~ .sp-notif-toolbar .sp-ord-pill[for="notif-f-all"],
#notif-f-orders:checked  ~ .sp-notif-toolbar .sp-ord-pill[for="notif-f-orders"],
#notif-f-promo:checked   ~ .sp-notif-toolbar .sp-ord-pill[for="notif-f-promo"],
#notif-f-account:checked ~ .sp-notif-toolbar .sp-ord-pill[for="notif-f-account"] {
  background: var(--c-forest);
  color: var(--c-cream);
}
#notif-f-all:checked     ~ .sp-notif-toolbar .sp-ord-pill[for="notif-f-all"] .count,
#notif-f-orders:checked  ~ .sp-notif-toolbar .sp-ord-pill[for="notif-f-orders"] .count,
#notif-f-promo:checked   ~ .sp-notif-toolbar .sp-ord-pill[for="notif-f-promo"] .count,
#notif-f-account:checked ~ .sp-notif-toolbar .sp-ord-pill[for="notif-f-account"] .count {
  background: rgba(255, 255, 255, 0.2);
  color: var(--c-cream);
}

#notif-f-orders:checked  ~ .sp-notif-list article:not([data-notif-type="orders"]),
#notif-f-promo:checked   ~ .sp-notif-list article:not([data-notif-type="promo"]),
#notif-f-account:checked ~ .sp-notif-list article:not([data-notif-type="account"]) {
  display: none;
}

.sp-notif-list { display: flex; flex-direction: column; gap: 0; }
.sp-notif {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
  position: relative;
}
.sp-notif-unread { border-color: rgba(46, 93, 78, 0.35); background: rgba(46, 93, 78, 0.02); }
.sp-notif-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sp-notif-icon svg { width: 18px; height: 18px; }
.sp-notif-icon-truck  { background: rgba(46, 93, 78, 0.1); color: var(--c-forest); }
.sp-notif-icon-tag    { background: rgba(212, 165, 116, 0.2); color: #8d6f3f; }
.sp-notif-icon-check  { background: rgba(46, 93, 78, 0.1); color: var(--c-forest); }
.sp-notif-icon-shield { background: rgba(184, 84, 80, 0.12); color: #b85450; }
.sp-notif-icon-bag    { background: var(--c-cream); color: var(--c-charcoal); }
.sp-notif-icon-heart  { background: rgba(184, 84, 80, 0.12); color: #b85450; }
.sp-notif-icon-star   { background: rgba(212, 165, 116, 0.2); color: #8d6f3f; }
.sp-notif-icon-return { background: var(--c-cream); color: var(--c-muted); }

.sp-notif-body { flex: 1; min-width: 0; }
.sp-notif-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.sp-notif-head h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin: 0;
}
.sp-notif-time {
  font-size: 11.5px;
  color: var(--c-muted);
  white-space: nowrap;
}
.sp-notif-body p {
  font-size: 13px;
  color: var(--c-text);
  margin: 0 0 8px;
  line-height: 1.5;
}
.sp-notif-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.sp-notif-actions a {
  font-size: 12.5px;
  color: var(--c-forest);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s var(--ease);
}
.sp-notif-actions a:hover { border-bottom-color: var(--c-forest); }
.sp-notif-dot {
  position: absolute;
  top: 22px; right: 22px;
  width: 8px; height: 8px;
  background: var(--c-forest);
  border-radius: 50%;
}

/* ----- Coupons page ----- */
.sp-acct-coupons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-acct-coupon {
  display: flex;
  align-items: stretch;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.sp-acct-coupon-left {
  background: var(--c-forest);
  color: var(--c-cream);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  position: relative;
}
.sp-acct-coupon-left::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 0;
  bottom: 0;
  width: 16px;
  background: radial-gradient(circle at right, transparent 6px, var(--c-forest) 6.5px);
}
.sp-acct-coupon-percent {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 38px;
  line-height: 1;
}
.sp-acct-coupon-amount {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 34px;
  line-height: 1;
}
.sp-acct-coupon-free {
  width: 38px; height: 38px;
}
.sp-acct-coupon-free svg { width: 100%; height: 100%; }
.sp-acct-coupon-percent-lbl {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
  margin-top: 4px;
  text-align: center;
}
.sp-acct-coupon-body {
  flex: 1;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-acct-coupon-title {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--c-charcoal);
}
.sp-acct-coupon-desc {
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.5;
}
.sp-acct-coupon-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  color: var(--c-muted);
  margin: 4px 0 6px;
}
.sp-acct-coupon-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sp-acct-coupon-meta .icon {
  width: 12px; height: 12px;
}
.sp-acct-coupon-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.sp-acct-coupon-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 7px 12px;
  background: var(--c-cream);
  border: 1px dashed var(--c-border);
  border-radius: 6px;
  color: var(--c-charcoal);
}
.sp-acct-coupon-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--c-forest);
  color: var(--c-cream);
  border: none;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.sp-acct-coupon-copy:hover { background: var(--c-charcoal); }
.sp-acct-coupon-copy svg { width: 13px; height: 13px; }

/* Expired/used coupons */
.sp-acct-coupons-details {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 0;
}
.sp-acct-coupons-details summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sp-acct-coupons-details summary::-webkit-details-marker { display: none; }
.sp-acct-coupons-details summary::marker { content: ''; }
.sp-acct-coupons-details summary .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-charcoal);
}
.sp-acct-coupons-details summary .count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--c-cream);
  border-radius: 10px;
  color: var(--c-muted);
}
.sp-acct-coupons-details summary .chev {
  width: 14px; height: 14px;
  color: var(--c-muted);
  margin-left: auto;
  transition: transform 0.2s var(--ease);
}
.sp-acct-coupons-details[open] summary .chev { transform: rotate(180deg); }
.sp-acct-coupons-faded {
  padding: 0 22px 22px;
}
.sp-acct-coupon.is-used .sp-acct-coupon-left,
.sp-acct-coupon.is-expired .sp-acct-coupon-left {
  background: var(--c-muted);
}
.sp-acct-coupon.is-used .sp-acct-coupon-left::after,
.sp-acct-coupon.is-expired .sp-acct-coupon-left::after {
  background: radial-gradient(circle at right, transparent 6px, var(--c-muted) 6.5px);
}
.sp-acct-coupon.is-used,
.sp-acct-coupon.is-expired {
  opacity: 0.7;
}
.sp-acct-coupon-status {
  font-weight: 600;
  font-size: 11.5px;
}

/* ----- Responsive — inner pages ----- */
@media (max-width: 900px) {
  .sp-acct-addr-grid { grid-template-columns: 1fr; }
  .sp-acct-cards-grid { grid-template-columns: 1fr; }
  .sp-acct-form-row-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .sp-acct-form-row { grid-template-columns: 1fr; }
  .sp-acct-form-row-3 { grid-template-columns: 1fr; }
  .sp-acct-identity-avatar { width: 70px; height: 70px; font-size: 30px; }
  .sp-acct-identity-info h2 { font-size: 20px; }
  .sp-acct-danger { flex-direction: column; align-items: flex-start; }
  .sp-acct-2fa { flex-direction: column; align-items: flex-start; }
  .sp-acct-coupon { flex-direction: column; }
  .sp-acct-coupon-left { min-width: 0; padding: 16px; flex-direction: row; gap: 10px; }
  .sp-acct-coupon-left::after { display: none; }
  .sp-acct-coupon-percent, .sp-acct-coupon-amount { font-size: 28px; }
  .sp-acct-coupon-percent-lbl { margin-top: 0; }
}

/* ============================================================================
   MINI CART DRAWER  (JS-driven, no effect when JS is absent)
   ----------------------------------------------------------------------------
   Injected into the DOM by js/main.js when a "Quick add" pill is clicked.
   Without main.js, none of these elements exist, so these rules apply to
   nothing and the layout is unaffected. With main.js, the drawer slides
   in from the right and dims the page.
   ========================================================================== */

.sp-mini-drawer-locked { overflow: hidden; }

.sp-mini-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 25, 22, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 95;
  transition: opacity 0.25s var(--ease);
}
.sp-mini-drawer-root.open .sp-mini-drawer-overlay {
  opacity: 1;
  pointer-events: auto;
}

.sp-mini-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--c-white);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.32s var(--ease);
  box-shadow: -16px 0 40px -16px rgba(0, 0, 0, 0.15);
}
.sp-mini-drawer-root.open .sp-mini-drawer {
  transform: translateX(0);
}

.sp-mini-drawer-head {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-mini-drawer-title {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  color: var(--c-charcoal);
}
.sp-mini-drawer-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--c-charcoal);
  padding: 6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease);
}
.sp-mini-drawer-close:hover { background: var(--c-cream); }

.sp-mini-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.sp-mini-drawer-item {
  display: grid;
  grid-template-columns: 60px 1fr 28px;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-border);
}
.sp-mini-drawer-item:first-child { padding-top: 4px; }
.sp-mini-drawer-item:last-child  { border-bottom: 0; }

.sp-mini-drawer-item-img {
  width: 60px;
  height: 60px;
  background: var(--c-cream);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--c-muted);
  overflow: hidden;
  flex-shrink: 0;
}
.sp-mini-drawer-item-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.sp-mini-drawer-item-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-mini-drawer-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-charcoal);
  line-height: 1.3;
}
.sp-mini-drawer-item-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-charcoal);
}

.sp-mini-drawer-item-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 4px;
  border: 1px solid var(--c-border);
  border-radius: 20px;
  width: fit-content;
  overflow: hidden;
}
.sp-mini-drawer-item-qty button {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--c-charcoal);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s var(--ease);
}
.sp-mini-drawer-item-qty button:hover { background: var(--c-cream); }
.sp-mini-drawer-qty-num {
  min-width: 28px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-charcoal);
}

.sp-mini-drawer-item-remove {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--c-muted);
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
  margin-top: 4px;
}
.sp-mini-drawer-item-remove:hover {
  background: var(--c-cream);
  color: #b85450;
}

.sp-mini-drawer-empty {
  text-align: center;
  font-size: 14px;
  color: var(--c-muted);
  padding: 32px 0;
  margin: 0;
}

.sp-mini-drawer-foot {
  padding: 18px 24px 22px;
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-mini-drawer-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 4px;
}

.sp-mini-drawer-note {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--c-muted);
  text-align: center;
}

.sp-mini-drawer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.2s var(--ease),
              border-color 0.2s var(--ease),
              color 0.2s var(--ease);
}
.sp-mini-drawer-btn-secondary {
  background: var(--c-white);
  border: 1.5px solid var(--c-border);
  color: var(--c-charcoal);
}
.sp-mini-drawer-btn-secondary:hover {
  border-color: var(--c-charcoal);
  background: var(--c-cream);
}
.sp-mini-drawer-btn-primary {
  background: var(--c-charcoal);
  color: var(--c-cream);
  border: 1.5px solid var(--c-charcoal);
}
.sp-mini-drawer-btn-primary:hover {
  background: var(--c-forest);
  border-color: var(--c-forest);
}

/* Mobile — full width */
@media (max-width: 520px) {
  .sp-mini-drawer { width: 100%; }
  .sp-mini-drawer-head    { padding: 18px 18px 12px; }
  .sp-mini-drawer-body    { padding: 16px 18px; }
  .sp-mini-drawer-foot    { padding: 14px 18px 18px; }
}