/* Velore Design Studio brand layer (loaded after brand.css, which supplies the Experience layout).
   Source: Velore_Brand_Guidelines_2026 v1.0 (Oct 2026).
   Colours (p.05, "proposed standards pending brand approval"): Black #080809 · Champagne Gold #D4AE66 · Gold Highlight #F5D996 ·
   Gold Shadow #9C7940 · Red Accent #D9322E · White #FFFFFF. Red is an accent, never primary text (p.10).
   Type (p.10): editorial display = refined serif (Trajan-style / Cinzel) -> Cinzel (OFL); body/specs = clean sans (Helvetica / Inter) -> Inter (OFL).
   Logo: supplied artwork only (vector, extracted from the PDF), gold on black, no effects (p.03, 08-09). */
@font-face{font-family:"VL Head";src:url(../assets/velore/fonts/cinzel-latin.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"VL Body";src:url(../assets/velore/fonts/inter-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --vl-black:#080809; --vl-gold:#D4AE66; --vl-hi:#F5D996; --vl-shadow:#9C7940; --vl-red:#D9322E;
  --fl-black:var(--vl-black); --fl-blue:var(--vl-gold); --fl-silver:#cbbf9f; --fl-white:#FFFFFF;
  --fl-line:rgba(212,174,102,.28); --fl-sub:rgba(255,255,255,.66);
  --cond:"VL Head","Trajan Pro",Cinzel,Georgia,serif; --body:"VL Body",Inter,Helvetica,Arial,sans-serif; --hi:var(--vl-gold);
}
.vl-grad,.ld-head h1::after,.build-tag{border-image:none}
.ld-head h1::after{background:linear-gradient(90deg,var(--vl-shadow),var(--vl-hi),var(--vl-shadow))}
.ld-head h1{font-weight:500;letter-spacing:.12em}
.ld-tag{color:var(--vl-red);font:500 12px/1 var(--cond);letter-spacing:.24em}
.ld-logo{height:clamp(72px,13vh,124px)}
.ld-steps li.on b{color:var(--vl-black)}
.ld-num{color:var(--vl-gold);font-weight:500}
.ld-name{color:var(--fl-white);font-family:var(--cond);font-weight:600;letter-spacing:.18em;font-size:13px}
.ld-sz{font-weight:500}
.ld-design.soon{cursor:default;opacity:1}
.ld-design.soon:hover{transform:none;border-color:var(--fl-line)}
.ld-design.soon .ld-img{background:#000;position:relative}
.ld-design.soon .ld-img img{object-fit:cover;filter:saturate(.95)}
.ld-soon{position:absolute;left:8px;bottom:8px;font:600 9.5px/1 var(--body);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--vl-black);background:var(--vl-gold);padding:5px 7px;border-radius:1px}
.ld-note{margin:0 0 12px;font:500 12px/1.5 var(--body);color:var(--fl-sub)}
.brand-logo{height:24px;margin:10px}
.stage{background:radial-gradient(ellipse 80% 75% at 50% 45%,#ffffff 0%,#fbfaf7 52%,#d9d2c2 140%)}
.wheel-btn{color:var(--vl-black)}.wheel-btn span{color:rgba(8,8,9,.7)}.wheel-btn b{color:var(--vl-black)!important}
.win-row button.on,.win-row button[aria-pressed=true]{color:var(--vl-black)}
.exp-opt.on{background:rgba(212,174,102,.14)}
.vel-sw{display:block;width:34px;height:34px;border-radius:50%;flex:0 0 34px;border:1px solid rgba(255,255,255,.25)}
.vel-pick .exp-opt{text-align:left;max-width:190px}
.ld-foot{color:var(--vl-gold);letter-spacing:.16em;text-transform:uppercase}
.ld-foot span{text-transform:none;letter-spacing:.04em}
/* Velore catalog table (landing size step) */
.ld-cat{margin-top:18px;font-size:12px}.ld-cat h4{margin:0 0 6px;font-size:14px;letter-spacing:.04em}
.ld-finishes{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}.ld-finishes span{border:1px solid #c9a96e55;border-radius:12px;padding:2px 9px}
.ld-catsum,.ld-catfoot{opacity:.75;margin:4px 0 8px}.ld-cat details{margin:6px 0}.ld-cat summary{cursor:pointer;font-weight:600;padding:4px 0}
.ld-cat table{width:100%;border-collapse:collapse}.ld-cat th,.ld-cat td{text-align:left;padding:3px 6px;border-bottom:1px solid #ffffff14;white-space:nowrap}
.ld-cat th{opacity:.6;font-weight:500}.ld-cat tr.has3d td{background:#c9a96e22;font-weight:600}.ld-cat{overflow-x:auto}
/* 2026-10-26: real product photos (white studio background) on the landing style cards */
.ld-design .ld-img:has(.ld-photo),.ld-design.soon .ld-img:has(.ld-photo){background:#fff}
.ld-design .ld-img:has(.ld-photo){aspect-ratio:1;height:auto;width:100%}
.ld-design .ld-img img.ld-photo{object-fit:contain;filter:none;padding:0;width:100%;height:100%}
@media (max-width:699px){ .ld-design .ld-img:has(.ld-photo){width:92px;flex:0 0 92px;height:92px;align-self:center} .ld-design .ld-img em.ld-soon{font-size:8px!important;padding:2px 4px!important;left:4px!important;bottom:4px!important;right:auto!important;white-space:nowrap} }

/* 2026-10-28 E5-style clarity */
.vel-pick .exp-h{display:flex;flex-direction:column;gap:2px;text-transform:none}
.vel-stepno{font:700 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--vl-gold)}
.vel-sub{font:400 11px/1.3 var(--body);opacity:.7;letter-spacing:0}
.vel-pick .exp-opt{position:relative}
.vel-check{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--vl-gold);color:#111;font:700 11px/18px var(--body);text-align:center;font-style:normal;opacity:0;transform:scale(.6);transition:.15s}
.exp-opt.on .vel-check{opacity:1;transform:none}
.vel-stepper{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;z-index:5;background:rgba(10,10,10,.72);border:1px solid rgba(212,174,102,.35);border-radius:999px;padding:5px 8px;backdrop-filter:blur(6px)}
.vel-stepper button{display:flex;align-items:center;gap:6px;background:none;border:0;color:#bbb;font:600 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:999px;cursor:pointer}
.vel-stepper button b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--vl-gold);color:var(--vl-gold);font-size:10px}
.vel-stepper button.done:hover{color:#fff;background:rgba(255,255,255,.08)}
.vel-stepper button.on{color:#111;background:var(--vl-gold);cursor:default}.vel-stepper button.on b{border-color:#111;color:#111}
.vel-stepper i{width:14px;height:1px;background:rgba(212,174,102,.5)}
.vel-hint{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);z-index:5;background:rgba(10,10,10,.8);color:#f3eadb;border:1px solid rgba(212,174,102,.45);padding:9px 16px;border-radius:999px;font:500 12.5px/1.2 var(--body);pointer-events:none;transition:opacity .6s;white-space:nowrap}
.vel-hint.gone{opacity:0}
.ld-steps #ldStep3{opacity:.55}
@media (max-width:700px){.vel-stepper{top:8px}.vel-stepper button{font-size:9.5px;padding:4px 5px}.vel-hint{white-space:normal;width:80%;text-align:center;bottom:150px}}
@media (max-width:1240px){.vel-stepper{top:auto;bottom:24px}.vel-hint{bottom:76px}}
@media (max-width:700px){.vel-stepper{top:120px;bottom:auto}.vel-hint{top:166px;bottom:auto}}