/* ============================================================ King Skunk — Light theme overrides (shared: index5.php, product5.php) Base (inline) styles are DARK. These rules apply only when . Toggle handled by assets/theme.js ============================================================ */ /* theme toggle icon swap (default = dark → show moon) */ .ks-theme-toggle .ic-sun{display:none} .ks-theme-toggle .ic-moon{display:block} html[data-theme="light"] .ks-theme-toggle .ic-sun{display:block} html[data-theme="light"] .ks-theme-toggle .ic-moon{display:none} /* ---- design tokens ---- */ html[data-theme="light"]{ --bg:#eef2e8; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f3f7ee; --cream:#16281c; --cream-dim:#41513f; --muted:#6a7a66; --gold:#b8933f; --gold-2:#8a6d23; --gold-soft:rgba(184,147,63,.14); --line:rgba(15,50,25,.16); --line-soft:rgba(15,50,25,.09); --shadow:0 20px 44px rgba(20,40,22,.12); } /* ---- base surfaces ---- */ html[data-theme="light"] body{ background: radial-gradient(1100px 650px at 82% -8%, rgba(184,147,63,.08), transparent 55%), radial-gradient(900px 600px at -10% 8%, rgba(31,107,57,.09), transparent 55%), linear-gradient(180deg,#f2f6ec 0%,#e9efe1 100%); } html[data-theme="light"] .announce{background:linear-gradient(90deg,#e8f1e2,#dcebd3,#e8f1e2);border-bottom-color:var(--line-soft)} html[data-theme="light"] .nav{background:rgba(255,255,255,.9);border-bottom-color:var(--line)} html[data-theme="light"] .feature-band{background:linear-gradient(180deg,#eef3e8,#e7eede);border-bottom-color:var(--line)} html[data-theme="light"] .feature{background:#ffffff} html[data-theme="light"] .quality{background:linear-gradient(180deg,#eaf1e2,#f2f6ec)} html[data-theme="light"] .cta{background:radial-gradient(700px 400px at 80% 0%, rgba(184,147,63,.10), transparent 60%),linear-gradient(180deg,#eaf1e2,#eef2e8)} html[data-theme="light"] .cta-card{background:#ffffff} html[data-theme="light"] .footer{background:#e7eede;border-top-color:var(--line)} html[data-theme="light"] .cart-panel{background:linear-gradient(180deg,#ffffff,#f4f7ef)} html[data-theme="light"] .checkout-dialog{background:linear-gradient(180deg,#ffffff,#f4f7ef)} html[data-theme="light"] .toast{background:linear-gradient(180deg,#ffffff,#eef4e6)} html[data-theme="light"] .qinput, html[data-theme="light"] .field, html[data-theme="light"] .textarea{background:#ffffff} html[data-theme="light"] .shop-closed-box{background:#ffffff} /* ---- chips/tags that sit over dark product photos: keep text light ---- */ html[data-theme="light"] .p-tag{color:#e6ce8f} html[data-theme="light"] .p-fav{color:#efe4bd} html[data-theme="light"] .gallery .glabel{color:#e6ce8f} html[data-theme="light"] .gnav button{color:#f3ecd7} /* ---- hero is a dark photo section in both themes → keep its text light ---- */ html[data-theme="light"] .hero .eyebrow{color:#e6ce8f} html[data-theme="light"] .hero .eyebrow::before{background:#c9a24b} html[data-theme="light"] .hero h1{color:#ffffff} html[data-theme="light"] .hero h1 .accent{background:linear-gradient(90deg,#e6ce8f,#c9a24b);-webkit-background-clip:text;background-clip:text;color:transparent} html[data-theme="light"] .hero p.lead{color:#e9f0e3} html[data-theme="light"] .hero .btn-ghost{color:#ffffff;border-color:rgba(255,255,255,.5)} html[data-theme="light"] .hero-badge{background:rgba(10,26,16,.82);border-color:#c9a24b} html[data-theme="light"] .hero-badge .hb-num{color:#e6ce8f} html[data-theme="light"] .hero-badge .hb-txt{color:#d9cfae} /* ---- product5: quality band + buy tiers + farm photo card ---- */ html[data-theme="light"] .qband{background:linear-gradient(180deg,#eef3e8,#e7eede)} html[data-theme="light"] .tier.active .g{color:#ffffff} html[data-theme="light"] .tier.active .r b{color:#ffffff} html[data-theme="light"] .farm-list li{color:#ffffff} html[data-theme="light"] .farm-list li svg{color:#e6ce8f} /* keep primary green button readable in light mode */ html[data-theme="light"] .btn-green{color:#ffffff}