/* ============================================================
   MAIN.CSS - Global styles, loaded on EVERY page.
   Contains: tokens, reset, layout, typography, buttons, nav,
   mobile menu, contact form, footer, WhatsApp FAB, cookie banner,
   print header, and the global responsive rules (nav→hamburger).

   Page-specific component styles live in /styles/pages/{page}.css.
   Tokens below are the design system - change brand colors here.
   ============================================================ */

/* ========== TOKENS ========== */
/* Wong Shu - "GoodMeat" dark butcher: dramatic near-black canvas, deep-maroon
   raised cards, cleaver-red accents, gold hairline frames, cream/white type.
   Token NAMES kept (--navy/--gold are semantic slots used across components);
   only their VALUES changed, so nav/footer/forms inherit the dark theme.
     --bg / --navy = near-black canvas (primary surface)
     --bg-soft     = raised dark card
     --gold        = cleaver red (CTA / strong accent)
     --gold-soft   = warm gold (hairline frames, % bars, fine accents)
     --cream/white = type on dark                                               */
:root {
  --bg: #1E1A1B;            /* dark charcoal canvas (neutral, slightly warm) */
  --bg-soft: #262122;       /* raised card / lighter section */
  --bg-warm: #181516;       /* deeper section */
  --bg-dark: #161314;       /* deepest section */
  --bg-dark-2: #100E0F;     /* darkest (footer) */
  --navy: #1E1A1B;          /* primary dark = canvas */
  --navy-2: #2A0E0E;        /* maroon-black raised */
  --maroon: #3A1010;        /* deep maroon (red cards) */
  --gold: #950709;          /* accent = cleaver red (CTA) */
  --gold-2: #6f0506;        /* darker red (hover) */
  --gold-3: #950709;        /* red links/eyebrows/icons */
  --gold-soft: #eeddcb;     /* warm cream - hairline frames + % bars */
  --cream: #EBDCC8;         /* logo cream - secondary type */
  --cream-soft: #B5A892;    /* dim cream */
  --white: #eeddcb;         /* primary type - warm cream (was pure white) */
  --ink: #eeddcb;           /* warm cream (was pure white) */
  --text: #C9BFB2;          /* body type (warm grey-cream) */
  --text-dim: #978C7C;      /* muted */
  --text-muted: #6E655A;    /* faint labels */
  --line: rgba(235, 220, 200, 0.12);       /* hairline on dark */
  --line-dark: rgba(235, 220, 200, 0.12);
  --line-strong: rgba(235, 220, 200, 0.26);
  --line-gold: #eeddcb;  /* frame line - cream */
  --font: 'Heebo', 'Assistant', system-ui, sans-serif;
  --font-display: 'Rubik', 'Heebo', 'Assistant', system-ui, sans-serif;  /* headlines - rounded geo, butcher-bold */
  --font-mono: 'Courier New', ui-monospace, monospace;          /* labels */
  --maxw: 1280px;
  --radius: 4px;            /* GoodMeat = near-sharp */
}

/* ========== RESET ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  overflow-x: clip; max-width: 100%;
  /* iOS Safari מנפח אוטומטית גדלי טקסט בבלוקים רחבים (font boosting) -
     תופעה שלא משוחזרת באמולציית המובייל של כרום. נועלים ל-100%. */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
body {
  font-family: var(--font);
  background: var(--bg);
  background-image: radial-gradient(120% 80% at 50% 0%, #2A2526 0%, #1E1A1B 42%, #161314 100%);
  background-attachment: fixed;
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { text-decoration: none; color: inherit; }

/* subtle film grain over the dark canvas */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ========== LAYOUT ========== */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.section { padding: 100px 0; }
.section-soft { background: var(--bg-warm); }
.section-dark { background: var(--bg-dark); color: var(--cream); }
.section-dark .h2 { color: var(--white); }
.section-dark .h2 span { color: var(--gold); }
.section-dark .eyebrow { color: var(--cream-soft); }
.section-dark .eyebrow::before { background: var(--gold); }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 72px; }
.section-head .h2 { margin-bottom: 16px; }
.section-head .h2 span { color: var(--gold-3); }
.section-head p { font-size: 17px; color: var(--text-dim); line-height: 1.7; }
.section-dark .section-head p { color: var(--cream-soft); }

/* ========== TYPOGRAPHY ========== */
.h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--white);
}
.h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--white);
  direction: rtl;
  unicode-bidi: plaintext;
}
.h3 { font-size: 22px; font-weight: 700; color: var(--white); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 16px;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--gold);
}

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.25s;
  border-radius: 0;
  white-space: nowrap;
  font-family: var(--font);
}
.btn-primary { background: #eeddcb; color: #1a1a1a; border-color: #eeddcb; }
.btn-primary:hover {
  background: #d4c2ab; border-color: #d4c2ab;
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
}
.btn-gold { background: var(--gold); color: var(--white); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-2); border-color: var(--gold-2); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg-dark); }
.btn-ghost-light { background: transparent; color: #eeddcb; border-color: rgba(240,220,201,0.4); }
.btn-ghost-light:hover { background: var(--cream); color: #1a1a1a; border-color: var(--cream); }
.btn-lg { padding: 16px 32px; font-size: 16px; }

/* ========== NAV (GoodMeat 2-row; solid maroon → glass on scroll) ========== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #000000;            /* solid black at the top */
  border-bottom: 1px solid var(--line);
  transition: background 0.35s ease, box-shadow 0.35s ease;
  /* NO backdrop-filter (glass) here on purpose: the blur layer caused a
     flickering hairline at the header edge on repaints (Chromium, fixed
     header over the hero video). Near-opaque dark bg = same feel, no bug. */
}
.nav.scrolled {
  background: rgba(10,8,8,0.92);  /* near-opaque dark (replaces the glass blur) */
  box-shadow: 0 10px 36px rgba(0,0,0,0.5);
}

/* --- TOP BAR (phone · address · social) - a touch darker --- */
.nav-top {
  background: #000000;
  border-bottom: 1px solid #f2dccb;
  transition: max-height 0.35s ease, opacity 0.3s ease, border-color 0.35s ease;
  overflow: hidden; max-height: 60px;
}
.nav.scrolled .nav-top { max-height: 0; opacity: 0; border-color: transparent; }
.nav-top-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 9px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav-top-item { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #eeddcb; white-space: nowrap; }
.nav-top-item svg { color: #eeddcb; flex-shrink: 0; }
a.nav-top-item:hover { color: var(--white); }
.nav-top .nav-social { display: flex; align-items: center; gap: 8px; }
.nav-top .nav-social a {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: grid; place-items: center; color: #eeddcb;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.nav-top .nav-social a:hover { color: var(--white); background: var(--gold); border-color: var(--gold); }

/* --- MAIN BAR (logo · nav · CTA) --- */
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  transition: padding 0.35s ease;
}
.nav.scrolled .nav-inner { padding: 9px 28px; }
.nav-brand {
  display: flex; align-items: center; cursor: pointer; flex-shrink: 0;
}
.nav-brand img { width: auto; height: 50px; object-fit: contain; display: block; transition: height 0.35s ease; }
.nav.scrolled .nav-brand img { height: 42px; }
.nav-brand-text { display: none; }

/* center menu fills remaining space */
.nav-menu { display: flex; align-items: center; justify-content: center; gap: 4px; list-style: none; flex: 1; }
.nav-item { position: relative; }
.nav-link {
  display: inline-block;
  padding: 10px 20px;
  color: var(--white);
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  transition: color 0.2s;
  border-radius: 999px;
  /* the catalog trigger is a <button> (keyboard-operable dropdown), the rest are
     <a>. Reset the UA button chrome so both render identically. */
  background: none; border: 0; font-family: inherit; line-height: inherit;
}
.nav-link:hover, .nav-link.active { color: var(--gold); background: transparent; }
.nav-link.has-caret::after { content: '▾'; font-size: 10px; margin-right: 6px; opacity: 0.6; }
.nav-link.has-caret[aria-expanded="true"]::after { opacity: 1; }

/* visible keyboard focus - the dropdown is reachable by Tab, so it needs one */
.nav-link:focus-visible,
.mobile-menu-link:focus-visible {
  outline: 2px solid var(--gold-soft); outline-offset: 2px; color: var(--gold);
}

/* CTA cluster (left) */
.nav-utility { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-cta { padding: 12px 24px; font-size: 15px; }

.nav-dropdown {
  position: absolute;
  top: 100%; right: 0;
  min-width: 320px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  margin-top: 8px;
  z-index: 200;
}
.nav-item:hover .nav-dropdown,
.nav-item.open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; cursor: pointer;
  border-radius: 12px; transition: background 0.15s; color: var(--ink);
}
.nav-dropdown-item:hover { background: var(--bg-warm); }
.nav-dropdown-icon {
  flex: 0 0 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--gold-3); background: var(--bg-warm); border-radius: 10px;
}
.nav-dropdown-title { font-weight: 600; font-size: 14px; }
/* (.nav-phone now lives in the top bar - styled via .nav-top-item) */

/* ========== HAMBURGER ========== */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 8px;
  background: none; border: none;
  cursor: pointer; border-radius: 8px;
  transition: background 0.2s;
}
.nav-hamburger:hover { background: rgba(235,220,200,0.1); }
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: #eeddcb; border-radius: 2px;
  transition: all 0.3s; transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ========== MOBILE MENU ========== */
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: 80px 28px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  pointer-events: none; visibility: hidden;
}
.mobile-menu.open { transform: translateX(0); pointer-events: all; visibility: visible; }
.mobile-menu-nav { display: flex; flex-direction: column; gap: 4px; margin-bottom: 32px; }
.mobile-menu-link {
  padding: 16px 0; font-size: 22px; font-weight: 700; color: var(--ink);
  font-family: var(--font-display);
  border-bottom: 1px solid var(--line); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  transition: color 0.2s;
  /* same story as .nav-link - the catalog entry is a <button>, siblings are <a> */
  width: 100%; text-align: start; background: none;
  border-inline: 0; border-top: 0;
}
.mobile-menu-link:hover { color: var(--gold-3); }
#mobile-services-arrow { transition: transform 0.35s cubic-bezier(.22,.61,.36,1); }
.mobile-menu-services {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 0; opacity: 0; overflow: hidden;
  padding: 0; pointer-events: none;
  transition: max-height 0.35s cubic-bezier(.22,.61,.36,1), opacity 0.3s ease, padding 0.35s ease;
}
.mobile-menu-services.open {
  max-height: 240px; opacity: 1; padding: 8px 0 4px; pointer-events: auto;
}
.mobile-menu-sub {
  padding: 12px 16px; font-size: 18px; color: var(--text-dim);
  font-weight: 500; cursor: pointer; border-radius: 10px; transition: background 0.15s;
}
.mobile-menu-sub:hover { background: var(--bg-soft); color: var(--ink); }
.mobile-menu-ctas { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 32px; }
.mobile-menu-ctas .btn { width: 100%; justify-content: center; padding: 16px; font-size: 16px; }
.mobile-menu-phone {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 700; color: var(--ink);
  padding: 16px 0; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.mobile-menu-phone svg { color: var(--gold-3); }

/* ============================================================
   CONTACT - split card (form + media), UniMarket-style dimensions
   Shared: homepage contact section + contact page.
   Layout: rounded dark card, 50/50 split - form on the right (RTL),
   media panel (image) on the left. Fields are
   "transparent" (card-bg) with a thin light hairline, placeholder-only.
   ============================================================ */
.contact-section { background: #f2dcc9; }   /* cream band - the dark card sits on top */
.contact-section .section-head .h2 { color: #1f1a1b; }
.contact-section .section-head p { color: #3a3330; }

.contact-form-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  max-width: 1200px; margin: 0 auto; padding: 0;
  background: var(--bg-dark); border-radius: 33px; overflow: hidden;
  border: 1px solid var(--line-gold); box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
/* RTL: column 1 is the visual RIGHT. Put the form on the LEFT, info on the RIGHT.
   Pin both to row 1 - without it, placing the form in col 2 before the info in
   col 1 makes auto-placement drop the info to a second row (tall black void). */
.contact-form-wrap .contact-form { grid-column: 2; grid-row: 1; }
.contact-form-wrap .contact-form-info { grid-column: 1; grid-row: 1; }

/* info panel (left in RTL) - contact details + map */
.contact-form-info {
  position: relative; padding: 40px 48px;
  background: linear-gradient(160deg, var(--maroon) 0%, var(--bg-dark) 100%);
  display: flex; flex-direction: column; gap: 28px;
}
/* heading LEVEL differs by page context (h2 on /contact - directly under the h1;
   h3 on the homepage - nested inside a section h2). Same visual treatment. */
.contact-info-head h2,
.contact-info-head h3 {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  color: var(--cream); margin: 0 0 8px;
}
.contact-info-head p { color: var(--text); font-size: 15px; line-height: 1.6; margin: 0; }

.contact-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.contact-info-item { display: flex; align-items: flex-start; gap: 14px; }
.contact-info-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: rgba(201,168,106,0.12); border: 1px solid var(--line-gold);
  color: var(--gold-soft);
}
.contact-info-icon svg { width: 20px; height: 20px; }
.contact-info-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-info-label { font-size: 12px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.02em; }
.contact-info-value {
  font-size: 16px; font-weight: 500; color: var(--cream);
  text-decoration: none; word-break: break-word; transition: color 0.2s;
}
a.contact-info-value:hover { color: var(--gold-soft); }

/* position:relative + clip contains the off-screen honeypot field
   (left:-9999px) so it can't widen the page / cause horizontal scroll */
.contact-form { padding: 40px 64px; position: relative; overflow: clip; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form .field { margin-bottom: 12px; }

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%; background: transparent; border: 1px solid rgba(238,221,203,0.45);
  color: var(--white); padding: 16px; font-family: var(--font);
  font-size: 16px; border-radius: 0; transition: border-color 0.2s, box-shadow 0.2s;
  text-align: right;   /* RTL: value + placeholder start from the right */
}
.contact-form select { color: var(--text-dim); }   /* placeholder-ish until a value is picked */
.contact-form select option { background: var(--bg-soft); color: var(--white); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--text-dim); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none; border-color: var(--gold-soft);
  box-shadow: 0 0 0 1px var(--gold-soft);
}

.contact-form .field-consent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; margin-top: 4px; }
.contact-form .field-consent input[type=checkbox] {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--gold);
  border: 1px solid var(--line-strong); border-radius: 4px; cursor: pointer;
}
.contact-form .field-consent label {
  display: inline; font-size: 13px; color: var(--cream-soft); font-weight: 400;
  margin-bottom: 0; line-height: 1.6; cursor: pointer;
}
.contact-form .field-consent label a { color: var(--gold-3); text-decoration: underline; }
.contact-form button[type=submit] { border-radius: 0; }

/* screen-reader-only labels - placeholders carry the visible cue, labels stay for a11y */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* factory navigation card (shared: homepage + contact page) */
.navsec { background: #000000; }
.nav-card {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; overflow: hidden;
  border: 1px solid #eeddcb; background: var(--bg-soft); box-shadow: 0 26px 60px rgba(0,0,0,0.45);
}
.nav-card-info { padding: 48px 44px; }
.nav-card-info .h2 { margin: 8px 0 18px; }
.nav-card-addr { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.nav-card-hours { font-size: 14px; color: var(--cream-soft); margin-bottom: 26px; }
.nav-card-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.nav-card-map { position: relative; min-height: 320px; }
.nav-card-map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: grayscale(0.2) contrast(1.05);
}
@media (max-width: 767px) {
  .nav-card { grid-template-columns: 1fr; }
  .nav-card-info { padding: 36px 26px; }
  .nav-card-map { min-height: 240px; }
  .nav-card-btns .btn { flex: 1; }
}

/* ========== FOOTER ========== */
footer { background: var(--bg-dark-2); color: var(--text-dim); padding: 80px 0 32px; margin-top: 0; border-top: 1px solid var(--line); }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 48px; border-bottom: 1px solid var(--line);
  text-align: center; justify-items: center; align-items: center;   /* vertically centered → map/logo balance the columns */
}
.footer-brand-logo { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; }
.footer-brand-logo img { width: 220px; height: auto; object-fit: contain; }
.footer-brand-logo .fn { font-weight: 800; font-size: 22px; color: var(--white); }
.footer-brand-logo .fs { font-size: 11px; color: var(--cream); letter-spacing: 0.15em; margin-top: 2px; }
.footer-brand p { font-size: 14px; line-height: 1.7; max-width: 340px; margin-inline: auto; }
.footer-col h3 { font-size: 13px; color: var(--cream); margin-bottom: 18px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.footer-col ul { list-style: none; display: grid; gap: 10px; justify-items: center; }
.footer-col li, .footer-col a, .footer-col span { font-size: 14px; }   /* links AND plain text (address/hours) share one size */
.footer-col a { transition: color 0.2s; cursor: pointer; }
.footer-col a:hover { color: var(--white); }
.footer-map { width: 100%; max-width: 300px; }
.footer-map h3 { font-size: 13px; color: var(--cream); margin-bottom: 18px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; text-align: center; }
.footer-map iframe { width: 100%; height: 150px; border: 1px solid var(--line-gold); filter: grayscale(0.2); display: block; }
.footer-bottom {
  padding-top: 28px; padding-bottom: 28px; display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: 15px; color: var(--text-muted); text-align: center;
}
.footer-bottom a { margin: 0 8px; }

/* Mainstream credit - full-width dark strip below the footer (outside .container,
   so it spans edge to edge). Palette matches the dark-butcher canvas. */
.footer-credit {
  background: var(--bg-dark-2);
  padding: 16px 20px;
  text-align: center;
}
.footer-credit a {
  display: inline-flex; align-items: center; gap: 12px;
  direction: ltr;
  font-size: 14px; letter-spacing: 0.02em;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.25s ease;
}
.footer-credit a:hover { color: var(--cream); }
.footer-credit img { height: 22px; width: auto; display: block; }

/* ========== WHATSAPP FAB ========== */
.whatsapp-fab {
  position: fixed; bottom: 28px; left: 28px; z-index: 99;
  width: 60px; height: 60px; background: #25D366; color: #eeddcb;
  border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; box-shadow: 0 10px 30px rgba(37,211,102,0.4);
  animation: wapulse 2.5s infinite; border: none;
}
.whatsapp-fab::before {
  content: ''; position: absolute; inset: -6px;
  border: 2px solid #25D366; border-radius: 50%;
  opacity: 0; animation: waring 2.5s infinite;
}
@keyframes wapulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes waring { 0%{opacity:0.7;transform:scale(1)} 100%{opacity:0;transform:scale(1.4)} }
.whatsapp-fab svg { width: 30px; height: 30px; }

/* ========== VEE ACCESSIBILITY TOGGLER ==========
   /scripts/accessibility.js loads the Vee widget anchored to the
   right edge, top, offset 0. Vee only offers top/bottom anchoring
   plus a px offset, never a true middle, so the icon is centered
   here instead: #vplugin is a full-height fixed flex row and the
   toggler is a flex item in it, so align-self does the whole job
   without touching the panel it opens. !important because the rule
   competes with Vee's own injected stylesheet. */
#vplugin-toggler { align-self: center !important; }

/* ========== PRODUCT CARDS (shared: homepage catalog section + catalog pages) ========== */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.prod-card {
  position: relative; cursor: pointer; overflow: hidden;
  aspect-ratio: 3/4; background: var(--bg-soft);
  transition: transform 0.3s, box-shadow 0.3s;
}
.prod-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0,0,0,0.5); }
.prod-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.prod-card:hover img { transform: scale(1.06); }
.prod-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,4,4,0.94) 0%, rgba(13,4,4,0.4) 48%, transparent 75%); }
.prod-badge {
  position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2;
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em;
  color: var(--white); background: #000000; padding: 4px 12px;
}
.prod-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 24px; }
/* card title level differs by context: h2 on the catalog pages (direct child of
   the page h1), h3 on the homepage (nested under a section h2). Same styling. */
.prod-body h2,
.prod-body h3 {
  font-size: 20px; font-weight: 800; color: var(--white); margin-bottom: 8px;
  line-height: 1.25; height: 2.5em;                 /* reserve 2 lines so all cards align */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-overflow: ellipsis;
}
.prod-body p {
  font-size: 13.5px; color: var(--cream-soft); line-height: 1.65; margin-bottom: 14px;
  height: 3.3em;                                    /* exactly 2 lines, uniform across cards */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-overflow: ellipsis;
}
.prod-link {
  display: inline-block; font-size: 13px; font-weight: 800; color: #1a1a1a;
  background: #eeddcb; padding: 10px 22px; border-radius: 4px;
  transition: background 0.25s, transform 0.25s;
}
.prod-card:hover .prod-link { background: #eeddcb; transform: translateX(-4px); }

/* ========== CERTIFICATIONS / TRUST STRIP (shared: home + kosher) ========== */
.catstrip {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 250px; padding: 24px 0;
  background-color: #000;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  background-image: url("/assets/images/brand/wong-shu-bg.jpg"); /* hard fallback */
  background-image: image-set(
    url("/assets/images/brand/wong-shu-bg.webp") type("image/webp"),
    url("/assets/images/brand/wong-shu-bg.jpg")  type("image/jpeg")
  );
}
.catstrip-overlay {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(16,6,5,0.30), rgba(16,6,5,0.45));
}
.catstrip-grid {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 26px 0;
}
.catstrip-item {
  /* 3 per row on desktop → the last 2 wrap to a centered second row */
  flex: 0 0 33.333%; box-sizing: border-box;
  display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 18px;
  padding: 8px 40px; color: var(--white);
}
.catstrip-logo {
  flex: 0 0 auto;
  width: 116px; height: 116px; object-fit: contain;
  background: #eeddcb; border-radius: 50%; padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
/* wide (landscape) seal artwork - less padding so it reads at the same optical size */
.catstrip-logo--wide { padding: 10px; }
.catstrip-tx { text-align: start; }
.catstrip-tx h3 {
  font-family: var(--font-display); font-size: 19px; font-weight: 800;
  letter-spacing: 0.01em; color: var(--cream); margin: 0 0 4px;
}
.catstrip-tx p {
  font-size: 14px; font-weight: 500; line-height: 1.45;
  color: var(--cream-soft); margin: 0; max-width: 16ch;
}

@media (max-width: 1200px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .catstrip-item { padding: 6px 18px; gap: 14px; }
  .catstrip-logo { width: 92px; height: 92px; padding: 13px; }
  .catstrip-logo--wide { padding: 8px; }
  .catstrip-tx h3 { font-size: 17px; }
  .catstrip-tx p { font-size: 13px; }
}
@media (max-width: 767px)  {
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .prod-body { padding: 16px; }
  .prod-body h2, .prod-body h3 { font-size: 16px; margin-bottom: 5px; line-height: 1.2; height: 2.4em; }
  .prod-body p { font-size: 12px; line-height: 1.5; margin-bottom: 10px; height: 3em; }
  .prod-link { padding: 8px 16px; font-size: 12px; }

  .catstrip { padding: 36px 0; }
  .catstrip-grid { flex-direction: column; gap: 0; }
  .catstrip-item {
    flex: 0 0 auto; width: 100%; max-width: 320px;
    flex-direction: column; align-items: center; text-align: center;
    padding: 22px 0; gap: 14px;
    border-top: 1px solid rgba(235,220,200,0.18);
  }
  .catstrip-item:first-child { border-top: none; }
  .catstrip-logo { width: 86px; height: 86px; padding: 12px; }
  .catstrip-logo--wide { padding: 8px; }
  .catstrip-tx { text-align: center; }
  .catstrip-tx p { max-width: none; margin: 0 auto; }
}

/* ========== PRINT HEADER ========== */
.print-brand-header { display: none; }
@media print {
  .print-brand-header {
    display: flex !important; align-items: center; justify-content: space-between;
    padding: 14pt 20pt; border-bottom: 2px solid var(--gold); margin-bottom: 20pt;
  }
  .print-brand-header .brand-block { display: flex; align-items: center; gap: 10pt; }
  .print-brand-header img { width: 44pt; height: 44pt; }
  .print-brand-header .bn { font-weight: 800; font-size: 16pt; color: #0A1628; }
  .print-brand-header .bs { font-size: 8pt; color: #A68948; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 2pt; }
  .print-brand-header .contact-line { font-size: 10pt; color: #4A5568; }
  .print-brand-header .contact-line strong { color: #0A1628; }
  .nav, .mobile-menu, .whatsapp-fab, .cookie-banner,
  #vplugin-toggler, #vplugin-interface { display: none !important; }
}

/* ========== COOKIE BANNER ========== */
.cookie-banner {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: min(640px, calc(100% - 32px));
  background: var(--bg-dark);
  border-radius: 18px;
  border: 1px solid var(--line-dark);
  box-shadow: 0 24px 60px rgba(26,8,8,0.4);
  padding: 28px 32px;
  direction: rtl;
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.cookie-banner.visible { display: block; }
.cookie-banner.shown { opacity: 1; transform: translateX(-50%) translateY(0); }
.cookie-banner-inner { display: flex; align-items: center; gap: 20px; }
.cookie-banner-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  background: rgba(240,220,201,0.12); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: var(--gold);
}
.cookie-banner-text { flex: 1; }
.cookie-banner-title { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.cookie-banner-desc { font-size: 13px; color: var(--cream-soft); line-height: 1.65; }
.cookie-banner-desc a { color: var(--gold); text-decoration: underline; font-weight: 600; }
.cookie-banner-desc a:hover { color: var(--gold-2); }
.cookie-banner-btn {
  flex-shrink: 0; background: var(--gold); color: var(--white);
  border: none; border-radius: 0; padding: 12px 22px;
  font-size: 14px; font-weight: 800; font-family: var(--font);
  cursor: pointer; transition: background 0.2s, transform 0.2s; white-space: nowrap;
}
.cookie-banner-btn:hover { background: var(--gold-2); transform: translateY(-1px); }

/* ========== IMAGE-GATED REVEAL (shared: gallery tiles + product cards) ==========
   Tiles start hidden and fade in only once their photo has actually loaded
   AND they are on screen - see initImgReveal() in core.js. Both .media-tile
   and .prod-card reserve their box with aspect-ratio, so nothing shifts
   while we wait.

   The hidden state is keyed on .imgrev-grid, which sits in the HTML - so the
   render-blocking stylesheet hides the tiles BEFORE the first paint. Adding
   the hidden class from JS instead let the cards paint fully visible and then
   blink out once core.js ran.

   The reveal is a CSS animation, not a transition, so it never overwrites the
   elements' own `transition` (.prod-card keeps its 0.3s hover lift).

   Deliberately a pure fade - no slide, no scale. Movement across a whole grid
   reads as an impact rather than an appearance. The ease matters too: an
   ease-out fade jumps most of the way almost immediately, which is what made
   the earlier version feel abrupt. Duration is the one knob to tune.

   Failsafe: the base rule runs the same fade on a 3s delay, so the content
   still appears if core.js never runs. */
.imgrev-grid > * {
  opacity: 0;
  animation: imgrev-fade 1.2s cubic-bezier(0.4, 0, 0.2, 1) 3s forwards;
}
.imgrev-grid > .imgrev-in {
  animation: imgrev-fade 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes imgrev-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .imgrev-grid > .imgrev-in { animation-duration: 0.3s; }
}

/* ========== REDUCE MOTION ========== */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation: none !important;
  transition: none !important;
}

/* ============================================================
   RESPONSIVE - only TWO breakpoints site-wide:
     1200px  → tablet: nav becomes hamburger, grids shrink
      767px  → mobile: single column
   Do NOT add intermediate breakpoints. Fine-tune inside these.
   ============================================================ */

/* ---- Nav switches to hamburger on tablet + mobile ---- */
@media (max-width: 1200px) {
  .container { padding: 0 16px; }
  .nav-top { display: none; }
  .nav-inner { padding: 8px 16px; justify-content: space-between; gap: 12px; flex-direction: row-reverse; }
  .nav-menu, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .nav-brand { display: flex; }
  .nav-brand img { height: 34px; }
  .nav.scrolled .nav-brand img { height: 30px; }
  .nav-utility { gap: 0; }
}

/* ---- Tablet ---- */
@media (min-width: 768px) and (max-width: 1200px) {
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 52px; }
  .section-head p { font-size: 16px; }
  .h2 { font-size: clamp(28px, 4vw, 38px); }

  /* tablet: stack - form on top, contact info below (form-rows stay 2-up; card is wide). */
  .contact-form-wrap { grid-template-columns: 1fr; padding: 0; border-radius: 24px; }
  .contact-form-wrap .contact-form,
  .contact-form-wrap .contact-form-info { grid-column: 1; grid-row: auto; }
  .contact-form { padding: 36px 40px; }
  .contact-form-info { padding: 36px 40px; border-top: 1px solid var(--line-gold); }

  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 32px; }
  .footer-brand { text-align: right; }
  .footer-brand-logo { justify-content: flex-start; }
  .footer-brand p { margin-inline: 0; }
  .footer-col { text-align: right; }
  .footer-col ul { justify-items: start; }
  footer { padding: 64px 0 28px; }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .section { padding: 52px 0; }
  .section-head { margin-bottom: 40px; }
  .section-head p { font-size: 15px; }
  .h2 { font-size: clamp(24px, 6vw, 36px); }

  /* mobile: full-bleed - break out of the .container's 16px gutters so the card spans edge-to-edge */
  .contact-form-wrap { grid-template-columns: 1fr; padding: 0; margin: 0 -16px; border-radius: 0; border-inline: none; }
  /* slim side padding so the inputs run nearly full width */
  .contact-form { padding: 28px 16px; }
  .contact-form .form-row { grid-template-columns: 1fr; gap: 0; }
  /* form first, contact info below it on mobile */
  .contact-form-wrap .contact-form,
  .contact-form-wrap .contact-form-info { grid-column: 1; grid-row: auto; }
  .contact-form-info { padding: 28px 16px; border-top: 1px solid var(--line-gold); }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; font-size: 12px; }
  .footer-brand { text-align: center; }
  .footer-brand-logo { justify-content: center; }
  .footer-brand p { margin-inline: auto; }
  .footer-col { text-align: center; }
  .footer-col ul { justify-items: center; }
  footer { padding: 52px 0 24px; }

  .whatsapp-fab { bottom: 20px; left: 20px; width: 52px; height: 52px; }
  .whatsapp-fab svg { width: 26px; height: 26px; }

  .cookie-banner { bottom: 10px; width: calc(100% - 16px); padding: 18px 16px; border-radius: 14px; }
  .cookie-banner-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cookie-banner-icon { display: none; }
  .cookie-banner-btn { width: 100%; text-align: center; padding: 13px; font-size: 15px; }
}