/* Shared storefront styles for product grids, cards, and detail pages.
   Complements (does not replace) the original ch-/cd- theme styles that
   live inline in partials/header.php and partials/footer.php. */

.blacs-featured,
.blacs-shop { padding: 64px 24px; background: #ffffff; }
.blacs-featured__inner,
.blacs-shop__inner { max-width: 1200px; margin: 0 auto; }

.blacs-featured__title,
.blacs-shop__title {
  font-family: 'Jost', sans-serif;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 40px;
  color: #121212;
}

.blacs-shop__filters {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.blacs-shop__filter {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 1px solid #121212;
  color: #121212;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
}
.blacs-shop__filter:hover,
.blacs-shop__filter.is-active {
  background: #121212;
  color: #ffffff;
}

.blacs-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blacs-product-card { text-decoration: none; color: inherit; display: block; }
.blacs-product-card__image {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #f3f3f3;
  border-radius: 4px;
  margin-bottom: 12px;
}
.blacs-product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blacs-product-card:hover .blacs-product-card__image img { transform: scale(1.04); }
.blacs-product-card__name {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 4px;
  color: #121212;
}
.blacs-product-card__price { font-size: 14px; color: #555555; margin: 0; }
.blacs-featured__cta { text-align: center; margin-top: 48px; }
.blacs-shop__empty { text-align: center; color: #777; padding: 60px 0; font-family: 'Jost', sans-serif; }

@media screen and (max-width: 768px) {
  .blacs-product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .blacs-featured, .blacs-shop { padding: 40px 16px; }
}

/* ---- Product detail page ---- */
.blacs-pdp {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
}
.blacs-pdp__gallery-main {
  aspect-ratio: 3/4;
  background: #f3f3f3;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}
.blacs-pdp__gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.blacs-pdp__thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.blacs-pdp__thumb {
  width: 72px; height: 72px; border-radius: 4px; overflow: hidden;
  border: 1px solid #e5e5e5; cursor: pointer; background: #f3f3f3;
}
.blacs-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.blacs-pdp__thumb.is-active { border-color: #121212; }

.blacs-pdp__name {
  font-family: 'Jost', sans-serif;
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
  color: #121212;
}
.blacs-pdp__price { font-size: 20px; color: #333; margin: 0 0 24px; }
.blacs-pdp__description { font-size: 15px; line-height: 1.6; color: #444; margin-bottom: 28px; }

.blacs-pdp__label {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #121212;
  margin-bottom: 10px;
  display: block;
}
.blacs-pdp__sizes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.blacs-pdp__size-btn {
  min-width: 48px;
  padding: 10px 14px;
  border: 1px solid #ccc;
  background: #fff;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.blacs-pdp__size-btn:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.blacs-pdp__size-btn.is-selected { background: #121212; color: #fff; border-color: #121212; }

.blacs-pdp__qty { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.blacs-pdp__qty-btn {
  width: 36px; height: 36px; border: 1px solid #ccc; background: #fff;
  font-size: 16px; cursor: pointer; border-radius: 2px;
}
.blacs-pdp__qty-value { min-width: 24px; text-align: center; font-family: 'Jost', sans-serif; }

.blacs-pdp__add-btn {
  width: 100%;
  padding: 16px;
  background: #121212;
  color: #ffffff;
  border: none;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: opacity 0.2s;
}
.blacs-pdp__add-btn:hover { opacity: 0.85; }
.blacs-pdp__add-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Checkout state — button after item is added */
.blacs-pdp__add-btn.is-checkout {
  background: #1a7a4a;
  letter-spacing: 0.06em;
}
.blacs-pdp__add-btn.is-checkout:hover { opacity: 0.9; }

/* "Continue shopping" link that appears under the button */
.blacs-pdp__continue-link {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  color: #777;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
}
.blacs-pdp__continue-link:hover { color: #121212; }

/* Shake animation for size selector when no size selected */
@keyframes blacsShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.blacs-pdp__sizes--shake {
  animation: blacsShake 0.5s ease;
}

@media screen and (max-width: 860px) {
  .blacs-pdp { grid-template-columns: 1fr; gap: 32px; padding: 32px 16px 60px; }
}