/* ═══════════════════════════════════════════════════════════
   BESPOKE ATELIER — Design System v3

   DARK  → Matte Black #0A0A0A  +  Acid Lime #C6F135
           Vibe: Bottega Veneta / Rick Owens / luxury streetwear

   LIGHT → Chalk White #F9F8F5  +  Carbon #0F0F0F
           Vibe: The Row / Loro Piana / quiet editorial
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

:root {
  --bg:         #0A0A0A;
  --bg-raised:  #111111;
  --bg-card:    #161616;
  --bg-hover:   #1C1C1C;
  --bg-header:  rgba(8,8,8,0.96);
  --bg-sidebar: #0D0D0D;
  --bg-preview: #0C0C0C;
  --line:       rgba(255,255,255,0.06);
  --line-md:    rgba(255,255,255,0.12);
  --line-hi:    rgba(255,255,255,0.22);
  --tx:         #F0F0EE;
  --tx-2:       rgba(240,240,238,0.55);
  --tx-3:       rgb(255, 255, 255);
  --ac:         #C6F135;
  --ac-dark:    #A8D020;
  --ac-on:      #0A0A0A;
  --ac-dim:     rgba(198,241,53,0.10);
  --ac-ghost:   rgba(198,241,53,0.04);
}

[data-theme="light"] {
  --bg:         #F9F8F5;
  --bg-raised:  #F2F1EE;
  --bg-card:    #ECEAE5;
  --bg-hover:   #E5E3DE;
  --bg-header:  rgba(249,248,245,0.97);
  --bg-sidebar: #F4F3F0;
  --bg-preview: #EDECEA;
  --line:       rgba(0,0,0,0.07);
  --line-md:    rgba(0,0,0,0.13);
  --line-hi:    rgba(0,0,0,0.24);
  --tx:         #0F0F0F;
  --tx-2:       rgba(15,15,15,0.52);
  --tx-3:       rgb(0,0,0);
  --ac:         #0F0F0F;
  --ac-dark:    #2A2A2A;
  --ac-on:      #F9F8F5;
  --ac-dim:     rgba(15,15,15,0.07);
  --ac-ghost:   rgba(15,15,15,0.03);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 13px;
  background: var(--bg);
  color: var(--tx);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}

::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-thumb { background: var(--line-hi); }

/* HEADER */
.header {
  position: sticky; top: 0; z-index: 200;
  height: 56px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(24px) saturate(1.6);
  display: flex; align-items: center;
  padding: 0 28px; gap: 0;
}

.logo-wrap { margin-right: 36px;padding-top: 15px; padding-bottom: 15px; }
.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px; letter-spacing: 0.1em;
  color: var(--tx); line-height: 1;
}
.logo em { color: var(--ac); font-style: normal; }
[data-theme="light"] .logo em { color: var(--tx); }
.logo-sub {
  font-size: 9px; letter-spacing: 0.42em;
  text-transform: uppercase; color: var(--tx-3);
  margin-top: 2px; font-weight: 400;
}

.h-tabs { display: flex; height: 56px; }
.h-tab {
  height: 100%; padding: 0 18px;
  display: flex; align-items: center;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500; color: var(--tx-3);
  border: none; background: none;
  font-family: 'Jost', sans-serif;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.h-tab:hover { color: var(--tx-2); }
.h-tab.on    { color: var(--tx); border-bottom-color: var(--ac); }

.h-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* theme toggle */
.thm {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--line-md);
  background: var(--bg-raised);
  cursor: pointer; font-family: 'Jost', sans-serif;
  transition: all .2s;
}
.thm:hover { border-color: var(--line-hi); }
.thm-track {
  width: 26px; height: 14px; border-radius: 99px;
  background: var(--bg-card); border: 1px solid var(--line-md);
  position: relative;
}
.thm-thumb {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ac);
  position: absolute; top: 2px; left: 2px;
  transition: transform .25s;
}
[data-theme="light"] .thm-thumb { transform: translateX(12px); background: var(--tx); }
.thm-lbl { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-3); }

.h-login {
  font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tx-3); background: none; border: none;
  cursor: pointer; font-family: 'Jost', sans-serif; transition: color .2s;
}
.h-login:hover { color: var(--tx); }

.h-cta {
  padding: 9px 22px;
  background: var(--ac); color: var(--ac-on);
  border: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px; letter-spacing: 0.14em;
  cursor: pointer; transition: opacity .2s, transform .15s;
}
.h-cta:hover { opacity: .85; transform: translateY(-1px); }

/* SHELL */
.shell { display: flex; min-height: calc(100vh - 56px); }

/* SIDEBAR */
.sidebar {
  width: 192px; min-width: 192px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--line);
  position: sticky; top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 24px 0;
  display: flex; flex-direction: column;
}
.sidebar::-webkit-scrollbar { width: 0; }

.sb-lbl {
  font-size: 14px; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--tx-3); padding: 0 16px 10px; font-weight: 500;
}

.sb-btn {
  width: 100%; text-align: left;
  background: none; border: none;
  border-left: 2px solid transparent;
  padding: 11px 16px;
  font-family: 'Jost', sans-serif;
  font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tx-3); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  transition: color .18s, background .18s, border-color .18s;
}
.sb-btn:hover { color: var(--tx-2); background: var(--ac-ghost); }
.sb-btn.on    { color: var(--tx); font-weight: 600; border-left-color: var(--ac); background: var(--ac-dim); }
.sb-arr { font-size: 10px; opacity: 0.35; }
.sb-btn.on .sb-arr { opacity: 1; color: var(--ac); }

.sb-sub { padding-bottom: 4px; }
.sb-sub-btn {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  background: none; border: none;
  padding: 7px 16px 7px 22px;
  font-family: 'Jost', sans-serif;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tx-3); cursor: pointer;
  transition: color .15s;
}
.sb-sub-btn:hover { color: var(--tx-2); }
.sb-sub-btn.on    { color: var(--tx); font-weight: 500; }
.sb-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--line-hi); flex-shrink: 0;
  transition: background .15s;
}
.sb-sub-btn.on .sb-dot { background: var(--ac); }
[data-theme="light"] .sb-sub-btn.on .sb-dot { background: var(--tx); }

.sb-fab { margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--line); }
.sb-fab-lbl { font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 10px; }
.sb-sw { width: 20px; height: 20px; border: 1px solid var(--line-md); flex-shrink: 0; }
.sb-fn { font-size: 16px; font-weight: 600; color: var(--tx); }
.sb-fp { font-size: 18px; color: var(--tx-3); margin-top: 2px; }

/* MAIN */
.main {
  flex: 1; padding: 10px 48px;
  overflow-y: auto; max-width: 740px;
}
.main::-webkit-scrollbar { width: 2px; }

.s-eye {
  font-size: 10px; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--tx-3); margin-bottom: 4px;
}
.s-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px; letter-spacing: 0.04em; line-height: 0.92;
  color: var(--tx); margin-bottom: 18px;
}
.s-rule { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.s-rule-line { width: 22px; height: 2px; background: var(--ac); }
[data-theme="light"] .s-rule-line { background: var(--tx); }
.s-rule-txt { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-3); }

/* progress */
.prog { display: flex; gap: 3px; margin-bottom: 28px; }
.p-seg { flex: 1; height: 2px; background: var(--bg-card); cursor: pointer; transition: background .25s; }
.p-seg.done { background: var(--line-hi); }
.p-seg.on   { background: var(--ac); }
[data-theme="light"] .p-seg.on { background: var(--tx); }

/* filter chips */
.f-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 22px; }
.f-chip {
  padding: 5px 14px;
  border: 1px solid var(--line-md);
  background: none; color: var(--tx-3);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; font-family: 'Jost', sans-serif; transition: all .15s;
}
.f-chip:hover { border-color: var(--line-hi); color: var(--tx-2); }
.f-chip.on { background: var(--ac); border-color: var(--ac); color: var(--ac-on); font-weight: 600; }
[data-theme="light"] .f-chip.on { background: var(--tx); border-color: var(--tx); color: var(--ac-on); }

/* FABRIC GRID */
.fab-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }

.fab-card {
  cursor: pointer; border: 1px solid var(--line);
  background: var(--bg-card);
  transition: border-color .18s, transform .18s; overflow: hidden;
}
.fab-card:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.fab-card.on    { border: 2px solid var(--ac); }
[data-theme="light"] .fab-card.on { border-color: var(--tx); }

.fab-sw { height: 78px; position: relative; }
.fab-sw::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.015) 0,rgba(255,255,255,0.015) 1px,transparent 1px,transparent 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0,rgba(255,255,255,0.015) 1px,transparent 1px,transparent 4px);
}
[data-theme="light"] .fab-sw::after {
  background-image:
    repeating-linear-gradient(0deg,  rgba(0,0,0,0.03) 0,rgba(0,0,0,0.03) 1px,transparent 1px,transparent 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.03) 0,rgba(0,0,0,0.03) 1px,transparent 1px,transparent 4px);
}

.fab-badge {
  position: absolute; top: 0; left: 0; z-index: 2;
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 3px 7px; font-family: 'Jost', sans-serif;
}
.fab-badge.promo { background: var(--ac); color: var(--ac-on); }
[data-theme="light"] .fab-badge.promo { background: var(--tx); color: var(--ac-on); }
.fab-badge.wool  { background: #fff; color: #000; }

.fab-tick {
  position: absolute; bottom: 6px; right: 6px; z-index: 2;
  width: 18px; height: 18px;
  background: var(--ac); color: var(--ac-on);
  font-size: 9px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
}
[data-theme="light"] .fab-tick { background: var(--tx); color: var(--ac-on); }
.fab-card.on .fab-tick { display: flex; }

.fab-info {
  padding: 7px 10px; background: var(--bg-raised);
  display: flex; justify-content: space-between; align-items: center;
}
.fab-name  { font-size: 12px; color: var(--tx-2); }
.fab-price { font-size: 12px; color: var(--tx); font-weight: 600; }

/* OPTION CARDS */
.og2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.og3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.og4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }

.oc {
  position: relative; background: var(--bg-card);
  border: 1px solid var(--line); cursor: pointer;
  padding: 18px 10px 14px; text-align: center;
  transition: border-color .18s, background .18s, transform .18s;
}
.oc:hover { border-color: var(--line-hi); background: var(--bg-hover); transform: translateY(-2px); }
.oc.on    { border: 2px solid var(--ac); background: var(--ac-dim); }
[data-theme="light"] .oc.on { border-color: var(--tx); background: var(--ac-dim); }

.oc-ck {
  position: absolute; top: 5px; right: 5px;
  width: 16px; height: 16px;
  background: var(--ac); color: var(--ac-on);
  font-size: 8px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
}
[data-theme="light"] .oc-ck { background: var(--tx); color: var(--ac-on); }
.oc.on .oc-ck { display: flex; }

.oc-lbl {
  font-size: 12px; color: var(--tx-3);
  letter-spacing: 0.07em; text-transform: uppercase;
  margin-top: 10px; line-height: 1.5;
}
.oc.on .oc-lbl { color: var(--tx); font-weight: 500; }
.oc-sub { font-size: 10px; color: var(--tx-3); margin-top: 2px; opacity: 0.6; }

.slbl {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--tx-3); margin: 22px 0 12px;
}
.slbl::before {
  content: ''; display: block;
  width: 14px; height: 1.5px;
  background: var(--ac); flex-shrink: 0;
}
[data-theme="light"] .slbl::before { background: var(--tx); }

.t-row { display: flex; gap: 5px; flex-wrap: wrap; }
.tpill {
  padding: 6px 16px; border: 1px solid var(--line-md);
  background: none; color: var(--tx-3);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; font-family: 'Jost', sans-serif; transition: all .15s;
}
.tpill:hover { border-color: var(--line-hi); color: var(--tx-2); }
.tpill.on    { background: var(--ac); border-color: var(--ac); color: var(--ac-on); font-weight: 600; }
[data-theme="light"] .tpill.on { background: var(--tx); border-color: var(--tx); }

/* COLOR PICKERS */
.cg6   { display: grid; grid-template-columns: repeat(6,1fr); gap: 5px; }
.c-dots { display: flex; flex-wrap: wrap; gap: 6px; }

.ctile {
  height: 50px; cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s, transform .15s; position: relative;
}
.ctile:hover { border-color: var(--line-hi); transform: scale(1.04); }
.ctile.on    { border-color: var(--ac); }
[data-theme="light"] .ctile.on { border-color: var(--tx); }
.ct-ck {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.ctile.on .ct-ck { display: flex; }

.cdot {
  width: 42px; height: 42px; cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s, transform .15s; position: relative;
}
.cdot:hover { border-color: var(--line-hi); transform: scale(1.06); }
.cdot.on    { border-color: var(--ac); }
[data-theme="light"] .cdot.on { border-color: var(--tx); }
.cd-ck {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.cdot.on .cd-ck { display: flex; }

.p-row { display: flex; flex-wrap: wrap; gap: 5px; }
.pchip {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 14px; border: 1px solid var(--line-md);
  background: none; color: var(--tx-3);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; font-family: 'Jost', sans-serif; transition: all .15s;
}
.pchip:hover { border-color: var(--line-hi); color: var(--tx-2); }
.pchip.on    { border-color: var(--ac); color: var(--tx); background: var(--ac-ghost); }
[data-theme="light"] .pchip.on { border-color: var(--tx); }
.pchip-box {
  width: 10px; height: 10px; border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; flex-shrink: 0;
}

.mono {
  background: none; border: none; border-bottom: 2px solid var(--line-hi);
  color: var(--tx); padding: 12px 4px;
  font-size: 26px; letter-spacing: 0.42em;
  font-family: 'Bebas Neue', sans-serif;
  outline: none; width: 220px; transition: border-color .2s;
}
.mono:focus { border-color: var(--ac); }
[data-theme="light"] .mono:focus { border-color: var(--tx); }
.mono::placeholder { color: var(--tx-3); }
.mono-hint { font-size: 12px; color: var(--tx-3); letter-spacing: 0.04em; margin-top: 8px; font-style: italic; }

/* NAV BUTTONS */
.nav-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line);
}
.btn-back {
  padding: 9px 22px; background: none; border: 1px solid var(--line-md);
  color: var(--tx-3); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; font-family: 'Jost', sans-serif; transition: all .18s;
}
.btn-back:hover { border-color: var(--line-hi); color: var(--tx-2); }

.btn-next {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 26px;
  background: var(--ac); border: none; color: var(--ac-on);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px; letter-spacing: 0.12em;
  cursor: pointer; transition: opacity .18s, transform .15s;
}
.btn-next:hover { opacity: .88; transform: translateX(2px); }

/* PREVIEW */
.preview {
  width: calc(100% - 740px);
  min-width: calc(100% - 740px);
  background: var(--bg-preview);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0px 22px;
  position: sticky; top: 56px;
  height: calc(100vh - 56px); overflow: hidden;
}
.prev-top { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.prev-lbl { font-size: 7px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--tx-3); }
.prev-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px; letter-spacing: -0.01em;
  color: var(--tx); line-height: 1;
}
.prev-jkt { width: 260px; height: 330px; flex-shrink: 0; }
.prev-jkt svg { width: 100%; height: 100%; }
.prev-meta {
  width: 100%; margin-top: 14px; padding: 11px 13px;
  background: var(--bg-card); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.prev-sw { width: 22px; height: 22px; border: 1px solid var(--line-md); flex-shrink: 0; }
.prev-fn { font-size: 11px; font-weight: 600; color: var(--tx); }
.prev-fd { font-size: 8px; color: var(--tx-3); margin-top: 2px; }

.btn-cart {
  width: 100%; padding: 13px;
  background: var(--ac); border: none; color: var(--ac-on);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px; letter-spacing: 0.14em;
  cursor: pointer; transition: opacity .18s, transform .15s;
}
.btn-cart:hover { opacity: .88; transform: translateY(-1px); }

.btn-look {
  width: 100%; padding: 9px; margin-top: 5px;
  background: none; border: 1px solid var(--line-md);
  color: var(--tx-3); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; font-family: 'Jost', sans-serif; transition: all .18s;
}
.btn-look:hover { border-color: var(--line-hi); color: var(--tx-2); }

/* ── ANIMATION KEYFRAMES ── */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideInFast {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── VISIBILITY + ANIMATED PANELS ── */
.cfg  { display: none; }
.cfg.on {
  display: block;
  animation: fadeSlideIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.stp  { display: none; }
.stp.on {
  display: block;
  animation: fadeSlideIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cstp { display: none; }
.cstp.on {
  display: block;
  animation: fadeSlideIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── SIDEBAR SUB-MENU SLIDE ── */
.sb-sub {
  padding-bottom: 4px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.28s ease;
}
.sb-sub.open {
  max-height: 320px;
  opacity: 1;
}

/* ── STAGGERED CARD ENTRANCE ── */
.fab-card {
  animation: scaleIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.fab-card:nth-child(1) { animation-delay: 0.03s; }
.fab-card:nth-child(2) { animation-delay: 0.06s; }
.fab-card:nth-child(3) { animation-delay: 0.09s; }
.fab-card:nth-child(4) { animation-delay: 0.12s; }
.fab-card:nth-child(5) { animation-delay: 0.15s; }
.fab-card:nth-child(6) { animation-delay: 0.18s; }
.fab-card:nth-child(7) { animation-delay: 0.21s; }
.fab-card:nth-child(8) { animation-delay: 0.24s; }
.fab-card:nth-child(9) { animation-delay: 0.27s; }

/* ── OPTION CARD STAGGER ── */
.oc {
  animation: scaleIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.og2 .oc:nth-child(1), .og3 .oc:nth-child(1), .og4 .oc:nth-child(1) { animation-delay: 0.04s; }
.og2 .oc:nth-child(2), .og3 .oc:nth-child(2), .og4 .oc:nth-child(2) { animation-delay: 0.08s; }
.og2 .oc:nth-child(3), .og3 .oc:nth-child(3), .og4 .oc:nth-child(3) { animation-delay: 0.12s; }
.og2 .oc:nth-child(4), .og3 .oc:nth-child(4), .og4 .oc:nth-child(4) { animation-delay: 0.16s; }
.og2 .oc:nth-child(5), .og3 .oc:nth-child(5), .og4 .oc:nth-child(5) { animation-delay: 0.20s; }
.og2 .oc:nth-child(6), .og3 .oc:nth-child(6), .og4 .oc:nth-child(6) { animation-delay: 0.24s; }

/* ── COLOR DOT / TILE STAGGER ── */
.cdot, .ctile {
  animation: scaleIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.c-dots .cdot:nth-child(1),  .cg6 .ctile:nth-child(1)  { animation-delay: 0.03s; }
.c-dots .cdot:nth-child(2),  .cg6 .ctile:nth-child(2)  { animation-delay: 0.06s; }
.c-dots .cdot:nth-child(3),  .cg6 .ctile:nth-child(3)  { animation-delay: 0.09s; }
.c-dots .cdot:nth-child(4),  .cg6 .ctile:nth-child(4)  { animation-delay: 0.12s; }
.c-dots .cdot:nth-child(5),  .cg6 .ctile:nth-child(5)  { animation-delay: 0.15s; }
.c-dots .cdot:nth-child(6),  .cg6 .ctile:nth-child(6)  { animation-delay: 0.18s; }
.c-dots .cdot:nth-child(7),  .cg6 .ctile:nth-child(7)  { animation-delay: 0.21s; }
.c-dots .cdot:nth-child(8),  .cg6 .ctile:nth-child(8)  { animation-delay: 0.24s; }
.c-dots .cdot:nth-child(9),  .cg6 .ctile:nth-child(9)  { animation-delay: 0.27s; }
.c-dots .cdot:nth-child(10), .cg6 .ctile:nth-child(10) { animation-delay: 0.30s; }
.c-dots .cdot:nth-child(11), .cg6 .ctile:nth-child(11) { animation-delay: 0.33s; }
.c-dots .cdot:nth-child(12), .cg6 .ctile:nth-child(12) { animation-delay: 0.36s; }

/* ── PART CHIPS STAGGER ── */
.pchip {
  animation: fadeSlideInFast 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.p-row .pchip:nth-child(1) { animation-delay: 0.04s; }
.p-row .pchip:nth-child(2) { animation-delay: 0.08s; }
.p-row .pchip:nth-child(3) { animation-delay: 0.12s; }
.p-row .pchip:nth-child(4) { animation-delay: 0.16s; }
.p-row .pchip:nth-child(5) { animation-delay: 0.20s; }

/* ── SELECTED FABRIC SWATCH TRANSITION ── */
.sb-sw {
  transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.2s ease;
}
.sb-sw:active { transform: scale(0.9); }

/* ── NAV BUTTON RIPPLE FEEL ── */
.btn-next {
  position: relative; overflow: hidden;
}
.btn-next::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.12);
  opacity: 0;
  transition: opacity 0.2s;
}
.btn-next:active::after { opacity: 1; }

/* ── HEADER CTA PULSE ── */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198,241,53,0); }
  50%       { box-shadow: 0 0 0 6px rgba(198,241,53,0.18); }
}
.h-cta {
  animation: ctaPulse 3s ease-in-out infinite;
}
[data-theme="light"] .h-cta {
  animation: none;
}

/* ── SIDEBAR BUTTON ARROW SLIDE ── */
.sb-arr {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}
.sb-btn.on .sb-arr {
  transform: translateX(3px);
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .preview { width: 290px; min-width: 290px; }
  .main    { padding: 28px 24px; }
}
@media (max-width: 880px) {
  .preview { display: none; }
  .sidebar { width: 150px; min-width: 150px; }
}
@media (max-width: 580px) { .h-tabs { display: none; } }