/* ============================================================
   BLA Shop -- public styles.
   Uses the Best Life Apps theme's CSS variables with sensible fallbacks,
   same approach as bla-newsletter.css, so this looks correct even if the
   theme is ever swapped. Component-level only -- page/section layout
   (page-hero, section wrappers) is the theme's job, not this stylesheet's.
   ============================================================ */

/* ---------- Product grid ---------- */
.bla-shop-products {
  display: grid;
  /* Wider minimum than a generic card grid -- these cards carry a price +
     full-width button in the footer, which needs more room than a plain
     text card to avoid the button text wrapping onto two lines. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}
.bla-product-card {
  background: var(--bg-card, rgba(10, 12, 28, 0.85));
  border: 1px solid var(--border-gold, rgba(201, 168, 76, 0.4));
  border-radius: var(--radius, 6px);
  overflow: hidden;
  transition: all 0.3s ease;
  text-align: left;
}
.bla-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold, 0 0 20px rgba(201, 168, 76, 0.3));
}
.bla-product-card-image {
  aspect-ratio: 1/1;
  background: var(--bg-secondary, #0d1020);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bla-product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bla-product-card-placeholder {
  font-size: 2.5rem;
  opacity: 0.5;
}
.bla-product-card-body { padding: 20px 24px 24px; }
.bla-product-card-body h3 { margin-bottom: 8px; font-size: 1.1rem; }
.bla-product-card-body h3 a { color: var(--gold, #c9a84c); }
.bla-product-card-body p { color: var(--text-muted, #b0a890); font-size: 0.95rem; margin-bottom: 20px; }
.bla-product-card-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.bla-product-card-footer .btn {
  width: 100%;
  justify-content: center;
}
.bla-product-price {
  font-family: var(--font-sub, inherit);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold, #c9a84c);
}

/* ---------- Cart table ---------- */
.bla-shop-cart-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-gold, rgba(201, 168, 76, 0.4));
  border-radius: var(--radius, 6px);
  overflow: hidden;
  margin-bottom: 24px;
}
.bla-shop-cart-table th,
.bla-shop-cart-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
  text-align: left;
}
.bla-shop-cart-table th {
  font-family: var(--font-sub, inherit);
  color: var(--gold, #c9a84c);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bla-shop-qty-form { display: flex; align-items: center; gap: 8px; }
.bla-shop-qty-input {
  width: 64px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-gold, rgba(201, 168, 76, 0.4));
  border-radius: var(--radius, 6px);
  color: var(--text-light, inherit);
}
.bla-shop-remove { color: var(--text-muted, #b0a890); font-size: 0.85rem; }
.bla-shop-remove:hover { color: var(--gold, #c9a84c); }

/* ---------- Summary lists (checkout / order confirmation) ---------- */
.bla-shop-summary-list { list-style: none; margin-bottom: 16px; }
.bla-shop-summary-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
  color: var(--text-light, inherit);
}
.bla-shop-summary-total { font-size: 1.1rem; }

/* ---------- Messages ---------- */
.bla-shop-message {
  padding: 12px 16px;
  border-radius: var(--radius, 6px);
  border: 1px solid var(--border-gold, rgba(201, 168, 76, 0.4));
  background: var(--bg-card, rgba(10, 12, 28, 0.85));
  color: var(--text-light, inherit);
  margin-bottom: 20px;
}
.bla-shop-message--success { border-color: rgba(109, 186, 109, 0.4); color: #6dba6d; background: rgba(30, 92, 30, 0.15); }
.bla-shop-message--error   { border-color: rgba(224, 96, 96, 0.4); color: #e06060; background: rgba(140, 30, 30, 0.15); }

@media (max-width: 700px) {
  .bla-shop-cart-table thead { display: none; }
  .bla-shop-cart-table, .bla-shop-cart-table tbody, .bla-shop-cart-table tr, .bla-shop-cart-table td { display: block; width: 100%; }
  .bla-shop-cart-table tr { margin-bottom: 12px; border-bottom: 2px solid var(--border-gold, rgba(201,168,76,0.4)); }
}