/* LIMA Apparel — storefront components. Uses theme tokens when present, with fallbacks. */
:root {
  --lima-navy: #180092;
  --lima-cobalt: #1800E7;
  --lima-sky: #99B6FF;
  --lima-orange: #FF7A00;
  --lima-grey: #D9D9D9;
  --lima-surface: #F5F6FA;
  --lima-ink: #0B1020;
  /* Tokens mirrored from the theme's tokens.css (same names/values) so the
     plugin components render correctly even when another theme is active. */
  --lima-white: #FFFFFF;
  --lima-ink-soft: #4B5068;
  --lima-line: #D9D9D9;
  --lima-line-soft: #E3E5EC;
  --lima-control: #C9CCD8;
  --lima-pre-bg: #FFE8D6;  --lima-pre-fg: #9A4300;
  --lima-blue-bg: #E6ECFF; --lima-blue-fg: #180092;
  --lima-ok-bg: #DDF4E6;   --lima-ok-fg: #0F5132;
  --lima-crit-bg: #FBE3E1; --lima-crit-fg: #8A1C14;
  --lima-muted-bg: #EEF0F5;--lima-muted-fg: #4B5068;
  --lima-danger: #B42318;
  --lima-shadow-toast: 0 8px 24px rgba(11,16,32,.16);
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: 1rem;
  --fs-caption: 14px;
  --fs-small: 13px;
  --fs-micro: 12px;
  --lbl: 14px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  --radius-card: 14px;
  --radius-control: 10px;
  --radius-control-sm: 8px;
  --radius-pill: 999px;
  --border-control: 1.5px;
  --h-btn: 52px;
  --h-input: 48px;
  --h-pill: 26px;
  --h-tag: 24px;
  --touch: 44px;
  --w-icon: 24px;
  --w-icon-sm: 18px;
  --dur: 160ms;
  --ease: cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }

.lima-countdown {
  display: grid;
  gap: .5rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: var(--lima-navy);
  color: #fff;
  text-align: center;
}
.lima-countdown__title { margin: 0; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.lima-countdown__units { display: flex; justify-content: center; gap: .75rem; }
.lima-countdown__unit { display: grid; min-width: 3.5rem; }
.lima-countdown__unit strong { font-size: clamp(1.75rem, 6vw, 2.5rem); font-variant-numeric: tabular-nums; line-height: 1; }
.lima-countdown__unit small { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.lima-countdown__date { margin: 0; font-size: .875rem; opacity: .75; }
.lima-countdown.is-ended { background: var(--lima-grey); color: var(--lima-ink); }

.lima-banner {
  padding: .75rem 1rem;
  border-radius: 8px;
  font-size: 1rem;
  text-align: center;
  background: var(--lima-sky);
  color: var(--lima-ink);
}
.lima-banner--pre_order_active { background: var(--lima-orange); color: #fff; }
.lima-banner--ready_stock_active { background: var(--lima-cobalt); color: #fff; }
.lima-banner--sales_closed { background: var(--lima-grey); }

.lima-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--lima-sky);
  color: var(--lima-navy);
}
.lima-badge--pre_order_active { background: var(--lima-orange); color: #fff; }
.lima-badge--ready_stock_active { background: var(--lima-cobalt); color: #fff; }

/* Price breakdown printed by WooPricing (BR-13). */
.lima-price { display: grid; gap: .15rem; }
.lima-price__main { font-size: 1.25rem; font-weight: 700; color: var(--lima-ink); }
.lima-price__compare { font-size: .9375rem; color: #555; }
.lima-price__compare del { opacity: .7; }
.lima-price__saving { color: var(--lima-orange); font-weight: 600; }
.lima-price__surcharge { font-size: .875rem; color: #444; }
.lima-size-surcharge-note { font-size: .875rem; color: #444; margin-top: .25rem; }


/* ================================================================== */
/* Phase 2-D: shared storefront primitives used by the plugin forms     */
/* (tracking, newsletter). Theme pages may restyle; tokens only.        */
/* ================================================================== */
.lima-track .field, .lima-newsletter .field { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-4); }
.lima-track label, .lima-newsletter label { font: 600 var(--fs-caption) / 1.3 var(--font-body); color: var(--lima-ink); }
.lima-track .input, .lima-newsletter .input {
  width: 100%; min-height: var(--h-input); padding: 0 var(--sp-4);
  border: var(--border-control) solid var(--lima-control); border-radius: var(--radius-control);
  background: var(--lima-white); color: var(--lima-ink);
  font: 400 var(--fs-body) / 1.3 var(--font-body);
}
.lima-track .input:focus-visible, .lima-newsletter .input:focus-visible { outline: 3px solid var(--lima-orange); outline-offset: 2px; border-color: var(--lima-navy); }
.lima-track .input--err, .lima-newsletter .input--err { border-color: var(--lima-danger); }
.lima-track .hint, .lima-newsletter .hint { font-size: var(--fs-small); color: var(--lima-ink-soft); }
.lima-track .err, .lima-newsletter .err { font-size: var(--fs-caption); color: var(--lima-danger); }
.lima-track .btn, .lima-newsletter .btn {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--h-btn); padding: 0 var(--sp-5);
  border: var(--border-control) solid transparent; border-radius: var(--radius-control);
  font: 600 17px / 1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lima-track .btn--primary, .lima-newsletter .btn--primary { background: var(--lima-cobalt); color: var(--lima-white); border-color: var(--lima-cobalt); }
.lima-track .btn--primary:hover, .lima-newsletter .btn--primary:hover { background: var(--lima-navy); border-color: var(--lima-navy); }
.lima-track .btn[disabled], .lima-newsletter .btn[disabled] { opacity: .5; cursor: not-allowed; }
.lima-track .fineprint, .lima-newsletter .fineprint { margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--lima-ink-soft); }

/* Honeypot: off-screen, never display:none (some bots skip hidden fields). */
.lima-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pills (26px) and tags (24px) as in components.md */
.lima-track .pill, .lima-track .tag {
  display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--radius-pill);
  font: 600 var(--fs-small) / 1 var(--font-body); letter-spacing: .02em; white-space: nowrap;
}
.lima-track .pill { min-height: var(--h-pill); }
.lima-track .tag  { min-height: var(--h-tag); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .05em; }
.lima-track .pill-pre,  .lima-track .tag-pre   { background: var(--lima-pre-bg);   color: var(--lima-pre-fg); }
.lima-track .pill-blue, .lima-track .tag-blue  { background: var(--lima-blue-bg);  color: var(--lima-blue-fg); }
.lima-track .tag-ok    { background: var(--lima-ok-bg);    color: var(--lima-ok-fg); }
.lima-track .tag-warn  { background: var(--lima-pre-bg);   color: var(--lima-pre-fg); }
.lima-track .tag-crit  { background: var(--lima-crit-bg);  color: var(--lima-crit-fg); }
.lima-track .tag-muted { background: var(--lima-muted-bg); color: var(--lima-muted-fg); }

.lima-track .lbl { display: block; margin: var(--sp-5) 0 var(--sp-2); font: 600 var(--lbl) / 1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--lima-ink-soft); }

/* ------------------------------------------------------------------ */
/* Order tracking (mockup screen 06)                                   */
/* ------------------------------------------------------------------ */
.lima-track { display: grid; gap: var(--sp-4); }
.lima-track__form, .lima-track__order {
  background: var(--lima-white); border: 1px solid var(--lima-line); border-radius: var(--radius-card);
  padding: var(--sp-5); box-shadow: none;
}
.lima-track__order:focus { outline: none; }
.lima-track__order:focus-visible { outline: 3px solid var(--lima-orange); outline-offset: 2px; }
.lima-track__result:empty { display: none; }

.lima-track__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.lima-track__number { font: 700 28px / 1.02 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--lima-navy); }
.lima-track__date { font-size: var(--fs-caption); color: var(--lima-ink-soft); }
.lima-track__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

/* Vertical timeline: done = navy check, current = cobalt ring, future = grey */
.lima-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.lima-timeline__step {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: var(--sp-3); align-items: center;
  min-height: var(--touch); padding: var(--sp-1) 0;
}
.lima-timeline__step::before {
  content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--lima-line);
}
.lima-timeline__step:first-child::before { top: 50%; }
.lima-timeline__step:last-child::before { bottom: 50%; }
.lima-timeline__step.is-done::before { background: var(--lima-navy); }
.lima-timeline__dot {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--lima-line); background: var(--lima-white); color: var(--lima-white);
}
.lima-timeline__dot svg { width: var(--w-icon-sm); height: var(--w-icon-sm); }
.is-done    .lima-timeline__dot { background: var(--lima-navy); border-color: var(--lima-navy); }
.is-current .lima-timeline__dot { border: 3px solid var(--lima-cobalt); box-shadow: inset 0 0 0 3px var(--lima-white); background: var(--lima-cobalt); }
.is-future  .lima-timeline__dot { border-color: var(--lima-line); background: var(--lima-surface); }
.lima-timeline__label { font: 500 var(--fs-body) / 1.3 var(--font-body); color: var(--lima-ink); }
.is-current .lima-timeline__label { font-weight: 700; color: var(--lima-cobalt); }
.is-future  .lima-timeline__label { color: var(--lima-ink-soft); }
.lima-timeline__state { font-size: var(--fs-small); color: var(--lima-ink-soft); }
.is-current .lima-timeline__state { color: var(--lima-cobalt); font-weight: 600; }

/* Info box + items + estimate */
.lima-track .infobox {
  display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-radius: 12px; font-size: var(--fs-caption);
}
.lima-track .infobox svg { width: var(--w-icon); height: var(--w-icon); flex: none; }
.lima-track .infobox p { margin: 0; }
.lima-track .infobox--blue { background: var(--lima-blue-bg); color: var(--lima-blue-fg); }
.lima-track .infobox--blue a { color: var(--lima-cobalt); font-weight: 600; }

.lima-track__items { list-style: none; margin: 0; padding: 0; display: grid; }
.lima-track__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name qty" "meta qty";
  column-gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--lima-line-soft);
}
.lima-track__item:first-child { border-top: 0; }
.lima-track__item-name { grid-area: name; font-weight: 600; }
.lima-track__item-meta { grid-area: meta; font-size: var(--fs-caption); color: var(--lima-ink-soft); }
.lima-track__item-qty  { grid-area: qty; align-self: center; font: 700 20px / 1 var(--font-display); color: var(--lima-navy); }

.lima-estimate { display: flex; gap: var(--sp-3); align-items: flex-start; margin: var(--sp-4) 0 0; font-size: var(--fs-caption); color: var(--lima-ink); }
.lima-estimate svg { width: var(--w-icon); height: var(--w-icon); flex: none; color: var(--lima-navy); }

/* Empty / not-found state (never reveals whether the number exists) */
.lima-track__empty { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--lima-ink-soft); border: 1px solid var(--lima-line); border-radius: var(--radius-card); }
.lima-track__empty svg { width: 40px; height: 40px; margin: 0 auto var(--sp-2); color: var(--lima-sky); }
.lima-track__empty-title { margin: 0 0 var(--sp-1); font-weight: 600; color: var(--lima-ink); }
.lima-track__empty p { margin: 0; font-size: var(--fs-caption); }

/* Skeleton while the lookup runs */
.lima-track__skeleton { display: grid; gap: var(--sp-3); }
.lima-track__skeleton .skeleton { height: 20px; border-radius: var(--radius-control-sm); background: linear-gradient(90deg, var(--lima-muted-bg) 25%, var(--lima-surface) 50%, var(--lima-muted-bg) 75%); background-size: 200% 100%; animation: lima-shimmer 1.2s infinite; }
.lima-track__skeleton .skeleton:first-of-type { width: 50%; height: 28px; }
.lima-track__skeleton .skeleton:nth-of-type(3) { height: 160px; }
@keyframes lima-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .lima-track__skeleton .skeleton { animation: none; } }

@media (min-width: 720px) {
  .lima-track { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
  .lima-track__result:empty { display: block; }
}

/* ------------------------------------------------------------------ */
/* Newsletter / launch notification                                    */
/* ------------------------------------------------------------------ */
.lima-newsletter { display: grid; gap: var(--sp-1); }
.lima-newsletter__row { display: grid; gap: var(--sp-3); }
.lima-newsletter__row .field { margin: 0; }
.lima-newsletter__msg { margin: 0; min-height: 1.3em; font-size: var(--fs-caption); color: var(--lima-ink-soft); }
.lima-newsletter__msg:empty { display: none; }
.lima-newsletter.is-success .lima-newsletter__msg { color: var(--lima-ok-fg); font-weight: 600; }
.lima-newsletter.is-success .lima-newsletter__row { display: none; }
@media (min-width: 720px) {
  .lima-newsletter__row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .lima-newsletter .btn { width: auto; min-width: 160px; }
}

/* ------------------------------------------------------------------ */
/* Counters (render nothing at zero — see SocialProof::counter)       */
/* ------------------------------------------------------------------ */
.lima-counter { font: 700 32px / 1.02 var(--font-display); color: var(--lima-navy); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ */
/* Social-proof toast (real paid orders only)                          */
/* ------------------------------------------------------------------ */
.lima-toast {
  position: fixed; left: var(--sp-4); right: var(--sp-4); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: 420px; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--lima-white); color: var(--lima-ink);
  border: 1px solid var(--lima-line); border-left: 4px solid var(--lima-navy); border-radius: 12px;
  box-shadow: var(--lima-shadow-toast);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lima-toast[hidden] { display: none; }
.lima-toast.is-visible { opacity: 1; transform: none; }
.lima-toast__text { margin: 0; font-size: var(--fs-caption); line-height: 1.4; }
.lima-toast__close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch); height: var(--touch); margin: -6px -6px -6px 0;
  border: 0; border-radius: var(--radius-control-sm); background: transparent; color: var(--lima-ink-soft); cursor: pointer;
}
.lima-toast__close:hover { background: var(--lima-surface); color: var(--lima-ink); }
.lima-toast__close svg { width: 20px; height: 20px; }
@media (min-width: 720px) { .lima-toast { left: auto; right: var(--sp-6); bottom: var(--sp-6); } }
@media (prefers-reduced-motion: reduce) { .lima-toast { transition: none; transform: none; } }