/* Checkout design loop, round 1 (26 Sep 2026). Loaded last; measured against docs/design-loop/bar.md.
   Five text styles: 32/600 heading, 18/600 section, 15-16/400 body, 12/400 caption, 28/600 deposit. */
html body{background:#F7F6F3;color:#17152B}
html body .checkout-header b,html body .demo-inline{font-size:12px;letter-spacing:.04em}
html body .demo-banner{font-size:13px}
html body .shopping-progress small,html body .shopping-progress-name{font-size:12px}
html body .shopping-progress-note{display:none}

/* Heading and intro */
html body [data-stage=review] h1{font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:8px 0 10px}
html body [data-stage=review] .intro{font-size:16px;color:#5f5b70;margin-bottom:28px}

/* The door on a flat warm stage */
html body .review-product{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;border:0;padding:0 0 8px;align-items:start}
html body .review-stage{background:#EEECE7;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:28px 0 22px;position:relative}
html body .review-stage::after{content:"";position:absolute;bottom:18px;left:50%;width:34%;height:10px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(23,21,43,.18),transparent);z-index:0}
html body .review-product .review-stage img,html body .review-product:has([data-composed=true]) .review-stage img{position:relative;z-index:1;width:auto;height:100%;max-height:none;max-width:80%;border-radius:0}
html body .review-kind{font-size:12px;color:#5f5b70;margin:0 0 2px}
html body .review-product h2{font-size:24px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
html body .review-product small{font-size:12px;color:#5f5b70;line-height:1.55;max-width:60ch}

/* Choices as cards */
html body .review-spec{border:0;border-top:1px solid #DDD9E5;padding:24px 0 8px;margin:24px 0 0}
html body .review-spec h2,html body .door-estimate h2{font-size:18px;font-weight:600;letter-spacing:0;margin:0 0 14px}
html body .review-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html body .review-cards .config-review-choices{display:contents}
html body .review-card,html body .review-cards .config-review-choices>article{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;background:#fff;border:1px solid #DDD9E5;border-radius:6px;margin:0}
html body .review-card>div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
html body .review-card small{font-size:12px;color:#5f5b70}
html body .review-card strong{font-size:15px;font-weight:600;overflow-wrap:anywhere}
html body .review-card i{width:36px;height:36px;border-radius:50%;border:1px solid #cfcbd8;flex:none}
html body .review-card img{width:44px;height:44px;object-fit:contain;flex:none}
html body .review-card a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:14px;font-weight:600;color:#332483;flex:none}
html body .review-change-all{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:14px;font-weight:600;color:#332483}
html body .review-spec .review-finish-note{text-align:left;font-size:12px;color:#5f5b70;margin:2px 0 0}
html body .review-spec #print-summary{font-size:14px;color:#332483;text-decoration:underline;text-underline-offset:4px}

/* Made to measure / fitted: one quiet row */
html body .details-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid #DDD9E5;padding:20px 0;margin-top:16px}
html body .details-list div{margin:0;font-size:15px}
html body .details-list span{font-size:14px;color:#5f5b70}
html body .price-note{display:none}

/* Door details PDF: a secondary action, never a second filled button */
html body .door-estimate{background:transparent;border:0;border-top:1px solid #DDD9E5;border-radius:0;padding:24px 0 0;margin:0}
html body .door-estimate p{font-size:15px}
html body .door-estimate .estimate-note{font-size:12px}
html body .door-estimate button{background:transparent;color:#332483;border:1px solid #332483;box-shadow:none;border-radius:4px;min-height:48px;font-weight:600;font-size:15px}
html body .door-estimate button:hover{background:#f0eef7}
html body .door-estimate input{min-height:48px;font-size:16px;border-radius:4px}

/* The summary: the one place you act */
html body .order-summary{background:#fff;border:1px solid #DDD9E5;border-radius:8px;padding:28px}
html body .order-summary h2{font-size:18px;font-weight:600;letter-spacing:0;margin:0}
html body .order-summary dl{margin:18px 0 20px}
html body .order-summary dl div{padding:12px 0;font-size:15px;align-items:baseline}
html body .order-summary dt small{display:block;font-size:12px;color:#5f5b70;margin-top:2px}
html body .order-summary dd{font-weight:600}
html body .order-summary .deposit-line{color:#17152B;border-color:#DDD9E5}
html body .order-summary .deposit-line dt{font-weight:600}
html body .deposit-line dd{font-size:28px;color:#332483}
html body .summary-action .primary{min-height:52px;border-radius:5px;font-size:16px;font-weight:600;box-shadow:none}
html body .summary-promise{font-size:14px;line-height:1.55;color:#3d3a4f;margin:14px 0 8px}
html body .summary-promise strong{color:#17152B;font-weight:600}
html body .summary-links{display:flex;gap:18px;margin:0 0 16px}
html body .summary-links a,html body .summary-provider a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:#332483}
html body .summary-provider{align-items:center;font-size:12px;color:#5f5b70;padding-top:8px;border-top:1px solid #DDD9E5}
html body .summary-provider strong{font-size:14px;color:#17152B}

/* Review your door runs down to the order (Dean, 8 Oct 2026; Karo's choice of 9 Oct; docs/slices/order-flow-2026-10-09.md,
   slice 3): the price card, Continue, then the door check as its own card under it, in one column. The column takes the
   card's sticky place; where it is taller than the window, checkout.js sets --order-top so its foot stays on screen. */
html body .order-column{position:sticky;top:var(--order-top,24px);align-self:start;min-width:0}
html body .order-column .order-summary{position:static}
html body .order-column .door-estimate{background:#fff;border:1px solid #DDD9E5;border-radius:8px;padding:24px 28px;margin:16px 0 0}
html body .order-column .door-estimate h2{font-size:18px;line-height:1.35;margin:0 0 8px}
html body .order-column .door-estimate>p{font-size:14px;line-height:1.6}
html body .order-column .estimate-form-row{flex-wrap:wrap}
html body .order-column .estimate-form-row input{flex:1 1 120px;width:auto}
html body .order-column .estimate-form-row button{flex:0 0 auto;white-space:nowrap}
html body .order-column #estimate-download{width:auto;padding:0 18px}
html body .order-column .estimate-result dt small{font-size:12px}
/* The result ends with Continue too (the order flow's critic, 9 Oct 2026): once the result makes the column taller
   than the window its foot is pinned, and the card's Continue scrolls off. Filled, with the PDF outlined below it, and
   standing aside while the card's own Continue is on screen (html.order-in-view, checkout.js), so one is in view at a
   time (bar 13). Phones have the docked bar for this, so it is not shown there. */
html body .door-estimate .estimate-continue{display:flex;width:100%;min-height:52px;margin:18px 0 12px;padding:0 18px;border:0;border-radius:5px;background:#332483;color:#f9f7fe;font-size:16px;font-weight:600;box-shadow:none}
html body .door-estimate .estimate-continue:hover{background:#443392}
html.order-in-view body .door-estimate .estimate-continue{visibility:hidden}
html:not(.result-continue-needed) body .door-estimate .estimate-continue{display:none}

/* Phones: the deposit and the button stay in reach */
html body .checkout-mobile-bar{display:none}
@media(max-width:760px){
 html body [data-stage=review] h1{font-size:28px}
 html body .review-cards{grid-template-columns:minmax(0,1fr)}
 html body .details-list{grid-template-columns:minmax(0,1fr)}
 html body .review-price-mobile{display:none}
 html body .demo-banner{font-size:12px}
 html body .order-column{position:static}
 html body .order-column .door-estimate{padding:22px}
 html body .door-estimate .estimate-continue{display:none}
 html body .summary-action .primary{width:100%}
 html body .checkout-mobile-bar:not([hidden]){transition:transform .22s ease,visibility 0s linear 0s}
 html.order-in-view body .checkout-mobile-bar:not([hidden]){transform:translateY(110%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
 html body .checkout-mobile-bar:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#F7F6F3;border-top:1px solid #DDD9E5}
 html body .checkout-mobile-bar p{margin:0;display:flex;flex-direction:column;line-height:1.2}
 html body .checkout-mobile-bar strong{font-size:20px;font-weight:600;color:#17152B}
 html body .checkout-mobile-bar span{font-size:12px;color:#5f5b70}
 html body .checkout-mobile-bar .primary{width:auto;min-height:48px;padding:0 22px;border-radius:5px;font-size:16px;font-weight:600}
 html body .checkout-main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
 html body .review-stage{aspect-ratio:1/1;padding:24px 0 18px}
 html:not(.order-in-view) body:has(.checkout-mobile-bar:not([hidden])) .preview-navigation{bottom:calc(84px + env(safe-area-inset-bottom))!important}
 html:not(.order-in-view) body:has(.checkout-mobile-bar:not([hidden])) .door-to-top{bottom:calc(144px + env(safe-area-inset-bottom))!important}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){html body .checkout-mobile-bar:not([hidden]),html.order-in-view body .checkout-mobile-bar:not([hidden]){transition:none}}
@media print{html body .checkout-mobile-bar,html body .summary-action,html body .estimate-continue{display:none!important}}
/* Fire doors order online (Karo, 1 Oct 2026): what comes with the door, in place of the furniture choices */
html body .fire-included-heading{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--hhi-ink,#1f1b2e)}
html body .fire-included-review{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
html body .fire-included-review li{position:relative;padding:6px 0 6px 24px;font-size:14px;line-height:1.4}
html body .fire-included-review li::before{content:"";position:absolute;left:2px;top:10px;width:10px;height:5px;border-left:2px solid #332483;border-bottom:2px solid #332483;transform:rotate(-45deg)}
/* The turn on Review your door (Karo, 2 Oct 2026), with the door page's Turn button and turn: the angled picture lies
   over the front one (placed by review-turn.js) and the two cross over. docs/slices/review-turn-2026-10-02.md */
html body .review-stage.review-turnable{cursor:pointer}
html body .review-product .review-stage>img#door-image{transition:opacity .4s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);transform-origin:50% 55%}
html body .review-product:has([data-composed=true]) .review-stage>img.review-door-angle{position:absolute;z-index:1;margin:0;width:auto;height:auto;max-width:none;max-height:none;border-radius:0;opacity:0;transform:perspective(1800px) rotateY(-10deg);transform-origin:50% 55%;transition:opacity .4s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);pointer-events:none}
html body .review-product .review-stage.is-turned>img#door-image{opacity:0;transform:perspective(1800px) rotateY(12deg)}
html body .review-product:has([data-composed=true]) .review-stage.is-turned>img.review-door-angle{opacity:1;transform:none}
/* The button sits in the stage's top right corner where the door leaves room beside it, so it is in the first view on a
   computer (the critic, 2 Oct 2026: at the bottom it started just below the fold at 1440x900 and 1280x800); on phones it
   goes under the picture (turn-below, from review-turn.js). */
html body .review-stage>.door-turn-button{position:absolute;right:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid #d9d5de;border-radius:999px;background:#fffffff0;color:#1f1b3a;font-family:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer}
html body .review-stage>.door-turn-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
html body .review-stage.is-turned>.door-turn-button svg{transform:scaleX(-1)}
@media(hover:hover){html body .review-stage>.door-turn-button:hover{border-color:#332483;color:#332483}}
html body .review-stage>.door-turn-button:focus-visible{outline:2px solid #332483;outline-offset:2px}
html body .review-stage.turn-below{margin-bottom:62px}
html body .review-stage.turn-below>.door-turn-button{right:auto;bottom:auto;left:50%;top:calc(100% + 12px);transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){html body .review-product .review-stage>img#door-image,html body .review-product:has([data-composed=true]) .review-stage>img.review-door-angle{transition:opacity .2s linear;transform:none!important}}
@media print{html body .review-stage>img.review-door-angle,html body .review-stage>.door-turn-button{display:none!important}html body .review-product .review-stage.is-turned>img#door-image{opacity:1!important;transform:none!important}}