/* "Fresh & Vibrant" storefront theme - loaded after store.css (see
   layout.html). Bold coral accent, large pill-like radius, thicker
   colorful card borders, heavier headings/prices. */
:root {
  --color-bg: #fff8ee;
  --color-surface: #ffffff;
  --color-border: #ffe0b8;
  --color-text: #2a2419;
  --color-muted: #8a7c5f;
  --color-dark: #2a2419;
  --color-dark-contrast: #ffffff;
  --color-accent: #ff5a4e;
  --color-accent-dark: #e6483d;
  --color-accent-contrast: #ffffff;
  --color-danger: #dc2626;
  --color-success: #16a34a;
  --radius: 20px;
}

/* .site-header falls back to --color-dark by default (store.css:
   background: var(--site-header-bg, var(--color-dark))) - overridden here
   so it reads as a bold coral band instead, without repointing
   --color-dark itself (which the hero gradient and footer also use, and
   which should stay a neutral dark, not coral). An explicit
   backoffice-set --site-header-bg still wins, since that's checked first. */
.site-header {
  background: var(--site-header-bg, var(--color-accent));
}

/* store.css hardcodes a 1px border width on these (only the color is
   var-driven) - vibrant wants a visibly thicker, colorful border. */
.product-card,
.card,
.checkout-step,
.cart-container,
.order-info-bar {
  border: 2px solid var(--color-border);
}

/* These selectors already declare their own font-weight in store.css
   (so a blanket body{font-weight} wouldn't reach them) - bumped up for a
   bolder, more energetic feel. */
h1, h2, h3,
.product-card-name,
.product-card-price,
.product-price,
button,
.btn {
  font-weight: 800;
}

.page-header {
  background: var(--page-header-bg, #fff2df);
}