/* ============================================================
   RESET NEUTRALISER  --  must stay at the top of this file
   ------------------------------------------------------------
   Hello Elementor's reset.css gives every bare button a #c36
   border, #c36 text and .5rem 1rem of padding. These are the same
   selectors at the same weight, and position is what makes them
   work: later than the parent reset, so they replace it, and
   earlier than every component below, so a single class such as
   .bz-btn -- which weighs exactly the same -- still wins on order.
   Moving this block further down the cascade breaks every themed
   button on the site.
   ============================================================ */
[type=button],[type=reset],[type=submit],button{
  padding:0;
  border:0;
  border-radius:0;
  color:inherit;
}

/*  Bookzilla design system  —  ported from the Bookzilla HTML storefront
    Token values are taken verbatim from the source stylesheet so the
    WordPress build and the HTML build stay visually identical.          */

:root{
  --bz-orange:#F28C28; --bz-orange-600:#E07A15; --bz-orange-700:#C2650A;
  --bz-orange-200:#FAD3A8; --bz-orange-100:#FCE6CC; --bz-orange-50:#FEF5EB;
  --bz-navy:#1B2A4A; --bz-navy-600:#26385E;
  --bz-teal:#0E6E6B; --bz-teal-600:#0B5A57; --bz-teal-700:#084542; --bz-teal-300:#69BFBA;
  --bz-ink:#20242C; --bz-ink-2:#454C59; --bz-muted:#6B7280; --bz-muted-2:#9AA2AE;
  --bz-white:#fff; --bz-surface:#F7F8FA; --bz-surface-2:#F1F3F6; --bz-cream:#FFF9F2;
  --bz-line:#E7E9EE; --bz-line-2:#D6DAE2;
  --bz-blue:#2563EB; --bz-blue-700:#1D4ED8; --bz-blue-50:#EEF3FF; --bz-blue-100:#DCE7FF;
  --bz-purple:#7C3AED; --bz-purple-50:#F4EFFF;
  --bz-green:#0E9F6E; --bz-green-50:#E6F7F0; --bz-green-100:#CDEFE1;
  --bz-rose:#E11D6B; --bz-rose-50:#FDEEF4; --bz-rose-100:#FBD9E6;
  --bz-amber:#D97706; --bz-amber-50:#FEF6E7; --bz-lime-50:#EAFBC0;
  --bz-r-xs:6px; --bz-r-sm:10px; --bz-r:14px; --bz-r-lg:18px; --bz-r-xl:24px; --bz-r-pill:999px;
  --bz-sh-sm:0 1px 3px rgba(32,36,44,.06),0 1px 2px rgba(32,36,44,.04);
  --bz-sh:0 2px 8px rgba(32,36,44,.06),0 8px 24px rgba(32,36,44,.06);
  --bz-sh-lg:0 8px 20px rgba(32,36,44,.08),0 24px 48px rgba(32,36,44,.10);
  --bz-maxw:1400px; --bz-maxw-narrow:1100px; --bz-pad:40px;
  --bz-ease:cubic-bezier(.22,.8,.3,1); --bz-t1:.15s var(--bz-ease); --bz-t2:.22s var(--bz-ease);
  --bz-ff:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bz-ff-d:"Manrope","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ---------- base ---------- */
body.bookzilla-site{font-family:var(--bz-ff);font-size:16px;line-height:1.6;color:var(--bz-ink-2);background:var(--bz-white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.bookzilla-site h1,body.bookzilla-site h2,body.bookzilla-site h3,body.bookzilla-site h4{font-family:var(--bz-ff-d);color:var(--bz-ink);line-height:1.15;font-weight:800;letter-spacing:-.02em;text-wrap:balance;margin:0}
body.bookzilla-site h1{font-size:clamp(34px,9vw,52px);line-height:1.03}
body.bookzilla-site h2{font-size:clamp(25px,6vw,32px)}
body.bookzilla-site h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
body.bookzilla-site p{margin:0 0 1em}
body.bookzilla-site a{color:inherit;text-decoration:none}
.bookzilla-site img{max-width:100%;height:auto}
.bz-em{color:var(--bz-teal);font-style:italic}
.bz-lede{font-size:15px;color:var(--bz-muted);max-width:64ch}

/* ---------- layout ---------- */
.bz-wrap{width:100%;max-width:var(--bz-maxw);margin-inline:auto;padding-inline:var(--bz-pad)}
.bz-wrap--narrow{max-width:var(--bz-maxw-narrow)}
.bz-band{padding-block:clamp(40px,5vw,68px)}
.bz-band--peach{background:var(--bz-orange-50)}
.bz-band--mint{background:var(--bz-green-50)}
.bz-band--blue{background:var(--bz-blue-50)}
.bz-band--cream{background:var(--bz-cream)}
.bz-band--pink{background:var(--bz-rose-50)}
.bz-band--lime{background:var(--bz-lime-50)}
.bz-band--sale{background:#FFF8D8}
.bz-band--white{background:var(--bz-white)}
.bz-band--orange{background:linear-gradient(135deg,#FEBF65,#F39636)}
.bz-band--services{background:linear-gradient(135deg,#4785F5,#2E5AC9)}
.bz-band--docs{background:linear-gradient(135deg,var(--bz-teal),#1B5B58)}
.bz-band--orange h2,.bz-band--services h2,.bz-band--docs h2,
.bz-band--orange .bz-sec-sub,.bz-band--services .bz-sec-sub,.bz-band--docs .bz-sec-sub,
.bz-band--orange .bz-eyebrow,.bz-band--services .bz-eyebrow,.bz-band--docs .bz-eyebrow{color:#fff}
.bz-band--orange .bz-sec-sub,.bz-band--services .bz-sec-sub,.bz-band--docs .bz-sec-sub{opacity:.92}

.bz-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.bz-sec-head__text{min-width:min(100%,32ch)}
.bz-sec-sub{margin:6px 0 0;font-size:14.5px;color:var(--bz-muted)}
.bz-eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--bz-teal);margin-bottom:8px}
.bz-viewall{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--bz-teal)}
.bz-viewall svg{width:15px;height:15px;stroke-width:2.8}

.bz-grid{display:grid;gap:18px}
.bz-grid--2{grid-template-columns:repeat(2,1fr)}
.bz-grid--3{grid-template-columns:repeat(3,1fr)}
.bz-grid--4{grid-template-columns:repeat(4,1fr)}
.bz-grid--6{grid-template-columns:repeat(6,1fr)}

/* ---------- buttons ---------- */
.bz-btn{--b:var(--bz-orange);--f:#fff;--o:transparent;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.7rem 1.35rem;border-radius:var(--bz-r-sm);background:var(--b);color:var(--f);border:1.5px solid var(--o);font-family:var(--bz-ff);font-weight:700;font-size:.94rem;line-height:1.2;cursor:pointer;white-space:nowrap;transition:background var(--bz-t1),transform var(--bz-t1),box-shadow var(--bz-t1)}
.bz-btn:hover{--b:var(--bz-orange-600);transform:translateY(-1px);box-shadow:var(--bz-sh-sm);color:#fff}
.bz-btn--teal{--b:var(--bz-teal)}.bz-btn--teal:hover{--b:var(--bz-teal-600)}
.bz-btn--blue{--b:var(--bz-blue-700)}.bz-btn--blue:hover{--b:#1740b8}
.bz-btn--ghost{--b:#fff;--f:var(--bz-ink);--o:var(--bz-line-2)}.bz-btn--ghost:hover{--b:#fff;--o:var(--bz-ink);color:var(--bz-ink)}
.bz-btn--block{width:100%}

/* ---------- pills, badges, icon tiles ---------- */
.bz-pill{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:.4rem .95rem;border-radius:var(--bz-r-pill);background:#fff;border:1px solid var(--bz-line);font-size:13.5px;font-weight:650;color:var(--bz-ink);transition:all var(--bz-t1)}
.bz-pill:hover{border-color:var(--bz-teal);color:var(--bz-teal);transform:translateY(-1px)}
.bz-pillrow{display:flex;flex-wrap:wrap;gap:10px}
.bz-badge{display:inline-flex;align-items:center;gap:5px;padding:.28rem .6rem;border-radius:var(--bz-r-pill);font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.bz-badge--new{background:var(--bz-green-100);color:#0A6B4A}
.bz-badge--sale{background:var(--bz-rose-100);color:#9F1046}
.bz-badge--used{background:var(--bz-amber-50);color:#8A4B06}
.bz-tile{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--bz-orange-50);color:var(--bz-orange-700);flex:0 0 auto}
.bz-tile svg{width:22px;height:22px;stroke-width:1.7;fill:none;stroke:currentColor}
.bz-tile--mint{background:var(--bz-green-50);color:#0A6B4A}
.bz-tile--blue{background:var(--bz-blue-50);color:var(--bz-blue-700)}
.bz-tile--pink{background:var(--bz-rose-50);color:#9F1046}
.bz-tile--purple{background:var(--bz-purple-50);color:var(--bz-purple)}
.bz-tile--amber{background:var(--bz-amber-50);color:var(--bz-amber)}

/* ---------- cards ---------- */
.bz-card{background:#fff;border:1px solid var(--bz-line);border-radius:var(--bz-r);padding:20px;box-shadow:var(--bz-sh-sm);transition:transform var(--bz-t2),box-shadow var(--bz-t2),border-color var(--bz-t2)}
.bz-card:hover{transform:translateY(-7px);box-shadow:var(--bz-sh-lg);border-color:transparent}
.bz-card h3{margin-bottom:4px}
.bz-card p{margin:0;font-size:13.5px;color:var(--bz-muted)}
.bz-promo{position:relative;overflow:hidden;border-radius:var(--bz-r-lg);padding:24px 26px;min-height:150px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.bz-promo__ic{position:absolute;right:-14px;bottom:-18px;opacity:.13;width:120px;height:120px}
.bz-promo__ic svg{width:100%;height:100%;stroke-width:1.2;fill:none;stroke:currentColor}
.bz-benefit{display:flex;align-items:flex-start;gap:13px}
.bz-benefit strong{display:block;font-family:var(--bz-ff-d);font-size:14.5px;font-weight:750;color:var(--bz-ink)}
.bz-benefit span{font-size:12.5px;color:var(--bz-muted)}
.bz-dept{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;background:#fff;border:1px solid var(--bz-line);border-radius:var(--bz-r);padding:22px 16px;transition:transform var(--bz-t2),box-shadow var(--bz-t2)}
.bz-dept:hover{transform:translateY(-7px);box-shadow:var(--bz-sh-lg)}
.bz-dept h3{font-size:15px}
.bz-dept p{margin:0;font-size:12.5px;color:var(--bz-muted)}

/* ---------- alert / CTA panel ---------- */
.bz-alert{display:flex;align-items:center;gap:20px;padding:24px 26px;border-radius:var(--bz-r-lg);background:var(--bz-blue-50);border:1px solid var(--bz-blue-100)}
.bz-alert__body{flex:1;min-width:0}
.bz-alert h3{margin-bottom:6px}
.bz-alert p{margin:0;font-size:14px;color:var(--bz-ink-2)}
.bz-alert--mint{background:var(--bz-green-50);border-color:var(--bz-green-100)}
.bz-alert--purple{background:var(--bz-purple-50);border-color:#E9DEFF}
.bz-alert--cream{background:var(--bz-cream);border-color:var(--bz-orange-200)}

/* ---------- service cards ---------- */
.bz-svc{background:#fff;border-radius:var(--bz-r);padding:22px;display:flex;flex-direction:column;gap:12px}
.bz-svc h3{color:var(--bz-ink)}
.bz-svc p{margin:0;font-size:13.5px;color:var(--bz-muted)}
.bz-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.bz-ticks li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--bz-ink-2)}
.bz-ticks svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;stroke:var(--bz-green);stroke-width:3;fill:none}

/* ---------- documents desk ---------- */
.bz-doc{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:var(--bz-r);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);transition:background var(--bz-t2),transform var(--bz-t2)}
.bz-doc:hover{background:rgba(255,255,255,.17);transform:translateX(4px)}
.bz-doc strong{display:block;font-family:var(--bz-ff-d);font-size:14.5px;font-weight:750;color:#fff}
.bz-doc span{font-size:12.5px;color:rgba(255,255,255,.78)}
.bz-doc__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.16);color:#fff;flex:0 0 auto}
.bz-doc__ic svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none}
.bz-doc__ch{margin-left:auto;color:#FCD34D;flex:0 0 auto}
.bz-doc__ch svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.6;fill:none}
.bz-chip-light{display:inline-flex;align-items:center;gap:6px;padding:.35rem .8rem;border-radius:var(--bz-r-pill);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:12.5px;font-weight:650}

/* ---------- newsletter ---------- */
.bz-news{background:var(--bz-lime-50);border-radius:var(--bz-r-xl);padding:clamp(26px,4vw,44px);display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center}
.bz-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.bz-field label{font-size:12.5px;font-weight:700;color:var(--bz-ink)}
.bz-field input[type=text],.bz-field input[type=email]{height:46px;padding:0 14px;border-radius:var(--bz-r-sm);border:1.5px solid var(--bz-line-2);background:#fff;font-family:var(--bz-ff);font-size:14.5px;color:var(--bz-ink)}
.bz-field input:focus{outline:none;border-color:var(--bz-teal);box-shadow:0 0 0 3px rgba(14,110,107,.15)}
.bz-consent{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--bz-ink-2);margin-bottom:14px}

/* ---------- header ---------- */
.bz-topbar{background:var(--bz-teal-700);color:#fff;font-size:12.5px}
.bz-topbar a{color:rgba(255,255,255,.88)}
.bz-topbar a:hover{color:#fff}
.bz-topbar .bz-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:33px}
.bz-topbar__l,.bz-topbar__r{display:flex;align-items:center;gap:18px}
.bz-hdr{background:#fff;border-bottom:1px solid var(--bz-line)}
.bz-hdr .bz-wrap{display:flex;align-items:center;gap:24px;min-height:76px}
.bz-logo img{height:46px;width:auto;display:block}
.bz-search{flex:1;display:flex;align-items:center;background:#fff;border:1.5px solid var(--bz-line-2);border-radius:var(--bz-r-pill);height:46px;padding-left:18px;overflow:hidden;max-width:640px}
.bz-search input{flex:1;border:0;outline:none;font-family:var(--bz-ff);font-size:14.5px;color:var(--bz-ink);background:transparent}
.bz-search button{height:46px;padding:0 22px;border:0;background:var(--bz-teal);color:#fff;font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.bz-search button:hover{background:var(--bz-teal-600)}
.bz-acts{display:flex;align-items:center;gap:8px;margin-left:auto}
.bz-act{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:var(--bz-r-sm);font-size:11px;font-weight:650;color:var(--bz-ink-2);min-width:56px;position:relative}
.bz-act:hover{background:var(--bz-surface);color:var(--bz-teal)}
.bz-act svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.7;fill:none}
.bz-act__count{position:absolute;top:2px;right:8px;min-width:17px;height:17px;border-radius:999px;background:var(--bz-orange);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px}
.bz-catnav{background:#fff;border-top:1px solid var(--bz-line);border-bottom:1px solid var(--bz-line)}
.bz-catnav .bz-wrap{display:flex;align-items:center;gap:6px;min-height:52px;overflow-x:auto;scrollbar-width:none}
.bz-catnav .bz-wrap::-webkit-scrollbar{display:none}
.bz-catnav a{padding:8px 12px;border-radius:var(--bz-r-sm);font-size:14px;font-weight:600;color:var(--bz-ink-2);white-space:nowrap}
.bz-catnav a:hover{background:var(--bz-surface);color:var(--bz-teal)}
.bz-catnav a.bz-is-sale{color:var(--bz-rose);font-weight:750}

/* ---------- footer ---------- */
.bz-foot{background:var(--bz-teal-700);color:rgba(255,255,255,.80);font-size:13.5px;padding-block:52px 0}
.bz-foot a{color:rgba(255,255,255,.80)}
.bz-foot a:hover{color:#fff}
.bz-foot h4{font-family:var(--bz-ff-d);font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.bz-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.bz-foot__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.bz-foot__bottom{margin-top:40px;border-top:1px solid rgba(255,255,255,.14);padding-block:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px}
.bz-soc{display:flex;gap:9px;margin:16px 0}
.bz-soc a{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.11);color:#fff}
.bz-soc a:hover{background:var(--bz-orange)}
.bz-soc svg{width:17px;height:17px;fill:currentColor}
.bz-pay{display:flex;flex-wrap:wrap;gap:7px}
.bz-pay span{padding:.3rem .6rem;border-radius:var(--bz-r-xs);background:rgba(255,255,255,.11);font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.9)}

/* ---------- responsive ---------- */
@media(max-width:1199px){
  :root{--bz-pad:28px}
  .bz-grid--6{grid-template-columns:repeat(3,1fr)}
  .bz-grid--4{grid-template-columns:repeat(2,1fr)}
  .bz-foot__cols{grid-template-columns:repeat(2,1fr);gap:32px}
}
@media(max-width:900px){
  .bz-news{grid-template-columns:1fr;gap:24px}
  .bz-hdr .bz-wrap{flex-wrap:wrap;gap:14px;padding-block:12px}
  .bz-search{order:3;flex:1 0 100%;max-width:none}
}
@media(max-width:767px){
  :root{--bz-pad:18px}
  .bz-band{padding-block:clamp(34px,7vw,48px)}
  .bz-grid,.bz-grid--2,.bz-grid--3,.bz-grid--4,.bz-grid--6{grid-template-columns:1fr}
  .bz-grid--dept{grid-template-columns:repeat(2,1fr)}
  .bz-grid--benefits{grid-template-columns:repeat(2,1fr)}
  .bz-alert{flex-direction:column;align-items:flex-start;gap:14px}
  .bz-foot__cols{grid-template-columns:1fr;gap:26px}
  .bz-topbar{font-size:11.75px}
  .bz-topbar .bz-wrap{gap:10px;min-height:36px}
  .bz-topbar__l{min-width:0;flex:1 1 auto}
  .bz-topbar__l>span{gap:6px!important;white-space:nowrap}
  .bz-topbar__l>span>span{width:15px!important;height:15px!important;flex:0 0 15px}
  .bz-topbar__r{gap:10px;flex:0 0 auto}
  .bz-topbar__r a{white-space:nowrap}
  .bz-topbar__r a:not(.bz-keep){display:none}
  .bz-sec-head{align-items:flex-start}
}
@media(max-width:340px){
  .bz-topbar{font-size:11.5px}
  .bz-topbar .bz-wrap,.bz-topbar__r{gap:8px}
}
@media(prefers-reduced-motion:reduce){
  body.bookzilla-site *,body.bookzilla-site *::before,body.bookzilla-site *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- accessibility ---------- */
body.bookzilla-site :focus-visible{outline:3px solid var(--bz-teal);outline-offset:2px;border-radius:4px}
.bz-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- BZ LOGO HARDENING ----------
   This stack ships 49 stylesheets and several of them carry a bare
   `img{height:auto}` at the same specificity as .bz-logo img, so the winner
   depended on enqueue order and changed from page to page. Pinning it here
   keeps the logo the same size on every template. Scoped to the logo only. */
.bz-hdr a.bz-logo{display:block;flex:0 0 auto;line-height:0}
.bz-hdr a.bz-logo img{height:46px!important;width:auto!important;max-width:none!important;max-height:46px!important;display:block}
.bz-foot a.bz-logo img,.bz-foot img.bz-footlogo{height:44px!important;width:auto!important;max-height:44px!important}
@media(max-width:767px){.bz-hdr a.bz-logo img{height:38px!important;max-height:38px!important}}

/* ---------- ON-DARK BANDS ----------
   The base button set assumes a light ground. On the teal documents band and
   the blue services band the primary inverts to white and the secondary
   becomes a white-outlined ghost, so neither disappears into the panel. */
.bz-band--docs .bz-eyebrow,.bz-band--services .bz-eyebrow{border:1px solid rgba(255,255,255,.42);border-radius:var(--bz-r-pill);padding:.34rem .8rem}
.bz-band--docs .bz-btn{--b:#fff;--f:var(--bz-teal-700);--o:transparent}
.bz-band--docs .bz-btn:hover{--b:#EAF7F6;color:var(--bz-teal-700)}
.bz-band--docs .bz-btn--ghost{--b:rgba(255,255,255,.10);--f:#fff;--o:rgba(255,255,255,.55)}
.bz-band--docs .bz-btn--ghost:hover{--b:rgba(255,255,255,.20);--o:#fff;color:#fff}
.bz-band--docs .bz-chip-light{background:#fff;border-color:#fff;color:var(--bz-teal-700)}
.bz-band--services .bz-btn--ghost{--b:rgba(255,255,255,.12);--f:#fff;--o:rgba(255,255,255,.55)}
.bz-band--services .bz-btn--ghost:hover{--b:rgba(255,255,255,.22);--o:#fff;color:#fff}
/* the cream CTA sits on the blue band but is itself light, so it keeps the
   standard orange primary and needs its icon tile aligned with the text */
.bz-band--services .bz-alert--cream .bz-btn{--b:var(--bz-orange);--f:#fff;--o:transparent}
.bz-band--services .bz-alert--cream .bz-btn:hover{--b:var(--bz-orange-600);color:#fff}

/* ---------- NO CONTAINER SEAM ----------
   Any Elementor container holding a full-bleed Bookzilla band carries no
   padding of its own; the band owns its spacing. Belt and braces alongside
   the kit-level setting, so a container added later cannot reintroduce it. */
.elementor-widget-html>.elementor-widget-container>.bz-band{margin:0}
.e-con>.elementor-widget-html,.e-con-inner>.elementor-widget-html{width:100%;max-width:100%}
.elementor-widget-html:has(>.elementor-widget-container>.bz-band){margin-block:0}

/* ---------- BRAND LOCKUP ---------- */
.bz-hdr a.bz-logo{display:flex;align-items:center;gap:11px;flex:0 0 auto;line-height:0}
.bz-logo__mark{height:46px!important;width:auto!important;max-width:none!important;max-height:46px!important;display:block}
.bz-logo__word{display:flex;flex-direction:column;justify-content:center;gap:2px;line-height:1}
.bz-logo__word strong{font-family:var(--bz-ff-d);font-size:20px;font-weight:800;letter-spacing:-.015em;color:var(--bz-ink);line-height:1}
.bz-logo__word span{font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bz-muted);line-height:1}
.bz-logo__word--dark strong{color:#fff}
.bz-logo__word--dark span{color:rgba(255,255,255,.72)}
.bz-foot .bz-logo--foot{display:flex;align-items:center;gap:10px;line-height:0}
.bz-foot .bz-logo__mark{height:42px!important;max-height:42px!important}
@media(max-width:767px){.bz-logo__word strong{font-size:17px}.bz-logo__word span{font-size:7.5px;letter-spacing:.13em}}
@media(max-width:420px){.bz-logo__word{display:none}}

/* ---------- BUTTON ICONS ---------- */
.bz-btn__ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 auto}
.bz-btn__ic svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none}
.bz-hdr .bz-btn--account{margin-left:6px;--b:var(--bz-orange);--f:#fff;--o:transparent}
.bz-hdr .bz-btn--account:hover{--b:var(--bz-orange-600);color:#fff}

/* ---------- LOGIN MODAL ---------- */
.bz-modal[hidden]{display:none}
.bz-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}
.bz-modal__scrim{position:absolute;inset:0;background:rgba(16,24,32,.55);backdrop-filter:blur(2px)}
.bz-modal__panel{position:relative;z-index:1;width:min(100%,430px);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:var(--bz-r-lg);padding:32px 30px 26px;box-shadow:0 24px 60px rgba(16,24,32,.28);text-align:center}
.bz-modal__panel h2{font-size:27px;margin:0 0 6px}
.bz-modal__sub{font-size:14px;color:var(--bz-muted);margin:0 0 22px}
.bz-modal__x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:999px;border:0;background:var(--bz-surface);color:var(--bz-ink-2);cursor:pointer}
.bz-modal__x:hover{background:var(--bz-surface-2);color:var(--bz-ink)}
.bz-modal__x svg{width:16px;height:16px}
.bz-modal__or{position:relative;margin:20px 0;font-size:12.5px;color:var(--bz-muted-2)}
.bz-modal__or::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--bz-line)}
.bz-modal__or span{position:relative;background:#fff;padding:0 12px}
.bz-loginform{text-align:left}
.bz-loginform .bz-field{margin-bottom:14px}
.bz-loginform .bz-field input{width:100%}
.bz-modal__lost{text-align:right;margin:0 0 16px;font-size:13px}
.bz-modal__lost a{color:var(--bz-teal);font-weight:700}
.bz-modal__foot{margin:18px 0 0;font-size:13.5px;color:var(--bz-muted)}
.bz-modal__foot a{color:var(--bz-teal);font-weight:700}
body.bz-modal-open{overflow:hidden}


/* ---------- ORANGE BAND IS DARK-TEXT ----------
   The grade band is light enough that white type washes out on it. The
   original uses near-black, which also clears AA comfortably. */
.bz-band--orange h2,.bz-band--orange h3{color:#2A1A05}
.bz-band--orange .bz-sec-sub{color:#5A3B10;opacity:1}
.bz-band--orange .bz-eyebrow,.bz-band--orange .bz-subhead{color:#2A1A05}
.bz-subhead{margin:26px 0 12px;font-size:13px;font-weight:800;letter-spacing:.02em;color:#2A1A05}

/* ---------- PILL HOVER ---------- */
.bz-pill{transition:background var(--bz-t1),color var(--bz-t1),border-color var(--bz-t1),transform var(--bz-t1),box-shadow var(--bz-t1)}
.bz-pill:hover,.bz-pill:focus-visible{background:var(--bz-teal);border-color:var(--bz-teal);color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px rgba(14,110,107,.28)}
.bz-pill:hover .bz-pill__n,.bz-pill:focus-visible .bz-pill__n{color:rgba(255,255,255,.75)}
.bz-pill__n{margin-left:6px;font-size:11px;font-weight:700;color:var(--bz-muted-2)}

/* ---------- SECTION RHYTHM ----------
   Zeroing the Elementor container padding removed the seam but also the
   breathing room, so the bands now carry the whole vertical rhythm. */
.bz-band{padding-block:clamp(48px,5.6vw,78px)}
.bz-band+.bz-band{border-top:0}
.bz-sec-head{margin-bottom:26px}
.bz-hero{padding-block:clamp(20px,2.6vw,34px) clamp(10px,1.4vw,18px)}
@media(max-width:767px){.bz-band{padding-block:clamp(36px,7vw,52px)}}


/* ---------- MEGA MENU ----------
   The panel is a child of .bz-cn-item and its top edge meets the item box,
   so travelling from the trigger into the panel never leaves the hover
   region. That is what removes the flicker, not any timer. */
.bz-catnav .bz-wrap{position:relative;overflow:visible}
.bz-cn-item{position:relative;display:flex;align-items:center;align-self:stretch}
.bz-cn-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:0;border-radius:var(--bz-r-sm);background:transparent;font-family:var(--bz-ff);font-size:14px;font-weight:650;color:var(--bz-ink-2);cursor:pointer;white-space:nowrap}
.bz-cn-btn svg{width:15px;height:15px;transition:transform var(--bz-t1)}
.bz-cn-item:hover .bz-cn-btn,.bz-cn-item.is-open .bz-cn-btn{background:var(--bz-surface);color:var(--bz-teal)}
.bz-cn-item.is-open .bz-cn-btn svg{transform:rotate(180deg)}
.bz-mega{position:absolute;top:100%;left:0;z-index:80;width:min(92vw,940px);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--bz-t2),transform var(--bz-t2),visibility var(--bz-t2);pointer-events:none}
.bz-cn-item.is-open .bz-mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.bz-mega__in{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;background:#fff;border:1px solid var(--bz-line);border-radius:var(--bz-r);box-shadow:var(--bz-sh-lg);padding:24px 26px;margin-top:2px}
.bz-mega__col h4{font-family:var(--bz-ff-d);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--bz-teal);margin:0 0 10px}
.bz-mega__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.bz-mega__col a{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:5px 7px;margin-inline:-7px;border-radius:7px;font-size:13.5px;color:var(--bz-ink-2)}
.bz-mega__col a:hover{background:var(--bz-surface);color:var(--bz-teal)}
.bz-mega__col a span{font-size:11px;font-weight:700;color:var(--bz-muted-2)}
.bz-mega__all{grid-column:1/-1;border-top:1px solid var(--bz-line);padding-top:16px;margin-top:2px}
@media(max-width:1100px){.bz-mega__in{grid-template-columns:repeat(2,1fr)}}
@media(max-width:959px){.bz-cn-item{display:none}}


/* ================= ROUND 3 POLISH ================= */

/* Headings need air under the band edge above them, and the grid needs air
   under the heading. Both were sitting flush. */
.bz-band{padding-block:clamp(56px,6vw,88px)}
.e-con+.e-con .bz-band--white:first-child{}
.bz-sec-head{margin-bottom:clamp(24px,2.4vw,34px)}
.bz-sec-head__text h2{margin-bottom:2px}
@media(max-width:767px){.bz-band{padding-block:clamp(40px,8vw,58px)}.bz-sec-head{margin-bottom:20px}}

/* Solid buttons keep white text in every state. No colour shift on hover. */
.bz-btn,.bz-btn:hover,.bz-btn:focus,.bz-btn:active,.bz-btn:visited{color:var(--f)}
.bz-btn:not(.bz-btn--ghost),.bz-btn:not(.bz-btn--ghost):hover,
.bz-btn:not(.bz-btn--ghost):focus,.bz-btn:not(.bz-btn--ghost):active{color:#fff}
.bz-btn--teal,.bz-btn--teal:hover{--b:var(--bz-teal);color:#fff}
.bz-btn--teal:hover{--b:var(--bz-teal-600)}
.bz-hdr .bz-btn--account,.bz-hdr .bz-btn--account:hover{color:#fff}
/* the docs band keeps its inverted primary, so it opts back out */
.bz-band--docs .bz-btn:not(.bz-btn--ghost),.bz-band--docs .bz-btn:not(.bz-btn--ghost):hover{color:var(--bz-teal-700)}
.bz-band--docs .bz-btn--ghost,.bz-band--docs .bz-btn--ghost:hover{color:#fff}

/* Chevron controls hold their colour on hover; only the lift and shadow move. */
.bz-railbtn:hover:not(:disabled),.bz-railbtn:focus-visible:not(:disabled){
  border-color:var(--bz-line-2);color:var(--bz-ink);
  transform:translateY(-1px);box-shadow:var(--bz-sh-sm);background:#fff;
}

/* Footer headings: white, bold, and standing clear of their list. */
.bz-foot h4{font-size:13px;font-weight:800;letter-spacing:.06em;color:#fff;margin:0 0 20px}
.bz-foot h4+ul{margin-top:0}
.bz-foot ul{gap:11px}
.bz-foot__cols>div>h4:not(:first-child){margin-top:32px}


/* ---------- RAIL BAND FIX ----------
   Each product rail now sits in its own <section class="bz-band">, matching
   every other section, so it picks up the same vertical rhythm. Belt and
   braces in case an Elementor container ever tries to squeeze it. */
.e-con>.elementor-widget-html>.elementor-widget-container>.bz-band{margin:0}
.bz-band>.bz-wrap>[data-bz-rail]{margin:0}
[data-bz-rail] .bz-sec-head{margin-bottom:clamp(24px,2.4vw,34px)}


/* ---------- CART DRAWER ---------- */
.bz-drawer[hidden]{display:none}
.bz-drawer{position:fixed;inset:0;z-index:1100}
.bz-drawer__scrim{position:absolute;inset:0;background:rgba(16,24,32,.5);opacity:0;transition:opacity .22s var(--bz-ease)}
.bz-drawer.is-in .bz-drawer__scrim{opacity:1}
.bz-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(100%,432px);background:#fff;display:flex;flex-direction:column;box-shadow:-18px 0 50px rgba(16,24,32,.22);transform:translateX(100%);transition:transform .26s var(--bz-ease)}
.bz-drawer.is-in .bz-drawer__panel{transform:none}
@media(prefers-reduced-motion:reduce){.bz-drawer__panel,.bz-drawer__scrim{transition:none}}
.bz-drawer__head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--bz-line);flex:0 0 auto}
.bz-drawer__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--bz-orange-50);color:var(--bz-orange-700);flex:0 0 auto}
.bz-drawer__ic svg{width:19px;height:19px}
.bz-drawer__head h2{font-size:19px;margin:0;flex:1}
.bz-drawer__count{font-size:13px;color:var(--bz-muted)}
.bz-drawer__x{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:999px;background:transparent;color:var(--bz-ink-2);cursor:pointer;flex:0 0 auto}
.bz-drawer__x:hover{background:var(--bz-surface);color:var(--bz-ink)}
.bz-drawer__x svg{width:17px;height:17px}
#bz-cart-inner{display:flex;flex-direction:column;flex:1;min-height:0}
.bz-drawer__body{flex:1;overflow-y:auto;padding:18px 20px}
.bz-citem{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--bz-line);position:relative;transition:opacity var(--bz-t2)}
.bz-citem.is-busy{opacity:.45;pointer-events:none}
.bz-citem__img{flex:0 0 58px;width:58px;border-radius:8px;overflow:hidden;line-height:0}
.bz-citem__img img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;margin:0}
.bz-citem__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.bz-citem__name{font-family:var(--bz-ff-d);font-size:14px;font-weight:700;color:var(--bz-ink);line-height:1.32}
.bz-citem__name:hover{color:var(--bz-teal)}
.bz-citem__by{font-size:12.5px;color:var(--bz-muted)}
.bz-citem__price{font-family:var(--bz-ff-d);font-size:15px;font-weight:800;color:var(--bz-ink);margin-top:2px}
.bz-citem__price del{font-size:12.5px;font-weight:600;color:var(--bz-muted-2);margin-right:5px}
.bz-citem__price ins{text-decoration:none}
.bz-citem__x{position:absolute;top:14px;right:0;display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:999px;background:transparent;color:var(--bz-muted-2);cursor:pointer}
.bz-citem__x:hover{background:var(--bz-rose-50);color:var(--bz-rose)}
.bz-citem__x svg{width:14px;height:14px}
.bz-qty{display:inline-flex;align-items:center;gap:2px;margin-top:8px;border:1px solid var(--bz-line-2);border-radius:8px;padding:2px;width:max-content}
.bz-qty button{width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--bz-ink);font-size:16px;line-height:1;cursor:pointer}
.bz-qty button:hover{background:var(--bz-surface);color:var(--bz-teal)}
.bz-qty__n{min-width:30px;text-align:center;font-size:14px;font-weight:700}
.bz-drawer__foot{flex:0 0 auto;border-top:1px solid var(--bz-line);padding:18px 20px 20px;background:#fff}
.bz-crow{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:var(--bz-ink-2);margin-bottom:8px}
.bz-crow--total{font-family:var(--bz-ff-d);font-size:19px;font-weight:800;color:var(--bz-ink);padding-top:10px;margin-top:4px;border-top:1px solid var(--bz-line)}
.bz-drawer__foot .bz-btn{margin-top:12px}
.bz-drawer__note{margin:12px 0 0;font-size:12px;color:var(--bz-muted);text-align:center}
.bz-cempty{text-align:center;padding:48px 10px}
.bz-cempty p{margin:0 0 6px;font-size:14px;color:var(--bz-muted)}
.bz-cempty .bz-btn{margin-top:16px}


/* ============================================================
   MOBILE / TABLET NAVIGATION
   ------------------------------------------------------------
   The category bar carries eleven items and never fits below
   1440px, so on phones and tablets it is replaced by a drawer
   opened from a hamburger sitting beside the account button.
   Everything here is gated on html.bz-nav-ready, which the
   script adds once the drawer exists: if the script never runs,
   the category bar stays exactly as it is today rather than
   leaving the site with no navigation at all.
   ============================================================ */

.bz-navtoggle{display:none}

@media(max-width:1024px){

  /* the bar itself, and the Elementor container wrapping it, step aside */
  html.bz-nav-ready nav.bz-catnav{display:none}
  html.bz-nav-ready .elementor-widget:has(> .elementor-widget-container > nav.bz-catnav){display:none}
  html.bz-nav-ready .e-con:has(nav.bz-catnav){display:none}

  /* the account button keeps its colour but drops to an icon square */
  html.bz-nav-ready .bz-hdr .bz-btn--account{
    width:46px;min-width:46px;padding:0;gap:0;margin-left:2px;
  }
  html.bz-nav-ready .bz-btn--account .bz-btn__lbl{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  html.bz-nav-ready .bz-btn--account .bz-btn__ic{width:21px;height:21px}

  /* the hamburger, beside it */
  html.bz-nav-ready .bz-navtoggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;flex:0 0 auto;padding:0;margin-left:2px;
    background:#fff;border:1.5px solid var(--bz-line-2);
    border-radius:var(--bz-r-sm);color:var(--bz-ink);cursor:pointer;
    transition:background var(--bz-t1),border-color var(--bz-t1),color var(--bz-t1);
  }
  html.bz-nav-ready .bz-navtoggle:hover{background:var(--bz-surface);border-color:var(--bz-ink);color:var(--bz-teal)}
  html.bz-nav-ready .bz-navtoggle svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none}
  html.bz-nav-ready .bz-navtoggle[aria-expanded="true"]{background:var(--bz-surface);border-color:var(--bz-ink)}
}

/* ---------- the drawer, at v5.6's measurements ----------
   v5.6's .mnav is a full-screen white panel: logo lockup and close in a
   header-height top bar, then log in / create account, two labelled
   sections of chevron rows, and WhatsApp / phone at the foot. Values
   below are its own. Namespaced away from .bz-drawer, which the cart
   drawer already owns. It slides in from the right because the trigger
   sits on the right of the header; v5.6's burger was on the left. */
.bz-navdrawer[hidden]{display:none}
.bz-navdrawer{
  position:fixed;inset:0;z-index:9000;background:#fff;
  display:flex;flex-direction:column;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .28s var(--bz-ease);
}
.bz-navdrawer.is-open{transform:none}

.bz-navdrawer__top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:76px;padding-inline:var(--bz-pad);
  border-bottom:1px solid var(--bz-line);flex:none;
}
.bz-navdrawer__top .bz-logo{display:inline-flex;align-items:center;gap:.6rem;flex:none}
.bz-navdrawer__top .bz-logo img{height:44px;width:auto;display:block}

.bz-navdrawer__x{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  padding:0;background:none;border:0;border-radius:var(--bz-r-sm);
  color:var(--bz-ink);cursor:pointer;transition:background var(--bz-t1);
}
.bz-navdrawer__x:hover,.bz-navdrawer__x:focus-visible{background:var(--bz-surface)}
.bz-navdrawer__x svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.2;fill:none}

.bz-navdrawer__body{padding:1.1rem var(--bz-pad) 2.5rem}

.bz-navdrawer__sec{
  font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bz-muted-2);margin:1.5rem 0 .5rem;
}

.bz-navdrawer__body a.bz-ml{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--bz-line);
  font-size:1.02rem;font-weight:650;color:var(--bz-ink);
  line-height:1.3;min-height:48px;
}
.bz-navdrawer__body a.bz-ml:hover,
.bz-navdrawer__body a.bz-ml:focus-visible{color:var(--bz-teal)}
.bz-navdrawer__body a.bz-ml svg{
  width:17px;height:17px;flex:none;color:var(--bz-muted-2);
  stroke:currentColor;stroke-width:2.2;fill:none;
}
.bz-navdrawer__body a.bz-ml.bz-is-sale{color:var(--bz-rose)}

.bz-navdrawer__cta{display:grid;gap:.6rem;margin-top:1.4rem}
.bz-navdrawer__cta .bz-btn{width:100%}
.bz-navdrawer__cta .bz-btn svg{
  width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:2;fill:none;
}

html.bz-navdrawer-open,html.bz-navdrawer-open body{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .bz-navdrawer{transition-duration:.01ms}
}

/* On phones the two labelled actions cost a whole header row; the icons
   carry the meaning and the labels stay for screen readers. */
@media(max-width:767px){
  html.bz-nav-ready .bz-hdr .bz-act{
    min-width:0;width:46px;height:46px;padding:0;justify-content:center;
  }
  html.bz-nav-ready .bz-hdr .bz-act > span:not(.bz-act__count){
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  html.bz-nav-ready .bz-hdr .bz-act__count{top:0;right:0}
}

/* ============================================================
   LEGAL PROSE, MEGA MENU
   ============================================================ */

/* v5.6 sets a label and its value on one line -- <strong>Email:</strong>
   then the address. Something in this stack was giving that strong a
   block box, which pushed every value onto its own line and left the
   continuation comma stranded at the start of it. I could not find the
   rule responsible in any of the twenty-one stylesheets the page loads,
   so this asserts the correct value outright: a strong inside prose is
   inline, and !important makes that true whatever is competing. */
.bz-pagebody .bz-prose li strong,
.bz-pagebody .bz-prose li b{display:inline!important}

/* ---------- mega menu ---------- */
/* Four columns of real category names did not fit 940px, so the long
   ones broke badly; the panel is wider and the names may now wrap. */
.bz-mega{width:min(94vw,1180px)}
.bz-mega__in{gap:22px 30px}
.bz-mega__col a{white-space:normal;line-height:1.35}

/* a product count is noise in a navigation menu */
.bz-mega__col a span{display:none}

/* v5.6 puts a four-square glyph before the label */
.bz-cn-btn::before{
  content:"";width:15px;height:15px;flex:none;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1.6'/><rect x='14' y='3' width='7' height='7' rx='1.6'/><rect x='3' y='14' width='7' height='7' rx='1.6'/><rect x='14' y='14' width='7' height='7' rx='1.6'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1.6'/><rect x='14' y='3' width='7' height='7' rx='1.6'/><rect x='3' y='14' width='7' height='7' rx='1.6'/><rect x='14' y='14' width='7' height='7' rx='1.6'/></svg>") center/contain no-repeat;
}

/* ============================================================
   v5.6 PARITY: SEARCH, CAROUSEL, SECTION RHYTHM, FOOTER
   ------------------------------------------------------------
   Values below are read off v5.6's own stylesheet, not estimated.
   ============================================================ */

/* ---------- search ---------- */
/* v5.6: .search max-width 660, .search-in 46px pill, .search-go a
   56px square that turns orange on hover, 19px glyph. */
.bz-hdr .bz-search{max-width:660px;padding-left:0}
.bz-hdr .bz-search:focus-within{border-color:var(--bz-orange);box-shadow:0 0 0 4px var(--bz-orange-50)}
.bz-hdr .bz-search input{padding:0 1rem 0 1.25rem;font-size:.95rem}
.bz-hdr .bz-search input::placeholder{color:var(--bz-muted-2)}
.bz-hdr .bz-search button{
  width:56px;flex:none;padding:0;display:grid;place-items:center;
  background:var(--bz-teal);color:#fff;transition:background var(--bz-t1);
}
.bz-hdr .bz-search button:hover{background:var(--bz-orange)}
.bz-hdr .bz-search button svg{width:19px;height:19px;stroke:currentColor;fill:none}

/* ---------- hero carousel ---------- */
/* v5.6: 28px radius on a white card with a two-layer shadow, and the
   chevrons are 38px discs that lift on hover, not 34px flat ones. */
.bz-car{border-radius:28px;background:#fff;
  box-shadow:0 5px 18px rgba(32,36,44,.06),0 22px 54px rgba(32,36,44,.10)}
.bz-carnav{bottom:10px;gap:.5rem}
.bz-carbtn{
  width:38px;height:38px;
  background:rgba(255,255,255,.93);border:1px solid rgba(32,36,44,.13);
  box-shadow:0 4px 14px rgba(32,36,44,.10);
  transition:background var(--bz-t1),transform var(--bz-t1);
}
.bz-carbtn:hover{background:#fff;transform:scale(1.07);box-shadow:0 4px 14px rgba(32,36,44,.10)}
.bz-carbtn:focus-visible{outline:3px solid rgba(242,140,40,.36);outline-offset:2px}
.bz-carbtn svg{width:16px;height:16px;stroke-width:2.4}
.bz-cardots{gap:.4rem;align-items:center;padding:0 .3rem}
.bz-cardot{background:rgba(32,36,44,.26);transition:width var(--bz-t2),background var(--bz-t2)}
.bz-cardot[aria-selected="true"]{width:26px}

/* ---------- section rhythm ---------- */
/* v5.6 runs its ordinary sections at .sec--tight and reserves the taller
   .band rhythm for the full-bleed gradient ones. This build was giving
   every section the taller value, which is what made the page feel airier
   than the original. */
.bz-band{padding-block:clamp(28px,2.6vw,48px)}
.bz-band--orange,.bz-band--services,.bz-band--docs{padding-block:clamp(46px,4.4vw,86px)}
.bz-hero{padding-block:clamp(16px,1.6vw,28px) 0}
@media(max-width:767px){
  .bz-band{padding-block:clamp(28px,2.6vw,48px)}
  .bz-band--orange,.bz-band--services,.bz-band--docs{padding-block:clamp(46px,4.4vw,86px)}
}

/* ---------- footer ---------- */
/* v5.6's footer is a soft teal on the dark ground, not white at 80%,
   and its links warm to orange rather than to white. */
.bz-foot{color:#A7C9C7;padding-block:clamp(40px,4vw,64px) 0}
.bz-foot a{color:#A7C9C7}
.bz-foot a:hover{color:var(--bz-orange)}
.bz-foot h4{
  font-family:var(--bz-ff);font-size:.72rem;letter-spacing:.13em;
  color:#fff;margin:0 0 .9rem;
}
.bz-foot ul{gap:.55rem}
.bz-foot ul a{font-size:.885rem}
.bz-foot__cols{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px}
.bz-soc{gap:.5rem;margin:1.2rem 0 0}
.bz-soc a{width:40px;height:40px;background:rgba(255,255,255,.09);color:#D3E7E5}
.bz-soc a:hover{background:var(--bz-orange);color:#fff}
.bz-soc svg{width:18px;height:18px}
.bz-pay{gap:.4rem;margin-top:1.1rem}
.bz-pay span{
  font-size:.68rem;padding:.3rem .55rem;letter-spacing:normal;
  text-transform:none;color:#C3DEDC;background:rgba(255,255,255,.09);
}
.bz-foot__bottom{
  margin-top:clamp(32px,3vw,48px);padding-block:1.2rem;
  border-top:1px solid rgba(255,255,255,.1);
  gap:.7rem 1.4rem;font-size:.82rem;
}
