/*
  Tema Premium - Boutique de Luxo
  Identidade: sofisticada, minimalista, atemporal
  Paleta: 80% preto | 10% branco | 5% dourado | 5% tons camel/caramelo
  Fontes: Cormorant Garamond (títulos) + Inter (corpo) + Script (marca)
*/

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  color-scheme: dark;

  /* ═══ Background & Superfície ═════════════════ */
  --background: hsl(0 0% 0%) !important;
  --foreground: hsl(0 0% 96%) !important;

  --card: hsl(220 60% 5%) !important;
  --card-foreground: hsl(0 0% 96%) !important;

  --popover: hsl(220 60% 5%) !important;
  --popover-foreground: hsl(0 0% 96%) !important;

  --primary: hsl(40 44% 60%) !important;
  --primary-foreground: hsl(0 0% 0%) !important;

  --secondary: hsl(220 15% 14%) !important;
  --secondary-foreground: hsl(0 0% 96%) !important;

  --muted: hsl(220 15% 14%) !important;
  --muted-foreground: hsl(220 10% 65%) !important;

  --accent: hsl(220 15% 14%) !important;
  --accent-foreground: hsl(0 0% 96%) !important;

  --destructive: hsl(20 31% 27%) !important;
  --destructive-foreground: hsl(0 0% 96%) !important;

  --border: hsl(220 15% 14%) !important;
  --input: hsl(220 15% 14%) !important;
  --ring: hsl(40 44% 60%) !important;

  --radius: 0.25rem !important;

  /* ═══ Font Families ═══════════════════════════ */
  --font-heading: "Cormorant Garamond", Georgia, serif !important;
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --font-brand:
    "Great Vibes", "Bickham Script Pro", "Edwardian Script ITC", cursive !important;

  /* ═══ Tipografia - Tamanhos (escalados p/ premium) ════ */
  --section-title-font-size: 3.375rem !important;
  --product-name-font-size: 1.125rem !important;
  --product-name-font-size-compact: 0.75rem !important;
  --product-price-font-size: 1.375rem !important;
  --product-price-font-size-compact: 0.875rem !important;
  --product-old-price-font-size: 0.875rem !important;
  --product-badge-font-size: 0.6875rem !important;
  --header-logo-font-size: 2rem !important;
  --hero-title-font-size: 2.75rem !important;
  --hero-title-font-size-md: 4.5rem !important;
  --hero-subtitle-font-size: 1.125rem !important;
  --hero-subtitle-font-size-md: 1.375rem !important;
  --cart-badge-font-size: 0.625rem !important;
  --button-font-size: 0.6875rem !important;
  --category-nav-font-size: 0.875rem !important;

  /* ═══ Layout - Espaçamento ═══════════════════ */
  --section-padding-y: 5rem !important;
  --section-padding-x: 1.5rem !important;
  --card-padding: 1.25rem !important;
  --card-padding-compact: 0.75rem !important;
  --product-grid-gap: 1.5rem !important;
  --product-grid-gap-compact: 1rem !important;
  --header-topbar-height: 4.5rem !important;
  --header-catnav-height: 3rem !important;

  /* ═══ Border Radius ══════════════════════════ */
  --badge-border-radius: 0.125rem !important;
  --search-border-radius: 0.25rem !important;
  --toggle-border-radius: 0.125rem !important;

  /* ═══ Logo ═══════════════════════════════════ */
  --header-logo-max-height: 6rem !important;
  --header-logo-max-width: 200px !important;

  /* ═══ Categorias ═════════════════════════════ */
  --category-image-display: inline-block !important;

  /* ═══ Preços ══════════════════════════════════ */
  --price-promo: hsl(40 44% 60%) !important;
  --price-original: hsl(220 10% 65%) !important;

  /* ═══ Badges ══════════════════════════════════ */
  --badge-discount-bg: hsl(40 44% 60%) !important;
  --badge-discount-text: hsl(0 0% 0%) !important;
  --badge-oos-bg: hsl(20 31% 27%) !important;
  --badge-oos-text: hsl(0 0% 96%) !important;

  /* ═══ Ratings ═════════════════════════════════ */
  --rating-star: hsl(40 44% 60%) !important;
  --rating-star-empty: hsl(220 15% 14%) !important;

  /* ═══ Footer ══════════════════════════════════ */
  --footer-bg: hsl(0 0% 0%) !important;
  --footer-text: hsl(0 0% 96%) !important;
  --footer-link: hsl(220 10% 65%) !important;
  --footer-link-hover: hsl(40 44% 60%) !important;

  /* ═══ Status de Pedido ════════════════════════ */
  --order-shipped-bg: hsl(40 44% 60%) !important;
  --order-preparing-text: hsl(30 47% 55%) !important;
  --order-preparing-border: hsl(30 47% 55%) !important;

  /* ═══ Estados ═════════════════════════════════ */
  --success-text: hsl(40 44% 60%) !important;
  --success-bg: hsl(220 15% 14%) !important;
  --success-border: hsl(35 38% 46%) !important;
  --error-bg: hsl(20 31% 27% / 0.2) !important;

  /* ═══ Produto - Fora de Estoque ═══════════════ */
  --product-oos-bg: hsl(220 15% 14%) !important;
  --product-oos-text: hsl(220 10% 65%) !important;

  /* ═══ Reviews ═════════════════════════════════ */
  --section-reviews-bg: hsl(220 60% 5%) !important;
  --section-reviews-card-bg: hsl(220 15% 14%) !important;
  --section-reviews-text: hsl(0 0% 96%) !important;

  /* ═══ Variação - Botão não selecionado ═══════ */
  --variation-btn-bg: hsl(0 0% 10%) !important;
  --variation-btn-border: var(--border) !important;
  --variation-btn-text: var(--foreground) !important;
}

/* ═══ Aplicação das fontes ════════════════════ */

body {
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.hero-title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.brand-logo,
.header-logo-text {
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* ═══ Ajustes pontuais de refinamento ════════ */

/* Links com hover dourado */
a {
  transition: color 0.2s ease;
}
a:hover {
  color: hsl(40 44% 60%);
}

/* Botões primários com fundo dourado */
button.bg-primary,
a.bg-primary {
  color: hsl(0 0% 0%);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Cards mais sofisticados */
.card,
[class*="rounded-lg"],
[class*="rounded-xl"] {
  border-color: hsl(220 15% 14%);
}

/* ═══ Formulários - Texto dourado intenso ══════════ */
input,
textarea,
select {
  color: hsl(42 54% 78%) !important;
  -webkit-text-fill-color: hsl(42 54% 78%);
  caret-color: hsl(42 54% 78%);
  text-shadow: 0 0 12px hsl(42 54% 78% / 0.3);
}

input::placeholder,
textarea::placeholder {
  color: hsl(35 38% 46%);
  -webkit-text-fill-color: hsl(35 38% 46%);
  text-shadow: none;
}

/* Corrige autofill do Chrome em tema escuro */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px hsl(220 60% 5%) inset !important;
  -webkit-text-fill-color: hsl(42 54% 78%) !important;
}

/* ═══ Títulos dos Blocos na Home ════════════════ */
section h2.font-bold.text-foreground {
  font-size: 2.375rem !important;
  line-height: 1.2;
}

/* ═══ Botão Adicionar ao Carrinho ════════════ */
/* Evita que o texto longo vaze em cards estreitos */
.product-card-container button {
  font-size: 0.625rem !important;
  line-height: 1.1;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  gap: 0.25rem;
}

.product-card-container button svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}