/* ==========================================================================
   Alan's Heritage — shared components
   buttons · icon buttons · chips & badges · product card · price · quantity · accordion · marquee ·
   search overlay · floating actions · toasts · pagination · breadcrumbs · sunburst motif
   ========================================================================== */
@layer components {

  /* ------------------------------------------------------------------ icons */
  .icon { width: 1.25em; height: 1.25em; flex: none; }

  /* ------------------------------------------------------------------ buttons */
  .btn {
    --btn-h: 3.4rem;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: var(--btn-h);
    padding: 0 1.75rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-body);
    font-size: var(--fs-s);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
    transition: transform 0.5s var(--ease-out), color var(--dur-s), border-color var(--dur-s), box-shadow var(--dur-m) var(--ease-out), background var(--dur-s);
  }
  .btn::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: var(--btn-hover, var(--c-honey));
    border-radius: 50% 50% 0 0 / 130% 130% 0 0;
    transform: translateY(102%);
    transition: transform 0.65s var(--ease-out), border-radius 0.65s var(--ease-out);
  }
  .btn:hover::before, .btn:focus-visible::before { transform: translateY(0); border-radius: 0; }
  .btn:hover, .btn:focus-visible { color: var(--btn-hover-fg, var(--c-ink)); }
  .btn:active { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(0.97); }

  .btn__roll { display: block; height: 1.15em; overflow: hidden; line-height: 1.15; }
  .btn__roll > span { display: block; transition: transform 0.55s var(--ease-out); }
  .btn:hover .btn__roll > span, .btn:focus-visible .btn__roll > span { transform: translateY(-100%); }
  .btn .icon { width: 1.15em; height: 1.15em; transition: transform 0.55s var(--ease-out); }
  .btn:hover .icon--arrow-right, .btn:hover .icon--arrow-up-right { transform: translateX(4px); }

  .btn--primary { --btn-bg: var(--c-gold); --btn-fg: var(--c-ink); --btn-hover: var(--c-cream); box-shadow: 0 10px 30px -14px color-mix(in oklab, var(--c-gold) 70%, transparent); }
  .btn--primary:hover { box-shadow: 0 16px 38px -14px color-mix(in oklab, var(--c-gold) 85%, transparent); }
  .btn--dark { --btn-bg: var(--c-ink); --btn-fg: var(--c-cream); --btn-hover: var(--c-gold); }
  .btn--light { --btn-bg: var(--c-cream); --btn-fg: var(--c-ink); --btn-hover: var(--c-gold); }
  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-hover: var(--fg); --btn-hover-fg: var(--bg); border-color: color-mix(in oklab, var(--fg) 40%, transparent); }
  .btn--ghost:hover { border-color: var(--fg); }
  .btn--whatsapp { --btn-bg: #1faa59; --btn-fg: #fff; --btn-hover: #17874a; --btn-hover-fg: #fff; }
  .btn--sm { --btn-h: 2.6rem; padding: 0 1.2rem; font-size: var(--fs-xs); }
  .btn--lg { --btn-h: 4.1rem; padding: 0 2.3rem; font-size: var(--fs-m); }
  .btn--block { width: 100%; }
  .btn[disabled], .btn[aria-disabled='true'] { opacity: 0.55; pointer-events: none; }
  .btn.is-loading { pointer-events: none; }
  .btn.is-loading .btn__roll { opacity: 0; }
  .btn.is-loading::after {
    content: ''; position: absolute; width: 1.3rem; height: 1.3rem; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite;
  }
  .btn.is-done { --btn-bg: var(--c-leaf); --btn-fg: var(--c-cream); }
  @keyframes spin { to { transform: rotate(1turn); } }

  .btn-link {
    display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--fs-s); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    text-decoration: none; color: var(--fg); padding-block: 0.4rem; border-bottom: 1px solid color-mix(in oklab, var(--fg) 35%, transparent);
    transition: border-color var(--dur-s), gap var(--dur-m) var(--ease-out), color var(--dur-s);
  }
  .btn-link:hover { border-color: var(--accent-text); color: var(--accent-text); gap: 1rem; }

  .icon-btn {
    position: relative; display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; color: inherit;
    transition: background var(--dur-s), transform 0.5s var(--ease-out), color var(--dur-s);
    transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  }
  .icon-btn:hover { background: color-mix(in oklab, currentColor 12%, transparent); }
  .icon-btn .icon { width: 1.4rem; height: 1.4rem; }
  .icon-btn--outline { border: 1px solid color-mix(in oklab, currentColor 30%, transparent); }
  .icon-btn--outline:hover { background: var(--fg); color: var(--bg); }

  /* ------------------------------------------------------------------ chips & badges */
  .chip {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border-radius: var(--radius-pill);
    border: 1px solid var(--line); font-size: var(--fs-s); font-weight: 500; text-decoration: none; color: var(--fg);
    transition: background var(--dur-s), color var(--dur-s), border-color var(--dur-s);
  }
  .chip:hover, .chip[aria-pressed='true'], .chip.is-active { background: var(--fg); color: var(--bg); border-color: var(--fg); }

  .badge {
    display: inline-flex; align-items: center; gap: 0.45em; padding: 0.42em 0.85em; border-radius: var(--radius-pill);
    font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
    background: var(--c-gold); color: var(--c-ink);
  }
  .badge--dark { background: var(--c-ink); color: var(--c-cream); }
  .badge--crimson { background: var(--c-crimson); color: var(--c-cream); }
  .badge--outline { background: transparent; border: 1px solid currentColor; }

  /* hexagon "stamp" used for certifications */
  .hex-icon { display: inline-grid; place-items: center; width: 3.4rem; aspect-ratio: 1 / 1.1547; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--accent); color: var(--accent-fg); }
  .hex-icon .icon { width: 1.35rem; height: 1.35rem; }

  /* ------------------------------------------------------------------ price */
  .price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; font-variant-numeric: tabular-nums lining-nums; }
  .price__current { font-weight: 600; font-size: 1.05em; }
  .price__compare { color: var(--fg-soft); text-decoration: line-through; font-size: 0.9em; font-weight: 400; }
  .price__from { font-size: 0.8em; color: var(--fg-soft); font-weight: 500; letter-spacing: 0.02em; }
  .price__unit { flex-basis: 100%; font-size: var(--fs-xs); color: var(--fg-soft); }
  .price--sale .price__current { color: var(--c-crimson); }
  [data-scheme='dark'] .price--sale .price__current, [data-scheme='cocoa'] .price--sale .price__current { color: var(--c-honey); }

  /* ------------------------------------------------------------------ product card */
  .pcard {
    position: relative; display: flex; flex-direction: column; gap: 1.1rem; color: var(--fg); container-type: inline-size;
  }
  .pcard__media {
    position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-l);
    background: color-mix(in oklab, var(--fg) 8%, var(--bg)); isolation: isolate; transform-style: preserve-3d;
    transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
    box-shadow: var(--shadow-card, 0 1px 0 rgb(0 0 0 / 0.05), 0 20px 44px -28px rgb(21 12 8 / 0.5));
  }
  .pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease-out), filter 0.8s var(--ease-out); }
  .pcard__img--secondary {
    clip-path: polygon(0 100%, 12.5% 100%, 25% 100%, 37.5% 100%, 50% 100%, 62.5% 100%, 75% 100%, 87.5% 100%, 100% 100%, 100% 100%, 0 100%);
    transition: clip-path 0.9s var(--ease-out), transform 1.3s var(--ease-out);
  }
  .pcard__media:hover .pcard__img--primary { transform: scale(1.06); }
  .pcard__media:hover .pcard__img--secondary, .pcard__media:focus-visible .pcard__img--secondary {
    clip-path: polygon(0 -2%, 12.5% 7%, 25% -3%, 37.5% 8%, 50% -2%, 62.5% 7%, 75% -4%, 87.5% 6%, 100% -2%, 100% 102%, 0 102%);
    transform: scale(1.04);
  }
  .pcard__shine {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.5s;
    background: radial-gradient(420px circle at var(--px, 50%) var(--py, 50%), rgb(255 232 180 / 0.28), transparent 42%);
  }
  .pcard__media:hover .pcard__shine { opacity: 1; }
  .pcard__badges { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 3; display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .pcard__title { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.18; letter-spacing: -0.012em; font-weight: 500; font-variation-settings: 'SOFT' var(--heading-soft, 40); text-wrap: balance; }
  .pcard__title a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-m) var(--ease-out); }
  .pcard__title a:hover { background-size: 100% 1px; }
  .pcard__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
  .pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; }
  .pcard__quick {
    position: relative; z-index: 4; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 1.1rem 0 0.9rem; height: 2.75rem; border-radius: var(--radius-pill);
    border: 1px solid color-mix(in oklab, var(--fg) 30%, transparent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    transition: background var(--dur-s), color var(--dur-s), border-color var(--dur-s), transform 0.5s var(--ease-spring);
  }
  .pcard__quick .icon { width: 1.1rem; height: 1.1rem; transition: transform 0.6s var(--ease-spring); }
  .pcard__quick:hover { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); }
  .pcard__quick:hover .icon { transform: rotate(90deg); }
  .pcard__quick:active { transform: scale(0.94); }
  .pcard__quick.is-loading { pointer-events: none; opacity: 0.7; }
  .pcard.is-sold-out .pcard__img { filter: grayscale(0.7) brightness(0.8); }
  .pcard--compact .pcard__media { aspect-ratio: 1; }

  /* ------------------------------------------------------------------ quantity stepper */
  .qty { display: inline-flex; align-items: center; height: 3.2rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--fg) 4%, transparent); }
  .qty__btn { display: grid; place-items: center; width: 3rem; height: 100%; border-radius: var(--radius-pill); color: inherit; transition: background var(--dur-s), transform 0.4s var(--ease-spring); }
  .qty__btn:hover { background: color-mix(in oklab, var(--fg) 10%, transparent); }
  .qty__btn:active { transform: scale(0.86); }
  .qty__btn .icon { width: 1.05rem; height: 1.05rem; }
  .qty__input { width: 2.6rem; height: 100%; text-align: center; background: none; border: 0; font-weight: 600; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; padding: 0; }
  .qty__input::-webkit-inner-spin-button, .qty__input::-webkit-outer-spin-button { appearance: none; margin: 0; }
  .qty__input:focus { outline: 0; }
  .qty--sm { height: 2.5rem; }
  .qty--sm .qty__btn { width: 2.3rem; }
  .qty--sm .qty__input { width: 2rem; font-size: var(--fs-s); }

  /* ------------------------------------------------------------------ accordion */
  .acc { border-top: 1px solid var(--line); }
  .acc:last-child { border-bottom: 1px solid var(--line); }
  .acc__summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.5rem; font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.6rem); font-weight: 450; line-height: 1.25; letter-spacing: -0.01em; font-variation-settings: 'SOFT' var(--heading-soft, 40);
    transition: color var(--dur-s);
  }
  .acc__summary:hover { color: var(--accent-text); }
  .acc__plus { position: relative; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line); transition: background var(--dur-s), transform 0.7s var(--ease-spring), border-color var(--dur-s); }
  .acc__plus::before, .acc__plus::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0.95rem; height: 1.5px; background: currentColor; transition: transform 0.5s var(--ease-out); }
  .acc__plus::after { transform: rotate(90deg); }
  .acc[open] > .acc__summary .acc__plus { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); transform: rotate(135deg); }
  .acc__body { padding-bottom: 1.75rem; max-width: 70ch; color: var(--fg-soft); line-height: 1.75; }
  @supports (interpolate-size: allow-keywords) {
    .acc { interpolate-size: allow-keywords; }
    .acc::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size 0.55s var(--ease-out), opacity 0.45s, content-visibility 0.55s allow-discrete; }
    .acc[open]::details-content { block-size: auto; opacity: 1; }
  }

  /* ------------------------------------------------------------------ marquee */
  .marquee { position: relative; display: flex; overflow: hidden; user-select: none; --gap: clamp(1.5rem, 1rem + 2vw, 3.5rem); --marquee-dur: 40s; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .marquee__track { display: flex; flex: none; align-items: center; gap: var(--gap); padding-right: var(--gap); min-width: 100%; justify-content: space-around; animation: marquee var(--marquee-dur) linear infinite; animation-direction: var(--marquee-dir, normal); }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee__item { display: inline-flex; align-items: center; gap: var(--gap); white-space: nowrap; }
  .marquee__sep { width: 0.9em; height: 0.9em; flex: none; background: currentColor; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); opacity: 0.8; }
  @keyframes marquee { to { transform: translateX(-100%); } }
  @media (prefers-reduced-motion: reduce) { .marquee { mask-image: none; flex-wrap: wrap; } .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; } .marquee__track[aria-hidden='true'] { display: none; } }

  /* ------------------------------------------------------------------ brand sunburst motif (the 60 rays of the badge) */
  .sunburst {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
    &::before {
      content: ''; position: absolute; left: var(--sun-x, 50%); top: var(--sun-y, 50%); width: 220vmax; height: 220vmax; translate: -50% -50%;
      background: repeating-conic-gradient(from var(--sun-spin), color-mix(in oklab, var(--c-gold) var(--sun-strength, 9%), transparent) 0 3deg, transparent 3deg 6deg);
      mask-image: radial-gradient(closest-side, #000 0%, transparent 62%);
      animation: sun-spin 140s linear infinite;
    }
  }
  @keyframes sun-spin { to { --sun-spin: 360deg; } }
  @media (prefers-reduced-motion: reduce) { .sunburst::before { animation: none; } }

  /* ------------------------------------------------------------------ search overlay */
  .search-overlay { position: fixed; inset: 0; width: 100%; height: 100%; z-index: var(--z-overlay); background: color-mix(in oklab, var(--c-ink) 94%, transparent); color: var(--c-cream); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); opacity: 0; transition: opacity 0.4s var(--ease-out), display 0.4s allow-discrete, overlay 0.4s allow-discrete; }
  .search-overlay[open] { opacity: 1; }
  @starting-style { .search-overlay[open] { opacity: 0; } }
  .search-overlay::backdrop { background: transparent; }
  .search-overlay__inner { height: 100%; overflow-y: auto; padding-block: clamp(1.25rem, 4vh, 3rem) 4rem; }
  .search-overlay__bar { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid color-mix(in oklab, var(--c-cream) 22%, transparent); }
  .search-overlay__form { position: relative; flex: 1; display: flex; align-items: center; gap: 1rem; }
  .search-overlay__icon .icon { width: 1.8rem; height: 1.8rem; color: var(--c-gold); }
  .search-overlay__input { flex: 1; background: none; border: 0; color: inherit; font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 3vw, 4rem); letter-spacing: -0.02em; font-weight: 400; padding: 0.4rem 0; font-variation-settings: 'SOFT' var(--heading-soft, 40); }
  .search-overlay__input::placeholder { color: color-mix(in oklab, var(--c-cream) 40%, transparent); }
  .search-overlay__input:focus { outline: 0; }
  .search-overlay__input::-webkit-search-cancel-button { display: none; }
  .search-overlay__body { padding-top: 2.5rem; }
  .search-overlay__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; list-style: none; padding: 0; }
  .search-overlay__chips .chip { color: var(--c-cream); border-color: color-mix(in oklab, var(--c-cream) 25%, transparent); }
  .search-overlay__chips .chip:hover { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); }
  .search-overlay__results { margin-top: 1.5rem; }

  /* ------------------------------------------------------------------ floating actions */
  .floating-actions { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: var(--z-float); display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; pointer-events: none; }
  .floating-actions > * { pointer-events: auto; }
  .floating-actions__top {
    display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-cocoa); color: var(--c-cream); border: 1px solid color-mix(in oklab, var(--c-cream) 20%, transparent);
    opacity: 0; transform: translateY(12px) scale(0.8); transition: opacity 0.4s, transform 0.5s var(--ease-spring), background var(--dur-s); box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.5);
  }
  .floating-actions__top:hover { background: var(--c-gold); color: var(--c-ink); }
  .floating-actions.is-scrolled .floating-actions__top { opacity: 1; transform: none; }
  .floating-actions__sound { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: color-mix(in oklab, var(--c-ink) 88%, transparent); color: var(--c-cream); border: 1px solid color-mix(in oklab, var(--c-cream) 22%, transparent); backdrop-filter: blur(8px); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.5s, transform 0.6s var(--ease-spring), background var(--dur-s), color var(--dur-s); }
  .floating-actions.is-scrolled .floating-actions__sound { opacity: 1; transform: none; pointer-events: auto; }
  .floating-actions__sound:hover { background: var(--c-gold); color: var(--c-ink); }
  .floating-actions__sound .icon { width: 1.25rem; height: 1.25rem; }
  .floating-actions__sound-on { display: none; }
  .floating-actions__sound.is-on .floating-actions__sound-on { display: grid; }
  .floating-actions__sound.is-on .floating-actions__sound-off { display: none; }
  .floating-actions__wa {
    display: inline-flex; align-items: center; gap: 0.6rem; height: 3.4rem; padding: 0 1.2rem 0 1rem; border-radius: var(--radius-pill); background: #1faa59; color: #fff; text-decoration: none;
    font-size: var(--fs-s); font-weight: 600; box-shadow: 0 14px 34px -12px rgb(31 170 89 / 0.7); transition: transform 0.5s var(--ease-spring), background var(--dur-s);
  }
  .floating-actions__wa:hover { transform: translateY(-3px); background: #17874a; }
  .floating-actions__wa { opacity: 0; transform: translateY(14px) scale(0.9); pointer-events: none; transition: opacity 0.5s, transform 0.6s var(--ease-spring), background var(--dur-s); }
  .floating-actions.is-scrolled .floating-actions__wa { opacity: 1; transform: none; pointer-events: auto; }
  .floating-actions.is-scrolled .floating-actions__wa:hover { transform: translateY(-3px); }
  .floating-actions__wa .icon { width: 1.5rem; height: 1.5rem; }
  .floating-actions__wa-label { max-width: 8em; overflow: hidden; white-space: nowrap; transition: max-width 0.6s var(--ease-out), opacity 0.4s; }
  @media (max-width: 749px) {
    .floating-actions__wa { width: 3.4rem; padding: 0; justify-content: center; }
    .floating-actions__wa-label { display: none; }
  }

  /* ------------------------------------------------------------------ toast */
  .toast-region { position: fixed; left: 50%; bottom: max(1.5rem, env(safe-area-inset-bottom)); z-index: calc(var(--z-overlay) + 20); display: grid; gap: 0.6rem; justify-items: center; transform: translateX(-50%); pointer-events: none; }
  .toast {
    display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.25rem; border-radius: var(--radius-pill); background: var(--c-cream); color: var(--c-ink); font-size: var(--fs-s); font-weight: 600;
    box-shadow: 0 18px 44px -14px rgb(0 0 0 / 0.55); animation: toast-in 0.6s var(--ease-spring) both; pointer-events: auto;
  }
  .toast.is-leaving { animation: toast-out 0.35s var(--ease-in-out) both; }
  .toast .icon { color: var(--c-leaf); }
  @keyframes toast-in { from { opacity: 0; transform: translateY(18px) scale(0.9); } }
  @keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(0.96); } }

  /* ------------------------------------------------------------------ breadcrumbs & pagination */
  .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-soft); }
  .breadcrumbs a { text-decoration: none; transition: color var(--dur-s); }
  .breadcrumbs a:hover { color: var(--accent-text); }
  .breadcrumbs__sep { opacity: 0.5; }
  .breadcrumbs [aria-current] { color: var(--fg); }

  .pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
  .pagination a, .pagination span[aria-current] { display: grid; place-items: center; min-width: 2.9rem; height: 2.9rem; padding-inline: 0.8rem; border-radius: var(--radius-pill); border: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: var(--fs-s); transition: background var(--dur-s), color var(--dur-s), border-color var(--dur-s); }
  .pagination a:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .pagination span[aria-current] { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); }

  /* ------------------------------------------------------------------ social list */
  .social-list { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; }
  .social-list a { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid color-mix(in oklab, currentColor 28%, transparent); transition: background var(--dur-s), color var(--dur-s), transform 0.5s var(--ease-spring), border-color var(--dur-s); }
  .social-list a:hover { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); transform: translateY(-3px) rotate(-6deg); }
  .social-list .icon { width: 1.3rem; height: 1.3rem; }

  /* ------------------------------------------------------------------ pulsing "live" dot */
  .pulse-dot { position: relative; display: inline-block; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #35d07f; }
  .pulse-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pulse 2.2s var(--ease-out) infinite; }
  @keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(3.2); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .pulse-dot::after { animation: none; } }

  /* ------------------------------------------------------------------ predictive search results */
  .psearch { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
  .psearch__heading { margin-bottom: 1.1rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-gold); }
  .psearch__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.5rem; list-style: none; margin: 0; padding: 0; }
  .psearch__item { display: grid; grid-template-columns: 5rem 1fr auto; gap: 1rem; align-items: center; padding: 0.6rem; border-radius: var(--radius-l); text-decoration: none; transition: background var(--dur-s), transform 0.6s var(--ease-out); }
  .psearch__item:hover, .psearch__item:focus-visible { background: color-mix(in oklab, var(--c-cream) 9%, transparent); transform: translateX(6px); outline: 0; }
  .psearch__item .icon { opacity: 0.5; transition: opacity var(--dur-s), transform 0.6s var(--ease-spring); }
  .psearch__item:hover .icon, .psearch__item:focus-visible .icon { opacity: 1; transform: rotate(45deg); color: var(--c-gold); }
  .psearch__img { aspect-ratio: 4 / 5; border-radius: var(--radius-m); overflow: hidden; background: color-mix(in oklab, var(--c-cream) 10%, transparent); }
  .psearch__img img { width: 100%; height: 100%; object-fit: cover; }
  .psearch__info { display: grid; gap: 0.25rem; min-width: 0; }
  .psearch__title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; }
  .psearch__price { font-size: var(--fs-s); color: var(--c-honey); }
  .psearch__links { display: grid; gap: 0.55rem; list-style: none; margin: 0 0 2rem; padding: 0; }
  .psearch__links a { display: inline-block; font-size: var(--fs-l); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-s), border-color var(--dur-s); }
  .psearch__links a:hover, .psearch__links a:focus-visible { color: var(--c-gold); border-color: currentColor; outline: 0; }
  .psearch__all { margin-top: 2.25rem; }
  .search-overlay__empty { font-family: var(--font-display); font-size: var(--fs-h4); color: color-mix(in oklab, var(--c-cream) 75%, transparent); }
  .search-overlay__results { transition: opacity var(--dur-s); }
  .search-overlay__results.is-loading { opacity: 0.45; }
  @media (max-width: 749px) { .psearch, .psearch__products { grid-template-columns: minmax(0, 1fr); } }

  /* ------------------------------------------------------------------ quick-add dialog (option picker) */
  .qa {
    position: fixed; inset: 0; margin: auto; width: min(100% - 2rem, 54rem); height: fit-content; max-height: calc(100dvh - 2rem); overflow: auto; border-radius: var(--radius-xl);
    background: var(--c-paper); color: var(--c-bark); box-shadow: 0 60px 120px -40px rgb(0 0 0 / 0.6); z-index: var(--z-overlay);
    opacity: 0; scale: 0.96; transition: opacity 0.4s var(--ease-out), scale 0.7s var(--ease-out), display 0.4s allow-discrete, overlay 0.4s allow-discrete;
  }
  .qa[open] { opacity: 1; scale: 1; }
  @starting-style { .qa[open] { opacity: 0; scale: 0.94; } }
  .qa::backdrop { background: rgb(10 6 4 / 0.6); backdrop-filter: blur(6px); }
  .qa__panel { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .qa__close { position: absolute; top: 1rem; right: 1rem; z-index: 3; background: var(--c-paper); }
  .qa__media { background: var(--c-sand); }
  .qa__media img { width: 100%; height: 100%; min-height: 20rem; object-fit: cover; }
  .qa__body { display: grid; gap: 1.4rem; align-content: center; padding: clamp(1.5rem, 4vw, 3rem); }
  .qa__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -0.02em; font-weight: 450; padding-right: 2.5rem; }
  .qa__price { font-size: 1.5rem; font-family: var(--font-display); font-weight: 500; }
  .qa__opt { display: grid; gap: 0.7rem; }
  .qa__opt legend { margin-bottom: 0.7rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-soft); }
  .qa__vals { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .qa__val { position: relative; cursor: pointer; }
  .qa__val input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .qa__val span { display: inline-flex; align-items: center; min-height: 2.9rem; padding: 0 1.3rem; border-radius: var(--radius-pill); border: 1px solid color-mix(in oklab, var(--fg) 28%, transparent); font-weight: 600; font-size: var(--fs-s); transition: background var(--dur-s), color var(--dur-s), border-color var(--dur-s), transform 0.5s var(--ease-spring); }
  .qa__val:hover span { border-color: var(--fg); }
  .qa__val input:checked + span { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); transform: translateY(-2px); }
  .qa__val input:focus-visible + span { outline: 2px solid var(--c-maroon); outline-offset: 3px; }
  .qa__val.is-unavailable span { color: var(--fg-soft); text-decoration: line-through; border-style: dashed; }
  .qa__val.is-unavailable input:checked + span { color: var(--c-cream); }
  .qa__more { justify-self: start; }
  @media (max-width: 749px) {
    .qa { inset: auto 0 0 0; width: 100%; margin: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; translate: 0 8%; scale: 1; }
    .qa[open] { translate: 0 0; }
    @starting-style { .qa[open] { translate: 0 8%; } }
    .qa__panel { grid-template-columns: minmax(0, 1fr); }
    .qa__media { display: none; }
  }
  .pcard__quick.is-done { background: var(--c-leaf); color: var(--c-cream); border-color: var(--c-leaf); }

  /* ------------------------------------------------------------------ page hero band (collection, search, cart and every content page) */
  .page-hero { position: relative; isolation: isolate; z-index: 2; padding-block: calc(var(--section-y) * 0.5); overflow-x: clip; }
  .page-hero__media { position: absolute; inset: 0; z-index: -1; opacity: 0.32; mask-image: linear-gradient(90deg, transparent 12%, #000 80%); }
  .page-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) contrast(1.05); }
  .page-hero__inner { display: grid; gap: 1.4rem; justify-items: start; }
  .page-hero__title { max-width: 12ch; }
  .page-hero__lead { max-width: 52ch; }


  /* ------------------------------------------------------------------ pill search field (search page, 404) */
  .search-page__form { display: flex; align-items: center; gap: 0.75rem; width: min(100%, 40rem); margin-top: 0.6rem; padding: 0.45rem 0.45rem 0.45rem 1.35rem; border: 1px solid color-mix(in oklab, var(--c-cream) 30%, transparent); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--c-cream) 6%, transparent); transition: border-color var(--dur-s), box-shadow var(--dur-s); }
  .search-page__form:focus-within { border-color: var(--c-gold); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-gold) 22%, transparent); }
  .search-page__icon .icon { width: 1.4rem; height: 1.4rem; color: var(--c-gold); }
  .search-page__input { flex: 1; min-width: 0; padding: 0.6rem 0; background: none; border: 0; color: inherit; font-size: var(--fs-l); }
  .search-page__input:focus { outline: 0; }
  .search-page__input::-webkit-search-cancel-button { display: none; }

  /* ------------------------------------------------------------------ Shopify policy pages (/policies/*) — rendered by Shopify without a section */
  .shopify-policy__container { width: min(100% - 2 * var(--gutter), 860px); margin: 0 auto; padding-block: calc(var(--section-y) * 0.7) calc(var(--section-y) * 1.1); }
  .shopify-policy__title { margin-bottom: 2.5rem; }
  .shopify-policy__title h1 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.03em; }
  .shopify-policy__body { font-size: 1.0625rem; line-height: 1.75; color: var(--fg-soft); }
  .shopify-policy__body > * + * { margin-top: 1.15em; }
  .shopify-policy__body h2, .shopify-policy__body h3 { margin-top: 2em; color: var(--fg); font-size: var(--fs-h4); font-family: var(--font-display); line-height: 1.15; }
  .shopify-policy__body strong { color: var(--fg); }
  .shopify-policy__body a { color: var(--link); text-underline-offset: 0.2em; }
}