/*
 Theme Name:   Zohar NY
 Theme URI:    https://zohar-ny.com
 Description:  Zohar NY — Hebrew RTL boutique theme for zohar-ny.com. Standalone (no parent theme); brand styling, layout, typography, and palette are 100% custom (see DESIGN.md).
 Author:       Zohar NY
 Author URI:   https://zohar-ny.com
 Version:      4.3.1
 Text Domain:  zohar-ny
 License:      Proprietary — Zohar NY internal use only
*/

/* ═══════════════════════════════════════════════════════════
   ZOHAR-NY DESIGN SYSTEM — from DESIGN.md
   Single source of truth for all colors, type, spacing.
   Never hardcode hex values in templates — use these vars.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --color-gold:          #7d5a0e;   /* Primary — CTAs, prices, accents */
  --color-gold-light:    #e3c078;   /* Primary Container — hover fills / on dark scrims */
  --color-cream:         #fdfbf6;   /* Surface — main background canvas */
  --color-cream-low:     #f4ecdd;   /* Surface Container — alt section bg */
  --color-text:          #221c14;   /* Dark Espresso — headings, body (16.3:1) */
  --color-text-muted:    #9e9591;   /* Warm Taupe — DECORATIVE ONLY (≈2.8:1 on cream, fails AA). Never use as readable text. */
  /* AA-safe muted text: blend of on-surface + cream (re-validated 2026-07-12).
     text-soft = 72% of --color-text on --color-cream; still passes WCAG AA (≥4.5:1)
     comfortably on both --color-cream and --color-cream-low. */
  --color-text-soft:     color-mix(in srgb, var(--color-text) 72%, var(--color-cream));
  --color-border:        rgba(117, 90, 40, 0.15); /* Ghost border */
  --color-error:         #ba1a1a;   /* Refined error — never bright red */
  --color-text-on-gold:  #fdfbf6;   /* on_primary — text/icons on gold surfaces */
  --color-gold-hover:    #5f430a;   /* primary pressed/hover — deeper gold (8.85:1) */

  /* ── Typography ─────────────────────────────────────────── */
  --font-heading: 'Assistant', 'Heebo', 'Noto Sans Hebrew', sans-serif;
  --font-body:    'Assistant', 'Heebo', 'Noto Sans Hebrew', sans-serif;
  --font-size-base: 1rem;
  --line-height:    1.7;   /* Hebrew body needs more vertical breathing room */

  /* ── Spacing ────────────────────────────────────────────── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* ── Shape ──────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* ── Shadow (ambient only — no hard shadows) ────────────── */
  --shadow-ambient: 0 8px 24px rgba(42, 37, 32, 0.06);
  --shadow-card:    0 4px 16px rgba(42, 37, 32, 0.08);

  /* ── Button depth — shared "lifted gold lozenge" treatment ──
     A gold-leaf sheen (light from above over solid gold) plus felt-depth
     shadows: contact + ambient layers, a raised inset top highlight, an inner
     bottom shade. Every gold action button references these so they stay
     identical (add-to-cart, proceed-to-checkout, place-order, hero/feature CTA). */
  --btn-sheen: linear-gradient(to bottom,
      rgba(252, 249, 244, 0.14) 0%,
      rgba(252, 249, 244, 0) 42%,
      rgba(42, 37, 32, 0.20) 100%);
  --btn-depth:
      0 1px 2px rgba(42, 37, 32, 0.12),
      0 8px 20px rgba(42, 37, 32, 0.18),
      inset 0 1px 0 rgba(252, 249, 244, 0.30),
      inset 0 -2px 5px rgba(42, 37, 32, 0.20);
  --btn-depth-hover:
      0 3px 6px rgba(42, 37, 32, 0.14),
      0 16px 34px rgba(42, 37, 32, 0.24),
      inset 0 1px 0 rgba(252, 249, 244, 0.32),
      inset 0 -2px 5px rgba(42, 37, 32, 0.22);
  --btn-depth-active:
      0 1px 2px rgba(42, 37, 32, 0.16),
      inset 0 2px 6px rgba(42, 37, 32, 0.28),
      inset 0 1px 0 rgba(252, 249, 244, 0.08);

  /* ── Motion ─────────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* Site-wide RTL + brand surface */
body.rtl,
body.zohar-body {
  background-color: var(--color-cream);
  font-family: var(--font-body);
  color: var(--color-text);
  direction: rtl;
  margin: 0;
  /* Full-bleed bands are sized with 100vw, which includes the scrollbar width,
     so any page with a vertical scrollbar overflowed ~15px horizontally. clip
     (not hidden) removes the sliver without creating a scroll container, so
     position:sticky descendants keep working. */
  overflow-x: clip;
}

/* ═══════════════════════════════════════════════════════════
   HEADLINE ACCENT — the brand's one headline flourish
   ═══════════════════════════════════════════════════════════
   One emotionally-loaded word (or short phrase) per major headline is set in
   brand gold: <em class="zohar-accent">יפה</em>. Gold-as-brand-expression per
   DESIGN.md — a single accent per heading, never more; #7d5a0e passes AA
   against both cream surfaces at heading sizes. */
.zohar-accent {
  font-style: normal;  /* <em> gives semantics; gold carries the emphasis */
  color: var(--color-gold);
}

/* ═══════════════════════════════════════════════════════════
   HERO GOLD SHINE — reusable "precious" display treatment
   ═══════════════════════════════════════════════════════════
   Big, bold, golden headline with a slow light-sweep across the
   letterforms — the "silk/gold-leaf catching light" moment (DESIGN.md
   §Signature Textures). Applied to the two hero-gold titles: the
   homepage collections heading and the About signature line.

   Coverage (the load-bearing fix): the SOLID-gold glyph fill comes from
   `background-color`, which always fills the entire text box regardless of
   `background-position` — so every glyph is painted full gold at every
   animation frame and in the static/reduced-motion state. The moving
   `background-image` carries ONLY a narrow --color-gold-light highlight band
   (transparent everywhere else), riding ON TOP of the solid gold; when its
   250%-wide box is parked off the text, the fill is simply uniform gold.
   (Painting the fill FROM a moving oversized gradient left glyphs outside the
   gradient box unpainted → invisible; hence the color-layer base.)
   Contrast: base is #7d5a0e (~6:1 on cream, AA); the transient highlight
   only lightens a thin slice, so contrast holds at every frame.
   Fallback: `color` is set to solid gold FIRST, so any engine without
   background-clip: text (or with forced colors) shows a static gold headline —
   never invisible. Reduced-motion parks the highlight off-text (pure gold). */
.zohar-gold-shine {
  color: var(--color-gold);
  font-weight: 700;
  background-color: var(--color-gold);
  background-image: linear-gradient(
    100deg,
    rgba(227, 192, 120, 0) 42%,
    var(--color-gold-light) 50%,
    rgba(227, 192, 120, 0) 58%
  );
  background-size: 250% 100%;
  background-position: 150% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: zohar-gold-sweep 5.5s ease-in-out 1.2s infinite;
}

/* Only the highlight band travels; the gold color layer underneath never moves,
   so glyphs stay fully painted. (::after hairlines are unaffected by text fill.) */
@keyframes zohar-gold-sweep {
  0%   { background-position: 150% 0; }
  55%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .zohar-gold-shine {
    animation: none;
    /* Park the highlight fully off the text box → uniform solid gold. */
    background-position: 200% 0;
  }
}

/* Forced-colors / high-contrast: drop the clip trick entirely. */
@media (forced-colors: active) {
  .zohar-gold-shine {
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}

/* ─────────────────────────────────────────────────────────
   SITE-WIDE PROMO / CONTACT STRIP (above the header on every page)
   Thin top band — cream-low bg, espresso text, no divider.
   Background-shift only (DESIGN.md no-line rule). One deliberate
   centered line: promo message · phone, both in small Manrope.
   The phone reads as an integrated affordance (icon + LTR number
   in precious gold), never a raw underlined browser link.
   ───────────────────────────────────────────────────────── */
.zohar-promo {
  background-color: var(--color-cream-low);
  direction: rtl;
}

.zohar-promo__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 13px var(--space-md);
}

.zohar-promo__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--space-md);
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.5;
  color: var(--color-text-soft);
  text-align: center;
}

.zohar-promo__message {
  color: var(--color-text-soft);
}

/* A small tonal dot separates message from phone — quieter than a pipe,
   honours the no-line rule (it's a dot, not a divider rule). */
.zohar-promo__sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--color-gold-light);
  flex: 0 0 auto;
  opacity: 0.7;
}

/* Phone is a primary contact affordance (Karin: make it bigger/more prominent).
   Bumped above the strip's base size and weighted up, gold so it reads as precious. */
.zohar-promo__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gold);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.zohar-promo__phone:hover,
.zohar-promo__phone:focus-visible {
  color: var(--color-gold-hover);
  text-decoration: none;
}

.zohar-promo__phone-icon {
  flex: 0 0 auto;
  opacity: 0.85;
}

.zohar-promo__phone-num {
  font-variant-numeric: tabular-nums;
}

.zohar-promo__phone:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Social links — a quiet gold icon row after the phone. Only the networks
   filled into Appearance → Customize → "Zohar Brand" render. */
.zohar-promo__social {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.zohar-promo__social-link {
  display: inline-flex;
  color: var(--color-gold);
  opacity: 0.85;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.zohar-promo__social-link svg {
  display: block;
  width: 28px;
  height: 28px;
}

.zohar-promo__social-link:hover,
.zohar-promo__social-link:focus-visible {
  color: var(--color-gold-hover);
  opacity: 1;
  text-decoration: none;
}

.zohar-promo__social-link:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (max-width: 549px) {
  .zohar-promo__text {
    font-size: 0.95rem;
    letter-spacing: normal;
    gap: 0 var(--space-sm);
  }
  .zohar-promo__phone {
    font-size: 1.15rem;
  }
  .zohar-promo__social {
    gap: 12px;
  }
  .zohar-promo__social-link svg {
    width: 25px;
    height: 25px;
  }
}

/* ═══════════════════════════════════════════════════════════
   SITE HEADER (zohar-header)
   ═══════════════════════════════════════════════════════════ */
.zohar-header {
  background-color: var(--color-cream);
  border-bottom: none;
  position: relative;
  z-index: 50;
}

.zohar-header__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.5rem var(--space-md);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  direction: rtl;
}

.zohar-header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  grid-row: 1;
}

.zohar-header__logo img {
  display: block;
  height: 96px;
  width: auto;
  max-width: 100%;
}

.zohar-header__icons {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  /* RTL: col 3 = visual LEFT edge */
}

.zohar-header__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.zohar-header__icon:hover,
.zohar-header__icon:focus-visible {
  color: var(--color-gold);
  background-color: var(--color-cream-low);
  text-decoration: none;
}

.zohar-header__cart-count {
  position: absolute;
  top: 4px;
  inset-inline-start: 4px;
  background-color: var(--color-gold);
  color: var(--color-cream);
  font-size: 0.7rem;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

/* Empty cart: the badge node stays in the DOM (wc-cart-fragments swaps it in
   place after an AJAX add-to-cart / on cached pages) but renders nothing. */
.zohar-header__cart-count--empty {
  display: none;
}

.zohar-header__nav {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  /* RTL: col 1 = visual RIGHT edge */
}

.zohar-header__nav-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 500;
}

.zohar-header__nav-list a {
  position: relative;
  color: var(--color-text);
  text-decoration: none;
  padding: 8px 2px 10px;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

/* Gold hairline underline that draws in from the right (RTL reading direction)
   on hover, and stays put on the active page. */
.zohar-header__nav-list a::after {
  content: "";
  position: absolute;
  inset-inline: 2px;
  bottom: 2px;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.zohar-header__nav-list a:hover,
.zohar-header__nav-list a:focus-visible {
  color: var(--color-gold);
  text-decoration: none;
}

.zohar-header__nav-list a:hover::after,
.zohar-header__nav-list a:focus-visible::after,
.zohar-header__nav-list a.is-active::after {
  transform: scaleX(1);
}

.zohar-header__nav-list a.is-active {
  color: var(--color-gold);
  font-weight: 600;
}

.zohar-header__nav-sale {
  color: var(--color-gold) !important;
  font-weight: 600;
}

/* Mobile-drawer chrome — invisible on desktop, activated in the ≤849px block. */
.zohar-header__menu-toggle,
.zohar-header__nav-close,
.zohar-header__nav-extra,
.zohar-header__scrim {
  display: none;
}

@media (max-width: 849px) {
  /* One calm row: hamburger (visual right, where the RTL eye starts) ·
     centered logo · cart (visual left). The old horizontally-scrolling nav
     strip overflowed the screen; the menu now lives in a slide-in drawer. */
  .zohar-header__inner {
    grid-template-columns: 44px 1fr 44px;
    grid-template-areas: "toggle logo icons";
    row-gap: 0;
    padding: var(--space-sm) var(--space-md);
  }
  .zohar-header__logo  { grid-area: logo;  justify-self: center; }
  .zohar-header__icons { grid-area: icons; justify-self: end; }
  /* 44px tap targets on touch screens. */
  .zohar-header__icon { width: 44px; height: 44px; }

  /* ── Hamburger ── */
  .zohar-header__menu-toggle {
    grid-area: toggle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--color-text);
    cursor: pointer;
  }
  .zohar-header__menu-bars,
  .zohar-header__menu-bars::before,
  .zohar-header__menu-bars::after {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: var(--radius-pill);
    background-color: currentColor;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  }
  .zohar-header__menu-bars { position: relative; }
  .zohar-header__menu-bars::before,
  .zohar-header__menu-bars::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
  }
  .zohar-header__menu-bars::before { top: -7px; }
  .zohar-header__menu-bars::after  { top: 7px; }
  /* Open state: bars fold into an X. */
  .zohar-header__menu-toggle[aria-expanded="true"] .zohar-header__menu-bars { background-color: transparent; }
  .zohar-header__menu-toggle[aria-expanded="true"] .zohar-header__menu-bars::before { transform: translateY(7px) rotate(45deg); }
  .zohar-header__menu-toggle[aria-expanded="true"] .zohar-header__menu-bars::after  { transform: translateY(-7px) rotate(-45deg); }

  /* ── Drawer ── */
  .zohar-header__nav {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;            /* RTL: anchored to the visual RIGHT edge */
    width: min(320px, 85vw);
    z-index: 200;
    background-color: var(--color-cream);
    box-shadow: -8px 0 24px rgba(42, 37, 32, 0.06); /* diffused ambient, per DESIGN.md */
    transform: translateX(100%);       /* off-screen to the right */
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.4s;
  }
  .zohar-header__nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0s;
  }

  .zohar-header__nav-scroll {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding: var(--space-md) var(--space-lg) var(--space-lg);
  }

  .zohar-header__nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;            /* RTL: visual right, mirrors the hamburger */
    width: 44px;
    height: 44px;
    margin-inline-start: calc(-1 * var(--space-sm));
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--color-text);
    cursor: pointer;
  }

  .zohar-header__nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: var(--space-sm);
    font-size: 1.25rem;
  }
  .zohar-header__nav-list li + li {
    margin-top: 2px;
  }
  .zohar-header__nav-list a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px var(--space-sm);
    border-radius: var(--radius-md, 8px);
  }
  /* In the drawer the active page reads as a cream-low "sheet", not an
     underline (No-Line Rule: separation by tone). */
  .zohar-header__nav-list a::after { display: none; }
  .zohar-header__nav-list a.is-active {
    background-color: var(--color-cream-low);
  }

  /* Drawer footer: the phone line, pinned under the links. */
  .zohar-header__nav-extra {
    display: block;
    margin-top: auto;
    padding-top: var(--space-lg);
  }
  .zohar-header__nav-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-gold);
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
  }

  /* ── Backdrop ── */
  .zohar-header__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150;
    background-color: rgba(42, 37, 32, 0.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .zohar-header__nav.is-open ~ .zohar-header__scrim {
    opacity: 1;
    pointer-events: auto;
  }

}

/* Scroll lock while the mobile drawer is open (class set by main.js). */
body.zny-nav-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .zohar-header__nav,
  .zohar-header__scrim,
  .zohar-header__menu-bars,
  .zohar-header__menu-bars::before,
  .zohar-header__menu-bars::after,
  .zohar-header__nav-list a::after {
    transition: none !important;
  }
}

@media (max-width: 420px) {
  /* On small phones, ease the logo down so it balances the icon cluster
     and the row never feels top-heavy. */
  .zohar-header__logo img { height: 72px; }
}

/* ═══════════════════════════════════════════════════════════
   SITE FOOTER (zohar-footer)
   ═══════════════════════════════════════════════════════════ */
.zohar-footer {
  background-color: var(--color-text);
  color: var(--color-cream);
  margin-top: var(--space-2xl);
  direction: rtl;
}

.zohar-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-xl);
  text-align: start;
}

@media (max-width: 767px) {
  .zohar-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-xl) var(--space-md);
  }
}

.zohar-footer__logo img {
  height: 54px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-md);
}

.zohar-footer__tagline {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(252, 249, 244, 0.78);
  margin: 0 0 var(--space-md);
  max-width: 320px;
}

.zohar-footer__contact a {
  color: var(--color-cream);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.zohar-footer__contact a:hover {
  color: var(--color-gold-light);
}

.zohar-footer__heading {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-cream);
  margin: 0 0 var(--space-md);
}

.zohar-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.zohar-footer__links li {
  margin-bottom: var(--space-sm);
}

.zohar-footer__links a {
  color: rgba(252, 249, 244, 0.78);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.zohar-footer__links a:hover,
.zohar-footer__links a:focus-visible {
  color: var(--color-gold-light);
  text-decoration: none;
}

.zohar-footer__bar {
  background-color: rgba(0, 0, 0, 0.3);
  padding: var(--space-md);
}

.zohar-footer__bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.zohar-footer__copy {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(252, 249, 244, 0.55);
  margin: 0;
}

/* Now that we ship a real header/footer, drop the band-aid suppression
   for elements we no longer render. Kept commented to preserve the
   defensive intent if any plugin reintroduces them. */
/*
#top-bar, .header-top, .top-bar { display: none !important; }
.absolute-footer { display: none !important; }
*/

/* Hide skip-link visually until focused */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--color-gold);
  color: var(--color-cream);
  padding: 8px 16px;
  z-index: 9999;
}
.skip-link:focus {
  inset-inline-start: 8px;
  top: 8px;
}

/* ── Scroll-reveal (non-homepage surfaces) ──────────────────────────────────
   Applied by main.js initReveals() ONLY when motion is allowed. The hidden
   state lives on the JS-added .js-reveal class, so no-JS / reduced-motion users
   never get stuck-hidden content (the element simply stays visible). */
.js-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.js-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Belt-and-suspenders: even if .js-reveal got added, never hide content. */
  .js-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Generic content column (.zohar-content)
   Shared by the non-designed templates: page.php (default pages,
   incl. the WooCommerce checkout — whose /checkout/ URL resolves to
   a plain page that never receives is_checkout()'s body class),
   404, blog index/single, search. Without this the title + content
   run flush to the viewport edges. Centered editorial measure to
   match the designed templates (1100px). The designed pages
   (home/about/legal/sale/size-guide) use their own *__wrap and are
   unaffected. More specific page rules (e.g. .zohar-404) override.
   ═══════════════════════════════════════════════════════════ */
.zohar-content {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* ═══════════════════════════════════════════════════════════
   404 — not found. The 404 page loads only style.css + base.css
   (no per-template sheet), so its layout + the .zohar-btn CTAs
   are styled here. Centered editorial column; gold primary +
   ghost secondary recovery actions.
   ═══════════════════════════════════════════════════════════ */
.zohar-404 {
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(4rem, 12vw, 8rem) var(--space-md);
  text-align: center;
  direction: rtl;
}

.zohar-404__code {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(4rem, 14vw, 7rem);
  line-height: 1;
  color: var(--color-gold);
  margin: 0 0 var(--space-md);
}

.zohar-404__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

.zohar-404__lede {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-soft);
  max-width: 46ch;
  margin: 0 auto var(--space-lg);
  text-wrap: pretty;
}

.zohar-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin: 0;
}

/* ── Brand button utility (.zohar-btn) ──────────────────────── */
.zohar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75em 1.9em;
  background: var(--color-gold);
  color: var(--color-text-on-gold);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(117, 90, 40, 0.22);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.zohar-btn:hover,
.zohar-btn:focus-visible {
  background: var(--color-gold-hover);
  color: var(--color-text-on-gold);
  transform: translateY(-1px);
  box-shadow: 0 9px 24px rgba(117, 90, 40, 0.28);
}

.zohar-btn--ghost {
  background: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.zohar-btn--ghost:hover,
.zohar-btn--ghost:focus-visible {
  background: var(--color-cream-low);
  color: var(--color-gold-hover);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .zohar-btn:hover,
  .zohar-btn:focus-visible { transform: none; }
}

/* WC auto-focuses the "added to cart" / notice banner for a11y (see
   assets/css/cart-checkout.css §7), which otherwise paints the browser's
   default UA-orange outline. Give it an explicit on-brand gold ring instead. */
.woocommerce-message:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}