/*
 * Minimal storefront template.
 *
 * This file intentionally keeps the current storefront look as the default
 * while giving future templates a stable place to override layout choices.
 */

body[data-store-template="minimal"] {
  --template-product-grid-min: 250px;
  --template-section-spacing: 48px;
  --template-card-radius: 16px;
  background: var(--color-background, #fff);
  color: var(--color-body, #1d1d1f);
  font-family: var(--font-body, inherit);
}

body[data-store-template="minimal"] h1,
body[data-store-template="minimal"] h2,
body[data-store-template="minimal"] h3 {
  color: var(--color-heading, #111111);
  font-family: var(--font-heading, inherit);
}

body[data-store-template="minimal"] button,
body[data-store-template="minimal"] .primary-btn,
body[data-store-template="minimal"] .add-to-cart-btn {
  border-radius: var(--button-radius, 8px);
}

body[data-store-template="minimal"] .add-to-cart-btn,
body[data-store-template="minimal"] .cart-checkout-btn,
body[data-store-template="minimal"] .hero-primary-action,
body[data-store-template="minimal"] .load-more-btn {
  background: var(--primary-button-bg, var(--color-button, #111111));
  border-color: var(--primary-button-border, var(--primary-button-bg, var(--color-button, #111111)));
  border-radius: var(--primary-button-radius, var(--button-radius, 8px));
  color: var(--primary-button-text, var(--color-button-text, #ffffff));
}

body[data-store-template="minimal"] .hero-primary-action {
  border: 1px solid var(--primary-button-border, var(--primary-button-bg, var(--color-button, #111111)));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  min-height: 44px;
  padding: 0 22px;
  text-decoration: none;
  font-weight: 700;
}

body[data-store-template="minimal"] .hero {
  isolation: isolate;
}

body[data-store-template="minimal"] .products-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--template-product-grid-min), 1fr));
}

body[data-store-template="minimal"] .product-card {
  border-radius: var(--card-radius, var(--template-card-radius));
}

body[data-store-template="minimal"] .trust-bar {
  margin-top: var(--template-section-spacing);
}

@media (max-width: 768px) {
  body[data-store-template="minimal"] {
    --template-product-grid-min: 160px;
    --template-section-spacing: 28px;
  }
}