/* Score tile, paper design. Loaded after production.css and overrides the look of .scorecard, .hf-sticky-mini
   and .card-score-tile. The vendor page and the listing card show the same full tile (88px, 76px on phones);
   the sticky bar keeps the 48px number-only tile. One large top-right corner, one flat offset shadow. */
.scorecard,.card-score-tile{width:88px;height:88px;border-radius:16px 34px 16px 16px;background:#fdf4d3 url(/brand/scorecard-paper.svg) center/cover no-repeat;color:#102e4f;box-shadow:4px 4px 0 #102e4f}
.scorecard-num{color:#102e4f;text-shadow:none;margin-top:-24px}
.scorecard-lbl{color:#102e4f;bottom:8px}
/* The listing card's tile holds only the number, so the label is drawn here. */
.card-score-tile{position:relative;padding-bottom:24px;font:800 34px/1 Manrope,Arial,sans-serif;letter-spacing:-1.2px;margin-right:4px}
.card-score-tile::after{content:"HONESTFIX\A SCORE";white-space:pre;position:absolute;left:0;right:0;bottom:8px;text-align:center;font:700 8.5px/1.05 'DM Sans',Arial,sans-serif;letter-spacing:.08em}
.hf-sticky-mini{border-radius:10px 19px 10px 10px;background:#fdf4d3;color:#102e4f;box-shadow:2px 2px 0 #102e4f}
@media(max-width:480px){.scorecard,.card-score-tile{width:76px;height:76px;border-radius:14px 29px 14px 14px}.scorecard-num{margin-top:-23px}.scorecard-lbl{bottom:5px}.card-score-tile{font-size:28px;padding-bottom:23px}.card-score-tile::after{bottom:5px}}

/* Thin record (Kenneth, 2 Oct 2026): the same tile, no number, "Not enough data yet" in its place. */
.card-score-tile.is-thin,.scorecard.is-thin{display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;font:800 13px/1.15 Manrope,Arial,sans-serif;letter-spacing:0;box-sizing:border-box}
.card-score-tile.is-thin::after{content:none}
.scorecard.is-thin .scorecard-num{margin:0;font:800 13px/1.15 Manrope,Arial,sans-serif;letter-spacing:0}
.hf-sticky-mini.is-thin{font:800 11px/1.1 Manrope,Arial,sans-serif;display:flex;align-items:center;justify-content:center}
@media(max-width:480px){.card-score-tile.is-thin,.scorecard.is-thin .scorecard-num{font-size:11.5px}}

/* Listing card: the "View vendor profile" button. Yellow, navy label, real space above the summary text
   (the button previously computed to display:inline, so its margin and padding had no effect). */
.card-summary .card-profile-button{display:inline-flex;align-items:center;gap:8px;width:auto;margin-top:16px;padding:12px 20px;min-height:46px;border:0;border-radius:9px;background:#fdc500;color:#102e4f;font-size:14px;font-weight:700;text-decoration:none}
.card-summary .card-profile-button:hover{background:#f0b900}
@media(max-width:600px){.card-summary .card-profile-button{display:flex;width:100%;justify-content:center}}

/* Contact row, one family with three levels: WhatsApp filled, Call outlined, then plain navy links for the
   website and any registry or licence record. One height, one corner, one type size, one padding. */
.vendor-contact-actions>a,.vendor-contact-actions>button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:9px;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:0;line-height:1.2;text-decoration:none;cursor:pointer;flex:0 1 auto;order:0;transition:background .15s,border-color .15s}
.vendor-contact-actions>.primary{background:#00509d;border:1.5px solid #00509d;color:#fff}
.vendor-contact-actions>.primary:hover{background:#003f7d;border-color:#003f7d}
.vendor-contact-actions>.contact-secondary{background:#fff;border:1.5px solid #00509d;color:#00509d}
.vendor-contact-actions>.contact-secondary:hover{background:#e9f2fb}
.vendor-contact-actions>.business-action,.vendor-contact-actions>a[data-channel="website"]{background:transparent;border:1.5px solid transparent;color:#102e4f;padding:0 10px}
.vendor-contact-actions>.business-action:hover,.vendor-contact-actions>a[data-channel="website"]:hover{background:#f0f4f8;text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){.vendor-contact-actions>.primary,.vendor-contact-actions>.contact-secondary{flex:1 1 44%}.vendor-card .card-actions .vendor-contact-actions>a.business-action,.vendor-card .card-actions .vendor-contact-actions>button.business-action,.vendor-contact-actions>.business-action,.vendor-contact-actions>a[data-channel="website"]{flex:0 1 auto;order:5;min-height:40px;padding:0 8px}}
/* Sticky bar on the vendor page: the same three levels at its smaller size. */
.hf-sticky .acts .wa{background:#00509d;color:#fff;border:1.5px solid #00509d}
.hf-sticky .acts .call{background:#fff;border:1.5px solid #00509d;color:#00509d}
.hf-sticky .acts .web{background:transparent;border:1.5px solid transparent;color:#102e4f}

/* Vendor page: guide cards carry the trade scene above the title. */
.guide-index-card-pic{padding:0;overflow:hidden}
.guide-index-card-pic .hc-photo{width:100%;margin:0;border-radius:0;aspect-ratio:16/9}
.guide-index-card-pic .hc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.guide-index-card-pic h3{padding:14px 18px 18px;margin:0;font-size:16px;line-height:1.35;letter-spacing:-.2px}

/* Related as cards (Kenneth, 4 Oct 2026): one card per entry in the site's card style, the whole card is the link,
   picture on top, a small eyebrow for the kind (Guide, Question, trade) above the title, then the description. */
.related-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.related-row{display:flex;margin:0;padding:0;border:0}
.related-card{display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid var(--line,#dfe5eb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .18s ease-out,box-shadow .18s ease-out,border-color .18s}
.related-pic{display:block;aspect-ratio:16/9;background:#e9f2fb}
.related-pic img{display:block;width:100%;height:100%;object-fit:cover}
.related-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.related-card .related-type{font:700 12px/1.2 'DM Sans',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#58697a}
.related-title{font:650 18px/1.35 Manrope,Arial,sans-serif;color:#102e4f;text-wrap:balance}
.related-desc{font-size:15px;line-height:1.5;color:#58697a}
.related-card:hover{border-color:#00509d;box-shadow:0 6px 18px #102e4f14;transform:translateY(-2px)}
.related-card:hover .related-title{color:#00509d}
.related-card:focus-visible{outline:3px solid #00509d;outline-offset:2px}
.related-list li.related-row{border:0;padding:0}
.related-card .related-type{margin-left:0}
@media(max-width:700px){.related-list{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.related-card{transition:none}.related-card:hover{transform:none}}