/* Shop page specific styles */

/* Intro/Hero */
.shop-hero {
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-soft-yellow), white 65%) 0%, var(--color-cream) 100%);
  padding-block: var(--space-12) var(--space-8);
  border-bottom: 1px solid var(--gray-200);
}
.shop-hero .container > p { color: var(--gray-700); }

.shop-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.shop-toolbar input[type='search'] {
  background: var(--color-surface);
}
.toolbar-actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}
.results-count { color: var(--gray-700); font-size: var(--fs-200); }

/* Category chips */
.category-chips, .category-list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.chip {
  --chip-bg: var(--gray-100);
  --chip-color: var(--color-text);
  border: 1px solid var(--gray-300);
  background: var(--chip-bg);
  color: var(--chip-color);
  padding: 8px 12px;
  border-radius: var(--radius-round);
  font-weight: 600;
  cursor: pointer;
}
.chip:hover { background: color-mix(in oklab, var(--gray-100), white 20%); }
.chip.active { background: color-mix(in oklab, var(--color-primary), white 78%); border-color: var(--color-primary); }

/* Product grid */
.featured-products { padding-block: var(--space-10); }
.section-head p { color: var(--gray-700); }
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  background: var(--color-surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--gray-100); }
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--color-primary);
  color: #fff;
  padding: 6px 10px;
  border-radius: var(--radius-round);
  font-size: var(--fs-200);
  box-shadow: var(--shadow-sm);
}
.badge-bestseller { background: var(--color-success); }
.badge-new { background: var(--color-warning); }
.badge-deal { background: var(--color-danger); }
.badge-picked { background: var(--color-primary); }
.badge-fresh { background: var(--color-brown); }
.badge-seasonal { background: var(--gray-800); }
.badge-local { background: var(--gray-700); }

.product-content { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.product-title { font-size: var(--fs-500); margin: 0; }
.product-desc { color: var(--gray-700); margin: 0; }
.rating { color: var(--color-primary); font-weight: 700; }
.price-row { display: flex; align-items: baseline; gap: var(--space-3); }
.price { font-weight: 800; font-size: var(--fs-500); color: var(--color-text); }
.price-old { text-decoration: line-through; color: var(--gray-600); font-weight: 600; }
.price-now { color: var(--color-danger); }
.product-actions { display: flex; gap: var(--space-3); margin-top: auto; }

/* Offers */
.special-offers { padding-block: var(--space-6) var(--space-10); background: var(--gray-50); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-4); }
@media (max-width: 900px) { .offer-grid { grid-template-columns: 1fr; } }
.offer-card { background: linear-gradient(135deg, color-mix(in oklab, var(--color-soft-yellow), white 60%), var(--color-cream)); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.offer-card h3 { margin-top: 0; }
.offer-actions { margin-top: var(--space-4); display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Category section */
.shop-by-category { padding-block: var(--space-10); }
.category-list { margin-top: var(--space-3); }

/* Reviews */
.customer-reviews { padding-block: var(--space-10); background: var(--gray-50); border-top: 1px solid var(--gray-200); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }
.review { background: var(--color-surface); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.review-text { font-size: var(--fs-400); color: var(--gray-800); }
.review footer { margin-top: var(--space-3); color: var(--gray-700); }

/* Checkout */
.secure-checkout { padding-block: var(--space-10); }
.checkout-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); counter-reset: step; margin-top: var(--space-4); }
@media (max-width: 1000px) { .checkout-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .checkout-steps { grid-template-columns: 1fr; } }
.checkout-steps li { list-style: none; background: var(--color-surface); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); position: relative; }
.checkout-steps li::before { counter-increment: step; content: counter(step); position: absolute; top: -12px; left: -12px; width: 36px; height: 36px; display: grid; place-items: center; background: var(--color-primary); color: #fff; border-radius: var(--radius-round); box-shadow: var(--shadow-md); font-weight: 800; }
.payments { margin-top: var(--space-6); }
.payments-title { font-weight: 700; }
.payments-list { display: flex; gap: var(--space-3); flex-wrap: wrap; padding-left: 0; list-style: none; }
.pm { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid var(--gray-300); border-radius: var(--radius-round); background: var(--gray-100); font-weight: 700; }
.security-note { color: var(--gray-700); margin-top: var(--space-2); }

/* Return policy */
.return-policy { padding-block: var(--space-10); background: var(--gray-50); border-top: 1px solid var(--gray-200); }
.policy-list { margin-top: var(--space-3); }

/* Contact */
.contact-support { padding-block: var(--space-10); }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-6); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { list-style: none; padding: 0; margin-top: var(--space-3); }
.contact-list li { margin-bottom: var(--space-2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-field.full { grid-column: 1 / -1; }
.optional { color: var(--gray-600); font-size: var(--fs-200); }
#contact-status { min-height: 1.2em; color: var(--color-success); }

/* FAQ */
.faq { padding-block: var(--space-10); }
.faq-list { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.faq-list details { background: var(--color-surface); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.faq-list summary { cursor: pointer; font-weight: 700; }
.faq-list p { margin-top: var(--space-2); color: var(--gray-800); }

/* Toast */
.cart-toast { position: fixed; inset: auto 16px 16px auto; background: var(--gray-900); color: #fff; padding: 10px 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 1100; transform: translateY(16px); opacity: 0; pointer-events: none; transition: all var(--duration-normal) var(--easing-standard); }
.cart-toast.show { transform: translateY(0); opacity: 1; }