/* «סל בפינה למעלה» (owner 2026-11-01): the round cart button in a top
   corner instead of the bottom bar. app/cart-corner.js sets
   html[data-cart-corner="right"|"left"] on the device it is chosen for and
   --cc-w (the button's width); app/store-design.js writes --cc-edge (the
   gap, 12px unless set), --cc-scale («גודל») and --cc-radius («פינות»).
   The colours are the bar's (theme.ui cartBg, cartText, cartTotal,
   cartCountBg, cartCountText). No key: no attribute, nothing here applies. */
.cart-corner{display:none;}
.cart-corner-live{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}

html[data-cart-corner]{--cc-size:calc(48px * var(--cc-scale, 1));}
/* The bar steps aside: no card, no folded button, no room kept at the
   bottom, the floating circles back at their own place. «לכל המוצרים» (an
   empty cart, cart-bar-empty.js) is not the cart and stays. */
html[data-cart-corner] #cartBar > .cart-inner,
html[data-cart-corner] body.has-cart-bar #cartBar[data-cart-min] > .cart-mini{display:none;}
html[data-cart-corner] body.has-cart-bar{padding-bottom:0;}
html[data-cart-corner][data-cart-bar]{scroll-padding-bottom:auto;}
html[data-cart-corner] body.has-cart-bar .float-actions{bottom:calc(16px + env(safe-area-inset-bottom));}
html[data-cart-corner] body.has-cart-bar .a11y-panel{bottom:calc(80px + env(safe-area-inset-bottom));}
html[data-cart-corner] body.has-cart-bar .float-wa{bottom:22px;}
@media (max-width:480px){
  html[data-cart-corner] body.has-cart-bar .float-wa{bottom:calc(16px + env(safe-area-inset-bottom));}
}

/* The button: a circle (a pill with the total on a computer), fixed in the
   physical corner named (a deliberate fixed corner, as the language picker
   and the floats), clear of the iPhone's safe areas. The badge sits on its
   inner top corner, so the gap keeps at least 6px for it. */
html[data-cart-corner] body.has-cart-bar .cart-corner{
  position:fixed; z-index:1; pointer-events:auto;
  top:calc(max(var(--cc-edge, 12px), 6px) + env(safe-area-inset-top) + var(--cc-lift, 0px));
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:var(--cc-size); height:var(--cc-size); padding:0; box-sizing:border-box;
  border:0; border-radius:var(--cc-radius, 999px); cursor:pointer;
  background:var(--ui-cart-bg, var(--primary)); color:var(--ui-cart-text, var(--paper));
  font-family:var(--font-body), sans-serif; font-weight:800; font-size:calc(1rem * var(--cc-scale, 1)); line-height:1;
  box-shadow:0 10px 24px -10px rgba(0,0,0,0.45);
}
html[data-cart-corner="right"] body.has-cart-bar .cart-corner{right:max(var(--cc-edge, 12px), env(safe-area-inset-right));}
html[data-cart-corner="left"] body.has-cart-bar .cart-corner{left:max(var(--cc-edge, 12px), env(safe-area-inset-left));}
.cart-corner svg{width:calc(var(--cc-size) * .46); height:calc(var(--cc-size) * .46); flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.cart-corner-total{display:none; color:var(--ui-cart-total, inherit); unicode-bidi:isolate; font-variant-numeric:tabular-nums; white-space:nowrap;}
@media (min-width:641px){
  html[data-cart-corner] body.has-cart-bar .cart-corner{padding-inline:calc(var(--cc-size) * .3);}
  html[data-cart-corner] .cart-corner-total{display:inline;}
}
.cart-corner-count{
  position:absolute; top:-6px; display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding-inline:5px; box-sizing:border-box; border-radius:999px;
  background:var(--ui-cart-count-bg, var(--gold)); color:var(--ui-cart-count-text, var(--gold-ink, #2A1F08));
  font-size:0.75rem; font-weight:700; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--ui-cart-bg, var(--primary));
}
html[data-cart-corner="right"] .cart-corner-count{left:-6px;}
html[data-cart-corner="left"] .cart-corner-count{right:-6px;}
/* «גודל» below 92%: the tap area stays 44px around the smaller circle. */
.cart-corner::after{content:""; position:absolute; inset:min(0px, calc((var(--cc-size, 48px) - 44px) / 2)); border-radius:inherit;}
.cart-corner:hover{filter:brightness(1.08);}
.cart-corner:focus-visible{outline:var(--focus-ring-width, 2px) solid var(--focus-ring, #0B5FFF); outline-offset:3px;}
html[data-a11y-contrast="1"] .cart-corner{background:#111111 !important; color:#ffffff !important;}

/* The floating category bar (#catChips, fixed at the top): the button sits
   in it, centred on its height, and the bar keeps that side's room free
   (only where its centred row would reach the button). */
html[data-cart-corner] body.has-cart-bar #catChips:not([hidden]) ~ #cartBar .cart-corner{
  top:max(8px, calc((var(--chip-h, 61px) - var(--cc-size)) / 2));
}
html[data-cart-corner="right"] body.has-cart-bar .cat-chips{padding-right:max(0px, calc(var(--cc-edge, 12px) + var(--cc-w, 48px) + 8px - max(0px, (100% - var(--container, 1200px)) / 2)));}
html[data-cart-corner="left"] body.has-cart-bar .cat-chips{padding-left:max(0px, calc(var(--cc-edge, 12px) + var(--cc-w, 48px) + 8px - max(0px, (100% - var(--container, 1200px)) / 2)));}
/* The bar above the head (head-bar.js) keeps the same room; the language
   picker (always top-left, theme.css) steps in beside the left corner. */
html[data-cart-corner="right"] body.has-cart-bar .head-bar{padding-right:max(0px, calc(var(--cc-edge, 12px) + var(--cc-w, 48px) + 8px - max(0px, (100% - var(--container, 1200px)) / 2)));}
html[data-cart-corner="left"] body.has-cart-bar .head-bar{padding-left:max(0px, calc(var(--cc-edge, 12px) + var(--cc-w, 48px) + 8px - max(0px, (100% - var(--container, 1200px)) / 2)));}
html[data-cart-corner="left"]:not([data-site-header]) body.has-cart-bar #home .lang-picker{left:calc(max(var(--cc-edge, 12px), env(safe-area-inset-left)) + var(--cc-w, 48px) + 10px);}

/* An add: one short bump of the button and its badge; with no motion, a
   still ring for a moment instead. */
.cart-corner.is-bump{box-shadow:0 0 0 4px var(--ui-cart-count-bg, var(--gold)), 0 10px 24px -10px rgba(0,0,0,0.45);}
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="off"]):not([data-a11y-motion="1"]) .cart-corner.is-bump{animation:cart-corner-bump .5s cubic-bezier(.22,1,.36,1);}
  html:not([data-motion="off"]):not([data-a11y-motion="1"]) .cart-corner.is-bump .cart-corner-count{animation:cart-corner-pop .5s cubic-bezier(.22,1,.36,1);}
  @keyframes cart-corner-bump{35%{transform:scale(1.14);}70%{transform:scale(.97);}}
  @keyframes cart-corner-pop{40%{transform:scale(1.35);}}
}