/* 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);}
.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);}
}
/* 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. */
@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;}
}
@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;}
}
/* 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;}
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;}
@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[data-fx-image-swap="on"]: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;}
}
}
/* 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);}
/* 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}
.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}
.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;}
@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;}
}
/* 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:cover; border-radius:inherit; transition:transform .5s cubic-bezier(.22,1,.36,1);}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card:hover > .card-img > img{transform:scale(1.03);}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > .card-name{
margin:0 0 4px; padding-inline-end:calc(var(--gal-price-w) + 10px); min-height:1.4em;
text-align:start; font-size:1.0625rem; font-weight:600; line-height:1.35;
}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > :not(.card-img, .card-name, .qty-row){margin-inline:0; text-align:start; justify-content:flex-start;}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag{
top:calc(100% + 12px); right:auto; left:auto; inset-inline-end:0; transform:none;
width:var(--gal-price-w); max-width:var(--gal-price-w); padding:0; background:none; box-shadow:none; border-radius:0;
color:var(--ink); font-family:var(--font-body), sans-serif; font-size:1.0625rem; font-weight:700; text-align:end;
}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag.deal-tag{color:var(--danger, #B93632);}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag :is(.deal-tag-label, .price-unit){display:block; font-size:0.75rem; font-weight:600; color:var(--ink-soft);}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag .deal-tag-price{font-size:inherit;}
/* The add button on the photo's bottom corner: a + alone until the product
is in the cart, then the whole stepper. 125cqi is the photo's height (the
card is its own size container, the photo 4:5 of its width). */
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > .qty-row{
position:absolute; z-index:3; top:calc(125cqi - 58px); right:10px; left:auto; margin:0;
width:auto; max-width:calc(100% - 20px); padding:3px; gap:2px;
background:var(--ui-card-bg, var(--paper)); border-radius:999px; box-shadow:0 6px 18px -6px rgba(0,0,0,0.35);
}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card:not(.in-cart) > .qty-row > :not(.plus){display:none;}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > .qty-row .qty-btn{width:44px; height:44px; border-radius:999px; margin:0; padding:0;}
/* A per-product size (item.card) or a card that rearranges: the stepper back in the flow. */
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card[data-card-span] > .qty-row,
html[data-layout-catalog="gallery"][data-layout-card-shape="round"] #catalog .product-grid:not(.product-carousel) > .card > .qty-row{
position:static; margin:10px 0 0; align-self:flex-start;
}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .oos-overlay{inset:auto 10px 10px; padding:0;}
@media (max-width:640px){
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > .card-name{font-size:0.9375rem; padding-inline-end:0; margin-bottom:24px;}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag{
top:auto; bottom:-2px; inset-inline-end:auto; inset-inline-start:0; width:auto; max-width:100%; text-align:start; font-size:0.9375rem;
}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag .price-unit{display:inline; margin-inline-start:4px;}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag .deal-tag-label{display:none;}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .deal-was{top:6px; bottom:auto; left:6px; right:auto;}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > .card-img{margin-bottom:8px;}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card .price-tag{top:calc(100% + 8px + 1.4em); bottom:auto;}
html[data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > .qty-row{right:6px; top:calc(125cqi - 52px);}
}
/* The boxless forms (gallery, round) on a dark ground: light text, as the
section titles there (theme.css). */
html:is([data-theme-background="deep"], [data-theme-background="black"], [data-theme-background="ink"], [data-theme-background="espresso"],
[data-theme-background="darkhatch"], [data-theme-background="darkherring"], [data-theme-background="darkfade"]):is([data-layout-catalog="gallery"], [data-layout-card-shape="round"]) #catalog .card:not(.boutique-card) > :is(.card-name, .price-tag:not(.deal-tag)){color:#F3F5F3;}
/* ======================= catalog: mosaic ======================= */
/* A market stall: tiles close together, full-bleed photos, every sixth a
big one (two by two; on a phone a wide one), alternate tiles tinted. A
per-product size (item.card) keeps its own span. */
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel){
grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:8px !important; grid-auto-flow:row dense;
}
@media (min-width:641px){
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel){grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:10px !important;}
}
@media (min-width:1100px){
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel){grid-template-columns:repeat(5, minmax(0, 1fr)) !important;}
}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card{
padding:0 0 10px; overflow:hidden; border:0; border-radius:var(--r-control); box-shadow:none;
background:var(--ui-card-bg, var(--paper));
}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:nth-child(3n+2){background:var(--ui-card-bg, color-mix(in srgb, var(--primary) 9%, var(--paper)));}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:nth-child(3n){background:var(--ui-card-bg, color-mix(in srgb, var(--gold) 16%, var(--paper)));}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:hover{transform:none; box-shadow:inset 0 0 0 2px var(--primary);}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card > .card-img{
aspect-ratio:1; margin:0 0 8px; border-radius:0; box-shadow:none; background:transparent;
}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card > .card-img > img{padding:0; object-fit:cover; mix-blend-mode:multiply;}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card > .card-name{
margin:0 10px 6px; text-align:start; font-size:0.9375rem; font-weight:800; line-height:1.25;
}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card > .qty-row{margin-inline:10px; max-width:none; width:auto;}
html[data-layout-catalog="mosaic"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card.boutique-card{padding:0 0 10px; border-radius:var(--r-control);}
html[data-layout-catalog="mosaic"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card.boutique-card:nth-child(3n+2){background:var(--ui-card-bg, color-mix(in srgb, var(--primary) 7%, #fff)) !important;}
html[data-layout-catalog="mosaic"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card > :is(.card-name, .boutique-subtitle){margin-inline:10px; text-align:start;}
html[data-layout-catalog="mosaic"][data-catalog-style="boutique"] #catalog .product-grid:not(.product-carousel) > .card > .price-tag{justify-content:flex-start; padding-inline:10px; box-sizing:border-box;}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1){grid-column:span 2; grid-row:span 2;}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1) > .card-img{aspect-ratio:auto; flex:1 1 auto; min-height:0;}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1) > .card-img > img{position:absolute; inset:0;}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1) > .card-name{font-size:1.375rem; margin:4px 14px 8px;}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1) > .qty-row{margin-inline:14px; max-width:220px;}
@media (max-width:640px){
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1){grid-row:span 1;}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1) > .card-img{aspect-ratio:16 / 9; flex:none;}
html[data-layout-catalog="mosaic"] #catalog .product-grid:not(.product-carousel) > .card:not([data-card-span]):nth-child(6n+1) > .card-name{font-size:1.0625rem;}
}
/* The deals strip sizes its cards from the catalogue's first card
(app.js sizeDealCards): a row, a gallery photo or a big mosaic tile is not
a strip card, so the strip keeps the grid's card width. */
html:is([data-layout-catalog="rows"], [data-layout-catalog="gallery"], [data-layout-catalog="mosaic"]) .deals-track > .deal-card{width:220px; flex:0 0 220px;}
@media (max-width:640px){
html:is([data-layout-catalog="rows"], [data-layout-catalog="gallery"], [data-layout-catalog="mosaic"]) .deals-track > .deal-card{width:170px; flex:0 0 170px;}
}
/* ======================= cardShape ======================= */
html[data-layout-card-shape="soft"] :is(#catalog, #dealsStrip) .card{
border-color:transparent; border-radius:26px;
box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 22px 40px -24px rgba(0,0,0,0.38);
}
html[data-layout-card-shape="soft"] :is(#catalog, #dealsStrip) .card .card-img{border-radius:20px; box-shadow:none;}
html[data-layout-card-shape="soft"] :is(#catalog, #dealsStrip) .card :is(.qty-row, .qty-btn, .price-tag){border-radius:999px;}
html[data-layout-card-shape="soft"][data-layout-catalog="rows"] #catalog .product-grid > .card{border-radius:20px; margin-bottom:8px; border-bottom:0;}
html[data-layout-card-shape="sharp"] :is(#catalog, #dealsStrip) .card{border-radius:0; box-shadow:none; border:1px solid var(--line);}
html[data-layout-card-shape="sharp"] :is(#catalog, #dealsStrip) .card:is(:hover, .in-cart){transform:none; box-shadow:none; border-color:var(--ink);}
html[data-layout-card-shape="sharp"] :is(#catalog, #dealsStrip) .card :is(.card-img, .qty-row, .qty-btn, .price-tag, .deal-was, .unit-toggle, .unit-opt, .card-clean-add){border-radius:0;}
html[data-layout-card-shape="sharp"] :is(#catalog, #dealsStrip) .card .card-img{box-shadow:none;}
html[data-layout-card-shape="sharp"] :is(#catalog, #dealsStrip) .card .price-tag{transform:none;}
html[data-layout-card-shape="sharp"][data-layout-catalog="rows"] #catalog .product-grid > .card{border-width:0 0 1px;}
html[data-layout-card-shape="sharp"][data-layout-catalog="gallery"] #catalog .product-grid > .card{border:0;}
html[data-layout-card-shape="round"] :is(#catalog, #dealsStrip) .card{background:transparent; border-color:transparent; box-shadow:none; text-align:center;}
html[data-layout-card-shape="round"] :is(#catalog, #dealsStrip) .card:hover{transform:translateY(-3px); box-shadow:none;}
html[data-layout-card-shape="round"] :is(#catalog, #dealsStrip) .card .card-img{
aspect-ratio:1; width:86%; align-self:center; margin-inline:auto; border-radius:50%; overflow:visible;
background:var(--ui-card-photo-bg, var(--paper)); box-shadow:0 0 0 6px color-mix(in srgb, var(--primary) 12%, transparent);
}
html[data-layout-card-shape="round"] :is(#catalog, #dealsStrip) .card .card-img > img{border-radius:50%; object-fit:cover; padding:0;}
html[data-layout-card-shape="round"] :is(#catalog, #dealsStrip) .card :is(.qty-row, .qty-btn){border-radius:999px;}
html[data-layout-card-shape="round"] :is(#catalog, #dealsStrip) .card .card-name{text-align:center; margin-top:6px;}
html[data-layout-card-shape="round"][data-layout-catalog="rows"] #catalog .product-grid > .card .card-img{width:var(--row-ph); box-shadow:none;}
html[data-layout-card-shape="round"][data-layout-catalog="rows"] #catalog .product-grid > .card .card-name{text-align:start; margin-top:0;}
html[data-layout-card-shape="round"][data-layout-catalog="gallery"] #catalog .product-grid > .card .card-img{width:100%;}
html[data-layout-card-shape="round"][data-layout-catalog="gallery"] #catalog .product-grid > .card .card-name{text-align:start;}
html[data-layout-card-shape="round"][data-layout-catalog="mosaic"] #catalog .product-grid > .card{background:var(--ui-card-bg, var(--paper)); border-radius:28px;}
html[data-layout-card-shape="round"][data-layout-catalog="mosaic"] #catalog .product-grid > .card .card-img{width:82%; margin:10px auto 8px;}
/* ======================= rhythm ======================= */
/* dense: a 1200px page, gaps and the sections' padding about a third
tighter. airy: a 960px page, gaps +40%, padding +50%, titles at the
start. */
html[data-layout-rhythm="dense"] body{--container:1200px;}
html[data-layout-rhythm="dense"] .nav-wrap{padding:10px 0 8px;}
html[data-layout-rhythm="dense"] #catalog .category-section{padding:24px 15px 26px; margin-bottom:16px;}
html[data-layout-rhythm="dense"] #catalog .category-head{margin-bottom:14px;}
html[data-layout-rhythm="dense"] #catalog .product-grid:not(.product-carousel){gap:8px;}
html[data-layout-rhythm="dense"] .prod-search{margin-bottom:10px;}
html[data-layout-rhythm="dense"] .editorial{margin-block:22px; gap:18px; --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;
}
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;}
}
/* 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;}
}
/* ---- 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-img:has(> .price-tag) > .card-sticker[data-sticker-tag]{display:none;}
.card:not(.has-deal-offer) > .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) > .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;}
/* 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[data-key][data-pl-fit="contain"] .card-img img{object-fit:contain;}
:is(#catalog, #dealsStrip, .editorial-featured-grid, .fc) .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%;}
/* «מסגרת התמונה» */
.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;}
/* 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;}
/* 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 #home .lang-picker{left:calc(max(var(--cc-edge, 12px), env(safe-area-inset-left)) + var(--cc-w, 48px) + 10px);}
/* An add: one short bump of the button and its badge; with no motion, a
still ring for a moment instead. */
.cart-corner.is-bump{box-shadow:0 0 0 4px var(--ui-cart-count-bg, var(--gold)), 0 10px 24px -10px rgba(0,0,0,0.45);}
@media (prefers-reduced-motion:no-preference){
html:not([data-motion="off"]):not([data-a11y-motion="1"]) .cart-corner.is-bump{animation:cart-corner-bump .5s cubic-bezier(.22,1,.36,1);}
html:not([data-motion="off"]):not([data-a11y-motion="1"]) .cart-corner.is-bump .cart-corner-count{animation:cart-corner-pop .5s cubic-bezier(.22,1,.36,1);}
@keyframes cart-corner-bump{35%{transform:scale(1.14);}70%{transform:scale(.97);}}
@keyframes cart-corner-pop{40%{transform:scale(1.35);}}
}
/* 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;}
}