/* Home Connect owner ecommerce visual layer — 2026-09-16
 * Presentation only. Loaded after site-2027.css in the private 2027 candidate.
 * Business/data logic remains in governed PHP helpers.
 */
:root{--hc-gold:#c58b18;--hc-gold-hi:#e2aa2b;--hc-navy:#071d33;--hc-red:#d20b2f;--hc-soft:#f7f8fa;--hc-line:#e4e8ed;--wrap:1440px}
body.hc27{background:#fff;color:var(--hc-navy)}
body.hc27 .wrap{max-width:1440px;padding-left:28px;padding-right:28px}

/* Gold announcement bar + large white retail header. */
body.hc27 .promo{background:var(--hc-red);color:#fff;font-weight:800;letter-spacing:.015em}
body.hc27 .promo .wrap{min-height:36px;justify-content:space-between}
body.hc27 .promo a{color:#fff;font-weight:900}
body.hc27 .hdr{box-shadow:0 1px 0 rgba(7,29,51,.08);border:0}
body.hc27 .hdr__top{min-height:88px;padding:16px 0;gap:30px}
body.hc27 .brand img{height:58px;max-width:220px;object-fit:contain}
body.hc27 .search{max-width:none;flex:1;min-width:360px}
body.hc27 .search input{height:52px;background:#f4f6f8;border:1px solid #e3e7eb;padding-left:24px;font-size:16px}
body.hc27 .search button{width:46px;height:46px;right:3px;top:3px;background:var(--hc-navy)}
body.hc27 .hact a{font-size:14px;padding:9px 12px}
body.hc27 .nav{border-top:1px solid #eef0f3}
body.hc27 .nav>.wrap>ul{justify-content:center;gap:18px}
body.hc27 .nav .top{height:54px;padding:0 12px;font-size:14px;border-bottom:0!important}
body.hc27 .nav .top:hover{color:var(--hc-gold)}
body.hc27 .nav .deals{color:var(--hc-red)}

/* Homepage hero: room photography first, strong retail message. */
body.hc27 .hero{background:#ddd}
body.hc27 .hs{background:#fff}
body.hc27 .hs{position:relative;overflow:hidden}
body.hc27 .hs__img{object-fit:cover;object-position:var(--hf,50% 50%)}
/* The dark-scrim / white-headline hero this file opened with is superseded by
   the light retail hero further down. Only the declarations that are still in
   force are kept here, so nothing silently outranks the current design - and
   the hero's HEIGHT is not set in this file at all (see .hs, structural). */
body.hc27 .hs__in{display:flex;align-items:center}
body.hc27 .hs__b{display:inline-flex;align-items:center;gap:12px;margin-top:24px;padding:15px 26px;border-radius:5px;background:#e4a719;color:#091d32;font-size:15px;font-weight:950;text-transform:uppercase;letter-spacing:.04em}
body.hc27 .htag{display:none}
body.hc27 .hnav{width:54px;top:0;bottom:0;height:auto;transform:none;border-radius:0;
 background:transparent;box-shadow:none}
body.hc27 .hnav--p{left:0;color:var(--hc-navy)}
body.hc27 .hnav--n{right:0;color:#fff}
body.hc27 .hnav span{width:34px;height:58px}
body.hc27 .hnav--p svg{filter:none}
body.hc27 .hnav--n svg{filter:drop-shadow(0 2px 7px rgba(0,0,0,.55))}
body.hc27 .hnav--p:hover{background:linear-gradient(90deg,rgba(7,29,51,.09),rgba(7,29,51,0))}
body.hc27 .hnav--n:hover{background:linear-gradient(270deg,rgba(6,16,26,.42),rgba(6,16,26,0))}
/* the headline clears the left chevron */
body.hc27 .hs__in>.wrap{padding-left:76px}

/* Tight ecommerce trust strip and section rhythm. */
body.hc27 .ben{background:#fff;border-top:1px solid var(--hc-line);border-bottom:1px solid var(--hc-line)}
body.hc27 .ben .wrap{max-width:1440px}
body.hc27 .ben a{padding:14px 24px}
body.hc27 .ben__ic{border:0;background:transparent;color:var(--hc-red);width:38px;height:38px}
body.hc27 .ben__t{font-size:14px;text-transform:uppercase;letter-spacing:.015em}
body.hc27 .sec{padding:38px 0}
body.hc27 .sec--sm{padding:28px 0}
body.hc27 .shead{margin-bottom:14px}
body.hc27 .shead h2,body.hc27 .dhead h2{font-size:30px;font-weight:950;text-transform:uppercase;letter-spacing:-.025em}
body.hc27 .eyebrow{color:#aa7108;font-weight:900}
body.hc27 .slink{color:#b77907;font-weight:900}

/* Large photographic category tiles. */
body.hc27 .cats{gap:12px}
body.hc27 .cat{border-radius:4px;overflow:hidden;box-shadow:none;border:1px solid var(--hc-line);background:#fff}
body.hc27 .cat__im{aspect-ratio:auto;width:100%;height:245px;min-height:0}
body.hc27 .cat__im img{width:100%;height:245px;object-fit:cover}
body.hc27 .cat__sc{background:linear-gradient(0deg,rgba(5,20,35,.62),transparent 62%)}
body.hc27 .cat__b{padding:14px 16px}
body.hc27 .cat__t{font-size:22px;font-weight:950}
body.hc27 .cat__c{color:#b77907;font-weight:900}

/* Deals/product merchandising. */
body.hc27 .dealsec{background:#f7f8fa}
body.hc27 .dgrid{gap:18px}
body.hc27 .dcol{border-radius:7px;border:1px solid var(--hc-line);box-shadow:none;background:#fff}
body.hc27 .rail{gap:12px}
body.hc27 .pc{border:1px solid var(--hc-line);border-radius:5px;background:#fff;box-shadow:none;overflow:hidden;transition:.18s ease}
body.hc27 .pc:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(7,29,51,.11)}
body.hc27 .pc__im{aspect-ratio:1.25/1;background:#f2f3f4}
body.hc27 .pc__im img{width:100%;height:100%;object-fit:cover}
body.hc27 .pc__b{padding:13px 14px 14px}
body.hc27 .pc__n{font-size:17px;font-weight:950}
body.hc27 .pc__now{color:var(--hc-red);font-size:22px;font-weight:950}
body.hc27 .pc__cta{border:2px solid #d99710;color:#a66c05;background:#fff;font-weight:950;text-transform:uppercase;border-radius:4px}
body.hc27 .pc__cta:hover{background:#e2a51b;color:#071d33}

/* Cabinets and stairs. */
body.hc27 .cabgrid,body.hc27 .stgrid{gap:12px}
body.hc27 .stcard{border-radius:4px;border:1px solid var(--hc-line);box-shadow:none}
body.hc27 .stcard__im{height:220px}
body.hc27 .stcard__im img{width:100%;height:100%;object-fit:cover}
body.hc27 .stcard__bg{background:var(--hc-navy);color:#fff;border-radius:4px;font-weight:900}
body.hc27 .stcard__t{font-size:18px;font-weight:950}
body.hc27 .stcard__c{border:2px solid #d99710;color:#a66c05;border-radius:4px;font-weight:950;text-transform:uppercase}
body.hc27 .ccard{border-radius:5px;overflow:hidden;border:1px solid var(--hc-line);box-shadow:none}
body.hc27 .ccard__im img{object-fit:cover}

/* Shopping pages: compact heading, persistent left filter, 3-up cards. */
body.hc27 .crumbs{background:#fff}
body.hc27 .chead{background:#fff;border-bottom:1px solid var(--hc-line)}
body.hc27 .chead__in{padding-top:20px;padding-bottom:17px}
body.hc27 .chead h1{font-size:34px;font-weight:950;text-transform:uppercase;letter-spacing:-.025em}
body.hc27 .chead p{max-width:760px}
body.hc27 .cdeal{border-radius:4px;background:#fff8e7;border:1px solid #ecd69d}
body.hc27 .shoplay{grid-template-columns:260px minmax(0,1fr);gap:26px;align-items:start}
body.hc27 .fpanel{border:1px solid var(--hc-line);border-radius:6px;background:#fff;box-shadow:none;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}
body.hc27 .fpanel__h{background:#f7f8fa}
body.hc27 .fpanel summary{font-weight:900}
body.hc27 .fopt{font-size:14px}
body.hc27 .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
body.hc27 .toolbar{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #eef0f2}
body.hc27 .toolbar select{border-radius:4px;background:#fff}
body.hc27 .count{font-weight:800}

/* PDP rules moved to the single PDP system block in hc-2027-refine.css (21 Sep). */

/* Bright About/Contact/internal pages. */
body.hc27 .phero{background:#f7f8fa;color:var(--hc-navy);min-height:360px}
body.hc27 .phero__img img{object-position:center}
body.hc27 .phero__sc{background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.9) 38%,rgba(255,255,255,.18) 70%,transparent)}
body.hc27 .phero__in{padding:62px 0;min-height:360px;display:flex;align-items:center}
body.hc27 .phero h1{color:var(--hc-navy);font-size:52px;font-weight:950;line-height:1.02}
body.hc27 .phero h1 em{color:#b77907}
body.hc27 .phero p{color:#304357;font-size:18px}
body.hc27 .phero .btn--w{color:var(--hc-navy);border-color:var(--hc-navy);background:#fff}
body.hc27 .split{border-radius:6px;overflow:hidden;box-shadow:none}
body.hc27 .split__im img{width:100%;height:100%;object-fit:cover}
body.hc27 .hcard{border-radius:6px;box-shadow:none;border:1px solid var(--hc-line)}
body.hc27 .hc27-embed{background:#fff;border:1px solid var(--hc-line);border-radius:6px;padding:20px;overflow:hidden}
body.hc27 .hc27-embed input,body.hc27 .hc27-embed textarea,body.hc27 .hc27-embed select{border-radius:4px!important}

/* Cart and checkout: preserve Woo logic, visually simplify it. */
body.hc27 .steps{max-width:640px;margin:0 auto 24px}
body.hc27 .steps li{font-weight:850}
body.hc27 .steps li b{background:#eef1f4;color:var(--hc-navy)}
body.hc27 .steps li.on b,body.hc27 .steps li.done b{background:#dfa51e;color:#071d33}
body.hc27 .hc27-woo{border-top:1px solid var(--hc-line);padding-top:18px}
body.hc27 .hc27-woo table{border-color:var(--hc-line)!important}
body.hc27 .hc27-woo input,body.hc27 .hc27-woo select,body.hc27 .hc27-woo textarea{border-radius:4px!important}
body.hc27 .hc27-woo .button,body.hc27 .hc27-woo button,body.hc27 .hc27-woo #place_order{border-radius:4px!important;font-weight:900!important}
body.hc27 .hc27-woo #place_order{background:#dfa51e!important;color:#071d33!important;min-height:50px}
body.hc27 .hc27-woo .cart_totals,body.hc27 .hc27-woo #order_review{background:#fafbfc;border:1px solid var(--hc-line);border-radius:6px;padding:18px}

/* Dark navy retail footer. */
body.hc27 .ft{background:linear-gradient(135deg,#061a2e,#0b2b48);color:#fff}
body.hc27 .ft__m{padding-top:38px;padding-bottom:34px;gap:34px}
body.hc27 .ft h3{text-transform:uppercase;font-size:13px;letter-spacing:.05em}
body.hc27 .ft a:hover{color:#f0b529}
body.hc27 .sc button{background:#dfa51e;color:#071d33;font-weight:950}

@media(max-width:1080px){
 body.hc27 .hdr__top{min-height:auto;flex-wrap:wrap}
 body.hc27 .brand img{height:45px}
 /* The search takes its own full-width row below the logo on small screens.
    Left as a flex sibling it collapsed to a few pixels and its input spilled
    past the viewport, which is where the horizontal scroll came from. */
 body.hc27 .search{order:3;flex:1 0 100%;min-width:0;max-width:none;width:100%}
 body.hc27 .search input{height:46px;padding-left:18px;font-size:16px}
 body.hc27 .search button{width:40px;height:40px}
 body.hc27 .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.hc27 .shoplay{grid-template-columns:220px minmax(0,1fr)}
}
@media(max-width:760px){
 body.hc27 .wrap{padding-left:16px;padding-right:16px}
 body.hc27 .promo .wrap{justify-content:center;min-height:34px}
 body.hc27 .hs__sc{background:linear-gradient(0deg,rgba(5,20,35,.9),rgba(5,20,35,.16))}
 body.hc27 .hs__in{align-items:flex-end;padding-bottom:48px}
 body.hc27 .hs__h{font-size:38px}
 body.hc27 .hs__p{font-size:17px}
 body.hc27 .ben ul{grid-template-columns:1fr 1fr}
 body.hc27 .cats{grid-template-columns:1fr 1fr}
 body.hc27 .cat__im{aspect-ratio:auto;width:100%;height:190px;min-height:0}
 body.hc27 .cat__im img{height:190px}
 body.hc27 .shoplay{display:block}
 body.hc27 .fpanel{position:fixed;max-height:none}
 body.hc27 .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 body.hc27 .phero{min-height:310px}
 body.hc27 .phero__in{min-height:310px;padding:44px 0}
 body.hc27 .phero h1{font-size:38px}
 body.hc27 .phero__sc{background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.72))}
 body.hc27 .hc27-woo .cart_totals,body.hc27 .hc27-woo #order_review{padding:12px}
}
@media(max-width:480px){
 body.hc27 .cats{grid-template-columns:1fr}
 body.hc27 .cat__im{aspect-ratio:auto;width:100%;height:220px}
 body.hc27 .cat__im img{height:220px}
 body.hc27 .pgrid{grid-template-columns:1fr}
 body.hc27 .ben ul{grid-template-columns:1fr}
 body.hc27 .shead h2,body.hc27 .dhead h2{font-size:25px}
}
/* --------------------------------------------- shopping density corrections
 * The next row of products has to be reachable without a long scroll, so the
 * card image is a shallower landscape crop on the grid (the deals rail keeps
 * its taller crop) and the grid runs four across when there is no filter rail
 * to share the width with. */
body.hc27 .pgrid .pc__im{aspect-ratio:1.38/1}
body.hc27 .pgrid{gap:16px}
body.hc27 .shoplay--nof{grid-template-columns:minmax(0,1fr)}
body.hc27 .shoplay--nof .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
body.hc27 .pc__b{padding:12px 13px 13px}
body.hc27 .pc__cta{padding:9px 12px;font-size:12.5px}
body.hc27 .wrap{padding-left:40px;padding-right:40px}
@media(max-width:1080px){
 body.hc27 .shoplay--nof{grid-template-columns:minmax(0,1fr)}
 body.hc27 .shoplay--nof .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
 body.hc27 .wrap{padding-left:24px;padding-right:24px}
}
@media(max-width:760px){
 body.hc27 .shoplay--nof .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.hc27 .wrap{padding-left:16px;padding-right:16px}
}
@media(max-width:480px){
 body.hc27 .shoplay--nof .pgrid{grid-template-columns:1fr}
}

/* The page hero centres its content block when the row is a flex container,
   which pushed the heading into the middle of the image. The wrap has to take
   the full row, exactly as the homepage hero's does. */
body.hc27 .phero__in>.wrap,body.hc27 .hs__in>.wrap{flex:1 1 auto;width:100%;margin-left:0;margin-right:0}

/* The page hero is light now, so its quick links have to be dark. They were
   white on white and effectively invisible. */
body.hc27 .sncap .btn--w,body.hc27 .acch .btn--w{background:#fff;color:var(--hc-navy);border:1px solid var(--hc-navy)}
body.hc27 .sncap .btn--w:hover,body.hc27 .acch .btn--w:hover{background:var(--hc-navy);color:#fff}
body.hc27 .phero .qa a{background:#fff;border:1px solid var(--hc-line);color:var(--hc-navy);
 font-weight:800}
body.hc27 .phero .qa a:hover{border-color:var(--hc-navy);background:var(--hc-navy);color:#fff}
body.hc27 .phero .btn--w{background:#fff;color:var(--hc-navy);border:1px solid var(--hc-navy)}
body.hc27 .phero .btn--w:hover{background:var(--hc-navy);color:#fff}

/* ------------------------------------------------------------ mobile density
 * Phone corrections found in review at 390: the hero arrows sat on top of the
 * slide copy (the dots and swipe already move the carousel, so the arrows go),
 * and the product grid and trust strip drop to one column far too early for a
 * shop - two across is what a customer expects to see. */
@media(max-width:760px){
 body.hc27 .hnav{display:none}
 body.hc27 .hs__tx{max-width:none}
}
@media(max-width:480px){
 body.hc27 .ben ul{grid-template-columns:1fr 1fr}
 body.hc27 .ben a{padding:12px 10px;flex-direction:column;align-items:flex-start;gap:6px}
 body.hc27 .ben__s{font-size:11.5px}
 body.hc27 .pgrid,body.hc27 .shoplay--nof .pgrid{grid-template-columns:1fr 1fr;gap:10px}
 body.hc27 .pc__t{font-size:13.5px}
 body.hc27 .pc__now{font-size:17px}
 body.hc27 .pc__b{padding:10px}
 body.hc27 .pc__cta{padding:8px 6px;font-size:11.5px}
 body.hc27 .cats{grid-template-columns:1fr 1fr}
 body.hc27 .cat__im{aspect-ratio:auto;width:100%;height:150px;min-height:0}
 body.hc27 .cat__im img{height:150px}
 body.hc27 .cat__t{font-size:17px}
}
@media(max-width:480px){
 body.hc27 .cat__c{font-size:12px;padding:7px 10px;white-space:nowrap}
 body.hc27 .cat__b{padding:12px}
}

/* =====================================================================
 * Homepage correction pass — header presence, hero dominance, trust strip
 * ===================================================================== */

/* HEADER — a major retailer's header, not a contractor's. Big logo left, a
   search bar that owns the centre, phone/help and account/cart right, with
   the department navigation clearly separated beneath it. */
body.hc27 .hdr__top{min-height:70px;padding:9px 0;gap:26px}
body.hc27 .brand img{height:46px;max-width:210px}
body.hc27 .search{max-width:760px;margin:0 auto}
body.hc27 .search input{height:44px;font-size:15.5px;border-radius:999px;
 border:2px solid #dfe4e9;background:#fff;padding-left:22px}
body.hc27 .search input:focus{border-color:var(--hc-navy)}
body.hc27 .search button{width:38px;height:38px;right:3px;top:3px}
body.hc27 .hact{gap:4px}
body.hc27 .hact a{padding:8px 11px;border-radius:8px}
body.hc27 .hact a:hover{background:#f4f6f8}
body.hc27 .hact .lbl small{font-size:11px;color:#5c6b7a}
body.hc27 .hact .lbl b{font-size:14px;color:var(--hc-navy)}
body.hc27 .hphone .lbl b{white-space:nowrap}
body.hc27 .nav{border-top:1px solid #e8ebef;background:#fff;
 box-shadow:0 1px 0 rgba(7,29,51,.06)}
body.hc27 .nav .top{height:42px;font-size:14px;letter-spacing:.02em}

/* HERO — the dominant element on the page. The room photograph stays bright
   and unfiltered; a light scrim on the left carries the type instead of
   darkening the picture, so the headline can run navy with the price in red,
   and one gold call to action underneath. */
/* Hero height is set once, in the structural layer (.hs). It is deliberately
   NOT restated here: a min-height in this layer cannot shrink a box that the
   structural layer gives a fixed height, which is why earlier hero-height
   corrections made from this file had no effect at all. */
/* The scrim is a panel, not a haze: solid enough to carry navy type across the
   left of the frame, then gone by the middle so the room photograph stays as
   bright and sharp as it was shot. */
/* A white panel with a defined edge, not a haze spread across the picture:
   the type sits on solid white, the photograph runs at its own brightness
   from just under halfway, and the join is a short fade rather than a wash. */
body.hc27 .hs__sc{background:linear-gradient(90deg,#fff 0%,#fff 33%,
 rgba(255,255,255,.90) 38%,rgba(255,255,255,.40) 45%,
 rgba(255,255,255,.06) 51%,rgba(255,255,255,0) 56%)}
body.hc27 .hs__tx{max-width:430px;padding:18px 0}
body.hc27 .hs__k{display:inline-block;background:var(--hc-red);color:#fff;font-size:11.5px;
 font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;
 border-radius:3px;margin-bottom:11px}
body.hc27 .hs__h{font-size:clamp(34px,3.1vw,46px);font-weight:950;line-height:.95;
 text-transform:uppercase;letter-spacing:-.035em;color:var(--hc-navy);text-shadow:none}
/* The promotional line stacks the way the owner specified: the offer wording,
   then the price on its own line, then the unit beside it. */
body.hc27 .hs__h em{display:block;color:var(--hc-red);font-style:normal;margin-top:6px;
 font-size:.58em;line-height:1;letter-spacing:-.02em}
body.hc27 .hs__h em b{display:block;font-size:1.62em;font-weight:950;line-height:.96;
 margin-top:4px}
body.hc27 .hs__h em span{font-size:.5em;letter-spacing:.01em}
body.hc27 .hs__p{color:#2b3e52;font-size:16px;line-height:1.4;max-width:400px;margin-top:11px}
body.hc27 .hs__b{margin-top:16px;padding:13px 26px;font-size:15px;border-radius:5px;
 box-shadow:0 6px 18px rgba(197,139,24,.32)}
body.hc27 .hdots{bottom:18px}
body.hc27 .hdots button{background:rgba(7,29,51,.24)}
body.hc27 .hdots button[aria-current=true]{background:var(--hc-navy)}

/* TRUST STRIP — four items, icons, hard separators, directly under the hero. */
body.hc27 .ben{background:#fff;border-bottom:2px solid #eceff2}
body.hc27 .ben ul{grid-template-columns:repeat(4,minmax(0,1fr))}
body.hc27 .ben li+li{border-left:1px solid var(--hc-line)}
body.hc27 .ben a{padding:15px 20px;gap:13px;align-items:flex-start}
body.hc27 .ben a>span:last-child{padding-top:2px}
body.hc27 .ben__ic{width:38px;height:38px;flex:0 0 38px;border-radius:50%;
 background:rgba(210,11,47,.08);color:var(--hc-red)}
body.hc27 .ben__t{font-size:14.5px;font-weight:900;letter-spacing:.01em;color:var(--hc-navy);line-height:1.25}
body.hc27 .ben__s{font-size:13.5px;color:#5c6b7a;margin-top:3px}

/* Section scale, so the page reads as a storefront rather than a card wall. */
body.hc27 .shead h2,body.hc27 .dhead h2{font-size:34px}
body.hc27 .sec{padding:46px 0}
body.hc27 .cat__t{font-size:24px}

@media(max-width:1080px){
 body.hc27 .hdr__top{min-height:auto;padding:12px 0;gap:10px 14px}
 body.hc27 .search{max-width:none;margin:0}
 body.hc27 .hphone{display:none}
 body.hc27 .ben ul{grid-template-columns:1fr 1fr}
 body.hc27 .ben li:nth-child(3){border-left:0}
 body.hc27 .shead h2,body.hc27 .dhead h2{font-size:28px}
}
@media(max-width:760px){
 /* The phone hero is a split (image band + white copy block) built in the
    structural layer. This layer only sets type and the brand mark - it must
    not re-create the full-height overlay or the scrim that used to white out
    the floor in the photograph. */
 body.hc27 .hs__in{align-items:stretch;padding-bottom:0}
 body.hc27 .hs__h{font-size:28px;color:var(--hc-navy)}
 body.hc27 .hs__in>.wrap{padding-left:16px;padding-right:16px}
 body.hc27 .hs__b{margin-top:14px;padding:13px 20px;box-shadow:none}
 body.hc27 .hs__tx{padding:15px 0 18px}
 body.hc27 .hero{background:#fff}
 body.hc27 .brand img{height:40px}
 /* Trust strip: four compact rows of two, not four tall blocks. */
 body.hc27 .ben a{padding:9px 11px;gap:9px;flex-direction:row;align-items:center;min-height:0}
 body.hc27 .ben__ic{width:28px;height:28px;flex:0 0 28px}
 body.hc27 .ben__ic svg{width:14px;height:14px}
 body.hc27 .ben__t{font-size:12px;line-height:1.2;text-wrap:balance}
}
@media(max-width:480px){
 body.hc27 .ben a{padding:9px 9px}
 body.hc27 .ben li:nth-child(3){border-left:1px solid var(--hc-line)}
 body.hc27 .hs__h{font-size:26px}
}

/* Collection cards keep the shopping grid's density: three across beside the
   filter rail, with the room scene given the height it deserves. */
body.hc27 .ccgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
body.hc27 .cc27{border-radius:5px;box-shadow:none}
body.hc27 .cc27__t{font-size:19px;font-weight:950}
body.hc27 .cc27__now{font-size:24px;font-weight:950}
body.hc27 .cc27__cta{border-radius:4px;font-weight:950}
@media(max-width:1080px){body.hc27 .ccgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){body.hc27 .ccgrid{grid-template-columns:1fr}}

/* =====================================================================
 * Real-WordPress corrections (17 Sep)
 * Two defects that only appear on the live stack, where plugin and core
 * stylesheets load after the 2027 files. Both are unscoped rules winning
 * on cascade order, so both fixes are scoped to body.hc27 to outrank them
 * without touching anything outside the 2027 candidate.
 * ===================================================================== */

/* 1. A plain `a { text-decoration: underline }` from a later stylesheet beat
      site-2027's `a{text-decoration:none}`, underlining the navigation, the
      hero headline, body copy and every card link. Reset scoped to the 2027
      body; the three places the design genuinely wants an underline are
      re-asserted immediately after so they still win. */
body.hc27 a{text-decoration:none}
body.hc27 .promo a{text-decoration:underline;text-underline-offset:2px}
body.hc27 .crumbs a:hover{text-decoration:underline}
body.hc27 .hc27-woo a{text-decoration:underline;text-underline-offset:3px}
body.hc27 .hc27-woo a.button,body.hc27 .hc27-woo button,
body.hc27 .hc27-woo input[type=submit]{text-decoration:none}

/* 2. Same cause: the department navigation was being shown again on phones,
      where its row is far wider than the viewport and pushed the whole page
      sideways. The burger is the phone navigation. */
@media(max-width:1080px){
 body.hc27 .nav{display:none}
}

/* Deals: two merchandising columns, retail density. */
body.hc27 .dealcol__h h3{font-size:21px;font-weight:950;color:var(--hc-navy)}
body.hc27 .dealcol__h{border-bottom-color:#e3e7ec}
body.hc27 .dealcols{gap:30px}
body.hc27 .dealcol .pc{background:#fff}
body.hc27 .dealcol .pc__im{aspect-ratio:1.1/1}
/* Cabinet collections sit two-up beside the design panel, as in the reference. */
body.hc27 .sidegrid{grid-template-columns:minmax(0,1fr) 320px}
body.hc27 .sidegrid .cabrow{gap:14px}
@media(max-width:1080px){
 body.hc27 .sidegrid{grid-template-columns:minmax(0,1fr)}
 body.hc27 .sidegrid .cabrow,body.hc27 .sidegrid .stcards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =====================================================================
 * Real-stack armour, round 2
 * The live site loads a Bootstrap-family stylesheet after the 2027 files.
 * Two of its unscoped rules were winning on cascade order:
 *   a   { color:#0d6efd }  -> every card title rendered link-blue
 *   .btn{ display:block; padding:6px 12px; color:#212529; background:none }
 *                          -> every 2027 button lost its fill and its shape,
 *                             which is why "Send us a message" was invisible
 *                             on the navy panel.
 * Restated here under body.hc27 so the 2027 candidate owns its own colour and
 * button system without touching anything outside it.
 * ===================================================================== */
body.hc27 a{color:inherit}
body.hc27 .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
 border-radius:8px;font-weight:800;font-size:15px;padding:13px 24px;min-height:46px;
 border:1.6px solid transparent;cursor:pointer;text-align:center;width:auto}
body.hc27 .btn--g{background:var(--hc-gold,#C8871F);color:#1B1102;border-color:var(--hc-gold,#C8871F)}
body.hc27 .btn--g:hover{background:#e0a02f;border-color:#e0a02f}
body.hc27 .btn--n{background:var(--hc-navy);color:#fff;border-color:var(--hc-navy)}
body.hc27 .btn--o{background:#fff;color:var(--hc-navy);border-color:var(--hc-navy)}
body.hc27 .btn--w{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
body.hc27 .btn--w:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
body.hc27 .btn--blk{width:100%}
body.hc27 .cc__t,body.hc27 .stcard__t{color:var(--hc-navy)}

/* Retail density: the collection and stair cards were running to 376px and
   220px of image, which made two rows of cards taller than a whole screen. */
body.hc27 .sidegrid .cc__im{aspect-ratio:16/10}
body.hc27 .sidegrid .cc__im img{height:100%}
body.hc27 .cc__b{padding:13px 15px 15px}
body.hc27 .cc__t{font-size:18px;font-weight:950}
body.hc27 .stcard__im{aspect-ratio:16/11}
/* The side panel is a panel, not a column: it sizes to its own content. */
body.hc27 .spanel--gold,body.hc27 .spanel--navy{align-self:start}
@media(max-width:1080px){
 body.hc27 .spanel--gold,body.hc27 .spanel--navy{align-self:stretch}
}

/* HP-9 reads "four large cards ... with a panel to the right" - one row, not a
   2x2 block. Four across beside a 320px panel gives ~245px cards, the same
   scale as the deal cards, and takes the cabinet section from two screens to
   one. Below 1200 the row folds to two, then to one. */
@media(min-width:1200px){
 body.hc27 .sidegrid .cabrow,body.hc27 .sidegrid .stcards{
  grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
 body.hc27 .sidegrid .cc__im{aspect-ratio:4/3}
 body.hc27 .sidegrid .cc__t{font-size:16.5px}
 body.hc27 .sidegrid .cc__b{padding:11px 12px 13px}
 body.hc27 .sidegrid .stcard__im{aspect-ratio:4/3}
}

/* =====================================================================
 * VISUAL-MATCH PASS — the approved homepage reference (HP-9)
 *
 * The reference carries its hero on the PHOTOGRAPH: a dark gradient from the
 * left, white headline, gold second line, gold button, script tagline bottom
 * right. The light-panel treatment above bleached the left half of every room
 * scene, which is the washed-out look the owner reported. Everything below
 * supersedes the light hero in this file.
 * ===================================================================== */

/* Hero band: shorter, and measured off the reference - promo, header, nav and
   hero together land the shopping content just past 550px at 1440. */
body.hc27 .hs{height:330px}
body.hc27 .hero{background:#0b1a2b}

/* The scrim is a directional darkening, not a wash. The photograph keeps its
   own brightness from the middle out; nothing is faded, filtered or lightened. */
body.hc27 .hs__sc{background:
 linear-gradient(90deg,rgba(6,16,26,.86) 0%,rgba(6,16,26,.74) 26%,
 rgba(6,16,26,.42) 46%,rgba(6,16,26,.10) 64%,rgba(6,16,26,0) 78%),
 linear-gradient(0deg,rgba(6,16,26,.30) 0%,rgba(6,16,26,0) 42%)}

body.hc27 .hs__tx{max-width:560px;padding:0}
body.hc27 .hs__k{display:inline-block;background:var(--hc-red);color:#fff;font-size:11px;
 font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;
 border-radius:3px;margin-bottom:10px}
body.hc27 .hs__h{font-size:clamp(32px,3.05vw,46px);font-weight:950;line-height:.97;
 text-transform:uppercase;letter-spacing:-.03em;color:#fff;
 text-shadow:0 2px 18px rgba(0,0,0,.45)}
body.hc27 .hs__h em{display:block;color:#F0B429;font-style:normal;margin-top:4px;
 font-size:1em;line-height:.97;letter-spacing:-.03em}
/* The deal slide stacks offer / price / unit; the price stays gold because red
   on a dark photograph does not clear the contrast floor (design lock D5). */
body.hc27 .hs__h em b{display:block;font-size:1.34em;font-weight:950;line-height:.94;
 margin-top:2px;color:#F0B429}
body.hc27 .hs__h em span{font-size:.5em;letter-spacing:.01em}
body.hc27 .hs__p{color:rgba(255,255,255,.93);font-size:16.5px;line-height:1.38;
 max-width:430px;margin-top:12px;text-shadow:0 1px 12px rgba(0,0,0,.5)}
body.hc27 .hs__b{margin-top:18px;padding:14px 26px;font-size:15px;border-radius:5px;
 background:#F0B429;color:#12100a;box-shadow:0 8px 22px rgba(0,0,0,.30)}
body.hc27 .hs:hover .hs__b{background:#ffc94d}
body.hc27 .hdots button{background:rgba(255,255,255,.45)}
body.hc27 .hdots button[aria-current=true]{background:#fff}
body.hc27 .hnav--p,body.hc27 .hnav--n{color:#fff}
body.hc27 .hnav--p svg{filter:drop-shadow(0 2px 7px rgba(0,0,0,.55))}

/* The script tagline the reference carries at the bottom right of the hero. */
body.hc27 .htag{display:block;bottom:26px}
body.hc27 .htag span{font-family:"Segoe Script","Brush Script MT",cursive;font-style:normal;
 font-size:21px;line-height:1.25;color:#fff;text-align:right;
 text-shadow:0 2px 14px rgba(0,0,0,.55)}

/* CATEGORY TILES — landscape photographs, as in the reference, with the label
   and its button sitting on the picture over a stronger bottom gradient. The
   portrait crop was forcing every source image to be enlarged and cut, which
   is what made the SnapCaps render look pale beside the room scenes. */
body.hc27 .cats{gap:12px}
body.hc27 .cat__im{aspect-ratio:3/2;width:100%;height:auto;min-height:0}
body.hc27 .cat__im img{width:100%;height:100%;object-fit:cover}
body.hc27 .cat__sc{background:linear-gradient(0deg,rgba(4,14,26,.86) 0%,
 rgba(4,14,26,.42) 38%,rgba(4,14,26,.06) 66%,rgba(4,14,26,0) 100%)}
body.hc27 .cat__t{font-size:19px;font-weight:950;text-shadow:0 1px 10px rgba(0,0,0,.45)}
body.hc27 .cat__b{padding:12px 12px}
body.hc27 .cat__c{font-size:12px;padding:7px 11px;min-height:30px;color:#12100a;background:#fff}
body.hc27 .cat:hover .cat__c{background:#F0B429}

/* Trust strip: the reference runs it tighter than we were. */
body.hc27 .ben a{padding:12px 20px;gap:12px}
body.hc27 .ben__ic{width:32px;height:32px;flex:0 0 32px}
body.hc27 .ben__t{font-size:13.5px}
body.hc27 .ben__s{font-size:12.5px;margin-top:2px}

/* Section rhythm: less air between bands, more merchandise on screen. */
body.hc27 .sec{padding:38px 0}
body.hc27 .shead h2,body.hc27 .dhead h2{font-size:30px}

@media(max-width:1180px){
 body.hc27 .cat__t{font-size:17px}
}
@media(max-width:1080px){
 body.hc27 .hs{height:300px}
 body.hc27 .cats{grid-template-columns:repeat(3,minmax(0,1fr))}
 body.hc27 .cat__im{aspect-ratio:3/2;height:auto}
 body.hc27 .cat__im img{height:100%}
}
@media(max-width:760px){
 /* The phone hero keeps its split - image band above a white copy block - but the
    band itself is a photograph at full strength, never a faded one. */
 body.hc27 .hs__h{font-size:28px;color:var(--hc-navy);text-shadow:none}
 body.hc27 .hs__h em,body.hc27 .hs__h em b{color:var(--hc-red)}
 body.hc27 .hs__p{color:#4a5a6b;text-shadow:none}
 body.hc27 .htag{display:none}
 body.hc27 .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.hc27 .cat__im{aspect-ratio:3/2;height:auto}
 body.hc27 .cat__im img{height:100%}
}

/* CABINETS — the design service is a navy/gold treatment beside the
   collections, as in the approved reference, not a grey box. The collection
   photography is given more of the card. */
body.hc27 .spanel--gold{background:var(--hc-navy);border:0;color:#fff}
body.hc27 .spanel--gold .spanel__b h3{color:#fff}
body.hc27 .spanel--gold .spanel__b p{color:rgba(255,255,255,.82)}
body.hc27 .spanel--gold .spanel__b .btn{margin-top:16px;background:#F0B429;color:#12100a;
 border-color:#F0B429}
body.hc27 .spanel--gold .spanel__b .btn:hover{background:#ffc94d;border-color:#ffc94d}
body.hc27 .spanel__x{color:#FFD87A}
body.hc27 .spanel__x:hover{color:#fff}
@media(min-width:1200px){
 /* Finished-kitchen photography gets the height it deserves in the row. */
 body.hc27 .sidegrid .cc__im{aspect-ratio:3/2}
 body.hc27 .sidegrid .stcard__im{aspect-ratio:3/2}
}

/* =====================================================================
 * SECTION 1 — header + hero, to the approved reference
 * ===================================================================== */

/* The reference runs the department navigation from the same left edge as the
   logo, not centred, and gives the search the width the phone block was using.
   The phone stays in the promo bar, where the reference also keeps it. */
body.hc27 .hphone{display:none}
@media(min-width:1081px){
 body.hc27 .nav>.wrap>ul{justify-content:flex-start;gap:34px}
 body.hc27 .search{max-width:none;margin:0 auto 0 0;flex:1 1 auto}
 body.hc27 .hdr__top{gap:34px}
}

/* Headline scale measured off the reference: "BEAUTIFUL FLOORS" fills roughly
   a third of the page width at 1440. */
body.hc27 .hs__p{font-size:17px;max-width:420px}

/* The navigation row was sitting in a narrower wrap than the header above it,
   so it started 114px in from the logo. Same wrap, same left edge, and the
   first item's own padding is offset so its text lines up with the wordmark. */
@media(min-width:1081px){
 body.hc27 .nav>.wrap{max-width:1440px}
 body.hc27 .nav>.wrap>ul{margin-left:-14px}
 /* Logo scale measured off the reference. */
 body.hc27 .brand img{height:58px;max-width:250px}
 /* "FOR A BETTER HOME" is one line in the reference; give it the width. */
 body.hc27 .hs__tx{max-width:780px}
 body.hc27 .hs__h{font-size:clamp(34px,3.2vw,46px)}
 /* the second line is one line in the reference */
 body.hc27 .hs__h em{white-space:nowrap}
 body.hc27 .hs__p{max-width:440px}
}

/* The nav element had become a flex container, so its .wrap shrank to its
   content and the auto margins centred it 121px in from the logo. Block flow
   restores the shared left edge - on desktop only, because below 1080 the
   department row is hidden behind the burger and an unmediated display:block
   here would override that. */
@media(min-width:1081px){
 body.hc27 .nav{display:block}
 body.hc27 .nav>.wrap{width:100%;margin-left:0;margin-right:0}
}
/* Re-asserted after every rule above that touches .nav, so the phone header
   keeps the burger and never the 1052px department row. */
@media(max-width:1080px){
 body.hc27 .nav{display:none}
}

/* =====================================================================
 * Phone hero — re-asserted last.
 * The Section 1 hero rules above are unmediated, so on a phone they were
 * overriding the split hero: a fixed 330px box clipped the offer and the
 * navy hero background showed through beneath it. The phone hero is a
 * full-width photograph band with the offer on white underneath, and it
 * sizes to its own content.
 * ===================================================================== */
@media(max-width:760px){
 body.hc27 .hero{background:#fff}
 body.hc27 .hs{height:auto;background:#fff}
 body.hc27 .hs__img{position:relative;height:172px;width:100%;object-position:var(--hf,50% 60%)}
 body.hc27 .hs__sc{display:none}
 body.hc27 .hs__in{position:relative;height:auto;display:block;align-items:stretch;padding-bottom:0}
 body.hc27 .hs__in>.wrap{padding-left:16px;padding-right:16px}
 body.hc27 .hs__tx{max-width:none;padding:14px 16px 16px;display:block}
 body.hc27 .hs__h{font-size:27px;color:var(--hc-navy);text-shadow:none;white-space:normal}
 body.hc27 .hs__h em,body.hc27 .hs__h em b{color:var(--hc-red);white-space:normal}
 body.hc27 .hs__p{display:none}
 body.hc27 .hs__b{margin-top:14px;padding:13px 20px;width:100%;justify-content:center;
  box-shadow:none}
 body.hc27 .hdots{position:relative;bottom:auto;left:auto;right:auto;padding-bottom:10px}
 body.hc27 .hnav{width:38px;top:0;bottom:auto;height:172px}
 body.hc27 .htag{display:none}
}

/* =====================================================================
 * SECTION 1 — owner correction, 17 Sep
 * Promo bar is gold (this supersedes the earlier red ruling), the hero is
 * a bright photograph with a localized shadow rather than a veil, and gold
 * is an accent on one element per slide, never a block of type.
 * ===================================================================== */

/* PROMO BAR — the reference's muted gold, sampled from it: rgb(166,128,31).
   Dark navy type on it clears AA at this size. */
body.hc27 .promo{background:#A6801F;color:#101B26;font-weight:800;letter-spacing:.015em}
body.hc27 .promo a{color:#101B26;font-weight:900;text-underline-offset:2px}
body.hc27 .promo a:hover{color:#000}
body.hc27 .promo b{color:#101B26}
body.hc27 .promo span+span::before{background:rgba(16,27,38,.55)}
body.hc27 .promo .wrap{min-height:38px}

/* HERO — the photograph is the star. The shadow sits on the left third only
   and is gone by the middle; nothing covers the right of the frame, and the
   image is never filtered or dimmed as a whole. Type carries a shadow of its
   own so it stays readable where the room is light. */
body.hc27 .hero{background:#0b1a2b}
body.hc27 .hs__sc{background:linear-gradient(90deg,
 rgba(6,16,26,.80) 0%,rgba(6,16,26,.62) 18%,rgba(6,16,26,.34) 32%,
 rgba(6,16,26,.12) 44%,rgba(6,16,26,0) 56%)}

/* White headline, one gold accent. <i> stays white; <b> is the accent. */
body.hc27 .hs__h{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.55)}
body.hc27 .hs__h em{display:block;color:#fff;font-style:normal;margin-top:4px}
body.hc27 .hs__h em i{display:block;font-style:normal;color:#fff;font-size:.52em;
 line-height:1.05;letter-spacing:-.01em;margin-bottom:2px}
body.hc27 .hs__h em b{display:block;color:#F0B429;font-weight:950;line-height:.96}
body.hc27 .hs__h em span{font-size:.5em;letter-spacing:.01em;color:#F0B429}
body.hc27 .hs__p{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.6)}
body.hc27 .htag span{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6)}

/* DEALS — the two rails sit side by side, so their cards must end on the same
   line. Carpet cards carry no spec line and no box figure, which left them
   60px shorter than the LVP cards beside them. Each column now stretches to
   the taller one and every card pins its button to the bottom. */
@media(min-width:981px){
 body.hc27 .dealcols{align-items:stretch}
 body.hc27 .dealcol{display:flex;flex-direction:column}
 body.hc27 .dealcol .railwrap{flex:1 1 auto;display:flex}
 body.hc27 .dealcol .rail{flex:1 1 auto;align-items:stretch}
}
body.hc27 .dealcol .pc{height:100%}
body.hc27 .dealcol .pc__b{display:flex;flex-direction:column;flex:1 1 auto}
body.hc27 .dealcol .pc__cta{margin-top:auto}

/* The old Elementor header's search and account popups are printed into
   every page. The 2027 chrome has its own search and account link and no
   trigger for either popup, so on 2027 pages they are orphans: before
   Elementor's script initialises they sit in the page flow below the footer,
   and they were the source of the 40px sideways scroll at tablet widths.
   A popup Elementor has actually opened lives inside .elementor-popup-modal
   and is left alone. */
body.hc27 [data-elementor-type="popup"]{display:none!important}
body.hc27 .elementor-popup-modal [data-elementor-type="popup"]{display:block!important}

/* =====================================================================
 * PHONE HERO — restated last, again.
 * The Section 1 hero rules above are unmediated, so on a phone they were
 * putting white type with a heavy shadow onto the white copy block and a
 * navy band under the button. On a phone the offer sits on white: navy
 * headline, one accent line in the AA gold (#8F5D0E), no text shadow.
 * ===================================================================== */
@media(max-width:760px){
 body.hc27 .hero{background:#fff}
 body.hc27 .hs__h{color:var(--hc-navy);text-shadow:none}
 body.hc27 .hs__h em{color:var(--hc-navy)}
 body.hc27 .hs__h em i{color:var(--hc-navy)}
 body.hc27 .hs__h em b,body.hc27 .hs__h em span{color:#8F5D0E;text-shadow:none}
 body.hc27 .hs__p{display:none}
 body.hc27 .htag{display:none}
}
/* The compatibility strip's call to action is a link, and reads as one. */
body.hc27 .cabcta__b{color:#8F5D0E}
body.hc27 .cabcta:hover .cabcta__b{color:var(--hc-navy)}

/* Phone polish, homepage review 19 Sep */
@media(max-width:760px){
 /* the carousel dots sit on the white copy block, so they need a dark tone */
 body.hc27 .hdots button{background:transparent}
 body.hc27 .hdots button::before{background:rgba(7,29,51,.22)}
 body.hc27 .hdots button[aria-current=true]::before{background:var(--hc-navy)}
 /* two stair cards per row leave ~150px; the button label holds one line */
 body.hc27 .stcard__c{font-size:12px;padding:10px 6px;white-space:nowrap;gap:5px;
  letter-spacing:.02em}
}
@media(max-width:560px){
 /* the footer's three link columns run two-up instead of one long list */
 body.hc27 .ft__m{grid-template-columns:1fr 1fr;gap:20px 16px}
 body.hc27 .ft__m>:first-child,body.hc27 .ft__m>:last-child{grid-column:1/-1}
}

/* ---- Shop / category pass (2026-09-19) ------------------------------------ */
/* Sort select: a control, not a full-width bar (a later plugin sheet set 100%). */
body.hc27 .toolbar{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px}
body.hc27 .toolbar select{width:auto;min-width:200px;max-width:60%;flex:0 0 auto;min-height:40px;font-size:14px;padding:0 34px 0 12px}
/* Wide desktop: four cards beside the filter rail, not three. */
@media(min-width:1200px){
 body.hc27 .shoplay:not(.shoplay--nof){grid-template-columns:240px minmax(0,1fr);gap:24px}
 body.hc27 .shoplay:not(.shoplay--nof) .pgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
}
/* Progressive reveal under the grid. */
body.hc27 .pmore{display:flex;flex-direction:column;align-items:center;gap:10px;margin:26px 0 6px}
body.hc27 .pmore[hidden]{display:none}
body.hc27 .pmore__t{margin:0;font-size:13.5px;color:var(--ink-2)}
body.hc27 .pmore .btn{min-width:240px;justify-content:center}
@media(max-width:560px){
 body.hc27 .toolbar select{min-width:0;max-width:58%}
 body.hc27 .pmore .btn{width:100%}
}

/* ---- PDP purchase block (2026-09-19) --------------------------------------
 * One calculator. The 2027 "How much do I need?" box drives the Measurement
 * Price Calculator's own area field (script in hc27_render_product), so the
 * plugin's duplicate "Required area" row is kept in the form but not shown.
 * Its actual-area and total rows become a compact order summary. */
body.hc27 .atc form.cart{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
body.hc27 .atc #price_calculator{width:100%;margin:0 0 4px;border:0;border-collapse:collapse;background:#f7f8fa;border-radius:6px}
body.hc27 .atc #price_calculator tr.area-input{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.hc27 .atc #price_calculator td{padding:9px 14px;border:0;font-size:14px;font-weight:600;color:var(--ink-2,#4a5563);text-transform:none;letter-spacing:0;background:transparent}
body.hc27 .atc #price_calculator td:last-child{text-align:right;color:#101b26;font-weight:800}
body.hc27 .atc #price_calculator tr.calculated-price td{border-top:1px solid #e6e9ee;font-size:16px;color:#101b26}
body.hc27 .atc #alg-product-input-fields-table{display:none}
body.hc27 .atc .qib-button-wrapper{display:inline-flex!important;align-items:stretch;border:1.5px solid #d5dae1;border-radius:6px;overflow:hidden;background:#fff;margin:0!important;float:none!important}
body.hc27 .atc .qib-button-wrapper .qib-button{width:44px!important;min-height:50px!important;height:auto!important;background:#fff!important;background-image:none!important;border:0!important;color:#101b26!important;font-size:20px!important;font-weight:700!important;border-radius:0!important;padding:0!important;box-shadow:none!important}
body.hc27 .atc .qib-button-wrapper .qib-button:hover{background:#f1f3f6!important}
body.hc27 .atc .qib-button-wrapper .quantity{border:0!important;border-left:1px solid #e6e9ee!important;border-right:1px solid #e6e9ee!important;border-radius:0!important;margin:0!important;display:flex;align-items:center}
body.hc27 .atc .qib-button-wrapper input.qty{width:56px!important;height:50px!important;border:0!important;font-size:17px!important;font-weight:800;text-align:center;background:#fff!important;padding:0!important;-moz-appearance:textfield}
body.hc27 .atc .qib-button-wrapper input.qty::-webkit-inner-spin-button,body.hc27 .atc .qib-button-wrapper input.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
body.hc27 .atc button.single_add_to_cart_button{flex:1 1 220px;min-height:52px!important;font-family:inherit!important;font-size:16px!important;font-weight:900!important;letter-spacing:.04em;border-radius:6px!important;padding:0 22px!important;margin:0!important;float:none!important;width:auto}
@media(max-width:560px){
 body.hc27 .atc form.cart{flex-direction:row}
 body.hc27 .atc button.single_add_to_cart_button{flex:1 1 0;min-width:0}
}
/* Phone: department chips scroll on one line instead of stacking four rows. */
@media(max-width:760px){
 body.hc27 .depts{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 -16px 12px;padding:0 16px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 body.hc27 .depts::-webkit-scrollbar{display:none}
 body.hc27 .depts .dept{flex:0 0 auto;white-space:nowrap}
}
@media(max-width:560px){
 body.hc27 .calcbig{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 body.hc27 .calcbig dd{font-size:16px!important;white-space:nowrap}
}
/* Desktop filter rail: the drawer's "Show results" button belongs to phones only. */
@media(min-width:981px){ body.hc27 .fpanel__done{display:none!important} }
/* Carpet collections: four across at desktop (the 3-up override was meant for LVP). */
@media(min-width:1200px){ body.hc27 .ccgrid--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} }
/* Phones: two collection cards per row instead of one tall card per screen. */
@media(max-width:620px){
 body.hc27 .ccgrid,body.hc27 .ccgrid--4{grid-template-columns:1fr 1fr;gap:10px}
}
/* SnapCaps landing: a compact header, not a 520px marketing hero; red is kept for deals. */
body.hc27 .sncap{min-height:380px}
body.hc27 .sncap__in{padding:36px 0}
body.hc27 .sncap__s{color:#8F5D0E}
@media(max-width:760px){ body.hc27 .sncap{min-height:0} body.hc27 .sncap__in{padding:26px 0} }
/* Cart - WooCommerce empty state in the 2027 skin; nothing to fulfil when empty. */
body.hc27 .hc27-woo .cart-empty.woocommerce-info{margin:0 0 14px;padding:16px 18px;border:1px solid #e6e9ee;border-left:3px solid #dfa51e;border-radius:6px;background:#fbfaf6;color:#101b26;font-size:15px;font-weight:700}
body.hc27 .hc27-woo .cart-empty.woocommerce-info::before{display:none!important}
body.hc27 .hc27-woo .return-to-shop{margin:0}
body.hc27 .hc27-woo .return-to-shop .button{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:6px;background:#dfa51e!important;border:0!important;color:#071d33!important;font-weight:900;font-size:15px;text-decoration:none}
body.hc27 .hc27-woo:has(.wc-empty-cart-message) ~ .ful,
body.hc27 .hc27-woo:has(.wc-empty-cart-message) ~ .sumnote{display:none}
/* Phones: two-up collection and SnapCaps cards need a one-line CTA. */
@media(max-width:620px){
 body.hc27 .cc27__cta{font-size:11.5px!important;letter-spacing:.03em!important;padding:0 6px!important;min-height:40px;white-space:nowrap;justify-content:center;gap:4px}
 body.hc27 .cc27__cta svg{width:13px;height:13px;flex:0 0 auto}
 body.hc27 .sngrid{grid-template-columns:1fr 1fr;gap:10px}
}
/* ---- PDP variants (carpet / stairs) 2026-09-19 --------------------------- */
/* Only an EMPTY product-input table is hidden; stair products carry required fields in it. */
body.hc27 .atc #alg-product-input-fields-table{display:table}
body.hc27 .atc #alg-product-input-fields-table:not(:has(tr)){display:none}
body.hc27 .atc #alg-product-input-fields-table{width:100%;border-collapse:collapse;margin:0 0 6px}
body.hc27 .atc #alg-product-input-fields-table td{padding:7px 10px 7px 0;border:0;vertical-align:middle;font-size:14px}
body.hc27 .atc #alg-product-input-fields-table td:first-child{font-weight:800;color:#101b26;width:42%}
body.hc27 .atc #alg-product-input-fields-table input[type=text]{width:100%;min-height:44px;border:1.5px solid #d5dae1;border-radius:6px;padding:0 12px;font-size:15px;background:#fff}
body.hc27 .atc #alg-product-input-fields-table input[type=radio]{width:18px;height:18px;margin:0 6px 0 0;accent-color:#101b26;vertical-align:middle}
body.hc27 .atc #alg-product-input-fields-table br{display:none}
body.hc27 .atc #alg-product-input-fields-table td label[for$="_Yes"],body.hc27 .atc #alg-product-input-fields-table td label[for$="_No"]{margin-right:16px;font-weight:600}
body.hc27 .atc table.variations th,body.hc27 .atc table.variations td.label{font-size:14px;font-weight:800;color:#101b26;padding:7px 10px 7px 0;white-space:nowrap}
body.hc27 .atc table.variations select{min-height:44px;border-radius:6px}
body.hc27 .stbuy{margin:16px 0 0;padding:14px 16px;border:1px solid #e6e9ee;border-left:3px solid #dfa51e;border-radius:6px;background:#fbfaf6}
body.hc27 .stbuy__h{margin:0 0 8px;font-weight:900;font-size:15px;color:#101b26}
body.hc27 .stbuy ul{margin:0;padding:0 0 0 18px;display:grid;gap:6px;font-size:14px;color:#3d4753}
body.hc27 .stbuy b{color:#101b26}
body.hc27 .stbuy a{color:#8F5D0E;font-weight:800;text-decoration:underline}
body.hc27 .calc__n{margin:10px 0 0;font-size:13px;color:#3d4753}
body.hc27 .calc__n a{color:#8F5D0E;font-weight:700;text-decoration:underline}
body.hc27 .atc #pif_pricing_table{display:none!important}
body.hc27 .atc .pifp{color:#8F5D0E;font-weight:800;margin-left:2px}
body.hc27 .atc .hc-carpet-order{width:100%;margin:0 0 10px;padding:12px 14px;border:1px solid #e6e9ee;border-left:3px solid #dfa51e;border-radius:6px;background:#fbfaf6;color:#101b26;font-size:14px;font-weight:600}
body.hc27 .atc .hc-carpet-order a{color:#8F5D0E;font-weight:800;text-decoration:underline}
body.hc27 .atc .woocommerce-variation-price{font-size:22px!important;font-weight:900;color:#101b26}
@media(max-width:560px){ body.hc27 .calcbig dd{white-space:normal!important;font-size:15px!important;line-height:1.25} }
body.hc27 .atc #alg-product-input-fields-table td:last-child:has(input[type=radio]){display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
body.hc27 .atc #alg-product-input-fields-table td:last-child:has(input[type=radio]) label{margin:0!important}
@media(max-width:560px){
 body.hc27 .atc #alg-product-input-fields-table tr{display:grid;grid-template-columns:1fr;gap:4px;padding:4px 0}
 body.hc27 .atc #alg-product-input-fields-table td{padding:0;width:auto!important}
}

/* ---- Cart & checkout skin (2026-09-19) ------------------------------------
 * The child theme's woocommerce.css (2026 site) floats .cart_totals at 48%,
 * paints gradient qty/coupon buttons and overlays notice icons on the text. */
body.hc27 .hc27-woo .cart-collaterals,body.hc27 .hc27-woo .cart_totals{width:100%!important;float:none!important;max-width:none!important}
body.hc27 .hc27-woo .cart_totals h2{font-size:18px;font-weight:900;margin:0 0 10px;color:#101b26}
body.hc27 .hc27-woo .cart_totals table{width:100%;border:0!important}
body.hc27 .hc27-woo .cart_totals th,body.hc27 .hc27-woo .cart_totals td{padding:10px 0!important;border:0!important;border-top:1px solid #e6e9ee!important;font-size:14px;vertical-align:top;background:transparent!important}
body.hc27 .hc27-woo .cart_totals th{width:38%;font-weight:800;color:#3d4753;text-transform:none;letter-spacing:0}
body.hc27 .hc27-woo .cart_totals td{text-align:right}
body.hc27 .hc27-woo .cart_totals .order-total th,body.hc27 .hc27-woo .cart_totals .order-total td{font-size:18px;color:#101b26;font-weight:900}
body.hc27 .hc27-woo .cart_totals .woocommerce-shipping-destination,body.hc27 .hc27-woo .cart_totals .woocommerce-shipping-calculator{font-size:13px;text-align:right}
body.hc27 .hc27-woo .cart_bottom{display:flex;flex-direction:column-reverse;gap:10px;margin-top:12px}
body.hc27 .hc27-woo .cart_bottom .pull-left,body.hc27 .hc27-woo .cart_bottom .pull-right{float:none!important;width:100%;text-align:center}
body.hc27 .hc27-woo .wc-proceed-to-checkout{padding:0!important}
body.hc27 .hc27-woo .wc-proceed-to-checkout .checkout-button{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:52px;margin:0!important;padding:0 18px!important;border-radius:6px!important;background:#dfa51e!important;background-image:none!important;border:0!important;color:#071d33!important;font-size:16px!important;font-weight:900!important;text-transform:none!important;letter-spacing:0;white-space:nowrap}
body.hc27 .hc27-woo table.cart th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5b6571;padding:10px 12px!important;background:#fafbfc!important;border:0!important;border-bottom:1px solid #e6e9ee!important}
body.hc27 .hc27-woo table.cart td{padding:14px 12px!important;border:0!important;border-bottom:1px solid #eef0f2!important;vertical-align:middle;background:#fff!important}
body.hc27 .hc27-woo table.cart td.product-name a{font-size:16px;font-weight:900;color:#101b26;text-decoration:none}
body.hc27 .hc27-woo table.cart td.product-remove a{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#9aa3ad!important;font-size:20px;text-decoration:none;background:transparent!important}
body.hc27 .hc27-woo table.cart td.product-remove a:hover{background:#f1f3f6!important;color:#b3261e!important}
body.hc27 .hc27-woo table.cart td.product-subtotal{font-weight:900;color:#101b26}
body.hc27 .hc27-woo .qib-button-wrapper{display:inline-flex!important;align-items:stretch;border:1.5px solid #d5dae1;border-radius:6px;overflow:hidden;background:#fff;float:none!important;margin:0!important}
body.hc27 .hc27-woo .qib-button-wrapper .qib-button{width:36px!important;min-height:40px!important;height:auto!important;background:#fff!important;background-image:none!important;border:0!important;color:#101b26!important;font-size:18px!important;border-radius:0!important;padding:0!important;box-shadow:none!important}
body.hc27 .hc27-woo .qib-button-wrapper .quantity{border:0!important;border-left:1px solid #e6e9ee!important;border-right:1px solid #e6e9ee!important;margin:0!important;display:flex;align-items:center}
body.hc27 .hc27-woo .qib-button-wrapper input.qty{width:46px!important;height:40px!important;border:0!important;text-align:center;font-weight:800;font-size:15px;padding:0!important;-moz-appearance:textfield}
body.hc27 .hc27-woo td.actions{padding:14px 12px!important;background:#fff!important}
body.hc27 .hc27-woo td.actions .coupon{display:flex;gap:8px;align-items:center;float:none!important}
body.hc27 .hc27-woo td.actions .coupon input.input-text{min-height:42px;width:200px!important;border:1.5px solid #d5dae1!important;padding:0 12px!important}
body.hc27 .hc27-woo td.actions .button,body.hc27 .hc27-woo .checkout_coupon .button{min-height:42px;padding:0 16px!important;background:#fff!important;background-image:none!important;border:1.5px solid #101b26!important;color:#101b26!important;font-size:14px!important;text-transform:none!important;letter-spacing:0!important;box-shadow:none!important}
body.hc27 .hc27-woo td.actions .button[name=update_cart]{float:right}
body.hc27 .hc27-woo td.actions .button:disabled{opacity:.4}
/* Notices: text clear of WooCommerce's icon. */
body.hc27 .hc27-woo .woocommerce-message,body.hc27 .hc27-woo .woocommerce-info,body.hc27 .hc27-woo .woocommerce-error{position:relative;margin:0 0 14px!important;padding:13px 16px 13px 44px!important;border:1px solid #e6e9ee!important;border-left:3px solid #dfa51e!important;border-radius:6px;background:#fbfaf6!important;color:#101b26!important;font-size:14.5px;list-style:none}
body.hc27 .hc27-woo .woocommerce-error{border-left-color:#b3261e!important;background:#fdf6f5!important}
body.hc27 .hc27-woo .woocommerce-message::before,body.hc27 .hc27-woo .woocommerce-info::before,body.hc27 .hc27-woo .woocommerce-error::before{position:absolute!important;left:16px!important;top:14px!important;margin:0!important;font-size:15px}
body.hc27 .hc27-woo .woocommerce-error li{margin:0}
/* Checkout: billing and shipping stacked in one column beside the order. */
body.hc27 .hc27-woo form.checkout .col2-set{display:block!important;width:100%!important}
body.hc27 .hc27-woo form.checkout .col2-set .col-1,body.hc27 .hc27-woo form.checkout .col2-set .col-2{float:none!important;width:100%!important;max-width:none!important;padding:0!important;flex:none!important}
body.hc27 .hc27-woo form.checkout .col2-set .col-2{margin-top:18px}
body.hc27 .hc27-woo form.checkout h3{font-size:18px;font-weight:900;color:#101b26;margin:0 0 12px}
body.hc27 .hc27-woo form.checkout .woocommerce-billing-fields__field-wrapper,body.hc27 .hc27-woo form.checkout .woocommerce-shipping-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
body.hc27 .hc27-woo form.checkout .form-row{grid-column:1/-1;width:auto!important;float:none!important;margin:0 0 10px!important;padding:0!important}
body.hc27 .hc27-woo form.checkout .form-row-first{grid-column:1}
body.hc27 .hc27-woo form.checkout .form-row-last{grid-column:2}
body.hc27 .hc27-woo form.checkout .form-row label{display:block;font-size:13.5px;font-weight:800;color:#101b26;margin:0 0 5px}
body.hc27 .hc27-woo form.checkout .form-row .input-text,body.hc27 .hc27-woo form.checkout .form-row select,body.hc27 .hc27-woo form.checkout .select2-selection{width:100%!important;min-height:46px;border:1.5px solid #d5dae1!important;border-radius:6px!important;padding:0 12px;font-size:15px;background:#fff}
body.hc27 .hc27-woo form.checkout .form-row textarea.input-text{min-height:92px;padding:10px 12px}
body.hc27 .hc27-woo form.checkout .select2-selection__rendered{line-height:44px!important;padding:0!important}
body.hc27 .hc27-woo form.checkout .select2-selection__arrow{height:44px!important}
body.hc27 .hc27-woo form.checkout .form-row .input-checkbox{width:18px;height:18px;margin:0 8px 0 0;vertical-align:middle;accent-color:#101b26}
body.hc27 .hc27-woo form.checkout .form-row label.checkbox{display:inline-flex;align-items:center;font-weight:700}
body.hc27 .hc27-woo #order_review table.shop_table{width:100%;border:0!important}
body.hc27 .hc27-woo #order_review table.shop_table th,body.hc27 .hc27-woo #order_review table.shop_table td{padding:9px 0!important;border:0!important;border-top:1px solid #e6e9ee!important;font-size:14px;background:transparent!important}
body.hc27 .hc27-woo #order_review table.shop_table td:last-child,body.hc27 .hc27-woo #order_review table.shop_table th:last-child{text-align:right}
body.hc27 .hc27-woo #order_review .order-total th,body.hc27 .hc27-woo #order_review .order-total td{font-size:18px;font-weight:900;color:#101b26}
body.hc27 .hc27-woo #payment{background:transparent!important;border-radius:6px;margin-top:10px}
body.hc27 .hc27-woo #payment .payment_box{background:#fff!important;border:1px solid #e6e9ee;border-radius:6px}
body.hc27 .hc27-woo #payment .payment_box::before{display:none!important}
body.hc27 .hc27-woo #place_order{width:100%;min-height:52px;font-size:16px!important;background:#dfa51e!important;background-image:none!important;border:0!important;color:#071d33!important;opacity:1!important;text-transform:none!important;letter-spacing:0!important}
@media(min-width:900px){ body.hc27 .hc27-woo #order_review{position:sticky;top:16px} }
@media(max-width:560px){
 body.hc27 .hc27-woo form.checkout .woocommerce-billing-fields__field-wrapper,body.hc27 .hc27-woo form.checkout .woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr}
 body.hc27 .hc27-woo form.checkout .form-row-first,body.hc27 .hc27-woo form.checkout .form-row-last{grid-column:1}
 body.hc27 .hc27-woo td.actions .coupon{flex-wrap:wrap}
 body.hc27 .hc27-woo td.actions .coupon input.input-text{width:100%!important}
 body.hc27 .hc27-woo td.actions .button[name=update_cart]{float:none;width:100%;margin-top:8px}
}
/* Items not sold by area: the Measurement Price Calculator's area rows are meaningless. */
body.hc27 .buy--each .atc #price_calculator{display:none!important}
body.hc27 .pgrid--samples{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1080px){ body.hc27 .pgrid--samples{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:620px){ body.hc27 .pgrid--samples{grid-template-columns:1fr 1fr} }
/* Phone cart: WooCommerce's responsive table relies on td::before labels, which
   the 2026 sheet suppresses - values were showing with no idea what they were. */
@media(max-width:768px){
 body.hc27 .hc27-woo table.shop_table_responsive thead{display:none}
 body.hc27 .hc27-woo table.shop_table_responsive tr{display:block}
 body.hc27 .hc27-woo table.shop_table_responsive tr td,body.hc27 .hc27-woo .cart_totals table.shop_table_responsive tr td{display:flex!important;justify-content:space-between;align-items:center;gap:12px;text-align:right!important;padding:10px 12px!important}
 body.hc27 .hc27-woo table.shop_table_responsive tr td::before{content:attr(data-title)!important;display:block!important;float:none!important;font-weight:800;color:#3d4753;font-size:13px;text-align:left;flex:0 0 auto}
 body.hc27 .hc27-woo table.shop_table_responsive tr td.product-remove,body.hc27 .hc27-woo table.shop_table_responsive tr td.product-name,body.hc27 .hc27-woo table.shop_table_responsive tr td.actions{display:block!important;text-align:left!important}
 body.hc27 .hc27-woo table.shop_table_responsive tr td.product-remove::before,body.hc27 .hc27-woo table.shop_table_responsive tr td.product-name::before,body.hc27 .hc27-woo table.shop_table_responsive tr td.actions::before,body.hc27 .hc27-woo table.shop_table_responsive tr td.product-thumbnail::before{display:none!important}
 body.hc27 .hc27-woo table.cart td.product-thumbnail{display:none!important}
 body.hc27 .hc27-woo table.cart td.product-remove{position:absolute;right:6px;padding:6px!important;border:0!important}
 body.hc27 .hc27-woo table.cart tr.cart_item{position:relative}
 body.hc27 .hc27-woo .cart_totals table.shop_table_responsive tr td{padding:10px 0!important}
 body.hc27 .hc27-woo .cart_totals .order-total td{font-size:18px}
 body.hc27 .srout{grid-template-columns:1fr 1fr!important;gap:10px}
 body.hc27 .srout__i{padding:14px!important}
}
/* Footer logo: WooCommerce's ".woocommerce-page img{height:auto}" blew it up to
   110px on shop/product/cart pages only. Hold the approved homepage size everywhere. */
body.hc27 .ft__brand img{height:40px!important;width:auto!important;max-width:none}
/* FAQ: compact page header, not a tall empty band. */
body.hc27 .phero--plain .phero__in{padding:26px 0 18px!important;min-height:0!important}
body.hc27 .phero--plain h1{font-size:clamp(30px,3.2vw,42px)!important}
body.hc27 .faq{max-width:860px}
@media(max-width:560px){
 /* Variation selectors stack label-over-select so the select keeps its width. */
 body.hc27 .atc table.variations,body.hc27 .atc table.variations tbody{display:block;width:100%}
 body.hc27 .atc table.variations tr{display:grid;grid-template-columns:1fr;gap:4px;margin:0 0 8px}
 body.hc27 .atc table.variations th,body.hc27 .atc table.variations td{display:block;padding:0!important;width:100%!important;white-space:normal}
 body.hc27 .srout__c{font-size:11px!important;letter-spacing:.04em;white-space:nowrap}
 body.hc27 .srout__i span:not(.srout__c){font-size:13px}
}

/* Real-browser fixes 19 Sep: Imagify wraps .hs__img in <picture>, so the crop must reach the inner img */
body.hc27 picture.hs__img{overflow:hidden}
body.hc27 picture.hs__img>img{display:block;width:100%;height:100%;object-fit:cover;object-position:inherit}
/* WooCommerce core forces cart images to 32px wide; keep the 2027 square thumbnail */
body.hc27 .hc27-woo table.shop_table td.product-thumbnail{width:88px;min-width:88px}
body.hc27 .hc27-woo table.shop_table td.product-thumbnail img{width:72px!important;height:72px!important;max-width:none!important;object-fit:cover!important;border-radius:8px}

/* ==========================================================================
 * HOMEPAGE v5 — owner direction 20 Sep: restore scale and visual impact.
 * Full-bleed image-led hero → offer strip → image-led category tiles →
 * larger deal cards (LVP + carpet, whole cards only) → cabinet collection
 * tiles → stair cards → substantial closing band → footer.
 * Layout problems are solved with proportion, not by shrinking.
 * ======================================================================== */
body.hc27 .hp3{--r:8px;--sh:0 1px 2px rgba(14,29,44,.06),0 6px 18px rgba(14,29,44,.08);--bd:1px solid #E2E7EC;--gt:#8F5D0E;--nv:#0E1D2C;--gd:#C8871F;--gl:#F0B429;--rd:#B3202C}
body.hc27 .hp3 a{text-decoration:none;color:inherit}
body.hc27 .hdr img[alt="Home Connect"]{height:60px!important;width:auto!important}

/* ---- hero: the room photograph fills the whole hero ---- */
body.hc27 .hx{position:relative;background:var(--nv);overflow:hidden}
body.hc27 .hx__s{position:relative;display:block;height:clamp(440px,33vw,500px);color:#fff}
body.hc27 .hx__s[hidden]{display:none}
body.hc27 .hx__ph{position:absolute;inset:0;overflow:hidden;background:#1E3348}
body.hc27 .hx__ph img,body.hc27 .hx__ph picture{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important}
body.hc27 .hx__ph img{object-fit:cover;object-position:var(--hf,50% 60%);transform:scale(1.001)}
body.hc27 .hx__ph::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,19,30,.90) 0%,rgba(9,19,30,.74) 26%,rgba(9,19,30,.30) 50%,rgba(9,19,30,0) 68%),linear-gradient(0deg,rgba(9,19,30,.35) 0%,rgba(9,19,30,0) 30%)}
body.hc27 .hx__p{position:relative;z-index:2;height:100%;display:flex;align-items:center;max-width:var(--wrap,1440px);margin:0 auto;padding:0 72px 10px}
body.hc27 .hx__tx{display:flex;flex-direction:column;align-items:flex-start;max-width:600px}
body.hc27 .hx__k{display:inline-block;background:var(--rd);color:#fff;font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:3px;margin-bottom:16px}
body.hc27 .hx__h{margin:0;font-size:clamp(40px,3.6vw,54px);line-height:1;font-weight:900;letter-spacing:-.025em;text-transform:uppercase;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.25)}
body.hc27 .hx__h em{display:block;font-style:normal;margin-top:8px}
body.hc27 .hx__h em i{display:block;font-style:normal;font-size:.46em;letter-spacing:.02em;color:#fff;margin-bottom:2px}
body.hc27 .hx__h em b{display:block;color:var(--gl);font-weight:900;font-size:1.5em;line-height:.95;letter-spacing:-.03em}
body.hc27 .hx__h em b span{font-size:.36em;margin-left:6px;letter-spacing:0;vertical-align:.12em}
body.hc27 .hx__s--cab .hx__h em b{font-size:1em}
body.hc27 .hx__c{margin-top:14px;font-size:18px;line-height:1.4;color:rgba(255,255,255,.92);max-width:40ch}
body.hc27 .hx__b{margin-top:24px;display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 30px;border-radius:4px;background:var(--gd);color:var(--nv);font-size:16px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 6px 18px rgba(0,0,0,.25)}
body.hc27 .hx__b svg{width:18px;height:18px}
body.hc27 .hx__s:hover .hx__b{background:#E0A234}
body.hc27 .hx__n{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:0;background:rgba(9,19,30,.35);color:#fff;cursor:pointer;opacity:.85}
body.hc27 .hx__n:hover,body.hc27 .hx__n:focus-visible{opacity:1;background:rgba(9,19,30,.6)}
body.hc27 .hx__n svg{width:22px;height:22px}
body.hc27 .hx__n--p{left:12px} body.hc27 .hx__n--n{right:12px}

/* ---- offer strip ---- */
body.hc27 .hb{background:#fff;border-bottom:var(--bd);box-shadow:0 1px 0 rgba(14,29,44,.03)}
body.hc27 .hb ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
body.hc27 .hb li+li{border-left:var(--bd)}
body.hc27 .hb a{display:flex;align-items:center;gap:14px;padding:12px 20px;min-height:72px}
body.hc27 .hb a:hover{background:#F5F7F9}
body.hc27 .hb__ic{flex:0 0 42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--nv);color:var(--gl)}
body.hc27 .hb__ic svg{width:20px;height:20px}
body.hc27 .hb b{display:block;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#5A6673}
body.hc27 .hb a>span:last-child>span{display:block;font-size:18px;font-weight:900;color:var(--nv);margin-top:1px}
body.hc27 .hb em{font-style:normal;color:var(--rd)}

/* ---- section rhythm + headers ---- */
body.hc27 .hs3{padding:52px 0;background:#fff}
body.hc27 .hs3--alt{background:#F4F6F8}
body.hc27 .hh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
body.hc27 .hh__e{display:block;font-size:12.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--gt);margin-bottom:6px}
body.hc27 .hh h2{margin:0;font-size:clamp(28px,2.5vw,36px);line-height:1.05;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;color:var(--nv)}
body.hc27 .hh p{margin:6px 0 0;font-size:16px;color:#5A6673}
body.hc27 .hh__a{display:flex;align-items:center;gap:14px;flex:0 0 auto}
body.hc27 .hp3 .hh__l{display:inline-flex;align-items:center;gap:6px;font-size:15.5px;font-weight:800;color:var(--gt);white-space:nowrap}
body.hc27 .hp3 .hh__l:hover{text-decoration:underline}

/* ---- base card (stair products) ---- */
body.hc27 .hc3{position:relative;display:flex;flex-direction:column;background:#fff;border:var(--bd);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;transition:transform .18s,box-shadow .18s}
body.hc27 .hc3:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(14,29,44,.08),0 14px 30px rgba(14,29,44,.14)}
body.hc27 .hc3__im{position:relative;display:block;aspect-ratio:var(--ar,4/3);overflow:hidden;background:#EDF1F4}
body.hc27 .hc3__im img,body.hc27 .hc3__im picture{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important}
body.hc27 .hc3__im img{object-fit:cover;object-position:var(--if,50% 55%);transition:transform .5s}
body.hc27 .hc3:hover .hc3__im img{transform:scale(1.04)}
body.hc27 .hc3__im--render{background:#EDEDED}
body.hc27 .hc3__pill{position:absolute;left:12px;top:12px;z-index:2;background:var(--nv);color:#fff;font-size:11.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:3px}
body.hc27 .hc3__b{display:flex;flex-direction:column;flex:1 1 auto;padding:16px 18px 18px}
body.hc27 .hc3__t{font-size:20px;font-weight:900;color:var(--nv);letter-spacing:-.01em;line-height:1.15}
body.hc27 .hc3__s{margin-top:4px;font-size:15px;color:#5A6673;margin-bottom:14px}
body.hc27 .hc3 .hc3__cta{display:flex;margin-top:auto;font-size:13.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--gt);align-items:center;justify-content:center;gap:8px;min-height:44px;border:2px solid var(--gd);border-radius:4px;white-space:nowrap}
body.hc27 .hc3 .hc3__cta svg{width:15px;height:15px}
body.hc27 .hc3:hover .hc3__cta{background:var(--gd);color:var(--nv)}

/* ---- image tiles: name + CTA over the photograph (categories, cabinets) ---- */
body.hc27 .hc3--cat,body.hc27 .hc3--cab{border:0;background:var(--nv)}
body.hc27 .hc3--cat .hc3__im,body.hc27 .hc3--cab .hc3__im{position:absolute;inset:0;aspect-ratio:auto}
body.hc27 .hc3--cat .hc3__im::after,body.hc27 .hc3--cab .hc3__im::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(9,19,30,.88) 0%,rgba(9,19,30,.55) 28%,rgba(9,19,30,0) 58%)}
body.hc27 .hc3--cat .hc3__b,body.hc27 .hc3--cab .hc3__b{position:relative;z-index:2;margin-top:auto;flex:0 0 auto;background:none;padding:18px 20px 20px;color:#fff}
body.hc27 .hc3--cat .hc3__t,body.hc27 .hc3--cab .hc3__t{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35)}
body.hc27 .hc3--cat .hc3__s,body.hc27 .hc3--cab .hc3__s{color:rgba(255,255,255,.88);margin-bottom:12px}
body.hc27 .hc3--cat .hc3__cta,body.hc27 .hc3--cab .hc3__cta{align-self:flex-start;margin-top:0;border:0;min-height:0;padding:0;color:var(--gl);font-size:13.5px;gap:7px}
body.hc27 .hc3--cat:hover .hc3__cta,body.hc27 .hc3--cab:hover .hc3__cta{background:none;color:#fff}

/* categories: six tall photo tiles */
body.hc27 .hcat{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
body.hc27 .hc3--cat{aspect-ratio:4/5}
body.hc27 .hc3--cat .hc3__t{font-size:22px}
body.hc27 .hc3--cat .hc3__cta{margin-top:6px}

/* deals: fewer, larger cards; whole cards only */
body.hc27 .hdeal .arset{display:flex;gap:8px}
body.hc27 .hdeal .arb{width:44px;height:44px;border-radius:50%;border:1.5px solid #D5DAE1;background:#fff;color:var(--nv);display:grid;place-items:center}
body.hc27 .hdeal .arb:hover:not(:disabled){border-color:var(--nv)}
body.hc27 .hdeal .arb:disabled{opacity:.35}
body.hc27 .dchips{display:flex;flex-wrap:wrap;gap:10px;margin:-6px 0 18px}
body.hc27 .dchip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:999px;background:#fff;border:var(--bd);font-size:15px;font-weight:700;color:var(--nv)}
body.hc27 .dchip b{color:#fff;background:var(--nv);border-radius:3px;padding:3px 8px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
body.hc27 .dchip--lvp b{background:var(--rd)}
body.hc27 .dchip s{color:#5A6673;font-weight:600}
body.hc27 .hdeal .railwrap{margin:0;overflow:hidden}
body.hc27 .hdeal .rail{--n:5;--g:20px;grid-auto-columns:calc((100% - (var(--n) - 1)*var(--g))/var(--n));gap:var(--g);padding:0 0 8px;scroll-snap-type:x mandatory;scroll-padding:0}
body.hc27 .hdeal .rail>.pc{scroll-snap-align:start;border:var(--bd);border-radius:var(--r);box-shadow:var(--sh);background:#fff;min-width:0;overflow:hidden}
body.hc27 .hdeal .pc__im{aspect-ratio:1/1}
body.hc27 .hdeal .pc__im img{transition:transform .5s}
body.hc27 .hdeal .pc:hover .pc__im img{transform:scale(1.04)}
body.hc27 .hdeal .pc__b{padding:14px 16px 16px}
body.hc27 .hdeal .pc__t{font-size:17px;font-weight:900}
body.hc27 .hdeal .pc__spec{font-size:12px}
body.hc27 .hdeal .pc__now{font-size:30px;letter-spacing:-.02em}
body.hc27 .hdeal .pc__u{font-size:14px}
body.hc27 .hdeal .pc__was{font-size:15px}
body.hc27 .hdeal .pc__box{font-size:13px}
body.hc27 .hdeal .pc__cta{min-height:44px;font-size:13px;border-radius:4px}
body.hc27 .hdeal .pc__badge{left:12px;top:12px;font-size:12px;letter-spacing:.08em;border-radius:3px;padding:5px 9px}
body.hc27 .hdeal .pc__badge--lvp{background:var(--rd)}
body.hc27 .hdeal .pc__badge--carpet{background:var(--nv)}
body.hc27 .hdeal .pc[data-g="Carpet"] .pc__now{color:var(--nv)!important}

/* cabinets: four collection tiles */
body.hc27 .hcab{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
body.hc27 .hc3--cab{aspect-ratio:1/1.08}
body.hc27 .hc3--cab .hc3__t{font-size:26px}

/* stairs: four large cards — SnapCaps, Full Treads, Stair Caps, compatibility check */
body.hc27 .hstair{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
body.hc27 .hc3--stair{--ar:4/3}
body.hc27 .hc3--stair .hc3__t{font-size:21px}
body.hc27 .hc3--chk{background:var(--nv);border-color:var(--nv);color:#fff;justify-content:center}
body.hc27 .hc3--chk .hc3__b{padding:26px 24px;justify-content:center}
body.hc27 .hc3--chk .hc3__ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(240,180,41,.14);color:var(--gl);margin-bottom:14px}
body.hc27 .hc3--chk .hc3__ic svg{width:24px;height:24px}
body.hc27 .hc3--chk .hc3__t{color:#fff;font-size:22px}
body.hc27 .hc3--chk .hc3__s{color:rgba(255,255,255,.8);margin-bottom:18px}
body.hc27 .hc3--chk .hc3__cta{margin-top:0;border-color:var(--gd);color:var(--gl)}
body.hc27 .hc3--chk:hover .hc3__cta{background:var(--gd);color:var(--nv)}

/* design help bar (cabinets) */
body.hc27 .hbar{margin-top:20px;display:flex;align-items:center;gap:16px;padding:16px 22px;background:#fff;border:var(--bd);border-left:5px solid var(--gd);border-radius:var(--r);box-shadow:var(--sh)}
body.hc27 .hbar__ic{flex:0 0 44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#FBF5EA;color:var(--gt)}
body.hc27 .hbar__ic svg{width:22px;height:22px}
body.hc27 .hbar__t{flex:1 1 auto;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
body.hc27 .hbar__t b{font-size:18px;font-weight:900;color:var(--nv)}
body.hc27 .hbar__t span{font-size:15.5px;color:#5A6673}
body.hc27 .hbar__a{display:flex;align-items:center;gap:18px;flex:0 0 auto}
body.hc27 .hp3 .hbar__x{font-size:15px;font-weight:800;color:var(--gt)}
body.hc27 .hp3 .hbar__x:hover{text-decoration:underline}
body.hc27 .hbar .btn--g{min-height:48px;padding:0 22px;border-radius:4px;background:var(--gd);color:var(--nv);font-weight:900;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:15px;text-transform:uppercase;letter-spacing:.04em}

/* closing band: deals by email + help */
body.hc27 .hclose{background:var(--nv);color:#fff;border-top:5px solid var(--gd);position:relative;overflow:hidden}
body.hc27 .hclose::before{content:"";position:absolute;right:-120px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(240,180,41,.14),rgba(240,180,41,0) 70%);pointer-events:none}
body.hc27 .hclose .wrap{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;padding-top:56px;padding-bottom:56px}
body.hc27 .hclose .hh__e{color:var(--gl)}
body.hc27 .hclose h2{margin:0;font-size:clamp(26px,2.4vw,34px);line-height:1.1;font-weight:900;color:#fff;letter-spacing:-.015em;text-transform:uppercase}
body.hc27 .hclose p{margin:8px 0 0;font-size:16.5px;color:rgba(255,255,255,.8)}
body.hc27 .hclose form{display:flex;gap:10px;margin-top:20px;max-width:560px}
body.hc27 .hclose input{flex:1 1 auto;min-width:0;height:56px;border:0;border-radius:4px;padding:0 18px;font-size:16px;color:var(--nv)}
body.hc27 .hclose button{height:56px;padding:0 28px;border:0;border-radius:4px;background:var(--gd);color:var(--nv);font-weight:900;font-size:15.5px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
body.hc27 .hclose button:hover{background:#E0A234}
body.hc27 .hclose small{display:block;margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.6)}
body.hc27 .hclose__h{border-left:1px solid rgba(255,255,255,.14);padding-left:56px}
body.hc27 .hclose__h h2{font-size:clamp(22px,1.9vw,28px)}
body.hc27 .hclose__a{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
body.hc27 .hclose__a a{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 18px;border:1px solid rgba(255,255,255,.24);border-radius:4px;color:#fff;font-weight:800;font-size:15.5px}
body.hc27 .hclose__a a:hover{border-color:var(--gl)}
body.hc27 .hclose__a svg{color:var(--gl);width:19px;height:19px}
body.hc27 .hclose__a a.hclose__go{background:var(--gd);border-color:var(--gd);color:var(--nv)}
body.hc27 .hclose__a a.hclose__go svg{color:var(--nv)}

/* footer */
body.hc27 .ft{background:#0A1622!important}
body.hc27 .ft__m{padding-top:40px!important;padding-bottom:28px!important;gap:32px!important}
body.hc27.home .ft__m{grid-template-columns:1.3fr .8fr .8fr .8fr!important}
body.hc27.home .ft__m .sc{display:none}
body.hc27 .ft h3{color:var(--gl,#F0B429)!important;margin-bottom:10px!important}
body.hc27 .ft ul li{margin:0}
body.hc27 .ft ul li a{font-size:15px;padding:4px 0}
body.hc27 .ft__b{background:#07111B}

/* ---- laptop / tablet ---- */
@media(max-width:1280px){
 body.hc27 .hx__p{padding:0 56px 26px}
 body.hc27 .hcat{grid-template-columns:repeat(3,minmax(0,1fr))}
 body.hc27 .hc3--cat{aspect-ratio:16/11}
 body.hc27 .hdeal .rail{--n:4}
}
@media(max-width:980px){
 body.hc27 .hx__s{height:420px}
 body.hc27 .hx__ph::after{background:linear-gradient(90deg,rgba(9,19,30,.9) 0%,rgba(9,19,30,.6) 45%,rgba(9,19,30,.1) 80%)}
 body.hc27 .hb ul{grid-template-columns:1fr 1fr}
 body.hc27 .hb li:nth-child(3){border-left:0}
 body.hc27 .hb li:nth-child(n+3){border-top:var(--bd)}
 body.hc27 .hcab,body.hc27 .hstair{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.hc27 .hdeal .rail{--n:3}
 body.hc27 .hclose .wrap{grid-template-columns:1fr;gap:28px}
 body.hc27 .hclose__h{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:28px}
 body.hc27 .ft__m{grid-template-columns:1fr 1fr!important}
}
/* ---- phone: composed for the phone, not a squeezed desktop ---- */
@media(max-width:620px){
 body.hc27 .hdr img[alt="Home Connect"]{height:48px!important}
 body.hc27 .hx__s{height:460px}
 body.hc27 .hx__ph img{object-position:var(--hfm,var(--hf,50% 60%))}
 body.hc27 .hx__ph::after{background:linear-gradient(0deg,rgba(9,19,30,.95) 0%,rgba(9,19,30,.82) 34%,rgba(9,19,30,.25) 62%,rgba(9,19,30,0) 80%)}
 body.hc27 .hx__p{align-items:flex-end;padding:0 20px 26px}
 body.hc27 .hx__tx{width:100%}
 body.hc27 .hx__k{font-size:11.5px;margin-bottom:10px;padding:5px 9px}
 body.hc27 .hx__h{font-size:30px}
 body.hc27 .hx__h em{margin-top:6px}
 body.hc27 .hx__h em b{font-size:1.75em}
 body.hc27 .hx__s--cab .hx__h em b{font-size:1em}
 body.hc27 .hx__c{font-size:15px;margin-top:8px}
 body.hc27 .hx__b{margin-top:16px;width:100%;justify-content:center;min-height:52px;font-size:15px}
 body.hc27 .hx__n{top:34%;width:40px;height:40px}
 body.hc27 .hx__n--p{left:8px} body.hc27 .hx__n--n{right:8px}
   body.hc27 .hb a{padding:10px 12px;min-height:62px;gap:10px}
 body.hc27 .hb__ic{display:none}
 body.hc27 .hb b{font-size:10.5px;letter-spacing:.06em}
 body.hc27 .hb a>span:last-child>span{font-size:15px;white-space:nowrap}
 body.hc27 .hs3{padding:36px 0}
 body.hc27 .hh{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:16px}
 body.hc27 .hh h2{font-size:25px}
 body.hc27 .hh p{font-size:15px}
 body.hc27 .hcat{grid-template-columns:1fr 1fr;gap:10px}
 body.hc27 .hc3--cat{aspect-ratio:1/1.05}
 body.hc27 .hc3--cat .hc3__b{padding:12px 14px 14px}
 body.hc27 .hc3--cat .hc3__t{font-size:19px}
 body.hc27 .hc3--cat .hc3__cta{font-size:12px;margin-top:3px}
 body.hc27 .hdeal .rail{--n:2;--g:12px}
 body.hc27 .hdeal .arb{display:none!important}
 body.hc27 .hdeal .pc__b{padding:12px 12px 14px}
 body.hc27 .hdeal .pc__t{font-size:15.5px}
 body.hc27 .hdeal .pc__now{font-size:25px}
 body.hc27 .hdeal .pc__u{font-size:13px}
 body.hc27 .hdeal .pc__was{font-size:13px}
 body.hc27 .hdeal .pc__box{font-size:12px}
 body.hc27 .hdeal .pc__spec{font-size:11px}
 body.hc27 .hdeal .pc__cta{font-size:12px;min-height:42px;padding:0 6px}
 body.hc27 .dchips{gap:8px}
 body.hc27 .dchip{font-size:13px;padding:0 10px;min-height:34px}
 body.hc27 .hcab{grid-template-columns:1fr 1fr;gap:10px}
 body.hc27 .hc3--cab{aspect-ratio:1/1.2}
 body.hc27 .hc3--cab .hc3__b{padding:12px 14px 14px}
 body.hc27 .hc3--cab .hc3__t{font-size:18px}
 body.hc27 .hc3--cab .hc3__s{font-size:13px;margin-bottom:6px}
 body.hc27 .hc3--cab .hc3__cta{font-size:12px}
 body.hc27 .hstair{grid-template-columns:1fr 1fr;gap:10px}
      body.hc27 .hc3--stair .hc3__b{padding:12px 12px 14px}
 body.hc27 .hc3--stair .hc3__t{font-size:16px}
 body.hc27 .hc3--stair .hc3__s{font-size:13px;margin-bottom:10px}
 body.hc27 .hc3--stair .hc3__cta{font-size:11.5px;letter-spacing:.03em;min-height:40px;padding:0 4px}
 body.hc27 .hc3--chk .hc3__b{padding:16px 14px}
 body.hc27 .hc3--chk .hc3__ic{width:40px;height:40px;margin-bottom:10px}
 body.hc27 .hc3--chk .hc3__t{font-size:17px}
 body.hc27 .hc3--chk .hc3__s{font-size:13px;margin-bottom:12px}
 body.hc27 .hc3--chk .hc3__cta{font-size:11px;letter-spacing:0;min-height:40px;padding:0 4px;white-space:normal;text-align:center}
 body.hc27 .hbar{flex-wrap:wrap;padding:16px}
 body.hc27 .hbar__t{display:block}
 body.hc27 .hbar__t b{font-size:17px}
 body.hc27 .hbar__t span{display:block;margin-top:4px;font-size:14.5px}
 body.hc27 .hbar__a{width:100%;gap:14px;flex-wrap:wrap}
 body.hc27 .hbar .btn--g{flex:1 1 100%;justify-content:center}
 body.hc27 .hbar__x{margin:0 auto}
 body.hc27 .hclose .wrap{padding-top:40px;padding-bottom:40px}
 body.hc27 .hclose h2{font-size:25px}
 body.hc27 .hclose form{flex-direction:column}
 body.hc27 .hclose__a a{flex:1 1 100%;justify-content:center}
 body.hc27 .ft__m{grid-template-columns:1fr 1fr!important;gap:22px 16px!important}
 body.hc27 .ft__m>:first-child{grid-column:1/-1}
}
/* phone: the cabinet slide keeps headline + button only */
@media(max-width:620px){ body.hc27 .hx__s--cab .hx__c{display:none} }

/* ==========================================================================
 * Collection cards (LVP / category pages) — consistency with the v5 system.
 * Red is kept for sale prices only; a regular price reads navy. The colour
 * row scrolls sideways, so its edge fades instead of showing a half swatch.
 * ======================================================================== */
body.hc27 .cc27__pr:has(.cc27__was[hidden]) .cc27__now{color:#0E1D2C}
body.hc27 .cc27__sw{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
/* regular-price header badge (carpet): navy, no sale styling */
body.hc27 .cdeal--plain{background:#F4F6F8!important;border-color:#D5DAE1!important}
body.hc27 .cdeal--plain b{background:#0E1D2C!important}

/* ==========================================================================
 * Cabinet collection tiles (/cabinets/) — the same image-led treatment the
 * homepage uses: the kitchen photograph fills the tile and the collection
 * name sits over it, instead of a small photo above a white caption strip.
 * ======================================================================== */
body.hc27 .cabrow--4 .cc{position:relative;aspect-ratio:1/1.08;border:0;background:#0E1D2C;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(14,29,44,.06),0 6px 18px rgba(14,29,44,.08)}
body.hc27 .cabrow--4 .cc__im{position:absolute;inset:0;aspect-ratio:auto;height:100%}
body.hc27 .cabrow--4 .cc__im img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
body.hc27 .cabrow--4 .cc:hover .cc__im img{transform:scale(1.04)}
body.hc27 .cabrow--4 .cc__im::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(9,19,30,.88) 0%,rgba(9,19,30,.55) 28%,rgba(9,19,30,0) 58%)}
body.hc27 .cabrow--4 .cc__b{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;justify-content:flex-end;background:none;padding:18px 20px 20px;color:#fff}
body.hc27 .cabrow--4 .cc__t{color:#fff;font-size:26px;font-weight:900;letter-spacing:-.01em;text-shadow:0 1px 10px rgba(0,0,0,.35)}
body.hc27 .cabrow--4 .cc__s{color:rgba(255,255,255,.88);font-size:15px;margin-top:4px}
body.hc27 .cabrow--4 .cc__c{color:#F0B429;font-size:13.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-top:12px;display:inline-flex;align-items:center;gap:7px}
body.hc27 .cabrow--4 .cc:hover .cc__c{color:#fff}
@media(max-width:980px){body.hc27 .cabrow--4 .cc{aspect-ratio:1/1}}
@media(max-width:620px){
 body.hc27 .cabrow--4 .cc{aspect-ratio:1/1.2}
 body.hc27 .cabrow--4 .cc__b{padding:12px 14px 14px}
 body.hc27 .cabrow--4 .cc__t{font-size:20px}
 body.hc27 .cabrow--4 .cc__s{font-size:13px}
 body.hc27 .cabrow--4 .cc__c{font-size:12px;margin-top:8px}
}
/* stair product cards: a regular price is navy, as everywhere else */
body.hc27 .sncard__p{color:#0E1D2C}
/* PDP: a price with no was-price is a regular price, so it reads navy */
body.hc27 .buy__price:not(:has(.buy__was)) .buy__now{color:#0E1D2C}
/* calculator: the allowance is shown as a short sum above the result */
body.hc27 .calcsum{list-style:none;margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #E2E7EC;display:grid;gap:4px}
body.hc27 .calcsum li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:#5A6673}
body.hc27 .calcsum b{color:#0E1D2C;font-weight:800;white-space:nowrap}
/* product cards: a price marked plain (no sale) reads navy everywhere it appears */
body.hc27 .pc__now--plain{color:#0E1D2C!important}

/* ---------------------------------------------------------------------------
 * Third-party login modal (xoo-el-*) renders its fixed overlays wider than the
 * viewport, which lets a phone scroll the page sideways even while the modal
 * is closed. Constraining the overlays removes the sideways scroll and does
 * not change the modal when it opens - it still fills the screen.
 * ------------------------------------------------------------------------- */
.xoo-el-opac,
.xoo-el-modal,
.xoo-el-notice-opac,
.xoo-el-notice-modal{max-width:100%!important}
/*
 * The overlays are position:fixed, so no ancestor's overflow can contain them
 * and max-width:100% resolves against an already-widened containing block.
 * Pinning them to the viewport itself is what actually holds. Phone widths
 * only: on desktop 100vw includes the scrollbar and would overflow instead.
 */
@media (max-width:900px){
.xoo-el-opac,
.xoo-el-modal,
.xoo-el-notice-opac,
.xoo-el-notice-modal{width:100vw!important;max-width:100vw!important;left:0!important;right:auto!important}
}

/* =============================================================================
 * ORDER RECEIVED — owner rejected the live presentation on 2026-09-20 after the
 * first real order. It was still largely stock WooCommerce inside the 2027
 * chrome. Three concrete faults, all measured on the live page:
 *
 *   1. auto-fit/minmax(150px) produced SEVEN 159px tracks for five cards, so
 *      every value sat in a ~130px box. The email needed 322px and spilled
 *      straight across the Total card.
 *   2. WooCommerce's own section titles inherited the theme h2 at 40px, so
 *      "Order details" and "Billing address" dwarfed everything around them.
 *   3. The reCAPTCHA badge sat over the bottom-right of the content.
 *
 * Presentation only. Nothing here touches order data, totals, tax, shipping or
 * payment behaviour, and nothing here applies outside the confirmation page.
 * ========================================================================== */

/* --- the confirmation banner reads as success, not as a neutral notice ----- */
body.woocommerce-order-received .hc27-woo .woocommerce-thankyou-order-received{
 background:#F1F8F3;border-color:#CDE6D6;border-left-color:#1E6B3A;color:#14532C;
 font-size:16.5px;padding:15px 18px;margin:0 0 22px}

/* --- summary cards: real widths, and values that wrap instead of escaping --- */
body.woocommerce-order-received .hc27-woo ul.woocommerce-order-overview{
 grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px;margin:0 0 28px}
/*
 * auto-fit is what caused the original defect: it sizes tracks to the
 * CONTAINER, not to the five cards, so a wide viewport produced seven tracks
 * and squeezed every value. Above the stacking width the count is fixed
 * explicitly instead, and the email wraps inside its own card.
 */
@media(min-width:900px){
 body.woocommerce-order-received .hc27-woo ul.woocommerce-order-overview{
  grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(min-width:621px) and (max-width:899px){
 body.woocommerce-order-received .hc27-woo ul.woocommerce-order-overview{
  grid-template-columns:repeat(2,minmax(0,1fr))}
}
/*
 * THE ACTUAL CAUSE of the squeezed cards. WooCommerce's stylesheet puts a
 * clearfix ::before/::after on its lists. In a grid container those generated
 * boxes become GRID ITEMS: they took the first and last tracks, pushing the
 * five real cards along by one and wrapping the last onto its own row - and
 * with auto-fit they were also counted when sizing, which is how five cards
 * ended up in seven 159px tracks. Removing them from the grid is the fix.
 */
body.woocommerce-order-received .hc27-woo ul.woocommerce-order-overview::before,
body.woocommerce-order-received .hc27-woo ul.woocommerce-order-overview::after{
 content:none!important;display:none!important}

body.woocommerce-order-received .hc27-woo ul.woocommerce-order-overview li{
 min-width:0;width:auto;justify-self:stretch;padding:14px 16px;
 display:flex;flex-direction:column;justify-content:flex-start;
 /* a generic list rule strips the border from the last item - these are
    cards, so every one of them keeps its outline */
 border:1px solid var(--line)!important;border-radius:10px!important;
 background:#fff!important}
body.woocommerce-order-received .hc27-woo ul.woocommerce-order-overview li strong{
 margin-top:6px;font-size:17px;line-height:1.35;
 /* the email is one unbroken token - without this it leaves the card */
 overflow-wrap:anywhere;word-break:break-word;hyphens:none}
/* order number and total are what a customer looks for first */
body.woocommerce-order-received .hc27-woo ul.woocommerce-order-overview
 li.woocommerce-order-overview__order strong,
body.woocommerce-order-received .hc27-woo ul.woocommerce-order-overview
 li.woocommerce-order-overview__total strong{font-size:22px;color:var(--navy)}
body.woocommerce-order-received .hc27-woo ul.woocommerce-order-overview
 li.woocommerce-order-overview__total strong .amount{color:var(--navy)}

/* --- WooCommerce's own section titles, brought back to the 2027 scale ------ */
body.woocommerce-order-received .hc27-woo .woocommerce-order-details__title,
body.woocommerce-order-received .hc27-woo .woocommerce-column__title,
body.woocommerce-order-received .hc27-woo .woocommerce-customer-details h2{
 font-size:19px!important;line-height:1.3;font-weight:800;letter-spacing:-.01em;
 color:var(--navy);margin:0 0 12px;padding-bottom:10px;
 border-bottom:1px solid var(--line)}
body.woocommerce-order-received .hc27-woo .woocommerce-order-details,
body.woocommerce-order-received .hc27-woo .woocommerce-customer-details{margin:0 0 26px}

/* --- order table: compact, with a totals hierarchy ------------------------- */
body.woocommerce-order-received .hc27-woo table.woocommerce-table--order-details{
 width:100%;border-collapse:collapse;font-size:14.5px}
body.woocommerce-order-received .hc27-woo table.woocommerce-table--order-details th,
body.woocommerce-order-received .hc27-woo table.woocommerce-table--order-details td{
 padding:11px 0;border-bottom:1px solid var(--line-2);vertical-align:top}
body.woocommerce-order-received .hc27-woo table.woocommerce-table--order-details tfoot th{
 font-weight:700;color:var(--ink-2)}
/*
 * The grand total is the last row that carries a PRICE - not simply the last
 * row. WooCommerce appends the customer note after the totals, so
 * tfoot tr:last-child put the emphasis on the note instead of on the amount.
 * Both shapes are matched by position rather than by a nested :has(), which
 * browsers do not reliably support: the total is either the last row or the
 * one before the note, and the :has(.amount) guard stops a note ever matching.
 */
body.woocommerce-order-received .hc27-woo table.woocommerce-table--order-details tfoot tr:nth-last-of-type(1):has(.amount) th,
body.woocommerce-order-received .hc27-woo table.woocommerce-table--order-details tfoot tr:nth-last-of-type(1):has(.amount) td,
body.woocommerce-order-received .hc27-woo table.woocommerce-table--order-details tfoot tr:nth-last-of-type(2):has(.amount) th,
body.woocommerce-order-received .hc27-woo table.woocommerce-table--order-details tfoot tr:nth-last-of-type(2):has(.amount) td{
 font-size:18px;font-weight:800;color:var(--navy);padding-top:14px}
/* the customer's own note is context, not a total */
body.woocommerce-order-received .hc27-woo table.woocommerce-table--order-details tfoot tr:not(:has(.amount)) th,
body.woocommerce-order-received .hc27-woo table.woocommerce-table--order-details tfoot tr:not(:has(.amount)) td{
 font-size:13.5px;color:var(--ink-2);font-weight:600;border-bottom:0}
body.woocommerce-order-received .hc27-woo table.woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-order-received .hc27-woo table.woocommerce-table--order-details tfoot tr:last-child td{border-bottom:0}
body.woocommerce-order-received .hc27-woo .woocommerce-table--order-details .wc-item-meta,
body.woocommerce-order-received .hc27-woo .woocommerce-table--order-details .wc-item-meta li{
 margin:4px 0 0;padding:0;list-style:none;font-size:13px;color:var(--ink-2)}
body.woocommerce-order-received .hc27-woo .woocommerce-table--order-details .wc-item-meta p{margin:0}

/* --- billing / customer details -------------------------------------------- */
body.woocommerce-order-received .hc27-woo .woocommerce-customer-details address{
 padding:15px 17px;font-size:14.5px;line-height:1.65;overflow-wrap:anywhere}
body.woocommerce-order-received .hc27-woo .woocommerce-customer-details .woocommerce-column{
 max-width:520px}

/* --- trim the dead space the stock template leaves behind ------------------- */
body.woocommerce-order-received .hc27-woo .woocommerce-order{margin-bottom:0}
body.woocommerce-order-received .hc27-woo p:empty{display:none}

/*
 * Google's reCAPTCHA badge stays exactly where Google puts it - bottom-right,
 * never hidden. An earlier attempt here lifted it 96px, which only moved the
 * overlap up into the summary cards. Instead the page simply keeps clear space
 * at the bottom-right so the badge sits over margin rather than over content.
 */
body.woocommerce-order-received .hc27-woo{padding-bottom:84px}

/* --- phones ----------------------------------------------------------------- */
@media(max-width:620px){
 body.woocommerce-order-received .hc27-woo ul.woocommerce-order-overview{
  grid-template-columns:1fr;gap:10px}
 body.woocommerce-order-received .hc27-woo ul.woocommerce-order-overview li{padding:12px 14px}
 body.woocommerce-order-received .hc27-woo ul.woocommerce-order-overview li strong{font-size:16px}
 body.woocommerce-order-received .hc27-woo .woocommerce-order-details__title,
 body.woocommerce-order-received .hc27-woo .woocommerce-column__title{font-size:17px!important}
 body.woocommerce-order-received .hc27-woo table.woocommerce-table--order-details tfoot tr:last-child th,
 body.woocommerce-order-received .hc27-woo table.woocommerce-table--order-details tfoot tr:last-child td{
  font-size:16.5px}
}

/* ---------------------------------------------------------------------------
 * SEARCH — department banner. When a phrase names a department the store
 * actually has, the department is offered above the keyword results rather
 * than the customer being redirected away from them.
 * ------------------------------------------------------------------------ */
body.hc27 .sdept{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
 background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--navy);
 border-radius:10px;padding:13px 17px;margin:0 0 18px;text-decoration:none}
body.hc27 .sdept:hover{background:#fff;border-color:var(--navy)}
body.hc27 .sdept__k{font-size:11px;font-weight:800;letter-spacing:.12em;
 text-transform:uppercase;color:var(--ink-2)}
body.hc27 .sdept__t{font-size:17px;font-weight:800;color:var(--navy)}
body.hc27 .sdept__g{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
 font-size:14px;font-weight:700;color:var(--navy)}
@media(max-width:620px){
 body.hc27 .sdept{gap:8px;padding:12px 14px}
 body.hc27 .sdept__g{margin-left:0;width:100%}
}

/* ==========================================================================
   NAVY / WHITE / RED — navigation, 21 Sep 2026 (owner navigation QA).
   Gold no longer marks hover or the open dropdown. Navy is the interaction
   colour; red stays reserved for Deals.
   ========================================================================== */
body.hc27 .nav .top:hover,body.hc27 .nav li:focus-within>.top{color:var(--hc-navy);
 box-shadow:inset 0 -3px 0 var(--hc-navy)}
body.hc27 .nav .deals:hover{color:var(--hc-red);box-shadow:inset 0 -3px 0 var(--hc-red)}
body.hc27 .drop{min-width:236px;padding:8px;border:1px solid var(--hc-line);border-top:0;
 border-radius:0 0 10px 10px;box-shadow:0 14px 30px rgba(7,29,51,.12)}
body.hc27 .drop a{padding:9px 12px;font-size:14px;font-weight:600;color:var(--hc-navy)}
body.hc27 .drop a:first-child{font-weight:800}
body.hc27 .drop a:hover{background:#f1f4f7;color:var(--hc-navy)}
body.hc27 .mnav .sub a{color:var(--hc-navy)}
body.hc27 .mnav .sub a:first-child{font-weight:800}