/* Shop Styles: Product Grid, Filters, Detail Page */

/* --- Category Filters --- */
.shop-filters { display: flex; justify-content: center; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; }
.shop-filter-btn {
  padding: 8px 22px; border: 2px solid var(--color-accent); border-radius: var(--radius-sm);
  background: transparent; color: var(--color-accent); font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer; transition: all var(--transition);
}
.shop-filter-btn:hover, .shop-filter-btn.active {
  background: var(--color-accent); color: var(--color-white);
}

/* --- Product Grid --- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.product-card {
  background: var(--color-white); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
}
.product-card-image { position: relative; display: block; overflow: hidden; }
.product-card-image img { width: 100%; height: 240px; object-fit: cover; transition: transform 0.4s var(--ease-premium); }
.product-card:hover .product-card-image img { transform: scale(1.05); }
.product-badge {
  position: absolute; top: 12px; left: 12px; background: var(--color-accent);
  color: var(--color-white); padding: 4px 12px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; border-radius: var(--radius-sm);
}
.product-card-body { padding: 20px; }
.product-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.product-card h3 a { color: var(--color-dark); text-decoration: none; }
.product-card h3 a:hover { color: var(--color-accent); }
.product-price { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--color-dark); margin-bottom: 6px; }
.product-card .product-desc { font-size: 0.85rem; color: var(--color-text-light); line-height: 1.6; margin-bottom: 14px; }

/* --- Product Detail --- */
.product-detail-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
.product-detail-img img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--radius-lg); }
.product-detail-info h2 { margin-bottom: 8px; }
.product-detail-price { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--color-dark); margin-bottom: 16px; }
.product-detail-desc { font-size: 0.95rem; line-height: 1.8; margin-bottom: 24px; color: var(--color-text); }

/* Options (size/color buttons) */
.product-option-group { margin-bottom: 20px; }
.product-option-group label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; color: var(--color-dark); }
.product-options { display: flex; gap: 8px; flex-wrap: wrap; }
.product-option-btn {
  padding: 8px 18px; border: 2px solid #ddd; border-radius: var(--radius-sm);
  background: var(--color-white); cursor: pointer; font-family: var(--font-body);
  font-size: 0.85rem; transition: all var(--transition);
}
.product-option-btn:hover, .product-option-btn.active {
  border-color: var(--color-accent); color: var(--color-accent);
}

/* Quantity */
.product-qty { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.product-qty label { font-weight: 600; font-size: 0.9rem; color: var(--color-dark); }
.product-qty input {
  width: 60px; text-align: center; padding: 8px; border: 2px solid #ddd;
  border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.95rem;
}

.product-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Related Products --- */
.related-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* --- Product Card Actions --- */
.product-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.product-card-actions .btn { flex: 1; min-width: 0; text-align: center; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .product-detail-layout { grid-template-columns: 1fr; }
  .related-products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .product-grid { grid-template-columns: 1fr; }
  .related-products-grid { grid-template-columns: 1fr 1fr; }
  .product-detail-img img { height: 280px; }
  .product-card-actions { flex-direction: column; }
  .product-card-image img { height: 200px; }
  .product-detail-price { font-size: 1.3rem; }
  .shop-filter-btn { padding: 6px 14px; font-size: 0.78rem; }
}
@media (max-width: 400px) {
  .related-products-grid { grid-template-columns: 1fr; }
  .product-detail-img img { height: 220px; }
}