/*
Theme Name:         AYA Africa Custom Child Theme
Theme URI:          https://aya.africa
Description:        High-performance Custom Child Theme for AYA Africa based on Hello Elementor, optimized with Tailwind utilities, custom layouts, and automated template bindings.
Author:             Senior Full-Stack IT Specialist
Version:            1.0.5
Template:           hello-elementor
Text Domain:        aya-africa-child
*/

/* ===================================================================
   Bulk Orders & Application Form (Sell Design System Matching)
   =================================================================== */
.ai-card {
    border: 1px solid var(--line-mid, rgba(22, 19, 16, 0.18)) !important;
}

/* ===================================================================
   AYA AFRICA — SHARED DESIGN SYSTEM (100% MERGED)
   WP + WooCommerce + Dokan custom child theme + Elementor Overrides
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,700;1,900&family=Hanken+Grotesk:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

/* ===================================================================
   1. GLOBAL TOKENS & VARIABLES
   =================================================================== */
:root {
  /* Brand Colour Palette */
  --c-teal:       #80C1C3;
  --c-aubergine:  #443B50;
  --c-mauve:      #7A4F85;
  --c-charcoal:   #292D2C;
  --c-ochre:      #A4881D; /* Primary Brand Ochre */
  --c-olive:      #645B34;
  --c-lime:       #7F991C;
  
  /* Elementor Extended Palette */
  --c-black:      #0f0f0f;
  --c-dark:       #1a1a1a;
  --c-cream:      #f9f6f1;
  --c-white:      #ffffff;
  --c-text:       rgba(255, 255, 255, 0.7);

  /* UI Tokens */
  --bg:           #FAFAF7;
  --bg-soft:      #F2EFE8;
  --bg-warm:      #EBE4D5;
  --paper:        #FFFFFF;
  --ink:          #161310;
  --ink-mid:      #5B564E;
  --ink-soft:     #8E887E;
  --line:         rgba(22, 19, 16, 0.12);
  --line-mid:     rgba(22, 19, 16, 0.25);
  --radius:       0px;

  /* Typography Stack */
  --display:   'Helvetica Now Display', 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:      'Trio Grotesk', 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --serif:     'Cormorant Garamond', Georgia, serif;
  --font-head: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing */
  --gutter:    clamp(1.25rem, 4vw, 5rem);
  --section-y: clamp(5rem, 10vw, 9rem);
}

[v-cloak] {
  display: none !important;
}

/* ===================================================================
   2. CORE RESETS & DEFAULTS
   =================================================================== */
*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

/* ===================================================================
   3. NATIVE SCROLL BUFFER & SCROLL-TO-TOP WIDGET
   =================================================================== */
html {
  scroll-behavior: smooth !important;
}

body {
  overflow-x: hidden;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.scroll-top-btn {
  position: fixed !important;
  bottom: 5rem !important;
  right: 2rem !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  background-color: var(--c-charcoal) !important;
  color: var(--bg) !important;
  border: 1px solid var(--line-mid) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  cursor: pointer !important;
  z-index: 999999 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: 
    opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
    visibility 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.2s ease;
}

.scroll-top-btn.scroll-top-btn--visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.scroll-top-btn:hover {
  background-color: var(--c-ochre) !important;
  color: var(--c-charcoal) !important;
  border-color: var(--c-ochre) !important;
}

/* ===================================================================
   4. GLOBAL UTILITIES (Buttons, Typography, Links)
   =================================================================== */
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  line-height: 1;
}
.logo img { display: block; width: auto; height: auto; max-width: 81px; }
.logo--light { color: var(--bg); }
.logo--lg img { height: 44px; }

/* Custom Image Logos */
/* Base states before scrolling */
.header--transparent:not(.header--scrolled) .logo-img-black { display: none; }
.header--transparent:not(.header--scrolled) .logo-img-white { display: block; }

.header--solid:not(.header--solid-scrolled) .logo-img-white { display: none; }
.header--solid:not(.header--solid-scrolled) .logo-img-black { display: block; }

/* Scrolled state (White text, White Logo) */
.header--scrolled .logo-img-black { display: none !important; }
.header--scrolled .logo-img-white { display: block !important; }

/* Solid Scrolled state (Black text, Black Logo) */
.header--solid-scrolled .logo-img-white { display: none !important; }
.header--solid-scrolled .logo-img-black { display: block !important; }

/* Typography */
.eyebrow {
  font-family: var(--body);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-mid);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow .diamond {
  width: 7px; height: 7px;
  background: currentColor;
  transform: rotate(45deg);
  display: inline-block;
}
.h-display {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
}
.h-display em { font-style: italic; color: var(--c-ochre); font-weight: 900; }

/* Buttons & Links */
.btn {
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.05rem 2.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  transition: all 0.25s;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-solid { background: var(--c-charcoal); color: var(--bg); }
.btn-solid:hover { background: var(--c-ochre); color: var(--c-charcoal); }
.btn-light { background: var(--bg); color: var(--c-charcoal); }
.btn-light:hover { background: var(--c-charcoal); color: var(--bg); }
.btn-ghost-light { border-color: var(--bg); color: var(--bg); }
.btn-ghost-light:hover { background: var(--bg); color: var(--c-charcoal); }
.btn-ghost-dark { border-color: var(--ink); color: var(--ink); }
.btn-ghost-dark:hover { background: var(--ink); color: var(--bg); }
.btn-ochre { background: var(--c-ochre); color: var(--c-charcoal); }
.btn-ochre:hover { background: var(--c-charcoal); color: var(--c-ochre); }

/* Elementor Override Buttons */
.elementor-button {
  border-radius: 0 !important;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Custom Link Formatting */
.section-link {
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: gap 0.25s;
}
.section-link:hover { gap: 1rem; }

.aya-section-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-black);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aya-section-link:hover { text-decoration: underline; }

/* ===================================================================
   5. HEADER & ANNOUNCE BARS (Native + Elementor Handlers)
   =================================================================== */
.announce, .aya-announce {
  background: var(--c-charcoal);
  color: var(--paper);
  font-size: 0.60rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.35rem var(--gutter);
  text-align: center;
  font-weight: 500;
  position: relative;
  z-index: 1000;
}
.announce span { opacity: 0.5; padding: 0 0.7rem; }
.announce em { color: var(--c-ochre); font-style: normal; font-weight: 600; }

/* Native Header Base */
.header {
  background: rgba(250, 250, 247, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Global Header Transparency (Targets both native & Elementor templates) */
.header--transparent,
.elementor-location-header,
.hfe-nav-menu__layout-horizontal,
.site-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: transparent !important;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* Offset scrolling so fixed header never covers content or notices */
html {
  scroll-padding-top: 100px;
}


/* Global Scrolled State */
.header--scrolled,
.site-header.scrolled,
.elementor-location-header.scrolled {
  position: fixed !important;
  background: rgba(15,15,15,0.97) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px) !important;
}

/* Header Text/Color Rules */
.header--transparent .logo,
.header--transparent .nav-primary a,
.header--transparent .nav-utility button,
.header--transparent .nav-utility a,
.header--transparent .currency {
  color: var(--ink);
}
.header--transparent .currency { border-color: var(--line-mid); }

.header--scrolled .logo,
.header--scrolled .nav-primary a,
.header--scrolled .nav-utility button,
.header--scrolled .nav-utility a,
.header--scrolled .currency {
  color: #FFFFFF !important;
}
.header--scrolled .currency { border-color: rgba(255, 255, 255, 0.4); }
.header--scrolled .nav-primary .vendor-cta { color: var(--c-teal) !important; }
.header--scrolled .nav-primary .biz-cta { color: var(--c-ochre) !important; }
.header--scrolled .nav-primary { padding-top: 0; }

/* Solid Header Variant (pages without a full-bleed hero — e.g. About) */
.header--solid {
  position: sticky !important;
  top: 0;
  background: rgba(250, 250, 247, 0.98) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line) !important;
}
.header--solid .logo,
.header--solid .nav-primary a,
.header--solid .nav-utility button,
.header--solid .nav-utility a,
.header--solid .currency {
  color: var(--ink);
}
.header--solid .currency { border-color: var(--line-mid); }
.header--solid .nav-primary .vendor-cta { color: var(--c-mauve); }
.header--solid .nav-primary .biz-cta { color: var(--c-ochre); }
.header--solid .nav-primary { padding-top: 0; }

/* Solid Header — Scrolled State (stays light, gains elevation) */
.header--solid-scrolled {
  background: rgba(250, 250, 247, 1) !important;
  border-bottom-color: transparent !important;
  box-shadow: 0 2px 24px rgba(22, 19, 16, 0.09), 0 1px 4px rgba(22, 19, 16, 0.05) !important;
  backdrop-filter: blur(12px);
}
.header--solid-scrolled .logo,
.header--solid-scrolled .nav-primary a,
.header--solid-scrolled .nav-utility button,
.header--solid-scrolled .nav-utility a,
.header--solid-scrolled .currency {
  color: var(--ink);
}
.header--solid-scrolled .nav-primary .vendor-cta { color: var(--c-mauve); }
.header--solid-scrolled .nav-primary .biz-cta { color: var(--c-ochre); }

/* WP Admin Bar Offsets */
.admin-bar .header--transparent,
.admin-bar .elementor-location-header,
.admin-bar .site-header,
.admin-bar .header--scrolled,
.admin-bar .header--solid,
.admin-bar .header--solid-scrolled {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  .admin-bar .header--transparent,
  .admin-bar .elementor-location-header,
  .admin-bar .site-header,
  .admin-bar .header--scrolled,
  .admin-bar .header--solid,
  .admin-bar .header--solid-scrolled {
    top: 46px !important;
  }
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 1.1rem var(--gutter);
  gap: 2rem;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.header--transparent:not(.header--scrolled) .header-inner {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav-primary {
  display: flex;
  gap: 2.4rem;
  align-items: center;
  justify-content: center;
  padding-top: 1em;
  transition: padding-top 0.3s ease;
}
.nav-primary a {
  font-family: var(--body);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  position: relative;
  padding-bottom: 0.2rem;
  transition: color 0.2s;
}
.nav-primary a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.nav-primary a:hover::after, .nav-primary a.active::after { transform: scaleX(1); }
.nav-primary .vendor-cta { color: var(--c-mauve); font-weight: 600; }
.nav-primary .biz-cta { color: var(--c-ochre); font-weight: 600; }
.header--transparent .nav-primary .vendor-cta { color: var(--c-mauve); }
.header--transparent .nav-primary .biz-cta { color: var(--c-ochre); }

.nav-utility {
  display: flex;
  gap: 1.4rem;
  align-items: center;
}
.nav-utility button, .nav-utility a {
  font-size: 0.82rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.cart-count {
  background: var(--c-mauve);
  color: var(--bg);
  font-size: 0.62rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.currency {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line-mid);
  border-radius: 999px;
}

/* ===================================================================
   6. HERO COMPONENT (Native & Elementor)
   =================================================================== */

/* Bypassing Elementor Wrappers so Grid/Flex layouts work */
.hero .elementor-container,
.hero .elementor-column,
.hero .elementor-widget-wrap,
.hero .elementor-widget,
.hero .elementor-widget-container,
.statement .elementor-container,
.statement .elementor-column,
.statement .elementor-widget-wrap,
.statement .elementor-widget,
.statement .elementor-widget-container,
.aya-word .elementor-container,
.aya-word .elementor-column,
.aya-word .elementor-widget-wrap,
.aya-word .elementor-widget,
.aya-word .elementor-widget-container,
.vibes .elementor-container,
.vibes .elementor-column,
.vibes .elementor-widget-wrap,
.vibes .elementor-widget,
.vibes .elementor-widget-container,
.products .elementor-container,
.products .elementor-column,
.products .elementor-widget-wrap,
.products .elementor-widget,
.products .elementor-widget-container,
.feature-band .elementor-container,
.feature-band .elementor-column,
.feature-band .elementor-widget-wrap,
.feature-band .elementor-widget,
.feature-band .elementor-widget-container,
.manifesto .elementor-container,
.manifesto .elementor-column,
.manifesto .elementor-widget-wrap,
.manifesto .elementor-widget,
.manifesto .elementor-widget-container,
.business .elementor-container,
.business .elementor-column,
.business .elementor-widget-wrap,
.business .elementor-widget,
.business .elementor-widget-container,
.vendor-pitch .elementor-container,
.vendor-pitch .elementor-column,
.vendor-pitch .elementor-widget-wrap,
.vendor-pitch .elementor-widget,
.vendor-pitch .elementor-widget-container,
.editorial .elementor-container,
.editorial .elementor-column,
.editorial .elementor-widget-wrap,
.editorial .elementor-widget,
.editorial .elementor-widget-container,
.press .elementor-container,
.press .elementor-column,
.press .elementor-widget-wrap,
.press .elementor-widget,
.press .elementor-widget-container,
.newsletter .elementor-container,
.newsletter .elementor-column,
.newsletter .elementor-widget-wrap,
.newsletter .elementor-widget,
.newsletter .elementor-widget-container {
  display: contents !important;
}

.hero, .aya-hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  max-height: 960px;
  overflow: hidden;
  background: var(--c-charcoal);
  color: var(--bg);
  display: flex;
  align-items: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img, .aya-hero .elementor-widget-image img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
  z-index: 0;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,19,16,0.4) 0%, rgba(22,19,16,0) 30%, rgba(22,19,16,0) 60%, rgba(22,19,16,0.75) 100%);
}
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gutter) calc(var(--gutter) * 1.5);
  z-index: 2;
}
.hero-eyebrow {
  color: rgba(255,255,255,0.7);
  margin-bottom: 1.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
}
.hero-headline {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.hero-headline .small {
  font-size: clamp(1rem, 1.8vw, 1.6rem);
  font-weight: 900;
  display: block;
  margin-bottom: 0.4rem;
  letter-spacing: 0.04em;
}
.hero-headline .big {
  font-size: clamp(5rem, 18vw, 16rem);
  display: block;
}
.hero-sub {
  font-size: 1.05rem;
  max-width: 38ch;
  margin-bottom: 2.5rem;
  opacity: 0.85;
  line-height: 1.55;
}
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-meta {
  position: absolute;
  bottom: 1.5rem;
  right: var(--gutter);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  z-index: 2;
}

/* ===================================================================
   7. MARQUEE STRIP
   =================================================================== */
.marquee {
  background: var(--c-charcoal);
  color: var(--bg);
  padding: 1.2rem 0;
  overflow: hidden;
  border-bottom: 1px solid var(--c-ochre);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  gap: 3.5rem;
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 24s linear infinite; /* Adjusted to 24s as requested in overrides */
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 2rem; }
.marquee-track span::after {
  content: '✦';
  color: var(--c-ochre);
  font-size: 0.8rem;
}

/* ===================================================================
   8. LAYOUT BLOCKS (Statement, Vibes, Products, Features)
   =================================================================== */
.statement {
  padding: clamp(4rem, 8vw, 6rem) var(--gutter);
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.statement p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  max-width: 28ch;
  margin: 0 auto;
  color: var(--ink);
}
.statement p em { font-style: italic; color: var(--c-mauve); font-weight: 400; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 4rem;
  flex-wrap: wrap;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto 4rem;
}
.section-head .left { flex: 1; min-width: 280px; }
.section-head h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 0.92;
  max-width: 18ch;
  margin-top: 1rem;
}
.section-head h2 em { font-style: italic; color: var(--c-mauve); font-weight: 900; }
.section-head h2 .ochre { color: var(--c-ochre); font-style: italic; font-weight: 900; }
.section-head .head-text { max-width: 36ch; color: var(--ink-mid); font-size: 1rem; margin-top: 1.5rem; }

/* AYA Word Block */
.aya-word {
  padding: var(--section-y) var(--gutter);
  border-bottom: 1px solid var(--line);
}
.aya-word-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}
.aya-word .massive {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(8rem, 18vw, 18rem);
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.aya-word .massive .reg { font-size: 0.18em; vertical-align: super; margin-left: 0.05em; }
.aya-word .meanings .eyebrow { margin-bottom: 2rem; }
.aya-word .meanings h3 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
  max-width: 22ch;
}
.aya-word .meaning-list { display: flex; flex-direction: column; gap: 1.5rem; }
.aya-word .meaning {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.aya-word .meaning:last-child { border-bottom: none; padding-bottom: 0; }
.aya-word .meaning .lang {
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-mauve);
}
.aya-word .meaning .text { font-size: 0.95rem; line-height: 1.5; color: var(--ink-mid); }
.aya-word .meaning .text strong { color: var(--ink); font-weight: 600; }

/* Shop By Vibe */
.vibes {
  padding: var(--section-y) var(--gutter);
  border-bottom: 1px solid var(--line);
}
.vibe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1200px; margin-left: auto; margin-right: auto; }
.vibe, .vibe-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: pointer;
  background: var(--c-charcoal);
}
.vibe img, .vibe-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease, filter 0.3s;
  filter: brightness(0.92);
}
.vibe:hover img, .vibe-card:hover img { transform: scale(1.05); filter: brightness(0.7); }
.vibe .vibe-text {
  position: absolute;
  bottom: 1.8rem;
  left: 1.8rem;
  right: 1.8rem;
  color: var(--bg);
  z-index: 2;
}
.vibe::after, .vibe-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(22,19,16,0) 50%, rgba(22,19,16,0.7) 100%);
  z-index: 1;
}
.vibe .v-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.85;
  margin-bottom: 0.6rem;
}
.vibe h3 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.vibe .arrow {
  position: absolute;
  top: 1.8rem;
  right: 1.8rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--bg);
  color: var(--c-charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
}
.vibe:hover .arrow { opacity: 1; }

/* Product Grids */
.products { padding: var(--section-y) var(--gutter); border-bottom: 1px solid var(--line); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 1.8rem; max-width: 1200px; margin-left: auto; margin-right: auto; }
.product-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Make the product card a flex column that fills the grid height */
.product { 
  cursor: pointer; 
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product .img-wrap {
  aspect-ratio: 4/5;
  background: var(--bg-soft);
  overflow: hidden;
  margin-bottom: 1.2rem;
  position: relative;
}
.product img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.product:hover img, a[href="product.html"]:hover img { transform: scale(1.03); }
.product .wishlist {
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 2.4rem; height: 2.4rem;
  background: var(--bg); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s; font-size: 1rem;
}
.product:hover .wishlist { opacity: 1; }
.product .badge {
  position: absolute; top: 0.9rem; left: 0.9rem;
  background: var(--c-charcoal); color: var(--bg);
  font-family: var(--display); font-size: 0.6rem;
  letter-spacing: 0.18em; padding: 0.45rem 0.7rem;
  text-transform: uppercase; font-weight: 700;
}
.product .badge.export { background: var(--c-teal); color: var(--c-charcoal); }
.product .badge.bestseller { background: var(--c-ochre); color: var(--c-charcoal); }
.product .badge.new { background: var(--c-lime); color: var(--c-charcoal); }
.product .vendor {
  font-family: var(--display); font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--c-mauve); font-weight: 700; margin-bottom: 0.45rem;
}
.product .title {
  font-family: var(--body); font-size: 1.02rem;
  font-weight: 500; line-height: 1.3; margin-bottom: 0.6rem; color: var(--ink);
}
.product .meta { display: flex; justify-content: space-between; align-items: center; }
.product .price { font-family: var(--display); font-size: 0.92rem; font-weight: 700; }
.product .origin { font-size: 0.74rem; color: var(--ink-mid); display: flex; align-items: center; gap: 0.35rem; }
.product .origin::before { content: ''; width: 6px; height: 6px; background: var(--c-lime); border-radius: 50%; }

/* Feature Bands */
.feature-band {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.feature-band-bg { position: absolute; inset: 0; z-index: 0; }
.feature-band-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9); }
.feature-band-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(22,19,16,0.7) 0%, rgba(22,19,16,0.2) 60%, rgba(22,19,16,0) 100%);
}
.feature-band--right .feature-band-bg::after {
  background: linear-gradient(to left, rgba(22,19,16,0.7) 0%, rgba(22,19,16,0.2) 60%, rgba(22,19,16,0) 100%);
}
.feature-band-content {
  position: relative; z-index: 2; padding: var(--section-y) var(--gutter);
  max-width: 720px; color: var(--bg);
}
.feature-band--right .feature-band-content { margin-left: auto; text-align: right; }
.feature-band .eyebrow { color: rgba(255,255,255,0.8); margin-bottom: 1.5rem; }
.feature-band h2 {
  font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 6vw, 5rem);
  text-transform: uppercase; line-height: 0.92; letter-spacing: -0.01em; margin-bottom: 1.5rem;
}
.feature-band h2 em { font-style: italic; color: var(--c-ochre); }
.feature-band p { font-size: 1.1rem; max-width: 50ch; margin-bottom: 2.5rem; line-height: 1.55; opacity: 0.9; }
.feature-band--right p { margin-left: auto; }

/* Maker Spotlight */
.elementor-widget-aya_maker_spotlight { margin-bottom: 0 !important; }
.maker {
  background: var(--c-aubergine);
  color: var(--bg);
  padding: var(--section-y) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.maker::before {
  content: ''; position: absolute; top: 2.5rem; right: 2.5rem;
  width: 80px; height: 80px; border: 1.5px solid var(--c-ochre);
  transform: rotate(45deg); opacity: 0.4;
}
.maker-left { display: flex; flex-direction: column; gap: 2rem; }
.maker-img { text-align: center; }
.maker-img a { display: inline-block; }
.maker-img img { max-width: 100%; max-height: 500px; width: auto; height: auto; object-fit: contain; border-radius: 4px; transition: transform 0.3s ease; }
.maker-img a:hover img { transform: scale(1.02); }
.maker-text .eyebrow { color: var(--c-ochre); margin-bottom: 1.8rem; }
.maker-text h3 {
  font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 5vw, 4rem);
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.92; margin-bottom: 1.5rem;
}
.maker-text .quote {
  font-family: var(--serif); font-style: italic; font-size: 1.4rem;
  margin-bottom: 1.8rem; line-height: 1.45; padding-left: 1.4rem;
  border-left: 2px solid var(--c-ochre); max-width: 42ch; font-weight: 300;
}
.maker-text p { margin-bottom: 1.8rem; opacity: 0.85; max-width: 50ch; font-size: 1rem; }
.maker-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.maker-product { cursor: pointer; text-decoration: none; color: inherit; transition: color 0.3s; }
.maker-product:hover { color: var(--c-ochre); }
.maker-product:only-child { grid-column: 2; }
.maker-product img { aspect-ratio: 1; object-fit: cover; transition: opacity 0.3s; width: 100%; display: block; border-radius: 4px; }
.maker-product:hover img { opacity: 0.85; }
.maker-product .pname { font-size: 0.74rem; margin-top: 0.6rem; opacity: 0.75; }
.maker-product .pprice { font-family: var(--display); font-size: 0.78rem; font-weight: 700; margin-top: 0.2rem; }


/* Manifesto Block */
.manifesto {
  background: var(--c-charcoal); color: var(--bg);
  padding: calc(var(--section-y) * 1.2) var(--gutter);
  text-align: center; position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.manifesto::before, .manifesto::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(164, 136, 29, 0.12); pointer-events: none;
}
.manifesto::before { width: 70vw; height: 70vw; }
.manifesto::after { width: 50vw; height: 50vw; border-color: rgba(164, 136, 29, 0.08); }
.manifesto-inner { position: relative; max-width: 64rem; margin: 0 auto; }
.manifesto .eyebrow { color: var(--c-ochre); margin-bottom: 2.5rem; }
.manifesto blockquote {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  line-height: 1.2; letter-spacing: -0.01em; max-width: 28ch; margin: 0 auto 2.5rem;
}
.manifesto blockquote em { font-style: italic; color: var(--c-ochre); font-weight: 700; }
.manifesto cite {
  font-family: var(--body); font-style: normal; font-size: 0.74rem;
  letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.6;
}

/* Business Band */
.business { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.biz-card { padding: calc(var(--section-y) * 0.85) var(--gutter); position: relative; min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.biz-card.wholesale { background: var(--c-mauve); color: var(--bg); }
.biz-card.export    { background: var(--c-teal); color: var(--c-charcoal); }
.biz-card::before {
  content: ''; position: absolute; top: 2.5rem; left: var(--gutter);
  width: 50px; height: 50px; border: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: 0.4;
}
.biz-card .num { font-family: var(--display); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; margin-bottom: 1.2rem; opacity: 0.85; display: block; }
.biz-card h3 { font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 4.5vw, 3.6rem); text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.92; margin-bottom: 1.4rem; max-width: 13ch; }
.biz-card p { max-width: 42ch; margin-bottom: 2.2rem; opacity: 0.92; font-size: 1.04rem; }
.biz-card ul { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.2rem; }
.biz-card li { font-size: 0.78rem; padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid currentColor; }

/* Vendor Pitch */
.vendor-pitch {
  background: var(--c-lime); color: var(--c-charcoal);
  padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 4.5rem; align-items: center;
  border-bottom: 1px solid var(--line);
}
.vendor-pitch .eyebrow { margin-bottom: 1.8rem; color: var(--c-charcoal); }
.vendor-pitch h2 {
  font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  text-transform: uppercase; line-height: 0.92; letter-spacing: -0.02em; margin-bottom: 1.5rem; max-width: 13ch;
}
.vendor-pitch .lead { font-size: 1.12rem; max-width: 48ch; margin-bottom: 2.5rem; line-height: 1.55; }
.vendor-pitch .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 2.4rem; margin-bottom: 2.5rem; }
.vendor-pitch .feature { display: flex; gap: 0.9rem; align-items: start; font-size: 0.95rem; }
.vendor-pitch .feature::before { content: '◆'; color: var(--c-charcoal); font-size: 0.7rem; margin-top: 0.3rem; }

/* AI Card */
.ai-card { background: var(--bg); padding: 2.8rem; position: relative; }
.ai-card .ai-pill {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--c-charcoal); color: var(--c-lime);
  padding: 0.45rem 1rem; border-radius: 999px;
  font-family: var(--display); font-size: 0.64rem;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; margin-bottom: 2rem;
}
.ai-card .ai-pill::before {
  content: ''; width: 6px; height: 6px; background: var(--c-lime); border-radius: 50%; animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.ai-card h4 { font-family: var(--display); font-weight: 900; font-size: 1.8rem; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 1.5rem; }
.ai-card .ai-lead { color: var(--ink-mid); font-size: 0.96rem; line-height: 1.55; }
.ai-card .steps { display: flex; flex-direction: column; gap: 1.2rem; margin: 1.8rem 0; border-top: 1px solid var(--line); padding-top: 1.8rem; }
.ai-card .steps li { display: flex; gap: 1.2rem; font-size: 0.94rem; align-items: start; }
.ai-card .step-num { font-family: var(--display); font-weight: 900; font-size: 1.05rem; color: var(--c-mauve); min-width: 1.5rem; }
.ai-card .timer { font-family: var(--display); font-weight: 900; font-size: 2.6rem; color: var(--c-lime); margin: 1.5rem 0 0.3rem; display: flex; align-items: baseline; gap: 0.5rem; }
.ai-card .timer .label { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mid); font-weight: 500; font-family: var(--body); }

/* Form field color overrides to ensure text is always visible on light card background */
.ai-card input,
.ai-card select,
.ai-card textarea {
  color: var(--ink) !important;
}

/* Editorial */
.editorial { padding: var(--section-y) var(--gutter); border-bottom: 1px solid var(--line); }
.edit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.article { cursor: pointer; }
.article .img-wrap { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 1.6rem; background: var(--bg-soft); }
.article img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.article:hover img { transform: scale(1.03); }
.article .cat { font-family: var(--display); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--c-mauve); font-weight: 700; margin-bottom: 0.8rem; }
.article h4 { font-family: var(--display); font-weight: 900; font-size: 1.55rem; text-transform: uppercase; line-height: 1.05; margin-bottom: 0.8rem; letter-spacing: -0.005em; transition: color 0.2s; }
.article:hover h4 { color: var(--c-mauve); }
.article .lead { font-size: 0.95rem; color: var(--ink-mid); line-height: 1.55; margin-bottom: 1rem; }
.article .article-meta { font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.06em; }

/* Press / Trusted By */
.press { padding: calc(var(--section-y) * 0.55) var(--gutter); text-align: center; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.press-label { font-family: var(--display); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.32em; color: var(--ink-mid); margin-bottom: 2.4rem; font-weight: 700; }
.press-grid { display: flex; justify-content: center; align-items: center; gap: 3.5rem; flex-wrap: wrap; }
.press-grid .p-name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mid); opacity: 0.55; transition: opacity 0.2s; }
.press-grid .p-name:hover { opacity: 1; }
.press-grid .p-name em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Newsletter */
.newsletter {
  padding: var(--section-y) var(--gutter); text-align: center; border-bottom: 1px solid var(--line);
  background: var(--bg); position: relative; overflow: hidden;
}
.newsletter::before {
  content: 'AYA®'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--display); font-weight: 900; font-size: 40rem; color: rgba(22, 19, 16, 0.03);
  pointer-events: none; white-space: nowrap;
}
.newsletter-inner { position: relative; max-width: 36rem; margin: 0 auto; }
.newsletter h2 { font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 5vw, 4rem); text-transform: uppercase; line-height: 0.95; letter-spacing: -0.01em; margin-bottom: 1.4rem; }
.newsletter h2 em { color: var(--c-mauve); font-style: italic; font-weight: 900; }
.newsletter p { color: var(--ink-mid); margin-bottom: 2.5rem; font-size: 1rem; line-height: 1.55; }
.newsletter form { display: flex; border-bottom: 2px solid var(--ink); padding-bottom: 0.4rem; gap: 1rem; }
.newsletter input { flex: 1; border: none; background: transparent; font: inherit; font-size: 1rem; padding: 0.8rem 0; outline: none; color: var(--ink); }
.newsletter input::placeholder { color: var(--ink-soft); }
.newsletter button { font-family: var(--display); font-weight: 900; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; }
.newsletter .legal { font-size: 0.7rem; color: var(--ink-soft); margin-top: 1rem; letter-spacing: 0.04em; }
.newsletter .legal em { color: var(--c-ochre); font-style: normal; font-weight: 600; }

/* ===================================================================
   SINGLE POST / BLOG ARTICLE
   =================================================================== */

/* Masthead */
.post-masthead {
  padding: calc(var(--section-y) * 0.8) var(--gutter) calc(var(--section-y) * 0.5);
  border-bottom: 1px solid var(--line);
  text-align: center;
  background: var(--bg);
}
.post-masthead-inner { max-width: 820px; margin: 0 auto; }
.post-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 5rem);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-bottom: 1.8rem;
}
.post-deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--ink-mid);
  line-height: 1.45;
  max-width: 54ch;
  margin: 0 auto 2rem;
  font-weight: 300;
}
.post-byline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  flex-wrap: wrap;
}
.post-byline .sep { opacity: 0.4; }

/* Hero image */
.post-hero-img {
  width: 100%;
  aspect-ratio: 16/7;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.post-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body column */
.post-body-wrap {
  max-width: 740px;
  margin: 0 auto;
  padding: calc(var(--section-y) * 0.8) var(--gutter) var(--section-y);
}
.post-body {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.78;
  color: var(--ink);
}
.post-body p { margin-bottom: 1.6em; }
.post-body h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  /* margin: 2.5em 0 0.9em; */
}
.post-body h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 2em 0 0.8em;
}
.post-body blockquote {
  border-left: 3px solid var(--c-mauve);
  margin: 2.5rem 0;
  padding: 0.5rem 0 0.5rem 2rem;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink-mid);
  line-height: 1.5;
}
.post-body img {
  width: 100%;
  height: auto;
  display: block;
  margin: 2.5rem 0;
}
.post-body a { color: var(--c-mauve); text-decoration: underline; }
.post-body ul, .post-body ol { padding-left: 1.5rem; margin-bottom: 1.6em; }
.post-body li { margin-bottom: 0.5em; }

/* Author card */
.post-author-card {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 2.5rem;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  margin-top: 4rem;
}
.post-author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.post-author-name {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-bottom: 0.5rem;
}
.post-author-bio {
  font-size: 0.94rem;
  color: var(--ink-mid);
  line-height: 1.55;
  margin: 0;
}

/* Prev / Next nav */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  border-top: 1px solid var(--line);
  margin-top: 4rem;
  padding-top: 2.5rem;
}
.post-nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.post-nav-link--next { text-align: right; }
.post-nav-dir {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}
.post-nav-label {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.05rem;
  text-transform: uppercase;
  line-height: 1.1;
  transition: color 0.2s;
}
.post-nav-link:hover .post-nav-label { color: var(--c-mauve); }

/* Archive / Category pagination */
.edit-pagination {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}
.edit-pagination ul {
  display: flex;
  list-style: none;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}
.edit-pagination ul li a,
.edit-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.8rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--line-mid);
  transition: background 0.2s, color 0.2s;
}
.edit-pagination ul li a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.edit-pagination ul li span.current { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ===================================================================
   9. FOOTER (Native & Elementor Overrides)
   =================================================================== */
.footer {
  background: var(--c-charcoal);
  color: var(--bg);
  padding: calc(var(--section-y) * 0.8) var(--gutter) 2rem;
}

/* Force Elementor footer wrappers to behave */
footer.elementor-section,
.elementor-location-footer {
  margin-top: 0 !important;
}

.footer-top { text-align: center; margin-bottom: 4rem; padding-bottom: 4rem; border-bottom: 1px solid rgba(250, 250, 247, 0.1); }
.footer-top .massive { font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 12vw, 11rem); text-transform: uppercase; line-height: 0.85; letter-spacing: -0.02em; color: var(--bg); margin-bottom: 1.2rem; }
.footer-top .massive em { color: var(--c-ochre); font-style: italic; font-weight: 900; }
.footer-top .tagline { font-family: var(--body); font-size: 0.82rem; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.6; }

.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 3rem; margin-bottom: 3rem; }
.footer-brand p { opacity: 0.65; max-width: 30ch; font-size: 0.92rem; line-height: 1.55; margin-top: 1.2rem; }
.footer-brand .socials { display: flex; gap: 0.7rem; margin-top: 1.8rem; }
.footer-brand .social-icon { width: 2.4rem; height: 2.4rem; border: 1px solid rgba(250, 250, 247, 0.2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 600; transition: all 0.2s; }
.footer-brand .social-icon:hover { background: var(--c-ochre); color: var(--c-charcoal); border-color: var(--c-ochre); }
.footer-col h5 { font-family: var(--display); font-weight: 900; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.22em; margin-bottom: 1.4rem; color: var(--c-ochre); }
.footer-col li { margin-bottom: 0.65rem; }
.footer-col a { font-size: 0.88rem; opacity: 0.75; transition: all 0.2s; }
.footer-col a:hover { opacity: 1; color: var(--c-teal); }
.footer-bottom { border-top: 1px solid rgba(250, 250, 247, 0.1); padding-top: 2rem; display: flex; justify-content: space-between; font-size: 0.76rem; opacity: 0.5; flex-wrap: wrap; gap: 1rem; }


/* ===================================================================
   10. INTERNAL WOOCOMMERCE & ARCHIVE PAGES
   =================================================================== */
/* Breadcrumb */
.breadcrumb { padding: 1.5rem var(--gutter); font-size: 0.78rem; color: var(--ink-mid); letter-spacing: 0.04em; border-bottom: 1px solid var(--line); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { padding: 0 0.6rem; opacity: 0.5; }
.breadcrumb .current { color: var(--ink); font-weight: 500; }

/* Product List Page (PLP) */
.plp-header { padding: calc(var(--section-y) * 0.65) var(--gutter) calc(var(--section-y) * 0.4); border-bottom: 1px solid var(--line); }
.plp-header .eyebrow { margin-bottom: 1.2rem; }
.plp-header h1 { font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 7vw, 5.5rem); text-transform: uppercase; line-height: 0.92; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.plp-header h1 em { font-style: italic; color: var(--c-mauve); }
.plp-header .description { max-width: 56ch; color: var(--ink-mid); font-size: 1.05rem; margin-bottom: 2rem; }
.plp-header .stats { display: flex; gap: 3rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mid); }
.plp-header .stats strong { display: block; font-family: var(--display); font-weight: 900; font-size: 1.5rem; color: var(--ink); margin-bottom: 0.2rem; letter-spacing: 0; text-transform: none; }
.plp-body { display: grid; grid-template-columns: 18rem 1fr; gap: 3rem; padding: calc(var(--section-y) * 0.5) var(--gutter); border-bottom: 1px solid var(--line); }
.plp-filters h4 { font-family: var(--display); font-weight: 900; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.plp-filters h4:first-child { padding-top: 0; border-top: none; }
.plp-filters li { padding: 0.4rem 0; font-size: 0.92rem; color: var(--ink-mid); cursor: pointer; transition: color 0.2s; }
.plp-filters li:hover { color: var(--ink); }
.plp-filters li.active { color: var(--ink); font-weight: 500; }
.plp-filters .count { color: var(--ink-soft); font-size: 0.8rem; margin-left: 0.3rem; }
.plp-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
.plp-toolbar .results { color: var(--ink-mid); }
.plp-toolbar .sort { display: flex; align-items: center; gap: 0.6rem; }

/* Product Detail Page (PDP) */
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; padding: calc(var(--section-y) * 0.5) var(--gutter) var(--section-y); border-bottom: 1px solid var(--line); max-width: 1500px; margin: 0 auto; }
.pdp-gallery { display: flex; flex-direction: column; gap: 1rem; }
.pdp-gallery .main { aspect-ratio: 4/5; overflow: hidden; background: var(--bg-soft); }
.pdp-gallery .main img { width: 100%; height: 100%; object-fit: cover; }
.pdp-gallery .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.pdp-gallery .thumbs .thumb { aspect-ratio: 1; overflow: hidden; cursor: pointer; position: relative; background: var(--bg-soft); }
.pdp-gallery .thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-gallery .thumbs .thumb.active::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--c-ochre); }
.pdp-info { padding-top: 0.5rem; }
.pdp-info .breadcrumb-mini { font-size: 0.74rem; color: var(--ink-mid); margin-bottom: 1.5rem; }
.pdp-info .vendor-tag { font-family: var(--display); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--c-mauve); font-weight: 700; margin-bottom: 1rem; }
.pdp-info h1 { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 4vw, 3.2rem); text-transform: uppercase; line-height: 0.95; letter-spacing: -0.01em; margin-bottom: 1.2rem; }
.pdp-info .price-row { display: flex; align-items: baseline; gap: 1.5rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.pdp-info .price { font-family: var(--display); font-weight: 900; font-size: 2.2rem; }
.pdp-info .currency-note { font-size: 0.86rem; color: var(--ink-mid); }
.pdp-info .pdp-description { font-size: 1rem; line-height: 1.65; color: var(--ink-mid); margin-bottom: 2rem; }
.pdp-info .pdp-attrs { margin-bottom: 2rem; }
.pdp-info .pdp-attr { display: grid; grid-template-columns: 9rem 1fr; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.pdp-info .pdp-attr dt { font-family: var(--display); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mid); }
.pdp-info .pdp-attr dd { color: var(--ink); }
.pdp-options { margin-bottom: 2rem; }
.pdp-options h5 { font-family: var(--display); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.9rem; }
.pdp-options .swatches { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pdp-options .swatch { padding: 0.7rem 1.2rem; border: 1px solid var(--line-mid); background: var(--bg); font-size: 0.88rem; cursor: pointer; transition: all 0.2s; }
.pdp-options .swatch:hover { border-color: var(--ink); }
.pdp-options .swatch.selected { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pdp-actions { display: flex; gap: 0.6rem; margin-bottom: 2rem; }
.pdp-actions .qty { display: flex; align-items: center; border: 1px solid var(--line-mid); }
.pdp-actions .qty button { padding: 0 1rem; font-size: 1.2rem; }
.pdp-actions .qty input { width: 3rem; text-align: center; border: none; background: transparent; font: inherit; outline: none; padding: 1rem 0; }
.pdp-actions .btn { flex: 1; justify-content: center; }
.pdp-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 2rem; }
.pdp-trust .item { display: flex; gap: 0.8rem; align-items: start; padding: 1.2rem 1rem; background: var(--bg-soft); font-size: 0.82rem; line-height: 1.4; transition: all 0.25s ease; border: 1px solid transparent; }
.pdp-trust .item:hover { border-color: var(--line); background: var(--bg-warm); }
.pdp-trust .item strong { display: block; font-weight: 700; margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem; color: var(--c-aubergine); }
.pdp-trust .item span { color: var(--ink-mid); }
.pdp-trust .icon { flex-shrink: 0; width: 2.2rem; height: 2.2rem; background: var(--bg); display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--c-ochre); transition: all 0.25s ease; }
.pdp-trust .item:hover .icon { background: var(--c-ochre); color: var(--c-white); transform: scale(1.05); }
.pdp-trust .icon svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }

/* PDP Press Bar ("As Seen In") */
.pdp-press-bar {
  background-color: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 3rem 0;
  margin: 5rem 0;
  text-align: center;
}
.pdp-press-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.pdp-press-bar h5 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pdp-press-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4rem;
  width: 100%;
}
.pdp-press-logo {
  color: var(--ink-soft);
  opacity: 0.5;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}
.pdp-press-logo:hover {
  opacity: 1;
  color: var(--c-aubergine);
}
.pdp-press-logo svg {
  height: 1.8rem;
  max-width: 8rem;
  fill: currentColor;
}

/* PDP Testimonials Grid */
.pdp-testimonials {
  padding: 6rem 0;
  border-top: 1px solid var(--line);
}
.pdp-testimonials-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.pdp-testimonials .section-head {
  margin-bottom: 4rem;
  text-align: center;
}
.pdp-testimonials .section-head .eyebrow {
  justify-content: center;
  margin-bottom: 1rem;
}
.pdp-testimonials .section-head h2 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  font-style: italic;
  font-weight: 300;
  color: var(--c-aubergine);
}
.pdp-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.pdp-testimonial-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
}
.pdp-testimonial-card:hover {
  border-color: var(--c-ochre);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.04);
}
.pdp-testimonial-stars {
  display: flex;
  gap: 0.25rem;
  color: var(--c-ochre);
  font-size: 1rem;
}
.pdp-testimonial-text {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-mid);
  flex-grow: 1;
}
.pdp-testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pdp-testimonial-author-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.pdp-testimonial-author-status {
  font-family: var(--body);
  font-size: 0.75rem;
  color: var(--c-teal);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .pdp-press-logos {
    gap: 2.5rem;
  }
  .pdp-testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ===================================================================
   PAGE-SPECIFIC: SINGLE PRODUCT DETAIL (PDP)
   =================================================================== */
.pdp-container {
  max-width: 1500px;
  margin: 0 auto;
}

/* Fix staggered rows from variable title sizes in grids */
.product-grid .product {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-grid .product .product-actions,
.product-grid .product .meta {
  margin-top: auto;
}

/* Custom Swatch Implementations */
.pdp-options .swatches .swatch-attribute {
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--line-mid);
  background: var(--bg);
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--body);
  text-transform: uppercase;
}
.pdp-options .swatches .swatch-attribute:hover {
  border-color: var(--ink);
}
.pdp-options .swatches .swatch-attribute.selected {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* Quantity Field Component Overrides */
.pdp-actions .qty-changer {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-mid);
  background: var(--bg);
}
.pdp-actions .qty-changer button {
  padding: 0 1.2rem;
  font-size: 1.2rem;
  font-weight: 300;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.pdp-actions .qty-changer button:hover {
  background: var(--bg-soft);
}
.pdp-actions .qty-changer input[type="number"] {
  width: 3.5rem;
  text-align: center;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 600;
  outline: none;
  padding: 1rem 0;
  -moz-appearance: textfield;
}
.pdp-actions .qty-changer input::-webkit-outer-spin-button,
.pdp-actions .qty-changer input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Layout Tweaks for Native Variations Form */
.pdp-info form.variations_form {
  display: block;
  margin-bottom: 2rem;
}
.pdp-info table.variations {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.pdp-info table.variations td {
  padding: 0.5rem 0;
  border: none;
  display: block;
}
.pdp-info table.variations td.label {
  padding-bottom: 0.25rem;
}
.pdp-info table.variations td.label label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.pdp-info table.variations select {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line-mid);
  background: var(--bg);
  font-family: var(--body);
  font-size: 0.9rem;
  outline: none;
  border-radius: 0;
}

/* Hide native reset link to keep editorial clean */
.pdp-info .reset_variations {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* PDP Vendor Card */
.pdp-vendor-card { padding: 1.8rem; background: var(--c-aubergine); color: var(--bg); display: grid; grid-template-columns: 4rem 1fr auto; gap: 1.2rem; align-items: center; }
.pdp-vendor-card .avatar { width: 4rem; height: 4rem; border-radius: 50%; overflow: hidden; background: var(--bg-soft); }
.pdp-vendor-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.pdp-vendor-card .info .label { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-ochre); margin-bottom: 0.2rem; }
.pdp-vendor-card .info h5 { font-family: var(--display); font-weight: 900; font-size: 1.2rem; text-transform: uppercase; margin-bottom: 0.2rem; }
.pdp-vendor-card .info p { font-size: 0.82rem; opacity: 0.8; }

/* Vendor Store Layout */
.store-hero { position: relative; height: 60vh; min-height: 480px; overflow: hidden; background: var(--c-aubergine); }
.store-hero img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7); }
.store-hero-content { position: absolute; inset: 0; display: flex; align-items: end; padding: 0 var(--gutter) calc(var(--gutter) * 1.2); color: var(--bg); }
.store-hero-content .inner { max-width: 800px; }
.store-hero-content .eyebrow { color: var(--c-ochre); margin-bottom: 1rem; }
.store-hero-content h1 { font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 7vw, 6rem); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.92; margin-bottom: 1rem; }
.store-hero-content .location { font-size: 0.9rem; letter-spacing: 0.1em; opacity: 0.85; display: flex; align-items: center; gap: 0.7rem; }
.store-hero-content .location::before { content: ''; width: 8px; height: 8px; background: var(--c-lime); border-radius: 50%; }
.store-meta { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; padding: calc(var(--section-y) * 0.65) var(--gutter); border-bottom: 1px solid var(--line); align-items: start; }
.store-meta .bio h3 { font-family: var(--display); font-weight: 900; font-size: 1.8rem; text-transform: uppercase; margin-bottom: 1.5rem; letter-spacing: -0.005em; }
.store-meta .bio p { font-size: 1.05rem; color: var(--ink-mid); line-height: 1.65; margin-bottom: 1.2rem; max-width: 60ch; }
.store-meta .sidebar { padding-left: 2rem; border-left: 1px solid var(--line); }
.store-meta .stat { margin-bottom: 1.5rem; }
.store-meta .stat .label { font-family: var(--display); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mid); margin-bottom: 0.3rem; }
.store-meta .stat .value { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }

/* About Page */
.about-hero { padding: calc(var(--section-y) * 0.8) var(--gutter) calc(var(--section-y) * 0.5); text-align: left; border-bottom: 1px solid var(--line); max-width: 1100px; }
.about-hero .eyebrow { margin-bottom: 1.5rem; }
.about-hero h1 { font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 7.5vw, 6rem); text-transform: uppercase; line-height: 0.92; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.about-hero h1 em { font-style: italic; color: var(--c-mauve); font-weight: 900; }
.about-hero .lead { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.4; color: var(--ink-mid); max-width: 50ch; font-weight: 300; }
.values { padding: var(--section-y) var(--gutter); border-bottom: 1px solid var(--line); }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2.5rem; }
.value .num { font-family: var(--display); font-weight: 900; font-size: 0.78rem; color: var(--c-ochre); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5rem; }
.value h4 { font-family: var(--display); font-weight: 900; font-size: 1.35rem; text-transform: uppercase; margin-bottom: 1rem; letter-spacing: -0.005em; color: inherit; }
.value p { color: var(--ink-mid); font-size: 0.96rem; line-height: 1.6; }


/* ===================================================================
   PAGE-SPECIFIC: SHOP / PLP ARCHIVE
   =================================================================== */
.breadcrumb {
  padding: 1.5rem var(--gutter);
  font-size: 0.78rem;
  color: var(--ink-mid);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { padding: 0 0.6rem; opacity: 0.5; }
.breadcrumb .current { color: var(--ink); font-weight: 500; }

.plp-header {
  padding: calc(var(--section-y) * 0.65) var(--gutter) calc(var(--section-y) * 0.4);
  border-bottom: 1px solid var(--line);
}
.plp-header .eyebrow { margin-bottom: 1.2rem; }
.plp-header h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 7vw, 5.5rem);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.plp-header h1 em { font-style: italic; color: var(--c-mauve); }
.plp-header .description {
  max-width: 56ch;
  color: var(--ink-mid);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}
.plp-header .stats {
  display: flex;
  gap: 3rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.plp-header .stats strong {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--ink);
  margin-bottom: 0.2rem;
  letter-spacing: 0;
  text-transform: none;
}

.plp-body {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: 3rem;
  padding: 2.5rem var(--gutter) calc(var(--section-y) * 0.5);
  border-bottom: 1px solid var(--line);
}

.plp-filters h4 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.plp-filters h4:first-child { padding-top: 0; border-top: none; }
.plp-filters li {
  padding: 0.4rem 0;
  font-size: 0.92rem;
  color: var(--ink-mid);
  transition: color 0.2s;
}
.plp-filters li label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.plp-filters li:hover { color: var(--ink); }
.plp-filters li.active { color: var(--ink); font-weight: 500; }
.plp-filters .count { color: var(--ink-soft); font-size: 0.8rem; margin-left: auto; }
.plp-filters input[type="checkbox"] { accent-color: var(--c-ochre); }

/* Price Range Inputs */
.plp-price-range { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.plp-price-range input { width: 100%; padding: 0.5rem; border: 1px solid var(--line-mid); font-family: var(--body); outline: none; transition: border-color 0.2s; }
.plp-price-range input:focus { border-color: var(--ink); }

.plp-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.plp-toolbar .results { color: var(--ink-mid); }
.plp-toolbar .sort { display: flex; align-items: center; gap: 0.6rem; }

/* Real-time Vue Search Widget */
.plp-search {
  flex: 1;
  max-width: 320px;
  position: relative;
}
.plp-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.plp-search input {
  width: 100%;
  font: inherit;
  padding: 0.5rem 2.5rem 0.5rem 0.8rem; /* Space for the spinner */
  border: 1px solid var(--line-mid);
  background: var(--bg);
  outline: none;
  transition: border-color 0.2s;
}
.plp-search input:focus { border-color: var(--ink); }
.plp-search-spinner {
  position: absolute;
  right: 0.8rem;
  width: 16px;
  height: 16px;
  border: 2px solid var(--line-mid);
  border-top-color: var(--c-ochre);
  border-radius: 50%;
  animation: plp-spin 0.8s linear infinite;
}
@keyframes plp-spin { to { transform: rotate(360deg); } }

/* Search Dropdown styling */
.plp-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: none;
  z-index: 50;
  max-height: 380px;
  overflow-y: auto;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.plp-search-item {
  padding: 0.8rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transition: background 0.2s;
}
.plp-search-item:hover, .plp-search-item.active { background: var(--bg-soft); }
.plp-search-item img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  background: var(--bg-soft);
  border-radius: var(--radius);
}
.plp-search-item-info { flex: 1; min-width: 0; }
.plp-search-item-title { font-size: 0.9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.plp-search-item-price { font-size: 0.8rem; font-family: var(--display); font-weight: 700; color: var(--ink); }
.plp-search-view-more {
  padding: 0.8rem;
  text-align: center;
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: var(--bg-warm);
  transition: opacity 0.2s;
}
.plp-search-view-more:hover { opacity: 0.8; }

/* Sidebar Filter Overhaul */
.plp-filters-section {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.plp-filters-section h4 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.7rem; /* Matches the design's compact heading size */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  color: var(--ink);
}

.plp-filters-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.plp-filter-item {
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--ink-mid);
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
}

.plp-filter-item:hover { color: var(--ink); }
.plp-filter-item.active { color: var(--ink); font-weight: 600; }
.plp-filter-item .count { color: var(--ink-soft); }

.plp-more-link {
  font-size: 0.85rem;
  color: var(--c-mauve);
  cursor: pointer;
  margin-top: 0.5rem;
  display: inline-block;
}

/* Scrollable filter list (for Category etc.) */
.plp-filters-list--scrollable {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line-mid) transparent;
}
.plp-filters-list--scrollable::-webkit-scrollbar {
  width: 3px;
}
.plp-filters-list--scrollable::-webkit-scrollbar-track {
  background: transparent;
}
.plp-filters-list--scrollable::-webkit-scrollbar-thumb {
  background: var(--line-mid);
  border-radius: 2px;
}

/* ── Price Range Slider ─────────────────────────────────────── */
.plp-price-slider { padding: 0.25rem 0 0.5rem; }

.plp-price-slider__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--display);
  color: var(--ink);
  margin-bottom: 1rem;
}

/* The grey rail */
.plp-price-slider__track {
  position: relative;
  height: 4px;
  background: var(--bg-warm);
  border-radius: 2px;
  margin: 0.5rem 0.5rem 1.2rem;
}

/* The dark fill between the two thumbs */
.plp-price-slider__fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--c-charcoal);
  pointer-events: none;
}

/* Both range inputs sit on top of each other on the same track */
.plp-price-slider__input {
  position: absolute;
  top: 50%;
  left: -0.5rem;
  right: -0.5rem;
  width: calc(100% + 1rem);
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  transform: translateY(-50%);
}

.plp-price-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-charcoal);
  border: 2.5px solid var(--paper);
  box-shadow: 0 1px 5px rgba(0,0,0,0.25);
  cursor: pointer;
  pointer-events: all;
  transition: background 0.2s, transform 0.15s;
}
.plp-price-slider__input::-webkit-slider-thumb:hover {
  background: var(--c-ochre);
  transform: scale(1.15);
}
.plp-price-slider__input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-charcoal);
  border: 2.5px solid var(--paper);
  box-shadow: 0 1px 5px rgba(0,0,0,0.25);
  cursor: pointer;
  pointer-events: all;
}

.plp-price-slider__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
}
.plp-price-slider__max-label {
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.plp-price-slider__reset {
  font-size: 0.76rem;
  color: var(--c-mauve);
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s;
}
.plp-price-slider__reset:hover { opacity: 0.7; }

/* Product Grid Adjustments for Vue */
.product .img-wrap a { display: block; height: 100%; }
.product .img-wrap img { mix-blend-mode: multiply; }
/* Push the actions to the bottom using margin-top: auto */
.product-actions { 
  display: flex; 
  gap: 0.5rem; 
  margin-top: auto; /* The magic property that aligns the buttons */
  padding-top: 1.2rem; /* Replaces the old margin to maintain breathing room */
  opacity: 1; 
  align-items: stretch;
}

/* (Keep your existing .action-btn and .icon-btn styles below this) */
.product-actions .action-btn {
  flex: 1;
  justify-content: center;
  padding: 0.7rem 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  gap: 0.4rem;
}

.product-actions .icon-btn {
  width: 2.8rem;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure icons scale smoothly */
.product-actions svg {
  display: block;
}

.plp-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 4rem;
}
.plp-pagination button.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Empty Search State */
.plp-search-empty {
  padding: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-mid);
}
.plp-search-empty span {
  font-weight: 600;
  color: var(--ink);
}

.plp-search-clear {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-mid);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
  z-index: 2;
}
.plp-search-clear:hover {
  color: var(--c-charcoal);
}

/* Wholesale Page Grids */
.wholesale-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.export-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.sell-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}
.sell-fees-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1300px;
  margin: 0 auto;
}
.sell-docs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 1200px;
}

.qlwapp__button {
  padding: 8px;
}

@media (max-width: 1024px) {
  .plp-body { grid-template-columns: 1fr; }
  .plp-filters { display: none; }
}

/* ===================================================================
   11. RESPONSIVE BREAKPOINTS (Native + Elementor Handlers)
   =================================================================== */
@media (max-width: 1024px) {
  .nav-primary { display: none; }
  .wholesale-why-grid { grid-template-columns: repeat(2, 1fr); }
  .export-tiers-grid { grid-template-columns: 1fr; }
  .sell-why-grid { grid-template-columns: 1fr; }
  .sell-fees-grid { grid-template-columns: 1fr; }
  .hero { height: 90vh; min-height: 620px; }
  .aya-word-inner { grid-template-columns: 1fr; gap: 3rem; }
  .vibe-grid { grid-template-columns: 1fr 1fr; }
  .product-grid, .product-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .maker { grid-template-columns: 1fr; gap: 2.5rem; }
  .business { grid-template-columns: 1fr; }
  .vendor-pitch { grid-template-columns: 1fr; gap: 3rem; }
  .edit-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pdp { grid-template-columns: 1fr; }
  .plp-body { grid-template-columns: 1fr; }
  .plp-filters { display: none; }
  .store-meta { grid-template-columns: 1fr; gap: 2rem; }
  .store-meta .sidebar { padding-left: 0; border-left: none; padding-top: 2rem; border-top: 1px solid var(--line); }
  .value-grid { grid-template-columns: 1fr 1fr; }
  .about-rhombus-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .about-team-grid { grid-template-columns: 1fr 1fr !important; }
  .edit-featured-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .edit-podcast-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .edit-podcast-art { width: 100% !important; }
}

@media (max-width: 640px) {
  .header-inner { grid-template-columns: auto 1fr auto; gap: 1rem; }
  .nav-utility { gap: 0.8rem; }
  .nav-utility .label, .currency { display: none; }
  .vibe-grid { grid-template-columns: 1fr; }
  .product-grid, .product-grid--4 { grid-template-columns: 1fr 1fr; gap: 1.8rem 1rem; }
  .edit-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .ai-card { padding: 2rem; }
  .value-grid { grid-template-columns: 1fr; }
  .wholesale-why-grid { grid-template-columns: 1fr; }
  .sell-docs-grid { grid-template-columns: 1fr; }
  .about-team-grid { grid-template-columns: 1fr !important; }
  .about-impact-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ===================================================================
   12. GLOBAL SEARCH OVERLAY
   =================================================================== */
.global-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.global-search-overlay.active {
  visibility: visible;
  opacity: 1;
}
.global-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(5px);
  z-index: 1;
}
.global-search-container {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 600px;
  background: var(--bg);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  padding: 2rem;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}
.global-search-overlay.active .global-search-container {
  transform: translateY(0);
}
.global-search-close {
  position: absolute;
  top: -3rem;
  right: 0;
  background: none;
  border: none;
  font-size: 2.5rem;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.global-search-close:hover {
  opacity: 1;
  transform: scale(1.1);
}
.global-search-results {
  max-height: 50vh;
  overflow-y: auto;
  margin-top: 1rem;
  border-top: 1px solid var(--line-light);
  padding-top: 1rem;
}
.global-search-results .plp-search-item {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.global-search-results .plp-search-item:hover {
  background: var(--bg-alt);
}
.global-search-results .plp-search-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 1rem;
  flex-shrink: 0;
}
.global-search-results .plp-search-item-info { flex-grow: 1; }
.global-search-results .plp-search-item-title { font-weight: 500; color: var(--c-charcoal); }
.global-search-results .plp-search-item-price { font-size: 0.9em; color: var(--text-light); white-space: nowrap; }
.global-search-results .plp-search-view-more {
  display: block;
  text-align: center;
  margin-top: 1rem;
  color: var(--c-ochre);
  font-weight: 500;
  text-decoration: none;
}
.global-search-results .plp-search-empty {
  text-align: center;
  padding: 2rem;
  color: var(--text-light);
}



/* ==========================================================================
   Mega Menu
   ========================================================================== */
.nav-item-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 750px;
  background: var(--bg);
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 2.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  border: 1px solid var(--line);
}
/* Invisible hover bridge */
.mega-menu::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
}
.nav-item-wrapper:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega-menu-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.mega-column {
  display: flex;
  flex-direction: column;
}
.mega-col-title {
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--line);
}

/* Column 1 — TOP MAKERS → Mauve */
.mega-column:nth-child(1) .mega-col-title {
  color: var(--c-mauve);
  border-bottom-color: var(--c-mauve);
}
.mega-column:nth-child(1) .mega-view-all {
  color: var(--c-mauve);
}
.mega-column:nth-child(1) .mega-view-all:hover {
  color: var(--c-mauve);
  opacity: 0.75;
}

/* Column 2 — TOP CATEGORIES → Teal */
.mega-column:nth-child(2) .mega-col-title {
  color: var(--c-teal);
  border-bottom-color: var(--c-teal);
}
.mega-column:nth-child(2) .mega-view-all {
  color: var(--c-teal);
}
.mega-column:nth-child(2) .mega-view-all:hover {
  color: var(--c-teal);
  opacity: 0.75;
}

/* Column 3 — TRENDING PRODUCTS → Ochre */
.mega-column:nth-child(3) .mega-col-title {
  color: var(--c-ochre);
  border-bottom-color: var(--c-ochre);
}
.mega-column:nth-child(3) .mega-view-all {
  color: var(--c-ochre);
}
.mega-column:nth-child(3) .mega-view-all:hover {
  color: var(--c-ochre);
  opacity: 0.75;
}

.mega-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex-grow: 1;
}
#site-header .mega-menu .mega-list li a,
.elementor-location-header .mega-menu .mega-list li a {
  font-size: 0.95rem;
  color: var(--ink-mid) !important;
  transition: color 0.2s ease;
  text-decoration: none;
}
#site-header .mega-menu .mega-column:nth-child(1) .mega-list li a:hover,
.elementor-location-header .mega-menu .mega-column:nth-child(1) .mega-list li a:hover { color: var(--c-mauve) !important; }
#site-header .mega-menu .mega-column:nth-child(2) .mega-list li a:hover,
.elementor-location-header .mega-menu .mega-column:nth-child(2) .mega-list li a:hover { color: var(--c-teal) !important; }
#site-header .mega-menu .mega-column:nth-child(3) .mega-list li a:hover,
.elementor-location-header .mega-menu .mega-column:nth-child(3) .mega-list li a:hover { color: var(--c-ochre) !important; }

#site-header .mega-menu .mega-view-all,
.elementor-location-header .mega-menu .mega-view-all {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: auto;
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1.5px solid currentColor;
}

#site-header .mega-menu .mega-column:nth-child(1) .mega-view-all,
.elementor-location-header .mega-menu .mega-column:nth-child(1) .mega-view-all {
  color: var(--c-mauve) !important;
  border-color: var(--c-mauve) !important;
}
#site-header .mega-menu .mega-column:nth-child(1) .mega-view-all:hover,
.elementor-location-header .mega-menu .mega-column:nth-child(1) .mega-view-all:hover {
  color: var(--c-mauve) !important;
  border-color: var(--c-mauve) !important;
  opacity: 0.75;
}

#site-header .mega-menu .mega-column:nth-child(2) .mega-view-all,
.elementor-location-header .mega-menu .mega-column:nth-child(2) .mega-view-all {
  color: var(--c-teal) !important;
  border-color: var(--c-teal) !important;
}
#site-header .mega-menu .mega-column:nth-child(2) .mega-view-all:hover,
.elementor-location-header .mega-menu .mega-column:nth-child(2) .mega-view-all:hover {
  color: var(--c-teal) !important;
  border-color: var(--c-teal) !important;
  opacity: 0.75;
}

#site-header .mega-menu .mega-column:nth-child(3) .mega-view-all,
.elementor-location-header .mega-menu .mega-column:nth-child(3) .mega-view-all {
  color: var(--c-ochre) !important;
  border-color: var(--c-ochre) !important;
}
#site-header .mega-menu .mega-column:nth-child(3) .mega-view-all:hover,
.elementor-location-header .mega-menu .mega-column:nth-child(3) .mega-view-all:hover {
  color: var(--c-ochre) !important;
  border-color: var(--c-ochre) !important;
  opacity: 0.75;
}


@media (max-width: 1024px) {
  .mega-menu {
    display: none !important;
  }
}

/* ==========================================================================
   Wholesale Page Specifics
   ========================================================================== */
.pill-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.pill-flow .pill {
  border: 1px solid currentColor;
  border-radius: 20px;
  padding: 0.3rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.pill-flow .arrow {
  opacity: 0.5;
  font-size: 0.8rem;
  margin: 0 0.2rem;
}

/* ==========================================================================
   PAGE-SPECIFIC: SERVICES
   ========================================================================== */

/* --- Hero --- */
.svc-hero {
  padding: calc(var(--section-y) * 0.9) var(--gutter) calc(var(--section-y) * 0.7);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.svc-hero-eyebrow { margin-bottom: 1.5rem; }

/* ===================================================================
   Bulk Orders & Application Form (Sell Design System Matching)
   =================================================================== */
.aya-sell-form-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
}
.aya-sell-form-wrap .wpcf7,
.aya-sell-form-wrap form,
.aya-sell-form-wrap .wpcf7-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
}
.aya-sell-form-wrap p {
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
}
.aya-sell-form-wrap label {
    color: var(--ink, #161310) !important;
    display: block !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.35rem !important;
    width: 100% !important;
}
.aya-sell-form-wrap br {
    display: none !important;
}
.aya-sell-form-wrap .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    margin: 0 0 1rem 0 !important;
}
.aya-sell-form-wrap input[type="text"],
.aya-sell-form-wrap input[type="email"],
.aya-sell-form-wrap input[type="tel"],
.aya-sell-form-wrap select,
.aya-sell-form-wrap textarea {
    width: 100% !important;
    padding: 0.95rem 1.1rem !important;
    border: 1px solid var(--line-mid, rgba(22, 19, 16, 0.25)) !important;
    background: var(--bg, #FAFAF7) !important;
    color: var(--ink, #161310) !important;
    font-size: 0.95rem !important;
    font-family: inherit !important;
    border-radius: 0px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, background 0.2s !important;
    outline: none !important;
    line-height: 1.5 !important;
}
.aya-sell-form-wrap input::placeholder,
.aya-sell-form-wrap textarea::placeholder,
.aya-sell-form-wrap input::-webkit-input-placeholder,
.aya-sell-form-wrap textarea::-webkit-input-placeholder,
.aya-sell-form-wrap input::-moz-placeholder,
.aya-sell-form-wrap textarea::-moz-placeholder {
    color: var(--ink-soft, #71716b) !important;
    opacity: 0.85 !important;
}
.aya-sell-form-wrap input:focus,
.aya-sell-form-wrap select:focus,
.aya-sell-form-wrap textarea:focus {
    border-color: var(--c-charcoal, #292D2C) !important;
    background: #ffffff !important;
}
.aya-sell-form-wrap input[type="submit"],
.aya-sell-form-wrap input[type="submit"].btn-sell-submit,
input.wpcf7-submit.btn-sell-submit {
    width: 100% !important;
    padding: 1.15rem 2rem !important;
    background: var(--c-charcoal, #292D2C) !important;
    color: var(--bg, #FAFAF7) !important;
    font-family: var(--display, 'Archivo', sans-serif) !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    border: 1px solid transparent !important;
    border-radius: 0px !important;
    cursor: pointer !important;
    transition: all 0.25s !important;
    margin-top: 1rem !important;
    text-align: center !important;
    display: block !important;
}
.aya-sell-form-wrap input[type="submit"]:hover,
.aya-sell-form-wrap input[type="submit"].btn-sell-submit:hover,
input.wpcf7-submit.btn-sell-submit:hover {
    background: var(--c-ochre, #A4881D) !important;
    color: var(--c-charcoal, #292D2C) !important;
}
.aya-sell-form-wrap .wpcf7-not-valid-tip {
    font-size: 0.82rem !important;
    color: #dc2626 !important;
    margin-top: 0.35rem !important;
}
.aya-sell-form-wrap .wpcf7-response-output {
    margin: 1.5rem 0 0 0 !important;
    padding: 0.9rem 1.1rem !important;
    border-radius: 0px !important;
    font-size: 0.9rem !important;
}

.svc-hero-headline h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 6.5rem);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.svc-hero-headline h1 em { font-style: italic; color: var(--c-mauve); }
.svc-hero-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-mid);
  max-width: 60ch;
  margin-bottom: 3rem;
}
.svc-hero-stats {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.svc-stat {}
.svc-stat-num {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.9;
  color: var(--c-mauve);
  margin-bottom: 0.4rem;
}
.svc-stat:nth-child(2) .svc-stat-num { color: var(--c-teal); }
.svc-stat:nth-child(3) .svc-stat-num { color: var(--c-ochre); }
.svc-stat:nth-child(4) .svc-stat-num { color: var(--c-lime); }
.svc-stat-label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mid); }

/* --- Service Blocks --- */
.svc-block {
  padding: var(--section-y) var(--gutter);
  border-bottom: 1px solid var(--line);
}
.svc-block--light { background-color: var(--bg); }
.svc-block--warm  { background-color: var(--bg-warm); }
.svc-block--dark  { background-color: var(--c-charcoal); }
.svc-block--teal  { background-color: var(--bg-soft); }
.svc-block--mauve { background-color: #2D1B3D; }

.svc-block-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  max-width: 1400px;
  margin: 0 auto;
  align-items: center;
}
.svc-block-inner--reverse { direction: rtl; }
.svc-block-inner--reverse > * { direction: ltr; }

/* --- Block Text --- */
.svc-block-text .eyebrow { margin-bottom: 1.2rem; }
.svc-block-text h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4rem);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.svc-block-text h2 em { font-style: italic; color: var(--c-mauve); }
.svc-block-text .lead {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-mid);
  margin-bottom: 2rem;
  max-width: 48ch;
}
.svc-list {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.svc-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.97rem;
  color: var(--ink-mid);
  line-height: 1.4;
}
.svc-list li::before {
  content: '✦';
  color: var(--c-ochre);
  font-size: 0.65rem;
  margin-top: 0.3rem;
  flex-shrink: 0;
}
.svc-list--light li { color: rgba(255,255,255,0.75); }
.svc-list--light li::before { color: var(--c-ochre); }
.svc-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }

/* --- Visual: Product mini-grid --- */
.svc-block-visual { position: relative; }
.svc-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.8rem;
  height: 540px;
}
.svc-mini-cell { overflow: hidden; border-radius: 2px; }
.svc-mini-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-mini-cell--tall { grid-row: 1 / 3; }
.svc-mini-cell--short { height: 250px; }

/* --- Visual: Sell steps card --- */
.svc-sell-card {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 2.5rem;
}
.svc-sell-card-eyebrow {
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ochre);
  margin-bottom: 2rem;
}
.svc-sell-steps { display: flex; flex-direction: column; gap: 0; }
.svc-sell-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.svc-sell-step:last-child { border-bottom: none; }
.svc-sell-step-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--c-mauve);
  min-width: 2.5rem;
  line-height: 1;
}
.svc-sell-step strong { display: block; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 0.95rem; margin-bottom: 0.3rem; }
.svc-sell-step p { font-size: 0.88rem; color: var(--ink-mid); margin: 0; line-height: 1.5; }

/* --- Visual: Wholesale stats --- */
.svc-wholesale-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 2rem;
}
.svc-ws-stat {
  padding: 2rem;
  border-right: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  text-align: center;
}
.svc-ws-stat:nth-child(2n) { border-right: none; }
.svc-ws-stat:nth-child(3), .svc-ws-stat:nth-child(4) { border-bottom: none; }
.svc-ws-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--c-ochre);
  line-height: 0.9;
  margin-bottom: 0.5rem;
}
.svc-ws-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.svc-buyer-eyebrow { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 1rem; }
.svc-buyers { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.svc-buyers span {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  font-size: 0.8rem;
  padding: 0.35rem 0.9rem;
  letter-spacing: 0.04em;
}

/* --- Visual: Export tiers --- */
.svc-export-eyebrow { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-mid); margin-bottom: 1.5rem; }
.svc-export-tiers { display: flex; flex-direction: column; gap: 1rem; }
.svc-tier {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 1.8rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.svc-tier:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.svc-tier--featured {
  border-color: var(--c-ochre);
  background: #fffbf0;
}
.svc-tier-step { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ochre); margin-bottom: 0.5rem; }
.svc-tier-name { font-family: var(--display); font-weight: 900; font-size: 1.1rem; text-transform: uppercase; color: var(--ink); margin-bottom: 0.3rem; }
.svc-tier-price { font-family: var(--display); font-weight: 900; font-size: 1.8rem; color: var(--c-mauve); margin-bottom: 0.8rem; }
.svc-tier p { font-size: 0.88rem; color: var(--ink-mid); margin: 0; line-height: 1.5; }

/* --- Visual: Chat Mockup --- */
.svc-chat-mockup {
  background: #ECE5DD;
  border-radius: 12px;
  overflow: hidden;
  max-width: 380px;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.svc-chat-header {
  background: #075E54;
  color: white;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
}
.svc-chat-avatar { flex-shrink: 0; border-radius: 50%; overflow: hidden; }
.svc-chat-name { font-weight: 700; font-size: 0.95rem; }
.svc-chat-status { font-size: 0.75rem; opacity: 0.8; }
.svc-chat-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 340px;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23b0bec5' fill-opacity='0.08'%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.svc-chat-msg { max-width: 85%; }
.svc-chat-msg p { margin: 0; font-size: 0.9rem; line-height: 1.45; padding: 0.6rem 0.9rem; border-radius: 8px; }
.svc-chat-msg--in { align-self: flex-start; }
.svc-chat-msg--in p { background: white; color: #1a1a1a; border-radius: 0 8px 8px 8px; }
.svc-chat-msg--out { align-self: flex-end; }
.svc-chat-msg--out p { background: #DCF8C6; color: #1a1a1a; border-radius: 8px 0 8px 8px; }
.svc-chat-order {
  display: flex;
  justify-content: space-between;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  margin: 0.4rem 0;
  font-size: 0.85rem;
}
.svc-chat-price { font-weight: 700; color: var(--c-teal); }
.svc-chat-powered {
  background: rgba(255,255,255,0.6);
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-mid);
  padding: 0.6rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .svc-block-inner { grid-template-columns: 1fr; gap: 3rem; }
  .svc-block-inner--reverse { direction: ltr; }
  .svc-mini-grid { height: 400px; }
  .svc-wholesale-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .svc-hero-stats { gap: 1.5rem; }
  .svc-mini-grid { height: 280px; }
  .svc-mini-cell--short { height: 130px; }
  .svc-wholesale-stats { grid-template-columns: 1fr 1fr; }
  .svc-export-tiers { gap: 0.7rem; }
  .svc-chat-mockup { max-width: 100%; }
  .svc-sell-card { padding: 1.5rem; }
}

/* --- Services Page Popup --- */
.aya-popup-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}
.aya-popup-overlay.show {
  opacity: 1;
  visibility: visible;
}
.aya-popup-content {
  background: var(--bg);
  padding: 3rem;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  position: relative;
  transform: translateY(20px);
  transition: all 0.3s ease;
  box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}
.aya-popup-overlay.show .aya-popup-content {
  transform: translateY(0);
}
.aya-popup-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 28px;
  cursor: pointer;
  color: var(--ink-mid);
  line-height: 1;
}
.aya-popup-close:hover {
  color: var(--ink);
}
/* Style the CF7 form inside */
.aya-popup-content .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.aya-popup-content .wpcf7-form p { margin: 0; }
.aya-popup-content .wpcf7-form label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-mid);
  margin-bottom: 0.25rem;
  display: block;
}
.aya-popup-content input[type="text"],
.aya-popup-content input[type="email"],
.aya-popup-content input[type="tel"],
.aya-popup-content textarea {
  width: 100%;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fafafa;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.aya-popup-content input[type="text"]:focus,
.aya-popup-content input[type="email"]:focus,
.aya-popup-content input[type="tel"]:focus,
.aya-popup-content textarea:focus {
  outline: none;
  border-color: var(--c-ochre);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(204,153,0,0.1);
}
.aya-popup-content textarea {
  height: 80px;
  resize: vertical;
}
.aya-popup-content input[type="submit"] {
  background: var(--c-ochre);
  color: white;
  border: none;
  padding: 0.8rem;
  border-radius: 4px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  cursor: pointer;
  width: 100%;
  margin-top: 0.5rem;
  transition: background 0.2s ease;
}
.aya-popup-content input[type="submit"]:hover {
  background: #b38600;
}
.aya-popup-content .wpcf7-response-output {
  font-size: 0.85rem;
  padding: 0.5rem 1rem !important;
  margin: 1rem 0 0 0 !important;
  border-radius: 4px;
}
.aya-popup-content .akismet-nag {
  font-size: 0.75rem;
  color: #999;
  margin-top: 1rem;
}

/* ===================================================================
   13. MOBILE NAVIGATION OVERLAY & HAMBURGER
   =================================================================== */

/* Toggle Button Styling */
.mobile-nav-toggle {
  display: none !important;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
  z-index: 9999;
}

.mobile-nav-toggle .line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  transform-origin: center;
}

/* Hamburger Morph Animation */
.mobile-nav-toggle.active .line-top {
  transform: translateY(6px) rotate(45deg);
}
.mobile-nav-toggle.active .line-mid {
  transform: scale(0);
  opacity: 0;
}
.mobile-nav-toggle.active .line-bot {
  transform: translateY(-6px) rotate(-45deg);
}

/* Overlay Navigation Container */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 15, 15, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-15px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav-overlay.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Close Button inside Overlay */
.mobile-nav-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: transparent;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.mobile-nav-close:hover {
  transform: scale(1.1) rotate(90deg);
  opacity: 0.8;
}

.mobile-nav-overlay-inner {
  width: 100%;
  max-width: 500px;
}

/* Mobile Menu List */
.nav-mobile-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.nav-mobile-list li {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav-overlay.active .nav-mobile-list li {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for a premium entrance animation */
.mobile-nav-overlay.active .nav-mobile-list li:nth-child(1) { transition-delay: 0.08s; }
.mobile-nav-overlay.active .nav-mobile-list li:nth-child(2) { transition-delay: 0.16s; }
.mobile-nav-overlay.active .nav-mobile-list li:nth-child(3) { transition-delay: 0.24s; }
.mobile-nav-overlay.active .nav-mobile-list li:nth-child(4) { transition-delay: 0.32s; }
.mobile-nav-overlay.active .nav-mobile-list li:nth-child(5) { transition-delay: 0.40s; }
.mobile-nav-overlay.active .nav-mobile-list li:nth-child(6) { transition-delay: 0.48s; }

/* Mobile Menu Links */
.nav-mobile-list a {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #FFFFFF !important;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
  text-align: center;
  line-height: 1.2;
}

.nav-mobile-list a:hover,
.nav-mobile-list a:focus {
  color: var(--c-mauve) !important;
  transform: scale(1.04);
}

/* Custom colors for vendor CTA and business CTA on mobile */
.nav-mobile-list .vendor-cta a {
  color: var(--c-mauve) !important;
}
.nav-mobile-list .biz-cta a {
  color: var(--c-ochre) !important;
}

/* Scroll Lock State */
body.mobile-nav-open {
  overflow: hidden !important;
  height: 100vh !important;
}

/* Responsive Trigger Breakpoint */
@media (max-width: 1024px) {
  .mobile-nav-toggle {
    display: flex !important;
  }
  
  /* Override fixed transparent header on mobile to prevent overlapping with multi-line announce bar */
  .header--transparent {
    position: sticky !important;
    top: 0 !important;
    background: rgba(250, 250, 247, 0.98) !important;
    border-bottom: 1px solid var(--line) !important;
    backdrop-filter: blur(10px) !important;
  }
  .header--transparent .logo,
  .header--transparent .nav-utility button,
  .header--transparent .nav-utility a {
    color: var(--ink) !important;
  }
  
  /* Scrolled transparent header style on mobile (black bg, white text) */
  .header--scrolled.header--transparent {
    background: rgba(15, 15, 15, 0.97) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  .header--scrolled.header--transparent .logo,
  .header--scrolled.header--transparent .nav-utility button,
  .header--scrolled.header--transparent .nav-utility a {
    color: #FFFFFF !important;
  }
}

/* ===================================================================
   14. VENDOR ONBOARDING PAGE STYLING
   =================================================================== */

.dokan-vendor-onboarding {
  max-width: 1100px;
  margin: 4.5rem auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

.dokan-onboarding-container {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 3.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .dokan-onboarding-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Cards Design */
.dokan-login-section,
.dokan-registration-section {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2.5rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

.dokan-login-section:hover,
.dokan-registration-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 35px rgba(0, 0, 0, 0.04);
}

/* Section Headings */
.dokan-login-section h2,
.dokan-registration-section h2 {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 2rem 0;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--line);
}

/* Form Layout & Spacing */
.dokan-vendor-onboarding p.form-row {
  margin-bottom: 1.35rem;
  display: flex;
  flex-direction: column;
}

.dokan-vendor-onboarding .split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 0.2rem;
}

.dokan-vendor-onboarding .split-row p.form-row {
  margin-bottom: 1.15rem;
}

/* Form Labels */
.dokan-vendor-onboarding label {
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 0.5rem;
  display: block;
}

.dokan-vendor-onboarding label .required {
  color: var(--c-mauve);
  font-weight: 700;
}

/* Input Fields */
.dokan-vendor-onboarding input[type="text"],
.dokan-vendor-onboarding input[type="email"],
.dokan-vendor-onboarding input[type="password"],
.dokan-vendor-onboarding input[type="tel"] {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-size: 0.86rem;
  font-family: var(--body);
  color: var(--ink);
  background: #FAFAF7;
  border: 1px solid var(--line-mid);
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.dokan-vendor-onboarding input[type="text"]:focus,
.dokan-vendor-onboarding input[type="email"]:focus,
.dokan-vendor-onboarding input[type="password"]:focus,
.dokan-vendor-onboarding input[type="tel"]:focus {
  outline: none;
  border-color: var(--c-mauve);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(122, 79, 133, 0.1);
}

/* Buttons Styling */
.dokan-vendor-onboarding button[type="submit"],
.dokan-vendor-onboarding input[type="submit"] {
  width: 100%;
  background: var(--c-charcoal) !important;
  color: #FFFFFF !important;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.8rem 1.5rem !important;
  border: none !important;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  margin-top: 0.5rem;
}

.dokan-vendor-onboarding button[type="submit"]:hover,
.dokan-vendor-onboarding input[type="submit"]:hover {
  background: var(--c-mauve) !important;
  transform: translateY(-1px);
}

/* Checkbox & Terms Styling */
.dokan-vendor-onboarding p.form-row:has(input[type="checkbox"]),
.dokan-vendor-onboarding p.form-row:has(.tc_check_box) {
  flex-direction: row;
  align-items: center;
}
.dokan-vendor-onboarding p.form-row:has(input[type="checkbox"]) label,
.dokan-vendor-onboarding p.form-row:has(.tc_check_box) label {
  margin-bottom: 0;
  display: inline;
}
.dokan-vendor-onboarding .tc_check_box,
.dokan-vendor-onboarding input[type="checkbox"] {
  margin: 0 0.6rem 0 0 !important;
  accent-color: var(--c-mauve);
  width: 14px;
  height: 14px;
  vertical-align: middle;
  flex-shrink: 0;
}

.dokan-vendor-onboarding p.form-row label.woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  text-transform: none;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0;
  color: var(--ink-mid);
  cursor: pointer;
}

.dokan-vendor-onboarding p.form-row label.woocommerce-form__label-for-checkbox span {
  margin-left: 0.35rem;
}

/* Links inside onboarding */
.dokan-vendor-onboarding a {
  color: var(--c-mauve);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.dokan-vendor-onboarding a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Helper text & URL preview styling */
.dokan-vendor-onboarding small {
  display: block;
  font-size: 0.72rem;
  color: #888;
  margin-top: 0.35rem;
  word-break: break-all;
}

.dokan-vendor-onboarding #url-alart-mgs {
  font-size: 0.7rem;
  margin-top: 0.25rem;
}

/* WooCommerce Notices Styling (Global & Centered) */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  list-style: none;
  padding: 1.2rem 2rem;
  background: rgba(122, 79, 133, 0.04);
  border: 1px solid rgba(122, 79, 133, 0.15);
  color: var(--ink);
  font-size: 0.86rem;
  border-radius: 4px;
  margin: 0 auto 2.5rem auto;
  max-width: 1100px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  scroll-margin-top: 110px;
}
.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
  line-height: 1.5;
  display: block;
}
.woocommerce-error {
  background: rgba(220, 53, 69, 0.04) !important;
  border: 1px solid rgba(220, 53, 69, 0.15) !important;
}
.woocommerce-error strong,
.woocommerce-error li strong {
  color: #dc3545 !important;
  font-weight: 700;
}
.woocommerce-message {
  background: rgba(40, 167, 69, 0.04) !important;
  border: 1px solid rgba(40, 167, 69, 0.15) !important;
}
.woocommerce-info {
  background: rgba(23, 162, 184, 0.04) !important;
  border: 1px solid rgba(23, 162, 184, 0.15) !important;
}

/* ===================================================================
   15. DEFAULT PAGE TEMPLATE HEADER STYLING
   =================================================================== */

.page-header {
  max-width: 1100px;
  margin: 0 auto;
  padding: 6.5rem var(--gutter) 0.5rem;
  box-sizing: border-box;
}

.entry-title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  line-height: 0.95;
}

@media (max-width: 1024px) {
  .page-header {
    padding-top: 4.5rem;
  }
}

@media (max-width: 640px) {
  .page-header {
    padding-top: 3.5rem;
    padding-bottom: 0;
  }
}

/* ===================================================================
   16. AYA AFRICA /SHOP PLP PRESTIGE REFINEMENTS
   =================================================================== */

/* PLP Categories Horizontal Bar */
.plp-top-categories {
  margin-bottom: 2.5rem;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.plp-top-categories::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}
.plp-top-category-list {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid var(--line-light);
}
@media (max-width: 1024px) {
  .plp-top-category-list {
    justify-content: flex-start;
    padding: 0 1.5rem;
  }
}
.plp-top-category-item {
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-mid);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.8rem 0;
  position: relative;
  transition: color 0.25s ease;
  white-space: nowrap;
  margin-bottom: -1px; /* Align precisely with the border-bottom line */
}
.plp-top-category-item:hover,
.plp-top-category-item.active {
  color: var(--ink);
}
.plp-top-category-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--c-ochre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.plp-top-category-item.active::after {
  transform: scaleX(1);
}
.plp-top-category-item span {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.5;
  margin-left: 0.35rem;
  transition: opacity 0.25s ease;
}
.plp-top-category-item.active span,
.plp-top-category-item:hover span {
  opacity: 0.8;
}

/* Prestige Clean-Border Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0 !important;
  border-top: 1px solid var(--line-light);
  border-left: 1px solid var(--line-light);
}
.product-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1200px) {
  .product-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  .product-grid--4,
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .product-grid--4,
  .product-grid {
    grid-template-columns: 1fr;
  }
}

/* Product Card styling */
.product-grid .product {
  padding: 1.5rem;
  border-right: 1px solid var(--line-light) !important;
  border-bottom: 1px solid var(--line-light) !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  position: relative;
  transition: background-color 0.3s ease;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.product-grid .product:hover {
  background-color: #faf9f6;
}

/* Image Wrap Container */
.product-grid .product .img-wrap {
  position: relative;
  background-color: #f6f5f1;
  padding: 1.5rem;
  margin-bottom: 1.2rem;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0 !important;
  border: 1px solid rgba(0,0,0,0.02);
}
.product-grid .product .img-wrap img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.product-grid .product:hover .img-wrap img {
  transform: scale(1.05);
}

/* Hover actions overlay inside img-wrap */
.product-grid .product .img-wrap .product-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.8rem;
  box-sizing: border-box;
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(to top, rgba(246, 245, 241, 0.95) 70%, rgba(246, 245, 241, 0));
  z-index: 5;
}
.product-grid .product:hover .img-wrap .product-actions {
  opacity: 1;
  transform: translateY(0);
}

/* Styling of buttons in product actions */
.product-grid .product .img-wrap .product-actions .action-btn {
  flex: 1;
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 0.8rem !important;
  background: var(--c-charcoal) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.product-grid .product .img-wrap .product-actions .action-btn:hover {
  background-color: var(--c-ochre) !important;
}
.product-grid .product .img-wrap .product-actions .icon-btn {
  background: transparent !important;
  border: 1px solid var(--c-charcoal) !important;
  color: var(--c-charcoal) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.product-grid .product .img-wrap .product-actions .icon-btn:hover {
  background: var(--c-charcoal) !important;
  color: #ffffff !important;
}

/* Product details metadata */
.product-grid .product .vendor {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ochre);
  margin-bottom: 0.4rem;
}
.product-grid .product .title {
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 0.6rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.product-grid .product .title:hover {
  text-decoration: underline;
}
.product-grid .product .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}
.product-grid .product .price {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--ink);
}
.product-grid .product .origin {
  font-family: var(--body);
  font-size: 0.7rem;
  color: var(--ink-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Shimmer Animation & Skeletons */
@keyframes shimmer-ani {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.shimmer {
  background: linear-gradient(90deg, #f5f4f0 25%, #eae8e2 50%, #f5f4f0 75%);
  background-size: 200% 100%;
  animation: shimmer-ani 1.6s infinite linear;
}
.product--skeleton {
  pointer-events: none !important;
}
.product--skeleton .img-wrap-skeleton {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 1.2rem;
}
.product--skeleton .vendor-skeleton {
  width: 35%;
  height: 9px;
  margin-bottom: 0.6rem;
}
.product--skeleton .title-skeleton {
  width: 75%;
  height: 13px;
  margin-bottom: 1rem;
}
.product--skeleton .meta-skeleton {
  width: 25%;
  height: 11px;
}

/* Custom Price Range Slider */
.plp-price-slider__track {
  position: relative;
  width: 100%;
  height: 2px;
  background: var(--line-light);
  margin: 1.6rem 0;
}
.plp-price-slider__fill {
  position: absolute;
  height: 100%;
  background-color: var(--c-ochre);
}
.plp-price-slider__input {
  position: absolute;
  width: 100%;
  height: 2px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  outline: none;
  top: 0;
  left: 0;
}
.plp-price-slider__input::-webkit-slider-thumb {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: var(--c-charcoal);
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.plp-price-slider__input::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  background-color: var(--c-ochre);
}
.plp-price-slider__input::-moz-range-thumb {
  height: 12px;
  width: 12px;
  border: none;
  border-radius: 50%;
  background-color: var(--c-charcoal);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.plp-price-slider__input::-moz-range-thumb:hover {
  transform: scale(1.25);
  background-color: var(--c-ochre);
}
.plp-price-slider__labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--display);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

/* Prestige Quick View Backdrop Blur & Custom Overlay styling */
.fixed.z-50 {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.3s ease;
}
.fixed.z-50 .bg-white {
  border-radius: 0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* ===================================================================
   17. AYA AFRICA WOOCOMMERCE MY ACCOUNT PRESTIGE REBUILD
   =================================================================== */

/* Hide big page header on My Account page */
.woocommerce-account .page-header {
  display: none !important;
}

/* Center and space out columns */
.woocommerce-account #customer_login {
  max-width: 1100px;
  margin: 5.5rem auto !important;
  padding: 0 var(--gutter) !important;
}

.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 {
  width: 100% !important;
  float: none !important;
}

@media (min-width: 769px) {
  .woocommerce-account #customer_login {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 4rem;
    align-items: start;
  }
}

/* Typography for column titles */
.woocommerce-account #customer_login h2 {
  font-family: var(--body) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  text-transform: none !important;
  margin: 0 0 1.5rem 0 !important;
  border: none !important;
  padding: 0 !important;
}

/* Forms layout and backgrounds */
.woocommerce-account form.woocommerce-form-login {
  background: #f7f7f7 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2.5rem !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

.woocommerce-account form.woocommerce-form-register {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 2.5rem !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

/* Form Row Spacing */
.woocommerce-account #customer_login p.form-row {
  margin-bottom: 1.35rem !important;
  display: flex;
  flex-direction: column;
}

/* Labels */
.woocommerce-account #customer_login label {
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 0.5rem;
  display: block;
}

.woocommerce-account #customer_login label .required {
  color: #dc3545;
  font-weight: 700;
}

/* Input Fields */
.woocommerce-account #customer_login input[type="text"],
.woocommerce-account #customer_login input[type="email"],
.woocommerce-account #customer_login input[type="password"] {
  width: 100% !important;
  padding: 0.75rem 0.9rem !important;
  font-size: 0.88rem !important;
  font-family: var(--body) !important;
  color: var(--ink) !important;
  background: #ffffff !important;
  border: 1px solid var(--line-mid) !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-account #customer_login input[type="text"]:focus,
.woocommerce-account #customer_login input[type="email"]:focus,
.woocommerce-account #customer_login input[type="password"]:focus {
  outline: none !important;
  border-color: var(--c-mauve) !important;
  box-shadow: 0 0 0 3px rgba(122, 79, 133, 0.1) !important;
}

/* Buttons */
.woocommerce-account #customer_login button[type="submit"].button {
  width: 100% !important;
  background: var(--c-charcoal) !important;
  color: #ffffff !important;
  font-family: var(--body) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 1.5rem !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  margin-top: 1rem !important;
}

.woocommerce-account #customer_login button[type="submit"].button:hover {
  background-color: var(--c-mauve) !important;
}

/* Checkboxes & Radio layouts (horizontal side-by-side) */
.woocommerce-account #customer_login label:has(input[type="checkbox"]),
.woocommerce-account #customer_login label:has(input[type="radio"]),
.woocommerce-account #customer_login .mc4wp-checkbox label {
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center;
  cursor: pointer;
  color: var(--ink-mid) !important;
  margin-bottom: 0 !important;
}

.woocommerce-account #customer_login p.form-row:has(input[type="checkbox"]),
.woocommerce-account #customer_login p.form-row:has(input[type="radio"]),
.woocommerce-account #customer_login .mc4wp-checkbox {
  flex-direction: row !important;
  align-items: center !important;
}

/* Force vertical stacking on rows that contain submit buttons to prevent side-by-side overlaps */
.woocommerce-account #customer_login p.form-row:has(button[type="submit"]) {
  flex-direction: column !important;
  align-items: stretch !important;
}

.woocommerce-account #customer_login input[type="checkbox"],
.woocommerce-account #customer_login input[type="radio"] {
  margin: 0 0.6rem 0 0 !important;
  accent-color: var(--c-mauve);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Specific alignments for Login components */
.woocommerce-account #customer_login .woocommerce-form-login__rememberme {
  margin: 1.2rem 0 !important;
}

.woocommerce-account #customer_login .lost_password {
  text-align: right !important;
  margin-top: 1rem !important;
}

.woocommerce-account #customer_login .lost_password a {
  color: var(--ink) !important;
  text-decoration: underline !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

.woocommerce-account #customer_login .lost_password a:hover {
  color: var(--c-mauve) !important;
}

/* Privacy policy text spacer */
.woocommerce-account #customer_login .woocommerce-privacy-policy-text {
  font-size: 0.74rem !important;
  line-height: 1.45 !important;
  color: #777777 !important;
  margin: 1.5rem 0 !important;
}

.woocommerce-account #customer_login .woocommerce-privacy-policy-text a {
  color: var(--ink) !important;
  text-decoration: underline !important;
}

/* ===================================================================
   19. AYA AFRICA VENDOR DASHBOARD PRESTIGE OVERHAUL
   =================================================================== */

/* Dashboard Body Background */
body.dokan-dashboard {
  background-color: #faf9f6 !important;
  font-family: var(--body);
}

/* Sidebar Overrides */
.dokan-dashboard .dokan-dash-sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid var(--line-light) !important;
  min-height: 100vh;
  box-shadow: none !important;
  padding: 2.5rem 0 !important;
}

.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li {
  border: none !important;
  background: transparent !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide Dokan default indicators */
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.active:after,
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover:not(.active).has-submenu:after {
  display: none !important;
}

.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li a {
  font-family: var(--body) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--ink-mid) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.9rem 1.8rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: color 0.25s ease, background-color 0.25s ease !important;
  border-left: 3px solid transparent !important;
}

.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li a i,
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li a svg {
  color: inherit !important;
  font-size: 0.95rem !important;
  opacity: 0.7;
  transition: color 0.25s ease;
}

/* Active & Hover Navigation Items */
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover a,
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.active a {
  color: var(--ink) !important;
  background-color: #faf9f6 !important;
  border-left-color: var(--c-ochre) !important;
}

/* Submenu Styles */
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu {
  background-color: #ffffff !important;
  padding: 0.5rem 0 !important;
  border-left: 3px solid var(--line-light) !important;
  margin-left: 1.8rem !important;
}

.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu li a {
  padding: 0.55rem 1rem !important;
  font-size: 0.75rem !important;
  text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* Main Dashboard Panel spacing */
.dokan-dashboard .dokan-dashboard-content {
  background: transparent !important;
  padding: 2.5rem !important;
}

/* Widgets and Cards */
.dokan-dashboard .dashboard-widget,
.dokan-dashboard .dokan-panel {
  background: #ffffff !important;
  border: 1px solid var(--line-light) !important;
  border-radius: 0 !important;
  padding: 1.8rem !important;
  box-shadow: none !important;
  margin-bottom: 2rem !important;
}

.dokan-dashboard .dashboard-widget .widget-title,
.dokan-dashboard .dokan-panel .dokan-panel-heading {
  font-family: var(--body) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line-light) !important;
  padding-bottom: 0.9rem !important;
  margin-bottom: 1.2rem !important;
  background: transparent !important;
}

/* Performance metrics */
.dokan-dashboard .dokan-dash-number {
  font-family: var(--display) !important;
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
  line-height: 1 !important;
  margin: 0.5rem 0 !important;
}

/* Tables Styling */
.dokan-dashboard table.dokan-table {
  border-collapse: collapse !important;
  border: 1px solid var(--line-light) !important;
  background: #ffffff !important;
  border-radius: 0 !important;
}

.dokan-dashboard table.dokan-table th {
  background: #faf9f6 !important;
  border-bottom: 1px solid var(--line-light) !important;
  border-right: none !important;
  color: var(--ink) !important;
  font-family: var(--body) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 1rem 1.2rem !important;
}

.dokan-dashboard table.dokan-table td {
  border-bottom: 1px solid var(--line-light) !important;
  border-right: none !important;
  color: var(--ink-mid) !important;
  font-size: 0.86rem !important;
  padding: 1.1rem 1.2rem !important;
  vertical-align: middle !important;
}

.dokan-dashboard table.dokan-table tr:hover td {
  background-color: #faf9f6 !important;
}

/* Status Badges */
.dokan-dashboard .dokan-label,
.dokan-dashboard .dokan-status {
  font-family: var(--body) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.35rem 0.8rem !important;
  border-radius: 20px !important;
  display: inline-block !important;
}

.dokan-dashboard .dokan-label-success,
.dokan-dashboard .dokan-status-publish,
.dokan-dashboard .dokan-status-completed {
  background-color: rgba(40, 167, 69, 0.08) !important;
  color: #28a745 !important;
  border: 1px solid rgba(40, 167, 69, 0.15) !important;
}

.dokan-dashboard .dokan-label-warning,
.dokan-dashboard .dokan-status-pending,
.dokan-dashboard .dokan-status-processing {
  background-color: rgba(255, 193, 7, 0.08) !important;
  color: #b58000 !important;
  border: 1px solid rgba(255, 193, 7, 0.15) !important;
}

.dokan-dashboard .dokan-label-danger,
.dokan-dashboard .dokan-status-cancel,
.dokan-dashboard .dokan-status-failed {
  background-color: rgba(220, 53, 69, 0.08) !important;
  color: #dc3545 !important;
  border: 1px solid rgba(220, 53, 69, 0.15) !important;
}

.dokan-dashboard .dokan-label-default,
.dokan-dashboard .dokan-status-draft {
  background-color: rgba(108, 117, 125, 0.08) !important;
  color: #6c757d !important;
  border: 1px solid rgba(108, 117, 125, 0.15) !important;
}

/* Forms & Input Elements */
.dokan-dashboard input[type="text"],
.dokan-dashboard input[type="email"],
.dokan-dashboard input[type="number"],
.dokan-dashboard input[type="password"],
.dokan-dashboard input[type="url"],
.dokan-dashboard select,
.dokan-dashboard textarea {
  width: 100% !important;
  padding: 0.75rem 0.9rem !important;
  font-size: 0.88rem !important;
  font-family: var(--body) !important;
  color: var(--ink) !important;
  background: #ffffff !important;
  border: 1px solid var(--line-mid) !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dokan-dashboard input[type="text"]:focus,
.dokan-dashboard input[type="email"]:focus,
.dokan-dashboard input[type="number"]:focus,
.dokan-dashboard input[type="password"]:focus,
.dokan-dashboard input[type="url"]:focus,
.dokan-dashboard select:focus,
.dokan-dashboard textarea:focus {
  outline: none !important;
  border-color: var(--c-mauve) !important;
  box-shadow: 0 0 0 3px rgba(122, 79, 133, 0.1) !important;
}

.dokan-dashboard .dokan-form-group label {
  font-family: var(--body) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--ink-mid) !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

/* Clean Dashboard Buttons */
.dokan-dashboard .dokan-btn,
.dokan-dashboard button.dokan-btn,
.dokan-dashboard input[type="submit"].dokan-btn {
  background: var(--c-charcoal) !important;
  color: #ffffff !important;
  font-family: var(--body) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.75rem 1.5rem !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.dokan-dashboard .dokan-btn:hover,
.dokan-dashboard button.dokan-btn:hover,
.dokan-dashboard input[type="submit"].dokan-btn:hover {
  background-color: var(--c-mauve) !important;
  color: #ffffff !important;
}

/* Secondary Button overrides */
.dokan-dashboard .dokan-btn-theme,
.dokan-dashboard .dokan-btn-default {
  background: transparent !important;
  border: 1px solid var(--c-charcoal) !important;
  color: var(--c-charcoal) !important;
}

.dokan-dashboard .dokan-btn-theme:hover,
.dokan-dashboard .dokan-btn-default:hover {
  background: var(--c-charcoal) !important;
  color: #ffffff !important;
}

/* Fix Elementor styles for Page 122943 (Vendors EU Export) */
.page-id-122943 .elementor-widget-button .elementor-button {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

.page-id-122943 .elementor-widget-button .elementor-button:hover {
    background-color: #333333 !important;
}

.page-id-122943 .elementor-widget-heading .elementor-heading-title {
    color: #000000 !important;
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase !important;
}

.page-id-122943 .elementor-widget-icon-list .elementor-icon-list-icon i {
    color: #000000 !important;
}

.page-id-122943 .elementor-widget-icon-list .elementor-icon-list-text,
.page-id-122943 .elementor-widget-text-editor {
    color: #333333 !important;
    font-family: 'Inter', sans-serif !important;
}

/* Style for Contact Form 7 on Page 122943 (Vendors EU Export) */
.page-id-122943 .wpcf7 {
    max-width: 650px;
    margin: 40px auto !important;
    padding: 40px !important;
    background-color: var(--bg-soft) !important;
    border: 1px solid var(--line-mid) !important;
}

.page-id-122943 .wpcf7 h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--c-black) !important;
    margin-bottom: 25px !important;
    text-align: center;
    border-bottom: 2px solid var(--c-ochre) !important;
    padding-bottom: 15px !important;
    letter-spacing: 0.05em !important;
}

.page-id-122943 .wpcf7-form p {
    margin-bottom: 20px !important;
}

.page-id-122943 .wpcf7-form label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: var(--c-black) !important;
    display: block !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.page-id-122943 .wpcf7-form input[type="text"],
.page-id-122943 .wpcf7-form input[type="email"],
.page-id-122943 .wpcf7-form textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    font-family: 'Inter', sans-serif !important;
    color: var(--ink) !important;
    background: #ffffff !important;
    border: 1px solid var(--line-mid) !important;
    border-radius: 0 !important;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-id-122943 .wpcf7-form input[type="text"]:focus,
.page-id-122943 .wpcf7-form input[type="email"]:focus,
.page-id-122943 .wpcf7-form textarea:focus {
    outline: none !important;
    border-color: var(--c-ochre) !important;
    box-shadow: 0 0 0 3px rgba(164, 136, 29, 0.1) !important;
}

.page-id-122943 .wpcf7-form textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

.page-id-122943 .wpcf7-form .wpcf7-radio {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-top: 5px !important;
}

.page-id-122943 .wpcf7-form .wpcf7-list-item {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.page-id-122943 .wpcf7-form .wpcf7-list-item-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    color: var(--ink) !important;
    margin: 0 !important;
}

.page-id-122943 .wpcf7-form input[type="submit"] {
    width: 100% !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    padding: 15px 30px !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease !important;
    margin-top: 10px !important;
}

.page-id-122943 .wpcf7-form input[type="submit"]:hover {
    background-color: var(--c-ochre) !important;
    color: #000000 !important;
}

.page-id-122943 .wpcf7-response-output {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.88rem !important;
    padding: 12px 16px !important;
    margin: 20px 0 0 0 !important;
    border-radius: 0 !important;
    border-width: 1px !important;
}

/* Widen post body wrapper */
.post-body-wrap { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; }

/* ==========================================================================
   Editorial Blog Cards - Redesign (Portrait & Excerpts)
   ========================================================================== */
.article .article-img-wrap { 
  aspect-ratio: 3/4; 
  overflow: hidden; 
  margin-bottom: 1.6rem; 
  background: var(--bg-soft); 
  position: relative;
}
.article .article-img-wrap img { 
  width: 100% !important; 
  height: 100% !important; 
  max-width: 100% !important; 
  max-height: 100% !important; 
  object-fit: cover !important; 
  mix-blend-mode: normal !important; 
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important; 
}
.article:hover .article-img-wrap img { 
  transform: scale(1.05) !important; 
}
.article .lead { 
  font-family: var(--serif); 
  font-size: 1.15rem; 
  color: var(--ink-mid); 
  line-height: 1.45; 
  margin-bottom: 1.2rem; 
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ==========================================================================
   The Edit – Featured Hero (deep violet)
   ========================================================================== */
.edit-featured-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  background: #1e0e3e;
  text-decoration: none;
  overflow: hidden;
}
.edit-featured-img {
  overflow: hidden;
}
.edit-featured-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
  display: block;
}
.edit-featured-hero:hover .edit-featured-img img { transform: scale(1.04); }
.edit-featured-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: 4rem 4.5rem;
}
.edit-featured-eyebrow {
  font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin-bottom: 1.4rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.edit-featured-diamond {
  display: inline-block; width: 6px; height: 6px;
  background: #a78bfa; transform: rotate(45deg);
}
.edit-featured-title {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2rem, 3.5vw, 3.2rem); text-transform: uppercase;
  line-height: 0.97; letter-spacing: -0.02em;
  color: #ffffff; margin-bottom: 1.6rem;
}
.edit-featured-lead {
  font-family: var(--serif); font-size: 1.15rem; font-style: italic;
  line-height: 1.55; color: rgba(255,255,255,0.75);
  max-width: 44ch; margin-bottom: 1.6rem;
}
.edit-featured-meta {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 2.2rem;
}
.edit-featured-btn {
  display: inline-block; border: 1px solid rgba(255,255,255,0.6);
  padding: 0.75rem 2rem; font-family: var(--body); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #ffffff; transition: background 0.3s, color 0.3s, border-color 0.3s;
  align-self: flex-start;
}
.edit-featured-hero:hover .edit-featured-btn {
  background: #ffffff; color: #1e0e3e; border-color: #ffffff;
}
@media (max-width: 860px) {
  .edit-featured-hero { grid-template-columns: 1fr; }
  .edit-featured-body { padding: 2.5rem 1.5rem; }
}

/* ==========================================================================
   The Edit – Alternating Category Rows
   ========================================================================== */
.edit-cat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.edit-cat-row.edit-row-reverse { direction: rtl; }
.edit-cat-row.edit-row-reverse > * { direction: ltr; }
.edit-cat-row-img {
  display: block; overflow: hidden;
}
.edit-cat-row-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.edit-cat-row:hover .edit-cat-row-img img { transform: scale(1.04); }
.edit-cat-row-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: 4rem 4.5rem; background: var(--bg);
}
.edit-cat-row-tag {
  font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-mauve); margin-bottom: 1.2rem; display: block;
  text-decoration: none;
}
.edit-cat-row-tag:hover { text-decoration: underline; }
.edit-cat-row-title {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.8rem, 2.5vw, 2.6rem); text-transform: uppercase;
  line-height: 1.0; letter-spacing: -0.01em; margin-bottom: 1.4rem;
}
.edit-cat-row-title a {
  color: var(--ink); text-decoration: none;
  transition: color 0.25s;
}
.edit-cat-row-title a:hover { color: var(--c-mauve); }
.edit-cat-row-lead {
  font-family: var(--serif); font-size: 1.1rem; line-height: 1.55;
  color: var(--ink-mid); max-width: 42ch; margin-bottom: 1.4rem;
}
.edit-cat-row-meta {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 2rem;
}
.edit-cat-row-link {
  font-family: var(--body); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; align-self: flex-start;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: color 0.25s, border-color 0.25s;
}
.edit-cat-row-link:hover { color: var(--c-mauve); border-color: var(--c-mauve); }
@media (max-width: 860px) {
  .edit-cat-row { grid-template-columns: 1fr; direction: ltr; }
  .edit-cat-row-img { min-height: 260px; }
  .edit-cat-row-body { padding: 2.5rem 1.5rem; }
}
/* ==========================================================================
   AYA Go – Product Showcase Page
   ========================================================================== */
.ayago-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
  border-bottom: 1px solid var(--line);
}
.ayago-hero-img {
  background: #f0eee9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}
.ayago-hero-img img {
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.ayago-hero-img:hover img { transform: scale(1.03); }
.ayago-hero-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 4.5rem;
  background: var(--bg);
}
.ayago-eyebrow {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-mauve);
  margin-bottom: 1.2rem;
}
.ayago-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 3vw, 2.8rem);
  text-transform: uppercase;
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.ayago-short-desc {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ink-mid);
  line-height: 1.5;
  max-width: 44ch;
  margin-bottom: 2rem;
}
.ayago-price {
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 2.2rem;
}
.ayago-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ayago-features li {
  font-size: 0.92rem;
  color: var(--ink-mid);
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  line-height: 1.4;
}
.ayago-features li::before {
  content: "✦";
  color: var(--c-mauve);
  font-size: 0.65rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.ayago-atc {
  display: inline-block;
  background: var(--ink);
  color: #ffffff;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  text-decoration: none;
  border: 2px solid var(--ink);
  transition: background 0.3s, color 0.3s;
  align-self: flex-start;
  cursor: pointer;
}
.ayago-atc:hover {
  background: var(--c-mauve);
  border-color: var(--c-mauve);
  color: #ffffff;
}
.ayago-desc-section {
  padding: var(--section-y) var(--gutter);
  max-width: 860px;
  margin: 0 auto;
}
.ayago-desc-section h3 {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  color: var(--ink);
}
.ayago-desc-section p {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--ink-mid);
  margin-bottom: 1rem;
}
.ayago-desc-section ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.ayago-desc-section ul li {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink-mid);
  line-height: 1.6;
  margin-bottom: 0.4rem;
}
@media (max-width: 860px) {
  .ayago-hero { grid-template-columns: 1fr; }
  .ayago-hero-img { min-height: 280px; }
  .ayago-hero-body { padding: 2.5rem 1.5rem; }
}
/* ==========================================================================
   Editorial Single Post – Elegant Spacing & Typography
   ========================================================================== */
.editorial-content-section {
  padding-top: 4rem !important;
  padding-bottom: 5rem !important;
}
.editorial-content-section .elementor-container {
  max-width: 740px !important;
  margin: 0 auto !important;
}
.editorial-intro h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 2.3rem;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.editorial-intro p, 
.editorial-qa p, 
.editorial-bio p, 
.editorial-video-intro p {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--ink-mid);
  margin-bottom: 1.6rem;
}
.editorial-question {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-mauve);
  margin-top: 3.5rem;
  margin-bottom: 1rem;
}
.editorial-quote {
  border-left: 2px solid var(--c-mauve);
  padding-left: 1.8rem;
  margin: 2.5rem 0;
}
.editorial-quote p {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 0.8rem;
}
.editorial-quote cite {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
}
.editorial-answer-highlight {
  font-family: var(--serif);
  font-size: 1.3rem !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
  margin-bottom: 2.2rem;
  font-weight: 500;
}
.editorial-carousel-caption {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 0.8rem;
  margin-bottom: 2.5rem;
}
.editorial-video-intro h3 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.45rem;
  text-transform: uppercase;
  margin-top: 4rem;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.editorial-content-section iframe {
  width: 100% !important;
  aspect-ratio: 16/9;
  height: auto !important;
  margin-bottom: 2.5rem;
  border: 0;
}
.editorial-shop-heading h3 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  color: var(--ink);
}

/* ==========================================================================
   20. LEGAL & UTILITY POLICY PAGES (PRIVACY, TERMS, SHIPPING, ETC)
   ========================================================================== */
.policy-page-container {
  max-width: 740px !important;
  margin: 4rem auto 6rem auto !important;
  padding: 0 1.5rem !important;
  font-family: var(--body);
  color: var(--ink);
  line-height: 1.7;
  font-size: 1.05rem;
}

.policy-main-title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-style: italic;
  font-weight: 300;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--c-aubergine);
}

.policy-page-container p {
  margin-bottom: 1.5rem;
}

.policy-page-container h2.policy-section-heading {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  color: var(--c-aubergine);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.5rem;
}

/* Accordion details/summary styling */
.policy-accordion {
  margin: 2rem 0;
  border-top: 1px solid var(--line);
}

.policy-accordion-item {
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 0;
}

.policy-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  font-weight: 600;
  font-family: var(--font-head);
  cursor: pointer;
  list-style: none;
  font-size: 1.1rem;
}

.policy-accordion-header::-webkit-details-marker {
  display: none;
}

.policy-accordion-header .icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: 1rem;
}

.policy-accordion-header .icon::before,
.policy-accordion-header .icon::after {
  content: '';
  position: absolute;
  background-color: var(--ink-mid);
  transition: transform 0.25s ease;
}

/* Horizontal line */
.policy-accordion-header .icon::before {
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
}

/* Vertical line */
.policy-accordion-header .icon::after {
  top: 0;
  left: 6px;
  width: 2px;
  height: 14px;
}

/* Rotate vertical line to make flat minus sign on open */
.policy-accordion-item[open] .policy-accordion-header .icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.policy-accordion-item[open] .policy-accordion-header .icon::before {
  background-color: var(--c-ochre);
}

.policy-accordion-content {
  padding: 0.5rem 0 1.5rem 0;
  color: var(--ink-mid);
  font-size: 1rem;
}

.policy-accordion-content p:last-child {
  margin-bottom: 0;
}

/* Quote styling */
.policy-quote {
  border-left: 3px solid var(--c-ochre);
  padding-left: 1.5rem;
  margin: 3rem 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--ink-mid);
}

.policy-quote cite {
  display: block;
  font-family: var(--body);
  font-size: 0.85rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-top: 0.75rem;
}

/* Button styling */
.policy-btn {
  display: inline-block;
  background-color: var(--c-aubergine);
  color: var(--c-white) !important;
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 2rem;
  font-size: 0.9rem;
  margin: 2rem 0;
  transition: all 0.25s ease;
}

.policy-btn:hover {
  background-color: var(--c-ochre);
  color: var(--c-white) !important;
}

/* Table styling for Terms & Conditions */
.policy-page-container table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.95rem;
}

.policy-page-container table td {
  border: 1px solid var(--line);
  padding: 0.75rem 1rem;
}

.policy-page-container table tr:nth-child(even) {
  background-color: var(--bg-soft);
}

/* ==========================================================================
   21. CUSTOM CONTACT US PAGE LAYOUT (AYA AFRICA)
   ========================================================================== */
.contact-page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Hero section */
.contact-hero {
  background-color: var(--c-aubergine);
  color: var(--c-white);
  padding: 6rem 2rem;
  text-align: center;
  margin-bottom: 4rem;
  margin-top: 2rem;
  position: relative;
}

.contact-hero .diamond {
  background-color: var(--c-teal);
  margin: 0 auto 1.5rem auto;
  display: block;
}

.contact-title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  text-transform: none;
}

.contact-subtitle {
  font-family: var(--body);
  color: var(--c-text);
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.1rem;
}

/* 3-Column Info Cards */
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 6rem;
}

.contact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 3rem 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.contact-card:hover {
  border-color: var(--c-ochre);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.contact-card-icon {
  font-size: 2rem;
  color: var(--c-ochre);
  margin-bottom: 1.5rem;
}

.contact-card h3 {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--ink);
}

.contact-card-tag {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

.contact-card-details p {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.contact-card-details a {
  color: var(--c-mauve);
  font-weight: 600;
  transition: color 0.25s ease;
}

.contact-card-details a:hover {
  color: var(--c-ochre);
}

/* Split Section (Form & Booking) */
.contact-split-section {
  display: flex;
  gap: 5rem;
  margin-bottom: 6rem;
}

.contact-form-wrap {
  flex: 1.3;
}

.contact-booking-wrap {
  flex: 1;
}

.contact-section-head {
  margin-bottom: 2.5rem;
}

.contact-section-head h2 {
  font-family: var(--serif);
  font-size: 2.25rem;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 0.5rem;
  color: var(--c-aubergine);
}

.contact-section-head p {
  color: var(--ink-mid);
  font-size: 1rem;
}

/* Contact Form custom inputs styling */
.contact-form-inner input[type="text"],
.contact-form-inner input[type="email"],
.contact-form-inner textarea {
  width: 100% !important;
  border: 1px solid var(--line) !important;
  background-color: var(--paper) !important;
  color: var(--ink) !important;
  padding: 1rem 1.25rem !important;
  font-family: var(--body) !important;
  font-size: 0.95rem !important;
  margin-bottom: 1.5rem !important;
  outline: none !important;
  border-radius: 0px !important;
  transition: border-color 0.25s ease !important;
}

.contact-form-inner input[type="text"]:focus,
.contact-form-inner input[type="email"]:focus,
.contact-form-inner textarea:focus {
  border-color: var(--c-ochre) !important;
}

.contact-form-inner input[type="submit"] {
  background-color: var(--c-aubergine) !important;
  color: var(--c-white) !important;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 1.25rem 2.5rem !important;
  font-size: 0.9rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.contact-form-inner input[type="submit"]:hover {
  background-color: var(--c-ochre) !important;
}

/* Calendly Widget styling */
.calendly-widget-container {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 1rem;
}

/* Call to Action Banner */
.contact-cta {
  background-color: var(--c-aubergine);
  color: var(--c-white);
  padding: 5rem 2rem;
  text-align: center;
  margin-bottom: 6rem;
}

.contact-cta h2 {
  font-family: var(--serif);
  font-size: 2.25rem;
  font-style: italic;
  font-weight: 300;
  margin-bottom: 1rem;
}

.contact-cta p {
  color: var(--c-text);
  max-width: 500px;
  margin: 0 auto 2.5rem auto;
  font-size: 1.05rem;
}

.contact-cta-btn {
  display: inline-block;
  background-color: var(--c-teal);
  color: var(--c-white) !important;
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1.25rem 2.5rem;
  font-size: 0.9rem;
  transition: all 0.25s ease;
}

.contact-cta-btn:hover {
  background-color: var(--c-ochre);
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .contact-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .contact-split-section {
    flex-direction: column;
    gap: 4rem;
  }
}

/* ==========================================================================
   22. PDP WOOCOMMERCE INLINE ADD TO CART & AJAX STYLING
   ========================================================================== */
.pdp-wc-hook-wrap form.cart,
.pdp-wc-hook-wrap .woocommerce-variation-add-to-cart {
  display: flex !important;
  gap: 1rem !important;
  align-items: center !important;
  margin-bottom: 2.5rem !important;
  flex-wrap: wrap !important;
}

.pdp-wc-hook-wrap form.cart .quantity,
.pdp-wc-hook-wrap .woocommerce-variation-add-to-cart .quantity {
  margin: 0 !important;
  display: inline-block !important;
}

.pdp-wc-hook-wrap form.cart .quantity input.qty,
.pdp-wc-hook-wrap .woocommerce-variation-add-to-cart .quantity input.qty {
  height: 3.25rem !important;
  width: 4rem !important;
  border: 1px solid var(--line-mid) !important;
  text-align: center !important;
  font-family: var(--body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  padding: 0 !important;
  outline: none !important;
  border-radius: 0px !important;
}

.pdp-wc-hook-wrap form.cart .single_add_to_cart_button,
.pdp-wc-hook-wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  height: 3.25rem !important;
  padding: 0 2.5rem !important;
  background-color: var(--c-mauve) !important;
  color: var(--c-white) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.85rem !important;
  border: none !important;
  border-radius: 0px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pdp-wc-hook-wrap form.cart .single_add_to_cart_button:hover,
.pdp-wc-hook-wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover {
  background-color: var(--c-ochre) !important;
}

.pdp-wc-hook-wrap form.cart .single_add_to_cart_button.loading,
.pdp-wc-hook-wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button.loading {
  opacity: 0.8 !important;
  background-color: var(--ink-soft) !important;
  cursor: not-allowed !important;
}

/* Success & Error Notice Wrap Styles */
.pdp-info .woocommerce-error-wrap {
  margin-bottom: 2rem;
}

.pdp-info .woocommerce-error {
  list-style: none !important;
  padding: 1.25rem !important;
  background: #fdf3f3 !important;
  border-left: 3px solid #d9534f !important;
  color: #b94a48 !important;
  font-family: var(--body) !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.pdp-info .woocommerce-error li {
  margin-bottom: 0 !important;
}
/* ===================================================================
   WOOCOMMERCE STAR RATING COLOR OVERRIDES (BRAND PURPLE)
   =================================================================== */
.woocommerce .star-rating span::before,
.woocommerce-page .star-rating span::before {
    color: var(--c-mauve) !important;
}

.woocommerce p.stars a::before,
.woocommerce-page p.stars a::before {
    color: var(--c-mauve) !important;
}

.woocommerce p.stars a:hover ~ a::before,
.woocommerce p.stars.selected a.active ~ a::before,
.woocommerce p.stars.selected a:not(.active)::before {
    color: #e0e0e0 !important;
}

/* ===================================================================
   DOKAN DASHBOARD FULL WIDTH OVERRIDE
   =================================================================== */
body.dokan-dashboard .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 20px;
}
body.dokan-dashboard .dokan-dashboard-wrap {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

/* ===================================================================
   WOOCOMMERCE CHECKOUT STYLING (AYA BRAND AESTHETIC)
   =================================================================== */

/* Checkout Page Container */
body.woocommerce-checkout .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--gutter) 0;
}

/* Headings */
body.woocommerce-checkout h3,
body.woocommerce-checkout #order_review_heading {
    font-family: var(--display);
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink);
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 0.5rem;
}

/* Info Messages (Coupon) */
body.woocommerce-checkout .woocommerce-info {
    border-top-color: var(--c-charcoal);
    background-color: var(--bg-soft);
    color: var(--ink);
    font-family: var(--body);
    font-size: 0.95rem;
    border-radius: 0;
    box-shadow: none;
}
body.woocommerce-checkout .woocommerce-info::before {
    color: var(--c-charcoal);
}

/* Form Inputs */
body.woocommerce-checkout form.checkout input[type="text"],
body.woocommerce-checkout form.checkout input[type="email"],
body.woocommerce-checkout form.checkout input[type="tel"],
body.woocommerce-checkout form.checkout select,
body.woocommerce-checkout form.checkout textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 0.95rem !important;
    font-family: var(--body) !important;
    color: var(--ink) !important;
    background-color: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
}

body.woocommerce-checkout form.checkout input[type="text"]:focus,
body.woocommerce-checkout form.checkout input[type="email"]:focus,
body.woocommerce-checkout form.checkout input[type="tel"]:focus,
body.woocommerce-checkout form.checkout select:focus,
body.woocommerce-checkout form.checkout textarea:focus {
    outline: none !important;
    border-color: var(--c-charcoal) !important;
    box-shadow: 0 0 0 1px var(--c-charcoal) !important;
}

/* Form Labels */
body.woocommerce-checkout form.checkout label {
    font-family: var(--body);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ink-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.4rem;
}

/* Order Review Table */
body.woocommerce-checkout table.shop_table {
    border: 1px solid var(--line);
    border-radius: 0;
    border-collapse: collapse;
}
body.woocommerce-checkout table.shop_table th,
body.woocommerce-checkout table.shop_table td {
    border-color: var(--line-mid);
    padding: 1.2rem;
}
body.woocommerce-checkout table.shop_table th {
    font-family: var(--display);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--bg-soft);
}
body.woocommerce-checkout table.shop_table tfoot th {
    background-color: transparent;
    font-weight: 700;
}
body.woocommerce-checkout table.shop_table .order-total th,
body.woocommerce-checkout table.shop_table .order-total td {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ink);
    border-top: 2px solid var(--ink);
}

/* Payment Section */
body.woocommerce-checkout #payment {
    background: var(--bg-soft);
    border-radius: 0;
    padding: 2rem;
    margin-top: 2rem;
}
body.woocommerce-checkout #payment div.payment_box {
    background-color: var(--paper);
    color: var(--ink-mid);
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--line);
}
body.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--paper);
}

/* Place Order Button */
body.woocommerce-checkout #place_order {
    background-color: var(--c-charcoal) !important;
    color: var(--bg) !important;
    font-family: var(--display) !important;
    font-weight: 900 !important;
    font-size: 1rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    padding: 1.2rem 2.4rem !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100%;
    transition: all 0.3s ease !important;
    margin-top: 1.5rem;
}
body.woocommerce-checkout #place_order:hover {
    background-color: var(--c-ochre) !important;
    color: var(--c-charcoal) !important;
}

/* ===================================================================
   WOOCOMMERCE ORDER RECEIVED / PAY STYLING
   =================================================================== */

body.woocommerce-order-pay .woocommerce,
body.woocommerce-order-received .woocommerce,
body.woocommerce-page.woocommerce-order-received .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--gutter) 0;
}

/* Order Overview List (Order #, Date, Total) */
ul.woocommerce-order-overview,
ul.order_details {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    list-style: none;
    padding: 2rem;
    margin: 0 0 3rem 0;
    background-color: var(--bg-soft);
    border: 1px solid var(--line);
}

ul.woocommerce-order-overview li,
ul.order_details li {
    display: flex;
    flex-direction: column;
    font-family: var(--body);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-mid);
    border-right: 1px solid var(--line-mid);
    padding-right: 2rem;
    margin: 0;
}

ul.woocommerce-order-overview li:last-child,
ul.order_details li:last-child {
    border-right: none;
    padding-right: 0;
}

ul.woocommerce-order-overview li strong,
ul.order_details li strong {
    font-family: var(--display);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ink);
    margin-top: 0.5rem;
    text-transform: none;
}

/* Order Details Headings */
.woocommerce-order-details__title,
.woocommerce-column__title {
    font-family: var(--display);
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink);
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 0.5rem;
}

/* Order Details Table */
.woocommerce-order-details table.shop_table,
.woocommerce-table--order-details {
    border: 1px solid var(--line);
    border-radius: 0;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 3rem;
}

.woocommerce-order-details table.shop_table th,
.woocommerce-order-details table.shop_table td {
    border-bottom: 1px solid var(--line-mid);
    padding: 1.2rem;
}

.woocommerce-order-details table.shop_table thead th {
    font-family: var(--display);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--bg-soft);
}

.woocommerce-order-details table.shop_table tfoot th,
.woocommerce-order-details table.shop_table tfoot td {
    border-top: 1px solid var(--line-mid);
    font-weight: 700;
}

.woocommerce-order-details table.shop_table tfoot tr:last-child th,
.woocommerce-order-details table.shop_table tfoot tr:last-child td {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ink);
    border-top: 2px solid var(--ink);
}

/* Customer Address */
.woocommerce-customer-details address {
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ink);
    background-color: var(--paper);
    padding: 2rem;
    border: 1px solid var(--line);
    font-style: normal;
    margin-bottom: 3rem;
}

/* Messages (e.g. Thank you. Your order has been received.) */
p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
    font-family: var(--display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--c-charcoal);
    margin-bottom: 2rem;
}

/* ===================================================================
   CUSTOM 404 PAGE STYLING
   =================================================================== */
.custom-404-wrapper {
    background-color: #F2EFE8;
    padding: 10rem 1.5rem;
    text-align: center;
    color: #161310;
    
    /* Reliable Full Width Bleed */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box;
}

.aya-404-container {
    max-width: 1200px;
    margin: 0 auto;
}

.aya-404-title {
    font-family: 'Helvetica Now Display', 'Archivo', sans-serif;
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    margin: 0 0 1rem 0;
    color: #EC5228;
    letter-spacing: -2px;
}

.aya-404-subtitle {
    font-family: 'Helvetica Now Display', 'Archivo', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
}

.aya-404-description {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
    color: #5B564E;
}

.aya-404-actions {
    margin-bottom: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.aya-404-actions .btn {
    padding: 1rem 2rem;
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.aya-404-actions .btn-primary {
    background: #161310;
    color: #fff;
}

.aya-404-actions .btn-primary:hover {
    background: #EC5228;
}

.aya-404-actions .btn-secondary {
    background: transparent;
    border: 1px solid #161310;
    color: #161310;
}

.aya-404-actions .btn-secondary:hover {
    background: #161310;
    color: #fff !important;
}

.aya-404-custom-grid-container h3 {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #161310;
}

.aya-404-custom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    width: 100%;
}

.aya-404-product-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 100%;
}

.aya-404-product-card .aya-404-img-wrap {
    display: block;
    margin-bottom: 15px;
    width: 100%;
}

.aya-404-product-card .aya-404-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.aya-404-prod-title a {
    font-family: 'Helvetica Now Display', 'Archivo', sans-serif;
    font-size: 1.1rem;
    color: #161310;
    text-decoration: none;
    line-height: 1.2;
    margin-bottom: 8px;
    display: block;
}

.aya-404-prod-price {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 700;
    color: #161310;
    font-size: 1rem;
    margin-bottom: 15px;
    display: block;
}

.aya-404-view-btn {
    margin-top: auto;
    padding: 10px 15px;
    background: transparent;
    border: 1px solid #161310;
    color: #161310;
    font-family: 'Hanken Grotesk', sans-serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.aya-404-view-btn:hover {
    background: #161310;
    color: #fff !important;
}

/* ===================================================================
   23. DOKAN VENDOR — ADD/EDIT PRODUCT PAGE FIXES
   =================================================================== */

/* --- Toggle arrows: Inventory & Other Options section headers ----- */
/* Exact Dokan markup: <a class="dokan-section-toggle"><i class="fas fa-sort-down fa-flip-vertical"> */
body.dokan-dashboard .dokan-section-toggle {
    color: var(--c-charcoal) !important;
}

body.dokan-dashboard .dokan-section-toggle i,
body.dokan-dashboard .dokan-section-toggle .fa-sort-down,
body.dokan-dashboard .dokan-section-toggle .fas {
    color: var(--c-charcoal) !important;
}


body.dokan-dashboard .dokan-product-edit-area .dokan-hide,
body.dokan-dashboard .dokan-product-edit-area [class*="show-hide"],
body.dokan-dashboard .dokan-product-edit-area .inventory-container > p > a,
body.dokan-dashboard .dokan-product-edit-area .other-options-container > p > a {
    color: var(--c-charcoal) !important;
}

/* The actual CSS border-triangle arrows Dokan uses */
body.dokan-dashboard .dokan-product-edit-area .dokan-show-hide::before,
body.dokan-dashboard .dokan-product-edit-area .dokan-show-hide::after,
body.dokan-dashboard .dokan-product-edit-area .dokan-hide::before,
body.dokan-dashboard .dokan-product-edit-area .dokan-hide::after {
    border-color: var(--c-charcoal) transparent transparent transparent !important;
}

/* ===================================================================
   24. DOKAN VENDOR — ALIGNMENT & LAYOUT TWEAKS
   =================================================================== */

/* --- 1. CATEGORY SELECTOR ALIGNMENT --- */
body.dokan-dashboard .dokan-product-edit-area .dokan-select-product-category-container {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
}

body.dokan-dashboard .dokan-product-edit-area .dokan-select-product-category {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0 !important;
}

body.dokan-dashboard .dokan-product-edit-area .dokan-select-product-category-remove-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
}

/* --- 2. PRICE FIELDS ALIGNMENT --- */
body.dokan-dashboard .dokan-product-edit-area .dokan-price-container {
    display: flex !important;
    align-items: flex-end !important; /* aligns the bottom so input boxes perfectly match */
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
}

body.dokan-dashboard .dokan-product-edit-area .dokan-price-container .content-half-part {
    flex: 1 !important;
    min-width: 200px !important;
    float: none !important;
    margin: 0 !important;
    width: auto !important;
}

/* --- 3. EDITOR TABS (Visual/Code) ALIGNMENT --- */
body.dokan-dashboard .dokan-product-edit-area .wp-editor-tabs {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
}

body.dokan-dashboard .dokan-product-edit-area .wp-switch-editor {
    float: none !important;
    margin: 0 !important;
    border-bottom: none !important;
    height: auto !important;
    padding: 6px 12px !important;
}

/* --- 4. INVENTORY FIELDS ALIGNMENT --- */
body.dokan-dashboard .dokan-product-edit-area .dokan-product-inventory .dokan-section-content {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
}

body.dokan-dashboard .dokan-product-edit-area .dokan-product-inventory .dokan-section-content > .content-half-part {
    flex: 0 0 48% !important; /* Maintain standard Dokan half-width layout */
    float: none !important;
    margin-bottom: 15px !important;
}

body.dokan-dashboard .dokan-product-edit-area .dokan-product-inventory .dokan-section-content > .dokan-clearfix {
    display: none !important; /* Remove float clear spacer since flex is active */
}

/* --- 5. SECTION HEADING TOGGLE ALIGNMENT --- */
body.dokan-dashboard .dokan-product-edit-area .dokan-section-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}

body.dokan-dashboard .dokan-product-edit-area .dokan-section-heading h2 {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    margin-right: 15px !important;
}

body.dokan-dashboard .dokan-product-edit-area .dokan-section-heading p {
    margin: 0 !important;
    flex: 1 !important;
}

body.dokan-dashboard .dokan-product-edit-area .dokan-section-heading .dokan-section-toggle {
    position: static !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
}

body.dokan-dashboard .dokan-product-edit-area .dokan-section-heading .dokan-clearfix {
    display: none !important;
}

/* Broadest possible sweep — any element used as a triangle arrow inside the form */
body.dokan-dashboard .dokan-product-edit-area span[class*="arrow"],
body.dokan-dashboard .dokan-product-edit-area i[class*="arrow"],
body.dokan-dashboard .dokan-product-edit-area .arrow-up,
body.dokan-dashboard .dokan-product-edit-area .arrow-down,
body.dokan-dashboard .dokan-product-edit-area .arrow {
    color: var(--c-charcoal) !important;
    border-top-color:    var(--c-charcoal) !important;
    border-bottom-color: var(--c-charcoal) !important;
    border-left-color:   var(--c-charcoal) !important;
    border-right-color:  var(--c-charcoal) !important;
}

/* FontAwesome / dashicon arrow icons Dokan uses inside section headings */
body.dokan-dashboard .dokan-product-edit-area .dokan-panel-heading i,
body.dokan-dashboard .dokan-product-edit-area .dokan-panel-heading .fa,
body.dokan-dashboard .dokan-product-edit-area h3 + p > a > i,
body.dokan-dashboard .dokan-product-edit-area h3 + p > a {
    color: var(--c-charcoal) !important;
}

/* --- Checkboxes: all of them on the product edit page ------------ */
/* Targets: Enable Stock Management, Allow single qty, Enable Reviews */
body.dokan-dashboard .dokan-product-edit-area input[type="checkbox"],
body.dokan-dashboard .dokan-product-edit-area input[type="checkbox"]:checked,
body.dokan-dashboard input[type="checkbox"]#_enable_reviews,
body.dokan-dashboard input[type="checkbox"]#_manage_stock,
body.dokan-dashboard input[type="checkbox"]#_sold_individually,
body.dokan-dashboard .dokan-form-group input[type="checkbox"] {
    accent-color: var(--c-charcoal) !important;
    width: 15px !important;
    height: 15px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

/* Checkbox row labels — keep inline and vertically centered */
body.dokan-dashboard .dokan-product-edit-area .checkbox,
body.dokan-dashboard .dokan-product-edit-area .checkbox label,
body.dokan-dashboard .dokan-product-edit-area label.checkbox-inline,
body.dokan-dashboard .dokan-product-edit-area .dokan-form-group label:has(input[type="checkbox"]) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    cursor: pointer !important;
    margin-bottom: 0.4rem !important;
}

/* --- Stock Status select: fix width & alignment with SKU field ---- */
/* Dokan puts SKU (left) and Stock Status (right) in a flex/grid row */
body.dokan-dashboard .dokan-product-edit-area .dokan-inventory-stock-status,
body.dokan-dashboard .dokan-product-edit-area #_stock_status,
body.dokan-dashboard .dokan-product-edit-area select#_stock_status,
body.dokan-dashboard .dokan-product-edit-area [name="_stock_status"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 0.6rem 2rem 0.6rem 0.85rem !important;
    line-height: 1.5 !important;
    font-size: 0.88rem !important;
    font-family: var(--body) !important;
    color: var(--ink) !important;
    background-color: #ffffff !important;
    border: 1px solid var(--line-mid) !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    cursor: pointer !important;
    display: block !important;
}

/* Make the Stock Status column the same width as SKU column */
body.dokan-dashboard .dokan-product-edit-area .dokan-col-md-6:has(#_stock_status),
body.dokan-dashboard .dokan-product-edit-area .dokan-col-sm-6:has(#_stock_status),
body.dokan-dashboard .dokan-product-edit-area .col-md-6:has(#_stock_status) {
    flex: 1 !important;
    max-width: 50% !important;
}

/* All selects on the page — consistent styling */
body.dokan-dashboard .dokan-product-edit-area select {
    height: auto !important;
    min-height: 42px !important;
    padding: 0.6rem 2rem 0.6rem 0.85rem !important;
    line-height: 1.5 !important;
    font-size: 0.88rem !important;
    font-family: var(--body) !important;
    color: var(--ink) !important;
    background: #ffffff !important;
    border: 1px solid var(--line-mid) !important;
    border-radius: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    cursor: pointer !important;
}

body.dokan-dashboard .dokan-product-edit-area select:focus {
    outline: none !important;
    border-color: var(--c-charcoal) !important;
    box-shadow: 0 0 0 2px rgba(41, 45, 44, 0.12) !important;
}

/* --- Input & textarea focus ring: charcoal not purple ------------ */
body.dokan-dashboard .dokan-product-edit-area input[type="text"]:focus,
body.dokan-dashboard .dokan-product-edit-area input[type="number"]:focus,
body.dokan-dashboard .dokan-product-edit-area input[type="email"]:focus,
body.dokan-dashboard .dokan-product-edit-area textarea:focus {
    outline: none !important;
    border-color: var(--c-charcoal) !important;
    box-shadow: 0 0 0 2px rgba(41, 45, 44, 0.12) !important;
}



/* --- Price fields: fix currency prefix "R" layout & label wrapping --- */
.dokan-dashboard .dokan-product-edit-area .dokan-price-wrap,
.dokan-dashboard .dokan-form-group .dokan-price-wrap {
    display: flex !important;
    align-items: stretch !important;
    border: 1px solid var(--line-mid) !important;
    background: #ffffff !important;
    overflow: hidden;
}

.dokan-dashboard .dokan-price-wrap .dokan-input-group-text,
.dokan-dashboard .dokan-price-wrap .input-group-addon {
    display: flex !important;
    align-items: center !important;
    padding: 0 0.75rem !important;
    background: var(--bg-soft) !important;
    border: none !important;
    border-right: 1px solid var(--line-mid) !important;
    font-family: var(--body) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--ink-mid) !important;
    white-space: nowrap !important;
    flex-shrink: 0;
}

.dokan-dashboard .dokan-price-wrap input[type="text"],
.dokan-dashboard .dokan-price-wrap input[type="number"] {
    border: none !important;
    box-shadow: none !important;
    flex: 1 !important;
    padding: 0.75rem !important;
    margin: 0 !important;
    background: transparent !important;
}

.dokan-dashboard .dokan-price-wrap:focus-within {
    border-color: var(--c-charcoal) !important;
    box-shadow: 0 0 0 2px rgba(41, 45, 44, 0.12) !important;
}

/* Fix price label — prevent awkward word wraps */
.dokan-dashboard .dokan-product-edit-area label[for*="price"],
.dokan-dashboard .dokan-label-info {
    white-space: nowrap !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
}

/* Earning note under price label */
.dokan-dashboard .dokan-product-edit-area .dokan-earn-label,
.dokan-dashboard .dokan-product-edit-area .price-earning-tip {
    font-size: 0.72rem !important;
    color: var(--ink-soft) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    display: block !important;
}

/* --- Select dropdowns: fix clipped/cut-off text --- */
.dokan-dashboard .dokan-product-edit-area select,
.dokan-dashboard #stock_status,
.dokan-dashboard #_stock_status,
.dokan-dashboard select[name="stock_status"],
.dokan-dashboard select[name="_visibility"],
.dokan-dashboard select[name="post_status"] {
    height: auto !important;
    min-height: 44px !important;
    padding: 0.6rem 2rem 0.6rem 0.85rem !important;
    line-height: 1.5 !important;
    overflow: visible !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    font-size: 0.88rem !important;
    font-family: var(--body) !important;
    color: var(--ink) !important;
    background: #ffffff !important;
    border: 1px solid var(--line-mid) !important;
    border-radius: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.dokan-dashboard .dokan-product-edit-area select:focus,
.dokan-dashboard select[name="stock_status"]:focus,
.dokan-dashboard select[name="_visibility"]:focus,
.dokan-dashboard select[name="post_status"]:focus {
    outline: none !important;
    border-color: var(--c-charcoal) !important;
    box-shadow: 0 0 0 2px rgba(41, 45, 44, 0.12) !important;
}

/* --- Section toggle arrows: replace purple with brand charcoal --- */
.dokan-dashboard .dokan-product-edit-area .dokan-section-title .dokan-toggle,
.dokan-dashboard .dokan-product-edit-area .dokan-section-title i,
.dokan-dashboard .dokan-product-edit-area .dokan-collapsible-icon,
.dokan-dashboard .inventory-container .dokan-toggle,
.dokan-dashboard .other-options-container .dokan-toggle {
    color: var(--c-charcoal) !important;
    border-color: var(--c-charcoal) !important;
}

/* The actual CSS triangle arrows used by Dokan as toggle indicators */
.dokan-dashboard .dokan-product-edit-area .dokan-section-title::after,
.dokan-dashboard .dokan-product-edit-area [class*="toggler"]::after,
.dokan-dashboard .dokan-product-edit-area .dokan-panel-heading .arrow {
    border-top-color: var(--c-charcoal) !important;
    border-bottom-color: var(--c-charcoal) !important;
    color: var(--c-charcoal) !important;
}

/* Target the mauve/purple SVG or icon elements Dokan uses */
.dokan-dashboard .dokan-product-edit-area .arrow-up,
.dokan-dashboard .dokan-product-edit-area .arrow-down {
    border-color: transparent transparent var(--c-charcoal) transparent !important;
}

/* --- Input focus ring: replace purple with charcoal --- */
.dokan-dashboard .dokan-product-edit-area input[type="text"]:focus,
.dokan-dashboard .dokan-product-edit-area input[type="number"]:focus,
.dokan-dashboard .dokan-product-edit-area input[type="email"]:focus,
.dokan-dashboard .dokan-product-edit-area textarea:focus {
    border-color: var(--c-charcoal) !important;
    box-shadow: 0 0 0 2px rgba(41, 45, 44, 0.12) !important;
    outline: none !important;
}

/* --- Checkbox: replace purple fill with brand charcoal --- */
.dokan-dashboard .dokan-product-edit-area input[type="checkbox"],
.dokan-dashboard input[type="checkbox"]#_enable_reviews,
.dokan-dashboard input[type="checkbox"].dokan-checkbox {
    accent-color: var(--c-charcoal) !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

/* Ensure checkbox label stays inline and readable */
.dokan-dashboard .dokan-product-edit-area .checkbox-inline,
.dokan-dashboard .dokan-product-edit-area label.checkbox-inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    cursor: pointer !important;
}

/* ===================================================================
   23b. DOKAN — EXACT ELEMENT OVERRIDES (sourced from plugin templates)
   =================================================================== */

/* ARROWS: <a class="dokan-section-toggle"> → <i class="fas fa-sort-down fa-flip-vertical"> */
a.dokan-section-toggle,
a.dokan-section-toggle:visited,
a.dokan-section-toggle:hover {
    color: #292D2C !important; /* --c-charcoal */
}

a.dokan-section-toggle i,
a.dokan-section-toggle .fas,
a.dokan-section-toggle .fa {
    color: #292D2C !important;
}

/* CHECKBOXES: exact IDs from Dokan templates */
/* _manage_stock = Enable product stock management */
/* _sold_individually = Allow only one quantity per order */
/* _enable_reviews = Enable product reviews (in others.php) */
input#_manage_stock,
input#_sold_individually,
input#_enable_reviews,
.dokan-product-inventory input[type="checkbox"],
.dokan-other-options input[type="checkbox"],
.dokan-product-edit-area .dokan-edit-row input[type="checkbox"] {
    accent-color: #292D2C !important;
    width: 15px !important;
    height: 15px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

/* Checkbox wrapper labels */
label[for="_manage_stock"],
label[for="_sold_individually"],
label[for="_enable_reviews"],
.dokan-product-inventory label:has(input[type="checkbox"]),
.dokan-other-options label:has(input[type="checkbox"]) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

/* ===================================================================
   23c. DOKAN — EXTRA FIXES (Sidebar Icons & Edit Product Prices)
   =================================================================== */

/* --- SIDEBAR ICONS: align Visit Store, Edit Account, Log out icons --- */
body.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
    padding: 1.25rem 1.5rem !important;
    border-top: 1px solid var(--line-soft) !important;
    margin-top: 1rem !important;
}

body.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: var(--bg-soft) !important;
    color: var(--ink-mid) !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    padding: 0 !important;
    text-decoration: none !important;
}

body.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links a:hover {
    background: var(--c-charcoal) !important;
    color: #ffffff !important;
}

body.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links a i {
    font-size: 0.95rem !important;
    margin: 0 !important;
    line-height: 1 !important;
    width: auto !important;
}

/* --- PRICE FIELDS: fix currency prefix layout & label wrapping --- */
/* The input group container */
body.dokan-dashboard .dokan-product-edit-area .dokan-input-group {
    display: flex !important;
    align-items: stretch !important;
    border: 1px solid var(--line-mid) !important;
    background: #ffffff !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    width: 100% !important;
}

/* Hide stray <br> tags inside the flex input group that break the "R" addon height */
body.dokan-dashboard .dokan-product-edit-area .dokan-input-group br {
    display: none !important;
}

/* The "R" currency prefix block */
body.dokan-dashboard .dokan-product-edit-area .dokan-input-group-addon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 0.85rem !important;
    height: 44px !important;
    line-height: 44px !important;
    background: var(--bg-soft) !important;
    border: none !important;
    border-right: 1px solid var(--line-mid) !important;
    font-family: var(--body) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--ink-mid) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
    align-self: stretch !important;
}

/* The actual price inputs */
body.dokan-dashboard .dokan-product-edit-area .dokan-input-group input[type="text"],
body.dokan-dashboard .dokan-product-edit-area .dokan-input-group input[type="number"] {
    border: none !important;
    box-shadow: none !important;
    flex: 1 !important;
    padding: 0.75rem !important;
    margin: 0 !important;
    background: transparent !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    height: 44px !important;
    line-height: 44px !important;
    align-self: stretch !important;
}

body.dokan-dashboard .dokan-product-edit-area .dokan-input-group:focus-within {
    border-color: var(--c-charcoal) !important;
    box-shadow: 0 0 0 2px rgba(41, 45, 44, 0.12) !important;
}

/* Fix PRICE label: hide stray <br> tags and make it a single flowing line */
body.dokan-dashboard .dokan-product-edit-area label[for="_regular_price"] br,
body.dokan-dashboard .dokan-product-edit-area label[for="_sale_price"] br {
    display: none !important;
}

body.dokan-dashboard .dokan-product-edit-area label[for="_regular_price"],
body.dokan-dashboard .dokan-product-edit-area label[for="_sale_price"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0.4rem !important;
    white-space: normal !important;
    width: 100% !important;
}

body.dokan-dashboard .dokan-product-edit-area label[for="_regular_price"] .vendor-earning,
body.dokan-dashboard .dokan-product-edit-area label[for="_sale_price"] .vendor-earning {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    gap: 0.25rem !important;
    font-size: 0.72rem !important;
    color: var(--ink-soft) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.dokan-dashboard .dokan-product-edit-area label[for="_regular_price"] .vendor-earning .vendor-price,
body.dokan-dashboard .dokan-product-edit-area label[for="_sale_price"] .vendor-earning .vendor-price {
    display: inline !important;
    white-space: nowrap !important;
}

/* ===================================================================
   25. MOBILE LOGO FIX (Force black logo on white mobile header)
   =================================================================== */
@media (max-width: 1024px) {
    /* Hide the white logo on mobile even if the header is considered "transparent" */
    .header--transparent:not(.header--scrolled) .logo-img-white {
        display: none !important;
    }
    
    /* Show the black logo on mobile instead */
    .header--transparent:not(.header--scrolled) .logo-img-black {
        display: block !important;
    }
}

/* ===================================================================
   26. DOKAN DASHBOARD MOBILE LAYOUT FIXES
   =================================================================== */
@media (max-width: 768px) {
    /* Fix page header spacing and title size */
    body.dokan-dashboard .page-header {
        padding-top: 5rem !important; /* give enough space for fixed header */
        padding-bottom: 1rem !important;
        text-align: center !important;
    }
    
    body.dokan-dashboard .entry-title {
        font-size: 2.2rem !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    /* Fix the dashboard wrap so it stacks properly instead of squishing */
    body.dokan-dashboard .dokan-dashboard-wrap {
        display: block !important;
        width: 100% !important;
        padding: 0 15px !important;
    }

    body.dokan-dashboard .dokan-dashboard-content {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Fix charts and widgets getting squished */
    body.dokan-dashboard .dashboard-widget,
    body.dokan-dashboard .dokan-panel,
    body.dokan-dashboard .dashboard-content-area .dashboard-widget {
        width: 100% !important;
        float: none !important;
        margin: 0 0 20px 0 !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    /* Hide ONLY the hamburger toggle — NOT the nav container itself */
    body.dokan-dashboard .dokan-dash-sidebar #dokan-navigation #mobile-menu-icon,
    body.dokan-dashboard .dokan-dash-sidebar #dokan-navigation #toggle-mobile-menu {
        display: none !important;
    }

    /* Force #dokan-navigation to be visible and take full height */
    body.dokan-dashboard .dokan-dash-sidebar #dokan-navigation {
        display: block !important;
        height: auto !important;
        position: static !important;
    }

    /* Force the menu to ALWAYS show as a 2-column flex grid (overriding Dokan's display:none at 450px) */
    body.dokan-dashboard .dokan-dash-sidebar #dokan-navigation ul.dokan-dashboard-menu,
    body.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        background: transparent !important;
        padding: 0 0 20px 0 !important;
        height: auto !important;
    }

    body.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li {
        flex: 1 1 calc(50% - 10px) !important;
        display: flex !important;
        width: auto !important;
    }

    body.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li a {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 15px 10px !important;
        background: var(--bg-soft, #f7f7f7) !important;
        border-radius: 8px !important;
        text-align: center !important;
        gap: 8px !important;
        font-size: 0.75rem !important;
        color: var(--ink, #111) !important;
        text-decoration: none !important;
    }

    body.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li a i {
        font-size: 1.2rem !important;
        margin: 0 !important;
    }

    body.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.active a {
        background: var(--c-charcoal, #222) !important;
        color: #fff !important;
    }
    
    body.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.active a i {
        color: #fff !important;
    }

    body.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links {
        flex: 1 1 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        padding: 10px 0 0 0 !important;
        border-top: none !important;
        gap: 15px !important;
    }
    
    body.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links a {
        flex-direction: row !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
    }

    /* Override 100vh min-height on mobile so it doesn't create huge blank spaces */
    body.dokan-dashboard .dokan-dash-sidebar {
        min-height: auto !important;
        padding-bottom: 0 !important;
    }
}

/* Fix for WooCommerce [products] shortcode grids */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(var(--columns, 4), 1fr); gap: 2rem; list-style: none; padding: 0; margin: 0; }
.woocommerce ul.products.columns-1 { --columns: 1; }
.woocommerce ul.products.columns-2 { --columns: 2; }
.woocommerce ul.products.columns-3 { --columns: 3; }
.woocommerce ul.products.columns-4 { --columns: 4; }
.woocommerce ul.products.columns-5 { --columns: 5; }
.woocommerce ul.products.columns-6 { --columns: 6; }
@media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 480px) { .woocommerce ul.products { grid-template-columns: 1fr; } }



.woocommerce ul.products li.product { display: flex; flex-direction: column; text-align: center; }
.woocommerce ul.products li.product .woocommerce-LoopProduct-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; flex-grow: 1; align-items: center; }
.woocommerce ul.products li.product img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 3/4; margin-bottom: 1rem; display: block; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.2rem; font-weight: 500; margin: 0.5rem 0; font-family: var(--serif, inherit); }
.woocommerce ul.products li.product .price { font-weight: 600; font-size: 1.1rem; margin-bottom: 1rem; color: var(--ink, #000); }
.woocommerce ul.products li.product .add_to_cart_button { margin-top: auto; display: inline-block; padding: 0.8rem 1.5rem; background: #000; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 0.85rem; border-radius: 50px; transition: background 0.2s; align-self: center; }
.woocommerce ul.products li.product .add_to_cart_button:hover { background: #333; }

.product-grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) { .product-grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .product-grid--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .product-grid--5 { grid-template-columns: 1fr; } }

.bulk-product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; }
@media (max-width: 1024px) { .bulk-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .bulk-product-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 480px) { .bulk-product-grid { grid-template-columns: 1fr; } }



@media (max-width: 1024px) { 
@media (max-width: 768px) { 
@media (max-width: 480px) { 

/* ===================================================================
   AYA AFRICA - MY ACCOUNT & VENDOR DASHBOARD SOLID HEADER & LAYOUT FIX
   =================================================================== */

/* 1. Force Solid, Sticky Header on Account & Dashboard Pages */
.woocommerce-account #site-header,
.dokan-dashboard #site-header,
.page-id-99243 #site-header,
.page-id-58 #site-header {
  position: sticky !important;
  top: 0 !important;
  background: rgba(250, 250, 247, 0.98) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(22, 19, 16, 0.12) !important;
  z-index: 999 !important;
}

.woocommerce-account #site-header .logo-img-white,
.dokan-dashboard #site-header .logo-img-white,
.page-id-99243 #site-header .logo-img-white,
.page-id-58 #site-header .logo-img-white {
  display: none !important;
}

.woocommerce-account #site-header .logo-img-black,
.dokan-dashboard #site-header .logo-img-black,
.page-id-99243 #site-header .logo-img-black,
.page-id-58 #site-header .logo-img-black {
  display: block !important;
}

.woocommerce-account #site-header .nav-primary a,
.woocommerce-account #site-header .nav-utility button,
.woocommerce-account #site-header .nav-utility a,
.dokan-dashboard #site-header .nav-primary a,
.dokan-dashboard #site-header .nav-utility button,
.dokan-dashboard #site-header .nav-utility a {
  color: #161310 !important;
}

/* 2. My Account Logged-In Prestige 2-Column Dashboard */
.woocommerce-account.logged-in .site-main {
  background: #fafaf7;
  padding-top: 3rem;
  padding-bottom: 6rem;
}

.woocommerce-account .woocommerce {
  max-width: 1140px;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: 2.5rem !important;
  align-items: start !important;
  float: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  grid-column: 1 !important;
  width: 100% !important;
  float: none !important;
  background: #ffffff;
  border: 1px solid #e8e8e4;
  border-radius: 10px;
  padding: 0.75rem 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  padding: 0.85rem 1.5rem;
  color: #333333;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: #f8f8f6;
  border-left-color: #c9933e;
  color: #000000;
  font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-content {
  grid-column: 2 !important;
  width: 100% !important;
  float: none !important;
  background: #ffffff;
  border: 1px solid #e8e8e4;
  border-radius: 10px;
  padding: 2.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  min-height: 380px;
}

.woocommerce-account .woocommerce-MyAccount-content p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #444444;
  margin-bottom: 1.25rem;
}

.woocommerce-account .woocommerce-MyAccount-content a {
  color: #c9933e;
  text-decoration: underline;
}

.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content a[href*="dashboard"] {
  display: inline-block;
  background: #111111 !important;
  color: #ffffff !important;
  padding: 0.85rem 1.75rem !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  margin-top: 1rem;
  transition: background 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-content a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content a[href*="dashboard"]:hover {
  background: #c9933e !important;
}
	
/* ==========================================================================
FORM & VENDOR REGISTRATION SPACING BEFORE FOOTER
========================================================================== */
#dokan-vendor-register,
.dokan-vendor-register,
.dokan-vendor-onboarding,
.dokan-onboarding-container,
.page-template-default:not(.elementor-page) .site-main,
body:not([class*="elementor-page"]) .site-main,
.woocommerce-account .site-main {
    padding-bottom: 5rem !important;
}

#dokan-vendor-register,
.dokan-vendor-register,
.dokan-vendor-onboarding,
.page-content form.register,
.page-content form.login {
    margin-bottom: 3.5rem !important;
}

#dokan-vendor-register p.form-row:last-of-type,
form.register p.form-row:last-of-type,
form.dokan-vendor-register p.form-row:last-of-type,
.dokan-vendor-onboarding p.form-row:last-of-type {
    margin-bottom: 3rem !important;
}

@media (max-width: 860px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    grid-column: 1 !important;
  }
}