/* Product detail page (spec §6.4, §5.12–5.22). */
@layer templates {
	.pdp{padding-bottom:var(--section)}
	.pdp__top{display:grid;gap:24px}
	@media (min-width:1024px){.pdp__top{grid-template-columns:7fr 5fr;gap:var(--gutter);align-items:start}}

	/* Gallery (§5.12) */
	.gallery{min-width:0}
	.gallery__strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none}
	.gallery__strip::-webkit-scrollbar{display:none}
	.gallery__slide{flex:0 0 100%;scroll-snap-align:start}
	.gallery__slide .stage{width:100%}
	.gallery__rail{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
	.gallery__thumb{flex:none;width:72px;padding:0;border:1px solid var(--line);border-radius:var(--r-1);background:var(--surface);overflow:hidden}
	.gallery__thumb .stage{border-radius:0}
	.gallery__thumb[aria-current="true"]{border:2px solid var(--navy)}
	.gallery__thumb--plate{display:grid;place-items:center;aspect-ratio:1;background:var(--stage-deep);color:var(--navy)}
	@media (min-width:1280px){
		.gallery{display:grid;grid-template-columns:72px 1fr;gap:16px}
		.gallery__strip{grid-column:2;grid-row:1}
		.gallery__rail{grid-column:1;grid-row:1;flex-direction:column;margin-top:0;overflow:visible}
	}

	/* Spec plate frame and highlight tiles (§3.6, §5.16) */
	.plate-frame{background:var(--stage-deep);display:grid;place-items:center;padding:6%}
	.plate{display:grid;grid-template-columns:1fr 1fr;width:100%;height:100%}
	.plate__cell{display:flex;flex-direction:column-reverse;justify-content:center;gap:6px;padding:16px;border:0 solid rgb(110 125 138/.4)}
	.plate__cell:nth-child(odd){border-right-width:1px}
	.plate__cell:nth-child(-n+2){border-bottom-width:1px}
	.plate dt,.hl-tile dt{font-size:var(--fs-sm);color:var(--muted)}
	.numeral{font-family:var(--font-display);font-size:var(--fs-numeral);font-weight:700;line-height:1;font-variant-numeric:var(--numeric);color:var(--ink)}
	.numeral__unit{font-family:var(--font-text);font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
	.plate__text{font-size:var(--fs-h3);font-weight:700;line-height:1.2}
	.hl-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:24px}
	@media (max-width:599px){.hl-tiles>:last-child:nth-child(odd){grid-column:1/-1}} /* no orphan half tile */
	@media (min-width:600px){.hl-tiles{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}}
	.hl-tile{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px;background:var(--stage-deep);border-radius:var(--r-2);padding:20px}
	.hl-list{display:grid;gap:10px;list-style:none;padding:0;max-width:var(--w-text)}
	.hl-list li{display:flex;gap:10px}
	.hl-list .icon{color:var(--tobe);margin-top:3px}

	/* Buy box (§5.13) */
	.buybox{background:var(--surface);border:var(--border-hair);border-radius:var(--r-2);padding:24px;display:grid;gap:12px;align-content:start}
	@media (min-width:1024px){.buybox{padding:32px}}
	.buybox__meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--fs-sm);font-weight:500;color:var(--muted)}
	.buybox__meta a{color:var(--navy)}
	.buybox__h{font-size:var(--fs-h1)}
	.keyspecs{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;font-size:var(--fs-sm);font-weight:500;font-variant-numeric:var(--numeric)}
	.keyspecs__sep{display:none} /* spacing, not rules: a rule would start a wrapped line */
	.buybox__sub{color:var(--muted)}
	.buybox__price{margin-top:4px}
	.buy{display:grid;gap:4px;margin-top:8px}
	/* Quantity on its own line, then the two actions side by side at one width and height. */
	.buy__row{display:grid;gap:16px;margin-top:4px}
	.buy__ctas{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:12px}
	.buy__ctas .btn{width:100%;min-width:0}
	.buy__freight{display:flex;gap:8px;font-size:var(--fs-sm);margin-top:12px}
	.buy__freight .icon{color:var(--tobe);margin-top:2px}
	.buybox .estimator{margin-top:20px} /* the postcode check reads as its own step after the CTAs */
	.specialist{background:var(--paper);border:var(--border-hair);border-radius:var(--r-2);padding:20px;margin-top:12px;display:grid;gap:4px;font-size:var(--fs-sm)}
	.buybox .specialist{background:none;border:0;border-top:var(--border-hair);border-radius:0;padding:20px 0 0;margin-top:8px} /* part of the buy box, not a card inside it */
	.specialist__h{display:flex;gap:8px;align-items:center;font-size:var(--fs-h4)}
	.specialist__phone a{font-size:var(--fs-h4);font-weight:700;color:var(--ink)}

	/* Body: content 8 + aside 4 */
	.pdp__body{display:grid;gap:var(--gutter);margin-top:var(--s-6)}
	@media (min-width:1024px){.pdp__body{grid-template-columns:8fr 4fr}}
	.pdp-sec{padding-block:var(--s-6);border-top:var(--border-hair)}
	.pdp-sec:first-child{border-top:0}
	.pdp__aside{display:none}
	@media (min-width:1024px){.pdp__aside{display:block}.onpage{position:sticky;top:calc(var(--sticky-top) + 24px);padding-top:var(--s-6)}}
	.onpage ul{list-style:none;padding:0;margin-top:8px;border-left:1px solid var(--line)}
	.onpage a{display:block;padding:8px 16px;color:var(--ink);text-decoration:none;border-left:2px solid transparent;margin-left:-1px}
	.onpage a:hover,.onpage a[aria-current="true"]{border-left-color:var(--accent);color:var(--navy)}

	/* Spec table (§5.17) */
	.spec-table{width:100%;max-width:760px;margin-bottom:24px}
	.spec-table caption{text-align:left;padding-bottom:8px}
	.spec-table th,.spec-table td{text-align:left;vertical-align:top;padding:12px 0;border-bottom:var(--border-hair);min-height:48px}
	.spec-table th{width:45%;font-weight:400;color:var(--muted);padding-right:16px}
	.spec-table td{font-weight:500;font-variant-numeric:var(--numeric)}
	.spec-note{font-size:var(--fs-sm);color:var(--muted)}
	.spec-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
	.spec-actions .btn{flex:1 1 15rem;max-width:20rem} /* equal widths, stacked or side by side */
	@media (max-width:599px){.spec-actions .btn{flex-basis:100%;max-width:none}} /* phones: full width, label on one line */
	@media print{.spec-actions{display:none}}
	.howarrives{display:grid;gap:16px;margin-bottom:16px;max-width:var(--w-text)}
	.howarrives dt{display:flex;gap:8px;align-items:center;font-weight:600}
	.howarrives dt .icon{color:var(--tobe)}
	.howarrives dd{margin-left:28px}
}

/* Dimension figure (§3.7, WOW 4). */
@layer templates {
	.dimfig-wrap{container-type:inline-size;width:100%}
	.dimfig{position:relative;aspect-ratio:var(--fig-ar);margin-inline:auto}
	.dimfig svg{display:block;width:100%;height:100%;overflow:visible}
	.dimfig .box{fill:none;stroke:var(--ink);stroke-opacity:.85;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
	.dimfig .dl{stroke:var(--tobe);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
	.dimfig .tick{stroke:var(--tobe);stroke-width:1.5;vector-effect:non-scaling-stroke}
	.dimfig .ext{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:2 2;vector-effect:non-scaling-stroke}
	.dimfig .hatch{stroke:var(--tobe);stroke-opacity:.35;stroke-width:1}
	.dimfig .band{transform-box:fill-box;transform-origin:50% 100%}
	.dimfig .view{font:600 11px var(--font-text);fill:var(--muted)}
	@media (prefers-reduced-motion:no-preference){
		.dimfig .box,.dimfig .dl{transition:stroke-dashoffset var(--d-4) var(--ease-out)}
		.dimfig .band{transition:transform var(--d-4) var(--ease-out) var(--d-2)}
		.dimfig [data-dim="width"] .dl{transition-delay:120ms}.dimfig [data-dim="height"] .dl{transition-delay:240ms}
	}
	.js .dimfig:not(.is-drawn) .box,.js .dimfig:not(.is-drawn) .dl{stroke-dashoffset:1}
	.js .dimfig:not(.is-drawn) .band{transform:scaleY(0)}
	.dimfig__labels{position:absolute;inset:0;pointer-events:none}
	.dimfig__lbl{position:absolute;transform:translate(-50%,-50%);padding:2px 8px;border-radius:var(--r-pill);background:var(--stage-top);color:var(--navy);font-size:var(--fs-sm);font-weight:600;line-height:1.3;white-space:nowrap;font-variant-numeric:var(--numeric)}
	.dimfig__lbl--l{transform:translate(0,-50%)}
	.dimfig__lbl--r{transform:translate(-100%,-50%)}
	.dimfig__mk{display:none;position:absolute;width:24px;height:24px;place-items:center;transform:translate(-50%,-50%);border-radius:50%;background:var(--stage-top);border:1px solid var(--navy);color:var(--navy);font-size:var(--fs-sm);font-weight:600}
	.dimfig__legend{display:none;list-style:none;padding:0;margin:8px 0 0;font-size:var(--fs-sm);font-variant-numeric:var(--numeric)}
	.dimfig__n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--navy);color:var(--navy);font-weight:600;margin-right:4px}
	@container (max-width:479px){.dimfig__lbl{display:none}.dimfig__mk{display:grid}.dimfig__legend{display:flex;flex-wrap:wrap;gap:4px 16px}}
	.dimfig g.is-hl .dl,.dimfig g.is-hl .tick{stroke:var(--navy);stroke-width:2}
	.dimfig__lbl.is-hl,.dimfig__mk.is-hl{background:var(--navy);color:#fff}
	.stage--fig{display:grid;place-items:center;padding:6%}
	.dims-figure .dimfig{width:min(100%,calc(70vh * var(--fig-ar)))}
	.dims-figure{background:var(--stage-bg);border-radius:var(--r-2);padding:24px}
	.spec-draw{width:var(--tap);height:var(--tap);margin:-10px 0 -10px 4px;color:var(--tobe);vertical-align:middle}
	.spec-table tr.is-hl th,.spec-table tr.is-hl td{background:var(--accent-tint)}
	@media (forced-colors:active){.dimfig .box,.dimfig .dl,.dimfig .tick{stroke:CanvasText}.dimfig__lbl{background:Canvas;color:CanvasText}}
}
@layer templates{.src-mark{color:var(--muted);font-weight:600;margin-left:2px}}