.shop-hero { padding: var(--space-16) 0 var(--space-10); background: radial-gradient(circle at top left, var(--color-primary-soft), transparent 55%), radial-gradient(circle at bottom right, #e5edf3, transparent 55%); }
.shop-hero__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.shop-breadcrumb ol { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); list-style: none; padding: 0; }
.shop-breadcrumb a { color: var(--color-primary-dark); }
.shop-hero__content h1 { margin-bottom: var(--space-3); }
.shop-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.shop-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.shop-hero__image { min-height: 260px; box-shadow: var(--shadow-md); }

.shop-section { padding: var(--space-12) 0; }
.shop-section__header { margin-bottom: var(--space-6); }
.shop-section__header--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.shop-section__intro {  color: var(--color-text-muted); }
.shop-section__footer { margin-top: var(--space-6); text-align: center; }

.shop-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.shop-category__list { list-style: disc; padding-left: 1.25rem; color: var(--color-text-muted); font-size: var(--font-size-sm); }

.shop-controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); align-items: flex-end; }
.shop-controls__group label { display: block; margin-bottom: var(--space-1); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); }
.shop-controls__group--wide { grid-column: span 2; }

.shop-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
.shop-product__media { margin-bottom: var(--space-4); min-height: 180px; }
.shop-product__badge-group { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.shop-product__body { font-size: var(--font-size-sm); }
.shop-product__title { font-size: var(--font-size-lg); margin-bottom: var(--space-1); }
.shop-product__brand { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); margin-bottom: var(--space-2); }
.shop-product__description { color: var(--color-text-muted); margin-bottom: var(--space-3); }
.shop-product__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); font-size: var(--font-size-xs); color: var(--gray-600); }
.shop-product__meta dt { font-weight: 600; margin-bottom: var(--space-1); text-transform: uppercase; letter-spacing: 0.06em; }
.shop-product__footer { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; }

.shop-new { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.shop-new__media { min-height: 220px; margin-bottom: var(--space-4); }
.shop-new__badge { position: absolute; top: var(--space-3); left: var(--space-3); }
.shop-new__price { font-weight: 600; margin-top: var(--space-2); }
.shop-new__rating { margin-top: var(--space-1); font-size: var(--font-size-xs); color: var(--gray-600); }
.shop-new__footer { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; }

.shop-offer p { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.shop-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.shop-detail__list { list-style: disc; padding-left: 1.25rem; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.shop-detail__image { min-height: 260px; box-shadow: var(--shadow-md); }
.shop-detail__cta { margin-top: var(--space-4); }

.shop-wishlist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.shop-wishlist__list, .shop-cart__list { list-style: disc; padding-left: 1.25rem; color: var(--color-text-muted); font-size: var(--font-size-sm); }

.shop-personal-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-6); align-items: flex-start; }
.shop-personal__list { list-style: disc; padding-left: 1.25rem; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.shop-personal__footer { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; }

.shop-support-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-6); align-items: flex-start; }
.shop-support__list { list-style: disc; padding-left: 1.25rem; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.shop-support__footer { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-start; }

@media (max-width: 1024px) {
  .shop-hero { padding: var(--space-12) 0; }
  .shop-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .shop-hero__media { order: -1; }
  .shop-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-controls__group--wide { grid-column: span 3; }
  .shop-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-new { grid-template-columns: minmax(0, 1fr); }
  .shop-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-wishlist-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-personal-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-support-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .shop-hero { padding: var(--space-10) 0; }
  .shop-section { padding: var(--space-10) 0; }
  .shop-categories { grid-template-columns: minmax(0, 1fr); }
  .shop-controls { grid-template-columns: minmax(0, 1fr); }
  .shop-controls__group--wide { grid-column: span 1; }
  .shop-products { grid-template-columns: minmax(0, 1fr); }
  .shop-section__header--split { align-items: flex-start; }
}