/* The structure's voice slots (app/layouts.js, docs/LAYOUTS.md «Voice»).

   Owner, 2026-10-26: «הערכות לא באמת מיוחדות ודי אותו דבר». Palette and
   hero shape were all a kit changed; below the hero every shop was the same
   catalogue. These slots change the catalogue's form, the brand line, the
   card's shape, the rhythm and the category row:

     html[data-layout-catalog]      rows | gallery | mosaic   (grid: no attribute)
     html[data-layout-header]       centred | typographic     (inline: none)
     html[data-layout-card-shape]   soft | sharp | round      (card: none)
     html[data-layout-rhythm]       dense | airy              (normal: none)
     html[data-layout-categories]   side | cards              (chips / tiles: theme.css)

   Every rule needs one of those attributes, which app/layouts.js writes only
   for a value other than the default, so a shop that never chose one draws
   what it drew before. The same card element in every form (the cart, the
   stepper, the variants, the per-product overrides, the clean card and the
   stock overlay are app.js's, untouched); the parts keep their ids, so
   click-to-edit selects what it always did. No sticky. !important only
   where theme.css's phone grid or boutique.css already uses it. */

/* The card's width cap and the photo's fixed height from «עיצוב החנות»
   (app/store-design.js, the boutique's 280px) belong to the grid. */
html:is([data-layout-catalog="rows"], [data-layout-catalog="gallery"], [data-layout-catalog="mosaic"]) #catalog .product-grid:not(.product-carousel) > .card{max-width:none; width:auto;}
html:is([data-layout-catalog="gallery"], [data-layout-catalog="mosaic"]) #catalog .product-grid:not(.product-carousel) > .card > .card-img{height:auto;}

/* ======================= catalog: rows ======================= */
/* A price list: a small square photo at the start, the name (and the unit
   choice) beside it, the price, then the stepper at the end. One column.
   The photo is the card's only positioned box that moves: .card-img turns
   static, so the price, the regular price, the unit chips, the kashrut tab
   and the sold-out overlay are placed against the row itself. */
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel){
  grid-template-columns:minmax(0, 1fr) !important; gap:0 !important;
  border-top:1px solid var(--line);
}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card{
  --row-ph:84px; --row-qty:172px; --row-price:7.5rem; --row-pad:12px;
  display:grid; grid-template-columns:var(--row-ph) minmax(0, 1fr) var(--row-price) auto;
  grid-template-rows:minmax(0, 1fr); grid-auto-rows:auto; column-gap:16px; align-items:center;
  padding:var(--row-pad) 8px; min-height:calc(var(--row-ph) + 2 * var(--row-pad));
  background:var(--ui-card-bg, var(--paper)); border:0; border-bottom:1px solid var(--line); border-radius:0;
  box-shadow:none; transform:none; text-align:start;
}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card:hover{transform:none; box-shadow:none;
  background:var(--ui-card-bg, color-mix(in srgb, var(--primary) 5%, var(--paper)));}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card > *{grid-column:2; min-width:0; margin-inline:0;}
/* A per-product size (item.card) has no meaning in a list: one row like the rest. */
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card[data-card-span]{grid-column:auto !important; grid-row:auto !important;}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card[data-card-span] > .card-img{aspect-ratio:1 !important; height:var(--row-ph) !important; flex:none !important;}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card[data-card-span] > .card-img > img{position:static !important; width:100% !important; height:100% !important;}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card > .card-img{
  grid-column:1; grid-row:1 / span 8; align-self:center;
  width:var(--row-ph); height:var(--row-ph); aspect-ratio:1; margin:0; position:static;
  border-radius:var(--r-chip); box-shadow:inset 0 0 0 1px var(--line);
}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card > .card-img > img{padding:4px; border-radius:inherit;}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card > .card-name{
  grid-row:1; align-self:center; margin:0; text-align:start; font-size:1rem; font-weight:600;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
html[data-layout-catalog="rows"]:not([data-catalog-style="boutique"]) #catalog .product-grid:not(.product-carousel) > .card:has(.unit-choice-img) > .card-name{align-self:end; margin-bottom:44px;}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card > :is(.qty-row, .card-clean-add){
  grid-column:4; grid-row:1 / span 8; align-self:center; margin:0; width:var(--row-qty); max-width:none;
}
/* The price: its own column before the stepper, plain text. */
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .price-tag{
  top:50%; right:auto; left:auto; inset-inline-end:calc(8px + var(--row-qty) + 16px); transform:translateY(-50%); transform-origin:50% 50%;
  width:var(--row-price); max-width:var(--row-price); padding:0; background:none; box-shadow:none; border-radius:0;
  color:var(--ui-price-text-plain, var(--ink)); font-family:var(--font-body), sans-serif; font-size:1.0625rem; font-weight:800; text-align:end;
}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .price-tag.deal-tag{color:var(--danger, #B93632);}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .price-tag :is(.deal-tag-label, .price-unit){display:block; font-size:0.75rem; font-weight:600; color:var(--ink-soft);}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .price-tag .deal-tag-price{font-size:inherit;}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .deal-was{
  top:auto; bottom:6px; left:auto; right:auto; inset-inline-end:calc(8px + var(--row-qty) + 16px);
  background:none; box-shadow:none; border:0; padding:0; transform:none;
}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .deal-was-label{display:none;}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .unit-choice-img{
  top:auto; bottom:calc(var(--row-pad) + 2px); left:auto; right:auto;
  inset-inline-start:calc(8px + var(--row-ph) + 16px);
}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .kashrut-tab{
  top:var(--row-pad); left:auto; inset-inline-start:8px; max-width:var(--row-ph); border-radius:var(--r-chip);
}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .card-sticker{top:4px; left:auto; right:auto; inset-inline-start:2px; scale:.7;}
/* Sold out: the overlay owns the row's end, over the dead stepper. */
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .oos-overlay{
  inset:8px 8px 8px auto; width:min(var(--row-qty), 46%); padding:0;
}
html[dir="ltr"][data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .oos-overlay{inset:8px auto 8px 8px;}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .oos-overlay{inset-inline-start:auto; inset-inline-end:8px;}
@media (max-width:640px){
  html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card{
    --row-ph:64px; --row-qty:132px; --row-price:0px; --row-pad:10px;
    grid-template-columns:var(--row-ph) minmax(0, 1fr) auto; column-gap:12px; padding-inline:2px;
  }
  html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card > :is(.qty-row, .card-clean-add){grid-column:3;}
  html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card > .card-name{align-self:start; margin:0 0 30px; font-size:0.9375rem; -webkit-line-clamp:1;}
  html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card:has(.unit-choice-img) > .card-name{align-self:start; margin-bottom:52px;}
  /* The price under the name, the unit chips under the price. */
  html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .price-tag{
    top:calc(var(--row-pad) + 24px); transform:none; inset-inline-end:auto; inset-inline-start:calc(2px + var(--row-ph) + 12px);
    width:max-content; max-width:calc(100% - var(--row-ph) - var(--row-qty) - 40px); text-align:start; font-size:0.9375rem;
  }
  html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .price-tag .price-unit{display:inline; margin-inline-start:4px;}
  html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .price-tag .deal-tag-label{display:none;}
  html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .deal-was{
    inset-inline-end:auto; inset-inline-start:calc(2px + var(--row-ph) + 12px); bottom:var(--row-pad); font-size:0.75rem;
  }
  html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .unit-choice-img{inset-inline-start:calc(2px + var(--row-ph) + 12px); bottom:var(--row-pad);}
  html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .kashrut-tab{inset-inline-start:2px;}
  html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .qty-row{padding:3px;}
}

/* Boutique: the price is already a line of its own (boutique.js), so it
   takes the price column; the photo keeps its corner items. */
html[data-layout-catalog="rows"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card{border-radius:0; border-width:0 0 1px; box-shadow:none; padding:var(--row-pad) 8px;}
html[data-layout-catalog="rows"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card > .card-img{position:relative; overflow:hidden;}
html[data-layout-catalog="rows"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card > .price-tag{
  grid-column:3; grid-row:1 / span 8; align-self:center; justify-content:flex-end; margin:0; text-align:end;
}
html[data-layout-catalog="rows"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card > .qty-row{border-top:0; padding-top:0;}
html[data-layout-catalog="rows"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card .card-name{margin:0;}
html[data-layout-catalog="rows"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card .unit-choice-img{inset-inline-start:auto; left:2px; bottom:2px; scale:.8; transform-origin:0 100%;}
html[data-layout-catalog="rows"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card .boutique-favorite{width:28px; height:28px; font-size:18px; top:4px; left:4px;}
html[data-layout-catalog="rows"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card .boutique-sale-badge{top:4px; right:4px; padding:3px 6px; font-size:10px;}
html[data-layout-catalog="rows"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card > :is(.boutique-thumbnails, .boutique-options){display:none;}
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card > .product-details-open{grid-column:auto; top:8px; inset-inline-end:8px;}
@media (max-width:640px){
  html[data-layout-catalog="rows"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card > .price-tag{grid-column:2; grid-row:auto; justify-content:flex-start; text-align:start;}
  html[data-layout-catalog="rows"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card > .card-name{margin:0 0 4px;}
}

/* ======================= catalog: gallery ======================= */
/* Image first: a portrait 4:5 photo, the name and the price under it with
   no card box; the add button is a round + on the photo's corner (the full
   stepper once the product is in the cart). Three across a computer, two
   on a phone. */
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel){
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:28px 12px !important;
}
@media (min-width:900px){
  html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel){grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:48px 28px !important;}
}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card{
  --gal-price-w:min(42%, 7rem);
  background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; transform:none;
}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card:is(:hover, .in-cart){transform:none; box-shadow:none;}
html[data-layout-catalog="gallery"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card.boutique-card{background:transparent !important; border-color:transparent !important; padding:0;}
html[data-layout-catalog="gallery"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card > :is(.card-name, .boutique-subtitle){text-align:start; padding-inline-end:0; margin:0 0 4px;}
html[data-layout-catalog="gallery"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card > .price-tag{justify-content:flex-start; margin:0;}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > .card-img{
  aspect-ratio:4 / 5; margin:0 0 12px; overflow:visible; border-radius:var(--r-control);
  background:var(--ui-card-photo-bg, var(--paper-dim)); box-shadow:none;
}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > .card-img > img{padding:0; object-fit:cover; border-radius:inherit; transition:transform .5s cubic-bezier(.22,1,.36,1);}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card:hover > .card-img > img{transform:scale(1.03);}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > .card-name{
  margin:0 0 4px; padding-inline-end:calc(var(--gal-price-w) + 10px); min-height:1.4em;
  text-align:start; font-size:1.0625rem; font-weight:600; line-height:1.35;
}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > :not(.card-img, .card-name, .qty-row){margin-inline:0; text-align:start; justify-content:flex-start;}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag{
  top:calc(100% + 12px); right:auto; left:auto; inset-inline-end:0; transform:none;
  width:var(--gal-price-w); max-width:var(--gal-price-w); padding:0; background:none; box-shadow:none; border-radius:0;
  color:var(--ink); font-family:var(--font-body), sans-serif; font-size:1.0625rem; font-weight:700; text-align:end;
}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag.deal-tag{color:var(--danger, #B93632);}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag :is(.deal-tag-label, .price-unit){display:block; font-size:0.75rem; font-weight:600; color:var(--ink-soft);}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag .deal-tag-price{font-size:inherit;}
/* The add button on the photo's bottom corner: a + alone until the product
   is in the cart, then the whole stepper. 125cqi is the photo's height (the
   card is its own size container, the photo 4:5 of its width). */
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > .qty-row{
  position:absolute; z-index:3; top:calc(125cqi - 58px); right:10px; left:auto; margin:0;
  width:auto; max-width:calc(100% - 20px); padding:3px; gap:2px;
  background:var(--ui-card-bg, var(--paper)); border-radius:999px; box-shadow:0 6px 18px -6px rgba(0,0,0,0.35);
}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card:not(.in-cart) > .qty-row > :not(.plus){display:none;}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > .qty-row .qty-btn{width:44px; height:44px; border-radius:999px; margin:0; padding:0;}
/* A per-product size (item.card) or a card that rearranges: the stepper back in the flow. */
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card[data-card-span] > .qty-row,
html[data-layout-catalog="gallery"][data-layout-card-shape="round"] #catalog .product-grid:not(.product-carousel) > .card > .qty-row{
  position:static; margin:10px 0 0; align-self:flex-start;
}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .oos-overlay{inset:auto 10px 10px; padding:0;}
@media (max-width:640px){
  html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > .card-name{font-size:0.9375rem; padding-inline-end:0; margin-bottom:24px;}
  html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag{
    top:auto; bottom:-2px; inset-inline-end:auto; inset-inline-start:0; width:auto; max-width:100%; text-align:start; font-size:0.9375rem;
  }
  html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag .price-unit{display:inline; margin-inline-start:4px;}
  html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag .deal-tag-label{display:none;}
  html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .deal-was{top:6px; bottom:auto; left:6px; right:auto;}
  html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > .card-img{margin-bottom:8px;}
  html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag{top:calc(100% + 8px + 1.4em); bottom:auto;}
  html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > .qty-row{right:6px; top:calc(125cqi - 52px);}
}

/* The boxless forms (gallery, round) on a dark ground: light text, as the
   section titles there (theme.css). */
html:is([data-theme-background="deep"], [data-theme-background="black"], [data-theme-background="ink"], [data-theme-background="espresso"],
  [data-theme-background="darkhatch"], [data-theme-background="darkherring"], [data-theme-background="darkfade"]):is([data-layout-catalog="gallery"], [data-layout-card-shape="round"]) #catalog .card:not(.boutique-card) > :is(.card-name, .price-tag:not(.deal-tag)){color:#F3F5F3;}

/* ======================= catalog: mosaic ======================= */
/* A market stall: tiles close together, full-bleed photos, every sixth a
   big one (two by two; on a phone a wide one), alternate tiles tinted. A
   per-product size (item.card) keeps its own span. */
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel){
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:8px !important; grid-auto-flow:row dense;
}
@media (min-width:641px){
  html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel){grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:10px !important;}
}
@media (min-width:1100px){
  html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel){grid-template-columns:repeat(5, minmax(0, 1fr)) !important;}
}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card{
  padding:0 0 10px; overflow:hidden; border:0; border-radius:var(--r-control); box-shadow:none;
  background:var(--ui-card-bg, var(--paper));
}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:nth-child(3n+2){background:var(--ui-card-bg, color-mix(in srgb, var(--primary) 9%, var(--paper)));}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:nth-child(3n){background:var(--ui-card-bg, color-mix(in srgb, var(--gold) 16%, var(--paper)));}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:hover{transform:none; box-shadow:inset 0 0 0 2px var(--primary);}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card > .card-img{
  aspect-ratio:1; margin:0 0 8px; border-radius:0; box-shadow:none; background:transparent;
}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card > .card-img > img{padding:0; object-fit:cover; mix-blend-mode:multiply;}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card > .card-name{
  margin:0 10px 6px; text-align:start; font-size:0.9375rem; font-weight:800; line-height:1.25;
}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card > .qty-row{margin-inline:10px; max-width:none; width:auto;}
html[data-layout-catalog="mosaic"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card.boutique-card{padding:0 0 10px; border-radius:var(--r-control);}
html[data-layout-catalog="mosaic"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card.boutique-card:nth-child(3n+2){background:var(--ui-card-bg, color-mix(in srgb, var(--primary) 7%, #fff)) !important;}
html[data-layout-catalog="mosaic"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card > :is(.card-name, .boutique-subtitle){margin-inline:10px; text-align:start;}
html[data-layout-catalog="mosaic"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card > .price-tag{justify-content:flex-start; padding-inline:10px; box-sizing:border-box;}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1){grid-column:span 2; grid-row:span 2;}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1) > .card-img{aspect-ratio:auto; flex:1 1 auto; min-height:0;}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1) > .card-img > img{position:absolute; inset:0;}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1) > .card-name{font-size:1.375rem; margin:4px 14px 8px;}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1) > .qty-row{margin-inline:14px; max-width:220px;}
@media (max-width:640px){
  html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1){grid-row:span 1;}
  html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1) > .card-img{aspect-ratio:16 / 9; flex:none;}
  html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1) > .card-name{font-size:1.0625rem;}
}

/* The deals strip sizes its cards from the catalogue's first card
   (app.js sizeDealCards): a row, a gallery photo or a big mosaic tile is not
   a strip card, so the strip keeps the grid's card width. */
html:is([data-layout-catalog="rows"], [data-layout-catalog="gallery"], [data-layout-catalog="mosaic"]) .deals-track > .deal-card{width:220px; flex:0 0 220px;}
@media (max-width:640px){
  html:is([data-layout-catalog="rows"], [data-layout-catalog="gallery"], [data-layout-catalog="mosaic"]) .deals-track > .deal-card{width:170px; flex:0 0 170px;}
}

/* ======================= cardShape ======================= */
html[data-layout-card-shape="soft"] :is(#catalog, #dealsStrip) .card{
  border-color:transparent; border-radius:26px;
  box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 22px 40px -24px rgba(0,0,0,0.38);
}
html[data-layout-card-shape="soft"] :is(#catalog, #dealsStrip) .card .card-img{border-radius:20px; box-shadow:none;}
html[data-layout-card-shape="soft"] :is(#catalog, #dealsStrip) .card :is(.qty-row, .qty-btn, .price-tag){border-radius:999px;}
html[data-layout-card-shape="soft"][data-layout-catalog="rows"] #catalog .product-grid > .card{border-radius:20px; margin-bottom:8px; border-bottom:0;}

html[data-layout-card-shape="sharp"] :is(#catalog, #dealsStrip) .card{border-radius:0; box-shadow:none; border:1px solid var(--line);}
html[data-layout-card-shape="sharp"] :is(#catalog, #dealsStrip) .card:is(:hover, .in-cart){transform:none; box-shadow:none; border-color:var(--ink);}
html[data-layout-card-shape="sharp"] :is(#catalog, #dealsStrip) .card :is(.card-img, .qty-row, .qty-btn, .price-tag, .deal-was, .unit-toggle, .unit-opt, .card-clean-add){border-radius:0;}
html[data-layout-card-shape="sharp"] :is(#catalog, #dealsStrip) .card .card-img{box-shadow:none;}
html[data-layout-card-shape="sharp"] :is(#catalog, #dealsStrip) .card .price-tag{transform:none;}
html[data-layout-card-shape="sharp"][data-layout-catalog="rows"] #catalog .product-grid > .card{border-width:0 0 1px;}
html[data-layout-card-shape="sharp"][data-layout-catalog="gallery"] #catalog .product-grid > .card{border:0;}

html[data-layout-card-shape="round"] :is(#catalog, #dealsStrip) .card{background:transparent; border-color:transparent; box-shadow:none; text-align:center;}
html[data-layout-card-shape="round"] :is(#catalog, #dealsStrip) .card:hover{transform:translateY(-3px); box-shadow:none;}
html[data-layout-card-shape="round"] :is(#catalog, #dealsStrip) .card .card-img{
  aspect-ratio:1; width:86%; align-self:center; margin-inline:auto; border-radius:50%; overflow:visible;
  background:var(--ui-card-photo-bg, var(--paper)); box-shadow:0 0 0 6px color-mix(in srgb, var(--primary) 12%, transparent);
}
html[data-layout-card-shape="round"] :is(#catalog, #dealsStrip) .card .card-img > img{border-radius:50%; object-fit:cover; padding:0;}
html[data-layout-card-shape="round"] :is(#catalog, #dealsStrip) .card :is(.qty-row, .qty-btn){border-radius:999px;}
html[data-layout-card-shape="round"] :is(#catalog, #dealsStrip) .card .card-name{text-align:center; margin-top:6px;}
html[data-layout-card-shape="round"][data-layout-catalog="rows"] #catalog .product-grid > .card .card-img{width:var(--row-ph); box-shadow:none;}
html[data-layout-card-shape="round"][data-layout-catalog="rows"] #catalog .product-grid > .card .card-name{text-align:start; margin-top:0;}
html[data-layout-card-shape="round"][data-layout-catalog="gallery"] #catalog .product-grid > .card .card-img{width:100%;}
html[data-layout-card-shape="round"][data-layout-catalog="gallery"] #catalog .product-grid > .card .card-name{text-align:start;}
html[data-layout-card-shape="round"][data-layout-catalog="mosaic"] #catalog .product-grid > .card{background:var(--ui-card-bg, var(--paper)); border-radius:28px;}
html[data-layout-card-shape="round"][data-layout-catalog="mosaic"] #catalog .product-grid > .card .card-img{width:82%; margin:10px auto 8px;}

/* ======================= rhythm ======================= */
/* dense: a 1200px page, gaps and the sections' padding about a third
   tighter. airy: a 960px page, gaps +40%, padding +50%, titles at the
   start. */
html[data-layout-rhythm="dense"] body{--container:1200px;}
html[data-layout-rhythm="dense"] .nav-wrap{padding:10px 0 8px;}
html[data-layout-rhythm="dense"] #catalog .category-section{padding:24px 15px 26px; margin-bottom:16px;}
html[data-layout-rhythm="dense"] #catalog .category-head{margin-bottom:14px;}
html[data-layout-rhythm="dense"] #catalog .product-grid:not(.product-carousel){gap:8px;}
html[data-layout-rhythm="dense"] .prod-search{margin-bottom:10px;}
html[data-layout-rhythm="dense"] .editorial{margin-block:22px; gap:18px;}
html[data-layout-rhythm="dense"] .editorial-block{padding:clamp(14px, 2.8vw, 30px);}
@media (min-width:1100px){
  html[data-layout-rhythm="dense"]:not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel){gap:12px;}
}

html[data-layout-rhythm="airy"] body{--container:960px;}
html[data-layout-rhythm="airy"] .nav-wrap{padding:28px 0 24px;}
html[data-layout-rhythm="airy"] #catalog .category-section{padding:52px 33px 58px; margin-bottom:48px;}
html[data-layout-rhythm="airy"] #catalog .category-head{margin-bottom:36px; justify-content:flex-start;}
html[data-layout-rhythm="airy"] #catalog .category-head h2{font-size:calc(1.875rem * var(--part-title-scale, 1)); letter-spacing:-0.01em;}
html[data-layout-rhythm="airy"] .prod-search{margin-bottom:32px;}
html[data-layout-rhythm="airy"] .editorial{margin-block:56px; gap:40px;}
html[data-layout-rhythm="airy"] .editorial-block{padding:clamp(28px, 6vw, 66px);}
html[data-layout-rhythm="airy"] :is(.editorial-block, .deals-strip) :is(h2, h3):first-of-type{text-align:start;}
@media (min-width:1100px){
  html[data-layout-rhythm="airy"]:not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel){gap:31px;}
}
@media (max-width:640px){
  html[data-layout-rhythm="dense"] #catalog .category-section{padding:16px 8px 18px !important; margin-bottom:10px;}
  html[data-layout-rhythm="airy"] #catalog .category-section{padding:34px 14px 40px !important; margin-bottom:28px;}
  html[data-layout-rhythm="airy"]:not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel){gap:14px !important;}
}

/* ======================= categories: side ======================= */
/* A computer: the categories as a list at the start side, in the flow
   beside the search, the deals and the catalogue (the page becomes two
   columns; everything else spans both). Not sticky: the fixed bar
   (#catChips) still takes over once the list scrolls away. A phone keeps
   the chips row. */
@media (min-width:1024px){
  html[data-layout-categories="side"] #appRoot{
    display:grid; align-items:start; grid-auto-flow:row;
    grid-template-columns:minmax(20px, 1fr) 212px minmax(0, calc(var(--container) - 276px)) minmax(20px, 1fr);
    column-gap:0;
  }
  html[data-layout-categories="side"] #appRoot > *{grid-column:1 / -1; min-width:0;}
  html[data-layout-categories="side"] #appRoot > #shop ~ *{grid-column:3; max-width:none; margin-inline:0; padding-inline:24px 0;}
  html[data-layout-categories="side"] #appRoot > #catalog ~ *{grid-column:1 / -1; max-width:none; margin-inline:0; padding-inline:0;}
  /* A section placed after the products keeps its own width and padding (kit sections, 2026-10-27). */
  html[data-layout-categories="side"] #appRoot > #catalog ~ .editorial-block{max-width:var(--block-width-desktop,var(--container,70rem)); margin-inline:auto; padding:var(--block-padding-desktop,clamp(20px,4vw,44px));}
  html[data-layout-categories="side"] #appRoot > #shop{
    grid-column:2; grid-row:span 12; align-self:start; z-index:1;
    background:transparent; border:0; padding:32px 0 0; margin:0;
  }
  html[data-layout-categories="side"] #appRoot > #shop ~ #prodSearch{margin-top:28px;}
  html[data-layout-categories="side"] #appRoot > #shop ~ #dealsStrip .product-grid.product-carousel{padding-inline:0;}
  html[data-layout-categories="side"] #shop .nav-scroll{
    display:flex; flex-direction:column; gap:2px; overflow:visible; padding:12px 0; max-width:none; margin:0;
    border-top:2px solid var(--ink); border-bottom:1px solid var(--line);
  }
  html[data-layout-categories="side"] #shop .nav-pill{
    aspect-ratio:auto; flex-direction:row; align-items:center; gap:12px; min-height:48px; padding:4px 8px;
    background:transparent !important; border:0 !important; border-radius:var(--r-chip); box-shadow:none; transform:none;
  }
  html[data-layout-categories="side"] #shop .nav-pill:hover{background:var(--paper-dim) !important; transform:none; box-shadow:none;}
  html[data-layout-categories="side"] #shop .nav-pill.active{background:color-mix(in srgb, var(--primary) 10%, transparent) !important; box-shadow:none; transform:none;}
  html[data-layout-categories="side"] #shop .nav-pill .cat-card-photo{flex:0 0 36px; width:36px; height:36px; border-radius:50%;}
  html[data-layout-categories="side"] #shop .nav-pill .cat-card-body{flex:1 1 auto; min-width:0; padding:0; justify-content:flex-start; overflow:visible; clip-path:none; background:transparent !important;}
  /* Let list labels wrap and their glyph overhang paint: a one-line clamp
     cut Hebrew ink even when the name's measured width fitted. */
  html[data-layout-categories="side"] #shop .nav-pill .cat-card-name{display:block; font-size:1rem; font-weight:600; text-align:start; line-height:1.5; -webkit-line-clamp:unset; overflow:visible; clip-path:none; white-space:normal; overflow-wrap:anywhere; padding-inline-start:6px;}
  html[data-layout-categories="side"] #shop .nav-pill.active .cat-card-name{color:var(--primary); font-weight:800;}
  html[data-layout-categories="side"] #shop .nav-pill .cat-card-arrow{display:none;}
}

/* ======================= categories: cards ======================= */
/* Photo cards, the name under the photo on a band of the brand colour. */
html[data-layout-categories="cards"] .nav-scroll{
  --cat-gap:14px;
  max-width:min(var(--container), calc(var(--cat-cols) * 220px + (var(--cat-cols) - 1) * var(--cat-gap) + 2 * var(--cat-pad)));
}
html[data-layout-categories="cards"] .nav-pill{
  aspect-ratio:4 / 5; overflow:hidden; border:0 !important; border-radius:var(--r-control);
  background:var(--primary) !important; box-shadow:0 10px 24px -14px rgba(0,0,0,0.45);
}
html[data-layout-categories="cards"] .nav-pill.active{background:var(--primary) !important; box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--primary);}
html[data-layout-categories="cards"] .nav-pill .cat-card-photo{height:76%; flex:0 0 76%; border-radius:0; aspect-ratio:auto;}
html[data-layout-categories="cards"] .nav-pill .cat-card-body{background:var(--primary) !important; border-radius:0; padding:6px 8px;}
html[data-layout-categories="cards"] .nav-pill .cat-card-name{color:var(--ui-cat-name-on-brand, #fff); font-family:var(--font-display), var(--font-body), sans-serif;
  font-size:clamp(0.75rem, 11cqi, 1.125rem); font-weight:800; letter-spacing:.01em;}
html[data-layout-categories="cards"] .nav-pill .cat-card-arrow{display:none;}

/* ======================= header: centred ======================= */
/* A masthead over the hero: the logo and the shop's name, centred, on the
   page ground; the hero (photo, wash, split frame) starts under it. The
   name is shown here even when the owner hid it under a logo: it is the
   masthead. Phone and computer alike. */
html[data-layout-header="centred"] #home{
  --mast-h:96px; justify-content:flex-start; padding-top:calc(var(--mast-h) + 48px);
}
html[data-layout-header="centred"] #home:has(> .hero-content > #heroLogo:not([style*="none"])){--mast-h:150px;}
html[data-layout-header="centred"] #home .hero-content{position:static;}
html[data-layout-header="centred"] #home .hero-content > *{position:relative; z-index:2;}
html[data-layout-header="centred"] #home .hero-content::before{
  content:""; position:absolute; z-index:2; inset-inline:0; top:0; height:var(--mast-h);
  background:var(--ui-page-bg, var(--paper)); box-shadow:inset 0 -1px 0 var(--line), inset 0 -4px 0 var(--paper), inset 0 -5px 0 var(--line);
}
html[data-layout-header="centred"] #home :is(#heroBg, .hero-overlay){top:var(--mast-h);}
html[data-layout-header="centred"] #home::before, html[data-layout-header="centred"] #home::after{top:var(--mast-h);}
html[data-layout-header="centred"] #home #heroLogo{
  position:absolute; z-index:3; top:16px; left:0; right:0; margin:0 auto;
  width:min(calc(64px * var(--logo-scale, 1)), 30vw); height:min(calc(64px * var(--logo-scale, 1)), 30vw); filter:none;
}
html[data-layout-header="centred"] #home .hero-name,
html[data-layout-header="centred"] #home .hero-name.is-hidden{
  position:absolute; z-index:3; left:0; right:0; top:calc(var(--mast-h) - 66px); width:auto; height:auto; margin:0 auto; padding:0 64px;
  clip:auto; clip-path:none; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  color:var(--ink); font-family:var(--font-display), var(--font-body), sans-serif; font-size:clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight:800; letter-spacing:.06em; text-align:center; line-height:1.2;
}
html[data-layout-header="centred"] #home .lang-picker{z-index:4;}
html[data-layout-header="centred"] .head-links{flex:0 1 auto; margin-inline:auto; justify-content:center;}
html[data-layout-header="centred"] .head-wa{margin-inline-start:0;}
/* split, computer: the frame starts under the masthead. */
@media (min-width:768px){
  html[data-layout-header="centred"][data-layout-hero="split"] #home #heroBg[style*="url("]{inset-block-start:calc(var(--mast-h) + 36px);}
}
/* split, phone: the photo is in the flow, first; it goes under the masthead. */
@media (max-width:767px){
  html[data-layout-header="centred"][data-layout-hero="split"] #home{padding-top:var(--mast-h);}
  html[data-layout-header="centred"][data-layout-hero="split"] #home #heroBg{top:auto;}
}
@media (max-width:600px){
  html[data-layout-header="centred"] #home{--mast-h:80px; padding-top:calc(var(--mast-h) + 28px);}
  html[data-layout-header="centred"] #home:has(> .hero-content > #heroLogo:not([style*="none"])){--mast-h:124px;}
  html[data-layout-header="centred"] #home #heroLogo{top:12px; width:min(calc(52px * var(--logo-scale, 1)), 30vw); height:min(calc(52px * var(--logo-scale, 1)), 30vw);}
  html[data-layout-header="centred"] #home .hero-name, html[data-layout-header="centred"] #home .hero-name.is-hidden{top:calc(var(--mast-h) - 52px); font-size:1.375rem; padding:0 56px;}
}

/* ======================= header: typographic ======================= */
/* No photo (app/layouts.js reads the hero as none): the shop's name as an
   oversized wordmark, one line under it, the buttons as a row. The bar
   above the head (#shopHeadBar: links, WhatsApp) stays where it is. */
html[data-layout-header="typographic"] #home{
  min-height:0; padding:56px 0 36px; text-align:start; justify-content:flex-start; color:var(--ink);
}
html[data-layout-header="typographic"] #home::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--ui-page-bg, var(--paper)); box-shadow:inset 0 -3px 0 var(--ink);
}
html[data-layout-header="typographic"] #home :is(#heroBg, .hero-overlay, .hero-video-toggle, #heroDesc, #heroInfo){display:none;}
html[data-layout-header="typographic"] #home .hero-content{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:24px; align-items:end; width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:20px 64px;
}
html[data-layout-header="typographic"] #home .hero-content > *{grid-column:1; margin-inline:0;}
html[data-layout-header="typographic"] #home #heroLogo{
  width:min(calc(56px * var(--logo-scale, 1)), 30vw); height:min(calc(56px * var(--logo-scale, 1)), 30vw);
  margin:0 0 18px; filter:none; justify-self:start;
}
html[data-layout-header="typographic"] #home .hero-name,
html[data-layout-header="typographic"] #home .hero-name.is-hidden{
  position:static; width:auto; height:auto; margin:0; padding:0; clip:auto; clip-path:none; overflow:visible; white-space:normal;
  color:var(--ui-heading, var(--primary)); font-family:var(--font-display), var(--font-body), sans-serif;
  font-size:clamp(2.75rem, 9vw, 7.25rem); font-weight:900; line-height:0.95; letter-spacing:-0.025em; text-wrap:balance; overflow-wrap:anywhere;
}
html[data-layout-header="typographic"] #home #heroTitle{
  width:auto; max-width:100%; margin:14px 0 0; color:var(--ink-soft);
  font-size:clamp(1rem, 1.6vw, 1.25rem); font-weight:500; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html[data-layout-header="typographic"] #home .hero-actions{
  grid-column:2; grid-row:1 / span 6; align-self:end; flex-direction:row; flex-wrap:wrap; justify-content:flex-end;
  gap:8px; margin:0; max-width:none;
}
html[data-layout-header="typographic"] #home .hero-actions .btn{width:auto; min-height:44px; padding:10px 20px; box-shadow:none;}
html[data-layout-header="typographic"] #home .btn-outline{border-color:var(--ui-btn-outline-border, var(--ink)); color:var(--ui-btn-outline-text, var(--ink));}
html[data-layout-header="typographic"] #home .hero-ann{grid-column:1 / -1;}
@media (max-width:767px){
  html[data-layout-header="typographic"] #home{padding:36px 0 24px;}
  html[data-layout-header="typographic"] #home .hero-content{grid-template-columns:minmax(0, 1fr); padding-inline:16px;}
  html[data-layout-header="typographic"] #home .hero-actions{grid-column:1; grid-row:auto; justify-content:flex-start; margin-top:18px;}
  html[data-layout-header="typographic"] #home .hero-actions .btn{flex:1 1 0; padding-inline:12px;}
  html[data-layout-header="typographic"] #home #heroTitle{white-space:normal;}
}