/* site-chrome.css — same header + footer as the store homepage, for secondary pages
   (policies, sign-in, product, track order). Used with /pk/js/site-chrome.js */
:root{--navy:#181512;--blue:#181512;--sky:#f6f6f6;--pale:#ffffff;--ink:#181512;--muted:#7e7e7e;--line:#f6f6f6;--red:#fa6338;--white:#fff}
#jb-header,#jb-footer{font:14px/1.45 Inter,Poppins,Arial,sans-serif;color:var(--ink)}
#jb-header *,#jb-footer *{box-sizing:border-box}
#jb-header{position:sticky;top:0;z-index:1000}
#jb-header a{color:inherit;text-decoration:none}
#jb-header button,#jb-header input{font:inherit}
#jb-header button{cursor:pointer;border:0}

.jb-wa{position:fixed;right:18px;bottom:22px;z-index:15000;width:56px;height:56px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.jb-wa svg{width:30px;height:30px}
.jb-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#181512;color:#fff;padding:12px 18px;border-radius:9px;box-shadow:0 8px 25px #0002;z-index:20000;display:none;font:14px Arial,sans-serif}

@media(max-width:520px){
  .jb-wa{bottom:16px;right:12px;width:50px;height:50px}
}
/* 2026-10-18: bigger clear logos, same bar heights, footer always at page bottom */
html,body{min-height:100%}
body{display:flex;flex-direction:column;min-height:100vh;margin:0}
body > #jb-footer{margin-top:auto}

.jb-chat{position:fixed;right:18px;bottom:88px;z-index:15000;width:56px;height:56px;border-radius:50%;background:#181512;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.2);color:#fff;font-size:26px;text-decoration:none}

@media(max-width:520px){.jb-chat{bottom:76px;right:12px;width:50px;height:50px}}
body > .wrap,body > main,body > .hdr,body > section,body > #jb-header,body > #jb-footer{width:100%;box-sizing:border-box;flex-shrink:0}
#jb-header{max-width:100vw}

/* ===== v5.8 I: the owner's logo (luxury JB monogram, /pk/assets/logo-mark.png) next to the "Shopifir" name ===== */
.jbH-logo{display:inline-flex!important;align-items:center;gap:10px}
.jbH-logo .jbLogoImg{width:44px;height:44px;display:block;flex:0 0 auto}
.jbF-brand{display:inline-flex;align-items:center;gap:8px}.jbF-brand .jbLogoImg{width:34px;height:34px;display:block}
#jcpRoot .topbar .brand{display:inline-flex;align-items:center;gap:8px}#jcpRoot .topbar .brand .jbLogoImg{width:38px;height:38px;display:block}
@media (max-width:640px){.jbH-logo{gap:6px}.jbH-logo .jbLogoImg{width:32px;height:32px}}
/* v5.8.1: logo on a transparent background, no box or outline */
.jbLogoImg{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;outline:0!important;object-fit:contain}

/* round 2026-11-07 (Part 8): footer contact block + the admin's own footer options (current footer design) */
.jbF-extra{display:flex;flex-wrap:wrap;gap:10px 40px;padding:6px 0 14px;font-size:13px;line-height:1.6}
.jbF-extra:empty{display:none}
.jbF-contact p{margin:0}
.jbF-custom{display:flex;flex-direction:column;gap:2px}
.jbF-extra a{color:inherit}

/* ===== Shopifir brand colours (Section C point 2): same theme and layout as the master store, Shopifir's colours.
   Theme colour = warm cream ivory #F7F2E9, footer = dark warm brown black #181512, accents = #181512. ===== */
:root{--ink:#181512;--navy:#181512;--blue:#181512;--blue2:#181512;--n:#181512;--b:#181512;--sf-cream:#F7F2E9;--sf-dark:#181512}
#jb-header,.jbH,.jbH-bar,.jbH-top,header.jbH{background:#F7F2E9!important}
.jbF{background:#181512!important;color:#F7F2E9!important}
.jbF a,.jbF h3,.jbF p,.jbF span,.jbF b{color:#F7F2E9!important}
.jbF-bar{border-top-color:rgba(247,242,233,.18)!important}
.jbF-soc a{background:#F7F2E9!important}.jbF-soc a svg{fill:#181512!important;color:#181512!important}
.jbF-nl{border-color:#F7F2E9!important}.jbF-nl button{background:#F7F2E9!important;color:#181512!important}