/* ============================================================================= bp-chrome.css — the ONE canonical site header, footer, announce bar and mobile drawer, lifted verbatim from index.html so every storefront page matches it. Loaded LAST in each page's so it overrides whatever chrome styles the page defined locally (all pages use the same .bp-* class names). Values are literal (no CSS variables) so this file neither depends on nor disturbs any page's own :root — it only styles the shared chrome + guards against the horizontal overflow that was pushing pages off the right edge. Source of truth: index.html. Edit here, not per-page. ============================================================================= */ @import url('https://use.typekit.net/lvn0eze.css'); @import url("https://use.typekit.net/boh8wds.css"); /* Fields kit */ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'); /* Kill the sideways run-off. index.html guards with this; every page needs it. */ body { overflow-x: hidden; } body { background: #f7f5f0; color: #000000; -webkit-font-smoothing: auto; } /* Desktop Waverly 600 (Jenny 2026-08-17, keep). Phone and iPad stay as they are. Does not restyle the locked header. */ @media (min-width: 1400px) { body, p, li, td, th, label, dt, dd, figcaption, small, .hero .sub, .about-body, .about-body p, .reg-sub, .c-prose, .c-name, .cell-name { font-weight: 600 !important; } } /* ================= HEADER + ANNOUNCE ================= Removed — the header and announce bar now live SOLELY in bp-header.css (loaded last on every page). Do not re-add header rules here. */ /* ================= FOOTER ================= */ .bp-footer{border-top:1px solid rgba(17,17,17,.30);background:#f7f5f0;padding:48px 40px 52px} .foot-inner{max-width:1000px;margin:0 auto;text-align:center} .foot-brand{font-family:aviano-didone,aviano,waverly-cf,Georgia,serif;font-size:clamp(1.05rem,4.6vw,1.5rem);letter-spacing:.03em;color:#111111;font-weight:700;margin-bottom:20px} .foot-year{font-family:waverly-cf,system-ui,-apple-system,sans-serif;font-size:13px;letter-spacing:.1em;color:#000000;margin-left:8px} .foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:13px 26px;margin-bottom:22px} .foot-links a{font-family:aviano,waverly-cf,sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#111111;text-decoration:none;transition:color .2s} .foot-links a:hover{color:#111111} .foot-contact{font-family:waverly-cf,Georgia,serif;font-size:18px;color:#000000;margin-bottom:26px} .foot-contact a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(17,17,17,.30)} .foot-ruo{font-family:waverly-cf,system-ui,-apple-system,sans-serif;font-size:13px;line-height:1.65;color:#000000;max-width:830px;margin:0 auto;padding-top:22px;border-top:1px solid rgba(17,17,17,.30)} .foot-ruo strong{color:#000000;font-weight:600} /* ================= MOBILE DRAWER ================= */ .bp-drawer-wrap{display:none} .bp-drawer-wrap.is-open{display:block} .bp-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000001} .bp-drawer-panel{position:fixed;top:0;left:0;height:100%;width:80%;max-width:20rem;background:#f7f5f0;z-index:1000002; box-shadow:0 20px 25px -5px rgba(0,0,0,.15);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .3s ease-out} .bp-drawer-wrap.is-open .bp-drawer-panel{transform:translateX(0)} #drawer-panel{will-change:transform} .bp-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:0 1rem;height:4rem;border-bottom:1px solid rgba(17,17,17,.30);font-size:1rem;color:#111} .bp-drawer-close{background:none;border:none;font-size:1.5rem;line-height:1;color:#6b7280;cursor:pointer;padding:0} .bp-drawer-nav{flex:1;padding:0 1.25rem calc(88px + env(safe-area-inset-bottom));font-size:1rem; overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column} .bp-drawer-nav a{display:block;padding:1rem 0;border-bottom:1px solid rgba(17,17,17,.30);text-decoration:none; font-family:waverly-cf,system-ui,-apple-system,sans-serif;letter-spacing:.14em;text-transform:uppercase;font-size:15.5px;color:#111111} .bp-drawer-nav a:last-child{border-bottom:none} .bp-drawer-nav a#bp-drawer-logout{margin-top:auto;border-top:1px solid rgba(17,17,17,.30);padding-top:1.25rem} /* ================= FLOATING BOTTOM BAR ================= LOCKED (Jenny, 2026-08-17): never remove or hide this bar. It stays on iPhone, iPad, AND desktop. No display:none at any width. */ #mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:40; background:rgba(247,245,240,.20); border-top:1px solid rgba(17,17,17,.20);padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -2px 20px -10px rgba(17,17,17,.45)} #mobile-bottom-nav > div{display:flex;justify-content:space-around;align-items:center; height:74px;max-width:620px;margin:0 auto} #mobile-bottom-nav a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:5px;padding:6px 4px;text-decoration:none;color:rgba(17,17,17,.88); font-family:aviano,waverly-cf,sans-serif;font-size:9px;letter-spacing:.2em;text-transform:uppercase; transition:color .2s ease} #mobile-bottom-nav a .bn-ico{width:33px;height:33px;display:block;fill:none;stroke:currentColor; stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .2s ease} #mobile-bottom-nav a:hover{color:#111} #mobile-bottom-nav a.is-here{color:#111} #mobile-bottom-nav a.is-here .bn-ico{stroke-width:1.85} /* a fine deco rule above the section you're in — the house mark, not a slab */ #mobile-bottom-nav a.is-here::before{content:"";position:absolute;top:0;left:50%; transform:translateX(-50%);width:26px;height:1px;background:#111} #mobile-bottom-nav a.is-here::after{content:"";position:absolute;top:-2.5px;left:50%; transform:translateX(-50%) rotate(45deg);width:5px;height:5px;background:#f7f5f0; border-top:1px solid #111;border-left:1px solid #111} #mobile-bottom-nav #bottom-cart-count{position:absolute;top:4px;right:calc(50% - 20px); min-width:15px;height:15px;padding:0 3px;font-size:9.5px;background:#111;color:#f7f5f0; border-radius:8px;display:flex;align-items:center;justify-content:center; font-family:waverly-cf,system-ui,sans-serif;letter-spacing:0} @media (prefers-reduced-motion: reduce){#mobile-bottom-nav a,#mobile-bottom-nav a .bn-ico{transition:none}} /* ================= RESPONSIVE (chrome only) ================= */ @media (max-width:480px){ .bp-footer{padding:40px 18px 48px} .foot-links{gap:11px 18px} .foot-ruo{font-size:12px} } /* Header/announce moved out — bp-header.css is the single source (loaded last). */ /* =================================================================== BRAND BUTTONS — single source of truth. Every solid button pulls from --accent (the black), never black. Change --accent once and every button follows. This deliberately beats Tailwind's bg-black CDN and legacy classes. =================================================================== */ a.bg-black, button.bg-black, .bg-black.text-white, a[class*="111820"], button[class*="111820"], [class*="111820"].text-white, button[type="submit"], input[type="submit"], .btn-primary, .btn-dark, .meta-add, .cta:not(.ghost), .bp-gate-submit, .c-add{ background-color: #000000 !important; background-image: none !important; } /* header + announce now live solely in bp-header.css (loaded last on every page) */ /* Footer wordmark: Tailwind preflight sets img{display:block}, which text-align cannot center. Force it centered so the footer is identical on every page. */ .foot-brand{text-align:center !important} .foot-brand img{display:block !important;margin-left:auto !important;margin-right:auto !important;float:none !important} .foot-inner,.bp-footer .foot-inner{text-align:center !important}