:root{
  --bg: #0b0614; --panel: rgba(255,255,255,.06); --text:#f2f2f4; --muted:#b9b9c2;
  --accent: #8b5cf6; --accent2: #a78bfa; --gold:#f3c969;
  --line:rgba(255,255,255,.10); --shadow:0 14px 40px rgba(0,0,0,.45);
  --radius:18px; --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Poppins",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(196,29,29,.35), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(255,107,53,.25), transparent 55%),
    radial-gradient(900px 500px at 50% 110%, rgba(243,201,105,.10), transparent 60%),
    var(--bg);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:rgba(15,15,18,.72);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand-badge{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(196,29,29,.95),rgba(255,107,53,.90));box-shadow:0 10px 22px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.10)}
.brand h1{margin:0;font-size:15px;letter-spacing:.35px;font-weight:800}
.brand .sub{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}
.menu{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.menu a{padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);font-weight:700;font-size:13px}
.menu a:hover{border-color:rgba(243,201,105,.45);background:rgba(243,201,105,.06)}
.hero{padding:34px 0 18px}
.hero-grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:stretch}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-inner{padding:18px}
.ribbon{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(243,201,105,.35);background:rgba(243,201,105,.08);font-weight:800;font-size:12px}
.headline{margin:12px 0 10px;font-family:ui-serif,Georgia,"Times New Roman",Times,serif;font-size:40px;line-height:1.08;letter-spacing:.3px}
@media (max-width:520px){.headline{font-size:32px}}
.lede{color:var(--muted);font-size:15px;margin:0 0 12px}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pill{padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18);font-size:13px;font-weight:700}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(196,29,29,.95),rgba(255,107,53,.92));color:#101015;font-weight:900;box-shadow:0 12px 26px rgba(196,29,29,.22)}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{background:rgba(255,255,255,.06);color:var(--text);box-shadow:none}
.section{padding:18px 0}
.section h2{margin:0 0 10px;font-size:22px;font-weight:900;letter-spacing:.2px}
.section p{margin:10px 0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}
.prod{padding:14px}
.prod .tag{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.25px;padding:6px 10px;border-radius:999px;background:rgba(196,29,29,.18);border:1px solid rgba(196,29,29,.35)}
.prod h3{margin:10px 0 6px;font-size:16px;font-weight:900}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.kv div{padding:8px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.22);font-size:12px;color:var(--muted)}
.kv b{display:block;color:var(--text);font-size:12px}
.table-wrap{overflow:auto;border-radius:var(--radius);border:1px solid rgba(255,255,255,.10)}
table{width:100%;border-collapse:collapse;background:rgba(0,0,0,.18)}
th,td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;font-size:13px;vertical-align:top}
th{position:sticky;top:0;background:rgba(15,15,18,.92);font-weight:900}
tr:hover td{background:rgba(243,201,105,.05)}
.searchbar{display:flex;gap:10px;flex-wrap:wrap;padding:12px;border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);background:rgba(255,255,255,.04)}
.searchbar input,.searchbar select{flex:1;min-width:180px;padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.28);color:var(--text);outline:none;font-weight:700}
.searchbar input::placeholder{color:rgba(242,242,244,.55)}
.form{display:grid;gap:12px}
.form label{font-weight:900;font-size:13px}
.form input,.form textarea{width:100%;padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.28);color:var(--text);outline:none;font-weight:700}
.form textarea{min-height:140px;resize:vertical;font-weight:600}
.honey{display:none !important}
.footer{margin-top:24px;border-top:1px solid var(--line);background:rgba(0,0,0,.25)}
.footer-grid{display:grid;gap:14px;grid-template-columns:1.2fr .8fr;padding:18px 0}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}
.small{font-size:12px;color:var(--muted)}
hr.sep{border:0;border-top:1px solid rgba(255,255,255,.08);margin:14px 0}
.breadcrumbs{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.breadcrumbs a{color:var(--muted);text-decoration:underline dotted rgba(255,255,255,.25)}
.notice{padding:12px 12px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--muted);font-size:13px}

/* Grouped table headings */
.group-row td{
  background: rgba(196,29,29,.16) !important;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.group-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(243,201,105,.35);
  background:rgba(243,201,105,.10);
  font-weight:900;letter-spacing:.3px;
}

/* Lavender theme reinforcement */
.topbar{background: linear-gradient(90deg, rgba(139,92,246,.22), rgba(167,139,250,.12));}
.ribbon{background: rgba(139,92,246,.22) !important; border-color: rgba(167,139,250,.35) !important;}
.btn{background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(167,139,250,.92)) !important;}
.btn.secondary{background: rgba(255,255,255,.06) !important; border-color: rgba(167,139,250,.35) !important;}
.pill,.group-pill{border-color: rgba(167,139,250,.35) !important; background: rgba(139,92,246,.12) !important;}
.group-row td{background: rgba(139,92,246,.14) !important;}


/* ==========================================
   SOFT PASTEL PINK THEME (NO BLACK)
   ========================================== */

html, body{
    background:#ffeaf4 !important;
    background-image:none !important;
    color:#4a2c3a !important;
}

/* Remove dark gradients */
.section, .container{
    background:transparent !important;
}

/* Topbar */
.topbar{
    background:#ffc1dc !important;
}

/* Cards */
.card{
    background:#fff5fa !important;
    border:1px solid #ffb3d6 !important;
}

/* Headings */
h1,h2,h3,h4{
    color:#c21875 !important;
}

/* Buttons */
.btn{
    background:#ff69b4 !important;
    color:white !important;
    border:none !important;
}

.btn.secondary{
    background:#ff85c1 !important;
}

/* Pills */
.pill,.group-pill{
    background:#ffe0ef !important;
    border:1px solid #ff99cc !important;
    color:#b0125b !important;
}

/* Tables */
table{
    background:#fff5fa !important;
}

thead th{
    background:#ff99cc !important;
    color:white !important;
}

tr{
    background:#fff5fa !important;
}

/* Footer */
.footer{
    background:#ffd6eb !important;
    border-top:2px solid #ff99cc !important;
}

/* Links */
a{
    color:#d63384 !important;
}

a:hover{
    color:#a61e63 !important;
}


/* ==========================================
   TEXT CONTRAST FIX FOR SOFT PINK THEME
   ========================================== */

html, body{
    color:#3a1f2d !important;
}

/* Main paragraph text */
p, .small, li, td{
    color:#4a2c3a !important;
}

/* Strong headings */
h1, h2, h3, h4{
    color:#8b004f !important;
}

/* Table body text */
tbody td{
    color:#3a1f2d !important;
}

/* Navbar links */
.topbar a{
    color:#8b004f !important;
}

/* Footer text */
.footer, .footer p, .footer div{
    color:#4a2c3a !important;
}

/* Ensure card text visible */
.card{
    color:#3a1f2d !important;
}


/* ==========================================
   HIGH CONTRAST TEXT FIX (CLEAR READABILITY)
   ========================================== */

html, body{
    color:#2b1b2b !important;
}

/* Paragraphs & small text */
p, .small, li, td{
    color:#2b1b2b !important;
}

/* Headings – rich rose */
h1, h2, h3, h4{
    color:#7a003c !important;
}

/* Navbar links */
.topbar a{
    color:#7a003c !important;
    font-weight:600;
}

/* Table text */
tbody td{
    color:#2b1b2b !important;
}

/* Footer text */
.footer, .footer p, .footer div{
    color:#2b1b2b !important;
}

/* Ensure all card content visible */
.card{
    color:#2b1b2b !important;
}


/* ==========================================
   BRIGHT RED TEXT + MENU IMPROVEMENTS
   ========================================== */

/* All main content text */
html, body,
p, .small, li, td, span, div {
    color:#d60000 !important;   /* bright red */
}

/* Headings stronger red */
h1, h2, h3, h4 {
    color:#b30000 !important;
}

/* Product titles */
.card h3 {
    color:#a00000 !important;
    font-weight:700 !important;
}

/* Navigation links default */
.topbar a {
    color:#d60000 !important;
    font-weight:600 !important;
}

/* Hover effect – change to purple for contrast */
.topbar a:hover {
    color:#6a00d6 !important;
}

/* Active page highlight */
.topbar a.active,
.topbar a[aria-current="page"] {
    background:#ffd6e5 !important;
    color:#000000 !important;
    padding:6px 12px;
    border-radius:20px;
}


/* ==========================================
   PLEASANT GREEN TEXT THEME
   ========================================== */

/* Main content text */
html, body,
p, .small, li, td, span, div {
    color:#1f7a4d !important;   /* pleasant green */
}

/* Headings slightly darker green */
h1, h2, h3, h4 {
    color:#145c38 !important;
}

/* Product titles */
.card h3 {
    color:#0f4d2e !important;
    font-weight:700 !important;
}

/* Navigation links */
.topbar a {
    color:#1f7a4d !important;
    font-weight:600 !important;
}

/* Hover effect – teal */
.topbar a:hover {
    color:#0a8f6a !important;
}

/* Active page highlight */
.topbar a.active,
.topbar a[aria-current="page"] {
    background:#d9f5e8 !important;
    color:#0f4d2e !important;
    padding:6px 12px;
    border-radius:20px;
}


/* ==========================================
   MENU ITEMS AS BUTTONS
   ========================================== */

.topbar .menu a {
    display:inline-block;
    padding:8px 16px;
    margin:4px;
    background:#d9f5e8;
    border:2px solid #1f7a4d;
    border-radius:25px;
    text-decoration:none;
    font-weight:600;
    transition:all 0.25s ease;
}

/* Hover effect */
.topbar .menu a:hover {
    background:#1f7a4d;
    color:#ffffff !important;
    transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

/* Active (current page) highlight */
.topbar .menu a.active,
.topbar .menu a[aria-current="page"] {
    background:#145c38;
    color:#ffffff !important;
    border-color:#145c38;
}

/* USP table */
.usp-table{width:100%;border-collapse:collapse}
.usp-table th,.usp-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.14);vertical-align:top}
.usp-table th{text-align:left}
