/* merch.css — Merch Meow-tions (merch.billubnb.in), the idea wall. Phone-first, tokens only (no new colours).
   Phone: compact side-by-side idea cards (emoji tile left), 1 column; tablet 2, desktop 3–4 columns of upright cards. */

/* 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 ------------------------------------------------------------------------------------------------------- */
  .merch-hero { position: relative; overflow: clip; padding: var(--space-6) 0 calc(var(--space-6) + var(--sheet-r));
    background: radial-gradient(100% 70% at 92% 4%, color-mix(in srgb, var(--blush) 70%, transparent), transparent 60%),
                linear-gradient(180deg, #FFF2D8 0%, var(--paper) 100%); }
  .merch-hero__inner { display: grid; gap: var(--space-5); align-items: center; }
  .merch-hero__copy { display: grid; gap: var(--space-3); justify-items: start; }
  .merch-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: 12em; text-wrap: balance; }
  .merch-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; white-space: nowrap; }
  .merch-hero .lead { margin: 0; max-width: 34rem; color: var(--ink-2); }
  .merch-hero .eyebrow .i { width: 1.15em; height: 1.15em; }
  .merch-honest { display: inline-flex; gap: .55rem; align-items: flex-start; margin: var(--space-1) 0 0; padding: .7rem 1rem; border-radius: var(--r-md);
    background: var(--sage-tint); font-weight: 700; line-height: 1.45; max-width: 34rem; }
  .merch-honest .i { width: 20px; height: 20px; flex: none; margin-top: .12rem; color: var(--sage-deep); }
  .merch-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
  .merch-hero__art { display: none; }
  .merch-hero__art svg { display: block; width: 100%; height: auto; }
  .m-win { fill: var(--paper-3); } .m-sill { stroke: var(--sun-deep); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
  .m-thin { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .m-tee { fill: var(--sage); stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; }
  .m-peb { fill: var(--sun); }
  .m-s1 { fill: var(--blush); } .m-s2 { fill: var(--sun-soft); stroke: var(--ink); stroke-width: 2; } .m-s3 { fill: var(--apricot); }
  .m-ink { fill: var(--ink); } .m-sun { fill: var(--sun); opacity: .8; }
  @media (min-width: 720px) {
    .merch-hero { padding: var(--space-7) 0 calc(var(--space-7) + var(--sheet-r)); }
    .merch-hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--space-7); }
    .merch-hero__art { display: block; max-width: 400px; width: 100%; justify-self: end; }
  }
  /* tablets: the default headline is 4 lines in Fraunces but 3 in the fallback — reserve the 4th so nothing jumps when the font lands */
  @media (min-width: 720px) and (max-width: 1099px) { .merch-hero h1 { min-height: 4lh; } }
  @media (max-width: 379px) { .merch-hero__ctas .btn { width: 100%; } }

  .merch-promises { margin-bottom: var(--space-7); }
  .wall-head { scroll-margin-top: calc(var(--header-h) + 12px); }
  .wall-head .section-head { margin-bottom: var(--space-4); }

  /* ---- filter chips (same look as the shop's aisles) ----------------------------------------------------------------- */
  .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: 0 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; }
  .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; } }

  /* ---- the wall ----------------------------------------------------------------------------------------------------- */
  .ideas { list-style: none; margin: 0; padding: 18px 0 0; display: grid; gap: var(--space-5) var(--space-4); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 640px) { .ideas { row-gap: var(--space-6); } }
  .idea { --ear-bg: var(--paper-3); display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-3) var(--space-4); padding: var(--space-4); align-items: start; }
  .idea[hidden] { display: none; }
  .idea__art { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 46px 46px var(--r-sm) var(--r-sm); background: var(--sun-soft); overflow: hidden; }
  .idea__art--wear { background: var(--sage-tint); } .idea__art--home { background: var(--apricot); } .idea__art--paper { background: var(--paper-2); }
  .idea__art--cuties { background: var(--blush-soft); } .idea__art--custom { background: var(--sun-soft); } .idea__art--charity { background: var(--blush); }
  .idea__art img { width: 100%; height: 100%; object-fit: cover; }
  .idea__emoji { font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 4px 6px rgba(58, 42, 34, .18)); }
  .idea__body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
  .idea__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0; }
  .idea__cat { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
  .idea__status { padding: .12rem .55rem; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink); font-size: .78rem; font-weight: 800; }
  .idea__status--sampling { background: var(--sun-soft); } .idea__status--making { background: var(--sage-tint); color: var(--sage-deep); }
  .idea__status--available { background: var(--sage-deep); color: var(--on-deep); }
  .idea__title { margin: 0; font-size: 1.15rem; line-height: 1.2; }
  .idea__line { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
  .idea__more summary { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; font-weight: 750; color: var(--ink-2); cursor: pointer; list-style: none;
    text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
  .idea__more summary::-webkit-details-marker { display: none; }
  .idea__more summary::after { content: " +"; white-space: pre; }
  .idea__more[open] summary::after { content: " –"; }
  .idea__more p { margin: .35rem 0 0; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
  .idea__price { margin: 0; font-size: .92rem; color: var(--ink-2); }
  .idea__price strong { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: 1.2rem; color: var(--ink); }
  .idea__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-top: .75rem; border-top: 1px dashed var(--line-strong); }
  .idea__vote { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .4rem .5rem .4rem 1rem; border-radius: var(--r-pill);
    border: 1.5px solid var(--line-strong); background: var(--paper-3); color: var(--ink); font: inherit; font-weight: 780; font-size: .98rem; cursor: pointer;
    transition: background-color var(--dur-1), border-color var(--dur-1), transform var(--dur-1); }
  .idea__vote .i { width: 20px; height: 20px; color: var(--err); transition: transform var(--dur-2) var(--ease-out); }
  .idea__vote:hover { border-color: var(--ink-2); }
  .idea__vote:active { transform: scale(.97); }
  .idea__vote[aria-pressed="true"] { background: var(--blush-soft); border-color: color-mix(in srgb, var(--err) 40%, var(--line-strong)); }
  .idea__vote[aria-pressed="true"] .i { fill: currentColor; }
  .idea__vote.is-pop .i { transform: scale(1.3); }
  .idea__n { display: inline-grid; place-items: center; min-width: 2em; height: 2em; padding: 0 .45em; border-radius: var(--r-pill); background: var(--paper-2);
    font-size: .85rem; font-weight: 850; }
  .idea__ask { display: inline-flex; align-items: center; min-height: 44px; font-weight: 750; font-size: .95rem; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--sun); }
  .idea__ask:hover { color: var(--ink); }
  @media (min-width: 640px) {
    .ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .idea { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; height: 100%; }
    .idea__art { aspect-ratio: 16 / 10; border-radius: 120px 120px var(--r-sm) var(--r-sm); }
    .idea__emoji { font-size: 3.6rem; }
  }
  @media (min-width: 1024px) { .ideas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1360px) { .ideas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (prefers-reduced-motion: reduce) { .idea__vote, .idea__vote .i { transition: none; } .idea__vote.is-pop .i { transform: none; } }

  /* ---- ask section --------------------------------------------------------------------------------------------------- */
  .merch-ask { display: grid; gap: var(--space-6); }
  .merch-ask__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
  .merch-ask__list li { display: flex; gap: .5rem; align-items: flex-start; color: var(--ink-2); }
  .merch-ask__list .i { width: 18px; height: 18px; flex: none; margin-top: .2rem; color: var(--sage-deep); stroke-width: 2.6; }
  /* "Which idea?" has one chip per idea: phones swipe three rows sideways, larger screens scroll a short box. */
  .merch-ask [data-field="topic"] .chiprow { position: relative; display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); justify-content: start;
    gap: .5rem; overflow-x: auto; overscroll-behavior-x: contain; padding: .2rem .1rem .6rem; scroll-padding-inline: .5rem; }
  .merch-ask [data-field="topic"] .chip span { white-space: nowrap; }
  @media (min-width: 900px) {
    .merch-ask { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: start; }
    .merch-ask__copy { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
    .merch-ask [data-field="topic"] .chiprow { display: flex; flex-wrap: wrap; grid-auto-flow: initial; overflow: visible; gap: .4rem; }
    .merch-ask [data-field="topic"] .chip span { min-height: 40px; padding: .35rem .85rem; font-size: .92rem; }
  }
}