/*
Theme Name: Safari
Theme URI: https://safarileathercollections.co.ke
Author: Laban
Author URI: https://labanthegreat.com
Description: A custom-built WordPress theme for Safari Leather Collections — handcrafted leather bags from Nairobi. No plugin dependencies.
Version: 1.0.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: safari
*/

/* ==========================================================================
   Safari Leather Collections — Design System v6
   Apple-Inspired Refinement | Warm Luxury
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Core palette — refined warm neutrals */
  --cream: #FAFAF8;
  --parchment: #F3EDE4;
  --warm: #F5F0EB;
  --sand: #E8E0D8;

  /* Hide scale */
  --hide-950: #0d0b09;
  --hide-900: #1a1612;
  --hide-800: #2e2820;
  --hide-700: #4a3f33;
  --hide-600: #6b5d4d;
  --hide-500: #8c7b68;
  --hide-400: #a89a89;
  --hide-300: #c5bab0;
  --hide-200: #e0d8d0;
  --hide-100: #f0ece7;
  --hide-50: #f8f6f3;

  /* Accent colors */
  --saddle: #8B5E3C;
  --saddle-dark: #6B4226;
  --saddle-light: #A97D5D;
  --brass: #C4A265;
  --wa: #25D366;

  /* Sfari color aliases */
  --amber: #B45309;
  --deep: #78350F;
  --dark: #1A1613;
  --charcoal: #292420;
  --text: #3D3530;
  --muted: #8A7F76;
  --light-muted: #B5ADA5;
  --border: #E0D8D0;
  --whatsapp: #25D366;

  /* Glass morphism */
  --glass: rgba(250, 248, 245, 0.72);
  --glass-heavy: rgba(250, 248, 245, 0.92);
  --glass-border: rgba(224, 216, 208, 0.5);

  /* Typography */
  --f-display: 'Playfair Display', Georgia, serif;
  --f-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-accent: 'Cormorant Garamond', Georgia, serif;
  --font-display: var(--f-display);
  --font-body: var(--f-body);

  /* Shadows — Apple-style multi-layer soft shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04),
               0 2px 8px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04),
               0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04),
               0 16px 48px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.06),
               0 32px 64px rgba(0, 0, 0, 0.12);

  /* Radii */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-pill: 100px;

  /* Easing */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Grain texture */
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--hide-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.7;
  margin: 0;
}

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

/* --------------------------------------------------------------------------
   3. Grain Texture Overlay
   -------------------------------------------------------------------------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
}

/* --------------------------------------------------------------------------
   4. Selection & Focus
   -------------------------------------------------------------------------- */
::selection {
  background: var(--brass);
  color: var(--hide-950);
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   5. Custom Scrollbar
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--hide-300);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hide-400);
}

/* --------------------------------------------------------------------------
   6. Scroll Progress Bar
   -------------------------------------------------------------------------- */
#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--saddle), var(--brass));
  z-index: 9999;
  width: 0;
  transition: width 0.12s linear;
  border-radius: 0 1px 1px 0;
}

/* --------------------------------------------------------------------------
   7. Skip Navigation
   -------------------------------------------------------------------------- */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  background: var(--dark);
  color: #fff;
  padding: 12px 24px;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  transition: top 0.2s;
  text-decoration: none;
}

.skip-nav:focus {
  top: 16px;
}

/* --------------------------------------------------------------------------
   8. Marquee
   -------------------------------------------------------------------------- */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

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

.marquee-track:hover {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   9. Announcement Bar
   -------------------------------------------------------------------------- */
.ann-bar {
  background: var(--dark);
  color: var(--light-muted);
  text-align: center;
  padding: 10px 16px;
  font-size: 0.6875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   10. Navigation
   -------------------------------------------------------------------------- */

/* Legacy navbar transition */
#navbar {
  transition: all 0.4s var(--ease-out-quart);
}

/* Sfari sticky nav — glass morphism */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-heavy);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
  transition: box-shadow 0.4s var(--ease), background 0.4s var(--ease);
}

.site-nav.scrolled {
  background: var(--glass-heavy);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03),
              0 4px 24px rgba(0, 0, 0, 0.05);
}

/* ---- Nav bar grid: Logo | Links | Actions ---- */
.nav-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 72px;
  gap: 24px;
}

/* Left — brand */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.nav-logo-link {
  text-decoration: none;
  line-height: 1.2;
  flex-shrink: 0;
}

.nav-logo-sub {
  display: block;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

.nav-logo-text {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--dark);
  white-space: nowrap;
}

/* Center — nav links */
.nav-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* Right — actions */
.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

/* Cart button */
.nav-cart-btn {
  position: relative;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.nav-cart-btn:hover {
  color: var(--amber);
  background: var(--hide-50);
}

/* Cart count badge */
#cart-count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--amber);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Mobile menu button */
.sfari-mobile-btn {
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile menu panel */
.mobile-menu {
  background: var(--cream);
  border-top: 1px solid var(--border);
  padding: 16px 20px 24px;
}

/* Nav links */
.nav-link {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text);
  transition: color 0.25s var(--ease);
  padding: 4px 0;
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--amber);
  border-radius: 1px;
  transition: width 0.4s var(--ease);
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  width: 100%;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--amber);
}

/* Nav text & muted helpers (used by nav walker) */
.nav-text {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
  transition: color 0.3s var(--ease);
}

.nav-muted {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}

.nav-muted:hover {
  color: var(--hide-900);
}

/* Nav light state (over hero) */
.nav-light .nav-text {
  color: var(--cream);
}

.nav-light .nav-muted {
  color: rgba(250, 247, 242, 0.55);
}

.nav-light .nav-muted:hover {
  color: var(--cream);
}

.nav-light .nav-logo {
  background: var(--cream);
}

.nav-light .nav-logo span {
  color: var(--hide-950);
}

.nav-light .nav-cta {
  background: var(--cream);
  color: var(--hide-950);
}

.nav-light .nav-cta:hover {
  background: var(--brass);
}

.nav-light .nav-burger {
  background: rgba(250, 247, 242, 0.12);
  border: 1px solid rgba(250, 247, 242, 0.15);
}

.nav-light .nav-burger svg {
  color: var(--cream);
}

.nav-light .nav-active-line {
  background: var(--brass);
}

/* Nav dark state (scrolled / inner pages) */
.nav-dark .nav-text {
  color: var(--hide-900);
}

.nav-dark .nav-muted {
  color: var(--hide-500);
}

.nav-dark .nav-muted:hover {
  color: var(--hide-900);
}

.nav-dark .nav-logo {
  background: var(--hide-950);
}

.nav-dark .nav-logo span {
  color: var(--cream);
}

.nav-dark .nav-cta {
  background: var(--hide-950);
  color: var(--cream);
}

.nav-dark .nav-cta:hover {
  background: var(--saddle);
}

.nav-dark .nav-burger {
  background: var(--hide-100);
  border: 1px solid transparent;
}

.nav-dark .nav-burger svg {
  color: var(--hide-900);
}

.nav-dark .nav-active-line {
  background: var(--saddle);
}

/* Scrolled glass overlay */
.nav-scrolled {
  background: rgba(250, 247, 242, 0.92) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03),
              0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* Transitions for all nav children */
.nav-text,
.nav-muted,
.nav-logo,
.nav-logo span,
.nav-cta,
.nav-burger,
.nav-burger svg,
.nav-active-line {
  transition: all 0.4s ease;
}

/* Mobile menu */
#mobileMenu {
  transition: transform 0.45s var(--ease-out-expo);
}

#menuOverlay {
  transition: opacity 0.3s ease;
}

/* --------------------------------------------------------------------------
   11. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 36px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-pill);
  transition: all 0.3s var(--ease);
}

.btn:hover {
  transform: scale(1.02);
}

.btn:active {
  transform: scale(0.97);
}

/* Primary — warm amber gradient */
.btn--primary {
  background: linear-gradient(135deg, var(--amber), #C4690A);
  color: #fff;
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.15),
              0 4px 16px rgba(180, 83, 9, 0.1);
}

.btn--primary:hover {
  background: linear-gradient(135deg, var(--deep), var(--amber));
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.2),
              0 8px 28px rgba(180, 83, 9, 0.15);
}

/* Outline */
.btn--outline {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text);
}

.btn--outline:hover {
  border-color: var(--dark);
  background: var(--dark);
  color: #fff;
}

/* Dark */
.btn--dark {
  background: var(--dark);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn--dark:hover {
  background: var(--hide-800);
  box-shadow: var(--shadow-md);
}

/* Glass */
.btn--glass {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  color: var(--text);
}

.btn--glass:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-md);
}

/* WhatsApp */
.btn--whatsapp {
  background: var(--whatsapp);
  color: #fff;
  box-shadow: 0 2px 16px rgba(37, 211, 102, 0.25);
  animation: pulseWA 2.5s ease-in-out infinite;
}

.btn--whatsapp:hover {
  background: #20bd5a;
  box-shadow: 0 4px 24px rgba(37, 211, 102, 0.35);
}

@keyframes pulseWA {
  0%, 100% {
    box-shadow: 0 2px 16px rgba(37, 211, 102, 0.25);
  }
  50% {
    box-shadow: 0 2px 16px rgba(37, 211, 102, 0.25),
                0 0 0 14px rgba(37, 211, 102, 0);
  }
}

/* --------------------------------------------------------------------------
   12. Product Cards
   -------------------------------------------------------------------------- */
.product-card {
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  border-radius: var(--radius-md);
}

@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}

.product-card:active {
  transform: scale(0.98);
}

.product-card .card-img {
  transition: transform 0.7s var(--ease-out-quart);
}

@media (hover: hover) {
  .product-card:hover .card-img {
    transform: scale(1.03);
  }
}

/* Sfari product cards */
.sfari-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease);
}

.sfari-product-card:hover {
  transform: translateY(-4px);
}

.sfari-product-card__image {
  display: block; /* CRITICAL: aspect-ratio requires block-level element */
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--warm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.4s var(--ease);
}

.sfari-product-card:hover .sfari-product-card__image {
  box-shadow: var(--shadow-lg);
}

.sfari-product-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-quart);
}

.sfari-product-card:hover .sfari-product-card__img {
  transform: scale(1.03);
}

.sfari-product-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(26, 22, 19, 0.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: #fff;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  z-index: 2;
  border-radius: var(--radius-pill);
  font-weight: 500;
}

/* Placeholder inside product card image */
.sfari-product-card__image .img-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 0; /* inherits from parent */
}

.sfari-product-card__quick-add {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--dark);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transition: all 0.4s var(--ease);
  z-index: 2;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
}

.sfari-product-card:hover .sfari-product-card__quick-add {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.sfari-product-card__quick-add:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(0) scale(1.1) !important;
  box-shadow: var(--shadow-lg);
}

.sfari-product-card__quick-add:active {
  transform: translateY(0) scale(0.95) !important;
}

.sfari-product-card__collection {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light-muted);
  margin-top: 14px;
  display: block;
  font-weight: 400;
  line-height: 1;
}

.sfari-product-card__name {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 6px;
  color: var(--dark);
  /* Clamp name to 2 lines max to prevent overflow */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sfari-product-card__name a {
  text-decoration: none;
  color: inherit;
  transition: color 0.25s var(--ease);
}

.sfari-product-card__name a:hover {
  color: var(--amber);
}

.sfari-product-card__price {
  font-size: 0.875rem;
  color: var(--amber);
  margin-top: 6px;
  padding-bottom: 4px;
  display: block;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   13. Sections
   -------------------------------------------------------------------------- */
.sfari-section {
  padding: 120px 32px;
}

.sfari-section--dark {
  background: var(--dark);
  color: #fff;
}

.sfari-section--warm {
  background: var(--warm);
}

.sfari-section--white {
  background: #fff;
}

.sfari-section__label {
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px;
  display: block;
  font-weight: 500;
}

.sfari-section--dark .sfari-section__label {
  color: #D97706;
}

.sfari-section__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--dark);
  letter-spacing: -0.01em;
}

.sfari-section--dark .sfari-section__title {
  color: #fff;
}

.sfari-section__subtitle {
  color: var(--muted);
  font-size: 15px;
  max-width: 560px;
  margin-top: 16px;
  line-height: 1.7;
  font-weight: 300;
}

.sfari-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

/* --------------------------------------------------------------------------
   14. Page Header
   -------------------------------------------------------------------------- */
.sfari-page-header {
  background: linear-gradient(145deg, var(--charcoal) 0%, var(--dark) 40%, #0F0D0B 100%);
  position: relative;
  overflow: hidden;
  padding: 96px 32px 104px;
  text-align: center;
}

.sfari-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grain);
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   15. Leather Texture
   -------------------------------------------------------------------------- */
.leather-texture {
  position: absolute;
  inset: 0;
  background: var(--grain);
  opacity: 0.5;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   16. Dividers
   -------------------------------------------------------------------------- */
.section-line,
.section-divider {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--saddle), var(--brass));
  border-radius: 2px;
}

.section-divider {
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   17. Image Placeholders
   -------------------------------------------------------------------------- */
.img-placeholder {
  background: linear-gradient(145deg, #F7F3EF 0%, var(--sand) 50%, #E2DAD2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grain);
  pointer-events: none;
  border-radius: inherit;
}

.img-placeholder span {
  font-size: 0.6875rem;
  color: var(--light-muted);
  letter-spacing: 0.08em;
  text-align: center;
  padding: 16px;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   18. Image Loading
   -------------------------------------------------------------------------- */
.img-load {
  opacity: 0;
  transform: scale(1.01);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.img-load.loaded {
  opacity: 1;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   19. Gallery (Single Product)
   -------------------------------------------------------------------------- */
.gallery-thumb {
  opacity: 0.5;
  transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease);
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.gallery-thumb.active,
.gallery-thumb:hover {
  opacity: 1;
  border-color: var(--saddle);
}

.gallery-main {
  transition: opacity 0.3s ease;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   20. Accordion
   -------------------------------------------------------------------------- */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out-quart), padding 0.4s ease;
}

.accordion-open .accordion-content {
  max-height: 500px;
}

.accordion-icon {
  transition: transform 0.3s var(--ease);
}

.accordion-open .accordion-icon {
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   21. Patina Slider
   -------------------------------------------------------------------------- */
#patinaSlider {
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  border-radius: var(--radius-md);
  overflow: hidden;
}

#patinaHandle {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}

/* --------------------------------------------------------------------------
   22. Gift Finder
   -------------------------------------------------------------------------- */
.gift-step {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.5s var(--ease), max-height 0.6s var(--ease-out-expo);
}

.gift-step.active {
  opacity: 1;
  max-height: 2000px;
  overflow: visible;
}

.persona-card {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.persona-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.persona-card.selected {
  border-color: var(--saddle);
  box-shadow: 0 0 0 1px var(--saddle), var(--shadow-md);
}

.budget-pill {
  transition: all 0.25s var(--ease);
  cursor: pointer;
  border-radius: var(--radius-pill);
}

.budget-pill.selected {
  background: var(--hide-950) !important;
  color: var(--cream) !important;
  border-color: var(--hide-950) !important;
}

/* --------------------------------------------------------------------------
   23. Gift Tabs (homepage preview)
   -------------------------------------------------------------------------- */
.gift-tab-active {
  background: var(--hide-950) !important;
  color: var(--cream) !important;
  border-color: var(--hide-950) !important;
}

[data-gift-tab] {
  transition: all 0.25s var(--ease);
}

/* --------------------------------------------------------------------------
   24. Testimonials
   -------------------------------------------------------------------------- */
.testimonial-track {
  transition: transform 0.65s var(--ease-out-expo);
  will-change: transform;
}

/* Testimonial cards — elevated white cards */
.testimonial-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 40px;
  border: 1px solid rgba(224, 216, 208, 0.4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   25. Comparison Table
   -------------------------------------------------------------------------- */
.compare-us,
.compare-safari {
  background: linear-gradient(135deg, rgba(139, 94, 60, 0.04), rgba(196, 162, 101, 0.04));
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   26. Filter Pills
   -------------------------------------------------------------------------- */
.filter-btn {
  font-size: 0.8125rem;
  padding: 10px 24px;
  border: 1.5px solid var(--border);
  background: transparent;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all 0.3s var(--ease);
  border-radius: var(--radius-pill);
  font-weight: 400;
  color: var(--muted);
}

.filter-btn:hover {
  border-color: var(--dark);
  color: var(--dark);
  transform: scale(1.02);
}

.filter-btn:active {
  transform: scale(0.97);
}

.filter-btn.active {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
  box-shadow: var(--shadow-sm);
  transform: scale(1);
}

.cat-active {
  background: var(--hide-950) !important;
  color: var(--cream) !important;
  border-color: var(--hide-950) !important;
}

/* --------------------------------------------------------------------------
   27. Forms
   -------------------------------------------------------------------------- */
.form-input {
  width: 100%;
  border: 1.5px solid var(--border);
  padding: 16px 22px;
  font-family: var(--f-body);
  font-size: 0.9375rem;
  background: #fff;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  border-radius: 16px;
  color: var(--text);
}

.form-input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.08);
}

.form-input::placeholder {
  color: var(--light-muted);
}

.form-label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  display: block;
  font-weight: 500;
}

/* Newsletter section — refined glass card */
.newsletter-section .form-input {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(224, 216, 208, 0.6);
  font-size: 1rem;
  padding: 18px 24px;
}

.newsletter-section .form-input:focus {
  background: #fff;
  border-color: var(--amber);
}

/* --------------------------------------------------------------------------
   28. Cart Drawer
   -------------------------------------------------------------------------- */
#cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

#cart-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 22, 19, 0.35);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#cart-panel {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  max-width: 420px;
  background: var(--glass-heavy);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: -8px 0 60px rgba(26, 22, 19, 0.12);
  transform: translateX(100%);
  transition: transform 500ms var(--ease-out-expo);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(224, 216, 208, 0.4);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

#cart-drawer.active {
  pointer-events: all;
}

#cart-drawer.active #cart-overlay {
  opacity: 1;
}

#cart-drawer.active #cart-panel {
  transform: translateX(0);
}

.cart-item {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(224, 216, 208, 0.5);
  animation: slideIn 0.4s var(--ease-out-expo) forwards;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.qty-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.25s var(--ease);
  border-radius: var(--radius-sm);
}

.qty-btn:hover {
  background: var(--warm);
  border-color: var(--muted);
  transform: scale(1.05);
}

.qty-btn:active {
  transform: scale(0.92);
}

/* --------------------------------------------------------------------------
   28b. Journal Cards
   -------------------------------------------------------------------------- */
.journal-card {
  display: block;
  transition: transform 0.4s var(--ease);
}

.journal-card:hover {
  transform: translateY(-4px);
}

.journal-card__image {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--warm);
}

.journal-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-quart);
}

.journal-card:hover .journal-card__img {
  transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   29. Collections Cards
   -------------------------------------------------------------------------- */
.collection-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.collection-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.collection-card img {
  transition: transform 0.7s var(--ease-out-quart);
}

.collection-card:hover img {
  transform: scale(1.03);
}

/* Gradient overlay — subtle, readable */
.collection-card__overlay {
  background: linear-gradient(
    to top,
    rgba(13, 11, 9, 0.75) 0%,
    rgba(13, 11, 9, 0.35) 40%,
    transparent 100%
  );
  border-radius: inherit;
}

/* --------------------------------------------------------------------------
   30. Footer
   -------------------------------------------------------------------------- */
.sfari-footer {
  background: var(--dark);
  color: var(--muted);
  padding: 96px 32px 48px;
  position: relative;
}

/* Footer grid: 2-col on phones, auto on wider */
@media (max-width: 480px) {
  .sfari-footer {
    padding: 56px 16px 32px;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-bottom: 40px !important;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .sfari-footer {
    padding: 64px 20px 36px;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 40px !important;
    margin-bottom: 48px !important;
  }
}

.sfari-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--hide-700) 20%,
    var(--hide-700) 80%,
    transparent
  );
}

.sfari-footer a {
  color: var(--light-muted);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.sfari-footer a:hover {
  color: #fff;
}

/* --------------------------------------------------------------------------
   31. WhatsApp Float
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(37, 211, 102, 0.3);
  transition: all 0.35s var(--ease);
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.12) translateY(-2px);
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.4);
}

.whatsapp-float:active {
  transform: scale(0.95);
}

#waFab {
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

#waFab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
}

#waFab:active {
  transform: scale(0.92);
}

/* --------------------------------------------------------------------------
   32. Live Dot
   -------------------------------------------------------------------------- */
@keyframes liveDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.live-dot {
  animation: liveDot 1.8s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   33. Animations
   -------------------------------------------------------------------------- */

/* Reveal system — smoother easing, less movement */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }
.reveal-d5 { transition-delay: 0.55s; }

/* Fade up animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.anim-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scale up animation for cards */
.anim-scale-up {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.anim-scale-up.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.anim-d1 { transition-delay: 80ms; }
.anim-d2 { transition-delay: 160ms; }
.anim-d3 { transition-delay: 240ms; }
.anim-d4 { transition-delay: 320ms; }

/* Hero entrance animations */
.hero-anim {
  animation: fadeUp 0.9s var(--ease) forwards;
}

.hero-anim-d1 {
  opacity: 0;
  animation: fadeUp 0.9s 0.15s var(--ease) forwards;
}

.hero-anim-d2 {
  opacity: 0;
  animation: fadeUp 0.9s 0.3s var(--ease) forwards;
}

/* --------------------------------------------------------------------------
   34. Screen Reader Utilities
   -------------------------------------------------------------------------- */
.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;
}

/* --------------------------------------------------------------------------
   35. No-Scrollbar Utility
   -------------------------------------------------------------------------- */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* --------------------------------------------------------------------------
   36. Details/Summary Reset
   -------------------------------------------------------------------------- */
details summary {
  list-style: none;
  cursor: pointer;
}

details summary::-webkit-details-marker {
  display: none;
}

/* --------------------------------------------------------------------------
   36b. Single Product Components
   -------------------------------------------------------------------------- */

/* Gallery thumbnails */
.thumb-btn {
  border: 2px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  opacity: 0.5;
  transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease);
  cursor: pointer;
  background: none;
  padding: 0;
}

.thumb-btn.active,
.thumb-btn:hover {
  opacity: 1;
  border-color: var(--saddle);
}

/* Color selector pills */
.color-opt {
  padding: 10px 20px;
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}

.color-opt:hover {
  border-color: var(--hide-400);
}

.color-opt.active {
  border-color: var(--dark);
  background: var(--dark);
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   37. Tailwind-Style Utility Classes
   Used by nav walkers and PHP templates that reference Tailwind classes.
   -------------------------------------------------------------------------- */
.text-\[13px\] { font-size: 13px; }
.text-\[15px\] { font-size: 15px; }
.text-\[11px\] { font-size: 11px; }
.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-light { font-weight: 300; }
.relative { position: relative; }
.absolute { position: absolute; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.-bottom-1 { bottom: -4px; }
.left-0 { left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.h-\[2px\] { height: 2px; }
.h-\[1px\] { height: 1px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-3\.5 { padding-top: 14px; padding-bottom: 14px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.pt-2 { padding-top: 8px; }
.pb-2 { padding-bottom: 8px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }
.overflow-hidden { overflow: hidden; }
.bg-hide-100 { background: var(--hide-100); }
.bg-white { background: #fff; }
.bg-transparent { background: transparent; }
.text-white { color: #fff; }
.text-amber { color: var(--amber); }
.text-muted { color: var(--muted); }
.border { border: 1px solid var(--border); }
.border-transparent { border-color: transparent; }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }
.transition-all { transition: all 0.3s var(--ease); }
.transition-colors { transition: color 0.2s, background-color 0.2s; }
.transition-opacity { transition: opacity 0.3s; }
.transition-transform { transition: transform 0.3s var(--ease); }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.uppercase { text-transform: uppercase; }
.text-center { text-align: center; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.max-w-xl { max-width: 576px; }
.max-w-2xl { max-width: 672px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }
.whitespace-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.inset-0 { inset: 0; }
.space-y-2 > * + * { margin-top: 8px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-x-2 > * + * { margin-left: 8px; }
.space-x-4 > * + * { margin-left: 16px; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Responsive Tailwind grid overrides */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   38. Responsive — Mobile-First Breakpoints
   -------------------------------------------------------------------------- */

/* ── Tiny phones (< 375px) ── */
@media (max-width: 374px) {
  .hero-title,
  .hero-h1 {
    font-size: 2rem !important;
    line-height: 1.08 !important;
  }
  .sfari-section__title {
    font-size: 1.375rem !important;
  }
  .sfari-section {
    padding: 44px 14px;
  }
  .sfari-container {
    padding: 0 14px;
  }
  .btn {
    padding: 12px 20px;
    font-size: 0.7rem;
    gap: 6px;
  }
  .ann-bar {
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
    padding: 8px 12px !important;
  }
  .site-nav .sfari-container {
    padding: 0 14px !important;
  }
}

/* ── Small phones (< 480px) ── */
@media (max-width: 480px) {
  .sfari-section {
    padding: 56px 16px;
  }
  .sfari-page-header {
    padding: 56px 16px 64px;
  }
  .sfari-container {
    padding: 0 16px;
  }
  .btn {
    padding: 14px 24px;
    font-size: 0.75rem;
  }
  .sfari-product-card__image {
    border-radius: 16px;
  }
  .sfari-product-card__name {
    font-size: 0.9375rem;
  }
  .sfari-product-card__price {
    font-size: 0.8125rem;
  }
  .sfari-product-card__collection {
    font-size: 0.625rem;
    margin-top: 10px;
  }
  .img-placeholder {
    border-radius: 14px;
  }
  .testimonial-card {
    padding: 28px 24px;
  }
  .sfari-section__title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  .sfari-section__subtitle {
    font-size: 14px;
  }
  .sfari-section__label {
    font-size: 10px;
    letter-spacing: 0.25em;
  }
  .collection-card {
    border-radius: 16px;
  }
  .sfari-footer {
    padding: 56px 16px 32px;
  }
}

/* ── Tablets & below (< 768px) ── */
@media (max-width: 768px) {
  .sfari-section {
    padding: 80px 20px;
  }
  .sfari-page-header {
    padding: 72px 20px 80px;
  }
  .sfari-container {
    padding: 0 20px;
  }
  /* Always show quick-add on touch devices / small screens */
  .sfari-product-card__quick-add {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .sfari-product-card__image {
    border-radius: 18px;
  }
  .img-placeholder {
    border-radius: 16px;
  }
  .whatsapp-float {
    bottom: 16px;
    right: 16px;
    width: 52px;
    height: 52px;
  }
  .btn {
    padding: 14px 28px;
  }
  .sfari-footer {
    padding: 64px 20px 36px;
  }
  .testimonial-card {
    padding: 32px 28px;
  }
  /* Cart drawer: full-width on mobile */
  #cart-panel {
    max-width: 100%;
    border-radius: 0;
  }
  /* Nav logo: smaller on mobile */
  .site-nav a[style*="position:absolute"] span:last-child {
    font-size: 18px !important;
  }
}

/* ── Tablet portrait (768px – 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .sfari-section {
    padding: 88px 24px;
  }
  #cart-panel {
    max-width: 420px;
    border-radius: 24px 0 0 24px;
  }
}

/* ── Desktop (1024px+) ── */
@media (min-width: 1024px) {
  .sfari-section {
    padding: 120px 32px;
  }
}

/* ── Large desktop (1280px+) ── */
@media (min-width: 1280px) {
  .sfari-container {
    padding: 0 40px;
  }
}

/* ── Ultra-wide (1536px+) ── */
@media (min-width: 1536px) {
  .hero-title,
  .hero-h1 {
    font-size: 5.5rem !important;
  }
}

/* ── Print ── */
@media print {
  .site-nav,
  .ann-bar,
  .whatsapp-float,
  #waFab,
  #cart-drawer,
  #scrollProgress {
    display: none !important;
  }
  .sfari-section {
    padding: 32px 0;
  }
  body::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   38b. Navigation Responsive
   -------------------------------------------------------------------------- */

/* Mobile: collapse to logo + hamburger + cart */
@media (max-width: 1023px) {
  .nav-bar {
    grid-template-columns: auto 1fr auto;
    height: 64px;
    gap: 12px;
  }
  .nav-center {
    display: none !important;
  }
  .sfari-desktop-link {
    display: none !important;
  }
  .sfari-mobile-btn {
    display: flex !important;
  }
  .nav-logo-sub {
    display: none;
  }
  .nav-logo-text {
    font-size: 17px;
  }
}

/* Desktop: full 3-column grid */
@media (min-width: 1024px) {
  .nav-bar {
    height: 72px;
  }
  .nav-center {
    display: flex !important;
  }
  .sfari-desktop-link {
    display: inline !important;
  }
  .sfari-mobile-btn {
    display: none !important;
  }
}

/* Larger screens: more link spacing */
@media (min-width: 1280px) {
  .nav-center {
    gap: 40px;
  }
  .nav-logo-text {
    font-size: 22px;
  }
}

/* --------------------------------------------------------------------------
   39. WordPress Admin Bar Offset
   -------------------------------------------------------------------------- */
.admin-bar #navbar {
  top: 32px;
}

.admin-bar .site-nav {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar #navbar {
    top: 46px;
  }
  .admin-bar .site-nav {
    top: 46px;
  }
}

/* --------------------------------------------------------------------------
   40. Safe Areas (iOS notch, etc.)
   -------------------------------------------------------------------------- */
@supports (padding: max(0px)) {
  #waFab {
    bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    right: max(16px, env(safe-area-inset-right, 16px)) !important;
  }
  .whatsapp-float {
    bottom: max(24px, env(safe-area-inset-bottom, 24px));
    right: max(24px, env(safe-area-inset-right, 24px));
  }
  #mobileMenu {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

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

  .reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .anim-fade-up,
  .anim-scale-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .testimonial-track,
  .accordion-content,
  .gift-step {
    transition: none !important;
  }

  .live-dot,
  .marquee-track {
    animation: none !important;
  }

  .product-card,
  .product-card .card-img,
  .sfari-product-card,
  .sfari-product-card__img {
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Comparison table — 2026-04-19 Task 2.8
   "Safari Leather vs. alternatives" trust-building section.
   Editorial, not spreadsheet-y. Brand palette, generous whitespace,
   stacked rows on narrow viewports.
   ───────────────────────────────────────────────────────────────────── */

.sfari-comparison {
  background: var(--cream);
  padding: 80px 0;
  border-top: 1px solid var(--brass);
  border-bottom: 1px solid var(--brass);
}

.sfari-comparison__container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

.sfari-comparison__head {
  text-align: center;
  margin-bottom: 40px;
}

.sfari-comparison__label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 14px;
}

.sfari-comparison__title {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--dark);
  margin: 0;
}

.sfari-comparison__title-em {
  font-family: var(--f-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--saddle);
}

.sfari-comparison__table {
  background: #fff;
  border: 1px solid var(--hide-200);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.sfari-comparison__row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) 1fr 1fr;
  align-items: center;
}

.sfari-comparison__row + .sfari-comparison__row {
  border-top: 1px solid var(--hide-100);
}

.sfari-comparison__row:nth-of-type(even):not(.sfari-comparison__row--head) {
  background: var(--hide-50);
}

.sfari-comparison__row--head {
  background: #fff;
  border-bottom: 1px solid var(--hide-200);
}

.sfari-comparison__row--head .sfari-comparison__cell {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hide-700);
  padding-top: 18px;
  padding-bottom: 18px;
}

.sfari-comparison__cell {
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.45;
}

.sfari-comparison__cell--attr {
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--dark);
  border-right: 1px solid var(--hide-100);
}

.sfari-comparison__cell--safari {
  color: var(--dark);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sfari-comparison__cell--other {
  color: var(--hide-500);
  font-weight: 400;
  border-left: 1px solid var(--hide-100);
}

.sfari-comparison__row--head .sfari-comparison__cell--safari,
.sfari-comparison__row--head .sfari-comparison__cell--other {
  justify-content: flex-start;
}

.sfari-comparison__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(196, 162, 101, 0.14);
  color: var(--brass);
}

.sfari-comparison__tick svg {
  display: block;
}

.sfari-comparison__value {
  display: inline-block;
}

.sfari-comparison__footnote {
  margin: 20px 2px 0;
  font-size: 12px;
  font-style: italic;
  color: var(--hide-500);
  line-height: 1.5;
}

/* Responsive: stack each row vertically on narrow viewports */
@media (max-width: 640px) {
  .sfari-comparison {
    padding: 56px 0;
  }

  .sfari-comparison__table {
    border-radius: 12px;
  }

  .sfari-comparison__row {
    grid-template-columns: 1fr;
    padding: 6px 0;
  }

  .sfari-comparison__row--head {
    display: none;
  }

  .sfari-comparison__cell {
    padding: 10px 18px;
    border: 0 !important;
  }

  .sfari-comparison__cell--attr {
    padding-top: 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hide-700);
  }

  .sfari-comparison__cell--safari,
  .sfari-comparison__cell--other {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .sfari-comparison__cell--safari::before,
  .sfari-comparison__cell--other::before {
    content: attr(data-label) " · ";
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hide-400);
    margin-right: 2px;
  }

  .sfari-comparison__cell--other {
    padding-bottom: 14px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Trust badges — 2026-04-19 Task 2.9
   Slim chrome strip rendered above the footer on admin-selected pages.
   Editorial, understated, Everlane/Cuyana-style — not a loud promo banner.
   ───────────────────────────────────────────────────────────────────── */

.sfari-trust {
  background: var(--hide-50);
  border-top: 1px solid var(--hide-200);
  border-bottom: 1px solid var(--hide-200);
  padding: 28px 0;
}

.sfari-trust__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 32px;
  align-items: center;
}

.sfari-trust__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.sfari-trust__icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--saddle);
  background: #fff;
  border: 1px solid var(--hide-200);
  border-radius: 50%;
}

.sfari-trust__icon {
  display: block;
}

.sfari-trust__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sfari-trust__label {
  font-family: var(--f-body, inherit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--dark);
  line-height: 1.3;
}

.sfari-trust__description {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--hide-500);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Responsive: 2-col at tablet, 1-col stack on small phones */
@media (max-width: 900px) {
  .sfari-trust__container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
  }
}

@media (max-width: 480px) {
  .sfari-trust {
    padding: 20px 0;
  }

  .sfari-trust__container {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 20px;
  }

  .sfari-trust__icon-wrap {
    width: 36px;
    height: 36px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Workshop section — 2026-04-19 Task 2.10
   "Live from the workshop" — dynamic CPT data, editorial layout.
   Current work-in-progress featured left, upcoming queue + CTA right.
   ───────────────────────────────────────────────────────────────────── */

.sfari-workshop {
  background: var(--cream);
  padding: 80px 0;
}

.sfari-workshop__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.sfari-workshop__head {
  margin-bottom: 36px;
}

.sfari-workshop__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hide-500);
  margin-bottom: 12px;
}

.sfari-workshop__title {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--dark);
  margin: 0;
}

.sfari-workshop__title-em {
  font-family: var(--f-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--saddle);
}

/* Pulsing green dot */
.sfari-workshop__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25D366;
  flex-shrink: 0;
}

.sfari-workshop__dot--pulse {
  position: relative;
}

.sfari-workshop__dot--pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.6;
  animation: sfari-workshop-pulse 1.8s ease-out infinite;
}

@keyframes sfari-workshop-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  80%  { transform: scale(2.5); opacity: 0;   }
  100% { transform: scale(2.5); opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
  .sfari-workshop__dot--pulse::after {
    animation: none;
  }
}

/* Grid: current block left, aside right */
.sfari-workshop__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* Current work-in-progress card */
.sfari-workshop__current {
  background: #fff;
  border: 1px solid var(--hide-200);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.sfari-workshop__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--hide-100);
  overflow: hidden;
}

.sfari-workshop__media img,
.sfari-workshop__media-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sfari-workshop__media-placeholder {
  background: linear-gradient(135deg, var(--hide-100), var(--hide-200));
}

.sfari-workshop__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
}

.sfari-workshop__live-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
}

.sfari-workshop__media-caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  color: #fff;
}

.sfari-workshop__media-title {
  font-family: var(--f-display);
  font-size: 17px;
  line-height: 1.25;
  margin: 0;
  color: #fff;
}

.sfari-workshop__media-sub {
  color: rgba(255, 255, 255, 0.78);
  font-style: italic;
}

.sfari-workshop__media-byline {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}

.sfari-workshop__body {
  padding: 20px 22px 22px;
}

.sfari-workshop__artisan {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sfari-workshop__artisan-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 94, 60, 0.1);
  color: var(--saddle);
  flex-shrink: 0;
}

.sfari-workshop__artisan-text {
  min-width: 0;
}

.sfari-workshop__artisan-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

.sfari-workshop__artisan-meta {
  font-size: 12px;
  color: var(--hide-500);
  margin: 2px 0 0;
  line-height: 1.4;
}

.sfari-workshop__detail {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--hide-500);
  line-height: 1.6;
}

.sfari-workshop__eta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hide-100);
}

.sfari-workshop__eta-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hide-400);
}

.sfari-workshop__eta-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--dark);
  margin-left: auto;
}

/* Aside: upcoming list + CTA */
.sfari-workshop__aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sfari-workshop__upcoming-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hide-400);
  margin: 0 0 4px;
}

.sfari-workshop__upcoming-item {
  background: #fff;
  border: 1px solid var(--hide-200);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: box-shadow 0.2s ease;
}

.sfari-workshop__upcoming-item:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.sfari-workshop__upcoming-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
}

.sfari-workshop__upcoming-thumb--placeholder {
  background: linear-gradient(135deg, var(--hide-100), var(--hide-200));
}

.sfari-workshop__upcoming-text {
  flex: 1;
  min-width: 0;
}

.sfari-workshop__upcoming-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

.sfari-workshop__upcoming-detail {
  font-size: 11.5px;
  color: var(--hide-500);
  margin: 2px 0 0;
  line-height: 1.4;
}

.sfari-workshop__upcoming-day {
  flex-shrink: 0;
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--saddle);
  background: rgba(139, 94, 60, 0.1);
  border-radius: 999px;
}

/* Custom-order CTA card */
.sfari-workshop__cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--hide-950, #0d0b09);
  border-radius: 14px;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.sfari-workshop__cta:hover {
  background: var(--hide-900, #1a1612);
}

.sfari-workshop__cta:active {
  transform: scale(0.985);
}

.sfari-workshop__cta-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  flex-shrink: 0;
}

.sfari-workshop__cta-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sfari-workshop__cta-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.3;
}

.sfari-workshop__cta-subtitle {
  font-size: 11.5px;
  color: rgba(250, 250, 248, 0.55);
  margin-top: 2px;
  line-height: 1.4;
}

.sfari-workshop__cta-action {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  flex-shrink: 0;
}

.sfari-workshop__cta:hover .sfari-workshop__cta-action {
  text-decoration: underline;
}

/* Responsive: stack on tablet, stay stacked on mobile */
@media (max-width: 960px) {
  .sfari-workshop__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .sfari-workshop {
    padding: 56px 0;
  }

  .sfari-workshop__media {
    aspect-ratio: 16 / 10;
  }

  .sfari-workshop__body {
    padding: 16px 18px 18px;
  }

  .sfari-workshop__upcoming-thumb {
    width: 48px;
    height: 48px;
  }

  .sfari-workshop__cta {
    padding: 14px 16px;
  }

  .sfari-workshop__cta-subtitle {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Contact form — 2026-04-19 Task 2.4
   Two-column editorial layout: copy left, form right on desktop;
   stacked on mobile. Subtle hairlines, generous whitespace, no
   spreadsheet-y borders. Submit button is --dark, not green.
   ───────────────────────────────────────────────────────────────────── */

.sfari-contact-form-section {
  padding: 64px 0 80px;
  background: var(--cream);
}

.sfari-contact-form-section__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 48px;
  align-items: start;
}

.sfari-contact-form-section__copy {
  padding-top: 8px;
}

.sfari-contact-form-section__label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 12px;
}

.sfari-contact-form-section__title {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--dark);
  margin: 0 0 14px;
}

.sfari-contact-form-section__title-em {
  font-family: var(--f-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--saddle);
}

.sfari-contact-form-section__intro {
  font-size: 14px;
  line-height: 1.7;
  color: var(--hide-500);
  margin: 0;
  max-width: 32ch;
}

/* Form */
.sfari-contact-form {
  background: #fff;
  border: 1px solid var(--hide-200);
  border-radius: 16px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.sfari-contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.sfari-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.sfari-contact-form__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hide-700);
}

.sfari-contact-form__optional {
  font-weight: 400;
  color: var(--hide-400);
  letter-spacing: 0.04em;
  text-transform: none;
  margin-left: 4px;
}

.sfari-contact-form input,
.sfari-contact-form select,
.sfari-contact-form textarea {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--dark);
  background: var(--cream);
  border: 1px solid var(--hide-200);
  border-radius: 10px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  box-sizing: border-box;
}

.sfari-contact-form input:focus,
.sfari-contact-form select:focus,
.sfari-contact-form textarea:focus {
  outline: none;
  border-color: var(--saddle);
  background: #fff;
}

.sfari-contact-form textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
  font-family: inherit;
}

/* Custom select — hide native dropdown arrow on browsers that support appearance */
.sfari-contact-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%238c7b68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}

.sfari-contact-form__field--error input,
.sfari-contact-form__field--error select,
.sfari-contact-form__field--error textarea {
  border-color: #b32d2e;
  background: rgba(179, 45, 46, 0.03);
}

.sfari-contact-form__field-error {
  font-size: 11.5px;
  color: #b32d2e;
  min-height: 14px;
  font-style: italic;
  font-family: var(--f-accent, inherit);
  letter-spacing: 0.01em;
}
.sfari-contact-form__field-error:empty {
  display: none;
}

.sfari-contact-form__field--message textarea {
  min-height: 140px;
}

.sfari-contact-form__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.sfari-contact-form__submit {
  padding: 12px 28px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--dark);
  border: 1px solid var(--dark);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.sfari-contact-form__submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.sfari-contact-form__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.sfari-contact-form__note {
  margin: 0;
  font-size: 12.5px;
  font-style: italic;
  color: var(--hide-500);
  font-family: var(--f-accent, inherit);
}

.sfari-contact-form__note a {
  color: var(--saddle);
  text-decoration: underline;
}

.sfari-contact-form__status {
  font-size: 13px;
  line-height: 1.55;
  color: var(--hide-500);
  font-style: italic;
  font-family: var(--f-accent, inherit);
}

.sfari-contact-form__status[data-tone="error"] {
  color: #b32d2e;
}

/* Success panel — replaces the form when submission succeeds */
.sfari-contact-form__success {
  background: var(--hide-50);
  border: 1px solid var(--hide-200);
  border-radius: 16px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  animation: sfari-contact-success-in 0.35s ease-out;
}

@keyframes sfari-contact-success-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sfari-contact-form__success-icon {
  color: var(--saddle);
}

.sfari-contact-form__success-text {
  margin: 0;
  font-family: var(--f-accent, inherit);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark);
  max-width: 36ch;
}

.sfari-contact-form__success-reset {
  margin-top: 4px;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--saddle);
  background: transparent;
  border: 1px solid var(--saddle);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sfari-contact-form__success-reset:hover {
  background: var(--saddle);
  color: #fff;
}

/* Responsive: stack at tablet, tighten at mobile */
@media (max-width: 900px) {
  .sfari-contact-form-section__container {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .sfari-contact-form-section__intro {
    max-width: 48ch;
  }
}

@media (max-width: 560px) {
  .sfari-contact-form-section {
    padding: 48px 0 64px;
  }
  .sfari-contact-form {
    padding: 22px 20px 20px;
  }
  .sfari-contact-form__row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .sfari-contact-form__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .sfari-contact-form__submit {
    width: 100%;
  }
  .sfari-contact-form__note {
    text-align: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Site search — 2026-04-19 Task 2.6
   Header icon expands into an inline input with smooth reveal. On mobile
   the form takes the full width below the nav row.
   ───────────────────────────────────────────────────────────────────── */

.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px;
  overflow: hidden;
}

.sfari-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sfari-search-toggle {
  position: relative;
}

.sfari-search-toggle__icon--close {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
}

.sfari-search-wrap.is-open .sfari-search-toggle__icon--search {
  display: none;
}

.sfari-search-wrap.is-open .sfari-search-toggle__icon--close {
  display: block;
}

.sfari-search-form {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--cream);
  border: 1px solid var(--hide-200);
  border-radius: 999px;
  padding: 4px 4px 4px 14px;
  margin-right: 8px;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .25s ease, transform .25s ease;
  width: 240px;
}

.sfari-search-wrap.is-open .sfari-search-form {
  opacity: 1;
  transform: translateX(0);
}

.sfari-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: var(--dark);
  padding: 6px 0;
  font-family: inherit;
}

.sfari-search-input::placeholder {
  color: var(--hide-400);
}

.sfari-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--dark);
  color: var(--cream);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease;
  flex-shrink: 0;
}

.sfari-search-submit:hover { background: var(--saddle); }

/* Mobile: form becomes a full-width overlay below the nav */
@media (max-width: 720px) {
  .sfari-search-form {
    position: absolute;
    top: calc(100% + 10px);
    right: -8px;
    width: min(88vw, 340px);
    margin-right: 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Search results page — 2026-04-19 Task 2.6
   Reuses .sfari-product-card and .journal-card. Only the page frame,
   tabs and empty state are styled here.
   ───────────────────────────────────────────────────────────────────── */

.sfari-search-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.sfari-search-page__header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hide-200);
}

.sfari-search-page__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hide-500);
}

.sfari-search-page__title {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--dark);
  margin: 0 0 8px;
  word-break: break-word;
}

.sfari-search-page__count {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hide-500);
}

.sfari-search-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.sfari-search-tab {
  border: 1px solid var(--hide-200);
  background: #fff;
  color: var(--hide-700);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.sfari-search-tab:hover { border-color: var(--saddle); color: var(--dark); }

.sfari-search-tab.is-active {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--cream);
}

.sfari-search-tab__count {
  margin-left: 4px;
  opacity: 0.6;
  font-weight: 400;
}

.sfari-search-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 28px;
}

@media (max-width: 960px) {
  .sfari-search-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }
}

@media (max-width: 520px) {
  .sfari-search-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

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

.sfari-search-tab-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--hide-500);
  font-style: italic;
  font-family: var(--f-accent, inherit);
}

.sfari-search-pagination {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

.sfari-search-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  margin: 0 3px;
  border: 1px solid var(--hide-200);
  border-radius: 10px;
  color: var(--hide-700);
  text-decoration: none;
  font-size: 13px;
}

.sfari-search-pagination .page-numbers.current {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--cream);
}

.sfari-search-pagination .page-numbers:hover:not(.current) {
  border-color: var(--saddle);
  color: var(--dark);
}

/* Empty state — no results at all */
.sfari-search-empty {
  text-align: center;
  padding: 72px 20px 56px;
  max-width: 520px;
  margin: 0 auto;
}

.sfari-search-empty__title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  color: var(--dark);
  margin: 0 0 12px;
  line-height: 1.25;
  word-break: break-word;
}

.sfari-search-empty__subtitle {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hide-500);
  font-family: var(--f-accent, inherit);
  font-style: italic;
}

.sfari-search-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--dark);
  color: var(--cream);
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color .2s ease;
}

.sfari-search-empty__cta:hover { background: var(--saddle); }

/* ─────────────────────────────────────────────────────────────────────
   Shop filter empty state — 2026-04-19 Task 2.6
   Shown inside the product grid area when a category filter matches
   zero products. Subtle, not apologetic.
   ───────────────────────────────────────────────────────────────────── */

.sfari-shop__filter-empty {
  text-align: center;
  padding: 72px 20px 56px;
  max-width: 520px;
  margin: 32px auto 0;
  animation: sfari-shop-filter-empty-in .3s ease-out;
}

@keyframes sfari-shop-filter-empty-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sfari-shop__filter-empty-icon {
  display: block;
  margin: 0 auto 18px;
  color: var(--hide-400);
}

.sfari-shop__filter-empty-title {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 500;
  color: var(--dark);
  margin: 0 0 10px;
  line-height: 1.3;
}

.sfari-shop__filter-empty-subtitle {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--hide-500);
  font-family: var(--f-accent, inherit);
  font-style: italic;
}

.sfari-shop__filter-empty-reset {
  display: inline-block;
  padding: 11px 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark);
  background: transparent;
  border: 1.5px solid var(--dark);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
  font-family: inherit;
}

.sfari-shop__filter-empty-reset:hover {
  background: var(--dark);
  color: var(--cream);
}