/*
Theme Name:   Éllie Nest Child
Theme URI:    https://ellienest.co.il
Description:  Premium baby-lifestyle child theme for Éllie Nest. Hebrew RTL, WooCommerce, WCAG 2.1 AA / IS 5568.
Author:       Éllie Nest
Template:     hello-elementor
Version:      1.1.0
Text Domain:  ellienest
Requires PHP: 7.4
License:      GPL-2.0-or-later
*/

/* ==========================================================================
   TABLE OF CONTENTS
   00. Design tokens
   01. Reset & base
   02. Accessibility utilities (skip link, focus, sr-only)
   03. Typography
   04. Layout (container, sections, grid)
   05. Buttons & links
   06. Forms
   07. Image placeholders (swap in Elementor)
   08. Announcement bar
   09. Header & navigation (desktop + mobile drawer)
   10. Hero
   11. Section headings
   12. Category tiles
   13. Product cards
   14. Badges & price
   15. USP / trust strip
   16. Editorial (magazine) cards
   17. Story / split section
   18. Newsletter
   19. Footer
   20. Breadcrumbs & pagination
   21. WooCommerce – archive / shop
   22. WooCommerce – single product
   23. WooCommerce – cart, checkout, notices (classic + blocks)
   24. Legal & content pages (prose)
   25. Cookie consent banner
   26. Accessibility widget slot
   27. Elementor compatibility
   28. Motion, forced-colors, print
   ========================================================================== */


/* ==========================================================================
   00. DESIGN TOKENS
   Contrast (WCAG 2.1) measured against Warm Ivory #F8F5EF:
     --en-ink        #302B27  12.86:1  → all text
     --en-text-muted #6B5D51   5.83:1  → secondary text, captions (AA normal text)
     --en-taupe      #9A8878   3.13:1  → large text (≥24px / ≥19px bold), icons, borders ONLY
     --en-rose       #D8B6B0   1.72:1  → decorative fills ONLY, never text or meaningful borders
     --en-field      #8C7B6C   3.74:1  → form-field borders (≥3:1 non-text contrast)
   On Butter Cream #F0E6D5: ink 11.32, muted 5.13 — both safe.
   On Soft Beige  #D9C8B5: use ink only (8.58). Muted fails (3.89) → do not use.
   On Dusty Rose  #D8B6B0: use ink only (7.49).
   ========================================================================== */
:root {
  /* Brand palette */
  --en-ivory:        #F8F5EF;  /* main background */
  --en-cream:        #F0E6D5;  /* secondary background */
  --en-beige:        #D9C8B5;  /* soft beige – surfaces, dividers */
  --en-taupe:        #9A8878;  /* warm taupe – decorative / large text only */
  --en-ink:          #302B27;  /* primary text */
  --en-rose:         #D8B6B0;  /* dusty rose – accent fills */

  /* Derived, contrast-safe tokens */
  --en-text-muted:   #6B5D51;  /* darker taupe for small text (5.83:1) */
  --en-field:        #8C7B6C;  /* input borders (3.74:1) */
  --en-line:         #E6DBCC;  /* decorative hairlines (non-essential) */
  --en-rose-tint:    #F2E4E0;  /* soft rose background, ink text on top */
  --en-white:        #FFFFFF;
  --en-ink-hover:    #4A423C;

  /* Status (all ≥4.5:1 on ivory and cream) */
  --en-error:        #A3312A;
  --en-success:      #3E6B4A;
  --en-sale:         #8E4A42;
  --en-info:         #3F5468;

  /* Semantic aliases */
  --en-bg:           var(--en-ivory);
  --en-bg-alt:       var(--en-cream);
  --en-surface:      var(--en-white);
  --en-text:         var(--en-ink);
  --en-border:       var(--en-line);
  --en-focus:        var(--en-ink);

  /* Typography
     Heebo/Assistant for UI; Frank Ruhl Libre for editorial display headings. */
  --en-font-body:    "Assistant", "Heebo", "Arial Hebrew", Arial, sans-serif;
  --en-font-display: "Frank Ruhl Libre", "Assistant", Georgia, serif;
  --en-font-latin:   "Cormorant Garamond", Georgia, serif; /* tagline & Latin accents */

  /* Fluid type scale (min 360px → max 1440px viewport) */
  --en-fs-xs:   0.8125rem;                                   /* 13px  */
  --en-fs-sm:   0.9375rem;                                   /* 15px  */
  --en-fs-base: 1.0625rem;                                   /* 17px – Hebrew reads small */
  --en-fs-md:   clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);   /* 18–20 */
  --en-fs-lg:   clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);   /* 22–28 */
  --en-fs-xl:   clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);      /* 28–40 */
  --en-fs-2xl:  clamp(2.125rem, 1.7rem + 1.9vw, 3.5rem);     /* 34–56 */
  --en-fs-hero: clamp(2.375rem, 1.8rem + 2.6vw, 4.25rem);    /* 38–68 */

  --en-lh-tight: 1.2;
  --en-lh-snug:  1.4;
  --en-lh-body:  1.7;
  --en-tracking-caps: 0.06em;  /* Hebrew has no capitals – keep tracking light */
  --en-tracking-latin: 0.18em; /* for Latin eyebrows/labels only */

  --en-fw-light:   300;
  --en-fw-regular: 400;
  --en-fw-medium:  500;
  --en-fw-semi:    600;
  --en-fw-bold:    700;

  /* Spacing scale (8pt base) */
  --en-space-1:  0.25rem;
  --en-space-2:  0.5rem;
  --en-space-3:  0.75rem;
  --en-space-4:  1rem;
  --en-space-5:  1.5rem;
  --en-space-6:  2rem;
  --en-space-7:  3rem;
  --en-space-8:  4rem;
  --en-space-9:  6rem;
  --en-space-10: 8rem;
  --en-section:  clamp(3.5rem, 2.5rem + 4vw, 7rem);  /* vertical section rhythm */

  /* Layout */
  --en-container:        1320px;
  --en-container-narrow: 760px;
  --en-gutter:           clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
  --en-header-h:         76px;

  /* Shape & depth – restrained, editorial */
  --en-radius-sm:   2px;
  --en-radius:      4px;
  --en-radius-lg:   10px;
  --en-radius-pill: 999px;
  --en-shadow-sm:   0 1px 2px rgba(48, 43, 39, 0.06);
  --en-shadow:      0 8px 24px -12px rgba(48, 43, 39, 0.18);
  --en-shadow-lg:   0 24px 48px -24px rgba(48, 43, 39, 0.28);

  /* Motion */
  --en-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --en-dur-fast: 150ms;
  --en-dur:      280ms;
  --en-dur-slow: 600ms;

  /* Focus ring – double ring stays visible on ivory, cream, rose and photos */
  --en-focus-ring: 0 0 0 2px var(--en-ivory), 0 0 0 4px var(--en-ink);

  /* Z-index scale */
  --en-z-header: 100;
  --en-z-drawer: 350; /* above the cookie bar: the drawer is modal */
  --en-z-cookie: 300;
  --en-z-a11y:   400;
  --en-z-skip:   1000;
}


/* ==========================================================================
   01. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--en-header-h) + var(--en-space-4));
}

body {
  margin: 0;
  background-color: var(--en-bg);
  color: var(--en-text);
  font-family: var(--en-font-body);
  font-size: var(--en-fs-base);
  font-weight: var(--en-fw-regular);
  line-height: var(--en-lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* RTL is the default direction for this site; the LTR fallback keeps
   the theme usable if an English language version is added later. */
html[dir="rtl"] body,
body.rtl { direction: rtl; text-align: right; }

img, svg, video, picture { display: block; max-width: 100%; height: auto; }
img { font-style: italic; } /* alt text styling if image fails */

a { color: var(--en-ink); text-decoration-color: var(--en-taupe); text-underline-offset: 0.2em; }
a:hover { color: var(--en-ink-hover); }

hr {
  border: 0;
  border-block-start: 1px solid var(--en-border);
  margin-block: var(--en-space-6);
}

::selection { background: var(--en-rose); color: var(--en-ink); }

/* Numbers, prices, SKUs and phone numbers stay LTR inside RTL text */
.en-ltr,
bdi.en-ltr,
.woocommerce-Price-amount,
.sku,
a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }

/* Directional icons (arrows, chevrons) flip automatically in RTL */
[dir="rtl"] .en-icon--directional { transform: scaleX(-1); }


/* ==========================================================================
   02. ACCESSIBILITY UTILITIES
   ========================================================================== */

/* Screen-reader only (WordPress core also outputs .screen-reader-text) */
.screen-reader-text,
.en-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link – first focusable element on every page */
.en-skip-link,
.skip-link.screen-reader-text:focus {
  position: fixed;
  inset-block-start: var(--en-space-3);
  inset-inline-start: var(--en-space-3);
  z-index: var(--en-z-skip);
  padding: var(--en-space-3) var(--en-space-5);
  background: var(--en-ink);
  color: var(--en-ivory);
  font-weight: var(--en-fw-semi);
  text-decoration: none;
  border-radius: var(--en-radius);
  transform: translateY(-200%);
  transition: transform var(--en-dur-fast) var(--en-ease);
}
.en-skip-link:focus,
.skip-link.screen-reader-text:focus {
  transform: translateY(0);
  clip: auto; clip-path: none;
  width: auto; height: auto; margin: 0;
  outline: none;
  box-shadow: var(--en-focus-ring);
}

/* Visible focus on EVERY interactive element (IS 5568 / WCAG 2.4.7).
   :focus-visible keeps mouse clicks clean while keyboard users always see it. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [contenteditable]):focus-visible {
  outline: 2px solid var(--en-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--en-ivory);
  border-radius: var(--en-radius-sm);
}
/* Fallback for browsers without :focus-visible */
@supports not selector(:focus-visible) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus {
    outline: 2px solid var(--en-focus);
    outline-offset: 3px;
  }
}
/* Never strip outlines without replacement */
:focus:not(:focus-visible) { outline: none; }

/* Minimum target size (WCAG 2.5.8-friendly: 44×44 for primary controls) */
.en-tap { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Links inside running text are underlined – color alone never signals a link */
.en-prose a,
.entry-content a:not(.en-btn):not(.button),
.woocommerce-product-details__short-description a {
  color: var(--en-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--en-taupe);
  transition: text-decoration-color var(--en-dur-fast) var(--en-ease);
}
.en-prose a:hover,
.entry-content a:not(.en-btn):not(.button):hover { text-decoration-color: var(--en-ink); text-decoration-thickness: 2px; }


/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.en-h1, .en-h2, .en-h3, .en-h4 {
  margin: 0 0 var(--en-space-4);
  color: var(--en-ink);
  font-family: var(--en-font-display);
  font-weight: var(--en-fw-regular);
  line-height: var(--en-lh-tight);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1, .en-h1 { font-size: var(--en-fs-2xl); }
h2, .en-h2 { font-size: var(--en-fs-xl); }
h3, .en-h3 { font-size: var(--en-fs-lg); line-height: var(--en-lh-snug); }
h4, .en-h4 { font-size: var(--en-fs-md); font-family: var(--en-font-body); font-weight: var(--en-fw-semi); line-height: var(--en-lh-snug); }
h5, h6     { font-size: var(--en-fs-base); font-family: var(--en-font-body); font-weight: var(--en-fw-semi); }

p { margin: 0 0 var(--en-space-4); text-wrap: pretty; }
p:last-child { margin-block-end: 0; }

small, .en-small { font-size: var(--en-fs-sm); }
.en-muted { color: var(--en-text-muted); }
.en-lead {
  font-size: var(--en-fs-md);
  line-height: 1.6;
  color: var(--en-text-muted);
  max-width: 38em;
}

/* Eyebrow / overline: small caps label above headings */
.en-eyebrow:lang(en), .en-eyebrow[lang="en"] { letter-spacing: var(--en-tracking-latin); }
.en-eyebrow {
  display: inline-block;
  margin-block-end: var(--en-space-3);
  font-family: var(--en-font-body);
  font-size: var(--en-fs-xs);
  font-weight: var(--en-fw-semi);
  letter-spacing: var(--en-tracking-caps);
  text-transform: uppercase;
  color: var(--en-text-muted);
}

/* Brand tagline "FOR THE MOMENTS THAT MATTER" – Latin, always LTR */
.en-tagline {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--en-font-latin);
  font-size: var(--en-fs-sm);
  font-weight: var(--en-fw-medium);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--en-text-muted);
}

blockquote {
  margin: var(--en-space-6) 0;
  padding-inline-start: var(--en-space-5);
  border-inline-start: 2px solid var(--en-rose);
  font-family: var(--en-font-display);
  font-size: var(--en-fs-lg);
  line-height: var(--en-lh-snug);
}

ul, ol { padding-inline-start: 1.25em; margin: 0 0 var(--en-space-4); }


/* ==========================================================================
   04. LAYOUT
   ========================================================================== */
.en-container {
  width: 100%;
  max-width: calc(var(--en-container) + var(--en-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--en-gutter);
}
.en-container--narrow { max-width: calc(var(--en-container-narrow) + var(--en-gutter) * 2); }
.en-container--wide   { max-width: none; }

.en-section          { padding-block: var(--en-section); }
.en-section--tight   { padding-block: calc(var(--en-section) * 0.6); }
.en-section--cream   { background: var(--en-cream); }
.en-section--beige   { background: var(--en-beige); }   /* ink text only */
.en-section--rose    { background: var(--en-rose-tint); }
.en-section--bordered { border-block: 1px solid var(--en-border); }

.en-grid {
  display: grid;
  gap: var(--en-grid-gap, var(--en-space-5));
  grid-template-columns: repeat(var(--en-cols, 4), minmax(0, 1fr));
}
.en-grid--2 { --en-cols: 2; }
.en-grid--3 { --en-cols: 3; }
.en-grid--4 { --en-cols: 4; }
@media (max-width: 1024px) { .en-grid--4 { --en-cols: 3; } }
@media (max-width: 860px)  { .en-grid--3, .en-grid--4 { --en-cols: 2; } }
@media (max-width: 560px)  { .en-grid--2 { --en-cols: 1; } .en-grid { --en-grid-gap: var(--en-space-4); } }

.en-stack > * + * { margin-block-start: var(--en-stack, var(--en-space-4)); }
.en-center { text-align: center; }


/* ==========================================================================
   05. BUTTONS & LINKS
   Primary: ink on ivory text (12.86:1). Secondary: outline. Never rose text.
   ========================================================================== */
.en-btn,
.button,
button.button,
input[type="submit"],
.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  --_bg: var(--en-ink);
  --_fg: var(--en-ivory);
  --_bd: var(--en-ink);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--en-space-2);
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_bd);
  border-radius: var(--en-radius-sm);
  font-family: var(--en-font-body);
  font-size: var(--en-fs-sm);
  font-weight: var(--en-fw-semi);
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--en-dur) var(--en-ease),
    color var(--en-dur) var(--en-ease),
    border-color var(--en-dur) var(--en-ease);
  -webkit-appearance: none;
  appearance: none;
}
.en-btn:hover,
.button:hover,
.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  --_bg: var(--en-ink-hover);
  --_bd: var(--en-ink-hover);
  color: var(--_fg);
}

/* Secondary – outline */
.en-btn--outline,
.is-style-outline .wp-block-button__link {
  --_bg: transparent;
  --_fg: var(--en-ink);
  --_bd: var(--en-ink);
}
.en-btn--outline:hover { --_bg: var(--en-ink); --_fg: var(--en-ivory); }

/* Soft – cream fill */
.en-btn--soft { --_bg: var(--en-cream); --_fg: var(--en-ink); --_bd: var(--en-cream); }
.en-btn--soft:hover { --_bg: var(--en-beige); --_bd: var(--en-beige); --_fg: var(--en-ink); }

/* Light – for use on dark/photo backgrounds */
.en-btn--light { --_bg: var(--en-ivory); --_fg: var(--en-ink); --_bd: var(--en-ivory); }
.en-btn--light:hover { --_bg: var(--en-cream); --_bd: var(--en-cream); --_fg: var(--en-ink); }

.en-btn--lg    { min-height: 56px; padding-inline: 2.5rem; font-size: var(--en-fs-base); }
.en-btn--sm    { min-height: 40px; padding: 0.5rem 1.125rem; font-size: var(--en-fs-xs); }
.en-btn--block { display: flex; width: 100%; }

/* Text link with animated underline (e.g. "לכל המוצרים ←") */
.en-link {
  display: inline-flex;
  align-items: center;
  gap: var(--en-space-2);
  padding-block: var(--en-space-1);
  color: var(--en-ink);
  font-weight: var(--en-fw-semi);
  font-size: var(--en-fs-sm);
  letter-spacing: 0.03em;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  transition: background-size var(--en-dur) var(--en-ease);
}
.en-link:hover { background-size: 0 1px; background-position: 0 100%; }
[dir="rtl"] .en-link:hover { background-position: 0 100%; }

/* Disabled state – still readable, clearly inactive */
.en-btn[disabled],
.button.disabled,
.button:disabled,
.woocommerce button.button:disabled {
  --_bg: var(--en-beige);
  --_bd: var(--en-beige);
  --_fg: var(--en-ink);
  cursor: not-allowed;
  opacity: 0.75;
}

/* Icon button (search, account, cart) */
.en-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  color: var(--en-ink);
  border: 0;
  border-radius: var(--en-radius-pill);
  cursor: pointer;
  transition: background-color var(--en-dur-fast) var(--en-ease);
}
.en-icon-btn:hover { background: var(--en-cream); }
.en-icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.en-count {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 2px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: var(--en-radius-pill);
  background: var(--en-ink);
  color: var(--en-ivory);
  font-size: 11px;
  font-weight: var(--en-fw-bold);
  line-height: 18px;
  text-align: center;
}


/* ==========================================================================
   06. FORMS
   Borders use --en-field (3.74:1) so fields are perceivable (WCAG 1.4.11).
   ========================================================================== */
label,
.en-label {
  display: block;
  margin-block-end: var(--en-space-2);
  font-size: var(--en-fs-sm);
  font-weight: var(--en-fw-semi);
  color: var(--en-ink);
}
.required, abbr.required { color: var(--en-error); text-decoration: none; border: 0; }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="number"], input[type="url"], input[type="date"],
select, textarea,
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  background: var(--en-white);
  color: var(--en-ink);
  border: 1px solid var(--en-field);
  border-radius: var(--en-radius-sm);
  font-family: var(--en-font-body);
  font-size: var(--en-fs-base); /* ≥16px prevents iOS zoom */
  line-height: 1.4;
  transition: border-color var(--en-dur-fast) var(--en-ease), box-shadow var(--en-dur-fast) var(--en-ease);
}
textarea { min-height: 140px; resize: vertical; }

input::placeholder, textarea::placeholder { color: var(--en-text-muted); opacity: 1; }

input:hover, select:hover, textarea:hover { border-color: var(--en-ink); }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--en-ink);
  outline-offset: 0;
  border-color: var(--en-ink);
  box-shadow: none;
}

/* Email, phone & numbers typed LTR even on an RTL form */
input[type="email"], input[type="tel"], input[type="url"], input[type="number"] { direction: ltr; text-align: right; }

/* Invalid state: color + icon + text, never color alone */
[aria-invalid="true"],
.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--en-error); border-width: 2px; }

.en-field-error {
  display: flex;
  gap: var(--en-space-2);
  margin-block-start: var(--en-space-2);
  color: var(--en-error);
  font-size: var(--en-fs-sm);
  font-weight: var(--en-fw-medium);
}
.en-field-error::before { content: "!"; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--en-error); color: var(--en-white); font-size: 0.75em; font-weight: 700; flex: none; margin-block-start: 0.2em; }

.en-help { margin-block-start: var(--en-space-2); font-size: var(--en-fs-sm); color: var(--en-text-muted); }

/* Custom select chevron – positioned on the logical end side */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: 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='%23302B27' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 8px;
  background-position: left 1rem center;
  padding-inline-end: 2.75rem;
}
html[dir="ltr"] select { background-position: right 1rem center; }

/* Checkbox & radio – native, recolored, 20px */
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px;
  margin: 0;
  margin-inline-end: var(--en-space-2);
  accent-color: var(--en-ink);
  vertical-align: middle;
}
.en-check { display: flex; align-items: flex-start; gap: var(--en-space-2); font-weight: var(--en-fw-regular); cursor: pointer; }
.en-check input { margin-block-start: 0.2em; flex: none; }


/* ==========================================================================
   07. IMAGE PLACEHOLDERS
   Usage: <div class="en-ph en-ph--portrait" role="img" aria-label="…">
   Replace with an Elementor Image widget or <img> using the same ratio class.
   ========================================================================== */
.en-ph {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: var(--en-ratio, 4 / 5);
  overflow: hidden;
  background-color: var(--en-cream);
  background-image:
    radial-gradient(circle at 30% 20%, rgba(216, 182, 176, 0.35), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(217, 200, 181, 0.6), transparent 60%);
  color: var(--en-text-muted);
  font-size: var(--en-fs-xs);
  letter-spacing: var(--en-tracking-caps);
  text-transform: uppercase;
}
.en-ph::after {
  content: attr(data-label);
  unicode-bidi: plaintext; /* "600×750" and Hebrew labels both read correctly */
  padding: var(--en-space-2) var(--en-space-3);
  border: 1px dashed var(--en-taupe);
  border-radius: var(--en-radius-sm);
  background: rgba(248, 245, 239, 0.7);
}
.en-ph--square    { --en-ratio: 1 / 1; }
.en-ph--portrait  { --en-ratio: 4 / 5; }
.en-ph--tall      { --en-ratio: 3 / 4; }
.en-ph--landscape { --en-ratio: 3 / 2; }
.en-ph--wide      { --en-ratio: 16 / 9; }
.en-ph--hero      { --en-ratio: auto; min-height: 100%; }

/* Real media inherits the same frames */
.en-media { position: relative; overflow: hidden; aspect-ratio: var(--en-ratio, 4 / 5); background: var(--en-cream); }
.en-media > img,
.en-media > picture > img { width: 100%; height: 100%; object-fit: cover; }

/* Logo slot */
.en-logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--en-ink); }
.en-logo img, .en-logo svg { height: clamp(32px, 2.4vw + 18px, 46px); width: auto; }
.en-logo__text { /* fallback wordmark until the logo file is uploaded */
  direction: ltr;
  font-family: var(--en-font-latin);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: var(--en-fw-medium);
  letter-spacing: 0.06em;
}


/* ==========================================================================
   08. ANNOUNCEMENT BAR
   ========================================================================== */
.en-announce {
  background: var(--en-ink);
  color: var(--en-ivory);
  font-size: var(--en-fs-xs);
  font-weight: var(--en-fw-medium);
  letter-spacing: 0.04em;
  text-align: center;
}
.en-announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--en-space-5);
  min-height: 38px;
  padding-block: var(--en-space-2);
}
.en-announce p { margin: 0; }
.en-announce a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.en-announce a:focus-visible { outline-color: var(--en-ivory); box-shadow: none; }
@media (max-width: 640px) { .en-announce__item + .en-announce__item { display: none; } }


/* ==========================================================================
   09. HEADER & NAVIGATION
   Markup: <header class="en-header" role="banner"> … <nav aria-label="ניווט ראשי">
   Layout (RTL): [logo]  [primary nav]  [search · account · cart]
   ========================================================================== */
.en-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--en-z-header);
  background: rgba(248, 245, 239, 0.96);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-block-end: 1px solid var(--en-border);
  transition: box-shadow var(--en-dur) var(--en-ease);
}
.admin-bar .en-header { inset-block-start: 32px; }
@media (max-width: 782px) { .admin-bar .en-header { inset-block-start: 0; } }
.en-header.is-scrolled { box-shadow: var(--en-shadow-sm); }

.en-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--en-space-6);
  min-height: var(--en-header-h);
}

.en-header__actions { display: flex; align-items: center; gap: var(--en-space-1); }

/* Primary nav – desktop */
.en-nav__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.2rem + 1.6vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.en-nav__item { position: relative; }
.en-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--en-space-1);
  min-height: 44px;
  padding-block: var(--en-space-2);
  color: var(--en-ink);
  font-size: var(--en-fs-sm);
  font-weight: var(--en-fw-medium);
  letter-spacing: 0.02em;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.en-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--en-dur) var(--en-ease);
}
.en-nav__link:hover::after,
.en-nav__link[aria-current="page"]::after,
.en-nav__item.current-menu-item > .en-nav__link::after,
.en-nav__item.current-menu-ancestor > .en-nav__link::after { transform: scaleX(1); }

/* Dropdown / mega panel – opened by aria-expanded on the toggle button (JS),
   with :focus-within as a no-JS keyboard fallback. */
.en-nav__panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  translate: 50% 0;
  min-width: 240px;
  padding: var(--en-space-5);
  background: var(--en-ivory);
  border: 1px solid var(--en-border);
  border-radius: var(--en-radius);
  box-shadow: var(--en-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--en-dur-fast) var(--en-ease), transform var(--en-dur-fast) var(--en-ease), visibility 0s linear var(--en-dur-fast);
}
html[dir="ltr"] .en-nav__panel { translate: -50% 0; }
.en-nav__item:focus-within > .en-nav__panel,
.en-nav__toggle[aria-expanded="true"] + .en-nav__panel,
.en-nav__item:hover > .en-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.en-nav__panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--en-space-1); }
.en-nav__panel a {
  display: block;
  padding: var(--en-space-2) 0;
  color: var(--en-ink);
  text-decoration: none;
  font-size: var(--en-fs-sm);
}
.en-nav__panel a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.en-nav__chev { width: 10px; height: 10px; transition: transform var(--en-dur-fast) var(--en-ease); }
.en-nav__toggle[aria-expanded="true"] .en-nav__chev { transform: rotate(180deg); }

/* Mobile menu trigger – hidden on desktop */
.en-header__burger { display: none; }

@media (max-width: 1024px) {
  .en-header__inner { grid-template-columns: auto 1fr auto; gap: var(--en-space-3); }
  .en-header__burger { display: inline-flex; }
  .en-header .en-nav--desktop { display: none; }
  .en-header__brand { justify-self: center; }
}

/* Off-canvas drawer (mobile nav & mini-cart share this) */
.en-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--en-z-drawer);
  display: flex;
  flex-direction: column;
  width: min(420px, 90vw);
  background: var(--en-ivory);
  box-shadow: var(--en-shadow-lg);
  transform: translateX(100%);
  transition: transform var(--en-dur) var(--en-ease), visibility 0s linear var(--en-dur);
  visibility: hidden;
}
html[dir="ltr"] .en-drawer { transform: translateX(-100%); }
.en-drawer--end { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(-100%); }
html[dir="ltr"] .en-drawer--end { transform: translateX(100%); }
.en-drawer.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }

.en-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--en-space-4) var(--en-space-5);
  border-block-end: 1px solid var(--en-border);
}
.en-drawer__title { margin: 0; font-size: var(--en-fs-md); }
.en-drawer__body { flex: 1; overflow-y: auto; padding: var(--en-space-5); overscroll-behavior: contain; }
.en-drawer__foot { padding: var(--en-space-5); border-block-start: 1px solid var(--en-border); background: var(--en-cream); }

.en-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--en-z-drawer) - 1);
  background: rgba(48, 43, 39, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--en-dur) var(--en-ease), visibility 0s linear var(--en-dur);
}
.en-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
body.en-no-scroll { overflow: hidden; }

/* Mobile nav list */
.en-mnav { list-style: none; margin: 0; padding: 0; }
.en-mnav > li { border-block-end: 1px solid var(--en-border); }
.en-mnav a,
.en-mnav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--en-ink);
  font-family: var(--en-font-display);
  font-size: var(--en-fs-md);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.en-mnav .sub-menu { list-style: none; margin: 0; padding: 0 0 var(--en-space-4); }
.en-mnav .sub-menu a { min-height: 44px; font-family: var(--en-font-body); font-size: var(--en-fs-base); color: var(--en-text-muted); }

/* Search overlay */
.en-search {
  padding-block: var(--en-space-5);
  background: var(--en-ivory);
  border-block-end: 1px solid var(--en-border);
}
.en-search[hidden] { display: none; }
.en-search__form { display: flex; gap: var(--en-space-3); max-width: 720px; margin-inline: auto; }


/* ==========================================================================
   10. HERO
   Split editorial hero: text block + full-bleed image. On mobile: image first.
   ========================================================================== */
.en-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: min(86vh, 820px);
  background: var(--en-cream);
  overflow: hidden;
}
.en-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--en-space-8) var(--en-gutter);
  padding-inline-start: max(var(--en-gutter), calc((100vw - var(--en-container)) / 2));
}
.en-hero__title {
  margin-block-end: var(--en-space-5);
  font-size: var(--en-fs-hero);
  line-height: 1.12;
  max-width: 12em;
}
.en-hero__subtitle {
  margin-block-end: var(--en-space-6);
  font-size: var(--en-fs-md);
  color: var(--en-text-muted);
  max-width: 28em;
}
.en-hero__actions { display: flex; flex-wrap: wrap; gap: var(--en-space-3); }
.en-hero__media { position: relative; min-height: 420px; }
.en-hero__media > img,
.en-hero__media > .en-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Variant: full-bleed image with text overlaid on a protective ivory panel */
.en-hero--overlay { grid-template-columns: 1fr; }
.en-hero--overlay .en-hero__media { position: absolute; inset: 0; }
.en-hero--overlay .en-hero__content {
  position: relative;
  z-index: 1;
  align-self: end;
  max-width: 620px;
  margin: var(--en-gutter);
  padding: var(--en-space-7);
  background: rgba(248, 245, 239, 0.94); /* guarantees text contrast on any photo */
  border-radius: var(--en-radius);
}

@media (max-width: 900px) {
  .en-hero { grid-template-columns: 1fr; min-height: 0; }
  .en-hero__media { order: -1; min-height: 0; aspect-ratio: 4 / 5; }
  .en-hero__content { padding: var(--en-space-7) var(--en-gutter); align-items: stretch; }
  .en-hero__actions .en-btn { flex: 1 1 100%; }
  .en-hero--overlay .en-hero__content { margin: 0; padding: var(--en-space-6) var(--en-gutter); background: var(--en-ivory); border-radius: 0; }
  .en-hero--overlay .en-hero__media { position: relative; }
}


/* ==========================================================================
   11. SECTION HEADINGS
   ========================================================================== */
.en-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--en-space-5);
  margin-block-end: var(--en-space-7);
}
.en-sec-head__title { margin: 0; }
.en-sec-head__desc { margin-block-start: var(--en-space-3); color: var(--en-text-muted); max-width: 40em; }
.en-sec-head--center { flex-direction: column; align-items: center; text-align: center; }
@media (max-width: 640px) {
  .en-sec-head { flex-direction: column; align-items: flex-start; margin-block-end: var(--en-space-6); }
}

/* Thin rose rule ornament under centered headings */
.en-rule { display: block; width: 48px; height: 1px; margin: var(--en-space-4) auto 0; background: var(--en-taupe); }


/* ==========================================================================
   12. CATEGORY TILES
   ========================================================================== */
.en-cat {
  position: relative;
  display: block;
  color: var(--en-ink);
  text-decoration: none;
}
.en-cat__media { aspect-ratio: 3 / 4; border-radius: var(--en-radius); overflow: hidden; background: var(--en-cream); }
.en-cat__media img,
.en-cat__media .en-ph { height: 100%; transition: transform var(--en-dur-slow) var(--en-ease); }
.en-cat:hover .en-cat__media img,
.en-cat:hover .en-cat__media .en-ph { transform: scale(1.04); }
.en-cat__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--en-space-2);
  margin-block-start: var(--en-space-3);
  font-family: var(--en-font-display);
  font-size: var(--en-fs-md);
}
.en-cat__count { font-family: var(--en-font-body); font-size: var(--en-fs-xs); color: var(--en-text-muted); }
.en-cat:focus-visible { outline-offset: 6px; }

/* Horizontal-scroll rail on mobile */
@media (max-width: 640px) {
  .en-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    grid-template-columns: none;
    gap: var(--en-space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--en-space-3);
    margin-inline: calc(var(--en-gutter) * -1);
    padding-inline: var(--en-gutter);
    scrollbar-width: thin;
  }
  .en-rail > * { scroll-snap-align: start; }
}


/* ==========================================================================
   13. PRODUCT CARDS
   Works for custom markup (.en-card) and WooCommerce loop (li.product).
   ========================================================================== */
.en-card,
.woocommerce ul.products li.product,
.wc-block-grid__product {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: start;
  background: transparent;
}
.en-card__media,
.woocommerce ul.products li.product a img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--en-radius);
  background: var(--en-cream);
  margin: 0 0 var(--en-space-4) !important;
}
.en-card__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--en-dur) var(--en-ease), transform var(--en-dur-slow) var(--en-ease); }
.woocommerce ul.products li.product a img { display: block; width: 100%; height: auto; object-fit: cover; transition: opacity var(--en-dur) var(--en-ease); }
.woocommerce ul.products li.product a.woocommerce-loop-product__link:hover img { opacity: 0.92; }
.en-card__media .en-card__img-alt { position: absolute; inset: 0; opacity: 0; }
.en-card:hover .en-card__img-alt { opacity: 1; }
.en-card:hover .en-card__media img:first-child { transform: scale(1.03); }

/* Whole card clickable via stretched link; inner buttons stay above it */
.en-card__link { color: inherit; text-decoration: none; }
.en-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.en-card__link:focus-visible { outline: none; box-shadow: none; }
.en-card:has(.en-card__link:focus-visible) { outline: 2px solid var(--en-ink); outline-offset: 4px; border-radius: var(--en-radius); }

.en-card__quick {
  position: absolute;
  inset-inline: var(--en-space-3);
  inset-block-end: var(--en-space-3);
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--en-dur) var(--en-ease), transform var(--en-dur) var(--en-ease);
}
.en-card:hover .en-card__quick,
.en-card:focus-within .en-card__quick { opacity: 1; transform: translateY(0); }
@media (hover: none) { .en-card__quick { opacity: 1; transform: none; position: static; margin-block-start: var(--en-space-3); } }

.en-card__wish {
  position: absolute;
  inset-block-start: var(--en-space-3);
  inset-inline-end: var(--en-space-3);
  z-index: 2;
  background: rgba(248, 245, 239, 0.9);
}
.en-card__wish[aria-pressed="true"] svg { fill: var(--en-ink); }

.en-card__meta { font-size: var(--en-fs-xs); letter-spacing: 0.06em; color: var(--en-text-muted); margin-block-end: var(--en-space-1); }

.en-card__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  margin: 0 0 var(--en-space-2);
  padding: 0 !important;
  font-family: var(--en-font-body) !important;
  font-size: var(--en-fs-base) !important;
  font-weight: var(--en-fw-medium);
  line-height: var(--en-lh-snug);
  color: var(--en-ink);
}

.en-swatches { display: flex; gap: var(--en-space-2); margin-block-start: var(--en-space-2); list-style: none; padding: 0; }
.en-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--en-field); background: var(--sw, var(--en-beige)); }


/* ==========================================================================
   14. BADGES & PRICE
   ========================================================================== */
.en-badge,
.woocommerce span.onsale {
  position: absolute;
  inset-block-start: var(--en-space-3);
  inset-inline-start: var(--en-space-3);
  z-index: 2;
  display: inline-block;
  min-width: 0; min-height: 0;
  margin: 0;
  padding: 0.25rem 0.625rem;
  background: var(--en-ivory);
  color: var(--en-ink);
  border-radius: var(--en-radius-sm);
  font-size: var(--en-fs-xs);
  font-weight: var(--en-fw-semi);
  letter-spacing: 0.06em;
  line-height: 1.5;
}
/* Woo core uses physical top/left (right in RTL); reset both, then apply logical start */
.woocommerce span.onsale { top: auto; right: auto; left: auto; inset-block-start: var(--en-space-3); inset-inline-start: var(--en-space-3); }
.en-badge--new   { background: var(--en-ink); color: var(--en-ivory); }
.en-badge--sale,
.woocommerce span.onsale { background: var(--en-rose-tint); color: var(--en-sale); }
.en-badge--gift  { background: var(--en-cream); }
.en-badge--static { position: static; }

.en-price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.wc-block-components-product-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--en-space-2);
  margin: 0;
  color: var(--en-ink) !important;
  font-size: var(--en-fs-base);
  font-weight: var(--en-fw-semi);
}
.en-price del,
.woocommerce .price del { color: var(--en-text-muted); font-weight: var(--en-fw-regular); opacity: 1; font-size: 0.9em; }
.en-price ins,
.woocommerce .price ins { color: var(--en-sale); text-decoration: none; }
.woocommerce-Price-currencySymbol { margin-inline: 0.1em; }

/* Star rating */
.woocommerce .star-rating { color: var(--en-ink); font-size: 0.85em; }
.woocommerce .star-rating::before { color: var(--en-beige); }


/* ==========================================================================
   15. USP / TRUST STRIP
   ========================================================================== */
.en-usp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--en-space-5);
  margin-block: 0;
  padding-block: var(--en-space-6);
  list-style: none;
}
.en-usp__item { display: flex; align-items: center; gap: var(--en-space-3); font-size: var(--en-fs-sm); }
.en-usp__icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--en-ivory);
  border: 1px solid var(--en-beige);
}
.en-usp__icon svg { width: 22px; height: 22px; stroke: var(--en-ink); fill: none; stroke-width: 1.4; }
.en-usp__title { display: block; font-weight: var(--en-fw-semi); }
.en-usp__text  { display: block; color: var(--en-text-muted); font-size: var(--en-fs-xs); }
@media (max-width: 900px) { .en-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .en-usp { grid-template-columns: 1fr; } }


/* ==========================================================================
   16. EDITORIAL (MAGAZINE) CARDS – "המגזין שלנו"
   ========================================================================== */
.en-post { display: flex; flex-direction: column; color: var(--en-ink); position: relative; }
.en-post__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--en-radius); margin-block-end: var(--en-space-4); background: var(--en-cream); }
.en-post__media img, .en-post__media .en-ph { height: 100%; transition: transform var(--en-dur-slow) var(--en-ease); }
.en-post:hover .en-post__media img { transform: scale(1.03); }
.en-post__cat { font-size: var(--en-fs-xs); font-weight: var(--en-fw-semi); letter-spacing: var(--en-tracking-caps); text-transform: uppercase; color: var(--en-text-muted); }
.en-post__title { margin: var(--en-space-2) 0 var(--en-space-3); font-size: var(--en-fs-lg); }
.en-post__title a { color: inherit; text-decoration: none; }
.en-post__title a::after { content: ""; position: absolute; inset: 0; }
.en-post__title a:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.en-post:has(a:focus-visible) { outline: 2px solid var(--en-ink); outline-offset: 6px; border-radius: var(--en-radius); }
.en-post__title a:focus-visible { outline: none; box-shadow: none; }
.en-post__excerpt { color: var(--en-text-muted); font-size: var(--en-fs-sm); }

/* Featured (large) post spans two columns on desktop */
@media (min-width: 900px) {
  .en-post--featured { grid-column: span 2; }
  .en-post--featured .en-post__media { aspect-ratio: 16 / 10; }
  .en-post--featured .en-post__title { font-size: var(--en-fs-xl); }
}


/* ==========================================================================
   17. STORY / SPLIT SECTION – "הסיפור שלנו"
   ========================================================================== */
.en-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2rem, 1rem + 5vw, 6rem);
}
.en-split--reverse .en-split__media { order: 2; }
.en-split__media { border-radius: var(--en-radius); overflow: hidden; }
.en-split__content { max-width: 34em; }
@media (max-width: 860px) {
  .en-split { grid-template-columns: 1fr; }
  .en-split--reverse .en-split__media { order: 0; }
}


/* ==========================================================================
   18. NEWSLETTER
   ========================================================================== */
.en-newsletter { text-align: center; }
.en-newsletter__form {
  display: flex;
  gap: var(--en-space-3);
  max-width: 520px;
  margin: var(--en-space-6) auto 0;
}
.en-newsletter__form input { flex: 1; }
.en-newsletter__consent { max-width: 520px; margin: var(--en-space-4) auto 0; font-size: var(--en-fs-xs); color: var(--en-text-muted); text-align: start; }
@media (max-width: 520px) { .en-newsletter__form { flex-direction: column; } }


/* ==========================================================================
   19. FOOTER
   Markup: <footer class="en-footer" role="contentinfo">
   ========================================================================== */
.en-footer {
  background: var(--en-cream);
  color: var(--en-ink);
  font-size: var(--en-fs-sm);
  border-block-start: 1px solid var(--en-beige);
}
.en-footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--en-space-7);
  padding-block: var(--en-space-9) var(--en-space-8);
}
.en-footer__brand p { margin-block-start: var(--en-space-4); color: var(--en-text-muted); max-width: 28em; }
.en-footer__title {
  margin: 0 0 var(--en-space-4);
  font-family: var(--en-font-body);
  font-size: var(--en-fs-xs);
  font-weight: var(--en-fw-bold);
  letter-spacing: var(--en-tracking-caps);
  text-transform: uppercase;
  color: var(--en-ink);
}
.en-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--en-space-2); }
.en-footer a { color: var(--en-ink); text-decoration: none; }
.en-footer__list a { display: inline-block; padding-block: var(--en-space-1); }
.en-footer a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.en-social { display: flex; gap: var(--en-space-2); margin-block-start: var(--en-space-5); list-style: none; padding: 0; }
.en-social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--en-field); border-radius: 50%; }
.en-social a:hover { background: var(--en-ink); color: var(--en-ivory); border-color: var(--en-ink); text-decoration: none; }
.en-social svg { width: 18px; height: 18px; fill: currentColor; }

.en-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--en-space-4);
  padding-block: var(--en-space-5);
  border-block-start: 1px solid var(--en-beige);
  font-size: var(--en-fs-xs);
}
.en-footer__legal { display: flex; flex-wrap: wrap; gap: var(--en-space-2) var(--en-space-5); list-style: none; margin: 0; padding: 0; }
.en-footer__copy { color: var(--en-text-muted); }
.en-payments { display: flex; gap: var(--en-space-2); align-items: center; list-style: none; margin: 0; padding: 0; }
.en-payments li { display: grid; place-items: center; height: 26px; min-width: 40px; padding-inline: 6px; background: var(--en-white); border: 1px solid var(--en-beige); border-radius: var(--en-radius-sm); font-size: 10px; font-weight: 700; color: var(--en-ink); }

@media (max-width: 960px) { .en-footer__top { grid-template-columns: 1fr 1fr; } .en-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .en-footer__top { grid-template-columns: 1fr; gap: var(--en-space-6); padding-block: var(--en-space-8) var(--en-space-6); }
  .en-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Footer accordions on mobile (<details>) – keyboard accessible natively.
   Output <details open>; Phase-2 JS removes `open` below 560px so columns
   start collapsed on phones and always open on desktop. */
.en-footer details > summary { list-style: none; cursor: default; }
.en-footer details > summary::-webkit-details-marker { display: none; }
@media (max-width: 560px) {
  .en-footer details > summary {
    display: flex; justify-content: space-between; align-items: center;
    min-height: 48px; cursor: pointer;
    border-block-end: 1px solid var(--en-beige);
  }
  .en-footer details > summary::after { content: "+"; font-size: 1.25rem; font-weight: 300; }
  .en-footer details[open] > summary::after { content: "−"; }
  .en-footer details[open] > summary + * { padding-block: var(--en-space-3); }
}


/* ==========================================================================
   20. BREADCRUMBS & PAGINATION
   ========================================================================== */
.en-breadcrumbs,
.woocommerce .woocommerce-breadcrumb,
.rank-math-breadcrumb,
.yoast-breadcrumbs {
  margin: 0 0 var(--en-space-5);
  padding-block: var(--en-space-4) 0;
  font-size: var(--en-fs-xs);
  color: var(--en-text-muted);
}
.en-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--en-space-2); list-style: none; margin: 0; padding: 0; }
.en-breadcrumbs li + li::before { content: "/"; margin-inline-end: var(--en-space-2); color: var(--en-taupe); }
.en-breadcrumbs a,
.woocommerce .woocommerce-breadcrumb a { color: var(--en-text-muted); text-decoration: none; }
.en-breadcrumbs a:hover,
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--en-ink); text-decoration: underline; }
.en-breadcrumbs [aria-current="page"] { color: var(--en-ink); }

.woocommerce nav.woocommerce-pagination ul,
.en-pagination { display: flex; justify-content: center; gap: var(--en-space-2); border: 0; margin-block-start: var(--en-space-8); }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.en-pagination a, .en-pagination span {
  display: grid; place-items: center;
  min-width: 44px; height: 44px;
  padding: 0 var(--en-space-2);
  border: 1px solid var(--en-beige);
  border-radius: var(--en-radius-sm);
  color: var(--en-ink);
  font-size: var(--en-fs-sm);
  text-decoration: none;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.en-pagination [aria-current="page"] { background: var(--en-ink); color: var(--en-ivory); border-color: var(--en-ink); }
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--en-cream); color: var(--en-ink); }


/* ==========================================================================
   21. WOOCOMMERCE – ARCHIVE / SHOP
   ========================================================================== */
.woocommerce .woocommerce-products-header { padding-block: var(--en-space-7) var(--en-space-5); text-align: center; }
.woocommerce .woocommerce-products-header__title { font-size: var(--en-fs-2xl); }
.woocommerce .term-description { max-width: 46em; margin-inline: auto; color: var(--en-text-muted); }

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(var(--en-shop-cols, 4), minmax(0, 1fr));
  gap: var(--en-space-7) var(--en-space-5);
  margin: 0;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { float: none; width: auto !important; margin: 0 !important; }
.woocommerce ul.products.columns-3 { --en-shop-cols: 3; }
.woocommerce ul.products.columns-2 { --en-shop-cols: 2; }
@media (max-width: 1024px) { .woocommerce ul.products { --en-shop-cols: 3; } }
@media (max-width: 768px)  { .woocommerce ul.products { --en-shop-cols: 2; gap: var(--en-space-6) var(--en-space-4); } }

.woocommerce ul.products li.product .button { margin-block-start: var(--en-space-3); min-height: 44px; font-size: var(--en-fs-xs); }
.woocommerce ul.products li.product .added_to_cart { display: inline-block; margin-block-start: var(--en-space-2); font-size: var(--en-fs-xs); color: var(--en-ink); text-decoration: underline; }

/* Toolbar: result count + sorting */
.en-shop-toolbar,
.woocommerce .woocommerce-result-count + .woocommerce-ordering {
  margin-block-end: var(--en-space-6);
}
.woocommerce .woocommerce-result-count { font-size: var(--en-fs-sm); color: var(--en-text-muted); float: right; margin: 0 0 var(--en-space-5); line-height: 48px; }
.woocommerce .woocommerce-ordering { float: left; margin: 0 0 var(--en-space-5); }
html[dir="ltr"] .woocommerce .woocommerce-result-count { float: left; }
html[dir="ltr"] .woocommerce .woocommerce-ordering { float: right; }
.woocommerce .woocommerce-ordering select { min-width: 220px; }

/* Category chips above the grid */
.en-chips { display: flex; flex-wrap: wrap; gap: var(--en-space-2); justify-content: center; list-style: none; margin: 0 0 var(--en-space-7); padding: 0; }
.en-chip {
  display: inline-flex; align-items: center;
  min-height: 40px;
  padding: 0.375rem 1rem;
  border: 1px solid var(--en-field);
  border-radius: var(--en-radius-pill);
  color: var(--en-ink);
  font-size: var(--en-fs-sm);
  text-decoration: none;
  background: transparent;
}
.en-chip:hover { background: var(--en-cream); }
.en-chip[aria-current="page"], .en-chip.is-active { background: var(--en-ink); color: var(--en-ivory); border-color: var(--en-ink); }


/* ==========================================================================
   22. WOOCOMMERCE – SINGLE PRODUCT
   ========================================================================== */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--en-space-5) clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary { float: none !important; width: auto !important; margin: 0; }
.woocommerce div.product div.summary { position: sticky; inset-block-start: calc(var(--en-header-h) + var(--en-space-5)); }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells { grid-column: 1 / -1; }

.woocommerce div.product .product_title { font-size: var(--en-fs-xl); margin-block-end: var(--en-space-3); }
.woocommerce div.product p.price { font-size: var(--en-fs-lg); margin-block-end: var(--en-space-5); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--en-text-muted); margin-block-end: var(--en-space-6); }

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { display: grid; gap: var(--en-space-3); }
.woocommerce div.product div.images img { border-radius: var(--en-radius); background: var(--en-cream); }
.woocommerce div.product div.images .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--en-space-2); margin-block-start: var(--en-space-3); }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto !important; float: none !important; }
.woocommerce div.product div.images .flex-control-thumbs img { opacity: 0.7; border: 1px solid transparent; }
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover { opacity: 1; border-color: var(--en-ink); }

.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: var(--en-space-3); margin-block-end: var(--en-space-6); }
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1; min-height: 56px; font-size: var(--en-fs-base); }
.woocommerce div.product form.cart table.variations { width: 100%; margin-block-end: var(--en-space-4); }
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td { display: block; padding: 0; text-align: start; }
.woocommerce div.product form.cart .reset_variations { font-size: var(--en-fs-xs); color: var(--en-ink); text-decoration: underline; }

/* Quantity stepper */
.woocommerce .quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--en-field); border-radius: var(--en-radius-sm); background: var(--en-white); }
.woocommerce .quantity .qty { width: 56px; min-height: 54px; border: 0; text-align: center; -moz-appearance: textfield; padding: 0; }
.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.en-qty-btn { width: 44px; border: 0; background: transparent; color: var(--en-ink); font-size: 1.25rem; cursor: pointer; }
.en-qty-btn:hover { background: var(--en-cream); }

/* Product benefits list under add-to-cart */
.en-pdp-perks { list-style: none; margin: 0 0 var(--en-space-6); padding: var(--en-space-5); background: var(--en-cream); border-radius: var(--en-radius); display: grid; gap: var(--en-space-3); font-size: var(--en-fs-sm); }
.en-pdp-perks li { display: flex; gap: var(--en-space-3); align-items: flex-start; }
.en-pdp-perks li::before { content: "✓"; flex: none; font-weight: var(--en-fw-bold); }

.woocommerce div.product .product_meta { font-size: var(--en-fs-xs); color: var(--en-text-muted); display: grid; gap: var(--en-space-1); }
.woocommerce div.product .product_meta a { color: var(--en-ink); }

/* Tabs → editorial accordion-like look */
.woocommerce div.product .woocommerce-tabs { margin-block-start: var(--en-space-8); }
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: var(--en-space-5); padding: 0; margin: 0 0 var(--en-space-6); border-block-end: 1px solid var(--en-beige); overflow-x: auto; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; margin: 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: var(--en-space-3) 0; color: var(--en-text-muted); font-weight: var(--en-fw-medium); border-block-end: 2px solid transparent; white-space: nowrap; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--en-ink); border-block-end-color: var(--en-ink); }
.woocommerce div.product .woocommerce-tabs .panel { max-width: 46em; }

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 { text-align: center; margin-block: var(--en-space-9) var(--en-space-6); }

/* Sticky mobile add-to-cart bar */
.en-sticky-atc {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: calc(var(--en-z-header) - 1);
  display: none;
  gap: var(--en-space-3);
  align-items: center;
  padding: var(--en-space-3) var(--en-gutter);
  padding-block-end: calc(var(--en-space-3) + env(safe-area-inset-bottom));
  background: var(--en-ivory);
  border-block-start: 1px solid var(--en-beige);
  box-shadow: 0 -8px 24px -16px rgba(48, 43, 39, 0.3);
}
.en-sticky-atc.is-visible { display: flex; }
.en-sticky-atc .en-btn { flex: 1; }

@media (max-width: 900px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
  .woocommerce div.product div.summary { position: static; }
}


/* ==========================================================================
   23. WOOCOMMERCE – CART, CHECKOUT, NOTICES (classic + block)
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--en-space-3);
  margin: 0 0 var(--en-space-6) !important;
  padding: var(--en-space-4) var(--en-space-5) !important;
  padding-inline-start: calc(var(--en-space-5) + 4px) !important;
  background: var(--en-white) !important;
  color: var(--en-ink) !important;
  border: 1px solid var(--en-beige) !important;
  border-inline-start: 4px solid var(--en-info) !important;
  border-radius: var(--en-radius) !important;
  font-size: var(--en-fs-sm);
  list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { position: static !important; margin: 0; color: inherit !important; }
.woocommerce-message, .wc-block-components-notice-banner.is-success { border-inline-start-color: var(--en-success) !important; }
.woocommerce-error,   .wc-block-components-notice-banner.is-error   { border-inline-start-color: var(--en-error) !important; }
.woocommerce-message .button,
.woocommerce-info .button { order: 2; margin-inline-start: auto; min-height: 40px; font-size: var(--en-fs-xs); }

/* Tables */
.woocommerce table.shop_table {
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  background: transparent;
}
.woocommerce table.shop_table th {
  padding: var(--en-space-3) var(--en-space-3);
  font-size: var(--en-fs-xs);
  font-weight: var(--en-fw-semi);
  letter-spacing: 0.06em;
  color: var(--en-text-muted);
  border-block-end: 1px solid var(--en-beige);
  text-align: start;
}
.woocommerce table.shop_table td { padding: var(--en-space-4) var(--en-space-3); border-block-start: 1px solid var(--en-line); }
.woocommerce table.shop_table img { width: 88px; border-radius: var(--en-radius-sm); }
.woocommerce a.remove { color: var(--en-ink) !important; width: 32px; height: 32px; line-height: 30px; font-size: 1.25rem; border: 1px solid var(--en-beige); }
.woocommerce a.remove:hover { background: var(--en-ink) !important; color: var(--en-ivory) !important; }

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout-review-order {
  padding: var(--en-space-6);
  background: var(--en-cream);
  border-radius: var(--en-radius);
}
.woocommerce .cart-collaterals .cart_totals h2 { font-size: var(--en-fs-lg); }
.woocommerce .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 56px; font-size: var(--en-fs-base); }

/* Free-shipping progress bar (use with your threshold, e.g. ₪299) */
.en-ship-progress { margin-block-end: var(--en-space-5); font-size: var(--en-fs-sm); }
.en-ship-progress__track { height: 6px; margin-block-start: var(--en-space-2); background: var(--en-beige); border-radius: var(--en-radius-pill); overflow: hidden; }
.en-ship-progress__bar { height: 100%; width: var(--progress, 0%); background: var(--en-ink); border-radius: inherit; transition: width var(--en-dur-slow) var(--en-ease); }

/* Checkout (classic) */
.woocommerce-checkout .col2-set { display: grid; gap: var(--en-space-6); }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { float: none; width: auto; }
.woocommerce form .form-row { margin: 0 0 var(--en-space-4); padding: 0; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: calc(50% - var(--en-space-2)); }
@media (max-width: 560px) { .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; } }
.woocommerce-checkout #payment { background: var(--en-white); border-radius: var(--en-radius); border: 1px solid var(--en-beige); }
.woocommerce-checkout #payment div.payment_box { background: var(--en-cream); color: var(--en-ink); font-size: var(--en-fs-sm); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--en-cream); }
.woocommerce-checkout #place_order { width: 100%; min-height: 56px; font-size: var(--en-fs-base); float: none; }

/* Checkout & Cart blocks */
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input { border-color: var(--en-field) !important; border-radius: var(--en-radius-sm) !important; background: var(--en-white) !important; }
.wc-block-components-text-input label { color: var(--en-text-muted) !important; }
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button { min-height: 56px; background: var(--en-ink) !important; color: var(--en-ivory) !important; border-radius: var(--en-radius-sm) !important; }
.wc-block-components-totals-item__value { font-weight: var(--en-fw-semi); }


/* ==========================================================================
   24. LEGAL & CONTENT PAGES (prose)
   For: הצהרת נגישות, מדיניות פרטיות, תנאי שימוש, החזרות ומשלוחים, magazine posts
   ========================================================================== */
.en-page-hero { padding-block: var(--en-space-8) var(--en-space-6); text-align: center; background: var(--en-cream); }
.en-page-hero h1 { margin-block-end: var(--en-space-3); }
.en-page-hero .en-updated { font-size: var(--en-fs-sm); color: var(--en-text-muted); }

.en-prose { max-width: 46em; margin-inline: auto; padding-block: var(--en-space-8); }
.en-prose h2 { font-size: var(--en-fs-lg); margin-block: var(--en-space-7) var(--en-space-3); padding-block-start: var(--en-space-4); border-block-start: 1px solid var(--en-border); }
.en-prose h3 { font-size: var(--en-fs-md); margin-block: var(--en-space-5) var(--en-space-2); }
.en-prose li + li { margin-block-start: var(--en-space-2); }
.en-prose table { width: 100%; border-collapse: collapse; margin-block: var(--en-space-5); font-size: var(--en-fs-sm); }
.en-prose th, .en-prose td { padding: var(--en-space-3); border: 1px solid var(--en-beige); text-align: start; vertical-align: top; }
.en-prose th { background: var(--en-cream); }

/* Table of contents for long legal pages */
.en-toc { padding: var(--en-space-5); background: var(--en-cream); border-radius: var(--en-radius); margin-block-end: var(--en-space-6); }
.en-toc ol { margin: var(--en-space-2) 0 0; }

/* Contact card on accessibility statement (accessibility coordinator) */
.en-contact-card { padding: var(--en-space-5); border: 1px solid var(--en-beige); border-radius: var(--en-radius); background: var(--en-white); }
.en-contact-card dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--en-space-2) var(--en-space-5); margin: 0; }
.en-contact-card dt { font-weight: var(--en-fw-semi); }
.en-contact-card dd { margin: 0; }


/* ==========================================================================
   25. COOKIE CONSENT BANNER
   Markup: <section class="en-cookie" role="dialog" aria-modal="false"
             aria-labelledby="en-cookie-title" aria-describedby="en-cookie-desc">
   Non-blocking bottom bar. Equal-weight "accept" and "reject" buttons
   (no dark patterns), plus a "settings" panel with granular categories.
   ========================================================================== */
.en-cookie {
  position: fixed;
  inset-inline: var(--en-space-4);
  inset-block-end: var(--en-space-4);
  z-index: var(--en-z-cookie);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--en-space-4) var(--en-space-6);
  max-width: 1080px;
  margin-inline: auto;
  padding: var(--en-space-5) var(--en-space-6);
  background: var(--en-ivory);
  color: var(--en-ink);
  border: 1px solid var(--en-beige);
  border-radius: var(--en-radius-lg);
  box-shadow: var(--en-shadow-lg);
  font-size: var(--en-fs-sm);
  animation: en-cookie-in var(--en-dur) var(--en-ease);
}
.en-cookie[hidden] { display: none; }
.en-cookie__title { margin: 0 0 var(--en-space-1); font-family: var(--en-font-body); font-size: var(--en-fs-base); font-weight: var(--en-fw-bold); }
.en-cookie__desc { margin: 0; color: var(--en-ink); }
.en-cookie__desc a { color: var(--en-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.en-cookie__actions { display: flex; flex-wrap: wrap; gap: var(--en-space-2); }
.en-cookie__actions .en-btn { min-height: 44px; padding-inline: 1.25rem; }

.en-cookie__prefs { grid-column: 1 / -1; display: grid; gap: var(--en-space-3); padding-block-start: var(--en-space-4); border-block-start: 1px solid var(--en-beige); }
.en-cookie__prefs[hidden] { display: none; }
.en-cookie__cat { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--en-space-4); }
.en-cookie__cat p { margin: var(--en-space-1) 0 0; font-size: var(--en-fs-xs); color: var(--en-text-muted); }

/* Accessible toggle switch: <button role="switch" aria-checked="true|false"> */
.en-switch {
  position: relative;
  flex: none;
  width: 48px; height: 28px;
  padding: 0;
  border: 1px solid var(--en-field);
  border-radius: var(--en-radius-pill);
  background: var(--en-beige);
  cursor: pointer;
  transition: background-color var(--en-dur-fast) var(--en-ease);
}
.en-switch::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--en-white);
  box-shadow: var(--en-shadow-sm);
  transition: inset-inline-start var(--en-dur-fast) var(--en-ease);
}
.en-switch[aria-checked="true"] { background: var(--en-ink); border-color: var(--en-ink); }
.en-switch[aria-checked="true"]::after { inset-inline-start: 23px; }
.en-switch[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

@keyframes en-cookie-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .en-cookie { grid-template-columns: 1fr; inset-inline: 0; inset-block-end: 0; border-radius: var(--en-radius-lg) var(--en-radius-lg) 0 0; padding: var(--en-space-5) var(--en-gutter) calc(var(--en-space-5) + env(safe-area-inset-bottom)); }
  .en-cookie__actions .en-btn { flex: 1 1 calc(50% - var(--en-space-2)); }
}


/* ==========================================================================
   26. ACCESSIBILITY WIDGET SLOT
   Footer link "הצהרת נגישות" is always present (required).
   Third-party widgets (e.g. Nagishli / EqualWeb / Enable) inject their own
   button; the rules below park it on the start edge, away from the cookie
   bar and the sticky add-to-cart, and keep it above other layers.
   Adjust the widget-specific selector after installing.
   ========================================================================== */
.en-a11y-launcher,
#NagishLiTrigger,
#INDmenu-btn,
.uwy .userway_buttons_wrapper {
  z-index: var(--en-z-a11y) !important;
}
/* Built-in fallback launcher (used only if no third-party widget is installed) */
.en-a11y-launcher {
  position: fixed;
  inset-block-end: var(--en-space-5);
  inset-inline-start: var(--en-space-4);
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 2px solid var(--en-ivory);
  border-radius: 50%;
  background: var(--en-ink);
  color: var(--en-ivory);
  box-shadow: var(--en-shadow);
  cursor: pointer;
}
.en-a11y-launcher svg { width: 26px; height: 26px; fill: currentColor; }
body.en-cookie-open .en-a11y-launcher { inset-block-end: calc(var(--en-space-5) + 120px); }
@media (max-width: 760px) { body.en-cookie-open .en-a11y-launcher { inset-block-end: 260px; } }

/* Optional modes that a lightweight self-hosted toolbar can toggle on <html> */
html.en-a11y-text-lg  { font-size: 112.5%; }
html.en-a11y-text-xl  { font-size: 125%; }
html.en-a11y-links a  { text-decoration: underline !important; text-decoration-thickness: 2px !important; }
html.en-a11y-readable body { font-family: Arial, "Arial Hebrew", sans-serif !important; letter-spacing: 0.02em; word-spacing: 0.08em; }
html.en-a11y-contrast {
  --en-bg: #FFFFFF; --en-bg-alt: #FFFFFF; --en-cream: #FFFFFF; --en-beige: #000000;
  --en-text: #000000; --en-ink: #000000; --en-text-muted: #000000; --en-line: #000000; --en-field: #000000;
}
html.en-a11y-stop-motion *,
html.en-a11y-stop-motion *::before,
html.en-a11y-stop-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }


/* ==========================================================================
   27. ELEMENTOR COMPATIBILITY
   Set the same values in Elementor → Site Settings → Global Colors / Fonts
   so widgets pick them up; these vars keep custom CSS in sync.
   ========================================================================== */
.elementor-kit-default,
[class*="elementor-kit-"] {
  --e-global-color-primary:   var(--en-ink);
  --e-global-color-secondary: var(--en-cream);
  --e-global-color-text:      var(--en-ink);
  --e-global-color-accent:    var(--en-rose);
}
.elementor-widget-text-editor { color: var(--en-text); }
.elementor-button {
  border-radius: var(--en-radius-sm);
  font-family: var(--en-font-body);
  font-weight: var(--en-fw-semi);
  letter-spacing: 0.04em;
  min-height: 48px;
}
.elementor-button:focus-visible { outline: 2px solid var(--en-ink); outline-offset: 3px; box-shadow: 0 0 0 5px var(--en-ivory); }
/* Elementor image widgets inherit placeholder ratios via CSS class field: en-media en-ph--portrait */
.elementor-widget-image.en-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: inherit; }
/* Elementor nav menu RTL dropdown alignment */
.elementor-nav-menu--dropdown { background: var(--en-ivory); }
.elementor-nav-menu a:focus-visible { outline-offset: -2px; }


/* ==========================================================================
   28. MOTION, FORCED-COLORS, PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .en-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--en-dur-slow) var(--en-ease), transform var(--en-dur-slow) var(--en-ease); }
  .en-reveal.is-in { opacity: 1; transform: none; }
}
/* No-JS safety: reveal content if script never runs */
html:not(.js) .en-reveal { opacity: 1; transform: none; }

/* Windows High Contrast / forced colors */
@media (forced-colors: active) {
  .en-btn, .button, .en-chip, .en-switch, .en-icon-btn, .en-card__link::after { border: 1px solid ButtonText; }
  :focus-visible { outline: 2px solid Highlight !important; }
  .en-ph::after { border-color: CanvasText; }
  .en-switch[aria-checked="true"]::after { background: Highlight; }
}

@media print {
  .en-header, .en-announce, .en-footer, .en-cookie, .en-a11y-launcher, .en-sticky-atc, .en-drawer, .en-overlay { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .en-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}


/* ==========================================================================
   29. THEME TEMPLATES (v1.1) – header/footer/home extras, Hello Elementor
       resets, accessibility menu, notices
   ========================================================================== */

/* Hello Elementor's reset paints buttons and links pink (#c36) on hover/focus.
   Neutralise it for every component in this theme. */
a:active { color: var(--en-ink); }
.en-btn:is(button, [type="submit"]):focus,
.button:is(button, [type="submit"]):focus { background-color: var(--_bg); color: var(--_fg); border-color: var(--_bd); }
:is(.en-icon-btn, .en-nav__toggle, .en-mnav__toggle, .en-linkbtn, .en-a11y-opt, .en-qty-btn):is(button) {
  white-space: normal;
  font-family: inherit;
}
:is(.en-nav__toggle, .en-mnav__toggle, .en-linkbtn):is(button):is(:hover, :focus) { background-color: transparent; color: var(--en-ink); }
.en-icon-btn:is(button):focus { background-color: transparent; color: var(--en-ink); }
.en-icon-btn:is(button):hover { background-color: var(--en-cream); color: var(--en-ink); }
.en-switch:is(:hover, :focus) { background-color: var(--en-beige); }
.en-switch[aria-checked="true"]:is(:hover, :focus) { background-color: var(--en-ink); }
.en-a11y-launcher:is(:hover, :focus) { background-color: var(--en-ink); color: var(--en-ivory); }

/* Hello's content wrapper (shop, pages, posts) uses the brand container */
body:not([class*="elementor-page-"]) .site-main {
  max-width: calc(var(--en-container) + var(--en-gutter) * 2);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--en-gutter);
  padding-block: var(--en-space-6) var(--en-space-9);
}
.site-main .page-header .entry-title { font-size: var(--en-fs-2xl); text-align: center; margin-block: var(--en-space-6); }
.en-site-content:focus { outline: none; }

.en-list-reset { list-style: none; margin: 0; padding: 0; }
@media (max-width: 480px) { .en-hide-sm { display: none; } }

/* Placeholders: no label for visitors */
.en-ph:not([data-label])::after { display: none; }

/* Header */
.en-header__brand { display: flex; align-items: center; gap: var(--en-space-2); }
.en-nav__item { display: flex; align-items: center; }
.en-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 44px;
  margin-inline-start: -2px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--en-ink);
  cursor: pointer;
}
.en-nav__chev { width: 14px; height: 14px; }
.en-nav__item.is-suppressed > .en-nav__panel { opacity: 0 !important; visibility: hidden !important; }
.en-logo__img { height: clamp(32px, 2.4vw + 18px, 46px); width: auto; }

/* Mobile drawer rows */
.en-mnav__row { display: flex; align-items: center; }
.en-mnav__row > a { flex: 1; }
.en-mnav .en-mnav__toggle { flex: none; width: 48px; justify-content: center; }
.en-mnav .en-mnav__toggle svg { width: 20px; height: 20px; transition: transform var(--en-dur-fast) var(--en-ease); }
.en-mnav .en-mnav__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
.en-mnav .sub-menu[hidden] { display: none; }
.en-mnav .sub-menu li { border: 0; }
.en-drawer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--en-space-2); }
.en-drawer__links a { display: flex; align-items: center; gap: var(--en-space-3); min-height: 44px; color: var(--en-ink); text-decoration: none; font-weight: var(--en-fw-medium); }
.en-drawer__links svg { width: 20px; height: 20px; }

/* Footer extras */
.en-footer__contact { list-style: none; margin: var(--en-space-4) 0 0; padding: 0; display: grid; gap: var(--en-space-2); }
.en-footer__contact li { display: flex; align-items: center; gap: var(--en-space-2); }
.en-footer__contact svg { width: 18px; height: 18px; flex: none; }
.en-footer__col > summary { display: block; }
.en-linkbtn {
  padding: var(--en-space-1) 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--en-ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Media fill */
.en-cat__media img,
.en-post__media img { width: 100%; height: 100%; object-fit: cover; }
.en-link svg { width: 16px; height: 16px; }
.en-card__quick .added_to_cart { display: none; }
.en-card__quick .add_to_cart_button.loading { opacity: 0.7; }
.en-card__quick .add_to_cart_button.added::after { content: " ✓"; }

/* Notices (newsletter etc.) & editor hints */
.en-notice {
  max-width: 520px;
  margin: var(--en-space-5) auto 0;
  padding: var(--en-space-3) var(--en-space-4);
  background: var(--en-white);
  border: 1px solid var(--en-beige);
  border-inline-start: 4px solid var(--en-success);
  border-radius: var(--en-radius);
  text-align: start;
  font-weight: var(--en-fw-medium);
}
.en-notice--error { border-inline-start-color: var(--en-error); color: var(--en-error); }
.en-notice:focus { outline: none; }
.en-admin-hint {
  padding: var(--en-space-5);
  border: 1px dashed var(--en-taupe);
  border-radius: var(--en-radius);
  background: var(--en-ivory);
  text-align: center;
  color: var(--en-text-muted);
}
.en-template-note { padding: var(--en-space-4); background: var(--en-rose-tint); border-radius: var(--en-radius); }
.en-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Legal / content pages rendered by Hello's page template */
.en-legal .site-main { max-width: calc(46em + var(--en-gutter) * 2); }
.en-legal .page-content h2 { font-size: var(--en-fs-lg); margin-block: var(--en-space-7) var(--en-space-3); padding-block-start: var(--en-space-4); border-block-start: 1px solid var(--en-border); }
.en-legal .page-content li + li { margin-block-start: var(--en-space-2); }
.en-legal .page-content table { width: 100%; border-collapse: collapse; font-size: var(--en-fs-sm); }
.en-legal .page-content th,
.en-legal .page-content td { padding: var(--en-space-3); border: 1px solid var(--en-beige); text-align: start; vertical-align: top; }
.en-legal .page-content th { background: var(--en-cream); }
.en-legal .page-content a { text-decoration: underline; text-underline-offset: 0.2em; }

/* Accessibility menu */
.en-a11y-launcher { z-index: var(--en-z-a11y); }
.en-a11y-launcher[aria-expanded="true"] { outline: 2px solid var(--en-ink); outline-offset: 2px; }
.en-a11y-panel {
  position: fixed;
  inset-block-end: calc(var(--en-space-5) + 64px);
  inset-inline-start: var(--en-space-4);
  z-index: var(--en-z-a11y);
  width: min(320px, calc(100vw - 2rem));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: var(--en-space-5);
  background: var(--en-ivory);
  border: 1px solid var(--en-beige);
  border-radius: var(--en-radius-lg);
  box-shadow: var(--en-shadow-lg);
}
.en-a11y-panel[hidden] { display: none; }
body.en-cookie-open .en-a11y-panel { inset-block-end: calc(var(--en-space-5) + 184px); }
.en-a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--en-space-4); }
.en-a11y-panel__title { margin: 0; font-family: var(--en-font-body); font-size: var(--en-fs-md); font-weight: var(--en-fw-bold); }
.en-a11y-panel__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--en-space-2); }
.en-a11y-opt {
  width: 100%;
  min-height: 56px;
  padding: var(--en-space-2) var(--en-space-3);
  background: var(--en-white);
  color: var(--en-ink);
  border: 1px solid var(--en-field);
  border-radius: var(--en-radius);
  font-size: var(--en-fs-sm);
  font-weight: var(--en-fw-medium);
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
}
.en-a11y-opt:is(:hover, :focus) { background: var(--en-cream); color: var(--en-ink); }
.en-a11y-opt[aria-pressed="true"],
.en-a11y-opt[aria-pressed="true"]:is(:hover, :focus) { background: var(--en-ink); color: var(--en-ivory); border-color: var(--en-ink); }
.en-a11y-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--en-space-3); margin-block-start: var(--en-space-4); }

/* High-contrast mode: keep surfaces light and outline components */
html.en-a11y-contrast {
  --en-beige: #FFFFFF; --en-rose: #FFFFFF; --en-rose-tint: #FFFFFF; --en-ivory: #FFFFFF;
}
html.en-a11y-contrast .en-announce { background: #000; color: #fff; }
html.en-a11y-contrast :is(.en-card__media, .en-cat__media, .en-post__media, .en-chip, .en-cookie, .en-a11y-panel, .en-btn--soft, .en-usp__icon, .en-header, .en-footer) { border: 1px solid #000; }
html.en-a11y-contrast .en-btn { --_bg: #000; --_fg: #fff; --_bd: #000; }
html.en-a11y-contrast .en-btn--outline,
html.en-a11y-contrast .en-btn--soft,
html.en-a11y-contrast .en-btn--light { --_bg: #fff; --_fg: #000; --_bd: #000; }
html.en-a11y-contrast .en-ph { background: #fff; }

/* Magazine grid: featured post spans two columns and both rows on desktop */
.en-mag-grid { display: grid; gap: var(--en-space-6) var(--en-space-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .en-mag-grid .en-post--featured { grid-column: span 2; grid-row: span 2; }
  .en-mag-grid .en-post:not(.en-post--featured) .en-post__title { font-size: var(--en-fs-md); }
}
@media (max-width: 899px) {
  .en-mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .en-mag-grid .en-post--featured { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .en-mag-grid { grid-template-columns: 1fr; } }

/* WooCommerce specificity fixes: ".alt" buttons (purple by default) and loop sale badge */
.woocommerce :is(a, button, input).button.alt,
.woocommerce :is(a, button, input).button.alt:is(:hover, :focus),
.woocommerce #respond input#submit.alt {
  background-color: var(--_bg);
  color: var(--_fg);
  border-color: var(--_bd);
}
.woocommerce :is(a, button, input).button.alt:hover { --_bg: var(--en-ink-hover); --_bd: var(--en-ink-hover); }
.woocommerce :is(a, button, input).button.alt.disabled,
.woocommerce :is(a, button, input).button.alt:disabled { --_bg: var(--en-beige); --_bd: var(--en-beige); --_fg: var(--en-ink); }
.woocommerce ul.products li.product .onsale {
  top: auto; right: auto; left: auto; margin: 0;
  inset-block-start: var(--en-space-3);
  inset-inline-start: var(--en-space-3);
}
.woocommerce ul.products li.product { position: relative; }

/* Hello pulls .alignwide 80px outside the content box, which overflows the
   viewport for the Cart/Checkout blocks – keep wide blocks inside the container. */
.site-main .alignwide,
.page-content .alignwide { margin-inline: 0; width: 100%; max-width: 100%; }
@media (max-width: 640px) { .en-a11y-launcher { width: 44px; height: 44px; } .en-a11y-launcher svg { width: 22px; height: 22px; } }