/* ==========================================================================
   Sản phẩm — trang danh sách (archive) và chi tiết (single)
   ========================================================================== */

.bb-shop { padding-block: 56px var(--bb-section-y); }
.bb-shop__intro { max-width: 860px; margin: 0 auto 32px; text-align: center; color: var(--bb-muted); }
.bb-shop__empty { padding: 48px; text-align: center; color: var(--bb-muted); background: #fff; border-radius: var(--bb-radius-lg); }

/* ---------- Chi tiết ---------- */
.bb-pd { padding-block: 32px 72px; }
.bb-pd .bb-crumb { margin-bottom: 26px; }
.bb-pd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.bb-pd__media {
  position: sticky; top: calc(var(--bb-header-h) + 20px);
  border-radius: var(--bb-radius-lg); overflow: hidden; background: #fff; box-shadow: var(--bb-shadow-lg);
}
.bb-pd__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.bb-pd__flags { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-pd h1 { margin-top: 16px; font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; }
.bb-pd__price { margin-top: 14px; }
.bb-pd__price .bb-price { font-size: 32px; }
.bb-pd__excerpt { margin-top: 16px; font-size: 17px; color: var(--bb-muted); }
.bb-pd__specs {
  margin-top: 26px; border-radius: var(--bb-radius); overflow: hidden;
  border: 1px solid var(--bb-line); background: #fff;
}
.bb-pd__specs div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 13px 18px; font-size: 15px; }
.bb-pd__specs div + div { border-top: 1px solid var(--bb-line); }
.bb-pd__specs dt { font-weight: 700; }
.bb-pd__specs dd { margin: 0; color: var(--bb-muted); }
.bb-pd__buy { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.bb-pd__buy .bb-btn { flex: 1 1 200px; }
.bb-pd__note {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 18px;
  padding: 14px 16px; border-radius: 14px; background: var(--bb-dough); font-size: 14px; color: var(--bb-muted);
}
.bb-pd__note svg { width: 20px; height: 20px; flex: none; color: var(--bb-red); margin-top: 2px; }

.bb-pd__desc { padding-block: 0 72px; }
.bb-pd__desc-box { max-width: 900px; margin-inline: auto; padding: 44px 52px; border-radius: var(--bb-radius-lg); background: #fff; box-shadow: var(--bb-shadow); }
.bb-pd__desc-box > h2 { margin-bottom: 18px; font-size: 28px; }

.bb-pd-related { padding-block: 0 var(--bb-section-y); }