/* Customer appearance: text size, hand-tuned dark colours (on top of the generated *-dark.css), and the Appearance panel. */

/* ---------- Text size: the site is sized in rem, so the root size scales it */
html[data-text=sm]{font-size:93.75%}
html[data-text=lg]{font-size:112.5%}
html[data-text=xl]{font-size:125%}

/* ---------- Smooth blend when switching theme */
html.lx-theme-blend,html.lx-theme-blend *,html.lx-theme-blend *::before,html.lx-theme-blend *::after{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,box-shadow .35s ease!important}

/* ---------- Dark: base colours and the variables that JS-built markup still reads */
html[data-theme=dark]{
  --lx-bg:#17121c;--lx-surface:#211a28;--lx-raised:#2a2133;--lx-line:#3b2f47;--lx-ink:#efe6f5;--lx-muted:#b8a8c6;--lx-accent:#c9aef0;
  --text:#efe6f5;--mid:#b8a8c6;--cream:#1c1622;--lilac:#2f2440;--blush:#3a2533;--dark:#0f0b13;
  --ui-surface:#211a28;--ui-border:#3b2f47;--ui-muted:#b8a8c6;--ui-shadow-panel:0 12px 32px rgba(0,0,0,.45);
  --ed-ivory:#17121c;--ed-lav:#221a2c;--ed-blush:#26192a;--ed-ink:#efe6f5;--ed-plum:#efe6f5;--ed-muted:#b8a8c6;--ed-line:#3b2f47;
  --product-background:#211a28;--product-surface:#1c1622;--product-lavender-light:#2a2133;--product-lavender:#3a2c50;--product-text:#efe6f5;--product-text-secondary:#b8a8c6;--product-border:#3b2f47;
  --product-card-shadow:0 4px 16px rgba(0,0,0,.35);--product-modal-shadow:0 18px 65px rgba(0,0,0,.55);
  --sel-hover:#2a2133;
  background:var(--lx-bg);color:var(--lx-ink);
}
html[data-theme=dark] body{background:var(--lx-bg);color:var(--lx-ink)}
html[data-theme=dark] :is(h1,h2,h3,h4){color:var(--lx-ink)}
html[data-theme=dark] :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]){background-color:var(--lx-raised);color:var(--lx-ink);border-color:var(--lx-line)}
html[data-theme=dark] ::placeholder{color:#8f7f9e;opacity:1}
html[data-theme=dark] :is(input,select,textarea):focus{border-color:#a487d6}
html[data-theme=dark] hr{border-color:var(--lx-line)}
html[data-theme=dark] ::selection{background:#5a3f86;color:#fff}
html[data-theme=dark] dialog{background:var(--lx-surface);color:var(--lx-ink)}
html[data-theme=dark] dialog::backdrop{background:rgba(5,3,8,.6)}
html[data-theme=dark] *{scrollbar-color:#4a3b58 transparent}
/* main buttons keep the LexC purple, lifted a little so they read on dark */
html[data-theme=dark] :is(.btn-primary,.nav-auth-btn){background:#7a55b8;color:#fff;box-shadow:0 4px 18px rgba(0,0,0,.35)}
html[data-theme=dark] :is(.btn-primary,.nav-auth-btn):hover{background:#8a66c7}
html[data-theme=dark] .btn-outline{color:var(--lx-accent);border-color:#6b5291;background:transparent}
html[data-theme=dark] .btn-outline:hover{background:#2c2238}
/* photos sit a touch softer so they don't glare */
html[data-theme=dark] img:not([src$=".svg"]){filter:brightness(.94)}
html[data-theme=dark] .nav-logo img{filter:none}

/* ---------- Appearance button (nav, More menu, page headers) */
.nav-appear-btn{display:inline-grid;place-items:center;width:40px;height:40px;margin-right:4px;border:0;border-radius:50%;background:transparent;color:var(--plum,#5c3d6e);cursor:pointer;transition:background .18s ease}
.nav-appear-btn:hover{background:rgba(92,61,110,.08)}
.nav-appear-btn svg,.lx-more-appear svg,.lx-header-appear svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html[data-theme=dark] .nav-appear-btn{color:var(--lx-accent)}
html[data-theme=dark] .nav-appear-btn:hover{background:#2c2238}
.lx-more-appear{display:flex!important;align-items:center;gap:8px}
.lx-header-appear{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:600 .82rem 'DM Sans',sans-serif;cursor:pointer}
.lx-header-appear:hover{background:rgba(255,255,255,.22)}
@media(max-width:860px){.nav-appear-btn{display:none}}
@media(max-width:520px){.lx-header-appear span{display:none}.lx-header-appear{padding:0 10px}}

/* ---------- Appearance panel */
.lx-appear{width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:20px;border:1px solid #e7def0;border-radius:20px;background:#fff;color:#2b2341;box-shadow:0 24px 60px rgba(45,28,58,.25);font-family:'DM Sans',system-ui,sans-serif}
.lx-appear[open]{animation:lx-pop .22s ease}
.lx-appear::backdrop{background:rgba(30,18,40,.38);backdrop-filter:blur(2px)}
@keyframes lx-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.lx-appear-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.lx-appear-head h2{margin:0;font:700 1.2rem 'Playfair Display',Georgia,serif;color:inherit}
.lx-appear-close{display:grid;place-items:center;width:44px;height:44px;margin:-8px -8px -8px 0;border:0;border-radius:50%;background:transparent;color:inherit;font-size:1.5rem;cursor:pointer}
.lx-appear-close:hover{background:rgba(120,90,160,.12)}
.lx-appear-label{margin:14px 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7d6f8c}
.lx-appear-themes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lx-appear-themes button{display:grid;gap:8px;padding:8px;border:2px solid #e7def0;border-radius:16px;background:transparent;color:inherit;font:inherit;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease}
.lx-appear-themes button[aria-checked=true]{border-color:#7a55b8;box-shadow:0 0 0 4px rgba(122,85,184,.16)}
.lx-swatch{display:grid;grid-template-rows:14px 1fr;gap:6px;height:72px;padding:9px;border-radius:10px}
.lx-swatch i{display:block;border-radius:6px}
.lx-swatch i:nth-child(3){display:none}
.lx-swatch--light{background:#fbf9fd;border:1px solid #ece4f4}
.lx-swatch--light i:nth-child(1){width:60%;background:#e4d7f4}.lx-swatch--light i:nth-child(2){background:#fff;box-shadow:0 2px 8px rgba(92,61,110,.12)}
.lx-swatch--dark{background:#17121c;border:1px solid #2c2236}
.lx-swatch--dark i:nth-child(1){width:60%;background:#4a3866}.lx-swatch--dark i:nth-child(2){background:#2a2133}
.lx-appear-name{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:.9rem;padding-bottom:2px}
.lx-appear-name svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lx-appear-sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:4px;border-radius:14px;background:#f5f0fa}
.lx-appear-sizes button{display:grid;justify-items:center;align-content:center;gap:2px;min-height:58px;padding:6px 2px;border:0;border-radius:11px;background:transparent;color:inherit;font:inherit;cursor:pointer;transition:background .18s ease,box-shadow .18s ease}
.lx-appear-sizes button span{font-weight:700;line-height:1}
.lx-appear-sizes button small{font-size:11px;color:#7d6f8c;line-height:1.15;text-align:center}
.lx-appear-sizes button[aria-checked=true]{background:#fff;box-shadow:0 2px 10px rgba(92,61,110,.16);color:#4c2f86}
.lx-appear-preview{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#faf7fd;font-size:1rem;line-height:1.5}
.lx-appear-note{margin:10px 0 0;font-size:.75rem;color:#8a7d96;text-align:center}
.lx-appear button:focus-visible{outline:3px solid #b9a1f0;outline-offset:2px}
html[data-theme=dark] .lx-appear{background:#211a28;border-color:#3b2f47;color:#efe6f5;box-shadow:0 24px 60px rgba(0,0,0,.6)}
html[data-theme=dark] .lx-appear::backdrop{background:rgba(5,3,8,.6)}
html[data-theme=dark] .lx-appear-themes button{border-color:#3b2f47}
html[data-theme=dark] .lx-appear-themes button[aria-checked=true]{border-color:#b393e6;box-shadow:0 0 0 4px rgba(179,147,230,.18)}
html[data-theme=dark] .lx-appear-sizes{background:#1a1420}
html[data-theme=dark] .lx-appear-sizes button[aria-checked=true]{background:#3a2c50;color:#fff;box-shadow:none}
html[data-theme=dark] :is(.lx-appear-label,.lx-appear-sizes button small,.lx-appear-note){color:#a898b8}
html[data-theme=dark] .lx-appear-preview{background:#1a1420}
@media(prefers-reduced-motion:reduce){.lx-appear[open]{animation:none}}

/* ---------- Product photos sit on white (light) or black (dark); only cut-out images with a transparent background show it */
:is(.pd-card__media,.pd-hero,.pd-thumb,.pd-mini__media,.mx-new-photo):has(img),#page-shop.mx .mx-cat-art:has(img){background:#fff}
html[data-theme=dark] :is(.pd-card__media,.pd-hero,.pd-thumb,.pd-mini__media,.mx-new-photo):has(img),
html[data-theme=dark] #page-shop.mx :is(.pd-card__media,.mx-new-photo,.mx-cat-art):has(img){background:#2a2133}
html[data-theme=dark] #page-shop.mx .pd-rating--none .pd-star{fill:none!important;stroke:#7d6c8f!important;stroke-width:1.8}
/* the search box's input is part of the pill: no inner box of its own */
html[data-theme=dark] .shop-search-line input[type],html[data-theme=dark] .shop-search-line input{background:transparent!important;border:0!important;box-shadow:none!important}