/* * Cart + checkout module — generic default styling. * * Deliberately NOT wrapped in a Tailwind-style `@layer`. An earlier version * put these rules in `@layer bbk-checkout`, positioned (via a cross-file * @layer ordering statement) to sit between Tailwind's `base` and * `components` — in theory enough to beat Preflight's element resets while * still losing to a host override. In practice a build tool processing each * CSS file in isolation (Vite/Lightning CSS here) optimizes away exactly the * cross-file ordering information that trick depends on, so it silently * didn't work: Preflight's `button { background-color: transparent }`, * `* { border-width: 0 }` etc. (layered, in `base`) were beating every * `.bbk-*` rule below regardless of specificity — buttons with no * background, no border, wrong font-size. * * Plain, unlayered CSS sidesteps the whole problem: an unlayered rule always * beats ANY layered rule (Preflight included), full stop, no ordering tricks, * nothing a bundler can silently invalidate. This file is loaded BEFORE the * host's own stylesheet (see the @vite call in the layout ), so: * * - a later PLAIN (unlayered) `.bbk-*` rule in the host stylesheet wins — * same specificity, later in source order * - a later host rule with a MORE specific selector wins regardless * - a host rule inside `@layer components`/`@layer utilities` does NOT * win — unlayered always beats layered. Theme this module from plain * rules in app.css, not from inside a Tailwind layer. * * Two ways to theme this, cheapest first: * * 1. Redefine the --bbk-* custom properties below (from :root, or scoped to * .bbk-cart for a cart-only override) — covers colour, radius, shadow, * font without touching a single selector below. * * :root { --bbk-color-accent: var(--color-brand); --bbk-radius: 0; } * * 2. Override individual `.bbk-*` rules directly (as plain rules, per * above) for anything structural (spacing, layout) the variables don't * cover. * * This file's own look is a deliberately neutral placeholder — inoffensive, * not "designed" — so a project always has something reasonable before it * themes; it is not meant to be edited per project. */ :root { --bbk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bbk-color-text: #18181b; --bbk-color-muted: #71717a; --bbk-color-bg: #ffffff; --bbk-color-bg-muted: #f4f4f5; --bbk-color-border: #e4e4e7; --bbk-color-accent: #18181b; --bbk-color-accent-text: #ffffff; --bbk-color-danger: #dc2626; --bbk-radius: 8px; --bbk-radius-sm: 4px; --bbk-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); } .bbk-cart[hidden] { display: none; } .bbk-cart { position: fixed; inset: 0; z-index: 1000; font-family: var(--bbk-font); font-size: 0.9375rem; line-height: 1.4; color: var(--bbk-color-text); } .bbk-cart-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.25s ease; } .bbk-cart[data-bbk-cart-state="open"] .bbk-cart-backdrop { opacity: 1; } .bbk-cart-panel { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: min(420px, 100vw); height: 100%; background: var(--bbk-color-bg); box-shadow: var(--bbk-shadow); transform: translateX(100%); transition: transform 0.25s ease; } .bbk-cart[data-bbk-cart-state="open"] .bbk-cart-panel { transform: translateX(0); } .bbk-cart-panel-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.5rem 1.25rem; border-bottom: 1px solid var(--bbk-color-border); } .bbk-cart-heading { margin: 0; font-size: 1.375rem; font-weight: 700; } .bbk-cart-dismiss, .bbk-cart-item-remove, .bbk-cart-qty-btn { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; line-height: 1; color: var(--bbk-color-muted); transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .bbk-cart-dismiss { font-size: 1.75rem; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--bbk-radius-sm); flex-shrink: 0; } .bbk-cart-dismiss:hover { color: var(--bbk-color-text); background: var(--bbk-color-bg-muted); } .bbk-cart-item-remove:hover { color: var(--bbk-color-danger); } .bbk-cart-dismiss:focus-visible, .bbk-cart-item-remove:focus-visible, .bbk-cart-qty-btn:focus-visible, .bbk-cart-qty-input:focus-visible, .bbk-cart-checkout:focus-visible, .bbk-cart-coupon-input:focus-visible, .bbk-cart-coupon-submit:focus-visible, .bbk-cart-coupon-remove:focus-visible { outline: 2px solid var(--bbk-color-accent); outline-offset: 2px; } .bbk-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .bbk-cart-panel-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem; } .bbk-cart-items { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; } .bbk-cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 0.875rem; align-items: start; } .bbk-cart-item-media img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: var(--bbk-radius-sm); background: var(--bbk-color-bg-muted); } .bbk-cart-item-detail { min-width: 0; } .bbk-cart-item-title { margin: 0 0 0.25rem; font-weight: 600; } .bbk-cart-item-unit { margin: 0 0 0.625rem; color: var(--bbk-color-muted); } .bbk-cart-item-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; } .bbk-cart-item-total { margin: 0; font-weight: 600; } .bbk-cart-item-remove { font-size: 1.125rem; width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; } .bbk-cart-qty { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--bbk-color-border); border-radius: var(--bbk-radius-sm); overflow: hidden; } .bbk-cart-qty-btn { width: 1.75rem; height: 1.75rem; background: var(--bbk-color-bg-muted); } .bbk-cart-qty-btn:hover { background: var(--bbk-color-border); color: var(--bbk-color-text); } .bbk-cart-qty-input { width: 2.25rem; height: 1.75rem; border: 0; border-left: 1px solid var(--bbk-color-border); border-right: 1px solid var(--bbk-color-border); text-align: center; font: inherit; color: inherit; background: var(--bbk-color-bg); appearance: textfield; -moz-appearance: textfield; } .bbk-cart-qty-input::-webkit-outer-spin-button, .bbk-cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .bbk-cart-summary { padding-top: 1.25rem; border-top: 1px solid var(--bbk-color-border); display: flex; flex-direction: column; gap: 1rem; } .bbk-cart-summary-row { display: flex; justify-content: space-between; font-weight: 600; } .bbk-cart-summary-row--discount { color: var(--bbk-color-danger); } .bbk-cart-summary-row--total { padding-top: 0.75rem; border-top: 1px solid var(--bbk-color-border); font-size: 1.0625rem; } .bbk-cart-coupon-form { display: flex; gap: 0.5rem; } .bbk-cart-coupon-input { flex: 1 1 auto; min-width: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--bbk-color-border); border-radius: var(--bbk-radius-sm); font: inherit; color: inherit; background: var(--bbk-color-bg); } .bbk-cart-coupon-submit { flex: 0 0 auto; padding: 0.5rem 0.875rem; border: 1px solid var(--bbk-color-border); border-radius: var(--bbk-radius-sm); background: var(--bbk-color-bg-muted); font: inherit; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .bbk-cart-coupon-submit:hover { background: var(--bbk-color-border); } .bbk-cart-coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.875rem; border: 1px solid var(--bbk-color-border); border-radius: var(--bbk-radius-sm); background: var(--bbk-color-bg-muted); } .bbk-cart-coupon-code { font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } .bbk-cart-coupon-remove { flex: 0 0 auto; background: none; border: 0; padding: 0; font: inherit; font-size: 0.8125rem; color: var(--bbk-color-muted); text-decoration: underline; cursor: pointer; transition: color 0.15s ease; } .bbk-cart-coupon-remove:hover { color: var(--bbk-color-danger); } .bbk-cart-coupon-error { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--bbk-color-danger); } .bbk-cart-checkout { display: block; width: 100%; padding: 0.875rem 1.25rem; border: 1px solid var(--bbk-color-accent); border-radius: var(--bbk-radius); background: var(--bbk-color-accent); color: var(--bbk-color-accent-text); font: inherit; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: opacity 0.15s ease; } .bbk-cart-checkout:hover { opacity: 0.85; } .bbk-cart-checkout:disabled { cursor: not-allowed; opacity: 0.4; } .bbk-cart-empty { text-align: center; color: var(--bbk-color-muted); padding: 2.5rem 0; }