/* ==========================================================================
   Zlight - Atelier Luminaire
   Design tokens ported from the approved Stitch direction.
   Hand-authored: no build step, so the theme stays editable through Novamira.
   ========================================================================== */

:root {
  /* Surfaces */
  --zl-bg: #FFFFFF;
  --zl-surface: #F7F6F2;
  --zl-surface-warm: #EFEBE4;
  --zl-carbon: #1D1D1B;
  --zl-carbon-soft: #373733;

  /* Ink */
  --zl-ink: #171717;
  --zl-ink-muted: #69665F;
  --zl-ink-subtle: #99958D;
  --zl-on-carbon: #FFFFFF;

  /* Accent (single, locked) */
  --zl-accent: #AE8152;
  --zl-accent-hover: #946B40;

  /* State */
  --zl-success: #42644E;
  --zl-sale: #A4453C;

  /* Structure */
  --zl-divider: #E6E2DB;
  --zl-divider-dark: #373733;

  /* Radius */
  --zl-r-sm: 2px;
  --zl-r-md: 4px;
  --zl-r-lg: 6px;

  /* Spacing scale */
  --zl-2xs: 0.25rem;
  --zl-xs: 0.5rem;
  --zl-sm: 0.75rem;
  --zl-md: 1rem;
  --zl-lg: 1.5rem;
  --zl-xl: 2rem;
  --zl-2xl: 3rem;
  --zl-3xl: 4.5rem;
  --zl-4xl: 6rem;

  /* Layout */
  --zl-container: 1440px;
  --zl-gutter: 1rem;
  --zl-header-h: 116px;

  /* Type */
  --zl-font: 'Rubik', 'Arial Hebrew', 'Noto Sans Hebrew', sans-serif;

  /* Elevation: one ambient shadow only, tinted to the ground */
  --zl-float: 0 12px 32px -4px rgba(29, 29, 27, 0.04),
              0 4px 12px -2px rgba(29, 29, 27, 0.02);
}

@media (min-width: 1200px) {
  :root { --zl-gutter: 2rem; }
}

/* --------------------------------------------------------------------------
   Reset. :where() keeps specificity at 0 so component rules always win.
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

:where(html) {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

:where(body) {
  margin: 0;
  background: var(--zl-bg);
  color: var(--zl-ink);
  font-family: var(--zl-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3, h4, h5, h6) { margin: 0; font-weight: 500; }
:where(p) { margin: 0; }
:where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(a) { color: inherit; text-decoration: none; }
:where(img, svg, video) { max-width: 100%; height: auto; display: block; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(input, select, textarea) { font: inherit; color: inherit; }
:where(figure, blockquote, dl, dd) { margin: 0; padding: 0; border: 0; }
:where(table) { border-collapse: collapse; width: 100%; }

/* The hidden attribute has to win.
   It hides an element only through the browser's own stylesheet, and ANY author
   rule beats the browser stylesheet regardless of specificity. So a component
   given `display: flex` stays visible after JS sets `el.hidden = true`, silently
   and with no error. That is exactly what happened to the cookie banner: it
   would not close on accept, its options panel was permanently expanded and its
   save button never hid. This rule is not defensive tidiness; without it the
   attribute does nothing on any styled element in this file. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  :where(html) { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Typography scale
   -------------------------------------------------------------------------- */

.zl-display   { font-size: 38px; line-height: 46px; letter-spacing: -0.01em; font-weight: 400; }
.zl-h-lg      { font-size: 28px; line-height: 36px; letter-spacing: -0.01em; font-weight: 500; }
.zl-h-md      { font-size: 22px; line-height: 30px; letter-spacing: -0.01em; font-weight: 500; }
.zl-h-sm      { font-size: 18px; line-height: 26px; font-weight: 600; }
.zl-lead      { font-size: 16px; line-height: 28px; color: var(--zl-ink-muted); }
.zl-body      { font-size: 15px; line-height: 24px; }
.zl-small     { font-size: 13px; line-height: 20px; letter-spacing: 0.01em; }
.zl-tech      { font-size: 13px; line-height: 18px; letter-spacing: 0.02em; font-weight: 500; }
.zl-price-lg  { font-size: 28px; line-height: 32px; letter-spacing: -0.02em; font-weight: 500; }
.zl-price     { font-size: 18px; line-height: 22px; letter-spacing: -0.01em; font-weight: 600; }

.zl-label {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--zl-ink-subtle);
}

@media (min-width: 1024px) {
  .zl-display { font-size: 56px; line-height: 68px; letter-spacing: -0.02em; }
  .zl-h-lg    { font-size: 36px; line-height: 46px; letter-spacing: -0.015em; }
  .zl-h-md    { font-size: 26px; line-height: 34px; }
  .zl-h-sm    { font-size: 20px; line-height: 28px; }
  .zl-lead    { font-size: 18px; line-height: 30px; }
}

.zl-muted  { color: var(--zl-ink-muted); }
.zl-subtle { color: var(--zl-ink-subtle); }

/* Technical values read LTR inside RTL Hebrew text */
.zl-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Layout primitives. One shared container across every section.
   -------------------------------------------------------------------------- */

.zl-container {
  width: 100%;
  max-width: var(--zl-container);
  margin-inline: auto;
  padding-inline: var(--zl-gutter);
}

@media (min-width: 1200px) {
  .zl-container { padding-inline: clamp(2rem, 5vw, 5rem); }
}

.zl-section { padding-block: var(--zl-2xl); }
@media (min-width: 1024px) { .zl-section { padding-block: var(--zl-3xl); } }

.zl-section--tight { padding-block: var(--zl-xl); }
.zl-section--wide  { padding-block: var(--zl-3xl); }
@media (min-width: 1024px) { .zl-section--wide { padding-block: var(--zl-4xl); } }

.zl-section--surface { background: var(--zl-surface); }
.zl-section--warm    { background: var(--zl-surface-warm); }
.zl-section--carbon  { background: var(--zl-carbon); color: var(--zl-on-carbon); }
.zl-section--rule-y  { border-block: 1px solid var(--zl-divider); }
.zl-section--rule-t  { border-top: 1px solid var(--zl-divider); }
.zl-section--rule-b  { border-bottom: 1px solid var(--zl-divider); }

.zl-section--carbon .zl-lead,
.zl-section--carbon .zl-muted { color: rgba(255, 255, 255, 0.72); }
.zl-section--carbon .zl-label,
.zl-section--carbon .zl-subtle { color: rgba(255, 255, 255, 0.55); }

/* Section header: headline stacked over body, never a split floating paragraph */
.zl-shead { margin-bottom: var(--zl-xl); }
.zl-shead__label { display: block; margin-bottom: var(--zl-sm); }
.zl-shead__title { margin-bottom: var(--zl-sm); }
.zl-shead__text  { max-width: 62ch; }

.zl-shead--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--zl-md);
}

/* --------------------------------------------------------------------------
   Buttons. 48px, 4px radius, never pill.
   -------------------------------------------------------------------------- */

.zl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zl-xs);
  min-height: 48px;
  padding-inline: var(--zl-lg);
  border-radius: var(--zl-r-md);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.zl-btn--primary { background: var(--zl-carbon); color: #FFFFFF; }
.zl-btn--primary:hover { background: var(--zl-carbon-soft); }

.zl-btn--outline { border-color: var(--zl-carbon); color: var(--zl-carbon); }
.zl-btn--outline:hover { background: var(--zl-surface); }

.zl-btn--accent { background: var(--zl-accent); color: #FFFFFF; }
.zl-btn--accent:hover { background: var(--zl-accent-hover); }

.zl-btn--onCarbon { background: #FFFFFF; color: var(--zl-carbon); }
.zl-btn--onCarbon:hover { background: var(--zl-surface); }

.zl-btn--ghostCarbon { border-color: rgba(255,255,255,0.4); color: #FFFFFF; }
.zl-btn--ghostCarbon:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.08); }

.zl-btn--block { width: 100%; }
.zl-btn--sm { min-height: 40px; font-size: 14px; padding-inline: var(--zl-md); }

/* Quiet inline link with a leading chevron */
.zl-link {
  display: inline-flex;
  align-items: center;
  gap: var(--zl-2xs);
  font-size: 14px;
  font-weight: 500;
  color: var(--zl-ink);
  border-bottom: 1px solid var(--zl-divider);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.zl-link:hover { color: var(--zl-accent); border-color: var(--zl-accent); }
.zl-link::after { content: '\2039'; font-size: 18px; line-height: 1; }
.zl-section--carbon .zl-link { color: #FFFFFF; border-color: rgba(255,255,255,0.35); }
.zl-section--carbon .zl-link:hover { color: var(--zl-accent); border-color: var(--zl-accent); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--zl-accent);
  outline-offset: 2px;
}

.zl-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 200;
  background: var(--zl-carbon);
  color: #FFFFFF;
  padding: var(--zl-sm) var(--zl-md);
}
.zl-skip:focus { inset-inline-start: 0; }

.zl-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.zl-topbar {
  background: var(--zl-carbon);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  letter-spacing: 0.01em;
}
.zl-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--zl-md);
  min-height: 36px;
  text-align: center;
}
.zl-topbar__sep { color: rgba(255,255,255,0.3); }
@media (max-width: 767px) { .zl-topbar__item:nth-child(n+3) { display: none; } }

.zl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--zl-divider);
}

.zl-header__bar {
  display: flex;
  align-items: center;
  gap: var(--zl-lg);
  min-height: 72px;
}

.zl-brand { display: flex; align-items: center; gap: var(--zl-xs); flex-shrink: 0; }

/* 46px, not the 34px this carried when the brand was a bare word: the artwork
   is a Z mark plus a wordmark, and below about 40px the wordmark stops reading.
   Height drives it and width follows, so a re-cut logo of a different ratio
   drops in without touching CSS.

   The ancestor and the img type are in the selector to outrank WooCommerce's
   `.woocommerce img, .woocommerce-page img { height: auto }`, which is (0,1,1)
   and applies to every element on a shop page, header included. A plain
   `.zl-brand__mark` is (0,1,0) and loses, which rendered the logo at its
   natural 144px and stretched the header on category and product pages only.
   `img.zl-brand__mark` alone would merely tie and leave the outcome to
   stylesheet order, so the ancestor class is what makes this decisive. */
.zl-brand img.zl-brand__mark,
.zl-drawer__head img.zl-brand__mark { height: 46px; width: auto; }

@media (max-width: 640px) {
  .zl-brand img.zl-brand__mark,
  .zl-drawer__head img.zl-brand__mark { height: 38px; }
}

.zl-drawer__head img.zl-brand__mark--drawer { height: 34px; }
.zl-brand__name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--zl-carbon);
}
.zl-brand__tag {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--zl-ink-subtle);
  border-inline-start: 1px solid var(--zl-divider);
  padding-inline-start: var(--zl-xs);
  margin-inline-start: var(--zl-2xs);
}
@media (max-width: 1023px) { .zl-brand__tag { display: none; } }

.zl-nav { display: none; }
@media (min-width: 1200px) {
  .zl-nav { display: flex; align-items: center; gap: var(--zl-lg); flex: 1; }
}
.zl-nav a {
  font-size: 14px;
  font-weight: 500;
  padding-block: var(--zl-xs);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.zl-nav a:hover { color: var(--zl-accent); }
.zl-nav .current-menu-item > a,
.zl-nav .current_page_item > a { border-color: var(--zl-accent); }
.zl-nav__sale > a { color: var(--zl-sale); }

.zl-header__tools {
  display: flex;
  align-items: center;
  gap: var(--zl-2xs);
  margin-inline-start: auto;
}

.zl-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zl-2xs);
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--zl-r-md);
  color: var(--zl-carbon);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.zl-icon-btn:hover { background: var(--zl-surface); color: var(--zl-accent); }
.zl-icon-btn svg { width: 21px; height: 21px; }

.zl-cart-count {
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: var(--zl-r-sm);
  background: var(--zl-accent);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.zl-cart-total {
  font-size: 13px;
  font-weight: 500;
  color: var(--zl-ink-muted);
}
@media (max-width: 767px) { .zl-cart-total { display: none; } }

.zl-burger { display: inline-flex; }
@media (min-width: 1200px) { .zl-burger { display: none; } }

/* Mobile drawer */
.zl-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}
.zl-drawer[data-open="true"] { visibility: visible; pointer-events: auto; }

.zl-drawer__veil {
  position: absolute;
  inset: 0;
  background: rgba(29, 29, 27, 0.6);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.zl-drawer[data-open="true"] .zl-drawer__veil { opacity: 1; }

.zl-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(88vw, 380px);
  background: var(--zl-bg);
  border-inline-start: 1px solid var(--zl-divider);
  padding: var(--zl-lg);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
[dir="rtl"] .zl-drawer__panel { transform: translateX(-100%); }
.zl-drawer[data-open="true"] .zl-drawer__panel { transform: translateX(0); }

.zl-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--zl-md);
  border-bottom: 1px solid var(--zl-divider);
  margin-bottom: var(--zl-md);
}
.zl-drawer__panel li { border-bottom: 1px solid var(--zl-divider); }
.zl-drawer__panel a { display: block; padding-block: var(--zl-sm); font-size: 15px; font-weight: 500; }
.zl-drawer__panel a:hover { color: var(--zl-accent); }

/* --------------------------------------------------------------------------
   Hero. Fits the first viewport: 2-line headline, short subtext, CTA visible.
   -------------------------------------------------------------------------- */

.zl-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--zl-carbon);
  color: #FFFFFF;
}
@media (min-width: 1024px) { .zl-hero { min-height: 78vh; } }

.zl-hero__media { position: absolute; inset: 0; }
.zl-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Directional scrim keeps the headline legible from the right in RTL */
.zl-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, rgba(29,29,27,0.92) 0%, rgba(29,29,27,0.72) 42%, rgba(29,29,27,0.25) 78%, rgba(29,29,27,0.1) 100%),
    linear-gradient(to top, rgba(29,29,27,0.55) 0%, rgba(29,29,27,0) 45%);
}

.zl-hero__inner { position: relative; z-index: 1; width: 100%; padding-block: var(--zl-3xl); }
.zl-hero__body { max-width: 42rem; }
.zl-hero__label { color: var(--zl-accent); margin-bottom: var(--zl-md); display: block; }
.zl-hero__title { color: #FFFFFF; margin-bottom: var(--zl-md); }
.zl-hero__text {
  color: rgba(255,255,255,0.78);
  max-width: 34rem;
  margin-bottom: var(--zl-xl);
}
.zl-hero__actions { display: flex; flex-wrap: wrap; gap: var(--zl-sm); }

.zl-hero__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zl-lg);
  margin-top: var(--zl-2xl);
  padding-top: var(--zl-lg);
  border-top: 1px solid rgba(255,255,255,0.18);
}
.zl-hero__spec {
  display: flex;
  align-items: center;
  gap: var(--zl-xs);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.82);
}
.zl-hero__spec svg { width: 17px; height: 17px; color: var(--zl-accent); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Assurance strip
   -------------------------------------------------------------------------- */

.zl-assure {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zl-md);
}
@media (min-width: 640px)  { .zl-assure { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .zl-assure { grid-template-columns: repeat(4, 1fr); gap: 0; } }

.zl-assure__item { display: flex; gap: var(--zl-sm); align-items: flex-start; }
@media (min-width: 1024px) {
  .zl-assure__item { padding-inline: var(--zl-lg); border-inline-start: 1px solid var(--zl-divider); }
  .zl-assure__item:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .zl-assure__item:last-child { padding-inline-end: 0; }
}
.zl-assure__icon { color: var(--zl-accent); flex-shrink: 0; }
.zl-assure__icon svg { width: 22px; height: 22px; }
.zl-assure__title { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.zl-assure__text { font-size: 13px; line-height: 20px; color: var(--zl-ink-muted); }

/* --------------------------------------------------------------------------
   Category mosaic. Deliberately uneven so it does not read as a card row.
   -------------------------------------------------------------------------- */

.zl-mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--zl-divider);
  border: 1px solid var(--zl-divider);
}
@media (min-width: 1024px) {
  .zl-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; }
  .zl-mosaic__cell--hero { grid-column: span 2; grid-row: span 2; }
  .zl-mosaic__cell--wide { grid-column: span 2; }
}

.zl-mosaic__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 180px;
  padding: var(--zl-md);
  background: var(--zl-surface);
  overflow: hidden;
  isolation: isolate;
}
.zl-mosaic__cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.4s ease-out;
}
.zl-mosaic__cell::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(29,29,27,0.82) 0%, rgba(29,29,27,0.25) 55%, rgba(29,29,27,0.05) 100%);
}
.zl-mosaic__cell:hover img { transform: scale(1.03); }
.zl-mosaic__count { color: rgba(255,255,255,0.7); font-size: 11px; letter-spacing: 0.08em; font-weight: 600; }
.zl-mosaic__name { color: #FFFFFF; font-size: 17px; font-weight: 500; margin-top: 2px; }
.zl-mosaic__text {
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  line-height: 20px;
  margin-top: var(--zl-xs);
  max-width: 34ch;
}
@media (min-width: 1024px) { .zl-mosaic__cell--hero .zl-mosaic__name { font-size: 24px; } }

/* --------------------------------------------------------------------------
   Product card
   -------------------------------------------------------------------------- */

.zl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--zl-md);
}
@media (min-width: 768px)  { .zl-grid { grid-template-columns: repeat(2, 1fr); gap: var(--zl-lg); } }
@media (min-width: 1200px) { .zl-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .zl-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.zl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--zl-bg);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.zl-card:hover { border-color: var(--zl-ink-subtle); }

.zl-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--zl-surface);
  padding: var(--zl-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.zl-card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}
.zl-card:hover .zl-card__media img { transform: scale(1.02); }

.zl-card__badge {
  position: absolute;
  top: var(--zl-sm);
  inset-inline-start: var(--zl-sm);
  z-index: 2;
  background: var(--zl-carbon);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: var(--zl-r-sm);
}
.zl-card__badge--sale { background: var(--zl-sale); }
.zl-card__badge--accent { background: var(--zl-accent); }

.zl-card__fav {
  position: absolute;
  top: var(--zl-sm);
  inset-inline-end: var(--zl-sm);
  z-index: 2;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  color: var(--zl-ink-muted);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.zl-card__fav:hover { color: var(--zl-accent); border-color: var(--zl-accent); }
.zl-card__fav svg { width: 17px; height: 17px; }

.zl-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--zl-2xs);
  padding: var(--zl-md);
  border-top: 1px solid var(--zl-divider);
  flex: 1;
}
.zl-card__series { font-size: 11px; letter-spacing: 0.08em; font-weight: 600; color: var(--zl-ink-subtle); text-transform: uppercase; }
.zl-card__name { font-size: 16px; font-weight: 500; line-height: 22px; }
.zl-card__name a:hover { color: var(--zl-accent); }
.zl-card__spec { font-size: 13px; line-height: 20px; color: var(--zl-ink-muted); }

.zl-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zl-xs);
  margin-top: auto;
  padding-top: var(--zl-sm);
}
.zl-price-row { display: flex; align-items: baseline; gap: var(--zl-xs); }
.zl-price-row del { color: var(--zl-ink-subtle); font-size: 14px; font-weight: 400; }
.zl-price-row ins { text-decoration: none; color: var(--zl-sale); font-weight: 600; }

/* --------------------------------------------------------------------------
   Editorial split (project / studio)
   -------------------------------------------------------------------------- */

.zl-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zl-xl);
  align-items: center;
}
@media (min-width: 1024px) {
  .zl-split { grid-template-columns: 1.05fr 0.95fr; gap: var(--zl-3xl); }
  .zl-split--reverse > :first-child { order: 2; }
}

.zl-split__media { position: relative; }
.zl-split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--zl-r-md); }

.zl-split__caption {
  position: absolute;
  inset-block-end: var(--zl-md);
  inset-inline-start: var(--zl-md);
  inset-inline-end: var(--zl-md);
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  padding: var(--zl-sm) var(--zl-md);
  box-shadow: var(--zl-float);
}
.zl-split__caption strong { display: block; font-size: 14px; font-weight: 600; }
.zl-split__caption span { font-size: 12px; color: var(--zl-ink-muted); }

.zl-stat { display: flex; align-items: baseline; gap: var(--zl-sm); margin-top: var(--zl-xl); }
.zl-stat__num {
  font-size: 56px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--zl-accent);
}
.zl-stat__text { font-size: 14px; line-height: 20px; color: var(--zl-ink-muted); max-width: 18ch; }

/* --------------------------------------------------------------------------
   Room chips
   -------------------------------------------------------------------------- */

.zl-rooms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--zl-sm);
}
@media (min-width: 768px)  { .zl-rooms { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .zl-rooms { grid-template-columns: repeat(6, 1fr); } }

.zl-room {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--zl-md);
  background: var(--zl-bg);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.zl-room:hover { border-color: var(--zl-accent); transform: translateY(-2px); }
.zl-room__name { font-size: 15px; font-weight: 500; }
.zl-room__count { font-size: 12px; color: var(--zl-ink-subtle); }

/* --------------------------------------------------------------------------
   Brand strip
   -------------------------------------------------------------------------- */

.zl-brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--zl-xl);
}
.zl-brands__item {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--zl-ink-subtle);
  transition: color 0.2s ease;
}
.zl-brands__item:hover { color: var(--zl-ink); }

/* --------------------------------------------------------------------------
   Magazine
   -------------------------------------------------------------------------- */

.zl-article { display: flex; flex-direction: column; height: 100%; }
.zl-article__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--zl-r-md);
  background: var(--zl-surface);
  margin-bottom: var(--zl-md);
}
.zl-article__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease-out; }
.zl-article:hover .zl-article__media img { transform: scale(1.03); }
.zl-article__meta { font-size: 12px; letter-spacing: 0.04em; color: var(--zl-ink-subtle); margin-bottom: var(--zl-xs); }
.zl-article__title { font-size: 19px; line-height: 27px; font-weight: 500; margin-bottom: var(--zl-xs); }
.zl-article:hover .zl-article__title { color: var(--zl-accent); }
.zl-article__text { font-size: 14px; line-height: 22px; color: var(--zl-ink-muted); margin-bottom: var(--zl-md); }
.zl-article__more { margin-top: auto; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.zl-quote {
  display: flex;
  flex-direction: column;
  gap: var(--zl-sm);
  padding: var(--zl-lg);
  background: var(--zl-bg);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  height: 100%;
}
.zl-stars { display: flex; gap: 2px; color: var(--zl-accent); }
.zl-stars svg { width: 15px; height: 15px; }
.zl-quote__text { font-size: 15px; line-height: 26px; color: var(--zl-ink); flex: 1; }
.zl-quote__who { display: flex; align-items: center; gap: var(--zl-xs); padding-top: var(--zl-sm); border-top: 1px solid var(--zl-divider); }
.zl-quote__name { font-size: 14px; font-weight: 600; }
.zl-quote__role { font-size: 12px; color: var(--zl-ink-muted); }
.zl-quote__verified { color: var(--zl-success); display: inline-flex; }
.zl-quote__verified svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */

.zl-news { max-width: 44rem; }
.zl-news__form { display: flex; flex-wrap: wrap; gap: var(--zl-xs); margin-top: var(--zl-lg); }
.zl-news__form input {
  flex: 1 1 16rem;
  min-height: 48px;
  padding-inline: var(--zl-md);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--zl-r-md);
  color: #FFFFFF;
}
.zl-news__form input::placeholder { color: rgba(255,255,255,0.5); }
.zl-news__form input:focus { border-color: var(--zl-accent); outline: none; }
.zl-news__note { display: flex; flex-wrap: wrap; gap: var(--zl-md); margin-top: var(--zl-md); font-size: 12px; color: rgba(255,255,255,0.6); }
.zl-news__note span { display: inline-flex; align-items: center; gap: 4px; }
.zl-news__note svg { width: 14px; height: 14px; color: var(--zl-success); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.zl-footer { background: var(--zl-carbon); color: rgba(255,255,255,0.72); }
.zl-footer__top { padding-block: var(--zl-3xl); }
.zl-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zl-xl);
}
@media (min-width: 768px)  { .zl-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .zl-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--zl-2xl); } }

.zl-footer__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  margin-bottom: var(--zl-md);
}
.zl-footer li { margin-bottom: var(--zl-xs); }
.zl-footer a { font-size: 14px; transition: color 0.2s ease; }
.zl-footer a:hover { color: var(--zl-accent); }
.zl-footer__about { font-size: 14px; line-height: 24px; max-width: 38ch; margin-bottom: var(--zl-md); }
.zl-footer__contact li { display: flex; align-items: flex-start; gap: var(--zl-xs); font-size: 13px; line-height: 22px; }
.zl-footer__contact svg { width: 16px; height: 16px; color: var(--zl-accent); flex-shrink: 0; margin-top: 3px; }

.zl-footer__bottom {
  border-top: 1px solid var(--zl-divider-dark);
  padding-block: var(--zl-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--zl-md);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.zl-footer__legal { display: flex; flex-wrap: wrap; gap: var(--zl-md); }
.zl-pay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zl-xs); }
.zl-pay span {
  border: 1px solid var(--zl-divider-dark);
  border-radius: var(--zl-r-sm);
  padding: 3px 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Reveal. Hidden only when JS is confirmed present, so no-JS renders visible.
   -------------------------------------------------------------------------- */

.js .zl-reveal { opacity: 0; transform: translateY(14px); }
.js .zl-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .js .zl-reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   Page shells
   -------------------------------------------------------------------------- */

.zl-page { padding-block: var(--zl-2xl) var(--zl-3xl); }
.zl-page__head { margin-bottom: var(--zl-xl); padding-bottom: var(--zl-lg); border-bottom: 1px solid var(--zl-divider); }
.zl-prose { max-width: 68ch; }
.zl-prose > * + * { margin-top: var(--zl-md); }
.zl-prose h2 { font-size: 26px; line-height: 34px; margin-top: var(--zl-xl); }
.zl-prose h3 { font-size: 20px; line-height: 28px; margin-top: var(--zl-lg); }
.zl-prose a { color: var(--zl-accent); border-bottom: 1px solid currentColor; }
.zl-prose ul { list-style: disc; padding-inline-start: 1.25rem; }
.zl-prose li { margin-bottom: var(--zl-2xs); }
.zl-prose img { border-radius: var(--zl-r-md); }
.zl-prose blockquote {
  border-inline-start: 2px solid var(--zl-accent);
  padding-inline-start: var(--zl-md);
  color: var(--zl-ink-muted);
}

/* Tables in legal documents: the cookie register is the reason these exist.
   The wrapper scrolls rather than widening the page, and the prose column is
   allowed to break out of its 68ch measure, because a four-column table does
   not fit in a reading measure. */
.zl-prose table {
  display: block;
  overflow-x: auto;
  width: 100%;
  max-width: none;
  font-size: 13px;
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
}
.zl-prose thead { background: var(--zl-surface); }
.zl-prose th,
.zl-prose td {
  padding: var(--zl-xs) var(--zl-sm);
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--zl-divider);
  white-space: normal;
}
.zl-prose th { font-weight: 500; color: var(--zl-ink); }
.zl-prose td { color: var(--zl-ink-muted); }
.zl-prose tbody tr:last-child td { border-bottom: 0; }
/* Cookie names are LTR identifiers sitting inside an RTL document. */
.zl-prose td:first-child { direction: ltr; text-align: start; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.zl-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--zl-2xs); font-size: 12px; color: var(--zl-ink-subtle); margin-bottom: var(--zl-md); }
.zl-breadcrumb a:hover { color: var(--zl-accent); }

/* --------------------------------------------------------------------------
   Self-hosted Rubik. Variable font, one file per subset, never a font CDN.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/rubik-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Declared local placeholder. Marks every slot with no real photograph yet.
   -------------------------------------------------------------------------- */

.zl-ph {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--zl-md);
  text-align: center;
  border-radius: var(--zl-r-md);
  background:
    repeating-linear-gradient(
      135deg,
      var(--zl-surface) 0px,
      var(--zl-surface) 12px,
      var(--zl-surface-warm) 12px,
      var(--zl-surface-warm) 24px
    );
  border: 1px solid var(--zl-divider);
}
.zl-ph span {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.04em;
  color: var(--zl-ink-subtle);
  max-width: 22ch;
}
.zl-card__media .zl-ph,
.zl-mosaic__cell .zl-ph { border: 0; border-radius: 0; height: 100%; }

/* --------------------------------------------------------------------------
   WooCommerce surface alignment
   -------------------------------------------------------------------------- */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--zl-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px)  { .woocommerce ul.products { gap: var(--zl-lg); } }
@media (min-width: 1200px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); } }
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { font-size: 13px; color: var(--zl-ink-muted); }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--zl-carbon);
  color: #FFFFFF;
  border-radius: var(--zl-r-md);
  min-height: 48px;
  padding-inline: var(--zl-lg);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--zl-carbon-soft); color: #FFFFFF; }

.woocommerce .button.alt,
.woocommerce button.button.alt { background: var(--zl-accent); }
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--zl-accent-hover); }

.woocommerce span.onsale {
  background: var(--zl-sale);
  color: #FFFFFF;
  border-radius: var(--zl-r-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  min-height: 0;
  min-width: 0;
  padding: 4px 8px;
  line-height: 1.2;
}

.woocommerce .price { color: var(--zl-ink); font-weight: 600; }
.woocommerce .price del { color: var(--zl-ink-subtle); font-weight: 400; }
.woocommerce .price ins { color: var(--zl-sale); text-decoration: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
  min-height: 48px;
  padding: 0 var(--zl-md);
  background: var(--zl-bg);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--zl-carbon);
  outline: none;
}

.woocommerce table.shop_table {
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  border-collapse: separate;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-top: 1px solid var(--zl-divider); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--zl-accent);
  background: var(--zl-surface);
  border-radius: var(--zl-r-md);
}
.woocommerce-error { border-top-color: var(--zl-sale); }

.woocommerce div.product .product_title { font-size: 30px; line-height: 40px; font-weight: 500; letter-spacing: -0.015em; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding-inline: 0; }
.woocommerce #respond input#submit.alt { background: var(--zl-accent); }

/* ==========================================================================
   Floating widgets: WhatsApp bubble + accessibility panel
   ========================================================================== */

/* --- WhatsApp ------------------------------------------------------------ */

.zl-wa {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--zl-xs);
  height: 56px;
  padding-inline: 16px;
  border-radius: var(--zl-r-lg);
  background: #1F7A4C;
  color: #FFFFFF;
  box-shadow: 0 12px 32px -4px rgba(29, 29, 27, 0.22), 0 4px 12px -2px rgba(29, 29, 27, 0.12);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.zl-wa:hover { background: #19653F; transform: translateY(-2px); }
.zl-wa__icon { display: inline-flex; }
.zl-wa__icon svg { width: 28px; height: 28px; }
.zl-wa__label { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; }

@media (max-width: 767px) {
  .zl-wa { inset-block-end: 16px; inset-inline-end: 16px; height: 52px; padding-inline: 13px; }
  .zl-wa__label { display: none; }
}

/* One slow ring, motivated: it marks the channel as live. Off at low motion. */
.zl-wa__pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #1F7A4C;
  animation: zl-wa-ring 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes zl-wa-ring {
  0%   { opacity: 0.55; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.22); }
  100% { opacity: 0;    transform: scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .zl-wa__pulse { animation: none; display: none; }
  .zl-wa:hover { transform: none; }
}

/* --- Accessibility trigger ---------------------------------------------- */

.zl-a11y-btn {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-start: 20px;
  z-index: 90;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--zl-r-lg);
  background: var(--zl-carbon);
  color: #FFFFFF;
  box-shadow: 0 12px 32px -4px rgba(29, 29, 27, 0.22), 0 4px 12px -2px rgba(29, 29, 27, 0.12);
  transition: background-color 0.2s ease;
}
.zl-a11y-btn:hover { background: var(--zl-accent); }
.zl-a11y-btn svg { width: 28px; height: 28px; }
@media (max-width: 767px) { .zl-a11y-btn { inset-block-end: 16px; inset-inline-start: 16px; width: 48px; height: 48px; } }

/* --- Accessibility panel ------------------------------------------------- */

.zl-a11y {
  position: fixed;
  inset-block-end: 84px;
  inset-inline-start: 20px;
  z-index: 95;
  width: min(92vw, 340px);
  max-height: min(76vh, 620px);
  overflow-y: auto;
  background: var(--zl-bg);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-lg);
  box-shadow: var(--zl-float), 0 24px 48px -12px rgba(29, 29, 27, 0.18);
}
@media (max-width: 767px) { .zl-a11y { inset-block-end: 76px; inset-inline-start: 16px; } }

.zl-a11y__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zl-xs);
  padding: var(--zl-md);
  border-bottom: 1px solid var(--zl-divider);
  position: sticky;
  top: 0;
  background: var(--zl-bg);
}
.zl-a11y__title { font-size: 16px; font-weight: 600; }
.zl-a11y__close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  color: var(--zl-ink-muted);
}
.zl-a11y__close:hover { color: var(--zl-ink); border-color: var(--zl-ink-subtle); }
.zl-a11y__close svg { width: 16px; height: 16px; }

.zl-a11y__body { padding: var(--zl-md); display: flex; flex-direction: column; gap: var(--zl-md); }
.zl-a11y__legend {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zl-ink-subtle);
  margin-bottom: var(--zl-xs);
}

.zl-a11y__steps {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: var(--zl-xs);
}
.zl-a11y__steps button {
  height: 44px;
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  font-size: 20px;
  font-weight: 500;
  color: var(--zl-ink);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.zl-a11y__steps button:hover { border-color: var(--zl-accent); background: var(--zl-surface); }
.zl-a11y__steps output {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.zl-a11y__list { display: flex; flex-direction: column; gap: 6px; }
.zl-a11y__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zl-xs);
  width: 100%;
  min-height: 44px;
  padding-inline: var(--zl-sm);
  text-align: start;
  font-size: 14px;
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.zl-a11y__toggle:hover { border-color: var(--zl-ink-subtle); background: var(--zl-surface); }
.zl-a11y__state {
  width: 34px; height: 20px;
  flex-shrink: 0;
  border-radius: var(--zl-r-sm);
  background: var(--zl-divider);
  position: relative;
  transition: background-color 0.2s ease;
}
.zl-a11y__state::after {
  content: '';
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 14px; height: 14px;
  border-radius: 1px;
  background: #FFFFFF;
  transition: transform 0.2s ease;
}
.zl-a11y__toggle[aria-pressed="true"] { border-color: var(--zl-accent); }
.zl-a11y__toggle[aria-pressed="true"] .zl-a11y__state { background: var(--zl-accent); }
.zl-a11y__toggle[aria-pressed="true"] .zl-a11y__state::after { transform: translateX(14px); }
[dir="rtl"] .zl-a11y__toggle[aria-pressed="true"] .zl-a11y__state::after { transform: translateX(-14px); }

.zl-a11y__statement {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--zl-ink-muted);
  border-top: 1px solid var(--zl-divider);
  padding-top: var(--zl-sm);
}
.zl-a11y__statement:hover { color: var(--zl-accent); }

/* --- Applied accessibility states ---------------------------------------- */

html.zl-a11y-font body { font-size: calc(15px * var(--zl-a11y-scale, 100%) / 100%); }
html.zl-a11y-font :where(h1, h2, h3, h4, p, a, li, span, button, input, label, td, th) {
  font-size: calc(1em * var(--zl-a11y-scale, 100%) / 100%);
}

html.zl-a11y--contrast-high body { background: #FFFFFF; }
html.zl-a11y--contrast-high :where(p, li, span, td, th, figcaption) { color: #000000 !important; }
html.zl-a11y--contrast-high :where(h1, h2, h3, h4, h5, h6) { color: #000000 !important; }
html.zl-a11y--contrast-high a { color: #0000CC !important; text-decoration: underline !important; }
html.zl-a11y--contrast-high .zl-section--carbon,
html.zl-a11y--contrast-high .zl-footer,
html.zl-a11y--contrast-high .zl-topbar { background: #000000 !important; }
html.zl-a11y--contrast-high .zl-section--carbon *,
html.zl-a11y--contrast-high .zl-footer *,
html.zl-a11y--contrast-high .zl-topbar * { color: #FFFFFF !important; }

html.zl-a11y--contrast-dark body,
html.zl-a11y--contrast-dark .zl-section--surface,
html.zl-a11y--contrast-dark .zl-section--warm,
html.zl-a11y--contrast-dark .zl-card,
html.zl-a11y--contrast-dark .zl-a11y { background: #111111 !important; }
html.zl-a11y--contrast-dark :where(p, li, span, td, th, h1, h2, h3, h4, h5, h6, .zl-a11y__title) { color: #F2F2F2 !important; }
html.zl-a11y--contrast-dark a { color: #FFD79A !important; }
html.zl-a11y--contrast-dark .zl-card,
html.zl-a11y--contrast-dark .zl-room,
html.zl-a11y--contrast-dark .zl-quote { border-color: #444444 !important; }

html.zl-a11y--contrast-invert { filter: invert(1) hue-rotate(180deg); }
html.zl-a11y--contrast-invert img,
html.zl-a11y--contrast-invert video,
html.zl-a11y--contrast-invert .zl-wa { filter: invert(1) hue-rotate(180deg); }

html.zl-a11y--links a {
  text-decoration: underline !important;
  text-underline-offset: 2px;
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}

html.zl-a11y--readable :where(body, h1, h2, h3, h4, h5, h6, p, a, li, span, button, input) {
  font-family: Arial, "Arial Hebrew", sans-serif !important;
  letter-spacing: 0.02em !important;
}

html.zl-a11y--spacing :where(p, li, td, span) {
  line-height: 2 !important;
  letter-spacing: 0.06em !important;
  word-spacing: 0.16em !important;
}

html.zl-a11y--no-motion *,
html.zl-a11y--no-motion *::before,
html.zl-a11y--no-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.zl-a11y--no-motion .zl-reveal { opacity: 1 !important; transform: none !important; }

html.zl-a11y--cursor,
html.zl-a11y--cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l26 18-11 2 6 13-5 2-6-13-10 8z' fill='%23000' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 6 4, auto !important;
}

.zl-a11y-guide {
  position: fixed;
  inset-inline: 0;
  height: 3px;
  background: var(--zl-accent);
  box-shadow: 0 0 0 14px rgba(174, 129, 82, 0.12);
  z-index: 88;
  pointer-events: none;
  transform: translateY(-1px);
}

/* Keep the floating widgets clear of the WooCommerce sticky bar on mobile. */
@media (max-width: 767px) {
  body.woocommerce-cart .zl-wa,
  body.woocommerce-checkout .zl-wa { inset-block-end: 76px; }
}

@media print {
  .zl-wa, .zl-a11y-btn, .zl-a11y, .zl-a11y-guide, .zl-drawer { display: none !important; }
}

/* ==========================================================================
   Product detail page
   ========================================================================== */

.zl-pdp { padding-block: var(--zl-lg) var(--zl-3xl); }

.zl-pdp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zl-xl);
  align-items: start;
}
@media (min-width: 1024px) {
  /* 7 / 5 split, matching the design's architectural grid. */
  .zl-pdp__grid { grid-template-columns: 7fr 5fr; gap: var(--zl-2xl); }
}

/* --- Media --------------------------------------------------------------- */

.zl-pdp__stage {
  position: relative;
  background: var(--zl-surface);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--zl-xl);
  overflow: hidden;
}
.zl-pdp__stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.25s ease;
}

.zl-pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--zl-xs);
  margin-top: var(--zl-xs);
}
@media (min-width: 640px) { .zl-pdp__thumbs { grid-template-columns: repeat(6, 1fr); } }

.zl-pdp__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 6px;
  background: var(--zl-surface);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  transition: border-color 0.2s ease;
}
.zl-pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.zl-pdp__thumb:hover { border-color: var(--zl-ink-subtle); }
.zl-pdp__thumb.is-active { border-color: var(--zl-accent); box-shadow: 0 0 0 1px var(--zl-accent); }

/* --- Purchase panel ------------------------------------------------------ */

@media (min-width: 1024px) {
  .zl-pdp__panel { position: sticky; top: calc(72px + var(--zl-md)); }
}

.zl-pdp__panelInner {
  display: flex;
  flex-direction: column;
  gap: var(--zl-md);
  background: var(--zl-bg);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-lg);
  padding: var(--zl-lg);
}

.zl-pdp__title { margin-block: var(--zl-2xs) 0; }

.zl-pdp__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zl-md);
  padding-bottom: var(--zl-md);
  border-bottom: 1px solid var(--zl-divider);
}
.zl-pdp__rating { display: inline-flex; align-items: center; gap: var(--zl-2xs); }

.zl-pdp__intro > p + p { margin-top: var(--zl-xs); }

.zl-pdp__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--zl-sm);
  padding-block: var(--zl-xs);
}
.zl-pdp__price .price { font-size: inherit; }
.zl-pdp__price del { color: var(--zl-ink-subtle); font-size: 18px; font-weight: 400; }
.zl-pdp__price ins { text-decoration: none; color: var(--zl-ink); }

.zl-pdp__saving {
  font-size: 13px;
  font-weight: 600;
  color: var(--zl-sale);
  border: 1px solid currentColor;
  border-radius: var(--zl-r-sm);
  padding: 3px 8px;
}

.zl-pdp__stock {
  display: flex;
  align-items: flex-start;
  gap: var(--zl-xs);
  font-size: 14px;
  line-height: 22px;
}
.zl-pdp__stock svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.zl-pdp__stock.is-in { color: var(--zl-success); }
.zl-pdp__stock.is-out { color: var(--zl-sale); }

/* WooCommerce add-to-cart form inside the panel */
.zl-pdp__panelInner form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zl-xs);
  margin: 0;
  padding-top: var(--zl-md);
  border-top: 1px solid var(--zl-divider);
}
.zl-pdp__panelInner form.cart .quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  overflow: hidden;
}
.zl-pdp__panelInner form.cart .quantity input.qty {
  width: 68px;
  height: 48px;
  border: 0;
  text-align: center;
  font-weight: 500;
  background: var(--zl-bg);
}
.zl-pdp__panelInner form.cart button.single_add_to_cart_button {
  flex: 1 1 12rem;
  min-height: 48px;
  background: var(--zl-carbon);
  color: #FFFFFF;
  border-radius: var(--zl-r-md);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.zl-pdp__panelInner form.cart button.single_add_to_cart_button:hover { background: var(--zl-carbon-soft); }

/* Variation selectors, when a product has them */
.zl-pdp__panelInner table.variations { width: 100%; margin: 0; }
.zl-pdp__panelInner table.variations th,
.zl-pdp__panelInner table.variations td { padding: var(--zl-2xs) 0; border: 0; text-align: start; }
.zl-pdp__panelInner table.variations label { font-size: 13px; font-weight: 600; color: var(--zl-ink-muted); }
.zl-pdp__panelInner table.variations select {
  width: 100%;
  min-height: 48px;
  padding-inline: var(--zl-sm);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  background: var(--zl-bg);
}

.zl-pdp__trust {
  display: flex;
  flex-direction: column;
  gap: var(--zl-xs);
  padding-top: var(--zl-md);
  border-top: 1px solid var(--zl-divider);
}
.zl-pdp__trust li {
  display: flex;
  align-items: center;
  gap: var(--zl-xs);
  font-size: 13px;
  color: var(--zl-ink-muted);
}
.zl-pdp__trust svg { width: 17px; height: 17px; color: var(--zl-accent); flex-shrink: 0; }

/* --- Specifications ------------------------------------------------------ */

.zl-pdp__specs {
  margin-top: var(--zl-3xl);
  padding-top: var(--zl-xl);
  border-top: 1px solid var(--zl-divider);
}

.zl-acc { border-bottom: 1px solid var(--zl-divider); }
.zl-acc:first-of-type { border-top: 1px solid var(--zl-divider); }

.zl-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zl-sm);
  min-height: 56px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.zl-acc__head::-webkit-details-marker { display: none; }
.zl-acc__head:hover { color: var(--zl-accent); }

/* Plus that becomes a minus, drawn in CSS so no icon font is needed. */
.zl-acc__sign { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.zl-acc__sign::before,
.zl-acc__sign::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: transform 0.2s ease;
}
.zl-acc__sign::after { transform: rotate(90deg); }
.zl-acc[open] .zl-acc__sign::after { transform: rotate(0deg); }

.zl-acc__body { padding-bottom: var(--zl-lg); }

.zl-spec { width: 100%; border-collapse: collapse; }
.zl-spec tr { border-top: 1px solid var(--zl-divider); }
.zl-spec tr:first-child { border-top: 0; }
.zl-spec th,
.zl-spec td { padding-block: var(--zl-sm); font-size: 13px; vertical-align: top; }
.zl-spec th {
  width: 40%;
  text-align: start;
  font-weight: 400;
  color: var(--zl-ink-muted);
}
.zl-spec td {
  width: 60%;
  font-weight: 500;
  color: var(--zl-ink);
  text-align: end;
}

/* --- Related products ---------------------------------------------------- */

.related.products,
.up-sells.products {
  margin-top: var(--zl-3xl);
  padding-top: var(--zl-xl);
  border-top: 1px solid var(--zl-divider);
}
.related.products > h2,
.up-sells.products > h2 {
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  margin-bottom: var(--zl-lg);
}

/* Mobile sticky buy bar */
.zl-buybar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--zl-sm);
  padding: var(--zl-xs) var(--zl-md);
  background: var(--zl-bg);
  border-top: 1px solid var(--zl-divider);
  box-shadow: var(--zl-float);
}
@media (max-width: 1023px) {
  body.single-product .zl-buybar { display: flex; }
  body.single-product .zl-wa,
  body.single-product .zl-a11y-btn { inset-block-end: 84px; }
}
.zl-buybar__info { min-width: 0; }
.zl-buybar__name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
.zl-buybar__price { font-size: 16px; font-weight: 600; }

/* ==========================================================================
   Product panel controls: variations, quantity, add-on, buy now, trust row
   ========================================================================== */

/* --- Variation selectors -------------------------------------------------- */

.zl-hidden-select {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.zl-varlist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zl-xs);
  padding-block: var(--zl-2xs);
}

.zl-var {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--zl-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--zl-ink);
  background: var(--zl-bg);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.zl-var:hover { border-color: var(--zl-ink-subtle); }
.zl-var.is-active {
  background: var(--zl-carbon);
  border-color: var(--zl-carbon);
  color: #FFFFFF;
}

/* Material swatches: circles, the one place circles are allowed. */
.zl-varlist--swatch { gap: var(--zl-sm); }
.zl-var--swatch {
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background-color: var(--zl-surface);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--zl-divider);
}
.zl-var--swatch:hover { border-color: var(--zl-ink-subtle); }
.zl-var--swatch.is-active {
  border: 1px solid var(--zl-accent);
  box-shadow: 0 0 0 2px #FFFFFF inset, 0 0 0 1px var(--zl-accent);
}

/* Give the native variation row a cleaner frame */
.zl-pdp__panelInner table.variations tr { display: block; padding-block: var(--zl-xs); }
.zl-pdp__panelInner table.variations tbody tr + tr { border-top: 1px solid var(--zl-divider); }
.zl-pdp__panelInner .reset_variations {
  display: inline-block;
  font-size: 12px;
  color: var(--zl-ink-subtle);
  margin-top: var(--zl-2xs);
}
.zl-pdp__panelInner .reset_variations:hover { color: var(--zl-accent); }
.zl-pdp__panelInner .woocommerce-variation-price { padding-block: var(--zl-xs); }

/* --- Quantity stepper ----------------------------------------------------- */

.zl-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  overflow: hidden;
  background: var(--zl-bg);
}
.zl-qty__btn {
  width: 44px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--zl-ink);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.zl-qty__btn:hover { background: var(--zl-surface); color: var(--zl-accent); }
.zl-qty input.qty {
  width: 52px;
  height: 48px;
  border: 0;
  border-inline: 1px solid var(--zl-divider);
  text-align: center;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: var(--zl-bg);
  -moz-appearance: textfield;
}
.zl-qty input.qty::-webkit-outer-spin-button,
.zl-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Installation add-on -------------------------------------------------- */

.zl-addon {
  display: flex;
  align-items: flex-start;
  gap: var(--zl-sm);
  width: 100%;
  padding: var(--zl-sm) var(--zl-md);
  margin-block: var(--zl-xs);
  background: var(--zl-surface);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.zl-addon:hover { border-color: var(--zl-ink-subtle); }
.zl-addon:has(input:checked) { border-color: var(--zl-accent); background: var(--zl-bg); }

.zl-addon input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--zl-accent);
  flex-shrink: 0;
}
.zl-addon__body { display: flex; flex-direction: column; gap: 2px; }
.zl-addon__title { font-size: 14px; font-weight: 500; line-height: 20px; }
.zl-addon__price { color: var(--zl-accent); font-weight: 600; white-space: nowrap; }
.zl-addon__note { font-size: 12px; line-height: 18px; color: var(--zl-ink-muted); }

/* --- Buy now -------------------------------------------------------------- */

.zl-buynow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zl-xs);
  width: 100%;
  min-height: 48px;
  margin-top: var(--zl-xs);
  padding-inline: var(--zl-lg);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--zl-carbon);
  background: transparent;
  border: 1px solid var(--zl-carbon);
  border-radius: var(--zl-r-md);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.zl-buynow:hover { background: var(--zl-surface); }
.zl-buynow svg { width: 18px; height: 18px; color: var(--zl-accent); }

/* The cart form stacks: controls row, then add-on, then buy now. */
.zl-pdp__panelInner form.cart { flex-direction: column; align-items: stretch; }
.zl-pdp__panelInner form.cart .zl-qty { align-self: flex-start; }
.zl-pdp__panelInner form.cart > .zl-qty,
.zl-pdp__panelInner form.cart > button.single_add_to_cart_button { margin-top: var(--zl-xs); }

@media (min-width: 480px) {
  .zl-pdp__panelInner form.cart { display: grid; grid-template-columns: auto 1fr; gap: var(--zl-xs); }
  .zl-pdp__panelInner form.cart table.variations,
  .zl-pdp__panelInner form.cart .zl-addon,
  .zl-pdp__panelInner form.cart .zl-buynow,
  .zl-pdp__panelInner form.cart .woocommerce-variation,
  .zl-pdp__panelInner form.cart .woocommerce-variation-price { grid-column: 1 / -1; }
  .zl-pdp__panelInner form.cart button.single_add_to_cart_button { margin-top: 0; }
}

/* --- Trust row: horizontal, matching the comp ---------------------------- */

.zl-pdp__trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--zl-xs);
  padding-top: var(--zl-md);
  border-top: 1px solid var(--zl-divider);
}
.zl-pdp__trust li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 11px;
  line-height: 15px;
  color: var(--zl-ink-muted);
}
.zl-pdp__trust svg { width: 20px; height: 20px; color: var(--zl-accent); flex-shrink: 0; }

/* ==========================================================================
   Cart drawer
   ========================================================================== */

.zl-cartdrawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  visibility: hidden;
  pointer-events: none;
}
.zl-cartdrawer[data-open="true"] { visibility: visible; pointer-events: auto; }

.zl-cartdrawer__veil {
  position: absolute;
  inset: 0;
  background: rgba(29, 29, 27, 0.6);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.zl-cartdrawer[data-open="true"] .zl-cartdrawer__veil { opacity: 1; }

.zl-cartdrawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(92vw, 400px);
  display: flex;
  flex-direction: column;
  background: var(--zl-bg);
  border-inline-end: 1px solid var(--zl-divider);
  box-shadow: var(--zl-float);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
[dir="rtl"] .zl-cartdrawer__panel { transform: translateX(100%); }
.zl-cartdrawer[data-open="true"] .zl-cartdrawer__panel { transform: translateX(0); }

.zl-cartdrawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zl-sm);
  padding: var(--zl-md);
  border-bottom: 1px solid var(--zl-divider);
  flex-shrink: 0;
}
.zl-cartdrawer__title { font-size: 17px; font-weight: 600; }

.zl-cartdrawer__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--zl-md);
  transition: opacity 0.2s ease;
}
.zl-cartdrawer__content.is-busy { opacity: 0.45; pointer-events: none; }

/* WooCommerce mini cart, restyled to the design */
.zl-cartdrawer .woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}
.zl-cartdrawer .woocommerce-mini-cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--zl-sm);
  padding-block: var(--zl-sm);
  border-bottom: 1px solid var(--zl-divider);
}
.zl-cartdrawer .woocommerce-mini-cart-item img {
  grid-row: span 2;
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--zl-surface);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  margin: 0;
}
.zl-cartdrawer .woocommerce-mini-cart-item a:not(.remove) {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--zl-ink);
  padding-inline-end: 24px;
  display: block;
}
.zl-cartdrawer .woocommerce-mini-cart-item a:not(.remove):hover { color: var(--zl-accent); }
.zl-cartdrawer .woocommerce-mini-cart-item .quantity {
  font-size: 13px;
  color: var(--zl-ink-muted);
  font-variant-numeric: tabular-nums;
}
.zl-cartdrawer .woocommerce-mini-cart-item .variation {
  font-size: 12px;
  color: var(--zl-ink-subtle);
  margin: 2px 0 0;
}
.zl-cartdrawer .woocommerce-mini-cart-item .variation dt,
.zl-cartdrawer .woocommerce-mini-cart-item .variation dd { display: inline; margin: 0; }

.zl-cartdrawer a.remove {
  position: absolute;
  top: var(--zl-sm);
  inset-inline-end: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--zl-r-sm);
  font-size: 18px;
  line-height: 1;
  color: var(--zl-ink-subtle);
  text-decoration: none;
}
.zl-cartdrawer a.remove:hover { color: var(--zl-sale); background: var(--zl-surface); }

.zl-cartdrawer .woocommerce-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zl-sm);
  margin: 0;
  padding-block: var(--zl-md);
  border-bottom: 1px solid var(--zl-divider);
  font-size: 15px;
}
.zl-cartdrawer .woocommerce-mini-cart__total strong { font-weight: 500; color: var(--zl-ink-muted); }
.zl-cartdrawer .woocommerce-mini-cart__total .amount { font-size: 20px; font-weight: 600; }

.zl-cartdrawer .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--zl-xs);
  margin: 0;
  padding-top: var(--zl-md);
}
.zl-cartdrawer .woocommerce-mini-cart__buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: var(--zl-r-md);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--zl-carbon);
  color: var(--zl-carbon);
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.zl-cartdrawer .woocommerce-mini-cart__buttons a:hover { background: var(--zl-surface); }
.zl-cartdrawer .woocommerce-mini-cart__buttons a.checkout {
  background: var(--zl-carbon);
  color: #FFFFFF;
  order: -1;
}
.zl-cartdrawer .woocommerce-mini-cart__buttons a.checkout:hover { background: var(--zl-carbon-soft); }

.zl-cartdrawer .woocommerce-mini-cart__empty-message {
  text-align: center;
  color: var(--zl-ink-muted);
  padding-block: var(--zl-2xl);
  font-size: 15px;
}

/* Loading state on the loop buttons */
.zl-card .add_to_cart_button.loading { opacity: 0.6; pointer-events: none; }
.zl-card .added_to_cart { display: none; }
button.single_add_to_cart_button.loading { opacity: 0.6; }

/* ==========================================================================
   Icon sizing + mobile overflow guards
   ==========================================================================
   Every inline icon carries .zl-i. Without an explicit size an inline SVG
   falls back to 300x150px, which destroyed the product card on narrow
   screens. This is the single rule that governs all of them; the more
   specific per-context rules above still win where they exist.
   ========================================================================== */

.zl-i {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
}

/* Buttons never let an icon dictate their size. */
.zl-btn .zl-i,
.zl-buynow .zl-i { width: 17px; height: 17px; }
.zl-btn--sm .zl-i { width: 15px; height: 15px; }

/* --- Product card on narrow screens -------------------------------------- */

.zl-card { min-width: 0; }
.zl-card__body { min-width: 0; }
.zl-card__name,
.zl-card__spec,
.zl-card__series { min-width: 0; overflow-wrap: anywhere; }

.zl-card__foot { flex-wrap: wrap; min-width: 0; }
.zl-card__foot .zl-price-row { min-width: 0; }

/* Below the two-column breakpoint the button takes its own line, full width,
   so the tap target is always reachable. */
@media (max-width: 767px) {
  .zl-card__foot { flex-direction: column; align-items: stretch; gap: var(--zl-xs); }
  .zl-card__foot .zl-btn { width: 100%; }
  .zl-card__foot .zl-price-row { justify-content: flex-start; }
  .zl-btn--sm { padding-inline: var(--zl-sm); }
}

/* --- Grid children must be allowed to shrink ----------------------------- */

.zl-grid > *,
.zl-rooms > *,
.zl-mosaic > *,
.zl-assure > *,
.zl-footer__cols > * { min-width: 0; }

.woocommerce ul.products > li.product { min-width: 0; }

/* --- Page-level overflow guard -------------------------------------------
   clip rather than hidden: overflow-x:hidden on body creates a scroll
   container and silently breaks the sticky purchase panel.
   ------------------------------------------------------------------------- */

body { overflow-x: clip; }

/* WooCommerce archive chrome wraps instead of pushing the page wide. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { max-width: 100%; }
.woocommerce .woocommerce-ordering select { max-width: 100%; }

@media (max-width: 767px) {
  .woocommerce .woocommerce-result-count { float: none; margin-bottom: var(--zl-xs); }
  .woocommerce .woocommerce-ordering { float: none; margin-bottom: var(--zl-md); }
  .woocommerce .woocommerce-ordering select { width: 100%; min-height: 44px; }
}

/* Long unbroken strings (SKUs, URLs) must not widen the page. */
.zl-prose, .zl-card__name, .zl-article__title, .zl-pdp__title,
.woocommerce-loop-product__title { overflow-wrap: anywhere; }

/* Tables scroll inside themselves rather than widening the page. */
.zl-acc__body { overflow-x: auto; }
.woocommerce table.shop_table_responsive,
.woocommerce table.cart { display: block; overflow-x: auto; }
@media (min-width: 768px) {
  .woocommerce table.shop_table_responsive,
  .woocommerce table.cart { display: table; }
}

/* --------------------------------------------------------------------------
   Button labels stay on one line.
   Without this "הוספה לסל" breaks between its two words inside a narrow card.
   -------------------------------------------------------------------------- */

.zl-btn,
.zl-buynow,
.zl-var {
  white-space: nowrap;
}

.zl-btn > span,
.zl-buynow > span {
  white-space: nowrap;
}

/* The label may shrink slightly rather than wrap in the tightest cards. */
@media (max-width: 400px) {
  .zl-card__foot .zl-btn--sm { font-size: 13px; padding-inline: var(--zl-xs); }
}

/* --------------------------------------------------------------------------
   Product card: fixed vertical rhythm.

   Titles vary from one to three lines across the catalogue, which left every
   card in a row a different shape. Each text slot now reserves a fixed height
   and clamps its overflow, so the series label, name, spec line and footer sit
   on the same baseline in every card. The full title stays in the DOM for
   screen readers and search engines; only the visual overflow is clipped.
   -------------------------------------------------------------------------- */

.zl-card__body { gap: 0; }

.zl-card__series {
  display: block;
  min-height: 16px;
  margin-bottom: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.zl-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 2 lines at the 22px line-height set above */
  min-height: 44px;
  margin-bottom: 4px;
}

.zl-card__spec {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 20px;
}

/* Footer pinned to the bottom of every card, so prices and buttons line up. */
.zl-card__foot { margin-top: auto; }

/* Cards stretch to the tallest in their row. */
.zl-grid,
.woocommerce ul.products { align-items: stretch; }
.zl-grid > *,
.woocommerce ul.products > li.product { display: flex; }
.zl-grid > * > .zl-card,
.woocommerce ul.products > li.product > .zl-card { width: 100%; }

@media (min-width: 1024px) {
  .zl-card__name { font-size: 16px; line-height: 22px; min-height: 44px; }
}

@media (max-width: 767px) {
  /* Slightly tighter on phones, still two reserved lines. */
  .zl-card__name { font-size: 15px; line-height: 20px; min-height: 40px; }
  .zl-card__spec { min-height: 18px; }
}

/* --------------------------------------------------------------------------
   Add-to-cart button: a fixed 48px box.

   The form sets align-items:stretch, and a grid item stretches to fill its
   row. That let the button inflate to the height of whatever sat beside it
   instead of holding the 48px control height the design specifies. Height is
   now explicit and the item is centred rather than stretched, so nothing in
   the row can drive its size.
   -------------------------------------------------------------------------- */

.zl-pdp__panelInner form.cart {
  align-items: center;
}

.zl-pdp__panelInner form.cart > .zl-addon,
.zl-pdp__panelInner form.cart > .zl-buynow,
.zl-pdp__panelInner form.cart > table.variations,
.zl-pdp__panelInner form.cart > .woocommerce-variation,
.zl-pdp__panelInner form.cart > .woocommerce-variation-price {
  align-self: stretch;
}

.zl-pdp__panelInner form.cart button.single_add_to_cart_button {
  align-self: center;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  padding-block: 0;
  padding-inline: var(--zl-lg);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.zl-pdp__panelInner form.cart .quantity {
  align-self: center;
  margin: 0;
}

/* Below the grid breakpoint both controls go full width, stacked. */
@media (max-width: 479px) {
  .zl-pdp__panelInner form.cart .quantity,
  .zl-pdp__panelInner form.cart .zl-qty { width: 100%; }
  .zl-pdp__panelInner form.cart .zl-qty { display: flex; justify-content: space-between; }
  .zl-pdp__panelInner form.cart .zl-qty input.qty { flex: 1; }
  .zl-pdp__panelInner form.cart button.single_add_to_cart_button { width: 100%; }
}

/* ==========================================================================
   Upsell strips (cart + checkout)
   ========================================================================== */

.zl-upsell {
  margin-top: var(--zl-xl);
  padding-top: var(--zl-lg);
  border-top: 1px solid var(--zl-divider);
}

.zl-upsell--checkout {
  margin-top: var(--zl-lg);
  padding: var(--zl-md);
  background: var(--zl-surface);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
}

.zl-upsell__head { margin-bottom: var(--zl-md); }
.zl-upsell__title { font-size: 17px; font-weight: 600; line-height: 24px; }
.zl-upsell__note { font-size: 13px; line-height: 20px; color: var(--zl-ink-muted); margin-top: 2px; }

.zl-upsell__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--zl-xs);
}
@media (min-width: 768px) {
  .zl-upsell--cart .zl-upsell__list { grid-template-columns: repeat(2, 1fr); gap: var(--zl-sm); }
}

.zl-upsell__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--zl-sm);
  padding: var(--zl-xs);
  background: var(--zl-bg);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  min-width: 0;
  transition: border-color 0.2s ease;
}
.zl-upsell__item:hover { border-color: var(--zl-ink-subtle); }

.zl-upsell__media {
  width: 56px;
  height: 56px;
  display: block;
  background: var(--zl-surface);
  border-radius: var(--zl-r-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.zl-upsell__media img { width: 100%; height: 100%; object-fit: contain; }

.zl-upsell__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.zl-upsell__name {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--zl-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.zl-upsell__name:hover { color: var(--zl-accent); }

.zl-upsell__price { font-size: 14px; font-weight: 600; }
.zl-upsell__price del { color: var(--zl-ink-subtle); font-weight: 400; font-size: 12px; }
.zl-upsell__price ins { text-decoration: none; color: var(--zl-sale); }

.zl-upsell__add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding-inline: var(--zl-sm);
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--zl-carbon);
  background: transparent;
  border: 1px solid var(--zl-carbon);
  border-radius: var(--zl-r-md);
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.zl-upsell__add:hover { background: var(--zl-carbon); color: #FFFFFF; }
.zl-upsell__add .zl-i { width: 15px; height: 15px; }
.zl-upsell__add.is-busy { opacity: 0.5; pointer-events: none; }

@media (max-width: 420px) {
  .zl-upsell__add span { display: none; }
  .zl-upsell__add { padding-inline: var(--zl-xs); }
}

/* ==========================================================================
   Free shipping progress bar
   ========================================================================== */

.zl-shipbar {
  display: flex;
  flex-direction: column;
  gap: var(--zl-xs);
  padding: var(--zl-sm) var(--zl-md);
  margin-bottom: var(--zl-lg);
  background: var(--zl-surface);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
}

/* The empty placeholder exists only so the fragment has a target. */
.zl-shipbar--empty {
  display: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
}

.zl-shipbar--drawer {
  margin: 0 var(--zl-md) var(--zl-xs);
  padding: var(--zl-xs) var(--zl-sm);
}

.zl-shipbar__row {
  display: flex;
  align-items: center;
  gap: var(--zl-xs);
  min-width: 0;
}

.zl-shipbar__icon { display: inline-flex; flex-shrink: 0; color: var(--zl-accent); }
.zl-shipbar__icon .zl-i { width: 18px; height: 18px; }

.zl-shipbar__text {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--zl-ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.zl-shipbar--drawer .zl-shipbar__text { font-size: 13px; line-height: 18px; }

/* --- Track --------------------------------------------------------------- */

.zl-shipbar__track {
  position: relative;
  height: 6px;
  width: 100%;
  background: var(--zl-divider);
  border-radius: var(--zl-r-sm);
  overflow: hidden;
}

.zl-shipbar__fill {
  display: block;
  height: 100%;
  background: var(--zl-accent);
  border-radius: inherit;
  transition: width 0.4s ease-out;
}

/* RTL: the bar fills from the right, the direction the page reads. */
[dir="rtl"] .zl-shipbar__track { direction: rtl; }
.zl-shipbar__fill { margin-inline-start: 0; }

@media (prefers-reduced-motion: reduce) {
  .zl-shipbar__fill { transition: none; }
}

/* --- Scale --------------------------------------------------------------- */

.zl-shipbar__scale {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zl-xs);
  font-size: 12px;
  color: var(--zl-ink-subtle);
  font-variant-numeric: tabular-nums;
}
.zl-shipbar__scale .amount { font-weight: 500; }

/* --- Qualified ----------------------------------------------------------- */

.zl-shipbar.is-qualified {
  background: color-mix(in srgb, var(--zl-success) 8%, #FFFFFF);
  border-color: color-mix(in srgb, var(--zl-success) 35%, var(--zl-divider));
}
.zl-shipbar.is-qualified .zl-shipbar__icon { color: var(--zl-success); }
.zl-shipbar.is-qualified .zl-shipbar__fill { background: var(--zl-success); }
.zl-shipbar.is-qualified .zl-shipbar__text { color: var(--zl-success); }

/* Fallback for browsers without color-mix. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .zl-shipbar.is-qualified { background: #F1F5F2; border-color: #C3D4C8; }
}

/* ==========================================================================
   Accessibility panel, rebuilt as a full-height drawer of icon tiles.
   These rules replace the earlier popover styling defined above.
   ========================================================================== */

.zl-a11y {
  position: fixed;
  inset: 0;
  z-index: 130;
  width: auto;
  max-height: none;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  visibility: hidden;
  pointer-events: none;
}
.zl-a11y[data-open="true"] { visibility: visible; pointer-events: auto; }

.zl-a11y__veil {
  position: absolute;
  inset: 0;
  background: rgba(29, 29, 27, 0.6);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.zl-a11y[data-open="true"] .zl-a11y__veil { opacity: 1; }

/* Opens from the same side the trigger sits on. */
.zl-a11y__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(94vw, 380px);
  display: flex;
  flex-direction: column;
  background: var(--zl-bg);
  border-inline-end: 1px solid var(--zl-divider);
  box-shadow: 0 12px 32px -4px rgba(29, 29, 27, 0.18);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
[dir="rtl"] .zl-a11y__panel { transform: translateX(100%); }
.zl-a11y[data-open="true"] .zl-a11y__panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .zl-a11y__panel, .zl-a11y__veil { transition: none; }
}

/* --- Header -------------------------------------------------------------- */

.zl-a11y__head {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: var(--zl-xs);
  padding: var(--zl-md);
  border-bottom: 1px solid var(--zl-divider);
  position: sticky;
  top: 0;
  background: var(--zl-bg);
  z-index: 1;
}
.zl-a11y__title {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin: 0;
}
.zl-a11y__close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--zl-r-md);
  color: var(--zl-ink-muted);
  background: transparent;
}
.zl-a11y__close:hover { background: var(--zl-surface); color: var(--zl-ink); }
.zl-a11y__mark { display: inline-flex; justify-content: flex-end; color: var(--zl-accent); }

/* --- Body ---------------------------------------------------------------- */

.zl-a11y__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--zl-md);
  display: flex;
  flex-direction: column;
  gap: var(--zl-lg);
}

.zl-a11y__group { display: flex; flex-direction: column; gap: var(--zl-sm); }

.zl-a11y__legend {
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: var(--zl-ink);
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
  padding-bottom: var(--zl-xs);
  border-bottom: 1px solid var(--zl-divider);
}

.zl-a11y__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--zl-xs);
}

/* --- Tiles --------------------------------------------------------------- */

.zl-a11y__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--zl-xs);
  min-height: 88px;
  padding: var(--zl-sm);
  text-align: center;
  background: var(--zl-bg);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  color: var(--zl-ink);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.zl-a11y__tile:hover { border-color: var(--zl-ink-subtle); background: var(--zl-surface); }

.zl-a11y__tileIcon { display: inline-flex; color: var(--zl-carbon); }
.zl-a11y__tileIcon .zl-i { width: 26px; height: 26px; }

.zl-a11y__tileLabel {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.zl-a11y__tile[aria-pressed="true"] {
  background: var(--zl-carbon);
  border-color: var(--zl-carbon);
  color: #FFFFFF;
}
.zl-a11y__tile[aria-pressed="true"] .zl-a11y__tileIcon { color: var(--zl-accent); }

.zl-a11y__tile--reset .zl-a11y__tileIcon { color: var(--zl-sale); }

/* Current text size readout, sitting beside Reset. */
.zl-a11y__size {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 88px;
  border: 1px dashed var(--zl-divider);
  border-radius: var(--zl-r-md);
  background: var(--zl-surface);
}
.zl-a11y__sizeLabel { font-size: 11px; color: var(--zl-ink-muted); }
.zl-a11y__sizeValue { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }

.zl-a11y__statement {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--zl-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  border: 0;
  padding: var(--zl-sm) 0 var(--zl-md);
}
.zl-a11y__statement:hover { color: var(--zl-accent); }

/* --- Two new display modes ----------------------------------------------- */

html.zl-a11y--contrast-grayscale { filter: grayscale(1); }
html.zl-a11y--contrast-grayscale .zl-a11y__panel { filter: none; }

html.zl-a11y--headings :where(h1, h2, h3, h4, h5, h6) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  background: color-mix(in srgb, var(--zl-accent) 14%, transparent);
  padding-inline: 2px;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  html.zl-a11y--headings :where(h1, h2, h3, h4, h5, h6) { background: #F3EBE1; }
}

/* The panel itself must stay readable in every mode it switches on. */
html.zl-a11y--contrast-invert .zl-a11y__panel { filter: invert(1) hue-rotate(180deg); }

/* ==========================================================================
   Content pages: about, contact, and the legal documents.
   ========================================================================== */

/* --- Shared page head ----------------------------------------------------- */

.zl-phead { display: grid; gap: var(--zl-xl); }
.zl-phead__title { margin-block: var(--zl-sm); max-width: 22ch; }
.zl-phead__text { max-width: 60ch; }
.zl-phead__media { border-radius: var(--zl-r-lg); overflow: hidden; }
.zl-phead__media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* --- Legal documents ------------------------------------------------------ */

.zl-legal { display: grid; gap: var(--zl-xl); align-items: start; }
@media (min-width: 1024px) {
  .zl-legal { grid-template-columns: 260px minmax(0, 1fr); gap: var(--zl-3xl); }
}

.zl-legal__meta {
  display: flex;
  align-items: center;
  gap: var(--zl-2xs);
  margin-top: var(--zl-sm);
  font-size: 13px;
  color: var(--zl-ink-subtle);
}
.zl-legal__meta .zl-i { width: 15px; height: 15px; }

/* Contents list. Sticky only where there is room for it to sit beside. */
.zl-toc {
  padding: var(--zl-md);
  background: var(--zl-surface);
  border-radius: var(--zl-r-md);
}
@media (min-width: 1024px) {
  .zl-toc {
    position: sticky;
    top: calc(var(--zl-header-h) + var(--zl-md));
    max-height: calc(100vh - var(--zl-header-h) - var(--zl-xl));
    overflow-y: auto;
    background: none;
    padding: 0;
    border-inline-start: 1px solid var(--zl-divider);
    padding-inline-start: var(--zl-md);
  }
}

.zl-toc__title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zl-ink-subtle);
  margin-bottom: var(--zl-sm);
}
.zl-toc ol { counter-reset: zl-toc; display: grid; gap: var(--zl-xs); }
.zl-toc li { counter-increment: zl-toc; }
.zl-toc a {
  display: flex;
  gap: var(--zl-xs);
  font-size: 14px;
  line-height: 20px;
  color: var(--zl-ink-muted);
}
.zl-toc a::before {
  content: counter(zl-toc) ".";
  color: var(--zl-ink-subtle);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.zl-toc a:hover { color: var(--zl-accent); }

/* A heading jumped to from the contents must clear the header. */
.zl-prose h2 { scroll-margin-top: calc(var(--zl-header-h) + var(--zl-md)); }

.zl-legal__foot {
  margin-top: var(--zl-2xl);
  padding: var(--zl-lg);
  background: var(--zl-surface);
  border-radius: var(--zl-r-md);
}
.zl-legal__foot > * + * { margin-top: var(--zl-sm); }
.zl-legal__actions { display: flex; flex-wrap: wrap; gap: var(--zl-xs); }
.zl-legal__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zl-md);
  padding-top: var(--zl-md);
  border-top: 1px solid var(--zl-divider);
  font-size: 13px;
}

/* --- Live numbers strip --------------------------------------------------- */

.zl-facts { display: grid; gap: var(--zl-lg); grid-template-columns: 1fr; }
@media (min-width: 640px) { .zl-facts { grid-template-columns: repeat(3, 1fr); } }

.zl-fact { display: flex; flex-direction: column; gap: var(--zl-2xs); }
.zl-fact__num {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--zl-accent);
  font-variant-numeric: tabular-nums;
}
.zl-fact__text { font-size: 14px; line-height: 20px; color: var(--zl-ink-muted); max-width: 26ch; }

/* --- Values grid ---------------------------------------------------------- */

.zl-values { display: grid; gap: var(--zl-lg); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .zl-values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .zl-values { grid-template-columns: repeat(4, 1fr); } }

.zl-value {
  display: flex;
  flex-direction: column;
  gap: var(--zl-xs);
  padding-top: var(--zl-md);
  border-top: 2px solid var(--zl-carbon);
  min-width: 0;
}
.zl-value__icon { display: inline-flex; color: var(--zl-accent); }
.zl-value__icon .zl-i { width: 22px; height: 22px; }
.zl-value__title { font-size: 17px; line-height: 24px; font-weight: 500; }
.zl-value__text { font-size: 14px; line-height: 22px; color: var(--zl-ink-muted); }

/* --- Contact page layout -------------------------------------------------- */

.zl-contact { display: grid; gap: var(--zl-2xl); align-items: start; }
@media (min-width: 1024px) {
  .zl-contact { grid-template-columns: 340px minmax(0, 1fr); gap: var(--zl-3xl); }
}

.zl-cmethods { display: grid; gap: var(--zl-xs); }

.zl-cmethod {
  display: flex;
  gap: var(--zl-sm);
  padding: var(--zl-md);
  background: var(--zl-bg);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  transition: border-color 0.2s ease, background-color 0.2s ease;
  min-width: 0;
}
a.zl-cmethod:hover { border-color: var(--zl-accent); background: var(--zl-surface); }
.zl-cmethod--static { background: var(--zl-surface); }

.zl-cmethod__icon { display: inline-flex; flex-shrink: 0; color: var(--zl-accent); padding-top: 2px; }
.zl-cmethod__icon .zl-i { width: 20px; height: 20px; }

.zl-cmethod__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zl-cmethod__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zl-ink-subtle);
}
.zl-cmethod__value { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.zl-cmethod__note { font-size: 12px; line-height: 18px; color: var(--zl-ink-muted); }

.zl-cbox {
  margin-top: var(--zl-lg);
  padding: var(--zl-md);
  border-inline-start: 2px solid var(--zl-accent);
  background: var(--zl-surface);
}
.zl-cbox__links { display: grid; gap: var(--zl-xs); margin-top: var(--zl-sm); font-size: 14px; }

/* --- Form ----------------------------------------------------------------- */

.zl-form { scroll-margin-top: calc(var(--zl-header-h) + var(--zl-md)); }
.zl-form form { margin-top: var(--zl-lg); }

.zl-form__grid { display: grid; gap: var(--zl-md); grid-template-columns: 1fr; }
@media (min-width: 640px) { .zl-form__grid { grid-template-columns: repeat(2, 1fr); } }

.zl-field { display: flex; flex-direction: column; gap: var(--zl-2xs); min-width: 0; }
.zl-field--full { grid-column: 1 / -1; }

.zl-field label { font-size: 13px; font-weight: 500; color: var(--zl-ink-muted); }
.zl-field__hint { font-weight: 400; color: var(--zl-ink-subtle); }
.zl-req { color: var(--zl-sale); }

.zl-field input,
.zl-field select,
.zl-field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--zl-sm) var(--zl-md);
  background: var(--zl-bg);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-md);
  color: var(--zl-ink);
}
.zl-field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.zl-field input:focus,
.zl-field select:focus,
.zl-field textarea:focus { border-color: var(--zl-carbon); outline: none; }
.zl-field input::placeholder,
.zl-field textarea::placeholder { color: var(--zl-ink-subtle); }
.zl-field [aria-invalid="true"] { border-color: var(--zl-sale); }

.zl-field__err { font-size: 12px; color: var(--zl-sale); }

.zl-check {
  display: flex;
  gap: var(--zl-xs);
  align-items: flex-start;
  margin-top: var(--zl-md);
  font-size: 14px;
  line-height: 20px;
  color: var(--zl-ink-muted);
}
.zl-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--zl-accent);
  flex-shrink: 0;
}
.zl-check a { color: var(--zl-accent); border-bottom: 1px solid currentColor; }

.zl-form button[type="submit"] { margin-top: var(--zl-lg); }

/* The honeypot must be unreachable, not merely invisible: a field hidden with
   display:none is skipped by some autofill, which would defeat the trap. */
.zl-hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Notices -------------------------------------------------------------- */

.zl-note {
  display: flex;
  gap: var(--zl-sm);
  align-items: flex-start;
  padding: var(--zl-md);
  margin-bottom: var(--zl-lg);
  border-radius: var(--zl-r-md);
  font-size: 14px;
  line-height: 21px;
}
.zl-note .zl-i { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.zl-note strong { display: block; }

.zl-note--ok {
  background: color-mix(in srgb, var(--zl-success) 8%, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--zl-success) 35%, var(--zl-divider));
  color: var(--zl-success);
}
.zl-note--err {
  background: color-mix(in srgb, var(--zl-sale) 7%, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--zl-sale) 32%, var(--zl-divider));
  color: var(--zl-sale);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .zl-note--ok  { background: #F1F5F2; border: 1px solid #C3D4C8; }
  .zl-note--err { background: #FBF2F1; border: 1px solid #E4C4C1; }
}

/* --- FAQ ------------------------------------------------------------------ */

.zl-faq { max-width: 72ch; }

/* ==========================================================================
   Cookie consent
   ========================================================================== */

/* Sits above the WhatsApp bubble (z 120) and the accessibility button, but
   below the accessibility drawer (z 130), which must stay reachable. */
.zl-cc {
  position: fixed;
  z-index: 125;
  inset-inline: 0;
  bottom: 0;
  padding: var(--zl-md);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.zl-cc[data-open="true"] { pointer-events: auto; }

.zl-cc__panel {
  width: min(100%, 62rem);
  max-height: calc(100vh - 2 * var(--zl-md));
  overflow-y: auto;
  padding: var(--zl-lg);
  background: var(--zl-bg);
  border: 1px solid var(--zl-divider);
  border-radius: var(--zl-r-lg);
  box-shadow: 0 12px 40px -8px rgba(29, 29, 27, 0.22);
}

.zl-cc__title { font-size: 18px; line-height: 26px; font-weight: 500; }
.zl-cc__text {
  margin-top: var(--zl-xs);
  font-size: 14px;
  line-height: 21px;
  color: var(--zl-ink-muted);
  max-width: 78ch;
}
.zl-cc__text a { color: var(--zl-accent); border-bottom: 1px solid currentColor; }

/* --- Per-category toggles -------------------------------------------------- */

.zl-cc__options {
  display: grid;
  gap: var(--zl-xs);
  margin-top: var(--zl-md);
  padding-top: var(--zl-md);
  border-top: 1px solid var(--zl-divider);
}
@media (min-width: 900px) { .zl-cc__options { grid-template-columns: repeat(3, 1fr); } }

.zl-cc__opt {
  display: flex;
  gap: var(--zl-xs);
  align-items: flex-start;
  padding: var(--zl-sm);
  background: var(--zl-surface);
  border-radius: var(--zl-r-md);
  cursor: pointer;
}
.zl-cc__opt--locked { cursor: default; opacity: 0.85; }

.zl-cc__opt input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--zl-accent);
  flex-shrink: 0;
}

.zl-cc__optTitle { display: block; font-size: 14px; font-weight: 500; }
.zl-cc__optTitle em {
  font-style: normal;
  font-size: 11px;
  color: var(--zl-ink-subtle);
  margin-inline-start: var(--zl-2xs);
}
.zl-cc__optText { display: block; margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--zl-ink-muted); }

.zl-cc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zl-xs);
  margin-top: var(--zl-md);
}
/* Reject must be no harder to reach than accept, so both are full buttons and
   neither is demoted to a text link. */
@media (max-width: 560px) {
  .zl-cc__actions .zl-btn { flex: 1 1 100%; justify-content: center; }
}

/* --- Reopen control in the footer ------------------------------------------ */

.zl-cc__reopen {
  font: inherit;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.zl-cc__reopen:hover { color: var(--zl-accent); }

/* --- Footer logo ---------------------------------------------------------- */

/* Same specificity story as the header mark: WooCommerce's `.woocommerce-page
   img` would otherwise force height:auto and render this at its natural 160px
   on every shop page. */
.zl-footer img.zl-footer__logo {
  height: 64px;
  width: auto;
  margin-bottom: var(--zl-md);
}
@media (max-width: 640px) {
  .zl-footer img.zl-footer__logo { height: 52px; }
}

/* The accessibility panel's display modes must not wreck the brand. Grayscale
   and invert are applied to the whole document, which would turn the gold to
   grey or to blue; the logo is exempted so it stays recognisable. */
html.zl-a11y--contrast-grayscale .zl-brand__mark,
html.zl-a11y--contrast-grayscale .zl-footer__logo { filter: none; }
html.zl-a11y--contrast-invert .zl-brand__mark,
html.zl-a11y--contrast-invert .zl-footer__logo { filter: invert(1) hue-rotate(180deg); }