/* ============================================================
   UrbanEssence — Premium Storefront
   ────────────────────────────────────────────────────────────
   1. Tokens (motion, spacing, typography)
   2. Theme variables (dark / light / brand)
   3. Reset + base
   4. Backdrops (grain, glow, scenery)
   5. Navigation bars (top + bottom)
   6. Brand pill (B button) + collection menu
   7. Theme toggle (C button) + roll system
   8. Search & cart (E pill)
   9. Earth + social flyout (F)
  10. Sections (hero, featured, plank, shop, contact)
  11. Floating Glass Grid (cards)
  12. Cart drawer
  13. Toast
  14. Responsive overrides
  ============================================================ */

/* ───── 1. TOKENS ───── */
:root {
  /* Two-font system: editorial serif for headings/branding,
     modern sans-serif for all UI, prices, labels, buttons. */
  --font-editorial: "Playfair Display", Georgia, serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --spring: cubic-bezier(0.19, 0.91, 0.32, 1.05);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --press: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --silk: cubic-bezier(0.32, 0.72, 0.24, 1);

  --t-text: 0.42s var(--silk);
  --t-color: 0.56s var(--silk);
  --t-surface: 0.68s var(--silk);
  --t-shadow: 0.82s var(--silk);

  --dur: 0.46s;
  --ph: clamp(14px, 4vw, 20px);
  --pt: max(16px, env(safe-area-inset-top, 16px));
  --pb: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  --pill: 56px;
  --r: 100px;

  /* Floating Glass Grid */
  --grid-gap: 16px;
  --grid-pad: 16px;
  --card-radius: 16px;
  --card-radius-inner: 12px;

  /* Brand accent (default — overridden per section/brand) */
  --accent: #b0823a;
  --accent-soft: rgba(176, 130, 58, 0.18);

  /* Brand colors (locked palette) */
  --brand-gent: #721416;
  --brand-gent-text: #ffffff;
  --brand-grace: #e8c3c3;
  --brand-grace-text: #121212;
  --brand-edge: #4f6d7a;
  --brand-edge-text: #ffffff;
}

/* ───── 2. THEME ───── */
html.no-transition *,
html.no-transition *::before,
html.no-transition *::after {
  transition: none !important;
  animation-duration: 0.001ms !important;
}

html[data-mode="dark"] {
  --bg: #0a0c14;
  --ink: rgba(240, 228, 210, 0.92);
  --dim: rgba(240, 228, 210, 0.32);
  --ac: rgba(240, 228, 210, 0.96);

  --gbg: #0a0c14;
  --gbd: transparent;
  --gblur: none;
  --gsh:
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 2px 6px -1px rgba(0, 0, 0, 0.42),
    0 18px 48px -10px rgba(0, 0, 0, 0.68);

  /* Floating glass surface */
  --glass-bg: rgba(18, 20, 30, 0.55);
  --glass-bg-strong: rgba(18, 20, 30, 0.7);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-hi: rgba(255, 255, 255, 0.14);
  --glass-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
    0 12px 36px -10px rgba(0, 0, 0, 0.55),
    0 2px 6px -1px rgba(0, 0, 0, 0.3);

  --gr: 0.028;
  --vg: rgba(10, 12, 20, 0.76);
  --wm: rgba(240, 228, 210, 0.03);
  --ring: rgba(240, 228, 210, 0.058);
  --glow-a: rgba(255, 218, 130, 0.058);
  --glow-b: rgba(180, 200, 230, 0.046);
  --glow-c: rgba(200, 180, 220, 0.034);

  --accent-color: #ffffff;
  --accent-text: #121212;
  --accent-color-soft: rgba(255, 255, 255, 0.18);

  /* Full-screen glass panels (Profile / Search / Cart) */
  --panel-tint: rgba(18, 18, 18, 0.65);
  --panel-ink: #ffffff;
  --panel-dim: rgba(255, 255, 255, 0.55);
  --panel-stroke: rgba(255, 255, 255, 0.15);
  --panel-stroke-hi: rgba(255, 255, 255, 0.28);
  --panel-surface: rgba(255, 255, 255, 0.06);
}

html[data-mode="light"] {
  --bg: #f5f0e8;
  --ink: #16140d;
  --dim: rgba(22, 20, 13, 0.4);
  --ac: #16140d;

  --gbg: #ffffff;
  --gbd: transparent;
  --gblur: none;
  --gsh:
    0 1px 0 0 rgba(255, 255, 255, 0.85) inset,
    0 0 0 1px rgba(22, 20, 13, 0.07),
    0 2px 4px -1px rgba(22, 20, 13, 0.06),
    0 12px 36px -8px rgba(22, 20, 13, 0.14);

  --glass-bg: rgba(255, 253, 248, 0.62);
  --glass-bg-strong: rgba(255, 253, 248, 0.82);
  --glass-border: rgba(22, 20, 13, 0.08);
  --glass-border-hi: rgba(22, 20, 13, 0.14);
  --glass-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.7) inset,
    0 12px 36px -10px rgba(22, 20, 13, 0.16),
    0 2px 4px -1px rgba(22, 20, 13, 0.06);

  --gr: 0.035;
  --vg: rgba(245, 240, 232, 0.66);
  --wm: rgba(22, 20, 13, 0.034);
  --ring: rgba(176, 130, 58, 0.13);
  --glow-a: transparent;
  --glow-b: transparent;
  --glow-c: transparent;

  --accent-color: #121212;
  --accent-text: #ffffff;
  --accent-color-soft: rgba(18, 18, 18, 0.18);

  /* Full-screen glass panels (Profile / Search / Cart) */
  --panel-tint: rgba(255, 255, 255, 0.65);
  --panel-ink: #121212;
  --panel-dim: rgba(18, 18, 18, 0.55);
  --panel-stroke: rgba(18, 18, 18, 0.15);
  --panel-stroke-hi: rgba(18, 18, 18, 0.28);
  --panel-surface: rgba(18, 18, 18, 0.04);
}

/* Brand sub-system (active selection) */
html[data-brand="gent"] {
  --accent-color: var(--brand-gent);
  --accent-text: var(--brand-gent-text);
  --accent-color-soft: rgba(114, 20, 22, 0.24);
}
html[data-brand="grace"] {
  --accent-color: var(--brand-grace);
  --accent-text: var(--brand-grace-text);
  --accent-color-soft: rgba(232, 195, 195, 0.28);
}
html[data-brand="edge"] {
  --accent-color: var(--brand-edge);
  --accent-text: var(--brand-edge-text);
  --accent-color-soft: rgba(79, 109, 122, 0.24);
}

/* Section accents */
[data-section="1"] { --accent: #b0823a; --accent-soft: rgba(176, 130, 58, 0.18); }
[data-section="3"] { --accent: #a66b7e; --accent-soft: rgba(166, 107, 126, 0.18); }
[data-section="4"] { --accent: #48907f; --accent-soft: rgba(72, 144, 127, 0.18); }
[data-section="5"] { --accent: #7270a8; --accent-soft: rgba(114, 112, 168, 0.18); }

/* ───── 3. RESET + BASE ───── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Native form controls don't inherit font-family from body by default —
   force them to so anything without an explicit rule still picks up Inter. */
button, input, textarea, select {
  font-family: inherit;
}
html, body {
  overflow: hidden;
  height: 100%;
  position: fixed;
  width: 100%;
}
#scroller {
  position: fixed;
  inset: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
}
body {
  background: var(--bg);
  font-family: var(--font-ui);
  transition: background var(--t-color);
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ───── 4. BACKDROPS ───── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--gr);
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/220px;
  transition: opacity var(--t-surface);
}
.bg-glow {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 42% 52% at 22% 80%, var(--glow-a) 0%, transparent 58%),
    radial-gradient(ellipse 38% 45% at 76% 78%, var(--glow-b) 0%, transparent 52%),
    radial-gradient(ellipse 30% 38% at 52% 88%, var(--glow-c) 0%, transparent 55%);
  transition: opacity var(--t-surface), background var(--t-surface);
}
.bg-scenery {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s var(--silk);
  will-change: opacity;
}
.bg-scenery.on { opacity: 1; }
.bg-scenery::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: url("../assets/images/essence/homeimage.jpg") center/cover no-repeat;
  filter: blur(44px) saturate(150%);
  transition: filter var(--t-surface), opacity var(--t-surface);
}
html[data-mode="light"] .bg-scenery::before {
  filter: blur(44px) saturate(120%) brightness(1.08);
  opacity: 0.55;
}
html[data-mode="dark"] .bg-scenery::before { opacity: 0.78; }
.bg-scenery::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: background var(--t-surface);
}
html[data-mode="dark"] .bg-scenery::after {
  background: linear-gradient(180deg,
    rgba(8, 10, 16, 0.42) 0%,
    rgba(8, 10, 16, 0.32) 50%,
    rgba(8, 10, 16, 0.55) 100%);
}
html[data-mode="light"] .bg-scenery::after {
  background: linear-gradient(180deg,
    rgba(245, 240, 232, 0.62) 0%,
    rgba(245, 240, 232, 0.5) 50%,
    rgba(245, 240, 232, 0.72) 100%);
}

/* ───── 5. NAV BARS ───── */
.bar {
  position: fixed;
  left: var(--ph);
  right: var(--ph);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.bar.top { top: var(--pt); transform-origin: top center; }
.bar.bot { bottom: var(--pb); align-items: flex-end; transform-origin: bottom center; }
.show .bar { pointer-events: auto; }
.bar > * { pointer-events: auto; }

/* Focused state — when any drawer is open, the nav bars scale down so
   the active panel feels foreground. The bars sit *above* the panels
   in stacking order (z-index 500 below) so users can always navigate. */
.bar {
  transition: transform 0.42s var(--silk);
}
body.panel-open .bar { transform: scale(0.86); }

#btn-a, .bwrap, #btn-c, #btn-d, .ewrap, .fwrap { opacity: 0; }
.show .bwrap { animation: dropIn 0.7s 0.25s var(--spring) both; }
.show #btn-a { animation: dropIn 0.7s 0.5s var(--spring) both; }
.show #btn-c { animation: dropIn 0.7s 0.5s var(--spring) both; }
.show .ewrap { animation: riseIn 0.7s 0.75s var(--spring) both; }
.show #btn-d { animation: riseIn 0.7s 1s var(--spring) both; }
.show .fwrap { animation: riseIn 0.7s 1s var(--spring) both; }

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Glass surface for circle buttons */
.gl {
  background: var(--gbg);
  backdrop-filter: var(--gblur);
  -webkit-backdrop-filter: var(--gblur);
  border: none;
  box-shadow: var(--gsh);
  transition: background var(--t-color), box-shadow var(--t-color);
}

/* Circle buttons (A · C · D · F) */
.cb {
  width: var(--pill);
  height: var(--pill);
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  outline: none;
  will-change: transform;
  transition:
    width var(--dur) var(--spring),
    height var(--dur) var(--spring),
    transform 0.18s var(--press),
    box-shadow var(--t-color);
}
.cb::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: transparent;
  transition: background var(--t-text);
  z-index: 0;
}
.cb.active::before { background: var(--accent-soft); }

.cb svg {
  width: 21px;
  height: 21px;
  stroke: var(--dim);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  position: relative;
  z-index: 1;
  transition: stroke var(--t-color), width var(--dur) var(--spring), height var(--dur) var(--spring);
}
.cb.active svg { stroke: var(--ac); }

.cb .nd, .ni .nd {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 0 transparent;
  z-index: 2;
  transition: background var(--t-color), transform 0.42s var(--spring), box-shadow var(--t-color);
}
.cb.active .nd, .ni.active .nd {
  background: var(--accent-color);
  transform: translateX(-50%) scale(1.25);
  box-shadow: 0 0 8px 1px var(--accent-color-soft);
}

.cmp .cb { width: 38px; height: 38px; }
.cmp .cb svg { width: 17px; height: 17px; }
.cmp .cb .nd { bottom: 5px; width: 3px; height: 3px; }

.press {
  transform: scale(0.87) !important;
  opacity: 0.6;
  transition: transform 0.08s var(--press), opacity 0.08s ease !important;
}
.release {
  transition: transform 0.42s var(--spring), opacity 0.28s ease !important;
}

/* CSS-only press fallback for nav buttons. The .press JS class above has
   !important so it wins when bound; this keeps tactile feedback alive
   before JS attaches and for any unbound interactive element. */
.cb:active,
.ni:active,
.ab:active {
  transform: scale(0.94);
  opacity: 0.85;
}

/* ───── 6. BRAND PILL ───── */
.bwrap {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
  position: relative;
}
#btn-b {
  height: var(--pill);
  padding: 0 clamp(14px, 4.5vw, 24px);
  border-radius: var(--r);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.14em;
  width: 100%;
  max-width: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  position: relative;
  z-index: 2;
  will-change: transform;
  overflow: hidden;
  border: none;
  transition:
    height var(--dur) var(--spring),
    max-width var(--dur) var(--spring),
    padding var(--dur) var(--spring),
    font-size 0.28s var(--spring),
    background 0.52s var(--silk),
    color 0.42s var(--silk),
    box-shadow 0.52s var(--silk),
    transform 0.18s var(--press);
}

/* Default brand pill — black */
#btn-b {
  background: #121212;
  color: #ffffff;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
    0 2px 6px rgba(0, 0, 0, 0.22),
    0 10px 30px rgba(0, 0, 0, 0.16);
}
#btn-b .b-text { color: #ffffff; }

/* Active brand variants (locked text contrast) */
html[data-brand="gent"] #btn-b {
  background: var(--brand-gent);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.1) inset,
    0 4px 14px rgba(114, 20, 22, 0.5),
    0 12px 36px rgba(114, 20, 22, 0.28);
}
html[data-brand="gent"] #btn-b .b-text { color: var(--brand-gent-text) !important; }

html[data-brand="grace"] #btn-b {
  background: var(--brand-grace);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.55) inset,
    0 4px 14px rgba(232, 195, 195, 0.52),
    0 12px 36px rgba(232, 195, 195, 0.28);
}
html[data-brand="grace"] #btn-b .b-text { color: var(--brand-grace-text) !important; }

html[data-brand="edge"] #btn-b {
  background: var(--brand-edge);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.12) inset,
    0 4px 14px rgba(79, 109, 122, 0.5),
    0 12px 36px rgba(79, 109, 122, 0.28);
}
html[data-brand="edge"] #btn-b .b-text { color: var(--brand-edge-text) !important; }

.cmp #btn-b {
  height: 38px;
  font-size: 13px;
  letter-spacing: 0.1em;
  padding: 0 12px;
  max-width: 148px;
}

.b-clip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.b-text {
  display: inline-block;
  will-change: transform, opacity, filter;
  transition: color 0.42s var(--silk);
}
#btn-b.b-fall .b-text {
  animation: bTextFall 0.42s cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
}
#btn-b.b-roll .b-text {
  animation: bTextRoll 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bTextFall {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(calc(var(--pill) * var(--b-dir, 1))) scale(0.94); filter: blur(1.5px); }
}
@keyframes bTextRoll {
  0% { opacity: 0; transform: translateY(calc(var(--pill) * var(--b-dir, 1) * -1)) scale(0.94); filter: blur(1.5px); }
  60% { opacity: 1; filter: blur(0); }
  78% { transform: translateY(calc(var(--b-dir, 1) * 1.5px)) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Collection flyout */
.b-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  pointer-events: none;
  z-index: 1;
  width: max-content;
}
.b-item {
  position: relative;
  z-index: 1;
  background: rgba(14, 13, 20, 0.38);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.07) inset,
    0 4px 16px rgba(0, 0, 0, 0.28);
  border-radius: 100px;
  padding: 10px 18px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(240, 228, 210, 0.88);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--pull-x, 0), calc(-100% - 14px)) scale(0.86);
  will-change: transform, opacity;
  transition:
    transform 0.52s var(--expo),
    opacity 0.32s ease,
    background 0.38s var(--silk),
    color 0.38s var(--silk),
    border-color 0.38s var(--silk),
    box-shadow 0.38s var(--silk);
}
html[data-mode="light"] .b-item {
  background: rgba(248, 244, 238, 0.48);
  border-color: rgba(22, 20, 13, 0.1);
  color: rgba(22, 20, 13, 0.82);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.6) inset,
    0 4px 16px rgba(22, 20, 13, 0.12);
}
.b-menu.has-3 .b-item:nth-child(1) { --pull-x: 108%; }
.b-menu.has-3 .b-item:nth-child(2) { --pull-x: 0%; }
.b-menu.has-3 .b-item:nth-child(3) { --pull-x: -108%; }

.b-item[data-coll="gent"] { --i-acc: var(--brand-gent); --i-text: var(--brand-gent-text); --i-glow: rgba(114, 20, 22, 0.4); }
.b-item[data-coll="grace"] { --i-acc: var(--brand-grace); --i-text: var(--brand-grace-text); --i-glow: rgba(232, 195, 195, 0.4); }
.b-item[data-coll="edge"] { --i-acc: var(--brand-edge); --i-text: var(--brand-edge-text); --i-glow: rgba(79, 109, 122, 0.4); }
.b-item[data-coll="back"] { --i-acc: #b0823a; --i-text: #ffffff; --i-glow: rgba(176, 130, 58, 0.4); }

.b-item.b-back {
  font-weight: 500;
  letter-spacing: 0.1em;
  border-color: rgba(176, 130, 58, 0.3);
}
html[data-mode="dark"] .b-item.b-back { color: rgba(176, 130, 58, 0.9); }
html[data-mode="light"] .b-item.b-back { color: rgba(140, 100, 40, 0.9); }
.b-item.b-back::before {
  content: "↑";
  display: inline-block;
  margin-right: 6px;
  font-size: 0.85em;
  opacity: 0.55;
  transform: translateY(-1px);
}

html[data-mode="dark"] .b-item[data-coll="gent"]:hover {
  background: rgba(114, 20, 22, 0.22);
  border-color: rgba(114, 20, 22, 0.4);
  color: #fff;
}
html[data-mode="dark"] .b-item[data-coll="grace"]:hover {
  background: rgba(232, 195, 195, 0.14);
  border-color: rgba(232, 195, 195, 0.35);
  color: #f0d4d4;
}
html[data-mode="dark"] .b-item[data-coll="edge"]:hover {
  background: rgba(79, 109, 122, 0.22);
  border-color: rgba(79, 109, 122, 0.4);
  color: #cfe1e8;
}
html[data-mode="light"] .b-item[data-coll="gent"]:hover {
  background: rgba(114, 20, 22, 0.1);
  border-color: rgba(114, 20, 22, 0.3);
  color: var(--brand-gent);
}
html[data-mode="light"] .b-item[data-coll="grace"]:hover {
  background: rgba(232, 195, 195, 0.38);
  border-color: rgba(232, 195, 195, 0.5);
  color: #8a5a6a;
}
html[data-mode="light"] .b-item[data-coll="edge"]:hover {
  background: rgba(79, 109, 122, 0.12);
  border-color: rgba(79, 109, 122, 0.35);
  color: var(--brand-edge);
}

.b-item:active { transform: scale(0.95); }
.bwrap.b-open .b-menu { pointer-events: auto; }
.bwrap.b-open .b-item {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, 0) scale(1);
}
.bwrap.b-open .b-menu.has-3 .b-item:nth-child(2) { transition-delay: 0.04s; }
.bwrap.b-open .b-menu.has-3 .b-item:nth-child(1),
.bwrap.b-open .b-menu.has-3 .b-item:nth-child(3) { transition-delay: 0.12s; }

.bwrap.b-closing .b-menu.has-3 .b-item:nth-child(1),
.bwrap.b-closing .b-menu.has-3 .b-item:nth-child(3) { transition-delay: 0s; }
.bwrap.b-closing .b-menu.has-3 .b-item:nth-child(2) { transition-delay: 0.1s; }

.bwrap.b-closing .b-item.b-picked {
  z-index: 5;
  background: var(--i-acc);
  color: var(--i-text, #fff);
  border-color: var(--i-acc);
  box-shadow:
    0 0 0 1px var(--i-acc),
    0 10px 30px -6px var(--i-glow, var(--i-acc));
  transition:
    transform 0.68s var(--silk) 0.55s,
    opacity 0.5s var(--silk) 0.75s,
    background 1s var(--silk),
    color 1s var(--silk),
    border-color 1s var(--silk),
    box-shadow 1s var(--silk);
}
.bwrap.b-closing .b-item.b-picked { transition-delay: 0s; }

.cmp .b-item { padding: 7px 13px; font-size: 10.5px; }
.cmp .b-menu { top: calc(100% + 8px); gap: 6px; }

/* ───── 7. THEME TOGGLE — ROLL SYSTEM ───── */
#btn-c { overflow: hidden; }
.ico {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: opacity 0.55s var(--silk);
}
.moon { opacity: 1; }
.sun { opacity: 0; }
html[data-mode="dark"] .moon { opacity: 0; }
html[data-mode="dark"] .sun { opacity: 1; }
#btn-c.is-rolling .ico { opacity: 0; }
#btn-c.is-rolling .ico-out,
#btn-c.is-rolling .ico-in { opacity: 1; }

.cb, .ni, #btn-c { overflow: hidden; }
.roll-out { animation: rollOut 0.5s cubic-bezier(0.45, 0.06, 0.62, 0.2) both; }
.roll-in { animation: rollIn 0.68s var(--expo) both; }

@keyframes rollOut {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(calc(var(--pill) * var(--roll-dir, 1) * 0.9)) scale(0.92); filter: blur(1.5px); }
}
@keyframes rollIn {
  0% { opacity: 0; transform: translateY(calc(var(--pill) * var(--roll-dir, 1) * -0.9)) scale(0.94); filter: blur(1.5px); }
  60% { opacity: 1; filter: blur(0); }
  78% { transform: translateY(calc(var(--roll-dir, 1) * 1.5px)) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

#btn-c.is-rolling .ico { transition: none; }
#btn-c.is-rolling .ico-out { animation: icoRollOut 0.5s cubic-bezier(0.45, 0.06, 0.62, 0.2) both; }
#btn-c.is-rolling .ico-in { animation: icoRollIn 0.68s var(--expo) both; }

@keyframes icoRollOut {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + var(--pill) * var(--roll-dir, 1) * 0.9)) scale(0.9); filter: blur(1.5px); }
}
@keyframes icoRollIn {
  0% { opacity: 0; transform: translate(-50%, calc(-50% - var(--pill) * var(--roll-dir, 1) * 0.9)) scale(0.94); filter: blur(1.5px); }
  60% { opacity: 1; filter: blur(0); }
  78% { transform: translate(-50%, calc(-50% + var(--roll-dir, 1) * 1.5px)) scale(1.012); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

/* ───── 8. SEARCH & CART (E pill) ───── */
.ewrap {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.ep {
  display: flex;
  align-items: center;
  height: var(--pill);
  padding: 0 8px;
  border-radius: var(--r);
  width: 100%;
  max-width: 130px;
  transition:
    height var(--dur) var(--spring),
    max-width var(--dur) var(--spring),
    padding var(--dur) var(--spring),
    background var(--t-color),
    box-shadow var(--t-color);
}
.cmp .ep { height: 38px; max-width: 96px; padding: 0 4px; }

.ni {
  flex: 1;
  height: 100%;
  min-width: 0;
  border-radius: var(--r);
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  outline: none;
  will-change: transform;
  transition: transform 0.18s var(--press);
}
.ni::before {
  content: "";
  position: absolute;
  inset: 8px 4px;
  border-radius: var(--r);
  background: transparent;
  transition: background var(--t-text);
  z-index: 0;
}
.ni.active::before { background: var(--accent-soft); }
.ni svg {
  width: 20px;
  height: 20px;
  stroke: var(--dim);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  position: relative;
  z-index: 1;
  transition: stroke var(--t-color), width var(--dur) var(--spring), height var(--dur) var(--spring);
}
.ni.active svg { stroke: var(--ac); }

.cmp .ni svg { width: 16px; height: 16px; }
.cmp .ni .nd { bottom: 4px; width: 3px; height: 3px; }

.dv {
  width: 1px;
  height: 18px;
  flex-shrink: 0;
  background: rgba(128, 128, 128, 0.18);
  transition: background var(--t-surface);
}
html[data-mode="dark"] .dv { background: rgba(255, 255, 255, 0.1); }
html[data-mode="light"] .dv { background: rgba(22, 20, 13, 0.1); }
.cmp .dv { height: 12px; }

.badge {
  position: absolute;
  top: 8px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  border-radius: var(--r);
  background: var(--accent-color);
  color: var(--accent-text);
  border: 1.5px solid var(--bg);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  z-index: 3;
  transform: scale(0);
  opacity: 0;
  transition:
    background var(--t-color),
    color var(--t-color),
    border-color var(--t-surface);
}
.badge.show {
  /* Pin the visible state in the cascade as well, so the badge stays
     up regardless of which animation last ran. */
  opacity: 1;
  transform: scale(1);
  animation: badgePop 0.42s var(--spring) forwards;
}
.badge.bump {
  /* `forwards` is essential: without it, when this animation ends the
     badge would snap back to the base `scale(0); opacity: 0` and
     disappear on every count update after the first. */
  animation: badgeBump 0.46s var(--spring) forwards;
}
@keyframes badgePop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes badgeBump {
  0% { transform: scale(1); opacity: 1; }
  35% { transform: scale(1.32); opacity: 1; }
  70% { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ───── 9. EARTH + SOCIAL FLYOUT ───── */
.fwrap {
  position: relative;
  flex-shrink: 0;
  width: var(--pill);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width var(--dur) var(--spring);
}
.cmp .fwrap { width: 38px; }

.sact {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 9px;
  pointer-events: none;
  z-index: 300;
}
.fwrap.open .sact { pointer-events: auto; }

.ab {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gbg);
  backdrop-filter: var(--gblur);
  -webkit-backdrop-filter: var(--gblur);
  border: none;
  box-shadow: var(--gsh);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.7) translateY(20px);
  transition:
    transform 0.32s var(--spring),
    opacity 0.24s ease,
    background var(--t-color),
    box-shadow var(--t-color);
}
.ab svg {
  width: 19px;
  height: 19px;
  stroke: var(--dim);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke 0.22s ease;
}
.ab[data-a="fb"] svg { fill: var(--dim); stroke: none; }
.fwrap.open .ab {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.fwrap.open .ab:nth-child(1) { transition-delay: 0.02s; }
.fwrap.open .ab:nth-child(2) { transition-delay: 0.07s; }
.fwrap.open .ab:nth-child(3) { transition-delay: 0.12s; }
.fwrap.open .ab:nth-child(4) { transition-delay: 0.17s; }
.fwrap.closing .ab:nth-child(1) { transition-delay: 0.15s; }
.fwrap.closing .ab:nth-child(2) { transition-delay: 0.1s; }
.fwrap.closing .ab:nth-child(3) { transition-delay: 0.05s; }
.fwrap.closing .ab:nth-child(4) { transition-delay: 0s; }

.ei {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.44s var(--spring);
}
.fwrap.open .ei { transform: rotate(180deg); }

/* ───── 10. SECTIONS ───── */
.sec {
  width: 100%;
  height: 100svh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background var(--t-color);
}
.sec::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: background var(--t-surface), opacity var(--t-surface);
}
html[data-mode="dark"] .sec::before {
  background:
    radial-gradient(ellipse 55% 48% at 28% 62%, rgba(255, 218, 130, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 74% 72%, rgba(180, 200, 230, 0.04) 0%, transparent 55%);
}
html[data-mode="light"] .sec::before {
  background: radial-gradient(ellipse 66% 50% at 50% 50%, rgba(255, 255, 255, 0.52) 0%, transparent 72%);
}
.sec::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--vg) 0%, transparent 16%),
    linear-gradient(to top, var(--vg) 0%, transparent 16%);
  transition: background var(--t-surface);
}

/* Hero */
.sec.hero { background: #0a0c14; }
.sec.hero::before { background: none; }
.hero-img {
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/essence/homeimage.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: saturate(1.04) contrast(1.02);
  transform: scale(1.06);
  opacity: 0;
  animation:
    heroIn 1.4s 0.15s var(--expo) both,
    heroDrift 22s 1.4s ease-in-out infinite alternate;
}
.sec.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.1) 12%, transparent 22%),
    linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.12) 14%, transparent 26%);
  z-index: 1;
}
html[data-mode="light"] .sec.hero::after { opacity: 0.72; }
.hero-mark {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 0 24px;
  opacity: 0;
  animation: heroMarkIn 1.2s 0.6s var(--expo) both;
}
.hero-eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(240, 228, 210, 0.78);
}
.hero-title {
  font-family: var(--font-editorial);
  font-weight: 700;
  font-size: clamp(48px, 12vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: rgba(248, 240, 222, 0.96);
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.4);
}
.hero-title em {
  font-style: italic;
  font-weight: 700;
  display: block;
}
.hero-sub {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 228, 210, 0.7);
  max-width: 320px;
}

@keyframes heroIn {
  from { opacity: 0; transform: scale(1.1); }
  to { opacity: 1; transform: scale(1.06); }
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-1.2%, 1%, 0); }
}
@keyframes heroMarkIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.sec.layered {
  background: transparent !important;
}
.sec.layered::before,
.sec.layered::after { display: none; }

.shop-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.eyebrow {
  align-self: center;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color var(--t-color);
}
.shop-title {
  font-family: var(--font-editorial);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-size: clamp(28px, 6.5vw, 46px);
  transition: color var(--t-color);
}

/* Plank — hosts the card stack. Background stays transparent (via .layered)
   so the page scenery shows through. */

/* Card stack — fills the section, vertical scroll passes through. */
.sec.plank .card-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
  cursor: grab;
  z-index: 1;
  outline: none;
}
.sec.plank .card-stage:active { cursor: grabbing; }
.card-wrap {
  position: absolute;
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  transform: translateX(-9999px);
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
.card-wrap .card {
  position: relative;
  display: block;
  width: clamp(220px, 62vw, 300px);
  aspect-ratio: 2 / 3;
  border-radius: 22px;
  background: #1e2a3a;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.card-wrap .card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.card-wrap .card-label {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 2;
}
.card-wrap .card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.card-wrap:nth-child(1) .card { background: linear-gradient(145deg, #2b3b4f, #1c2836); }
.card-wrap:nth-child(2) .card { background: linear-gradient(145deg, #3e2c3e, #261e2c); }
.card-wrap:nth-child(3) .card { background: linear-gradient(145deg, #2a4a4a, #1c3636); }
.card-wrap:nth-child(4) .card { background: linear-gradient(145deg, #4a3a2a, #362a1c); }
.card-wrap:nth-child(5) .card { background: linear-gradient(145deg, #3a2a4a, #2a1c36); }
.card-wrap.is-front .card {
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.14),
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 32px 64px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  pointer-events: auto;
}
.sec.plank .card-hint {
  position: absolute;
  bottom: clamp(120px, 18vh, 160px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
  opacity: 0;
  animation: cardDrift 2.2s ease-in-out 1.8s 2 forwards;
}
@keyframes cardDrift {
  0%   { opacity: 0; transform: translateX(-50%) translateX(0); }
  20%  { opacity: 1; }
  75%  { opacity: 0.7; transform: translateX(-50%) translateX(14px); }
  100% { opacity: 0; transform: translateX(-50%) translateX(18px); }
}
@media (min-width: 600px) {
  .card-wrap .card { width: clamp(280px, 38vw, 360px); }
}
@media (max-width: 480px) {
  .card-wrap .card { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sec.plank .card-hint { animation: none; opacity: 0; }
}

/* Shop section */
.sec.shop {
  height: auto;
  min-height: 100svh;
  align-items: flex-start;
  padding: max(110px, 16vh) 0 max(140px, calc(env(safe-area-inset-bottom) + 130px));
}
.shop-inner {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.shop-head {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}
.shop-filters {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.shop-chip {
  padding: 8px 16px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--glass-border);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
  white-space: nowrap;
  transition:
    background 0.42s var(--silk),
    color 0.42s var(--silk),
    border-color 0.42s var(--silk),
    transform 0.18s var(--press);
}
.shop-chip:active { transform: scale(0.95); }
.shop-chip[data-filter="gent"]:hover { color: var(--brand-gent); border-color: rgba(114, 20, 22, 0.32); }
.shop-chip[data-filter="grace"]:hover { color: #8a5a6a; border-color: rgba(232, 195, 195, 0.5); }
.shop-chip[data-filter="edge"]:hover { color: var(--brand-edge); border-color: rgba(79, 109, 122, 0.32); }
.shop-chip.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ─────────────────────────────────────────────
   11. FLOATING GLASS GRID
   ─────────────────────────────────────────────
   The product grid sits on the scenery layer with a
   uniform frame: gap matches the outer padding so the
   background bleeds through symmetrically on all sides.
   Cards are glass (semi-transparent + blur + 1px border).
   ───────────────────────────────────────────── */
.shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 0;
}
@media (min-width: 720px) {
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .shop-grid { grid-template-columns: repeat(4, 1fr); }
}

.shop-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 16px 8px;
}
.shop-pager[hidden] { display: none; }
.shop-pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.32s var(--silk),
    border-color 0.32s var(--silk),
    color 0.32s var(--silk),
    opacity 0.32s var(--silk),
    transform 0.18s var(--press);
}
.shop-pager-btn svg { width: 14px; height: 14px; }
.shop-pager-btn:hover:not(:disabled) {
  border-color: var(--glass-border-hi);
  background: var(--glass-bg);
}
.shop-pager-btn:active:not(:disabled) { transform: scale(0.96); }
.shop-pager-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.shop-pager-info {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  min-width: 96px;
  text-align: center;
}

/* Glass card surface — shared by featured + shop cards */
.prod-card,
.shop-card {
  --card-acc: #b0823a;
  --card-acc-2: #7a5a26;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-radius: var(--card-radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--glass-shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--expo),
    transform 0.7s var(--expo),
    background var(--t-color),
    border-color var(--t-color),
    box-shadow var(--t-color);
}
.prod-card { gap: 14px; padding: 14px; }
.prod-card.in,
.shop-card.in {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--card-i, 0) * 0.06s);
}
.prod-card.in { transition-delay: calc(var(--card-i, 0) * 0.11s); }
.prod-card:hover .prod-img,
.shop-card:hover .shop-img { transform: scale(1.025); }
.prod-card:hover,
.shop-card:hover {
  border-color: var(--glass-border-hi);
}
.prod-card:active,
.shop-card:active { transform: scale(0.985); }
.shop-card.hide,
.shop-card.page-hide {
  opacity: 0;
  transform: translateY(0) scale(0.94);
  pointer-events: none;
  display: none;
}

/* Per-collection placeholder gradients (for solid-colour stand-ins) */
.prod-card[data-coll="gent"],
.shop-card[data-coll="gent"] {
  --card-acc: var(--brand-gent);
  --card-acc-2: #4d0d0e;
}
.prod-card[data-coll="grace"],
.shop-card[data-coll="grace"] {
  --card-acc: var(--brand-grace);
  --card-acc-2: #c19696;
}
.prod-card[data-coll="edge"],
.shop-card[data-coll="edge"] {
  --card-acc: var(--brand-edge);
  --card-acc-2: #344a55;
}

/* IMAGE / PLACEHOLDER — strict 4/5 aspect, 100% width */
.prod-img,
.shop-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--card-radius-inner);
  overflow: hidden;
  /* Fallback gradient — visible only when no inline background-image is set
     (i.e. products without photography). When a real image URL is applied
     inline, it replaces these gradients on the background-image axis. */
  background-color: var(--card-acc);
  background-image:
    radial-gradient(ellipse 70% 60% at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 60%),
    linear-gradient(155deg, var(--card-acc) 0%, var(--card-acc-2) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 8px rgba(0, 0, 0, 0.18);
  transition: transform 0.6s var(--expo);
}
/* Noise grain — only visible over the gradient placeholder. When a real
   photo is present, skip the overlay so the photography reads cleanly. */
.prod-img:not(:has(.prod-photo))::after,
.shop-img:not(:has(.shop-photo))::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/220px;
  opacity: 0.1;
  mix-blend-mode: overlay;
}

/* Shine sweep — diagonal highlight that sweeps across on hover.
   Animated via transform for GPU compositing (no per-frame layout). */
.shop-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-200%) skewX(-20deg);
  pointer-events: none;
  will-change: transform;
}
.shop-card:not(.oos):hover .shop-img::before,
.shop-card:not(.oos):focus-within .shop-img::before {
  animation: shine-wave 1.6s var(--silk);
}
@keyframes shine-wave {
  0%   { transform: translateX(-200%) skewX(-20deg); }
  100% { transform: translateX(400%) skewX(-20deg); }
}
.prod-img::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.32) 0%, transparent 100%);
  pointer-events: none;
}
.prod-tag {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  z-index: 2;
  padding: 5px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.prod-card[data-coll="grace"] .prod-tag {
  color: rgba(18, 18, 18, 0.78);
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Quick-add button — absolute overlay style (prod-card / featured cards) */
.quick-add {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(18, 18, 18, 0.55);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 3;
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  transition:
    opacity 0.32s var(--silk),
    transform 0.32s var(--spring),
    background 0.32s var(--silk),
    border-color 0.32s var(--silk);
}
.quick-add svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prod-card:hover .quick-add,
.prod-card:focus-within .quick-add {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (hover: none) {
  .prod-card .quick-add { opacity: 1; transform: translateY(0) scale(1); }
}
.quick-add:hover {
  background: var(--card-acc);
  border-color: var(--card-acc);
}
.quick-add:active { transform: scale(0.9); }
.quick-add.added {
  animation: addedPulse 0.5s var(--spring);
}
@keyframes addedPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Quick-add in shop grid meta — transparent, icon only */
.shop-meta .quick-add {
  position: static;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  opacity: 1;
  transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  background: transparent;
  color: var(--ink);
}
.shop-meta .quick-add svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
}
.shop-meta .quick-add:hover { color: var(--ac); }
.shop-meta .quick-add:active { transform: scale(0.88); }

.prod-meta,
.shop-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 6px 8px;
}
.prod-meta { gap: 6px; padding: 6px 6px 8px; }
.prod-eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--dim);
  transition: color var(--t-color);
}
.prod-name,
.shop-name {
  font-family: var(--font-ui);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--ink);
  transition: color var(--t-color);
}
.prod-name { font-size: 15px; }
.shop-name { font-size: 13px; }
.prod-price,
.shop-price {
  font-family: var(--font-ui);
  font-weight: 300;
  color: var(--dim);
  letter-spacing: 0.04em;
  transition: color var(--t-color);
}
.prod-price { font-size: 13px; }
.shop-price { font-size: 12px; }

/* ──────────────────────────────────────────────────────────
   Shop catalog — edge-to-edge editorial overrides.
   Placed last so they win source-order against the shared
   .prod-card / .shop-card glass-surface rules above.
   No padding, no rounding, no card frame — just image + text.
   ────────────────────────────────────────────────────────── */
.shop-card {
  padding: 0;
  gap: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.shop-card:hover { border-color: transparent; }
.shop-img {
  border-radius: 0;
  /* The placeholder gradients keep their inner glow + grain so each
     tile still reads as a product surface. When real photography
     replaces the colour blocks, the box-shadow can be removed. */
}
.shop-meta {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 16px;
}
.shop-meta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
@media (max-width: 380px) {
  .shop-meta { padding: 10px 10px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .prod-card, .shop-card { transition-duration: 0.18s !important; }
  .prod-img, .shop-img { transition: none !important; }
  .roll-out, .roll-in,
  #btn-c.is-rolling .ico-out,
  #btn-c.is-rolling .ico-in { animation-duration: 0.18s !important; }
  .badge { animation: none; opacity: 1; transform: scale(1); }
  *, *::before, *::after {
    transition-duration: 0.15s !important;
    animation-duration: 0.15s !important;
  }
}

/* Contact section */
html[data-mode="dark"] .sec.contact {
  --c-bg: #07090e;
  --c-line: rgba(240, 228, 210, 0.14);
  --c-line-hi: rgba(240, 228, 210, 0.28);
}
html[data-mode="light"] .sec.contact {
  --c-bg: #ffffff;
  --c-line: rgba(22, 20, 13, 0.12);
  --c-line-hi: rgba(22, 20, 13, 0.3);
}

.sec.contact {
  background: var(--c-bg);
  height: auto;
  min-height: 100svh;
  align-items: flex-start;
  padding: max(100px, 16vh) clamp(20px, 6vw, 40px) max(140px, calc(env(safe-area-inset-bottom) + 130px));
  transition: background var(--t-color);
}
.sec.contact::before, .sec.contact::after { display: none; }
.contact-inner {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 38px;
  position: relative;
  z-index: 2;
}
.contact-title {
  font-family: var(--font-editorial);
  font-size: clamp(30px, 8vw, 46px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  transition: color var(--t-text);
}
.contact-title em {
  font-style: italic;
  color: var(--form-accent, var(--ink));
  transition: color 0.42s var(--silk);
}
.contact-sub {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--dim);
  max-width: 380px;
  transition: color var(--t-text);
}

.coll-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.coll-label {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color var(--t-text);
}
.coll-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.coll-pill {
  position: relative;
  padding: 10px 18px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--c-line);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background 0.42s var(--silk),
    border-color 0.42s var(--silk),
    color 0.42s var(--silk),
    transform 0.18s var(--press);
}
.coll-pill[data-coll="gent"] { --p-acc: var(--brand-gent); --p-text: var(--brand-gent-text); }
.coll-pill[data-coll="grace"] { --p-acc: var(--brand-grace); --p-text: var(--brand-grace-text); }
.coll-pill[data-coll="edge"] { --p-acc: var(--brand-edge); --p-text: var(--brand-edge-text); }
.coll-pill:hover { border-color: var(--p-acc); }
.coll-pill.selected {
  background: var(--p-acc);
  border-color: var(--p-acc);
  color: var(--p-text);
}
.coll-pill:active { transform: scale(0.96); }

.form-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 8px;
}
.field { position: relative; }
.field input,
.field textarea {
  width: 100%;
  padding: 18px 0 8px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  outline: none;
  resize: none;
  caret-color: var(--form-accent, var(--ink));
  transition:
    border-color 0.42s var(--silk),
    caret-color 0.42s var(--silk);
}
.field textarea { min-height: 96px; line-height: 1.5; }
.field label {
  position: absolute;
  top: 18px;
  left: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--dim);
  pointer-events: none;
  transform-origin: left top;
  transition:
    transform 0.36s var(--silk),
    color 0.36s var(--silk),
    letter-spacing 0.36s var(--silk);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-18px) scale(0.72);
  letter-spacing: 0.18em;
  color: var(--form-accent, var(--dim));
  text-transform: uppercase;
}
.field input:focus,
.field textarea:focus {
  border-bottom-color: var(--form-accent, var(--c-line-hi));
}

.send-btn {
  align-self: flex-start;
  margin-top: 8px;
  padding: 14px 28px;
  border-radius: 100px;
  border: none;
  background: var(--form-accent, var(--ink));
  color: var(--c-bg);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition:
    background 0.42s var(--silk),
    color 0.42s var(--silk),
    transform 0.18s var(--press),
    box-shadow 0.32s var(--silk);
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.18);
}
.send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.24);
}
.send-btn:active { transform: scale(0.96); }
.send-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.32s var(--silk);
}
.send-btn:hover svg { transform: translateX(3px); }

/* ───── 12. PANELS (Profile · Search · Cart) ─────
   Unified directional drawers. One scrim, three slide directions,
   shared head/close styles. Bars sit above panels (z-500) so the
   user can always navigate. */

.panel-scrim {
  position: fixed;
  inset: 0;
  z-index: 590;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 0.42s var(--silk);
}
.panel-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

.panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  z-index: 600;
  display: flex;
  flex-direction: column;
  width: min(92vw, 400px);
  max-height: 85vh;
  border-radius: 24px;
  background: var(--panel-tint);
  border: 1px solid var(--panel-stroke);
  backdrop-filter: blur(25px) saturate(160%);
  -webkit-backdrop-filter: blur(25px) saturate(160%);
  color: var(--panel-ink);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition:
    opacity 0.42s var(--silk),
    transform 0.55s var(--expo);
  will-change: transform, opacity;

  /* Re-scope inherited design tokens so descendants (titles, inputs,
     buttons, etc.) automatically pick up the panel's adaptive palette. */
  --ink: var(--panel-ink);
  --dim: var(--panel-dim);
  --glass-border: var(--panel-stroke);
  --glass-border-hi: var(--panel-stroke-hi);
  --glass-bg: var(--panel-surface);
}

/* The .panel-left / .panel-right / .panel-bottom classes are still on the
   markup but carry no layout rules — every panel is centred via .panel. */

.panel.open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

/* Shared head + close (used by every panel). Head and foot stay anchored;
   the body between them is the scroll container — see flex-shrink: 0. */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.panel-title {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.panel-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.32s var(--silk), border-color 0.32s var(--silk), transform 0.18s var(--press);
}
.panel-close:hover { border-color: var(--glass-border-hi); background: var(--glass-bg); }
.panel-close:active { transform: scale(0.92); }
.panel-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }

.panel-body {
  flex: 1;
  min-height: 0; /* allow flex child to shrink and let overflow scroll */
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Profile — placeholder under-construction state */
.panel-stub {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}
.panel-stub .eyebrow { align-self: center; }
.panel-stub-title {
  font-family: var(--font-editorial);
  font-size: clamp(28px, 6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.panel-stub p {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--dim);
  max-width: 280px;
}

/* Search — single focused input row */
.search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 50px;
  border: 1px solid var(--glass-border);
  background: transparent;
  transition: border-color 0.32s var(--silk), background 0.32s var(--silk);
}
.search-form:focus-within {
  border-color: var(--glass-border-hi);
}
.search-form .search-ico {
  width: 18px;
  height: 18px;
  stroke: var(--dim);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.search-form input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  caret-color: var(--accent);
  /* Strip the native search-cancel UI for a cleaner look */
  -webkit-appearance: none;
  appearance: none;
}
.search-form input::placeholder {
  color: var(--dim);
}
.search-form input::-webkit-search-cancel-button { display: none; }

.cart-list {
  flex: 1;
  min-height: 0; /* lets overflow-y actually scroll inside the capped panel */
  overflow-y: auto;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
}
.cart-empty {
  margin: auto;
  text-align: center;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-empty .eyebrow { align-self: center; }
.cart-empty p {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 300;
  color: var(--dim);
}

.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  padding: 10px;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  align-items: center;
  animation: cartItemIn 0.42s var(--spring) both;
}
.cart-item.removing {
  animation: cartItemOut 0.32s var(--silk) forwards;
}
@keyframes cartItemIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes cartItemOut {
  from { opacity: 1; transform: translateX(0); max-height: 100px; }
  to { opacity: 0; transform: translateX(40px); max-height: 0; padding: 0 10px; margin: 0; }
}
.cart-item .ci-img {
  width: 64px;
  height: 80px;
  border-radius: 8px;
  background-color: var(--ci-acc, #888);
  background-image:
    radial-gradient(ellipse 70% 60% at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 60%),
    linear-gradient(155deg, var(--ci-acc, #888) 0%, var(--ci-acc-2, #555) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* When the row carries an inline background-image (real photo), it stacks
   above the placeholder gradient declared above. */
.ci-size {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--dim);
  margin-top: 1px;
}
.cart-item[data-coll="gent"] { --ci-acc: var(--brand-gent); --ci-acc-2: #4d0d0e; }
.cart-item[data-coll="grace"] { --ci-acc: var(--brand-grace); --ci-acc-2: #c19696; }
.cart-item[data-coll="edge"] { --ci-acc: var(--brand-edge); --ci-acc-2: #344a55; }
.ci-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ci-name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-coll {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}
.ci-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.ci-qty-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--ink);
  font-size: 11px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.22s var(--silk), border-color 0.22s var(--silk), transform 0.18s var(--press);
}
.ci-qty-btn:hover { background: var(--glass-bg); border-color: var(--glass-border-hi); }
.ci-qty-btn:active { transform: scale(0.88); }
.ci-qty {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink);
  min-width: 16px;
  text-align: center;
}
.ci-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  gap: 6px;
}
.ci-price {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}
.ci-remove {
  background: none;
  border: none;
  color: var(--dim);
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  padding: 2px 0;
  transition: color 0.22s var(--silk);
}
.ci-remove:hover { color: var(--brand-gent); }

.cart-foot {
  padding: 18px 24px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 70vh;
  overflow-y: auto;
  flex-shrink: 0; /* keep checkout anchored at the bottom of the modal */
}
.cart-totals {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cart-totals .label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dim);
}
.cart-totals .total {
  font-family: var(--font-editorial);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}
.cart-checkout {
  width: 100%;
  padding: 16px;
  border-radius: 50px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition:
    background 0.42s var(--silk),
    color 0.42s var(--silk),
    border-color 0.42s var(--silk),
    transform 0.18s var(--press),
    opacity 0.32s var(--silk);
}
.cart-checkout:hover:not(:disabled) {
  border-color: var(--glass-border-hi);
  background: var(--glass-bg);
}
.cart-checkout:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cart-checkout:active:not(:disabled) { transform: scale(0.98); }
.cart-checkout svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ───── 12b. PRODUCT DETAIL PANEL ─────
   Full-screen detail view. Gallery on top (or left, on wide), info
   block below with size selector + add-to-bag pill. */

/* Override the shared .panel cap so the product modal nearly fills the
   viewport on mobile (12px sliver each side) and reads larger on desktop. */
.panel-product {
  width: calc(100% - 24px);
  max-width: 500px;
}
@media (max-width: 600px) {
  .panel-product { max-width: none; }
}

.product-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 0 22px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.prod-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  background-color: var(--glass-bg);
  background-image:
    radial-gradient(ellipse 70% 60% at 30% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: none;
  overflow: hidden;
  flex-shrink: 0;
}
.prod-gallery.empty {
  background-image:
    radial-gradient(ellipse 70% 60% at 30% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}
.prod-thumbs {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
}
.prod-thumb {
  width: 48px;
  height: 48px;
  border-radius: 0;
  border: 1px solid var(--glass-border);
  background-color: var(--glass-bg);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.7;
  transition: opacity 0.32s var(--silk), border-color 0.32s var(--silk), transform 0.18s var(--press);
}
.prod-thumb:hover { opacity: 0.9; }
.prod-thumb.active {
  opacity: 1;
  border-color: var(--glass-border-hi);
}
.prod-thumb:active { transform: scale(0.94); }

/* 3-column product header: title+fabric (left) · brand (center) · close (right).
   Grid columns are 1fr auto 1fr so the center label stays optically centered
   regardless of how wide the title or button gets. */
.panel-product .panel-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.prod-head-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.prod-head-title .prod-name {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prod-head-title .prod-fabric {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--dim);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prod-brand {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  justify-self: center;
}
.panel-product .panel-close {
  justify-self: end;
}

.prod-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 4px 22px 0;
  text-align: center;
}
.prod-info .prod-price {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0;
}

.prod-size-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.prod-size-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dim);
}
.prod-sizes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.prod-size {
  min-width: 52px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition:
    background 0.32s var(--silk),
    border-color 0.32s var(--silk),
    color 0.32s var(--silk),
    transform 0.18s var(--press);
}
.prod-size-name {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
}
.prod-size-stock {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: 0.45;
  line-height: 1;
}
.prod-size:hover:not(:disabled):not(.selected) { border-color: var(--glass-border-hi); background: var(--glass-bg); }
.prod-size:active:not(:disabled) { transform: scale(0.95); }
.prod-size.selected {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.prod-size.selected .prod-size-stock { opacity: 0.6; }
.prod-size:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  text-decoration: line-through;
}

.prod-add {
  width: 100%;
  padding: 16px;
  margin-top: 4px;
  border-radius: 50px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition:
    background 0.42s var(--silk),
    color 0.42s var(--silk),
    border-color 0.42s var(--silk),
    transform 0.18s var(--press),
    opacity 0.32s var(--silk);
}
.prod-add:hover:not(:disabled) {
  border-color: var(--glass-border-hi);
  background: var(--glass-bg);
}
.prod-add:active:not(:disabled) { transform: scale(0.98); }
.prod-add:disabled { opacity: 0.4; cursor: not-allowed; }
.prod-add svg { width: 14px; height: 14px; }

/* ── Description + Size Guide two-button panel ── */
.prod-info-toggles {
  width: 100%;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.prod-toggle-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
}
.prod-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  background: transparent;
  color: var(--dim);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.32s var(--silk),
    border-color 0.32s var(--silk),
    color 0.32s var(--silk),
    transform 0.18s var(--press);
}
.prod-toggle-btn:hover {
  border-color: var(--glass-border-hi);
  background: var(--glass-bg);
  color: var(--ink);
}
.prod-toggle-btn:active { transform: scale(0.98); }
.prod-toggle-btn[aria-expanded="true"] {
  border-color: var(--glass-border-hi);
  color: var(--ink);
}
.prod-toggle-ico { width: 12px; height: 12px; }
.prod-toggle-chev {
  width: 12px;
  height: 12px;
  transition: transform 0.46s var(--spring);
  will-change: transform;
}
.prod-toggle-reveal.is-open .prod-toggle-chev { transform: rotate(180deg); }

.prod-toggle-reveal {
  width: 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--silk);
}
.prod-toggle-reveal.is-open {
  grid-template-rows: 1fr;
}
.prod-toggle-body {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 16px 0 4px;
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity 0.36s var(--silk),
    transform 0.5s var(--spring);
  will-change: opacity, transform;
}
.prod-toggle-reveal.is-open .prod-toggle-body {
  opacity: 1;
  transform: translateY(0);
}

/* Description text + feature list */
.prod-desc-para {
  font-size: 13px;
  line-height: 1.72;
  color: var(--dim);
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.32s var(--silk),
    transform 0.38s var(--spring);
}
.prod-toggle-reveal.is-open .prod-desc-para {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.08s;
}
.prod-desc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0;
  margin: 0;
}
.prod-desc-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.32s var(--silk),
    transform 0.36s var(--spring);
}
.prod-toggle-reveal.is-open .prod-desc-list li { opacity: 1; transform: translateY(0); }
.prod-toggle-reveal.is-open .prod-desc-list li:nth-child(1) { transition-delay: 0.14s; }
.prod-toggle-reveal.is-open .prod-desc-list li:nth-child(2) { transition-delay: 0.18s; }
.prod-toggle-reveal.is-open .prod-desc-list li:nth-child(3) { transition-delay: 0.22s; }
.prod-desc-list li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #48907f;
}
.prod-size-guide-units {
  align-self: flex-start;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  padding: 3px;
  gap: 2px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.32s var(--silk),
    transform 0.36s var(--spring);
}
.prod-toggle-reveal.is-open .prod-size-guide-units {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.08s;
}
.prod-size-guide-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 4px);
  background: var(--ink);
  border-radius: 50px;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.46s var(--spring);
  will-change: transform;
}
.prod-size-guide-units[data-unit="cm"] .prod-size-guide-thumb {
  transform: translateX(calc(100% + 2px));
}
.prod-size-guide-unit {
  position: relative;
  z-index: 1;
  min-width: 44px;
  padding: 6px 14px;
  border-radius: 50px;
  border: none;
  background: transparent;
  color: var(--dim);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.36s var(--silk);
}
.prod-size-guide-unit:hover:not(.selected) { color: var(--ink); }
.prod-size-guide-unit.selected { color: var(--bg); }
.prod-size-guide-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
}
.prod-size-guide-table th,
.prod-size-guide-table td {
  width: 25%;
  font-family: var(--font-ui);
  padding: 10px 6px;
  text-align: center;
  font-weight: 400;
  border-bottom: 1px solid var(--glass-border);
}
.prod-size-guide-table thead th {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
  padding-bottom: 8px;
}
.prod-size-guide-table tbody th {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.prod-size-guide-table tbody tr:last-child th,
.prod-size-guide-table tbody tr:last-child td {
  border-bottom: none;
}
.prod-size-guide-table tbody tr {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.32s var(--silk),
    transform 0.36s var(--spring);
}
.prod-toggle-reveal.is-open .prod-size-guide-table tbody tr {
  opacity: 1;
  transform: translateY(0);
}
.prod-toggle-reveal.is-open .prod-size-guide-table tbody tr:nth-child(1) { transition-delay: 0.14s; }
.prod-toggle-reveal.is-open .prod-size-guide-table tbody tr:nth-child(2) { transition-delay: 0.18s; }
.prod-toggle-reveal.is-open .prod-size-guide-table tbody tr:nth-child(3) { transition-delay: 0.22s; }
.prod-toggle-reveal.is-open .prod-size-guide-table tbody tr:nth-child(4) { transition-delay: 0.26s; }
.prod-toggle-reveal.is-open .prod-size-guide-table tbody tr:nth-child(5) { transition-delay: 0.30s; }

@media (prefers-reduced-motion: reduce) {
  .prod-toggle-btn,
  .prod-toggle-chev,
  .prod-toggle-reveal,
  .prod-toggle-body,
  .prod-desc-para,
  .prod-desc-list li,
  .prod-size-guide-units,
  .prod-size-guide-thumb,
  .prod-size-guide-unit,
  .prod-size-guide-table tbody tr {
    transition: none !important;
  }
  .prod-toggle-body,
  .prod-desc-para,
  .prod-desc-list li,
  .prod-size-guide-units,
  .prod-size-guide-table tbody tr {
    transform: none !important;
  }
}

/* Layered <img> inside .shop-img — covers the gradient when present;
   if it errors we remove the element and the gradient stays visible. */
.shop-photo,
.prod-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Sold-out treatment on shop cards */
.shop-card.oos { opacity: 0.55; }
.shop-card.oos .quick-add { display: none; }
.oos-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ───── 13. TOAST ───── */
.toast {
  position: fixed;
  bottom: calc(var(--pb) + var(--pill) + 24px);
  left: 50%;
  transform: translate(-50%, 12px);
  z-index: 620; /* above scrim (590) and panel (600) so add-to-bag toasts are visible during the close animation */
  padding: 11px 18px;
  border-radius: 100px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border-hi);
  box-shadow: var(--glass-shadow);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s var(--silk), transform 0.42s var(--spring);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ───── 14. RESPONSIVE OVERRIDES ───── */
@media (max-width: 400px) {
  :root { --pill: 50px; }
  .ni svg { width: 18px; height: 18px; }
  .cb svg { width: 19px; height: 19px; }
  .ab { width: 44px; height: 44px; }
  .ab svg { width: 18px; height: 18px; }
}
@media (max-width: 380px) {
  .b-item { padding: 9px 14px; font-size: 11px; }
  .b-menu { gap: 6px; }
}
@media (max-width: 340px) {
  :root { --pill: 46px; --ph: 10px; }
  .ep { max-width: 115px; }
  .sact { gap: 7px; }
}

/* ═════════════════════════════════════════════════════════
   15. CHECKOUT PAGE
   ═════════════════════════════════════════════════════════ */
.co-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--ph);
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
  transition: background var(--t-color), border-color var(--t-color);
}
.co-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dim);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.28s var(--silk);
}
.co-back-btn:hover { color: var(--ink); }
.co-back-btn svg { width: 16px; height: 16px; }
.co-logo {
  font-family: var(--font-editorial);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  font-style: normal;
  letter-spacing: -0.01em;
}
.co-logo em {
  font-style: italic;
  color: var(--accent);
}

.co-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px var(--ph) 72px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.co-main.hidden { display: none; }

.co-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
  padding: 22px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.co-card-title {
  font-family: var(--font-editorial);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

/* ── Order items ── */
.co-items-list { display: flex; flex-direction: column; }
.co-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--glass-border);
}
.co-item:last-child { border-bottom: none; padding-bottom: 0; }
.co-item:first-child { padding-top: 0; }
.co-item-img {
  width: 50px;
  height: 58px;
  border-radius: 10px;
  background: var(--glass-bg-strong) center/cover no-repeat;
  flex-shrink: 0;
  border: 1px solid var(--glass-border);
}
.co-item-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.co-item-brand {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
  display: inline-block;
  width: fit-content;
}
[data-coll="gent"] .co-item-brand  { background: var(--brand-gent);   color: var(--brand-gent-text);   }
[data-coll="grace"] .co-item-brand { background: var(--brand-grace);  color: var(--brand-grace-text);  }
[data-coll="edge"] .co-item-brand  { background: var(--brand-edge);   color: var(--brand-edge-text);   }
.co-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.co-item-size {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.05em;
}
.co-item-right {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.co-item-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.co-item-qty {
  font-size: 11px;
  color: var(--dim);
}
.co-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--glass-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.03em;
}

/* ── Delivery form ── */
.co-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  --form-accent: var(--accent);
  --c-line-hi: var(--glass-border-hi);
}

/* ── Payment toggle ── */
.co-payment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.co-payment-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.co-payment-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.co-payment-sub {
  font-size: 11px;
  color: var(--dim);
}
.co-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.co-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.co-toggle-track {
  width: 50px;
  height: 28px;
  border-radius: 100px;
  background: var(--glass-border-hi);
  border: 1px solid var(--glass-border);
  position: relative;
  transition: background 0.36s var(--silk), border-color 0.36s var(--silk);
}
.co-toggle input:checked + .co-toggle-track {
  background: #48907f;
  border-color: #48907f;
}
.co-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  transition: transform 0.36s var(--spring);
}
.co-toggle input:checked + .co-toggle-track .co-toggle-thumb {
  transform: translateX(22px);
}

/* ── Policy agree ── */
.co-agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 2px 0;
  -webkit-tap-highlight-color: transparent;
}
.co-agree input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.co-agree-box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--glass-border-hi);
  background: transparent;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  position: relative;
  transition: background 0.28s var(--silk), border-color 0.28s var(--silk);
}
.co-agree-box::after {
  content: "";
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s var(--spring);
  position: absolute;
  top: 2px;
}
.co-agree input:checked + .co-agree-box {
  background: #48907f;
  border-color: #48907f;
}
.co-agree input:checked + .co-agree-box::after {
  transform: rotate(45deg) scale(1);
}
.co-agree-text {
  font-size: 12px;
  color: var(--dim);
  line-height: 1.55;
}

/* ── Place order button ── */
.co-place-btn {
  width: 100%;
  padding: 16px 28px;
  border-radius: 100px;
  border: none;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.42s var(--silk),
    color 0.42s var(--silk),
    transform 0.18s var(--press),
    box-shadow 0.32s var(--silk),
    opacity 0.32s;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.24);
}
.co-place-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.3); }
.co-place-btn:active { transform: scale(0.97); }
.co-place-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none; }
.co-place-btn svg { width: 15px; height: 15px; transition: transform 0.32s var(--silk); }
.co-place-btn:hover:not(:disabled) svg { transform: translateX(3px); }

/* ── Success state ── */
.co-success {
  max-width: 480px;
  margin: 80px auto 40px;
  padding: 0 var(--ph);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.co-success.hidden { display: none; }
.co-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(72, 144, 127, 0.12);
  border: 1.5px solid #48907f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-success-icon svg {
  width: 26px;
  height: 26px;
  stroke: #48907f;
}
.co-success-title {
  font-family: var(--font-editorial);
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.co-success-sub {
  font-size: 14px;
  color: var(--dim);
  line-height: 1.6;
  max-width: 300px;
}
.co-success-btn {
  margin-top: 8px;
  padding: 13px 28px;
  border-radius: 100px;
  border: 1.5px solid var(--glass-border-hi);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.32s var(--silk),
    border-color 0.32s var(--silk),
    transform 0.18s var(--press);
}
.co-success-btn:hover { background: var(--glass-bg); border-color: var(--glass-border-hi); transform: translateY(-1px); }
.co-success-btn:active { transform: scale(0.96); }