/* =============================================================================
   UNDERDOG — JonnyStudio Theme
   100% natural bites
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Einstein Hebrew Font
   ----------------------------------------------------------------------------- */
@font-face {
  font-family: 'FbEinstein';
  src: url('../fonts/FbEinstein-Thin.woff') format('woff');
  font-weight: 100 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FbEinstein';
  src: url('../fonts/FbEinstein-Regular.woff2') format('woff2'),
       url('../fonts/FbEinstein-Regular.woff')  format('woff'),
       url('../fonts/FbEinstein-Regular.otf')   format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FbEinstein';
  src: url('../fonts/FbEinstein-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FbEinstein';
  src: url('../fonts/FbEinstein-Bold.woff2') format('woff2'),
       url('../fonts/FbEinstein-Bold.woff')  format('woff'),
       url('../fonts/FbEinstein-Bold.otf')   format('opentype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
   CSS Custom Properties
   ----------------------------------------------------------------------------- */
:root {
  /* Brand Colors */
  --color-black:       #0d0d0d;
  --color-white:       #ffffff;
  --color-red:         #f0c020;
  --color-accent:      #f0c020;
  --accent:            #f0c020;
  --color-yellow:      #f0c020;
  --color-off-white:   #f8f8f8;
  --color-dark-gray:   #1a1a1a;
  --color-mid-gray:    #555555;
  --color-text-muted:  #888888;
  --color-light-gray:  #e8e6e2;

  /* Category Colors — official palette from packaging */
  --cat-training:      #C4B0E0; /* lavender — אילוף */
  --cat-chewing:       #40B8B8; /* teal — לעיסה */
  --cat-pampering:     #E04080; /* hot pink — פינוק */
  --cat-mix:           #C8E040; /* lime — מיקסים */
  --cat-savings:       #C8A878; /* tan/kraft — חיסכון */
  --cat-cats:          #F0A040; /* orange — חתולים */

  /* Per-product accent colors from official palette */
  --prod-training-lung:    #F4A0B0; /* pink */
  --prod-training-liver:   #E05040; /* coral */
  --prod-training-turkey:  #A0C0E0; /* light blue */
  --prod-training-chicken: #C4B0E0; /* lavender */
  --prod-training-mix:     #D0CEC8; /* gray */
  --prod-chunks-lungs:     #F0A040; /* orange */
  --prod-liver-chips:      #F0C0B8; /* salmon */
  --prod-chicken-strips:   #8878C8; /* purple */
  --prod-chicken-necks:    #6878C0; /* indigo */
  --prod-turkey-necks:     #C8A878; /* tan */
  --prod-heart-chips:      #40C8C8; /* cyan */
  --prod-beef-strips:      #308080; /* dark teal */
  --prod-skin-sticks:      #C0D8B8; /* sage */
  --prod-bullies:          #78B040; /* green */
  --prod-bullytips:        #90A840; /* olive */
  --prod-testicle-chips:   #C8E040; /* lime */
  --prod-trachea:          #C040C0; /* magenta */
  --prod-gizzard:          #E04080; /* hot pink */
  --prod-chew-mix:         #D8E040; /* yellow-lime */
  --prod-turkey-strips:    #80D8D8; /* light cyan */
  --prod-chew-mix-mini:    #C0A8D8; /* soft lavender */
  --prod-sardines:         #E08060; /* salmon */

  /* Typography
     Liebling = תווים אנגליים (UNDERDOG, taglines)
     FbEinstein = תווים עבריים (fallback per-character אוטומטי)
  */
  --font-brand:        'IBM Plex Sans Hebrew', sans-serif;
  --font-body:         'IBM Plex Sans Hebrew', sans-serif;
  --font-mono:         'Courier New', monospace;

  /* Spacing */
  --space-xs:    0.5rem;
  --space-sm:    1rem;
  --space-md:    2rem;
  --space-lg:    4rem;
  --space-xl:    8rem;
  --space-2xl:   12rem;

  /* Layout */
  --container-max:     1440px;
  --container-wide:    1200px;
  --container-narrow:  800px;

  /* Animation */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --dur-fast:    0.2s;
  --dur-mid:     0.4s;
  --dur-slow:    0.8s;

  /* Shadows */
  --shadow-sm:   4px 4px 0px rgba(0,0,0,0.12);
  --shadow-md:   8px 8px 0px rgba(0,0,0,0.10);
  --shadow-lg:   0 24px 48px rgba(0,0,0,0.10);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.07);
  --shadow-hover: 0 12px 40px rgba(0,0,0,0.13);

  /* Border */
  --border-rough: 2px solid var(--color-black);
  --color-border: #e8e6e2;
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-md:   8px;
}

/* -----------------------------------------------------------------------------
   Reset & Base
   ----------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  overflow-x: hidden;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-black);
  background: var(--color-white);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
}

/* -----------------------------------------------------------------------------
   Typography
   ----------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-brand);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(3rem, 8vw, 7rem); }
h2 { font-size: clamp(2rem, 5vw, 4rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h4 { font-size: clamp(1.2rem, 2vw, 1.8rem); }

p { max-width: 65ch; }

.text-center { text-align: center; }
.text-start  { text-align: start; }

/* -----------------------------------------------------------------------------
   Layout Utilities
   ----------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container--wide    { max-width: var(--container-max); }
.container--narrow  { max-width: var(--container-narrow); }

.grid {
  display: grid;
  gap: var(--space-md);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--gap-sm { gap: var(--space-sm); }
.flex--gap-md { gap: var(--space-md); }

.section {
  padding-block: var(--space-xl);
}

.section--dark {
  background: var(--color-black);
  color: var(--color-white);
}

.section--off-white {
  background: var(--color-off-white);
}

/* -----------------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.8em 2em;
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: var(--border-rough);
  border-radius: 100px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.btn--primary {
  background: var(--color-black);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-md);
}

.btn--primary:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.btn--outline {
  background: transparent;
  color: var(--color-black);
  box-shadow: var(--shadow-sm);
}

.btn--outline:hover {
  background: var(--color-black);
  color: var(--color-white);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-md);
}

.btn--white {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.btn--white:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px rgba(255,255,255,0.85);
}

.btn--large {
  font-size: 1.25rem;
  padding: 1em 2.5em;
}

.btn--sm {
  font-size: 0.8rem;
  padding: 0.55em 1.3em;
}

.btn--red {
  background: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
  box-shadow: var(--shadow-sm);
}

.btn--red:hover {
  background: #c8a000;
  border-color: #c8a000;
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.55);
}

.btn--ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--color-white);
  transform: translate(-2px, -2px);
}

/* -----------------------------------------------------------------------------
   Site Header
   ----------------------------------------------------------------------------- */
/* ── Top Bar (from theme settings) ── */
.ud-top-bar {
  background: var(--color-red);
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 1001;
  letter-spacing: 0.02em;
}
.ud-top-bar a {
  color: inherit;
  text-decoration: none;
}
.ud-top-bar a:hover {
  text-decoration: underline;
}
/* When top bar is present, push header down */
body:has(.ud-top-bar) .site-header {
  top: 30px;
}
body:has(.ud-top-bar) .mega-panel {
  top: calc(100% + 30px);
}

.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 1000;
  background: var(--color-black);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* ── Shrink on scroll ── */
.site-header.scrolled {
  box-shadow: 0 2px 24px rgba(0,0,0,0.55);
  background: rgba(10,10,10,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header.scrolled .header-inner {
  height: 56px;
}

.site-header.scrolled .site-logo img,
.site-header.scrolled .site-logo svg {
  transform: scale(0.88);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding-inline: 2.5rem;
  width: 100%;
  gap: var(--space-md);
  transition: height 0.3s ease;
}

.site-logo img,
.site-logo svg {
  transition: transform 0.3s ease;
}

.site-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-logo img,
.site-logo .custom-logo {
  height: 52px;
  width: auto;
}

/* ── Desktop Nav ── */
.nav-desktop {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.nav-item > a,
.nav-mega-trigger {
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.5em 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: none;
  transition: color var(--dur-fast);
  line-height: 1;
  position: relative;
}

/* Animated underline */
.nav-item > a::before,
.nav-mega-trigger::before {
  content: '';
  position: absolute;
  bottom: -2px;
  inset-inline-start: 1rem;
  inset-inline-end: 1rem;
  height: 2px;
  background: var(--color-red);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}

.nav-item > a:hover,
.nav-mega-trigger:hover,
.nav-item--active > a,
.nav-item--mega.mega-open .nav-mega-trigger {
  color: var(--color-white);
}

.nav-item > a:hover::before,
.nav-mega-trigger:hover::before,
.nav-item--active > a::before,
.nav-item--mega.mega-open .nav-mega-trigger::before {
  transform: scaleX(1);
}

/* Emoji in nav */
.nav-emoji {
  font-style: normal;
  font-size: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-item > a:hover .nav-emoji,
.nav-mega-trigger:hover .nav-emoji,
.nav-item--active > a .nav-emoji {
  transform: scale(1.2);
  opacity: 1;
}

/* Chevron rotation when open */
.nav-mega-trigger svg {
  opacity: 0.6;
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}

.nav-mega-trigger:hover svg,
.nav-item--mega.mega-open .nav-mega-trigger svg {
  opacity: 1;
  transform: rotate(180deg);
}

/* ── Header Actions ── */
.header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.header-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: rgba(255,255,255,0.55);
  border-radius: 50%;
  transition: color var(--dur-fast), background var(--dur-fast);
}

.header-action-btn:hover {
  color: var(--color-white);
  background: rgba(255,255,255,0.08);
}

.header-cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: rgba(255,255,255,0.65);
  border-radius: 50%;
  transition: color var(--dur-fast), background var(--dur-fast);
}

.header-cart:hover {
  color: var(--color-white);
  background: rgba(255,255,255,0.08);
}

.cart-count {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  background: var(--color-red);
  color: white;
  font-size: 0.58rem;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  padding-inline: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-black);
  transition: transform var(--dur-fast);
}

.cart-count--empty {
  display: none;
}

/* ── Hamburger ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 8px;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 50%;
  transition: background var(--dur-fast);
}

.nav-toggle:hover { background: rgba(255,255,255,0.08); }

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform var(--dur-mid) var(--ease-out),
              opacity var(--dur-mid);
}

.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Close button inside overlay — hidden, the header toggle serves as the X */
.mobile-nav-close { display: none; }

/* -----------------------------------------------------------------------------
   Mega Menu Panel
   ----------------------------------------------------------------------------- */
.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #141414;
  border-bottom: 2px solid var(--color-red);
  box-shadow: 0 24px 48px rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease,
              transform 0.2s ease,
              visibility 0s linear 0.2s;
  z-index: 998;
  pointer-events: none;
}

.mega-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mega-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 1.25rem var(--space-md) 1.5rem;
}

/* Top label row */
.mega-header-row {
  display: flex;
  align-items: center;
}

.mega-section-label {
  font-family: var(--font-brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

.mega-categories {
  display: flex;
  gap: 0.75rem;
}

/* Each category card in mega */
.mega-cat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1rem 1rem;
  border-radius: 14px;
  border-top: 3px solid var(--mega-color, var(--color-red));
  background: rgba(255,255,255,0.045);
  color: var(--color-white);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

/* Color glow on hover */
.mega-cat-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--mega-color, var(--color-red)) 14%, transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: inherit;
  pointer-events: none;
}

.mega-cat-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.mega-cat-item:hover::before {
  opacity: 1;
}

.mega-cat-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--mega-color, var(--color-red)) 22%, #1e1e1e);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.mega-cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega-cat-name {
  display: block;
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.mega-cat-desc {
  display: block;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

/* Bottom arrow */
.mega-cat-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 0.5rem;
  position: relative;
  z-index: 1;
}

.mega-cat-arrow {
  opacity: 0;
  color: var(--mega-color, var(--color-red));
  transform: translateX(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.mega-cat-item:hover .mega-cat-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* -----------------------------------------------------------------------------
   Mobile Navigation Overlay
   ----------------------------------------------------------------------------- */
@keyframes mobileNavIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--header-h, 76px);
  background: #0a0a0a;
  z-index: 999;
  overflow-y: auto;
  flex-direction: column;
  padding: 0;
  border-top: none;
}

.nav-mobile-overlay.open {
  display: flex;
  animation: mobileNavIn 0.22s ease-out forwards;
}

/* Close button inside overlay */
.mobile-nav-close {
  position: absolute;
  top: 0.9rem;
  inset-inline-end: 1rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: 50%;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.mobile-nav-close:hover {
  background: rgba(255,255,255,0.12);
  color: var(--color-white);
}

/* Nav items */
.nav-mobile-overlay > nav {
  padding-top: 3.5rem;
  flex: 1;
}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0 0 1rem;
}

.mobile-nav-item {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ── Main nav link row ── */
.mobile-nav-row {
  display: flex;
  align-items: center;
}

.mobile-nav-link {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  font-family: var(--font-brand);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.mobile-nav-link::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 2px;
  background: var(--color-red);
  margin-inline-end: 0;
  transition: width var(--dur-mid), margin var(--dur-mid);
  vertical-align: middle;
}

.mobile-nav-item:hover .mobile-nav-link::before,
.mobile-nav-item--active .mobile-nav-link::before {
  width: 18px;
  margin-inline-end: 0.75rem;
}

.mobile-nav-link:hover,
.mobile-nav-item--active .mobile-nav-link {
  color: var(--color-white);
}

/* Chevron toggle button */
.mobile-nav-toggle-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 56px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: color 0.2s, transform 0.25s;
}

.mobile-nav-toggle-sub:hover {
  color: rgba(255,255,255,0.85);
}

.mobile-nav-item--open .mobile-nav-toggle-sub {
  transform: rotate(180deg);
  color: var(--color-red);
}

/* ── Sub-category list ── */
.mobile-nav-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0.6rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.03);
}

.mobile-nav-sub-item {
  border: none;
}

.mobile-nav-sub-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem 0.65rem 0.25rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,0.58);
  text-decoration: none;
  transition: color 0.18s;
}

.mobile-nav-sub-link:hover {
  color: rgba(255,255,255,0.92);
}

.mobile-nav-sub-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.85;
}

.mobile-nav-sub-item--all .mobile-nav-sub-link--all {
  color: var(--color-red);
  font-size: 0.88rem;
  font-weight: 600;
  padding-top: 0.5rem;
  margin-top: 0.2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.mobile-nav-sub-item--all .mobile-nav-sub-link--all:hover {
  color: #ff6666;
}

/* Legacy fallback — keep li a working if WP menu is used */
.mobile-nav-list li a {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  font-family: var(--font-brand);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.mobile-nav-list li.current-menu-item > a {
  color: var(--color-red);
}

/* Footer area */
.mobile-nav-footer {
  margin-top: auto;
  padding: 1.25rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}

.mobile-nav-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 700;
  color: #25D366;
  text-decoration: none;
  transition: opacity var(--dur-fast);
}

.mobile-nav-wa:hover { opacity: 0.85; }

/* -----------------------------------------------------------------------------
   Hero — Cinematic Fullscreen Slider
   ----------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Video ── */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* ── Dark gradient overlay ── */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.28) 0%,
    rgba(0,0,0,0.55) 50%,
    rgba(0,0,0,0.72) 100%
  );
}

/* ── Centered content ── */
/* Hero entry animation — pure CSS so H1 is never hidden by JS (LCP-safe) */
@keyframes hero-entry {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: var(--space-md);
  padding-top: 76px; /* header height */
  gap: 1.2rem;
  max-width: 860px;
  width: 100%;
}

.hero-content > * {
  animation: hero-entry 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.22s; }
.hero-content > *:nth-child(3) { animation-delay: 0.34s; }
.hero-content > *:nth-child(4) { animation-delay: 0.44s; }
.hero-content > *:nth-child(5) { animation-delay: 0.52s; }

@media (prefers-reduced-motion: reduce) {
  .hero-content > * { animation: none; }
}

.hero-pretitle {
  font-family: var(--font-brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-pretitle::before,
.hero-pretitle::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(255,255,255,0.35);
}

.hero-title {
  font-family: var(--font-brand);
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--color-white);
  letter-spacing: -0.01em;
}

.hero-title em {
  font-style: italic;
  font-weight: 300;
  color: rgba(255,255,255,0.72);
}

.hero-tagline {
  font-family: var(--font-brand);
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  font-weight: 200;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: 0.4rem;
}

/* Trust row */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.hero-trust-item {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  padding: 0.38rem 0.85rem;
  border-radius: 100px;
  white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}

@media (max-width: 640px) {
  .hero {
    min-height: 480px;
    height: 88svh; /* svh = small viewport height — excludes browser chrome on mobile */
  }
  .hero-trust {
    flex-wrap: nowrap;
    gap: 0.28rem;
    margin-top: 1rem;
  }
  .hero-trust-item {
    font-size: 0.6rem;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.6rem;
  }
}

.hero-trust-item:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.32);
}

.hero-trust-sep {
  display: none; /* separators not needed with pill layout */
}

/* ── Scroll cue line ── */
.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  inset-inline-end: var(--space-lg);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.hero-scroll-line {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 100%);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* -----------------------------------------------------------------------------
   Search Overlay
   ----------------------------------------------------------------------------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding-top: 15vh;
}

.search-overlay[hidden] { display: none; }

.search-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.search-overlay-box {
  position: relative;
  z-index: 1;
  width: min(640px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: searchBoxIn 0.22s var(--ease-out);
}

@keyframes searchBoxIn {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.search-overlay-label {
  font-family: var(--font-brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-align: center;
  margin: 0;
}

.search-overlay-close {
  position: absolute;
  top: -3.5rem;
  inset-inline-end: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.search-overlay-close:hover {
  background: rgba(255,255,255,0.18);
  color: var(--color-white);
}

/* WordPress search form inside overlay */
.search-overlay .search-form {
  display: flex;
  gap: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}

.search-overlay .search-field {
  flex: 1;
  height: 58px;
  padding: 0 1.25rem;
  font-family: var(--font-brand);
  font-size: 1.1rem;
  font-weight: 300;
  background: #fff;
  border: none;
  outline: none;
  color: var(--color-black);
  direction: rtl;
}

.search-overlay .search-field::placeholder {
  color: rgba(0,0,0,0.3);
}

.search-overlay .search-submit {
  height: 58px;
  padding: 0 1.5rem;
  background: var(--color-red);
  color: white;
  border: none;
  font-family: var(--font-brand);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast);
  white-space: nowrap;
}

.search-overlay .search-submit:hover {
  background: #c52020;
}

/* -----------------------------------------------------------------------------
   Cart Flyout
   ----------------------------------------------------------------------------- */
.cart-flyout {
  position: fixed;
  inset: 0;
  z-index: 1100;
}

.cart-flyout[hidden] { display: none; }

.cart-flyout-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.cart-flyout-panel {
  position: absolute;
  top: 0;
  inset-inline-end: 0;   /* שמאל בRTL */
  height: 100%;
  width: min(400px, 92vw);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 40px rgba(0,0,0,0.22);
  animation: flyoutIn 0.28s var(--ease-out);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

@keyframes flyoutIn {
  from { transform: translateX(-30px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.cart-flyout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.cart-flyout-title {
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-black);
}

.cart-flyout-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-black);
  cursor: pointer;
  transition: background var(--dur-fast);
}

.cart-flyout-close:hover { background: var(--color-off-white); }

.cart-flyout-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 1.25rem;
}

/* WooCommerce mini cart inside flyout */
.cart-flyout-body .woocommerce-mini-cart {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cart-flyout-body .woocommerce-mini-cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-flyout-body .woocommerce-mini-cart-item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.cart-flyout-body .woocommerce-mini-cart-item a:not(.remove) {
  font-family: var(--font-brand);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-black);
  text-decoration: none;
  display: block;
  margin-bottom: 0.25rem;
}

.cart-flyout-body .woocommerce-mini-cart-item a:not(.remove):hover {
  color: var(--color-red);
}

.cart-flyout-body .woocommerce-mini-cart-item .quantity {
  font-size: 0.8rem;
  font-weight: 300;
  color: rgba(0,0,0,0.5);
}

.cart-flyout-body .woocommerce-mini-cart-item .remove {
  margin-inline-start: auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.3);
  font-size: 1.1rem;
  border-radius: 50%;
  transition: color var(--dur-fast), background var(--dur-fast);
  flex-shrink: 0;
}

.cart-flyout-body .woocommerce-mini-cart-item .remove:hover {
  color: var(--color-red);
  background: rgba(224,48,48,0.08);
}

.cart-flyout-body .woocommerce-mini-cart__empty-message {
  text-align: center;
  padding: 3rem 1rem;
  font-weight: 300;
  color: rgba(0,0,0,0.4);
}

/* Total + buttons row */
.cart-flyout-body .woocommerce-mini-cart__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border) !important;
  margin-top: 0.5rem;
}

.cart-flyout-body .woocommerce-mini-cart__total strong {
  font-family: var(--font-brand);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cart-flyout-body .woocommerce-mini-cart__total .woocommerce-Price-amount {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-black);
}

.cart-flyout-body .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-bottom: 1.5rem;
}

.cart-flyout-body .woocommerce-mini-cart__buttons a,
.cart-flyout-body .woocommerce-mini-cart__buttons .button {
  display: block !important;
  text-align: center !important;
  padding: 0.8rem 1.25rem !important;
  font-family: var(--font-brand) !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 100px !important;
  border: 2px solid transparent !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
  box-shadow: none !important;
}

.cart-flyout-body .woocommerce-mini-cart__buttons a:active,
.cart-flyout-body .woocommerce-mini-cart__buttons .button:active {
  transform: scale(0.97) !important;
}

.cart-flyout-body .woocommerce-mini-cart__buttons .button.checkout,
.cart-flyout-body .woocommerce-mini-cart__buttons .checkout {
  background: var(--color-red) !important;
  color: #fff !important;
  border-color: var(--color-red) !important;
}

.cart-flyout-body .woocommerce-mini-cart__buttons .button.checkout:hover {
  background: #c52020 !important;
  border-color: #c52020 !important;
}

.cart-flyout-body .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout),
.cart-flyout-body .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) {
  background: transparent !important;
  color: var(--color-black) !important;
  border-color: var(--color-black) !important;
}

.cart-flyout-body .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):hover {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
}

/* Loading state */
.cart-flyout-panel.is-loading .cart-flyout-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-flyout-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-red);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* header-cart as button (not anchor) */
.header-cart {
  background: none;
  cursor: pointer;
}

/* -----------------------------------------------------------------------------
   Manifesto Strip
   ----------------------------------------------------------------------------- */
.manifesto-strip {
  background: var(--color-red);
  color: var(--color-white);
  overflow: hidden;
  padding-block: var(--space-sm);
  direction: ltr;
}

.manifesto-track {
  display: flex;
  width: max-content;
  animation: marquee 20s linear infinite;
}

.manifesto-item {
  font-family: var(--font-brand);
  font-size: clamp(0.78rem, 1.4vw, 1.05rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-inline-end: var(--space-lg);
}

.manifesto-item::after {
  content: '✦';
  color: rgba(255,255,255,0.5);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* -----------------------------------------------------------------------------
   Trust Bar
   ----------------------------------------------------------------------------- */
.trust-bar {
  background: #f0efed;
  padding: 1.25rem 1.5rem;
}

.trust-bar-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-black);
  white-space: nowrap;
  background: #fff;
  border-radius: 100px;
  padding: 0.55rem 1.1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.trust-item:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.trust-item svg {
  color: var(--color-red);
  flex-shrink: 0;
  width: 17px;
  height: 17px;
}

.trust-divider {
  display: none;
}

@media (max-width: 640px) {
  .trust-bar {
    padding: 1rem 1rem;
  }
  .trust-bar-inner {
    gap: 0.5rem;
  }
  .trust-item {
    font-size: 0.76rem;
    padding: 0.45rem 0.85rem;
    gap: 0.45rem;
  }
  .trust-item svg {
    width: 15px;
    height: 15px;
  }
}

/* -----------------------------------------------------------------------------
   Categories Section
   ----------------------------------------------------------------------------- */
.categories-section {
  padding-block: var(--space-xl);
  background: var(--color-off-white);
  border-top: 1px solid var(--color-light-gray);
}

/* ── 3 Main Feature Cards ── */
.main-cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: var(--space-lg);
}

.main-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: #181818;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-white);
  cursor: pointer;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid);
}

.main-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}

/* Image wrapper — rounded corners visible against dark card bg */
.main-cat-img-wrap {
  margin: 0.9rem 0.9rem 0;
  border-radius: 0.65rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--cat-color, var(--color-red)) 70%, #111);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.main-cat-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.main-cat-card:hover .main-cat-img-wrap img {
  transform: scale(1.06);
}

.main-cat-emoji {
  font-size: 4.5rem;
  line-height: 1;
  opacity: 0.7;
}

/* Content below image */
.main-cat-content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.4rem 1.4rem;
}

.main-cat-label {
  display: inline-flex;
  display: flex;
  flex-direction: column;
  padding: 0.18em 0.75em;
  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: 100px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.15rem;
}

.main-cat-name {
  font-family: var(--font-brand);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--color-white);
  margin: 0;
}

.main-cat-desc {
  font-size: 0.8rem;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  margin: 0;
}

.main-cat-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-brand);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-top: 0.4rem;
  opacity: 0.7;
  transition: opacity var(--dur-mid), color var(--dur-mid), gap var(--dur-mid);
}

.main-cat-card:hover .main-cat-cta {
  opacity: 1;
  color: var(--color-white);
  gap: 0.65rem;
}

/* ── Sub-category Cards Strip ── */
.sub-cats-strip {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-light-gray);
}

.sub-cats-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-md);
}

.sub-cats-label {
  font-family: var(--font-brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.sub-cats-label::before {
  content: '';
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--color-mid-gray);
}

/* 5-column image card grid */
.sub-cats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
}

.sub-cat-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-black);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid);
}

.sub-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.10);
  border-color: transparent;
}

/* Image area — ללא רקע, רק התמונה */
.sub-cat-img {
  aspect-ratio: 1 / 1;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.sub-cat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.sub-cat-card:hover .sub-cat-img img {
  transform: scale(1.08);
}

.sub-cat-emoji {
  font-size: 2.4rem;
  line-height: 1;
  transition: transform var(--dur-slow) var(--ease-out);
}

.sub-cat-card:hover .sub-cat-emoji {
  transform: scale(1.15);
}

/* Text area */
.sub-cat-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem 0.85rem;
  border-top: 2px solid transparent;
  transition: border-color var(--dur-mid);
}

.sub-cat-card:hover .sub-cat-info {
  border-top-color: var(--cat-color, var(--color-red));
}

.sub-cat-name {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-black);
  line-height: 1.3;
}

.sub-cat-count {
  font-size: 0.68rem;
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   Products Section (Best Sellers)
   ----------------------------------------------------------------------------- */
.products-section {
  padding-block: var(--space-xl);
  background: var(--color-off-white);
  border-top: 2px solid var(--color-red);
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
}

.section-title {
  font-family: var(--font-brand);
  font-size: clamp(1.9rem, 4.5vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
}

.section-subtitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-red);
  font-family: var(--font-brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.section-subtitle::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-red);
  flex-shrink: 0;
}

/* Carousel wrapper — positions arrows on the sides */
.products-carousel-wrap {
  position: relative;
  margin-inline: -2.5rem; /* pull to edge so arrows sit outside the track */
  padding-inline: 2.5rem;
}

/* Arrow buttons */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  cursor: pointer;
  transition: background var(--dur-fast), box-shadow var(--dur-fast),
              transform var(--dur-fast), opacity var(--dur-fast);
}

.carousel-arrow:hover {
  background: var(--color-black);
  color: var(--color-white);
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  transform: translateY(-50%) scale(1.07);
}

.carousel-arrow--prev {
  right: 0;        /* RTL: "prev" is visually on the right */
}

.carousel-arrow--next {
  left: 0;         /* RTL: "next" is visually on the left */
}

/* Hide arrows when scroll is at edge — JS toggles .is-at-start / .is-at-end */
.products-carousel-wrap.is-at-start .carousel-arrow--prev { opacity: 0.3; pointer-events: none; }
.products-carousel-wrap.is-at-end   .carousel-arrow--next { opacity: 0.3; pointer-events: none; }

.products-scroll {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  /* padding-block gives room for box-shadows + hover translateY that get clipped by overflow-x:auto.
     padding-inline so edge cards don't lose their shadow against the container edge.
     negative margin-block compensates the extra space so section layout isn't affected. */
  padding: 20px 20px 28px;
  margin-block: -20px -28px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  align-items: stretch;
  cursor: grab;
}

.products-scroll.is-dragging { cursor: grabbing; }

/* Invisible scrollbar */
.products-scroll::-webkit-scrollbar { height: 0; }
.products-scroll { scrollbar-width: none; }

/* ── WooCommerce Product Card (template: woocommerce/content-product.php) ── */

/* The <li> wrapper from WC */
.products-scroll li.product {
  flex: 0 0 230px;
  scroll-snap-align: start;
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* The <a> is the card */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  text-decoration: none;
  color: var(--color-black);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-light-gray);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 52px rgba(0,0,0,0.12);
  border-color: transparent;
  color: var(--color-black);
}

/* Image area — tinted with category accent */
.product-card-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  background: var(--color-white);
  flex-shrink: 0;
  border-radius: 10px;
  margin: 6px 6px 0;
}

/* Kill WooCommerce default li.product margins inside any carousel */
.products-scroll > li.product {
  margin: 0 !important;
  padding: 0 !important;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.1rem;
  border-radius: 10px;
  transition: transform 0.6s var(--ease-out);
}

.product-card:hover .product-card-image img {
  transform: scale(1.07);
}

/* Sale badge — positioned on .product-card (position:relative), not image-div */
.product-badge {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  padding: 0.22em 0.7em;
  font-family: var(--font-brand);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-red);
  color: var(--color-white);
  border-radius: 100px;
  z-index: 3;
  pointer-events: none;
}

/* Card body */
.product-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 1rem 1rem;
  gap: 0;
}

/* Product name — 2 lines max */
.product-name {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-black);
  -webkit-text-stroke: 0.7px var(--color-black);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.product-weight {
  font-size: 0.68rem;
  font-weight: 300;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
}

/* Footer: price + button */
.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.6rem;
}

.product-price {
  font-family: var(--font-brand);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-black);
  line-height: 1;
}
.product-price .amount,
.product-price ins .amount,
.product-price bdi { color: inherit; font-weight: 400; }
/* Sale price — strike the original */
.product-price del { opacity: 0.45; font-size: 0.82em; }
.product-price ins { text-decoration: none; }

/* CTA button — minimal black pill */
.product-cta-btn {
  display: inline-flex;
  align-items: center;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  padding: 0.45em 1rem;
  font-family: var(--font-brand);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 100px;
  white-space: nowrap;
  transition: background var(--dur-fast), transform var(--dur-fast);
  text-decoration: none;
  flex-shrink: 0;
}

.product-cta-btn:hover {
  background: #333;
  transform: scale(1.05);
}

/* State feedback */
.product-cta-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.product-cta-btn.added    { background: #1a7a1a; }

/* Backward compat */
.add-to-cart-btn {
  display: inline-flex;
  align-items: center;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  padding: 0.45em 1rem;
  font-family: var(--font-brand);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast);
  text-decoration: none;
}
.add-to-cart-btn:hover { background: #333; }

/* Scrollbar — invisible but functional */
.products-scroll::-webkit-scrollbar { height: 0; }
.products-scroll { scrollbar-width: none; }

/* -----------------------------------------------------------------------------
   Why Underdog — Dark numbered section
   ----------------------------------------------------------------------------- */
.why-section {
  padding-block: var(--space-xl);
  background: #0e0e0e;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

/* Orb 1 — red */
.why-section::before {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,48,48,0.5) 0%, transparent 70%);
  filter: blur(80px);
  top: -140px;
  inset-inline-start: 5%;
  animation: orbDrift1 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Orb 2 — deep violet */
.why-section::after {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100,60,180,0.4) 0%, transparent 70%);
  filter: blur(80px);
  bottom: -100px;
  inset-inline-end: 8%;
  animation: orbDrift2 22s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.why-section .container { position: relative; z-index: 1; }

.why-section .section-subtitle { color: var(--color-red); }
.why-section .section-title    { color: var(--color-white); }

/* Centered section header modifier */
.section-header--center {
  justify-content: center;
  text-align: center;
}
.section-header--center > div { text-align: center; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-lg);
}

.why-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  padding: 2rem 1.4rem 1.75rem;
  background: #0e0e0e;
  border: none;
  border-inline-end: 1px solid rgba(255,255,255,0.07);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  transition: background var(--dur-mid);
}

.why-item:last-child { border-inline-end: none; }

.why-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--color-red);
  transform: scaleX(0);
  transition: transform var(--dur-mid);
}

.why-item:hover { background: #161616; }
.why-item:hover::after { transform: scaleX(1); }

.why-num {
  font-family: var(--font-brand);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.05);
  position: absolute;
  top: 0.9rem;
  inset-inline-end: 1rem;
  pointer-events: none;
  user-select: none;
  transition: color var(--dur-mid);
}

.why-item:hover .why-num { color: rgba(224,48,48,0.12); }

.why-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.04);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}

.why-item:hover .why-icon {
  color: var(--color-red);
  border-color: rgba(212,160,48,0.35);
  background: rgba(224,48,48,0.07);
}

.why-icon svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.why-title {
  font-family: var(--font-brand);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
}

.why-desc {
  font-size: 0.82rem;
  font-weight: 300;
  color: rgba(255,255,255,0.45);
  line-height: 1.65;
  max-width: none;
}

/* -----------------------------------------------------------------------------
   Brand Principles (Values Strip)
   ----------------------------------------------------------------------------- */
.values-strip {
  background: var(--color-black);
  padding-block: var(--space-lg);
  color: var(--color-white);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}

.value-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-md) var(--space-sm);
  border-inline-end: 1px solid rgba(255,255,255,0.08);
  gap: 0.4rem;
  transition: background var(--dur-fast);
}

.value-item:last-child { border-inline-end: none; }
.value-item:hover { background: rgba(255,255,255,0.04); }

.value-number {
  font-family: var(--font-brand);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-white);
}

.value-text {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* -----------------------------------------------------------------------------
   How We Make It — Process Section
   ----------------------------------------------------------------------------- */
.process-section {
  padding-block: var(--space-xl);
  background: var(--color-off-white);
  position: relative;
  overflow: hidden;
}

/* Subtle decorative stripe at top */
.process-section::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-red) 30%, var(--color-red) 70%, transparent);
  opacity: 0.35;
}

.process-section .container { position: relative; z-index: 1; }

.about-process-header {
  text-align: center;
  margin-bottom: 3rem;
}

.about-process-header .section-title {
  color: var(--color-black);
}

/* Steps grid */
.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  margin-top: 0;
  position: relative;
}

/* Remove old connecting line */
.process-steps::before { display: none; }

/* Each step — light card */
.process-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.25rem 1.75rem;
  gap: 0.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-red);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}

.process-step:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
  transform: translateY(-5px);
}

/* Giant decorative number */
.step-number {
  font-family: var(--font-brand);
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(224,48,48,0.08);
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  flex-shrink: 0;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.process-step:hover .step-number {
  color: rgba(224,48,48,0.18);
}

.step-title {
  font-family: var(--font-brand);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-black);
}

.step-desc {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-mid-gray);
  line-height: 1.65;
  max-width: none;
  margin: 0;
}

@media (max-width: 768px) {
  .process-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .process-steps { grid-template-columns: 1fr; }
  .process-step  { flex-direction: row; text-align: start; align-items: flex-start; }
  .step-number   { font-size: 2.5rem; min-width: 3rem; }
}

/* -----------------------------------------------------------------------------
   About / Story Section
   ----------------------------------------------------------------------------- */
.story-section {
  padding-block: var(--space-xl);
  background: var(--color-off-white);
  color: var(--color-black);
}

.story-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.story-image {
  position: relative;
}

.story-image img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  filter: grayscale(30%);
  box-shadow: var(--shadow-lg);
}

.story-image-label {
  position: absolute;
  bottom: var(--space-md);
  inset-inline-start: 0;
  background: var(--color-red);
  color: var(--color-white);
  padding: 0.5rem 1.25rem;
  font-family: var(--font-brand);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

.story-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.story-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
}

.story-headline {
  font-family: var(--font-brand);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 0.95;
  color: var(--color-black);
}

.story-text {
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-mid-gray);
  line-height: 1.8;
  max-width: 50ch;
}

.story-quote {
  font-family: var(--font-brand);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: normal;
  color: var(--color-red);
  border-inline-start: 3px solid var(--color-red);
  padding-inline-start: var(--space-sm);
  line-height: 1.3;
}

/* -----------------------------------------------------------------------------
   Instagram Section
   ----------------------------------------------------------------------------- */
.instagram-section {
  padding-block: var(--space-xl);
  background: var(--color-off-white);
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: var(--space-lg);
}

.instagram-item {
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.instagram-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.instagram-item:hover img { transform: scale(1.08); }

.instagram-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13,13,13,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-mid);
}

.instagram-item:hover .instagram-item-overlay { opacity: 1; }

.instagram-handle {
  text-align: center;
  margin-top: var(--space-md);
}

.instagram-handle a {
  font-family: var(--font-brand);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-black);
  border-bottom: 2px solid var(--color-black);
  padding-bottom: 2px;
  transition: color var(--dur-fast);
}

/* -----------------------------------------------------------------------------
   Dog Sub-Categories Section — Cinematic dark
   ----------------------------------------------------------------------------- */
.dog-cats-section {
  background: var(--color-white);
  position: relative;
  overflow: hidden;
}

/* 100% natural bites stamp — removed (2026-05-25) */
.dog-cats-section::before {
  display: none;
}

/* Atmospheric orbs */
.dog-cats-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.dog-cats-orb--1 {
  width: 700px;
  height: 700px;
  top: -250px;
  inset-inline-end: -120px;
  background: radial-gradient(circle, rgba(224,48,48,0.07) 0%, transparent 65%);
}
.dog-cats-orb--2 {
  width: 500px;
  height: 500px;
  bottom: -150px;
  inset-inline-start: 5%;
  background: radial-gradient(circle, rgba(0,0,0,0.03) 0%, transparent 65%);
}

.dog-cats-section .container { position: relative; z-index: 1; }

/* Section header */
.dog-cats-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  margin-bottom: var(--space-lg);
}

.dog-cats-eyebrow {
  font-family: var(--font-brand);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-red);
  margin: 0 0 0.5rem;
}

.dog-cats-title {
  font-family: var(--font-brand);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-black);
  text-align: start;
  margin: 0;
}

/* Ghost button for light sections */
.btn--ghost-light {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.4rem;
  border: 1.5px solid rgba(0,0,0,0.22);
  border-radius: 100px;
  font-family: var(--font-brand);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(0,0,0,0.65);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn--ghost-light:hover {
  border-color: rgba(0,0,0,0.55);
  color: var(--color-black);
  background: rgba(0,0,0,0.05);
}

.dog-cats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

.dog-cat-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  min-height: 160px;
  display: block;
  text-decoration: none;
  background: #1a1a1a;
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.4s ease;
  min-width: 0;
}

.dog-cat-card:hover {
  transform: scale(1.03) translateY(-6px);
  box-shadow: 0 28px 60px rgba(0,0,0,0.55);
  z-index: 2;
}

.dog-cat-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dog-cat-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}

.dog-cat-card:hover .dog-cat-bg img {
  transform: scale(1.08);
}

.dog-cat-emoji {
  display: none;
  font-size: 3.5rem;
  line-height: 1;
  opacity: 0.6;
}

.dog-cat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0)     30%,
    rgba(0,0,0,0.25)  55%,
    rgba(0,0,0,0.88) 100%
  );
  transition: opacity 0.35s ease;
}

.dog-cat-card:hover .dog-cat-overlay {
  opacity: 1.05; /* slight increase */
}

/* Accent color bar at bottom on hover */
.dog-cat-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  background: var(--card-color, var(--color-red));
  z-index: 3;
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}
.dog-cat-card:hover::after { transform: scaleX(1); }

.dog-cat-content {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  padding: 1.4rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  z-index: 2;
}

.dog-cat-count { display: none; }

.dog-cat-name {
  font-family: var(--font-brand);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

/* "לצפייה →" CTA line — slides up on hover */
.dog-cat-cta-line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-brand);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--card-color, var(--color-red));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.dog-cat-cta-line svg { transform: scaleX(-1); }
.dog-cat-card:hover .dog-cat-cta-line {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 1024px) {
  .dog-cats-grid { grid-template-columns: repeat(5, 1fr); gap: 0.55rem; }
  .dog-cat-card  { min-height: 160px; }
  .dog-cat-name  { font-size: 1rem; }
}


@media (max-width: 640px) {
  .dog-cats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
  }
  /* Last card: full width, shorter aspect ratio so text fits */
  .dog-cats-grid .dog-cat-card:nth-child(5) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 6;
    min-height: 90px;
  }
  .dog-cat-name  { font-size: 1.05rem; font-weight: 700; }
  .dog-cats-title { font-size: clamp(1.8rem, 8vw, 2.8rem); }
}

/* -----------------------------------------------------------------------------
   Contact Page
   ----------------------------------------------------------------------------- */

/* ── Hero ── */
.contact-hero {
  position: relative;
  background: #0a0a0a;
  min-height: 52vh;
  display: flex;
  align-items: center;
  padding-top: 80px;
  overflow: hidden;
}

/* 100nb stamp — contact hero corner */
.contact-hero::after {
  content: '';
  position: absolute;
  bottom: 1.5rem;
  inset-inline-end: 3rem;
  width: 280px;
  height: 100px;
  background: url('/wp-content/uploads/2026/04/100nb.png') no-repeat center / contain;
  opacity: 0.15;
  transform: rotate(4deg);
  pointer-events: none;
}

.contact-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(224,48,48,0.13) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 70%, rgba(255,255,255,0.03) 0%, transparent 50%);
  pointer-events: none;
}

.contact-hero-inner {
  position: relative;
  padding-block: var(--space-xl);
  text-align: center;
  width: 100%;
}

.contact-hero-eyebrow {
  font-family: var(--font-brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-red);
  margin: 0 0 1rem;
  text-align: center;
  display: block;
}

.contact-hero-title {
  font-family: var(--font-brand);
  font-size: clamp(3rem, 10vw, 7.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0;
  white-space: nowrap;
}

.contact-hero-title em {
  font-style: normal;
  color: var(--color-red);
}


/* ── Body layout ── */
.contact-body {
  background: var(--color-off-white);
}

.contact-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* ── Info sidebar ── */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.contact-info-title {
  font-family: var(--font-brand);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-black);
  margin: 0 0 0.5rem;
}

.contact-card {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  background: #fff;
  border: 1px solid #e8e6e1;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

a.contact-card:hover {
  border-color: var(--color-red);
  box-shadow: 0 4px 20px rgba(224,48,48,0.1);
  transform: translateY(-2px);
}

.contact-card--wa {
  border-color: #d4edda;
  background: #f0faf2;
}
.contact-card--wa:hover {
  border-color: #25d366 !important;
  box-shadow: 0 4px 20px rgba(37,211,102,0.12) !important;
}
.contact-card--wa .contact-card-icon { color: #25d366; }

.contact-card--plain { cursor: default; }
.contact-card--plain:hover { transform: none; box-shadow: none; border-color: #e8e6e1; }

.contact-card-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(224,48,48,0.07);
  border-radius: 10px;
  color: var(--color-red);
  margin-top: 1px;
}
.contact-card--wa .contact-card-icon { background: rgba(37,211,102,0.1); }

.contact-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.contact-card-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #999;
}

.contact-card-value {
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-black);
}

.contact-card-action {
  font-size: 0.75rem;
  color: #25d366;
  font-weight: 600;
  margin-top: 0.1rem;
}

.contact-social {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e8e6e1;
}

.contact-social-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 0.75rem;
}

.contact-social-links {
  display: flex;
  gap: 0.5rem;
}

.contact-social-links a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #e8e6e1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.contact-social-links a:hover {
  border-color: var(--color-red);
  color: var(--color-red);
  background: rgba(224,48,48,0.05);
}

/* ── Form ── */
.contact-form-wrap {
  background: #fff;
  border: 1px solid #e8e6e1;
  border-radius: 16px;
  padding: var(--space-lg) var(--space-xl);
}

.contact-form-title {
  font-family: var(--font-brand);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-black);
  margin: 0 0 0.4rem;
}

.contact-form-sub {
  font-size: 0.88rem;
  color: #777;
  margin: 0 0 1.75rem;
  line-height: 1.5;
}

.cf-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0;
}

.cf-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #444;
}
.cf-label span { color: var(--color-red); }

.cf-input {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--color-off-white);
  border: 1.5px solid #e2e0dc;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.93rem;
  color: var(--color-black);
  outline: none;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  box-sizing: border-box;
}

.cf-input::placeholder { color: #bbb; }

.cf-input:focus {
  border-color: var(--color-red);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(224,48,48,0.08);
}

.cf-textarea {
  resize: vertical;
  min-height: 130px;
}

.cf-footer {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.cf-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.cf-submit svg { transform: scaleX(-1); }

.cf-privacy {
  font-size: 0.75rem;
  color: #aaa;
  margin: 0;
  line-height: 1.4;
}

.cf-message-box {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}
.cf-message-box--ok  { background: #f0faf2; color: #1a7f3c; border: 1px solid #c3e6cb; }
.cf-message-box--err { background: #fff5f5; color: #c82333; border: 1px solid #f5c6cb; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .contact-info { order: 2; }
  .contact-form-wrap { order: 1; }
}

@media (max-width: 600px) {
  .contact-hero-title { font-size: clamp(3.5rem, 14vw, 5rem); }
  .cf-row { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: var(--space-md); }
}

/* -----------------------------------------------------------------------------
   Exit-Intent Popup
   ----------------------------------------------------------------------------- */
.exit-popup {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.exit-popup[hidden] { display: none; }

.exit-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}

.exit-popup-box {
  position: relative;
  background: var(--color-white);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,0.25);
  animation: popupIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

@keyframes popupIn {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.exit-popup-close {
  position: absolute;
  top: 0.85rem;
  inset-inline-end: 0.85rem;
  width: 32px; height: 32px;
  border: none; background: var(--color-off-white);
  border-radius: 50%; font-size: 1.2rem; cursor: pointer;
  color: var(--color-mid-gray); line-height: 1;
  transition: background var(--dur-fast);
}
.exit-popup-close:hover { background: var(--color-light-gray); }

.exit-popup-emoji { font-size: 3rem; line-height: 1; margin-bottom: 0.75rem; }

.exit-popup-title {
  font-family: var(--font-brand);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-black);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.exit-popup-sub {
  font-size: 0.9rem;
  color: var(--color-mid-gray);
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.exit-popup-form { display: flex; flex-direction: column; gap: 0.75rem; }

.exit-popup-input {
  padding: 0.85rem 1.1rem;
  border: 1.5px solid var(--color-light-gray);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-align: center;
  outline: none;
  transition: border-color var(--dur-fast);
}
.exit-popup-input:focus { border-color: var(--color-black); }

.exit-popup-ok {
  color: #7c3aed;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0.5rem 0 0;
}
.exit-popup-ok[hidden] { display: none; }

.exit-popup-skip {
  display: block;
  margin-top: 1rem;
  background: none;
  border: none;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Social Proof Toast
   ----------------------------------------------------------------------------- */
.sp-toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  inset-inline-start: 1.25rem;
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  border: 1px solid var(--color-light-gray);
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 280px;
  z-index: 9000;
  animation: toastIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

.sp-toast[hidden] { display: none; }

.sp-toast--out {
  animation: toastOut 0.42s ease forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-16px); }
}

/* Exit popup email error state */
.exit-popup-input.input-error {
  border-color: var(--color-red) !important;
  animation: shake 0.35s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-6px); }
  75%       { transform: translateX(6px); }
}

.sp-toast-img {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--color-off-white);
  flex-shrink: 0;
  overflow: hidden;
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
}

.sp-toast-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

.sp-toast-text strong {
  font-weight: 700;
  color: var(--color-black);
}

.sp-toast-text span {
  color: var(--color-mid-gray);
}

/* -----------------------------------------------------------------------------
   About Page — new sections
   ----------------------------------------------------------------------------- */

/* Brand Intro */
.about-intro-section { background: var(--color-off-white); }

.about-intro-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.about-intro-title {
  font-family: var(--font-brand);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--color-black);
  margin: 0.5rem 0 1rem;
  letter-spacing: -0.02em;
}

.about-intro-text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-mid-gray);
  max-width: 60ch;
  margin: 0 auto;
}

/* Values section header */
.about-values-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.about-values-title {
  font-family: var(--font-brand);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--color-white);
  margin: 0.4rem 0 0.6rem;
  letter-spacing: -0.02em;
}

.about-values-subtitle {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  max-width: 50ch;
  margin: 0 auto;
  line-height: 1.6;
}

/* Product types section */
.about-products-section { background: var(--color-off-white); }

.about-products-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.about-products-title {
  font-family: var(--font-brand);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--color-black);
  margin: 0.4rem 0 0;
  letter-spacing: -0.02em;
}

.about-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.about-product-card {
  background: var(--color-white);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--color-light-gray);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  text-align: center;
}

.about-product-card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}

.about-product-icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.85rem;
}

.about-product-title {
  font-family: var(--font-brand);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}

.about-product-desc {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--color-mid-gray);
  margin-bottom: 1.25rem;
}

.about-product-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-red);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: gap 0.2s ease;
}

.about-product-link:hover { gap: 0.65rem; }

/* Process section header — centered */
.about-process-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

/* CTA emoji */
.about-cta-emoji {
  font-size: 3rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.75rem;
}

/* Responsive — about new sections */
@media (max-width: 900px) {
  .about-products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .about-products-grid { grid-template-columns: 1fr; }
  .about-product-card { text-align: start; }
  .about-product-icon { margin-bottom: 0.5rem; }
}

/* About Detail Section — dark premium layout */
.about-detail-section {
  background: var(--color-black);
  padding-block: 5rem;
  position: relative;
  overflow: hidden;
}

/* Floating orb 1 — red */
.about-detail-section::before {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,48,0.55) 0%, transparent 70%);
  filter: blur(72px);
  top: -120px;
  inset-inline-end: 8%;
  animation: orbDrift1 16s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Floating orb 2 — deep violet */
.about-detail-section::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100,60,180,0.45) 0%, transparent 70%);
  filter: blur(80px);
  bottom: -80px;
  inset-inline-start: 5%;
  animation: orbDrift2 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes orbDrift1 {
  0%,100% { transform: translate(0, 0) scale(1);        }
  30%      { transform: translate(-50px, 40px) scale(1.08); }
  65%      { transform: translate(30px, -30px) scale(0.94); }
}

@keyframes orbDrift2 {
  0%,100% { transform: translate(0, 0) scale(1);       }
  40%     { transform: translate(60px, -50px) scale(1.12); }
  70%     { transform: translate(-40px, 30px) scale(0.9);  }
}

.about-detail-section .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about-detail-header {
  text-align: center;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-detail-title {
  font-family: var(--font-brand);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.about-detail-lead {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.02em;
  margin: 0.75rem 0 0;
  padding: 0.45rem 1.1rem;
  background: rgba(224,48,48,0.15);
  border: 1px solid rgba(212,160,48,0.35);
  border-radius: 100px;
}

.about-detail-intro {
  max-width: 620px;
  margin: 0 auto 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: center;
}

.about-detail-intro p {
  font-size: 0.92rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.55);
  margin: 0;
}

/* Benefit cards grid */
.about-benefits-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.ab-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 2rem 1.5rem 1.75rem;
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ab-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-5px);
}

.ab-card-icon {
  font-size: 2.2rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.25rem;
}

.ab-card-title {
  font-family: var(--font-brand);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: -0.01em;
}

.ab-card-desc {
  font-size: 0.83rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

@media (max-width: 1024px) {
  .about-benefits-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .about-detail-section { padding-block: 3.5rem; }
  .about-benefits-cards { grid-template-columns: 1fr; gap: 0.85rem; }
  .ab-card { padding: 1.5rem 1.25rem; }
}

/* ── Archive Sub-categories Row ────────────────────────────────────── */
.archive-subcats {
  padding: 1.5rem 0 0;
}

.archive-subcats-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.25rem;
}

.archive-subcats-grid::-webkit-scrollbar { display: none; }

.archive-subcat-card {
  position: relative;
  flex: 1;
  min-width: 110px;
  max-width: 200px;
  height: 160px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: var(--color-dark-gray);
}

.archive-subcat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.22);
}

/* Accent top strip */
.archive-subcat-accent {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  background: var(--cat-accent, var(--color-red));
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.archive-subcat-card:hover .archive-subcat-accent { opacity: 1; }

/* Background image */
.archive-subcat-bg {
  position: absolute;
  inset: 0;
}

.archive-subcat-bg img,
.archive-subcat-bg-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}

.archive-subcat-card:hover .archive-subcat-bg img {
  transform: scale(1.07);
}

/* Dark gradient overlay */
.archive-subcat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.35) 55%,
    rgba(0,0,0,0.1) 100%
  );
  transition: opacity 0.3s ease;
}

.archive-subcat-card:hover .archive-subcat-overlay { opacity: 0.9; }

/* Content */
.archive-subcat-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.archive-subcat-emoji {
  display: none;
}

.archive-subcat-name {
  font-family: var(--font-brand);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: 0.01em;
  line-height: 1.25;
  display: block;
}

.archive-subcat-arrow {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.5);
  margin-top: 0.2rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

.archive-subcat-card:hover .archive-subcat-arrow {
  color: rgba(255,255,255,0.9);
  transform: translateX(-3px);
}

@media (max-width: 600px) {
  .archive-subcats { padding: 1rem 0 0; }
  .archive-subcat-card { min-width: 100px; height: 140px; }
  .archive-subcat-name { font-size: 0.9rem; }
}


/* Center all headings on about page */
#about-page .section-subtitle,
#about-page .about-story-headline,
#about-page .section-title,
#about-page .about-cert-title,
#about-page .step-title {
  text-align: center;
}


/* -----------------------------------------------------------------------------
   About Page — hero + story
   ----------------------------------------------------------------------------- */
.about-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  background: var(--color-black);
  overflow: hidden;
  padding-top: 76px;
}

.about-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(224,48,48,0.12) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.03) 0%, transparent 50%);
}

.about-hero-inner {
  position: relative;
  padding-block: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about-hero-eyebrow {
  font-family: var(--font-brand);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: 1rem;
  text-align: center;
  width: 100%;
}

.about-hero-title {
  font-family: var(--font-brand);
  font-size: clamp(3.5rem, 10vw, 7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-white);
  margin-bottom: 1.5rem;
  white-space: nowrap;
}

.about-hero-title em {
  font-style: normal;
  color: var(--color-red);
}

.about-hero-quote {
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.05em;
}

.about-hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
}

/* Story section */
.about-story { background: var(--color-white); }

.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.about-story-img-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--color-off-white);
}

.about-story-img-frame.no-img {
  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-story-img-frame.no-img::after {
  content: '🐕';
  font-size: 5rem;
  opacity: 0.3;
}

.about-story-img-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.about-story-badge {
  position: absolute;
  bottom: 1rem;
  inset-inline-start: 1rem;
  background: rgba(0,0,0,0.8);
  color: var(--color-white);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.about-story-headline {
  font-family: var(--font-brand);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-black);
  margin: 0.5rem 0 1.25rem;
}

.about-story-text p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #444;
  margin-bottom: 1rem;
}

.about-story-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-light-gray);
}

.about-stat-num {
  display: block;
  font-family: var(--font-brand);
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-black);
  line-height: 1;
}

.about-stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-mid-gray);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Values grid */
.about-values-section {
  background: #0e0e0e;
  padding-block: var(--space-xl);
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about-value-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  padding: 2rem 1.75rem;
  background: #0e0e0e;
  transition: background var(--dur-mid);
}

.about-value-card:hover { background: #181818; }

.about-value-icon { font-size: 2rem; line-height: 1; }

.about-value-title {
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
}

.about-value-desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.65;
  margin: 0;
}

/* Certifications */
.about-certs { background: var(--color-white); }

.about-certs-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.about-cert-item {
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid var(--color-light-gray);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--dur-mid), transform var(--dur-mid);
}

.about-cert-item:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.about-cert-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }

.about-cert-title {
  font-family: var(--font-brand);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 0.5rem;
}

.about-cert-desc {
  font-size: 0.82rem;
  color: var(--color-mid-gray);
  line-height: 1.55;
  margin: 0;
}

/* CTA section */
.about-cta-section {
  background: var(--color-black);
  padding-block: var(--space-lg);
}

.about-cta-inner {
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
}

.about-cta-title {
  font-family: var(--font-brand);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: 0.75rem;
}

.about-cta-sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 2rem;
}

.about-cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* About page responsive */
@media (max-width: 900px) {
  .about-story-grid { grid-template-columns: 1fr; }
  .about-story-visual { order: -1 !important; }
  .about-story-img-frame { aspect-ratio: 16/9; max-height: 360px; }
  .about-values-grid { grid-template-columns: repeat(2, 1fr); }
  .about-certs-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .about-hero-title { font-size: clamp(2.4rem, 12vw, 4rem); white-space: normal; }
  .about-values-grid { grid-template-columns: 1fr; }
  .about-certs-inner { grid-template-columns: 1fr 1fr; }
  .about-story-stats { gap: 1.25rem; }
  .about-cta-btns { flex-direction: column; align-items: center; }
  /* Instagram button: compact, single line, not full-width */
  .about-cta-btns .btn {
    width: auto;
    max-width: none;
    white-space: nowrap;
    font-size: 0.85rem;
    padding-inline: 1.4rem;
    justify-content: center;
  }
}

/* -----------------------------------------------------------------------------
   FAQ Section
   ----------------------------------------------------------------------------- */
.faq-section { background: var(--color-white); }
.faq-section--home { background: var(--color-off-white); }
.faq-section--about {
  background: var(--color-white);
  border-top: none;
}

/* About FAQ — 2-column layout on desktop */
.faq-section--about .container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 4rem;
  align-items: start;
}

.faq-section--about .faq-header {
  text-align: start;
  margin-bottom: 0;
  position: sticky;
  top: 6rem;
}

/* Decorative red pill above title */
.faq-section--about .faq-header::before {
  content: 'שאלות ותשובות';
  display: inline-block;
  font-family: var(--font-brand);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-red);
  background: rgba(224,48,48,0.08);
  padding: 0.3em 0.9em;
  border-radius: 100px;
  margin-bottom: 1rem;
}

.faq-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.faq-title {
  font-family: var(--font-brand);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--color-black);
  margin: 0.4rem 0 0;
  letter-spacing: -0.02em;
}

/* About FAQ title smaller — it's a sidebar */
.faq-section--about .faq-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.25;
}

/* Optional tagline below title */
.faq-section--about .faq-header::after {
  content: 'כל מה שרציתם לדעת על החטיפים שלנו';
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-mid-gray);
  margin-top: 0.75rem;
  line-height: 1.6;
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-section--about .faq-list {
  max-width: none;
  margin: 0;
}

/* details / summary reset */
.faq-item {
  border-bottom: 1px solid var(--color-light-gray);
}

.faq-item:first-child {
  border-top: 1px solid var(--color-light-gray);
}

.faq-item summary {
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  cursor: pointer;
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-black);
  user-select: none;
  transition: color var(--dur-fast);
}

.faq-question:hover { color: var(--color-red); }

/* Plus / minus icon */
.faq-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-light-gray);
  position: relative;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform 0.3s ease;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--color-black);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  top: 50%; left: 50%;
}

/* horizontal bar */
.faq-icon::before {
  width: 10px; height: 1.5px;
  transform: translate(-50%, -50%);
}

/* vertical bar */
.faq-icon::after {
  width: 1.5px; height: 10px;
  transform: translate(-50%, -50%);
}

/* open state — red icon + left accent */
.faq-item[open] {
  border-inline-start: 3px solid var(--color-red);
  padding-inline-start: 1rem;
}

.faq-item[open] .faq-icon {
  background: var(--color-red);
  border-color: var(--color-red);
  transform: rotate(45deg);
}

.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after {
  background: var(--color-white);
}

.faq-item[open] .faq-question { color: var(--color-red); }

.faq-answer {
  padding: 0 0 1.25rem;
  animation: faqOpen 0.28s ease;
}

.faq-answer p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--color-mid-gray);
  margin: 0;
  max-width: 65ch;
}

/* Responsive: collapse to single column */
@media (max-width: 860px) {
  .faq-section--about .container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .faq-section--about .faq-header {
    position: static;
    text-align: center;
  }
  .faq-section--about .faq-header::before {
    display: none;
  }
  .faq-section--about .faq-title {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
  }
}

@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* faq-footer kept for legacy (non-about pages) */
.faq-footer {
  text-align: center;
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.faq-footer p {
  font-size: 0.9rem;
  color: var(--color-mid-gray);
}

/* FAQ header CTA (about page — sits below title in sticky sidebar) */
.faq-header-cta {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.faq-header-cta p {
  font-size: 0.85rem;
  color: var(--color-mid-gray);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 860px) {
  .faq-header-cta {
    align-items: center;
  }
}

/* -----------------------------------------------------------------------------
   404 Page
   ----------------------------------------------------------------------------- */

.error-404-page {
  position: relative;
  min-height: 100vh;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 76px; /* fixed header offset */
}

/* Ambient orbs */
.e404-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.e404-orb--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(224,48,48,0.32) 0%, transparent 70%);
  filter: blur(100px);
  top: -80px;
  inset-inline-end: -120px;
  animation: orbDrift1 18s ease-in-out infinite;
}

.e404-orb--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(224,48,48,0.18) 0%, transparent 70%);
  filter: blur(80px);
  bottom: -60px;
  inset-inline-start: -80px;
  animation: orbDrift2 24s ease-in-out infinite;
}

/* Giant watermark */
.e404-watermark {
  position: absolute;
  font-family: var(--font-brand);
  font-size: clamp(18rem, 35vw, 32rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,0.028);
  user-select: none;
  pointer-events: none;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

/* Content */
.e404-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  max-width: 560px;
  width: 100%;
}

/* Paw icon */
.e404-icon {
  width: 72px;
  height: 72px;
  color: var(--color-red);
  margin-bottom: 1.5rem;
  opacity: 0.9;
  animation: e404Float 3s ease-in-out infinite;
}

.e404-icon svg {
  width: 100%;
  height: 100%;
}

@keyframes e404Float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* Eyebrow */
.e404-eyebrow {
  font-family: var(--font-brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-red);
  margin: 0 0 0.75rem;
}

/* Headline */
.e404-title {
  font-family: var(--font-brand);
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  font-weight: 900;
  color: var(--color-white);
  margin: 0 0 1.25rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* Description */
.e404-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  line-height: 1.75;
  margin: 0 0 2.25rem;
}

/* CTA row */
.e404-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 3rem;
}

/* Search */
.e404-search {
  width: 100%;
  max-width: 420px;
}

.e404-search-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
  margin: 0 0 0.6rem;
  letter-spacing: 0.04em;
}

/* Style the search form inside 404 */
.error-404-page .search-form {
  display: flex;
  gap: 0;
  border-radius: 100px;
  overflow: hidden;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  transition: border-color 0.2s ease;
}

.error-404-page .search-form:focus-within {
  border-color: rgba(255,255,255,0.3);
}

.error-404-page .search-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 0.7rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-white);
  direction: rtl;
}

.error-404-page .search-field::placeholder {
  color: rgba(255,255,255,0.3);
}

.error-404-page .search-submit {
  background: var(--color-red);
  border: none;
  color: var(--color-white);
  padding: 0.7rem 1.25rem;
  cursor: pointer;
  font-family: var(--font-brand);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.18s ease;
  flex-shrink: 0;
}

.error-404-page .search-submit:hover {
  background: #c8a000;
}

@media (max-width: 480px) {
  .e404-icon { width: 56px; height: 56px; }
  .e404-actions { flex-direction: column; width: 100%; }
  .e404-actions .btn { width: 100%; justify-content: center; }
}

/* -----------------------------------------------------------------------------
   Legal Pages (Terms / Privacy / Accessibility)
   ----------------------------------------------------------------------------- */
.legal-page {
  background: var(--color-white);
}

/* ── Hero ── */
.legal-hero {
  background: var(--color-black);
  border-bottom: 3px solid var(--color-red);
  padding-block: var(--space-xl) var(--space-lg);
}

.legal-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.legal-breadcrumb a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.18s;
}

.legal-breadcrumb a:hover { color: var(--color-red); }

.legal-eyebrow {
  font-family: var(--font-brand);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-red);
  margin: 0 0 0.75rem;
}

.legal-title {
  font-family: var(--font-brand);
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-white);
  margin-bottom: 1.25rem;
}

.legal-updated {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.05em;
}

/* ── Content wrap ── */
.legal-content-wrap {
  padding-block: var(--space-2xl);
}

.legal-content {
  font-size: 0.95rem;
  line-height: 1.9;
  color: #3a3a3a;
}

.legal-content h2 {
  font-family: var(--font-brand);
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--color-black);
  margin-top: var(--space-lg);
  margin-bottom: 0.75rem;
  padding-inline-start: 0.9rem;
  border-inline-start: 3px solid var(--color-red);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.legal-content h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-black);
  margin-top: var(--space-md);
  margin-bottom: 0.45rem;
}

.legal-content p { margin-bottom: 0.9rem; }

.legal-content ul,
.legal-content ol {
  padding-inline-start: 1.5rem;
  margin-bottom: var(--space-sm);
}

.legal-content li { margin-bottom: 0.45rem; }

.legal-content a {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.18s;
}

.legal-content a:hover { color: var(--color-red); }

/* -----------------------------------------------------------------------------
   Footer — Redesigned
   ----------------------------------------------------------------------------- */
.site-footer {
  background: #080808;
  color: var(--color-white);
}

/* ── Brand Statement ── */
.footer-statement {
  padding: 2.8rem var(--space-lg);
  text-align: center;
  overflow: hidden;
  position: relative;
}

/* 100nb stamp behind "JUST MEAT. NO BULLSHIT." */
.footer-statement::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/wp-content/uploads/2026/04/100nb.png') no-repeat center / 380px auto;
  opacity: 0.12;
  pointer-events: none;
}

/*
 * Footer statement — slow red scan
 * Narrow red-white beam slides across dim outlined text.
 * 11-second cycle feels cinematic without being distracting.
 */
@keyframes fsRedScan {
  0%   { background-position: -40% center; }
  100% { background-position: 140% center; }
}

.footer-statement > span {
  font-family: var(--font-brand);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  white-space: nowrap;
  user-select: none;
  display: block;

  /*
   * Gradient layers (left → right):
   *  — very dim white base (the "outline" feel)
   *  — a tight red > bright white > red spotlight that scans across
   */
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.09) 0%,
    rgba(255,255,255,0.09) 43%,
    #c41e1e                48%,
    #ffffff                50%,
    #c41e1e                52%,
    rgba(255,255,255,0.09) 57%,
    rgba(255,255,255,0.09) 100%
  );
  background-size: 280% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: fsRedScan 6s linear infinite;
  direction: ltr;
  unicode-bidi: bidi-override;
}

/* ── Footer-wide font override → Noto Sans Hebrew
   Excludes .footer-nl-title (brand font stays) ── */
.site-footer .footer-links a,
.site-footer .footer-links span,
.site-footer .footer-contact-item,
.site-footer .footer-tagline,
.site-footer .footer-copy,
.site-footer .footer-credit-link,
.site-footer .footer-nl-sub,
.site-footer .footer-nl-btn,
.site-footer .footer-nl-input,
.site-footer .footer-nl-msg,
.site-footer .footer-permit {
  font-family: var(--font-body);
}

/* ── Red Accent Line ── */
.footer-accent-line {
  height: 2px;
  background: var(--accent, #f0c020);
  width: 100%;
}

/* ── Newsletter Strip ── */
.footer-newsletter {
  background: #111;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding-block: 1.5rem;
}

.footer-nl-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-nl-text {
  flex: 1;
  min-width: 200px;
}

.footer-nl-title {
  font-family: var(--font-brand);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}

.footer-nl-sub {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
}

.footer-nl-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

.footer-nl-input {
  width: 240px;
  padding: 0.75rem 1.1rem;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-white);
  outline: none;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

.footer-nl-input::placeholder { color: rgba(255,255,255,0.35); }

.footer-nl-input:focus {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.1);
}

.footer-nl-btn {
  padding: 0.75rem 1.4rem;
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-brand);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
  white-space: nowrap;
}

.footer-nl-btn:hover { background: #c52020; transform: translateY(-1px); }
.footer-nl-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.footer-nl-msg {
  font-size: 0.85rem;
  margin: 0;
  padding: 0.5rem 0;
}

.footer-nl-msg--ok  { color: #4ade80; }
.footer-nl-msg--err { color: #ff8080; }

@media (max-width: 640px) {
  .footer-nl-inner { flex-direction: column; align-items: stretch; }
  .footer-nl-form  { flex-direction: column; }
  .footer-nl-input { width: 100%; }
  .footer-nl-btn   { width: 100%; }
}

/* ── Main Columns Grid ── */
.footer-main {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.1fr;
  gap: var(--space-xl);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Col 1 — Brand */
.footer-brand { display: flex; flex-direction: column; gap: 0; }

.footer-logo { margin-bottom: var(--space-sm); }
.footer-logo img { height: 56px; width: auto; }

/* SVG logo from WP custom logo */
.footer-logo .custom-logo { height: 56px; width: auto; }

.footer-tagline {
  font-size: 0.83rem;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  max-width: 28ch;
  margin-bottom: var(--space-md);
}

/* Social icons */
.footer-social {
  display: flex;
  gap: 0.6rem;
}

.social-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.social-link:hover {
  background: var(--accent, #f0c020);
  border-color: var(--accent, #f0c020);
  color: #fff;
  transform: translateY(-2px);
}

/* Cols 2-4 — Nav / Info / Contact */
.footer-col { display: flex; flex-direction: column; }

.footer-col-title {
  font-family: var(--font-brand);
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-links a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.18s, transform 0.18s;
}

.footer-links a:hover {
  color: #fff;
  transform: translateX(-3px); /* RTL: slide right on hover */
}

.footer-links span { font-size: 0.875rem; color: rgba(255,255,255,0.6); }

/* Contact items */
.footer-contact-item {
  display: flex !important;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  transition: color 0.18s, transform 0.18s;
}
a.footer-contact-item:hover {
  color: #fff;
  transform: translateX(-3px);
}
.footer-contact-item svg { flex-shrink: 0; opacity: 0.5; }
a.footer-contact-item:hover svg { opacity: 1; }

.footer-contact-item--plain { cursor: default; }
.footer-contact-item--plain:hover { transform: none; color: rgba(255,255,255,0.72); }

.footer-permit {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.2) !important;
  margin-top: 0.4rem;
}

/* ── Bottom Bar ── */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.1rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.18);
  gap: var(--space-md);
}

.footer-copy { color: rgba(255,255,255,0.75); }

.footer-credits {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255,255,255,0.6);
}

.footer-credits-sep { opacity: 0.4; }

.footer-credit-link {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.18s;
}
.footer-credit-link:hover { color: #fff; }

.footer-cards {
  display: flex;
  align-items: center;
}

.footer-cards img {
  height: 24px;
  width: auto;
  opacity: 1;
  filter: brightness(1.15);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}

@media (max-width: 600px) {
  .footer-statement > span { font-size: clamp(1.4rem, 8vw, 2.5rem); }

  /* 2-col grid: brand full-width top, categories+info side-by-side, contact full-width */
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm) var(--space-md);
  }

  .footer-brand {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
  }
  .footer-brand .footer-tagline { text-align: center; }
  .footer-brand .footer-social   { justify-content: center; }

  /* Contact column spans both cols */
  .footer-col:last-child { grid-column: 1 / -1; }

  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    padding-block: var(--space-md);
  }
}

/* -----------------------------------------------------------------------------
   WooCommerce Overrides
   ----------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  font-family: var(--font-body);
  padding: var(--space-sm) var(--space-md);
  border-inline-start: 3px solid var(--color-black);
  background: var(--color-off-white);
}

.woocommerce-error { border-color: var(--color-red); }

/* Cart widget */
.widget_shopping_cart_content {
  font-family: var(--font-body);
}

/* Single product */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 2px solid var(--color-black);
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0;
  transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--color-dark-gray);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-sm);
}

/* Price */
.woocommerce .price {
  font-family: var(--font-brand);
  font-weight: 900;
  color: var(--color-black);
}

.woocommerce del { color: var(--color-mid-gray); }
.woocommerce ins { text-decoration: none; }

/* Sale badge */
.woocommerce span.onsale {
  background: var(--color-red);
  border-radius: 0;
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* -----------------------------------------------------------------------------
   Animations (GSAP targets)
   ----------------------------------------------------------------------------- */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .why-item { border-bottom: 1px solid rgba(255,255,255,0.07); }
  .values-grid { grid-template-columns: repeat(3, 1fr); }
  .process-steps { grid-template-columns: repeat(3, 1fr); }
  .process-steps::before { display: none; }
  /* footer-main responsive handled in footer block above */
  .instagram-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Hide mega panel on small screens */
@media (max-width: 900px) {
  .mega-panel { display: none !important; }
}

@media (max-width: 900px) {
  .hero-title { font-size: clamp(2.2rem, 8vw, 3.4rem); }
  .hero-scroll { display: none; }
}

@media (max-width: 768px) {
  :root {
    --space-xl: 5rem;
    --space-lg: 3rem;
  }

  /* Hide desktop nav, show hamburger */
  .nav-desktop { display: none; }
  .nav-toggle  { display: flex; }

  .main-cats-grid { grid-template-columns: 1fr 1fr; }
  .sub-cats-grid { grid-template-columns: repeat(3, 1fr); }

  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-item { border-inline-end: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); }
  .why-item:nth-child(even) { border-inline-end: none; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: 1fr 1fr; }

  .story-inner { grid-template-columns: 1fr; gap: var(--space-lg); }

  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .main-cats-grid { grid-template-columns: 1fr; }
  .sub-cats-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .why-item { border-inline-end: none !important; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .value-item { border-inline-end: none; }
  .value-item:nth-child(odd) { border-inline-end: 1px solid rgba(255,255,255,0.08); }
  .process-steps { grid-template-columns: 1fr; }
  .instagram-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-cta { flex-direction: row; flex-wrap: nowrap; justify-content: center; }
  .hero-cta .btn { flex: 0 1 auto; padding-inline: 1.1rem; font-size: 0.82rem; white-space: nowrap; }
  .cart-flyout-panel { width: 100%; }
  .search-overlay { padding-top: 10vh; }
}

/* -----------------------------------------------------------------------------
   Accessibility
   ----------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* =============================================================================
   SEARCH RESULTS PAGE
   ============================================================================= */

.search-results-page {
  background: var(--color-white);
  min-height: 70vh;
}

/* ── Header ── */
.search-results-header {
  padding-top: calc(76px + var(--space-lg));
  padding-bottom: var(--space-lg);
  background: #fafafa;
  border-bottom: 1px solid #efefef;
}

.search-results-header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.search-results-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
  margin-bottom: 0.4rem;
}

.search-results-term {
  font-family: var(--font-brand);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: var(--color-black);
  line-height: 1.1;
  margin-bottom: 0.4rem;
}

.search-results-count {
  font-size: 0.82rem;
  color: var(--color-mid-gray);
}

/* ── Search-again form ── */
.search-results-form-wrap {
  flex-shrink: 0;
}

.search-results-form {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid #e5e5e5;
  border-radius: 50px;
  overflow: hidden;
  width: 280px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-results-form:focus-within {
  border-color: var(--color-black);
  box-shadow: 0 0 0 3px rgba(13,13,13,0.08);
}

.search-results-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.65rem 1.1rem;
  font-size: 0.88rem;
  background: transparent;
  color: var(--color-black);
  font-family: var(--font-body);
}

.search-results-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--color-black);
  border: none;
  cursor: pointer;
  color: #fff;
  flex-shrink: 0;
  transition: background 0.2s;
}
.search-results-submit:hover { background: #333; }

/* ── Results body ── */
.search-results-body {
  padding-block: var(--space-xl);
}

/* Use same grid as archive */
.search-products-grid {
  margin-bottom: var(--space-xl);
}

/* ── No Results ── */
.search-no-results {
  text-align: center;
  padding-block: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.search-no-results-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.search-no-results-title {
  font-family: var(--font-brand);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 900;
  color: var(--color-black);
}

.search-no-results-hint {
  font-size: 0.9rem;
  color: var(--color-mid-gray);
  max-width: 42ch;
}

.search-suggestions {
  margin-top: var(--space-lg);
  width: 100%;
}

.search-suggestions-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
  margin-bottom: var(--space-md);
  text-align: center;
}

@media (max-width: 768px) {
  .search-results-header-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .search-results-form { width: 100%; }
}

/* ── Fallback: non-product search results ── */
.search-post-item { list-style: none; }

.search-post-link {
  display: flex;
  gap: var(--space-sm);
  padding: 1rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.search-post-link:hover { background: #f5f5f5; }

.search-post-thumb {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.search-post-thumb img { width: 100%; height: 100%; object-fit: cover; }

.search-post-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.search-post-excerpt { font-size: 0.85rem; color: var(--color-mid-gray); }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .manifesto-track { animation: none; }
}

/* =============================================================================
   FLOATING ACTION BUTTONS
   ============================================================================= */

/* ── Groups ── */
.fab-group {
  position: fixed;
  bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 900;
}

.fab-group--right { right: 1.25rem; }
.fab-group--left  { left:  1.25rem; }

/* ── Base Button ── */
.fab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.fab:hover,
.fab:focus-visible {
  transform: translateY(-3px) scale(1.07);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
  outline: none;
}

/* ── Colours ── */
.fab--whatsapp {
  background: #25D366;
}
.fab--whatsapp:hover { background: #1ebe5d; }

.fab--phone {
  background: var(--color-black);
  border: 2px solid rgba(255,255,255,0.15);
}
.fab--phone:hover { background: #222; }

.fab--accessibility {
  background: var(--accent, #f0c020);
}
.fab--accessibility:hover { background: #c92020; }
.fab--accessibility[aria-expanded="true"] {
  background: #222;
}

/* ── Tooltip ── */
.fab-tooltip {
  position: absolute;
  /* for RTL site: tooltip opens to the left for right-group, right for left-group */
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: rgba(13,13,13,0.88);
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  backdrop-filter: blur(4px);
}

/* right-side group: tooltip appears to the left */
.fab-group--right .fab-tooltip {
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
}
.fab-group--right .fab:hover .fab-tooltip,
.fab-group--right .fab:focus-visible .fab-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* left-side group: tooltip appears to the right */
.fab-group--left .fab-tooltip {
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
}
.fab-group--left .fab:hover .fab-tooltip,
.fab-group--left .fab:focus-visible .fab-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── Accessibility Panel ── */
.accessibility-panel {
  position: absolute;
  bottom: calc(100% + 0.75rem);
  left: 0;
  width: 200px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: hidden;
  animation: fabPanelIn 0.22s ease;
}

@keyframes fabPanelIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  background: var(--color-black);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.a11y-close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.a11y-close-btn:hover { opacity: 1; }

.a11y-panel-body {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.a11y-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-black);
  cursor: pointer;
  text-align: right;
  transition: background 0.15s, border-color 0.15s;
}

.a11y-option:hover {
  background: #f5f5f5;
  border-color: #e5e5e5;
}

.a11y-option.is-active {
  background: #fff0f0;
  border-color: var(--accent, #f0c020);
  color: var(--accent, #f0c020);
}

.a11y-option--reset {
  margin-top: 0.25rem;
  color: var(--color-mid-gray);
  border-top: 1px solid #eee;
  padding-top: 0.65rem;
  border-radius: 0 0 8px 8px;
}

/* ── Accessibility Body Classes ── */
body.a11y-large-text  { font-size: 110% !important; }
body.a11y-xlarge-text { font-size: 120% !important; }
body.a11y-high-contrast {
  filter: contrast(1.4) brightness(1.05);
}
body.a11y-highlight-links a {
  text-decoration: underline !important;
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}

/* ── Panel footer — statement link ── */
.a11y-panel-footer {
  border-top: 1px solid #eee;
  padding: 0.55rem 0.75rem;
}

.a11y-statement-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--color-mid-gray);
  text-decoration: none;
  transition: color 0.15s;
}
.a11y-statement-link:hover { color: var(--accent, #f0c020); }

/* ── Mobile tweaks ── */
@media (max-width: 600px) {
  .fab { width: 46px; height: 46px; }
  .fab-group--right { right: 0.85rem; bottom: 1.25rem; }
  .fab-group--left  { left:  0.85rem; bottom: 1.25rem; }
  /* hide tooltip on touch — not hoverable */
  .fab-tooltip { display: none; }
  .accessibility-panel { width: 180px; }
}

/* =============================================================================
   SKIP TO CONTENT  (IS-5568 / WCAG 2.4.1)
   ============================================================================= */
.skip-to-content {
  position: absolute;
  top: -100px;
  right: 0;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: var(--color-black);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 0.2s ease;
}
.skip-to-content:focus {
  top: 0;
  outline: 3px solid var(--accent, #f0c020);
  outline-offset: 2px;
}

/* Visually hidden but accessible to screen readers (WCAG 1.3.1) */
.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;
}

/* =============================================================================
   GLOBAL FOCUS STYLES  (IS-5568 / WCAG 2.4.7)
   Visible, high-contrast focus ring on every interactive element
   ============================================================================= */
:focus-visible {
  outline: 2.5px solid var(--accent, #f0c020);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Buttons and links: keep browser default for keyboard only (not mouse) */
:focus:not(:focus-visible) { outline: none; }

/* Input fields — subtle inner ring */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent, #f0c020);
  outline-offset: 0;
  box-shadow: 0 0 0 4px rgba(224, 48, 48, 0.15);
}

/* =============================================================================
   HOMEPAGE MOBILE FIXES
   ============================================================================= */

/* ── Manifesto strip ── */
@media (max-width: 640px) {
  .manifesto-strip {
    padding-block: 0.55rem;
  }
  .manifesto-track {
    animation-duration: 14s;
  }
  .manifesto-item {
    font-size: 0.72rem;
    margin-inline-end: var(--space-md);
  }
}

/* ── Product carousels (Best Sellers + New Arrivals) ── */

/* Tablet: reduce overhang */
@media (max-width: 900px) {
  .products-carousel-wrap {
    margin-inline: -1rem;
    padding-inline: 1rem;
  }
}

/* Mobile: remove overhang, small floating arrows inside track */
@media (max-width: 640px) {
  .products-carousel-wrap {
    margin-inline: 0;
    padding-inline: 0;
  }
  .carousel-arrow {
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.90);
    box-shadow: 0 1px 8px rgba(0,0,0,0.13);
    border: 1px solid rgba(0,0,0,0.06);
  }
  .carousel-arrow svg {
    width: 13px;
    height: 13px;
  }
  /* Sit just inside the carousel edges, not outside */
  .carousel-arrow--prev { right: 4px; }
  .carousel-arrow--next { left: 4px; }
  .products-scroll {
    padding-inline: 0.75rem;
    gap: 0.65rem;
  }
  .products-scroll li.product {
    flex: 0 0 175px !important;
    max-width: 175px !important;
  }
  /* Carousel card height fixes on mobile */
  .products-scroll .product-card-image { aspect-ratio: 1 / 1; }
  .products-scroll .product-card-body { padding: 0.55rem 0.75rem 0.75rem; }
  /* Section header stacks + centers on mobile */
  .products-section .section-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }
  .products-section .section-subtitle,
  .products-section .section-title {
    text-align: center;
  }
}

/* ── Values strip — single column on very small screens ── */
@media (max-width: 380px) {
  .values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Why section — ensure 1 col on small phones ── */
@media (max-width: 400px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Dog cats section — tighter on very small ── */
@media (max-width: 380px) {
  .dog-cats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
  .dog-cat-name { font-size: 0.95rem; font-weight: 700; }
}

/* =============================================================================
   SECTION CTA WRAP — button after grid/carousel
   ============================================================================= */
.section-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}

.btn--section-cta {
  min-width: 200px;
}

/* Instagram CTA — icon + text */
.btn--insta-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 220px;
}

/* Full width on mobile */
@media (max-width: 600px) {
  .btn--section-cta,
  .btn--insta-cta {
    width: 100%;
    justify-content: center;
  }
  .section-cta-wrap {
    padding: 0 0.5rem;
    margin-top: 1.25rem;
  }
}

/* =============================================================================
   SECTION HEADER — always centered (now all sections use --center)
   ============================================================================= */
.section-header--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
}

.section-header--center .section-subtitle,
.section-header--center .section-title {
  text-align: center;
}

/* Archive sub-cats — last card fix (scroll mode) */
.archive-subcats-grid {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.archive-subcats-grid::-webkit-scrollbar { display: none; }

@media (max-width: 600px) {
  .archive-subcat-card {
    flex: 0 0 130px;
    min-width: 130px;
  }
}

/* =============================================================================
   FOOTER — compact on mobile
   ============================================================================= */
@media (max-width: 600px) {
  .footer-newsletter {
    padding-block: 1rem;
  }
  .footer-nl-inner {
    flex-direction: column;
    gap: 0.9rem;
    align-items: center;
    text-align: center;
  }
  .footer-nl-text {
    width: 100%;
    text-align: center;
  }
  .footer-nl-title {
    font-size: 1.4rem;
  }
  .footer-nl-sub {
    font-size: 0.85rem;
  }
  .footer-nl-form {
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
  }
  .footer-nl-input {
    width: 100%;
  }
  .footer-nl-btn {
    width: 100%;
    text-align: center;
  }
  .footer-main {
    padding-block: 1.5rem;
    gap: 1.25rem;
  }
  .footer-col-title {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
  .footer-links li {
    margin-bottom: 0.35rem;
  }
  .footer-links a,
  .footer-links span {
    font-size: 0.82rem;
  }
  .footer-contact-item {
    font-size: 0.82rem;
  }
  .footer-bottom {
    padding-block: 0.9rem;
    gap: 0.3rem;
  }
  .footer-copy,
  .footer-credit-link {
    font-size: 0.72rem;
  }
  /* Collapse newsletter to 2-col on tiny screens */
  .footer-main {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 400px) {
  .footer-main {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   ANIMATIONS
   ============================================================================= */

/* ── Page fade-in ── */
body {
  animation: pageFadeIn 0.35s ease both;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Product card stagger reveal (grid/archive only — carousel cards excluded) ── */
.product-card:not(.products-scroll .product-card) {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.45s ease, transform 0.45s ease, box-shadow 0.22s ease;
}
.product-card.is-visible:not(.products-scroll .product-card) {
  opacity: 1;
  transform: translateY(0);
}

/* ── Image fade-in on load ── */
img.img-fade {
  opacity: 0;
  transition: opacity 0.4s ease;
}
img.img-fade.img-loaded {
  opacity: 1;
}

/* ── ATC button — success bounce ── */
@keyframes atcSuccess {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.92); }
  70%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.add-to-cart-btn.atc-success {
  animation: atcSuccess 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Button ripple ── */
.btn {
  position: relative;
  overflow: hidden;
}
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  transform: scale(0);
  animation: rippleExpand 0.55s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* =============================================================================
   PRODUCT TAG FILTER BAR
   ============================================================================= */

/* ── Filter bar — archive pages ── */
.pf-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0;
}

.pf-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.38rem 0.9rem;
  border: 1.5px solid #e0ddd8;
  border-radius: 100px;
  background: #fff;
  color: #555;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  white-space: nowrap;
}

.pf-pill:hover {
  border-color: var(--color-red);
  color: var(--color-red);
  background: #fff5f5;
}

.pf-pill.is-active {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
}

.pf-no-results {
  text-align: center;
  padding: 2.5rem 1rem;
  color: #999;
  font-size: 0.95rem;
  grid-column: 1 / -1;
}

/* ── Product tags — card ── */
.product-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin: 0.3rem 0 0.55rem;
}

.product-card-tag {
  font-size: 0.7rem;
  font-weight: 500;
  color: #888;
  background: #f4f2ef;
  border-radius: 100px;
  padding: 0.15rem 0.5rem;
  letter-spacing: 0.01em;
  transition: color 0.15s, background 0.15s;
}

.product-card:hover .product-card-tag {
  background: #ffe8e8;
  color: var(--color-red);
}

/* ── Product tags — single product page ── */
.product-utags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0 0.2rem;
}

.product-utag-pill {
  display: inline-block;
  padding: 0.22rem 0.65rem;
  background: #f5f3ef;
  border-radius: 100px;
  color: #666;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.16s, color 0.16s;
  letter-spacing: 0.01em;
}

.product-utag-pill:hover {
  background: #ffe8e8;
  color: var(--color-red);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .pf-bar {
    gap: 0.4rem;
    margin-bottom: 1.1rem;
  }
  .pf-pill {
    font-size: 0.8rem;
    padding: 0.32rem 0.75rem;
  }
}

/* =============================================================================
   BLOG — Index, Category Archive, Single Post
   ============================================================================= */

/* ── Blog Index hero ── */
.blog-index-hero { padding-block-end: 2.5rem; }
.blog-index-sub {
  font-size: 1.05rem;
  color: var(--color-mid-gray);
  margin-top: 0.5rem;
}

/* ── Category filter pills ── */
.blog-cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.blog-cat-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-mid-gray);
  background: var(--color-white);
  border: 1.5px solid var(--color-light-gray);
  border-radius: 100px;
  padding: 0.4rem 1rem;
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.blog-cat-pill:hover,
.blog-cat-pill--active {
  background: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}

/* ── Blog grid ── */
.blog-index-body { padding-block: var(--space-lg); background: var(--color-off-white); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.blog-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ── Blog card ── */
.blog-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.blog-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}
.blog-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.blog-card-image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-light-gray);
}
.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease-out);
}
.blog-card:hover .blog-card-img { transform: scale(1.04); }
.blog-card-image--placeholder { display: flex; align-items: center; justify-content: center; }
.blog-card-placeholder { color: var(--color-light-gray); }
.blog-card-cat-badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  background: var(--color-red);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 100px;
  z-index: 1;
}
.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.25rem 1rem;
  flex: 1;
}
.blog-card-title {
  font-family: var(--font-brand);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.35;
  margin: 0;
}
.blog-card:hover .blog-card-title { color: var(--color-red); }
.blog-card-excerpt {
  font-size: 0.88rem;
  color: var(--color-mid-gray);
  line-height: 1.65;
  flex: 1;
  margin: 0;
}
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.blog-card-sep { opacity: 0.4; }
.blog-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-red);
  margin-top: 0.25rem;
}
.blog-card-cta svg { transition: transform var(--dur-fast); }
.blog-card:hover .blog-card-cta svg { transform: translateX(-3px); }

/* ── Blog pagination ── */
.blog-pagination {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1.5px solid var(--color-light-gray);
  color: var(--color-black);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
  background: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}

/* ── Blog empty state ── */
.blog-empty { text-align: center; padding: var(--space-xl) 0; }
.blog-empty-icon { color: var(--color-light-gray); margin-bottom: 1rem; }
.blog-empty-title { font-family: var(--font-brand); font-size: 1.6rem; margin-bottom: 0.5rem; }
.blog-empty-text { color: var(--color-mid-gray); }

/* =============================================================================
   SINGLE POST
   ============================================================================= */

/* ── Hero with image ── */
.post-hero--image {
  position: relative;
  height: 480px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.post-hero-media {
  position: absolute;
  inset: 0;
}
.post-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
}
.post-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block-end: 2.5rem;
  padding-block-start: 1.5rem;
}
.post-hero-cat {
  display: inline-block;
  background: var(--color-red);
  color: var(--color-white);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  margin-bottom: 0.75rem;
  text-decoration: none;
}
.post-hero-title {
  font-family: var(--font-brand);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 900;
  color: var(--color-white);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}
.post-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
}

/* ── Plain hero (no image) ── */
.post-plain-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.88rem;
  color: var(--color-mid-gray);
}

/* ── Post body ── */
.post-body { padding-block: var(--space-lg); background: var(--color-white); }
.post-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
  padding-top: 0.5rem;
}
.post-breadcrumb a { color: var(--color-mid-gray); text-decoration: none; }
.post-breadcrumb a:hover { color: var(--color-red); }

/* ── Post content (article typography) ── */
.post-content {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--color-dark-gray);
}
.post-content h2 {
  font-family: var(--font-brand);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-black);
  margin: 2rem 0 0.75rem;
  line-height: 1.25;
}
.post-content h3 {
  font-family: var(--font-brand);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-black);
  margin: 1.5rem 0 0.5rem;
}
.post-content p { margin-bottom: 1.25rem; }
.post-content a { color: var(--color-red); text-decoration: underline; text-decoration-color: rgba(224,48,48,0.3); }
.post-content a:hover { text-decoration-color: var(--color-red); }
.post-content ul,
.post-content ol {
  padding-inline-start: 1.5rem;
  margin-bottom: 1.25rem;
}
.post-content li { margin-bottom: 0.4rem; }
.post-content blockquote {
  border-inline-start: 4px solid var(--color-red);
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: var(--color-off-white);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--color-mid-gray);
}
.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 1.5rem 0;
}
.post-content figure { margin: 1.5rem 0; }
.post-content figcaption { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 0.4rem; text-align: center; }
.post-content hr { border: none; border-top: 1px solid var(--color-light-gray); margin: 2rem 0; }
.post-content strong { font-weight: 700; color: var(--color-black); }
.post-content code {
  background: var(--color-off-white);
  border-radius: 4px;
  padding: 0.15em 0.4em;
  font-family: var(--font-mono);
  font-size: 0.88em;
}

/* ── Tags ── */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-light-gray);
}
.post-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  background: var(--color-off-white);
  border: 1px solid var(--color-light-gray);
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-mid-gray);
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.post-tag:hover { background: var(--color-red); color: var(--color-white); border-color: var(--color-red); }

/* ── Share ── */
.post-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-light-gray);
}
.post-share-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-mid-gray);
}
.post-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1rem;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.post-share-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.post-share-btn--fb  { background: #1877f2; color: #fff; }
.post-share-btn--wa  { background: #25d366; color: #fff; }
.post-share-btn--copy { background: var(--color-off-white); color: var(--color-black); border-color: var(--color-light-gray); }

/* ── Author box ── */
.post-author-box {
  background: var(--color-off-white);
  border-top: 1px solid var(--color-light-gray);
  padding-block: var(--space-md);
}
.post-author-inner {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
}
.post-author-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-light-gray);
}
.post-author-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin-bottom: 0.2rem; }
.post-author-name { font-family: var(--font-brand); font-size: 1.05rem; font-weight: 800; color: var(--color-black); text-decoration: none; display: block; }
.post-author-name:hover { color: var(--color-red); }
.post-author-bio { font-size: 0.88rem; color: var(--color-mid-gray); line-height: 1.6; margin-top: 0.35rem; }

/* ── Related posts in single ── */
.post-related { padding-block: var(--space-lg); }

/* =============================================================================
   SEARCH — Tabs + Mixed results
   ============================================================================= */
.search-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.search-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-mid-gray);
  text-decoration: none;
  border: 1.5px solid var(--color-light-gray);
  background: transparent;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.search-tab:hover { border-color: var(--color-black); color: var(--color-black); }
.search-tab--active { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }
.search-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: rgba(255,255,255,0.2);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
}
.search-tab--active .search-tab-count { background: rgba(255,255,255,0.25); }
.search-tab:not(.search-tab--active) .search-tab-count { background: var(--color-light-gray); color: var(--color-mid-gray); }
.search-section-label {
  font-family: var(--font-brand);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-black);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-red);
  display: inline-block;
}

/* =============================================================================
   BLOG RESPONSIVE
   ============================================================================= */
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .post-hero--image { height: 360px; }
}

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-grid--3 { grid-template-columns: 1fr; }
  .post-hero--image { height: 280px; }
  .post-hero-title { font-size: 1.4rem; }
  .post-author-inner { flex-direction: column; gap: 0.75rem; }
  .post-share { gap: 0.4rem; }
  .post-share-btn span { display: none; }
  .post-share-btn { padding: 0.45rem 0.75rem; }
  .search-tabs { gap: 0.35rem; }
  .search-tab { font-size: 0.78rem; padding: 0.35rem 0.75rem; }
}


/* =============================================================================
   BRAND OVERRIDE — Square Everything (client feedback 2026-05-25)
   UNDERDOG brand = sharp/square, no rounded corners. "בלי עיגולים"
   ============================================================================= */
:root {
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
}

/* Buttons */
.btn,
.btn--ghost-light,
.product-cta-btn,
.add-to-cart-btn,
.product-atc-btn,
.product-sticky-btn,
.exit-popup-input { border-radius: 0 !important; }

/* Cards & containers */
.product-card,
.product-card-image,
.main-cat-card,
.main-cat-img-wrap,
.sub-cat-card,
.sub-cat-img,
.dog-cat-card,
.mega-cat-item,
.mega-cat-thumb,
.process-step,
.about-product-card,
.about-cert-item,
.ab-card,
.about-values-grid,
.about-story-img-frame,
.contact-card,
.contact-card-icon,
.contact-form-wrap,
.sp-toast,
.exit-popup-box,
.cf-input,
.cf-message-box,
.trust-item,
.archive-subcat-card { border-radius: 0 !important; }

/* =============================================================================
   HOMEPAGE NEW — Process, Story, Benefits, Promo (2026-05-25)
   ============================================================================= */

/* ── Shared: Brand Title Box ───────────────────────────────────────────────── */
.brand-title-box {
  display: inline-block;
  background: #0d0d0d;
  color: #ffffff;
  padding: 0.55rem 1.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.brand-title-box h2,
.brand-title-box h3 {
  font-size: inherit;
  font-weight: inherit;
  color: #ffffff;
  margin: 0;
  line-height: 1;
}

/* ── Production Process ────────────────────────────────────────────────────── */
.process-section {
  background: #d4c4a8;
  padding: 5rem 0 3.5rem;
}
.process-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.process-steps-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
}
.process-step-item {
  flex: 1;
  max-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
}
.process-step-circle {
  width: 86px;
  height: 86px;
  border: 2.5px solid #0d0d0d;
  background: #f5ede0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  color: #0d0d0d;
}
.process-step-num {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  background: #0d0d0d;
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.process-step-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0d0d0d;
  line-height: 1.3;
}
.process-step-desc {
  font-size: 0.76rem;
  color: #4a3f2e;
  line-height: 1.55;
}
.process-arrow {
  display: flex;
  align-items: flex-start;
  padding-top: 2.2rem;
  opacity: 0.45;
  flex-shrink: 0;
}
.process-footnote {
  text-align: center;
  margin-top: 2.5rem;
  font-size: 0.78rem;
  color: #6b5c47;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ── We Are The Underdog's ─────────────────────────────────────────────────── */
.ud-story-section {
  display: grid;
  grid-template-columns: 40% 60%;
  min-height: 500px;
  background: #0d0d0d;
}
.ud-story-image {
  position: relative;
  overflow: hidden;
}
.ud-story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  filter: grayscale(30%) contrast(1.1);
}
.ud-story-content {
  padding: 4rem 3.5rem 4rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  direction: rtl;
}
.ud-story-title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  color: #f0c020;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  font-style: italic;
  letter-spacing: -0.01em;
}
.ud-story-text {
  font-size: 0.98rem;
  color: #d8d8d8;
  line-height: 1.85;
  max-width: 500px;
  margin-bottom: 2rem;
}
.ud-story-meta {
  margin-top: 0.5rem;
}
.ud-israel-badge {
  font-size: 0.82rem;
  color: #f0c020;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.9;
}
.ud-israel-map {
  position: absolute;
  bottom: 2.5rem;
  left: 2.5rem;
  width: 52px;
  opacity: 0.3;
  pointer-events: none;
}

/* ── Benefits ──────────────────────────────────────────────────────────────── */
.ud-benefits-section {
  background: #ffffff;
  padding: 5rem 0 4rem;
}
.ud-benefits-grid {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 3rem;
}
.ud-benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 130px;
  max-width: 170px;
  gap: 1rem;
}
.ud-benefit-circle {
  width: 88px;
  height: 88px;
  background: #0d0d0d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.ud-benefit-item:hover .ud-benefit-circle { transform: translateY(-4px); }
.ud-benefit-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0d0d0d;
  line-height: 1.3;
}
.ud-benefit-desc {
  font-size: 0.78rem;
  color: #666666;
  line-height: 1.55;
}
.ud-benefits-sub {
  text-align: center;
  margin-top: 3rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0d0d0d;
  letter-spacing: 0.02em;
}

/* ── Promo Banner ──────────────────────────────────────────────────────────── */
.ud-promo-section {
  background: #0d0d0d;
  overflow: hidden;
}
.ud-promo-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 380px;
  max-width: 1280px;
  margin: 0 auto;
}
.ud-promo-text {
  padding: 3.5rem 2.5rem 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  direction: rtl;
}
.ud-promo-tag {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f0c020;
  font-weight: 700;
}
.ud-promo-headline {
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.ud-promo-headline span { color: #f0c020; }
.ud-promo-sub {
  font-size: 0.92rem;
  color: #999999;
  margin-top: -0.25rem;
}
.ud-promo-btn {
  align-self: flex-start;
  background: #f0c020 !important;
  color: #0d0d0d !important;
  padding: 0.9rem 2.25rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  margin-top: 0.75rem;
  display: inline-block;
  transition: background 0.2s;
  border-radius: 0 !important;
}
.ud-promo-btn:hover { background: #ffd633 !important; }
.ud-promo-img {
  position: relative;
  overflow: hidden;
}
.ud-promo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(20%);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .process-steps-row { flex-wrap: wrap; gap: 2rem; justify-content: center; }
  .process-arrow { display: none; }
  .process-step-item { max-width: 130px; }

  .ud-story-section { grid-template-columns: 1fr; }
  .ud-story-image { height: 300px; }
  .ud-story-content { padding: 2.5rem 1.5rem; }
  .ud-israel-map { bottom: 1.5rem; left: 1.5rem; }

  .ud-promo-inner { grid-template-columns: 1fr; }
  .ud-promo-text { padding: 3rem 1.5rem; }
  .ud-promo-img { height: 260px; }
}

@media (max-width: 600px) {
  .process-section { padding: 3.5rem 0 2.5rem; }
  .process-step-circle { width: 72px; height: 72px; }
  .ud-benefits-grid { gap: 1rem; }
  .ud-benefit-item { min-width: 110px; max-width: 140px; }
  .ud-benefit-circle { width: 72px; height: 72px; }
  .ud-story-title { font-size: 1.8rem; }
  .ud-promo-headline { font-size: 1.9rem; }
}

/* =============================================================================
   UNDERDOG POPUP (2026-05-25)
   ============================================================================= */
.ud-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ud-popup-overlay--visible {
  opacity: 1;
}
.ud-popup-box {
  position: relative;
  max-width: 520px;
  width: 100%;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ud-popup-overlay--visible .ud-popup-box {
  transform: scale(1) translateY(0);
}
.ud-popup-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  background: #0d0d0d;
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s;
  border-radius: 0;
}
.ud-popup-close:hover {
  background: #f0c020;
  color: #0d0d0d;
}
.ud-popup-link {
  display: block;
  line-height: 0;
}
.ud-popup-img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 540px) {
  .ud-popup-box { max-width: 95vw; }
  .ud-popup-close { top: -10px; right: -10px; width: 30px; height: 30px; }
}

/* =============================================================================
   PROCESS SECTION — diagonal logo watermark (2026-05-25)
   ============================================================================= */
.process-section {
  position: relative;
  overflow: hidden;
}
.process-section::before {
  content: '';
  position: absolute;
  inset: -60%;
  background-image: url('https://underdogs-il.com/wp-content/uploads/2026/05/Logo_White.png');
  background-repeat: repeat;
  background-size: 190px auto;
  opacity: 0.07;
  transform: rotate(-28deg);
  pointer-events: none;
  z-index: 0;
}
.process-section .container {
  position: relative;
  z-index: 1;
}

/* POPUP FIX — ensure [hidden] overrides display:flex */
.ud-popup-overlay[hidden] {
  display: none !important;
  pointer-events: none !important;
}

/* =============================================================================
   PROCESS SECTION — updates (2026-05-25)
   ============================================================================= */

/* Logo background — full coverage, opacity 0.3, bigger tiles */
.process-section::before {
  inset: -80%;
  background-size: 38%;
  opacity: 0.3;
}

/* Title — significantly bigger */
.process-section .brand-title-box {
  font-size: 1.9rem;
  padding: 0.75rem 2.5rem;
  letter-spacing: 0.01em;
}
.process-section .brand-title-box h2 {
  font-size: inherit;
}

/* Arrows — flip direction (RTL) */
.process-arrow svg {
  transform: scaleX(-1);
}

/* Footnote — centered */
.process-footnote {
  text-align: center;
  width: 100%;
  display: block;
}

/* =============================================================================
   PROCESS SECTION — logo background FULL REWRITE (2026-05-25)
   ============================================================================= */
.process-section {
  position: relative;
  overflow: hidden;
}
.process-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  right: unset;
  bottom: unset;
  inset: unset;
  width: 200%;
  height: 200%;
  background-image: url('https://underdogs-il.com/wp-content/uploads/2026/05/Logo_White.png');
  background-repeat: repeat;
  background-size: 220px auto;
  opacity: 0.3;
  transform: rotate(-28deg);
  pointer-events: none;
  z-index: 0;
}
.process-section .container {
  position: relative;
  z-index: 1;
}

/* Process BG — tune tile size + opacity */
.process-section::before {
  background-size: 150px auto;
  opacity: 0.22;
}

/* Process BG — full coverage fix + lower opacity */
.process-section::before {
  top: -100%;
  left: -100%;
  width: 400%;
  height: 400%;
  opacity: 0.16;
}

/* =============================================================================
   PROCESS SECTION — Logo BG centered fix + Brush stroke title (2026-05-25)
   ============================================================================= */

/* Fix: center the pseudo-element on the section so rotation is symmetric */
.process-section::before {
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
}


.process-section .brand-title-box {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 80' preserveAspectRatio='none'%3E%3Cpath d='M6,16 C4,8 12,3 28,2 C55,0 90,2 130,1 C170,0 210,2 250,1 C290,0 330,2 370,1 C410,0 450,2 488,4 C515,5 542,8 568,13 C584,16 593,22 592,30 C591,38 586,48 583,57 C579,65 572,71 558,74 C534,78 504,77 472,77 C432,78 390,77 348,77 C306,78 264,77 222,77 C180,78 138,77 100,76 C68,75 40,73 18,70 C7,68 0,63 1,55 C2,47 4,36 5,26 C5,22 6,18 6,16 Z' fill='%230d0d0d'/%3E%3Cpath d='M2,53 C0,49 1,58 2,62 C3,65 2,68 4,70' stroke='%230d0d0d' stroke-width='4' fill='none' opacity='0.5'/%3E%3Cpath d='M590,26 C594,22 596,30 594,36' stroke='%230d0d0d' stroke-width='3' fill='none' opacity='0.4'/%3E%3Cpath d='M55,1 C60,-1 64,2 68,0 C72,-1 76,1 80,0' stroke='%230d0d0d' stroke-width='2' fill='none' opacity='0.4'/%3E%3Cpath d='M300,0 C305,-1 310,1 314,0 C318,-1 322,2 326,0' stroke='%230d0d0d' stroke-width='2' fill='none' opacity='0.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
  padding: 1rem 3.5rem 1.2rem;
  border: none;
}
.process-section .brand-title-box h2 {
  color: #ffffff;
  font-size: inherit;
  position: relative;
  z-index: 1;
}

/* Process step — image IS the circle, no wrapper border */
.process-step-circle:has(img) {
  background: transparent;
  border: none;
  width: auto;
  height: auto;
}
.process-step-circle img {
  width: 86px;
  height: 86px;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
}

/* Process title — real brush stroke image */
.process-section .brand-title-box {
  background-color: transparent;
  background-image: url('https://underdogs-il.com/wp-content/uploads/2026/05/TITLEBG.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  color: #ffffff;
  padding: 1.1rem 4rem 1.3rem;
  border: none;
  min-width: 420px;
}
.process-section .brand-title-box h2 {
  color: #ffffff;
  text-align: center;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Step 1 icon — 50% bigger (86px → 130px) */
.process-step-circle img {
  width: 130px;
  height: 130px;
}

/* Step icon — force size */
.process-step-circle img {
  width: 130px !important;
  height: 130px !important;
  min-width: 130px;
  min-height: 130px;
}
.process-step-circle:has(img) {
  width: 130px !important;
  height: 130px !important;
}

/* Process section — bigger title, bigger step text, lower bg opacity */
.process-section .brand-title-box {
  font-size: 2.4rem;
  padding: 1.2rem 5rem 1.5rem;
}
.process-section .brand-title-box h2 {
  font-size: inherit;
}
.process-step-label {
  font-size: 1.05rem;
}
.process-step-desc {
  font-size: 0.9rem;
}
.process-section::before {
  opacity: 0.1;
}

/* Benefits title — same style as process section title */
.ud-benefits-section .brand-title-box {
  background-color: transparent;
  background-image: url('https://underdogs-il.com/wp-content/uploads/2026/05/TITLEBG.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  color: #ffffff;
  padding: 1.2rem 5rem 1.5rem;
  border: none;
  min-width: 420px;
  font-size: 2.4rem;
}
.ud-benefits-section .brand-title-box h2 {
  color: #ffffff;
  text-align: center;
  font-size: inherit;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* =============================================================================
   PROCESS SECTION — spacing + mobile layout (2026-05-25)
   ============================================================================= */

/* Desktop: more breathing room between steps */
.process-steps-row {
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 1rem;
}

.process-step-item {
  max-width: 160px;
}

/* Tablet (≤960px): 3 per row, decent gap */
@media (max-width: 960px) {
  .process-steps-row {
    gap: 2rem 2.5rem;
  }
  .process-step-item {
    flex: 0 0 calc(33.333% - 2.5rem);
    max-width: 150px;
  }
}

/* Mobile (≤600px): 2 per row */
@media (max-width: 600px) {
  .process-steps-row {
    gap: 2rem 1.5rem;
    justify-content: center;
  }
  .process-step-item {
    flex: 0 0 calc(50% - 2rem);
    max-width: 140px;
  }
  .process-step-circle img,
  .process-step-circle:has(img) {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px;
    min-height: 100px;
  }
  .process-section .brand-title-box {
    font-size: 1.6rem;
    padding: 1rem 2.5rem 1.2rem;
    min-width: unset;
    width: 90%;
  }
  .process-step-label { font-size: 0.9rem; }
  .process-step-desc  { font-size: 0.78rem; }
}

/* Very small (≤380px): 1 per row for tiny phones */
@media (max-width: 380px) {
  .process-step-item {
    flex: 0 0 80%;
    max-width: 180px;
  }
}

/* =============================================================================
   UD STORY SECTION — transparent dog image + layout polish (2026-05-25)
   ============================================================================= */

.ud-story-section {
  grid-template-columns: 45% 55%;
  min-height: 520px;
  align-items: stretch;
  overflow: visible;
}

/* Image column — transparent dog sits on dark bg, anchored to bottom */
.ud-story-image {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0;
}

.ud-story-image img {
  width: 100%;
  max-width: 480px;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: none;
  position: relative;
  bottom: 0;
  /* subtle drop shadow so dog pops on dark bg */
  filter: drop-shadow(0 8px 32px rgba(0,0,0,0.5));
}

/* Content column — tighten up */
.ud-story-content {
  padding: 4rem 4rem 4rem 2rem;
  justify-content: center;
}

.ud-story-title {
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.ud-story-text {
  font-size: 1.05rem;
  line-height: 1.9;
  color: #e0e0e0;
}

/* Mobile */
@media (max-width: 960px) {
  .ud-story-section {
    grid-template-columns: 1fr;
    overflow: hidden;
  }
  .ud-story-image {
    height: 320px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
  }
  .ud-story-image img {
    max-width: 340px;
    height: 100%;
    object-fit: contain;
  }
  .ud-story-content {
    padding: 2.5rem 1.5rem 3rem;
  }
}

@media (max-width: 600px) {
  .ud-story-image { height: 260px; }
  .ud-story-image img { max-width: 280px; }
  .ud-story-title { font-size: 1.9rem; }
  .ud-story-text { font-size: 0.96rem; }
}

/* =============================================================================
   HOMEPAGE STORY SECTION — square image, no radius (2026-05-25)
   ============================================================================= */
.ud-homepage-story .about-story-img-frame {
  aspect-ratio: 1 / 1;
  border-radius: 0;
  max-height: none;
}

.ud-homepage-story .about-story-img-frame img {
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.ud-homepage-story .about-story-grid {
  gap: 4rem;
  align-items: center;
}

.ud-homepage-story .about-story-content {
  direction: rtl;
}

@media (max-width: 900px) {
  .ud-homepage-story .about-story-img-frame {
    aspect-ratio: 1 / 1;
    max-height: 360px;
    border-radius: 0;
  }
}

/* =============================================================================
   BENEFITS SECTION — match process section 1:1 (2026-05-25)
   ============================================================================= */

/* Same background, padding, and logo watermark as process section */
.ud-benefits-section {
  background: #d4c4a8;
  padding: 5rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}

.ud-benefits-section::before {
  content: '';
  position: absolute;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background-image: url('https://underdogs-il.com/wp-content/uploads/2026/05/Logo_White.png');
  background-repeat: repeat;
  background-size: 150px auto;
  opacity: 0.1;
  transform: rotate(-28deg);
  pointer-events: none;
  z-index: 0;
}

.ud-benefits-section .container {
  position: relative;
  z-index: 1;
}

/* Same header spacing as process */
.ud-benefits-section .process-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

/* Grid → flex row, same as process-steps-row */
.ud-benefits-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
  margin-top: 0;
}

/* Each benefit item = same as process-step-item */
.ud-benefit-item {
  flex: 1;
  max-width: 160px;
  min-width: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
}

/* Circle = same as process-step-circle */
.ud-benefit-circle {
  width: 86px;
  height: 86px;
  background: #f5ede0;
  border: 2.5px solid #0d0d0d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d0d0d;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.ud-benefit-item:hover .ud-benefit-circle {
  transform: translateY(-4px);
}

/* Override SVG stroke from white → dark */
.ud-benefit-circle svg {
  stroke: #0d0d0d !important;
}

/* Label = same as process-step-label */
.ud-benefit-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0d0d0d;
  line-height: 1.3;
}

/* Desc = same as process-step-desc */
.ud-benefit-desc {
  font-size: 0.9rem;
  color: #4a3f2e;
  line-height: 1.55;
}

/* Bottom sub-text */
.ud-benefits-sub {
  color: #4a3f2e;
  font-size: 0.88rem;
  margin-top: 2.5rem;
}

/* Mobile — same breakpoints as process */
@media (max-width: 960px) {
  .ud-benefits-grid { gap: 2rem 2.5rem; }
  .ud-benefit-item  { flex: 0 0 calc(33.333% - 2.5rem); max-width: 150px; }
}

@media (max-width: 600px) {
  .ud-benefits-section { padding: 3.5rem 0 2.5rem; }
  .ud-benefits-grid    { gap: 2rem 1.5rem; }
  .ud-benefit-item     { flex: 0 0 calc(50% - 2rem); max-width: 140px; }
  .ud-benefit-circle   { width: 72px; height: 72px; }
  .ud-benefit-title    { font-size: 0.9rem; }
  .ud-benefit-desc     { font-size: 0.78rem; }
}

/* =============================================================================
   HERO DESC — static text below tagline (2026-05-25)
   ============================================================================= */
.hero-desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.75;
  max-width: 560px;
  margin-top: 1.5rem;
  direction: rtl;
}

/* hide old ticker if still cached */
.hero-ticker-wrap { display: none; }

@media (max-width: 600px) {
  .hero-desc { font-size: 0.9rem; max-width: 100%; }
}

/* =============================================================================
   BEST SELLERS — white bg, no yellow border, black subtitle (2026-05-25)
   ============================================================================= */
.products-section {
  background: #ffffff;
  border-top: none;
}
.products-section .section-subtitle {
  color: #0d0d0d;
}
.products-section .section-subtitle::before {
  background: #0d0d0d;
}

/* =============================================================================
   HERO — tagline LTR above title, bigger desc (2026-05-25)
   ============================================================================= */
.hero-tagline {
  direction: ltr;
  text-align: left;
  margin-bottom: 1rem;
  margin-top: 0;
}

.hero-desc {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.88);
}

@media (max-width: 600px) {
  .hero-desc { font-size: 1rem; }
}

/* =============================================================================
   ACCESSIBILITY BUTTON — white bg, black icon, grey border (2026-05-25)
   ============================================================================= */
.fab--accessibility {
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  color: #0d0d0d !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.fab--accessibility svg {
  stroke: #0d0d0d !important;
}
.fab--accessibility:hover,
.fab--accessibility[aria-expanded=true] {
  background: #ffffff !important;
  border-color: #aaaaaa !important;
  color: #0d0d0d !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.fab--accessibility:hover svg,
.fab--accessibility[aria-expanded=true] svg {
  stroke: #0d0d0d !important;
}

/* Footer logo — 15% bigger (56px → 64px) */
.footer-logo img { height: 64px; }

/* Benefits — image only, no circle frame */
.ud-benefit-circle { background: none !important; border: none !important; padding: 0 !important; box-shadow: none !important; width: 130px !important; height: 130px !important; }

/* Product layout — gallery on LEFT, info on RIGHT (desktop) */
@media (min-width: 768px) {
  .product-layout { direction: ltr; }
  .product-layout .product-gallery,
  .product-layout .product-info { direction: rtl; }
}

/* Product mini trust — side by side */
.product-mini-trust { flex-direction: row; flex-wrap: wrap; gap: 1.2rem; }

/* ── Product purchase box — brand beige styling ── */
.product-purchase-box {
  background: #d4c4a8;
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1.2rem;
}

/* Attribute buttons */
.product-purchase-box .attr-btn {
  background: #f5ede0;
  border: 1.5px solid #0d0d0d;
  color: #0d0d0d;
}
.product-purchase-box .attr-btn.active {
  background: #0d0d0d;
  color: #ffffff;
  border-color: #0d0d0d;
}
.product-purchase-box .attr-btn:hover:not(.active) {
  background: #e8dcc8;
}

/* Qty control */
.product-purchase-box .product-qty-control {
  border: 1.5px solid #0d0d0d;
  border-radius: 8px;
  background: #f5ede0;
}
.product-purchase-box .qty-btn {
  color: #0d0d0d;
}
.product-purchase-box .qty-input {
  background: transparent;
  color: #0d0d0d;
}

/* ATC button — black */
.product-purchase-box .product-atc-btn {
  background: #0d0d0d !important;
  border-color: #0d0d0d !important;
  color: #ffffff !important;
}
.product-purchase-box .product-atc-btn:hover:not(:disabled) {
  background: #2a2a2a !important;
  border-color: #2a2a2a !important;
}
.product-purchase-box .product-atc-btn:disabled {
  background: #999 !important;
  border-color: #999 !important;
}

/* Size guide */
.product-purchase-box .size-guide-toggle {
  color: #0d0d0d;
}

/* Qty — white, no border */
.product-purchase-box .product-qty-control {
  background: #ffffff !important;
  border: none !important;
}

/* Attr buttons — beige border */
.product-purchase-box .attr-btn {
  border-color: #b8a890 !important;
}
.product-purchase-box .attr-btn.active {
  border-color: #0d0d0d !important;
}

/* Attr buttons — border matches background */
.product-purchase-box .attr-btn { border-color: #f5ede0 !important; }
.product-purchase-box .attr-btn.active { border-color: #0d0d0d !important; }

/* Mini trust — force side by side */
.product-mini-trust { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 1.2rem !important; align-items: flex-start; }

/* Purchase box — white background */
.product-purchase-box { background: #ffffff !important; }

/* Bottom row — size guide + הנחיות side by side */
.purchase-box-bottom {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 1.5rem;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid #e8dcc8;
}
.purchase-box-bottom .size-guide { margin: 0; }
.purchase-box-bottom .product-guide-btn { margin: 0; }

/* הנחיות שימוש — new style: info row */
.product-guide-btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.7rem 1rem;
  background: #fdf8f0;
  border: 1px solid #e8dcc8 !important;
  border-radius: 8px;
  color: #5a4a3a;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s;
}
.product-guide-btn:hover { background: #f5ede0; }
.product-guide-btn-text {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.product-guide-chevron { opacity: 0.5; flex-shrink: 0; }

/* Guide btn — square, content width */
.product-guide-btn { border-radius: 0 !important; width: auto !important; display: inline-flex !important; }

/* Guide btn — truly fit content */
.product-guide-btn { width: auto !important; align-self: flex-start !important; flex: 0 0 auto !important; }

/* ATC button — black shadow instead of red */
.product-purchase-box .product-atc-btn { box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important; }
.product-purchase-box .product-atc-btn:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important; }

/* product-info-btns — wrap the two info buttons */
.product-info-btns { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
.product-info-btns .product-guide-btn { margin-top: 0 !important; }

/* ── Size guide modal ── */
.sg-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.sg-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
}
.sg-modal-panel {
  position: relative; z-index: 1;
  background: #fff;
  width: min(480px, 92vw);
  border-radius: 0;
  padding: 2rem;
  max-height: 90vh;
  overflow-y: auto;
  direction: rtl;
}
.sg-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.4rem;
}
.sg-modal-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.15rem; font-weight: 700; color: #0d0d0d; margin: 0;
}
.sg-modal-close {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: #666; line-height: 1;
}
.sg-modal-close:hover { color: #0d0d0d; }
.sg-modal-sub {
  color: #6b5c4e; font-size: 0.88rem; margin: 0 0 1.4rem;
}
.sg-modal-grid {
  display: flex; flex-direction: column; gap: 0.75rem;
}
.sg-modal-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1rem;
  background: #fdf8f0;
  border: 1px solid #e8dcc8;
}
.sg-modal-letter {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800;
  border-radius: 0;
}
.sg-letter--s  { background: #C4B0E0; color: #2d1a5e; }
.sg-letter--m  { background: #40B8B8; color: #fff; }
.sg-letter--l  { background: #f0c020; color: #3a2a00; }
.sg-letter--xl { background: #0d0d0d; color: #fff; }
.sg-modal-info {
  display: flex; flex-direction: column; gap: 0.15rem;
}
.sg-modal-name  { font-weight: 700; font-size: 0.95rem; color: #0d0d0d; }
.sg-modal-desc  { font-size: 0.83rem; color: #5a4a3a; }
.sg-modal-weight {
  font-size: 0.82rem; font-weight: 600;
  color: #6b5c4e;
  background: #e8dcc8;
  padding: 0.1rem 0.5rem;
  border-radius: 20px;
  display: inline-block;
  margin-top: 0.1rem;
  width: fit-content;
}

/* Product tags — smaller, square corners */
.product-utag-pill {
  border-radius: 0 !important;
  font-size: 0.75rem !important;
  padding: 0.2rem 0.55rem !important;
}
.product-utags { margin-top: 0.5rem; gap: 0.35rem; }

/* Fix: hidden attribute must win over display:flex on modals */
.sg-modal[hidden],
.product-guide-modal[hidden] { display: none !important; }

/* Mobile — both modals */
@media (max-width: 600px) {
  .sg-modal,
  .product-guide-modal {
    align-items: flex-end !important;
  }
  .sg-modal-panel,
  .guide-panel {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    max-height: 85vh !important;
    padding: 1.4rem 1.2rem !important;
  }
  .sg-modal-close,
  .guide-close {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
  }
  .sg-modal-letter { width: 42px !important; height: 42px !important; font-size: 1.1rem !important; }
}

/* Info btns — side by side */
.product-info-btns { flex-direction: row !important; flex-wrap: wrap !important; }

/* ── Modal animations ── */

/* Backdrop fade */
.sg-modal .sg-modal-backdrop,
.product-guide-modal .guide-backdrop {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sg-modal.is-open .sg-modal-backdrop,
.product-guide-modal.is-open .guide-backdrop {
  opacity: 1;
}

/* Desktop: scale + fade */
@media (min-width: 601px) {
  .sg-modal-panel,
  .guide-panel {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .sg-modal.is-open .sg-modal-panel,
  .product-guide-modal.is-open .guide-panel {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Mobile: slide up */
@media (max-width: 600px) {
  .sg-modal-panel,
  .guide-panel {
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
  }
  .sg-modal.is-open .sg-modal-panel,
  .product-guide-modal.is-open .guide-panel {
    transform: translateY(0);
  }
}

/* Tags — smaller, tighter top, small bottom gap */
.product-utag-pill { font-size: 0.68rem !important; padding: 0.15rem 0.45rem !important; }
.product-utags { margin-top: 0.25rem !important; margin-bottom: 6px !important; }

/* Related products — white bg, no yellow border */
.product-related { background: #ffffff !important; border-top: none !important; }
.product-related::before { display: none !important; }

/* Product stats strip — less vertical padding */
.product-stats-strip { padding: 2rem 0 !important; }

/* Values strip — reduced vertical padding (all pages) */
.values-strip { padding-block: 2rem !important; }

/* Dog cats title — smaller, more integrated */
.dog-cats-title { font-size: clamp(1.5rem, 2.5vw, 2.2rem) !important; }

/* Dog cats title + bestsellers title — match brand-title-box size */
.dog-cats-title { font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: 0.03em !important; }
.products-section .section-title { font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: 0.03em !important; }

/* נמכר ביותר + חטיפים לכלבים + אנדרדוג במדיה — brand-title-box style */
.dog-cats-title,
.products-section .section-title,
.instagram-section .section-title {
  display: inline-block !important;
  background: #0d0d0d !important;
  color: #ffffff !important;
  padding: 0.55rem 1.6rem !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
}

/* Remove black bg from section titles */
.dog-cats-title,
.products-section .section-title,
.instagram-section .section-title {
  background: none !important;
  color: #0d0d0d !important;
  padding: 0 !important;
}

/* Section titles — unified 1.9rem (matching process section) */
.dog-cats-title,
.products-section .section-title,
.instagram-section .section-title {
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

/* חטיפים לכלבים + נמכר ביותר — match about-story-headline size */
.dog-cats-title,
.products-section .section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

/* ============================================================
   MOBILE — Full pass: Homepage + Product Page (2026-05-26)
   ============================================================ */

@media (max-width: 768px) {

  /* ── Brand story (homepage) — stack on mobile ── */
  .ud-homepage-story .about-story-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .ud-homepage-story .about-story-visual {
    order: -1 !important;
    width: 100% !important;
  }
  .ud-homepage-story .about-story-img-frame {
    aspect-ratio: 4/3 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── Values strip — 3 cols ── */
  .values-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── Process section title ── */
  .process-section .brand-title-box {
    font-size: 1.3rem !important;
    padding: 0.6rem 1.4rem !important;
  }
  .ud-benefits-section .brand-title-box {
    font-size: 1.3rem !important;
    padding: 0.6rem 1.4rem !important;
  }

  /* ── Benefits grid — 2 cols ── */
  .ud-benefits-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem 1rem !important;
  }

  /* ── Section titles ── */
  .dog-cats-title,
  .products-section .section-title,
  .instagram-section .section-title {
    font-size: clamp(1.4rem, 5vw, 1.9rem) !important;
  }

  /* ── Product layout — stack (gallery top, info bottom) ── */
  .product-layout {
    grid-template-columns: 1fr !important;
    direction: rtl !important;
  }
  .product-gallery,
  .product-info { width: 100% !important; max-width: 100% !important; }

  /* ── Product purchase box ── */
  .product-purchase-box { padding: 1rem !important; }

  /* ── Product mini trust — wrap ── */
  .product-mini-trust {
    flex-direction: column !important;
    gap: 0.4rem !important;
  }

  /* ── Product info btns — stack ── */
  .product-info-btns { flex-direction: column !important; align-items: flex-start !important; }

  /* ── Product attr buttons — wrap ── */
  .product-attr-buttons { flex-wrap: wrap !important; gap: 0.5rem !important; }

  /* ── Product qty row — stack on mobile ── */
  .product-qty-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .product-atc-btn { width: 100% !important; justify-content: center !important; }
  .product-qty-control { width: fit-content !important; }

  /* ── Product stats strip — 3x2 ── */
  .product-stats-list { flex-wrap: wrap !important; justify-content: center !important; gap: 0.5rem 2rem !important; }
  .product-stats-item { flex: 0 0 calc(33% - 1rem) !important; }

  /* ── Related products title ── */
  .product-related .section-title { font-size: 1.4rem !important; }

}

@media (max-width: 480px) {

  /* ── Values strip — 2 cols on very small ── */
  .values-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Dog cats grid ── */
  .dog-cats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; }

  /* ── Benefits — keep 2 cols but compact ── */
  .ud-benefit-circle img { width: 80px !important; height: 80px !important; }
  .ud-benefit-title { font-size: 0.85rem !important; }
  .ud-benefit-desc { font-size: 0.75rem !important; }

  /* ── Product page ── */
  .product-single-name { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; }
  .product-stats-item { flex: 0 0 calc(50% - 1rem) !important; }

}

/* ── Benefits section mobile fix ── */
@media (max-width: 600px) {

  /* Title centered */
  .ud-benefits-section .process-header { text-align: center !important; }

  /* Grid: proper 2 cols, no max-width cap */
  .ud-benefits-grid {
    gap: 1.8rem 0.75rem !important;
    padding: 0 0.25rem;
  }
  .ud-benefit-item {
    flex: 0 0 calc(50% - 0.75rem) !important;
    max-width: none !important;
    gap: 0.5rem !important;
  }

  /* Circle + image — consistent size */
  .ud-benefit-circle {
    width: 90px !important;
    height: 90px !important;
    overflow: hidden !important;
  }
  .ud-benefit-circle img {
    width: 90px !important;
    height: 90px !important;
  }

  /* Text tighter */
  .ud-benefit-title {
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
  }
  .ud-benefit-desc {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
  }

}

/* Sale badges — red everywhere */
.woocommerce span.onsale { background: #D4A030 !important; color: #fff !important; }
.product-sale-badge { background: #D4A030 !important; color: #fff !important; }

/* ── Benefits title — reset min-width so it fits + centers on mobile ── */
@media (max-width: 600px) {
  .ud-benefits-section .brand-title-box {
    min-width: 0 !important;
    max-width: 88% !important;
    width: auto !important;
    font-size: 1.3rem !important;
    padding: 0.8rem 1.8rem 1rem !important;
  }
  .ud-benefits-section .process-header {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   BADGE + CART FIXES  (2026-05-26)
   ════════════════════════════════════════════════════════════════ */

/* 1. Header cart badge — white bg, black count */
.cart-count {
  background: #ffffff !important;
  color: #0d0d0d !important;
  border-color: #e0e0e0 !important;
}

/* 2. Cart flyout — checkout button: green */
.cart-flyout-body .woocommerce-mini-cart__buttons .button.checkout,
.cart-flyout-body .woocommerce-mini-cart__buttons .checkout {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #fff !important;
}
.cart-flyout-body .woocommerce-mini-cart__buttons .button.checkout:hover,
.cart-flyout-body .woocommerce-mini-cart__buttons .checkout:hover {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
}

/* 3. במלאי in-stock badge — green */
.product-sale-badge--green {
  background: #7c3aed !important;
  color: #fff !important;
}

/* 4. Product-card מבצע badge — dark, rounded (not red, no square corners) */
.product-badge {
  background: #0d0d0d !important;
  color: #fff !important;
  border-radius: 100px !important;
}

/* 4b. WooCommerce default onsale badge — dark + rounded */
.woocommerce span.onsale {
  background: #0d0d0d !important;
  color: #fff !important;
  border-radius: 100px !important;
}

/* ── מבצע badge — אדום + מרובע (override) ── */
.product-badge {
  background: #D4A030 !important;
  color: #fff !important;
  border-radius: 0 !important;
}
.woocommerce span.onsale {
  background: #D4A030 !important;
  color: #fff !important;
  border-radius: 0 !important;
}

/* ── תגיות על כרטיס מוצר — קטן יותר + פינות מרובעות ── */
.product-utag-pill {
  border-radius: 0 !important;
  font-size: 0.65rem !important;
  padding: 0.12rem 0.4rem !important;
}

/* אנדרדוג במדיה — כותרת זהה לנמכר ביותר */
.instagram-section .section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

/* כפתורי בחירת גודל — אפור במקום קרם */
.product-purchase-box .attr-btn {
  background: #e8e8e8 !important;
  border-color: #e8e8e8 !important;
  color: #0d0d0d !important;
}
.product-purchase-box .attr-btn:hover {
  background: #d2d2d2 !important;
  border-color: #d2d2d2 !important;
}
.product-purchase-box .attr-btn.active {
  background: #0d0d0d !important;
  border-color: #0d0d0d !important;
  color: #fff !important;
}

/* Process section — רקע אפור #484846 */
.process-section {
  background: #484846 !important;
}

/* Process section — טקסט לבן על רקע כהה */
.process-step-label,
.process-step-desc {
  color: #ffffff !important;
}
.process-step-circle {
  border-color: #ffffff !important;
  background: transparent !important;
  color: #ffffff !important;
}
.process-step-num {
  background: #ffffff !important;
  color: #0d0d0d !important;
}

/* Process section — רקע אפור בהיר יותר */
.process-section {
  background: #6e6e6c !important;
}


/* ============================================================
   HOMENEW — WHITE MINIMALIST (v2, client request 2026-05-28)
   ============================================================ */

/* 1. White backgrounds throughout */
.process-section            { background: #ffffff !important; }
.ud-benefits-section        { background: #ffffff !important; }
.products-section           { background: #ffffff !important; border-top: none !important; }
.instagram-section          { background: #ffffff !important; }
.dog-cats-section           { background: #ffffff !important; }
.about-story.ud-homepage-story { background: #ffffff !important; }

/* 2. Process section — dark text on white bg */
.process-step-label         { color: #0d0d0d !important; }
.process-step-desc          { color: #555555 !important; }
.process-step-circle        { border-color: rgba(0,0,0,0.15) !important; background: #f5f5f5 !important; color: #0d0d0d !important; }
.process-step-num           { background: #0d0d0d !important; color: #ffffff !important; }

/* 3. Reduce section spacing */
.section                    { padding-block: 5rem !important; }
.process-section            { padding: 5rem 0 3.5rem !important; }
.ud-benefits-section        { padding: 5rem 0 3.5rem !important; }
.products-section           { padding-block: 5rem !important; }
.instagram-section          { padding-block: 5rem !important; }
.section-header             { margin-bottom: 2.5rem !important; }
.dog-cats-header            { margin-bottom: 2.5rem !important; }

/* 4. Section title frame */
.section-header--center .section-title,
.dog-cats-title             { display: inline-block; border: 1.5px solid #0d0d0d; padding: 0.08em 0.55em 0.14em; line-height: 1.05; }

/* 5. Centered section header: column layout */
.section-header--center     { flex-direction: column; align-items: center; }


/* ============================================================
   HOMENEW — Brand story image: landscape (2026-05-28)
   ============================================================ */
.ud-homepage-story .about-story-grid {
  grid-template-columns: 1fr 1.5fr !important;
}
.ud-homepage-story .about-story-img-frame {
  aspect-ratio: 4 / 3 !important;
  max-height: none !important;
}
@media (max-width: 768px) {
  .ud-homepage-story .about-story-img-frame {
    aspect-ratio: 4 / 3 !important;
  }
}

/* ============================================================
   HOMENEW — Brand story image: bigger landscape (2026-05-28 v2)
   ============================================================ */
.ud-homepage-story .about-story-grid {
  grid-template-columns: 0.6fr 2fr !important;
}
.ud-homepage-story .about-story-img-frame {
  aspect-ratio: 4 / 3 !important;
  max-height: none !important;
  width: 100% !important;
}

/* ============================================================
   HOMENEW — Brand story image: RTL-correct (2026-05-28 v3)
   RTL: column-1 = RIGHT = image, column-2 = LEFT = text
   ============================================================ */
.ud-homepage-story .about-story-grid {
  grid-template-columns: 2fr 1fr !important;
}
.ud-homepage-story .about-story-img-frame {
  aspect-ratio: 4 / 3 !important;
  max-height: none !important;
  width: 100% !important;
}

/* HOMENEW — Brand story 50/50 (2026-05-28 v4) */
.ud-homepage-story .about-story-grid {
  grid-template-columns: 1fr 1fr !important;
}
.ud-homepage-story .about-story-img-frame {
  aspect-ratio: 4 / 3 !important;
  max-height: none !important;
}

/* ============================================================
   HOMENEW — Dog cats + Bestsellers titles: TITLEBG brush stroke (2026-05-28)
   ============================================================ */
.dog-cats-title,
.products-section .section-title {
  display: inline-block !important;
  background-color: transparent !important;
  background-image: url('https://underdogs-il.com/wp-content/uploads/2026/05/TITLEBG.png') !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  color: #ffffff !important;
  padding: 1.2rem 5rem 1.5rem !important;
  border: none !important;
  min-width: 420px !important;
  font-size: 2.4rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* HOMENEW — Instagram section title: TITLEBG (2026-05-28) */
.instagram-section .section-title {
  display: inline-block !important;
  background-color: transparent !important;
  background-image: url('https://underdogs-il.com/wp-content/uploads/2026/05/TITLEBG.png') !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  color: #ffffff !important;
  padding: 1.2rem 5rem 1.5rem !important;
  border: none !important;
  min-width: 420px !important;
  font-size: 2.4rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* ============================================================
   PRE-FOOTER VALUES — same style as about-detail-section
   ============================================================ */
.pre-footer-values {
  background: var(--color-black);
  padding-block: 5rem;
  position: relative;
  overflow: hidden;
}
.pre-footer-values::before {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,48,0.55) 0%, transparent 70%);
  filter: blur(72px);
  top: -120px; inset-inline-end: 8%;
  pointer-events: none; z-index: 0;
}
.pre-footer-values::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100,60,180,0.45) 0%, transparent 70%);
  filter: blur(80px);
  bottom: -80px; inset-inline-start: 5%;
  pointer-events: none; z-index: 0;
}
.pre-footer-values .container { position: relative; z-index: 1; }

/* PRODUCT ATC GOLD BUTTON — override .product-purchase-box specificity (2026-05-28) */
.product-purchase-box .product-atc-btn.btn--gold {
  background: #D4A030 !important;
  background-color: #D4A030 !important;
  color: #0d0d0d !important;
  border-color: #D4A030 !important;
}
.product-purchase-box .product-atc-btn.btn--gold:hover:not(:disabled) {
  background: #E8B840 !important;
  background-color: #E8B840 !important;
  border-color: #E8B840 !important;
}
.product-purchase-box .product-atc-btn.btn--gold:disabled,
.product-purchase-box .product-atc-btn.btn--gold[disabled] {
  background: #c4c4c4 !important;
  background-color: #c4c4c4 !important;
  color: #888 !important;
  border-color: #c4c4c4 !important;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════
   ABOUT PAGE UPGRADES — 2026-05-28
   1. Story image → landscape 4/3
   2. FAQ → dark premium, centered, numbered, gold accents
═══════════════════════════════════════════════════════════════════ */

/* ── 1. About story image: landscape ─────────────────────────────── */
.about-story .about-story-img-frame {
  aspect-ratio: 4 / 3 !important;
  max-height: none !important;
}

/* ── 2. FAQ — dark premium redesign ─────────────────────────────── */

/* Background + orbs */
.faq-section--about {
  background: var(--color-black) !important;
  position: relative;
  overflow: hidden;
}
.faq-section--about::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,48,48,0.45) 0%, transparent 70%);
  filter: blur(80px);
  top: -100px; inset-inline-end: 5%;
  pointer-events: none; z-index: 0;
}
.faq-section--about::after {
  content: '';
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80,40,160,0.35) 0%, transparent 70%);
  filter: blur(70px);
  bottom: -80px; inset-inline-start: 8%;
  pointer-events: none; z-index: 0;
}

/* Override 2-column to centered single-column */
.faq-section--about .container {
  display: block !important;
  max-width: 820px !important;
  position: relative;
  z-index: 1;
}

/* Header — centered with brush stroke title */
.faq-section--about .faq-header {
  text-align: center !important;
  position: static !important;
  margin-bottom: 3.5rem !important;
}
.faq-section--about .faq-header::before {
  color: #D4A030 !important;
  background: rgba(212,160,48,0.12) !important;
}
.faq-section--about .faq-title {
  display: inline-block !important;
  background-color: transparent !important;
  background-image: url('https://underdogs-il.com/wp-content/uploads/2026/05/TITLEBG.png') !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  color: #ffffff !important;
  padding: 1.2rem 4rem 1.5rem !important;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  min-width: 360px !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
.faq-section--about .faq-header::after {
  color: rgba(255,255,255,0.45) !important;
}

/* FAQ list — full width */
.faq-section--about .faq-list {
  max-width: none !important;
  margin: 0 !important;
  counter-reset: faq-num;
}

/* Items — dark border lines */
.faq-section--about .faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  border-inline-start: none !important;
  padding-inline-start: 0 !important;
  counter-increment: faq-num;
}
.faq-section--about .faq-item:first-child {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}
.faq-section--about .faq-item[open] {
  border-inline-start: 3px solid #D4A030 !important;
  padding-inline-start: 1.25rem !important;
}

/* Question text — white with gold number prefix */
.faq-section--about .faq-question {
  color: rgba(255,255,255,0.9) !important;
  font-size: 1.05rem !important;
  padding: 1.5rem 0 !important;
  gap: 1.25rem !important;
}
.faq-section--about .faq-question::before {
  content: counter(faq-num, decimal-leading-zero);
  color: #D4A030;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  opacity: 0.75;
  order: 1;
}
.faq-section--about .faq-question:hover {
  color: #D4A030 !important;
}
.faq-section--about .faq-item[open] .faq-question {
  color: #D4A030 !important;
}

/* Icon — white base, gold when open */
.faq-section--about .faq-icon {
  border-color: rgba(255,255,255,0.25) !important;
}
.faq-section--about .faq-icon::before,
.faq-section--about .faq-icon::after {
  background: rgba(255,255,255,0.8) !important;
}
.faq-section--about .faq-item[open] .faq-icon {
  background: #D4A030 !important;
  border-color: #D4A030 !important;
}
.faq-section--about .faq-item[open] .faq-icon::before,
.faq-section--about .faq-item[open] .faq-icon::after {
  background: #0d0d0d !important;
}

/* Answer — muted white */
.faq-section--about .faq-answer p {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.95rem !important;
  max-width: 70ch !important;
  line-height: 1.8 !important;
}

/* WhatsApp CTA button */
.faq-section--about .faq-header-cta p {
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.85rem !important;
}
.faq-section--about .btn--outline {
  border-color: rgba(255,255,255,0.25) !important;
  color: rgba(255,255,255,0.8) !important;
  background: transparent !important;
}
.faq-section--about .btn--outline:hover {
  border-color: #D4A030 !important;
  color: #D4A030 !important;
}

@media (max-width: 640px) {
  .faq-section--about .faq-title {
    min-width: 280px !important;
    padding: 1rem 2.5rem 1.3rem !important;
    font-size: 1.6rem !important;
  }
}


/* ================== PRODUCT PAGE REDESIGN 2026-05-28c ================== */

/* Product title — smaller, black bg, square corners */
.product-single-name {
    display: inline-block;
    background: #0d0d0d;
    color: #ffffff !important;
    padding: 0.3rem 0.8rem 0.35rem;
    border-radius: 0 !important;
    font-size: clamp(1.3rem, 2.2vw, 1.9rem) !important;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

/* Gallery RIGHT, Info LEFT on desktop */
@media (min-width: 768px) {
    .product-layout .product-gallery { order: 2; }
    .product-layout .product-info    { order: 1; }
}

/* Related products — brand-title-box match process section */
.product-related .brand-title-box {
    text-align: center;
    margin-bottom: 2.5rem;
}


/* Related products — center the brand-title-box like process section */
.product-related .section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.product-related .brand-title-box {
    display: inline-block;
}

/* Related products — center brand-title-box in flex section-header */
.product-related .section-header {
    justify-content: center !important;
    text-align: center !important;
}

/* ================== PRODUCT PAGE FIX3 2026-05-28d ================== */

/* Related products title — TITLEBG brush stroke (match process section) */
.product-related .section-header {
    display: flex;
    justify-content: center;
}
.product-related .brand-title-box {
    background-color: transparent !important;
    background-image: url('https://underdogs-il.com/wp-content/uploads/2026/05/TITLEBG.png') !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    padding: 1.2rem 5rem 1.5rem !important;
    min-width: 320px;
}
.product-related .brand-title-box h2 {
    color: #ffffff !important;
    text-align: center !important;
    font-size: 2rem !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    position: relative;
    z-index: 1;
}

/* Product title — fit background to text width only */
.product-single-name {
    width: fit-content !important;
    max-width: 100%;
    align-self: flex-start;
}

/* ================== PRODUCT PAGE FIX4 2026-05-28e ================== */

/* Related products title — match process section size (2.4rem) */
.product-related .brand-title-box {
    font-size: 2.4rem !important;
    padding: 1.2rem 5rem 1.5rem !important;
}
.product-related .brand-title-box h2 {
    font-size: 2.4rem !important;
}

/* ================== PRODUCT PAGE MOBILE FIX 2026-05-28f ================== */

@media (max-width: 768px) {
    /* Related products title — match process section mobile size */
    .product-related .brand-title-box {
        font-size: 1.3rem !important;
        padding: 0.6rem 1.4rem !important;
        min-width: 0 !important;
    }
    .product-related .brand-title-box h2 {
        font-size: 1.3rem !important;
    }
}

/* ================== CART FLYOUT PREMIUM REDESIGN 2026-05-28g ================== */

/* Panel: RIGHT side (override inset-inline-end logic for RTL) */
.cart-flyout-panel {
    right: 0 !important;
    left: auto !important;
    inset-inline-start: auto !important;
    box-shadow: -8px 0 48px rgba(0,0,0,0.20) !important;
    border-left: 1px solid #e8e8e8 !important;
    border-right: none !important;
    display: flex !important;
    flex-direction: column !important;
}
@keyframes flyoutIn {
    from { transform: translateX(50px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* Header */
.cart-flyout-header {
    background: #0d0d0d !important;
    color: #fff !important;
    padding: 1rem 1.3rem !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row-reverse !important;
    gap: 0.75rem !important;
}
.cart-flyout-title {
    color: #fff !important;
    font-size: 0.97rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
}
.cart-flyout-close {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: #fff !important;
    border-radius: 8px !important;
    width: 30px !important;
    height: 30px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background 0.15s !important;
}
.cart-flyout-close:hover { background: rgba(255,255,255,0.22) !important; }

/* Shipping Bar */
.cart-flyout-shipping-bar {
    padding: 0.65rem 1.3rem 0.7rem !important;
    background: #f8f8f8;
    border-bottom: 1px solid #efefef;
    flex-shrink: 0;
    direction: rtl;
}
.cfship-msg {
    font-size: 0.8rem !important;
    color: #666 !important;
    margin: 0 0 0.45rem !important;
    line-height: 1.4 !important;
}
.cfship-msg strong { color: #0d0d0d !important; font-weight: 800 !important; }
.cfship-msg--done  { color: #277a3e !important; font-weight: 700 !important; }
.cfship-track {
    height: 5px;
    background: #e5e5e5;
    border-radius: 99px;
    overflow: hidden;
}
.cfship-fill {
    height: 100%;
    background: linear-gradient(90deg, #c4941e, #e8b535);
    border-radius: 99px;
    transition: width 0.55s cubic-bezier(0.4,0,0.2,1);
    min-width: 4px;
}
.cart-flyout-shipping-bar.is-free .cfship-fill { background: #277a3e; }

/* Body */
.cart-flyout-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 0 !important;
    direction: rtl;
    transition: opacity 0.2s;
}

/* Item List */
.cart-flyout-body .woocommerce-mini-cart {
    list-style: none !important;
    margin: 0 !important;
    padding: 0.3rem 0 !important;
}
.cart-flyout-body .woocommerce-mini-cart-item {
    display: grid !important;
    grid-template-columns: 70px 1fr 24px !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    gap: 0.2rem 0.9rem !important;
    padding: 0.9rem 1.2rem !important;
    border-bottom: 1px solid #f2f2f2 !important;
    direction: rtl !important;
    position: relative !important;
}
.cart-flyout-body .woocommerce-mini-cart-item:last-child { border-bottom: none !important; }

/* Image — col 1 */
.cart-flyout-body .woocommerce-mini-cart-item > a:has(img) {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
}
.cart-flyout-body .woocommerce-mini-cart-item img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    border: 1.5px solid #efefef !important;
    display: block !important;
}

/* Name — col 2 row 1 */
.cart-flyout-body .woocommerce-mini-cart-item > a:not(.remove_from_cart_button):not(:has(img)) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    color: #0d0d0d !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}
.cart-flyout-body .woocommerce-mini-cart-item > a:not(.remove_from_cart_button):not(:has(img)):hover {
    color: #D4A030 !important;
}

/* Quantity — col 2 row 2 */
.cart-flyout-body .woocommerce-mini-cart-item .quantity {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 0.8rem !important;
    color: #888 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    flex-wrap: wrap !important;
}
.cart-flyout-body .woocommerce-mini-cart-item .quantity .woocommerce-Price-amount {
    font-weight: 800 !important;
    color: #0d0d0d !important;
    font-size: 0.88rem !important;
}

/* Remove — col 3 */
.cart-flyout-body .remove_from_cart_button {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #f2f2f2 !important;
    color: #bbb !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
.cart-flyout-body .remove_from_cart_button:hover {
    background: #fde8e8 !important;
    color: #c0392b !important;
}

/* Qty Stepper */
.ud-qty-stepper {
    display: inline-flex !important;
    align-items: center !important;
    border: 1.5px solid #e2e2e2 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-top: 0.4rem !important;
    height: 28px !important;
    flex-shrink: 0 !important;
}
.ud-qty-btn {
    width: 28px !important;
    height: 28px !important;
    background: #f7f7f7 !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #444 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s, color 0.15s !important;
    padding: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
.ud-qty-btn:hover { background: #0d0d0d !important; color: #fff !important; }
.ud-qty-num {
    min-width: 26px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    color: #0d0d0d !important;
    background: #fff !important;
    border-right: 1.5px solid #e2e2e2 !important;
    border-left: 1.5px solid #e2e2e2 !important;
}

/* Empty cart */
.cart-flyout-body .woocommerce-mini-cart__empty-message {
    text-align: center !important;
    padding: 3.5rem 1.5rem !important;
    color: #bbb !important;
    font-size: 0.9rem !important;
    direction: rtl !important;
    line-height: 1.8 !important;
}
.cart-flyout-body .woocommerce-mini-cart__empty-message::before {
    content: '🛒';
    display: block;
    font-size: 2.8rem;
    margin-bottom: 0.75rem;
    line-height: 1;
}

/* Total row */
.cart-flyout-body .woocommerce-mini-cart__total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.85rem 1.2rem !important;
    background: #f9f9f9 !important;
    border-top: 1.5px solid #ececec !important;
    direction: rtl !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}
.cart-flyout-body .woocommerce-mini-cart__total strong {
    font-size: 0.88rem !important;
    color: #888 !important;
    font-weight: 600 !important;
}
.cart-flyout-body .woocommerce-mini-cart__total .woocommerce-Price-amount {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: #0d0d0d !important;
}

/* Buttons */
.cart-flyout-body .woocommerce-mini-cart__buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
    padding: 0.85rem 1.2rem !important;
    background: #fff !important;
    border-top: 1px solid #f0f0f0 !important;
    flex-shrink: 0 !important;
}
.cart-flyout-body .woocommerce-mini-cart__buttons .button {
    width: 100% !important;
    text-align: center !important;
    padding: 0.85rem !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    display: block !important;
    letter-spacing: 0.03em !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
    cursor: pointer !important;
    direction: rtl !important;
}
/* Checkout → black */
.cart-flyout-body .woocommerce-mini-cart__buttons .button.checkout {
    background: #0d0d0d !important;
    color: #fff !important;
    border: 2px solid #0d0d0d !important;
}
.cart-flyout-body .woocommerce-mini-cart__buttons .button.checkout:hover {
    background: #D4A030 !important;
    border-color: #D4A030 !important;
    color: #0d0d0d !important;
}
/* Cart page → outlined */
.cart-flyout-body .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout) {
    background: transparent !important;
    color: #666 !important;
    border: 1.5px solid #ddd !important;
}
.cart-flyout-body .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):hover {
    background: transparent !important;
    border-color: #aaa !important;
    color: #0d0d0d !important;
}

/* Trust Strip */
.cart-flyout-trust {
    display: flex !important;
    justify-content: space-around !important;
    padding: 0.6rem 0.5rem !important;
    background: #f5f5f5 !important;
    border-top: 1px solid #ebebeb !important;
    flex-shrink: 0 !important;
    direction: rtl !important;
}
.cart-flyout-trust span {
    display: flex !important;
    align-items: center !important;
    gap: 0.28rem !important;
    font-size: 0.7rem !important;
    color: #999 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}
.cart-flyout-trust svg { flex-shrink: 0; opacity: 0.65; }

/* ================== CART FLYOUT ITEM LAYOUT FIX 2026-05-28h ================== */

/* Reset broken grid on items */
.cart-flyout-body .woocommerce-mini-cart-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0.85rem 1.2rem 0.85rem 2.6rem !important;
    border-bottom: 1px solid #f2f2f2 !important;
    direction: rtl !important;
    position: relative !important;
    align-items: stretch !important;
}

/* Remove button — absolute, far left */
.cart-flyout-body .woocommerce-mini-cart-item > a.remove_from_cart_button {
    position: absolute !important;
    top: 0.75rem !important;
    left: 0.75rem !important;
    grid-column: unset !important;
    grid-row: unset !important;
    align-self: unset !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #f2f2f2 !important;
    color: #bbb !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    line-height: 1 !important;
    transition: background 0.15s, color 0.15s !important;
}
.cart-flyout-body .woocommerce-mini-cart-item > a.remove_from_cart_button:hover {
    background: #fde8e8 !important;
    color: #c0392b !important;
}

/* Image+name link */
.cart-flyout-body .woocommerce-mini-cart-item > a:not(.remove_from_cart_button) {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    text-decoration: none !important;
    color: #0d0d0d !important;
    font-size: 0.87rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    grid-column: unset !important;
    grid-row: unset !important;
    margin-bottom: 0.5rem !important;
}
.cart-flyout-body .woocommerce-mini-cart-item > a:not(.remove_from_cart_button):hover {
    color: #D4A030 !important;
}
.cart-flyout-body .woocommerce-mini-cart-item img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1.5px solid #efefef !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* Quantity text */
.cart-flyout-body .woocommerce-mini-cart-item .quantity {
    grid-column: unset !important;
    grid-row: unset !important;
    font-size: 0.82rem !important;
    color: #888 !important;
    padding-right: calc(64px + 0.75rem) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 0.3rem !important;
}
.cart-flyout-body .woocommerce-mini-cart-item .quantity .woocommerce-Price-amount {
    font-weight: 800 !important;
    color: #0d0d0d !important;
    font-size: 0.88rem !important;
}

/* Stepper below quantity */
.cart-flyout-body .ud-qty-stepper {
    margin-right: calc(64px + 0.75rem) !important;
    margin-top: 0.15rem !important;
}

/* ── Add-to-Cart Toast ────────────────────────────────────────────── */
#ud-atc-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 99999;
  background: #0d0d0d;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  font-family: IBM Plex Sans Hebrew, sans-serif;
  font-size: 0.92rem;
  direction: rtl;
  min-width: 260px;
  max-width: 90vw;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s;
  opacity: 0;
  pointer-events: none;
  border-right: 3px solid #D4A030;
}
#ud-atc-toast.ud-toast--show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.ud-toast-check {
  color: #D4A030;
  font-size: 1.2rem;
  flex-shrink: 0;
  line-height: 1;
}
.ud-toast-msg {
  flex: 1;
  font-weight: 700;
  line-height: 1.3;
}
.ud-toast-msg small {
  display: block;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  font-size: 0.78rem;
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.ud-toast-link {
  color: #D4A030;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.15);
  padding-right: 1rem;
  flex-shrink: 0;
}
.ud-toast-link:hover { text-decoration: underline; }
.ud-toast-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}
.ud-toast-close:hover { color: #fff; }
@media (max-width: 600px) {
  #ud-atc-toast { bottom: 1rem; left: 1rem; right: 1rem; transform: translateX(0) translateY(120%); }
  #ud-atc-toast.ud-toast--show { transform: translateX(0) translateY(0); }
}

/* ── Product tag pills — final override (smaller + square) ─────── */
.product-utag-pill {
  font-size: 0.62rem !important;
  border-radius: 0 !important;
  padding: 0.12rem 0.4rem !important;
  letter-spacing: 0.02em !important;
}
.product-utag-pill:hover {
  background: #f0ece4 !important;
  color: #555 !important;
}

/* ── Equal height carousel cards — definitive fix ─────────────── */
.products-scroll {
  align-items: stretch !important;
}
.products-scroll li,
.products-scroll li.product {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
}
.products-scroll .product-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.products-scroll .product-card-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.products-scroll .product-footer {
  margin-top: auto !important;
}

/* ── Story section mobile fix — FINAL (after all desktop overrides) ─── */
@media (max-width: 820px) {
  .ud-homepage-story .about-story-grid,
  .about-story-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .ud-homepage-story .about-story-visual,
  .about-story-visual {
    order: -1 !important;
    width: 100% !important;
  }
  .ud-homepage-story .about-story-img-frame,
  .about-story-img-frame {
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    max-width: 100% !important;
  }
  .ud-homepage-story .about-story-content,
  .about-story-content {
    order: 1 !important;
    width: 100% !important;
  }
}

/* ── Section titles — unified size matching 'איך אנחנו מייצרים' (FINAL) ── */
.dog-cats-title,
.ud-benefits-section .brand-title-box,
.products-section .section-title,
.instagram-section .section-title {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

/* ── חטיפים לכלבים title — center on desktop ── */
.dog-cats-title { text-align: center !important; }

/* ── Brush-stroke titles mobile fix — match process section look ─────── */
@media (max-width: 820px) {
  .dog-cats-title,
  .products-section .section-title,
  .instagram-section .section-title {
    min-width: 0 !important;
    max-width: 88vw !important;
    width: auto !important;
    padding: 0.8rem 2rem 1rem !important;
    font-size: clamp(1.3rem, 5vw, 1.7rem) !important;
    display: inline-block !important;
    text-align: center !important;
  }
  /* Ensure the parent container centers the inline-block */
  .dog-cats-header,
  .products-section .section-header,
  .instagram-section .section-header {
    text-align: center !important;
    display: block !important;
  }
}

/* ── Dog-cat cards — name above image (new layout) ──────────────────── */
.dog-cat-card {
  display: flex !important;
  flex-direction: column !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}

/* Title panel — top black bar */
.dog-cat-content {
  position: static !important;
  padding: 0.6rem 0.9rem !important;
  background: #0d0d0d !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  z-index: auto !important;
  bottom: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  flex-direction: row !important;
  gap: 0 !important;
}

.dog-cat-name {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-align: center !important;
  line-height: 1.3 !important;
  letter-spacing: 0.02em !important;
}

/* Image area — fills remaining space */
.dog-cat-bg {
  position: relative !important;
  flex: 1 !important;
  min-height: 120px;
}
.dog-cat-bg img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Remove overlay (already removed from HTML but ensure CSS is clean) */
.dog-cat-overlay { display: none !important; }

/* Hover: subtle scale on image, gold left border on title */
.dog-cat-card:hover .dog-cat-content {
  background: #1a1a1a !important;
  border-inline-start: 3px solid #D4A030;
}
.dog-cat-card:hover .dog-cat-bg img {
  transform: scale(1.06) !important;
}

/* Remove bottom color bar (not needed with new layout) */
.dog-cat-card::after { display: none !important; }

/* Mobile — name slightly smaller */
@media (max-width: 768px) {
  .dog-cat-name { font-size: 0.75rem !important; }
  .dog-cat-content { padding: 0.45rem 0.5rem !important; }
  .dog-cat-bg { min-height: 90px; }
}

/* ── 'איך אנחנו מייצרים' — match 'חטיפים לכלבים' size everywhere ── */
.process-section .brand-title-box {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem) !important;
  padding: 0.8rem 2.5rem 1rem !important;
}

/* ── Dog-cat cards v2 — light gray header + full image ───────────────── */

/* Title: light gray bg, dark text — no heavy black */
.dog-cat-content {
  background: #f2f2f2 !important;
  border-bottom: 1px solid #e0e0e0 !important;
}
.dog-cat-name {
  color: #0d0d0d !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}
.dog-cat-card:hover .dog-cat-content {
  background: #eaeaea !important;
  border-inline-start: 3px solid #D4A030 !important;
}

/* Image: contain so full image is visible, square ratio */
.dog-cat-card {
  aspect-ratio: 1 / 1.25 !important;
}
.dog-cat-bg {
  flex: 1 !important;
  background: #fff !important;
}
.dog-cat-bg img {
  object-fit: contain !important;
  padding: 0.4rem !important;
}

/* Mobile */
@media (max-width: 768px) {
  .dog-cat-name { font-size: 0.7rem !important; }
}

/* ── Dog-cat cards — title flush to bottom, no gap ──────────────────── */
.dog-cat-card {
  gap: 0 !important;
  flex-direction: column !important;
}
.dog-cat-content {
  order: 2 !important;
  border-top: 1px solid #e8e8e8 !important;
  border-bottom: none !important;
  margin: 0 !important;
}
.dog-cat-bg {
  order: 1 !important;
  margin: 0 !important;
}

/* ── Dog-cat card fixes — 5th card same size + mobile no-gap ─────────── */

/* Fix 5th card: same size as others (no full-width, no wide aspect ratio) */
.dog-cats-grid .dog-cat-card:nth-child(5) {
  grid-column: auto !important;
  aspect-ratio: auto !important;
  min-height: auto !important;
}

/* Mobile: zero gap between image and title */
@media (max-width: 820px) {
  .dog-cat-card {
    gap: 0 !important;
  }
  .dog-cat-bg {
    margin: 0 !important;
    padding: 0 !important;
  }
  .dog-cat-content {
    margin: 0 !important;
  }
  /* Make sure 5th card is same width as others in 2-col grid */
  .dog-cats-grid .dog-cat-card:nth-child(5) {
    grid-column: auto !important;
    aspect-ratio: auto !important;
  }
}

/* ── Dog-cat FINAL fixes: card5 height + image gap ──────────────────── */

/* Fix card5: restore aspect-ratio like others (removed auto override) */
.dog-cats-grid .dog-cat-card:nth-child(5) {
  aspect-ratio: 1 / 1.25 !important;
}

/* Fix gap: remove bottom padding from image so it touches the label */
.dog-cat-bg img {
  padding: 0.3rem 0.3rem 0 !important;
}

/* Mobile: ensure card5 same height as others */
@media (max-width: 820px) {
  .dog-cats-grid .dog-cat-card:nth-child(5) {
    aspect-ratio: 1 / 1.25 !important;
    grid-column: auto !important;
  }
  .dog-cat-bg img {
    padding: 0.2rem 0.2rem 0 !important;
  }
}

/* ── Dog-cat image: no padding — flush with label on all sides ─────── */
.dog-cat-bg img {
  padding: 0 !important;
}

/* ── FAQ section — above process (new position) — clean title, full width ── */
.faq-section--about .faq-header {
  position: static !important;
  top: auto !important;
  text-align: center !important;
  margin-bottom: var(--space-lg) !important;
}
/* Remove red pill background from title */
.faq-section--about .faq-header::before {
  background: none !important;
  color: var(--color-mid-gray) !important;
  border: 1px solid #e0e0e0 !important;
}
/* Full width FAQ list */
.faq-section--about .faq-layout {
  display: block !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}
.faq-section--about .faq-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  text-align: center !important;
}
@media (max-width: 820px) {
  .faq-section--about .faq-layout { display: block !important; }
  .faq-section--about .faq-header { position: static !important; }
}

/* ── Filter pills — square corners ──────────────────────────────── */
.pf-pill,
.pf-pill.is-active {
  border-radius: 0 !important;
}

/* ── Archive subcats — centered + no shadow ─────────────────────── */
.archive-subcats-grid {
  justify-content: center !important;
}
.archive-subcat-card,
.archive-subcat-card:hover {
  box-shadow: none !important;
}

/* ── מבצע badge — #F0C020 ───────────────────────────────────────── */
.product-badge,
.woocommerce span.onsale {
  background: #F0C020 !important;
  color: #0d0d0d !important;
}

/* ── Archive subcats — full-width equal spread ──────────────────── */
.archive-subcats-grid {
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  overflow-x: visible !important;
}
.archive-subcat-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* ── Archive subcats — square + full image + no overlay ─────────── */
.archive-subcat-card {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}
.archive-subcat-bg img {
  object-fit: contain !important;
}
.archive-subcat-overlay {
  display: none !important;
}
/* Keep text readable without overlay */
.archive-subcat-content {
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%) !important;
}

/* ── Archive subcats — name top-right, smaller + bolder ────────── */
.archive-subcat-card {
  align-items: flex-start !important;
}
.archive-subcat-content {
  background: none !important;
  padding: 0.55rem 0.7rem !important;
  align-items: flex-end !important;
}
.archive-subcat-name {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: end !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.archive-subcat-arrow { display: none !important; }

/* ── Subcat name — right-aligned + bigger ───────────────────────── */
.archive-subcat-content {
  align-items: flex-end !important;
  inset-inline-start: auto !important;
  inset-inline-end: 0 !important;
  width: auto !important;
  padding: 0.5rem 0.65rem !important;
}
.archive-subcat-name {
  font-size: 0.95rem !important;
  text-align: end !important;
}

/* ── מבצע badge — white text ────────────────────────────────────── */
.product-badge,
.woocommerce span.onsale {
  color: #ffffff !important;
}

/* ── Manifesto strip — square corners ───────────────────────────── */
.manifesto-strip {
  border-radius: 0 !important;
}

/* ── Newsletter input + button — square corners ─────────────────── */
.footer-nl-input,
.footer-nl-btn {
  border-radius: 0 !important;
}

/* ── Pre-footer lead strip — square corners ─────────────────────── */
.about-detail-lead {
  border-radius: 0 !important;
}

/* ── FAQ section — remove badge, center list ────────────────────── */
.faq-section--about .faq-header::before {
  display: none !important;
}
.faq-section--about .faq-list {
  max-width: 760px !important;
  margin-inline: auto !important;
}

/* ── Global font — replace stray Heebo with IBM Plex Sans Hebrew ── */
* { font-family: inherit; }
[style*="Heebo"] {
  font-family: "IBM Plex Sans Hebrew", sans-serif !important;
}

/* ── About-detail-lead strip — #F0C020 background ──────────────── */
.about-detail-lead {
  background: #F0C020 !important;
  border-color: #F0C020 !important;
  color: #0d0d0d !important;
}

/* ── FAQ title (about page) — remove background image, plain style ─ */
.faq-section--about .faq-title {
  background-image: none !important;
  background-color: transparent !important;
  color: var(--color-black) !important;
  text-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  display: block !important;
}

/* =============================================================================
   GLOBAL FONT LOCK — IBM Plex Sans Hebrew everywhere, no exceptions
   ============================================================================= */
*,
*::before,
*::after,
html, body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, ul, ol,
button, input, textarea, select, label,
table, td, th,
blockquote, code, pre {
  font-family: "IBM Plex Sans Hebrew", sans-serif !important;
}
code, pre, kbd, samp {
  font-family: "Courier New", monospace !important;
}

/* ── Hero trust items — square corners ──────────────────────────── */
.hero-trust-item {
  border-radius: 0 !important;
}

/* ── Blog Posts Carousel ─────────────────────────────────────────── */
.posts-carousel-section { background: var(--color-off-white); padding-block: var(--space-xl); }

.posts-carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.posts-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  padding-block: 0.5rem;
}
.posts-carousel::-webkit-scrollbar { display: none; }

.post-card {
  flex: 0 0 calc(25% - 0.75rem);
  min-width: 240px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--color-light-gray);
  text-decoration: none;
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.1);
}

.post-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-light-gray);
}
.post-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.post-card:hover .post-card-img img { transform: scale(1.05); }
.post-card-img-placeholder { width: 100%; height: 100%; background: var(--color-light-gray); }

.post-card-body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}
.post-card-cat {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-red, #f0c020);
}
.post-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}
.post-card-excerpt {
  font-size: 0.82rem;
  color: var(--color-mid-gray);
  line-height: 1.6;
  margin: 0;
}

.posts-carousel-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1.5px solid var(--color-light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  color: var(--color-black);
}
.posts-carousel-btn:hover {
  background: var(--color-black);
  border-color: var(--color-black);
  color: #fff;
}

@media (max-width: 900px) {
  .post-card { flex: 0 0 calc(50% - 0.5rem); }
}
@media (max-width: 560px) {
  .post-card { flex: 0 0 80%; }
  .posts-carousel-btn { display: none; }
}

/* ── Archive subcats — match homepage dog-cat-card design ───────── */
.archive-subcat-card {
  overflow: visible !important;
  aspect-ratio: unset !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  background: var(--cat-accent, #e03030) !important;
  border-radius: 0 !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.archive-subcat-card:hover {
  transform: scale(1.03) translateY(-5px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2) !important;
}
.archive-subcat-bg {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  inset: unset !important;
  width: 100% !important;
}
.archive-subcat-bg img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.45s ease !important;
}
.archive-subcat-card:hover .archive-subcat-bg img {
  transform: scale(1.07) !important;
}
.archive-subcat-overlay,
.archive-subcat-accent {
  display: none !important;
}
.archive-subcat-content {
  position: relative !important;
  inset: unset !important;
  background: #f2f2f2 !important;
  padding: 0.7rem 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}
.archive-subcat-name {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #0d0d0d !important;
  text-align: center !important;
  text-shadow: none !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE TITLES — no bg, black, +25% size
   Excluded: hero, about-story section
   ═══════════════════════════════════════════════════════════════════ */

/* brand-title-box (process + benefits) — remove TITLEBG, no bg, black */
.brand-title-box,
.process-section .brand-title-box,
.ud-benefits-section .brand-title-box {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: #0d0d0d !important;
}
.brand-title-box h2,
.brand-title-box h3,
.process-section .brand-title-box h2,
.ud-benefits-section .brand-title-box h2 {
  background: none !important;
  background-image: none !important;
  color: #0d0d0d !important;
  text-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
}

/* All homepage section titles — black, +25%, no bg */
.dog-cats-title,
.products-section .section-title,
.instagram-section .section-title,
.posts-carousel-section .section-title {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  color: #0d0d0d !important;
  text-shadow: none !important;
  padding: 0 !important;
  font-size: clamp(2.25rem, 4.375vw, 3.5rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

/* Process + Benefits brand-title-box h2/h3 size */
.process-section .brand-title-box h2,
.ud-benefits-section .brand-title-box h2 {
  font-size: clamp(2.25rem, 4.375vw, 3.5rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

/* ── Posts carousel — 3 per row on desktop ──────────────────────── */
.post-card {
  flex: 0 0 calc(33.333% - 0.67rem) !important;
}
@media (max-width: 900px) {
  .post-card { flex: 0 0 calc(50% - 0.5rem) !important; }
}
@media (max-width: 560px) {
  .post-card { flex: 0 0 80% !important; }
}

/* ── Homepage titles — -10% size ────────────────────────────────── */
.dog-cats-title,
.products-section .section-title,
.instagram-section .section-title,
.posts-carousel-section .section-title,
.process-section .brand-title-box h2,
.ud-benefits-section .brand-title-box h2 {
  font-size: clamp(2.025rem, 3.94vw, 3.15rem) !important;
}

/* ── Blog carousel — white bg, no title border ──────────────────── */
.posts-carousel-section {
  background: #ffffff !important;
}
.posts-carousel-section .section-title {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR — פס הכרזות
   ═══════════════════════════════════════════════════════════════════ */
.ann-bar {
  width: 100%;
  background: #F0C020;
  color: #0d0d0d;
  text-align: center;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 9999;
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ann-track { display: flex; align-items: center; justify-content: center; width: 100%; }
.ann-item {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  text-align: center;
  line-height: 1.4;
}
.ann-item.ann-visible { opacity: 1; }

/* Push header down by ann-bar height */
.site-header { top: 0; }
body.admin-bar .ann-bar { top: 32px; }

/* ═══════════════════════════════════════════════════════════════════
   COOKIE CONSENT BAR
   ═══════════════════════════════════════════════════════════════════ */
.cookie-bar {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 99999;
  background: #0d0d0d;
  color: #fff;
  padding: 1rem 1.5rem;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
  direction: rtl;
}
.cookie-bar[hidden] { display: none !important; }

.cookie-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cookie-bar-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  margin: 0;
  flex: 1;
  min-width: 200px;
}
.cookie-bar-link {
  color: #F0C020;
  font-weight: 700;
  text-decoration: underline;
  margin-right: 0.4rem;
}
.cookie-bar-link:hover { color: #fff; }

.cookie-bar-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-shrink: 0;
}
.cookie-bar-btn {
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}
.cookie-bar-btn--accept {
  background: #F0C020;
  color: #0d0d0d;
}
.cookie-bar-btn--accept:hover { background: #e0b010; }
.cookie-bar-btn--decline {
  background: transparent;
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.2);
}
.cookie-bar-btn--decline:hover { color: #fff; border-color: rgba(255,255,255,0.5); }

@media (max-width: 560px) {
  .cookie-bar-inner { flex-direction: column; align-items: flex-start; }
  .cookie-bar-actions { width: 100%; }
  .cookie-bar-btn--accept { flex: 1; text-align: center; }
}

/* ── Product tag pills — -5% size, square ───────────────────────── */
.product-utag-pill {
  font-size: 0.59rem !important;
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR — positioning fix
   ═══════════════════════════════════════════════════════════════════ */

/* Bar fixed at very top, above header */
.ann-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1001 !important;
}

/* Header pushed down by bar height (set via JS as --ann-bar-h) */
.site-header {
  top: var(--ann-bar-h, 0px) !important;
  transition: top 0.25s ease, box-shadow 0.3s ease, background 0.3s ease !important;
}

/* Page content — first element under fixed header needs top padding */
body {
  padding-top: calc(var(--ann-bar-h, 0px) + var(--header-h, 70px));
}

/* Hero section — full-screen, compensate for combined bar+header */
.hero {
  margin-top: calc(-1 * (var(--ann-bar-h, 0px) + var(--header-h, 70px))) !important;
  padding-top: calc(var(--ann-bar-h, 0px) + var(--header-h, 70px)) !important;
}

/* Mobile */
@media (max-width: 768px) {
  .ann-bar {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.75rem !important;
  }
}

/* ── Product card tags — square corners, smaller ────────────────── */
.product-card-tag {
  border-radius: 0 !important;
  font-size: 0.62rem !important;
  padding: 0.12rem 0.4rem !important;
}

/* ── ATC button — #F0C020 background, white text ────────────────── */
.product-purchase-box .product-atc-btn,
.product-atc-btn {
  background: #F0C020 !important;
  border-color: #F0C020 !important;
  color: #ffffff !important;
}
.product-purchase-box .product-atc-btn:hover:not(:disabled),
.product-atc-btn:hover:not(:disabled) {
  background: #d4a800 !important;
  border-color: #d4a800 !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FAQ STANDALONE PAGE — עמוד שאלות ותשובות
   ═══════════════════════════════════════════════════════════════════ */
.faq-standalone-page { background: #ffffff; }

.faq-standalone-hero {
  background: #f8f8f6;
  border-bottom: 1px solid #e8e8e8;
  padding: 3rem 0 2.5rem;
  text-align: center;
}
.faq-standalone-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #F0C020;
  margin-bottom: 0.75rem;
}
.faq-standalone-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #0d0d0d;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}
.faq-standalone-sub {
  font-size: 1rem;
  color: #666;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

.faq-standalone-body {
  padding: 3rem 0 4rem;
}
.faq-standalone-container {
  max-width: 760px !important;
}

.faq-standalone-group {
  margin-bottom: 2.5rem;
}
.faq-standalone-group-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0d0d0d;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid #F0C020;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}

.faq-standalone-list { display: flex; flex-direction: column; }

.faq-standalone-item {
  border-bottom: 1px solid #eaeaea;
}
.faq-standalone-item:first-child { border-top: 1px solid #eaeaea; }

.faq-standalone-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 0;
  cursor: pointer;
  font-size: 0.97rem;
  font-weight: 600;
  color: #0d0d0d;
  list-style: none;
  gap: 1rem;
  user-select: none;
}
.faq-standalone-question::-webkit-details-marker { display: none; }
.faq-standalone-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #666;
  transition: transform 0.25s ease, border-color 0.2s;
}
.faq-standalone-icon::after { content: '+'; }
.faq-standalone-item[open] .faq-standalone-icon {
  transform: rotate(45deg);
  border-color: #F0C020;
  color: #F0C020;
}

.faq-standalone-answer {
  padding: 0 0 1.1rem;
  font-size: 0.93rem;
  color: #555;
  line-height: 1.8;
}
.faq-standalone-answer p { margin: 0; }

.faq-standalone-cta {
  margin-top: 3rem;
  padding: 2rem;
  background: #f8f8f6;
  text-align: center;
  border-top: 3px solid #F0C020;
}
.faq-standalone-cta p {
  font-size: 1rem;
  font-weight: 600;
  color: #0d0d0d;
  margin-bottom: 1rem;
}
.faq-standalone-cta .btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #F0C020;
  color: #ffffff;
  padding: 0.75rem 1.75rem;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.18s;
}
.faq-standalone-cta .btn--primary:hover { background: #d4a800; }

/* ── WC Add to Cart + Sale badge on product page ─────────────────── */
.single-product .single_add_to_cart_button,
.woocommerce-page .single_add_to_cart_button {
  background: #F0C020 !important;
  border-color: #F0C020 !important;
  color: #ffffff !important;
}
.single-product .single_add_to_cart_button:hover {
  background: #d4a800 !important;
  border-color: #d4a800 !important;
}

/* Sale badge on single product page */
.single-product .product-sale-badge,
.single-product span.onsale,
.woocommerce-page span.onsale {
  background: #F0C020 !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}

/* ── FAQ CTA button — no black border ───────────────────────────── */
.faq-standalone-cta .btn--primary {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Mobile: process steps — 2 per row, 5th centered ───────────── */
@media (max-width: 768px) {
  .process-steps-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
    justify-items: center !important;
  }
  .process-arrow { display: none !important; }
  .process-step-item {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* 5th step spans both columns, centered */
  .process-step-item:nth-child(9) {
    grid-column: 1 / -1 !important;
    width: 50% !important;
    justify-self: center !important;
  }
}

/* ── Mobile: dog cats — 2 per row, 5th centered ─────────────────── */
@media (max-width: 768px) {
  .dog-cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .dog-cat-card:nth-child(5) {
    grid-column: 1 / -1 !important;
    width: 50% !important;
    justify-self: center !important;
  }
}

/* ── Fix: process 5th item — correct nth-child ──────────────────── */
@media (max-width: 768px) {
  .process-step-item:nth-child(9) {
    grid-column: unset !important;
    width: 100% !important;
    justify-self: unset !important;
  }
  .process-step-item:nth-child(5) {
    grid-column: 1 / -1 !important;
    width: 50% !important;
    justify-self: center !important;
  }
}

/* ── Fix: process 5th item — correct nth-child ──────────────────── */
@media (max-width: 768px) {
  .process-step-item:nth-child(9) {
    grid-column: unset !important;
    width: 100% !important;
    justify-self: unset !important;
  }
  .process-step-item:nth-child(5) {
    grid-column: 1 / -1 !important;
    width: 50% !important;
    justify-self: center !important;
  }
}

/* ── Blog filter pills — square corners ─────────────────────────── */
.blog-cat-pill {
  border-radius: 0 !important;
}

/* ── Post/blog card category badge — square corners ─────────────── */
.blog-card-cat-badge,
.post-card-cat {
  border-radius: 0 !important;
}

/* ── Related products title — no bg image, black text ───────────── */
.product-related .brand-title-box,
.product-related .brand-title-box h2 {
  background-image: none !important;
  background-color: transparent !important;
  background: none !important;
  color: #0d0d0d !important;
  text-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  border: none !important;
  box-shadow: none !important;
  font-size: clamp(2.025rem, 3.94vw, 3.15rem) !important;
  font-weight: 900 !important;
}

/* ── FINAL FIX: dog-cats 5th card centered on mobile ────────────── */
@media (max-width: 768px) {
  .dog-cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Same specificity as the conflicting rule — must come LAST */
  .dog-cats-grid .dog-cat-card:nth-child(5) {
    grid-column: 1 / -1 !important;
    width: 50% !important;
    justify-self: center !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ATC BUTTON FINAL OVERRIDE — #F0C020 white text
   Same specificity as line 8546, placed last so it wins
   ═══════════════════════════════════════════════════════════════════ */
.product-purchase-box .product-atc-btn.btn--gold,
.product-purchase-box .product-atc-btn,
.product-atc-btn {
  background: #F0C020 !important;
  background-color: #F0C020 !important;
  border-color: #F0C020 !important;
  color: #ffffff !important;
}
.product-purchase-box .product-atc-btn.btn--gold:hover:not(:disabled),
.product-purchase-box .product-atc-btn:hover:not(:disabled),
.product-atc-btn:hover:not(:disabled) {
  background: #d4a800 !important;
  background-color: #d4a800 !important;
  border-color: #d4a800 !important;
  color: #ffffff !important;
}

/* ── Dog-cat card 5 — same size as others on mobile ─────────────── */
@media (max-width: 768px) {
  .dog-cats-grid .dog-cat-card:nth-child(5) {
    grid-column: 1 / -1 !important;
    width: 50% !important;
    margin-inline: auto !important;
    justify-self: center !important;
    aspect-ratio: 1 / 1.25 !important;
    min-height: unset !important;
  }
}

/* ── Archive subcats — mobile carousel, 2 cards visible ─────────── */
@media (max-width: 768px) {
  .archive-subcats-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 0.6rem !important;
    padding-bottom: 0.5rem !important;
    justify-content: flex-start !important;
  }
  .archive-subcat-card {
    flex: 0 0 calc(50% - 0.3rem) !important;
    min-width: 0 !important;
    max-width: none !important;
    width: calc(50% - 0.3rem) !important;
    height: auto !important;
    scroll-snap-align: start !important;
    aspect-ratio: 1 / 1 !important;
    justify-self: unset !important;
  }
  /* Reset 5th card centering — not needed in carousel */
  .archive-subcat-card:last-child {
    margin-inline: 0 !important;
  }
}

/* ── Archive subcats mobile — 2-col grid, last centered (no carousel) ── */
@media (max-width: 768px) {
  .archive-subcats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    flex-wrap: unset !important;
    flex-direction: unset !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    gap: 0.6rem !important;
  }
  .archive-subcat-card {
    flex: unset !important;
    width: 100% !important;
    min-width: 0 !important;
    scroll-snap-align: none !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
  /* Last card (5th) centered — same as homepage dog-cats */
  .archive-subcat-card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    width: 50% !important;
    justify-self: center !important;
  }
}