/* shit.dubcandle.com — режим «Товар» (гучний): гірчиця великими полями, штамп, етикетка-паспорт.
   Лише токени з /shared/brand.css — власних кольорів немає. */

/* ---------- Спільне для всіх сторінок сайту ---------- */
.t-display-xl{ font:400 44px/48px var(--font-display); letter-spacing:-.01em; margin:0 0 var(--space-6); }
@media (min-width:900px){ .t-display-xl{ font-size:64px; line-height:64px; } }

.header{ position:sticky; top:0; z-index:10; background:var(--wax); border-bottom:1px solid var(--line); }
.header__inner{ display:flex; align-items:center; gap:var(--space-6); min-height:64px; }
.nav{ display:none; gap:var(--space-6); margin-left:auto; }
.nav a{ font:500 15px/20px var(--font-sans); text-decoration:none; color:var(--soot-muted); }
.nav a:hover{ color:var(--soot); }
.header__cta{ margin-left:auto; height:40px; padding:0 var(--space-4); }
@media (min-width:900px){ .nav{ display:flex; } .header__cta{ margin-left:0; } }

main > section{ padding:var(--section-y) 0; }
.eyebrow{ display:block; color:var(--soot-muted); margin-bottom:var(--space-3); }
.section-lead{ color:var(--soot-muted); max-width:620px; }

.footer{ padding:var(--space-16) 0 var(--space-10); border-top:1px solid var(--line); }
.footer__grid{ display:grid; gap:var(--space-10); }
@media (min-width:900px){ .footer__grid{ grid-template-columns:repeat(3,1fr); } }
.footer .t-label{ color:var(--soot-muted); margin:0 0 var(--space-3); }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); }
.footer li{ font:400 15px/22px var(--font-sans); }
.footer .t-fine{ margin-top:var(--space-4); }

/* Sticky «Замовити» — лише мобільний */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:20; padding:var(--space-3) var(--space-4);
  background:var(--wax); border-top:1px solid var(--line); }
.sticky-cta .dc-btn{ width:100%; box-shadow:var(--shadow-float); }
body.has-sticky{ padding-bottom:72px; }
@media (min-width:900px){ .sticky-cta{ display:none; } body.has-sticky{ padding-bottom:0; } }

/* ---------- Лендинг ---------- */
.hero{ padding:var(--space-16) 0; }
.hero__grid{ display:grid; gap:var(--space-10); align-items:center; }
.hero__lead{ color:var(--soot-muted); max-width:500px; }
.hero__price{ font:400 28px/34px var(--font-display); color:var(--mustard-ink); margin:var(--space-6) 0 0; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }
.hero__media{ position:relative; }
.hero__stamp{ position:absolute; right:var(--space-2); bottom:-24px; }
@media (min-width:900px){
  .hero{ padding:var(--space-16) 0 calc(var(--space-16) * 1.5); }
  .hero__grid{ grid-template-columns:1.15fr .85fr; }
  .hero__stamp{ right:auto; left:-56px; bottom:40px; }
}

.steps{ list-style:none; margin:var(--space-10) 0 0; padding:0; counter-reset:step; display:grid; border-top:1px solid var(--line); }
.steps li{ counter-increment:step; padding:var(--space-6) 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:56px 1fr; gap:0 var(--space-4); }
.steps li::before{ content:counter(step, decimal-leading-zero); grid-row:span 2; font:300 40px/40px var(--font-mono); color:var(--chocolate); }
.steps h3, .steps p{ grid-column:2; }
.steps p{ margin:0; color:var(--soot-muted); }
@media (min-width:900px){
  .steps{ grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }
  .steps li{ border-bottom:0; grid-template-columns:1fr; padding:var(--space-6) var(--space-6) var(--space-6) 0; }
  .steps li + li{ border-left:1px solid var(--line); padding-left:var(--space-6); }
  .steps li::before{ grid-row:auto; margin-bottom:var(--space-4); font-size:56px; line-height:56px; }
  .steps h3, .steps p{ grid-column:1; }
}

/* Варіанти на гірчиці */
.variants{ display:grid; gap:var(--space-10); margin-top:var(--space-10); }
@media (min-width:900px){ .variants{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); } }
.variant{ background:var(--wax); color:var(--soot); display:grid; }
.variant .photo-ph{ border:0; border-bottom:1px solid var(--soot); }
.variant__body{ padding:var(--space-6); display:grid; gap:var(--space-4); align-content:start; }
.variant .dc-spec{ max-width:none; }
.variant__desc{ margin:0; color:var(--soot-muted); }
.variant__price{ margin:0; font:400 28px/34px var(--font-display); }
.variant .dc-btn{ width:100%; }

/* Анонімність */
.anon{ display:grid; gap:var(--space-10); }
@media (min-width:900px){ .anon{ grid-template-columns:1.3fr 1fr; align-items:end; } }
.anon__list{ margin:var(--space-10) 0 0; border-top:1px solid var(--line); }
.anon__list div{ display:grid; gap:var(--space-1); padding:var(--space-4) 0; border-bottom:1px solid var(--line); }
@media (min-width:600px){ .anon__list div{ grid-template-columns:140px 1fr; gap:var(--space-4); } }
.anon__list dt{ color:var(--soot-muted); padding-top:5px; }
.anon__list dd{ margin:0; }

/* Записочки */
.notes-section{ background:var(--wax-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.notes{ display:grid; gap:var(--space-4); margin-top:var(--space-10); }
@media (min-width:700px){ .notes{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .notes{ grid-template-columns:repeat(4,1fr); } }
.note{ margin:0; background:var(--wax); border:1px solid var(--line); padding:var(--space-6); min-height:180px; display:flex; align-items:center; }
.note blockquote{ margin:0; font:400 22px/30px var(--font-display); }
.notes__cta{ margin-top:var(--space-10); }

/* Галерея */
.gallery{ display:grid; gap:var(--space-3); grid-template-columns:repeat(2,1fr); margin-top:var(--space-10); }
.gallery > :first-child{ grid-column:span 2; aspect-ratio:16/10; }
@media (min-width:900px){
  .gallery{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4); }
  .gallery > :first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
}

/* FAQ */
.faq{ margin-top:var(--space-10); max-width:760px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; font:500 16px/24px var(--font-sans); padding:var(--space-4) 0; list-style:none; display:flex; justify-content:space-between; gap:var(--space-4); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font:400 20px/24px var(--font-mono); color:var(--soot-muted); }
.faq details[open] summary::after{ content:"−"; }
.faq details p{ color:var(--soot-muted); }

/* Фінальний заклик на гірчиці */
.final__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-6); }
.final h2{ margin:0; font:400 34px/40px var(--font-display); }
@media (min-width:900px){ .final h2{ font-size:44px; line-height:48px; } }

/* ---------- /order ---------- */
.page{ padding:var(--space-10) 0 var(--section-y); }
#order{ scroll-margin-top:80px; }
.order-layout{ display:grid; gap:var(--space-10); align-items:start; }
@media (min-width:960px){ .order-layout{ grid-template-columns:1.5fr 1fr; } }
.progress{ list-style:none; margin:0 0 var(--space-6); padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2); }
.progress li{ border-top:2px solid var(--line); padding-top:var(--space-2); font:500 12px/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--soot-muted); }
.progress li span{ display:none; }
@media (min-width:600px){ .progress li span{ display:inline; } }
.progress li[aria-current="step"]{ border-color:var(--chocolate); color:var(--soot); }
.progress li.done{ border-color:var(--soot); }

.panel{ background:var(--wax-raised); border:1px solid var(--line); padding:var(--space-6) var(--space-4); }
@media (min-width:600px){ .panel{ padding:var(--space-10); } }
.step{ display:grid; gap:var(--space-6); }
.step[hidden]{ display:none; }
.step h2{ margin:0; }
.step-nav{ display:flex; flex-wrap:wrap; gap:var(--space-3); padding-top:var(--space-6); border-top:1px solid var(--line); }
.step-nav .dc-btn-primary{ flex:1 1 200px; }
.row-2{ display:grid; gap:var(--space-6); }
@media (min-width:600px){ .row-2{ grid-template-columns:1fr 1fr; } }
fieldset{ border:0; margin:0; padding:0; min-width:0; }
.dc-legend{ padding:0; margin-bottom:var(--space-3); }

/* Вибір (варіант, перевізник, тип точки) — радіо-картки */
.choices{ display:grid; gap:var(--space-3); }
@media (min-width:600px){ .choices--2{ grid-template-columns:1fr 1fr; } }
.choice{ position:relative; display:grid; gap:var(--space-1); padding:var(--space-4); border:1px solid var(--line-strong); background:var(--wax); cursor:pointer; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice__title{ font:500 15px/20px var(--font-sans); }
.choice__meta{ font:400 13px/20px var(--font-mono); color:var(--soot-muted); }
.choice:has(input:checked){ border-color:var(--chocolate); box-shadow:inset 0 0 0 1px var(--chocolate); }
.choice:has(input:focus-visible){ box-shadow:var(--focus-ring); }
.choice:has(input:checked)::after{ content:"✓"; position:absolute; top:var(--space-3); right:var(--space-4); font:500 15px/20px var(--font-mono); color:var(--chocolate); }

.counter{ font:400 13px/20px var(--font-mono); color:var(--soot-muted); text-align:right; margin:0; }
.note-preview{ background:var(--wax); border:1px solid var(--line); padding:var(--space-6); min-height:140px; }
.note-preview p{ margin:0; font:400 22px/30px var(--font-display); white-space:pre-wrap; overflow-wrap:anywhere; }
.note-preview .empty{ color:var(--soot-muted); }

.summary{ position:sticky; top:88px; }
.summary .dc-spec{ max-width:none; }
.summary__total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--soot); font:500 13px/20px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; }
.summary__total strong{ font:400 22px/28px var(--font-display); text-transform:none; letter-spacing:0; }
.summary__hint{ margin-top:var(--space-4); }

.review-list{ margin:0; border-top:1px solid var(--line); }
.review-list div{ display:grid; gap:var(--space-1); padding:var(--space-3) 0; border-bottom:1px solid var(--line); }
@media (min-width:600px){ .review-list div{ grid-template-columns:140px 1fr; gap:var(--space-4); } }
.review-list dt{ color:var(--soot-muted); }
.review-list dd{ margin:0; overflow-wrap:anywhere; }

/* ---------- Статус замовлення ---------- */
.status-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:var(--space-4); margin-bottom:var(--space-10); }
.status-head h1{ margin:0; }
.order-no{ font:500 12px/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--soot-muted); }
.status-layout{ display:grid; gap:var(--space-10); align-items:start; }
@media (min-width:960px){ .status-layout{ grid-template-columns:1.5fr 1fr; } }
.status-stack{ display:grid; gap:var(--space-6); }
.timeline{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.timeline li{ display:grid; grid-template-columns:32px 1fr; gap:var(--space-3); padding:var(--space-4) 0; border-bottom:1px solid var(--line); color:var(--soot-muted); }
.timeline li::before{ content:""; width:14px; height:14px; margin-top:5px; border:1px solid var(--line-strong); }
.timeline li.done{ color:var(--soot); }
.timeline li.done::before{ background:var(--soot); border-color:var(--soot); }
.timeline li.current{ color:var(--soot); }
.timeline li.current::before{ background:var(--chocolate); border-color:var(--chocolate); }
.timeline h3{ margin:0; }
.timeline p{ margin:0; font:400 13px/18px var(--font-sans); color:var(--soot-muted); }
.ttn{ display:grid; gap:var(--space-3); }
.ttn__num{ font:400 28px/34px var(--font-mono); letter-spacing:.04em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ttn__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.ttn__pending{ color:var(--soot-muted); margin:0; }
.toast{ font:400 13px/18px var(--font-sans); color:var(--soot-muted); min-height:18px; margin:0; }
.demo-switch{ margin-top:var(--space-10); padding-top:var(--space-4); border-top:1px dashed var(--line-strong); display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); align-items:center; }
.demo-switch a{ font:400 13px/20px var(--font-mono); }

/* ---------- Сторінка отримувача (темна тема на всю сторінку) ---------- */
body.theme-soot{ min-height:100vh; }
.theme-soot .header{ background:var(--wax); }
.recipient{ padding:var(--space-16) 0 var(--section-y); }
.recipient__inner{ max-width:640px; margin:0 auto; display:grid; gap:var(--space-10); }
.recipient .t-display-xl{ margin-bottom:var(--space-4); }
.recipient__lead{ color:var(--soot-muted); margin:0; }
.recipient__actions{ display:grid; gap:var(--space-3); }
@media (min-width:600px){ .recipient__actions{ grid-template-columns:1fr 1fr; } }
.reveal{ border:1px solid var(--line); padding:var(--space-6); }
.reveal[hidden], .promo[hidden]{ display:none; }
.reveal p:last-child{ margin:0; }
.promo{ display:grid; gap:var(--space-4); background:var(--mustard); color:var(--on-mustard); padding:var(--space-6); }
.promo .t-label{ color:var(--on-mustard); }
.promo__code{ font:400 28px/34px var(--font-mono); letter-spacing:.08em; border:1px dashed var(--on-mustard); padding:var(--space-3) var(--space-4); text-align:center; }
.promo p{ margin:0; }
.recipient .dc-spec{ max-width:none; }
.recipient__stamp{ justify-self:end; margin-top:-88px; margin-right:-8px; position:relative; }
.ugc{ border-top:1px solid var(--line); padding-top:var(--space-6); }
.ugc p{ color:var(--soot-muted); }