/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Helvetica Neue","Inter",Arial,sans-serif;
  font-size:12px;
  color:var(--fg);
  background-color:var(--bg);
  -webkit-font-smoothing:antialiased;
  transition:background-color 900ms ease,color 900ms ease;
  letter-spacing:.01em;
}
a{color:inherit;text-decoration:none}
sup{font-size:.7em;vertical-align:super}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- theme variables ---------- */
:root,
body.lights-off{
  --bg:#f6f4ef;
  --tile:#efece5;
  --tile-2:#e7e3d9;
  --fg:#111;
  --muted:#6b6b6b;
  --line:#d9d5c9;
}
body.lights-on{
  --bg:#0a0906;
  --tile:#15120d;
  --tile-2:#1a1610;
  --fg:#d6cfbf;
  --muted:#6f6a5c;
  --line:#1f1b14;
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:20;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:48px;
  padding:18px 28px;
  background-color:var(--bg);
  border-bottom:1px solid var(--line);
  transition:background-color 900ms ease,border-color 900ms ease;
}
.brand{
  font-family:"Times New Roman",Georgia,serif;
  font-style:italic;
  font-size:16px;
  letter-spacing:.01em;
}
.main-nav{display:flex;gap:24px;justify-self:start}
.main-nav a,.utility-nav a,.account-nav a{font-size:12px}
.utility-nav,.account-nav{display:flex;gap:24px}
.account-nav{margin-left:12px}

/* ---------- layout ---------- */
.layout{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:28px;
  padding:20px 28px 80px;
}
.sidebar{padding-top:8px;font-size:12px}
.nav-list{list-style:none}
.nav-list + .nav-list{margin-top:18px}
.nav-list li{padding:3px 0}
.nav-list .group{color:var(--muted);margin-bottom:4px}
.nav-list a{color:var(--fg);opacity:.85}
.nav-list a:hover{opacity:1}
.nav-list a.active{font-weight:600;opacity:1}
.nav-list.category li:not(.group){padding-left:10px}

/* ---------- content head ---------- */
.content-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 0 16px;
  border-bottom:1px solid transparent;
}
.page-title{
  font-family:"Times New Roman",Georgia,serif;
  font-weight:400;
  font-size:14px;
  letter-spacing:.02em;
}
.page-title sup{color:var(--muted);font-size:10px;margin-left:4px}
.toolbar{display:flex;align-items:center;gap:24px}
.filter-btn{font-size:12px}
.view-switch{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.view-switch button{padding:0 4px;color:var(--muted)}
.view-switch button.active{color:var(--fg)}

/* ---------- toggle (the star of the show) ---------- */
.light-toggle-wrap{display:flex;align-items:center;gap:8px}
.light-label{font-size:12px}
.light-toggle{
  position:relative;
  width:34px;height:18px;border-radius:999px;
  background:#cfcabd;
  transition:background 400ms ease, box-shadow 400ms ease;
}
.light-toggle .knob{
  position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:left 300ms cubic-bezier(.5,.2,.2,1), background 300ms ease, box-shadow 400ms ease;
}
body.lights-on .light-toggle{
  background:linear-gradient(90deg,#f7c572,#ffb347);
  box-shadow:0 0 14px rgba(255,179,71,.55);
}
body.lights-on .light-toggle .knob{
  left:18px;
  background:#fff8e7;
  box-shadow:0 0 10px rgba(255,221,150,.9);
}

/* ---------- grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.card{display:flex;flex-direction:column;gap:10px}
.tile{
  position:relative;
  aspect-ratio:1/1;
  background-color:var(--tile);
  overflow:hidden;
  transition:background-color 900ms ease, box-shadow 900ms ease;
}
/* subtle wall gradient */
.tile::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, var(--tile) 0%, var(--tile-2) 100%);
  transition:opacity 900ms ease;
}
body.lights-on .tile::before{
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(180deg, #17130c 0%, #0c0a07 100%);
}
.meta{font-size:11px;line-height:1.45}
.meta .name{color:var(--fg);letter-spacing:.01em}
.meta .price{color:var(--muted);margin-top:2px}

/* ===================================================
   LAMPS — each has an "off" neutral look and an "on"
   glowing look activated by body.lights-on
   =================================================== */

.lamp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

/* universal halo — visible only when lights are on */
.halo,.halo-top,.halo-bottom,.halo.up,.halo.down{
  position:absolute;border-radius:50%;
  pointer-events:none;
  opacity:0;
  transition:opacity 900ms ease;
  filter:blur(22px);
  mix-blend-mode:screen;
}
body.lights-on .halo,
body.lights-on .halo-top,
body.lights-on .halo-bottom,
body.lights-on .halo.up,
body.lights-on .halo.down{opacity:1}

/* ---------- 1. Disc surface mount (red disc) ---------- */
.lamp-disc .disc-back{
  width:46%;aspect-ratio:1;border-radius:50%;
  background:#7a1b18;
  box-shadow:inset 0 -10px 20px rgba(0,0,0,.25);
  position:relative;
}
.lamp-disc .disc-front{
  position:absolute;width:28%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#fff 0%,#e7ddc0 55%,#b9a079 100%);
  transition:background 600ms ease, box-shadow 600ms ease;
}
.lamp-disc .disc-bulb{
  position:absolute;width:10%;aspect-ratio:1;border-radius:50%;
  background:#111;
  transition:background 600ms ease, box-shadow 600ms ease;
}
.lamp-disc .halo{
  width:90%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,170,90,.9),rgba(255,120,60,.2) 55%,transparent 75%);
}
body.lights-on .lamp-disc .disc-back{background:#2b0d0b}
body.lights-on .lamp-disc .disc-front{
  background:radial-gradient(circle at 50% 45%,#fff4d0 0%,#ffb860 60%,#d35b20 100%);
  box-shadow:0 0 45px 6px rgba(255,160,70,.85);
}
body.lights-on .lamp-disc .disc-bulb{
  background:#fff2c0;
  box-shadow:0 0 20px 2px rgba(255,230,170,1);
}
.disc-b .disc-back{background:#6b1512}
body.lights-on .disc-b .disc-back{background:#240806}

/* ---------- 2. Up / Down sconce ---------- */
.lamp-updown{flex-direction:column}
.lamp-updown .plate{
  width:14%;height:22%;background:#3a4851;border-radius:3px;
  transition:background 600ms ease;
  box-shadow:inset 0 0 6px rgba(0,0,0,.3);
}
.lamp-updown .stem{width:4%;height:4%;background:#2a2a2a;margin-top:-2px}
.lamp-updown .halo.up{
  top:18%;left:50%;transform:translateX(-50%);
  width:60%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,200,140,.85),transparent 65%);
}
.lamp-updown .halo.down{
  bottom:18%;left:50%;transform:translateX(-50%);
  width:50%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,200,140,.75),transparent 65%);
}
body.lights-on .lamp-updown .plate{background:#141212}
.lamp-updown.v2 .plate{background:#2e2a26;height:32%;width:10%}

/* ---------- 3. Flora chandelier (5 red shades) ---------- */
.lamp-chandelier{align-items:flex-start;padding-top:6%}
.lamp-chandelier .cable{
  position:absolute;top:0;width:1px;height:30%;
  background:#222;transform-origin:top center;
}
.lamp-chandelier .c1{left:30%;transform:rotate(-22deg)}
.lamp-chandelier .c2{left:42%;transform:rotate(-10deg)}
.lamp-chandelier .c3{left:50%}
.lamp-chandelier .c4{left:58%;transform:rotate(10deg)}
.lamp-chandelier .c5{left:70%;transform:rotate(22deg)}
body.lights-on .lamp-chandelier .cable{background:#3a3226}

.lamp-chandelier .shade{
  position:absolute;top:28%;
  width:12%;height:14%;
  background:#8a1c18;
  clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);
  transition:background 600ms ease, filter 600ms ease;
}
.lamp-chandelier .shade .glow{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  width:160%;height:160%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,170,90,.9),transparent 60%);
  opacity:0;transition:opacity 900ms ease;filter:blur(14px);
  mix-blend-mode:screen;pointer-events:none;
}
.lamp-chandelier .s1{left:24%;transform:rotate(-18deg)}
.lamp-chandelier .s2{left:36%;transform:rotate(-8deg)}
.lamp-chandelier .s3{left:48%}
.lamp-chandelier .s4{left:60%;transform:rotate(8deg)}
.lamp-chandelier .s5{left:72%;transform:rotate(18deg)}
body.lights-on .lamp-chandelier .shade{background:#2a0a08;filter:drop-shadow(0 4px 10px rgba(255,140,60,.4))}
body.lights-on .lamp-chandelier .shade .glow{opacity:1}

/* ---------- 4. Sage pendant duo (linear) ---------- */
.lamp-linear{flex-direction:column}
.lamp-linear .cable{width:1px;height:30%;background:#2a2a2a}
.lamp-linear .bar{
  position:relative;
  width:60%;height:3%;background:#cfc8b8;border-radius:2px;
  transition:background 600ms ease;
}
.lamp-linear .bar .light{
  position:absolute;inset:-2px -6px;
  background:linear-gradient(90deg,transparent,rgba(255,220,150,.9),transparent);
  filter:blur(8px);opacity:0;transition:opacity 900ms ease;
  mix-blend-mode:screen;
}
body.lights-on .lamp-linear .bar{background:#1c1a15}
body.lights-on .lamp-linear .bar .light{opacity:1}

/* ---------- 5. Vera sconce (red triangle) ---------- */
.lamp-triangle .tri{
  width:38%;height:38%;
  background:#7a1b18;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  position:relative;
  transition:background 600ms ease;
}
.lamp-triangle .tri-bulb{
  position:absolute;top:58%;
  width:6%;aspect-ratio:1;border-radius:50%;
  background:#111;transition:background 600ms ease,box-shadow 600ms ease;
}
.lamp-triangle .halo{
  width:90%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,90,60,.75),transparent 60%);
}
body.lights-on .lamp-triangle .tri{background:#2a0a08}
body.lights-on .lamp-triangle .tri-bulb{background:#fff2c0;box-shadow:0 0 14px 2px rgba(255,220,150,1)}

/* ---------- 6. Cotta pendant (ribbed red) ---------- */
.lamp-pendant{flex-direction:column}
.lamp-pendant .cable{width:1px;height:22%;background:#2a2a2a}
.lamp-pendant .shade{
  position:relative;
  width:34%;height:34%;
  background:
    repeating-linear-gradient(90deg,
      #7a1b18 0 4px, #8a201c 4px 8px);
  border-radius:0 0 50% 50% / 0 0 25% 25%;
  clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);
  transition:filter 600ms ease;
}
.lamp-pendant .shade .glow{
  position:absolute;left:50%;bottom:-20%;
  width:180%;height:180%;transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,170,90,.9),transparent 60%);
  opacity:0;transition:opacity 900ms ease;filter:blur(18px);
  mix-blend-mode:screen;pointer-events:none;
}
.lamp-pendant .halo{
  width:90%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,150,80,.7),transparent 60%);
}
body.lights-on .lamp-pendant .shade{filter:brightness(.45) saturate(1.2)}
body.lights-on .lamp-pendant .shade .glow{opacity:1}

/* ---------- 7. Luce / Ceramic box sconce ---------- */
.lamp-box .box{
  width:18%;height:34%;
  background:#2a2420;
  border-radius:2px;
  position:relative;
  transition:background 600ms ease;
}
.lamp-box.tall .box{height:46%;width:14%}
.lamp-box .halo-top{
  left:50%;top:20%;transform:translate(-50%,-50%);
  width:46%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,190,120,.75),transparent 65%);
}
.lamp-box .halo-bottom{
  left:50%;bottom:18%;transform:translate(-50%,50%);
  width:40%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,190,120,.7),transparent 65%);
}
body.lights-on .lamp-box .box{background:#120f0c}

/* ---------- 8. Ripple sconce (subtle) ---------- */
.lamp-ripple .dot{
  width:8%;aspect-ratio:1;border-radius:50%;
  background:#3b362e;
  transition:background 600ms ease,box-shadow 600ms ease;
}
.lamp-ripple .halo{
  width:70%;aspect-ratio:1;
  background:
    radial-gradient(circle,rgba(255,210,150,.5) 0%,transparent 40%),
    conic-gradient(from 0deg,rgba(255,220,180,.15),rgba(255,220,180,.35),rgba(255,220,180,.15));
}
body.lights-on .lamp-ripple .dot{background:#ffe3a8;box-shadow:0 0 20px 4px rgba(255,210,140,.9)}

/* ---------- 12. Alba orb surface mount ---------- */
.lamp-orb .orb{
  width:30%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0%,#efe8d4 50%,#b9af94 100%);
  transition:background 600ms ease, box-shadow 600ms ease;
}
.lamp-orb .halo{
  width:90%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,210,150,.9),transparent 60%);
}
body.lights-on .lamp-orb .orb{
  background:radial-gradient(circle at 35% 30%,#fff6d9 0%,#ffcd7a 55%,#8c5a1c 100%);
  box-shadow:0 0 40px 8px rgba(255,190,110,.85);
}

/* ---------- "something different": cursor follow-light ---------- */
.cursor-glow{
  position:fixed;pointer-events:none;z-index:5;
  width:420px;height:420px;border-radius:50%;
  left:var(--mx,50%);top:var(--my,50%);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,200,120,.18),transparent 60%);
  opacity:0;transition:opacity 900ms ease;
  mix-blend-mode:screen;
}
body.lights-on .cursor-glow{opacity:1}

/* ---------- ambient flicker when lights turn on ---------- */
@keyframes flicker{
  0%,100%{filter:brightness(1)}
  10%{filter:brightness(1.2)}
  12%{filter:brightness(.85)}
  14%{filter:brightness(1.1)}
  16%{filter:brightness(.95)}
  20%{filter:brightness(1)}
}
body.lights-on .tile{animation:flicker 1400ms ease 1}

/* ---------- small screens ---------- */
@media (max-width: 1100px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 820px){
  .layout{grid-template-columns:1fr;padding:16px}
  .sidebar{display:none}
  .grid{grid-template-columns:repeat(2,1fr)}
  .site-header{grid-template-columns:1fr auto;gap:16px}
  .main-nav,.utility-nav{display:none}
}