/* Store design presets: layout systems layered over color themes. */

body[class*="design-"] {
  --store-shell-max-width: 1280px;
  --store-section-gap: var(--space-10);
  --store-header-radius: 8px;
  --store-header-padding-y: var(--space-14);
  --store-header-padding-x: var(--space-8);
  --store-card-radius: 8px;
  --store-card-padding: var(--space-8);
  --store-card-shadow: var(--shadow);
  --store-card-hover-shadow: var(--shadow-lg);
  --store-card-border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
  --store-grid-min: 300px;
  --store-grid-gap: var(--space-8);
  --store-image-height: 260px;
  --store-image-ratio: 1 / 0.86;
  --store-category-radius: var(--radius-full);
  --store-category-padding-x: var(--space-5);
  --store-search-max-width: 500px;
}

body[class*="design-"] .store-container {
  max-width: var(--store-shell-max-width);
  gap: var(--store-section-gap);
}

body[class*="design-"] .store-header {
  border-radius: var(--store-header-radius);
  padding: var(--store-header-padding-y) var(--store-header-padding-x);
}

body[class*="design-"] .store-name,
body[class*="design-"] .product-price,
body[class*="design-"] .product-category,
body[class*="design-"] .product-badge {
  letter-spacing: 0;
}

body[class*="design-"] .products-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--store-grid-min), 1fr));
  gap: var(--store-grid-gap);
}

body[class*="design-"] .product-card {
  border: var(--store-card-border);
  border-radius: var(--store-card-radius);
  box-shadow: var(--store-card-shadow);
}

body[class*="design-"] .product-card::before {
  border-radius: var(--store-card-radius);
}

body[class*="design-"] .product-image {
  aspect-ratio: var(--store-image-ratio);
  height: auto;
  min-height: 180px;
}

body[class*="design-"] .product-info {
  padding: var(--store-card-padding);
}

body[class*="design-"] .product-category,
body[class*="design-"] .see-all-link,
body[class*="design-"] .store-footer a {
  color: var(--primary-text-on-light, var(--primary-color));
}

body[class*="design-"] .product-price,
body[class*="design-"] .cart-item-price,
body[class*="design-"] .total-amount,
body[class*="design-"] .order-total-amount,
body[class*="design-"] .order-item-price,
body[class*="design-"] .order-preview-item .item-price,
body[class*="design-"] .cart-bar-total,
body[class*="design-"] .sheet-price,
body[class*="design-"] .confirm-total,
body[class*="design-"] .quick-view-details .product-price {
  font-variant-numeric: tabular-nums;
}

body[class*="design-"] .category-btn {
  border-radius: var(--store-category-radius);
  padding-left: var(--store-category-padding-x);
  padding-right: var(--store-category-padding-x);
}

body[class*="design-"] .store-search-box {
  max-width: var(--store-search-max-width);
}

@media (hover: hover) {
  body[class*="design-"] .product-card:hover {
    box-shadow: var(--store-card-hover-shadow);
  }
}

/* Refined default for general stores. */
body.design-essentials {
  --store-card-shadow: var(--shadow-sm);
  --store-card-hover-shadow: var(--shadow-lg);
  --store-grid-min: 280px;
}

body.design-essentials .store-header {
  border: 1px solid color-mix(in srgb, var(--primary-light) 42%, transparent);
}

/* Editorial, image-led fashion and beauty. */
body.design-boutique {
  --store-shell-max-width: 1180px;
  --store-section-gap: var(--space-12);
  --store-header-padding-y: var(--space-16);
  --store-grid-min: 260px;
  --store-grid-gap: var(--space-7);
  --store-image-ratio: 4 / 5;
  --store-card-padding: var(--space-7);
  --store-card-shadow: 0 14px 42px rgba(15, 23, 42, 0.08);
  --store-category-radius: 8px;
}

body.design-boutique .store-header::before,
body.design-boutique .store-header::after,
body.design-premium .store-header::before,
body.design-premium .store-header::after,
body.design-tech .store-header::before,
body.design-tech .store-header::after {
  display: none;
}

body.design-boutique .product-name {
  font-size: var(--text-lg);
}

body.design-boutique .product-description {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Dense scanning for larger catalogs. */
body.design-catalog {
  --store-shell-max-width: 1440px;
  --store-section-gap: var(--space-7);
  --store-header-padding-y: var(--space-10);
  --store-grid-min: 220px;
  --store-grid-gap: var(--space-5);
  --store-card-padding: var(--space-5);
  --store-image-ratio: 1 / 0.74;
  --store-category-padding-x: var(--space-4);
  --store-search-max-width: 680px;
}

body.design-catalog .product-name {
  font-size: var(--text-base);
}

body.design-catalog .product-description {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body.design-catalog .product-actions {
  gap: var(--space-2);
}

/* Food-first mobile menus. */
body.design-fresh {
  --store-section-gap: var(--space-8);
  --store-header-padding-y: var(--space-12);
  --store-grid-min: 250px;
  --store-grid-gap: var(--space-5);
  --store-image-ratio: 4 / 3;
  --store-card-padding: var(--space-5);
  --store-card-shadow: 0 10px 34px rgba(15, 23, 42, 0.08);
}

body.design-fresh .categories-nav {
  top: 8px;
  border: 1px solid color-mix(in srgb, var(--border-color) 74%, transparent);
  border-radius: 8px;
  margin-left: 0;
  margin-right: 0;
}

body.design-fresh .product-card {
  flex-direction: row;
  min-height: 180px;
}

body.design-fresh .product-image {
  width: min(42%, 220px);
  min-height: 180px;
  flex: 0 0 min(42%, 220px);
}

body.design-fresh .product-info {
  min-width: 0;
}

/* Quiet luxury with more whitespace and fewer effects. */
body.design-premium {
  --store-shell-max-width: 1120px;
  --store-section-gap: var(--space-14);
  --store-header-padding-y: var(--space-16);
  --store-grid-min: 310px;
  --store-grid-gap: var(--space-10);
  --store-image-ratio: 1 / 1;
  --store-card-shadow: none;
  --store-card-hover-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
  --store-card-border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
  --store-category-radius: 8px;
}

body.design-premium .store-header {
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-muted) 100%);
  color: var(--text-color);
  box-shadow: none;
}

body.design-premium .store-description,
body.design-premium .store-address {
  color: var(--text-light);
}

/* Bright badges and friendly gift/creator rhythm. */
body.design-playful {
  --store-section-gap: var(--space-9);
  --store-grid-min: 250px;
  --store-grid-gap: var(--space-6);
  --store-card-padding: var(--space-6);
  --store-image-ratio: 1 / 0.9;
}

body.design-playful .store-header {
  border: 2px solid color-mix(in srgb, var(--primary-light) 62%, white);
}

body.design-playful .product-badge,
body.design-playful .category-btn .category-count {
  border-radius: 8px;
}

body.design-playful .product-card:nth-child(3n + 1) {
  transform: rotate(-0.35deg);
}

body.design-playful .product-card:nth-child(3n + 2) {
  transform: rotate(0.35deg);
}

@media (hover: hover) {
  body.design-playful .product-card:hover {
    transform: translateY(-3px) rotate(0deg);
  }
}

/* Crisp spec-friendly product display. */
body.design-tech {
  --store-shell-max-width: 1360px;
  --store-header-padding-y: var(--space-12);
  --store-grid-min: 260px;
  --store-grid-gap: var(--space-6);
  --store-card-padding: var(--space-6);
  --store-card-shadow: none;
  --store-card-hover-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  --store-card-border: 1px solid color-mix(in srgb, var(--primary-color) 24%, var(--border-color));
  --store-image-ratio: 16 / 10;
  --store-category-radius: 8px;
}

body.design-tech .store-header {
  background: linear-gradient(135deg, #0f172a 0%, color-mix(in srgb, var(--primary-dark) 42%, #111827) 100%);
  color: white;
}

body.design-tech .product-card::before {
  opacity: 1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 24%, transparent), transparent);
}

body.design-tech .product-category::before {
  border-radius: 2px;
}

/* Calm wellness and trust-led stores. */
body.design-wellness {
  --store-shell-max-width: 1200px;
  --store-section-gap: var(--space-11);
  --store-header-padding-y: var(--space-14);
  --store-grid-min: 270px;
  --store-grid-gap: var(--space-7);
  --store-image-ratio: 4 / 3;
  --store-card-padding: var(--space-7);
  --store-card-shadow: 0 12px 36px rgba(15, 23, 42, 0.07);
}

body.design-wellness .store-header {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 88%, #ffffff) 0%, color-mix(in srgb, var(--primary-light) 68%, #ffffff) 100%);
}

body.design-wellness .product-card {
  background: linear-gradient(180deg, var(--bg-surface) 0%, color-mix(in srgb, var(--bg-surface) 92%, var(--primary-color-light)) 100%);
}

body.design-wellness .product-category::before {
  width: 10px;
  height: 10px;
  opacity: 0.42;
}

@media (max-width: 640px) {
  body[class*="design-"] {
    --store-section-gap: var(--space-6);
    --store-header-padding-y: var(--space-10);
    --store-header-padding-x: var(--space-5);
    --store-grid-gap: var(--space-4);
    --store-card-padding: var(--space-4);
  }

  body.design-fresh .product-card {
    flex-direction: row;
  }

  body.design-fresh .product-image {
    width: 38%;
    flex-basis: 38%;
    min-height: 150px;
  }

  body.design-boutique .product-image,
  body.design-premium .product-image {
    min-height: 220px;
  }
}

@media (max-width: 480px) {
  body.design-fresh .product-card {
    min-height: 150px;
  }

  body.design-fresh .product-image {
    min-height: 140px;
  }

  body.design-fresh .product-description {
    display: none;
  }

  body.design-catalog .product-description {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.design-playful .product-card:nth-child(3n + 1),
  body.design-playful .product-card:nth-child(3n + 2) {
    transform: none;
  }
}

@media (forced-colors: active) {
  body[class*="design-"] .store-header,
  body[class*="design-"] .product-card,
  body[class*="design-"] .category-btn,
  body[class*="design-"] .store-search-box input {
    border: 1px solid CanvasText;
  }
}