/* Trust signals (docs/superpowers/specs/2026-10-20-trust-signals-design.md). Ink on warm neutrals, Open Sans only, the
   indigo kept for actions. Widget boxes keep a fixed height so nothing on the page moves when Trustpilot draws. */

/* Ratings: Trustpilot's Micro Review Count and, once Google answers, Dean's Google rating. */
.trust-ratings{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;min-height:24px}
.trust-tp-micro{flex:none;width:250px;height:24px;overflow:hidden}
/* Trustpilot centres its line in the box whatever the alignment setting (measured 20 Oct 2026: about 7px each side at
   160 reviews), so a left aligned line steps back by that much to sit on the text's left edge. */
.trust-tp-micro[data-style-alignment="left"]{margin-left:-7px}
.trust-tp-micro>a{display:inline-flex;align-items:center;height:24px;font:600 13px/1 'Open Sans',sans-serif;color:inherit;text-decoration:underline;text-underline-offset:3px}
.trust-google{display:inline-flex;align-items:center;gap:7px;min-height:24px;font:400 14px/1.2 'Open Sans',sans-serif;color:#17152B;text-decoration:none;white-space:nowrap}
.trust-google[hidden]{display:none}
.trust-google[href]:hover .trust-google-count{text-decoration:underline;text-underline-offset:3px}
.trust-google:focus-visible{outline:3px solid #332483;outline-offset:3px;border-radius:2px}
.trust-google-score{font-weight:700;font-size:14px}
.trust-google-stars{position:relative;display:inline-block;font-size:14px;letter-spacing:1px;line-height:1}
.trust-google-stars>span:first-child{color:#C9C4D6}
.trust-google-stars>span:last-child{position:absolute;inset:0 auto 0 0;width:var(--fill,0%);overflow:hidden;color:#17152B;white-space:nowrap}
.trust-google-count{color:#4A4760}

/* The top bar: the ratings at its centre, in Trustpilot's dark theme on the ink bar. */
html body .hhi-topbar .trust-top{display:flex;justify-content:center;flex:1 1 auto;min-width:0}
html body .hhi-topbar .trust-ratings{justify-content:center;color:#F7F6F3}
html body .hhi-topbar .trust-tp-micro{width:260px}
html body .hhi-topbar .trust-google{color:#F7F6F3;min-height:44px}
html body .hhi-topbar .trust-google-stars>span:first-child{color:#5E5A78}
html body .hhi-topbar .trust-google-stars>span:last-child,html body .hhi-topbar .trust-google-count{color:#F7F6F3}
html body .hhi-topbar .trust-google:focus-visible{outline-color:#cfc8f5;outline-offset:-3px}
.trust-call-icon{display:none;width:20px;height:20px;fill:currentColor}
@media(max-width:1000px){html body .hhi-topbar{justify-content:space-between;gap:8px}html body .hhi-topbar .trust-google{display:none}}
@media(max-width:600px){
 html body .hhi-topbar{padding-inline:12px 4px}
 html body .hhi-topbar .trust-top{justify-content:flex-start}
 html body .hhi-topbar .trust-tp-micro{width:min(250px,calc(100vw - 72px))}
 html body .hhi-topbar a[href^="tel:"]{justify-content:center;width:44px;min-width:44px}
 html body .hhi-topbar a[href^="tel:"]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .trust-call-icon{display:block}
}

/* Door pages: the ratings between the door's name and its price. */
.shop-product-heading .trust-ratings{margin:6px 0 12px}

/* A testimonial with Dean's accreditations, beside an order. On door pages it sits on the page with a rule above, so it
   never reads as another panel beside the designer banner; on Review your door it is a quiet box under the refund promise. */
.trust-beside{margin-top:24px;padding-top:20px;border-top:1px solid #DDD9E5}
.trust-beside .trust-quote{margin:0}
.trust-accreditations{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin:14px 0 0;font:600 13px/1.4 'Open Sans',sans-serif;color:#17152B}
.trust-accreditations span{display:inline-flex;align-items:center;min-height:24px}
.trust-accreditations span::before{content:"";width:6px;height:6px;margin-right:8px;border-radius:50%;background:#17152B;opacity:.35}
.trust-accreditations a{color:#332483;text-decoration:underline;text-underline-offset:3px;min-height:24px;display:inline-flex;align-items:center}
.trust-beside-checkout{margin:24px 0 0;padding-top:20px}

/* A testimonial: the customer's words as they wrote them, then their name and date as published. No stars. */
.trust-quote{margin:0;font-family:'Open Sans',sans-serif;color:#17152B}
.trust-quote blockquote{margin:0}
.trust-quote blockquote p{margin:0 0 8px;font-size:16px;line-height:1.6;font-weight:400;text-wrap:pretty}
.trust-quote blockquote p:last-child{margin-bottom:0}
.trust-quote blockquote p:first-child::before{content:"\201C"}
.trust-quote blockquote p:last-child::after{content:"\201D"}
.trust-quote figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:12px;font-size:14px;line-height:1.4}
.trust-quote figcaption strong{font-weight:600}
.trust-quote figcaption time{font-size:13px;color:#5C5870}
.trust-quote-small blockquote p{font-size:15px;line-height:1.55}
.trust-quote-large blockquote p{font-size:clamp(20px,1.1rem + .6vw,26px);line-height:1.45;letter-spacing:-.005em}
@media(max-width:760px){.trust-quote-small blockquote p{font-size:16px}}

/* A testimonial card (Karo, 21 Oct 2026, from a 21st.dev testimonial card, in the shop's own type and colours): the
   initials, name and date in a tinted band at the top, the words below. The band comes first on screen and after the
   words in the page, so a screen reader hears the words and then who said them. */
.trust-quote-card{display:flex;flex-direction:column;background:#fff;border:1px solid #DDD9E5;border-radius:10px;box-shadow:0 4px 15px rgba(23,21,43,.05);overflow:hidden}
.trust-quote-card figcaption{order:-1;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:1px;align-items:center;margin:0;padding:14px 20px;background:#F1EFF7}
.trust-monogram{grid-row:1/span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#332483;color:#fff;font:600 15px/1 'Open Sans',sans-serif;letter-spacing:.03em}
.trust-quote-card figcaption strong{align-self:end;font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.trust-quote-card figcaption time{grid-column:2;align-self:start}
.trust-quote-card figcaption strong:last-child{grid-row:1/span 2;align-self:center}
.trust-quote-card blockquote{padding:18px 20px 20px}
.trust-quote-card.trust-quote-large blockquote{padding:22px 24px 26px}
.trust-quote-card.is-folded blockquote{max-height:calc(1.6em * 7 + 18px);overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.trust-more{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin:-10px 20px 8px;padding:0;border:0;background:none;color:#332483;font:600 14px/1.2 'Open Sans',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.trust-more:focus-visible{outline:3px solid #332483;outline-offset:2px;border-radius:2px}

/* Homepage, straight after the door picker: the heading and ratings beside a column of five cards (Karo, 21 Oct
   2026: "cascade down"). trust-signals.js stacks the five into a deck (each card lifted onto the first and turned a few
   degrees, the column closed up to the deck's height) and a press cascades them down into the column, one after
   another, the space below opening with them; with reduced motion they simply appear in place. */
.trust-home{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(0,1.5fr);gap:32px 64px;align-items:start;padding-block:56px;border-top:1px solid #DDD9E5}
.trust-home-intro{position:sticky;top:24px;display:flex;flex-direction:column;gap:18px}
.trust-home-intro h2{margin:6px 0 0;max-width:16ch;font-size:clamp(26px,1.4rem + 1vw,34px);line-height:1.15;font-weight:600;letter-spacing:-.01em}
.trust-home-side{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.trust-home-side .trust-ratings{margin:0}
.trust-home-all{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.trust-home-cards{max-width:680px}
.trust-deck{position:relative;display:flex;flex-direction:column;gap:16px}
.trust-deck.is-animating{transition:height .7s cubic-bezier(.2,.9,.25,1)}
.trust-deck .trust-quote-card{flex:none;position:relative;transform:translateY(var(--dy,0px)) rotate(var(--rot,0deg));transition:transform .6s cubic-bezier(.2,.9,.25,1.1);transition-delay:var(--delay,0ms);will-change:transform}
.trust-deck .trust-quote-card figcaption{padding:12px 18px}
.trust-deck .trust-quote-card blockquote{padding:14px 18px 18px}
.trust-deck.is-stacked{cursor:pointer}
.trust-deck.is-stacked .trust-quote-card{box-shadow:0 6px 18px rgba(23,21,43,.08)}
.trust-deck-toggle{display:flex;align-items:center;gap:10px;min-height:44px;margin:22px 0 0;padding:0 20px;border:1px solid #332483;border-radius:6px;background:#fff;color:#332483;font:600 15px/1 'Open Sans',sans-serif;cursor:pointer}
.trust-deck-toggle:hover{background:#F1EFF7}
.trust-deck-toggle:focus-visible{outline:3px solid #332483;outline-offset:2px}
.trust-deck-toggle svg{flex:none}
@media(max-width:900px){.trust-home{grid-template-columns:1fr;gap:24px;padding-block:40px}.trust-home-intro{position:static}.trust-home-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 24px}}
@media(prefers-reduced-motion:reduce){.trust-deck .trust-quote-card,.trust-deck.is-animating{transition:none}}

/* How it works: a customer beside the survey, the making and the installation, on the page under a rule. */
.trust-stage{margin-top:20px;padding-top:18px;border-top:1px solid #DDD9E5}

/* The Reviews page: the ratings, the newest testimonial about a fitting, then every testimonial in Dean's order. */
.trust-reviews{display:block}
.trust-reviews>.trust-ratings{margin:0 0 28px}
.trust-reviews-lead{max-width:60ch;margin:0 0 48px}
.trust-reviews-title{margin:0 0 24px;font-size:clamp(22px,1.2rem + .6vw,28px);font-weight:600;line-height:1.2}
/* A grid (21 Oct 2026), not columns: cards already shown never move when Show more adds the next twelve. */
.trust-reviews-all{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:24px;align-items:start}
.trust-reviews-all .trust-quote{margin:0}
.trust-reviews-all .trust-quote.is-arriving{animation:trust-arrive .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--delay,0ms)}
@keyframes trust-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.trust-reviews-more{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:32px}
.trust-reviews-more button{min-height:44px;padding:0 24px;border:1px solid #332483;border-radius:6px;background:#332483;color:#fff;font:600 15px/1 'Open Sans',sans-serif;cursor:pointer}
.trust-reviews-more button:focus-visible{outline:3px solid #332483;outline-offset:2px}
.trust-reviews-more p{margin:0;font:400 14px/1.4 'Open Sans',sans-serif;color:#5C5870}
@media(prefers-reduced-motion:reduce){.trust-reviews-all .trust-quote.is-arriving{animation:none}}

/* The Review Collector, for customers whose door is fitted. */
.trust-collect .trust-tp-collector{width:min(100%,320px);height:52px;overflow:hidden}
.trust-collect .trust-tp-collector>a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:#17152B}
/* Order pages have no Trustpilot line (design loop round 5, 22 Oct 2026): the phone link keeps its place at the right. */
html body .hhi-topbar a[href^="tel:"]{margin-left:auto}