/* Round C of the site crawl (docs/design-loop/2026-09-26-site-crawl.md): door and fire door pages.
   Loaded after chrome-loop.css on pages with a .shop-product, by scripts/build-full-site.mjs.
   1 summary bar at the end of the choices (bar 16, amended 9 Oct 2026; 17) · 2 colours as squares (bar 18-19) · 3 option cards are the
   control (bar 13-14, design-system Access) · 4 the illustrative note once · 5 fire swatches unlabelled. */

/* 1. The image panel: tabs, door and one note, sticky from 761px up (responsive-layout.css), so the door stays in
   view while choosing. The summary bar, with the page's one action, sits straight after the last choice (Dean, 6 and 8
   Oct 2026; Karo, 9 Oct 2026; docs/slices/order-flow-2026-10-09.md), so the options column is its container. */
html body .shop-product{padding-bottom:64px}
html body .shop-product>.shop-product-image{padding-bottom:20px}
html body .shop-product .shop-product-options{container-type:inline-size}
@media(min-width:761px){
 html body .shop-product>.shop-product-image{padding-top:20px}
 html body .shop-product-image .setting-view{margin-bottom:12px}
 html body .shop-product .shop-product-image>[data-catalogue-photo]{height:clamp(300px,calc(100svh - 480px),640px);flex-shrink:1;min-height:0}
 /* The setting shows the whole scene (Karo, 1 Oct 2026: "in setting view is cut off?"): the box keeps the scene's 4:3 shape
    at the height the window allows, centred on the stage. Filling the column instead cropped the top and bottom on wide,
    short windows (59% of the scene's height at 1700x818, the two squares of Hybrid 4 Panel 2 Square gone). */
 html body .shop-product .shop-product-image>.product-setting{height:auto;width:min(100%,calc(clamp(300px,calc(100svh - 480px),640px) * 4 / 3));aspect-ratio:4/3;align-self:center;flex-shrink:0;min-height:0}
}
html body .shop-product-image .config-view:has(p:empty){display:none}
html body .shop-product-image .config-view p{font-size:12px;line-height:18px;margin:0 0 8px}
html body .shop-product-image>.hhi-caption{font-size:12px;line-height:18px;color:#5f5b70;text-align:center;max-width:none;margin:12px auto 0}
html body .shop-summary{text-align:left;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px 20px;border-top:1px solid #DDD9E5;border-bottom:1px solid #DDD9E5;margin:32px 0 0;padding:20px 0}
html body .shop-summary-door{display:flex;flex-direction:column;gap:2px;min-width:0}
html body .shop-summary-door strong{font-size:16px;line-height:22px;font-weight:600;color:#17152B}
html body .shop-summary-door>span{font-size:12px;line-height:18px;color:#5f5b70}
/* Each selected item stays whole, so a wrapped line starts with its separator, never a broken item. */
html body .shop-summary-door>span>span{white-space:nowrap}
html body .shop-summary-price{margin:0;font-size:20px;line-height:26px;font-weight:600;color:#17152B;white-space:nowrap;text-align:right;letter-spacing:0}
html body .shop-summary-price small{font-size:12px;font-weight:400;color:#5f5b70}
html body .shop-summary-price span{display:block;font-size:12px;line-height:16px;font-weight:400;color:#5f5b70}
/* "Price confirmed at survey" is set on two short lines in the template so the selection keeps its width. */
html body .shop-summary-price:not(:has(small)){font-size:14px;line-height:20px}
html body .shop-summary .hhi-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin:0;padding:0 20px;font-size:14px;font-weight:600;border-radius:5px;white-space:nowrap;box-shadow:none}
html body .shop-summary-note{grid-column:1/-1;margin:6px 0 0;font-size:12px;line-height:18px;color:#5f5b70}
@container (max-width:560px){
 html body .shop-summary{grid-template-columns:minmax(0,1fr) auto}
 html body .shop-summary .hhi-button{grid-column:1/-1;width:100%;margin-top:8px}
}
/* Phones show the order under the choices too, and the docked bar steps aside while the order's own button is on screen
   (product-summary.js sets html.order-in-view), so one order button is in view at a time (bar 13;
   docs/slices/order-flow-2026-10-09.md, slice 1). Hidden once it has slid away, so it can be neither tapped nor tabbed to. */
@media(max-width:760px){
 html body .shop-summary{margin-top:28px}
 html body .shop-mobile-next{transition:transform .22s ease,visibility 0s linear 0s}
 html.order-in-view body .shop-mobile-next{transform:translateY(110%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){html body .shop-mobile-next,html.order-in-view body .shop-mobile-next{transition:none}}
html body .shop-mobile-next strong small{font-size:12px;font-weight:400;color:#5f5b70;display:inline}
html body .shop-mobile-next small,html body .shop-mobile-next p{font-size:12px}
html body .shop-mobile-next .hhi-button{white-space:nowrap}
html body .shop-mobile-next strong:not(:has(small)){font-size:16px;line-height:22px}

/* Heading price: "from" small and grey, the figure bold in ink (bar 3), the note beneath on its own line.
   An unpriced door says so in words. The payment schedule stays visible in words under the price
   (design-system: a 25% deposit and the balance on completion), now that the numbered strip has gone. */
html body .shop-product-heading .hhi-price{display:block;font-size:28px;line-height:34px;font-weight:600;color:#17152B;letter-spacing:-.01em}
html body .shop-product-heading .hhi-price small{font-size:14px;font-weight:400;color:#5f5b70;letter-spacing:0}
html body .shop-product-heading .hhi-price span{display:block;margin:4px 0 0;font-size:12px;line-height:18px;font-weight:400;color:#5f5b70;letter-spacing:0}
html body .shop-product-heading .hhi-price-pending{font-size:20px;line-height:28px}
@media(max-width:760px){html body .shop-product-heading .hhi-price{font-size:24px;line-height:30px}html body .shop-product-heading .hhi-price small{font-size:12px}}
html body .shop-product-heading .shop-deposit{display:block;font-size:14px;line-height:20px;color:#5f5b70;margin:12px 0 8px}
html body .shop-product-heading .shop-deposit strong{color:#17152B;font-weight:600}
/* Save: a visible 44px circle, like the heart on every tile. */
html body .shop-product-save{display:grid;place-items:center;width:44px;height:44px;border:1px solid #DDD9E5;border-radius:50%;background:#fff;font-size:20px;line-height:1;color:#17152B}
html body .shop-product-save:hover{border-color:#17152B}

/* 2. Colours: the colour is the picture (bar 19). Squares, name bold, range beneath in grey, and "Choose
   from 22 colours" above the current choice in bold (bar 18). Three across: six standard, nine fire. */
html body .shop-product .finish-count{margin:0;font-size:12px;line-height:18px;color:#5f5b70}
html body .shop-product .finish-tiles>p[data-finish-caption]{margin:0 0 16px;font-size:16px;line-height:24px;font-weight:600;color:#17152B}
html body .shop-product .finish-tiles .finish-track{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px;padding:0}
html body .shop-product .finish-tiles .finish-card{min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:0;transform:none!important;align-items:stretch;text-align:left}
html body .shop-product .finish-tiles .finish-chip{height:auto;aspect-ratio:1;border-radius:0;border:1px solid rgba(23,21,43,.08)}
html body .shop-product .finish-tiles .finish-card[aria-pressed=true] .finish-chip{outline:2px solid #332483;outline-offset:3px}
html body .shop-product .finish-tiles .finish-card.is-previewing .finish-chip{outline:1px solid #17152B;outline-offset:3px}
html body .shop-product .finish-tiles .finish-card:focus-visible{outline:none}
html body .shop-product .finish-tiles .finish-card:focus-visible .finish-chip{outline:3px solid #8170cf;outline-offset:3px}
html body .shop-product .finish-tiles .finish-tick{display:none}
html body .shop-product .finish-tiles .finish-name{margin-top:12px;min-height:0;font-size:16px;line-height:22px;font-weight:600;color:#17152B}
html body .shop-product .finish-tiles .finish-kind{margin-top:2px;font-size:13px;line-height:18px;color:#5f5b70}
/* A colour that costs more than the cheapest carries its extra (door-price.js); none does on Dean's sheet today. */
html body .shop-product .finish-tiles .finish-extra{display:block;margin-top:2px;font-size:13px;line-height:18px;font-weight:600;color:#17152B}
@media(max-width:760px){html body .shop-product .finish-tiles .finish-name{font-size:14px;line-height:20px}html body .shop-product .finish-tiles .finish-kind,html body .shop-product .finish-tiles .finish-extra{font-size:12px}}
html body .shop-product .finish-overview-link{font-size:14px;margin-top:8px}
html body .shop-product .hhi-colour-choice>.hhi-caption{font-size:12px;line-height:18px;color:#5f5b70}

/* 3. Fittings: the card is the control. The radio covers the card, invisible, so the whole card is the
   tap target; selected is a 2px indigo border with no fill (bar 21). */
html body .shop-product .basic-option-group legend{font-size:16px;font-weight:600;color:#17152B;padding:0}
html body .shop-product .basic-option input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
html body .shop-product .basic-option>span{min-height:112px;border:1px solid #DDD9E5;border-radius:5px;background:#fff;padding:16px 10px 12px}
html body .shop-product .basic-option:hover>span{border-color:#17152B}
html body .shop-product .basic-option input:checked+span{background:#fff;border:2px solid #332483;padding:15px 9px 11px}
html body .shop-product .basic-option input:focus-visible+span{outline:3px solid #8170cf;outline-offset:3px}
html body .shop-product .basic-option strong{font-size:14px;line-height:20px;font-weight:600;color:#17152B}
html body .shop-product .basic-option-note,html body .shop-product .basic-solid-note{font-size:12px;line-height:18px;color:#5f5b70}
/* Both letterbox cards sit on the same patch of door face in the door's own colour (--door-face, set
   by product-summary.js), so they differ only by the plate. "No letterbox" replaced an em dash glyph. */
html body .shop-product :is(.basic-no-letterbox,.basic-no-knocker){display:block;width:86px;height:60px;font-size:0;border:0}
html body .shop-product :is(.basic-no-letterbox,.basic-no-knocker,img[data-basic-fitting-image=standard-letterplate]){mix-blend-mode:normal;background:linear-gradient(var(--door-face,#d9d4cb),var(--door-face,#d9d4cb)) center/64px 42px no-repeat,linear-gradient(rgba(23,21,43,.25),rgba(23,21,43,.25)) center/66px 44px no-repeat}

/* Every open and close row looks the same: hairline rows, 48px, one drawn chevron centred on the line.
   The fitting-lock help loses its lavender panel (bar 21 keeps indigo tints for actions). */
html body .shop-product :is(.hhi-details,.door-context-help,.config-saved-details)>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:48px;padding:0;font-size:14px;line-height:20px;font-weight:600;color:#17152B;cursor:pointer}
html body .shop-product :is(.hhi-details,.door-context-help,.config-saved-details)>summary::-webkit-details-marker{display:none}
html body .shop-product :is(.hhi-details,.door-context-help,.config-saved-details)>summary::after{content:"";flex:none;width:8px;height:8px;margin:0 6px 0 auto;border-right:1.5px solid #17152B;border-bottom:1.5px solid #17152B;transform:translateY(-2px) rotate(45deg)}
html body .shop-product :is(.hhi-details,.door-context-help,.config-saved-details)[open]>summary::after{content:"";transform:translateY(2px) rotate(-135deg)}
html body .shop-product .door-context-help{margin:20px 0 0;border:0;border-top:1px solid #DDD9E5;border-bottom:1px solid #DDD9E5;border-radius:0;background:transparent}
html body .shop-product .door-context-help>div{padding:0 0 16px}
html body .shop-product .config-saved-details{margin-top:0;padding-top:0;border-top:0;border-bottom:1px solid #DDD9E5}
html body .shop-product .config-status{font-size:12px;line-height:18px;margin:8px 0 0}
html body .shop-product .config-status:empty{min-height:0;margin:0}
html body .shop-product .door-configuration{padding-bottom:0;margin-bottom:0;border-bottom:0}
/* One row rhythm: every row 56px between hairlines; the page-level rows start 32px below the fittings. */
html body .shop-product :is(.hhi-details,.door-context-help,.config-saved-details)>summary{min-height:56px}
html body .shop-product .hhi-details{padding:0;margin:0}
html body .shop-product .hhi-details>:not(summary):last-child{margin-bottom:16px}
html body .shop-product .shop-product-options>.hhi-details:first-of-type{margin-top:32px;border-top:1px solid #DDD9E5}
html body .shop-product-image .setting-status{align-self:stretch;max-width:none;margin:12px 0 0;text-align:center;font-size:12px;line-height:18px;color:#5f5b70}
html body .shop-product .hhi-details>a,html body .shop-product .door-context-help a,html body .shop-product .shop-advanced a{display:inline-flex;align-items:center;min-height:44px}
html body .shop-product .config-actions button{min-height:44px;font-size:14px}

/* Phones: the "Your door, updated" strip that appears while choosing fittings. */
html body .config-mobile-preview strong{font-size:14px}
html body .config-mobile-preview small{font-size:12px}
html body .config-mobile-preview b{font-size:14px}
html body .shop-product .shop-product-options>.door-configuration+.hhi-details:first-of-type{margin-top:0;border-top:0}
/* On a fire door the fold-downs follow the order straight away; its bottom rule is theirs too, so two hairlines never sit
   32px apart (the order flow's critic, 9 Oct 2026). */
html body .shop-product .shop-product-options>.shop-summary+.hhi-details{margin-top:0;border-top:0}
/* Fire doors (Karo, 1 Oct 2026): what comes with the door, as ticks where a standard door picks its furniture */
html body .fire-included{margin:32px 0 8px;padding-top:24px;border-top:1px solid var(--hhi-line)}
html body .fire-included h2{font-size:24px;line-height:1.3;margin:0 0 6px}
html body .fire-included>p{margin:0 0 16px;font-size:14px;color:var(--hhi-muted)}
html body .fire-included ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;max-width:640px}
html body .fire-included li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:15px;line-height:1.45;color:var(--hhi-ink)}
html body .fire-included li svg{flex:0 0 22px;width:22px;height:22px;color:var(--hhi-indigo)}
html body .fire-included li span{padding-top:1px}
/* The door stays in view on phones (Karo, 1 Oct 2026; docs/slices/door-dock-2026-10-01.md): once the picture has scrolled
   away, door-dock.js shows a live copy of the door in a band at the top, on the picture's own stage colour. Computers and
   tablets keep the sticky picture, so the band exists only below 761px and on screens at least 560px tall. */
html body .door-dock{display:none}
@media(max-width:760px) and (min-height:560px){
 html body .door-dock{position:fixed;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;gap:16px;height:clamp(180px,32vh,300px);margin:0;padding:12px 20px;border:0;border-bottom:1px solid var(--hhi-line);border-radius:0;background:var(--hhi-lilac,#f0efec);color:var(--hhi-ink);font:inherit;text-align:left;cursor:pointer;box-shadow:0 8px 24px rgba(23,21,43,.12);visibility:hidden;opacity:0;transform:translateY(-100%);transition:transform .22s ease,opacity .22s ease,visibility 0s linear .22s}
 html body .door-dock.is-on{visibility:visible;opacity:1;transform:none;transition:transform .22s ease,opacity .22s ease,visibility 0s}
 html body .door-dock-picture{flex:0 0 auto;height:100%;display:flex;align-items:center}
 html body .door-dock canvas{display:block;height:100%;width:auto}
 html body .door-dock-text{display:flex;flex-direction:column;gap:4px;min-width:0}
 html body .door-dock-text strong{font-size:17px;font-weight:600;line-height:1.3}
 html body .door-dock-text span{font-size:14px;line-height:1.45;color:var(--hhi-muted)}
 html body .door-dock-text .door-dock-item{white-space:nowrap}
 html body .door-dock:focus-visible{outline:2px solid var(--hhi-indigo);outline-offset:-4px}
 html.door-docked{scroll-padding-top:calc(clamp(180px,32vh,300px) + 12px)}
 /* The band replaces the small "Your door, updated" strip while it shows; the strip stays for phones held sideways */
 html.door-docked .config-mobile-preview{display:none!important}
}
@media(prefers-reduced-motion:reduce){html body .door-dock,html body .door-dock.is-on{transition:none}}

/* Certificates and documents (docs/slices/fire-technical-data-2026-10-01.md): Door-Stop's documents in a closed fold-down
   on its fire door pages, beside the page's other fold-downs and at their sizes (14px heading, 13px text), so the page
   stays about the door and the order (Karo, 1 Oct 2026). Each document is a row that is itself the link, never a button:
   Order online stays the one primary action (bar 13). The number tells one document from the next, so it carries the
   weight and the repeated name does not. */
html body .shop-product .fire-documents>p{max-width:none;margin:0 0 12px;font-size:13px;line-height:1.6;color:var(--hhi-muted);text-wrap:pretty}
html body .fire-documents .tech-group-title{margin:16px 0 2px;font-size:13px;line-height:1.4;font-weight:600;color:var(--hhi-ink)}
html body .fire-documents .tech-group{list-style:none;margin:0;padding:0}
html body .fire-documents .tech-group li{margin:0;padding:0;border-bottom:1px solid var(--hhi-line)}
html body .fire-documents .tech-group li:last-child{border-bottom:0}
html body .fire-documents a.tech-doc{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;min-height:44px;padding:8px 28px 8px 0;position:relative;color:var(--hhi-ink);text-decoration:none;font-size:13px;line-height:1.45}
html body .fire-documents .tech-doc-ref{font-weight:600;overflow-wrap:anywhere}
html body .fire-documents .tech-doc-go{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--hhi-indigo);font-size:16px;line-height:1}
html body .fire-documents .tech-doc-new{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
html body .fire-documents a.tech-doc:hover,html body .fire-documents a.tech-doc:focus-visible{color:var(--hhi-indigo)}
html body .fire-documents a.tech-doc:hover .tech-doc-name,html body .fire-documents a.tech-doc:focus-visible .tech-doc-name{text-decoration:underline;text-underline-offset:3px}
html body .fire-documents a.tech-doc:focus-visible{outline:2px solid var(--hhi-indigo);outline-offset:2px}
html body .shop-product .fire-documents>p.fire-documents-help{margin:12px 0 0}
/* The two ways to ask sit on their own line, so their 44px taps do not open a gap inside a sentence (critic, 1 Oct 2026) */
html body .shop-product .fire-documents>p.fire-documents-actions{display:flex;flex-wrap:wrap;gap:0 24px;margin:0 0 12px}
html body .fire-documents-actions a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:600;color:var(--hhi-indigo)}
/* On phones every number sits under its name, so the numbers line up instead of zigzagging (critic, 1 Oct 2026) */
@media(max-width:760px){html body .fire-documents .tech-doc-ref{flex-basis:100%}}
/* Door pictures rendered from Dean's designer (docs/slices/designer-renders-2026-10-02.md): drawn as they are, so the white
   frame stays white, and the turned view lies exactly over the front one; a tap or the Turn button crosses them over */
html body .shop-product .door-turnable{cursor:pointer}
html body .shop-product .door-turnable>canvas{mix-blend-mode:normal}
/* Fire doors too (Karo, 4 Oct 2026: the frames were not white): multiplied onto the stage, Door-Stop's picture and its white
   frame came out a darker, warmer grey than the standard doors and than the colour chips */
html body .shop-product [data-fire-door-canvas]{mix-blend-mode:normal}
html body .shop-product .door-turnable>canvas[data-config-canvas],html body .shop-product .door-turnable>canvas[data-turn-canvas]{transition:opacity .4s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);transform-origin:50% 55%}
html body .shop-product .door-turnable>canvas[data-turn-canvas]{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;margin:0;opacity:0;transform:perspective(1800px) rotateY(-10deg);pointer-events:none}
/* door-configuration.css hides any canvas but the configured one once the door is composed; the turned view is kept */
html body .shop-product .door-turnable.has-composition>canvas[data-turn-canvas]{display:block!important}
html body .shop-product .door-turnable.is-turned>canvas[data-config-canvas]{opacity:0;transform:perspective(1800px) rotateY(12deg)}
html body .shop-product .door-turnable.is-turned>canvas[data-turn-canvas]{opacity:1;transform:none}
/* What the customer sees on 1x to 1.5x computer screens: copies of the front and turned pictures at the drawn door's
   size in device pixels, so they are as smooth as the renders (docs/slices/designer-renders-1x-2026-10-02.md). Each
   copy's box is exactly its pixels, placed by door-turn.js on whole device pixels (--copy-*), so the browser draws it
   one to one. Once the
   front copy is drawn (has-display) the full-size canvases keep their place, unseen, and the crossover moves onto the
   copies */
html body .shop-product .door-turnable>canvas[data-display-canvas]{position:absolute;left:var(--copy-x,0);top:var(--copy-y,0);width:var(--copy-w,100%);height:var(--copy-h,100%);object-fit:contain;margin:0;display:none;pointer-events:none;transition:opacity .4s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);transform-origin:50% 55%}
html body .shop-product .door-turnable.has-display.has-composition>canvas[data-display-canvas]{display:block!important}
html body .shop-product .door-turnable.has-display>canvas[data-config-canvas],html body .shop-product .door-turnable.has-display>canvas[data-turn-canvas]{opacity:0!important;transform:none!important;transition:none!important}
html body .shop-product .door-turnable>canvas[data-display-canvas=angle]{opacity:0;transform:perspective(1800px) rotateY(-10deg)}
html body .shop-product .door-turnable.is-turned>canvas[data-display-canvas=front]{opacity:0;transform:perspective(1800px) rotateY(12deg)}
html body .shop-product .door-turnable.is-turned>canvas[data-display-canvas=angle]{opacity:1;transform:none}
/* At rest each copy is drawn pixel for pixel: at 125% and 150% the browser smooths a canvas even when its box is exactly
   its pixels, which put the grain and highlights out of focus (the second critic, 2 Oct 2026: 30 to 58% of pixels
   differed from the copy). While the door turns (is-turning, from door-turn.js) the copies are smoothed again, or the
   turn would show steps. */
html body .shop-product .door-turnable>canvas[data-display-canvas]{image-rendering:pixelated}
html body .shop-product .door-turnable.is-turning>canvas[data-display-canvas]{image-rendering:auto}
html body .shop-product .door-turn-button{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid #d9d5de;border-radius:999px;background:#fffffff0;color:#1f1b3a;font-family:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer}
html body .shop-product .door-turn-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
html body .shop-product .door-turnable.is-turned>.door-turn-button svg{transform:scaleX(-1)}
@media(hover:hover){html body .shop-product .door-turn-button:hover{border-color:var(--hhi-indigo);color:var(--hhi-indigo)}}
html body .shop-product .door-turn-button:focus-visible{outline:2px solid var(--hhi-indigo);outline-offset:2px}
html body .shop-product .door-turnable>.door-ground{position:absolute;left:50%;top:calc(var(--door-sill,97.6%) - 7px);width:calc(var(--door-w,40%) * 1.16);height:18px;transform:translateX(-50%);transition:transform .55s cubic-bezier(.22,.61,.36,1);border-radius:50%;background:radial-gradient(closest-side,rgba(38,34,30,.26),rgba(38,34,30,.1) 58%,rgba(38,34,30,0));pointer-events:none}
html body .shop-product .door-turnable.is-turned>.door-ground{transform:translateX(-50%) rotate(-3.5deg) scaleX(.94)}
html body .shop-product .door-turnable.turn-below{margin-bottom:62px}
html body .shop-product .door-turnable.turn-below>.door-turn-button{right:auto;bottom:auto;left:50%;top:calc(100% + 12px);transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){html body .shop-product .door-turnable>canvas[data-config-canvas],html body .shop-product .door-turnable>canvas[data-turn-canvas],html body .shop-product .door-turnable>canvas[data-display-canvas]{transition:opacity .2s linear;transform:none!important}html body .shop-product .door-turnable>.door-ground{transition:none}}
/* A fire door colour still loading on a slow connection: the door softens in both views until its picture arrives
   (fire-door-colours.js; the critics, 2 Oct 2026); with reduced motion it changes at once */
html body .shop-product .shop-product-image.is-loading-colour :is([data-catalogue-photo]>canvas[data-fire-door-canvas],.product-setting>canvas){opacity:.55;transition:opacity .2s ease}
@media(prefers-reduced-motion:reduce){html body .shop-product .shop-product-image.is-loading-colour :is([data-catalogue-photo]>canvas[data-fire-door-canvas],.product-setting>canvas){transition:none}}