/* Round A of the site crawl (docs/design-loop/2026-09-26-site-crawl.md): shared chrome on every page.
   Loaded last by scripts/build-full-site.mjs. Rules: headings no heavier than 600 (bar 5), nothing under
   12px and every tap target 44px (design-system Access), warm surfaces with indigo for actions only (bar 21). */

/* Headings: 600 everywhere, page titles a little less tightly tracked */
/* No heading on the site is lighter than 600 (checked 26 Sep 2026), so this can only lower weights. */
html body :is(h1,h2,h3,h4){font-weight:600!important}
html body .hhi-title h1{font-weight:600;letter-spacing:-.025em}
html body .store-nav-collections strong{font-weight:600}

/* Small text up to the 12px floor */
html body .hhi-eyebrow,html body .store-nav-label{font-size:12px}
html body .hhi-saved [data-saved-count]{font-size:12px}

/* Tap targets: 44px without changing how links read */
html body .hhi-breadcrumb a{display:inline-block;padding:12px 0;margin:-12px 0;line-height:20px}
html body a.hhi-text-link{display:inline-flex;align-items:center;min-height:44px}

/* Footer: warm, 600 headings, 44px rows, legible small print */
html body .hhi-footer{background:#EEECE7}
html body .hhi-footer h3{font-weight:600;margin-bottom:4px}
html body .hhi-footer>div>a{display:flex;align-items:center;min-height:44px;margin:0;padding:0}
html body .hhi-footer-intro a{display:inline-flex;align-items:center;min-height:44px}
html body .hhi-footer-bottom{font-size:12px}
html body .hhi-footer-bottom p{font-size:12px;line-height:1.6}
html body .hhi-footer-bottom a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}

/* Warm panel instead of lavender for the shared customer-reviews block */
html body .door-reviews{background:#EEECE7}

/* Round B: one tile, matching the homepage tile (bar.md rules 1-3, 6-11). The whole tile is the link
   through the name's stretched ::after; the heart and Compare sit above it. */
html body .hhi-product{position:relative}
html body .hhi-product-picture,html body .hhi-product-picture img{border-radius:0}
html body .hhi-product-picture button{position:absolute;z-index:2}
html body .hhi-product-bottom label{position:relative;z-index:2}
html body .hhi-product[data-setting-state=ready] .card-setting-label{display:none}
html body .hhi-product-picture .hhi-label,html body .card-setting-label{font-size:12px}
html body .hhi-product-info{display:flex;flex-direction:column;gap:2px;padding-top:14px}
html body .hhi-product-info h2{font-size:18px;line-height:24px;min-height:48px;margin:0;letter-spacing:0;display:flex;align-items:flex-end}
html body .hhi-product-info h2 a{color:#17152B;text-decoration:none}
html body .hhi-product-info h2 a::after{content:"";position:absolute;inset:0;z-index:1}
html body .hhi-product-info h2 a:focus-visible{outline:none}
html body .hhi-product:has(h2 a:focus-visible){outline:3px solid #8170cf;outline-offset:4px}
html body .hhi-product-spec{font-size:12px;line-height:18px;color:#5f5b70;margin:0}
html body .hhi-product-info .hhi-price{font-size:14px;font-weight:600;line-height:20px;color:#17152B;margin:6px 0 0}
html body .hhi-product-info .hhi-price small{font-size:12px;font-weight:400;color:#5f5b70;margin:0}
html body .hhi-product-info .hhi-price span{display:block;font-size:12px;line-height:18px;font-weight:400;color:#5f5b70;margin:0}
/* Figure line plus caption line on every tile, so the swatch rows share one baseline (bar.md rule 10). */
html body .hhi-product-info .hhi-price,html body .hhi-product-info .hhi-price.hhi-price-pending{height:38px;min-height:0;padding:0}
html body .hhi-product-info .hhi-price-pending span{font-size:12px;line-height:18px;color:#17152B;font-weight:600}
@media(max-width:600px){html body .hhi-product-info h2{font-size:16px;line-height:21px;min-height:42px}}
/* The all-doors page mixes collections in a row (always when sorted or filtered, and at rest since the range
   stopped dividing evenly on 30 Sep 2026). "Contemporary composite door" wraps on a phone, so every tile there
   keeps two lines for it and the prices stay on one baseline (bar.md rule 10). */
@media(max-width:600px){html body .hhi-collection[data-range-scope=all] .hhi-product-spec{min-height:36px}}
html body .hhi-product-swatches{display:flex;align-items:center;gap:4px;margin-top:8px}
html body .hhi-product-swatches i{width:16px;height:16px;border:1px solid #DDD9E5;display:inline-block}
html body .hhi-product-swatches em{font-style:normal;font-size:12px;color:#5f5b70;margin-left:6px}
html body .hhi-product-bottom{border:0;padding:0;margin:2px 0 0;display:flex}
html body .hhi-product-bottom label{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:12px;color:#5f5b70}

/* Header contrast (Karo chose option A, 26 Sep 2026): a dark strip with the showroom and phone, then a
   white header. Ink, not indigo, so the indigo buttons stay the strongest colour on the page (bar 21). */
html body .hhi-topbar{background:#17152B;color:#F7F6F3;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding:0 22px;font:400 13px/1.4 'Open Sans',sans-serif}
html body .hhi-topbar a{color:#F7F6F3;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
html body .hhi-topbar a:hover{text-decoration:underline;text-underline-offset:4px}
html body .hhi-topbar a[href^="tel:"]{font-weight:600}
html body .hhi-topbar a:focus-visible{outline:3px solid #cfc8f5;outline-offset:-3px}
@media(min-width:1001px){html body .hhi-topbar{padding-inline:max(var(--store-gutter,24px),calc((100% - var(--store-width,1840px))/2 + var(--store-gutter,24px)))}}
@media(max-width:1000px){html body .hhi-topbar{justify-content:center}html body .hhi-topbar a[href="/our-showroom"]{display:none}}
html body .hhi-header{background:#fff;border-bottom-color:#DDD9E5}

/* Review showcase (21st.dev Editorial Testimonial + Staggered Testimonials Grid, rebuilt). */
html body .review-showcase{margin:40px 0 48px}
html body .review-sample-note{font-size:12px;color:#5f5b70;background:#EEECE7;padding:8px 12px;display:inline-block;margin:0 0 24px}
html body .review-editorial{border-top:1px solid #DDD9E5;border-bottom:1px solid #DDD9E5;padding:32px 0 20px}
html body .review-editorial blockquote{margin:0}
html body .review-editorial blockquote p{font-size:28px;line-height:1.35;font-weight:400;letter-spacing:-.01em;color:#17152B;margin:0 0 20px;max-width:30ch}
html body .review-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:12px;color:#5f5b70;margin:0}
html body .review-meta strong{font-weight:600;color:#17152B;font-size:14px}
html body .review-stars{display:inline-flex;gap:2px}
html body .review-stars i{width:14px;height:14px;background:#DDD9E5;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
html body .review-editorial-controls{display:flex;align-items:center;gap:12px;margin-top:24px}
html body .review-progress{display:flex;gap:6px;margin-right:auto}
html body .review-progress i{width:28px;height:2px;background:#DDD9E5}
html body .review-progress i.is-current{background:#332483}
html body .review-count{font-size:12px;color:#5f5b70}
html body .review-editorial-controls button{width:44px;height:44px;border:1px solid #DDD9E5;background:#fff;color:#17152B;border-radius:5px;font-size:16px;cursor:pointer}
html body .review-editorial-controls button:hover{border-color:#17152B}
html body .review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px;align-items:start}
html body .review-grid .review-card:nth-child(3n+2){margin-top:28px}
html body .review-card{background:#fff;border:1px solid #DDD9E5;border-radius:5px;padding:20px;margin:0}
html body .review-card blockquote{margin:0}
html body .review-card blockquote p{font-size:15px;line-height:1.55;color:#17152B;margin:0 0 16px}
@media(max-width:900px){html body .review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}html body .review-grid .review-card:nth-child(3n+2){margin-top:0}html body .review-grid .review-card:nth-child(2n){margin-top:24px}}
@media(max-width:600px){html body .review-grid{grid-template-columns:minmax(0,1fr)}html body .review-grid .review-card:nth-child(2n){margin-top:0}html body .review-editorial blockquote p{font-size:22px}}
html body .review-editorial-item,html body .review-card{margin-left:0;margin-right:0}
html body .review-editorial-item{margin-top:0;margin-bottom:0}
html body .review-editorial .review-when::before{content:" · "}
html body .review-card .review-meta{flex-direction:column;align-items:flex-start;gap:8px}
html body .review-card .review-who{display:flex;flex-direction:column;gap:2px}
/* "from" small beside a guide price (bar.md rule 3) */
html body .shop-product-heading .hhi-price small{font-size:14px;font-weight:400;color:#5f5b70;letter-spacing:0}

/* Phones: the docked bar keeps the bottom edge (bar 13). Above it, the preview "?" (review scaffolding,
   gone at launch) sits bottom-left and the Top door bottom-right, so they never stack. */
@media(max-width:760px){
 html body .preview-navigation .preview-return{display:none!important}
 html body .preview-navigation{align-items:center!important;right:auto!important;left:12px!important;width:auto!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
 html body .preview-help-toggle{width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;border-radius:50%!important;font-size:0!important;display:grid!important;place-items:center;background:#fff!important;border:1px solid #DDD9E5!important;box-shadow:0 2px 8px rgba(23,21,43,.16)!important}
 html body .preview-help-toggle::before{content:"?";font-size:18px;font-weight:600;color:#332483}
 html body .preview-help-panel{width:min(320px,calc(100vw - 24px))!important;left:0!important;right:auto!important}
}

/* Round C (27 Sep 2026): shared small print up to the 12px floor on phones, and the archive door pages'
   "ORDER NOW" and "DESIGN NEW DOOR" links at a 44px tap height. */
html body .hhi-breadcrumb,html body .hhi-breadcrumb :is(a,span){font-size:12px}
html body .shopping-progress-mobile span,html body .shopping-progress small{font-size:12px}
html body .hhi-page-hero .hhi-eyebrow{font-size:12px}
html body.hhi-page-archive-product .hhi-prose>a{display:inline-flex;align-items:center;min-height:44px}
html body.hhi-page-archive-product .hhi-guide-sidebar a{display:flex;align-items:center;min-height:44px;padding-block:0}

/* Ranges pages (27 Sep 2026): the collection pills at the 12px floor on phones. */
@media(max-width:760px){html body .hhi-range-links a{font-size:12px}}

/* Contact, request a quote and the showroom (Round E, slice 2, 2 Oct 2026): on phones, Call and Get directions are two
   48px actions above the form (outlined, so the form's submit stays the one filled button), and the visit block drops
   its own copies of them; the showroom shows its visit details before the form. */
.hhi-contact-quick{display:none}
html body.hhi-page-contact .hhi-contact-visit form{order:0}
@media(max-width:760px){
 html body .hhi-contact .hhi-contact-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;order:-2}
 html body .hhi-contact .hhi-contact-quick a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin:0;padding:0 12px;border:1px solid var(--hhi-indigo);border-radius:8px;background:transparent;color:var(--hhi-indigo);font-size:15px;font-weight:600;text-align:center;text-decoration:none}
 html body .hhi-contact-details a[href^="tel:"],html body .hhi-contact-details a[href^="https://www.google.com/maps"]{display:none}
}

/* Fire door pages on phones (found by Round E's check, 2 Oct 2026): the setting's label and the colour caption under the
   colours were 11px and 10px (reference-polish.css sets the caption by its id), under the 12px floor for captions and labels (design-system.md, Access). */
@media(max-width:760px){html body .shop-product .hhi-colour-choice>#colour-screen-note,html body .product-setting .setting-label{font-size:12px}}

/* The Design page when Dean's designer will not load (Round E, slice 7, 2 Oct 2026): the panel sits on the warm stage
   with no border, in place of the designer. */
html body .designer-unavailable{max-width:none;margin:0 0 24px;padding:clamp(24px,4vw,48px);border:0;border-radius:12px;background:#eeece7;font-size:17px;line-height:1.6;color:#17152b}
html body .designer-unavailable h2{margin:0 0 12px;font-size:clamp(24px,3vw,32px);line-height:1.2;font-weight:600;letter-spacing:-.02em}
html body .designer-unavailable p{margin:0;max-width:56ch;color:#595b68}
html body .designer-unavailable ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:4px;max-width:60ch}
html body .designer-unavailable li{margin:0;padding:10px 0;border-top:1px solid #ddd9e5}
html body .designer-unavailable a{display:inline-block;padding:11px 0;margin:-11px 0;line-height:22px;color:#332483;font-weight:600}

/* Guide sections' own links (Round E, 2 Oct 2026; the design crawl): a link standing on its own line under a section,
   such as "See the fire door range" and "Understand locks and cylinders", gets the 44px tap height. */
html body .door-guide-section>a{display:inline-flex;align-items:center;min-height:44px}

/* The homepage's journey labels and reassurance line (found by Round E's check, 2 Oct 2026) were 10 to 11px, under the
   12px floor for captions and labels (design-system.md, Access); simple-shopping.css sets the line with !important. */
html body .door-journey-number{font-size:12px}
html body .simple-intro .simple-assurance{font-size:12px!important}

/* Round E's critics (2 Oct 2026). Definition cards (Locks and Security): warm stage, titles at 600 like every heading
   (bar.md rule 5), text the size of the section's own paragraphs on phones. */
html body .door-guide-definitions div{background:#eeece7}
html body .door-guide-definitions dt{font-size:18px;font-weight:600;line-height:1.35}
/* Contact pages on phones: fields at 16px (iOS zooms into anything smaller), labels and the note at 14px, the email
   link a 44px tap, and the empty "Choose one" in the muted colour so it reads unanswered. */
html body .hhi-contact select:invalid{color:#595b68}
html body .hhi-contact select option{color:#17152b}
/* The showroom's six photographs in rows of three, so no row ends in empty cells. */
html body.hhi-page-contact .hhi-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){
 html body .door-guide-definitions dd{font-size:16px}
 html body .hhi-contact input,html body .hhi-contact select,html body .hhi-contact textarea{font-size:16px}
 html body .hhi-contact label{font-size:14px}
 html body .hhi-contact form p{font-size:14px}
 html body .hhi-contact-details a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px;margin:4px 0}
 html body.hhi-page-contact .hhi-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* "Call 0208 559 9145" would split its number on the narrowest phones, so the two actions stack there. */
@media(max-width:400px){html body .hhi-contact .hhi-contact-quick{grid-template-columns:1fr}}

/* The contact details' own links get the 44px tap height at every width (the third critic; phones already had it). */
html body .hhi-contact-details a{display:flex;align-items:center;min-height:44px;margin:4px 0;width:fit-content}

/* Logo motion, option A (Karo, 5 Oct 2026; docs/slices/logo-motion-2026-10-05.md): while the door opens, the overlay draws
   the logo's door, on a patch of the header's own background, over the image's left 26.967% (x 0 to 175.5 of 650.8); at
   rest it fades out over the image, which is never touched. The image always fills its brand box, at every width
   (measured 5 Oct 2026). */
.hhi-header .ecds-brand{position:relative}
.hhi-header .ecds-logo-motion{position:absolute;left:0;top:0;width:26.967%;height:auto;aspect-ratio:175.5/261.3;display:none;pointer-events:none}
.hhi-header .ecds-brand[data-lm-run] .ecds-logo-motion{display:block}
.hhi-header .ecds-brand[data-lm-fade] .ecds-logo-motion{display:block;opacity:0;transition:opacity .16s ease-out}
/* The line to the furniture catalogue on the Design and Handles and hardware pages (docs/slices/furniture-catalogue-2026-10-09.md),
   styled as the fire range's line to Fire doors explained: plain text, the link underlined in ink, a 44px target. */
html body p.furniture-catalogue-link{margin:28px 0;font-size:15px;line-height:1.6;color:var(--hhi-muted);max-width:76ch}
html body .furniture-catalogue-link a{display:inline-block;padding:10px 0;margin:-10px 0;color:var(--hhi-ink);text-decoration:underline;text-underline-offset:4px}
/* Dean's photograph beside the visit section (10 Oct 2026): on phones the crop centres the door (the critic). */
@media(max-width:760px){.shop-visit>img{object-position:50% 45%}}
html body .furniture-catalogue-link a:hover{color:var(--hhi-indigo)}
/* "Fully fitted" beside every "from" price (Karo, 20 Oct 2026; docs/slices/fully-fitted-2026-10-20.md): never broken
   across lines, and on narrow phones its own compact line under the price in the docked bar. */
html body .price-fitted{white-space:nowrap}
@media(max-width:480px){html body .simple-selection .simple-price .price-fitted{display:block;line-height:16px}}
/* Design loop round 5 (22 Oct 2026; card design-loop-round-5). The homepage's house panel on computers: the setting and
   the disclaimer as one caption straight under the photo, and the door, its price and Choose this door as one strip
   (the reassurance line under the price, the button centred beside all three). Phones keep the docked bar unchanged. */
@media(min-width:761px){
 html body .simple-house-caption{margin:0;padding:10px 20px 2px;font-size:12px;line-height:1.5;color:#5f5a6e}
 html body .simple-house-caption p{display:inline;margin:0;padding:0;font-size:inherit;line-height:inherit;color:inherit}
 html body .simple-house-caption .simple-house-scene-label{font-weight:600;color:#3f3a4e}
 html body .simple-house-caption .simple-house-scene-label:empty{display:none}
 html body .simple-house-caption .simple-house-scene-label::before{content:none}
 html body .simple-house-caption .simple-house-scene-label::after{content:' \B7  ';font-weight:400;color:#5f5a6e}
 html body .simple-shopping .simple-selection small{grid-column:1;grid-row:3;margin-top:4px}
 html body .simple-shopping .simple-selection .hhi-button{grid-column:2;grid-row:1/4;align-self:center}
}
/* On tablets the house column is too narrow for the button beside the price, so the strip stacks: door, price, line, then
   the button across the width. */
@media(min-width:761px) and (max-width:900px){
 html body .simple-shopping .simple-selection{grid-template-columns:minmax(0,1fr)}
 html body .simple-shopping .simple-selection small{grid-column:1;grid-row:auto}
 html body .simple-shopping .simple-selection .hhi-button{grid-column:1;grid-row:auto;width:100%;justify-content:center;margin-top:10px}
}
@media(min-width:761px){html body .simple-shopping .simple-selection small{text-wrap:pretty}}
@media(min-width:761px) and (max-height:820px){html body .simple-house-picture{aspect-ratio:auto;height:max(240px,calc(100svh - 400px))}}
@media(max-width:760px){html body .simple-house-caption{display:none}}
/* Computers preview on hover without being told; touch keeps "Tap a door to preview it." */
@media(hover:hover) and (pointer:fine){html body .simple-instruction{display:none}html body .simple-shopping .simple-filters{margin-bottom:22px}}