/* ============================================================================= 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'); @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=EB+Garamond:wght@400;500;600;700&family=Bodoni+Moda:ital,opsz@0,6..96;1,6..96&display=swap'); /* Kill the sideways run-off. index.html guards with this; every page needs it. */ body { overflow-x: hidden; } body { background: #f7f5f0; color: #0d0d0c; -webkit-font-smoothing: antialiased; } /* ================= 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(13,13,12,.14);background:#f7f5f0;padding:48px 40px 52px} .foot-inner{max-width:1000px;margin:0 auto;text-align:center} .foot-brand{font-family:"aviano-didone","aviano","EB Garamond",Georgia,serif;font-size:clamp(1.05rem,4.6vw,1.5rem);letter-spacing:.03em;color:#000;font-weight:700;margin-bottom:20px} .foot-year{font-family:"DM Sans",system-ui,-apple-system,sans-serif;font-size:13px;letter-spacing:.1em;color:#4a4a45;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","DM Sans",sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#0d0d0c;text-decoration:none;transition:color .2s} .foot-links a:hover{color:#1c2d24} .foot-contact{font-family:"waverly-cf","EB Garamond",Georgia,serif;font-size:18px;color:#4a4a45;margin-bottom:26px} .foot-contact a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(13,13,12,.14)} .foot-ruo{font-family:"DM Sans",system-ui,-apple-system,sans-serif;font-size:13px;line-height:1.65;color:#9a978f;max-width:830px;margin:0 auto;padding-top:22px;border-top:1px solid rgba(13,13,12,.14)} .foot-ruo strong{color:#4a4a45;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(13,13,12,.14);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 1rem;font-size:1rem} .bp-drawer-nav a{display:block;padding:1rem 0;border-bottom:1px solid rgba(13,13,12,.14);text-decoration:none; font-family:"DM Sans",system-ui,-apple-system,sans-serif;letter-spacing:.14em;text-transform:uppercase;font-size:15.5px;color:#0d0d0c} .bp-drawer-nav a:last-child{border-bottom:none} /* ================= MOBILE BOTTOM NAV ================= */ #mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:40;background:#f7f5f0; border-top:1px solid rgba(13,13,12,.14);padding-bottom:env(safe-area-inset-bottom)} #mobile-bottom-nav > div{display:flex;justify-content:space-around;align-items:center;height:64px} #mobile-bottom-nav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px; padding:4px 8px;text-decoration:none;color:#0d0d0c;font-family:"aviano","DM Sans",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase} #mobile-bottom-nav a i{font-size:20.5px;margin-bottom:1px;color:#1c2d24} #mobile-bottom-nav #bottom-cart-count{position:absolute;top:0;right:2px;font-size:10px;background:#1c2d24;color:#fff; width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"DM Sans",system-ui,-apple-system,sans-serif} @media (min-width:768px){#mobile-bottom-nav{display: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 slider green), 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: var(--accent) !important; background-image: none !important; } /* header + announce now live solely in bp-header.css (loaded last on every page) */