/* ===========================================================
   Swiss Imprint — light brand layer.
   Loads after catalogue.css and re-points its design tokens to a
   light palette: white and warm off-white surfaces, Swiss red used
   only as an accent. No dark full-bleed bands.
   =========================================================== */
:root{
  /* Accent, taken from the Swiss Imprint logo. */
  --brass:#CE1417; --brass-deep:#A50F12; --brass-tint:#FBF4F3;
  /* Text stays high-contrast for legibility; surfaces stay light. */
  --ink:#23262B; --ink-2:#4A4F57; --warm:#6E7378;
  --paper:#FFFFFF; --card:#FFFFFF; --rule:#EAE7E2;
  /* Formerly the near-black band colour: now a warm off-white. */
  --deep:#F7F5F2;
  /* Same families as the reference design; loaded via Google Fonts. */
  --display:Newsreader,Georgia,"Times New Roman",serif;
  --body:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow:0 1px 2px rgba(35,38,43,.04),0 8px 24px rgba(35,38,43,.06);
}

/* Astra global colours, so header, links and buttons match. */
:root{
  --ast-global-color-0:#CE1417; --ast-global-color-1:#A50F12;
  --ast-global-color-2:#23262B; --ast-global-color-3:#4A4F57;
  --ast-global-color-4:#FFFFFF; --ast-global-color-5:#FFFFFF;
}

body{background:#FFFFFF;color:var(--ink);font-family:var(--body)}
h1,h2,h3,.site-title{font-family:var(--display)}
.site-title a{font-weight:700;color:var(--ink)}
.main-header-bar{border-bottom:1px solid var(--rule);background:#fff}

/* Light alternating band, replacing the old dark section. */
.kb-sec--soft{background:var(--deep)}
.kb-sec--soft h2,.kb-sec--soft .kb-steps h3{color:var(--ink)}
.kb-sec--soft .kb-sec__lede,.kb-sec--soft .kb-steps p{color:var(--warm)}
.kb-sec--soft .kb-steps li{border-top-color:var(--rule)}
/* Defensive: neutralise any dark rules still shipped in catalogue.css. */
.kb-sec--dark{background:var(--deep);color:var(--ink)}
.kb-sec--dark h2,.kb-sec--dark .kb-steps h3{color:var(--ink)}
.kb-sec--dark .kb-sec__lede,.kb-sec--dark .kb-steps p{color:var(--warm)}
.kb-sec--dark .kb-steps li{border-top-color:var(--rule)}

/* Hero: catalogue.css ships it near-black with white text. Invert it to a
   light wash so the photo sits behind dark text instead. */
.kb-hero{background:var(--brass-tint);color:var(--ink)}
.kb-hero__media img{opacity:.30}
.kb-hero::after{background:linear-gradient(180deg,rgba(255,255,255,.60) 0%,rgba(255,255,255,.88) 100%)}
.kb-hero h1,.kb-hero__inner{color:var(--ink)}
.kb-hero__lede{color:var(--ink-2)}

.si-home{color:var(--ink);background:#fff}
.si-home .kb-btn{color:#fff;background:var(--brass);border-color:var(--brass)}
.si-home .kb-btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.si-home .kb-btn--ghost:hover{background:var(--brass-tint);border-color:var(--brass);color:var(--ink)}
.si-home .kb-sec{padding-left:20px;padding-right:20px}
.si-home .kb-sec>.kb-sec__head,.si-home .kb-sec>.kb-grid,.si-home .kb-sec>p{max-width:1160px;margin-left:auto;margin-right:auto}
.si-home .kb-hero__inner{padding-left:30px;padding-right:30px}
.si-home .kb-card__title{color:var(--ink)}
.si-home .kb-steps{margin-left:0}

/* Whole-card links: Astra underlines every link, which put underlines under
   product titles, spec lines and "Price on request" on the category pages.
   These cards are blocks, not inline links, so the underline is noise. */
a.kb-card,a.kb-card:hover,a.kb-card:focus,
a.kb-cat,a.kb-cat:hover,a.kb-cat:focus{text-decoration:none}
a.kb-card *,a.kb-cat *{text-decoration:none}
a.kb-card:focus-visible,a.kb-cat:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
/* The title is the affordance, so underline just that on hover. */
a.kb-card:hover .kb-card__title{text-decoration:underline;text-underline-offset:3px}

/* Category tiles: catalogue.css overlays white text on a darkened photo.
   Rebuilt as light cards with the text beside the image on wider screens and
   stacked beneath it on phones. Selectors are scoped with .si-home so they beat
   the `.si-home img{height:auto}` overflow guard further down this file. */
.kb-cat{background:#fff;color:var(--ink);border:1px solid var(--rule);min-height:0;overflow:hidden}
.kb-cat::after{display:none}
.si-home .kb-cat img,.kb-cat img{position:static;inset:auto;display:block;
  width:100%;height:200px;object-fit:contain;background:#F7F5F2;opacity:1}
.kb-cat__body{position:relative;min-height:0;margin-top:0;padding:20px 22px 24px;
  justify-content:flex-start}
.kb-cat__n{margin-bottom:10px;color:var(--brass)}
.kb-cat h3{color:var(--ink);margin-bottom:6px}
.kb-cat p{color:var(--ink-2)}
.kb-cat:hover{border-color:var(--brass)}

@media(min-width:760px){
  /* Two cards, centred rather than stretched across the full row. */
  .kb-cats{grid-template-columns:repeat(2,minmax(0,530px));justify-content:center}
  .kb-cat{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:stretch}
  .si-home .kb-cat img,.kb-cat img{height:100%;min-height:215px}
  .kb-cat{grid-template-columns:230px minmax(0,1fr)}
  .kb-cat__body{padding:22px 24px}
}

/* ---------- product detail ---------- */
.si-product-layout{display:grid;gap:34px;margin:0 auto;max-width:1160px}
@media(min-width:900px){.si-product-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.si-product-photo img{width:100%;height:auto;border:1px solid var(--rule);border-radius:4px}
.si-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--warm);display:block;margin-bottom:.6em}
.si-sample-caption,.si-note{color:var(--warm);font-size:14px;margin:.7rem 0}
.si-specs{margin:1.5rem 0;border-collapse:collapse;width:100%}
.si-specs caption{text-align:left;font-weight:700;margin-bottom:.5rem}
.si-specs td{padding:.7rem;border-bottom:1px solid var(--rule)}
.si-quote-link{display:inline-block;margin:1rem 0}
.si-price-note{color:var(--brass-deep);font-weight:600}
.si-sample-badge{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.94);color:var(--ink);
  border:1px solid var(--rule);font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 9px;border-radius:2px}
.kb-card__media{position:relative;display:block;aspect-ratio:2/3;background:#F7F5F2}
/* Images are 2:3 to match this box exactly, so nothing is cropped or letterboxed.
   contain is the safety net for any image that is not 3:4. */
.kb-card__img{width:100%;height:100%;object-fit:contain}
.si-related{max-width:1160px;margin:56px auto 0;padding:0 20px}

/* ---------- quote form ---------- */
.si-quote-form{max-width:640px;display:grid;gap:2px}
.si-form-intro{max-width:640px;color:var(--ink-2);margin-bottom:1.4rem}
.si-quote-form label{display:block;font-weight:600;margin-top:1rem}
.si-quote-form input:not([type=submit]),.si-quote-form textarea{
  width:100%;margin:.4rem 0 0;padding:.7rem .8rem;font:inherit;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:3px}
.si-quote-form input:focus-visible,.si-quote-form textarea:focus-visible{
  outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass)}
.si-quote-form button{margin-top:1.4rem;justify-self:start;background:var(--brass);color:#fff;
  border:1px solid var(--brass);font-weight:600;font-size:15px;padding:14px 26px;border-radius:3px;cursor:pointer}
.si-quote-form button:hover{background:var(--brass-deep);border-color:var(--brass-deep)}
.si-form-notice,.si-form-error{max-width:640px;padding:1rem 1.1rem;border-radius:3px;margin-bottom:1.2rem}
.si-form-notice{background:#F1F7F3;border:1px solid #CBE3D5;color:#18583F}
.si-form-error{background:var(--brass-tint);border:1px solid #F0CDCD;color:var(--brass-deep)}
/* Honeypot: off-screen and not reachable by keyboard or screen readers. */
.si-form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- language switcher ---------- */
.si-language a{font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.si-language a[aria-current=true]{color:var(--brass);font-weight:700}

/* ---------- footer ---------- */
.si-footer{background:var(--deep);color:var(--ink);border-top:1px solid var(--rule);padding:44px 20px}
.si-footer__inner{max-width:1160px;margin:0 auto;display:grid;gap:26px}
@media(min-width:760px){.si-footer__inner{grid-template-columns:repeat(3,minmax(0,1fr))}}
.si-footer h2{font-size:15px;margin:0 0 .6em;letter-spacing:.02em}
.si-footer p,.si-footer li{color:var(--ink-2);font-size:14px;line-height:1.65;margin:0}
.si-footer ul{list-style:none;margin:0;padding:0}
.si-footer a{color:var(--ink-2);text-decoration:underline}
.si-footer a:hover{color:var(--brass)}
.si-footer__note{max-width:1160px;margin:26px auto 0;padding-top:18px;border-top:1px solid var(--rule);
  color:var(--warm);font-size:13px}
.site-footer{background:#fff;color:var(--ink-2)}
.site-footer a{color:var(--ink-2)}

/* ---------- header and primary navigation ---------- */
/* Astra free has no sticky header, so pin it here (the reference design does
   the same with .kb-header). The admin bar offsets are for logged-in views. */
.site-header{position:sticky;top:0;z-index:60;background:#fff;
  box-shadow:0 1px 0 var(--rule),0 6px 20px rgba(35,38,43,.05)}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
/* A sticky ancestor with clipping would break position:sticky, so the overflow
   guard goes on the homepage wrapper itself rather than on html/body. */
#page,#content,.site-content{overflow:visible}
.si-home{overflow-x:clip;max-width:100%}
.si-home .kb-wrap,.si-home .kb-sec,.si-home .kb-hero,.si-home .kb-hero__inner,
.si-home .kb-season__inner,.si-home .kb-cats,.si-home .kb-grid{box-sizing:border-box;max-width:100%}
.si-home img{max-width:100%;height:auto}

/* Astra's header builder forces an 80px bar with 80px menu line-height, which
   made the header noticeably taller than the reference and the competitors.
   Bring it to a 64px bar (56px on phones). */
.ast-primary-header-bar,.ast-primary-header-bar .site-primary-header-wrap,
.ast-mobile-header-wrap .ast-primary-header-bar{min-height:64px}
.ast-desktop .ast-primary-header-bar .main-header-menu>.menu-item,
.ast-desktop:not(:has(.ast-header-sticked)) .ast-primary-header-bar .main-header-menu>.menu-item{line-height:44px}
.ast-primary-header-bar .site-primary-header-wrap,
.ast-primary-header-bar .ast-builder-layout-element{padding-top:0;padding-bottom:0}
/* Astra pads the branding block by 1em top and bottom, which was adding 33px
   to the bar on its own. */
.ast-primary-header-bar .site-branding,
.ast-primary-header-bar .ast-site-identity{padding-top:0;padding-bottom:0}
.ast-header-break-point .ast-primary-header-bar,
.ast-header-break-point .ast-mobile-header-wrap .ast-primary-header-bar{min-height:56px}
/* Cap the logo by HEIGHT: Astra prints an inline max-width, and a wide lockup
   constrained only by width still renders ~85px tall and stretches the bar. */
.site-logo-img img,.custom-logo-link img,.ast-site-identity .custom-logo-link img{
  max-height:46px!important;width:auto!important;max-width:160px!important}
.ast-header-break-point .site-logo-img img,.ast-header-break-point .custom-logo-link img{
  max-height:38px!important}
.ast-primary-header-bar .main-header-menu>.menu-item>.menu-link{padding-left:14px;padding-right:14px;font-size:15px}
/* The CTA is a button, not a full-height menu cell: Astra stretches menu links
   to the header height, which turned it into a tall red block. */
.si-nav-cta{display:flex;align-items:center;margin-left:14px;line-height:normal}
.si-nav-cta a.kb-btn{color:#fff!important;text-decoration:none;height:auto;line-height:1.2;
  padding:11px 20px;font-size:14px}
.si-nav-cta a.kb-btn:hover{background:var(--brass-deep);border-color:var(--brass-deep);color:#fff!important}

/* Language switcher: a compact code with a chevron, opening a named list. */
.si-lang-switch{margin-left:10px;padding-left:12px;border-left:1px solid var(--rule)}
.si-lang-switch>a{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.si-lang-switch>a::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55}
.si-language__code{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em}
.si-lang-switch .sub-menu{min-width:190px}
.si-lang-switch .sub-menu .menu-link,.si-lang-switch .sub-menu a{display:flex;align-items:center;
  gap:10px;font-size:14px;text-decoration:none}
.si-language--current>a{color:var(--brass);font-weight:600}
.si-language .si-language__code{color:var(--warm);min-width:22px}
.si-language--current .si-language__code{color:var(--brass)}
/* On phones the submenu is expanded inline by Astra, so give it room. */
.ast-header-break-point .si-lang-switch{margin-left:0;padding-left:0;border-left:0;
  border-top:1px solid var(--rule)}
.ast-builder-menu .main-navigation a{font-weight:600}
.main-navigation .current-menu-item>a,.main-navigation .current_page_item>a{color:var(--brass)}

/* Astra's off-canvas / dropdown panel on phones and tablets. */
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-header-break-point .main-header-menu{background:#fff}
.ast-header-break-point .main-navigation a{padding:14px 20px;border-bottom:1px solid var(--rule)}
.ast-mobile-popup-drawer .si-language a{display:inline-block;padding:10px 14px;border-bottom:0}
/* Keep the language codes on one row rather than stacked full-width items. */
.ast-header-break-point .main-header-menu .si-language{display:inline-block;width:auto;border-bottom:0}
.ast-header-break-point .main-header-menu .si-language a{border-bottom:0}
/* Comfortable tap targets everywhere. */
.main-navigation a,.si-footer a,.kb-btn{min-height:44px}
.kb-btn{min-height:auto;padding:14px 26px}

@media(max-width:921px){
  .kb-cats{grid-template-columns:1fr}
  .si-footer__inner{grid-template-columns:1fr 1fr}
}

@media(max-width:544px){
  .si-home .kb-sec{padding-left:0;padding-right:0}
  .si-home .kb-hero__inner{padding-left:20px;padding-right:20px}
  /* Two cards per row stays readable on a phone; one is too sparse. */
  .kb-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .kb-card__title{font-size:15px}
  .kb-card__specs{font-size:12px}
  .si-footer__inner{grid-template-columns:1fr;gap:22px}
  .si-footer{padding:32px 20px}
  .si-product-layout{gap:22px}
  .si-quote-form,.si-form-intro,.si-form-notice,.si-form-error{max-width:100%}
  /* iOS zooms the page in when a focused input is under 16px. */
  .si-quote-form input:not([type=submit]),.si-quote-form textarea{font-size:16px}
  .si-quote-form button{width:100%;justify-self:stretch}
  .kb-season__inner{gap:10px}
  .si-related{padding:0 16px}
}