/* GENERATED by test/pack-storefront.js from the files app/index.html lists. Do not edit: edit the source, then run node test/pack-storefront.js. */
/* boutique.css */
/* Opt-in boutique design; all original shop layouts keep their own CSS. */
html[data-catalog-style="boutique"]{--boutique-accent:var(--primary,#8A2147);--boutique-paper:#faf8f6;--boutique-line:#eee9e5;--font-body:'Rubik',sans-serif;--font-display:'Rubik',sans-serif;}
html[data-catalog-style="boutique"] body{background:var(--boutique-paper);}
html[data-catalog-style="boutique"] .hero{min-height:440px;text-align:start;background:#f0e8df;}
html[data-catalog-style="boutique"] .hero-bg{opacity:1;background-position:left center;}
html[data-catalog-style="boutique"] .hero-overlay{background:linear-gradient(90deg,transparent 25%,rgba(248,244,239,.65) 60%,#f8f4ef 100%);}
html[data-catalog-style="boutique"] .hero-content{margin-inline-start:0;max-width:600px;padding:70px 40px;color:#242021;}
html[data-catalog-style="boutique"] #heroTitle{font-weight:800;line-height:1.15;}
html[data-catalog-style="boutique"] #heroDesc{color:#514b48;}
html[data-catalog-style="boutique"] .hero-actions{margin-inline:0;}
html[data-catalog-style="boutique"] .hero-primary-action{background:var(--boutique-accent);border-radius:99px;color:white;padding:16px 32px;}
.boutique-card{background:#fff;border:1px solid #f1eeeb;border-radius:24px;overflow:hidden;box-shadow:0 7px 28px rgba(65,35,40,.06);padding:12px;position:relative;}
/* The well keeps theme.css's owner colour (--ui-card-photo-bg, then --ui-card-bg,
then white) and one square ratio; store-design.js sizes it by the owner's
«גובה תמונה» in the grid and the deals strip alike. */
.boutique-card .card-img{border-radius:18px;aspect-ratio:1;overflow:hidden;}
.boutique-card .card-img>img{width:100%;height:100%;object-fit:var(--product-fit-desktop,cover);}
@media(max-width:640px){.boutique-card .card-img>img{object-fit:var(--product-fit-phone,cover);}}
.boutique-card .card-name{font:700 21px/1.35 var(--font-body);text-align:center;margin:18px 0 4px;color:#211b1e;}
.boutique-card .boutique-subtitle{font:400 14px/1.5 var(--font-body);color:var(--ink-soft,#675A66);text-align:center;margin:0 0 10px;}
/* The price block (theme.css "Price block") as a static row on the stepper:
new price, unit and the struck regular price on one baseline, wrapping whole
pieces (never "22.90" from "₪"). wrap-reverse keeps the new price on the
bottom line, so a regular price that no longer fits goes above it and the
new prices of a row still share one baseline. margin-top:auto pins price +
stepper to the card's foot; boutique.js puts the price straight above
.qty-row. The
classic sticker's own properties (max-width, padding, radius, tilt) are
reset here, in every scope and container size. */
.boutique-card>.price-tag{position:static;transform:none;box-shadow:none;background:transparent;color:var(--boutique-accent);font-size:23px;
display:flex;flex-wrap:wrap-reverse;align-items:baseline;justify-content:center;gap:2px 8px;width:100%;max-width:none;padding:0;border-radius:0;margin:auto 0 10px;order:initial;}
.boutique-card .price-unit{font-size:12px;}
.boutique-card .qty-row{margin:auto 0 0;border-top:1px solid var(--boutique-line);padding-top:12px;display:flex;align-items:center;gap:6px;}
.boutique-card>.price-tag+.qty-row{margin-top:0;}
.boutique-card .qty-btn{border-radius:12px;width:48px;height:44px;padding:0;margin:0;}
/* The owner's «+» / «−» colours (theme.ui.qtyPlus*, qtyMinus*: the builder's button-colour popover) win over the boutique accent. */
.boutique-card .qty-btn.plus{background:var(--ui-qty-plus-bg, var(--boutique-accent));color:var(--ui-qty-plus-text, white);}
.boutique-card .qty-btn.minus{background:var(--ui-qty-minus-bg, #f7f5f3);color:var(--ui-qty-minus-text, inherit);border:1px solid var(--ui-qty-minus-border, var(--boutique-line));}
.boutique-card .qty-value{flex:1;}
.boutique-favorite{position:absolute;top:12px;left:12px;width:40px;height:40px;border:1px solid #eee;border-radius:50%;background:white;color:#4b343f;font:28px/1 sans-serif;z-index:2;cursor:pointer;box-shadow:0 3px 10px #0000000a;}
.boutique-favorite[aria-pressed="true"]{color:var(--boutique-accent);}
.boutique-favorite:disabled{opacity:.6;cursor:default;}
.boutique-options{margin-top:12px;}
.boutique-axis{border:0;padding:0;margin:12px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.boutique-axis legend{width:100%;font-weight:700;margin-bottom:12px;text-align:start;font-size:16px;}
.boutique-option{border:1px solid #e6e0dd;background:white;border-radius:10px;min-width:46px;min-height:42px;padding:8px 10px;font:inherit;cursor:pointer;position:relative;}
.boutique-option[aria-pressed="true"]{border:2px solid var(--boutique-accent);color:var(--boutique-accent);background:#fcf8fa;}
.boutique-option:disabled{opacity:.35;cursor:not-allowed;}
.boutique-option:disabled:after{content:'';position:absolute;inset:50% 10%;height:1px;background:currentColor;transform:rotate(-35deg);}
.boutique-axis-color .boutique-option{border-radius:50%;padding:4px;width:46px;height:46px;min-width:46px;background:transparent;}
.boutique-color{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px #0000000c;}
.boutique-option-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;padding-top:5px;}
.boutique-axis-color{margin-bottom:35px;}
.is-compact .boutique-axis{justify-content:center;margin:8px 0;gap:7px;}
.is-compact legend,.is-compact .boutique-option-label{display:none;}
.is-compact .boutique-axis-color .boutique-option{width:31px;height:31px;min-width:31px;padding:3px;}
.boutique-more{border:0;border-radius:50%;background:#f4f1ef;width:31px;height:31px;cursor:pointer;font:inherit;font-size:12px;}
.boutique-thumbnails{display:flex;gap:6px;margin:9px 0 0;}
.boutique-thumbnails button{width:25%;padding:0;background:#f5f3f0;border:2px solid transparent;border-radius:9px;overflow:hidden;cursor:pointer;aspect-ratio:1;}
.boutique-thumbnails button[aria-pressed="true"]{border-color:var(--boutique-accent);}
.boutique-thumbnails img{width:100%;height:100%;object-fit:cover;}
.boutique-toolbar{margin:12px 0 0;border:1px solid var(--boutique-line);border-radius:16px;background:white;text-align:start;padding:12px 16px;}
.boutique-toolbar summary{cursor:pointer;font-weight:600;}
.boutique-filter-panel{display:flex;align-items:end;flex-wrap:wrap;gap:12px;padding-top:12px;}
.boutique-filter-panel label{display:grid;gap:6px;font-size:13px;}
.boutique-filter-panel input,.boutique-filter-panel select,.boutique-filter-panel button{font:inherit;border:1px solid #e8e0e3;border-radius:10px;background:white;padding:9px 12px;min-height:40px;max-width:170px;}
.boutique-filter-panel button[aria-pressed="true"]{background:var(--boutique-accent);color:white;}
.boutique-filter-status{font-size:13px;color:#827a7c;}
.boutique-filtered-out{display:none!important;}
html[data-catalog-style="boutique"] .rich-product-dialog{width:min(980px,95vw);max-height:94dvh;border-radius:24px;padding:28px;background:#fff;border:0;}
html[data-catalog-style="boutique"] .rich-product-category{color:#8b8184;}
html[data-catalog-style="boutique"] .rich-product-title{font:800 30px/1.2 var(--font-body);margin-bottom:16px;}
html[data-catalog-style="boutique"] .rich-product-purchase{padding:0;border:0;box-shadow:none;overflow:visible;background:transparent;}
html[data-catalog-style="boutique"] .rich-product-purchase>.card-img,html[data-catalog-style="boutique"] .rich-product-purchase>.boutique-thumbnails,html[data-catalog-style="boutique"] .rich-product-purchase>.boutique-subtitle,html[data-catalog-style="boutique"] .rich-product-purchase>.product-details-open{display:none;}
html[data-catalog-style="boutique"] .rich-product-purchase>.price-tag{justify-content:flex-start;font-size:28px;margin-top:0;}
html[data-catalog-style="boutique"] .rich-product-information{display:flex;flex-direction:column;}
html[data-catalog-style="boutique"] .rich-product-information>.rich-product-purchase{order:-1;}
html[data-catalog-style="boutique"] .rich-product-information>section{padding:14px 0;border-top:1px solid var(--boutique-line);}
html[data-catalog-style="boutique"] .rich-product-purchase .rich-add-to-cart{width:auto;flex:1;font-size:15px;min-width:145px;height:48px;}
html[data-catalog-style="boutique"] .rich-product-photo{border-radius:16px;aspect-ratio:4/5;object-fit:contain;background:#f7f3f0;}
.boutique-option:focus-visible,.boutique-favorite:focus-visible,.boutique-thumbnails button:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring, var(--boutique-accent));outline-offset:2px;}
@media(max-width:640px){
html[data-catalog-style="boutique"] .hero{min-height:420px;}
html[data-catalog-style="boutique"] .hero-content{padding:45px 22px;max-width:65%;}
/* 30px is the phone design. The variable is what #heroTitle and a moved
layer both read. It loses to #home[data-header], the same way the old
#heroTitle rule lost to a compact or modern font-size. */
html[data-catalog-style="boutique"] .hero{--hero-title-size:calc(30px * var(--hero-title-scale, 1));}
html[data-catalog-style="boutique"] .hero-primary-action{font-size:13px;padding:12px 18px;}
.boutique-card{padding:8px;border-radius:18px;}
.boutique-card .card-name{font-size:15px;margin-top:12px;}
.boutique-card .boutique-subtitle{font-size:11px;}
.boutique-card>.price-tag{font-size:19px;flex-wrap:wrap-reverse;}
/* 44×44 is the phone touch target; padding:0 so the fill and the minus
border are the whole button (theme.css's padded trick does not fit a
bordered button). */
.boutique-card .qty-btn{width:44px;height:44px;padding:0;margin:0;}
.is-compact .boutique-axis{gap:3px;}
.is-compact .boutique-axis-color .boutique-option{width:24px;height:24px;min-width:24px;padding:2px;}
.boutique-favorite{width:32px;height:32px;font-size:23px;top:8px;left:8px;}
html[data-catalog-style="boutique"] .rich-product-dialog{width:100vw;max-width:100vw;max-height:96dvh;margin:auto 0 0;padding:20px 18px;border-radius:24px 24px 0 0;}
html[data-catalog-style="boutique"] .rich-product-layout{display:grid;grid-template-columns:1fr;}
html[data-catalog-style="boutique"] .rich-product-title{font-size:23px;}
html[data-catalog-style="boutique"] .rich-product-photo{max-height:330px;}
}
html[data-catalog-style="boutique"] .boutique-card>.price-tag{position:static!important;transform:none!important;box-shadow:none!important;border:0;background:transparent!important;rotate:none;color:var(--boutique-accent)!important;}
/* A plain price takes the owner's price colours (theme.ui.priceBg / priceText) like the classic card; an offer keeps the accent. */
html[data-catalog-style="boutique"] .boutique-card>.price-tag:not(.deal-tag){background:var(--ui-price-bg, transparent)!important;color:var(--ui-price-text, var(--boutique-accent))!important;}
.boutique-card>.price-tag .deal-tag-label{display:none;}
/* An offer's wrapper drops out of the row, so its .price-main and .price-unit
share the baseline with the regular price beside them. */
.boutique-card>.price-tag .deal-tag-price{font:inherit;display:contents;}
/* The regular price never clips or shrinks: no chip box, no overflow cap; when
the row is full it wraps whole under the new price. */
html[data-catalog-style="boutique"] .boutique-card>.price-tag .deal-was{position:static;transform:none;box-shadow:none;background:transparent;border:0;padding:0;
max-width:none;overflow:visible;flex:none;display:inline-block;font-size:14px;color:var(--ink-soft,#675A66);}
.boutique-card>.price-tag .deal-was-label{display:none;}
.boutique-card>.price-tag .deal-was-price::after{left:0;right:0;}
.boutique-sale-badge{position:absolute;right:12px;top:12px;background:var(--boutique-accent);color:white;border-radius:10px;padding:8px 13px;font:600 13px/1.1 var(--font-body);z-index:2;}
html[data-catalog-style="boutique"] .rich-product-gallery{position:relative;}
html[data-catalog-style="boutique"] .rich-product-gallery>.boutique-favorite{left:auto;right:12px;}
html[data-catalog-style="boutique"] .nav-pill{border:0;background:transparent!important;box-shadow:none;}
html[data-catalog-style="boutique"] .cat-card-photo{border-radius:50%;aspect-ratio:1;}
html[data-catalog-style="boutique"] .cat-card-body{background:transparent!important;}
html[data-catalog-style="boutique"] .cat-card-arrow{display:none;}
html[data-catalog-style="boutique"] .boutique-card .variant-picker[hidden]{display:none!important;}
html[data-catalog-style="boutique"] .card.boutique-card{background:var(--ui-card-bg,#fff)!important;border-color:#f0ebe6!important;}
/* The fallbacks match store-design.js's defaults (text 16/14px, price +4px),
which win wherever a card renders: #catalog and #dealsStrip. */
html[data-catalog-style="boutique"] .boutique-card>.price-tag{font-size:20px!important;line-height:1.3;justify-content:center;}
html[data-catalog-style="boutique"] .boutique-card>.price-tag .deal-tag-price{font-size:inherit!important;}
html[data-catalog-style="boutique"] .boutique-card>.price-tag .deal-was{font-size:15px!important;}
html[data-catalog-style="boutique"] .rich-product-purchase>.price-tag{justify-content:flex-start;font-size:28px!important;order:-1;}
html[data-catalog-style="boutique"] .boutique-card .card-name{font-size:16px!important;}
@media(max-width:640px){
html[data-catalog-style="boutique"] .boutique-card .card-name{font-size:14px!important;}
html[data-catalog-style="boutique"] .boutique-card>.price-tag{font-size:18px!important;}
html[data-catalog-style="boutique"] .rich-product-photo{max-height:260px;}
html[data-catalog-style="boutique"] .rich-product-purchase>.price-tag{font-size:27px!important;}
}
html[data-catalog-style="boutique"] .boutique-card .qty-row{width:100%;max-width:none;}
html[data-catalog-style="boutique"] .boutique-card>.price-tag .deal-was-price{font:400 15px/1.3 var(--font-body)!important;color:var(--ink-soft,#675A66);}
/* On a filled sale tag the regular price takes the tag's own text colour (SH2-08: grey on crimson in «בית ומטבח» was 1.1:1). */
html[data-catalog-style="boutique"] .boutique-card>.price-tag.deal-tag-sale :is(.deal-was, .deal-was-price){color:inherit;}
/* Compact phone cards, in the grid and the deals strip alike (one card, one
design); full galleries and options stay in product details. */
@media(max-width:640px){
html[data-catalog-style="boutique"] :is(#catalog,#dealsStrip) .boutique-card{padding:7px;border-radius:16px;}
html[data-catalog-style="boutique"] :is(#catalog,#dealsStrip) .boutique-card .card-img{aspect-ratio:1;margin-bottom:4px;}
html[data-catalog-style="boutique"] :is(#catalog,#dealsStrip) .boutique-card .card-img>img{padding:0;}
html[data-catalog-style="boutique"] :is(#catalog,#dealsStrip) .boutique-thumbnails{display:none;}
html[data-catalog-style="boutique"] :is(#catalog,#dealsStrip) .boutique-card .card-name{margin:6px 0 3px;font-size:14px!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
html[data-catalog-style="boutique"] :is(#catalog,#dealsStrip) .boutique-subtitle{margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-catalog-style="boutique"] :is(#catalog,#dealsStrip) .boutique-card>.price-tag{gap:0 4px;margin:auto 0 4px;font-size:18px!important;}
html[data-catalog-style="boutique"] :is(#catalog,#dealsStrip) .boutique-card>.price-tag .deal-was-price{font-size:12px!important;}
html[data-catalog-style="boutique"] :is(#catalog,#dealsStrip) .boutique-options{margin-top:4px;}
html[data-catalog-style="boutique"] :is(#catalog,#dealsStrip) .is-compact .boutique-axis{margin:4px 0;}
html[data-catalog-style="boutique"] :is(#catalog,#dealsStrip) .is-compact .boutique-option{min-height:24px;}
html[data-catalog-style="boutique"] :is(#catalog,#dealsStrip) .boutique-card .qty-row{padding-top:6px;}
html[data-catalog-style="boutique"] :is(#catalog,#dealsStrip) .boutique-sale-badge{padding:5px 8px;font-size:11px;top:8px;right:8px;}
}
/* Compact cards give the number its own row so both tap targets stay usable. */
@media(max-width:640px){
@container shopcard (max-width:140px){
.boutique-card .qty-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
.boutique-card .qty-value{grid-column:1/-1;grid-row:1;width:100%;min-width:0}
.boutique-card .qty-btn{width:100%;min-width:44px;height:44px;min-height:44px}
}
@container shopcard (max-width:90px){
.boutique-card .qty-row{grid-template-columns:minmax(0,1fr)}
}
}
/* The kashrut label (horizontal since owner list 26.10, item 21): the
favourite heart holds the photo's top-left corner, so the label takes the
bottom-left one (physical, like the heart). */
html[data-catalog-style="boutique"] .card-img .kashrut-tab{top:auto; bottom:0; border-radius:0 var(--r-chip) 0 var(--r-control);}
/* The hero on a photo (fix/polish-batch, item 7): boutique's dark ink was
drawn for its cream veil, but a photo replaces that veil with the owner's
wash (app.js heroWashColor), so the title sat dark on a dark photo. On a
photo the words turn light, as in classic, over a scrim on their side
(the whole hero on a phone). The owner's own title / description colour
(theme.heroTitleColor / heroDescColor, inline) still wins; the split hero
keeps its text off the photo and is untouched. */
html[data-catalog-style="boutique"]:not([data-layout-hero="split"]):not([data-a11y-contrast="1"]) #home:has(> #heroBg[style*="url("]) .hero-content{color:#FBF6EC; text-shadow:0 1px 3px rgba(0,0,0,.35);}
html[data-catalog-style="boutique"]:not([data-layout-hero="split"]):not([data-a11y-contrast="1"]) #home:has(> #heroBg[style*="url("]) #heroDesc{color:rgba(251,246,236,.92);}
html[data-catalog-style="boutique"]:not([data-layout-hero="split"]):not([data-a11y-contrast="1"]) #home:has(> #heroBg[style*="url("]) .hero-overlay::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(to left, rgba(12,10,9,.62), rgba(12,10,9,.38) 55%, rgba(12,10,9,.08));
}
html[data-catalog-style="boutique"][dir="ltr"]:not([data-layout-hero="split"]) #home:has(> #heroBg[style*="url("]) .hero-overlay::before,
html[data-catalog-style="boutique"].translated-ltr:not([data-layout-hero="split"]) #home:has(> #heroBg[style*="url("]) .hero-overlay::before{
background:linear-gradient(to right, rgba(12,10,9,.62), rgba(12,10,9,.38) 55%, rgba(12,10,9,.08));
}
@media(max-width:640px){
html[data-catalog-style="boutique"]:not([data-layout-hero="split"]) #home:has(> #heroBg[style*="url("]) .hero-overlay::before{background:rgba(12,10,9,.5);}
}
/* A boutique card's heart holds the photo's corner: the ⓘ under it, so neither covers the other. */
html[data-card-design]:not([data-cd-form="side"]):not([data-cd-form="menu"]):not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key].boutique-card:not(.rich-product-purchase):not(.is-oos) > .product-details-open{top:3.25rem;}
html[data-card-design="menu"][data-cd-form="menu"]:not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key].boutique-card > .product-details-open{inset-inline:calc(12px + 2.75rem) auto;}
/* origin-styles.css */
/* Origin marks deliberately occupy the photo's physical top-left corner,
opposite the existing price in both RTL and LTR. */
.card-img .card-origin{position:absolute;z-index:3;top:0.5rem;left:0.5rem;display:flex;align-items:center;gap:0.25rem;width:max-content;max-width:44%;margin:0;line-height:1;color:var(--ink);font-size:0.75rem;transform:var(--flag-transform,none);}
.card-origin-mark{display:block;position:relative;flex:none;box-sizing:border-box;width:var(--flag-width,2.25rem);aspect-ratio:var(--flag-ratio,1);border:2px solid var(--paper,#fff);border-style:var(--flag-border,solid);border-radius:var(--flag-radius,50%);clip-path:var(--flag-clip,none);background:var(--paper,#fff);box-shadow:0 2px 6px #0003;}
.card-origin-mark .card-origin-flag{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;padding:0;border:0;border-radius:inherit;box-shadow:none;}
.card-img .card-origin .card-origin-name{display:var(--flag-name-display,none);position:var(--flag-name-position,absolute);left:0;top:calc(100% + 0.25rem);z-index:4;max-width:8rem;padding:0.3rem 0.4rem;border-radius:var(--r-control,0.4rem);background:var(--paper,#fff);color:var(--ink);font-size:0.75rem;line-height:1.4;white-space:normal;box-shadow:0 2px 6px #0003;}
.card-origin:hover .card-origin-name,.card-origin:focus .card-origin-name{display:block;}
.card-origin:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF);outline-offset:2px;}
html .card-img:has(>.card-origin)>.price-tag{max-width:calc(100% - var(--flag-width,2.25rem) - 1.25rem);}
html .card-img:has(>.card-origin)>.kashrut-tab{top:3.25rem;}
.origin-preview{display:inline-flex;position:relative;align-items:center;justify-content:center;min-width:3rem;min-height:3rem;transform:var(--flag-transform,none);}
.appearance-sample.ap-originStyle{background:transparent;color:var(--ink);padding:0;}
[data-origin-style="default"]{--flag-radius:50%;--flag-clip:none;--flag-transform:none;--flag-width:2.25rem;--flag-ratio:1;--flag-border:solid;--flag-name-display:none;--flag-name-position:absolute;--flag-pole-display:none;}
[data-origin-style="circle"]{--flag-radius:50%;--flag-clip:none;--flag-transform:none;--flag-width:2.25rem;--flag-ratio:1;--flag-border:solid;--flag-name-display:none;--flag-name-position:absolute;--flag-pole-display:none;}
[data-origin-style="wave"]{--flag-radius:10%;--flag-clip:polygon(0 8%,25% 0,55% 10%,100% 0,100% 90%,70% 100%,40% 90%,0 100%);--flag-transform:rotate(-5deg);--flag-width:2.6rem;--flag-ratio:1.2;--flag-border:solid;--flag-name-display:none;--flag-name-position:absolute;--flag-pole-display:none;}
[data-origin-style="rectangle"]{--flag-radius:var(--r-control,0.4rem);--flag-clip:none;--flag-transform:none;--flag-width:2.75rem;--flag-ratio:1.33;--flag-border:solid;--flag-name-display:none;--flag-name-position:absolute;--flag-pole-display:none;}
[data-origin-style="shield"]{--flag-radius:12%;--flag-clip:polygon(0 0,100% 0,90% 68%,50% 100%,10% 68%);--flag-transform:none;--flag-width:2.4rem;--flag-ratio:0.9;--flag-border:solid;--flag-name-display:none;--flag-name-position:absolute;--flag-pole-display:none;}
[data-origin-style="heart"]{--flag-radius:0;--flag-clip:polygon(50% 95%,5% 45%,0 25%,12% 7%,32% 3%,50% 20%,68% 3%,88% 7%,100% 25%,95% 45%);--flag-transform:none;--flag-width:2.5rem;--flag-ratio:1;--flag-border:solid;--flag-name-display:none;--flag-name-position:absolute;--flag-pole-display:none;}
[data-origin-style="bookmark"]{--flag-radius:0;--flag-clip:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);--flag-transform:none;--flag-width:1.75rem;--flag-ratio:0.65;--flag-border:solid;--flag-name-display:none;--flag-name-position:absolute;--flag-pole-display:none;}
[data-origin-style="label"]{--flag-radius:var(--r-control,0.4rem);--flag-clip:none;--flag-transform:none;--flag-width:2.5rem;--flag-ratio:1.33;--flag-border:solid;--flag-name-display:block;--flag-name-position:static;--flag-pole-display:none;}
[data-origin-style="brush"]{--flag-radius:0;--flag-clip:polygon(8% 10%,100% 0,88% 20%,100% 30%,90% 45%,98% 65%,82% 80%,95% 90%,0 100%,12% 80%,0 65%,10% 50%,0 30%,15% 20%);--flag-transform:rotate(-8deg);--flag-width:2.75rem;--flag-ratio:1.25;--flag-border:solid;--flag-name-display:none;--flag-name-position:absolute;--flag-pole-display:none;}
[data-origin-style="seal"]{--flag-radius:50%;--flag-clip:polygon(50% 0,60% 10%,75% 5%,80% 20%,95% 25%,90% 40%,100% 50%,90% 60%,95% 75%,80% 80%,75% 95%,60% 90%,50% 100%,40% 90%,25% 95%,20% 80%,5% 75%,10% 60%,0 50%,10% 40%,5% 25%,20% 20%,25% 5%,40% 10%);--flag-transform:none;--flag-width:2.6rem;--flag-ratio:1;--flag-border:solid;--flag-name-display:none;--flag-name-position:absolute;--flag-pole-display:none;}
[data-origin-style="pole"]{--flag-radius:0;--flag-clip:none;--flag-transform:rotate(-3deg);--flag-width:2.5rem;--flag-ratio:1.33;--flag-border:solid;--flag-name-display:none;--flag-name-position:absolute;--flag-pole-display:block;}
[data-origin-style="sash"]{--flag-radius:0;--flag-clip:polygon(10% 0,100% 0,90% 100%,0 100%);--flag-transform:rotate(-35deg);--flag-width:3rem;--flag-ratio:2;--flag-border:solid;--flag-name-display:none;--flag-name-position:absolute;--flag-pole-display:none;}
[data-origin-style="stitched"]{--flag-radius:50%;--flag-clip:none;--flag-transform:none;--flag-width:2.4rem;--flag-ratio:1;--flag-border:dashed;--flag-name-display:none;--flag-name-position:absolute;--flag-pole-display:none;}
[data-origin-style="mini"]{--flag-radius:var(--r-control,0.4rem);--flag-clip:none;--flag-transform:none;--flag-width:1.75rem;--flag-ratio:1.33;--flag-border:solid;--flag-name-display:none;--flag-name-position:absolute;--flag-pole-display:none;}
[data-origin-style="swipe"]{--flag-radius:0;--flag-clip:polygon(0 20%,100% 0,90% 70%,5% 100%);--flag-transform:rotate(-8deg);--flag-width:2.75rem;--flag-ratio:1.4;--flag-border:solid;--flag-name-display:none;--flag-name-position:absolute;--flag-pole-display:none;}
.card-origin-mark::before{display:var(--flag-pole-display,none);content:"";position:absolute;left:-0.3rem;top:-0.15rem;width:0.15rem;height:150%;background:var(--gold,currentColor);border-radius:var(--r-control,0.2rem);}
@supports(width:1cqw){.card-img .card-origin-mark{width:min(var(--flag-width,2.25rem),26cqw);}html .card-img:has(>.card-origin)>.price-tag{max-width:calc(100% - min(var(--flag-width,2.25rem),26cqw) - 1.25rem);}}
html .card-img:has(.card-origin[data-origin-style="label"])>.price-tag,html[data-origin-style="label"] .card-img:has(>.card-origin)>.price-tag{max-width:42%;}
html[data-catalog-style="boutique"] .card-img:has(.card-origin) .boutique-favorite{left:auto;right:0.5rem;top:auto;bottom:0.5rem;}
.card-img .card-origin,.origin-preview{filter:drop-shadow(0 1px 2px #0003);}
.card-img .card-origin .card-origin-mark{overflow:visible;}
/* Owner list 28.10, item 6 («הדגל תמיד על המוצר»): the flag never sits on a control.
In the product sheet it leaves the price box (where it lay on the ק"ג/יח' toggle) for the
category line (app/rich-content.js); on a boutique card it steps below the ⓘ button. */
.rich-product-category{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;}
.rich-product-category .card-origin{display:inline-flex;align-items:center;gap:0.375rem;position:static;margin:0;font-size:0.8125rem;color:var(--ink-soft,var(--ink));}
.rich-product-category .card-origin-mark{width:1.5rem;}
.rich-product-category .card-origin-name{display:inline;}
html[data-catalog-style="boutique"] .card:has(>.product-details-open)>.card-img>.card-origin{top:3.25rem;}
/* product-appearance.css */
/* Optional appearance recipes using existing price/offer/quantity hooks.
Explicit category choices win over shop defaults. Owner colors stay intact. */
html:not([data-a11y-contrast="1"])[data-price-style="tag"] :is(#catalog,#dealsStrip) .card:not([data-price-style]) .price-tag,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-price-style="tag"] .price-tag{transform:rotate(-3deg)!important;border-radius:var(--r-chip);background:var(--ui-price-bg,var(--accent-mid))!important;color:var(--ui-price-text,#fff)!important;}
html:not([data-a11y-contrast="1"])[data-price-style="flat"] :is(#catalog,#dealsStrip) .card:not([data-price-style]) .price-tag,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-price-style="flat"] .price-tag{transform:none!important;border-radius:var(--r-control);box-shadow:none;background:var(--ui-price-bg,var(--accent-mid))!important;color:var(--ui-price-text,#fff)!important;}
html:not([data-a11y-contrast="1"])[data-price-style="plain"] :is(#catalog,#dealsStrip) .card:not([data-price-style]) .price-tag,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-price-style="plain"] .price-tag{transform:none!important;border-radius:0;box-shadow:none;background:var(--ui-price-bg,transparent)!important;color:var(--ui-price-text,var(--accent-deep,var(--ink)))!important;}
html:not([data-a11y-contrast="1"])[data-button-style="rounded"] :is(#catalog,#dealsStrip) .card:not([data-button-style]) .qty-btn,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-button-style="rounded"] .qty-btn{border-radius:var(--r-control);}
html:not([data-a11y-contrast="1"])[data-button-style="pill"] :is(#catalog,#dealsStrip) .card:not([data-button-style]) .qty-btn,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-button-style="pill"] .qty-btn{border-radius:999rem;}
html:not([data-a11y-contrast="1"])[data-button-style="square"] :is(#catalog,#dealsStrip) .card:not([data-button-style]) .qty-btn,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-button-style="square"] .qty-btn{border-radius:0;}
html:not([data-a11y-contrast="1"])[data-deal-style="pill"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) :is(.deal-tag-label,.boutique-sale-badge),
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="pill"] :is(.deal-tag-label,.boutique-sale-badge){border:1px solid currentColor;border-radius:999rem;padding:0.25rem 0.5rem;}
html:not([data-a11y-contrast="1"])[data-deal-style="box"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) :is(.deal-tag-label,.boutique-sale-badge),
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="box"] :is(.deal-tag-label,.boutique-sale-badge){border:1px solid currentColor;border-radius:var(--r-control);padding:0.25rem 0.5rem;}
html:not([data-a11y-contrast="1"])[data-deal-style="plain"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) :is(.deal-tag-label,.boutique-sale-badge),
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="plain"] :is(.deal-tag-label,.boutique-sale-badge){border:0;border-radius:0;box-shadow:none;}
/* Global action buttons share the chosen corners; precise owner controls win. */
html[data-button-style="rounded"] :is(#callBtn,#heroWhatsappBtn,.hero-primary-action,#sendWhatsapp,#sendPayment,.rich-add-to-cart,.boutique-filter-panel button){border-radius:var(--r-control);}
html[data-button-style="pill"] :is(#callBtn,#heroWhatsappBtn,.hero-primary-action,#sendWhatsapp,#sendPayment,.rich-add-to-cart,.boutique-filter-panel button){border-radius:999rem;}
html[data-button-style="square"] :is(#callBtn,#heroWhatsappBtn,.hero-primary-action,#sendWhatsapp,#sendPayment,.rich-add-to-cart,.boutique-filter-panel button){border-radius:0;}
/* «תג נטוי» on a boutique card stays straight: tilted, its corner reached the heart beside it
(test/no-overlap.test.js, boutique one per row at 1440; a category's or a product's own tag alike). */
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card.boutique-card[data-price-style="tag"] .price-tag,
html:not([data-a11y-contrast="1"])[data-price-style="tag"] :is(#catalog,#dealsStrip) .card.boutique-card:not([data-price-style]) .price-tag{transform:none!important;}
/* content-placement.css */
/* Content is a full-width section, never a product-sized card or slide. */
.content-in-category{grid-column:1/-1;min-width:0;width:100%;box-sizing:border-box;}
.category-section > .content-in-category{margin-block:var(--section-gap,1.5rem);}
.content-between{width:calc(100% - 2rem);max-width:var(--container,70rem);margin:1.5rem auto;box-sizing:border-box;}
.content-split-grid{margin-block-start:1rem;}
#editorial:not(:has(> .editorial-block:not([hidden]))){display:none;}
/* «מרווחים» (owner 2026-11-01): a section's own outer room above, below and
at the sides (app/section-design.js writes --block-space-*-desktop|phone
only for a value the owner chose; no key = the margins above, as before).
The owner's number beats a kit's margin (layouts-voice.css), hence the
!important; 0 means touching. The sides: that much from the screen's
edges, centred within the section's «רוחב» when it has one. */
@media (min-width:641px){
html .editorial-block[style*="--block-space-above-desktop"]{margin-top:var(--block-space-above-desktop) !important;}
html .editorial-block[style*="--block-space-below-desktop"]{margin-bottom:var(--block-space-below-desktop) !important;}
html .editorial-block[style*="--block-space-side-desktop"]{width:auto !important; max-width:none !important;
margin-inline:max(var(--block-space-side-desktop), calc((100% - var(--block-width-desktop, 100%)) / 2)) !important;}
}
@media (max-width:640px){
html .editorial-block[style*="--block-space-above-phone"]{margin-top:var(--block-space-above-phone) !important;}
html .editorial-block[style*="--block-space-below-phone"]{margin-bottom:var(--block-space-below-phone) !important;}
html .editorial-block[style*="--block-space-side-phone"]{width:auto !important; max-width:none !important;
margin-inline:max(var(--block-space-side-phone), calc((100% - var(--block-width-phone, 100%)) / 2)) !important;}
}
/* In the sections' own column (#editorial, «המיקום המקורי בדף»): past its
row gap, its side padding and, for the first and the last, its margin
(--ed-*, theme.css / layouts-voice.css), so 0 still touches. Between two
sections the room is the lower one's «מעל» (or the gap) plus the upper
one's «מתחת». */
.editorial{--ed-gap:28px; --ed-pad:18px; --ed-edge:36px;}
@media (max-width:640px){ .editorial{--ed-gap:18px; --ed-pad:12px; --ed-edge:24px;} }
@media (min-width:641px){
html .editorial > .editorial-block[style*="--block-space-above-desktop"]{margin-top:calc(var(--block-space-above-desktop) - var(--ed-gap)) !important;}
html .editorial > .editorial-block[style*="--block-space-above-desktop"]:not(.editorial-block:not([hidden]) ~ *){margin-top:calc(var(--block-space-above-desktop) - var(--ed-edge)) !important;}
html .editorial > .editorial-block[style*="--block-space-below-desktop"]:not(:has(~ .editorial-block:not([hidden]))){margin-bottom:calc(var(--block-space-below-desktop) - var(--ed-edge)) !important;}
html .editorial > .editorial-block[style*="--block-space-side-desktop"]{
margin-inline:max(calc(var(--block-space-side-desktop) - var(--ed-pad)), calc((100% - var(--block-width-desktop, calc(100% + 2 * var(--ed-pad)))) / 2)) !important;}
}
@media (max-width:640px){
html .editorial > .editorial-block[style*="--block-space-above-phone"]{margin-top:calc(var(--block-space-above-phone) - var(--ed-gap)) !important;}
html .editorial > .editorial-block[style*="--block-space-above-phone"]:not(.editorial-block:not([hidden]) ~ *){margin-top:calc(var(--block-space-above-phone) - var(--ed-edge)) !important;}
html .editorial > .editorial-block[style*="--block-space-below-phone"]:not(:has(~ .editorial-block:not([hidden]))){margin-bottom:calc(var(--block-space-below-phone) - var(--ed-edge)) !important;}
html .editorial > .editorial-block[style*="--block-space-side-phone"]{
margin-inline:max(calc(var(--block-space-side-phone) - var(--ed-pad)), calc((100% - var(--block-width-phone, calc(100% + 2 * var(--ed-pad)))) / 2)) !important;}
}
/* The preview's crop (builder/crop-chrome.js, app/section-design.js): the padding on one side, and a strip off a
side: the box keeps its place so nothing else moves, the strip is clipped and the content stays out of it.
Doubled class: above an edge code section's own padding:0 and clip-path:none.
A cut off the top or the bottom (--block-cut-*): clipped here, and --block-space-above / -below already carry its
negative margin (app/section-design.js watchCut measures the px), so the page closes up. */
@media (min-width:641px){
html .editorial-block[style*="--block-pad-top-desktop"]{padding-top:var(--block-pad-top-desktop) !important;}
html .editorial-block[style*="--block-pad-bottom-desktop"]{padding-bottom:var(--block-pad-bottom-desktop) !important;}
html body .editorial-block.editorial-block.editorial-block[style*="--block-crop-desktop"]{clip-path:inset(-9999px var(--block-crop-desktop) -9999px var(--block-crop-left-desktop)) !important;
padding-left:var(--block-pad-left-desktop) !important; padding-right:var(--block-pad-right-desktop) !important;}
html body .editorial-block.editorial-block.editorial-block[style*="--block-cut-top-desktop"]{clip-path:inset(var(--block-cut-top-desktop) var(--block-crop-desktop,-9999px) var(--block-cut-bottom-desktop) var(--block-crop-left-desktop,-9999px)) !important;}
}
@media (max-width:640px){
html .editorial-block[style*="--block-pad-top-phone"]{padding-top:var(--block-pad-top-phone) !important;}
html .editorial-block[style*="--block-pad-bottom-phone"]{padding-bottom:var(--block-pad-bottom-phone) !important;}
html body .editorial-block.editorial-block.editorial-block[style*="--block-crop-phone"]{clip-path:inset(-9999px var(--block-crop-phone) -9999px var(--block-crop-left-phone)) !important;
padding-left:var(--block-pad-left-phone) !important; padding-right:var(--block-pad-right-phone) !important;}
html body .editorial-block.editorial-block.editorial-block[style*="--block-cut-top-phone"]{clip-path:inset(var(--block-cut-top-phone) var(--block-crop-phone,-9999px) var(--block-cut-bottom-phone) var(--block-crop-left-phone,-9999px)) !important;}
}
/* A gap closed by the grips (closeTop / closeBottom, builder/grip-room.js): what the section's first and last child keep outside it. */
@media (min-width:641px){
html .editorial-block[style*="--block-close-top-desktop"]>:first-child:not([hidden]),html .editorial-block[style*="--block-close-top-desktop"]>.editorial-copy:empty+*{margin-top:0 !important;}
html .editorial-block[style*="--block-close-bottom-desktop"]>:last-child{margin-bottom:0 !important;}
}
@media (max-width:640px){
html .editorial-block[style*="--block-close-top-phone"]>:first-child:not([hidden]),html .editorial-block[style*="--block-close-top-phone"]>.editorial-copy:empty+*{margin-top:0 !important;}
html .editorial-block[style*="--block-close-bottom-phone"]>:last-child{margin-bottom:0 !important;}
}
/* effects-elements.css */
/* Effects C (app/effects-elements.js, docs/LAYOUTS.md «אלמנטים»): the trust
row, the photo strip, the big quote, the contact card, the deal ribbon, the
deals countdown and the WhatsApp words. Every rule hangs on a class or a
value only these features write, so a shop without them draws exactly what
it drew before. Colours read the section's own --block-* variables (its
design, app/section-design.js) and the owner's --ui-* overrides first. */
/* ---------- «שורת אמון» ---------- */
.editorial-trust{--block-default-align:center;}
.editorial-trust-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--trust-n,4),minmax(0,1fr));gap:var(--block-gap-desktop,16px);text-align:start;}
.editorial-trust-item{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;font-weight:700;line-height:1.35;}
.editorial-trust-icon{display:inline-flex;flex:none;width:2.875rem;height:2.875rem;align-items:center;justify-content:center;border-radius:50%;
color:var(--block-accent,var(--primary));box-shadow:inset 0 0 0 1.5px currentColor;}
.editorial-trust-icon svg{width:1.4rem;height:1.4rem;}
.editorial-trust-text{min-width:0;overflow-wrap:anywhere;font-size:calc(1em * var(--sec-text,1));}
/* The optional second line (item.sub), small under the words as in the effects catalogue. */
.editorial-trust-sub{display:block;font-weight:400;font-size:calc(.8125rem * var(--sec-text,1));line-height:1.35;color:var(--block-ink,var(--ink-soft,#5B6B60));}
/* row: one line, a hairline between the items */
.editorial-trust-list[data-look="row"]{gap:0;}
.editorial-trust-list[data-look="row"] .editorial-trust-item{padding:6px 16px;}
.editorial-trust-list[data-look="row"] .editorial-trust-item + .editorial-trust-item{border-inline-start:1px solid var(--block-card-line,var(--line,#DDE5D9));}
/* cards: small tiles */
.editorial-trust-list[data-look="cards"] .editorial-trust-item{justify-content:flex-start;padding:14px 16px;border-radius:var(--r-panel);
background:var(--block-card,var(--paper,#FBF7EF));border:1px solid var(--block-card-line,color-mix(in srgb,var(--primary) 12%,transparent));}
/* band: a thin strip, the title and the text left out of the way */
.editorial-trust-list[data-look="band"]{margin:0;gap:var(--block-gap-desktop,8px) 24px;grid-template-columns:repeat(var(--trust-n,4),auto);justify-content:center;}
.editorial-trust-list[data-look="band"] .editorial-trust-item{font-size:.9375rem;gap:8px;}
.editorial-trust-list[data-look="band"] .editorial-trust-icon{width:2rem;height:2rem;box-shadow:none;background:color-mix(in srgb,var(--block-accent,var(--primary)) 12%,transparent);}
.editorial-trust-list[data-look="band"] .editorial-trust-icon svg{width:1.1rem;height:1.1rem;}
.editorial-block.editorial-trust-band{width:100%;max-width:none;margin:0;border:0;border-radius:0;padding-block:14px;padding-inline:clamp(16px,4vw,44px);
background:var(--block-background-desktop,color-mix(in srgb,var(--primary) 8%,var(--paper,#FBF7EF)));}
.editorial-trust-band .editorial-copy:empty{display:none;}
/* ---------- «רצועת תמונות» ---------- */
.editorial-strip{--block-default-align:center;}
.editorial-strip-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--strip-n,4),minmax(0,1fr));gap:var(--block-gap-desktop,10px);text-align:start;}
.editorial-strip-item{min-width:0;}
.editorial-strip-list figure{margin:0;display:flex;flex-direction:column;gap:6px;height:100%;}
.editorial-strip-list img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-control);background:color-mix(in srgb,var(--primary) 6%,var(--paper,#FBF7EF));}
.editorial-strip-list figcaption{font-size:calc(.875rem * var(--sec-text,1));font-weight:600;color:var(--ink-soft,var(--ink));line-height:1.35;overflow-wrap:anywhere;}
/* mosaic: four across, the first photo two by two */
.editorial-strip-list[data-look="mosaic"]{grid-template-columns:repeat(var(--mosaic-cols,4),minmax(0,1fr));grid-auto-flow:column dense;grid-template-rows:repeat(2,auto);}
.editorial-strip-list[data-look="mosaic"] .editorial-strip-item:first-child{grid-column:span 2;grid-row:span 2;}
.editorial-strip-list[data-look="mosaic"][data-odd] .editorial-strip-item:last-child{grid-row:span 2;}
.editorial-strip-list[data-look="mosaic"] :is(.editorial-strip-item:first-child,[data-odd] .editorial-strip-item:last-child) img{flex:1;min-height:0;aspect-ratio:auto;height:100%;}
/* polaroid: white frames, a wider bottom edge for the caption, tilted in turn */
.editorial-strip-list[data-look="polaroid"]{gap:var(--block-gap-desktop,22px);padding:10px 6px 14px;}
.editorial-strip-list[data-look="polaroid"] figure{padding:10px 10px 12px;background:#FFFDF8;color:#3A3A32;border-radius:4px;
box-shadow:0 1px 2px rgba(30,42,34,.08),0 14px 28px -14px rgba(30,42,34,.38);transform:rotate(-2deg);}
.editorial-strip-list[data-look="polaroid"] .editorial-strip-item:nth-child(even) figure{transform:rotate(2deg);}
.editorial-strip-list[data-look="polaroid"] .editorial-strip-item:nth-child(3n) figure{transform:rotate(-1deg);}
.editorial-strip-list[data-look="polaroid"] img{border-radius:2px;}
.editorial-strip-list[data-look="polaroid"] figcaption{color:#3A3A32;text-align:center;min-height:1.35em;}
/* ---------- «המלצות» · «ציטוט גדול» ---------- */
.editorial-bigquotes{display:grid;gap:var(--block-gap-desktop,32px);margin:22px auto 0;max-width:46rem;}
.editorial-bigquote{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.editorial-bigquote-mark{display:block;height:3.25rem;font-family:Georgia,"Times New Roman",serif;font-size:6rem;line-height:1;color:var(--block-accent,var(--primary));}
.editorial-bigquote blockquote{margin:0;}
.editorial-bigquote blockquote p.rich-text{margin:0;font-family:var(--font-display,var(--font-body)),serif;font-size:calc(clamp(1.25rem,2.4vw,1.75rem) * var(--sec-text,1));line-height:1.5;font-weight:500;}
.editorial-bigquote figcaption{display:flex;align-items:center;gap:12px;text-align:start;}
.editorial-bigquote-face{display:inline-flex;flex:none;width:3.25rem;height:3.25rem;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;
background:var(--block-accent,var(--primary));color:var(--paper,#fff);font-weight:800;font-size:1.25rem;}
.editorial-bigquote-face img{width:100%;height:100%;object-fit:cover;}
.editorial-bigquote-who{display:flex;flex-direction:column;gap:2px;}
.editorial-bigquote-who span{color:var(--ink-soft,var(--ink));font-size:.9375rem;}
/* ---------- «יצירת קשר» · «כרטיס» ---------- */
.editorial-contact-card{display:grid;gap:18px;margin:20px auto 0;max-width:30rem;padding:24px;text-align:start;border-radius:var(--r-panel);
background:var(--block-card,var(--paper,#FBF7EF));border:1px solid var(--block-card-line,color-mix(in srgb,var(--primary) 12%,transparent));
box-shadow:0 2px 4px rgba(30,42,34,.05),0 12px 28px -14px rgba(30,42,34,.22);}
.editorial-contact-rows{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.editorial-contact-rows li{display:flex;align-items:flex-start;gap:12px;min-width:0;}
.editorial-contact-ic{display:inline-flex;flex:none;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;border-radius:50%;
color:var(--block-accent,var(--primary));background:color-mix(in srgb,var(--block-accent,var(--primary)) 10%,transparent);}
.editorial-contact-ic svg{width:1.25rem;height:1.25rem;}
.editorial-contact-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.editorial-contact-body .editorial-contact-label{font-size:.8125rem;}
.editorial-contact-body .rich-text{white-space:pre-line;}
.editorial-contact-value{color:inherit;font-weight:600;overflow-wrap:anywhere;}
a.editorial-contact-value{text-decoration:none;font-variant-numeric:tabular-nums;unicode-bidi:isolate;align-self:flex-start;}
.editorial-contact-nav{display:inline-flex;align-items:center;min-height:44px;margin-inline-start:10px;color:var(--block-accent,var(--primary));font-weight:600;font-size:.875rem;}
.editorial-contact-wa{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:var(--r-chip);
background:var(--ui-whatsapp-bg,var(--whatsapp,#25D366));color:var(--ui-whatsapp-text,#10221A);font-weight:700;text-decoration:none;}
.editorial-contact-wa svg{width:1.4rem;height:1.4rem;flex:none;}
:is(.editorial-contact-wa,.editorial-contact-nav,a.editorial-contact-value):focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF);outline-offset:2px;}
@media (max-width:640px){
.editorial-block.editorial-trust-band{background:var(--block-background-phone,color-mix(in srgb,var(--primary) 8%,var(--paper,#FBF7EF)));padding-block:12px;}
.editorial-trust-list,.editorial-trust-list[data-look="band"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--block-gap-phone,12px);}
.editorial-trust-item{justify-content:flex-start;}
.editorial-trust-list[data-look="row"] .editorial-trust-item{padding:4px 0;}
.editorial-trust-list[data-look="row"] .editorial-trust-item + .editorial-trust-item{border-inline-start:0;}
.editorial-trust-list[data-look="band"]{gap:8px 14px;}
.editorial-trust-list[data-look="cards"] .editorial-trust-item{flex-direction:column;justify-content:center;text-align:center;gap:8px;padding:14px 10px;}
.editorial-trust-list[data-look="band"] .editorial-trust-item{font-size:.875rem;}
/* strip and polaroid scroll sideways, a photo at a time; mosaic is two across */
.editorial-strip-list:is([data-look="strip"],[data-look="polaroid"]){display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
gap:var(--block-gap-phone,10px);margin-inline:-18px;padding-inline:18px;scroll-padding-inline:18px;}
.editorial-strip-list:is([data-look="strip"],[data-look="polaroid"])::-webkit-scrollbar{display:none;}
.editorial-strip-list:is([data-look="strip"],[data-look="polaroid"]) .editorial-strip-item{flex:0 0 68%;scroll-snap-align:start;}
.editorial-strip-list[data-look="polaroid"] .editorial-strip-item{flex-basis:62%;}
.editorial-strip-list[data-look="mosaic"]{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;gap:var(--block-gap-phone,8px);}
.editorial-strip-list[data-look="mosaic"] .editorial-strip-item:first-child,.editorial-strip-list[data-look="mosaic"][data-odd] .editorial-strip-item:last-child{grid-column:span 2;grid-row:auto;}
.editorial-strip-list[data-look="mosaic"] :is(.editorial-strip-item:first-child,[data-odd] .editorial-strip-item:last-child) img{aspect-ratio:16/9;height:auto;}
.editorial-bigquote-mark{height:2.5rem;font-size:4.5rem;}
.editorial-contact-card{padding:18px;}
}
/* ---------- the deal ribbon «סרט» (theme.productAppearance.dealStyle) ----------
The offer's sticker becomes a straight band flush with the photo's right
edge (the corner the sticker always held), a notch cut into its inner end.
Its colour stays the offer kind's (sale / bundle / tier), white text. */
html:not([data-a11y-contrast="1"])[data-deal-style="ribbon"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="ribbon"] .deal-tag{
top:12px;right:0;transform:none;border-radius:0;box-shadow:0 2px 6px rgba(20,25,20,.22);
display:flex;align-items:baseline;gap:6px;max-width:calc(100% - 26px);padding:5px 12px 5px 18px;
clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9px 50%);}
html:not([data-a11y-contrast="1"])[data-deal-style="ribbon"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag .deal-tag-price,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="ribbon"] .deal-tag .deal-tag-price{margin-top:0;}
html:not([data-a11y-contrast="1"])[data-deal-style="ribbon"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .boutique-sale-badge,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="ribbon"] .boutique-sale-badge{
right:0;border-radius:0;padding-left:18px;padding-right:14px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9px 50%);}
/* ---------- «סרט אלכסוני» (dealStyle "sash"): a 45° band across the photo's
top-right corner (physically right, the corner the offer always held). Its
centre sits on the corner's diagonal, 28% of the card in; label and price on
one line, the ends clipped by the photo (.card-img overflow:hidden). Sizes
follow the card (cqi of the shopcard container). Colour: the offer kind's. */
html:not([data-a11y-contrast="1"])[data-deal-style="sash"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) :is(.deal-tag,.boutique-sale-badge),
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="sash"] :is(.deal-tag,.boutique-sale-badge){
--sash-c:28cqi;top:var(--sash-c);right:calc(var(--sash-c) - 60cqi);left:auto;width:120cqi;max-width:none;
transform-origin:50% 50%;transform:translateY(-50%) rotate(45deg);border-radius:0;
display:flex;align-items:baseline;justify-content:center;gap:.35em;padding:5px 0;text-align:center;white-space:nowrap;
box-shadow:0 3px 8px rgba(20,25,20,.28);font-size:clamp(.6875rem,6cqi,.9375rem);}
html:not([data-a11y-contrast="1"])[data-deal-style="sash"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag :is(.deal-tag-label,.deal-tag-price),
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="sash"] .deal-tag :is(.deal-tag-label,.deal-tag-price){
display:inline;margin:0;font-size:inherit;line-height:1.2;white-space:nowrap;}
/* A card price recipe («תג נטוי / ישר / מחיר נקי», product-appearance.css and
the structures' cards) restyles .price-tag with !important; on an offer the
sash is the deal style, so it keeps its turn and the offer kind's colour. */
html:not([data-a11y-contrast="1"])[data-deal-style="sash"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="sash"] .deal-tag{transform:translateY(-50%) rotate(45deg)!important;color:#fff!important;border-radius:0!important;box-shadow:0 3px 8px rgba(20,25,20,.28)!important;}
html:not([data-a11y-contrast="1"])[data-deal-style="sash"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag-sale,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="sash"] .deal-tag-sale{background:var(--danger,#B93632)!important;}
html:not([data-a11y-contrast="1"])[data-deal-style="sash"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag-bundle,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="sash"] .deal-tag-bundle{background:var(--ui-qty-plus-bg,var(--accent-deep))!important;}
html:not([data-a11y-contrast="1"])[data-deal-style="sash"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag-tier,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="sash"] .deal-tag-tier{background:var(--ui-price-bg,var(--gold,#7A5C24))!important;}
/* ---------- «מסתיים בעוד …» beside the deals strip's title ---------- */
.deals-countdown{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 12px;border-radius:var(--r-chip);
background:#FBEDEA;background:color-mix(in srgb,var(--danger,#B5452F) 10%,var(--paper,#fff));color:var(--danger,#B5452F);
font-size:.8125rem;font-weight:700;line-height:1.3;}
.deals-countdown-time{white-space:nowrap;}
.deals-countdown .num{font-variant-numeric:tabular-nums;unicode-bidi:isolate;}
.deals-countdown-ic{display:inline-flex;}
.deals-countdown-ic svg{width:1rem;height:1rem;}
/* «על הכרטיס» (content.dealsCountdownAt "card"): under the product's name. */
.deals-countdown.is-on-card{align-self:center;flex-wrap:wrap;justify-content:center;gap:2px 5px;margin:2px auto 8px;padding:3px 10px;font-size:.75rem;max-width:100%;text-align:center;}
@container shopcard (max-width:200px){
.deals-countdown.is-on-card{font-size:.6875rem;padding:2px 8px;}
.deals-countdown.is-on-card .deals-countdown-ic{display:none;}
}
/* ---------- the floating WhatsApp circle with words (checkout.waLabel) ----------
Pinned bottom-left like .float-wa (theme.css): a pill from that corner,
the circle's icon at its left end and the words after it. */
.float-wa.has-label{width:auto;padding:0 18px 0 12px;gap:8px;border-radius:999px;flex-direction:row-reverse;}
.float-wa.has-label .float-wa-label{font-weight:700;font-size:.9375rem;white-space:nowrap;}
@media (max-width:480px){ .float-wa.has-label{padding:0 14px 0 10px;} .float-wa.has-label .float-wa-label{font-size:.875rem;} }
/* ---------- Effects D (app/effects.js, docs/THEME.md «Effects»): «מרקם נייר»,
«דוגמה בקו», «שעות ומשלוחים בפתיחה» and «כתם צבע» shop-wide. Each rule hangs
on html[data-fx-grain|pattern|blob="on"] or #heroChips, which only those
choices write; decoration only (pointer-events:none, no text). ---------- */
html[data-fx-grain="on"]{--fx-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");}
html[data-fx-grain="on"] body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background-image:var(--fx-noise);opacity:.09;mix-blend-mode:var(--fx-grain-blend,multiply);}
html[data-fx-grain="on"] #home .hero-overlay::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--fx-noise);opacity:.22;mix-blend-mode:overlay;}
html[data-layout-hero="split"][data-fx-grain="on"] #home::before{display:block;content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--fx-noise);opacity:.2;mix-blend-mode:overlay;}
/* the pattern: over the hero's photo and wash, under its words (band, full; not «מודרני», whose glow is that layer), over the split hero's brand colour, and on tinted sections */
html[data-fx-pattern="on"]:is([data-layout-hero="full"],:not([data-layout-hero])) #home:not([data-header="modern"])::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--fx-pattern-hero);}
html[data-layout-hero="split"][data-fx-pattern="on"] #home::after{background:var(--fx-pattern-hero),linear-gradient(160deg,color-mix(in srgb,var(--primary) 82%,#ffffff),var(--primary) 55%,color-mix(in srgb,var(--primary) 72%,#000000));}
html[data-layout-hero="split"][data-fx-pattern="on"][data-fx-hero-glow="glow"] #home::after{background:var(--fx-pattern-hero),
radial-gradient(40% 55% at 22% 45%,rgba(246,213,138,0.45),transparent 70%),radial-gradient(35% 50% at 8% 90%,color-mix(in srgb,#FFFFFF 35%,transparent),transparent 70%),
radial-gradient(45% 60% at 95% 0%,rgba(255,255,255,0.16),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--primary) 82%,#ffffff),var(--primary) 55%,color-mix(in srgb,var(--primary) 72%,#000000));}
html[data-fx-pattern="on"] [data-fx-ground="tint"]{background-image:var(--fx-pattern);background-repeat:repeat;}
/* the hero's chips: white on a dark wash, ≥ 4.5:1 over any photo */
.hero-chips{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
html[data-layout-hero="none"] .hero-chips,html[data-layout-hero="split"] #home:has(> #heroBg[style*="url("]) .hero-chips{justify-content:flex-start;}
.hero-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 14px;border-radius:var(--r-chip,999px);background:rgba(14,20,16,0.66);color:#FFFFFF;
font-size:0.875rem;font-weight:600;line-height:1.3;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.22);}
.hero-chip-ic{display:inline-flex;}
.hero-chip-ic svg{width:1rem;height:1rem;}
.hero-chip-dot{width:8px;height:8px;border-radius:50%;background:#7EE29A;flex:none;}
.hero-chip .num{font-variant-numeric:tabular-nums;unicode-bidi:isolate;}
/* «כתם צבע» on the ordinary icon circles too (the big look has its own, theme.css «Effects A») */
html[data-fx-blob="on"] .editorial-why-list:not([data-look="big"]) .editorial-why-icon{position:relative;background:transparent;}
html[data-fx-blob="on"] .editorial-why-list:not([data-look="big"]) .editorial-why-icon svg{position:relative;z-index:1;}
html[data-fx-blob="on"] .editorial-why-list:not([data-look="big"]) .editorial-why-icon::before{content:"";position:absolute;z-index:0;width:135%;height:135%;inset-inline-start:-25%;top:-20%;
background:color-mix(in srgb,#F6D58A 70%,var(--paper,#FBF7EF));border-radius:58% 42% 63% 37% / 45% 55% 45% 55%;}
html[data-fx-blob="on"] .editorial-why-list:not([data-look="big"]) .editorial-why-item:nth-child(even) .editorial-why-icon::before{border-radius:40% 60% 38% 62% / 60% 40% 60% 40%;
background:color-mix(in srgb,var(--block-accent,var(--primary)) 18%,var(--paper,#FBF7EF));}
/* effects-controls.css */
/* Optional effects. Absent attributes leave every existing shop unchanged. */
html[data-fx-photo-frame="square"] .card:not([data-pl-frame]) .card-img{border-radius:0;overflow:hidden;}
html[data-fx-photo-frame="rounded"] .card:not([data-pl-frame]) .card-img{border-radius:var(--radius,16px);overflow:hidden;}
html[data-fx-photo-frame="arch"] .card:not([data-pl-frame]) .card-img{border-radius:50% 50% var(--radius,16px) var(--radius,16px);overflow:hidden;}
html[data-fx-heading-accent="underline"] :is(.editorial-block h2,.category-head h2,.deals-title h2){text-decoration:underline;text-decoration-color:var(--primary);text-decoration-thickness:3px;text-underline-offset:.25em;}
html[data-fx-heading-accent="marker"] :is(.editorial-block h2,.category-head h2,.deals-title h2){box-shadow:inset 0 -.24em var(--paper-dim);}
/* The page wash: from the paper to its own dim shade («רך») or to a fixed sand («חם»). Not --stone / --gold-light, which follow the
primary: a green primary washed the whole page olive (momos 28.10). */
html[data-fx-background-blend="soft"] body{background-color:var(--paper);background-image:linear-gradient(155deg,var(--paper),var(--paper-dim));}
html[data-fx-background-blend="warm"] body{background-color:var(--paper);background-image:linear-gradient(155deg,var(--paper),#F3E6D3);}
@supports (color: color-mix(in srgb, red, blue)){
html[data-fx-background-blend="warm"] body{background-image:linear-gradient(155deg,var(--paper),color-mix(in srgb,var(--paper) 55%,#E9CFA8));}
}
html[data-fx-texture-strength="low"][data-fx-grain="on"] body::after{opacity:.04;}
html[data-fx-texture-strength="high"][data-fx-grain="on"] body::after{opacity:.13;}
.fx-photo-swap{display:contents;}
.card .card-img .fx-swap-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .fx-swap-image{transition:transform .5s cubic-bezier(.22,1,.36,1);}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card:hover .fx-swap-image{transform:scale(1.03);}
html[data-fx-motion-speed="slow"]{--fx-enter-time:1.1s;}
html[data-fx-motion-speed="fast"]{--fx-enter-time:.35s;}
@media(hover:hover) and (pointer:fine){
html[data-fx-card-hover="outline"] .card:not(.is-oos):not([data-pl-hover]):is(:hover,:focus-within){outline:2px solid var(--primary);outline-offset:2px;}
html[data-fx-card-hover]:not([data-fx-card-hover="default"]) .card:not([data-pl-hover]):is(:hover,:focus-within){transform:none;translate:none;}
/* «הילה בצבע»: a ring in the brand colour, drawn at once — only transform keeps its transition, so nothing paints in steps. */
html[data-fx-card-hover="glow"] .card:not([data-pl-hover]){transition-property:transform;}
html[data-fx-card-hover="glow"] .card:not(.is-oos):not([data-pl-hover]):is(:hover,:focus-within){box-shadow:0 0 0 2px var(--primary),0 12px 28px -12px rgba(31,77,58,.45);}
@supports (color: color-mix(in srgb, red, blue)){html[data-fx-card-hover="glow"] .card:not(.is-oos):not([data-pl-hover]):is(:hover,:focus-within){box-shadow:0 0 0 2px var(--primary),0 12px 28px -12px color-mix(in srgb,var(--primary) 55%,transparent);}}
html[data-fx-button-hover="color"] :is(.card:not([data-pl-btn-hover]) .qty-btn.plus,.qty-btn.plus:not(.card *),.cart-cta):hover{filter:brightness(.9);}
html[data-fx-button-hover="shadow"] :is(.card:not([data-pl-btn-hover]) .qty-btn.plus,.qty-btn.plus:not(.card *),.cart-cta):hover{box-shadow:0 4px 12px rgba(0,0,0,.2);}
html[data-fx-button-hover="none"] :is(.card:not([data-pl-btn-hover]) .qty-btn.plus,.qty-btn.plus:not(.card *),.cart-cta):hover{transform:none;translate:none;filter:none;box-shadow:none;}
}
@media(prefers-reduced-motion:no-preference){
html[data-fx-reveal-style="fade"]:not([data-motion="off"]):not([data-a11y-motion="1"]) .fx-rv{translate:none;}
html[data-fx-motion-strength="subtle"]:not([data-fx-reveal-style="fade"]):not([data-motion="off"]):not([data-a11y-motion="1"]) .fx-rv:not(.fx-rv-in){translate:0 8px;}
html[data-fx-reveal-style="scale"]:not([data-motion="off"]):not([data-a11y-motion="1"]) .fx-rv:not(.fx-rv-in){translate:none;scale:.97;}
html:is([data-fx-reveal-style],[data-fx-motion-speed],[data-fx-motion-strength]):not([data-motion="off"]):not([data-a11y-motion="1"]) .fx-rv.fx-rv-in{scale:1;transition:opacity var(--fx-enter-time,.7s) ease,translate var(--fx-enter-time,.7s) ease,scale var(--fx-enter-time,.7s) ease;}
/* «כניסת הכרטיסים» (theme.effects.cardReveal): the catalogue's cards, on their own class (app/motion.js .fx-rv-card),
so the section reveal (revealStyle) never reaches them. The motion level's own scroll-driven reveal (theme.css
«reveal-in») steps aside while a card waits for this one. Opacity and transform only. */
html[data-fx-card-reveal]:not([data-motion="off"]):not([data-a11y-motion="1"]) #catalog .product-grid > .card.fx-rv-card{animation:none;}
html[data-fx-card-reveal]:not([data-motion="off"]):not([data-a11y-motion="1"]) #catalog .product-grid > .card.fx-rv-card:not(.fx-rv-in){opacity:0;}
html[data-fx-card-reveal="rise"]:not([data-motion="off"]):not([data-a11y-motion="1"]) #catalog .product-grid > .card.fx-rv-card:not(.fx-rv-in){translate:0 16px;}
html[data-fx-card-reveal="stagger"]:not([data-motion="off"]):not([data-a11y-motion="1"]) #catalog .product-grid > .card.fx-rv-card:not(.fx-rv-in){translate:0 12px;}
html[data-fx-card-reveal="scale"]:not([data-motion="off"]):not([data-a11y-motion="1"]) #catalog .product-grid > .card.fx-rv-card:not(.fx-rv-in){scale:.97;}
html[data-fx-card-reveal="blur"]:not([data-motion="off"]):not([data-a11y-motion="1"]) #catalog .product-grid > .card.fx-rv-card:not(.fx-rv-in){scale:1.04;}
html[data-fx-card-reveal]:not([data-motion="off"]):not([data-a11y-motion="1"]) #catalog .product-grid > .card.fx-rv-card.fx-rv-in{opacity:1;translate:none;scale:none;
transition:opacity var(--fx-enter-time,.7s) ease,translate var(--fx-enter-time,.7s) cubic-bezier(.2,.7,.2,1),scale var(--fx-enter-time,.7s) cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--fx-i,0) * 70ms);}
html[data-fx-card-reveal="stagger"]:not([data-motion="off"]):not([data-a11y-motion="1"]) #catalog .product-grid > .card.fx-rv-card.fx-rv-in{transition-delay:calc(var(--fx-i,0) * 120ms);}
@media(hover:hover) and (pointer:fine){
html[data-fx-card-hover="lift"]:not([data-motion="off"]):not([data-a11y-motion="1"]) .card:not(.is-oos):not([data-pl-hover]):is(:hover,:focus-within){translate:0 -4px;transition:translate .2s ease;}
html[data-fx-button-hover="lift"]:not([data-motion="off"]):not([data-a11y-motion="1"]) :is(.card:not([data-pl-btn-hover]) .qty-btn.plus,.qty-btn.plus:not(.card *),.cart-cta):hover{translate:0 -2px;transition:translate .2s ease;}
html:is([data-fx-image-swap="on"],[data-fx-card-hover="swap"]):not([data-motion="off"]):not([data-a11y-motion="1"]) .card:not(.is-oos):not([data-pl-swap]):hover .fx-swap-image[data-ready]{opacity:1;}
/* The card hovers of Michael's editor (theme.effects.cardHover): transform and opacity only. */
html[data-fx-card-hover="tilt"]:not([data-motion="off"]):not([data-a11y-motion="1"]) .card:not(.is-oos):not([data-pl-hover]):is(:hover,:focus-within){transform:perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(-2px);}
html[data-fx-card-hover="zoom"]:not([data-motion="off"]):not([data-a11y-motion="1"]) .card:not([data-pl-zoom]) .card-img img{transition:scale .5s cubic-bezier(.2,.7,.2,1);}
html[data-fx-card-hover="zoom"]:not([data-motion="off"]):not([data-a11y-motion="1"]) .card:not(.is-oos):not([data-pl-zoom]):hover .card-img > img{scale:1.06;}
}
}
/* background-scope.css */
/* «תחולה» — the hero's background reaching the category area or the whole
page (app/background-scope.js, docs/THEME.md «Background scope»). Only
while html[data-bg-scope] is set; high contrast keeps the plain page. The
layer is the lowest thing on the page (z-index -1 under #appRoot), so a
section's own ground, a divider mask at a section's edge and every card
stay above it. No background-attachment: fixed. */
html[data-bg-scope]:not([data-a11y-contrast="1"]) #appRoot{position:relative;}
.bg-scope{position:absolute; inset-inline:0; top:0; z-index:-1; overflow:hidden; pointer-events:none;}
html[data-a11y-contrast="1"] .bg-scope{display:none;}
/* «עד הקטגוריות»: the surface fades out under #shop into the page itself. */
.bg-scope.is-fading{
-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 96px), transparent);
mask-image:linear-gradient(to bottom, #000 calc(100% - 96px), transparent);
}
.bg-scope-tiles, .bg-scope-wash{position:absolute; inset:0;}
.bg-scope-tile{position:absolute; inset-inline:0; background-size:cover; background-position:center; background-repeat:no-repeat;}
@media (max-width:640px){ .bg-scope-tile.has-phone-image{background-image:var(--bgs-phone) !important;} }
.bg-scope[data-kind="split"] .bg-scope-tile{
background:var(--primary);
background:linear-gradient(160deg, color-mix(in srgb, var(--primary) 82%, #ffffff), var(--primary) 55%, color-mix(in srgb, var(--primary) 72%, #000000));
}
.bg-scope[data-kind="none"] .bg-scope-tile{background:var(--ui-page-bg, var(--stone));}
.bg-scope-pattern{
position:absolute; inset-inline:0; bottom:0;
-webkit-mask-image:linear-gradient(to bottom, transparent, #000 120px);
mask-image:linear-gradient(to bottom, transparent, #000 120px);
}
/* The hero's own ground steps aside; its video stays in the hero. */
html[data-bg-scope]:not([data-a11y-contrast="1"]) #home{background:transparent !important;}
html[data-bg-scope]:not([data-a11y-contrast="1"]):not([data-layout-hero="split"]) #home #heroBg{background-image:none !important;}
html[data-bg-scope]:not([data-a11y-contrast="1"]) #home .hero-overlay{background:transparent !important;}
html[data-bg-scope][data-layout-hero="split"]:not([data-a11y-contrast="1"]) #home::after{background:none;}
html[data-bg-scope][data-layout-hero="none"]:not([data-a11y-contrast="1"]) #home::before{background:none; box-shadow:none;}
/* The category area shows the surface. A ground the owner set on the area
itself (theme.storeDesign.parts, `html #shop`) still wins: :where() keeps
this rule at one id; an area with its own background («רקע»,
[data-part-ground]) covers the surface. */
:where(html[data-bg-scope]:not([data-a11y-contrast="1"])) #shop:where(:not([data-part-ground])){background:transparent; border-bottom-color:transparent;}
html[data-bg-scope][data-layout-hero="full"][data-layout-categories="tiles"]:not([data-a11y-contrast="1"]) #home + #shop:not([data-part-ground]){background:transparent;}
/* The words list has no card under its text: it gets the page's own panel. */
html[data-bg-scope][data-layout-categories="list"]:not([data-a11y-contrast="1"]) #shop .nav-scroll{
background:var(--ui-page-bg, var(--paper, #FBF7EF)); border-radius:var(--r-panel, 14px); padding-block:6px;
}
@media (max-width:767px){
html[data-bg-scope][data-layout-categories="list"]:not([data-a11y-contrast="1"]) #shop .nav-scroll{margin-inline:12px;}
}
/* «כל הדף»: the offers strip shows it too; its panel keeps its ground. */
:where(html[data-bg-scope="page"]:not([data-a11y-contrast="1"])) #dealsStrip:where(:not([data-part-ground])){background:transparent; border-bottom-color:transparent;}
/* «עוצמת הרקע» (theme.backgroundVeil "normal" / "light", html[data-bg-veil]):
the veil is thinner, so the words that sit straight on the layer get a
halo of the page colour (the ink stays the page's): the category words,
the catalogue headings and the sections' titles, eyebrows and text. Cards,
panels and buttons keep their own grounds and take no halo. */
html[data-bg-scope][data-bg-veil]:not([data-a11y-contrast="1"]) :is(#shop .cat-card-name, #catalog .category-head :is(h2, p), .editorial-block:not([style*="--block-background"]) .editorial-copy :is(h2, .editorial-eyebrow, .rich-text)){
--bgs-halo:var(--bgs-page, var(--paper, #FBF7EF)); /* the page colour the veil is made of (background-scope.js) */
text-shadow:0 0 1px var(--bgs-halo), 0 0 2px var(--bgs-halo), 0 0 4px var(--bgs-halo), 0 0 8px var(--bgs-halo), 0 0 8px var(--bgs-halo), 0 0 14px var(--bgs-halo), 0 0 14px var(--bgs-halo), 0 0 24px var(--bgs-halo);
}
/* …and on a light page the catalogue headings switch from the brand colour
to the page's own ink, the strongest contrast it has, since more of the
photo shows behind them (a dark page's headings are already near white). */
html[data-bg-scope][data-bg-veil]:not([data-a11y-contrast="1"]):not(: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"])) #catalog .category-head h2{color:var(--ink, #1E2B22);}
/* A dark page ground (the «קצבייה» kit's espresso, and the other dark
recipes): the bands follow it (benchmark 2026-10-27, item 4). Before, the
category band, the offers tray and the footer stayed light stripes across
a dark shop. The bands take the ground (a shade darker for the footer),
their words turn light; the cards, the sheets, the inputs and the cart
keep their own light panels, which read on dark. An owner's own band
colour (--ui-menu-bg, --ui-deals-bg), a part ground and high contrast win. */
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"]):not([data-a11y-contrast="1"]){
--dark-band-line:rgba(255,255,255,0.12); --dark-band-ink:#F3F5F3; --dark-band-soft:rgba(243,245,243,0.78);
}
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"]):not([data-a11y-contrast="1"]) :is(#shop, #dealsStrip):where(:not([data-part-ground])){
background:var(--ui-menu-bg, transparent); border-bottom-color:var(--dark-band-line);
}
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"]):not([data-a11y-contrast="1"]) #dealsStrip:where(:not([data-part-ground])){
--deals-ground:var(--ui-deals-bg, rgba(255,255,255,0.06));
}
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"]):not([data-a11y-contrast="1"]) #dealsStrip:where(:not([data-part-ground])) .deals-panel{
border-color:var(--dark-band-line); box-shadow:none;
}
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"]):not([data-a11y-contrast="1"]) #dealsStrip:where(:not([data-part-ground])):not([style*="--ui-deals-bg"]) .deals-head h2{
color:var(--dark-band-ink);
}
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"])[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]){
background:rgba(0,0,0,0.28); border-top-color:var(--dark-band-line); color:var(--dark-band-soft);
}
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"])[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) :is(.footer-name, .footer-col-h, .footer-pickup-title, .footer-pickup-name){
color:var(--dark-band-ink);
}
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"])[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) :is(.footer-info, .footer-contact-link, .footer-legal a, .footer-legal .sep, .footer-col-link, .copy, .footer-pickup-address, .footer-pickup-hours, .footer-pickup-note){
color:var(--dark-band-soft);
}
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"])[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) :is(.copy, .footer-zones, .footer-zone-pickup){
border-top-color:var(--dark-band-line);
}
/* «הרשמה לעדכונים» on the same dark band (SH2-08): its labels and consent
line read the band's ink, not the light footer's dark ink (1.14:1 in
«קצבייה»), the privacy link its soft ink. */
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"])[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) .footer-zone-news :is(.footer-news-label, .footer-news-consent){color:var(--dark-band-ink);}
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"])[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) .footer-news-privacy{color:var(--dark-band-soft);}
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"])[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) .footer-news-consent input{accent-color:var(--dark-band-ink);}
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"])[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) .footer-zone-news{border-top-color:var(--dark-band-line);}
/* Boutique on a dark page: its own light paper left the page's light words on light. */
html[data-catalog-style="boutique"]: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"]):not([data-a11y-contrast="1"]) body{background:var(--ui-page-bg, var(--theme-page-bg, var(--boutique-paper)));}
/* newsletter.css */
/* «הרשמה לעדכונים» (app/newsletter.js): the footer's sign-up zone. Its own
file, so nothing here touches the footer a shop without the form draws.
The footer's colours (theme.css «FOOTER»): cream text on the brand colour;
the fields are light, the button is the cream pill with the brand ink. */
/* The compact footer: a row under the three zones, centred, the fields side
by side on a computer and stacked on a phone. */
.footer-zone-news{grid-column:1/-1; width:100%; max-width:46rem; justify-self:center; align-items:stretch; text-align:start;
padding-top:18px; border-top:1px solid rgba(251,246,236,0.18);}
.footer-news-title{text-align:center;}
.footer-news-form{display:grid; gap:10px;}
.footer-news-form[hidden]{display:none;}
.footer-news-fields{display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 11rem), 1fr));}
.footer-news-field{display:flex; flex-direction:column; gap:4px; min-width:0;}
.footer-news-label{font-size:0.8125rem; font-weight:600; color:rgba(251,246,236,0.92);}
.footer-news-input{width:100%; min-height:44px; box-sizing:border-box; padding:0 12px; font:inherit; font-size:1rem;
color:var(--ink, #1F2A24); background:#FBF6EC; border:1px solid rgba(251,246,236,0.6); border-radius:var(--r-control, 10px);}
.footer-news-input[dir="ltr"]{text-align:start;}
.footer-news-input[dir="ltr"]::placeholder{text-align:right;}
.footer-news-consent-row{display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px;}
.footer-news-consent{display:inline-flex; align-items:center; gap:10px; min-height:44px; cursor:pointer;
font-size:0.875rem; color:rgba(251,246,236,0.92);}
.footer-news-consent input{width:22px; height:22px; flex:none; margin:0; accent-color:#FBF6EC;}
.footer-news-privacy{display:inline-flex; align-items:center; min-height:44px; font-size:0.8125rem;
color:rgba(251,246,236,0.85); text-decoration:underline; text-underline-offset:3px;}
.footer-news-privacy:hover{color:#fff;}
.footer-news-error{margin:0; padding:8px 12px; border-radius:var(--r-control, 10px); font-size:0.875rem; font-weight:600;
color:var(--danger, #B42318); background:#FBF6EC;}
.footer-news-error[hidden]{display:none;}
.footer-news-btn{justify-self:start; min-height:44px; min-width:8rem; padding:0 22px; border:0; cursor:pointer;
border-radius:var(--r-chip, 999px); font:inherit; font-size:1rem; font-weight:700;
color:var(--primary, #1F4D3A); background:#FBF6EC;}
.footer-news-btn:hover{background:#fff;}
.footer-news-btn:disabled{cursor:wait; color:var(--ink, #1F2A24);}
.footer-news-done{margin:0; text-align:center; font-size:1.0625rem; font-weight:700; color:#fff;}
.footer-news-done[hidden]{display:none;}
/* The honeypot: out of sight and out of reach, but still in the form. */
.footer-news-hp{position:absolute; inset-inline-start:-10000px; width:1px; height:1px; opacity:0; pointer-events:none;}
.footer-zone-news :is(input, button, a):focus-visible{outline:3px solid #FBF6EC; outline-offset:2px;}
/* «תחתית מלאה»: a column of its own at the end, the fields stacked. */
html[data-layout-footer="full"] .footer-zones:has(.footer-zone-news){grid-template-columns:minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr);}
html[data-layout-footer="full"] .footer-zone-news{grid-column:-2; grid-row:1 / span 2; max-width:none; justify-self:stretch;
padding-top:0; border-top:0;}
html[data-layout-footer="full"] .footer-news-title{text-align:start;}
html[data-layout-footer="full"] .footer-news-fields{grid-template-columns:1fr;}
html[data-layout-footer="full"] .footer-news-btn{justify-self:stretch;}
html[data-layout-footer="full"] .footer-news-done{text-align:start;}
@media (max-width:768px){
.footer-news-fields{grid-template-columns:1fr;}
.footer-news-btn{justify-self:stretch;}
html[data-layout-footer="full"] .footer-zone-news{grid-column:1 / -1; grid-row:auto;}
}
/* High contrast (the accessibility menu): the footer turns black and white. */
html[data-a11y-contrast="1"] .footer-zone-news :is(.footer-news-input, .footer-news-btn, .footer-news-error){
background:#000000 !important; color:#ffffff !important; border:2px solid #ffffff !important;}
/* The light footer (app/home.css, html[data-home-footer="light"]): the
page's own ground, so the form takes the page's ink. On every screen, like
the footer itself since the owner list of 26.10 (item 11): kept phone-only
here, the desktop form was cream on cream (bug audit 2026-10-29, T6). */
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) .footer-zone-news{border-top-color:var(--line, rgba(0,0,0,.14));}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) .footer-zone-news :is(.footer-news-label, .footer-news-consent){color:var(--ink, #1F2A24);}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) .footer-news-privacy{color:var(--ink-soft, #4A564E);}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) .footer-news-input{background:var(--surface, #fff); border-color:var(--line, rgba(0,0,0,.18));}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) .footer-news-consent input{accent-color:var(--primary, #1F4D3A);}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) .footer-news-btn{background:var(--primary, #1F4D3A); color:var(--on-primary, #fff);}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) .footer-news-done{color:var(--primary, #1F4D3A);}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) .footer-zone-news :is(input, button, a):focus-visible{outline-color:var(--focus-ring, #0B5FFF);}
/* articles.css */
/* «מתכונים וכתבות» (app/articles.js, docs/LAYOUTS.md «The section kinds»):
linked cards in three looks — cards (the section's columns, 4 / 2 by
default), carousel (one row, scroll-snap) and list (the photo at the side).
The whole card is the link (the button's ::after covers it). */
.editorial-articles-list{list-style:none;margin:22px 0 4px;padding:0;display:grid;grid-template-columns:repeat(var(--block-columns-desktop,4),minmax(0,1fr));gap:var(--block-gap-desktop,18px);text-align:start;}
.editorial-article{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:12px;border-radius:var(--r-panel);
background:var(--block-card,var(--card-bg,#fff));border:1px solid var(--line,#DDE5D9);border-color:var(--block-card-line,color-mix(in srgb,var(--primary) 12%,transparent));
box-shadow:0 1px 2px rgba(30,42,34,.05),0 10px 24px -16px rgba(30,42,34,.28);}
.editorial-article-photo{position:relative;flex:none;aspect-ratio:6/7;overflow:hidden;border-radius:var(--r-control);background:var(--paper-dim,#F1ECE2);}
.editorial-article-photo img{display:block;width:100%;height:100%;object-fit:cover;}
.editorial-article-tag{position:absolute;top:10px;inset-inline-start:10px;max-width:calc(100% - 20px);padding:3px 10px;border-radius:var(--r-chip);
background:var(--block-accent,var(--primary));color:var(--paper,#fff);font-size:.8125rem;font-weight:700;line-height:1.4;overflow-wrap:anywhere;}
.editorial-article-body > .editorial-article-tag{position:static;align-self:center;}
.editorial-article-body{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;min-width:0;padding:0 4px 4px;text-align:center;}
.editorial-article-title{margin:0;font-family:var(--font-display,var(--font-body));font-size:1.25rem;line-height:1.3;overflow-wrap:anywhere;}
.editorial-article-meta{list-style:none;margin:0;padding:0;display:grid;gap:4px;color:var(--ink-soft,var(--ink));font-size:calc(.9375rem * var(--sec-text,1));line-height:1.4;}
.editorial-article-meta li{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;overflow-wrap:anywhere;}
.editorial-article-ic{display:inline-flex;flex:none;color:var(--block-accent,var(--primary));}
.editorial-article-ic svg{display:block;width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.editorial-article-go{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;max-width:100%;padding:10px 22px;
border-radius:var(--r-control);background:var(--block-accent,var(--primary));color:var(--paper,#fff);font-weight:700;line-height:1.25;text-decoration:none;}
.editorial-article-go::after{content:"";position:absolute;inset:0;border-radius:var(--r-panel);}
.editorial-article-arrow{display:inline-block;}
html[dir="ltr"] .editorial-article-arrow{transform:scaleX(-1);}
.editorial-article-go:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF);outline-offset:2px;}
.editorial-article:hover .editorial-article-go{text-decoration:underline;text-underline-offset:3px;}
@media (prefers-reduced-motion:no-preference){
html:not([data-a11y-motion="1"]):not([data-motion="off"]) .editorial-article-photo img{transition:transform .35s ease;}
html:not([data-a11y-motion="1"]):not([data-motion="off"]) .editorial-article:hover .editorial-article-photo img{transform:scale(1.04);}
}
/* carousel: one row that scrolls sideways, a card snapping at a time */
.editorial-articles-list[data-look="carousel"]{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:250px;overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:2px 2px 12px;scrollbar-width:thin;}
.editorial-articles-list[data-look="carousel"] > .editorial-article{scroll-snap-align:start;}
/* list: the photo at the side, the words beside it */
.editorial-articles-list[data-look="list"]{grid-template-columns:repeat(2,minmax(0,1fr));}
.editorial-articles-list[data-look="list"] .editorial-article{flex-direction:row;align-items:stretch;gap:16px;}
.editorial-articles-list[data-look="list"] .editorial-article-photo{width:38%;aspect-ratio:1;align-self:flex-start;}
.editorial-articles-list[data-look="list"] .editorial-article-body{align-items:flex-start;text-align:start;padding:4px 0;}
.editorial-articles-list[data-look="list"] .editorial-article-meta li{justify-content:flex-start;}
.editorial-articles-list[data-look="list"] .editorial-article-body > .editorial-article-tag{align-self:flex-start;}
.editorial-articles-list[data-look="list"] .editorial-article-go{margin-top:auto;padding-inline:18px;}
@media (max-width:640px){
.editorial-articles-list{grid-template-columns:repeat(var(--block-columns-phone,2),minmax(0,1fr));gap:var(--block-gap-phone,10px);}
.editorial-article{padding:8px;gap:10px;}
.editorial-article-title{font-size:1.0625rem;}
.editorial-articles-list:not([data-look="list"]) .editorial-article-go{width:100%;padding-inline:8px;gap:6px;font-size:.875rem;white-space:nowrap;}
.editorial-article-meta{font-size:calc(.8125rem * var(--sec-text,1));}
.editorial-articles-list[data-look="carousel"]{grid-template-columns:none;grid-auto-columns:70%;}
.editorial-articles-list[data-look="list"]{grid-template-columns:minmax(0,1fr);}
.editorial-articles-list[data-look="list"] .editorial-article{gap:12px;}
.editorial-articles-list[data-look="list"] .editorial-article-photo{width:36%;}
}
/* free-canvas.css */
/* The free canvas (app/free-canvas.js, docs/VISUAL_CANVAS.md). A stage of
design pixels (1200 wide; a phone layout 390) scaled by one transform to
the width it gets: positions, sizes and type are design px on purpose, so
the composition keeps its proportions at every width. The box reserves
its height (aspect-ratio) before the script measures, so nothing shifts.
left/top are physical on the stage: it is a coordinate plane, the same in
both directions (the reading order is the DOM's). */
.editorial-block.editorial-free.has-canvas{min-height:0}
.editorial-free.has-canvas>.editorial-copy:empty{display:none}
/* Type is design px, but a shop that chose a «גודל טקסט» above רגיל
(theme.fontScale → --font-scale, app.js) gets its canvas text larger by
the same factor; a smaller choice leaves the design's sizes. */
.fc{--fc-ts:max(1, var(--font-scale, 1))}
.fc{position:relative;width:100%;aspect-ratio:1200/var(--fc-h,480);overflow:hidden;overflow:clip;background-size:cover;background-position:center}
.fc[data-fc-screen]{aspect-ratio:auto;height:100vh;height:100svh}
.fc[data-fc-bleed]{overflow:visible}
.editorial-block.editorial-free.fc-bleed{position:relative;z-index:6;overflow:visible}
.fc .fc-stage{position:absolute;top:0;left:0;width:1200px;height:calc(var(--fc-h,480) * 1px);transform:scale(var(--fc-k,1));transform-origin:0 0}
.fc .fc-el{position:absolute;box-sizing:border-box;margin:0;left:calc(var(--x) * 1px);top:calc(var(--y) / var(--fc-h,480) * 100%);width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);
transform:rotate(var(--r,0deg));z-index:var(--z,0);--fsv:var(--fs,16);line-height:1.3;overflow-wrap:anywhere;color:var(--ink)}
.fc .fc-el.fc-tx{white-space:pre-wrap}
.fc-h1{font-size:2em}
.editorial-block .fc :is(h2,h3).fc-el::after{display:none}
.fc .fc-el:where(.fc-tx,.fc-shape,.fc-sticker,.fc-btn,.fc-counter){background:var(--fc-fill,transparent);border:var(--fc-sw,0) solid var(--fc-stroke,transparent);border-radius:var(--fc-rad,0)}
.fc .fc-btn{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font-weight:700;cursor:pointer;background:var(--fc-fill,var(--primary));color:var(--paper)}
.fc .fc-counter{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.fc .fc-counter .fc-num{font-size:1em;line-height:1;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.fc .fc-counter .fc-label{font-size:max(.35em,14px);margin-top:.3em}
.fc .fc-sticker{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;background:var(--fc-fill,var(--gold));padding:.3em .6em}
.fc .fc-sticker[data-fc-sticker="pill"]{border-radius:999px}
.fc .fc-sticker[data-fc-sticker="circle"]{border-radius:50%}
.fc .fc-sticker[data-fc-sticker="burst"]{clip-path:polygon(50% 0,59% 12%,73% 5%,76% 20%,91% 18%,87% 33%,100% 40%,90% 51%,100% 62%,86% 68%,89% 83%,74% 81%,69% 95%,57% 87%,46% 100%,38% 87%,24% 94%,21% 80%,6% 81%,11% 67%,0 59%,10% 49%,1% 37%,15% 32%,12% 17%,27% 19%,31% 5%,44% 13%)}
.fc .fc-sticker[data-fc-sticker="tag"]{clip-path:polygon(12% 0,100% 0,100% 100%,12% 100%,0 50%);padding-inline-end:.8em;padding-inline-start:1.2em}
[dir="ltr"] .fc-sticker[data-fc-sticker="tag"]{clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%)}
.fc .fc-shape{background:var(--fc-fill,var(--primary))}
.fc .fc-shape[data-fc-shape="circle"]{border-radius:50%}
.fc .fc-shape:is([data-fc-shape="triangle"],[data-fc-shape="star"],[data-fc-shape="line"]){background:none;border:0}
.fc .fc-shape svg{display:block;width:100%;height:100%;overflow:visible}
.fc .fc-shape svg polygon{fill:var(--fc-fill,var(--primary));stroke:var(--fc-stroke,none);stroke-width:var(--fc-sw,0);vector-effect:non-scaling-stroke}
.fc .fc-shape svg line{stroke:var(--fc-stroke,var(--fc-fill,var(--ink)));stroke-width:max(var(--fc-sw,2px),1px);vector-effect:non-scaling-stroke}
.fc .fc-el.fc-divider{height:0;border:0;border-top:var(--fc-sw,2px) solid currentColor;top:calc((var(--y) + var(--h) / 2) / var(--fc-h,480) * 100%)}
.fc .fc-image,.fc .fc-img-link img{display:block;object-fit:cover;border-radius:var(--fc-rad,0);border:var(--fc-sw,0) solid var(--fc-stroke,transparent)}
.fc .fc-img-link img{width:100%;height:100%}
.fc .fc-icon{display:grid;place-items:center;color:var(--primary)}
.fc .fc-icon svg{width:100%;height:100%}
.fc .fc-embed{border-radius:var(--fc-rad,0);overflow:hidden;background:var(--paper-dim)}
.fc .fc-embed iframe{display:block;width:100%;height:100%;border:0}
.fc .fc-product{height:auto;min-height:calc(var(--h) * 1px)}
.fc .fc-product>.card{width:100%;margin:0}
/* «מוצרים» / «קטגוריות» (phase 3): the cards' own layout inside; the box takes their height. */
.fc .fc-flow{position:absolute;inset:0;pointer-events:none}
html .fc .fc-flow>.fc-el{pointer-events:auto;left:calc(var(--x) * var(--fc-k,1) * 1px);width:calc(var(--w) * var(--fc-k,1) * 1px);height:auto;min-height:calc(var(--h) * var(--fc-k,1) * 1px);font-size:inherit}
.fc .fc-grid{display:grid;grid-template-columns:repeat(var(--fc-cols,4),minmax(0,1fr));gap:16px}
.fc .fc-grid>.card{width:100%;margin:0;min-width:0}
.fc .fc-grid.fc-carousel{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--fc-cols,4) - 1) * 16px) / var(--fc-cols,4));overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.fc .fc-grid.fc-carousel>.card{scroll-snap-align:start}
.fc .fc-cat{display:grid;gap:8px;justify-items:center;text-align:center;color:var(--ink);text-decoration:none;font-weight:700}
.fc .fc-cat img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-panel,12px);background:var(--paper-dim)}
.fc .fc-cat-ic{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:var(--r-panel,12px);background:var(--paper-dim);font-size:3rem}
.fc .fc-cats-chips{display:flex;flex-wrap:wrap;gap:10px}
.fc .fc-cats-chips .fc-cat{padding:.5em 1.1em;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.fc .fc-cat:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF);outline-offset:2px}
.fc-area{position:absolute;inset:0;aspect-ratio:auto;z-index:4;pointer-events:none}
.fc-area .fc-stage{height:100%}
.fc.fc-area .fc-el{pointer-events:auto}
.fc .fc-el:where(a):focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF);outline-offset:2px}
/* «גדילה עם הטקסט» (canvas.grow, free-canvas.js grow()): a text's missing
height and what it pushes, on top of the stored geometry; unset = none. */
.fc[data-fc-grow]{aspect-ratio:1200/var(--fc-hg,var(--fc-h,480))}
.fc[data-fc-grow] .fc-stage{height:calc(var(--fc-hg,var(--fc-h,480)) * 1px)}
.fc[data-fc-grow] .fc-el{top:calc((var(--y) + var(--gy,0)) / var(--fc-hg,var(--fc-h,480)) * 100%);height:calc((var(--h) + var(--gh,0)) * 1px)}
.fc[data-fc-grow] .fc-el.fc-divider{height:0;top:calc((var(--y) + var(--gy,0) + var(--h) / 2) / var(--fc-hg,var(--fc-h,480)) * 100%)}
/* The reduced-motion «no transform on hover» rules (theme.css) are about
motion; the canvas's scale and an element's rotation are its geometry, so
a pointer over the canvas never un-scales it (it moved the buttons away
from the pointer). */
html .fc .fc-stage:is(:hover,:active){transform:scale(var(--fc-k,1)) !important}
html .fc .fc-el:is(:hover,:active,:focus){transform:rotate(var(--r,0deg)) !important}
/* «טקסט נפתח» (a button's link to: text): its text under it once opened; grow() makes the room. */
.fc button.fc-el{font-family:inherit;line-height:inherit}
.fc .fc-more{position:absolute;box-sizing:border-box;margin:0;left:calc(var(--mx) * 1px);width:calc(var(--mw) * 1px);top:calc((var(--y) + var(--gy,0) + var(--h) + 12) / var(--fc-hg,var(--fc-h,480)) * 100%);
white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;text-align:center;color:var(--ink)}
.fc .fc-more[hidden]{display:none}
/* The hero, the footer and the header in free mode (theme.areaCanvas..free.hide):
the parts the canvas replaces keep their room (so the area keeps its size)
but are neither drawn nor read; its ground and live parts stay. */
[data-fc-free~="heroLabel"] #heroLabel{visibility:hidden !important}
[data-fc-free~="heroLogo"] #heroLogo{visibility:hidden !important}
[data-fc-free~="heroName"] #heroName{visibility:hidden !important}
[data-fc-free~="heroTitle"] #heroTitle{visibility:hidden !important}
[data-fc-free~="heroDesc"] #heroDesc{visibility:hidden !important}
[data-fc-free~="richHeroAction"] #richHeroAction{visibility:hidden !important}
[data-fc-free~="heroInfo"] #heroInfo{visibility:hidden !important}
[data-fc-free~="callBtn"] #callBtn{visibility:hidden !important}
[data-fc-free~="heroWhatsappBtn"] #heroWhatsappBtn{visibility:hidden !important}
[data-fc-free~="heroChips"] #heroChips{visibility:hidden !important}
[data-fc-free~="footerLogo"] #footerLogo{visibility:hidden !important}
[data-fc-free~="footerName"] #footerName{visibility:hidden !important}
[data-fc-free~="footerReview"] #footerReview{visibility:hidden !important}
[data-fc-free~="footerAddress"] #footerAddress{visibility:hidden !important}
[data-fc-free~="footerHours"] #footerHours{visibility:hidden !important}
[data-fc-free~="footerPhone"] #footerPhone{visibility:hidden !important}
[data-fc-free~="footerWhatsapp"] #footerWhatsapp{visibility:hidden !important}
[data-fc-free~="siteHeaderLogo"] #siteHeaderLogo{visibility:hidden !important}
/* A section turned free («עריכה חופשית», docs/FREE_LAYOUT.md) keeps the box
its kind had: the width, ground and line of a plain story, a banner's tint. */
.editorial-free[data-fc-from="story-plain"]{--block-default-width:860px;--block-default-background:transparent;--block-default-border:0 solid transparent}
.editorial-free[data-fc-from="banner"]{--block-default-background:color-mix(in srgb,var(--primary) 9%,var(--paper,#FBF7EF));--block-default-border:0 solid transparent}
@media (max-width:640px){
.fc[data-fc-phone]{aspect-ratio:390/var(--fc-ph,640)}
.fc[data-fc-phone] .fc-stage{width:390px;height:calc(var(--fc-ph,640) * 1px)}
.fc[data-fc-phone] .fc-el{--ta-now:var(--pta,var(--ta));left:calc(var(--px) * 1px);top:calc(var(--py) / var(--fc-ph,640) * 100%);width:calc(var(--pw) * 1px);height:calc(var(--ph) * 1px);transform:rotate(var(--pr,0deg));--fsv:var(--pfs,16)}
.fc[data-fc-phone] .fc-el.fc-divider{height:0;top:calc((var(--py) + var(--ph) / 2) / var(--fc-ph,640) * 100%)}
.fc[data-fc-phone] .fc-el[data-fc-hide]{display:none}
.fc .fc-grid{--fc-cols:var(--fc-pcols,2)}
html .fc[data-fc-phone] .fc-flow>.fc-el{left:calc(var(--px) * var(--fc-k,1) * 1px);width:calc(var(--pw) * var(--fc-k,1) * 1px);height:auto;min-height:calc(var(--ph) * var(--fc-k,1) * 1px)}
html .fc[data-fc-auto] .fc-flow{position:static;display:flex;flex-direction:column;gap:16px;padding:0 20px 24px}
html .fc[data-fc-auto] .fc-flow>.fc-el{position:relative;left:auto;top:auto;width:100%;min-height:0}
.fc[data-fc-grow][data-fc-phone]{aspect-ratio:390/var(--fc-phg,var(--fc-ph,640))}
.fc[data-fc-grow][data-fc-phone] .fc-stage{height:calc(var(--fc-phg,var(--fc-ph,640)) * 1px)}
.fc[data-fc-grow][data-fc-phone] .fc-el{top:calc((var(--py) + var(--pgy,0)) / var(--fc-phg,var(--fc-ph,640)) * 100%);height:calc((var(--ph) + var(--pgh,0)) * 1px)}
html .fc[data-fc-phone] .fc-el:is(:hover,:active,:focus){transform:rotate(var(--pr,0deg)) !important}
html .fc[data-fc-auto] .fc-stage:is(:hover,:active),html .fc[data-fc-auto] .fc-el:is(:hover,:active,:focus){transform:none !important}
.fc[data-fc-phone] .fc-more{left:calc(var(--pmx) * 1px);width:calc(var(--pmw) * 1px);top:calc((var(--py) + var(--pgy,0) + var(--ph) + 12) / var(--fc-phg,var(--fc-ph,640)) * 100%);--fsv:var(--pfs,16)}
.fc[data-fc-grow][data-fc-phone] .fc-el.fc-divider{height:0;top:calc((var(--py) + var(--pgy,0) + var(--ph) / 2) / var(--fc-phg,var(--fc-ph,640)) * 100%)}
.fc-area[data-fc-phone]{aspect-ratio:auto}
/* «אוטומטי»: no phone layout — the elements stack by reading order. */
.fc[data-fc-auto]{aspect-ratio:auto}
.fc[data-fc-auto][data-fc-screen]{height:auto;min-height:100svh}
.fc[data-fc-auto] .fc-stage{position:static;display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:auto;height:auto;padding:24px 20px;transform:none}
.fc[data-fc-auto][data-fc-mid] .fc-stage{align-items:center}
.fc[data-fc-auto] .fc-el{position:relative;left:auto;top:auto;width:min(100%,calc(var(--aw) * 1px));height:auto;aspect-ratio:var(--w)/var(--h);transform:none;--fsv:var(--afs,16);order:var(--ao)}
.fc[data-fc-auto] .fc-el:is(h2,h3,p,.fc-product,.fc-divider,.fc-products,.fc-categories){aspect-ratio:auto;width:100%}
.fc[data-fc-auto] .fc-embed{width:100%}
/* A heading keeps its text close; a card's own box steps aside, its place stays a wider gap (!important: the element's inline margin:0 keeps the theme's p, h2 margins off). */
.fc[data-fc-auto] :is(h2,h3).fc-el+p.fc-el{margin-top:-8px !important}
.fc[data-fc-auto] .fc-shape:not([data-fc-bg])+.fc-el{margin-top:16px !important}
.fc[data-fc-auto] .fc-counter{aspect-ratio:auto}
.fc[data-fc-auto] .fc-shape:not([data-fc-bg]){display:none}
/* A small shape's one icon or short text carries the shape's fill; decor = the owner's «הסתרה» in the stack (app/free-canvas.js). */
.fc[data-fc-auto] .fc-el[data-fc-bubble]{display:grid;place-items:center;flex:none;box-sizing:border-box;width:min(100%,calc(var(--baw) * 1px));aspect-ratio:var(--bar);padding:calc(var(--bp) * 1px);background:var(--bf);border-radius:var(--bbr)}
.fc[data-fc-auto] .fc-shape[data-fc-decor="keep"]{display:block}
.fc[data-fc-auto] .fc-el[data-fc-decor="hide"]{display:none}
.fc[data-fc-auto] .fc-el[data-fc-bg]{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;z-index:0}
.fc[data-fc-auto] .fc-btn{aspect-ratio:auto;width:auto;min-width:min(100%,220px);min-height:48px;padding:.5em 1.2em}
.fc[data-fc-auto] .fc-el.fc-divider{top:auto}
}
/* embed.css */
/* «הטמעה» (app/embed.js, docs/LAYOUTS.md «Embeds»): one provider iframe in
a box sized before it loads — an aspect-ratio per ratio, or a fixed height
for «גובה קבוע» (forms, Spotify) — so nothing shifts when it arrives.
Looks: plain (the section's width), card (framed), center (narrow).
Tall ratios and social posts keep a phone-like width, centred. */
.editorial-embed-box{width:100%;max-width:100%;min-width:0;margin:22px auto 4px;box-sizing:border-box;}
.editorial-embed-box[data-look="center"]{max-width:min(100%,720px);}
.editorial-embed-box[data-look="card"]{padding:12px;border-radius:var(--r-panel);background:var(--block-card,var(--card-bg,#fff));
border:1px solid var(--line,#DDE5D9);border-color:var(--block-card-line,color-mix(in srgb,var(--primary) 12%,transparent));
box-shadow:0 1px 2px rgba(30,42,34,.05),0 10px 24px -16px rgba(30,42,34,.28);}
.editorial-embed-frame{position:relative;width:100%;max-width:100%;margin-inline:auto;overflow:hidden;border-radius:var(--r-control);background:var(--paper-dim,#F1ECE2);aspect-ratio:16/9;}
.editorial-embed-box[data-ratio="4:3"] .editorial-embed-frame{aspect-ratio:4/3;}
.editorial-embed-box[data-ratio="1:1"] .editorial-embed-frame{aspect-ratio:1/1;max-width:600px;}
.editorial-embed-box[data-ratio="9:16"] .editorial-embed-frame{aspect-ratio:9/16;max-width:min(100%,400px);}
.editorial-embed-box[data-ratio="auto"] .editorial-embed-frame{aspect-ratio:auto;height:var(--embed-h,600px);}
.editorial-embed-box:is([data-provider="instagram"],[data-provider="facebook"])[data-ratio="auto"] .editorial-embed-frame{max-width:540px;}
.editorial-embed-frame > iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;}
/* Data saver: the provider's mark, the title and «פתיחה» instead of the player. */
.editorial-embed-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;
border:0;background:transparent;color:var(--ink,#1E2A22);font:inherit;text-align:center;cursor:pointer;}
.editorial-embed-ic{display:inline-flex;color:var(--block-accent,var(--primary));}
.editorial-embed-ic svg{display:block;width:2.5rem;height:2.5rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.editorial-embed-name{max-width:100%;font-weight:700;line-height:1.35;overflow-wrap:anywhere;}
.editorial-embed-open{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;border-radius:var(--r-control);
background:var(--block-accent,var(--primary));color:var(--paper,#fff);font-weight:700;line-height:1.25;}
.editorial-embed-ph:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF);outline-offset:-3px;}
.editorial-embed-ph:hover .editorial-embed-open{text-decoration:underline;text-underline-offset:3px;}
@media (max-width:640px){
.editorial-embed-box{margin-top:16px;}
.editorial-embed-box[data-look="card"]{padding:8px;}
}
/* code-block.css */
/* «קוד מותאם» (app/code-block.js, docs/CODE_BLOCK.md): one sandboxed frame,
sized before it loads — a fixed height (fixed, and auto until the page
reports its own), or an aspect-ratio — so nothing shifts when it arrives. */
.editorial-code-box{width:100%;max-width:100%;min-width:0;margin:22px auto 4px;box-sizing:border-box;}
.editorial-code-frame{position:relative;width:100%;max-width:100%;overflow:hidden;border-radius:var(--r-control);height:var(--code-h,400px);}
.editorial-code-box[data-mode="ratio"] .editorial-code-frame{height:auto;aspect-ratio:16/9;}
.editorial-code-box[data-ratio="4:3"] .editorial-code-frame{aspect-ratio:4/3;}
.editorial-code-box[data-ratio="1:1"] .editorial-code-frame{aspect-ratio:1/1;max-width:600px;margin-inline:auto;}
.editorial-code-box[data-ratio="9:16"] .editorial-code-frame{aspect-ratio:9/16;max-width:min(100%,400px);margin-inline:auto;}
.editorial-code-frame > iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:transparent;}
/* The loading picture (b.poster, app/code-block.js): over the frame until its page has loaded; never takes a click, adds no height. */
.editorial-code-poster{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;opacity:1;transition:opacity .2s ease;}
.editorial-code-poster.is-lifting{opacity:0;}
.editorial-code-poster > img{display:block;width:100%;height:100%;object-fit:cover;}
@media (prefers-reduced-motion:reduce){ .editorial-code-poster{transition:none;} }
@media (max-width:640px){ .editorial-code-box{margin-top:16px;} }
/* «מקצה לקצה» (b.edge, app/code-block.js fitEdges): the section spans the
page — margins from its parent's measured edges, no padding, border or
corners; its title keeps its own room, and without one nothing is left
above or below the frame. */
html body .editorial-block.editorial-code[data-code-edge]{width:auto !important;max-width:none !important;margin-left:var(--code-edge-l,0px) !important;margin-right:var(--code-edge-r,0px) !important;
padding:0 !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;clip-path:none !important;}
.editorial-code[data-code-edge] > .editorial-copy:empty{display:none;}
.editorial-code[data-code-edge] > .editorial-copy{padding:clamp(20px,4vw,44px) clamp(20px,4vw,44px) 0;}
.editorial-code[data-code-edge] .editorial-code-box{margin:0;}
.editorial-code[data-code-edge] .editorial-code-frame{border-radius:0;}
.editorial-code[data-code-edge] > .editorial-copy:not(:empty) + .editorial-code-box{margin-top:16px;}
/* «מרווחים» on an edge section (builder/section-design.js): above and below
are 0 unless the owner set them (app/code-block.js), applied by
content-placement.css; in the sections' column the row gap under it goes
too unless the next section has room of its own above, so 0 touches both
neighbours. «מרווח בצדדים» adds its room inside the page's edges. */
@media (min-width:641px){
html .editorial > .editorial-block.editorial-code[data-code-edge]:has(+ .editorial-block:not([style*="--block-space-above-desktop"])){margin-bottom:calc(var(--block-space-below-desktop, 0px) - var(--ed-gap)) !important;}
html body .editorial-block.editorial-code[data-code-edge][style*="--block-space-side-desktop"]{margin-left:calc(var(--code-edge-l, 0px) + var(--block-space-side-desktop)) !important;margin-right:calc(var(--code-edge-r, 0px) + var(--block-space-side-desktop)) !important;}
}
@media (max-width:640px){
html .editorial > .editorial-block.editorial-code[data-code-edge]:has(+ .editorial-block:not([style*="--block-space-above-phone"])){margin-bottom:calc(var(--block-space-below-phone, 0px) - var(--ed-gap)) !important;}
html body .editorial-block.editorial-code[data-code-edge][style*="--block-space-side-phone"]{margin-left:calc(var(--code-edge-l, 0px) + var(--block-space-side-phone)) !important;margin-right:calc(var(--code-edge-r, 0px) + var(--block-space-side-phone)) !important;}
}
/* The shop's default (theme.edgeSections, ShopSectionDesign.sectionEdge): the section's background spans the page by the
same measured margins; its text, images and grids stay in their width, by side padding, and never touch a phone's edge.
Top and bottom keep only a frame the owner chose; a «עיטור» keeps its own border. */
html body .editorial-block[data-section-edge]{--edge-inner:var(--block-default-width,1084px);--edge-gutter:max(18px,var(--block-padding-desktop,clamp(20px,4vw,44px)));
width:auto !important;max-width:none !important;margin-left:var(--code-edge-l,0px) !important;margin-right:var(--code-edge-r,0px) !important;border-radius:0 !important;
}
html body .editorial-block[data-section-edge]:not([data-fx-divider]){padding-inline:calc(max(0px,(var(--edge-w,100%) - var(--edge-inner)) / 2) + var(--edge-gutter)) !important;}
html body .editorial-block.content-between[data-section-edge]{--edge-inner:var(--container,70rem);}
html body .editorial-block[data-section-edge="full"]{--edge-inner:1360px;}
html body .editorial-block[data-section-edge]:not([data-fx-divider]){border-inline:0 !important;border-block:var(--block-border-desktop,0 solid transparent) !important;}
@media (max-width:640px){
html body .editorial-block[data-section-edge]{--edge-gutter:max(16px,var(--block-padding-phone,18px));}
html body .editorial-block[data-section-edge]:not([data-fx-divider]){border-block:var(--block-border-phone,0 solid transparent) !important;}
}
/* engage.css */
/* The entry popup and the hero greeting (app/engage.js), «נשארים בקשר»
(app/stay-in-touch.js) and the sign-up form outside the footer
(.news-inline, app/newsletter.js mount). Its own file: a shop with none
of them on never matches a rule here. */
/* ---------- the greeting: a small line over the hero title ---------- */
.hero-greeting{margin:0 0 6px; font-size:clamp(0.9375rem, 1.6vw, 1.0625rem); font-weight:600; letter-spacing:0.01em;
color:inherit; opacity:0.92; text-wrap:balance;}
/* ---------- the entry popup ---------- */
.entry-popup{width:min(440px, calc(100vw - 32px)); max-height:calc(100svh - 32px); margin:auto; padding:0; border:0;
border-radius:var(--r-panel, 18px); background:var(--paper, #FBF7EF); color:var(--ink, #1F2A24); overflow:auto;
box-shadow:0 24px 60px -20px rgba(20,24,20,.45); box-sizing:border-box;}
.entry-popup::backdrop{background:rgba(20,16,12,.55);}
.entry-popup-box{position:relative; display:flex; flex-direction:column; outline:none;}
.entry-popup-photo{display:block; width:100%; aspect-ratio:16/9; object-fit:cover;}
.entry-popup-body{display:flex; flex-direction:column; align-items:center; gap:10px; padding:28px 24px 24px; text-align:center;}
.entry-popup-title{margin:0; font-family:var(--font-brand, inherit); font-size:clamp(1.375rem, 4vw, 1.625rem); line-height:1.2; text-wrap:balance;}
.entry-popup-text{margin:0; font-size:1rem; line-height:1.5; color:var(--ink-soft, #4A564E);}
.entry-popup-btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; align-self:stretch; width:100%; box-sizing:border-box; margin-top:6px; /* full width, as the owner's mock-up (2026-10-28) */
padding:0 24px; border:0; border-radius:var(--r-chip, 999px); background:var(--primary, #1F4D3A); color:var(--on-primary, #fff);
font:inherit; font-size:1rem; font-weight:700; text-decoration:none; cursor:pointer;}
.entry-popup-close{position:absolute; top:10px; inset-inline-end:10px; z-index:1; display:grid; place-items:center; width:44px; height:44px;
border:0; border-radius:50%; background:color-mix(in srgb, var(--paper, #FBF7EF) 88%, transparent); color:var(--ink, #1F2A24); cursor:pointer;}
.entry-popup-close svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
.entry-popup :is(a, button, input):focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
.entry-popup .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.entry-popup-news{width:100%; text-align:start;}
/* «הצגת קוד קופון» and «לא עכשיו» (content.popup action/code, closeLabel): only when the owner set them. */
.entry-popup-code{display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; margin-top:4px;
border:2px dashed var(--primary, #1F4D3A); border-radius:var(--r-control, 10px); color:var(--primary, #1F4D3A);
font-size:1.25rem; font-weight:800; letter-spacing:0.06em; font-variant-numeric:tabular-nums; unicode-bidi:isolate; user-select:all;}
/* «איסוף טלפון/וואטסאפ» (content.popup action "phone"): the phone, consent, the button; then thanks and the code. */
.entry-popup-lead{display:flex; flex-direction:column; gap:10px; width:100%; text-align:start;}
.entry-popup-field{display:flex; flex-direction:column; gap:4px; font-size:0.875rem; font-weight:600;}
.entry-popup-input{min-height:48px; padding:0 14px; border:1px solid var(--line, rgba(0,0,0,.18)); border-radius:var(--r-control, 10px);
background:var(--surface, #fff); color:var(--ink, #1F2A24); font:inherit; font-size:1rem; text-align:start; unicode-bidi:plaintext;}
.entry-popup-consent{display:flex; align-items:flex-start; gap:8px; min-height:44px; font-size:0.875rem; line-height:1.4; cursor:pointer;}
.entry-popup-consent input{flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--primary, #1F4D3A);}
.entry-popup-error{margin:0; padding:6px 10px; border-radius:var(--r-control, 10px); font-size:0.875rem; color:var(--danger, #B42318);
background:rgba(180,35,24,.08); background:color-mix(in srgb, var(--danger, #B42318) 8%, transparent);}
.entry-popup-hp{position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; inset-inline-start:-9999px;}
.entry-popup-done{display:flex; flex-direction:column; align-items:center; gap:10px; width:100%;}
.entry-popup-later{min-height:44px; padding:0 12px; border:0; background:none; color:var(--ink-soft, #4A564E);
font:inherit; font-size:0.9375rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
/* ---------- the sign-up form outside the footer ---------- */
/* The footer form is cream on the brand colour; here it sits on the page. */
.news-inline .footer-news-form{gap:10px;}
.news-inline .footer-news-label, .news-inline .footer-news-consent{color:var(--ink, #1F2A24);}
.news-inline .footer-news-input{background:var(--surface, #fff); border:1px solid var(--line, rgba(0,0,0,.18)); color:var(--ink, #1F2A24);}
.news-inline .footer-news-consent input{accent-color:var(--primary, #1F4D3A);}
.news-inline .footer-news-privacy{color:var(--ink-soft, #4A564E);}
.news-inline .footer-news-btn{background:var(--primary, #1F4D3A); color:var(--on-primary, #fff);}
.news-inline .footer-news-btn:hover{background:color-mix(in srgb, var(--primary, #1F4D3A) 88%, #000);}
.news-inline .footer-news-error{background:color-mix(in srgb, var(--danger, #B42318) 8%, transparent);}
.news-inline .footer-news-done{color:var(--primary, #1F4D3A);}
.news-inline :is(input, button, a):focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
/* ---------- «נשארים בקשר» ---------- */
.editorial-block[data-sit-empty]{display:none;}
.sit{display:grid; gap:20px 32px; margin-top:18px; min-width:0;}
.sit-links{display:flex; flex-direction:column; gap:14px; min-width:0;}
.sit-wa{display:inline-flex; align-items:center; gap:10px; align-self:flex-start; min-height:48px; padding:0 20px;
border-radius:var(--r-chip, 999px); background:#1F8F4E; color:#fff; font-weight:700; text-decoration:none;}
.sit-wa svg{width:22px; height:22px; fill:currentColor; flex:none;}
.sit-social{display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none;}
.sit-social-link{display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
background:color-mix(in srgb, var(--primary, #1F4D3A) 10%, transparent); color:var(--primary, #1F4D3A);}
.sit-social-link svg{width:22px; height:22px; fill:currentColor;}
.sit :is(a):focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
.sit-news{min-width:0;}
/* «כרטיס»: links beside the form on a computer, stacked on a phone. */
.sit-card{grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); align-items:start;}
.sit-card:not(:has(.sit-news)), .sit-card:not(:has(.sit-links)){grid-template-columns:minmax(0, 1fr);}
/* «פס»: everything centred in one column, the form narrow. */
.sit-band{justify-items:center; text-align:center;}
.sit-band .sit-links{align-items:center;}
.sit-band .sit-wa{align-self:center;}
.sit-band .sit-social{justify-content:center;}
.sit-band .sit-news{width:100%; max-width:34rem; text-align:start;}
@media (max-width:640px){
.sit-card{grid-template-columns:minmax(0, 1fr);}
.sit-wa{align-self:stretch; justify-content:center;}
}
html[data-a11y-contrast="1"] :is(.sit-wa, .sit-social-link, .entry-popup-btn){background:#000 !important; color:#fff !important; border:2px solid #fff !important;}
/* product-fields.css */
/* A product's extra fields on the card (app/product-fields.js): the
producer line and the tag chips under the name, «₪X לק״ג» in the price
sticker, and the «סינון» chip in the category row. Its own file: a shop
whose products carry none of them never matches a rule here. */
/* «יצרן»: one quiet line under the name, centred like it, truncated. */
.card-producer{margin:-2px 8px 4px; min-width:0; font-size:0.75rem; line-height:1.3; text-align:center;
color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Tags: at most two chips in full and «+N» (owner list 26.10, items 8 and
17): they wrap onto a second line rather than cut a word, 12px in the ink
on a faint brand tint (≥ 4.5:1 on the card ground). */
.card-tags{display:flex; flex-wrap:wrap; justify-content:center; gap:4px; min-width:0; margin:0 8px 6px;}
.card-tag{flex:0 1 auto; min-width:0; max-width:100%; padding:2px 8px; border-radius:var(--r-chip, 999px);
font-size:0.75rem; font-weight:600; line-height:1.4; white-space:normal; overflow-wrap:anywhere; text-align:center;
color:var(--ink, #1F2A24); background:rgba(31,77,58,0.1); background:color-mix(in srgb, var(--primary, #1F4D3A) 10%, transparent);}
.card-tag-more{flex:none; white-space:nowrap; background:rgba(31,42,36,0.08); background:color-mix(in srgb, var(--ink, #1F2A24) 8%, transparent);}
/* «₪X לק״ג»: a small second line inside the sticker, under the price. */
.price-tag .price-perkg{display:block; font-family:var(--font-body), sans-serif; font-size:0.6875rem; font-weight:500;
line-height:1.2; opacity:0.85; white-space:nowrap;}
/* The product page keeps the producer and drops the chips (its title says enough). */
.rich-product-purchase .card-tags{display:none;}
/* The tag filter (owner list 26.10, item 18): one row with the categories —
#navScroll first, then «סינון» (and the chosen tag with ×) at its end; the
tags open in a small popover under the chip. A bento grid or the side list
puts the chip on its own line under them. */
#shop.has-tag-filter{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
#shop.has-tag-filter > #navScroll{flex:1 1 0; min-width:0; margin-inline:0;}
#shop.has-tag-filter > #navScroll:is([data-bento]){flex-basis:100%; margin-inline:auto;}
html[data-layout-categories="side"] #shop.has-tag-filter > #navScroll{flex-basis:100%;}
.tag-filter{position:relative; display:flex; flex:none; align-items:center; gap:6px; padding-inline:4px 16px; min-width:0;}
#shop.has-tag-filter > #navScroll[data-bento] ~ .tag-filter,
html[data-layout-categories="side"] #shop.has-tag-filter > .tag-filter{flex-basis:100%; max-width:var(--container); padding:4px 16px 0;}
.tag-filter-open, .tag-filter-chosen{
display:inline-flex; align-items:center; gap:6px; flex:none; min-height:40px; padding:0 14px;
border:1px solid var(--line, rgba(0,0,0,.14)); border-radius:var(--r-chip, 999px);
background:var(--surface, var(--paper, #fff)); color:var(--ink, #1F2A24);
font:inherit; font-size:0.875rem; font-weight:700; cursor:pointer; white-space:nowrap;
}
.tag-filter-open.is-on{border-color:var(--primary, #1F4D3A); color:var(--primary, #1F4D3A);}
.tag-filter-chosen{padding-inline:12px 10px; background:var(--primary, #1F4D3A); border-color:var(--primary, #1F4D3A); color:var(--on-primary, #fff);}
.tag-filter-chosen[hidden]{display:none;}
/* A phone with a tag chosen: «סינון» is its icon, the row keeps its categories. */
@media (max-width:640px){
.tag-filter-open.is-on{padding:0 11px;}
.tag-filter-open.is-on > span{display:none;}
}
.tag-filter-pop{
position:absolute; top:calc(100% + 6px); inset-inline-end:16px; z-index:60;
display:flex; flex-wrap:wrap; gap:6px; width:max-content; max-width:min(20rem, calc(100vw - 32px)); padding:10px;
border:1px solid var(--line, rgba(0,0,0,.14)); border-radius:var(--r-control, 12px); background:var(--paper, #fff);
box-shadow:0 14px 32px -12px rgba(20,24,20,.35);
}
.tag-filter-pop[hidden]{display:none;}
.tag-filter-chip{flex:none; min-height:40px; padding:0 14px; border:1px solid var(--line, rgba(0,0,0,.14));
border-radius:var(--r-chip, 999px); background:var(--surface, #fff); color:var(--ink, #1F2A24);
font:inherit; font-size:0.875rem; font-weight:600; cursor:pointer;}
.tag-filter-chip[aria-pressed="true"]{background:var(--primary, #1F4D3A); border-color:var(--primary, #1F4D3A); color:var(--on-primary, #fff);}
.tag-filter :is(button):focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
#catalog .card.tag-out, #catalog .category-section.tag-empty{display:none;}
html[data-a11y-contrast="1"] :is(.card-tag, .tag-filter-chip, .tag-filter-open, .tag-filter-chosen){background:#000 !important; color:#fff !important; border:1px solid #fff !important;}
/* category-arrows.css */
/* «חיצים» (theme.categoryArrows, app/category-arrows.js): ‹ › beside the
category row while it scrolls sideways. #shop.has-cat-arrows is set only
then, so a row that fits, a side list, a bento or the tiles grid never
draws them. They sit beside #navScroll, never over a tile or «סינון». */
.cat-arrow{display:none;}
#shop.has-cat-arrows{display:flex; align-items:center; justify-content:center; gap:4px; padding-inline:8px;}
#shop.has-cat-arrows > #navScroll{flex:1 1 0; min-width:0; margin-inline:0; padding-inline:4px; scroll-padding-inline:4px;}
#shop.has-cat-arrows.has-tag-filter > .tag-filter{padding-inline-start:4px;}
/* The deals strip's arrow (theme.css .deals-arrow): the same circle, ground,
ink, border and shadow, here in the flow instead of over the cards. */
#shop.has-cat-arrows > .cat-arrow{
display:inline-flex; align-items:center; justify-content:center; flex:none;
width:40px; height:40px; padding:0; margin-block-end:8px; cursor:pointer;
border-radius:99px;
border:1px solid rgba(31,77,58,.18);
border:1px solid color-mix(in srgb, var(--primary, #1F4D3A) 18%, transparent);
background:var(--paper); color:var(--accent-deep);
box-shadow:0 10px 22px -12px rgba(11,66,48,.7);
}
.cat-arrow svg{width:20px; height:20px;}
/* Its end reached: off and out of sight, its room kept so nothing moves. */
#shop.has-cat-arrows > .cat-arrow.is-end{visibility:hidden;}
.cat-arrow:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
@media (prefers-reduced-motion: no-preference){
html:not([data-a11y-motion="1"]):not([data-motion="off"]) .cat-arrow:active{transform:scale(0.92);}
}
/* A touch screen: a 44px target. */
@media (pointer:coarse){
#shop.has-cat-arrows > .cat-arrow{width:44px; height:44px;}
}
@media (max-width:640px){
#shop.has-cat-arrows{gap:2px; padding-inline:4px;}
#shop.has-cat-arrows > #navScroll{padding-inline:2px; scroll-padding-inline:2px;}
}
/* The chevrons point the reading way (prev toward the start). */
[dir="ltr"] .cat-arrow svg, html.translated-ltr .cat-arrow svg{transform:scaleX(-1);}
html[data-a11y-contrast="1"] #shop.has-cat-arrows > .cat-arrow{
background:#ffffff !important; color:#111111 !important;
border:2px solid #111111 !important; box-shadow:none !important;
}
/* catalog-sort.css */
/* «מיון» (theme.sortButton, app/catalog-sort.js): a chip at the end of the
category row, in the «סינון» chip family (app/product-fields.css), its
choices in a popover under it. Own file: a shop with the switch off never
matches a rule here. */
#shop.has-catalog-sort{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
#shop.has-catalog-sort > #navScroll{flex:1 1 0; min-width:0; margin-inline:0;}
#shop.has-catalog-sort > #navScroll:is([data-bento]){flex-basis:100%; margin-inline:auto;}
html[data-layout-categories="side"] #shop.has-catalog-sort > #navScroll{flex-basis:100%;}
.catalog-sort{position:relative; display:flex; flex:none; align-items:center; padding-inline:4px 16px; min-width:0;}
/* After «סינון»: the two chips read as one group, the row's end gutter moves to «מיון». */
#shop.has-catalog-sort > .tag-filter{padding-inline-end:4px;}
#shop.has-cat-arrows.has-catalog-sort:not(.has-tag-filter) > .catalog-sort{padding-inline-start:4px;}
/* A bento or the side list: the row takes its own line, «סינון» and «מיון» share the next. */
#shop.has-catalog-sort > #navScroll[data-bento] ~ .tag-filter,
html[data-layout-categories="side"] #shop.has-catalog-sort > .tag-filter{flex:1 1 auto; flex-basis:auto; max-width:none;}
#shop.has-catalog-sort > #navScroll[data-bento] ~ .catalog-sort,
html[data-layout-categories="side"] #shop.has-catalog-sort > .catalog-sort{padding-block:4px 0; padding-inline:4px 16px;}
#shop.has-catalog-sort:not(.has-tag-filter) > #navScroll[data-bento] ~ .catalog-sort,
html[data-layout-categories="side"] #shop.has-catalog-sort:not(.has-tag-filter) > .catalog-sort{flex-basis:100%; max-width:var(--container); padding:4px 16px 0;}
#shop.has-catalog-sort:not(.has-tag-filter) > #navScroll[data-bento] ~ .catalog-sort .catalog-sort-pop,
html[data-layout-categories="side"] #shop.has-catalog-sort:not(.has-tag-filter) > .catalog-sort .catalog-sort-pop{inset-inline:16px auto;}
.catalog-sort-open{
display:inline-flex; align-items:center; gap:6px; flex:none; min-height:40px; padding:0 14px;
border:1px solid var(--line, rgba(0,0,0,.14)); border-radius:var(--r-chip, 999px);
background:var(--surface, var(--paper, #fff)); color:var(--ink, #1F2A24);
font:inherit; font-size:0.875rem; font-weight:700; cursor:pointer; white-space:nowrap;
}
.catalog-sort-open.is-on{border-color:var(--primary, #1F4D3A); color:var(--primary, #1F4D3A);}
/* A phone: «מיון» is its icon (its name stays the button's label), the row keeps its categories. */
@media (max-width:640px){
.catalog-sort-open{padding:0 11px;}
.catalog-sort-open > span{display:none;}
}
@media (pointer:coarse){
.catalog-sort-open{min-height:44px; min-width:44px; justify-content:center;}
.catalog-sort-choice{min-height:44px;}
#shop.has-catalog-sort > .tag-filter .tag-filter-open{min-height:44px;} /* the pair stands the same height */
}
/* A phone with both chips: «סינון» is its icon too (its aria-label names it), so the categories keep their room. */
@media (max-width:640px){
#shop.has-catalog-sort > .tag-filter .tag-filter-open{padding:0 11px;}
#shop.has-catalog-sort > .tag-filter .tag-filter-open > span{display:none;}
}
.catalog-sort-pop{
position:absolute; top:calc(100% + 6px); inset-inline-end:16px; z-index:60;
display:flex; flex-direction:column; gap:2px; width:max-content; max-width:min(18rem, calc(100vw - 32px)); padding:6px;
border:1px solid var(--line, rgba(0,0,0,.14)); border-radius:var(--r-control, 12px); background:var(--paper, #fff);
box-shadow:0 14px 32px -12px rgba(20,24,20,.35);
}
.catalog-sort-pop[hidden]{display:none;}
.catalog-sort-choice{display:block; width:100%; min-height:40px; padding:0 14px; border:0; border-radius:var(--r-chip, 999px);
background:transparent; color:var(--ink, #1F2A24); font:inherit; font-size:0.875rem; font-weight:600; text-align:start; cursor:pointer; white-space:nowrap;}
.catalog-sort-choice:hover{background:rgba(31,77,58,0.08); background:color-mix(in srgb, var(--primary, #1F4D3A) 8%, transparent);}
.catalog-sort-choice[aria-pressed="true"]{background:var(--primary, #1F4D3A); color:var(--on-primary, #fff);}
.catalog-sort :is(button):focus-visible, .boutique-sort select:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
/* The boutique toolbar's select (app/boutique.css .boutique-filter-panel): a 44px target on touch. */
@media (pointer:coarse){ .boutique-sort select{min-height:44px;} }
html[data-a11y-contrast="1"] :is(.catalog-sort-open, .catalog-sort-choice){background:#000 !important; color:#fff !important; border:1px solid #fff !important;}
/* part-backgrounds.css */
/* A page area's own background («רקע» panel, theme.storeDesign.parts...background;
app/store-design.js marks the area, docs/THEME.md «Backgrounds per part»).
The WIM bank recipes are store-backgrounds.css's [data-part-background]
rules; the guided recipes are drawn here from the variables store-design.js
sets on the area (--part-bg, --part-pattern, --part-pattern-alt). The
hero's own photo, wash and video stay under .part-bg-layer. Text reads
--part-ink (by WCAG ratio). No fixed attachment; high contrast keeps the
plain page. */
:is([data-part-background="white"],[data-part-background="cream"],[data-part-background="grey"],[data-part-background="soft"],[data-part-background="stone"],
[data-part-background="fade"],[data-part-background="vignette"],[data-part-background="duo"],[data-part-background="dots"],[data-part-background="lines"],
[data-part-background="grid"],[data-part-background="linen"],[data-part-background="hatch"],[data-part-background="herring"],[data-part-background="arches"],
[data-part-background="topo"],[data-part-background="terrazzo"],[data-part-background="marble"],[data-part-background="kraft"],[data-part-background="deep"],
[data-part-background="black"],[data-part-background="ink"],[data-part-background="espresso"],[data-part-background="darkhatch"],
[data-part-background="darkherring"],[data-part-background="darkfade"]){background-color:var(--ui-page-bg, var(--part-bg));background-image:none;background-size:auto;background-position:0 0;background-repeat:repeat}
[data-part-background="fade"]{background-image:linear-gradient(var(--part-pattern),#ffffff00 85%)}
[data-part-background="vignette"]{background-image:radial-gradient(140% 90% at 50% 40%,#ffffff00 55%,var(--part-pattern))}
[data-part-background="duo"]{background-image:linear-gradient(var(--part-pattern) 0 150px,#ffffff00 150px)}
:is([data-part-background="dots"],[data-part-background="kraft"]){background-image:radial-gradient(circle at 1px 1px,var(--part-pattern) 1px,transparent 1.2px);background-size:12px 12px}
[data-part-background="lines"]{background-image:repeating-linear-gradient(45deg,var(--part-pattern) 0 1px,transparent 1px 11px)}
[data-part-background="grid"]{background-image:linear-gradient(var(--part-pattern) 1px,transparent 1px),linear-gradient(90deg,var(--part-pattern) 1px,transparent 1px);background-size:22px 22px}
[data-part-background="linen"]{background-image:repeating-linear-gradient(0deg,var(--part-pattern) 0 1px,transparent 1px 5px),repeating-linear-gradient(90deg,var(--part-pattern) 0 1px,transparent 1px 5px)}
:is([data-part-background="hatch"],[data-part-background="darkhatch"]){background-image:repeating-linear-gradient(45deg,var(--part-pattern) 0 1px,transparent 1px 8px),repeating-linear-gradient(-45deg,var(--part-pattern) 0 1px,transparent 1px 8px)}
:is([data-part-background="herring"],[data-part-background="darkherring"]){background-image:repeating-linear-gradient(45deg,var(--part-pattern) 0 1px,transparent 1px 10px),repeating-linear-gradient(-45deg,var(--part-pattern) 0 1px,transparent 1px 10px);background-size:20px 20px;background-position:0 0,10px 10px}
[data-part-background="arches"]{background-image:radial-gradient(circle at 50% 100%,transparent 15px,var(--part-pattern) 15px 16px,transparent 16px);background-size:34px 34px}
[data-part-background="topo"]{background-image:radial-gradient(circle at 20% 30%,transparent 28px,var(--part-pattern) 28px 29px,transparent 29px),radial-gradient(circle at 70% 75%,transparent 34px,var(--part-pattern) 34px 35px,transparent 35px);background-size:90px 90px,110px 110px}
[data-part-background="terrazzo"]{background-image:radial-gradient(circle at 12% 22%,var(--part-pattern) 2.5px,transparent 3px),radial-gradient(circle at 68% 58%,var(--part-pattern-alt) 1.8px,transparent 2.2px),radial-gradient(circle at 40% 85%,var(--part-pattern) 1.4px,transparent 1.8px);background-size:64px 64px,48px 48px,72px 72px}
[data-part-background="marble"]{background-image:linear-gradient(115deg,#ffffff00 45%,var(--part-pattern) 50%,#ffffff00 55%),linear-gradient(70deg,#ffffff00 62%,var(--part-pattern) 66%,#ffffff00 70%)}
[data-part-background="darkfade"]{background-image:linear-gradient(var(--part-pattern),#00000000 55%)}
/* A photo covers the area's box once, under a wash of its own colour. */
:is([data-part-ground="photo"][data-part-background],[data-part-ground="photo"]>.part-bg-layer){background-size:cover;background-repeat:no-repeat;background-position:center;box-shadow:inset 0 0 0 200vmax var(--part-wash)}
/* The hero: one layer over its photo, wash and video, under its text. */
.part-bg-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
html[data-a11y-contrast="1"] .part-bg-layer{display:none}
/* The area's own words in its ink; cards and panels keep their own. */
#home[data-part-ground] :is(#heroTitle,#heroDesc,.hero-name,.hero-info,.hero-info *){color:var(--part-ink);text-shadow:none}
#catalog[data-part-ground] .category-head h2{color:var(--part-ink)}
#catalog[data-part-ground] .category-count{color:var(--part-ink);background:transparent;border-color:currentColor}
#siteFooter[data-part-ground] :is(p,a,span,h2,h3,.footer-name,small){color:var(--part-ink)}
html[data-a11y-contrast="1"] [data-part-background]{background-image:none !important;box-shadow:none !important}
/* layouts-voice.css */
/* 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:var(--product-fit-chosen, 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:var(--product-fit-chosen, 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:var(--product-fit-chosen, 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; --ed-gap:18px; --ed-edge:22px;}
html[data-layout-rhythm="dense"] .editorial-block:not(.editorial-marquee){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; --ed-gap:40px; --ed-edge:56px;}
html[data-layout-rhythm="airy"] .editorial-block:not(.editorial-marquee){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; --ed-pad:0px;}
/* 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:not(.editorial-marquee){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;
}
/* A dark page: the brand is a fill there, the wordmark takes its light partner. */
html[data-layout-header="typographic"]: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"]) #home :is(.hero-name,.hero-name.is-hidden){color:var(--ui-heading, var(--gold-light, #F3F5F3));}
html[data-layout-header="typographic"]: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"]) #home #heroTitle{color:#F3F5F3;}
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;}
}
/* The language picker sits in the head's top corner on a phone (top 14px,
44px): the wordmark starts below it instead of under it (SH2-07). */
@media (max-width:640px){
html[data-layout-header="typographic"] #home{padding-top:66px;}
}
/* «צורת הקטגוריה» (theme.categoryShape, builder/part-design.js): a category tile's outline, one value for both devices.
Only the outline changes; no key: no rule. The side list has no tile to shape. */
html[data-category-shape="sharp"]:not([data-layout-categories="side"]) #shop .nav-pill{border-radius:0;}
html[data-category-shape="sharp"]:not([data-layout-categories="side"]) #shop .nav-pill :is(.cat-card-photo,.cat-card-body){border-radius:0;}
html[data-category-shape="soft"]:not([data-layout-categories="side"]) #shop .nav-pill{border-radius:20px;}
html[data-category-shape="pill"]:not([data-layout-categories="side"]) #shop .nav-pill{border-radius:999px; overflow:hidden;}
html[data-category-shape="arch"]:not([data-layout-categories="side"]) #shop .nav-pill{border-radius:50% 50% var(--radius, 16px) var(--radius, 16px) / 34% 34% var(--radius, 16px) var(--radius, 16px); overflow:hidden;}
html[data-category-shape="round"]:not([data-layout-categories="side"]) #shop .nav-pill{aspect-ratio:1; border-radius:50%; overflow:hidden;}
html[data-category-shape="frameless"]:not([data-layout-categories="side"]) #shop .nav-pill{background:transparent !important; border-color:transparent !important; box-shadow:none;}
html[data-category-shape="frameless"]:not([data-layout-categories="side"]) #shop .nav-pill .cat-card-body{background:transparent !important;}
/* layout-slots.css */
/* The page slots (app/layouts.js, docs/LAYOUTS.md «Page»): the sections'
frame, the footer's family, the page's width and the catalogue grid.
html[data-layout-frame] open | band | rule | editorial (boxed: none)
html[data-layout-footer] minimal | newsletter | wordmark (compact: none;
full: theme.css)
html[data-layout-width] narrow | wide | full (regular: none)
html[data-layout-grid] featured | staggered | dense (equal: none)
Every rule needs one of those attributes, which app/layouts.js writes
only for a value other than today's, so a shop that never chose one draws
what it drew before. A frame changes the defaults a section falls back on
(--block-default-*), never a section's own design: a colour, a frame,
corners or padding the owner set on a section still win (theme.css
«Per-section values»). The footer families move the zones, never their
colours, so the footer's own colours (brand, light, the owner's) and
their contrast stay as they are. No sticky; logical properties only. */
/* ======================= frame ======================= */
/* The ground under a frame with no box: the page itself. Where the words
would not read on the page (app/layouts.js measures the shop's ink on the
page's colour and writes data-layout-frame-keep) or the page is a photo
(data-bg-scope), the section keeps the surface it draws today: only the
box's outline and the layout change. */
html[data-layout-frame]{--fr-ground:transparent; --fr-band:color-mix(in srgb, var(--primary) 7%, var(--paper, #FBF7EF));
--fr-band-alt:var(--paper, #FBF7EF); --fr-rule:var(--ink, #1F2A24); --fr-rule-page:var(--ink, #1F2A24); --fr-band-page:var(--fr-band);}
/* The category rule sits on the page itself: light on a dark ground (the
category titles there are #F3F5F3 too, theme.css), and so is its band. */
html[data-layout-frame]: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"]){--fr-rule-page:#F3F5F3; --fr-band-page:rgba(255, 255, 255, 0.07);}
/* ---- open: no box, the section on the page's ground ---- */
html[data-layout-frame="open"] .editorial-block:not([data-fx-ground]){--block-default-border:0 solid transparent;}
html[data-layout-frame="open"]:not([data-layout-frame-keep], [data-bg-scope]) .editorial-block:not([data-fx-ground]){--block-default-background:var(--fr-ground);}
html[data-layout-frame="open"] .editorial-block{border-radius:var(--block-radius-desktop, 0);}
html[data-layout-frame="open"] .editorial-block:not(.editorial-marquee, .editorial-trust-band){padding-block:var(--block-padding-desktop, clamp(16px, 3vw, 32px));}
html[data-layout-frame="open"] #catalog .category-section{padding-inline:0;}
/* ---- band: every section a band across the whole width, alternating ---- */
/* The colour reaches the screen's edges as a shadow of the section's own
ground (ink overflow: it never widens the page); the content keeps the
page's width. An owner's own section colour is the band's colour. */
html[data-layout-frame="band"] .editorial{gap:0; margin-block:0;}
html[data-layout-frame="band"] .editorial-block:not([data-fx-ground]){--block-default-background:var(--fr-band); --block-default-border:0 solid transparent;}
html[data-layout-frame="band"] .editorial-block:not([data-fx-ground]):nth-child(even of .editorial-block){--block-default-background:var(--fr-band-alt);}
html[data-layout-frame="band"] .editorial-block:not(.editorial-marquee, .editorial-trust-band, .fc-bleed){
--fr-fill:var(--block-background-desktop, var(--block-default-background, var(--card-bg, #fff)));
border-radius:var(--block-radius-desktop, 0); padding-block:var(--block-padding-desktop, clamp(36px, 6vw, 72px));
box-shadow:0 0 0 100vmax var(--fr-fill); clip-path:inset(0 -100vmax);
}
html[data-layout-frame="band"] .editorial-block[data-content-placed]:not(.editorial-marquee, .editorial-trust-band){margin-block:0;}
/* The catalogue's categories: a band each, every other one tinted. */
html[data-layout-frame="band"] #catalog .category-section{position:relative; border-radius:0; margin-bottom:0; padding-block:clamp(32px, 5vw, 56px);}
html[data-layout-frame="band"] #catalog .category-section:nth-child(odd of .category-section)::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:var(--fr-band-page); box-shadow:0 0 0 100vmax var(--fr-band-page); clip-path:inset(0 -100vmax);
}
html[data-layout-frame="band"] #catalog .category-head{justify-content:center; margin-bottom:clamp(20px, 3vw, 32px);}
/* ---- rule: a heavy rule over a title row, the items in ruled columns ---- */
html[data-layout-frame="rule"] .editorial-block:not([data-fx-ground]){--block-default-border:0 solid transparent;}
html[data-layout-frame="rule"]:not([data-layout-frame-keep], [data-bg-scope]) .editorial-block:not([data-fx-ground]){--block-default-background:var(--fr-ground);}
html[data-layout-frame="rule"] .editorial-block:not(.editorial-marquee, .editorial-trust-band, .editorial-free, .editorial-code){
--block-default-align:start; --fx-orn-start:0;
border-radius:var(--block-radius-desktop, 0);
padding:var(--block-padding-desktop, 22px 0 clamp(20px, 3vw, 36px));
box-shadow:inset 0 3px 0 var(--fr-rule);
}
html[data-layout-frame="rule"] .editorial-block .editorial-copy{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:18px;}
html[data-layout-frame="rule"] .editorial-block .editorial-copy > *{flex:1 1 100%;}
html[data-layout-frame="rule"] .editorial-block .editorial-copy > .editorial-eyebrow{order:2; flex:0 1 auto; margin:0;}
html[data-layout-frame="rule"] .editorial-block .editorial-copy > h2{order:1; flex:1 1 0; min-width:min(100%, 12rem); margin:0;}
html[data-layout-frame="rule"] .editorial-block .editorial-copy > :not(h2, .editorial-eyebrow){order:3; margin-top:10px;}
html[data-layout-frame="rule"] :is(.editorial-why-list:not([data-look="cards"]), .editorial-steps-list:not([data-look="cards"], [data-look="timeline"])) > li{align-items:flex-start; text-align:start;}
html[data-layout-frame="rule"] .editorial-why-list:not([data-look="cards"]) > li + li,
html[data-layout-frame="rule"] .editorial-steps-list:not([data-look="cards"], [data-look="timeline"]) > li + li{
align-items:flex-start; text-align:start; padding:4px 0 4px; padding-inline-start:18px; border-inline-start:1px solid var(--line);
}
html[data-layout-frame="rule"] #catalog .category-section{border-radius:0; padding-inline:0; padding-top:22px; box-shadow:inset 0 3px 0 var(--fr-rule-page);}
html[data-layout-frame="rule"] #catalog .category-head{padding-bottom:14px; border-bottom:1px solid var(--line);}
/* ---- editorial: a large title at the start, the content beside it ---- */
html[data-layout-frame="editorial"] .editorial-block:not([data-fx-ground]){--block-default-border:0 solid transparent;}
html[data-layout-frame="editorial"]:not([data-layout-frame-keep], [data-bg-scope]) .editorial-block:not([data-fx-ground]){--block-default-background:var(--fr-ground);}
html[data-layout-frame="editorial"] .editorial-block:not(.editorial-marquee, .editorial-trust-band, .editorial-free, .editorial-code){
--block-default-align:start; --fx-orn-start:0;
border-radius:var(--block-radius-desktop, 0); padding-inline:var(--block-padding-desktop, 0);
}
html[data-layout-frame="editorial"] .editorial-block .editorial-copy > h2{
font-size:calc(clamp(2rem, 4.6vw, 3.5rem) * var(--block-title-scale-desktop, 1)); font-weight:800; line-height:1.05; text-wrap:balance; margin-bottom:12px;
}
html[data-layout-frame="editorial"] #catalog .category-section{padding-inline:0;}
html[data-layout-frame="editorial"] #catalog .category-head{gap:16px; align-items:flex-end; padding-bottom:16px; border-bottom:1px solid var(--line);}
html[data-layout-frame="editorial"] #catalog .category-head h2{font-size:calc(clamp(1.875rem, 4vw, 3rem) * var(--part-title-scale, 1)); line-height:1.05;}
@media (min-width:900px){
html[data-layout-frame="editorial"] .editorial-block:is(.editorial-why, .editorial-steps, .editorial-faq, .editorial-featured, .editorial-testimonials, .editorial-collection):not([data-sd-shape]){
display:grid; grid-template-columns:minmax(0, 0.85fr) minmax(0, 2fr); column-gap:clamp(28px, 4vw, 64px); align-items:start;
}
html[data-layout-frame="editorial"] .editorial-block:is(.editorial-why, .editorial-steps, .editorial-faq, .editorial-featured, .editorial-testimonials, .editorial-collection):not([data-sd-shape]) > *{grid-column:2; min-width:0;}
html[data-layout-frame="editorial"] .editorial-block:is(.editorial-why, .editorial-steps, .editorial-faq, .editorial-featured, .editorial-testimonials, .editorial-collection):not([data-sd-shape]) > .editorial-copy{grid-column:1; grid-row:1 / span 12;}
html[data-layout-frame="editorial"] .editorial-block:is(.editorial-why, .editorial-steps):not([data-sd-shape]) :is(.editorial-why-list, .editorial-steps-list){margin-top:0;}
html[data-layout-frame="editorial"] .editorial-why-list:not([data-look="cards"]) > li{align-items:flex-start; text-align:start;}
}
@media (max-width:640px){
html[data-layout-frame] .editorial-block{border-radius:var(--block-radius-phone, 0);}
html[data-layout-frame="open"] .editorial-block:not(.editorial-marquee, .editorial-trust-band){padding-block:var(--block-padding-phone, 16px);}
html[data-layout-frame="band"] .editorial-block:not(.editorial-marquee, .editorial-trust-band, .fc-bleed){
--fr-fill:var(--block-background-phone, var(--block-default-background, var(--card-bg, #fff)));
padding-block:var(--block-padding-phone, 32px);
}
html[data-layout-frame="rule"] .editorial-block:not(.editorial-marquee, .editorial-trust-band, .editorial-free, .editorial-code){padding:var(--block-padding-phone, 18px 0 22px);}
html[data-layout-frame="editorial"] .editorial-block:not(.editorial-marquee, .editorial-trust-band, .editorial-free, .editorial-code){padding-inline:var(--block-padding-phone, 0);}
html[data-layout-frame="editorial"] .editorial-block .editorial-copy > h2{font-size:calc(clamp(1.875rem, 8.5vw, 2.5rem) * var(--block-title-scale-phone, 1));}
html[data-layout-frame="band"] #catalog .category-section{padding-block:28px 32px;}
}
/* ======================= footer families ======================= */
/* minimal: everything on one line — the name, the networks, the contact
links, the policies and the copyright — wrapping on a phone. */
html[data-layout-footer="minimal"] #siteFooter{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px;
padding-block:22px 92px; padding-inline:max(20px, calc((100% - var(--container, 1120px)) / 2 + 20px));}
html[data-layout-footer="minimal"] #siteFooter .footer-zones{display:contents;}
html[data-layout-footer="minimal"] #siteFooter .footer-zone{flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px 16px; text-align:start;}
html[data-layout-footer="minimal"] #siteFooter .footer-logo{width:32px; height:32px;}
html[data-layout-footer="minimal"] #siteFooter .social-chip{width:44px; height:44px;}
html[data-layout-footer="minimal"] #siteFooter :is(.footer-zone-pickup, .footer-zone-news){flex:1 1 100%; order:2;}
html[data-layout-footer="minimal"] #siteFooter :is(.footer-legal, .footer-pages){margin:0; justify-content:flex-start; padding:0;}
html[data-layout-footer="minimal"] #siteFooter .copy{margin:0; padding:0; border:0; text-align:start;}
html[data-layout-footer="minimal"] #siteFooter :is(.footer-info, .footer-contact-link, .footer-legal a, .copy){line-height:1.6;}
/* newsletter: the sign-up leads, a wide band of its own at the top (the
contact links when the shop has no sign-up), the zones under it. It is
first in the document too (app/layouts.js footerLead), not only drawn first. */
html[data-layout-footer="newsletter"] .footer-zones{row-gap:28px;}
html[data-layout-footer="newsletter"] .footer-zone-news{grid-column:1 / -1; justify-self:stretch; max-width:none;
display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); column-gap:clamp(24px, 5vw, 64px); align-items:center;
padding:0 0 28px; border-top:0; border-bottom:1px solid color-mix(in srgb, currentColor 25%, transparent);}
html[data-layout-footer="newsletter"] .footer-zone-news > *{grid-column:2;}
html[data-layout-footer="newsletter"] #siteFooter .footer-zone-news > .footer-news-title{grid-column:1; grid-row:1 / span 4; margin:0; text-align:start;
font-family:var(--font-heading, var(--font-display)), var(--font-body), sans-serif; font-size:clamp(1.5rem, 3vw, 2.25rem); line-height:1.15;}
html[data-layout-footer="newsletter"] .footer-zone-news .footer-news-done{text-align:start;}
html[data-layout-footer="newsletter"] .footer-zones:not(:has(.footer-zone-news)) .footer-zone-contact{
grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 28px; text-align:center;
padding-bottom:28px; border-bottom:1px solid color-mix(in srgb, currentColor 25%, transparent);
}
html[data-layout-footer="newsletter"] #siteFooter .footer-zones:not(:has(.footer-zone-news)) .footer-zone-contact > :is(.footer-contact-link, .footer-info){font-size:1.125rem;}
@media (max-width:768px){
html[data-layout-footer="newsletter"] .footer-zone-news{grid-template-columns:minmax(0, 1fr); row-gap:12px;}
html[data-layout-footer="newsletter"] .footer-zone-news > *{grid-column:1;}
html[data-layout-footer="newsletter"] #siteFooter .footer-zone-news > .footer-news-title{grid-row:auto; text-align:center;}
html[data-layout-footer="minimal"] #siteFooter{justify-content:center; text-align:center;}
html[data-layout-footer="minimal"] #siteFooter .footer-zone{justify-content:center;}
html[data-layout-footer="minimal"] #siteFooter .copy{text-align:center; flex:1 1 100%;}
}
/* wordmark: the zones in one row, the shop's name across the whole width
under them; a long name wraps, never runs off the page. */
html[data-layout-footer="wordmark"] .footer-zones{align-items:start;}
html[data-layout-footer="wordmark"] .footer-zone-brand{order:9; grid-column:1 / -1; justify-self:stretch; align-items:stretch; container-type:inline-size;
padding-top:28px; margin-top:8px; border-top:1px solid color-mix(in srgb, currentColor 25%, transparent);}
html[data-layout-footer="wordmark"] .footer-zone-brand .footer-logo{width:72px; height:72px;}
html[data-layout-footer="wordmark"] #siteFooter .footer-zone-brand .footer-name:not([hidden]){display:block; width:100%; text-align:center;
font-size:clamp(2.5rem, 15cqi, 11rem); line-height:0.95; letter-spacing:-0.02em; text-wrap:balance; overflow-wrap:anywhere;}
html[data-layout-footer="wordmark"] .footer-zone-brand:has(.footer-name:not([hidden])) .footer-logo{display:none;}
html[data-layout-footer="wordmark"] .footer-zone-social{grid-column:1 / span 2; justify-self:start; align-items:flex-start;}
@media (max-width:768px){
html[data-layout-footer="wordmark"] .footer-zone-social{grid-column:auto; justify-self:center; align-items:center;}
html[data-layout-footer="wordmark"] .footer-zone-contact{align-items:center;}
html[data-layout-footer="wordmark"] #siteFooter .footer-zone-brand .footer-name:not([hidden]){font-size:clamp(2.25rem, 17cqi, 6rem);}
}
/* ======================= width ======================= */
/* The page's width (the rhythm sets its own for «רגיל»). The sections
follow; a section's own width still wins. On a phone the side margin
moves with it, so one choice reads on both. */
html[data-layout-width="narrow"] body{--container:920px;}
html[data-layout-width="wide"] body{--container:1400px;}
html[data-layout-width="full"] body{--container:100%;}
/* The catalogue's 1320px floor on a big screen (storefront-cards.css) is the
regular page's: a narrow page is narrow there too. */
html[data-layout-width="narrow"] :is(main, .prod-search:not(.is-floating)){max-width:var(--container);}
html[data-layout-width="narrow"] .editorial{--block-default-width:880px;}
html[data-layout-width="wide"] .editorial{--block-default-width:1360px;}
html[data-layout-width="full"] .editorial{--block-default-width:none;}
html[data-layout-width="full"] .editorial{padding-inline:20px;}
@media (min-width:1100px){
html[data-layout-width="full"] :is(main, .wrap, .prod-search){padding-inline:clamp(20px, 3vw, 48px);}
html[data-layout-width="full"] .editorial{padding-inline:clamp(20px, 3vw, 48px);}
}
@media (max-width:640px){
html[data-layout-width="narrow"] :is(main, .wrap, .prod-search){padding-inline:28px;}
html[data-layout-width="narrow"] .editorial{padding-inline:22px;}
html[data-layout-width="full"] :is(main, .wrap, .prod-search){padding-inline:10px;}
html[data-layout-width="full"] .editorial{padding-inline:6px;}
}
/* ======================= grid ======================= */
/* Only the grid and the gallery take these (rows and mosaic are forms of
their own: app/layouts.js resolves them to equal there). A per-product
size (item.card) keeps its own span; a carousel row is untouched. */
/* featured: each category's first product in stock is a big cell (two by two on a
computer, the whole row on a phone). One per row: nothing to feature. */
html[data-layout-grid="featured"] #catalog .product-grid:not(.product-carousel){grid-auto-flow:row dense;}
@media (min-width:641px){
html[data-layout-grid="featured"]:not([data-products-per-row="1"]) #catalog .product-grid:not(.product-carousel) > .card:nth-child(1 of .card:not(.is-oos)):not([data-card-span]){
grid-column:span 2; grid-row:span 2; max-width:none;
}
html[data-layout-grid="featured"]:is([data-cd-form="side"], [data-cd-form="menu"]) #catalog .product-grid:not(.product-carousel) > .card:nth-child(1 of .card:not(.is-oos)):not([data-card-span]){grid-row:auto;}
}
@media (max-width:640px){
html[data-layout-grid="featured"]:not([data-products-per-row-phone="1"]) #catalog .product-grid:not(.product-carousel) > .card:nth-child(1 of .card:not(.is-oos)):not([data-card-span]){grid-column:span 2; max-width:none;}
}
html[data-layout-grid="featured"] #catalog .product-grid:not(.product-carousel) > .card:nth-child(1 of .card:not(.is-oos)):not([data-card-span]) > .card-img{height:auto; min-height:0; flex:1 1 auto; aspect-ratio:auto;}
html[data-layout-grid="featured"] #catalog .product-grid:not(.product-carousel) > .card:nth-child(1 of .card:not(.is-oos)):not([data-card-span]) > .card-img > img{position:absolute; inset:0; width:100%; height:100%; box-sizing:border-box;}
html[data-layout-grid="featured"] #catalog .product-grid:not(.product-carousel) > .card:nth-child(1 of .card:not(.is-oos)):not([data-card-span]) > .card-name{font-size:calc(1.25rem * var(--cd-k, 1));}
@media (max-width:640px){
html[data-layout-grid="featured"] #catalog .product-grid:not(.product-carousel) > .card:nth-child(1 of .card:not(.is-oos)):not([data-card-span]) > .card-img{flex:none; aspect-ratio:16 / 10;}
}
/* staggered: every other column set lower (app/layouts.js marks the cards
of the even columns, in reading order, whatever the count per row); the
offset is a share of the column's width, so it reads alike on both. */
html[data-layout-grid="staggered"] #catalog .product-grid:not(.product-carousel){align-items:start;}
html[data-layout-grid="staggered"] #catalog .product-grid:not(.product-carousel) > .card[data-grid-lower]{margin-top:28%;}
/* dense: no gaps, the cells joined by hairlines, square corners — a sheet
of products. A card design keeps its inside; only its outline goes. */
html[data-layout-grid="dense"] #catalog .product-grid:not(.product-carousel){gap:0 !important;}
html[data-layout-grid="dense"] #catalog .product-grid:not(.product-carousel) > .card{
--cd-r:0; --cd-sh:0 0 0 0.5px var(--line); --cd-bd:0 solid transparent;
border-radius:0; border-color:transparent; box-shadow:0 0 0 0.5px var(--line);
}
html[data-layout-grid="dense"] #catalog .product-grid:not(.product-carousel) > .card:is(:hover, .in-cart){transform:none; box-shadow:0 0 0 0.5px var(--line), inset 0 0 0 2px var(--primary);}
html[data-layout-grid="dense"] #catalog .product-grid:not(.product-carousel) > .card[data-card-design-own]{border-radius:0;}
/* home.css */
/* The home page (owner list 2026-10-27, item E; docs/LAYOUTS.md «Bento
tiles» and «The phone home»). app/home-tiles.js draws the bento,
app/home-chrome.js the phone hero and footer. No sticky; logical sides
except the share button's fixed corner (the language picker owns the
other one). */
/* ======================= bento category tiles ======================= */
/* #navScroll[data-bento]: tiles | cards | chips (chips only once the owner
set a big tile or info tiles). Two across a phone, the big tile the full
width; four across a computer, the big tile 2 × 2. */
#navScroll[data-bento]{
--cat-gap:12px; --cat-pad:16px;
display:grid; grid-auto-flow:row dense; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-columns:auto;
overflow:visible; scroll-snap-type:none; gap:var(--cat-gap);
max-width:var(--container); padding:4px var(--cat-pad) 8px;
}
@media (min-width:768px){
#navScroll[data-bento]{--cat-gap:16px; --cat-pad:24px; grid-template-columns:repeat(4, minmax(0, 1fr));}
}
#navScroll[data-bento] > *{min-width:0; aspect-ratio:4 / 3;}
#navScroll[data-bento] > .nav-pill.is-big{order:-1; grid-column:span 2; aspect-ratio:16 / 9;}
@media (min-width:768px){
#navScroll[data-bento] > .nav-pill.is-big{grid-row:span 2; aspect-ratio:auto;}
#navScroll[data-bento][data-short] > .nav-pill.is-big{grid-row:auto; aspect-ratio:auto;}
}
/* «לכל המוצרים» closes the last row (data-span-*, app/home-tiles.js): no
hole at any width. Wider than one column it takes the row's height. */
#navScroll[data-bento] > .home-tile-all[data-span-phone="2"]{grid-column:span 2; aspect-ratio:auto; min-height:4.5rem;}
@media (min-width:768px){
#navScroll[data-bento] > .home-tile-all[data-span-wide]{grid-column:auto; aspect-ratio:4 / 3; min-height:0;}
#navScroll[data-bento] > .home-tile-all:is([data-span-wide="2"], [data-span-wide="3"], [data-span-wide="4"]){aspect-ratio:auto; min-height:5rem;}
#navScroll[data-bento] > .home-tile-all[data-span-wide="2"]{grid-column:span 2;}
#navScroll[data-bento] > .home-tile-all[data-span-wide="3"]{grid-column:span 3;}
#navScroll[data-bento] > .home-tile-all[data-span-wide="4"]{grid-column:span 4;}
}
/* chips and tiles: the photo fills the tile, the name on a label over it
(the tiles row's look; owner colours: the card surface and the name). */
#navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill{overflow:hidden; border-radius:var(--r-panel);}
#navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill .cat-card-photo{position:absolute; inset:0; height:auto; flex:none; border-radius:inherit; aspect-ratio:auto;}
#navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill .cat-card-photo img{border-radius:inherit;}
#navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill .cat-card-emoji{font-size:2.5rem;}
#navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill .cat-card-body{
position:absolute; inset-inline-start:0.5rem; inset-block-end:0.5rem; max-width:calc(100% - 1rem); min-height:0;
padding:0.375rem 0.75rem; border-radius:var(--r-chip); background:var(--ui-cat-card-bg, var(--paper)) !important;
box-shadow:0 4px 12px -6px rgba(0,0,0,0.45);
}
#navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill .cat-card-name{font-size:0.9375rem; text-align:start; -webkit-line-clamp:1;}
#navScroll[data-bento] > .nav-pill .cat-card-arrow{display:none;}
#navScroll[data-bento] > .nav-pill.is-big .cat-card-name{font-size:1.125rem;}
@media (min-width:768px){
#navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill .cat-card-name{font-size:1.0625rem;}
#navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill .cat-card-body{inset-inline-start:0.75rem; inset-block-end:0.75rem; padding:0.5rem 1rem;}
#navScroll[data-bento] > .nav-pill.is-big .cat-card-name{font-size:1.5rem;}
#navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill.is-big .cat-card-body{inset-inline-start:1rem; inset-block-end:1rem; padding:0.625rem 1.25rem;}
}
/* cards: the photo over the brand band (app/layouts-voice.css), the band a
fixed share of the tile so the big one keeps the same proportion. */
#navScroll[data-bento="cards"] > .nav-pill .cat-card-photo{height:auto; flex:1 1 auto; min-height:0;}
#navScroll[data-bento="cards"] > .nav-pill .cat-card-body{flex:0 0 auto; padding:8px 12px;}
#navScroll[data-bento="cards"] > .nav-pill .cat-card-name{font-size:1rem; -webkit-line-clamp:1;}
/* Boutique draws its row as round chips; a bento takes them back to tiles. */
html[data-catalog-style="boutique"] #navScroll[data-bento] > .nav-pill .cat-card-photo{border-radius:inherit; aspect-ratio:auto;}
html[data-catalog-style="boutique"] #navScroll[data-bento="chips"] > .nav-pill{background:var(--ui-cat-card-bg, var(--paper)) !important;}
/* The extra tiles: info (the owner's words, a link) and «לכל המוצרים». */
.home-tile{
position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:4px;
padding:14px 16px; border-radius:var(--r-panel); overflow:hidden; text-decoration:none;
background:var(--ui-cat-card-bg, var(--paper)); color:var(--ui-cat-name-color, var(--ink));
border:2px solid var(--line); box-shadow:0 4px 14px -6px rgba(31,77,58,0.18);
}
a.home-tile:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
.home-tile-title{font-weight:800; font-size:1rem; line-height:1.3; overflow-wrap:anywhere;}
.home-tile-text{font-size:0.875rem; line-height:1.45; color:var(--ink-soft); overflow-wrap:anywhere;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;}
/* Without a photo: the brand's tint, an icon and the words centred (owner
list 26.10, item 10 — an empty white box before). */
.home-tile-info:not(.has-photo){
align-items:center; justify-content:center; text-align:center; gap:8px;
background:var(--ui-cat-card-bg, #EEF3EC); background:var(--ui-cat-card-bg, color-mix(in srgb, var(--primary) 12%, var(--paper)));
border-color:transparent;
}
.home-tile-info:not(.has-photo) .home-tile-body{align-items:center;}
.home-tile-icon{display:none;}
.home-tile-info:not(.has-photo) .home-tile-icon{
display:inline-flex; width:2.75rem; height:2.75rem; flex:none; align-items:center; justify-content:center;
border-radius:50%; background:var(--primary); color:var(--home-on-primary, #fff);
}
.home-tile-icon svg{width:1.375rem; height:1.375rem;}
.home-tile-info.has-photo{padding:0;}
.home-tile-info .home-tile-photo{flex:1 1 auto; min-height:0; background:var(--paper-dim);}
.home-tile-info .home-tile-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.home-tile-info.has-photo .home-tile-body{padding:10px 14px 12px;}
.home-tile-info.has-photo .home-tile-text{-webkit-line-clamp:1;}
.home-tile-body{display:flex; flex-direction:column; gap:4px; min-width:0;}
.home-tile-all{
background:var(--primary); color:var(--home-on-primary, #fff); border-color:var(--primary);
flex-direction:row; align-items:center; justify-content:space-between;
}
.home-tile-all .home-tile-title{font-size:1.125rem;}
.home-tile-arrow{display:inline-flex; width:2.25rem; height:2.25rem; flex:none; align-items:center; justify-content:center;
border-radius:50%; background:rgba(255,255,255,0.18);}
.home-tile-arrow svg{width:1.25rem; height:1.25rem;}
[dir="ltr"] .home-tile-arrow svg{transform:scaleX(-1);}
@media (prefers-reduced-motion:no-preference){
html:not([data-motion="off"]):not([data-a11y-motion="1"]) a.home-tile{transition:transform .2s ease, box-shadow .2s ease;}
html:not([data-motion="off"]):not([data-a11y-motion="1"]) a.home-tile:hover{transform:translateY(-3px); box-shadow:0 10px 22px -6px rgba(31,77,58,0.3);}
}
html[data-a11y-contrast="1"] .home-tile{background:#fff !important; color:#000 !important; border-color:#000 !important;}
html[data-a11y-contrast="1"] .home-tile-text{color:#000 !important;}
/* ======================= the hero ======================= */
/* «מכירה מיוחדת» (content.heroLabel): every screen, only when set. */
.hero-label{
display:inline-flex; align-items:center; min-height:28px; padding:4px 14px; margin-bottom:10px;
border-radius:var(--r-chip, 999px); background:var(--paper); color:var(--primary);
font-weight:800; font-size:0.875rem; line-height:1.3; box-shadow:0 4px 12px -6px rgba(0,0,0,0.45);
}
html[data-layout-hero="split"] #home:has(> #heroBg[style*="url("]) .hero-label{align-self:flex-start;}
@media (max-width:640px){
/* The main button: a pill in the brand colour (the owner's button shape wins). */
html:not([data-catalog-style="boutique"]) #home .hero-primary-action{
background:var(--primary); color:var(--home-on-primary, #fff); min-height:48px; padding:12px 28px;
box-shadow:0 0 0 2px rgba(255,255,255,0.85), 0 8px 20px -8px rgba(0,0,0,0.45);
}
html:not([data-catalog-style="boutique"]):not([data-button-style]) #home .hero-primary-action{border-radius:999rem;}
/* ======================= the footer (phone) ======================= */
footer#siteFooter{margin-top:32px; padding-top:26px;}
#siteFooter .footer-zones{gap:18px;}
}
/* ======================= the footer ======================= */
/* Shorter: the pickup points live in the checkout and in «נקודות איסוף»
(app/pickup-section.js); content.footerPickup brings the list back
(html[data-footer-pickup], app/home-chrome.js). Owner list 26.10, item 11:
a computer too, not only a phone. */
html:not([data-footer-pickup]) #siteFooter .footer-zone-pickup{display:none;}
/* Lighter, on every screen: the page's own ground, unless the owner gave the
footer a ground or colours of their own (home-chrome.js leaves the
attribute off). */
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]){
background:var(--paper-dim); color:var(--ink-soft); border-top:1px solid var(--line);
}
/* A page ground the owner chose (a «רקע» recipe): the footer is a shade of
that ground, not --paper-dim. --paper-dim is derived from the brand colour
with its hue turned 35°, so under a white or cream page a warm brand's
footer came out olive (momos, 2026-10-28). Light grounds only: :where()
keeps the dark grounds' rule (background-scope.css) ahead of this one, and
the text stays the light footer's ink. */
html[data-home-footer="light"]:not([data-a11y-contrast="1"]):where([data-theme-background]) #siteFooter:not([data-part-ground]){
background:var(--theme-page-bg, var(--paper-dim));
background:color-mix(in srgb, var(--theme-page-bg, var(--paper-dim)) 95%, var(--ink));
}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) :is(.footer-name, .footer-col-h, .footer-pickup-title, .footer-pickup-name){color:var(--ink);}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) :is(.footer-info, .footer-contact-link, .footer-legal a, .footer-col-link, .copy, .footer-pickup-address, .footer-pickup-hours, .footer-pickup-note){color:var(--ink-soft);}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) :is(.social-chip, .footer-review, .footer-pickup-link){background:var(--paper); border-color:var(--line); color:var(--ink);}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) .footer-legal .sep{color:var(--ink-soft);}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) :is(.copy, .footer-zones){border-top-color:var(--line);}
/* The footer's finish (benchmark 2026-10-27): sizes and rhythm only, so the
light footer, an owner's footer colours and high contrast keep their own
colours. The name reads as the shop's sign, the details at body size,
the column labels in the body face, the legal links with the «תקנון»
(app/shop-terms.js) as one quiet row above the copyright. */
#siteFooter{padding-top:44px;}
#siteFooter .footer-zones{align-items:start; row-gap:28px;}
#siteFooter .footer-zone{gap:10px;}
#siteFooter .footer-name{font-size:calc(1.375rem * var(--part-title-scale, 1)); line-height:1.25;}
#siteFooter .footer-logo{width:64px; height:64px;}
#siteFooter .footer-info, #siteFooter .footer-contact-link, #siteFooter .footer-pickup-point{font-size:0.875rem; line-height:1.6;}
#siteFooter .footer-hours{font-variant-numeric:tabular-nums;}
#siteFooter .footer-col-h{margin-bottom:6px; font-size:1rem;}
#siteFooter .footer-col-link{font-size:0.9375rem;}
#siteFooter .footer-legal{gap:6px 18px; margin-top:28px; font-size:0.875rem;}
#siteFooter .footer-legal .sep{display:none;}
#siteFooter .copy{margin-top:20px; font-size:0.8125rem;}
@media (min-width:769px){
html:not([data-layout-footer="full"]) #siteFooter .footer-zone-social{align-self:center;}
}
/* «הקישור הועתק» */
.home-toast{
position:fixed; left:50%; bottom:calc(104px + env(safe-area-inset-bottom, 0px)); z-index:1000;
transform:translateX(-50%); opacity:0; pointer-events:none; max-width:calc(100vw - 32px); overflow-wrap:anywhere;
padding:10px 18px; border-radius:var(--r-chip, 999px); background:var(--ink); color:var(--paper);
font-weight:700; font-size:0.9375rem; box-shadow:0 10px 24px -8px rgba(0,0,0,0.45);
}
.home-toast.is-on{opacity:1;}
@media (prefers-reduced-motion:no-preference){
html:not([data-a11y-motion="1"]) .home-toast{transition:opacity .2s ease;}
}
/* ======================= «נקודות איסוף» ======================= */
/* The section kind pickupPoints (app/pickup-section.js; owner list 26.10,
item 12): the checkout's point cards on the page. «כרטיסים» a grid of
framed cards, «רשימה» one column of rows; «מפה» one map under them. */
.editorial-block[data-pks-empty]{display:none;}
.pks{display:grid; gap:20px; margin-top:18px; min-width:0;}
.pks-list{display:grid; gap:12px; margin:0; padding:0; list-style:none; min-width:0;}
.pks[data-look="cards"] .pks-list{grid-template-columns:repeat(auto-fill, minmax(min(100%, 15rem), 1fr));}
.pks-card{display:flex; flex-direction:column; gap:4px; min-width:0; text-align:start;}
.pks[data-look="cards"] .pks-card{padding:16px; border:1px solid var(--line); border-radius:var(--r-control, 12px); background:var(--paper);}
.pks[data-look="list"] .pks-list{gap:0;}
.pks[data-look="list"] .pks-card{padding:14px 0; border-bottom:1px solid var(--line);}
.pks[data-look="list"] .pks-card:last-child{border-bottom:0;}
.pks-name{margin:0; font-size:1rem; font-weight:800; line-height:1.35; color:var(--ink);}
.pks-address, .pks-hours, .pks-note, .pks-contact{margin:0; font-size:0.875rem; line-height:1.5; color:var(--ink-soft); overflow-wrap:anywhere;}
.pks-day{white-space:nowrap;}
.pks-contact{display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px;}
.pks-phone{color:var(--primary); font-weight:700; text-decoration:underline; unicode-bidi:isolate; direction:ltr;}
.pks-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.pks-link{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px; border:1px solid var(--line);
border-radius:var(--r-chip, 999px); background:var(--surface, var(--paper)); color:var(--ink);
font:inherit; font-size:0.875rem; font-weight:700; text-decoration:none; cursor:pointer;}
.pks-link svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.pks-on-map[aria-pressed="true"]{border-color:var(--primary); color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary);}
.pks :is(a, button):focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
.pks-map{min-width:0;}
.pks-map .editorial-embed-box{margin:0;}
@media (min-width:900px){
.pks .pks-list{order:-1;}
.pks[data-look="list"].has-map{grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); align-items:start;}
}
html[data-a11y-contrast="1"] .pks-link{background:#000 !important; color:#fff !important; border:2px solid #fff !important;}
/* ======================= a category with no photo ======================= */
/* Benchmark 2026-10-27, item 6: a tinted tile from the brand colour with the
category's icon in a soft circle — or, with no icon, the name's first
letter in the title face (app.js catCardHTML) — instead of a flat grey
box. Every category form (cards, tiles, bento, chips) draws it. */
.cat-card-photo.is-blank{
background-color:var(--paper-dim);
background-image:linear-gradient(150deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
}
@supports (background: color-mix(in srgb, red 5%, white)){
.cat-card-photo.is-blank{background-color:color-mix(in srgb, var(--primary, #1F4D3A) 10%, var(--paper, #FBF7EF));}
}
.cat-card-photo.is-blank .cat-card-emoji::before{
content:""; position:absolute; z-index:-1; width:1.9em; max-height:86%; aspect-ratio:1; border-radius:50%;
background:rgba(255,255,255,0.6);
}
.cat-card-photo.is-blank .cat-card-emoji{position:relative; z-index:0; isolation:isolate;}
.cat-card-initial{font-family:var(--font-heading, var(--font-brand)), var(--font-display, 'Suez One'), serif; font-weight:900; color:var(--primary);}
.cat-chip .cat-card-photo.is-blank .cat-card-emoji::before{width:100%;}
/* market-day.css */
/* «יום שוק» (app/market-day.js): the board of a dated market, in four looks
(data-look): stall «דוכן» (an awning over a stall, handwritten price
tags), chalk «לוח גיר» (a chalkboard menu, the cards pinned on it as
paper notes), paper «עיתון שוק» (a market broadsheet: masthead, rules,
columns) and modern «מודרני» (bold cards under a countdown band).
Colours: the shop's palette only — the chalkboard is the shop's ink with
its paper for chalk (the body text pair, inverted), the bands the order
button's own pair (--ui-btn-primary-*), so every pair the owner can pick
keeps the contrast the theme already keeps. Sizes in rem (the owner's
type scale), logical sides (RTL and the LTR translations), the numbers in
LTR runs. The product cards are the catalogue's own (productCardEl): only
their frame changes here, never what sits inside them (no-overlap rule,
test/visual-pins.test.js). One motion moment, the awning's sway on first
paint, behind reduced motion and the shop's «תנועה» level. */
.editorial-block.editorial-marketDay[hidden]{display:none;}
.editorial-marketDay{--block-default-background:transparent; --block-default-border:0 solid transparent;}
.editorial .editorial-block.editorial-marketDay{padding:0; overflow:hidden;}
.md{position:relative; display:grid; gap:clamp(16px, 3vw, 28px); padding:clamp(18px, 4vw, 40px); min-width:0; text-align:center; color:var(--ink);}
.md-head{display:grid; justify-items:center; gap:8px; min-width:0;}
.md-head .editorial-copy{display:contents;}
.md-head .editorial-eyebrow{margin:0;}
.editorial .md .md-head h2, .md-title{margin:0; font-family:var(--font-display), var(--font-body), serif; font-size:clamp(2rem, 6vw, 3.25rem); line-height:1.05; font-weight:900; color:inherit; overflow-wrap:anywhere;}
.editorial .md .md-head .rich-text{margin:0 auto; max-width:36rem; text-align:inherit; font-size:1.0625rem; line-height:1.5; color:inherit;}
.md-badge{display:inline-flex; align-items:center; gap:8px; margin:0; padding:4px 14px; border-radius:999px; font-size:0.875rem; font-weight:800;
background:var(--ui-btn-primary-bg, var(--primary)); color:var(--ui-btn-primary-text, #fff);}
.md[data-state="live"] .md-badge::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor;}
.md-when{margin:0; font-size:1.0625rem; font-weight:700; line-height:1.5;}
.md-when bdi, .md-hours{unicode-bidi:isolate; font-variant-numeric:tabular-nums;}
.md-clock{display:grid; justify-items:center; gap:6px; min-width:0;}
.md-clock-label{font-size:0.875rem; font-weight:700;}
.md-clock-digits{display:flex; gap:8px; direction:ltr; unicode-bidi:isolate;}
.md-clock[data-days="0"] .md-d{display:none;}
.md-clock-cell{display:grid; justify-items:center; min-width:3.25rem; padding:6px 8px; border-radius:var(--r-chip, 8px); background:var(--paper); color:var(--ink); border:1px solid var(--line);}
.md-clock-n{font-size:1.5rem; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums;}
.md-clock-u{font-size:0.75rem; font-weight:600;}
/* The cards: the catalogue's own, in a grid of the board's. */
.md .md-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap:clamp(12px, 2vw, 20px); margin:0; text-align:start; min-width:0;}
@media (max-width:640px){ .md .md-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;} }
.md .md-grid > .card, .md .md-tile{min-width:0; color:var(--ink);}
/* Before the market: the list as a preview, no stepper. */
.md-preview{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap:12px; margin:0; padding:0; list-style:none; text-align:start; min-width:0;}
@media (max-width:640px){ .md-preview{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;} }
.md-tile{display:grid; align-content:start; gap:6px; min-width:0; padding:10px; border-radius:var(--r-control, 12px); background:var(--paper); color:var(--ink); border:1px solid var(--line);}
.md-tile-photo{display:block; aspect-ratio:1 / 1; overflow:hidden; border-radius:calc(var(--r-control, 12px) - 4px); background:var(--paper-dim);}
.md-tile-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.md-tile-name{font-weight:800; line-height:1.3; overflow-wrap:anywhere;}
.md-tile-price{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;}
.md-tile-now{font-weight:900; font-size:1.0625rem; font-variant-numeric:tabular-nums; unicode-bidi:isolate;}
.md-tile-unit{font-size:0.875rem; font-weight:600;}
.md-tile-was{font-size:0.875rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; unicode-bidi:isolate;}
/* ===================== «דוכן»: an awning over a stall ===================== */
.md[data-look="stall"]{padding-top:0; background:var(--paper);}
.md-awning{--md-stripe:clamp(28px, 5vw, 48px); height:clamp(54px, 9vw, 84px); margin-inline:calc(-1 * clamp(18px, 4vw, 40px));
background:repeating-linear-gradient(90deg, var(--ui-btn-primary-bg, var(--primary)) 0 var(--md-stripe), var(--paper-dim) var(--md-stripe) calc(2 * var(--md-stripe)));
-webkit-mask:linear-gradient(#000, #000) 0 0 / 100% calc(100% - 14px) no-repeat, radial-gradient(circle at 50% 50%, #000 13.5px, transparent 14px) 0 100% / var(--md-stripe) 28px repeat-x;
mask:linear-gradient(#000, #000) 0 0 / 100% calc(100% - 14px) no-repeat, radial-gradient(circle at 50% 50%, #000 13.5px, transparent 14px) 0 100% / var(--md-stripe) 28px repeat-x;
filter:drop-shadow(0 3px 0 rgba(0,0,0,.12)); transform-origin:50% 0;}
.md[data-look="stall"] .md-head h2, .md[data-look="stall"] .md-title{color:var(--primary);}
.md[data-look="stall"] .md-when{display:inline-block; padding:4px 16px; border-block:2px solid var(--ink);}
.md[data-look="stall"] .md-grid > .card{border:2px solid var(--ink); border-radius:var(--r-control, 12px); box-shadow:4px 4px 0 var(--ink);}
/* The handwritten tag: the card's own price line, on a tag. */
.md[data-look="stall"] .md-grid > .card > .price-tag[data-price-line]{justify-self:start; width:max-content; max-width:100%; padding:2px 12px 2px 10px; border:2px dashed var(--primary); border-radius:6px;
background:var(--paper); color:var(--ink); font-family:var(--font-display), var(--font-body), serif; transform:rotate(-2deg);}
.md[data-look="stall"] .md-clock-cell{border:2px solid var(--ink);}
/* ===================== «לוח גיר»: a chalkboard menu ===================== */
.md[data-look="chalk"]{background:radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.06), transparent 60%), var(--ink); color:var(--paper);
border:clamp(8px, 1.4vw, 14px) solid var(--gold); border-radius:var(--r-panel, 16px); box-shadow:inset 0 0 0 2px rgba(0,0,0,.25), inset 0 0 60px rgba(0,0,0,.35);}
.md[data-look="chalk"] .md-head h2, .md[data-look="chalk"] .md-title{font-weight:700; color:var(--paper); text-shadow:0 0 1px currentColor;}
.md[data-look="chalk"] .md-head::after{content:""; width:min(12rem, 60%); height:0; border-top:2px dashed currentColor; opacity:.7;}
.md[data-look="chalk"] .md-badge{background:transparent; color:var(--paper); border:2px solid var(--paper);}
.md[data-look="chalk"] .md-clock-cell{background:transparent; color:var(--paper); border:2px dashed var(--paper);}
.md[data-look="chalk"] .md-head .editorial-eyebrow{color:var(--paper);}
/* The cards: paper notes pinned on the board. */
.md[data-look="chalk"] .md-grid > .card, .md[data-look="chalk"] .md-tile{position:relative; border:0; border-radius:4px; box-shadow:0 6px 14px rgba(0,0,0,.35);}
.md[data-look="chalk"] .md-grid > .card::before, .md[data-look="chalk"] .md-tile::before{content:""; position:absolute; inset-block-start:-7px; inset-inline-start:50%; z-index:1; width:14px; height:14px; margin-inline-start:-7px;
border-radius:50%; background:var(--gold); box-shadow:0 2px 3px rgba(0,0,0,.4); pointer-events:none;}
.md[data-look="chalk"] .md-grid{padding-top:8px;}
/* ===================== «עיתון שוק»: a market broadsheet ===================== */
.md[data-look="paper"]{background:var(--paper); border-block:6px double var(--ink); border-radius:0; gap:clamp(14px, 2.4vw, 22px);}
.md-masthead{display:flex; justify-content:space-between; gap:12px; width:100%; padding-bottom:6px; border-bottom:1px solid var(--ink); font-size:0.875rem; font-weight:700;}
.md[data-look="paper"] .md-head{justify-items:stretch; text-align:center;}
.md[data-look="paper"] .md-badge{justify-self:center; border-radius:0; background:var(--ink); color:var(--paper);}
.md[data-look="paper"] .md-head h2, .md[data-look="paper"] .md-title{font-size:clamp(2.5rem, 9vw, 4.75rem); letter-spacing:0; border-bottom:3px solid var(--ink); padding-bottom:8px;}
.md[data-look="paper"] .md-clock{grid-auto-flow:column; justify-content:center; align-items:center; gap:12px;}
.md[data-look="paper"] .md-clock-cell{border-radius:0; border:1px solid var(--ink); background:transparent;}
.md[data-look="paper"] .md-grid{gap:0; border-top:1px solid var(--ink);}
.md[data-look="paper"] .md-grid > .card{border:0; border-radius:0; box-shadow:none; background:transparent; padding-block:14px; border-bottom:1px solid var(--line);}
@media (min-width:641px){ .md[data-look="paper"] .md-grid > .card{border-inline-end:1px solid var(--line); padding-inline:14px;} }
.md[data-look="paper"] .md-grid > .card > .card-name{font-family:var(--font-display), var(--font-body), serif; font-size:1.125rem;}
.md[data-look="paper"] .md-tile{border-radius:0; border:0; border-bottom:1px solid var(--line); background:transparent;}
/* ===================== «מודרני»: bold cards, a countdown band ===================== */
.md[data-look="modern"]{background:var(--paper-dim); border-radius:var(--r-panel, 16px);}
.md[data-look="modern"] .md-head{justify-items:start; text-align:start;}
.editorial .md[data-look="modern"] .md-head .rich-text{margin-inline:0;}
.md[data-look="modern"] .md-head h2, .md[data-look="modern"] .md-title{font-size:clamp(2.25rem, 7vw, 4rem); letter-spacing:0;}
.md[data-look="modern"] .md-clock{width:100%; grid-auto-flow:column; justify-content:space-between; align-items:center; padding:12px clamp(12px, 2vw, 20px); margin-top:4px;
border-radius:var(--r-control, 12px); background:var(--ui-btn-primary-bg, var(--primary)); color:var(--ui-btn-primary-text, #fff);}
@media (max-width:480px){ .md[data-look="modern"] .md-clock{grid-auto-flow:row; justify-content:stretch; justify-items:start;} }
.md[data-look="modern"] .md-clock-label{font-size:1rem;}
.md[data-look="modern"] .md-clock-cell{background:transparent; color:inherit; border:0; padding:0 4px; min-width:2.75rem;}
.md[data-look="modern"] .md-clock-n{font-size:1.75rem;}
.md[data-look="modern"] .md-grid > .card{border:0; border-radius:var(--r-panel, 16px); box-shadow:0 10px 26px -14px rgba(0,0,0,.35);}
.md[data-look="modern"] .md-grid > .card[data-md-deal] > .price-tag[data-price-line]{font-size:1.25rem; font-weight:900;}
/* The boutique template's cards keep their own frame; the board around them is the look's. */
html[data-catalog-style="boutique"] .md .md-grid > .card{box-shadow:none;}
/* One moment: the awning sways in when the board is painted. */
@media (prefers-reduced-motion: no-preference){
html:not([data-a11y-motion="1"]):not([data-motion="off"]) .md-awning{animation:md-sway .9s cubic-bezier(.2,.7,.3,1.2) both;}
@keyframes md-sway{from{transform:scaleY(.6) rotate(-1deg);} to{transform:none;}}
}
.md :is(a, button, input, select):focus-visible{outline:var(--focus-ring-width, 3px) solid var(--focus-ring, #0B5FFF); outline-offset:2px;}
/* A phone: the frame and the board's sides give the cards their width back
(the boutique heart and sale badge need it, the no-overlap rule). */
@media (max-width:640px){
.md{padding-inline:12px;}
.md[data-look="chalk"]{border-width:6px; padding-inline:8px;}
.md-awning{margin-inline:-12px;}
}
/* storefront-cards.css */
/* Storefront cards (owner list 2026-10-27). Loaded after theme.css and the
voice forms; every rule names its item. The behaviour lives in
app/card-add.js (the «+», the price line) and app/cart-bar-empty.js (the
bar). Product cards are .card[data-key]; the product page's purchase box
(.rich-product-purchase) keeps its own row. */
/* ---- 1. One «+» until the product is in the cart ----
The stepper's own + alone until the first tap; the − and the number, the
unit chips and the preparation choices come with it (.in-cart, set by
syncQty). The clean card's open card (.is-open) shows its whole stepper, as
before. The gallery keeps its round + on the photo (its rules name #catalog
and win). «מונה מלא» (theme.productAppearance.addControl "stepper",
html[data-add-control]) keeps the whole stepper from the start, as before
#623 (owner 2026-10-27).
The «+» stays put (owner 2026-10-28): the stepper keeps its whole footprint
from the start, its − and number invisible and its strip unpainted, so the
«+» already sits in the slot it keeps after the first tap — same place,
same size — and the − and the number appear beside it. «כפתור במילים»
(below, section 9) is a full-width button that turns into the stepper. */
html:not([data-add-control="stepper"]) .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > :not(.plus){visibility:hidden;}
html[data-add-control="words"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > :not(.plus){display:none;}
html:not([data-add-control="stepper"]) .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) :is(.unit-choice, .prep){display:none;}
html:not([data-add-control="stepper"]) .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row{background:transparent;}
html:not([data-add-control="stepper"]) .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus{line-height:1;}
html:not([data-add-control="stepper"]) .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus:disabled{box-shadow:none;}
/* The preparation choices open under the stepper (app/card-add.js moves them there and marks the card
.prep-under); the card's spare height sits below, where they open, not above the stepper, so a card shorter
than its row does not lift its «+» when they appear. */
html:not([data-add-control="stepper"]) .card[data-key]:not(.rich-product-purchase) > .qty-row + .prep{margin:8px 0 0;}
html:not([data-add-control="stepper"]) .card.prep-under[data-key]:not(.rich-product-purchase) > .qty-row,
html:not([data-add-control="stepper"]) :is(#catalog, #dealsStrip, body) .boutique-card.prep-under[data-key] > .price-tag{margin-top:0;}
/* One stepper (owner 2026-10-27, «צריך להתאים בגודל»): the counter is as tall as the − and + it sits
between (their painted boxes are equal: theme.css .card .qty-btn, the shape from «כפתורים»), centred.
A narrow card (≤ 110px) keeps its own wrapped stepper (theme.css). */
.card[data-key]:not(.rich-product-purchase) > .qty-row{align-items:stretch;}
.card[data-key]:not(.rich-product-purchase) > .qty-row > .qty-value{display:flex; flex-direction:column; justify-content:center; align-self:stretch;}
.card[data-key]:not(.rich-product-purchase) > .qty-row > .qty-btn{align-self:center;}
/* The stepper is centred in the card, the counter between − and + (owner 2026-10-27); before the first tap
too, so its «+» does not move (owner 2026-10-28). */
.card[data-key]:not(.rich-product-purchase) > .qty-row{align-self:center; margin-inline:auto;}
/* The − is outlined where it is painted: the ring sits on the 42px square, not on the padded tap area around it
(theme.css draws it as an inset shadow of the whole button, 4px larger than the + beside it). */
.card[data-key]:not(.rich-product-purchase):not(.boutique-card) > .qty-row > .qty-btn.minus{position:relative; box-shadow:none;}
.card[data-key]:not(.rich-product-purchase):not(.boutique-card) > .qty-row > .qty-btn.minus::before{
content:""; position:absolute; inset:2px; border-radius:inherit; pointer-events:none;
box-shadow:inset 0 0 0 1px var(--ui-qty-minus-border, var(--line));
}
@container shopcard (max-width:109.98px){
.card[data-key]:not(.rich-product-purchase):not(.boutique-card) > .qty-row > .qty-btn.minus::before{inset:6px 2px;}
}
/* The round card is centred, so are its «+» and its stepper. */
html[data-layout-card-shape="round"] .card[data-key] > .qty-row{align-self:center;}
/* ---- 2. A grid that grows with the screen, readable names and prices ----
The catalogue and its search are at least 1320px wide from a 1440px
screen (the builder publishes a fixed 1180px --container; a wider one
wins, and so do the owner's part widths through store-design.js). On a computer the columns follow a 200px minimum
card, and the owner's products per row (--prod-cols, shop or category) is
the most a row holds. The phone keeps its exact count (theme.css). */
@media (min-width:1440px){
main, .prod-search:not(.is-floating){max-width:max(var(--container), 1320px);}
}
@media (min-width:1100px){
.product-grid,
html[data-products-per-row] .product-grid{
grid-template-columns:repeat(auto-fill, minmax(max(200px, calc((100% - (var(--prod-cols) - 1) * 22px) / var(--prod-cols))), 1fr));
}
}
.card[data-key] > .card-name{font-size:0.9375rem; line-height:1.35;}
@media (max-width:640px){
.card[data-key] > .card-name{font-size:0.875rem;}
}
@container shopcard (max-width:109.98px){
.card[data-key] > .card-name{font-size:clamp(0.625rem, 12cqi, 0.8125rem);}
}
/* The price, moved under the name by card-add.js (a plain price only: an
offer keeps its sticker on the photo). Bold and larger than the name, in
the brand ink; the owner's price colours (--ui-price-*) and «תג מחיר»
recipe still win. Doubled classes outrank the photo-sticker rules
(theme.css, the «פשוט» card) without !important. data-price-line marks a moved price. */
html :is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key] > .price-tag[data-price-line]{
position:static; transform:none; transform-origin:50% 50%; align-self:center;
width:auto; max-width:100%; margin:0 0 8px; padding:1px 8px;
background:var(--ui-price-bg, transparent); color:var(--ui-price-text, var(--accent-deep, var(--primary)));
box-shadow:none; border-radius:var(--r-chip);
font-family:var(--font-body), sans-serif; font-size:1.125rem; font-weight:800; line-height:1.25; text-align:center;
}
html :is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key] > .price-tag[data-price-line] .price-unit{font-size:0.75em; font-weight:600;}
/* A bundle's regular price (app/offer-chrome.js, owner list 28.10): the same
line under the name as every other card's price; the bundle stays on the
photo's sticker. */
.card[data-key] > .offer-regular-price{
align-self:center; max-width:100%; margin:0 0 8px; padding:1px 8px; text-align:center;
color:var(--ui-price-text, var(--accent-deep, var(--primary)));
font-family:var(--font-body), sans-serif; font-size:1.125rem; font-weight:800; line-height:1.25;
font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
@media (max-width:640px){ .card[data-key] > .offer-regular-price{font-size:1rem; margin-bottom:6px;} }
@container shopcard (max-width:109.98px){ .card[data-key] > .offer-regular-price{font-size:clamp(0.6875rem, 14cqi, 0.9375rem); padding-inline:0;} }
@media (max-width:640px){
html :is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key] > .price-tag[data-price-line]{font-size:1rem; margin-bottom:6px;}
}
@container shopcard (max-width:109.98px){
html :is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key] > .price-tag[data-price-line]{font-size:clamp(0.6875rem, 14cqi, 0.9375rem); padding-inline:0;}
}
/* Forms whose name starts at the card's edge put the price there too. */
html:is([data-layout-catalog="mosaic"], [data-layout-cards="plain"]) #catalog .card.card[data-key] > .price-tag[data-price-line]{align-self:flex-start; text-align:start; margin-inline:2px;}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card.card[data-key] > .price-tag[data-price-line]{margin-inline:10px;}
html[data-layout-cards="plain"]:not([data-catalog-style="boutique"]) :is(#catalog, #dealsStrip) .card[data-key]:has(> .price-tag) > .card-name{padding-inline-end:0; min-height:0;}
/* The mosaic's big tile has a big name; its price stays the larger line. */
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card[data-key]:not([data-card-span]):nth-child(6n+1) > .price-tag[data-price-line]{font-size:1.625rem;}
@media (max-width:640px){
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card[data-key]:not([data-card-span]):nth-child(6n+1) > .price-tag[data-price-line]{font-size:1.25rem;}
}
/* Boutique draws its own price line under the name (boutique.js); bold, as everywhere. */
html[data-catalog-style="boutique"] .card.boutique-card[data-key] > .price-tag{font-weight:700;}
.card-img > .price-tag{font-weight:800;}
/* The tag on the photo always shows the whole price (owner 2026-10-29: «8. ₪/ק״ג» on a narrow photo —
«8.90 ₪/ק״ג» was one unbreakable run, so beside the flag it ran past the tag's edge, off its
background). The amount keeps one line and «₪/ק״ג» goes under it when the room is short (the
space between them is the only break); the tag is never narrower than its longest piece. An
offer's tag is the same block. */
.card-img > .price-tag{min-width:min-content;}
.card-img > .price-tag .price-main{white-space:normal;}
.card-img > .price-tag .price-amount{white-space:nowrap;}
/* ---- 3. The sticker is a small corner badge ----
«מדבקה» (item.card.sticker) inside the photo's top corner, where the price
used to stand before it moved under the name (#623): physically top-right
in both directions (the kashrut tab and the flag hold the top-left).
A deal still hides it (theme.css), so it never meets the offer sticker. */
.card-img > .card-sticker{
inset-block-end:auto; inset-inline-start:auto; top:6px; bottom:auto; right:6px; left:auto;
width:48px; height:48px; padding:4px; font-size:0.6875rem; rotate:-6deg;
}
.card-img > .card-sticker::before{inset:3px;}
/* The list's photo is not a positioned box: the badge sits at its top edge. */
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .card-img > .card-sticker{top:var(--row-pad);}
@media (max-width:640px){
.card-img > .card-sticker{width:38px; height:38px; padding:3px; font-size:0.5rem; top:4px; right:4px;}
}
/* A round stamp's words in another language: a pill as long as they are. Hebrew never gets here. */
.card-img > .card-sticker[data-sticker-translated]:not([data-sticker-tag]){width:auto; height:auto; max-width:calc(100% - 12px); padding:4px 10px; border-radius:999px; overflow-wrap:anywhere;}
.card-img > .card-sticker[data-sticker-translated]:not([data-sticker-tag])::before{border-radius:999px; inset:2px;}
/* ---- 3b. «מבצע» / «טקסט חופשי»: a tag, not the stamp ----
item.card.sticker "sale" | "custom" (+ stickerText, app/card-overrides.js;
owner 2026-11-01: «תגית יפה שכתוב בה מבצע או טקסט חופשי»). A pill in the
price tag's shape and tilt at the photo's top-right — or, when the price
sits on the photo, the price pill itself in the sale colour with the words
before it, so a tag never adds a layer over the product — with a punched hole, in the sale colour (--danger), its text by WCAG ratio
(--danger-ink, app/cart-chrome.js inkVars; white on the default red is
5.8:1). A real offer's sticker hides it (theme.css). The owner's words,
≤16 characters: they wrap, never clip. */
.card-img > .card-sticker[data-sticker-tag]{
inset-block-end:auto; inset-inline-start:auto; /* the stamp's logical corner first, then the physical one (RTL start = right) */
top:8px; right:8px; bottom:auto; left:auto;
width:max-content; height:auto; max-width:calc(100% - 34px); min-width:0;
display:inline-flex; align-items:center; gap:0.375rem;
rotate:-3deg; transform-origin:100% 50%; scale:none;
padding:5px 12px 5px 10px; border-radius:999px; /* a pill like the price beside it */
background:#B93632; background:var(--danger, #B93632); color:var(--danger-ink, #FFFFFF);
font-family:var(--font-body), sans-serif; font-size:0.875rem; font-weight:800; line-height:1.25;
text-align:start; white-space:normal; overflow-wrap:anywhere; text-wrap:balance; unicode-bidi:isolate;
box-shadow:0 4px 12px -3px rgba(120,20,20,0.45), inset 0 0 0 1.5px rgba(255,255,255,0.28);
}
/* The punched hole (in place of the stamp's dashed ring). */
.card-img > .card-sticker[data-sticker-tag]::before{
position:static; inset:auto; flex:none; width:0.4375rem; height:0.4375rem;
border:0; border-radius:50%; background:currentColor; opacity:0.85;
}
/* With the price on the photo there is no room for a second pill (owner
2026-11-02, on a phone: «זה כבר מסתיר את כל המוצר»): the price pill itself turns the
sale colour and starts with the tag's words («מבצע · 6.90 ₪/ק״ג»), so a
tag adds nothing on top of the product. */
.card:not([data-pc~="sticker"]) > .card-img:has(> .price-tag) > .card-sticker[data-sticker-tag]{display:none;}
.card:not(.has-deal-offer):not([data-pc~="sticker"]) > .card-img:has(> .card-sticker[data-sticker-tag]) > .price-tag{background:#B93632; background:var(--danger, #B93632); color:var(--danger-ink, #FFFFFF); max-width:calc(100% - 8px);}
.card:not(.has-deal-offer):not([data-pc~="sticker"]) > .card-img:has(> .card-sticker[data-sticker-tag]) > .price-tag::before{content:var(--card-tag-words, "") " · "; font-weight:800;}
html[data-a11y-contrast="1"] .card > .card-img:has(> .card-sticker[data-sticker-tag]) > .price-tag{background:#111111 !important; color:#FFFFFF !important;}
/* A translated page (LTR) puts the ⓘ at the top-right: the tag starts under it. */
html.translated-ltr .card:has(> .product-details-open) > .card-img:not(:has(> .price-tag)) > .card-sticker[data-sticker-tag]{top:3.25rem;}
/* The list's photo: the tag at its top edge (the stamp shrinks there). */
html[data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card .card-img > .card-sticker[data-sticker-tag]{inset-inline-start:auto; top:var(--row-pad); left:auto; right:var(--row-pad); scale:none; max-width:90%;}
html[data-a11y-contrast="1"] .card-img > .card-sticker[data-sticker-tag]{background:#FFFFFF !important; color:#111111 !important; box-shadow:inset 0 0 0 2px #111111 !important;}
@media (max-width:640px){
.card-img > .card-sticker[data-sticker-tag]{top:4px; right:4px; padding:3px 8px 3px 7px; gap:0.25rem; font-size:0.75rem; max-width:calc(100% - 8px);}
.card-img > .card-sticker[data-sticker-tag]::before{width:0.3125rem; height:0.3125rem;}
}
/* ---- 5. The bottom bar with no basket on it ----
«לכל המוצרים» when the cart is empty (#cartBar[data-cart-state], set by
cart-bar-empty.js). The full bar (.cart-inner) is not laid out meanwhile,
so --cart-bar-h is the pill's height. */
.cart-pill{display:none;}
#cartBar[data-cart-state="all"] .cart-inner{display:none;}
#cartBar[data-cart-state="all"] .cart-all{
display:inline-flex; align-items:center; justify-content:center; gap:10px; pointer-events:auto;
min-height:48px; padding:10px 22px; 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:0.9375rem; font-weight:700; line-height:1.2;
box-shadow:0 12px 28px -10px rgba(0,0,0,0.45);
}
.cart-all svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round;}
.cart-pill:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
body.has-cart-pill{padding-bottom:var(--cart-bar-h, 72px);}
@media (prefers-reduced-motion:no-preference){
html:not([data-a11y-motion="1"]) #cartBar[data-cart-state] .cart-pill{animation:cart-pill-in .3s cubic-bezier(.22,1,.36,1);}
@keyframes cart-pill-in{from{transform:translateY(40%); opacity:0;}}
}
/* ---- 6. «גדלים ומחירים»: a chip per size, with its price ----
app/card-type.js sizesHtml, only on a product whose sizes the owner set
(details.optionTypes ["portion"]). The chosen one is the card's price
and what the «+» adds; a sold-out size is greyed and disabled.
One row of equal fixed-height chips, the name over the price (owner list
26.10, item 9: two rows of different heights doubled the card at 390):
the chips share the width, never narrower than their words — when they
do not fit (a narrow phone card, a fourth size) the row scrolls sideways. */
.variant-picker.size-chips{
flex-direction:row; flex-wrap:nowrap; gap:6px; min-width:0; overflow-x:auto; overscroll-behavior-x:contain;
scrollbar-width:none; scroll-snap-type:x proximity; padding:3px 0; margin:-3px 0;
}
.variant-picker.size-chips::-webkit-scrollbar{display:none;}
.size-chip{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
flex:1 0 auto; min-width:3.5rem; max-width:8rem; height:2.875rem; padding:0 8px; border:1px solid var(--line); border-radius:var(--r-control, 10px);
background:var(--surface, var(--paper)); color:var(--ink); cursor:pointer; scroll-snap-align:start;
font-family:var(--font-body), sans-serif; font-size:0.75rem; font-weight:600; line-height:1.2; text-align:center;
}
.size-chip-name{display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.size-chip-sep{display:none;}
.size-chip-price{display:block; font-size:0.8125rem; font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums;}
.size-chip[aria-pressed="true"]{
border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary);
background:color-mix(in srgb, var(--primary) 10%, var(--surface, var(--paper))); color:var(--accent-deep, var(--primary));
}
.size-chip:disabled{cursor:not-allowed; opacity:.5; text-decoration:line-through; text-decoration-thickness:1px;}
/* More chips past the end edge (app/card-type.js markMore, owner list 28.10
item 2): that edge fades out, so the cut chip reads as "scroll for more".
Physical sides on purpose: the script names the side from the row's own
direction, so RTL fades the left edge and an LTR translation the right. */
.variant-picker.size-chips[data-more="left"]{
-webkit-mask-image:linear-gradient(to right, transparent 0, #000 2.75rem);
mask-image:linear-gradient(to right, transparent 0, #000 2.75rem);
}
.variant-picker.size-chips[data-more="right"]{
-webkit-mask-image:linear-gradient(to left, transparent 0, #000 2.75rem);
mask-image:linear-gradient(to left, transparent 0, #000 2.75rem);
}
.size-chip-oos{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
/* Inside the chip: the one-row scroller would clip a ring outside it. */
.size-chip:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:-2px;}
/* ---- 7. «כרטיס לבן» (theme.productAppearance.cardGround, owner list
26.10, item 21): the card on white with a hairline and a soft lift, so it
stands off a tinted page ground. On the page (html), or on the card
itself: a category's look and a product's own (app/category-look.js and
app/card-overrides.js write data-card-ground on the card; before
2026-10-29 only an ancestor matched, so neither did anything). A card's
own «כרטיס רגיל» ("default") stays plain inside a white page. An owner's
«רקע כרטיס מוצר» still wins. */
[data-card-ground="white"] .product-grid > .card:not([data-card-ground="default"]),
html[data-card-ground="white"][data-layout-catalog] #catalog .product-grid:not(.product-carousel) > .card:nth-child(n):not([data-card-ground="default"]),
.product-grid > .card.card[data-card-ground="white"],
html[data-layout-catalog] #catalog .product-grid:not(.product-carousel) > .card:nth-child(n)[data-card-ground="white"]{
background:var(--ui-card-bg, #fff); border:1px solid var(--line);
box-shadow:0 1px 2px rgba(20,24,20,0.06), 0 8px 20px -12px rgba(20,24,20,0.22);
}
/* ---- 8. «הצג עוד N» in «מוצרים נבחרים» (app/section-kinds.js, block.show) ---- */
.editorial-featured-grid > .card[hidden]{display:none;}
.featured-more{display:flex; align-items:center; justify-content:center; min-height:44px; margin:16px auto 0; padding:0 20px;
border:1px solid var(--line); border-radius:var(--r-chip, 999px); background:var(--surface, var(--paper));
color:var(--primary); font:inherit; font-weight:700; cursor:pointer;}
.featured-more:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
/* ---- 9. Card finish, opt-in (theme.productAppearance, benchmark 2026-10-27;
a kit may pick them, builder/kits.js `card`; no key = the card as before) ----
«גודל שם המוצר» «גדול» (nameSize "large"): the name at 18px (16px on a
phone), the price under it one step larger still (#623: the price leads).
«צורת התמונה» «ריבוע» (photoRatio "square"): the photo 1:1 in the grid and
the strip; a form that draws its own photo (rows, the mosaic's big tile,
a per-product size, boutique) keeps it.
«הוספה לסל» «כפתור במילים» (addControl "words"): before the first tap the
«+» is a full-width button that says so; the stepper follows as with «+». */
html[data-name-size="large"] :is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card[data-key]:not(.boutique-card):not([data-pl-name-size]) > .card-name{font-size:1.125rem; line-height:1.3;}
html[data-name-size="large"] :is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key]:not([data-pl-name-size]) > .price-tag[data-price-line]{font-size:1.25rem;}
@media (max-width:640px){
html[data-name-size="large"] :is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card[data-key]:not(.boutique-card):not([data-pl-name-size]) > .card-name{font-size:1rem;}
html[data-name-size="large"] :is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key]:not([data-pl-name-size]) > .price-tag[data-price-line]{font-size:1.125rem;}
}
@container shopcard (max-width:109.98px){
html[data-name-size="large"] :is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card[data-key]:not(.boutique-card):not([data-pl-name-size]) > .card-name{font-size:clamp(0.6875rem, 13cqi, 0.875rem);}
}
/* The shop's «גודל שם המוצר» on a slider (a number, app/size-scale.js; --name-scale on ):
as a product's own (app/product-look.css), the price one step larger and never under its size. */
html[data-name-size="scale"] :is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card[data-key]:not(.boutique-card):not([data-pl-name-size]) > .card-name{font-size:calc(0.875rem * var(--name-scale, 1)); line-height:1.3;}
html[data-name-size="scale"] :is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key]:not([data-pl-name-size]) > .price-tag[data-price-line]{font-size:max(1.125rem, calc(0.875rem * var(--name-scale, 1) + 0.125rem));}
@media (max-width:640px){
html[data-name-size="scale"] :is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card[data-key]:not(.boutique-card):not([data-pl-name-size]) > .card-name{font-size:calc(0.8125rem * var(--name-scale, 1));}
html[data-name-size="scale"] :is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key]:not([data-pl-name-size]) > .price-tag[data-price-line]{font-size:max(1rem, calc(0.8125rem * var(--name-scale, 1) + 0.125rem));}
}
html[data-photo-ratio="square"] .card[data-key]:not(.boutique-card):not([data-card-span]):not(.rich-product-purchase):not([data-pl-shape]) > .card-img{aspect-ratio:1 / 1;}
:root{--add-words:"הוספה לסל";}
html[lang="en"], html.translated-ltr{--add-words:"Add to cart";}
html[lang="fr"]{--add-words:"Ajouter";}
html[lang="ru"]{--add-words:"В корзину";}
html[lang="ar"]{--add-words:"أضف إلى السلة";}
html[data-add-control="words"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase):not(.boutique-card) > .qty-row{align-self:stretch; justify-content:center; margin-inline:0; max-width:none; padding:0;}
html[data-add-control="words"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase):not(.boutique-card) > .qty-row > .plus{
flex:1 1 auto; width:auto; min-width:0; font-size:0;
}
html[data-add-control="words"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase):not(.boutique-card) > .qty-row > .plus::after{
content:var(--add-words); font-family:var(--font-body), sans-serif; font-size:0.875rem; font-weight:700; line-height:1.2; white-space:nowrap;
}
/* The «מחיר רגיל» chip with no free spot on the photo (app/card-corners.js)
reads as a line under the name instead. */
.card[data-key] > .deal-was[data-cc-out]{
position:static; align-self:center; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:2px 6px;
margin:0 0 6px; max-width:100%; background:transparent; border:0; box-shadow:none; padding:0;
}
/* The flag and the kashrut tab with no free spot on the photo
(app/card-corners.js): small, side by side on one line under the name. */
.card[data-key] > .card-corner-line{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 8px; margin:0 0 6px; min-width:0;}
.card[data-key] > .card-corner-line > *{position:static; inset:auto; transform:none; margin:0; max-width:100%;}
.card-corner-line .card-origin-mark{width:1.25rem;}
.card-corner-line .card-origin-name{display:none;}
/* card-marks.css */
/* «סימונים בכרטיס» «מתחת לתמונה» (app/card-marks.js). Only under
html[data-marks="below"], except the footer seal (business.kosher, both
modes); no key = the card as it was. */
/* One muted line under the price: origin · kashrut · tags · «מדבקה». The
card's own ink, softened, so it reads on a light and a dark card alike. */
html[data-marks="below"] .card[data-key] > .card-marks{
display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:2px 6px;
min-width:0; margin:0 8px 6px; font-size:0.75rem; font-weight:500; line-height:1.4;
color:inherit; opacity:.78;
}
html[data-marks="below"] .card-marks > [data-mark] + [data-mark]::before{
content:"·"; margin-inline-end:6px; opacity:.8;
}
html[data-marks="below"] .card-marks .card-origin{
position:static; inset:auto; transform:none; margin:0; padding:0; background:none; box-shadow:none;
display:inline-flex; align-items:center; gap:4px; color:inherit; font-size:inherit; width:auto; height:auto;
}
html[data-marks="below"] .card-marks .card-origin-mark{
position:static; transform:none; width:auto; height:auto; padding:0; background:none; box-shadow:none;
border-radius:0; clip-path:none; display:inline-flex; animation:none;
}
html[data-marks="below"] .card-marks .card-origin-mark .card-origin-flag{position:static; inset:auto; display:block; padding:0; border:0; width:1.25em; height:auto; aspect-ratio:4/3; object-fit:cover;
border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.12); clip-path:none; transform:none; animation:none;}
html[data-marks="below"] .card-marks .card-origin-name{display:inline; position:static; margin:0; padding:0; background:none; color:inherit; font:inherit; transform:none;}
/* The owner's tags as words in the line, not chips. */
html[data-marks="below"] .card-marks > .card-tags{
display:inline-flex; flex-wrap:wrap; justify-content:center; gap:0 6px; margin:0; padding:0;
}
html[data-marks="below"] .card-marks .card-tag{
margin:0; padding:0; background:none; border:0; box-shadow:none; border-radius:0;
color:inherit; font:inherit; line-height:inherit;
}
html[data-marks="below"] .card-marks .card-tag + .card-tag::before{content:"·"; margin-inline-end:6px; opacity:.8;}
/* An offer's regular price, out of the photo, under the name. */
html[data-marks="below"] .card[data-key] > .deal-was[data-marks-out]{
position:static; inset:auto; transform:none; rotate:none; display:flex; justify-content:center; gap:4px;
margin:0 8px 2px; padding:0; background:none; box-shadow:none; border:0; border-radius:0;
color:inherit; font-size:0.8125rem; font-weight:500; opacity:.85;
font-variant-numeric:tabular-nums;
}
/* The unit in the stepper, under the count: the live unit and a caret; the
other option stays in the page (app.js's own button) and is reached
through it. Its 44px hit area grows downward, off the count, into the
stepper's foot and the card's padding (card-marks.js keeps room there). */
html[data-marks="below"] .qty-value:has(.unit-choice) > .qty-unit{display:none;}
/* The room the 44px hit area grows into: every card alike, so the steppers of a row stay level. */
html[data-marks="below"] .card[data-key] > .qty-row{margin-block-end:12px;}
html[data-marks="below"] .qty-value > .unit-choice{
position:static; inset:auto; transform:none; margin:1px 0 0; padding:0; display:block; background:none; box-shadow:none;
}
html[data-marks="below"] .qty-value > .unit-choice .unit-toggle{
display:block; position:static; padding:0; margin:0; background:none; border:0; box-shadow:none; width:auto;
}
html[data-marks="below"] .qty-value > .unit-choice .unit-opt:not(.on){display:none;}
html[data-marks="below"] .qty-value > .unit-choice .unit-opt.on{
position:relative; display:inline-flex; align-items:center; gap:2px;
min-width:0; min-height:0; width:auto; height:auto; margin:0; padding:1px 6px;
font:700 0.75rem/1.2 var(--font-body), sans-serif; color:inherit;
background:transparent; border:1px solid var(--line); border-radius:var(--r-chip); box-shadow:none;
cursor:pointer; transform:none; overflow:visible;
}
html[data-marks="below"] .qty-value > .unit-choice .unit-opt.on::after{
content:"▾"; font-size:0.8em; line-height:1; opacity:.75;
}
html[data-marks="below"] .qty-value > .unit-choice .unit-opt.on::before{
content:""; position:absolute; z-index:1; inset:0 auto auto 50%; width:max(100%, 44px); height:44px; transform:translateX(-50%);
}
/* «כל המוצרים כשרים» (business.kosher): one outlined seal under the shop's name in the footer. */
#siteFooter .shop-kosher{
display:inline-flex; align-items:center; justify-content:center; align-self:center;
margin-block-start:8px; padding:3px 12px; border:1px solid currentColor; border-radius:var(--r-chip);
font-size:0.8125rem; font-weight:700; line-height:1.3;
}
/* The list (rows): the price keeps its own place (layouts-voice.css); the
name no longer leaves room for the unit pill, which is in the stepper; the
regular price and the marks follow the name in its column. */
html[data-marks="below"][data-layout-catalog="rows"]:not([data-catalog-style="boutique"]) #catalog .product-grid:not(.product-carousel) > .card:has(.unit-choice-img) > .card-name{align-self:center; margin-bottom:0;}
html[data-marks="below"][data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card > :is(.card-marks, .deal-was[data-marks-out]){
position:static; inset:auto; grid-column:2; justify-content:flex-start; text-align:start; margin:2px 0 0;
}
@media (max-width:640px){
html[data-marks="below"][data-layout-catalog="rows"]:not([data-catalog-style="boutique"]) #catalog .product-grid:not(.product-carousel) > .card:has(.unit-choice-img) > .card-name{align-self:start; margin-bottom:30px;}
}
/* The gallery: the words under the photo start-aligned like the name. */
html[data-marks="below"][data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > :is(.card-marks, .deal-was[data-marks-out]){
position:static; inset:auto; justify-content:flex-start; margin-inline:0; padding-inline-end:calc(var(--gal-price-w) + 10px);
}
@media (max-width:640px){
html[data-marks="below"][data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > :is(.card-marks, .deal-was[data-marks-out]){padding-inline-end:0;}
}
/* Boutique: with the flag off the photo, the heart takes the corner the flag
gave it (origin-styles.css), clear of a wide sale badge at the top. A
fixed physical corner on purpose, as there. */
html[data-marks="below"][data-catalog-style="boutique"] .card[data-key]:not(.rich-product-purchase) > .card-img .boutique-favorite{left:auto; right:0.5rem; top:auto; bottom:0.5rem;}
/* Boutique: the price right under the name and the marks under it, so a card
with a marks line keeps its price level with its row's (the stepper alone
stays pinned to the card's foot, boutique.css). */
html[data-marks="below"][data-catalog-style="boutique"] .boutique-card:not(.rich-product-purchase) > .price-tag{margin-top:0;}
html[data-marks="below"][data-catalog-style="boutique"] :is(#catalog, #dealsStrip) .boutique-card:not(.rich-product-purchase) > .price-tag{margin-top:0;}
html[data-marks="below"][data-catalog-style="boutique"] .boutique-card > .card-marks{margin-bottom:10px;}
html[data-marks="below"][data-catalog-style="boutique"] .boutique-card:not(.rich-product-purchase) > .qty-row{margin-top:auto;}
/* card-library.css */
/* «עיצובים» of the product card (theme.productAppearance.cardDesign, app/card-library.js). Nothing here applies
without html[data-card-design], except the «כפתור רחב» of addControl (section 4), itself opt-in.
1. The shared base: every look reads the --cd-* variables below.
2. Forms (html[data-cd-form]): where the price, the name and the add button sit.
3. A design: a short block of --cd-* values and only what no variable can say.
A catalogue form (rows, gallery, mosaic) draws its own card: no design over it.
A category's or a product's own shape, photo and name size stay theirs (the :not()s); the owner's colours are read
through --ui-*. Ground designs get their text from app/card-library.js by contrast (--cd-on...). */
html[data-card-design]{--cd-r:var(--r-panel);--cd-bd:1px solid var(--line);--cd-sh:none;--cd-pad:12px;--cd-bg:var(--ui-card-bg,var(--paper));--cd-ar:4/3;--cd-ir:var(--r-control);--cd-ibg:var(--ui-card-photo-bg,var(--ui-card-bg,#fff));--cd-ish:none;--cd-im:0 0 10px;--cd-ip:6px;--cd-fit:contain;--cd-ta:center;--cd-as:center;--cd-nf:var(--font-body);--cd-ns:.9375rem;--cd-nw:600;--cd-ps:1.125rem;--cd-pw:800;--cd-pf:var(--font-body);--cd-stock:"במלאי";--cd-out:"אזל";}
html[lang="en"][data-card-design],html.translated-ltr[data-card-design]{--cd-stock:"In stock";--cd-out:"Sold out";}
@media (max-width:640px){html[data-card-design]{--cd-k:.92;}}
html[data-card-design]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase){background:var(--cd-bg);border:var(--cd-bd);box-shadow:var(--cd-sh);padding:var(--cd-pad);}
html[data-card-design]:not([data-layout-catalog]):not([data-layout-card-shape]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not([data-card-shape]):not([data-pl-corners]){border-radius:var(--cd-r);}
html[data-card-design]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase).in-cart{box-shadow:var(--cd-sh);}
html[data-card-design]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not([data-pl-shape]) > .card-img{aspect-ratio:var(--cd-ar);}
html[data-card-design]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{border-radius:var(--cd-ir);background:var(--cd-ibg);box-shadow:var(--cd-ish);margin:var(--cd-im);}
html[data-card-design]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{overflow:visible;min-height:0;}
html[data-card-design]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > :is(img,.card-swap-photo,.img-fallback){position:absolute;inset:0;width:100%;height:100%;object-fit:var(--cd-fit);padding:var(--cd-ip);border-radius:var(--cd-ir);}
html[data-card-design]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{font-family:var(--cd-nf),sans-serif;font-weight:var(--cd-nw);text-align:var(--cd-ta);overflow-wrap:anywhere;}
html[data-card-design]:not([data-name-size]):not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not([data-pl-name-size]) > .card-name{font-size:calc(var(--cd-ns) * var(--cd-k,1));}
html[data-card-design]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > :is(.price-tag[data-price-line],.offer-regular-price){align-self:var(--cd-as);text-align:var(--cd-ta);font-family:var(--cd-pf),sans-serif;font-weight:var(--cd-pw);font-size:calc(var(--cd-ps) * var(--cd-k,1));margin-inline:0;padding-inline:0;}
html[data-card-design]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > :is(.card-producer,.card-marks,.deal-was[data-marks-out]){text-align:var(--cd-ta);justify-content:var(--cd-as);margin-inline:0;}
/* Boutique paints a card white and its name near black by fixed value: under a design both follow the shop's ground and ink. */
html[data-card-design][data-catalog-style="boutique"]:not([data-layout-catalog],[data-cd-ground]) .card:not([style*="--ui-card-bg"]){--ui-card-bg:var(--cd-bg);}
html[data-card-design][data-catalog-style="boutique"]:not([data-layout-catalog]) .card.boutique-card[data-key] .card-name{color:var(--ink);}
/* Words read on any palette: a too pale primary gives way to the ink for prices; the sale label, unit switch and minus by contrast. An owner's colour still wins (--ui-*). */
html[data-cd-weak-primary] .card{--accent-deep:var(--ink);--boutique-accent:var(--ink);}
html[data-card-design] .card[data-key] > .deal-was[data-marks-out] .deal-was-label{color:var(--ink);}
html[data-card-design] .card[data-key] .unit-choice-img .unit-opt.on{color:var(--cd-on-primary,#fff);}
/* In the stepper (card-marks.css) the chosen unit is a plain word on the card: ink, not the word for a filled pill. */
html[data-card-design] .card[data-key] .qty-value > .unit-choice .unit-opt.on{color:var(--ink);}
html[data-cd-ground] .card[data-key].is-oos .qty-btn.plus{color:var(--cd-home-ink);}
html[data-cd-ground] .card.boutique-card[data-key] .product-details-open{color:var(--cd-plus-ink);background:var(--cd-plus-bg);}
html[data-card-design] .card[data-key] .qty-btn.minus{background-color:var(--ui-qty-minus-bg,var(--cd-bg));color:var(--ui-qty-minus-text,var(--ink));}
html[data-card-design]{--cd-own-plus-text:var(--ui-qty-plus-text);}
html[data-card-design] .card.boutique-card[data-key] .qty-btn.plus{color:var(--cd-own-plus-text,var(--cd-on-accent,#fff));}
html[data-cd-ground] .card.boutique-card[data-key] .qty-btn.plus{color:var(--cd-plus-ink);}
/* A narrow side photo: the sold-out pills on one line each. */
html:is([data-cd-form="side"],[data-cd-form="menu"][data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .card.card.is-oos .oos-overlay{inset-inline:4px;padding:0;gap:4px;justify-content:flex-end;}
html:is([data-cd-form="side"],[data-cd-form="menu"][data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .card.card.is-oos .oos-overlay .oos-stamp{white-space:nowrap;min-height:24px;padding:3px 6px;font-size:.75rem;}
html:is([data-cd-form="side"],[data-cd-form="menu"][data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .card.card.is-oos .oos-overlay .oos-notify{min-height:24px;font-size:.6875rem;}
html:is([data-cd-form="side"],[data-cd-form="menu"][data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .card.card.is-oos .oos-overlay .oos-notify-label{white-space:nowrap;padding:3px 2px 3px 6px;}
html:is([data-cd-form="side"],[data-cd-form="menu"][data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .card.card.is-oos .oos-overlay .oos-notify-plus{width:24px;}
/* A coloured card: text, price and «+» by contrast against its ground (app/card-library.js). */
html[data-cd-ground]{--cd-home-ink:var(--ink);--cd-home-soft:var(--ink-soft);--cd-home-price:var(--ui-price-text);--cd-home-accent:var(--accent-deep,var(--primary));--cd-home-card:var(--ui-card-bg);--cd-home-plus:var(--ui-qty-plus-bg);--cd-home-plus-ink:var(--ui-qty-plus-text);--cd-home-b:var(--boutique-accent);}
html[data-cd-ground] :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not([style*="--ui-card-bg"]){--ink:var(--cd-on);--ink-soft:var(--cd-on);--ui-price-text:var(--cd-price);--accent-deep:var(--cd-on);--boutique-accent:var(--cd-price);--ui-card-bg:var(--cd-ground);--ui-qty-plus-bg:var(--cd-plus-bg);--ui-qty-plus-text:var(--cd-plus-ink);--cd-bg:transparent;color:var(--cd-on);background:var(--cd-ground);}
/* A piece with its own light plate (photo stickers, pills, a size chip) keeps the shop's colours. */
html[data-cd-ground] .card:not([style*="--ui-card-bg"]) :is(.card-img,.size-chip,.boutique-option,.prep select){--ink:var(--cd-home-ink);--ink-soft:var(--cd-home-soft);--ui-price-text:var(--cd-home-price);--accent-deep:var(--cd-home-accent);--ui-card-bg:var(--cd-home-card);--ui-qty-plus-bg:var(--cd-home-plus);--ui-qty-plus-text:var(--cd-home-plus-ink);--boutique-accent:var(--cd-home-b);color:var(--ink);}
html[data-cd-ground] :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name a{color:inherit;}
html[data-cd-ground] :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row{background:transparent;}
/* No end fade on a coloured ground: it smears the chip's plate. */
html[data-cd-ground] .card:not([style*="--ui-card-bg"]) .variant-picker.size-chips[data-more]{-webkit-mask-image:none;mask-image:none;}
/* split, menu: the price at the start of the last line, the «+» at its end; the stepper from that corner, the price one line up. */
html[data-cd-form="split"]:not([data-add-control]):not([data-catalog-style="boutique"]):not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-cd-form="menu"]:not([data-add-control]):not([data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key]{padding-block-end:calc(var(--cd-pad-end,12px) + 3rem);}
html[data-cd-form="split"]:not([data-add-control]):not([data-catalog-style="boutique"]):not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row,html[data-cd-form="menu"]:not([data-add-control]):not([data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key] > .qty-row{position:absolute;margin:0;max-width:172px;inset-block-end:var(--cd-pad-end,8px);inset-inline-end:var(--cd-pad-x,8px);}
html[data-cd-form="split"]:not([data-add-control]):not([data-catalog-style="boutique"]):not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not(.in-cart):not(.is-open) > .qty-row > :not(.plus),html[data-cd-form="menu"]:not([data-add-control]):not([data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key]:not(.in-cart):not(.is-open) > .qty-row > :not(.plus){display:none;}
html[data-cd-form="split"]:not([data-add-control]):not([data-catalog-style="boutique"]):not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not(.in-cart):not(.is-open):has(> .price-tag[data-price-line]),html[data-cd-form="menu"]:not([data-add-control]):not([data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key]:not(.in-cart):not(.is-open):has(> .price-tag[data-price-line]){padding-block-end:var(--cd-pad-end,8px);}
html[data-cd-form="split"]:not([data-add-control]):not([data-catalog-style="boutique"]):not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > :is(.price-tag[data-price-line],.offer-regular-price),html[data-cd-form="menu"]:not([data-add-control]):not([data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key] > :is(.price-tag[data-price-line],.offer-regular-price){order:9;}
html[data-cd-form="split"]:not([data-add-control]):not([data-catalog-style="boutique"]):not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not(.in-cart):not(.is-open) > .price-tag[data-price-line],html[data-cd-form="menu"]:not([data-add-control]):not([data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key]:not(.in-cart):not(.is-open) > .price-tag[data-price-line]{margin-block:auto 0;min-height:3.5rem;display:flex;flex-wrap:wrap;align-content:center;align-items:baseline;gap:0 4px;min-width:0;margin-inline-end:3.5rem;max-width:calc(100% - 3.5rem);}
/* side, menu: one column on a phone, two from a computer; the photo as tall as the card. A strip or a section's card stays a stack. */
html:is([data-cd-form="side"],[data-cd-form="menu"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel){grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr)) !important;}
html:is([data-cd-form="side"],[data-cd-form="menu"][data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key]{padding-inline-start:calc(var(--cd-side,38%) + var(--cd-pad) * 2);min-height:10rem;}
html:is([data-cd-form="side"],[data-cd-form="menu"][data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key] > .card-img{position:absolute;inset-block:var(--cd-pad);inset-inline-start:var(--cd-pad);width:var(--cd-side,38%);aspect-ratio:auto;margin:0;}
html[data-cd-form="menu"]:not([data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key]{padding-inline-start:5.25rem;min-height:5.5rem;}
html[data-cd-form="menu"]:not([data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key] > .card-img{position:static;width:auto;height:0;min-height:0;aspect-ratio:auto;margin:0;background:none;box-shadow:none;}
html[data-cd-form="menu"]:not([data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key] > .card-img > :is(img,.img-fallback){inset:8px auto auto auto;inset-inline-start:8px;width:4.5rem;height:4.5rem;background:var(--cd-ibg);}
html[data-cd-form="menu"]:not([data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key] > .card-img > .deal-tag{top:8px;bottom:auto;right:auto;left:auto;inset-inline-end:8px;max-width:6rem;}
html[data-cd-form="menu"]:not([data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key].has-deal-offer > :is(.card-name,.deal-was){margin-inline-end:6.5rem;}
html[data-cd-form="menu"]:not([data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key].has-deal-offer > .card-name{min-height:3.5rem;}
html[data-cd-form="menu"]:not([data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key].is-oos:not(.in-cart):not(.is-open):has(> .price-tag[data-price-line]).is-oos{padding-block-end:4.5rem;}
html[data-cd-form="menu"]:not([data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key].is-oos > .price-tag[data-price-line]{min-height:0;margin-block:auto 4px;}
html:is([data-cd-form="side"],[data-cd-form="menu"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key] > .product-details-open{top:auto;bottom:12px;margin:0;inset-inline:12px auto;}
html[data-cd-form="menu"]:not([data-catalog-style="boutique"]):not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key].is-oos > .card-img > .oos-overlay{inset:auto;inset-inline:8px 3.5rem;bottom:8px;flex-direction:row;justify-content:flex-start;width:auto;height:auto;background:none;}
/* onphoto: the «+» on the photo's corner until the first tap, then a stepper under the card. */
html[data-cd-form="onphoto"]:not([data-add-control]):not([data-catalog-style="boutique"]):not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not(.in-cart):not(.is-open):not(.is-oos) > .qty-row{position:absolute;margin:0;inset-block-start:calc(var(--cd-ph,125cqi) - var(--cd-up,3.25rem));inset-inline-end:var(--cd-at,4px);}
html[data-cd-form="onphoto"]:not([data-add-control]):not([data-catalog-style="boutique"]):not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not(.in-cart):not(.is-open) > .qty-row > :not(.plus){display:none;}
/* The designs. Each has its own composition; the shared pieces above only read their --cd-* values.
Tints come from the shop's primary. On a dark page a white packshot cannot melt into a stage, so the stage turns into a light plate (data-cd-dark). */
html[data-card-design]{--cd-tint:var(--paper-dim);--cd-stage:var(--paper-dim);--cd-rule:var(--ink-soft);--cd-blend:normal;--cd-mix:var(--line);}
@supports (color:color-mix(in srgb,red,blue)){html[data-card-design]{--cd-tint:color-mix(in srgb,var(--primary) 9%,var(--paper));--cd-stage:color-mix(in srgb,var(--primary) 22%,var(--paper));--cd-mix:color-mix(in srgb,var(--ink) 16%,transparent);}}
html[data-cd-dark][data-card-design]{--cd-stage:#fff;--cd-blend:normal!important;}
html[data-card-design]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > img{mix-blend-mode:var(--cd-blend);}
/* No photo: an empty stage with the basket drawn on it, never a blank white box. */
html[data-card-design]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .img-fallback{background:var(--cd-nophoto,var(--cd-tint));}
html[data-card-design]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .img-fallback::before{content:"";width:34%;aspect-ratio:1;background:var(--ink-soft);opacity:.35;-webkit-mask:var(--cd-glyph) center/contain no-repeat;mask:var(--cd-glyph) center/contain no-repeat;}
html[data-card-design]{--cd-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16l-1.6 10.5H5.6zM8.5 9 11 4M15.5 9 13 4'/%3E%3C/svg%3E");}
/* פוסטר: the photo is the card; it melts into a dark ground, the name set large on it. */
html[data-card-design="poster"]{--cd-bd:none;--cd-pad:14px;--cd-ar:4/5;--cd-im:-14px -14px -2.5rem;--cd-fit:cover;--cd-ip:0px;--cd-ir:var(--cd-r) var(--cd-r) 0 0;--cd-nf:var(--font-display);--cd-ns:clamp(1.125rem,11cqi,1.75rem);--cd-nw:400;--cd-ta:start;--cd-as:flex-start;--cd-ps:1.25rem;--cd-sh:0 18px 34px -18px color-mix(in srgb,var(--ink) 70%,transparent);}
html[data-card-design="poster"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{-webkit-mask-image:linear-gradient(#000 calc(100% - 7rem),transparent calc(100% - 1.5rem));mask-image:linear-gradient(#000 calc(100% - 7rem),transparent calc(100% - 1.5rem));flex:none;}
html[data-card-design="poster"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .oos-overlay{inset-block:auto 3rem;height:auto;}
html[data-card-design="poster"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase).is-oos.boutique-card > .card-img > .boutique-favorite{top:auto;bottom:8rem;}
html[data-card-design="poster"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase).is-oos.boutique-card > .product-details-open{top:auto;bottom:auto;margin-block-start:0;}
html[data-card-design="poster"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .boutique-favorite{top:8px;bottom:auto;left:8px;right:auto;}
html[data-card-design="poster"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{position:relative;z-index:1;line-height:1.15;}
/* A dark page: a white packshot fading into a dark card turns muddy. The photo ends clean, the name sits below it. */
html[data-card-design="poster"]:is([data-theme-background="deep"],[data-theme-background="black"],[data-theme-background="ink"],[data-theme-background="espresso"]){--cd-im:-14px -14px 12px;--cd-nw:500;}
html[data-card-design="poster"]:is([data-theme-background="deep"],[data-theme-background="black"],[data-theme-background="ink"],[data-theme-background="espresso"]):not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{-webkit-mask-image:none;mask-image:none;}
html[data-card-design="poster"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row > .plus{border-radius:50%;}
/* שער: a magazine cover: the name as the masthead over the photo, the price a round sticker on it. */
html[data-card-design="cover"]{--cd-bd:none;--cd-pad:12px;--cd-r:0px;--cd-ar:4/5;--cd-im:-.5rem -12px 0;--cd-fit:cover;--cd-ip:0px;--cd-ir:0px;--cd-nf:var(--font-display);--cd-ns:clamp(1.25rem,14cqi,2.5rem);--cd-nw:400;--cd-ta:start;--cd-as:flex-start;--cd-pw:800;--cd-sh:inset 0 0 0 1px var(--cd-mix);}
html[data-card-design="cover"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{order:-3;position:relative;z-index:1;margin:0;line-height:1.04;min-height:2.08em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
html[data-card-design="cover"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{order:-2;}
html[data-card-design="cover"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]{order:-1;position:relative;z-index:2;align-self:flex-start;margin:-4rem 0 1rem 0;flex:none;width:5.25rem;height:5.25rem;border-radius:50%;background:var(--gold);color:var(--cd-on-gold);--ui-price-text:var(--cd-on-gold);--accent-deep:var(--cd-on-gold);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-size:1.0625rem;line-height:1.1;rotate:-8deg;text-align:center;box-shadow:0 6px 14px -8px var(--ink);}
html[data-card-design="cover"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line] .price-unit{font-size:.6875rem;color:inherit;}
html[data-card-design="cover"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row{margin-block-start:10px;margin-inline:auto 0;}
html[data-card-design="cover"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row > .plus{border-radius:50%;}
html[data-card-design="cover"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase).is-oos > .price-tag[data-price-line]{margin-block-start:6px;}
/* גלריה: no card at all: a tall photo and a round «+» that sits half on its edge. */
html[data-card-design="gallery"]{--cd-bd:none;--cd-pad:0px;--cd-ar:4/5;--cd-fit:cover;--cd-ip:0px;--cd-ir:var(--r-panel);--cd-ta:start;--cd-as:flex-start;--cd-ns:.9375rem;--cd-nw:500;--cd-ps:1.0625rem;--cd-pw:700;--cd-up:1.7rem;--cd-at:10px;}
html[data-card-design="gallery"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{margin-inline-end:4.5rem;}
html[data-card-design="gallery"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row > .plus{border-radius:50%;box-shadow:0 0 0 4px var(--paper),0 8px 14px -8px var(--ink);}
/* חצי תמונה: half photo edge to edge, half type. */
html[data-card-design="half"]{--cd-r:var(--r-panel);--cd-pad:14px;--cd-side:44%;--cd-bd:none;--cd-bg:var(--ui-card-bg,var(--cd-tint));--cd-fit:cover;--cd-ip:0px;--cd-ta:start;--cd-as:flex-start;--cd-nf:var(--font-display);--cd-ns:clamp(1.125rem,6cqi,1.625rem);--cd-nw:400;--cd-ps:1.375rem;--cd-ir:var(--cd-r) 0 0 var(--cd-r);}
html[data-card-design="half"][data-card-design]:not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key] > .card-img{inset-block:0;inset-inline-start:0;}
html[data-card-design="half"][data-card-design]:not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key]{padding-inline-start:calc(var(--cd-side) + var(--cd-pad));min-height:12rem;}
html.translated-ltr[data-card-design="half"]{--cd-ir:0 var(--cd-r) var(--cd-r) 0;}
html[data-card-design="half"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row{margin-block-start:auto;margin-inline:auto 0;}
html[data-card-design="half"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row > .plus{border-radius:50%;}
/* במה: a deep card; the product stands on a coloured stage with a floor under it. */
html[data-card-design="stage"]{--cd-bd:none;--cd-pad:14px;--cd-r:calc(var(--r-panel)*1.5);--cd-ar:1/1;--cd-im:-14px -14px 12px;--cd-ip:6%;--cd-ir:var(--cd-r) var(--cd-r) 0 0;--cd-ibg:var(--cd-stage);--cd-blend:multiply;--cd-fit:contain;--cd-ta:start;--cd-as:flex-start;--cd-nw:700;--cd-ps:1.25rem;--cd-sh:0 2px 4px color-mix(in srgb,var(--ink) 14%,transparent),0 26px 40px -22px color-mix(in srgb,var(--ink) 65%,transparent);}
html[data-card-design="stage"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{background-image:radial-gradient(60% 12% at 50% 92%,color-mix(in srgb,var(--ink) 16%,transparent),transparent);}
/* מדליון: a round photo coin that breaks out through the top of a tinted card. */
html[data-card-design="float"]{--cd-bd:none;--cd-bg:var(--ui-card-bg,var(--cd-tint));--cd-pad:12px;--cd-ar:1/1;--cd-im:-3.5rem 12% 10px;--cd-ip:0px;--cd-fit:cover;--cd-ir:50%;--cd-ibg:#fff;--cd-ish:0 0 0 5px var(--paper),0 14px 22px -12px var(--ink);--cd-r:calc(var(--r-panel)*1.25);--cd-nw:700;}
html[data-card-design="float"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase){margin-block-start:3.5rem;}
html[data-card-design="float"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .boutique-favorite{top:0;bottom:auto;left:-6px;right:auto;}
html[data-card-design="float"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .boutique-sale-badge{top:0;right:-6px;}
html[data-card-design="float"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .oos-overlay{inset-block:auto 8%;inset-inline:-8%;height:auto;}
html[data-card-design="float"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .product-details-open{top:4px;}
html[data-card-design="float"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .deal-tag{top:0;}
/* עיגול: a huge coloured disc, wider than the card, the product on it. */
html[data-card-design="circle"]{--cd-bd:none;--cd-pad:12px;--cd-ar:1/1;--cd-bg:var(--ui-card-bg,var(--paper));--cd-im:-8% -14% 10px;--cd-ir:50%;--cd-ibg:var(--cd-stage);--cd-blend:multiply;--cd-fit:cover;--cd-ip:0px;--cd-nf:var(--font-display);--cd-nw:400;--cd-ns:1.0625rem;}
html[data-card-design="circle"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase){overflow:hidden;}
html[data-card-design="circle"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .deal-tag{top:12%;right:15%;left:auto;}
html[data-card-design="circle"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > :is(.boutique-favorite,.boutique-sale-badge){top:12%;}
html[data-card-design="circle"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .boutique-favorite{left:15%;right:auto;}
html[data-card-design="circle"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .boutique-sale-badge{right:15%;left:auto;}
html[data-card-design="circle"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .oos-overlay{bottom:10%;inset-inline:15%;}
html[data-card-design="circle"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row > .plus{border-radius:50%;}
/* קשת: the card itself is an arched doorway filled by the photo. */
html[data-card-design="arch"]{--cd-bd:none;--cd-bg:var(--ui-card-bg,var(--cd-tint));--cd-r:999px 999px var(--r-control) var(--r-control);--cd-pad:12px;--cd-ar:4/5;--cd-im:-12px -12px 12px;--cd-ir:999px 999px 0 0;--cd-fit:cover;--cd-ip:0px;--cd-ibg:var(--cd-stage);--cd-blend:multiply;--cd-nf:var(--font-display);--cd-nw:400;}
html[data-card-design="arch"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .deal-tag{top:32%;}
html[data-card-design="arch"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row > .plus{border-radius:50%;}
/* אלכסון: the brand's colour cuts up into the photo on a slant. */
html[data-card-design="band"]{--cd-bd:none;--cd-pad:12px;--cd-ar:1/1;--cd-im:-12px -12px 0;--cd-fit:cover;--cd-ip:0px;--cd-ir:var(--cd-r) var(--cd-r) 0 0;--cd-ibg:#fff;--cd-nf:var(--font-display);--cd-nw:400;--cd-ns:1.125rem;--cd-ta:start;--cd-as:flex-start;}
html[data-card-design="band"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{clip-path:polygon(0 0,100% 0,100% 100%,0 86%);}
html.translated-ltr[data-card-design="band"]{--cd-ta:start;}
html[data-card-design="band"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .oos-overlay{bottom:16%;}
/* מחיר גדול: the price is the picture: huge, at the top, the photo under it. */
html[data-card-design="bignum"]{--cd-bd:none;--cd-pad:14px;--cd-bg:var(--ui-card-bg,var(--cd-tint));--cd-ar:1/1;--cd-im:10px -14px -14px;--cd-ir:0 0 var(--cd-r) var(--cd-r);--cd-ip:0px;--cd-fit:cover;--cd-ibg:#fff;--cd-ta:start;--cd-as:flex-start;--cd-pf:var(--font-display);--cd-pw:400;--cd-ph:100%;--cd-up:0px;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line],html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > :is(.deal-was,.offer-regular-price){order:-3;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 .375rem;margin:0;line-height:.95;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line] .price-main{display:inline-flex;align-items:baseline;gap:.125rem;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line] .price-amount{font-size:clamp(2.25rem,23cqi,4rem);letter-spacing:0;color:var(--ui-price-text,var(--accent-deep,var(--primary)));}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line] .price-currency{font-size:clamp(1rem,9cqi,1.5rem);}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line] .price-unit{font-size:.8125rem;font-family:var(--font-body),sans-serif;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{order:-2;margin-block:4px 6px;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-producer{order:-2;margin-block:0 4px;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{order:5;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .deal-tag{top:10px;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row{order:4;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not(.in-cart):not(.is-open):not(.is-oos) > .qty-row{inset-block:auto 10px;inset-inline-end:10px;z-index:2;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row > .plus{border-radius:50%;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):is(.in-cart,.is-open) > .qty-row{margin-block:8px 0;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):is(.in-cart,.is-open) > .card-img{order:3;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase).boutique-card > .card-img{order:3;margin-block-end:10px;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase).boutique-card > .qty-row{order:6;}
/* חותמת: the price stamped on the photo in a tilted double ring. */
html[data-card-design="stamp"]{--cd-bd:none;--cd-pad:10px;--cd-ar:1/1;--cd-ip:0px;--cd-fit:cover;--cd-ibg:var(--cd-tint);--cd-r:var(--r-control);--cd-ir:var(--r-chip);--cd-ta:start;--cd-as:flex-start;--cd-nf:var(--font-display);--cd-nw:400;--cd-ns:1.0625rem;--cd-sh:inset 0 0 0 1px var(--cd-mix);}
html[data-card-design="stamp"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]{order:-1;align-self:flex-end;width:5.5rem;height:5.5rem;margin:-4rem 6px 1.25rem;flex:none;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:var(--ui-card-bg,var(--paper));box-shadow:0 0 0 2px var(--primary),inset 0 0 0 4px var(--ui-card-bg,var(--paper)),inset 0 0 0 5px var(--primary);color:var(--accent-deep,var(--primary));rotate:-11deg;font-size:1.0625rem;line-height:1.1;text-align:center;}
html[data-card-design="stamp"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line] .price-unit{font-size:.6875rem;color:inherit;}
html[data-card-design="stamp"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{order:-2;}
html[data-card-design="stamp"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row{margin-inline:auto 0;}
html[data-card-design="stamp"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase).is-oos > .price-tag[data-price-line]{margin-block-start:4px;}
/* תג תלוי: the price hangs on a string from the top of the card, over the photo. */
html[data-card-design="hangtag"]{--cd-r:var(--r-control);--cd-bd:none;--cd-pad:10px;--cd-ar:1/1;--cd-fit:cover;--cd-ip:0px;--cd-im:-10px -10px 10px;--cd-ir:var(--cd-r) var(--cd-r) 0 0;--cd-ibg:var(--cd-tint);--cd-sh:inset 0 0 0 1px var(--cd-mix);--cd-ta:start;--cd-as:flex-start;}
html[data-card-design="hangtag"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]:not(.x){position:absolute;z-index:3;inset-block-start:2rem;right:auto;left:auto;inset-inline-end:14px;width:5rem;margin:0;max-width:none;min-height:0;padding:1.25rem 4px 8px;display:flex;flex-direction:column;align-items:center;gap:0;background:var(--primary);color:var(--cd-on-primary);--ui-price-text:var(--cd-on-primary);--accent-deep:var(--cd-on-primary);border-radius:var(--r-chip);clip-path:polygon(50% 0,100% 1rem,100% 100%,0 100%,0 1rem);rotate:3deg;transform-origin:50% .6rem;line-height:1.1;font-size:1rem;text-align:center;}
html[data-card-design="hangtag"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line] .price-unit{font-size:.6875rem;color:inherit;}
html[data-card-design="hangtag"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]::before{content:"";position:absolute;inset-block-start:7px;inset-inline-start:50%;margin-inline-start:-4px;width:8px;height:8px;border-radius:50%;background:var(--paper);}
html[data-card-design="hangtag"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img::after{content:"";position:absolute;z-index:2;inset-block-start:0;inset-inline-end:calc(14px + 2.5rem - 1px);width:2px;height:2.6rem;background:var(--ink);}
html[data-card-design="hangtag"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .deal-tag{top:auto;bottom:8px;}
html[data-card-design="hangtag"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):is(.has-deal-offer,.is-oos) > .card-img::after{content:none;}
html[data-card-design="hangtag"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .product-details-open{right:auto;left:auto;inset-inline:10px auto;top:3.25rem;}
html[data-card-design="hangtag"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row{margin-inline:auto 0;}
html[data-card-design="hangtag"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row > .plus{border-radius:50%;}
/* מדף: products stand on one shelf that runs across the row; a big label hangs from its edge. */
html[data-card-design="shelf"]{--cd-bd:none;--cd-r:0px;--cd-pad:10px;--cd-ar:1/1;--cd-im:-10px -10px 10px;--cd-ip:6%;--cd-ir:0px;--cd-ibg:var(--paper);--cd-blend:multiply;--cd-ta:start;--cd-as:flex-start;--cd-ps:1.625rem;--cd-pf:var(--font-display);--cd-pw:400;}
html[data-card-design="shelf"]:not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel){column-gap:0;}
html[data-card-design="shelf"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{box-shadow:0 10px 0 var(--primary),0 18px 12px -4px color-mix(in srgb,var(--ink) 40%,transparent);margin-block-end:18px;}
html[data-card-design="shelf"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase){border-inline-start:1px solid var(--cd-mix);}
html[data-card-design="shelf"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]{order:-1;line-height:1.05;}
html[data-card-design="shelf"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{order:-2;}
/* פולארויד: a printed snapshot, slightly crooked, with a wide lip for the name. */
html[data-card-design="polaroid"]{--cd-bd:none;--cd-r:2px;--cd-ir:0px;--cd-pad:10px;--cd-ar:1/1;--cd-fit:cover;--cd-ip:0px;--cd-ibg:var(--paper-dim);--cd-sh:0 1px 2px color-mix(in srgb,var(--ink) 25%,transparent),0 16px 26px -14px color-mix(in srgb,var(--ink) 55%,transparent);--cd-nf:var(--font-display);--cd-nw:400;--cd-ps:1rem;--cd-ta:start;--cd-as:flex-start;}
html[data-card-design="polaroid"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase){rotate:-.5deg;}
html[data-card-design="polaroid"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{margin-block-end:6px;}
html[data-card-design="polaroid"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .variant-picker{margin-block-end:8px;}
html[data-card-design="polaroid"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):nth-child(even){rotate:.5deg;}
html[data-card-design="polaroid"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase)::before{content:"";position:absolute;z-index:2;inset-block-start:-9px;inset-inline-start:calc(50% - 2rem);width:4rem;height:18px;background:var(--gold-light);opacity:.75;rotate:-2deg;}
/* כרטיס: a side-on ticket: the photo is the stub, a torn line and two punched notches. */
html[data-card-design="coupon"]{--cd-bd:none;--cd-bg:var(--ui-card-bg,var(--cd-tint));--cd-r:var(--r-control);--cd-pad:12px;--cd-side:40%;--cd-fit:cover;--cd-ip:0px;--cd-ir:0px;--cd-ta:start;--cd-as:flex-start;--cd-nf:var(--font-display);--cd-nw:400;--cd-ns:1.0625rem;--cd-ps:1.375rem;--cd-notch:60%;}
html.translated-ltr[data-card-design="coupon"]{--cd-notch:40%;}
html[data-card-design="coupon"][data-card-design]:not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key] > .card-img{inset-block:0;inset-inline-start:0;}
html[data-card-design="coupon"][data-card-design]:not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key]{padding-inline-start:calc(var(--cd-side) + 16px);min-height:11rem;-webkit-mask:radial-gradient(circle .625rem at var(--cd-notch) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle .625rem at var(--cd-notch) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle .625rem at var(--cd-notch) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle .625rem at var(--cd-notch) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;}
html[data-card-design="coupon"][data-card-design]:not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card[data-key]::before{content:"";position:absolute;z-index:1;inset-block:.75rem;inset-inline-start:calc(var(--cd-side) - 1px);border-inline-start:2px dashed var(--ink-soft);}
html[data-card-design="coupon"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row{margin-block-start:auto;margin-inline:auto 0;}
/* קבלה: a till slip with a torn edge: dotted lines between the rows. */
html[data-card-design="receipt"]{--cd-bd:none;--cd-r:0px;--cd-ir:0px;--cd-bg:var(--ui-card-bg,var(--paper-dim));--cd-pad:12px;--cd-pad-end:14px;--cd-ar:4/3;--cd-ip:6px;--cd-ibg:transparent;--cd-blend:multiply;--cd-ta:center;--cd-as:center;--cd-nw:500;--cd-ns:.9375rem;--cd-ps:1.375rem;--cd-pw:700;--cd-im:0 0 8px;}
html[data-card-design="receipt"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase){--z:.625rem;padding-block-end:calc(var(--cd-pad) + .75rem);-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--z) calc(var(--z)/2) repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - var(--z)/2 + 1px) no-repeat;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--z) calc(var(--z)/2) repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - var(--z)/2 + 1px) no-repeat;}
html[data-card-design="receipt"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{border-block-end:2px dotted var(--ink-soft);padding-block-end:6px;}
html[data-card-design="receipt"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{border-block-end:2px dotted var(--ink-soft);padding-block-end:6px;}
html[data-card-design="receipt"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .img-fallback{background:transparent;}
/* כותרת: a headline: a heavy rule, the name large above a wide photo. */
html[data-card-design="news"]{--cd-bd:none;--cd-r:0px;--cd-ir:0px;--cd-pad:10px 0 0;--cd-pad-x:0px;--cd-ar:3/2;--cd-fit:cover;--cd-ip:0px;--cd-ta:start;--cd-as:flex-start;--cd-nf:var(--font-display);--cd-ns:clamp(1.25rem,12cqi,2.125rem);--cd-nw:400;--cd-ibg:var(--cd-tint);}
html[data-card-design="news"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase){border-block-start:5px solid var(--ink);}
html[data-card-design="news"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{order:-2;margin-block-end:8px;line-height:1.08;min-height:2.16em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;}
html[data-card-design="news"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):has(> .product-details-open) > .card-name{margin-inline-end:2.75rem;}
html[data-card-design="news"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{order:-1;}
/* חנות: everything lined up, the add button a full bar along the card's bottom edge. */
html[data-card-design="store"]{--cd-r:var(--r-control);--cd-sh:none;--cd-ar:1/1;--cd-ibg:#fff;--cd-ir:0px;--cd-ip:8px;--cd-ta:start;--cd-as:flex-start;--cd-ps:1.375rem;--cd-pad:10px;}
html[data-card-design="store"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase){overflow:hidden;}
html[data-card-design="store"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{order:-2;margin-inline:-10px;margin-block-start:-10px;border-block-end:1px solid var(--line);}
html[data-card-design="store"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-producer{order:-1;text-align:start;margin:0 0 2px;font-size:.75rem;font-weight:700;color:var(--ink-soft);}
html[data-card-design="store"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row{order:3;}
html[data-card-design="store"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not(.in-cart):not(.is-open) > .qty-row{margin:auto -10px -10px;}
html[data-card-design="store"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not(.in-cart):not(.is-open) > .qty-row > .plus{border-radius:0;min-height:3rem;}
html[data-card-design="store"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .prep{order:4;}
html[data-card-design="store"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase)::after{content:var(--cd-stock);order:2;display:block;margin:0 0 8px;font-size:.75rem;font-weight:600;line-height:1.3;color:var(--ink-soft);}
html[data-card-design="store"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase).is-oos::after{content:var(--cd-out);}
/* קוביות: a bento box: the card falls apart into separate coloured cells. */
html[data-card-design="bento"]{--cd-bd:none;--cd-pad:0px;--cd-ar:1/1;--cd-im:0;--cd-fit:cover;--cd-ip:0px;--cd-ir:var(--r-panel);--cd-ibg:var(--cd-stage);--cd-blend:multiply;--cd-ta:start;--cd-as:stretch;--cd-nw:700;--cd-ps:1.25rem;}
html[data-card-design="bento"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-content:start;}
html[data-card-design="bento"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > *{grid-column:1/-1;}
html[data-card-design="bento"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{order:-3;margin:0;}
html[data-card-design="bento"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{order:-2;margin:0;padding:10px 12px;background:var(--cd-tint);border-radius:var(--r-control);min-height:3.5rem;display:flex;align-items:center;}
html[data-card-design="bento"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > :is(.price-tag[data-price-line],.deal-was,.offer-regular-price){order:8;grid-column:1;width:auto;max-width:none;min-width:0;justify-self:stretch;margin:0;padding:6px 12px;min-height:3.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;background:var(--gold);color:var(--cd-on-gold);--ui-price-text:var(--cd-on-gold);--accent-deep:var(--cd-on-gold);--ink:var(--cd-on-gold);--ink-soft:var(--cd-on-gold);border-radius:var(--r-control);}
html[data-card-design="bento"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-producer{color:var(--ink);margin:0;}
html[data-card-design="bento"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row{order:9;margin:0;align-self:stretch;}
html[data-card-design="bento"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not(.in-cart):not(.is-open) > .qty-row{grid-column:2;padding:0;}
html[data-card-design="bento"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not(.in-cart):not(.is-open) > .qty-row > :not(.plus){display:none;}
html[data-card-design="bento"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not(.in-cart):not(.is-open) > .qty-row > .plus{width:3.25rem;height:100%;min-height:3.25rem;border-radius:var(--r-control);}
/* קטלוג: thin lines only: the whole grid shares its rules, no boxes and no shadows. */
html[data-card-design="ledger"]{--cd-r:0px;--cd-ir:0px;--cd-pad:12px;--cd-bd:1px solid var(--ink-soft);--cd-ibg:transparent;--cd-blend:multiply;--cd-ta:start;--cd-as:flex-start;--cd-nw:500;--cd-pw:500;--cd-ps:1.125rem;--cd-ar:1/1;--cd-ip:4%;}
html[data-card-design="ledger"]:not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel){gap:0;}
html[data-card-design="ledger"]:not([data-layout-catalog]) #catalog .product-grid:not(.product-carousel) > .card.card{margin:0 -1px -1px 0;}
html[data-card-design="ledger"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{order:-2;min-height:2.6em;}
html[data-card-design="ledger"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{order:-1;}
html[data-card-design="ledger"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):has(> .product-details-open) > .card-name{margin-inline-end:2.75rem;}
html[data-card-design="ledger"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row > .plus{background:transparent;color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink);border-radius:0;}
/* מחירון: a printed price list: small round photos, rows on dotted lines. */
html[data-card-design="menu"]{--cd-r:0px;--cd-bd:none;--cd-pad:8px;--cd-ip:0px;--cd-fit:cover;--cd-ta:start;--cd-as:flex-start;--cd-nf:var(--font-display);--cd-nw:400;--cd-ns:1.0625rem;--cd-ps:1.0625rem;--cd-ir:50%;}
html[data-card-design="menu"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase){border-block-end:2px dotted var(--ink-soft);}
/* יוקרה: a jewellery window: a tall photo inside a fine frame, centred quiet type, the add a line of words. */
html[data-card-design="luxe"]{--cd-bd:1px solid var(--cd-mix);--cd-pad:10px;--cd-r:0px;--cd-ar:3/4;--cd-fit:cover;--cd-ip:0px;--cd-ir:0px;--cd-ibg:#fff;--cd-nf:var(--font-display);--cd-nw:400;--cd-ns:1rem;--cd-pw:400;--cd-pf:var(--font-display);--cd-ps:1rem;--cd-im:0 0 14px;}
html[data-card-design="luxe"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img::after{content:"";position:absolute;inset:8px;border:1px solid var(--cd-mix);pointer-events:none;}
html[data-card-design="luxe"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row > .plus{background:transparent;color:var(--ink);box-shadow:none;}
html[data-card-design="luxe"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not(.in-cart):not(.is-open) > .qty-row > .plus::after{border-block-end:1px solid currentColor;padding-block-end:2px;}
/* פופ: a comic panel: heavy outlines, a hard shadow, the photo on white above a loud ground, a square add with its own shadow. */
html[data-card-design="retro"]{--cd-bd:3px solid var(--ink);--cd-r:0px;--cd-ir:0px;--cd-sh:7px 7px 0 var(--ink);--cd-pad:0px;--cd-pad-x:10px;--cd-pad-end:10px;--cd-ar:1/1;--cd-nw:800;--cd-ns:1.0625rem;--cd-ta:start;--cd-as:flex-start;--cd-im:0;--cd-ibg:#fff;--cd-ip:0px;--cd-fit:cover;--cd-ps:1.375rem;--cd-pw:900;}
html[data-card-design="retro"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{border-block-end:3px solid var(--ink);}
html[data-card-design="retro"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{margin:10px 10px 2px;}
html[data-card-design="retro"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > :is(.price-tag[data-price-line],.deal-was,.offer-regular-price,.card-marks,.card-producer){margin-inline-start:10px;}
html[data-card-design="retro"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row{margin:6px 10px 12px;margin-inline-start:auto;}
html[data-card-design="retro"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row > .plus{border-radius:0;box-shadow:4px 4px 0 var(--ink);}
html[data-card-design="retro"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .deal-tag{rotate:-4deg;}
/* A centred card: the lone «+» in the middle, not offset by the stepper's hidden parts. */
:is(html[data-card-design="receipt"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="float"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="circle"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="arch"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase)):not(.in-cart):not(.is-open) > .qty-row > :not(.plus){display:none;}
html[data-card-design="cover"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):has(> .product-details-open) > .card-name{margin-inline-end:2.75rem;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):has(> .product-details-open) > :is(.card-name,.price-tag,.deal-was,.offer-regular-price,.card-producer,.variant-picker){margin-inline-end:2.75rem;}
html[data-card-design="bignum"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase).boutique-card > .price-tag{width:fit-content;max-width:calc(100% - 2.75rem);align-self:flex-start;}
html[data-card-design="hangtag"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > .boutique-favorite{top:8px;bottom:auto;left:8px;right:auto;}
html[data-card-design="hangtag"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase).boutique-card > .card-img::after{content:none;}
html[data-card-design="bento"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase).boutique-card{display:flex;gap:6px;}
/* 4. «כפתור רחב» (addControl "wide"): a full-width button with the words and a basket, then a full-width stepper. Any card. */
html[data-add-control="wide"] .card[data-key]:not(.rich-product-purchase) > .qty-row{align-self:stretch;max-width:none;margin-inline:0;justify-content:space-between;}
html[data-add-control="wide"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row{padding:0;justify-content:center;}
html[data-add-control="wide"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > :not(.plus){display:none;}
html[data-add-control="wide"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus{flex:1 1 auto;width:auto;min-width:0;min-height:44px;margin:0;padding:0 8px;gap:6px;font-size:0;border-radius:var(--r-control);}
html[data-add-control="wide"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus::before{content:"";flex:none;width:1.125rem;height:1.125rem;background:currentColor;-webkit-mask:var(--cd-basket) center/contain no-repeat;mask:var(--cd-basket) center/contain no-repeat;}
html[data-add-control="wide"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus::after{content:var(--add-words);font-family:var(--font-body),sans-serif;font-size:.875rem;font-weight:700;line-height:1.2;white-space:nowrap;}
html[data-add-control="wide"]{--cd-basket:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 11.2h10.8L20.5 8H6.6'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.4'/%3E%3Ccircle cx='17' cy='19.5' r='1.4'/%3E%3C/svg%3E");}
/* card-control.css */
/* The card's add control beyond «+» and the stepper (theme.productAppearance addControl, after, lastItem,
sizeShape; dealStyle's shapes and dealText's words are below). app/card-control.js writes the price, the
amount, the line's total and the last-one mark; every button is still the card's own − and +, so the cart,
the unit choice, the sizes and a sold-out card behave as they always did. No key on : none of this
matches, and the card draws as before.
Fills: the «+»'s own (--ui-qty-plus-bg / -text, the owner's colours), or the ink on the paper for the dark
controls; a sold-out card greys them (.is-oos, as theme.css does the stepper). Targets stay 44px. */
:root{--cc-add:"הוספה";--cc-to-cart:"לסל";}
html[lang="en"], html.translated-ltr{--cc-add:"Add";--cc-to-cart:"To cart";}
html[lang="fr"]{--cc-add:"Ajouter";--cc-to-cart:"Au panier";}
html[lang="ru"]{--cc-add:"Добавить";--cc-to-cart:"В корзину";}
html[lang="ar"]{--cc-add:"إضافة";--cc-to-cart:"إلى السلة";}
html[data-add-control], html[data-after]{
--cc-cart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 11.2h10.8L20.5 8H6.6'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.4'/%3E%3Ccircle cx='17' cy='19.5' r='1.4'/%3E%3C/svg%3E");
--cc-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
}
html[data-last-item="trash"]{
--cc-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4.5h6V7M6.5 7l1 13h9l1-13M10 11v5.5M14 11v5.5'/%3E%3C/svg%3E");
}
.card[data-key]:not(.rich-product-purchase) > .qty-row{--cc-bg:var(--ui-qty-plus-bg, var(--primary)); --cc-fg:var(--ui-qty-plus-text, var(--paper)); --cc-dark:var(--ink); --cc-light:var(--paper);}
.card.is-oos[data-key]:not(.rich-product-purchase) > .qty-row{--cc-bg:var(--paper-dim); --cc-fg:var(--ink-soft); --cc-dark:var(--paper-dim); --cc-light:var(--ink-soft);}
/* ---- Before the first tap: the row is the control, the − and the number wait ---- */
html:is([data-add-control="cartIcon"],[data-add-control="pricebtn"],[data-add-control="pricecart"],[data-add-control="buynow"],[data-add-control="qtyrow"],[data-add-control="pricebar"]) .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row{
align-self:stretch; max-width:none; margin-inline:0; padding:0; gap:8px; justify-content:space-between; align-items:center; background:transparent;
}
html:is([data-add-control="cartIcon"],[data-add-control="pricebtn"],[data-add-control="pricecart"],[data-add-control="buynow"],[data-add-control="qtyrow"],[data-add-control="pricebar"]) .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > :not(.plus){display:none;}
html:is([data-add-control="cartIcon"],[data-add-control="pricebtn"],[data-add-control="pricecart"],[data-add-control="buynow"],[data-add-control="qtyrow"],[data-add-control="pricebar"]) .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus{
margin:0; padding:0; font-size:0; line-height:1; background:var(--cc-bg); color:var(--cc-fg); box-shadow:none; gap:6px;
}
/* The price beside the button (and, once in the cart, beside the counter): the card's own price line gives way. */
html:is([data-add-control="cartIcon"],[data-add-control="pricecart"],[data-add-control="buynow"],[data-add-control="pricebtn"],[data-add-control="pricebar"]) .card[data-key]:not(.rich-product-purchase) > .qty-row[data-cc-price]::before{
content:attr(data-cc-price); flex:1 1 auto; min-width:0; order:-1; align-self:center;
padding:1px 4px; border-radius:var(--r-chip); background:var(--ui-price-bg, transparent); color:var(--ui-price-text, var(--accent-deep, var(--primary)));
font-family:var(--font-body), sans-serif; font-size:1rem; font-weight:800; line-height:1.25; text-align:start;
font-variant-numeric:tabular-nums; unicode-bidi:isolate; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
html:is([data-add-control="pricebtn"],[data-add-control="pricebar"]) .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row::before{content:none;}
html :is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key][data-cc-priced] > .price-tag[data-price-line]{display:none;}
/* «סל קטן»: a round cart beside the price. */
html[data-add-control="cartIcon"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus{width:44px; height:44px; flex:none; border-radius:50%;}
html[data-add-control="cartIcon"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus::after{
content:""; width:1.25rem; height:1.25rem; background:currentColor; -webkit-mask:var(--cc-cart) center/contain no-repeat; mask:var(--cc-cart) center/contain no-repeat;
}
html[data-add-control="cartIcon"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row:not([data-cc-price]){justify-content:center;}
/* «מחיר בכפתור»: one dark button that says what the tap adds and for how much. */
html[data-add-control="pricebtn"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus{
flex:1 1 auto; width:auto; min-width:0; min-height:44px; padding:0 10px; border-radius:var(--r-control); background:var(--cc-dark); color:var(--cc-light);
}
html[data-add-control="pricebtn"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus::after{
content:var(--cc-add) " · " attr(data-cc-price); font-family:var(--font-body), sans-serif; font-size:0.875rem; font-weight:700; line-height:1.2;
font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
html[data-add-control="pricebtn"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus:not([data-cc-price])::after{content:var(--add-words);}
/* «מחיר וסל»: the price, and a short «לסל» in the button's colour. */
html[data-add-control="pricecart"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus{
flex:none; width:auto; min-width:44px; min-height:44px; padding:0 14px; border-radius:var(--r-control);
}
html[data-add-control="pricecart"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus::after{
content:var(--cc-to-cart); font-family:var(--font-body), sans-serif; font-size:0.875rem; font-weight:700; line-height:1.2; white-space:nowrap;
}
html[data-add-control="pricecart"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row:not([data-cc-price]) > .plus{flex:1 1 auto;}
/* «כפתור עם חץ»: the price, and a dark round arrow toward the reading direction. */
html[data-add-control="buynow"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus{width:44px; height:44px; flex:none; border-radius:50%; background:var(--cc-dark); color:var(--cc-light);}
html[data-add-control="buynow"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus::after{
content:""; width:1.25rem; height:1.25rem; background:currentColor; -webkit-mask:var(--cc-arrow) center/contain no-repeat; mask:var(--cc-arrow) center/contain no-repeat;
}
html:is([dir="ltr"], .translated-ltr)[data-add-control="buynow"] .card[data-key] > .qty-row > .plus::after{transform:scaleX(-1);}
html[data-add-control="buynow"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row:not([data-cc-price]){justify-content:center;}
/* «כמות וכפתור»: what one tap adds («1 ק״ג»), and «הוספה». */
html[data-add-control="qtyrow"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row[data-cc-amount]::before{
content:attr(data-cc-amount); flex:none; order:-1; padding-inline:4px; color:var(--ink);
font-family:var(--font-body), sans-serif; font-size:0.875rem; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; unicode-bidi:isolate; white-space:nowrap;
}
html[data-add-control="qtyrow"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus{
flex:1 1 auto; width:auto; min-width:0; min-height:44px; padding:0 10px; border-radius:var(--r-control);
}
html[data-add-control="qtyrow"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus::after{
content:var(--cc-add); font-family:var(--font-body), sans-serif; font-size:0.875rem; font-weight:700; line-height:1.2; white-space:nowrap;
}
/* «פס מחיר»: the whole bar is the button, a soft wash of the button's colour, the price at its start and a round + at its end. */
html[data-add-control="pricebar"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus{
flex:1 1 auto; width:auto; min-width:0; min-height:44px; padding:0 4px 0 4px; padding-inline-start:12px; justify-content:space-between;
border-radius:var(--r-control); background:var(--paper-dim); color:var(--ink);
}
@supports (background:color-mix(in srgb, red 50%, blue)){
html[data-add-control="pricebar"] .card[data-key]:not(.is-oos):not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus{background:color-mix(in srgb, var(--cc-bg) 12%, var(--surface, var(--paper)));}
}
html[data-add-control="pricebar"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus::before{
content:attr(data-cc-price); min-width:0; color:var(--ui-price-text, var(--accent-deep, var(--primary)));
font-family:var(--font-body), sans-serif; font-size:1rem; font-weight:800; line-height:1.25; font-variant-numeric:tabular-nums; unicode-bidi:isolate;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
html[data-add-control="pricebar"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus:not([data-cc-price])::before{content:var(--cc-add); color:var(--ink); font-size:0.875rem;}
html[data-add-control="pricebar"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus::after{
content:"+"; flex:none; display:flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:50%;
background:var(--cc-bg); color:var(--cc-fg); font-size:1.25rem; font-weight:700; line-height:1;
}
html[data-add-control="pricebar"] .card.is-oos[data-key]:not(.in-cart):not(.rich-product-purchase) > .qty-row > .plus{background:var(--paper-dim); color:var(--ink-soft);}
html[data-add-control="pricebar"] .card.is-oos[data-key]:not(.in-cart):not(.rich-product-purchase) > .qty-row > .plus::before{color:var(--ink-soft);}
/* ---- In the cart, with the price kept beside the counter ---- */
html:is([data-add-control="cartIcon"],[data-add-control="pricebtn"],[data-add-control="pricecart"],[data-add-control="buynow"],[data-add-control="pricebar"]) .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row[data-cc-price]{
align-self:stretch; max-width:none; margin-inline:0; flex-wrap:wrap; gap:6px 8px; background:transparent; padding:0;
}
html:is([data-add-control="cartIcon"],[data-add-control="pricebtn"],[data-add-control="pricecart"],[data-add-control="buynow"],[data-add-control="pricebar"]) .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row[data-cc-price] > .qty-value{flex:none; width:2.75rem; min-width:0;}
html:is([data-add-control="cartIcon"],[data-add-control="pricebtn"],[data-add-control="pricecart"],[data-add-control="buynow"],[data-add-control="pricebar"]) .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row[data-cc-price] .qty-input{min-width:0;}
@container shopcard (max-width:209.98px){
html[data-add-control] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row[data-cc-price]::before{flex-basis:100%; text-align:center;}
html[data-add-control] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row[data-cc-price]{justify-content:center;}
}
/* ---- «אחרי הלחיצה» (after): what the control becomes in the cart ---- */
/* «מונה קטן»: one capsule in the button's colour, hugging its three parts. */
html[data-after="compact"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row{
flex:none; flex-wrap:nowrap; width:max-content; max-width:100%; margin-inline:auto; align-self:center; gap:0; padding:0;
border-radius:999rem; background:var(--cc-bg); color:var(--cc-fg);
}
html[data-after="compact"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row::before{content:none;}
html[data-after="compact"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row > .qty-btn{
width:44px; height:44px; margin:0; padding:0; border-radius:999rem; background:transparent; color:inherit; box-shadow:none;
}
html[data-after="compact"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row > .qty-btn.minus::before{content:none;}
html[data-after="compact"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row > .qty-value{flex:none; width:2.75rem; min-width:0; color:inherit;}
html:is([data-after="compact"],[data-after="total"]) .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row .qty-input{min-width:0;}
html[data-after="compact"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row :is(.qty-input, .qty-unit){color:inherit;}
/* «מונה וסכום»: a dark capsule, the number and the line's total between − and +; on a narrow card the total
goes under the number. */
html[data-after="total"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row{
align-self:stretch; max-width:none; margin-inline:0; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:0 4px; padding:0;
border-radius:var(--r-control); background:var(--cc-dark); color:var(--cc-light);
}
html[data-after="total"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row::before{content:none;}
html[data-after="total"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row > .qty-btn{
width:44px; height:44px; margin:0; padding:0; border-radius:var(--r-control); background:transparent; color:inherit; box-shadow:none;
}
html[data-after="total"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row > .qty-btn.minus{order:0;}
html[data-after="total"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row > .qty-btn.minus::before{content:none;}
html[data-after="total"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row > .qty-value{order:1; flex:none; width:2.75rem; min-width:0; color:inherit;}
html[data-after="total"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row :is(.qty-input, .qty-unit){color:inherit;}
html[data-after="total"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row > .qty-btn.plus{order:3;}
html[data-after="total"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row[data-cc-total]::after{
content:attr(data-cc-total); order:2; flex:1 1 auto; min-width:0; text-align:center;
font-family:var(--font-body), sans-serif; font-size:0.9375rem; font-weight:800; line-height:1.2; font-variant-numeric:tabular-nums; unicode-bidi:isolate;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@container shopcard (max-width:209.98px){
html[data-after="total"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row > .qty-value{flex:1 1 0; width:auto; min-width:0;}
html[data-after="total"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row[data-cc-total]::after{order:4; flex-basis:100%; padding-block-end:6px; font-size:0.8125rem;}
}
/* «כפתורים נפרדים»: − and + apart at the row's two ends, both filled; the number in a ring between them. */
html[data-after="split"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row{
align-self:stretch; max-width:none; margin-inline:0; flex-wrap:wrap; justify-content:space-between; gap:6px 8px; padding:0; background:transparent;
}
html[data-after="split"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row > .qty-btn{
width:44px; height:44px; margin:0; padding:0; border-radius:var(--r-control); background:var(--cc-bg); color:var(--cc-fg); box-shadow:none;
}
html[data-after="split"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row > .qty-btn.minus::before{content:none;}
html[data-after="split"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row > .qty-value{
flex:1 1 0; min-width:2.25rem; min-height:44px; border-radius:var(--r-control); box-shadow:inset 0 0 0 1.5px var(--cc-bg); background:var(--surface, var(--paper)); color:var(--ink);
}
html[data-after="split"] .card[data-key].in-cart:not(.rich-product-purchase) > .qty-row[data-cc-price]::before{flex-basis:100%;}
/* ---- «כשנשאר אחד» «פח»: the − on the last step is a bin ---- */
html[data-last-item="trash"] .card[data-key][data-cc-last].in-cart:not(.rich-product-purchase) > .qty-row > .qty-btn.minus{font-size:0;}
html[data-last-item="trash"] .card[data-key][data-cc-last].in-cart:not(.rich-product-purchase) > .qty-row > .qty-btn.minus::after{
content:""; width:1.125rem; height:1.125rem; background:currentColor; -webkit-mask:var(--cc-trash) center/contain no-repeat; mask:var(--cc-trash) center/contain no-repeat;
}
/* ---- «צורת המידות» (sizeShape): the «גדלים ומחירים» chips ---- */
html:is([data-size-shape="circle"],[data-size-shape="square"]) .variant-picker.size-chips{gap:8px;}
html:is([data-size-shape="circle"],[data-size-shape="square"]) .size-chip{flex:0 0 auto; width:2.875rem; min-width:0; max-width:none; padding:0 2px; font-size:0.8125rem; font-weight:700;}
html[data-size-shape="circle"] .size-chip{border-radius:50%;}
html[data-size-shape="square"] .size-chip{border-radius:var(--r-chip, 4px);}
/* Too small for the price: it stays for a screen reader; the card's price is the chosen size's. */
html:is([data-size-shape="circle"],[data-size-shape="square"]) .size-chip-price{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
html[data-size-shape="pill"] .size-chip{flex-direction:row; gap:4px; height:2.75rem; padding:0 14px; border-radius:999rem;}
html[data-size-shape="pill"] .size-chip-sep{display:inline;}
html[data-size-shape="line"] .size-chip{border:0; border-radius:0; background:transparent; box-shadow:inset 0 -1px 0 var(--line);}
html[data-size-shape="line"] .size-chip[aria-pressed="true"]{background:transparent; color:var(--ink); box-shadow:inset 0 -3px 0 var(--primary);}
/* ---- «תג מבצע» (dealStyle) shapes: the offer's sticker on the photo ----
כוכב / עיגול: a round seal (a tier's two-line wording keeps the plain sticker); תווית: a paper label with
its hole, in the offer's colour; חותמת: a tilted stamp; אדום בולט: solid red. The offer kind's colour
(theme.css .deal-tag-) stays, except «אדום בולט». A card price recipe restyles .price-tag with
!important (product-appearance.css), so these take their turn the way «סרט אלכסוני» does. */
:is(#catalog,#dealsStrip) .card .deal-tag{--cc-deal:var(--danger, #B93632);}
:is(#catalog,#dealsStrip) .card .deal-tag-bundle{--cc-deal:var(--ui-qty-plus-bg, var(--accent-deep));}
:is(#catalog,#dealsStrip) .card .deal-tag-tier{--cc-deal:var(--ui-price-bg, var(--gold, #7A5C24));}
html:not([data-a11y-contrast="1"]):is([data-deal-style="burst"],[data-deal-style="circle"]) :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag:not(.deal-tag-tier),
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card:is([data-deal-style="burst"],[data-deal-style="circle"]) .deal-tag:not(.deal-tag-tier){
width:clamp(3.5rem, 30cqi, 4.75rem); max-width:none; aspect-ratio:1; padding:0 4px; display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; background:var(--cc-deal)!important; color:#fff!important; box-shadow:none!important;
}
html:not([data-a11y-contrast="1"]):is([data-deal-style="burst"],[data-deal-style="circle"]) :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag:not(.deal-tag-tier) :is(.deal-tag-label,.deal-tag-price),
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card:is([data-deal-style="burst"],[data-deal-style="circle"]) .deal-tag:not(.deal-tag-tier) :is(.deal-tag-label,.deal-tag-price){max-width:100%; margin:0; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
html:not([data-a11y-contrast="1"]):is([data-deal-style="burst"],[data-deal-style="circle"]) :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag:not(.deal-tag-tier) .deal-tag-price,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card:is([data-deal-style="burst"],[data-deal-style="circle"]) .deal-tag:not(.deal-tag-tier) .deal-tag-price{font-size:clamp(0.75rem, 6.5cqi, 0.9375rem);}
html:not([data-a11y-contrast="1"]):is([data-deal-style="burst"],[data-deal-style="circle"]) :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag:not(.deal-tag-tier) .price-main,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card:is([data-deal-style="burst"],[data-deal-style="circle"]) .deal-tag:not(.deal-tag-tier) .price-main{flex-wrap:nowrap; white-space:nowrap;}
html:not([data-a11y-contrast="1"])[data-deal-style="burst"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag:not(.deal-tag-tier),
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="burst"] .deal-tag:not(.deal-tag-tier){
border-radius:0!important; transform:rotate(-8deg)!important; padding:0 12%;
clip-path:polygon(50% 0,61% 14%,79% 9%,79% 27%,96% 34%,86% 50%,96% 66%,79% 73%,79% 91%,61% 86%,50% 100%,39% 86%,21% 91%,21% 73%,4% 66%,14% 50%,4% 34%,21% 27%,21% 9%,39% 14%);
}
html:not([data-a11y-contrast="1"])[data-deal-style="circle"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag:not(.deal-tag-tier),
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="circle"] .deal-tag:not(.deal-tag-tier){border-radius:50%!important; transform:none!important; padding:0 8%;}
html:not([data-a11y-contrast="1"])[data-deal-style="tag"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="tag"] .deal-tag{
/* The hole on the physical right, the corner the sticker always holds (theme.css .price-tag). */
transform:none!important; border-radius:var(--r-chip)!important; padding-right:1.125rem; color:var(--cc-deal)!important;
background:radial-gradient(circle at calc(100% - 0.5625rem) 50%, var(--cc-deal) 0 0.1875rem, transparent 0.21rem), var(--surface, var(--paper))!important;
box-shadow:inset 0 0 0 1.5px var(--cc-deal), 0 2px 6px rgba(20,25,20,.18)!important;
}
html:not([data-a11y-contrast="1"])[data-deal-style="stamp"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="stamp"] .deal-tag{
transform:rotate(-8deg)!important; border-radius:var(--r-chip)!important; padding:6px 10px; color:var(--cc-deal)!important; background:var(--surface, var(--paper))!important;
box-shadow:inset 0 0 0 2px var(--cc-deal), inset 0 0 0 4px var(--surface, var(--paper)), inset 0 0 0 5px var(--cc-deal)!important;
}
html:not([data-a11y-contrast="1"])[data-deal-style="stamp"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag .deal-tag-label,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="stamp"] .deal-tag .deal-tag-label{font-weight:800;}
html:not([data-a11y-contrast="1"])[data-deal-style="solid"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="solid"] .deal-tag{
transform:none!important; border-radius:0.125rem!important; background:var(--danger, #B93632)!important; color:#fff!important; box-shadow:none!important;
}
html:not([data-a11y-contrast="1"])[data-deal-style="solid"] :is(#catalog,#dealsStrip) .card:not([data-deal-style]) .deal-tag .deal-tag-label,
html:not([data-a11y-contrast="1"]) :is(#catalog,#dealsStrip) .card[data-deal-style="solid"] .deal-tag .deal-tag-label{font-weight:800;}
/* A narrow card (two to a row on a phone): the price a step smaller, «מחיר בכפתור» the price and a + only. */
@container shopcard (max-width:209.98px){
html[data-add-control] .card[data-key]:not(.rich-product-purchase) > .qty-row[data-cc-price]::before{font-size:0.875rem; padding-inline:0; white-space:normal; overflow:visible; line-height:1.15;} /* a price never cut: two lines before an ellipsis */
html[data-add-control="pricecart"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus{padding:0 10px;}
html[data-add-control="pricebtn"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus[data-cc-price]::before{content:"+"; font-size:1.125rem; font-weight:700; line-height:1;}
html[data-add-control="pricebtn"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus[data-cc-price]::after{content:attr(data-cc-price);}
html[data-add-control="pricebar"] .card[data-key]:not(.in-cart):not(.is-open):not(.rich-product-purchase) > .qty-row > .plus::before{font-size:0.875rem;}
}
/* category-head.css */
/* «ראש קטגוריה» (app/category-head.js writes the data-ch-* attributes; no attribute = nothing here applies).
Colours: the category's --accent-* shades and --ch-fg / --ch-bg / --ch-ink / --ch-mark, which the script
picks for 4.5:1 against the ground they sit on. High-contrast mode (data-a11y-contrast) keeps theme.css's
black-on-white heading: every painted ground below steps aside for it. RTL first; [dir=ltr] flips arrows
and gradients. Sizes in rem (the owner's text scale), title sizes times --part-title-scale. */
/* ---------- the parts every style may carry ---------- */
#catalog .category-section[data-ch-style] > .category-head,
#catalog .category-section[data-ch-all] > .category-head{flex-wrap:wrap; row-gap:8px;}
#catalog .category-section[data-ch-style] > .category-head > h2{min-width:0; overflow-wrap:anywhere;}
#catalog .category-section[data-ch-count="show"] > .category-head > .category-count{display:inline-flex; align-items:center;}
#catalog .category-section[data-ch-icon="hide"] > .category-head > .category-icon{display:none;}
/* «לכל המוצרים»: a 44px target at the row's far end. */
#catalog .category-head > .ch-all{display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none; order:20;
min-height:44px; min-width:44px; margin-inline-start:auto; padding:0 6px; box-sizing:border-box;
color:var(--ch-ink, var(--accent-deep, var(--primary))); font:600 0.9375rem/1.2 var(--font-body); text-decoration:none; white-space:nowrap;}
#catalog .category-head > .ch-all svg{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
html[dir="ltr"] #catalog .category-head > .ch-all svg, html.translated-ltr #catalog .category-head > .ch-all svg{transform:scaleX(-1);}
#catalog .category-section[data-ch-count="show"] > .category-head > .ch-all{margin-inline-start:0;}
#catalog .category-head > .ch-all[data-ch-all="link"]:hover .ch-all-txt{text-decoration:underline; text-underline-offset:.2em;}
#catalog .category-head > .ch-all[data-ch-all="pill"]{padding:0 18px; border:1.5px solid currentColor; border-radius:999px;}
#catalog .category-head > .ch-all[data-ch-all="pill"] svg{display:none;}
#catalog .category-head > .ch-all[data-ch-all="arrow"]{width:44px; padding:0; border:1.5px solid currentColor; border-radius:50%;}
#catalog .category-head > .ch-all[data-ch-all="arrow"] .ch-all-txt{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
#catalog .category-head > .ch-all:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
/* The number of «שורה ממוספרת» and «מספר גדול». */
#catalog .category-head > .ch-num{flex:none; font-variant-numeric:tabular-nums; unicode-bidi:isolate;}
/* ---------- quiet ---------- */
/* «קו מתחת»: a short bar under the name. «קו נמתח»: the same bar under the whole name, drawn once on screen. */
#catalog .category-section:is([data-ch-style="underline"],[data-ch-style="mdraw"]) > .category-head > h2::after{
content:""; display:block; height:3px; width:40px; margin-top:10px; border-radius:3px; background:var(--accent-mid, var(--primary));}
#catalog .category-section[data-ch-style="mdraw"] > .category-head > h2::after{width:100%; height:4px; transform-origin:right center;}
html[dir="ltr"] #catalog .category-section[data-ch-style="mdraw"] > .category-head > h2::after{transform-origin:left center;}
@media (prefers-reduced-motion: no-preference){
html:not([data-motion="off"]):not([data-a11y-motion="1"]) #catalog .category-section[data-ch-style="mdraw"]:not([data-ch-wait]) > .category-head > h2::after{transition:transform .9s cubic-bezier(.23,1,.32,1) .15s;}
html[data-motion="lively"]:not([data-a11y-motion="1"]) #catalog .category-section[data-ch-style="mdraw"]:not([data-ch-wait]) > .category-head > h2::after{transition-duration:1.2s;}
html:not([data-motion="off"]):not([data-a11y-motion="1"]) #catalog .category-section[data-ch-style="mdraw"][data-ch-wait] > .category-head > h2::after{transform:scaleX(0);}
}
/* «פס בצד»: a rule at the start of the row. */
#catalog .category-section[data-ch-style="sidebar"] > .category-head{border-inline-start:4px solid var(--accent-mid, var(--primary)); padding-inline-start:14px;}
/* «ממורכז»: the name between two hairlines. */
#catalog .category-section[data-ch-style="centered"] > .category-head{justify-content:center; text-align:center;}
#catalog .category-section[data-ch-style="centered"] > .category-head::before,
#catalog .category-section[data-ch-style="centered"] > .category-head::after{content:""; flex:1 1 16px; min-width:16px; height:1px; background:var(--accent-mid, var(--line)); opacity:.45;}
#catalog .category-section[data-ch-style="centered"] > .category-head::after{order:10;}
#catalog .category-section[data-ch-style="centered"] > .category-head > .ch-all{order:21; margin-inline-start:0;}
@media (max-width:640px){
#catalog .category-section[data-ch-style="centered"] > .category-head > .ch-all{flex-basis:100%;}
}
/* «שם וקו»: the name, then a line that fades out toward the count and the link. */
#catalog .category-section[data-ch-style="splitline"] > .category-head > h2{flex:0 1 auto;}
#catalog .category-section[data-ch-style="splitline"] > .category-head::after{content:""; order:5; flex:1 1 24px; min-width:24px; height:2px; border-radius:2px;
background:linear-gradient(to left, var(--accent-mid, var(--primary)), transparent);}
html[dir="ltr"] #catalog .category-section[data-ch-style="splitline"] > .category-head::after{background:linear-gradient(to right, var(--accent-mid, var(--primary)), transparent);}
#catalog .category-section[data-ch-style="splitline"] > .category-head > .category-count{order:6; margin-inline-start:0;}
#catalog .category-section[data-ch-style="splitline"] > .category-head > .ch-all{margin-inline-start:0;}
/* ---------- framed and bold (a ground of their own) ---------- */
/* «כמוסה»: the name in a filled capsule. */
html:not([data-a11y-contrast="1"]) #catalog .category-section[data-ch-style="pill"] > .category-head > h2{
background:var(--ch-bg); color:var(--ch-fg); padding:.3em .9em; border-radius:1.1em; font-size:calc(1.25rem * var(--part-title-scale, 1));}
/* «רצועה» (a light band, the name in the category's colour) and «פס מלא» (the colour itself). */
html:not([data-a11y-contrast="1"]) #catalog .category-section:is([data-ch-style="band"],[data-ch-style="solid"]) > .category-head{
background:var(--ch-bg); color:var(--ch-fg); padding:12px 16px; border-radius:var(--r-panel, 14px);}
html:not([data-a11y-contrast="1"]) #catalog .category-section:is([data-ch-style="band"],[data-ch-style="solid"],[data-ch-style="banner"]) > .category-head > :is(h2,.category-count,.ch-all){color:var(--ch-fg);}
#catalog .category-section:is([data-ch-style="band"],[data-ch-style="solid"],[data-ch-style="banner"]) > .category-head > .category-count{background:transparent; border-color:currentColor;}
#catalog .category-section[data-ch-style="solid"] > .category-head{justify-content:center; text-align:center;}
#catalog .category-section[data-ch-style="solid"] > .category-head > .category-icon{box-shadow:none;}
/* «מסגרת עדינה»: a thin frame around the row. */
#catalog .category-section[data-ch-style="frame"] > .category-head{border:1.5px solid var(--accent-mid, var(--line)); border-radius:var(--r-panel, 14px); padding:10px 16px;}
/* «מרקר»: a marker under the lower half of the name; none when it would not read. */
#catalog .category-section[data-ch-style="highlighter"] > .category-head > h2{
background-image:linear-gradient(transparent 52%, var(--ch-mark, transparent) 52%); padding-inline:.15em; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
#catalog .category-section[data-ch-style="highlighter"][data-ch-mark="off"] > .category-head > h2{background-image:none; text-decoration:underline; text-decoration-color:var(--accent-mid, var(--primary)); text-decoration-thickness:4px; text-underline-offset:.2em;}
/* ---------- editorial ---------- */
/* «שורה ממוספרת»: a rule above, the category's number before the name. */
#catalog .category-section[data-ch-style="indexrow"] > .category-head{border-top:1.5px solid var(--ink, #1E2B22); padding-top:12px; align-items:baseline;}
#catalog .category-section[data-ch-style="indexrow"] > .category-head > .ch-num{font-size:0.8125rem; font-weight:600; color:var(--ch-ink, var(--ink-soft));}
/* «מספר גדול»: a large number and a slash at the row's end. */
#catalog .category-section[data-ch-style="bignum"] > .category-head > .ch-num{order:10; margin-inline-start:auto; display:inline-flex; align-items:center; gap:14px;
font:400 2.75rem/1 var(--font-quote, var(--font-display)); color:var(--accent-mid, var(--primary));}
#catalog .category-section[data-ch-style="bignum"] > .category-head > .ch-num::before{content:""; width:1.5px; height:.9em; background:currentColor; transform:rotate(18deg); opacity:.6;}
#catalog .category-section[data-ch-style="bignum"] > .category-head > :is(.category-count,.ch-all){order:21; margin-inline-start:0;}
/* «אותיות קלאסיות»: the name larger, in the shop's quote face, light. */
#catalog .category-section[data-ch-style="serif"] > .category-head > h2{font-family:var(--font-quote, var(--font-display)), serif; font-weight:500; line-height:1.15;
font-size:calc(clamp(1.75rem, 3.4vw, 2.375rem) * var(--part-title-scale, 1));}
/* ---------- with the category's photo ---------- */
#catalog .category-head > .ch-photo{display:block; overflow:hidden;}
#catalog .category-head > .ch-photo > img{display:block; width:100%; height:100%; object-fit:cover;}
#catalog .category-section:is([data-ch-style="banner"],[data-ch-style="imgabove"]):not([data-ch-nophoto]) > .category-head > .category-icon{display:none;}
/* «באנר»: the name over the photo, on a dark wash that keeps white text at 4.5:1 over any photo. */
#catalog .category-section[data-ch-style="banner"] > .category-head{position:relative; isolation:isolate; min-height:150px; align-items:flex-end; padding:16px 18px; border-radius:var(--r-panel, 14px); overflow:hidden;}
#catalog .category-section[data-ch-style="banner"]:not([data-ch-nophoto]) > .category-head{--ch-fg:#ffffff; color:#ffffff;}
#catalog .category-section[data-ch-style="banner"] > .category-head > .ch-photo{position:absolute; inset:0; z-index:-1;}
#catalog .category-section[data-ch-style="banner"] > .category-head > .ch-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.18) 100%);}
html:not([data-a11y-contrast="1"]) #catalog .category-section[data-ch-style="banner"][data-ch-nophoto] > .category-head{background:var(--ch-bg); color:var(--ch-fg); min-height:0;}
@media (max-width:640px){ #catalog .category-section[data-ch-style="banner"] > .category-head{min-height:120px;} }
/* «תמונה מעל»: a wide strip of the photo above the name. */
#catalog .category-section[data-ch-style="imgabove"] > .category-head > .ch-photo{order:-1; flex:0 0 100%; aspect-ratio:4 / 1; max-height:180px; border-radius:var(--r-panel, 14px); background:var(--accent-tint, var(--paper-dim));}
@media (max-width:640px){ #catalog .category-section[data-ch-style="imgabove"] > .category-head > .ch-photo{aspect-ratio:3 / 1;} }
/* product-look.css */
/* «עיצוב המוצר»: one product's own look (item.card, app/card-overrides.js;
owner 2026-10-28). decorate() writes data-pl- on that card only; the
shop's and the category's rules skip a card that names its own
(:not([data-pl-…]) in theme.css, effects-controls.css, storefront-cards.css
and category-look.js), so these need no !important. No attribute, no
change: every other card draws as before. The colour, the fill and the
«+» are variables on the card's style (--accent-*, --ui-card-bg, --ink). */
/* «גודל השם» */
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key][data-pl-name-size="large"]:not(.boutique-card) > .card-name{font-size:1.125rem; line-height:1.3;}
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key][data-pl-name-size="large"] > .price-tag[data-price-line]{font-size:1.25rem;}
@media (max-width:640px){
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key][data-pl-name-size="large"]:not(.boutique-card) > .card-name{font-size:1rem;}
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key][data-pl-name-size="large"] > .price-tag[data-price-line]{font-size:1.125rem;}
}
@container shopcard (max-width:109.98px){
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key][data-pl-name-size="large"]:not(.boutique-card) > .card-name{font-size:clamp(0.6875rem, 13cqi, 0.875rem);}
}
/* «גודל השם» on a slider (a number, app/size-scale.js): the name at its share of the card's
normal size, the price under it one step (0.125rem) larger and never under its own size (#623). */
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key][data-pl-name-size="scale"]:not(.boutique-card) > .card-name{font-size:calc(0.875rem * var(--pl-name-scale, 1)); line-height:1.3;}
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key][data-pl-name-size="scale"] > .price-tag[data-price-line]{font-size:max(1.125rem, calc(0.875rem * var(--pl-name-scale, 1) + 0.125rem));}
@media (max-width:640px){
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key][data-pl-name-size="scale"]:not(.boutique-card) > .card-name{font-size:calc(0.8125rem * var(--pl-name-scale, 1));}
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key][data-pl-name-size="scale"] > .price-tag[data-price-line]{font-size:max(1rem, calc(0.8125rem * var(--pl-name-scale, 1) + 0.125rem));}
}
@container shopcard (max-width:109.98px){
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key][data-pl-name-size="scale"]:not(.boutique-card) > .card-name{font-size:clamp(0.6875rem, calc(13cqi * var(--pl-name-scale, 1)), calc(0.875rem * var(--pl-name-scale, 1)));}
}
/* «צורת התמונה», «הצגת התמונה», «מיקוד». A size of its own (data-card-span) keeps its photo. */
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key][data-pl-shape]:not([data-card-span]):not(.rich-product-purchase) > .card-img{height:auto; min-height:0;}
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key][data-pl-shape="square"]:not([data-card-span]):not(.rich-product-purchase) > .card-img{aspect-ratio:1 / 1;}
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key][data-pl-shape="wide"]:not([data-card-span]):not(.rich-product-purchase) > .card-img{aspect-ratio:4 / 3;}
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-key][data-pl-shape="portrait"]:not([data-card-span]):not(.rich-product-purchase) > .card-img{aspect-ratio:3 / 4;}
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card.card[data-key][data-pl-fit="contain"] .card-img img{object-fit:contain;}
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card.card[data-key][data-pl-fit="cover"] .card-img img{object-fit:cover;}
.card.card[data-key][data-pl-focus="tl"] .card-img img{object-position:0% 0%;}
.card.card[data-key][data-pl-focus="t"] .card-img img{object-position:50% 0%;}
.card.card[data-key][data-pl-focus="tr"] .card-img img{object-position:100% 0%;}
.card.card[data-key][data-pl-focus="l"] .card-img img{object-position:0% 50%;}
.card.card[data-key][data-pl-focus="c"] .card-img img{object-position:50% 50%;}
.card.card[data-key][data-pl-focus="r"] .card-img img{object-position:100% 50%;}
.card.card[data-key][data-pl-focus="bl"] .card-img img{object-position:0% 100%;}
.card.card[data-key][data-pl-focus="b"] .card-img img{object-position:50% 100%;}
.card.card[data-key][data-pl-focus="br"] .card-img img{object-position:100% 100%;}
/* The drawn shapes of «צורת התמונה» (data-img-shape: the product's, the category's or the shop's, card-overrides.js).
Only the picture is rounded: the well stays unclipped, so what lies on the photo (price, flag, tags, the unit pill)
keeps its place and is never cut by the curve. */
.card.card[data-key][data-img-shape]:not([data-card-span]):not(.rich-product-purchase) > .card-img{height:auto; min-height:0; overflow:visible; background:transparent;}
.card.card[data-key][data-img-shape="round"]:not([data-card-span]):not(.rich-product-purchase) > .card-img{aspect-ratio:1 / 1; --img-r:50%;}
.card.card[data-key][data-img-shape="oval"]:not([data-card-span]):not(.rich-product-purchase) > .card-img{aspect-ratio:3 / 4; --img-r:50%;}
.card.card[data-key][data-img-shape="arch"]:not([data-card-span]):not(.rich-product-purchase) > .card-img{aspect-ratio:3 / 4; --img-r:50% 50% var(--radius,16px) var(--radius,16px) / 38% 38% var(--radius,16px) var(--radius,16px);}
.card.card[data-key][data-img-shape="rounded"]:not([data-card-span]):not(.rich-product-purchase) > .card-img{aspect-ratio:1 / 1; --img-r:18%;}
.card.card[data-key][data-img-shape]:not([data-card-span]):not(.rich-product-purchase) > .card-img > :is(img:not(.card-origin-flag), .img-fallback, .fx-photo-swap > img){padding:0; border-radius:var(--img-r); background:var(--ui-card-photo-bg, var(--paper-dim));}
/* «מסגרת התמונה» */
.card.card[data-pl-frame="square"] .card-img{border-radius:0; overflow:hidden;}
.card.card[data-pl-frame="rounded"] .card-img{border-radius:var(--radius,16px); overflow:hidden;}
.card.card[data-pl-frame="arch"] .card-img{border-radius:50% 50% var(--radius,16px) var(--radius,16px); overflow:hidden;}
/* «פינות» and «מסגרת הכרטיס»: the card's own radius step and hairline. */
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-pl-corners="square"]{--r-panel:0px; border-radius:0;}
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-pl-corners="soft"]{--r-panel:10px; border-radius:10px;}
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-pl-corners="round"]{--r-panel:24px; border-radius:24px;}
/* «פינות» on a slider: the card's own radius in px (--pl-radius, a number in item.card.corners). */
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .card.card[data-pl-corners="px"]{--r-panel:var(--pl-radius, 16px); border-radius:var(--pl-radius, 16px);}
.card.card[data-pl-border="none"]:not(.in-cart){border-color:transparent;}
.card.card[data-pl-border="line"]:not(.in-cart){border-color:rgba(107,124,58,0.16);} /* the card's own hairline (theme.css .card) */
.card.card[data-pl-border="strong"]:not(.in-cart){border-color:rgba(35,30,20,0.32); border-color:color-mix(in srgb, var(--ink, #1E2A22) 32%, transparent);}
/* «עומק»: flat is the card's own shadow (theme.css .card); soft and line as the shop's. */
.card.card[data-pl-elevation="soft"]:not(.in-cart){border-color:transparent; box-shadow:0 2px 4px rgba(30,42,34,0.05), 0 12px 28px -10px rgba(30,42,34,0.22);}
.card.card[data-pl-elevation="soft"]:not(.in-cart):hover{box-shadow:0 4px 8px rgba(30,42,34,0.06), 0 24px 48px -16px rgba(30,42,34,0.30);}
.card.card[data-pl-elevation="line"], .card.card[data-pl-elevation="line"]:hover{box-shadow:none;}
/* «מעבר עכבר על הכרטיס», «מעבר עכבר על הכפתור» */
/* "default" is the card's own small lift (theme.css .card:hover): the shop's choice skips this card. */
.card.card[data-pl-hover]:not([data-pl-hover="default"]):is(:hover,:focus-within){transform:none; translate:none;}
@media(hover:hover) and (pointer:fine){
.card.card[data-pl-hover="outline"]:not(.is-oos):is(:hover,:focus-within){outline:2px solid var(--primary); outline-offset:2px;}
.card.card[data-pl-btn-hover="color"] .qty-btn.plus:hover{filter:brightness(.9);}
.card.card[data-pl-btn-hover="shadow"] .qty-btn.plus:hover{box-shadow:0 4px 12px rgba(0,0,0,.2);}
.card.card[data-pl-btn-hover="none"] .qty-btn.plus:hover{transform:none; translate:none; filter:none; box-shadow:none;}
}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
html:not([data-motion="off"]):not([data-a11y-motion="1"]) .card.card[data-pl-hover="lift"]:not(.is-oos):is(:hover,:focus-within){translate:0 -4px; transition:translate .2s ease;}
html:not([data-motion="off"]):not([data-a11y-motion="1"]) .card.card[data-pl-btn-hover="lift"] .qty-btn.plus:hover{translate:0 -2px; transition:translate .2s ease;}
/* «זום לתמונה», «החלפת תמונה» */
html:not([data-motion="off"]):not([data-a11y-motion="1"]) .card.card[data-pl-zoom="on"] .card-img img{transition:scale .5s cubic-bezier(.2,.7,.2,1);}
html:not([data-motion="off"]):not([data-a11y-motion="1"]) .card.card[data-pl-zoom="on"]:hover .card-img img{scale:1.06;}
html:not([data-motion="off"]):not([data-a11y-motion="1"]) .card.card[data-pl-swap="on"]:not(.is-oos):hover .fx-swap-image[data-ready]{opacity:1;}
}
/* The product's own fill or background: its text reads --ink, set by ratio with it. */
.card.card:is([data-pl-bg],[data-pl-background]) .card-name{color:var(--ink);}
/* «רקע הכרטיס» from the bank (item.card.background): a layer first in the card, behind
everything in it (the card isolates its own stacking), drawn by store-backgrounds.css /
part-backgrounds.css as a page area's. The page's own colour does not reach it. */
.card.card[data-pl-background]{isolation:isolate;}
.card-ground-layer{position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; --ui-page-bg:initial;}
html[data-a11y-contrast="1"] .card-ground-layer{display:none;}
/* «כניסה בגלילה» for one card (app/motion.js adds .fx-rv only when nothing asks for stillness). */
@media (prefers-reduced-motion: no-preference){
html:not([data-motion="off"]):not([data-a11y-motion="1"]) .card[data-pl-reveal="on"].fx-rv{opacity:0; translate:0 22px; animation:none;}
html:not([data-motion="off"]):not([data-a11y-motion="1"]) .card[data-pl-reveal="on"].fx-rv.fx-rv-in{opacity:1; translate:0 0; transition:opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--fx-i,0) * 90ms);}
}
/* The product's own page (its sheet, /p/; ShopCardOverrides.pageLook on the dialog):
the photos on the other side, or above everything; the words under the purchase card. */
@media (min-width:641px){ .rich-product-dialog[data-pl-gallery="end"] .rich-product-gallery{order:2;} } /* a phone keeps one column, photos first */
.rich-product-dialog[data-pl-gallery="top"] .rich-product-layout{grid-template-columns:minmax(0,1fr);}
.rich-product-dialog[data-pl-text="below"] .rich-product-information{display:flex; flex-direction:column;}
.rich-product-dialog[data-pl-text="below"] .rich-product-information > .rich-product-purchase{order:-1; margin-bottom:16px;}
/* «צורת הכרטיס» (owner 2026-11-03): one concept, theme.layout.cardShape at the shop, the same values on a
category or a product (data-card-shape). No clipping: only the outline changes, and where the outline
curves into the content a padding keeps price, badges, stepper, flag and heart inside it. No key: no rule. */
:is(#catalog, #dealsStrip) .card.card.card[data-card-shape="card"]{--r-panel:var(--radius, 16px); border-radius:var(--radius, 16px); background:var(--ui-card-bg, var(--paper)); text-align:start;}
:is(#catalog, #dealsStrip) .card.card.card[data-card-shape="sharp"]{--r-panel:0px; border-radius:0; background:var(--ui-card-bg, var(--paper)); box-shadow:none;}
:is(#catalog, #dealsStrip) .card.card.card[data-card-shape="sharp"] .card-img{border-radius:0;}
:is(#catalog, #dealsStrip) .card.card.card[data-card-shape="soft"]{--r-panel:20px; border-radius:20px; background:var(--ui-card-bg, var(--paper));}
:is(#catalog, #dealsStrip) .card.card.card[data-card-shape="pill"], html[data-layout-card-shape="pill"] :is(#catalog, #dealsStrip) .card.card.card:not([data-card-shape]){--r-panel:34px; border-radius:34px; background:var(--ui-card-bg, var(--paper)); padding:14px 12px; overflow:visible;}
:is(#catalog, #dealsStrip) .card.card.card[data-card-shape="pill"] .card-img, html[data-layout-card-shape="pill"] :is(#catalog, #dealsStrip) .card.card.card:not([data-card-shape]) .card-img{border-radius:22px;}
:is(#catalog, #dealsStrip) .card.card.card[data-card-shape="arch"], html[data-layout-card-shape="arch"] :is(#catalog, #dealsStrip) .card.card.card:not([data-card-shape]){--r-panel:var(--radius, 16px); border-radius:50% 50% var(--radius, 16px) var(--radius, 16px) / 26% 26% var(--radius, 16px) var(--radius, 16px); background:var(--ui-card-bg, var(--paper)); padding:26% 0 12px; overflow:visible;}
:is(#catalog, #dealsStrip) .card.card.card[data-card-shape="round"]{--ui-card-bg:transparent; background:transparent; border-width:0; box-shadow:none; text-align:center; overflow:visible;}
:is(#catalog, #dealsStrip) .card.card.card[data-card-shape="round"] .card-img{aspect-ratio:1; width:86%; margin-inline:auto; border-radius:50%; overflow:visible;}
:is(#catalog, #dealsStrip) .card.card.card[data-card-shape="round"] .card-img > img{border-radius:50%;}
:is(#catalog, #dealsStrip) .card.card.card[data-card-shape="frameless"], html[data-layout-card-shape="frameless"] :is(#catalog, #dealsStrip) .card.card.card:not([data-card-shape]){--ui-card-bg:transparent; background:transparent; border-width:0; box-shadow:none; padding-inline:0; overflow:visible;}
/* product-page.css */
/* «דף המוצר»: the forms a product's page opens in (theme.productAppearance.pageForm,
a product's own item.card.page.form; app/card-overrides.js pageForm). The same
sheet (app/rich-content.js) with the same purchase card, complements and
reviews: only where things sit changes. No attribute = the window it always
was; nothing here matches it. With a form, the name and the category sit at
the head of .rich-product-information (rich-content.js), and «גלריה» draws
every photo instead of the thumbnails.
full «עמוד מלא» the whole screen: a tall photo with a rail of photos, a large name
stage «גלריה» the photos one under another on their own ground; the purchase stays beside them
editorial «כתבה» the words first: a big centred name, the description as a lead, then the photo
sheet «מגירה» a narrow drawer from the side (from the bottom on a phone): small photo, name, purchase
Every photo box is sized before it loads (no shift); logical properties only;
motion only on opening, behind the shop's and the shopper's motion switches. */
/* ---------- every form ---------- */
#productDetails[data-pp-form] > .rich-close{float:left;float:inline-end;}
#productDetails[data-pp-form] .rich-product-layout{clear:both;}
#productDetails[data-pp-form] .rich-product-information > .rich-product-category{margin:0 0 6px;}
#productDetails[data-pp-form] .rich-product-information > .rich-product-title{margin:0 0 20px;overflow-wrap:anywhere;}
#productDetails[data-pp-form] .rich-product-photo{display:block;width:100%;height:auto;}
/* ---------- «עמוד מלא» ---------- */
#productDetails[data-pp-form="full"]{inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0;
padding:0 max(20px,calc((100% - 1240px) / 2)) 56px;}
#productDetails[data-pp-form="full"] > .rich-close{margin-block:16px 12px;}
#productDetails[data-pp-form="full"] .rich-product-layout{grid-template-columns:minmax(0,7fr) minmax(300px,5fr);grid-template-rows:repeat(7,auto) 1fr;column-gap:clamp(28px,4vw,64px);row-gap:0;}
#productDetails[data-pp-form="full"] .rich-product-information{display:contents;}
#productDetails[data-pp-form="full"] .rich-product-category{grid-column:1 / -1;grid-row:1;}
#productDetails[data-pp-form="full"] .rich-product-information > .rich-product-title{grid-column:1 / -1;grid-row:2;font-size:clamp(2.25rem,4.4vw,4rem);line-height:1.04;text-wrap:balance;margin:0 0 clamp(20px,3vw,36px);padding-block-end:clamp(16px,2vw,24px);border-block-end:1px solid var(--line);}
#productDetails[data-pp-form="full"] .rich-product-gallery{grid-column:1;grid-row:3 / -1;}
#productDetails[data-pp-form="full"] .rich-product-information > :is(section,.rich-product-purchase){grid-column:2;min-width:0;}
#productDetails[data-pp-form="full"] .rich-product-information > .rich-product-purchase{order:-1;margin:0 0 8px;padding-block-start:0;border:0;}
#productDetails[data-pp-form="full"] .rich-product-gallery:has(> .rich-thumbnails){display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:start;}
#productDetails[data-pp-form="full"] .rich-product-gallery > .rich-product-photo{grid-column:-2;grid-row:1;height:min(68dvh,680px);aspect-ratio:auto;object-fit:contain;
border:0;border-radius:var(--r-panel);background:var(--ui-card-photo-bg,var(--paper-dim,#F2EDE3));}
#productDetails[data-pp-form="full"] .rich-thumbnails{grid-column:1;grid-row:1;flex-direction:column;flex-wrap:nowrap;margin:0;max-height:min(68dvh,680px);overflow-y:auto;}
#productDetails[data-pp-form="full"] .rich-thumbnails button{width:76px;height:76px;flex:none;}
/* ---------- «גלריה» ---------- */
#productDetails[data-pp-form="stage"]{width:min(1360px,calc(100% - 32px));height:calc(100% - 32px);max-width:none;max-height:none;padding:0;}
#productDetails[data-pp-form="stage"] > .rich-close{position:absolute;inset-block-start:16px;inset-inline-end:16px;z-index:1;}
#productDetails[data-pp-form="stage"] .rich-product-layout{grid-template-columns:minmax(0,5fr) minmax(340px,4fr);gap:0;align-items:start;min-height:100%;}
#productDetails[data-pp-form="stage"] .rich-product-gallery{align-self:stretch;display:flex;flex-direction:column;gap:4px;background:var(--ui-card-photo-bg,var(--paper-dim,#F2EDE3));}
#productDetails[data-pp-form="stage"] .rich-product-gallery > .rich-product-photo{aspect-ratio:1;object-fit:contain;border:0;border-radius:0;background:transparent;}
#productDetails[data-pp-form="stage"] .rich-product-information{position:sticky;inset-block-start:0;padding:76px clamp(28px,3.4vw,52px) 40px;}
#productDetails[data-pp-form="stage"] .rich-product-information > .rich-product-title{font-size:clamp(1.75rem,2.5vw,2.5rem);line-height:1.12;}
#productDetails[data-pp-form="stage"] > :is(.complements-row,.shop-reviews){margin-inline:clamp(20px,3.4vw,52px);}
#productDetails[data-pp-form="stage"] > :last-child:is(.complements-row,.shop-reviews){margin-block-end:40px;}
/* ---------- «כתבה» ---------- */
#productDetails[data-pp-form="editorial"]{width:min(860px,calc(100% - 28px));margin:auto;padding:clamp(24px,5vw,64px) clamp(20px,7vw,88px);}
#productDetails[data-pp-form="editorial"] .rich-product-layout{display:flex;flex-direction:column;align-items:stretch;gap:0;}
#productDetails[data-pp-form="editorial"] .rich-product-information{display:contents;}
#productDetails[data-pp-form="editorial"] .rich-product-category{order:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;text-align:center;}
#productDetails[data-pp-form="editorial"] .rich-product-title{order:2;text-align:center;font-family:var(--font-heading,var(--font-brand)),var(--font-display,'Suez One'),serif;
font-size:clamp(2.25rem,5.2vw,3.75rem);line-height:1.06;text-wrap:balance;margin:6px 0 28px;}
#productDetails[data-pp-form="editorial"] .rich-product-information > section{order:6;max-width:60ch;margin-inline:auto;width:100%;}
#productDetails[data-pp-form="editorial"] .rich-product-information > section:first-of-type{order:3;}
#productDetails[data-pp-form="editorial"] .rich-product-information > section:first-of-type > h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
#productDetails[data-pp-form="editorial"] .rich-product-information > section:first-of-type > .rich-text{font-size:1.25rem;line-height:1.7;color:var(--ink);margin:0;}
#productDetails[data-pp-form="editorial"] .rich-product-information > .rich-product-purchase{order:4;margin:28px 0;padding:20px 0;border:0;border-block:1px solid var(--line);}
#productDetails[data-pp-form="editorial"] .rich-product-gallery{order:5;margin-block-end:28px;}
#productDetails[data-pp-form="editorial"] .rich-product-gallery > .rich-product-photo{aspect-ratio:3 / 2;object-fit:contain;border:0;border-radius:var(--r-panel);background:var(--ui-card-photo-bg,var(--paper-dim,#F2EDE3));}
#productDetails[data-pp-form="editorial"] .rich-thumbnails{justify-content:center;}
/* ---------- «מגירה» ---------- */
#productDetails[data-pp-form="sheet"]{inset:0;inset-inline-start:auto;margin:0;width:min(460px,100%);height:100%;max-width:none;max-height:none;padding:16px 24px 32px;
border-radius:0;border-start-start-radius:var(--r-panel);border-end-start-radius:var(--r-panel);}
#productDetails[data-pp-form="sheet"]::backdrop{background:rgba(20,12,18,.4);}
#productDetails[data-pp-form="sheet"] .rich-product-layout{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px 16px;align-items:start;}
#productDetails[data-pp-form="sheet"] :is(.rich-product-information,.rich-product-gallery){display:contents;}
#productDetails[data-pp-form="sheet"] .rich-product-gallery > .rich-product-photo{grid-column:1;grid-row:1 / span 2;aspect-ratio:1;object-fit:cover;border:0;border-radius:var(--r-control);background:var(--ui-card-photo-bg,var(--paper-dim,#F2EDE3));}
#productDetails[data-pp-form="sheet"] .rich-product-category{grid-column:2;grid-row:1;align-self:end;}
#productDetails[data-pp-form="sheet"] .rich-product-title{grid-column:2;grid-row:2;font-size:1.375rem;line-height:1.2;margin:0;}
#productDetails[data-pp-form="sheet"] .rich-product-layout > :not(.rich-product-gallery),
#productDetails[data-pp-form="sheet"] :is(.rich-product-information,.rich-product-gallery) > :not(.rich-product-photo,.rich-product-category,.rich-product-title){grid-column:1 / -1;min-width:0;}
#productDetails[data-pp-form="sheet"] .rich-product-purchase{order:1;margin:4px 0 0;padding-block-start:16px;}
#productDetails[data-pp-form="sheet"] .rich-thumbnails{order:2;margin:0;}
#productDetails[data-pp-form="sheet"] .rich-thumbnails button{width:52px;height:52px;}
#productDetails[data-pp-form="sheet"] .rich-product-information > section{order:3;}
#productDetails[data-pp-form="sheet"] .rich-product-information > section h3{margin:8px 0 4px;}
#productDetails[data-pp-form="sheet"] .rich-product-information > section .rich-text{font-size:.875rem;margin:0;}
/* ---------- a phone ---------- */
@media (max-width:640px){
#productDetails[data-pp-form="full"]{padding:0 0 40px;}
#productDetails[data-pp-form="full"] > .rich-close{margin:8px 12px;}
#productDetails[data-pp-form="full"] .rich-product-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:none;}
#productDetails[data-pp-form="full"] .rich-product-layout > .rich-product-gallery,#productDetails[data-pp-form="full"] .rich-product-information > :is(section,.rich-product-purchase,.rich-product-title,.rich-product-category){grid-column:1;grid-row:auto;}
#productDetails[data-pp-form="full"] .rich-product-category{order:-3;}
#productDetails[data-pp-form="full"] .rich-product-information > .rich-product-title{order:-2;}
#productDetails[data-pp-form="full"] .rich-product-gallery{order:-1;margin-block-end:20px;}
#productDetails[data-pp-form="full"] .rich-product-information > .rich-product-purchase{order:0;}
#productDetails[data-pp-form="full"] .rich-product-gallery:has(> .rich-thumbnails){display:block;}
#productDetails[data-pp-form="full"] .rich-product-gallery > .rich-product-photo{height:auto;aspect-ratio:1;border-radius:0;}
#productDetails[data-pp-form="full"] .rich-thumbnails{flex-direction:row;max-height:none;overflow:auto hidden;margin-block-start:10px;padding-inline:16px;}
#productDetails[data-pp-form="full"] .rich-thumbnails button{width:60px;height:60px;}
#productDetails[data-pp-form="full"] .rich-product-information > :is(.rich-product-category,.rich-product-title,section,.rich-product-purchase){margin-inline:20px;}
#productDetails[data-pp-form="full"] > :is(.complements-row,.shop-reviews){margin-inline:20px;}
#productDetails[data-pp-form="full"] .rich-product-information > .rich-product-title{font-size:2.25rem;border:0;padding:0;margin-block-end:16px;}
#productDetails[data-pp-form="stage"]{inset:0;width:100%;height:100%;margin:0;border-radius:0;}
#productDetails[data-pp-form="stage"] > .rich-close{position:static;margin:8px 12px;}
#productDetails[data-pp-form="stage"] .rich-product-layout{grid-template-columns:minmax(0,1fr);min-height:0;}
#productDetails[data-pp-form="stage"] .rich-product-gallery{flex-direction:row;overflow:auto hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;gap:6px;}
#productDetails[data-pp-form="stage"] .rich-product-gallery > .rich-product-photo{flex:0 0 100%;width:100%;scroll-snap-align:center;}
#productDetails[data-pp-form="stage"] .rich-product-gallery:has(> .rich-product-more) > .rich-product-photo{flex-basis:86%;width:86%;}
#productDetails[data-pp-form="stage"] .rich-product-information{position:static;padding:20px 20px 28px;}
#productDetails[data-pp-form="stage"] > :is(.complements-row,.shop-reviews){margin-inline:20px;}
#productDetails[data-pp-form="editorial"]{padding:20px 20px 32px;}
#productDetails[data-pp-form="editorial"] .rich-product-title{font-size:2.25rem;margin-block-end:20px;}
#productDetails[data-pp-form="editorial"] .rich-product-information > section:first-of-type > .rich-text{font-size:1.125rem;}
#productDetails[data-pp-form="sheet"]{inset:auto 0 0;width:100%;height:auto;max-height:90%;padding:10px 18px 24px;
border-radius:var(--r-panel) var(--r-panel) 0 0;}
#productDetails[data-pp-form="sheet"]::before{content:"";display:block;width:40px;height:4px;margin:0 auto 6px;border-radius:2px;background:var(--line);}
#productDetails[data-pp-form="sheet"] .rich-product-layout{grid-template-columns:80px minmax(0,1fr);}
}
/* ---------- opening: the drawer slides in, from the side or from the bottom ---------- */
@media (prefers-reduced-motion: no-preference){
html:not([data-motion="off"]):not([data-a11y-motion="1"]) #productDetails[data-pp-form="sheet"][open]{animation:pp-drawer .26s cubic-bezier(.2,.8,.2,1);}
html:not([data-motion="off"]):not([data-a11y-motion="1"]) #productDetails[data-pp-form="sheet"][open]::backdrop{animation:pp-fade .26s ease-out;}
}
@media (prefers-reduced-motion: no-preference) and (max-width:640px){
html:not([data-motion="off"]):not([data-a11y-motion="1"]) #productDetails[data-pp-form="sheet"][open]{animation-name:pp-rise;}
}
@keyframes pp-drawer{from{transform:translateX(var(--pp-from,-100%));}}
@keyframes pp-fade{from{opacity:0;}}
html:is([dir="ltr"],.translated-ltr) #productDetails[data-pp-form="sheet"]{--pp-from:100%;}
@keyframes pp-rise{from{transform:translateY(100%);}}
/* cart-chrome.css */
/* 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[data-cart-bar] / [data-cart-pill] mirror the body classes (cart-chrome.js,
cart-bar-empty.js): an html:has(> body…) rule restyled the whole page on
the first add (audit SH-01). */
html[data-cart-bar]{scroll-padding-bottom:calc(var(--cart-h, 124px) + 8px);}
html[data-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);}}
}
/* ---- «סל הקניות»: the owner's colours for the bar's parts (theme.ui) ----
builder/cart-design.js; the place and the size are app/store-design.js's
(theme.storeDesign.cart). No key = the bar as before: the total in the
bar's text, the label and the line list in that text at 70% / 88% (the
plain cream first), the badge in the gold, the order button in the shop's
order colour. High contrast still wins (theme.css, !important). */
.cart-summary .total{color:var(--ui-cart-total, inherit);}
.cart-summary .label{color:rgba(251,246,236,0.7); color:color-mix(in srgb, var(--ui-cart-text, rgb(251,246,236)) 70%, transparent);}
.cart-preview{color:rgba(251,246,236,0.88); color:color-mix(in srgb, var(--ui-cart-text, rgb(251,246,236)) 88%, transparent);}
.cart-top{background:var(--ui-cart-top, transparent);}
.cart-count, .cart-mini-count{background:var(--ui-cart-count-bg, var(--gold)); color:var(--ui-cart-count-text, var(--gold-ink, #2A1F08));}
.cart-bar .cart-cta{background:var(--ui-cart-btn-bg, var(--ui-send-bg, #25D366)); color:var(--ui-cart-btn-text, var(--ui-send-text, var(--ui-send-ink, #10221A)));}
/* ---- 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;}
}
/* «התקנת האפליקציה» (app/pwa-install.js): a row of its own under the legal
links, the footer's link look (.footer-col-link, so the light footer, the
area colours and contrast mode reach it too), a button reset to read as a
link. 44px on a touch screen. */
#siteFooter .footer-app{display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:12px; padding-inline:16px;}
#siteFooter .footer-app .footer-app-btn{min-height:32px; margin:0; padding:4px 8px; border:0; background:none; font:inherit; font-size:0.875rem;
text-decoration:underline; cursor:pointer; border-radius:var(--r-chip, 6px);}
@media (pointer:coarse){ #siteFooter .footer-app .footer-app-btn{min-height:44px; min-width:44px;} }
/* The iPhone / iPad guide (app/ios-install.js): over everything (cart bar,
WhatsApp, accessibility, consent), a light dim, the arrow at Safari's share
button and the two steps on a card next to it. The arrow and the card are
placed by the physical sides of the screen on purpose: Safari's toolbar is
the phone's, not the page's, so html[dir] must not flip them (ios-install.js
place() picks the side from the phone's language). Safe-area insets keep
both clear of the home bar and the notch. */
.ios-install{position:fixed; inset:0; z-index:2147483000; background:rgba(0,0,0,.38); cursor:pointer;
-webkit-tap-highlight-color:transparent; font-family:var(--font-body, system-ui, sans-serif);}
.ios-install-arrow{position:absolute; display:block; width:56px; height:84px; color:var(--primary, #1F4D3A); pointer-events:none;}
.ios-install-arrow svg{display:block; width:100%; height:100%;}
.ios-install-halo{stroke:var(--paper, #FFFFFF);}
.ios-install-ink{stroke:currentColor;}
.ios-install[data-where="bottom"] .ios-install-arrow{bottom:calc(env(safe-area-inset-bottom, 0px) + 6px);}
.ios-install[data-where="top"] .ios-install-arrow{top:calc(env(safe-area-inset-top, 0px) + 6px);}
.ios-install[data-where="top"] .ios-install-arrow svg{transform:rotate(180deg);}
.ios-install-arrow[data-side="centre"]{left:50%; margin-left:-28px;}
.ios-install[data-where="bottom"] .ios-install-arrow[data-side="right"]{right:calc(env(safe-area-inset-right, 0px) + 10px);}
.ios-install[data-where="bottom"] .ios-install-arrow[data-side="left"]{left:calc(env(safe-area-inset-left, 0px) + 10px);}
.ios-install[data-where="top"] .ios-install-arrow[data-side="right"]{right:calc(env(safe-area-inset-right, 0px) + 92px);}
.ios-install[data-where="top"] .ios-install-arrow[data-side="left"]{left:calc(env(safe-area-inset-left, 0px) + 92px);}
.ios-install-arrow.ios-install-alt{width:34px; height:51px; opacity:.6;}
.ios-install-arrow.ios-install-alt[data-side="centre"]{margin-left:-17px;}
.ios-install-card{position:absolute; left:max(16px, env(safe-area-inset-left, 0px)); right:max(16px, env(safe-area-inset-right, 0px));
max-width:340px; margin-inline:auto; padding:16px; border-radius:var(--r-panel, 16px);
background:var(--paper, #FFFFFF); color:var(--ink, #1C1C1C); box-shadow:0 10px 30px rgba(0,0,0,.28); text-align:start; cursor:default;}
.ios-install[data-where="bottom"] .ios-install-card{bottom:calc(env(safe-area-inset-bottom, 0px) + 104px);}
.ios-install[data-where="top"] .ios-install-card{top:calc(env(safe-area-inset-top, 0px) + 104px);}
.ios-install[data-where="top"][data-side="right"] .ios-install-card{margin-right:0;}
.ios-install[data-where="top"][data-side="left"] .ios-install-card{margin-left:0;}
.ios-install-steps{display:flex; flex-direction:column; gap:12px; margin:0 0 14px; padding:0; list-style:none;}
.ios-install-steps li{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:1rem; line-height:1.5; font-weight:600;}
.ios-install-text{min-width:0;}
.ios-install-draw, .ios-install-row{flex:none; display:inline-flex; align-items:center; gap:6px; color:var(--primary, #1F4D3A);}
.ios-install-draw svg{width:28px; height:28px;}
.ios-install-draw svg.ios-install-then{width:8px; height:12px;}
[dir="ltr"] .ios-install-then{transform:scaleX(-1);}
.ios-install-row{padding:4px 10px; border:1px solid var(--line, rgba(0,0,0,.14)); border-radius:var(--r-chip, 8px);
background:var(--paper-dim, #F4F1EA); color:var(--ink, #1C1C1C); font-size:0.75rem; font-weight:400; white-space:nowrap;}
.ios-install-row svg{width:18px; height:18px; color:var(--primary, #1F4D3A);}
.ios-install-close{display:block; width:100%; min-height:44px; padding:8px 16px; border:1px solid var(--line, rgba(0,0,0,.14));
border-radius:var(--r-control, 10px); background:transparent; color:var(--ink, #1C1C1C); font:inherit; font-size:1rem; cursor:pointer;}
html[data-a11y-contrast="1"] .ios-install-card{background:#111111; color:#ffffff; border:1px solid #ffffff; box-shadow:none;}
html[data-a11y-contrast="1"] .ios-install-card :is(.ios-install-draw, .ios-install-row, .ios-install-row svg, .ios-install-close){color:#ffffff; background:transparent; border-color:#ffffff;}
html[data-a11y-contrast="1"] .ios-install-arrow{color:#111111;}
/* A gentle bounce toward the button; still for reduced motion, the
accessibility menu's «עצירת אנימציות» and the owner's «ללא תנועה». */
@keyframes ios-install-down{0%,100%{transform:translateY(0);} 50%{transform:translateY(10px);}}
@keyframes ios-install-up{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
@media (prefers-reduced-motion: no-preference){
html:not([data-a11y-motion="1"]):not([data-motion="off"]) .ios-install[data-where="bottom"] .ios-install-arrow:not(.ios-install-alt){animation:ios-install-down 1.1s ease-in-out infinite;}
html:not([data-a11y-motion="1"]):not([data-motion="off"]) .ios-install[data-where="top"] .ios-install-arrow:not(.ios-install-alt){animation:ios-install-up 1.1s ease-in-out infinite;}
}
/* ---- 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;}
/* ---- A long order's messages (app/order-parts.js) ---- */
.order-parts{width:min(26rem,calc(100vw - 32px));max-height:calc(100svh - 32px);margin:auto;padding:20px;border:0;border-radius:var(--r-panel);box-sizing:border-box;overflow:auto;color:var(--ink);background:var(--paper);}
.order-parts[open]{display:flex;flex-direction:column;gap:10px;}
.order-parts::backdrop{background:rgba(20,12,18,.65);}
.order-parts h2{margin:0;font-size:1.125rem;font-weight:700;line-height:1.4;text-align:center;}
.order-parts-send{display:flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:44px;padding:8px 14px;border-radius:var(--r-control);box-sizing:border-box;font-size:1rem;font-weight:700;text-align:center;text-decoration:none;color:#0B2416;background:var(--whatsapp,#25D366);}
.order-parts-send[data-sent="1"]{color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1px var(--line);}
.order-parts-send[data-sent="1"]::before{content:"✓";}
.order-parts-close{flex:none;min-height:44px;border:0;border-radius:var(--r-control);font:inherit;font-size:1rem;color:var(--ink);background:transparent;cursor:pointer;}
/* complements.css */
/* «מוצרים משלימים» (app/complements.js): the product page's «משלים מצוין» row
and the drawer's «אולי תרצו גם». Both templates; owner colours through the
card and palette tokens; logical properties only. */
/* ---- the product page row: compact catalogue cards in one scrolling line ---- */
.complements-row{clear:both;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);}
.complements-title{font-family:var(--font-body),sans-serif;font-size:.95rem;font-weight:700;margin:0 0 12px;color:var(--ink);}
.complements-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,180px);gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;padding:2px 2px 10px;margin:0 -2px;}
.complements-grid>.card{scroll-snap-align:start;min-width:0;width:auto;max-width:none;margin:0;}
.complements-grid>.card .card-img{aspect-ratio:1;height:auto;min-height:0;}
.complements-grid>.card .card-name{font-size:.875rem;line-height:1.35;}
.complements-grid>.card :is(.card-desc,.card-subtitle,.boutique-subtitle,.boutique-thumbnails,.card-tags){display:none;}
html[data-catalog-style="boutique"] .complements-grid>.card{padding:0;}
/* ---- the cart upsell, the first thing in the drawer's foot ---- */
.cart-upsell{margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);}
.cart-upsell[hidden]{display:none;}
.cart-upsell-title{display:flex;align-items:center;gap:8px;min-height:44px;list-style:none;cursor:pointer;
font-size:.875rem;font-weight:700;color:var(--primary);}
.cart-upsell-title::-webkit-details-marker{display:none;}
/* The fold's chevron points down / up: symmetric, so physical sides are fine in both directions. */
.cart-upsell-title::after{content:"";inline-size:.5em;block-size:.5em;margin-inline-start:auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:translateY(-2px) rotate(45deg);}
.cart-upsell[open]>.cart-upsell-title::after{transform:translateY(2px) rotate(-135deg);}
.cart-upsell-list{list-style:none;margin:0;padding:2px 2px 6px;display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;}
.cart-upsell-list>li{flex:0 0 auto;max-width:min(240px,74vw);scroll-snap-align:start;}
.cart-upsell-add{display:flex;align-items:center;gap:8px;inline-size:100%;min-height:52px;padding:4px;padding-inline-start:4px;
border:1px solid var(--line);border-radius:var(--r-control);background:var(--ui-card-bg, #fff);color:var(--ink);
font:inherit;text-align:start;cursor:pointer;}
.cart-upsell-add img{flex:none;inline-size:44px;block-size:44px;border-radius:var(--r-chip);object-fit:cover;background:var(--paper-dim);}
.cart-upsell-text{display:flex;flex-direction:column;min-width:0;}
.cart-upsell-name{font-size:.8125rem;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cart-upsell-price{font-size:.75rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;unicode-bidi:isolate;}
.cart-upsell-plus{flex:none;display:grid;place-items:center;inline-size:32px;block-size:32px;margin-inline-start:auto;border-radius:50%;
background:var(--ui-qty-plus-bg, var(--primary));color:var(--ui-qty-plus-text, var(--paper));font-size:1.125rem;font-weight:700;line-height:1;}
/* Shorter still (a phone on its side, a raised keyboard): no room, no row. */
@media (max-height:520px){.cart-upsell{display:none;}}
/* cart-corner.css */
/* «סל בפינה למעלה» (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 :is(#home, #appRoot) > .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);}}
}
/* site-header.css */
/* «כותרת אתר» (app/site-header.js, theme.siteHeader). No key → no
#siteHeader and no html[data-site-header], so nothing here applies.
In flow at the top of the page, never sticky (AGENTS.md «Storefront layout»). */
.site-header{--sh-bg:var(--ui-page-bg, var(--paper)); --sh-ink:var(--ink); --sh-line:var(--line); --sh-hover:var(--paper-dim); --sh-accent:var(--primary);
position:relative; z-index:30; background:var(--sh-bg); color:var(--sh-ink);
border-bottom:1px solid var(--sh-line); font-family:var(--font-body), sans-serif;}
/* A dark ground (the same list as theme.css's dark-ground rules: «אספרסו»,
«דיו», «שחור» …): a dark bar in the ground's own colour, light text and
icons, a light keyboard ring. An owner page colour (--ui-page-bg, written
on ) wins: the bar then keeps it and the shop's ink, as before. */
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"]):not([style*="--ui-page-bg"]) .site-header{
--sh-bg:var(--theme-page-bg, #1D1A18); --sh-ink:#F3F5F3; --sh-line:rgba(255,255,255,.14); --sh-hover:rgba(255,255,255,.1); --sh-accent:#F3F5F3;
--focus-ring:#F3F5F3;
}
.sh-inner{display:flex; align-items:center; gap:16px; min-height:72px; padding-block:8px;}
/* The logo: the hero's picture, or the shop's name. */
.sh-logo{flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; color:var(--sh-ink); text-decoration:none; border-radius:var(--r-chip);}
.sh-logo img{display:block; height:calc(52px * var(--logo-scale, 1)); max-height:64px; width:auto; max-width:180px; object-fit:contain;}
.sh-name{font-family:var(--font-brand, var(--font-display, var(--font-body))), sans-serif; font-weight:800; font-size:1.375rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:16rem;}
/* The menu: one row; more items than room scroll sideways in it. */
.sh-nav{flex:1 1 auto; min-width:0;}
.sh-list{display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none;
overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;}
.sh-list::-webkit-scrollbar{display:none;}
.sh-list > li{flex:0 0 auto;}
.sh-link{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding-inline:12px; border-radius:var(--r-chip);
color:var(--sh-ink); text-decoration:none; font-weight:600; font-size:0.9375rem; white-space:nowrap;}
.sh-link:hover{background:var(--sh-hover); color:var(--sh-accent);}
.sh-phone{color:var(--sh-accent);}
.sh-phone-num{unicode-bidi:isolate; font-variant-numeric:tabular-nums;}
.sh-phone-item{margin-inline-start:auto;}
/* The tools: WhatsApp, the magnifier and the cart, 44px each. */
.sh-tools{flex:0 0 auto; display:flex; align-items:center; gap:4px;}
.sh-btn{position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0;
border:0; border-radius:999rem; background:transparent; color:var(--sh-ink); cursor:pointer; text-decoration:none;}
.sh-btn:hover{background:var(--sh-hover); color:var(--sh-accent);}
.sh-wa{color:var(--ui-btn-primary-bg, var(--sh-accent));}
.sh-cart{background:var(--ui-btn-primary-bg, var(--primary)); color:var(--ui-btn-primary-text, #fff);}
.sh-cart:hover{background:var(--ui-btn-primary-bg, var(--primary)); color:var(--ui-btn-primary-text, #fff); filter:brightness(1.08);}
.sh-count{position:absolute; inset-block-start:-4px; inset-inline-end:-4px; min-width:20px; height:20px; padding-inline:5px; box-sizing:border-box;
display:inline-flex; align-items:center; justify-content:center; border-radius:999rem; font-size:0.75rem; font-weight:700; line-height:1;
background:var(--gold); color:var(--gold-ink, #2A1F08); font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--sh-bg);}
.sh-count[hidden]{display:none;}
.sh-menu-btn{display:none;}
.sh-logo:focus-visible, .sh-link:focus-visible, .sh-btn:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
/* centred: the logo in the middle of the first row, the menu centred under it. */
.site-header[data-style="centred"] .sh-inner{display:grid; grid-template-columns:1fr auto 1fr; grid-template-areas:"start logo tools" "nav nav nav"; row-gap:4px; padding-block:12px 4px;}
.site-header[data-style="centred"] .sh-logo{grid-area:logo; justify-self:center;}
.site-header[data-style="centred"] .sh-tools{grid-area:tools; justify-self:end;}
.site-header[data-style="centred"] .sh-menu-btn{grid-area:start;}
.site-header[data-style="centred"] .sh-nav{grid-area:nav; border-top:1px solid var(--sh-line); padding-top:4px;}
.site-header[data-style="centred"] .sh-list{flex-wrap:wrap; justify-content:center; overflow:visible;}
.site-header[data-style="centred"] .sh-phone-item{margin-inline-start:0;}
/* One logo, one cart on screen (site-header.js «the rules»). */
html[data-site-header] #home #heroLogo{display:none;}
@media (max-width:600px){
html[data-site-header][data-layout-header="centred"] #home:has(> .hero-content > #heroLogo:not([style*="none"])){--mast-h:80px;}
}
html[data-site-header-seen] #cartBar{visibility:hidden;}
/* Phone and narrow screens: ☰ at the start, the logo in the middle, the
tools at the end; the menu is a panel under the bar. */
@media (max-width:900px){
.sh-inner, .site-header[data-style="centred"] .sh-inner{display:grid; grid-template-columns:1fr auto 1fr; grid-template-areas:"start logo tools"; gap:8px; min-height:60px; padding-block:6px; padding-inline:12px;}
.sh-menu-btn{display:inline-flex; grid-area:start; justify-self:start;}
.sh-logo, .site-header[data-style="centred"] .sh-logo{grid-area:logo; justify-self:center; min-width:0;}
.sh-logo img{height:calc(40px * var(--logo-scale, 1)); max-height:48px; max-width:44vw;}
.sh-name{font-size:1.125rem; max-width:44vw;}
.sh-tools, .site-header[data-style="centred"] .sh-tools{grid-area:tools; justify-self:end; gap:2px;}
.sh-nav, .site-header[data-style="centred"] .sh-nav{display:none; position:absolute; inset-inline:0; inset-block-start:100%; z-index:40;
max-height:calc(100vh - 80px); overflow-y:auto; overscroll-behavior:contain; padding:8px 12px 12px; border-top:1px solid var(--sh-line);
background:var(--sh-bg); box-shadow:0 12px 24px -12px rgba(0,0,0,.25);}
.site-header.is-open{z-index:65;} /* the open panel over the page's own layers, under the cart bar (70) and the drawer */
.site-header.is-open .sh-nav{display:block;}
.sh-list, .site-header[data-style="centred"] .sh-list{display:flex; flex-direction:column; align-items:stretch; flex-wrap:nowrap; justify-content:flex-start; gap:0; overflow:visible;}
.sh-list > li + li{border-top:1px solid var(--sh-line);}
.sh-link{display:flex; min-height:48px; font-size:1rem;}
.sh-phone-item, .site-header[data-style="centred"] .sh-phone-item{margin-inline-start:0;}
}
@media (max-width:360px){
.sh-wa{display:none;}
}
/* header-families.css */
/* Header families (theme.siteHeader.style, app/site-header.js) and «פס הודעה»
(theme.siteHeader.announce, app/site-announce.js). The shared bar — the
logo, the menu, the tools, the ☰ fold at ≤900px — is app/site-header.css;
this file only adds what each family changes. No key: no #siteHeader, no
#siteAnnounce, no html[data-site-header] / [data-site-announce], so
nothing here applies and the page is as it always was.
One height per family on each side of 900px (the bar's box never grows
with the scroll), so nothing below it moves: no layout shift. */
/* ---------------- sticky («פס צמוד») ----------------
position:sticky, which AGENTS.md «Storefront layout» rules out for the
page: that rule is about overflow-x:hidden on html/body turning them into
scroll containers. theme.css upgrades both to overflow-x:clip under
@supports (overflow-x: clip), which makes no scroll container, so a sticky
child of #appRoot sticks to the viewport (Chrome 90+, Safari 16+,
Firefox 81+, Samsung Internet 15+). An engine without clip keeps hidden,
and the bar then simply scrolls away with the page like «פס עליון»: it
never covers anything. Pinned in test/header-families.test.js.
The box is --sh-box tall and sticks at top:-(box - pin), so once the
page moves only its last --sh-pin pixels stay on screen: the bar "shrinks"
with no change of size. The logo, the menu and the tools sit at the box's
bottom, inside the part that stays. With a scroll-driven animation (and
motion allowed) the logo eases from its full size to the compact one and
a shadow fades in over those first pixels; without one it is compact from
the start. Transform and opacity only, no scroll listener. */
html[data-site-header="sticky"]{--sh-box:76px; --sh-pin:56px; scroll-padding-top:calc(var(--sh-pin) + 8px);}
.site-header[data-style="sticky"]{position:sticky; top:calc(var(--sh-pin) - var(--sh-box)); z-index:58;}
.site-header[data-style="sticky"] .sh-inner{box-sizing:border-box; height:var(--sh-box); min-height:0; align-items:flex-end; padding-block:0 6px;}
.site-header[data-style="sticky"] .sh-logo{transform-origin:50% calc(100% - 22px);} /* shrinks toward the row's middle line */
/* A frosted ground, so the page reads through as it passes under (the bar's own colour first). */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) and (color:color-mix(in srgb, red, blue)){
.site-header[data-style="sticky"]{background:color-mix(in srgb, var(--sh-bg) 90%, transparent); -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2);}
}
.site-header[data-style="sticky"] .sh-logo img{height:calc(44px * var(--logo-scale, 1)); max-height:44px;}
.site-header[data-style="sticky"]::after{content:""; position:absolute; inset-inline:0; inset-block-start:100%; height:12px; pointer-events:none;
background:linear-gradient(rgba(20,16,10,.16), rgba(20,16,10,0)); opacity:1;}
/* The category bar (#catChips, fixed) lands under the pinned part, never on it;
a section a chip scrolls to clears both (scroll-padding above + its own margin). */
html[data-site-header="sticky"] .cat-chips{top:var(--sh-pin);}
@supports (animation-timeline: scroll()){
@media (prefers-reduced-motion:no-preference){
html[data-site-header="sticky"]:not([data-motion="off"]):not([data-a11y-motion="1"]) .site-header[data-style="sticky"] .sh-logo img{height:calc(60px * var(--logo-scale, 1)); max-height:60px;}
html[data-site-header="sticky"]:not([data-motion="off"]):not([data-a11y-motion="1"]) .site-header[data-style="sticky"] .sh-logo{
animation:sh-logo-settle linear both; animation-timeline:scroll(root block); animation-range:0 calc(var(--sh-box) - var(--sh-pin));}
html[data-site-header="sticky"]:not([data-motion="off"]):not([data-a11y-motion="1"]) .site-header[data-style="sticky"]::after{
animation:sh-shadow-in linear both; animation-timeline:scroll(root block); animation-range:0 calc(var(--sh-box) - var(--sh-pin));}
@keyframes sh-logo-settle{from{transform:none;} to{transform:scale(.74);}}
@keyframes sh-shadow-in{from{opacity:0;} to{opacity:1;}}
}
}
@media (max-width:900px){
html[data-site-header="sticky"]{--sh-box:64px; --sh-pin:52px;}
.site-header[data-style="sticky"] .sh-inner{padding-block:0 4px; align-items:end;}
.site-header[data-style="sticky"] .sh-logo img{height:calc(40px * var(--logo-scale, 1)); max-height:40px;}
@supports (animation-timeline: scroll()){
@media (prefers-reduced-motion:no-preference){
html[data-site-header="sticky"]:not([data-motion="off"]):not([data-a11y-motion="1"]) .site-header[data-style="sticky"] .sh-logo img{height:calc(48px * var(--logo-scale, 1)); max-height:48px;}
}
}
}
/* ---------------- overlay («שקוף על התמונה») ----------------
Over a photo head only: the hero right after the header, not the split or
photo-less head, not «ניגודיות גבוהה». Anywhere else the same markup is a
plain bar. The hero slides up under the bar (a negative margin on the
hero, so a hero hidden on this device leaves no gap and covers nothing)
and its content steps down by the bar's height, so the bar never sits on
the hero's words or its language flag. The ink is the hero title's
(--sh-over-ink, site-header.js), on a soft scrim of the opposite tone. */
.site-header[data-style="overlay"] .sh-inner{box-sizing:border-box; height:var(--sh-h, 72px); min-height:0;}
html[data-site-header="overlay"]{--sh-h:72px;}
html[data-site-header="overlay"]:not([data-layout-hero="split"]):not([data-layout-hero="none"]):not([data-a11y-contrast="1"]):has(#siteHeader + #home) .site-header{background:linear-gradient(var(--sh-scrim, rgba(0,0,0,.42)), transparent); border-bottom-color:transparent;}
/* The bar's own pieces take the hero's ink; the ☰ panel keeps the bar's colours. */
html[data-site-header="overlay"]:not([data-layout-hero="split"]):not([data-layout-hero="none"]):not([data-a11y-contrast="1"]):has(#siteHeader + #home) .site-header :is(.sh-logo, .sh-tools, .sh-menu-btn){--sh-ink:var(--sh-over-ink, #FFFFFF); --sh-hover:var(--sh-over-hover, rgba(255,255,255,.16)); --sh-accent:var(--sh-over-ink, #FFFFFF); --focus-ring:var(--sh-over-ink, #FFFFFF);}
@media (min-width:901px){
html[data-site-header="overlay"]:not([data-layout-hero="split"]):not([data-layout-hero="none"]):not([data-a11y-contrast="1"]):has(#siteHeader + #home) .site-header .sh-nav{--sh-ink:var(--sh-over-ink, #FFFFFF); --sh-hover:var(--sh-over-hover, rgba(255,255,255,.16)); --sh-accent:var(--sh-over-ink, #FFFFFF); --focus-ring:var(--sh-over-ink, #FFFFFF);}
}
html[data-site-header="overlay"]:not([data-layout-hero="split"]):not([data-layout-hero="none"]):not([data-a11y-contrast="1"]) #siteHeader + #home{margin-top:calc(-1 * var(--sh-h));}
html[data-site-header="overlay"]:not([data-layout-hero="split"]):not([data-layout-hero="none"]):not([data-a11y-contrast="1"]) #siteHeader + #home > .hero-content{margin-block-start:var(--sh-h);}
html[data-site-header="overlay"]:not([data-layout-hero="split"]):not([data-layout-hero="none"]):not([data-a11y-contrast="1"]) #siteHeader + #home > .lang-picker{top:calc(var(--sh-h) + 14px);}
@media (max-width:900px){
html[data-site-header="overlay"]{--sh-h:60px;}
}
/* ---------------- split («לוגו בין התפריטים») ----------------
A masthead: the logo in the exact middle, the first half of the menu on
its start side, the rest on its end side, the tools after them. Quieter
links (an underline, no pill) so the logo carries the bar. ≤900px: the
shared ☰ fold, both halves one list in the panel. */
@media (min-width:901px){
.site-header[data-style="split"] .sh-inner{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"a logo b";
align-items:center; column-gap:24px; min-height:88px;}
.site-header[data-style="split"] .sh-nav{display:contents;}
.site-header[data-style="split"] .sh-logo{grid-area:logo; justify-self:center;}
.site-header[data-style="split"] .sh-logo img{height:calc(64px * var(--logo-scale, 1)); max-height:72px;}
.site-header[data-style="split"] .sh-name{font-size:1.75rem;}
.site-header[data-style="split"] .sh-list-a{grid-area:a; justify-content:flex-end; min-width:0;}
.site-header[data-style="split"] .sh-list-b{grid-area:b; justify-content:flex-start; min-width:0;
padding-inline-end:calc(var(--sh-tools-n, 1) * 48px + 8px);}
.site-header[data-style="split"] .sh-tools{grid-area:b; justify-self:end;}
.site-header[data-style="split"] .sh-link{font-weight:500; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:6px; text-decoration-thickness:2px;}
.site-header[data-style="split"] .sh-link:hover{background:transparent; text-decoration-color:currentColor;}
.site-header[data-style="split"] .sh-phone-item{margin-inline-start:0;}
}
@media (max-width:900px){
.site-header[data-style="split"] .sh-list-b{border-top:1px solid var(--sh-line);}
}
/* ---------------- search («חיפוש בראש») ----------------
The shop's own search box (#prodSearch, moved here by site-header.js) is
the bar's middle; the menu is a slim row under it. Two ids so the
search part's own sizes (storeDesign.parts.search) do not reach it here. */
.site-header[data-style="search"] .sh-inner{display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"logo find tools" "nav nav nav";
column-gap:24px; row-gap:0; padding-block:12px 0;}
.site-header[data-style="search"] .sh-logo{grid-area:logo;}
.site-header[data-style="search"] .sh-find{grid-area:find; min-width:0; display:flex; justify-content:center;}
#siteHeader .sh-find > #prodSearch{width:100%; max-width:720px; margin:0; padding:0;}
#siteHeader .sh-find > #prodSearch .prod-search-bar{padding-block:4px; padding-inline:14px 4px; box-shadow:none; border-color:var(--sh-line); border-radius:var(--r-control);}
#siteHeader .sh-find > #prodSearch .prod-search-list{left:0; right:0;}
.site-header[data-style="search"] .sh-tools{grid-area:tools;}
.site-header[data-style="search"] .sh-nav{grid-area:nav; margin-top:8px; border-top:1px solid var(--sh-line);}
.site-header[data-style="search"] .sh-link{min-height:44px; font-size:0.875rem;}
.site-header[data-style="search"] .sh-menu-btn{grid-area:start;}
@media (max-width:900px){
.site-header[data-style="search"] .sh-inner{grid-template-columns:1fr auto 1fr; grid-template-areas:"start logo tools" "find find find"; row-gap:8px; padding-block:6px 10px;}
.site-header[data-style="search"] .sh-nav{margin-top:0; border-top:1px solid var(--sh-line);}
}
/* ---------------- «פס הודעה» ----------------
One line (two on a phone if it must) above everything, in the owner's
colour or the brand, inked by ratio (site-announce.js). The × keeps a
twin space on the other side so the words stay in the middle. */
.site-announce{position:relative; z-index:31; background:var(--sa-bg, var(--primary)); color:var(--sa-ink, #FFFFFF); --focus-ring:var(--sa-ink, #FFFFFF);
font-family:var(--font-body), sans-serif;}
.sa-inner{display:flex; align-items:center; gap:8px; min-height:40px; padding-block:4px;}
.sa-inner:has(> .sa-close)::before{content:""; flex:0 0 44px;}
.sa-text{flex:1 1 auto; min-width:0; margin:0; text-align:center; font-size:0.875rem; font-weight:600; line-height:1.45; overflow-wrap:anywhere;}
.sa-link{color:inherit; text-decoration:underline; text-underline-offset:3px; border-radius:var(--r-chip);}
.sa-close{flex:0 0 44px; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-block:-4px; padding:0;
border:0; border-radius:999rem; background:transparent; color:inherit; cursor:pointer;}
.sa-close:hover{background:rgba(127,127,127,.18);}
.sa-link:focus-visible, .sa-close:focus-visible{outline:var(--focus-ring-width, 2px) solid var(--focus-ring); outline-offset:2px;}
html[data-a11y-contrast="1"] .site-announce{background:#000000 !important; color:#FFFFFF !important; --focus-ring:#FFFFFF;}
/* The cart in a top corner (app/cart-corner.css) keeps its side free, as on the bar above the head. */
html[data-cart-corner] body.has-cart-bar .site-announce .sa-inner{padding-inline:max(16px, calc(var(--cc-edge, 12px) + var(--cc-w, 48px) + 8px - max(0px, (100% - var(--container, 1200px)) / 2)));}
/* The language flag on a page without a hero sits on #appRoot's corner: under the band. */
html[data-site-announce][data-lang-free] #appRoot > .lang-picker{top:calc(var(--ann-h, 40px) + 14px);}
/* section-looks.css */
/* «מראה» and «צבעים» of a section (app/section-looks.js). Every rule here
needs data-sl-look, data-scheme or a wrapper section-looks.js adds, so a
section without the new keys draws exactly as before. Logical properties
only (RTL and the LTR translations); motion behind reduced-motion; no
sticky; sizes in rem. Specificity: html + the kind's class + the attribute
(0,2,1) beats theme.css's .editorial .editorial-block (0,2,0). */
/* ---------- «צבעים»: the scheme's colours (section-looks.js paint() writes --sl-*) ---------- */
html .editorial-block[data-scheme]{
--block-ink:var(--sl-ink); --ink:var(--sl-ink); --ink-soft:var(--sl-ink); --block-accent:var(--sl-accent);
--block-card:var(--sl-card); --block-card-line:var(--sl-line); --line:var(--sl-line);
--focus-ring:var(--sl-ink); --focus-ring-halo:var(--sl-bg);
color:var(--sl-ink);
}
html .editorial-block[data-scheme] .editorial-cta{background:var(--sl-btn-bg); color:var(--sl-btn-ink);}
html .editorial-block[data-scheme] :is(.editorial-step-n){color:var(--sl-bg);}
html .editorial-block[data-scheme] .editorial-steps-list[data-look="big"] .editorial-step-n,
html .editorial-block[data-scheme] .editorial-why-list[data-look="big"] .editorial-why-icon{background:var(--sl-card);}
html .editorial-block[data-scheme-dark] .editorial-review blockquote::before{opacity:.6;}
html .editorial-block[data-scheme-dark] .editorial-logo-row img{background:#FFFFFF; padding:10px; border-radius:var(--r-control);}
html .editorial-block[data-scheme-dark] :is(.editorial-collection-item img, .editorial-strip-list img){background:var(--sl-card);}
/* ---------- carousels (collection, reviews, gallery, logos, strip) ---------- */
.sl-carousel{position:relative; min-width:0;}
html .editorial-block .sl-track{
display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:var(--sl-item, minmax(240px, 30%));
overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:2px;
scrollbar-width:thin; padding-bottom:10px; columns:auto;
}
html .editorial-block .sl-track > *{scroll-snap-align:start; min-width:0;}
.sl-track:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:4px;}
.sl-nav{display:flex; justify-content:center; gap:12px; margin-top:12px;}
.sl-carousel[data-fits] .sl-nav{visibility:hidden;}
.sl-step{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border-radius:50%;
border:1.5px solid var(--block-accent, var(--primary)); background:var(--block-card, var(--card-bg, #fff)); color:var(--block-accent, var(--primary)); cursor:pointer;}
.sl-step svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
/* The arrows point the way the track moves: «הבא» toward the reading end (left in RTL), «הקודם» back. */
.sl-next svg{transform:scaleX(-1);}
html[dir="ltr"] .sl-next svg{transform:none;}
html[dir="ltr"] .sl-prev svg{transform:scaleX(-1);}
.sl-step:disabled{cursor:default; border-style:dashed; color:var(--ink-soft, var(--ink)); background:transparent;}
.sl-step:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
@media (prefers-reduced-motion: no-preference){ html:not([data-motion="off"]):not([data-a11y-motion="1"]) .sl-track{scroll-behavior:smooth;} }
html .editorial-gallery .sl-track{--sl-item:minmax(260px, 34%);}
html .editorial-logos .sl-track{--sl-item:minmax(140px, 18%); align-items:center;}
html .editorial-strip .sl-track{--sl-item:minmax(220px, 26%);}
html .editorial-collection .sl-track{--sl-item:minmax(200px, 23%);}
@media (max-width:640px){
html .editorial-block .sl-track{--sl-item:78%;}
html .editorial-logos .sl-track{--sl-item:42%;}
}
/* ---------- «טקסט» (story) ---------- */
/* editorial: the title in one column, the words in the other, a rule above. */
html .editorial-story[data-sl-look="editorial"]{--block-default-align:start; text-align:start;}
html .editorial-story[data-sl-look="editorial"] .editorial-copy{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); column-gap:clamp(24px, 5vw, 64px);
border-top:3px solid var(--block-accent, var(--primary)); padding-top:clamp(18px, 3vw, 28px); max-width:none;}
html .editorial-story[data-sl-look="editorial"] .editorial-copy > :is(.editorial-eyebrow, h2){grid-column:1;}
html .editorial-story[data-sl-look="editorial"] .editorial-copy > h2{font-size:calc(clamp(1.75rem, 3.6vw, 2.75rem) * var(--block-title-scale-desktop, 1)); line-height:1.15; margin:0;}
html .editorial-story[data-sl-look="editorial"] .editorial-copy > .rich-text{grid-column:2; grid-row:1 / span 2; margin:0; font-size:calc(1.125rem * var(--block-text-scale-desktop, 1)); line-height:1.7;}
/* quote: the words as one large quotation on a thick rule; the title small above. */
html .editorial-story[data-sl-look="quote"]{--block-default-align:start; text-align:start;}
html .editorial-story[data-sl-look="quote"] .editorial-copy > h2{font-size:calc(1.125rem * var(--block-title-scale-desktop, 1)); color:var(--block-accent, var(--primary)); margin-bottom:12px;}
html .editorial-story[data-sl-look="quote"] .editorial-copy > .rich-text{margin:0; padding-inline-start:clamp(16px, 3vw, 28px); border-inline-start:6px solid var(--block-accent, var(--primary));
font-family:var(--font-heading, var(--font-display)), serif; font-size:calc(clamp(1.375rem, 2.6vw, 2rem) * var(--block-text-scale-desktop, 1)); line-height:1.45; max-width:40ch;}
/* ---------- «תמונה וטקסט» (imageText) ---------- */
/* split: the photo runs to the section's edge on its side and fills its height. */
html .editorial-imageText[data-sl-look="split"]{padding:0; gap:0; align-items:stretch;}
html .editorial-imageText[data-sl-look="split"] > img{border-radius:0; height:100%; min-height:clamp(260px, 32vw, 460px); max-height:none; aspect-ratio:auto; object-fit:cover;}
html .editorial-imageText[data-sl-look="split"] .editorial-copy{padding:clamp(24px, 5vw, 64px); align-self:center;}
/* framed: the photo sits on a block of the brand colour set off to one corner. */
html .editorial-imageText[data-sl-look="framed"] > img{border-radius:var(--r-panel); box-shadow:-16px 16px 0 0 color-mix(in srgb, var(--block-accent, var(--primary)) 28%, transparent);
margin-block-end:16px; margin-inline-start:16px; width:calc(100% - 16px);}
html[dir="ltr"] .editorial-imageText[data-sl-look="framed"] > img{box-shadow:16px 16px 0 0 color-mix(in srgb, var(--block-accent, var(--primary)) 28%, transparent);}
/* circle: a round photo, smaller, the words wider beside it. */
html .editorial-imageText[data-sl-look="circle"]{grid-template-columns:minmax(0, 2fr) minmax(0, 3fr);}
html .editorial-imageText[data-sl-look="circle"] > img{aspect-ratio:1; max-height:none; max-width:340px; width:100%; justify-self:center; border-radius:50%; object-fit:cover;
outline:6px solid color-mix(in srgb, var(--block-accent, var(--primary)) 18%, transparent); outline-offset:6px;}
/* editorial: a wide photo on top, then the title and the words side by side. */
html .editorial-imageText[data-sl-look="editorial"]{grid-template-columns:minmax(0, 1fr); gap:clamp(20px, 3vw, 32px);}
html .editorial-imageText[data-sl-look="editorial"] > img{order:0; aspect-ratio:21 / 9; max-height:none; width:100%;}
html .editorial-imageText[data-sl-look="editorial"] .editorial-copy{order:1; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); column-gap:clamp(24px, 5vw, 64px); text-align:start;}
html .editorial-imageText[data-sl-look="editorial"] .editorial-copy > :is(.editorial-eyebrow, h2){grid-column:1;}
html .editorial-imageText[data-sl-look="editorial"] .editorial-copy > h2{font-size:calc(clamp(1.75rem, 3.6vw, 2.75rem) * var(--block-title-scale-desktop, 1)); line-height:1.15; margin:0;}
html .editorial-imageText[data-sl-look="editorial"] .editorial-copy > :not(.editorial-eyebrow, h2){grid-column:2; margin:0;}
/* ---------- «קולקציה» (collection) ---------- */
/* The section shares its class with its grid (theme.css lays both out as columns): a new look gives the section one column, the title above. */
html .editorial-block.editorial-collection[data-sl-look]{display:block;}
html .editorial-block.editorial-collection[data-sl-look] .editorial-collection{margin:22px 0;}
/* list: two columns of rows, a small photo and the name, a rule between. */
html .editorial-block[data-sl-look="list"] .editorial-collection{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 clamp(16px, 4vw, 48px);}
html .editorial-block[data-sl-look="list"] .editorial-collection-item{grid-template-columns:72px minmax(0, 1fr); align-items:center; text-align:start; padding:12px 4px;
border-bottom:1px solid var(--block-card-line, color-mix(in srgb, var(--primary) 14%, transparent)); border-radius:0;}
html .editorial-block[data-sl-look="list"] .editorial-collection-item img{border-radius:var(--r-control);}
/* feature: the first product large, the other three stacked beside it. */
html .editorial-block[data-sl-look="feature"] .editorial-collection{grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); grid-auto-rows:auto;}
html .editorial-block[data-sl-look="feature"] .editorial-collection-item:first-child{grid-row:1 / span 3; align-content:start;}
html .editorial-block[data-sl-look="feature"] .editorial-collection-item:first-child span{font-size:1.25rem;}
html .editorial-block[data-sl-look="feature"] .editorial-collection-item:not(:first-child){grid-template-columns:96px minmax(0, 1fr); align-items:center; text-align:start;}
/* ---------- «שאלות ותשובות» (faq; section-looks.js wraps the questions in .sl-faq-list) ---------- */
html .editorial-faq[data-sl-look] .sl-faq-list{min-width:0;}
html .editorial-faq[data-sl-look="columns"] .sl-faq-list{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:clamp(20px, 4vw, 48px); align-items:start;}
/* side: the title and the words on one side, the questions on the other. */
html .editorial-faq[data-sl-look="side"]{display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); column-gap:clamp(24px, 5vw, 64px); align-items:start; text-align:start;}
html .editorial-faq[data-sl-look="side"] > img{grid-column:1 / -1;}
html .editorial-faq[data-sl-look="side"] .editorial-copy{order:0;}
html .editorial-faq[data-sl-look="side"] .editorial-copy h2{font-size:calc(clamp(1.75rem, 3.4vw, 2.6rem) * var(--block-title-scale-desktop, 1)); line-height:1.15;}
html .editorial-faq[data-sl-look="side"] .sl-faq-list > .editorial-question:first-child{border-top:0; padding-top:0;}
/* cards: each question its own card, the answers open. */
html .editorial-faq[data-sl-look="cards"] .sl-faq-list{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--block-gap-desktop, 16px); margin-top:18px; align-items:start;}
html .editorial-faq[data-sl-look="cards"] .editorial-question{border:1px solid var(--block-card-line, color-mix(in srgb, var(--primary) 12%, transparent)); border-radius:var(--r-panel);
background:var(--block-card, color-mix(in srgb, var(--primary) 4%, var(--card-bg, #fff))); padding:18px 20px;}
html .editorial-faq[data-sl-look="cards"] .editorial-question p{margin-bottom:0;}
/* numbered: a large number before each question. */
html .editorial-faq[data-sl-look="numbered"] .sl-faq-list{counter-reset:sl-q;}
html .editorial-faq[data-sl-look="numbered"] .editorial-question{counter-increment:sl-q; display:grid; grid-template-columns:3.25rem minmax(0, 1fr); column-gap:8px;}
html .editorial-faq[data-sl-look="numbered"] .editorial-question::before{content:counter(sl-q); grid-row:1 / span 2; font-family:var(--font-heading, var(--font-display)), serif; font-size:2rem; line-height:1; color:var(--block-accent, var(--primary)); font-variant-numeric:tabular-nums;}
html .editorial-faq[data-sl-look="numbered"] .editorial-question > :not(summary){grid-column:2;}
html .editorial-faq[data-sl-look="numbered"] .editorial-question.has-icon > p{padding-inline-start:0;}
/* ---------- «המלצות לקוחות» (testimonials) ---------- */
/* wall: quotes of every length packed in columns. */
html .editorial-testimonials[data-sl-look="wall"] .editorial-reviews{display:block; columns:3 260px; column-gap:var(--block-gap-desktop, 20px);}
html .editorial-testimonials[data-sl-look="wall"] .editorial-review{break-inside:avoid; margin-bottom:var(--block-gap-desktop, 20px);}
html .editorial-testimonials[data-sl-look="wall"] .editorial-review:nth-child(3n+1){border-inline-start:4px solid var(--block-accent, var(--primary));}
html .editorial-testimonials[data-sl-look="wall"] .editorial-review:nth-child(3n+1) blockquote p{font-size:1.125em;}
/* spotlight: the first review large across the row, the rest small below. */
html .editorial-testimonials[data-sl-look="spotlight"] .editorial-reviews{grid-template-columns:repeat(3, minmax(0, 1fr));}
html .editorial-testimonials[data-sl-look="spotlight"] .editorial-review:first-child{grid-column:1 / -1; background:transparent; border:0; padding:8px 0 20px; text-align:center; align-items:center;
border-bottom:1px solid var(--block-card-line, color-mix(in srgb, var(--primary) 14%, transparent)); border-radius:0;}
html .editorial-testimonials[data-sl-look="spotlight"] .editorial-review:first-child blockquote p{font-family:var(--font-heading, var(--font-display)), serif; font-size:clamp(1.375rem, 2.8vw, 2.125rem); line-height:1.4; max-width:30ch; margin-inline:auto;}
html .editorial-testimonials[data-sl-look="spotlight"] .editorial-review:first-child blockquote::before{position:static; display:block; font-size:4rem; line-height:.6; margin-bottom:8px;}
html .editorial-testimonials[data-sl-look="carousel"] .editorial-reviews{--sl-item:minmax(280px, 36%);}
/* ---------- «באנר» (banner) ---------- */
/* ribbon: one low line, the title and the button side by side. */
html .editorial-banner[data-sl-look="ribbon"]{padding-block:clamp(14px, 2.4vw, 22px);}
html .editorial-banner[data-sl-look="ribbon"] .editorial-copy{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; text-align:start;}
html .editorial-banner[data-sl-look="ribbon"] .editorial-copy > h2{margin:0; font-size:calc(clamp(1.25rem, 2.2vw, 1.625rem) * var(--block-title-scale-desktop, 1));}
html .editorial-banner[data-sl-look="ribbon"] .editorial-copy > .rich-text{flex:1 1 280px; margin:0;}
html .editorial-banner[data-sl-look="ribbon"] .editorial-cta{margin-top:0;}
html .editorial-banner[data-sl-look="ribbon"] > img{max-height:120px; aspect-ratio:auto;}
/* statement: a very large title at the start, the words and the button under it at the end. */
html .editorial-banner[data-sl-look="statement"]{padding-block:clamp(36px, 7vw, 96px); text-align:start;}
html .editorial-banner[data-sl-look="statement"] .editorial-copy{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:clamp(24px, 5vw, 64px); align-items:end;}
html .editorial-banner[data-sl-look="statement"] .editorial-copy > :is(.editorial-eyebrow, h2){grid-column:1 / -1;}
html .editorial-banner[data-sl-look="statement"] .editorial-copy > h2{font-size:calc(clamp(2.25rem, 6vw, 4.5rem) * var(--block-title-scale-desktop, 1)); line-height:1.05; margin-bottom:clamp(16px, 3vw, 32px); max-width:16ch;}
html .editorial-banner[data-sl-look="statement"] .editorial-copy > :not(.editorial-eyebrow, h2){grid-column:2; justify-self:start; margin-inline:0;}
/* ---------- «גלריה» (gallery) ---------- */
html .editorial-gallery[data-sl-look="mosaic"] .editorial-photos{grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-flow:dense;}
html .editorial-gallery[data-sl-look="mosaic"] .editorial-photos img:first-child{grid-column:span 2; grid-row:span 2; height:100%; aspect-ratio:auto;}
html .editorial-gallery[data-sl-look="masonry"] .editorial-photos{display:block; columns:3 220px; column-gap:var(--block-gap-desktop, 12px);}
html .editorial-gallery[data-sl-look="masonry"] .editorial-photos img{display:block; aspect-ratio:auto; height:auto; margin-bottom:var(--block-gap-desktop, 12px); break-inside:avoid;}
html .editorial-gallery[data-sl-look="stagger"] .editorial-photos{grid-template-columns:repeat(4, minmax(0, 1fr)); align-items:start; padding-bottom:3rem;}
html .editorial-gallery[data-sl-look="stagger"] .editorial-photos img{aspect-ratio:3 / 4;}
html .editorial-gallery[data-sl-look="stagger"] .editorial-photos img:nth-child(even){margin-top:3rem;}
/* ---------- «לוגואים» (logos) ---------- */
html .editorial-logos[data-sl-look="wall"] .editorial-logo-row{gap:0; border-top:1px solid var(--block-card-line, color-mix(in srgb, var(--primary) 14%, transparent)); border-inline-start:1px solid var(--block-card-line, color-mix(in srgb, var(--primary) 14%, transparent));}
html .editorial-logos[data-sl-look="wall"] .editorial-logo-row img{box-sizing:border-box; height:120px; max-height:none; padding:24px; border-bottom:1px solid var(--block-card-line, color-mix(in srgb, var(--primary) 14%, transparent)); border-inline-end:1px solid var(--block-card-line, color-mix(in srgb, var(--primary) 14%, transparent));}
html .editorial-logos[data-sl-look="quiet"] .editorial-logo-row{grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); max-width:880px; margin-inline:auto; gap:clamp(16px, 4vw, 40px);}
html .editorial-logos[data-sl-look="quiet"] .editorial-logo-row img{max-height:48px; filter:grayscale(1);}
html .editorial-logos[data-sl-look="quiet"] .editorial-logo-row img:hover{filter:none;}
/* ---------- «וידאו» (video) ---------- */
html .editorial-video[data-sl-look="side"]{display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); column-gap:clamp(24px, 5vw, 56px); align-items:center; text-align:start;}
html .editorial-video[data-sl-look="side"] .editorial-video-frame{margin-top:0;}
html .editorial-video[data-sl-look="cinema"]{padding-inline:0; padding-bottom:0; text-align:center;}
html .editorial-video[data-sl-look="cinema"] .editorial-copy{padding-inline:clamp(20px, 4vw, 44px); max-width:760px; margin-inline:auto;}
html .editorial-video[data-sl-look="cinema"] .editorial-video-frame{border-radius:0; aspect-ratio:21 / 9;}
/* ---------- «מוצרים נבחרים» (featured): the first product twice the size ---------- */
html .editorial-featured[data-sl-look="spotlight"] .editorial-featured-grid[data-look="grid"]{grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-flow:dense;}
html .editorial-featured[data-sl-look="spotlight"] .editorial-featured-grid > .card:first-child{grid-column:span 2; grid-row:span 2;}
/* ---------- «איך זה עובד» (steps) ---------- */
/* zigzag: the steps alternate sides of a centre line, the number on the line. */
html .editorial-steps-list[data-look="zigzag"]{grid-template-columns:minmax(0, 1fr); gap:0; max-width:820px; margin-inline:auto; position:relative;}
html .editorial-steps-list[data-look="zigzag"]::before{content:""; position:absolute; inset-block:1.5rem; inset-inline-start:calc(50% - 1px); width:2px; background:color-mix(in srgb, var(--block-accent, var(--primary)) 30%, transparent);}
html .editorial-steps-list[data-look="zigzag"] .editorial-step{display:grid; grid-template-columns:minmax(0, 1fr) 3rem minmax(0, 1fr); column-gap:20px; align-items:start; padding-bottom:28px; position:relative;}
html .editorial-steps-list[data-look="zigzag"] .editorial-step-n{grid-column:2; grid-row:1; width:3rem; height:3rem;}
html .editorial-steps-list[data-look="zigzag"] .editorial-step:nth-child(odd) .editorial-step-body{grid-column:1; grid-row:1; text-align:end;}
html .editorial-steps-list[data-look="zigzag"] .editorial-step:nth-child(even) .editorial-step-body{grid-column:3; grid-row:1;}
html .editorial-steps-list[data-look="zigzag"] .editorial-step-body{display:flex; flex-direction:column; gap:4px; padding-top:.5rem;}
/* numbers: large numerals over a rule, the words under. */
html .editorial-steps-list[data-look="numbers"]{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:clamp(20px, 3vw, 36px);}
html .editorial-steps-list[data-look="numbers"] .editorial-step{gap:12px;}
html .editorial-steps-list[data-look="numbers"] .editorial-step-n{width:auto; height:auto; border-radius:0; background:transparent; justify-content:flex-start;
color:var(--block-accent, var(--primary)); font-family:var(--font-heading, var(--font-display)), serif; font-size:clamp(3rem, 6vw, 4.5rem); line-height:1; font-weight:900;
padding-bottom:10px; border-bottom:2px solid currentColor; align-self:stretch;}
html .editorial-block[data-scheme] .editorial-steps-list[data-look="numbers"] .editorial-step-n{color:var(--sl-accent);}
/* ---------- «למה אנחנו» (why) ---------- */
/* stats: the number is the headline; a block without one shows its icon large. */
html .editorial-why-list[data-look="stats"] .editorial-why-item{gap:6px; padding:12px 16px;}
html .editorial-why-list[data-look="stats"] .editorial-why-item + .editorial-why-item{border-inline-start:1px solid var(--block-card-line, color-mix(in srgb, var(--primary) 16%, transparent));}
html .editorial-why-list[data-look="stats"] .editorial-why-item:has(.editorial-why-num) .editorial-why-icon{display:none;}
html .editorial-why-list[data-look="stats"] .editorial-why-num{font-family:var(--font-heading, var(--font-display)), serif; font-size:clamp(2.75rem, 5.5vw, 4.25rem); font-weight:900; line-height:1;}
html .editorial-why-list[data-look="stats"] .editorial-why-icon{width:4.25rem; height:4.25rem; background:transparent;}
html .editorial-why-list[data-look="stats"] .editorial-why-icon svg{width:3rem; height:3rem;}
/* columns: start-aligned, a rule at each column's start, the icon beside the title. */
html .editorial-why-list[data-look="columns"] .editorial-why-item{display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; column-gap:12px; row-gap:8px; text-align:start;
padding:4px 0 4px clamp(14px, 2vw, 20px); padding-inline-start:clamp(14px, 2vw, 20px); padding-inline-end:0; border-inline-start:3px solid var(--block-accent, var(--primary));}
html .editorial-why-list[data-look="columns"] .editorial-why-icon{width:2.25rem; height:2.25rem;}
html .editorial-why-list[data-look="columns"] .editorial-why-icon svg{width:1.25rem; height:1.25rem;}
html .editorial-why-list[data-look="columns"] .editorial-why-item > :not(.editorial-why-icon, h3){grid-column:1 / -1;}
html .editorial-why-list[data-look="columns"] .editorial-why-num{order:-1;}
html .editorial-why-list:is([data-look="columns"], [data-look="alternate"]) .editorial-why-num{justify-self:start; width:fit-content;}
html .editorial-why-list[data-look="alternate"] .editorial-why-item:nth-child(even) .editorial-why-num{justify-self:end;}
/* alternate: one block per row, a large icon tile on alternating sides. */
html .editorial-why-list[data-look="alternate"]{grid-template-columns:minmax(0, 1fr); max-width:820px; margin-inline:auto; gap:clamp(16px, 3vw, 28px);}
html .editorial-why-list[data-look="alternate"] .editorial-why-item{display:grid; grid-template-columns:7rem minmax(0, 1fr); column-gap:clamp(16px, 3vw, 32px); row-gap:4px; align-items:center; text-align:start; padding:0;}
html .editorial-why-list[data-look="alternate"] .editorial-why-icon{grid-row:1 / span 3; width:7rem; height:7rem; border-radius:var(--r-panel);}
html .editorial-why-list[data-look="alternate"] .editorial-why-icon svg{width:3rem; height:3rem;}
html .editorial-why-list[data-look="alternate"] .editorial-why-item:nth-child(even){grid-template-columns:minmax(0, 1fr) 7rem; text-align:end;}
html .editorial-why-list[data-look="alternate"] .editorial-why-item:nth-child(even) .editorial-why-icon{grid-column:2;}
html .editorial-why-list[data-look="alternate"] .editorial-why-item:nth-child(even) > :not(.editorial-why-icon){grid-column:1;}
/* ---------- «שורת אמון» (trust) ---------- */
html .editorial-trust-list[data-look="columns"] .editorial-trust-item{flex-direction:column; text-align:center; gap:10px; padding:8px 12px;}
html .editorial-trust-list[data-look="columns"] .editorial-trust-item + .editorial-trust-item{border-inline-start:1px solid var(--block-card-line, var(--line, #DDE5D9));}
html .editorial-trust-list[data-look="columns"] .editorial-trust-icon{width:3.5rem; height:3.5rem;}
html .editorial-trust-list[data-look="pills"]{display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
html .editorial-trust-list[data-look="pills"] .editorial-trust-item{padding:8px 18px 8px 10px; padding-inline:10px 18px; border-radius:999px; gap:8px;
background:var(--block-card, color-mix(in srgb, var(--primary) 8%, var(--card-bg, #fff))); border:1px solid var(--block-card-line, color-mix(in srgb, var(--primary) 16%, transparent));}
html .editorial-trust-list[data-look="pills"] .editorial-trust-icon{width:2rem; height:2rem;}
html .editorial-trust-list[data-look="pills"] .editorial-trust-icon svg{width:1.1rem; height:1.1rem;}
/* ---------- «רצועת תמונות» (strip) ---------- */
html .editorial-strip-list[data-look="frames"]{gap:var(--block-gap-desktop, 18px); align-items:start; padding-bottom:2rem;}
html .editorial-strip-list[data-look="frames"] figure{padding:12px; background:var(--block-card, var(--card-bg, #fff)); border:1px solid var(--block-card-line, color-mix(in srgb, var(--primary) 14%, transparent)); border-radius:var(--r-control);}
html .editorial-strip-list[data-look="frames"] img{aspect-ratio:4 / 5; border-radius:calc(var(--r-control) * .6);}
html .editorial-strip-list[data-look="frames"] .editorial-strip-item:nth-child(even){margin-top:2rem;}
html .editorial-strip-list[data-look="frames"] figcaption{text-align:center;}
/* ---------- phones: one column where two would squeeze ---------- */
@media (max-width:640px){
html .editorial-story[data-sl-look="editorial"] .editorial-copy,
html .editorial-imageText[data-sl-look="editorial"] .editorial-copy,
html .editorial-banner[data-sl-look="statement"] .editorial-copy{grid-template-columns:minmax(0, 1fr);}
html .editorial-story[data-sl-look="editorial"] .editorial-copy > .rich-text,
html .editorial-imageText[data-sl-look="editorial"] .editorial-copy > :not(.editorial-eyebrow, h2),
html .editorial-banner[data-sl-look="statement"] .editorial-copy > :not(.editorial-eyebrow, h2){grid-column:1; grid-row:auto; margin-top:12px;}
html .editorial-story[data-sl-look="editorial"] .editorial-copy > h2,
html .editorial-imageText[data-sl-look="editorial"] .editorial-copy > h2{font-size:calc(1.75rem * var(--block-title-scale-phone, 1));}
html .editorial-imageText[data-sl-look="editorial"] > img{aspect-ratio:4 / 3;}
html .editorial-imageText[data-sl-look="split"] > img{min-height:220px; max-height:300px;}
html .editorial-imageText[data-sl-look="split"] .editorial-copy{padding:20px 18px 24px;}
html .editorial-imageText[data-sl-look="circle"]{grid-template-columns:minmax(0, 1fr);}
html .editorial-imageText[data-sl-look="circle"] > img{max-width:220px;}
html .editorial-imageText[data-sl-look="framed"] > img{box-shadow:-10px 10px 0 0 color-mix(in srgb, var(--block-accent, var(--primary)) 28%, transparent); margin-inline-start:10px; margin-block-end:10px; width:calc(100% - 10px);}
html[dir="ltr"] .editorial-imageText[data-sl-look="framed"] > img{box-shadow:10px 10px 0 0 color-mix(in srgb, var(--block-accent, var(--primary)) 28%, transparent);}
html .editorial-block[data-sl-look="list"] .editorial-collection{grid-template-columns:minmax(0, 1fr);}
html .editorial-block[data-sl-look="feature"] .editorial-collection{grid-template-columns:minmax(0, 1fr);}
html .editorial-block[data-sl-look="feature"] .editorial-collection-item:first-child{grid-row:auto;}
html .editorial-faq[data-sl-look="columns"] .sl-faq-list,
html .editorial-faq[data-sl-look="cards"] .sl-faq-list,
html .editorial-faq[data-sl-look="side"]{grid-template-columns:minmax(0, 1fr);}
html .editorial-testimonials[data-sl-look="spotlight"] .editorial-reviews{grid-template-columns:minmax(0, 1fr);}
html .editorial-testimonials[data-sl-look="wall"] .editorial-reviews{columns:1;}
html .editorial-banner[data-sl-look="ribbon"] .editorial-copy{flex-direction:column; align-items:flex-start;}
html .editorial-banner[data-sl-look="ribbon"] .editorial-copy > *{flex:0 0 auto; align-self:flex-start; margin-inline:0;}
html .editorial-gallery[data-sl-look="mosaic"] .editorial-photos,
html .editorial-gallery[data-sl-look="stagger"] .editorial-photos{grid-template-columns:repeat(2, minmax(0, 1fr));}
html .editorial-gallery[data-sl-look="masonry"] .editorial-photos{columns:2;}
html .editorial-logos[data-sl-look="wall"] .editorial-logo-row{grid-template-columns:repeat(2, minmax(0, 1fr));}
html .editorial-logos[data-sl-look="wall"] .editorial-logo-row img{height:96px; padding:18px;}
html .editorial-video[data-sl-look="side"]{grid-template-columns:minmax(0, 1fr);}
html .editorial-video[data-sl-look="side"] .editorial-video-frame{margin-top:18px;}
html .editorial-video[data-sl-look="cinema"] .editorial-video-frame{aspect-ratio:16 / 9;}
html .editorial-featured[data-sl-look="spotlight"] .editorial-featured-grid[data-look="grid"]{grid-template-columns:repeat(2, minmax(0, 1fr));}
html .editorial-featured[data-sl-look="spotlight"] .editorial-featured-grid > .card:first-child{grid-row:auto;}
html .editorial-steps-list[data-look="zigzag"]::before{inset-inline-start:calc(1.5rem - 1px);}
html .editorial-steps-list[data-look="zigzag"] .editorial-step{grid-template-columns:3rem minmax(0, 1fr); column-gap:14px;}
html .editorial-steps-list[data-look="zigzag"] .editorial-step-n{grid-column:1;}
html .editorial-steps-list[data-look="zigzag"] .editorial-step:nth-child(n) .editorial-step-body{grid-column:2; text-align:start;}
html .editorial-steps-list[data-look="numbers"]{grid-template-columns:minmax(0, 1fr);}
html .editorial-steps-list[data-look="numbers"] .editorial-step{flex-direction:column;}
html .editorial-why-list[data-look="stats"]{grid-template-columns:repeat(2, minmax(0, 1fr));}
html .editorial-why-list[data-look="stats"] .editorial-why-item{display:flex; flex-direction:column; align-items:center; text-align:center; padding:12px 8px;}
html .editorial-why-list[data-look="stats"] .editorial-why-item + .editorial-why-item{border-inline-start:0;}
html .editorial-why-list[data-look="stats"] .editorial-why-icon{grid-row:auto;}
html .editorial-why-list[data-look="columns"] .editorial-why-item{padding-block:2px;}
html .editorial-why-list[data-look="columns"] .editorial-why-icon{grid-row:auto;}
html .editorial-why-list[data-look="alternate"] .editorial-why-item,
html .editorial-why-list[data-look="alternate"] .editorial-why-item:nth-child(even){grid-template-columns:4.5rem minmax(0, 1fr); text-align:start;}
html .editorial-why-list[data-look="alternate"] .editorial-why-icon,
html .editorial-why-list[data-look="alternate"] .editorial-why-item:nth-child(even) .editorial-why-icon{grid-column:1; width:4.5rem; height:4.5rem;}
html .editorial-why-list[data-look="alternate"] .editorial-why-item:nth-child(even) > :not(.editorial-why-icon){grid-column:2;}
html .editorial-trust-list[data-look="columns"] .editorial-trust-item + .editorial-trust-item{border-inline-start:0;}
html .editorial-trust-list[data-look="pills"]{justify-content:flex-start;}
html .editorial-strip-list[data-look="frames"]{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
/* section-premium.css */
/* The premium section looks (app/section-premium.js; docs/LAYOUTS.md
«מראות פרימיום»). Every rule needs data-sl-look with one of these looks
(or a wrapper section-premium.js adds), so no other section changes.
Colours from the section's tokens (--block-accent, --block-ink, the scheme's
--sl-*), sizes in rem, logical properties. Motion: transform and opacity
only, inside the one gate at the end; the still state is the finished
design. Specificity: html + kind class + attribute (0,2,1), as in
app/section-looks.css. */
html .editorial-block[data-sl-look] .pl-icon{width:1.25em; height:1.25em; flex:none;}
/* The arrow points toward the reading end: drawn for RTL, turned for LTR. */
html[dir="ltr"] .editorial-block .pl-arrow{transform:scaleX(-1);}
html .editorial-block[data-sl-look] .editorial-cta:has(.pl-arrow){gap:.6em;}
/* ---------- banner · kinetic «כותרת נעה» ---------- */
html .editorial-banner[data-sl-look="kinetic"]{--block-default-align:start; text-align:start; padding-block:clamp(48px, 9vw, 120px); padding-inline:clamp(20px, 6vw, 88px);}
html .editorial-banner[data-sl-look="kinetic"] .editorial-copy > h2{width:fit-content; max-width:min(100%, 18ch); margin:0 0 clamp(20px, 3vw, 32px);
font-size:calc(clamp(2.375rem, 6.4vw, 5rem) * var(--block-title-scale-desktop, 1)); line-height:1.06; font-weight:800; text-wrap:balance;}
html .editorial-banner[data-sl-look="kinetic"] .editorial-copy > h2::after{content:none;}
html .editorial-banner[data-sl-look="kinetic"] .pl-w{display:inline-block;}
html .editorial-banner[data-sl-look="kinetic"] .pl-line{display:block; height:.09em; min-height:3px; margin-top:.16em; border-radius:99px; background:var(--block-accent, var(--primary)); transform-origin:100% 50%;}
html[dir="ltr"] .editorial-banner[data-sl-look="kinetic"] .pl-line{transform-origin:0 50%;}
html .editorial-banner[data-sl-look="kinetic"] .editorial-copy > .rich-text{max-width:46ch; margin-inline:0; font-size:calc(clamp(1.0625rem, 1.5vw, 1.25rem) * var(--block-text-scale-desktop, 1)); line-height:1.6; text-wrap:pretty;}
html .editorial-banner[data-sl-look="kinetic"] .editorial-cta{margin-top:clamp(24px, 3vw, 36px);}
html .editorial-banner[data-sl-look="kinetic"]:has(> img){grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); column-gap:clamp(24px, 5vw, 72px);}
html .editorial-banner[data-sl-look="kinetic"] > img{order:2; aspect-ratio:4 / 5; max-height:560px; border-radius:var(--r-panel);}
/* ---------- banner · outline «מסגרת חיה» ---------- */
/* The frame: a turning conic field behind, the section's own ground 2px inside it. */
html .editorial-banner[data-sl-look="outline"]{--pl-ground:var(--block-background-desktop, var(--block-default-background, var(--card-bg, #fff)));
position:relative; isolation:isolate; border:0; padding:clamp(40px, 6vw, 80px) clamp(24px, 6vw, 88px); text-align:start; --block-default-align:start;
background:color-mix(in srgb, var(--block-accent, var(--primary)) 30%, var(--pl-ground));}
html .editorial-banner[data-sl-look="outline"] > .pl-frame{position:absolute; z-index:-2; left:50%; top:50%; /* centred on the box: physical on purpose, the same in both directions */
width:max(140%, 900px); aspect-ratio:1; translate:-50% -50%; pointer-events:none;
background:conic-gradient(from 0deg, transparent 0 14%, var(--block-accent, var(--primary)) 28%, transparent 44% 60%, var(--gold, var(--block-accent, var(--primary))) 76%, transparent 90%);}
html .editorial-banner[data-sl-look="outline"]::after{content:""; position:absolute; z-index:-1; inset:3px; border-radius:calc(var(--block-radius-desktop, var(--radius)) - 3px); background:var(--pl-ground);}
html .editorial-banner[data-sl-look="outline"] .editorial-copy{display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:clamp(24px, 5vw, 64px); align-items:center;}
html .editorial-banner[data-sl-look="outline"] .editorial-copy > *{grid-column:1; margin-inline:0;}
html .editorial-banner[data-sl-look="outline"] .editorial-copy > h2{margin:0 0 10px; font-size:calc(clamp(1.875rem, 4vw, 3.25rem) * var(--block-title-scale-desktop, 1)); line-height:1.12; text-wrap:balance;}
html .editorial-banner[data-sl-look="outline"] .editorial-copy > h2::after{content:none;}
html .editorial-banner[data-sl-look="outline"] .editorial-copy > .rich-text{max-width:52ch; margin:0; line-height:1.6;}
html .editorial-banner[data-sl-look="outline"] .editorial-copy > .editorial-cta{grid-column:2; grid-row:1 / span 4; margin:0;}
html .editorial-banner[data-sl-look="outline"] > img{max-height:200px; border-radius:var(--r-control);}
/* ---------- imageText · depth «שכבות» ---------- */
html .editorial-imageText[data-sl-look="depth"]{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:0; align-items:center; padding-block:clamp(32px, 6vw, 80px); overflow:clip;}
html .editorial-imageText[data-sl-look="depth"] .pl-depth-stage{position:relative; isolation:isolate; order:0; margin-block-end:clamp(16px, 2.5vw, 28px); margin-inline-start:clamp(16px, 2.5vw, 28px);}
html .editorial-imageText[data-sl-look="depth"] .pl-depth-plane{position:absolute; z-index:-1; inset:clamp(16px, 2.5vw, 28px) clamp(-28px, -2.5vw, -16px) clamp(-28px, -2.5vw, -16px) clamp(16px, 2.5vw, 28px);
border-radius:var(--r-panel); background:color-mix(in srgb, var(--block-accent, var(--primary)) 22%, var(--paper, #FBF7EF));}
html .editorial-imageText[data-sl-look="depth"] .pl-depth-stage > img{display:block; width:100%; aspect-ratio:4 / 3; max-height:none; object-fit:cover; border-radius:var(--r-panel);}
/* The words on a card that reaches over the photo's edge. */
html .editorial-imageText[data-sl-look="depth"] .editorial-copy{order:1; position:relative; z-index:1; margin-inline-start:clamp(-36px, -2.6vw, -18px); align-self:center;
padding:clamp(24px, 3.4vw, 44px); border-radius:var(--r-panel); background:var(--block-card, var(--card-bg, #fff));
box-shadow:0 24px 48px -28px color-mix(in srgb, var(--ink, #1C2B22) 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--ink, #1C2B22) 7%, transparent);}
html .editorial-imageText[data-sl-look="depth"] .editorial-copy > h2{font-size:calc(clamp(1.75rem, 3.4vw, 2.625rem) * var(--block-title-scale-desktop, 1)); line-height:1.12; text-wrap:balance;}
html .editorial-imageText[data-sl-look="depth"] .editorial-copy > .rich-text{line-height:1.65; text-wrap:pretty; margin-inline:0;}
html .editorial-imageText[data-sl-look="depth"][data-pl-bare]{grid-template-columns:minmax(0, 1fr);}
html .editorial-imageText[data-sl-look="depth"][data-pl-bare] .editorial-copy{margin-inline:0; max-width:60ch;}
/* ---------- story · aurora «רקע זורם» ---------- */
html .editorial-story[data-sl-look="aurora"]{position:relative; isolation:isolate; overflow:hidden; --block-default-align:start; text-align:start; --block-default-width:1084px;
--block-default-background:color-mix(in srgb, var(--block-accent, var(--primary)) 6%, var(--paper, #FBF7EF)); padding-block:clamp(56px, 9vw, 128px); padding-inline:clamp(20px, 6vw, 96px);}
/* Two soft fields on one layer bigger than the box: turning it moves both. */
html .editorial-story[data-sl-look="aurora"] > .pl-aurora{position:absolute; z-index:-1; inset:-40% -20%; pointer-events:none;
background:radial-gradient(closest-side at 28% 34%, color-mix(in srgb, var(--block-accent, var(--primary)) 30%, transparent), transparent),
radial-gradient(closest-side at 74% 70%, color-mix(in srgb, var(--gold, var(--block-accent, var(--primary))) 34%, transparent), transparent);}
/* A fine grain over the ground, still. */
html .editorial-story[data-sl-look="aurora"]::after{content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.07; mix-blend-mode:multiply;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");}
html .editorial-story[data-sl-look="aurora"][data-scheme-dark]::after{mix-blend-mode:screen; opacity:.06;}
html .editorial-story[data-sl-look="aurora"]:has(> img){grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);}
html .editorial-story[data-sl-look="aurora"] > img{aspect-ratio:1; border-radius:50%; max-width:420px; justify-self:center;}
html .editorial-story[data-sl-look="aurora"] .editorial-copy > h2{max-width:20ch; font-size:calc(clamp(2.125rem, 5vw, 4rem) * var(--block-title-scale-desktop, 1)); line-height:1.08; text-wrap:balance; margin-bottom:clamp(18px, 2.6vw, 28px);}
html .editorial-story[data-sl-look="aurora"] .editorial-copy > .rich-text{max-width:56ch; margin-inline:0; font-size:calc(clamp(1.0625rem, 1.4vw, 1.1875rem) * var(--block-text-scale-desktop, 1)); line-height:1.7; text-wrap:pretty;}
/* ---------- why · bento «אריחים» ---------- */
html .editorial-why[data-sl-look="bento"]{--block-default-align:start; text-align:start;}
html .editorial-why[data-sl-look="bento"] .editorial-why-list{grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-rows:minmax(170px, auto); gap:var(--block-gap-desktop, 14px); margin-top:clamp(24px, 3vw, 36px);}
html .editorial-why[data-sl-look="bento"] .editorial-why-item{display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; text-align:start; gap:12px; padding:clamp(20px, 2.4vw, 28px);
border-radius:var(--r-panel); background:var(--block-card, color-mix(in srgb, var(--block-accent, var(--primary)) 5%, var(--card-bg, #fff)));
border:1px solid var(--block-card-line, color-mix(in srgb, var(--block-accent, var(--primary)) 12%, transparent)); grid-column:span 2;}
html .editorial-why[data-sl-look="bento"] .editorial-why-item > h3{margin-top:auto;}
html .editorial-why[data-sl-look="bento"] .editorial-why-item:first-child{grid-row:span 2;}
html .editorial-why[data-sl-look="bento"] [data-pl-n="1"] .editorial-why-item{grid-column:1 / -1; grid-row:auto;}
html .editorial-why[data-sl-look="bento"] [data-pl-n="2"] .editorial-why-item:first-child{grid-row:auto;}
html .editorial-why[data-sl-look="bento"] [data-pl-n="4"] .editorial-why-item:nth-child(n+3){grid-column:span 1;}
html .editorial-why[data-sl-look="bento"] .editorial-why-icon{width:3rem; height:3rem; border-radius:var(--r-control); color:var(--block-accent, var(--primary));
background:color-mix(in srgb, var(--block-accent, var(--primary)) 12%, transparent);}
html .editorial-why[data-sl-look="bento"] .editorial-why-icon svg{width:1.5rem; height:1.5rem;}
html .editorial-why[data-sl-look="bento"] .editorial-why-num{font-family:var(--font-heading, var(--font-display)), serif; font-variant-numeric:tabular-nums lining-nums; line-height:1; font-size:clamp(2rem, 3.6vw, 2.75rem);}
html .editorial-why[data-sl-look="bento"] .editorial-why-item:first-child .editorial-why-num{font-size:clamp(3rem, 7vw, 5.5rem);}
html .editorial-why[data-sl-look="bento"] .editorial-why-item > h3{font-size:1.25rem; line-height:1.25;}
html .editorial-why[data-sl-look="bento"] .editorial-why-item p{font-size:calc(1rem * var(--sec-text, 1));}
html .editorial-why[data-sl-look="bento"] .editorial-why-item:first-child > h3{font-size:clamp(1.5rem, 2.4vw, 1.875rem);}
html .editorial-why[data-sl-look="bento"] .editorial-why-item:first-child p{font-size:calc(1.125rem * var(--sec-text, 1));}
html .editorial-why[data-sl-look="bento"] .editorial-why-item:first-child .editorial-why-icon{width:4rem; height:4rem;}
html .editorial-why[data-sl-look="bento"] .editorial-why-item:first-child .editorial-why-icon svg{width:2rem; height:2rem;}
html .editorial-why[data-sl-look="bento"] .editorial-why-item p{max-width:40ch;}
/* ---------- steps · ledger «מספרים בצד» ---------- */
html .editorial-steps[data-sl-look="ledger"]{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); column-gap:clamp(24px, 6vw, 96px); align-items:start; --block-default-align:start; text-align:start;}
html .editorial-steps[data-sl-look="ledger"] .editorial-copy > h2{font-size:calc(clamp(1.875rem, 4vw, 3.25rem) * var(--block-title-scale-desktop, 1)); line-height:1.1; text-wrap:balance;}
html .editorial-steps[data-sl-look="ledger"] .editorial-copy > .rich-text{margin-inline:0; max-width:40ch;}
html .editorial-steps[data-sl-look="ledger"] .editorial-steps-list{display:block; margin:0;}
html .editorial-steps[data-sl-look="ledger"] .editorial-step{display:grid; grid-template-columns:clamp(4.5rem, 9vw, 7.5rem) minmax(0, 1fr); align-items:start; column-gap:clamp(16px, 2.4vw, 32px);
position:relative; padding-block:clamp(20px, 2.6vw, 32px); text-align:start;}
html .editorial-steps[data-sl-look="ledger"] .editorial-step::before{content:""; position:absolute; inset-inline:0; top:0; height:1px; background:var(--block-card-line, color-mix(in srgb, var(--block-ink, var(--ink)) 22%, transparent)); transform-origin:100% 50%;}
html[dir="ltr"] .editorial-steps[data-sl-look="ledger"] .editorial-step::before{transform-origin:0 50%;}
html .editorial-steps[data-sl-look="ledger"] .editorial-step-n{width:auto; height:auto; display:block; overflow:hidden; border-radius:0; background:none; box-shadow:none; color:var(--block-accent, var(--primary));
font-family:var(--font-heading, var(--font-display)), serif; font-weight:700; font-size:clamp(3.5rem, 8vw, 6.5rem); line-height:.82; font-variant-numeric:tabular-nums lining-nums; text-align:start; padding-bottom:.04em;}
html .editorial-steps[data-sl-look="ledger"] .editorial-step-body{padding-top:.35rem;}
html .editorial-steps[data-sl-look="ledger"] .editorial-step h3{font-size:1.25rem; margin-bottom:6px;}
/* ---------- strip · reveal «שמות רצים» ---------- */
html .editorial-strip[data-sl-look="reveal"]{--block-default-align:start; text-align:start; overflow:hidden;}
html .editorial-strip[data-sl-look="reveal"] .pl-reel{margin-inline:calc(-1 * clamp(20px, 4vw, 44px)); margin-top:clamp(12px, 2vw, 24px); overflow:hidden; padding-block:clamp(48px, 6.5vw, 88px) 8px;}
html .editorial-strip[data-sl-look="reveal"] .pl-reel-track{display:flex; width:max-content;}
html .editorial-strip[data-sl-look="reveal"] .pl-reel-half{display:flex; flex:none;}
html .editorial-strip[data-sl-look="reveal"] .pl-reel-round{display:flex; list-style:none; margin:0; padding:0;}
html .editorial-strip[data-sl-look="reveal"] .pl-reel-item{position:relative; display:flex; align-items:center; gap:clamp(16px, 2.4vw, 32px); padding-inline-end:clamp(16px, 2.4vw, 32px); white-space:nowrap;}
html .editorial-strip[data-sl-look="reveal"] .pl-reel-word{font-family:var(--font-heading, var(--font-display)), serif; font-weight:700; line-height:1.1; font-size:calc(clamp(2.25rem, 6vw, 4.75rem) * var(--block-title-scale-desktop, 1)); color:var(--block-ink, var(--ink));}
html .editorial-strip[data-sl-look="reveal"] .pl-reel-sep{width:clamp(1.5rem, 3vw, 2.5rem); height:auto; aspect-ratio:1; color:var(--block-accent, var(--primary));}
/* The photo: over its word, small and turned until the word is pointed at. */
html .editorial-strip[data-sl-look="reveal"] .pl-reel-photo{position:absolute; bottom:72%; inset-inline-start:calc(50% - 4.5rem); width:6.5rem; aspect-ratio:4 / 5; object-fit:cover; border-radius:var(--r-control);
opacity:0; visibility:hidden; transform:translateY(12px) rotate(-5deg) scale(.86); pointer-events:none; box-shadow:0 18px 32px -18px color-mix(in srgb, var(--ink, #1C2B22) 55%, transparent);}
html .editorial-strip[data-sl-look="reveal"] .pl-reel-item:hover .pl-reel-photo{opacity:1; visibility:visible; transform:none;}
html .editorial-strip[data-sl-look="reveal"] .pl-reel-item:hover .pl-reel-word{color:var(--block-accent, var(--primary));}
@media (hover:none){
html .editorial-strip[data-sl-look="reveal"] .pl-reel{padding-block:12px;}
html .editorial-strip[data-sl-look="reveal"] .pl-reel-photo{position:static; order:-1; width:auto; height:.9em; font-size:calc(clamp(2.25rem, 6vw, 4.75rem) * var(--block-title-scale-desktop, 1)); aspect-ratio:1; border-radius:50%; opacity:1; visibility:visible; transform:none; box-shadow:none;}
}
/* ---------- testimonials · stack «ערימה» ---------- */
html .editorial-testimonials[data-sl-look="stack"]{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); column-gap:clamp(24px, 6vw, 88px); align-items:center; --block-default-align:start; text-align:start;}
html .editorial-testimonials[data-sl-look="stack"] .editorial-copy{grid-row:1 / span 2;}
html .editorial-testimonials[data-sl-look="stack"] .editorial-copy > h2{font-size:calc(clamp(1.875rem, 4vw, 3rem) * var(--block-title-scale-desktop, 1)); line-height:1.1; text-wrap:balance;}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck{display:grid; grid-template-columns:minmax(0, 1fr); margin:clamp(24px, 3vw, 36px) clamp(12px, 2vw, 24px) 0;}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck > .editorial-review{grid-area:1 / 1; padding:clamp(24px, 3vw, 40px); background:var(--block-card, var(--card-bg, #fff));
box-shadow:0 22px 44px -30px color-mix(in srgb, var(--ink, #1C2B22) 50%, transparent);}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck blockquote{padding-top:0;}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck blockquote::before{content:none;}
html .editorial-testimonials[data-sl-look="stack"] .pl-quote{width:2.25rem; height:2.25rem; color:var(--block-accent, var(--primary));}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck blockquote p{font-size:calc(clamp(1.125rem, 1.8vw, 1.375rem) * var(--sec-text, 1)); line-height:1.55; text-wrap:pretty;}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck > [data-pl-pos="1"]{transform:translate(-14px, 10px) rotate(-2.2deg) scale(.97);}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck > [data-pl-pos="2"]{transform:translate(12px, 18px) rotate(1.8deg) scale(.94);}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck > [data-pl-pos="3"]{transform:translate(0, 22px) scale(.92); opacity:0;}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck > :not([data-pl-pos="0"]) > *{opacity:0; visibility:hidden;}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck-bar{display:flex; align-items:center; gap:16px; margin-top:clamp(28px, 3vw, 40px); justify-content:center; grid-column:2;}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck-count{min-width:4.5ch; text-align:center; font-variant-numeric:tabular-nums; font-weight:600;}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck-step{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border-radius:50%; cursor:pointer;
border:1.5px solid var(--block-accent, var(--primary)); background:transparent; color:var(--block-accent, var(--primary));}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck-step:hover{background:var(--block-accent, var(--primary)); color:var(--block-card, var(--card-bg, #fff));}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck-step .pl-icon{width:22px; height:22px;}
/* «הבאה» points toward the reading end (left in RTL). */
html .editorial-testimonials[data-sl-look="stack"] .pl-deck-prev .pl-icon{transform:scaleX(-1);}
html[dir="ltr"] .editorial-testimonials[data-sl-look="stack"] .pl-deck-prev .pl-icon{transform:none;}
html[dir="ltr"] .editorial-testimonials[data-sl-look="stack"] .pl-deck-next .pl-icon{transform:scaleX(-1);}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck-step:focus-visible{outline:var(--focus-ring-width, 2px) solid var(--focus-ring, #0B5FFF); outline-offset:2px;}
/* The words first in these looks, on both screens (theme.css orders the copy after a section's own list). */
html :is(.editorial-steps[data-sl-look="ledger"], .editorial-testimonials[data-sl-look="stack"], .editorial-why[data-sl-look="bento"], .editorial-strip[data-sl-look="reveal"]) .editorial-copy{order:var(--block-text-order-desktop, 0);}
@media (max-width:640px){html :is(.editorial-steps[data-sl-look="ledger"], .editorial-testimonials[data-sl-look="stack"], .editorial-why[data-sl-look="bento"], .editorial-strip[data-sl-look="reveal"]) .editorial-copy{order:var(--block-text-order-phone, 0);}}
/* ---------- phone ---------- */
@media (max-width:640px){
html .editorial-banner[data-sl-look="kinetic"]{padding-block:clamp(40px, 12vw, 64px); padding-inline:20px;}
html .editorial-banner[data-sl-look="kinetic"] .editorial-copy > h2{font-size:calc(clamp(2.25rem, 10vw, 3rem) * var(--block-title-scale-phone, 1)); max-width:100%;}
html .editorial-banner[data-sl-look="kinetic"]:has(> img){grid-template-columns:minmax(0, 1fr);}
html .editorial-banner[data-sl-look="kinetic"] > img{order:0; aspect-ratio:4 / 3;}
html .editorial-banner[data-sl-look="outline"]{--pl-ground:var(--block-background-phone, var(--block-default-background, var(--card-bg, #fff))); padding:32px 22px;}
html .editorial-banner[data-sl-look="outline"]::after{border-radius:calc(var(--block-radius-phone, var(--radius)) - 2px);}
html .editorial-banner[data-sl-look="outline"] .editorial-copy{grid-template-columns:minmax(0, 1fr);}
html .editorial-banner[data-sl-look="outline"] .editorial-copy > .editorial-cta{grid-column:1; grid-row:auto; justify-self:start; margin-top:20px;}
html .editorial-banner[data-sl-look="outline"] .editorial-copy > h2{font-size:calc(clamp(1.625rem, 7vw, 2rem) * var(--block-title-scale-phone, 1));}
html .editorial-imageText[data-sl-look="depth"]{grid-template-columns:minmax(0, 1fr); padding-block:24px 28px;}
html .editorial-imageText[data-sl-look="depth"] .editorial-copy{margin-inline:12px 0; margin-top:-22px; padding:26px 22px;}
html .editorial-imageText[data-sl-look="depth"] .pl-depth-stage{margin-inline-start:0; margin-inline-end:14px;}
html .editorial-imageText[data-sl-look="depth"] .pl-depth-plane{inset:14px -14px -14px 14px;}
html .editorial-imageText[data-sl-look="depth"] .editorial-copy > h2{font-size:calc(clamp(1.625rem, 7vw, 2rem) * var(--block-title-scale-phone, 1));}
html .editorial-story[data-sl-look="aurora"]{padding:48px 20px;}
html .editorial-story[data-sl-look="aurora"] .editorial-copy > h2{font-size:calc(clamp(2rem, 9vw, 2.75rem) * var(--block-title-scale-phone, 1));}
html .editorial-story[data-sl-look="aurora"] > img{max-width:220px;}
html .editorial-why[data-sl-look="bento"] .editorial-why-list{grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:auto; gap:var(--block-gap-phone, 10px);}
html .editorial-why[data-sl-look="bento"] .editorial-why-list .editorial-why-item{grid-column:span 1; grid-row:auto; display:flex; padding:18px;}
html .editorial-why[data-sl-look="bento"] .editorial-why-list .editorial-why-item:first-child,
html .editorial-why[data-sl-look="bento"] [data-pl-n="1"] .editorial-why-item,
html .editorial-why[data-sl-look="bento"] [data-pl-n="4"] .editorial-why-item:last-child{grid-column:1 / -1;}
html .editorial-why[data-sl-look="bento"] [data-pl-n="2"] .editorial-why-item{grid-column:1 / -1;}
html .editorial-steps[data-sl-look="ledger"]{grid-template-columns:minmax(0, 1fr);}
html .editorial-steps[data-sl-look="ledger"] .editorial-copy > h2{font-size:calc(clamp(1.75rem, 8vw, 2.25rem) * var(--block-title-scale-phone, 1));}
html .editorial-steps[data-sl-look="ledger"] .editorial-steps-list{margin-top:12px;}
html .editorial-steps[data-sl-look="ledger"] .editorial-step{grid-template-columns:4rem minmax(0, 1fr); column-gap:14px; padding-block:20px;}
html .editorial-steps[data-sl-look="ledger"] .editorial-step-n{font-size:3.5rem;}
html .editorial-strip[data-sl-look="reveal"] .pl-reel{margin-inline:-18px;}
html .editorial-strip[data-sl-look="reveal"] .pl-reel-word{font-size:calc(2.25rem * var(--block-title-scale-phone, 1));}
html .editorial-testimonials[data-sl-look="stack"]{grid-template-columns:minmax(0, 1fr);}
html .editorial-testimonials[data-sl-look="stack"] .editorial-copy{grid-row:auto;}
html .editorial-testimonials[data-sl-look="stack"] .pl-deck-bar{grid-column:1;}
}
/* ---------- motion: one gate ---------- */
/* Nested under the one gate; a browser without CSS nesting shows the still design. */
@media (prefers-reduced-motion: no-preference){ html:not([data-motion="off"]):not([data-a11y-motion="1"]){
.editorial-block[data-sl-look] :is(.pl-arrow, .pl-deck-step .pl-icon){transition:translate .22s cubic-bezier(.2, .7, .2, 1);}
.editorial-block[data-sl-look] .editorial-cta:hover .pl-arrow{translate:-4px 0;}
&[dir="ltr"] .editorial-block[data-sl-look] .editorial-cta:hover .pl-arrow{translate:4px 0;}
.editorial-testimonials[data-sl-look="stack"] .pl-deck-step:active .pl-icon{translate:0 1px;}
/* kinetic: the words rise in turn (70 ms apart), then the line draws. */
.editorial-banner[data-sl-look="kinetic"][data-pl-in] .pl-w{animation:pl-rise .72s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay:calc(var(--i) * 70ms);}
.editorial-banner[data-sl-look="kinetic"][data-pl-in] .pl-line{animation:pl-draw .7s cubic-bezier(.6, 0, .2, 1) backwards; animation-delay:calc(var(--pl-words, 3) * 70ms + 260ms);}
.editorial-banner[data-sl-look="kinetic"][data-pl-in] .editorial-copy > :not(h2){animation:pl-fade .6s ease-out backwards; animation-delay:calc(var(--pl-words, 3) * 70ms + 180ms);}
/* outline: the field turns once every 16 s. */
.editorial-banner[data-sl-look="outline"] > .pl-frame{animation:pl-turn 16s linear infinite;}
/* depth: the photo and its plane part with the scroll (no script). */
@supports (animation-timeline: view()){
.editorial-imageText[data-sl-look="depth"] .pl-depth-stage > img{animation:pl-up linear both; animation-timeline:view(); animation-range:cover;}
.editorial-imageText[data-sl-look="depth"] .pl-depth-plane{animation:pl-down linear both; animation-timeline:view(); animation-range:cover;}
}
.editorial-imageText[data-sl-look="depth"][data-pl-in] .editorial-copy{animation:pl-slide .8s cubic-bezier(.2, .7, .2, 1) .12s backwards;}
/* aurora: the fields turn once a minute. */
.editorial-story[data-sl-look="aurora"] > .pl-aurora{animation:pl-turn 60s linear infinite;}
/* bento: the tiles settle, each icon turns in. */
.editorial-why[data-sl-look="bento"][data-pl-in] .editorial-why-item{animation:pl-rise-sm .6s cubic-bezier(.2, .7, .2, 1) backwards;}
.editorial-why[data-sl-look="bento"][data-pl-in] .editorial-why-item:nth-child(2){animation-delay:80ms;}
.editorial-why[data-sl-look="bento"][data-pl-in] .editorial-why-item:nth-child(3){animation-delay:160ms;}
.editorial-why[data-sl-look="bento"][data-pl-in] .editorial-why-item:nth-child(4){animation-delay:240ms;}
.editorial-why[data-sl-look="bento"][data-pl-in] .editorial-why-icon svg{animation:pl-pop .7s cubic-bezier(.3, 1.4, .5, 1) .3s backwards;}
.editorial-why[data-sl-look="bento"] .editorial-why-icon svg{transition:transform .3s cubic-bezier(.2, .7, .2, 1);}
.editorial-why[data-sl-look="bento"] .editorial-why-item:hover .editorial-why-icon svg{transform:translateY(-2px) rotate(-6deg);}
/* ledger: each rule draws, each numeral rises inside its own line. */
.editorial-steps[data-sl-look="ledger"][data-pl-in] .editorial-step::before{animation:pl-draw .8s cubic-bezier(.6, 0, .2, 1) backwards;}
.editorial-steps[data-sl-look="ledger"][data-pl-in] .editorial-step-n{animation:pl-fade .6s ease-out .2s backwards;}
/* reveal: the band runs one way, stops under the pointer; the photo turns in. */
.editorial-strip[data-sl-look="reveal"] .pl-reel-track{animation:pl-reel 48s linear infinite;}
&[dir="ltr"] .editorial-strip[data-sl-look="reveal"] .pl-reel-track{animation-name:pl-reel-ltr;}
.editorial-strip[data-sl-look="reveal"] .pl-reel:hover .pl-reel-track{animation-play-state:paused;}
.editorial-strip[data-sl-look="reveal"] :is(.pl-reel-photo, .pl-reel-word){transition:opacity .3s ease, visibility .3s, transform .45s cubic-bezier(.2, .7, .2, 1);}
/* stack: the deck turns. */
.editorial-testimonials[data-sl-look="stack"] .pl-deck > .editorial-review,
.editorial-testimonials[data-sl-look="stack"] .pl-deck > .editorial-review > *{transition:transform .5s cubic-bezier(.2, .7, .2, 1), opacity .35s ease, visibility .35s;}
.editorial-testimonials[data-sl-look="stack"][data-pl-in] .pl-deck{animation:pl-rise-sm .7s cubic-bezier(.2, .7, .2, 1) backwards;}
}}
/* Still: the band stands as a wrapped list of its words, once. */
@media (prefers-reduced-motion: reduce){
html .editorial-strip[data-sl-look="reveal"] .pl-reel-track{width:auto;}
html .editorial-strip[data-sl-look="reveal"] .pl-reel-half{flex-wrap:wrap; flex:1 1 auto;}
html .editorial-strip[data-sl-look="reveal"] .pl-reel-half + .pl-reel-half, html .editorial-strip[data-sl-look="reveal"] .pl-reel-round[aria-hidden]{display:none;}
html .editorial-strip[data-sl-look="reveal"] .pl-reel-round{flex-wrap:wrap; row-gap:8px; padding-inline:clamp(20px, 4vw, 44px);}
}
html:is([data-motion="off"], [data-a11y-motion="1"]) .editorial-strip[data-sl-look="reveal"] .pl-reel-track{width:auto;}
html:is([data-motion="off"], [data-a11y-motion="1"]) .editorial-strip[data-sl-look="reveal"] .pl-reel-half{flex-wrap:wrap; flex:1 1 auto;}
html:is([data-motion="off"], [data-a11y-motion="1"]) .editorial-strip[data-sl-look="reveal"] :is(.pl-reel-half + .pl-reel-half, .pl-reel-round[aria-hidden]){display:none;}
html:is([data-motion="off"], [data-a11y-motion="1"]) .editorial-strip[data-sl-look="reveal"] .pl-reel-round{flex-wrap:wrap; row-gap:8px; padding-inline:clamp(20px, 4vw, 44px);}
@keyframes pl-rise{from{opacity:0; transform:translateY(.45em);}}
@keyframes pl-rise-sm{from{opacity:0; transform:translateY(18px);}}
@keyframes pl-fade{from{opacity:0; transform:translateY(8px);}}
@keyframes pl-slide{from{opacity:0; transform:translateY(28px);}}
@keyframes pl-draw{from{transform:scaleX(0);}}
@keyframes pl-pop{from{opacity:0; transform:scale(.4) rotate(-24deg);}}
@keyframes pl-turn{to{rotate:360deg;}}
@keyframes pl-up{from{transform:translateY(18px);} to{transform:translateY(-18px);}}
@keyframes pl-down{from{transform:translateY(-14px);} to{transform:translateY(14px);}}
@keyframes pl-reel{to{transform:translateX(50%);}}
@keyframes pl-reel-ltr{to{transform:translateX(-50%);}}
/* card-library-wave.css */
/* «עיצובים», wave 1 (2026-11-08, Michael's editor): ten more designs of the product card, each its own shape, photo, price
place and type, so no two read alike (owner: «כולם די דומות»). Same contract as app/card-library.css, which this file
follows: nothing applies without html[data-card-design=""]; each design is a block of --cd-* values plus only what no
variable can say; the add control, the after-add states, deals, sold out, sizes and the owner's colours are the card's own.
Fixed colours only where a material is drawn (wood, kraft, white plate), always with their own text colour. */
html[data-card-design]{--cd-wood:#8A6238;--cd-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;}
@supports (color:color-mix(in srgb,red,blue)){html[data-card-design]{--cd-wood:color-mix(in srgb,var(--gold) 40%,#6B4423);}}
/* ויטרינה: a tall glass case: the product on a light shelf behind glass (a sheen and a fine double edge), a dark plinth under it, the type centred. */
html[data-card-design="vitrine"]{--cd-bd:none;--cd-pad:12px;--cd-r:var(--r-panel);--cd-ar:3/4;--cd-im:0 0 12px;--cd-ip:12% 10% 22%;--cd-fit:contain;--cd-ir:var(--r-control);--cd-ibg:linear-gradient(var(--paper),var(--cd-tint));--cd-blend:multiply;--cd-ish:inset 0 0 0 1px var(--cd-mix),inset 0 0 0 5px var(--paper),inset 0 0 0 6px var(--cd-mix);--cd-nf:var(--font-display);--cd-nw:400;--cd-ns:1.0625rem;--cd-ps:1.0625rem;--cd-pw:700;--cd-sh:0 1px 2px var(--cd-mix),0 18px 30px -20px var(--ink);}
html[data-card-design="vitrine"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img::before{content:"";position:absolute;inset-inline:6px;bottom:6px;height:12%;border-radius:0 0 calc(var(--r-control) - 4px) calc(var(--r-control) - 4px);background:var(--ink);opacity:.82;pointer-events:none;}
html[data-card-design="vitrine"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img::after{content:"";position:absolute;inset:6px;border-radius:calc(var(--r-control) - 4px);background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.55) 36%,transparent 44%,transparent 56%,rgba(255,255,255,.3) 60%,transparent 64%);pointer-events:none;}
/* לוח גיר: a chalkboard in a wooden frame: the photo pinned on it, the name and a big price written in chalk, a dashed chalk line around. */
html[data-card-design="chalk"]{--cd-bd:none;--cd-r:var(--r-control);--cd-pad:16px;--cd-ar:1/1;--cd-im:2px 6% 12px;--cd-ip:7%;--cd-fit:contain;--cd-ibg:#fff;--cd-ir:var(--r-chip);--cd-ish:0 6px 12px -6px #000;--cd-nf:var(--font-display);--cd-nw:400;--cd-ns:1.125rem;--cd-pf:var(--font-display);--cd-pw:400;--cd-ps:1.75rem;--cd-sh:inset 0 0 0 6px var(--cd-wood),inset 0 0 0 7px rgba(0,0,0,.35);}
html[data-card-design="chalk"][data-cd-ground] :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not([style*="--ui-card-bg"]){background:radial-gradient(60% 40% at 30% 20%,rgba(255,255,255,.06),transparent),radial-gradient(50% 30% at 80% 85%,rgba(255,255,255,.05),transparent),var(--cd-ground);}
html[data-card-design="chalk"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase){outline:1.5px dashed var(--cd-on);outline-offset:-13px;}
html[data-card-design="chalk"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):not(.is-oos) > .card-img{rotate:-1.5deg;}
html[data-card-design="chalk"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > img{mix-blend-mode:normal;}
html[data-card-design="chalk"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line] .price-amount{text-decoration:underline wavy;text-decoration-thickness:1px;text-underline-offset:.3em;}
html[data-card-design="chalk"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line] .price-unit{font-size:.5em;color:inherit;}
/* תווית אובלית: the photo cropped clean, the name inside an oval label with a double rule, the price quiet under it. */
html[data-card-design="oval"]{--cd-bd:none;--cd-pad:12px;--cd-ar:1/1;--cd-im:-12px -12px 12px;--cd-fit:cover;--cd-ip:0px;--cd-ir:var(--cd-r) var(--cd-r) 0 0;--cd-ibg:var(--cd-tint);--cd-nf:var(--font-display);--cd-nw:400;--cd-ns:1rem;--cd-ps:1rem;--cd-pw:600;--cd-sh:inset 0 0 0 1px var(--cd-mix);}
html[data-card-design="oval"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{align-self:center;max-width:100%;min-height:3.25rem;display:flex;align-items:center;justify-content:center;margin:0 0 8px;padding:.5em 1.25em;border-radius:50%;border:1.5px solid var(--ink);box-shadow:inset 0 0 0 3px var(--cd-bg),inset 0 0 0 4px var(--ink);line-height:1.2;}
/* מסגרת צבע: a thick tinted frame round the photo, the price a coloured tab cut into the frame's top corner (the start one: the ⓘ keeps the end). */
html[data-card-design="framed"]{--cd-bd:none;--cd-bg:var(--ui-card-bg,var(--cd-tint));--cd-r:calc(var(--r-panel) * 1.4);--cd-pad:8px;--cd-ar:1/1;--cd-im:0 0 10px;--cd-fit:cover;--cd-ip:0px;--cd-ir:var(--r-panel);--cd-ibg:#fff;--cd-ta:start;--cd-as:flex-start;--cd-nw:700;}
html[data-card-design="framed"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]{order:-3;align-self:flex-start;margin:calc(var(--cd-pad) * -1) 0 8px;margin-inline:calc(var(--cd-pad) * -1) 0;padding:6px 14px;min-height:2.25rem;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 4px;background:var(--primary);color:var(--cd-on-primary);--ui-price-text:var(--cd-on-primary);--accent-deep:var(--cd-on-primary);--ink:var(--cd-on-primary);--ink-soft:var(--cd-on-primary);border-radius:0;border-start-start-radius:var(--cd-r);border-end-end-radius:var(--r-panel);}
html[data-card-design="framed"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line] .price-unit{color:inherit;}
html[data-card-design="framed"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase):has(> .product-details-open) > .price-tag[data-price-line]{max-width:calc(100% - 2.5rem);}
html[data-card-design="framed"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > :is(.card-name,.card-producer,.card-marks,.deal-was,.offer-regular-price,.tier-hint){padding-inline:4px;}
/* תווית מעבדה: a spec label: a hairline grid, a numbered entry, everything set in a typewriter face, a square button. */
html[data-card-design="lab"]{--cd-bd:1px solid var(--ink);--cd-r:0px;--cd-ir:0px;--cd-pad:0px;--cd-ar:1/1;--cd-im:0;--cd-ip:14%;--cd-fit:contain;--cd-ibg:var(--paper-dim);--cd-blend:multiply;--cd-ta:start;--cd-as:stretch;--cd-pf:var(--cd-mono);--cd-nw:700;--cd-ns:.875rem;--cd-ps:1rem;--cd-pw:700;}
html[data-card-design="lab"]:not([data-layout-catalog]) #catalog .product-grid{counter-reset:cdlab;}
html[data-card-design="lab"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase){counter-increment:cdlab;}
html[data-card-design="lab"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{border-block-end:1px solid var(--ink);}
html[data-card-design="lab"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > *:not(.card-img):not(.product-details-open){margin-inline:var(--cd-lab-x,10px);}
html[data-card-design="lab"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{margin-block:8px 4px;line-height:1.3;}
html[data-card-design="lab"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name::before{content:"N°" counter(cdlab,decimal-leading-zero);font-family:var(--cd-mono);margin-inline-end:.5em;font-weight:400;font-size:.75rem;color:var(--ink);unicode-bidi:isolate;}
html[data-card-design="lab"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]{margin-block:6px 4px;padding-block-start:6px;border-block-start:1px dashed var(--ink);font-variant-numeric:tabular-nums;}
html[data-card-design="lab"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase).boutique-card > .price-tag{width:auto;}
html[data-card-design="lab"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row{margin:8px var(--cd-lab-x,10px) 10px;max-width:calc(100% - 2 * var(--cd-lab-x,10px));}
html[data-card-design="lab"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .qty-row .qty-btn{border-radius:0;}
/* משקל: a shop scale: the product on its steel tray, the price lit on a dark read-out under it, as the scale shows it. */
html[data-card-design="scale"]{--cd-bd:1px solid var(--cd-mix);--cd-r:calc(var(--r-panel) * 1.25);--cd-pad:10px;--cd-bg:var(--ui-card-bg,var(--paper-dim));--cd-ar:4/3;--cd-im:0 0 10px;--cd-ip:8% 12% 14%;--cd-fit:contain;--cd-ir:var(--r-control);--cd-ibg:linear-gradient(var(--paper) 78%,var(--stone) 78%);--cd-ish:inset 0 0 0 1px var(--cd-mix);--cd-ta:start;--cd-as:stretch;--cd-nw:700;--cd-pf:var(--cd-mono);--cd-ps:1.375rem;--cd-pw:700;--cd-lcd:var(--ink);--cd-lcd-on:var(--paper);}
html[data-card-design="scale"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img > img{mix-blend-mode:multiply;}
html[data-cd-dark][data-card-design="scale"] :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key] > .card-img > img{mix-blend-mode:normal;}
html[data-card-design="scale"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{order:-1;margin-block:0 6px;}
html[data-card-design="scale"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:0 6px;margin-block:0 8px;padding:6px 10px;border-radius:var(--r-chip);background:var(--cd-lcd);color:var(--cd-lcd-on);--ui-price-text:var(--cd-lcd-on);--accent-deep:var(--cd-lcd-on);--ink-soft:var(--cd-lcd-on);--ink:var(--cd-lcd-on);box-shadow:inset 0 0 0 2px var(--cd-mix),inset 0 3px 8px rgba(0,0,0,.45);font-variant-numeric:tabular-nums;}
html[data-card-design="scale"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line] .price-unit{font-family:var(--font-body),sans-serif;font-size:.75rem;color:inherit;}
html[data-card-design="scale"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{order:-2;}
/* ארגז: a wooden crate: a thick wood frame, the product on slats, the price on a kraft tag. */
html[data-card-design="crate"]{--cd-bd:none;--cd-r:var(--r-chip);--cd-pad:12px;--cd-ar:1/1;--cd-im:-6px -6px 10px;--cd-ip:10%;--cd-fit:contain;--cd-ir:0px;--cd-ibg:repeating-linear-gradient(#EFE0C8 0 23%,#D2B48C 23% 25%);--cd-blend:multiply;--cd-nf:var(--font-display);--cd-nw:700;--cd-ns:1.0625rem;--cd-ta:start;--cd-as:flex-start;}
html[data-card-design="crate"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase){outline:6px solid var(--cd-wood);outline-offset:-6px;}
html[data-card-design="crate"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{border-block-end:6px solid var(--cd-wood);}
html[data-card-design="crate"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]{position:relative;inset:auto;margin-block:2px 8px;padding:4px 12px 4px 10px;padding-inline:20px 12px;background:#D9B98C;color:#2B2118;--ui-price-text:#2B2118;--accent-deep:#2B2118;--ink:#2B2118;--ink-soft:#2B2118;clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);}
html:not(.translated-ltr)[data-card-design="crate"] :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);}
html[data-card-design="crate"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]::after{content:"";position:absolute;inset-inline-start:8px;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:var(--cd-bg,#fff);box-shadow:inset 0 0 0 1px #2B2118;}
html[data-card-design="crate"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line] .price-unit{color:inherit;}
/* סרט: the price on a ribbon with cut ends across the card, under a full-width photo. */
html[data-card-design="ribbon"]{--cd-bd:1px solid var(--cd-mix);--cd-pad:12px;--cd-ar:1/1;--cd-fit:cover;--cd-ip:0px;--cd-im:-12px -12px 12px;--cd-ir:var(--cd-r) var(--cd-r) 0 0;--cd-nf:var(--font-display);--cd-nw:400;--cd-ns:1.0625rem;--cd-ps:1.125rem;}
html[data-card-design="ribbon"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]{order:-1;align-self:stretch;margin:-4px calc(var(--cd-pad) * -1) 10px;padding:6px 22px;min-height:2.5rem;display:flex;flex-wrap:wrap;align-items:baseline;align-content:center;justify-content:center;gap:0 4px;background:var(--primary);color:var(--cd-on-primary);--ui-price-text:var(--cd-on-primary);--accent-deep:var(--cd-on-primary);--ink:var(--cd-on-primary);--ink-soft:var(--cd-on-primary);clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%,12px 50%);}
html[data-card-design="ribbon"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line] .price-unit{color:inherit;}
html[data-card-design="ribbon"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img{order:-2;}
/* מסגרת גלריה: an artwork: a black frame, a wide white mat, a museum caption under it. */
html[data-card-design="mat"]{--cd-bd:none;--cd-r:0px;--cd-pad:4px;--cd-ar:4/5;--cd-im:5px 5px 18px;--cd-ip:16%;--cd-fit:contain;--cd-ir:0px;--cd-ibg:#fff;--cd-ish:0 0 0 5px var(--ink),0 14px 18px -10px var(--ink);--cd-blend:multiply;--cd-nf:var(--font-display);--cd-nw:400;--cd-ns:.9375rem;--cd-ps:.9375rem;--cd-pw:500;--cd-ta:start;--cd-as:flex-start;}
html[data-cd-dark][data-card-design="mat"]{--cd-ish:0 0 0 5px var(--ink-soft);}
html[data-card-design="mat"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img::after{content:"";position:absolute;inset:11%;box-shadow:inset 1px 1px 0 rgba(0,0,0,.18),inset -1px -1px 0 rgba(255,255,255,.9);pointer-events:none;}
html[data-card-design="mat"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{margin-block:0 2px;padding-inline-start:10px;border-inline-start:2px solid var(--ink);}
html[data-card-design="mat"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > :is(.price-tag[data-price-line],.card-producer,.offer-regular-price){padding-inline-start:12px;}
/* צלחת תחרה: the product on a round white plate with a lace rim, on a soft tinted card, the type centred. */
html[data-card-design="doily"]{--cd-bd:none;--cd-bg:var(--ui-card-bg,var(--cd-tint));--cd-r:var(--r-panel);--cd-pad:12px;--cd-ar:1/1;--cd-im:14px 13% 18px;--cd-ip:15%;--cd-fit:contain;--cd-ir:50%;--cd-ibg:#fff;--cd-blend:multiply;--cd-ish:0 0 0 5px #fff,0 6px 14px -6px var(--ink);--cd-nf:var(--font-display);--cd-nw:400;--cd-ns:1.0625rem;}
html[data-card-design="doily"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-img::after{content:"";position:absolute;inset:-11px;border-radius:50%;border:2px dotted var(--cd-rule);opacity:.6;pointer-events:none;}
html[data-cd-dark][data-card-design="doily"]{--cd-blend:normal;}
/* A centred card: the lone «+» in the middle until the first tap (the plain «+» only; a chosen add control keeps its own row). */
:is(html[data-card-design="vitrine"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="chalk"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="oval"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="ribbon"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="doily"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase)):not(.in-cart):not(.is-open) > .qty-row{margin-inline:auto;}
html:not([data-add-control]) :is(html[data-card-design="vitrine"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="chalk"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="oval"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="ribbon"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="doily"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase)):not(.in-cart):not(.is-open) > .qty-row > :not(.plus){display:none;}
/* Three or four to a phone's row: a narrow card. Less padding round the card, and the price (with its tab, ribbon,
tag or read-out) set smaller in the card's own width, so it never runs out of its piece. */
@media (max-width:640px){
html:is([data-products-per-row-phone="3"],[data-products-per-row-phone="4"]):is([data-card-design="vitrine"],[data-card-design="doily"],[data-card-design="framed"],[data-card-design="ribbon"],[data-card-design="scale"],[data-card-design="mat"],[data-card-design="oval"],[data-card-design="chalk"]){--cd-pad:6px;}
html:is([data-products-per-row-phone="3"],[data-products-per-row-phone="4"]):is([data-card-design="oval"],[data-card-design="ribbon"]){--cd-im:-6px -6px 8px;}
html:is([data-products-per-row-phone="3"],[data-products-per-row-phone="4"])[data-card-design="crate"]{--cd-pad:8px;}
html:is([data-products-per-row-phone="3"],[data-products-per-row-phone="4"])[data-card-design="chalk"]{--cd-im:0 0 8px;}
html:is([data-products-per-row-phone="3"],[data-products-per-row-phone="4"])[data-card-design="lab"]{--cd-lab-x:6px;}
html:is([data-products-per-row-phone="3"],[data-products-per-row-phone="4"]) :is(html[data-card-design="chalk"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase)){outline-offset:-4px;outline-width:1px;}
}
@container shopcard (max-width:118px){
:is(html[data-card-design="vitrine"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="doily"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="crate"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="framed"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="ribbon"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="scale"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="lab"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="mat"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="oval"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="chalk"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase)) > :is(.price-tag[data-price-line],.offer-regular-price){font-size:clamp(.6875rem,13cqi,.9375rem);}
:is(html[data-card-design="vitrine"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="doily"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="crate"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="framed"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="ribbon"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="scale"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="lab"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="mat"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="oval"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase),html[data-card-design="chalk"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase)) > .price-tag[data-price-line] .price-main{white-space:normal;}
html[data-card-design="ribbon"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]{padding-inline:12px;}
html[data-card-design="crate"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]{padding-inline:14px 4px;}
html[data-card-design="framed"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]{padding-inline:8px;}
html[data-card-design="scale"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line]{padding-inline:6px;}
html[data-card-design="oval"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .card-name{padding-inline:.75em;border-radius:1.75em;}
html[data-card-design="chalk"]:not([data-layout-catalog]) :is(#catalog,#dealsStrip,.editorial-featured-grid,.fc) .card.card[data-key]:not(.rich-product-purchase) > .price-tag[data-price-line] .price-unit{font-size:.6875rem;}
}