/* ═══════════════════════════════════════════════
   KOKO LABS — PASTE THIS INTO:
   Appearance → Customize → Additional CSS
   ═══════════════════════════════════════════════ */

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

:root {
  --bg: #0c0c0b;
  --surf: #141413;
  --surf2: #1d1d1b;
  --w: #f0ede8;
  --mu: #69685f;
  --mu2: #3f3e3a;
  --bord: rgba(255,255,255,0.07);
  --bord2: rgba(255,255,255,0.14);
  --gold: #c8b87a;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', sans-serif;
}

/* ── BASE ── */
body, .site { background: #0c0c0b !important; color: #f0ede8 !important; font-family: 'Inter', sans-serif !important; }
a { color: #c8b87a !important; }
.site-main, .site-content, .content-area, .hentry, .page-content, .entry-content, article { background: #0c0c0b !important; color: #f0ede8 !important; }
.site-main { padding: 0 !important; margin: 0 !important; }

/* ── HEADER / NAV ── */
.site-header { background: #0c0c0b !important; border-bottom: 0.5px solid rgba(255,255,255,0.07) !important; padding: 0 40px !important; }
.site-header .col-full { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 64px !important; padding: 0 !important; }
.site-branding img { height: 34px !important; width: auto !important; filter: invert(1) brightness(0.82) !important; }
.main-navigation ul { list-style: none !important; display: flex !important; gap: 28px !important; margin: 0 !important; padding: 0 !important; background: none !important; }
.main-navigation ul li { border: none !important; background: none !important; }
.main-navigation ul li a { font-size: 11px !important; color: #69685f !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; font-family: 'Inter', sans-serif !important; text-decoration: none !important; background: none !important; padding: 0 !important; }
.main-navigation ul li a:hover { color: #f0ede8 !important; }
.site-header-cart .cart-contents { background: #f0ede8 !important; color: #0c0c0b !important; font-size: 10px !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; padding: 0 16px !important; height: 36px !important; border-radius: 2px !important; display: flex !important; align-items: center !important; font-weight: 500 !important; }

/* ── REVIEWS ── */
.koko-reviews-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
.koko-review-card { background: #141413 !important; border: 0.5px solid rgba(255,255,255,0.07) !important; border-radius: 3px !important; padding: 22px !important; }
.koko-stars { color: #c8b87a !important; font-size: 14px !important; margin-bottom: 12px !important; display: block !important; letter-spacing: 2px !important; }
.koko-review-text { font-size: 13px !important; color: #69685f !important; line-height: 1.75 !important; margin-bottom: 12px !important; font-style: italic !important; font-family: 'Cormorant Garamond', Georgia, serif !important; display: block !important; }
.koko-review-author { font-size: 10px !important; color: #3f3e3a !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; }

/* ── IMPORTANT INFO ── */
.koko-info-section { background: #141413 !important; padding: 48px 40px !important; border-top: 0.5px solid rgba(255,255,255,0.07) !important; }
.koko-info-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 28px !important; margin-bottom: 28px !important; }
.koko-info-block { border-top: 2px solid #c8b87a !important; padding-top: 16px !important; }
.koko-info-label { font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #f0ede8 !important; margin-bottom: 10px !important; display: block !important; }
.koko-info-text { font-size: 11px !important; color: #69685f !important; line-height: 1.85 !important; margin: 0 !important; }
.koko-info-footer { border-top: 0.5px solid rgba(255,255,255,0.07) !important; padding-top: 18px !important; display: flex !important; flex-wrap: wrap !important; gap: 16px !important; justify-content: space-between !important; }
.koko-info-footer span { font-size: 10px !important; color: #3f3e3a !important; }

/* ── RUO BOX ── */
.koko-ruo-wrap { padding: 24px 40px 0 !important; background: #0c0c0b !important; }
.koko-ruo-box { background: #141413 !important; border: 0.5px solid rgba(255,255,255,0.07) !important; border-radius: 3px !important; padding: 20px 24px !important; display: flex !important; gap: 14px !important; align-items: flex-start !important; }
.koko-ruo-icon { font-size: 18px !important; color: #69685f !important; flex-shrink: 0 !important; }
.koko-ruo-box p { font-size: 11px !important; color: #69685f !important; line-height: 1.8 !important; margin: 0 !important; }
.koko-ruo-box strong { color: #f0ede8 !important; font-weight: 500 !important; }

/* ── FDA BAR ── */
.koko-fda-bar { background: #0f0f0e !important; border-top: 0.5px solid rgba(255,255,255,0.07) !important; padding: 14px 40px !important; margin-top: 20px !important; }
.koko-fda-bar p { font-size: 10px !important; color: #3f3e3a !important; line-height: 1.7 !important; text-align: center !important; margin: 0 !important; }

/* ── SECTIONS ── */
.koko-section { padding: 48px 40px !important; border-bottom: 0.5px solid rgba(255,255,255,0.07) !important; background: #0c0c0b !important; }
.koko-section-head { display: flex !important; justify-content: space-between !important; align-items: baseline !important; margin-bottom: 28px !important; }
.koko-section-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 26px !important; font-weight: 300 !important; color: #f0ede8 !important; }
.koko-section-link { font-size: 10px !important; color: #69685f !important; text-decoration: none !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; }

/* ── CATEGORY CARDS ── */
.koko-cat-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
.koko-cat-card { background: #141413 !important; border: 0.5px solid rgba(255,255,255,0.07) !important; border-radius: 3px !important; padding: 24px 20px !important; display: block !important; text-decoration: none !important; }
.koko-cat-card:hover { border-color: rgba(255,255,255,0.14) !important; background: #1d1d1b !important; }
.koko-cat-icon { font-size: 18px !important; margin-bottom: 12px !important; display: block !important; }
.koko-cat-name { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 17px !important; font-weight: 400 !important; color: #f0ede8 !important; margin-bottom: 5px !important; display: block !important; }
.koko-cat-sub { font-size: 10px !important; color: #69685f !important; line-height: 1.6 !important; }

/* ── TRUST ROW ── */
.koko-trust-row { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; border-top: 0.5px solid rgba(255,255,255,0.07) !important; }
.koko-trust-item { padding: 20px 16px !important; border-right: 0.5px solid rgba(255,255,255,0.07) !important; text-align: center !important; }
.koko-trust-item:last-child { border-right: none !important; }
.koko-trust-icon { font-size: 20px !important; margin-bottom: 10px !important; display: block !important; }
.koko-trust-name { font-size: 11px !important; font-weight: 500 !important; color: #f0ede8 !important; margin-bottom: 4px !important; display: block !important; }
.koko-trust-sub { font-size: 10px !important; color: #69685f !important; display: block !important; }

/* ── HERO ── */
.koko-hero { padding: 64px 40px 0 !important; border-bottom: 0.5px solid rgba(255,255,255,0.07) !important; background: #0c0c0b !important; }
.koko-hero-grid { display: grid !important; grid-template-columns: 1.1fr 0.9fr !important; gap: 48px !important; align-items: start !important; }
.koko-eyebrow { font-size: 9px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: #69685f !important; margin-bottom: 18px !important; display: block !important; }
.koko-hero-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 58px !important; font-weight: 300 !important; line-height: 1.02 !important; margin-bottom: 20px !important; color: #f0ede8 !important; }
.koko-hero-title em { font-style: italic !important; color: #69685f !important; }
.koko-hero-body { font-size: 12px !important; color: #69685f !important; line-height: 1.9 !important; margin-bottom: 28px !important; }
.koko-hero-ctas { display: flex !important; gap: 10px !important; margin-bottom: 52px !important; }
.koko-stats { padding-top: 6px !important; }
.koko-stat { padding: 18px 0 !important; border-bottom: 0.5px solid rgba(255,255,255,0.07) !important; }
.koko-stat:first-child { border-top: 0.5px solid rgba(255,255,255,0.07) !important; }
.koko-stat-num { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 30px !important; font-weight: 300 !important; color: #f0ede8 !important; margin-bottom: 2px !important; display: block !important; }
.koko-stat-label { font-size: 9px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #69685f !important; display: block !important; }

/* ── HIGHLIGHTS ── */
.koko-highlights-section { background: #0c0c0b !important; }
.koko-highlights-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 52px !important; align-items: start !important; }
.koko-highlight-points { display: flex !important; flex-direction: column !important; gap: 20px !important; margin-top: 20px !important; }
.koko-highlight-point { display: flex !important; gap: 14px !important; align-items: flex-start !important; }
.koko-highlight-dot { width: 4px !important; height: 4px !important; min-width: 4px !important; background: #c8b87a !important; border-radius: 50% !important; margin-top: 8px !important; display: inline-block !important; flex-shrink: 0 !important; }
.koko-highlight-title { font-size: 13px !important; font-weight: 500 !important; color: #f0ede8 !important; margin-bottom: 3px !important; display: block !important; }
.koko-highlight-sub { font-size: 12px !important; color: #69685f !important; line-height: 1.65 !important; }
.koko-highlights-right { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.koko-stat-card { background: #1d1d1b !important; border: 0.5px solid rgba(255,255,255,0.07) !important; border-radius: 3px !important; padding: 22px 18px !important; text-align: center !important; }
.koko-stat-card-num { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 28px !important; font-weight: 300 !important; color: #f0ede8 !important; margin-bottom: 4px !important; display: block !important; }
.koko-stat-card-label { font-size: 10px !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; color: #69685f !important; line-height: 1.4 !important; display: block !important; }

/* ── AGE GATE MODAL ── */
.koko-modal-overlay { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,0.92) !important; z-index: 99999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; }
.koko-modal-box { background: #141413 !important; border: 0.5px solid rgba(255,255,255,0.14) !important; border-radius: 4px !important; padding: 48px 40px !important; max-width: 480px !important; width: 100% !important; text-align: center !important; }
.koko-modal-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 26px !important; font-weight: 300 !important; color: #f0ede8 !important; margin-bottom: 14px !important; }
.koko-modal-body { font-size: 12px !important; color: #69685f !important; line-height: 1.75 !important; margin-bottom: 28px !important; }
.koko-modal-checks { text-align: left !important; margin-bottom: 24px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.koko-modal-check { display: flex !important; align-items: flex-start !important; gap: 12px !important; cursor: pointer !important; font-size: 12px !important; color: #69685f !important; line-height: 1.6 !important; }
.koko-modal-btn { background: #f0ede8 !important; color: #0c0c0b !important; border: none !important; padding: 13px 32px !important; font-size: 11px !important; letter-spacing: 0.09em !important; cursor: pointer !important; border-radius: 2px !important; font-family: 'Inter', sans-serif !important; text-transform: uppercase !important; font-weight: 500 !important; width: 100% !important; margin-bottom: 14px !important; }
.koko-modal-exit { font-size: 10px !important; color: #69685f !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; text-decoration: none !important; display: block !important; cursor: pointer !important; }

/* ── BUTTONS ── */
.button, .woocommerce a.button, .woocommerce button.button, input[type="submit"], .single_add_to_cart_button { background: #f0ede8 !important; color: #0c0c0b !important; border: none !important; border-radius: 2px !important; font-family: 'Inter', sans-serif !important; font-size: 10px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-weight: 500 !important; padding: 11px 22px !important; }
.button.alt, .woocommerce a.button.alt { background: transparent !important; color: #f0ede8 !important; border: 0.5px solid rgba(255,255,255,0.14) !important; }

/* ── WOOCOMMERCE PRODUCTS ── */
.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; margin: 0 !important; }
.woocommerce ul.products li.product { background: #141413 !important; border: 0.5px solid rgba(255,255,255,0.07) !important; border-radius: 3px !important; padding: 0 !important; margin: 0 !important; width: 100% !important; float: none !important; }
.woocommerce ul.products li.product:hover { border-color: rgba(255,255,255,0.14) !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 16px !important; font-weight: 400 !important; color: #f0ede8 !important; padding: 14px 16px 3px !important; }
.woocommerce ul.products li.product .price { color: #c8b87a !important; font-size: 14px !important; font-weight: 500 !important; padding: 0 16px 14px !important; display: block !important; }
.woocommerce ul.products li.product a img { background: #1d1d1b !important; margin: 0 !important; }

/* ── FOOTER ── */
.site-footer { background: #141413 !important; border-top: 0.5px solid rgba(255,255,255,0.07) !important; padding: 0 !important; }
.site-footer .col-full { padding: 32px 40px !important; }
.koko-footer-logo { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 28px !important; padding-bottom: 22px !important; border-bottom: 0.5px solid rgba(255,255,255,0.07) !important; }
.koko-footer-logo span { font-size: 9px !important; color: #69685f !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; }
.koko-footer-cols { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; margin-bottom: 24px !important; }
.koko-footer-col-title { font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #f0ede8 !important; margin-bottom: 12px !important; display: block !important; }
.koko-footer-col a { display: block !important; font-size: 11px !important; color: #69685f !important; text-decoration: none !important; margin-bottom: 7px !important; }
.koko-footer-col a:hover { color: #f0ede8 !important; }
.koko-footer-bottom { border-top: 0.5px solid rgba(255,255,255,0.07) !important; padding-top: 16px !important; display: flex !important; justify-content: space-between !important; }
.koko-footer-bottom p { font-size: 10px !important; color: #3f3e3a !important; margin: 0 !important; }

/* ── TICKER ── */
.koko-ticker { background: #111110 !important; border-bottom: 0.5px solid rgba(255,255,255,0.07) !important; padding: 9px 0 !important; overflow: hidden !important; white-space: nowrap !important; }
.koko-ticker-track { display: inline-block !important; animation: koko-tick 36s linear infinite !important; }
@keyframes koko-tick { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.koko-ticker span { font-size: 9px !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; margin-right: 22px !important; color: #69685f !important; }
.koko-ticker b { color: #c8b87a !important; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .koko-hero-grid, .koko-highlights-grid { grid-template-columns: 1fr !important; }
  .koko-hero-title { font-size: 42px !important; }
  .koko-reviews-grid, .koko-info-grid { grid-template-columns: 1fr !important; }
  .koko-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .koko-trust-row { grid-template-columns: repeat(2, 1fr) !important; }
  .koko-footer-cols { grid-template-columns: repeat(2, 1fr) !important; }
  .koko-section, .koko-info-section, .koko-ruo-wrap, .koko-fda-bar, .koko-hero { padding-left: 20px !important; padding-right: 20px !important; }
  .site-footer .col-full { padding: 24px 20px !important; }
  .site-header { padding: 0 20px !important; }
}
@media (max-width: 480px) {
  .koko-cat-grid, .woocommerce ul.products { grid-template-columns: 1fr !important; }
  .koko-highlights-right { grid-template-columns: 1fr 1fr !important; }
  .koko-footer-cols { grid-template-columns: 1fr !important; }
}

/* ══ FIX HEADER STACKING ════════════════════════════════════════════════ */
.site-header .col-full,
.site-header .site-branding,
.site-header .main-navigation,
.site-header .site-header-cart,
.storefront-primary-navigation { display: none !important; }

.koko-header-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 64px !important;
    padding: 0 40px !important;
}
.koko-logo-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}
.koko-nav { display: flex !important; flex-direction: row !important; }
.koko-nav-list {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    gap: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.koko-nav-list li {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}
.koko-nav-list li::before { display: none !important; content: none !important; }
.koko-nav-list li a {
    display: inline !important;
    padding: 0 !important;
    font-size: 11px !important;
    color: #69685f !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    font-family: 'Inter', sans-serif !important;
    text-decoration: none !important;
    background: none !important;
}
.koko-nav-list li a:hover { color: #f0ede8 !important; }
.koko-header-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

/* ══ LOGO FIX ══════════════════════════════════════════════════════════ */
.koko-logo-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
}
.koko-logo-mark { display: block !important; flex-shrink: 0 !important; }
.koko-logo-name {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 13px !important;
    letter-spacing: 0.26em !important;
    color: #f0ede8 !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    display: block !important;
    line-height: 1 !important;
}
.koko-logo-pipe, .koko-logo-ruo, .koko-logo-text { display: none !important; }

/* ══ REPLACE GOLD — softer, more legible ══════════════════════════════ */
.koko-stars { color: #a8a49a !important; }
.koko-highlight-dot { background: #a8a49a !important; }
.koko-info-block { border-top-color: #a8a49a !important; }
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: #f0ede8 !important; }
.koko-stat-num, .koko-stat-card-num { color: #f0ede8 !important; }

/* ══ LEGIBILITY ════════════════════════════════════════════════════════ */
.koko-hero-body,
.koko-highlight-sub,
.koko-info-text,
.koko-cat-sub,
.koko-trust-sub,
.koko-review-text,
.koko-ruo-box p { color: #8a8880 !important; font-size: 13px !important; }
.koko-stat-label { color: #8a8880 !important; font-size: 10px !important; letter-spacing: 0.12em !important; }
.koko-trust-name { color: #f0ede8 !important; font-size: 12px !important; }
.koko-section-title { color: #f0ede8 !important; }
.koko-eyebrow { color: #8a8880 !important; }

/* ══ BUTTONS ═══════════════════════════════════════════════════════════ */
.button, .woocommerce a.button, .woocommerce button.button,
input[type="submit"], .single_add_to_cart_button {
    background: #f0ede8 !important;
    color: #0c0c0b !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    border-radius: 2px !important;
}
.button.alt, .woocommerce a.button.alt {
    background: transparent !important;
    color: #f0ede8 !important;
    border: 0.5px solid rgba(255,255,255,0.25) !important;
}