/* A-Design theme layer: loads after site.css and lux.css. All colours come from assets/palette.css
   (one palette file per look: palette-espresso.css, palette-emerald.css, palette-navy.css). */
:root{
  --black:var(--bg); --ink:var(--card); --panel:var(--field); --ivory:var(--text); --cream:var(--text);
  --gold-soft:rgba(201,169,110,.14);
}
html{background:var(--bg)}
body,body.lux{background:var(--bg);color:var(--text2);--muted:var(--muted-c)}
::selection{background:var(--gold);color:var(--bg)}
h1,h2,h3{color:var(--text)}
.eyebrow,.lux .eyebrow{color:var(--gold-ink)}

/* header */
.lux .top.solid,.lux:not(.home) .top{background:var(--bar);border-bottom-color:var(--line)}
.lux .bt b{color:var(--text)}
.lux .bt small{color:var(--gold-ink)}
.lux .menu a,.menu a{color:var(--text2)}
.menu a.on,.menu a:hover{color:var(--gold-ink)}
@media (max-width:760px){.lux .menu{border-top-color:var(--line)}}
.login{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.login:hover{background:var(--text);border-color:var(--text);color:var(--bg)}

/* buttons */
.btn{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.btn:hover{background:var(--text);border-color:var(--text);color:var(--bg)}
.btn.ghost{background:transparent;color:var(--gold-ink);border-color:var(--gold)}
.btn.ghost:hover{background:var(--gold-soft);color:var(--text)}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#fff}

/* hero */

.lx-hero::after{background:linear-gradient(transparent,var(--bg))}

.lx-copy h1{color:var(--text)}
.lx-copy .lead{color:var(--text2)}

/* sections */
.band{background:var(--bg2);border-color:var(--line)}
.coll{border-color:var(--line)}
.coll .lab{background:linear-gradient(transparent,var(--shade))}
.lux .coll .lab small{color:var(--text2)}
.more-link a{color:var(--gold-ink)}

/* cutouts on a clean backdrop (home page tiles and most loved) */
.cutbg,.coll.cut{background:radial-gradient(75% 60% at 50% 38%,var(--stage-a),var(--stage-b) 70%)}
.coll.cut img{object-fit:contain;padding:12% 10% 18%;filter:drop-shadow(0 16px 20px rgba(0,0,0,.35))}

/* cards */
.card,.lcard{background:var(--card);border-color:var(--line)}
.card .ph,.lcard .ph{background:var(--field)}
.card .code,.lcard .code{color:var(--text)}
.card .pr{color:var(--gold-ink)}

/* catalogue */
.tab{color:var(--text2);border-color:var(--line)}
.tab[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.toolbar{background:var(--bg)}
.toolbar .search,.frow select,.picker select,.picker input{background:var(--field);border-color:var(--line);color:var(--text)}
.fbtn{color:var(--gold-ink);border-color:var(--gold)}
.fbtn b{background:var(--gold);color:var(--bg)}
.filters{background:var(--card);border-color:var(--line)}
.fgroup h4,.linkbtn{color:var(--gold-ink)}
.chip{color:var(--text2);border-color:var(--line)}
.chip[aria-pressed=true]{background:var(--gold-soft);border-color:var(--gold);color:var(--text)}

/* piece page */
.hero-ph{background:var(--field);border-color:var(--line)}
.info h1 .c,.price,.avail,.pn,.crumbs a:hover{color:var(--gold-ink)}
.specs dd{color:var(--text)}
.share button,.share-ok{color:var(--gold-ink)}
.share button{border-color:var(--line)}

/* room page */
.stage{background:var(--card)}
.panel,.quiz{background:var(--card);border-color:var(--line)}
.strip button{background:var(--field)}
.qopt,.qcard{background:var(--field)}
.mode[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:var(--bg)}

/* reviews, footer */
.rev q{color:var(--text)}
.foot,.lux .foot{color:var(--text2);border-top-color:var(--line)}
.foot .slogan{color:var(--text)}
.social a{color:var(--gold-ink)}
.social a:hover{background:var(--gold);color:var(--bg)}
.lux .fab{background:var(--card);color:var(--gold-ink);border-color:rgba(201,169,110,.6)}

/* ------------------------------------------------ made for your ceiling */
.made{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.made li{position:relative;background:var(--card);border:1px solid var(--line);padding:18px 18px 22px}
.made .art{display:block;aspect-ratio:4/3;margin:0 0 14px;background:radial-gradient(80% 70% at 50% 40%,var(--stage-a),var(--stage-b))}
.made svg{width:100%;height:100%;display:block;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.made svg .soft{stroke:rgba(201,169,110,.35);stroke-width:1}
.made svg .glow{stroke:none;fill:url(#mfGlow)}
.made svg .ray{stroke:#E4C68E}
.made .n{color:var(--gold-ink);font-size:14px;letter-spacing:.24em}
.made h3{font-size:clamp(26px,6vw,30px);font-weight:400;margin:4px 0 6px}
.made p{margin:0;color:var(--muted-c);font-size:18px}
@media (min-width:860px){.made{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.made li{padding:22px 22px 26px}}

/* ------------------------------------------------ inspiration */
.insp{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 calc(var(--gut) * -1);padding:4px var(--gut) 12px;scrollbar-width:none}
.insp::-webkit-scrollbar{display:none}
.insp figure{margin:0;scroll-snap-align:start}
.scene{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);background:#EDE3D2}
.scene svg.rm{position:absolute;inset:0;width:100%;height:100%}
.scene .piece-img{position:absolute;left:50%;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 14px 18px rgba(70,48,26,.28))}
.scene .halo{position:absolute;left:50%;transform:translate(-50%,-50%);border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle closest-side,rgba(255,228,178,.75),rgba(255,214,150,.25) 45%,rgba(255,214,150,0))}
.scene .tag{position:absolute;left:12px;top:12px;z-index:3;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#FBF7EE;background:rgba(30,22,16,.55);padding:4px 10px}
.insp figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 2px 0;color:var(--text2);font-size:18px}
.insp figcaption a{color:var(--gold-ink);white-space:nowrap;border-bottom:1px solid rgba(201,169,110,.35)}
@media (min-width:860px){.insp{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:20px}}

/* Lenis */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* GSAP handles reveals; nothing is hidden without JS */
.rv{opacity:1;transform:none;transition:none}

.coll.cut img{height:60%;padding:9% 10% 0}
.coll.cut .lab{background:none}
.lux .coll.cut .lab b{font-size:clamp(18px,4.8vw,28px);white-space:nowrap}
.coll.cut .lab{padding-top:0}

/* ================= 16 Nov layout ================= */
/* hero: gold outline with the crystal as its last drop; softer glow */
.lx-frame{position:absolute;z-index:1;overflow:visible;pointer-events:none}
.lx-frame path{stroke:var(--gold);stroke-width:.65;stroke-linecap:round;stroke-linejoin:round}
.lx-frame .base path{opacity:.85}





/* small WhatsApp button at the end of a section */
.sec-wa{text-align:center;margin:30px 0 0}
.wa-mini{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid rgba(201,169,110,.45);border-radius:30px;color:var(--gold-ink);font-size:16px;letter-spacing:.03em;transition:background .3s,color .3s}
.wa-mini:hover{background:var(--gold);color:var(--bg)}
.wa-mini svg{width:18px;height:18px}
.sec-cta{text-align:center;margin-top:22px}

/* before and after slider */
.ba2{margin:0 auto;max-width:960px}
.ba2-stage{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;--x:50%;cursor:ew-resize;background:#2a241d}
.ba2-layer{position:absolute;inset:0}
.ba2-layer svg,.ba2-layer img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba2-before svg{filter:brightness(.38) saturate(.5)}
.ba2-after{clip-path:inset(0 0 0 var(--x));will-change:clip-path}
.ba2-after>img:not(.ph){position:absolute;left:50%;top:0;width:30%;transform:translateX(-50%);filter:drop-shadow(0 14px 18px rgba(40,26,12,.35))}
.ba2-glow{position:absolute;left:50%;top:26%;width:95%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle closest-side,rgba(255,228,178,.6),rgba(255,214,150,.18) 50%,transparent)}
.ba2-bulb{position:absolute;left:50%;top:0;width:2px;height:24%;background:#5a4d3e}
.ba2-bulb::after{content:"";position:absolute;left:50%;bottom:-12px;width:14px;height:16px;border-radius:50% 50% 45% 45%;background:#8c8475;transform:translateX(-50%)}
.ba2-h{position:absolute;top:0;bottom:0;left:var(--x);width:48px;margin-left:-24px;z-index:3;display:grid;place-items:center;outline:none}
.ba2-h::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--text);box-shadow:0 0 8px rgba(0,0,0,.35)}
.ba2-h i{position:relative;width:46px;height:46px;border-radius:50%;border:1px solid var(--text);background:rgba(15,13,11,.6);display:grid;place-items:center}
.ba2-h i::after{content:"\2039\00a0\203A";color:var(--text);font-size:22px;line-height:1;font-style:normal}
.ba2-h:focus-visible i{box-shadow:0 0 0 3px var(--gold)}
.ba2-l{position:absolute;top:12px;z-index:2;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--text);background:rgba(15,13,11,.55);padding:5px 11px;pointer-events:none}
.ba2-l.b{left:12px}.ba2-l.a{right:12px}
.ba2-cap{text-align:center;color:var(--muted-c);font-size:17px;margin:12px 0 0}

/* imagine it in your home */
.imagine{margin-top:56px}
.imagine-t{text-align:center;font-weight:300;font-size:clamp(28px,6.4vw,42px);margin:0 0 14px}
.itabs{display:flex;justify-content:center;gap:4px;border-bottom:1px solid var(--line);margin:0 auto 18px;max-width:520px}
.itabs button{flex:1 1 0;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 4px;color:var(--text2);font-size:clamp(15px,4.2vw,18px);letter-spacing:.04em;cursor:pointer;white-space:nowrap}
.itabs button[aria-selected=true]{color:var(--gold-ink);border-bottom-color:var(--gold)}
.ipanel .scene{max-width:440px;margin:0 auto}
.icap{text-align:center;color:var(--text2);font-size:18px;margin:12px 0 0}
.icap a{color:var(--gold-ink);border-bottom:1px solid rgba(201,169,110,.35);margin-left:6px}

/* five collections: phones 2 columns with the lamps across the bottom, desktop one row of 5 */
.colls .coll.lamps{grid-column:1/-1;aspect-ratio:16/9}
.coll.lamps .lamp3{position:absolute;inset:7% 8% 36%;display:flex;align-items:flex-end;justify-content:center;gap:7%}
.coll.lamps .lamp3 img{height:100%;width:auto;max-width:30%;object-fit:contain;padding:0;filter:drop-shadow(0 12px 16px rgba(0,0,0,.35))}
.coll.lamps .lamp3 img:first-child{height:62%;align-self:center}
.lux .coll.lamps .lab small{color:var(--muted-c)}
@media (min-width:900px){
  .colls{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
  .colls .coll.lamps{grid-column:auto;aspect-ratio:4/5}
  .coll.lamps .lamp3{inset:9% 6% 38%;gap:4%}
}

/* visit the showroom */
.visit{max-width:720px;margin:0 auto;text-align:center;border:1px solid var(--line);background:linear-gradient(160deg,rgba(201,169,110,.08),transparent 60%),var(--card);padding:30px 20px}
.visit-addr{font-size:clamp(24px,6vw,30px);color:var(--text);margin:0 0 6px}
.visit-hours{color:var(--gold-ink);letter-spacing:.04em;margin:0 0 14px}
.visit-note{color:var(--muted-c);margin:0 auto 22px;max-width:480px}
.visit-btns{display:flex;flex-direction:column;gap:10px}
.visit-btns .btn svg{width:22px;height:22px}
@media (min-width:600px){.visit-btns{flex-direction:row;justify-content:center;flex-wrap:wrap}}
@media (min-width:900px){.ba2{max-width:760px}}

/* ================= 16 Nov, round 2 ================= */
/* living room tab: darker, muted room so a silver piece stands out */
.scene .halo.soft{background:radial-gradient(circle closest-side,rgba(255,236,206,.32),rgba(255,224,170,.1) 45%,rgba(255,214,150,0))}


/* before/after: the drawn room, and the chandelier at its earlier size with its glow */
.ba2.old .ba2-stage{aspect-ratio:4/3}
@media (min-width:700px){.ba2.old .ba2-stage{aspect-ratio:16/10}}
.ba2.old .ba2-after>img.ba-lamp{width:40%;top:0;z-index:2;filter:drop-shadow(0 16px 26px rgba(0,0,0,.45))}
.ba2-before{z-index:0}.ba2-after{z-index:1}   /* each side is its own layer: the lit side always covers the bare bulb */
/* footer info: one line with dots, one part per line on phones */
.finfo .fdot{font-style:normal;color:var(--gold);white-space:pre;margin:0 .3em}
@media (max-width:640px){.finfo span{display:block}.finfo .fdot{display:none}}

/* ================= inner pages: same look as the home page ================= */
/* page titles: centred eyebrow, light serif title, gold rule */
.page-head{text-align:center;padding:clamp(30px,6vw,56px) 0 clamp(14px,3vw,24px)}
.page-head h1{font-size:clamp(38px,8vw,60px);font-weight:300;letter-spacing:.01em;color:var(--text)}
.page-head h1::after{content:"";display:block;width:56px;height:1px;margin:18px auto 0;background:var(--gold)}
.page-head .sub{color:var(--muted-c);margin:16px auto 0;max-width:460px}
.room .page-head{padding-top:clamp(18px,4vw,40px)}
/* gentle fade and rise on load (off with reduced motion) */
@keyframes ad-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.page-head,.tabs,.toolbar,.room-grid,.modes{animation:ad-rise .9s cubic-bezier(.2,.7,.2,1) both}
.tabs{animation-delay:.08s}.toolbar,.modes{animation-delay:.14s}.room-grid{animation-delay:.2s}
.grid .card{animation:ad-rise .7s cubic-bezier(.2,.7,.2,1) both}
.grid .card:nth-child(2){animation-delay:.05s}.grid .card:nth-child(3){animation-delay:.1s}.grid .card:nth-child(4){animation-delay:.15s}
.grid .card:nth-child(5){animation-delay:.2s}.grid .card:nth-child(6){animation-delay:.25s}.grid .card:nth-child(7){animation-delay:.3s}.grid .card:nth-child(8){animation-delay:.35s}
@media (prefers-reduced-motion:reduce){.page-head,.tabs,.toolbar,.room-grid,.modes,.grid .card{animation:none}}

/* catalogue: tabs, search, filters */
.catpage{padding-bottom:40px}
.tabs{justify-content:flex-start}
@media (min-width:760px){.tabs{justify-content:center}}
.tab{font-size:16px;letter-spacing:.04em;padding:8px 18px}
.tab small{color:var(--gold-ink);opacity:1;margin-inline-start:6px}
.tab[aria-pressed=true] small{color:var(--bg)}
.toolbar{gap:10px;padding:14px 0}
.toolbar .search{border-radius:0;padding:12px 16px}
.fbtn{border-radius:0;padding:11px 18px;letter-spacing:.06em}
.filters{border-radius:0;padding:18px}
.fgroup h4{font-size:12px;letter-spacing:.24em;margin-bottom:10px}
.chip{font-size:15px}
.fbreak{flex-basis:100%;height:0}
.chip.sep{border-style:dashed}
.count{letter-spacing:.04em}
.card .meta{padding:12px 14px 14px}
/* desktop: filters open on the side */
@media (min-width:1000px){
  .fbtn{display:none}
  .cat-body{display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;align-items:start}
  .cat-side{position:sticky;top:calc(var(--hh,80px) + 16px);max-height:calc(100vh - var(--hh,80px) - 32px);overflow:auto}
  .cat-side .toolbar{position:static;padding:0 0 12px}
  .cat-body .filters{display:block;margin:0}
  .cat-body .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .frow{flex-direction:column;align-items:flex-start}
}
@media (min-width:1280px){.cat-body .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* try in your room */
.room{padding-bottom:50px}
.room .modes{max-width:560px;margin:0 auto 18px}
.mode{letter-spacing:.04em}
.stage{border:1px solid var(--line);background:radial-gradient(75% 60% at 50% 38%,var(--stage-a),var(--stage-b) 70%)}
.stage .drop p{color:var(--text2);font-size:19px}
.panel{background:linear-gradient(160deg,rgba(201,169,110,.07),transparent 60%),var(--card);padding:20px}
.panel label{letter-spacing:.06em}
.quiz{background:linear-gradient(160deg,rgba(201,169,110,.07),transparent 60%),var(--card)}
.qopt{border-radius:0}
.strip button{border-color:var(--line)}
.pick b{font-weight:400}
.ba2.old .ba2-after svg{filter:brightness(.74) saturate(.9)}
.ba2.old .ba2-after .ba-glow{mix-blend-mode:screen;width:90%;top:-14%}

/* slim search box with a magnifying glass */
.toolbar{align-items:center}
.sbox{position:relative;flex:1 1 auto;min-width:0;max-width:340px;display:flex;align-items:center;margin:0}
.sbox svg{position:absolute;left:12px;width:16px;height:16px;color:var(--gold-ink);pointer-events:none}
.toolbar .sbox .search{width:100%;height:40px;padding:0 12px 0 36px;font-size:16px;border-radius:0}
.toolbar .fbtn{height:40px;padding:0 16px;display:inline-flex;align-items:center}
@media (min-width:1000px){.sbox{max-width:none}}@media (min-width:1000px){.toolbar .fbtn{display:none}}