/* merch-studio.css (1.28.0) — merch.billubnb.in/apparel (shelves) and /apparel/<slug> (the customiser). Tokens only.
   The garment pictures are white cut-outs: .tint paints a colour through the picture's own shape (mask) and multiplies the photo over
   it, so any colour keeps the folds. Phone: the preview stays pinned under the header while the panel scrolls beneath it. */
@layer sections {
  /* the tint trick (.tint) lives in sites.css — the home page band uses it too */

  /* ---- /apparel hero -------------------------------------------------------------------------------------------------- */
  .ap-hero { position: relative; overflow: clip; padding: var(--space-6) 0 calc(var(--space-6) + var(--sheet-r));
    background: radial-gradient(90% 70% at 88% 10%, color-mix(in srgb, var(--sun-soft) 85%, transparent), transparent 62%), linear-gradient(180deg, #FFF2D8 0%, var(--paper) 100%); }
  .ap-hero__inner { display: grid; gap: var(--space-5); align-items: center; }
  .ap-hero__copy { display: grid; gap: var(--space-3); justify-items: start; }
  .ap-hero h1 { font-family: "Fraunces", "Fraunces Display Fallback", Georgia, serif; margin: 0; font-size: clamp(2.2rem, 1.4rem + 4vw, 4.2rem); line-height: 1.02; text-wrap: balance; }
  .ap-hero h1 em { font-style: normal; background: linear-gradient(transparent 60%, color-mix(in srgb, var(--sun) 75%, transparent) 60% 92%, transparent 92%); }
  .ap-hero .lead { margin: 0; max-width: 34rem; color: var(--ink-2); }
  .ap-hero__art { position: relative; display: block; width: min(100%, 420px); justify-self: center; aspect-ratio: 1 / 1.08; text-decoration: none; }
  .ap-hero__arch { position: absolute; inset: 4% 8% 0; border-radius: 999px 999px var(--r-lg) var(--r-lg); background: var(--paper-3); box-shadow: inset 0 0 0 2px var(--line); }
  .ap-hero__tee { position: absolute; inset: 6% 2% 4%; aspect-ratio: auto; }
  .ap-hero__billu { position: absolute; left: 50%; top: 38%; width: 27%; height: auto; translate: -50% 0; rotate: -4deg; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); }
  .ap-hero__tag { position: absolute; right: 2%; top: 14%; display: inline-flex; gap: .35rem; align-items: center; padding: .45rem .8rem; border-radius: var(--r-pill);
    background: var(--sun); color: var(--sun-ink); font-weight: 800; font-size: .92rem; rotate: 6deg; box-shadow: var(--shadow-1); }
  .ap-hero__tag .i { width: 16px; height: 16px; }
  @media (prefers-reduced-motion: no-preference) {
    .ap-hero__billu { animation: ap-bob 5s var(--ease) infinite alternate; }
    @keyframes ap-bob { to { translate: -50% -4px; rotate: 2deg; } }
  }
  @media (min-width: 820px) {
    .ap-hero { padding: var(--space-7) 0 calc(var(--space-7) + var(--sheet-r)); }
    .ap-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-7); }
  }

  .ap-steps { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-2); counter-reset: none; }
  .ap-steps li { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--r-md); background: var(--paper-2); line-height: 1.45; }
  .ap-steps b { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); font-weight: 800; }
  @media (min-width: 760px) { .ap-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .ap-steps--big { margin-top: var(--space-4); }

  /* ---- the shelf grid ------------------------------------------------------------------------------------------------- */
  .ap-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 720px) { .ap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
  @media (min-width: 1100px) { .ap-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .ap-card[hidden] { display: none; }
  .ap-card__link { display: grid; height: 100%; grid-template-rows: auto 1fr; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3);
    border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2); }
  .ap-card__link:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-strong); color: var(--ink); }
  .ap-card__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .ap-card__art { display: block; padding: 8% 8% 4%; background: radial-gradient(70% 60% at 50% 40%, var(--paper) 0%, var(--paper-2) 100%); }
  .ap-card__body { display: grid; gap: .3rem; align-content: start; padding: .75rem .9rem 1rem; }
  .ap-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.2; }
  .ap-card__line { color: var(--ink-2); font-size: .92rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ap-card__meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .2rem; }
  .ap-card__price { font-weight: 800; font-size: 1.05rem; }
  .ap-dots { display: inline-flex; align-items: center; }
  .ap-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--d); border: 1.5px solid var(--paper-3); box-shadow: 0 0 0 1px var(--line-strong); margin-left: -3px; }
  .ap-dots em { font-style: normal; font-size: .78rem; font-weight: 800; color: var(--ink-3); margin-left: .3rem; }
  .ap-card__go { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; font-weight: 800; font-size: .92rem; color: var(--sage-deep); }
  .ap-card__go .i { width: 16px; height: 16px; transition: translate var(--dur-2) var(--ease-out); }
  .ap-card__link:hover .ap-card__go .i { translate: 3px 0; }
  .ap-grid--mini .ap-card__name { font-size: 1rem; }
  .ap-fine { margin-top: var(--space-5); font-size: var(--step--1); color: var(--ink-3); max-width: 46rem; }
  .ap-ideas { display: grid; gap: var(--space-3); justify-items: start; }
  .ap-back { margin-top: var(--space-5); }

  /* ---- the customiser ------------------------------------------------------------------------------------------------- */
  .studio { padding: var(--space-4) 0 var(--space-6); background: linear-gradient(180deg, #FFF2D8 0, var(--paper) 280px); }
  .studio__grid { display: grid; gap: var(--space-4); align-items: start; }
  .studio__stage { position: sticky; top: var(--header-h); z-index: 6; margin-inline: calc(var(--gutter) * -1); padding: .4rem var(--gutter) .5rem;
    background: color-mix(in srgb, var(--paper) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .stage { display: grid; gap: .5rem; }
  .stage__frame { position: relative; width: min(100%, 36svh); aspect-ratio: 1; margin-inline: auto; border-radius: var(--r-lg);
    background: radial-gradient(65% 55% at 50% 42%, #FFFFFF 0%, var(--paper-2) 100%); box-shadow: inset 0 0 0 1.5px var(--line); overflow: hidden; }
  .stage__poster, .stage__canvas, .stage__three { position: absolute; inset: 0; width: 100%; height: 100%; }
  .stage__poster { inset: 4%; width: 92%; height: 92%; }
  .stage__canvas { display: block; }
  .stage__canvas[hidden], .stage__three[hidden], .stage__poster[hidden] { display: none; }
  .stage__three canvas { display: block; width: 100% !important; height: 100% !important; touch-action: pan-y; cursor: grab; }
  .stage__busy { position: absolute; inset: auto 0 1rem; margin: 0 auto; width: max-content; display: inline-flex; gap: .4rem; align-items: center;
    padding: .45rem .9rem; border-radius: var(--r-pill); background: var(--paper-3); box-shadow: var(--shadow-1); font-weight: 750; font-size: .92rem; }
  .stage__busy[hidden] { display: none; }
  .stage__bar { display: flex; align-items: center; justify-content: center; gap: .75rem; }
  .stage__side { font-weight: 800; font-size: .85rem; color: var(--ink-2); padding: .3rem .7rem; border-radius: var(--r-pill); background: var(--paper-2); }
  .stage__note { display: none; margin: 0; text-align: center; font-size: var(--step--1); color: var(--ink-3); }
  .seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--line); }
  .seg__b { display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; min-width: 64px; justify-content: center; padding: .3rem .9rem; border: 0;
    border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font: inherit; font-weight: 800; cursor: pointer; }
  .seg__b .i { width: 16px; height: 16px; }
  .seg__b[aria-pressed="true"] { background: var(--sage-deep); color: var(--on-deep); }
  .seg__b:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

  .studio__panel { display: grid; gap: var(--space-3); min-width: 0; }
  .crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .9rem; color: var(--ink-3); }
  .crumbs a { color: var(--ink-2); }
  .studio__title { margin: 0; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height: 1.08; }
  .studio__title span { display: block; font-size: .62em; color: var(--sage-deep); }
  .studio__line { margin: 0; color: var(--ink-2); }
  .studio__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
  .studio__price strong { font-size: 1.6rem; font-family: var(--font-display); }
  .studio__price span { color: var(--ink-3); font-size: .95rem; }
  .studio__form { display: grid; gap: var(--space-4); }
  .pane { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--r-lg); background: var(--paper-3); border: 1.5px solid var(--line); min-width: 0; }
  .pane__h { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.3rem; }
  .pane__h b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); font-family: var(--font-text); font-size: 1rem; }

  .tabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-4) * -1); padding: .1rem var(--space-4) .3rem; }
  .tabs::-webkit-scrollbar { display: none; }
  @media (min-width: 560px) { .tabs { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
  .tab { flex: none; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .4rem .95rem; border-radius: var(--r-pill); cursor: pointer;
    border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink); font: inherit; font-weight: 750; font-size: .98rem; }
  .tab .i { width: 18px; height: 18px; }
  .tab[aria-selected="true"] { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--on-deep); }
  .tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .tp { display: grid; gap: var(--space-3); }
  .tp[hidden] { display: none; }
  .tp__lead { margin: 0; color: var(--ink-2); line-height: 1.5; }
  .tp__small { margin: 0; font-size: .92rem; color: var(--sage-deep); font-weight: 700; }
  .billu-row { display: flex; gap: var(--space-3); align-items: center; }
  .billu-row > div { display: grid; gap: .6rem; justify-items: start; }
  .billu-row__img { width: 88px; height: 88px; flex: none; object-fit: cover; border-radius: 999px 999px 18px 18px; background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--line); }
  .filebtn { position: relative; overflow: hidden; cursor: pointer; }
  .filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; }
  .filebtn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
  .linkbtn { border: 0; background: none; padding: .3rem 0; font: inherit; font-weight: 750; color: var(--sage-deep); text-decoration: underline; cursor: pointer; }
  .linkbtn[hidden] { display: none; }

  fieldset.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
  fieldset.chips[hidden] { display: none; }
  fieldset.chips legend, .swatches legend { width: 100%; margin-bottom: .45rem; font-weight: 750; font-size: .98rem; }
  .chips .chip span { min-height: 44px; padding: .45rem .95rem; }
  .f-serif { font-family: var(--font-display); } .f-round { font-family: var(--font-text); } .f-bold { font-family: var(--font-text); font-weight: 900; letter-spacing: .04em; }
  .placement { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: 1.5px dashed var(--line-strong); }
  .spot { position: relative; width: 22px; height: 22px; flex: none; border-radius: 6px 6px 5px 5px; border: 2px solid currentColor; opacity: .85; }
  .spot::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: currentColor; left: 50%; top: 45%; translate: -50% -50%; }
  .spot--left::after { left: 72%; top: 30%; } .spot--right::after { left: 28%; top: 30%; }
  .spot--back { border-style: dashed; }
  .chip--spot span::before { display: none; }
  .chip--spot input:checked + span::before { display: none; }

  .qchips { display: flex; flex-wrap: wrap; gap: .4rem; }
  .qchip { min-height: 40px; padding: .35rem .8rem; border-radius: var(--r-md); border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink);
    font: inherit; font-size: .95rem; font-weight: 650; cursor: pointer; text-align: left; }
  .qchip[aria-pressed="true"] { background: var(--sun); border-color: var(--sun-press); color: var(--sun-ink); }
  .tiles { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .tiles--logo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile { display: grid; gap: .25rem; justify-items: center; padding: .45rem .35rem .5rem; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--paper);
    color: var(--ink); font: inherit; font-size: .82rem; font-weight: 750; line-height: 1.2; cursor: pointer; text-align: center; }
  .tile img, .tile canvas { width: 100%; max-width: 96px; height: auto; aspect-ratio: 1; object-fit: contain; }
  .tile canvas { aspect-ratio: auto; max-height: 72px; object-fit: contain; }
  .tiles--logo .tile { background: var(--paper-2); }
  .tile[aria-pressed="true"] { border-color: var(--sage-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 70%, transparent); }
  .tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .tip { display: flex; gap: .55rem; align-items: flex-start; margin: 0; padding: .7rem .9rem; border-radius: var(--r-md); background: var(--sun-soft); font-size: .95rem; line-height: 1.45; }
  .tip .i { width: 18px; height: 18px; flex: none; margin-top: .15rem; }

  .swatches { display: flex; flex-wrap: wrap; gap: .55rem; }
  .sw { position: relative; display: inline-flex; }
  .sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .sw > span { width: 44px; height: 44px; border-radius: 50%; background: var(--d); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .18), 0 0 0 3px var(--paper-3), 0 0 0 4.5px var(--line-strong);
    transition: box-shadow var(--dur-1), transform var(--dur-1); }
  .sw input:checked + span { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .18), 0 0 0 3px var(--paper-3), 0 0 0 6px var(--sage-deep); transform: scale(1.04); }
  .sw input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 6px; }

  .qty { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
  .qty__l { font-weight: 750; }
  .stepper { display: inline-flex; align-items: center; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--paper); overflow: hidden; }
  .stepper button { width: 46px; height: 46px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.4rem; font-weight: 800; cursor: pointer; }
  .stepper button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
  .stepper input { width: 3.2rem; height: 46px; border: 0; background: transparent; text-align: center; font: inherit; font-size: 1.05rem; font-weight: 800; color: var(--ink); -moz-appearance: textfield; }
  .stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .qty__total { margin: 0 0 0 auto; display: grid; justify-items: end; line-height: 1.1; }
  .qty__total span { font-size: .85rem; color: var(--ink-3); font-weight: 700; }
  .qty__total strong { font-family: var(--font-display); font-size: 1.7rem; }
  .studio__promise { display: flex; gap: .55rem; align-items: flex-start; margin: 0; padding: .7rem .9rem; border-radius: var(--r-md); background: var(--sage-tint); font-weight: 700; line-height: 1.45; }
  .studio__promise .i { width: 18px; height: 18px; flex: none; margin-top: .15rem; color: var(--sage-deep); }
  .studio__ctas { display: grid; gap: .6rem; }

  /* phones/tablets: the pinned preview sits over the top of the page — anything scrolled to or focused stops below it (WCAG 2.4.11) */
  @media (max-width: 999px) { html:has(.studio) { scroll-padding-top: calc(var(--header-h) + 36svh + 76px); } }
  @media (min-width: 700px) and (max-width: 999px) { html:has(.studio) { scroll-padding-top: calc(var(--header-h) + 40svh + 76px); } }
  @media (min-width: 1000px) {
    .studio { padding: var(--space-6) 0 var(--space-7); }
    .studio__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-6); }
    .studio__stage { top: calc(var(--header-h) + var(--space-3)); margin: 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .stage__frame { width: 100%; max-width: 640px; }
    .stage__note { display: block; }
  }
  /* tablets in portrait: a roomier pinned preview */
  @media (min-width: 700px) and (max-width: 999px) { .stage__frame { width: min(100%, 40svh); } }

  /* ---- the order sheet ------------------------------------------------------------------------------------------------ */
  .ap-sheet { width: min(100% - 24px, 520px); max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--paper-3); color: var(--ink);
    box-shadow: var(--shadow-2); overflow: auto; }
  .ap-sheet__card { display: grid; gap: var(--space-3); padding: var(--space-4); }
  .ap-sheet__card[hidden] { display: none; }
  .ap-sheet__head { display: flex; gap: var(--space-3); align-items: center; }
  .ap-sheet__head img { width: 84px; height: 84px; flex: none; border-radius: var(--r-md); background: var(--paper-2); object-fit: contain; }
  .ap-sheet__head h2 { margin: 0; font-size: 1.4rem; }
  .ap-sheet__head p { margin: .2rem 0 0; color: var(--ink-2); font-size: .95rem; line-height: 1.4; }
  .ap-sheet__x { margin-left: auto; align-self: flex-start; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink);
    font-size: 1.6rem; line-height: 1; cursor: pointer; }
  .ap-sheet__lead, .ap-sheet__fine { margin: 0; color: var(--ink-2); line-height: 1.5; }
  .ap-sheet__fine { font-size: var(--step--1); color: var(--ink-3); }
  .ap-sheet__err { margin: 0; padding: .6rem .8rem; border-radius: var(--r-md); background: #FFF4F2; color: var(--err); font-weight: 750; }
  .ap-sheet__err[hidden] { display: none; }
  .ap-sheet .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .ap-sheet__done { text-align: center; justify-items: center; }
  .ap-sheet__done h2 { margin: 0; }
  .ap-sheet__done p { margin: 0; color: var(--ink-2); }
  .ap-sheet__stamp { display: grid; place-items: center; width: 64px; height: 64px; margin: 0; border-radius: 50%; background: var(--sun); color: var(--sun-ink); }
  .ap-sheet__stamp .i { width: 32px; height: 32px; }
  @media (prefers-reduced-motion: no-preference) { .ap-sheet[open] { animation: ap-pop var(--dur-3) var(--ease-out); } @keyframes ap-pop { from { opacity: 0; translate: 0 18px; } } }

  .ap-faq { display: grid; gap: .6rem; margin-top: var(--space-5); max-width: 52rem; }
  .ap-faq details { border-radius: var(--r-md); background: var(--paper-2); padding: .2rem 1rem; }
  .ap-faq summary { cursor: pointer; padding: .8rem 0; font-weight: 800; }
  .ap-faq p { margin: 0 0 .9rem; color: var(--ink-2); }

  .st-toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: var(--z-toast); translate: -50% 20px; opacity: 0; pointer-events: none;
    max-width: min(92vw, 30rem); margin: 0; padding: .75rem 1rem; border-radius: var(--r-md); background: var(--ink); color: var(--paper); font-weight: 700; transition: opacity var(--dur-2), translate var(--dur-2); }
  .st-toast.is-on { opacity: 1; translate: -50% 0; }
}