/* ==============================================================
   RIROTE CANDLE CO. · "KAHAN RAKHOGE?" DESIGN SYSTEM (approved 3 Nov 2026)
   Idea: handmade candles shown in the place they will live — ghar, hotel, office, shaadi, tyohar —
         and packed in the brand's own kraft box with tissue.
   Colour — packaging materials:
     --tissue     #FBF6EC  page; the tissue paper inside every box
     --tissue-2   #F3E8D5  alternate sections; folded tissue
     --kraft      #C49A6C  box surfaces and cups — decoration only, never text
     --kraft-ink  #7A5530  kraft-coloured text that still passes 4.5:1 on tissue
     --choc       #3B2417  text and every order button (13:1 on tissue)
     --choc-2     #5E4433  secondary text (8:1)
     --varq       #B8892B  silver-gold foil: thin rules, seals, focus ring — never text
     --sindoor    #A8321F  prices, errors, "Diwali" highlights (6:1)
     --glow       #FFB648  flame light only
     --leaf       #2F6B3F  success / "delivers here" (6:1)
   Type   — Rozha One for display (printed-box look); Mulish for UI and body (clear at 14–16px on cheap Androids);
            Tiro Devanagari Hindi only for the few Hindi words. Prices use tabular figures.
   Shape  — 3px label corners on buttons and slips (printed labels); circles only for paper cups;
            box = sharp kraft corners. Shadows only on things that sit on a surface.
   Motion — only where it shows cause → effect (CSS here, GSAP in js/motion.js):
            flame flicker (it is a candle) · space switch: warm light sweeps in, candles light one by one ·
            "Haath se bana" pinned scroll film: melt → pour → set → finish → pack → light, then each space lights ·
            counter candles light / photos warm as they arrive · "+ Box": candle flies into its cup (or the order bar) ·
            box opens: tissue folds back · full box shakes. All off under prefers-reduced-motion (static steps instead).
   ============================================================== */
:root {
  --tissue: #FBF6EC; --tissue-2: #F3E8D5; --kraft: #C49A6C; --kraft-2: #A97D50; --kraft-ink: #7A5530;
  --choc: #3B2417; --choc-2: #5E4433; --varq: #B8892B; --sindoor: #A8321F; --glow: #FFB648; --leaf: #2F6B3F;
  --warn-bg: #FFF1D6; --err-bg: #FBE7E2; --ok-bg: #E6F1E8;

  --f-display: 'Rozha One', 'Times New Roman', serif;
  --f-ui: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-hi: 'Tiro Devanagari Hindi', serif;

  --t-xs: .8125rem; --t-sm: .9375rem; --t-md: 1.0625rem; --t-lg: 1.25rem;
  --t-h2: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  --t-display: clamp(2.5rem, 1.6rem + 4.6vw, 4.75rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --r-label: 3px; --r-card: 6px;
  --gutter: 16px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-drop: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: 160ms; --t-med: 320ms; --t-slow: 700ms;
}
@media (min-width: 720px) { :root { --gutter: 28px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body { margin: 0; background: var(--tissue); color: var(--choc); font: 400 var(--t-md)/1.55 var(--f-ui); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--varq); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
[hidden] { display: none !important; }
[lang="hi"] { font-family: var(--f-hi); }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--choc); color: var(--tissue); padding: 8px 12px; }
.skip:focus { left: 8px; }

.kicker { font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--kraft-ink); margin-bottom: var(--s3); }
.kicker [lang="hi"] { letter-spacing: 0; text-transform: none; font-size: 1rem; font-weight: 400; }
.display { font: 400 var(--t-display)/1.02 var(--f-display); letter-spacing: -.01em; }
.display--sm { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.5rem); }
.display__ask { color: var(--sindoor); }
.h2 { font: 400 var(--t-h2)/1.1 var(--f-display); }
.h2:focus { outline: none; }
.sub, .lede { color: var(--choc-2); max-width: 58ch; }
.lede { font-size: var(--t-lg); margin-top: var(--s4); }
.sub { margin-top: var(--s3); }
.label { font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--kraft-ink); }
.opt { font-weight: 600; color: var(--choc-2); font-size: var(--t-xs); text-transform: none; letter-spacing: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5);
  border: 2px solid var(--choc); border-radius: var(--r-label); font-weight: 800; font-size: var(--t-sm); text-decoration: none;
  background: transparent; color: var(--choc); transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 44px; padding: 0 var(--s4); }
.btn--block { width: 100%; }
.btn--wa, .btn--ink { background: var(--choc); color: var(--tissue); }
.btn--wa:hover, .btn--ink:hover { background: #24150C; }
.btn--ghost:hover { background: var(--tissue-2); }
.btn.is-flash { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.ico { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* ---------- festival strip ---------- */
.festival { background: var(--choc); color: var(--tissue); font-size: var(--t-sm); }
.festival__row { display: flex; align-items: center; gap: var(--s3); padding-block: var(--s2); }
.festival__row p { flex: 1; }
.festival__hi { color: var(--glow); font-size: 1.05em; }
.festival a { color: var(--glow); font-weight: 700; white-space: nowrap; }
.festival__x { flex: none; width: 44px; height: 44px; margin-right: -12px; border: 0; background: none; color: var(--tissue); font-size: 1.5rem; line-height: 1; }

/* ---------- masthead ---------- */
.masthead { position: sticky; top: 0; z-index: 20; background: rgba(251, 246, 236, .94); backdrop-filter: saturate(1.2) blur(6px); border-bottom: 1px solid rgba(184, 137, 43, .35); }
.masthead__row { display: flex; align-items: center; gap: var(--s4); min-height: 64px; }
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; margin-right: auto; min-width: 0; }
.brand__seal { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--choc); color: var(--glow);
  font: 1.25rem/1 var(--f-hi); box-shadow: inset 0 0 0 2px var(--choc), inset 0 0 0 3.5px var(--varq); }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name { font: 1.2rem/1.1 var(--f-display); white-space: nowrap; }
.brand__where { font-size: .75rem; color: var(--choc-2); font-weight: 700; }
.masthead__nav { display: none; gap: var(--s5); font-weight: 700; font-size: var(--t-sm); }
.masthead__nav a { text-decoration: none; padding: var(--s2) 0; border-bottom: 2px solid transparent; }
.masthead__nav a:hover { border-color: var(--varq); }
@media (min-width: 960px) { .masthead__nav { display: flex; } }
@media (max-width: 440px) { .masthead .btn span { display: none; } .masthead .btn { padding: 0 var(--s3); } }
@media (max-width: 340px) { .brand__where { display: none; } }

/* ---------- hero: Kahan rakhoge? ---------- */
.hero { padding-block: var(--s6) var(--s7); }
.hero__grid { display: grid; gap: var(--s6); }
/* Mobile: the scene is the point — show it right after the question, before the long paragraph. */
@media (max-width: 959px) {
  .hero__grid { gap: 0; }
  .hero__copy { display: contents; }
  .tabs { order: 3; margin-top: var(--s4); }
  .stage { order: 4; margin-top: var(--s5); }
  .lede { order: 5; margin-top: var(--s5); font-size: var(--t-md); }
}
.tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.tabs [role="tab"] { min-height: 44px; padding: 0 var(--s4); border: 1.5px solid var(--kraft); border-radius: 999px; background: var(--tissue);
  font-weight: 800; font-size: var(--t-sm); color: var(--choc); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.tabs [role="tab"]:hover { border-color: var(--choc); }
.tabs [role="tab"][aria-selected="true"] { background: var(--choc); border-color: var(--choc); color: var(--tissue); }

.stage { margin: 0; position: relative; }
.stage__frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--tissue-2);
  box-shadow: 0 0 0 6px var(--tissue), 0 0 0 7px rgba(184, 137, 43, .5), 0 24px 48px -28px rgba(59, 36, 23, .55); }
.scene { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
.scene.is-on { opacity: 1; }
.scene__svg { width: 100%; height: 100%; }
.scene:not(.is-on) .flame { display: none; }
.stage__card { position: relative; margin: calc(-1 * var(--s6)) var(--s3) 0; padding: var(--s4) var(--s5) var(--s5); background: var(--tissue);
  border: 1px solid rgba(184, 137, 43, .55); border-radius: var(--r-label); box-shadow: 0 10px 24px -18px rgba(59, 36, 23, .6); }
.stage__for { font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--kraft-ink); }
.stage__title { font: 1.45rem/1.15 var(--f-display); margin-top: var(--s1); }
.stage__line { color: var(--choc-2); margin-top: var(--s2); font-size: var(--t-sm); }
.stage__acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
@media (min-width: 960px) {
  .hero { padding-block: var(--s7) var(--s8); }
  .hero__grid { grid-template-columns: 1fr 1.08fr; align-items: center; gap: var(--s7); }
  .stage__card { margin-inline: var(--s5); display: grid; grid-template-columns: 1fr auto; column-gap: var(--s4); align-items: end; }
  .stage__card > p { grid-column: 1; }
  .stage__acts { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; margin-top: 0; }
}

/* ---------- flame ---------- */
.art { width: 100%; height: auto; overflow: visible; }
.flame__body, .flame__core { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.flame__glow { transform-box: fill-box; transform-origin: 50% 70%; animation: glow 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes flicker { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.94, 1.06) skewX(2deg); } 50% { transform: scale(1.03, .96) skewX(-1.5deg); } 75% { transform: scale(.97, 1.04) skewX(1deg); } }
@keyframes glow { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .7; transform: scale(.92); } }

/* ---------- haath se bana ---------- */
.made { background: var(--tissue-2); padding-block: var(--s8); }
.made__steps { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s4); counter-reset: step; }
.step__art { width: 84px; margin-bottom: var(--s3); }
.step__n { font-size: var(--t-xs); font-weight: 800; color: var(--kraft-ink); letter-spacing: .08em; }
.step__n span { font-style: italic; letter-spacing: 0; }
.step__t { font: 1.35rem/1.2 var(--f-display); margin-top: var(--s1); }
.step__d { color: var(--choc-2); font-size: var(--t-sm); margin-top: var(--s1); }
@media (min-width: 720px) { .made__steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .made__steps { grid-template-columns: repeat(6, 1fr); }
  .step { border-left: 1px solid rgba(184, 137, 43, .5); padding-left: var(--s4); } }

/* ---------- counter ---------- */
.counter { padding-block: var(--s8); }
.counter__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4); }
.scent { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1); border: 1.5px solid var(--kraft); border-radius: var(--r-label); background: var(--tissue); flex-wrap: wrap; }
.scent .label { padding: 0 var(--s2); }
.scent [role="radio"] { min-height: 40px; padding: 0 var(--s3); border: 0; border-radius: 2px; background: none; font-weight: 700; font-size: var(--t-sm); }
.scent [role="radio"][aria-checked="true"] { background: var(--choc); color: var(--tissue); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.chip { min-height: 44px; padding: 0 var(--s4); border: 1.5px solid var(--kraft); border-radius: 999px; background: none; font-weight: 700; font-size: var(--t-sm); }
.chip:hover { border-color: var(--choc); }
.chip[aria-pressed="true"] { background: var(--choc); border-color: var(--choc); color: var(--tissue); }
.counter__count { margin-top: var(--s4); color: var(--choc-2); font-size: var(--t-sm); font-weight: 700; }
.counter__list { display: grid; gap: var(--s4); margin-top: var(--s4); }
@media (min-width: 720px) { .counter__list { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
@media (min-width: 1040px) { .counter__list { grid-template-columns: repeat(3, 1fr); } }

.item { display: grid; grid-template-columns: 112px 1fr; gap: var(--s4); padding: var(--s4); background: #FFFCF6; border: 1px solid #E8DAC2; border-radius: var(--r-card); scroll-margin-top: 96px; }
.item:target { box-shadow: 0 0 0 3px var(--varq); }
.item__cup { align-self: start; aspect-ratio: 1; display: grid; place-items: center; padding: 14px 16px 18px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--tissue) 0 52%, transparent 53%), repeating-conic-gradient(#E9D7B5 0 7deg, #DCC497 7deg 14deg); }
.item__body { min-width: 0; }
/* Photo cards: the photo leads, full width, the body sits under it */
.item--photo { grid-template-columns: 1fr; padding: 0; gap: 0; overflow: hidden; }
.item--photo .item__body { padding: var(--s4); }
.item__photo { aspect-ratio: 4 / 3; background: var(--tissue-2); }
.item__photo img, .scene__img { width: 100%; height: 100%; object-fit: cover; }
.cup--photo, .piece__art:has(img) { padding: 6%; }
.cup img, .piece__art img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.cup.is-new img { animation: drop var(--t-med) var(--ease-drop) both; }
@media (max-width: 400px) { .item { grid-template-columns: 84px 1fr; gap: var(--s3); } .item__acts { flex-wrap: wrap; } }
.item__fam { font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kraft-ink); }
.item__name { font: 1.3rem/1.15 var(--f-display); margin-top: 2px; }
.item__line { color: var(--choc-2); font-size: var(--t-sm); margin-top: var(--s2); }
.item__spaces { font-size: var(--t-xs); color: var(--choc-2); margin-top: var(--s2); font-weight: 600; }
.item__spaces .label { margin-right: 4px; }
.item__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px dashed #DCC9A8; }
.price { font: 800 1.15rem/1 var(--f-ui); color: var(--sindoor); font-variant-numeric: tabular-nums; }
.price small { display: block; font-size: var(--t-xs); color: var(--choc-2); font-weight: 600; margin-top: 4px; }
.item__acts { display: flex; gap: var(--s2); }
@media (min-width: 1040px) {
  .item { grid-template-columns: 1fr; }
  .item__cup { width: 150px; margin-inline: auto; }
  .counter__list { align-items: start; }
  .item--feature { grid-column: span 2; grid-template-columns: 220px 1fr; align-items: center; }
  .item--feature .item__cup { width: 220px; }
  .item--feature .item__name { font-size: 1.75rem; }
  .item--photo .item__photo { aspect-ratio: 1; }
  .item--feature.item--photo { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .item--feature.item--photo .item__photo { aspect-ratio: auto; min-height: 100%; }
  .item--feature.item--photo .item__body { align-self: center; padding: var(--s6); }
}
.empty { padding: var(--s6); border: 1.5px dashed var(--kraft); border-radius: var(--r-card); text-align: center; display: grid; gap: var(--s4); justify-items: center; color: var(--choc-2); }

/* ---------- Build a box ---------- */
.buildbox { background: var(--tissue-2); padding-block: var(--s8); }
.buildbox__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); margin-top: var(--s6); }
@media (min-width: 1040px) { .buildbox__grid { grid-template-columns: 1.1fr .9fr 1fr; align-items: start; } }

.seg { border: 0; padding: 0; margin: 0 0 var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.seg legend { margin-bottom: var(--s2); }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg__opt span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 84px; min-height: 52px; padding: var(--s1) var(--s3);
  border: 1.5px solid var(--kraft); border-radius: var(--r-label); background: var(--tissue); font-weight: 800; font-size: var(--t-sm); line-height: 1.2; }
.seg__opt small { font-weight: 600; color: var(--choc-2); font-variant-numeric: tabular-nums; }
.seg__opt input:checked + span { background: var(--choc); border-color: var(--choc); color: var(--tissue); }
.seg__opt input:checked + span small { color: #E9DCC6; }
.seg__opt input:focus-visible + span { outline: 3px solid var(--varq); outline-offset: 2px; }

.box { position: relative; padding-top: 30px; }
.box__lid { position: absolute; top: 0; left: 6%; right: 6%; height: 44px; background: var(--kraft); border: 1px solid var(--kraft-2); transform: rotate(-2.5deg); transform-origin: left bottom;
  display: grid; place-items: center; box-shadow: 0 6px 10px -8px rgba(59, 36, 23, .6); }
.box__lid span { font: 1rem/1 var(--f-display); color: #4A2E1A; letter-spacing: .02em; padding: 4px 12px; border: 1px solid rgba(74, 46, 26, .5); border-radius: 2px; }
.box__tray { position: relative; --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; padding: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .35), transparent 60%), #FFF9EF; border: 12px solid var(--kraft); border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--kraft-2), inset 0 6px 14px -8px rgba(59, 36, 23, .35), 0 20px 30px -22px rgba(59, 36, 23, .7); }
.box__tray[style*="--cols: 2"] { max-width: 300px; margin-inline: auto; }
.cup { aspect-ratio: 1; display: grid; place-items: center; padding: 12% 14% 16%; border: 0; border-radius: 50%;
  background: radial-gradient(circle, #FFFCF6 0 54%, transparent 55%), repeating-conic-gradient(#E9D7B5 0 8deg, #DCC497 8deg 16deg); }
button.cup:hover { box-shadow: 0 0 0 2px var(--sindoor); }
.cup--empty { background: radial-gradient(circle, #F6EDDD 0 54%, transparent 55%), repeating-conic-gradient(#EFE3CC 0 8deg, #E6D6B8 8deg 16deg); opacity: .8; }
.cup.is-new .art { animation: drop var(--t-med) var(--ease-drop) both; }
@keyframes drop { from { transform: translateY(-40%) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.is-shake { animation: shake 360ms ease-in-out; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.box__status { min-height: 1.6em; margin-top: var(--s3); font-weight: 700; font-size: var(--t-sm); color: var(--choc-2); }
.box__status[data-tone="err"] { color: var(--sindoor); }
.box__status[data-tone="ok"] { color: var(--leaf); }
.box__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.box__presets { display: contents; }

.pieces { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.piece { position: relative; width: 100%; display: grid; justify-items: center; gap: 2px; padding: var(--s3) var(--s2); background: #FFFCF6; border: 1.5px solid #E2D1B2; border-radius: var(--r-card); text-align: center; }
.piece:hover { border-color: var(--choc); }
.piece__art { width: 56px; }
.piece__name { font-weight: 800; font-size: var(--t-xs); line-height: 1.2; }
.piece__price { font-size: var(--t-xs); color: var(--sindoor); font-weight: 700; font-variant-numeric: tabular-nums; }
.piece__n:not(:empty) { position: absolute; top: 6px; right: 6px; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--choc); color: var(--tissue); font-size: .75rem; font-weight: 800; display: grid; place-items: center; }

/* ---------- slips (buildbox summary + business enquiry) ---------- */
.slip { position: relative; padding: var(--s5); background: #FFFDF8; border: 1px solid #E2D1B2; border-radius: var(--r-label); box-shadow: 0 16px 30px -24px rgba(59, 36, 23, .6); }
.slip::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 12px;
  background: radial-gradient(circle at 6px 0, transparent 5px, #FFFDF8 5.5px) 0 6px / 12px 12px repeat-x; }
.slip__title { font: 1.4rem/1.1 var(--f-display); }
.slip__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.slip__no { font-size: var(--t-xs); font-weight: 700; color: var(--choc-2); font-variant-numeric: tabular-nums; }
.slip__lines { list-style: none; margin: var(--s4) 0 0; padding: 0; font-size: var(--t-sm); }
.slip__lines li { display: flex; justify-content: space-between; gap: var(--s3); padding: 6px 0; border-bottom: 1px dotted #D9C6A4; font-variant-numeric: tabular-nums; }
.slip__lines .slip__box { color: var(--choc-2); }
.slip__empty { color: var(--choc-2); font-style: italic; }
.slip__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s3); font-weight: 800; }
.slip__total strong { font-size: 1.5rem; color: var(--sindoor); font-variant-numeric: tabular-nums; }
.slip__sample { font-size: var(--t-xs); color: var(--choc-2); margin-top: 2px; }
.slip .btn--block { margin-top: var(--s4); }

.field { display: grid; align-content: start; gap: 6px; margin: var(--s4) 0 0; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-weight: 800; font-size: var(--t-sm); padding: 0; }
.field legend { margin-bottom: 6px; }
.field input:not([type="checkbox"]), .field textarea { width: 100%; min-height: 48px; padding: 10px 12px; background: #fff; border: 1.5px solid #CDB894; border-radius: var(--r-label); font-size: 1rem; }
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--varq); outline-offset: 0; border-color: var(--choc); }
.field input[aria-invalid="true"] { border-color: var(--sindoor); background: var(--err-bg); }
.field-row { display: grid; gap: 0 var(--s4); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.hint { font-size: var(--t-xs); color: var(--choc-2); font-weight: 600; }
.hint[data-tone="ok"] { color: var(--leaf); }
.hint[data-tone="out"] { color: var(--sindoor); }
.hint[data-tone="unknown"] { color: #7A4E00; }
.hint a { font-weight: 800; }
.err { margin-top: var(--s4); padding: var(--s3); background: var(--err-bg); border-left: 4px solid var(--sindoor); color: #7E2416; font-size: var(--t-sm); font-weight: 600; }
.field .err { margin-top: 6px; }
.check { display: flex; align-items: center; gap: var(--s3); min-height: 44px; font-weight: 600 !important; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--choc); flex: none; }
.chips--form { margin-top: 0; }
.sent { margin-top: var(--s4); padding: var(--s3); background: var(--ok-bg); border-left: 4px solid var(--leaf); font-size: var(--t-sm); display: grid; gap: var(--s2); justify-items: start; }

/* ---------- for business ---------- */
.biz { padding-block: var(--s8); }
.biz__grid { display: grid; gap: var(--s6); }
@media (min-width: 1040px) { .biz__grid { grid-template-columns: .85fr 1.15fr; gap: var(--s8); align-items: start; } .biz__copy { position: sticky; top: 100px; } }
.promise { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.promise li { position: relative; padding-left: 30px; color: var(--choc-2); }
.promise li::before { content: ''; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--choc);
  box-shadow: inset 0 0 0 2px var(--choc), inset 0 0 0 3.5px var(--varq); }
.promise strong { color: var(--choc); }
.slip--ruled { background-color: #FFFDF8;
  background-image: linear-gradient(90deg, transparent 22px, rgba(168, 50, 31, .25) 22px, rgba(168, 50, 31, .25) 23px, transparent 23px); }
@media (min-width: 720px) { .slip--ruled { padding-left: var(--s6); } }

/* ---------- box label ---------- */
.label-sec { padding-block: var(--s7); background: var(--kraft); background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 7px); }
.boxlabel { max-width: 640px; margin-inline: auto; padding: var(--s5); background: #FFFBF2; border: 2px solid var(--choc); outline: 1px solid var(--choc); outline-offset: -7px; }
.boxlabel__title { font: 1.5rem/1.1 var(--f-display); text-align: center; padding-bottom: var(--s3); border-bottom: 2px solid var(--choc); }
.boxlabel__dl { margin: 0; }
.boxlabel__dl div { display: grid; grid-template-columns: 96px 1fr; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid #D9C6A4; font-size: var(--t-sm); }
.boxlabel__dl dt { font-weight: 800; text-transform: uppercase; font-size: var(--t-xs); letter-spacing: .08em; padding-top: 2px; }
.boxlabel__dl dd { margin: 0; }
.boxlabel__warn dd { color: var(--sindoor); font-weight: 700; }
.boxlabel__dl div:last-child { border-bottom: 0; }

/* ---------- closing ---------- */
.close { padding-block: var(--s8) var(--s9); text-align: center; background: radial-gradient(ellipse at 50% 30%, rgba(255, 182, 72, .22), transparent 60%); }
.close__inner { display: grid; justify-items: center; gap: var(--s4); }
.close__diya { width: 150px; }
.close__hi { font-size: 1.35rem; color: var(--kraft-ink); }
.close__meta { color: var(--choc-2); font-size: var(--t-sm); font-weight: 600; }
.foot { border-top: 1px solid rgba(184, 137, 43, .4); padding-block: var(--s5) calc(var(--s5) + 76px); font-size: var(--t-xs); color: var(--choc-2); }
.foot__row { display: grid; gap: var(--s2); }
@media (min-width: 720px) { .foot { padding-bottom: var(--s5); } .foot__row { grid-template-columns: 1fr auto; } }

/* ---------- mobile order bar ---------- */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom)); background: var(--tissue); border-top: 1px solid rgba(184, 137, 43, .55);
  box-shadow: 0 -10px 24px -18px rgba(59, 36, 23, .6); }
.bar__info { display: flex; flex-direction: column; line-height: 1.25; font-size: var(--t-xs); color: var(--choc-2); min-width: 0; }
.bar__info strong { color: var(--choc); font-size: var(--t-sm); }
@media (min-width: 720px) { .bar { display: none; } }

/* ---------- motion layer (only when js/motion.js runs: GSAP loaded and motion allowed) ---------- */
.stage__sweep { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 196, 110, .55) 50%, transparent 75%); }
.stage__frame { isolation: isolate; }
.fly { position: fixed; z-index: 60; pointer-events: none; margin: 0; }
img.fly { object-fit: cover; border-radius: 50%; box-shadow: 0 10px 24px -10px rgba(59, 36, 23, .6); }
.box__tissue { display: none; position: absolute; left: 0; right: 0; top: 30px; bottom: 0; z-index: 1; border: 12px solid var(--kraft);
  background: linear-gradient(170deg, rgba(255, 255, 255, .6), transparent 40%),
    repeating-linear-gradient(115deg, #FBEFF0 0 14px, #F4E2E4 14px 17px, #FBEFF0 17px 34px), #FBEFF0;
  box-shadow: inset 0 -10px 18px -10px rgba(59, 36, 23, .25); }

.made.is-film { padding-block: var(--s6); }
.film__svg { width: 100%; height: auto; border-radius: var(--r-card);
  box-shadow: 0 0 0 6px var(--tissue), 0 0 0 7px rgba(184, 137, 43, .5), 0 24px 48px -28px rgba(59, 36, 23, .55); }
.film { margin-top: var(--s5); }
.made.is-film .made__steps { display: block; margin-top: var(--s4); min-height: 7.5em; }
.made.is-film .step { display: none; border: 0; padding: 0; }
.made.is-film .step.is-on { display: block; }
.made.is-film .step__art { display: none; }
@media (min-width: 960px) {
  .made.is-film .wrap { display: grid; grid-template-columns: 1.2fr .8fr; column-gap: var(--s7); align-items: center; }
  .made.is-film .kicker, .made.is-film .h2 { grid-column: 1 / -1; }
  .made.is-film .film { grid-column: 1; max-width: 640px; }
  .made.is-film .made__steps { grid-column: 2; margin-top: var(--s5); display: grid; grid-template-columns: 1fr; gap: var(--s2); min-height: 0; }
  .made.is-film .step { display: block; padding: var(--s2) 0 var(--s2) var(--s4); border-left: 3px solid rgba(184, 137, 43, .35); opacity: .45; transition: opacity var(--t-med), border-color var(--t-med); }
  .made.is-film .step.is-done { opacity: .7; }
  .made.is-film .step.is-on { opacity: 1; border-color: var(--sindoor); }
  .made.is-film .step__d { display: none; }
  .made.is-film .step.is-on .step__d { display: block; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}