/* ============================================================
   COFFEE LADY — Universal Brand Page Template
   Palette = Coffee Lady. Accent zone (hero) = dark "brand" strip.
   Swap brand content; keep this system across all brands.
   ============================================================ */

:root {
  /* Coffee Lady palette */
  --burgundy: #871d15;
  --red: #bf3826;
  --red-dark: #a52d1d;
  --terracotta: #cf6a43;
  --terracotta-deep: #c25e38;
  --terracotta-soft: #e2a583;
  --cream: #f7ece2;
  --cream-2: #fdf8f2;
  --paper: #ffffff;
  --ink: #2a221e;
  --ink-soft: #756860;
  --ink-faint: #9b8e85;
  --line: #ece0d5;
  --line-soft: #f1e8df;

  /* Dark brand accent zone */
  --brand-bg: #16110f;
  --brand-bg-2: #211915;
  --brand-line: #38302b;
  --brand-text: #f4ece4;
  --brand-muted: #b6a89d;

  --maxw: 1200px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(42,34,30,.04), 0 18px 40px -28px rgba(42,34,30,.45);
  --shadow-soft: 0 14px 40px -30px rgba(42,34,30,.6);

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); }

h2 { font-size: clamp(28px, 3.4vw, 44px); }

h3 { font-size: 22px; }

p { text-wrap: pretty; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.section { padding: 92px 0; }

.section-sm { padding: 60px 0; }

.lead {
  font-size: clamp(16px, 1.45vw, 19px);
  color: var(--ink-soft);
  max-width: 62ch;
  font-weight: 400;
}

.center { text-align: center; }

.center .lead { margin-left: auto; margin-right: auto; }

/* heading accent — the brick-red Coffee Lady look */
.h-accent { color: var(--red); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  padding: 14px 26px; border-radius: 999px;
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--red); color: #fff; box-shadow: 0 10px 26px -14px rgba(191,56,38,.85); }

.btn-primary:hover { background: var(--red-dark); }

.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }

.btn-ghost:hover { border-color: var(--ink); }

.btn-light { background: #fff; color: var(--ink); }

.btn-light:hover { background: #f3ece6; }

.btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }

.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.btn-sm { padding: 11px 20px; font-size: 14px; }

.btn .arrow { transition: transform .2s ease; }

.btn:hover .arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--red); font-weight: 600; font-size: 15px;
}

.link-arrow svg { transition: transform .2s ease; }

.link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   TOP BAR + NAV
   ============================================================ */
.topbar {
  background: var(--burgundy); color: #f6e7e2;
  font-size: 12.5px; font-weight: 500;
}

.topbar .wrap { display: flex; align-items: center; gap: 22px; height: 40px; max-width: 1600px; padding: 0 48px; }

.topbar .tb-contact { display: flex; align-items: center; gap: 22px; }

.topbar a { display: inline-flex; align-items: center; gap: 7px; opacity: .9; transition: opacity .15s ease; white-space: nowrap; }

.topbar a:hover { opacity: 1; }

.topbar .tb-ic { display: grid; place-items: center; width: 17px; height: 17px; opacity: .8; }

.topbar .spacer { flex: 1; }

.topbar .socials { display: flex; align-items: center; gap: 8px; }

.topbar .socials .lbl { letter-spacing: .04em; opacity: .8; margin-right: 2px; }

.topbar .socials .dot { width: 24px; height: 24px; border-radius: 7px; background: rgba(255,255,255,.12); display: grid; place-items: center; transition: background .15s ease; }

.topbar .socials .dot:hover { background: rgba(255,255,255,.28); }

@media (max-width: 760px){ .topbar .hide-sm { display: none; } .topbar .wrap { gap: 14px; justify-content: center; padding: 0 22px; } .topbar .spacer { display: none; } }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253,248,242,.82);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(236,224,213,.7);
}

.nav > .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 78px; gap: 24px; max-width: 1600px; padding: 0 48px; }

.brand-logo { display: flex; align-items: center; gap: 11px; font-weight: 600; justify-self: start; }

.brand-logo .logo-img { height: 42px; width: auto; display: block; }

.footer-logo { display: inline-flex; background: #fff; padding: 12px 20px; border-radius: 14px; }

.footer-logo .logo-img { height: 40px; }

.brand-logo .mark {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(150deg, var(--red), var(--terracotta-deep));
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 16px -8px rgba(191,56,38,.7);
}

.brand-logo .wordmark { font-size: 22px; letter-spacing: -0.03em; line-height: 1; }

.brand-logo .wordmark b { color: var(--red); font-weight: 600; }

.nav-links {
  display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 500;
  justify-self: center;
  background: rgba(135,29,21,.05);
  border: 1px solid rgba(236,224,213,.8);
  padding: 5px; border-radius: 999px;
}

.nav-links a {
  color: var(--ink); display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 17px; border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}

.nav-links a:hover { background: #fff; color: var(--red); box-shadow: 0 4px 14px -8px rgba(42,34,30,.4); }

.nav-links a.is-active { background: var(--ink); color: #fff; }

.nav-links a.is-active:hover { background: var(--ink); color: #fff; }

.nav-right { display: flex; align-items: center; gap: 16px; justify-self: end; }

.nav-call { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14.5px; color: var(--ink); }

.nav-call .ph { width: 34px; height: 34px; border-radius: 10px; background: var(--cream); border: 1px solid var(--line); display: grid; place-items: center; color: var(--red); }

.nav-call .ph-txt { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }

.nav-call .ph-txt small { font-size: 11px; font-weight: 500; color: var(--ink-faint); letter-spacing: .01em; }

.nav .btn { padding: 12px 22px; }

@media (max-width: 1080px){ .nav-call .ph-txt, .nav-call .ph { display: none; } .nav-call { display: none; } }

@media (max-width: 920px){ .nav-links { display: none; } .nav > .wrap { grid-template-columns: 1fr auto; } }

/* ---------- Mega menu ---------- */
.nav-mega-trigger { display: inline-flex; }

.nav-mega-trigger .chev { transition: transform .22s ease; margin-left: 1px; }

.nav-mega-trigger.open .chev { transform: rotate(180deg); }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cream-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 34px 54px -34px rgba(42,34,30,.55);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 48;
}

.mega.open { opacity: 1; visibility: visible; transform: none; }

.mega-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: 42px 0 36px; }

.mega-col { padding: 0 46px; border-right: 1px solid var(--line); }

.mega-col:first-child { padding-left: 0; }

.mega-col:last-child { border-right: none; padding-right: 0; }

.mega-group + .mega-group { margin-top: 30px; }

.mega-group h4 {
  font-size: 15.5px; font-weight: 600; color: var(--ink);
  margin-bottom: 16px; padding-bottom: 11px; border-bottom: 1px solid var(--line);
}

.mega-links { display: flex; flex-direction: column; gap: 12px; }

.mega-links a {
  font-size: 14px; color: var(--ink-soft); font-weight: 500;
  display: inline-flex; align-items: center; gap: 9px; width: fit-content;
  transition: color .15s ease, gap .15s ease;
}

.mega-links a::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--terracotta); opacity: 0; transform: scale(.4);
  transition: opacity .15s ease, transform .15s ease; flex-shrink: 0;
}

.mega-links a:hover { color: var(--red); gap: 11px; }

.mega-links a:hover::before { opacity: 1; transform: scale(1); }

.mega-links a.cur { color: var(--red); font-weight: 600; }

.mega-links a.cur::before { opacity: 1; transform: scale(1); }

.mega-brands { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }

.mega-foot {
  border-top: 1px solid var(--line); padding: 16px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}

.mega-foot span { font-size: 14px; color: var(--ink-soft); font-weight: 400; }

/* ============================================================
   HERO — dark brand accent zone
   ============================================================ */
.hero {
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(191,56,38,.20), transparent 55%),
    radial-gradient(90% 80% at 12% 100%, rgba(207,106,67,.16), transparent 60%),
    linear-gradient(180deg, var(--brand-bg-2), var(--brand-bg));
  color: var(--brand-text);
  position: relative; overflow: hidden;
}

.hero .wrap { position: relative; z-index: 2; max-width: 1600px; padding: 0 48px; }

@media (min-width: 921px){ .hero { min-height: 747px; display: flex; flex-direction: column; justify-content: center; } }

@media (max-width: 700px){ .nav > .wrap, .hero .wrap { padding: 0 22px; } }

.hero-grid {
  display: grid; grid-template-columns: 1fr 1.12fr; gap: 40px;
  align-items: center; padding: 30px 0 64px;
}

.breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--brand-muted); margin: 28px 0 26px; font-weight: 500; }

.breadcrumb a:hover { color: #fff; }

.breadcrumb .sep { opacity: .5; }

.breadcrumb .here { color: var(--brand-text); }

.brand-lockup { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; }

.brand-lockup .jura {
  font-size: 26px; font-weight: 700; letter-spacing: .14em; color: #fff;
}

.brand-lockup .rule { width: 1px; height: 34px; background: var(--brand-line); flex-shrink: 0; }

.brand-lockup .partner { font-size: 12px; line-height: 1.3; color: var(--brand-muted); font-weight: 500; letter-spacing: .02em; }

.hero h1 {
  color: #fff; font-size: clamp(38px, 5.4vw, 66px); line-height: 1.04;
  letter-spacing: -0.03em; margin-bottom: 22px;
}

.hero h1 em { font-style: normal; color: var(--terracotta-soft); }

.hero-sub { font-size: clamp(16px, 1.55vw, 19px); color: var(--brand-muted); max-width: 50ch; font-weight: 400; margin-bottom: 32px; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

.hero-trust {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 16px;
  padding-top: 26px; border-top: 1px solid var(--brand-line);
  font-size: 12.5px; color: var(--brand-text); font-weight: 500;
}

.hero-trust span { display: inline-flex; align-items: center; gap: 8px; position: relative; white-space: nowrap; }

.hero-trust span:not(:last-child)::after {
  content: ""; position: absolute; right: -8px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 15px; background: var(--brand-line);
}

.hero-trust .tick {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  background: rgba(226,165,131,.14); border: 1px solid rgba(226,165,131,.35);
  color: var(--terracotta-soft); display: grid; place-items: center;
}

@media (max-width: 1000px){
  .hero-trust { flex-wrap: wrap; gap: 12px 24px; }
  .hero-trust span:not(:last-child)::after { display: none; }
}

.hero-figure { position: relative; display: flex; flex-direction: column; align-items: center; }

.hero-copy .brand-lockup { display: flex; width: fit-content; max-width: 100%; align-items: center; margin-top: 30px; margin-bottom: 0; padding-top: 28px; border-top: 1px solid var(--brand-line); }

.lockup-rating { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

.lockup-rating .stars { display: inline-flex; gap: 2px; color: #f5b942; }

.lockup-rating .stars svg { width: 15px; height: 15px; }

.lockup-rating .rating-text { font-size: 12px; color: var(--brand-muted); font-weight: 500; white-space: nowrap; }

@media (max-width: 520px){ .lockup-rating { margin-top: 16px; } .brand-lockup .rule-push { display: none; } .hero-copy .brand-lockup { flex-wrap: wrap; } }

.hero-figure image-slot {
  width: 100%; height: 460px;
  border: 1px solid var(--brand-line);
  border-radius: 18px;
}

.hero-figure .glow {
  position: absolute; inset: auto 0 -30px 0; height: 120px;
  background: radial-gradient(60% 100% at 50% 0, rgba(191,56,38,.4), transparent 70%);
  filter: blur(24px); z-index: 0;
}

.hero-figure .float-stat {
  position: absolute; left: -22px; bottom: 34px; z-index: 3;
  background: rgba(255,255,255,.06); backdrop-filter: blur(8px);
  border: 1px solid var(--brand-line); border-radius: 14px;
  padding: 14px 18px; min-width: 150px;
}

.hero-figure .float-stat .num { font-size: 26px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }

.hero-figure .float-stat .lbl { font-size: 12px; color: var(--brand-muted); font-weight: 500; }

@media (max-width: 880px){
  .hero-grid { grid-template-columns: 1fr; gap: 30px; padding-bottom: 50px; }
  .hero-figure image-slot { height: 320px; }
  .hero-figure .float-stat { left: 12px; }
}

/* ---------- Trust marquee strip ---------- */
.marquee {
  background: var(--terracotta-deep); color: #fff; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.12);
}

.marquee-track {
  display: flex; gap: 0; width: max-content;
  animation: marquee 36s linear infinite;
}

.marquee-track span {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 34px; font-size: 14px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}

.marquee-track span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.6); }

@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce){ .marquee-track { animation: none; } }

/* ============================================================
   WHY BRAND — editorial
   ============================================================ */
.why { background: var(--paper); }

.why-head { max-width: 760px; margin-bottom: 56px; }

.why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}

.why-item { padding: 32px 26px; border-right: 1px solid var(--line); }

.why-item:last-child { border-right: none; }

.why-icon {
  width: 30px; height: 30px; color: var(--red); margin-bottom: 18px;
  transform-origin: center;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), color .3s ease;
}

.why-item:hover .why-icon { color: var(--ink); }

/* tailored hover motion per icon */
@media (prefers-reduced-motion: no-preference) {
  /* 1 · shield → reassuring pop */
  .why-item:nth-child(1):hover .why-icon { animation: why-pop .55s cubic-bezier(.34,1.56,.64,1); }
  /* 2 · grinder discs → spin */
  .why-item:nth-child(2):hover .why-icon { transform: rotate(180deg); transition-duration: .7s; }
  /* 3 · one-touch dots → press-bounce */
  .why-item:nth-child(3):hover .why-icon { animation: why-press .5s cubic-bezier(.34,1.56,.64,1); }
  /* 4 · refresh arrow → full rotation */
  .why-item:nth-child(4):hover .why-icon { transform: rotate(360deg); transition-duration: .8s; }
}

@keyframes why-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.18) rotate(-6deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes why-press {
  0% { transform: translateY(0); }
  40% { transform: translateY(-5px) scale(1.08); }
  70% { transform: translateY(2px) scale(.97); }
  100% { transform: translateY(0) scale(1); }
}

.why-item h3 { font-size: 18px; margin-bottom: 10px; }

.why-item p { font-size: 14.5px; color: var(--ink-soft); font-weight: 400; }

@media (max-width: 880px){
  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-item:nth-child(1), .why-item:nth-child(2) { border-bottom: 1px solid var(--line); }
  .why-item:nth-child(2) { border-right: none; }
}

@media (max-width: 540px){
  .why-grid { grid-template-columns: 1fr; }
  .why-item { border-right: none; border-bottom: 1px solid var(--line); }
  .why-item:last-child { border-bottom: none; }
}

/* ============================================================
   PRODUCT CATALOG
   ============================================================ */
.catalog { background: var(--cream); }

.catalog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 38px; }

.catalog-head .lead { margin-top: 14px; }

.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 38px; }

.filter-btn {
  padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line);
  transition: all .18s ease;
}

.filter-btn:hover { border-color: var(--terracotta); color: var(--ink); }

.filter-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.product-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}

@media (max-width: 960px){ .product-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 620px){ .product-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border-radius: var(--radius); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(42,34,30,.05), 0 26px 50px -30px rgba(42,34,30,.55); }

.card-media { position: relative; background: var(--cream-2); border-bottom: 1px solid var(--line-soft); }

.card-media image-slot { width: 100%; height: 230px; }

.card-range {
  position: absolute; top: 14px; left: 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); background: rgba(255,255,255,.9); border: 1px solid var(--line);
  padding: 5px 11px; border-radius: 999px;
}

.card-body { padding: 22px 22px 0; }

.card-body h3 { font-size: 21px; margin-bottom: 6px; }

.card-tagline { font-size: 14px; color: var(--ink-soft); font-weight: 400; margin-bottom: 18px; min-height: 42px; }

.spec-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; }

.spec-chip { background: var(--paper); padding: 11px 14px; }

.spec-chip .v { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }

.spec-chip .k { font-size: 11.5px; color: var(--ink-faint); font-weight: 500; }

.card-foot { padding: 18px 22px 22px; margin-top: auto; }

.card-actions { display: flex; gap: 10px; margin-bottom: 4px; }

.card-actions .btn { flex: 1; justify-content: center; }

.card-speclink {
  display: flex; justify-content: center; align-items: center; gap: 7px; width: 100%;
  margin: 14px auto 0; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  background: none; cursor: pointer; transition: color .15s ease;
}

.card-speclink svg { color: var(--terracotta-deep); transition: transform .2s ease; }

.card-speclink:hover { color: var(--red); }

.card-speclink:hover svg { transform: translateX(2px); }

.card-actions .btn-primary { box-shadow: 0 5px 14px -10px rgba(191,56,38,.5); }

.card-actions .btn-primary:hover { box-shadow: 0 7px 18px -10px rgba(191,56,38,.55); }

/* expandable full spec table */
.catalog-note { font-size: 12.5px; color: var(--ink-faint); margin-top: 30px; font-weight: 400; }

/* ---------- Spec drawer ---------- */
.spec-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(22,17,15,.5); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .3s ease;
}

.spec-overlay.show { opacity: 1; }

.spec-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 91;
  width: 460px; max-width: 92vw;
  background: var(--paper);
  display: flex; flex-direction: column;
  box-shadow: 24px 0 60px -30px rgba(42,34,30,.7);
  transform: translateX(-100%);
  transition: transform .36s cubic-bezier(.5,0,.2,1);
}

.spec-drawer.open { transform: none; }

.spec-drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 26px 28px 20px; border-bottom: 1px solid var(--line);
}

.sd-titles .sd-range {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--terracotta-deep);
}

.sd-titles h3 { font-size: 24px; margin-top: 6px; }

.sd-close {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
  background: var(--cream); border: 1px solid var(--line); color: var(--ink-soft);
  display: grid; place-items: center; transition: all .15s ease;
}

.sd-close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.spec-drawer-body { flex: 1; overflow-y: auto; padding: 24px 28px; }

.sd-media { background: var(--cream-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px; margin-bottom: 20px; }

.sd-media img { width: 100%; height: 200px; object-fit: contain; display: block; }

.sd-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }

.sd-price { font-size: 26px; font-weight: 600; color: var(--ink); }

.sd-vat { font-size: 13px; color: var(--ink-faint); }

.sd-finance { font-size: 13px; color: var(--ink-faint); font-weight: 500; }

.sd-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.sd-table tr { border-top: 1px solid var(--line-soft); }

.sd-table tr:first-child { border-top: none; }

.sd-table th { text-align: left; color: var(--ink-soft); font-weight: 500; padding: 12px 0; padding-right: 14px; vertical-align: top; }

.sd-table td { text-align: right; color: var(--ink); font-weight: 600; padding: 12px 0; vertical-align: top; }

.sd-note { font-size: 12.5px; color: var(--ink-faint); font-weight: 400; margin-top: 18px; line-height: 1.6; }

.spec-drawer-foot { display: flex; gap: 12px; padding: 18px 28px; border-top: 1px solid var(--line); background: var(--cream-2); }

.spec-drawer-foot .btn { flex: 1; justify-content: center; }

@media (max-width: 520px){ .spec-drawer-foot { flex-direction: column; } }

/* ============================================================
   BY SETTING — recommender
   ============================================================ */
.settings { background: var(--paper); }

.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 50px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

.setting { padding: 36px 32px; border-right: 1px solid var(--line); transition: background .22s ease; }

.setting:last-child { border-right: none; }

.setting .vol { font-size: 13px; font-weight: 600; color: var(--red); letter-spacing: .02em; margin-bottom: 8px; transition: color .22s ease; }

.setting h3 { font-size: 23px; margin-bottom: 12px; transition: color .22s ease; }

.setting p { font-size: 14.5px; color: var(--ink-soft); font-weight: 400; margin-bottom: 20px; transition: color .22s ease; }

.setting .models { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

.setting .models a {
  font-size: 13px; font-weight: 600; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
  transition: all .16s ease;
}

.setting .models a:hover { border-color: var(--red); color: var(--red); }

/* hover: whole box turns warm terracotta */
.setting:hover { background: var(--terracotta-deep); }

.setting:hover .vol { color: rgba(255,255,255,.85); }

.setting:hover h3 { color: #fff; }

.setting:hover p { color: rgba(255,255,255,.9); }

.setting:hover .models a { color: #fff; border-color: rgba(255,255,255,.45); }

.setting:hover .models a:hover { background: #fff; color: var(--terracotta-deep); border-color: #fff; }

@media (max-width: 820px){
  .settings-grid { grid-template-columns: 1fr; }
  .setting { border-right: none; border-bottom: 1px solid var(--line); }
  .setting:last-child { border-bottom: none; }
}

/* ---------- Finance light-touch band ---------- */
.finance {
  background: var(--terracotta-deep); color: #fff;
}

.finance .wrap { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 34px 28px; flex-wrap: wrap; }

.finance .txt { display: flex; align-items: center; gap: 20px; }

.finance .ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); display: grid; place-items: center; color: #fff; flex-shrink: 0; }

.finance h3 { font-size: 19px; margin-bottom: 3px; color: #fff; }

.finance p { font-size: 14px; color: rgba(255,255,255,.88); font-weight: 400; }

.finance .link-arrow { color: #fff; }

.finance .link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   SERVICE / SUPPORT
   ============================================================ */
.support { background: var(--cream); }

.support-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 54px; align-items: center; }

.support-figure img { width: 100%; height: 440px; object-fit: cover; border-radius: var(--radius); display: block; }

.support h2 { margin-bottom: 18px; }

.support .lead { margin-bottom: 30px; }

.support-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; }

.support-list .it { display: flex; gap: 14px; }

.support-list .it .ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--red); }

.support-list .it h4 { font-size: 16px; font-weight: 600; margin-bottom: 3px; }

.support-list .it p { font-size: 13.5px; color: var(--ink-soft); font-weight: 400; }

@media (max-width: 860px){ .support-grid { grid-template-columns: 1fr; gap: 32px; } .support-figure img { height: 300px; } }

@media (max-width: 480px){ .support-list { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq { background: var(--paper); }

.faq-wrap { max-width: 820px; margin: 0 auto; }

.faq-list { margin-top: 44px; border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 4px; text-align: left; font-size: 18px; font-weight: 600; color: var(--ink);
}

.faq-q:hover { color: var(--red); }

.faq-q .pm { width: 22px; height: 22px; flex-shrink: 0; position: relative; color: var(--red); }

.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }

.faq-q .pm::before { top: 10px; left: 2px; right: 2px; height: 2px; }

.faq-q .pm::after { left: 10px; top: 2px; bottom: 2px; width: 2px; transition: transform .25s ease; }

.faq-item.open .faq-q .pm::after { transform: rotate(90deg); opacity: 0; }

.faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }

.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }

.faq-a-inner { overflow: hidden; }

.faq-a { padding: 0 4px 26px; font-size: 15.5px; color: var(--ink-soft); font-weight: 400; max-width: 68ch; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--brand-bg);
  color: #fff; text-align: center;
}

@keyframes ctaZoom {
  from { transform: scale(1); }
  to { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce){
  .cta-band::before { animation: none; }
}

.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(22,17,15,.62), rgba(22,17,15,.68)),
    linear-gradient(110deg, rgba(135,29,21,.45), rgba(194,94,56,.28));
}

.cta-band .wrap { position: relative; z-index: 2; }

.finance-cta.btn-primary { background: #1a1512; color: #fff; box-shadow: 0 10px 26px -14px rgba(0,0,0,.6); }

.finance-cta.btn-primary:hover { background: #000; }

.cta-band h2 { color: #fff; max-width: 18ch; margin: 0 auto 18px; }

.cta-band p { color: rgba(255,255,255,.9); font-size: 17px; max-width: 50ch; margin: 0 auto 32px; font-weight: 400; }

.cta-band .hero-cta { justify-content: center; margin-bottom: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--terracotta-deep); color: #fff; }

.footer-news { padding: 60px 0 44px; text-align: center; }

.footer-news h3 { color: #fff; font-size: 30px; margin-bottom: 26px; font-weight: 600; }

.news-form { max-width: 760px; margin: 0 auto; }

.news-fields { display: flex; gap: 16px; margin-bottom: 16px; }

.news-fields input {
  flex: 1; min-width: 0; padding: 15px 18px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.55); background: transparent;
  color: #fff; font-family: inherit; font-size: 15px;
}

.news-fields input::placeholder { color: rgba(255,255,255,.85); }

.news-fields input:focus { outline: none; border-color: #fff; }

.news-row2 { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.news-consent { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; }

.news-consent input {
  appearance: none; -webkit-appearance: none; width: 17px; height: 17px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.7); border-radius: 3px; background: transparent;
  cursor: pointer; position: relative; transition: background .15s ease;
}

.news-consent input:checked { background: #fff; }

.news-consent input:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--terracotta-deep); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.news-subscribe { background: #fff; color: var(--terracotta-deep); border-radius: 999px; padding: 13px 32px; font-weight: 600; justify-content: center; }

.news-subscribe:hover { background: #f3ece6; }

@media (max-width: 600px){ .news-fields { flex-direction: column; } .news-row2 { flex-direction: column; align-items: stretch; gap: 14px; } .news-subscribe { width: 100%; } }

.footer-divider { height: 1px; background: rgba(255,255,255,.28); margin: 8px 0 40px; }

.footer-top { display: flex; justify-content: center; padding: 0 0 30px; }

.back-to-top {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  color: #fff; font-family: inherit; font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.back-to-top:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); transform: translateY(-2px); }

.back-to-top svg { transition: transform .18s ease; }

.back-to-top:hover svg { transform: translateY(-3px); }

.footer-main { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: 0 0 18px; }

.footer-logo-plain { flex-shrink: 0; display: inline-flex; }

.footer-logo-plain img { height: 58px; width: auto; display: block; }

.footer-legal { flex: 1; text-align: center; }

.footer-legal p { margin-bottom: 14px; }

.footer-legal p:last-child { margin-bottom: 0; }

.fl-fca { font-size: 14.5px; color: rgba(255,255,255,.95); line-height: 1.5; }

.fl-link { font-size: 14.5px; }

.fl-policies { font-size: 14.5px; }

.fl-policies span { opacity: .7; margin: 0 4px; }

.fl-copy { font-size: 13.5px; color: rgba(255,255,255,.92); }

.footer-legal a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.footer-legal a:hover { opacity: .82; }

.footer-socials { display: flex; gap: 16px; flex-shrink: 0; }

.footer-socials a { color: #fff; display: grid; place-items: center; transition: opacity .15s ease; }

.footer-socials a:hover { opacity: .75; }

@media (max-width: 760px){
  .footer-main { flex-direction: column; gap: 26px; text-align: center; }
}

/* ---------- Quote form drawer ---------- */
.quote-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(22,17,15,.5); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .3s ease;
}

.quote-overlay.show { opacity: 1; }

.quote-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 96;
  width: 540px; max-width: 94vw;
  background: var(--cream);
  display: flex; flex-direction: column;
  box-shadow: -24px 0 60px -30px rgba(42,34,30,.7);
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.5,0,.2,1);
}

.quote-drawer.open { transform: none; }

.qd-close {
  position: absolute; top: 20px; right: 22px; z-index: 2;
  width: 38px; height: 38px; border-radius: 10px;
  background: transparent; color: var(--ink);
  display: grid; place-items: center; transition: all .15s ease;
}

.qd-close:hover { background: rgba(42,34,30,.08); }

.quote-drawer-body { flex: 1; overflow-y: auto; padding: 56px 40px 40px; }

.qd-title { font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 16px; }

.qd-sub { font-size: 15px; color: var(--ink-soft); font-weight: 400; line-height: 1.6; margin-bottom: 28px; }

.qd-form { display: flex; flex-direction: column; gap: 18px; }

.qd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.qd-field { display: flex; flex-direction: column; gap: 8px; }

.qd-field label { font-size: 14px; font-weight: 600; color: var(--ink); }

.qd-field .req { color: var(--red); }

.qd-field input, .qd-field select {
  width: 100%; padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-family: inherit; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease;
}

.qd-field select { appearance: none; -webkit-appearance: none; color: var(--ink-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23756860' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; cursor: pointer;
}

.qd-field input::placeholder { color: var(--ink-faint); }

.qd-field input:focus, .qd-field select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(191,56,38,.12); }

.qd-submit {
  margin-top: 6px; width: 100%; padding: 17px; border-radius: 10px;
  background: var(--burgundy); color: #fff; font-weight: 600; font-size: 16px; letter-spacing: -0.01em;
  transition: background .2s ease;
}

.qd-submit:hover { background: #6f1610; }

.qd-ticks { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }

.qd-ticks li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); font-weight: 500; }

.qd-ticks svg { color: var(--red); flex-shrink: 0; }

@media (max-width: 460px){ .quote-drawer-body { padding: 56px 24px 32px; } .qd-row { grid-template-columns: 1fr; } .qd-title { font-size: 26px; } }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }

.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; } }

/* ============================================================
   MOBILE NAV — hamburger + slide-down menu
   ============================================================ */
.nav-burger { display: none; }

.mobile-menu { display: none; }

.mm-links { display: flex; flex-direction: column; }

.mm-links a {
  font-size: 20px; font-weight: 600; color: var(--ink);
  padding: 16px 4px; border-bottom: 1px solid var(--line);
  transition: color .15s ease;
}

.mm-links a:hover, .mm-links a:active { color: var(--red); }

.mm-group { display: flex; flex-direction: column; }

.mm-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: inherit; font-size: 20px; font-weight: 600; color: var(--ink);
  padding: 16px 4px; border-bottom: 1px solid var(--line);
  background: none; cursor: pointer; text-align: left;
}

.mm-chev { flex-shrink: 0; color: var(--red); transition: transform .25s ease; }

.mm-toggle[aria-expanded="true"] .mm-chev { transform: rotate(180deg); }

.mm-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }

.mm-toggle[aria-expanded="true"] + .mm-sub { grid-template-rows: 1fr; }

.mm-sub-inner { overflow: hidden; }

.mm-sub a {
  display: block; font-size: 16px; font-weight: 500; color: var(--ink-soft);
  padding: 13px 6px 13px 18px; border-bottom: 1px solid var(--line-soft);
  transition: color .15s ease;
}

.mm-sub a:hover, .mm-sub a:active { color: var(--red); }

/* nested level-2 group accordions */
.mm-sub .mm-group-2 { padding-left: 14px; }

.mm-toggle-2 {
  font-size: 16px; font-weight: 600; color: var(--ink);
  padding: 13px 6px; border-bottom: 1px solid var(--line-soft);
}

.mm-toggle-2 .mm-chev { width: 14px; height: 14px; }

.mm-sub-2 a { font-size: 15px; padding-left: 14px; }

.mm-actions { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }

.mm-actions .btn { width: 100%; justify-content: center; padding: 15px 24px; font-size: 16px; }

@media (max-width: 920px){
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; flex-shrink: 0;
    background: var(--cream); border: 1px solid var(--line); border-radius: 11px;
  }
  .nav-burger span { display: block; width: 19px; height: 2px; margin: 0 auto; border-radius: 2px; background: var(--ink); transition: transform .26s ease, opacity .2s ease; }
  .nav-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2){ opacity: 0; }
  .nav-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 45;
    background: var(--cream-2);
    padding: 100px 28px 40px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .26s ease, transform .26s ease, visibility .26s;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
}

@media (max-width: 560px){ .nav-quote { display: none; } }

/* ---------- Mobile: centre finance-band CTA ---------- */
@media (max-width: 720px){
  .finance .wrap { flex-direction: column; align-items: center; text-align: center; }
  .finance .txt { flex-direction: column; align-items: center; text-align: center; }
  .finance .finance-cta { align-self: center; }
}

/* ---------- Mobile: quote drawer X must not stay pinned (scrolls with content) ---------- */
@media (max-width: 720px){
  .quote-drawer { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .quote-drawer-body { flex: 0 0 auto; overflow: visible; }
}

/* Downloads tab (product details) */
.clb-downloads{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem;max-width:760px}
.clb-download{display:flex;justify-content:space-between;align-items:center;gap:1.25rem;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper)}
.clb-download__text strong{display:block;color:var(--ink)}
.clb-download__text p{margin:.3rem 0 0;font-size:.9em;color:var(--ink-soft)}
.clb-download__btn{white-space:nowrap}
@media(max-width:600px){.clb-download{flex-direction:column;align-items:flex-start;gap:.6rem}}

/* Gallery lightbox */
.lb{position:fixed;inset:0;z-index:9999;background:rgba(22,17,15,.92);display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb-stage{margin:0;max-width:min(1100px,88vw);max-height:86vh;display:flex;align-items:center;justify-content:center}
.lb-img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:var(--radius-sm)}
.lb-close,.lb-prev,.lb-next{position:absolute;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(247,236,226,.25);border-radius:50%;background:rgba(42,34,30,.65);color:var(--cream);cursor:pointer;transition:background .15s ease}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(42,34,30,.95)}
.lb-close:focus-visible,.lb-prev:focus-visible,.lb-next:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.lb-close{top:22px;right:22px}
.lb-prev{left:22px;top:50%;transform:translateY(-50%)}
.lb-next{right:22px;top:50%;transform:translateY(-50%)}
@media(max-width:600px){.lb-prev{left:8px}.lb-next{right:8px}.lb-close{top:10px;right:10px}}

/* Review block: full gold stars and rating bars (Google review yellow) */
.rev-summary .rev-stars, .review .r-stars { color: #fbbc04; }
.rev-bars .rev-bar .fill { background: #fbbc04; }

/* Product imagery sits on white: source photos have white backgrounds and
   cannot all be cut out, so the containers match them instead of cream. */
.card-media { background: var(--paper); }
.product-grid .card .card-media, .plist .card .card-media { background: var(--paper); }
.spec-drawer .sd-media { background: var(--paper); }
.related-grid .rel-card .rel-media { background: var(--paper); }
.cb-grid .cb-tile .cb-media.is-photo { background: var(--paper); }

/* Downloads tab: breathing room between the heading and the download cards */
.tab-panel .clb-downloads { margin-top: 28px; }

/* Rating bar fill: fully self-contained so it renders gold regardless of
   page stylesheet load order or caching. */
.rev-bar .fill {
  display: block;
  height: 100% !important;
  border-radius: 999px;
  background: #fbbc04 !important;
}

/* ============================================================
   Footer newsletter: bridge the Gravity Forms embed to the
   prototype design (placeholder inputs, consent + button row)
   ============================================================ */
.footer-news .gform_wrapper { max-width: 860px; margin: 0 auto; text-align: left; }
/* One line: Name | Email | Subscribe, with the consent terms underneath.
   Explicit cell placement with !important beats gravity-theme's own
   full-width .gfield grid rules. */
.footer-news form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px 16px; align-items: center; }
/* !important: gravity-theme declares its own higher-specificity grid on
   .gform_fields; without contents the fields collapse into its 12-col grid. */
.footer-news .gform-body, .footer-news .gform_fields { display: contents !important; }
.footer-news .gfield { margin: 0; }
.footer-news .gfield--type-text { grid-column: 1 !important; grid-row: 1; }
.footer-news .gfield--type-email { grid-column: 2 !important; grid-row: 1; }
.footer-news .gfield_label, .footer-news legend.gfield_label,
.footer-news .gform_required_legend, .footer-news .gfield_required { display: none; }
.footer-news .ginput_container input[type=text],
.footer-news .ginput_container input[type=email] {
  width: 100%; padding: 15px 18px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.55); background: transparent;
  color: #fff; font-family: inherit; font-size: 15px; box-sizing: border-box;
}
.footer-news .ginput_container input::placeholder { color: rgba(255,255,255,.85); }
.footer-news .ginput_container input:focus { outline: none; border-color: #fff; }
.footer-news fieldset.gfield--type-checkbox { grid-column: 1 / -1 !important; grid-row: 2; justify-self: start; border: 0; padding: 0; margin: 0; }
.footer-news .gchoice { display: flex; align-items: center; gap: 10px; }
.footer-news .gchoice label {
  color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; margin: 0; line-height: 1.3;
}
.footer-news .gfield-choice-input {
  appearance: none; -webkit-appearance: none; width: 17px; height: 17px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.7); border-radius: 3px; background: transparent;
  cursor: pointer; position: relative; transition: background .15s ease; margin: 0;
}
.footer-news .gfield-choice-input:checked { background: #fff; }
.footer-news .gfield-choice-input:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--terracotta-deep); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.footer-news .gform_footer { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; padding: 0; }
.footer-news .gform_button {
  background: #fff; color: var(--terracotta-deep); border: 0; border-radius: 999px;
  padding: 13px 32px; font-weight: 600; font-size: 15px; font-family: inherit; cursor: pointer;
  transition: background .15s ease;
}
.footer-news .gform_button:hover { background: #f3ece6; }
.footer-news .gform_validation_errors { grid-column: 1 / -1; background: none; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; padding: 10px 14px; box-shadow: none; }
.footer-news .gform_validation_errors h2, .footer-news .validation_message,
.footer-news .gfield_validation_message { color: #ffe1d6; font-size: 13px; background: none; border: 0; padding: 0; }
.footer-news .gfield_validation_message { margin-top: 6px; }
.footer-news .gform_confirmation_message { color: #fff; font-weight: 600; font-size: 17px; text-align: center; }
.footer-news .gform_ajax_spinner { filter: invert(1); margin-left: 10px; }
@media (max-width: 720px) {
  .footer-news form { grid-template-columns: 1fr; }
  .footer-news .gfield--type-text { grid-column: 1 !important; grid-row: auto; }
  .footer-news .gfield--type-email { grid-column: 1 !important; grid-row: auto; }
  .footer-news fieldset.gfield--type-checkbox { grid-column: 1 !important; grid-row: auto; }
  .footer-news .gform_footer { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .footer-news .gform_button { width: 100%; }
}

/* ============================================================
   Quote drawer: bridge the Gravity Forms embed to the prototype
   qd-form design (visible labels, stacked fields, name+email row)
   ============================================================ */
.quote-drawer .gform_wrapper { margin-top: 4px; }
.quote-drawer form { display: block; }
.quote-drawer .gform-body { display: block !important; }
.quote-drawer .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px 14px !important;
}
.quote-drawer .gfield { margin: 0; grid-column: 1 / -1 !important; }
.quote-drawer .gfield--type-text { grid-column: 1 !important; }
.quote-drawer .gfield--type-email { grid-column: 2 !important; }
.quote-drawer .gfield_label {
  display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 8px;
}
.quote-drawer .gfield_required_text { display: none !important; }
.quote-drawer .gfield_required:not(.gfield_required_text)::before { content: "*"; color: var(--red); margin-left: 3px; }
.quote-drawer .ginput_container input[type=text],
.quote-drawer .ginput_container input[type=email],
.quote-drawer .ginput_container input[type=tel],
.quote-drawer .ginput_container select {
  width: 100% !important; padding: 13px 14px; border-radius: 10px; box-sizing: border-box;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 15px;
}
.quote-drawer .ginput_container select { appearance: none; -webkit-appearance: none; color: var(--ink-soft);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23756860' stroke-width='2.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.quote-drawer .ginput_container input:focus, .quote-drawer .ginput_container select:focus {
  outline: none; border-color: var(--terracotta);
}
.quote-drawer .ginput_container input::placeholder { color: var(--ink-faint); }
.quote-drawer .gform_footer { margin: 18px 0 0; padding: 0; }
.quote-drawer .gform_button {
  width: 100%; background: var(--terracotta-deep); color: #fff; border: 0; border-radius: 999px;
  padding: 15px 24px; font-weight: 600; font-size: 15.5px; font-family: inherit; cursor: pointer;
  transition: background .15s ease;
}
.quote-drawer .gform_button:hover { background: var(--terracotta); }
.quote-drawer .gform_validation_errors { grid-column: 1 / -1; border: 1px solid var(--red); border-radius: 8px; padding: 10px 14px; box-shadow: none; background: #fdf3f1; }
.quote-drawer .gform_validation_errors h2 { color: var(--red); font-size: 13px; margin: 0; }
.quote-drawer .gfield_validation_message { color: var(--red); font-size: 12.5px; background: none; border: 0; padding: 4px 0 0; }
.quote-drawer .gform_confirmation_message { color: var(--ink); font-weight: 600; font-size: 16px; padding: 20px 0; }
.quote-drawer .gform_ajax_spinner { margin-left: 10px; }
@media (max-width: 560px) {
  .quote-drawer .gform-body, .quote-drawer .gform_fields { grid-template-columns: 1fr; }
  .quote-drawer .gfield--type-text, .quote-drawer .gfield--type-email { grid-column: 1 !important; }
}

/* Product gallery: the image always fills the bounding box (object-fit
   keeps aspect); intrinsic-size rendering left small photos floating. */
.gallery .gallery-main img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Listing facet chips */
.listing-facets { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 26px; }
.facet-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.facet-label { font-size: 12.5px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; width: 92px; flex-shrink: 0; }
.facet-group .filter-btn {
  padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
  cursor: pointer; transition: all .15s ease;
}
.facet-group .filter-btn:hover { border-color: var(--ink); color: var(--ink); }
.facet-group .filter-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (max-width: 640px) { .facet-label { width: 100%; } }

/* ============================================================
   Gravity Forms: theme-wide base layer (light contexts).
   Mirrors the prototype ct-field design so any embedded form is
   styled by default. The footer newsletter and quote drawer keep
   their own scoped overrides, which win on specificity.
   ============================================================ */
.gform_wrapper.gravity-theme .gform_fields {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}
.gform_wrapper.gravity-theme .gfield { grid-column: 1 / -1 !important; }
.gform_wrapper.gravity-theme .gfield.clb-half { grid-column: span 1 !important; }
@media (max-width: 640px) {
  .gform_wrapper.gravity-theme .gfield.clb-half { grid-column: 1 / -1 !important; }
}

.gform_wrapper.gravity-theme .gfield_label {
  font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; display: inline-block;
}
.gform_wrapper.gravity-theme .gfield_required_text { display: none !important; }
.gform_wrapper.gravity-theme .gfield_required::before { content: "*"; color: var(--red); margin-left: 3px; }

.gform_wrapper.gravity-theme .ginput_container input[type=text],
.gform_wrapper.gravity-theme .ginput_container input[type=email],
.gform_wrapper.gravity-theme .ginput_container input[type=tel],
.gform_wrapper.gravity-theme .ginput_container input[type=number],
.gform_wrapper.gravity-theme .ginput_container select,
.gform_wrapper.gravity-theme .ginput_container textarea {
  width: 100% !important; padding: 14px 16px; border-radius: 10px; box-sizing: border-box;
  border: 1px solid var(--line); background: var(--cream-2); color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 500;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.gform_wrapper.gravity-theme .ginput_container textarea { resize: vertical; min-height: 132px; line-height: 1.55; }
.gform_wrapper.gravity-theme .ginput_container input::placeholder,
.gform_wrapper.gravity-theme .ginput_container textarea::placeholder { color: var(--ink-faint); font-weight: 400; }
.gform_wrapper.gravity-theme .ginput_container select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23756860' stroke-width='2.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
.gform_wrapper.gravity-theme .ginput_container input:focus,
.gform_wrapper.gravity-theme .ginput_container select:focus,
.gform_wrapper.gravity-theme .ginput_container textarea:focus {
  outline: none; border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(191,56,38,.12);
}

.gform_wrapper.gravity-theme .gfield-choice-input {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; margin: 0 10px 0 0;
  cursor: pointer; position: relative; transition: background .15s ease, border-color .15s ease;
}
.gform_wrapper.gravity-theme .gfield-choice-input:checked { background: var(--red); border-color: var(--red); }
.gform_wrapper.gravity-theme .gfield-choice-input:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.gform_wrapper.gravity-theme .gchoice { display: flex; align-items: center; }
.gform_wrapper.gravity-theme .gchoice label { color: var(--ink-soft); font-size: 13.5px; font-weight: 500; cursor: pointer; margin: 0; }

.gform_wrapper.gravity-theme .gform_footer { margin: 24px 0 0; padding: 0; }
.gform_wrapper.gravity-theme .gform_button {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 16px 30px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--red); color: #fff; font-weight: 600; font-size: 15.5px;
  letter-spacing: -0.01em; font-family: inherit;
  box-shadow: 0 10px 26px -14px rgba(191,56,38,.85);
  transition: background .2s ease, transform .15s ease;
}
.gform_wrapper.gravity-theme .gform_button:hover { background: var(--red-dark); }
.gform_wrapper.gravity-theme .gform_button:active { transform: translateY(1px); }
.gform_wrapper.gravity-theme .gform_button:disabled { background: var(--terracotta-deep); cursor: default; }

.gform_wrapper.gravity-theme .gform_validation_errors {
  grid-column: 1 / -1; background: #fdf3f1; border: 1px solid var(--red);
  border-radius: 10px; padding: 12px 16px; box-shadow: none; margin-bottom: 4px;
}
.gform_wrapper.gravity-theme .gform_validation_errors h2 { color: var(--red); font-size: 13.5px; margin: 0; }
.gform_wrapper.gravity-theme .gfield_validation_message {
  color: var(--red); font-size: 12.5px; background: none; border: 0; padding: 5px 0 0;
}
.gform_confirmation_message { color: var(--ink); font-weight: 600; font-size: 17px; padding: 18px 0; }

/* ============================================================
   Footer newsletter: re-assert the dark-band design over the
   theme-wide GF base layer above (its .gform_wrapper.gravity-theme
   selectors out-specify the original .footer-news rules).
   ============================================================ */
.footer-news .gform_wrapper.gravity-theme .gchoice label,
.footer-news .gform_wrapper.gravity-theme .gform-field-label {
  color: #fff; font-size: 14px; font-weight: 500;
}
.footer-news .gform_wrapper.gravity-theme .gchoice label a { color: #fff; text-decoration: underline; }
.footer-news .gform_wrapper.gravity-theme .gfield-choice-input {
  width: 17px; height: 17px; border: 1px solid rgba(255,255,255,.7);
  border-radius: 3px; background: transparent; margin: 0;
}
.footer-news .gform_wrapper.gravity-theme .gfield-choice-input:checked { background: #fff; border-color: #fff; }
.footer-news .gform_wrapper.gravity-theme .gfield-choice-input:checked::after {
  left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--terracotta-deep); border-width: 0 2px 2px 0;
}
.footer-news .gform_wrapper.gravity-theme .gchoice { gap: 10px; }
.footer-news .gform_wrapper.gravity-theme .ginput_container input[type=text],
.footer-news .gform_wrapper.gravity-theme .ginput_container input[type=email] {
  width: 100% !important; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
  border-radius: 10px; color: #fff; padding: 14px 18px; font-size: 15px; font-family: inherit;
}
.footer-news .gform_wrapper.gravity-theme .ginput_container input::placeholder { color: rgba(255,255,255,.85); }
.footer-news .gform_wrapper.gravity-theme .ginput_container input:focus { outline: none; border-color: #fff; box-shadow: none; }
.footer-news .gform_wrapper.gravity-theme .gform_footer { margin: 0; padding: 0; }
.footer-news .gform_wrapper.gravity-theme .gform_button {
  background: #fff; color: var(--terracotta-deep); box-shadow: none;
  padding: 13px 32px; font-size: 15px;
}
.footer-news .gform_wrapper.gravity-theme .gform_button:hover { background: #f3ece6; }
.footer-news .gform_wrapper.gravity-theme .gfield_validation_message { color: #ffe1d6; font-size: 13px; }

/* Footer newsletter grid placement: the GF base layer's
   ".gform_wrapper.gravity-theme .gfield { grid-column: 1 / -1 !important }"
   out-specifies the original .footer-news cell rules and stacked both
   inputs into the same row. Re-assert the prototype layout:
   row 1 = Name | Email, row 2 = consent (left) | Subscribe (right). */
.footer-news .gform_wrapper.gravity-theme form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: center; }
.footer-news .gform_wrapper.gravity-theme .gform-body,
.footer-news .gform_wrapper.gravity-theme .gform_fields { display: contents !important; }
.footer-news .gform_wrapper.gravity-theme .gfield--type-text { grid-column: 1 !important; grid-row: 1; }
.footer-news .gform_wrapper.gravity-theme .gfield--type-email { grid-column: 2 !important; grid-row: 1; }
.footer-news .gform_wrapper.gravity-theme fieldset.gfield--type-checkbox { grid-column: 1 !important; grid-row: 2; justify-self: start; border: 0; padding: 0; margin: 0; }
.footer-news .gform_wrapper.gravity-theme .gform_footer { grid-column: 2; grid-row: 2; justify-self: end; }
@media (max-width: 720px) {
  .footer-news .gform_wrapper.gravity-theme form { grid-template-columns: 1fr; }
  .footer-news .gform_wrapper.gravity-theme .gfield--type-text,
  .footer-news .gform_wrapper.gravity-theme .gfield--type-email,
  .footer-news .gform_wrapper.gravity-theme fieldset.gfield--type-checkbox { grid-column: 1 !important; grid-row: auto; }
  .footer-news .gform_wrapper.gravity-theme .gform_footer { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .footer-news .gform_wrapper.gravity-theme .gform_button { width: 100%; }
}

/* ============================================================
   Article prose tables: design-system treatment for in-content
   comparison tables (echoes the product spec-table styling).
   ============================================================ */
.art-prose .clb-table-scroll { overflow-x: auto; margin: 28px 0 34px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.art-prose .clb-table-scroll > table { margin: 0; border: 0; border-radius: 0; }
.art-prose table {
  width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55;
  background: #fff;
}
.art-prose table th, .art-prose table td {
  text-align: left; padding: 14px 18px; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.art-prose table thead th,
.art-prose table tr:first-child th {
  background: var(--paper); color: var(--ink);
  font-weight: 650; font-size: 13.5px; letter-spacing: .02em; text-transform: uppercase;
  border-bottom: 2px solid var(--line);
}
.art-prose table td { color: var(--ink-soft); font-weight: 450; }
.art-prose table td:first-child { color: var(--ink); font-weight: 600; }
.art-prose table tr:last-child td { border-bottom: 0; }
.art-prose table tbody tr:hover td { background: var(--paper); }
@media (max-width: 700px) {
  .art-prose table th, .art-prose table td { padding: 11px 13px; }
}

/* Brand-tile text wordmark fallback (brands supplied without a logo asset,
   e.g. WMF). Sits in place of the .bt-logo / cell img, centred in the tile. */
.brand-tile .bt-wordmark,
.ab-brand-cell .bt-wordmark {
  display: flex; align-items: center; justify-content: center; flex: 1;
  font-weight: 800; font-size: 30px; letter-spacing: .06em;
  color: var(--ink); line-height: 1;
}
.brand-tile:hover .bt-wordmark,
.ab-brand-cell:hover .bt-wordmark { color: var(--terracotta-deep); }

/* ============================================================
   Gravity Forms: Cloudflare Turnstile field. The widget is a
   fixed-size light-theme iframe (set in the add-on). We hide the
   redundant field label, sit it left-aligned to match the inputs,
   and give it breathing room above the submit button. Works in
   every context (contact page, quote drawer) via the field type.
   ============================================================ */
.gfield--type-turnstile { grid-column: 1 / -1 !important; margin-top: 4px; }
.gfield--type-turnstile > .gfield_label,
.gfield--type-turnstile .gfield_required { display: none !important; }
.gfield--type-turnstile .ginput_container,
.gfield--type-turnstile .ginput_container_turnstile { margin: 0; }
.gfield--type-turnstile .cf-turnstile {
  display: flex; justify-content: flex-start; min-height: 65px;
}
.gfield--type-turnstile .cf-turnstile iframe { max-width: 100%; }
.quote-drawer .gfield--type-turnstile { margin-top: 2px; }
/* Very narrow viewports: scale the 300px widget down so it never overflows */
@media (max-width: 360px) {
  .gfield--type-turnstile .cf-turnstile { transform: scale(.92); transform-origin: left center; }
}