/**
 * ==========================================================================
 * Ambrosium - Design System v2.0 (PALETA NOVA • Alto contraste)
 * ==========================================================================
 * Paleta: cream #f3efe8, taupe #bba591, sand #faecc3, teal #336659, navy #0e1c4f
 * Tipografia fluida, foco acessível, componentes consistentes, sem temas
 * antigos (remove “old money/gradiente” e bordeaux duplicados).
 * ==========================================================================
 */


  /* RESET essencial – vem antes dos tokens */
  html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
  }

/* garante que faixas de fundo ocupem 100% da largura */
header, .site-footer, .hero-bg-about, .soft-section { width: 100%; }


/* ==========================================================================
   1) TOKENS (Fonte da Verdade)
   ========================================================================== */
:root{
  /* Paleta base */
  --amb-cream:#f3efe8;   /* superfícies */
  --amb-taupe:#bba591;   /* bordas neutras/quentes */
  --amb-sand:#faecc3;    /* destaque suave (badges/chips) */
  --amb-teal:#336659;    /* acento */
  --amb-navy:#0e1c4f;    /* primária/textos */

  /* Mapeamento p/ o DS */
  --color-primary: var(--amb-navy);
  --color-primary-dark: color-mix(in oklab, var(--amb-navy) 90%, black);
  --color-primary-contrast:#ffffff;

  --color-text: var(--amb-navy);
  --color-muted: color-mix(in oklab, var(--amb-navy) 45%, #fff 55%);
  --color-surface: var(--amb-cream);
  --color-surface-50: color-mix(in oklab, var(--amb-cream) 85%, #fff 15%);
  --color-border: color-mix(in oklab, var(--amb-taupe) 55%, #fff 45%);

  --color-success: var(--amb-teal);
  --color-warning: var(--amb-taupe);
  --color-error: #dc2626;
  --color-info: var(--amb-teal);

  --radius-sm:.5rem; --radius:.75rem; --radius-lg:1rem; --radius-full:9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  --font-serif:"Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  --font-size-h1: clamp(1.9rem, 1.1rem + 2.4vw, 2.6rem);
  --font-size-h2: clamp(1.5rem, 0.9rem + 1.6vw, 2.1rem);
  --font-size-h3: clamp(1.2rem, 0.9rem + 0.6vw, 1.35rem);
  --font-size-h4: 1.125rem; --font-size-h5: 1rem; --font-size-h6:.9rem;
  --font-size-lead: 1.125rem; --font-size-caption:.875rem;

  --transition-fast:.15s ease; --transition-slow:.30s ease;

  /* Anel de foco com a paleta nova */
  --ring: 0 0 0 3px color-mix(in oklab, var(--amb-teal) 35%, #fff);
}

/* ==========================================================================
   2) BASE
   ========================================================================== */
html,body{
  color:var(--color-text);
  background:var(--color-surface);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:.005em;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-serif);
  color:var(--color-primary);
  font-weight:700; margin:0;
}
h1{ font-size:var(--font-size-h1); line-height:1.2 }
h2{ font-size:var(--font-size-h2); line-height:1.25 }
h3{ font-size:var(--font-size-h3); line-height:1.3 }
h4{ font-size:var(--font-size-h4); line-height:1.35 }
h5{ font-size:var(--font-size-h5); line-height:1.4 }
h6{ font-size:var(--font-size-h6); line-height:1.4 }
p{ max-width:65ch }
p,li,small,input,button{ font-family:var(--font-sans) }
.lead{ font-size:var(--font-size-lead); line-height:1.55 }
.caption{ font-size:var(--font-size-caption); opacity:.8 }

/* Links */
a{ color:var(--color-primary); text-decoration:none; transition:color var(--transition-fast) }
a:hover{ color:var(--color-primary-dark) }

/* Foco visível consistente */
:focus-visible{ outline:2px solid color-mix(in oklab, var(--color-primary) 70%, #fff); outline-offset:2px; border-radius:.375rem }

/* ==========================================================================
   3) UTILITÁRIAS RÁPIDAS
   ========================================================================== */
.font-serif{ font-family:var(--font-serif) }
.text-primary{ color:var(--color-primary) }
.bg-primary{ background-color:var(--color-primary) }
.lead{ font-size:var(--font-size-lead) }
.caption{ font-size:var(--font-size-caption); opacity:.8 }

/* ==========================================================================
   4) LAYOUT / CONTAINERS
   ========================================================================== */
.container{ max-width:1200px; margin:0 auto }
.card{
  background:#fff;                 /* branco sobre cream = ótima leitura */
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}

/* ==========================================================================
   5) NAV (Header)
   ========================================================================== */
.nav-link{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .375rem; line-height:1.25rem; border-radius:.5rem;
  color: color-mix(in oklab, var(--amb-navy) 86%, #000 14%);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-link:hover{ color:var(--color-primary); background: color-mix(in oklab, var(--amb-navy) 6%, #fff) }
.nav-link.active{ color:var(--color-primary); font-weight:700 }
.nav-link.active::after{
  content:""; position:absolute; left:.25rem; right:.25rem; bottom:-6px;
  height:2px; border-radius:2px; background:var(--color-primary);
}
#admin-link.hidden{ display:none !important }

/* ==========================================================================
   6) BOTÕES
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; padding:.6rem 1rem; border-radius:var(--radius);
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  border:1px solid color-mix(in oklab, var(--amb-navy) 18%, #fff);
  cursor:pointer; box-shadow:var(--shadow-sm); min-height:44px;
}
.btn:active{ transform:translateY(1px) }
.btn-sm{ padding:.35rem .7rem; font-size:.875rem; border-radius:.6rem }
.btn-primary{ background:var(--color-primary); color:#fff; border-color:var(--color-primary) }
.btn-primary:hover{ filter:brightness(.93) }
.btn-secondary{ background:#fff; color:var(--color-primary); border-color: color-mix(in oklab, var(--amb-teal) 55%, #000 0%) }
.btn-secondary:hover{ background: color-mix(in oklab, var(--amb-teal) 8%, #fff) }
.btn-ghost{ background:transparent; color:var(--color-primary) }
.btn-ghost:hover{ background: color-mix(in oklab, var(--amb-navy) 6%, #fff) }
.btn-danger{ background:var(--color-error); color:#fff }
.btn-danger:hover{ background:#991b1b }
.btn[disabled], .btn.disabled{ opacity:.55; cursor:not-allowed; filter:grayscale(.12) }

/* ==========================================================================
   7) BADGES / STATUS
   ========================================================================== */
.badge{
  display:inline-flex; align-items:center; padding:.15rem .5rem;
  border-radius:var(--radius-full); font-size:.75rem; font-weight:600; letter-spacing:.01em;
  background:var(--amb-sand); color:var(--amb-navy);
  border:1px solid color-mix(in oklab, var(--amb-taupe) 65%, #fff); box-shadow:var(--shadow-sm);
}
.badge-mais-vendido{ background:var(--amb-sand) }
.badge-melhor_compra{ background: color-mix(in oklab, var(--amb-teal) 12%, var(--amb-sand)) }
.badge-promocao{ background:var(--amb-teal); color:#fff; border-color:var(--amb-teal) }
.badge-raridade{ background: color-mix(in oklab, var(--amb-navy) 12%, var(--amb-sand)) }

.status-chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border-radius:999px; font-size:.75rem; font-weight:700 }
.status-pedido_realizado{ background:var(--amb-sand); color:var(--amb-navy); border:1px solid var(--amb-taupe) }
.status-pedido_confirmado{ background: color-mix(in oklab, var(--amb-teal) 12%, #fff); color:var(--amb-teal); border:1px solid var(--amb-teal) }
.status-pedido_entregue{ background: color-mix(in oklab, var(--amb-navy) 10%, #fff); color:var(--amb-navy); border:1px solid color-mix(in oklab, var(--amb-navy) 35%, #fff) }
.status-pedido_cancelado{ background:#fff0f0; color:#7a0f0f; border:1px solid #f3c3c3 }

/* ==========================================================================
   8) PREÇOS
   ========================================================================== */
.price-old{ color: color-mix(in oklab, var(--amb-navy) 45%, #fff); text-decoration:line-through; font-size:.92rem }
.price-now{ color:var(--amb-navy); font-weight:700; font-size:1.1rem }
.prices{ display:flex; align-items:baseline; gap:.5rem; justify-content:center }

/* ==========================================================================
   9) FORMULÁRIOS
   ========================================================================== */
.form-input,.form-select,.form-textarea{
  width:100%; padding:.6rem .8rem; border:1px solid var(--color-border);
  border-radius:.6rem; background:#fff; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-textarea{ min-height:2.75rem }
.form-select-multiple{ min-height:2.6rem }
.form-input::placeholder,.form-textarea::placeholder{ color: color-mix(in oklab, var(--color-muted) 85%, #fff 15%) }
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--amb-teal) 35%, #fff);
}
.feedback-message{ font-size:.9rem }
.feedback-error{ color:var(--color-error) }
.feedback-success{ color:var(--color-success) }

/* Switch */
.switch{ position:relative; display:inline-block; width:42px; height:24px }
.switch input{ opacity:0; width:0; height:0 }
.switch .slider{ position:absolute; inset:0; background:#e5e7eb; transition:.2s; border-radius:9999px }
.switch .slider:before{ content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; transition:.2s; border-radius:9999px; box-shadow:var(--shadow-sm) }
.switch input:checked + .slider{ background:var(--color-primary) }
.switch input:checked + .slider:before{ transform:translateX(18px) }

/* ==========================================================================
   10) MODAIS (com backdrop seguro)
   ========================================================================== */
.modal{
  width:100%; max-width:56rem; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); transition: transform .18s ease, opacity .18s ease;
  background:#fff; color:var(--color-text); border:1px solid var(--color-border);
}
/* por padrão, o backdrop fica escondido (evita tela “embaçada”) */
.modal-backdrop{ display:none !important; background: rgba(14,28,79,.55); backdrop-filter:blur(2px) }
/* e só aparece quando o contêiner do modal está visível */
.product-modal:not(.hidden) > .modal-backdrop,
#checkout-modal:not(.hidden) > .modal-backdrop,
#modal-container:not(.hidden) > .modal-backdrop{ display:block !important }

/* ==========================================================================
   11) CARROSSEL / SLIDER
   ========================================================================== */
.featured-carousel-viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch }
.featured-carousel{ display:flex; gap:.5rem; padding:.25rem }
.featured-carousel > *{ scroll-snap-align:start }
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px;
  border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--color-primary); border:1px solid var(--color-border); box-shadow:var(--shadow-sm);
}
.carousel-btn.prev{ left:.5rem } .carousel-btn.next{ right:.5rem }
.carousel-btn:hover{ background: color-mix(in oklab, var(--amb-navy) 6%, #fff) }

.slider-container{ position:relative; min-height:clamp(340px, 40vw, 520px); display:flex; align-items:center; justify-content:center; overflow:hidden }
.slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.03); transition:opacity .6s ease, transform .6s ease }
.slide.active{ opacity:1; transform:scale(1) }
.slide-content{ position:relative; z-index:1; text-align:center; margin:0 auto; padding:0 1rem; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.35) }
.slider-nav{ position:absolute; z-index:2; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; gap:.5rem }
.slider-dot{ width:10px; height:10px; border-radius:999px; border:1px solid rgba(255,255,255,.7); background:rgba(255,255,255,.2) }
.slider-dot.active{ background:#fff }

/* ==========================================================================
   12) PERFIL / LISTAS
   ========================================================================== */
.profile-menu-item{ display:block; width:100%; text-align:left; padding:.6rem .8rem; border-radius:.6rem; font-weight:600; color:#374151 }
.profile-menu-item:hover{ background:#f3f4f6 }
.profile-menu-item.active{ background:#eef2ff; color:var(--color-primary) }
.content-panel{ background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg) }
.data-display-group .data-display-label{ font-size:.8rem; color:var(--color-muted) }
.data-display-group .data-display-value{ font-weight:600 }

/* ==========================================================================
   13) IMAGEM / UTILITÁRIOS
   ========================================================================== */
.img-cover{ width:100%; height:100%; object-fit:cover }
.img-contain{ width:100%; height:100%; object-fit:contain }
.aspect-1-1{ aspect-ratio:1/1 } .aspect-3-4{ aspect-ratio:3/4 }
.aspect-4-3{ aspect-ratio:4/3 } .aspect-16-9{ aspect-ratio:16/9 }

/* Cards de destaque – garrafa inteira */
.featured-card .visual{ aspect-ratio:3/4; overflow:hidden }
.featured-card .visual img{ width:100%; height:100%; object-fit:contain }

/* Catálogo: painel esquerdo do modal (garrafa inteira) */
.left-visual img{ width:100%; height:100%; object-fit:contain }

/* Quem Somos – foto */
img.about-photo{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-lg, 1rem) }

/* Logos */
img[alt*="logo" i], img[class*="logo" i]{ object-fit:contain !important; max-height:56px }

/* ==========================================================================
   14) MOBILE tweaks
   ========================================================================== */
@media (max-width:768px){
  .modal{ max-height:calc(100dvh - 2rem); overflow-y:auto }
  .tab-btn, .filter-toggle{ min-height:44px }
}

/* ==========================================================================
   15) RODAPÉ
   ========================================================================== */
.site-footer{
  background:var(--amb-navy);
  color:var(--amb-cream);
  padding:2rem 0;
  border-top:1px solid color-mix(in oklab, var(--amb-cream) 15%, var(--amb-navy));
}
.site-footer a{ color:var(--amb-sand); text-decoration:none }
.site-footer a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px }

/* ==========================================================================
   16) COMPATIBILIDADE (classes escondidas em breakpoints)
   ========================================================================== */
@media (min-width:768px){
  .hidden.md\:flex{ display:flex !important }
  .hidden.md\:inline-flex{ display:inline-flex !important }
  .hidden.md\:grid{ display:grid !important }
}
@media (min-width:1024px){
  .hidden.lg\:flex{ display:flex !important }
  .hidden.lg\:inline-flex{ display:inline-flex !important }
  .hidden.lg\:grid{ display:grid !important }
}