/* Product cards: the lamp on a quiet plinth (white studio photos blend into it), name and key figures below. */
:root{--plinth:#ebebea}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--plinth:#efefee}}
:root[data-theme="light"]{--plinth:#efefee}
:root[data-theme="dark"]{--plinth:#dededd}

.g5{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(12px,1.6vw,22px);row-gap:clamp(26px,3vw,40px)}
@media (min-width:720px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.g5{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1280px){.g5{grid-template-columns:repeat(5,minmax(0,1fr))}}

.pcard .pc-stage{aspect-ratio:1/1.12;border:0;background:var(--plinth);isolation:isolate;overflow:hidden}
/* the photos are studio shots on white: multiply lets the plinth show through the white */
.pcard .pc-stage .stage-img,.pcard .pc-stage .pc-alt{position:absolute;left:9%;top:8%;width:82%;height:84%;right:auto;bottom:auto;object-fit:contain;mix-blend-mode:multiply;transition:opacity .5s ease}
.pcard .pc-stage .pc-alt{opacity:0}
.pcard .pc-stage svg{position:relative;z-index:1;height:72%}
.pc-light,.pc-spec{display:none}
.pcard .pc-stage .tag{z-index:3}
.pc-info{display:grid;gap:4px;min-width:0}
.pcard .pc-info h3{margin:0;font-size:clamp(.98rem,.9rem + .25vw,1.1rem)!important;line-height:1.3!important;font-weight:600;
	background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .5s cubic-bezier(.22,1,.36,1);justify-self:start}
.pcard .pc-info .meta{font-size:12.5px}
@media (hover:hover) and (pointer:fine){
	.pcard:hover .has-alt .stage-img{opacity:0}
	.pcard:hover .has-alt .pc-alt{opacity:1}
	.pcard:hover .pc-info h3{background-size:100% 1px}
}
.pcard:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.pcard .pc-stage{border-color:transparent!important}
.pcard .pc-stage::before,.pcard .pc-stage::after{display:none}

/* Product page gallery: lit plinth, swipeable track with depth, hover loupe, full-screen view */
.pg-stage{border:0!important;background:var(--plinth);isolation:isolate;--lk:var(--glow,255,214,170)}

.pg-stage>svg{position:relative;z-index:1}
.pg-track{position:absolute;inset:0;z-index:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;outline:0}
.pg-track::-webkit-scrollbar{display:none}
.pg-track:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.pg-slide{flex:0 0 100%;margin:0;position:relative;background:var(--plinth);display:grid;place-items:center;overflow:hidden;scroll-snap-align:center;scroll-snap-stop:always}
.pg-img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply;cursor:zoom-in;user-select:none;-webkit-user-drag:none;
	transform:scale(calc(1 - var(--d,0) * .1));opacity:calc(1 - var(--d,0) * .65);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.pg-slide.is-zoom .pg-img{transform:scale(2);cursor:zoom-out}
.pg-zoom,.pg-btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(40,30,20,.12);border-radius:50%;
	background:rgba(255,252,247,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#26282b;cursor:pointer;transition:background .25s,transform .25s}
.pg-zoom:hover,.pg-btn:hover{background:#fffdf9;transform:scale(1.06)}
.pg-zoom:focus-visible,.pg-btn:focus-visible,.pg-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pg-zoom svg,.pg-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pg-zoom{position:absolute;top:14px;right:14px;z-index:3}
.pg-ui{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;display:flex;align-items:center;gap:12px;color:#26282b}
.pg-count{font-size:13px;letter-spacing:.04em;min-width:58px}
.pg-count b{font-size:20px;font-weight:700}
.pg-count span{opacity:.6}
.pg-bar{flex:1;height:2px;background:rgba(40,30,20,.14);position:relative;overflow:hidden}
.pg-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.pg-thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.pg-thumbs::-webkit-scrollbar{display:none}
.pg-thumb{flex:none;position:relative;width:64px;height:64px;padding:6px;border:0;background:var(--plinth);cursor:pointer;opacity:.5;transition:opacity .3s}
.pg-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block}
.pg-thumb:hover{opacity:.85}
.pg-thumb[aria-current="true"]{opacity:1}
.pg-thumb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.pg-thumb[aria-current="true"]::after{transform:none}
@media (min-width:901px){
	.pg.has-thumbs{grid-template-columns:64px minmax(0,1fr);grid-template-areas:'thumbs stage';align-items:start}
	.pg.has-thumbs .pg-stage{grid-area:stage}
	.pg.has-thumbs .pg-thumbs{grid-area:thumbs;flex-direction:column;overflow-x:visible;overflow-y:auto;max-height:calc(100svh - 150px)}
	.pg-thumb::after{top:0;bottom:0;right:auto;width:2px;height:auto;transform:scaleY(0)}
	.pg-thumb[aria-current="true"]::after{transform:none}
	.pdp-media.pg.has-thumbs .stage{height:min(calc(100svh - 150px),calc((100vw - 2*var(--gut)) * .5 * 1.05 - 72px));max-height:calc(100svh - 150px)}
}
/* full-screen view */
.pg-lb{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#efe9df;color:#26282b;overflow:hidden}
.pg-lb::backdrop{background:rgba(10,8,6,.6)}
.pg-lb[open]{display:block;animation:pg-in .35s cubic-bezier(.22,1,.36,1)}
@keyframes pg-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.pg-lb-track{position:absolute;inset:0 0 72px;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline:0}
.pg-lb-track::-webkit-scrollbar{display:none}
.pg-lb-track figure{flex:0 0 100%;margin:0;display:grid;place-items:center;scroll-snap-align:center;overflow:hidden}
.pg-lb-track img{max-width:92%;max-height:92%;object-fit:contain;mix-blend-mode:multiply;cursor:zoom-in;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.pg-lb-track figure.is-zoom img{transform:scale(2);cursor:zoom-out}
.pg-lb-ui{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;align-items:center;gap:10px}
.pg-lb-count{min-width:64px;text-align:center;font-size:14px}
.pg-lb-x{position:absolute;right:20px;bottom:0}
@media (prefers-reduced-motion:reduce){.pg-img,.pg-bar i,.pg-lb-track img{transition:none}.pg-lb[open]{animation:none}}

/* Technical drawing: pointing at a card turns the photo into the fitting's installation section */
.pc-draw{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .45s ease;pointer-events:none;
	background:var(--plinth) radial-gradient(rgba(52,54,58,.13) .6px,transparent .7px) 0 0/10px 10px}
.td,.pcard .pc-stage .pc-draw svg.td,.stage .pdp-draw svg.td{display:block;position:static;width:100%;height:100%;overflow:visible}
.td path,.td rect,.td ellipse,.td circle{fill:none;stroke-linecap:round;stroke-linejoin:round}
.td .td-f{fill:var(--plinth)}
/* the owner's own drawing: shown whole, its white ground melting into the plinth */
.tdp.is-own{display:grid;place-items:center;padding:6%}
.tdp.is-own .td-own{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.pc-draw .tdp.is-own .td-own{opacity:0;transform:scale(.97);transition:opacity .45s ease .1s,transform .6s cubic-bezier(.22,1,.36,1) .1s}
.pcard:hover .pc-draw .tdp.is-own .td-own,.pcard:focus-visible .pc-draw .tdp.is-own .td-own{opacity:1;transform:none}
/* drawing traced from the product photo */
.tdp{display:block;width:100%;height:100%}
.tdp.is-photo .td{animation:td-in .5s ease both}
@keyframes td-in{from{opacity:0}to{opacity:1}}
.td .td-a{fill:#55595e;stroke:none}
.td-l{stroke:#34363a;stroke-width:.7}
.td-h{stroke:#34363a;stroke-width:.6;opacity:.45}
.td-o{stroke:#26282b;stroke-width:1.05}
.td-d{stroke:#55595e;stroke-width:.6}
.td-b{stroke:#b07a3c;stroke-width:.9;stroke-dasharray:3 3}
.td-t{fill:#34363a;font:400 10px/1 var(--f-body,system-ui);letter-spacing:.02em;paint-order:stroke;stroke:var(--plinth);stroke-width:3px;stroke-linejoin:round}
.td-s{font-size:8px}
.td-m{fill:#6c7075}
.td-cap{opacity:.62}
@media (hover:hover) and (pointer:fine){
	.pcard:hover .has-draw .stage-img,.pcard:focus-visible .has-draw .stage-img{opacity:0}
	.pcard:hover .pc-draw,.pcard:focus-visible .pc-draw{opacity:1}
	.pc-draw [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1) .1s}
	.pcard:hover .pc-draw [pathLength],.pcard:focus-visible .pc-draw [pathLength]{stroke-dashoffset:0}
	.pc-draw .td-t,.pc-draw .td-b,.pc-draw .td-h,.pc-draw .td-a{opacity:0;transition:opacity .4s ease .55s}
	.pcard:hover .pc-draw .td-t,.pcard:hover .pc-draw .td-b,.pcard:hover .pc-draw .td-a{opacity:1}
	.pcard:hover .pc-draw .td-h{opacity:.45}
	.pc-draw .td-img{clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.65,0,.35,1) .05s}
	.pcard:hover .pc-draw .td-img,.pcard:focus-visible .pc-draw .td-img{clip-path:inset(0)}
	.pc-draw .td-photo .td-d,.pc-draw .td-photo .td-l{opacity:0;transition:opacity .4s ease .55s}
	.pcard:hover .pc-draw .td-photo .td-d,.pcard:hover .pc-draw .td-photo .td-l{opacity:1}
}
@media (prefers-reduced-motion:reduce){.pc-draw [pathLength]{transition:none!important;stroke-dashoffset:0!important}.pc-draw .td-t,.pc-draw .td-b{transition:none!important}}
/* on the product page the drawing sits beside the specification table */
.pdp-draw{margin:0 0 22px;padding:14px 10px 0;background:var(--plinth) radial-gradient(rgba(52,54,58,.13) .6px,transparent .7px) 0 0/10px 10px;max-width:420px}
.pdp-draw figcaption{padding:0 12px 10px;font-size:12.5px;color:#6c7075}

/* spec table with one column per version */
.spec-multi thead th{font-size:12px!important;letter-spacing:.02em;color:var(--fg);font-weight:700;text-align:left;padding:8px 12px 10px 0;border-bottom:1px solid var(--line);width:auto}
.spec-multi thead th.spec-corner{width:34%;color:var(--mute,#8a8378);font-weight:600;padding-left:10px}
.spec-multi tbody td{white-space:nowrap}
.spec-multi tbody td[colspan]{white-space:normal}
@media (max-width:560px){.spec-multi th[scope=row]{width:30%}.spec-multi tbody td{white-space:normal}}

.pdp-draw:has(.is-own){background:#fff;border:1px solid var(--line);padding:10px}
.pdp-draw:has(.is-own) .tdp.is-own{padding:2%}
.pdp-draw:has(.is-own) figcaption{padding:8px 4px 0}