/* פאר הנחל: the core's pieces in draft B's look (core/THEME.md lists their classes): the buy box, the cart drawer,
   the toast, the checkout, thanks, the legal pages and 404. Not in the draft: written for the shop, on site.css's
   tokens. Loaded after site.css. */

/* the core's draft banner on a preview (DEMO), first in <body> */
.draft-banner{position:relative; z-index:42; height:28px; overflow:hidden; background:var(--deep); color:var(--gold-text); text-align:center; font-size:.82rem; line-height:18px; padding:5px 16px}
/* on a preview the banner sits above the bar: the opening still fits the first screen, its links included */
body:has(> .draft-banner) .op{min-height:min(1100px, max(560px, calc(100svh - var(--ann) - var(--sw) - 28px)))}
/* the forms' honeypot field (checkout, cancel): bots fill it, people never see it */
.hp{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.ic{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none}
.ic--sm{width:16px; height:16px}
.fill{background:#fff2b8; color:#5a4300; padding:0 4px; border-radius:3px}
.muted{color:var(--soft)}
/* the core's own buttons (.btn, .btn--lg, .btn--block: the drawer, checkout, the cancel form) are the draft's navy */
.btn:not(.btn--ghost):not(.btn--gold):not(.btn--line):not(.btn--navy){background:var(--navy); color:#fbf3e2}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; transform:none}
.btn.is-busy{opacity:.7; cursor:progress}
.btn--lg{min-height:54px}
.btn--line{background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy)}
.link{min-height:44px; padding:0; border:0; background:none; color:var(--soft); cursor:pointer; text-decoration:underline; text-underline-offset:3px; font-size:.9rem}
.ph,.ph-none{display:grid; place-items:center; width:100%; height:100%; color:var(--soft); font-size:.86rem; background:var(--ivory)}
.note{color:var(--soft); font-size:.92rem}

/* ---------- the product page's buy column: the core's buy box among the theme's lines, in the draft's order (the
   category, the name, the price, the description, the rule, the variant chips, the quantity, the add button, the
   core's notes, WhatsApp, the accordions, the trust row) ---------- */
.buy{display:flex; flex-direction:column}
.buy__box{display:contents}
.buy > *,.buy__box > *{min-width:0}
.buy__cat{order:1; align-self:flex-start}
.buy__name{order:2}
.buy__box > .price{order:3; font:500 1.5rem/1.3 var(--body); margin-top:8px}
.buy__box > .price .was{margin-inline-end:8px; font-size:.7em; color:var(--soft)}
.buy__desc{order:4}
.buy > .rule{order:5}
.buy__box > .opt{order:6}
.buy__box > .qty-row{order:7; align-self:flex-start}
.buy__box > .buy__add{order:8}
.buy__box > .buy__note,.buy__box > .buy__ship{order:9; margin-top:10px; font-size:.92rem; color:var(--soft)}
.buy__box > .buy__note[hidden]{display:none}
.buy > .buy__wa{order:10}
.buy > .acc{order:11}
.buy > .trust{order:12}
/* the variant chips (the core's fieldset.opt), as the draft's .vars / .vchip, with its small live photo (product.js) */
.opt{border:0; padding:0; margin:0 0 20px}
.opt legend{font-weight:400; margin-bottom:10px; padding:0}
.opt legend b{font-weight:500}
.vrow{display:flex; gap:12px; align-items:flex-start}
.vthumb{flex:none; width:56px; aspect-ratio:2/3; border-radius:10px; overflow:hidden; background:var(--ivory); box-shadow:inset 0 0 0 1px var(--line)}
.vthumb img{width:100%; height:100%; object-fit:cover}
.opt__list{display:flex; flex-wrap:wrap; gap:8px; min-width:0}
.opt .chip{position:relative}
.opt .chip input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.opt .chip span{display:flex; align-items:center; gap:6px; min-height:44px; padding:0 18px; border-radius:99px; background:var(--paper); box-shadow:inset 0 0 0 1px #d8ccba;
  transition:background-color .3s, color .3s, box-shadow .3s}
.opt .chip small{font-size:.8rem; opacity:.8}
.opt .chip input:hover + span{box-shadow:inset 0 0 0 1px var(--navy)}
.opt .chip input:checked + span{background:var(--navy); color:#fbf3e2; box-shadow:none}
.opt .chip input:focus-visible + span{outline:2px solid var(--gold-2); outline-offset:3px}
.opt .chip input:disabled + span{opacity:.45; text-decoration:line-through}
.swatch{width:14px; height:14px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
/* the quantity (the core's .qty-row), as the draft's */
.qty-row{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.qty-row > span:first-child{color:var(--soft)}
.qty{display:inline-flex; align-items:center; border-radius:99px; background:var(--paper); box-shadow:inset 0 0 0 1px #d8ccba; flex:none}
.qty button{width:44px; height:46px; border:0; background:none; cursor:pointer; border-radius:99px; display:grid; place-items:center; color:var(--ink); padding:0}
.qty button:hover{color:var(--gold-ink)}
.qty button:disabled{opacity:.35; cursor:default}
.qty output,.qty > span{min-width:26px; text-align:center; font-weight:500}
/* no price yet: the core's ₪00 with the draft's "המחיר בקרוב" */
.buy__soon{font-size:.82rem; font-weight:300; color:var(--soft); margin-inline-start:8px}
.card__soon{display:block; grid-column:1 / -1; font-size:.8rem; font-weight:300; color:var(--soft)}
/* the details: the product's body (one paragraph per line, from the admin) */
.acc__panel .pbody p{padding:0 2px 10px}
.gal__slide template{display:none}

/* ---------- the cart drawer: the core's lines and totals, in the draft's look ---------- */
.cart[data-drawer]{overflow:clip}
.cart__panel{color:var(--ink)}
.cart__head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:var(--navy); color:#f7ecd4}
.cart__head h2{font:400 1.4rem/1.2 var(--body); outline:none}
.cart__x{width:44px; height:44px; border-radius:50%; border:0; background:rgba(240,207,122,.12); color:var(--gold-1); cursor:pointer; display:grid; place-items:center}
.cart__x svg{width:20px; height:20px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round}
.cart__body{padding:8px 20px}
.lines{list-style:none; margin:0; padding:0}
.line{display:grid; grid-template-columns:72px minmax(0,1fr) auto; grid-template-areas:"t i p" "t c c"; column-gap:14px; align-items:start; padding:16px 0; border-bottom:1px solid var(--line)}
.line p{margin:0}
.line__thumb{grid-area:t; width:72px; aspect-ratio:2/3; border-radius:10px; overflow:hidden; background:var(--ivory)}
.line__thumb img{width:100%; height:100%; object-fit:cover}
.line > div:nth-child(2){grid-area:i}
.line__title{font:400 1rem/1.4 var(--body)}
.line__title a{text-decoration:none}
.line__title a:hover{text-decoration:underline; text-underline-offset:3px}
.line__sub{font-size:.88rem; color:var(--soft); margin-top:2px}
.line__price{grid-area:p; font-weight:500; white-space:nowrap}
.line__ctrl{grid-area:c; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px}
.line__ctrl .qty button{width:38px; height:38px}
.line__ctrl .link{min-height:36px}
/* the checkout summary and the thanks page: no controls */
.co .line,.th .line{grid-template-columns:56px minmax(0,1fr) auto; grid-template-areas:"t i p"}
.co .line__thumb,.th .line__thumb{width:56px}
.drawer__empty{text-align:center; padding:40px 0; display:grid; gap:16px; justify-items:center; color:var(--soft)}
.drawer__empty h3{font:400 1.2rem/1.3 var(--body); color:var(--ink)}
.drawer__note{margin:6px 0 0; text-align:center; font-size:.86rem; color:var(--soft)}
.cart__foot{padding:16px 20px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); display:grid; gap:8px; background:var(--cream)}
.cart__foot:empty{display:none}
.cart__foot .totals{margin:0}
.cart__foot .totals :is(dt, dd):not(.is-total){display:none}
.cart__foot .btn{width:100%; border-radius:12px}
.cart__foot .link{justify-self:center}
.totals{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; align-items:baseline; margin:16px 0 0}
.totals dt{color:var(--soft)}
.totals dd{margin:0; text-align:end}
.totals .is-total{color:var(--ink); font-weight:500}
dd.is-total{font-size:1.15rem}
/* the lines rise one after another while the drawer opens (the core numbers them, --i) */
.cart.is-opening .lines > li,.cart.is-opening .drawer__empty{animation:dr-rise .55s var(--e-out) both; animation-delay:calc(.16s + var(--i, 0) * .06s)}
@keyframes dr-rise{from{opacity:0; transform:translate3d(0,18px,0)}}

/* the "added to the cart" toast */
.toast{position:fixed; z-index:60; bottom:calc(16px + env(safe-area-inset-bottom)); left:16px; right:16px; max-width:380px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-radius:var(--r-md); background:var(--navy); color:#fbf3e2;
  box-shadow:0 0 0 1px rgba(240,207,122,.35), 0 18px 40px -18px rgba(7,15,34,.8); font-size:.92rem; opacity:0; pointer-events:none; transition:opacity .3s var(--e-out)}
.toast.on{opacity:1; pointer-events:auto}
.toast:empty{display:none}
.toast button{min-height:44px; padding:0; border:0; background:none; color:var(--gold-1); text-decoration:underline; white-space:nowrap; cursor:pointer}

/* ---------- the footer's legal links (the core writes them: the cancel link is on every page) ---------- */
.foot__legal{display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:2px 18px; margin-top:2px}
.foot__legal a{display:inline-block; padding:6px 0; text-decoration:none; color:var(--ink)}
.foot__legal a:hover{color:var(--gold-ink)}
.foot__legal .legal-short{display:block; flex-basis:100%; max-width:24rem; margin-inline:auto; font-size:.8rem; line-height:1.5; color:var(--soft)}
@media (min-width:900px){ .foot__legal{flex-direction:column; align-items:start} .foot__legal .legal-short{margin-inline:0} }

/* ---------- pages of their own: the shop, checkout, thanks, the legal pages, 404 ---------- */
.pg{padding:clamp(28px, 5vw, 56px) 0 clamp(56px, 8vw, 96px)}
.pg__in{max-width:1040px}
.pg__head{text-align:center; margin-bottom:clamp(22px, 3.4vw, 36px)}
.pg__t{font:400 clamp(1.8rem, 6.4vw, 2.6rem)/1.25 var(--body)}
.lost .lead{text-align:center; color:var(--soft); margin-bottom:22px}
.lost__ways{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.lost__ways .btn--ghost{background:transparent; color:var(--ink)}

/* forms (checkout, the cancel form) */
.form{display:grid; gap:20px; min-width:0}
.field{display:grid; gap:6px}
.field label,.address legend,.delivery legend{font-weight:500; font-size:.95rem}
.address,.delivery{display:grid; gap:14px; margin:0; padding:0; border:0; min-width:0}
.address legend,.delivery legend{padding:0; margin-bottom:6px}
.delivery{gap:8px}
.field-row{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; align-items:end}
.input{width:100%; min-height:50px; padding:10px 14px; border:0; border-radius:12px; box-shadow:inset 0 0 0 1px #d8ccba; background:var(--paper); color:var(--ink); font:inherit; line-height:1.3;
  transition:box-shadow .2s}
textarea.input{line-height:1.6; resize:vertical}
.input:hover{box-shadow:inset 0 0 0 1px var(--soft)}
.input:focus-visible{outline:none; box-shadow:inset 0 0 0 1.5px var(--navy), 0 0 0 3px rgba(201,149,47,.3)}
.input--ltr{direction:ltr; text-align:right}
.input[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px #a3261b}
.field__hint{margin:0; color:var(--soft); font-size:.84rem}
.field__err{margin:0; color:#a3261b; font-size:.9rem; font-weight:500}
.field__err:empty{display:none}
.alert{padding:12px 16px; border-radius:12px; box-shadow:inset 0 0 0 1px #a3261b; background:var(--paper); color:#a3261b; outline:none}
.check{display:grid; grid-template-columns:22px minmax(0,1fr); gap:4px 12px; align-items:start; font-size:.92rem}
.check input{width:22px; height:22px; margin:2px 0 0; accent-color:var(--navy)}
.check .field__err,.check .check__links{grid-column:2}
.check__links a,.legal-block a,.crumbs a{display:inline-block; padding-block:.6em; margin-block:-.6em}
.radio-card{display:flex; align-items:center; gap:12px; min-height:52px; padding:12px 16px; border-radius:12px; box-shadow:inset 0 0 0 1px #d8ccba; background:var(--paper); cursor:pointer; transition:box-shadow .2s}
.radio-card:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--navy)}
.radio-card input{width:20px; height:20px; margin:0; accent-color:var(--navy)}
.radio-card span{flex:1}
.radio-card small{font-size:.88rem; color:var(--soft)}
.coupon__row{display:flex; gap:8px}
.coupon__row .input{flex:1 1 auto; min-width:0}
.co{display:grid; gap:24px}
.co[hidden]{display:none}
.co__summary,.co .form{padding:20px; border-radius:var(--r-md); background:var(--paper); box-shadow:inset 0 0 0 1px var(--line)}
.co__h2{margin:0 0 8px; font:400 1.35rem/1.25 var(--body)}
[data-co-lines]{min-height:calc(var(--cart-lines, 0) * 96px + 110px)}
html[data-cart="0"] [data-co-lines]{min-height:0}
.form [data-co-submit]{width:100%; border-radius:12px}
.co .note,.co-before,.legal-block{margin:0; padding:12px 16px; border-radius:12px; background:var(--cream); font-size:.9rem; color:var(--soft)}
.co-before p,.legal-block p{margin-block:4px; font-size:.9rem}
.co-privacy,.co-vat,.cx-notice{color:var(--soft); font-size:.9rem}
.shop-closed{display:grid; gap:12px; margin-bottom:20px}
.shop-closed__ways,.state__links,[data-th-missing] .card p:last-child{display:flex; flex-wrap:wrap; gap:8px}
.state{display:grid; gap:16px; justify-items:center; padding-block:40px; text-align:center}
@media (min-width:900px){
  .co{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:start}
  .co__summary{order:2; position:sticky; top:calc(var(--hh) + 20px)}
}
/* thanks */
.th__in{display:grid; gap:20px; max-width:640px; margin-inline:auto}
.th__in .card{display:grid; gap:12px; justify-items:start; padding:20px; border-radius:var(--r-md); background:var(--paper); box-shadow:inset 0 0 0 1px var(--line)}
.th__in .card .lines,.th__in .card .totals{justify-self:stretch}
.th-next{padding:16px; border-radius:var(--r-md); background:var(--cream)}
.order-id,.email{direction:ltr; unicode-bidi:isolate}
/* the legal pages and the cancel page: the core's text */
.prose{max-width:46rem; margin-inline:auto}
.prose h1{margin:0 0 20px; font:400 clamp(1.8rem, 6vw, 2.4rem)/1.25 var(--body)}
.prose h2{margin:32px 0 10px; font:500 1.3rem/1.35 var(--body)}
.prose h3{margin:20px 0 8px; font:500 1.05rem/1.4 var(--body)}
.prose p{margin:0 0 12px}
.prose ul,.prose ol{margin:0 0 12px; padding-inline-start:1.2em; list-style:revert}
.prose li + li{margin-top:4px}
.prose a{color:var(--navy); text-underline-offset:3px}
.prose p.fill{display:block}
.prose .form{margin-top:20px; padding:20px; border-radius:var(--r-md); background:var(--paper); box-shadow:inset 0 0 0 1px var(--line)}
.cx-done{outline:none}
.legal-short{font-size:.8rem; color:var(--soft)}

/* the flame-and-148 background (fire148.css) shows through the light page sections, and the pages of their own */

/* ---------- thanks (round 2, Mor 4.11): the order goes to Mor on WhatsApp (pages/thanks.js) ---------- */
.th-send{display:grid; gap:12px; justify-items:stretch; max-width:640px; margin:0 auto 20px; padding:22px 20px; border-radius:var(--r-md);
  background:var(--cream); box-shadow:inset 0 0 0 1.5px var(--gold-2), 0 24px 40px -32px rgba(12,24,48,.6); text-align:center}
.th-send[hidden]{display:none}
.th-send__t{font:500 1.3rem/1.35 var(--body); color:var(--ink)}
.th-send__lead,.th-send__pay,.th-send__note{color:var(--soft); font-size:.95rem; line-height:1.6}
.th-send__pay{color:var(--ink)}
.th-send__note{white-space:pre-line; padding:10px 14px; border-radius:12px; background:var(--paper)}
.th-send__btn{min-height:58px; font-size:1.1rem}
.th-send__btn svg{width:24px; height:24px}
/* the core's own "שאלות? וואטסאפ" button in the order card would be a second WhatsApp button: the send button is the one */
.has-wa-send [data-th] .card > a.btn[href*="wa.me"]{display:none}
/* a heading the core focuses for screen readers (tabindex=-1: the thanks title, the drawer's) gets no ring: nobody tabbed to it */
[tabindex="-1"]:focus{outline:none}
/* follow-up 4.11: under the send block the core's order card keeps its greeting only. Its "מה עכשיו? ניצור איתכם קשר
   לתשלום" would contradict the block (the buyer writes to Mor, pays by Bit or cash; the block says when the order goes
   out), and "שלחנו … גם למייל" is false while the shop sends no email (views.js thFlags) */
.has-wa-send [data-th] .th-next{display:none}
body:has([data-email-off]) [data-th] div.card > p.muted:last-child{display:none}
.th-send__after{color:var(--soft); font-size:.88rem}