:root {
  --theme-color-brand-primary: #007bff;
  --theme-color-brand-secondary: #6610f2;
  --theme-color-brand-accent: #00d4ff;
  --theme-color-semantic-success: #28a745;
  --theme-color-semantic-danger: #dc3545;
  --theme-color-semantic-warning: #00d4ff;
  --theme-color-semantic-info: #17a2b8;
  --theme-color-surface-body: #ffffff;
  --theme-color-surface-section: #eef6ff;
  --theme-color-surface-card: #ffffff;
  --theme-color-surface-muted: #e6f0ff;
  --theme-color-surface-inverse: #102a43;
  --theme-color-text-primary: #102a43;
  --theme-color-text-secondary: #52606d;
  --theme-color-text-muted: #7b8794;
  --theme-color-text-inverse: #ffffff;
  --theme-color-border-default: color-mix(in srgb, #007bff 22%, #d9e2ec);
  --theme-color-border-strong: color-mix(in srgb, #007bff 38%, #9fb3c8);
  --theme-typography-family-heading: Poppins;
  --theme-typography-family-body: Inter;
  --theme-typography-size-base: 16px;
  --theme-typography-size-h1: clamp(2rem, 4vw, 4rem);
  --theme-typography-size-h2: clamp(1.6rem, 2.6vw, 2.5rem);
  --theme-typography-size-h3: 1.35rem;
  --theme-typography-size-small: 0.875rem;
  --theme-typography-weight-body: 400;
  --theme-typography-weight-heading: 700;
  --theme-typography-weight-button: 700;
  --theme-typography-line-height-body: 1.6;
  --theme-typography-line-height-heading: 1.15;
  --theme-spacing-section-y: 4.25rem;
  --theme-spacing-container-max: 1180px;
  --theme-spacing-card-padding: 1rem;
  --theme-spacing-gutter: 1.5rem;
  --theme-radius-button: 12px;
  --theme-radius-card: 12px;
  --theme-radius-image: 12px;
  --theme-radius-input: 10px;
  --theme-shadow-card: 0 14px 34px rgba(0, 123, 255, 0.13);
  --theme-shadow-card-hover: 0 22px 48px rgba(102, 16, 242, 0.18);
  --theme-shadow-navbar: 0 10px 28px rgba(16, 42, 67, 0.14);
  --theme-motion-duration: 220ms;
  --theme-motion-easing: cubic-bezier(.2,.8,.2,1);
  --theme-motion-hover-lift: -4px;
  --theme-breakpoints-mobile: 576px;
  --theme-breakpoints-tablet: 768px;
  --theme-breakpoints-desktop: 992px;
  --theme-breakpoints-wide: 1200px;
  --theme-component-navbar-height: 74px;
  --theme-component-banners-height-desktop: 620px;
  --theme-component-banners-height-mobile: 430px;
  --theme-component-banners-overlay-opacity: 0.56;
  --theme-component-banners-text-width: 640px;
  --theme-section-hero-enabled: 1;
  --theme-section-features-enabled: 1;
}

body.theme-loja {
  background: var(--theme-color-surface-body);
  color: var(--theme-color-text-primary);
  font-family: var(--theme-typography-family-body), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--theme-typography-size-base);
  line-height: var(--theme-typography-line-height-body);
}

body.theme-loja h1,
body.theme-loja h2,
body.theme-loja h3,
body.theme-loja h4,
body.theme-loja h5,
body.theme-loja h6 {
  font-family: var(--theme-typography-family-heading), var(--theme-typography-family-body), sans-serif;
  line-height: var(--theme-typography-line-height-heading);
  font-weight: var(--theme-typography-weight-heading);
  color: var(--theme-color-text-primary);
}

body.theme-loja .navbar-custom {
  min-height: var(--theme-component-navbar-height);
  box-shadow: var(--theme-shadow-navbar);
}

body.theme-loja .navbar-custom {
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--theme-color-text-inverse) 16%, transparent);
}

body.theme-loja .navbar-custom .navbar-brand,
body.theme-loja .navbar-custom .nav-link {
  color: var(--theme-navbar-link-color, var(--theme-color-text-inverse)) !important;
}

body.theme-loja .navbar-custom .navbar-brand {
  align-items: center;
  display: inline-flex;
  font-weight: 800;
  letter-spacing: 0;
}

body.theme-loja .navbar-custom .nav-link {
  align-items: center;
  border-radius: var(--theme-radius-button);
  display: inline-flex;
  font-weight: 700;
  gap: .35rem;
  min-height: 40px;
  padding: .5rem .85rem;
  transition: background var(--theme-motion-duration) var(--theme-motion-easing), color var(--theme-motion-duration) var(--theme-motion-easing), transform var(--theme-motion-duration) var(--theme-motion-easing);
}

body.theme-loja .navbar-custom .nav-link:hover,
body.theme-loja .navbar-custom .nav-link:focus {
  background: var(--theme-navbar-link-hover-bg, rgba(255, 255, 255, .14));
  color: var(--theme-navbar-link-hover-color, var(--theme-navbar-link-color, var(--theme-color-text-inverse))) !important;
  transform: translateY(-1px);
}

body.theme-loja .navbar-custom .dropdown-menu {
  border: 1px solid color-mix(in srgb, var(--theme-color-border-default) 70%, transparent);
  border-radius: var(--theme-radius-card);
  box-shadow: var(--theme-shadow-card-hover);
  overflow: hidden;
}
body.theme-loja .navbar-custom {
  --theme-navbar-link-color: var(--theme-color-text-inverse);
  --theme-navbar-link-hover-bg: rgba(255, 255, 255, .14);
  background: linear-gradient(110deg, color-mix(in srgb, var(--theme-color-brand-secondary) 78%, #111827), color-mix(in srgb, var(--theme-color-brand-primary) 78%, #111827)) !important;
}

body.theme-loja .btn-primary,
body.theme-loja .btn-primary-custom {
  border-radius: var(--theme-radius-button);
  font-weight: var(--theme-typography-weight-button);
}

body.theme-loja .btn,
body.theme-loja .btn-primary,
body.theme-loja .btn-primary-custom,
body.theme-loja .btn-outline-primary {
  border-radius: var(--theme-radius-button);
}

body.theme-loja .btn-primary,
body.theme-loja .btn-primary-custom {
  box-shadow: 0 10px 26px color-mix(in srgb, var(--theme-color-brand-primary) 24%, transparent);
}

body.theme-loja .product-card,
body.theme-loja .product-card-modern,
body.theme-loja .feature-item,
body.theme-loja .category-card {
  border-radius: var(--theme-radius-card);
  transition: transform var(--theme-motion-duration) var(--theme-motion-easing), box-shadow var(--theme-motion-duration) var(--theme-motion-easing);
}

body.theme-loja .product-card-modern {
  background: var(--theme-color-surface-card);
  box-shadow: var(--theme-shadow-card);
}

body.theme-loja .product-card-modern:hover {
  transform: translateY(var(--theme-motion-hover-lift));
  box-shadow: var(--theme-shadow-card-hover);
}

body.theme-loja .theme-section-muted {
  background: var(--theme-color-surface-section) !important;
}

body.theme-loja .discount-badge {
  background: linear-gradient(135deg, var(--theme-color-brand-accent), var(--theme-color-semantic-warning));
  color: var(--theme-color-text-inverse);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

body.theme-loja .hero-section {
  background: var(--theme-color-surface-body);
}

body.theme-loja .hero-section h1,
body.theme-loja .hero-section h2,
body.theme-loja .hero-section h3,
body.theme-loja .hero-section p,
body.theme-loja .welcome-hero-title,
body.theme-loja .welcome-hero-subtitle {
  color: var(--theme-color-text-inverse) !important;
}

body.theme-loja .welcome-hero {
  align-items: center;
  background-color: color-mix(in srgb, var(--theme-color-brand-secondary) 84%, #111827);
  background-image:
    linear-gradient(90deg, rgba(15, 23, 42, .72), rgba(15, 23, 42, .28)),
    var(--theme-hero-image, linear-gradient(110deg, color-mix(in srgb, var(--theme-color-brand-secondary) 84%, #111827), color-mix(in srgb, var(--theme-color-brand-primary) 78%, #111827)));
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  min-height: clamp(400px, 54vh, 520px);
  overflow: hidden;
  padding: clamp(4rem, 6vw, 5.75rem) 1rem clamp(3rem, 5vw, 4.75rem);
  position: relative;
}

body.theme-loja .welcome-hero::before {
  background:
    radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--theme-color-brand-accent) 22%, transparent), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .12), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 45%);
  content: '';
  inset: 0;
  position: absolute;
}

body.theme-loja .welcome-hero::after {
  background: linear-gradient(to bottom, transparent, var(--theme-color-surface-body));
  bottom: -1px;
  content: '';
  height: 84px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}

body.theme-loja .welcome-hero-content {
  max-width: min(820px, 92vw);
  position: relative;
  z-index: 2;
}

body.theme-loja .welcome-hero-title {
  font-size: clamp(2.35rem, 5.2vw, 4.6rem);
  letter-spacing: 0;
  line-height: 1.04;
  margin-bottom: 1.1rem;
  text-wrap: balance;
  text-shadow: 0 12px 36px rgba(0, 0, 0, .24);
}

body.theme-loja .welcome-hero-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1.45;
  margin: 0 auto 1.8rem;
  max-width: 680px;
  opacity: .9;
  text-shadow: 0 8px 28px rgba(0, 0, 0, .20);
}

body.theme-loja .welcome-hero-action {
  align-items: center;
  background: var(--theme-color-surface-card) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: var(--theme-radius-button);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .20);
  color: var(--theme-color-text-primary) !important;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-width: 210px;
}

body.theme-loja .welcome-hero-action:hover {
  background: var(--theme-color-brand-accent) !important;
  border-color: var(--theme-color-brand-accent) !important;
  color: var(--theme-color-surface-inverse) !important;
  transform: translateY(-2px);
}

body.theme-loja .theme-hero-frame::after {
  content: none;
}

body.theme-loja .theme-section {
  padding-top: var(--theme-spacing-section-y) !important;
  padding-bottom: var(--theme-spacing-section-y) !important;
}

body.theme-loja .theme-section-hero {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.theme-loja .theme-section > .container > h2,
body.theme-loja .theme-section > .container > .d-flex h2 {
  color: var(--theme-color-text-primary);
  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
  letter-spacing: 0;
  line-height: 1.12;
  margin-bottom: clamp(1.8rem, 3vw, 2.75rem) !important;
  position: relative;
}

body.theme-loja .theme-section > .container > h2::after,
body.theme-loja .theme-section > .container > .d-flex h2::after {
  background: linear-gradient(90deg, var(--theme-color-brand-primary), var(--theme-color-brand-accent));
  border-radius: 999px;
  content: '';
  display: block;
  height: 3px;
  margin-top: .85rem;
  width: 68px;
}

body.theme-loja .theme-section > .container > h2.text-center::after {
  margin-left: auto;
  margin-right: auto;
}

body.theme-loja .theme-section-categories,
body.theme-loja .theme-section-new-products {
  background: var(--theme-color-surface-body) !important;
}

body.theme-loja .theme-section-products,
body.theme-loja .theme-section-features {
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme-color-surface-section) 78%, #ffffff), color-mix(in srgb, var(--theme-color-brand-primary) 4%, var(--theme-color-surface-section))) !important;
}

body.theme-loja .product-link {
  color: inherit !important;
  display: block;
  height: 100%;
  text-decoration: none !important;
}

body.theme-loja .product-link:hover,
body.theme-loja .product-link:focus {
  color: inherit !important;
  text-decoration: none !important;
}

body.theme-loja .product-card-modern {
  background: var(--theme-color-surface-card);
  border: 1px solid color-mix(in srgb, var(--theme-color-border-default) 80%, transparent);
  border-radius: var(--theme-radius-card);
  box-shadow: var(--theme-shadow-card);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

body.theme-loja .product-card-modern,
body.theme-loja .feature-item {
  box-shadow: var(--theme-shadow-card);
}

body.theme-loja .product-image-container {
  aspect-ratio: var(--theme-component-cards-image-ratio, 1 / 1);
  background: var(--theme-color-surface-muted);
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

body.theme-loja .product-image {
  display: block;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
  transition: transform 420ms var(--theme-motion-easing);
}

body.theme-loja .product-image-placeholder {
  align-items: center;
  background: color-mix(in srgb, var(--theme-color-brand-primary) 7%, var(--theme-color-surface-muted));
  color: var(--theme-color-text-muted);
  display: flex;
  font-size: 2.25rem;
  height: 100%;
  justify-content: center;
  width: 100%;
}

body.theme-loja .product-card-modern:hover .product-image {
  transform: scale(1.06);
}

body.theme-loja .discount-badge {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: .72rem;
  font-weight: 800;
  gap: .25rem;
  left: .75rem;
  letter-spacing: .02em;
  line-height: 1;
  padding: .45rem .65rem;
  position: absolute;
  top: .75rem;
  z-index: 4;
}

body.theme-loja .product-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .6rem;
  min-width: 0;
  padding: clamp(.9rem, 1.4vw, 1.25rem);
}

body.theme-loja .product-name {
  color: var(--theme-color-text-primary);
  display: -webkit-box;
  font-size: clamp(.92rem, 1vw, 1rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  min-height: 2.6em;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.theme-loja .product-pricing {
  margin-top: auto;
}

body.theme-loja .price-original {
  color: var(--theme-color-text-muted);
  font-size: .85rem;
  line-height: 1.2;
  margin-bottom: .2rem;
  text-decoration: line-through;
}

body.theme-loja .price-current {
  align-items: baseline;
  color: var(--theme-color-text-primary);
  display: flex;
  flex-wrap: wrap;
  font-size: 1rem;
  font-weight: 800;
  gap: .15rem;
  line-height: 1.1;
}

body.theme-loja .price-currency,
body.theme-loja .price-integer {
  color: var(--theme-color-text-primary);
  font-size: clamp(1.3rem, 1.7vw, 1.65rem);
  font-weight: 800;
}

body.theme-loja .price-cents {
  color: var(--theme-color-text-primary);
  font-size: .78rem;
  font-weight: 800;
  margin-left: -.1rem;
}

body.theme-loja .price-pix {
  color: var(--theme-color-text-secondary);
  font-size: .82rem;
  font-weight: 500;
  margin-left: .2rem;
}

body.theme-loja .price-installment {
  color: var(--theme-color-text-secondary);
  display: inline-flex;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.25;
}

body.theme-loja .price-meta-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  margin-top: .35rem;
}

body.theme-loja .product-card-off-badge {
  background: #dcfce7;
  border-radius: .35rem;
  color: #15803d;
  display: inline-flex;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  padding: .38rem .5rem;
  text-transform: uppercase;
}

body.theme-loja .product-rating {
  align-items: center;
  color: var(--theme-color-text-primary);
  display: flex;
  font-size: .88rem;
  gap: .18rem;
  margin-top: .15rem;
}

body.theme-loja .product-rating .rating-score {
  color: var(--theme-color-text-primary);
  font-weight: 700;
}

body.theme-loja .product-rating .rating-stars {
  color: #facc15;
  display: inline-flex;
  gap: .05rem;
  line-height: 1;
}

body.theme-loja .rating-count {
  color: var(--theme-color-text-muted);
  font-size: .78rem;
  margin-left: .18rem;
}

body.theme-loja .product-stock-out {
  align-items: center;
  color: var(--theme-color-semantic-danger);
  display: flex;
  font-size: .82rem;
  font-weight: 700;
  gap: .35rem;
}

@media (max-width: 575.98px) {
  body.theme-loja .product-info {
    padding: .8rem;
  }

  body.theme-loja .discount-badge {
    font-size: .66rem;
    left: .5rem;
    padding: .38rem .55rem;
    top: .5rem;
  }
}

body.theme-loja .btn-outline-primary {
  color: var(--theme-color-brand-primary);
  border-color: var(--theme-color-brand-primary);
  border-radius: var(--theme-radius-button);
}

body.theme-loja .btn-outline-primary:hover,
body.theme-loja .btn-primary-custom:hover,
body.theme-loja .btn-primary:hover {
  color: var(--theme-color-text-inverse);
  background: var(--theme-color-brand-secondary);
  border-color: var(--theme-color-brand-secondary);
}

body.theme-loja .product-detail-page .breadcrumb {
  color: var(--theme-color-text-muted);
  font-size: .92rem;
}

body.theme-loja .product-detail-page .breadcrumb a {
  color: var(--theme-color-brand-primary);
  font-weight: 600;
  text-decoration: none;
}

body.theme-loja .product-detail-heading {
  gap: 1rem;
}

body.theme-loja .product-detail-title {
  color: var(--theme-color-text-primary);
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.08;
  max-width: 760px;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

body.theme-loja .product-detail-page .lead {
  color: var(--theme-color-text-secondary) !important;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.5;
}

body.theme-loja #productPrice {
  color: var(--theme-color-semantic-success) !important;
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: 0;
  line-height: 1.05;
}

body.theme-loja .variants-section .form-label {
  color: var(--theme-color-text-primary);
}

body.theme-loja .variant-option {
  background: var(--theme-color-surface-card);
  border: 1px solid color-mix(in srgb, var(--theme-color-border-default) 82%, transparent) !important;
  border-radius: var(--theme-radius-button);
  color: var(--theme-color-text-secondary);
  font-weight: 600;
  min-height: 40px;
}

body.theme-loja .variant-option:hover {
  border-color: var(--theme-color-brand-primary) !important;
  color: var(--theme-color-brand-primary);
  transform: translateY(-1px);
}

body.theme-loja .variant-option.active {
  background: color-mix(in srgb, var(--theme-color-brand-primary) 12%, var(--theme-color-surface-card)) !important;
  border-color: var(--theme-color-brand-primary) !important;
  color: var(--theme-color-brand-primary) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-color-brand-primary) 16%, transparent);
}

body.theme-loja .product-detail-page .card.bg-light {
  background: color-mix(in srgb, var(--theme-color-surface-section) 68%, #ffffff) !important;
  border: 1px solid color-mix(in srgb, var(--theme-color-border-default) 70%, transparent) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .04);
}

body.theme-loja .product-detail-page #productCarousel .carousel-inner {
  background: var(--theme-color-surface-card);
  border: 1px solid color-mix(in srgb, var(--theme-color-border-default) 70%, transparent);
  box-shadow: var(--theme-shadow-card);
}

@media (max-width: 991.98px) {
  body.theme-loja .product-detail-heading {
    align-items: flex-start !important;
    flex-direction: column;
  }

  body.theme-loja .product-detail-title {
    font-size: clamp(1.8rem, 8vw, 2.55rem);
  }
}

body.theme-loja .category-card img,
body.theme-loja .category-card .rounded-circle {
  border: 4px solid var(--theme-color-surface-card);
  box-shadow: var(--theme-shadow-card);
}

body.theme-loja .feature-item {
  background: var(--theme-color-surface-card);
  border: 1px solid color-mix(in srgb, var(--theme-color-border-default) 70%, transparent);
  border-radius: var(--theme-radius-card);
  box-shadow: var(--theme-shadow-card);
}

body.theme-loja .footer {
  background: var(--theme-color-surface-inverse) !important;
  color: var(--theme-color-text-inverse) !important;
}

body.theme-loja .footer h1,
body.theme-loja .footer h2,
body.theme-loja .footer h3,
body.theme-loja .footer h4,
body.theme-loja .footer h5,
body.theme-loja .footer h6,
body.theme-loja .footer p,
body.theme-loja .footer li,
body.theme-loja .footer .text-muted {
  color: color-mix(in srgb, var(--theme-color-text-inverse) 82%, transparent) !important;
}

body.theme-loja .footer h5 {
  color: var(--theme-color-text-inverse) !important;
}

body.theme-loja .footer a {
  color: color-mix(in srgb, var(--theme-color-text-inverse) 88%, var(--theme-color-brand-accent)) !important;
}

body.theme-loja .footer a:hover {
  color: var(--theme-color-brand-accent) !important;
}

body.theme-loja .footer hr {
  border-color: rgba(255, 255, 255, .16) !important;
}

@media (max-width: 767.98px) {
  body.theme-loja .theme-hero-frame {
    min-height: var(--theme-component-banners-height-mobile);
  }

  body.theme-loja .welcome-hero {
    min-height: clamp(360px, 62vh, 460px);
    padding: 3.5rem 1rem;
  }

  body.theme-loja .welcome-hero-action {
    min-width: 0;
    width: min(100%, 260px);
  }
}
