/* ============================================================================
   HALON — COMPONENTS. Every interactive element ships all SIX states
   (default/hover/focus-visible/active/disabled/loading) + empty + error.
   Motion in the precise "damped settle" register. (ui-ux G-6 lives here.)
   ========================================================================== */

/* ---- mono label / kicker (the engineered signal) ---- */
.mono{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.04em}
.kicker{font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-faint);display:inline-flex;align-items:center;gap:var(--s-2)}
.kicker::before{content:"";width:22px;height:1px;background:var(--signal)}

/* ---- BUTTON (primary/secondary/ghost) — sweep + press + loading ---- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font:600 var(--step-0)/1 var(--font-text);letter-spacing:-.01em;
  padding:14px 22px;border-radius:var(--r-2);border:1px solid transparent;cursor:pointer;
  background:transparent;color:var(--text);isolation:isolate;overflow:hidden;
  transition:transform var(--t-micro) var(--ease-settle),box-shadow var(--t-ui) var(--ease-settle),
             background var(--t-ui) var(--ease-settle),border-color var(--t-ui) var(--ease-settle),color var(--t-ui);}
.btn--primary{background:#c8330f;color:#fff}   /* AA-safe vermilion: white-on-#c8330f ≈ 5.3:1 */
:root[data-theme="dark"] .btn--primary{background:#e0410f;color:#fff}
.btn--primary::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(110deg,#a82a0c,#c8330f);transition:opacity var(--t-ui) var(--ease-settle)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.btn--primary:hover::after{opacity:1}
.btn--secondary{border-color:var(--border-strong);color:var(--text)}
.btn--secondary:hover{border-color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent);transform:translateY(-1px)}
.btn--ghost{color:var(--text-muted);padding:10px 12px}
.btn--ghost:hover{color:var(--text);background:var(--hairline)}
.btn:active{transform:translateY(0) scale(.975)}
.btn:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;background:var(--surface-sunk);
  color:var(--text-faint);border-color:var(--hairline);box-shadow:none;transform:none}
.btn[aria-busy="true"]{color:transparent;pointer-events:none}
.btn[aria-busy="true"]::before{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn--secondary[aria-busy="true"]::before{border-color:var(--border-strong);border-top-color:var(--text)}
@keyframes spin{to{transform:rotate(1turn)}}
.btn__ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ---- NAV ---- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;gap:var(--s-6);
  padding:var(--s-4) var(--gutter);
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid transparent;transition:border-color var(--t-ui),background var(--t-ui)}
.nav[data-scrolled="true"]{border-bottom-color:var(--hairline);background:color-mix(in srgb,var(--bg) 92%,transparent)}
.nav__brand{display:flex;align-items:center;gap:var(--s-3);font-family:var(--font-display);font-weight:600;
  font-size:var(--step-1);letter-spacing:-.03em}
.nav__mark{width:26px;height:26px}
.nav__links{display:flex;gap:var(--s-2);margin-left:var(--s-8)}
.nav__link{position:relative;font-size:var(--step--1);color:var(--text-muted);padding:8px 12px;border-radius:var(--r-1);
  transition:color var(--t-ui)}
.nav__link:hover,.nav__link:focus-visible{color:var(--text)}
.nav__indicator{position:absolute;left:0;bottom:2px;height:2px;background:var(--signal);border-radius:2px;
  width:0;transform:translateX(0);pointer-events:none;opacity:0}
.nav__spacer{flex:1}
.nav__cart{position:relative;display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--font-mono);font-size:var(--step--1);padding:9px 14px;border:1px solid var(--border-strong);
  border-radius:var(--r-2);cursor:pointer;background:transparent;color:var(--text);transition:border-color var(--t-ui),transform var(--t-micro)}
.nav__cart:hover{border-color:var(--text);transform:translateY(-1px)}
.nav__cart-count{min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;
  background:#c8330f;color:#fff;border-radius:20px;font-size:11px;font-weight:600;
  transition:transform var(--t-ui) var(--ease-spring)}
.nav__cart-count[data-bump="true"]{transform:scale(1.35)}
.nav__toggle{width:40px;height:40px;border:1px solid var(--border-strong);border-radius:var(--r-2);
  display:grid;place-items:center;cursor:pointer;background:transparent;color:var(--text);transition:border-color var(--t-ui)}
.nav__toggle:hover{border-color:var(--text)}
.nav__burger{display:none}

/* ---- PRODUCT CARD (asymmetric catalog; FLIP source) ---- */
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--r-3);overflow:hidden;cursor:pointer;
  transition:transform var(--t-content) var(--ease-settle),box-shadow var(--t-content) var(--ease-settle),border-color var(--t-ui)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--border)}
.card:focus-visible{box-shadow:var(--shadow-2)}
.card__media{position:relative;aspect-ratio:4/3;background:
  radial-gradient(120% 120% at 70% 20%,color-mix(in srgb,var(--signal) 8%,transparent),transparent 55%),var(--surface-sunk);
  overflow:hidden}
.card__media svg{position:absolute;inset:0;width:100%;height:100%}
.card:hover .card__media svg{transform:scale(1.04) rotate(-.4deg)}
.card__media svg{transition:transform var(--t-drama) var(--ease-settle)}
.card__tag{position:absolute;top:var(--s-3);left:var(--s-3);font-family:var(--font-mono);font-size:11px;
  letter-spacing:.08em;padding:4px 8px;border:1px solid var(--border-strong);border-radius:20px;
  background:color-mix(in srgb,var(--bg) 70%,transparent);text-transform:uppercase}
.card__tag--sold{color:var(--text-faint)}
.card__body{padding:var(--s-5) var(--s-5) var(--s-6);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.card__name{font-family:var(--font-display);font-size:var(--step-1);font-weight:600}
.card__desc{color:var(--text-muted);font-size:var(--step--1);line-height:1.5}
.card__foot{margin-top:auto;padding-top:var(--s-4);display:flex;align-items:center;justify-content:space-between}
.card__price{font-family:var(--font-mono);font-size:var(--step-0)}
.card__cta{font-family:var(--font-mono);font-size:var(--step--1);color:var(--signal-deep);display:inline-flex;align-items:center;gap:6px;
  transition:gap var(--t-ui)}
.card:hover .card__cta{gap:12px}
/* size variants — NO equal 3-card grid */
.card--wide{grid-column:span 7}
.card--tall{grid-column:span 5;grid-row:span 2}
.card--std{grid-column:span 4}
.card--half{grid-column:span 5}

/* ---- listing skeleton (loading state) ---- */
.skeleton{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-3);overflow:hidden}
.skeleton__media{aspect-ratio:4/3;background:var(--surface-sunk)}
.skeleton__line{height:12px;margin:16px 20px 0;border-radius:6px;background:var(--surface-sunk)}
.skeleton__line.sm{width:40%;margin-bottom:20px}
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 6%,transparent),transparent);
  animation:shim 1.3s infinite}
@keyframes shim{100%{transform:translateX(100%)}}

/* ---- TABS (sliding indicator) ---- */
.tabs{position:relative;display:inline-flex;gap:2px;padding:4px;background:var(--surface-sunk);border-radius:var(--r-2)}
.tab{position:relative;z-index:1;border:0;background:transparent;cursor:pointer;color:var(--text-muted);
  font:600 var(--step--1)/1 var(--font-text);padding:9px 16px;border-radius:var(--r-1);transition:color var(--t-ui)}
.tab[aria-selected="true"]{color:var(--text)}
.tab:hover{color:var(--text)}
.tabs__pill{position:absolute;top:4px;left:4px;bottom:4px;background:var(--surface);border-radius:var(--r-1);
  box-shadow:var(--shadow-1);transition:transform var(--t-content) var(--ease-settle),width var(--t-content) var(--ease-settle)}

/* ---- ACCORDION (eased height) ---- */
.acc{border-top:1px solid var(--hairline)}
.acc__item{border-bottom:1px solid var(--hairline)}
.acc__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5) 0;background:transparent;border:0;cursor:pointer;text-align:left;color:var(--text);
  font-family:var(--font-display);font-size:var(--step-1);font-weight:500;transition:color var(--t-ui)}
.acc__trigger:hover{color:var(--signal-deep)}
.acc__sign{position:relative;width:16px;height:16px;flex:none}
.acc__sign::before,.acc__sign::after{content:"";position:absolute;background:currentColor;transition:transform var(--t-content) var(--ease-settle)}
.acc__sign::before{top:7px;left:0;width:16px;height:2px}
.acc__sign::after{left:7px;top:0;width:2px;height:16px}
.acc__item[data-open="true"] .acc__sign::after{transform:scaleY(0)}
.acc__panel{height:0;overflow:hidden}
.acc__panel-inner{padding:0 0 var(--s-6);color:var(--text-muted);max-width:60ch;line-height:1.65}

/* ---- TOGGLE (spring thumb) — unit + theme ---- */
.switch{--w:52px;width:var(--w);height:28px;border-radius:999px;background:var(--ink-300);position:relative;
  cursor:pointer;border:0;transition:background var(--t-ui) var(--ease-io);flex:none}
:root[data-theme="dark"] .switch{background:var(--ink-600)}
.switch[data-state="on"]{background:var(--signal)}
.switch__thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:var(--shadow-1);transition:transform var(--t-ui) var(--ease-spring)}
.switch[data-state="on"] .switch__thumb{transform:translateX(24px)}

/* ---- QUANTITY STEPPER ---- */
.step{display:inline-flex;align-items:center;border:1px solid var(--border-strong);border-radius:var(--r-2);overflow:hidden}
.step button{width:38px;height:40px;border:0;background:transparent;cursor:pointer;color:var(--text);font-size:18px;
  transition:background var(--t-micro)}
.step button:hover{background:var(--hairline)}
.step button:active{transform:scale(.9)}
.step button:disabled{color:var(--text-faint);cursor:not-allowed}
.step output{min-width:40px;text-align:center;font-family:var(--font-mono);font-size:var(--step-0)}

/* ---- FORM (floating label, validation) ---- */
.field{position:relative;margin-top:var(--s-5)}
.field input{width:100%;padding:20px 14px 8px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-2);color:var(--text);font:400 var(--step-0)/1.2 var(--font-text);
  transition:border-color var(--t-ui),box-shadow var(--t-ui)}
.field label{position:absolute;left:14px;top:15px;color:var(--text-faint);pointer-events:none;
  font-size:var(--step-0);transition:transform var(--t-ui) var(--ease-settle),font-size var(--t-ui),color var(--t-ui)}
.field input:focus{border-color:var(--signal);box-shadow:0 0 0 3px var(--signal-wash);outline:none}
.field input:focus+label,.field input:not(:placeholder-shown)+label{
  transform:translateY(-11px);font-size:11px;color:var(--text-muted);letter-spacing:.03em}
.field[data-invalid="true"] input{border-color:var(--danger)}
.field__msg{display:none;margin-top:6px;font-size:var(--step--1);color:var(--danger)}
.field[data-invalid="true"] .field__msg{display:block}
.field__ok{position:absolute;right:14px;top:16px;opacity:0;color:var(--ok);transition:opacity var(--t-ui)}
.field[data-valid="true"] .field__ok{opacity:1}

/* ---- CART DRAWER ---- */
.scrim{position:fixed;inset:0;z-index:90;background:rgba(12,13,17,.42);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity var(--t-content),visibility var(--t-content)}
.scrim[data-open="true"]{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:91;width:min(440px,92vw);background:var(--bg);
  border-left:1px solid var(--hairline);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--t-drama) var(--ease-settle)}
.drawer[data-open="true"]{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:var(--s-6) var(--s-6) var(--s-4);
  border-bottom:1px solid var(--hairline)}
.drawer__title{font-family:var(--font-display);font-size:var(--step-2)}
.drawer__close{width:38px;height:38px;border:1px solid var(--border-strong);border-radius:var(--r-2);background:transparent;
  cursor:pointer;color:var(--text);display:grid;place-items:center;transition:border-color var(--t-ui)}
.drawer__close:hover{border-color:var(--text)}
.drawer__body{flex:1;overflow-y:auto;padding:var(--s-5) var(--s-6)}
.drawer__foot{border-top:1px solid var(--hairline);padding:var(--s-6)}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:var(--s-4);align-items:center;padding:var(--s-4) 0;
  border-bottom:1px solid var(--hairline)}
.line__thumb{width:64px;height:64px;border-radius:var(--r-2);background:var(--surface-sunk);overflow:hidden;position:relative}
.line__thumb svg{position:absolute;inset:0;width:100%;height:100%}
.line__name{font-weight:600;font-size:var(--step--1)}
.line__meta{font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}
.line__price{font-family:var(--font-mono);font-size:var(--step--1)}
.line__rm{background:none;border:0;color:var(--text-faint);cursor:pointer;font-size:11px;font-family:var(--font-mono);
  margin-top:4px;transition:color var(--t-ui)}
.line__rm:hover{color:var(--danger)}
/* cart EMPTY STATE (designed, not "no data") */
.cart-empty{text-align:center;padding:var(--s-16) var(--s-4);display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}
.cart-empty svg{width:56px;height:56px;stroke:var(--text-faint);fill:none;stroke-width:1.2;margin-bottom:var(--s-2)}
.cart-empty h4{font-family:var(--font-display);font-size:var(--step-1)}
.cart-empty p{color:var(--text-muted);font-size:var(--step--1);max-width:28ch}
.cart-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--s-4)}
.cart-total .lbl{font-family:var(--font-mono);font-size:var(--step--1);color:var(--text-muted)}
.cart-total .amt{font-family:var(--font-mono);font-size:var(--step-2)}

/* ---- TOAST ---- */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{display:flex;align-items:center;gap:var(--s-3);background:var(--ink-900);color:#fff;padding:12px 18px;border-radius:var(--r-2);
  box-shadow:var(--shadow-3);font-size:var(--step--1);transform:translateY(16px);opacity:0;
  transition:transform var(--t-content) var(--ease-settle),opacity var(--t-content)}
:root[data-theme="dark"] .toast{background:var(--paper-raise);color:var(--ink-900)}
.toast[data-show="true"]{transform:translateY(0);opacity:1}
.toast .dot{width:8px;height:8px;border-radius:50%;background:var(--signal)}

/* ---- tooltip ---- */
.tip{position:relative;border-bottom:1px dashed var(--border-strong);cursor:help}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);
  background:var(--ink-900);color:#fff;padding:8px 10px;border-radius:var(--r-1);font-size:11px;font-family:var(--font-text);
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--t-ui),transform var(--t-ui);z-index:40}
:root[data-theme="dark"] .tip::after{background:var(--paper-raise);color:var(--ink-900)}
.tip:hover::after,.tip:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}