/* The design tokens. This block is the only place they are declared, and
   editing a value here changes the site. That was not true until 16/09/2026:
   four of them were silently redeclared 926 lines below, in the v1.1 block,
   so the values here were dead and anyone editing them saw no effect.
   The v1.1 values won, and they are the ones written here now. */
:root{
  --bg:#ffffff;            /* v1.1 moved the commerce canvas to white */
  --surface:#ffffff;
  --surface-soft:#f7f7f7;  /* v1.1 */
  --ink:#171717;
  --muted:#6d6a66;
  --line:#e9e9e9;          /* v1.1 */
  --line-strong:#dcdcdc;   /* v1.1 */
  /* The brand red from the 2026-09 product-page handoff, site-wide. It is
     darker than the #e71f37 it replaces, so white on it rises from 4.52:1
     to 5.01:1, and as text it holds 4.5:1 on white and on the #f6/#f7
     greys. It does not on the warmer #f4/#f5 hover greys (4.45-4.49:1),
     which is why those hovers use --red-dark. --red-dark keeps its name
     because its uses are both hover fills and red text on tints, and
     #BD1B21 passes as either. --red-text is for red words on a tint
     (--red-soft, --warm), where --red itself falls to 4.38:1. --red-soft is
     the handoff's red hover wash. */
  --red:#D8232A;
  --red-dark:#BD1B21;
  --red-text:#B3191F;
  --red-soft:#FDECEC;
  --warm:#ffefe8;
  --green:#117a4a; /* darkened from #17a05d: white button text needs 4.5:1 */
  --shadow-sm:0 7px 24px rgba(22,20,18,.065);
  --shadow-md:0 16px 42px rgba(22,20,18,.10);
  --shadow-lg:0 28px 70px rgba(22,20,18,.16);
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --container:min(1240px,calc(100% - 48px));
  --font:"Heebo",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Hebrew","Arial Hebrew",Arial,sans-serif;
  /* .site-header alone: the main row plus the category row. It does NOT
     include the sticky utility strip above it, which is --announce-h, so
     anything positioning itself below the whole header wants both. Getting
     that wrong is what put the reviews trust panel 13px inside the header
     when it was sticky. Phones override it below, where the category row
     leaves the header and becomes a drawer. */
  --header-height:130px;
}

/* Icon masks. Two of the handoff's icons sit on markup WooCommerce prints,
   the gallery's zoom trigger and the add-to-cart button, where
   shechter_icon() cannot place an <svg>. They are painted instead as a mask
   over currentColor (the same idiom as --coupon-ticket and --a11y-x), from
   the helper's own paths in functions.php: change a drawing in one place
   and change it in the other. The stroke is 1.8, not the helper's 1.6
   attribute, because the global svg rule below draws the inline icons at
   1.8 and a mask image is a separate document that no page rule reaches. */
:root{
  --icon-zoom:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4M11 8v6M8 11h6"/></svg>');
  --icon-bag:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 7.5h12l-.9 12.1a1.5 1.5 0 0 1-1.5 1.4H8.4a1.5 1.5 0 0 1-1.5-1.4z"/><path d="M9 10V6.5a3 3 0 0 1 6 0V10"/></svg>');
}

*{box-sizing:border-box}
/* scroll-padding keeps anchor targets (the skip link, in-page links) from
   landing underneath the sticky header. It tracks the header's real bottom
   edge, which JS measures into --header-bottom; the literal is only the
   pre-script fallback. It was a hard-coded 150px, 14px short of the header,
   so every anchor target sat partly hidden behind it. */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-bottom,181px) + 12px)}
/* ...but nothing inside the header itself may claim that offset. The header
   is sticky, so a control inside it never leaves the padding band: the
   browser scrolls to "reveal" the focused search field, the field moves with
   the page, and the browser tries again on the next keystroke. The page crept
   to the top while the shopper typed (Chromium all the way to 0, WebKit part
   of the way). Focus inside the header is never an anchor jump, so the offset
   is simply switched off while it is there -- see the header-focus flag in
   theme.js, which is set on pointerdown so it is in place before the click
   moves focus. */
html.header-focus{scroll-padding-top:0}
/* --header-bottom measures the header's own box, and on phones the search pill
   hangs 58px BELOW that box. Anchors and focused fields landed under it: the
   cancel-form notice, the skip links, a validation error scrolled to. */
@media(max-width:760px){html{scroll-padding-top:calc(var(--header-bottom,107px) + var(--mobile-search-band,58px) + 12px)}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.drawer-open,body.menu-open,body.cart-drawer-open,body.filters-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
/* The rule above is an author rule, and it beats the browser's own
   [hidden]{display:none}: the theme's broken-image handler set img.hidden and
   the broken icon stayed on screen. */
img[hidden]{display:none}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.container{width:var(--container);margin-inline:auto}
.skip-link{position:fixed;top:12px;right:12px;z-index:1000;transform:translateY(-150%);padding:10px 16px;border-radius:10px;background:#fff;color:#111;font-weight:700}
/* The shadow only when shown: off screen it still bled a grey blotch into
   the top corner of every page. */
.skip-link:focus{box-shadow:var(--shadow-md)}
.skip-link:focus{transform:none}
/* The offset belongs on :focus only. Off-screen hiding here is translateY
   (-150%) -- about -67px for a 45px box -- so raising `top` to 60px pushed
   the resting position back down to -7px and left 38px of the link showing
   in the corner of every page. Only one skip link is ever focused at a time,
   so the second simply steps down while it is the one on screen. */
.skip-link-a11y:focus{top:64px}

/* Top announcement */
/* Sticky, with the header stacked beneath it. Both offsets come off one
   custom property so a change to the strip's height cannot leave a gap or
   an overlap behind the header. z-index stays above the header, which the
   header's own shadow would otherwise creep over. 33px is the 2026-09
   handoff's bar; phones override it with their own 32px further down. */
:root{--announce-h:33px}
.announcement{height:var(--announce-h);background:#faf9f7;color:#5f5a54;font-size:13px;border-bottom:1px solid #edeae5;position:sticky;top:0;z-index:210}
.announcement-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.announcement-points{display:flex;align-items:center;gap:14px;color:#e7e7e7;white-space:nowrap}
/* Phone and address share the end of the bar. Icons at 14px so they read as
   marks rather than buttons in a 36px strip. */
.announcement-contact{display:flex;align-items:center;gap:12px;white-space:nowrap}
.announcement-contact>i{width:3px;height:3px;border-radius:50%;background:#797979;flex:0 0 auto}
.announcement-contact a{display:inline-flex;align-items:center;gap:7px;color:#fff}
.announcement-contact svg{color:#8f8f8f;flex:0 0 auto;transition:color .15s ease}
.announcement-phone b{font-size:13px;letter-spacing:.02em}
.announcement-phone span{color:#bdbdbd}
.announcement-address span{color:#e7e7e7}
.announcement-address:hover span{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* Ink, not white. White was right on the black bar this strip used to be; on
   the light one it measured 1.05:1, so a keyboard user tabbing onto the
   address saw no ring at all. The same leftover turned the pin white on
   hover, and that rule is gone for the same reason. */
.announcement-contact a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* Header */
/* No backdrop-filter. It forces the sticky header onto its own GPU
   compositing layer, and the category panels hang ~420px below the header's
   own box -- descendants overflowing a backdrop-filtered layer are a known
   source of mis-composited and mis-hit-tested regions in Safari, which is
   consistent with panels that render correctly and then lose the pointer.
   It also bought nothing here: over a 96%-opaque background the blur is
   imperceptible, and a screenshot comparison with content scrolled behind
   the header came out byte-for-byte identical with and without it. */
/* Opaque on purpose: at rgba(255,255,255,.96) the page text ghosted through
   the sticky header while scrolling, most visibly prices next to the cart. */
.site-header{position:sticky;top:var(--announce-h);z-index:200;background:#fff;border-bottom:1px solid rgba(226,222,215,.92);transition:box-shadow .2s ease}
.site-header.scrolled{box-shadow:0 10px 32px rgba(20,18,16,.09)}
.header-main{height:88px;display:grid;grid-template-columns:190px minmax(280px,1fr) auto;align-items:center;gap:34px}
.logo{width:178px;height:72px;display:flex;align-items:center;justify-content:center;padding:5px 14px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:linear-gradient(145deg,#343434 0%,#1c1c1c 100%);overflow:hidden;flex-shrink:0;transition:transform .2s ease}
.logo:hover{transform:translateY(-1px)}
.logo img{width:auto;height:100%;object-fit:contain}
/* Scoped to the header on purpose: WordPress puts a bare `search` class on
   <body> for every search-results page, so an unscoped `.search` box rule
   turned the whole document into a 48px-tall flex row and collapsed the
   layout. Keep every rule that styles the box itself under .site-header. */
.site-header .search{height:48px;position:relative;display:flex;align-items:center;border:1px solid var(--line-strong);background:#f7f6f4;border-radius:14px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;min-width:0}
.site-header .search:focus-within{background:#fff;border-color:#9e9990;box-shadow:0 0 0 4px rgba(23,23,23,.055)}
.site-header .search>svg{width:20px;height:20px;margin-inline:16px 10px;color:#777;flex:0 0 auto}
.site-header .search input{height:100%;min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:15px;padding:0 4px}
.site-header .search input::placeholder{color:#96918b}
.site-header .search>button{height:40px;min-width:82px;margin-inline:4px;border:0;border-radius:10px;background:var(--red);color:#fff;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}
.site-header .search>button:hover{background:var(--red-dark)}
.site-header .search>button:active{transform:scale(.98)}
/* Suggestion panel. Anchored to .site-header .search, which is the
   position:relative box; the form itself is a flex row and the panel is out
   of its flow. The [hidden] rule is load-bearing -- see the accessibility
   panel, where a class that set `display` quietly beat the UA's
   [hidden]{display:none} and left a closed panel on screen with every one of
   its links in the tab order. */
.search-suggestions{position:absolute;top:calc(100% + 10px);right:0;left:0;z-index:260;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden auto;max-height:min(70vh,540px);overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
.search-suggestions.open{opacity:1;visibility:visible;transform:none}
.search-suggestions[hidden]{display:none}

.search-suggest-group{padding:6px 0}
.search-suggest-group+.search-suggest-group{border-top:1px solid var(--line)}
.search-suggest-head{margin:0;padding:9px 16px 5px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}

/* The inline-start bar is what makes the active row readable at a glance.
   A background tint alone is a 4% shift against white -- clear enough on a
   phone, close to invisible on a large desktop panel. */
.search-suggest-item,.search-suggest-term{display:flex;align-items:center;gap:12px;padding:8px 16px;color:var(--ink);text-decoration:none;cursor:pointer;border-inline-start:3px solid transparent}
.search-suggest-item.is-active,.search-suggest-term.is-active{background:var(--surface-soft);border-inline-start-color:var(--red)}
.search-suggest-item img,.search-suggest-noimg{width:52px;height:52px;flex:0 0 auto;border-radius:10px;border:1px solid var(--line);background:#fff;object-fit:contain;padding:3px}
.search-suggest-noimg{background:var(--surface-soft)}
.search-suggest-text{display:flex;flex-direction:column;gap:2px;min-width:0}
/* The catalogue has titles well past 100 characters. Two lines, then clamp:
   a suggestion that wraps to five lines pushes the rest of the list off the
   screen and stops being a suggestion. */
.search-suggest-title{font-size:14px;line-height:1.35;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-suggest-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search-suggest-price{font-size:13.5px;font-weight:700;color:var(--ink)}
.search-suggest-price del{color:var(--muted);font-weight:500;margin-inline-end:4px}
.search-suggest-price ins{text-decoration:none;color:var(--red)}
.search-suggest-oos{font-size:11.5px;font-weight:700;color:var(--muted);background:var(--surface-soft);border-radius:999px;padding:1px 8px}
.search-suggestions mark{background:transparent;color:var(--red);font-weight:800;padding:0}

.search-suggest-term>svg{width:17px;height:17px;flex:0 0 auto;color:var(--muted)}
.search-suggest-term-name{font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-suggest-term-kind{font-size:11.5px;color:var(--muted);flex:0 0 auto}
.search-suggest-count{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--muted);background:var(--surface-soft);border-radius:999px;padding:1px 9px;flex:0 0 auto}

.search-suggest-all{display:block;padding:13px 16px;text-align:center;font-size:13.5px;font-weight:700;color:var(--ink);background:var(--surface-soft);border-top:1px solid var(--line);cursor:pointer}
.search-suggest-all b{color:var(--red)}
.search-suggest-all.is-active{background:var(--line)}

.search-suggest-empty{display:flex;flex-direction:column;gap:4px;padding:20px 18px;text-align:center}
.search-suggest-empty strong{font-size:14.5px}
.search-suggest-empty span{font-size:13px;color:var(--muted)}

@media(max-width:760px){
  .search-suggestions{max-height:min(62vh,440px);border-radius:14px}
  .search-suggest-item img,.search-suggest-noimg{width:46px;height:46px}
  .search-suggest-title{font-size:13.5px}
}
.suggestion{min-height:68px;padding:9px 12px;display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:12px;border-bottom:1px solid #eeeae5;font-size:13px}
.suggestion:last-child{border-bottom:0}
.suggestion:hover{background:#faf8f5}
.suggestion img{width:50px;height:50px;object-fit:contain;background:#f6f4f1;border-radius:8px}
.suggestion b{white-space:nowrap;color:var(--red)}
.header-actions{display:flex;align-items:stretch;justify-content:flex-end;gap:8px}
.action-link{min-width:62px;height:48px;padding:5px 8px;border:1px solid transparent;border-radius:12px;background:transparent;color:#292725;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:600;line-height:1.05;position:relative;transition:background .2s,border-color .2s,color .2s}
.action-link:hover{background:#f4f2ef;border-color:#ece8e2;color:#000}
.action-link svg{width:22px;height:22px}
.action-link.cart-button{border:0}
.cart-button b{position:absolute;top:2px;left:5px;min-width:18px;height:18px;padding:0 4px;border:2px solid #fff;border-radius:999px;background:var(--red);color:#fff;font-size:10px;line-height:14px;text-align:center}
.mobile-menu-button,.mobile-nav-close,.mobile-nav-head{display:none}

/* Navigation and dropdowns */
.main-nav{height:52px;background:#fff;border-top:1px solid #f0ede8;position:relative;z-index:220}
.nav-inner{height:100%;display:flex;align-items:stretch;gap:2px;position:relative}
.nav-item{height:100%;display:flex;align-items:stretch;position:relative}
.nav-main-link,.nav-trigger,.simple-link,.sale-link{height:100%;border:0;background:transparent;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;color:#262421;font-size:13px;font-weight:600;white-space:nowrap;line-height:1;position:relative}
.nav-main-link:after,.simple-link:after{content:"";position:absolute;right:14px;left:14px;bottom:0;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transition:transform .2s ease}
.nav-main-link:hover:after,.simple-link:hover:after,.nav-item:focus-within>.nav-main-link:after{transform:scaleX(1)}
.nav-caret{width:28px;margin-right:-10px;border:0;background:transparent;color:#807b75;display:flex;align-items:center;justify-content:center;padding:0}
.nav-caret svg,.nav-trigger .chevron{width:15px;height:15px;transition:transform .2s ease}
.nav-item:hover>.nav-caret svg,.nav-item:focus-within>.nav-caret svg,.nav-item.open>.nav-caret svg,.nav-item.open>.nav-trigger .chevron{transform:rotate(180deg)}
.nav-trigger.all-categories{gap:10px;padding:0 16px;background:#1b1b1b;color:#fff;border-radius:11px;margin-block:6px;height:40px;font-weight:700}
.nav-trigger.all-categories:hover{background:#000}
.sale-link{margin-right:auto;color:var(--red);font-weight:800;padding-inline:16px}
.sale-link span{padding:6px 11px;border-radius:999px}
.submenu,.mega-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.nav-dropdown:hover>.submenu,.nav-dropdown:focus-within>.submenu,.nav-dropdown.open>.submenu,.nav-dropdown:hover>.mega-menu,.nav-dropdown:focus-within>.mega-menu,.nav-dropdown.open>.mega-menu{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.submenu{width:230px;padding:10px;border-radius:14px}
.submenu a{height:42px;padding:0 12px;border-radius:9px;display:flex;align-items:center;font-size:13px;color:#3b3834;transition:background .15s,color .15s,padding .15s}
.submenu a:hover{background:#f6f3ef;color:#000;padding-right:16px}
.mega-menu{right:0;width:min(1180px,calc(100vw - 48px));border-radius:0 0 20px 20px;overflow:hidden}
.mega-menu-inner{display:grid;grid-template-columns:1.15fr repeat(4,1fr);gap:0;min-height:330px}
.mega-intro{padding:34px;background:linear-gradient(145deg,#191919,#292725);color:#fff}
.mega-intro>span{color:#ff9ca8;font-size:12px;font-weight:700}
.mega-intro h2{margin:8px 0 10px;font-size:25px;line-height:1.25}
.mega-intro p{margin:0;color:#d1d0cd;font-size:14px;max-width:250px}
.mega-intro a{display:inline-flex;align-items:center;gap:10px;margin-top:24px;color:#fff;font-weight:700;font-size:13px}
.mega-intro a b{color:#ff7383}
.mega-column{padding:32px 24px;border-left:1px solid #eeeae5}
.mega-column h3{margin:0 0 14px;font-size:15px}
.mega-column a{display:flex;align-items:center;min-height:36px;color:#5e5953;font-size:13px;transition:color .15s,transform .15s}
.mega-column a:hover{color:var(--red);transform:translateX(-2px)}
.mega-column .mega-sale{margin-top:8px;color:var(--red);font-weight:700}
.nav-backdrop{position:fixed;inset:0;top:176px;background:rgba(17,17,17,.38);z-index:195;opacity:0;visibility:hidden;pointer-events:none;transition:.2s}
.site-header:has(.nav-dropdown:hover) .nav-backdrop,.site-header:has(.nav-dropdown:focus-within) .nav-backdrop,.site-header.dropdown-open .nav-backdrop{opacity:1;visibility:visible}
/* A panel opened by a tap is closed by tapping the dimmed page, and that tap
   must stop at the veil: passed through, it opened whatever link lay under it. */
.site-header.touch-open .nav-backdrop{pointer-events:auto}

/* Hero */
.hero-section{padding:22px 0 0}
.hero-desktop{display:block;border-radius:var(--radius-lg);overflow:hidden;background:#161616;box-shadow:var(--shadow-sm);position:relative}
.hero-desktop img{width:100%;height:auto;object-fit:contain}
.hero-desktop:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.1);border-radius:inherit;pointer-events:none}
.hero-mobile{display:none}


/* General sections */
.section{padding:72px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:28px}
.section-head>div{min-width:0}
.eyebrow{display:block;color:var(--red);font-size:12px;font-weight:800;letter-spacing:.015em;margin-bottom:5px}
.eyebrow.light{color:#ff7f8f}
.section-head h2,.section-head.minimal h2{margin:0;font-size:32px;line-height:1.22;letter-spacing:-.02em}
.section-head>a{min-height:42px;display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid var(--line-strong);font-size:13px;font-weight:700;white-space:nowrap;transition:color .15s,border-color .15s}
.section-head>a:hover{color:var(--red);border-color:var(--red)}
.section-head>a b{font-size:17px}

/* Category cards */
.categories-section{padding-top:64px}
.categories-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.category-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 0 rgba(22,20,18,.02);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.category-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#d3cdc4}
.category-visual{height:168px;background:linear-gradient(145deg,#f3f0eb,#ebe7e0);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.category-visual:after{content:"";position:absolute;inset:auto 12% 0;height:22px;background:radial-gradient(ellipse,rgba(0,0,0,.13),transparent 70%);filter:blur(3px)}
.category-visual img{width:86%;height:90%;object-fit:contain;position:relative;z-index:1;transition:transform .28s ease}
.category-card:hover .category-visual img{transform:scale(1.045)}
.category-svg{width:76px;height:76px;display:flex;align-items:center;justify-content:center;color:#262626;position:relative;z-index:1}
.category-svg svg{width:68px;height:68px}
.category-copy{padding:19px 20px 20px;display:flex;flex-direction:column;flex:1;min-height:160px}
.category-copy h3{margin:0 0 7px;font-size:17px;line-height:1.3}
.category-copy p{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.55}
.category-copy span{margin-top:auto;display:inline-flex;align-items:center;gap:7px;color:var(--red);font-size:12px;font-weight:700}
.category-copy span b{font-size:15px}

/* Products */
.products-section{background:#fff;border-block:1px solid #ebe7e1}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.product-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.product-card:hover{transform:translateY(-4px);border-color:#d2cbc1;box-shadow:var(--shadow-md)}
.product-media{height:250px;background:#faf9f7;position:relative;padding:20px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-media>a{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.product-media img{width:100%;height:100%;object-fit:contain;transition:transform .25s ease}
.product-card:hover .product-media img{transform:scale(1.035)}
.product-badge{position:absolute;top:13px;right:13px;z-index:2;max-width:110px;min-height:26px;padding:5px 10px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:800;line-height:1.1;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.wish{position:absolute;top:12px;left:12px;z-index:3;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.94);color:#6d6964;font-size:21px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,transform .15s}
.wish:hover{background:#fff;color:var(--red);transform:scale(1.05)}
.wish.active{background:var(--red-soft);color:var(--red-text);border-color:rgba(216,35,42,.25)}
.product-quick-note{position:absolute;right:12px;bottom:11px;z-index:2;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid #eee9e2;color:#77716a;font-size:9px;font-weight:600;backdrop-filter:blur(8px)}
.product-info{padding:18px 18px 17px;display:flex;flex-direction:column;flex:1;min-width:0}
.product-brand{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-info h3{margin:0 0 16px;font-size:14px;line-height:1.48;font-weight:650;min-height:42px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.product-info h3 a:hover{color:var(--red)}
.product-bottom{margin-top:auto;display:flex;align-items:end;justify-content:space-between;gap:12px}
.prices{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.prices strong{font-size:18px;line-height:1.15;white-space:nowrap}
/* WooCommerce's price_html inside it: the struck regular price is a footnote
   to the sale price, not its equal, so it is smaller and muted and the sale
   price keeps the card's own size with no underline of its own. */
.prices strong del{font-size:13.5px;font-weight:500;color:var(--muted);margin-inline-end:6px}
.prices strong del .woocommerce-Price-amount{font-size:inherit}
.prices strong ins{text-decoration:none;background:none;color:inherit}
.old-price{color:#99928b;font-size:11px;text-decoration:line-through;margin-bottom:2px}
.add-cart{min-width:98px;min-height:42px;padding:9px 13px;border:1px solid #181818;border-radius:11px;background:#181818;color:#fff;font-size:12px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;overflow:visible;transition:background .18s,border-color .18s,transform .18s}
.add-cart:hover{background:var(--red);border-color:var(--red)}
.add-cart:active{transform:scale(.97)}
/* WooCommerce adds .added and never removes it, so styling it turned the
   button permanently green while its label went back to "add to cart".
   The timed .is-added state below is what confirms an add now. */
.product-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.product-grid.compact .product-media{height:220px}

/* Promo / service */
.split-promo{padding-block:64px;background:var(--bg)}
.promo-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px}
.daily-deal,.service-card{min-height:360px;border-radius:22px;overflow:hidden;position:relative}
.daily-deal{background:radial-gradient(circle at 20% 25%,#5a1c25 0,transparent 36%),linear-gradient(135deg,#171717,#292929);color:#fff;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:38px 40px;box-shadow:var(--shadow-md)}
.deal-copy{position:relative;z-index:2}
.deal-copy h2{font-size:38px;line-height:1.05;margin:9px 0 10px}
.deal-copy p{margin:0;color:#d8d5d2;font-size:14px;max-width:350px}
.deal-price{display:flex;align-items:baseline;gap:11px;margin:20px 0 21px}
.deal-price del{color:#aaa49e;font-size:13px}
.deal-price strong{font-size:25px}
.deal-copy>a,.service-actions .primary,.about-links .primary{min-height:44px;padding:0 18px;border-radius:11px;background:var(--red);color:#fff;font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:background .18s,transform .18s}
.deal-copy>a:hover,.service-actions .primary:hover,.about-links .primary:hover{background:var(--red-dark)}
.daily-deal>img{width:100%;height:250px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 22px 25px rgba(0,0,0,.5))}
.service-card{background:#ede9e2;border:1px solid #e0d9cf;padding:38px;display:flex;flex-direction:column;justify-content:center}
.service-number{position:absolute;left:20px;bottom:-28px;color:#fff;font-size:112px;font-weight:800;line-height:1;opacity:.75}
.service-card h2{margin:7px 0 10px;font-size:30px;line-height:1.2}
.service-card p{margin:0;color:#625e59;font-size:14px;max-width:410px}
.service-actions{display:flex;align-items:center;gap:18px;margin-top:24px;position:relative;z-index:2}
.service-actions>a:not(.primary){font-weight:700;font-size:13px;border-bottom:1px solid #a9a29a;padding-bottom:3px}

/* More products / banner / brands */
.deals-section{padding-top:70px;background:#fff;border-top:1px solid #eeeae4}
.wide-banner{padding-top:0;background:#fff}
.wide-banner a{display:block;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm)}
.wide-banner img{width:100%;height:auto;min-height:160px;object-fit:cover}
.brands-section{padding-block:54px;background:#fff}
.section-head.minimal{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:24px}
.section-head.minimal h2{font-size:27px}
.section-head.minimal p{margin:6px 0 0;color:var(--muted);font-size:13px}
.brands-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.brands-row img{width:100%;height:62px;object-fit:contain;padding:12px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s,transform .2s}
.brands-row img:hover{filter:none;opacity:1;transform:translateY(-2px)}

/* About */
.about-section{background:#252525;color:#fff;padding-block:76px}
.about-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:70px;align-items:center}
.about-copy h2{margin:8px 0 15px;font-size:36px;line-height:1.22;max-width:650px}
.about-copy p{margin:0;color:#c7c5c2;font-size:15px;line-height:1.75;max-width:680px}
.about-links{display:flex;align-items:center;gap:20px;margin-top:25px}
.about-links>a:not(.primary){font-size:13px;font-weight:700;border-bottom:1px solid #747474;padding-bottom:3px}
.about-stats{display:grid;gap:10px}
.about-stats>div{min-height:78px;padding:17px 20px;border:1px solid #44413e;border-radius:14px;background:#2e2d2b;display:flex;align-items:center;justify-content:space-between;gap:20px}
.about-stats strong{font-size:18px}
.about-stats span{color:#aaa7a3;font-size:12px;text-align:left}

/* Footer */
.site-footer{background:#151515;color:#fff}
.newsletter{min-height:122px;display:grid;grid-template-columns:1fr minmax(360px,520px);align-items:center;gap:50px;border-bottom:1px solid #303030}
.newsletter h2{margin:4px 0 0;font-size:24px;line-height:1.3}
.newsletter form{height:50px;display:flex;border:1px solid #454545;border-radius:12px;overflow:hidden;background:#202020}
.newsletter input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#fff;padding:0 17px}
.newsletter input::placeholder{color:#858585}
.newsletter button{width:100px;border:0;background:var(--red);color:#fff;font-weight:700}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:58px;padding-block:54px}
.footer-grid h3{font-size:14px;margin:0 0 15px}
.footer-grid>div:not(.footer-brand)>a,.footer-grid>div:not(.footer-brand)>p{display:block;color:#a9a6a2;font-size:12px;margin:0 0 9px}
.footer-grid a:hover{color:#fff}
.footer-brand img{width:142px;height:78px;object-fit:contain;margin-bottom:14px}
.footer-brand p{color:#aaa7a3;font-size:12px;margin:0 0 14px}
.footer-brand>a{display:block;color:#fff;font-size:13px;margin-top:7px}
.footer-note{line-height:1.55}
/* No rule of its own above the copyright: the one divider in this footer is
   the line above the payment marks. This border is left from the near-black
   footer, where #2f2f2f was a hairline; on the light one it drew a black bar
   across the page. */
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted)}

/* Floating contact and drawer */
/* Round, icon-only, and one step above the accessibility launcher, which now
   owns the bottom-left corner. */
/* Both floating buttons share one treatment: same size, same radius, same
   neutral elevation, stacked on one axis. They differ only in colour, which
   is the one thing that should distinguish them. No coloured halo behind
   either -- a shadow tinted with the button's own colour reads as a glow,
   not as depth. #25D366 is WhatsApp's own green; using anything else makes
   a logo everyone recognises look slightly wrong. */
.whatsapp{position:fixed;left:20px;bottom:90px;z-index:170;width:56px;height:56px;padding:0;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(20,20,20,.16),0 6px 16px rgba(20,20,20,.10);transition:background .15s ease}
.whatsapp:hover{background:#1eb855}
.whatsapp:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.whatsapp svg{width:28px;height:28px}
.drawer-backdrop{position:fixed;inset:0;z-index:300;background:rgba(15,14,13,.48);opacity:0;visibility:hidden;transition:.22s ease;backdrop-filter:blur(2px)}
.drawer-backdrop.open{opacity:1;visibility:visible}
.cart-drawer{position:fixed;top:0;bottom:0;left:0;z-index:310;width:min(440px,100%);background:#fff;box-shadow:25px 0 70px rgba(0,0,0,.2);transform:translateX(-105%);transition:transform .27s ease;display:flex;flex-direction:column}
.cart-drawer.open{transform:none}
.drawer-head{height:92px;padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.drawer-head small{display:block;color:var(--muted);font-size:11px}
.drawer-head h2{font-size:24px;margin:2px 0 0}
.drawer-head button{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center}
.cart-items{flex:1;overflow:auto;padding:20px 24px}
.empty-cart{height:100%;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}
.empty-cart>span{width:64px;height:64px;border-radius:50%;background:#f3f0eb;display:flex;align-items:center;justify-content:center;color:var(--red);font-size:30px}
.empty-cart p{margin:14px 0 2px;color:var(--ink);font-weight:700}
.empty-cart small{font-size:12px}
.cart-line{min-height:74px;padding:12px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:28px 1fr 34px;align-items:center;gap:10px}
.cart-line>span{width:25px;height:25px;border-radius:50%;background:#f3f0eb;display:flex;align-items:center;justify-content:center;font-size:11px}
.cart-line strong{display:block;font-size:13px;line-height:1.35}
.cart-line small{display:block;color:var(--red);font-size:12px;margin-top:4px}
.cart-line button{width:32px;height:32px;border:0;border-radius:9px;background:#f5f2ee;color:#666;font-size:20px}
.drawer-assurance{padding:13px 24px;border-top:1px solid var(--line);display:flex;justify-content:center;gap:18px;color:#6e6963;font-size:10px}
.drawer-footer{padding:17px 24px 24px}
.drawer-footer a{height:50px;border-radius:12px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.mobile-contact-bar{display:none}

/* Category page */
.category-page{background:#f7f6f3}
.category-page .hero-section{display:none}
.breadcrumbs{min-height:60px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.breadcrumbs a:hover{color:var(--red)}
.breadcrumbs b{color:#383531;font-weight:600}
.category-hero{background:#202020;color:#fff;overflow:hidden}
.category-hero-inner{min-height:292px;display:grid;grid-template-columns:1fr 330px;align-items:center;gap:60px}
.category-hero h1{margin:7px 0 9px;font-size:45px;line-height:1.1;letter-spacing:-.025em}
.category-hero p{margin:0;color:#c4c1bd;font-size:15px;max-width:660px}
.category-hero img{justify-self:center;width:280px;height:280px;object-fit:contain;filter:drop-shadow(0 25px 25px rgba(0,0,0,.45))}
.category-layout{display:grid;grid-template-columns:272px minmax(0,1fr);gap:24px;align-items:start}
.filters{position:sticky;top:calc(198px + var(--announce-h));background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 4px 20px rgba(22,20,18,.035)}
.filter-close{display:none}
.filter-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.filter-title h2{font-size:20px;margin:0}
.filter-title button{border:0;background:transparent;color:var(--red);font-size:12px;font-weight:700;padding:5px}
.filters>label{display:block;font-size:12px;font-weight:700;color:#45413d}
.filters input[type=search]{width:100%;height:44px;margin-top:8px;padding:0 12px;border:1px solid var(--line);border-radius:10px;outline:0;background:#fbfaf8;font-size:12px}
.filters input[type=search]:focus{border-color:#aaa39a;box-shadow:0 0 0 3px rgba(25,25,25,.04)}
.filters fieldset{border:0;border-top:1px solid var(--line);margin:22px 0 0;padding:19px 0 0}
.filters legend{padding:0 0 11px;font-size:12px;font-weight:800}
.filters fieldset label{min-height:30px;display:flex;align-items:center;gap:8px;color:#77716b;font-size:12px;cursor:pointer}
.filters input[type=checkbox],.filters input[type=radio]{accent-color:var(--red);width:15px;height:15px}
.category-results{min-width:0}
.results-toolbar{min-height:68px;margin-bottom:14px;padding:11px 14px 11px 18px;background:#fff;border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.results-toolbar>div{display:flex;flex-direction:column}
.results-toolbar strong{font-size:15px}
.results-toolbar span{color:var(--muted);font-size:11px}
.results-toolbar select{height:42px;min-width:180px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px;color:#3e3a36;outline:0}
.mobile-filter-button{display:none}
.category-product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.category-product-grid .product-media{height:250px}
.mini-footer{background:#181818;color:#fff}
.mini-footer-inner{min-height:116px;display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:28px}
.mini-footer-logo img{width:140px;height:78px;object-fit:contain}
.mini-footer-inner>div{display:flex;flex-direction:column}
.mini-footer-inner strong{font-size:16px}
.mini-footer-inner span{color:#aaa6a1;font-size:12px;margin-top:3px}
.mini-footer-contact{height:44px;padding:0 18px;border-radius:11px;background:var(--red);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}

/* Focus */
/* WCAG 2.4.7 wants the keyboard focus indicator to be clearly visible. A 22%
   red wash was legible on white but thin against the dark header and the red
   buttons, so the ring is solid now, with a white halo behind it so it reads
   on either. Kept on :focus-visible rather than :focus so a mouse click does
   not draw it. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--red);outline-offset:2px;box-shadow:0 0 0 5px rgba(255,255,255,.9)
}

@media (max-width:1180px){
  :root{--container:min(100% - 36px,1120px)}
  .header-main{grid-template-columns:160px minmax(260px,1fr) auto;gap:20px}
  .logo{width:155px}
  .hide-tablet{display:none}
  .nav-main-link,.simple-link{padding-inline:10px;font-size:12px}
  .nav-caret{width:23px}
  .mega-menu{width:calc(100vw - 36px)}
  .mega-menu-inner{grid-template-columns:1.1fr repeat(4,1fr)}
  .mega-intro,.mega-column{padding:27px 19px}
  .categories-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .category-copy{padding-inline:16px}
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .product-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
  .product-grid.compact .product-media{height:195px}
  .about-grid{gap:45px}
  .footer-grid{gap:35px}
}

@media (max-width:920px){
  :root{--container:min(100% - 28px,880px)}
  .announcement-points span:nth-of-type(3){display:none}
  .announcement-phone span{display:none}
  .header-main{grid-template-columns:132px 1fr auto;gap:16px}
  .logo{width:128px}
  .main-nav{overflow-x:auto;overflow-y:visible}
  .nav-inner{width:max-content;min-width:100%;padding-inline:14px}
  .mega-menu{position:fixed;right:14px;left:14px;width:auto;top:176px}
  .mega-menu-inner{grid-template-columns:repeat(3,1fr)}
  .mega-intro{grid-column:1/-1;min-height:auto;padding:22px 26px}
  .mega-intro p{max-width:650px}
  .mega-column:nth-last-child(1){display:none}
  .categories-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-grid,.product-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-grid.compact .product-media{height:235px}
  .promo-grid{grid-template-columns:1fr}
  .daily-deal,.service-card{min-height:330px}
  .brands-row{grid-template-columns:repeat(3,1fr)}
  .about-grid{grid-template-columns:1fr}
  .about-stats{grid-template-columns:repeat(3,1fr)}
  .about-stats>div{align-items:flex-start;flex-direction:column;gap:4px}
  .about-stats span{text-align:right}
  .newsletter{grid-template-columns:1fr;gap:18px;padding-block:25px}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .footer-brand{grid-column:1/-1}
  .category-layout{grid-template-columns:230px minmax(0,1fr)}
  .category-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  :root{--container:calc(100% - 24px);--header-height:75px}
  /* scroll-padding-top for phones lives at the top of the file, measured.
     A fixed 130px here came later and won, 47px short of the header and the
     search pill under it: the cancel form's refusal notice landed with its
     heading hidden, and so did every contents-box jump in the guides. */
  body{padding-bottom:64px}
  :root{--announce-h:32px}
  .announcement{font-size:11px}
  .announcement-points span:nth-of-type(2){display:none}
  .announcement-contact svg{width:13px;height:13px}
  /* top:0 here predates the strip being sticky and made the header ride
     over it on phones. It still has to clear the strip. */
  .site-header{top:var(--announce-h);backdrop-filter:none}
  .site-header-checkout{top:0}
  .header-main{height:74px;grid-template-columns:42px 104px 1fr;gap:8px}
  .mobile-menu-button{display:flex;width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:11px;flex-direction:column;align-items:center;justify-content:center;gap:4px}
  .mobile-menu-button span{width:18px;height:2px;border-radius:2px;background:#24211f;transition:.2s}
  .mobile-menu-button[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .mobile-menu-button[aria-expanded=true] span:nth-child(2){opacity:0}
  .mobile-menu-button[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .logo{width:100px;height:60px;border-radius:10px}
  .header-actions{grid-column:3;justify-content:flex-end}
  .action-link{min-width:52px;height:43px}
  .action-link span{font-size:10px}
  .header-main>.search{position:absolute;top:78px;right:12px;left:12px;height:48px;z-index:205;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.11)}
  /* The search pill hangs 51px below the sticky header, and the band around
     it was transparent, so page content scrolled through the gap. The strip
     is drawn in the page background so the pill still reads as floating. */
  .site-header::after{content:"";position:absolute;top:100%;right:0;left:0;height:58px;background:var(--bg);z-index:204}
  .search>svg{margin-inline:13px 7px}
  .search>button{min-width:72px}
  /* The drawer has its own title bar now, so the panel itself carries no top
     padding: the bar is the first thing in it and sticks while the list
     scrolls. The tail padding clears the phone's home indicator. */
  .main-nav{position:fixed;top:0;right:0;bottom:auto;width:min(370px,90vw);height:100dvh;z-index:400;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:#fff;border:0;box-shadow:-22px 0 55px rgba(0,0,0,.22);transform:translateX(105%);transition:transform .26s ease,visibility 0s linear .26s;visibility:hidden;padding:0 0 calc(22px + env(safe-area-inset-bottom));scroll-padding-top:62px}
  /* Hidden when closed, after the slide-out: only translated off screen,
     its 17 links stayed in the Tab order and the screen-reader tree. */
  .main-nav.open{transform:none;visibility:visible;transition:transform .26s ease,visibility 0s}
  /* Its department panel sets visibility:visible of its own, which beats
     the inherited hidden, so the closed drawer's links stayed tabbable. */
  .main-nav:not(.open) *{visibility:hidden!important}
  .mobile-nav-head{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:3;height:58px;padding-inline:16px 9px;background:#fff;border-bottom:1px solid var(--line)}
  .mobile-nav-title{font-size:16px;font-weight:800;color:#17140f;letter-spacing:-.01em}
  .mobile-nav-close{display:flex;width:44px;height:44px;border:0;border-radius:11px;background:#f4f2ef;color:#24211f;align-items:center;justify-content:center;line-height:1;flex:0 0 auto}
  .mobile-nav-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .mobile-nav-close:active{background:#eae6e0}
  .nav-inner{width:100%;height:auto;display:block;padding:0}
  .nav-item{height:auto;display:grid;grid-template-columns:1fr 46px;border-bottom:1px solid var(--line)}
  .nav-main-link,.simple-link,.sale-link{height:52px;justify-content:flex-start;padding:0 12px;font-size:14px}
  .simple-link,.sale-link{border-bottom:1px solid var(--line)}
  .nav-main-link:after,.simple-link:after{display:none}
  .nav-caret{width:46px;height:52px;margin:0;border-right:1px solid var(--line)}
  /* Hidden here, not restyled. In the drawer the panel it controls is the
     only thing on screen and is opened for you, so the button could do
     nothing but collapse the menu you just asked for -- and it read as a
     stray black pill under the title that says the same word. The panel is
     forced open in CSS below, so the list survives even if the script that
     opens it does not run. */
  .nav-all>.nav-trigger.all-categories{display:none}
  .main-nav .nav-all{display:block;border-bottom:0}
  .nav-trigger .chevron{margin-right:auto}
  .sale-link{margin:0;color:var(--red)}
  .sale-link span{background:transparent;padding:0}
  .submenu,.mega-menu{position:static;grid-column:1/-1;width:auto;border:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none;pointer-events:auto;display:none;background:#f7f5f1}
  .nav-dropdown.open>.submenu,.nav-dropdown.open>.mega-menu{display:block}
  .submenu{padding:7px 10px 10px}
  .submenu a{height:43px;padding:0 14px;border-bottom:1px solid #ebe7e1;border-radius:0}
  .mega-menu-inner{display:block;min-height:0}
  .mega-intro{padding:20px;border-radius:0}
  .mega-intro h2{font-size:21px}
  .mega-intro p{font-size:12px}
  .mega-intro a{margin-top:14px}
  .mega-column{padding:15px 18px;border-left:0;border-bottom:1px solid #e2ddd6}
  .mega-column h3{margin-bottom:7px}
  .mega-column a{min-height:34px}
  .mega-column:nth-last-child(1){display:block}
  .nav-backdrop{inset:0;top:0;z-index:390;background:rgba(0,0,0,.45)}
  .main-nav.open+.nav-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  .hero-section{padding-top:70px}
  .hero-desktop{display:none}
  .hero-mobile{display:block;height:530px;border-radius:20px;overflow:hidden;position:relative;background:#111;color:#fff;box-shadow:var(--shadow-md)}
  .hero-mobile>img{width:100%;height:100%;object-fit:cover}
  .hero-mobile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 30%,rgba(0,0,0,.87) 89%)}
  .hero-mobile-copy{position:absolute;right:22px;left:22px;bottom:24px;z-index:2}
  .hero-mobile-copy small{font-size:12px;color:#ddd}
  .hero-mobile-copy h1{font-size:38px;line-height:.98;margin:7px 0 12px}
  .hero-mobile-copy em{color:#ff925e;font-style:normal}
  .hero-mobile-copy p{margin:0;font-size:13px;line-height:1.55;max-width:290px}
  .hero-mobile-copy span{min-height:43px;margin-top:17px;padding:0 16px;border-radius:11px;background:var(--red);display:inline-flex;align-items:center;font-size:12px;font-weight:700}
  .section{padding:46px 0}
  .section-head{align-items:center;margin-bottom:20px;gap:12px}
  .section-head h2,.section-head.minimal h2{font-size:25px}
  .section-head>a{min-height:36px;font-size:11px}
  .categories-section{padding-top:42px}
  .categories-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .category-visual{height:126px}
  .category-copy{min-height:138px;padding:14px 13px 15px}
  .category-copy h3{font-size:14px}
  .category-copy p{font-size:11px;line-height:1.45;margin-bottom:12px}
  .category-copy span{font-size:10px}
  .products-section{padding-block:48px}
  .product-grid,.product-grid.compact,.category-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .product-media,.product-grid.compact .product-media,.category-product-grid .product-media{height:180px;padding:13px}
  .product-badge{top:8px;right:8px;min-height:23px;padding:4px 8px;font-size:11px}
  .wish{top:8px;left:8px;width:32px;height:32px;font-size:18px}
  .product-quick-note{display:none}
  .product-info{padding:12px 11px 11px}
  .product-brand{font-size:11px;margin-bottom:5px}
  .product-info h3{font-size:12px;line-height:1.45;min-height:52px;margin-bottom:11px;-webkit-line-clamp:3}
  .product-bottom{align-items:stretch;flex-direction:column;gap:9px}
  .prices strong{font-size:16px}
  .add-cart{width:100%;min-width:0;min-height:40px;font-size:11px;border-radius:10px}
  .split-promo{padding-block:44px}
  .daily-deal,.service-card{min-height:390px;border-radius:20px}
  .daily-deal{display:block;padding:28px 24px}
  .deal-copy{max-width:68%}
  .deal-copy h2{font-size:31px}
  .deal-copy p{font-size:12px}
  .deal-price{margin-block:15px}
  .daily-deal>img{position:absolute;left:4px;bottom:25px;width:48%;height:210px}
  .service-card{padding:28px 24px;min-height:310px}
  .service-card h2{font-size:26px}
  .service-card p{font-size:12px}
  .service-actions{align-items:flex-start;flex-direction:column;gap:13px}
  .wide-banner img{min-height:130px}
  .brands-row{grid-template-columns:repeat(2,1fr)}
  .brands-row img{height:56px}
  .about-section{padding-block:52px}
  .about-copy h2{font-size:29px}
  .about-copy p{font-size:13px}
  .about-stats{grid-template-columns:1fr}
  .about-stats>div{min-height:66px;flex-direction:row;align-items:center}
  .about-stats span{text-align:left}
  .newsletter{grid-template-columns:1fr;padding-block:25px;gap:15px}
  .newsletter h2{font-size:21px}
  .newsletter form{height:48px}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:34px 20px;padding-block:42px}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{min-height:85px;padding-block:16px;flex-direction:column;justify-content:center;text-align:center}
  .whatsapp{display:none}
  .mobile-contact-bar{position:fixed;right:0;bottom:0;left:0;z-index:250;height:64px;padding:8px 12px;background:rgba(255,255,255,.97);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.25fr;gap:8px;box-shadow:0 -8px 22px rgba(0,0,0,.08);backdrop-filter:blur(12px)}
  .mobile-contact-bar a{border-radius:11px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700}
  .mobile-contact-bar a:last-child{background:#117a4a;border-color:#117a4a;color:#fff}
  .mobile-contact-bar svg{width:20px;height:20px}
  .cart-drawer{width:100%}
  .category-page .header-main>.search{display:none}
  .category-page .hero-section{display:none}
  .breadcrumbs{padding-top:12px;min-height:62px}
  .category-hero-inner{min-height:285px;grid-template-columns:1fr 125px;gap:10px}
  .category-hero h1{font-size:34px}
  .category-hero p{font-size:12px;line-height:1.55}
  .category-hero img{width:140px;height:230px}
  .category-layout{grid-template-columns:1fr}
  .filters{position:fixed;top:0;right:0;bottom:0;z-index:510;width:min(340px,90vw);border-radius:0;transform:translateX(105%);transition:transform .25s ease;overflow:auto;padding-top:70px}
  .filters.open{transform:none}
  .filter-close{display:flex;position:absolute;top:18px;left:18px;width:40px;height:40px;border:1px solid var(--line);border-radius:11px;background:#fff;align-items:center;justify-content:center;font-size:25px}
  .results-toolbar{min-height:72px;padding:10px;flex-wrap:wrap}
  .mobile-filter-button{height:42px;padding:0 13px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;align-items:center;gap:6px;font-weight:700;font-size:12px;order:3}
  .mobile-filter-button svg{width:18px;height:18px}
  .results-toolbar select{min-width:145px;flex:1}
  .mini-footer-inner{min-height:150px;grid-template-columns:105px 1fr;gap:16px}
  .mini-footer-logo img{width:100px;height:65px}
  .mini-footer-inner>div strong{font-size:13px}
  .mini-footer-inner>div span{font-size:10px}
  .mini-footer-contact{grid-column:1/-1;width:100%}
}

@media (max-width:390px){
  .categories-grid{grid-template-columns:1fr 1fr}
  .category-visual{height:112px}
  .category-copy{min-height:145px}
  .product-media,.product-grid.compact .product-media,.category-product-grid .product-media{height:160px}
  .product-info h3{font-size:11.5px}
  .deal-copy{max-width:76%}
  .daily-deal>img{opacity:.72}
}


/* =========================================================
   WordPress + WooCommerce integration
   ========================================================= */
/* Checkout renders no strip, so its header has nothing to clear. */
.site-header-checkout{top:0}
.admin-bar .announcement{top:32px}
.admin-bar .site-header{top:calc(32px + var(--announce-h))}
.admin-bar .site-header-checkout{top:32px}
@media(max-width:782px){
  .admin-bar .announcement{top:46px}
  .admin-bar .site-header{top:calc(46px + var(--announce-h))}
  .admin-bar .site-header-checkout{top:46px}
}

.logo{background:transparent;border:0;box-shadow:none;padding:0;overflow:visible}
.logo:hover{box-shadow:none}
.logo img,.custom-logo{width:auto;max-width:178px;height:68px;object-fit:contain}
.logo .custom-logo-link{display:flex;align-items:center;height:100%}

.site-main{min-height:55vh}
.content-shell{padding:42px 0 70px}
.content-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,4vw,48px);box-shadow:var(--shadow-sm)}
.entry-title,.page-title{font-size:clamp(30px,4vw,48px);line-height:1.12;margin:0 0 22px}
.entry-content>*:first-child{margin-top:0}.entry-content>*:last-child{margin-bottom:0}
.entry-content a:not([class]){color:var(--red);text-decoration:underline;text-underline-offset:3px}

/* Header dynamic navigation */
.primary-menu,.primary-menu ul{list-style:none;margin:0;padding:0}
.primary-menu{height:100%;display:flex;align-items:stretch;gap:2px}
.primary-menu>li{height:100%;display:flex;align-items:stretch;position:relative}
.primary-menu>li>a{height:100%;padding:0 14px;display:flex;align-items:center;font-size:13px;font-weight:600;white-space:nowrap}
.primary-menu>li>a:hover{color:var(--red)}
.primary-menu .sub-menu{position:absolute;top:100%;right:0;width:230px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;z-index:230}
.primary-menu li:hover>.sub-menu,.primary-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.primary-menu .sub-menu a{display:flex;align-items:center;min-height:40px;padding:6px 12px;border-radius:9px;font-size:13px}
.primary-menu .sub-menu a:hover{background:#f6f3ef;color:var(--red)}
.nav-standard{display:flex;align-items:stretch;min-width:0;flex:1}
.nav-standard .menu-primary-container{height:100%}

/* Hero with editable overlay */
.hero-wordpress{position:relative;min-height:440px;border-radius:var(--radius-lg);overflow:hidden;background:#151515;box-shadow:var(--shadow-md)}
.hero-wordpress>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-wordpress:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.2) 42%,rgba(0,0,0,.82));pointer-events:none}
.hero-wordpress-copy{position:relative;z-index:2;min-height:440px;max-width:560px;margin-right:auto;padding:62px 56px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;color:#fff}
.hero-wordpress-copy small{font-weight:700;color:#ffadb6}
.hero-wordpress-copy h1{font-size:clamp(38px,5vw,65px);line-height:1.02;margin:10px 0 14px;letter-spacing:-.04em}
.hero-wordpress-copy p{margin:0;color:#eee6e3;font-size:17px;max-width:500px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.button-primary,.button-secondary{min-height:48px;padding:0 21px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;transition:.2s}
.button-primary{background:var(--red);color:#fff}.button-primary:hover{background:var(--red-dark);transform:translateY(-1px)}
.button-secondary{background:#fff;color:#171717}.button-secondary:hover{background:#f1eeea}

/* Product category cards from WooCommerce */
.category-card .category-visual{background:#f3f1ed}
.category-card .category-visual img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .25s ease}
.category-card:hover .category-visual img{transform:scale(1.035)}
.category-placeholder{height:100%;display:flex;align-items:center;justify-content:center;font-size:54px;color:#bbb5ac}

/* WooCommerce product grids */
.woocommerce ul.products,.woocommerce-page ul.products,.shechter-products ul.products{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0!important;padding:0!important}
.woocommerce ul.products:before,.woocommerce ul.products:after{display:none!important}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{float:none!important;width:auto!important;margin:0!important;min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 4px 16px rgba(22,20,18,.035);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.woocommerce ul.products li.product:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#d8d2c9}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1;color:inherit}
.woocommerce ul.products li.product a img{height:260px;width:100%;margin:0!important;padding:22px;object-fit:contain;background:#f7f5f1}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:15px!important;line-height:1.45!important;min-height:66px;padding:17px 17px 0!important;margin:0 0 5px!important;color:#201e1c;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.woocommerce ul.products li.product .price{padding:0 17px 14px!important;margin-top:auto!important;color:var(--red)!important;font-size:19px!important;font-weight:800!important}
.woocommerce ul.products li.product .price del{color:var(--muted)!important;font-size:12px!important;font-weight:500;opacity:1!important}
.woocommerce ul.products li.product .price ins{text-decoration:none!important}
.woocommerce ul.products li.product .button{min-height:44px;margin:0 17px 17px!important;padding:0 16px!important;border-radius:11px!important;background:#1d1d1d!important;color:#fff!important;display:flex!important;align-items:center;justify-content:center;font-size:13px!important;font-weight:700!important}
.woocommerce ul.products li.product .button:hover{background:var(--red)!important}
.woocommerce span.onsale{right:12px!important;left:auto!important;top:12px!important;min-width:auto!important;min-height:auto!important;line-height:1!important;padding:7px 10px!important;border-radius:999px!important;background:var(--red)!important;font-size:11px!important}

/* Shop/archive */
.shop-hero{padding:36px 0 26px;background:#202020;color:#fff}
.shop-hero h1{margin:0;font-size:clamp(36px,5vw,58px)}
.shop-hero .term-description{max-width:780px;color:#cbc7c2;margin-top:8px}
.shop-shell{padding:34px 0 70px}
/* The trail, on a product and on a category alike, as the 2026-09 handoff
   draws it: one muted 13px line, links in the same grey with no underline,
   and the page it names in ink at the end. It was 12px with every crumb
   underlined, a row of links competing with the title under it. The handoff
   sets 13px on Rubik's normal leading of 15px; Heebo's own normal leading is
   19px, so the line is given the handoff's height and the gallery starts
   where the handoff puts it. #767676 is the handoff's grey and --muted the
   site's: the audit rule is --muted or darker for text. No !important:
   theme.css loads after WooCommerce's sheets, and its rules are no more
   specific than these. */
.woocommerce .woocommerce-breadcrumb{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;margin:0;padding:18px 0 22px;font-size:13px;line-height:1.15;color:var(--muted)}
/* WooCommerce's clearfix pseudo-elements would be flex items here, and each
   would add a gap at an end of the row. */
.woocommerce .woocommerce-breadcrumb::before,.woocommerce .woocommerce-breadcrumb::after{content:none}
.woocommerce .woocommerce-breadcrumb a{color:inherit;text-decoration:none}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--red)}
.woocommerce .woocommerce-breadcrumb .crumb-sep{margin:0;color:inherit}
.woocommerce .woocommerce-breadcrumb .crumb:last-child{color:var(--ink)}
.woocommerce .woocommerce-result-count{margin:13px 0!important;color:var(--muted);font-size:13px}
.woocommerce .woocommerce-ordering{margin:0 0 18px!important}
.woocommerce .woocommerce-ordering select{height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.woocommerce nav.woocommerce-pagination{margin-top:34px}
.woocommerce nav.woocommerce-pagination ul{border:0!important;display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
/* Never shrunk below their own buttons: on a phone the row squeezed each
   item to 25px under a 40px link, the numbers piled on top of each other and
   '88' read as '38'. The row wraps instead. */
.woocommerce nav.woocommerce-pagination ul li{border:0!important;flex:0 0 auto;margin:0!important}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{min-width:40px;min-height:40px;border-radius:10px!important;background:#fff!important;border:1px solid var(--line)!important;display:flex!important;align-items:center;justify-content:center;color:#222!important}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--red)!important;color:#fff!important;border-color:var(--red)!important}
@media (max-width:480px){
  .woocommerce nav.woocommerce-pagination ul{gap:4px}
  .woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{min-width:33px;min-height:40px;padding:0 4px!important;font-size:14px}
}

/* Single product.

   No card. The page sat in a white box with a border, a 22px radius, a
   shadow and 34px of padding, which the 2026-09 handoff removes: the product
   stands on the page itself, in the 1240px container, with thin dividers
   where it needs a separation. The breadcrumb's own padding makes the space
   under the header, so the shell adds none above it; the 72px below it is
   the handoff's room for the sticky add-to-cart bar. */
.single-product-shell{padding:0 0 72px}

/* The gallery and the buy box, in the row inc/single-product.php opens around
   them. The column caps and the grow ratio are the handoff's: 540 and 644 at
   1440, 462 and 527 on a 1093px laptop, and a stack once the two flex bases
   and the gap no longer fit (about 860px), each column keeping its own cap,
   both at the right. WooCommerce's 48% floats are switched off inside it. */
.pdp-main{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:flex-start;padding-bottom:56px}
.pdp-gallery{position:relative;flex:1 1 380px;min-width:0;max-width:540px}
.woocommerce div.product .pdp-main div.images{float:none;width:100%;max-width:none;margin:0}
.woocommerce div.product .pdp-main>.summary{float:none;width:auto;margin:0;flex:1.3 1 420px;min-width:0;max-width:660px}

/* The stage: a square on #F6F5F3 with a 16px radius. Square rather than the
   capped height it replaces, because the gallery is now the narrower column:
   at 540px it no longer towers over the buy box beside it. Every slide is the
   same square, which is what flexslider needs to measure one height for all
   of them.

   Contain, not the handoff's cover. The catalogue spans extreme ratios (12:1
   recorders down to 1:10 drumsticks), and cover would crop the instrument
   off a packshot. The photographs are shot on white, so the grey is a wash
   multiplied over the slide rather than a background under the image: white,
   whether the photograph's or the letterbox's, becomes the stage, and the
   picture darkens by about 4% everywhere. It has to sit on top. Blending
   the image itself onto a grey slide looked the same until the hover zoom
   ran: .zoomImg lies over the image, and multiplied, it blended with the
   picture beneath it into a double exposure. Under the wash it simply covers
   it, at the natural dimensions it needs to pan correctly. */
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder{background:#fff;border:0}
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder{position:relative}
.woocommerce div.product div.images .woocommerce-product-gallery__image::after,
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder::after{content:"";position:absolute;inset:0;background:#F6F5F3;mix-blend-mode:multiply;pointer-events:none}
.woocommerce div.product div.images .woocommerce-product-gallery__image img:not(.zoomImg),
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
/* The radius goes on the window rather than on each slide, so a slide in
   motion is clipped by the same rounded corners instead of carrying its own.
   A product with one image has no flexslider and so no .flex-viewport; its
   wrapper is the window. isolation keeps the wash's multiply inside the
   stage, and it makes WebKit honour the rounded clip over the track's 3D
   transform, which it otherwise paints square. */
.pdp-gallery .flex-viewport,
.pdp-gallery .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper{border-radius:16px;overflow:hidden;isolation:isolate}
/* The zoom plugin injects an oversized .zoomImg (1200px+) absolutely inside
   the slide and relies on the slide clipping it. Flexslider sets overflow
   inline on the active slide only, so at some widths the overlay escaped and
   widened the page. Clip every slide, and drop the overlay entirely where
   there is no hover to trigger it. */
.woocommerce div.product div.images{overflow:hidden}
/* position:relative matters as much as the clip: the overlay is absolutely
   positioned, so without a positioned slide it resolves against a further
   ancestor and the clip never applies to it. */
.woocommerce div.product div.images .woocommerce-product-gallery__image{position:relative;overflow:hidden}
@media (hover:none){
  .woocommerce div.product div.images .zoomImg{display:none!important}
}
/* Thumbnails: 84px tiles, 12px apart and 14px under the stage, none of them
   dimmed. The row has 5px of padding (hence the 9px margin) because the row
   and the gallery both clip, and the site's focus ring reaches 5px outside
   its element: without it, the ring on an edge thumbnail was cut off. Five
   fit across 540px and a sixth starts a second row.

   The tile's #F6F5F3 is laid over the image as a multiplied wash, not under
   it, for the same reason as the stage: a packshot on white would otherwise
   sit on the grey as a white square. The wash stays inside the 2px border,
   so the border keeps its own colour. The active tile gets an ink ring inside
   that border, drawn as a pseudo-element so it can never be mistaken for the
   keyboard's focus ring, which stays outside. */
.woocommerce div.product div.images .flex-control-thumbs{display:flex;flex-wrap:wrap;gap:12px;margin:9px 0 0;padding:5px}
.woocommerce div.product div.images .flex-control-thumbs li{position:relative;flex:0 0 84px;width:84px;float:none;margin:0;list-style:none}
.woocommerce div.product div.images .flex-control-thumbs li img{display:block;width:84px;height:84px;box-sizing:border-box;border:2px solid #E6E4E1;border-radius:10px;background:#fff;object-fit:contain;opacity:1;cursor:pointer;transition:border-color .15s ease}
.woocommerce div.product div.images .flex-control-thumbs li img:hover{border-color:#A9A6A1}
.woocommerce div.product div.images .flex-control-thumbs li::before{content:"";position:absolute;inset:2px;border-radius:8px;background:#F6F5F3;mix-blend-mode:multiply;pointer-events:none}
.woocommerce div.product div.images .flex-control-thumbs li:has(>img.flex-active)::after{content:"";position:absolute;inset:2px;border:2px solid var(--ink);border-radius:8px;pointer-events:none}
/* That padding also set the tiles 5px in from the stage's edges, where the
   handoff has them flush. On a desktop the gallery carries the ring's room
   instead: it reaches 5px into the gutter on each side and fills it with
   padding, so its clip edge moves out while its content box, and with it the
   stage, stays exactly where it was. The row then reaches into that padding,
   and its tiles line up with the stage. The zoom chip is placed against the
   gallery's padding box, so it reads the same variable to stay 16px from the
   photograph. Phones keep the inset: their row is a scroller, and a tile
   scrolled into the gallery's padding would show past the stage. */
@media (min-width:761px){
  .woocommerce div.product .pdp-main div.images{--gallery-ring-room:5px;width:auto;margin-inline:calc(-1 * var(--gallery-ring-room));padding-inline:var(--gallery-ring-room)}
  .woocommerce div.product div.images .flex-control-thumbs{margin-inline:calc(-1 * var(--gallery-ring-room,0px))}
}
/* 28px, the handoff's. Titles on this catalogue routinely run past 60
   characters because they carry the model number and the finish, so the
   size has to hold two or three lines without reading as a banner; the
   40px price under it is what establishes the hierarchy now. */
.woocommerce div.product .product_title{font-size:28px;line-height:1.25;font-weight:700;margin:0;text-wrap:pretty;flex:1;min-width:0}
/* The browser underlines <ins> by default; next to the struck-through old
   price the underline reads as a second strike or a link. Cards and the
   live search already reset it -- the summary price was the one left out. */
.woocommerce div.product p.price ins,.woocommerce div.product span.price ins,.pdp-buy-bar-amount ins{text-decoration:none}
/* !important on four of these, because the store-wide button rule below
   (".woocommerce button.button", where WooCommerce's own grey submits are
   given the theme's pill) carries its radius, padding, size and weight that
   way. The green "נוסף" receipt is more specific still, so it keeps winning
   over the red. */
.woocommerce div.product form.cart .button{
  height:56px;background:var(--red);
  border-radius:10px!important;padding-inline:20px!important;
  font-size:18px!important;font-weight:600!important;
}
.woocommerce div.product form.cart .button:hover{background:var(--red-dark)}
.woocommerce .quantity .qty{height:50px;border:1px solid var(--line);border-radius:10px}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0!important;display:flex;gap:8px;flex-wrap:wrap}
.woocommerce div.product .woocommerce-tabs ul.tabs:before{display:none!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li{border:1px solid var(--line)!important;background:#f6f3ef!important;border-radius:10px!important;margin:0!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li:before,.woocommerce div.product .woocommerce-tabs ul.tabs li:after{display:none!important}
.woocommerce div.product .woocommerce-tabs .panel{line-height:1.75}
/* Konimbo descriptions join words with &nbsp;, which produces tokens the
   browser will not break -- one product pushed the page 159px wide on a
   390px screen. Break inside them, and let genuinely wide content such as
   spec tables scroll inside the panel rather than the page. */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-product-details__short-description{overflow-wrap:anywhere}
.woocommerce div.product .woocommerce-tabs .panel img{max-width:100%;height:auto}
.woocommerce div.product .woocommerce-tabs .panel table{display:block;max-width:100%;overflow-x:auto}
/* 1,801 descriptions embed a YouTube player with a hardcoded width="560",
   which pushed a 390px screen 197px wide. Video embeds get a 16:9 box that
   scales down; any other iframe is merely capped, since its ratio is
   unknown and forcing 16:9 on a map or a form would crop it. */
.woocommerce div.product .woocommerce-tabs .panel iframe{max-width:100%;border:0}
.woocommerce div.product .woocommerce-tabs .panel iframe[src*="youtube"],
.woocommerce div.product .woocommerce-tabs .panel iframe[src*="youtu.be"],
.woocommerce div.product .woocommerce-tabs .panel iframe[src*="vimeo"]{width:100%;height:auto;aspect-ratio:16/9;border-radius:12px}

/* Cart, checkout and account */
/* Not the account: its page card already pads, and the two stacked left a
   large empty band under the H1 and at the foot of every account page. */
.woocommerce-cart .woocommerce,.woocommerce-checkout .woocommerce{padding:38px 0 74px}
/* Addresses: the two columns the right way round in RTL, and each heading
   with its edit link beside it, looking like a link. */
.rtl .woocommerce .col2-set .col-1,.rtl .woocommerce-page .col2-set .col-1{float:right}
.rtl .woocommerce .col2-set .col-2,.rtl .woocommerce-page .col2-set .col-2{float:left}
.woocommerce-account .addresses .title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:8px}
.woocommerce-account .addresses .title::before,.woocommerce-account .addresses .title::after{content:none}
.woocommerce-account .addresses .title h2{margin-bottom:0}
.woocommerce-account .addresses .title .edit{float:none;color:var(--red);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.woocommerce-account .addresses .title .edit:hover{color:var(--red-dark)}
/* The password fieldset kept the browser's grey groove. */
.woocommerce-EditAccountForm fieldset{border:0;margin:26px 0 0;padding:0;min-inline-size:0}
.woocommerce-EditAccountForm legend{padding:0 0 10px;font-size:16px;font-weight:800}
.shechter-login-note{margin:0 0 20px;padding:14px 16px;border-radius:12px;background:#faf8f6;border:1px solid var(--line);color:#4a4744;font-size:14.5px;line-height:1.6}
/* My Account navigation. WooCommerce ships only a float and a width for it,
   so it showed as a raw bulleted list with no mark of the current page. A
   side menu on the desktop; pills that wrap on a tablet or a phone. */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:var(--ink);font-weight:600;text-decoration:none;transition:background .18s,color .18s}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link a:hover{background:#f5f3f0;color:var(--red-dark)}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link.is-active a{background:var(--red);color:#fff}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
@media (max-width:768px){
  .woocommerce-account .woocommerce-MyAccount-navigation{margin-bottom:24px}
  .woocommerce-MyAccount-navigation ul{flex-direction:row;flex-wrap:wrap;gap:8px}
  .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link a{padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff}
  .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link.is-active a{border-color:var(--red)}
  .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout{margin:0;padding:0;border:0}
}
.woocommerce table.shop_table{background:#fff;border-color:var(--line)!important;border-radius:16px!important;overflow:hidden}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{border-radius:10px!important}
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{background:var(--red)!important}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover{background:var(--red-dark)!important}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.select2-container--default .select2-selection--single{border:1px solid var(--line)!important;border-radius:10px!important;background:#fff;height:46px;padding:8px 12px}
.woocommerce form .form-row textarea{height:120px}
.woocommerce-info,.woocommerce-message,.woocommerce-error{border-radius:12px;background:#fff}
/* A closed card, not only WooCommerce's coloured top edge -- which with the
   radius curved away at the corners; and on a phone the button goes under
   the text rather than squeezing it. */
.woocommerce-info,.woocommerce-message,.woocommerce-error{border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
@media (max-width:600px){
  .woocommerce-info:has(> .button),.woocommerce-message:has(> .button),.woocommerce-error:has(> .button){display:flex;flex-direction:column}
  .woocommerce-info > .button,.woocommerce-message > .button,.woocommerce-error > .button{float:none!important;order:1;margin-top:12px;align-self:stretch;text-align:center}
}

/* Footer and fallback WordPress elements */
.footer-menu{list-style:none;margin:0;padding:0}.footer-menu li{margin:0 0 9px}.footer-menu a{color:#aaa6a1;font-size:13px}.footer-menu a:hover{color:#fff}
.widget{margin-bottom:26px}.widget-title{font-size:18px;margin:0 0 12px}
.wp-block-image img{border-radius:14px}
.alignwide{width:min(1150px,calc(100vw - 48px));max-width:none;margin-inline:50%;transform:translateX(50%)}

/* Empty WooCommerce state */
.woocommerce-required{background:#fff;border:1px dashed #d6d0c7;border-radius:18px;padding:34px;text-align:center}
.woocommerce-required h2{margin-top:0}.woocommerce-required code{direction:ltr;display:inline-block}

@media(max-width:1180px){
  .woocommerce ul.products,.woocommerce-page ul.products,.shechter-products ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:920px){
  .nav-standard{display:none}
  .woocommerce ul.products,.woocommerce-page ul.products,.shechter-products ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .logo img,.custom-logo{max-width:100px;height:58px}
  .hero-wordpress{min-height:510px}
  .hero-wordpress:after{background:linear-gradient(180deg,rgba(0,0,0,.08) 28%,rgba(0,0,0,.88) 88%)}
  .hero-wordpress-copy{min-height:510px;justify-content:flex-end;padding:30px 24px}
  .hero-wordpress-copy h1{font-size:39px}
  .hero-wordpress-copy p{font-size:14px}
  .woocommerce ul.products li.product a img{height:175px;padding:14px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:12px!important;min-height:58px;padding:12px 11px 3px!important}
  .woocommerce ul.products li.product .price{font-size:16px!important;padding:0 11px 10px!important}
  .woocommerce ul.products li.product .button{margin:0 10px 10px!important;min-height:40px;font-size:11px!important;padding-inline:7px!important;text-align:center}
  .primary-menu{display:block;height:auto}.primary-menu>li{height:auto;display:block;border-bottom:1px solid var(--line)}.primary-menu>li>a{height:50px}
  .primary-menu .sub-menu{position:static;width:auto;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;background:#f7f5f1}
  .primary-menu li.open>.sub-menu{display:block}
  /* The mobile search box is absolutely positioned inside the sticky header
     and hangs 51px below it, so the real top of usable content is 158px, not
     the header's 107px. The shell padded for the header alone, which put the
     breadcrumb underneath the search box: two lines of it used to survive by
     accident, and tightening it to one line hid it completely. Reserve the
     overhang instead of padding around a number that no longer holds. */
  .single-product-shell{padding-top:52px}
}
/* Measured, not guessed: the strip fits at 390px, is 5px over at 375, is
   clipped at 360 and pushed the page 33px wide at 320. Below 380 the address
   gives way and the number stays, since a number is the more useful of the
   two on a phone. Specificity matches .announcement-contact a, which would
   otherwise win and keep the address on screen. */
@media(max-width:380px){
  .announcement-contact>i,
  .announcement-contact .announcement-address{display:none}
}
/* The same decision against the width a text zoom actually leaves. theme.js
   sets html.a11y-narrow when the zoomed viewport is under that 380px, which
   a media query cannot see: at 175% on a 390px phone the strip had 223px to
   work with and the address ran 116px past the edge -- more than half the
   string cut, and the header and cookie row sliced alongside it. */
html.a11y-narrow .announcement-contact>i,
html.a11y-narrow .announcement-contact .announcement-address{display:none}

@media(max-width:390px){
  .woocommerce ul.products,.woocommerce-page ul.products,.shechter-products ul.products{gap:9px}
  .woocommerce ul.products li.product a img{height:155px}
}


/* Final integration fixes */
.search .woocommerce-product-search{width:100%;height:100%;display:flex;align-items:center;min-width:0}
.search .woocommerce-product-search>svg{width:20px;height:20px;margin-inline:16px 10px;color:#777;flex:0 0 auto}
.search .woocommerce-product-search>input{height:100%;min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:15px;padding:0 6px}
/* The ring belongs to the pill, not to the input inside it.
   ----------------------------------------------------------------------
   It used to be drawn on the input itself with outline-offset:-3px, which
   put a red rectangle inside a 999px pill -- and worse, the 3px band landed
   exactly where the first character is typed, so the first letter appeared
   to vanish under it. The pill takes the ring now, outside its own edge and
   following its radius, and the input keeps no ring of its own. */
.search .woocommerce-product-search>input:focus-visible{outline:0;box-shadow:none}
/* Chrome's own clear button for type=search. In an RTL field it lands at the
   far end, a grey ✕ floating against the red button with the text it clears
   at the opposite side of the pill. The field is cleared by the keyboard or
   by searching again. */
.search .woocommerce-product-search>input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.search .woocommerce-product-search>button{height:40px;min-width:82px;margin-inline:4px;border:0;border-radius:10px;background:var(--red);color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.search .woocommerce-product-search>button:hover{background:var(--red-dark)}
.mega-menu{max-height:min(72vh,650px);overflow:auto}
.mega-group+.mega-group{border-top:1px solid #eeeae5;margin-top:14px;padding-top:14px}
.mega-group h3{margin-bottom:7px}
.mega-group h3 a{font-size:15px;color:#171717;font-weight:800;min-height:auto}
.primary-menu .wp-submenu-toggle{display:none}
@media(max-width:760px){
  .search .woocommerce-product-search>svg{margin-inline:13px 7px}
  .search .woocommerce-product-search>button{min-width:72px}
  .mega-menu{max-height:none;overflow:visible}
  .primary-menu .menu-item-has-children{display:grid;grid-template-columns:1fr 46px}
  .primary-menu .wp-submenu-toggle{display:flex;width:46px;height:50px;border:0;border-right:1px solid var(--line);background:transparent;align-items:center;justify-content:center}
  .primary-menu .sub-menu{grid-column:1/-1}
}


/* =========================================================
   Version 1.1: white commerce canvas + visible category nav
   The four tokens this section used to redeclare now live in the one :root
   block at the top of the file, carrying these values.
   ========================================================= */
body{background:#fff}
.site-main{background:#fff}
.category-page,.woocommerce-shop .site-main,.tax-product_cat .site-main,.tax-product_tag .site-main,.single-product .site-main{background:#fff}

/* Product photography should merge naturally with white-background images. */
.category-card .category-visual{background:#fff;border-bottom:1px solid #f0f0f0}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{
  background:#fff;
  border-color:#e7e7e7;
  box-shadow:0 5px 20px rgba(20,20,20,.045);
}
.woocommerce ul.products li.product a img{
  background:#fff;
  border-bottom:1px solid #f1f1f1;
}
.shop-shell{background:#fff}
.shop-hero{padding:38px 0 25px;background:#fff;color:var(--ink);border-bottom:1px solid #ededed}
.shop-hero h1{letter-spacing:-.025em}
.shop-hero .term-description{color:var(--muted)}
.shop-hero .term-description p{margin-bottom:0}

/* A compact category strip is always visible on shop/category pages. */
.shop-category-strip{background:#fff;border-bottom:1px solid #ededed}
.shop-category-links{min-height:64px;display:flex;align-items:center;gap:9px;overflow-x:auto;scrollbar-width:none;padding-block:10px}
.shop-category-links::-webkit-scrollbar{display:none}
.shop-category-links a{flex:0 0 auto;min-height:38px;padding:0 15px;border:1px solid #e5e5e5;border-radius:999px;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:650;color:#282828;transition:.18s ease}
.shop-category-links a:hover{border-color:#171717;background:#171717;color:#fff;transform:translateY(-1px)}

/* Top-level product categories are visible in the main navigation. */
.category-quick-nav{height:100%;display:flex;align-items:stretch;min-width:0;flex:1}
.quick-category{height:100%;display:flex;align-items:stretch;position:relative}
/* The red text, the red underline and the turning caret on hover are gone.
   The handoff marks a department by a quiet pill and nothing else, and red
   text on that pill measures 4.44:1, short of AA; the states are set once,
   in the v1.56 header block. */
.quick-category-link{height:100%;padding:0 12px;display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:13px;font-weight:700;color:#282828;position:relative}
.quick-category-link svg{width:14px;height:14px;color:#8b8b8b;transition:transform .18s ease}
.quick-category-dropdown{position:absolute;top:100%;right:0;z-index:245;width:270px;padding:12px;background:#fff;border:1px solid #e5e5e5;border-radius:0 0 15px 15px;box-shadow:0 20px 50px rgba(20,20,20,.14);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px);transition:opacity .17s ease,visibility .17s ease,transform .17s ease}
.quick-category:hover>.quick-category-dropdown,.quick-category:focus-within>.quick-category-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:none}
/* The panel's contents: a heading, the list, and a footer link to the whole
   department. Line heights are set rather than left to Heebo's tall default
   so each band comes out at the handoff's height: 42px, 36px a row, 41px. */
.quick-category-dropdown .qcd-head{padding:10px 12px 12px;border-bottom:1px solid #E6E4E1;color:var(--ink);font-size:16px;font-weight:700;line-height:19px}
.quick-category-dropdown .qcd-list{display:grid;padding:6px 0}
.quick-category-dropdown .qcd-list a{display:block;padding:9px 12px;border-radius:8px;color:#333;font-size:15px;line-height:18px;transition:background .15s ease,color .15s ease}
.quick-category-dropdown .qcd-list a:hover{background:#F6F5F3;color:var(--ink)}
/* Red on white is 5.01:1. The hover darkens the word rather than tinting the
   row: red on the #F6F5F3 wash is 4.60:1, too thin a margin to choose. */
.quick-category-dropdown .quick-category-all{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 12px 8px;border-top:1px solid #E6E4E1;color:var(--red);font-size:15px;font-weight:600;line-height:18px;transition:color .15s ease}
.quick-category-dropdown .quick-category-all:hover{color:var(--red-dark)}
.quick-category-dropdown .quick-category-all svg{width:20px;height:20px;flex:0 0 auto}
.nav-standard{flex:0 0 auto}
.nav-standard .primary-menu>li>a{padding-inline:10px}

/* Keep navigation balanced at common laptop widths. */
@media(max-width:1380px){
  .quick-category:nth-child(n+6){display:none}
  .quick-category-link{padding-inline:10px;font-size:12px}
}
@media(max-width:1220px){
  .quick-category:nth-child(n+5){display:none}
  .nav-standard .primary-menu>li:nth-child(n+4){display:none}
}
@media(max-width:1040px){
  .category-quick-nav{display:none}
  .nav-standard{flex:1}
}
@media(max-width:760px){
  .category-quick-nav{display:none}
  .shop-hero{padding:27px 0 18px}
  .shop-hero h1{font-size:34px}
  .shop-category-links{min-height:56px;margin-inline:-12px;padding-inline:12px}
  .shop-category-links a{min-height:36px;padding-inline:13px;font-size:12px}
  .woocommerce ul.products li.product a img{background:#fff;border-bottom-color:#f0f0f0}
}


/* ===== v1.2 refinements ===== */
.nav-standard{display:none!important}
.nav-inner{justify-content:space-between;gap:12px;padding-block:8px}
.nav-simple-links{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.nav-simple-links .simple-link{height:44px;padding:0 14px;border-radius:11px;font-size:13px;font-weight:700;color:#2b2b2b;display:inline-flex;align-items:center}
/* --red-dark, not --red: on this warm grey #D8232A is 4.45:1, short of AA. */
.nav-simple-links .simple-link:hover{background:#f5f1eb;color:var(--red-dark)}
.category-quick-nav{display:flex!important;flex:1;min-width:0;overflow-x:auto;overflow-y:visible;scrollbar-width:none;padding-bottom:2px}
.category-quick-nav::-webkit-scrollbar{display:none}
.quick-category{flex:0 0 auto}
.quick-category-link{padding-inline:13px;height:44px;border-radius:12px}
.quick-category:hover>.quick-category-link,.quick-category:focus-within>.quick-category-link{background:#faf6f2}
@media(min-width:761px){.quick-category:nth-child(n+5),.quick-category:nth-child(n+6){display:flex!important}}
@media(max-width:1100px){.quick-category-link{padding-inline:11px;font-size:12px}}

.hero-section-refined{padding-top:28px}
.hero-refined{min-height:500px;background:#101010}
.hero-refined:after{background:linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.34) 40%,rgba(0,0,0,.82) 100%)}
.hero-refined-copy{max-width:520px;margin-right:36px;padding:40px 34px;border-radius:24px;background:rgba(18,18,18,.58);backdrop-filter:blur(12px);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.hero-refined-copy h1{font-size:clamp(42px,5vw,72px);line-height:.98;margin-bottom:12px}
.hero-refined-copy p{font-size:16px;line-height:1.75}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero-actions .button-primary,.hero-actions .button-secondary{min-height:48px;padding:0 20px;border-radius:13px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.hero-actions .button-secondary{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff}
.hero-actions .button-secondary:hover{background:rgba(255,255,255,.18)}
.compact-categories{padding-top:40px;padding-bottom:24px}
.compact-grid{display:flex;flex-wrap:wrap;gap:12px}
.category-chip{min-height:46px;padding:0 18px;border:1px solid #e8e1d8;border-radius:999px;background:#fff;color:#262626;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;transition:.18s}
.category-chip:hover{border-color:rgba(216,35,42,.25);background:var(--red-soft);color:var(--red-text);transform:translateY(-1px)}

.with-arrows{display:flex;align-items:end;justify-content:space-between;gap:20px}
.section-subtitle{margin:8px 0 0;color:var(--muted);font-size:13px}
.carousel-arrows{display:flex;gap:10px;flex:0 0 auto}
.carousel-arrow{width:46px;height:46px;border:1px solid #e7e1d8;border-radius:50%;background:#fff;color:#1e1e1e;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.18s}
.carousel-arrow:hover{background:#111;color:#fff;border-color:#111}
.products-carousel{overflow:hidden;position:relative}
.products-track{display:flex;gap:18px;transition:transform .32s ease}
.product-card-custom{flex:0 0 calc((100% - 54px) / 4);display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #eee7de;border-radius:22px;overflow:hidden;box-shadow:0 10px 28px rgba(25,19,16,.05)}
.featured-slider-section .product-media{height:250px;background:#fff}
.featured-slider-section .product-info{padding:18px}
.featured-slider-section .product-info h3{font-size:18px;line-height:1.45;min-height:76px}
.featured-slider-section .prices strong{font-size:20px}
.featured-slider-section .add-cart{min-width:120px}
/* --- the brand marquee ----------------------------------------------------
   One block. There were two, three hundred lines apart, defining the same six
   selectors and two different @keyframes under the same name -- so the strip's
   real padding, background, direction and travel all came from the second
   while the first sat there looking authoritative and doing nothing. The one
   surviving value from each is folded in here. */
.brands-section-carousel{padding:48px 0 56px;background:#faf9f7;border-top:1px solid #f0ece7}
.brands-carousel{overflow:hidden;position:relative;direction:ltr;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}

/* The duration was a flat 28s whatever the strip held, so adding two logos
   quietly sped every logo up. Tied to the count instead -- set on the element
   from front-page.php -- so a logo always takes the same time to cross. */
.brands-track{display:flex;gap:14px;width:max-content;direction:ltr;animation:shechterMarquee calc(var(--brand-count,8) * 3.4s) linear infinite}
.brands-carousel:hover .brands-track,
.brands-carousel:focus-within .brands-track{animation-play-state:paused}

.brand-card{flex:0 0 210px;height:88px;padding:0 18px;border:1px solid #ece5dc;border-radius:16px;background:#fff;box-shadow:0 7px 18px rgba(20,18,16,.035);display:flex;align-items:center;justify-content:center}
/* Grey by default so eight different house styles read as one strip, and the
   real mark on hover. */
.brand-card img{max-width:100%;max-height:46px;object-fit:contain;filter:grayscale(1);opacity:.78}
.brand-card:hover img{filter:none;opacity:1}
@keyframes shechterMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.brands-track{animation:none}}

.human-service-section{padding-top:42px;padding-bottom:72px;background:#fff}
.human-service-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start}
.human-service-copy{padding:34px;border-radius:24px;background:linear-gradient(135deg,#171717,#2a2a2a);color:#fff}
.human-service-copy span{display:block;color:#ffadb6;font-weight:700;font-size:13px;margin-bottom:8px}
.human-service-copy h2{font-size:38px;line-height:1.16;margin:0 0 14px}
.human-service-copy p{margin:0;color:#d8d4cf;font-size:15px;line-height:1.8}
.human-service-cards{display:grid;gap:14px}
.human-service-cards article{padding:24px;border:1px solid #eee6dc;border-radius:20px;background:#fff;box-shadow:0 12px 30px rgba(22,18,15,.04)}
.human-service-cards strong{display:block;font-size:20px;margin-bottom:8px}
.human-service-cards p{margin:0;color:#6d6964;font-size:14px;line-height:1.7}
/* The footer went from near-black to the page's own warm grey. A black slab
   under a white shop read as a second website, and every legal link the
   regulations require to be reachable sat in the part of the page people had
   learned to skip. The WhatsApp band above it keeps the dark, so the one
   thing worth pressing down here is the one thing that is still loud. */
/* The copyright line used to sit on the page's bottom edge: the old dark
   footer gave it room through a 64px min-height on that row, which went with
   the rest of the dark rules. The room belongs to the footer itself. */
.site-footer-refined{background:#F6F5F3;color:var(--ink);border-top:1px solid #E6E4E1;margin-top:0;padding-bottom:32px}
.footer-newsletter-wrap{background:#161616;border-bottom:0}
.footer-newsletter{min-height:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding-block:40px}
.footer-newsletter h2{font-size:26px;line-height:1.25;margin:0;color:#fff}
.footer-newsletter p{margin:8px 0 0;color:#C9C6C1;font-size:15px}
.footer-main-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px 40px;padding-block:48px}
.footer-main-grid h3{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--ink)}
.footer-main-grid p,.footer-main-grid a,.footer-main-grid span{font-size:14px;line-height:1.6;color:#4A4A4A;display:block}
/* A step darker than the handoff's #4A4A4A, at the owner's eye: the value is
   the same in both, but Heebo's stroke is thinner than the Rubik the
   prototype was drawn in, so the same grey reads lighter here. #3A3A3A on
   #F6F5F3 is 10.4:1. */
.footer-main-grid a{color:#3A3A3A}
.footer-main-grid a:hover{color:var(--red)}
.footer-brand-col img{width:auto;height:52px;object-fit:contain;margin-bottom:16px}
.footer-socials{list-style:none;margin:18px 0 0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.footer-socials li{margin:0}
/* 42px square: the same touch target the pill had, minus the label the icon
   now carries. Brand colour only on hover, so three logos do not fight the
   footer for attention while sitting still. */
/* One shape for all three, and no brand colours: on the light footer the
   coloured hovers turned a quiet row into three logos shouting. */
.footer-socials .footer-social{width:40px;height:40px;border-radius:999px;border:1px solid #D9D6D2;background:#fff;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:background .18s ease,color .18s ease,border-color .18s ease}
.footer-socials .footer-social:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.footer-socials .footer-social:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.footer-hours{margin-top:12px;display:grid;gap:4px}
/* The cancellation duty and the payment marks, one row. */
.footer-legal-row{margin-top:40px;padding-top:20px;border-top:1px solid #E6E4E1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;font-size:13px;color:#4A4A4A}
.footer-cancel-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer-cancel-group span{max-width:34ch;line-height:1.5}
.footer-trust-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.footer-trust-badges li{margin:0}
.footer-trust-badges li>*{
  width:54px;height:34px;border:1px solid #E6E4E1;border-radius:6px;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#4A4A4A;letter-spacing:.04em;
}
.footer-trust-badges img{object-fit:contain;padding:4px}
/* Three marks have no logo file in the card set, so they are typed. Each is
   built to the same 54x34 tile, in the brand's own colours, the way the
   handoff draws them. */
.badge-amex{background:#006FCF!important;border-color:#006FCF!important;color:#fff!important;font-size:12px;font-weight:800;letter-spacing:.06em}
.badge-paypal{font-size:13px;font-style:italic;letter-spacing:-.01em;gap:0}
.badge-paypal b{color:#253B80;font-weight:800}
.badge-paypal i{color:#179BD7;font-weight:800;font-style:italic}
.badge-pci{flex-direction:column;gap:0;line-height:1}
.badge-pci b{color:#1E7B4E;font-size:12px;font-weight:800;letter-spacing:.02em}
.badge-pci i{color:var(--muted);font-size:8px;font-style:normal;font-weight:700;letter-spacing:.08em;margin-top:2px}
.badge-ssl{gap:4px;color:var(--ink);font-size:11px}
.badge-ssl svg{flex:0 0 auto}
/* The address is a line with a pin, not a line with an arrow. */
.footer-map-link{display:inline-flex!important;align-items:center;gap:6px}
.footer-map-link svg{flex:0 0 auto}
.whatsapp{background:#25d366;color:#fff}
@media(max-width:1100px){
  .product-card-custom{flex-basis:calc((100% - 18px) / 2)}
  .human-service-grid,.footer-main-grid,.footer-newsletter{grid-template-columns:1fr}
}
@media(max-width:760px){
  .nav-simple-links{display:none}
  .category-quick-nav{display:none!important}
  .hero-refined{min-height:560px}
  .hero-refined-copy{margin:0 16px 18px;max-width:none;padding:24px 20px;border-radius:18px;align-self:end}
  .hero-refined-copy h1{font-size:38px}
  .hero-refined-copy p{font-size:14px}
  .compact-grid{gap:10px}
  .category-chip{min-height:42px;padding:0 14px;font-size:12px}
  .with-arrows{flex-direction:column;align-items:flex-start}
  .carousel-arrows{align-self:flex-start}
  .product-card-custom{flex-basis:85%}
  .brand-card{flex-basis:170px;height:76px}
  .human-service-copy,.human-service-cards article{padding:22px}
  .human-service-copy h2{font-size:30px}
  .footer-newsletter h2{font-size:28px}
  .footer-payments-row{flex-direction:column;align-items:flex-start}
}

/* =========================================================
   Version 1.2 final: clean banner, full category navigation,
   product/brand carousels, service section and richer footer
   ========================================================= */

/* White-header logo variant should sit directly on the header. */
.logo,.logo:hover{
  width:178px;
  height:72px;
  padding:3px 8px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}
.logo img{max-width:100%;max-height:100%;width:auto;height:auto}

/* Product categories are the main navigation; the duplicated WordPress menu is removed.
   The nav deliberately shares .container with the rest of the site so the
   category row lines up with the logo, search, hero and footer. The whole
   row needs about 1195px, which the 1240px container already covers. */
.nav-inner{justify-content:flex-start;gap:5px;padding-block:6px}
.nav-standard{display:none!important}
.category-quick-nav{
  display:flex!important;
  flex:1 1 auto;
  min-width:0;
  align-items:stretch;
  justify-content:center;
  overflow:visible;
}
.quick-category{display:flex!important;flex:0 1 auto;min-width:0}
.quick-category-link{
  height:40px;
  padding-inline:clamp(7px,.65vw,12px);
  font-size:clamp(10px,.69vw,12.5px);
  border-radius:10px;
}
.quick-category-link span{overflow:hidden;text-overflow:ellipsis}
.sale-link{margin-right:auto;padding-inline:8px}
.sale-link span{padding:7px 12px}

/* The source banner already contains its own typography, so it is displayed cleanly. */
.hero-section-clean{padding-top:24px}
.hero-banner-clean{
  display:block;
  width:100%;
  overflow:hidden;
  border-radius:24px;
  background:#111;
  box-shadow:0 18px 48px rgba(20,18,16,.12);
  border:1px solid rgba(20,20,20,.06);
}
.hero-banner-clean img{
  width:100%;
  height:auto;
  aspect-ratio:3840/810;
  object-fit:cover;
}
.hero-banner-clean:hover img{filter:brightness(1.025)}


.compact-categories{padding:52px 0 30px}
.compact-section-head{margin-bottom:20px}
.section-head>div>span,.section-head.minimal>div>span{display:block;color:var(--red-dark);font-size:12px;font-weight:800;margin-bottom:5px}
/* Department tiles on the front page. The chips this replaces were fourteen
   identical pills of text, which told a shopper nothing about what is behind
   any of them; the reference shops both lead with the picture. Cut-outs on a
   soft ground, name underneath, five across. */
.dept-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.dept-card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink)}
.dept-card-media{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;padding:14px;
  border-radius:16px;background:var(--surface-soft);
  overflow:hidden;transition:background .18s ease,box-shadow .18s ease,transform .18s ease;
}
.dept-card-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.dept-card-name{font-size:14.5px;font-weight:700;text-align:center;line-height:1.35}
.dept-card:hover .dept-card-media{background:#efece6;box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.dept-card:hover .dept-card-name{color:var(--red)}
.dept-card:focus-visible{outline:none}
.dept-card:focus-visible .dept-card-media{outline:2px solid var(--red);outline-offset:3px}

/* Five and three are the column counts that divide fifteen departments into
   whole rows, so the ladder steps straight from one to the other. A four-wide
   grid in between ended every tablet on a row of three and a hole. */
@media(max-width:1100px){.dept-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(max-width:560px){
  .dept-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dept-card{gap:9px}
  .dept-card-media{padding:10px;border-radius:14px}
  .dept-card-name{font-size:13px}
  /* Two columns and an odd number of departments leave the last tile alone in
     its row. It runs the full width instead, which reads as a closing banner
     rather than a gap. :last-child:nth-child(odd) is true only when the count
     is odd, so an even count is left as the plain two-up grid. */
  .dept-card:last-child:nth-child(odd){grid-column:1/-1}
  .dept-card:last-child:nth-child(odd) .dept-card-media{aspect-ratio:16/7}
}

.compact-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.category-chip{min-height:44px;padding:0 17px;border:1px solid #e7e1da;border-radius:999px;background:#fff;font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;transition:.18s ease}
.category-chip:hover{border-color:#111;background:#111;color:#fff;transform:translateY(-1px)}

/* Recommended products carousel. Products are selected with WooCommerce's Featured star. */
.featured-slider-section{padding:58px 0 68px;background:#fff;border-top:1px solid #f0ece7}
.with-arrows{align-items:center}
.carousel-arrows{direction:ltr}
/* aria-disabled carries the same look. Disabling a button that currently has
   focus removes it from the tab order and drops focus to <body>, which is what
   happens today on the featured-products arrows: three presses and the
   keyboard reader is back at the top of the document. The reviews rail marks
   its bounds instead of disabling them, so focus survives. */
.carousel-arrow:disabled,
.carousel-arrow[aria-disabled="true"]{opacity:.32;cursor:default;background:#f6f3ef;color:#888;border-color:#ece7e0}
.products-carousel{overflow:hidden;position:relative;padding:3px 2px 12px}
.products-track{display:flex;gap:18px;transition:transform .34s cubic-bezier(.22,.75,.25,1);will-change:transform}
.product-card-custom{direction:rtl;flex:0 0 calc((100% - 54px)/4)}
.product-card-custom .product-media{height:250px;background:#fff;border-bottom:1px solid #f0ece7}
.product-card-custom .product-media img{width:100%;height:100%;object-fit:contain;padding:18px}
.product-card-custom .product-info{padding:17px}
.product-card-custom .product-info h3{font-size:16px;line-height:1.48;min-height:72px}
.product-card-custom .product-bottom{align-items:center}
.product-card-custom .add-cart{min-width:118px}
/* With a quantity stepper the cart control is too wide to share the row with
   the price, so the card stacks: price on its own line, stepper and button
   full width beneath -- the same order the shop-loop card already uses. */
.product-card-qty .product-bottom{flex-direction:column;align-items:stretch;gap:10px}
.product-card-qty .product-bottom .prices{flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap}
.product-card-qty .loop-cart{width:100%}


/* Human service section: one clear promise plus three concrete benefits. */
.human-service-section{padding:64px 0 76px;background:#fff}
.human-service-grid{align-items:stretch}
.human-service-copy{display:flex;flex-direction:column;justify-content:center;padding:42px;box-shadow:0 20px 48px rgba(20,18,16,.12)}
.human-service-copy h2{font-size:clamp(32px,3.3vw,48px);letter-spacing:-.025em}
.human-service-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:25px}
.human-service-actions .button-secondary{background:transparent;border:1px solid #575757;color:#fff}
.human-service-actions .button-secondary:hover{background:#fff;color:#171717}
/* Each card is as tall as its own text.

   They used to be three equal 1fr rows with a 126px floor, so a card holding
   55px of words was rendered 126px tall and the 71px of slack was dropped
   inside it, half above the text and half below. That is what read as too
   airy. It was also brittle: the three rows were tied to the tallest, so
   lengthening one line inflated the other two along with it.

   Auto rows size each card to its own text. The spare height goes nowhere: it
   is left at the foot of the column.

   space-between was tried in between and is wrong, because the spare height
   has to land somewhere and it chose the gaps -- the moment the dark panel
   runs taller than the three cards, which it does whenever its paragraph
   wraps one more line, the 14px gaps blew apart. start keeps the gap fixed at
   14px whatever either side does. The two columns can end a few pixels apart
   and that is the correct trade: a ragged foot is invisible, drifting gaps
   are not. */
.human-service-cards{grid-template-rows:auto auto auto;align-content:start}
.human-service-cards article{display:flex;flex-direction:column;justify-content:flex-start;min-height:0}

/* Footer inspired by the existing store, with cleaner hierarchy and live WooCommerce categories. */
.footer-newsletter-actions{display:flex;align-items:center;justify-content:flex-start;gap:14px;flex-wrap:wrap}
/* The band's one button: WhatsApp green, dark text on it, and a pill rather
   than the outlined rectangle it shared with a mail link that is gone. */
.footer-newsletter-actions .footer-newsletter-primary{
  min-height:0;padding:14px 22px;border:0;border-radius:999px;
  background:#25D366;color:#0B2E1A;font-size:15px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;
}
.footer-newsletter-actions .footer-newsletter-primary:hover{background:#1FBE5A;color:#0B2E1A}
.footer-newsletter-actions .footer-newsletter-primary:focus-visible{outline:2px solid #fff;outline-offset:3px}
.footer-main-grid>div{min-width:0}
.footer-main-grid a{width:max-content;max-width:100%}
.footer-map-link{margin-top:13px;color:var(--ink)!important;font-weight:500}
.footer-contact-col .footer-phone{font-size:20px;color:var(--ink);font-weight:700;direction:ltr}
.footer-hours{margin-top:20px}
.footer-hours strong{display:block;color:var(--ink);font-weight:600;margin-bottom:6px}
.footer-bottom{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;min-height:0;font-size:12px;color:var(--muted)}

/* The row wraps whenever it runs out of width. There are 19 top categories,
   which never fit one line at a legible size -- capping this block at a
   max-width left the widest desktops on a single row that silently clipped
   the overflowing categories against .main-nav's overflow-x:clip. */
@media (min-width:761px){
  .main-nav{height:auto;min-height:52px}
  /* flex-start, not center: the mega menu hangs off .nav-all's right
     edge, so centring the row dragged the panel off the left of the
     screen. Keeping .nav-all against the container edge keeps it in. */
  .nav-inner{height:auto;min-height:52px;flex-wrap:wrap;justify-content:flex-start;padding-block:6px}
  .nav-all{order:1}
  .sale-link{order:2;margin-right:0}
  .category-quick-nav{order:3;flex-basis:100%;flex-wrap:wrap;justify-content:center;padding-top:2px}
  .quick-category-link{height:36px;font-size:11.5px;padding-inline:9px}
  .nav-backdrop{top:216px}
}

@media (max-width:1100px){
  .product-card-custom{flex-basis:calc((100% - 18px)/2)}
  .footer-main-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand-col{grid-column:1/-1}
}

@media (max-width:760px){
  .logo,.logo:hover{width:100px;height:60px;padding:2px}
  .hero-section-clean{padding-top:70px}
  .hero-banner-clean{border-radius:18px}
  .hero-banner-clean img{aspect-ratio:4/3;object-position:center;object-fit:cover}
  .compact-categories{padding:38px 0 20px}
  .compact-grid{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
  .compact-grid::-webkit-scrollbar{display:none}
  .category-chip{flex:0 0 auto;min-height:40px;padding-inline:14px;font-size:12px}
  .featured-slider-section{padding:44px 0 52px}
  .with-arrows{flex-direction:row;align-items:flex-end}
  .section-subtitle{display:none}
  .carousel-arrow{width:42px;height:42px}
  .product-card-custom{flex-basis:84%}
  .product-card-custom .product-media{height:220px}
  .product-card-custom .product-info h3{font-size:14px;min-height:63px}
  .brands-section-carousel{padding:38px 0 44px}
  .brands-carousel{mask-image:none}
  .human-service-section{padding:42px 0 52px}
  .human-service-grid{grid-template-columns:1fr}
  .human-service-copy{padding:26px}
  .human-service-copy h2{font-size:31px}
  .human-service-cards{grid-template-rows:none}
  .footer-newsletter{grid-template-columns:1fr;padding-block:30px}
  .footer-newsletter-actions{align-items:stretch;flex-direction:column}
  .footer-newsletter-actions a{width:100%}
  .footer-main-grid{grid-template-columns:1fr;gap:34px;padding-block:42px}
  .footer-brand-col{grid-column:auto}
  .footer-payments-row{align-items:flex-start}
}
.hero-banner-clean picture{display:block}

/* ---- Store polish: button consistency and grid alignment ---- */

/* WooCommerce ships its form submits (login, register, addresses) in a
   light grey that reads as a disabled control. Give them the theme's
   dark pill. The product-card and .alt rules above are more specific,
   so those buttons keep their own treatment. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .woocommerce-Button{
  background:#1d1d1d!important;color:#fff!important;border:0!important;
  min-height:46px;padding:0 22px!important;border-radius:11px!important;
  font-size:14px!important;font-weight:700!important;line-height:1.2;
  display:inline-flex!important;align-items:center;justify-content:center;
  transition:background .2s ease
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .woocommerce-Button:hover{background:var(--red)!important}

/* Cart and checkout block buttons. These render as <a>, so before the
   prose-link rule was scoped they were painted red and underlined. */
.wc-block-cart__submit-button,
.wc-block-components-button.contained{
  background:var(--red)!important;color:#fff!important;
  text-decoration:none!important;border:0!important;border-radius:11px!important;
  min-height:50px;font-size:15px!important;font-weight:700!important
}
.wc-block-cart__submit-button:hover,
.wc-block-components-button.contained:hover{background:var(--red-dark)!important}
.wc-block-components-product-name{
  text-decoration:none!important;color:var(--ink)!important;font-weight:600
}
.wc-block-components-product-name:hover{color:var(--red)!important}

/* Equal-height rows so every price and add-to-cart button in the grid
   lines up regardless of how many lines the product name wraps to. */
.woocommerce ul.products,
.woocommerce-page ul.products,
.shechter-products ul.products{grid-auto-rows:1fr}

/* The WhatsApp mark is a solid glyph, so it opts out of the global
   outline-icon treatment applied to every other header icon. */
.action-link svg.icon-brand{fill:currentColor;stroke:none}

/* The "all categories" pill kept a 6px block margin from before
   .nav-inner gained its own padding-block, and its fixed height stops
   it stretching, so the margin pushed it 6px below the rest of the nav
   row. Centre it instead of relying on the margin. */
@media(min-width:761px){
  .nav-trigger.all-categories{margin-block:0;align-self:center}
}

/* The logo lost its explicit height to a later height:auto override, and
   the max-height:100% left in its place never resolves - the img sits
   inside an anchor with no height, so the percentage chain breaks. It
   rendered 99px tall inside an 88px header and bled into the
   announcement bar. A pixel cap does not depend on the ancestor chain. */
.logo a{display:flex;align-items:center;height:100%}
.logo img,.custom-logo{max-width:100%;max-height:66px;width:auto;height:auto;object-fit:contain}

/* Between 761px and 920px two nav layouts applied at once: the 920px
   block makes .nav-inner width:max-content for a single scrolling row,
   while the 1380px block wraps it onto several rows. The result wrapped
   AND scrolled, leaving a scrollbar under the header. Wrapping wins.
   overflow-x:clip (unlike auto) lets the y axis stay visible, so the
   category dropdowns still open downwards without the absolutely
   positioned panels dragging the page into horizontal scroll. */
@media (max-width:920px) and (min-width:761px){
  /* .nav-inner also carries .container, so it has to be put back to the
     shared container width -- not auto, which would let it fill the
     full-bleed .main-nav and break alignment with the header above. */
  .nav-inner{width:var(--container);min-width:0;padding-inline:0}
}

@media (min-width:761px){
  /* Closed dropdown panels are only visibility:hidden, so the parts of
     them sitting outside the viewport still counted towards scrollWidth
     and gave the whole page a horizontal scrollbar. clip discards just
     the off-screen remainder, and unlike auto it lets the y axis stay
     visible so the menus still open downwards.
     Note: the panels must stay anchored to their own trigger, not to
     .nav-inner -- anchoring them to the row bottom opens a 6px dead
     band below the trigger that closes the menu on the way to it. */
  .main-nav{overflow-x:clip;overflow-y:visible}
}

/* The 760px block already hid the quick-category row on mobile, but a
   later top-level display:flex!important outranked it by source order,
   forcing the row into the mobile drawer it was never laid out for --
   the category links piled on top of each other. Restore the intent;
   on mobile the categories are reached through the mega menu. */
@media (max-width:760px){
  .category-quick-nav{display:none!important}
}

/* Shipping options in the cart and checkout.

   The same-day rate carries its service area in the label -- "הרצליה עד
   ראשל״צ בלבד, בכפוף לזמינות" -- because WooCommerce cannot express that
   strip as a zone. It runs to about 55 characters, which on a phone is
   three lines, so the row has to grow downwards instead of pushing the
   price off the edge. */
.wc-block-components-radio-control__option,
.woocommerce-shipping-methods li{
  align-items:flex-start;
}
/* break-word, not anywhere: anywhere lets the line break after a trailing
   space too, which reserved a phantom second line under every one-line
   label and opened a hollow band inside each shipping card on phones. */
.wc-block-components-radio-control__label,
.woocommerce-shipping-methods label{
  overflow-wrap:break-word;
  line-height:1.45;
}
.wc-block-components-radio-control__option-layout{
  gap:8px;
}
/* One structure at every width: name and price share a baseline row, the
   note sits under them, a long label wraps inside its own box beside the
   price. The stock flex layout collapsed the price's box to min-content on
   phones, breaking "38 ₪" into one glyph per line, and the stacked line
   boxes stretched a hollow band into every card. Block flow plus one
   explicit row is simpler than fighting that. */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-layout{
  display:block;
}
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__label-group{
  display:flex;
  flex-wrap:nowrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__label{flex:1 1 auto}
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label{
  flex:0 0 auto;
  margin:0;
  white-space:nowrap;
  font-weight:700;
}

/* The delivery choice as cards rather than a bare radio list. Each rate now
   carries a one-line note (set in shechter_annotate_rates), and a bordered
   row with the note under the name is what makes נקודת חלוקה and עד הבית
   read as two different services instead of two prices. Selection is shown
   on the frame, which survives color-blindness where the dot alone does not. */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option{
  border:1.5px solid var(--line);
  border-radius:13px;
  padding:14px 44px 14px 14px;
  margin-bottom:10px;
  background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option:last-child{margin-bottom:0}
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option:hover{border-color:#c9c4bc}
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-checked{
  border-color:var(--red);
  box-shadow:0 0 0 1px var(--red);
}
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__label{font-weight:700}
.wc-block-components-shipping-rates-control__package__delivery_time{
  display:block;
  color:var(--muted);
  font-size:12.5px;
  font-weight:400;
  margin-top:2px;
}

/* The imported catalogue's short descriptions are English marketing copy;
   truncated under a product name in the cart row or the order summary they
   read as debris ("...Boutique Collect"). The variation/details list keeps
   rendering; only the prose is dropped. */
.wc-block-components-product-metadata__description{display:none}

/* The rate selector theme.js renders under the cart's shipping totals row.
   The options themselves ride on the checkout card styles above; only the
   container and its small heading are new. The totals row directly over it
   already restates the chosen price, so the row's own method name would be
   a duplicate line -- hidden while the selector is present. */
.shechter-cart-rates{margin-top:10px}
.shechter-cart-rates-title{font-weight:700;font-size:13.5px;margin-bottom:8px}
.shechter-cart-rates .shechter-no-point{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:#f1efea;font-size:13px;line-height:1.5;color:#4a4744}
.shechter-cart-rates .shechter-no-point strong{font-weight:600;color:#1d1d1d}
.shechter-cart-rates .wc-block-components-radio-control__option{padding:11px 40px 11px 12px;border-radius:11px;margin-bottom:8px}
.wc-block-components-totals-shipping:has(+ .shechter-cart-rates) .wc-block-components-totals-shipping__via{display:none}

/* ==========================================================================
   One-page checkout redesign
   ========================================================================== */

/* The slim checkout header lives in its own block at the end of this file,
   after every shop-header rule it has to outrank. */

/* The 55vh floor on .site-main exists for content pages with little copy;
   a one-product checkout is shorter than that and was left sitting in a
   half-empty viewport. */
body.woocommerce-checkout .site-main{min-height:0}
/* .content-card's clamp() padding is fine on the sides, but 4vw of top/bottom
   padding on a short checkout reads as dead air once the 55vh floor above is
   gone -- give the checkout its own tighter, fixed figure instead. */
body.woocommerce-checkout .content-card{padding:28px clamp(22px,4vw,48px)}

/* Slim checkout footer: trust badges + copyright only. */
.site-footer-checkout{padding-top:8px}
.site-footer-checkout .footer-payments-row{border-top:0}

/* Two columns on wide viewports: fields (right, RTL start) / sticky summary
   (left, RTL end), both flexible so the split stays proportional rather than
   pinning the summary to a narrow fixed track, with a dedicated max-width
   instead of the full 1240px "alignwide" measure.

   That "alignwide" class is core WordPress's full-bleed breakout, built for
   a block theme's edge-to-edge template root: width:min(1150px,100vw-48px)
   plus margin-inline:50% and transform:translateX(50%), which re-centers a
   box against the *viewport*. This theme nests the checkout block inside
   its own already-centered .container > .content-card > .entry-content, so
   that viewport math fights the real container and shoves the block
   sideways -- worst on narrow screens, where it forced horizontal overflow.
   All three properties need resetting together; leaving any one of them
   live still throws the block off by however much that property alone
   contributes. */
/* The cart too: a transformed ancestor becomes the containing block of its
   fixed children, so WooCommerce's sticky 'להמשיך לתשלום בקופה' bar on a
   phone was pinned below the page instead of the screen. */
body.woocommerce-cart .wp-block-woocommerce-cart.alignwide{transform:none;width:100%;max-width:1180px;margin-inline:auto}
body.woocommerce-checkout .wp-block-woocommerce-checkout{
  display:block !important;
  width:100% !important;
  max-width:1180px !important;
  margin:0 auto !important;
  transform:none !important;
}
/* The two columns are NOT children of the block above -- WooCommerce wraps
   the form and the summary in its own .wc-block-components-sidebar-layout
   flex row. An earlier attempt gridded the outer block instead, which handed
   that flex row a single 701px track; below its own breakpoint the row then
   stacked, and the summary dropped underneath the form on desktop. Let
   WooCommerce lay out the columns and only tune width and stickiness here. */
@media (min-width:961px){
  body.woocommerce-checkout .wc-block-components-sidebar-layout{
    gap:28px;
    align-items:flex-start;
  }
  body.woocommerce-checkout .wc-block-components-main{
    flex:1 1 62%;
    min-width:0;
    padding-inline-end:0;
  }
  body.woocommerce-checkout .wc-block-components-sidebar{
    flex:1 1 34%;
    min-width:0;
    padding-inline-start:0;
    position:sticky;
    top:calc(var(--checkout-header-height,72px) + 20px);
  }
}
.woocommerce-checkout .woocommerce{padding-top:20px}

/* The coupon box and the order note both moved out of here; they are now
   built in the "v1.118: coupon, note, address" block at the end of this
   file, where the markup they style is described alongside them. */

/* Mobile order summary -- WooCommerce Blocks already renders its own
   clickable, collapsed-by-default title here (it carries its own
   aria-expanded state), so this only needs to move the block near the top
   of the mobile flow. Adding a second wrapper toggle around it, as an
   earlier version of this file did, produced two near-identical "order
   summary" headers stacked on top of each other. */
@media (max-width:960px){
  body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block{order:-1}
}

/* The address gate that lived here is gone: rates are flat nationwide, so
   the shipping choice shows before the address. The prompt element may
   still exist in the page content until it is edited out; keep it dead. */
.shechter-shipping-prompt{display:none}


/* ==========================================================================
   Site-wide QA pass
   ========================================================================== */

/* Owned locally rather than inherited from WooCommerce's stylesheet, which is
   not enqueued on every template -- the front-page h1 and the search-field
   label depend on this being defined wherever they render. */
.screen-reader-text{
  position:absolute!important;
  /* Pinned, not left at its static position. Absolute with no offsets means
     the containing block is the nearest POSITIONED ancestor, and inside the
     reviews rail there is none -- so the rating labels were laid out against
     the document, at the static position they would have had inside a rail
     scrolled 2,273px along. Chrome counts that in documentElement.scrollWidth
     and the whole site gained an empty 2,273px of scrollable width; Firefox
     does not, which is what hid it. Any offset at all keeps a 1px clipped
     box from moving the page. */
  inset-block-start:0;
  inset-inline-start:0;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);
  white-space:nowrap;
}
.screen-reader-text:focus{
  position:static!important;
  width:auto;height:auto;
  margin:0;padding:10px 16px;
  overflow:visible;
  clip:auto;clip-path:none;
}

/* The gallery's zoom trigger, as the 2026-09 handoff draws it: a 40px white
   chip 16px in from the bottom-left corner of the image, with the zoom glyph
   from shechter_icon() painted as a mask (see --icon-zoom at the top of this
   file). The theme's own chip used to lose to WooCommerce's selector on
   specificity and rendered as WooCommerce's 36px circle at the top; these
   rules use that selector.

   WooCommerce prepends the trigger to the whole gallery, thumbnails and all,
   so bottom:16px would put it on the thumbnail row. The gallery is a size
   container instead, and since the stage is square and as wide as the
   gallery, 100cqw is the stage's height: the chip's top is that less its own
   40px and the 16px inset. The role, the label and WooCommerce's handlers
   are untouched.

   This selector outranks the global a:focus-visible, so the chip's shadow
   would replace the white halo the site's focus ring draws behind itself,
   and the focus state puts the halo back. The chip always sits on a
   photograph, which is where the halo matters: on a red instrument the red
   ring alone all but disappears. */
.woocommerce-product-gallery{container-type:inline-size}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger{
  /* A percentage margin on an absolute box resolves against the containing
     block's width, which for this square photo is its height too. It was
     top:calc(100cqw - 56px): under the text-size zoom WebKit resolves cqw
     against the zoomed width and zooms it again, which put the chip below
     the photo, clipped and invisible. */
  top:0;margin-top:calc(100% - 2 * var(--gallery-ring-room,0px) - 56px);right:auto;left:calc(16px + var(--gallery-ring-room,0px));
  width:40px;height:40px;box-sizing:border-box;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  color:var(--ink);text-indent:0;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:focus-visible{box-shadow:0 0 0 5px rgba(255,255,255,.9)}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before{
  inset:0;margin:auto;
  width:22px;height:22px;box-sizing:border-box;
  border:0;border-radius:0;
  background:currentColor;
  -webkit-mask:var(--icon-zoom) center/contain no-repeat;
  mask:var(--icon-zoom) center/contain no-repeat;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after{display:none}

/* The discount, on the image's top corner. It lives in .pdp-gallery beside
   WooCommerce's gallery, whose top corner is the image's, and it is our own
   class rather than .onsale so the listing cards' !important pill rule never
   reaches it. White on --red is 5.01:1. The leading is the handoff's 15px, as
   on the breadcrumb, which is what makes the tag 27px tall. */
.pdp-sale-badge{
  position:absolute;top:16px;right:16px;z-index:2;
  padding:6px 10px;border-radius:8px;
  background:var(--red);color:#fff;
  font-size:13px;font-weight:600;line-height:1.15;
  pointer-events:none;
}

@media(max-width:760px){
  /* The drawer opens with the category tree already expanded, so the marketing
     intro only pushed the actual navigation a screen down. */
  .main-nav .mega-intro{display:none}

  /* Both fixed bars sit in different stacking contexts (.site-header creates
     one), so the contact bar painted over the bottom of the open drawer. */
  body.menu-open .mobile-contact-bar,
  body.menu-open .whatsapp,
  /* WooCommerce's sticky checkout bar on the cart page too: at z-index 9999
     it sat over the drawer's last item, and a tap on "השוואת מוצרים" went to
     the checkout. It comes back when the drawer closes. */
  body.menu-open .wc-block-cart__submit-container--sticky{display:none}

  /* Footer links were 25px tall -- under any reasonable touch target. */
  .footer-main-grid a,
  .footer-map-link{min-height:40px;display:flex;align-items:center}

  /* 10px was below the point where Hebrew stays legible on a phone. */
  .action-link span{font-size:11px}
  .footer-bottom{font-size:11.5px;gap:6px}

  /* Promo-bar phone number was a 20px-tall tap target. */
  .announcement-inner a{min-height:34px;display:flex;align-items:center;gap:6px}

  /* WooCommerce ships this reveal toggle at 22x22. */
  .woocommerce form .show-password-input{
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
  }
}

/* The category row is the store's primary navigation, and its clamp() floor
   left the labels at 10px on any viewport under ~1800px -- small enough to
   read as unfinished. Raise the floor and let the row wrap (the block above
   now hands over to the wrapped layout up to 1500px) rather than shrink type
   to fit one line. */
.quick-category-link{font-size:clamp(12px,.69vw,13px)}
@media (min-width:761px){
  .quick-category-link{height:38px;font-size:12.5px;padding-inline:10px}
}

/* 10px copyright text was below the theme's own legibility floor. */
.footer-bottom{font-size:12px}


/* ==========================================================================
   Header and navigation -- authoritative layer
   --------------------------------------------------------------------------
   The header had accumulated four generations of overrides. Measured before
   this pass at 1440px: 36px announcement + 88px header row + 138px nav =
   262px of chrome, with the logo image (108x66) floating inside a 178x72 box
   in a 190px grid track, the sale pill 27px tall next to a 40px trigger, and
   the 19-department strip wrapped onto two rows -- so a panel opened from the
   first row covered the chips on the second.
   ========================================================================== */

@media (min-width:761px){
  /* ---- header row ---------------------------------------------------- */
  .header-main{
    height:72px;
    grid-template-columns:auto minmax(240px,1fr) auto;
    gap:clamp(16px,2vw,28px);
    align-items:center;
  }
  .logo,.logo:hover{width:auto;height:52px;padding:0;transform:none;box-shadow:none}
  .logo a,.logo .custom-logo-link{height:100%}
  .logo img,.custom-logo{max-height:52px;width:auto;height:auto}

  .site-header .search{height:44px}
  .site-header .search>button{height:36px;min-width:76px}
  .header-actions{align-items:center;gap:4px}
  .action-link{min-width:58px;height:44px;padding:4px 8px}
  .action-link svg{width:20px;height:20px}
  .action-link span{font-size:11px}

  /* ---- nav row: one line, vertically centred -------------------------- */
  .main-nav{height:auto;min-height:52px}
  .nav-inner{
    height:auto;min-height:52px;
    display:flex;flex-wrap:nowrap;align-items:center;
    justify-content:flex-start;gap:6px;padding-block:6px;
  }
  .nav-all{order:1;flex:0 0 auto}
  .category-quick-nav{
    order:2;
    flex:1 1 auto;flex-basis:auto;flex-wrap:nowrap;
    justify-content:flex-start;align-items:center;
    padding-top:0;min-width:0;
  }
  .sale-link{order:3;flex:0 0 auto;margin-right:auto;margin-left:0}

  .nav-trigger.all-categories{height:40px;margin-block:0;align-self:center}
  .sale-link{height:40px;display:inline-flex;align-items:center;padding-inline:10px}
  .sale-link span{padding:0 12px;height:28px;display:inline-flex;align-items:center}

  .quick-category{align-items:center}
  .quick-category-link{
    height:40px;
    padding-inline:clamp(9px,.8vw,10.5px);
    font-size:clamp(12px,.85vw,13.5px);
    border-radius:10px;
    /* No underline pseudo-element and no padding change on hover: both moved
       neighbouring chips by a pixel or two on every pass. */
    transition:background .16s ease,color .16s ease;
  }
  /* The trigger's states -- hover, open, the current department -- are set
     once, in the v1.56 header block. The ones that lived here painted the
     open pill with red text, and stopped the caret turning while the pointer
     sat on the trigger of the very panel it had opened. */
}

/* ---- panels on a short screen -------------------------------------------
   The panels are fixed to the viewport, so what runs below its bottom edge
   could not be reached by scrolling the page: on a 1024x600 laptop or a
   phone held sideways, the lower departments and 'לכל מוצרי …' were gone.
   The list scrolls instead, inside the panel; the head and the 'all' link
   stay put. The panel itself is not given overflow, which would clip the
   bridge its ::before draws back up to the trigger. */
@media (min-width:761px){
  .mega-menu{max-height:min(650px,calc(100vh - var(--panel-top,160px) - 12px))}
  .quick-category-dropdown .qcd-list{max-height:calc(100vh - var(--panel-top,160px) - 150px);overflow-y:auto;overscroll-behavior:contain}
}

/* ---- dropdown panels: one shared treatment --------------------------- */
/* Opened by the .open class that the hover-intent controller in theme.js
   sets, plus :focus-within so keyboard users get the same panel. Deliberately
   NOT :hover -- CSS hover closes the instant the pointer leaves the trigger,
   which makes a diagonal path into the panel impossible. */
@media (min-width:761px){
  .submenu,.mega-menu,.quick-category-dropdown{
    /* Fixed, not absolute. The header is position:sticky, and once it is
       actually stuck Safari promotes it to its own compositing layer and clips
       that layer's HIT-TEST region to the header's own box -- while still
       painting descendants that overflow it. These panels hang ~360px below
       the header, so the part below its bottom edge rendered normally but
       passed the pointer straight through to the page underneath: a real
       pointerleave the moment the cursor crossed the header's bottom edge, and
       the panel closed. It only ever happened once scrolled, because at
       scrollY 0 the header is not stuck and not promoted. Taking the panels
       out of that layer removes the whole failure mode; theme.js keeps
       --panel-top / --panel-right in step with the trigger. */
    position:fixed;
    top:var(--panel-top,100%);
    inset-inline-end:auto;
    right:var(--panel-right,0);
    left:auto;
    margin-top:0;
    z-index:250;              /* was `auto` on .mega-menu, 245 here */
    background:#fff;          /* fully opaque, over any page content */
    border:1px solid #e6e2dc;
    border-radius:0 0 16px 16px;
    box-shadow:0 18px 44px rgba(20,18,16,.13);
    opacity:0;visibility:hidden;pointer-events:none;
    /* No transform, in any state. The panel used to animate in from
       translateY(4px), which meant that for the whole 160ms of the transition
       its hit-test box sat a few pixels below where it renders when settled --
       a moving band under the trigger belonging to neither box. A pointer
       crossing it produced a real pointerleave and the panel closed again
       straight after opening. Fading opacity alone never moves the box.
       `none` is set explicitly because the original rules earlier in this file
       still declare translateY(7px)/(8px) on these same elements. */
    transform:none;
    /* visibility is a discrete property, so a duration on it holds the old
       value for the whole 160ms. That is right on the way out -- the panel
       must stay hit-testable while it fades -- and wrong on the way in: for
       those 160ms the panel computes as hidden, and a hidden subtree has no
       tab stops, so Tab from a department link stepped straight over the
       menu it had just opened and the panel's links could not be reached by
       keyboard at all. Zero duration with a delay flips it after the fade
       when closing; the open rule below drops the delay so it flips at once
       when opening. opacity keeps the fade in both directions, and nothing
       here moves the box, so the pointer behaviour documented above is
       untouched. */
    transition:opacity .16s ease,visibility 0s ease .16s;
  }
  /* Transparent hover bridge. Covers the seam between the trigger's bottom
     edge and the panel's top edge so sub-pixel rounding, a fractional layout
     or a repaint mid-transition can never expose a gap the pointer can fall
     through. It belongs to the panel, so hovering it counts as being inside
     the group, and it is inert while the panel is closed (pointer-events are
     inherited from the panel). */
  .submenu::before,.mega-menu::before,.quick-category-dropdown::before{
    content:"";
    position:absolute;
    left:0;right:0;top:-10px;height:10px;
  }
  .nav-dropdown.open>.submenu,
  .nav-dropdown.open>.mega-menu,
  .nav-dropdown:focus-within>.submenu,
  .nav-dropdown:focus-within>.mega-menu,
  .quick-category.open>.quick-category-dropdown,
  .quick-category:focus-within>.quick-category-dropdown{
    opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .16s ease,visibility 0s ease 0s;
  }
  /* Hover alone no longer opens anything -- the controller owns that.
     `escaped` does the same for focus-within, so that Escape can dismiss a
     panel the keyboard is still inside (see theme.js). */
  .nav-dropdown:hover>.submenu,
  .nav-dropdown:hover>.mega-menu,
  .quick-category:hover>.quick-category-dropdown,
  .nav-dropdown.escaped:focus-within>.submenu,
  .nav-dropdown.escaped:focus-within>.mega-menu,
  .quick-category.escaped:focus-within>.quick-category-dropdown{
    opacity:0;visibility:hidden;pointer-events:none;
  }
  .nav-dropdown.open:hover>.submenu,
  .nav-dropdown.open:hover>.mega-menu,
  .quick-category.open:hover>.quick-category-dropdown{
    opacity:1;visibility:visible;pointer-events:auto;
  }

  /* ---- "all categories": the desktop panel ---------------------------- */
  .mega-menu{
    left:auto;
    width:min(840px,calc(100vw - 48px));
    /* 14px here + 14px on every column = the 28px outer inset, while keeping
       each column's padding identical so the hover chips are inset by the
       same amount in all three. Giving the outer columns zero start padding
       instead made their chips 14px wider than the inner ones. */
    padding:28px 14px 20px;
    max-height:none;overflow:visible;
  }
  /* ---- per-department panels ----------------------------------------- */
  /* The handoff's card: 280px of content inside 8px of padding and a 1px
     border, so 298 outside. Rounded on all four corners, because it now
     opens 6px below its trigger instead of hanging off the header's edge. */
  .quick-category-dropdown{width:298px;padding:8px;border-color:#E6E4E1;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.10)}
  /* padding-right on hover shifted the label sideways on every pass.
     --red-dark: --red is 4.49:1 on #f5f2ee, just under AA. */
  .submenu a:hover{padding-right:10px;background:#f5f2ee;color:var(--red-dark)}
  .quick-category-dropdown a,.submenu a{transition:background .15s ease,color .15s ease}

  /* Anchored to the header's real bottom edge instead of a hard-coded
     216px that stopped matching once the nav row changed height. */
  .nav-backdrop{top:var(--header-bottom,181px)}
  /* Only the mega menu dims the page. A department panel is a short list
     under its own trigger, and the handoff draws it over the page as it is;
     a 38% veil for a seven-line list made every pass along the row flash the
     whole screen. The drawer's backdrop on phones is a different rule. */
  .site-header.dropdown-open:not(:has(.nav-all.open,.nav-all:focus-within)) .nav-backdrop{opacity:0;visibility:hidden}
}

/* Neither the logo nor the action buttons may change size on hover -- both
   sit in a grid whose tracks are content-sized, so a transform or a border
   width change nudged the whole row. Colour and background only. */
.logo:hover,.logo:focus-within{transform:none;box-shadow:none}
.action-link{border-color:transparent}
.action-link:hover{background:#f4f2ef;border-color:transparent}
.mega-column a:hover{transform:none}

/* The department list is shared by the desktop panel and the mobile drawer,
   so its own styling lives outside the desktop media query -- when it was
   inside, the drawer rendered the links as a run-on wall of inline text. */
/* The department list is shared by the desktop panel and the mobile drawer,
   so the link styling lives outside the desktop media query -- when it was
   inside, the drawer rendered the links as a run-on wall of inline text.
   Single column is the mobile base; the desktop block below widens it. */
.mega-menu-inner{display:grid;grid-template-columns:1fr;min-height:0}
.mega-col{display:flex;flex-direction:column;min-width:0}
.mega-link{
  display:flex;align-items:center;
  min-height:44px;padding:0 12px;
  border-radius:10px;
  color:#332f2b;font-size:14px;font-weight:600;line-height:1.25;
  /* One line where it fits; the longest label carries a parenthesised English
     suffix and would otherwise wrap and break the row rhythm. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .14s ease,color .14s ease;
}
/* Background and colour only -- no transform, no padding change. Both used to
   nudge the row and, in a grid whose tracks are content-sized, the whole
   panel with it. The text is --red-dark because --red on #f4f1ed is
   4.45:1, which fails AA for a 14px label. */
.mega-link:hover{background:#f4f1ed;color:var(--red-dark)}
.mega-link:focus-visible{background:#f4f1ed;color:var(--red-dark);outline:2px solid var(--red);outline-offset:-2px}

.mega-menu-foot{margin-top:14px;padding-top:12px;border-top:1px solid #ede9e3}
.mega-menu-foot a{
  display:inline-flex;align-items:center;gap:7px;
  min-height:38px;padding:0 12px;border-radius:9px;
  color:var(--red);font-weight:800;font-size:13.5px;
  transition:background .14s ease;
}
.mega-menu-foot a:hover{background:var(--red-soft);color:var(--red-text)}
.mega-menu-foot a:focus-visible{background:var(--red-soft);color:var(--red-text);outline:2px solid var(--red);outline-offset:-2px}
/* Chevron, not a text arrow: a bare "←" is a bidi hazard next to Hebrew and
   flipped direction depending on where the browser placed it. */
.mega-menu-foot svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

@media (min-width:761px){
  /* Three real columns. Declared HERE, after the single-column base above:
     when this lived earlier in the file the later base rule -- same
     specificity, further down -- silently overrode it at every width and the
     panel collapsed to one 730px column, 923px tall. */
  .mega-menu-inner{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0}
  .mega-link{min-height:50px;font-size:13.5px;padding-inline:14px}
  /* A hairline between columns carries the three-column structure without
     adding weight. Logical properties throughout: in RTL the first column is
     the rightmost, so the rule belongs on each later column's inline-start
     edge and never lands on the panel's outer edges. 14px of padding either
     side of it gives the 28px of column spacing. */
  .mega-col{padding-inline:14px}
  .mega-col + .mega-col{border-inline-start:1px solid #f0ece6}
  /* Footer rule and label line up with the column chips above them. */
  .mega-menu-foot{margin-inline:14px}
  .mega-menu-foot a{padding-inline:14px}
}

/* The panel in groups (2026-09-30): a heading over each column, as in the
   footer, rows at 38px instead of 50, and each department's count in grey.
   Shared base first, then the desktop and the drawer. */
.mega-col-title{margin:0;font-size:12px;font-weight:700;line-height:20px;letter-spacing:.08em;color:#7a766e}
.mega-link-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mega-count{flex:0 0 auto;margin-inline-start:auto;padding-inline-start:12px;font-size:12px;font-weight:500;color:#9a968e;font-variant-numeric:tabular-nums}
.mega-link:hover .mega-count{color:inherit;opacity:.75}
@media (min-width:761px){
  .mega-col-title{padding:0 14px 8px}
  .mega-link{min-height:38px;font-size:14px}
  .mega-link-sale{color:var(--red-dark)}
}
@media (max-width:760px){
  .main-nav .mega-col-title{padding:16px 16px 4px;background:#fff}
  .main-nav .mega-link-sale{display:none}
  .main-nav .mega-link:has(.mega-count):after{margin-inline-start:10px}
}

@media (max-width:760px){
  /* In the drawer this panel is not a dropdown at all: it is the menu. Shown
     unconditionally so the departments are there even before the script that
     expands it runs, and with no inner padding, because full-bleed rows read
     as a list rather than as a card floating inside a card. */
  .main-nav .nav-all>.mega-menu{display:block;padding:0;background:#fff}
  .main-nav .mega-link{
    min-height:52px;padding-inline:16px 14px;
    border-bottom:1px solid #f1eee8;border-radius:0;
    color:#25221e;
    -webkit-tap-highlight-color:transparent;
  }
  /* Something to press towards. A row of words with nothing at the end of it
     is the same complaint the category chips got: it did not look tappable.
     Physical borders, not logical ones -- the arrow has to point the way the
     next page comes from, which in RTL is the left. */
  .main-nav .mega-link:after{
    content:"";flex:0 0 auto;width:7px;height:7px;margin-inline-start:auto;
    border-left:2px solid #cdc6bb;border-bottom:2px solid #cdc6bb;
    transform:rotate(45deg);
  }
  .main-nav .mega-link:active{background:#f7f5f1}
  .main-nav .mega-col:last-child .mega-link:last-child{border-bottom:0}
  /* The two links at the foot used to sit as bare text on the bottom edge of
     the panel. They are the drawer's only way out of the category list, so
     they get button weight and room to breathe. */
  .main-nav .mega-menu-foot{display:grid;gap:9px;margin:16px 14px 0;padding-top:16px;border-top:1px solid #ede9e3}
  .main-nav .mega-menu-foot a{justify-content:center;min-height:48px;padding:0 14px;border-radius:12px;font-size:14px}
  .main-nav .mega-menu-foot a:first-child{background:var(--red);color:#fff}
  .main-nav .mega-menu-foot a:first-child svg{stroke:#fff}
  .main-nav .mega-menu-foot .mega-menu-sale{border:1.5px solid var(--red);background:#fff}
  .main-nav .mega-menu-foot .mega-menu-saved{border:1px solid var(--line-strong);background:#fff;color:var(--ink)}
  /* Filling these two buttons broke their focus ring. The theme's ring for
     them is red, drawn INSIDE the box, and it was only ever legible because
     the same rule repainted the background near-white -- which the fills
     above now outrank. Red on red is not a focus indicator. A dark ring
     outside the pill reads on both buttons and against the white drawer, and
     it is the only thing telling a keyboard user where it is: below 760px
     these are two of the three ways out of the trapped drawer. */
  .main-nav .mega-menu-foot a:focus-visible{outline:3px solid #17140f;outline-offset:2px}
}
/* A finger leaves its hover behind. Tapping a department and coming back to
   the drawer left that row tinted as though it were selected, which on a list
   of places to go reads as "you are here". */
@media (max-width:760px) and (hover:none){
  /* :not(:active) so the press tint still wins while the finger is down --
     iOS latches :hover from touch-down, and without this the neutraliser
     (same specificity, later in the file) would swallow the only feedback a
     tapped row has. */
  .main-nav .mega-link:hover:not(:active){background:transparent;color:#25221e}
}


/* =========================================================
   Version 1.12: product page
   ========================================================= */

/* --- the buy box ----------------------------------------------------------

   Sections separated by space and by one thin rule, with no boxes inside a
   box: the warranty, the payment terms and the delivery options each used to
   sit in a bordered card of their own, and four frames stacked in one column
   made the red buy button compete with them rather than lead. What is left
   is a reading order -- title, meta, description, price, availability, kit,
   buy, payments, compare and ask, delivery, warranty -- and the only colour
   in it is the price and the button. */

/* The label over a section. Not a heading in size, because the h1 above it
   is the product and these are its departments. --muted rather than the
   handoff's #767676: at 12px this is the smallest text in the column, and
   #767676 holds 4.5:1 only on white, while --muted is 5.4:1 there and still
   passes on the greys the page hovers with. */
.pdp-kicker{
  margin:0 0 10px;
  font-size:12px;font-weight:600;line-height:1.3;letter-spacing:.06em;
  color:var(--muted);
}

/* The title, and the two things you can do to the product itself. */
.pdp-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pdp-title-actions{position:relative;display:flex;gap:2px;flex:0 0 auto}
.pdp-icon-btn{
  width:40px;height:40px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.pdp-icon-btn:hover{background:#F6F5F3}
/* Saved is the filled heart in the brand red, which is the one mark on this
   page people look for by colour. */
.pdp-icon-btn.is-on{color:var(--red)}
.pdp-icon-btn.is-on svg{fill:currentColor}

/* The short description, a subtitle under the meta line. 60ch of Heebo is
   about 520px, which is a comfortable measure inside a 660px column. */
.woocommerce div.product .woocommerce-product-details__short-description{margin:14px 0 0;font-size:15px;line-height:1.6;color:#4A4A4A;max-width:60ch;text-wrap:pretty}
.woocommerce div.product .woocommerce-product-details__short-description p{margin:0 0 8px}
.woocommerce div.product .woocommerce-product-details__short-description p:last-child{margin-bottom:0}

/* Brand, SKU and colour. One line of facts, with the brand as a plain link:
   as a bordered pill it read as a filter chip, and this is a name. */
.pdp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 0;font-size:14px;color:#4A4A4A}
.pdp-meta-sep{color:var(--muted)}
.pdp-brand{color:var(--ink);font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
a.pdp-brand:hover{text-decoration:underline;text-underline-offset:3px}
.pdp-sku span{unicode-bidi:isolate}
.pdp-swatch{
  display:inline-block;width:14px;height:14px;margin-inline-end:6px;vertical-align:-2px;
  border:1px solid #D9D6D2;border-radius:50%;
}

/* The price. WooCommerce prints the struck original before the current one,
   which is the right reading order for a screen reader and the wrong one on
   screen, so order:-1 moves the number that matters to the start of the
   line and leaves the source alone. */
.woocommerce div.product p.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin:24px 0 0;font-size:40px;font-weight:700;line-height:1;color:var(--red)}
.woocommerce div.product p.price ins{order:-1;font-size:40px;font-weight:700;line-height:1;color:var(--red)}
/* WooCommerce core dims the old price to .7 alpha, which drops it under
   4.5:1 on white. Full strength, one size down, in --muted. */
.woocommerce div.product p.price del{font-size:17px;font-weight:400;line-height:1.3;color:var(--muted);opacity:1}
/* A product sold by enquiry has no number to shout. Ink, and the size of a
   sentence rather than of a price. */
.woocommerce div.product p.price .price-on-request{font-size:22px;font-weight:600;color:var(--ink)}
.pdp-saving{font-size:14px;font-weight:600;line-height:1.4;color:var(--red-text)}

/* Availability. Green because it is good news and because red is spoken
   for; --green rather than the handoff's #1E7B4E, which is the same claim
   in a colour this site already carries (4.5:1 on white either way). */
.pdp-stock{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:15px;font-weight:600;color:var(--green)}
/* A special order is not stock and must not wear its green. Ink with a
   hollow ring reads as a statement of fact rather than as good news, and it
   does not compete with the price or the button for the red/green the rest
   of the column uses. */
.pdp-stock.is-special{color:var(--ink)}
.pdp-stock.is-special .pdp-stock-dot{background:none;border:2px solid var(--muted)}
.pdp-stock-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:currentColor}
.pdp-stock-note{margin:4px 0 0;padding-inline-start:16px;font-size:13px;line-height:1.5;color:var(--muted)}

/* What is in the box. A checklist, not a spec table: these are things a
   shopper counts, and the two-column grid keeps five of them to three lines
   instead of five. */
.pdp-included{margin:26px 0 0}
.pdp-included ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 16px;font-size:15px}
.pdp-included li{display:flex;align-items:center;gap:8px;line-height:1.4}
.pdp-included svg{flex:0 0 auto;color:var(--green)}

/* Priced delivery options. This is the shop's real differentiator: the cost
   shown here is computed from the same helpers that filter rates at
   checkout, so it can never promise a method the cart withholds. */
.pdp-delivery{margin:22px 0 0;padding-top:18px;border-top:1px solid #E6E4E1}
.pdp-delivery ul{list-style:none;margin:0;padding:0}
.pdp-delivery li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #E6E4E1}
.pdp-delivery svg{flex:0 0 auto;color:#4A4A4A}
.pdp-delivery-text{flex:1;min-width:0}
.pdp-delivery-label{display:block;font-size:15px;font-weight:500;line-height:1.35}
.pdp-delivery-sub{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--muted)}
.pdp-delivery-value{flex:0 0 auto;font-size:16px;font-weight:600}
.pdp-delivery-value.is-free{color:var(--green)}

/* Warranty and the reassurances around it, the last block in the column.
   Two by two on a desktop and one column on a phone, with no tint and no
   red: every one of these is a fact about the service, not an offer. */
.pdp-assurance{margin:24px 0 0}
.pdp-assurance .pdp-kicker{margin-bottom:12px}
.pdp-assurance-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 16px;font-size:15px}
.pdp-assurance-list li{display:flex;align-items:center;gap:10px;line-height:1.4}
.pdp-assurance-list svg{flex:0 0 auto;color:#4A4A4A}
.pdp-assurance-list a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#C9C6C1}
.pdp-assurance-list a:hover{text-decoration-color:currentColor}
.pdp-assurance-list a:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:3px}
.pdp-assurance-phone{white-space:nowrap;font-weight:500}

/* Instalments. One sentence with the monthly amount in it; the table behind
   פירוט is a dialog, because opened in place its eleven rows pushed
   everything under them off the screen. */
.pdp-pay{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0;font-size:15px;line-height:1.5;color:#4A4A4A}
.pdp-pay>svg{flex:0 0 auto;color:#4A4A4A}
.pdp-pay-text{min-width:0}
.pdp-pay-text strong{color:var(--ink);font-weight:600}
/* Ink, not red: red on this page is the price and the button. */
.pdp-pay-more{
  flex:0 0 auto;padding:0;border:0;background:none;
  font:inherit;font-size:15px;color:var(--ink);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
/* The hover thickens the underline rather than recolouring the text: ink is
   already as dark as this line goes, so the colour it used to set on hover
   was the colour it already had and a pointer got no answer at all. The rule
   above deliberately keeps the resting underline at full strength, as the
   handoff draws it, so there is nothing to fade in instead. */
.pdp-pay-more:hover{text-decoration-thickness:2px}
.pdp-pay-more:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.pdp-pay-more[hidden]{display:none}

/* A native <dialog>: modality, Escape, and the focus trap come from the
   browser rather than from script that has to be kept correct. */
.pay-modal{
  width:min(440px,calc(100vw - 32px));max-width:none;
  /* Capped and scrolled inside, so a twelve-row table cannot grow the
     dialog past the screen. */
  max-height:min(78vh,560px);padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
}
.pay-modal:not([open]){display:none}
.pay-modal::backdrop{background:rgba(20,18,16,.5)}
.pay-modal-head{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);
}
.pay-modal-head h2{margin:0;font-size:16px;line-height:1.3}
.pay-modal-close{
  margin-inline-start:auto;flex:0 0 auto;
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;background:#fff;color:#56514b;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.pay-modal-close:hover{background:var(--surface-soft);color:var(--ink)}
.pay-modal-close:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.pay-modal-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}

.pay-table-wrap{padding:6px 18px 16px}
/* The table scrolls inside its own box rather than widening the dialog: the
   third column carries two amounts on an interest row. */
.pay-table{width:100%;border-collapse:collapse;font-size:12.5px;margin:0}
.pay-table th,.pay-table td{padding:8px 4px;text-align:start;font-weight:500;color:#3f3b36}
.pay-table thead th{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line)}
.pay-table tbody tr+tr{border-top:1px solid #eeeae4}
.pay-table tbody th{font-weight:800;color:#1d1d1d;white-space:nowrap}
.pay-table bdi{font-weight:700;color:#1d1d1d}
.pay-badge{display:inline-block;margin-inline-start:6px;padding:1px 7px;border-radius:999px;background:#e8f6ee;color:#127a46;font-size:10.5px;font-weight:700;vertical-align:middle}
.pay-first,.pay-extra{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:1px}
.pay-first bdi,.pay-extra bdi{font-weight:600;color:var(--muted)}

/* Cart and checkout totals. */
.cart-installments td{padding-block:10px!important}
.cart-installments-inner{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.4;color:#3f3b36}
.cart-installments-inner>svg{color:#6f6a63;flex:0 0 auto}
.cart-installments-inner bdi{font-weight:800;color:#1d1d1d;white-space:nowrap}
/* The rest of the plans this basket qualifies for. A details element, so it
   opens with no script; the table inside is the product page's own. */
.cart-installments-more{margin-top:8px;font-size:12.5px}
.cart-installments-more>summary{
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:32px;
  color:var(--red-text);font-weight:700;list-style:none;
}
.cart-installments-more>summary::-webkit-details-marker{display:none}
/* Physical borders on purpose: a chevron points down or up, which is not a
   reading direction, and border-inline-end flips to the left edge in RTL and
   turned the closed arrow sideways. */
.cart-installments-more>summary::after{
  content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);margin-top:-3px;transition:transform .15s ease;
}
.cart-installments-more[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
.cart-installments-more>summary:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:6px}
.cart-installments-more .pay-table-wrap{padding:4px 0 2px}
/* The terms the rows past the interest-free ones are priced at, under the table. */
.pay-note{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}
/* The checkout's own choice of how many payments. A native select, sized to
   a finger and to the longest label ("12 תשלומים · 343 ₪ לחודש · סה״כ …"),
   with the arrow drawn on the start side, which is the left in Hebrew. */
/* Scoped to the slot: WooCommerce's summary styles give every direct child
   of its sections 16px 0, which put the label against the box's edge. */
.cart-installments-choose,
.wc-block-components-order-meta .cart-installments-choose{display:grid;gap:6px;padding:14px 16px 16px}
.cart-installments-label{font-size:14px;font-weight:700;color:var(--ink)}
.cart-installments-select{
  width:100%;min-height:48px;padding:0 14px 0 38px;border:1px solid #8c8781;border-radius:10px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236d6a66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left 14px center;
  color:var(--ink);font:inherit;font-size:15px;appearance:none;-webkit-appearance:none;cursor:pointer;
  text-overflow:ellipsis;
}
.cart-installments-select:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-color:var(--red)}
/* While the new total is on its way. The select stays live -- disabling a
   focused control throws a keyboard user out of it -- so only the look says so. */
.cart-installments-choose[aria-busy="true"] .cart-installments-select{cursor:progress;background-color:#faf8f6}
.cart-installments-terms{margin:0;font-size:11.5px;line-height:1.5;color:var(--muted)}

/* --- the details, in two columns ------------------------------------------

   The description and the specification share one row instead of stacking as
   two full-width sections: the table is the shorter of the two on almost
   every product, and under a 1,240px description it used to start a screen
   below the copy it belongs with. Either column is dropped when there is
   nothing to put in it, and the other one then keeps its own width. */
/* clear:both is load-bearing. WooCommerce floats the gallery and the summary
   side by side, so without it this section rides up into the gap beside the
   gallery and wraps into a narrow column. */
.pdp-details{
  clear:both;
  display:flex;flex-wrap:wrap;gap:40px 64px;align-items:flex-start;
  padding:48px 0;border-top:1px solid var(--line);
}
/* 691px rather than the handoff's 68ch: ch is the width of a "0", and Heebo's
   is narrower than that of the font the prototype was drawn in, so 68ch
   computes to 611px here -- a longer column of shorter lines, with the spec
   table pulled 80px further in. */
.pdp-about{flex:1 1 440px;min-width:0;max-width:691px}
.pdp-spec{flex:1 1 320px;min-width:0;max-width:460px}
/* No bar and no clamp. The h1 is the product; these name its parts. */
.pdp-h{margin:0;font-size:22px;font-weight:700;line-height:1.25}

/* overflow-wrap belongs here now that .pdp-prose replaced the tab panel:
   Konimbo descriptions join words with &nbsp; into tokens the browser will
   not break, and one of them pushed a 430px screen 99px wide. */
/* margin-top as well as the paragraph's own: 417 descriptions open with an
   embed or an image rather than a <p>, and those would otherwise sit flush
   against the heading. Adjacent margins collapse, so the gap stays 14px. */
.pdp-prose{margin-top:14px;line-height:1.7;color:#333;font-size:16px;overflow-wrap:anywhere}
/* Descriptions arrive mixed: some Hebrew, many supplied by the manufacturer
   in English. plaintext lets each block take its direction from its own first
   strong character, so an English paragraph reads left-to-right with its full
   stop in the right place instead of inheriting the page's RTL. */
.pdp-prose p,.pdp-prose li,.pdp-prose h2,.pdp-prose h3,.pdp-prose h4,.pdp-prose div,.pdp-prose td,.pdp-prose th{unicode-bidi:plaintext}
.pdp-prose h2,.pdp-prose h3,.pdp-prose h4{margin:28px 0 0;font-size:18px;font-weight:600;line-height:1.35;color:var(--ink)}
.pdp-prose h2+p,.pdp-prose h3+p,.pdp-prose h4+p{margin-top:10px}
.pdp-prose p{margin:14px 0 0;text-wrap:pretty}
.pdp-prose ul,.pdp-prose ol{margin:14px 0 0;padding-inline-start:20px}
.pdp-prose li{margin-bottom:5px}
.pdp-prose img{max-width:100%;height:auto;border-radius:12px}
.pdp-prose iframe{max-width:100%;border:0}
.pdp-prose iframe[src*="youtube"],.pdp-prose iframe[src*="youtu.be"],.pdp-prose iframe[src*="vimeo"],.pdp-prose iframe[src*="streamable"]{width:100%;height:auto;aspect-ratio:16/9;border-radius:12px}
.pdp-prose table{display:block;max-width:100%;overflow-x:auto}

/* Specification: one column of ruled rows, so the label and the value stay a
   pair. Two columns of them read as four columns of words, and the shading
   that used to separate the rows was doing the ruling's job in a colour. */
.pdp-specs{margin:14px 0 0;font-size:14px;border-top:1px solid var(--line)}
.pdp-specs>div{display:grid;grid-template-columns:minmax(110px,38%) 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.pdp-specs dt{margin:0;color:var(--muted)}
.pdp-specs dd{margin:0;color:var(--ink);font-weight:500;overflow-wrap:anywhere}
/* Where the manufacturer's rows came from, directly under them. */
.pdp-spec-source{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}

/* Stacked section, still used by the accessory kit below the details. */
.pdp-section{clear:both;margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}

/* The site-wide contact bar steps aside for the buy bar. */
.pdp-buy-bar{display:none}

@media (max-width:760px){
  /* Everything below buys height for the warranty block, which has to clear
     the fold on a 390x844 screen. Measured on the three worst products in
     the catalogue: a 9-thumbnail flute, a 3-line guitar title, and a
     description-heavy keyboard. */

  /* Nine thumbnails wrapped to three rows and cost 202px on their own. One
     scrolling row instead: every thumbnail is still reachable, which
     truncating them would not be. The tiles are the desktop's 84px, and the
     row's 5px padding keeps the focus ring inside the scroller. */
  .woocommerce div.product div.images .flex-control-thumbs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar{display:none}

  /* 24px, not the desktop's 28. Titles here run past 60 characters because
     they carry the model number and the finish, and beside a 40px pair of
     icon buttons a 28px one took four lines of a phone's first screen. The
     leading is tighter for the same reason. */
  .woocommerce div.product .product_title{font-size:24px;line-height:1.2}

  /* Same reasoning as the thumbnails: scroll rather than wrap, so the trail
     stays one line without losing a crumb. It keeps the phone's own spacing,
     14px under the search band and 8px over the image, which the card's
     padding and the trail's margin used to give it, rather than the
     handoff's 18 and 22: this first screen is budgeted to the pixel, and the
     square image has already taken 160px more of it. */
  .single-product .woocommerce-breadcrumb{flex-wrap:nowrap;padding:14px 0 8px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
  .single-product .woocommerce-breadcrumb::-webkit-scrollbar{display:none}

  /* The subtitle keeps its desktop size and its full text here. It was
     13.5px and clamped to two lines to hold the warranty above the fold,
     and the warranty is the last block in the column now -- nothing below
     this is racing the fold any more. */
  .pay-modal{width:calc(100vw - 24px);max-height:min(72vh,520px)}
  .pay-table-wrap{padding:6px 14px 14px}
  .pdp-section{margin-top:26px;padding-top:22px}

  /* One fixed bar, never two: the contact bar is withdrawn on product pages
     and its WhatsApp affordance folds into the out-of-stock state here. */
  body.has-pdp-buy-bar .mobile-contact-bar{display:none}
  body.has-pdp-buy-bar{padding-bottom:70px}
  .pdp-buy-bar{
    display:block;position:fixed;right:0;bottom:0;left:0;z-index:250;
    min-height:64px;padding:9px 14px;
    /* Solid, not translucent: the contact bar it replaces paired .97 alpha
       with a backdrop blur, and without that blur the page text ghosts
       through behind the price. */
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -8px 22px rgba(0,0,0,.10);
  }
  /* The thumbnail and the stock line are desktop furniture: at this width the
     bar has room for the price and the button, and nothing else. */
  /* The thumbnail and the stock line are desktop furniture: at this width the
     bar has room for the name, the price and the button, and nothing else.
     Named areas rather than source order, because the price is a sibling of
     the name in the markup and belongs under it here. */
  .pdp-buy-bar-inner{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    grid-template-areas:"name cta" "amount cta";
    gap:1px 10px;padding:0;max-width:none;
  }
  .pdp-buy-bar-thumb,.pdp-buy-bar-stock{display:none}
  .pdp-buy-bar-price{grid-area:name;display:flex;flex-direction:column;min-width:0}
  .pdp-buy-bar-amount{grid-area:amount}
  .pdp-buy-bar-cta{grid-area:cta}
  .pdp-buy-bar-name{font-size:11.5px;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;white-space:normal;word-break:break-word}
  .pdp-buy-bar-amount{font-size:17px;font-weight:800;color:var(--red);line-height:1.2}
  .pdp-buy-bar-amount del{display:none}
  .pdp-buy-bar-cta{
    min-height:46px;padding:0 22px;border:0;border-radius:12px;
    background:var(--red);color:#fff;font-size:14px;font-weight:800;
    display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .pdp-buy-bar-cta:hover{background:var(--red-dark)}
  .pdp-buy-bar-cta-alt{background:#117a4a}
  .pdp-buy-bar-cta-alt:hover{background:#148b50}
  body.menu-open .pdp-buy-bar{display:none}
  /* Withdrawn while the real add-to-cart button is on screen. */
  .pdp-buy-bar.is-hidden{transform:translateY(105%);pointer-events:none}
  .pdp-buy-bar{transition:transform .2s ease}
}

/* The same bar on the desktop, which it never had before: past the buy box
   the page is description, spec and the ladder, and the price and the button
   were a screen and a half away. Fixed to the bottom, aligned to the 1240
   container so it reads as part of the page rather than an overlay, and
   carrying what the shopper scrolled away from: the product, its stock line,
   its price and the same button. */
@media (min-width:761px){
  .pdp-buy-bar{
    display:block;position:fixed;right:0;bottom:0;left:0;z-index:250;
    background:#fff;border-top:1px solid #E6E4E1;
    box-shadow:0 -8px 24px rgba(0,0,0,.06);
    padding:10px 0;
    transform:translateY(110%);transition:transform .25s ease;
  }
  .pdp-buy-bar:not(.is-hidden){transform:none}
  .pdp-buy-bar-inner{display:flex;align-items:center;gap:16px}
  .pdp-buy-bar-thumb{
    width:48px;height:48px;flex:0 0 auto;border-radius:8px;object-fit:cover;background:var(--warm,#f6f5f3);
  }
  .pdp-buy-bar-price{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
  .pdp-buy-bar-name{
    font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .pdp-buy-bar-stock{font-size:13px;color:var(--green);line-height:1.3}
  .pdp-buy-bar-stock.is-special{color:var(--muted)}
  .pdp-buy-bar-amount{font-size:20px;font-weight:700;color:var(--red);line-height:1.2;white-space:nowrap}
  .pdp-buy-bar-amount del{display:none}
  .pdp-buy-bar-cta{
    height:44px;padding:0 20px;border:0;border-radius:10px;
    background:var(--red);color:#fff;font-size:15px;font-weight:600;
    display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;
  }
  .pdp-buy-bar-cta:hover{background:var(--red-dark)}
  .pdp-buy-bar-cta-alt{background:#117a4a}
  .pdp-buy-bar-cta-alt:hover{background:#0e6b41}
  /* Room to scroll past it, so the last line of the page is never under it. */
  body.has-pdp-buy-bar{padding-bottom:72px}
  /* The floating controls step up out of its way while it is showing. */
  body.has-pdp-buy-bar:has(.pdp-buy-bar:not(.is-hidden)) .whatsapp{bottom:calc(var(--a11y-stack-bottom, 24px) + 70px)}
  /* Above the bar, and above the consent banner when it is up. The banner
     rides at bottom:72px here, and --cookie-banner-space (published by
     theme.js as its height plus that offset) is what clears it. A flat 92px
     put the launcher inside the banner, over the leftmost button -- which,
     since the banner gained דחייה, is the refusal: a click there opened the
     accessibility panel instead. */
  body.has-pdp-buy-bar:has(.pdp-buy-bar:not(.is-hidden)){--a11y-stack-bottom:max(92px, calc(var(--cookie-banner-space, 0px) + 12px))}
  body.has-pdp-buy-bar:has(.pdp-buy-bar:not(.is-hidden)) .cookie-banner{bottom:72px}
}

/* Short phones. A 740px viewport has 100px less to work with than the 844px
   most current handsets report, and on a 667px iPhone SE it is 177px less.
   Everything here is a step down in a secondary affordance, never in the
   product itself: the thumbnail strip goes (the gallery still swipes and the
   zoom trigger stays), the title drops a size, the trail tightens. Beyond
   this the only things left to cut are the product image and the breadcrumb,
   which is a worse page than one short scroll. */
@media (max-width:760px) and (max-height:780px){
  .woocommerce div.product div.images .flex-control-thumbs{display:none}
  .woocommerce div.product .product_title{font-size:22px;line-height:1.18}
  .single-product .woocommerce-breadcrumb{font-size:11.5px;padding-bottom:6px}
  .woocommerce div.product p.price{margin-top:18px}
}


/* =========================================================
   Version 1.15: accessibility widget
   ========================================================= */

/* --- launcher and panel ------------------------------------------------

   Version 2 of the panel, built from the design handoff. The shape changed,
   not the machinery: every data-a11y-* hook, the localStorage key and the
   html.a11y-* classes below are the ones the widget has always used.

   What the redesign is for: the old panel answered "which of these is on?"
   with a tint, on tiles that all looked alike. This one gives each kind of
   control the shape of what it does -- a switch for an independent toggle,
   a segmented control for a level, a miniature of the page for a colour
   filter, a card with a tick for a profile -- so state is legible without
   relying on colour, and a dark header with a scroll nav makes a panel this
   tall navigable on a phone.

   The palette is the shop's: ink #171717, brand red, and the warm paper
   tones #f7f6f3 / #f1eee8 / #e7e3da. Borders here are lighter than the old
   #8f8677 because the design asks for them; the standard the shop is judged
   by is ת"י 5568 = WCAG 2.0 AA, which has no non-text contrast rule, and
   every state difference below is carried by shape as well as colour. Focus
   rings stay at 3px of brand red, which 2.4.7 does require. */
.a11y-widget{
  /* Its own typographic base. The spacing adaptations are excluded from the
     widget above, but body still carries them, and inheritance would have
     walked them straight back in. */
  line-height:1.45;letter-spacing:normal;word-spacing:normal;
  --a11y-ink:#171717;
  --a11y-sub:#5f5a51;
  --a11y-bg:#f7f6f3;
  --a11y-soft:#f1eee8;
  --a11y-line:#e7e3da;
  --a11y-hair:#efece5;
  --a11y-red:var(--red);
  --a11y-red-dark:var(--red-dark);
  --a11y-on-dark:#cfcbc3;
}

/* One source of truth for the floating stack's distance from the bottom.
   Four separate max() expressions used to encode this, and they disagreed:
   the launcher cleared the cookie banner and the panel did not. */
:root{
  --a11y-stack-bottom:max(20px, calc(var(--cookie-banner-space, 0px) + 12px));
}
@media(max-width:760px){
  :root{--a11y-stack-bottom:max(76px, calc(var(--cookie-banner-space, 0px) + 12px))}
}

.a11y-launcher{
  /* Physical left, not inset-inline-start. The widget's placement is a
     screen corner, not a reading direction: the shop's launcher has always
     sat opposite the WhatsApp button, and the side toggle moves it. */
  /* 18px, not the design's 24: the launcher is 60px wide and the WhatsApp
     bubble above it is 56px at left:20px, so equal insets would have left
     the two circles off the same axis by 6px -- which is exactly how it
     looked. 20 + 56/2 - 60/2 puts their centres on one line. */
  position:fixed;left:18px;bottom:var(--a11y-stack-bottom);
  /* 10000 retires three burials at once: the cart drawer and its overlay
     (400/410), the cookie banner (480), and this widget's own reading guide
     and mask (9999/9998), which are printed after it in the footer and would
     otherwise paint over the control that turns them off. */
  z-index:10000;width:60px;height:60px;border-radius:999px;border:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--a11y-ink);color:#fff;cursor:pointer;
  box-shadow:0 12px 32px rgba(23,23,23,.3),0 0 0 4px #fff;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),background .15s;
}
.a11y-launcher svg{width:42px;height:42px}
.a11y-launcher:hover{background:var(--a11y-red);transform:translateY(-2px) scale(1.04)}
.a11y-launcher:focus-visible{outline:3px solid var(--a11y-red);outline-offset:3px}

/* How many adaptations are on, readable from outside the panel. */
.a11y-launcher-badge{
  position:absolute;top:-4px;right:-4px;min-width:24px;height:24px;padding:0 6px;
  box-sizing:border-box;border-radius:999px;
  background:var(--a11y-red);color:#fff;box-shadow:0 0 0 3px #fff;
  font-size:12px;font-weight:800;line-height:24px;text-align:center;
}
.a11y-launcher-badge[hidden]{display:none}
html.a11y-side-end .a11y-launcher{left:auto;right:24px}

/* The dim behind the phone sheet. Desktop never shows it -- the panel is a
   card beside the page there, and dimming a page the visitor is adapting
   would hide the very thing they are watching change. */
.a11y-scrim{
  position:fixed;inset:0;z-index:10001;background:rgba(23,23,23,.45);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s;
}

.a11y-panel{
  position:fixed;z-index:10002;left:16px;top:16px;
  /* Full height, as the design draws it -- but stepping over whatever fixed
     chrome is at the bottom of this page. The panel is non-modal on purpose
     and there is no scrim behind it here, so the page beside it has to stay
     usable: landing on the cookie banner's accept button or a product's buy
     bar would make them unclickable with nothing saying why. */
  bottom:max(16px, var(--a11y-stack-bottom));
  width:min(420px,calc(100vw - 32px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--a11y-bg);border-radius:24px;
  box-shadow:0 28px 80px rgba(23,23,23,.32),0 0 0 1px rgba(23,23,23,.06);
  color:var(--a11y-ink);
  font-family:Heebo,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.a11y-panel[hidden]{display:none}
.a11y-panel:focus{outline:none}
.a11y-panel:focus-visible{outline:3px solid var(--a11y-red);outline-offset:-3px}
html.a11y-side-end .a11y-panel{left:auto;right:16px}
/* The side cart slides in from the same edge the panel sits on, and the two
   overlapped. Moving the panel is cheaper than moving the drawer. */
body.cart-drawer-open .a11y-launcher{left:auto;right:24px}
body.cart-drawer-open .a11y-panel{left:auto;right:16px}

/* --- header ------------------------------------------------------------ */

.a11y-panel-head{
  flex:none;background:var(--a11y-ink);color:#fff;padding:18px 18px 0;
}
.a11y-sheet-grip{display:none}
.a11y-head-row{display:flex;align-items:center;gap:12px}
.a11y-head-mark{
  flex:none;width:44px;height:44px;border-radius:14px;
  background:var(--a11y-red);color:#fff;
  display:grid;place-items:center;
}
.a11y-head-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.a11y-panel-head h2{
  margin:0;font-size:22px;font-weight:800;line-height:1.1;color:#fff;
}
.a11y-head-sub{font-size:13px;font-weight:400;line-height:1.3;color:var(--a11y-on-dark)}
.a11y-head-btn{
  flex:none;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#fff;
  transition:background .15s,color .15s;
}
.a11y-head-btn svg{width:20px;height:20px}
.a11y-head-btn:hover{background:rgba(255,255,255,.2)}
.a11y-close{background:#fff;color:var(--a11y-ink)}
.a11y-close svg{width:18px;height:18px;stroke-width:2.4}
.a11y-close:hover{background:#e9e6df}
.a11y-head-btn:focus-visible{outline:3px solid var(--a11y-red);outline-offset:2px}

/* A scroll shortcut, not a tab panel: the sections all stay in the document.
   aria-current marks the one the body is parked on. */
.a11y-tabs{
  display:flex;gap:4px;margin:16px -18px 0;padding:0 14px;
  overflow-x:auto;scrollbar-width:none;
}
.a11y-tabs::-webkit-scrollbar{display:none}
.a11y-tab{
  flex:none;position:relative;display:flex;align-items:center;gap:6px;
  height:44px;padding:0 12px;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;color:#a9a49a;
  transition:color .15s;
}
.a11y-tab:hover{color:#fff}
.a11y-tab[aria-current="true"]{color:#fff}
.a11y-tab:after{
  content:"";position:absolute;bottom:0;left:10px;right:10px;height:3px;
  border-radius:3px 3px 0 0;background:var(--a11y-red);
  opacity:0;transition:opacity .15s;
}
.a11y-tab[aria-current="true"]:after{opacity:1}
.a11y-tab:focus-visible{outline:3px solid var(--a11y-red);outline-offset:-3px;border-radius:8px}
.a11y-tab-count{
  min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;
  background:var(--a11y-red);color:#fff;
  font-size:11px;font-weight:700;line-height:18px;text-align:center;
}
.a11y-tab-count[hidden]{display:none}

/* --- body -------------------------------------------------------------- */

.a11y-panel-body{
  position:relative;flex:1;min-height:0;overflow-y:auto;
  padding:20px 16px 28px;display:flex;flex-direction:column;gap:30px;
  scrollbar-width:thin;scrollbar-color:#d6d2c8 transparent;
  overscroll-behavior:contain;
}
.a11y-panel-body::-webkit-scrollbar{width:8px}
.a11y-panel-body::-webkit-scrollbar-thumb{background:#d6d2c8;border-radius:8px;border:2px solid var(--a11y-bg)}
.a11y-sec{display:flex;flex-direction:column;gap:12px}
.a11y-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.a11y-sec-head h3{margin:0;font-size:16px;font-weight:800;line-height:1.3;color:var(--a11y-ink)}
.a11y-sec-note{font-size:12.5px;font-weight:500;color:var(--a11y-sub)}

/* A white card is the panel's one container shape: the font block, every
   list of rows and the contrast grid all sit in one. */
.a11y-card,.a11y-rows{
  background:#fff;border:1.5px solid var(--a11y-line);border-radius:18px;
}
.a11y-card{display:flex;flex-direction:column;gap:14px;padding:16px}
.a11y-rows{display:flex;flex-direction:column;overflow:hidden}

/* --- quick profiles ---------------------------------------------------- */

.a11y-profiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.a11y-profile{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:14px;min-height:128px;text-align:right;cursor:pointer;
  border:1.5px solid var(--a11y-line);border-radius:18px;background:#fff;
  color:var(--a11y-ink);font-family:inherit;
  transition:background .15s,border-color .15s,box-shadow .15s,color .15s;
}
.a11y-profile:hover{border-color:var(--a11y-ink)}
.a11y-profile:focus-visible{outline:3px solid var(--a11y-red);outline-offset:2px}
.a11y-profile-icon{
  width:42px;height:42px;border-radius:13px;background:var(--a11y-soft);
  color:var(--a11y-ink);display:grid;place-items:center;
  transition:background .15s,color .15s;
}
.a11y-profile-icon svg{width:22px;height:22px}
.a11y-profile .a11y-opt-label{font-size:15px;font-weight:700;line-height:1.25}
.a11y-profile-hint{font-size:12.5px;font-weight:400;line-height:1.4;color:var(--a11y-sub);text-wrap:pretty}
.a11y-profile-dot{
  position:absolute;top:12px;left:12px;width:22px;height:22px;border-radius:50%;
  box-sizing:border-box;border:1.5px solid #d6d2c8;background:transparent;
  display:grid;place-items:center;color:#fff;
  transition:background .15s,border-color .15s;
}
.a11y-profile-dot svg{width:14px;height:14px;opacity:0;transition:opacity .15s}
.a11y-profile[aria-pressed="true"]{
  background:var(--a11y-ink);border-color:var(--a11y-ink);color:#fff;
  box-shadow:0 10px 24px rgba(23,23,23,.2);
}
.a11y-profile[aria-pressed="true"] .a11y-profile-icon{background:var(--a11y-red);color:#fff}
.a11y-profile[aria-pressed="true"] .a11y-profile-hint{color:#d6d2ca}
.a11y-profile[aria-pressed="true"] .a11y-profile-dot{background:var(--a11y-red);border-color:var(--a11y-red)}
.a11y-profile[aria-pressed="true"] .a11y-profile-dot svg{opacity:1}

/* --- text size --------------------------------------------------------- */

.a11y-font-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.a11y-font-head #a11yFontLbl{font-size:15px;font-weight:700}
/* The sample grows with the setting, so the number has something beside it
   that shows what the number means. */
.a11y-font-preview{
  height:28px;display:flex;align-items:center;line-height:1;
  font-size:var(--a11y-preview,20px);font-weight:800;color:var(--a11y-ink);
  transition:font-size .2s;
}
.a11y-stepper{
  display:flex;align-items:center;gap:8px;padding:6px;
  background:var(--a11y-soft);border-radius:16px;
}
.a11y-step{
  flex:none;width:48px;height:48px;border-radius:12px;border:0;cursor:pointer;
  display:grid;place-items:center;transition:background .15s,color .15s,opacity .15s;
}
.a11y-step svg{width:20px;height:20px;stroke-width:2.4}
.a11y-step-up{background:var(--a11y-ink);color:#fff}
.a11y-step-up:hover{background:var(--a11y-red)}
.a11y-step-down{background:#fff;color:var(--a11y-ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.a11y-step-down:hover{background:#faf9f6}
.a11y-step:focus-visible{outline:3px solid var(--a11y-red);outline-offset:2px}
/* aria-disabled, never the disabled attribute: a disabled button drops out
   of the tab order, so a keyboard user who reached the maximum found the
   control vanish from under them with nothing said about why. */
.a11y-step[aria-disabled="true"]{opacity:.4;cursor:default}
.a11y-step-up[aria-disabled="true"]:hover{background:var(--a11y-ink)}
.a11y-step-down[aria-disabled="true"]:hover{background:#fff}
.a11y-step-value{
  flex:1;text-align:center;font-size:22px;font-weight:800;line-height:48px;
  font-variant-numeric:tabular-nums;color:var(--a11y-ink);
}
.a11y-presets{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;
  padding:4px;background:var(--a11y-soft);border-radius:12px;
}
.a11y-preset{
  height:36px;border:0;border-radius:9px;background:transparent;cursor:pointer;
  color:var(--a11y-ink);font-family:inherit;font-size:13px;font-weight:500;
  transition:background .15s,box-shadow .15s;
}
.a11y-preset:hover{background:rgba(255,255,255,.6)}
.a11y-preset[aria-pressed="true"]{background:#fff;font-weight:800;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.a11y-preset:focus-visible{outline:3px solid var(--a11y-red);outline-offset:1px}

/* --- rows: switches, levels, cursor ------------------------------------ */

.a11y-row{
  display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;
  padding:12px 14px;border:0;border-bottom:1px solid var(--a11y-hair);
  background:transparent;text-align:right;color:var(--a11y-ink);
  font-family:inherit;
}
.a11y-rows>*:last-child{border-bottom:0}
.a11y-switch{cursor:pointer;transition:background .15s}
.a11y-switch:hover{background:#faf9f6}
.a11y-row:focus-visible{outline:3px solid var(--a11y-red);outline-offset:-3px}
.a11y-row-icon{
  flex:none;width:36px;height:36px;border-radius:11px;
  background:var(--a11y-soft);color:var(--a11y-ink);
  display:grid;place-items:center;transition:background .15s,color .15s;
}
.a11y-row-icon svg{width:20px;height:20px}
.a11y-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:right}
.a11y-row .a11y-opt-label{font-size:14px;font-weight:600}
.a11y-row-desc{font-size:12.5px;font-weight:400;line-height:1.35;color:var(--a11y-sub);text-wrap:pretty}
.a11y-row-label{flex:1;min-width:0;font-size:14px;font-weight:600}

.a11y-track{
  flex:none;width:44px;height:26px;border-radius:13px;box-sizing:border-box;
  padding:3px;display:flex;justify-content:flex-start;background:#cfcac0;
  transition:background .15s;
}
.a11y-knob{width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.a11y-switch[aria-checked="true"] .a11y-track{background:var(--a11y-red);justify-content:flex-end}
.a11y-switch[aria-checked="true"] .a11y-row-icon{background:var(--a11y-red);color:#fff}

.a11y-levels{
  flex:none;display:flex;gap:2px;padding:3px;
  background:var(--a11y-soft);border-radius:10px;
}
.a11y-level{
  height:32px;padding:0 10px;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--a11y-ink);
  font-family:inherit;font-size:12.5px;font-weight:600;
  transition:background .15s,color .15s;
}
.a11y-level:hover{background:rgba(255,255,255,.65)}
.a11y-level:focus-visible{outline:3px solid var(--a11y-red);outline-offset:1px}
/* Level 0 is "off", so it reads as a plain white pill; 1 and 2 are active
   settings and take the ink fill, which is also how the row says "this one
   is doing something" at a glance. */
.a11y-level[aria-pressed="true"]{background:var(--a11y-ink);color:#fff}
.a11y-level[data-a11y-level="0"][aria-pressed="true"]{background:#fff;color:var(--a11y-ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.a11y-row[data-a11y-spacing]:has(.a11y-level:not([data-a11y-level="0"])[aria-pressed="true"]) .a11y-row-icon{
  background:var(--a11y-red);color:#fff;
}

.a11y-cursor-group{display:flex;flex-direction:column;gap:10px;padding:14px}
.a11y-cursors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.a11y-cursor{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 4px 10px;border-radius:14px;border:2px solid var(--a11y-line);
  background:#fff;cursor:pointer;color:var(--a11y-ink);
  font-family:inherit;font-size:12.5px;font-weight:600;
  transition:border-color .15s,background .15s;
}
.a11y-cursor:hover{border-color:var(--a11y-ink)}
.a11y-cursor:focus-visible{outline:3px solid var(--a11y-red);outline-offset:2px}
.a11y-cursor[aria-pressed="true"]{border-color:var(--a11y-ink);background:var(--a11y-bg)}
.a11y-cursor-art{height:32px;display:grid;place-items:center}
.a11y-cursor-art svg{width:20px;height:20px;fill:#000;stroke:#000}
.a11y-cursor.is-dark .a11y-cursor-art svg{width:30px;height:30px;fill:#000;stroke:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.a11y-cursor.is-light .a11y-cursor-art svg{width:30px;height:30px;fill:#fff;stroke:#000;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}

/* --- contrast ---------------------------------------------------------- */

.a11y-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.a11y-mode{
  position:relative;display:flex;flex-direction:column;gap:8px;
  padding:6px 6px 10px;border-radius:16px;border:2px solid var(--a11y-line);
  background:#fff;cursor:pointer;color:var(--a11y-ink);
  font-family:inherit;font-size:12.5px;font-weight:600;line-height:1.2;text-align:center;
  transition:border-color .15s;
}
.a11y-mode:hover{border-color:var(--a11y-ink)}
.a11y-mode:focus-visible{outline:3px solid var(--a11y-red);outline-offset:2px}
.a11y-mode[aria-pressed="true"]{border-color:var(--a11y-ink)}
/* A miniature of a page under the filter, rather than an icon that names it.
   The same filters the adaptation itself uses, on the same paper tones. */
.a11y-mode-preview{
  --p-bg:#f7f6f3;--p-ink:#171717;--p-card:#e4e0d7;
  display:flex;flex-direction:column;gap:5px;height:62px;padding:8px;
  box-sizing:border-box;border-radius:10px;background:var(--p-bg);overflow:hidden;
}
.a11y-mode-top{display:flex;align-items:center;justify-content:space-between}
.a11y-mode-bar{width:26px;height:6px;border-radius:3px;background:var(--p-ink)}
.a11y-mode-dot{width:14px;height:6px;border-radius:3px;background:var(--a11y-red)}
.a11y-mode-cards{display:flex;gap:5px;flex:1}
.a11y-mode-cards i{flex:1;border-radius:4px;background:var(--p-card)}
.a11y-mode-foot{width:60%;height:5px;border-radius:3px;background:var(--p-ink);opacity:.7}
.a11y-mode[data-a11y-mode="dark"] .a11y-mode-preview{--p-bg:#0d0d0d;--p-ink:#fff;--p-card:#2a2a2a}
.a11y-mode[data-a11y-mode="bright"] .a11y-mode-preview{--p-bg:#fff;--p-ink:#000;--p-card:#d9d9d9;filter:contrast(1.3)}
.a11y-mode[data-a11y-mode="invert"] .a11y-mode-preview{filter:invert(1) hue-rotate(180deg)}
.a11y-mode[data-a11y-mode="gray"] .a11y-mode-preview{filter:grayscale(1)}
.a11y-mode[data-a11y-mode="sat-high"] .a11y-mode-preview{--p-card:#f2cfc4;filter:saturate(2.2)}
.a11y-mode[data-a11y-mode="sat-low"] .a11y-mode-preview{--p-card:#f2cfc4;filter:saturate(.3)}
/* Outside the filtered preview: a tick drawn inside it would be inverted or
   greyed by the very filter it is there to confirm. */
.a11y-mode-tick{
  position:absolute;top:11px;left:11px;width:18px;height:18px;border-radius:50%;
  background:var(--a11y-ink);color:#fff;display:grid;place-items:center;
  opacity:0;transition:opacity .15s;
}
.a11y-mode-tick svg{width:12px;height:12px}
.a11y-mode[aria-pressed="true"] .a11y-mode-tick{opacity:1}

/* --- the note and the help card ---------------------------------------- */

.a11y-note{
  margin:0;display:flex;gap:8px;
  font-size:12.5px;font-weight:400;line-height:1.5;color:var(--a11y-sub);text-wrap:pretty;
}
.a11y-note svg{width:16px;height:16px;flex:none;margin-top:2px}

.a11y-help{
  display:flex;flex-direction:column;gap:12px;padding:18px;
  background:var(--a11y-ink);color:#fff;border-radius:18px;
}
.a11y-help h3{margin:0;font-size:16px;font-weight:800;color:#fff}
.a11y-help p{margin:0;font-size:13.5px;font-weight:400;line-height:1.55;color:#d6d2ca;text-wrap:pretty}
.a11y-help-actions{display:flex;flex-wrap:wrap;gap:8px}
.a11y-pill{
  display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;
  border-radius:999px;background:rgba(255,255,255,.12);color:#fff;
  text-decoration:none;font-size:14px;font-weight:600;
  transition:background .15s,color .15s,transform .15s;
}
.a11y-pill svg{width:18px;height:18px;flex:none}
.a11y-pill.is-primary{background:var(--a11y-red);font-weight:700}
.a11y-pill:hover{background:#fff;color:var(--a11y-ink);transform:translateY(-1px)}
.a11y-pill.is-primary:hover{background:var(--a11y-red-dark);color:#fff}
.a11y-pill:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* --- footer: what is on, reset, links ---------------------------------- */

.a11y-panel-foot{
  flex:none;background:#fff;border-top:1px solid var(--a11y-line);
  padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;
}
.a11y-active[hidden]{display:none}
.a11y-chips{
  list-style:none;margin:0;padding:0 0 2px;display:flex;gap:6px;
  overflow-x:auto;scrollbar-width:none;
}
.a11y-chips::-webkit-scrollbar{display:none}
.a11y-chip{
  flex:none;display:flex;align-items:center;gap:6px;height:32px;
  padding:0 12px 0 10px;border:0;border-radius:999px;cursor:pointer;
  background:var(--a11y-soft);color:var(--a11y-ink);
  font-family:inherit;font-size:12.5px;font-weight:600;white-space:nowrap;
  transition:background .15s;
}
.a11y-chip:hover{background:#e6e2d9}
.a11y-chip:focus-visible{outline:3px solid var(--a11y-red);outline-offset:2px}
.a11y-chip-x{
  width:12px;height:12px;flex:none;background:currentColor;
  -webkit-mask:var(--a11y-x) center/contain no-repeat;
  mask:var(--a11y-x) center/contain no-repeat;
}
.a11y-widget{
  --a11y-x:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4 17.6 5 12 10.6z"/></svg>');
}

.a11y-foot-row{display:flex;align-items:center;gap:12px}
.a11y-reset{
  flex:none;display:flex;align-items:center;gap:8px;height:46px;padding:0 20px;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--a11y-red);color:#fff;
  font-family:inherit;font-size:14px;font-weight:700;
  transition:background .15s,opacity .15s;
}
.a11y-reset svg{width:18px;height:18px;flex:none;stroke-width:2}
.a11y-reset:hover{background:var(--a11y-red-dark)}
.a11y-reset:focus-visible{outline:3px solid var(--a11y-red);outline-offset:2px}
.a11y-reset[aria-disabled="true"]{opacity:.4;cursor:default}
.a11y-reset[aria-disabled="true"]:hover{background:var(--a11y-red)}
.a11y-foot-links{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.a11y-foot-links a{
  font-size:13px;font-weight:600;color:var(--a11y-ink);text-decoration:underline;
  text-decoration-color:#cfcac0;text-decoration-thickness:1.5px;text-underline-offset:3px;
  transition:color .15s,text-decoration-color .15s;
}
.a11y-foot-links a:hover{color:var(--a11y-red);text-decoration-color:var(--a11y-red)}
.a11y-foot-links a:focus-visible{outline:3px solid var(--a11y-red);outline-offset:2px;border-radius:4px}

/* With JavaScript off the panel can do nothing; the statement and the phone
   number still have to be reachable, and they need no script at all. */
.a11y-noscript{
  position:fixed;left:16px;bottom:16px;z-index:10000;
  display:flex;gap:8px;
}
.a11y-noscript a{
  min-height:44px;display:flex;align-items:center;padding:0 14px;border-radius:12px;
  background:#171717;color:#fff;font-size:14px;font-weight:700;text-decoration:none;
}


/* --- adaptations -------------------------------------------------------
   Every colour mode rides on the ROOT element. Verified in Chromium, WebKit
   and Gecko: filter on html leaves fixed descendants anchored to the
   viewport; the same filter on body re-anchors them to the document and
   breaks the header dropdowns. Keep it on html. */
html.a11y-dark{filter:invert(1) hue-rotate(180deg)}
html.a11y-dark img,html.a11y-dark video,html.a11y-dark iframe,html.a11y-dark .zoomImg{filter:invert(1) hue-rotate(180deg)}
html.a11y-invert{filter:invert(1)}
html.a11y-invert img,html.a11y-invert video,html.a11y-invert iframe,html.a11y-invert .zoomImg{filter:invert(1)}
html.a11y-bright{filter:contrast(1.3) brightness(1.05)}
html.a11y-gray{filter:grayscale(1)}
html.a11y-sat-high{filter:saturate(1.9)}
html.a11y-sat-low{filter:saturate(.45)}

/* Text spacing. WCAG 1.4.12 asks that content survive 1.5x line height,
   0.12em letter and 0.16em word spacing; level 2 meets or exceeds each. */
html.a11y-line-1 body *:not(.a11y-widget):not(.a11y-widget *){line-height:1.7!important}
html.a11y-line-2 body *:not(.a11y-widget):not(.a11y-widget *){line-height:2.1!important}
html.a11y-letter-1 body *:not(.a11y-widget):not(.a11y-widget *){letter-spacing:.06em!important}
html.a11y-letter-2 body *:not(.a11y-widget):not(.a11y-widget *){letter-spacing:.14em!important}
html.a11y-word-1 body *:not(.a11y-widget):not(.a11y-widget *){word-spacing:.1em!important}
html.a11y-word-2 body *:not(.a11y-widget):not(.a11y-widget *){word-spacing:.2em!important}

html.a11y-links a{text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:2px}
html.a11y-links .site-main a:not(.button):not(.pdp-buy-bar-cta):not(.shechter-buy-now){background:#fff34d!important;color:#111!important}
html.a11y-headings h1,html.a11y-headings h2,html.a11y-headings h3,
html.a11y-headings h4,html.a11y-headings h5,html.a11y-headings h6{
  outline:2px dashed #006bb6;outline-offset:3px;
}
html.a11y-font body,html.a11y-font body *:not(.a11y-panel):not(.a11y-panel *){font-family:Arial,"Segoe UI",Tahoma,sans-serif!important}

/* Keyboard mode shows the ring on every focus, not only :focus-visible, so
   a switch or head-pointer user can see where they are without tabbing. */
html.a11y-keyboard :focus{outline:4px solid #006bb6!important;outline-offset:2px!important}
html.a11y-keyboard a:focus,html.a11y-keyboard button:focus{background:#fff34d!important;color:#111!important}
/* A focus ring is no use under the sticky header. In keyboard mode the
   focused element is brought to the middle of the screen instead, which is
   where someone using a magnifier is already looking. */
html.a11y-keyboard *{scroll-margin-block:35vh}

html.a11y-noanim *,html.a11y-noanim *::before,html.a11y-noanim *::after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important;
}

html.a11y-cursor-dark,html.a11y-cursor-dark *{
  cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M5.5 2.4 19 10.7l-5.6 1.6 3.9 6.6-2.9 1.7-3.9-6.6-4 4z" fill="black" stroke="white" stroke-width="1.3"/></svg>') 5 2,auto!important;
}
html.a11y-cursor-light,html.a11y-cursor-light *{
  cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M5.5 2.4 19 10.7l-5.6 1.6 3.9 6.6-2.9 1.7-3.9-6.6-4 4z" fill="white" stroke="black" stroke-width="1.3"/></svg>') 5 2,auto!important;
}

/* Alt text surfaced under the image it belongs to. */
.a11y-alt-caption{
  display:block;margin-top:5px;padding:5px 8px;border-radius:7px;
  background:#fff8d6;border:1px solid #e6d98a;
  font-size:11.5px;line-height:1.45;color:#3f3b36;text-align:start;
}

.a11y-guide-bar{
  position:fixed;left:0;right:0;top:40%;height:10px;z-index:9999;
  background:rgba(255,214,0,.35);border-top:2px solid #e8b400;border-bottom:2px solid #e8b400;
  pointer-events:none;
}
/* The mask is two panels with a gap between them, not one element with a
   hole: a box-shadow ring would sit above the page and swallow clicks. */
.a11y-mask-top,.a11y-mask-bottom{
  position:fixed;left:0;right:0;z-index:9998;background:rgba(12,12,12,.62);pointer-events:none;
}
.a11y-mask-top{top:0;height:calc(40% - 55px)}
.a11y-mask-bottom{top:calc(40% + 55px);bottom:0}

/* --- placement on small screens ---------------------------------------- */
@media(max-width:760px){
  /* Clear the fixed contact/buy bars (64px) instead of hiding behind them. */
  .a11y-launcher{left:12px;width:54px;height:54px}
  html.a11y-side-end .a11y-launcher,body.cart-drawer-open .a11y-launcher{left:auto;right:12px}
  .a11y-launcher svg{width:36px;height:36px}
  body.menu-open .a11y-launcher,body.menu-open .a11y-panel,body.menu-open .a11y-scrim{display:none}
}

/* A bottom sheet anchored to the bottom edge, not a card floating above a
   computed offset: on a phone the panel is the screen, and a sheet that
   rises from the edge the thumb is already at costs no reach. The dim
   behind it belongs to this size only -- on desktop the panel sits beside
   the page precisely so the visitor can watch it change. */
@media(max-width:600px){
  .a11y-panel,
  html.a11y-side-end .a11y-panel,
  body.cart-drawer-open .a11y-panel{
    left:0;right:0;top:8vh;bottom:0;width:auto;border-radius:24px 24px 0 0;
  }
  body:has(.a11y-panel:not([hidden])) .a11y-scrim{opacity:1;visibility:visible}
  .a11y-sheet-grip{
    display:block;width:40px;height:4px;border-radius:4px;
    background:rgba(255,255,255,.3);margin:-8px auto 12px;
  }
  /* Nothing to move the sheet to: it spans the screen. */
  .a11y-side{display:none}
  .a11y-panel-foot{padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .a11y-help-actions .a11y-pill{flex:1 1 auto;justify-content:center}
}

/* Below the narrowest phones the two-up cards stop fitting their own text. */
@media(max-width:340px){
  .a11y-profiles{grid-template-columns:1fr}
  .a11y-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* A mouse cursor is not a thing a touch screen has. */
@media(hover:none) and (pointer:coarse){
  .a11y-cursor-group{display:none}
  /* display:none does not move :last-child, so the card's own bottom border
     doubled up with the divider of the last row still showing. */
  .a11y-rows:has(> .a11y-cursor-group)>*:nth-last-child(2){border-bottom:0}
}
/* A doubled closing brace used to sit here. The parser recovered by eating
   the next rule whole, which happened to be .cart-drawer-overlay: the side
   cart opened with no dim and no click-to-close backdrop, because the rule
   that gives the overlay its background and z-index never reached CSSOM. */



/* =========================================================
   Version 1.17: side cart drawer
   ========================================================= */

/* Slides in from the inline-end edge, which in this RTL layout is the left,
   under the cart button that opens it. */
/* A light veil, not a blackout: the page stays readable behind the panel,
   it just visibly steps back. The overlay is also the click-anywhere-to-
   close surface, so it must keep its z-index above the page. */
.cart-drawer-overlay{position:fixed;inset:0;z-index:400;background:rgba(15,14,13,.18);opacity:0;transition:opacity .22s ease}
.cart-drawer-overlay.is-open{opacity:1}
.cart-drawer{
  position:fixed;inset-block:0;inset-inline-end:0;z-index:410;
  width:min(420px,100vw);display:flex;flex-direction:column;
  background:#fff;box-shadow:-18px 0 50px rgba(20,20,20,.18);
  transform:translateX(var(--cart-drawer-out,-102%));
  transition:transform .26s cubic-bezier(.32,.72,.35,1);
}
/* Same trap as the accessibility panel: display:flex above would otherwise
   beat the browser's [hidden] rule. The transform kept it off screen, which
   hid the mistake, but the panel stayed in the tab order and in the
   accessibility tree while closed. */
.cart-drawer[hidden]{display:none}
.cart-drawer-overlay[hidden]{display:none}
html[dir="rtl"] .cart-drawer{--cart-drawer-out:-102%}
html[dir="ltr"] .cart-drawer{--cart-drawer-out:102%}
.cart-drawer.is-open{transform:translateX(0)}

.cart-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
.cart-drawer-head h2{margin:0;font-size:19px}
.cart-drawer-close{width:40px;height:40px;border:1px solid var(--line);border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.cart-drawer-close:hover{background:#f6f3ef;border-color:#c9c3bb}

.cart-drawer-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:6px 18px 18px}

.cart-drawer-items{list-style:none;margin:0;padding:0}
.cart-drawer-item{display:grid;grid-template-columns:64px 1fr 28px;gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid #f0ece6}
.cart-drawer-thumb{width:64px;height:64px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center}
.cart-drawer-thumb img{width:100%;height:100%;object-fit:contain}
.cart-drawer-detail{min-width:0;display:flex;flex-direction:column;gap:6px}
.cart-drawer-name{font-size:13px;font-weight:700;line-height:1.4;color:#201e1c;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
a.cart-drawer-name:hover{color:var(--red)}
.cart-drawer-price{font-size:14px;font-weight:800;color:var(--red)}
.cart-drawer-price del{color:var(--muted);font-size:12px;font-weight:500;margin-inline-end:5px}
.cart-drawer-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;width:max-content}
.cart-drawer-qty button{width:32px;height:32px;border:0;background:#fff;font-size:15px;font-weight:700;cursor:pointer;color:#3f3b36}
.cart-drawer-qty button:hover{background:#f6f3ef;color:var(--red)}
.cart-drawer-qty span{min-width:34px;text-align:center;font-size:13px;font-weight:700}
.cart-drawer-remove{width:28px;height:28px;border:0;background:transparent;color:#a8a29a;cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center}
.cart-drawer-remove:hover{background:var(--red-soft);color:var(--red-text)}

/* What delivery will actually cost for these goods. Computed from the same
   helpers that filter rates at checkout, so it cannot over-promise. */
.cart-drawer-delivery{margin-top:16px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:#faf9f7}
.cart-drawer-delivery h3{margin:0 0 8px;font-size:12.5px;color:var(--muted);font-weight:700}
.cart-drawer-delivery ul{list-style:none;margin:0;padding:0}
.cart-drawer-delivery li{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:9px;padding:6px 0;font-size:12.5px;color:#3f3b36}
.cart-drawer-delivery li + li{border-top:1px solid #eeeae4}
.cart-drawer-delivery svg{color:#6f6a63}
.cart-drawer-delivery b{color:#1d1d1d}
/* Why the pickup point is missing (shechter_point_blocked_note_html). */
.cart-drawer-delivery .shechter-no-point{margin:8px 0 0;padding-top:8px;border-top:1px solid #eeeae4;font-size:12px;line-height:1.5;color:#4a4744}
.cart-drawer-delivery .shechter-no-point strong{font-weight:600;color:#1d1d1d}

/* The empty basket, on the 2026-09 handoff. It is the one screen in the
   drawer with nothing to read, so it centres itself in whatever height the
   drawer has rather than sitting under a fixed top padding: a phone in
   landscape and a tall desktop both get the same composition. */
.cart-drawer-empty{
  min-height:100%;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 6px;text-align:center;color:var(--ink);
}
.cart-drawer-empty-art{
  width:88px;height:88px;border-radius:50%;margin-bottom:24px;
  background:var(--red-soft);color:var(--red-text);
  display:grid;place-items:center;
}
.cart-drawer-empty-title{margin:0 0 10px;font-size:22px;font-weight:800;line-height:1.2;color:var(--ink)}
.cart-drawer-empty-note{margin:0 0 28px;font-size:15px;line-height:1.5;color:var(--muted)}
/* Full width and the shop's primary red: from an empty basket there is one
   thing to do, and the old bordered pill offered it as an afterthought. */
.cart-drawer-shop{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:52px;padding:0 20px;border:0;border-radius:12px;
  background:var(--red);color:#fff;font-size:17px;font-weight:700;
  transition:background .15s ease;
}
.cart-drawer-shop:hover{background:var(--red-dark);color:#fff}
.cart-drawer-shop:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.cart-drawer-empty-sale{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;min-height:44px;
  color:var(--red);font-size:15px;font-weight:600;
}
/* The arrow points the way the reader is going, which in Hebrew is left. */
.cart-drawer-empty-sale:hover{color:var(--red-dark);text-decoration:underline;text-underline-offset:4px}
.cart-drawer-empty-sale:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:8px}
.cart-drawer-saved{margin:0;text-align:center;font-size:14px;color:var(--muted)}
.cart-drawer-saved a{
  color:var(--red);font-weight:700;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
}
.cart-drawer-saved a:hover{color:var(--red-dark)}

.cart-drawer-foot{flex:0 0 auto;padding:14px 18px 18px;border-top:1px solid var(--line);background:#fff}
.cart-drawer-foot:empty{display:none}
.cart-drawer-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.cart-drawer-total span{font-size:13px;color:#56514b}
.cart-drawer-total b{font-size:21px;font-weight:800;color:#1d1d1d}
.cart-drawer-note{margin:0 0 12px;font-size:11.5px;color:var(--muted);line-height:1.5}
.cart-drawer-checkout{
  display:flex;align-items:center;justify-content:center;min-height:52px;
  border-radius:13px;background:var(--red);color:#fff;font-size:15px;font-weight:800;
}
.cart-drawer-checkout:hover{background:var(--red-dark);color:#fff}
.cart-drawer-view{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:8px;font-size:13px;font-weight:700;color:#56514b;text-decoration:underline;text-underline-offset:3px}
.cart-drawer-view:hover{color:var(--red)}

/* The header cart button gets a pending state while a request is in flight. */
.cart-button.is-busy{opacity:.6;pointer-events:none}
.single_add_to_cart_button.is-busy,.pdp-buy-bar-cta.is-busy{opacity:.75;pointer-events:none}

@media(max-width:760px){
  .cart-drawer{width:100vw}
  .cart-drawer-head{padding:14px 15px}
  .cart-drawer-body{padding:4px 15px 15px}
  .cart-drawer-foot{padding:12px 15px 16px}
  /* The buy bar would otherwise sit on top of the checkout button. */
  body.cart-drawer-open .pdp-buy-bar,
  body.cart-drawer-open .mobile-contact-bar,
  body.cart-drawer-open .a11y-launcher,
  body.cart-drawer-open .whatsapp{display:none}
}

/* --- WooCommerce's own post-add affordances, now that the drawer exists ---
   After an AJAX add, WooCommerce appends a "view cart" link after the button
   and marks the button .added. Both predate the drawer and now work against
   it: the link duplicates the panel's own checkout button, it inherited no
   card padding so it sat 1px from the edge, and appending it grew every card
   in the row from 442px to 475px -- a layout shift on every add. The tick on
   a button still reading "add to cart" said two things at once. */
.added_to_cart{display:none!important}
.button.added:after,a.added:after,.add-cart.added:after{content:none!important}


/* =========================================================
   Version 1.18: buy now
   ========================================================= */

/* The form is two rows: the quantity and the red button share the top one,
   quick-buy takes the full width beneath. Two buttons side by side at half
   width each read as a choice between equals; stacked, the hierarchy is
   obvious and neither is cramped on a narrow column.

   They were briefly one merged control inside a single red frame (fb969b0).
   The 2026-09 handoff separates them again, and the owner chose it: the
   stepper is a field and the button is an action, and a frame around both
   made the field look pressable. */
/* margin-bottom:0 against WooCommerce's own 2em: every block under the form
   states its own distance from it, and the larger of the two margins won --
   the payment terms sat 32px below the buttons instead of 16. */
.woocommerce div.product form.cart{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:10px;margin:28px 0 0}
/* WooCommerce clears its own float here with a pair of table pseudo-elements.
   In a flex row they are two more flex items, each taking a column gap of
   its own: the row opened 12px in from the edge and the red button lost the
   same 12px of width. There is no float left to clear. */
.woocommerce div.product form.cart:before,.woocommerce div.product form.cart:after{content:none}
/* div.quantity, not .quantity: the core rule that gives it 4px of margin is
   written that way too, and a flatter selector loses to it. */
.woocommerce div.product form.cart div.quantity{margin:0}
/* 200px is what "הוספה לסל" plus its bag needs; below about 330px of column
   the button takes its own line and the stepper keeps the one above. */
.woocommerce div.product form.cart .single_add_to_cart_button{flex:1 1 200px;min-width:0}
.shechter-buy-now{
  flex:1 0 100%;
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding-inline:24px;border:1.5px solid var(--ink);border-radius:10px;
  background:#fff;color:var(--ink);font-size:16px;font-weight:600;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
/* Inverted on hover, not lifted: it sits directly under a 56px red button,
   and a control that moves under the pointer beside one that does not read
   as the livelier of the two. */
.shechter-buy-now:hover{background:var(--ink);color:#fff}
.shechter-buy-now.is-busy{opacity:.7;pointer-events:none}


/* =========================================================
   Version 1.20: order cancellation
   ========================================================= */

/* Its own row above the copyright, not another entry in the sitemap list.
   The requirement is that a shopper can find it, and a link sitting among
   fourteen category names is findable only in the technical sense. */
.footer-cancel{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  height:40px;padding:0 16px;border:1.5px solid var(--ink);border-radius:10px;
  background:#fff;color:var(--ink);font-size:14px;font-weight:600;
  transition:background .15s ease,color .15s ease;
}
.footer-cancel:hover{background:var(--ink);color:#fff}
.footer-cancel:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* --- the form ---------------------------------------------------------- */
.cancel-form{margin:0;max-width:760px}
.cancel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.cancel-field{margin:0;display:flex;flex-direction:column;gap:6px}
.cancel-field-wide{grid-column:1/-1}
.cancel-field label{font-size:13px;font-weight:700;color:#3f3b36}
.cancel-req{color:var(--red);margin-inline-start:3px}
.cancel-field input,.cancel-field textarea{
  width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:11px 12px;font:inherit;font-size:14px;color:var(--ink);
}
.cancel-field input{height:46px}
.cancel-field textarea{resize:vertical;min-height:104px}
.cancel-field input:focus-visible,.cancel-field textarea:focus-visible{
  outline:3px solid var(--red);outline-offset:1px;border-color:var(--red);
}
/* The field the server refused. The notice says which in words; this shows
   it where the eye already is. Two pixels, so it is not colour alone. */
.cancel-field [aria-invalid="true"]{border:2px solid var(--red);background:#fffafa}
.cancel-field small{font-size:11.5px;color:var(--muted);line-height:1.45}

/* Off-screen rather than display:none: a field a bot cannot see but that is
   still in the DOM is the point of the trap. */
.cancel-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.cancel-submit{
  margin-top:18px;min-height:52px;padding:0 34px;border:0;border-radius:13px;
  background:var(--red);color:#fff;font-size:15px;font-weight:800;cursor:pointer;
  transition:background .15s ease;
}
.cancel-submit:hover{background:var(--red-dark)}
.cancel-submit:focus-visible{outline:3px solid #1d1d1d;outline-offset:3px}
.cancel-alt{margin:14px 0 0;font-size:13px;color:#56514b}
.cancel-alt a{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.cancel-notice{margin:0 0 20px;padding:14px 16px;border-radius:13px;border:1px solid}
.cancel-notice strong{display:block;font-size:15px;margin-bottom:4px}
.cancel-notice p{margin:0;font-size:13.5px;line-height:1.6}
.cancel-notice-ok{background:#eefaf2;border-color:#a8dcc0;color:#14603a}
.cancel-notice-error{background:#fdf0f2;border-color:#f0b8c1;color:#8d1626}

@media(max-width:760px){
  .cancel-grid{grid-template-columns:1fr}
  .footer-cancel-row{padding-block:14px}
  .cancel-submit{width:100%}
}

/* ===== Manufacturer filter (category archives) ===== */
/* Wires up the .category-layout / .filters sidebar that was already designed
   in this stylesheet but never rendered. Rows are links, not checkboxes, so
   the filter works with JavaScript off and every state is a real URL; the
   mark is a tick rather than a checkbox outline, because a drawn checkbox
   beside something announced as a link is a promise the markup breaks. */
.shop-shell.category-layout{padding-top:26px}
/* One scroll container, not two. The column is capped to what is actually on
   screen and scrolls inside itself, so opening the manufacturer list can never
   push its own bottom below the fold; a nested scroller inside it was what
   made the page move when the pointer missed the inner box. Scoped to the
   desktop because below 760px .filters is a full-height fixed drawer, and
   this block would otherwise override its top and height from further down
   the stylesheet. */
@media(min-width:761px){
  .filters{top:calc(var(--header-bottom,181px) + 16px);max-height:calc(100vh - var(--header-bottom,181px) - 32px);overflow-y:auto}
}
.category-results{min-width:0}

/* Three across once the sidebar takes its 272px, or the cards go to mush. */
.category-layout .woocommerce ul.products,
.category-layout ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important}

.filter-title h2{font-size:18px}
.filter-reset{font-size:12px;font-weight:700;color:var(--red);text-decoration:underline;text-underline-offset:3px}
.filter-reset:hover{color:var(--red-dark)}
.filter-group{border-top:1px solid var(--line);margin-top:4px;padding-top:16px}
.filter-group-title{margin:0 0 8px;font-size:12px;font-weight:800;color:#45413d}

.brand-list{display:flex;flex-direction:column}
.brand-row{display:flex;align-items:center;gap:8px;min-height:32px;padding:2px 4px;border-radius:8px;font-size:12.5px;color:#77716b;transition:.14s ease}
.brand-row:hover{background:var(--surface-soft);color:#201e1c}
/* Empty until selected. An outlined box here would read as a checkbox, and
   these rows are links: the box would promise a control the markup is not. */
.brand-row-mark{flex:0 0 auto;width:14px;height:14px;position:relative}
.brand-row-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-row-n{flex:0 0 auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

.brand-row.is-active{color:#171717;font-weight:700}

/* The tick is drawn rather than an entity, so it cannot inherit the RTL
   direction of the page and land mirrored. */
.brand-row.is-active .brand-row-mark:after{content:"";position:absolute;left:4px;top:0;width:5px;height:10px;border:solid var(--red);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* --red-text rather than the muted brick it was: #b9564f held 4.66:1 on
   white but 4.16:1 on the --warm hover below, and this is 11px text. */
.brand-row.is-active .brand-row-n{color:var(--red-text)}
.brand-row.is-active:hover{background:var(--warm)}

.brand-more{margin-top:6px}
.brand-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:30px;padding:0 4px;font-size:12px;font-weight:700;color:var(--red)}
.brand-more>summary::-webkit-details-marker{display:none}
.brand-more>summary:hover{text-decoration:underline;text-underline-offset:3px}
.brand-more[open]>summary{color:var(--muted)}
.brand-more .brand-list{margin-top:4px}

.results-toolbar .woocommerce-result-count{margin:0!important;color:var(--muted);font-size:12.5px}
.results-toolbar .woocommerce-ordering{margin:0!important}
.filter-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center}
/* .results-toolbar span (0,1,1) greyed the count on its red pill to 1.07:1. */
.results-toolbar .filter-count{color:#fff}
.filters-backdrop{display:none}

@media(max-width:1180px){
  .category-layout .woocommerce ul.products,
  .category-layout ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:760px){
  .shop-shell.category-layout{padding-top:18px}
  /* .filters becomes the off-canvas drawer the stylesheet already describes;
     these are only the pieces that drawer was missing. */
  .filters{visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
  .filters.open{visibility:visible;transition:transform .25s ease,visibility 0s 0s}
  .filters-backdrop{display:block;position:fixed;inset:0;z-index:505;background:rgba(20,18,16,.45)}
  .filters-backdrop[hidden]{display:none}
  .results-toolbar{gap:8px}
  .results-toolbar .woocommerce-result-count{order:1;flex:1 0 100%;font-size:11.5px}
  .results-toolbar .woocommerce-ordering{order:2;flex:1}
  .brand-row{min-height:38px;font-size:13px}
}

/* ===== Buying guides ===== */
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.guide-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 4px 16px rgba(22,20,18,.035);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.guide-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#d8d2c9}
.guide-card-link{display:flex;flex-direction:column;height:100%;color:inherit}
.guide-card-media{display:block;aspect-ratio:16/9;background:var(--surface-soft);overflow:hidden}
.guide-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.guide-card-body{display:flex;flex-direction:column;gap:7px;padding:18px}
.guide-card:not(:has(.guide-card-media)) .guide-card-body{padding:22px}
.guide-card-topic{align-self:flex-start;padding:3px 10px;border-radius:999px;background:var(--warm);color:var(--red-dark);font-size:11px;font-weight:800}
.guide-card-title{margin:0;font-size:17px;font-weight:700;line-height:1.4;color:#201e1c}
.guide-card-excerpt{font-size:13.5px;line-height:1.65;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.guide-card-meta{margin-top:auto;padding-top:6px;font-size:11.5px;color:var(--muted)}
.guide-empty{padding:40px 0;color:var(--muted)}

.guide-head{padding:30px 0 6px}
.guide-head h1{margin:0;font-size:clamp(30px,3.4vw,44px);line-height:1.15;letter-spacing:-.02em;max-width:22ch}
.guide-standfirst{margin:14px 0 0;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:#4a4540;max-width:62ch}
.guide-meta{margin:14px 0 0;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.guide-hero{margin-top:22px}
.guide-hero img{width:100%;max-height:460px;object-fit:cover;border-radius:var(--radius-lg);display:block}

.guide-layout{display:grid;grid-template-columns:262px minmax(0,1fr);gap:44px;align-items:start;padding:34px 0 20px}
.guide-toc{position:sticky;top:calc(var(--header-bottom,181px) + 16px);max-height:calc(100vh - var(--header-bottom,181px) - 32px);overflow-y:auto;padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}
.guide-toc h2{margin:0 0 12px;font-size:12px;font-weight:800;color:#45413d}
.guide-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.guide-toc li{margin:0}
.guide-toc a{display:block;padding:6px 0;font-size:13px;line-height:1.5;color:#6d6a66;border-inline-start:2px solid transparent;padding-inline-start:10px;margin-inline-start:-12px}
.guide-toc a:hover{color:var(--red);border-inline-start-color:var(--red)}
.guide-toc .toc-l3 a{padding-inline-start:22px;font-size:12.5px;color:var(--muted)}

/* A measure this long is the whole point of a guide page; the grid column is
   wider than it to leave the contents box room, so cap the prose itself. */
.guide-body{max-width:72ch;font-size:16.5px;line-height:1.85;color:#2c2926}
.guide-body>*+*{margin-top:1.15em}
.guide-body h2{margin-top:1.9em;font-size:clamp(22px,2vw,27px);line-height:1.3;letter-spacing:-.015em;scroll-margin-top:calc(var(--header-bottom,181px) + 20px)}
.guide-body h3{margin-top:1.6em;font-size:clamp(18px,1.6vw,21px);line-height:1.35;scroll-margin-top:calc(var(--header-bottom,181px) + 20px)}
.guide-body ul,.guide-body ol{padding-inline-start:1.3em}
.guide-body li+li{margin-top:.45em}
.guide-body img{max-width:100%;height:auto;border-radius:var(--radius)}
.guide-body a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.guide-body a:hover{color:var(--red-dark)}
.guide-body blockquote{margin-inline:0;padding:16px 20px;border-inline-start:3px solid var(--red);background:var(--surface-soft);border-radius:0 var(--radius) var(--radius) 0;font-size:16px}
.guide-body table{width:100%;border-collapse:collapse;font-size:14.5px;display:block;overflow-x:auto}
.guide-body th,.guide-body td{padding:10px 12px;border:1px solid var(--line);text-align:start;vertical-align:top}
.guide-body th{background:var(--surface-soft);font-weight:800}

.guide-shop{margin-top:2.4em;padding:24px;background:var(--surface-soft);border-radius:var(--radius)}
.guide-shop h2{margin:0 0 6px;font-size:20px}
.guide-shop p{margin:0 0 14px;font-size:14px;color:var(--muted)}
.guide-cat-links{display:flex;flex-wrap:wrap;gap:10px}
.guide-cat-links a{display:flex;flex-direction:column;gap:2px;padding:10px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;font-size:14px;font-weight:700;color:#201e1c;transition:.16s ease}
.guide-cat-links a:hover{border-color:#171717;transform:translateY(-1px)}
.guide-cat-links span{font-size:11px;font-weight:600;color:var(--muted)}

.guide-picks,.guide-more{background:#fff}

@media(max-width:1040px){
  .guide-layout{grid-template-columns:1fr;gap:24px}
  /* The contents box stops being a column and becomes a card above the prose;
     sticky on a full-width block would pin it over the text as it scrolls. */
  .guide-toc{position:static;max-height:none}
  .guide-body{max-width:none}
  .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  .guide-grid{grid-template-columns:1fr;gap:16px}
  .guide-head{padding-top:20px}
  .guide-hero img{max-height:230px;border-radius:var(--radius)}
  .guide-layout{padding-top:22px}
  .guide-body{font-size:16px;line-height:1.8}
  .guide-shop{padding:18px}
  .guide-cat-links a{flex:1 1 100%}
}

/* ===== Out of stock, and the back in stock request ===== */
/* 20px above, which is where the availability line sits on a product that
   has one: the price used to carry 28px of its own margin underneath and
   this card only had to clear the remainder of it. */
.pdp-oos{margin:20px 0 18px;padding:16px 18px;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius)}
.pdp-oos-badge{display:flex;align-items:center;gap:8px;margin:0;color:#a4260f}
.pdp-oos-badge strong{font-size:16px;font-weight:800;letter-spacing:-.01em}
.pdp-oos-lead{margin:10px 0 12px;font-size:13.5px;line-height:1.6;color:#4a4540}
.pdp-oos-done{margin:10px 0 0;padding:11px 14px;border-radius:11px;background:#eefaf2;border:1px solid #a8dcc0;color:#14603a;font-size:13.5px;font-weight:700}
.pdp-oos-error{margin:0 0 12px;padding:10px 13px;border-radius:11px;background:#fdf0f2;border:1px solid #f0b8c1;color:#8d1626;font-size:13px;font-weight:700}

.pdp-oos-form{display:flex;flex-direction:column;gap:10px}
.pdp-oos-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pdp-oos-field{margin:0;display:flex;flex-direction:column;gap:5px;min-width:0}
.pdp-oos-field label{font-size:12px;font-weight:700;color:#45413d}
.pdp-oos-field input{height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:11px;background:#fff;font:inherit;font-size:14px;color:var(--ink);outline:0}
.pdp-oos-field input:focus{border-color:#171717;box-shadow:0 0 0 3px rgba(25,25,25,.06)}
.pdp-oos-field input:user-invalid{border-color:#e08f9c}
.pdp-oos-hint{margin:-2px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}
.pdp-oos-submit{min-height:46px;padding:0 20px;border:0;border-radius:12px;background:#1d1d1d;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:.16s ease}
.pdp-oos-submit:hover{background:var(--red)}
.pdp-oos-submit[disabled]{opacity:.55;cursor:default}
/* Off screen rather than display:none, which some bots read as "skip me". */
.pdp-oos-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}

@media(max-width:420px){
  .pdp-oos-pair{grid-template-columns:1fr}
}

/* ===== Out of stock, in the grids ===== */
/* The badge needs a positioned card to sit on; the WooCommerce loop item has
   no wrapper of its own, unlike the theme's .product-media. */
.woocommerce ul.products li.product{position:relative}
/* Grey, not the red the sale badge uses. Red on a card reads as an offer, and
   an offer is the opposite of what this says. */
.product-badge-oos{background:#4a4540;letter-spacing:-.01em}

/* Dimmed rather than hidden. The picture is still how a shopper recognises
   the product they were looking for, it just should not compete with the
   ones they can actually buy. */
.woocommerce ul.products li.product.outofstock a img,
.product-card.is-outofstock .product-media img{opacity:.62;filter:saturate(.75)}
.woocommerce ul.products li.product.outofstock:hover a img,
.product-card.is-outofstock:hover .product-media img{opacity:.78}
.woocommerce ul.products li.product.outofstock .price,
.product-card.is-outofstock .prices{opacity:1}
/* Sold out reads through a darker grey, not a fade: opacity took the red
   price to 3.3:1 and the struck old price to 2.9:1. */
.woocommerce ul.products li.product.outofstock .price,
.woocommerce ul.products li.product.outofstock .price *,
.product-card.is-outofstock .prices,
.product-card.is-outofstock .prices *{color:#5f5a55!important}
/* A sold-out item needs no sale badge, and the two sat in the same corner:
   'מבצע!' covered 'אזל במלאי'. The struck old price still shows the discount. */
.woocommerce ul.products li.product.outofstock span.onsale{display:none!important}
/* Price-on-request items are not sold out, whatever their stock flag says. */
.woocommerce ul.products li.product.is-por a img{opacity:1;filter:none}
.woocommerce ul.products li.product.is-por .price,
.woocommerce ul.products li.product.is-por .price *{opacity:1;color:var(--ink)!important}

.woocommerce ul.products li.product .button.add-cart-oos,
.product-card .button.add-cart-oos{background:#fff!important;border:1px solid var(--line-strong)!important;color:#2c2926!important;font-weight:700!important}
.woocommerce ul.products li.product .button.add-cart-oos:hover,
.product-card .button.add-cart-oos:hover{background:#f5f1eb!important;border-color:#171717!important;color:#171717!important}

@media(max-width:760px){
  .woocommerce ul.products li.product .button.add-cart-oos,
  .product-card .button.add-cart-oos{font-size:11px!important;padding-inline:6px!important}
}

/* ===== Google reviews =====================================================
   A trust panel beside the reviews, not a row of cards in a strip.

   What was wrong was not the styling. .review-card blockquote carried
   min-height:calc(6 * 1.75 * 14.5px), so every card was forced to the height
   of a six-line review. These reviews run 30 to 241 characters, median 76 --
   so a card holding one short sentence was mostly empty white, and eight of
   them read as boxes floating in space. Natural heights fix that, and CSS
   columns give natural heights without the row-stretching a grid imposes.

   No carousel. Eight short reviews fit on one screen at every desktop width;
   making a shopper press an arrow to see the proof is the opposite of what
   this section is for. Mobile turns the same list into a swipe, where the
   gesture is native and nothing is hidden behind a control.
   ========================================================================= */

.reviews-section{background:var(--surface-soft)}

/* The star row. Restored verbatim from the block this replaced: the svg
   rule is shared with the footer's social icons, which render as hollow
   outlines without it. */
.review-stars{display:inline-flex;gap:2px;color:#f5a623;line-height:0}
.review-stars svg,.footer-socials .footer-social svg{fill:currentColor;stroke:none}

.reviews-layout{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:40px;
  align-items:start;
}

/* --- the trust panel -----------------------------------------------------
   Deliberately not a card. The section sits on --surface-soft and the reviews
   are white, so a white panel here would compete with the very objects it is
   introducing. Type on the ground, cards as the objects. */
/* The panel used to be sticky here. That was worth it when the reviews were
   a four-row grid and the panel had most of a screen to hold position
   against. The row is a carousel now: the whole section is 496px and the
   panel 259px, so it had 92px of travel -- imperceptible, and paid for
   with a dependency on --header-height that was measuring the wrong band
   anyway. That token covers .site-header alone and not the utility strip
   above it, so the stuck position sat 13px inside the header. Removed
   rather than corrected: there is nothing left for it to do. */
.reviews-trust{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.reviews-trust h2{margin:0;font-size:32px;line-height:1.22;letter-spacing:-.02em}

.reviews-score{display:flex;align-items:center;gap:14px;margin-top:20px}
/* The score is the strongest single fact in this section and was previously
   set at 17px inside a grey line. */
.reviews-score-num{
  font-size:54px;line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.reviews-score-meta{display:flex;flex-direction:column;gap:5px;min-width:0}
/* align-self, and it is load-bearing. .review-stars-avg is display:inline-block
   with the gold row clipped to a percentage of its own width. Inside this
   flex column it stretched to the column, so 88% landed past the fifth star
   and 4.4 rendered as five full stars -- a claim half a point better than
   the shop has earned. Shrinking it to its content puts the clip back on
   the stars themselves. */
.reviews-score-meta .review-stars{font-size:0;align-self:flex-start}
.reviews-score-meta p{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}

.reviews-trust-note{
  margin:16px 0 0;font-size:13.5px;line-height:1.65;color:var(--muted);max-width:34ch;
}

/* Same affordance as every other "see all" on this page: a rule under the
   label that takes the brand colour on hover. */
.reviews-all{
  margin-top:20px;min-height:42px;
  display:inline-flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--line-strong);
  font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;
  transition:color .18s ease,border-color .18s ease;
}
.reviews-all:hover{color:var(--red);border-color:var(--red)}
.reviews-all:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:4px}

/* --- the reviews ---------------------------------------------------------
   One row that scrolls.

   Two earlier attempts flowed down the page: CSS columns, which gave natural
   heights but left three columns ending at three different points, and then a
   two-column grid, which lined the rows up but pushed the section a screen
   further down. Neither is what a reviews section is for. This is a rail.

   Native scrolling, not a transform. The browser owns the position, which
   means there is no index to desynchronise, no card width to divide by, and
   no gap to parse -- and it is also the only way the row answers a finger, a
   trackpad and the arrow keys without a line of code for any of them. */
.reviews-viewport{min-width:0}

.reviews-rail{
  list-style:none;margin:0;
  display:flex;align-items:stretch;gap:16px;
  /* Load-bearing, not stray padding: overflow-x:auto forces a clipping
     overflow-y, so without the block padding the card's hover lift and its
     shadow are sliced flat. .products-carousel pays the same tax. */
  padding:4px 2px 14px;
  overflow-x:auto;overflow-y:hidden;
  /* Required. Without it a swipe past the last card triggers history-back on
     iOS Safari and chains to the page behind on Android. */
  overscroll-behavior-inline:contain;
  scroll-snap-type:inline mandatory;
  scroll-padding-inline-start:2px;
  scrollbar-width:none;
}
.reviews-rail::-webkit-scrollbar{display:none}

/* The motion lives here and never in the scrollBy call. Declared this way it
   is switched off by the OS preference AND by the site's own accessibility
   toggle, which sets scroll-behavior:auto!important on everything; a
   behavior:'smooth' passed from JavaScript would override both. */
@media (prefers-reduced-motion:no-preference){.reviews-rail{scroll-behavior:smooth}}

/* The rail is focusable so it can be scrolled by keyboard, so it needs a ring. */
.reviews-rail:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:var(--radius)}

.review-card{
  /* Two across by default, three above 1281. grow:1 rather than 0 so a sync
     that leaves one or two five-star reviews fills the row instead of
     stranding a lone card against one edge. */
  flex:1 0 calc((100% - 16px)/2);
  min-width:0;
  scroll-snap-align:start;
  margin:0;
  display:flex;flex-direction:column;gap:12px;
  padding:22px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 4px 16px rgba(22,20,18,.035);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
/* Eight cards over three leaves a remainder, so the last card's start-aligned
   snap point sits past maximum scroll: under `mandatory` the row springs back
   and the final review stays permanently half cut. Snapping it to the end
   instead is a fix, not a precaution -- the old mobile rule had this bug. */
.review-card:last-child{scroll-snap-align:end}

.review-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-sm);
  border-color:var(--line-strong);
}

/* Still no min-height -- that was the pathology this section was rebuilt to
   remove. Equal heights come from align-items:stretch on the rail, so every
   card is as tall as the tallest of all eight and the row never changes height
   as it scrolls, and .review-by{margin-top:auto} puts the slack under the
   quote rather than above the name.

   Five lines, down from eight. At a 289px card the longest review is nine
   lines and the median is three; clamping at five holds the row near 265px and
   costs the two long reviews their tail, which the link to the full Google
   listing already covers. overflow-wrap because one pasted URL in a future
   review would otherwise push past the flex basis and widen every card. */
.review-card blockquote{
  margin:0;font-size:15.5px;line-height:1.7;color:#37342f;white-space:pre-line;
  overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}

/* auto, so in a card stretched to its row the name sits on the floor of the
   card rather than under the quote with a gap beneath it. That single
   property is most of the difference between a row that reads as aligned
   and one that reads as padded. */
.review-by{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}
.review-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.review-by strong{font-size:13.5px;font-weight:700;color:var(--ink)}
.review-by time{font-size:11.5px;color:var(--muted)}

.review-avatar{width:36px;height:36px;border-radius:999px;object-fit:cover;flex:0 0 auto;background:var(--surface-soft)}
/* An initial, set quietly. No stock photograph stands in for a real person.
   The Google photo is layered over it rather than swapped for it: those URLs
   expire. An absolutely positioned image does not collapse when it 404s -- it
   holds its box and shows a broken glyph over the letter -- so the element
   removes itself on error (inc/reviews.php), and the letter that was already
   underneath is what remains. */
.review-avatar-letter{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-soft);border:1px solid var(--line);
  color:#6d6a66;font-size:14px;font-weight:700;
}
.review-avatar-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* --- the controls --------------------------------------------------------
   One cluster centred under the row: pause, back, dots, forward. Not in the
   trust panel, which is sticky above 920px and a stacked block below it, so
   controls mounted there would land somewhere different at every width and
   could sit off screen while the row itself is still visible.

   direction:ltr matches .carousel-arrows in the featured-products head, and
   it is what makes the DOM order the physical order: the glyph rendered on
   the left is the one that means forward in a right-to-left row. */
.reviews-controls{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:10px;direction:ltr}
/* The author display:flex above beats the browser's own [hidden] rule, so
   without this the group ships visible and the whole mechanism does nothing.
   Same trap .a11y-panel[hidden] and .cart-drawer[hidden] already document. */
.reviews-controls[hidden]{display:none}

.reviews-dots{display:flex;align-items:center;gap:2px}
/* 8px of dot inside a 24px target: the dot is the affordance, the button is
   the hit area WCAG 2.2 asks for. */
.reviews-dot{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.reviews-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted);transition:background .18s ease,transform .18s ease}
/* --muted is 4.68:1 on --surface-soft and the red is 3.93:1, both above the
   3:1 floor for a non-text control. --line-strong would read as ~1.35:1 and
   simply vanish. The scale is there so the state is not carried by hue alone. */
.reviews-dot[aria-current="true"]::before{background:var(--red);transform:scale(1.12)}
.reviews-dot:focus-visible{outline:2px solid var(--red);outline-offset:1px;border-radius:50%}

/* Three across, and 1281 rather than the 1180 the layout already breaks at.
   At 1181 the rail column is 793px, so a third card is 252px -- about 27
   Hebrew characters a line, which is a column of confetti rather than a
   readable quote. 1281 is the first width where three cards still hold 285px.
   Written as a min-width override on a two-up base, so no other component
   ever sees this breakpoint. */
@media (min-width:1281px){
  .review-card{flex-basis:calc((100% - 32px)/3)}
}

@media (max-width:1180px){
  .reviews-layout{grid-template-columns:250px minmax(0,1fr);gap:28px}
  .reviews-score-num{font-size:46px}
}

@media (max-width:920px){
  .reviews-layout{grid-template-columns:1fr;gap:26px}
  .reviews-trust-note{max-width:52ch}
}

@media (max-width:760px){
  .reviews-layout{gap:20px}
  .reviews-score{margin-top:16px}
  .reviews-score-num{font-size:42px}
  .reviews-all{margin-top:16px}

  /* The rail already scrolls and snaps at every width; this only widens the
     card to one-per-screen and bleeds the row to the screen edge while the
     first card still lines up with the page's own gutter.

     12px, not 24: this breakpoint redefines --container as
     calc(100% - 24px), so the gutter here is half what it is above. */
  .reviews-rail{
    gap:12px;
    margin-inline:-12px;
    padding-inline:12px;
    padding-block:4px 12px;
    scroll-padding-inline-start:12px;
  }
  .review-card{flex:0 0 82vw;max-width:340px}
  .review-card:hover{transform:none}
  /* The swipe is the gesture here, so the dots stay as the position readout
     and the arrows go: two 46px circles to do what a thumb already does is
     the visual noise this section was asked to lose. The JS reads this very
     rule to decide whether to auto-advance, so hiding them also settles that
     the row never moves on its own on a touch screen. */
  .reviews-controls .carousel-arrow{display:none}
}

/* ===== Header proportions ===== */
/* The v1.2 pass left the logo at 52px tall inside an "auto" grid column, so
   it rendered 85px wide from a 185px source and the search took every pixel
   the other two did not: 827px at 1440, which is twice what an input that
   size needs and pushed the logo into a corner.
   The source art is 185x113 and tightly cropped, so ~110px wide is the point
   past which it starts to soften on a dense screen. That is the ceiling here,
   not a design preference. */
@media (min-width:761px){
  .header-main{height:86px;grid-template-columns:auto minmax(280px,1fr) auto}
  .logo,.logo:hover{height:66px}
  /* The image has to be driven by the height, not clamped by the width.
     .logo img carried max-width:100%, and with an auto grid column the box
     took its width from the image while the image took its width from the
     box: the pair settled at 85px and neither the column nor the height
     changed anything. */
  .logo img,.logo .custom-logo{height:100%;width:auto;max-width:none;max-height:100%;object-fit:contain}
  /* Capped and centred in its own track rather than stretched. Past about
     560px a search field stops reading as a field and starts reading as a
     gap between the logo and the cart. */
  .header-main>.search{max-width:660px;justify-self:center;width:100%}
}

@media (min-width:761px) and (max-width:1180px){
  .logo,.logo:hover{height:58px}
  .header-main>.search{max-width:560px}
}

@media (min-width:761px) and (max-width:920px){
  .header-main{height:78px}
  .logo,.logo:hover{height:52px}
  .header-main>.search{max-width:440px}
}

/* ===== Vector logo ===== */
/* Traced from the 185x113 PNG, which was the ceiling on how large the mark
   could be shown before it softened. With the shape in paths the size is a
   free choice again, so the header logo goes up another step. */
@media (min-width:761px){
  .header-main{height:104px}
  .logo,.logo:hover{height:92px}
}
@media (min-width:761px) and (max-width:1180px){
  .header-main{height:96px}
  .logo,.logo:hover{height:82px}
}
@media (min-width:761px) and (max-width:920px){
  .header-main{height:86px}
  .logo,.logo:hover{height:70px}
}
/* The footer mark was sized for a bitmap that had nowhere to grow. */
.footer-brand-col img{width:auto;height:88px;max-width:100%}
@media(max-width:760px){
  .footer-brand-col img{height:72px}
  .header-main{grid-template-columns:42px 118px 1fr}
  .logo,.logo:hover{width:auto;height:64px;padding:0}
  .logo img{height:100%;width:auto;max-width:none;max-height:100%}
}

/* ===== Drawn tiles ===== */
/* Two of the tiles are a service and a promotion rather than a shelf, so they
   get a panel instead of a product photograph. Both fill the same box the
   photographs sit in, so the grid stays even. */
.dept-graphic{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}

/* FOR RENT: a sign, tilted the way a real one leans on a shop window. */
.dept-graphic-rent{background:linear-gradient(150deg,#fdf3ef,#f6ece6)}
.dept-sign{transform:rotate(-7deg);padding:14px 26px;border-radius:10px;background:#171717;color:#fff;box-shadow:0 12px 26px rgba(20,18,16,.22);display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1}
.dept-sign b{font-size:clamp(19px,2.4vw,27px);font-weight:900;letter-spacing:.14em;text-indent:.14em;direction:ltr}
.dept-sign b:last-child{color:var(--red)}

/* Offers: a price tag with the per cent sign set into it. */
.dept-graphic-sale{background:var(--red-soft)}
.dept-graphic-sale svg{width:clamp(84px,54%,132px);height:auto;fill:var(--red);filter:drop-shadow(0 10px 20px rgba(216,35,42,.26));transform:rotate(-6deg)}
.dept-sale-eye{fill:#fff}
.dept-sale-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:translate(-4%,6%) rotate(-6deg);color:#fff;font-size:clamp(30px,4vw,44px);font-weight:900;line-height:1;pointer-events:none}

@media(max-width:760px){
  .dept-sign{padding:10px 18px}
  .dept-sign b{letter-spacing:.1em;text-indent:.1em}
}

/* ===== Header row capacity ===== */
/* The row is one line of twelve items -- כל הקטגוריות, ten departments and
   מבצעים -- spread edge to edge, and it must never wrap: a panel opened from
   the first line of a wrapped row covers the second. At the handoff's 14px
   in Heebo the twelve measure 1182px, 1226px with the 4px minimum between
   each, so the 1240 container holds them with 14 to spare. Below that the
   tail is dropped a step at a time rather than squeezing the labels
   together, and מבצעים, at the far end, stays. Every department is still
   reachable through כל הקטגוריות, the button that starts the row. Each step
   was found in a 1px sweep and leaves at least 8px beyond the minimum gaps;
   theme.js drops more when the accessibility widget widens the text.
   !important because an earlier rule forces nth-child(n+5) visible. */
@media (min-width:761px) and (max-width:1281px){
  .quick-category:nth-child(n+10){display:none!important}
}
@media (min-width:761px) and (max-width:1184px){
  .quick-category:nth-child(n+9){display:none!important}
}
@media (min-width:761px) and (max-width:1105px){
  .quick-category:nth-child(n+8){display:none!important}
}
@media (min-width:761px) and (max-width:993px){
  .quick-category:nth-child(n+7){display:none!important}
}
@media (min-width:761px) and (max-width:898px){
  .quick-category:nth-child(n+6){display:none!important}
}
@media (min-width:761px) and (max-width:802px){
  .quick-category:nth-child(n+5){display:none!important}
}
/* Set by fitNavRow() in theme.js when the widget's text size or spacing
   leaves the row less room than the viewport width promises. */
@media (min-width:761px){
  .quick-category.nav-overflow{display:none!important}
}

/* =========================================================
   Version 1.50: wishlist, comparison, sharing, ask us
   ========================================================= */

/* --- the buy row -------------------------------------------------------- */

/* The quantity was a bare number input with the browser's own hairline
   spinner, next to a full-height button. It becomes a bordered field the
   same height as that button, with two 44px steps in place of the spinner
   -- which the script adds, so a browser that never runs it keeps the
   native arrows rather than a field with no way to change the number. */
.woocommerce div.product form.cart .quantity{
  display:flex;align-items:center;
  height:56px;
  border:1px solid #D9D6D2;
  border-radius:10px;
  background:#fff;
  padding:0;
  transition:border-color .15s ease,box-shadow .15s ease;
}
/* A neutral focus ring. The red one read as an error on a field that is
   merely being typed in, and red on this page is the price and the button. */
.woocommerce div.product form.cart .quantity:focus-within{
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(23,23,23,.12);
}
.woocommerce div.product form.cart .quantity .qty{
  height:54px;width:28px;padding:0;
  border:0;border-radius:0;background:transparent;
  font-size:16px;font-weight:600;text-align:center;color:var(--ink);
}
.woocommerce div.product form.cart .quantity .qty:focus{outline:0}
/* The native spinner is only hidden once the script has put real buttons in
   its place; without it the arrows stay, because a field with no way to
   change the number is worse than an ugly one. */
.woocommerce div.product form.cart .quantity.has-stepper .qty{-moz-appearance:textfield;appearance:textfield}
.woocommerce div.product form.cart .quantity.has-stepper .qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .quantity.has-stepper .qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qty-step{
  width:44px;height:54px;flex:0 0 auto;
  border:0;border-radius:0;background:transparent;
  color:var(--ink);font-size:20px;font-weight:500;line-height:1;cursor:pointer;
  transition:background .15s ease;
}
.qty-step:hover{background:#F6F5F3}
/* The field clips at its own radius, so the ring is drawn inwards. */
.qty-step:focus-visible{outline:3px solid var(--red);outline-offset:-3px}

/* The bag on the add-to-cart button. WooCommerce prints that button's label
   through esc_html() inside its own template, so the icon cannot be part of
   the markup without overriding the template; it is the same drawing as
   shechter_icon('bag'), painted as a mask (--icon-bag, at the top of this
   file). It goes when the button turns into its own "נוסף" receipt. */
.woocommerce div.product form.cart .single_add_to_cart_button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.woocommerce div.product form.cart .single_add_to_cart_button:before{
  content:"";width:22px;height:22px;flex:0 0 auto;background:currentColor;
  -webkit-mask:var(--icon-bag) center/contain no-repeat;
  mask:var(--icon-bag) center/contain no-repeat;
}
.woocommerce div.product form.cart .single_add_to_cart_button.is-added:before{display:none}

/* --- the action row ----------------------------------------------------- */

/* Two text buttons on one line, with no rule above them: the buy box's only
   divider is the one over משלוח ואיסוף. They were four bordered chips, which
   at the bottom of a column of buttons read as four more things to press. */
.pdp-actions{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 16px;margin-top:18px;font-size:14px;
  /* Pulled out by the padding the buttons gained, so the words still line up
     with the price and the description above them and only the hover tint
     reaches past the column. */
  margin-inline:-10px;
}
.pdp-action{
  display:inline-flex;align-items:center;gap:6px;
  min-height:34px;padding:6px 10px;
  border:0;border-radius:8px;background:none;color:#4A4A4A;
  font:inherit;font-size:14px;cursor:pointer;
  transition:color .15s ease,background-color .15s ease;
}
/* A colour change alone was too quiet for a control that toggles something:
   #4A4A4A to #171717 is a shift a shopper does not see while their eye is on
   the button they are about to press. The tint is the same one the header
   utilities and the department links use, so the whole site answers a hover
   the same way. */
.pdp-action:hover,.pdp-action:focus-visible{color:var(--ink);background:#F6F5F3}
/* Already comparing: the tick keeps its green and the word darkens with it. */
.pdp-action.is-on:hover .pdp-compare-on svg{color:var(--green)}
.pdp-action-icon{display:inline-flex;flex-shrink:0}
.pdp-action-ask{font-weight:500}
/* One button, both states in its markup: the label and the mark swap
   together, and the pressed state is a green tick beside the word for it
   rather than a red frame that competes with the buy button. */
.pdp-compare-on{display:none}
.pdp-action.is-on .pdp-compare-on{display:inline-flex}
.pdp-action.is-on .pdp-compare-off{display:none}
.pdp-action.is-on .pdp-compare-on svg{color:var(--green)}

/* --- share menu --------------------------------------------------------- */

/* Anchored to the icon buttons beside the title, at the end of the row, so
   it opens inwards across the buy box instead of off the side of the page. */
.pdp-share{
  position:absolute;top:calc(100% + 8px);inset-inline-start:auto;inset-inline-end:0;z-index:30;
  min-width:230px;padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(20,20,20,.16);
}
.pdp-share[hidden]{display:none}
.pdp-share-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 11px;border:0;border-radius:10px;
  background:transparent;color:var(--ink);
  font-size:13.5px;font-weight:600;text-align:start;cursor:pointer;
}
.pdp-share-item:hover{background:#f6f3ef}
.pdp-share-item svg{flex-shrink:0;color:#6f6a63}
.pdp-share-whatsapp svg{color:#25d366}
.pdp-share-facebook svg{color:#1877f2}
.pdp-share-copy.is-done{color:#1c7c3f}
.pdp-share-copy.is-done svg{color:#1c7c3f}

/* --- toast -------------------------------------------------------------- */

.saved-toast{
  position:fixed;inset-inline-start:20px;bottom:24px;z-index:500;
  display:flex;align-items:center;gap:14px;
  max-width:min(380px,calc(100vw - 40px));
  padding:13px 17px;border-radius:13px;
  background:#1d1d1d;color:#fff;font-size:13.5px;font-weight:600;
  box-shadow:0 16px 40px rgba(20,20,20,.28);
  opacity:0;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease;
}
.saved-toast.is-in{opacity:1;transform:none}
.saved-toast a{color:#fff;text-decoration:underline;white-space:nowrap;flex-shrink:0}
@media(max-width:760px){
  .saved-toast{inset-inline:16px;bottom:80px;max-width:none}
}

/* --- the two list pages ------------------------------------------------- */

.saved-loading,.saved-empty{color:var(--muted);text-align:center;padding:34px 0}
.saved-empty .button{margin-top:14px;display:inline-block}
.saved-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.saved-cell{display:flex;flex-direction:column;gap:8px}
/* flex, not height: the card's own flex-basis is a carousel's percentage,
   which inside this column squashed every card to ~116px. */
.saved-cell .product-card{flex:1 1 auto}
.saved-remove{
  border:1px solid var(--line);border-radius:10px;background:#fff;
  min-height:36px;color:#77716a;font-size:12.5px;font-weight:700;cursor:pointer;
}
.saved-remove:hover{border-color:var(--red);color:var(--red)}
@media(max-width:1100px){.saved-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.saved-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* The table scrolls inside its own box; the page must not scroll sideways. */
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare-table{width:100%;border-collapse:collapse;min-width:520px;font-size:13.5px}
.compare-table th,.compare-table td{
  padding:12px 14px;border:1px solid var(--line);text-align:start;vertical-align:top;
}
.compare-table tbody th,.compare-corner{
  width:150px;background:var(--surface-soft);font-weight:700;color:#3f3b36;white-space:nowrap;
}
.compare-head{position:relative;background:#fff;min-width:180px}
/* A fixed box rather than an intrinsic height: the catalogue's photographs
   run from a wide xylophone to a tall guitar, and letting each set its own
   height made the header row as deep as the tallest one. */
.compare-head img{display:block;width:100%;max-width:150px;height:130px;object-fit:contain;margin:0 auto 8px;mix-blend-mode:multiply}
.compare-title{display:block;color:var(--ink);font-weight:700;line-height:1.35;text-decoration:none}
.compare-title:hover{color:var(--red)}
.compare-remove{
  /* Above the photo: its mix-blend-mode makes it a stacking context that
     painted over the button, and a tap on the x opened the product. */
  z-index:1;
  position:absolute;top:6px;inset-inline-end:6px;
  width:28px;height:28px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:#77716a;font-size:17px;line-height:1;cursor:pointer;
}
.compare-remove:hover{border-color:var(--red);color:var(--red)}
.compare-price{font-weight:800;color:var(--red);font-size:15px}
.compare-none{color:#767069}
.compare-oos{color:#8a5a00;font-weight:700}
.compare-buy{
  display:inline-block;padding:9px 14px;border-radius:10px;
  background:var(--red);color:#fff;font-weight:700;font-size:13px;
}
.compare-buy:hover{background:var(--red-dark);color:#fff}

/* --- ask us panel ------------------------------------------------------- */

.ask-backdrop{position:fixed;inset:0;z-index:400;background:rgba(15,14,13,.18);opacity:0;transition:opacity .22s ease}
.ask-backdrop.is-open{opacity:1}
.ask-backdrop[hidden]{display:none}
.ask-panel{
  position:fixed;inset-block:0;inset-inline-end:0;z-index:410;
  width:min(430px,100vw);display:flex;flex-direction:column;
  background:#fff;box-shadow:-18px 0 50px rgba(20,20,20,.18);
  transform:translateX(var(--ask-out,-102%));
  transition:transform .26s cubic-bezier(.32,.72,.35,1);
}
html[dir="rtl"] .ask-panel{--ask-out:-102%}
html[dir="ltr"] .ask-panel{--ask-out:102%}
.ask-panel.is-open{transform:translateX(0)}
/* display:flex above would otherwise beat the browser's [hidden] rule and
   leave the panel in the tab order while closed. */
.ask-panel[hidden]{display:none}
.ask-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.ask-head h2{margin:0;font-size:18px}
.ask-close{
  width:40px;height:40px;border:1px solid var(--line);border-radius:11px;background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;
}
.ask-close:hover{background:#f6f3ef}
.ask-body{padding:16px 18px 26px;overflow-y:auto;flex:1 1 auto}
.ask-product{margin:0 0 4px;font-size:14px;line-height:1.45}
.ask-product strong{display:block}
.ask-sku{color:var(--muted);font-size:12px}
.ask-lead{margin:0 0 14px;color:var(--muted);font-size:13px}

.ask-channels{display:flex;flex-direction:column;gap:9px}
.ask-channel{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;border:1px solid var(--line);border-radius:13px;
  color:var(--ink);transition:border-color .15s ease,background .15s ease;
}
.ask-channel:hover{border-color:#c9c3bb;background:#faf8f5;color:var(--ink)}
.ask-channel svg{flex-shrink:0;color:#6f6a63}
.ask-channel strong{display:block;font-size:14px}
.ask-channel small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.ask-channel-whatsapp{border-color:rgba(37,211,102,.4);background:rgba(37,211,102,.06)}
.ask-channel-whatsapp:hover{border-color:#25d366;background:rgba(37,211,102,.1)}
.ask-channel-whatsapp svg{color:#1da851}

.ask-form{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.ask-form h3{margin:0 0 12px;font-size:15px}
.ask-form label{display:block;margin-bottom:5px;font-size:13px;font-weight:600}
.ask-form input[type="text"],.ask-form textarea{
  width:100%;margin-bottom:13px;padding:11px 13px;
  border:1px solid var(--line);border-radius:11px;background:#fff;
  font:inherit;font-size:14px;color:var(--ink);
}
.ask-form input:not([type=checkbox]):focus,.ask-form textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(216,35,42,.12)}
.ask-form textarea{resize:vertical;min-height:92px}
/* :user-invalid, not :invalid: a required field is invalid before it has
   been touched, and painting an untouched field red is a scolding. */
.ask-form input:user-invalid,.ask-form textarea:user-invalid{border-color:var(--red)}
.ask-submit{
  width:100%;min-height:46px;border:0;border-radius:12px;
  background:var(--red);color:#fff;font-size:15px;font-weight:800;cursor:pointer;
  transition:background .15s ease;
}
.ask-submit:hover{background:var(--red-dark)}
.ask-submit:disabled{opacity:.7;cursor:default}
.ask-small{margin:10px 0 0;color:var(--muted);font-size:11.5px;line-height:1.5}
.ask-note{margin:0 0 12px;padding:11px 13px;border-radius:11px;font-size:13.5px;font-weight:600}
.ask-note-error{background:#fdecee;color:#8c1220}
.ask-note-done{background:#eaf7ee;color:#186b34}
/* Off-screen rather than display:none: a hidden field is a signal some bots
   check for, and one that is merely positioned away is not. */
.ask-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
body.ask-open{overflow:hidden}
/* While a side panel is open, the floating buttons step aside: the
   accessibility launcher sat over the ask panel's send button and consent
   row, inside a modal dialog. The launcher is back the moment it closes. */
body.ask-open .a11y-launcher,body.ask-open .whatsapp,
body.cart-drawer-open .a11y-launcher,body.cart-drawer-open .whatsapp{visibility:hidden}

/* =========================================================
   Version 1.52: privacy consent and the cookie banner
   ========================================================= */

/* The checkbox is the same shape in all four forms it appears in. Aligned to
   the first line rather than centred: the sentence wraps to two or three
   lines on a phone and a centred box drifts away from its own label. */
.consent-row{
  display:flex;align-items:flex-start;gap:9px;
  margin:4px 0 14px;
  font-size:12.5px;line-height:1.55;color:#4a453f;
}
.consent-row input[type="checkbox"]{
  flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;
  accent-color:var(--red);cursor:pointer;
}
.consent-row label{margin:0;font-weight:400;cursor:pointer}
.consent-row a{color:var(--red);text-decoration:underline}
.consent-row a:hover{text-decoration-thickness:2px}
.consent-req{color:var(--red);font-weight:700}
/* :user-invalid, so an untouched box is not painted as an error before the
   person has had a chance to tick it. */
.consent-row input:user-invalid{outline:2px solid var(--red);outline-offset:2px}

/* --- the banner ---------------------------------------------------------- */

.cookie-banner{
  position:fixed;inset-inline:0;bottom:0;z-index:480;
  display:flex;align-items:center;gap:18px;
  padding:14px clamp(16px,4vw,40px);
  background:#1d1d1d;color:#f2efe9;
  box-shadow:0 -10px 34px rgba(20,20,20,.22);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.32,.72,.35,1);
}
.cookie-banner.is-in{transform:none}
.cookie-banner[hidden]{display:none}
/* The cart drawer and the ask panel are modal: the unanswered question waits
   under their veil. Above them, on a phone it sat exactly on the drawer's
   "מעבר לתשלום", with its own red "אישור" where that button had been. Keyed
   to the panel being shown, not to the body class, which goes as the panel
   starts to slide out: the banner then jumped over it for a moment. */
body:has(#cartDrawer:not([hidden])) .cookie-banner,body:has(#askPanel:not([hidden])) .cookie-banner{z-index:390}
.cookie-banner-text{margin:0;font-size:13px;line-height:1.6;max-width:78ch}
.cookie-banner-text a{color:#fff;text-decoration:underline;white-space:nowrap}
/* Parked at the far edge rather than trailing the sentence, so the buttons
   sit in the same place whatever the copy's length. */
.cookie-banner-actions{flex:0 0 auto;margin-inline-start:auto;display:flex;gap:10px}
.cookie-banner-accept{
  flex:0 0 auto;
  min-height:42px;padding:0 24px;
  border:0;border-radius:11px;
  background:var(--red);color:#fff;
  font-size:14px;font-weight:800;cursor:pointer;
  transition:background .15s ease;
}
.cookie-banner-accept:hover{background:var(--red-dark)}
.cookie-banner-accept:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* The same size and the same weight as the acceptance, outlined rather than
   filled. A refusal that is harder to see than the yes is not much of a
   choice; white on the banner's #1d1d1d is 16:1. */
.cookie-banner-reject{
  flex:0 0 auto;min-height:42px;padding:0 24px;
  border:1.5px solid rgba(255,255,255,.6);border-radius:11px;
  background:transparent;color:#fff;
  font-size:14px;font-weight:800;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.cookie-banner-reject:hover{background:rgba(255,255,255,.1);border-color:#fff}
.cookie-banner-reject:focus-visible{outline:3px solid #fff;outline-offset:2px}

@media(max-width:760px){
  /* Clear of the fixed contact bar, which owns the bottom 64px on a phone,
     so the banner never sits on top of the call and WhatsApp buttons. */
  .cookie-banner{
    bottom:64px;
    flex-direction:column;align-items:stretch;gap:11px;
    padding:13px 16px;
  }
  .cookie-banner-text{font-size:12.5px}
  .cookie-banner-actions{margin-inline-start:0}
  .cookie-banner-accept,.cookie-banner-reject{flex:1 1 0}
}

/* The bottom-left stack steps over the banner while it is up.

   max(), so the rule is inert without a banner: --cookie-banner-space is
   unset then, the calc collapses to the small gap, and each element keeps
   its own base offset. Each figure is that element's place in the stack
   measured from the banner's top edge: the launcher clears it by 12px, the
   WhatsApp bubble clears the launcher, and the panel clears both. They also
   animate, so the stack rides up and down with the banner rather than
   jumping. */
.whatsapp,.a11y-launcher,.a11y-panel,.saved-toast{
  transition:bottom .3s cubic-bezier(.32,.72,.35,1);
}
.whatsapp{bottom:max(90px, calc(var(--cookie-banner-space, 0px) + 82px))}
/* The launcher and panel take their offset from --a11y-stack-bottom, which
   is declared once beside them; repeating the max() here is what let the two
   drift apart in the first place. */
.saved-toast{bottom:max(24px, calc(var(--cookie-banner-space, 0px) + 12px))}

@media(max-width:760px){
  /* Same idea, against the smaller launcher and the bases that already
     clear the mobile contact bar. */
  .saved-toast{bottom:max(80px, calc(var(--cookie-banner-space, 0px) + 12px))}
}

/* Motion is a preference, not a given. */
@media(prefers-reduced-motion:reduce){
  /* The widget wholesale rather than a list of its parts: an enumeration
     goes stale the moment a control is added, and the one that mattered
     most here was .a11y-font-preview, which animates font-size -- real
     motion, not a colour fade. */
  .whatsapp,.saved-toast,.cookie-banner,.a11y-scrim{transition:none}
  /* !important because several of the widget's own rules are a class plus an
     element and would otherwise outrank a subtree selector -- the foot links
     and the profile tick kept animating under the old enumeration for exactly
     that reason. A motion preference is the visitor's, not the design's. */
  .a11y-widget,.a11y-widget *,
  .a11y-widget *::before,.a11y-widget *::after{transition:none!important}
}

/* =========================================================
   Version 1.54: offers pill moves to the header actions
   ========================================================= */

/* מבצעים left the category row to make room for a tenth department. Its old
   rules all assumed the nav row: full-height, margin-right:auto to push it to
   the far edge, and a mobile variant that turned it into a drawer row. In the
   actions row it is a pill among icon buttons, so the geometry is stated here
   rather than inherited. Not an .action-link: those are icon-over-label and
   this one is a single word that has to read as a promotion. */
.header-actions .sale-link{
  height:auto;
  margin:0;
  padding:0;
  align-self:center;
  flex:0 0 auto;
  border:0;
  background:transparent;
}
.header-actions .sale-link span{
  display:inline-flex;align-items:center;
  height:34px;padding:0 15px;
  border-radius:999px;
  color:var(--red);
  font-size:13.5px;font-weight:800;
  white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.header-actions .sale-link:hover span{background:var(--red);color:#fff}
.header-actions .sale-link:focus-visible{outline:0}
.header-actions .sale-link:focus-visible span{outline:2px solid var(--red);outline-offset:2px}

/* On a phone the actions row holds the account and cart buttons and little
   else; the pill keeps its place but gives up its padding rather than
   pushing the cart off the edge. */
@media(max-width:760px){
  .header-actions .sale-link span{height:30px;padding:0 11px;font-size:12px}
}
@media(max-width:420px){
  .header-actions .sale-link span{padding:0 9px;font-size:11.5px}
}
/* Below 375px the row is genuinely full: logo, menu button, account and cart
   already spend everything the container has, and the pill pushed the cart
   off the edge by 6px at 360 and 46px at 320. Measured, not guessed. The
   promotion gives way rather than the basket, and it is still one tap away
   through the categories menu. */
@media(max-width:374px){
  .header-actions .sale-link{display:none}
}

/* =========================================================
   Version 1.55: average rating stars
   ========================================================= */

/* A partial star for the overall score. Two identical rows stacked, the gold
   one clipped by width to the percentage: no half-star glyph to draw and no
   rounding, so 4.4 renders as 4.4 and not as "four and a bit".

   direction:ltr on purpose. The row is a gauge, not a sentence: it fills from
   the same edge as every other rating widget a shopper has seen, including
   Google's own, and inheriting RTL here would fill it from the wrong end. */
.review-stars-avg{
  position:relative;
  display:inline-block;
  direction:ltr;
  line-height:0;
  flex:0 0 auto;
}
.review-stars-avg .review-stars-base{color:#dcd7cf}
.review-stars-avg .review-stars-fill{
  position:absolute;
  top:0;left:0;
  overflow:hidden;
  white-space:nowrap;
  color:#f0a500;
}

/* .reviews-summary is gone: the score moved into .reviews-trust, where the
   link is .reviews-all rather than the score line itself. */

/* =========================================================
   Version 1.56: header refinement
   =========================================================
   The header had accumulated eight waves of overrides, each correcting the
   one before, so its geometry was decided in eight places and no single one
   described it. This block is the last word on that geometry: same
   selectors, same breakpoints, no markup or JS contract touched. Sizes come
   from three custom properties so the three bands are set once and the
   header can be retuned by editing three numbers.

   Measured before: 196px of chrome (36 + 104 + 54). After: 162px, a 17%
   reduction, with more air around every element rather than less.

   2026-09 product-page handoff: 33 + 104 + 43 + the 1px rule = 181px, the
   prototype's own measurement. Everything the handoff changes is scoped to
   761px and up; the phone header keeps its values, restated in section 5
   where a desktop value now sits in an unscoped rule.
   ========================================================= */

:root{
  --hdr-main-h:104px;     /* logo, search, actions                 */
  --hdr-nav-h:43px;       /* category row: 35px items on an 8px foot */
  --hdr-ease:140ms cubic-bezier(.4,0,.2,1);
}

/* --- 1. utility bar ------------------------------------------------------
   A real utility bar: one line of quiet reassurance on one side, the two
   things a shopper might act on at the other. The hierarchy is carried by
   colour rather than by size, so the strip stays one calm band.

   v1.101: the band was black, and a black bar above a white header above a
   white category row is most of what read as "layers" on this page. Light
   now, so the three bands read as one header. The strip also lost the phone
   number, which appeared here, in the pickup sentence beside it, and again
   in the actions row below -- three copies of one number in 164px of chrome.
   It survives once, in the actions row, as digits rather than as the words
   "ייעוץ טלפוני".

   2026-09 handoff: white, with its rule drawn under the container rather
   than across the window, #4A4A4A text (8.86:1), and a 16px icon on each
   point in place of the dots between them. 13px type, 8px above and below
   a 16px line, and the rule: 33px, which is --announce-h at the top of the
   file. That variable is also what .site-header uses for its sticky `top`,
   so the height is never restated here: a second source for the same number
   would let the header detach from the strip the first time one changed. */
@media (min-width:761px){
  .announcement{background:#fff;border-bottom:0;color:#4A4A4A;font-size:13px}
  .announcement-inner{gap:8px 32px;flex-wrap:wrap;border-bottom:1px solid #F0EEEB}
  .announcement-points{gap:6px 24px;color:#4A4A4A;font-weight:400}
  .ann-point{display:inline-flex;align-items:center;gap:6px}
  .ann-point svg{width:16px;height:16px;flex:0 0 auto}
  /* .announcement-phone is gone from the markup; the address is what is
     left. The link carries the colour so the pin, drawn in currentColor,
     follows it; it used to inherit the black bar's white. */
  .announcement-contact{gap:10px}
  .announcement-contact a{gap:6px;color:#4A4A4A}
  .announcement-contact svg{width:16px;height:16px;color:currentColor}
  .announcement-address span{color:inherit;font-weight:400}
  .announcement-address:hover span{color:#171717}
}

/* --- 2. the main row -----------------------------------------------------
   Logo, search and actions on one optical baseline. The row height is the
   only thing that sets the band; every child centres inside it instead of
   propping it open, which is what made the old one feel loose. */
@media (min-width:761px){
  .site-header{border-bottom-color:#E6E4E1}
  .header-main{height:var(--hdr-main-h);align-items:center;gap:32px}

  /* Logo. Because the compact file's viewBox is cropped to the ink, every
     pixel of its height is wordmark -- the old 58px box spent 16 of them on
     a Hebrew line too small to read.

     v1.107: 66 to 74, and the row 82 to 86 to carry it. The mark was set
     smaller than every other element in the row was heavy -- a 50px search
     field with a red button beside it, a black category tab under it -- so
     the shop's own name was the quietest thing in its own header.

     2026-09 handoff: 84px in a 104px row, 10px of air above and below. The
     source is an SVG, so no size is a stretch. The small lift on hover is
     gone: the handoff allows no motion beyond colour and the sticky bar, and
     .logo:hover{transform:none} in the integration layer stands again. */
  .logo,.logo:hover,.logo:focus-within{height:84px}
  .logo img,.logo .custom-logo{height:100%;width:auto;max-width:none;object-fit:contain}

  /* Search: the way into 8,536 products and the widest thing in the row.

     v1.101 capped it at 760px, and 600 before that, because past ~600px a
     field starts to read as a banner. The handoff lets it take everything
     the logo and the actions leave, at every desktop width. At 1440 that is
     697px, six short of what the cap gave, so the cap and the smaller ones
     in section 4 go. */
  .header-main>.search{max-width:none}
}

/* The field. v1.56 squared it off, reading a curved search box as the
   clearest "template" tell; the handoff is a pill, in a warmer white than
   the row with a darker hairline than the old field, and the phone keeps
   the squarer field in section 5. The focus state is not in the handoff and
   stays: it is the field's visible focus. */
.site-header .search{height:50px;border-radius:999px;background:#FAFAF9;border-color:#D9D6D2}
.site-header .search:focus-within{
  /* The edge itself, and a halo in the same red. A text input matches
     :focus-visible however it was reached -- a browser assumes anyone in a
     text field is about to type -- so the site's 3px ring cannot be kept for
     the keyboard alone here, and a red band around the widest control in the
     header on every click is what the owner was looking at while typing.
     #D8232A on white is 5.01:1, so the state is visible at a glance and
     reads as a live field rather than as an error. */
  background:#fff;border-color:var(--red);box-shadow:0 0 0 3px rgba(216,35,42,.16);
}
.site-header .search input{font-size:15px;font-weight:400}
/* --muted, not the handoff's #767676, which is 4.35:1 on #FAFAF9. */
.site-header .search input::placeholder{color:var(--muted);font-weight:400}
/* The icon and the button are children of WooCommerce's form, not of the
   .search box, so they are selected through it. The v1.56 rules wrote
   .search>svg and .search>button, which matched nothing but the bare
   fallback form: the icon and the button kept the integration layer's older
   sizes, and the button was 16px bold. The button sits 8px from the input
   and 5px inside the pill, so the field reads as one control. The icon is
   not text, so its grey is not held to 4.5:1. */
@media (min-width:761px){
  .site-header .search form>svg{width:22px;height:22px;margin-inline:16px 10px;color:#767676}
  .site-header .search input{padding:0}
  .site-header .search form>button{
    height:38px;min-width:0;padding:0 20px;margin-inline:8px 5px;
    border-radius:999px;font-size:14px;font-weight:600;line-height:1;
    transition:background var(--hdr-ease);
  }
}

/* Actions: one family. Same icon size, same label size, same hit area, one
   gap. They were four controls that happened to be adjacent.

   2026-09 handoff: an icon over a label, 24px over 12px, in ink, 92px wide
   at the least; red text on the #F6F5F3 wash on hover (4.60:1).

   Every rule here excludes .header-actions-checkout. The checkout reuses the
   same .header-actions class for a completely different row -- two labelled
   back buttons, a secure-payment note and the phone -- with its own 20px gap
   and 14px inline type. Left unscoped, these rules won on source order and
   squeezed that row to a 2px gap. */
.header-actions:not(.header-actions-checkout){gap:8px;align-items:center}
.header-actions:not(.header-actions-checkout) .action-link{
  min-width:92px;height:auto;padding:7px 10px;
  gap:5px;border-radius:10px;border:0;
  color:#171717;
  transition:background var(--hdr-ease),color var(--hdr-ease);
}
.header-actions:not(.header-actions-checkout) .action-link svg{width:24px;height:24px;stroke-width:1.6}
/* .icon-brand was the WhatsApp mark, sized down two pixels because a filled
   glyph outweighs a stroked one. The button left this row in v1.101; the rule
   stays because the checkout header still uses the same class. */
.header-actions .action-link .icon-brand{width:18px;height:18px}
.header-actions:not(.header-actions-checkout) .action-link span{font-size:12px;font-weight:500;line-height:1}
/* The number rather than a word for it. Tabular figures so it does not
   shift, and isolated LTR so it is not mirrored in a Hebrew row. */
.header-actions:not(.header-actions-checkout) .action-phone span{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;unicode-bidi:isolate;direction:ltr}
.header-actions:not(.header-actions-checkout) .action-link:hover{background:#F6F5F3;color:var(--red)}
.header-actions:not(.header-actions-checkout) .action-link:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
/* One label for each width: see header.php. */
@media (min-width:761px){
  .action-link .label-short{display:none}
}

/* The count stays small, sharp and unmissable, and it is anchored to the
   icon's own corner, not the button's: 50% minus a fixed offset lands on
   the icon's edge whatever the column width. The handoff puts it top RIGHT
   of the bag, 7px above it and 11px past its edge, which in a 92px column
   is the button's top and 23px right of centre. The white ring is a shadow
   outside the 18px disc rather than a border inside it. */
@media (min-width:761px){
  .header-actions .cart-button b.cart-count{
    top:0;right:calc(50% - 23px);left:auto;
    min-width:18px;height:18px;padding:0 5px;
    border:0;box-shadow:0 0 0 2px #fff;
    font-size:11px;font-weight:700;line-height:18px;
  }
}

/* Offers: brand red, but a considered control rather than a pink lozenge.
   Outlined at rest so it sits quietly beside the icon buttons, solid on
   hover so the affordance is unmistakable. A phone control now: on the
   desktop מבצעים is the last item of the category row, so this pill is
   hidden from 761px up and only one of the two ever shows. */
/* Two leftovers from the years this lived at the end of the category row,
   both of which threw it to the far end of the actions group, away from
   everything it belongs with: margin-right:auto, which pushes a flex item as
   far as it will go, and order:3, which places it after every sibling. Reset
   both, then set the one gap it actually needs.

   min-height carries the tap target: the visible box stays 32px, which is
   the right weight beside the icons, while the anchor around it reaches the
   comfortable 44px. No `display` here on purpose -- the anchor is already
   inline-flex from the base rule, and restating it would outrank the
   max-width:374px rule that hides this button on the narrowest phones,
   where it pushes the cart off screen. */
.header-actions .sale-link{
  order:0;margin:0;margin-inline-end:8px;
  min-height:44px;
}
.header-actions .sale-link span{
  height:32px;padding:0 14px;
  border:1px solid var(--red);border-radius:7px;
  background:transparent;color:var(--red);
  font-size:12.5px;font-weight:700;letter-spacing:.01em;
  transition:background var(--hdr-ease),color var(--hdr-ease);
}
.header-actions .sale-link:hover span{background:var(--red);color:#fff}
@media (min-width:761px){
  .header-actions .sale-link{display:none}
}

/* --- 3. category row -----------------------------------------------------
   2026-09 handoff: twelve items on one line, spread edge to edge --
   כל הקטגוריות, the ten departments, מבצעים -- each 35px tall on an 8px
   foot. The departments' wrapper becomes display:contents so they are flex
   items of the row itself, which is what lets space-between spread all
   twelve; !important because two earlier layers force the wrapper to flex
   with !important, and its phone rule, display:none!important, sits in a
   max-width block this one never reaches. .nav-all is reset to order 0: an
   earlier layer gives it 1, and with the wrapper gone that would drop it
   after the departments. Capacity at each width is in the "Header row
   capacity" block.

   min-height as well as height on both: earlier rules in this same
   breakpoint pin .nav-inner and .main-nav to 52px, and min-height beats
   height whatever the source order. Scoped to desktop because on a phone
   .main-nav is the full-height drawer and must keep its own sizing. */
@media (min-width:761px){
  .nav-inner{justify-content:space-between;align-items:flex-start;gap:4px;padding:0 0 8px;height:var(--hdr-nav-h);min-height:var(--hdr-nav-h)}
  .main-nav{min-height:var(--hdr-nav-h)}
  .category-quick-nav{display:contents!important}
  .nav-all{order:0}
  /* Never shrink. A department squeezed below its label overlaps the next
     one; the capacity steps drop whole departments instead. */
  .quick-category{flex:0 0 auto}
}
/* No rule between the main row and the categories: they are one header,
   and a hairline across it was the third horizontal division in 162px. */
.main-nav{border-top:0}

/* Departments: 14px regular in ink, a 16px grey caret, and no underline.
   Most are <button>s now (see header.php), so the button face is cleared
   first. The line height is set rather than inherited so the box is the
   handoff's 35px, not Heebo's 40. The padding is lopsided on purpose: 6px
   on the label's side, 8px beyond the caret. */
@media (min-width:761px){
  .quick-category-link{
    height:35px;margin:0;padding:9px 6px 9px 8px;gap:2px;
    border:0;border-radius:8px;background:none;
    font-size:14px;font-weight:400;line-height:17px;letter-spacing:0;color:#171717;
    transition:color var(--hdr-ease),background var(--hdr-ease);
  }
  .quick-category-link span{overflow:visible;text-overflow:clip}
  /* 14px, not the handoff's 16: ten carets at 16px take 160px of a row that
     had five pixels between departments, and at this size the caret still
     reads as one. */
  .quick-category-link svg{width:14px;height:14px;color:#767676;stroke-width:1.8;transition:color var(--hdr-ease),transform var(--hdr-ease)}
  /* The department row spans the content width itself. The container's 24px
     of side padding belongs to text columns; here it was two more gaps'
     worth of air taken from between the words. */
  .main-nav .nav-inner{padding-inline:0;max-width:none}
  /* Hover is the lighter wash. Open and the current department share the
     darker pill, and the current one also sets its label in 600, so it
     reads as "you are here" even while another panel is open. The text is
     ink in every state: red on #F3F1EE is 4.44:1. :focus-within opens a
     panel for the keyboard, so it wears the open state too, except once
     Escape has dismissed it. */
  .quick-category:hover>.quick-category-link{background:#F6F5F3;color:#171717}
  .quick-category.open>.quick-category-link,
  .quick-category.has-children:not(.escaped):focus-within>.quick-category-link,
  .quick-category.is-active>.quick-category-link{background:#F3F1EE;color:#171717}
  .quick-category.is-active>.quick-category-link span{font-weight:600}
  .quick-category.open>.quick-category-link svg,
  .quick-category.has-children:not(.escaped):focus-within>.quick-category-link svg{transform:rotate(180deg);color:#171717}
}

/* מבצעים, last in the row. Red on white is 5.01:1; on its --red-soft wash
   --red falls to 4.38:1, so the word darkens to --red-dark on hover. It
   never shrinks: it sits at the end .main-nav's overflow clip would cut
   first. Below 761px this nav is the drawer, which has its own מבצעים in
   its foot, and display:none also keeps the link out of the drawer's focus
   trap, which skips anything without an offsetParent. */
@media (min-width:761px){
  .nav-sale{
    flex:0 0 auto;padding:9px 8px;border-radius:8px;
    color:var(--red);font-size:14px;font-weight:600;line-height:17px;white-space:nowrap;
    transition:background var(--hdr-ease),color var(--hdr-ease);
  }
  .nav-sale:hover{background:var(--red-soft);color:var(--red-dark)}
}
@media (max-width:760px){
  .nav-sale{display:none}
}

/* All categories: the one dark control in the row, and still obviously the
   main trigger. The handoff's 14px medium between an 18px grid and an 18px
   caret; the caret's extra 2px puts it 8px from the label. No fixed width
   any more: the label sets it, and the row's spacing does the rest. The
   hover is not in the handoff and stays. */
@media (min-width:761px){
  /* 2026-09-30, the owner: it read as tight. Rounded like the search
     button beside it, more room inside and before the first department;
     and a caret instead of the grid, like every other department in the row
     that opens a menu -- the dark fill already sets this one apart. */
  .nav-trigger.all-categories{
    min-width:0;height:34px;margin-inline-end:14px;padding:0 18px;padding-inline:18px 14px;gap:8px;
    border-radius:999px;background:#171717;
    font-size:14px;font-weight:600;line-height:18px;letter-spacing:0;
    transition:background var(--hdr-ease);
  }
  .nav-trigger.all-categories svg{width:18px;height:18px;flex:0 0 auto}
  .nav-trigger.all-categories > svg:not(.chevron){display:none}
  .nav-trigger.all-categories .chevron{display:block;opacity:1;margin:0}
  .nav-all[data-dropdown]:hover .nav-trigger.all-categories,
  .nav-trigger.all-categories:hover{background:#2b2b2b}
}

/* --- 4. smaller desktops -------------------------------------------------
   Same three bands, stepped down together so the proportions hold rather
   than the logo shrinking on its own. The handoff draws only the full
   width; below it the row and the mark go 92/72 and then 80/60, and the
   search takes whatever is left, as it does at full width. */
@media (min-width:761px) and (max-width:1180px){
  :root{--hdr-main-h:92px}
  .logo,.logo:hover,.logo:focus-within{height:72px}
}
@media (min-width:761px) and (max-width:920px){
  :root{--hdr-main-h:80px}
  .header-main{gap:24px}
  .logo,.logo:hover,.logo:focus-within{height:60px}
}

/* --- 5. phones -----------------------------------------------------------
   Priority here is logo, search, cart, menu. Nothing from the desktop row
   is forced in; the touch targets grow rather than shrink. The handoff has
   no phone header, so where its values sit in an unscoped rule above, the
   phone's own are restated here and the phone header is unchanged. */
@media (max-width:760px){
  .announcement{font-size:11.5px}
  .announcement-inner{gap:20px}
  .announcement-points{gap:9px;color:#6f6a63;font-weight:400;letter-spacing:.005em}
  .ann-point svg{display:none}
  .announcement-contact{gap:10px}
  .announcement-contact a{gap:6px}
  .announcement-contact svg{width:13px;height:13px;color:#a09a92}
  .announcement-address span{color:#5f5a54;font-weight:400}
  .announcement-address:hover span{color:#201e1c}
  .site-header .search{height:44px;border-radius:10px;background:#f6f5f2;border-color:#ddd8d0}
  .site-header .search input::placeholder{color:var(--muted)}
  .site-header .search>button{height:34px;min-width:66px;font-size:13px}
  .header-actions:not(.header-actions-checkout){gap:2px}
  .header-actions:not(.header-actions-checkout) .action-link{min-width:52px;height:46px;padding:0 8px;border-radius:8px;color:#3d3833}
  .header-actions:not(.header-actions-checkout) .action-link svg{width:21px;height:21px;stroke-width:1.7}
  .header-actions:not(.header-actions-checkout) .action-link span{font-size:10px;font-weight:600;letter-spacing:.01em}
  .header-actions:not(.header-actions-checkout) .action-link:hover{background:#f6f5f2;color:#171717}
  .action-link .label-full{display:none}
  .header-actions .cart-button b.cart-count{
    top:3px;left:5px;right:auto;
    min-width:17px;height:17px;
    border-width:2px;font-size:10px;line-height:13px;font-weight:700;
  }
}

/* --- compact lockup: sizes that depend on it ---------------------------- */


/* Phones. The compact mark is 2.22:1 where the bilingual one was 1.64:1, so
   at the same height it is wider; the column grows to match rather than the
   logo shrinking to fit the old one. Height still rises, because none of it
   is spent on a line nobody could read. */
@media(max-width:760px){
  .header-main{grid-template-columns:42px auto 1fr}
  .logo,.logo:hover{width:auto;height:56px;padding:0}
  .logo img{height:100%;width:auto;max-width:none;max-height:100%}
}
@media(max-width:400px){
  .logo,.logo:hover{height:48px}
}

/* Version 1.65: price, availability and sale filters.

   The rows reuse .brand-row wholesale, so there is nothing here about how a
   filter row looks; these are only the few things the new groups need that a
   manufacturer list did not. */

/* The first group sits directly under the panel title, where the manufacturer
   group used to, so it must not draw a rule above itself. */
.filters .filter-group:first-of-type{border-top:0;margin-top:0;padding-top:0}

/* A band label is longer than a brand name and must never be clipped to
   "1,000 ₪ - 3,50…". The count keeps its own column; the label wraps. */
.filter-group-price .brand-row{align-items:flex-start;padding-top:5px;padding-bottom:5px}
.filter-group-price .brand-row-name{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.filter-group-price .brand-row-mark{margin-top:2px}
.filter-group-price .brand-row-n{margin-top:1px}

/* Numerals inside an RTL line: the price range is read left to right even
   here, and without this the two ends of "1,000 ₪ - 3,500 ₪" swap. */
.filter-group-price .brand-row-name{unicode-bidi:isolate}

@media(max-width:760px){
  .filter-group-price .brand-row{min-height:40px}
}

/* Version 1.71: the filter sidebar scrolls with the page.

   It was sticky, and correctly so -- it held through the grid and let go at
   its end. The shop wants it to scroll away instead, which also settles the
   problem the sticky version had: capped to the viewport it needed an inner
   scrollbar, and on a 720px screen 273px of the panel sat behind it, the
   price group among them. Standing in the flow, the whole panel is simply
   there.

   Desktop only. Below 761px .filters is the off-canvas drawer and must keep
   its fixed positioning. */
@media(min-width:761px){
  .filters{
    position:static;
    top:auto;
    max-height:none;
    overflow-y:visible;
  }
}

/* Version 1.72: the sub-department strip says how much of it there is.

   It was one nowrap row with a hidden scrollbar, so a department with more
   chips than fit simply ended mid-word at the edge and gave a shopper no
   reason to think anything followed. תופים וכלי הקשה has twenty-four
   sub-departments; eleven were visible and the rest were invisible in every
   sense.

   On the desktop the row now wraps. Nine of the twelve departments still sit
   on one line and look exactly as before; the three that overflow gain a
   second or third line and show everything they have. */
@media(min-width:761px){
  .shop-category-links{flex-wrap:wrap;overflow-x:visible;row-gap:9px;padding-block:14px}
}

/* On a phone wrapping would turn twenty-four chips into a wall, so the row
   keeps scrolling and is given the edge it was missing. A shopper sees the
   strip stop short of the border and reads it as "there is more this way",
   which is the whole point; the fade is a scroll affordance, not decoration,
   and it disappears the moment the row fits. */
@media(max-width:760px){
  .shop-category-links{
    -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent);
            mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent);
  }
  /* The strip is one flex line, so a trailing spacer is what stops the last
     chip being cut in half by the mask it is meant to be revealed through. */
  .shop-category-links:after{content:"";flex:0 0 22px}
}

/* Version 1.73: gift cards.

   The chooser sits where the price and quantity row normally is, so it reads
   as part of buying rather than as a form bolted underneath. The add-to-cart
   form is a wrapping flex row, so the fields claim a full line of it and the
   stepper and the buttons keep the row beneath. */
.gc-fields{flex:1 0 100%;display:flex;flex-direction:column;gap:16px;margin:4px 0 20px}
/* The card's price is a sentence and not a number -- "50 ₪ ומעלה" -- so the
   40px the rest of the catalogue now prices at puts the word "ומעלה" at the
   size of the figure and the line reads as a price with a tail. 28px is the
   size this block was drawn at. :has() rather than a body class, the same
   way .gc-other-wrap below finds the card it belongs to. */
.woocommerce div.product .summary:has(.gc-fields) p.price{font-size:28px}
.gc-field{display:flex;flex-direction:column;gap:7px}
.gc-label{font-size:12.5px;font-weight:800;color:#45413d}
.gc-field small{font-size:11.5px;color:var(--muted);line-height:1.5}
.gc-field input[type=text],.gc-field input[type=email],.gc-field input[type=number],.gc-field textarea{
  width:100%;min-height:44px;padding:10px 13px;border:1px solid var(--line);border-radius:11px;
  background:#fff;font:inherit;font-size:13.5px;color:#201e1c;outline:0;transition:border-color .14s ease,box-shadow .14s ease}
.gc-field input:focus,.gc-field textarea:focus{border-color:#aaa39a;box-shadow:0 0 0 3px rgba(25,25,25,.05)}
.gc-field textarea{min-height:64px;resize:vertical;line-height:1.5}
.gc-field-split{flex-direction:row;gap:10px}
.gc-field-split label{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}

/* The amounts are radios drawn as chips: one choice, and the native input
   keeps the keyboard and the screen reader working. */
.gc-amounts{display:flex;flex-wrap:wrap;gap:8px}
.gc-amount{position:relative}
.gc-amount input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.gc-amount span{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 17px;
  border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:13.5px;font-weight:700;
  color:#45413d;transition:.14s ease;cursor:pointer}
.gc-amount input:hover+span{border-color:#aaa39a}
.gc-amount input:checked+span{border-color:var(--red);background:var(--red);color:#fff}
.gc-amount input:focus-visible+span{box-shadow:0 0 0 3px rgba(216,35,42,.25)}

/* The free field only concerns someone who asked for it. */
.gc-other-wrap{display:none}
.gc-fields:has(.gc-amount-other input:checked) .gc-other-wrap{display:block}

/* What the buyer is handed, on the thank-you page and in the account. */
.gc-issued{margin:26px 0;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff}
.gc-issued h2{margin:0 0 14px;font-size:18px}
.gc-card{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:14px 16px;margin-bottom:9px;
  border:1.5px dashed var(--red);border-radius:12px;background:#fffaf9}
.gc-card-amount{font-size:20px;font-weight:800;color:var(--red)}
.gc-card-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;font-weight:700;
  letter-spacing:1.5px;direction:ltr;unicode-bidi:isolate;padding:5px 11px;border-radius:8px;background:#fff;border:1px solid var(--line)}
.gc-card-to{font-size:12.5px;color:var(--muted)}
.gc-issued-note{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6}

@media(max-width:600px){
  .gc-field-split{flex-direction:column}
  .gc-card{gap:8px}
  .gc-card-code{font-size:15px}
}

/* Version 1.79: the order received page.

   Since 1.168.0 the page is the 2026-10 design and its rules are in
   assets/css/thank-you.css, loaded on that page alone. What stays here is
   the one rule another page uses: the price beside a collection line, which
   shechter_ty_shipping_line() also prints in the account's order view. */
.ty-ship-cost{font-weight:600;color:var(--muted)}

/* Version 1.82: finding the way back out of a category.

   The trail runs on category archives too, in .shop-hero, and looks as it
   does on a product: the rules in the shop block above reach it, because an
   archive's body carries .woocommerce as well. The rules that used to stand
   here were written as if it did not, and lost their size, margin and link
   colour to the !important ones that were there. Only its spacing is its
   own. The hero's padding already sits above it, so it keeps the 20px it has
   had over the title instead of the product page's 18 and 22. */
.shop-hero .woocommerce-breadcrumb{padding:0;margin-bottom:20px}

/* You are here. The strip lists siblings once a category has no children of
   its own, and without this the row gives no clue which one you are looking
   at. Not a link-coloured chip: it is still a link, it is just the one you
   are already on. */
.shop-category-links a.is-current{border-color:#171717;background:#171717;color:#fff;cursor:default}
.shop-category-links a.is-current:hover{transform:none}

/* ===== Gift card delivery, said on the receipt =====

   A card bought for someone else is the only purchase in the shop whose
   value reaches a person other than the buyer, so a mail that fails takes
   the whole present with it -- and the recipient, having never been told,
   has no way to notice. The buyer's receipt is the one place that failure
   can still be caught, which is why the unsent state is styled to be read
   rather than skimmed: full width on its own line, in the warning colour,
   while the success line stays quiet at the size of a footnote. */
.gc-card-sent{flex-basis:100%;font-size:12.5px;color:var(--muted)}
.gc-card-unsent{flex-basis:100%;font-size:13px;line-height:1.6;font-weight:600;
  color:#8a2b26;padding:9px 12px;border-radius:10px;background:#fdf1f0;border:1px solid #f3d3d1}

/* --------------------------------------------------------------------------
   Pickup point picker
   --------------------------------------------------------------------------
   Sits under the shipping rates in both the cart and the checkout. The
   unchosen state is deliberately loud: an order that reaches payment without
   a point is refused by the server, so the shopper needs to notice the
   button before they get that far, not after.
   -------------------------------------------------------------------------- */
.shechter-pp{margin:10px 0 4px;padding:12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-soft)}
.shechter-pp-status{margin:0 0 9px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.shechter-pp-status.is-chosen{color:var(--ink);font-weight:600;unicode-bidi:isolate}
.shechter-pp-error{margin:0;font-size:13.5px;color:var(--red-dark)}
.shechter-pp-button{appearance:none;border:1px solid var(--ink);background:var(--surface);color:var(--ink);
  font:inherit;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:999px;cursor:pointer;
  transition:background .15s ease,color .15s ease}
.shechter-pp-button:hover:not(:disabled){background:var(--ink);color:var(--surface)}
.shechter-pp-button:disabled{opacity:.55;cursor:default}
.shechter-pp-button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.shechter-pp-summary{margin-top:22px}
.shechter-pp-summary h3{margin:0 0 6px;font-size:15px}
.shechter-pp-summary p{margin:0;unicode-bidi:isolate}
.shechter-pp-hours{margin:-4px 0 9px;font-size:12.5px;line-height:1.45;color:var(--muted);unicode-bidi:isolate}
.shechter-pp-summary .shechter-pp-hours{margin:4px 0 0}

/* --------------------------------------------------------------------------
   Checkout address layout
   --------------------------------------------------------------------------
   The blocks address form is a wrapping flexbox with a 12px column gap;
   "full width" there is flex:0 0 100% and "half" is flex:1 0 calc(50% - 12px).
   Both idioms are reused below rather than replaced, so the rows keep lining
   up with the ones WooCommerce draws for itself.

   Two things need CSS and cannot be done in PHP. Registered fields always
   render after every core field, which would leave מספר stranded below the
   phone number, so the reading order is restored with `order`. And the
   country selector ignores a `hidden` locale entry, so it is hidden here; the
   shop sells to one country and the field is pre-set to it, which makes it an
   obstacle rather than a question.

   The widths carry the form and both input classes because WooCommerce sets
   its own flex from a more specific selector, and `order` alone was landing
   while the widths silently were not. Specificity rather than !important, so
   a later rule can still win honestly.
   -------------------------------------------------------------------------- */
.wc-block-components-address-form__country{display:none}

.wc-block-components-address-form__first_name{order:1}
.wc-block-components-address-form__last_name{order:2}
.wc-block-components-address-form__city{order:3}
.wc-block-components-address-form__address_1{order:4}
.wc-block-components-address-form__shechter-house-number{order:5}
.wc-block-components-address-form__shechter-apartment{order:6}
.wc-block-components-address-form__shechter-floor{order:7}
.wc-block-components-address-form__shechter-entrance{order:7}
.wc-block-components-address-form__phone{order:8}

.wc-block-components-address-form .wc-block-components-text-input.wc-block-components-address-form__city{flex:0 0 100%}
.wc-block-components-address-form .wc-block-components-text-input.wc-block-components-address-form__address_1{flex:1 0 calc(66% - 12px)}
.wc-block-components-address-form .wc-block-components-text-input.wc-block-components-address-form__shechter-house-number{flex:1 0 calc(34% - 12px)}
.wc-block-components-address-form .wc-block-components-text-input.wc-block-components-address-form__shechter-apartment,
.wc-block-components-address-form .wc-block-components-text-input.wc-block-components-address-form__shechter-floor,
.wc-block-components-address-form .wc-block-components-text-input.wc-block-components-address-form__shechter-entrance{flex:1 0 calc(33% - 12px)}
.wc-block-components-address-form .wc-block-components-text-input.wc-block-components-address-form__phone{flex:0 0 100%}

/* Narrow screens.

   WooCommerce drops the form to display:block below its own breakpoint,
   which quietly makes both `order` and every flex width above inert: the
   fields fall back to source order, and מספר lands under the phone again.
   Flex is restored here with the same 12px column gap, and the two pairs
   that read as one line are kept on one line. A house number never needs a
   full row, and splitting it off costs a whole scroll step. Names stay
   stacked, which is what WooCommerce intended at this width. */
@media (max-width:660px){
  .wc-block-components-address-form{display:flex;flex-wrap:wrap;column-gap:12px}
  .wc-block-components-address-form .wc-block-components-text-input.wc-block-components-address-form__first_name,
  .wc-block-components-address-form .wc-block-components-text-input.wc-block-components-address-form__last_name{flex:0 0 100%}
  .wc-block-components-address-form .wc-block-components-text-input.wc-block-components-address-form__address_1{flex:1 0 calc(60% - 12px)}
  .wc-block-components-address-form .wc-block-components-text-input.wc-block-components-address-form__shechter-house-number{flex:1 0 calc(40% - 12px)}
  /* The contact form is the same component: its e-mail shrank to its content. */
  .wc-block-components-address-form > .wc-block-components-text-input.wc-block-components-address-form__email{flex:1 0 100%}
}

/* Phone payment: the explanation under the option. Muted like other
   secondary copy, because it is context and not an instruction to act on. */
.shechter-phone-pay p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* --------------------------------------------------------------------------
   Font-zoom width correction
   --------------------------------------------------------------------------
   The accessibility font control scales the page with `zoom`. zoom multiplies
   content but not the window, so anything sized off the viewport (the
   container max-width, the WooCommerce cart block, the announcement row)
   overflows and the page scrolls sideways. theme.js publishes --a11y-vw: the
   real usable width already divided by the zoom factor, so re-deriving these
   widths from it lands them back inside the window at every step.
   -------------------------------------------------------------------------- */
html.a11y-zoomed .container{max-width:var(--a11y-vw)}
html.a11y-zoomed .announcement .container{width:var(--a11y-vw)}
html.a11y-zoomed .wp-block-woocommerce-cart,
html.a11y-zoomed .wp-block-woocommerce-checkout{max-width:var(--a11y-vw);overflow-x:hidden}
html.a11y-zoomed .announcement-contact{min-width:0}
html.a11y-zoomed body{overflow-x:hidden}

/* The mobile header was the one row the width correction did not reach. Its
   three grid tracks are sized from their content, so capping the container at
   --a11y-vw did nothing: at 150% the tracks still totalled 337px inside a
   260px box and the row hung 158px off the start edge. With body's overflow
   hidden there was no scrollbar to reach it either, so the phone, account and
   cart controls were simply cut off -- the font-size button making the cart
   unreachable is a worse failure than the small text it was pressed to fix.
   Letting the tracks shrink and the row wrap keeps every control on screen at
   every step. */
html.a11y-zoomed .header-main{max-width:var(--a11y-vw)}
html.a11y-zoomed .header-main>*{min-width:0}
html.a11y-zoomed .header-actions{min-width:0;flex-wrap:wrap;row-gap:4px}
html.a11y-zoomed .header-actions .action-link{min-width:0}
/* The floating chrome lives inside the zoomed body and would scale with it:
   the panel was cut off past the screen edge and the launcher ballooned.
   zoom compounds, so the inverse factor puts each back at designed size. */
html.a11y-zoomed .a11y-widget,
html.a11y-zoomed .a11y-scrim,
html.a11y-zoomed .whatsapp,
html.a11y-zoomed .a11y-guide-bar,
html.a11y-zoomed .a11y-mask-top,
html.a11y-zoomed .a11y-mask-bottom,
html.a11y-zoomed .mobile-contact-bar{zoom:var(--a11y-unzoom,1)}
html.a11y-zoomed body.a11y-speak-on::after{zoom:var(--a11y-unzoom,1)}

/* --------------------------------------------------------------------------
   Read-aloud
   --------------------------------------------------------------------------
   Two states on the block under the pointer: a soft candidate outline while
   the dwell counts down, and a solid highlight while it is actually being
   spoken. Both are drawn with outline and a tinted background so they never
   shift the layout the way a border would.
   -------------------------------------------------------------------------- */
body.a11y-speak-on .a11y-speak-hover{
  outline:2px dashed #006bb6;outline-offset:2px;border-radius:4px;
  background:rgba(0,107,182,.06);cursor:pointer;
}
body.a11y-speak-on .a11y-speaking{
  outline:3px solid #006bb6;outline-offset:2px;border-radius:4px;
  background:rgba(0,107,182,.12);
}
/* A quiet hint the first moments the mode is on, so it is clear what to do. */
body.a11y-speak-on::after{
  content:"עברו עם העכבר על טקסט כדי להקריא אותו";
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9997;
  background:#006bb6;color:#fff;font-size:13px;font-weight:700;
  padding:9px 16px;border-radius:999px;box-shadow:0 8px 24px rgba(20,20,20,.22);
  pointer-events:none;animation:a11ySpeakHint 5s ease forwards;
}
@keyframes a11ySpeakHint{0%,70%{opacity:1}100%{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){
  body.a11y-speak-on::after{animation:none;opacity:0;visibility:hidden}
}

/* --------------------------------------------------------------------------
   Card add-to-cart: quantity stepper + self-confirming button
   --------------------------------------------------------------------------
   One row: the stepper on the leading side, the add button taking the rest.
   Used by the shop loop and the theme's carousels, so both card paths share
   one look. Without a quantity the button simply fills the row as before.
   -------------------------------------------------------------------------- */
.loop-cart{display:flex;align-items:stretch;gap:8px}
.loop-cart .add-cart,
.loop-cart .add_to_cart_button,
.loop-cart .button{flex:1 1 auto;margin:0!important}
/* On the shop loop the card inset used to live on the button alone, which
   left the stepper flush against the card border -- the minus all but
   touching it. The inset moves to the row, so both ends of the row are equal
   and the stepper is inside the card the way the button always was.

   Specificity, not !important, is what carries this: the card's own
   .woocommerce ul.products li.product .button margin is (0,3,1) !important,
   which the flat .loop-cart .button above never reached. This is (0,4,1).
   The button keeps its width -- the 17px it gives up on each side is exactly
   what the row takes on. */
.woocommerce ul.products li.product .loop-cart{margin:0 17px 17px}
.woocommerce ul.products li.product .loop-cart .button{margin:0!important}

/* The stepper: a bordered pill with a real minus and plus flanking the value,
   matching the product page's own quantity control in feel. */
.loop-qty{display:flex;align-items:center;flex:0 0 auto;border:1px solid var(--line-strong);border-radius:11px;background:#fff;overflow:hidden;height:44px}
.loop-qty-step{width:30px;align-self:stretch;border:0;background:transparent;color:#2c2926;font-size:17px;font-weight:700;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:background .14s,color .14s}
.loop-qty-step:hover{background:#f4f1ec;color:#171717}
.loop-qty-step:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.loop-qty-input{width:30px;border:0;background:transparent;text-align:center;font-size:13px;font-weight:800;color:#171717;padding:0;-moz-appearance:textfield;appearance:textfield}
.loop-qty-input::-webkit-outer-spin-button,
.loop-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Before JS runs, the bare input keeps its own spinner and normal padding. */
.loop-qty:not(.has-stepper) .loop-qty-input{width:52px;padding:0 8px}

/* The button as its own receipt: a tick and "נוסף" in the confirming green,
   held for a moment. Fixed against the button's own width so the row does not
   jump when the label changes. */
.add-cart.is-added,
.woocommerce ul.products li.product .button.is-added,
.loop-cart .button.is-added,
.loop-cart .add_to_cart_button.is-added{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:7px}
.woocommerce ul.products li.product .button.is-added:hover,
.loop-cart .add_to_cart_button.is-added:hover{background:var(--green)!important}
/* The same receipt on the product page's own button. Specificity, not
   !important, is what carries this: the core .woocommerce button.button.alt
   rule is background:var(--red)!important at (0,3,1), its :hover is (0,4,1),
   and the accessibility widget's keyboard mode sets button:focus to #fff34d
   !important at (0,2,1). A flat .single_add_to_cart_button.is-added is (0,2,0)
   and loses to all three, leaving the button simply red. This is (0,5,2).

   Matched on .button, not .single_add_to_cart_button, so it survives a change
   to that class list. No border-color: the button is border:0!important, so
   there is nothing to colour. No display or centring either, both already
   arrive with !important. Only the gap is missing. */
.woocommerce div.product form.cart .button.is-added,
.woocommerce div.product form.cart .button.is-added:hover,
.woocommerce div.product form.cart .button.is-added:focus{
  background:var(--green)!important;color:#fff!important;gap:8px;
}
.loop-added-tick{flex:0 0 auto;animation:loopTick .3s ease}
@keyframes loopTick{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.loop-added-tick{animation:none}}

/* WooCommerce's own green .added tick and the stray forward link are already
   suppressed elsewhere; the is-added state above is what speaks now. */

@media(max-width:760px){
  .loop-qty{height:40px}
  .loop-qty-step{width:26px;font-size:15px}
  .loop-qty-input{width:26px}
  .woocommerce ul.products li.product .loop-cart{margin:0 10px 10px}
}

/* --------------------------------------------------------------------------
   Product page: the price ladder
   --------------------------------------------------------------------------
   Four cards ordered by price, with the model being viewed marked in its own
   place rather than lifted to the front. It was one continuous rail divided
   by hairlines, which had to be swiped below 1,180px and opened at whichever
   end the browser chose; a grid shows all four at once at every width, and
   the row still reads right to left with the price climbing leftwards.

   The marked card is the only red on the page below the buy box, and it is
   red on the price alone -- the warm fill and the bar it used to carry made
   the shopper's own model look like the offer of the four.
   -------------------------------------------------------------------------- */
.pdp-ladder{clear:both;padding:48px 0 56px;border-top:1px solid var(--line)}
.pdp-ladder-kicker{margin:0;font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.02em;color:var(--muted)}
.pdp-ladder .pdp-h{margin-top:6px}
.pdp-ladder-rule{margin:8px 0 0;font-size:14px;line-height:1.5;color:#4A4A4A;max-width:62ch}

/* auto-fit rather than a fixed four: the row is four cards on this catalogue,
   but a category that can only fill three should not leave an empty track. */
.pdp-ladder-grid{
  list-style:none;margin:24px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;
}
.pdp-rung{display:flex}
.pdp-rung-link{
  flex:1 1 auto;display:flex;flex-direction:column;gap:10px;padding:14px;
  border:1px solid var(--line);border-radius:14px;background:#fff;
  color:var(--ink);text-decoration:none;transition:border-color .15s ease;
}
/* Ink, not a tint: the card is a frame around a photograph, and a background
   change behind a packshot reads as the photograph changing. */
a.pdp-rung-link:hover{border-color:var(--ink)}

.pdp-rung-media{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#F6F5F3}
/* contain, not the handoff's cover. The catalogue holds packshots from 12:1
   to 1:10, and cover cuts the ends off an 88-key keyboard. multiply melts the
   white studio background of the imported photographs into the tile. */
.pdp-rung-media img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

/* min-height rather than hiding when empty: 31% of the catalogue carries no
   brand term, and a collapsing line would ragged the whole row. */
.pdp-rung-brand{min-height:16px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Clamped to three lines, which the handoff does not need and this catalogue
   does: it drew a shortened title, and the real one on that card is 110
   characters. The full title stays in the DOM for a screen reader. */
.pdp-rung-name{font-size:14px;font-weight:500;line-height:1.4;color:var(--ink);text-wrap:pretty;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.pdp-rung-spec{font-size:13px;line-height:1.45;color:#4A4A4A}

/* margin-top:auto on the row, so the prices line up across cards whether or
   not a card carries a brand, a key-spec line or a third line of title. */
.pdp-rung-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.pdp-rung-price{font-size:17px;font-weight:700;line-height:1.2;white-space:nowrap}
/* No green and no red on the difference or on the sold-out note: red on this
   page is the price of the model being viewed, and green is the stock line. */
.pdp-rung-delta,.pdp-rung-oos,.pdp-rung-was{font-size:13px;color:var(--muted);white-space:nowrap}
.pdp-rung-delta .woocommerce-Price-amount,.pdp-rung-was .woocommerce-Price-amount{font-size:inherit;font-weight:inherit}

/* The model being viewed: a 2px frame and a chip on the photograph. */
.pdp-rung.is-current .pdp-rung-link{border-width:2px;border-color:var(--ink);cursor:default}
.pdp-rung.is-current .pdp-rung-price{color:var(--red)}
.pdp-rung-here{
  position:absolute;inset-block-start:10px;inset-inline-start:10px;
  padding:4px 8px;border-radius:6px;background:#171717;color:#fff;
  font-size:12px;font-weight:600;line-height:1.3;
}

/* Between the phone and about 923px auto-fit makes three tracks, which leaves
   the fourth card alone on a second row. Two by two instead, all the way down
   to the phone, where the handoff's single column ran to 1,560px. */
@media (min-width:761px) and (max-width:923px){
  .pdp-ladder-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .pdp-ladder{padding:36px 0 40px}
  .pdp-ladder-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
  .pdp-ladder-rule{font-size:13px}
  .pdp-rung-link{padding:12px;gap:8px}
  .pdp-rung.is-current .pdp-rung-link{padding:11px}
  .pdp-rung-name{font-size:13px}
  .pdp-rung-price{font-size:16px}
  /* The chip has a 147px photograph to sit on at 390px, and the label is 19
     characters of Hebrew. */
  .pdp-rung-here{inset-block-start:8px;inset-inline-start:8px;padding:3px 6px;font-size:11px}
}

/* --------------------------------------------------------------------------
   Product page: the accessory kit
   -------------------------------------------------------------------------- */
/* The kicker over its heading, in the same grey as the price row's. It was
   red, along with the ladder's, and two red labels under a red price button
   made the page's one accent mean nothing in particular. */
.pdp-kit-head>div>span{display:block;margin-bottom:5px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.06em}
.pdp-kit-lead{display:flex;align-items:center;gap:9px;margin:0 0 18px;padding:11px 14px;
  border:1px solid var(--line);border-radius:12px;background:#faf9f7;
  color:#3f3b36;font-size:13px;line-height:1.45}
.pdp-kit-lead svg{color:var(--green);flex:0 0 auto}
@media(max-width:760px){
  .pdp-kit-lead{font-size:12px;padding:10px 12px;gap:8px}
}

/* ==========================================================================
   v1.118: coupon, note, address
   ========================================================================== */

/* --- The coupon box -------------------------------------------------------

   WooCommerce renders this as a panel heading with a chevron, in the same
   grey as the subtotal line above it, and the result is that most shoppers
   holding a code never find where to type it -- the row reads as a label,
   not as something you press. It is also the only way into a gift card,
   since redemption rides on the coupon machinery (see inc/gift-cards.php),
   so a shopper who cannot find it is holding money they cannot spend.

   The treatment below is deliberately the loudest thing in the totals
   column: a dashed brand-red ticket panel, which is the one shape on the
   page that says "there is something to fill in here". The text stays
   WooCommerce's own -- it is a React-rendered string, and replacing it from
   the outside would fight the reconciler for no gain. */
.wc-block-components-totals-coupon{
  margin:12px 0;padding:0 12px;
  border:1.5px dashed var(--red);border-radius:12px;
  background:var(--warm);
}
.wc-block-components-totals-coupon .wc-block-components-panel__button{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:13px 0;
  font-size:15px;font-weight:800;color:var(--red-dark);
}
/* The ticket, before the label and after the chevron in source order, so a
   screen reader still meets the button's own text first. */
.wc-block-components-totals-coupon .wc-block-components-panel__button::before{
  content:"";flex:0 0 auto;width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--coupon-ticket) center/contain no-repeat;
  mask:var(--coupon-ticket) center/contain no-repeat;
}
.wc-block-components-totals-coupon .wc-block-components-panel__button-icon{
  order:9;margin-inline-start:auto;fill:currentColor
}
/* Hover deepens the panel, not the text. Lifting the label to --red on
   this background drops it to 4.04:1, and 15px at weight 800 is not "large
   text" by the rule -- 18.66px is -- so the hover state alone would have
   failed AA on a page the rest of the theme passes. */
.wc-block-components-totals-coupon:hover{background:#ffe4d9}
.wc-block-components-totals-coupon .wc-block-components-panel__button:focus-visible{
  outline:2px solid var(--red);outline-offset:3px;border-radius:8px
}
.wc-block-components-totals-coupon__content{padding:0 0 12px}
.wc-block-components-totals-coupon__form{gap:8px}
.wc-block-components-totals-coupon__input input{
  background:#fff;border-radius:9px;
}
/* WooCommerce prints the order summary twice on a phone checkout, and both
   coupon fields get the same id: the floating label's "for" pointed at the
   lower one, so a tap on the top field's words jumped 2,000px down and the
   code was typed there. The tap goes to the field under the label. */
.wc-block-components-totals-coupon__input label{pointer-events:none}
.wc-block-components-totals-coupon__button{
  border-radius:9px;font-weight:800;white-space:nowrap
}
:root{
  --coupon-ticket:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2.2a2.8 2.8 0 0 0 0 5.6V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2.2a2.8 2.8 0 0 0 0-5.6zm12 .8v1.9h1.4V7.8zm0 3.3v1.9h1.4v-1.9zm0 3.3V16h1.4v-1.6z"/></svg>');
}

/* --- The note to the shop -------------------------------------------------

   This used to be two gates in a row: a <details> the theme added, and
   inside it WooCommerce's own "add a note" checkbox, which is what actually
   reveals the textarea. Two clicks and two different affordances to leave
   one sentence, and the first of them hid the second, so nobody could see
   what opening it would even offer.

   One gate now. The theme's wrapper contributes a title and nothing else;
   WooCommerce's checkbox is the control, drawn as a card wide enough to hit
   on a phone, and theme.js puts the cursor in the textarea the moment it
   appears. Tick, type. */
.shechter-note{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}
.shechter-note-title{
  margin:0 0 10px;font-size:14px;font-weight:800;color:var(--ink);
}
.shechter-note-title small{display:block;margin-top:2px;font-size:12px;font-weight:600;color:#6f6a63}

.shechter-note .wc-block-components-checkout-step__content{margin:0;padding:0}
.shechter-note .wc-block-checkout__add-note .wc-block-components-checkbox{margin:0}
.shechter-note .wc-block-components-checkbox > label{
  display:flex;align-items:center;gap:10px;
  margin:0;padding:13px 14px;
  border:1px solid var(--line-strong);border-radius:12px;background:#fff;
  cursor:pointer;font-size:14px;font-weight:700;color:var(--ink);
  transition:border-color .15s,background .15s;
}
.shechter-note .wc-block-components-checkbox > label:hover{border-color:var(--red);background:var(--warm)}
.shechter-note .wc-block-components-checkbox__input{width:20px;height:20px;flex:0 0 auto;margin:0}
.shechter-note .wc-block-components-checkbox__mark{inset-inline-start:14px;top:50%;transform:translateY(-50%)}
.shechter-note .wc-block-components-checkbox__label{font-weight:700}
.shechter-note .wc-block-components-checkbox__input:focus-visible + .wc-block-components-checkbox__mark{outline:none}
.shechter-note .wc-block-components-checkbox:focus-within > label{
  border-color:var(--red);outline:2px solid var(--red);outline-offset:2px
}
/* Ticked, the card is the heading of the box below it rather than a
   separate control floating above one. */
.shechter-note .wc-block-components-checkbox__input:checked ~ .wc-block-components-checkbox__label{color:var(--red-dark)}
.shechter-note .wc-block-components-textarea{
  min-height:104px;margin-top:10px;border-radius:12px;font-size:14px;line-height:1.5
}
.shechter-note .wc-block-components-textarea:focus{outline:2px solid var(--red);outline-offset:1px}

/* --- Address suggestions --------------------------------------------------

   The list is a child of the field wrapper rather than of <body>, which is
   what makes it survive the two things that break dropdowns on this page:
   RTL, where a fixed element positioned from measured pixels lands on the
   wrong side, and the accessibility widget's font zoom, which scales the
   body and every coordinate measured inside it. Anchored in the wrapper,
   the list simply inherits both. */
.shechter-ac-anchor{position:relative}
.shechter-ac-list{
  position:absolute;z-index:50;inset-inline:0;top:calc(100% + 4px);
  max-height:264px;overflow-y:auto;overscroll-behavior:contain;
  margin:0;padding:5px;list-style:none;
  background:#fff;border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:0 12px 30px rgba(20,16,12,.14);
}
.shechter-ac-list li{
  padding:9px 11px;border-radius:8px;cursor:pointer;
  font-size:14px;line-height:1.35;color:var(--ink);text-align:start;
}
.shechter-ac-list.is-above{top:auto;bottom:calc(100% + 4px)}
.shechter-ac-list li:hover,
.shechter-ac-list li.is-active{background:var(--warm);color:var(--red-dark);font-weight:700}
@media (max-width:760px){
  .shechter-ac-list{max-height:212px}
  .shechter-ac-list li{padding:11px}
}

/* --- The accessibility widget must not adapt itself -----------------------

   "הדגשת כותרות" draws a dashed outline round every heading on the page,
   and the panel's own section titles are headings on the page: turning the
   setting on put a dashed box round "מדיה וסמן" and its neighbours, which
   reads as a rendering fault rather than as the setting working. The font
   rule further up already carved the panel out for the same reason; this is
   the one that was missed. */
html.a11y-headings .a11y-widget h1,
html.a11y-headings .a11y-widget h2,
html.a11y-headings .a11y-widget h3,
html.a11y-headings .a11y-widget h4,
html.a11y-headings .a11y-widget h5,
html.a11y-headings .a11y-widget h6{outline:none!important}

/* ==========================================================================
   v1.122: the empty cart
   ========================================================================== */

/* --- the suggestion grid ------------------------------------------------

   WooCommerce's product-new block sizes its images by width alone and lets
   the height fall where it may. Almost every thumbnail in this catalogue is
   300x300, so almost every card looked right -- and the one djembe whose
   image is 300x530 rendered 487px tall against its neighbours' 276px, pushing
   its own title, price and button half a card below theirs. It read as a
   broken page rather than as a tall drum.

   The theme's own product cards have solved this since the beginning: a
   fixed media box with object-fit:contain, so the picture is whatever shape
   it is and the CELL is always the same. This is that, applied to the block
   the shop does not render itself. */
/* A grid, not WooCommerce's flex row. Theirs sizes each card `flex:1 0 25%`,
   so four cards already account for the full width and any gap at all pushes
   the fourth onto a second line -- which is exactly what an 18px gap did.
   Grid divides the space after the gaps instead of before them, so the
   columns are whatever is left and the arithmetic cannot come apart. */
.wc-block-grid .wc-block-grid__products{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
  margin:0;padding:0;list-style:none;
}
@media(max-width:1100px){ .wc-block-grid .wc-block-grid__products{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:860px){ .wc-block-grid .wc-block-grid__products{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* One column on a phone, which is WooCommerce's own choice and the right one
   -- but as a grid, not as their `display:block`. Block mode drops the gap,
   and four bordered cards with nothing between them merged into a single
   slab. Selected with .has-4-columns to match their (0,3,0) specificity. */
@media(max-width:480px){
  .wc-block-grid.has-4-columns .wc-block-grid__products,
  .wc-block-grid .wc-block-grid__products{
    display:grid;grid-template-columns:minmax(0,1fr);
  }
}
.wc-block-grid .wc-block-grid__products .wc-block-grid__product{
  min-width:0;max-width:none;flex:none;background:#fff;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;padding:0 0 18px;margin:0;
  display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.wc-block-grid .wc-block-grid__products .wc-block-grid__product:hover{transform:translateY(-4px);border-color:#d2cbc1;box-shadow:var(--shadow-md)}
.wc-block-grid__product-link{display:block}
/* The cell. Every image gets the same square whatever its own proportions.

   Selected through .wc-block-grid__products, and the image one level deeper
   again, because WooCommerce ships
   `.wc-block-grid__products .wc-block-grid__product-image img{height:auto}`
   at (0,2,1). A flat class rule loses to it however sensible it looks, which
   is exactly what happened first time: the cells lined up and the picture
   inside carried on being 448px tall. */
.wc-block-grid .wc-block-grid__products .wc-block-grid__product-image{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;width:100%;margin:0 0 4px;padding:18px;
  background:#faf9f7;overflow:hidden;
}
.wc-block-grid .wc-block-grid__products .wc-block-grid__product-image img{
  width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;
  display:block;margin:0;
}
/* Two lines of room whether the name needs one or two, so the price and the
   button below it start at the same height in every card. Without it a
   short name lifted its whole card 19px and the row went ragged again for a
   different reason than the images did. */
.wc-block-grid .wc-block-grid__products .wc-block-grid__product-title{
  margin:0;padding:0 16px;font-size:13.5px;font-weight:700;line-height:1.4;color:var(--ink);
  min-height:2.8em;display:flex;align-items:flex-start;
}
.wc-block-grid .wc-block-grid__products .wc-block-grid__product-price{
  display:block;padding:8px 16px 0;font-size:15px;font-weight:800;color:var(--ink);
}
/* Pinned to the bottom of the card. WooCommerce sets a margin here too, so
   this needs the same reach as the rules above. */
.wc-block-grid .wc-block-grid__products .wc-block-grid__product-add-to-cart{
  margin-top:auto;padding:12px 16px 0;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link{
  width:100%;border-radius:11px;font-size:13.5px;font-weight:800;
}

/* --- the empty state ----------------------------------------------------

   It used to be a black sad face, one line, a row of dots and then straight
   into products, with nothing at all to click. A shopper who emptied their
   cart had to go back to the navigation to carry on, which is the one moment
   a shop should be most helpful. */
.shechter-empty{
  max-width:560px;margin:8px auto 34px;text-align:center;
}
/* Drawn here rather than in the page. An <svg> written into post content is
   stripped by kses the moment the post is saved, which is why the circle
   came back empty the first time; a mask needs no markup to survive. */
.shechter-empty-icon{
  width:74px;height:74px;margin:0 auto 18px;border-radius:50%;
  background:var(--warm);
  display:flex;align-items:center;justify-content:center;
}
.shechter-empty-icon:before{
  content:"";width:34px;height:34px;background:var(--red);
  -webkit-mask:var(--empty-cart-glyph) center/contain no-repeat;
  mask:var(--empty-cart-glyph) center/contain no-repeat;
}
:root{
  --empty-cart-glyph:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="20" r="1.7"/><circle cx="18" cy="20" r="1.7"/><path d="M2.5 3.2h2.7l2.3 12.1a1.8 1.8 0 0 0 1.8 1.5h8.8a1.8 1.8 0 0 0 1.8-1.4L21.5 7.2H6.1"/></svg>');
}
.shechter-empty h2{margin:0 0 8px;font-size:26px;font-weight:800;color:var(--ink)}
.shechter-empty p{margin:0 0 20px;font-size:15px;line-height:1.6;color:#5c5955}
.shechter-empty-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.shechter-empty-actions a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 24px;border-radius:13px;
  font-size:15px;font-weight:800;text-decoration:none;
}
.shechter-empty-cta{background:var(--red);color:#fff;border:1.5px solid var(--red)}
.shechter-empty-cta:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.shechter-empty-alt{background:#fff;color:var(--ink);border:1.5px solid var(--line-strong)}
.shechter-empty-alt:hover{border-color:var(--red);color:var(--red-dark);background:var(--warm)}
.shechter-empty-actions a:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* WooCommerce's own sad-face heading and the dots rule are replaced by the
   block above; both are hidden rather than deleted so a future re-save of
   the cart page in the editor cannot bring them back mid-layout. */
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon,
.wp-block-woocommerce-empty-cart-block .is-style-dots{display:none}

@media(max-width:760px){
  .wc-block-grid .wc-block-grid__products{gap:12px}
  .wc-block-grid .wc-block-grid__products .wc-block-grid__product-image{padding:12px}
  .wc-block-grid .wc-block-grid__products .wc-block-grid__product-title{font-size:12.5px;padding:0 12px}
  .shechter-empty h2{font-size:22px}
  .shechter-empty-actions a{width:100%}
}

/* The together-price note under an accessory's price in the kit block. It has
   to be next to the number: a lower price with no explanation is the kind of
   thing a shopper only understands at the basket, by which point it looks
   like a mistake in their favour rather than an offer. */
.product-kit-note{
  display:block;margin:2px 0 0;font-size:11.5px;font-weight:700;line-height:1.35;color:var(--green);
}
.product-card .prices .old-price{opacity:.7}

/* ==========================================================================
   v1.124: mobile QA
   Seventy findings from a sweep on iPhone 13, iPhone SE, Pixel 7 and a 360px
   Android, each reproduced by a second agent before it was accepted. Grouped
   here by cause rather than by page, because most causes were seen from
   several pages at once.
   ========================================================================== */

:root{--mobile-search-band:58px}

/* --- iOS zooms the whole page into any field smaller than 16px ----------

   The header search is 15px and sits on every page, so the single most used
   control on the site made an iPhone lurch sideways on every tap; the card
   quantity steppers are 13px, the cart's 13px, the restock, ask-us and
   cancellation forms 14px, the order note 14px. Checkout alone was clean,
   because WooCommerce Blocks already sets 16px.

   The fix is the size, not the viewport. maximum-scale=1 would also stop
   the zoom, and it would stop pinch-zoom with it -- a WCAG 1.4.4 failure on a
   site that has just published an accessibility statement.

   Touch devices only, so desktop keeps its tuned sizes. */
@media (hover:none) and (pointer:coarse){
  input[type="text"],input[type="search"],input[type="email"],input[type="tel"],
  input[type="number"],input[type="password"],input[type="url"],input:not([type]),
  input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],
  select,textarea{font-size:16px!important}
}

/* --- the band under the mobile header ------------------------------------

   On phones the search pill is position:absolute and hangs below the sticky
   header, with a 58px band in the page colour behind it. Nothing below
   reserved that space except the product page, so it covered the breadcrumb
   on every category (the only way back up from a leaf category), the top of
   the shop and search-results H1, and the guide breadcrumbs. On checkout,
   where there is no pill at all, the band still drew and swallowed taps on
   the first fields. */
@media(max-width:760px){
  .shop-hero{padding-top:calc(27px + var(--mobile-search-band))}
  /* Page-card pages (content, account, cart, 404) under the phone's sticky
     search band: their card's top edge sat hidden beneath it. The checkout
     has no band and keeps its spacing. */
  .site-header:not(.site-header-checkout)~.content-shell{padding-top:calc(27px + var(--mobile-search-band))}
  article.guide{padding-top:var(--mobile-search-band)}
  .site-header-checkout::after{content:none}
}

/* --- carousels you can swipe ----------------------------------------------

   The product carousels are a transform pager: overflow hidden, the track
   moved by the arrows. Its own comment admits it "cannot be swiped", and on a
   phone the next card peeks in at the edge, which is an invitation to do
   exactly that. On phones it becomes a native scroller with snap points, the
   way the reviews rail already works; theme.js moves it with scrollBy there
   instead of setting a transform. */
@media(max-width:760px){
  .products-carousel{
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .products-carousel::-webkit-scrollbar{display:none}
  .products-carousel .products-track{transform:none!important}
  .products-carousel .product-card-custom{scroll-snap-align:start}
  @media (prefers-reduced-motion:no-preference){.products-carousel{scroll-behavior:smooth}}
}

/* --- cards whose button did not fit --------------------------------------

   On the guide pages the picks are a two-column grid, and a 118px minimum on
   the add button beat the mobile reset by specificity, so the button ran out
   of its card. It takes its own line under the stepper instead. */
@media(max-width:760px){
  .product-card-custom .loop-cart .add-cart{min-width:0}
  .product-card-qty .loop-cart{flex-wrap:wrap}
  .product-card-qty .loop-cart .add-cart{flex:1 1 100%}
}

/* --- narrow phones: the cart row -----------------------------------------

   The cart's line row is WooCommerce's fixed 80px + 132px grid plus an implicit
   column for the total, 321px, inside 272px of card. */
@media(max-width:380px){
  .is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
  .is-small table.wc-block-cart-items .wc-block-cart-items__row{grid-template-columns:64px minmax(0,1fr) auto;column-gap:12px}
}
/* The same three tracks at every width WooCommerce calls "mobile" or
   "small", not only under 380px. Its own row is 80px + 132px with the total
   in an implicit fourth column, and a sale line's one-line "חיסכון של 70 ₪"
   badge made that 89px: at 390px, the width of most iPhones, the table ran
   64px past the card and the page scrolled sideways with the totals cut. */
.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.is-small table.wc-block-cart-items .wc-block-cart-items__row{grid-template-columns:80px minmax(0,1fr) auto}
@media(max-width:380px){
  .is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
  .is-small table.wc-block-cart-items .wc-block-cart-items__row{grid-template-columns:64px minmax(0,1fr) auto;column-gap:12px}
}
.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product{grid-column:2/3}
.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total{grid-column:3}
.is-mobile .wc-block-cart-item__total .wc-block-components-sale-badge,
.is-small .wc-block-cart-item__total .wc-block-components-sale-badge{white-space:normal}
/* The quantity row (stepper and trash) is wider than its middle column on
   a sale line and reaches under the total cell, which then took the tap:
   the trash did nothing at 360-390px, and at quantity 1 it is the only way
   to remove the line. Above the total, nothing moves. */
.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity,
.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity{position:relative;z-index:1}

/* --- the accessibility widget's own font zoom broke the header ----------

   At 150% the header actions were allowed to wrap into three rows inside a
   74px row, and the search pill painted over the overflow: tapping "סל" ran
   an empty search. One row, labels screen-reader-only, and the sale pill goes
   (it is in the drawer). The announcement strip also lost its 24px gutter at
   zoom and ran into both screen edges. */
@media(max-width:760px){
  html.a11y-zoomed .header-actions{flex-wrap:nowrap}
  html.a11y-zoomed .header-actions .sale-link{display:none}
  html.a11y-zoomed .header-actions .action-link>span{
    position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
}
html.a11y-zoomed .announcement .container{width:calc(var(--a11y-vw) - 24px)}

/* --- landscape phones ------------------------------------------------------

   In landscape the accessibility panel had a 70px scroll area, 24px with the
   cookie banner up: the head and a two-row footer are fixed height and only
   the body shrinks. On a short screen the whole panel scrolls instead, footer
   included, from edge to edge. */
@media (max-height:500px){
  .a11y-panel{top:8px;bottom:8px;max-height:none;overflow-y:auto;overscroll-behavior:contain}
  .a11y-panel-body{flex:0 0 auto;overflow:visible}
  .a11y-active{max-height:none}
  /* With the panel itself as the scroller, a static header takes the close
     button and the whole tab strip off screen on the first swipe and never
     brings them back. The scroll nav in theme.js follows whichever element
     is scrolling; this keeps the thing it scrolls from leaving the screen. */
  .a11y-panel-head{position:sticky;top:0;z-index:2}
  .a11y-panel-foot{position:sticky;bottom:0;z-index:2}
}

/* --- the hamburger drawer ----------------------------------------------------

   The drawer lives inside the header's stacking context (z 200), so the
   sticky announcement (210) covered the top of its close button and the
   cookie banner (480) covered three or four department links. Lifting the
   header context while the menu is open puts the drawer and its backdrop
   above both. Its close button also scrolled away with the links; it stays
   pinned now. And the closed drawer's shadow reached further than its 5%
   off-screen overshoot, so a dark band sat on the right edge of every page. */
.mega-menu-foot .mega-menu-sale,.mega-menu-foot .mega-menu-saved{display:none}
@media(max-width:760px){
  /* The sale pill leaves the header below 375px and at larger text sizes;
     it waits here, at the foot of the departments. So do the saved lists,
     which have no icon in a phone's header. */
  .mega-menu-foot a,.mega-menu-foot .mega-menu-sale,.mega-menu-foot .mega-menu-saved{display:inline-flex;min-height:44px}
  body.menu-open .site-header{z-index:490}
  .main-nav:not(.open){box-shadow:none}
}

/* --- other overlays -------------------------------------------------------- */

/* The cart drawer: swipes on its header and footer scrolled the page behind. */
.cart-drawer{overscroll-behavior:contain}

/* The filters drawer had no body class, so the floating chrome that hides
   for the menu and the cart stayed on top of it. theme.js now sets one. */
@media(max-width:760px){
  body.filters-open .a11y-launcher,body.filters-open .a11y-panel,body.filters-open .a11y-scrim,
  body.filters-open .mobile-contact-bar,body.filters-open .whatsapp{display:none}
}

/* The image lightbox: the launcher drew over it, and the counter read
   "12 / 1" because it inherited right-to-left. */
.pswp__counter{direction:ltr;unicode-bidi:isolate}
body:has(.pswp--open) .a11y-launcher,body:has(.pswp--open) .whatsapp{display:none}

/* The cookie banner sat 64px above the bottom edge on pages with no bar
   under it -- checkout, and product pages while the buy bar is hidden -- so a
   strip of page showed through beneath it. */
@media(max-width:760px){
  body:not(:has(.mobile-contact-bar)):not(.has-pdp-buy-bar) .cookie-banner,
  body.has-pdp-buy-bar:has(.pdp-buy-bar.is-hidden) .cookie-banner{bottom:0}
}

/* The category chip strip was over-constrained -- a fixed container width
   plus negative margins -- and sat 12-24px towards the start edge, the first
   chip clipped by the screen. */
@media(max-width:760px){
  .shop-category-links{width:auto;margin-inline:0;padding-inline:12px}
}

/* --- fingertip-sized controls -----------------------------------------------

   The cart's quantity buttons were 30x29, its trash icon 24x24, the side
   cart's steppers 32 and its remove button 28; the pickup-point map's close X
   is a bare inline link 16-21px wide. All of them worked, just not at the
   first try with a thumb. 44px is the WCAG 2.5.5 / Apple HIG target.
   WooCommerce's own selectors are (0,2,0), hence the doubled class. */
@media(max-width:760px){
  /* 36px wide and 44 tall: three 44px squares did not fit WooCommerce's
     107px box and the '+' hung outside its border, and a wider box pushed
     the cart row past a phone's width. 36px is well over WCAG 2.5.8's 24. */
  .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{min-width:36px;min-height:44px}
  .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input.wc-block-components-quantity-selector__input{min-width:0;width:33px;flex:0 0 33px}
  .wc-block-cart-item__remove-link.wc-block-cart-item__remove-link{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .cart-drawer-qty button{width:44px;height:44px}
  .cart-drawer-remove{width:44px;height:44px}
  .shechter-pp-button{min-height:44px}
  .pickups-modal #pickupbtnmn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
}

/* The consent box on every form was 18px, and most of the sentence beside it
   is its two links, so a thumb aimed at the sentence opened the terms in a
   new tab and left the box unticked; the form then refused to send. 24px is
   the WCAG 2.2 minimum target, and the first line moves down to meet it. */
@media (hover:none) and (pointer:coarse){
  .consent-row{gap:11px}
  .consent-row input[type="checkbox"]{width:24px;height:24px;margin:0}
  .consent-row label{padding-top:2px}
}

/* --- items sold by enquiry -------------------------------------------------

   The panel reuses the out-of-stock card (.pdp-oos) so an item with no price
   reads like every other availability answer on the page; only the two
   actions under it are new. */
.pdp-por-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
.pdp-por-actions .button-primary,.pdp-por-actions .button-secondary{flex:1 1 auto;min-width:min(12rem,100%)}
.pdp-por-actions .button-secondary{border:1px solid var(--line-strong)}
.price-on-request{font-weight:800;color:var(--ink)}
.woocommerce ul.products li.product .button.add-cart-por{background:#fff!important;color:#1d1d1d!important;border:1px solid #8c8781!important}

/* --- category chips that look pressable ------------------------------------

   A customer told the owner the sub-category row was not clear: thin grey
   outlines on a white band, straight under a large white title, read as a
   line of labels rather than a row of places to go. Three changes, each
   aimed at that reading. The band is tinted so the row is a distinct zone;
   the chips are white, larger and lifted off it, so they look like buttons;
   and each carries a small red chevron pointing the way Hebrew reads, the
   usual sign for "this takes you somewhere". The chip you are already on
   stays dark and has no chevron, because it goes nowhere. The caption above
   the row is in archive-product.php.

   The guides archive shares these classes and marks its current topic with
   aria-current alone, hence both selectors. The hero already draws the line
   above the band, so the band draws only the one below. */
.shop-category-strip{background:var(--surface-soft);border-bottom:1px solid var(--line)}
.shop-category-label{margin-block:0;padding-top:16px;font-size:14px;font-weight:800;line-height:1.3;color:var(--ink)}
.shop-category-label+.shop-category-links{min-height:0;padding-top:10px}
.shop-category-links{gap:10px}
.shop-category-links a{min-height:44px;padding-block:0;padding-inline:16px 14px;gap:9px;border:1px solid var(--line-strong);background:#fff;font-size:14px;font-weight:700;color:var(--ink);box-shadow:0 1px 2px rgba(22,20,18,.06),0 3px 10px rgba(22,20,18,.05)}
.shop-category-links a:not(.is-current):not([aria-current]):after{content:"";flex:0 0 auto;width:6px;height:6px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(45deg)}
.shop-category-links a:hover{border-color:#171717;background:#171717;color:#fff;box-shadow:0 6px 16px rgba(22,20,18,.16)}
.shop-category-links a:hover:after{border-color:#fff}
.shop-category-links a.is-current,.shop-category-links a[aria-current]{border-color:#171717;background:#171717;color:#fff;box-shadow:none;cursor:default}
.shop-category-links a[aria-current]:hover{transform:none}
/* The chip shadow above would otherwise replace the white halo the global
   focus ring draws behind itself. */
.shop-category-links a:focus-visible{box-shadow:0 0 0 5px rgba(255,255,255,.9)}
@media(max-width:760px){
  .shop-category-label{width:auto;margin-inline:0;padding-top:12px;padding-inline:12px;font-size:13px}
  .shop-category-label+.shop-category-links{padding-top:8px}
  .shop-category-links a{min-height:40px;padding-inline:14px 12px;font-size:13px;gap:8px}
}

/* --- product page on a short laptop screen ---------------------------------

   A 1366x768 laptop at the 125% scaling Windows ships with reports a 1093px
   wide viewport about 614px tall, and the add-to-cart button sat at 754px: a
   shopper saw the title, the price and two information boxes, and nothing to
   press. Measured on the staging copy after a colleague's screen showed it.

   The column above the button used to be squeezed here as well -- a smaller
   title, the teaser clamped to two lines, tighter boxes -- to bring the
   button back to the fold. The 2026-09 buy box is a different column: there
   are no boxes left to tighten, and shrinking the title and the price would
   undo the hierarchy the handoff is built on. What remains is the second
   answer, which was always the stronger one: the buy bar the phone layout
   already has is switched on here too, so the moment the real button leaves
   the screen there is still a price and a button in view. The bar's markup,
   its JavaScript and its withdraw-while-visible behaviour are shared; only
   its display is new.

   Bounded by height, not width: 1920x1080 and anything taller keeps the
   roomier layout exactly as it was. */
@media (min-width:761px) and (max-height:820px){
  /* The phone's buy bar, on a laptop that is short rather than narrow. */
  body.has-pdp-buy-bar{padding-bottom:74px}
  .pdp-buy-bar{
    position:fixed;right:0;bottom:0;left:0;z-index:250;
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;
    min-height:64px;padding:9px clamp(16px,4vw,40px);
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -8px 22px rgba(0,0,0,.10);
    transition:transform .2s ease;
  }
  .pdp-buy-bar-price{display:flex;align-items:baseline;gap:10px;min-width:0}
  /* Clamped by lines rather than a one-line ellipsis: the ellipsis cut the
     visual left edge, which in a Hebrew name is the start of its Latin part,
     and 'Vic Fi…' vanished from the middle of the name. */
  .pdp-buy-bar-name{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;white-space:normal;word-break:break-word}
  .pdp-buy-bar-amount{font-size:18px;font-weight:800;color:var(--red);line-height:1.2}
  .pdp-buy-bar-amount del{display:none}
  .pdp-buy-bar-cta{
    min-height:46px;padding:0 26px;border:0;border-radius:12px;
    background:var(--red);color:#fff;font-size:14px;font-weight:800;
    display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .pdp-buy-bar-cta:hover{background:var(--red-dark)}
  .pdp-buy-bar-cta-alt{background:#117a4a}
  .pdp-buy-bar-cta-alt:hover{background:#148b50}
  .pdp-buy-bar.is-hidden{transform:translateY(105%);pointer-events:none}
  body.menu-open .pdp-buy-bar,body.cart-drawer-open .pdp-buy-bar{display:none}

  /* Nothing else may sit under the bar: the consent banner rides above it
     while it is out, and the accessibility launcher moves up with it. */
  body.has-pdp-buy-bar:not(:has(.pdp-buy-bar.is-hidden)) .cookie-banner{bottom:72px}
  /* --cookie-banner-space already carries the banner's 72px offset: theme.js
     measures it again whenever the bar comes or goes. Adding 72 here as
     well floated the launcher that much too high. */
  body.has-pdp-buy-bar:not(:has(.pdp-buy-bar.is-hidden)){--a11y-stack-bottom:max(92px,calc(var(--cookie-banner-space,0px) + 12px))}
}

/* --- the footer on a phone ------------------------------------------------

   Forty-two links in one column is a footer a thumb scrolls past rather than
   reads, and it was the tallest thing on every page of the shop. The three
   link columns are <details> now: open in the markup so nothing changes
   without JavaScript or on a desktop, closed by the script on a phone, where
   what stays visible is the shop's name, what it sells, where it is, the
   social links and one thing to press.

   Desktop keeps its four columns exactly as they were; everything here is
   either invisible above 760px or a marker the summary needed anyway. */
.footer-acc{display:block}
.footer-acc>summary{list-style:none;display:block}
.footer-acc>summary::-webkit-details-marker{display:none}
.footer-acc>summary::marker{content:""}
.footer-acc>summary h3{margin:0 0 16px}
/* The heading is the whole control on a phone and nothing on a desktop, so
   the pointer stays an arrow and a click on the title does not fold a column
   nobody asked to fold. */
@media(min-width:761px){
  .footer-acc>summary{cursor:default;pointer-events:none}
}

@media(max-width:760px){
  .footer-main-grid{gap:0;padding-block:26px 18px}
  .footer-brand-col{padding-bottom:18px}
  .footer-brand-col img{width:132px;height:72px;margin-bottom:12px}
  .footer-main-grid p{font-size:13.5px;line-height:1.65}
  .footer-brand-col p{margin:0 0 10px}
  .footer-map-link{margin-bottom:2px}
  .footer-socials{margin-top:14px;gap:8px}
  .footer-socials .footer-social{width:40px;height:40px}

  /* Each section is a row you press. 52px so the whole line is a target, and
     a chevron that turns, because a heading with no affordance reads as a
     heading. */
  .footer-acc{border-top:1px solid #E6E4E1}
  .footer-acc>summary{
    position:relative;
    min-height:52px;
    display:flex;align-items:center;
    padding-inline-end:28px;
    cursor:pointer;
  }
  /* The rule at line 1318 underlines every footer heading. On a desktop that
     line sits above a list; here the row is the control and the line under
     the label read as a second, broken divider. */
  .footer-acc>summary h3{margin:0;padding:0;border:0;font-size:15px}
  /* Physical borders, not logical ones: this is a chevron pointing down and
     then up, and down is down in both directions. */
  .footer-acc>summary:after{
    content:"";
    position:absolute;inset-inline-end:6px;top:50%;
    width:8px;height:8px;
    border-right:2px solid #8f8a84;
    border-bottom:2px solid #8f8a84;
    transform:translateY(-75%) rotate(45deg);
    transition:transform .18s ease;
  }
  .footer-acc[open]>summary:after{transform:translateY(-25%) rotate(225deg)}
  .footer-acc>summary:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:6px}
  .footer-acc-body{padding-bottom:14px}
  .footer-acc-body a{min-height:40px;display:flex;align-items:center;font-size:13.5px;line-height:1.5}
  .footer-contact-col .footer-hours{margin-top:8px}

  /* The strip above it: one line and one button. The sentence under the
     heading repeats what the button says, and the address is in the brand
     column six rows below, so neither earns its height here. */
  .footer-newsletter{min-height:0;padding-block:18px;gap:14px}
  .footer-newsletter h2{font-size:22px;line-height:1.25;margin:0}
  .footer-newsletter-sub{display:none}
  .footer-newsletter-actions .footer-newsletter-primary{width:100%;min-height:48px;font-size:14px}

  .footer-payments-row{padding-block:16px;gap:12px}
  .footer-cancel-row{padding-block:14px}
  .footer-bottom{min-height:56px;padding-block:12px}
}


/* =========================================================
   The add-to-cart toast
   =========================================================
   Replaces the cart drawer as the answer to an add on the product page. The
   saved / compare toast is given the same look here rather than a second
   style, so one message shape means "we heard you" everywhere. */
.shechter-toast{
  position:fixed;z-index:500;
  bottom:max(88px, calc(var(--cookie-banner-space, 0px) + 16px));
  left:50%;transform:translateX(-50%) translateY(8px);
  display:flex;align-items:center;gap:14px;
  /* Its own width, capped by the screen's. Shrink-to-fit alone measured the
     room right of left:50% -- half a phone -- and folded the line in two. */
  width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;
  padding:12px 18px;border-radius:12px;
  background:var(--ink);color:#fff;font-size:14px;line-height:1.35;white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0;transition:opacity .18s ease,transform .18s ease;
}
.shechter-toast.is-in{opacity:1;transform:translateX(-50%)}
.shechter-toast-icon{
  width:20px;height:20px;flex:0 0 auto;
  fill:none;stroke:#4ADE80;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.shechter-toast a{color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;flex:0 0 auto}
.shechter-toast a:hover{color:#fff}
/* The text is the only part that may give way when the line is long. */
.shechter-toast span{overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){
  .shechter-toast{transition:none;transform:translateX(-50%)}
}
@media (max-width:760px){
  /* Above the phone's own bottom bar, and never wider than the screen. */
  .shechter-toast{bottom:max(84px, calc(var(--cookie-banner-space, 0px) + 16px));white-space:normal}
}


/* =========================================================
   Version 1.150: the home page's feature strip
   =========================================================

   From design_handoff_feature_strip. It replaces the strip that made the
   same four claims and led nowhere -- a shopper who read "חנות בתל אביב"
   and wanted the address had to leave and find it.

   The colours are the handoff's own, kept literally rather than mapped onto
   the theme's tokens, because the brief asks for them one to one. Three of
   them are within a few units of --red-text (#B3191F), --red-soft (#FDECEC)
   and --muted (#6D6A66); aliasing them is a one-line change here.

   Never three columns: four items in three tracks leave one alone on a row
   and expose the divider colour along the empty half. */
.feature-strip{
  padding:40px 0;
  --fs-red:#b3121b;
  --fs-red-hi:#d21a24;
  --fs-red-lo:#a30e17;
  --fs-red-tint:#fbeceb;
  --fs-tile-a:#fdf1f0;
  --fs-tile-b:#f8dbd8;
  --fs-ink:#1a1414;
  --fs-muted:#6d6462;
  --fs-line:#ece7e4;
  --fs-divider:#f0ebe9;
}
.fs-card{
  max-width:1200px;margin-inline:auto;
  background:#fff;border:1px solid var(--fs-line);border-radius:24px;overflow:hidden;
  box-shadow:0 1px 2px rgba(26,16,16,.04),0 12px 32px -16px rgba(26,16,16,.10);
}
/* The 1px gap IS the divider: the list's own background shows through it.
   No border rules, so a wrapped row cannot double one up or leave one
   hanging past the last item. */
.fs-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1px;background:var(--fs-divider);
  grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;
}
.fs-item{background:#fff}
.fs-link{
  display:flex;align-items:flex-start;gap:16px;padding:22px 24px;
  height:100%;box-sizing:border-box;
  color:inherit;text-decoration:none;outline:none;
  transition:background .25s ease;
}
a.fs-link:hover{background:linear-gradient(180deg,#ffffff 0%,#fdf4f3 100%)}
/* Inset, and the theme's own outline turned off here rather than on the
   base rule -- the global a:focus-visible outranks .fs-link, so the two rings
   drew together and the outer one, offset 2px, was clipped by the card's
   overflow:hidden on the items at its edges. The inset ring is the handoff's
   and holds about 7:1 against the white item, well past the 3:1 WCAG 2.4.7
   asks of a focus indicator. */
.fs-link:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--fs-red)}
.fs-tile{
  position:relative;flex:none;width:50px;height:50px;border-radius:16px;
  background:linear-gradient(145deg,var(--fs-tile-a) 0%,var(--fs-tile-b) 100%);
  border:1px solid rgba(179,18,27,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  color:var(--fs-red);display:grid;place-items:center;
  transition:background .22s ease,color .22s ease,box-shadow .22s ease,border-color .22s ease;
}
a.fs-link:hover .fs-tile{
  background:linear-gradient(145deg,var(--fs-red-hi) 0%,var(--fs-red-lo) 100%);
  color:#fff;border-color:transparent;
  box-shadow:0 12px 24px -10px rgba(179,18,27,.55);
}
.fs-tile svg{width:22px;height:22px}
.fs-body{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:1px;flex:1;align-self:stretch}
.fs-title{font-size:17px;font-weight:800;color:var(--fs-ink);line-height:1.25;letter-spacing:-.01em;text-wrap:pretty}
.fs-text{font-size:14px;font-weight:400;color:var(--fs-muted);line-height:1.45;text-wrap:pretty}
/* margin-top:auto pins the pill to the bottom of the tallest item, so all
   four sit on one line however long the descriptions run. */
.fs-cta-row{margin-top:auto;padding-top:12px;display:flex}
.fs-cta{
  display:inline-flex;align-items:center;gap:8px;height:30px;
  padding:0 12px 0 10px;border-radius:999px;
  background:var(--fs-red-tint);color:var(--fs-red);
  font-size:13.5px;font-weight:600;line-height:1;white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.fs-cta svg{width:14px;height:14px}
a.fs-link:hover .fs-cta{background:var(--fs-red);color:#fff}

@media(max-width:1040px){
  .fs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .feature-strip{padding:28px 0}
}
@media(max-width:520px){
  .fs-grid{grid-template-columns:1fr}
  .fs-link{padding:18px 18px}
}
/* A hover state on a touch screen is a state that never ends: the first tap
   paints it and nothing takes it off. */
@media(hover:none) and (pointer:coarse){
  a.fs-link:hover{background:#fff}
  a.fs-link:hover .fs-tile{
    background:linear-gradient(145deg,var(--fs-tile-a) 0%,var(--fs-tile-b) 100%);
    color:var(--fs-red);border-color:rgba(179,18,27,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  }
  a.fs-link:hover .fs-cta{background:var(--fs-red-tint);color:var(--fs-red)}
}
@media(prefers-reduced-motion:reduce){
  .fs-link,.fs-tile,.fs-cta{transition:none}
}

/* ״הגדרות עוגיות״: the way back to the cookie choice, on every page. A
   button that reads as a footer link, because it opens the banner rather
   than going anywhere. */
.footer-cookie-settings{
  padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
}
.footer-cookie-settings:hover{color:var(--red-text)}
.footer-cookie-settings:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}


/* No results: a card that says what to do next, instead of an empty toolbar
   box and WooCommerce's bare blue bar. */
.shop-empty{margin:10px 0 40px;padding:28px 24px;border:1px solid var(--line);border-radius:16px;background:#fff;text-align:center}
.shop-empty h2{margin:0 0 8px;font-size:20px}
.shop-empty p{margin:0 auto 14px;max-width:34rem;color:#4a4744}
.shop-empty-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:0!important}
.shop-empty-actions .button-secondary{background:#fff!important;color:var(--ink)!important;border:1px solid #8c8781!important}

/* WooCommerce's info icon sits 1.5em in from the start edge; the start
   padding keeps the sentence's first word clear of it. */
.shechter-collect-note{max-width:1180px;margin:0 auto 18px;padding:14px 18px;padding-inline-start:3.5em;font-size:15px;line-height:1.55}

/* Typed addresses read left to right: in an RTL box a half-typed 'abc@'
   showed as '@abc' beside the error. Aligned with the form all the same. */
input[type="email"],input[type="tel"],input[autocomplete="email"],input[autocomplete="tel"]{direction:ltr;text-align:right}
input[type="email"]::placeholder,input[type="tel"]::placeholder{direction:rtl}
/* A long unbroken search term pushed the page sideways on a phone. */
.shop-hero h1{overflow-wrap:anywhere}
/* The cancellation receipt is focused for screen readers; a red ring made
   the green confirmation look like an error. */
.cancel-notice:focus,.cancel-notice:focus-visible{outline:none}
.consent-notice{color:#4a4744;font-size:14px}
/* 404 */
.page-404 .product-search,.page-404 form{max-width:34rem;margin:18px 0}
/* The search form is laid out only inside the header's pill (.search). Here
   its icon had no size at all and grew to the width of the card: a magnifying
   glass half a screen tall, which is what a visitor from an old link saw. */
.page-404 .woocommerce-product-search{height:52px;display:flex;align-items:center;min-width:0;border:1px solid var(--line-strong);border-radius:14px;background:#fff}
.page-404 .woocommerce-product-search:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(216,35,42,.16)}
.page-404 .woocommerce-product-search>svg{width:20px;height:20px;margin-inline:16px 10px;color:#777;flex:0 0 auto}
.page-404 .woocommerce-product-search>input[type=search]{height:100%;min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px;padding:0 6px}
.page-404 .woocommerce-product-search>input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.page-404 .woocommerce-product-search>button{height:40px;min-width:82px;margin-inline:4px;border:0;border-radius:10px;background:var(--red);color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.page-404 .woocommerce-product-search>button:hover{background:var(--red-dark)}
@media (max-width:560px){
  .page-404 .woocommerce-product-search>svg{margin-inline:13px 7px}
  .page-404 .woocommerce-product-search>button{min-width:72px}
}
.page-404-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.page-404-actions .button-secondary{border:1px solid #8c8781}


/* =========================================================
   1.159: the last pre-launch sweep
   ========================================================= */

/* The empty notices box was a third flex child under space-between and
   pushed the result count into the middle of the bar; a real notice gets
   its own full row above the count and the sort. */
.results-toolbar{flex-wrap:wrap}
.results-toolbar .woocommerce-notices-wrapper:empty{display:none}
.results-toolbar .woocommerce-notices-wrapper{flex:1 0 100%;order:-1}
.results-toolbar .woocommerce-notices-wrapper > *{margin:0}

/* The sticky buy bar is 72px tall: without room at the bottom, a control
   reached by Tab scrolled in just far enough to sit under it. */
html:has(.pdp-buy-bar){scroll-padding-bottom:88px}

/* Guides: html already reserves the header's height for an anchor, and the
   headings' own scroll-margin added it a second time. */
.guide-body h2,.guide-body h3{scroll-margin-top:0}

/* Crumbs wrap as whole crumbs instead of splitting "עמוד / הבית". */
.breadcrumbs{flex-wrap:wrap;row-gap:4px}
.breadcrumbs a{white-space:nowrap}

/* The empty cart's "חדש בחנות" grid: the sale price in the shop's own
   style, not the browser's underlined <ins>. */
.wc-block-grid__product-price ins{text-decoration:none;color:var(--red)}
.wc-block-grid__product-price del{color:var(--muted);font-weight:500;font-size:.88em}

/* Compare on a phone: the row labels stay put while the products scroll
   under them, so "12 חודשים" still says what it is. */
@media(max-width:760px){
  .compare-table tbody th,.compare-corner{position:sticky;inset-inline-start:0;z-index:2;width:110px;white-space:normal}
}

/* Opened by a click, the cart drawer takes focus itself rather than its X,
   so Safari has no button to ring; the panel is not a control. */
.cart-drawer:focus{outline:none}

/* The cart's one checkout button. WooCommerce marks it --sticky whenever its
   place is below the fold and then hides it outright on desktop and on short
   screens, so Tab went from the shipping choice straight to the footer.
   Where it is not pinned to the bottom, it simply stays where it is. */
@media(min-width:783px){html .wc-block-cart .wc-block-cart__submit-container--sticky{display:block}}
@media screen and (max-height:500px){
  html .wc-block-cart .wc-block-cart__submit-container--sticky{display:block;position:static;width:auto;padding:0;background:none}
  html .wc-block-cart .wc-block-cart__submit-container--sticky::before{display:none}
}

/* =========================================================
   1.159: the accessibility widget's text size, at every width
   =========================================================
   The widget enlarges text with zoom on <body>. Anything sized from the
   window (vw, dvh, the media queries) is multiplied with it, so panels and
   rows sized that way came out wider than the screen. --a11y-vw and
   --a11y-unzoom (theme.js) carry the real width and the inverse factor. */

/* Header: one row at every width while zoomed, not only on phones. At 125%
   on a tablet the cart icon wrapped under the category row, where a tap
   opened "מבצעים"; from 150% the logo ran off the edge. */
html.a11y-zoomed .header-actions{flex-wrap:nowrap}
html.a11y-zoomed .header-actions .sale-link{display:none}
html.a11y-zoomed .header-actions .action-link>span{
  position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
/* The logo is a picture, not text: it keeps its designed size and the
   search field gives way instead. Shrunk into its grid track it came down
   to 28px wide at 200%, and grown it ran off the edge. */
html.a11y-zoomed .site-header .logo{zoom:var(--a11y-unzoom,1)}
@media(min-width:761px){
  html.a11y-zoomed .header-main{grid-template-columns:auto minmax(0,1fr) auto}
}
html.a11y-zoomed.a11y-narrow .header-main{grid-template-columns:42px auto minmax(0,1fr)}
/* The checkout's header has its own three tracks and none of the shop
   header's: the rules above squeezed its logo into the menu button's 42px on
   a phone. Its width-based media queries never see the zoom either, so at
   zoom it takes the phone's arrangement at every width: back, logo, note. */
html.a11y-zoomed .site-header-checkout .header-main{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);height:auto;min-height:0}
html.a11y-zoomed .site-header-checkout .checkout-steps,
html.a11y-zoomed .site-header-checkout .checkout-phone{display:none}
html.a11y-zoomed .site-header-checkout .header-actions-checkout{display:contents}
html.a11y-zoomed .site-header-checkout .logo{grid-column:2;grid-row:1}
html.a11y-zoomed .site-header-checkout .checkout-back-link{grid-column:1;grid-row:1;justify-self:start}
html.a11y-zoomed .site-header-checkout .checkout-secure-note{display:flex;grid-column:3;grid-row:1;justify-self:end}

/* Panels: as wide as the screen at most, as tall as the screen. */
html.a11y-zoomed .cart-drawer{width:min(420px,var(--a11y-vw))}
html.a11y-zoomed .ask-panel{width:min(430px,var(--a11y-vw))}
html.a11y-zoomed .pay-modal{width:min(440px,calc(var(--a11y-vw) - 24px));max-height:min(calc(78vh * var(--a11y-unzoom,1)),560px)}
@media(max-width:760px){
  html.a11y-zoomed .main-nav{width:min(370px,calc(var(--a11y-vw) * .9));height:calc(100dvh * var(--a11y-unzoom,1))}
  html.a11y-zoomed .filters{width:min(340px,calc(var(--a11y-vw) * .9))}
}

/* The cookie banner and the product buy bar keep their designed size, like
   the rest of the floating chrome: grown, they climbed over the launcher
   and the WhatsApp button, whose offsets are measured unzoomed. */
html.a11y-zoomed .cookie-banner,
html.a11y-zoomed .pdp-buy-bar{zoom:var(--a11y-unzoom,1)}

/* Rows that were sized from the window or would not wrap. */
.pdp-assurance-list{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
html.a11y-zoomed .review-card{flex-basis:calc(var(--a11y-vw) * .82)}
html.a11y-zoomed .fs-grid{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
html.a11y-zoomed .fs-cta{white-space:normal;height:auto;min-height:30px;padding-block:6px;line-height:1.3}
html.a11y-narrow .fs-link{flex-direction:column}
html.a11y-zoomed .loop-cart{flex-wrap:wrap}
html.a11y-zoomed .entry-content a,
html.a11y-zoomed .pdp-assurance a,
html.a11y-zoomed .pdp-help a{overflow-wrap:anywhere}

/* Cart lines stack instead of being clipped: the table kept its minimum
   widths inside a box capped at the real screen width. */
html.a11y-zoomed .wp-block-woocommerce-cart{overflow-x:auto}
html.a11y-zoomed .is-mobile table.wc-block-cart-items .wc-block-cart-items__row{grid-template-columns:minmax(0,1fr);row-gap:8px}
html.a11y-zoomed .is-mobile table.wc-block-cart-items .wc-block-cart-items__row :is(.wc-block-cart-item__image,.wc-block-cart-item__product,.wc-block-cart-item__total){grid-column:1;grid-row:auto;padding-inline:0}
html.a11y-zoomed .is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image{max-width:80px}
html.a11y-zoomed .is-mobile table.wc-block-cart-items .wc-block-cart-item__quantity{flex-wrap:wrap;padding-inline:0}

/* The cart's payments table scrolls inside its own box rather than dragging
   the cart with it, and its first column may wrap. The cart only: in the
   product page's dialog the focusable body is the scroller, and a second
   one inside it could not be reached by keyboard in Safari. */
.cart-installments-more .pay-table-wrap{overflow-x:auto}
html.a11y-zoomed .pay-table tbody th{white-space:normal}
html.a11y-zoomed .pay-badge{display:block;width:max-content;margin-inline-start:0;margin-top:2px}
/* A closed select is one line. Zoomed, the chosen plan read "תשלו"; at its
   designed size it fits, and the list it opens is the phone's own. */
html.a11y-zoomed .cart-installments-select{zoom:var(--a11y-unzoom,1)}
/* Even so the plan's label is cut, so it is repeated under the select as a
   line that wraps. Hidden from screen readers: the select says it already. */
.cart-installments-chosen{display:none}
html.a11y-zoomed .cart-installments-chosen{display:block;margin:0;font-weight:700;color:var(--ink);overflow-wrap:anywhere}

/* Listings: the sort select took its widest option's width and ran off the
   screen at 175-200%. */
html.a11y-zoomed .results-toolbar .woocommerce-ordering{min-width:0}
html.a11y-zoomed .results-toolbar select{max-width:100%;min-width:0}

/* Content pages: an unbreakable token such as "(pickuppoint.co.il)," ran
   past a narrow list item. */
html.a11y-zoomed .entry-content{overflow-wrap:anywhere}
/* ...but not in the cart's payments table, which sits in .entry-content:
   there it split "22,406" into "22,4 / 06" instead of letting the table
   scroll in its own box. */
html.a11y-zoomed .cart-installments-more .pay-table :is(th,td){overflow-wrap:normal}
/* Drawn inside the box: at a large text size the table is exactly as wide
   as the cart block, a scroll container that clipped a ring drawn outside
   it, so a keyboard user saw no focus at all. The widget's keyboard mode
   draws its own ring outside with !important, so it is pulled in too. */
.cart-installments-more .pay-table-wrap:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
html.a11y-keyboard .cart-installments-more .pay-table-wrap:focus{outline-offset:-4px!important}

/* The checkout reflows instead of being clipped: a fieldset keeps its
   min-content width, the summary is a table, and each summary line is a flex
   row whose one-line sale badge squeezed the name to a letter per line. */
html.a11y-zoomed .wp-block-woocommerce-checkout fieldset{min-width:0}
html.a11y-zoomed .wc-block-components-order-summary__content{display:block}
html.a11y-zoomed .wc-block-components-order-summary-item{flex-wrap:wrap}
html.a11y-zoomed .wc-block-components-order-summary-item__description{flex:1 1 0;min-width:0}
html.a11y-narrow .wc-block-components-order-summary-item__description{flex:1 1 100%;padding-inline:0}
html.a11y-zoomed .wc-block-components-order-summary-item__total-price{flex:1 0 100%}
html.a11y-zoomed .wc-block-components-sale-badge{white-space:normal}
html.a11y-zoomed .wc-block-components-radio-control__option-layout,
html.a11y-zoomed .wc-block-components-radio-control__label-group{flex-wrap:wrap;min-width:0}

/* --- the accessibility panel on short screens -------------------------
   The whole panel scrolls there, under a sticky head and foot; focus that
   scrolled a control into view left it under the foot. */
@media (max-height:500px){
  .a11y-panel{scroll-padding-block:130px 90px}
}

/* --- contrast modes ------------------------------------------------------
   Every image is turned back to its own colours, and a black logo on a
   transparent ground came back black on the now-black card. Logos invert
   with the page instead. */
html.a11y-dark :is(.brand-card,.logo,.footer-brand-col) img,
html.a11y-invert :is(.brand-card,.logo,.footer-brand-col) img{filter:none}

/* --- motion off ------------------------------------------------------------
   The brand strip stopped, with six of its eight brands past the edge and
   no way to reach them. Stopped, it scrolls, and the loop's second copy
   goes. */
@media (prefers-reduced-motion:reduce){
  .brands-carousel{overflow-x:auto}
  .brand-card[aria-hidden="true"]{display:none}
  html{scroll-behavior:auto}
}
html.a11y-noanim .brands-carousel{overflow-x:auto}
html.a11y-noanim .brand-card[aria-hidden="true"]{display:none}

/* --- focus -------------------------------------------------------------- */

/* Product cards clip their overflow, and the global ring is drawn outside
   the link: all that showed was a thin red line across the card. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:focus-visible,
.product-card a.product-media:focus-visible{outline-offset:-3px}

/* The ask-us consent box: the text-field focus style above paints a border
   a native checkbox does not draw, so it showed nothing at all. */
.ask-form input[type=checkbox]:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* Phones: the contact bar (and the cookie banner while it is up) cover the
   bottom of the screen, and Tab scrolled controls in just far enough to
   land under them. */
@media(max-width:760px){
  html{scroll-padding-bottom:calc(76px + var(--cookie-banner-space, 0px))}
  html:has(.pdp-buy-bar){scroll-padding-bottom:calc(88px + var(--cookie-banner-space, 0px))}
  /* The page's last line can scroll clear of the launcher above the bar. */
  .site-footer .footer-bottom{padding-bottom:72px}
}
@media(max-width:782px){
  html:has(.wc-block-cart__submit-container--sticky){scroll-padding-bottom:96px}
}

/* The instalment table scrolls inside the dialog; it takes focus so the
   keyboard can scroll it (Safari does not make scrollers focusable). */
.pay-modal-body:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
/* The pull-out margin that lines the buttons up with the price is 10px each
   side; zoomed on a phone, the gutter it pulls into is smaller than that. */
html.a11y-zoomed .pdp-actions{margin-inline:0}
html.a11y-zoomed .pdp-action{min-width:0;white-space:normal}
/* The price ladder: two cards of about 90px at 200% on a phone, and a
   nowrap price wider than that. One column when the zoom leaves little room. */
html.a11y-narrow .pdp-ladder-grid{grid-template-columns:minmax(0,1fr)}
html.a11y-zoomed .pdp-rung,html.a11y-zoomed .pdp-rung-link{min-width:0}

/* ==========================================================================
   The checkout header
   ==========================================================================
   Logo, the three steps with this page marked, the phone, and one way back.
   Below 900px, the design's phone header: "‹ הסל" on the start side, the
   logo in the middle, "מאובטח" on the end side. The same header serves the
   order-pay page, where "תשלום" is still the step the buyer is on. */
.site-header-checkout .header-main{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  width:min(1120px,calc(100% - 40px));height:auto;min-height:56px;padding-block:8px;
}
.site-header-checkout .logo,
.site-header-checkout .logo:hover,
.site-header-checkout .logo:focus-within{width:auto;height:40px}
.site-header-checkout .logo a{display:flex;height:100%}
.site-header-checkout .logo img,
.site-header-checkout .logo .custom-logo{display:block;width:auto;height:100%;max-height:40px}

.checkout-steps{
  justify-self:center;display:flex;align-items:center;gap:8px;
  margin:0;padding:0;list-style:none;
  font-size:12px;font-weight:600;line-height:1;color:#6f6b64;
}
.checkout-steps li{display:flex;align-items:center;gap:5px;margin:0;white-space:nowrap}
.checkout-steps li + li::before{content:"";width:22px;height:1px;margin-inline-end:3px;background:#d9d6cf}
.checkout-steps .is-current{color:var(--ink)}
.checkout-step-dot{
  flex:none;width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid #d9d6cf;font-size:10px;font-weight:700;
}
.checkout-steps .is-done .checkout-step-dot{border:0;background:var(--ink);color:#fff}
.checkout-steps .is-done .checkout-step-dot svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.checkout-steps .is-current .checkout-step-dot{border:0;background:var(--red);color:#fff}

.header-actions-checkout{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.header-actions-checkout .checkout-phone{flex-direction:row;min-width:0;height:auto;border:0;
  display:flex;align-items:center;gap:6px;padding:0 4px;
  color:#4a4842;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;
}
.header-actions-checkout .checkout-phone:hover{color:var(--red-dark)}
.header-actions-checkout .checkout-phone svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.header-actions-checkout .checkout-phone span{unicode-bidi:isolate;font-variant-numeric:tabular-nums}

.checkout-back-link{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;
  border:1.5px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);
  font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.checkout-back-link:hover{background:var(--ink);color:#fff}
.checkout-back-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.checkout-back-link svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.checkout-back-link .checkout-back-chevron,
.checkout-back-link .label-short{display:none}

.checkout-secure-note{display:none;align-items:center;gap:5px;color:#4a4842;font-size:12px;font-weight:600;white-space:nowrap}
.checkout-secure-note svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:899.98px){
  .site-header-checkout .header-main{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);min-height:52px;width:calc(100% - 32px)}
  .site-header-checkout .checkout-steps,
  .site-header-checkout .checkout-phone{display:none}
  .site-header-checkout .header-actions-checkout{display:contents}
  .site-header-checkout .logo{grid-column:2;grid-row:1}
  .site-header-checkout .logo,
  .site-header-checkout .logo:hover,
  .site-header-checkout .logo:focus-within{height:32px}
  .site-header-checkout .logo img{max-height:32px}
  .site-header-checkout .checkout-back-link{
    grid-column:1;grid-row:1;justify-self:start;
    height:40px;padding:0;gap:4px;border:0;background:none;font-size:14px;font-weight:700;
  }
  .site-header-checkout .checkout-back-link:hover{background:none;color:var(--red-dark)}
  .site-header-checkout .checkout-back-link .checkout-back-cart,
  .site-header-checkout .checkout-back-link .label-full{display:none}
  .site-header-checkout .checkout-back-link .checkout-back-chevron{display:block}
  .site-header-checkout .checkout-back-link .label-short{display:inline}
  .site-header-checkout .checkout-secure-note{display:flex;grid-column:3;grid-row:1;justify-self:end}
}

/* The checkout footer: the pages worth reading before paying, and the
   trader's identity, on one row. */
.site-footer-checkout{padding:0;border-top:1px solid #e8e6e1;background:#fff}
.checkout-footer-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px 14px;flex-wrap:wrap;
  width:min(1120px,calc(100% - 40px));padding-block:16px;
  font-size:12px;line-height:1.5;color:#6f6b64;
}
.checkout-footer-links{display:flex;flex-wrap:wrap;gap:6px 16px;font-weight:600}
/* The accessibility launcher is fixed in the bottom-left corner, and below
   about 1300px the row's far end -- the cookie-settings button, on a phone
   the last link of a row -- ran under it. The row keeps that corner free.
   On a phone the page also drops the 64px kept below everything for the
   contact bar, which the checkout does not have. */
@media (max-width:1299.98px){
  .checkout-footer-row{padding-inline-end:84px}
}
@media (max-width:760px){
  body.shechter-co{padding-bottom:0}
}
.checkout-footer-links a{color:#4a4842;text-decoration:none}
.checkout-footer-links a:hover{color:var(--red-dark);text-decoration:underline}
.checkout-footer-id .footer-cookie-settings{font:inherit;color:inherit;text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}
@media (max-width:899.98px){
  .checkout-footer-row{width:calc(100% - 32px);flex-direction:column;align-items:flex-start}
}

/* The cart's coupon ticket. WooCommerce's cart stylesheet zeroes the side
   padding of the coupon panel from a three-class selector, which beat the
   ticket's own padding: the code field and מימוש sat against the dashed
   border. Same weight plus one, so the ticket keeps its inset. */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-coupon.wc-block-components-panel{padding-inline:12px}

/* The cart drawer on a phone: the remove button grew to 44px for a finger,
   and its 28px track did not, so it hung 16px out of the row to the screen
   edge. The track grows with it. */
@media (max-width:760px){
  .cart-drawer-item{grid-template-columns:64px 1fr 44px}
}