/* XORLUX product catalogue — page styles.
   All tokens (--ink, --ink-dim, --bg, --bg-raised, --line, --line-soft, --red, --red-bright), .wrap, .eyebrow,
   .btn, header, mega-menu, breadcrumb, contact CTA, footer and the dp-* modal come from xorlux-chrome.css,
   which is copied verbatim from the live site. Only catalogue-specific components are styled here. */

:root{ --plate:#ECE9E3; --plate-deep:#DED9D0; }
img{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------------------------------------------------------------- listing header (type/copy left, the group's own products right) */
.lhead{padding:44px 0 60px;border-bottom:1px solid var(--line-soft);}
.lhead .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center;}
.lhead-copy h1{font-size:clamp(34px,4.6vw,60px);margin-top:14px;line-height:1.04;}
.lhead-copy p{margin-top:18px;font-size:15.5px;line-height:1.7;color:var(--ink-dim);max-width:48ch;}
.lhead-copy .meta{margin-top:22px;font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--ink-dim);}
.lhead-art{min-height:280px;max-height:340px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
@media(max-width:860px){.lhead .wrap{grid-template-columns:1fr;}.lhead-art{min-height:200px;order:-1;}}
.alsoin{font-size:12.5px;color:var(--ink-dim);padding:20px 0 0;}
.alsoin a{color:var(--ink);border-bottom:1px solid var(--line);}
.alsoin a:hover{color:var(--red);border-color:var(--red);}

/* cluster: a group shown through its own product renders */
.cluster{position:relative;width:100%;max-width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:clamp(8px,2.4vw,28px);overflow:hidden;}
.cluster img{flex:0 1 auto;min-width:0;max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply;}
.lhead-art .cluster{padding:6px 0;}
.lhead-art .cluster img{max-height:300px;max-width:34%;}
.lhead-art .cluster.c1 img{max-width:64%;}
.lhead-art .cluster.c2 img{max-width:44%;}
.lhead-art .cluster img:nth-child(2){opacity:.94;}
.lhead-art .cluster img:nth-child(3){opacity:.86;}
.lhead-art .cluster img:nth-child(4){opacity:.78;}
.card-img .cluster{padding:12% 10% 10%;}
.card-img .cluster img{max-height:82%;}
.card-img .cluster.c1 img{max-width:56%;}
.card-img .cluster.c2 img{max-width:40%;}
.card-img .cluster.c3 img{max-width:31%;}
.card-img .cluster img:nth-child(2){opacity:.9;}
.card-img .cluster img:nth-child(3){opacity:.78;}

/* ---------------------------------------------------------------- family rows (products overview / category) */
.family-rows{padding:70px 0 40px;}
.famrow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);padding:44px 0;border-bottom:1px solid var(--line-soft);align-items:center;}
.famrow:first-child{border-top:1px solid var(--line-soft);}
.famrow h2{font-size:clamp(30px,3.4vw,44px);line-height:1;margin-top:12px;}
.famrow h2 a:hover{color:var(--red-bright);}
.famrow p.d{color:var(--ink-dim);margin-top:14px;max-width:44ch;font-size:14.5px;line-height:1.65;}
.famrow .go{display:inline-block;margin-top:18px;font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--red);}
.famrow .go:hover{color:var(--red-bright);}
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
.strip a{display:block;}
.strip .plate{aspect-ratio:1/1;border-radius:2px;}
.strip small{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-dim);transition:.2s;}
.strip a:hover small{color:var(--ink);}
@media(max-width:800px){.famrow{grid-template-columns:1fr;}}

/* ---------------------------------------------------------------- stage (product renders lifted onto the dark site) */
.stage{position:relative;overflow:hidden;border-radius:2px;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:#FFFFFF;}
.stage img{width:100%;height:100%;object-fit:contain;padding:2%;}
.stage.main{aspect-ratio:1/1;}
.stage.main img{padding:3%;}
.stage.light{background:#FFFFFF;}
.stage.light img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;padding:2%;filter:none;border-radius:0;}
.stage.main.light img{padding:3%;}
.stage.photo{background:#111;}
.stage.photo img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover;filter:none;}
.stage.doc{background:#F4F2EE;}
.stage.doc img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;padding:6%;filter:none;}
.stage .badge{position:absolute;left:16px;bottom:14px;font-family:'DM Sans',sans-serif;font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:#8a8680;}
.stage.light .badge,.stage.doc .badge{color:#6b675f;}
.plate{background:#F4F2EE;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.plate img{width:100%;height:100%;object-fit:contain;padding:8%;}

/* ---------------------------------------------------------------- filters (mirrors .filters / .filter-chip on category.html) */
.filters{padding:36px 0;border-bottom:1px solid var(--line-soft);}
.filters .wrap{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.filter{position:relative;}
.filter-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:2px;padding:11px 18px;font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--ink-dim);cursor:pointer;transition:.2s;background:none;}
.filter-chip:hover,.filter[open] .filter-chip,.filter-chip.on{border-color:var(--red);color:var(--ink);}
.filter-chip svg{width:11px;height:11px;}
.filter-chip .n{color:var(--red);font-weight:700;}
.filter-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:20;background:#0A0A0A;border:1px solid var(--line);border-radius:2px;padding:10px;min-width:200px;max-width:320px;}
.filter[open] .filter-menu{display:flex;flex-wrap:wrap;gap:6px;}
.filter-menu .pill{font-size:12px;padding:7px 11px;}
.filter-count{margin-left:auto;font-size:12.5px;color:var(--ink-dim);}
.filter-clear{font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--ink-dim);transition:.2s;}
.filter-clear:hover{color:var(--red);}

/* ---------------------------------------------------------------- product cards (mirrors .family-card on category.html) */
.grid-section{padding:70px 0 110px;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.grid{grid-template-columns:1fr;}}
.card{border:1px solid var(--line-soft);border-radius:2px;overflow:hidden;transition:.25s;display:block;}
.card:hover{border-color:var(--red);transform:translateY(-3px);}
.card .stage{aspect-ratio:4/3;border-radius:0;}
.card:hover .stage img{transform:translateY(-3px);}
.card .stage img{transition:transform .35s ease;}
.card-body{padding:22px 24px 26px;}
.card-body h3{font-size:18px;}
.card-body p{margin-top:8px;font-size:13px;color:var(--ink-dim);line-height:1.6;}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.ptag{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:0.04em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line);border-radius:2px;color:var(--ink-dim);}
.card-foot{margin-top:16px;display:flex;justify-content:space-between;align-items:center;font-family:'DM Sans',sans-serif;font-size:12px;color:var(--ink-dim);}
.card-foot .go{color:var(--red);font-weight:600;}
.card.dim{opacity:.3;pointer-events:none;}

/* ---------------------------------------------------------------- product page */
.phero{padding:40px 0 0;}
.phero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;}
.gallery .plate{aspect-ratio:1/1;border-radius:2px;}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px;}
.thumb{background:#FFFFFF;aspect-ratio:1/1;position:relative;border:1px solid var(--line-soft);border-radius:2px;transition:border-color .15s;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.thumb img{width:100%;height:100%;object-fit:contain;padding:4%;}
.thumb.doc{background:#F4F2EE;}
.thumb.doc img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;padding:10%;}

.thumb.photo img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover;}
.thumb[aria-pressed="true"]{border-color:var(--red);}
.thumb:hover{border-color:var(--line);}
.pname{font-size:clamp(36px,4.6vw,56px);line-height:1.04;margin-top:14px;}
.ptype{margin-top:10px;font-size:16px;color:var(--ink-dim);}
.code-line{margin-top:24px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-dim);min-height:22px;}
.code-line .lab{letter-spacing:0.06em;text-transform:uppercase;font-size:11px;}
.code-line .val{color:var(--ink);font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;letter-spacing:0.04em;}
.code-line .val:empty::before{content:attr(data-empty);color:var(--ink-dim);font-family:'DM Sans',sans-serif;font-weight:400;font-size:12.5px;letter-spacing:0;}
.app-band{position:relative;margin-top:80px;aspect-ratio:21/8;min-height:320px;max-height:640px;overflow:hidden;background:#0a0a0a;}
.app-band img{width:100%;height:100%;object-fit:cover;}
.app-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.15) 0%,rgba(17,17,17,0) 30%,rgba(17,17,17,.75) 100%);pointer-events:none;}
.app-band .wrap{position:absolute;left:0;right:0;bottom:26px;z-index:1;}
.app-band span{font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(248,246,243,.85);}
@media(max-width:700px){.app-band{aspect-ratio:4/3;}}
.hl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 20px;margin-top:26px;padding:22px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.hl div{display:flex;flex-direction:column;gap:3px;}
.hl b{font-family:'Montserrat',sans-serif;font-weight:700;font-size:20px;letter-spacing:-0.01em;}
.hl small{color:var(--ink-dim);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;}

.row{display:grid;grid-template-columns:150px 1fr;gap:12px 20px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line-soft);}
.row .lab{font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-dim);padding-top:11px;}
.pills{display:flex;flex-wrap:wrap;gap:8px;}
.pill{font-family:'Montserrat',sans-serif;font-weight:600;font-size:12px;letter-spacing:0.03em;padding:9px 14px;border:1px solid var(--line);border-radius:2px;color:var(--ink-dim);transition:border-color .15s,background .15s,color .15s;min-height:38px;}
.pill:hover{border-color:var(--ink);color:var(--ink);}
.pill[aria-pressed="true"]{background:var(--ink);color:#000;border-color:var(--ink);}
.pill[disabled]{opacity:.32;cursor:not-allowed;}
.pill[disabled]:hover{border-color:var(--line);color:var(--ink-dim);}
.cct-note{font-size:12.5px;color:var(--ink-dim);margin-top:10px;max-width:58ch;line-height:1.55;}
.pdesc{margin-top:26px;color:var(--ink-dim);max-width:58ch;font-size:15px;line-height:1.7;}
.pactions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}
@media(max-width:900px){
  .phero .wrap{grid-template-columns:1fr;gap:28px;}
  .row{grid-template-columns:1fr;gap:8px;padding:14px 0;}
  .row .lab{padding-top:0;}
}

/* ---------------------------------------------------------------- sections + spec ledger */
.section{padding:80px 0 0;}
.section:last-of-type{padding-bottom:110px;}
.section-h{margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid var(--line-soft);display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.section-h h2{font-size:clamp(24px,2.6vw,32px);margin-top:12px;}
.section-h p{color:var(--ink-dim);font-size:13.5px;max-width:52ch;line-height:1.6;}
.ledger{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,5vw,80px);}
.ledger>div{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;}
.ledger dt{color:var(--ink-dim);}
.ledger dd{color:var(--ink);}
@media(max-width:700px){.ledger{grid-template-columns:1fr;}}
.acc{border-top:1px solid var(--line-soft);}
.acc details{border-bottom:1px solid var(--line-soft);}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;}
.acc summary::-webkit-details-marker{display:none;}
.acc summary svg{width:14px;height:14px;color:var(--red);transition:transform .2s;}
.acc details[open] summary svg{transform:rotate(45deg);}
.acc .ledger{padding:0 0 22px;}
.spec-foot{font-size:12.5px;color:var(--ink-dim);margin-top:18px;max-width:72ch;line-height:1.6;}

/* ---------------------------------------------------------------- accessories / resources */
.accs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px;}
.acc-card .plate{aspect-ratio:1/1;border-radius:2px;}
.acc-card p{margin-top:12px;font-size:14px;}
.res{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:900px){.res{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.res{grid-template-columns:1fr;}}
.res button{border:1px solid var(--line-soft);border-radius:2px;text-align:left;padding:26px 24px 24px;display:flex;flex-direction:column;gap:26px;min-height:140px;transition:.25s;}
.res button:hover{border-color:var(--red);transform:translateY(-3px);}
.res b{font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;letter-spacing:-0.01em;}
.res span{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;color:var(--red);}

/* ---------------------------------------------------------------- request modals (dp-* classes from the site chrome) */
.dp-modal h3.dp-title{font-family:'Montserrat',sans-serif;font-size:26px;font-weight:700;color:var(--ink);}
.dp-modal .summary{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 20px;padding:16px 18px;background:#141414;border:1px solid var(--line);}
.dp-modal .summary div{display:flex;flex-direction:column;gap:3px;}
.dp-modal .summary small{font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-dim);}
.dp-modal .summary b{font-family:'Montserrat',sans-serif;font-weight:600;font-size:13px;letter-spacing:0.02em;}
.dp-field select{width:100%;background:#141414;border:1px solid var(--line);color:var(--ink);padding:12px 14px;font-family:'DM Sans',sans-serif;font-size:14px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23A9A39A' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;}
.dp-field select:focus{outline:none;border-color:var(--red);}
.dp-check{margin-top:22px;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-dim);line-height:1.5;}
.dp-check input{margin-top:3px;accent-color:var(--red);}
.dp-status{margin-top:14px;font-size:13px;color:var(--ink-dim);}
.dp-status.err{color:#e5aaaa;}
.empty{padding:64px 0;color:var(--ink-dim);max-width:60ch;}

/* ---------------------------------------------------------------- family / category cards (photo-led, like .family-card) */
.card-img{aspect-ratio:4/3;background:linear-gradient(160deg,#1c1a17,#0b0a09);overflow:hidden;position:relative;}
.card-img>img{width:100%;height:100%;object-fit:cover;}
.card-img .stage{position:absolute;inset:0;aspect-ratio:auto;}
.card-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-dim);}
.type-block{padding:70px 0 20px;}
.type-block:last-of-type{padding-bottom:110px;}
.type-block .section-h h2 a:hover{color:var(--red-bright);}
.cat-intro-copy .meta a{color:var(--ink);border-bottom:1px solid var(--line);}
.cat-intro-copy .meta a:hover{color:var(--red);border-color:var(--red);}

/* ---------------------------------------------------------------- coming soon (categories without products yet) */
.soon{margin-top:40px;padding-top:26px;border-top:1px solid var(--line-soft);}
.soon-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.soon-head p{color:var(--ink-dim);font-size:13.5px;}
.soon-list{display:flex;flex-wrap:wrap;gap:10px 12px;}
.soon-label{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--red);}
.soon a{font-size:13px;color:var(--ink-dim);padding:6px 12px;border:1px solid var(--line-soft);border-radius:2px;transition:.2s;}
.soon a:hover{color:var(--ink);border-color:var(--line);}
.strip .stage{aspect-ratio:1/1;}
.strip .stage img{max-width:70%;max-height:70%;}

/* ---------------------------------------------------------------- family groups on a category page */
.fam-group{padding:0 0 56px;}
.fam-group + .fam-group{padding-top:48px;border-top:1px solid var(--line-soft);}
.fam-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:26px;}
.fam-head h2{font-size:clamp(24px,2.6vw,32px);}
.fam-head h2 a:hover{color:var(--red-bright);}
.fam-head p{color:var(--ink-dim);font-size:14px;max-width:48ch;}
.fam-head .go{margin-left:auto;font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--red);white-space:nowrap;}
.fam-head .go:hover{color:var(--red-bright);}
.card-img{aspect-ratio:4/3;background:#FFFFFF;overflow:hidden;position:relative;}
.card:hover .card-img .cluster img{transform:translateY(-4px);}
.card-img .cluster img{transition:transform .35s ease;}

/* ---------------------------------------------------------------- supplied section photography */
.scene{position:absolute;inset:0;overflow:hidden;background:#0d0d0d;}
.lhead-art .scene{position:relative;inset:auto;width:100%;height:100%;min-height:300px;border-radius:2px;}
.scene img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.card:hover .scene img{transform:scale(1.03);}
.lhead.has-scene .lhead-art{max-height:none;min-height:300px;}
.card-img .scene{inset:0;}

/* clusters of studio renders sit on the same light panel so nothing is clipped or lost */
.lhead-art .cluster,.card-img .cluster{background:#FFFFFF;border-radius:2px;padding:3% 2%;}
.lhead-art .cluster{min-height:300px;}
.card:hover .card-img .cluster img{transform:none;}

/* ---------------------------------------------------------------- RAL finish chips */
.swatches{display:flex;flex-wrap:wrap;gap:10px;}
.chip{width:46px;text-align:center;padding:0;background:none;border:0;}
.chip span{display:block;width:46px;height:34px;border-radius:2px;border:1px solid rgba(248,246,243,.22);transition:.15s;}
.chip em{display:block;font-style:normal;font-family:'DM Sans',sans-serif;font-size:10px;color:var(--ink-dim);margin-top:5px;letter-spacing:.02em;}
.chip:hover span{border-color:var(--ink);}
.chip[aria-pressed="true"] span{border-color:var(--red);box-shadow:0 0 0 2px rgba(198,40,40,.35);}
.chip[aria-pressed="true"] em{color:var(--ink);}
.finish-name{margin-top:12px;font-size:12.5px;color:var(--ink-dim);min-height:16px;}
.finish-fixed{font-size:14px;color:var(--ink-dim);padding-top:9px;display:inline-block;}

/* ---------------------------------------------------------------- empty category: a considered dark state */
.dark-state{position:relative;padding:clamp(48px,7vw,96px) clamp(24px,5vw,72px);border:1px solid var(--line-soft);border-radius:2px;overflow:hidden;
  background:radial-gradient(120% 140% at 12% 0%, rgba(198,40,40,.10) 0%, rgba(198,40,40,0) 46%), #0d0d0d;}
.dark-state::after{content:"";position:absolute;right:-10%;top:-40%;width:52%;height:180%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(248,246,243,.09), rgba(248,246,243,0) 70%);}
.dark-state h2{position:relative;font-size:clamp(28px,3.6vw,46px);line-height:1.06;margin-top:14px;max-width:18ch;}
.dark-state p{position:relative;margin-top:18px;color:var(--ink-dim);font-size:15.5px;line-height:1.7;max-width:56ch;}
.dark-actions{position:relative;display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}

.lhead.no-art .wrap{grid-template-columns:1fr;}
.lhead.no-art .lhead-copy h1{max-width:16ch;}

.dark-note{position:relative;margin-top:20px;padding-top:20px;border-top:1px solid var(--line-soft);color:var(--ink-dim);font-size:14px;line-height:1.65;max-width:56ch;}
.dark-back{position:relative;display:inline-block;margin-top:22px;font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--ink-dim);}
.dark-back:hover{color:var(--red);}
.soon-cta{font:inherit;color:var(--red);border:0;background:none;padding:0;cursor:pointer;}
.soon-cta:hover{color:var(--red-bright);text-decoration:underline;}