/*
 * The cart's Extras card — assets/css/cart_extras.css (the same file in all four builds)
 *
 * Drawn by assets/js/cart_extras.js, decided by staff/checkout_extra_lib.php, linked by
 * shop_landing_js.php at the foot of the page (nothing waits for it). On the storefront's
 * tokens (storefront.css § 1), light and dark: one hairline card above Subtotal, a 44 px row
 * per extra — the tick in the page's one colour, the name, a muted chip only when Required or
 * Sold out, the price. Every rule begins html[data-sf].
 */
html[data-sf] .cx{min-width:0;margin:4px 0 8px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);}
html[data-sf] .cx[hidden]{display:none;}
/* a legend that sits inside its box like a heading, not on its border */
html[data-sf] .cx__h{float:left;width:100%;margin:0;padding:10px 0 0;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;color:var(--mute);}
html[data-sf] .cx__rows{clear:both;}

html[data-sf] .cx__row{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:6px 0;border-top:1px solid var(--line-2);
  font-size:15px;font-weight:400;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
html[data-sf] .cx__row:first-child{border-top:0;}

/* the tick: a real checkbox (keyboard, screen readers), drawn in the page's colour */
html[data-sf] .cx__tick{position:relative;flex:none;width:22px;height:22px;margin:0;padding:0;border:1.5px solid var(--faint);border-radius:7px;
  background:var(--surface);opacity:1;-webkit-appearance:none;appearance:none;cursor:pointer;
  transition:background-color var(--fast,.15s) ease,border-color var(--fast,.15s) ease;}
html[data-sf] .cx__tick::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:5px;margin:-4px 0 0 -5px;
  border:solid #fff;border-width:0 0 2px 2px;opacity:0;transform:rotate(-45deg) scale(.6);
  transition:opacity var(--fast,.15s) ease,transform var(--fast,.15s) ease;}
html[data-sf] .cx__tick:checked{border-color:var(--brand-fill);background:var(--brand-fill);}
html[data-sf] .cx__tick:checked::after{opacity:1;transform:rotate(-45deg) scale(1);}
html[data-sf] .cx__tick:disabled{opacity:1;cursor:default;}
html[data-sf] .cx__tick:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
html[data-sf] .cx__row:hover .cx__tick:not(:disabled):not(:checked){border-color:var(--brand);}

/* a long name is cut, never its count: "Takeaway pa… ×2" */
html[data-sf] .cx__name{display:flex;align-items:baseline;flex:1 1 auto;min-width:0;font-size:15px;line-height:20px;font-weight:600;color:var(--ink);}
html[data-sf] .cx__nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html[data-sf] .cx__many{flex:none;margin-left:6px;font-weight:500;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap;}
html[data-sf] .cx__tag{flex:none;padding:2px 8px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--mute);font-size:12px;line-height:16px;font-weight:600;}
html[data-sf] .cx__tag--out{background:var(--bad-wash);color:var(--bad);}
html[data-sf] .cx__price{flex:none;min-width:52px;text-align:right;font-size:14px;line-height:20px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;}

/* held by the shop's rule: no pointer, the tick stays in the page's colour */
html[data-sf] .cx__row.is-locked{cursor:default;}
/* none left: greyed, the tick empty */
html[data-sf] .cx__row.is-out{cursor:default;}
html[data-sf] .cx__row.is-out .cx__name,html[data-sf] .cx__row.is-out .cx__price{color:var(--faint);}
html[data-sf] .cx__row.is-out .cx__tick{border-color:var(--line);background:var(--surface-2);}
/* on its way to the shop: the tick turns while it is asked */
html[data-sf] .cx__row.is-busy{cursor:progress;}
html[data-sf] .cx__row.is-busy .cx__tick{border-color:var(--line);background:var(--surface);}
html[data-sf] .cx__row.is-busy .cx__tick::after{width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid var(--brand);border-right-color:transparent;border-radius:50%;
  opacity:1;transform:none;animation:cx-turn .7s linear infinite;}
@keyframes cx-turn{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  html[data-sf] .cx__tick,html[data-sf] .cx__tick::after{transition:none;}
  html[data-sf] .cx__row.is-busy .cx__tick::after{animation:none;border-right-color:var(--brand);opacity:.6;}
}