/* Bookzilla ported page bodies (Contact, About, Printing & Services,
   Conditions of Use, Returns Policy). Generated from the original site
   stylesheet; every selector is scoped to .bz-pagebody so nothing here can
   reach the header, the footer, or any WooCommerce or Elementor markup. */

/* ---- design tokens, scoped rather than :root so these generic names
        cannot collide with Elementor, WooCommerce or plugin variables ---- */
.bz-pagebody{
  --orange:#F28C28;
  --orange-600:#E07A15;
  --orange-700:#C2650A;
  --orange-200:#FAD3A8;
  --orange-100:#FCE6CC;
  --orange-50:#FEF5EB;
  --navy:#1B2A4A;
  --navy-600:#26385E;
  --teal-d:#0E6E6B;
  --teal-d-600:#0B5A57;
  --teal-d-700:#084542;
  --teal-d-300:#69BFBA;
  --ink:#20242C;
  --ink-2:#454C59;
  --muted:#6B7280;
  --muted-2:#9AA2AE;
  --white:#FFFFFF;
  --surface:#F7F8FA;
  --surface-2:#F1F3F6;
  --cream:#FFF9F2;
  --line:#E7E9EE;
  --line-2:#D6DAE2;
  --blue:#2563EB;   --blue-700:#1D4ED8;  --blue-50:#EEF3FF;  --blue-100:#DCE7FF;
  --purple:#7C3AED; --purple-50:#F4EFFF; --purple-100:#E9DEFF;
  --green:#0E9F6E;  --green-50:#E6F7F0;  --green-100:#CDEFE1;
  --rose:#E11D6B;   --rose-50:#FDEEF4;   --rose-100:#FBD9E6;
  --amber:#D97706;  --amber-50:#FEF6E7;
  --teal:#0D9488;   --teal-50:#E7F6F5;
  --r-xs:6px;
  --r-sm:10px;
  --r:14px;
  --r-lg:18px;
  --r-xl:24px;
  --r-pill:999px;
  --sh-xs:0 1px 2px rgba(32,36,44,.05);
  --sh-sm:0 1px 3px rgba(32,36,44,.06), 0 1px 2px rgba(32,36,44,.04);
  --sh:0 2px 8px rgba(32,36,44,.06), 0 8px 24px rgba(32,36,44,.06);
  --sh-lg:0 8px 20px rgba(32,36,44,.08), 0 24px 48px rgba(32,36,44,.10);
  --sh-pop:0 12px 32px rgba(32,36,44,.14), 0 2px 8px rgba(32,36,44,.08);
  --maxw:var(--bz-maxw);
  --pad:var(--bz-pad);
  --hdr:76px;
  --sticky:76px;
  --catnav:52px;
  --ease:cubic-bezier(.22,.8,.3,1);
  --t1:.15s var(--ease);
  --t2:.22s var(--ease);
  --t3:.4s var(--ease);
  --ff:var(--bz-ff);
  --ff-d:var(--bz-ff-d);
}

.bz-pagebody .bz-lede{font-size:clamp(1rem,.96rem + .22vw,1.09rem);color:var(--muted);line-height:1.62;max-width:64ch}
.bz-pagebody .bz-eyebrow{display:inline-flex;align-items:center;gap:.4rem;
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange-700);}
.bz-pagebody .bz-eyebrow--tag{background:var(--orange-50);border:1px solid var(--orange-100);
  padding:.34rem .7rem;border-radius:var(--r-pill);}
.bz-pagebody .bz-wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.bz-pagebody .bz-wrap--narrow{max-width:920px}
.bz-pagebody .bz-sec{padding-block:clamp(40px,4vw,80px)}
.bz-pagebody .bz-sec--tight{padding-block:clamp(28px,2.6vw,48px)}
.bz-pagebody .bz-band{position:relative;overflow:hidden;padding-block:clamp(46px,4.4vw,86px)}
.bz-pagebody .bz-band::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(70% 90% at 88% 8%,rgba(255,255,255,.5),transparent 62%);}
.bz-pagebody .bz-band>*{position:relative;z-index:1}
.bz-pagebody .bz-band-orange{background:linear-gradient(122deg,#FFC46B 0%,#F9A03F 42%,#F0871B 100%)}
.bz-pagebody .bz-band-blue{background:linear-gradient(122deg,#4F8DF7 0%,#2563EB 48%,#1B45B8 100%);color:#DCE7FF}
.bz-pagebody .bz-band-blue > .bz-wrap > .bz-sec-head h2,.bz-pagebody .bz-band-blue > .bz-wrap > .bz-sec-head h3{color:#fff}
.bz-pagebody .bz-band-blue > .bz-wrap > .bz-sec-head .bz-sub,.bz-pagebody .bz-band-blue > .bz-wrap > .bz-sec-head p{color:#D9E5FF}
.bz-pagebody .bz-band-blue .bz-svc-card,.bz-pagebody .bz-band-blue .bz-step,.bz-pagebody .bz-band-blue .bz-strip,.bz-pagebody .bz-band-blue .bz-cat{color:var(--ink-2)}
.bz-pagebody .bz-band-blue .bz-svc-card h3,.bz-pagebody .bz-band-blue .bz-step h4,.bz-pagebody .bz-band-blue .bz-strip h3,.bz-pagebody .bz-band-blue .bz-cat b{color:var(--ink)}
.bz-pagebody .bz-band-blue .bz-svc-card p,.bz-pagebody .bz-band-blue .bz-step p,.bz-pagebody .bz-band-blue .bz-strip p,.bz-pagebody .bz-band-blue .bz-cat small{color:var(--muted)}
.bz-pagebody .bz-band-blue .bz-svc-card li{color:var(--ink-2)}
.bz-pagebody .bz-band .bz-svc-card,.bz-pagebody .bz-band .bz-step,.bz-pagebody .bz-band .bz-strip,.bz-pagebody .bz-band .bz-pc,.bz-pagebody .bz-band .bz-cat{color:var(--ink-2)}
.bz-pagebody .bz-band .bz-svc-card h3,.bz-pagebody .bz-band .bz-step h4,.bz-pagebody .bz-band .bz-strip h3{color:var(--ink)}
.bz-pagebody .bz-band-lime{background:linear-gradient(122deg,#EFFCC9 0%,#D9F99D 55%,#BEF264 100%)}
.bz-pagebody .bz-band-teal{background:linear-gradient(122deg,#149B96 0%,#0E6E6B 48%,#084542 100%);color:#BFE3E1}
.bz-pagebody .bz-band-teal > .bz-wrap h2{color:#fff}
.bz-pagebody .bz-band-teal .bz-sub{color:#C7E4E2}
.bz-pagebody .bz-doc-row{display:flex;align-items:center;gap:.9rem;padding:.95rem 1.1rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  transition:background var(--t1),transform var(--t1),border-color var(--t1);}
.bz-pagebody .bz-doc-row:hover{background:rgba(255,255,255,.16);transform:translateX(5px);border-color:rgba(255,255,255,.4)}
.bz-pagebody .bz-doc-row .bz-itile{background:rgba(255,255,255,.14);color:#FFD9A8;width:42px;height:42px;border-radius:11px}
.bz-pagebody .bz-doc-row .bz-itile svg{width:20px;height:20px}
.bz-pagebody .bz-doc-row b{display:block;color:#fff;font-size:.95rem;line-height:1.3}
.bz-pagebody .bz-doc-row small{display:block;color:#A9D2D0;font-size:.79rem;margin-top:.15rem}
.bz-pagebody .bz-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:clamp(18px,1.8vw,28px);flex-wrap:wrap}
.bz-pagebody .bz-sec-head h2{margin:0}
.bz-pagebody .bz-sec-head .bz-sub{color:var(--muted);font-size:.94rem;margin-top:.3rem}
.bz-pagebody .bz-sec-head--center{flex-direction:column;align-items:center;text-align:center}
.bz-pagebody .bz-sec-head--center .bz-sub{max-width:60ch}
.bz-pagebody .bz-grid{display:grid;gap:20px;grid-template-columns:1fr}
.bz-pagebody .bz-g2,.bz-pagebody .bz-g3,.bz-pagebody .bz-g4{grid-template-columns:1fr}
.bz-pagebody .bz-grid>*{min-width:0}
@media(min-width:640px){
.bz-pagebody .bz-g4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:820px){
.bz-pagebody .bz-g2{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:900px){
.bz-pagebody .bz-g3{grid-template-columns:repeat(3,1fr)}
.bz-pagebody .bz-g4{grid-template-columns:repeat(4,1fr)}
}
.bz-pagebody .bz-btn{--bg:var(--orange);--fg:#fff;--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.7rem 1.35rem;border-radius:var(--r-sm);
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  font-weight:700;font-size:.94rem;line-height:1.2;letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;text-align:center;
  transition:background var(--t1),color var(--t1),border-color var(--t1),transform var(--t1),box-shadow var(--t1);}
.bz-pagebody .bz-btn:hover{--bg:var(--orange-600);transform:translateY(-1px);box-shadow:var(--sh-sm)}
.bz-pagebody .bz-btn:active{transform:translateY(0)}
.bz-pagebody .bz-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.bz-pagebody .bz-btn svg{width:18px;height:18px;flex:none}
.bz-pagebody .bz-btn--ghost{--bg:#fff;--fg:var(--ink);--bd:var(--line-2)}
.bz-pagebody .bz-btn--ghost:hover{--bg:var(--surface);--bd:var(--ink);transform:translateY(-1px)}
.bz-pagebody .bz-btn--blue{--bg:var(--blue);--fg:#fff}
.bz-pagebody .bz-btn--blue:hover{--bg:var(--blue-700)}
.bz-pagebody .bz-btn--sm{min-height:38px;padding:.45rem 1rem;font-size:.86rem;border-radius:var(--r-xs)}
.bz-pagebody .bz-btn--lg{min-height:52px;padding:.85rem 1.7rem;font-size:1rem}
.bz-pagebody .bz-link{color:var(--orange-700);font-weight:650;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--orange-200)}
.bz-pagebody .bz-link:hover{text-decoration-color:currentColor}
.bz-pagebody .bz-chip{display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .78rem;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--line);
  font-size:.8rem;font-weight:650;color:var(--ink-2);}
.bz-pagebody .bz-chip svg{width:15px;height:15px;color:var(--orange);flex:none}
.bz-pagebody .bz-chiprow{display:flex;flex-wrap:wrap;gap:.5rem}
.bz-pagebody .bz-itile{display:grid;place-items:center;flex:none;
  width:46px;height:46px;border-radius:12px;
  background:var(--orange-50);color:var(--orange-700);}
.bz-pagebody .bz-itile svg{width:22px;height:22px}
.bz-pagebody .bz-itile--lg{width:56px;height:56px;border-radius:15px}
.bz-pagebody .bz-itile--lg svg{width:26px;height:26px}
.bz-pagebody .bz-itile--sm{width:36px;height:36px;border-radius:10px}
.bz-pagebody .bz-itile--sm svg{width:18px;height:18px}
.bz-pagebody .bz-itile--blue{background:var(--blue-50);color:var(--blue-700)}
.bz-pagebody .bz-itile--green{background:var(--green-50);color:#08694A}
.bz-pagebody .bz-itile--purple{background:var(--purple-50);color:var(--purple)}
.bz-pagebody .bz-itile--rose{background:var(--rose-50);color:var(--rose)}
.bz-pagebody .bz-imgf{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--r-sm)}
.bz-pagebody .bz-imgf::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(145deg,var(--surface) 0%,var(--surface-2) 55%,var(--orange-50) 100%);}
.bz-pagebody .bz-imgf::after{content:"";position:absolute;inset:0;z-index:0;opacity:.2;
  background-repeat:no-repeat;background-position:center;background-size:32% auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320242C' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.6c2.6-1 4.8-1 7 .4v14c-2.2-1.4-4.4-1.4-7-.4z'/%3E%3Cpath d='M20 4.6c-2.6-1-4.8-1-7 .4v14c2.2-1.4 4.4-1.4 7-.4z'/%3E%3C/svg%3E");}
.bz-pagebody .bz-imgf>img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;transition:opacity .4s var(--ease),transform var(--t3)}
.bz-pagebody .bz-imgf>img.bz-ok{opacity:1}
.bz-pagebody .bz-imgf>img.bz-bad{display:none}
.bz-pagebody .bz-imgf--4x3{aspect-ratio:4/3}
.bz-pagebody .bz-slide-art{position:absolute;z-index:1;right:0;top:0;bottom:0;width:56%;
  display:none;pointer-events:none;}
@media(min-width:860px){
.bz-pagebody .bz-slide-art{display:block}
}
.bz-pagebody .bz-slide-art .bz-imgf{position:absolute;inset:0;border-radius:0;background:var(--sbg,var(--surface));
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.45) 12%,#000 34%);
  mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.45) 12%,#000 34%);}
.bz-pagebody .bz-slide-art .bz-imgf::before{background:linear-gradient(150deg,var(--sacc,#F28C28) 0%,var(--sbg,#eee) 70%);
  opacity:.55;}
.bz-pagebody .bz-slide-art .bz-imgf::after{opacity:.14}
.bz-pagebody .bz-slide-art .bz-imgf>img{filter:saturate(1.22) contrast(1.05) brightness(1.03);
  transform:scale(1.02);}
.bz-pagebody .bz-cat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;
  padding:1.2rem .8rem;border-radius:var(--r);
  background:var(--white);border:1px solid var(--line);
  transition:transform var(--t2),box-shadow var(--t2),border-color var(--t2);}
.bz-pagebody .bz-cat:hover{transform:translateY(-6px);box-shadow:0 4px 12px rgba(32,36,44,.07),0 16px 34px rgba(32,36,44,.12);border-color:var(--orange-200)}
.bz-pagebody .bz-cat b{font-size:.92rem;font-weight:700;color:var(--ink);line-height:1.25}
.bz-pagebody .bz-cat small{font-size:.75rem;color:var(--muted);line-height:1.35}
.bz-pagebody .bz-pc{position:relative;display:flex;flex-direction:column;height:100%;
  background:#fff;border-radius:var(--r);padding:10px 10px 14px;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
  will-change:transform;}
.bz-pagebody .bz-pc:hover{transform:translateY(-7px);box-shadow:0 4px 12px rgba(32,36,44,.07),0 18px 40px rgba(32,36,44,.13)}
.bz-pagebody .bz-pc .bz-imgf>img{transition:transform .5s var(--ease),opacity .4s var(--ease)}
.bz-pagebody .bz-pc:hover .bz-imgf>img{transform:scale(1.06)}
.bz-pagebody .bz-strip{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  padding:1.35rem 1.6rem;border-radius:var(--r-lg);
  background:var(--stbg,var(--purple-50));border:1px solid var(--stbd,var(--purple-100));}
.bz-pagebody .bz-strip-b{flex:1 1 300px;min-width:0}
.bz-pagebody .bz-strip h3{font-size:1.08rem;color:var(--stfg,var(--ink));margin-bottom:.2rem}
.bz-pagebody .bz-strip p{font-size:.885rem;color:var(--stbody,var(--ink-2));max-width:76ch}
.bz-pagebody .bz-strip .bz-btn{flex:none}
.bz-pagebody .bz-strip--blue{--stbg:var(--blue-50);--stbd:var(--blue-100)}
.bz-pagebody .bz-strip--orange{--stbg:var(--orange-50);--stbd:var(--orange-100)}
.bz-pagebody .bz-svc{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:600px){
.bz-pagebody .bz-svc{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1000px){
.bz-pagebody .bz-svc{grid-template-columns:repeat(4,1fr)}
}
.bz-pagebody .bz-svc-card{padding:1.5rem 1.4rem;border-radius:var(--r);background:#fff;border:1px solid var(--line);
  transition:transform var(--t2),box-shadow var(--t2),border-color var(--t2);height:100%;}
.bz-pagebody .bz-svc-card:hover{transform:translateY(-6px);box-shadow:0 4px 12px rgba(32,36,44,.07),0 16px 34px rgba(32,36,44,.12);border-color:var(--orange-200)}
.bz-pagebody .bz-svc-card h3{font-size:1.08rem;margin:.9rem 0 .35rem}
.bz-pagebody .bz-svc-card p{font-size:.885rem;color:var(--muted)}
.bz-pagebody .bz-svc-card ul{margin-top:.8rem;display:grid;gap:.35rem}
.bz-pagebody .bz-svc-card li{display:flex;gap:.45rem;font-size:.82rem;color:var(--ink-2)}
.bz-pagebody .bz-svc-card li svg{width:14px;height:14px;color:var(--green);flex:none;margin-top:4px}
.bz-pagebody .bz-field{display:block;position:relative}
.bz-pagebody .bz-field>span:first-child{display:block;font-size:.82rem;font-weight:700;color:var(--ink);margin-bottom:.35rem}
.bz-pagebody .bz-req{color:var(--rose)}
.bz-pagebody .bz-inp,.bz-pagebody .bz-field input,.bz-pagebody .bz-field select,.bz-pagebody .bz-field textarea{width:100%;min-height:46px;padding:.68rem .9rem;border-radius:var(--r-sm);
  background:#fff;border:1.5px solid var(--line-2);color:var(--ink);font-size:.94rem;
  transition:border-color var(--t1),box-shadow var(--t1);appearance:none;-webkit-appearance:none;}
.bz-pagebody .bz-field textarea{min-height:130px;resize:vertical;line-height:1.55}
.bz-pagebody .bz-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:16px;
  padding-right:2.4rem;cursor:pointer;}
.bz-pagebody .bz-inp:focus,.bz-pagebody .bz-field input:focus,.bz-pagebody .bz-field select:focus,.bz-pagebody .bz-field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px var(--orange-50);}
.bz-pagebody .bz-field input::placeholder,.bz-pagebody .bz-field textarea::placeholder{color:var(--muted-2)}
.bz-pagebody .bz-field.bz-bad input,.bz-pagebody .bz-field.bz-bad select,.bz-pagebody .bz-field.bz-bad textarea{border-color:var(--rose);box-shadow:0 0 0 4px var(--rose-50)}
.bz-pagebody .bz-err{display:none;font-size:.78rem;color:var(--rose);font-weight:650;margin-top:.3rem}
.bz-pagebody .bz-field.bz-bad .bz-err{display:block}
.bz-pagebody .bz-fgrid{display:grid;gap:1rem}
@media(min-width:620px){
.bz-pagebody .bz-fgrid--2{grid-template-columns:1fr 1fr}
.bz-pagebody .bz-fgrid--2 .bz-full{grid-column:1/-1}
}
.bz-pagebody .bz-checkline{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--muted)}
.bz-pagebody .bz-checkline input[type=checkbox]{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--orange);cursor:pointer}
.bz-pagebody .bz-fnote{display:flex;gap:.45rem;font-size:.8rem;color:var(--muted-2)}
.bz-pagebody .bz-fnote svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--orange)}
.bz-pagebody .bz-ok-msg{display:none;align-items:flex-start;gap:.75rem;margin-top:1rem;
  padding:.95rem 1.1rem;border-radius:var(--r-sm);
  background:var(--green-50);border:1px solid var(--green-100);color:#08694A;font-size:.89rem;}
.bz-pagebody .bz-ok-msg.bz-on{display:flex}
.bz-pagebody .bz-ok-msg svg{width:19px;height:19px;flex:none;margin-top:2px}
.bz-pagebody .bz-ok-msg b{display:block;color:#065F43}
.bz-pagebody .bz-drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:1.6rem 1.2rem;border-radius:var(--r-sm);text-align:center;
  border:2px dashed var(--line-2);background:var(--surface);
  transition:border-color var(--t1),background var(--t1);cursor:pointer;}
.bz-pagebody .bz-drop:hover,.bz-pagebody .bz-drop.bz-over{border-color:var(--orange);background:var(--orange-50)}
.bz-pagebody .bz-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.bz-pagebody .bz-drop b{font-size:.9rem;color:var(--ink)}
.bz-pagebody .bz-drop small{font-size:.78rem;color:var(--muted)}
.bz-pagebody .bz-files{display:grid;gap:.5rem;margin-top:.7rem}
.bz-pagebody .bz-file-i{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xs);font-size:.85rem;}
.bz-pagebody .bz-file-i .bz-itile{width:32px;height:32px;border-radius:8px}
.bz-pagebody .bz-file-i .bz-itile svg{width:16px;height:16px}
.bz-pagebody .bz-file-i b{flex:1;min-width:0;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bz-pagebody .bz-file-i small{color:var(--muted-2);flex:none}
.bz-pagebody .bz-file-i button{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:6px;color:var(--muted)}
.bz-pagebody .bz-file-i button:hover{background:var(--rose-50);color:var(--rose)}
.bz-pagebody .bz-file-i button svg{width:15px;height:15px}
.bz-pagebody .bz-file-i.bz-bad{border-color:var(--rose);background:var(--rose-50)}
.bz-pagebody .bz-dw-head{display:flex;align-items:center;gap:.7rem;padding:1.05rem var(--pad);border-bottom:1px solid var(--line);flex:none}
.bz-pagebody .bz-dw-head h3{flex:1;font-size:1.15rem}
.bz-pagebody .bz-dw-head .bz-n{font-size:.8rem;font-weight:650;color:var(--muted-2)}
.bz-pagebody .bz-empty{text-align:center;padding:3.5rem 1.2rem;max-width:34rem;margin-inline:auto}
.bz-pagebody .bz-empty .bz-itile{margin:0 auto 1rem}
.bz-pagebody .bz-empty h3{margin-bottom:.4rem}
.bz-pagebody .bz-empty p{color:var(--muted);font-size:.93rem}
.bz-pagebody .bz-empty .bz-btn{margin-top:1.2rem}
.bz-pagebody .bz-fopt{display:flex;align-items:center;gap:.55rem;padding:.34rem 0;font-size:.885rem;color:var(--ink-2);cursor:pointer;min-height:32px}
.bz-pagebody .bz-fopt input{width:17px;height:17px;accent-color:var(--orange);flex:none;cursor:pointer}
.bz-pagebody .bz-fopt:hover{color:var(--orange-700)}
.bz-pagebody .bz-fopt .bz-n{margin-left:auto;font-size:.78rem;color:var(--muted-2)}
.bz-pagebody .bz-acc{border-bottom:1px solid var(--line)}
.bz-pagebody .bz-acc-q{display:flex;align-items:center;gap:1rem;width:100%;text-align:left;
  padding:1.05rem 0;font-weight:700;font-size:.99rem;color:var(--ink);min-height:52px;}
.bz-pagebody .bz-acc-q:hover{color:var(--orange-700)}
.bz-pagebody .bz-acc-ic{margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;background:var(--surface);color:var(--ink);display:grid;place-items:center;transition:transform var(--t2),background var(--t1)}
.bz-pagebody .bz-acc-ic svg{width:14px;height:14px}
.bz-pagebody .bz-acc.bz-open .bz-acc-ic{transform:rotate(45deg);background:var(--orange);color:#fff}
.bz-pagebody .bz-acc-a{max-height:0;overflow:hidden;transition:max-height var(--t3)}
.bz-pagebody .bz-acc-a-in{padding-bottom:1.15rem;color:var(--muted);font-size:.92rem}
.bz-pagebody .bz-acc-a-in p+p{margin-top:.65rem}
.bz-pagebody .bz-doc{display:grid;gap:36px}
@media(min-width:960px){
.bz-pagebody .bz-doc{grid-template-columns:250px 1fr;align-items:start}
}
.bz-pagebody .bz-toc{position:sticky;top:calc(var(--sticky) + 16px);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem}
@media(max-width:959px){
.bz-pagebody .bz-toc{position:static}
}
.bz-pagebody .bz-toc h4{font-family:var(--ff);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.7rem}
.bz-pagebody .bz-toc a{display:block;padding:.38rem .5rem;border-radius:var(--r-xs);font-size:.85rem;font-weight:600;color:var(--muted);line-height:1.35}
.bz-pagebody .bz-toc a:hover{background:var(--surface);color:var(--ink)}
.bz-pagebody .bz-toc a.bz-on{background:var(--orange-50);color:var(--orange-700);font-weight:750}
.bz-pagebody .bz-prose{max-width:74ch}
.bz-pagebody .bz-prose>section{scroll-margin-top:calc(var(--sticky) + 20px)}
.bz-pagebody .bz-prose>section+section{margin-top:2.4rem}
.bz-pagebody .bz-prose h2{font-size:clamp(1.3rem,1.15rem + .7vw,1.65rem);margin-bottom:.7rem;display:flex;gap:.6rem;align-items:baseline}
.bz-pagebody .bz-prose h2 .bz-num{font-family:var(--ff);font-size:.74rem;font-weight:800;color:var(--orange-700);background:var(--orange-50);padding:.18rem .45rem;border-radius:var(--r-xs);flex:none}
.bz-pagebody .bz-prose h3{font-size:1.08rem;margin:1.3rem 0 .45rem}
.bz-pagebody .bz-prose p{margin-bottom:.85rem;font-size:.955rem}
.bz-pagebody .bz-prose ul{margin:0 0 1rem;display:grid;gap:.45rem}
.bz-pagebody .bz-prose ul li{position:relative;padding-left:1.35rem;font-size:.94rem}
.bz-pagebody .bz-prose ul li::before{content:"";position:absolute;left:.2rem;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--orange)}
.bz-pagebody .bz-prose ol{counter-reset:s;display:grid;gap:.8rem;margin-bottom:1rem}
.bz-pagebody .bz-prose ol li{counter-increment:s;position:relative;padding-left:2.3rem;font-size:.94rem}
.bz-pagebody .bz-prose ol li::before{content:counter(s);position:absolute;left:0;top:0;width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;background:var(--teal-d);color:#fff;font-size:.75rem;font-weight:800;}
.bz-pagebody .bz-prose a:not(.bz-btn){color:var(--orange-700);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.bz-pagebody .bz-callout{display:flex;gap:.85rem;padding:1.1rem 1.2rem;border-radius:var(--r-sm);margin:1.2rem 0;background:var(--orange-50);border:1px solid var(--orange-100)}
.bz-pagebody .bz-callout .bz-itile{width:36px;height:36px;border-radius:10px;background:#fff}
.bz-pagebody .bz-callout .bz-itile svg{width:18px;height:18px}
.bz-pagebody .bz-callout b{display:block;color:var(--ink);margin-bottom:.15rem}
.bz-pagebody .bz-callout p{font-size:.89rem;margin:0}
.bz-pagebody .bz-callout--blue{background:var(--blue-50);border-color:var(--blue-100)}
.bz-pagebody .bz-callout--blue .bz-itile{color:var(--blue-700)}
.bz-pagebody .bz-callout--rose{background:var(--rose-50);border-color:var(--rose-100)}
.bz-pagebody .bz-callout--rose .bz-itile{color:var(--rose)}
.bz-pagebody .bz-updated{display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .8rem;border-radius:var(--r-pill);background:var(--surface);font-size:.8rem;font-weight:700;color:var(--muted)}
.bz-pagebody .bz-updated svg{width:14px;height:14px;color:var(--orange)}
.bz-pagebody .bz-phero{padding-block:clamp(22px,2.4vw,40px) clamp(20px,2vw,32px);border-bottom:1px solid var(--line)}
.bz-pagebody .bz-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.8rem;color:var(--muted-2);font-weight:600;margin-bottom:.85rem}
.bz-pagebody .bz-crumbs a:hover{color:var(--orange-700)}
.bz-pagebody .bz-crumbs svg{width:12px;height:12px;opacity:.6}
.bz-pagebody .bz-crumbs [aria-current]{color:var(--ink);font-weight:700}
.bz-pagebody .bz-phero h1{max-width:20ch}
.bz-pagebody .bz-phero .bz-lede{margin-top:.7rem}
.bz-pagebody .bz-phero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.bz-pagebody .bz-steps{display:grid;gap:18px}
@media(min-width:820px){
.bz-pagebody .bz-steps{grid-template-columns:repeat(3,1fr)}
}
.bz-pagebody .bz-step{position:relative;padding:1.5rem 1.4rem;border-radius:var(--r);background:#fff;border:1px solid var(--line);transition:transform var(--t2),box-shadow var(--t2)}
.bz-pagebody .bz-step:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.bz-pagebody .bz-step .bz-n{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--teal-d);color:#fff;font-family:var(--ff-d);font-weight:800;font-size:.95rem;}
.bz-pagebody .bz-step h4{margin:.85rem 0 .35rem;font-size:1.05rem}
.bz-pagebody .bz-step p{font-size:.885rem;color:var(--muted)}
.bz-pagebody .bz-ccards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.bz-pagebody .bz-ccard{display:flex;gap:.85rem;padding:1.2rem;border:1px solid var(--line);border-radius:var(--r);transition:border-color var(--t2),box-shadow var(--t2)}
.bz-pagebody .bz-ccard:hover{border-color:var(--orange-200);box-shadow:var(--sh-xs)}
.bz-pagebody .bz-ccard h4{font-family:var(--ff);font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2)}
.bz-pagebody .bz-ccard b{display:block;font-size:.96rem;color:var(--ink);margin-top:.3rem;line-height:1.45;font-weight:700}
.bz-pagebody .bz-ccard a:hover{color:var(--orange-700)}
.bz-pagebody .bz-ccard small{display:block;color:var(--muted);font-size:.81rem;margin-top:.25rem}
.bz-pagebody .bz-mapf{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);position:relative;background:var(--surface)}
.bz-pagebody .bz-mapf iframe{display:block;width:100%;height:clamp(280px,34vw,400px);border:0}
.bz-pagebody .bz-map-tag{position:absolute;left:14px;bottom:14px;background:#fff;border-radius:var(--r-sm);padding:.75rem .95rem;box-shadow:var(--sh);display:flex;gap:.6rem;align-items:center;max-width:calc(100% - 28px)}
.bz-pagebody .bz-map-tag b{display:block;font-size:.9rem;color:var(--ink)}
.bz-pagebody .bz-map-tag small{display:block;color:var(--muted);font-size:.78rem}
.bz-pagebody .bz-socs{display:flex;gap:.5rem;flex-wrap:wrap}
.bz-pagebody .bz-soc{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.55rem 1rem;border-radius:var(--r-sm);border:1px solid var(--line);font-size:.86rem;font-weight:700;color:var(--ink);transition:all var(--t1)}
.bz-pagebody .bz-soc svg{width:17px;height:17px}
.bz-pagebody .bz-soc:hover{border-color:var(--orange);color:var(--orange-700);background:var(--orange-50)}
.bz-pagebody .bz-d1{transition-delay:.06s}
.bz-pagebody .bz-d2{transition-delay:.12s}
.bz-pagebody .bz-d3{transition-delay:.18s}
.bz-pagebody .bz-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bz-pagebody .bz-mt1{margin-top:.6rem}
.bz-pagebody .bz-mt2{margin-top:1.1rem}
.bz-pagebody .bz-mt3{margin-top:1.7rem}
.bz-pagebody .bz-mt4{margin-top:2.3rem}

.bz-pagebody .bz-sec.bz-v5-tone{border-top:1px solid rgba(32,36,44,.045);border-bottom:1px solid rgba(32,36,44,.045)}
.bz-pagebody .bz-sec.bz-v5-peach{background:var(--v5-peach)}
.bz-pagebody .bz-sec.bz-v5-sky{background:var(--v5-sky)}
.bz-pagebody .bz-sec.bz-v5-pink{background:var(--v5-pink)}
.bz-pagebody .bz-sec.bz-v5-gold{background:var(--v5-gold)}
.bz-pagebody .bz-sec.bz-v5-mint{background:var(--v5-mint)}
.bz-pagebody .bz-sec.bz-v5-white{background:#fff}
.bz-pagebody .bz-sec.bz-v5-tone .bz-pc,.bz-pagebody .bz-sec.bz-v5-tone .bz-cat{background:#fff}
.bz-pagebody .bz-v5-peach .bz-cat{border-color:rgba(242,140,40,.16);box-shadow:0 8px 24px rgba(71,48,29,.055)}
.bz-pagebody .bz-v5-peach .bz-cat:hover{box-shadow:0 14px 34px rgba(71,48,29,.10)}
.bz-pagebody .bz-slide-art{width:54%}
.bz-pagebody .bz-slide-art .bz-imgf{box-shadow:-18px 0 38px rgba(32,36,44,.06)}
.bz-pagebody .bz-slide-art .bz-imgf>img{object-position:var(--spos,center center);
  filter:saturate(1.34) contrast(1.08) brightness(1.055);
  transform:scale(1.025);}
.bz-pagebody .bz-slide-art .bz-imgf::after{opacity:.08}

/* ---------- FORM NOTE ---------- */
.bz-pagebody .bz-formnote{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:14px;margin-bottom:18px}
.bz-pagebody .bz-formnote strong{display:block;font-family:var(--bz-ff-d);font-size:15px;font-weight:750;margin-bottom:2px}
.bz-pagebody .bz-formnote span span{font-size:13.5px}
.bz-pagebody .bz-formnote__ic{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;flex:0 0 auto}
.bz-pagebody .bz-formnote__ic svg{width:18px;height:18px}
.bz-pagebody .bz-formnote--ok{background:#E6F7F0;color:#0A5C42}
.bz-pagebody .bz-formnote--ok .bz-formnote__ic{background:#0E9F6E;color:#fff}
.bz-pagebody .bz-formnote--err{background:#FDEEF4;color:#8C1244}
.bz-pagebody .bz-formnote--err .bz-formnote__ic{background:#E11D6B;color:#fff}

/* ---------------- Reveal ----------------
   Content is hidden only while the document is marked script-enabled, so a
   blocked or failed script can never leave a page blank; .bz-reveal-all is
   the four-second failsafe set in the head. Keep this block last: these
   rules must win over the base states above. */
.bz-js .bz-pagebody .bz-rv{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.bz-reveal-all .bz-pagebody .bz-rv{opacity:1;transform:none}
.bz-pagebody .bz-rv.bz-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.bz-js .bz-pagebody .bz-rv{opacity:1;transform:none}}
@media print{.bz-js .bz-pagebody .bz-rv{opacity:1;transform:none}}
.bz-js .bz-pagebody .bz-imgf>img{opacity:0}
.bz-pagebody .bz-imgf>img.bz-ok{opacity:1}
.bz-pagebody .bz-imgf>img.bz-bad{display:none}

/* ---- element-level rules from the original stylesheet ----
   They were written unscoped there (ul, ol, svg, table and friends);
   here each one is confined to .bz-pagebody so it cannot reach the
   header, the footer, or any WooCommerce or Elementor markup.
   Without the list reset the browser default disc marker rendered
   alongside the orange dot the design draws itself, which is what
   produced double bullets and pushed list text onto its own line. */
.bz-pagebody ul,.bz-pagebody ol{padding:0;list-style:none}
.bz-pagebody img,.bz-pagebody svg,.bz-pagebody video,.bz-pagebody canvas{display:block;max-width:100%}
.bz-pagebody img{height:auto}
.bz-pagebody button,.bz-pagebody input,.bz-pagebody select,.bz-pagebody textarea{font:inherit;color:inherit}
.bz-pagebody button{background:none;border:0;cursor:pointer;padding:0}
.bz-pagebody [hidden]{display:none !important}
.bz-pagebody ::selection{background:var(--orange-200);color:var(--ink)}
.bz-pagebody p{text-wrap:pretty}
.bz-pagebody strong,.bz-pagebody b{font-weight:700;color:var(--ink)}
.bz-pagebody em{font-style:italic}
.bz-pagebody table{border-collapse:collapse;width:100%}
.bz-pagebody :focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}

/* ---- heading scale from the original stylesheet ----
   The site-wide rules in bookzilla.css use a different scale, so page
   bodies were rendering headings at the wrong size, weight and tracking.
   div.bz-pagebody is deliberately (0,1,2) - the same weight as
   body.bookzilla-site h1 so this sheet wins on load order, but lower
   than the component rules like .bz-prose h2, which must still win. */
div.bz-pagebody h1,div.bz-pagebody h2,div.bz-pagebody h3,div.bz-pagebody h4,div.bz-pagebody h5{font-family:var(--ff-d);color:var(--ink);line-height:1.15;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
div.bz-pagebody h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.15rem);letter-spacing:-.032em;line-height:1.06}
div.bz-pagebody h2{font-size:clamp(1.55rem,1.25rem + 1.35vw,2.2rem);letter-spacing:-.026em}
div.bz-pagebody h3{font-size:clamp(1.2rem,1.08rem + .5vw,1.5rem);letter-spacing:-.02em}
div.bz-pagebody h4{font-size:1.06rem;letter-spacing:-.012em;line-height:1.3}

/* ---- neutralise the parent theme button state ----
   The Hello Elementor reset paints every button #c36 with white text on
   hover and focus, which is the red flash on the FAQ questions. Page-body
   buttons carry their own design, so that is undone here. .bz-btn is
   excluded so the orange and green buttons keep their own hover. */
.bz-pagebody button:not(.bz-btn):hover,
.bz-pagebody button:not(.bz-btn):focus{background:none;text-decoration:none}
.bz-pagebody .bz-acc-q:hover,
.bz-pagebody .bz-acc-q:focus{color:var(--orange-700);background:none}
.bz-pagebody .bz-acc-q:focus:not(:focus-visible){outline:none}

/* ============================================================
   v5.6 PARITY, ROUND 2
   ------------------------------------------------------------
   The first pass went into bookzilla.css, which loads BEFORE
   bookzilla-woo.css. Every selector those two share -- the whole
   carousel and the hero padding -- kept the woo value. These live
   in bookzilla-pages.css instead, which loads last.
   Two more lost on specificity rather than order, and say so.
   ============================================================ */

/* ---------- hero carousel ---------- */
.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}
.bz-hero{padding-block:clamp(16px,1.6vw,28px) 0}

/* ---------- search ---------- */
/* The button carries the word "Search" after its glyph. v5.6's is the
   glyph alone in a 56px square, so the word is sized away -- it stays
   in the accessibility tree as the button's name. */
.bz-hdr .bz-search button{font-size:0;line-height:0;gap:0}
/* the span carries an inline width in the header widget's markup, so the
   glyph can only be brought to v5.6's 19px by outranking that */
.bz-hdr .bz-search button > span{width:19px!important;height:19px!important;flex:none;display:block}
.bz-hdr .bz-search button svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none}

/* ---------- "Or browse by subject" ---------- */
/* body.bookzilla-site p is (0,1,2) and was flattening this to 0 0 1em. */
body.bookzilla-site p.bz-subhead{margin:26px 0 12px}

/* ---------- footer headings ---------- */
/* body.bookzilla-site h4 is (0,1,2): it was painting these near-black on
   the dark teal and holding them in Manrope. v5.6 has them white in Inter. */
body.bookzilla-site .bz-foot h4{
  font-family:var(--bz-ff);color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;margin:0 0 .9rem;
}

/* ============================================================
   v5.6 PARITY, ROUND 3
   ------------------------------------------------------------
   Every value below is read out of bookzillav5_6.html's own
   stylesheet rather than judged by eye, and each rule is placed
   here -- the last file to load -- so nothing upstream outranks
   it. Comments name the v5.6 selector each block answers.
   ============================================================ */

/* ---------- hero carousel: the chevron row ----------
   v5.6 .car-nav is bottom:14px z-index:6, and only drops to
   bottom:10px under 600px, where the buttons also shrink to 30px.
   Round 2 applied the phone value at every width, so the controls
   sat 4px low on desktop. */
.bz-carnav{bottom:14px;gap:.5rem;z-index:6}
.bz-carbtn{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.bz-carbtn svg{display:block;pointer-events:none}
@media(max-width:600px){
  .bz-carnav{bottom:10px}
  .bz-carbtn{width:30px;height:30px}
}

/* ---------- header search ----------
   v5.6 .search-in is 50px tall and .search-go fills it (height:100%),
   dropping to 46px on the small-screen row. */
.bz-hdr .bz-search{height:50px}
.bz-hdr .bz-search button{height:100%}
@media(max-width:900px){
  .bz-hdr .bz-search{height:46px}
}

/* ---------- section tints ----------
   v5.6 tints sections from its own --v5-* ramp, not the generic
   *-50 swatches, and hairlines every tinted one top and bottom
   (.sec.v5-tone). --v5-sky in particular is a cyan white, where
   --bz-blue-50 is indigo. */
.bz-band--peach{background:#FFF3E8}
.bz-band--blue{background:#EEF8FF}
.bz-band--pink{background:#FFF0F7}
.bz-band--peach,.bz-band--blue,.bz-band--pink,.bz-band--sale{
  border-top:1px solid rgba(32,36,44,.045);
  border-bottom:1px solid rgba(32,36,44,.045);
}

/* ---------- footer ----------
   v5.6 .ftr sets no font-size of its own and every child asks for
   .885rem; the theme was scaling the whole footer to 13.5px, which
   is why the blurb and the address block read small. .ftr also
   carries margin-top:clamp(40px,4vw,72px) -- the gap above the
   teal that has been missing. */
body.bookzilla-site .bz-foot{
  margin-top:clamp(40px,4vw,72px);
  font-size:.885rem;
}

/* the contact column: v5.6 .ftr-c svg is orange and .ftr-c a is a
   lighter ink than the rest of the footer's links */
body.bookzilla-site .bz-foot ul li svg{color:var(--bz-orange)}
body.bookzilla-site .bz-foot a[href^="tel:"],
body.bookzilla-site .bz-foot a[href^="mailto:"]{color:#D3E7E5}
body.bookzilla-site .bz-foot a[href^="tel:"]:hover,
body.bookzilla-site .bz-foot a[href^="mailto:"]:hover{color:var(--bz-orange)}

/* v5.6 .ftr .logo-sub is #79A9A6, not white at 72% */
body.bookzilla-site .bz-foot .bz-logo__word--dark span{color:#79A9A6}

/* v5.6 .ftr-grid goes four columns at 1040px and one at 640px,
   holding a 32px gutter throughout */
@media(min-width:1040px){
  body.bookzilla-site .bz-foot__cols{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px}
}
@media(max-width:1039px){
  body.bookzilla-site .bz-foot__cols{grid-template-columns:repeat(2,1fr);gap:32px}
}
@media(max-width:639px){
  body.bookzilla-site .bz-foot__cols{grid-template-columns:1fr;gap:32px}
}

/* ============================================================
   HEADER SEARCH: CENTRED, UNRINGED, AND WITH SUGGESTIONS
   ------------------------------------------------------------
   Three separate things, all belonging to the same control.
   ============================================================ */

/* ---------- centring ----------
   The row was flex: logo, then a search that grows to 660px, then
   actions pushed right by margin-left:auto -- so all the slack piled
   up on one side of the search. Three grid tracks put the slack on
   both sides instead. The two outer tracks are equal, so the search
   sits on the page's centre line; each keeps a max-content floor so
   the logo and the actions are never squeezed, and the middle track
   can shrink below 660px when the window is tight. Below 901px the
   header wraps the search onto its own row, so flex still rules there. */
@media(min-width:901px){
  .bz-hdr .bz-wrap{
    display:grid;
    grid-template-columns:minmax(max-content,1fr) minmax(0,660px) minmax(max-content,1fr);
    align-items:center;
  }
  .bz-hdr .bz-acts{justify-self:end}
  /* the lockup keeps its own width; a stretched grid item would make
     the whole left track a link to the home page */
  .bz-hdr .bz-logo{justify-self:start}
}

/* ---------- the focus ring ----------
   body.bookzilla-site :focus-visible paints a 3px teal outline on
   whatever has focus. That is right everywhere else, but on the search
   it drew a second rectangle inside the pill's own orange focus ring.
   The pill still lights up, so focus stays visible -- and the ring is
   untouched on every other control on the site. */
body.bookzilla-site .bz-hdr .bz-search input:focus,
body.bookzilla-site .bz-hdr .bz-search input:focus-visible{
  outline:none;
}

/* ---------- the suggestions panel ----------
   Ported from v5.6's .ac. The form carries overflow:hidden, so the
   script lifts it into a positioned wrapper and hangs the panel off
   that; these two rules keep the wrapper behaving exactly as the bare
   form did, at every width. */
.bz-hdr .bz-searchwrap{
  position:relative;display:flex;flex:1;min-width:0;max-width:660px;
}
.bz-hdr .bz-searchwrap > .bz-search{flex:1;max-width:none;min-width:0}
@media(max-width:900px){
  .bz-hdr .bz-searchwrap{order:3;flex:1 0 100%;max-width:none}
}

.bz-ac{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:80;
  background:#fff;border:1px solid var(--bz-line);border-radius:var(--bz-r);
  box-shadow:0 12px 32px rgba(32,36,44,.14),0 2px 8px rgba(32,36,44,.08);
  overflow:hidden;max-height:min(72vh,520px);overflow-y:auto;
  display:none;text-align:left;
}
.bz-ac.is-open{display:block}

.bz-ac__head{
  padding:.7rem 1rem .4rem;
  font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bz-muted-2);
}
.bz-ac__item{
  display:flex;align-items:center;gap:.8rem;width:100%;
  padding:.6rem 1rem;text-align:left;color:var(--bz-ink);
  transition:background var(--bz-t1);
}
.bz-ac__item:hover,.bz-ac__item.is-sel{background:var(--bz-orange-50)}
.bz-ac__thumb{width:38px;flex:none;display:block}
.bz-ac__thumb img{width:38px;height:auto;display:block;border-radius:4px}
.bz-ac__b{flex:1;min-width:0}
.bz-ac__b b{
  display:block;font-size:.9rem;font-weight:650;color:var(--bz-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bz-ac__b small{display:block;font-size:.76rem;color:var(--bz-muted)}
.bz-ac__price{font-weight:800;font-size:.9rem;color:var(--bz-ink);flex:none}
.bz-ac__foot{
  padding:.7rem 1rem;border-top:1px solid var(--bz-line);
  background:var(--bz-orange-50);
}
.bz-ac__foot a{font-size:.86rem;font-weight:700;color:var(--bz-orange-700)}
.bz-ac__none{
  padding:1.6rem 1rem;text-align:center;
  color:var(--bz-muted);font-size:.9rem;line-height:1.5;
}
.bz-ac__none strong{color:var(--bz-ink)}

/* ============================================================
   THE THREE ICON BUTTONS, BROUGHT TO v5.6
   ------------------------------------------------------------
   v5.6's reset opens with

       button{background:none;border:0;cursor:pointer;padding:0}

   This site inherits Hello Elementor's reset instead, which gives
   every bare <button> a 1px #c36 border, .5rem 1rem of padding, and
   a magenta background on :hover AND :focus. All three controls set
   their own size and border but none of them resets the padding, so
   each glyph was being centred inside a content box far smaller than
   the circle it sits in -- and where the glyph is wider than that box
   the browser pins it to the start edge rather than letting it spill
   evenly, which is the sideways shift. The colour that appears on
   hover and after a click is that same reset's #c36.
   ============================================================ */

.bz-carbtn,
.bz-totop,
.bz-hdr .bz-search button{
  padding:0;
  -webkit-appearance:none;appearance:none;
}

/* with the padding gone the box is the circle, so centring is true */
.bz-carbtn,.bz-totop{place-content:center;place-items:center}
.bz-carbtn svg,.bz-totop svg,.bz-hdr .bz-search button svg{display:block}

/* The search button carries the word "Search" after its glyph, sized
   away for sighted readers but still a grid item -- and two auto rows
   in a stretched grid split the button in half, which is what pushed
   the magnifier above centre. One flex line puts the zero-width word
   beside the glyph instead of beneath it. */
.bz-hdr .bz-search button{
  display:flex;align-items:center;justify-content:center;
}

/* v5.6's back-to-top is .fab--top: 42px across, the lighter hairline,
   the deeper shadow, a 20px glyph, 16px off the corner, and a lift
   rather than a repaint on hover. */
.bz-totop{
  width:42px;height:42px;left:16px;bottom:16px;
  border-color:var(--bz-line);
  box-shadow:var(--bz-sh-lg);
  transition:transform var(--bz-t1),opacity var(--bz-t2);
}
.bz-totop svg{width:20px;height:20px}
@media(max-width:640px){
  .bz-totop{left:12px;bottom:12px}
}

/* ---------- held steady on hover, focus and press ----------
   Each control keeps its own colour in every state. The :focus arms
   matter as much as :hover: Hello's reset repaints on focus too, so
   without them a chevron stayed magenta after it was clicked. */
.bz-carbtn,
.bz-carbtn:hover,
.bz-carbtn:focus,
.bz-carbtn:active{
  background:rgba(255,255,255,.93);
  color:var(--bz-ink);
  border-color:rgba(32,36,44,.13);
}
.bz-carbtn:hover{transform:scale(1.07)}

.bz-totop,
.bz-totop:hover,
.bz-totop:focus,
.bz-totop:active{
  background:#fff;
  color:var(--bz-ink);
  border-color:var(--bz-line);
}
.bz-totop:hover{transform:translateY(-2px) scale(1.05)}

.bz-hdr .bz-search button,
.bz-hdr .bz-search button:hover,
.bz-hdr .bz-search button:focus,
.bz-hdr .bz-search button:active{
  background:var(--bz-teal);
  color:#fff;
}

/* ============================================================
   AUTH CARDS, BUILT TO v5.6
   ------------------------------------------------------------
   v5.6 draws log in and sign up as one card design: .modal-card
   at 420px with a 24px radius, a centred heading, a grey provider
   stack, an "or" rule, then the fields. Its auth call-to-action
   is deliberately blue where the rest of the site is orange --
   that is v5.6's own choice and it is kept here.
   ============================================================ */

/* ---------- the card ---------- */
.bz-modal__panel{
  width:min(100%,420px);
  border-radius:var(--bz-r-xl);
  padding:2rem 1.9rem 1.9rem;
  box-shadow:var(--bz-sh-lg);
  max-height:90vh;
}
.bz-modal__x{
  top:.9rem;right:.9rem;width:34px;height:34px;
  background:var(--bz-surface);color:var(--bz-muted);
  transition:background var(--bz-t1),color var(--bz-t1);
}
.bz-modal__x:hover{background:var(--bz-surface-2);color:var(--bz-ink)}
.bz-modal__x svg{width:18px;height:18px}

.bz-authh{text-align:center;margin-bottom:1.3rem}
.bz-authh h2{font-size:1.5rem;margin:0}
.bz-authh p{font-size:.88rem;color:var(--bz-muted);margin:.3rem 0 0}

/* ---------- providers ----------
   Heateor's own element stays where it is and keeps its click
   handling; it is stretched invisibly across the row so every
   press still reaches it, and the row below is what is seen. */
.bz-sso,
.bz-sso .heateor_sl_login_container,
.bz-sso .heateor_sl_login_ul{
  display:grid;gap:.6rem;margin:0;padding:0;list-style:none;
}
.bz-sso .heateor_sl_title,
.bz-sso .heateor_sl_social_login_title,
.bz-sso .heateor_sl_outer_login_container > div:first-child:empty{display:none}

.bz-sso li{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:48px;border-radius:var(--bz-r-sm);
  background:var(--bz-surface);border:1px solid transparent;
  transition:background var(--bz-t1),border-color var(--bz-t1);
  cursor:pointer;list-style:none;margin:0;padding:0;
}
.bz-sso li:hover{background:var(--bz-surface-2);border-color:var(--bz-line-2)}

.bz-sso__face{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  width:100%;font-size:.92rem;font-weight:650;color:var(--bz-ink);
}
.bz-sso__face svg{width:19px;height:19px;flex:none;display:block}

.bz-sso li .heateorSlLogin{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  margin:0!important;padding:0!important;
  border-radius:0!important;background:none!important;
  opacity:0;z-index:2;cursor:pointer;display:block!important;
}

/* until the dressing pass runs, the plugin's own icons are still
   usable rather than invisible */
html:not(.bz-auth-ready) .bz-sso li .heateorSlLogin{position:static!important;opacity:1}

.bz-authdiv{
  display:flex;align-items:center;gap:.8rem;margin:1.15rem 0;
  color:var(--bz-muted-2);font-size:.82rem;
}
.bz-authdiv::before,.bz-authdiv::after{
  content:"";flex:1;height:1px;background:var(--bz-line);
}

/* ---------- the form ---------- */
.bz-authform{display:grid;gap:.9rem;text-align:left}
.bz-authform .bz-field{display:block;position:relative;margin:0;gap:0}
.bz-authform .bz-field > span:first-child{
  display:block;font-size:.82rem;font-weight:700;color:var(--bz-ink);
  margin-bottom:.35rem;
}
.bz-authform .bz-field input{
  width:100%;min-height:46px;height:auto;padding:.68rem .9rem;
  border-radius:var(--bz-r-sm);background:#fff;
  border:1.5px solid var(--bz-line-2);color:var(--bz-ink);
  font-family:var(--bz-ff);font-size:.94rem;
  transition:border-color var(--bz-t1),box-shadow var(--bz-t1);
  appearance:none;-webkit-appearance:none;
}
.bz-authform .bz-field input:focus{
  outline:none;border-color:var(--bz-orange);
  box-shadow:0 0 0 4px var(--bz-orange-50);
}
.bz-authform .bz-field input::placeholder{color:var(--bz-muted-2)}

.bz-authform .bz-authforgot{
  text-align:right;font-size:.82rem;font-weight:650;
  color:var(--bz-blue);margin-top:-.4rem;
}
.bz-authform .bz-authforgot:hover{text-decoration:underline}

.bz-authlegal{
  font-size:.78rem;color:var(--bz-muted);text-align:center;
  line-height:1.5;margin:0;
}
.bz-authlegal a{color:var(--bz-blue);font-weight:600}

/* v5.6's auth button is --blue with --blue-700 on hover; the theme's
   .bz-btn--blue starts at the darker one, so it is set back here. */
.bz-modal .bz-btn--blue{--b:var(--bz-blue)}
.bz-modal .bz-btn--blue:hover{--b:var(--bz-blue-700)}

.bz-authsub{
  text-align:center;font-size:.88rem;color:var(--bz-muted);
  margin:1.1rem 0 0;
}
.bz-authsub button{
  font:inherit;font-weight:750;color:var(--bz-blue);
  background:none;border:0;padding:0;cursor:pointer;
}
.bz-authsub button:hover{text-decoration:underline}

@media(max-width:420px){
  .bz-modal__panel{padding:1.6rem 1.2rem 1.4rem}
  .bz-authh h2{font-size:1.32rem}
}

/* ---------- answering Heateor's own layout ----------
   The plugin floats its icons left with ul.heateor_sl_login_ul li at
   (0,1,2) and carries !important margins on the list, both of which
   outrank a plain .bz-sso li. These are the same rules written with
   enough weight to stand the providers in a column instead. */
.bz-sso > div[style*="clear"]{display:none}

.bz-sso ul.heateor_sl_login_ul{
  display:grid!important;gap:.6rem;
  margin:0!important;padding:0!important;list-style:none!important;
}
.bz-sso ul.heateor_sl_login_ul li{
  position:relative;overflow:hidden;cursor:pointer;
  float:none!important;clear:none!important;width:100%!important;
  display:flex!important;align-items:center;justify-content:center;
  min-height:48px;margin:0!important;padding:0!important;
  border:1px solid transparent!important;border-radius:var(--bz-r-sm);
  background:var(--bz-surface);
  transition:background var(--bz-t1),border-color var(--bz-t1);
}
.bz-sso ul.heateor_sl_login_ul li:hover{
  background:var(--bz-surface-2);
  border-color:var(--bz-line-2)!important;
}

/* ============================================================
   ANSWERING HELLO ELEMENTOR'S BUTTON RESET, EVERYWHERE
   ------------------------------------------------------------
   The parent theme's reset.css says:

     [type=button],[type=submit],button{
       border:1px solid #c36;color:#c36;padding:.5rem 1rem }
     [type=button]:focus,[type=button]:hover,
     [type=submit]:focus,[type=submit]:hover,
     button:focus,button:hover{ background-color:#c36;color:#fff }

   Two separate faults come out of that, and both were being
   fixed one control at a time.

   The padding is why every icon button sat off centre: a 34px
   round button with 16px of side padding has a 2px content box,
   and a glyph wider than its box is pinned to the start edge
   rather than allowed to spill evenly.

   The magenta is why controls flashed the wrong colour. Note it
   is on :focus as well as :hover, which is why a button stayed
   wrong after a click, not just under the pointer.

   Both reset rules are written at element specificity, so they
   quietly outrank any component rule that only names a class --
   .bz-btn{background:var(--b)} among them. That is the whole
   mechanism. v5.6 never had it, because its own reset opens

     button{background:none;border:0;cursor:pointer;padding:0}

   ------------------------------------------------------------
   1. the padding, at the reset's own weight so every component
      that sets its own padding still wins
   ============================================================ */
/* The reset neutraliser that used to sit here has moved to the head of
   bookzilla.css. At [type=button] it weighs the same as .bz-btn, so
   from the last file it was winning on order and stripping the padding
   and radius off every themed button. From the first file it still
   beats the parent reset and still loses to every component. */

/* ------------------------------------------------------------
   2. the magenta, one weight above the reset so it is gone from
      every button on the site -- themed, WooCommerce, or a
      plugin's own -- rather than from a list of known ones
   ------------------------------------------------------------ */
body.bookzilla-site button:hover,
body.bookzilla-site button:focus,
body.bookzilla-site [type=button]:hover,
body.bookzilla-site [type=button]:focus,
body.bookzilla-site [type=reset]:hover,
body.bookzilla-site [type=reset]:focus,
body.bookzilla-site [type=submit]:hover,
body.bookzilla-site [type=submit]:focus{
  background-color:transparent;
  color:inherit;
  text-decoration:none;
}

/* ------------------------------------------------------------
   3. and the colours each control actually wants, restored one
      weight above the sweep. Every arm carries :focus as well as
      :hover, because the reset repainted on both.
   ------------------------------------------------------------ */

/* the button system: --b is the family's own background token,
   and .bz-btn:hover already switches it to the darker shade */
body.bookzilla-site .bz-btn:hover,
body.bookzilla-site .bz-btn:focus{background-color:var(--b);color:var(--f)}

/* dialog and drawer closes */
body.bookzilla-site .bz-modal__x:hover,
body.bookzilla-site .bz-modal__x:focus{background-color:var(--bz-surface-2);color:var(--bz-ink)}
body.bookzilla-site .bz-drawer__x:hover,
body.bookzilla-site .bz-drawer__x:focus{background-color:var(--bz-surface);color:var(--bz-ink)}
body.bookzilla-site .bz-citem__x:hover,
body.bookzilla-site .bz-citem__x:focus{background-color:var(--bz-rose-50);color:var(--bz-rose)}

/* quantity steppers, in the drawer and in the cart table */
body.bookzilla-site .bz-qty button:hover,
body.bookzilla-site .bz-qty button:focus{background-color:var(--bz-surface);color:var(--bz-teal)}
body.bookzilla-site .bz-step:hover,
body.bookzilla-site .bz-step:focus{background-color:var(--bz-orange-50);color:var(--bz-orange-700)}

/* carousel dots keep their two states */
body.bookzilla-site .bz-cardot:hover,
body.bookzilla-site .bz-cardot:focus{background-color:rgba(32,36,44,.26)}
body.bookzilla-site .bz-cardot[aria-selected="true"]:hover,
body.bookzilla-site .bz-cardot[aria-selected="true"]:focus{background-color:var(--bz-ink)}

/* rail arrows, the category trigger, the hamburger, shop filters */
body.bookzilla-site .bz-railbtn:hover:not(:disabled),
body.bookzilla-site .bz-railbtn:focus:not(:disabled){background-color:#fff}
body.bookzilla-site .bz-cn-btn:hover,
body.bookzilla-site .bz-cn-btn:focus,
body.bookzilla-site .bz-cn-item:hover .bz-cn-btn,
body.bookzilla-site .bz-cn-item.is-open .bz-cn-btn{background-color:var(--bz-surface);color:var(--bz-teal)}
body.bookzilla-site .bz-navtoggle:hover,
body.bookzilla-site .bz-navtoggle:focus{background-color:var(--bz-surface)}
body.bookzilla-site .bz-fbtn:hover,
body.bookzilla-site .bz-fbtn:focus{background-color:var(--bz-surface)}
body.bookzilla-site .bz-fsearch__go:hover,
body.bookzilla-site .bz-fsearch__go:focus{background-color:var(--bz-surface);color:var(--bz-orange-700)}

/* WooCommerce's own buttons, which the theme paints orange */
body.bookzilla-site .button:hover,
body.bookzilla-site .button:focus,
body.bookzilla-site .woocommerce-Button:hover,
body.bookzilla-site .woocommerce-Button:focus{background-color:var(--bz-orange-600);color:#fff}

/* ============================================================
   CATEGORY BAR, MEGA MENU AND CART DRAWER, BROUGHT TO v5.6
   ------------------------------------------------------------
   Values read out of bookzillav5_6.html's .catnav, .mega and
   .drawer rather than judged by eye.
   ============================================================ */

/* ---------- the category bar ----------
   v5.6 tints every item orange on hover and when its panel is
   open. The port had it going grey with teal text, which is why
   the row reads as a different menu. */
/* :not(.bz-btn) because the Browse categories panel hangs inside this same
   nav, and its Browse everything button is an anchor too. Without the
   exclusion this rule -- (0,2,2) -- outranked .bz-btn's own colour at (0,2,0)
   and repainted the button's white text in the bar's ink grey. */
body.bookzilla-site .bz-catnav a:not(.bz-btn),
body.bookzilla-site .bz-catnav .bz-cn-btn{
  padding:.5rem .78rem;
  border-radius:var(--bz-r-sm);
  font-size:.885rem;
  font-weight:650;
  color:var(--bz-ink-2);
  gap:.35rem;
}
body.bookzilla-site .bz-catnav a.bz-is-sale{color:var(--bz-rose);font-weight:750}

body.bookzilla-site .bz-catnav a:not(.bz-btn):hover,
body.bookzilla-site .bz-catnav a:not(.bz-btn):focus,
body.bookzilla-site .bz-cn-btn:hover,
body.bookzilla-site .bz-cn-btn:focus,
body.bookzilla-site .bz-cn-item:hover .bz-cn-btn,
body.bookzilla-site .bz-cn-item.is-open .bz-cn-btn{
  background-color:var(--bz-orange-50);
  color:var(--bz-orange-700);
}
.bz-catnav .bz-wrap{gap:.15rem}
.bz-cn-btn svg{width:14px;height:14px;opacity:.6}

/* ---------- the Browse categories panel ----------
   v5.6's .mega hangs off the bar with a hairline and no shadow,
   square at the top and rounded at the foot, so it reads as the
   bar continuing rather than a card floating over it. The wider
   four-column grid stays -- that was asked for, and v5.6's 720px
   panel could not hold these categories. */
.bz-mega{top:calc(100% - 1px)}
.bz-mega__in{
  padding:1.2rem 1.3rem;
  margin-top:0;
  border:1px solid var(--bz-line);
  border-radius:0 0 var(--bz-r) var(--bz-r);
  box-shadow:none;
}

/* the column headers: v5.6 sets these in Inter at .68rem with
   wide tracking and muted grey, not Manrope in teal */
body.bookzilla-site .bz-mega__col h4{
  font-family:var(--bz-ff);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bz-muted-2);
  margin:0 0 .35rem;
}
.bz-mega__col a{
  display:block;
  padding:.32rem .45rem;
  margin-inline:-.45rem;
  border-radius:var(--bz-r-xs);
  font-size:.865rem;
  font-weight:550;
  color:var(--bz-ink-2);
}
body.bookzilla-site .bz-mega__col a:hover,
body.bookzilla-site .bz-mega__col a:focus{
  background-color:var(--bz-orange-50);
  color:var(--bz-orange-700);
}

/* ---------- the cart drawer ----------
   v5.6's .dw-head is a 36px tile, an 18px heading, the count and
   a 40px rounded-square close, all on the page gutter. The port
   had the heading losing to body.bookzilla-site h2, which is
   clamp(25px,6vw,32px) -- that is why "Your cart" was crowding
   the row. */
body.bookzilla-site .bz-drawer__panel{
  width:min(100%,420px);
  box-shadow:-8px 0 40px rgba(32,36,44,.18);
}
body.bookzilla-site .bz-drawer__head{
  gap:.7rem;
  padding:1.05rem var(--bz-pad);
}
body.bookzilla-site .bz-drawer__head h2{
  flex:1;margin:0;
  font-size:1.15rem;letter-spacing:-.018em;
}
body.bookzilla-site .bz-drawer__count{
  font-size:.8rem;font-weight:650;color:var(--bz-muted-2);
}
body.bookzilla-site .bz-drawer__ic{width:36px;height:36px;border-radius:10px}
body.bookzilla-site .bz-drawer__ic svg{width:18px;height:18px}
body.bookzilla-site .bz-drawer__x{
  width:40px;height:40px;border-radius:var(--bz-r-sm);color:var(--bz-ink);
}
body.bookzilla-site .bz-drawer__x svg{width:20px;height:20px}
body.bookzilla-site .bz-drawer__body{padding:.9rem var(--bz-pad)}
body.bookzilla-site .bz-drawer__foot{padding:1.05rem var(--bz-pad) 1.3rem}

/* the empty drawer: v5.6 leads with the tile, then the heading,
   the reassurance line, and an orange Start shopping */
body.bookzilla-site .bz-cempty{padding:3.5rem 1.2rem}
body.bookzilla-site .bz-cempty .bz-itile{
  display:grid;place-items:center;
  width:56px;height:56px;border-radius:15px;
  background:var(--bz-orange-50);color:var(--bz-orange-700);
  margin:0 auto 1rem;
}
body.bookzilla-site .bz-cempty .bz-itile svg{
  width:26px;height:26px;stroke:currentColor;fill:none;
}
body.bookzilla-site .bz-cempty h3{
  font-family:var(--bz-ff-d);font-size:1.15rem;font-weight:800;
  letter-spacing:-.02em;color:var(--bz-ink);margin:0 0 .4rem;
}
body.bookzilla-site .bz-cempty p{
  color:var(--bz-muted);font-size:.93rem;line-height:1.6;margin:0;
}
body.bookzilla-site .bz-cempty .bz-btn{margin-top:1.2rem}

/* ============================================================
   THE ADMIN BAR, AND THE DRAWER'S TOTALS BLOCK
   ============================================================ */

/* WordPress pushes the document down for the admin bar with a margin
   on <html>, which does nothing for a fixed panel: the drawer and the
   mobile menu were opening underneath it and losing their heading row.
   Only signed-in staff ever see this, but they see it every time. */
body.admin-bar .bz-drawer__panel,
body.admin-bar .bz-navdrawer{
  top:var(--wp-admin--admin-bar--height,32px);
}
body.admin-bar .bz-modal{
  padding-top:calc(20px + var(--wp-admin--admin-bar--height,32px));
}
@media(max-width:782px){
  body.admin-bar .bz-drawer__panel,
  body.admin-bar .bz-navdrawer{top:var(--wp-admin--admin-bar--height,46px)}
  body.admin-bar .bz-modal{
    padding-top:calc(20px + var(--wp-admin--admin-bar--height,46px));
  }
}

/* v5.6's .tot-l: the running lines are quiet and the total's figure is
   the one thing that carries weight. The port had the whole total row
   at one size, label included. */
body.bookzilla-site .bz-crow{
  font-size:.89rem;color:var(--bz-muted);margin-bottom:.4rem;
}
body.bookzilla-site .bz-crow--total{
  font-family:var(--bz-ff);font-size:1rem;font-weight:750;
  color:var(--bz-ink);
  padding-top:.6rem;margin-top:.6rem;margin-bottom:0;
  border-top:1px solid var(--bz-line);
  align-items:baseline;
}
body.bookzilla-site .bz-crow--total b{
  font-family:var(--bz-ff-d);font-size:1.3rem;font-weight:800;
  letter-spacing:-.02em;color:var(--bz-ink);
}
body.bookzilla-site .bz-drawer__foot .bz-btn{margin-top:.6rem}
body.bookzilla-site .bz-drawer__foot .bz-crow--total + .bz-btn{margin-top:1.1rem}
body.bookzilla-site .bz-drawer__note{
  font-size:.75rem;color:var(--bz-muted-2);text-align:center;margin:.6rem 0 0;
}

/* the checkout button sits disabled while the cart is empty, exactly as
   v5.6 has it -- the theme only carried a disabled state inside the
   ported pages, so it never reached the drawer */
body.bookzilla-site .bz-btn:disabled,
body.bookzilla-site .bz-btn:disabled:hover,
body.bookzilla-site .bz-btn:disabled:focus{
  opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;
  background-color:var(--b);
}

/* ============================================================
   CHECKOUT
   ------------------------------------------------------------
   Details on the left, a summary that stays in view on the
   right, and on a phone the summary folds into one line so the
   form starts at the top of the screen. Totals are set without
   rules between them -- the weight of the figure does the work
   that a horizontal line was doing.
   ============================================================ */

body.bz-checkout .woocommerce{max-width:var(--bz-maxw);margin-inline:auto;padding-inline:var(--bz-pad);padding-block:clamp(20px,2.4vw,40px)}

/* ---------- the two columns ---------- */
@media(min-width:1000px){
  body.bz-checkout form.checkout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 400px;
    grid-template-areas:"details summary";
    column-gap:clamp(28px,3.2vw,56px);
    align-items:start;
  }
  body.bz-checkout form.checkout #customer_details{grid-area:details}
  body.bz-checkout form.checkout #order_review_heading,
  body.bz-checkout form.checkout #order_review{grid-area:summary}
  body.bz-checkout form.checkout #order_review_heading{align-self:start}
  body.bz-checkout form.checkout #order_review{
    position:sticky;top:92px;align-self:start;margin-top:2.6rem;
  }
  body.admin-bar.bz-checkout form.checkout #order_review{
    top:calc(92px + var(--wp-admin--admin-bar--height,32px));
  }
}

/* WooCommerce's two-up billing/shipping split reads badly in a narrow
   column; one field per row is faster to fill and easier to check. */
body.bz-checkout #customer_details.col2-set,
body.bz-checkout #customer_details .col-1,
body.bz-checkout #customer_details .col-2{width:100%;float:none;margin:0}
body.bz-checkout #customer_details .col-2{margin-top:1.6rem}

/* ---------- the account step ---------- */
body.bz-checkout .bz-costep{
  background:#fff;border:1px solid var(--bz-line);border-radius:var(--bz-r);
  padding:clamp(1.2rem,2vw,1.7rem);margin-bottom:1.6rem;
  max-width:560px;
}
body.bz-checkout .bz-costep.is-done{display:none}
body.bz-checkout .bz-costep__head{margin-bottom:1.1rem}
body.bz-checkout .bz-costep__head h2{
  font-family:var(--bz-ff-d);font-size:1.24rem;font-weight:800;
  letter-spacing:-.022em;color:var(--bz-ink);margin:0;
}
body.bz-checkout .bz-costep__head p{
  margin:.35rem 0 0;font-size:.88rem;color:var(--bz-muted);line-height:1.55;
}
body.bz-checkout .bz-costep__row{display:grid;gap:.6rem}

/* signed in: one quiet line, not a card */
body.bz-checkout .bz-costep--in{
  display:flex;align-items:center;gap:.7rem;
  padding:.85rem 1.1rem;margin-bottom:1.6rem;
  background:var(--bz-surface);border:1px solid var(--bz-line);
  border-radius:var(--bz-r-sm);font-size:.9rem;
}
body.bz-checkout .bz-costep__ic{
  display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:9px;background:#fff;color:var(--bz-teal);
}
body.bz-checkout .bz-costep__ic svg{width:17px;height:17px}
body.bz-checkout .bz-costep__who{flex:1;min-width:0;color:var(--bz-ink-2)}
body.bz-checkout .bz-costep__who strong{color:var(--bz-ink)}
body.bz-checkout .bz-costep__swap{
  font-size:.84rem;font-weight:700;color:var(--bz-blue);flex:none;
}
body.bz-checkout .bz-costep__swap:hover{text-decoration:underline}

/* until a choice is made, the form waits its turn */
body.bz-checkout-guest.bz-checkout-ready form.checkout:not(.is-open) #customer_details,
body.bz-checkout-guest.bz-checkout-ready form.checkout:not(.is-open) #order_review_heading,
body.bz-checkout-guest.bz-checkout-ready form.checkout:not(.is-open) #order_review{
  display:none;
}

/* ---------- sections ---------- */
body.bz-checkout .bz-cosec__h{
  display:flex;align-items:center;gap:.65rem;margin:0 0 1.1rem;
}
body.bz-checkout .bz-cosec__h--pay{margin-top:1.6rem}
body.bz-checkout .bz-cosec__n{
  display:grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:999px;background:var(--bz-ink);color:#fff;
  font-family:var(--bz-ff);font-size:.76rem;font-weight:800;
}
body.bz-checkout .bz-cosec__h h3{
  font-family:var(--bz-ff-d);font-size:1.1rem;font-weight:800;
  letter-spacing:-.02em;color:var(--bz-ink);margin:0;
}
body.bz-checkout h3#order_review_heading{
  font-family:var(--bz-ff-d);font-size:1.1rem;font-weight:800;
  letter-spacing:-.02em;color:var(--bz-ink);margin:0 0 1rem;
}

/* ---------- fields ---------- */
body.bz-checkout .woocommerce-billing-fields h3,
body.bz-checkout .woocommerce-shipping-fields h3,
body.bz-checkout .woocommerce-additional-fields h3{
  font-family:var(--bz-ff);font-size:.72rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--bz-muted-2);
  margin:0 0 .8rem;
}
body.bz-checkout .woocommerce-billing-fields__field-wrapper,
body.bz-checkout .woocommerce-shipping-fields__field-wrapper{
  display:grid;gap:.9rem;
}
body.bz-checkout .form-row{margin:0;padding:0;display:block;float:none;width:100%}
body.bz-checkout .form-row label{
  display:block;font-size:.82rem;font-weight:700;color:var(--bz-ink);
  margin-bottom:.35rem;
}
body.bz-checkout .form-row .required{color:var(--bz-rose);text-decoration:none}
body.bz-checkout .form-row .input-text,
body.bz-checkout .form-row select,
body.bz-checkout .form-row textarea{
  width:100%;min-height:46px;height:auto;padding:.68rem .9rem;
  border-radius:var(--bz-r-sm);background:#fff;
  border:1.5px solid var(--bz-line-2);color:var(--bz-ink);
  font-family:var(--bz-ff);font-size:.94rem;
}
body.bz-checkout .form-row textarea{min-height:104px;line-height:1.55}
body.bz-checkout .form-row .input-text:focus,
body.bz-checkout .form-row select:focus,
body.bz-checkout .form-row textarea:focus{
  outline:none;border-color:var(--bz-orange);
  box-shadow:0 0 0 4px var(--bz-orange-50);
}
@media(min-width:640px){
  body.bz-checkout .woocommerce-billing-fields__field-wrapper,
  body.bz-checkout .woocommerce-shipping-fields__field-wrapper{
    grid-template-columns:1fr 1fr;
  }
  body.bz-checkout .form-row-wide,
  body.bz-checkout #billing_address_1_field,
  body.bz-checkout #billing_address_2_field,
  body.bz-checkout #shipping_address_1_field,
  body.bz-checkout #shipping_address_2_field{grid-column:1/-1}
}

/* ---------- the summary ---------- */
body.bz-checkout #order_review{
  background:#fff;border:1px solid var(--bz-line);
  border-radius:var(--bz-r);padding:1.3rem 1.35rem 1.4rem;
}

/* No rules anywhere in the money. WooCommerce draws a border on every
   cell of this table; the totals read better as a quiet stack with the
   figure carrying the weight. */
body.bz-checkout #order_review table.shop_table,
body.bz-checkout #order_review table.shop_table th,
body.bz-checkout #order_review table.shop_table td,
body.bz-checkout #order_review table.shop_table tfoot th,
body.bz-checkout #order_review table.shop_table tfoot td,
body.bz-checkout #order_review table.shop_table tbody th,
body.bz-checkout #order_review table.shop_table tbody td{
  border:0;background:none;
}
body.bz-checkout #order_review table.shop_table{
  width:100%;margin:0;border-collapse:collapse;border-radius:0;
}
body.bz-checkout #order_review table.shop_table thead{display:none}

body.bz-checkout #order_review .cart_item td{
  padding:.55rem 0;vertical-align:top;font-size:.9rem;color:var(--bz-ink-2);
}
body.bz-checkout #order_review .cart_item td.product-name{
  font-weight:650;color:var(--bz-ink);line-height:1.4;padding-right:1rem;
}
body.bz-checkout #order_review .cart_item .product-quantity{
  color:var(--bz-muted-2);font-weight:650;
}
body.bz-checkout #order_review .cart_item td.product-total{
  text-align:right;white-space:nowrap;font-weight:700;color:var(--bz-ink);
}

body.bz-checkout #order_review tfoot tr > th,
body.bz-checkout #order_review tfoot tr > td{
  padding:.28rem 0;font-size:.89rem;color:var(--bz-muted);font-weight:600;
}
body.bz-checkout #order_review tfoot tr > td{
  text-align:right;white-space:nowrap;color:var(--bz-ink-2);
}
body.bz-checkout #order_review tfoot tr:first-child > th,
body.bz-checkout #order_review tfoot tr:first-child > td{padding-top:1rem}

/* a fee row is money the shopper did not ask for -- name it clearly */
body.bz-checkout #order_review tfoot tr.fee > th,
body.bz-checkout #order_review tfoot tr.fee > td{color:var(--bz-orange-700)}

body.bz-checkout #order_review tfoot tr.order-total > th{
  padding-top:.9rem;font-family:var(--bz-ff);font-size:1rem;
  font-weight:750;color:var(--bz-ink);
}
body.bz-checkout #order_review tfoot tr.order-total > td{
  padding-top:.9rem;font-family:var(--bz-ff-d);font-size:1.32rem;
  font-weight:800;letter-spacing:-.02em;color:var(--bz-ink);
}
body.bz-checkout #order_review tfoot .includes_tax,
body.bz-checkout #order_review tfoot small{
  display:block;font-size:.74rem;color:var(--bz-muted-2);font-weight:600;
}
body.bz-checkout #order_review .shipping ul,
body.bz-checkout #order_review #shipping_method{
  list-style:none;margin:0;padding:0;display:grid;gap:.3rem;text-align:right;
}
body.bz-checkout #order_review .woocommerce-shipping-destination{
  font-size:.78rem;color:var(--bz-muted-2);font-weight:600;
}

/* ---------- coupon ---------- */
body.bz-checkout .bz-cocoupon{margin:1rem 0 .2rem}
body.bz-checkout .bz-cocoupon label{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bz-muted-2);margin-bottom:.4rem;
}
body.bz-checkout .bz-cocoupon__row{display:flex;gap:.5rem}
body.bz-checkout .bz-cocoupon__row .bz-inp{
  flex:1;min-width:0;min-height:44px;padding:.6rem .8rem;
  border-radius:var(--bz-r-sm);border:1.5px solid var(--bz-line-2);
  background:#fff;font-family:var(--bz-ff);font-size:.9rem;color:var(--bz-ink);
}
body.bz-checkout .bz-cocoupon__row .bz-inp:focus{
  outline:none;border-color:var(--bz-orange);box-shadow:0 0 0 4px var(--bz-orange-50);
}
body.bz-checkout .bz-cocoupon__row .bz-btn{min-height:44px;flex:none}

/* ---------- payment ---------- */
body.bz-checkout #payment{background:none;border-radius:0;margin-top:.4rem}
body.bz-checkout #payment ul.payment_methods{
  list-style:none;margin:0;padding:0;border:0;display:grid;gap:.55rem;
}
body.bz-checkout #payment ul.payment_methods li{
  margin:0;padding:0;border-radius:var(--bz-r-sm);
  border:1.5px solid var(--bz-line-2);background:#fff;
  transition:border-color var(--bz-t1),background var(--bz-t1);
}
body.bz-checkout #payment ul.payment_methods li:hover{border-color:var(--bz-ink-2)}
body.bz-checkout #payment ul.payment_methods li:has(input:checked){
  border-color:var(--bz-teal);background:#F5FBFA;
}
body.bz-checkout #payment ul.payment_methods li label{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.9rem 1rem;margin:0;cursor:pointer;
  font-size:.94rem;font-weight:700;color:var(--bz-ink);
}
body.bz-checkout #payment ul.payment_methods li input[type=radio]{
  width:18px;height:18px;flex:none;accent-color:var(--bz-teal);margin:0;
}
body.bz-checkout #payment ul.payment_methods li img{
  max-height:22px;width:auto;margin-left:auto;
}
body.bz-checkout .bz-payfee{
  font-family:var(--bz-ff);font-size:.74rem;font-weight:800;
  letter-spacing:.02em;color:var(--bz-orange-700);
  background:var(--bz-orange-50);border-radius:999px;
  padding:.16rem .5rem;white-space:nowrap;
}
body.bz-checkout #payment .payment_box{
  margin:0;padding:0 1rem 1rem calc(1rem + 18px + .6rem);
  background:none;border:0;font-size:.85rem;color:var(--bz-muted);
  line-height:1.55;
}
body.bz-checkout #payment .payment_box::before{display:none}
body.bz-checkout .bz-payoff{
  display:flex;align-items:flex-start;gap:.45rem;margin-top:.5rem;
  font-size:.82rem;color:var(--bz-ink-2);
}
body.bz-checkout .bz-payoff svg{
  width:15px;height:15px;flex:none;margin-top:.15rem;color:var(--bz-teal);
}

body.bz-checkout #payment .place-order{padding:0;margin-top:1.1rem}
body.bz-checkout #payment #place_order{
  width:100%;min-height:52px;font-size:1rem;
}
body.bz-checkout #payment .woocommerce-terms-and-conditions-wrapper{
  font-size:.8rem;color:var(--bz-muted);line-height:1.55;margin-bottom:.8rem;
}

/* ---------- the summary on a phone ---------- */
body.bz-checkout .bz-cotoggle{display:none}
@media(max-width:999px){
  body.bz-checkout h3#order_review_heading{display:none}
  body.bz-checkout .bz-cotoggle{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    width:100%;min-height:52px;padding:.8rem 1rem;margin-bottom:1rem;
    border:1px solid var(--bz-line);border-radius:var(--bz-r-sm);
    background:var(--bz-surface);cursor:pointer;
  }
  body.bz-checkout .bz-cotoggle__l{
    display:inline-flex;align-items:center;gap:.4rem;
    font-size:.92rem;font-weight:700;color:var(--bz-teal);
  }
  body.bz-checkout .bz-cotoggle__l svg{
    width:15px;height:15px;transition:transform var(--bz-t1);
  }
  body.bz-checkout .bz-cotoggle[aria-expanded="true"] .bz-cotoggle__l svg{transform:rotate(180deg)}
  body.bz-checkout .bz-cotoggle__v{
    font-family:var(--bz-ff-d);font-size:1.05rem;font-weight:800;
    letter-spacing:-.02em;color:var(--bz-ink);
  }
  body.bz-checkout.bz-checkout-ready #order_review > .woocommerce-checkout-review-order-table,
  body.bz-checkout.bz-checkout-ready #order_review > .bz-cocoupon{display:none}
  body.bz-checkout.bz-checkout-ready #order_review.is-open > .woocommerce-checkout-review-order-table{display:table}
  body.bz-checkout.bz-checkout-ready #order_review.is-open > .bz-cocoupon{display:block}
  body.bz-checkout #order_review{padding:1.1rem 1.15rem 1.2rem}
}

/* ============================================================
   CHECKOUT, SECOND PASS
   ------------------------------------------------------------
   Three faults, all visible with a real cart in front of you.
   ============================================================ */

/* 1. The shipping options were running off the page. The totals cells were
      set nowrap so the figures would not break, but the shipping row is a
      cell too -- and Weight Based Shipping's labels are whole sentences, so
      nowrap forced the table wider than the column and pushed every figure
      out of sight. Only the money refuses to wrap now. */
body.bz-checkout #order_review tfoot tr > td{white-space:normal}
body.bz-checkout #order_review tfoot tr.cart-subtotal > td,
body.bz-checkout #order_review tfoot tr.fee > td,
body.bz-checkout #order_review tfoot tr.order-total > td{white-space:nowrap}

/* the shipping row gets the full width of the summary rather than a
   right-hand column it cannot fit in */
body.bz-checkout #order_review tfoot tr.woocommerce-shipping-totals{display:block;padding-top:.5rem}
body.bz-checkout #order_review tfoot tr.woocommerce-shipping-totals > th{
  display:block;width:100%;padding:0 0 .4rem;text-align:left;
  font-family:var(--bz-ff);font-size:.72rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--bz-muted-2);
}
body.bz-checkout #order_review tfoot tr.woocommerce-shipping-totals > td{
  display:block;width:100%;padding:0;text-align:left;
}

/* Weight Based Shipping returns one rate per service, each with a sentence
   for a name. They are drawn as rows that wrap, with the price beneath the
   name rather than fighting it for the same line. */
body.bz-checkout #order_review ul#shipping_method{
  display:grid;gap:.4rem;margin:0;padding:0;list-style:none;text-align:left;
}
body.bz-checkout #order_review ul#shipping_method li{
  display:grid;grid-template-columns:18px 1fr;align-items:start;
  gap:.55rem;margin:0;padding:.6rem .7rem;
  border:1.5px solid var(--bz-line);border-radius:var(--bz-r-sm);
  background:#fff;transition:border-color var(--bz-t1),background var(--bz-t1);
}
body.bz-checkout #order_review ul#shipping_method li:hover{border-color:var(--bz-ink-2)}
body.bz-checkout #order_review ul#shipping_method li:has(input:checked){
  border-color:var(--bz-teal);background:#F5FBFA;
}
body.bz-checkout #order_review ul#shipping_method li input[type=radio]{
  width:18px;height:18px;margin:.15rem 0 0;flex:none;accent-color:var(--bz-teal);
}
body.bz-checkout #order_review ul#shipping_method li label{
  display:block;margin:0;padding:0;cursor:pointer;
  font-size:.86rem;font-weight:650;line-height:1.45;color:var(--bz-ink);
  white-space:normal;overflow-wrap:anywhere;
}
body.bz-checkout #order_review ul#shipping_method li label .amount{
  display:block;margin-top:.15rem;
  font-family:var(--bz-ff-d);font-weight:800;color:var(--bz-ink);
}
body.bz-checkout #order_review .woocommerce-shipping-destination{
  margin:.5rem 0 0;font-size:.78rem;color:var(--bz-muted-2);font-weight:600;
}

/* with the table no longer forced wide, the item name reads normally again */
body.bz-checkout #order_review .cart_item td.product-name{
  white-space:normal;overflow-wrap:anywhere;width:auto;
}
body.bz-checkout #order_review table.shop_table{table-layout:auto}

/* 2. The providers, as one row of pills.
      Heateor owns the markup inside .bz-sso, so the row is built around it:
      its two providers take two thirds, the email pill the last third. */
body.bz-checkout .bz-ssorow{display:flex;gap:.6rem;align-items:stretch}
body.bz-checkout .bz-ssorow .bz-sso{flex:2 1 0;min-width:0;gap:.6rem}
body.bz-checkout .bz-ssorow .bz-sso ul.heateor_sl_login_ul{
  display:grid!important;grid-template-columns:1fr 1fr;gap:.6rem;
}
body.bz-checkout .bz-ssorow .bz-sso ul.heateor_sl_login_ul li,
body.bz-checkout .bz-ssopill{
  min-height:52px;border-radius:999px!important;
  background:var(--bz-surface);border:1px solid transparent!important;
}
body.bz-checkout .bz-ssorow .bz-sso ul.heateor_sl_login_ul li:hover,
body.bz-checkout .bz-ssopill:hover{
  background:var(--bz-surface-2);border-color:var(--bz-line-2)!important;
}
body.bz-checkout .bz-ssopill{
  flex:1 1 0;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.6rem .9rem;cursor:pointer;
  font-family:var(--bz-ff);font-size:.92rem;font-weight:650;color:var(--bz-ink);
  transition:background var(--bz-t1),border-color var(--bz-t1);
}
body.bz-checkout .bz-ssopill svg{width:18px;height:18px;flex:none}
body.bz-checkout .bz-costep .bz-sso__face{font-size:.92rem}
@media(max-width:640px){
  body.bz-checkout .bz-ssorow{flex-direction:column}
  body.bz-checkout .bz-ssorow .bz-sso ul.heateor_sl_login_ul{grid-template-columns:1fr}
}

/* 3. The step's own wording, and the guest heading that replaces the button */
body.bz-checkout .bz-costep{max-width:none}
body.bz-checkout .bz-costep__head h2{font-size:1.5rem}
body.bz-checkout .bz-costep__head p{font-size:.92rem;color:var(--bz-muted)}
body.bz-checkout .bz-costep .bz-authdiv{margin:1.3rem 0}
body.bz-checkout .bz-costep__guest h3{
  font-family:var(--bz-ff-d);font-size:1.35rem;font-weight:800;
  letter-spacing:-.022em;color:var(--bz-ink);margin:0;
}
body.bz-checkout .bz-costep__guest p{
  margin:.4rem 0 0;font-size:.92rem;color:var(--bz-muted);line-height:1.55;
}

/* the form is always open now; the old gate is retired */
body.bz-checkout-guest.bz-checkout-ready form.checkout:not(.is-open) #customer_details,
body.bz-checkout-guest.bz-checkout-ready form.checkout:not(.is-open) #order_review_heading,
body.bz-checkout-guest.bz-checkout-ready form.checkout:not(.is-open) #order_review{
  display:revert;
}

/* 4. The discount field sat inside the review table, where the browser hoists
      a stray div out of the table and WooCommerce's refresh then left a second
      copy behind. It is drawn above the payment block instead, which is
      outside the table entirely. */
body.bz-checkout .bz-cocoupon{margin:1.2rem 0 .2rem}

/* ============================================================
   CHECKOUT, THIRD PASS
   ============================================================ */

/* The account step is a card, not a banner: it holds three pills and two
   lines of copy, and stretching that across the whole page made the pills
   enormous and the reading line far too long. Capped at the width the
   reference uses, aligned with the form beneath it. */
body.bz-checkout .bz-costep{max-width:620px}
body.bz-checkout .bz-costep__head h2{font-size:1.38rem}
body.bz-checkout .bz-costep__guest h3{font-size:1.25rem}
body.bz-checkout .bz-ssorow .bz-sso ul.heateor_sl_login_ul li,
body.bz-checkout .bz-ssopill{min-height:48px}

/* Five methods now, and two of them carry a paragraph of bank instructions.
   The box is given room to breathe and the instructions are set quieter than
   the method's own name. */
body.bz-checkout #payment .payment_box p{margin:0 0 .5rem}
body.bz-checkout #payment .payment_box p:last-child{margin-bottom:0}
body.bz-checkout #payment ul.payment_methods li label{gap:.5rem}

/* A method with no badge beside it is a method with nothing added to it --
   worth letting that read as the quiet default rather than an absence. */
body.bz-checkout #payment ul.payment_methods li:has(input:checked) label{color:var(--bz-ink)}

/* ============================================================
   CHECKOUT: WHATEVER A GATEWAY DECIDES TO RENDER
   ------------------------------------------------------------
   A payment method can output almost anything into its box --
   paragraphs, a list of bank details, a table, a logo strip, or
   a full set of card fields. None of that is known in advance,
   so the box is styled by element rather than by gateway, and a
   method added next year inherits the design without a line of
   work.
   ============================================================ */

/* prose the gateway writes */
body.bz-checkout #payment .payment_box p,
body.bz-checkout #payment .payment_box li{
  font-size:.85rem;line-height:1.55;color:var(--bz-muted);
}
body.bz-checkout #payment .payment_box ul,
body.bz-checkout #payment .payment_box ol{
  margin:.4rem 0 .6rem;padding-left:1.1rem;display:grid;gap:.25rem;
}
body.bz-checkout #payment .payment_box strong,
body.bz-checkout #payment .payment_box b{color:var(--bz-ink);font-weight:700}
body.bz-checkout #payment .payment_box a{
  color:var(--bz-orange-700);font-weight:650;text-decoration:underline;
  text-underline-offset:2px;
}

/* bank details are often a small table */
body.bz-checkout #payment .payment_box table{
  width:100%;margin:.5rem 0;border-collapse:collapse;font-size:.84rem;
}
body.bz-checkout #payment .payment_box table th,
body.bz-checkout #payment .payment_box table td{
  padding:.35rem .5rem;border:0;text-align:left;
  border-bottom:1px solid var(--bz-line);
}
body.bz-checkout #payment .payment_box table th{
  color:var(--bz-muted-2);font-weight:700;width:40%;
}
body.bz-checkout #payment .payment_box table tr:last-child th,
body.bz-checkout #payment .payment_box table tr:last-child td{border-bottom:0}

/* a gateway that collects something on this page gets the theme's fields
   rather than the browser's */
body.bz-checkout #payment .payment_box input[type=text],
body.bz-checkout #payment .payment_box input[type=tel],
body.bz-checkout #payment .payment_box input[type=email],
body.bz-checkout #payment .payment_box input[type=number],
body.bz-checkout #payment .payment_box input[type=password],
body.bz-checkout #payment .payment_box select,
body.bz-checkout #payment .payment_box .wc-credit-card-form-card-number,
body.bz-checkout #payment .payment_box .wc-credit-card-form-card-expiry,
body.bz-checkout #payment .payment_box .wc-credit-card-form-card-cvc{
  width:100%;min-height:46px;padding:.6rem .8rem;
  border-radius:var(--bz-r-sm);background:#fff;
  border:1.5px solid var(--bz-line-2);color:var(--bz-ink);
  font-family:var(--bz-ff);font-size:.94rem;
}
body.bz-checkout #payment .payment_box input:focus,
body.bz-checkout #payment .payment_box select:focus{
  outline:none;border-color:var(--bz-orange);
  box-shadow:0 0 0 4px var(--bz-orange-50);
}
body.bz-checkout #payment .payment_box .form-row{margin-bottom:.7rem}
body.bz-checkout #payment .payment_box .form-row:last-child{margin-bottom:0}
body.bz-checkout #payment .payment_box label{
  display:block;font-size:.8rem;font-weight:700;color:var(--bz-ink);
  margin-bottom:.3rem;
}

/* an iframe field set (hosted fields) should not be clipped */
body.bz-checkout #payment .payment_box iframe{
  width:100%!important;max-width:100%;border:0;display:block;
}

/* logos come in every size a provider fancies; the row keeps its rhythm */
body.bz-checkout #payment ul.payment_methods li label img{
  max-height:24px;width:auto;max-width:100%;margin:0 0 0 auto;
  vertical-align:middle;
}
body.bz-checkout #payment ul.payment_methods li label img + img{margin-left:.35rem}

/* some gateways wrap their logo strip in a nested label, which cannot be
   fixed from here -- it just needs to stop breaking the row */
body.bz-checkout #payment ul.payment_methods li label label{
  display:inline-flex;align-items:center;gap:.35rem;
  margin:0 0 0 auto;padding:0;cursor:pointer;
}

/* an unusually long method name wraps instead of pushing the badge out */
body.bz-checkout #payment ul.payment_methods li label{
  overflow-wrap:anywhere;
}
body.bz-checkout .bz-payfee{flex:none}

/* ============================================================
   THE PROVIDER PILLS, NAMED RATHER THAN NARRATED
   ------------------------------------------------------------
   The checkout row already sits under a heading reading
   "Continue with", so repeating it on every pill said the same
   thing three times and left no room for the word that matters.
   The pills now read Google, Facebook, Email.

   That also settles the alignment. A centre-aligned flex item
   wider than its box is pinned to the start edge rather than
   spilling evenly, and .bz-sso li carries overflow:hidden -- so
   "Continue with Google" was clipped on the right and read as
   left-aligned. A label that fits is centred by the rule that
   was there all along; the guards below keep that true if a
   longer provider name arrives later.
   ============================================================ */
body.bz-checkout .bz-ssorow .bz-sso ul.heateor_sl_login_ul li{
  padding:0;
  text-align:center;
}
body.bz-checkout .bz-ssorow .bz-sso__face{
  justify-content:center;
  gap:.5rem;
  width:100%;
  min-width:0;
  padding:0 .7rem;
}
body.bz-checkout .bz-ssorow .bz-sso__face svg{width:18px;height:18px}
body.bz-checkout .bz-ssorow .bz-sso__face span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.bz-checkout .bz-ssopill{justify-content:center;text-align:center}

/* ============================================================
   THE HOME PAGE'S PROMO TRIO AND DEPARTMENT CARDS, BACK TO v5.6
   ------------------------------------------------------------
   Three things the port dropped.

   Wrapping. v5.6 sets the promo blurb at .855rem and caps it at
   26 characters' width. The port left it at the body size with
   no cap, so "Bundles and pre-loved titles, up to 50% off." ran
   the full width of the card and pushed into the big faint icon
   behind it. The cap is what makes it break where v5.6 breaks.

   Movement. v5.6 lifts a promo card on hover and, behind it,
   grows the watermark icon and tips it a few degrees. The port
   kept the icon and dropped the movement entirely -- these
   cards did not react to the pointer at all.

   The department cards had a lift but nothing else: no orange
   edge, and a tile that sat still. v5.6 moves both.
   ============================================================ */

/* ---------- the promo trio ---------- */
.bz-promo{transition:transform var(--bz-t2),box-shadow var(--bz-t2)}
.bz-promo:hover{
  transform:translateY(-6px);
  box-shadow:0 4px 12px rgba(32,36,44,.07),0 18px 38px rgba(32,36,44,.13);
}
.bz-promo h3{font-size:1.12rem;margin-bottom:.25rem}
.bz-promo p{
  font-size:.855rem;color:var(--bz-muted);
  max-width:26ch;margin:0;
}

/* v5.6's watermark: a little smaller, tucked further into the corner, and
   alive on hover */
.bz-promo__ic{
  right:-8px;bottom:-8px;
  width:104px;height:104px;opacity:.14;
  transition:transform .4s var(--bz-ease),opacity var(--bz-t2);
}
.bz-promo__ic svg{stroke-width:1.6}
.bz-promo:hover .bz-promo__ic{transform:scale(1.14) rotate(-6deg);opacity:.2}

/* ---------- the department cards ---------- */
.bz-dept{transition:transform var(--bz-t2),box-shadow var(--bz-t2),border-color var(--bz-t2)}
.bz-dept:hover{transform:translateY(-6px);border-color:var(--bz-orange-200)}
.bz-dept .bz-tile{transition:transform var(--bz-t2)}
.bz-dept:hover .bz-tile{transform:scale(1.09) rotate(-4deg)}

/* on the peach band v5.6 warms the card edge rather than boxing it in */
.bz-band--peach .bz-dept{
  border-color:rgba(242,140,40,.16);
  box-shadow:0 8px 24px rgba(71,48,29,.055);
}
.bz-band--peach .bz-dept:hover{
  border-color:var(--bz-orange-200);
  box-shadow:0 14px 34px rgba(71,48,29,.10);
}

/* ---------- icons ---------- */
/* v5.6 draws these two rows at 1.9; the theme's shared tile is 1.7, and it is
   the CSS that decides, not the stroke-width on the markup */
.bz-dept .bz-tile svg,
.bz-benefit .bz-tile svg{stroke-width:1.9}

/* the sixth department is teal in v5.6 -- a colour the ported tile set never
   carried, so it went out as amber */
.bz-tile--teal{background:#E7F6F5;color:var(--bz-teal)}

/* ---------- movement is decoration ---------- */
@media(prefers-reduced-motion:reduce){
  .bz-promo,.bz-promo__ic,.bz-dept,.bz-dept .bz-tile{transition:none}
  .bz-promo:hover,.bz-dept:hover,
  .bz-promo:hover .bz-promo__ic,.bz-dept:hover .bz-tile{transform:none}
}

/* TI can be configured to hide a zero count, in which case its script empties
   the badge rather than writing 0 into it. A bare orange dot with no number in
   it reads as a bug, so an empty badge simply is not there. */
.bz-wishlist-count:empty{display:none}

/* ============================================================
   THREE HEADER CONTROLS THAT WENT THE WRONG COLOUR
   ------------------------------------------------------------
   The search button turning white on hover was a tie decided by
   position, not by weight. Two rules in this file match it:

     .bz-hdr .bz-search button:hover { background:var(--bz-teal) }
     body.bookzilla-site button:hover { background-color:transparent }

   Both are (0,2,2), and the second -- the sweep that answers
   Hello Elementor's magenta -- is written eight thousand bytes
   later, so it won and left the button transparent against a
   white field. Hover is meant to be orange. Settling it here at
   (0,4,2) fixes it without moving either block, which is safer
   than reordering a file this long.

   The heart and the cart tinted teal on hover while every other
   hover on the site -- the category bar, the mega panel, the
   account rail -- tints orange. They now match.
   ============================================================ */

body.bookzilla-site .bz-hdr .bz-search button:hover,
body.bookzilla-site .bz-hdr .bz-search button:focus,
body.bookzilla-site .bz-hdr .bz-search button:focus-visible{
  background-color:var(--bz-orange);
  color:#fff;
}

body.bookzilla-site .bz-act:hover,
body.bookzilla-site .bz-act:focus-visible{
  background-color:var(--bz-orange-50);
  color:var(--bz-orange-700);
}

/* An empty badge is no badge. The span stays in the page so WooCommerce's
   cart fragment still has something to replace on the next add; it simply
   carries no number, and nothing is drawn until there is one. */
.bz-act__count:empty{display:none}