/*
Theme Name: Cocomera
Theme URI: https://cocomera.in
Author: Cocomera Cosmetics Pvt Ltd
Author URI: https://cocomera.in
Description: Premium handmade skincare e-commerce theme for Cocomera. Features WooCommerce integration, Razorpay payments, Delhivery & Ekart shipment tracking, localStorage cart & wishlist, customer reviews, WhatsApp chat, automated emails, Elementor compatibility, and full plugin support. Pure Natural Skin Care — Crafted with Love & Coconut Milk.
Version: 02.5.29.039
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
License URI: https://cocomera.in/license
Text Domain: cocomera
Tags: e-commerce, woocommerce, luxury, skincare, responsive, one-column, custom-logo, custom-menu, featured-images, theme-options

Cocomera Theme — v02.4.26.125
Pure Natural Skin Care — Crafted with Love & Coconut Milk
(c) 2026 Cocomera Cosmetics Pvt Ltd. All rights reserved.
*/

/* ═══════════════════════════════════════════════
   COCOMERA 2050 — DESIGN SYSTEM
   ═══════════════════════════════════════════════ */

/* ─── CSS CUSTOM PROPERTIES ─── */
:root {
  /* Core palette */
  --c0: #0B1F08;
  --c1: #142B11;
  --c2: #1E4D18;
  --c3: #4A7C3F;
  --c4: #6BA35E;

  /* Gold spectrum */
  --gold: #C9A84C;
  --gold-light: #E8C96A;
  --gold-dark: #9A7B20;
  --gold-glow: rgba(201,168,76,.35);
  --gold-subtle: rgba(201,168,76,.08);

  /* Neutrals */
  --cream: #F5EDD6;
  --bg: #FAF7F2;
  --bg-alt: #F2EDE2;
  --bg-card: #FFFFFF;
  --bg-dark: #070F05;

  /* Text */
  --text: #0B1F08;
  --text-secondary: #3D5C38;
  --text-muted: #7A9275;
  --text-light: rgba(245,237,214,.65);
  --text-dim: rgba(245,237,214,.35);

  /* Borders */
  --border: rgba(74,124,63,.12);
  --border-strong: rgba(74,124,63,.26);
  --border-gold: rgba(201,168,76,.18);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Motion */
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-smooth: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,.55,.45,1);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Spacing */
  --header-height: 76px;
  --container-max: 1420px;
  --container-pad: 2.5rem;

  /* Glassmorphism */
  --glass-bg: rgba(8,18,6,.92);
  --glass-blur: blur(24px);
  --glass-border: 1px solid rgba(201,168,76,.12);

  /* Shadows */
  --shadow-sm: 0 4px 16px rgba(0,0,0,.08);
  --shadow-md: 0 12px 40px rgba(0,0,0,.12);
  --shadow-lg: 0 30px 80px rgba(11,31,8,.14);
  --shadow-glow: 0 0 60px rgba(201,168,76,.25);
  --shadow-hero: 0 40px 100px rgba(0,0,0,.5);
}

/* Dark mode override */
@media all {
  :root {
    --bg: #0B1F08;
    --bg-alt: #142B11;
    --bg-card: #1A2E16;
    --text: #F5EDD6;
    --text-secondary: #A8C4A0;
    --text-muted: #7A9275;
    --border: rgba(201,168,76,.1);
    --shadow-sm: 0 4px 16px rgba(0,0,0,.3);
    --shadow-md: 0 12px 40px rgba(0,0,0,.4);
    --shadow-lg: 0 30px 80px rgba(0,0,0,.5);
  }
}

/* ─── GLOBAL: no underline on any price ─── */
.price ins, .product-price ins,
del, .price del, .product-price del,
.woocommerce ins, .woocommerce del {
  text-decoration: none !important;
  background: none !important;
}
.price del, .product-price del, .woocommerce del {
  text-decoration: line-through !important;
}

/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  padding-top: calc(var(--header-height) + 40px);
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--gold); color: var(--c0); }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ─── CUSTOM SCROLLBAR ─── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--c0); }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ─── CUSTOM CURSOR ─── */
@media (pointer: fine) {
  body { cursor: none; }
  a, button, [role="button"], input[type="submit"], .clickable { cursor: none; }
}
#cursor-dot {
  position: fixed; z-index: 2147483647; pointer-events: none;
  width: 8px; height: 8px; background: var(--gold);
  border-radius: 50%; transform: translate(-50%, -50%);
  transition: width .3s var(--ease-spring), height .3s var(--ease-spring);
}
#cursor-ring {
  position: fixed; z-index: 2147483646; pointer-events: none;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(201,168,76,.5);
  border-radius: 50%; transform: translate(-50%, -50%);
  transition: width .4s var(--ease-spring), height .4s var(--ease-spring), opacity .2s;
}
body.cursor-hover #cursor-dot { width: 4px; height: 4px; background: var(--gold); opacity: 0.8; }
body.cursor-hover #cursor-ring { width: 28px; height: 28px; opacity: 0.35; }

/* ─── LOADER ─── */
#site-loader {
  position: fixed; inset: 0; z-index: 99990;
  background: var(--c0);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2rem;
  transition: opacity .8s var(--ease-expo), visibility .8s;
}
#site-loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-logo {
  font-family: var(--font-display); font-size: 3rem;
  letter-spacing: .15em; color: var(--cream);
  position: relative; overflow: hidden;
}
.loader-logo::after {
  content: ''; position: absolute; bottom: 0; left: -100%;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: loader-line 1.6s var(--ease-expo) forwards .2s;
}
@keyframes loader-line { to { left: 100%; } }
.loader-track {
  width: 220px; height: 1px;
  background: rgba(201,168,76,.15);
  position: relative; overflow: hidden;
}
.loader-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--c2), var(--gold));
  transform-origin: left; transform: scaleX(0);
  animation: loader-fill 1.8s var(--ease-expo) forwards;
}
@keyframes loader-fill { to { transform: scaleX(1); } }
.loader-text {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(201,168,76,.5);
}

/* ─── SCROLL PROGRESS ─── */
#scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 9990;
  height: 2px;
  background: linear-gradient(90deg, var(--c2), var(--gold), var(--cream));
  transform-origin: left; transform: scaleX(0);
  will-change: transform;
}

/* ─── ANNOUNCEMENT BAR ─── */
.announcement-bar {
  background: linear-gradient(90deg, var(--c0) 0%, rgba(11,31,8,.95) 50%, var(--c0) 100%);
  color: var(--cream); text-align: center;
  font-size: .71rem; letter-spacing: .07em;
  padding: .52rem 3rem; position: fixed;
  top: 0; left: 0; right: 0;
  border-bottom: 1px solid rgba(201,168,76,.1); z-index: 501;
}
.announcement-bar::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,.07) 50%, transparent 100%);
  animation: ann-shimmer 4s ease-in-out infinite;
}
@keyframes ann-shimmer { 0%,100% { opacity: 0; } 50% { opacity: 1; } }
.announcement-bar a { color: var(--gold); text-decoration: underline; }
.announcement-close {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  color: rgba(245,237,214,.3); font-size: 1.2rem; padding: .25rem .4rem;
  transition: color .2s;
}
.announcement-close:hover { color: var(--cream); }

/* ─── HEADER ─── */
.site-header {
  position: fixed; top: 40px; left: 0; right: 0; z-index: 500;
  height: var(--header-height);
  transition: background .5s var(--ease-smooth), box-shadow .5s, top .3s;
}
.site-header.scrolled {
  background: rgba(11,31,8,.97);
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: 0 1px 0 rgba(201,168,76,.09);
}
.header-inner {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; height: 100%;
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--container-pad);
}
.header-nav { display: flex; align-items: center; gap: .1rem; }
.nav-link {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(245,237,214,.65);
  padding: .5rem .85rem; border-radius: var(--radius-sm);
  transition: color .2s, background .2s;
  white-space: nowrap; position: relative;
}
.nav-link::after {
  content: ''; position: absolute; bottom: 2px;
  left: .85rem; right: .85rem; height: 1px;
  background: var(--gold); transform: scaleX(0);
  transition: transform .25s var(--ease-expo);
}
.nav-link:hover { color: var(--gold); }
.nav-link:hover::after { transform: scaleX(1); }

/* Mega menu */
.nav-item { position: relative; }
.mega-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 720px; padding: 2rem;
  background: rgba(11,31,8,.98);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(201,168,76,.1);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: opacity .3s, visibility .3s, transform .3s var(--ease-expo);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.nav-item:hover .mega-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega-col h5 {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .75rem;
}
.mega-col a {
  display: block; padding: .35rem 0;
  font-size: .82rem; color: rgba(245,237,214,.5);
  transition: color .2s, transform .2s;
}
.mega-col a:hover { color: var(--cream); transform: translateX(4px); }

.header-logo { justify-self: center; }
.logo-text {
  font-family: var(--font-display); font-size: 1.8rem;
  font-weight: 400; letter-spacing: .16em;
  background: linear-gradient(135deg, var(--cream) 0%, var(--gold) 45%, rgba(245,237,214,.9) 65%, var(--gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; animation: logo-shimmer 5s linear infinite;
}
@keyframes logo-shimmer { to { background-position: 200% center; } }

.header-actions { justify-self: end; display: flex; align-items: center; gap: .15rem; }
.header-action {
  width: 42px; height: 42px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  color: rgba(245,237,214,.65); position: relative;
  transition: background .2s, color .2s;
}
.header-action:hover { background: rgba(201,168,76,.09); color: var(--gold); }
.cart-count {
  position: absolute; top: 4px; right: 4px;
  background: var(--gold); color: var(--c0);
  font-size: .56rem; font-weight: 700;
  width: 16px; height: 16px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  animation: cart-pop .3s var(--ease-spring);
}
@keyframes cart-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* Mobile menu button */
.mobile-toggle {
  display: none; flex-direction: column;
  justify-content: center; align-items: flex-end;
  width: 42px; height: 42px; border-radius: var(--radius-full);
  gap: 5px; transition: background .2s;
}
.mobile-toggle:hover { background: rgba(201,168,76,.09); }
.mobile-toggle span {
  display: block; background: rgba(245,237,214,.75);
  border-radius: 2px; transition: transform .35s var(--ease-expo), opacity .25s, width .3s var(--ease-expo);
}
.mobile-toggle span:nth-child(1) { width: 22px; height: 1.5px; }
.mobile-toggle span:nth-child(2) { width: 14px; height: 1.5px; }
.mobile-toggle span:nth-child(3) { width: 22px; height: 1.5px; }
.mobile-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobile-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav */
/* ─── MOBILE NAV OVERLAY ─── */
.mob-overlay{position:fixed;inset:0;z-index:599;background:rgba(0,0,0,.52);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;cursor:pointer}
body:has(#mobile-nav.open) .mob-overlay{opacity:1;visibility:visible}

/* ─── MOBILE NAV DRAWER ─── */
.mobile-nav{position:fixed;top:0;left:0;bottom:0;width:100%;max-width:420px;z-index:600;background:#0d1a0d;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .42s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;opacity:1;visibility:visible}
.mobile-nav.open{transform:translateX(0)}

/* Drawer header */
.mob-hd{display:flex;align-items:center;justify-content:space-between;padding:22px 20px 18px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.05)}
.mob-logo-link{display:flex;text-decoration:none}
.mob-hd-right{display:flex;align-items:center;gap:8px}
.mob-cart,.mob-close-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#F5EDD6;cursor:pointer;text-decoration:none;transition:background .2s}
.mob-cart:hover,.mob-close-btn:hover{background:rgba(201,168,76,.1)}
.mob-cart{position:relative}
.mob-cart-badge{position:absolute;top:6px;right:6px;min-width:17px;height:17px;padding:0 4px;background:#c9a84c;color:#0d1a0d;font-size:9px;font-weight:700;line-height:17px;border-radius:8px;text-align:center}

/* Menu rows */
.mob-links{flex:1;padding:10px 16px 4px;display:flex;flex-direction:column}
.mob-row{display:flex;align-items:center;gap:14px;padding:13px 12px;border-radius:14px;text-decoration:none;color:#F5EDD6;border-bottom:1px solid rgba(255,255,255,.04);opacity:0;transform:translateX(-20px);transition:background .2s,opacity .38s ease,transform .38s ease}
.mobile-nav.open .mob-row{opacity:1;transform:translateX(0)}
.mobile-nav.open .mob-row:nth-child(1){transition-delay:.05s}
.mobile-nav.open .mob-row:nth-child(2){transition-delay:.09s}
.mobile-nav.open .mob-row:nth-child(3){transition-delay:.13s}
.mobile-nav.open .mob-row:nth-child(4){transition-delay:.17s}
.mobile-nav.open .mob-row:nth-child(5){transition-delay:.21s}
.mobile-nav.open .mob-row:nth-child(6){transition-delay:.25s}
.mobile-nav.open .mob-row:nth-child(7){transition-delay:.29s}
.mob-row:last-child{border-bottom:none}
.mob-row:hover{background:rgba(255,255,255,.04)}
.mob-row--active{background:rgba(255,255,255,.05)}
.mob-ico{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;flex-shrink:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07);color:rgba(245,237,214,.7);transition:background .2s,color .2s}
.mob-row--active .mob-ico{background:rgba(21,32,21,.9);border-color:rgba(201,168,76,.25);color:#c9a84c}
.mob-row:hover .mob-ico{background:rgba(255,255,255,.1)}
.mob-lbl{flex:1;font-size:15.5px;font-weight:500;letter-spacing:.01em}
.mob-arr{color:rgba(201,168,76,.4);flex-shrink:0;transition:color .2s,transform .2s}
.mob-row:hover .mob-arr{color:#c9a84c;transform:translateX(3px)}

/* Promo card */
.mob-promo{margin:10px 16px 6px;padding:15px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:16px;display:flex;align-items:center;gap:14px;flex-shrink:0}
.mob-promo-ico{flex-shrink:0}
.mob-promo-title{margin:0 0 4px;font-size:13px;font-weight:600;color:#c9a84c;letter-spacing:.03em}
.mob-promo-sub{margin:0;font-size:11.5px;color:rgba(245,237,214,.45);line-height:1.45}

/* Bottom buttons removed */

/* ─── LAYOUT ─── */
.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.section { padding: clamp(3rem, 6vw, 6rem) 0; position: relative; }
.eyebrow {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold); display: flex;
  align-items: center; gap: .65rem;
}
.eyebrow::before, .eyebrow::after {
  content: ''; flex: 1; max-width: 28px;
  height: 1px; background: var(--gold); opacity: .42;
}
.eyebrow.center { justify-content: center; }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 5rem);
  font-weight: 400; letter-spacing: -.025em;
  margin-top: .55rem; line-height: 1.08;
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem; padding: .9rem 2.4rem;
  border-radius: var(--radius-full);
  font-size: .77rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  transition: all .3s var(--ease-expo);
  white-space: nowrap; position: relative; overflow: hidden;
}
.btn:active { transform: scale(.97); }
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,.08); border-radius: inherit;
  transform: scale(0); opacity: 0;
  transition: transform .4s var(--ease-expo), opacity .4s;
}
.btn:hover::before { transform: scale(1); opacity: 1; }

.btn-primary {
  background: var(--gold); color: var(--c0);
  box-shadow: 0 0 0 0 rgba(201,168,76,.3);
}
.btn-primary:hover {
  background: var(--gold-light);
  box-shadow: 0 8px 40px rgba(201,168,76,.5), 0 0 0 4px rgba(201,168,76,.15);
  transform: translateY(-3px);
}
.btn-outline {
  background: transparent; color: var(--cream);
  border: 1px solid rgba(245,237,214,.25);
}
.btn-outline:hover {
  border-color: var(--gold); color: var(--gold);
  background: rgba(201,168,76,.05); transform: translateY(-2px);
}
.btn-outline-dark {
  background: transparent; color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-outline-dark:hover { border-color: var(--gold); color: var(--gold); }
.btn-glow { animation: glow-pulse 3s ease-in-out infinite; }
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 8px 40px rgba(201,168,76,.35); }
  50% { box-shadow: 0 8px 60px rgba(201,168,76,.65); }
}

/* ─── ANIMATIONS ─── */
.fade-up {
  opacity: 0; transform: translateY(36px);
  transition: opacity .9s var(--ease-expo), transform .9s var(--ease-expo);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up.delay-1 { transition-delay: .1s; }
.fade-up.delay-2 { transition-delay: .2s; }
.fade-up.delay-3 { transition-delay: .3s; }
.fade-up.delay-4 { transition-delay: .4s; }

.clip-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--ease-expo);
}
.clip-reveal.visible { clip-path: inset(0 0% 0 0); }

.char-split-word { display: inline-block; vertical-align: bottom; }
.char-split-char {
  display: inline-block;
  animation: char-up 1.1s var(--ease-expo) both;
}
@keyframes char-up {
  from { transform: translateY(110%) rotate(4deg); opacity: 0; }
  to { transform: translateY(0) rotate(0); opacity: 1; }
}

/* ─── HERO ─── */
.hero-section {
  min-height: 100svh; background: var(--c0);
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  margin-top: calc(-1 * (var(--header-height) + 40px));
  padding-top: calc(var(--header-height) + 40px);
}
.hero-mesh {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 60% 80% at 72% 45%, rgba(74,124,63,.32) 0%, transparent 60%),
              radial-gradient(ellipse 40% 50% at 5% 90%, rgba(201,168,76,.07) 0%, transparent 55%),
              radial-gradient(ellipse 30% 40% at 90% 5%, rgba(30,77,24,.18) 0%, transparent 55%);
}
.hero-scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(11,31,8,.06) 3px, rgba(11,31,8,.06) 4px);
  animation: scan-move 12s linear infinite;
}
@keyframes scan-move { to { background-position: 0 40px; } }
.hero-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: linear-gradient(rgba(201,168,76,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(201,168,76,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 75%);
}
.hero-wrap {
  max-width: var(--container-max); margin: 0 auto;
  padding: calc(var(--header-height) + 3rem) var(--container-pad) 5rem;
  width: 100%; position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 5rem;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(201,168,76,.8); margin-bottom: 1.75rem;
  opacity: 0; animation: fade-in-up .7s var(--ease-expo) .3s both;
}
.hero-tag-dot {
  width: 6px; height: 6px; background: var(--gold);
  border-radius: 50%; animation: pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: .3; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(4rem, 6.8vw, 8.5rem);
  line-height: .96; letter-spacing: -.025em;
  color: var(--cream); margin-bottom: 2rem;
}
.hero-title em {
  font-style: italic; color: var(--gold); position: relative;
}
.hero-title em::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0); transform-origin: left;
  animation: em-line 1s var(--ease-expo) 1.2s both;
}
@keyframes em-line { to { transform: scaleX(1); } }
.hero-subtitle {
  font-size: .97rem; color: rgba(245,237,214,.55);
  line-height: 1.95; max-width: 460px; margin-bottom: 2.25rem;
  opacity: 0; animation: fade-in-up .7s var(--ease-expo) 1s both;
}
.hero-actions {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  opacity: 0; animation: fade-in-up .7s var(--ease-expo) 1.2s both;
}
.hero-stats {
  display: flex; gap: 2.5rem; margin-top: 3rem;
  padding-top: 2.25rem; border-top: 1px solid rgba(201,168,76,.11);
  opacity: 0; animation: fade-in-up .7s var(--ease-expo) 1.4s both;
  flex-wrap: wrap;
}
.stat-number {
  font-family: var(--font-display); font-size: 2.6rem;
  color: var(--cream); line-height: 1;
  display: flex; align-items: baseline; gap: .06em;
}
.stat-suffix { font-size: .5em; color: var(--gold); }
.stat-label {
  font-size: .64rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(245,237,214,.32); margin-top: .3rem;
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero right mosaic */
.hero-right {
  position: relative; height: 620px; width: 100%;
  opacity: 0; animation: fade-in .9s var(--ease-expo) .6s both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.hero-card {
  position: absolute; border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(201,168,76,.14); will-change: transform;
  min-width: 260px; display: block; text-decoration: none; color: inherit;
  cursor: pointer;
}
.hero-card:focus-visible { outline: 2px solid var(--gold, #C9A84C); outline-offset: 3px; }
.product-stars--empty { color: var(--text-secondary, rgba(0,0,0,.55)); font-style: italic; font-size: .8rem; }
.product-stars--empty .product-review-count { color: inherit; }
.hero-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease-expo);
}
.hero-card:hover img { transform: scale(1.04); }
.hero-card::after {
  content: ''; position: absolute; inset: 0; border-radius: 26px;
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.1); pointer-events: none;
}
.hero-card-1 {
  width: 57%; top: 0; left: 8%; height: 62%;
  animation: hero-float-1 7s ease-in-out infinite .5s;
  box-shadow: var(--shadow-hero), 0 0 80px rgba(74,124,63,.15);
}
.hero-card-2 {
  width: 48%; bottom: 0; right: 0; height: 54%;
  animation: hero-float-2 9s ease-in-out infinite;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
@keyframes hero-float-1 {
  0%,100% { transform: translateY(0) rotate(.2deg); }
  50% { transform: translateY(-18px) rotate(-.2deg); }
}
@keyframes hero-float-2 {
  0%,100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-11px) rotate(.3deg); }
}
.hero-card-label {
  position: absolute; bottom: .85rem; left: .85rem; right: .85rem;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-md); padding: .7rem 1rem;
  border: var(--glass-border);
  display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; overflow: hidden;
}
.hero-card-name {
  font-size: .75rem; color: var(--cream); font-weight: 500;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-card-price { font-size: .7rem; color: var(--gold); flex-shrink: 0; white-space: nowrap; }
.hero-card-price del { text-decoration: line-through; opacity: .55; font-size: .65rem; }
.hero-card-price ins { text-decoration: none; font-weight: 600; }

/* Rotating badge */
.hero-badge {
  position: absolute; top: 46%; right: -4%;
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--gold);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border: 2px solid rgba(11,31,8,.5);
  box-shadow: 0 8px 40px rgba(201,168,76,.45), 0 0 0 8px rgba(201,168,76,.08);
  animation: rotate-badge 25s linear infinite;
}
@keyframes rotate-badge { to { transform: rotate(360deg); } }
.hero-badge-label {
  font-size: .55rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(11,31,8,.8);
}
.hero-badge-year {
  font-family: var(--font-display); font-size: 1.75rem;
  color: var(--c0); line-height: 1;
}

/* Micro cards */
.hero-micro {
  position: absolute; border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(201,168,76,.2);
  padding: .65rem .9rem; font-size: .72rem;
  color: var(--cream);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  animation: hero-float-2 6s ease-in-out infinite;
}
.hero-micro-1 { top: 38%; left: 0; animation-delay: .3s; }
.hero-micro-2 { bottom: 16%; left: 5%; animation-delay: 1.2s; }
.micro-gold { color: var(--gold); font-weight: 700; }
.micro-label {
  font-size: .6rem; color: rgba(245,237,214,.45);
  letter-spacing: .07em; text-transform: uppercase; margin-top: .1rem;
}

/* Scroll hint */
.scroll-hint {
  display: flex; align-items: center; gap: .75rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245,237,214,.3);
}
.scroll-hint-arrow {
  width: 28px; height: 1px;
  background: rgba(201,168,76,.3); position: relative;
}
.scroll-hint-arrow::after {
  content: ''; position: absolute; right: -1px; top: -3px;
  width: 6px; height: 6px;
  border-right: 1px solid rgba(201,168,76,.45);
  border-top: 1px solid rgba(201,168,76,.45);
  transform: rotate(45deg);
}

/* ─── USP TICKER ─── */
.usp-ticker {
  background: var(--gold); overflow: hidden; padding: .9rem 0;
  position: relative;
}
.usp-ticker::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gold-dark) 0%, transparent 10%, transparent 90%, var(--gold-dark) 100%);
  pointer-events: none;
}
.ticker-track {
  display: flex; animation: ticker-roll 32s linear infinite;
  white-space: nowrap; width: max-content;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 0 2.25rem; font-size: .73rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c0);
}
.ticker-sep {
  width: 5px; height: 5px; background: rgba(11,31,8,.25);
  border-radius: 50%; flex-shrink: 0;
}
@keyframes ticker-roll { to { transform: translateX(-50%); } }

/* ─── RUNNING HEADINGS ─── */
.running-heading {
  overflow: hidden; position: relative;
  padding: clamp(.5rem, 1vw, .8rem) 0;
}
.rh-dark { background: var(--c0); }
.rh-light { background: var(--bg); }
.rh-alt { background: var(--bg-alt); }
.rh-tracks { display: flex; flex-direction: column; }
.rh-track {
  display: flex; white-space: nowrap;
  width: max-content; line-height: 1;
}
.rh-track.track-large {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 400; letter-spacing: -.015em;
  animation: rh-forward 38s linear infinite;
}
.rh-track.track-small {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.8rem);
  font-weight: 300; letter-spacing: .08em;
  animation: rh-reverse 28s linear infinite;
}
.rh-track.reverse { animation-direction: reverse; }
.rh-item { padding: 0 1.25rem; }
.rh-sep { padding: 0 .2rem; }
.rh-dark .rh-track.track-large .rh-item { color: rgba(201,168,76,.35); }
.rh-dark .rh-track.track-small .rh-item { color: rgba(245,237,214,.45); }
.rh-dark .rh-sep { color: var(--gold); }
.rh-light .rh-track.track-large .rh-item { color: rgba(11,31,8,.18); }
.rh-light .rh-track.track-small .rh-item { color: rgba(11,31,8,.35); }
.rh-light .rh-sep { color: var(--gold); }
.rh-alt .rh-track.track-large .rh-item { color: rgba(11,31,8,.18); }
.rh-alt .rh-track.track-small .rh-item { color: rgba(11,31,8,.35); }
.rh-alt .rh-sep { color: var(--gold); }

/* Dark mode: fix running heading text visibility */
@media all {
  .rh-light .rh-track.track-large .rh-item { color: rgba(201,168,76,.3); }
  .rh-light .rh-track.track-small .rh-item { color: rgba(245,237,214,.4); }
  .rh-alt .rh-track.track-large .rh-item { color: rgba(201,168,76,.3); }
  .rh-alt .rh-track.track-small .rh-item { color: rgba(245,237,214,.4); }
}
@keyframes rh-forward { to { transform: translateX(-50%); } }
@keyframes rh-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ─── MANIFESTO ─── */
.manifesto-section {
  background: var(--c0);
  padding: clamp(3rem, 6vw, 6rem) 0;
  position: relative; overflow: hidden; text-align: center;
}
.manifesto-section::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(30,77,24,.42) 0%, transparent 70%);
}
.manifesto-rings {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
}
.manifesto-ring {
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,.06);
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: ring-expand 4s ease-out infinite;
}
.manifesto-ring:nth-child(1) { width: 300px; height: 300px; }
.manifesto-ring:nth-child(2) { width: 500px; height: 500px; animation-delay: .8s; }
.manifesto-ring:nth-child(3) { width: 700px; height: 700px; animation-delay: 1.6s; }
@keyframes ring-expand {
  0% { opacity: .5; transform: translate(-50%, -50%) scale(.6); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}
.manifesto-quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.8rem, 3.8vw, 4.2rem);
  color: var(--cream); line-height: 1.22;
  max-width: 960px; margin: 1.5rem auto 0;
  opacity: 0; transform: translateY(36px);
  transition: opacity 1.2s var(--ease-expo), transform 1.2s var(--ease-expo);
}
.manifesto-quote.visible { opacity: 1; transform: translateY(0); }
.manifesto-gold { color: var(--gold); font-style: normal; }
.manifesto-stats {
  display: flex; justify-content: center;
  gap: clamp(2.5rem, 7vw, 8rem);
  margin-top: 5rem; flex-wrap: wrap;
}
.manifesto-stat-number {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 7rem);
  color: var(--cream); line-height: 1;
  display: flex; align-items: baseline; gap: .08em;
}
.manifesto-stat-suffix { font-size: .48em; color: var(--gold); }
.manifesto-stat-label {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245,237,214,.32); margin-top: .55rem;
}

/* ─── COLLECTIONS GRID ─── */
.collections-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.2rem; height: min(760px, 84vw);
}
.collection-card {
  border-radius: 26px; overflow: hidden;
  position: relative; background: var(--c1);
}
.collection-card--featured { grid-row: 1 / 3; }
.collection-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease-expo), filter .7s;
}
.collection-card:hover img { transform: scale(1.07); filter: brightness(1.05); }
.collection-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,18,6,.92) 0%, rgba(8,18,6,.05) 55%, transparent 100%);
}
.collection-shine {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(201,168,76,.06) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .6s var(--ease-expo);
}
.collection-card:hover .collection-shine { transform: translateX(100%); }
.collection-body {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem;
}
.collection-category {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(201,168,76,.85); margin-bottom: .45rem;
}
.collection-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.6rem);
  color: var(--cream); line-height: 1.12;
}
.collection-card--featured .collection-name {
  font-size: clamp(2rem, 3.2vw, 3.4rem);
}
.collection-subtitle {
  font-size: .77rem; color: rgba(245,237,214,.45); margin-top: .25rem;
}
.collection-cta {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .9rem; font-size: .71rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); padding: .52rem 1.2rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(201,168,76,.32);
  background: rgba(8,18,6,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(12px); opacity: 0;
  transition: opacity .35s var(--ease-expo), transform .35s var(--ease-expo), background .2s, color .2s;
}
.collection-card:hover .collection-cta { transform: translateY(0); opacity: 1; }
.collection-cta:hover { background: var(--gold); color: var(--c0); border-color: var(--gold); }

/* ─── PRODUCT CARDS ─── */
.products-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}
.product-card {
  background: var(--bg-card); border-radius: 24px;
  overflow: hidden; border: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform-style: preserve-3d;
  transition: box-shadow .4s var(--ease-expo), border-color .3s;
}
.product-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgba(201,168,76,.22);
}
.product-image-wrap {
  position: relative; padding-top: 100%;
  overflow: hidden; background: var(--bg-alt);
}
.product-image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .6s var(--ease-expo);
}
.product-card:hover .product-image { transform: scale(1.06); }
.product-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
  transform: translateX(-100%); transition: transform .5s var(--ease-expo);
  pointer-events: none;
}
.product-card:hover .product-shine { transform: translateX(100%); }
.product-actions {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: .75rem; transform: translateY(100%); opacity: 0;
  transition: transform .38s var(--ease-expo), opacity .3s;
}
.product-card:hover .product-actions { transform: translateY(0); opacity: 1; }
.product-add-cart {
  width: 100%; padding: .68rem;
  border-radius: var(--radius-md);
  background: rgba(8,18,6,.93);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--cream); font-size: .74rem;
  font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; transition: background .2s, color .2s;
}
.product-add-cart:hover { background: var(--gold); color: var(--c0); }
.product-wishlist {
  position: absolute; top: .8rem; right: .8rem;
  width: 34px; height: 34px; border-radius: var(--radius-full);
  background: rgba(8,18,6,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s, background .2s, transform .3s var(--ease-spring);
}
.product-card:hover .product-wishlist { opacity: 1; }
.product-wishlist:hover { background: #f87171; color: #fff; transform: scale(1.1); }
.product-wishlist.active,
.product-wishlist.wishlisted { background: #f87171; color: #fff; opacity: 1; }
.product-wishlist.wishlisted svg { fill: currentColor; }
.product-detail-wishlist.wishlisted { border-color: #f87171; color: #f87171; background: rgba(248,113,113,.08); }
.product-detail-wishlist.wishlisted svg { fill: currentColor; }
.product-badge {
  position: absolute; top: .75rem; left: .75rem;
  font-size: .58rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .22rem .65rem; border-radius: var(--radius-full);
}
.badge-bestseller { background: var(--gold); color: var(--c0); }
.badge-new { background: #4ade80; color: #052e16; }
.badge-sale { background: #f87171; color: #fff; }
.product-body {
  padding: .95rem 1.15rem 1.15rem;
  flex: 1; display: flex; flex-direction: column;
}
.product-category {
  font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}
.product-name {
  font-family: var(--font-display); font-size: 1.15rem;
  color: var(--text); margin: .25rem 0; line-height: 1.2;
}
.product-price {
  font-size: .88rem; color: var(--gold);
  font-weight: 600; margin-top: auto;
  display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap;
}
.product-price del {
  color: var(--text-muted); font-weight: 400;
  font-size: .82em; text-decoration: line-through;
}
.product-price ins, .product-price ins span { text-decoration: none !important; }

/* Discount % badge on product cards */
.product-badge.badge-discount {
  background: #c0392b !important;
  color: #fff !important;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .3rem .65rem;
  border-radius: var(--radius-full);
}
.product-stars {
  display: flex; gap: .1rem; margin-top: .4rem;
  align-items: center; font-size: .7rem; color: var(--gold);
}
.product-review-count {
  font-size: .67rem; color: var(--text-muted); margin-left: .28rem;
}

/* ─── INGREDIENTS ─── */
.ingredients-section {
  background: var(--c0);
  padding: clamp(3rem, 6vw, 6rem) 0;
  position: relative; overflow: hidden;
}
.ingredients-section::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 65% at 80% 50%, rgba(201,168,76,.055) 0%, transparent 65%);
}
.ingredients-grid {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: 5.5rem; align-items: center;
  position: relative; z-index: 1;
}
.ingredients-bg-number {
  font-family: var(--font-display);
  font-size: clamp(10rem, 22vw, 22rem);
  color: rgba(201,168,76,.03); line-height: 1;
  position: absolute; top: -4rem; left: -2rem;
  pointer-events: none; user-select: none;
}
.ingredient-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.5vw, 6rem);
  color: var(--cream); line-height: 1.05; margin-top: .7rem;
}
.ingredient-description {
  font-size: .93rem; color: rgba(245,237,214,.55);
  line-height: 1.95; margin-top: 1.5rem; max-width: 430px;
}
.ingredient-pills {
  display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.75rem;
}
.ingredient-pill {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .85rem; border-radius: var(--radius-full);
  border: 1px solid rgba(201,168,76,.18);
  color: rgba(201,168,76,.6); background: rgba(201,168,76,.05);
  transition: all .2s;
}
.ingredient-pill:hover {
  border-color: var(--gold); color: var(--gold);
  background: rgba(201,168,76,.1);
}
.ingredient-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.ingredient-card {
  background: rgba(30,77,24,.18);
  border: 1px solid rgba(201,168,76,.09);
  border-radius: var(--radius-md); padding: 1.5rem;
  transition: border-color .35s, background .35s, transform .35s var(--ease-expo);
}
.ingredient-card:hover {
  border-color: rgba(201,168,76,.3);
  background: rgba(30,77,24,.32); transform: translateY(-4px);
}
.ingredient-card-icon { font-size: 1.75rem; margin-bottom: .7rem; }
.ingredient-card-name {
  font-family: var(--font-display); font-size: 1.1rem;
  color: var(--cream); margin-bottom: .35rem;
}
.ingredient-card-fact {
  font-size: .75rem; color: rgba(245,237,214,.45); line-height: 1.65;
}

/* ─── FOUNDER ─── */
.founder-section { background: var(--c0); padding: clamp(3rem, 6vw, 6rem) 0; }
.founder-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.founder-image {
  border-radius: 26px; overflow: hidden;
  aspect-ratio: 4/5; position: relative;
}
.founder-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-expo);
}
.founder-image:hover img { transform: scale(1.03); }
.founder-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,18,6,.55) 0%, transparent 55%);
}
.founder-image::before {
  content: ''; position: absolute; inset: -1px; border-radius: 26px;
  background: linear-gradient(135deg, rgba(201,168,76,.25), transparent 50%, transparent 50%, rgba(201,168,76,.08));
  pointer-events: none; z-index: 2;
}
.founder-quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.5rem, 2.8vw, 3rem);
  color: var(--cream); line-height: 1.35;
  border-left: 2px solid var(--gold);
  padding-left: 1.85rem; margin: 1.5rem 0;
  position: relative;
}
.founder-quote::before {
  content: '\201C'; position: absolute; left: .85rem; top: -1.5rem;
  font-size: 8rem; color: rgba(201,168,76,.07);
  font-family: var(--font-display); line-height: 1; pointer-events: none;
}
.founder-name { font-size: .84rem; font-weight: 600; color: var(--cream); }
.founder-role { font-size: .72rem; color: var(--gold); margin-top: .18rem; }

/* ─── TESTIMONIALS SLIDER ─── */
.testimonials-slider-wrap {
  position: relative;
}
/* Viewport: clips the transform-shifted track while letting card
   hover shadows (translateY) bleed 10px above/below */
.testimonials-viewport {
  overflow: hidden;
  padding: 10px 0;
  margin: -10px 0;
}
/* Track: flex row driven by JS transform — no scroll */
.testimonials-grid {
  display: flex;
  gap: 1.2rem;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}
.testimonial-card {
  flex: 0 0 300px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 20px; padding: 1.5rem;
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease-expo), box-shadow .4s, border-color .3s;
}
.testimonial-card:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-lg);
  border-color: rgba(201,168,76,.2);
}
.testimonial-stars {
  font-size: .8rem; color: var(--gold);
  letter-spacing: .08em; margin-bottom: .75rem;
}
.testimonial-text {
  font-size: .84rem; color: var(--text-secondary);
  line-height: 1.8; font-style: italic; margin-bottom: .45rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.testimonial-text.tst-expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.testimonial-read-more {
  background: none; border: none; padding: 0;
  font-size: .73rem; color: var(--gold); cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 2px;
  margin-bottom: .85rem; display: none;
  font-style: normal; letter-spacing: .02em;
}
.testimonial-read-more:hover { opacity: .75; }
.testimonial-author {
  display: flex;
  align-items: flex-start; /* avatar pins to top of name, not mid-stack */
  gap: .75rem;
  margin-top: auto;        /* anchors author block to card bottom */
  padding-top: .9rem;
  border-top: 1px solid var(--border);
}
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; flex-shrink: 0;
  margin-top: 1px; /* fine-align with name cap-height */
}
.testimonial-author-info {
  display: flex; flex-direction: column; gap: .18rem;
  min-width: 0; flex: 1; /* min-width:0 lets long names truncate */
}
.testimonial-name {
  font-size: .82rem; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.testimonial-location {
  font-size: .7rem; color: var(--text-muted); line-height: 1.3;
}
.testimonial-verified {
  font-size: .58rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: rgba(74,124,63,.1); padding: .15rem .5rem;
  border-radius: var(--radius-full); display: inline-flex;
  align-items: center; gap: 3px;
  color: var(--c3); width: fit-content;
}
.testimonial-google {
  background: rgba(66,133,244,.08); color: #4285F4;
  letter-spacing: .04em;
}
/* Arrow nav */
.testimonials-prev,
.testimonials-next {
  position: absolute;
  top: calc(50% - 1.5rem);
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.testimonials-prev { left: -21px; }
.testimonials-next { right: -21px; }
.testimonials-prev:hover,
.testimonials-next:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}
/* Progress bar + counter footer */
.testimonials-footer {
  display: flex; align-items: center; gap: .85rem; margin-top: .9rem; padding: 0 .25rem;
}
.testimonials-counter {
  font-size: .68rem; color: var(--text-muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; letter-spacing: .04em; min-width: 2.8rem;
}
.testimonials-progress {
  flex: 1; height: 2px; background: var(--border); border-radius: 1px; overflow: hidden;
}
.testimonials-progress-bar {
  height: 100%; background: var(--gold); width: 0%;
}
/* Empty state when pool not yet populated */
.testimonials-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; width: 100%; padding: 3rem 1rem; color: var(--text-muted);
  font-size: .85rem; text-align: center; line-height: 1.7;
}

/* ─── QUIZ / CTA SECTION ─── */
.quiz-section {
  background: linear-gradient(135deg, #0B2008 0%, #163D11 45%, #0A1C07 100%);
  padding: clamp(3rem, 6vw, 6rem) 0;
  text-align: center; position: relative; overflow: hidden;
}
.quiz-section::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(201,168,76,.075) 0%, transparent 70%);
}

/* ─── GIFTING ─── */
.gift-wrap { padding: 0 2rem clamp(4rem, 7vw, 9rem); }
.gift-banner {
  border-radius: var(--radius-xl); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  background: linear-gradient(135deg, var(--c0) 0%, #1A4014 100%);
  position: relative;
}
.gift-banner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: shimmer-line 3s ease-in-out infinite;
}
@keyframes shimmer-line { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.gift-content {
  padding: clamp(3rem, 5vw, 5.5rem) clamp(2rem, 4.5vw, 4.5rem);
  display: flex; flex-direction: column;
  gap: 1.5rem; justify-content: center;
}
.gift-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 3.6rem);
  color: var(--cream); line-height: 1.1;
}
.gift-text { font-size: .9rem; color: rgba(245,237,214,.55); line-height: 1.8; }
.gift-image { position: relative; min-height: 360px; }
.gift-image img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .8s var(--ease-expo);
}
.gift-banner:hover .gift-image img { transform: scale(1.03); }

/* ─── INSTAGRAM ─── */
.instagram-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .85rem;
}
.instagram-item {
  aspect-ratio: 1; border-radius: var(--radius-md);
  overflow: hidden; position: relative; background: var(--bg-alt);
}
.instagram-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s var(--ease-expo), filter .55s;
}
.instagram-item:hover img { transform: scale(1.09); filter: brightness(1.05); }
.instagram-overlay {
  position: absolute; inset: 0; background: rgba(8,18,6,.52);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s;
}
.instagram-item:hover .instagram-overlay { opacity: 1; }

/* ─── FOOTER ─── */
.site-footer {
  background: var(--c0);
  padding: 5.5rem 0 0;
  border-top: 1px solid rgba(201,168,76,.07);
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr;
  gap: 3.5rem; padding-bottom: 4rem;
  border-bottom: 1px solid rgba(201,168,76,.06);
}
.footer-logo {
  font-family: var(--font-display); font-size: 2.3rem;
  color: var(--cream); letter-spacing: .14em;
  display: block; margin-bottom: 1rem;
}
.footer-tagline {
  font-size: .79rem; color: rgba(245,237,214,.38);
  line-height: 1.82; max-width: 280px;
}
.footer-social { display: flex; gap: .55rem; margin-top: 1.85rem; }
.footer-social a {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  border: 1px solid rgba(201,168,76,.15);
  color: rgba(245,237,214,.42);
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
}
.footer-social a:hover {
  border-color: var(--gold); color: var(--gold);
  background: rgba(201,168,76,.07); transform: translateY(-2px);
}
.footer-col h4 {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.25rem;
}
.footer-col a {
  display: block; font-size: .79rem;
  color: rgba(245,237,214,.42); padding: .28rem 0;
  transition: color .2s, transform .2s;
}
.footer-col a:hover { color: var(--cream); transform: translateX(3px); }
.footer-newsletter h4 {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.25rem;
}
.footer-newsletter p {
  font-size: .79rem; color: rgba(245,237,214,.38);
  margin-bottom: 1rem; line-height: 1.72;
}
.newsletter-form {
  display: flex;
  border: 1px solid rgba(201,168,76,.18);
  border-radius: var(--radius-full); overflow: hidden;
  transition: border-color .2s;
}
.newsletter-form:focus-within { border-color: rgba(201,168,76,.45); }
.newsletter-form input {
  flex: 1; padding: .68rem 1rem; background: transparent;
  border: none; color: var(--cream); font-size: .79rem; outline: none;
}
.newsletter-form input::placeholder { color: rgba(245,237,214,.25); }
.newsletter-form button {
  padding: .68rem 1.2rem; background: var(--gold);
  color: var(--c0); font-size: .71rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  transition: background .2s; white-space: nowrap;
}
.newsletter-form button:hover { background: var(--gold-light); }
.footer-bottom {
  display: flex; align-items: center;
  justify-content: space-between; padding: 1.5rem 0;
  flex-wrap: wrap; gap: .75rem;
}
.footer-bottom p { font-size: .71rem; color: rgba(245,237,214,.25); }
.payment-badges { display: flex; gap: .4rem; align-items: center; }
.payment-badge {
  display: flex; align-items: center; justify-content: center;
  padding: .35rem .55rem; border-radius: var(--radius-sm);
  background: rgba(245,237,214,.06); color: rgba(245,237,214,.4);
}

/* ─── TOAST NOTIFICATIONS ─── */
#toast-container {
  position: fixed; top: calc(var(--header-height) + 1rem);
  right: 1.5rem; z-index: 8000;
  display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none;
}
.toast {
  background: rgba(11,31,8,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: var(--cream); font-size: .79rem;
  padding: .7rem 1.2rem; border-radius: var(--radius-md);
  border-left: 2.5px solid var(--gold);
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  animation: toast-in .35s var(--ease-spring) both;
  max-width: 280px; pointer-events: auto;
}
.toast.success { border-left-color: #4ade80; }
.toast.error { border-left-color: #f87171; }
.toast.hide { animation: toast-out .25s var(--ease-smooth) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }

/* ─── COOKIE CONSENT ─── */
.cookie-banner {
  position: fixed; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  width: min(700px, calc(100vw - 2rem)); z-index: 800;
  background: rgba(8,18,6,.98);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 24px; padding: 1.3rem 1.75rem;
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap;
  box-shadow: 0 40px 100px rgba(0,0,0,.45);
  animation: cookie-up .4s var(--ease-spring);
}
.cookie-banner.hidden { display: none; }
@keyframes cookie-up { from { transform: translateX(-50%) translateY(20px); opacity: 0; } }
.cookie-banner p {
  font-size: .77rem; color: rgba(245,237,214,.65);
  flex: 1; min-width: 160px; line-height: 1.7;
}
.cookie-banner a { color: var(--gold); text-decoration: underline; }
.cookie-buttons { display: flex; gap: .55rem; flex-shrink: 0; }
.cookie-accept {
  font-size: .71rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .48rem 1.2rem; border-radius: var(--radius-full);
  background: var(--gold); color: var(--c0);
  transition: background .2s;
}
.cookie-accept:hover { background: var(--gold-light); }
.cookie-decline {
  font-size: .71rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .48rem 1.2rem; border-radius: var(--radius-full);
  background: transparent; color: rgba(245,237,214,.38);
  border: 1px solid rgba(245,237,214,.16);
  transition: color .2s, border-color .2s;
}
.cookie-decline:hover { color: var(--cream); border-color: rgba(245,237,214,.32); }

/* ─── FLOATING ACTION STACK (Scroll-to-top + WhatsApp) ─── */
.coco-float-stack {
  position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 9999;
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
  pointer-events: none; /* let clicks pass through the gap between buttons */
}
.coco-float-stack > * { pointer-events: auto; }

/* ── Scroll-to-top circle ── */
.coco-scroll-top {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,0,0,.09);
  color: #1c1c1c;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(10px);
  transition: opacity .25s, transform .25s, box-shadow .2s;
  pointer-events: none;
}
.coco-scroll-top.is-visible {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.coco-scroll-top:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.24); transform: translateY(-2px);
}

/* ── WhatsApp pill ── */
.coco-wa-btn {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem;
  background: linear-gradient(135deg, #1C4018 0%, #0F2409 100%);
  border: 1px solid rgba(201,168,76,.35);
  color: #fff;
  border-radius: 50px;
  text-decoration: none;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: .83rem; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 6px 24px rgba(0,0,0,.32), 0 0 0 0 rgba(201,168,76,0);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.coco-wa-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(201,168,76,.65);
  box-shadow: 0 10px 32px rgba(0,0,0,.38), 0 0 18px rgba(201,168,76,.12);
  color: #fff;
}
.coco-wa-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(201,168,76,.18);
  border: 1px solid rgba(201,168,76,.28);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.coco-wa-label { display: none; }

/* ─── STICKY ATC: push floaters above bar when it slides in ─── */
.coco-float-stack       { transition: bottom .38s ease; }
body #coco-ai-widget    { transition: bottom .38s ease; }
body:has(.coco-sticky-atc.is-visible) .coco-float-stack,
body:has(.coco-sticky-atc.is-visible) #coco-ai-widget { bottom: 90px; }

/* ─── SEARCH OVERLAY ─── */
.search-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(8,18,6,.97);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding-top: 20vh;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.search-overlay.active { opacity: 1; visibility: visible; }
.search-container { width: min(680px, 90vw); }
.search-input-wrap {
  display: flex; align-items: center; gap: 1rem;
  border-bottom: 2px solid rgba(201,168,76,.25);
  padding-bottom: 1rem;
}
.search-input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--cream); letter-spacing: -.01em;
}
.search-input::placeholder { color: rgba(245,237,214,.2); }
.search-close {
  width: 48px; height: 48px; border-radius: var(--radius-full);
  background: rgba(201,168,76,.08);
  color: var(--cream); display: flex;
  align-items: center; justify-content: center;
  transition: background .2s;
}
.search-close:hover { background: rgba(201,168,76,.2); }
.search-suggestions {
  margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem;
}
.search-tag {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .4rem 1rem; border-radius: var(--radius-full);
  border: 1px solid rgba(201,168,76,.15);
  color: rgba(245,237,214,.45);
  transition: all .2s;
}
.search-tag:hover {
  border-color: var(--gold); color: var(--gold);
  background: rgba(201,168,76,.08);
}
.search-results {
  margin-top: 2.5rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem; max-height: 40vh; overflow-y: auto;
}
.search-result-item {
  display: flex; gap: .75rem; align-items: center;
  padding: .75rem; border-radius: var(--radius-md);
  border: 1px solid rgba(201,168,76,.08);
  transition: border-color .2s, background .2s;
}
.search-result-item:hover {
  border-color: rgba(201,168,76,.25);
  background: rgba(201,168,76,.05);
}
.search-result-img {
  width: 56px; height: 56px; border-radius: var(--radius-sm);
  object-fit: cover; background: var(--bg-alt);
}
.search-result-name {
  font-family: var(--font-display); font-size: .95rem;
  color: var(--cream);
}
.search-result-price { font-size: .78rem; color: var(--gold); }

/* ─── SLIDE CART (AJAX SIDEBAR) — v337 Luxury Redesign ─── */
.slide-cart-overlay {
  position:fixed;inset:0;z-index:8500;
  background:rgba(0,0,0,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
.slide-cart-overlay.active{opacity:1;visibility:visible;}
.slide-cart {
  position:fixed;top:0;right:0;bottom:0;
  width:min(420px,92vw);z-index:8501;
  background:linear-gradient(175deg,#0c2210 0%,#071508 55%,#050f05 100%);
  border-left:1px solid rgba(201,168,76,.28);
  border-radius:22px 0 0 22px;
  transform:translateX(100%);
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:-12px 0 60px rgba(0,0,0,.55),inset 1px 0 0 rgba(201,168,76,.06);
}
.slide-cart.active{transform:translateX(0);}

/* Header */
.sc-hdr {
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 1.5rem 1.1rem;
  border-bottom:1px solid rgba(201,168,76,.12);flex-shrink:0;
}
.sc-hdr-left{display:flex;align-items:center;gap:.9rem;}
.sc-hdr-badge {
  width:46px;height:46px;border-radius:50%;
  background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sc-hdr-title {
  font-family:var(--font-display);font-size:1.4rem;font-weight:500;
  color:#f0ebe0;letter-spacing:.03em;line-height:1.2;
}
.sc-hdr-count {
  font-size:.7rem;color:#c9a84c;letter-spacing:.09em;
  text-transform:uppercase;margin-top:.1rem;
}
.sc-hdr-close {
  width:36px;height:36px;border-radius:50%;
  background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.15);
  color:#f0ebe0;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .2s,border-color .2s;
}
.sc-hdr-close:hover{background:rgba(201,168,76,.18);border-color:rgba(201,168,76,.4);}

/* Shipping Banner */
.sc-ship {
  padding:.85rem 1.5rem .9rem;
  border-bottom:1px solid rgba(201,168,76,.1);
  background:rgba(201,168,76,.04);flex-shrink:0;
}
.sc-ship-row {
  display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;margin-bottom:.65rem;
}
.sc-ship-info{display:flex;align-items:center;gap:.55rem;flex:1;min-width:0;}
.sc-ship-info span{font-size:.77rem;color:rgba(245,237,214,.72);line-height:1.4;}
.sc-ship-info strong{color:#c9a84c;}
.sc-free-tag{font-style:normal;color:#c9a84c;font-weight:700;}
.sc-ship-togo{font-size:.72rem;color:#c9a84c;font-weight:600;white-space:nowrap;flex-shrink:0;}
.sc-ship-track {
  height:5px;border-radius:999px;
  background:rgba(201,168,76,.12);overflow:hidden;
}
.sc-ship-fill {
  height:100%;border-radius:999px;width:0%;
  background:linear-gradient(90deg,#a07830,#c9a84c,#e8c96d);
  transition:width .6s cubic-bezier(.4,0,.2,1);min-width:0;
}

/* Items List */
.sc-items {
  flex:1;overflow-y:auto;padding:.4rem 1.5rem;
  scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.2) transparent;
}
.sc-items::-webkit-scrollbar{width:3px;}
.sc-items::-webkit-scrollbar-track{background:transparent;}
.sc-items::-webkit-scrollbar-thumb{background:rgba(201,168,76,.22);border-radius:4px;}

/* Cart item rows */
.slide-cart-item {
  display:grid;grid-template-columns:90px 1fr 34px;
  gap:.9rem;align-items:start;
  padding:.95rem 0;border-bottom:1px solid rgba(201,168,76,.07);
}
.slide-cart-item:last-child{border-bottom:none;}
.slide-cart-item-img {
  width:90px;height:90px;border-radius:10px;
  object-fit:cover;background:rgba(11,31,8,.6);
  border:1px solid rgba(201,168,76,.12);display:block;
}
.slide-cart-item-name {
  display:block;font-family:var(--font-display);font-size:.92rem;
  color:#f0ebe0;line-height:1.35;margin-bottom:.3rem;
}
.slide-cart-item-price{font-size:.9rem;color:#c9a84c;font-weight:600;margin-bottom:.5rem;}
.slide-cart-qty {
  display:inline-flex;align-items:center;
  background:rgba(5,15,5,.7);border:1px solid rgba(201,168,76,.2);
  border-radius:999px;overflow:hidden;
}
.slide-cart-qty button {
  width:30px;height:28px;color:#c9a84c;
  font-size:1.05rem;font-weight:400;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;flex-shrink:0;
}
.slide-cart-qty button:hover{background:rgba(201,168,76,.14);}
.slide-cart-qty span {
  min-width:26px;text-align:center;
  font-size:.82rem;color:#f0ebe0;
}
.slide-cart-remove {
  width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(201,168,76,.12);
  color:rgba(245,237,214,.28);
  display:flex;align-items:center;justify-content:center;
  margin-top:3px;transition:all .2s;align-self:flex-start;
}
.slide-cart-remove:hover{border-color:#f87171;color:#f87171;background:rgba(248,113,113,.08);}

/* Empty state */
.slide-cart-empty {
  text-align:center;padding:3.5rem 1.5rem;color:rgba(245,237,214,.3);
}
.slide-cart-empty p{font-size:.85rem;margin-bottom:1.5rem;}
/* Footer */
.sc-foot {
  padding:1.15rem 1.5rem 1.4rem;
  border-top:1px solid rgba(201,168,76,.1);
  background:rgba(3,9,3,.45);flex-shrink:0;
}
.sc-subtotal{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem;}
.sc-subtotal-l{display:flex;align-items:center;gap:.7rem;}
.sc-subtotal-ico {
  width:36px;height:36px;border-radius:50%;
  background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sc-subtotal-lbl{font-size:.87rem;color:rgba(245,237,214,.6);}
.sc-subtotal-val {
  font-family:var(--font-display);font-size:1.38rem;
  color:#c9a84c;font-weight:500;
}
.sc-sep{height:1px;background:rgba(201,168,76,.1);margin-bottom:.85rem;}
.sc-trust{margin-bottom:1rem;}
.sc-trust-row {
  display:flex;align-items:center;gap:.45rem;
  font-size:.74rem;color:rgba(245,237,214,.48);
  margin-bottom:.42rem;line-height:1.4;
}
.sc-trust-row:last-child{margin-bottom:0;}
.sc-gold{color:#c9a84c;}
.sc-btn-checkout {
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;padding:.88rem 1rem;border-radius:999px;
  background:linear-gradient(90deg,#b8922e,#c9a84c,#d4b45a);
  color:#0b1f08;font-size:.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  transition:box-shadow .25s,opacity .2s;margin-bottom:.55rem;
}
.sc-btn-checkout:hover{box-shadow:0 8px 32px rgba(201,168,76,.42);opacity:.94;color:#0b1f08;}
.sc-btn-view {
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;padding:.75rem 1rem;border-radius:999px;
  border:1px solid rgba(201,168,76,.28);
  color:#c9a84c;font-size:.73rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;transition:all .22s;
}
.sc-btn-view:hover{background:rgba(201,168,76,.08);border-color:#c9a84c;}

/* ═══════════════════════════════════════════════════════════
   WOOCOMMERCE — COMPLETE OVERRIDES (Pixel-Perfect)
   ═══════════════════════════════════════════════════════════ */

/* ─── GLOBAL WOO RESETS ─── */
.woocommerce, .woocommerce-page { font-family: var(--font-body); }
.woocommerce .wrap,
.woocommerce-page .wrap {
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Remove ALL default WooCommerce visual cruft */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 1.5rem; }
.woocommerce .woocommerce-result-count {
  font-size: .78rem; color: var(--text-muted);
  letter-spacing: .03em;
}

/* ─── ALL BUTTONS ─── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .button.alt,
.woocommerce #respond input#submit,
.woocommerce a.added_to_cart {
  background: var(--gold) !important;
  color: var(--c0) !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-body) !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: .75rem 2rem !important;
  cursor: pointer !important;
  transition: all .3s var(--ease-expo) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .4rem !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.added_to_cart:hover {
  background: var(--gold-light) !important;
  box-shadow: 0 8px 40px rgba(201,168,76,.45) !important;
  transform: translateY(-2px) !important;
}
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.alt.disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* "View cart" link after add */
.woocommerce a.added_to_cart {
  font-size: .68rem !important;
  padding: .5rem 1.2rem !important;
  margin-left: .5rem !important;
  background: transparent !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold) !important;
}
.woocommerce a.added_to_cart:hover {
  background: var(--gold) !important;
  color: var(--c0) !important;
}

/* ─── SELECT / ORDERBY DROPDOWN ─── */
.woocommerce .woocommerce-ordering select,
.woocommerce select {
  appearance: none; -webkit-appearance: none;
  background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A9275' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .65rem 2.5rem .65rem 1rem;
  font-size: .82rem; font-family: var(--font-body);
  color: var(--text); cursor: pointer;
  transition: border-color .2s;
}
.woocommerce .woocommerce-ordering select:focus,
.woocommerce select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.1);
}

/* ─── BREADCRUMB ─── */
.woocommerce .woocommerce-breadcrumb {
  font-size: .72rem; color: var(--text-muted);
  letter-spacing: .05em; margin-bottom: 2rem;
  padding-top: .5rem;
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--gold); transition: color .2s;
}
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--gold-light); }

/* ─── NOTICES / MESSAGES ─── */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  background: var(--bg-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 1rem 1.5rem !important;
  font-size: .85rem !important;
  color: var(--text) !important;
  border-top: none !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  line-height: 1.6 !important;
}
.woocommerce .woocommerce-message { border-left: 3px solid #4ade80 !important; }
.woocommerce .woocommerce-info { border-left: 3px solid var(--gold) !important; }
.woocommerce .woocommerce-error { border-left: 3px solid #f87171 !important; }
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before { color: var(--gold) !important; }
.woocommerce .woocommerce-error li { color: var(--text); }

/* ─── SHOP PAGE — PRODUCT ARCHIVE ─── */
.woocommerce .site-main {
  padding-top: calc(var(--header-height) + 2rem);
  padding-bottom: 5rem;
  min-height: 80vh;
}

/* Page title */
.woocommerce-products-header {
  text-align: center; margin-bottom: 3rem;
  padding-top: 1rem;
}
.woocommerce-products-header .page-title,
.woocommerce-products-header__title {
  font-family: var(--font-display) !important;
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  font-weight: 400 !important;
  letter-spacing: -.025em !important;
  color: var(--cream) !important;
  margin-bottom: .5rem !important;
}

/* Result count + ordering bar */
.woocommerce .shop-controls,
.woocommerce-page .woocommerce-result-count + .woocommerce-ordering {
  display: inline-flex;
}
.woocommerce::before, .woocommerce::after { display: none; }

/* Product grid */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }

/* Individual product card */
.woocommerce ul.products li.product {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: box-shadow .4s var(--ease-expo), border-color .3s, transform .4s var(--ease-expo);
  position: relative;
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 24px 64px rgba(11,31,8,.15);
  border-color: rgba(201,168,76,.22);
  transform: translateY(-6px);
}

/* Product image */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  border-radius: 0 !important;
  transition: transform .6s var(--ease-expo);
}
.woocommerce ul.products li.product:hover img {
  transform: scale(1.06);
}
.woocommerce ul.products li.product > a {
  overflow: hidden;
  display: block;
  position: relative;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  padding: .75rem 1.15rem .25rem !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* Product price */
.woocommerce ul.products li.product .price {
  font-size: .92rem !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  padding: 0 1.15rem .35rem !important;
  margin: 0 !important;
  display: block;
}
.woocommerce ul.products li.product .price del {
  color: var(--text-muted) !important;
  font-weight: 400 !important;
  font-size: .82em !important;
  text-decoration: line-through !important;
  opacity: .7;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none !important;
  background: none !important;
  font-weight: 600;
}

/* Star rating on cards */
.woocommerce ul.products li.product .star-rating {
  margin: 0 1.15rem .5rem !important;
  font-size: .72rem !important;
  color: var(--gold) !important;
}

/* Add to cart on cards */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.product_type_simple {
  margin: auto 1rem 1rem !important;
  padding: .65rem 1.25rem !important;
  font-size: .68rem !important;
  border-radius: var(--radius-md) !important;
  width: calc(100% - 2rem) !important;
  text-align: center !important;
}

/* Sale badge */
.woocommerce span.onsale {
  background: var(--gold) !important;
  color: var(--c0) !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: .35rem .85rem !important;
  border-radius: var(--radius-full) !important;
  min-width: auto !important;
  min-height: auto !important;
  line-height: 1.4 !important;
  top: .85rem !important;
  left: .85rem !important;
  right: auto !important;
  z-index: 2;
  position: absolute !important;
}

/* Out of stock */
.woocommerce ul.products li.product .outofstock-label,
.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title::after {
  content: 'Sold Out';
  display: inline-block;
  font-size: .58rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: rgba(248,113,113,.15); color: #f87171;
  padding: .2rem .55rem; border-radius: var(--radius-full);
  margin-left: .5rem; vertical-align: middle;
}

/* ─── PAGINATION ─── */
.woocommerce nav.woocommerce-pagination {
  margin-top: 3rem !important;
  text-align: center !important;
  border: none !important;
}
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: .4rem !important;
  border: none !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  margin: 0 !important;
  float: none !important;
  overflow: visible !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--radius-full) !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  color: var(--text) !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  transition: all .25s var(--ease-expo) !important;
  text-decoration: none !important;
  min-width: auto !important;
  padding: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: rgba(201,168,76,.06) !important;
  transform: translateY(-2px) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--gold) !important;
  color: var(--c0) !important;
  border-color: var(--gold) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(201,168,76,.3) !important;
}
/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 1.1rem !important;
}

/* ─── SINGLE PRODUCT ─── */
.woocommerce div.product {
  padding-top: calc(var(--header-height) + 3rem);
}
/* Two-column layout */
.woocommerce #content div.product div.images,
.woocommerce div.product div.images {
  float: none !important;
  width: 100% !important;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-alt);
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  float: none !important;
  width: 100% !important;
}
.woocommerce div.product {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells {
  grid-column: 1 / -1;
}

/* Product image */
.woocommerce div.product div.images img {
  border-radius: var(--radius-xl);
  width: 100%; height: auto;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  border-radius: var(--radius-xl); overflow: hidden;
}
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex; gap: .6rem; margin-top: 1rem;
  padding: 0; list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li {
  flex: 0 0 72px; height: 72px;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer; transition: border-color .2s, opacity .2s;
  opacity: .6;
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  border-color: var(--gold); opacity: 1;
}

/* Product title */
.woocommerce div.product .product_title {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
  color: var(--cream) !important;
  line-height: 1.15 !important;
  margin-bottom: .75rem !important;
}

/* Price — single product */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-body) !important;
  font-size: 1.5rem !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
  margin-bottom: 1.25rem !important;
  display: flex !important;
  align-items: baseline !important;
  gap: .5rem !important;
  flex-wrap: wrap !important;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color: var(--text-muted) !important;
  font-size: .7em !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  text-decoration: none !important;
  background: none !important;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: .9rem;
  color: rgba(245,237,214,.6);
  line-height: 1.85;
  margin-bottom: 1.5rem;
  max-width: 520px;
}

/* Quantity */
.woocommerce .quantity {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: rgba(201,168,76,.04);
}
.woocommerce .quantity .qty {
  width: 56px !important;
  padding: .7rem .5rem !important;
  border: none !important;
  border-radius: 0 !important;
  text-align: center !important;
  background: transparent !important;
  color: var(--cream) !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  -moz-appearance: textfield;
}
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* Add to cart form */
.woocommerce div.product form.cart {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 2rem !important;
  flex-wrap: wrap;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1; min-width: 200px;
}

/* Meta (SKU, category, tags) */
.woocommerce div.product .product_meta {
  font-size: .78rem;
  color: rgba(245,237,214,.4);
  line-height: 2;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201,168,76,.08);
}
.woocommerce div.product .product_meta > span {
  display: block;
}
.woocommerce div.product .product_meta a {
  color: var(--gold); transition: color .2s;
}
.woocommerce div.product .product_meta a:hover { color: var(--gold-light); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs {
  margin-top: 4rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  list-style: none !important; padding: 0 !important; margin: 0 0 2rem !important;
  display: flex !important; gap: .5rem !important;
  border: none !important; border-bottom: none !important;
  flex-wrap: wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: none !important; background: none !important;
  padding: 0 !important; margin: 0 !important;
  border-radius: var(--radius-full) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-body) !important;
  font-size: .72rem !important; font-weight: 700 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  padding: .65rem 1.4rem !important;
  border-radius: var(--radius-full) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  transition: all .25s !important;
  display: inline-block !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  background: var(--gold) !important;
  color: var(--c0) !important;
  border-color: var(--gold) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 0;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 400;
  margin-bottom: 1rem;
}
.woocommerce div.product .woocommerce-tabs .panel p {
  font-size: .88rem; line-height: 1.9;
  color: var(--text-secondary);
}

/* Related / Upsell products */
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells {
  margin-top: 4rem; padding-top: 3rem;
  border-top: 1px solid var(--border);
}
.woocommerce div.product .related.products h2,
.woocommerce div.product .up-sells h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
  font-weight: 400 !important;
  text-align: center !important;
  margin-bottom: 2rem !important;
}

/* Star rating general */
.woocommerce .star-rating {
  color: var(--gold) !important;
  font-size: .8rem;
}
.woocommerce .star-rating span::before { color: var(--gold) !important; }

/* ─── CART PAGE ─── */
.woocommerce-cart .site-main { background: var(--bg); }
.woocommerce-cart .woocommerce {
  padding-top: calc(var(--header-height) + 2rem);
}
.woocommerce table.shop_table {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  border-collapse: collapse !important;
  width: 100%;
}
.woocommerce table.shop_table th {
  font-size: .68rem !important; font-weight: 700 !important;
  letter-spacing: .15em !important; text-transform: uppercase !important;
  color: var(--text-muted) !important;
  background: var(--bg-alt) !important;
  padding: 1rem 1.25rem !important;
  border: none !important;
}
.woocommerce table.shop_table td {
  padding: 1.25rem !important;
  border-top: 1px solid var(--border) !important;
  vertical-align: middle !important;
  background: var(--bg-card) !important;
}
.woocommerce table.shop_table td.product-thumbnail img {
  width: 72px !important; height: 72px !important;
  object-fit: cover; border-radius: var(--radius-md);
}
.woocommerce table.shop_table td.product-name a {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 500;
  color: var(--text); transition: color .2s;
}
.woocommerce table.shop_table td.product-name a:hover { color: var(--gold); }
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal {
  font-weight: 600; color: var(--gold);
}
.woocommerce table.shop_table td.product-remove a.remove {
  width: 32px !important; height: 32px !important;
  border-radius: var(--radius-full) !important;
  background: rgba(248,113,113,.08) !important;
  color: #f87171 !important;
  font-size: 1.1rem !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: all .2s !important;
}
.woocommerce table.shop_table td.product-remove a.remove:hover {
  background: #f87171 !important; color: #fff !important;
}

/* Cart totals (base — overridden per page class below) */
.woocommerce .cart-collaterals {
  margin-top: 2.5rem;
}
/* Kill WC's float-based layout in our cart page (body-class selector as backup) */
.woocommerce-cart .cocomera-wc-page .woocommerce-cart-form,
.woocommerce-cart .cocomera-wc-page .cart-collaterals,
.cocomera-cart-page .woocommerce-cart-form,
.cocomera-cart-page .cart-collaterals {
  float: none !important;
  clear: none !important;
}
.woocommerce .cart_totals {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 480px;
  margin-left: auto;
}
.woocommerce .cart_totals h2 {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  margin-bottom: 1.25rem !important;
}
.woocommerce .cart_totals table {
  border: none !important;
}
.woocommerce .cart_totals table th {
  font-size: .72rem !important;
  letter-spacing: .1em !important;
  background: transparent !important;
  padding: .75rem 0 !important;
}
.woocommerce .cart_totals table td {
  background: transparent !important;
  padding: .75rem 0 !important;
  text-align: right !important;
  border-top: 1px solid var(--border) !important;
}
.woocommerce .cart_totals .order-total td { color: var(--gold); font-weight: 700; font-size: 1.15rem; }
.woocommerce .cart_totals .wc-proceed-to-checkout {
  margin-top: 1.5rem;
}
.woocommerce .cart_totals .wc-proceed-to-checkout a {
  width: 100%;
}

/* Coupon */
.woocommerce .coupon {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}
.woocommerce .coupon input.input-text {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: .65rem 1rem !important;
  background: var(--bg-card) !important;
  color: var(--text) !important;
  font-size: .82rem !important;
}
.woocommerce .coupon input.input-text:focus {
  border-color: var(--gold) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════
   CHECKOUT — REDESIGNED
   ═══════════════════════════════════════════════ */

/* Page wrapper */
.coco-checkout-page { background: var(--bg); min-height: 100vh; }

/* ─── Top bar with steps ─── */
.coco-ck-topbar {
  background: var(--c0);
  border-bottom: 1px solid rgba(201,168,76,.12);
  padding: 1.25rem 0;
}
.coco-ck-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.coco-ck-steps {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.coco-ck-step {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-dim);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .03em;
  text-decoration: none;
  transition: color .2s;
}
a.coco-ck-step:hover { color: var(--cream); }
.coco-ck-step-active { color: var(--gold) !important; font-weight: 600; }
.coco-ck-step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
}
.coco-ck-step-active .coco-ck-step-num {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--c0);
}
.coco-ck-step-line {
  width: 40px; height: 1px;
  background: rgba(245,237,214,.15);
}
.coco-ck-secure {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--text-dim);
  font-size: .72rem;
  letter-spacing: .04em;
}

/* ─── Page heading ─── */
.coco-ck-heading {
  text-align: center;
  padding: 2rem 0 1.5rem;
  background: var(--bg);
}
.coco-ck-heading h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--text);
  margin: .3rem 0 0;
  font-weight: 400;
}

/* ─── Coupon notice ─── */
/* Coupon toggle link */
.coco-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info {
  max-width: 480px !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-secondary) !important;
  padding: .75rem 1.15rem !important;
  font-size: .82rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.coco-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info::before {
  content: none !important;
}
.coco-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--gold) !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: color .2s;
}
.coco-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info a:hover {
  color: var(--gold-light) !important;
  text-decoration: none !important;
}

/* Coupon form — hidden by default, WC toggles via jQuery */
.coco-checkout-page .checkout_coupon {
  max-width: 480px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.25rem;
  display: none;
}
.coco-checkout-page .checkout_coupon[style*="display: block"],
.coco-checkout-page .checkout_coupon[style*="display:block"],
.coco-checkout-page .checkout_coupon.active {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
}
.coco-checkout-page .checkout_coupon p { margin: 0 !important; }
.coco-checkout-page .checkout_coupon > p:first-child { display: none; }
.coco-checkout-page .checkout_coupon .form-row {
  margin: 0 !important; padding: 0 !important; float: none !important;
}
.coco-checkout-page .checkout_coupon .form-row-first,
.coco-checkout-page .checkout_coupon p.form-row-first {
  flex: 1 1 250px !important;
  width: auto !important;
  display: block !important;
}
.coco-checkout-page .checkout_coupon .form-row-last,
.coco-checkout-page .checkout_coupon p.form-row-last {
  flex: 0 0 auto !important;
  width: auto !important;
  display: block !important;
}
.coco-checkout-page .checkout_coupon input#coupon_code {
  width: 100% !important;
  padding: .7rem .9rem !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  font-size: .85rem !important;
  height: auto !important;
  min-height: 42px;
}
.coco-checkout-page .checkout_coupon input#coupon_code:focus {
  border-color: var(--gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,.1) !important;
}
.coco-checkout-page .checkout_coupon button[name="apply_coupon"] {
  background: var(--gold) !important;
  color: var(--c0) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: .7rem 1.5rem !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  white-space: nowrap;
  min-height: 42px;
  transition: background .2s;
}
.coco-checkout-page .checkout_coupon button[name="apply_coupon"]:hover {
  background: var(--gold-light) !important;
}

/* ─── Main checkout area ─── */
.coco-ck-main {
  padding: 0 0 clamp(2rem, 4vw, 3.5rem);
}
.coco-ck-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 3vw, 3rem);
}

/* ─── Trust badges ─── */
.coco-ck-trust {
  background: var(--c0);
  padding: 1.75rem 0;
  border-top: 1px solid rgba(201,168,76,.08);
}
.coco-ck-trust-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap;
}
.coco-ck-trust-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-dim);
  font-size: .75rem;
  letter-spacing: .03em;
  white-space: nowrap;
}

/* ─── Checkout: order review table ─── */
#order_review_heading,
#order_review { position: relative; }

/* ── Table shell ── */
.woocommerce-checkout-review-order-table {
  width: calc(100% - 1.5rem) !important;  /* 0.75rem gap each side */
  margin: 0 .75rem !important;
  table-layout: fixed !important;   /* enforces 60/40 split from thead */
  border-collapse: separate !important; /* separate required for border-radius to work */
  border-spacing: 0 !important;
  overflow: hidden !important;          /* clips cells to rounded corners */
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 14px !important;
  background: var(--c1, #142B11) !important;
}

/* ── ALL cells: hard-reset every border WC might inject ── */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  border: none !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  padding: .9rem 2rem !important;
  vertical-align: middle !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── thead: sets the 70 / 30 column widths ──
   With table-layout:fixed, these cascade to every row below. ── */
.woocommerce-checkout-review-order-table thead th {
  border-top: none !important;
  padding-top: .9rem !important;
  padding-bottom: .9rem !important;
  font-family: var(--font-body, 'DM Sans', sans-serif) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.28) !important;
}
.woocommerce-checkout-review-order-table thead th:first-child { width: 60% !important; }
.woocommerce-checkout-review-order-table thead th:last-child  { width: 40% !important; }

/* ── Left / right cell alignment (applies to every row) ── */
.woocommerce-checkout-review-order-table th:first-child,
.woocommerce-checkout-review-order-table td:first-child {
  text-align: left !important;
  padding-left: 2.25rem !important;
}
.woocommerce-checkout-review-order-table th:last-child,
.woocommerce-checkout-review-order-table td:last-child {
  text-align: right !important;
  padding-right: 2.25rem !important;
  white-space: nowrap !important;
}

/* ── Product row (tbody) ── */
.woocommerce-checkout-review-order-table td.product-name {
  font-family: var(--font-body, 'DM Sans', sans-serif) !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  color: var(--cream, #F5EDD6) !important;
  line-height: 1.5 !important;
}
/* Thumbnail vertically centred, no bleed */
.woocommerce-checkout-review-order-table td.product-name img {
  display: inline-block !important;
  width: 46px !important;
  height: 46px !important;
  object-fit: cover !important;
  border-radius: 7px !important;
  vertical-align: middle !important;
  margin-right: .9rem !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}
/* Quantity flows inline — not on its own line */
.woocommerce-checkout-review-order-table td.product-name .product-quantity {
  display: inline !important;
  font-size: .78rem !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.38) !important;
  margin-left: .25rem !important;
}
/* Force product name link/span inline so qty doesn't wrap to next line */
.woocommerce-checkout-review-order-table td.product-name a,
.woocommerce-checkout-review-order-table td.product-name > span:not(.product-quantity) {
  display: inline !important;
}
/* Checkout order review — product name clickable link */
.woocommerce-checkout-review-order-table td.product-name a {
  color: var(--gold, #C9A84C) !important;
  text-decoration: none !important;
  transition: color .18s ease !important;
}
.woocommerce-checkout-review-order-table td.product-name a:hover {
  color: var(--gold-light, #E8C96A) !important;
}
/* Product subtotal value */
.woocommerce-checkout-review-order-table td.product-total {
  font-family: var(--font-body, 'DM Sans', sans-serif) !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.88) !important;
}

/* ── tfoot: Subtotal + Shipping rows ──
   With table-layout:fixed these cells inherit the same 70/30 split.
   Labels sit left at 2rem; the left column fills properly. ── */
.woocommerce-checkout-review-order-table tfoot th {
  font-family: var(--font-body, 'DM Sans', sans-serif) !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.48) !important;
  padding-top: .8rem !important;
  padding-bottom: .8rem !important;
}
.woocommerce-checkout-review-order-table tfoot td {
  font-family: var(--font-body, 'DM Sans', sans-serif) !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.82) !important;
  padding-top: .8rem !important;
  padding-bottom: .8rem !important;
}

/* ── Order total row ── */
.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  border-top: 1px solid rgba(255,255,255,.14) !important;
  padding-top: 1.1rem !important;
  padding-bottom: 1.2rem !important;
}
.woocommerce-checkout-review-order-table tfoot tr.order-total th {
  font-size: .7rem !important;
  letter-spacing: .16em !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,.75) !important;
}
/* Gold total — large and prominent */
.woocommerce-checkout-review-order-table tfoot tr.order-total td strong {
  display: block !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--gold, #C9A84C) !important;
  line-height: 1.15 !important;
}
.woocommerce-checkout-review-order-table tfoot tr.order-total td strong .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table tfoot tr.order-total td strong .amount {
  color: var(--gold, #C9A84C) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
/* Tax note — sits neatly under the gold amount */
.woocommerce-checkout-review-order-table tfoot tr.order-total small,
.woocommerce-checkout-review-order-table tfoot tr.order-total .includes_tax {
  display: block !important;
  font-size: .68rem !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.36) !important;
  margin-top: .3rem !important;
  line-height: 1.55 !important;
  white-space: normal !important;
}
.woocommerce-checkout-review-order-table tfoot tr.order-total small *,
.woocommerce-checkout-review-order-table tfoot tr.order-total .includes_tax * {
  display: inline !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: rgba(255,255,255,.48) !important;
}
.woocommerce-checkout-review-order-table tfoot tr.order-total small br,
.woocommerce-checkout-review-order-table tfoot tr.order-total .includes_tax br {
  display: none !important;
}

/* ── BlockUI loading overlay ── */
#order_review .blockUI.blockOverlay {
  background: rgba(11,31,8,.6) !important;
  border-radius: 14px !important;
}
#order_review .blockUI.blockMsg {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ═══ CHECKOUT RESPONSIVE ═══ */
@media (max-width: 640px) {
  .coco-ck-topbar-inner { flex-direction: column; gap: .75rem; }
  .coco-ck-steps { gap: .5rem; }
  .coco-ck-step span:not(.coco-ck-step-num) { font-size: .68rem; }
  .coco-ck-step-line { width: 24px; }
  .coco-ck-container { padding: 0 1rem; }
  .coco-ck-trust-inner { gap: 1rem; }
  .coco-ck-trust-item { font-size: .68rem; }
}

/* ─── MY ACCOUNT ─── */
.woocommerce-account .site-main { background: var(--bg); }
.woocommerce-account .woocommerce {
  padding-top: calc(var(--header-height) + 2rem);
  display: grid; grid-template-columns: 240px 1fr; gap: 3rem;
  align-items: start;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--bg-alt) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1.25rem !important;
  border: 1px solid var(--border) !important;
  position: sticky; top: calc(var(--header-height) + 2rem);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  padding: 0 !important; margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  margin-bottom: .15rem !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  padding: .6rem 1rem !important;
  border-radius: var(--radius-sm) !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  transition: all .2s !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background: rgba(201,168,76,.06) !important;
  color: var(--gold) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--gold) !important;
  color: var(--c0) !important;
  font-weight: 700 !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
}

/* Login / Register forms */
.woocommerce form.login,
.woocommerce form.register {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 2.5rem !important;
  margin: 0 !important;
}
.woocommerce form.login h2,
.woocommerce form.register h2 {
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  margin-bottom: 1.5rem !important;
}

/* Account: order details — product name clickable links */
.woocommerce-account .woocommerce-table--order-details td.product-name a,
.woocommerce-account .woocommerce-table--order-items td.product-name a {
  color: var(--gold, #C9A84C) !important;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color .18s ease !important;
}
.woocommerce-account .woocommerce-table--order-details td.product-name a:hover,
.woocommerce-account .woocommerce-table--order-items td.product-name a:hover {
  color: var(--gold-light, #E8C96A) !important;
}
/* Account: orders list — order number links */
.woocommerce-account .woocommerce-orders-table__cell-order-number a {
  color: var(--gold, #C9A84C) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color .18s ease !important;
}
.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover {
  color: var(--gold-light, #E8C96A) !important;
}

/* ─── THANK YOU PAGE ─── */
.woocommerce-order-received .site-main {
  padding-top: calc(var(--header-height) + 3rem);
}
.woocommerce-thankyou-order-received {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
  text-align: center;
  margin-bottom: 2rem;
}

/* ─── RESPONSIVE WOO ─── */
@media (max-width: 1100px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
  .woocommerce div.product { grid-template-columns: 1fr !important; gap: 2.5rem; }
  .woocommerce-checkout .woocommerce form.checkout { grid-template-columns: 1fr; }
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-account .woocommerce-MyAccount-navigation { position: static; }
}
@media (max-width: 768px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: .85rem !important; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h2 { font-size: .95rem !important; padding: .6rem .85rem .2rem !important; }
  .woocommerce ul.products li.product .price { padding: 0 .85rem .3rem !important; font-size: .82rem !important; }
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product a.add_to_cart_button {
    margin: auto .6rem .6rem !important;
    width: calc(100% - 1.2rem) !important;
    padding: .55rem 1rem !important;
    font-size: .62rem !important;
  }
  .woocommerce .cart_totals { max-width: 100%; }
}
@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: .6rem !important; }
  .woocommerce-account .woocommerce-MyAccount-content { padding: 1.5rem; }
  .woocommerce form.login, .woocommerce form.register { padding: 1.5rem !important; }
}

/* ─── SHIPMENT TRACKING ─── */
.tracking-section {
  padding-top: calc(var(--header-height) + 4rem);
  min-height: 100vh;
}
.tracking-form {
  max-width: 560px; margin: 0 auto; text-align: center;
}
.tracking-input-wrap {
  display: flex; border: 2px solid var(--border);
  border-radius: var(--radius-full); overflow: hidden;
  transition: border-color .2s;
  margin-top: 2rem;
}
.tracking-input-wrap:focus-within { border-color: var(--gold); }
.tracking-input {
  flex: 1; padding: 1rem 1.5rem; border: none;
  background: var(--bg-card); font-size: .9rem;
  color: var(--text); outline: none;
}
.tracking-submit {
  padding: 1rem 2rem; background: var(--gold);
  color: var(--c0); font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s; white-space: nowrap;
}
.tracking-submit:hover { background: var(--gold-light); }
.tracking-timeline {
  max-width: 600px; margin: 3rem auto 0;
  position: relative; padding-left: 2rem;
}
.tracking-timeline::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: rgba(201,168,76,.15);
}
.tracking-step {
  position: relative; padding: 1.5rem 0 1.5rem 2rem;
}
.tracking-step::before {
  content: ''; position: absolute; left: -2rem; top: 1.75rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--border); border: 2px solid var(--bg);
  transform: translateX(-6px);
}
.tracking-step.active::before {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,168,76,.2);
}
.tracking-step.completed::before {
  background: #4ade80;
}
.tracking-step-title {
  font-size: .82rem; font-weight: 600; color: var(--text);
}
.tracking-step-time {
  font-size: .72rem; color: var(--text-muted); margin-top: .15rem;
}
.tracking-step-detail {
  font-size: .78rem; color: var(--text-secondary);
  margin-top: .3rem; line-height: 1.6;
}

/* ─── MY ACCOUNT ─── */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--bg-alt); border-radius: var(--radius-lg);
  padding: 1.5rem; border: 1px solid var(--border);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  margin-bottom: .25rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block; padding: .55rem 1rem;
  border-radius: var(--radius-sm); font-size: .82rem;
  font-weight: 500; transition: all .2s;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--gold); color: var(--c0);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background: rgba(201,168,76,.08);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) {
  .hero-wrap { grid-template-columns: 1fr; text-align: center; gap: 3.5rem; }
  .hero-subtitle, .hero-actions, .hero-stats { justify-content: center; margin-left: auto; margin-right: auto; }
  .hero-right { height: 380px; max-width: 520px; margin: 0 auto; }
  .hero-badge { display: none; }
  .hero-micro { display: none; }
  .ingredients-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .ingredients-bg-number { display: none; }
  .founder-grid { grid-template-columns: 1fr; gap: 3rem; }
  .collections-grid { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .collection-card--featured { grid-column: 1/-1; grid-row: auto; height: 310px; }
  .collection-card { height: 220px; }
  .gift-banner { grid-template-columns: 1fr; }
  .gift-image { min-height: 260px; }
  .header-nav { display: none; }
  .mega-menu { display: none; }
  .mobile-toggle { display: flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .testimonial-card { flex: 0 0 80vw; }
  .testimonials-prev, .testimonials-next { display: none; }
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
  .woocommerce-checkout .woocommerce form.checkout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "brand brand" "nav1 nav2" "news news"; gap: 2rem 2rem; padding-bottom: 2.5rem; }
  .footer-grid > div:first-child { grid-area: brand; text-align: center; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(201,168,76,.08); }
  .footer-grid > div:nth-child(2) { grid-area: nav1; }
  .footer-grid > div:nth-child(3) { grid-area: nav2; }
  .footer-newsletter { grid-area: news; text-align: center; }
  .footer-social { justify-content: center; }
  .footer-tagline { max-width: 100%; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: 1rem 0; }
  .payment-badges { justify-content: center; }
  .wrap, .hero-wrap { padding: 0 1.25rem; }
  .hero-wrap { padding-top: calc(var(--header-height) + 2rem); }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: .85rem; }
  .search-input { font-size: 1.8rem; }
}
@media (max-width: 480px) {
  .products-grid { gap: .6rem; }
  .collections-grid { grid-template-columns: 1fr; }
  .collection-card--featured { height: 250px; }
  .footer-grid { grid-template-columns: 1fr; grid-template-areas: none; gap: 1.5rem; padding-bottom: 2rem; }
  .footer-grid > div:first-child { grid-area: auto; border-bottom: none; padding-bottom: 0; }
  .footer-grid > div:nth-child(2), .footer-grid > div:nth-child(3) { grid-area: auto; }
  .footer-newsletter { grid-area: auto; }
  .site-footer { padding-top: 2.5rem; }
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
  .gift-wrap { padding: 0 1rem clamp(3rem, 6vw, 6rem); }
  :root { --header-height: 64px; }
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ─── RIPPLE ─── */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(201,168,76,.12);
  transform: scale(0);
  animation: ripple .6s var(--ease-expo);
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ─── PARTICLE CANVAS ─── */
#particle-canvas {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: .4;
}

/* ─── MOBILE/TABLET HEADER LAYOUT (logo left, hamburger right) ─── */
@media (max-width: 1100px) {
  .header-inner {
    grid-template-columns: 1fr auto !important;
    align-items: center;
  }
  .header-logo { justify-self: start !important; }
  .header-logo .logo-img { width: 170px; height: auto; }
  .header-actions { justify-self: end; gap: .35rem; }
  .header-actions .header-action:not(#mobile-toggle):not(#cart-toggle) { display: none; }
}
@media (max-width: 600px) {
  .header-logo .logo-img { width: 140px; }
}

/* ─── MOBILE NAV: styles in base block ─── */

/* ─── COCOMERA WC CART / CHECKOUT (clean unified layout) ─── */
.cocomera-wc-page .woocommerce { color: var(--text); }
.cocomera-wc-page .woocommerce-notices-wrapper { margin-bottom: 1rem; }
.cocomera-wc-page .woocommerce-message,
.cocomera-wc-page .woocommerce-info,
.cocomera-wc-page .woocommerce-error {
  background: var(--bg-card) !important;
  border-top: 3px solid var(--gold) !important;
  color: var(--text) !important;
  padding: 1rem 1.5rem !important;
  border-radius: var(--radius-sm);
  list-style: none;
}
.cocomera-wc-page .woocommerce-message::before,
.cocomera-wc-page .woocommerce-info::before { color: var(--gold) !important; }

/* ── Cart hero + body wrappers ── */
.coco-cart-hero {
  text-align: center;
  padding: 2rem var(--wrap-pad, 1.5rem) 3rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.coco-cart-hero h1 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--gold);
  margin: 0 0 .5rem;
  font-weight: 400;
}
.coco-cart-hero p {
  color: rgba(255,255,255,.7);
  font-size: .88rem;
  margin: 0;
}
.coco-cart-body {
  padding: 0 var(--wrap-pad, 1.5rem) 5rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* ── Cart layout: full-width table, then estimate | totals 50/50 below ── */
.cocomera-cart-page .woocommerce-cart-form {
  display: block !important;
  float: none !important;
  width: 100% !important;
}
.cocomera-cart-page .woocommerce {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
}
/* Kill WC float-based clearfix layout entirely */
.cocomera-cart-page .woocommerce::after,
.cocomera-cart-page .woocommerce::before { display: none !important; }
/* Collaterals row: 50/50 split, same as reference HTML md:grid-cols-2 */
.cocomera-cart-page .cart-collaterals {
  display: flex !important;
  flex-direction: row !important;
  gap: 2rem !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin-top: 0 !important;
  clear: both !important;
}
.cocomera-cart-page .cart-collaterals .coco-delivery-estimate {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-top: 0 !important;
  width: auto !important;
}
.cocomera-cart-page .cart-collaterals .cart_totals {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
}

.cocomera-wc-page table.shop_table {
  background: var(--bg-card);
  border: 1px solid var(--border) !important;
  border-collapse: separate !important;
  border-radius: var(--radius-md);
  overflow: hidden;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.cocomera-wc-page table.shop_table th {
  color: rgba(255,255,255,.45);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1rem 1.5rem !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  background: transparent;
}
.cocomera-wc-page table.shop_table td {
  color: var(--text) !important;
  padding: 1.5rem !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  vertical-align: middle;
}
.cocomera-wc-page table.shop_table tr:first-child td { border-top: none !important; }
.cocomera-wc-page .product-thumbnail img { width: 80px !important; height: 80px; object-fit: cover; border-radius: var(--radius-sm); background: rgba(255,255,255,.05); }
.cocomera-wc-page .product-name a { color: var(--gold) !important; font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; }
.cocomera-wc-page .product-name a:hover { color: var(--gold-light) !important; }
.cocomera-wc-page .product-remove a.remove {
  color: #ef4444 !important;
  width: 26px; height: 26px; line-height: 1;
  border-radius: 50%; font-size: .85rem; font-weight: 700;
  background: rgba(185,28,28,.22);
  transition: background .2s ease, transform .18s ease, color .15s ease, box-shadow .2s ease;
  display: inline-flex !important; align-items: center; justify-content: center;
}
.cocomera-wc-page .product-remove a.remove:hover {
  background: rgba(220,38,38,.6) !important;
  color: #fff !important;
  transform: scale(1.2);
  box-shadow: 0 0 0 3px rgba(220,38,38,.22);
}
.cocomera-wc-page .product-remove a.remove:active {
  transform: scale(.88);
  background: rgba(185,28,28,.85) !important;
  box-shadow: none;
}

.cocomera-wc-page .quantity { display: inline-flex; align-items: center; gap: 0; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm); overflow: hidden; background: rgba(0,0,0,.4); padding: .15rem; }
.cocomera-wc-page .quantity input.qty {
  background: transparent !important;
  color: var(--text) !important;
  border: none !important;
  width: 40px; height: 32px;
  padding: .25rem 0 !important;
  text-align: center; font-weight: 700; font-size: .95rem;
  -moz-appearance: textfield;
}
.cocomera-wc-page .quantity input.qty::-webkit-inner-spin-button,
.cocomera-wc-page .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cocomera-wc-page .coco-qty-btn {
  width: 32px; height: 32px; background: transparent; border: none;
  color: var(--text); font-size: 1.1rem; cursor: pointer; line-height: 1;
  font-weight: 400; transition: color .15s;
  display: flex; align-items: center; justify-content: center;
}
.cocomera-wc-page .coco-qty-btn:hover { color: var(--gold); }

/* Hide Update Cart button — cart auto-updates */
.cocomera-wc-page .actions button[name="update_cart"],
.cocomera-wc-page .actions input[name="update_cart"] { display: none !important; }

.cocomera-wc-page .actions {
  padding: 1.5rem 1.5rem !important;
  background: rgba(0,0,0,.2);
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

/* Cart table: product thumbnail + name in same row, properly aligned */
.cocomera-wc-page table.shop_table td.product-thumbnail { width: 80px; padding-right: 0 !important; }
.cocomera-wc-page table.shop_table td.product-name { vertical-align: middle; }

/* Price column: center-align per reference */
.cocomera-wc-page table.shop_table th.product-price,
.cocomera-wc-page table.shop_table td.product-price {
  text-align: center !important;
  white-space: nowrap;
}
/* Quantity column: center */
.cocomera-wc-page table.shop_table th.product-quantity,
.cocomera-wc-page table.shop_table td.product-quantity {
  text-align: center !important;
}
/* Subtotal column: right-align */
.cocomera-wc-page table.shop_table th.product-subtotal,
.cocomera-wc-page table.shop_table td.product-subtotal {
  text-align: right !important;
  white-space: nowrap;
  font-weight: 700;
}

/* Remove inner WC spacing that creates the big gap */
.cocomera-wc-page .woocommerce-cart-form__contents { margin-bottom: 0 !important; }
.cocomera-wc-page .woocommerce > form { margin-bottom: 0 !important; }
.cocomera-wc-page .cart-collaterals { margin-top: 0 !important; }
.cocomera-wc-page .coupon { display: inline-flex; gap: .5rem; align-items: center; }
.cocomera-wc-page .coupon input#coupon_code {
  background: rgba(0,0,0,.4) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  padding: .75rem 1rem !important;
  border-radius: var(--radius-sm);
  height: auto;
  width: 220px;
  font-size: .88rem !important;
}
.cocomera-wc-page button.button,
.cocomera-wc-page input.button,
.cocomera-wc-page a.button {
  background: var(--gold) !important;
  color: var(--c0) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: .8rem 1.5rem !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  font-size: .75rem !important;
  transition: all .25s;
}
.cocomera-wc-page button.button:hover,
.cocomera-wc-page input.button:hover,
.cocomera-wc-page a.button:hover { background: var(--gold-light) !important; transform: translateY(-1px); }
.cocomera-wc-page button.button[disabled] { opacity: .5; }

/* Cart totals box */
.cocomera-wc-page .cart_totals {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem;
}
.cocomera-wc-page .cart_totals h2 {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.75rem;
  font-weight: 400;
  margin: 0 0 2rem;
}
.cocomera-wc-page .cart_totals table { background: transparent; border: none !important; width: 100%; }
.cocomera-wc-page .cart_totals table th {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding: .9rem 0 !important;
  font-size: .72rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.55) !important;
  font-weight: 600 !important;
}
.cocomera-wc-page .cart_totals table td {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding: .9rem 0 !important;
  font-size: .88rem !important;
  text-align: right !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}
.cocomera-wc-page .cart_totals .order-total th {
  font-size: .72rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
  padding-top: 1.5rem !important;
}
.cocomera-wc-page .cart_totals .order-total td {
  border-bottom: none !important;
  padding-top: 1.5rem !important;
  padding-bottom: 0 !important;
}
.cocomera-wc-page .cart_totals .order-total .amount {
  color: var(--gold) !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  display: block;
}
/* Tax line under total */
.cocomera-wc-page .cart_totals .order-total td small,
.cocomera-wc-page .cart_totals .order-total td .includes_tax {
  font-size: .68rem !important;
  color: rgba(255,255,255,.45) !important;
  font-style: italic;
  font-weight: 400 !important;
  display: block;
  margin-top: .3rem;
}
.cocomera-wc-page .wc-proceed-to-checkout { padding: 2rem 0 0 !important; }
.cocomera-wc-page .wc-proceed-to-checkout .checkout-button {
  display: block !important; width: 100% !important; text-align: center !important;
  padding: 1.15rem !important; font-size: .78rem !important;
  letter-spacing: .12em !important;
  box-shadow: 0 8px 24px rgba(201,163,84,.15) !important;
}
.cocomera-wc-page .shipping-calculator-button { color: var(--gold) !important; font-weight: 600; }

/* Delivery estimate widget */
.coco-delivery-estimate {
  margin-top: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem;
  max-width: none;
}
.coco-delivery-estimate h2,
.coco-delivery-estimate h3 {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.15rem;
  margin: 0 0 1.25rem;
  font-weight: 400;
}
.coco-pin-row { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.coco-pin-row input {
  flex: 1;
  background: rgba(0,0,0,.35) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  padding: .85rem 1rem !important;
  border-radius: var(--radius-sm);
  letter-spacing: .05em;
  font-size: .88rem;
  outline: none;
  min-width: 0;
}
.coco-pin-row input:focus { border-color: var(--gold) !important; }
.coco-pin-row button {
  background: var(--gold) !important;
  color: #000 !important;
  border: none;
  padding: .85rem 2rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: .1em;
  font-size: .72rem;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.coco-pin-row button:hover { background: var(--gold-light) !important; }
.coco-pin-result { min-height: 1.2rem; font-size: .85rem; }
.coco-pin-result .ok { color: #4ade80; }
.coco-pin-result .err { color: #e74c3c; }
.coco-pin-result .loading { color: var(--text-muted); }
.coco-pin-result .meta { color: var(--text-muted); font-size: .75rem; margin-top: .25rem; }
.coco-free-ship-msg { font-size: .78rem; color: #4ade80; }
.coco-free-ship-msg strong { font-weight: 700; }
.coco-free-ship-msg.coco-free-active { color: #4ade80; font-weight: 600; }

/* ─── Footer Logo ─── */
.footer-logo-img {
  display: block;
  width: 60px;
  height: auto;
  border-radius: 3px;
}

/* (Checkout styles in form-checkout.php inline + style.css checkout block) */

/* v24 fix: italic glyph (e.g. "Natural") clipping in hero title */
.hero-title { padding-left: .1em; padding-right: .1em; overflow: visible; }
.hero-title em { padding-right: .12em; display: inline-block; }
.hero, .hero-content, .hero-left { overflow: visible; }

/* v28: hero italic glyph top+left clip fix */
.hero-title { padding-top: .15em; padding-left: .18em; line-height: 1.02; }
.hero-title em { padding-top: .05em; padding-left: .05em; padding-right: .15em; margin-left: -.02em; }

/* v28: reset-password form — kill WC white box */
.coco-reset-card form.lost_reset_password,
.coco-reset-card .woocommerce form.lost_reset_password,
.coco-reset-card fieldset,
.coco-reset-card .woocommerce-ResetPassword,
.coco-reset-card form{ border:0 !important; padding:0 !important; background:transparent !important; box-shadow:none !important; }
.coco-reset-card form p{ color:var(--text-secondary); }
.coco-reset-card form p:first-child{ font-size:.88rem; line-height:1.65; margin-bottom:1.3rem; color:var(--text-muted); }
.coco-reset-card form label{ color:var(--text-secondary)!important; }
.coco-reset-card input[type=text],
.coco-reset-card input[type=email],
.coco-reset-card input[type=password]{ background:var(--bg-card)!important; border:1px solid var(--border)!important; color:var(--text)!important; }

/* v29: definitive hero italic glyph fix — force breathing room for ascender */
.hero, .hero *, .hero-content, .hero-left, .hero-title, .hero-title em { overflow: visible !important; }
.hero-title { padding-top: .22em !important; padding-left: .25em !important; line-height: 1.08 !important; }
.hero-title em { padding-top: .08em !important; padding-left: .08em !important; padding-right: .2em !important; display: inline-block !important; }

/* (v30 checkout overrides removed) */

/* ─── Cart responsive (tablet & mobile) ─── */
@media (max-width: 900px) {
  .cocomera-cart-page .cart-collaterals {
    flex-direction: column !important;
    gap: 1.25rem;
  }
  .cocomera-cart-page .cart-collaterals .coco-delivery-estimate,
  .cocomera-cart-page .cart-collaterals .cart_totals {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
  }
}
@media (max-width: 600px) {
  .coco-cart-hero { padding-top: 1.25rem; padding-bottom: .75rem; }
  .coco-cart-hero h1 { font-size: 1.45rem; }
  .coco-cart-body { padding-bottom: 2.5rem; }
}

/* ════════════════════════════════════════════════════════
   COCOMERA CONVERSION LAYER — v02.4.26.115
   Features: Sticky ATC · Progress Bar · Ingredient Chips
             Entry Popup · Skin-Type Filter
   ════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. STICKY MOBILE ADD-TO-CART BAR
   ───────────────────────────────────────────── */
.coco-sticky-atc {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(11,31,8,.97);
  border-top: 1px solid rgba(201,168,76,.2);
  padding: .9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom));
  z-index: 1200;
  transform: translateY(100%);
  transition: transform .38s var(--ease-expo);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 -6px 30px rgba(0,0,0,.45);
  will-change: transform;
}
.coco-sticky-atc.is-visible { transform: translateY(0); }
.coco-sticky-atc__inner {
  display: flex; align-items: center; gap: .85rem;
  max-width: 600px; margin: 0 auto;
}
.coco-sticky-atc__img {
  width: 44px; height: 44px; object-fit: cover;
  border-radius: var(--radius-sm); flex-shrink: 0;
  border: 1px solid rgba(201,168,76,.2);
}
.coco-sticky-atc__info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .1rem;
}
.coco-sticky-atc__name {
  font-size: .79rem; font-weight: 600;
  color: rgba(245,237,214,.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coco-sticky-atc__price {
  font-size: .75rem; color: var(--gold); font-weight: 700;
}
.coco-sticky-atc__price del {
  color: rgba(245,237,214,.32); margin-right: .25rem;
  text-decoration: line-through;
}
.coco-sticky-atc__btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--gold); color: var(--c0) !important;
  border: none; border-radius: var(--radius-full);
  padding: .75rem 1.35rem;
  font-family: var(--font-body); font-size: .71rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: opacity .2s, transform .15s;
  box-shadow: 0 4px 16px rgba(201,168,76,.3);
}
.coco-sticky-atc__btn:hover { opacity: .88; transform: translateY(-1px); }
.coco-sticky-atc__btn.loading { opacity: .65; pointer-events: none; }
.coco-sticky-atc__btn--oos {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.3) !important;
  border-radius: var(--radius-full); padding: .75rem 1.35rem;
  font-size: .71rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; cursor: default;
}
@media (min-width: 768px) { .coco-sticky-atc { display: none !important; } }

/* ─────────────────────────────────────────────
   2. SLIDE-CART FREE-SHIPPING PROGRESS BAR
   ───────────────────────────────────────────── */
.slide-cart-progress {
  padding: .85rem 1.25rem .7rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.scp-bar-wrap {
  height: 4px; border-radius: 9999px;
  background: rgba(255,255,255,.07);
  overflow: hidden; margin-bottom: .5rem;
}
.scp-bar-fill {
  height: 100%; width: 0%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--gold-dark,#9A7B20), var(--gold,#C9A84C));
  transition: width .55s var(--ease-expo);
  position: relative;
}
.scp-bar-fill::after {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0; width: 16px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35));
  animation: scp-shimmer 1.5s ease-in-out infinite;
}
.scp-bar-fill.is-full {
  background: linear-gradient(90deg, #2E8A20, #4FBF3A);
}
.scp-bar-fill.is-full::after { display: none; }
@keyframes scp-shimmer { 0%,100%{opacity:0} 50%{opacity:1} }
.scp-msg {
  font-size: .72rem; color: rgba(255,255,255,.42);
  line-height: 1.45; text-align: center;
}
.scp-msg strong { color: rgba(255,255,255,.72); }
.scp-free-badge {
  display: inline-block;
  background: rgba(74,169,62,.12); color: rgba(79,191,58,.9);
  border: 1px solid rgba(74,169,62,.22); border-radius: 9999px;
  padding: .1em .55em; font-size: .88em; font-weight: 700;
}
.scp-free-msg {
  display: inline-flex; align-items: center; gap: .35rem;
  color: rgba(79,191,58,.9); font-weight: 700;
}
.scp-free-msg svg { flex-shrink: 0; }

/* ─────────────────────────────────────────────
   3. INGREDIENT CALLOUT CHIPS (Product Page)
   ───────────────────────────────────────────── */
.coco-ing-callout {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.35rem;
  padding: 0;
}
.coco-ing-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(201,168,76,.06);
  border: 1px solid rgba(201,168,76,.18);
  border-radius: var(--radius-full);
  padding: .38rem .85rem .38rem .6rem;
  transition: background .2s, border-color .2s;
  cursor: default;
}
.coco-ing-chip:hover {
  background: rgba(201,168,76,.11);
  border-color: rgba(201,168,76,.34);
}
.coco-ing-chip__icon {
  font-size: .88rem; line-height: 1; flex-shrink: 0;
}
.coco-ing-chip__body {
  display: flex; flex-direction: column; gap: .05rem; min-width: 0;
}
.coco-ing-chip__name {
  font-size: .72rem; font-weight: 700;
  color: var(--gold); letter-spacing: .04em; line-height: 1.2;
}
.coco-ing-chip__benefit {
  font-size: .66rem; color: rgba(245,237,214,.48); line-height: 1.3;
}

/* ─────────────────────────────────────────────
   4. SKIN-TYPE CONCERN FILTER (Shop Page)
   ───────────────────────────────────────────── */
.coco-shop-filters-sticky {
  position: sticky;
  top: calc(var(--header-height) + 40px);
  z-index: 100;
  background: var(--bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.coco-skin-filter-wrap {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: .7rem 0 .6rem;
}
.coco-shop-filters-sticky .coco-skin-filter-wrap:last-child,
.coco-shop-filters-sticky > .coco-cat-filter-wrap {
  border-bottom: 0;
}
.coco-cat-filter-wrap {
  background: transparent;
  padding: 1rem 0;
}
.coco-cat-filter-wrap .wrap {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.coco-cat-filter-wrap .wrap::-webkit-scrollbar { display: none; }
.coco-skin-filter {
  display: flex; align-items: center; gap: .45rem;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding: .2rem 0;
}
.coco-skin-filter::-webkit-scrollbar { display: none; }
.coco-skin-filter-label {
  font-size: .62rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; flex-shrink: 0; margin-right: .2rem;
}
.coco-skin-tile {
  display: inline-flex; align-items: center; gap: .38rem;
  flex-shrink: 0; padding: .42rem 1rem;
  font-size: .67rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; border-radius: var(--radius-full);
  border: 1px solid var(--border);
  color: var(--text-secondary); background: transparent;
  cursor: pointer; white-space: nowrap;
  transition: all .22s var(--ease-smooth);
  font-family: var(--font-body);
}
.coco-skin-tile__icon { font-size: .78rem; }
.coco-skin-tile:hover {
  border-color: rgba(201,168,76,.45);
  color: var(--gold);
  background: rgba(201,168,76,.05);
}
.coco-skin-tile.active {
  background: var(--gold); border-color: var(--gold);
  color: var(--c0) !important;
  box-shadow: 0 3px 12px rgba(201,168,76,.28);
}

/* ─────────────────────────────────────────────
   5. ENTRY POPUP — Welcome Offer (modern split-panel)
   ───────────────────────────────────────────── */
.coco-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(4,10,3,.82);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  z-index: 8000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity .38s ease;
}
.coco-popup-overlay.is-active { opacity: 1; pointer-events: all; }

/* card */
.coco-popup {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  max-width: 700px; width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.75), 0 0 0 1px rgba(201,168,76,.12);
  transform: translateY(28px) scale(.96);
  transition: transform .42s cubic-bezier(.16,1,.3,1);
  position: relative;
}
.coco-popup-overlay.is-active .coco-popup { transform: none; }

/* close × */
.coco-popup__close {
  position: absolute; top: .9rem; right: .9rem; z-index: 10;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.5); font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, color .2s;
}
.coco-popup__close:hover { background: rgba(0,0,0,.45); color: #fff; }

/* ── LEFT — brand panel ── */
.coco-popup__brand {
  position: relative;
  background: linear-gradient(160deg, #0B2209 0%, #163010 40%, #0D2A0A 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 2rem;
  border-right: 1px solid rgba(201,168,76,.13);
  overflow: hidden;
}
/* ambient gold glow */
.coco-popup__brand-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 65% at 50% 45%, rgba(201,168,76,.18) 0%, transparent 70%);
  pointer-events: none;
}
/* decorative rings */
.coco-popup__brand-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(201,168,76,.07);
  pointer-events: none;
}
.coco-popup__brand-ring--1 {
  width: 280px; height: 280px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.coco-popup__brand-ring--2 {
  width: 190px; height: 190px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  border-color: rgba(201,168,76,.11);
}
.coco-popup__brand-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; text-align: center;
}
/* wordmark */
.coco-popup__logo-svg {
  width: 160px; height: auto;
  filter: drop-shadow(0 2px 12px rgba(201,168,76,.22));
}
.coco-popup__tagline {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(201,168,76,.55); margin: 0;
}
/* gold dot divider */
.coco-popup__dots {
  display: flex; gap: .35rem; align-items: center; margin: .15rem 0;
}
.coco-popup__dots span {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(201,168,76,.3);
}
.coco-popup__dots span:nth-child(2) {
  background: rgba(201,168,76,.6); width: 5px; height: 5px;
}
/* perks list */
.coco-popup__perks {
  list-style: none; margin: .4rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .5rem;
}
.coco-popup__perks li {
  font-size: .72rem; color: rgba(245,237,214,.5);
  display: flex; align-items: center; gap: .4rem;
  letter-spacing: .01em;
}
.coco-popup__perk-icon { font-size: .85rem; }

/* ── RIGHT — form panel ── */
.coco-popup__form-panel {
  background: #0F1F0D;
  padding: 2.5rem 2.25rem 2.25rem;
  display: flex; flex-direction: column; justify-content: center;
}
.coco-popup__step { text-align: left; }
.coco-popup__step--hidden { display: none !important; }

.coco-popup__eyebrow {
  font-size: .58rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold, #C9A84C);
  margin-bottom: .75rem;
  display: flex; align-items: center; gap: .55rem;
}
.coco-popup__eyebrow::before {
  content: '';
  display: block; width: 20px; height: 1px;
  background: var(--gold, #C9A84C); opacity: .5;
  flex-shrink: 0;
}
.coco-popup__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.7rem, 4vw, 2.1rem);
  font-weight: 600; line-height: 1.08;
  color: var(--cream, #F5EDD6); margin: 0 0 .85rem;
}
.coco-popup__title em {
  font-style: normal;
  background: linear-gradient(90deg, #E8C96A, #C9A84C);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.coco-popup__sub {
  font-size: .78rem; color: rgba(245,237,214,.42);
  line-height: 1.65; margin: 0 0 1.35rem;
}
.coco-popup__form { margin-bottom: .65rem; }
.coco-popup__field-wrap { margin-bottom: .65rem; }
.coco-popup__input {
  width: 100%; padding: .82rem 1rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: var(--cream, #F5EDD6); font-size: .85rem;
  font-family: var(--font-body, inherit);
  transition: border-color .2s, background .2s;
  outline: none; box-sizing: border-box;
}
.coco-popup__input::placeholder { color: rgba(255,255,255,.2); }
.coco-popup__input:focus {
  border-color: rgba(201,168,76,.45);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(201,168,76,.08);
}
.coco-popup__error {
  font-size: .72rem; color: #f87171;
  margin: .2rem 0 .5rem;
}
.coco-popup__submit {
  width: 100%; padding: .85rem 1.5rem;
  background: linear-gradient(90deg, #C9A84C, #E8C96A 50%, #C9A84C);
  background-size: 200% 100%;
  color: #0B2209 !important;
  border: none; border-radius: 10px;
  font-family: var(--font-body, inherit);
  font-size: .74rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  transition: background-position .4s ease, transform .15s, box-shadow .2s;
  box-shadow: 0 6px 22px rgba(201,168,76,.32);
}
.coco-popup__submit:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(201,168,76,.42);
}
.coco-popup__submit:disabled { opacity: .5; pointer-events: none; }
.coco-popup__skip {
  display: block; width: 100%; text-align: center;
  margin-top: .9rem;
  font-size: .65rem; color: rgba(255,255,255,.18);
  cursor: pointer; background: none; border: none;
  font-family: var(--font-body, inherit);
  text-decoration: underline; transition: color .2s;
}
.coco-popup__skip:hover { color: rgba(255,255,255,.38); }
.coco-popup__fine {
  font-size: .63rem; color: rgba(255,255,255,.15);
  line-height: 1.5; margin-top: .65rem;
}

/* Step 2 — success */
.coco-popup__success-badge {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.22);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1.2rem;
  animation: coco-ty-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.coco-popup__code-wrap {
  display: flex; align-items: stretch;
  border: 1.5px solid rgba(201,168,76,.32);
  border-radius: 10px; overflow: hidden;
  margin: 1rem 0;
}
.coco-popup__code {
  padding: .75rem 1.1rem;
  font-family: var(--font-mono, monospace);
  font-size: 1.05rem; font-weight: 800; letter-spacing: .18em;
  color: var(--gold, #C9A84C);
  background: rgba(201,168,76,.07);
  flex: 1; text-align: center;
}
.coco-popup__copy {
  display: flex; align-items: center; gap: .3rem;
  padding: .75rem 1rem;
  background: rgba(201,168,76,.1);
  border: none; border-left: 1px solid rgba(201,168,76,.18);
  color: var(--gold, #C9A84C);
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; cursor: pointer;
  font-family: var(--font-body, inherit);
  transition: background .2s;
}
.coco-popup__copy:hover { background: rgba(201,168,76,.2); }

@keyframes coco-ty-pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* Tablet — hide decorative panel, single column */
@media (max-width: 640px) {
  .coco-popup { grid-template-columns: 1fr; max-width: 420px; }
  .coco-popup__brand { display: none; }
  .coco-popup__form-panel { padding: 2.25rem 1.75rem; }
  .coco-popup__title { font-size: 1.75rem; }
}
/* Mobile — slide up sheet */
@media (max-width: 440px) {
  .coco-popup-overlay { align-items: flex-end; padding: 0; }
  .coco-popup {
    border-radius: 18px 18px 0 0; max-width: 100%;
    transform: translateY(100%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .coco-popup-overlay.is-active .coco-popup { transform: none; }
  .coco-popup__form-panel { padding: 1.75rem 1.5rem 2rem; }
}

/* ══════════════════════════════════════════════════════
   6. PRODUCT DETAILS PANEL — PREMIUM REDESIGN
   Key Ingredients · About · Skin Type · Usage Info
   ══════════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.coco-prod-details-section {
  background: var(--bg);
  padding: 3rem 0 2.5rem;
  position: relative;
}
.coco-prod-details-wrap { max-width: 940px; }

/* ── Shared section label ── */
.coco-section-label {
  display: inline-block;
  font-size: .6rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); opacity: .9;
  margin: 0;
  line-height: 1;
}

/* ════════════════════════════════════════
   KEY INGREDIENTS — Premium chip system
   ════════════════════════════════════════ */
.coco-ing-callout {
  margin-bottom: 1.75rem;
  padding: 1.4rem 1.5rem 1.5rem;
  background: linear-gradient(135deg,
    rgba(20,43,17,.65) 0%,
    rgba(11,31,8,.5)   100%);
  border: 1px solid rgba(201,168,76,.14);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
}
/* Shimmer top edge */
.coco-ing-callout::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(201,168,76,.55) 40%,
    rgba(201,168,76,.55) 60%, transparent 100%);
}

/* Header row */
.coco-ing-header {
  display: flex; align-items: center; gap: .55rem;
  margin-bottom: 1rem;
}
.coco-ing-header__icon { color: var(--gold); flex-shrink: 0; }
.coco-ing-header__title {
  font-family: var(--font-body);
  font-size: .62rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin: 0; opacity: .9;
}

/* Chips container */
.coco-ing-chips {
  display: flex; flex-wrap: wrap; gap: .55rem;
}

/* Individual chip */
.coco-ing-chip {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 1rem .5rem .55rem;
  background: rgba(245,237,214,.04);
  border: 1px solid rgba(201,168,76,.22);
  border-radius: 9999px;
  position: relative; overflow: hidden;
  cursor: default;
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
  animation: coco-chip-in .45s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 75ms);
}
@keyframes coco-chip-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
/* Hover state */
.coco-ing-chip:hover {
  border-color: rgba(201,168,76,.55);
  transform: translateY(-2px);
  box-shadow:
    0 6px 22px rgba(201,168,76,.14),
    0 0 0 1px rgba(201,168,76,.1) inset;
}
/* Inner glow on hover */
.coco-ing-chip::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: radial-gradient(circle at 30% 50%, rgba(201,168,76,.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .28s;
  pointer-events: none;
}
.coco-ing-chip:hover::after { opacity: 1; }

.coco-ing-chip__icon {
  font-size: 1.25rem; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.3));
}
.coco-ing-chip__body {
  display: flex; align-items: baseline; gap: .42rem;
  flex-wrap: wrap;
}
.coco-ing-chip__name {
  font-size: .8rem; font-weight: 700;
  color: var(--gold); letter-spacing: .02em;
  white-space: nowrap;
}
.coco-ing-chip__sep {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(201,168,76,.4);
  flex-shrink: 0; margin-bottom: 1px;
}
.coco-ing-chip__benefit {
  font-size: .74rem;
  color: rgba(245,237,214,.55);
  line-height: 1.3;
}

/* ════════════════════════════════════════
   ABOUT THIS PRODUCT — Featured block
   ════════════════════════════════════════ */
.coco-prod-about {
  position: relative;
  margin-bottom: 1.75rem;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(201,168,76,.13);
}
/* Multi-layer gradient background */
.coco-prod-about__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 85% 50%, rgba(201,168,76,.07) 0%, transparent 70%),
    linear-gradient(135deg, rgba(20,43,17,.8) 0%, rgba(11,31,8,.65) 100%);
  pointer-events: none;
}
/* Gold shimmer top */
.coco-prod-about::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(201,168,76,.7) 30%,
    rgba(201,168,76,.7) 70%, transparent 100%);
  z-index: 2;
}
.coco-prod-about__inner {
  position: relative; z-index: 1;
  padding: 2rem 2.25rem 2rem;
}
/* Label row with icon */
.coco-prod-about__label-row {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1rem;
}
.coco-prod-about__icon { color: var(--gold); opacity: .8; flex-shrink: 0; }
/* Quote text */
.coco-prod-about__quote {
  margin: 0; padding: 0; border: none;
}
.coco-prod-about__quote p {
  font-size: 1.02rem; line-height: 1.92;
  color: rgba(245,237,214,.72);
  font-style: italic;
  margin: 0;
  max-width: 72ch;
}
/* Large decorative quotation mark */
.coco-prod-about__deco {
  position: absolute;
  bottom: -1.5rem; right: 1.75rem; z-index: 1;
  font-family: var(--font-display, Georgia, serif);
  font-size: 9rem; line-height: 1;
  color: rgba(201,168,76,.06);
  pointer-events: none; user-select: none;
  font-weight: 700;
}

/* ════════════════════════════════════════
   SKIN TYPE + USAGE INFO — Card grid
   ════════════════════════════════════════ */
.coco-prod-tags-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.coco-prod-tag-card {
  background: linear-gradient(135deg,
    rgba(20,43,17,.55) 0%,
    rgba(11,31,8,.4)   100%);
  border: 1px solid rgba(201,168,76,.1);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.4rem;
  position: relative; overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.coco-prod-tag-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(201,168,76,.3), transparent);
}
.coco-prod-tag-card:hover {
  border-color: rgba(201,168,76,.22);
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(201,168,76,.06) inset;
}

/* Card header */
.coco-prod-tag-card__header {
  display: flex; align-items: center; gap: .5rem;
  padding-bottom: .85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(201,168,76,.08);
}
.coco-prod-tag-card__icon { color: var(--gold); opacity: .8; flex-shrink: 0; }
.coco-prod-tag-card__header > span:last-child {
  font-size: .6rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); opacity: .85;
}

/* Usage + skin type pill tags */
.coco-usage-tags {
  display: flex; flex-wrap: wrap; gap: .45rem;
}

.coco-usage-tag {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .38rem .9rem;
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 9999px;
  font-size: .75rem;
  color: rgba(245,237,214,.65);
  background: rgba(201,168,76,.04);
  cursor: default;
  animation: coco-chip-in .4s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
  transition: border-color .22s, background .22s, color .22s, transform .22s, box-shadow .22s;
}
.coco-usage-tag:hover {
  border-color: rgba(201,168,76,.45);
  background: rgba(201,168,76,.09);
  color: rgba(245,237,214,.92);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(201,168,76,.1);
}
.coco-usage-tag svg {
  flex-shrink: 0; color: var(--gold); opacity: .7;
  transition: opacity .22s;
}
.coco-usage-tag:hover svg { opacity: 1; }

/* Skin type variant — green accent */
.coco-usage-tag--skin {
  border-color: rgba(74,169,62,.2);
  background: rgba(74,169,62,.04);
  color: rgba(245,237,214,.65);
}
.coco-usage-tag--skin svg { color: #5abf4a; }
.coco-usage-tag--skin:hover {
  border-color: rgba(74,169,62,.45);
  background: rgba(74,169,62,.09);
  box-shadow: 0 4px 14px rgba(74,169,62,.1);
}

/* Benefit card — emoji variant */
.product-benefit-card__emoji {
  font-size: 2rem; line-height: 1;
  margin-bottom: .85rem; display: block;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .coco-prod-about__inner { padding: 1.5rem 1.4rem; }
  .coco-prod-about__deco  { font-size: 6rem; right: 1rem; }
  .coco-prod-tags-grid    { grid-template-columns: 1fr; }
  .coco-prod-tag-card     { padding: 1.25rem; }
}


/* ══════════════════════════════════════════════════════════════
   SECTION 7 — PRODUCT PAGE V2: Modern Luxury Redesign
   Key Ingredients horizontal cards + Details editorial layout
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   KEY INGREDIENTS V2 — Horizontal editorial card strip
   ───────────────────────────────────────────────────────── */
.coco-ing-v2 {
  margin: 0 0 1.75rem;
}

/* Eyebrow label */
.coco-ing-v2__label {
  display: flex;
  align-items: center;
  gap: .42rem;
  margin-bottom: .9rem;
  font-family: var(--font-body);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .7;
}
.coco-ing-v2__label svg { flex-shrink: 0; }

/* Horizontal scrollable track */
.coco-ing-v2__track {
  display: flex;
  gap: .7rem;
  overflow-x: auto;
  padding-bottom: .35rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.coco-ing-v2__track::-webkit-scrollbar { display: none; }

/* Individual ingredient card */
.coco-ing-v2__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 116px;
  max-width: 136px;
  flex-shrink: 0;
  padding: 1.25rem .9rem 1.1rem;
  background: linear-gradient(160deg,
    rgba(22,48,19,.72) 0%,
    rgba(11,31,8,.85) 100%);
  border: 1px solid rgba(201,168,76,.13);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition:
    border-color .3s ease,
    transform    .3s ease,
    box-shadow   .3s ease;
  animation: coco-ing-v2-rise .45s var(--ease-smooth) both;
  animation-delay: calc(var(--i, 0) * .09s);
}
@keyframes coco-ing-v2-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shimmer top edge */
.coco-ing-v2__card::before {
  content: '';
  position: absolute;
  top: 0; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(201,168,76,.55), transparent);
  pointer-events: none;
}
/* Inner glow on hover */
.coco-ing-v2__card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%,
    rgba(201,168,76,.09) 0%, transparent 65%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.coco-ing-v2__card:hover {
  border-color: rgba(201,168,76,.4);
  transform: translateY(-5px);
  box-shadow:
    0 16px 36px rgba(0,0,0,.3),
    0 0 0 1px rgba(201,168,76,.07) inset;
}
.coco-ing-v2__card:hover::after { opacity: 1; }

/* Large icon */
.coco-ing-v2__icon {
  font-size: 2.1rem;
  line-height: 1;
  margin-bottom: .7rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
  transition: transform .3s var(--ease-smooth);
}
.coco-ing-v2__card:hover .coco-ing-v2__icon { transform: scale(1.14); }

/* Ingredient name */
.coco-ing-v2__name {
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: .02em;
  line-height: 1.2;
  margin-bottom: .55rem;
}

/* Gold separator line (expands on hover) */
.coco-ing-v2__line {
  width: 22px;
  height: 1px;
  background: rgba(201,168,76,.28);
  margin-bottom: .55rem;
  flex-shrink: 0;
  border-radius: 1px;
  transition: width .35s ease, background .35s ease;
}
.coco-ing-v2__card:hover .coco-ing-v2__line {
  width: 42px;
  background: rgba(201,168,76,.65);
}

/* Benefit text */
.coco-ing-v2__benefit {
  font-size: .65rem;
  color: rgba(245,237,214,.42);
  line-height: 1.45;
  transition: color .3s ease;
}
.coco-ing-v2__card:hover .coco-ing-v2__benefit {
  color: rgba(245,237,214,.72);
}


/* ─────────────────────────────────────────────────────────
   PRODUCT DETAILS V2 — Story + Fit-For editorial layout
   ───────────────────────────────────────────────────────── */
.coco-pd-section {
  background: var(--bg);
  padding: 2.75rem 0 3rem;
}
.coco-pd-wrap { max-width: 980px; }

/* ── Story / About ── */
.coco-pd-story {
  position: relative;
  padding: 2.25rem 2.75rem 2rem;
  background: linear-gradient(145deg,
    rgba(20,43,17,.62) 0%,
    rgba(11,31,8,.78) 100%);
  border: 1px solid rgba(201,168,76,.11);
  border-radius: 18px;
  margin-bottom: 1.35rem;
  overflow: hidden;
}
/* Gold shimmer border-top */
.coco-pd-story::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,168,76,.55) 30%,
    rgba(201,168,76,.8)  50%,
    rgba(201,168,76,.55) 70%,
    transparent 100%);
  pointer-events: none;
}

/* Section eyebrow */
.coco-pd-story__label {
  display: flex;
  align-items: center;
  gap: .42rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-body);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .68;
}

/* Large decorative quotation mark */
.coco-pd-story__qmark {
  position: absolute;
  top: .75rem; right: 1.75rem;
  font-family: var(--font-display);
  font-size: 8rem;
  line-height: 1;
  color: rgba(201,168,76,.06);
  pointer-events: none;
  user-select: none;
  font-style: normal;
}

/* Description text — editorial italic */
.coco-pd-story__text {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-style: italic;
  font-weight: 400;
  color: rgba(245,237,214,.76);
  line-height: 1.9;
  margin: 0;
  position: relative;
  max-width: 700px;
}

/* Trust micro-stats row */
.coco-pd-story__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201,168,76,.09);
}
.coco-pd-story__fact {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .9rem;
  background: rgba(201,168,76,.05);
  border: 1px solid rgba(201,168,76,.13);
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 600;
  color: rgba(245,237,214,.6);
  letter-spacing: .04em;
  cursor: default;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.coco-pd-story__fact:hover {
  background: rgba(201,168,76,.1);
  border-color: rgba(201,168,76,.3);
  color: rgba(245,237,214,.92);
  transform: translateY(-1px);
}
.coco-pd-story__fact-icon {
  font-size: .88rem;
  line-height: 1;
}

/* ── Perfect For (Skin Type + Usage) ── */
.coco-pd-fitfor {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 1.75rem 2.25rem;
  background: linear-gradient(145deg,
    rgba(15,36,12,.58) 0%,
    rgba(11,31,8,.65) 100%);
  border: 1px solid rgba(201,168,76,.1);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.coco-pd-fitfor::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(201,168,76,.32), transparent);
  pointer-events: none;
}

.coco-pd-fitfor__col {
  padding: .25rem 1.5rem;
}
.coco-pd-fitfor__col:first-child { padding-left: 0; }
.coco-pd-fitfor__col:last-child  { padding-right: 0; }

/* Vertical gold divider */
.coco-pd-fitfor__divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg,
    transparent, rgba(201,168,76,.2) 25%, rgba(201,168,76,.2) 75%, transparent);
}

/* Column label */
.coco-pd-fitfor__label {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .9rem;
  font-family: var(--font-body);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .65;
}
.coco-pd-fitfor__label svg { flex-shrink: 0; opacity: .85; }

/* Tags row */
.coco-pd-fitfor__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
}

/* Skin type tag — green dot indicator */
.coco-pd-skin-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem 1rem;
  background: rgba(74,169,62,.06);
  border: 1px solid rgba(74,169,62,.2);
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  color: rgba(245,237,214,.7);
  cursor: default;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.coco-pd-skin-tag::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  background: #5abf4a;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(90,191,74,.5);
}
.coco-pd-skin-tag:hover {
  background: rgba(74,169,62,.13);
  border-color: rgba(74,169,62,.42);
  color: rgba(245,237,214,.95);
  transform: translateY(-1px);
}

/* Usage tag — gold checkmark */
.coco-pd-use-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem 1rem;
  background: rgba(201,168,76,.05);
  border: 1px solid rgba(201,168,76,.16);
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  color: rgba(245,237,214,.66);
  cursor: default;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.coco-pd-use-tag::before {
  content: '';
  display: inline-block;
  width: 13px; height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.coco-pd-use-tag:hover {
  background: rgba(201,168,76,.1);
  border-color: rgba(201,168,76,.35);
  color: rgba(245,237,214,.95);
  transform: translateY(-1px);
}

/* ── Responsive ── */
@media (max-width: 680px) {
  .coco-pd-story { padding: 1.75rem 1.5rem 1.6rem; }
  .coco-pd-story__qmark { font-size: 5.5rem; top: .5rem; right: 1rem; }
  .coco-pd-story__text { font-size: .95rem; }
  .coco-pd-fitfor {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem 1.5rem;
  }
  .coco-pd-fitfor__divider { display: none; }
  .coco-pd-fitfor__col { padding: 0; }
}


/* ══════════════════════════════════════════════════════════════
   SECTION 8 — PRODUCT DETAILS V3: Full-width left/right split
   Formula (left) + Quality Badges (right) — no more empty space
   ══════════════════════════════════════════════════════════════ */

.coco-pd3-section {
  background: var(--bg);
  padding: 3rem 0 3.5rem;
}

/* Full-width grid container — wider than site default wrap */
.coco-pd3-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 3rem;
  align-items: start;
}

/* ── Left column ── */
.coco-pd3-left {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Shared eyebrow label */
.coco-pd3-label {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-body);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .68;
}
.coco-pd3-label svg { flex-shrink: 0; }

/* Formula / About block */
.coco-pd3-formula {
  position: relative;
  padding: 2.25rem 2.5rem 2rem;
  background: linear-gradient(150deg,
    rgba(22,48,19,.65) 0%,
    rgba(11,31,8,.82) 100%);
  border: 1px solid rgba(201,168,76,.12);
  border-radius: 18px;
  overflow: hidden;
}
/* Gold shimmer top edge */
.coco-pd3-formula::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(201,168,76,.55) 35%,
    rgba(201,168,76,.85) 50%,
    rgba(201,168,76,.55) 65%, transparent);
  pointer-events: none;
}
/* Decorative watermark quotation mark */
.coco-pd3-formula::after {
  content: '\201C';
  position: absolute;
  bottom: -2rem; right: 1.75rem;
  font-family: var(--font-display);
  font-size: 10rem;
  line-height: 1;
  color: rgba(201,168,76,.05);
  pointer-events: none;
  user-select: none;
}

/* Editorial italic description */
.coco-pd3-formula__text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 400;
  color: rgba(245,237,214,.8);
  line-height: 1.88;
  margin: 0;
  position: relative;
}

/* Skin Profile — 2-col inside the left column */
.coco-pd3-profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(201,168,76,.1);
  border-radius: 14px;
  overflow: hidden;
}

.coco-pd3-profile__col {
  padding: 1.5rem 1.6rem;
  background: linear-gradient(150deg,
    rgba(16,37,13,.62) 0%,
    rgba(11,31,8,.72) 100%);
}
.coco-pd3-profile__col + .coco-pd3-profile__col {
  border-left: 1px solid rgba(201,168,76,.1);
}

/* Sub-label inside skin profile */
.coco-pd3-sublabel {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .85rem;
  font-family: var(--font-body);
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .62;
}
.coco-pd3-sublabel svg { flex-shrink: 0; }

.coco-pd3-profile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Skin type tag — green dot */
.coco-pd3-skin-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .44rem 1rem;
  background: rgba(74,169,62,.06);
  border: 1px solid rgba(74,169,62,.2);
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: .73rem;
  font-weight: 500;
  color: rgba(245,237,214,.72);
  cursor: default;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.coco-pd3-skin-tag::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  background: #5abf4a;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(90,191,74,.4);
}
.coco-pd3-skin-tag:hover {
  background: rgba(74,169,62,.12);
  border-color: rgba(74,169,62,.42);
  color: rgba(245,237,214,.95);
  transform: translateY(-2px);
}

/* Usage tag — gold check */
.coco-pd3-use-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .44rem 1rem;
  background: rgba(201,168,76,.05);
  border: 1px solid rgba(201,168,76,.17);
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: .73rem;
  font-weight: 500;
  color: rgba(245,237,214,.68);
  cursor: default;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.coco-pd3-use-tag::before {
  content: '✓';
  font-size: .68rem;
  color: var(--gold);
  font-weight: 800;
  flex-shrink: 0;
}
.coco-pd3-use-tag:hover {
  background: rgba(201,168,76,.1);
  border-color: rgba(201,168,76,.35);
  color: rgba(245,237,214,.95);
  transform: translateY(-2px);
}

/* ── Right column — Promise badges ── */
.coco-pd3-right {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
}

/* Right column label */
.coco-pd3-right__label {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-body);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .68;
}
.coco-pd3-right__label svg { flex-shrink: 0; }

/* 2×2 badge grid */
.coco-pd3-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}

/* Individual badge card */
.coco-pd3-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem 1.25rem 1.35rem;
  background: linear-gradient(150deg,
    rgba(22,48,19,.65) 0%,
    rgba(11,31,8,.82) 100%);
  border: 1px solid rgba(201,168,76,.11);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
/* Shimmer top */
.coco-pd3-badge::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(201,168,76,.5), transparent);
  pointer-events: none;
}
/* Inner glow */
.coco-pd3-badge::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 0%,
    rgba(201,168,76,.08) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.coco-pd3-badge:hover {
  border-color: rgba(201,168,76,.38);
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(201,168,76,.06) inset;
}
.coco-pd3-badge:hover::after { opacity: 1; }

/* Badge icon — supports emoji and SVG */
.coco-pd3-badge__icon {
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: .8rem;
  color: var(--gold);
}
.coco-pd3-badge__icon svg {
  width: 1.7rem; height: 1.7rem;
  stroke: var(--gold);
  display: block;
  transition: transform .3s ease;
}
.coco-pd3-badge:hover .coco-pd3-badge__icon { transform: scale(1.08); }
.coco-pd3-badge:hover .coco-pd3-badge__icon svg { transform: scale(1.08); }

.coco-pd3-badge__title {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: .45rem;
  line-height: 1.3;
}

.coco-pd3-badge__desc {
  font-family: var(--font-body);
  font-size: .69rem;
  color: rgba(245,237,214,.42);
  line-height: 1.55;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .coco-pd3-inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .coco-pd3-right { position: static; }
  /* Move badges to a horizontal 4-col row on tablet */
  .coco-pd3-badges { grid-template-columns: repeat(4, 1fr); gap: .65rem; }
  .coco-pd3-badge { padding: 1.25rem 1rem 1.1rem; }
}
@media (max-width: 640px) {
  .coco-pd3-inner { padding: 0 1.25rem; }
  .coco-pd3-formula { padding: 1.7rem 1.5rem 1.6rem; }
  .coco-pd3-profile { grid-template-columns: 1fr; }
  .coco-pd3-profile__col + .coco-pd3-profile__col {
    border-left: none;
    border-top: 1px solid rgba(201,168,76,.1);
  }
  .coco-pd3-badges { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .coco-pd3-badge__desc { display: none; } /* hide desc on small screens, keep title */
}

/* ════════════════════════════════════════════════════════════════
   § 9  REVIEWS CAROUSEL  (.coco-rv-*)
   ════════════════════════════════════════════════════════════════ */

/* ── Section shell ── */
.coco-rv-section { background: var(--c0); padding: 4rem 0 5rem; }
.coco-rv-wrap    { max-width: 1140px; }

/* ── Carousel outer (positions arrow buttons) ── */
.coco-rv-outer {
  position: relative;
  margin-top: 2.5rem;
  padding: 0 2.75rem;
}

/* ── Viewport (clips overflow) ── */
.coco-rv-viewport {
  overflow: hidden;
  border-radius: var(--radius-md, 12px);
}

/* ── Sliding track ── */
.coco-rv-track {
  display: flex;
  transition: transform .45s cubic-bezier(.25, .46, .45, .94);
  will-change: transform;
}

/* ── Cards — 3 visible desktop, 2 tablet, 1 mobile ── */
.coco-rv-card {
  flex: 0 0 calc(100% / 3);
  box-sizing: border-box;
  padding: 0 .55rem;
}
@media (max-width: 960px) { .coco-rv-card { flex-basis: 50%; } }
@media (max-width: 600px)  { .coco-rv-card { flex-basis: 100%; } }

/* ── Card visual box ── */
.coco-rv-card__box {
  background: rgba(245,237,214,.04);
  border: 1px solid rgba(201,168,76,.09);
  border-radius: var(--radius-md, 12px);
  padding: 1.45rem 1.3rem 1.3rem;
  box-sizing: border-box;
  transition: border-color .28s;
}
.coco-rv-card__box:hover { border-color: rgba(201,168,76,.22); }

/* ── Card head (avatar + meta + stars) ── */
.coco-rv-card__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .85rem;
}

/* ── Initial avatar ── */
.coco-rv-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  letter-spacing: .02em;
}

/* ── Name + date ── */
.coco-rv-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .12rem;
}
.coco-rv-name {
  font-family: var(--font-display);
  font-size: .88rem;
  color: var(--cream);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coco-rv-date {
  font-family: var(--font-body);
  font-size: .68rem;
  color: rgba(245,237,214,.38);
}

/* ── Stars ── */
.coco-rv-stars {
  flex-shrink: 0;
  color: var(--gold);
  font-size: .82rem;
  letter-spacing: 1.5px;
}

/* ── Review body (clamped to 5 lines) ── */
.coco-rv-text {
  font-family: var(--font-body);
  font-size: .875rem;
  color: rgba(245,237,214,.7);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Arrow buttons ── */
.coco-rv-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-60%); /* offset for dots below */
  width: 38px;
  height: 38px;
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.22);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .22s, border-color .22s;
  z-index: 2;
}
.coco-rv-btn:hover:not(:disabled) {
  background: rgba(201,168,76,.18);
  border-color: var(--gold);
}
.coco-rv-btn:disabled { opacity: .28; cursor: default; }
.coco-rv-btn--prev { left: 0; }
.coco-rv-btn--next { right: 0; }

/* ── Dot navigation ── */
.coco-rv-dots {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: 1.4rem;
}
.coco-rv-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(201,168,76,.22);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .22s, transform .22s;
}
.coco-rv-dot.is-active {
  background: var(--gold);
  transform: scale(1.3);
}

/* ── Empty state ── */
.coco-rv-empty {
  text-align: center;
  color: var(--text-light);
  margin: 1.25rem 0 2rem;
  font-size: .9rem;
}

/* ── Form-only: hide commentlist, keep submit form ── */
.coco-rv-form-only .commentlist                  { display: none !important; }
.coco-rv-form-only .woocommerce-Reviews-title    { display: none !important; }
.coco-rv-form-only #comments > h2               { display: none !important; }
.coco-rv-form-only #comments > ol               { display: none !important; }

/* ── Responsive tweaks ── */
@media (max-width: 600px) {
  .coco-rv-outer { padding: 0 2.2rem; }
  .coco-rv-btn   { width: 32px; height: 32px; font-size: .9rem; }
}

/* ═══════════════════════════════════════════════════════════════
 *  SKIN QUIZ POPUP — 6-step wizard (Cocomera dark-green + gold + cream)
 *  Colours hardcoded to match brand palette; avoids theme-var bleed.
 * ═══════════════════════════════════════════════════════════════ */
:root {
  --cq-bg:       #0B1F08;   /* deep forest */
  --cq-surface:  #123014;   /* card bg (raised) */
  --cq-surface2: #164019;   /* card hover */
  --cq-selected: #1F5626;   /* card selected */
  --cq-cream:    #F5EDD6;   /* primary text */
  --cq-cream-60: rgba(245,237,214,.62);
  --cq-cream-40: rgba(245,237,214,.4);
  --cq-cream-14: rgba(245,237,214,.14);
  --cq-gold:     #C9A84C;
  --cq-gold-2:   #E8C96A;
  --cq-gold-18:  rgba(201,168,76,.18);
  --cq-gold-35:  rgba(201,168,76,.35);
}

.coco-quiz-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(5, 14, 4, .82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.coco-quiz-overlay.is-active { opacity: 1; pointer-events: auto; }

.coco-quiz-modal {
  position: relative;
  width: 100%; max-width: 720px;
  max-height: 94vh;
  background: var(--cq-bg);
  color: var(--cq-cream);
  border-radius: 24px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .55), 0 0 0 1px var(--cq-gold-18);
  overflow: hidden;
  display: flex; flex-direction: column;
  transform: translateY(20px) scale(.97);
  transition: transform .32s cubic-bezier(.2,.9,.3,1.1);
}
.coco-quiz-overlay.is-active .coco-quiz-modal { transform: translateY(0) scale(1); }

.coco-quiz-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(245, 237, 214, .08); border: none; color: var(--cq-cream);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, transform .2s;
}
.coco-quiz-close:hover { background: rgba(245, 237, 214, .18); transform: rotate(90deg); }

.coco-quiz-header {
  padding: 1.4rem 3.5rem 1rem 1.5rem;
  border-bottom: 1px solid var(--cq-gold-18);
  background: linear-gradient(180deg, rgba(201,168,76,.08), transparent);
}
.coco-quiz-progress {
  height: 4px; border-radius: 4px;
  background: rgba(245, 237, 214, .12); overflow: hidden; margin-bottom: .55rem;
}
.coco-quiz-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cq-gold), var(--cq-gold-2));
  border-radius: 4px;
  transition: width .45s cubic-bezier(.2,.9,.3,1.1);
  box-shadow: 0 0 12px rgba(201, 168, 76, .45);
}
.coco-quiz-step-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--cq-cream-60); font-weight: 600;
}

.coco-quiz-body {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 1.75rem 1.5rem 1.5rem;
  color: var(--cq-cream);
}
.coco-quiz-body::-webkit-scrollbar { width: 6px; }
.coco-quiz-body::-webkit-scrollbar-thumb { background: var(--cq-gold-18); border-radius: 3px; }
.coco-quiz-step { display: none; animation: cocoQuizFade .35s ease both; }
.coco-quiz-step.is-active { display: block; }
@keyframes cocoQuizFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.coco-quiz-eyebrow {
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cq-gold); font-weight: 600; margin-bottom: .5rem;
}
.coco-quiz-q {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 500; line-height: 1.2; margin: 0 0 .5rem;
  color: var(--cq-cream);
}
.coco-quiz-sub {
  font-size: .9rem; color: var(--cq-cream-60);
  margin: 0 0 1.35rem; line-height: 1.55;
}

.coco-quiz-options {
  display: grid; gap: .65rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.coco-quiz-opt {
  display: flex; align-items: center; gap: .85rem;
  padding: .95rem 1rem;
  background: var(--cq-surface);
  border: 1.5px solid var(--cq-gold-18);
  border-radius: 14px;
  cursor: pointer;
  text-align: left; color: var(--cq-cream); font: inherit;
  transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.coco-quiz-opt:hover {
  border-color: var(--cq-gold-35);
  background: var(--cq-surface2);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.coco-quiz-opt.is-selected {
  border-color: var(--cq-gold); background: var(--cq-selected);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, .22), 0 6px 20px rgba(0, 0, 0, .3);
}
.coco-quiz-opt:focus-visible {
  outline: 2px solid var(--cq-gold); outline-offset: 2px;
}
.coco-quiz-opt-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(201, 168, 76, .14);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.coco-quiz-opt-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.coco-quiz-opt-label { font-weight: 600; font-size: .98rem; color: var(--cq-cream); line-height: 1.2; }
.coco-quiz-opt-desc  { font-size: .78rem; color: var(--cq-cream-60); line-height: 1.4; }
.coco-quiz-opt-check {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--cq-gold);
  opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s;
}
.coco-quiz-opt.is-selected .coco-quiz-opt-check {
  opacity: 1; transform: scale(1);
  background: var(--cq-gold); color: var(--cq-bg);
}

.coco-quiz-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.5rem;
  border-top: 1px solid var(--cq-gold-18);
  background: rgba(5, 14, 4, .5);
}
.coco-quiz-back {
  background: transparent; border: none; font: inherit;
  color: var(--cq-cream-60);
  cursor: pointer; padding: .4rem .6rem; border-radius: 8px;
  transition: color .18s, background .18s;
}
.coco-quiz-back:hover:not(:disabled) { color: var(--cq-cream); background: rgba(245, 237, 214, .08); }
.coco-quiz-back:disabled { opacity: .3; cursor: not-allowed; }
.coco-quiz-hint { font-size: .72rem; color: var(--cq-cream-40); letter-spacing: .04em; }

/* Loading state */
.coco-quiz-loader {
  display: flex; gap: .55rem; justify-content: center;
  margin: 1.5rem 0 2rem;
}
.coco-quiz-loader span {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--cq-gold);
  animation: cocoQuizBounce 1.2s infinite ease-in-out both;
  box-shadow: 0 0 10px rgba(201, 168, 76, .5);
}
.coco-quiz-loader span:nth-child(1) { animation-delay: -.32s; }
.coco-quiz-loader span:nth-child(2) { animation-delay: -.16s; }
@keyframes cocoQuizBounce {
  0%, 80%, 100% { transform: scale(.4); opacity: .4; }
  40%           { transform: scale(1);  opacity: 1; }
}
.coco-quiz-step[data-step="loading"].is-active { text-align: center; padding: 1.5rem 0 1rem; }
.coco-quiz-step[data-step="loading"] .coco-quiz-q,
.coco-quiz-step[data-step="loading"] .coco-quiz-sub { text-align: center; }

/* Results */
.coco-quiz-step[data-step="results"] { text-align: center; }
.coco-quiz-step[data-step="results"] .coco-quiz-sub { max-width: 480px; margin-left: auto; margin-right: auto; }
.coco-quiz-results-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 1.5rem 0 1.5rem;
  text-align: left;
}
.coco-quiz-card {
  display: block; text-decoration: none; color: var(--cq-cream);
  background: var(--cq-surface); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--cq-gold-18);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.coco-quiz-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .35);
  border-color: var(--cq-gold-35);
}
.coco-quiz-card-img {
  position: relative; aspect-ratio: 1/1; background: #0A1A06; overflow: hidden;
}
.coco-quiz-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.coco-quiz-card:hover .coco-quiz-card-img img { transform: scale(1.05); }
.coco-quiz-card-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--cq-gold); color: var(--cq-bg);
  font-size: .65rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.coco-quiz-card-body { padding: .7rem .8rem .9rem; }
.coco-quiz-card-cat {
  font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cq-cream-60); margin-bottom: 3px;
}
.coco-quiz-card-name {
  font-size: .85rem; font-weight: 600; color: var(--cq-cream);
  line-height: 1.3; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.coco-quiz-card-price { font-size: .85rem; color: var(--cq-gold); font-weight: 600; }
.coco-quiz-card-price del { color: var(--cq-cream-40); font-weight: 400; margin-right: .3rem; }
.coco-quiz-card-price ins { text-decoration: none; }

.coco-quiz-empty {
  grid-column: 1/-1; text-align: center;
  padding: 1.5rem 1rem; color: var(--cq-cream-60);
  font-size: .9rem; line-height: 1.6;
}

.coco-quiz-actions {
  display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center;
  margin-top: .5rem;
}
.coco-quiz-restart {
  background: transparent; border: 1.5px solid var(--cq-gold-35);
  color: var(--cq-cream);
  padding: .7rem 1.5rem; border-radius: 999px;
  font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.coco-quiz-restart:hover { border-color: var(--cq-gold); background: rgba(201, 168, 76, .1); }
.coco-quiz-shop {
  background: var(--cq-gold); color: var(--cq-bg); text-decoration: none;
  padding: .75rem 1.6rem; border-radius: 999px;
  font-size: .85rem; font-weight: 700; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 8px 22px rgba(201, 168, 76, .3);
}
.coco-quiz-shop:hover {
  background: var(--cq-gold-2);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(201, 168, 76, .45);
}

/* Mobile */
@media (max-width: 560px) {
  .coco-quiz-overlay { padding: 0; align-items: flex-end; }
  .coco-quiz-modal {
    max-width: 100%; max-height: 92vh;
    border-radius: 22px 22px 0 0;
    transform: translateY(40px);
  }
  .coco-quiz-overlay.is-active .coco-quiz-modal { transform: translateY(0); }
  .coco-quiz-header { padding: 1.1rem 3.2rem .85rem 1.1rem; }
  .coco-quiz-body { padding: 1.3rem 1.1rem 1.25rem; }
  .coco-quiz-nav { padding: .75rem 1.1rem; }
  .coco-quiz-options { grid-template-columns: 1fr; }
  .coco-quiz-q { font-size: 1.3rem; }
  .coco-quiz-results-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   QUICK VIEW
═══════════════════════════════════════════════════════════════ */
.coco-qv-btn {
  display: block;
  width: 100%;
  margin-top: .55rem;
  padding: .45rem 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.coco-qv-btn:hover { background: var(--c0); color: var(--cream); border-color: var(--c0); }

.coco-qv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,15,5,.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.coco-qv-overlay.is-open { opacity: 1; pointer-events: all; }

.coco-qv-modal {
  position: relative;
  background: var(--bg-card);
  border-radius: 12px;
  max-width: 860px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 24px 72px rgba(0,0,0,.28);
  transform: translateY(18px) scale(.97);
  transition: transform .28s var(--ease-expo);
}
.coco-qv-overlay.is-open .coco-qv-modal { transform: none; }

.coco-qv-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt);
  border: none; border-radius: 50%;
  cursor: pointer; color: var(--text); z-index: 2;
  transition: background .2s;
}
.coco-qv-close:hover { background: var(--c0); color: var(--cream); }

.coco-qv-loader {
  display: flex; gap: .5rem;
  align-items: center; justify-content: center;
  padding: 5rem 2rem;
}
.coco-qv-loader span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c0); opacity: .2;
  animation: qvPulse 1.2s infinite ease-in-out;
}
.coco-qv-loader span:nth-child(2) { animation-delay: .2s; }
.coco-qv-loader span:nth-child(3) { animation-delay: .4s; }
@keyframes qvPulse { 0%,80%,100% { opacity:.2; transform:scale(.8); } 40% { opacity:1; transform:scale(1); } }

.coco-qv-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.coco-qv-gallery {
  padding: 1.5rem;
  background: var(--bg-alt);
  border-radius: 12px 0 0 12px;
}
.coco-qv-main-img {
  width: 100%; aspect-ratio: 1;
  object-fit: contain; border-radius: 8px;
}
.coco-qv-thumbs {
  display: flex; gap: .5rem;
  flex-wrap: wrap; margin-top: .75rem;
}
.coco-qv-thumb {
  width: 56px; height: 56px;
  border: 2px solid transparent;
  border-radius: 6px; overflow: hidden;
  cursor: pointer; padding: 0; background: var(--bg-card);
  transition: border-color .2s;
}
.coco-qv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.coco-qv-thumb.is-active,
.coco-qv-thumb:hover { border-color: var(--c0); }

.coco-qv-info {
  padding: 2rem 2rem 2rem 1.75rem;
  display: flex; flex-direction: column; gap: .65rem;
}
.coco-qv-cat {
  font-size: .68rem; letter-spacing: .12em;
  color: var(--text-muted); margin: 0;
}
.coco-qv-name {
  font-family: var(--font-display);
  font-size: 1.55rem; font-weight: 600;
  color: var(--text); line-height: 1.25; margin: 0;
}
.coco-qv-price { margin: 0; }
.coco-qv-price .price { font-size: 1.15rem; font-weight: 600; color: var(--c0); }
.coco-qv-desc {
  font-size: .88rem; color: var(--text-secondary);
  line-height: 1.7; margin: 0;
  max-height: 100px; overflow-y: auto;
}
.coco-qv-actions { display: flex; flex-direction: column; gap: .65rem; margin-top: auto; }
.coco-qv-oos {
  display: inline-block; padding: .65rem 1.25rem;
  background: var(--bg-alt); border-radius: 6px;
  font-size: .85rem; color: var(--text-muted); text-align: center;
}
.coco-qv-full-link {
  font-size: .8rem; color: var(--text-secondary);
  text-decoration: none; letter-spacing: .04em;
  transition: color .2s;
}
.coco-qv-full-link:hover { color: var(--c0); }

@media (max-width: 640px) {
  .coco-qv-wrap { grid-template-columns: 1fr; }
  .coco-qv-gallery { border-radius: 12px 12px 0 0; padding: 1rem; }
  .coco-qv-info { padding: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   RECENTLY VIEWED
═══════════════════════════════════════════════════════════════ */
.coco-rvw-section { border-top: 1px solid var(--border); }
.coco-rvw-heading {
  font-family: var(--font-display);
  font-size: 1.6rem; color: var(--text);
  margin: 0 0 1.25rem;
}
.coco-rvw-row {
  display: flex; gap: 1rem;
  overflow-x: auto; padding-bottom: .5rem;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.coco-rvw-row::-webkit-scrollbar { height: 4px; }
.coco-rvw-row::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

.coco-rvw-card {
  flex: 0 0 180px; min-width: 0;
  text-decoration: none; color: inherit;
  border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  background: var(--bg-card);
  transition: box-shadow .2s, transform .2s;
}
.coco-rvw-card:hover { box-shadow: 0 6px 24px rgba(11,31,8,.1); transform: translateY(-2px); }
.coco-rvw-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.coco-rvw-body { padding: .65rem .75rem .75rem; }
.coco-rvw-cat {
  font-size: .62rem; letter-spacing: .1em;
  color: var(--text-muted); margin: 0 0 .2rem;
}
.coco-rvw-name {
  font-size: .82rem; font-weight: 600; color: var(--text);
  margin: 0 0 .3rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.coco-rvw-price { margin: 0; font-size: .82rem; font-weight: 600; color: var(--c0); }
.coco-rvw-price .price { font-size: inherit; }

/* ═══════════════════════════════════════════════════════════════
   BACK-IN-STOCK ALERT FORM
═══════════════════════════════════════════════════════════════ */
.coco-bisw {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(201,168,76,.05), rgba(201,168,76,.02));
}
.coco-bisw__label {
  font-size: .82rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-secondary);
  margin: 0 0 .65rem;
}
.coco-bisw__row {
  display: flex; gap: .5rem;
}
.coco-bisw__email {
  flex: 1; min-width: 0;
  padding: .55rem .85rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: var(--font-body); font-size: .9rem;
  background: var(--bg-card); color: var(--text);
  transition: border-color .2s;
}
.coco-bisw__email:focus { outline: none; border-color: var(--gold); }
.coco-bisw__submit { flex-shrink: 0; white-space: nowrap; }
.coco-bisw__msg {
  margin-top: .5rem; font-size: .82rem; min-height: 1.3em;
}
.coco-bisw__msg.is-ok  { color: #1d6b2b; }
.coco-bisw__msg.is-error { color: #b5271e; }

@media (max-width: 480px) {
  .coco-bisw__row { flex-direction: column; }
  .coco-bisw__submit { width: 100%; }
}


/* v320 — centre review form */
#review_form_wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* v351 — Cursor visibility fix: native cursor hidden on every element so the custom yellow dot is the only visible cursor on overlays, popups, modals, buttons and labels. Text inputs keep the text caret. */
html, body, body *, body *::before, body *::after { cursor: none !important; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], textarea, [contenteditable="true"] { cursor: text !important; }


/* v353 — Adaptive cursor color: mix-blend-mode auto-inverts the yellow dot/ring against whatever is beneath, so the cursor stays visible on every background, gradient, image or same-tone design. White ghosted under-layer guarantees contrast even on busy photography. */
#cursor-dot, #cursor-ring { mix-blend-mode: difference !important; isolation: isolate !important; }
#cursor-dot { background: #FFFFFF !important; box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 8px rgba(0,0,0,.35) !important; }
#cursor-ring { border-color: #FFFFFF !important; }
body.cursor-hover #cursor-dot { background: #FFE89A !important; }
body.cursor-hover #cursor-ring { border-color: #FFE89A !important; }


/* v354 -- Premium gold cursor with adaptive contrast. Default brand-gold (#C9A84C). When the cursor is over a similar gold/yellow surface, JS toggles body.cursor-on-gold and the dot/ring flip to deep forest green for guaranteed contrast. Smooth transitions preserve the luxury feel. */
#cursor-dot {
  background: #C9A84C !important;
  mix-blend-mode: normal !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 12px rgba(201,168,76,.45) !important;
  transition: background-color .22s ease, box-shadow .22s ease, transform .12s ease, border-color .22s ease !important;
}
#cursor-ring {
  border-color: #C9A84C !important;
  mix-blend-mode: normal !important;
  transition: border-color .22s ease, transform .12s ease, box-shadow .22s ease !important;
}
body.cursor-on-gold #cursor-dot {
  background: #0B1F08 !important;
  box-shadow: 0 0 0 1px rgba(245,237,214,.92), 0 0 14px rgba(0,0,0,.45) !important;
}
body.cursor-on-gold #cursor-ring {
  border-color: #0B1F08 !important;
  box-shadow: 0 0 0 1px rgba(245,237,214,.6) !important;
}


/* v355 -- Magnifier-style hover cursor. On hover the big solid disc is replaced by a transparent loupe: small gold pointer dot stays at the exact cursor coordinate, and a large translucent ring expands around it with frosted-glass + subtle magnify/brighten so the user can almost "see through" the cursor. */
body.cursor-hover #cursor-dot {
  width: 6px !important;
  height: 6px !important;
  margin: -3px 0 0 -3px !important;
  background: #C9A84C !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 6px rgba(201,168,76,.65) !important;
}
body.cursor-hover #cursor-ring {
  width: 64px !important;
  height: 64px !important;
  margin: -32px 0 0 -32px !important;
  border: 1.5px solid rgba(201,168,76,.85) !important;
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(1.5px) saturate(1.45) brightness(1.08) contrast(1.04) !important;
  -webkit-backdrop-filter: blur(1.5px) saturate(1.45) brightness(1.08) contrast(1.04) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 0 12px rgba(201,168,76,.18),
    0 8px 28px rgba(0,0,0,.28),
    0 0 0 1px rgba(0,0,0,.18) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
}
/* Adaptive: on gold backgrounds, magnifier flips to dark forest green so it stays visible */
body.cursor-on-gold.cursor-hover #cursor-dot {
  background: #0B1F08 !important;
  box-shadow: 0 0 0 1px rgba(245,237,214,.9), 0 0 6px rgba(0,0,0,.55) !important;
}
body.cursor-on-gold.cursor-hover #cursor-ring {
  border-color: rgba(11,31,8,.9) !important;
  background: rgba(11,31,8,.08) !important;
  box-shadow:
    inset 0 0 0 1px rgba(245,237,214,.6),
    inset 0 0 12px rgba(11,31,8,.18),
    0 8px 28px rgba(0,0,0,.32),
    0 0 0 1px rgba(245,237,214,.35) !important;
}


/* v356 -- Crisp, precise magnifier-style cursor. NO blur on the loupe (content stays sharp). Subtle contrast/saturate boost simulates the lens "pop" without softening details. Dot is wrapped in a high-contrast double-ring (cream halo over a dark outline) so the exact click point is unmistakable, especially inside the loupe. Loupe is tightened to 52px for an elegant, premium feel. */
body.cursor-hover #cursor-dot {
  width: 5px !important;
  height: 5px !important;
  margin: -2.5px 0 0 -2.5px !important;
  background: #C9A84C !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 1.5px #0B1F08,
    0 0 0 3px rgba(245,237,214,.95),
    0 0 0 4px rgba(11,31,8,.55),
    0 0 10px rgba(201,168,76,.65) !important;
}
body.cursor-hover #cursor-ring {
  width: 52px !important;
  height: 52px !important;
  margin: -26px 0 0 -26px !important;
  border: 1.5px solid rgba(201,168,76,.95) !important;
  background: transparent !important;
  backdrop-filter: contrast(1.18) saturate(1.4) brightness(1.04) !important;
  -webkit-backdrop-filter: contrast(1.18) saturate(1.4) brightness(1.04) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 12px 32px rgba(0,0,0,.35),
    0 0 0 1px rgba(0,0,0,.22) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
}
/* Adaptive: on gold backgrounds the dot's outer halo flips so it remains visible */
body.cursor-on-gold.cursor-hover #cursor-dot {
  background: #0B1F08 !important;
  box-shadow:
    0 0 0 1.5px #F5EDD6,
    0 0 0 3px rgba(11,31,8,.95),
    0 0 0 4px rgba(245,237,214,.55),
    0 0 10px rgba(0,0,0,.55) !important;
}
body.cursor-on-gold.cursor-hover #cursor-ring {
  border-color: rgba(11,31,8,.95) !important;
  box-shadow:
    inset 0 0 0 1px rgba(245,237,214,.7),
    inset 0 1px 0 rgba(245,237,214,.4),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 12px 32px rgba(0,0,0,.4),
    0 0 0 1px rgba(245,237,214,.4) !important;
}



/* v358 -- Reliable concentric magnifier. Hover dot stays identical to the default yellow pointer (8px gold). The spring-following #cursor-ring is hidden in hover mode. A separate JS-injected #coco-loupe div is positioned by the SAME mousemove event as the dot, so the loupe and the click-point dot are perfectly concentric every frame, zero lag, zero drift. NO blur on the loupe -- only contrast/saturate enhancement keeps content crisp. */
body.cursor-hover #cursor-ring {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.cursor-hover #cursor-dot {
  width: 8px !important;
  height: 8px !important;
  margin: -4px 0 0 -4px !important;
  background: #C9A84C !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 12px rgba(201,168,76,.45) !important;
}
#coco-loupe {
  position: fixed;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  border: 1.5px solid rgba(201,168,76,.95);
  background: transparent;
  pointer-events: none;
  z-index: 2147483645;
  opacity: 0;
  transition: opacity .2s ease, border-color .22s ease;
  backdrop-filter: contrast(1.18) saturate(1.4) brightness(1.04);
  -webkit-backdrop-filter: contrast(1.18) saturate(1.4) brightness(1.04);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 12px 32px rgba(0,0,0,.35),
    0 0 0 1px rgba(0,0,0,.22);
  will-change: left, top, opacity;
}
body.cursor-hover #coco-loupe {
  opacity: 1;
}
body.cursor-on-gold.cursor-hover #cursor-dot {
  background: #0B1F08 !important;
  box-shadow: 0 0 0 1px rgba(245,237,214,.85), 0 0 12px rgba(0,0,0,.4) !important;
}
body.cursor-on-gold #coco-loupe {
  border-color: rgba(11,31,8,.95);
  box-shadow:
    inset 0 0 0 1px rgba(245,237,214,.7),
    inset 0 1px 0 rgba(245,237,214,.4),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 12px 32px rgba(0,0,0,.4),
    0 0 0 1px rgba(245,237,214,.4);
}


/* v363 -- Branded order-processing overlay. Replaces WC's clinical white blockUI with a premium dark-green frosted-glass overlay during the slow checkout AJAX wait. Cycling status messages make the 10-30s wait feel intentional and progressing. */
body.coco-placing-order .blockUI.blockOverlay { opacity: 0 !important; background: transparent !important; }
body.coco-placing-order .blockUI.blockMsg { display: none !important; }
#coco-order-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 31, 8, 0.92);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  z-index: 2147483600;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .35s ease;
  padding: 20px;
}
#coco-order-overlay.is-open {
  display: flex;
  opacity: 1;
}
#coco-order-overlay .coco-order-card {
  background: linear-gradient(160deg, rgba(20, 50, 22, .96), rgba(11, 31, 8, .96));
  border: 1px solid rgba(201, 168, 76, .35);
  border-radius: 22px;
  padding: 42px 36px 30px;
  text-align: center;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(8px) scale(.98);
  opacity: 0;
  transition: transform .42s cubic-bezier(.2,.9,.3,1.1), opacity .35s ease;
}
#coco-order-overlay.is-open .coco-order-card { transform: translateY(0) scale(1); opacity: 1; }
.coco-order-spinner {
  width: 58px; height: 58px;
  margin: 0 auto 22px;
  border: 3px solid rgba(201, 168, 76, .18);
  border-top-color: #C9A84C;
  border-right-color: rgba(201, 168, 76, .55);
  border-radius: 50%;
  animation: cocoOrderSpin .9s linear infinite;
  box-shadow: 0 0 24px rgba(201, 168, 76, .25);
}
@keyframes cocoOrderSpin { to { transform: rotate(360deg); } }
.coco-order-title {
  color: #F5EDD6;
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 8px;
}
.coco-order-status {
  color: rgba(245, 237, 214, .72);
  font-size: 14px;
  margin: 0 0 22px;
  min-height: 22px;
  transition: opacity .25s ease, color .25s ease;
}
.coco-order-status.is-error { color: #E8A86A; }
.coco-order-status.is-success { color: #B6D8A8; }
.coco-order-trust {
  color: rgba(245, 237, 214, .42);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-top: 20px;
  border-top: 1px solid rgba(201, 168, 76, .15);
}


/* v364 -- Premium order-details / view-order / my-account page styling. Aligns the bare WooCommerce order pages with Cocomera's dark forest + gold + cream brand. Replaces default yellow <mark> highlights with subtle gold pills, builds card-based layout for order overview, billing/shipping, and styles the order item table to match the homepage premium feel. */

/* Replace bright yellow <mark> tags with subtle gold-on-dark pill */
.woocommerce mark, .woocommerce-account mark, .woocommerce-order mark, .woocommerce-MyAccount-content mark {
  background: rgba(201, 168, 76, 0.18) !important;
  color: #E8C96A !important;
  padding: 2px 9px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(201, 168, 76, 0.3);
  text-shadow: none !important;
}

/* Wrapper paddings for order pages */
.woocommerce-order, .woocommerce-account .woocommerce {
  max-width: 960px;
  margin: 50px auto 80px;
  padding: 0 20px;
  color: #F5EDD6;
}

/* "Order #X was placed on Y and is currently Z." intro */
.woocommerce-order-details__title,
p.woocommerce-thankyou-order-received,
.woocommerce-MyAccount-content > p:first-of-type {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  color: #F5EDD6;
  line-height: 1.35;
  margin: 0 0 28px;
  padding: 28px 32px;
  background: linear-gradient(160deg, rgba(20, 50, 22, 0.55), rgba(11, 31, 8, 0.45));
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

/* Order overview grid (top meta info on thank-you page) */
ul.woocommerce-order-overview, .woocommerce-thankyou-order-details {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 36px !important;
  background: linear-gradient(160deg, rgba(18, 48, 20, 0.5), rgba(11, 31, 8, 0.4)) !important;
  border: 1px solid rgba(201, 168, 76, 0.22) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
}
ul.woocommerce-order-overview li, .woocommerce-thankyou-order-details li {
  padding: 22px 18px !important;
  text-align: center !important;
  border-right: 1px solid rgba(201, 168, 76, 0.12) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(245, 237, 214, 0.55) !important;
  list-style: none !important;
  margin: 0 !important;
}
ul.woocommerce-order-overview li:last-child, .woocommerce-thankyou-order-details li:last-child { border-right: none !important; }
ul.woocommerce-order-overview li strong, .woocommerce-thankyou-order-details li strong {
  display: block !important;
  margin-top: 8px !important;
  font-size: 17px !important;
  color: #F5EDD6 !important;
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Section headings */
.woocommerce-order h2, .woocommerce-order h3,
.woocommerce-account h2, .woocommerce-account h3,
.woocommerce-column__title, .woocommerce-order-details > h2 {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif) !important;
  font-size: clamp(22px, 2.5vw, 28px) !important;
  font-weight: 500 !important;
  color: #F5EDD6 !important;
  margin: 36px 0 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.25) !important;
  position: relative !important;
}
.woocommerce-order h2::after, .woocommerce-account h2::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -1px !important;
  width: 60px !important;
  height: 2px !important;
  background: linear-gradient(90deg, #C9A84C, #E8C96A) !important;
}

/* Order details table */
.woocommerce-table--order-details, .woocommerce-orders-table, .shop_table.order_details, .shop_table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: linear-gradient(160deg, rgba(18, 48, 20, 0.45), rgba(11, 31, 8, 0.35)) !important;
  border: 1px solid rgba(201, 168, 76, 0.2) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  margin: 0 0 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}
.woocommerce-table--order-details thead th,
.woocommerce-orders-table thead th,
.shop_table thead th {
  background: rgba(11, 31, 8, 0.65) !important;
  color: rgba(245, 237, 214, 0.7) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  padding: 16px 22px !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.22) !important;
  text-align: left !important;
}
.woocommerce-table--order-details tbody td,
.woocommerce-orders-table tbody td,
.shop_table tbody td,
.shop_table tbody th {
  padding: 16px 22px !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.1) !important;
  color: #F5EDD6 !important;
  vertical-align: middle !important;
  background: transparent !important;
  font-size: 14px !important;
}
.woocommerce-table--order-details tbody tr:last-child td { border-bottom: none !important; }
.woocommerce-table--order-details a, .shop_table a {
  color: #C9A84C !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color .18s ease !important;
}
.woocommerce-table--order-details a:hover, .shop_table a:hover { color: #E8C96A !important; }
.woocommerce-table--order-details .product-quantity, .product-quantity {
  color: rgba(245, 237, 214, 0.55) !important;
  font-size: 13px !important;
}
.woocommerce-table--order-details tfoot th,
.shop_table tfoot th {
  background: rgba(11, 31, 8, 0.45) !important;
  color: rgba(245, 237, 214, 0.75) !important;
  font-weight: 600 !important;
  padding: 14px 22px !important;
  text-align: right !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.1) !important;
  font-size: 13px !important;
}
.woocommerce-table--order-details tfoot td,
.shop_table tfoot td {
  text-align: right !important;
  font-weight: 600 !important;
  color: #F5EDD6 !important;
  padding: 14px 22px !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.1) !important;
  background: transparent !important;
}
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
  font-size: 19px !important;
  color: #C9A84C !important;
  padding: 18px 22px !important;
  background: rgba(201, 168, 76, 0.08) !important;
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif) !important;
  border-bottom: none !important;
}

/* Customer details: billing / shipping cards */
.woocommerce-customer-details {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  margin-top: 36px !important;
}
.woocommerce-customer-details .woocommerce-column,
section.woocommerce-customer-details > .woocommerce-column {
  background: linear-gradient(160deg, rgba(18, 48, 20, 0.5), rgba(11, 31, 8, 0.4)) !important;
  border: 1px solid rgba(201, 168, 76, 0.22) !important;
  border-radius: 16px !important;
  padding: 26px 28px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important;
}
.woocommerce-customer-details .woocommerce-column h2,
.woocommerce-customer-details .woocommerce-column__title {
  margin: 0 0 16px !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2) !important;
  padding-bottom: 12px !important;
  font-size: 22px !important;
}
.woocommerce-customer-details address {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  color: #F5EDD6 !important;
  font-style: normal !important;
  line-height: 1.75 !important;
  font-size: 14px !important;
}
.woocommerce-customer-details address p { color: #F5EDD6 !important; margin: 6px 0 !important; }

/* Buttons */
.woocommerce-order .button, .woocommerce-order .wc-bookings-booking-form-button,
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content a.button {
  display: inline-block !important;
  background: linear-gradient(135deg, #C9A84C, #E8C96A) !important;
  color: #0B1F08 !important;
  border: none !important;
  padding: 12px 26px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(201, 168, 76, 0.3) !important;
  transition: transform 0.2s ease, box-shadow 0.22s ease !important;
}
.woocommerce-order .button:hover, .woocommerce-MyAccount-content .button:hover, .woocommerce-MyAccount-content a.button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(201, 168, 76, 0.45) !important;
  color: #0B1F08 !important;
}

/* My Account navigation sidebar */
.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 8px !important;
  margin: 0 !important;
  background: linear-gradient(160deg, rgba(18, 48, 20, 0.5), rgba(11, 31, 8, 0.4)) !important;
  border: 1px solid rgba(201, 168, 76, 0.22) !important;
  border-radius: 16px !important;
}
.woocommerce-MyAccount-navigation li {
  margin: 0 !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.08) !important;
}
.woocommerce-MyAccount-navigation li:last-child { border-bottom: none !important; }
.woocommerce-MyAccount-navigation li a {
  display: block !important;
  padding: 14px 18px !important;
  color: rgba(245, 237, 214, 0.75) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  transition: background .18s ease, color .18s ease, padding .18s ease !important;
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
  background: rgba(201, 168, 76, 0.14) !important;
  color: #F5EDD6 !important;
  padding-left: 24px !important;
}

/* Order status badges */
.woocommerce-orders-table__cell-order-status mark,
td.woocommerce-orders-table__cell-order-status,
.order-status {
  display: inline-block !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: rgba(201, 168, 76, 0.16) !important;
  color: #E8C96A !important;
  border: 1px solid rgba(201, 168, 76, 0.32) !important;
}

/* Order again button on my-account orders list */
.woocommerce-orders-table__cell-order-actions { text-align: right !important; }
.woocommerce-orders-table__cell-order-actions .button { margin-left: 6px !important; padding: 8px 16px !important; font-size: 11px !important; }

/* Responsive */
@media (max-width: 640px) {
  ul.woocommerce-order-overview, .woocommerce-thankyou-order-details {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  ul.woocommerce-order-overview li:nth-child(2n) { border-right: none !important; }
  .woocommerce-order, .woocommerce-account .woocommerce { padding: 0 14px !important; margin: 24px auto 40px !important; }
  .woocommerce-order-details__title { padding: 22px 20px !important; font-size: 20px !important; }
  .woocommerce-table--order-details thead th, .woocommerce-table--order-details tbody td, .woocommerce-table--order-details tfoot th, .woocommerce-table--order-details tfoot td { padding: 12px 14px !important; }
}


/* v365 -- Pixel-accurate custom view-order template. Replaces WC default with full-width branded layout: header + Order details card + Billing card with plant illustration + footer. */
/* sidebar visible on view-order page so user sees full account context */
/* MyAccount-content uses theme default width with sidebar visible */

.coco-view-order, .coco-view-order * { box-sizing: border-box; }
.coco-view-order {
  max-width: 1200px;
  margin: 24px auto 60px;
  padding: 0 24px;
  color: #F5EDD6;
  font-family: var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif);
}

.coco-vo-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 8px 0 28px; flex-wrap: wrap;
}
.coco-vo-headline { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; }
.coco-vo-headline-text {
  font-size: 15px; color: rgba(245, 237, 214, 0.92);
  margin: 0; line-height: 1.55;
}
.coco-vo-headline-text mark {
  background: transparent !important; color: #C9A84C !important;
  font-weight: 600 !important; padding: 0 !important;
  border: none !important; text-shadow: none !important;
}
.coco-vo-status {
  display: inline-block; padding: 5px 14px; margin-left: 8px;
  border: 1px solid rgba(201, 168, 76, 0.55); border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  color: #C9A84C; vertical-align: middle;
}
.coco-vo-icon-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.45);
  color: #C9A84C; flex-shrink: 0;
  background: rgba(201, 168, 76, 0.06);
}
.coco-vo-icon-circle svg { width: 17px; height: 17px; }
.coco-vo-icon-circle--lg { width: 60px; height: 60px; }
.coco-vo-icon-circle--lg svg { width: 24px; height: 24px; }
.coco-vo-back-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 24px; border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 999px; color: #C9A84C !important;
  text-decoration: none !important; font-size: 13px; font-weight: 500;
  background: rgba(201, 168, 76, 0.04);
  transition: background .2s ease, transform .18s ease, border-color .2s ease;
  white-space: nowrap;
}
.coco-vo-back-btn svg { width: 14px; height: 14px; }
.coco-vo-back-btn:hover { background: rgba(201, 168, 76, 0.14); border-color: rgba(201, 168, 76, 0.8); color: #E8C96A !important; }

.coco-vo-card {
  background: linear-gradient(160deg, rgba(20, 50, 22, 0.55), rgba(11, 31, 8, 0.45));
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 22px; padding: 38px 42px; margin-bottom: 22px;
  position: relative; overflow: hidden;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
}

.coco-vo-card--details .coco-vo-title {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 40px; font-weight: 500; color: #F5EDD6;
  margin: 0; line-height: 1.05;
  position: relative; display: inline-block;
}
.coco-vo-card--details .coco-vo-title::after {
  content: ''; display: block; width: 70px; height: 2px;
  background: linear-gradient(90deg, #C9A84C, #E8C96A);
  margin-top: 10px; border-radius: 2px;
}
.coco-vo-subtitle {
  font-size: 14px; color: rgba(245, 237, 214, 0.55);
  margin: 18px 0 28px;
}

.coco-vo-table {
  border: 1px solid rgba(201, 168, 76, 0.16);
  border-radius: 16px; overflow: hidden;
  background: rgba(11, 31, 8, 0.22);
}
.coco-vo-thead {
  display: grid; grid-template-columns: 1fr 140px;
  padding: 20px 28px; border-bottom: 1px solid rgba(201, 168, 76, 0.12);
  font-size: 11px; letter-spacing: 0.18em;
  color: rgba(245, 237, 214, 0.55); font-weight: 600;
}
.coco-vo-th-total { text-align: right; }
.coco-vo-item {
  display: grid; grid-template-columns: 1fr 140px;
  align-items: center; padding: 24px 28px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.1); gap: 16px;
}
.coco-vo-item-left { display: flex; align-items: center; gap: 18px; }
.coco-vo-item-img {
  width: 68px; height: 68px; border-radius: 14px;
  object-fit: cover; border: 1px solid rgba(201, 168, 76, 0.2);
  background: rgba(0,0,0,0.2); display: block;
}
.coco-vo-item-img--ph { background: rgba(201, 168, 76, 0.08); }
.coco-vo-item-name {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 22px; font-weight: 500; color: #F5EDD6; line-height: 1.2;
}
.coco-vo-item-qty {
  font-size: 13px; color: rgba(245, 237, 214, 0.5); margin-top: 6px;
}
.coco-vo-item-total {
  color: #C9A84C; font-weight: 600; font-size: 19px;
  text-align: right; font-variant-numeric: tabular-nums;
}

.coco-vo-totals { padding: 18px 28px 4px; border-bottom: 1px solid rgba(201, 168, 76, 0.1); }
.coco-vo-trow {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; font-size: 15px;
}
.coco-vo-tlabel { color: rgba(245, 237, 214, 0.75); display: inline-flex; align-items: center; gap: 6px; }
.coco-vo-info { font-size: 14px; opacity: 0.5; cursor: help; }
.coco-vo-tvalue { color: #F5EDD6; font-weight: 500; font-variant-numeric: tabular-nums; }
.coco-vo-grand {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 22px 28px; background: rgba(201, 168, 76, 0.05);
}
.coco-vo-grand-label {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 24px; color: #C9A84C; padding-top: 4px;
}
.coco-vo-grand-amount { text-align: right; }
.coco-vo-grand-value {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 32px; color: #C9A84C; font-weight: 500;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.coco-vo-tax-note { font-size: 12px; color: rgba(245, 237, 214, 0.5); margin-top: 6px; }

.coco-vo-actions-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: 22px; padding-top: 22px;
  border-top: 1px solid rgba(201, 168, 76, 0.08);
}
.coco-vo-action {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px; border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: 16px; background: rgba(11, 31, 8, 0.28);
  transition: border-color .18s ease, background .18s ease;
}
.coco-vo-action:hover { border-color: rgba(201, 168, 76, 0.35); background: rgba(11, 31, 8, 0.45); }
.coco-vo-action-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.35); color: #C9A84C;
  flex-shrink: 0; background: rgba(201, 168, 76, 0.05);
}
.coco-vo-action-icon svg { width: 18px; height: 18px; }
.coco-vo-action-text { min-width: 0; }
.coco-vo-action-label { font-size: 13px; color: #C9A84C; font-weight: 500; margin-bottom: 4px; }
.coco-vo-action-value { font-size: 15px; color: #F5EDD6; }
.coco-vo-action-link {
  color: #F5EDD6 !important; text-decoration: none !important;
  border-bottom: 1px dashed rgba(245, 237, 214, 0.3); padding-bottom: 1px;
  transition: color .18s ease, border-color .18s ease;
}
.coco-vo-action-link:hover { color: #E8C96A !important; border-color: rgba(232, 201, 106, 0.6); }

.coco-vo-card--billing {
  display: grid; grid-template-columns: 260px 1fr 320px;
  gap: 36px; align-items: start; padding: 36px 42px;
}
.coco-vo-bill-left { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 6px; }
.coco-vo-bill-title {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 30px; font-weight: 500; color: #F5EDD6; margin: 0; line-height: 1;
}
.coco-vo-bill-content {
  border-left: 1px solid rgba(201, 168, 76, 0.22); padding-left: 32px;
  color: rgba(245, 237, 214, 0.85); line-height: 1.85; font-size: 15px;
}
.coco-vo-bline { padding: 2px 0; }
.coco-vo-bill-deco {
  position: absolute; right: -10px; bottom: -30px;
  width: 320px; height: 260px; pointer-events: none;
  opacity: 0.75; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
}
.coco-vo-bill-deco svg { width: 100%; height: 100%; }

.coco-vo-footer {
  display: flex; justify-content: center; align-items: center; gap: 20px;
  padding: 22px 28px; margin-top: 0;
  background: linear-gradient(160deg, rgba(18, 48, 20, 0.4), rgba(11, 31, 8, 0.3));
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: 18px; font-size: 14px; color: rgba(245, 237, 214, 0.85);
}
.coco-vo-foot-item { display: inline-flex; align-items: center; gap: 10px; }
.coco-vo-foot-item svg { width: 18px; height: 18px; color: #C9A84C; flex-shrink: 0; }
.coco-vo-foot-dot { color: rgba(201, 168, 76, 0.6); font-size: 22px; line-height: 0; }

@media (max-width: 900px) {
  .coco-vo-card--billing { grid-template-columns: 1fr; gap: 22px; }
  .coco-vo-bill-content { border-left: none; padding-left: 0; border-top: 1px solid rgba(201, 168, 76, 0.2); padding-top: 18px; }
  .coco-vo-bill-deco { display: none; }
  .coco-vo-actions-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .coco-view-order { padding: 0 14px; margin: 18px auto 40px; }
  .coco-vo-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .coco-vo-back-btn { width: 100%; justify-content: center; }
  .coco-vo-card { padding: 24px 20px; border-radius: 18px; }
  .coco-vo-card--details .coco-vo-title { font-size: 30px; }
  .coco-vo-thead, .coco-vo-item { padding: 14px 18px; grid-template-columns: 1fr 100px; }
  .coco-vo-grand-value { font-size: 26px; }
  .coco-vo-item-img { width: 56px; height: 56px; }
  .coco-vo-item-name { font-size: 18px; }
  .coco-vo-footer { flex-direction: column; gap: 10px; padding: 18px; }
  .coco-vo-foot-dot { display: none; }
}


/* v366 -- Premium luxury botanical view-order redesign (reference-matched). Card-based layout with leaf decoration in details card, 3 hover-glow action cards (Track / Invoice / Help), rich plant SVG in billing card, 3-column trust banner footer. */

/* Action cards: link, icon left + title/sub middle + arrow right */
.coco-vo-actions-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-top: 22px !important;
  padding-top: 0 !important;
  border-top: none !important;
}
a.coco-vo-action {
  display: grid !important;
  grid-template-columns: 56px 1fr 24px !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(201, 168, 76, 0.22) !important;
  border-radius: 16px !important;
  background: linear-gradient(160deg, rgba(20, 50, 22, 0.45), rgba(11, 31, 8, 0.35)) !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color .25s ease, transform .22s ease, box-shadow .25s ease, background .25s ease !important;
  position: relative;
  overflow: hidden;
}
a.coco-vo-action::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(201, 168, 76, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
a.coco-vo-action:hover {
  border-color: rgba(201, 168, 76, 0.55) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(201, 168, 76, 0.2) inset !important;
  background: linear-gradient(160deg, rgba(28, 64, 30, 0.55), rgba(14, 38, 11, 0.45)) !important;
}
a.coco-vo-action:hover::before { opacity: 1; }
a.coco-vo-action .coco-vo-action-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.4);
  display: inline-flex; align-items: center; justify-content: center;
  color: #C9A84C;
  background: rgba(201, 168, 76, 0.05);
  flex-shrink: 0;
  transition: border-color .22s ease, background .22s ease;
}
a.coco-vo-action:hover .coco-vo-action-icon {
  border-color: rgba(201, 168, 76, 0.7);
  background: rgba(201, 168, 76, 0.12);
}
.coco-vo-action-icon svg { width: 22px; height: 22px; }
.coco-vo-action-label {
  font-size: 16px;
  font-weight: 600;
  color: #F5EDD6;
  line-height: 1.2;
  margin-bottom: 4px;
}
.coco-vo-action-sub {
  font-size: 13px;
  color: rgba(245, 237, 214, 0.55);
  line-height: 1.45;
}
.coco-vo-action-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #C9A84C;
  transition: transform .25s ease;
}
.coco-vo-action-arrow svg { width: 20px; height: 20px; }
a.coco-vo-action:hover .coco-vo-action-arrow { transform: translateX(4px); }

/* Details card -- add leaf decoration in top-right */
.coco-vo-card--details { position: relative; overflow: hidden; }
.coco-vo-deco--leaves {
  position: absolute;
  top: 0; right: 0;
  width: 50%;
  max-width: 460px;
  height: 70%;
  max-height: 320px;
  pointer-events: none;
  z-index: 0;
  filter: blur(0.5px);
}
.coco-vo-deco--leaves svg { width: 100%; height: 100%; }
.coco-vo-card--details > *:not(.coco-vo-deco) { position: relative; z-index: 1; }

/* Title casing change */
.coco-vo-card--details .coco-vo-title { font-size: 42px !important; }

/* Item qty: change from "× N" formatting to "Qty: N" plain text */
.coco-vo-item-qty { font-size: 13px !important; color: rgba(245, 237, 214, 0.55) !important; margin-top: 6px !important; text-transform: none !important; letter-spacing: 0 !important; }

/* Billing card -- larger plant illustration */
.coco-vo-bill-deco {
  position: absolute !important;
  right: 24px !important;
  bottom: -10px !important;
  width: 340px !important;
  height: 360px !important;
  pointer-events: none;
  opacity: 0.95 !important;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5));
  z-index: 0;
}
.coco-vo-bill-deco svg { width: 100%; height: 100%; }
.coco-vo-card--billing { padding-bottom: 60px !important; min-height: 280px; position: relative; overflow: hidden; }
.coco-vo-card--billing > *:not(.coco-vo-bill-deco) { position: relative; z-index: 1; }
.coco-vo-bill-title { font-size: 32px !important; }
.coco-vo-bill-left .coco-vo-icon-circle--lg { width: 60px !important; height: 60px !important; }
.coco-vo-bill-left .coco-vo-icon-circle--lg svg { width: 22px !important; height: 22px !important; }

/* ===== TRUST BANNER FOOTER (3 columns) ===== */
.coco-view-order .coco-vo-footer { display: none !important; } /* hide old 2-item footer */
.coco-vo-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 26px 32px;
  background: linear-gradient(160deg, rgba(18, 48, 20, 0.45), rgba(11, 31, 8, 0.35));
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.coco-vo-trust-item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.coco-vo-trust-item .coco-vo-icon-circle {
  width: 46px; height: 46px;
  border-color: rgba(201, 168, 76, 0.5);
}
.coco-vo-trust-item .coco-vo-icon-circle svg { width: 20px; height: 20px; }
.coco-vo-trust-text { min-width: 0; }
.coco-vo-trust-title {
  font-size: 15px;
  font-weight: 600;
  color: #C9A84C;
  line-height: 1.2;
  margin-bottom: 4px;
}
.coco-vo-trust-sub {
  font-size: 13px;
  color: rgba(245, 237, 214, 0.65);
  line-height: 1.4;
}

/* Responsive overrides for v366 */
@media (max-width: 900px) {
  .coco-vo-actions-row { grid-template-columns: 1fr !important; }
  .coco-vo-trust { grid-template-columns: 1fr; gap: 14px; padding: 20px 22px; }
  .coco-vo-bill-deco { width: 220px !important; height: 240px !important; right: 12px !important; opacity: 0.55 !important; }
  .coco-vo-deco--leaves { opacity: 0.35; max-width: 240px; }
}
@media (max-width: 640px) {
  .coco-vo-card--details .coco-vo-title { font-size: 30px !important; }
  .coco-vo-bill-title { font-size: 26px !important; }
  .coco-vo-bill-deco { display: none !important; }
  .coco-vo-card--billing { padding-bottom: 28px !important; min-height: auto; }
}


/* v367 -- Apply custom view-order layout to checkout/order-received (thank-you) page. Hide the default WC "Thank you..." message + meta-list since our custom render already shows status/date/number in the header bar. */
.woocommerce-order > p.woocommerce-thankyou-order-received,
.woocommerce-order > p.woocommerce-notice--success,
.woocommerce-order > ul.woocommerce-order-overview,
.woocommerce-order > ul.woocommerce-thankyou-order-details,
.woocommerce-order > .woocommerce-customer-details {
  display: none !important;
}
/* The thank-you wrapper has different paddings vs my-account view-order -- normalise */
body.woocommerce-checkout .woocommerce-order { max-width: none; padding: 0; margin: 0; }
body.woocommerce-checkout .coco-view-order { max-width: 1200px; margin: 24px auto 60px; padding: 0 24px; }


/* v369 -- Shipment Progress timeline card. 5-step horizontal tracker with glowing rings for done/current steps, faded for pending, gradient connecting lines, and status message panel below. */
.coco-sp-card { position: relative; overflow: hidden; padding-bottom: 32px !important; }
.coco-sp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.coco-sp-head-left { flex: 1 1 auto; min-width: 0; }
.coco-sp-title {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 38px; font-weight: 500; color: #F5EDD6;
  margin: 0; line-height: 1.1;
  position: relative; display: inline-block;
}
.coco-sp-title::after {
  content: ''; display: block; width: 70px; height: 2px;
  background: linear-gradient(90deg, #C9A84C, #E8C96A);
  margin-top: 10px; border-radius: 2px;
}
.coco-sp-meta {
  font-size: 13px; color: rgba(245, 237, 214, 0.55);
  margin: 16px 0 0;
}
.coco-sp-eta {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  color: #C9A84C;
  white-space: nowrap;
  background: rgba(201, 168, 76, 0.04);
}

/* Timeline track */
.coco-sp-track {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  align-items: center;
  padding: 28px 8px 12px;
  position: relative;
}
.coco-sp-track > .coco-sp-step { grid-column: span 1; }
.coco-sp-track > .coco-sp-line { grid-column: span 1; }
/* Re-layout: 5 steps + 4 lines = grid 1fr 0.5fr 1fr 0.5fr 1fr 0.5fr 1fr 0.5fr 1fr */
.coco-sp-track { grid-template-columns: 1fr 0.7fr 1fr 0.7fr 1fr 0.7fr 1fr 0.7fr 1fr; }

.coco-sp-step {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: relative; z-index: 2;
  text-align: center;
  padding: 0 4px;
}
.coco-sp-bubble {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(201, 168, 76, 0.25);
  background: rgba(11, 31, 8, 0.7);
  color: rgba(245, 237, 214, 0.35);
  position: relative;
  transition: all .3s ease;
}
.coco-sp-bubble svg { width: 22px; height: 22px; }
.coco-sp-num {
  font-size: 13px; font-weight: 600;
  color: rgba(245, 237, 214, 0.45);
  margin-top: -2px;
}
.coco-sp-label {
  font-size: 13px; font-weight: 600;
  color: rgba(245, 237, 214, 0.5);
  line-height: 1.2;
  transition: color .3s ease;
}
.coco-sp-time {
  font-size: 11px;
  color: rgba(245, 237, 214, 0.4);
  min-height: 14px;
  letter-spacing: 0.02em;
}

/* DONE step: green glowing ring with checkmark */
.coco-sp-step--done .coco-sp-bubble {
  border-color: #4CD964;
  background: rgba(11, 31, 8, 0.85);
  color: #4CD964;
  box-shadow: 0 0 0 4px rgba(76, 217, 100, 0.18), 0 0 24px rgba(76, 217, 100, 0.55), inset 0 0 8px rgba(76, 217, 100, 0.2);
}
.coco-sp-step--done .coco-sp-num,
.coco-sp-step--done .coco-sp-label,
.coco-sp-step--done .coco-sp-time { color: rgba(245, 237, 214, 0.85); }

/* CURRENT step: gold glowing ring */
.coco-sp-step--current .coco-sp-bubble {
  border-color: #C9A84C;
  background: rgba(20, 50, 22, 0.85);
  color: #E8C96A;
  box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.18), 0 0 28px rgba(201, 168, 76, 0.65), inset 0 0 10px rgba(201, 168, 76, 0.22);
  animation: cocoSpPulse 2.4s ease-in-out infinite;
}
.coco-sp-step--current .coco-sp-label { color: #E8C96A; }
.coco-sp-step--current .coco-sp-num,
.coco-sp-step--current .coco-sp-time { color: rgba(245, 237, 214, 0.85); }
@keyframes cocoSpPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.18), 0 0 24px rgba(201, 168, 76, 0.55), inset 0 0 8px rgba(201, 168, 76, 0.2); }
  50% { box-shadow: 0 0 0 6px rgba(201, 168, 76, 0.28), 0 0 36px rgba(201, 168, 76, 0.8), inset 0 0 12px rgba(201, 168, 76, 0.3); }
}

/* PENDING step: faded */
.coco-sp-step--pending .coco-sp-bubble { opacity: 0.5; }

/* Connecting lines */
.coco-sp-line {
  height: 3px;
  border-radius: 2px;
  align-self: center;
  margin-top: -38px; /* align with bubble center */
  position: relative;
  z-index: 1;
}
.coco-sp-line--done {
  background: linear-gradient(90deg, #4CD964, #C9A84C);
  box-shadow: 0 0 16px rgba(76, 217, 100, 0.45);
}
.coco-sp-line--pending {
  background: rgba(201, 168, 76, 0.12);
}

/* Status message */
.coco-sp-msg {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; gap: 0;
  margin-top: 28px;
  padding: 28px 32px;
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: 22px;
  background: linear-gradient(135deg, #0C2A0D 0%, #050F06 100%);
  box-shadow: 0 0 0 1px rgba(201,168,76,0.08), 0 8px 40px rgba(0,0,0,0.6), 0 0 80px rgba(201,168,76,0.05);
}
.coco-sp-msg-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 14px;
  border: 1px solid rgba(201, 168, 76, 0.5);
  background: rgba(201, 168, 76, 0.08);
  color: #C9A84C; flex-shrink: 0; margin-right: 20px;
}
.coco-sp-msg-icon svg { width: 30px; height: 30px; fill: none; stroke: #C9A84C; stroke-width: 1.8; }
.coco-sp-msg-vbar {
  width: 1px; align-self: stretch; min-height: 60px;
  background: rgba(201, 168, 76, 0.2);
  margin: 0 26px; flex-shrink: 0;
}
.coco-sp-msg-text { flex: 1; min-width: 0; }
.coco-sp-msg-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px; font-weight: 700; color: #F5EDD6;
  margin-bottom: 6px;
  display: flex; align-items: baseline; gap: 8px;
}
.coco-sp-msg-dot { display: inline-flex; align-items: center; margin-left: 6px; color: #C9A84C; }
.coco-sp-msg-sub {
  font-size: 13px; color: rgba(245, 237, 214, 0.65);
  line-height: 1.5; max-width: 440px;
}
.coco-sp-msg-leaf { display: none; }


/* Tracking column inside Delivered! card */
.coco-sp-msg-trk {
  flex-shrink: 0;
  min-width: 200px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.coco-sp-th {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.coco-sp-th-icon { color: #C9A84C; display: flex; flex-shrink: 0; }
.coco-sp-th-icon svg { width: 16px; height: 16px; }
.coco-sp-th-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #C9A84C;
}
.coco-sp-tn {
  font-size: 15px; font-weight: 700; color: #fff;
  letter-spacing: 0.05em; margin-bottom: 12px; word-break: break-all;
}

.coco-yet-update { opacity: 0.5; font-style: italic; font-size: 13px; letter-spacing: 0.03em; }
.coco-sp-trk-status { margin-bottom: 14px; }
.coco-sp-dp-sep {
  height: 1px; background: rgba(201,168,76,0.2); margin-bottom: 14px;
}
.coco-sp-dp-row {
  display: flex; flex-direction: column; gap: 3px;
}
.coco-sp-dp-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #C9A84C;
}
.coco-sp-dp-val {
  font-size: 14px; font-weight: 600; color: #F5EDD6;
}

/* Smooth scroll for the Track Order anchor */
html { scroll-behavior: smooth; }

@media (max-width: 900px) {
  .coco-sp-title { font-size: 28px; }
  .coco-sp-track { grid-template-columns: 1fr; gap: 18px; padding: 14px 4px; }
  .coco-sp-track > .coco-sp-line { display: none; }
  .coco-sp-step { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 8px 14px; border: 1px solid rgba(201, 168, 76, 0.12); border-radius: 14px; }
  .coco-sp-step--done, .coco-sp-step--current { border-color: rgba(201, 168, 76, 0.3); }
  .coco-sp-bubble { width: 44px; height: 44px; }
  .coco-sp-bubble svg { width: 18px; height: 18px; }
  .coco-sp-num { display: none; }
  .coco-sp-label, .coco-sp-time { text-align: left; }
  .coco-sp-head { flex-direction: column; gap: 14px; }
}


/* v378 -- Hide WC default view-order template duplicates. The theme's page-my-account.php fires the standard WC view-order content alongside our custom override, causing duplication. Hide all default WC view-order/customer-details elements so only the .coco-view-order custom template is visible. */
body.woocommerce-view-order p.woocommerce-thankyou-order-received,
body.woocommerce-view-order .woocommerce-MyAccount-content > p:first-of-type,
body.woocommerce-view-order h2.woocommerce-order-details__title,
body.woocommerce-view-order .woocommerce-order-details:not(.coco-view-order),
body.woocommerce-view-order table.woocommerce-table--order-details,
body.woocommerce-view-order table.shop_table.order_details,
body.woocommerce-view-order section.woocommerce-customer-details,
body.woocommerce-view-order .woocommerce-customer-details,
body.woocommerce-view-order .woocommerce-MyAccount-content ul.woocommerce-order-overview {
  display: none !important;
}
/* (removed: display: revert rule was overriding grid/flex on all children) */


/* v380 -- Hide WC default order-intro paragraph ("Order #X was placed on Y...") that renders alongside our custom header on view-order page. */
body.woocommerce-view-order .woocommerce p:has(> mark.order-number),
body.woocommerce-view-order .woocommerce p:has(mark.order-number),
body.woocommerce-view-order .woocommerce p:has(mark.order-status),
body.woocommerce-view-order .woocommerce p:has(mark.order-date),
body.woocommerce-view-order .woocommerce-MyAccount-content > p:first-child,
body.woocommerce-view-order .woocommerce > p:first-child {
  display: none !important;
}
/* Also hide any standalone mark elements that escaped */
body.woocommerce-view-order .woocommerce > mark,
body.woocommerce-view-order .woocommerce-MyAccount-content > mark {
  display: none !important;
}


/* v382 -- Premium My Orders list (custom card-based design matching brand reference). */
/* Hide WC default orders table since we render our own */
body.woocommerce-orders .woocommerce-orders-table,
body.woocommerce-orders .my_account_orders,
.woocommerce-MyAccount-content > .woocommerce-orders-table,
.woocommerce-MyAccount-content > .woocommerce-Message {
  display: none !important;
}

.coco-myorders, .coco-myorders * { box-sizing: border-box; }
.coco-myorders {
  color: #F5EDD6;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  max-width: 1100px;
}
.coco-mo-head { margin-bottom: 28px; }
.coco-mo-title {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 42px;
  font-weight: 500;
  color: #F5EDD6;
  margin: 0 0 4px;
  position: relative;
  display: inline-block;
}
.coco-mo-title::after {
  content: '';
  display: block;
  width: 70px;
  height: 2px;
  background: linear-gradient(90deg, #C9A84C, #E8C96A);
  margin-top: 10px;
  border-radius: 2px;
}
.coco-mo-sub {
  font-size: 14px;
  color: rgba(245, 237, 214, 0.6);
  margin: 18px 0 0;
}

.coco-mo-list { display: flex; flex-direction: column; gap: 20px; }

.coco-mo-card {
  background: linear-gradient(160deg, rgba(20, 50, 22, 0.5), rgba(11, 31, 8, 0.4));
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  transition: border-color .22s ease, box-shadow .22s ease;
}
.coco-mo-card:hover { border-color: rgba(201, 168, 76, 0.42); box-shadow: 0 14px 38px rgba(0, 0, 0, 0.35); }

.coco-mo-card-top {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 18px;
  align-items: center;
}
.coco-mo-img {
  width: 84px; height: 84px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(201, 168, 76, 0.2);
  display: block;
}
.coco-mo-img--ph { background: rgba(201, 168, 76, 0.08); }
.coco-mo-info { min-width: 0; }
.coco-mo-item-name {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  color: #F5EDD6;
  margin: 0 0 4px;
  line-height: 1.2;
}
.coco-mo-more {
  font-size: 13px;
  color: rgba(245, 237, 214, 0.5);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
}
.coco-mo-meta {
  font-size: 13px;
  color: #C9A84C;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.coco-mo-status-col {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  flex-shrink: 0;
}
.coco-mo-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: #4A90E2;
  padding: 4px 0;
}
.coco-mo-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4A90E2;
  box-shadow: 0 0 8px rgba(74, 144, 226, 0.6);
}
.coco-mo-status--processing { color: #4A90E2; }
.coco-mo-status--processing .coco-mo-status-dot { background: #4A90E2; box-shadow: 0 0 8px rgba(74, 144, 226, 0.6); }
.coco-mo-status--completed { color: #4CD964; }
.coco-mo-status--completed .coco-mo-status-dot { background: #4CD964; box-shadow: 0 0 8px rgba(76, 217, 100, 0.6); }
.coco-mo-status--on-hold, .coco-mo-status--pending { color: #E8A86A; }
.coco-mo-status--on-hold .coco-mo-status-dot, .coco-mo-status--pending .coco-mo-status-dot { background: #E8A86A; box-shadow: 0 0 8px rgba(232, 168, 106, 0.6); }
.coco-mo-status--cancelled, .coco-mo-status--failed, .coco-mo-status--refunded { color: #E26666; }
.coco-mo-status--cancelled .coco-mo-status-dot { background: #E26666; box-shadow: 0 0 8px rgba(226, 102, 102, 0.6); }

.coco-mo-track-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 999px;
  color: #C9A84C !important;
  text-decoration: none !important;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  background: rgba(201, 168, 76, 0.04);
  transition: background .2s ease, transform .18s ease;
}
.coco-mo-track-btn svg { width: 12px; height: 12px; }
.coco-mo-track-btn:hover { background: rgba(201, 168, 76, 0.14); transform: translateY(-1px); color: #E8C96A !important; }

/* Mini timeline */
.coco-mo-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 22px 0;
  padding: 16px 0;
  border-top: 1px solid rgba(201, 168, 76, 0.12);
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}
.coco-mo-step {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(11, 31, 8, 0.4);
  transition: background .2s ease;
}
.coco-mo-step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.25);
  color: rgba(245, 237, 214, 0.35);
  background: rgba(11, 31, 8, 0.6);
  flex-shrink: 0;
  transition: all .25s ease;
}
.coco-mo-step-icon svg { width: 16px; height: 16px; }
.coco-mo-step-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: rgba(245, 237, 214, 0.4);
  line-height: 1.2;
  margin-bottom: 2px;
}
.coco-mo-step-time {
  font-size: 10px;
  color: rgba(245, 237, 214, 0.45);
  line-height: 1.1;
}
.coco-mo-step > div:not(.coco-mo-step-icon) { display: flex; flex-direction: column; min-width: 0; }
.coco-mo-step--done .coco-mo-step-icon {
  border-color: #4CD964; color: #4CD964;
  box-shadow: 0 0 0 3px rgba(76, 217, 100, 0.15), 0 0 14px rgba(76, 217, 100, 0.35);
}
.coco-mo-step--done .coco-mo-step-label, .coco-mo-step--done .coco-mo-step-time { color: rgba(245, 237, 214, 0.85); }
.coco-mo-step--current .coco-mo-step-icon {
  border-color: #C9A84C; color: #E8C96A;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18), 0 0 16px rgba(201, 168, 76, 0.45);
}
.coco-mo-step--current .coco-mo-step-label { color: #E8C96A; }
.coco-mo-step--current .coco-mo-step-time { color: rgba(245, 237, 214, 0.85); }

.coco-mo-card-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.coco-mo-total-label {
  font-size: 11px; letter-spacing: 0.14em; color: rgba(245, 237, 214, 0.5);
  margin-bottom: 4px;
}
.coco-mo-total-value {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 24px; color: #C9A84C; font-weight: 500;
}
.coco-mo-invoice-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 999px;
  color: #C9A84C !important;
  text-decoration: none !important;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  background: rgba(201, 168, 76, 0.04);
  transition: background .2s ease, transform .18s ease;
}
.coco-mo-invoice-btn svg { width: 14px; height: 14px; }
.coco-mo-invoice-btn:hover { background: rgba(201, 168, 76, 0.14); transform: translateY(-1px); color: #E8C96A !important; }

.coco-mo-pagination { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
.coco-mo-page {
  padding: 10px 22px;
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 999px;
  color: #C9A84C !important;
  text-decoration: none !important;
  font-size: 12px; letter-spacing: 0.12em;
}
.coco-mo-page:hover { background: rgba(201, 168, 76, 0.1); }

.coco-mo-empty { padding: 60px 20px; text-align: center; color: rgba(245, 237, 214, 0.7); }
.coco-mo-shop-btn { display: inline-block; margin-top: 18px; padding: 12px 28px; background: linear-gradient(135deg, #C9A84C, #E8C96A); color: #0B1F08 !important; border-radius: 999px; font-weight: 700; letter-spacing: 0.12em; text-decoration: none !important; }

@media (max-width: 768px) {
  .coco-mo-title { font-size: 30px; }
  .coco-mo-card-top { grid-template-columns: 64px 1fr; }
  .coco-mo-img { width: 64px; height: 64px; }
  .coco-mo-status-col { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
  .coco-mo-timeline { grid-template-columns: 1fr; }
  .coco-mo-card-bottom { flex-direction: column; align-items: stretch; gap: 12px; }
}


/* v383 -- Add View Order button beside Track Shipment on my-orders cards. Reuses pill style; both buttons share .coco-mo-pill-btn. */
.coco-mo-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}
.coco-mo-pill-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 999px;
  color: #C9A84C !important;
  text-decoration: none !important;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  background: rgba(201, 168, 76, 0.04);
  white-space: nowrap;
  transition: background .2s ease, transform .18s ease, box-shadow .25s ease, border-color .2s ease, color .2s ease;
}
.coco-mo-pill-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.coco-mo-pill-btn:hover {
  background: rgba(201, 168, 76, 0.14);
  border-color: rgba(201, 168, 76, 0.8);
  color: #E8C96A !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201, 168, 76, 0.25), 0 0 0 1px rgba(201, 168, 76, 0.18) inset;
}
/* Inherit-merge: existing .coco-mo-track-btn rules still apply but pill-btn handles the unified style */
.coco-mo-view-btn, .coco-mo-track-btn { /* alias to pill style */ }

/* Mobile: stack the two buttons */
@media (max-width: 640px) {
  .coco-mo-btns { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
  .coco-mo-pill-btn { justify-content: center; }
  .coco-mo-status-col { align-items: stretch !important; width: 100%; }
}


/* v389 -- Align View Order + Track Shipment side-by-side with perfect height match. */
.order-card .oc-actions .coco-btn-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 12px;
  flex-wrap: nowrap;
}
/* Force identical box model on both buttons regardless of A vs BUTTON */
.order-card .oc-actions .coco-btn-row .oc-track-btn,
.order-card .oc-actions .coco-btn-row .coco-view-order-btn {
  line-height: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap;
  text-decoration: none !important;
}
.order-card .oc-actions .coco-btn-row .coco-view-order-btn,
.order-card .oc-actions .coco-btn-row > button.oc-track-btn,
.order-card .oc-actions .coco-btn-row > a.oc-track-btn {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
@media (max-width: 640px) {
  .order-card .oc-actions .coco-btn-row { flex-direction: column; align-items: stretch; }
  .order-card .oc-actions .coco-btn-row > * { width: 100%; }
}


/* v390 -- Track Order action card removed; remaining 2 cards (Download Invoice + Need Help?) sit in a 2-column grid. */
.coco-vo-actions-row {
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 900px) {
  .coco-vo-actions-row { grid-template-columns: 1fr !important; }
}



}


/* v396 -- Real photographic leaf backgrounds (better Unsplash choices). Top-right of Order Details = dark tropical foliage; right of Billing = botanical leafy plant. Mask-gradient blends edges into the card. */
.coco-vo-deco--leaves {
  background-image: url('https://images.unsplash.com/photo-1502920917128-1aa500764cbd?auto=format&fit=crop&w=900&q=85');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.95) 25%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to left, rgba(0,0,0,0.95) 25%, rgba(0,0,0,0) 100%);
  opacity: 0.62;
  filter: brightness(0.7) contrast(1.05) saturate(0.95);
  width: 55%;
  max-width: 540px;
  height: 90%;
  max-height: 380px;
  top: 0; right: 0;
}
.coco-vo-deco--leaves svg { display: none !important; }

.coco-vo-bill-deco {
  background-image: url('https://images.unsplash.com/photo-1463936575829-25148e1db1b8?auto=format&fit=crop&w=600&q=85');
  background-size: contain;
  background-position: bottom right;
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 120% 110% at center right, rgba(0,0,0,1) 35%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0) 90%);
          mask-image: radial-gradient(ellipse 120% 110% at center right, rgba(0,0,0,1) 35%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0) 90%);
  opacity: 0.85;
  filter: brightness(0.88) saturate(1.05);
}
.coco-vo-bill-deco svg { display: none !important; }

@media (max-width: 900px) {
  .coco-vo-deco--leaves { opacity: 0.4; max-width: 240px; }
  .coco-vo-bill-deco { display: none !important; }
}


/* v397 -- Revert photo backgrounds (Unsplash random photos didn't match the reference). Restore inline SVG visibility. To get the EXACT leaf photo from your reference, upload it to /wp-admin/upload.php and share the URL. */
.coco-vo-deco--leaves {
  background-image: none !important;
  width: 50% !important;
  max-width: 460px !important;
  height: 70% !important;
  max-height: 320px !important;
  opacity: 0.85 !important;
  filter: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}
.coco-vo-deco--leaves svg { display: block !important; width: 100% !important; height: 100% !important; }
.coco-vo-bill-deco {
  background-image: none !important;
  opacity: 0.95 !important;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5)) !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}
.coco-vo-bill-deco svg { display: block !important; width: 100% !important; height: 100% !important; }


/* v400 -- Cinematic real botanical photo backgrounds. Dark moody tropical leaves close-up for top-right of Order Details; elegant botanical plant for Billing card right. */
.coco-vo-deco--leaves {
  background-image: url('https://images.unsplash.com/photo-1542838686-37da4a9fd1b3?auto=format&fit=crop&w=900&q=85') !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.95) 25%, rgba(0,0,0,0) 100%) !important;
          mask-image: linear-gradient(to left, rgba(0,0,0,0.95) 25%, rgba(0,0,0,0) 100%) !important;
  opacity: 0.6 !important;
  filter: brightness(0.7) contrast(1.05) saturate(0.95) hue-rotate(-5deg) !important;
  width: 55% !important;
  max-width: 540px !important;
  height: 90% !important;
  max-height: 380px !important;
}
.coco-vo-deco--leaves svg { display: none !important; }

.coco-vo-bill-deco {
  background-image: url('https://images.unsplash.com/photo-1564325724739-bae0bd08762c?auto=format&fit=crop&w=600&q=85') !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  -webkit-mask-image: radial-gradient(ellipse 120% 110% at center right, rgba(0,0,0,1) 30%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0) 90%) !important;
          mask-image: radial-gradient(ellipse 120% 110% at center right, rgba(0,0,0,1) 30%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0) 90%) !important;
  opacity: 0.78 !important;
  filter: brightness(0.85) saturate(1.05) !important;
}
.coco-vo-bill-deco svg { display: none !important; }

@media (max-width: 900px) {
  .coco-vo-deco--leaves { opacity: 0.35 !important; max-width: 240px !important; }
  .coco-vo-bill-deco { display: none !important; }
}


/* v401 -- Real cinematic leaf photo (user-uploaded) for Order Details top-right. Same image reused for Billing card right with different crop/mask. */
.coco-vo-deco--leaves {
  background-image: url('https://4h5.b15.myftpupload.com/wp-content/uploads/2026/05/ChatGPT-Image-May-21-2026-08_04_21-PM.png') !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%) !important;
          mask-image: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%) !important;
  opacity: 0.82 !important;
  filter: brightness(0.92) contrast(1.05) saturate(1) !important;
  width: 55% !important;
  max-width: 540px !important;
  height: 90% !important;
  max-height: 380px !important;
  top: 0 !important;
  right: 0 !important;
}
.coco-vo-deco--leaves svg { display: none !important; }

.coco-vo-bill-deco {
  background-image: url('https://4h5.b15.myftpupload.com/wp-content/uploads/2026/05/ChatGPT-Image-May-21-2026-08_04_21-PM.png') !important;
  background-size: cover !important;
  background-position: top right !important;
  background-repeat: no-repeat !important;
  -webkit-mask-image: radial-gradient(ellipse 130% 110% at center right, rgba(0,0,0,1) 30%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0) 92%) !important;
          mask-image: radial-gradient(ellipse 130% 110% at center right, rgba(0,0,0,1) 30%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0) 92%) !important;
  opacity: 0.85 !important;
  filter: brightness(0.92) saturate(1.05) !important;
}
.coco-vo-bill-deco svg { display: none !important; }

@media (max-width: 900px) {
  .coco-vo-deco--leaves { opacity: 0.42 !important; max-width: 240px !important; }
  .coco-vo-bill-deco { display: none !important; }
}


/* v402 -- Constrain billing card leaf photo within rounded card boundary. */
.coco-vo-card--billing {
  overflow: hidden !important;
  border-radius: 22px !important;
}
.coco-vo-bill-deco {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 45% !important;
  max-width: 380px !important;
  height: auto !important;
  pointer-events: none !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%) !important;
          mask-image: linear-gradient(to left, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%) !important;
  opacity: 0.78 !important;
  filter: brightness(0.85) saturate(1.05) !important;
}
@media (max-width: 900px) {
  .coco-vo-bill-deco { display: none !important; }
}


/* ═══ UX POLISH v1 ═══ */
/* Product card hover lift + image zoom */
.product-card { transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), border-color .3s; will-change: transform; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(201,168,76,.25); }
.product-card .product-img-wrap, .product-card [class*="img-wrap"], .product-card figure { overflow: hidden; }
.product-card img { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.product-card:hover img { transform: scale(1.06); }

/* Nav active page indicator */
.nav-link { position: relative; }
.nav-link::after { content:''; position:absolute; left:50%; bottom:-6px; width:0; height:2px; background:var(--gold); transition:width .3s cubic-bezier(.16,1,.3,1), left .3s cubic-bezier(.16,1,.3,1); }
.nav-link:hover::after, .nav-link.is-active::after { width:100%; left:0; }
.nav-link.is-active { color: var(--gold); }

/* Breadcrumbs */
.coco-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(245,237,214,.45); margin-bottom:1.4rem; }
.coco-breadcrumb a { color:rgba(245,237,214,.65); text-decoration:none; transition:color .25s; }
.coco-breadcrumb a:hover { color:var(--gold); }
.coco-breadcrumb .sep { color:rgba(201,168,76,.5); }
.coco-breadcrumb .current { color:var(--gold); }

/* Related products */
.coco-related-section { padding:4rem 0 5rem; }
.coco-related-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:1100px){ .coco-related-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .coco-related-grid { grid-template-columns:repeat(2,1fr); gap:12px; } }
.coco-related-card { display:block; text-decoration:none; background:var(--c1,#142b11); border:1px solid rgba(201,168,76,.14); border-radius:14px; overflow:hidden; transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s, border-color .3s; }
.coco-related-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.35); border-color:rgba(201,168,76,.4); }
.coco-related-card .crc-img { aspect-ratio:1/1; overflow:hidden; background:#0d2009; }
.coco-related-card .crc-img img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.coco-related-card:hover .crc-img img { transform:scale(1.07); }
.coco-related-card .crc-body { padding:14px 16px 18px; }
.coco-related-card .crc-name { font-size:15px; font-weight:600; color:var(--cream,#F5EDD6); line-height:1.3; margin-bottom:6px; }
.coco-related-card .crc-price { font-size:14px; color:var(--gold,#C9A84C); font-weight:600; }


/* ═══ CARD ENRICH CSS ═══ */
.pc-count { font-size:11px; color:rgba(245,237,214,.5); letter-spacing:.04em; margin-left:5px; vertical-align:1px; }
.pc-was { font-size:12px; color:rgba(245,237,214,.38); margin-right:8px; text-decoration:line-through; font-weight:400; }
.pc-tags { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(201,168,76,.8); margin:2px 0 5px; }


/* ═══ CARD REDESIGN v1 ═══ */
.product-card .product-body { display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:16px 18px 18px; }
.product-card .product-category { order:1; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(201,168,76,.6); margin:0; }
.product-card .product-name { order:2; margin:0; font-size:17px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:44px; }
.product-card .pc-tags { order:3; margin:2px 0 0; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(245,237,214,.6); border:1px solid rgba(201,168,76,.28); padding:3px 10px; border-radius:999px; background:rgba(201,168,76,.06); }
.product-card .product-stars { order:4; margin:3px 0 0; font-size:13.5px; letter-spacing:2.5px; }
.product-card .pc-count { font-size:11px; letter-spacing:.03em; color:rgba(245,237,214,.5); margin-left:6px; }
.product-card .product-price { order:5; width:100%; margin-top:9px; padding-top:11px; border-top:1px solid rgba(201,168,76,.16); font-size:16px; font-weight:700; color:var(--gold,#C9A84C); display:flex; align-items:baseline; gap:8px; }
.product-card .pc-was { font-size:12.5px; font-weight:400; color:rgba(245,237,214,.38); margin:0; }
@media (max-width:600px){
  .product-card .product-body { padding:12px 13px 14px; gap:4px; }
  .product-card .product-name { font-size:14.5px; min-height:38px; }
  .product-card .product-price { font-size:14.5px; margin-top:6px; padding-top:8px; }
  .product-card .pc-tags { font-size:8.5px; padding:2px 8px; }
}


/* ═══ ACCURATE STARS (partial fill) ═══ */
.pc-stars { position:relative; display:inline-block; letter-spacing:2px; line-height:1; }
.pc-stars-bg { color:rgba(245,237,214,.42); }
.pc-stars-fg { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:var(--gold,#C9A84C); }
.pc-avg { font-size:11.5px; font-weight:600; color:rgba(245,237,214,.78); margin-left:7px; letter-spacing:0; }
.product-card .pc-count { margin-left:4px; }


/* ═══ BLOCKUI DARK v1 - kill white loading-overlay flash (Razorpay/checkout/cart) ═══ */
.blockUI.blockOverlay, .blockOverlay, .wc-block-components-spinner ~ .blockOverlay {
  background: rgba(11,31,8,0.72) !important;
  border-radius: 14px !important;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.blockUI.blockMsg, .blockMsg { color: var(--cream,#F5EDD6) !important; }


/* ═══ MOBILE FOOTER v1 - 2-column links, tighter spacing ═══ */
@media (max-width:600px){
  .site-footer { padding-top: 26px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 22px 18px !important; align-items: start !important; }
  .footer-grid > *:first-child { grid-column: 1 / -1 !important; }
  .footer-grid > .footer-newsletter { grid-column: 1 / -1 !important; }
  .footer-col h4 { margin-bottom: 11px !important; }
  .footer-col a { padding-top: 3px !important; padding-bottom: 3px !important; }
}

/* OUR STORY IMAGE FIX v1 */
.story-grid img{width:100%!important;height:480px!important;object-fit:cover!important;object-position:center 60%!important;border-radius:16px!important;display:block!important}
@media(max-width:600px){.story-grid img{height:300px!important}}


/* LIGHT-DARK PARITY v1 — render the dark brand identically in both OS modes */
html{color-scheme:dark!important}
:root{color-scheme:dark}


/* ===== MOBILE RESPONSIVE FIXES v1 ===== */
/* #1: hero "Scroll to explore" hint overlaps the rotating product card on touch screens — hide it there */
@media (max-width:1024px){ .scroll-hint{ display:none !important; } }
/* #2: lift floating buttons above the 66px sticky Add-to-Cart bar when it is open */
.coco-float-stack, #coco-ai-widget{ transition: bottom .25s ease; }
body.coco-satc-open .coco-float-stack, body.coco-satc-open #coco-ai-widget{ bottom: 84px !important; }


/* HERO MOBILE TOP-GAP FIX — top-align hero so content sits below header (was vertically centered in 100vh, leaving a big empty gap) */
@media (max-width:768px){ .hero-section{ align-items:flex-start !important; padding-top:74px !important; } }


/* MOBILE: show ~2 compact review cards per screen (was 1 big card at 80vw) */
@media (max-width:768px){
  .testimonials-grid{ gap:0.7rem !important; }
  .testimonial-card{ flex:0 0 41vw !important; padding:13px !important; border-radius:14px !important; }
  .testimonial-stars{ font-size:10.5px !important; letter-spacing:1px !important; }
  .testimonial-text{ font-size:11.5px !important; line-height:1.45 !important; margin-top:8px !important; }
  .testimonial-read-more{ font-size:10px !important; }
  .testimonial-author{ padding-top:10px !important; gap:8px !important; }
  .testimonial-avatar, .testimonial-avatar img{ width:32px !important; height:32px !important; min-width:32px !important; }
  .testimonial-author-info{ font-size:11.5px !important; }
  .testimonial-author-info *{ font-size:11px !important; }
  .testimonial-author-info img{ height:14px !important; width:auto !important; }
}


/* ===== REDESIGNED SORT-BY DROPDOWN (shop/catalog) — premium pill, gold accent, custom chevron ===== */
  .coco-sort-bar > label{ color:#C9A84C !important; font-size:11px !important; letter-spacing:2.5px !important; text-transform:uppercase !important; font-weight:500 !important; opacity:.9 !important; white-space:nowrap; }
  .coco-sort-bar select.coco-sort-sel{
    -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
    background-color:rgba(12,31,18,0.55) !important; color:#F5EDD6 !important;
    border:1px solid rgba(201,168,76,0.40) !important; border-radius:999px !important;
    height:42px !important; padding:0 44px 0 20px !important;
    font-size:13.5px !important; font-weight:500 !important; letter-spacing:.3px !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important; background-position:right 18px center !important; background-size:12px 12px !important;
    cursor:pointer !important; transition:border-color .22s, box-shadow .22s, background-color .22s !important;
  }
  .coco-sort-bar select.coco-sort-sel:hover{ border-color:rgba(201,168,76,0.75) !important; background-color:rgba(12,31,18,0.92) !important; }
  .coco-sort-bar select.coco-sort-sel:focus{ outline:none !important; border-color:#C9A84C !important; box-shadow:0 0 0 3px rgba(201,168,76,0.18) !important; }
  .coco-sort-bar select.coco-sort-sel option{ background:#0f2c1a !important; color:#F5EDD6 !important; }


/* ===== GLOW-UP BENEFIT CARDS — 2-up compact on phones (was 1 full-width per row) ===== */
@media (max-width:480px){
  .product-benefits-grid{ grid-template-columns:repeat(2,1fr) !important; gap:0.7rem !important; }
  .product-benefit-card{ padding:1rem !important; border-radius:14px !important; }
  .product-benefit-card__emoji{ font-size:1.6rem !important; margin-bottom:0.5rem !important; }
  .product-benefit-card__icon{ width:26px !important; height:26px !important; margin-bottom:0.5rem !important; }
  .product-benefit-card__text{ font-size:0.8rem !important; line-height:1.4 !important; }
}


/* ===== SIMPLE STEPS / HOW-TO — 2-up compact cards on phones (was 1 full-width per row) ===== */
@media (max-width:480px){
  .product-howto-grid{ grid-template-columns:repeat(2,1fr) !important; gap:0.7rem !important; }
  .product-howto-step{ padding:1rem 0.75rem !important; background:rgba(245,237,214,0.03) !important; border:1px solid rgba(201,168,76,0.08) !important; border-radius:14px !important; }
  .product-howto-step__num{ font-size:2rem !important; }
  .product-howto-step h3{ font-size:0.95rem !important; }
  .product-howto-step p{ font-size:0.78rem !important; line-height:1.5 !important; }
}


/* ===== PRODUCT REVIEW CAROUSEL — show full review on phones (was clamped to 5 lines/cut off) + wrap dots ===== */
@media (max-width:600px){
  .coco-rv-track{ align-items:flex-start !important; }
  .coco-rv-viewport, .coco-rv-track, .coco-rv-card, .coco-rv-card__box{ height:auto !important; }
  .coco-rv-text{ -webkit-line-clamp:unset !important; display:block !important; overflow:visible !important; max-height:none !important; }
  .coco-rv-dots{ flex-wrap:wrap !important; gap:6px !important; max-width:280px; margin-left:auto !important; margin-right:auto !important; }
}


/* ===== MOBILE/TABLET PERFORMANCE OPTIMIZATION ===== */
@media (max-width: 1024px){
  /* backdrop-filter (frosted glass) is very GPU-heavy on mobile — drop it (cards keep their solid/translucent bg) */
  *, *::before, *::after{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  /* custom JS cursor is pointless on touch devices */
  .cursor-dot, .cursor-ring, #cursor-dot, #cursor-ring{ display:none !important; }
  /* let the browser skip layout/paint AND pause animations for off-screen sections (big scroll-perf win) */
  .manifesto-section, .ingredients-section, .founder-section, .quiz-section, .gift-section,
  .testimonials-section, .reviews-section, .bestsellers-section, .product-benefits-section,
  .product-howto-section, .product-reviews-section, .related-section, .site-footer, footer{
    content-visibility:auto;
    contain-intrinsic-size: 1px 760px;
  }
}


/* ===== compositor hints — keep continuously-animating elements on the GPU layer (smoother) ===== */
.coco-cf-card, .coco-cf, .testimonials-grid, .coco-rv-track, .hero-badge{ will-change: transform; }


/* ===== LOADING SCREEN LOGO -> Poppins lowercase "cocomera." ===== */
#site-loader .loader-logo, .loader-logo{
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
  text-transform: lowercase !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}


/* ===== BIGGER MOBILE HEADER LOGO ===== */
@media (max-width:600px){
  .header-logo .logo-img{ width:182px !important; height:auto !important; }
}