/* Move ENTIRE navbar content slightly left */
.navbar .container {
  max-width: 1400px;   /* try 1100, 1050, 1000 for more left */
}

/* Center menu within the narrower container */
.navbar-nav.mx-auto {
  display: flex;
  justify-content: flex-start;   /* correct value (left align) */
  gap: 60px;                     /* spacing between items */
  margin-left: 1000px;             /* shift menu left a little */
}

/* Cart button alignment (unchanged) */
.navbar .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}

/* Hide empty badge */
.navbar .badge:empty {
  display: none;
}

/* ---------- Hot Picks cards ---------- */
.hot-picks{ padding:24px 16px; background:#fff; }
.hot-picks__row{ display:flex; gap:16px; flex-wrap:wrap; }
.product-card{
  flex:1 1 calc(33.333% - 16px);
  min-width:260px;
  background:#fff;
  border:1px solid #e5e7eb; border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.08); }
.product-card__media{ background:#f8fafc; }
.product-card__thumb{ display:block; }
.product-card__media img{ width:100%; height:220px; object-fit:contain; }
.product-card__body{ padding:12px; display:grid; gap:8px; }
.product-card__name{ text-decoration:none; color:#0b1320; display:inline-grid; gap:4px; }
.product-card__name .brand{ font-weight:700; }
.product-card__name .name{ color:#111827; font-weight:800; line-height:1.25; }
.product-card__meta{ color:#64748b; font-size:14px; }
.product-card__price{ font-weight:800; font-size:18px; }
.btn{ border-radius:10px; font-weight:700; }
.btn-primary{ border:1px solid #111827; background:#111827; }
.btn-primary:hover{ background:#0b1320; }
@media (max-width: 960px){ .product-card{ flex:1 1 calc(50% - 16px); } }
@media (max-width: 640px){ .product-card{ flex:1 1 100%; } }

/* ---------- Cart overlay (CSS-only; closed by default) ---------- */
/* Layering */
.navbar{ z-index:1030; }
.cart__backdrop{ z-index:1040; }
.cart__panel{ z-index:1050; }

/* Hidden toggler for panel */
.cart__toggle{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}

/* Backdrop covers the page when cart is open */
.cart__backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
}

/* Panel */
.cart__panel{
  position:fixed; right:0; top:0; bottom:0;
  width:min(380px, 92vw);
  background:#fff;
  border-left:1px solid #e5e7eb;
  box-shadow:-8px 0 24px rgba(0,0,0,.12);
  transform:translateX(110%);     /* CLOSED */
  transition:transform .25s ease;
  display:flex; flex-direction:column;
}
.cart__header{
  padding:12px 14px; border-bottom:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:space-between;
}
.cart__body{
  padding:12px; display:flex; flex-direction:column; gap:12px; height:100%;
}

/* Items list */
.cart__items{
  list-style:none; margin:0; padding:0;
  overflow:auto; flex:1; display:grid; gap:10px;
}
/* Base grid: delete | thumb | main | qty */
.cart__item{
  display:grid;
  grid-template-columns: auto 56px 1fr auto;
  gap:12px; align-items:center;
  padding:8px 0; border-bottom:1px dashed #e5e7eb;
}
.cart__item:last-child{ border-bottom:none; }
.cart__thumb{ width:56px; height:56px; object-fit:cover; border-radius:8px; }
.cart__main{ display:grid; gap:4px; }
.cart__name{ color:#0b1320; font-weight:700; text-decoration:none; }
.cart__name:hover{ text-decoration:underline; }
.cart__price{ color:#6b7280; font-size:.95rem; }
.cart__qty{ display:grid; gap:6px; justify-items:end; min-width:96px; }
.cart__qty .form-label{ margin:0; font-size:.8rem; color:#6b7280; }
.cart__qty input[type="number"]{ width:72px; }

/* Icon-only Delete */
.cart__remove{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; border-radius:8px;
}
.cart__remove i{ font-size:16px; }

/* OPEN states for cart overlay */
.cart__toggle:checked ~ .cart__backdrop{ display:block; }
.cart__toggle:checked ~ .cart__panel{ transform:translateX(0%); }

/* ---------- Show/hide lines based on in-cart toggles ---------- */
/* Start with all lines hidden; show when corresponding toggle is checked */
.cart__items .cart__item{ display:none; }

/* Make sure the in-cart checkboxes appear BEFORE the panel in HTML.
   Then reveal the matching line when checked. */
#in-cart-taylor:checked ~ .cart__panel .item-taylor{ display:grid; }
#in-cart-anue:checked   ~ .cart__panel .item-anue  { display:grid; }
#in-cart-sole:checked   ~ .cart__panel .item-sole  { display:grid; }

/* ---------- Breadcrumb (hierarchical navigation) ---------- */
.breadcrumb-nav{
  background:#fff;
  border-bottom:1px solid #e5e7eb;
}
.breadcrumb{
  margin:0; padding:10px 0;
  list-style:none; display:flex; gap:8px;
}
.breadcrumb li a{ color:#0b1320; text-decoration:none; }
.breadcrumb li a:hover{ text-decoration:underline; }
.breadcrumb li::after{
  content:"›"; margin-left:8px; color:#c0c4cc;
}
.breadcrumb li:last-child::after{ content:""; }
.breadcrumb [aria-current="page"]{ color:#6b7280; }

/* ---------- Category grid (reuses your card styles) ---------- */
.category-grid{
  display:flex; flex-wrap:wrap; gap:16px;
}
.category-grid .product-card{
  flex:1 1 calc(33.333% - 16px);
  min-width:260px;
}
@media (max-width: 960px){
  .category-grid .product-card{ flex:1 1 calc(50% - 16px); }
}
@media (max-width: 640px){
  .category-grid .product-card{ flex:1 1 100%; }
}

/* ---------- Cart visibility mapping (in‑cart toggles -> lines) ---------- */
/* Start hidden; show when corresponding in‑cart checkbox is checked */
.cart__items .cart__item{ display:none; }
#in-cart-taylor:checked ~ .cart__panel .item-taylor{ display:grid; }

/* (The rest of your cart styles from the main page stay the same.)
   Ensure you still have:
   - .cart__toggle / .cart__backdrop / .cart__panel
   - .cart__item grid columns
   - .cart__remove (icon-only delete)
   - .cart__qty sizing
*/

/* Make the navbar content a bit more centered by narrowing the container */
.navbar .navbar-narrow {
  max-width: 1100px;      /* tweak 1000–1180px to your taste */
}

/* Centered categories and spacing (you already had similar rules) */
.navbar-nav.mx-auto{
  display:flex;
  justify-content:center;
  gap:48px;               /* slightly less wide than 90px so it looks tighter */
}
.navbar .nav-link.active{ font-weight:700; }

/* ---------- Breadcrumb ---------- */
.breadcrumb-nav{
  background:#fff;
  border-bottom:1px solid #e5e7eb;
}
.breadcrumb{
  margin:0; padding:10px 0;
  list-style:none; display:flex; gap:8px;
}
.breadcrumb li a{ color:#0b1320; text-decoration:none; }
.breadcrumb li a:hover{ text-decoration:underline; }
.breadcrumb li::after{
  content:"›"; margin-left:8px; color:#c0c4cc;
}
.breadcrumb li:last-child::after{ content:""; }
.breadcrumb [aria-current="page"]{ color:#6b7280; }

/* ---------- Category grid (reuses your product card styles) ---------- */
.category-grid{
  display:flex; flex-wrap:wrap; gap:16px;
}
.category-grid .product-card{
  flex:1 1 calc(33.333% - 16px);
  min-width:260px;
}
@media (max-width: 960px){
  .category-grid .product-card{ flex:1 1 calc(50% - 16px); }
}
@media (max-width: 640px){
  .category-grid .product-card{ flex:1 1 100%; }
}

/* ---------- Cart mappings: show lines only when "in-cart" is checked ---------- */
.cart__items .cart__item{ display:none; }
#in-cart-taylor:checked  ~ .cart__panel .item-taylor  { display:grid; }
#in-cart-martin:checked  ~ .cart__panel .item-martin  { display:grid; }
#in-cart-lespaul:checked ~ .cart__panel .item-lespaul { display:grid; }
#in-cart-strat:checked   ~ .cart__panel .item-strat   { display:grid; }
#in-cart-fg830:checked   ~ .cart__panel .item-fg830   { display:grid; }
#in-cart-prs:checked     ~ .cart__panel .item-prs     { display:grid; }

/* Cajon cart mappings (cajon.html) */
.cart__items .cart__item { display: none; } /* default hidden; keep if not already present */

#in-cart-bhpp47:checked ~ .cart__panel .item-bhpp47 { display: grid; }
#in-cart-zoco:checked   ~ .cart__panel .item-zoco   { display: grid; }
#in-cart-bhp39:checked  ~ .cart__panel .item-bhp39  { display: grid; }

/* ---------- Breadcrumb ---------- */
.breadcrumb-nav{ background:#fff; border-bottom:1px solid #e5e7eb; }
.breadcrumb{ margin:0; padding:10px 0; list-style:none; display:flex; gap:8px; }
.breadcrumb li a{ color:#0b1320; text-decoration:none; }
.breadcrumb li a:hover{ text-decoration:underline; }
.breadcrumb li::after{ content:"›"; margin-left:8px; color:#c0c4cc; }
.breadcrumb li:last-child::after{ content:""; }
.breadcrumb [aria-current="page"]{ color:#6b7280; }

/* ---------- Product detail layout ---------- */
.product-detail{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:24px; align-items:start;
}
@media (max-width: 960px){ .product-detail{ grid-template-columns: 1fr; } }

.product-title{ font-size: clamp(22px, 3.4vw, 32px); margin:0 0 6px; font-weight:800; }
.product-desc{ color:#475569; margin:0 0 12px; }
.product-specs{
  margin: 0; padding: 0;
  display: grid; gap: 6px;
}
.product-specs div{ display:grid; grid-template-columns: 160px 1fr; gap:10px; }
.product-specs dt{ font-weight:700; color:#374151; }
.product-specs dd{ margin:0; color:#111827; }

.product-price{ font-weight:800; }

/* ---------- Product gallery (single image hero) ---------- */
.product-gallery{ display:grid; gap:10px; }
.product-hero{
  position:relative; background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px;
  height: clamp(300px, 48vw, 540px);
  overflow:hidden;
}
.product-hero .hero-img{ position:absolute; inset:0; display:block; }
.product-hero .hero-img img{
  width:100%; height:100%; object-fit:contain; padding:12px;
}

/* ---------- Cart mapping for this product ---------- */
.cart__items .cart__item{ display:none; }
#in-cart-taylor:checked ~ .cart__panel .item-taylor{ display:grid; }

/* Cart visibility mappings (ensure the #in-cart-anue input is BEFORE .cart__panel in HTML) */
.cart__items .cart__item { display: none; }   /* if not already present globally */
#in-cart-anue:checked ~ .cart__panel .item-anue { display: grid; }


/* Show the Sole item only when its toggle is checked */
#in-cart-sole:checked ~ .cart__panel .item-sole {
  display: grid;
}

#in-cart-bhpp47:checked ~ .cart__panel .item-bhpp47 {
  display: grid;
}

/* Cart visibility mapping for Zoco 2.0 */
#in-cart-zoco:checked ~ .cart__panel .item-zoco { display: grid; }
/* ---- Product specs layout (label/value in one row) ---- */
.product-specs {
  /* nothing required here unless you want spacing */
}

.product-specs div{
  display: grid;
  /* widen the label column so long labels don't wrap */
  grid-template-columns: 220px 1fr;   /* try 200–260px to taste */
  column-gap: 12px;
  align-items: start;
}

.product-specs dt{
  font-weight: 700;
  color: #374151;
  white-space: nowrap; /* keep the whole label on one line */
}

.product-specs dd{
  margin: 0;
  color: #111827;
}

/* On very small screens let labels wrap naturally so nothing overflows */
@media (max-width: 576px){
  .product-specs div{
    grid-template-columns: 1fr;
  }
  .product-specs dt{
    white-space: normal;   /* allow wrapping on small screens */
  }
}

#in-cart-bhp39:checked ~ .cart__panel .item-bhp39 { display: grid; }