/**
 * SPD Shell — Header, Navigation, Search, Cart Drawer, Mobile Nav, Footer
 * =====================================================================
 * Phase 2 shell styles. Reproduces the React/Tailwind design reference
 * using the centralized SPD design tokens (brand colors only — no green
 * dominance, no hardcoded colors when a token exists).
 *
 * Loaded after spd-design-system.css.
 */

/* ============================================================
   0. Skip link + base
   ============================================================ */
body.spd-lock { overflow: hidden; }
.spd-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--spd-z-modal);
  background: var(--spd-blue);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--spd-radius-md);
  font-weight: var(--spd-font-weight-bold);
  font-size: var(--spd-font-size-sm);
}
.spd-skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.spd-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.spd-icon--fill { fill: currentColor; stroke: none; }

.spd-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--spd-text);
  cursor: pointer;
  border-radius: var(--spd-radius-full);
  padding: 0.375rem;
  flex-shrink: 0;
  transition: color var(--spd-transition-fast), background-color var(--spd-transition-fast);
}
.spd-btn-icon:hover { background: #F1F5F9; color: var(--spd-blue); }
.spd-btn-icon:focus-visible {
  outline: none;
  box-shadow: var(--spd-focus-ring);
}
@media (min-width: 640px) {
  .spd-btn-icon { padding: 0.625rem; }
}

/* ============================================================
   1. Site header wrapper (sticky)
   ============================================================ */
.spd-site-header {
  position: sticky;
  top: 0;
  z-index: var(--spd-z-sticky);
  background: var(--spd-header-bg);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: var(--spd-shadow-xs);
  transition: box-shadow var(--spd-transition-fast), border-color var(--spd-transition-fast);
}
.spd-site-header.is-scrolled {
  box-shadow: var(--spd-shadow-md);
}

/* ============================================================
   2. Top bar
   ============================================================ */
.spd-topbar {
  background: var(--spd-bg);
  color: var(--spd-text-muted);
  font-size: var(--spd-font-size-xs);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.spd-topbar__inner {
  max-width: var(--spd-container-max);
  margin: 0 auto;
  padding: 0.375rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--spd-topbar-height);
}
.spd-topbar__left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--spd-text-muted);
  min-width: 0;
}
.spd-topbar__left .spd-icon { color: var(--spd-blue); width: 14px; height: 14px; }
.spd-topbar__left span { font-weight: var(--spd-font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spd-topbar__center {
  display: none;
  align-items: center;
  gap: 1.5rem;
  color: var(--spd-text-muted);
}
.spd-topbar__center .spd-topbar__item { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 11px; }
.spd-topbar__center .spd-icon { color: var(--spd-blue); width: 12px; height: 12px; }
.spd-topbar__right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
/* FR/EN language switcher — links reload the page with ?lang= */
.spd-topbar__lang { display: inline-flex; align-items: center; gap: 0.25rem; background: #fff; border-radius: var(--spd-radius-md); padding: 0.125rem; border: 1px solid var(--spd-border); box-shadow: var(--spd-shadow-xs); }
.spd-topbar__lang .spd-icon { color: #94A3B8; width: 13px; height: 13px; display: none; }
.spd-topbar__lang-link { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; text-decoration: none; color: var(--spd-text-muted); font-size: 11px; font-weight: var(--spd-font-weight-bold); padding: 0.125rem 0.5rem; border-radius: var(--spd-radius-sm); transition: background-color var(--spd-transition-fast), color var(--spd-transition-fast); line-height: 1.4; }
.spd-topbar__lang-link:hover { color: var(--spd-text); }
.spd-topbar__lang-link.is-active { background: var(--spd-blue); color: #fff; box-shadow: var(--spd-shadow-xs); }
.spd-topbar__sep { color: #CBD5E1; display: none; }
.spd-topbar__socials { display: none; align-items: center; gap: 0.625rem; color: var(--spd-text-muted); }
.spd-topbar__socials a { display: inline-flex; color: var(--spd-text-muted); transition: color var(--spd-transition-fast); }
.spd-topbar__socials a:hover { color: var(--spd-blue); }
.spd-topbar__socials svg { width: 14px; height: 14px; }
.spd-topbar__wa { color: #25D366; }
.spd-topbar__wa:hover { color: #1EBE5D; }

@media (min-width: 1280px) {
  .spd-topbar__center { display: flex; }
}
@media (min-width: 640px) {
  .spd-topbar__inner { padding-left: 1.5rem; padding-right: 1.5rem; }
  .spd-topbar__lang .spd-icon { display: inline-block; }
  .spd-topbar__sep { display: inline; }
  .spd-topbar__socials { display: flex; }
}

/* ============================================================
   3. Header main bar
   ============================================================ */
.spd-header__main {
  max-width: var(--spd-container-max);
  margin: 0 auto;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.spd-header__brand { flex-shrink: 0; }
.spd-header__center { flex: 1 1 auto; display: flex; justify-content: center; }
.spd-header__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

@media (min-width: 640px) {
  .spd-header__main { padding: 0.625rem 1.5rem; }
  .spd-header__actions { gap: 0.5rem; }
}
@media (min-width: 768px) {
  .spd-header__main { gap: 1rem; }
}

/* ============================================================
   4. Brand / Logo
   ============================================================ */
.spd-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--spd-blue);
  user-select: none;
  transition: opacity var(--spd-transition-fast);
}
.spd-brand:hover { opacity: 0.92; }
.spd-brand:focus-visible { outline: none; box-shadow: var(--spd-focus-ring); border-radius: var(--spd-radius-md); }
.spd-brand__logo {
  display: flex;
  align-items: center;
  height: 36px;
  flex-shrink: 0;
}
.spd-brand__logo {
  display: flex;
  align-items: center;
  height: 36px;
  flex-shrink: 0;
}
.spd-brand__img {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}
/* Strong constraints: the header logo must never be resized by global
   theme rules (Astra's img{height:auto;max-width:100%}, etc.). */
.spd-brand--header .spd-brand__logo .spd-brand__img {
  height: 36px !important;
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain !important;
}
@media (min-width: 640px) {
  .spd-brand__logo { height: 44px; }
  .spd-brand--header .spd-brand__logo .spd-brand__img { height: 44px !important; }
}
/* Shrink logo when header is scrolled (matches React isScrolled -> size 'sm') */
.spd-site-header.is-scrolled .spd-brand__logo { height: 32px; }
.spd-site-header.is-scrolled .spd-brand--header .spd-brand__logo .spd-brand__img { height: 32px !important; }
@media (min-width: 640px) {
  .spd-site-header.is-scrolled .spd-brand__logo { height: 36px; }
  .spd-site-header.is-scrolled .spd-brand--header .spd-brand__logo .spd-brand__img { height: 36px !important; }
}
/* Shrink logo when header is scrolled (matches React isScrolled -> size 'sm') */
.spd-site-header.is-scrolled .spd-brand__logo { height: 32px; }
@media (min-width: 640px) {
  .spd-site-header.is-scrolled .spd-brand__logo { height: 36px; }
}

/* ============================================================
   5. Desktop navigation
   ============================================================ */
.spd-nav {
  display: none;
  align-items: center;
  gap: 0.375rem;
  font-weight: var(--spd-font-weight-semibold);
  font-size: var(--spd-font-size-xs);
}
.spd-nav__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.spd-nav__item { position: relative; padding: 0.25rem 0; }
.spd-nav__link,
.spd-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  border-radius: var(--spd-radius-md);
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: var(--spd-font-weight-semibold);
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color var(--spd-transition-fast), background-color var(--spd-transition-fast);
}
.spd-nav__link:hover,
.spd-nav__trigger:hover { color: var(--spd-blue); background: #F8FAFC; }
.spd-nav__link:focus-visible,
.spd-nav__trigger:focus-visible { outline: none; box-shadow: var(--spd-focus-ring); }
.spd-nav__chevron { width: 13px; height: 13px; transition: transform var(--spd-transition-fast); }
.spd-nav__item.is-open .spd-nav__chevron { transform: rotate(180deg); }

/* Active state — plain items (no children): blue text + red underline, NO background */
.spd-nav__item:not(.has-children) > .spd-nav__link.is-active {
  color: var(--spd-blue);
  font-weight: var(--spd-font-weight-bold);
  background: transparent;
}
.spd-nav__item:not(.has-children) > .spd-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0.625rem;
  right: 0.625rem;
  bottom: 0;
  height: 2px;
  background: var(--spd-red);
  border-radius: 2px;
}
/* Active state — dropdown trigger (has children): blue text + light blue bg, NO underline */
.spd-nav__item.has-children > .spd-nav__link.is-active,
.spd-nav__item.has-children > .spd-nav__trigger.is-active {
  color: var(--spd-blue);
  font-weight: var(--spd-font-weight-bold);
  background: var(--spd-blue-light);
}
.spd-nav__badge {
  margin-left: 0.25rem;
  font-size: 9px;
  font-weight: var(--spd-font-weight-black);
  background: #FDECEB;
  color: var(--spd-red);
  padding: 0.125rem 0.375rem;
  border-radius: var(--spd-radius-full);
}

/* Dropdown (standard WP <ul class="sub-menu spd-nav__dropdown">) */
.spd-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 18rem;
  background: var(--spd-surface);
  border: 1px solid var(--spd-border);
  border-radius: var(--spd-radius-xl);
  box-shadow: var(--spd-shadow-xl);
  padding: 0.5rem;
  margin: 0;
  list-style: none;
  z-index: var(--spd-z-dropdown);
  display: none;
}
.spd-nav__item.has-children:hover > .spd-nav__dropdown,
.spd-nav__item.has-children:focus-within > .spd-nav__dropdown,
.spd-nav__item.has-children.is-open > .spd-nav__dropdown { display: block; }

/* Dropdown entrance — reproduces the React "animate-in fade-in
   slide-in-from-top-2 duration-150" (opacity 0→1 + translateY -8px→0,
   150ms ease). The keyframe plays once when the panel goes from
   display:none to display:block, matching the React mount behavior. */
@keyframes spd-dropdown-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.spd-nav__item.has-children:hover > .spd-nav__dropdown,
.spd-nav__item.has-children:focus-within > .spd-nav__dropdown,
.spd-nav__item.has-children.is-open > .spd-nav__dropdown {
  animation: spd-dropdown-in 150ms ease;
}
.spd-nav__item.has-children:hover > .spd-nav__link .spd-nav__chevron,
.spd-nav__item.has-children:focus-within > .spd-nav__link .spd-nav__chevron,
.spd-nav__item.has-children.is-open > .spd-nav__link .spd-nav__chevron { transform: rotate(180deg); }
.spd-nav__dropdown > li { list-style: none; }
.spd-nav__dropdown > li.spd-nav__dropdown-all { border-bottom: 1px solid var(--spd-border); margin-bottom: 0.25rem; padding-bottom: 0.25rem; }
.spd-nav__dropdown-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  padding: 0.625rem;
  border-radius: var(--spd-radius-lg);
  color: var(--spd-text);
  text-decoration: none;
  transition: background-color var(--spd-transition-fast);
}
.spd-nav__dropdown-link:hover { background: var(--spd-blue-light); }
.spd-nav__dropdown-link:focus-visible { outline: none; box-shadow: var(--spd-focus-ring); }
.spd-nav__dropdown-title { font-size: var(--spd-font-size-sm); font-weight: var(--spd-font-weight-bold); color: #1E293B; }
.spd-nav__dropdown-link:hover .spd-nav__dropdown-title { color: var(--spd-blue); }
.spd-nav__dropdown-desc { font-size: 11px; color: var(--spd-text-muted); margin-top: 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 1024px) {
  .spd-nav { display: flex; }
  .spd-nav__list { gap: 0.75rem; }
  .spd-nav__link, .spd-nav__trigger { padding: 0.375rem 0.625rem; font-size: var(--spd-font-size-sm); }
}
@media (min-width: 1280px) {
  .spd-nav__list { gap: 1rem; }
  .spd-nav__link, .spd-nav__trigger { padding: 0.375rem 0.75rem; }
}

/* ============================================================
   6. Action cluster (search, wishlist, account, cart)
   ============================================================ */
.spd-search-trigger {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: #F8FAFC;
  border: 1px solid var(--spd-border);
  border-radius: var(--spd-radius-full);
  padding: 0.375rem 0.75rem;
  color: var(--spd-text-muted);
  font-size: var(--spd-font-size-xs);
  cursor: pointer;
  width: 9rem;
  flex-shrink: 0;
  overflow: hidden;
  transition: background-color var(--spd-transition-fast), border-color var(--spd-transition-fast), color var(--spd-transition-fast);
}
.spd-search-trigger:hover { background: #fff; color: var(--spd-text); border-color: rgba(0, 79, 159, 0.5); }
.spd-search-trigger:focus-visible { outline: none; box-shadow: var(--spd-focus-ring); }
.spd-search-trigger .spd-icon { width: 14px; height: 14px; color: var(--spd-text-muted); flex-shrink: 0; }
.spd-search-trigger__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.spd-search-trigger__hint {
  margin-left: auto;
  font-size: 9px;
  background: #fff;
  border: 1px solid var(--spd-border);
  color: var(--spd-text-muted);
  padding: 0.125rem 0.375rem;
  border-radius: var(--spd-radius-sm);
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
}
@media (min-width: 1280px) { .spd-search-trigger { display: inline-flex; } }
@media (min-width: 1536px) { .spd-search-trigger { width: 12rem; } }

.spd-action { position: relative; flex-shrink: 0; }
.spd-action__badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.125rem;
  border-radius: var(--spd-radius-full);
  background: var(--spd-red);
  color: #fff;
  font-size: 9px;
  font-weight: var(--spd-font-weight-black);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px #fff;
}
.spd-action__badge:empty { display: none; }

/* Phase 9E — toast feedback for the wishlist toggle (React sonner
   equivalent). Created by spd-account.js on any page that renders a
   wishlist heart, so it lives in the global shell. */
.spd-toast {
  position: fixed;
  left: 50%;
  bottom: var(--spd-space-6, 2rem);
  transform: translateX(-50%) translateY(1rem);
  background: var(--spd-text, #0F172A);
  color: #fff;
  font-family: var(--spd-font-family);
  font-size: var(--spd-font-size-sm);
  font-weight: var(--spd-font-weight-medium);
  padding: 0.75rem 1.5rem;
  border-radius: var(--spd-radius-full);
  box-shadow: var(--spd-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
  max-width: calc(100vw - 2rem);
  text-align: center;
}
.spd-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .spd-toast { transition: none; }
}
.spd-action--cart .spd-action__badge { top: -0.25rem; right: -0.375rem; box-shadow: 0 0 0 2px var(--spd-blue); }
.spd-account__dot {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--spd-radius-full);
  background: var(--spd-success);
  box-shadow: 0 0 0 2px #fff;
}

/* Cart button (pill on sm+, icon on mobile) */
.spd-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 0;
  background: transparent;
  color: var(--spd-text);
  border-radius: var(--spd-radius-full);
  padding: 0.375rem;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background-color var(--spd-transition-fast), color var(--spd-transition-fast);
}
.spd-cart-btn:hover { background: #F1F5F9; color: var(--spd-blue); }
.spd-cart-btn:focus-visible { outline: none; box-shadow: var(--spd-focus-ring); }
.spd-cart-btn__label { display: none; }
@media (min-width: 640px) {
  .spd-cart-btn {
    background: var(--spd-blue);
    color: #fff;
    border-radius: var(--spd-radius-lg);
    padding: 0.5rem 0.875rem;
  }
  .spd-cart-btn:hover { background: var(--spd-blue-dark); color: #fff; }
  .spd-cart-btn__label { display: inline; font-size: var(--spd-font-size-xs); font-weight: var(--spd-font-weight-bold); }
}

/* ============================================================
   7. Mobile bottom navigation
   ============================================================ */
.spd-mobile-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--spd-z-sticky);
  background: var(--spd-surface);
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  padding: 0.375rem 0.375rem max(0.5rem, env(safe-area-inset-bottom));
  user-select: none;
}
.spd-mobile-nav__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 32rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
}
.spd-mobile-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 44px;
  padding: 0.375rem 0.125rem;
  border-radius: var(--spd-radius-lg);
  color: var(--spd-text-muted);
  text-decoration: none;
  font-size: 10px;
  font-weight: var(--spd-font-weight-medium);
  letter-spacing: -0.01em;
  transition: color var(--spd-transition-fast);
}
.spd-mobile-nav__link .spd-icon { width: 20px; height: 20px; stroke-width: 1.75; }
.spd-mobile-nav__link:hover { color: var(--spd-text); }
.spd-mobile-nav__link:focus-visible { outline: none; box-shadow: var(--spd-focus-ring); }
.spd-mobile-nav__link.is-active { color: var(--spd-blue); font-weight: var(--spd-font-weight-bold); }
.spd-mobile-nav__link.is-active .spd-icon { stroke-width: 2.5; }
@media (min-width: 640px) {
  .spd-mobile-nav__link { font-size: 11px; }
}
@media (min-width: 1024px) {
  .spd-mobile-nav { display: none; }
}

/* Make space on mobile so the fixed bottom nav never hides content */
@media (max-width: 1023.98px) {
  .site-content { padding-bottom: 4.25rem; }
  html { scroll-padding-bottom: 4.5rem; }
}

/* ============================================================
   8. Search overlay modal
   ============================================================ */
.spd-search {
  position: fixed;
  inset: 0;
  z-index: var(--spd-z-modal);
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--spd-transition-normal), visibility var(--spd-transition-normal);
}
.spd-search.is-open { opacity: 1; visibility: visible; }
.spd-search__panel {
  background: var(--spd-surface);
  border: 1px solid var(--spd-border);
  border-radius: var(--spd-radius-2xl);
  box-shadow: var(--spd-shadow-xl);
  width: 100%;
  max-width: 42rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: transform var(--spd-transition-normal);
}
.spd-search.is-open .spd-search__panel { transform: translateY(0) scale(1); }
.spd-search__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid #F1F5F9;
}
.spd-search__head .spd-icon { color: var(--spd-blue); width: 22px; height: 22px; }
.spd-search__input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--spd-font-family);
  font-size: var(--spd-font-size-base);
  font-weight: var(--spd-font-weight-semibold);
  color: var(--spd-text);
}
.spd-search__input::placeholder { color: #94A3B8; font-weight: var(--spd-font-weight-normal); }
.spd-search__input:focus { outline: none; }
.spd-search__clear {
  border: 0; background: transparent; color: var(--spd-text-muted); cursor: pointer; padding: 0.25rem;
  border-radius: var(--spd-radius-full);
}
.spd-search__clear:hover { color: var(--spd-text); }
.spd-search__esc {
  border: 0; cursor: pointer;
  background: #F1F5F9; color: var(--spd-text-muted);
  font-size: var(--spd-font-size-xs); font-weight: var(--spd-font-weight-bold);
  padding: 0.375rem 0.625rem; border-radius: var(--spd-radius-md);
  flex-shrink: 0;
}
.spd-search__esc:hover { background: #E2E8F0; color: var(--spd-text); }
.spd-search__body { padding: 1rem; overflow-y: auto; }
.spd-search__label {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: var(--spd-font-size-xs); font-weight: var(--spd-font-weight-bold);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--spd-text-muted);
  margin-bottom: 0.75rem;
}
.spd-search__label .spd-icon { width: 13px; height: 13px; }
.spd-search__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.spd-search__chip {
  border: 0; cursor: pointer;
  background: #F1F5F9; color: #334155;
  font-size: var(--spd-font-size-xs); font-weight: var(--spd-font-weight-semibold);
  padding: 0.375rem 0.75rem; border-radius: var(--spd-radius-lg);
  transition: background-color var(--spd-transition-fast), color var(--spd-transition-fast);
}
.spd-search__chip:hover { background: var(--spd-blue-light); color: var(--spd-blue); }
.spd-search__chip:focus-visible { outline: none; box-shadow: var(--spd-focus-ring); }
.spd-search__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 1rem; background: #F8FAFC; border-top: 1px solid #F1F5F9;
}
.spd-search__footer-hint { font-size: var(--spd-font-size-xs); color: var(--spd-text-muted); }
.spd-search__submit {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: var(--spd-blue); color: #fff; border: 0; cursor: pointer;
  font-size: var(--spd-font-size-xs); font-weight: var(--spd-font-weight-bold);
  padding: 0.5rem 1rem; border-radius: var(--spd-radius-lg);
  transition: background-color var(--spd-transition-fast);
}
.spd-search__submit:hover { background: var(--spd-blue-dark); }
.spd-search__submit:focus-visible { outline: none; box-shadow: var(--spd-focus-ring); }
@media (min-width: 640px) {
  .spd-search__head { padding: 1.25rem; }
  .spd-search__body { padding: 1.5rem; }
  .spd-search__input { font-size: var(--spd-font-size-lg); }
  .spd-search__footer { padding: 1rem; }
}

/* ============================================================
   9. Cart drawer — React CartDrawer.tsx (Phase 6C)
   ============================================================
   Structure (the freeship strip, items list, footer and empty state
   all render inside the fragment-swapped
   div.widget_shopping_cart_content → always server-fresh):
     .spd-drawer-freeship     → free-shipping progress strip
     ul.woocommerce-mini-cart → the scrollable items list
     .spd-drawer-foot         → subtotal + note + CTAs
     .spd-drawer-empty        → shared empty-state component
   ============================================================ */
.spd-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--spd-z-modal);
  background: rgba(15, 23, 42, 0.6);       /* bg-slate-900/60 */
  backdrop-filter: blur(4px);              /* computed React: blur(4px) */
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--spd-transition-normal), visibility var(--spd-transition-normal);
}
.spd-cart-drawer.is-open { opacity: 1; visibility: visible; }

/* Panel — React: bg-white w-full max-w-md h-full shadow-2xl
   flex flex-col justify-between slide-in-from-right. */
.spd-cart-drawer__panel {
  background: var(--spd-surface);
  width: 100%;
  max-width: 448px;                        /* max-w-md — px not rem: Astra shrinks html{font-size} ≤921px */
  height: 100%;
  box-shadow: var(--spd-shadow-xl);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--spd-transition-slow);
}
.spd-cart-drawer.is-open .spd-cart-drawer__panel { transform: translateX(0); }

/* Header — React: p-4 sm:p-5 border-b border-slate-100
   flex items-center justify-between. */
.spd-cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #F1F5F9;
}
@media (min-width: 640px) {
  .spd-cart-drawer__head { padding: 20px; }
}
.spd-cart-drawer__title {
  display: flex; align-items: center; gap: 8px;
  font-weight: var(--spd-font-weight-extrabold);
  font-size: 16px;                         /* text-base */
  color: var(--spd-text);
}
@media (min-width: 640px) {
  .spd-cart-drawer__title { font-size: 18px; }  /* sm:text-lg */
}
.spd-cart-drawer__title .spd-icon { width: 20px; height: 20px; color: var(--spd-blue); display: block; }
.spd-cart-drawer__close {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: #94A3B8; cursor: pointer;
  padding: 6px;                            /* p-1.5 */
  border-radius: var(--spd-radius-full);
  box-shadow: none;                        /* beats Astra's button{box-shadow} */
  transition: color var(--spd-transition-fast), background-color var(--spd-transition-fast);
}
/* Pseudo-class variants beat Astra's button:hover/:focus (0,1,1)
   which would otherwise paint the button blue when focused. */
.spd-cart-drawer__close:hover { background: #F1F5F9; color: #334155; }
.spd-cart-drawer__close:focus { background: transparent; color: #94A3B8; box-shadow: none; }
.spd-cart-drawer__close:focus-visible { outline: none; box-shadow: var(--spd-focus-ring); }
.spd-cart-drawer__close .spd-icon { width: 20px; height: 20px; display: block; }

/* Body — React: the panel is flex-col; only the items list scrolls
   (the freeship strip and the footer stay pinned). */
.spd-cart-drawer__body {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.spd-cart-drawer__body .widget_shopping_cart_content {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Free-shipping strip — React: bg-[#F8FAFC]
   border-b border-slate-100 p-4 ---------- */
.spd-drawer-freeship {
  flex-shrink: 0;
  padding: 16px;
  background-color: #F8FAFC;
  border-bottom: 1px solid #F1F5F9;
}
.spd-drawer-freeship__text {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
  font-size: 12px;                          /* text-xs */
  font-weight: var(--spd-font-weight-semibold);
  line-height: 1.45;
}
.spd-drawer-freeship__msg { display: inline-flex; align-items: center; gap: 6px; color: #334155; }
.spd-drawer-freeship__msg--success { color: #047857; font-weight: var(--spd-font-weight-bold); }
.spd-drawer-freeship__icon { display: inline-flex; flex-shrink: 0; color: #0F5B94; }
.spd-drawer-freeship__icon .spd-icon { width: 14px; height: 14px; display: block; }
.spd-drawer-freeship__msg--success .spd-drawer-freeship__icon { color: #059669; }
.spd-drawer-freeship__msg--success .spd-icon { width: 15px; height: 15px; }
.spd-drawer-freeship__amount { color: #0F5B94; font-weight: var(--spd-font-weight-extrabold); }
.spd-drawer-freeship__amount .amount,
.spd-drawer-freeship__amount .spd-price { font-weight: inherit; color: inherit; }
.spd-drawer-freeship__percent { flex-shrink: 0; color: #94A3B8; font-weight: var(--spd-font-weight-bold); font-variant-numeric: tabular-nums; }
.spd-drawer-freeship__bar { width: 100%; height: 8px; background: #E2E8F0; border-radius: 9999px; overflow: hidden; }
.spd-drawer-freeship__fill {
  height: 100%;
  background: #0F5B94;
  border-radius: 9999px;
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);  /* duration-500 */
}
.spd-drawer-freeship--reached .spd-drawer-freeship__fill { background: #10B981; }

/* ---------- Items list — React: flex-1 overflow-y-auto
   p-4 sm:p-5 divide-y divide-slate-100 ---------- */
.spd-cart-drawer .woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 16px;
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
}
@media (min-width: 640px) {
  .spd-cart-drawer .woocommerce-mini-cart { padding: 20px; }
}

/* Item — React: py-4 flex gap-3.5 first:pt-0 last:pb-0. */
.spd-cart-drawer .woocommerce-mini-cart-item.spd-drawer-item {
  display: flex;
  gap: 14px;                                /* gap-3.5 */
  padding: 16px 0;
  margin: 0;
  border: 0;
}
.spd-cart-drawer .spd-drawer-item + .spd-drawer-item { border-top: 1px solid #F1F5F9; }
.spd-cart-drawer .spd-drawer-item:first-child { padding-top: 0; }
.spd-cart-drawer .spd-drawer-item:last-of-type { padding-bottom: 0; }

/* Thumb — React: w-16 h-16 rounded-xl bg-slate-50
   border border-slate-200/80 p-1, img object-contain. */
.spd-drawer-item__thumb {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 64px; height: 64px;                /* w-16 h-16 */
  padding: 4px;                             /* p-1 */
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;                      /* rounded-xl */
  overflow: hidden;
}
/* Long selectors beat WC's ul.product_list_widget li img/a rules
   (0,2,2) which would position the img absolutely at the li corner. */
.spd-cart-drawer .woocommerce-mini-cart li.spd-drawer-item .spd-drawer-item__thumb a {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
}
.spd-cart-drawer .woocommerce-mini-cart li.spd-drawer-item .spd-drawer-item__thumb img {
  position: static; float: none;
  width: 100%; height: 100%;
  object-fit: contain; margin: 0;
  box-shadow: none;
}

/* Body — React: flex-1 flex flex-col justify-between. */
.spd-drawer-item__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.spd-drawer-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.spd-drawer-item__meta { min-width: 0; }

/* Name — React: text-xs sm:text-sm font-bold text-slate-900
   line-clamp-1. */
.spd-drawer-item__name {
  margin: 0;
  font-size: 12px;                          /* text-xs */
  font-weight: var(--spd-font-weight-bold);
  line-height: 1.4;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 640px) {
  .spd-drawer-item__name { font-size: 14px; }  /* sm:text-sm */
}
.spd-drawer-item__name a { color: inherit; text-decoration: none; }
.spd-drawer-item__name a:hover { color: #0F5B94; }

/* Variation pill — native dl.variation styled as the React pill:
   inline-block my-0.5 text-[10px] font-bold text-[#0F5B94]
   bg-[#EBF3F9] px-2 py-0.5 rounded-md. Same approach as the
   cart page (6A). */
.spd-cart-drawer .woocommerce-mini-cart-item .variation {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  margin: 2px 0;
  padding: 2px 8px;
  background-color: #EBF3F9;
  border-radius: 6px;
  color: #0F5B94;
  font-size: 10px;                          /* text-[10px] */
  font-weight: var(--spd-font-weight-bold);
  line-height: 1.5;
}
.spd-cart-drawer .woocommerce-mini-cart-item .variation dt,
.spd-cart-drawer .woocommerce-mini-cart-item .variation dd {
  display: inline; margin: 0; padding: 0; border: 0;
  font-style: normal; font-weight: inherit; color: inherit;
}
.spd-cart-drawer .woocommerce-mini-cart-item .variation dd p { display: inline; margin: 0; }

/* Unit line — React: text-[11px] text-slate-400 block
   "{unit} • {price} FCFA / unité". */
.spd-drawer-item__unit {
  display: block;
  font-size: 11px;                          /* text-[11px] */
  line-height: 1.5;
  color: #94A3B8;
}
.spd-drawer-item__unit .amount,
.spd-drawer-item__unit .spd-price { font-weight: inherit; color: inherit; }

/* Remove — React: text-slate-400 hover:text-rose-600 p-1,
   Trash2 size={15}. Neutralises WC/Astra's a.remove styling
   (the native .cart_list li a.remove rule positions it
   absolutely and .woocommerce a.remove draws a red circle on
   hover with !important — the long selector + the hover
   !important below beat both). */
.spd-cart-drawer .woocommerce-mini-cart li.spd-drawer-item a.remove.spd-drawer-item__remove {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto; height: auto;
  padding: 4px;                             /* p-1 */
  margin: 0;
  border: 0; border-radius: 0;
  background: transparent;
  color: #94A3B8;
  font-size: 0;                             /* hide the × fallback text */
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transition: color var(--spd-transition-fast);
}
/* Astra draws a remove "chip" via a.remove::before (absolute inset-0
   circle); with the link reset to position:static it resolves against
   the relative li and paints a giant ellipse over the row — kill it. */
.spd-cart-drawer .woocommerce-mini-cart li.spd-drawer-item a.remove.spd-drawer-item__remove::before { display: none; }
.spd-cart-drawer .woocommerce-mini-cart li.spd-drawer-item a.remove.spd-drawer-item__remove:hover,
.spd-cart-drawer .woocommerce-mini-cart li.spd-drawer-item a.remove.spd-drawer-item__remove:focus-visible {
  background: transparent !important;       /* beats .woocommerce a.remove:hover !important */
  color: #E11D48 !important;                /* rose-600 */
}
.spd-cart-drawer .spd-drawer-item__remove .spd-icon { width: 15px; height: 15px; display: block; }

/* Native backorder notice — kept readable. */
.spd-cart-drawer .spd-drawer-item .backorder_notification {
  display: block;
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: var(--spd-font-weight-semibold);
  color: var(--spd-warning);
}

/* Bottom row — React: flex items-center justify-between mt-2. */
.spd-drawer-item__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

/* QuantitySelector size="sm" — React: inline-flex border
   border-slate-200 rounded-xl bg-white shadow-xs overflow-hidden,
   buttons w-7 h-7 (icons 13), value w-8 text-xs. The REAL
   input.qty stays the source of truth. */
.spd-cart-drawer .quantity {
  float: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid #E2E8F0;
  border-radius: 12px;                      /* rounded-xl */
  background-color: #FFFFFF;
  box-shadow: var(--spd-shadow-xs);
  overflow: hidden;
  user-select: none;
  margin: 0;
  width: auto;
}
.spd-cart-drawer .quantity .spd-qty__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px;                              /* w-7 */
  height: 28px;                             /* h-7 */
  padding: 0; margin: 0;
  border: none; border-radius: 0; background: none;
  color: #475569;
  cursor: pointer;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.spd-cart-drawer .quantity .spd-qty__btn:hover { background-color: #F1F5F9; color: #0F172A; }
.spd-cart-drawer .quantity .spd-qty__btn:active { background-color: #E2E8F0; }
.spd-cart-drawer .quantity .spd-qty__btn:disabled { opacity: 0.4; pointer-events: none; }
.spd-cart-drawer .quantity .spd-qty__btn:focus-visible { outline: 2px solid #0F5B94; outline-offset: -2px; }
.spd-cart-drawer .quantity .spd-qty__btn .spd-icon { width: 13px; height: 13px; display: block; }
.spd-cart-drawer .quantity input.qty {
  float: none;
  width: 32px;                              /* w-8 */
  height: 28px;
  padding: 0; margin: 0;
  border: none; border-radius: 0;
  background: none; box-shadow: none;
  font-size: 12px;                          /* text-xs */
  font-weight: var(--spd-font-weight-bold);
  line-height: 1.5;
  color: #0F172A;
  text-align: center;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}
.spd-cart-drawer .quantity input.qty::-webkit-outer-spin-button,
.spd-cart-drawer .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.spd-cart-drawer .quantity input.qty:focus-visible { outline: 2px solid #0F5B94; outline-offset: -2px; }
.spd-cart-drawer .quantity .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Line total — React: font-extrabold text-sm text-[#D93829]. */
.spd-drawer-item__total {
  flex-shrink: 0;
  font-size: 14px;                          /* text-sm */
  font-weight: var(--spd-font-weight-extrabold);
  color: #D93829;
  font-variant-numeric: tabular-nums;
}
.spd-drawer-item__total .amount,
.spd-drawer-item__total .spd-price { font-weight: inherit; color: inherit; }

/* ---------- Footer — React: p-4 sm:p-5 border-t
   border-slate-100 bg-slate-50 space-y-3 ---------- */
.spd-drawer-foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;                                /* space-y-3 */
  padding: 16px;
  background-color: #F8FAFC;
  border-top: 1px solid #F1F5F9;
}
@media (min-width: 640px) {
  .spd-drawer-foot { padding: 20px; }
}
.spd-drawer-foot > * { margin: 0; }

/* Subtotal — React: flex justify-between text-sm,
   label text-slate-600 font-medium, value font-extrabold
   text-base text-slate-900. The label/amount are printed by the
   native woocommerce_widget_shopping_cart_subtotal() ("Sous-total :"
   in the WC FR pack). */
.spd-drawer-subtotal {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px;                          /* text-sm */
  line-height: 1.5;
}
.spd-drawer-subtotal strong { font-weight: 500; color: #475569; }
.spd-drawer-subtotal .amount {
  font-size: 16px;                          /* text-base */
  font-weight: var(--spd-font-weight-extrabold);
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}

/* Note — React: text-[11px] text-slate-400. */
.spd-drawer-foot__note { font-size: 11px; color: #94A3B8; line-height: 1.5; }

/* CTAs — React: flex flex-col gap-2 pt-1.
   (the a.spd-drawer-btn selector level is required: Astra's
   a.button/WC's .button rules would otherwise repaint both CTAs
   in the Astra accent blue). */
.spd-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;                                 /* gap-2 */
  padding-top: 4px;                         /* pt-1 */
}
.spd-cart-drawer a.spd-drawer-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  border-radius: 12px;                      /* rounded-xl */
  text-decoration: none;
  transition: background-color var(--spd-transition-fast),
              color var(--spd-transition-fast),
              transform var(--spd-transition-fast);
}
/* Primary — React: py-3.5 bg-[#0F5B94] hover:bg-[#0A436D]
   text-white font-bold text-sm shadow-md active:scale-98. */
.spd-cart-drawer a.spd-drawer-btn--primary {
  padding: 14px;                            /* py-3.5 */
  background-color: #0F5B94;
  color: #FFFFFF;
  border: 0;
  font-size: 14px;
  font-weight: var(--spd-font-weight-bold);
  line-height: 1.4;
  box-shadow: var(--spd-shadow-md);
}
.spd-cart-drawer a.spd-drawer-btn--primary:hover,
.spd-cart-drawer a.spd-drawer-btn--primary:focus-visible { background-color: #0A436D; color: #FFFFFF; }
.spd-cart-drawer a.spd-drawer-btn--primary:active { transform: scale(0.98); }
.spd-cart-drawer a.spd-drawer-btn--primary .spd-icon { width: 16px; height: 16px; display: block; flex-shrink: 0; }
/* Ghost — React: py-2.5 bg-white hover:bg-slate-100 text-slate-700
   border border-slate-200 font-semibold text-xs. */
.spd-cart-drawer a.spd-drawer-btn--ghost {
  padding: 10px;                            /* py-2.5 */
  background-color: #FFFFFF;
  color: #334155;
  border: 1px solid #E2E8F0;
  font-size: 12px;
  font-weight: var(--spd-font-weight-semibold);
  line-height: 1.45;
}
.spd-cart-drawer a.spd-drawer-btn--ghost:hover,
.spd-cart-drawer a.spd-drawer-btn--ghost:focus-visible { background-color: #F1F5F9; color: #334155; }

/* ---------- Empty state — React: h-full centered col,
   shared .spd-empty-state component ('card' variant neutralised
   to the drawer's chrome-less layout) ---------- */
.spd-drawer-empty {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px;                       /* py-12 */
}
.spd-empty-state--drawer {
  max-width: none;
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Icon tile — React: w-16 h-16 rounded-2xl bg-slate-100
   text-slate-400 mb-4, ShoppingBag size={28}. */
.spd-empty-state--drawer .spd-empty-state__icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background-color: #F1F5F9;                /* slate-100 */
  color: #94A3B8;                           /* slate-400 */
  margin-bottom: 16px;
}
.spd-empty-state--drawer .spd-empty-state__icon .spd-icon { width: 28px; height: 28px; }
/* Title — React: h4 text-base font-bold text-slate-800 mb-1. */
.spd-empty-state--drawer .spd-empty-state__title {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: var(--spd-font-weight-bold);
  letter-spacing: 0;
  color: #1E293B;
}
/* Desc — React: text-xs text-slate-500 max-w-xs mb-6. */
.spd-empty-state--drawer .spd-empty-state__desc {
  max-width: 320px;
  margin-bottom: 24px;
  font-size: 12px;
  color: #64748B;
}
/* CTA — React: px-5 py-2.5 bg-[#0F5B94] hover:bg-[#0A436D]
   text-white font-bold text-xs rounded-xl shadow-xs. */
.spd-empty-state--drawer .spd-empty-state__btn {
  height: auto;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: var(--spd-font-weight-bold);
  box-shadow: var(--spd-shadow-xs);
}

/* WC-inactive fallback (spd_render_mini_cart early return). */
.spd-cart-drawer__empty { text-align: center; padding: 2rem 1rem; color: var(--spd-text-muted); }
.spd-cart-drawer__empty .spd-icon { width: 32px; height: 32px; color: var(--spd-border-dark); margin-bottom: 0.75rem; }
.spd-cart-drawer__empty-cta { display: inline-block; margin-top: 1rem; background: var(--spd-blue); color: #fff; padding: 0.625rem 1.25rem; border-radius: var(--spd-radius-lg); font-weight: var(--spd-font-weight-bold); font-size: var(--spd-font-size-xs); text-decoration: none; }
.spd-cart-drawer__empty-cta:hover { background: var(--spd-blue-dark); color: #fff; }

/* ============================================================
   10. WhatsApp floating widget
   ============================================================ */
.spd-whatsapp {
  position: fixed;
  bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  right: 1rem;
  z-index: var(--spd-z-drawer);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}
@media (min-width: 640px) { .spd-whatsapp { right: 1.25rem; } }
@media (min-width: 1024px) { .spd-whatsapp { bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); } }

/* Coordinate with Astra back-to-top: keep it stacked above the WhatsApp FAB. */
#ast-scroll-top {
  right: 1rem !important;
  bottom: calc(8rem + env(safe-area-inset-bottom, 0px)) !important;
}
@media (min-width: 640px) { #ast-scroll-top { right: 1.25rem !important; } }
@media (min-width: 1024px) { #ast-scroll-top { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important; } }

.spd-whatsapp__fab {
  position: relative;
  width: 52px; height: 52px;
  min-width: 52px; min-height: 52px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #25D366; color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--spd-shadow-lg);
  box-sizing: border-box;
  transition: transform var(--spd-transition-fast), background-color var(--spd-transition-fast);
}
.spd-whatsapp__fab:hover { background: #1EBE5D; transform: scale(1.06); }
.spd-whatsapp__fab:focus-visible { outline: none; box-shadow: var(--spd-shadow-lg), var(--spd-focus-ring); }
.spd-whatsapp__fab svg { width: 28px; height: 28px; flex-shrink: 0; }

.spd-whatsapp__dot {
  position: absolute; top: -2px; right: -2px;
  width: 12px; height: 12px;
  min-width: 12px; min-height: 12px;
  border-radius: 50%;
  background: #D93829;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}

.spd-whatsapp__pop {
  position: absolute;
  bottom: calc(100% + 0.75rem);
  right: 0;
  width: calc(100vw - 2rem);
  max-width: 22rem;
  max-height: calc(100vh - 7rem - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px));
  background: var(--spd-surface);
  border: 1px solid var(--spd-border);
  border-radius: var(--spd-radius-xl);
  box-shadow: var(--spd-shadow-xl);
  overflow: hidden;
  display: none;
  flex-direction: column;
}
.spd-whatsapp.is-open .spd-whatsapp__pop { display: flex; }

.spd-whatsapp__pop-head { background: #075E54; color: #fff; padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.spd-whatsapp__pop-headinfo { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.spd-whatsapp__pop-head .spd-whatsapp__avatar { width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-weight: var(--spd-font-weight-black); }
.spd-whatsapp__pop-head h4 { margin: 0; font-size: var(--spd-font-size-sm); font-weight: var(--spd-font-weight-bold); line-height: 1.25; }
.spd-whatsapp__pop-head small { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 11px; color: #A7F3D0; }
.spd-whatsapp__status-dot { width: 6px; height: 6px; border-radius: 50%; background: #34D399; }
.spd-whatsapp__pop-close { background: transparent; border: 0; color: rgba(255,255,255,0.8); cursor: pointer; padding: 0.25rem; display: flex; align-items: center; justify-content: center; border-radius: var(--spd-radius-sm); }
.spd-whatsapp__pop-close:hover { color: #fff; }
.spd-whatsapp__pop-close:focus-visible { outline: none; box-shadow: var(--spd-focus-ring); }

.spd-whatsapp__pop-body { padding: 1rem; background: rgba(236, 229, 221, 0.4); font-size: var(--spd-font-size-xs); color: var(--spd-text); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.spd-whatsapp__pop-bubble { background: #fff; padding: 0.75rem; border-radius: var(--spd-radius-xl); border: 1px solid rgba(226,232,240,0.6); box-shadow: var(--spd-shadow-xs); }
.spd-whatsapp__pop-bubble p { margin: 0; }
.spd-whatsapp__pop-bubble p + p { margin-top: 0.25rem; color: var(--spd-text-muted); }

.spd-whatsapp__pop-quick { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.625rem; }
.spd-whatsapp__pop-quick a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  background: #fff; border: 1px solid var(--spd-border); color: var(--spd-text);
  padding: 0.625rem 0.75rem; border-radius: var(--spd-radius-lg); text-decoration: none;
  font-weight: var(--spd-font-weight-medium); font-size: var(--spd-font-size-xs);
  transition: border-color var(--spd-transition-fast), background-color var(--spd-transition-fast);
}
.spd-whatsapp__pop-quick a svg { width: 14px; height: 14px; color: #059669; flex-shrink: 0; }
.spd-whatsapp__pop-quick a:hover { background: #ECFDF5; border-color: #6EE7B7; color: #065F46; }

.spd-whatsapp__pop-cta { padding: 0.75rem; background: #fff; border-top: 1px solid #F1F5F9; flex-shrink: 0; }
.spd-whatsapp__pop-cta a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: #25D366; color: #fff; padding: 0.625rem; border-radius: var(--spd-radius-lg); font-weight: var(--spd-font-weight-bold); font-size: var(--spd-font-size-xs); text-decoration: none; }
.spd-whatsapp__pop-cta a:hover { background: #1EBE5D; color: #fff; }

/* ============================================================
   11. Footer
   ============================================================ */
.spd-footer {
  background: var(--spd-footer-bg);
  color: #CBD5E1;
  padding-top: 3.5rem;
  padding-bottom: 6rem;
  border-top: 1px solid #1E293B;
}
.spd-footer__inner { max-width: var(--spd-container-max); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .spd-footer__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .spd-footer { padding-bottom: 3rem; } }

/* Newsletter panel */
.spd-footer__newsletter {
  background: rgba(0, 79, 159, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--spd-radius-2xl);
  padding: 1.5rem;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.spd-footer__newsletter-text { max-width: 36rem; text-align: center; }
.spd-footer__newsletter-eyebrow { font-size: var(--spd-font-size-xs); text-transform: uppercase; font-weight: var(--spd-font-weight-extrabold); letter-spacing: 0.1em; color: var(--spd-gold); display: block; margin-bottom: 0.25rem; }
.spd-footer__newsletter-title { font-size: var(--spd-font-size-xl); font-weight: var(--spd-font-weight-bold); color: #fff; margin: 0 0 0.5rem; }
.spd-footer__newsletter-text p { font-size: var(--spd-font-size-sm); color: #CBD5E1; margin: 0; }
.spd-footer__newsletter-form { width: 100%; max-width: 28rem; display: flex; flex-direction: column; gap: 0.5rem; }
.spd-footer__newsletter-row { display: flex; flex-direction: column; gap: 0.5rem; }
.spd-footer__newsletter-input {
  flex: 1; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); color: #fff;
  border-radius: var(--spd-radius-lg); padding: 0.75rem 1rem; font-family: var(--spd-font-family); font-size: var(--spd-font-size-sm);
}
.spd-footer__newsletter-input::placeholder { color: #94A3B8; }
.spd-footer__newsletter-input:focus { outline: none; box-shadow: 0 0 0 2px var(--spd-gold); border-color: var(--spd-gold); }
.spd-footer__newsletter-submit {
  background: var(--spd-red); color: #fff; border: 0; cursor: pointer;
  border-radius: var(--spd-radius-lg); padding: 0.75rem 1.25rem;
  font-weight: var(--spd-font-weight-bold); font-size: var(--spd-font-size-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  box-shadow: var(--spd-shadow-md);
  transition: background-color var(--spd-transition-fast); flex-shrink: 0;
}
.spd-footer__newsletter-submit:hover { background: var(--spd-red-dark); }
.spd-footer__newsletter-msg { font-size: var(--spd-font-size-sm); font-weight: var(--spd-font-weight-semibold); }
.spd-footer__newsletter-msg.is-ok { color: #6EE7B7; }
.spd-footer__newsletter-msg.is-err { color: #FCA5A5; }
@media (min-width: 768px) {
  .spd-footer__newsletter { padding: 2.5rem; }
  .spd-footer__newsletter-title { font-size: var(--spd-font-size-2xl); }
}
@media (min-width: 1024px) {
  .spd-footer__newsletter { flex-direction: row; align-items: center; }
  .spd-footer__newsletter-text { text-align: left; }
  .spd-footer__newsletter-row { flex-direction: row; }
}

/* Footer columns — 5-col grid at lg (brand spans 2 + 3 link columns) */
.spd-footer__cols {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  padding-bottom: 3rem; border-bottom: 1px solid var(--spd-footer-border);
}
.spd-footer__links { display: grid; grid-template-columns: 1fr; gap: 2rem; align-content: start; }
.spd-footer__brand-col { display: flex; flex-direction: column; gap: 1rem; }
.spd-footer__logo-card { background: #fff; padding: 0.625rem 0.875rem; border-radius: var(--spd-radius-xl); display: inline-block; box-shadow: var(--spd-shadow-sm); align-self: flex-start; max-width: 100%; }
.spd-footer__logo-card .spd-brand__logo { height: 44px; }
/* Strong constraints: footer logo must never be resized by global theme rules. */
.spd-brand--footer .spd-brand__logo .spd-brand__img {
  height: 44px !important;
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain !important;
}
@media (max-width: 639px) {
  .spd-footer__logo-card .spd-brand__logo { height: 36px; }
  .spd-brand--footer .spd-brand__logo .spd-brand__img { height: 36px !important; }
}
.spd-footer__slogan { font-size: var(--spd-font-size-sm); color: #94A3B8; line-height: 1.625; max-width: 24rem; }
.spd-footer__contact { display: flex; flex-direction: column; gap: 0.5rem; font-size: var(--spd-font-size-sm); color: #CBD5E1; }
.spd-footer__contact-item { display: flex; align-items: flex-start; gap: 0.625rem; }
.spd-footer__contact-item .spd-icon { color: var(--spd-gold); width: 16px; height: 16px; margin-top: 0.125rem; flex-shrink: 0; }
.spd-footer__wa-pill {
  display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start;
  background: rgba(37, 211, 102, 0.16); color: #25D366; border: 1px solid rgba(37, 211, 102, 0.40);
  padding: 0.5rem 0.875rem; border-radius: var(--spd-radius-lg); font-size: var(--spd-font-size-xs);
  font-weight: var(--spd-font-weight-bold); text-decoration: none; transition: background-color var(--spd-transition-fast);
}
.spd-footer__wa-pill:hover { background: rgba(37, 211, 102, 0.26); color: #25D366; }
.spd-footer__wa-pill .spd-icon { width: 16px; height: 16px; }

.spd-footer__col h4 { color: #fff; font-weight: var(--spd-font-weight-bold); font-size: var(--spd-font-size-sm); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.75rem; }
.spd-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: var(--spd-font-size-sm); }
.spd-footer__col a { color: #94A3B8; text-decoration: none; transition: color var(--spd-transition-fast); }
.spd-footer__col a:hover { color: #fff; }
.spd-footer__col a:focus-visible { outline: none; box-shadow: var(--spd-focus-ring); border-radius: var(--spd-radius-sm); }

@media (min-width: 768px) {
  .spd-footer__cols { grid-template-columns: 1fr 1fr; }
  .spd-footer__links { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .spd-footer__cols { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .spd-footer__links { display: contents; }
}

/* Footer bottom bar */
.spd-footer__bottom {
  padding-top: 2rem;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: var(--spd-font-size-xs); color: #94A3B8;
}
.spd-footer__bottom-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; justify-content: center; }
.spd-footer__bottom-links a { color: #94A3B8; text-decoration: none; }
.spd-footer__bottom-links a:hover { color: #fff; }
.spd-footer__pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; }
.spd-footer__pay-label { font-size: 11px; color: #64748B; margin-right: 0.25rem; }
.spd-footer__pay-badge { padding: 0.25rem 0.5rem; border-radius: var(--spd-radius-sm); font-weight: var(--spd-font-weight-bold); font-size: 10px; border: 1px solid #334155; background: #1E293B; color: #fff; }
.spd-footer__pay-badge--orange { background: rgba(255, 121, 0, 0.20); color: #FF7900; border-color: rgba(255, 121, 0, 0.30); }
.spd-footer__pay-badge--mtn { background: rgba(255, 204, 0, 0.20); color: #FFCC00; border-color: rgba(255, 204, 0, 0.30); }
.spd-footer__pay-badge--cash { background: #052e1f; color: #34D399; border-color: #065F46; }
@media (min-width: 768px) { .spd-footer__bottom { flex-direction: row; } }

/* ============================================================
   12. Body text size for header nav (matches lg:text-sm)
   ============================================================ */

/* ============================================================
   13. Reduced motion + print
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .spd-site-header, .spd-search, .spd-search__panel, .spd-cart-drawer, .spd-cart-drawer__panel,
  .spd-whatsapp__fab, .spd-nav__dropdown { transition: none !important; }
  .spd-nav__dropdown { animation: none !important; }
}
@media print {
  .spd-site-header, .spd-mobile-nav, .spd-whatsapp, .spd-search, .spd-cart-drawer { display: none !important; }
}

/* ============================================================
   14. Shared component — Breadcrumb (.spd-breadcrumb)
   ============================================================
   SINGLE VISUAL SOURCE OF TRUTH — used by shop, product category,
   product tag, search and single product via
   template-parts/components/breadcrumb.php (helper spd_breadcrumb()).
   Pages supply the DATA; this component supplies the APPEARANCE.

   Reproduces design-spd/src/components/common/Breadcrumb.tsx:
     nav : flex items-center text-xs md:text-sm text-slate-500 py-2,
           overflow-x-auto max-w-full touch-pan-x
     home : gap-1 + Home icon (14px, slate-400)
     item : flex items-center shrink-0
     sep  : ChevronRight 14px, mx-2, slate-300
     link : hover → #0F5B94, transition-colors
     current : font-semibold slate-800 truncate max-w-[200px]
               md:max-w-[320px]

   Values are in px (not rem) because Astra shrinks html{font-size}
   to 91.2% ≤921px while the React reference keeps fixed px.
   ============================================================ */

.spd-breadcrumb {
  display: flex;
  align-items: center;
  padding: 8px 0;                       /* React py-2 */
  margin: 0;
  font-size: 12px;                      /* React text-xs */
  line-height: 16px;                    /* Tailwind text-xs → lh 1rem */
  color: #64748B;                       /* text-slate-500 */
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;    /* React touch-pan-x */
}
@media (min-width: 768px) {
  .spd-breadcrumb {
    font-size: 14px;                    /* React md:text-sm */
    line-height: 20px;                  /* Tailwind text-sm → lh 1.25rem */
  }
}

.spd-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;                         /* permet le truncate du courant */
}

.spd-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--spd-transition-normal);
}
.spd-breadcrumb__link:hover,
.spd-breadcrumb__link:focus-visible {
  color: var(--spd-ui-blue);            /* React hover:text-[#0F5B94] */
  outline: none;
}

/* Home — React : flex items-center gap-1, Home size={14} text-slate-400 */
.spd-breadcrumb__link--home { gap: 4px; }   /* React gap-1 */
.spd-breadcrumb__home-icon {
  display: inline-flex;
  align-items: center;
  color: #94A3B8;                       /* text-slate-400 */
  flex-shrink: 0;
}
.spd-breadcrumb__home-icon .spd-icon { width: 14px; height: 14px; }

/* Séparateur — React : ChevronRight size={14} mx-2 text-slate-300 */
.spd-breadcrumb__separator {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;                     /* React mx-2 */
  margin-right: 8px;
  color: #CBD5E1;                       /* text-slate-300 */
  flex-shrink: 0;
}
.spd-breadcrumb__separator .spd-icon { width: 14px; height: 14px; }

/* Courant — React : font-semibold text-slate-800 truncate */
.spd-breadcrumb__current {
  font-weight: 600;                     /* font-semibold */
  color: #1E293B;                       /* text-slate-800 */
  max-width: 200px;                     /* React max-w-[200px] (mobile) */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .spd-breadcrumb__current { max-width: 320px; }   /* React md:max-w-[320px] */
}

/* ============================================================
   15. Shared component — EmptyState (.spd-empty-state)
       ============================================================
       Single source of truth for every empty state (empty cart,
       empty wishlist, no orders, no search results, FAQ without
       results…). Two variants rendered by
       template-parts/components/empty-state.php:

         --card → React EmptyState.tsx (white card, 64px tile,
                  h3 title, primary + ghost buttons).
         --page → React CartPage.tsx empty view (centered page
                  layout, 80px rounded-3xl tile, h1, primary CTA).
       ============================================================ */

/* ---------- Base ---------- */
.spd-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.spd-empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EBF3F9;              /* React bg-[#EBF3F9] */
  color: #0F5B94;                         /* React text-[#0F5B94] */
  flex-shrink: 0;
}

.spd-empty-state__title {
  margin: 0;
  font-weight: 800;                       /* font-extrabold */
  letter-spacing: -0.025em;               /* tracking-tight */
  color: #0F172A;                         /* slate-900 */
}

.spd-empty-state__desc {
  margin: 0;
  color: #64748B;                         /* slate-500 */
  line-height: 1.6;
}

.spd-empty-state__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;                              /* gap-3 */
  width: 100%;
}

@media (min-width: 640px) {
  .spd-empty-state__actions { flex-direction: row; justify-content: center; }
}

.spd-empty-state__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;                       /* font-semibold */
  text-decoration: none;
  border-radius: 12px;                    /* rounded-xl */
  transition: background-color var(--spd-transition-fast),
              color var(--spd-transition-fast);
}

/* ---------- Card variant — React EmptyState.tsx ---------- */
.spd-empty-state--card {
  max-width: 448px;                       /* max-w-md */
  margin-left: auto;
  margin-right: auto;
  padding: 32px;                          /* p-8 */
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;              /* slate-200 */
  border-radius: 16px;                    /* rounded-2xl */
  box-shadow: var(--spd-shadow-xs);
}

@media (min-width: 768px) {
  .spd-empty-state--card { padding: 48px; }  /* md:p-12 */
}

/* React: w-16 h-16 rounded-2xl icon mb-4 */
.spd-empty-state--card .spd-empty-state__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  margin-bottom: 16px;
}
.spd-empty-state--card .spd-empty-state__icon .spd-icon {
  width: 32px;
  height: 32px;
}

/* React: text-lg md:text-xl font-bold mb-2 */
.spd-empty-state--card .spd-empty-state__title {
  margin-bottom: 8px;
  font-size: 18px;
}
@media (min-width: 768px) {
  .spd-empty-state--card .spd-empty-state__title { font-size: 20px; }
}

/* React: text-sm leading-relaxed mb-6 max-w-xs */
.spd-empty-state--card .spd-empty-state__desc {
  max-width: 320px;
  margin-bottom: 24px;
  font-size: 14px;
}

/* React Button md primary — h-10 px-4 text-sm font-semibold
   bg-[#0F5B94] hover:bg-[#0A436D] text-white shadow-sm */
.spd-empty-state--card .spd-empty-state__btn {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
}
.spd-empty-state--card .spd-empty-state__btn--primary {
  background-color: #0F5B94;
  color: #FFFFFF;
  box-shadow: var(--spd-shadow-sm);
}
.spd-empty-state--card .spd-empty-state__btn--primary:hover,
.spd-empty-state--card .spd-empty-state__btn--primary:focus-visible {
  background-color: #0A436D;
  color: #FFFFFF;
}
.spd-empty-state--card .spd-empty-state__btn--ghost {
  background-color: transparent;
  color: #334155;                         /* slate-700 */
}
.spd-empty-state--card .spd-empty-state__btn--ghost:hover,
.spd-empty-state--card .spd-empty-state__btn--ghost:focus-visible {
  background-color: #F1F5F9;              /* slate-100 */
  color: #0F172A;
}

/* ---------- Page variant — React CartPage empty view ---------- */
/* Wrapper spacing comes from #spd-cart-empty-page (spd-cart.css)
   or the page using the variant. */
.spd-empty-state--page .spd-empty-state__icon {
  width: 80px;                            /* w-20 h-20 */
  height: 80px;
  border-radius: 24px;                    /* rounded-3xl */
  margin: 0 auto;
  box-shadow: var(--spd-shadow-xs);
}
.spd-empty-state--page .spd-empty-state__icon .spd-icon {
  width: 40px;                            /* size={40} */
  height: 40px;
}

.spd-empty-state--page .spd-empty-state__body {
  margin-top: 24px;                       /* space-y-6 child */
}

/* React: text-2xl sm:text-3xl font-extrabold */
.spd-empty-state--page .spd-empty-state__title {
  font-size: 24px;
}
@media (min-width: 640px) {
  .spd-empty-state--page .spd-empty-state__title { font-size: 30px; }
}

/* React: text-sm text-slate-500 max-w-md mx-auto */
.spd-empty-state--page .spd-empty-state__desc {
  max-width: 448px;
  margin: 8px auto 0;                     /* space-y-2 under title */
  font-size: 14px;
}

.spd-empty-state--page .spd-empty-state__actions {
  margin-top: 24px;
}

/* React CTA: px-6 py-3.5 bg-[#0F5B94] hover:bg-[#0A436D] text-white
   font-bold text-sm rounded-xl shadow-md inline-block */
.spd-empty-state--page .spd-empty-state__btn {
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 700;                       /* font-bold */
}
.spd-empty-state--page .spd-empty-state__btn--primary {
  background-color: #0F5B94;
  color: #FFFFFF;
  box-shadow: var(--spd-shadow-md);
}
.spd-empty-state--page .spd-empty-state__btn--primary:hover,
.spd-empty-state--page .spd-empty-state__btn--primary:focus-visible {
  background-color: #0A436D;
  color: #FFFFFF;
}