:root{
  --lag-bg:#09090b;
  --lag-gold:#d4af37;
  --lag-gold-light:#f3d982;
  --lag-gold-deep:#b8860b;
  --lag-text:#f1ead6;
  --lag-muted:#bdb393;
}

/* =====================================================================
   Light / dark toggle button (visible in both modes)
   ===================================================================== */
#lag-toggle{position:fixed;top:8px;left:50%;margin-left:-19px;width:38px;height:38px;padding:0;border-radius:50%;z-index:99990;display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;background:#fff;color:#b8860b;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .35s ease,background .3s,color .3s,box-shadow .3s}
body.admin-bar #lag-toggle{top:40px}
#lag-toggle:hover{transform:rotate(25deg) scale(1.08);box-shadow:0 4px 14px rgba(0,0,0,.25)}
#lag-toggle:focus-visible{outline:2px solid #d4af37;outline-offset:3px}
#lag-toggle svg{width:20px;height:20px;display:block;pointer-events:none}
#lag-toggle .lag-i-sun{display:none}
html.lag-dark #lag-toggle{background:#15120a;color:#f3d982;box-shadow:0 0 18px rgba(212,175,55,.35)}
html.lag-dark #lag-toggle .lag-i-sun{display:block}
html.lag-dark #lag-toggle .lag-i-moon{display:none}
@media (max-width:782px){
  #lag-toggle,body.admin-bar #lag-toggle{top:auto;bottom:20px;left:auto;right:20px;margin-left:0}
}

/* =====================================================================
   DARK MODE  (everything below only applies when <html class="lag-dark">)
   Light mode = your original theme, untouched.
   ===================================================================== */
html.lag-dark body{background:var(--lag-bg)!important;background-image:none!important;color:var(--lag-text)}
html.lag-dark body :is(#page,#wrapper,#content,.site,.site-content,main,div.elementor[data-elementor-type]){background:transparent!important;background-image:none!important}
/* page-level wrappers found by gold.js that still paint the old background */
html.lag-dark .lag-clear,html.lag-dark .lag-clear::before,html.lag-dark .lag-clear::after{background:transparent!important;background-image:none!important}
html.lag-dark body::before,html.lag-dark body::after{background-image:none!important}

/* ---------- Animated background layer ---------- */
#lag-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;background:radial-gradient(ellipse at 50% 0%,#17140a 0%,#09090b 60%)}
html.lag-dark #lag-bg{opacity:1;visibility:visible}
#lag-bg::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-50%;width:12%;background:linear-gradient(105deg,transparent,rgba(243,217,130,.06),transparent);transform:skewX(-20deg);animation:lag-sweep 16s linear infinite}
#lag-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.65) 100%)}
.lag-b{position:absolute;border-radius:50%;will-change:transform}
.lag-b1{width:70vmax;height:70vmax;left:-22vmax;top:-28vmax;background:radial-gradient(circle,rgba(212,175,55,.30),rgba(212,175,55,0) 65%);animation:lag-d1 26s ease-in-out infinite alternate;translate:0 calc(var(--lag-y,0) * -0.05px)}
.lag-b2{width:62vmax;height:62vmax;right:-22vmax;bottom:-28vmax;background:radial-gradient(circle,rgba(184,134,11,.32),rgba(184,134,11,0) 65%);animation:lag-d2 32s ease-in-out infinite alternate;translate:0 calc(var(--lag-y,0) * -0.10px)}
.lag-b3{width:46vmax;height:46vmax;left:30%;top:28%;background:radial-gradient(circle,rgba(243,217,130,.11),rgba(243,217,130,0) 65%);animation:lag-d3 22s ease-in-out infinite alternate;translate:0 calc(var(--lag-y,0) * -0.16px)}
#lag-spot{position:absolute;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;background:radial-gradient(circle,rgba(243,217,130,.16),rgba(243,217,130,0) 60%);opacity:0;transition:opacity .5s;will-change:transform}
#lag-canvas{position:absolute;inset:0;width:100%;height:100%}
@keyframes lag-d1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(20vmax,14vmax,0) scale(1.15)}}
@keyframes lag-d2{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-18vmax,-12vmax,0) scale(.95)}}
@keyframes lag-d3{from{transform:translate3d(-8vmax,6vmax,0) scale(.9)}to{transform:translate3d(10vmax,-8vmax,0) scale(1.2)}}
@keyframes lag-sweep{from{transform:translateX(0) skewX(-20deg)}to{transform:translateX(1400%) skewX(-20deg)}}
@media (hover:none){#lag-spot{display:none}}

/* ---------- Gold scroll progress bar ---------- */
#lag-progress{position:fixed;top:0;left:0;right:0;height:.5px;z-index:99989;pointer-events:none;display:none;direction:ltr}
body.admin-bar #lag-progress{top:32px}
@media (max-width:782px){body.admin-bar #lag-progress{top:46px}}
#lag-progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#b8860b,#f3d982,#d4af37);box-shadow:0 0 3px rgba(212,175,55,.45)}
html.lag-dark #lag-progress{display:block}

/* ---------- Sections fade/slide in with a gold glow on their titles ---------- */
html.lag-dark .lag-rv{opacity:0;transform:translate3d(0,46px,0);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
html.lag-dark .lag-rv.lag-in{opacity:1;transform:none}
html.lag-dark .lag-rv.lag-in :is(h1,h2,h3,.elementor-heading-title){animation:lag-glow 1.8s ease .25s 1}
@keyframes lag-glow{0%{text-shadow:0 0 0 rgba(212,175,55,0)}40%{text-shadow:0 0 30px rgba(243,217,130,.8)}100%{text-shadow:0 0 18px rgba(212,175,55,.25)}}

@media (prefers-reduced-motion:reduce){
  .lag-b,#lag-bg::before{animation:none;translate:none}
  html.lag-dark .lag-rv{opacity:1;transform:none;transition:none}
}

/* ---------- Text on the dark background (header/footer/links/buttons left untouched) ---------- */
html.lag-dark body :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title):not(:is(a,button,header,footer,.elementor-location-header,.elementor-location-footer) *){color:var(--lag-gold-light)!important;text-shadow:0 0 18px rgba(212,175,55,.25)}
html.lag-dark body :is(.elementor-widget-text-editor,.elementor-widget-text-editor p):not(:is(a,button,header,footer,.elementor-location-header,.elementor-location-footer) *){color:var(--lag-text)!important}

/* ---------- Text / outlines that were dark are turned gold by gold.js ---------- */
html.lag-dark .lag-tx{color:var(--lag-gold-light)!important}
html.lag-dark .lag-bd{border-color:var(--lag-gold)!important}

/* ---------- Header in dark mode: recoloured element by element (no filter, so sticky/scroll-up headers keep working) ---------- */
html.lag-dark .lag-hd{box-shadow:0 1px 0 rgba(212,175,55,.35)}
html.lag-dark .lag-hb{background-color:#0e0c08!important;background-image:none!important}
html.lag-dark .lag-htx{color:#efe7cf!important}
html.lag-dark .lag-hf{fill:#efe7cf!important}
html.lag-dark .lag-hs{stroke:#efe7cf!important}
html.lag-dark .lag-hbd{border-color:rgba(212,175,55,.32)!important}
html.lag-dark .lag-hpill{box-shadow:inset 0 0 0 1px rgba(212,175,55,.55)}
/* "/" separators and other text drawn by ::before / ::after inside the header: light gold so they never vanish */
html.lag-dark .lag-hp::before,html.lag-dark .lag-hp::after{color:#d9bf6a!important}
html.lag-dark .lag-hpb::before{background-color:#0e0c08!important;background-image:none!important}
html.lag-dark .lag-hpa::after{background-color:#0e0c08!important;background-image:none!important}
/* the logo only: flip luminance, keep hues (black letters become white, orange stays orange) */
html.lag-dark .lag-logo{filter:invert(1) hue-rotate(180deg)}

/* ---------- White pill labels / buttons become dark with gold text ---------- */
html.lag-dark .lag-pill{background:rgba(12,10,6,.92)!important;color:var(--lag-gold-light)!important;box-shadow:0 0 0 1px rgba(212,175,55,.65),0 0 14px rgba(212,175,55,.18)}
html.lag-dark .lag-pill *{color:inherit!important}
/* toggle placed inside the header, next to the account / wishlist icons */
html body #lag-toggle.lag-in-header{position:static!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;margin:0 6px!important;width:42px;height:42px;flex:0 0 auto;align-self:center}
/* on phones the header is tighter: slightly smaller button */
@media (max-width:1024px){html body #lag-toggle.lag-in-header{width:36px;height:36px;margin:0 4px!important}html body #lag-toggle.lag-in-header svg{width:18px;height:18px}}

/* ---------- Customers carousel in dark mode ---------- */
html.lag-dark .lac-section{background:rgba(255,255,255,.04)!important;border:1px solid rgba(212,175,55,.28);box-shadow:0 8px 30px rgba(0,0,0,.45),inset 0 0 40px rgba(212,175,55,.04)}
html.lag-dark .lac-section .elementor-heading-title{border-bottom-color:var(--lag-gold)!important}
/* dark glass tile; logo shown as a light grey version (a white box behind a logo disappears) */
html.lag-dark .lac .lac-item{background:rgba(255,255,255,.05);border:1px solid rgba(212,175,55,.2);border-radius:12px;transition:background .3s,border-color .3s,box-shadow .3s}
html.lag-dark .lac .lac-item img{filter:grayscale(1) invert(1);mix-blend-mode:screen;opacity:.85}
/* hover: tile turns white and the logo shows its real colours */
html.lag-dark .lac .lac-item:hover{background:#fff;border-color:var(--lag-gold);box-shadow:0 0 22px rgba(212,175,55,.35)}
html.lag-dark .lac .lac-item:hover img{filter:grayscale(0) invert(0);mix-blend-mode:multiply;opacity:1}
/* touch screens have no hover: white tile + real colours */
@media (hover:none){
  html.lag-dark .lac .lac-item{background:#fff}
  html.lag-dark .lac .lac-item img{filter:none;mix-blend-mode:multiply;opacity:1}
}

/* ---------- Cards / widget boxes (white boxes turned dark) ---------- */
html.lag-dark .lag-card{box-shadow:0 0 0 1px rgba(212,175,55,.28),0 8px 24px rgba(0,0,0,.45)!important}
html.lag-dark .lag-photo{background-color:#fff!important;border-radius:10px}

/* ---------- Fix: animated background hidden behind opaque body / dashboard wrappers ---------- */
/* html keeps the solid #09090b base; body must be transparent or it paints over #lag-bg (z-index:-1) */
html.lag-dark body{background:transparent!important;background-image:none!important}
/* My Account dashboard wrappers */
html.lag-dark body.woodmartplus-myaccount :is(.website-wrapper,.main-page-wrapper,.site-content,.container,.dashboard_container){background:transparent!important;background-image:none!important}

/* ---------- Phones / tablets: same animations, cheaper to draw (only transform / opacity move; no blend modes, lighter shadows) ---------- */
/* phone sparkles: transform + opacity only */
.lag-sps{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lag-sp{position:absolute;top:0;border-radius:50%;background:radial-gradient(circle,rgba(243,217,130,.95) 0 28%,rgba(212,175,55,.28) 48%,rgba(212,175,55,0) 72%);opacity:0;will-change:transform,opacity;animation:lag-rise 20s linear infinite}
@keyframes lag-rise{0%{transform:translate3d(0,105vh,0);opacity:0}12%{opacity:.95}45%{opacity:.4}78%{opacity:.95}100%{transform:translate3d(var(--dx,0),-12vh,0);opacity:0}}
@media (prefers-reduced-motion:reduce){.lag-sps{display:none}}
@media (max-width:1024px),(hover:none){
  #lag-canvas{display:none!important}
  .lag-b{translate:none!important}
  .lag-b1{width:80vw;height:80vw;left:-25vw;top:-25vw}
  .lag-b2{width:80vw;height:80vw;right:-25vw;bottom:-25vw}
  .lag-b3{width:60vw;height:60vw}
  html.lag-dark .lag-rv{transform:translate3d(0,18px,0);transition:opacity .4s ease-out,transform .45s ease-out}
  html.lag-dark .lag-card{box-shadow:0 0 0 1px rgba(212,175,55,.28),0 4px 10px rgba(0,0,0,.35)!important}
  #lag-progress i{box-shadow:none}
  html.lag-dark .lac .lac-item,html.lag-dark .lac .lac-item img{mix-blend-mode:normal!important;transition:none}
}

/* ---------- Form fields (login / register / OTP code / search / checkout...) in the dark mode ----------
   The painter above only recolours normal text, never what is typed inside a field, so on the dark panels
   the typed text and the placeholder stayed dark on a dark field. Here every text field gets a light text colour,
   a slightly lighter field background, a gold border and a visible cursor. */
html.lag-dark input:not(:is([type=checkbox],[type=radio],[type=submit],[type=button],[type=reset],[type=range],[type=color],[type=file],[type=image],[type=hidden])),
html.lag-dark textarea,
html.lag-dark select{
  background-color:rgba(255,255,255,.08)!important;
  color:var(--lag-text)!important;
  border-color:rgba(212,175,55,.5)!important;
  caret-color:var(--lag-gold-light);
  color-scheme:dark;
}
html.lag-dark input:not(:is([type=checkbox],[type=radio],[type=submit],[type=button],[type=reset],[type=range],[type=color],[type=file],[type=image],[type=hidden])):focus,
html.lag-dark textarea:focus,
html.lag-dark select:focus{border-color:var(--lag-gold-light)!important}
html.lag-dark input::placeholder,
html.lag-dark textarea::placeholder{color:var(--lag-muted)!important;-webkit-text-fill-color:var(--lag-muted)!important;opacity:.8!important}
html.lag-dark select option{background:#15120a;color:var(--lag-text)}
/* Chrome's autofill paints its own light background and dark text */
html.lag-dark :is(input,textarea,select):-webkit-autofill,
html.lag-dark :is(input,textarea,select):-webkit-autofill:hover,
html.lag-dark :is(input,textarea,select):-webkit-autofill:focus{
  -webkit-text-fill-color:var(--lag-text)!important;
  caret-color:var(--lag-gold-light);
  -webkit-box-shadow:0 0 0 1000px #1b170c inset!important;
  box-shadow:0 0 0 1000px #1b170c inset!important;
  transition:background-color 99999s ease-out 0s;
}

/* =====================================================================
   My Account dashboard  (body.lag-acct, dark mode only)
   The normal painter still darkens the white cards and fixes text colours.
   gold.js (fixAccount) only tags each bordered box by role, and here every role gets
   ONE soft gold line (or none): no gold-forced borders, no double rings.
   Backgrounds are not touched here.
   ===================================================================== */
html.lag-dark body.lag-acct .lag-acc-card{border-color:rgba(212,175,55,.30)!important;box-shadow:0 8px 26px rgba(0,0,0,.45)!important}
html.lag-dark body.lag-acct .lag-acc-card.lag-acc-accent{border-top-color:var(--lag-gold)!important}
html.lag-dark body.lag-acct .lag-acc-in{border-color:rgba(212,175,55,.16)!important;box-shadow:none!important}
/* small chips / titles that had their own frame: frame and ring removed */
html.lag-dark body.lag-acct .lag-acc-flat{border-color:transparent!important;box-shadow:none!important;outline:0!important}
/* links / buttons: a single thin gold line, no ring */
html.lag-dark body.lag-acct .lag-acc-btn{border-color:rgba(212,175,55,.45)!important;box-shadow:none!important}
html.lag-dark body.lag-acct .lag-acc-btn:hover{border-color:var(--lag-gold-light)!important}
html.lag-dark body.lag-acct .lag-acc-cell{border-color:rgba(212,175,55,.22)!important}
html.lag-dark body.lag-acct .lag-acc-line{border-color:rgba(212,175,55,.35)!important}
/* the ring of a pill that sits inside a panel is the "double frame": drop it */
html.lag-dark body.lag-acct .lag-pill{box-shadow:none}
/* solid blue buttons (logout, add-to-cart) -> gold */
html.lag-dark body.lag-acct .lag-acc-cta{
  background-color:transparent!important;
  background-image:linear-gradient(135deg,rgba(184,134,11,.55),rgba(212,175,55,.32))!important;
  border:1px solid rgba(243,217,130,.7)!important;color:#fff7dc!important;
  box-shadow:0 0 14px rgba(212,175,55,.25)!important;
}
html.lag-dark body.lag-acct .lag-acc-cta :is(span,i,b,strong,p){color:#fff7dc!important}

/* ---------- My Account: round status badges get an icon; white tiles become dark glass ---------- */
body.lag-acct .lag-acc-circ{position:relative;font-size:0!important;line-height:0!important;color:#fff!important;display:flex!important;align-items:center;justify-content:center;overflow:hidden}
body.lag-acct .lag-acc-circ::before,body.lag-acct .lag-acc-circ::after{content:none!important;display:none!important}
body.lag-acct .lag-acc-circ>*:not(.lag-acc-circ-ico){display:none!important}
body.lag-acct .lag-acc-circ-ico{display:flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none}
body.lag-acct .lag-acc-circ-ico svg{display:block;width:26px;height:26px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
html.lag-dark body.lag-acct .lag-acc-lt{background-color:rgba(255,255,255,.045)!important;background-image:none!important;border:1px solid rgba(212,175,55,.32)!important;box-shadow:0 6px 20px rgba(0,0,0,.4)!important;color:var(--lag-text)!important}
html.lag-dark body.lag-acct .lag-acc-lt:hover{border-color:var(--lag-gold-light)!important}

html.lag-dark body.lag-acct .lag-acc-tile{background:rgba(255,255,255,.045)!important;background-image:none!important;-webkit-mask:none!important;mask:none!important;-webkit-mask-image:none!important;mask-image:none!important;border:1px solid rgba(212,175,55,.32)!important;border-radius:14px!important;box-shadow:0 6px 20px rgba(0,0,0,.4)!important;filter:none!important}
html.lag-dark body.lag-acct .lag-acc-tile:hover{border-color:var(--lag-gold-light)!important}
html.lag-dark body.lag-acct .lag-acc-pb::before,html.lag-dark body.lag-acct .lag-acc-tile.lag-acc-pb::before{background:transparent!important;background-image:none!important;-webkit-mask:none!important;mask:none!important;box-shadow:none!important;border-color:transparent!important}
html.lag-dark body.lag-acct .lag-acc-pa::after,html.lag-dark body.lag-acct .lag-acc-tile.lag-acc-pa::after{background:transparent!important;background-image:none!important;-webkit-mask:none!important;mask:none!important;box-shadow:none!important;border-color:transparent!important}
html.lag-dark body.lag-acct .lag-acc-lt{-webkit-mask:none!important;mask:none!important}
/* no border / ring around the light-dark button in any state (also beats theme button styles) */
html body #lag-toggle,html body #lag-toggle:hover,html body #lag-toggle:focus,html body #lag-toggle:active{border:0!important;outline:0}
html body #lag-toggle:focus-visible{outline:2px solid #d4af37;outline-offset:3px}
html.lag-dark body #lag-toggle:hover{box-shadow:0 0 18px rgba(212,175,55,.35)}
/* no background: the button looks like the other header icons (heart / account) */
html body #lag-toggle,html.lag-dark body #lag-toggle,html body #lag-toggle:hover,html.lag-dark body #lag-toggle:hover{background:transparent!important;box-shadow:none!important}
/* gold icon, same size as the other header icons */
html body #lag-toggle{color:#b8860b!important}
html.lag-dark body #lag-toggle{color:#d4af37!important}
html body #lag-toggle.lag-in-header svg{width:24px;height:24px}
@media (max-width:1024px){html body #lag-toggle.lag-in-header svg{width:22px;height:22px}}

/* My Account menus: icons drawn by CSS (mask) get the same gold as all the other menu icons */
html.lag-dark body.lag-acct .lag-mi-pb::before,html.lag-dark body.lag-acct .lag-mi-pa::after{background-color:#d4af37!important}

/* My Account menus: every icon, whatever it is made of, is repainted in exactly one gold (#d4af37).
   brightness(0) turns every pixel black first, so the original colour never matters. */
html.lag-dark body.lag-acct .lag-mi-f{filter:brightness(0) saturate(100%) invert(59%) sepia(83%) saturate(648%) hue-rotate(351deg) brightness(126%) contrast(66%)!important}
html.lag-dark body.lag-acct .lag-mi-fb::before,html.lag-dark body.lag-acct .lag-mi-fa::after{filter:brightness(0) saturate(100%) invert(59%) sepia(83%) saturate(648%) hue-rotate(351deg) brightness(126%) contrast(66%)!important}

/* ---------- Product page: description / reviews / tabs panels stay dark in the dark mode (backup for the painter in gold.js) ---------- */
html.lag-dark body.single-product :is(.woocommerce-tabs,.woocommerce-Tabs-panel,.wc-tab,.wd-tabs .wd-tab-content,.wd-accordion-content,#tab-description,#tab-reviews,#tab-additional_information,.woocommerce-tabs .entry-content){
  background-color:#14110a!important;
  background-image:none!important;
}