@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* LinenOwl palette + type over stock Hummingbird (brand review 2026-09-23, item 4).
   Colours come from the logo (brand/logo/build_logos.py), not from Bootstrap:
     Dark Teal #204C5F  - every interactive thing: buttons, links, focus, checks
     Teal Deep #163847  - hover/pressed, footer ground
     Ink       #2B3133  - text
     Linen     #F2F3F1  - quiet grounds (top bars, breadcrumb, reviews and
                          newsletter bands: Bootstrap's tertiary grey)
     Copper    #9A5731  - one small accent (the active slider dot); the logo's
                          #B1693E is 4.2:1 on white, this darker step is 5.6:1
   The heading-face placeholders are filled by build_preview.py (three faces, for
   the preview) and build_css.py (the chosen one, deployed). Body text stays Inter: the theme already ships it,
   so the only new download is one heading face. */

:root {
  --lo-teal: #204C5F;
  --lo-teal-deep: #163847;
  --lo-ink: #2B3133;
  --lo-linen: #F2F3F1;
  --lo-oatmeal: #ADAEAB;
  --lo-copper: #9A5731;
  --lo-rule: #DCDFDC;

  --bs-primary: #204C5F;
  --bs-primary-rgb: 32, 76, 95;
  --bs-primary-text-emphasis: #163847;
  --bs-primary-bg-subtle: #E3ECEF;
  --bs-primary-border-subtle: #B9CDD5;
  --bs-link-color: #204C5F;
  --bs-link-color-rgb: 32, 76, 95;
  --bs-link-hover-color: #163847;
  --bs-link-hover-color-rgb: 22, 56, 71;
  --bs-body-color: #2B3133;
  --bs-body-color-rgb: 43, 49, 51;
  --bs-emphasis-color: #1E2325;
  --bs-border-color: #DCDFDC;
  --bs-light: #F2F3F1;
  --bs-tertiary-bg: #F2F3F1;
  --bs-tertiary-bg-rgb: 242, 243, 241;
  --bs-light-rgb: 242, 243, 241;
  --bs-focus-ring-color: rgba(32, 76, 95, .3);
}

/* ── type ── */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .page-title, .section-title, .product__name {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -.005em;
  text-wrap: balance;
}
/* the hero caption is uppercase over a photo: open it up a little */
.carousel .h1.text-uppercase, .carousel .h3 { letter-spacing: .04em; }

/* ── buttons ── */
.btn-primary {
  --bs-btn-bg: #204C5F; --bs-btn-border-color: #204C5F;
  --bs-btn-hover-bg: #163847; --bs-btn-hover-border-color: #163847;
  --bs-btn-active-bg: #102A35; --bs-btn-active-border-color: #102A35;
  --bs-btn-disabled-bg: #204C5F; --bs-btn-disabled-border-color: #204C5F;
  --bs-btn-focus-shadow-rgb: 32, 76, 95;
}
.btn-outline-primary {
  --bs-btn-color: #204C5F; --bs-btn-border-color: #204C5F;
  --bs-btn-hover-bg: #204C5F; --bs-btn-hover-border-color: #204C5F; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #163847; --bs-btn-active-border-color: #163847; --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #204C5F; --bs-btn-disabled-border-color: #204C5F;
  --bs-btn-focus-shadow-rgb: 32, 76, 95;
}
.btn-link { --bs-btn-color: #204C5F; --bs-btn-hover-color: #163847; --bs-btn-active-color: #163847; }

/* ── product cards: the name is text, not a blue link ── */
.product-miniature__title { color: var(--lo-ink); }
.product-miniature__title:hover, .product-miniature__title:focus-visible { color: var(--lo-teal); text-decoration: underline; text-underline-offset: .2em; }

/* ── the rest of Bootstrap's blue ── */
.form-check-input:checked { background-color: #204C5F; border-color: #204C5F; }
.form-check-input:focus, .form-control:focus, .form-select:focus { border-color: #7F9FAD; box-shadow: 0 0 0 .25rem rgba(32, 76, 95, .2); }
.accordion { --bs-accordion-active-color: #163847; --bs-accordion-active-bg: var(--lo-linen); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(32, 76, 95, .2); }
.pagination { --bs-pagination-color: #204C5F; --bs-pagination-hover-color: #163847; --bs-pagination-focus-color: #163847;
  --bs-pagination-active-bg: #204C5F; --bs-pagination-active-border-color: #204C5F; --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(32, 76, 95, .2); }
.noUi-connect { background: #204C5F; }
.spinner-border.text-primary-emphasis { color: #204C5F !important; }

/* ── trust bar icons: our own SVGs (brand/icons/), shown as plain <img> (the
   blockreassurance templates are patched). The perf pass's inline CSS shrinks them to
   20 px on phones, sized for the old filled icons; the monoline ones need 30. ── */
@media (max-width: 767.98px) {
  .blockreassurance--horizontal .reassurance__image img { width: 30px; height: 30px; }
}

/* ── grounds ──
   headings keep Bootstrap's inherited colour: the hero caption is light text on a
   photo, and a fixed heading colour turned it dark */
.header-top { background: var(--lo-linen); }
.carousel-indicators .active, .carousel-indicators button.active { background-color: var(--lo-copper); }
.footer__main { background: var(--lo-teal-deep); color: var(--lo-linen); }
.footer__main a { color: #D5DCDD; }
.footer__main a:hover { color: #fff; }