/* The storefront's cart and chrome (owner list 26.10, batch I1). Loaded
   last, after storefront-cards.css; every rule names its item. The
   behaviour lives in app/order-rules.js (3, 4), app/product-fields.js (5),
   app/cart-chrome.js (19), app/card-type.js (16). */

/* ---- 3. The delivery fee before a way is chosen: a line, not in the total ---- */
.delivery-fee-note{margin:2px 0 8px; font-size:0.8125rem; color:var(--ink-soft); line-height:1.5; font-variant-numeric:tabular-nums;}

/* ---- 5. The tag filter reaches the deals strip and «מוצרים נבחרים» ----
   A card without the tag hides; a strip or a section left with none hides
   while the filter is on (product-fields.js apply). */
:is(#dealsStrip, .editorial-featured-grid) .card.tag-out,
#dealsStrip.tag-empty, .editorial-block.tag-empty{display:none;}

/* ---- 7. The unit chips and the drawer stepper: a 24px tap, 32px on a phone ----
   Taller through padding and a minimum height; the type stays its size. */
.unit-opt, .drawer-row .unit-opt{min-height:24px;}
.drawer-row .qty-btn{min-width:24px; min-height:24px;}
@media (max-width:640px){
  .unit-choice-img .unit-opt, .drawer-row .unit-opt, .card .unit-opt{height:auto; min-height:32px; padding-block:0;}
  .unit-choice-img .unit-opt::before{content:none;}
  .drawer-row .qty-btn{width:32px; height:32px;}
}

/* ---- 15. Computer: the bar never covers the last row; a wide grid in every form ----
   The page ends above the bar (the pill's height or the full bar's), and a
   jump or a Tab onto a card scrolls it clear of the bar too. The side
   categories list keeps #623's widening: its products column grows with
   the 1320px catalogue from 1440px (storefront-cards.css item 2). */
body.has-cart-bar{padding-bottom:max(var(--cart-h, 124px), var(--cart-bar-h, 0px));}
html:has(> body.has-cart-bar){scroll-padding-bottom:calc(var(--cart-h, 124px) + 8px);}
html:has(> body.has-cart-pill){scroll-padding-bottom:calc(var(--cart-bar-h, 72px) + 8px);}
@media (min-width:1440px){
  html[data-layout-categories="side"] #appRoot{
    grid-template-columns:minmax(20px, 1fr) 212px minmax(0, calc(max(var(--container), 1320px) - 276px)) minmax(20px, 1fr);
  }
}

/* ---- «הקטנת הסל»: the bar folds into a small button (owner 2026-10-29) ----
   app/cart-bar.js. The bar's top row is the line list (its ^ opens the cart)
   and the 44px fold control; folded, #cartBar[data-cart-min] shows only the
   button — the cart icon, the count, the total — in the bar's start corner,
   and --cart-h (the bar's height) keeps the floating circles above it. */
.cart-top{display:flex; align-items:stretch; min-width:0; border-bottom:1px solid rgba(251,246,236,0.12);}
.cart-top > .cart-preview{flex:1; min-width:0; width:auto; border-bottom:0;}
.cart-fold{
  flex:0 0 44px; min-height:44px; display:flex; align-items:center; justify-content:center; padding:0;
  border:0; border-inline-start:1px solid rgba(251,246,236,0.12); background:rgba(251,246,236,0.06); color:inherit; cursor:pointer;
}
.cart-fold:hover{background:rgba(251,246,236,0.14);}
.cart-fold svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
/* Inside the bar's rounded clip, so the ring and its halo are drawn inward. */
.cart-fold:focus-visible{outline-offset:-6px; box-shadow:inset 0 0 0 4px var(--focus-ring-halo, #fff) !important;}
.cart-mini{display:none;}
body.has-cart-bar #cartBar[data-cart-min]{justify-content:flex-start;}
body.has-cart-bar #cartBar[data-cart-min] > .cart-inner{display:none;}
body.has-cart-bar #cartBar[data-cart-min] > .cart-mini{
  display:inline-flex; align-items:center; gap:10px; pointer-events:auto;
  min-height:52px; padding-block:6px; padding-inline:14px 18px; border:0; border-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-size:1rem; font-weight:800; line-height:1.2; white-space:nowrap;
  box-shadow:0 12px 28px -10px rgba(0,0,0,0.45);
}
.cart-mini svg{width:22px; height:22px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.cart-mini-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding-inline:6px; border-radius:999px;
  background:var(--gold); color:var(--gold-ink, #2A1F08); font-size:0.875rem; font-weight:700; font-variant-numeric:tabular-nums;
}
.cart-mini-total{unicode-bidi:isolate; font-variant-numeric:tabular-nums;}
html[data-a11y-contrast="1"] .cart-mini{background:#111111 !important; color:#ffffff !important;}
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="off"]):not([data-a11y-motion="1"]) .cart-mini-count.is-pulse{animation:cart-mini-pulse .6s cubic-bezier(.22,1,.36,1);}
  @keyframes cart-mini-pulse{40%{transform:scale(1.35);}}
}

/* ---- 19. One keyboard ring: the brand colour, 2px, 2px off ----
   No rule here: --focus-ring is the shop's primary (or ink) where it keeps
   3:1 on the paper (cart-chrome.js inkVars), --focus-ring-width is 2px
   (theme.css), and every :focus-visible rule in app/ reads the two. */

/* ---- 20. Footer links: a 24px tap (32px on a phone) ---- */
#siteFooter :is(.footer-contact-link, .footer-legal a, .footer-col-link, .footer-info a){
  display:inline-flex; align-items:center; min-height:24px; padding-block:4px;
}
@media (max-width:640px){
  #siteFooter :is(.footer-contact-link, .footer-legal a, .footer-col-link, .footer-info a){min-height:32px;}
}

/* ---- The origin flag stays on the photo, never on the «+» (owner 2026-10-27) ----
   «ארץ מוצא» (app/origins.js) is placed against .card-img, top-left. The
   list (rows) turns its photo static, so the flag was placed against the
   row instead — the row's far corner, on the «+». There it sits in the
   photo's bottom far corner (the kashrut tab holds the top near one), small.
   On a phone the flag is at most 22px everywhere. The boutique's list keeps
   its photo positioned (layouts-voice.css), so its flag is in the photo already. */
@media (max-width:640px){
  .card-img .card-origin .card-origin-mark{width:min(var(--flag-width, 2.25rem), 22px);}
}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card > .card-img > .card-origin{max-width:none;}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card > .card-img > .card-origin .card-origin-mark{width:min(var(--flag-width, 2.25rem), 20px);}
html[data-layout-catalog="rows"]:not([data-catalog-style="boutique"]) #catalog .product-grid:not(.product-carousel) > .card > .card-img > .card-origin{
  top:calc(50% + var(--row-ph) / 2 - 24px); bottom:auto; left:auto; right:auto;
  inset-inline-start:calc(var(--row-edge, 8px) + var(--row-ph) - 24px);
}
/* The boutique's list: the heart holds the photo's top-left and the unit
   pill its bottom-left, so the flag takes the top-right; the kashrut tab is
   one short line along the photo's bottom (its boutique rule set bottom:0
   while the list's set top, which stretched it into a tall grey block). */
html[data-layout-catalog="rows"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card > .card-img > .card-origin{top:2px; right:2px; left:auto; bottom:auto;}
html[data-layout-catalog="rows"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card .card-img > .kashrut-tab{
  top:auto; bottom:0; inset-inline-start:0; max-width:100%; font-size:0.6875rem; padding:2px 6px;
}
/* The list's «פרטי המוצר» button (34px, always shown on a touch screen) sat
   at the row's top end, on the «+». A tap anywhere on the row opens the
   product already (rich-content.js), so in the list the button is the
   keyboard's and the mouse's: over the photo's centre, shown on hover and on
   focus, never in the way of a tap. */
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card{--row-edge:8px;}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card > .product-details-open{
  top:calc(50% - 14px); margin-top:0; inset-inline-end:auto;
  inset-inline-start:calc(var(--row-edge) + var(--row-ph) / 2 - 14px); width:28px; height:28px; pointer-events:none;
}
@media (hover:none){
  html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card > .product-details-open:not(:focus-visible){opacity:0;}
}
@media (max-width:640px){
  html[data-layout-catalog="rows"]:not([data-catalog-style="boutique"]) #catalog .product-grid:not(.product-carousel) > .card{--row-edge:2px;}
}
/* The boutique list's 64–84px photo: the heart at its top-left, the flag at
   its top-right; the sale badge stays off (the row's red price and the old
   one say it). */
html[data-layout-catalog="rows"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card .boutique-favorite{top:2px; left:2px; right:auto; bottom:auto;}
html[data-layout-catalog="rows"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card .boutique-sale-badge{display:none;}