/*
Theme Name: Lumeastore
Theme URI: https://lumeastore.uk
Author: Lumea Skincare
Description: Luxury skincare ecommerce theme with rose-gold, plum and aurora aesthetics, dark mode, glassmorphism, and premium animations.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: lumeastore
*/

/* ============================================================
   CSS CUSTOM PROPERTIES (Light + Dark Mode)
   ============================================================ */
:root {
  --background: #FFF8F5;
  --foreground: #2D1B2E;
  --card: #FFFFFF;
  --card-foreground: #2D1B2E;
  --border: #F0E0D6;
  --input: #F0E0D6;
  --primary: #C9986A;
  --primary-foreground: #FFFFFF;
  --secondary: #F5E6E8;
  --secondary-foreground: #8B4D6B;
  --muted: #F8EFE8;
  --muted-foreground: #8B7589;
  --accent: #D4AF37;
  --accent-foreground: #2D1B2E;
  --ring: #C9986A;
  --radius: 0.75rem;

  /* Brand palette */
  --brand-50: #FFF8F5;
  --brand-100: #FFE8E0;
  --brand-200: #FFCDB8;
  --brand-300: #F5A88A;
  --brand-400: #E8845D;
  --brand-500: #C9986A;
  --brand-600: #A8724A;
  --brand-700: #8B5430;
  --brand-800: #6E3A1E;
  --brand-900: #3D1C10;

  /* Plum palette */
  --plum-50: #FAF0F6;
  --plum-100: #F0D9E8;
  --plum-200: #DBA8C8;
  --plum-300: #C277A8;
  --plum-400: #A84E8A;
  --plum-500: #8B3A70;
  --plum-600: #6E2857;
  --plum-700: #52183E;
  --plum-800: #3D1030;
  --plum-900: #280820;
  --plum-950: #1A0514;

  /* Rose */
  --rose-gold: #C9986A;
  --rose-light: #F5E6E8;
  --rose-dark: #8B4D6B;
  --rose-deep: #5C2D4A;

  /* Gold */
  --gold: #D4AF37;
  --gold-light: #F5D76E;
  --gold-dark: #A68920;

  /* Cream */
  --cream-50: #FFFDF9;
  --cream-100: #FFF8F0;
  --cream-200: #FFF0E0;
  --cream-300: #FFE4C8;
  --cream-400: #FFD4A8;
}

html.dark {
  --background: #1A0E18;
  --foreground: #F5E6E8;
  --card: #280820;
  --card-foreground: #F5E6E8;
  --border: #3D1C30;
  --input: #3D1C30;
  --primary: #C9986A;
  --primary-foreground: #1A0E18;
  --secondary: #3D1C30;
  --secondary-foreground: #DBA8C8;
  --muted: #280820;
  --muted-foreground: #A87898;
  --accent: #D4AF37;
  --accent-foreground: #1A0E18;
  --ring: #C9986A;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-inter, 'Inter', system-ui, sans-serif);
  font-feature-settings: "rlig" 1, "calt" 1;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-playfair, 'Playfair Display', Georgia, serif);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

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

::selection { background: rgba(201,152,106,0.3); color: var(--brand-900); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream-100); }
::-webkit-scrollbar-thumb { background: var(--brand-400); border-radius: 9999px; }
html.dark ::-webkit-scrollbar-track { background: var(--plum-900); }
html.dark ::-webkit-scrollbar-thumb { background: var(--brand-600); }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.section-container { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px)  { .section-container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .section-container { padding-left: 2rem; padding-right: 2rem; } }

/* ============================================================
   GLASS MORPHISM
   ============================================================ */
.glass {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
html.dark .glass,
.glass-dark {
  background: rgba(40,8,32,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(82,24,62,0.4);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* ============================================================
   GRADIENT TEXT
   ============================================================ */
.gradient-text {
  background: linear-gradient(to right, var(--brand-600), var(--rose-dark), var(--plum-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-text-gold {
  background: linear-gradient(to right, var(--gold-dark), var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-weight: 600;
  color: #fff;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--brand-500), var(--rose-dark));
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 0 30px rgba(201,152,106,0.4);
  font-family: inherit;
  font-size: 0.9375rem;
  gap: 0.5rem;
}
.btn-primary:hover {
  box-shadow: 0 0 60px rgba(201,152,106,0.3);
  transform: scale(1.02);
}
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-weight: 600;
  border-radius: 9999px;
  border: 2px solid var(--brand-500);
  color: var(--brand-600);
  background: transparent;
  transition: all 0.3s ease;
  font-family: inherit;
  font-size: 0.9375rem;
  gap: 0.5rem;
}
.btn-secondary:hover {
  background: var(--brand-500);
  color: #fff;
  box-shadow: 0 0 30px rgba(201,152,106,0.4);
  transform: scale(1.02);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  border-radius: 9999px;
  color: var(--foreground);
  background: transparent;
  transition: all 0.2s ease;
  font-family: inherit;
}
.btn-ghost:hover { background: rgba(201,152,106,0.1); }

/* ============================================================
   BADGES
   ============================================================ */
.badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-new { background: #d1fae5; color: #065f46; }
html.dark .badge-new { background: rgba(6,95,70,0.3); color: #6ee7b7; }
.badge-bestseller { background: rgba(212,175,55,0.2); color: var(--gold-dark); }
html.dark .badge-bestseller { background: rgba(212,175,55,0.1); color: var(--gold-light); }
.badge-sale { background: #fee2e2; color: #dc2626; }
html.dark .badge-sale { background: rgba(220,38,38,0.3); color: #fca5a5; }

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.product-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--cream-300);
  transition: all 0.5s ease;
  cursor: pointer;
}
html.dark .product-card { border-color: var(--plum-700); background: var(--plum-900); }
.product-card:hover {
  box-shadow: 0 25px 50px rgba(201,152,106,0.25), 0 10px 20px rgba(0,0,0,0.08);
  transform: translateY(-8px);
}
html.dark .product-card:hover { box-shadow: 0 20px 60px rgba(139,61,107,0.3), 0 4px 16px rgba(0,0,0,0.4); }

/* ============================================================
   INPUT
   ============================================================ */
.luxury-input {
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  outline: none;
  transition: all 0.2s ease;
  font-family: inherit;
  font-size: 0.9375rem;
}
.luxury-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(201,152,106,0.1); }
.luxury-input::placeholder { color: var(--muted-foreground); }

/* ============================================================
   SKELETON
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--cream-200) 25%, var(--cream-100) 50%, var(--cream-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
  border-radius: 0.5rem;
}
html.dark .skeleton {
  background: linear-gradient(90deg, var(--plum-800) 25%, var(--plum-700) 50%, var(--plum-800) 75%);
  background-size: 200% 100%;
}

/* ============================================================
   STAR RATING
   ============================================================ */
.star-filled { color: var(--gold); }
.star-empty { color: #E0D0C0; }
.stars { display: inline-flex; gap: 2px; }

/* ============================================================
   AURORA BACKGROUND
   ============================================================ */
.aurora-bg {
  background: linear-gradient(-45deg, #FFE4D6, #FFD0E8, #E8D0FF, #D0E8FF, #D0FFE8);
  background-size: 400% 400%;
  animation: aurora 15s ease infinite;
}
html.dark .aurora-bg {
  background: linear-gradient(-45deg, #2A0E18, #1A0828, #0E0A1E, #0A1E1A, #0E1A0A);
  background-size: 400% 400%;
  animation: aurora 15s ease infinite;
}

/* ============================================================
   NOISE TEXTURE
   ============================================================ */
.noise { position: relative; }
.noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.04;
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-container { display: flex; overflow: hidden; }
.marquee-track {
  display: flex;
  gap: 2rem;
  white-space: nowrap;
  animation: marquee 25s linear infinite;
  flex-shrink: 0;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes aurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes marquee {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-20px); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.05); }
}
@keyframes slide-up {
  0%   { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes scale-in {
  0%   { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes float-particle {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.6; }
  50%       { transform: translateY(-30px) rotate(180deg) scale(1.1); opacity: 1; }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-float      { animation: float 6s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
.animate-shimmer    { animation: shimmer 2s linear infinite; }
.animate-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }
.animate-slide-up   { animation: slide-up 0.5s ease-out; }
.animate-fade-in    { animation: fade-in 0.5s ease-out; }
.animate-scale-in   { animation: scale-in 0.3s ease-out; }
.animate-spin-slow  { animation: spin-slow 8s linear infinite; }
.particle           { animation: float-particle 4s ease-in-out infinite; }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announcement-bar {
  background: linear-gradient(to right, var(--brand-500), var(--rose-dark), var(--plum-600));
  padding: 0.5rem 0;
  text-align: center;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  overflow: hidden;
  position: relative;
  z-index: 60;
}
@media (min-width: 640px) { .announcement-bar { font-size: 0.875rem; } }

/* ============================================================
   NAVBAR
   ============================================================ */
#lumea-header {
  position: fixed;
  top: 34px;
  left: 0;
  right: 0;
  z-index: 50;
  transition: all 0.5s ease;
}
@media (max-width: 639px) { #lumea-header { top: 32px; } }

#lumea-header.scrolled {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 20px 60px rgba(201,152,106,0.2), 0 4px 16px rgba(0,0,0,0.1);
}
html.dark #lumea-header.scrolled {
  background: rgba(40,8,32,0.7);
  border-bottom: 1px solid rgba(82,24,62,0.4);
  box-shadow: 0 20px 60px rgba(139,61,107,0.3), 0 4px 16px rgba(0,0,0,0.4);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
@media (min-width: 1024px) { .nav-inner { height: 5rem; } }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.nav-logo-icon {
  width: 2rem; height: 2rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--brand-400), var(--rose-dark));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 30px rgba(201,152,106,0.4);
}
.nav-logo-icon svg { width: 1rem; height: 1rem; color: #fff; fill: none; stroke: #fff; stroke-width: 2; }
.nav-logo-text { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
@media (min-width: 1024px) { .nav-logo-text { font-size: 1.5rem; } }

.nav-links { display: none; }
@media (min-width: 1024px) {
  .nav-links { display: flex; align-items: center; gap: 0.25rem; }
}

.nav-link {
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem; font-weight: 500;
  color: var(--foreground);
  transition: all 0.2s ease;
  position: relative;
}
.nav-link:hover { color: var(--brand-600); background: rgba(201,152,106,0.05); }
html.dark .nav-link:hover { background: rgba(201,152,106,0.1); }
.nav-link.active { color: var(--brand-600); background: rgba(201,152,106,0.08); }

/* Mega dropdown */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 32rem;
  padding: 1.5rem;
  border-radius: 1.5rem;
  display: none;
  z-index: 100;
}
.nav-item:hover .nav-dropdown { display: block; animation: slideDown 0.2s ease; }

.dropdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.dropdown-item {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.75rem; border-radius: 1rem;
  transition: background 0.2s;
}
.dropdown-item:hover { background: rgba(201,152,106,0.08); }
html.dark .dropdown-item:hover { background: rgba(201,152,106,0.12); }
.dropdown-item-icon { font-size: 1.5rem; flex-shrink: 0; }
.dropdown-item-title { font-weight: 600; font-size: 0.875rem; color: var(--foreground); }
.dropdown-item-desc  { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 2px; }
.dropdown-footer {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem; font-weight: 600; color: var(--brand-600);
}

.nav-actions { display: flex; align-items: center; gap: 0.5rem; }
.nav-action-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 9999px;
  color: var(--foreground);
  transition: all 0.2s ease;
}
.nav-action-btn:hover { background: rgba(201,152,106,0.08); color: var(--brand-600); }
html.dark .nav-action-btn:hover { background: rgba(201,152,106,0.15); }
.nav-action-btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cart-btn { position: relative; }
.cart-count {
  position: absolute; top: -4px; right: -4px;
  width: 1.25rem; height: 1.25rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--brand-500), var(--rose-dark));
  color: #fff; font-size: 0.625rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px rgba(201,152,106,0.5);
  display: none;
}
.cart-count.visible { display: flex; }

.hamburger-btn { display: flex; }
@media (min-width: 1024px) { .hamburger-btn { display: none; } }

/* Mobile menu */
#mobile-menu {
  display: none;
  overflow: hidden;
  border-top: 1px solid var(--border);
}
html.dark #mobile-menu { background: rgba(40,8,32,0.95); }
#mobile-menu.open { display: block; animation: slideDown 0.25s ease; }

.mobile-nav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  font-weight: 500;
  color: var(--foreground);
  transition: all 0.2s;
}
.mobile-nav-link:hover { background: rgba(201,152,106,0.08); color: var(--brand-600); }

.mobile-sub-link {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; margin-left: 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem; color: var(--muted-foreground);
  transition: all 0.2s;
}
.mobile-sub-link:hover { background: rgba(201,152,106,0.06); color: var(--brand-600); }

/* ============================================================
   SEARCH MODAL
   ============================================================ */
#search-modal {
  display: none;
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  align-items: flex-start;
  justify-content: center;
  padding-top: 6rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
#search-modal.open { display: flex; animation: fadeOverlay 0.2s ease; }
.search-box {
  width: 100%; max-width: 42rem;
  padding: 1.5rem;
  border-radius: 1.5rem;
  animation: scale-in 0.2s ease;
}
.search-inner {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1rem;
}
.search-inner svg { width: 1.25rem; height: 1.25rem; color: var(--brand-500); fill: none; stroke: currentColor; stroke-width: 2; flex-shrink: 0; }
#search-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 1.125rem; font-family: inherit; color: var(--foreground);
}
#search-input::placeholder { color: var(--muted-foreground); }
.search-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.search-tag {
  padding: 0.375rem 0.75rem; border-radius: 9999px;
  background: rgba(201,152,106,0.08);
  font-size: 0.875rem; color: var(--brand-600);
  transition: background 0.2s; border: none; font-family: inherit; cursor: pointer;
}
.search-tag:hover { background: rgba(201,152,106,0.18); }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.site-main { flex: 1; padding-top: 4rem; }
@media (min-width: 1024px) { .site-main { padding-top: 5rem; } }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  position: relative;
  min-height: 0;
  display: block;
  overflow: hidden;
}
.hero-orb-1 {
  position: absolute; top: -10rem; right: -10rem;
  width: 37.5rem; height: 37.5rem; border-radius: 9999px;
  background: radial-gradient(circle, rgba(245,168,138,0.4) 0%, transparent 70%);
  filter: blur(60px); pointer-events: none;
  animation: glow-pulse 8s ease-in-out infinite;
}
.hero-orb-2 {
  position: absolute; bottom: -10rem; left: -10rem;
  width: 31.25rem; height: 31.25rem; border-radius: 9999px;
  background: radial-gradient(circle, rgba(194,119,168,0.3) 0%, transparent 70%);
  filter: blur(60px); pointer-events: none;
  animation: glow-pulse 10s ease-in-out infinite 2s;
}
.hero-orb-3 {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 25rem; height: 25rem; border-radius: 9999px;
  background: radial-gradient(circle, rgba(212,175,55,0.2) 0%, transparent 70%);
  filter: blur(60px); pointer-events: none;
  animation: glow-pulse 12s ease-in-out infinite 1s;
}

.hero-floating-el {
  position: absolute;
  font-size: 1.875rem;
  pointer-events: none;
  user-select: none;
  opacity: 0.7;
  display: none;
}
@media (min-width: 1024px) { .hero-floating-el { display: block; } }

.hero-content { position: relative; z-index: 10; width: 100%; }
.hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
  padding: 5rem 0 8rem;
}
@media (max-width: 1023px) {
  .hero-grid { padding: 1rem 0 3rem; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 5rem; padding: 8rem 0; }
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: 9999px;
  border: 1px solid rgba(201,152,106,0.5);
  font-size: 0.875rem; font-weight: 500;
  color: var(--brand-700); margin-bottom: 1.5rem;
}
html.dark .hero-badge { color: var(--brand-300); }

.hero-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.75rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.hero-headline .accent {
  background: linear-gradient(to right, var(--brand-500), var(--rose-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  margin-bottom: 2rem;
  max-width: 32rem;
  line-height: 1.7;
}
@media (min-width: 1024px) { .hero-sub { font-size: 1.25rem; } }

.hero-stats {
  display: flex; gap: 2rem; margin-bottom: 2.5rem;
}
.hero-stat-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem; font-weight: 700;
  background: linear-gradient(to right, var(--brand-500), var(--rose-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-stat-label { font-size: 0.75rem; color: var(--muted-foreground); font-weight: 500; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }

.hero-social-proof { display: flex; align-items: center; gap: 0.75rem; }
.avatar-stack { display: flex; }
.avatar-stack img {
  width: 2rem; height: 2rem; border-radius: 9999px;
  border: 2px solid #fff; object-fit: cover;
  margin-left: -0.5rem;
}
.avatar-stack img:first-child { margin-left: 0; }

/* Hero image side */
.hero-image-side {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) { .hero-image-side { display: flex; } }

.hero-img-glow {
  position: absolute; inset: 0;
  border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
  background: linear-gradient(135deg, rgba(245,168,138,0.3), rgba(245,230,232,0.4), rgba(194,119,168,0.2));
  filter: blur(40px);
  transform: scale(1.1);
}
.hero-img-wrap {
  position: relative; width: 100%; max-width: 32rem;
  aspect-ratio: 1/1;
  animation: float-slow 6s ease-in-out infinite;
}
.hero-img-inner {
  position: absolute; inset: 0;
  border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(201,152,106,0.3), 0 4px 16px rgba(0,0,0,0.15);
}
.hero-img-inner img { width: 100%; height: 100%; object-fit: cover; }
.hero-img-inner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent, transparent, rgba(28,8,40,0.2));
}

.hero-float-card {
  position: absolute;
  padding: 1rem;
  border-radius: 1rem;
  min-width: 11rem;
  font-size: 0.8125rem;
}
.hero-float-card-right { right: -2rem; top: 25%; }
.hero-float-card-left  { left: -2rem; bottom: 25%; }
.hero-float-card .stars { margin-bottom: 0.5rem; }
.hero-float-card .stars svg { width: 0.75rem; height: 0.75rem; fill: var(--gold); color: var(--gold); }
.hero-float-card p { font-weight: 600; margin-bottom: 2px; }
.hero-float-card span { color: var(--muted-foreground); }
.hero-float-icon { display: flex; align-items: center; gap: 0.5rem; }
.hero-float-icon svg { width: 1.25rem; height: 1.25rem; color: var(--brand-500); fill: none; stroke: currentColor; stroke-width: 2; }

/* Slide controls */
.hero-controls {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 1rem; z-index: 20;
}
.hero-ctrl-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  transition: all 0.2s; color: var(--foreground);
}
.hero-ctrl-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.hero-dots { display: flex; gap: 0.5rem; align-items: center; }
.hero-dot {
  height: 0.5rem; border-radius: 9999px;
  background: rgba(201,152,106,0.3);
  transition: all 0.3s ease; border: none; cursor: pointer;
  width: 0.5rem;
}
.hero-dot.active { background: var(--brand-500); width: 2rem; }

/* Scroll indicator */
.scroll-indicator {
  position: absolute; bottom: 2rem; right: 2rem;
  display: none; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--muted-foreground); font-size: 0.625rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  animation: float-slow 2s ease-in-out infinite;
}
@media (min-width: 1024px) { .scroll-indicator { display: flex; } }
.scroll-line {
  width: 1px; height: 3rem;
  background: linear-gradient(to bottom, transparent, var(--brand-400));
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
  background: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
  overflow: hidden;
}
.trust-track {
  display: flex; gap: 3rem;
  white-space: nowrap;
  animation: marquee 20s linear infinite;
}
.trust-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 500; flex-shrink: 0;
}
.trust-item svg { width: 1rem; height: 1rem; color: var(--brand-500); fill: none; stroke: currentColor; stroke-width: 2; }

/* ============================================================
   SECTION BASE
   ============================================================ */
section { padding: 5rem 0; }
@media (min-width: 1024px) { section { padding: 6rem 0; } }

.section-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-500); margin-bottom: 1rem;
}
.section-label svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }

.section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 700; margin-bottom: 1rem;
}
.section-subtitle {
  font-size: 1.0625rem; color: var(--muted-foreground);
  max-width: 36rem; line-height: 1.7;
}
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-header .section-subtitle { margin: 0 auto; }

/* ============================================================
   CATEGORIES SECTION
   ============================================================ */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px)  { .categories-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .categories-grid { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; } }

.category-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  padding: 1.5rem 1rem;
  border-radius: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}
.category-card:hover {
  border-color: var(--brand-300);
  box-shadow: 0 0 30px rgba(201,152,106,0.2);
  transform: translateY(-4px);
}
.category-icon {
  font-size: 2.5rem;
  width: 4rem; height: 4rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-50), var(--cream-200));
  border-radius: 1rem;
  transition: transform 0.3s;
}
html.dark .category-icon { background: linear-gradient(135deg, var(--plum-800), var(--plum-700)); }
.category-card:hover .category-icon { transform: scale(1.1); }
.category-name { font-weight: 600; font-size: 0.875rem; }
.category-count { font-size: 0.75rem; color: var(--muted-foreground); }

/* ============================================================
   FEATURED PRODUCTS
   ============================================================ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px)  { .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) { .products-grid { grid-template-columns: repeat(4, 1fr); } }

/* Mobile 2-up tweaks: tighter card so two products fit comfortably side-by-side */
@media (max-width: 639px) {
  .products-grid .product-info { padding: 0.75rem; }
  .products-grid .product-name { font-size: 0.875rem; }
  .products-grid .product-tagline { font-size: 0.75rem; -webkit-line-clamp: 2; }
  .products-grid .product-price { font-size: 1rem; }
  .products-grid .add-to-cart-btn { padding: 0.4rem 0.7rem; font-size: 0.75rem; }
  .products-grid .add-to-cart-btn svg { width: 0.75rem; height: 0.75rem; }
  .products-grid .product-footer { flex-wrap: wrap; gap: 0.4rem; }
  .products-grid .product-actions { bottom: 0.5rem; gap: 0.35rem; }
  .products-grid .product-action-btn { width: 2rem; height: 2rem; }
  .products-grid .product-badges { top: 0.5rem; left: 0.5rem; }
}

.product-img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--cream-100);
}
html.dark .product-img-wrap { background: var(--plum-800); }

.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.product-card:hover .product-img-wrap img { transform: scale(1.05); }

.product-actions {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.5rem;
  opacity: 0; transition: opacity 0.3s;
}
.product-card:hover .product-actions { opacity: 1; }
.product-action-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: #fff; color: var(--foreground);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 0.2s;
  font-size: 0.75rem; font-weight: 600;
}
html.dark .product-action-btn { background: var(--plum-800); }
.product-action-btn:hover { background: var(--brand-500); color: #fff; }
.product-action-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }

.product-badges { position: absolute; top: 0.75rem; left: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }

.product-info { padding: 1rem; }
.product-name { font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.25rem; line-height: 1.3; }
.product-tagline { font-size: 0.8125rem; color: var(--muted-foreground); margin-bottom: 0.5rem; }
.product-rating { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.product-rating svg { width: 0.875rem; height: 0.875rem; fill: var(--gold); color: var(--gold); }
.rating-count { font-size: 0.75rem; color: var(--muted-foreground); }
.product-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.product-price { font-family: 'Playfair Display', Georgia, serif; font-size: 1.125rem; font-weight: 700; color: var(--brand-600); }
.product-price-old { font-size: 0.875rem; color: var(--muted-foreground); text-decoration: line-through; }
.add-to-cart-btn {
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--brand-500), var(--rose-dark));
  color: #fff; font-size: 0.8125rem; font-weight: 600;
  transition: all 0.2s; white-space: nowrap;
}
.add-to-cart-btn:hover { transform: scale(1.02); box-shadow: 0 0 20px rgba(201,152,106,0.4); }
.add-to-cart-btn svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2; }

/* ============================================================
   BEFORE / AFTER SECTION
   ============================================================ */
.before-after-section { background: linear-gradient(135deg, var(--cream-100) 0%, var(--rose-light) 50%, var(--plum-50) 100%); }
html.dark .before-after-section { background: linear-gradient(135deg, var(--plum-900) 0%, var(--plum-800) 50%, var(--plum-900) 100%); }

.ba-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .ba-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.ba-cards { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .ba-cards { flex-direction: row; } }

.ba-card {
  flex: 1; border-radius: 1.5rem; overflow: hidden;
  position: relative;
}
.ba-card img { width: 100%; height: 18rem; object-fit: cover; }
@media (min-width: 640px) { .ba-card img { height: 22rem; } }

.ba-label {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  padding: 0.375rem 1rem; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #fff;
}
.ba-label.before { background: rgba(0,0,0,0.6); }
.ba-label.after  { background: linear-gradient(to right, var(--brand-500), var(--rose-dark)); }

.ba-result {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1rem;
}
.ba-result-icon {
  width: 3rem; height: 3rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--brand-100), var(--cream-200));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
html.dark .ba-result-icon { background: linear-gradient(135deg, var(--plum-700), var(--plum-800)); }
.ba-result-pct  { font-family: 'Playfair Display', Georgia, serif; font-size: 1.75rem; font-weight: 700; color: var(--brand-600); }
.ba-result-desc { font-size: 0.875rem; color: var(--muted-foreground); }

/* ============================================================
   INGREDIENTS
   ============================================================ */
.ingredients-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .ingredients-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ingredients-grid { grid-template-columns: repeat(4, 1fr); } }

.ingredient-card {
  padding: 2rem 1.5rem;
  border-radius: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  text-align: center;
  transition: all 0.3s;
}
.ingredient-card:hover {
  box-shadow: 0 0 40px rgba(201,152,106,0.15);
  border-color: var(--brand-300);
  transform: translateY(-4px);
}
.ingredient-emoji { font-size: 3rem; margin-bottom: 1rem; display: block; }
.ingredient-name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; }
.ingredient-desc { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; }
.ingredient-benefit {
  display: inline-flex; align-items: center; gap: 0.375rem;
  margin-top: 0.75rem;
  padding: 0.25rem 0.75rem; border-radius: 9999px;
  background: rgba(201,152,106,0.1);
  font-size: 0.75rem; font-weight: 600; color: var(--brand-600);
}

/* ============================================================
   SKIN QUIZ
   ============================================================ */
.quiz-section {
  background: linear-gradient(135deg, var(--brand-500), var(--rose-dark), var(--plum-600));
  position: relative; overflow: hidden;
}
.quiz-orb-1 {
  position: absolute; top: -5rem; left: -5rem;
  width: 20rem; height: 20rem; border-radius: 9999px;
  background: rgba(255,255,255,0.1); filter: blur(60px); pointer-events: none;
}
.quiz-orb-2 {
  position: absolute; bottom: -5rem; right: -5rem;
  width: 20rem; height: 20rem; border-radius: 9999px;
  background: rgba(255,255,255,0.08); filter: blur(60px); pointer-events: none;
}
.quiz-inner { position: relative; z-index: 10; text-align: center; max-width: 48rem; margin: 0 auto; }
.quiz-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: 9999px;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);
  font-size: 0.875rem; font-weight: 500; color: #fff; margin-bottom: 1.5rem;
}
.quiz-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.875rem,4vw,3rem); font-weight: 700; color: #fff; margin-bottom: 1rem; }
.quiz-sub { color: rgba(255,255,255,0.8); font-size: 1.0625rem; margin-bottom: 2rem; }
.quiz-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2.5rem; }
.quiz-feature {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: 9999px;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(8px);
  color: #fff; font-size: 0.875rem;
}
.quiz-feature svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.quiz-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 1rem 2.5rem; border-radius: 9999px;
  background: #fff; color: var(--brand-700);
  font-weight: 700; font-size: 1.0625rem; font-family: inherit;
  transition: all 0.3s;
}
.quiz-btn:hover { transform: scale(1.05); box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.quiz-btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section { background: linear-gradient(135deg, var(--cream-50), var(--rose-light), var(--plum-50)); }
html.dark .testimonials-section { background: linear-gradient(135deg, var(--plum-950), var(--plum-900)); }

.testimonials-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }

.testimonial-card {
  padding: 2rem; border-radius: 1.5rem;
  border: 1px solid var(--border);
  transition: all 0.3s;
}
.testimonial-card:hover { box-shadow: 0 20px 60px rgba(201,152,106,0.15); transform: translateY(-4px); }
.testimonial-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.testimonial-avatar { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-avatar img { width: 3rem; height: 3rem; border-radius: 9999px; object-fit: cover; }
.testimonial-name { font-weight: 700; font-size: 0.9375rem; }
.testimonial-meta { font-size: 0.8125rem; color: var(--muted-foreground); }
.verified-badge { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: #10b981; }
.verified-badge svg { width: 0.875rem; height: 0.875rem; }
.testimonial-quote { font-size: 1.5rem; color: var(--brand-400); line-height: 1; margin-bottom: 0.5rem; }
.testimonial-text { font-size: 0.9375rem; color: var(--foreground); line-height: 1.7; margin-bottom: 1rem; }
.testimonial-product { font-size: 0.8125rem; color: var(--muted-foreground); }
.testimonial-product strong { color: var(--brand-600); }

/* ============================================================
   NEWSLETTER / FOOTER CTA
   ============================================================ */
.newsletter-wrap {
  position: relative; border-radius: 2rem; overflow: hidden;
  background: linear-gradient(135deg, var(--brand-500), var(--rose-dark), var(--plum-700));
  padding: 2.5rem 2rem; text-align: center; color: #fff;
}
@media (min-width: 1024px) { .newsletter-wrap { padding: 4rem; } }

.newsletter-orb-1 { position: absolute; top: -5rem; left: -5rem; width: 15rem; height: 15rem; border-radius: 9999px; background: rgba(255,255,255,0.1); filter: blur(60px); }
.newsletter-orb-2 { position: absolute; bottom: -5rem; right: -5rem; width: 15rem; height: 15rem; border-radius: 9999px; background: rgba(255,255,255,0.08); filter: blur(60px); }
.newsletter-inner { position: relative; z-index: 10; max-width: 36rem; margin: 0 auto; }
.newsletter-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: 9999px;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);
  font-size: 0.875rem; font-weight: 500; margin-bottom: 1.5rem;
}
.newsletter-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; margin-bottom: 1rem; }
.newsletter-sub { color: rgba(255,255,255,0.8); margin-bottom: 2rem; }
.newsletter-form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 28rem; margin: 0 auto; }
@media (min-width: 640px) { .newsletter-form { flex-direction: row; } }
.newsletter-input {
  flex: 1; padding: 1rem 1.25rem; border-radius: 1rem;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff; outline: none; font-family: inherit;
}
.newsletter-input::placeholder { color: rgba(255,255,255,0.6); }
.newsletter-input:focus { background: rgba(255,255,255,0.3); }
.newsletter-btn {
  padding: 1rem 1.5rem; border-radius: 1rem;
  background: #fff; color: var(--brand-700); font-weight: 600;
  font-family: inherit; white-space: nowrap;
  transition: all 0.2s; display: flex; align-items: center; gap: 0.5rem; justify-content: center;
}
.newsletter-btn:hover { background: var(--cream-100); transform: scale(1.02); }
.newsletter-note { font-size: 0.75rem; color: rgba(255,255,255,0.6); margin-top: 0.75rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: linear-gradient(to bottom, var(--background), var(--cream-200));
  border-top: 1px solid var(--border);
}
html.dark .site-footer { background: linear-gradient(to bottom, var(--plum-900), var(--plum-950)); }

.trust-badges-row {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0;
}
.trust-badges-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
}
@media (min-width: 1024px) { .trust-badges-grid { grid-template-columns: repeat(4, 1fr); } }

.trust-badge-item { display: flex; align-items: center; gap: 0.75rem; }
.trust-badge-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: rgba(201,152,106,0.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
html.dark .trust-badge-icon { background: rgba(201,152,106,0.15); }
.trust-badge-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--brand-500); stroke-width: 2; }
.trust-badge-title { font-weight: 600; font-size: 0.875rem; }
.trust-badge-sub { font-size: 0.75rem; color: var(--muted-foreground); }

.footer-main { padding: 4rem 0; }
.footer-grid {
  display: grid; gap: 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.footer-brand-logo { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.footer-brand-desc { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.7; max-width: 22rem; margin-bottom: 1.5rem; }
.footer-contact { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 1.5rem; }
.footer-contact-item { display: flex; align-items: center; gap: 0.5rem; }
.footer-contact-item svg { width: 1rem; height: 1rem; fill: none; stroke: var(--brand-400); stroke-width: 2; flex-shrink: 0; }

.footer-socials { display: flex; gap: 0.75rem; }
.footer-social {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: var(--card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-foreground); transition: all 0.2s;
}
.footer-social:hover { color: var(--brand-600); border-color: var(--brand-400); box-shadow: 0 0 20px rgba(201,152,106,0.3); }
.footer-social svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }

.footer-col-title { font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; }
.footer-links a { font-size: 0.875rem; color: var(--muted-foreground); transition: color 0.2s; }
.footer-links a:hover { color: var(--brand-600); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
}
.footer-bottom-inner {
  display: flex; flex-direction: column; gap: 1rem;
  align-items: center;
}
@media (min-width: 640px) { .footer-bottom-inner { flex-direction: row; justify-content: space-between; } }
.footer-copy { font-size: 0.75rem; color: var(--muted-foreground); }
.footer-legal { display: flex; align-items: center; gap: 1rem; }
.footer-legal a { font-size: 0.75rem; color: var(--muted-foreground); transition: color 0.2s; }
.footer-legal a:hover { color: var(--brand-600); }
.footer-legal span { color: var(--border); }
.payment-icons { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.payment-icon {
  font-size: 0.625rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem;
  background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground);
  display: inline-flex; align-items: center; justify-content: center;
}
.payment-icon--svg {
  padding: 0; background: transparent; border: none;
  border-radius: 0.25rem; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  line-height: 0;
}
.payment-icon--svg svg { display: block; }

/* ============================================================
   INSTAGRAM GRID
   ============================================================ */
.instagram-grid {
  display: grid; gap: 0.5rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 640px) { .instagram-grid { grid-template-columns: repeat(6, 1fr); } }

.instagram-item {
  aspect-ratio: 1; overflow: hidden; border-radius: 0.75rem;
  position: relative; cursor: pointer;
}
.instagram-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.instagram-item:hover img { transform: scale(1.1); }
.instagram-overlay {
  position: absolute; inset: 0;
  background: rgba(201,152,106,0.6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s;
}
.instagram-item:hover .instagram-overlay { opacity: 1; }
.instagram-overlay svg { width: 1.5rem; height: 1.5rem; fill: #fff; stroke: none; }

/* ============================================================
   WORDPRESS PAGE/POST STYLES
   ============================================================ */
.entry-content {
  max-width: 50rem; margin: 0 auto;
  font-size: 1.0625rem; line-height: 1.8; color: var(--foreground);
}
.entry-content h1,.entry-content h2,.entry-content h3 { margin-top: 2rem; margin-bottom: 1rem; }
.entry-content p { margin-bottom: 1.25rem; }
.entry-content a { color: var(--brand-600); text-decoration: underline; }
.entry-content ul,.entry-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.entry-content li { margin-bottom: 0.5rem; }
.entry-content img { border-radius: 1rem; margin: 1.5rem 0; }
.entry-content blockquote {
  border-left: 4px solid var(--brand-500);
  padding-left: 1.5rem; margin: 1.5rem 0;
  font-style: italic; color: var(--muted-foreground);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.125rem;
}

.page-wrapper { padding: 3rem 0 5rem; }

/* ============================================================
   WOOCOMMERCE OVERRIDES
   ============================================================ */
.woocommerce ul.products { list-style: none; padding: 0; }
.woocommerce ul.products li.product { list-style: none; }
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button {
  background: linear-gradient(to right, var(--brand-500), var(--rose-dark)) !important;
  color: #fff !important;
  border-radius: 9999px !important;
  border: none !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
  box-shadow: 0 0 20px rgba(201,152,106,0.3) !important;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 0 30px rgba(201,152,106,0.5) !important;
}
.woocommerce-Price-amount { color: var(--brand-600) !important; font-weight: 700 !important; }
.woocommerce .star-rating span::before { color: var(--gold) !important; }

/* ============================================================
   RESPONSIVE HELPERS
   ============================================================ */
@media (min-width: 640px) { .hidden-mobile { display: flex !important; } }
.hidden-mobile { display: none; }


/* ============================================================
   INTERACTIVE STATES — Cart Drawer, Toast, Ripple, Loaders
   ============================================================ */

/* Cart overlay transitions */
#cart-overlay {
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Cart drawer transitions */
#cart-drawer {
  transition: right 0.38s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: right;
}
@media (max-width: 639px) {
  #cart-drawer {
    top: 34px !important;
    height: calc(100vh - 34px) !important;
  }
}

/* Mini cart item */
.mini-cart-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border);
  transition: opacity 0.25s ease;
}
.mini-cart-item:last-child { border-bottom: none; }

.mini-cart-remove {
  display: flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 9999px;
  background: transparent;
  color: var(--muted-foreground);
  transition: all 0.2s;
  flex-shrink: 0;
  border: 1px solid transparent;
  cursor: pointer;
}
.mini-cart-remove:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #fecaca;
}
html.dark .mini-cart-remove:hover {
  background: rgba(239,68,68,0.15);
  color: #f87171;
}

/* Add to cart button loading */
.lumea-add-to-cart:disabled,
.add-to-cart-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none !important;
}

/* Success pulse on add to cart */
@keyframes successPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.btn-success-pulse { animation: successPulse 0.6s ease; }

/* Ripple keyframe */
@keyframes ripple {
  to { transform: scale(3); opacity: 0; }
}

/* Spin animation (for loading spinner) */
@keyframes spin-anim {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin { animation: spin-anim 0.8s linear infinite; }

/* ── Product card touch hover ── */
.product-card.touched .product-actions { opacity: 1; }
.product-card.touched .product-img-wrap img { transform: scale(1.05); }

/* ── Quantity input ── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ── Hero slide transition ── */
.hero-slide { transition: opacity 0.6s ease; }

/* ── WooCommerce price styling ── */
.woocommerce-Price-amount {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: var(--brand-600) !important;
}
del .woocommerce-Price-amount {
  color: var(--muted-foreground) !important;
  font-size: 0.875em;
  font-weight: 400;
}
ins { text-decoration: none !important; }

/* ── WooCommerce notices ── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.woocommerce-message { background: rgba(16,185,129,0.1); border-left: 4px solid #10b981; color: #065f46; }
.woocommerce-info    { background: rgba(59,130,246,0.1); border-left: 4px solid #3b82f6; color: #1e3a8a; }
.woocommerce-error   { background: rgba(239,68,68,0.1);  border-left: 4px solid #ef4444; color: #7f1d1d; }
html.dark .woocommerce-message { color: #6ee7b7; background: rgba(16,185,129,0.12); }
html.dark .woocommerce-info    { color: #93c5fd; background: rgba(59,130,246,0.12); }
html.dark .woocommerce-error   { color: #fca5a5; background: rgba(239,68,68,0.12); }

/* ── Cart page styles ── */
.woocommerce-cart-form table { width: 100%; border-collapse: collapse; }
.woocommerce-cart-form table thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}
.woocommerce-cart-form table tbody tr { border-bottom: 1px solid var(--border); }
.woocommerce-cart-form table tbody td { padding: 1rem; vertical-align: middle; }
.woocommerce-cart-form .product-thumbnail img { width: 4rem; border-radius: 0.75rem; object-fit: cover; }
.woocommerce-cart-form .product-name a { font-weight: 600; color: var(--foreground); }
.woocommerce-cart-form .product-name a:hover { color: var(--brand-600); }
.cart-collaterals { margin-top: 2rem; }
.cart_totals { max-width: 22rem; margin-left: auto; }
.cart_totals h2 { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 1rem; }
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals table tr td,
.cart_totals table tr th { padding: 0.75rem 0; border-bottom: 1px solid var(--border); font-size: 0.9375rem; }
.cart_totals table tr:last-child td,
.cart_totals table tr:last-child th { border-bottom: none; font-weight: 700; font-size: 1.125rem; }
.wc-proceed-to-checkout { margin-top: 1.5rem; }
.wc-proceed-to-checkout .checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem 2rem !important;
  border-radius: 9999px !important;
  font-size: 1.0625rem !important;
  gap: 0.5rem;
}

/* ── Checkout styles ── */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.woocommerce-checkout .form-row { margin-bottom: 1rem; }
.woocommerce-checkout .form-row label { font-size: 0.875rem; font-weight: 600; display: block; margin-bottom: 0.375rem; }
.woocommerce-checkout input[type=text],
.woocommerce-checkout input[type=email],
.woocommerce-checkout input[type=tel],
.woocommerce-checkout input[type=password],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%;
  padding: 0.875rem 1.125rem;
  border-radius: 0.875rem;
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(201,152,106,0.1);
}
.woocommerce-checkout #place_order {
  width: 100%;
  padding: 1.125rem !important;
  font-size: 1.0625rem !important;
  border-radius: 9999px !important;
  margin-top: 1rem;
}
#ship-to-different-address label { font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }

/* ── My Account styles ── */
.woocommerce-MyAccount-navigation {
  background: var(--card);
  border-radius: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: all 0.2s;
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
  background: linear-gradient(to right, var(--brand-500), var(--rose-dark));
  color: #fff;
}
.woocommerce-MyAccount-content { font-size: 0.9375rem; }

/* ── Shop / Archive page ── */
.woocommerce-products-header { text-align: center; margin-bottom: 2.5rem; }
.woocommerce-products-header__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.woocommerce-ordering select,
.woocommerce-result-count {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
}
.woocommerce-pagination { margin-top: 3rem; text-align: center; }
.woocommerce-pagination ul { list-style: none; padding: 0; display: inline-flex; gap: 0.5rem; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 9999px;
  font-size: 0.875rem; font-weight: 600;
  border: 2px solid var(--border);
  color: var(--foreground);
  transition: all 0.2s;
}
.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li span.current {
  background: var(--brand-500);
  color: #fff;
  border-color: var(--brand-500);
}

/* ── Product breadcrumb ── */
.lumea-breadcrumb {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}
.lumea-breadcrumb a { color: var(--brand-600); }
.lumea-breadcrumb a:hover { text-decoration: underline; }

/* ── Single product rating stars in WC ── */
.woocommerce-product-rating { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.star-rating { display: inline-flex; gap: 2px; }
.star-rating::before { display: none; }
.woocommerce-review-link { font-size: 0.875rem; color: var(--muted-foreground); }

/* ── Added to cart visual feedback ── */
@keyframes cartBounce {
  0%,100% { transform: scale(1); }
  30%      { transform: scale(1.35); }
  60%      { transform: scale(0.9); }
}
.cart-bounce { animation: cartBounce 0.45s ease; }

/* ── Accessibility: focus styles ── */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ── WC product list item wrapper — make it transparent ── */
.products-grid > li,
ul.products > li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  display: contents; /* grid item pass-through */
}
/* Fallback if contents not supported */
@supports not (display: contents) {
  .products-grid > li { display: block; }
}

/* Shop page ordering bar */
.woocommerce-result-count {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  margin: 0;
}
.woocommerce-ordering {
  margin: 0;
}
.woocommerce-ordering select {
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  outline: none;
}
.woocommerce-ordering select:focus { border-color: var(--brand-500); }

/* Shop page toolbar */
.woocommerce-result-count,
.woocommerce-ordering {
  margin-bottom: 1.5rem;
}

/* WooCommerce cart qty input */
.woocommerce .qty {
  width: 4rem !important;
  text-align: center !important;
  border-radius: 0.5rem !important;
  border: 2px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--foreground) !important;
  padding: 0.5rem !important;
  font-family: inherit !important;
}
.woocommerce .qty:focus { border-color: var(--brand-500) !important; }

/* WooCommerce update cart button */
.woocommerce .actions .button[name="update_cart"] {
  background: transparent !important;
  border: 2px solid var(--brand-500) !important;
  color: var(--brand-600) !important;
  box-shadow: none !important;
}
.woocommerce .actions .button[name="update_cart"]:hover {
  background: var(--brand-500) !important;
  color: #fff !important;
}

/* Single product add to cart form native WC */
.woocommerce .single_add_to_cart_button {
  background: linear-gradient(to right, var(--brand-500), var(--rose-dark)) !important;
  color: #fff !important;
  border-radius: 9999px !important;
  border: none !important;
  padding: 0.875rem 2rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  box-shadow: 0 0 30px rgba(201,152,106,0.4) !important;
  transition: all 0.3s !important;
  cursor: pointer !important;
}
.woocommerce .single_add_to_cart_button:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 0 50px rgba(201,152,106,0.5) !important;
}
.woocommerce .single_add_to_cart_button.loading::after {
  border-top-color: #fff !important;
}

/* Product quantity control */
.woocommerce .quantity { display: flex; align-items: center; }
.woocommerce form.cart { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }


/* ============================================================
   CART PAGE — COMPLETE UI REDESIGN
   ============================================================ */

/* ── 2-column layout: items left, totals right ── */
.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 2.5rem;
  align-items: start;
}
.woocommerce-cart .woocommerce .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}
.woocommerce-cart .woocommerce .woocommerce-cart-form {
  grid-column: 1;
  grid-row: 2;
  background: var(--card);
  border-radius: 1.75rem;
  border: 1px solid var(--border);
  padding: 1.75rem;
  box-shadow: 0 4px 40px rgba(44,27,46,0.07);
}
.woocommerce-cart .woocommerce .cart-collaterals {
  grid-column: 2;
  grid-row: 2;
  position: sticky;
  top: 5.5rem;
  margin-top: 0 !important;
}
@media (max-width: 900px) {
  .woocommerce-cart .woocommerce {
    grid-template-columns: 1fr;
  }
  .woocommerce-cart .woocommerce .woocommerce-cart-form,
  .woocommerce-cart .woocommerce .cart-collaterals {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

/* ── Cart table header ── */
.woocommerce-cart-form table thead { background: var(--muted); border-radius: 1rem; }
.woocommerce-cart-form table thead th {
  padding: 0.875rem 1.25rem !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--muted-foreground) !important;
  border-bottom: 2px solid var(--border) !important;
}

/* ── Cart item rows ── */
.woocommerce-cart-form table tbody tr {
  border-bottom: 1px solid var(--border) !important;
  transition: background 0.2s ease;
}
.woocommerce-cart-form table tbody tr:hover { background: var(--muted); }
.woocommerce-cart-form table tbody td { padding: 1.25rem !important; vertical-align: middle !important; }

/* ── Product thumbnail ── */
.woocommerce-cart-form .product-thumbnail img {
  width: 5.5rem !important;
  height: 5.5rem !important;
  object-fit: cover !important;
  border-radius: 1rem !important;
  border: 1px solid var(--border) !important;
  display: block;
}
.woocommerce-cart-form .product-thumbnail a { display: block; }

/* ── Product name ── */
.woocommerce-cart-form .product-name a {
  font-family: 'Playfair Display', serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  line-height: 1.4;
}
.woocommerce-cart-form .product-name a:hover { color: var(--brand-500) !important; }

/* ── Price & subtotal ── */
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal {
  font-weight: 600 !important;
  color: var(--brand-600) !important;
}
.woocommerce-cart-form .product-subtotal { font-weight: 700 !important; font-size: 1.05rem !important; }

/* ── Quantity stepper ── */
.woocommerce-cart-form .qty {
  width: 3.5rem !important;
  text-align: center !important;
  border: 2px solid var(--border) !important;
  border-radius: 0.625rem !important;
  padding: 0.5rem !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
}
.woocommerce-cart-form .qty:focus { border-color: var(--brand-500) !important; box-shadow: 0 0 0 3px rgba(201,152,106,0.12) !important; }

/* ── Remove button ── */
.woocommerce-cart-form .product-remove .remove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 50% !important;
  font-size: 1.25rem !important;
  color: var(--muted-foreground) !important;
  border: 1.5px solid var(--border) !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.woocommerce-cart-form .product-remove .remove:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #fca5a5 !important;
  transform: scale(1.1) !important;
}

/* ── Actions row (coupon + update) ── */
.woocommerce-cart-form .actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid var(--border) !important;
  margin-top: 0.5rem !important;
}
.woocommerce-cart-form .coupon {
  display: flex !important;
  gap: 0.75rem !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.woocommerce-cart-form .coupon #coupon_code {
  border: 2px solid var(--border) !important;
  border-radius: 9999px !important;
  padding: 0.625rem 1.25rem !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  min-width: 180px;
}
.woocommerce-cart-form .coupon #coupon_code:focus { border-color: var(--brand-500) !important; }
.woocommerce-cart-form .coupon .button {
  background: transparent !important;
  border: 2px solid var(--brand-500) !important;
  color: var(--brand-600) !important;
  box-shadow: none !important;
  padding: 0.625rem 1.25rem !important;
  font-size: 0.875rem !important;
}
.woocommerce-cart-form .coupon .button:hover {
  background: var(--brand-500) !important;
  color: #fff !important;
  transform: none !important;
}

/* ── Cart Totals card ── */
.cart_totals {
  background: var(--card) !important;
  border-radius: 1.75rem !important;
  border: 1px solid var(--border) !important;
  padding: 1.75rem 2rem !important;
  box-shadow: 0 4px 40px rgba(44,27,46,0.07) !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.cart_totals h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.875rem !important;
  border-bottom: 2px solid var(--border) !important;
  color: var(--foreground) !important;
}
.cart_totals .shop_table { width: 100% !important; border-collapse: collapse !important; }
.cart_totals .shop_table tr th {
  color: var(--muted-foreground) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
.cart_totals .shop_table tr td {
  font-weight: 600 !important;
  text-align: right !important;
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--foreground) !important;
}
.cart_totals .shop_table .order-total th,
.cart_totals .shop_table .order-total td {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  border-top: 2px solid var(--border) !important;
  border-bottom: none !important;
  padding-top: 1.125rem !important;
  color: var(--foreground) !important;
}

/* ── PROCEED TO CHECKOUT — main CTA ── */
.wc-proceed-to-checkout { margin-top: 1.75rem !important; }
.wc-proceed-to-checkout .checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 1.125rem 2rem !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--rose-dark) 55%, var(--plum-600) 100%) !important;
  border-radius: 9999px !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 8px 32px rgba(201,152,106,0.45), 0 2px 8px rgba(44,27,46,0.18) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}
.wc-proceed-to-checkout .checkout-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 60%);
  pointer-events: none;
}
.wc-proceed-to-checkout .checkout-button:hover {
  transform: translateY(-3px) scale(1.015) !important;
  box-shadow: 0 14px 42px rgba(201,152,106,0.6), 0 4px 14px rgba(44,27,46,0.22) !important;
}

/* Security note under checkout button */
.wc-proceed-to-checkout .checkout-button + p,
.cart_totals .wc-proceed-to-checkout::after {
  content: '🔒  Secure & encrypted checkout';
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.875rem;
  letter-spacing: 0.02em;
}

/* ── PLACE ORDER — checkout page ── */
.woocommerce-checkout #place_order {
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--rose-dark) 55%, var(--plum-600) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 32px rgba(201,152,106,0.45), 0 2px 8px rgba(44,27,46,0.18) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}
.woocommerce-checkout #place_order::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 60%);
  pointer-events: none;
}
.woocommerce-checkout #place_order:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 42px rgba(201,152,106,0.6) !important;
}

/* ── Empty cart ── */
.woocommerce-cart-form:empty,
.woocommerce-info {
  background: var(--card) !important;
  border-radius: 1.25rem !important;
  border: 1px solid var(--border) !important;
  padding: 2rem !important;
  font-size: 1rem !important;
}

/* ── Cross-sells section ── */
.cross-sells { margin-top: 0 !important; }
.cross-sells h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

html.dark .woocommerce-cart-form .product-remove .remove:hover {
  background: rgba(220,38,38,0.2) !important;
  border-color: rgba(252,165,165,0.4) !important;
}

/* ============================================================
   FIXED HEADER — FULL STICKY HEADER + ANNOUNCEMENT BAR
   ============================================================ */

/* Pin announcement bar at very top */
.announcement-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
}

/* Header always has a background (not just on scroll) */
#lumea-header {
  top: 34px !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 24px rgba(201,152,106,0.12), 0 1px 4px rgba(0,0,0,0.06) !important;
}
html.dark #lumea-header {
  background: rgba(26,14,24,0.92) !important;
  border-bottom: 1px solid rgba(82,24,62,0.4) !important;
  box-shadow: 0 4px 24px rgba(139,61,107,0.25), 0 1px 4px rgba(0,0,0,0.3) !important;
}

/* Keep scrolled styles (no change needed — already has the glow) */
#lumea-header.scrolled {
  box-shadow: 0 20px 60px rgba(201,152,106,0.2), 0 4px 16px rgba(0,0,0,0.1) !important;
}

/* Body: push content below both fixed bars */
body {
  padding-top: calc(34px + 4rem) !important; /* bar + mobile nav */
}
@media (min-width: 1024px) {
  body {
    padding-top: calc(34px + 5rem) !important; /* bar + desktop nav */
  }
}

/* Admin bar support (logged-in users) */
body.admin-bar .announcement-bar { top: 32px !important; }
body.admin-bar #lumea-header     { top: calc(32px + 34px) !important; }
body.admin-bar {
  padding-top: calc(32px + 34px + 4rem) !important;
}
@media (min-width: 1024px) {
  body.admin-bar {
    padding-top: calc(32px + 34px + 5rem) !important;
  }
}

/* Mobile admin bar is 46px */
@media (max-width: 600px) {
  body.admin-bar .announcement-bar { top: 46px !important; }
  body.admin-bar #lumea-header     { top: calc(46px + 32px) !important; }
  body.admin-bar { padding-top: calc(46px + 32px + 4rem) !important; }
}

/* ============================================================
   WOOCOMMERCE BLOCK CART & CHECKOUT — FULL REDESIGN
   ============================================================ */

/* ── Pulse / glow keyframe for CTA buttons ── */
@keyframes lumea-pulse {
  0%   { box-shadow: 0 8px 32px rgba(201,152,106,0.5), 0 0 0 0 rgba(201,152,106,0.4); }
  50%  { box-shadow: 0 12px 48px rgba(201,152,106,0.7), 0 0 0 14px rgba(201,152,106,0); }
  100% { box-shadow: 0 8px 32px rgba(201,152,106,0.5), 0 0 0 0 rgba(201,152,106,0); }
}
@keyframes lumea-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Block cart page wrapper ── */
/* ── Cart page full-width override ── */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
  max-width: 100% !important;
  margin: 0 !important;
}

/* ── Cart grid — broad selectors so it fires regardless of body class ── */
.wp-block-woocommerce-cart,
.woocommerce-cart .wc-block-cart {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 2rem !important;
  align-items: start !important;
  width: 100% !important;
}
@media (max-width: 960px) {
  .wp-block-woocommerce-cart,
  .woocommerce-cart .wc-block-cart {
    grid-template-columns: 1fr !important;
  }
}

/* Grid children: pin widths, prevent collapse */
.wp-block-woocommerce-cart-items-block,
.wc-block-cart__main {
  min-width: 0 !important;
  grid-column: 1 !important;
}
.wp-block-woocommerce-cart-totals-block,
.wc-block-cart__sidebar {
  min-width: 0 !important;
  grid-column: 2 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 960px) {
  .wp-block-woocommerce-cart-items-block,
  .wc-block-cart__main,
  .wp-block-woocommerce-cart-totals-block,
  .wc-block-cart__sidebar {
    grid-column: 1 !important;
  }
}

/* ── Cart items panel ── */
.wc-block-cart__main,
.wc-block-cart .wp-block-woocommerce-cart-items-block {
  background: var(--card) !important;
  border-radius: 1.75rem !important;
  border: 1px solid var(--border) !important;
  padding: 1.75rem !important;
  box-shadow: 0 4px 40px rgba(44,27,46,0.07) !important;
}

/* ── Order summary sidebar ── */
.wc-block-cart__sidebar,
.wc-block-cart .wp-block-woocommerce-cart-totals-block {
  background: var(--card) !important;
  border-radius: 1.75rem !important;
  border: 1px solid var(--border) !important;
  padding: 1.75rem 2rem !important;
  box-shadow: 0 4px 40px rgba(44,27,46,0.07) !important;
  position: sticky !important;
  top: 5.5rem !important;
}

/* ── Cart line items table ── */
.wc-block-cart-items__header,
.wc-block-cart-items .wc-block-cart-items__header {
  background: var(--muted) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--muted-foreground) !important;
  font-weight: 600 !important;
}
.wc-block-cart-item {
  border-bottom: 1px solid var(--border) !important;
  padding: 1.25rem 0 !important;
  transition: background 0.2s !important;
}
.wc-block-cart-item:last-child { border-bottom: none !important; }
.wc-block-cart-item:hover { background: var(--muted) !important; border-radius: 0.75rem !important; }
.wc-block-cart-item__image img {
  width: 5rem !important;
  height: 5rem !important;
  object-fit: cover !important;
  border-radius: 1rem !important;
  border: 1px solid var(--border) !important;
}
.wc-block-cart-item__product-name {
  font-family: 'Playfair Display', serif !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
}
.wc-block-cart-item__total .wc-block-components-product-price {
  font-weight: 700 !important;
  font-size: 1.0625rem !important;
  color: var(--brand-600) !important;
}

/* Remove button */
.wc-block-cart-item__remove-link,
.wc-block-components-product-metadata__description + .wc-block-cart-item__remove-link {
  color: var(--muted-foreground) !important;
  text-decoration: none !important;
  font-size: 0.75rem !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 9999px !important;
  padding: 0.2rem 0.75rem !important;
  transition: all 0.2s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}
.wc-block-cart-item__remove-link:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #fca5a5 !important;
}

/* Quantity stepper */
.wc-block-components-quantity-selector {
  border: 2px solid var(--border) !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  background: var(--background) !important;
}
.wc-block-components-quantity-selector__button {
  background: var(--muted) !important;
  color: var(--foreground) !important;
  border: none !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem !important;
  transition: background 0.15s !important;
}
.wc-block-components-quantity-selector__button:hover { background: var(--border) !important; }
.wc-block-components-quantity-selector input {
  border: none !important;
  background: transparent !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
  text-align: center !important;
  width: 3rem !important;
}

/* ── Order summary section ── */
.wc-block-components-order-summary__title,
.wc-block-cart .wc-block-components-panel__button {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
}
.wc-block-components-totals-item {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
.wc-block-components-totals-item:last-child { border-bottom: none !important; }
.wc-block-components-totals-item__label {
  color: var(--muted-foreground) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}
.wc-block-components-totals-item__value {
  font-weight: 700 !important;
  color: var(--foreground) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 1.375rem !important;
  font-weight: 800 !important;
  color: var(--brand-600) !important;
}
.wc-block-components-totals-footer-item {
  border-top: 2px solid var(--border) !important;
  padding-top: 1.125rem !important;
  margin-top: 0.5rem !important;
}

/* ── Coupon field ── */
.wc-block-components-totals-coupon__form {
  display: flex !important;
  gap: 0.75rem !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.wc-block-components-totals-coupon__input .wc-block-components-text-input input {
  border: 2px solid var(--border) !important;
  border-radius: 9999px !important;
  padding: 0.625rem 1.25rem !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-family: inherit !important;
  transition: border-color 0.2s !important;
}
.wc-block-components-totals-coupon__input .wc-block-components-text-input input:focus {
  border-color: var(--brand-500) !important;
  outline: none !important;
}
.wc-block-components-totals-coupon .wc-block-components-button {
  background: transparent !important;
  border: 2px solid var(--brand-500) !important;
  color: var(--brand-600) !important;
  border-radius: 9999px !important;
  padding: 0.625rem 1.375rem !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
  animation: none !important;
}
.wc-block-components-totals-coupon .wc-block-components-button:hover {
  background: var(--brand-500) !important;
  color: #fff !important;
  transform: none !important;
}

/* ══════════════════════════════════════════════════════
   ★  PROCEED TO CHECKOUT — MAIN CTA  ★
   ══════════════════════════════════════════════════════ */
.wc-block-cart__submit-container {
  margin-top: 1.75rem !important;
  padding-top: 1.5rem !important;
  border-top: 2px solid var(--border) !important;
}
.wc-block-cart__submit-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem !important;
  width: 100% !important;
  padding: 1.25rem 2rem !important;
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #C9986A 0%, #8B4D6B 50%, #52183E 100%) !important;
  background-size: 200% auto !important;
  border-radius: 9999px !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  animation: lumea-pulse 2.2s ease-in-out infinite, lumea-shimmer 3s linear infinite !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.wc-block-cart__submit-button::before {
  content: '✦';
  font-size: 0.75rem;
  opacity: 0.8;
}
.wc-block-cart__submit-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}
.wc-block-cart__submit-button:hover {
  transform: translateY(-3px) scale(1.02) !important;
  animation-play-state: paused !important;
  box-shadow: 0 16px 50px rgba(201,152,106,0.7), 0 4px 16px rgba(44,27,46,0.25) !important;
}
.wc-block-cart__submit-button[aria-disabled=true] {
  opacity: 0.6 !important;
  animation: none !important;
  cursor: not-allowed !important;
}

/* ── Security badge under CTA ── */
.wc-block-cart__submit-container::after {
  content: '🔒  Secure & Encrypted Checkout';
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.875rem;
  letter-spacing: 0.03em;
}

/* ══════════════════════════════════════════════════════
   CHECKOUT PAGE — BLOCK LAYOUT
   ══════════════════════════════════════════════════════ */
.woocommerce-checkout .wc-block-checkout {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 2.5rem !important;
  align-items: start !important;
}
@media (max-width: 960px) {
  .woocommerce-checkout .wc-block-checkout {
    grid-template-columns: 1fr !important;
  }
}

/* Checkout main fields panel */
.wc-block-checkout__main {
  background: var(--card) !important;
  border-radius: 1.75rem !important;
  border: 1px solid var(--border) !important;
  padding: 2rem !important;
  box-shadow: 0 4px 40px rgba(44,27,46,0.07) !important;
}

/* Checkout sidebar (order summary) */
.wc-block-checkout__sidebar {
  background: var(--card) !important;
  border-radius: 1.75rem !important;
  border: 1px solid var(--border) !important;
  padding: 1.75rem 2rem !important;
  box-shadow: 0 4px 40px rgba(44,27,46,0.07) !important;
  position: sticky !important;
  top: 5.5rem !important;
}

/* Step headings in checkout */
.wc-block-checkout__step-title,
.wc-block-components-checkout-step__heading,
.wc-block-checkout__payment-method-label {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 1.25rem !important;
}

/* Checkout input fields */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-checkout textarea {
  border: 2px solid var(--border) !important;
  border-radius: 0.875rem !important;
  padding: 0.875rem 1.125rem !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-family: inherit !important;
  font-size: 0.9375rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  width: 100% !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-checkout textarea:focus {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 4px rgba(201,152,106,0.12) !important;
  outline: none !important;
}
.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-form label {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--muted-foreground) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 0.375rem !important;
}

/* Payment method radio */
.wc-block-components-radio-control__option {
  border: 2px solid var(--border) !important;
  border-radius: 1rem !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 0.75rem !important;
  transition: border-color 0.2s, background 0.2s !important;
  cursor: pointer !important;
}
.wc-block-components-radio-control__option:has(input:checked) {
  border-color: var(--brand-500) !important;
  background: rgba(201,152,106,0.06) !important;
}

/* Terms checkbox */
.wc-block-checkout__terms {
  font-size: 0.8125rem !important;
  color: var(--muted-foreground) !important;
  margin-top: 1rem !important;
}

/* ══════════════════════════════════════════════════════
   ★★  PLACE ORDER — HERO CTA  ★★
   ══════════════════════════════════════════════════════ */
.wc-block-checkout__actions {
  margin-top: 2rem !important;
  padding-top: 1.5rem !important;
  border-top: 2px solid var(--border) !important;
}
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  padding: 1.375rem 2rem !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #C9986A 0%, #8B4D6B 40%, #52183E 80%, #C9986A 100%) !important;
  background-size: 300% auto !important;
  border-radius: 9999px !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  animation: lumea-pulse 1.8s ease-in-out infinite, lumea-shimmer 2.5s linear infinite !important;
  transition: transform 0.25s ease !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  min-height: 64px !important;
}
.wc-block-components-checkout-place-order-button .wc-block-components-button__text::before {
  content: '🔐  ';
  font-size: 0.9em;
}
.wc-block-components-checkout-place-order-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  pointer-events: none;
  border-radius: inherit;
}
.wc-block-components-checkout-place-order-button:hover {
  transform: translateY(-4px) scale(1.02) !important;
  animation: lumea-shimmer 1.5s linear infinite !important;
  box-shadow: 0 20px 60px rgba(201,152,106,0.75), 0 8px 20px rgba(44,27,46,0.3) !important;
}
.wc-block-components-checkout-place-order-button:disabled {
  opacity: 0.65 !important;
  animation: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Security badge under Place Order */
.wc-block-checkout__actions::after {
  content: '🔒  256-bit SSL Encrypted  ·  Safe & Secure Payment';
  display: block;
  text-align: center;
  font-size: 0.7rem;
  color: var(--muted-foreground);
  margin-top: 0.875rem;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ── General wc-block-components-button (non-primary) ── */
.wc-block-components-button:not(.is-link):not(.wc-block-cart__submit-button):not(.wc-block-components-checkout-place-order-button) {
  background: linear-gradient(to right, var(--brand-500), var(--rose-dark)) !important;
  color: #fff !important;
  border-radius: 9999px !important;
  border: none !important;
  padding: 0.75rem 1.75rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(201,152,106,0.35) !important;
  transition: all 0.25s !important;
}
.wc-block-components-button:not(.is-link):not(.wc-block-cart__submit-button):not(.wc-block-components-checkout-place-order-button):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(201,152,106,0.5) !important;
}

/* ── Express payment buttons area ── */
.wc-block-components-express-payment {
  background: var(--muted) !important;
  border-radius: 1rem !important;
  padding: 1.25rem !important;
  margin-bottom: 1.5rem !important;
  border: 1px solid var(--border) !important;
}
.wc-block-components-express-payment__title-container {
  font-size: 0.8125rem !important;
  color: var(--muted-foreground) !important;
  text-align: center !important;
  margin-bottom: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Dark mode adjustments */
html.dark .wc-block-cart__main,
html.dark .wc-block-cart__sidebar,
html.dark .wc-block-cart .wp-block-woocommerce-cart-items-block,
html.dark .wc-block-cart .wp-block-woocommerce-cart-totals-block,
html.dark .wc-block-checkout__main,
html.dark .wc-block-checkout__sidebar {
  box-shadow: 0 4px 40px rgba(0,0,0,0.3) !important;
}
html.dark .wc-block-cart-item:hover { background: var(--plum-800) !important; }

/* ============================================================
   FIX: Radio button overlapping payment method text
   ============================================================ */

/* Reset absolute-positioned radio — switch to flexbox layout */
.wc-block-components-radio-control__option-layout {
  display: flex !important;
  align-items: center !important;
  gap: 0.875rem !important;
  padding: 0 !important;
  position: static !important;
}

/* Radio input: take it out of absolute flow, sit inline left */
.wc-block-components-radio-control__input {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  flex-shrink: 0 !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  margin: 0 !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  accent-color: var(--brand-500) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  display: inline-block !important;
  cursor: pointer !important;
}

/* Label group: remove old left offset, fill remaining space */
.wc-block-components-radio-control__label-group {
  flex: 1 !important;
  padding-left: 0 !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

/* Label text */
.wc-block-components-radio-control__label {
  font-weight: 600 !important;
  color: var(--foreground) !important;
  font-size: 0.9375rem !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
}

/* Secondary label (e.g., price on right) */
.wc-block-components-radio-control__secondary-label {
  margin-left: auto !important;
  font-weight: 700 !important;
  color: var(--brand-600) !important;
}

/* Description below the label */
.wc-block-components-radio-control__description,
.wc-block-components-radio-control__secondary-description {
  width: 100% !important;
  padding-left: 2rem !important;
  font-size: 0.8125rem !important;
  color: var(--muted-foreground) !important;
  margin-top: 0.25rem !important;
}

/* Payment method option card styling (keep the card look) */
.wc-block-components-radio-control__option {
  border: 2px solid var(--border) !important;
  border-radius: 1rem !important;
  padding: 0.875rem 1.125rem !important;
  margin-bottom: 0.625rem !important;
  transition: border-color 0.2s, background 0.2s !important;
  cursor: pointer !important;
  position: relative !important;
}
.wc-block-components-radio-control__option:has(input:checked) {
  border-color: var(--brand-500) !important;
  background: rgba(201,152,106,0.07) !important;
}
.wc-block-components-radio-control__option:hover {
  border-color: var(--brand-400) !important;
}

/* Accordion payment method (Mollie etc.) */
.wc-block-components-radio-control-accordion-option {
  border: 2px solid var(--border) !important;
  border-radius: 1rem !important;
  margin-bottom: 0.625rem !important;
  overflow: hidden !important;
  transition: border-color 0.2s !important;
}
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0.875rem 1.125rem !important;
}
.wc-block-components-radio-control-accordion-option:has(input:checked) {
  border-color: var(--brand-500) !important;
  background: rgba(201,152,106,0.05) !important;
}
.wc-block-components-radio-control-accordion-content {
  padding: 0.75rem 1.125rem 1rem !important;
  border-top: 1px solid var(--border) !important;
  font-size: 0.875rem !important;
}

/* Accordion label (payment method name with icon) */
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__label img {
  height: 22px !important;
  max-height: 22px !important;
  object-fit: contain !important;
  object-position: left !important;
}

/* Dark mode */
html.dark .wc-block-components-radio-control__input {
  accent-color: var(--brand-400) !important;
}

/* ============================================================
   FIX: Replace display:contents on li (browser bug with grid)
   Use flex so li fills the grid cell and product-card fills li
   ============================================================ */
.products-grid > li,
ul.products > li {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  list-style: none !important;
}
.products-grid > li > .product-card,
ul.products > li > .product-card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.product-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.product-footer {
  margin-top: auto !important;
}

/* Also ensure the products-grid itself has equal-height rows */
.products-grid {
  align-items: stretch !important;
}

/* ============================================================
   SKIN QUIZ MODAL — FULL INTERACTIVE OVERLAY
   ============================================================ */
@keyframes lq-slide-up  { from { opacity:0; transform:translateY(40px) scale(0.96); } to { opacity:1; transform:none; } }
@keyframes lq-slide-in  { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:none; } }
@keyframes lq-opt-pop   { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes lq-dot-ping  { 0%,100%{transform:scale(1);} 50%{transform:scale(1.4);} }
@keyframes lq-shimmer   { from{background-position:-200% center;} to{background-position:200% center;} }

/* ── Overlay ── */
.lq-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(26,14,24,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1rem;
  opacity: 0; transition: opacity 0.35s ease;
}
.lq-overlay.lq-visible { opacity: 1; }

/* ── Modal ── */
.lq-modal {
  background: var(--card);
  border-radius: 2rem;
  border: 1px solid var(--border);
  width: 100%; max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,152,106,0.15);
  position: relative; z-index: 1;
  animation: lq-slide-up 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ── Header ── */
.lq-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.75rem 0;
}
.lq-logo {
  font-family: 'Playfair Display', serif;
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--brand-500);
}
.lq-close {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--muted); color: var(--muted-foreground);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
}
.lq-close:hover { background: var(--border); color: var(--foreground); transform: scale(1.1); }
.lq-close svg { width: 1rem; height: 1rem; }

/* ── Progress ── */
.lq-progress-track {
  height: 4px; background: var(--muted);
  margin: 1rem 1.75rem 0; border-radius: 9999px; overflow: hidden;
}
.lq-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(to right, var(--brand-500), var(--rose-dark));
  border-radius: 9999px;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.lq-step-dots {
  display: flex; align-items: center; gap: 0.5rem;
  justify-content: center; padding: 0.75rem 0 0;
}
.lq-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); transition: all 0.3s;
}
.lq-dot.lq-done { background: var(--brand-500); transform: scale(0.8); }
.lq-dot.lq-current {
  background: var(--brand-500); transform: scale(1.25);
  animation: lq-dot-ping 1s ease-in-out infinite;
}

/* ── Body ── */
.lq-body { padding: 1.5rem 1.75rem 2rem; }

/* ── Question ── */
.lq-question { text-align: center; }
.lq-question.lq-enter { opacity: 0; transform: translateX(30px); }
.lq-question.lq-active {
  opacity: 1; transform: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.lq-q-emoji { font-size: 2.75rem; margin-bottom: 0.75rem; line-height: 1; }
.lq-q-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 700; color: var(--foreground);
  margin-bottom: 0.5rem; line-height: 1.3;
}
.lq-q-sub { font-size: 0.9rem; color: var(--muted-foreground); margin-bottom: 1.75rem; }

/* ── Options ── */
.lq-opts { display: grid; gap: 0.75rem; }
.lq-opts-3 { grid-template-columns: 1fr; }
.lq-opts-5 { grid-template-columns: 1fr 1fr; }
@media (min-width: 500px) { .lq-opts-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .lq-opts-5 { grid-template-columns: 1fr; } }

.lq-opt {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.875rem 1.125rem;
  background: var(--background);
  border: 2px solid var(--border);
  border-radius: 1.125rem; cursor: pointer;
  text-align: left; width: 100%;
  transition: all 0.22s ease;
  animation: lq-opt-pop 0.4s both;
  position: relative; overflow: hidden;
}
.lq-opt::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,152,106,0.08), transparent);
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.lq-opt:hover { border-color: var(--brand-400); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201,152,106,0.2); }
.lq-opt:hover::before { opacity: 1; }
.lq-opt.lq-selected {
  border-color: var(--brand-500) !important;
  background: rgba(201,152,106,0.08) !important;
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(201,152,106,0.2), 0 8px 24px rgba(201,152,106,0.25) !important;
}
.lq-opt.lq-selected::before { opacity: 1; }
.lq-opt-icon { font-size: 1.75rem; flex-shrink: 0; line-height: 1; }
.lq-opt-text { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.lq-opt-text strong { font-size: 0.9375rem; font-weight: 700; color: var(--foreground); }
.lq-opt-text span { font-size: 0.775rem; color: var(--muted-foreground); line-height: 1.35; }
.lq-opt-check {
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.2s;
  background: transparent;
}
.lq-opt-check svg { width: 0.75rem; height: 0.75rem; opacity: 0; transition: opacity 0.2s; }
.lq-opt.lq-selected .lq-opt-check {
  background: var(--brand-500); border-color: var(--brand-500);
}
.lq-opt.lq-selected .lq-opt-check svg { opacity: 1; color: #fff; stroke: #fff; }

/* ── Results ── */
.lq-results.lq-enter { opacity: 0; transform: translateY(20px); }
.lq-results.lq-active {
  opacity: 1; transform: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.lq-results-header { text-align: center; margin-bottom: 1.75rem; }
.lq-results-emoji { font-size: 3rem; margin-bottom: 0.75rem; }
.lq-results-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700; color: var(--foreground); margin-bottom: 0.5rem;
}
.lq-results-header p { font-size: 0.9375rem; color: var(--muted-foreground); }
.lq-results-header strong { color: var(--brand-600); }

/* ── Product cards in results ── */
.lq-rec-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.75rem; }
@media (min-width: 500px) { .lq-rec-grid { grid-template-columns: repeat(3, 1fr); } }

.lq-rec-card {
  background: var(--muted); border: 1px solid var(--border);
  border-radius: 1.375rem; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: lq-opt-pop 0.5s both;
}
.lq-rec-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(201,152,106,0.25); }
.lq-rec-img { aspect-ratio: 1; overflow: hidden; background: var(--cream-100); }
.lq-rec-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.lq-rec-card:hover .lq-rec-img img { transform: scale(1.06); }
.lq-rec-info { padding: 0.875rem; flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.lq-rec-cat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-500); font-weight: 600; }
.lq-rec-info h4 { font-size: 0.875rem; font-weight: 700; color: var(--foreground); line-height: 1.3; }
.lq-rec-price { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: var(--brand-600); margin-top: auto; padding-top: 0.375rem; }
.lq-rec-actions { padding: 0 0.875rem 0.875rem; display: flex; flex-direction: column; gap: 0.5rem; }
.lq-rec-view {
  display: block; text-align: center; padding: 0.5rem;
  border: 1.5px solid var(--border); border-radius: 9999px;
  font-size: 0.8rem; font-weight: 600; color: var(--foreground);
  transition: all 0.2s; text-decoration: none;
}
.lq-rec-view:hover { border-color: var(--brand-500); color: var(--brand-600); background: rgba(201,152,106,0.06); }
.lq-rec-cart {
  display: flex; align-items: center; justify-content: center; gap: 0.375rem;
  padding: 0.625rem 1rem;
  background: linear-gradient(135deg, var(--brand-500), var(--rose-dark));
  color: #fff; border: none; border-radius: 9999px;
  font-size: 0.8125rem; font-weight: 700; cursor: pointer;
  transition: all 0.25s; box-shadow: 0 4px 16px rgba(201,152,106,0.4);
}
.lq-rec-cart svg { width: 0.875rem; height: 0.875rem; }
.lq-rec-cart:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(201,152,106,0.5); }
.lq-rec-cart.lq-cart-done { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 4px 16px rgba(34,197,94,0.4); }

/* ── Results footer ── */
.lq-results-footer { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.lq-restart {
  padding: 0.75rem 1.75rem;
  border: 2px solid var(--border); border-radius: 9999px;
  background: transparent; color: var(--muted-foreground);
  font-size: 0.875rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
}
.lq-restart:hover { border-color: var(--brand-500); color: var(--brand-600); }
.lq-shop-all {
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, var(--brand-500), var(--rose-dark), var(--plum-600));
  color: #fff; border-radius: 9999px;
  font-size: 0.9375rem; font-weight: 700; text-decoration: none;
  transition: all 0.25s; box-shadow: 0 6px 20px rgba(201,152,106,0.4);
  animation: lq-shimmer 3s linear infinite;
  background-size: 200% auto;
}
.lq-shop-all:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201,152,106,0.6); }

/* ── Confetti canvas ── */
.lq-confetti-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 10000; display: none;
}

/* Dark mode */
html.dark .lq-opt { background: var(--plum-900); }
html.dark .lq-opt:hover { background: var(--plum-800); }
html.dark .lq-opt.lq-selected { background: rgba(201,152,106,0.12) !important; }
html.dark .lq-rec-img { background: var(--plum-800); }
html.dark .lq-modal { box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,152,106,0.2); }

/* ══════════════════════════════════════════════════════
   CHECKOUT — ORDER SUMMARY ITEM FIX
   Ensures product name fills available flex space and
   never collapses to near-zero width (letter-per-line bug)
   ══════════════════════════════════════════════════════ */

/* Widen the selector so it fires even without woocommerce-checkout body class */
.wc-block-checkout {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 2.5rem !important;
  align-items: start !important;
  max-width: 100% !important;
}
@media (max-width: 960px) {
  .wc-block-checkout {
    grid-template-columns: 1fr !important;
  }
}

/* Sidebar must not overflow its grid cell */
.wc-block-checkout__sidebar,
.wp-block-woocommerce-checkout-totals-block {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Order summary item — proper flex so name column expands */
.wc-block-components-order-summary-item {
  display: flex !important;
  align-items: flex-start !important;
  width: 100% !important;
  gap: 0 !important;
}
.wc-block-components-order-summary-item__image {
  flex: 0 0 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  position: relative !important;
}
.wc-block-components-order-summary-item__image img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 0.75rem !important;
  object-fit: cover !important;
  border: 1px solid var(--border) !important;
  display: block !important;
  max-width: none !important;
}
/* Description must flex-grow and allow wrapping */
.wc-block-components-order-summary-item__description {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  padding: 4px 8px 12px 12px !important;
}
/* Total price stays at natural width on the right */
.wc-block-components-order-summary-item__total-price {
  flex: 0 0 auto !important;
  text-align: right !important;
  padding-top: 4px !important;
  min-width: 60px !important;
}

/* Product name text inside the description */
.wc-block-components-order-summary-item__name,
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-family: 'Playfair Display', serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  line-height: 1.4 !important;
  display: block !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* ── Coupon/accordion panel button — prevent letter-by-letter collapse ── */
.wc-block-components-panel__button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  gap: 0.5rem !important;
}
.wc-block-components-panel__button-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  word-break: break-word !important;
  white-space: normal !important;
  text-align: left !important;
  font-size: 1rem !important;
}

/* ── Checkout grid — also fire without body class ── */
.wp-block-woocommerce-checkout,
.woocommerce-checkout .wc-block-checkout {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 2rem !important;
  align-items: start !important;
  width: 100% !important;
}
.wp-block-woocommerce-checkout-fields-block,
.wc-block-checkout__main {
  min-width: 0 !important;
  grid-column: 1 !important;
}
.wp-block-woocommerce-checkout-totals-block,
.wc-block-checkout__sidebar {
  min-width: 0 !important;
  grid-column: 2 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
@media (max-width: 960px) {
  .wp-block-woocommerce-checkout,
  .woocommerce-checkout .wc-block-checkout {
    grid-template-columns: 1fr !important;
  }
  .wp-block-woocommerce-checkout-fields-block,
  .wc-block-checkout__main,
  .wp-block-woocommerce-checkout-totals-block,
  .wc-block-checkout__sidebar {
    grid-column: 1 !important;
  }
}

/* ══════════════════════════════════════════════════════
   WC FULL-WIDTH PAGE CONTENT
   ══════════════════════════════════════════════════════ */
.wc-page-content {
  width: 100%;
}

/* CSS :has() safety net */
.entry-content:has(.wc-block-cart),
.entry-content:has(.wp-block-woocommerce-cart),
.entry-content:has(.wc-block-checkout),
.entry-content:has(.wp-block-woocommerce-checkout) {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Cart items table — desktop alignment ── */
.wc-block-cart__main table.wc-block-cart-items,
.wp-block-woocommerce-cart-items-block table.wc-block-cart-items {
  width: 100% !important;
  table-layout: auto !important;
}
.wc-block-cart-item__image {
  width: 96px !important;
  vertical-align: top !important;
}
.wc-block-cart-item__image img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 0.875rem !important;
  object-fit: cover !important;
  border: 1px solid var(--border) !important;
  display: block !important;
}
.wc-block-cart-item__product {
  vertical-align: top !important;
  padding-left: 1rem !important;
}
.wc-block-cart-item__total {
  vertical-align: top !important;
  text-align: right !important;
  white-space: nowrap !important;
  padding-left: 1rem !important;
  min-width: 90px !important;
}

/* ╔══════════════════════════════════════════════════════════════════
   ║  LUMEA — CART & CHECKOUT  (full redesign)
   ╚══════════════════════════════════════════════════════════════════ */

/* ── 1. Page wrapper: WC pages bypass entry-content max-width ── */
.wc-page-content { width: 100%; }

.entry-content:has(.wc-block-cart),
.entry-content:has(.wp-block-woocommerce-cart),
.entry-content:has(.wc-block-checkout),
.entry-content:has(.wp-block-woocommerce-checkout) {
  max-width: 100% !important;
  margin: 0 !important;
}

/* ── 2. Shared grid foundation ── */
.wp-block-woocommerce-cart,
.wc-block-cart,
.wp-block-woocommerce-checkout,
.wc-block-checkout {
  display: grid !important;
  grid-template-columns: 1fr 400px !important;
  gap: 2.5rem !important;
  align-items: start !important;
  width: 100% !important;
}
@media (max-width: 1024px) {
  .wp-block-woocommerce-cart,
  .wc-block-cart,
  .wp-block-woocommerce-checkout,
  .wc-block-checkout {
    grid-template-columns: 1fr 340px !important;
    gap: 1.5rem !important;
  }
}
@media (max-width: 768px) {
  .wp-block-woocommerce-cart,
  .wc-block-cart,
  .wp-block-woocommerce-checkout,
  .wc-block-checkout {
    grid-template-columns: 1fr !important;
  }
}

/* ── 3. Grid column pinning + collapse-prevention ── */
.wp-block-woocommerce-cart-items-block,
.wc-block-cart__main,
.wp-block-woocommerce-checkout-fields-block,
.wc-block-checkout__main {
  grid-column: 1 !important;
  min-width: 0 !important;
}
.wp-block-woocommerce-cart-totals-block,
.wc-block-cart__sidebar,
.wp-block-woocommerce-checkout-totals-block,
.wc-block-checkout__sidebar {
  grid-column: 2 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .wp-block-woocommerce-cart-items-block,
  .wc-block-cart__main,
  .wp-block-woocommerce-checkout-fields-block,
  .wc-block-checkout__main,
  .wp-block-woocommerce-cart-totals-block,
  .wc-block-cart__sidebar,
  .wp-block-woocommerce-checkout-totals-block,
  .wc-block-checkout__sidebar {
    grid-column: 1 !important;
  }
}

/* ── 4. Left panel — cart items & checkout form ── */
.wp-block-woocommerce-cart-items-block,
.wc-block-cart__main,
.wp-block-woocommerce-checkout-fields-block,
.wc-block-checkout__main {
  background: var(--card) !important;
  border-radius: 1.5rem !important;
  border: 1px solid var(--border) !important;
  padding: 2rem !important;
  box-shadow: 0 2px 24px rgba(44,27,46,0.06) !important;
}

/* ── 5. Right panel — order summary / totals ── */
.wp-block-woocommerce-cart-totals-block,
.wc-block-cart__sidebar,
.wp-block-woocommerce-checkout-totals-block,
.wc-block-checkout__sidebar {
  background: var(--card) !important;
  border-radius: 1.5rem !important;
  border: 1px solid var(--border) !important;
  padding: 2rem !important;
  box-shadow: 0 2px 24px rgba(44,27,46,0.06) !important;
  position: sticky !important;
  top: 5.5rem !important;
  overflow: visible !important;
}

/* ── 6. Cart items table ── */
table.wc-block-cart-items {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

/* Table header */
table.wc-block-cart-items thead tr,
.wc-block-cart-items__header {
  background: transparent !important;
  border-bottom: 2px solid var(--border) !important;
  border-radius: 0 !important;
}
table.wc-block-cart-items th {
  padding: 0 1rem 1rem 0 !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--muted-foreground) !important;
}
table.wc-block-cart-items th:first-child { padding-left: 0 !important; }
table.wc-block-cart-items th:last-child  { text-align: right !important; }

/* Table rows */
table.wc-block-cart-items td {
  padding: 1.5rem 1rem 1.5rem 0 !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: top !important;
}
table.wc-block-cart-items tr:last-child td { border-bottom: none !important; }

/* Image cell */
.wc-block-cart-item__image {
  width: 88px !important;
  padding-right: 0 !important;
}
.wc-block-cart-item__image img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 0.875rem !important;
  object-fit: cover !important;
  border: 1px solid var(--border) !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Product cell */
.wc-block-cart-item__product {
  padding-left: 1.25rem !important;
}
.wc-block-cart-item__product-name,
.wc-block-cart-item__product-name a {
  font-family: 'Playfair Display', serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 0.375rem !important;
}
.wc-block-cart-item__product-name a:hover { color: var(--brand-600) !important; }

/* Prices inside product cell */
.wc-block-cart-item__prices {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 0.5rem !important;
}
.wc-block-cart-item__prices del {
  color: var(--muted-foreground) !important;
  font-size: 0.875rem !important;
  opacity: 0.7 !important;
}
.wc-block-cart-item__prices ins,
.wc-block-cart-item__prices .wc-block-components-product-price__value {
  color: var(--brand-600) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.wc-block-components-sale-badge {
  background: linear-gradient(135deg, var(--brand-500), var(--rose-dark)) !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  padding: 0.15rem 0.5rem !important;
  border-radius: 9999px !important;
  letter-spacing: 0.04em !important;
}

/* Product metadata / short description */
.wc-block-components-product-metadata,
.wc-block-cart-item__product .wc-block-components-product-metadata__description {
  font-size: 0.8125rem !important;
  color: var(--muted-foreground) !important;
  line-height: 1.5 !important;
  margin-bottom: 0.75rem !important;
}

/* Quantity stepper */
.wc-block-components-quantity-selector {
  display: inline-flex !important;
  align-items: center !important;
  border: 2px solid var(--border) !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  background: var(--background) !important;
  gap: 0 !important;
}
.wc-block-components-quantity-selector__button {
  background: transparent !important;
  border: none !important;
  color: var(--foreground) !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.wc-block-components-quantity-selector__button:hover {
  background: var(--muted) !important;
  color: var(--brand-600) !important;
}
.wc-block-components-quantity-selector input {
  border: none !important;
  background: transparent !important;
  color: var(--foreground) !important;
  font-weight: 700 !important;
  text-align: center !important;
  width: 2.5rem !important;
  font-size: 0.9375rem !important;
}

/* Remove link */
.wc-block-cart-item__remove-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  color: var(--muted-foreground) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 9999px !important;
  padding: 0.2rem 0.75rem !important;
  margin-left: 0.75rem !important;
  transition: all 0.2s !important;
}
.wc-block-cart-item__remove-link:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #fca5a5 !important;
}

/* Qty + remove row */
.wc-block-cart-item__quantity {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex-wrap: wrap !important;
  margin-top: 0.75rem !important;
}

/* Total cell */
.wc-block-cart-item__total {
  text-align: right !important;
  white-space: nowrap !important;
  padding-left: 1rem !important;
  min-width: 90px !important;
}
.wc-block-cart-item__total .wc-block-components-product-price {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  font-size: 1.0625rem !important;
  color: var(--brand-600) !important;
}

/* ── 7. Order summary / totals sidebar ── */
.wc-block-components-order-summary__title,
.wc-block-cart__totals-title,
.wc-block-cart .wc-block-components-panel__button,
.wc-block-checkout .wc-block-components-order-summary__title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid var(--border) !important;
  width: 100% !important;
}

/* Coupon accordion panel button */
.wc-block-components-panel__button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  gap: 0.5rem !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 1rem 0 !important;
}
.wc-block-components-panel__button-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  word-break: break-word !important;
  white-space: normal !important;
  text-align: left !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  color: var(--foreground) !important;
}

/* Totals rows */
.wc-block-components-totals-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0.875rem 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
.wc-block-components-totals-item:last-child { border-bottom: none !important; }
.wc-block-components-totals-item__label {
  color: var(--muted-foreground) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}
.wc-block-components-totals-item__value {
  font-weight: 700 !important;
  color: var(--foreground) !important;
  font-size: 0.9375rem !important;
}
.wc-block-components-totals-footer-item {
  border-top: 2px solid var(--border) !important;
  margin-top: 0.5rem !important;
  padding-top: 1.125rem !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: 'Playfair Display', serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--brand-600) !important;
}

/* Coupon form */
.wc-block-components-totals-coupon__form {
  display: flex !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
  margin: 0.75rem 0 !important;
}
.wc-block-components-totals-coupon__input {
  flex: 1 1 140px !important;
  min-width: 0 !important;
}
.wc-block-components-totals-coupon__input .wc-block-components-text-input input {
  border: 2px solid var(--border) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  width: 100% !important;
  transition: border-color 0.2s !important;
}
.wc-block-components-totals-coupon__input .wc-block-components-text-input input:focus {
  border-color: var(--brand-500) !important;
  outline: none !important;
}
.wc-block-components-totals-coupon__button {
  background: transparent !important;
  border: 2px solid var(--brand-500) !important;
  color: var(--brand-600) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.wc-block-components-totals-coupon__button:hover {
  background: var(--brand-500) !important;
  color: #fff !important;
}

/* Order summary items in checkout sidebar */
.wc-block-components-order-summary-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.875rem !important;
  padding: 1rem 0 !important;
  border-bottom: 1px solid var(--border) !important;
  width: 100% !important;
}
.wc-block-components-order-summary-item:last-child { border-bottom: none !important; }
.wc-block-components-order-summary-item__image {
  flex: 0 0 56px !important;
  width: 56px !important;
  position: relative !important;
}
.wc-block-components-order-summary-item__image img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 0.625rem !important;
  object-fit: cover !important;
  border: 1px solid var(--border) !important;
  display: block !important;
}
.wc-block-components-order-summary-item__quantity {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  background: var(--brand-500) !important;
  color: #fff !important;
  border-radius: 9999px !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  min-height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
}
.wc-block-components-order-summary-item__description {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
.wc-block-components-order-summary-item__name {
  font-family: 'Playfair Display', serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  line-height: 1.4 !important;
  display: block !important;
  margin-bottom: 0.25rem !important;
}
.wc-block-components-order-summary-item__total-price {
  flex: 0 0 auto !important;
  text-align: right !important;
  min-width: 60px !important;
}
.wc-block-components-order-summary-item__total-price .wc-block-components-product-price {
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  color: var(--brand-600) !important;
}

/* ── 8. Proceed to Checkout button (cart) ── */
.wc-block-cart__submit-container {
  margin-top: 1.75rem !important;
  padding-top: 1.5rem !important;
  border-top: 2px solid var(--border) !important;
}
.wc-block-cart__submit-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 1.125rem 2rem !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #C9986A 0%, #8B4D6B 50%, #52183E 100%) !important;
  background-size: 200% auto !important;
  border-radius: 9999px !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  animation: lumea-shimmer 3s linear infinite !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
  box-shadow: 0 4px 20px rgba(201,152,106,0.4) !important;
}
.wc-block-cart__submit-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(201,152,106,0.6) !important;
  animation-play-state: paused !important;
}
.wc-block-cart__submit-button[aria-disabled=true] {
  opacity: 0.6 !important;
  animation: none !important;
  cursor: not-allowed !important;
}
.wc-block-cart__submit-container::after {
  content: '🔒  Safe & Encrypted Checkout';
  display: block;
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted-foreground);
  margin-top: 0.75rem;
  letter-spacing: 0.04em;
}

/* ── 9. Checkout form fields ── */
.wc-block-checkout__step-title,
.wc-block-components-checkout-step__heading {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  padding-bottom: 0.875rem !important;
  border-bottom: 2px solid var(--border) !important;
  margin-bottom: 1.5rem !important;
}
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-checkout textarea {
  width: 100% !important;
  padding: 0.875rem 1.125rem !important;
  border: 2px solid var(--border) !important;
  border-radius: 0.875rem !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-family: inherit !important;
  font-size: 0.9375rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  box-sizing: border-box !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(201,152,106,0.15) !important;
  outline: none !important;
}
.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-form label {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--muted-foreground) !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
}

/* Payment options */
.wc-block-components-radio-control__option {
  border: 2px solid var(--border) !important;
  border-radius: 1rem !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 0.75rem !important;
  transition: border-color 0.2s, background 0.2s !important;
  cursor: pointer !important;
}
.wc-block-components-radio-control__option:has(input:checked) {
  border-color: var(--brand-500) !important;
  background: rgba(201,152,106,0.05) !important;
}

/* ── 10. Place Order button (checkout) ── */
.wc-block-components-checkout-place-order-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  padding: 1.25rem 2rem !important;
  font-size: 1.0625rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #C9986A 0%, #8B4D6B 45%, #52183E 100%) !important;
  background-size: 200% auto !important;
  border-radius: 9999px !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  animation: lumea-shimmer 2.5s linear infinite !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
  box-shadow: 0 6px 24px rgba(201,152,106,0.45) !important;
  min-height: 60px !important;
  margin-top: 1.5rem !important;
}
.wc-block-components-checkout-place-order-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 48px rgba(201,152,106,0.65) !important;
  animation-play-state: paused !important;
}
.wc-block-components-checkout-place-order-button:disabled {
  opacity: 0.6 !important; animation: none !important; cursor: not-allowed !important;
}
.wc-block-checkout__actions::after {
  content: '🔒  256-bit SSL  ·  Safe & Secure';
  display: block;
  text-align: center;
  font-size: 0.7rem;
  color: var(--muted-foreground);
  margin-top: 0.875rem;
  letter-spacing: 0.04em;
}

/* ── 11. Express payments ── */
.wc-block-components-express-payment {
  background: var(--muted) !important;
  border-radius: 1rem !important;
  padding: 1.125rem !important;
  margin-bottom: 1.25rem !important;
  border: 1px solid var(--border) !important;
}
.wc-block-components-express-payment__title-container {
  font-size: 0.75rem !important;
  color: var(--muted-foreground) !important;
  text-align: center !important;
  margin-bottom: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ── 12. Secondary buttons (apply coupon, etc.) ── */
.wc-block-components-button:not(.is-link):not(.wc-block-cart__submit-button):not(.wc-block-components-checkout-place-order-button):not(.wc-block-components-totals-coupon__button) {
  background: linear-gradient(to right, var(--brand-500), var(--rose-dark)) !important;
  color: #fff !important;
  border-radius: 9999px !important;
  border: none !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 4px 14px rgba(201,152,106,0.3) !important;
}
.wc-block-components-button:not(.is-link):not(.wc-block-cart__submit-button):not(.wc-block-components-checkout-place-order-button):not(.wc-block-components-totals-coupon__button):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(201,152,106,0.45) !important;
}

/* ── 13. Dark mode ── */
html.dark .wp-block-woocommerce-cart-items-block,
html.dark .wc-block-cart__main,
html.dark .wp-block-woocommerce-cart-totals-block,
html.dark .wc-block-cart__sidebar,
html.dark .wc-block-checkout__main,
html.dark .wc-block-checkout__sidebar {
  box-shadow: 0 4px 32px rgba(0,0,0,0.35) !important;
}

/* ╔══════════════════════════════════════════════════════════════
   ║  LUMEA — FINAL CART & CHECKOUT LAYOUT
   ║  Works with WooCommerce's .wc-block-components-sidebar-layout
   ║  flex system instead of fighting it with grid overrides
   ╚══════════════════════════════════════════════════════════════ */

/* 1. Cancel all our previous grid overrides on the outer blocks */
.wp-block-woocommerce-cart,
.wc-block-cart,
.wp-block-woocommerce-checkout,
.wc-block-checkout {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: none !important;
}

/* 2. The real layout container — keep WC's flex, fix the widths */
.wc-block-components-sidebar-layout {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 2.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 3. Main content (left panel) — fills remaining space */
.wc-block-components-sidebar-layout .wc-block-components-main {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* 4. Sidebar (right panel) — fixed 400px */
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
  flex: 0 0 400px !important;
  width: 400px !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  box-sizing: border-box !important;
  position: sticky !important;
  top: 5.5rem !important;
  align-self: flex-start !important;
}

/* 5. Mobile: stack vertically */
@media (max-width: 768px) {
  .wc-block-components-sidebar-layout {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
  }
  .wc-block-components-sidebar-layout .wc-block-components-main,
  .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    flex: 1 1 100% !important;
    width: 100% !important;
    position: static !important;
  }
}
@media (min-width: 769px) and (max-width: 1080px) {
  .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    flex: 0 0 320px !important;
    width: 320px !important;
  }
}

/* 6. Panel card styling — main (left) */
.wc-block-components-sidebar-layout .wc-block-components-main {
  background: var(--card) !important;
  border-radius: 1.5rem !important;
  border: 1px solid var(--border) !important;
  padding: 2rem !important;
  box-shadow: 0 2px 24px rgba(44,27,46,0.06) !important;
}

/* 7. Panel card styling — sidebar (right) */
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
  background: var(--card) !important;
  border-radius: 1.5rem !important;
  border: 1px solid var(--border) !important;
  padding: 2rem !important;
  box-shadow: 0 2px 24px rgba(44,27,46,0.06) !important;
}

/* 8. Override WC's default padding-right on main that causes gap */
.wc-block-components-sidebar-layout .wc-block-components-main > * {
  padding-right: 0 !important;
}

/* 9. Cart items table inside main */
.wc-block-components-main table.wc-block-cart-items {
  width: 100% !important;
  border-collapse: collapse !important;
}
.wc-block-components-main table.wc-block-cart-items th {
  padding: 0 0.75rem 0.875rem 0 !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--muted-foreground) !important;
  border-bottom: 2px solid var(--border) !important;
}
.wc-block-components-main table.wc-block-cart-items td {
  padding: 1.5rem 0.75rem 1.5rem 0 !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: top !important;
}
.wc-block-components-main table.wc-block-cart-items tr:last-child td {
  border-bottom: none !important;
}
.wc-block-cart-item__image { width: 90px !important; }
.wc-block-cart-item__image img {
  width: 76px !important; height: 76px !important;
  border-radius: 0.75rem !important;
  object-fit: cover !important;
  border: 1px solid var(--border) !important;
  display: block !important;
}
.wc-block-cart-item__product { padding-left: 1rem !important; }
.wc-block-cart-item__product-name a {
  font-family: 'Playfair Display', serif !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 0.25rem !important;
}
.wc-block-cart-item__product-name a:hover { color: var(--brand-600) !important; }
.wc-block-cart-item__total {
  text-align: right !important;
  white-space: nowrap !important;
  min-width: 80px !important;
  padding-left: 0.75rem !important;
}
.wc-block-cart-item__total .wc-block-components-product-price {
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--brand-600) !important;
}

/* 10. Quantity stepper */
.wc-block-components-quantity-selector {
  display: inline-flex !important;
  align-items: center !important;
  border: 2px solid var(--border) !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  background: var(--background) !important;
}
.wc-block-components-quantity-selector__button {
  background: transparent !important;
  border: none !important;
  color: var(--foreground) !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  font-size: 1.125rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s !important;
}
.wc-block-components-quantity-selector__button:hover {
  background: var(--muted) !important;
  color: var(--brand-600) !important;
}
.wc-block-components-quantity-selector input {
  border: none !important;
  background: transparent !important;
  color: var(--foreground) !important;
  font-weight: 700 !important;
  text-align: center !important;
  width: 2.5rem !important;
  font-size: 0.9375rem !important;
}

/* 11. Remove button */
.wc-block-cart-item__remove-link {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--muted-foreground) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 9999px !important;
  padding: 0.2rem 0.75rem !important;
  margin-left: 0.75rem !important;
  transition: all 0.2s !important;
}
.wc-block-cart-item__remove-link:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #fca5a5 !important;
}

/* 12. Totals / Order summary inside sidebar */
.wc-block-components-sidebar .wc-block-components-totals-item,
.wc-block-components-sidebar .wc-block-order-summary-item {
  border-bottom: 1px solid var(--border) !important;
  padding: 0.875rem 0 !important;
}
.wc-block-components-sidebar .wc-block-components-totals-item:last-child { border-bottom: none !important; }
.wc-block-components-totals-item__label { color: var(--muted-foreground) !important; font-size: 0.875rem !important; font-weight: 500 !important; }
.wc-block-components-totals-item__value { font-weight: 700 !important; color: var(--foreground) !important; }
.wc-block-components-totals-footer-item {
  border-top: 2px solid var(--border) !important;
  margin-top: 0.5rem !important;
  padding-top: 1.125rem !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: 'Playfair Display', serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--brand-600) !important;
}

/* 13. Order summary heading inside sidebar */
.wc-block-components-sidebar .wc-block-components-order-summary__title,
.wc-block-components-sidebar .wc-block-cart__totals-title,
.wc-block-components-sidebar h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  margin-bottom: 1rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid var(--border) !important;
}

/* 14. Order summary items (checkout sidebar) */
.wc-block-components-order-summary-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.875rem !important;
  padding: 1rem 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
.wc-block-components-order-summary-item:last-child { border-bottom: none !important; }
.wc-block-components-order-summary-item__image {
  flex: 0 0 60px !important; width: 60px !important; position: relative !important;
}
.wc-block-components-order-summary-item__image img {
  width: 60px !important; height: 60px !important;
  border-radius: 0.75rem !important;
  object-fit: cover !important;
  border: 1px solid var(--border) !important;
  display: block !important;
}
.wc-block-components-order-summary-item__quantity {
  position: absolute !important; top: -6px !important; right: -6px !important;
  background: var(--brand-500) !important; color: #fff !important;
  border-radius: 9999px !important; font-size: 0.65rem !important; font-weight: 700 !important;
  min-width: 18px !important; min-height: 18px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 4px !important;
}
.wc-block-components-order-summary-item__description {
  flex: 1 1 0% !important; min-width: 0 !important;
  overflow-wrap: break-word !important; word-break: break-word !important;
}
.wc-block-components-order-summary-item__name {
  font-family: 'Playfair Display', serif !important;
  font-size: 0.875rem !important; font-weight: 600 !important;
  color: var(--foreground) !important; line-height: 1.4 !important;
  display: block !important; margin-bottom: 0.25rem !important;
}
.wc-block-components-order-summary-item__total-price {
  flex: 0 0 auto !important; text-align: right !important; min-width: 60px !important;
  font-weight: 700 !important; color: var(--brand-600) !important;
}

/* 15. Coupon panel button */
.wc-block-components-panel__button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  gap: 0.5rem !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  cursor: pointer !important;
  padding: 0.875rem 0 !important;
}
.wc-block-components-panel__button-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  word-break: break-word !important;
  white-space: normal !important;
  text-align: left !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
}

/* 16. Sale badge */
.wc-block-components-sale-badge {
  background: linear-gradient(135deg, var(--brand-500), var(--rose-dark)) !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  padding: 0.15rem 0.6rem !important;
  border-radius: 9999px !important;
  letter-spacing: 0.04em !important;
  display: inline-block !important;
}

/* 17. Proceed to Checkout / Place Order buttons */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 1.125rem 2rem !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #C9986A 0%, #8B4D6B 50%, #52183E 100%) !important;
  background-size: 200% auto !important;
  border-radius: 9999px !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  animation: lumea-shimmer 3s linear infinite !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
  box-shadow: 0 4px 20px rgba(201,152,106,0.4) !important;
  margin-top: 1.25rem !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(201,152,106,0.6) !important;
  animation-play-state: paused !important;
}
.wc-block-cart__submit-button[aria-disabled=true],
.wc-block-components-checkout-place-order-button:disabled {
  opacity: 0.6 !important; animation: none !important; cursor: not-allowed !important;
}

/* 18. Security note under buttons */
.wc-block-cart__submit-container::after,
.wc-block-checkout__actions::after {
  content: '🔒  Safe & Encrypted Checkout';
  display: block;
  text-align: center;
  font-size: 0.7rem;
  color: var(--muted-foreground);
  margin-top: 0.75rem;
  letter-spacing: 0.04em;
}

/* 19. Checkout form inputs */
.wc-block-components-text-input input,
.wc-block-components-select select {
  width: 100% !important;
  padding: 0.875rem 1.125rem !important;
  border: 2px solid var(--border) !important;
  border-radius: 0.875rem !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-family: inherit !important;
  font-size: 0.9375rem !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(201,152,106,0.15) !important;
  outline: none !important;
}
.wc-block-components-form label,
.wc-block-components-form .wc-block-components-text-input label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--muted-foreground) !important;
  margin-bottom: 0.375rem !important;
  display: block !important;
}

/* 20. Dark mode */
html.dark .wc-block-components-sidebar-layout .wc-block-components-main,
html.dark .wc-block-components-sidebar-layout .wc-block-components-sidebar {
  box-shadow: 0 4px 32px rgba(0,0,0,0.35) !important;
}


/* ============================================================
   MEGA CATEGORY NAV
   ============================================================ */
.lumea-mega-nav { display: none; /* no longer used as separate bar */ }
@media (min-width: 1024px) {
  .lumea-mega-nav { display: block; }
}

.mega-nav-inner {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 1280px;
  margin: 0 auto;
}
.mega-nav-inner::-webkit-scrollbar { display: none; }

.mega-cat { position: static; flex-shrink: 0; }

.mega-cat-link {
  display: flex; align-items: center; gap: 4px;
  padding: 0.7rem 1.1rem;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--foreground);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  text-decoration: none;
}
.mega-cat:hover > .mega-cat-link { color: var(--brand-600); border-bottom-color: var(--brand-600); }
.mega-cat--sale > .mega-cat-link { color: #dc2626; font-weight: 700; }
.mega-cat--sale:hover > .mega-cat-link { color: #b91c1c; border-bottom-color: #dc2626; }

/* Full-width dropdown */
.mega-dropdown {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  position: fixed;
  left: 0; right: 0;
  top: calc(34px + 5rem + 44px);
  background: var(--card);
  border-top: 2px solid var(--brand-300);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 16px 48px rgba(0,0,0,0.13);
  z-index: 43;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.25s;
}
.mega-cat:hover > .mega-dropdown,
.mega-cat:focus-within > .mega-dropdown,
.mega-dropdown:hover,
.mega-dropdown:focus-within {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
/* Invisible bridge so the cursor can travel from the category link to the dropdown
   without the hover state breaking on any micro-gap */
.mega-dropdown::before {
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 16px;
  background: transparent;
}
html.dark .mega-dropdown { border-top-color: var(--brand-600); }

.mega-dropdown-body {
  display: flex;
  gap: 2.5rem;
  padding: 1.75rem 0 2rem;
  align-items: flex-start;
}

.mega-col { min-width: 150px; flex: 1; max-width: 200px; }

.mega-col-all {
  display: inline-block;
  font-size: 0.75rem; font-weight: 700;
  color: var(--brand-600);
  text-transform: uppercase; letter-spacing: 0.06em;
  text-decoration: none;
  margin-bottom: 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  width: 100%;
}
.mega-col-all:hover { text-decoration: underline; }

.mega-col-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.mega-col-list li a {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  text-decoration: none;
  padding: 0.3rem 0.5rem;
  border-radius: 0.375rem;
  transition: background 0.15s, color 0.15s;
  line-height: 1.5;
}
.mega-col-list li a:hover {
  color: var(--brand-600);
  background: rgba(201,152,106,0.07);
}

/* Mobile category groups */
.mobile-cat-group { margin-bottom: 2px; }
.mobile-sub-link--parent {
  font-weight: 600;
  color: var(--foreground) !important;
}
.mobile-sub-link--child {
  margin-left: 1.25rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground) !important;
}
.mobile-cat-children { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
/* Inline mega nav in header */
.nav-mega-wrap {
  display: none !important;
  align-items: stretch;
  align-self: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  flex: 1 1 0;
  min-width: 0;             /* critical: lets flex container shrink so overflow scrolls */
  justify-content: flex-start;
  padding: 0 0.5rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 1024px) {
  .nav-mega-wrap { display: flex !important; }
}
.nav-mega-wrap::-webkit-scrollbar { display: none; }
/* Stretch each category to the full header height so the cursor leaving the
   link enters the dropdown directly (no dead-zone between them) */
.nav-mega-wrap .mega-cat { display: flex; align-items: stretch; align-self: stretch; }
.nav-mega-wrap .mega-cat-link {
  font-size: 0.9rem;
  padding: 0 1rem;
  height: 100%;
  border-radius: 0;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.nav-mega-wrap .nav-link { font-size: 0.9rem; padding: 0 1rem; }
.nav-mega-wrap .mega-cat--sale .nav-link { color: #dc2626; font-weight: 700; }
.nav-mega-wrap .mega-cat--sale:hover .nav-link { color: #b91c1c; }

/* Mega dropdown — header has backdrop-filter, which makes it the containing
   block for position:fixed children. Anchor to 100% of header height so the
   panel sits flush against the header bottom (no gap, no cursor dead-zone) */
.mega-dropdown {
  top: 100% !important;
}

/* ============================================================
   MOBILE ACCORDION MENU
   ============================================================ */
#mobile-menu { display:none; }

.mob-menu-inner {
  padding: 0.5rem 0 1.25rem;
  max-height: calc(100vh - 66px - 34px);
  overflow-y: auto;
}

/* Accordion row */
.mob-acc { border-bottom: 1px solid var(--border); }
.mob-acc-head {
  display: flex; align-items: center;
}
.mob-acc-label {
  flex: 1;
  display: block;
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--foreground);
  text-decoration: none;
}
.mob-acc-label--sale { color: #dc2626; font-weight: 700; }
.mob-acc-label:hover { color: var(--brand-600); }

.mob-acc-toggle {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  color: var(--muted-foreground);
  background: none; border: none; cursor: pointer;
}
.mob-acc-toggle svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.5;
  transition: transform 0.22s ease;
}
.mob-acc.open .mob-acc-toggle svg { transform: rotate(180deg); }
.mob-acc-toggle:hover { color: var(--brand-600); }

/* Subcategory list */
.mob-acc-body {
  display: none;
  flex-direction: column;
  padding: 0 1.25rem 0.875rem 1.5rem;
  gap: 0;
  border-top: 1px solid rgba(201,152,106,0.12);
  background: rgba(201,152,106,0.03);
}
.mob-acc.open .mob-acc-body { display: flex; }

.mob-acc-child {
  display: block;
  padding: 0.45rem 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s;
}
.mob-acc-child:hover { color: var(--brand-600); }
.mob-acc-all {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-600) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* Footer links below categories */
.mob-footer-links {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.mob-footer-link {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.15s;
}
.mob-footer-link:hover { color: var(--brand-600); }
.mob-cart-badge {
  background: var(--brand-500); color: #fff;
  border-radius: 9999px; padding: 1px 7px;
  font-size: 11px; font-weight: 700;
}

/* Bottom bar */
.mob-bottom-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 1rem 1.25rem 0.5rem;
  flex-wrap: wrap;
}
.mob-dark-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 9999px;
  font-size: 14px; color: var(--foreground);
  background: rgba(201,152,106,0.08);
  font-family: inherit; cursor: pointer;
  border: none;
}

/* ============================================================
   PAY SECURELY WITH — FOOTER PAYMENT ROW
   ============================================================ */
.pay-secure-bar {
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 1.25rem 0;
}
.pay-secure-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.pay-secure-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
  white-space: nowrap;
  flex-shrink: 0;
}
.pay-secure-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.psi {
  display: inline-flex;
  line-height: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.psi svg {
  display: block;
  width: 44px;
  height: 28px;
}
.psi:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
@media (max-width: 639px) {
  .psi svg { width: 36px; height: 23px; }
  .pay-secure-inner { gap: 0.75rem 1rem; }
}
/* ── Two-row desktop header (logo+actions row, then categories row) ── */
@media (min-width: 1024px) {
  .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1rem;
    justify-content: stretch;
  }
  .nav-inner > .nav-logo    { grid-column: 2; justify-self: center; }
  .nav-inner > .nav-actions { grid-column: 3; justify-self: end; }
}
.nav-cats-row { display: none; }
@media (min-width: 1024px) {
  .nav-cats-row {
    display: block;
    border-top: 1px solid var(--border);
  }
  .nav-cats-row > .section-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
  }
  .nav-cats-row .nav-mega-wrap {
    flex: 0 1 auto;
    align-self: stretch;
    height: 3.25rem;
    width: 100%;
    justify-content: center;
    padding: 0 0.5rem;
    gap: 0.75rem;
  }
  .nav-cats-row .mega-cat-link { height: 3.25rem; }
}

/* ============================================================
   HOMEPAGE HERO/SLIDER - REMOVE SURROUNDING SPACE
   ============================================================ */
body.home .site-main { padding-top: 0; }
@media (min-width: 1024px) {
  body.home .site-main { padding-top: 0; }
}
body.home .hero-section { padding: 0; margin: 0; }
body.home .hero-section .hero-content { padding: 0; margin: 0; line-height: 0; }
body.home .hero-section .hero-content > sr7-module { display: block; margin: 0; vertical-align: top; }
body.home .hero-section + .trust-bar { margin-top: 0; }

/* ============================================================
   MEGA DROPDOWN - 3-LEVEL CATEGORY SUPPORT
   ============================================================ */
.mega-dropdown-body { flex-wrap: wrap; row-gap: 1.5rem; }
.mega-col--all-wrap { flex: 0 0 100%; max-width: 100%; min-width: 0; margin-bottom: -0.5rem; }
.mega-col-all--root {
  margin-bottom: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--muted-foreground);
}
.mega-col-all--root:hover { color: var(--brand-600); }
.mega-col-list li > a { font-size: 0.8125rem; }

/* Mobile sub-sub categories */
.mob-acc-subgroup {
  display: flex; flex-direction: column;
  margin: 0.125rem 0 0.5rem 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
}
.mob-acc-grandchild {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  text-decoration: none;
  padding: 0.4rem 0.5rem;
  border-radius: 0.375rem;
}
.mob-acc-grandchild:hover { color: var(--brand-600); background: rgba(201,152,106,0.07); }