/* Typography */
:where(h1,h2,h3,h4,h5,h6){margin:0;font-weight:700;color:var(--bb-fg);line-height:1.15;}
:where(h1){font-size:var(--bb-fs-3xl);} 
:where(h2){font-size:var(--bb-fs-2xl);} 
:where(h3){font-size:var(--bb-fs-xl);} 
:where(h4){font-size:var(--bb-fs-lg);} 
:where(p){margin:0 0 var(--bb-s-3);color:var(--bb-muted);}
small{font-size:var(--bb-fs-sm);color:var(--bb-muted);}

main{display:block;padding-block:var(--bb-s-6);}
main.tight{padding-block:var(--bb-s-4);}
.bb-main{padding-inline:var(--bb-s-4);}
@media(min-width:768px){.bb-main{padding-inline:var(--bb-s-6);}}
.section-heading{display:grid;gap:var(--bb-s-2);margin-bottom:var(--bb-s-4);}
.bb-section{padding-block:var(--bb-s-8);} 

/* Header & footer */
.bb-header{border-bottom:1px solid var(--bb-border);background:var(--bb-bg);box-shadow:0 1px 0 rgba(15,23,42,.05);}
.bb-header-fixed{position:sticky;top:0;z-index:40;}
.bb-header .bb-container,.bb-header>.bb-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--bb-s-4);padding-block:var(--bb-s-4);flex-wrap:wrap;}
.bb-header .bb-logo{display:inline-flex;align-items:center;gap:var(--bb-s-2);font-weight:700;font-size:var(--bb-fs-xl);}
.bb-header nav,.bb-header .navigation,.bb-header .bb-nav{display:flex;align-items:center;gap:var(--bb-s-3);flex-wrap:wrap;margin-left:auto;}
.bb-header nav ul,.bb-header .navigation ul{display:flex;align-items:center;gap:var(--bb-s-2);margin:0;padding:0;list-style:none;}
.bb-header nav a,.bb-header .navigation a,.bb-header .bb-nav a{padding:var(--bb-s-2) var(--bb-s-3);border-radius:var(--bb-radius-sm);transition:var(--bb-transition);color:var(--bb-fg);font-weight:600;}
.bb-header nav a:hover,.bb-header .navigation a:hover,.bb-header nav a:focus-visible{background:var(--bb-surface);}
.bb-header .mobile-nav-toggle{background:transparent;border:1px solid var(--bb-border);border-radius:var(--bb-radius-sm);padding:var(--bb-s-2) var(--bb-s-3);font-size:var(--bb-fs-lg);}

.bb-footer{border-top:1px solid var(--bb-border);background:var(--bb-bg);margin-top:var(--bb-s-8);}
.bb-footer .bb-container,.bb-footer>.bb-inner{padding-block:var(--bb-s-6);display:grid;gap:var(--bb-s-3);color:var(--bb-muted);}
.bb-footer nav{display:flex;gap:var(--bb-s-3);flex-wrap:wrap;}

/* Buttons */
.bb-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--bb-s-2);padding:12px 16px;border-radius:var(--bb-radius-sm);border:1px solid var(--bb-border);background:#fff;cursor:pointer;font-weight:600;line-height:1;transition:var(--bb-transition);box-shadow:var(--bb-shadow);text-decoration:none;}
.bb-btn.primary,.bb-btn--primary{background:var(--bb-primary);color:var(--bb-primary-fg);border-color:transparent;box-shadow:none;}
.bb-btn.ghost,.bb-btn--ghost{background:transparent;border-color:var(--bb-border);color:var(--bb-fg);}
.bb-btn.ghost:hover{background:var(--bb-surface);}
.bb-btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;}

/* Badges */
.bb-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:var(--bb-surface);color:var(--bb-muted);font-size:var(--bb-fs-sm);font-weight:600;}
.bb-badge.accent{background:var(--bb-accent);color:#fff;}
.bb-badge.success{background:var(--bb-success);color:#fff;}

/* Grid utilities */
.bb-grid{display:grid;gap:var(--bb-s-4);grid-template-columns:repeat(1,minmax(0,1fr));}
.bb-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.bb-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.bb-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.bb-grid.cols-auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
@media(max-width:767px){
  .bb-grid.cols-2,.bb-grid.cols-3,.bb-grid.cols-4{grid-template-columns:repeat(1,minmax(0,1fr));}
}
@media(min-width:640px){
  .bb-grid.cols-2\@sm{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(min-width:768px){
  .bb-grid.cols-3\@md{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(min-width:900px){
  .bb-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bb-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .bb-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .bb-grid.cols-4\@lg{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* Card pattern */
.bb-card{border:1px solid var(--bb-border);border-radius:var(--bb-radius);overflow:hidden;background:#fff;display:flex;flex-direction:column;min-height:100%;transition:transform .18s ease,box-shadow .18s ease;}
.bb-card:hover,.bb-card:focus-within{transform:translateY(-4px);box-shadow:var(--bb-shadow);}
.bb-card .bb-thumb{background:var(--bb-surface);position:relative;overflow:hidden;}
.bb-card .bb-thumb img{width:100%;height:100%;object-fit:cover;}
.bb-card-ribbon{position:absolute;top:12px;left:12px;background:var(--bb-primary);color:var(--bb-primary-fg);padding:4px 10px;border-radius:999px;font-size:var(--bb-fs-xs);font-weight:700;box-shadow:0 4px 12px rgba(37,99,235,.25);}
.bb-card-status{position:absolute;top:12px;right:12px;background:#111827;color:#fff;padding:4px 10px;border-radius:999px;font-size:var(--bb-fs-xs);font-weight:600;opacity:.92;}
.bb-card .bb-body{padding:var(--bb-s-4);display:grid;gap:var(--bb-s-2);flex:1;}
.bb-card h3,.bb-card h4{color:var(--bb-fg);}
.bb-card .bb-price{font-weight:700;font-size:var(--bb-fs-lg);color:var(--bb-primary);}
.bb-card .bb-actions{display:flex;gap:var(--bb-s-2);flex-wrap:wrap;margin-top:auto;}
.bb-card.is-sold-out{opacity:.82;}
.bb-card.is-sold-out .add-to-basket-btn{cursor:not-allowed;pointer-events:none;background:var(--bb-border);color:var(--bb-muted);border-color:var(--bb-border);box-shadow:none;}

/* PDP layout */
.bb-pdp{display:grid;gap:var(--bb-s-6);}
@media(min-width:900px){.bb-pdp{grid-template-columns:1fr 1fr;align-items:start;}}
.bb-buybox{display:grid;gap:var(--bb-s-3);padding:var(--bb-s-4);border:1px solid var(--bb-border);border-radius:var(--bb-radius);background:#fff;position:relative;}
.bb-buybox label{display:grid;gap:var(--bb-s-1);font-weight:600;color:var(--bb-fg);} 
.bb-buybox input[type="number"],.bb-buybox select{border:1px solid var(--bb-border);border-radius:var(--bb-radius-sm);padding:10px 12px;}
.bb-buybox details{border-top:1px solid var(--bb-border);padding-top:var(--bb-s-3);}
.bb-buybox summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--bb-s-2);}
.bb-buybox summary::-webkit-details-marker{display:none;}
.bb-buybox details[open]{color:var(--bb-fg);}

.bb-sticky-atc{position:fixed;inset:auto 0 0 0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:10px 16px;background:#fff;border-top:1px solid var(--bb-border);box-shadow:0 -8px 20px rgba(15,23,42,.08);transform:translateY(100%);transition:transform .25s ease;z-index:45;gap:var(--bb-s-3);}
.bb-sticky-atc.show{transform:translateY(0);}

/* Forms */
.bb-field{display:grid;gap:var(--bb-s-1);}
.bb-field label{font-weight:600;}
.bb-field input,.bb-field select,.bb-field textarea{border:1px solid var(--bb-border);border-radius:var(--bb-radius-sm);padding:10px 12px;background:#fff;min-height:44px;}
.bb-field textarea{min-height:120px;}
.bb-variants{display:grid;gap:var(--bb-s-3);margin-top:var(--bb-s-3);}
.bb-variants.is-hidden{display:none;}
.bb-variant-field select{border:1px solid var(--bb-border);border-radius:var(--bb-radius-sm);padding:10px 12px;background:#fff;}
.bb-variant-summary{font-size:var(--bb-fs-sm);color:var(--bb-muted);margin-top:4px;}
.bb-variant-warning{font-size:var(--bb-fs-sm);color:var(--bb-danger);margin-top:4px;}
.bb-variant-line{font-size:var(--bb-fs-sm);color:var(--bb-muted);margin-top:2px;}

/* Utilities */
.bb-pill{border-radius:999px;padding:var(--bb-s-1) var(--bb-s-3);display:inline-flex;align-items:center;gap:var(--bb-s-1);background:var(--bb-surface);}
.bb-flex{display:flex;align-items:center;gap:var(--bb-s-3);}
.bb-flex.between{justify-content:space-between;}
.bb-pill.success{background:rgba(22,163,74,.12);color:var(--bb-success);}
.bb-pill.warning{background:rgba(245,158,11,.12);color:var(--bb-warning);}

/* Tables */
.bb-table{width:100%;border-collapse:collapse;font-size:var(--bb-fs-sm);}
.bb-table th,.bb-table td{padding:12px 16px;border-bottom:1px solid var(--bb-border);text-align:left;}

/* Legacy helpers */
.bb-legacy-card{border-radius:var(--bb-radius);overflow:hidden;border:1px solid var(--bb-border);} 

/* Overlay */
.bb-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:100;}
.bb-overlay.show{opacity:1;pointer-events:auto;}
.bb-modal{background:#fff;border-radius:var(--bb-radius);padding:var(--bb-s-6);max-width:420px;width:clamp(280px,90vw,420px);display:grid;gap:var(--bb-s-4);}
.bb-modal .bb-actions{display:flex;justify-content:flex-end;gap:var(--bb-s-3);}