/* CASELAB® — components: product card, drawer, modal, forms, accordion, pills, misc */

/* ---- product card (spring lift + crossfade flip) ---- */
.p-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
.p-card { position: relative; transition: transform .25s var(--ease-spring); }
.p-card:hover { transform: translateY(-6px); }
.p-card__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius); background: var(--paper-2);
}
.p-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-card__back { opacity: 0; transition: opacity .2s ease; }
.p-card:hover .p-card__back, .p-card:focus-within .p-card__back { opacity: 1; }
.p-card__link { position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); }
.p-card:hover { box-shadow: none; }
.p-card:hover .p-card__media { box-shadow: var(--shadow-card); }
.p-card__qv {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3;
  min-height: 44px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .25s var(--ease-spring);
}
.p-card:hover .p-card__qv, .p-card__qv:focus-visible { opacity: 1; transform: translateY(0); }
.p-card__info { padding: 12px 2px 0; }
/* balance keeps a two-line name from dropping its last word onto a line of its own */
.p-card__name { font-size: 15px; font-weight: 600; font-family: var(--font-body); letter-spacing: 0; text-wrap: balance; }
.p-card__stars { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; color: var(--gray-10); font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; }
.stars { display: inline-flex; color: var(--amber); }
.stars svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.p-card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price { font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
/* Price, was-price and saving are one wrapping row — on a 2-column phone grid the chip drops to
   its own line rather than hanging off the end of the price. */
.price { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; }
/* BFCM dress: the number you are not paying is printed as loudly as the one you are. */
.price s { color: var(--gray-10); font-weight: 700; font-size: 14px; text-decoration-thickness: 2.5px; text-decoration-color: var(--accent-9); }
.price__save {
  padding: 3px 8px; border-radius: 4px;
  background: var(--accent-9); color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .05em;
}
.p-card__add { width: 44px; height: 44px; background: var(--paper-2); flex: 0 0 auto; }
.p-card__add:hover { background: var(--accent-9); color: #fff; }

/* On a two-column phone grid the price is three tokens wide and the round add button eats
   52px of the row. Trim the numbers so the sale price and the price it is cut from always
   share the first line and the saving takes the second — three lines put the strike-through
   level with the button and read as if the button were sitting on top of it. */
@media (max-width: 559px) {
  .p-card__row { align-items: flex-start; }
  .p-card__row .price { font-size: 13px; gap: 4px 6px; min-width: 0; }
  .p-card__row .price s { font-size: 12px; }
  .p-card__row .price__save { font-size: 11px; padding: 2px 6px; }
}

@media (min-width: 720px) { .p-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; } }
@media (min-width: 1040px) { .p-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- device pills (roving tabs) ---- */
.pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto; min-height: 44px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--gray-6); background: #fff;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .05em;
  transition: background-color .2s, color .2s, border-color .2s, transform .25s var(--ease-spring);
}
.pill:hover { transform: translateY(-2px); border-color: var(--gray-9); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--accent-bright); border-color: var(--ink); }

/* ---- countdown (3 big red-on-black boxes: HRS · MIN · SEC) ---- */
.countdown { display: flex; align-items: center; gap: 8px; }
/* BFCM: the clock is the offer. Red plate, black digits well — three boxes, twice the weight. */
.countdown__box {
  min-width: 74px; padding: 12px 8px 10px; text-align: center;
  background: var(--accent-9); color: #fff; border-radius: 10px;
  box-shadow: inset 0 0 0 2px #000, 0 8px 20px rgba(229, 72, 77, .26);
}
.countdown__num {
  display: block; font-family: var(--font-mono); font-size: 30px; font-weight: 700;
  line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.countdown__unit { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.countdown__sep { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--accent-9); }
/* On a black section the red plate loses its edge — invert it to black-on-red-outline. */
.countdown--on-dark .countdown__box { background: #12080a; box-shadow: inset 0 0 0 2px var(--accent-9); }
.countdown--on-dark .countdown__num { color: var(--accent-bright); }
@media (max-width: 400px) {
  .countdown__box { min-width: 62px; padding: 10px 6px 8px; }
  .countdown__num { font-size: 25px; }
}

/* ---- accordion (FAQ) ---- */
.accordion { border-top: 1px solid var(--gray-5); }
.accordion__item { border-bottom: 1px solid var(--gray-5); }
.accordion__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 4px; text-align: left;
  font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 16px; letter-spacing: -0.01em;
}
.accordion__btn svg { width: 20px; height: 20px; flex: 0 0 auto; transition: transform .25s var(--ease-spring); }
.accordion__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.accordion__panel { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.accordion__panel-inner { padding: 0 4px 22px; color: var(--gray-11); font-size: 15px; max-width: 60ch; }

/* ---- forms ---- */
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; color: var(--gray-11); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--gray-6); border-radius: 10px; background: #fff;
  transition: border-color .2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: none; }

/* ---- cart drawer ---- */
.overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(17, 17, 19, .45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .32s ease;
}
.overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(420px, 92vw); background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform .32s var(--ease-drawer), visibility 0s linear .32s;
}
.cart-drawer.open { transform: translateX(0); visibility: visible; transition: transform .32s var(--ease-drawer); }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--gray-4); }
.cart-drawer__title { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.cart-drawer__title .mono-label { color: var(--gray-10); }
.cart-drawer__ship { padding: 14px 20px; background: var(--paper-2); border-bottom: 1px solid var(--gray-4); }
.cart-drawer__ship p { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.cart-drawer__ship strong { color: var(--accent-11); }
.ship-track { height: 6px; border-radius: 999px; background: var(--gray-5); overflow: hidden; }
.ship-track__fill { height: 100%; width: 0; background: var(--accent-9); border-radius: 999px; transition: width .4s ease; }
.cart-drawer__items { flex: 1; overflow-y: auto; padding: 8px 20px; }
.cart-empty { text-align: center; padding: 48px 0; color: var(--gray-10); }
.cart-empty svg { width: 40px; height: 40px; margin: 0 auto 12px; }
.cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--gray-3); }
.cart-item__img { width: 72px; height: 90px; object-fit: cover; border-radius: 8px; background: var(--paper-2); }
.cart-item__name { font-size: 14px; font-weight: 600; }
.cart-item__variant { font-family: var(--font-mono); font-size: 11px; color: var(--gray-10); letter-spacing: .04em; margin-top: 2px; }
.cart-item__qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 10px; border: 1px solid var(--gray-5); border-radius: 999px; }
.cart-item__qty button { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.cart-item__qty button svg { width: 14px; height: 14px; }
.cart-item__qty span { font-family: var(--font-mono); font-size: 13px; font-weight: 700; min-width: 22px; text-align: center; }
.cart-item__right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.cart-item__remove { color: var(--gray-9); width: 34px; height: 34px; }
.cart-item__remove:hover { color: var(--red); }
.cart-item__remove svg { width: 16px; height: 16px; }
.cart-drawer__foot { border-top: 1px solid var(--gray-4); padding: 16px 20px 20px; }
.cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cart-subtotal .price { font-size: 18px; }
.cart-tax { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-10); margin-bottom: 14px; }
.cart-drawer__foot .btn { margin-bottom: 8px; }
.cart-pay { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.cart-pay .pay-chip { border-color: var(--gray-5); color: var(--gray-11); }

/* ---- quick-view modal ---- */
.qv-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.qv-modal.open { opacity: 1; pointer-events: auto; }
.qv-modal__card {
  width: min(760px, 100%); max-height: 90vh; overflow-y: auto;
  background: #fff; border-radius: 16px;
  display: grid; grid-template-columns: 1fr;
  transform: scale(.96); transition: transform .2s ease;
}
.qv-modal.open .qv-modal__card { transform: scale(1); }
.qv-modal__img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border-radius: 16px 16px 0 0; }
.qv-modal__body { padding: 24px; position: relative; }
.qv-modal__close { position: absolute; top: 12px; right: 12px; background: var(--paper-2); z-index: 2; }
.qv-modal__body h3 { font-size: 24px; margin: 8px 0 6px; }
.qv-modal__body .price { font-size: 17px; }
.qv-modal__desc { color: var(--gray-11); font-size: 14px; margin: 14px 0 20px; }
.qv-modal__actions { display: grid; gap: 8px; }
@media (min-width: 720px) {
  .qv-modal__card { grid-template-columns: 1fr 1fr; }
  .qv-modal__img { border-radius: 16px 0 0 16px; height: 100%; }
}

/* ---- fly-to-cart dot ---- */
.fly-dot {
  position: fixed; z-index: 120; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-9); pointer-events: none;
  transition: transform .6s cubic-bezier(.5, -0.2, .75, .4), opacity .6s;
}

/* ---- cookie notice ---- */
.cookie-notice {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80;
  max-width: 380px; background: var(--ink); color: #d6d6d9;
  border-radius: 12px; padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
  transform: translateY(0); transition: transform .3s, opacity .3s;
}
.cookie-notice[hidden] { display: none; }
.cookie-notice p { font-size: 13px; line-height: 1.45; }
.cookie-notice a { color: var(--accent-bright); text-decoration: underline; }
.cookie-notice .btn { min-height: 40px; padding: 8px 18px; flex: 0 0 auto; }

/* ---- form thank-you (demo submit) ---- */
.form-thanks {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  background: var(--accent-surface); color: var(--accent-11);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .04em;
}
.form-thanks--dark { background: rgba(229, 72, 77, .16); color: var(--accent-bright); }

/* ---- scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---- breadcrumb ---- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-10); }
.breadcrumb a:hover { color: var(--ink); }

/* ---- reduced motion: kill it all ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .announcement__track, .press-marquee__track { animation: none !important; }
  .hero__media img { transform: none !important; }
}

/* ---- custom select (replaces every native <select> in the theme) ----
   HOLIDAY THEME SETTINGS — Shopify port: the control is white-on-black-rule, the panel is a
   deal-night plate. Both take their highlight from --accent-9, so a season swap carries. */
.cs { position: relative; display: inline-block; vertical-align: top; }
/* Slot skins such as `.field select` are more specific than a bare class, so the hidden native
   is addressed through the wrapper to make sure it really collapses to nothing. */
.cs > select.cs__native {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap; pointer-events: none; appearance: none;
}
.cs__btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px; padding: 8px 14px;
  border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; text-align: left;
  transition: border-color .2s, background-color .2s, color .2s;
}
.cs__btn:hover { border-color: var(--accent-9); }
.cs__btn[aria-expanded="true"] { border-color: var(--accent-9); background: var(--accent-2); }
.cs__value { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs__value.is-placeholder { color: var(--gray-10); }
.cs__chev { width: 15px; height: 15px; flex: 0 0 auto; transition: transform .22s var(--ease-spring); }
.cs__btn[aria-expanded="true"] .cs__chev { transform: rotate(180deg); color: var(--accent-9); }

.cs__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  min-width: 100%; width: max-content; max-width: min(320px, calc(100vw - 32px));
  max-height: min(320px, 52vh); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; margin: 0;
  background: #000; border: 2px solid var(--accent-9); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.cs__panel[hidden] { display: none; }
.cs--right .cs__panel { left: auto; right: 0; }
.cs--up .cs__panel { top: auto; bottom: calc(100% + 6px); }

.cs__opt {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .05em;
}
.cs__opt-label { flex: 1 1 auto; }
.cs__opt-note { flex: 0 0 auto; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-9); }
.cs__tick { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0; color: var(--accent-bright); }
.cs__opt.is-active { background: var(--accent-9); color: #fff; }
.cs__opt.is-active .cs__opt-note { color: rgba(255, 255, 255, .8); }
.cs__opt[aria-selected="true"] { font-weight: 700; }
.cs__opt[aria-selected="true"] .cs__tick { opacity: 1; }
.cs__opt.is-active .cs__tick { color: #fff; }
.cs__opt[aria-disabled="true"] { color: var(--gray-9); cursor: not-allowed; text-decoration: line-through; }
.cs__opt[aria-disabled="true"].is-active { background: none; }

/* light panel, for the day a select lands on a dark surface that needs the inverse */
.cs--light .cs__panel { background: #fff; border-color: var(--ink); }
.cs--light .cs__opt { color: var(--ink); }
.cs--light .cs__tick { color: var(--accent-11); }

/* per-slot sizing */
.toolbar .cs { flex: 0 0 auto; }
.filter-bar .cs { flex: 0 1 auto; min-width: 0; }
.filter-bar .cs__btn { min-height: 40px; padding: 6px 12px; font-size: 11px; }
.field .cs { display: block; width: 100%; }
.field .cs__btn { min-height: 48px; border-radius: 10px; padding: 12px 16px; font-size: 13px; }
@media (max-width: 480px) {
  .filter-bar .cs__btn { font-size: 10px; padding: 6px 10px; gap: 6px; }
  .toolbar .cs__btn { font-size: 11px; padding: 8px 12px; }
}