/* Scoped to the catalogue landing; no shared hero/filter rules. */
.catalog-size-hero__brand-links { display:flex; flex-wrap:wrap; margin-top:var(--sp-2); }
.catalog-size-hero__brand-links a { display:inline-flex; align-items:center; gap:var(--sp-2); min-height:var(--tap); color:var(--pt-ink); font-size:var(--fs-md); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.catalog-size-hero__brand-links a:hover { color:var(--pt-accent); }
.catalog-size-hero__brand-links a:focus-visible { outline:2px solid var(--pt-accent); outline-offset:3px; border-radius:var(--rd-sm); }

.catalog-size-crumbs.breadcrumbs { padding-block: var(--sp-3); margin: 0; }
.catalog-size-hero { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); grid-template-rows:auto 1fr; gap:var(--sp-5) var(--sp-10); padding-block:var(--sp-5) var(--sp-8); }
.catalog-size-hero__intro { align-self:end; min-width:0; }
.catalog-size-hero h1 { font-family:var(--pt-font); font-size:clamp(28px,3.1vw,44px); line-height:var(--lh-tight); letter-spacing:-.03em; margin:0 0 var(--sp-4); color:var(--pt-ink); }
.catalog-size-hero__intro p { font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--pt-ink-2); margin:0; max-width:540px; }
.catalog-size-hero__actions { display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); }
.catalog-size-hero__actions [hidden] { display:none; }
.catalog-size-hero__actions>.btn { min-height:var(--tap-lg); gap:var(--sp-6); font-size:var(--fs-md); }
.catalog-size-models-anchor { scroll-margin-top:180px; }
.size-picker { grid-column:2; grid-row:1 / 3; box-sizing:border-box; min-width:0; padding:var(--sp-5); border:1px solid var(--pt-line); border-radius:var(--rd-lg); background:var(--pt-surface); color:var(--pt-ink); }
.size-picker [hidden] { display:none!important; }
/* Keep the drawing's space during the small size-index request. */
.size-picker { position:relative; }
.size-picker [data-size-content][hidden] { display:block!important; visibility:hidden; pointer-events:none; }
.size-picker [data-size-loading] { position:absolute; inset:45% var(--sp-5) auto; text-align:center; }
.size-picker h2 { margin:var(--sp-2) 0 0; font-family:var(--pt-font); font-size:var(--fs-2xl); line-height:var(--lh-tight); }
.size-picker>p { margin:var(--sp-3) 0 var(--sp-5); color:var(--pt-ink-2); font-size:var(--fs-sm); line-height:var(--lh-base); }
.size-picker__orientations { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.size-picker__orientations button { font:inherit; font-size:var(--fs-sm); min-width:var(--tap); min-height:var(--tap); padding:var(--sp-2) var(--sp-3); background:var(--pt-bg-soft); color:var(--pt-ink); border:1px solid var(--pt-line-strong); border-radius:var(--rd-md); cursor:pointer; }
.size-picker__orientations [aria-pressed=true] { background:var(--pt-ink); color:var(--pt-surface); border-color:var(--pt-ink); }
.size-picker__rectangle { position:absolute; left:48px; top:24px; border:2px solid var(--pt-accent); border-radius:var(--rd-sm); background:repeating-linear-gradient(90deg,transparent 0,transparent 14px,var(--pt-accent) 15px,transparent 16px); background-color:var(--pt-accent-soft); }
.size-picker__height,.size-picker__width { position:absolute; color:var(--pt-ink); background:var(--pt-bg-soft); white-space:nowrap; font-size:var(--fs-xs); font-weight:600; }
.size-picker__height { right:calc(100% + 8px); top:50%; writing-mode:vertical-rl; transform:translateY(-50%) rotate(180deg); }
.size-picker__width { left:50%; top:calc(100% + 17px); transform:translateX(-50%); }
.size-picker__caption { margin:var(--sp-3) 0 0; color:var(--pt-ink-2); line-height:1.45; font-size:var(--fs-xs); }
.size-picker__selection { margin:0; font-weight:600; line-height:1.5; }
.size-picker__adjustment { margin:calc(-1 * var(--sp-2)) 0 0; font-size:var(--fs-xs); color:var(--pt-ink-2); }
.size-picker__footer { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-top:var(--sp-5); }
.size-picker__footer .btn { min-height:var(--tap-lg); }
.size-picker__reset { padding:var(--sp-3); border:0; background:none; color:var(--pt-ink-2); font:inherit; font-size:var(--fs-sm); text-decoration:underline; cursor:pointer; min-height:var(--tap); }
.size-picker button:focus-visible,.size-picker input:focus-visible { outline:2px solid var(--pt-accent); outline-offset:3px; }
@media(max-width:700px) {
 .catalog-size-hero { grid-template-columns:1fr; gap:var(--sp-3); padding-block:var(--sp-2) var(--sp-5); }
 .catalog-size-hero h1 { font-size:var(--fs-3xl); margin-bottom:var(--sp-2); }
 .catalog-size-hero__intro p { font-size:var(--fs-md); line-height:1.45; }
 .catalog-size-hero__actions { align-items:stretch; gap:var(--sp-2); }
 .size-picker { grid-column:1; grid-row:2; width:100%; padding:var(--sp-3); }
 .size-picker h2 { font-size:var(--fs-xl); }
 .size-picker__orientations { display:grid; grid-template-columns:auto 1fr 1fr; gap:var(--sp-1); }
 .size-picker__orientations button { padding-inline:var(--sp-1); font-size:var(--fs-xs); }
 .size-picker__drawing>.size-picker__caption { margin-top:var(--sp-2); }
 .size-picker__footer { margin-top:var(--sp-3); }
 .size-picker__footer .btn { width:100%; }
}

.catalog-size-hero__buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2); width:100%; }
.catalog-size-hero__buttons .hero__calc-action { min-width:0; display:flex; flex-direction:column; gap:var(--sp-2); text-align:center; }
.catalog-size-hero__buttons .btn { width:100%; min-height:var(--tap-lg); padding:var(--sp-2); font-size:var(--fs-sm); box-sizing:border-box; }
.catalog-size-hero__buttons small { font-size:var(--fs-xs); line-height:1.45; color:var(--pt-ink-2); }
.catalog-size-hero__brands { margin:var(--sp-2) 0 0; font-size:var(--fs-sm); line-height:1.6; color:var(--pt-ink-2); }
.catalog-size-hero__brands a { color:var(--pt-ink); text-underline-offset:3px; display:inline-block; }
.catalog-size-hero--no-products { display:block; }
.catalog-size-hero--no-products .catalog-size-hero__photo { display:none; }
.catalog-size-hero--no-products .catalog-size-hero__actions { margin-top:var(--sp-5); max-width:600px; }
html[data-size-picker-ready] [data-catalog-filter] [data-cf="height"],
html[data-size-picker-ready] [data-catalog-filter] [data-cf="width"],
html[data-size-picker-ready] [data-catalog-filter] .catalog-filter__field:has(>[data-cf="height"]),
html[data-size-picker-ready] [data-catalog-filter] .catalog-filter__field:has(>[data-cf="width"]) { display:none!important; }
html[data-catalog-hero-visible] .catalog-filter-pill { visibility:hidden!important; pointer-events:none!important; }
@media(max-width:360px) { .catalog-size-hero__buttons .btn { font-size:var(--fs-xs); white-space:normal; } }
.catalog-size-hero--no-products .size-picker { display:none; }
.size-picker__controls,.size-picker__dimension { min-width:0; }
.size-picker input[aria-invalid=true] { border-color:var(--pt-accent); }
.size-picker button:disabled { opacity:.55; cursor:default; }
@media (min-width:701px) and (max-width:1100px) {
 .catalog-size-hero { grid-template-columns:1fr; gap:var(--sp-4); }
 .size-picker { grid-column:1; grid-row:3; }
 .catalog-size-hero__actions { grid-column:1; grid-row:2; max-width:600px; }
}
@media(max-width:700px) {
 .size-picker__footer { gap:0; }
 .size-picker__reset { padding:var(--sp-2); }
}

.size-picker__width { top:calc(100% + 26px); }

.size-picker__lock input { width:20px; height:20px; margin:0; accent-color:var(--pt-accent); cursor:pointer; }

.size-picker__stage { display:grid; grid-template-columns:minmax(0,1fr) 108px; grid-template-rows:320px auto; grid-template-areas:"plot vertical" "horizontal horizontal"; gap:var(--sp-2); padding:var(--sp-3); border:1px solid var(--pt-line); border-radius:var(--rd-md); background:var(--pt-bg-soft); }
.size-picker__plot { grid-area:plot; position:relative; min-width:0; overflow:hidden; border-radius:var(--rd-sm); background-image:linear-gradient(var(--pt-line) 1px,transparent 1px),linear-gradient(90deg,var(--pt-line) 1px,transparent 1px); background-size:20px 20px; }
.size-picker__dimension { min-width:0; margin:0; }
.size-picker__dimension input[data-size-number] { box-sizing:border-box; min-width:0; width:100%; min-height:var(--tap); padding:var(--sp-2); border:1px solid var(--pt-line-strong); border-radius:var(--rd-sm); background:var(--pt-surface); color:var(--pt-ink); font:inherit; }
.size-picker__dimension--height { grid-area:vertical; display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-1); }
.size-picker__dimension--width { grid-area:horizontal; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:var(--sp-1) var(--sp-3); }
.size-picker__dimension>label { display:flex; align-items:center; min-height:var(--tap); font-size:var(--fs-sm); font-weight:600; }
.size-picker__input-row { display:grid; grid-template-columns:minmax(65px,100px) auto; align-items:center; gap:var(--sp-2); }
.size-picker__dimension--height .size-picker__input-row { grid-template-columns:1fr; }
.size-picker__dimension .size-picker__lock { display:flex; align-items:center; gap:var(--sp-1); min-height:var(--tap); font-size:11px; font-weight:400; cursor:pointer; white-space:nowrap; }
.size-picker__dimension input[type=range] { accent-color:var(--pt-accent); cursor:pointer; margin:0; min-width:0; touch-action:none; }
.size-picker__dimension--height input[type=range] { writing-mode:vertical-lr; direction:ltr; width:var(--tap); height:auto; min-height:100px; flex:1; align-self:center; }
.size-picker__dimension--width input[type=range] { grid-column:1 / -1; width:100%; height:var(--tap); }
.size-picker__result { min-height:78px; margin-top:var(--sp-3); }
.size-picker__adjustment { margin:var(--sp-1) 0 0; line-height:1.5; }
.size-picker__footer .btn { min-width:220px; }
.size-picker--convector .size-picker__dimension--height { grid-area:horizontal; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:var(--sp-1) var(--sp-3); }
.size-picker--convector .size-picker__dimension--height .size-picker__input-row { grid-template-columns:minmax(65px,100px) auto; }
.size-picker--convector .size-picker__dimension--height input[type=range] { writing-mode:horizontal-tb; direction:ltr; grid-column:1 / -1; width:100%; height:var(--tap); min-height:0; }
.size-picker--convector .size-picker__dimension--width { grid-area:vertical; display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-1); }
.size-picker--convector .size-picker__dimension--width .size-picker__input-row { grid-template-columns:1fr; }
.size-picker--convector .size-picker__dimension--width input[type=range] { writing-mode:vertical-lr; direction:ltr; width:var(--tap); height:auto; min-height:100px; flex:1; align-self:center; }
@media(max-width:700px) {
 .size-picker__stage { grid-template-columns:minmax(0,1fr) 92px; grid-template-rows:300px auto; padding:var(--sp-2); gap:var(--sp-1); }
 .size-picker__dimension>label { font-size:var(--fs-xs); }
 .size-picker__input-row,.size-picker--convector .size-picker__dimension--height .size-picker__input-row { grid-template-columns:minmax(55px,80px) auto; gap:var(--sp-1); }
 .size-picker__dimension--height .size-picker__input-row,.size-picker--convector .size-picker__dimension--width .size-picker__input-row { grid-template-columns:1fr; }
 .size-picker__dimension input[data-size-number] { font-size:16px; }
 .size-picker__result { min-height:90px; }
 .size-picker__rectangle { left:30px; }
}

/* Stationary ruler controls adapted from input/scc.txt and input/pug.txt.
   The reference's curved rail, glow and inset thumb are scoped to this picker. */
.catalog-size-hero__intro { grid-column:1; grid-row:1; align-self:end; }
.catalog-size-hero__actions { grid-column:1; grid-row:2; align-self:start; }
.size-picker { grid-column:2; grid-row:1 / 3; }
.size-picker__rectangle { box-sizing:border-box; }
.size-picker__stage { grid-template-columns:minmax(0,1fr) 146px; grid-template-rows:320px auto; }
.size-picker__dimension:not(.size-picker__dimension--vertical) { grid-area:horizontal; display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; align-items:center; }
.size-picker__dimension.size-picker__dimension--vertical { grid-area:vertical; display:grid; grid-template-columns:70px minmax(0,1fr); grid-template-rows:1fr auto auto 1fr; gap:0 4px; align-items:center; }
.size-picker__dimension--vertical>label { grid-column:2; grid-row:2; font-size:12px; min-height:44px; }
.size-picker__dimension--vertical .size-picker__input-row { grid-column:2; grid-row:3; display:flex; flex-direction:column; gap:4px; align-self:start; }
.size-picker__dimension--vertical .size-picker__lock { flex-direction:column; gap:0; font-size:10px; }
.size-picker__dimension--vertical input[data-size-number] { padding:6px; }
.size-picker__dimension:not(.size-picker__dimension--vertical) .size-picker__input-row { grid-template-columns:minmax(65px,100px) auto; }
.size-dial { --dial-color:var(--pt-accent); --dial-face:var(--pt-surface); position:relative; grid-column:1 / -1; height:90px; min-width:0; overflow:hidden; touch-action:none; user-select:none; cursor:ew-resize; }
.size-picker__dimension--vertical .size-dial { grid-column:1; grid-row:1 / -1; width:70px; height:100%; cursor:ns-resize; }
.size-dial__curve { position:absolute; inset:0; width:100%; height:60px; fill:none; stroke:var(--dial-color); stroke-width:1.5; pointer-events:none; }
.size-dial--vertical .size-dial__curve { width:60px; height:100%; }
.size-dial__curve .size-dial__glow { stroke-width:12; filter:blur(5px); opacity:.55; }
.size-dial__thumb { position:absolute; left:calc(50% - 20px); top:0; width:40px; height:40px; box-sizing:border-box; border-radius:50%; padding:7px; pointer-events:none;
 box-shadow:inset 0 0 1px 1px #ffffff22,inset 0 0 0 7px var(--dial-face),2px -2px 4px color-mix(in srgb,var(--pt-ink) 12%,transparent),-2px 2px 8px #0006;
 background:repeating-conic-gradient(from 60deg,transparent 0deg,silver 1deg 59deg,transparent 60deg 180deg) 0/42% 100% space content-box var(--dial-face);
 transform:rotate(-90deg); }
.size-dial--vertical .size-dial__thumb { left:22px; top:calc(50% - 20px); transform:none; }
.size-dial:focus-within .size-dial__thumb,.size-dial:hover .size-dial__thumb { outline:2px solid var(--dial-color); outline-offset:3px; }
.size-dial.is-dragging .size-dial__thumb { box-shadow:inset 0 0 0 7px var(--dial-face),0 0 14px color-mix(in srgb,var(--dial-color) 60%,transparent); }
.size-dial__ticks { position:absolute; inset:0; pointer-events:none; }
.size-dial__tick { position:absolute; left:50%; top:58px; width:60px; margin-left:-30px; text-align:center; font-size:10px; line-height:16px; color:var(--pt-ink-2); padding-top:8px; background:linear-gradient(var(--pt-line-strong),var(--pt-line-strong)) center top/1px 5px no-repeat; white-space:nowrap; }
.size-dial__tick.is-major { color:var(--pt-ink); background-size:1px 8px; }
.size-dial--vertical .size-dial__tick { left:0; top:50%; margin:-8px 0 0; width:34px; padding:0 8px 0 0; text-align:right; box-sizing:border-box; background-position:right center; background-size:5px 1px; }
.size-dial--vertical .size-dial__tick.is-major { background-size:8px 1px; }
.size-picker .size-picker__dimension .size-dial input[type=range] { position:absolute; inset:0; width:100%; height:100%; min-height:0; margin:0; padding:0; opacity:0; pointer-events:none; }
.size-dial.is-disabled { opacity:.4; cursor:not-allowed; }
html[data-size-dragging=vertical],html[data-size-dragging=vertical] * { cursor:ns-resize!important; }
html[data-size-dragging=horizontal],html[data-size-dragging=horizontal] * { cursor:ew-resize!important; }
@media(max-width:1100px) {
 .catalog-size-hero { grid-template-columns:1fr; }
 .catalog-size-hero__intro { grid-column:1; grid-row:1; }
 .catalog-size-hero__actions { grid-column:1; grid-row:2; max-width:none; }
 .size-picker { grid-column:1; grid-row:3; }
}
@media(max-width:700px) {
 .size-picker__stage { grid-template-columns:minmax(0,1fr) 122px; grid-template-rows:280px auto; padding:8px; gap:4px; }
 .size-picker__dimension.size-picker__dimension--vertical { grid-template-columns:56px minmax(0,1fr); }
 .size-picker__dimension--vertical .size-dial { width:56px; }
 .size-dial--vertical .size-dial__thumb { left:12px; width:36px; height:36px; top:calc(50% - 18px); }
 .size-dial--vertical .size-dial__curve { left:-10px; }
 .size-dial--vertical .size-dial__tick { width:28px; font-size:9px; padding-right:5px; }
 .size-picker__dimension:not(.size-picker__dimension--vertical) .size-picker__input-row { grid-template-columns:minmax(55px,80px) auto; }
}
@media(forced-colors:active) { .size-dial__thumb { background:ButtonFace; border:2px solid ButtonText; } .size-dial__curve { stroke:CanvasText; } }
/* Keep the notch and value fields centred at every viewport width. */
.size-picker__dimension:not(.size-picker__dimension--vertical) { grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr); }
.size-picker__dimension:not(.size-picker__dimension--vertical)>label { grid-column:1; grid-row:1; justify-content:flex-end; }
.size-picker__dimension:not(.size-picker__dimension--vertical) .size-picker__input-row { display:contents; }
.size-picker__dimension:not(.size-picker__dimension--vertical) .size-picker__input-row>input { grid-column:2; grid-row:1; }
.size-picker__dimension:not(.size-picker__dimension--vertical) .size-picker__lock { grid-column:3; grid-row:1; }
.size-dial__thumb { background:var(--dial-face); transform:rotate(90deg); }
.size-dial__thumb::after { content:''; display:block; width:100%; height:100%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 6 8H6zm0 20-6-8h12z' fill='silver'/%3E%3C/svg%3E") center/contain no-repeat; }
.size-dial--vertical .size-dial__thumb { transform:none; }
.size-dial__tick { top:50px; }
.size-dial--vertical .size-dial__tick { top:50%; width:42px; }
@media(max-width:700px) {
 .size-picker__dimension:not(.size-picker__dimension--vertical) { grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr); gap:4px 6px; }
 .size-picker__dimension:not(.size-picker__dimension--vertical) .size-picker__lock { font-size:10px; }
 .size-dial--vertical .size-dial__tick { width:32px; }
}

/* Reserve room for the thumb's focus ring and glow inside the ruler frame. */
.size-picker__stage { grid-template-rows:clamp(180px,32svh,280px) auto; }
.size-dial:not(.size-dial--vertical) { height:98px; }
.size-dial:not(.size-dial--vertical) .size-dial__curve { top:8px; overflow:visible; }
.size-dial:not(.size-dial--vertical) .size-dial__thumb { top:8px; }
.size-dial:not(.size-dial--vertical) .size-dial__tick { top:58px; }
.size-picker__dimension input[data-size-number] { font-size:16px; }
.size-picker__result { min-height:64px; }
.size-picker__footer { margin-top:var(--sp-3); }

/* Animated two-stroke check from input/x.txt; retain the real focusable input. */
.size-picker .size-picker__lock { position:relative; }
.size-picker .size-picker__lock input { position:absolute; width:1px; height:1px; margin:0; opacity:0; clip-path:inset(50%); }
.size-picker__check { --checkbox-height:22px; --check-color:#34b93d; display:inline-block; flex:0 0 auto; position:relative; box-sizing:border-box; width:var(--checkbox-height); height:var(--checkbox-height); border:2px solid var(--pt-ink-2); border-radius:5px; transition:border-color .2s; }
.size-picker__check::before,.size-picker__check::after { content:''; position:absolute; box-sizing:border-box; width:calc(var(--checkbox-height) * .2); height:0; background:var(--check-color); transform-origin:left top; border-radius:5px; }
.size-picker__check::before { top:calc(var(--checkbox-height) * .72); left:calc(var(--checkbox-height) * .41); transform:rotate(-135deg); box-shadow:0 0 0 1px var(--pt-bg-soft); }
.size-picker__check::after { top:calc(var(--checkbox-height) * .37); left:calc(var(--checkbox-height) * .05); transform:rotate(-45deg); }
.size-picker__lock input:checked + .size-picker__check { border-color:var(--check-color); }
.size-picker__lock input:checked + .size-picker__check::after { height:calc(var(--checkbox-height) / 2); animation:size-check-short .2s ease forwards; }
.size-picker__lock input:checked + .size-picker__check::before { height:calc(var(--checkbox-height) * 1.2); animation:size-check-long .4s ease forwards; }
.size-picker__lock input:focus-visible + .size-picker__check { outline:2px solid var(--pt-accent); outline-offset:4px; }
@keyframes size-check-short { from { height:0; } to { height:calc(var(--checkbox-height) / 2); } }
@keyframes size-check-long { 0%,50% { height:0; } to { height:calc(var(--checkbox-height) * 1.2); } }
@media(prefers-reduced-motion:reduce) { .size-picker__check,.size-picker__check::before,.size-picker__check::after { animation:none!important; transition:none; } }
@media(forced-colors:active) { .size-picker__check { --check-color:Highlight; } .size-picker__check::before,.size-picker__check::after { forced-color-adjust:none; } }
@media(max-width:700px) {
 .size-picker__stage { grid-template-rows:clamp(180px,32svh,240px) auto; }
 .size-dial--vertical .size-dial__tick { left:2px; width:32px; padding-right:3px; }
 .size-picker__result { min-height:76px; }
 .size-picker__dimension:not(.size-picker__dimension--vertical) .size-picker__lock { flex-direction:column; justify-content:center; gap:3px; }
}
@media(max-width:360px) {
 .size-picker__stage { grid-template-columns:minmax(0,1fr) 110px; }
 .size-picker__dimension--vertical input[data-size-number] { padding-inline:3px; }
}

/* Both rulers use the same 40px thumb and a full label lane beside the curve. */
.size-picker__stage { grid-template-columns:minmax(0,1fr) 176px; }
.size-picker__dimension.size-picker__dimension--vertical { grid-template-columns:104px minmax(0,1fr); }
.size-picker__dimension--vertical .size-dial { width:104px; }
.size-dial--vertical .size-dial__curve { left:0; width:96px; }
.size-dial--vertical .size-dial__thumb { left:54px; top:calc(50% - 20px); width:40px; height:40px; }
.size-dial--vertical .size-dial__tick { left:0; width:42px; height:16px; padding-right:5px; font-size:11px; }
.size-dial__tick { font-size:11px; }
.size-dial__tick { background-image:linear-gradient(var(--pt-ink-2),var(--pt-ink-2)); }
.size-dial.is-disabled { opacity:.65; }
@media(max-width:700px) {
 .size-picker__stage { grid-template-columns:minmax(0,1fr) 160px; }
 .size-picker__dimension--vertical input[data-size-number] { padding-inline:3px; }
}
@media(max-width:360px) {
 .size-picker { padding:var(--sp-2); }
 .size-picker__stage { padding:var(--sp-1); grid-template-columns:minmax(0,1fr) 156px; }
}

/* Tubular catalogue: compact dimensions on the left, live scene on the right. */
.catalog-size-hero.catalog-size-hero--tube{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto 1fr;gap:24px 40px;align-items:start}
.catalog-size-hero.catalog-size-hero--tube .size-picker{grid-column:1;grid-row:3;padding:20px}
.catalog-size-hero.catalog-size-hero--tube .size-picker h2{font-size:22px;margin:0}
.catalog-size-hero.catalog-size-hero--tube .size-picker>p{margin:10px 0 14px}
.catalog-size-hero.catalog-size-hero--tube .size-picker__plot,.catalog-size-hero.catalog-size-hero--tube .size-picker__drawing>.size-picker__caption{display:none}
.catalog-size-hero.catalog-size-hero--tube .size-picker__stage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;grid-template-areas:none;gap:20px;padding:0;border:0;background:none}
.catalog-size-hero.catalog-size-hero--tube .size-picker__dimension:not(.size-picker__dimension--vertical){display:flex;flex-direction:column;align-items:stretch;grid-area:auto;gap:6px}
.catalog-size-hero.catalog-size-hero--tube .size-picker__dimension>label{min-height:26px}
.catalog-size-hero.catalog-size-hero--tube .size-picker__input-row{display:grid;grid-template-columns:minmax(60px,1fr) auto;gap:8px}
.catalog-size-hero.catalog-size-hero--tube .size-picker__dimension .size-picker__lock{font-size:10px;gap:3px}
.catalog-size-hero.catalog-size-hero--tube .size-dial{width:100%;height:80px}
.catalog-size-hero.catalog-size-hero--tube .size-picker__result{min-height:0;margin-top:10px}
.catalog-size-hero.catalog-size-hero--tube .size-picker__footer{margin-top:14px}
.tube-hero{grid-column:2;grid-row:1/4;align-self:stretch;display:flex;flex-direction:column;overflow:hidden;min-width:0;border:1px solid var(--pt-line);border-radius:18px;background:var(--pt-surface)}
.tube-hero header{padding:26px 28px 12px}
.tube-hero__eyebrow{color:var(--pt-accent);font-size:11px;letter-spacing:.12em;font-weight:700}
.tube-hero h2{font-size:26px;line-height:1.2;margin:12px 0 8px}
.tube-hero header p{color:var(--pt-ink-2);font-size:14px;margin:0}
.tube-hero__scene{min-height:440px;flex:1;position:relative}
.tube-hero__start{position:absolute;inset:0;margin:auto;width:max-content;max-width:90%;height:48px;padding:10px 20px;border:1px solid var(--pt-line-strong);border-radius:10px;background:var(--pt-bg-soft);color:var(--pt-ink);font:inherit;cursor:pointer}
.tube-hero__start[hidden]{display:none}
.tube-hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--pt-bg-soft)}
.tube-hero__poster~.tube-hero__start{inset:auto 0 20px;z-index:1;box-shadow:0 4px 16px #0003}
.tube-hero__scene iframe{border:0;width:100%;height:100%;position:absolute;inset:0;display:block}
.tube-hero__caption{font-size:12px;line-height:1.5;color:var(--pt-ink-2);padding:14px 24px;margin:0;border-top:1px solid var(--pt-line)}
@media(max-width:1100px){.catalog-size-hero.catalog-size-hero--tube{grid-template-columns:1fr;gap:18px}.catalog-size-hero.catalog-size-hero--tube .tube-hero{grid-column:1;grid-row:3}.catalog-size-hero.catalog-size-hero--tube .size-picker{grid-column:1;grid-row:4}.tube-hero__scene{min-height:380px}.tube-hero header{padding:20px}.tube-hero h2{font-size:23px}}
@media(max-width:480px){.catalog-size-hero.catalog-size-hero--tube .size-picker{padding:16px}.catalog-size-hero.catalog-size-hero--tube .size-picker__stage{gap:14px}.catalog-size-hero.catalog-size-hero--tube .size-picker__input-row{grid-template-columns:1fr}.catalog-size-hero.catalog-size-hero--tube .size-picker__dimension .size-picker__lock{min-height:28px}.tube-hero__scene{min-height:340px}.tube-hero__caption{padding:12px 16px}.tube-hero h2{font-size:21px}}

.catalog-size-hero.catalog-size-hero--tube .size-picker .size-picker__dimension .size-picker__input-row{display:grid;grid-template-columns:minmax(60px,1fr) auto}
.catalog-size-hero.catalog-size-hero--tube .size-picker .size-picker__dimension>label{justify-content:flex-start;text-align:left}
@media(max-width:480px){.catalog-size-hero.catalog-size-hero--tube .size-picker .size-picker__dimension .size-picker__input-row{grid-template-columns:1fr}}

@media(max-width:700px){
 .catalog-size-hero.catalog-size-hero--tube .size-picker .size-picker__dimension>label{min-height:44px}
 .catalog-size-hero.catalog-size-hero--tube .size-picker .size-picker__dimension .size-picker__lock{min-height:44px}
}

.tube-hero__color{display:flex;align-items:center;gap:10px;align-self:flex-start;margin:0 24px 14px;padding:10px 14px;min-height:44px;border:1px solid var(--pt-line-strong);border-radius:10px;color:var(--pt-ink);background:var(--pt-bg-soft);font:inherit;font-size:12px;cursor:pointer;text-align:left}
.tube-hero__color:before{content:"";width:22px;height:22px;flex-shrink:0;border-radius:50%;background:var(--tube-color);border:1px solid #8886}
.tube-hero__scene .tube-hero__color{position:absolute;left:18px;bottom:16px;z-index:2;margin:0;min-height:46px;max-width:calc(100% - 140px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tube-hero__scene .tube-hero__color[hidden]{display:none}
.tube-hero__scene:has(.tube-hero__color) .tube-hero__poster~.tube-hero__start{bottom:82px}
.size-picker__heading>p{margin:10px 0 14px}
.size-picker:has([data-size-content][hidden]) .size-picker__orientations{display:none}
@media(max-width:1100px){
 .catalog-size-hero--tube .size-picker,.catalog-size-hero--tube .size-picker>[data-size-content]:not([hidden]){display:contents}
 .catalog-size-hero--tube .size-picker__heading,.catalog-size-hero--tube .size-picker__controls{grid-column:1;padding:18px;border:1px solid var(--pt-line);border-radius:16px;background:var(--pt-surface);min-width:0}
 .catalog-size-hero--tube .size-picker__heading{grid-row:3}
 .catalog-size-hero.catalog-size-hero--tube .tube-hero{grid-row:4}
 .catalog-size-hero--tube .size-picker__controls{grid-row:5}
 .catalog-size-hero--tube .size-picker__heading .size-picker__orientations{margin-bottom:0}
}
@media(max-width:700px){
 .catalog-size-hero.catalog-size-hero--tube .size-picker .size-picker__dimension>label{min-height:20px}
 .catalog-size-hero.catalog-size-hero--tube .size-picker .size-picker__dimension .size-picker__input-row{grid-template-columns:minmax(0,1fr) auto;gap:5px}
 .catalog-size-hero--tube .size-picker__heading,.catalog-size-hero--tube .size-picker__controls{padding:14px}
 .catalog-size-hero--tube .tube-hero header{display:none}
 .catalog-size-hero--tube .tube-hero__color{margin:0;left:8px;bottom:16px}
 .catalog-size-hero--tube #size-intro,.catalog-size-hero--tube .tube-hero__caption{display:none}
 .catalog-size-hero--tube .size-picker__orientations{margin-top:14px}
 .catalog-size-hero--tube .tube-hero__scene{min-height:clamp(400px,56svh,500px)}
}