/* shop.css — Billu's Purrfect Picks (shop.billubnb.in). Phone-first (base rules = 390 px), tokens only (tokens.css), no new colours.
   The one loud thing per card is the one-liner (serif, big); the buy button is the only gold surface on a card.
   Product photos are hotlinks; white product backgrounds melt into the warm plate (mix-blend-mode: multiply). */

/* The big hero headline re-wrapped when Fraunces arrived (the shared fallback is ~11 % narrower than Fraunces 650 at display sizes, measured
   1263 vs 1416 px for this headline) and pushed the whole page down (CLS 0.41 at 1440 px). This fallback is width-matched for display sizes. */
@font-face { font-family: "Fraunces Display Fallback"; src: local("Times New Roman"), local("Liberation Serif"), local("Georgia");
  size-adjust: 114%; ascent-override: 85.7%; descent-override: 22.4%; line-gap-override: 0%; }

@layer sections {
  /* ---- hero ------------------------------------------------------------------------------------------------------ */
  .shop-hero { position: relative; overflow: clip; padding: var(--space-5) 0 calc(var(--space-5) + var(--sheet-r));
    background: radial-gradient(110% 70% at 90% 0%, color-mix(in srgb, var(--sun) 30%, transparent), transparent 62%),
                linear-gradient(180deg, #FFF2D8 0%, var(--paper) 100%); }
  .shop-hero__inner { display: grid; gap: var(--space-5); align-items: center; }
  .shop-hero__copy { display: grid; gap: var(--space-3); justify-items: start; }
  .shop-hero h1 { font-family: "Fraunces", "Fraunces Display Fallback", Georgia, serif; margin: 0; font-size: clamp(2.05rem, 1.35rem + 3.6vw, 3.9rem); line-height: 1.04; max-width: 13em; text-wrap: balance; }
  .shop-hero h1 em { font-style: normal; background: linear-gradient(transparent 60%, color-mix(in srgb, var(--sun) 72%, transparent) 60% 92%, transparent 92%);
    padding-inline: .05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .shop-hero .lead { margin: 0; max-width: 34rem; color: var(--ink-2); }
  .shop-hero .eyebrow .i { width: 1.15em; height: 1.15em; }
  .shop-hero__art { display: none; }
  .shop-hero__art svg { width: 100%; height: auto; display: block; }
  .h-win { fill: var(--paper-3); } .h-sill { stroke: var(--sun-deep); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
  .h-sun { fill: var(--sun); } .h-beam { fill: var(--sun); opacity: .16; }
  .h-shelf { fill: var(--ink-2); } .h-post { fill: var(--sun-soft); stroke: var(--ink); stroke-width: 2.5; }
  .h-top { fill: var(--sage); stroke: var(--ink); stroke-width: 2.5; } .h-ball { fill: var(--blush); }
  .h-line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
  .h-wand { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
  .h-thin { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
  .h-f1 { fill: var(--blush); } .h-f2 { fill: var(--sage); } .h-f3 { fill: var(--sun); }
  .h-cat { fill: var(--ink); } .h-eye { fill: var(--sun); } .h-whisk { fill: none; stroke: var(--sun-deep); stroke-width: 2; stroke-linecap: round; }
  @media (min-width: 720px) {
    .shop-hero { padding: var(--space-7) 0 calc(var(--space-7) + var(--sheet-r)); }
    .shop-hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--space-7); }
    .shop-hero__art { display: block; max-width: 400px; justify-self: end; width: 100%; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .shop-hero__art .h-f1, .shop-hero__art .h-f2, .shop-hero__art .h-f3 { transform-box: fill-box; transform-origin: 50% 0; animation: shop-sway 5.5s ease-in-out 2; }
    @keyframes shop-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
  }

  /* ---- the honest line (above every list) -------------------------------------------------------------------------- */
  .ptrust { display: flex; gap: .75rem; align-items: flex-start; margin: var(--space-2) 0 0; padding: .9rem 1rem; border-radius: var(--r-md);
    background: var(--sage-tint); border: 1px solid color-mix(in srgb, var(--sage-deep) 18%, transparent); max-width: 38rem; }
  .ptrust .pebble { background: var(--paper-3); }
  .ptrust .pebble .i { color: var(--sage-deep); }
  .ptrust p { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 650; color: var(--ink); }
  .ptrust > div { display: grid; justify-items: start; }
  .ptrust__more { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; color: var(--ink); font-weight: 800; text-decoration: underline;
    text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .ptrust__more .i { width: 17px; height: 17px; }
  .ptrust__more:hover { color: var(--ink); }
  .ptrust--sm { margin-top: var(--space-2); }
  .ptrust--sm p { font-size: .95rem; }

  /* ---- aisle chips (links; shop.js filters in place, ?c= works without JS) ----------------------------------------- */
  .cats { position: sticky; top: calc(var(--header-h) - 1px); z-index: 20; display: flex; gap: .5rem; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; margin: calc(var(--space-2) * -1) calc(var(--gutter) * -1) var(--space-5); padding: .7rem var(--gutter);
    background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .cats::-webkit-scrollbar { display: none; }
  .cat { flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 46px; padding: .45rem 1rem; border-radius: var(--r-pill);
    border: 1.5px solid var(--line-strong); background: var(--paper-3); color: var(--ink); font-weight: 750; font-size: .98rem; text-decoration: none;
    white-space: nowrap; transition: background-color var(--dur-1), border-color var(--dur-1), transform var(--dur-1); }
  .cat:hover { border-color: var(--ink-2); color: var(--ink); }
  .cat:active { transform: scale(.97); }
  .cat[aria-current="true"] { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--on-deep); }
  .cat__n { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .35em; border-radius: var(--r-pill);
    background: var(--paper-2); color: var(--ink-2); font-size: .8rem; font-weight: 800; }
  .cat[aria-current="true"] .cat__n { background: color-mix(in srgb, var(--on-deep) 18%, transparent); color: var(--on-deep); }
  @media (min-width: 900px) { .cats { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }

  /* ---- aisles + the grid of picks ---------------------------------------------------------------------------------- */
  .shop-list.sheet.section { padding-top: var(--space-5); }
  @media (min-width: 720px) { .shop-list.sheet.section { padding-top: var(--space-6); } }
  .aisle { scroll-margin-top: calc(var(--header-h) + 76px); }
  .aisle + .aisle { margin-top: var(--space-8); }
  .aisle__head { display: grid; gap: .25rem; margin-bottom: var(--space-4); }
  .aisle__head h2 { margin: 0; font-size: var(--step-2); line-height: 1.1; }
  .aisle__head p { margin: 0; color: var(--ink-2); font-size: 1.02rem; }
  .picks { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 640px) { .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); } }
  @media (min-width: 1080px) { .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; } }

  /* ---- one pick (card) ------------------------------------------------------------------------------------------- */
  .pick { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); background: var(--paper-3);
    border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
  @media (hover: hover) { .pick:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } }
  .pick[hidden] { display: none; }
  .pplate { position: relative; isolation: isolate; aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--sun-soft); overflow: hidden; }
  .pplate--t1 { background: var(--sage-tint); } .pplate--t2 { background: var(--blush-soft); } .pplate--t3 { background: var(--paper-2); }
  .pplate--t4 { background: color-mix(in srgb, var(--apricot) 55%, var(--paper-3)); }
  .pplate .part { width: 74%; height: auto; max-height: 90%; }
  @media (min-width: 720px) { .pplate { aspect-ratio: 4 / 3; } }
  .pplate.has-img { background: var(--paper-3); }
  .pplate.has-img > .part { display: none; }
  .pplate > img { position: absolute; inset: 7% 9%; width: 82%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
  .pplate > img.is-own { inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
  .pplate.is-fallback > img { display: none; }
  .pplate.is-fallback > .part { display: block; }
  .pplate.is-fallback.pplate--t0 { background: var(--sun-soft); }
  .pbadge { position: absolute; top: .8rem; left: .8rem; z-index: 2; padding: .28rem .7rem; border-radius: var(--r-pill); background: var(--ink); color: var(--paper);
    font-size: .8rem; font-weight: 800; letter-spacing: .01em; }
  /* the drawn art (partials: sites/shop/_parts.html art()) */
  .part .a-sunf { fill: var(--sun); } .part .a-blush { fill: var(--blush); } .part .a-sage { fill: var(--sage); } .part .a-ink { fill: var(--ink); }
  .part .a-paper { fill: var(--paper-3); } .part .a-apricot { fill: var(--apricot); } .part .a-spark { fill: var(--sun-deep); }
  .part .a-shadow { fill: var(--ink); opacity: .08; }
  .part .a-stroke { stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
  .part .a-line { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
  .part .a-thin { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
  .part .a-thick { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }

  .pick__body { flex: 1; display: flex; flex-direction: column; gap: .7rem; padding: var(--space-4) var(--space-4) var(--space-4); }
  .pick__line { order: -1; margin: 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.55rem);
    line-height: 1.2; color: var(--ink); text-wrap: pretty; }
  .pick__line::before { content: ""; display: block; width: 36px; height: 5px; margin-bottom: .65rem; border-radius: 3px; background: var(--sun); }
  .pick__ex { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-2); max-width: 40rem; }
  .pick__title { margin: 0; font-family: var(--font-text); font-size: 1rem; line-height: 1.35; font-weight: 700; }
  .pick__title a { color: var(--ink-2); text-decoration: none; display: inline-block; }
  .pick__title a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .pick__brand { display: block; margin-bottom: .1rem; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
  .pick__hl { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .95rem; color: var(--ink-2); }
  .pick__hl li { display: flex; gap: .45rem; align-items: flex-start; }
  .pick__hl .i { width: 17px; height: 17px; flex: none; margin-top: .18rem; color: var(--sage-deep); stroke-width: 2.6; }
  .pick__for { margin: 0; font-size: .95rem; line-height: 1.4; color: var(--ink); }
  .pick__for span { display: inline-block; margin-right: .35rem; padding: .1rem .55rem; border-radius: var(--r-pill); background: var(--sage-tint); font-size: .78rem;
    font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--sage-deep); }
  .pick__foot { margin-top: auto; display: grid; gap: .7rem; padding-top: .85rem; border-top: 1px dashed var(--line-strong); }
  .pick__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
  .pick__why { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; font-weight: 750; font-size: .95rem; color: var(--ink); text-decoration: none;
    border-bottom: 2px solid var(--sun); }
  .pick__why .i { width: 17px; height: 17px; transition: transform var(--dur-2) var(--ease); }
  .pick__why:hover { color: var(--ink); } .pick__why:hover .i { transform: translateX(3px); }

  .pprice { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; font-size: .88rem; line-height: 1.4; color: var(--ink-2); }
  .pprice strong { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: 1.4rem; font-weight: 800; color: var(--ink); line-height: 1; }
  .pprice--none { align-items: center; font-weight: 700; font-size: .92rem; }
  .pprice--none .i { width: 17px; height: 17px; color: var(--amber); }

  .buy { gap: .5rem; }
  .buy .i { width: 17px; height: 17px; }
  .buy__aff { display: inline-flex; align-items: center; padding: .12rem .45rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 13%, transparent);
    font-size: .74rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }

  /* featured: the aisle's opening pick gets a whole row, side by side, with the start of "why we picked it" (tablets, desktops) */
  @media (min-width: 720px) {
    .pick--featured { grid-column: 1 / -1; flex-direction: row; }
    .pick--featured .pplate { flex: 0 0 42%; aspect-ratio: auto; min-height: 340px; }
    .pick--featured .pick__body { padding: var(--space-6) var(--space-6) var(--space-5); justify-content: center; gap: .85rem; }
    .pick--featured .pick__line { font-size: clamp(1.7rem, 1.1rem + 1.5vw, 2.35rem); max-width: 18em; }
    .pick--featured .pick__foot { margin-top: var(--space-2); }
  }
  @media (max-width: 719px) { .pick__ex { display: none; } }
  /* an aisle of 2–3 picks: the featured one stays an ordinary card (a full-width card + one lonely card below looked unfinished) */
  @media (min-width: 720px) {
    .aisle--few .pick--featured { grid-column: auto; flex-direction: column; }
    .aisle--few .pick--featured .pplate { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
    .aisle--few .pick--featured .pick__body { padding: var(--space-4); justify-content: flex-start; gap: .7rem; }
    .aisle--few .pick--featured .pick__line { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.55rem); }
    .aisle--few .pick--featured .pick__ex { display: none; }
  }

  /* ---- notes, empty state ------------------------------------------------------------------------------------------- */
  .shop-fine { display: flex; gap: .55rem; align-items: flex-start; margin: var(--space-7) 0 0; max-width: 52rem; color: var(--ink-2); }
  .shop-fine .i { width: 18px; height: 18px; flex: none; margin-top: .15rem; }
  .shop-fine a { color: var(--ink); font-weight: 750; }
  .shop-empty { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-6) var(--space-5); max-width: 40rem; }
  .shop-empty h2 { margin: 0; font-size: var(--step-2); }
  .shop-empty p { margin: 0; color: var(--ink-2); }

  /* ---- product page --------------------------------------------------------------------------------------------- */
  .pd { display: grid; gap: var(--space-5); margin-top: var(--space-2); }
  /* phones: the trail stays one line (the product name is the headline right below) — a wrapped trail shifted the page on font load */
  @media (max-width: 719px) { .pd-hero .crumbs .crumbs__last { display: none; } }
  .pd__media .pplate { border-radius: var(--r-lg); aspect-ratio: 4 / 3; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
  @media (min-width: 900px) { .pd__media .pplate { aspect-ratio: 1 / 1; } }
  .pd__media .pplate .part { width: 72%; }
  .pd__info { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
  .page-hero h1.pd__title { order: 0; margin: 0; max-width: none; font-family: var(--font-text); font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem); line-height: 1.35;
    font-weight: 750; color: var(--ink-2); }
  .pd__line { order: -1; margin: 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
    line-height: 1.1; text-wrap: balance; }
  .pd__line::before { content: ""; display: block; width: 48px; height: 6px; margin-bottom: .8rem; border-radius: 3px; background: var(--sun); }
  .pd__hl { font-size: 1rem; }
  .pd__buy { display: grid; gap: .8rem; justify-items: start; padding: var(--space-4); border-radius: var(--r-md); background: var(--paper-3); border: 1px solid var(--line); }
  .pd__buy .pprice strong { font-size: 1.7rem; }
  @media (max-width: 479px) { .pd__buy .buy { width: 100%; } }
  @media (min-width: 900px) {
    .pd { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-7); align-items: start; }
    .pd__media { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
  }
  .pd-why { display: grid; gap: var(--space-4); }
  .pd-why h2 { margin: .4rem 0 0; font-size: var(--step-2); line-height: 1.15; max-width: 20em; }
  .pd-why__ask { display: flex; gap: .5rem; align-items: flex-start; margin-top: var(--space-5); color: var(--ink-2); }
  .pd-why__ask .i { width: 18px; height: 18px; flex: none; margin-top: .15rem; color: var(--wa); }
  @media (min-width: 960px) { .pd-why { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-8); } }
  .picks--3 { margin-top: var(--space-2); }
  .picks--3 .pick--featured { grid-column: auto; flex-direction: column; }
  .picks--3 .pick--featured .pplate { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .picks--3 .pick--featured .pick__line { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.55rem); }
  .pd-all { margin: var(--space-5) 0 0; }

  /* ---- disclosure page --------------------------------------------------------------------------------------------- */
  .dis { display: grid; gap: var(--space-6); }
  .dis__now { --ear-bg: var(--sage-tint); padding: var(--space-5); display: grid; gap: var(--space-2); }
  .dis__big { margin: 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 650; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height: 1.35; }
  .dis__text h2 { font-size: var(--step-1); margin-top: var(--space-6); }
  .dis__text h2:first-child { margin-top: 0; }
  @media (min-width: 960px) {
    .dis { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-8); align-items: start; }
    .dis__now { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  }

  @media (prefers-reduced-motion: reduce) { .pick, .pick:hover { transition: none; transform: none; } }
}

/* Phones: each aisle is a swipe row (mobile.css .swipe). One aisle picked (?c= or a chip) → a plain vertical list. These overrides live in the
   `mobile` layer because the swipe rules they undo live there. */
@layer mobile {
  @media (max-width: 719px) {
    .shop-list.sheet.section { padding-top: var(--space-4); }
    .aisle__row { --sw: min(84%, 340px); }
    .aisle__row > .picks { padding-top: var(--space-2); }
    .shop-list.is-solo .aisle__row { padding-bottom: 0; }
    .shop-list.is-solo .aisle__row > [data-mtrack] { display: grid; overflow: visible; margin-inline: 0; padding: 0; gap: var(--space-5); scroll-snap-type: none; }
    .shop-list.is-solo .aisle__row > [data-mtrack] > * { flex: none; }
    .shop-list.is-solo .aisle__row > .mctl { display: none; }
    .aisle + .aisle { margin-top: var(--space-6); }
  }
}