/**
 * EpoxyRes-It — Global vibrant theme (site-wide)
 * Shared tokens + shell styling aligned with homepage refresh.
 */

:root {
  --v2-teal: #18b5a4;
  --v2-teal-deep: #0d8f82;
  --v2-teal-soft: #e4f8f5;
  --v2-violet: #8b6fd4;
  --v2-violet-deep: #6347b0;
  --v2-violet-soft: #f0ebfc;
  --v2-amber: #f0a830;
  --v2-amber-deep: #d48912;
  --v2-amber-soft: #fff6e6;
  --v2-emerald: #2ec98a;
  --v2-emerald-deep: #1a9f68;
  --v2-emerald-soft: #e8faf2;
  --v2-indigo: #5b7cfa;
  --v2-indigo-deep: #3d57d4;
  --v2-indigo-soft: #eef1ff;
  --v2-rose: #e85d9a;
  --v2-rose-soft: #fdeaf3;
  --home-primary: #589fdc;
  --home-primary-deep: #3a7db5;
  --home-secondary: #d6534e;
  --home-ink: #0f1c2e;
  --home-muted: #5f6d82;
  --home-cream: #f6f8fc;
  --home-line: rgba(15, 28, 46, 0.08);
  --home-radius: 1.125rem;
  --home-shadow: 0 20px 50px rgba(15, 28, 46, 0.1);
  --theme-gradient-cta: linear-gradient(
    135deg,
    var(--v2-violet) 0%,
    var(--home-primary) 50%,
    var(--v2-teal) 100%
  );
}

/* ── Global shell ───────────────────────────────────────────── */
body.site .site-announce {
  background: linear-gradient(
    105deg,
    #1a1035 0%,
    #2d3f8f 38%,
    var(--home-primary) 72%,
    var(--v2-teal) 100%
  );
}

body.site .site-header {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
}

body.site .site-nav__cta,
body.site .site-header__cta {
  background: var(--theme-gradient-cta);
  border: none;
}

body.site .site-nav__cta:hover,
body.site .site-header__cta:hover {
  filter: brightness(1.05);
}

body.site .site-footer--rich {
  background: linear-gradient(180deg, #eef2f8 0%, #e8edf6 100%);
}

body.site .btn--primary {
  background: var(--theme-gradient-cta);
  border: none;
  box-shadow: 0 10px 28px rgba(91, 124, 250, 0.28);
}

body.site .btn--primary:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 32px rgba(91, 124, 250, 0.34);
}

/* ── Collection pages ───────────────────────────────────────── */
body.page-collection {
  background: linear-gradient(
    180deg,
    var(--v2-violet-soft) 0%,
    var(--home-cream) 12rem
  );
}

body.page-collection .collection__title {
  background: linear-gradient(
    120deg,
    var(--v2-violet-deep),
    var(--home-primary-deep),
    var(--v2-teal-deep)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.page-collection .product-card {
  border: none;
  box-shadow: 0 8px 24px rgba(15, 28, 46, 0.07);
}

body.page-collection .product-card:hover {
  box-shadow: 0 16px 40px rgba(15, 28, 46, 0.12);
}

body.page-collection .collection__cat.is-active {
  background: var(--v2-violet-soft);
  border-color: rgba(139, 111, 212, 0.35);
  color: var(--v2-violet-deep);
}

/* ── Product page ───────────────────────────────────────────── */
body.page-product {
  background: linear-gradient(180deg, #fff 0%, var(--v2-indigo-soft) 100%);
}

body.page-product .product__gallery-main {
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(
        135deg,
        var(--v2-teal),
        var(--home-primary),
        var(--v2-violet),
        var(--v2-amber)
      )
      border-box;
  box-shadow: 0 20px 48px rgba(15, 28, 46, 0.1);
}

body.page-product .product__hero-panel {
  box-shadow: 0 12px 32px rgba(15, 28, 46, 0.06);
}

body.page-product .product__add-btn {
  box-shadow: 0 12px 32px rgba(91, 124, 250, 0.32);
}

/* ── Cart & checkout ──────────────────────────────────────────── */
body.page-cart,
body.page-checkout {
  background: linear-gradient(
    180deg,
    var(--v2-teal-soft) 0%,
    var(--home-cream) 14rem
  );
}

body.page-cart .cart-summary,
body.page-checkout .checkout-summary {
  border: 2px solid transparent;
  border-radius: var(--home-radius);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(
        135deg,
        var(--v2-teal),
        var(--home-primary),
        var(--v2-violet)
      )
      border-box;
  box-shadow: 0 16px 40px rgba(15, 28, 46, 0.08);
}

body.page-cart .cart-page__title,
body.page-checkout .checkout-page__title {
  background: linear-gradient(
    120deg,
    var(--v2-violet-deep),
    var(--home-primary-deep)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Blog ───────────────────────────────────────────────────── */
body.page-blog {
  background: linear-gradient(180deg, #fff 0%, var(--v2-violet-soft) 100%);
}

body.page-blog .blog-card {
  border-top: 4px solid var(--home-primary);
  box-shadow: 0 10px 28px rgba(15, 28, 46, 0.07);
}

body.page-blog .blog-card:nth-child(3n + 1) {
  border-top-color: var(--v2-teal);
}
body.page-blog .blog-card:nth-child(3n + 2) {
  border-top-color: var(--v2-violet);
}
body.page-blog .blog-card:nth-child(3n) {
  border-top-color: var(--v2-amber);
}

body.page-blog--article .blog-article__title {
  background: linear-gradient(120deg, var(--home-ink), var(--v2-violet-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Contact, FAQs, policies ─────────────────────────────────── */
body.page-contact,
body.page-faqs,
body.page-about,
body.page-unsubscribe,
body.page-policy {
  background: linear-gradient(
    180deg,
    var(--v2-amber-soft) 0%,
    #fff 40%,
    var(--home-cream) 100%
  );
}

body.page-contact .contact-page__title,
body.page-faqs .faqs-page__title,
body.page-about .about-page__title,
body.page-unsubscribe .unsubscribe-card__title,
body.page-policy .policy-page__title {
  background: linear-gradient(
    120deg,
    var(--v2-violet-deep),
    var(--home-primary-deep),
    var(--v2-teal-deep)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.page-contact .contact-form-card,
body.page-faqs .faqs-section,
body.page-faqs .faqs-sidebar__card,
body.page-about .about-story,
body.page-about .about-pillars,
body.page-about .about-collections,
body.page-about .about-sidebar__card,
body.page-unsubscribe .unsubscribe-card,
body.page-policy .policy-content {
  box-shadow: 0 12px 32px rgba(15, 28, 46, 0.06);
}

/* ── Reviews ────────────────────────────────────────────────── */
body.page-reviews {
  background: linear-gradient(
    180deg,
    var(--v2-indigo-soft) 0%,
    #fff 55%,
    var(--v2-rose-soft) 100%
  );
}

body.page-reviews .reviews-page__score-num {
  background: linear-gradient(135deg, var(--v2-violet), var(--home-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.page-reviews .review-card {
  border: 1px solid rgba(139, 111, 212, 0.12);
  box-shadow: 0 10px 28px rgba(15, 28, 46, 0.06);
}

/* ── Account & auth ─────────────────────────────────────────── */
body.page-account {
  background: linear-gradient(180deg, #fff 0%, var(--v2-teal-soft) 100%);
}

body.page-account .account-panel,
body.page-account .account-auth {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--home-primary), var(--v2-violet)) border-box;
  box-shadow: 0 16px 40px rgba(15, 28, 46, 0.08);
}

body.page-account .account-page__title {
  background: linear-gradient(
    120deg,
    var(--v2-violet-deep),
    var(--home-primary-deep)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.page-account .account-nav__link.is-active {
  color: var(--v2-violet-deep);
  background: var(--v2-violet-soft);
}

/* ── Calculator, track order, spin ──────────────────────────── */
body.page-calculator,
body.page-track-order {
  background: linear-gradient(
    180deg,
    var(--v2-indigo-soft) 0%,
    #fff 50%,
    var(--v2-teal-soft) 100%
  );
}

body.page-calculator .calculator-tool__card,
body.page-track-order .track-order-card {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(
        135deg,
        var(--v2-indigo),
        var(--home-primary),
        var(--v2-teal)
      )
      border-box;
  box-shadow: 0 16px 40px rgba(61, 87, 212, 0.12);
}

body.page-calculator .calculator-page__title,
body.page-track-order .track-order-page__title {
  background: linear-gradient(
    120deg,
    var(--v2-violet-deep),
    var(--home-primary-deep)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.page-spin {
  background: linear-gradient(165deg, #0f1c2e 0%, #243d66 55%, #1a3050 100%);
}

body.page-spin .spin-wheel__btn,
body.page-spin .spin-stage__btn--primary {
  background: var(--theme-gradient-cta);
}

body.page-spin .spin-stage__card,
body.page-spin .spin-sidebar__card {
  border: 1px solid rgba(139, 111, 212, 0.2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}