/*
 * Theme v2 (feature flag `theme_v2`). Loaded by Layout/HeaderView after every other stylesheet,
 * only when the flag is on. Every selector starts with `body.theme-v2`; never edit storefront.css
 * or home.css for this theme. Revert: flag false, or delete this file + the 3 HeaderView hooks.
 */
/* New tokens only. Shared ones (--brand-*, --text-dark) are overridden under .hv1 below, so pages
   outside the storefront scope (checkout, profile) keep their current colors. */
body.theme-v2 {
  --surface-alt: #f8fafc;
  --sale: #e11d48;
  --font-body: "Plus Jakarta Sans", sans-serif;
  --font-head: "Poppins", sans-serif;
}

/* ---- Task 2: one brand palette ---- */
body.theme-v2 .hv1 {
  --brand-primary: #db2777;
  --brand-primary-hover: #be185d;
  --brand-secondary: #fdf2f8;
  --text-dark: #1e293b;
}
body.theme-v2 .hv1 .v1-card .text-danger {
  color: var(--brand-primary-hover) !important;
}
body.theme-v2 .hv1 .v1-badge-sale {
  background-color: var(--sale);
}
body.theme-v2 .hv1 .v1-meter-fill {
  background: var(--brand-primary);
}
body.theme-v2 .hv1 #v1-flash-sale h3.text-danger,
body.theme-v2 .hv1 .bi-fire.text-danger,
body.theme-v2 .hv1 .bi-stars.text-warning {
  color: var(--brand-primary) !important;
}
body.theme-v2 .hv1 #countdownTimer.bg-danger {
  background-color: var(--brand-primary) !important;
}

/* ---- Task 3: lighter cards (the card buttons keep their old solid look, storefront.css .v1-card-actions) ---- */
body.theme-v2 .hv1 #v1-best-seller .v1-badge-best,
body.theme-v2 .hv1 #v1-new-arrival .v1-badge-new {
  display: none;
}
body.theme-v2 .hv1 .v1-card {
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
body.theme-v2 .hv1 .v1-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  border-color: transparent;
}
body.theme-v2 .hv1 .v1-meter {
  height: 4px;
}

/* ---- Task 4: section rhythm (utilities use !important, so must we) ---- */
body.theme-v2 .hv1 #v1-flash-sale,
body.theme-v2 .hv1 #v1-new-arrival,
body.theme-v2 .hv1 #v1-best-seller,
body.theme-v2 .hv1 #v1-categories,
body.theme-v2 .hv1 #v1-all-products {
  margin-bottom: 3rem !important;
}
body.theme-v2 .hv1 #v1-flash-sale,
body.theme-v2 .hv1 #v1-best-seller {
  border-radius: 24px;
  padding: 1.25rem 1rem 0.5rem !important;
}
body.theme-v2 .hv1 #v1-flash-sale {
  background: var(--brand-secondary);
}
body.theme-v2 .hv1 #v1-best-seller {
  background: var(--surface-alt);
}
@media (max-width: 575.98px) {
  /* keep a 12px gutter around the tinted panels */
  body.theme-v2 .hv1 #v1-flash-sale,
  body.theme-v2 .hv1 #v1-best-seller {
    width: auto;
    margin-inline: 0.75rem !important;
    margin-bottom: 3rem !important;
  }
}
@media (min-width: 768px) {
  body.theme-v2 .hv1 #v1-flash-sale,
  body.theme-v2 .hv1 #v1-best-seller {
    padding: 2rem 1.5rem 1rem !important;
  }
}
@media (min-width: 992px) {
  body.theme-v2 .hv1 #v1-flash-sale,
  body.theme-v2 .hv1 #v1-new-arrival,
  body.theme-v2 .hv1 #v1-best-seller,
  body.theme-v2 .hv1 #v1-categories,
  body.theme-v2 .hv1 #v1-all-products {
    margin-bottom: 4rem !important;
  }
}

/* ---- Task 5: typography + subtitles ---- */
body.theme-v2 .hv1 {
  font-family: var(--font-body);
}
body.theme-v2 .hv1 :is(h1, h2, h3, h4) {
  font-family: var(--font-head);
}
body.theme-v2 .hv1 :is(#v1-flash-sale, #v1-new-arrival, #v1-best-seller, #v1-categories, #v1-all-products) h3 {
  font-size: 1.5rem;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem !important;
}
body.theme-v2 .hv1 .v1-section-sub {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
body.theme-v2 .hv1 #v1-flash-sale .v1-section-sub {
  margin-bottom: 0;
}

/* ---- Task 6: consistency + header icons ---- */
body.theme-v2 .hv1 #v1-categories h3,
body.theme-v2 .hv1 #v1-categories .v1-section-sub {
  text-align: left !important;
}
body.theme-v2 .hv1 .v1-tile {
  border-radius: 12px;
}
body.theme-v2 .hv1 .v1-icon-link .bi {
  font-size: 1.375rem !important;
}
body.theme-v2 .hv1 .v1-icon-label {
  font-size: 0.75rem;
  font-weight: 500;
}

/* ---- Checkout opt-out: Checkout/CheckoutView and GuestCheckoutView render inside .hv1 > .co-page.
   Restore the storefront.css tokens and font there so checkout looks exactly as before. ---- */
body.theme-v2 .hv1:has(> .co-page) {
  --brand-primary: #f472b6;
  --brand-primary-hover: #db2777;
  --brand-secondary: #fdf2f8;
  --text-dark: #334155;
  font-family: "Poppins", sans-serif;
}