/* Магазин dubcandle.com/shop/ — каталог, кошик, оформлення, статус. Режим «Студія»: лише токени brand.css. */

/* Хедер: кошик і поточний пункт меню */
.nav a[aria-current="page"]{ color:var(--soot); }
.header-cart{ display:inline-flex; align-items:center; gap:var(--space-2); text-decoration:none; color:var(--soot); font:500 15px/20px var(--font-sans); }
.header-cart__n{ min-width:22px; height:22px; padding:0 6px; display:inline-grid; place-items:center; background:var(--chocolate); color:var(--on-chocolate);
  font:500 12px/1 var(--font-mono); border-radius:var(--radius-full); }

/* Каталог */
.shop-hero{ padding:var(--space-16) 0 var(--space-6); }
.shop-hero .section-lead a{ color:var(--chocolate); }
.shop-promo{ margin:var(--space-4) 0 0; }
.shop-filter{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-6); }
.shop-filter button{ height:36px; padding:0 var(--space-4); border:1px solid var(--line-strong); background:transparent; color:var(--soot);
  font:500 14px/20px var(--font-sans); cursor:pointer; }
.shop-filter button[aria-pressed="true"]{ background:var(--soot); color:var(--wax); border-color:var(--soot); }
.shop-filter button:focus-visible{ outline:2px solid transparent; box-shadow:var(--focus-ring); }
.shop-list{ padding-top:0; }
.shop-grid{ display:grid; gap:var(--space-10); }
@media (min-width:700px){ .shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); } }
@media (min-width:1100px){ .shop-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.shop-empty{ color:var(--soot-muted); }

.shop-card{ display:grid; grid-template-rows:auto 1fr; background:var(--wax-raised); border:1px solid var(--line); scroll-margin-top:88px; }
.shop-card.is-target{ border-color:var(--chocolate); box-shadow:inset 0 0 0 1px var(--chocolate); }
.shop-card.is-closed .shop-card__photos{ opacity:.6; }
.shop-card__photos{ position:relative; border-bottom:1px solid var(--line); }
.shop-card__track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.shop-card__track::-webkit-scrollbar{ display:none; }
.shop-card__track:focus-visible{ outline:2px solid transparent; box-shadow:var(--focus-ring); }
.shop-card__track img{ flex:0 0 100%; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; scroll-snap-align:start; display:block; }
.shop-card__ph{ aspect-ratio:4/5; border:0; border-bottom:1px solid var(--line); }
.shop-card__dots{ position:absolute; left:0; right:0; bottom:var(--space-3); display:flex; justify-content:center; gap:6px; pointer-events:none; }
.shop-card__dots span{ width:6px; height:6px; border-radius:var(--radius-full); background:var(--wax); opacity:.6; box-shadow:0 0 0 1px #1C1A1833; }
.shop-card__dots span.is-on{ opacity:1; background:var(--soot); }
.shop-card__body{ padding:var(--space-6) var(--space-4); display:grid; gap:var(--space-4); align-content:start; }
@media (min-width:700px){ .shop-card__body{ padding:var(--space-6); } }
.shop-card .dc-spec{ max-width:none; }
.shop-card__desc{ margin:0; color:var(--soot-muted); }
.shop-card__price{ margin:0; font:400 28px/34px var(--font-display); }
.shop-card__price s, .cart-line__sum s, .cart__sum s, .co-lines s{ color:var(--soot-muted); font-weight:400; text-decoration-thickness:1px; margin-right:.2em; }
.shop-card__stock{ margin:0; color:var(--chocolate); }
.shop-card__stock:empty{ display:none; }
.shop-card .dc-btn{ width:100%; }
.shop-card .dc-btn[disabled]{ opacity:.55; cursor:not-allowed; }
.price-reason{ margin:0; font:500 12px/16px var(--font-mono); color:var(--chocolate); }

.shop-opt{ border:0; margin:0; padding:0; min-width:0; }
.shop-opt legend{ padding:0; margin-bottom:var(--space-2); color:var(--soot-muted); }
.shop-opt__chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip span{ display:inline-flex; align-items:center; min-height:36px; padding:0 var(--space-3); border:1px solid var(--line-strong); background:var(--wax);
  font:400 14px/20px var(--font-sans); }
.chip input:checked + span{ border-color:var(--chocolate); box-shadow:inset 0 0 0 1px var(--chocolate); }
.chip input:focus-visible + span{ box-shadow:var(--focus-ring); }
.chip.is-off span{ color:var(--soot-muted); text-decoration:line-through; text-decoration-thickness:1px; }

.shop-wait{ display:grid; gap:var(--space-3); }
.shop-wait p{ margin:0; }
.shop-wait__row{ display:flex; flex-direction:column; gap:var(--space-2); }
@media (min-width:480px){ .shop-wait__row{ flex-direction:row; } .shop-wait__row .dc-input{ flex:1; } .shop-wait__row .dc-btn{ width:auto; } }
.shop-wait__msg{ font:400 14px/20px var(--font-sans); }
.shop-wait__msg:empty{ display:none; }
.shop-wait__msg.is-error{ color:var(--signal); }
.shop-hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* Кошик: кнопка внизу і панель збоку */
.cart-fab[hidden], .shop-toast:empty{ display:none; }
.cart-fab{ position:fixed; right:var(--space-4); bottom:calc(var(--space-4) + env(safe-area-inset-bottom)); z-index:20; box-shadow:var(--shadow-float); }
.shop-toast{ position:fixed; left:50%; bottom:calc(var(--space-16) + env(safe-area-inset-bottom)); transform:translate(-50%, 8px); z-index:21; margin:0;
  padding:var(--space-2) var(--space-4); background:var(--soot); color:var(--wax); font:500 14px/20px var(--font-sans); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.shop-toast.on{ opacity:1; transform:translate(-50%, 0); }
@media (prefers-reduced-motion:reduce){ .shop-toast{ transition:none; } }

dialog.cart{ margin:0 0 0 auto; height:100%; max-height:none; width:min(440px, 100%); max-width:100%; padding:0; border:0; border-left:1px solid var(--line);
  background:var(--wax); color:var(--soot); }
dialog.cart::backdrop{ background:#1C1A1866; }
.cart__inner{ display:flex; flex-direction:column; height:100%; }
.cart__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-4); border-bottom:1px solid var(--line); }
.cart__head h2{ margin:0; font:400 28px/34px var(--font-display); }
.cart__close{ height:36px; padding:0 var(--space-3); }
.cart__empty{ padding:var(--space-6) var(--space-4); color:var(--soot-muted); margin:0; }
.cart__empty[hidden]{ display:none; }
.cart__lines{ list-style:none; margin:0; padding:0 var(--space-4); overflow-y:auto; flex:1; }
.cart__foot{ padding:var(--space-4); border-top:1px solid var(--line); display:grid; gap:var(--space-3); }
.cart__foot p{ margin:0; }
.cart__sum{ display:flex; justify-content:space-between; align-items:baseline; }
.cart__sum strong{ font:400 22px/28px var(--font-display); }
.cart__foot .dc-btn{ width:100%; }
.cart__foot .is-disabled{ opacity:.55; pointer-events:none; }

.cart-line, .co-line{ display:grid; grid-template-columns:56px 1fr auto; gap:var(--space-3); padding:var(--space-4) 0; border-bottom:1px solid var(--line); align-items:start; }
.cart-line__img{ width:56px; height:70px; object-fit:cover; background:var(--line); display:block; }
.cart-line__main{ display:grid; gap:var(--space-1); min-width:0; }
.cart-line__main p{ margin:0; }
.cart-line__title{ font:500 15px/20px var(--font-sans); }
.cart-line__err{ font:400 13px/18px var(--font-sans); color:var(--signal); }
.cart-line__sum{ margin:0; font:400 15px/20px var(--font-mono); white-space:nowrap; text-align:right; }
.cart-line__qty{ display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-1); }
.cart-line__qty span{ min-width:20px; text-align:center; font:400 14px/20px var(--font-mono); }
.qty-btn{ width:32px; height:32px; border:1px solid var(--line-strong); background:transparent; color:var(--soot); font:400 18px/1 var(--font-mono); cursor:pointer; }
.qty-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.qty-btn:focus-visible, .cart-line__rm:focus-visible{ outline:2px solid transparent; box-shadow:var(--focus-ring); }
.cart-line__rm{ margin-left:var(--space-2); border:0; background:none; padding:0; color:var(--soot-muted); text-decoration:underline; font:400 13px/18px var(--font-sans); cursor:pointer; }

/* Оформлення і статус */
.shop-page{ padding-top:var(--space-16); padding-bottom:var(--section-y); }
.co-empty{ display:grid; gap:var(--space-4); justify-items:start; }
.co-empty[hidden]{ display:none; }
.co-grid{ display:grid; gap:var(--space-6); margin-top:var(--space-6); }
@media (min-width:1000px){ .co-grid{ grid-template-columns:minmax(0,1fr) 340px; align-items:start; } }
.co-main{ display:grid; gap:var(--space-6); min-width:0; }
.panel{ background:var(--wax-raised); border:1px solid var(--line); padding:var(--space-6) var(--space-4); }
@media (min-width:700px){ .panel{ padding:var(--space-6); } }
.co-sec{ display:grid; gap:var(--space-4); }
.co-sec h2{ margin:0; font:400 28px/34px var(--font-display); }
.co-n{ font:500 13px/20px var(--font-mono); letter-spacing:.08em; color:var(--soot-muted); vertical-align:middle; margin-right:var(--space-2); }
.co-lines{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.co-more{ color:var(--soot-muted); justify-self:start; }
.co-ok{ color:var(--chocolate); }
.co-ok:empty{ display:none; }
.co-submit{ width:100%; }
.co-row:not([hidden]){ display:contents; }
.row-2{ display:grid; gap:var(--space-4); }
@media (min-width:600px){ .row-2{ grid-template-columns:1fr 1fr; } }
fieldset{ border:0; margin:0; padding:0; min-width:0; }
.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__desc{ font:400 14px/20px var(--font-sans); color:var(--soot-muted); }
.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; }
.counter.is-over{ color:var(--signal); }
.note-block .dc-card-frame{ margin-top:var(--space-3); max-width:420px; }
.dc-notice--soft{ background:var(--wax); color:var(--soot); border-left:3px solid var(--chocolate); }
.dc-notice--soft p{ margin:var(--space-1) 0 0; }
.summary{ position:sticky; top:88px; display:grid; gap:var(--space-4); }
.summary .dc-spec{ max-width:none; }
.summary dd{ white-space:nowrap; }
.summary .co-lines{ border-top:0; margin-bottom:var(--space-3); }
.summary .co-line{ grid-template-columns:1fr auto; }
.summary__total{ display:flex; justify-content:space-between; align-items:baseline; margin:var(--space-3) 0 0; 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:0; }
.summary__hint a, .st-to{ overflow-wrap:anywhere; }
.summary__hint a{ color:inherit; }
.st-to{ margin:var(--space-3) 0 0; }
#st-pay{ margin-top:var(--space-4); }
.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; font:500 16px/24px var(--font-sans); }
.timeline p{ margin:0; font:400 13px/18px var(--font-sans); color:var(--soot-muted); }
.ttn{ display:grid; gap:var(--space-3); }
.ttn__num{ margin:0; font:400 28px/34px var(--font-mono); letter-spacing:.04em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ttn__num:empty{ display:none; }
.ttn__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.ttn__actions[hidden]{ display:none; }
.ttn__pending{ color:var(--soot-muted); margin:0; }