/* ============================================================
   SHOP (Prompt 12) — home preview, catalog, detail, checkout.
   Clean product commerce, never a discount-marketplace look.
   ============================================================ */

.shop-home { background: var(--cj-white); padding-block: var(--cj-space-16) var(--cj-space-20); }
.shop-home-head { display: grid; gap: var(--cj-space-4); margin-bottom: var(--cj-space-8); max-width: 720px; }
.shop-home-head h2 { font-size: clamp(1.75rem, 4.5vw, 2.75rem); }
.shop-home-intro { color: var(--color-text-muted); font-size: clamp(1rem, 2.4vw, 1.125rem); line-height: 1.65; }
@media (min-width: 1024px) {
  .shop-home-head { grid-template-columns: 1fr auto; align-items: end; max-width: none; }
}
.shop-cats { display: grid; gap: var(--cj-space-4); margin-bottom: var(--cj-space-12); }
.shop-cat {
  position: relative; display: grid; grid-template-columns: 120px 1fr; gap: var(--cj-space-4);
  align-items: center; overflow: hidden;
  background: var(--cj-navy-deep); color: #fff;
  border-radius: var(--radius-lg); padding: var(--cj-space-4);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base);
}
.shop-cat-media { width: 120px; height: 120px; border-radius: var(--radius-md); overflow: hidden; background: rgba(18, 151, 254, 0.12); flex-shrink: 0; }
.shop-cat-media img { width: 100%; height: 100%; object-fit: cover; }
.shop-cat-branded { display: grid; place-items: center; color: var(--cj-primary); }
.shop-cat-branded svg { width: 52px; height: 52px; }
.shop-cat-body { display: grid; gap: var(--space-1); align-content: center; }
.shop-cat-body strong { font-family: var(--font-display); font-size: 1.25rem; }
.shop-cat-body small { color: #C7D5E4; }
.shop-cat-cta { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--cj-primary); margin-top: var(--space-1); }
.shop-cat-cta svg { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .shop-cat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .shop-cat:hover .shop-cat-cta svg { transform: translateX(3px); }
}
@media (min-width: 1024px) {
  .shop-cats { grid-template-columns: repeat(3, 1fr); gap: var(--cj-space-6); }
  .shop-cat { grid-template-columns: 1fr; }
  .shop-cat-media { width: 100%; height: 170px; }
}
.shop-featured-title { font-size: clamp(1.375rem, 3vw, 1.75rem); margin-bottom: var(--cj-space-6); }
.shop-track {
  display: flex; gap: var(--cj-space-4);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: calc(var(--space-4) * -1);
  padding-inline: var(--space-4);
  padding-bottom: var(--space-2);
}
.shop-track::-webkit-scrollbar { display: none; }

/* Reusable product card. */
.product-card {
  position: relative; flex: 0 0 84vw; max-width: 400px;
  scroll-snap-align: center;
  background: var(--cj-surface); border: 1px solid var(--cj-border);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base);
}
.product-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cj-surface-tint); }
.product-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.product-nomedia { display: grid; place-items: center; background: radial-gradient(420px 220px at 50% 0%, rgba(18, 151, 254, 0.25) 0%, transparent 65%), var(--cj-navy-deep); }
.product-nomedia svg { width: 56px; height: 56px; color: var(--cj-primary); opacity: 0.9; }
.product-body { padding: var(--cj-space-4); display: grid; gap: var(--space-1); align-content: start; flex: 1; }
.product-cat { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; color: var(--cj-primary); margin: 0; }
.product-name { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.35; margin: 0; }
.product-price { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; margin: var(--space-1) 0 0; }
.product-compare { font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); margin-left: var(--space-2); }
.product-link { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--cj-primary); margin-top: auto; padding-top: var(--space-2); width: fit-content; }
.product-link svg { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-out); }
.product-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #C4D5E6; }
  .product-card:hover .product-media img { transform: scale(1.04); }
  .product-card:hover .product-link svg { transform: translateX(3px); }
}

/* Catalog page. */
.shop-page { background: var(--cj-background); padding-block: var(--cj-space-8) var(--cj-space-16); }
.shop-hero { max-width: 720px; margin-bottom: var(--cj-space-8); display: grid; gap: var(--space-3); }
.shop-toolbar { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
@media (min-width: 768px) { .shop-toolbar { grid-template-columns: auto 1fr; align-items: center; } .shop-search { max-width: 420px; justify-self: end; width: 100%; } }
.shop-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; margin-bottom: var(--cj-space-8); }
.shop-filters label { display: grid; gap: 2px; font-size: var(--text-sm); font-weight: 600; }
.shop-filters select { font: inherit; min-height: 48px; border: 1px solid var(--cj-border); border-radius: var(--radius-md); padding: 0 var(--space-3); background: #fff; max-width: 220px; }
.shop-grid { display: grid; gap: var(--cj-space-4); }
.shop-grid .product-card { flex: none; max-width: none; }
@media (min-width: 768px) {
  .shop-track { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .shop-track .product-card { flex: none; max-width: none; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: var(--cj-space-6); }
}
@media (min-width: 1024px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .shop-track { grid-template-columns: repeat(4, 1fr); gap: var(--cj-space-6); } }

/* Detail + checkout. */
.product-detail-grid { display: grid; gap: var(--cj-space-8); }
.product-gallery-main { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--cj-surface-tint); }
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-nomedia-lg { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(420px 220px at 50% 0%, rgba(18, 151, 254, 0.25) 0%, transparent 65%), var(--cj-navy-deep); color: var(--cj-primary); }
.product-nomedia-lg svg { width: 72px; height: 72px; }
.product-gallery-thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-2); overflow-x: auto; }
.product-gallery-thumbs button { border: 2px solid transparent; border-radius: var(--radius-md); padding: 0; background: none; cursor: pointer; flex-shrink: 0; }
.product-gallery-thumbs button.is-active { border-color: var(--cj-primary); }
.product-gallery-thumbs img { width: 76px; height: 57px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
@media (min-width: 1024px) {
  .product-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .shop-home .shop-track { grid-template-columns: repeat(3, 1fr); }
}
.checkout-grid { display: grid; gap: var(--cj-space-8); }
@media (min-width: 1024px) { .checkout-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.order-summary { position: sticky; top: calc(var(--cj-header-h) + var(--space-4)); }
.order-line { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-bottom: 1px dashed var(--cj-border); font-size: var(--text-sm); }
.order-total { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; padding-top: var(--space-3); }
.cart-row { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .cart-row { grid-template-columns: 72px 1fr auto; align-items: center; } }
.cart-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); background: var(--cj-surface-tint); }