/* ═══ cart.css — the design-stage cart: header pill, drawer, fly-to-cart, toast (R29) ═══
   Nothing here talks to a backend. State lives in localStorage so the site feels whole. */
.cartpill{position:relative;display:inline-flex;align-items:center;gap:8px;margin-inline-start:22px;
  color:var(--ink);font:600 14px/1 var(--f);opacity:.85;transition:opacity var(--t-ui) var(--ease-out)}
.cartpill:hover{opacity:1}
.cartpill svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.cartpill .n{position:absolute;top:-7px;inset-inline-end:-9px;min-width:17px;height:17px;padding:0 5px;border-radius:999px;
  background:var(--honey);color:#241705;font:700 10.5px/17px var(--f);text-align:center;
  transform:scale(0);transition:transform var(--t-ui) var(--ease-out)}
.cartpill.has .n{transform:scale(1)}
.cartpill.bump .n{animation:cartbump .5s var(--ease-out)}
@keyframes cartbump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

#cartScrim{position:fixed;inset:0;z-index:80;background:rgba(20,16,11,.28);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease-out)}
#cart{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(440px,94vw);z-index:81;display:flex;flex-direction:column;
  background:
    radial-gradient(700px 420px at 90% -10%, rgba(233,201,143,.34), transparent 62%),
    var(--bg);
  box-shadow:-24px 0 70px rgba(60,42,20,.18);border-inline-start:1px solid var(--line);
  transform:translateX(-102%);transition:transform .65s var(--ease-mask)}
/* the drawer is dir=rtl itself, so inset-inline-end always resolves to the LEFT edge and the
   parked position is always off the left, whatever the document's direction */
html.cart-open #cart{transform:none}
html.cart-open #cartScrim{opacity:1;pointer-events:auto}
html.cart-open{overflow:hidden}
#cart .cart-head{display:flex;align-items:center;justify-content:space-between;padding:26px 26px 14px;border-bottom:1px solid var(--line)}
#cart .cart-x{background:none;border:0;cursor:pointer;width:36px;height:36px;border-radius:50%;color:var(--ink);font:300 26px/1 var(--f);
  display:grid;place-items:center;transition:background var(--t-ui) var(--ease-out)}
#cart .cart-x:hover{background:rgba(178,139,82,.14)}
#cart .cart-items{flex:1;overflow:auto;padding:8px 26px;scrollbar-width:thin}
.ci{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.ci .ph{width:72px;height:72px;background:var(--card);border:1px solid var(--line);border-radius:4px;display:grid;place-items:center;overflow:hidden}
.ci .ph img{max-width:86%;max-height:86%;object-fit:contain}
.ci .nm{font:600 13px/1.4 var(--f);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ci .meta{font:500 12px/1.6 var(--f);color:var(--ink-3)}
/* the screened-line sentence (cart.js SCREEN_LINE). Not a caption, not a note, not a
   disclaimer: it is the one sentence consent_spec.md puts on a line whose kit Yaara reads
   before it ships, and it renders only on lines the result screen flagged with {screen:true}.
   Never a box: no border, no background, no radius. 14px, the DESIGN_LANGUAGE floor. */
.ci .meta.scr{font:400 14px/1.5 var(--f);color:var(--ink-2);margin:5px 0 2px;max-width:34ch}
.ci .chip{display:inline-block;font:600 10.5px/1 var(--f);color:var(--honey-deep);border:1px solid currentColor;border-radius:3px;padding:3px 6px;margin-top:4px}
.ci .pr{font:500 15px/1 var(--f);color:var(--honey-deep);margin-top:6px;font-variant-numeric:tabular-nums}
.ci .pr s{font-size:11.5px;color:var(--ink-3);margin-inline-start:6px}
.ci .qty{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:3px;background:var(--card)}
.ci .qty button{width:28px;height:30px;border:0;background:none;cursor:pointer;color:var(--ink);font:500 16px/1 var(--f)}
.ci .qty b{min-width:22px;text-align:center;font:600 13px/1 var(--f);font-variant-numeric:tabular-nums}
.ci .rm{display:block;margin-top:8px;background:none;border:0;cursor:pointer;color:var(--ink-3);font:500 11.5px/1 var(--f);padding:0}
.ci .rm:hover{color:var(--honey-deep)}
.cart-empty{padding:60px 10px;text-align:center;color:var(--ink-2);font:400 15px/1.8 var(--f)}
#cart .cart-foot{padding:16px 26px 26px;border-top:1px solid var(--line);background:rgba(253,250,245,.7)}
.ship{display:grid;gap:8px;margin-bottom:14px}
.ship i{display:block;height:3px;border-radius:2px;background:var(--line);overflow:hidden;position:relative}
.ship i::after{content:"";position:absolute;inset:0;width:var(--p,0%);background:linear-gradient(90deg,#B28B52,#E9B77C);
  transition:width .8s var(--ease-mask)}
.ship span{font:500 12.5px/1.5 var(--f);color:var(--ink-2)}
.ship.free span{color:var(--honey-deep)}
.sum{display:flex;justify-content:space-between;align-items:baseline;font:600 15px/1 var(--f);color:var(--ink);margin:6px 0 16px}
.sum b{font:500 22px/1 var(--f);color:var(--honey-deep);font-variant-numeric:tabular-nums}
#cart .btn{display:block;text-align:center;width:100%}
#cart .cart-cont{display:block;width:100%;margin-top:12px;background:none;border:0;cursor:pointer;color:var(--honey-deep);font:600 13.5px/1 var(--f)}

.cart-fly{position:fixed;z-index:90;pointer-events:none;width:64px;height:64px;object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(96,66,32,.35))}
.cart-toast{position:fixed;bottom:26px;inset-inline-start:50%;transform:translate(50%,20px);z-index:85;
  background:var(--ink);color:var(--bg);font:600 13.5px/1 var(--f);padding:12px 18px;border-radius:3px;
  opacity:0;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);pointer-events:none}
html:not([dir="rtl"]) .cart-toast{transform:translate(-50%,20px)}
.cart-toast.on{opacity:1;transform:translate(50%,0)}
html:not([dir="rtl"]) .cart-toast.on{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){#cart,#cartScrim,.ship i::after{transition:none}.cart-fly{display:none}}

/* ═══ phone (R40) — the drawer as a full-height sheet under the thumb ═══ */
#cart .cart-items{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media(max-width:760px){
  #cart{width:min(440px,92vw)}
  #cart .cart-head{padding:18px 20px 12px}
  #cart .cart-x{width:44px;height:44px;font-size:28px}
  .cartpill{margin-inline-start:8px}
  #cart .cart-items{padding:4px 20px}
  #cart .cart-foot{padding:14px 20px calc(20px + env(safe-area-inset-bottom,0px))}
  .ci{grid-template-columns:64px 1fr;gap:12px;padding:14px 0}
  .ci .ph{width:64px;height:64px}
  .ci .nm{font-size:15px;-webkit-line-clamp:3}
  .ci .meta{font-size:14px}
  .ci .chip{font-size:14px;padding:4px 8px;border-radius:3px}
  .ci .pr{font-size:16px}
  .ci .pr s{font-size:13.5px}
  .ci .rm{font-size:14px;min-height:44px;min-width:44px;display:flex;align-items:center;margin-top:2px}
  .ci .qty{grid-column:2;justify-self:start;margin-top:2px}
  .ci .qty button{width:44px;height:44px;font-size:19px}
  .ci .qty b{min-width:30px;font-size:15px}
  .ship span{font-size:14px}
  .sum{font-size:16px;margin-bottom:14px}
  #cart .cart-cont{font-size:15px;min-height:44px}
  .cart-toast{bottom:calc(22px + env(safe-area-inset-bottom,0px));font-size:14.5px;padding:13px 20px}
  .cart-empty{font-size:16px;padding:44px 6px}
}

/* reveal-safe: show reveal WRAPPERS only; never touch .ba slider clip/transform */
.rv,[data-rv],.wipe,.figw{opacity:1!important;visibility:visible!important}
.rv,[data-rv]{transform:none!important}
.wipe:not(.ba):not(.ba *){clip-path:none!important}