/* ==========================================================================
   ANGKORKEY STOREFRONT — "Sunny pocket app" theme
   Warm greige ground, white rounded surfaces, marigold for the one main action,
   lilac / blush / butter category cards, orange for highlight words and sale marks.
   Type: Outfit (Latin) with Kantumruy Pro carrying Khmer.
   ========================================================================== */

/* ==========================================================================
   1. ROOT & THEME TOKENS
   ========================================================================== */
:root,
.theme-light {
  color-scheme: light;

  /* Ground and surfaces */
  --paper: #eeeae4;          /* page ground: warm greige */
  --paper-1: #f6f3ef;        /* raised ground (bars, sheets) */
  --paper-2: #f6f3ef;
  --surface: #ffffff;        /* cards, inputs, chips */
  --surface-2: #f4f1ec;      /* inset wells (qty box, image wells) */
  --line: rgba(64, 52, 36, .10);
  --line-strong: rgba(64, 52, 36, .18);

  /* Ink */
  --ink: #22201d;
  --ink-soft: #3d3934;
  --muted: #6f685f;          /* 5.2:1 on --paper, 5.9:1 on white */

  /* Brand colour roles */
  --sun: #f7c043;            /* marigold: the one primary action, active states */
  --sun-deep: #efb021;       /* pressed / hover marigold */
  --sun-soft: #fbe9b7;       /* butter card, soft selection wash */
  --on-sun: #22201d;         /* text on marigold: 10.6:1 */
  --accent: #f0662a;         /* orange: highlight words, sale marks (large text only) */
  --accent-ink: #c2470f;     /* orange that reads as small text on white / pastels */
  --lilac: #e4ddfa;
  --lilac-ink: #5b48b0;
  --blush: #f7dbd3;
  --blush-ink: #b93a2e;
  --butter: #fbe9b7;
  --butter-ink: #8a5a00;
  --sage: #dfe8d2;
  --sage-ink: #3f6b2a;

  /* Legacy names the page templates still read. They now resolve to the sunny palette:
     --blue is the readable accent (text, focus), the button fill is --sun. */
  --blue: #c2470f;
  --blue-dark: #a33a0b;
  --blue-subtle: rgba(247, 192, 67, .22);
  --lime: #f7c043;
  --glass: var(--surface);
  --glass-strong: var(--surface);
  --glass-border: var(--line);
  --glass-rim: 0 0 0 0 transparent;
  --focus: #22201d;

  /* Depth: soft, offset, warm */
  --shadow: 0 24px 60px -24px rgba(74, 56, 28, .28);
  --shadow-sm: 0 10px 28px -14px rgba(74, 56, 28, .22);
  --shadow-xs: 0 2px 6px -2px rgba(74, 56, 28, .14);
  --glow: 0 10px 22px -12px rgba(201, 140, 0, .75);  /* amber glow under marigold */

  --radius-xl: 32px;
  --radius-lg: 26px;
  --radius-md: 20px;
  --radius-sm: 14px;

  --font: "Outfit", "Kantumruy Pro", system-ui, sans-serif;

  /* Motion and button tokens: one vocabulary for every storefront page.
     Press = scale(.97) over 160ms ease-out; color/state changes = 200ms ease. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --btn-h: 54px;       /* primary action height */
  --btn-h-sm: 44px;    /* compact primary (sticky bars) and minimum touch target */
  --btn-radius: 999px; /* buttons are pills */
  --btn-icon-radius: 999px; /* icon buttons are circles, like the reference's day chips */

  --text-body: #3d3934;
  --text-comment: #6f685f;
  --text-high-contrast: #22201d;
  --text-high-contrast-rgb-value: 34, 32, 29;
}

html.dark,
.theme-dark {
  color-scheme: dark;

  --paper: #1b1916;
  --paper-1: #221f1b;
  --paper-2: #221f1b;
  --surface: #29261f;
  --surface-2: #322e27;
  --line: rgba(243, 236, 226, .09);
  --line-strong: rgba(243, 236, 226, .18);

  --ink: #f4eee5;
  --ink-soft: #ddd5c9;
  --muted: #a79e91;

  --sun: #f7c043;
  --sun-deep: #ffd166;
  --sun-soft: rgba(247, 192, 67, .16);
  --on-sun: #22201d;
  --accent: #ff8a52;
  --accent-ink: #ff9a66;
  --lilac: #34304a;
  --lilac-ink: #c9bdfb;
  --blush: #45302b;
  --blush-ink: #ffb3a6;
  --butter: #423820;
  --butter-ink: #ffd679;
  --sage: #2f3a28;
  --sage-ink: #bfe0a6;

  --blue: #ff9a66;
  --blue-dark: #ffb185;
  --blue-subtle: rgba(247, 192, 67, .16);
  --lime: #f7c043;
  --focus: #f7c043;

  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .7);
  --shadow-sm: 0 12px 30px -16px rgba(0, 0, 0, .65);
  --shadow-xs: 0 2px 6px -2px rgba(0, 0, 0, .5);
  --glow: 0 10px 22px -12px rgba(201, 140, 0, .85);

  --text-body: #ddd5c9;
  --text-comment: #a79e91;
  --text-high-contrast: #f4eee5;
  --text-high-contrast-rgb-value: 244, 238, 229;
}

/* ==========================================================================
   2. BASE & UTILITIES
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
/* No visible scrollbars anywhere on the storefront, at any screen size. Pages and panels still
   scroll with wheel, touch and keyboard; only the bar is hidden. */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0; height: 0; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color .4s cubic-bezier(.16, 1, .3, 1), color .3s ease;
  position: relative;
  caret-color: var(--accent);
}
/* The theme is solid colour, not frosted glass: no blur anywhere on the storefront. */
html body * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.locked { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
::selection { background: var(--sun); color: var(--on-sun); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

.hidden { display: none !important; }
.font-display { font-family: var(--font); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Old dark-mode backdrop: retired with the glass theme. */
.silk-bg { display: none !important; }

/* .glass / .glass-strong are kept as class names; they are now plain warm surfaces. */
.glass {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.glass-strong {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  position: relative;
}

.product-card,
.category-card,
.cart-item-card,
.summary-card,
.empty-cart-card,
.site-header,
.mobile-nav {
  position: relative;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1), background-color .25s ease;
}

/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  z-index: 30;
  top: 12px;
  left: 12px;
  right: 12px;
  max-width: 1180px;
  margin: auto;
  height: 64px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
/* A solid strip behind the floating header, from the top of the screen to the header's bottom
   edge, so content scrolling up never shows above or around the pill. Its height is the
   header's top offset plus its height at each breakpoint (70 phone, 76 tablet, 82 desktop). */
.header-cover {
  position: fixed;
  z-index: 29;
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  background: var(--paper);
  pointer-events: none;
}
@media (max-width: 699px) { .header-cover { height: 70px; } }
@media (min-width: 900px) { .header-cover { height: 82px; } }
.site-header.nav-scroll-hidden {
  transform: translateY(calc(-100% - 20px));
}
.brand {
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .2s ease;
}
.brand-logo-img,
.brand img {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover;
  flex-shrink: 0;
}
/* The mark: the temple-spire A from the Angkor wordmark, drawn through a mask: black A on a
   marigold disc in both themes. */
.brand-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #f7c043;
  display: grid;
  place-items: center;
}
.brand-mark::after {
  content: "";
  width: 56%;
  height: 56%;
  background: #22201d;
  -webkit-mask: url("../../logo/angkorkey-a-mask.png") center / contain no-repeat;
  mask: url("../../logo/angkorkey-a-mask.png") center / contain no-repeat;
}
/* The wordmark: "Angkor" drawn through a mask so it takes the theme ink, then "key" set to sit on
   the wordmark's baseline (78% down the image) at the same lowercase height. */
.brand--wordmark { gap: 0; padding-left: 8px; }
.brand-wordmark {
  --wm-h: 30px;
  display: block;
  height: var(--wm-h);
  aspect-ratio: 595 / 192;
  flex-shrink: 0;
  background: var(--ink);
  -webkit-mask: url("../../logo/angkor-wordmark-crop.png") center / contain no-repeat;
  mask: url("../../logo/angkor-wordmark-crop.png") center / contain no-repeat;
}
.brand-key {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  align-self: flex-end;
  margin: 0 0 3.3px -1px;
}
.brand-name { font-weight: 600; letter-spacing: -.01em; }
.brand-name::after { content: "."; color: var(--accent); }
.desktop-nav { display: none; }
.header-actions { display: flex; gap: 6px; align-items: center; }
.icon-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--btn-icon-radius);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  position: relative;
  font-size: 1.2rem;
}
.icon-btn:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { background: var(--sun-soft); border-color: transparent; }
}

/* Theme toggle icon: one SVG. CSS shows the resting sun or moon, so the right one appears with no
   JavaScript. While the theme changes, the morph script (templates/frontend/main.html) hides them and
   animates .tm-live, then hands back to CSS. */
.theme-morph { display: block; width: 1em; height: 1em; overflow: visible; }
.theme-morph .tm-moon { display: none; }
html.dark .theme-morph .tm-sun { display: none; }
html.dark .theme-morph .tm-moon { display: inline; }
.theme-morph .tm-live { display: none; transform-box: view-box; transform-origin: 12px 12px; }
.theme-morph .tm-live-rays line { transform-box: view-box; transform-origin: 12px 12px; }
/* While morphing, only the live group shows. !important because the dark-mode rule above would otherwise keep the resting moon on screen. */
.theme-morph.is-morphing .tm-static { display: none !important; }
.theme-morph.is-morphing .tm-live { display: inline; }

.bag-count {
  position: absolute;
  right: -2px;
  top: -2px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--surface);
  font-size: .62rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
}

/* ==========================================================================
   4. MAIN CONTAINER, HEADINGS, BUTTONS
   ========================================================================== */
main { max-width: 1200px; margin: 0 auto; padding: 100px 16px 120px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font); font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
/* Retired: small uppercase labels above headings. Kept as plain muted text if any remain. */
.eyebrow { margin: 0 0 8px; font-size: .85rem; font-weight: 500; color: var(--muted); }

/* PRIMARY BUTTON. One recipe for every main action on the storefront: Add to Bag,
   Checkout, Shop now. Product-page (.buy-btn) and cart (.cart-cta) buttons are the
   same component with their own markup, and read these same tokens. */
.primary-btn {
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--sun);
  color: var(--on-sun);
  min-height: var(--btn-h);
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--glow);
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
  text-decoration: none;
}
.primary-btn:active { transform: scale(0.97); }
.primary-btn[disabled], .primary-btn.disabled { opacity: .45; pointer-events: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .primary-btn:hover { background: var(--sun-deep); }
}
.primary-btn.light { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }
.text-link {
  border: 0; background: none; font-size: .9rem; font-weight: 500; color: var(--ink);
  padding: 6px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  transition: color 200ms ease, transform 160ms var(--ease-out);
}
.text-link:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .text-link:hover { color: var(--accent-ink); } }

/* ==========================================================================
   5. HOME INTRO: greeting + round category picker
   ========================================================================== */
.home-intro { padding: 8px 2px 4px; }
.home-title {
  font-size: clamp(2.1rem, 8.4vw, 3.6rem);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -.035em;
  margin: 0 0 10px;
  max-width: 14ch;
}
.home-title .hl { color: var(--accent); }
.home-sub {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 38ch;
  margin: 0 0 22px;
}

/* The category picker reads like the reference's week strip: a label over a round chip. */
.cat-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  margin: 0 -16px;
  padding: 4px 16px 10px;
  scroll-snap-type: x proximity;
  /* Scrollbars are hidden storefront-wide, so the row fades at its right edge to say "more this way". */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.cat-dot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 68px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 500;
  text-align: center;
  scroll-snap-align: start;
  transition: color .2s ease;
}
.cat-dot-face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 1.5rem;
  color: var(--ink);
  transition: transform 160ms var(--ease-out), background-color .2s ease, box-shadow .2s ease;
}
.cat-dot-face img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.cat-dot-label {
  max-width: 100%;
  line-height: 1.2;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) { .cat-dot { width: 80px; } }
.cat-dot.is-active { color: var(--ink); }
.cat-dot.is-active .cat-dot-face { background: var(--sun); color: var(--on-sun); box-shadow: var(--glow); }
.cat-dot:active .cat-dot-face { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .cat-dot:hover { color: var(--ink); }
  .cat-dot:hover .cat-dot-face { box-shadow: 0 0 0 3px var(--sun-soft), var(--shadow-xs); }
}

/* ==========================================================================
   6. HERO: promotion carousel (Embla). One full-width photo at a time, the
   title and its marigold button set on the photo, arrows on the sides, dots below.
   ========================================================================== */
.hero-banner-carousel {
  position: relative;
  margin: 4px auto 0;
}
.embla__viewport {
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
.embla__container {
  display: flex;
  touch-action: pan-y pinch-zoom;
}
.embla__slide {
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
}
.embla__slide__link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  color: #fff;
  text-decoration: none;
}
@media (min-width: 700px) { .embla__slide__link { aspect-ratio: 21 / 9; } }
@media (min-width: 1100px) { .embla__slide__link { aspect-ratio: 5 / 2; } }

.embla__slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* No photo (or it failed to load): a calm marigold field with a sun instead of a stock picture. */
.embla__slide__link.is-sun { background: var(--sun); color: var(--on-sun); }
.embla__slide__link.is-sun::before {
  content: "";
  position: absolute;
  right: 8%;
  top: 50%;
  width: 26%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fbd56e;
  box-shadow: 0 0 0 18px rgba(255, 255, 255, .3), 0 0 0 38px rgba(255, 255, 255, .16);
}

/* Bottom scrim so the title reads on any photo. */
.banner-scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 70%;
  background: linear-gradient(to top, rgba(20, 16, 10, .82), rgba(20, 16, 10, .4) 55%, transparent);
  pointer-events: none;
}
.embla__slide__link.is-sun .banner-scrim { display: none; }

.banner-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
@media (min-width: 700px) { .banner-content { padding: 32px 40px 36px; gap: 18px; } }
.banner-text-group { max-width: 34ch; }
.banner-title {
  margin: 0 0 6px;
  font-size: clamp(1.45rem, 4.2vw, 2.6rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: inherit;
}
.banner-subtitle {
  margin: 0;
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  line-height: 1.45;
  color: inherit;
  opacity: .88;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.banner-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--on-sun);
  font-size: .95rem;
  font-weight: 500;
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.banner-cta-btn iconify-icon { font-size: 1.1rem; }
@media (max-width: 699px) { .banner-cta-btn { min-height: 42px; padding: 0 18px; font-size: .9rem; } }
.embla__slide__link.is-sun .banner-cta-btn { background: var(--ink); color: var(--paper); }
.embla__slide__link:active .banner-cta-btn { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .embla__slide__link:hover .banner-cta-btn { background: var(--sun-deep); }
  .embla__slide__link.is-sun:hover .banner-cta-btn { background: var(--ink-soft); }
}

/* Arrows: white circles inside the frame, vertically centred. Shown on wide screens only;
   phones swipe. */
.embla__button {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .92);
  color: #22201d;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .25s ease, transform 160ms var(--ease-out), background-color .2s ease;
}
.embla__button--prev { left: 18px; }
.embla__button--next { right: 18px; }
@media (min-width: 700px) {
  .embla__button { display: flex; opacity: 0; }
  .hero-banner-carousel:hover .embla__button,
  .embla__button:focus-visible { opacity: 1; }
}
@media (hover: none) and (min-width: 700px) { .embla__button { opacity: 1; } }
.embla__button[hidden] { display: none !important; }
.embla__button:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .embla__button:hover { background: var(--sun); } }

/* Dots under the frame; the current one stretches into a marigold pill. */
.embla__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin-top: 12px;
}
.embla__dot {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  width: 28px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.embla__dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: transform .3s var(--ease-out), background-color .2s ease;
}
.embla__dot--selected::after { background: var(--sun-deep); transform: scaleX(2.6); }

/* ==========================================================================
   7. SECTIONS & FILTER CHIPS
   ========================================================================== */
.section { padding: 36px 2px 0; }
#shop { margin-top: 36px; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.section-head > div { display: flex; align-items: center; gap: 10px; }
.section-head h2,
.section-head h3,
.section h2 {
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.section-sub { color: var(--muted); font-size: .9rem; max-width: 36ch; line-height: 1.55; }

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  white-space: nowrap;
}
.chip, .chip-pill {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  min-height: 40px;
  padding: 8px 18px;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.chip:active, .chip-pill:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .chip:hover, .chip-pill:hover { background: var(--sun-soft); border-color: transparent; }
}
.chip.active,
.chip-pill.active {
  background: var(--sun);
  border-color: transparent;
  color: var(--on-sun);
}

/* Search input wrapper */
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 18px;
  gap: 10px;
  box-shadow: var(--shadow-xs);
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.search-input-wrap:focus-within { border-color: var(--sun); }
.search-input-wrap iconify-icon { font-size: 1.2rem; color: var(--muted); flex-shrink: 0; }
.search-input-wrap input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 14px 0;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  min-width: 0;
}

/* ==========================================================================
   8. PRODUCT RAIL & CARDS
   Pastel cards rotate lilac / blush / butter / white like the reference's journal cards.
   ========================================================================== */
.product-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 3px 0 18px;
}
.product-card {
  --card-bg: var(--surface);
  --card-ink: var(--ink-soft);
  --tag-ink: var(--ink);
  background: var(--card-bg);
  border: 0;
  border-radius: var(--radius-lg);
  padding: 8px 8px 14px;
  box-shadow: var(--shadow-xs);
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
@media (hover: hover) and (pointer: fine) {
  .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
}
.product-card[hidden] { display: none !important; }
.product-visual {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 20px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
}
.product-visual img {
  /* Pinned to the square box, so a tall photo can't grow past it and be clipped. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
/* Touch screens have no real hover: the card presses in under the finger instead, which
   answers the tap at once while the product page loads, then the page transition takes over. */
@media (hover: none) and (pointer: coarse) {
  .product-card { -webkit-tap-highlight-color: transparent; }
  .product-card:active { transform: scale(.97); transition-duration: .12s; }
}
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .product-card:active { transform: none; opacity: .85; }
}

.badge {
  position: absolute;
  z-index: 3;
  left: 10px;
  top: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface);
  font-size: .72rem;
  font-weight: 500;
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.badge.sale { background: var(--accent-ink); color: #fff; }
html.dark .badge.sale { background: #c2470f; }
.badge.soldout { background: var(--ink); color: var(--paper); }

/* Fallback art when a product has no photo: one calm sun mark, not fake hardware. */
.case-shape, .buds-shape, .cable-shape, .sleeve-shape {
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 14px var(--sun-soft);
}
.buds-shape .bud { display: none; }

.product-copy { padding: 12px 6px 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-line { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-line h3 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}
.product-line h3 .direct-link {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.price {
  font-size: .98rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}
.price .price-sale { color: var(--accent-ink); }
/* Brand: quiet grey text beside the price. */
.product-tag {
  min-width: 0;
  max-width: 55%;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Legacy kicker (brand above name): no longer rendered by the card. */
.product-kicker { display: none; }
.swatches { display: flex; margin-top: 13px; gap: 6px; }
.swatch { width: 15px; height: 15px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.12), inset 0 0 0 2px rgba(255,255,255,.4); }

/* ==========================================================================
   9. CONTACT WIDGET & FOOTER
   ========================================================================== */
.floating-contact-widget {
  position: fixed;
  z-index: 40;
  right: 18px;
  bottom: 24px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.floating-contact-widget .floating-trigger-btn { pointer-events: auto; }
.floating-contact-widget.open .floating-menu { pointer-events: auto; }
@media (max-width: 899px) {
  .floating-contact-widget {
    right: 14px;
    bottom: max(104px, calc(env(safe-area-inset-bottom) + 96px));
  }
}
.floating-trigger-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 200ms var(--ease-out), background-color 200ms ease, color 200ms ease;
  font-size: 1.4rem;
}
.floating-trigger-btn:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .floating-trigger-btn:hover { background: var(--lilac); }
}
.floating-trigger-btn.active {
  transform: rotate(45deg);
  background: var(--ink);
  color: var(--paper);
}
.floating-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.95);
  transform-origin: bottom right;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.floating-contact-widget.open .floating-menu { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.floating-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 18px 8px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: .92rem;
  font-weight: 500;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.floating-item:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .floating-item:hover { background: var(--sun-soft); } }
.floating-item iconify-icon {
  font-size: 1.1rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sun);
  color: var(--on-sun);
}

.mini-footer {
  padding: 30px 0 max(80px, calc(env(safe-area-inset-bottom) + 70px));
  text-align: center;
  font-size: .8rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 48px;
}
@media (min-width: 900px) { .mini-footer { padding-bottom: 24px; } }

/* ==========================================================================
   10. MOBILE NAVIGATION & OVERLAYS
   The bottom bar is a white floating pill; Bag sits raised in the middle as a marigold disc.
   ========================================================================== */
.mobile-nav {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 440px;
  border-radius: 30px;
  padding: 8px 6px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -18px rgba(74, 56, 28, .45);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .3s;
}
html.dark .mobile-nav { box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); }
.mobile-nav.nav-scroll-hidden { transform: translate(-50%, calc(100% + 24px)); }
.mobile-nav .nav-item {
  border: 0;
  background: transparent;
  min-height: 52px;
  padding: 6px 2px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: .72rem;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: transform 160ms var(--ease-out), color 200ms ease;
}
.nav-item:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .nav-item:hover { color: var(--ink); } }
.nav-item iconify-icon { font-size: 1.4rem; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.nav-item.active { color: var(--ink); font-weight: 600; }
.nav-item.active iconify-icon { color: var(--ink); }

/* The raised Bag disc */
.mobile-nav .nav-bag { justify-content: flex-end; gap: 0; }
.nav-bag-disc {
  width: 58px;
  height: 58px;
  margin-top: -30px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--on-sun);
  display: grid;
  place-items: center;
  position: relative;
  border: 5px solid var(--paper);
  box-shadow: var(--glow);
  transition: transform .2s var(--ease-out);
}
.nav-bag-disc iconify-icon { font-size: 1.5rem; color: var(--on-sun) !important; }
.nav-bag .bag-count { right: -6px; top: -6px; border-color: var(--sun); }
.nav-bag.active .nav-bag-disc { background: var(--ink); color: var(--paper); }
.nav-bag.active .nav-bag-disc iconify-icon { color: var(--paper) !important; }
/* Signature moment: the disc hops once when something lands in the bag. */
.nav-bag-disc.is-bumping, #headerBagBtn.is-bumping { animation: bag-hop .6s var(--ease-out); }
@keyframes bag-hop {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-12px) scale(1.06); }
  55% { transform: translateY(0) scale(.96, 1.04); }
  75% { transform: translateY(-3px) scale(1); }
  100% { transform: translateY(0) scale(1); }
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(34, 32, 29, .38);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
html.dark .overlay { background: rgba(0, 0, 0, .55); }
.overlay.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 620px;
  margin: auto;
  border-radius: 32px 32px 0 0;
  background: var(--paper-1);
  border: 0;
  box-shadow: var(--shadow);
  padding: 10px 20px max(22px, env(safe-area-inset-bottom));
  transform: translateY(105%);
  transition: transform .38s cubic-bezier(.2,.8,.2,1);
  max-height: 88vh;
  overflow-y: auto;
}
.overlay.open .sheet { transform: translateY(0); }
.sheet-handle { width: 44px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto 14px; }
.sheet-image { height: 205px; border-radius: 24px; background: var(--lilac); display: grid; place-items: center; position: relative; overflow: hidden; }
.sheet-image img { max-height: 190px; object-fit: contain; }
.sheet-top { display: flex; justify-content: space-between; gap: 15px; margin: 20px 2px 4px; }
.sheet-top h2 { font-size: 1.6rem; letter-spacing: -.03em; margin-bottom: 4px; }
.sheet-price { font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.rating { font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.option-block { margin-top: 22px; }
.option-head { display: flex; justify-content: space-between; font-size: .9rem; font-weight: 500; margin-bottom: 10px; }
.option-head span:last-child { color: var(--muted); font-weight: 400; }
.color-options, .size-options { display: flex; gap: 9px; flex-wrap: wrap; }
.color-option { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--paper-1); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }
.color-option.active { box-shadow: 0 0 0 2px var(--ink); }
.size-option { border: 1px solid var(--line); border-radius: 999px; min-height: 44px; padding: 10px 18px; background: var(--surface); font-size: .9rem; font-weight: 500; cursor: pointer; color: var(--ink); }
.size-option.active { background: var(--sun); border-color: transparent; color: var(--on-sun); }
.add-btn { width: 100%; margin-top: 24px; }

.search-panel { position: absolute; top: 0; left: 0; right: 0; max-width: 720px; margin: auto; padding: 16px; transform: translateY(-100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.overlay.open .search-panel { transform: translateY(0); }
.search-box { background: var(--paper-1); border: 0; border-radius: 30px; padding: 12px; box-shadow: var(--shadow); }
.search-input { height: 56px; border-radius: 999px; background: var(--surface); display: flex; align-items: center; padding: 0 8px 0 18px; gap: 10px; border: 1px solid var(--line); }
.search-input:focus-within { border-color: var(--sun); }
.search-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; }
.search-close { width: var(--btn-h-sm); height: var(--btn-h-sm); flex-shrink: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; font-size: 1.2rem; color: var(--muted); transition: transform 160ms var(--ease-out), color 200ms ease, background-color 200ms ease; }
.search-close:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .search-close:hover { color: var(--ink); background: var(--surface-2); } }
.search-results {
  max-height: min(62vh, 520px);
  overflow-y: auto;
  padding: 14px 8px 4px;
  color: var(--muted);
  font-size: .9rem;
}
.search-results strong { color: var(--ink); display: block; margin-bottom: 8px; font-weight: 500; }
.search-quick-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; margin-bottom: 12px; }
.search-status { padding: 14px 0; margin: 0; color: var(--muted); font-size: .9rem; }
.search-suggestions { margin-top: 8px; }
.result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  transition: background .15s ease;
}
.result-row:hover,
.result-row:focus-visible { background: var(--sun-soft); outline: none; }
.result-row img {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: contain; background: #fff;
  border-radius: 14px;
  background: #fff;
}
.result-details { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.result-name { overflow: hidden; color: var(--ink); font-size: .95rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.result-category { color: var(--muted); font-size: .8rem; }
.result-price { flex: 0 0 auto; color: var(--ink); font-size: .92rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* TOAST. The one notification for the whole storefront (window.KeyzApp.showToast).
   A white card that drops from the top edge and leaves the same way: a transition, not
   keyframes, so a second toast mid-animation retargets instead of restarting. A plain message
   is one row (icon, text, optional action); "added to bag" also shows the piece and offers
   Keep shopping / View bag. Swipe it up or sideways to dismiss (gesture in main.html). */
.toast {
  position: fixed;
  z-index: 200;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  width: calc(100vw - 24px);
  max-width: 440px;
  padding: 12px 10px 12px 14px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  touch-action: none;   /* we handle the drag ourselves */
  user-select: none;
  -webkit-user-select: none;
  transform: translate(-50%, calc(-100% - 24px));
  transition: opacity 120ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s linear 220ms;
}
.toast.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 160ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s;
}
.toast.is-item { padding: 12px; }
/* While a finger holds it, it follows 1:1 with no easing. */
.toast.is-dragging { transition: none; }
.toast-row { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.toast-icon { flex-shrink: 0; font-size: 1.35rem; }
.toast[data-type="success"] .toast-icon { color: var(--sun-deep); }
.toast[data-type="error"] .toast-icon { color: var(--blush-ink); }
.toast[data-type="info"] .toast-icon { color: var(--lilac-ink); }
.toast-message { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-action {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--sun);
  color: var(--on-sun);
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.toast-action:active { transform: scale(0.97); }
.toast-action[hidden], .toast-close[hidden], .toast-item[hidden], .toast-buttons[hidden] { display: none; }
.toast-close {
  flex-shrink: 0; width: 36px; height: 36px; margin-left: auto; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 1.15rem; display: grid; place-items: center; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .toast-close:hover { color: var(--ink); background: var(--surface-2); } }
/* The added piece */
.toast-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; margin-top: 10px; padding: 8px; border-radius: 16px; background: var(--surface-2); }
.toast-item img { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: #fff; }
.toast-item img[hidden] { visibility: hidden; display: block; }
.toast-item-text { min-width: 0; }
.toast-item-text b { display: block; font-weight: 500; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-item-text span { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-item strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.toast-buttons { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 10px; }
.toast-keep, .toast-view {
  min-height: 46px; border-radius: 999px; display: grid; place-items: center;
  font: inherit; font-weight: 500; font-size: .95rem; cursor: pointer; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.toast-keep { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.toast-view { border: 0; background: var(--sun); color: var(--on-sun); }
.toast-keep:active, .toast-view:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .toast-keep:hover { background: var(--surface-2); }
  .toast-view:hover { background: var(--sun-deep); }
}

/* FOCUS. One ring for every interactive control on the storefront. */
:is(a, button, input, select, textarea, [tabindex]):focus-visible,
:is(.icon-btn, .primary-btn, .chip, .chip-pill, .text-link, .banner-cta-btn, .search-close, .nav-item,
    .floating-item, .embla__button, .embla__dot, .page-btn, .toast-action, .cat-dot):focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 3px;
}
.embla__slide__link:focus-visible { outline: 3px solid var(--sun); outline-offset: -6px; border-radius: var(--radius-xl); }
/* A text field inside a pill: the pill shows focus (marigold edge + soft ring), so the field
   itself draws no outline -- otherwise a square box appears inside the rounded pill. */
:is(.search-input-wrap, .search-input, .demo-search, .hdr-search) input:focus,
:is(.search-input-wrap, .search-input, .demo-search, .hdr-search) input:focus-visible { outline: none; }

/* PAGINATION. Round buttons, the current page is marigold. */
.page-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: .92rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.page-btn:active { transform: scale(0.95); }
.page-btn.is-current { background: var(--sun); border-color: transparent; color: var(--on-sun); cursor: default; }
.page-btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .page-btn:not(.is-current):hover { background: var(--sun-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.show { transform: translate(-50%, 0); transition: opacity 150ms ease, visibility 0s; }
  .primary-btn:active, .icon-btn:active, .chip:active, .chip-pill:active, .banner-cta-btn:active,
  .nav-item:active, .page-btn:active, .toast-action:active, .floating-trigger-btn:active,
  .floating-item:active, .embla__button:active { transform: none; }
  .nav-bag-disc.is-bumping, #headerBagBtn.is-bumping { animation: none; }
}

/* ==========================================================================
   11. SHOPPING CART PAGE (shared pieces; cart.html carries its own layout)
   ========================================================================== */
.cart-page-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px 0 max(110px, calc(env(safe-area-inset-bottom) + 90px));
}
.cart-header-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cart-header-title h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 500; letter-spacing: -.03em; margin: 0 0 4px; color: var(--ink); }
.cart-header-sub { font-size: .92rem; color: var(--muted); margin: 0; }
.cart-count-pill { font-size: .85rem; font-weight: 500; padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }

.empty-cart-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 48px 24px;
  max-width: 480px;
  margin: 32px auto;
  box-shadow: var(--shadow-sm);
}
.empty-cart-icon-wrap {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--sun);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: var(--on-sun);
}
.empty-cart-icon-wrap iconify-icon { font-size: 2.2rem; color: var(--on-sun); }
.empty-cart-title { font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; margin: 0 0 8px; color: var(--ink); }
.empty-cart-desc { font-size: .95rem; color: var(--muted); max-width: 32ch; margin: 0 0 24px; line-height: 1.5; }
.empty-cart-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sun);
  color: var(--on-sun);
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: .98rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform .2s, background .2s;
}
.empty-cart-cta:hover { background: var(--sun-deep); }
.empty-cart-cta iconify-icon { font-size: 1.1rem; }

.cart-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 860px) {
  .cart-grid { grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }
}
.cart-items-list { display: flex; flex-direction: column; gap: 12px; }
.cart-item-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 12px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  align-items: center;
  box-shadow: var(--shadow-xs);
}
@media (max-width: 500px) { .cart-item-card { grid-template-columns: 72px 1fr; gap: 12px; } }
.cart-item-image { position: relative; width: 80px; height: 80px; border-radius: 16px; background: #fff; overflow: hidden; display: grid; place-items: center; flex-shrink: 0; }
@media (max-width: 500px) { .cart-item-image { width: 72px; height: 72px; } }
.cart-item-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cart-item-info { min-width: 0; }
.cart-item-name { font-weight: 500; font-size: 1rem; color: var(--ink); text-decoration: none; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; line-height: 1.25; }
.cart-item-name:hover { color: var(--accent-ink); }
.cart-item-meta { color: var(--muted); font-size: .82rem; margin-top: 3px; }
.cart-item-price { color: var(--ink); font-weight: 600; font-size: 1rem; margin-top: 5px; font-variant-numeric: tabular-nums; }
.cart-item-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 500px) {
  .cart-item-actions { grid-column: 1 / -1; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; }
}
.qty-stepper { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); padding: 3px; border-radius: 999px; }
.qty-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: transparent; border: 0; color: var(--ink); cursor: pointer; font-size: 1rem; transition: background .15s; }
.qty-btn:hover { background: var(--surface); }
.qty-value { font-weight: 600; font-size: .95rem; min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.remove-btn { border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; transition: color .2s, background .2s; }
.remove-btn:hover { color: var(--blush-ink); background: var(--blush); }

.summary-card { background: var(--surface); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); position: sticky; top: 100px; }
.summary-card h3 { font-size: 1.15rem; font-weight: 500; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px; color: var(--ink); }
.summary-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: .95rem; }
.summary-row.total { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 16px; margin-bottom: 18px; }
.summary-row.total span:last-child { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.delivery-options-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.delivery-option { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: all .2s cubic-bezier(.16, 1, .3, 1); }
.delivery-option:hover { background: var(--sun-soft); }
.delivery-option.is-selected { border-color: var(--sun) !important; background: var(--sun-soft) !important; }
.delivery-option input[type="radio"] { accent-color: var(--sun-deep); margin-right: 8px; }
.checkout-btn { width: 100%; min-height: var(--btn-h); border-radius: 999px; background: var(--sun); color: var(--on-sun); border: 0; font-weight: 500; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: transform .2s, background .2s; text-decoration: none; }
.checkout-btn:hover { background: var(--sun-deep); }

/* Category & Brand Grid */
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .category-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 900px) { .category-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.category-card {
  --card-bg: var(--surface);
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 10px 10px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: var(--ink);
}
.category-grid > .category-card:nth-child(4n+1) { --card-bg: var(--lilac); }
.category-grid > .category-card:nth-child(4n+2) { --card-bg: var(--blush); }
.category-grid > .category-card:nth-child(4n+3) { --card-bg: var(--butter); }
@media (hover: hover) and (pointer: fine) {
  .category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
}
.category-card:active { transform: scale(.97); }
.category-card-visual {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 12px;
  display: grid;
  place-items: center;
  position: relative;
  background: #fff;
}
.category-card-visual.visual-blue, .category-card-visual.visual-peach,
.category-card-visual.visual-lime, .category-card-visual.visual-grey { background: #fff; }
.category-card-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; transition: transform .5s ease; }
.category-card h3 { font-weight: 500 !important; font-size: 1.05rem !important; padding: 0 4px; }
.category-card p { padding: 0 4px; font-size: .85rem !important; }

/* Checkout Details Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(34, 32, 29, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  display: grid;
  place-items: center;
  padding: 16px;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal-card { background: var(--paper-1); border-radius: var(--radius-xl); max-width: 480px; width: 100%; padding: 24px; box-shadow: var(--shadow); max-height: 90vh; overflow-y: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: 6px; color: var(--ink); }
.form-input { width: 100%; min-height: 48px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); outline: none; }
textarea.form-input { border-radius: 20px; }
.form-input:focus { border-color: var(--sun); }

/* Error pages (404 / 429 / 500): a sun with the code on it, one sentence, the way back. */
.error-wrap {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 8px;
}
.error-sun {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--on-sun);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 18px var(--sun-soft), 0 0 0 36px rgba(247, 192, 67, .12);
  margin-bottom: 44px;
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.error-title { font-size: clamp(1.9rem, 6vw, 2.8rem); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 12px; max-width: 18ch; }
.error-title .hl { color: var(--accent); }
.error-text { color: var(--muted); font-size: 1.02rem; line-height: 1.55; max-width: 40ch; margin: 0 0 28px; }
.error-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 899px) {
  /* Bag lives in the bottom bar on phones. */
  #headerBagBtn { display: none; }
}
@media (max-width: 699px) {
  main {
    padding-top: 88px;
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
    padding-left: 16px;
    padding-right: 16px;
  }
  #filtersContainer { margin-top: 8px; }
  .site-header { top: 10px; left: 10px; right: 10px; height: 60px; padding: 0 8px 0 10px; }
  .brand { font-size: 1.2rem; }
  .brand-logo-img, .brand img { width: 38px !important; height: 38px !important; }
  .brand-wordmark { --wm-h: 26px; }
  .brand-key { font-size: 22.5px; margin-bottom: 2.9px; }
  .product-rail { gap: 10px; }
  .product-card { padding: 6px 6px 12px; border-radius: 22px; }
  .product-visual { border-radius: 17px; }
  .product-copy { padding: 10px 4px 0; gap: 8px; }
  .product-line h3 { font-size: .94rem; }
  .price { font-size: .92rem; }
  .product-tag { font-size: .76rem; }
  .badge { font-size: .7rem; padding: 4px 9px; left: 8px; top: 8px; }
  .section-head h2, .section-head h3, .section h2 { font-size: 1.35rem; }
  .chips { gap: 8px; padding: 2px 1px 10px; }
}
@media (max-width: 360px) {
  main { padding-left: 12px; padding-right: 12px; }
  .product-rail { gap: 8px; }
  .product-line h3 { font-size: .88rem; }
  .product-meta { flex-wrap: wrap; }
  .product-tag { max-width: 100%; }
}
@media (min-width: 700px) {
  main { padding-left: 24px; padding-right: 24px; }
  .product-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .product-card { padding: 10px 10px 16px; }
  .product-line h3 { font-size: 1.05rem; }
}
@media (min-width: 900px) {
  .site-header { top: 18px; padding: 0 10px 0 14px; }
  .desktop-nav { display: flex; gap: 4px; font-size: .95rem; font-weight: 500; }
  .desktop-nav a { padding: 10px 18px; border-radius: 999px; color: var(--muted); transition: background-color .2s ease, color .2s ease; }
  .desktop-nav a:hover { color: var(--ink); background: var(--surface-2); }
  .desktop-nav a.active { background: var(--sun); color: var(--on-sun); }
  .mobile-nav { display: none; }
  main { padding-top: 120px; padding-bottom: 40px; }
  .product-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .sheet { border-radius: 32px; bottom: 24px; }
  .home-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 40px; }
  .home-intro .home-title, .home-intro .home-sub { grid-column: 1; }
  .home-intro .cat-strip { grid-column: 1 / -1; margin: 6px 0 0; padding: 4px 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   PAGE TRANSITIONS
   Same-origin navigations (including Back) crossfade instead of hard-cutting.
   The header and mobile nav keep their own layer so only the page content fades.
   Browsers without cross-document view transitions just navigate as before.
   ========================================================================== */
/* The opt-in (@view-transition { navigation: auto; }) lives inline in main.html's <head>:
   here, Chrome ignored it whenever both pages shared this cached file. */
.site-header { view-transition-name: site-header; }
.mobile-nav { view-transition-name: mobile-nav; }
.pd-mobile-bar { view-transition-name: pd-bar; }   /* product page's Add to Bag bar (phones) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .22s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* Chrome that exists on only one side of a navigation moves out of / into the screen edge
   it belongs to, instead of fading where it stands over the next page's content. Opening a
   product on a phone: the header slides up and away, the bottom nav sinks down while the
   Add to Bag bar rises into its place -- the way a native app pushes a detail screen. Back
   plays the same in reverse. (:only-child = there is no counterpart on the other page.) */
::view-transition-old(site-header):only-child { animation: vt-off-top .24s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(site-header):only-child { animation: vt-on-top .32s cubic-bezier(.16, 1, .3, 1) both; }
::view-transition-old(mobile-nav):only-child,
::view-transition-old(pd-bar):only-child { animation: vt-off-bottom .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(mobile-nav):only-child,
::view-transition-new(pd-bar):only-child { animation: vt-on-bottom .34s cubic-bezier(.16, 1, .3, 1) .06s both; }
@keyframes vt-off-top    { to   { transform: translateY(calc(-100% - 24px)); opacity: 0; } }
@keyframes vt-on-top     { from { transform: translateY(calc(-100% - 24px)); opacity: 0; } }
@keyframes vt-off-bottom { to   { transform: translateY(calc(100% + 24px)); opacity: 0; } }
@keyframes vt-on-bottom  { from { transform: translateY(calc(100% + 24px)); opacity: 0; } }

/* Phones, opening or leaving a product page (tagged in main.html's <head>): the whole group
   slides, and the picture inside it holds still. `translate` is used rather than `transform`,
   because the browser positions the group with `transform`. */
@media (max-width: 899px) {
  html:active-view-transition-type(to-detail, from-detail)::view-transition-old(site-header),
  html:active-view-transition-type(to-detail, from-detail)::view-transition-new(site-header),
  html:active-view-transition-type(to-detail, from-detail)::view-transition-old(mobile-nav),
  html:active-view-transition-type(to-detail, from-detail)::view-transition-new(mobile-nav),
  html:active-view-transition-type(to-detail, from-detail)::view-transition-old(pd-bar),
  html:active-view-transition-type(to-detail, from-detail)::view-transition-new(pd-bar) { animation: none; }

  html:active-view-transition-type(to-detail)::view-transition-group(site-header) { animation: vt-g-off-top .24s cubic-bezier(.4, 0, 1, 1) both; }
  html:active-view-transition-type(to-detail)::view-transition-group(mobile-nav) { animation: vt-g-off-bottom .22s cubic-bezier(.4, 0, 1, 1) both; }
  html:active-view-transition-type(to-detail)::view-transition-group(pd-bar) { animation: vt-g-on-bottom .34s cubic-bezier(.16, 1, .3, 1) .06s both; }

  /* Back to the list: the header comes down and the bottom nav comes up together -- same
     moment, same 300ms, steady linear motion -- while the Add to Bag bar leaves the same way. */
  html:active-view-transition-type(from-detail)::view-transition-group(pd-bar) { animation: vt-g-off-bottom .3s linear both; }
  html:active-view-transition-type(from-detail)::view-transition-group(site-header) { animation: vt-g-on-top .3s linear both; }
  html:active-view-transition-type(from-detail)::view-transition-group(mobile-nav) { animation: vt-g-on-bottom .3s linear both; }
}
@keyframes vt-g-off-top    { to   { translate: 0 calc(-100% - 24px); opacity: 0; } }
@keyframes vt-g-on-top     { from { translate: 0 calc(-100% - 24px); opacity: 0; } }
@keyframes vt-g-off-bottom { to   { translate: 0 calc(100% + 24px); opacity: 0; } }
@keyframes vt-g-on-bottom  { from { translate: 0 calc(100% + 24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ==========================================================================
   OPENING A PRODUCT (static/assets/js/product-open.js)
   While the product page and its photo load, the tapped card stays pressed in and, if that
   takes more than a moment, a thin loading line runs across the top of the screen. It creeps
   towards the end while waiting, then fills the rest quickly as the page opens. Kept at the
   end of the file so the pressed state wins over the hover lift on wide screens.
   ========================================================================== */
html .product-card.is-opening,
html .product-card.is-opening:hover { transform: scale(.97); transition: transform .12s ease; }

.po-line {
  position: fixed;
  z-index: 100000;
  top: env(safe-area-inset-top, 0px);   /* below the notch / status bar, not hidden behind it */
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sun);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
/* creeping: fast at first, then slowing, never reaching the end on its own */
.po-line.is-running { transform: scaleX(.85); transition: transform 2.5s cubic-bezier(.1, .7, .3, 1); }
/* ready: from wherever it got to, the rest of the way in a blink */
.po-line.is-running.is-done { transform: scaleX(1); transition: transform .16s ease-out; }

@media (prefers-reduced-motion: reduce) {
  html .product-card.is-opening,
  html .product-card.is-opening:hover { transform: none; }
  /* no growing motion: a steady, half-transparent full-width line */
  .po-line,
  .po-line.is-running,
  .po-line.is-running.is-done { transform: none; transition: none; opacity: .6; }
}

/* The category row's edge fade lifts once the row is scrolled to its end (script in pages/index.html). */
.cat-strip.at-end { -webkit-mask-image: none; mask-image: none; }