/* Kalender Brass - Brass on Paper design system */
:root{
  --kb-brass:#B8912F; --kb-brass-deep:#8C6C1F; --kb-ink:#17181C; --kb-paper:#FAF8F3;
  --kb-card:#FFFFFF; --kb-warm:#6E675C; --kb-rule:#E3DFD6; --kb-maroon:#6E1F2B;
  --kb-display:Newsreader,Georgia,"Times New Roman",serif;
  --kb-body:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --kb-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
body{background:var(--kb-paper);color:var(--kb-ink);font-family:var(--kb-body);
  -webkit-font-smoothing:antialiased}
::selection{background:var(--kb-brass);color:#fff}
:focus-visible{outline:2px solid var(--kb-brass);outline-offset:3px}

.kb-eyebrow{font-family:var(--kb-mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--kb-warm);display:block}

/* ---- buttons ---- */
.kb-btn{display:inline-block;background:var(--kb-brass);color:#fff!important;font-family:var(--kb-body);
  font-weight:600;font-size:15px;letter-spacing:.03em;padding:14px 28px;border-radius:2px;
  text-decoration:none!important;border:1px solid var(--kb-brass);transition:background .15s,border-color .15s}
.kb-btn:hover{background:var(--kb-brass-deep);border-color:var(--kb-brass-deep)}
.kb-btn--ghost{background:transparent;color:var(--kb-ink)!important;border:1px solid var(--kb-rule);
  padding:10px 20px;font-size:14px}
.kb-btn--ghost:hover{background:var(--kb-ink);color:#fff!important;border-color:var(--kb-ink)}

/* ---- header ---- */
.kb-header{border-bottom:1px solid var(--kb-rule);background:var(--kb-paper)}
.kb-header .wp-block-site-title a{font-family:var(--kb-display);font-size:23px;font-weight:600;
  letter-spacing:-.01em;color:var(--kb-ink);text-decoration:none}
.kb-header .wp-block-navigation{font-size:15px;font-weight:500}
.kb-header .wp-block-navigation a{text-decoration:none;color:var(--kb-ink)}
.kb-header .wp-block-navigation a:hover{color:var(--kb-brass-deep)}

/* ---- hero ---- */
.kb-hero{padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,80px);border-bottom:1px solid var(--kb-rule)}
.kb-hero h1{font-size:clamp(2.4rem,5.4vw,4.2rem);line-height:1.04;letter-spacing:-.025em;
  margin:.4em 0 .3em;text-wrap:balance;max-width:16ch}
.kb-hero .kb-lede{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--kb-warm);max-width:52ch;line-height:1.5;margin:0 0 2em}
.kb-rule-brass{width:54px;height:3px;background:var(--kb-brass);border:0;margin:0}

/* ---- spec table ---- */
.kb-spec{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px}
.kb-spec caption{text-align:left;margin-bottom:10px}
.kb-spec th,.kb-spec td{text-align:left;padding:11px 0;border-bottom:1px solid var(--kb-rule);vertical-align:top}
.kb-spec th{font-family:var(--kb-body);font-weight:500;color:var(--kb-warm);width:40%;font-size:14px}
.kb-spec td{font-family:var(--kb-mono);font-size:14px;font-variant-numeric:tabular-nums}

/* ---- product grid ---- */
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:34px 28px;margin:0;padding:0;list-style:none}
.kb-card{background:var(--kb-card);border:1px solid var(--kb-rule);display:flex;flex-direction:column}
.kb-card img{width:100%;height:auto;display:block;background:var(--kb-paper)}
.kb-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.kb-card__body h3{font-family:var(--kb-display);font-size:20px;font-weight:600;margin:0;line-height:1.2}
.kb-card__body h3 a{color:var(--kb-ink);text-decoration:none}
.kb-card__body h3 a:hover{color:var(--kb-brass-deep)}
.kb-card__spec{font-family:var(--kb-mono);font-size:12.5px;color:var(--kb-warm);margin:0;line-height:1.5}
.kb-card__foot{margin-top:auto;padding-top:14px}

/* ---- WooCommerce loop mapped onto our card ---- */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:34px 28px;margin:0;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;
  background:var(--kb-card);border:1px solid var(--kb-rule);padding:0 0 22px;text-align:left}
.woocommerce ul.products li.product a img{margin:0 0 16px;width:100%}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--kb-display)!important;
  font-size:20px!important;font-weight:600;padding:0 22px!important;margin:0 0 8px;color:var(--kb-ink)}
.woocommerce ul.products li.product .kb-btn--ghost{margin:6px 22px 0}
.woocommerce ul.products li.product .price,.woocommerce .product .price{display:none!important}

/* ---- single product ---- */
.woocommerce div.product div.images{margin-bottom:32px}
.woocommerce div.product .product_title{font-family:var(--kb-display);font-size:clamp(2rem,3.6vw,2.9rem);
  letter-spacing:-.02em;line-height:1.1;margin:0 0 14px}
.woocommerce div.product .woocommerce-product-details__short-description{font-size:17px;color:var(--kb-warm);max-width:54ch}
.kb-quote-cta{margin-top:30px;padding-top:26px;border-top:1px solid var(--kb-rule)}
.kb-note{font-size:14px;color:var(--kb-warm);margin:14px 0 0;max-width:46ch;line-height:1.5}

/* ---- brand strip ---- */
.kb-brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px 40px;align-items:center}
.kb-brands img{width:100%;height:auto;opacity:.72;filter:grayscale(1);transition:opacity .2s,filter .2s}
.kb-brands img:hover{opacity:1;filter:none}
.kb-disclaimer{font-family:var(--kb-mono);font-size:11.5px;color:var(--kb-warm);letter-spacing:.02em;
  border-top:1px solid var(--kb-rule);padding-top:14px;margin-top:34px}

/* ---- steps ---- */
.kb-steps{counter-reset:kb;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:34px;list-style:none;padding:0;margin:0}
.kb-steps li{counter-increment:kb;padding-top:18px;border-top:2px solid var(--kb-ink)}
.kb-steps li::before{content:counter(kb,decimal-leading-zero);font-family:var(--kb-mono);font-size:12px;
  font-weight:600;color:var(--kb-brass);display:block;margin-bottom:10px;letter-spacing:.08em}
.kb-steps h3{font-family:var(--kb-display);font-size:19px;margin:0 0 7px;font-weight:600}
.kb-steps p{font-size:15px;color:var(--kb-warm);margin:0;line-height:1.55}

/* ---- footer ---- */
.kb-footer{border-top:1px solid var(--kb-rule);background:var(--kb-paper);font-size:14.5px;color:var(--kb-warm)}
.kb-footer a{color:var(--kb-warm);text-decoration:none}
.kb-footer a:hover{color:var(--kb-ink);text-decoration:underline}
.kb-footer h4{font-family:var(--kb-body);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--kb-ink);margin:0 0 14px}

/* ---- demo banner ---- */
.kb-demo-bar{background:var(--kb-ink);color:#fff;font-family:var(--kb-mono);font-size:12px;
  letter-spacing:.05em;text-align:center;padding:9px 18px;line-height:1.5}
.kb-demo-bar b{color:var(--kb-brass);font-weight:600}

@media (max-width:781px){
  .kb-hero h1{max-width:none}
  .kb-spec th{width:46%}
}

/* ---- layout corrections ----
   Raw-HTML children of a constrained group get clamped to contentSize and
   auto-centred. These sections use flow layout, so widths are owned here. */
.kb-intro{color:var(--kb-warm);max-width:56ch;font-size:1.05rem;margin-inline-start:0}
.kb-grid,.kb-brands,.kb-steps{width:100%;max-width:none;margin-inline-start:0}

/* Mockups come in three aspect ratios; normalise the card media box so the
   grid reads as one object instead of a ragged stack. */
.kb-card img{aspect-ratio:4/5;object-fit:contain;padding:18px;background:var(--kb-paper)}
.kb-brands img{aspect-ratio:auto}

/* 6 mockups and 8 logos both want counts that divide cleanly. */
.kb-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.kb-brands{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 44px}
@media (max-width:900px){.kb-brands{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* No cart exists in quote mode, so WooCommerce's injected header blocks go. */
.wp-block-woocommerce-mini-cart,
.wp-block-woocommerce-customer-account,
.wc-block-mini-cart,
.woocommerce-breadcrumb{display:none!important}