/* ============================================================
   MIMO DE MINAS — CSS PRINCIPAL v4
   Design elegante, tipografia premium, paletas refinadas
   ============================================================ */

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  background: var(--bg, #FAF6F1);
  color: var(--text, #2A1A0E);
  line-height: 1.75;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }
h1,h2,h3,h4,h5 { font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif); line-height: 1.15; }

/* ============================================================
   PALETAS DE CORES (7 opções elegantes)
   ============================================================ */

/* 1 — Dourado Mineiro (padrão) */
.palette-dourado {
  --primary:        #C9A84C;
  --primary-dark:   #9E7A2A;
  --primary-light:  #F0D58A;
  --secondary:      #7A3B19;
  --accent:         #D95A2B;
  --accent-dark:    #A73E18;
  --bg:             #FAF6F1;
  --bg-alt:         #F2EBE0;
  --surface:        #FFFFFF;
  --text:           #2A1A0E;
  --text-muted:     #6B5344;
  --border:         #E0D0BF;
  --shadow:         rgba(90,50,10,0.10);
  --hero-overlay:   linear-gradient(135deg,rgba(42,16,4,0.72) 0%,rgba(121,59,25,0.45) 100%);
  --gold-line:      linear-gradient(90deg, transparent, #C9A84C, #F0D58A, #C9A84C, transparent);
}
/* 2 — Noite Vintage */
.palette-noite {
  --primary:        #BFA15C;
  --primary-dark:   #8C7030;
  --primary-light:  #DEC98A;
  --secondary:      #2C3E50;
  --accent:         #E8693A;
  --accent-dark:    #B84E22;
  --bg:             #12111A;
  --bg-alt:         #1C1B28;
  --surface:        #222136;
  --text:           #E8E0D0;
  --text-muted:     #9088A0;
  --border:         #2E2D40;
  --shadow:         rgba(0,0,0,0.45);
  --hero-overlay:   linear-gradient(135deg,rgba(0,0,0,0.82) 0%,rgba(30,15,5,0.55) 100%);
  --gold-line:      linear-gradient(90deg, transparent, #BFA15C, #DEC98A, #BFA15C, transparent);
}
/* 3 — Verde Serra */
.palette-verde {
  --primary:        #5C8C5A;
  --primary-dark:   #3D6B3B;
  --primary-light:  #8FBD8D;
  --secondary:      #8B6914;
  --accent:         #C25C2A;
  --accent-dark:    #963F16;
  --bg:             #F4F8F1;
  --bg-alt:         #E8F0E4;
  --surface:        #FFFFFF;
  --text:           #1B2E1A;
  --text-muted:     #4A6048;
  --border:         #C8DCC5;
  --shadow:         rgba(30,70,28,0.10);
  --hero-overlay:   linear-gradient(135deg,rgba(10,30,8,0.78) 0%,rgba(30,70,28,0.45) 100%);
  --gold-line:      linear-gradient(90deg, transparent, #5C8C5A, #8FBD8D, #5C8C5A, transparent);
}
/* 4 — Terracota Artesanal */
.palette-terracota {
  --primary:        #C0643D;
  --primary-dark:   #8F3F1F;
  --primary-light:  #E09070;
  --secondary:      #6B3A28;
  --accent:         #E8A030;
  --accent-dark:    #B57A15;
  --bg:             #FAF2EC;
  --bg-alt:         #F2E8DC;
  --surface:        #FFFFFF;
  --text:           #2E1810;
  --text-muted:     #7A4838;
  --border:         #E0C8B8;
  --shadow:         rgba(100,40,10,0.10);
  --hero-overlay:   linear-gradient(135deg,rgba(30,12,4,0.80) 0%,rgba(96,40,16,0.50) 100%);
  --gold-line:      linear-gradient(90deg, transparent, #C0643D, #E09070, #C0643D, transparent);
}
/* 5 — Branco Mineral */
.palette-branco {
  --primary:        #8C7B6E;
  --primary-dark:   #5C4E44;
  --primary-light:  #B8A898;
  --secondary:      #4A3D36;
  --accent:         #C8673A;
  --accent-dark:    #9A4420;
  --bg:             #F8F8F6;
  --bg-alt:         #EFEDE8;
  --surface:        #FFFFFF;
  --text:           #1C1916;
  --text-muted:     #6B5E56;
  --border:         #DDD8D0;
  --shadow:         rgba(0,0,0,0.07);
  --hero-overlay:   linear-gradient(135deg,rgba(10,8,5,0.75) 0%,rgba(60,45,35,0.48) 100%);
  --gold-line:      linear-gradient(90deg, transparent, #8C7B6E, #B8A898, #8C7B6E, transparent);
}
/* 6 — Safira Premium */
.palette-safira {
  --primary:        #4A6FA5;
  --primary-dark:   #2E4E82;
  --primary-light:  #7A9FD0;
  --secondary:      #8C6914;
  --accent:         #C8A030;
  --accent-dark:    #9A7010;
  --bg:             #F2F5FA;
  --bg-alt:         #E8EDF5;
  --surface:        #FFFFFF;
  --text:           #0F1E32;
  --text-muted:     #4A5A72;
  --border:         #C8D5E8;
  --shadow:         rgba(15,30,80,0.10);
  --hero-overlay:   linear-gradient(135deg,rgba(5,10,30,0.82) 0%,rgba(15,30,80,0.50) 100%);
  --gold-line:      linear-gradient(90deg, transparent, #4A6FA5, #7A9FD0, #4A6FA5, transparent);
}
/* 8 — Champagne */
.palette-champagne {
  --primary:        #C4947A;
  --primary-dark:   #9A6A50;
  --primary-light:  #E8BBA8;
  --secondary:      #6E4E5C;
  --accent:         #D4956A;
  --accent-dark:    #A8723C;
  --bg:             #FDF7F5;
  --bg-alt:         #F5EDE8;
  --surface:        #FFFFFF;
  --text:           #2C1A16;
  --text-muted:     #7A5A52;
  --border:         #EADAD2;
  --shadow:         rgba(120,60,40,0.09);
  --hero-overlay:   linear-gradient(135deg,rgba(28,10,6,0.82) 0%,rgba(100,60,40,0.48) 100%);
  --gold-line:      linear-gradient(90deg, transparent, #C4947A, #E8BBA8, #C4947A, transparent);
}
/* 7 — Ébano & Linho */
.palette-ebano {
  --primary:        #A67D44;
  --primary-dark:   #7A5A28;
  --primary-light:  #CDBCAB;
  --secondary:      #899481;
  --accent:         #A67D44;
  --accent-dark:    #7A5A28;
  --bg:             #EFE9E1;
  --bg-alt:         #E3DCD3;
  --surface:        #FAF7F4;
  --text:           #11100F;
  --text-muted:     #6B6560;
  --border:         #CDBCAB;
  --shadow:         rgba(17,16,15,0.12);
  --hero-overlay:   linear-gradient(135deg,rgba(17,16,15,0.85) 0%,rgba(166,125,68,0.30) 100%);
  --gold-line:      linear-gradient(90deg, transparent, #A67D44, #CDBCAB, #A67D44, transparent);
}

/* ============================================================
   PALETAS DE FONTES (5 combinações premium)
   ============================================================ */
.font-cormorant  { --font-heading:'Cormorant Garamond',Georgia,serif; --font-body:'DM Sans',system-ui,sans-serif; --letter-spacing-h:-0.02em; }
.font-playfair   { --font-heading:'Playfair Display',Georgia,serif;   --font-body:'DM Sans',system-ui,sans-serif; --letter-spacing-h:-0.01em; }
.font-baskerville{ --font-heading:'Libre Baskerville',Georgia,serif;  --font-body:'DM Sans',system-ui,sans-serif; --letter-spacing-h:0em; }
.font-josefin    { --font-heading:'Josefin Sans',sans-serif;          --font-body:'Josefin Sans',sans-serif;       --letter-spacing-h:0.08em; }
.font-raleway    { --font-heading:'Raleway',sans-serif;               --font-body:'Raleway',sans-serif;            --letter-spacing-h:0.02em; }

/* ============================================================
   UTILITÁRIOS GERAIS
   ============================================================ */
.container   { max-width:1280px; margin:0 auto; padding:0 2rem; }
.hidden      { display:none !important; }
.mt-2        { margin-top:2rem; }
.section     { padding:6rem 0; }

/* Linha decorativa dourada */
.gold-line {
  height: 1px;
  background: var(--gold-line);
  border: none;
  margin: 0;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.85rem 2rem; border-radius:4px;
  font-family:var(--font-body); font-weight:500; font-size:0.9rem;
  letter-spacing:0.06em; text-transform:uppercase;
  transition:all 0.28s cubic-bezier(0.25,0.46,0.45,0.94);
  white-space:nowrap; cursor:pointer;
}
.btn-primary {
  background:var(--primary); color:#fff;
  box-shadow:0 2px 12px var(--shadow);
}
.btn-primary:hover {
  background:var(--primary-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 28px var(--shadow);
}
.btn-ghost {
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,0.55);
  letter-spacing:0.05em;
}
.btn-ghost:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.85); }
.btn-outline {
  display:inline-flex; align-items:center; gap:0.55rem;
  border:1px solid var(--primary); color:var(--primary);
  background:transparent; padding:0.8rem 2rem; border-radius:4px;
  font-size:0.88rem; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; transition:all 0.28s; cursor:pointer;
}
.btn-outline:hover { background:var(--primary); color:#fff; transform:translateY(-2px); box-shadow:0 8px 24px var(--shadow); }
.btn-danger  { background:#c62828; color:#fff; }
.btn-danger:hover { background:#b71c1c; }
.btn-success { background:#2e7d32; color:#fff; }
.btn-success:hover { background:#1b5e20; }
.btn-block   { width:100%; justify-content:center; }
.btn-sm      { padding:0.45rem 1rem; font-size:0.8rem; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position:sticky; top:0; z-index:500;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  transition:box-shadow 0.3s, border-color 0.3s;
}
.site-header.scrolled { box-shadow:0 4px 40px var(--shadow); border-color:transparent; }
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 2rem; max-width:1280px; margin:0 auto;
}
.logo { display:flex; align-items:center; gap:0.7rem; text-decoration:none; }
.logo-text {
  font-family:var(--font-heading); font-size:1.55rem; font-weight:600;
  letter-spacing:var(--letter-spacing-h,-0.02em);
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.logo-img {
  height:42px; width:auto; max-width:160px;
  object-fit:contain; object-position:left center;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.08));
}
.main-nav { display:flex; gap:2.2rem; }
.main-nav a {
  font-size:0.78rem; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-muted);
  transition:color 0.2s; position:relative; padding-bottom:3px;
}
.main-nav a::after {
  content:''; position:absolute; bottom:-1px; left:0;
  width:0; height:1px; background:var(--primary); transition:width 0.3s;
}
.main-nav a:hover { color:var(--primary); }
.main-nav a:hover::after, .main-nav a.active-link::after { width:100%; }
.main-nav a.active-link { color:var(--primary); }
.header-actions { display:flex; align-items:center; gap:0.9rem; }
.icon-btn {
  background:none; border:none; font-size:1.05rem;
  color:var(--text-muted); padding:0.4rem;
  transition:color 0.2s; position:relative; cursor:pointer;
}
.icon-btn:hover { color:var(--primary); }
.cart-badge {
  position:absolute; top:-5px; right:-6px;
  min-width:17px; height:17px;
  background:var(--accent); color:#fff;
  border-radius:50%; font-size:0.65rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 2px;
}
.hamburger { display:none; flex-direction:column; gap:5px; padding:4px; }
.hamburger span { display:block; width:22px; height:1.5px; background:var(--text); transition:all 0.3s; }

/* Barra de busca */
.search-bar { display:none; background:var(--bg-alt); border-top:1px solid var(--border); padding:0.75rem 2rem; }
.search-bar.open { display:block; }
.search-bar-inner { max-width:560px; margin:0 auto; display:flex; gap:0.7rem; }
.search-bar-inner input {
  flex:1; border:1px solid var(--border); background:var(--surface);
  padding:0.65rem 1rem; border-radius:4px; font-family:var(--font-body);
  color:var(--text); font-size:0.9rem;
}
.search-bar-inner input:focus { outline:2px solid var(--primary); border-color:transparent; }
.search-bar-inner button { color:var(--text-muted); font-size:1.1rem; }

/* Menu mobile */
.mobile-nav {
  display:none; position:fixed; inset:0;
  background:var(--surface); z-index:490;
  padding:5rem 2rem 2rem; flex-direction:column;
}
.mobile-nav.open { display:flex; }
.mobile-nav a {
  display:block; padding:1.1rem 0; border-bottom:1px solid var(--border);
  font-size:1.25rem; font-family:var(--font-heading); color:var(--text); letter-spacing:0.02em;
}
.mobile-nav a:hover { color:var(--primary); }

/* ============================================================
   HERO — Foto em tela cheia, texto elegante na esquerda
   A imagem ocupa 100% do hero; o conteúdo fica sobre o lado
   esquerdo com um gradiente suave que protege a leitura
   SEM dividir a imagem em partes
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

/* Imagem de fundo — ocupa TODO o hero */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #1a0c04; /* fallback escuro enquanto imagem carrega */
  z-index: 0;
  /* Remove transition de opacity para não piscar */
}

/* Gradiente lateral: escurece apenas o lado esquerdo
   onde fica o texto — lado direito fica completamente limpo */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(8, 4, 1, 0.88) 0%,
    rgba(8, 4, 1, 0.78) 20%,
    rgba(8, 4, 1, 0.55) 38%,
    rgba(8, 4, 1, 0.18) 58%,
    transparent 75%
  );
  z-index: 1;
}

/* Painel de conteúdo — colado à esquerda da tela */
.hero-content {
  position: relative;
  z-index: 2;
  width: 46%;
  max-width: 580px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem 2.5rem 6rem 4rem;
  margin-left: 0;
  /* animação heroIn removida — sem flash de entrada */
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--primary-light, #F0D58A);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-title {
  font-size: clamp(2.8rem, 5vw, 5.6rem);
  font-weight: 400;
  line-height: 1.02;
  color: #fff;
  letter-spacing: var(--letter-spacing-h, -0.02em);
  margin-bottom: 1.4rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

.hero-subtitle {
  font-size: clamp(0.94rem, 1.6vw, 1.14rem);
  color: rgba(255,255,255,0.80);
  font-weight: 300;
  margin-bottom: 2.4rem;
  max-width: 420px;
  line-height: 1.72;
}

.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }

/* Linha divisória dourada */
.hero-divider {
  width: 48px;
  height: 1px;
  background: var(--primary, #C9A84C);
  opacity: 0.7;
  margin-bottom: 2.2rem;
}

/* Stats — dentro do painel esquerdo, abaixo dos botões */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 1.8rem;
  width: fit-content;
}

.hero-stat {
  text-align: left;
  padding-right: 2rem;
  margin-right: 2rem;
  border-right: 1px solid rgba(255,255,255,0.14);
}
.hero-stat:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.hero-stat strong {
  display: block;
  font-size: 1.65rem;
  font-family: var(--font-heading);
  color: #fff;
  line-height: 1;
  margin-bottom: 0.22rem;
}
.hero-stat span {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  opacity: 0.38;
}
.hero-scroll span { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; }
.hero-scroll i    { color: #fff; font-size: 0.8rem; }

/* ============================================================
   BARRA PROMO
   ============================================================ */
.promo-bar {
  background:var(--text,#2A1A0E); color:rgba(255,255,255,0.9);
  text-align:center; padding:0.85rem 1rem; font-size:0.8rem;
  letter-spacing:0.08em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:0.9rem;
}
.promo-bar strong { color:var(--primary-light,#F0D58A); }
.promo-bar i { opacity:0.5; font-size:0.65rem; }

/* ============================================================
   SEÇÕES COMUNS
   ============================================================ */
.section-header { text-align:center; max-width:580px; margin:0 auto 3.5rem; }
.section-eyebrow {
  font-size:0.7rem; font-weight:700; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--primary); margin-bottom:0.8rem;
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
}
.section-title {
  font-size:clamp(1.9rem,3.5vw,2.8rem); color:var(--text);
  letter-spacing:var(--letter-spacing-h,-0.02em); margin-bottom:0.9rem;
}
.section-desc { color:var(--text-muted); font-size:1rem; line-height:1.7; }

/* ============================================================
   SEÇÃO DESTAQUES
   ============================================================ */
.featured-section { background:var(--bg-alt); position:relative; }
.featured-section::before {
  content:''; display:block; height:1px;
  background:var(--gold-line,linear-gradient(90deg,transparent,var(--primary),transparent));
  position:absolute; top:0; left:0; right:0;
}
.featured-grid { grid-template-columns:repeat(4,1fr) !important; }
.product-card--featured { border-color:var(--primary); box-shadow:0 4px 24px var(--shadow); }
.product-card--featured:hover { box-shadow:0 16px 48px var(--shadow); }
.product-badge--star {
  background:var(--accent); color:#fff; font-size:0.65rem;
  font-weight:700; letter-spacing:0.08em;
  display:flex; align-items:center; gap:0.25rem;
}
.featured-cta { text-align:center; margin-top:3rem; }

/* ============================================================
   SEÇÃO CATÁLOGO
   ============================================================ */
.catalog-section { background:var(--bg); border-top:1px solid var(--border); }
.catalog-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:2.5rem 0; cursor:pointer;
  border-bottom:1px solid var(--border); transition:border-color 0.25s; user-select:none;
}
.catalog-header:hover { border-color:var(--primary); }
.catalog-toggle-wrap {
  display:flex; flex-direction:column; align-items:center; gap:0.4rem; flex-shrink:0;
}
.catalog-toggle-label {
  font-size:0.7rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-muted); transition:color 0.2s;
}
.catalog-toggle-icon {
  width:44px; height:44px; border-radius:50%;
  background:var(--bg-alt); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary); font-size:1rem;
  transition:background 0.25s, border-color 0.25s, transform 0.35s;
}
.catalog-section.catalog-open .catalog-toggle-icon { transform:rotate(180deg); }
.catalog-header:hover .catalog-toggle-icon {
  background:var(--primary); border-color:var(--primary); color:#fff;
}
.catalog-body {
  max-height:0; overflow:hidden;
  transition:max-height 0.65s cubic-bezier(0.4,0,0.2,1), opacity 0.45s ease, padding 0.45s ease;
  opacity:0; padding-top:0; padding-bottom:0;
}
.catalog-section.catalog-open .catalog-body { max-height:20000px; opacity:1; padding-top:2.5rem; }
.catalog-close-btn {
  display:flex; align-items:center; gap:0.5rem;
  border:1px solid var(--border); background:var(--surface);
  color:var(--text-muted); padding:0.5rem 1.3rem;
  border-radius:4px; font-size:0.8rem; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  cursor:pointer; transition:all 0.25s; margin-bottom:1.5rem;
}
.catalog-close-btn:hover { border-color:var(--primary); color:var(--primary); }
.catalog-toolbar {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.2rem; margin-bottom:2.5rem; flex-wrap:wrap;
}
.filters-bar { display:flex; gap:0.6rem; flex-wrap:wrap; flex:1; }
.filter-btn {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.5rem 1.2rem; border-radius:40px; font-size:0.8rem;
  font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-muted); border:1px solid var(--border);
  background:var(--surface); transition:all 0.22s;
}
.filter-btn:hover, .filter-btn.active {
  background:var(--primary); border-color:var(--primary); color:#fff;
}
.catalog-search-wrap {
  display:flex; align-items:center; gap:0.6rem;
  background:var(--surface); border:1px solid var(--border);
  border-radius:4px; padding:0.5rem 0.9rem; min-width:210px; transition:border-color 0.2s;
}
.catalog-search-wrap:focus-within { border-color:var(--primary); }
.catalog-search-wrap i { color:var(--text-muted); font-size:0.85rem; flex-shrink:0; }
.catalog-search-input {
  border:none; background:transparent; color:var(--text);
  font-size:0.88rem; width:100%; outline:none;
}
.catalog-search-input::placeholder { color:var(--text-muted); }

/* ============================================================
   GRID DE PRODUTOS
   ============================================================ */
.products-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.5rem; align-items:stretch;
}
.product-card {
  background:var(--surface); border-radius:8px; overflow:hidden;
  border:1px solid var(--border); box-shadow:0 2px 16px var(--shadow);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  cursor:pointer; display:flex; flex-direction:column; height:100%;
}
.product-card:hover { transform:translateY(-6px); box-shadow:0 14px 40px var(--shadow); }
.product-card-img {
  position:relative; width:100%; padding-top:100%;
  overflow:hidden; background:var(--bg-alt); flex-shrink:0;
}
.product-card-img img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 20%;
  transition:transform 0.5s ease;
}
.product-card:hover .product-card-img img { transform:scale(1.05); }
.product-badge {
  position:absolute; top:0.9rem; left:0.9rem;
  background:var(--primary); color:#fff; font-size:0.62rem;
  font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  padding:0.25rem 0.6rem; border-radius:2px;
}
/* Badge "Esgotado" no card */
.product-badge--out {
  background:#c62828;
}
/* Card inteiro com visual de esgotado */
.product-card--out .product-card-img img {
  filter: grayscale(60%) opacity(0.75);
}
.product-card--out .product-price {
  color: var(--text-muted);
}
/* Badge "esgotado" no rodapé do card */
.badge-esgotado {
  font-size:0.75rem; font-weight:700; color:#c62828;
  background:#fff5f5; border:1px solid #ffcdd2;
  padding:0.35rem 0.75rem; border-radius:4px; white-space:nowrap;
}
.product-card-body {
  padding:1.1rem 1.2rem 1.3rem;
  display:flex; flex-direction:column; flex:1 1 auto;
}
.product-category {
  font-size:0.65rem; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--primary); margin-bottom:0.4rem;
}
.product-title {
  font-family:var(--font-heading); font-size:1.15rem; font-weight:500;
  color:var(--text); margin-bottom:0.35rem; line-height:1.25;
}
.product-unit { font-size:0.78rem; color:var(--text-muted); margin-bottom:0.5rem; }
.product-desc-short {
  font-size:0.82rem; color:var(--text-muted); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; flex:1 1 auto; margin-bottom:1rem;
  min-height:3.9em; /* reserva espaço para 3 linhas */
}
.product-footer { display:flex; align-items:center; justify-content:space-between; gap:0.8rem; margin-top:auto; }
.product-price { font-family:var(--font-heading); font-size:1.55rem; font-weight:700; color:var(--primary); }
.btn-add-cart {
  display:inline-flex; align-items:center; gap:0.35rem;
  background:var(--primary); color:#fff; padding:0.55rem 1.1rem;
  border-radius:4px; font-size:0.8rem; font-weight:600; letter-spacing:0.04em;
  transition:all 0.22s; white-space:nowrap;
}
.btn-add-cart:hover { background:var(--primary-dark); transform:translateY(-1px); }
.product-card-skeleton {
  border-radius:8px; height:360px;
  background:linear-gradient(90deg,var(--border) 25%,var(--bg-alt) 50%,var(--border) 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite linear;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
#productGrid { display:flex; flex-direction:column; gap:0; }
.cat-section { margin-bottom:3.5rem; }
.cat-section:last-child { margin-bottom:0; }
.cat-section-header {
  display:flex; align-items:center; gap:0.8rem; margin-bottom:1.3rem;
  padding-bottom:0.8rem; border-bottom:1px solid var(--border);
}
.cat-section-icon {
  width:34px; height:34px; background:var(--primary); color:#fff;
  border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0;
}
.cat-section-title { font-family:var(--font-heading); font-size:1.35rem; font-weight:600; color:var(--text); flex:1; margin:0; }
.cat-section-count {
  font-size:0.72rem; font-weight:700; color:var(--text-muted);
  background:var(--bg-alt); border:1px solid var(--border);
  padding:0.2rem 0.6rem; border-radius:20px; letter-spacing:0.04em;
}
.cat-section .products-grid, #productGrid > .products-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; align-items:stretch; width:100%;
}

/* ============================================================
   NOSSA HISTÓRIA
   ============================================================ */
.historia-section { background:var(--bg-alt); }
.historia-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.historia-img-wrapper { position:relative; border-radius:8px; overflow:hidden; box-shadow:0 16px 50px var(--shadow); }
.historia-img-wrapper img { width:100%; height:500px; object-fit:cover; }
.historia-img-wrapper::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.18) 100%);
}
.historia-content { display:flex; flex-direction:column; gap:1.4rem; }
.historia-text { color:var(--text-muted); }
.historia-text p + p { margin-top:0.9rem; }
.historia-highlights { display:flex; flex-direction:column; gap:0.7rem; }
.highlight-item { display:flex; align-items:center; gap:0.8rem; font-size:0.9rem; font-weight:500; color:var(--text); }
.highlight-item i { color:var(--primary); width:18px; }

/* ============================================================
   DEPOIMENTOS
   ============================================================ */
.testimonials-section { background:var(--bg); }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; align-items:stretch; }
.testimonial-card {
  background:var(--surface); border-radius:8px; padding:2rem;
  border:1px solid var(--border); box-shadow:0 2px 16px var(--shadow);
  display:flex; flex-direction:column; height:100%;
}
.testimonial-stars { font-size:0.85rem; margin-bottom:0.9rem; letter-spacing:0.12em; color:var(--primary); }
.testimonial-card blockquote {
  font-family:var(--font-heading); font-size:1rem; line-height:1.7;
  color:var(--text); font-style:italic; margin-bottom:1.5rem; flex:1 1 auto;
  position:relative; padding-left:1.2rem;
}
.testimonial-card blockquote::before {
  content:'\201C'; position:absolute; left:0; top:-0.2rem;
  font-size:1.8rem; line-height:1; color:var(--primary); font-style:normal; opacity:0.5;
}
.testimonial-author { display:flex; flex-direction:column; }
.testimonial-author strong { font-size:0.85rem; color:var(--text); }
.testimonial-author span { font-size:0.75rem; color:var(--text-muted); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-section { background:var(--bg-alt); }
.faq-list { display:flex; flex-direction:column; gap:0.5rem; max-width:740px; margin:0 auto; }
.faq-item {
  background:var(--surface); border:1px solid var(--border);
  border-radius:6px; overflow:hidden; transition:border-color 0.2s;
}
.faq-item[open] { border-color:var(--primary); }
.faq-item summary {
  padding:1.1rem 1.4rem; font-weight:600; font-size:0.95rem; color:var(--text);
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900;
  font-size:0.7rem; color:var(--primary); transition:transform 0.3s;
}
.faq-item[open] summary::after { transform:rotate(180deg); }
.faq-item p { padding:0 1.4rem 1.1rem; font-size:0.9rem; color:var(--text-muted); line-height:1.7; }
/* Skeleton de carregamento do FAQ */
.faq-skeleton {
  height:52px; border-radius:6px;
  background:linear-gradient(90deg,var(--border) 25%,var(--bg-alt) 50%,var(--border) 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite linear;
}

/* ============================================================
   CONTATO
   ============================================================ */
.contato-section { background:var(--bg); }
.contato-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:5rem; align-items:start; }
.contato-info { display:flex; flex-direction:column; gap:1.5rem; }
.contato-list { display:flex; flex-direction:column; gap:1rem; }
.contato-list li { display:flex; align-items:center; gap:0.8rem; font-size:0.95rem; color:var(--text); }
.contato-list li i { color:var(--primary); width:18px; font-size:1rem; }
.contato-list a { color:var(--text); transition:color 0.2s; }
.contato-list a:hover { color:var(--primary); }
.contato-form-wrap {
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:2.5rem; box-shadow:0 4px 20px var(--shadow);
}
.contato-form { display:flex; flex-direction:column; gap:1.1rem; }
.contato-form h3 { font-size:1.35rem; color:var(--text); margin-bottom:0.3rem; }
.form-row { display:flex; flex-direction:column; gap:0.35rem; }
.form-row label { font-size:0.78rem; font-weight:700; color:var(--text); letter-spacing:0.08em; text-transform:uppercase; }
.form-row input, .form-row textarea, .form-row select {
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  padding:0.75rem 0.95rem; border-radius:4px; font-family:var(--font-body); font-size:0.92rem;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(201,168,76,0.10);
}
.form-row textarea { resize:vertical; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:var(--text); color:rgba(255,255,255,0.65); }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:3rem; padding:4rem 0; }
.footer-brand { display:flex; flex-direction:column; gap:1rem; }
.footer-logo { display:flex; align-items:center; gap:0.8rem; color:#fff; }
.footer-logo strong { font-size:1rem; letter-spacing:0.04em; }
.footer-brand p { font-size:0.83rem; line-height:1.65; max-width:250px; }
.footer-social { display:flex; gap:1rem; font-size:1.3rem; }
.footer-social a { color:rgba(255,255,255,0.4); transition:color 0.2s; }
.footer-social a:hover { color:var(--primary-light); }
.footer-nav h4, .footer-info h4 {
  color:rgba(255,255,255,0.85); font-size:0.7rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; margin-bottom:1rem;
}
.footer-nav ul, .footer-info ul { display:flex; flex-direction:column; gap:0.55rem; }
.footer-nav a { font-size:0.83rem; transition:color 0.2s; }
.footer-nav a:hover { color:var(--primary-light); }
.footer-info li { display:flex; align-items:center; gap:0.6rem; font-size:0.83rem; }
.footer-info li i { color:var(--primary); }
.footer-bottom {
  background:rgba(0,0,0,0.35); text-align:center; padding:1.1rem 1rem;
  font-size:0.75rem; color:rgba(255,255,255,0.4);
  display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap;
}
.footer-bottom a { color:rgba(255,255,255,0.4); transition:color 0.2s; }
.footer-bottom a:hover { color:var(--primary-light); }

/* ============================================================
   BOTÃO FLUTUANTE WHATSAPP
   ============================================================ */
.whatsapp-fab {
  position:fixed; bottom:2rem; right:2rem; z-index:900;
  width:58px; height:58px; background:#25D366; color:#fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; box-shadow:0 4px 20px rgba(37,211,102,0.4);
  text-decoration:none; transition:transform 0.25s, box-shadow 0.25s;
}
.whatsapp-fab:hover { transform:scale(1.1); box-shadow:0 8px 28px rgba(37,211,102,0.55); }
.whatsapp-tooltip {
  position:absolute; right:70px; background:#111; color:#fff;
  font-size:0.75rem; font-weight:600; white-space:nowrap;
  padding:0.35rem 0.8rem; border-radius:4px; pointer-events:none;
  opacity:0; transform:translateX(6px); transition:opacity 0.2s, transform 0.2s;
}
.whatsapp-tooltip::after {
  content:''; position:absolute; right:-4px; top:50%; transform:translateY(-50%);
  border:4px solid transparent; border-left-color:#111;
}
.whatsapp-fab:hover .whatsapp-tooltip { opacity:1; transform:translateX(0); }

/* ============================================================
   CARRINHO LATERAL
   ============================================================ */
.cart-sidebar {
  position:fixed; top:0; right:-480px; width:440px; max-width:100vw; height:100vh;
  background:var(--surface); box-shadow:-6px 0 40px var(--shadow);
  z-index:600; display:flex; flex-direction:column;
  transition:right 0.22s ease;
}
.cart-sidebar.open { right:0; }
.cart-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.45); z-index:595; backdrop-filter:blur(2px);
}
.cart-overlay.visible { display:block; }
.cart-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.4rem; border-bottom:1px solid var(--border); gap:0.5rem;
}
.cart-header h2 { font-size:1.1rem; color:var(--text); flex:1; }
.cart-header-actions { display:flex; align-items:center; gap:0.4rem; }
.cart-clear-btn {
  display:flex; align-items:center; gap:0.3rem; padding:0.3rem 0.65rem;
  border-radius:20px; border:1px solid var(--border); background:none;
  color:var(--text-muted); font-size:0.72rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; transition:all 0.2s;
}
.cart-clear-btn:hover { border-color:#c62828; color:#c62828; }
.close-btn {
  width:34px; height:34px; border-radius:50%; background:var(--bg-alt);
  color:var(--text-muted); display:flex; align-items:center; justify-content:center;
  font-size:1rem; transition:all 0.2s; flex-shrink:0;
}
.close-btn:hover { background:var(--border); color:var(--text); }
.cart-clear-confirm {
  position:absolute; top:0; left:0; right:0; z-index:10;
  background:var(--surface); border-bottom:2px solid #c62828;
  padding:1rem 1.4rem; display:none; animation:slideDown 0.25s ease;
}
.cart-clear-confirm.visible { display:block; }
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
.cart-clear-confirm p { font-size:0.88rem; color:var(--text); margin-bottom:0.8rem; }
.cart-clear-confirm .btn { margin-right:0.5rem; }
.cart-scroll {
  flex:1; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.cart-scroll::-webkit-scrollbar { width:3px; }
.cart-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.cart-items { padding:1rem 1.4rem; display:flex; flex-direction:column; gap:0.9rem; }
.cart-item {
  display:flex; gap:0.9rem; align-items:center;
  padding:0.75rem; background:var(--bg-alt);
  border-radius:6px; border:1px solid var(--border);
}
.cart-item img { width:60px; height:60px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.cart-item-info { flex:1; }
.cart-item-info strong { display:block; font-size:0.85rem; color:var(--text); line-height:1.3; }
.cart-item-info span { font-size:0.78rem; color:var(--text-muted); }
.cart-qty-row { display:flex; align-items:center; gap:0.45rem; margin-top:0.4rem; }
.qty-btn {
  width:24px; height:24px; background:var(--surface); border:1px solid var(--border);
  border-radius:3px; font-size:0.95rem; color:var(--text);
  display:flex; align-items:center; justify-content:center; transition:all 0.2s;
}
.qty-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.qty-value { font-size:0.85rem; font-weight:700; min-width:18px; text-align:center; color:var(--text); }
.remove-item { color:var(--text-muted); font-size:0.85rem; padding:0.3rem; }
.remove-item:hover { color:#c62828; }
.cart-empty { text-align:center; color:var(--text-muted); padding:2.5rem 0; }
.cart-empty i { font-size:2rem; margin-bottom:0.7rem; display:block; color:var(--border); }
.cart-empty-hint { font-size:0.78rem; margin-top:0.3rem; }
/* Frete */
.cart-frete {
  margin:0 1rem 0.5rem; flex-shrink:0;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:10px; padding:0.9rem 1rem;
}
.cart-frete-label {
  display:flex; align-items:center; gap:0.5rem; margin-bottom:0.65rem;
  font-size:0.72rem; font-weight:800; color:var(--text);
  text-transform:uppercase; letter-spacing:0.1em;
}
.cart-frete-label i { color:var(--primary); font-size:0.85rem; }
.frete-input {
  flex:1; border:1.5px solid var(--border); background:var(--surface);
  padding:0.55rem 0.8rem; border-radius:6px; font-size:0.9rem;
  color:var(--text); transition:border-color 0.2s, box-shadow 0.2s;
  font-family:var(--font-body); letter-spacing:0.05em;
}
.frete-input:focus {
  border-color:var(--primary); outline:none;
  box-shadow:0 0 0 3px rgba(201,168,76,0.15);
}
.frete-row { display:flex; gap:0.45rem; align-items:stretch; }
.frete-btn-calcular {
  display:flex; align-items:center; gap:0.35rem;
  background:var(--primary); color:#fff;
  padding:0.5rem 0.9rem; border-radius:4px;
  font-size:0.82rem; font-weight:700;
  transition:background 0.2s, transform 0.1s;
  flex-shrink:0; white-space:nowrap; cursor:pointer;
  border:none;
}
.frete-btn-calcular:hover { background:var(--primary-dark); transform:translateY(-1px); }
.frete-btn-calcular:active { transform:translateY(0); }
.frete-btn-calcular i { font-size:0.85rem; }
.frete-display-wrap { margin-top:0.65rem; }
/* SuperFrete — Loading */
.sf-loading {
  display:flex; align-items:center; gap:0.6rem;
  font-size:0.82rem; color:var(--text-muted);
  padding:0.65rem 0.8rem;
  background:var(--bg-alt); border-radius:6px;
  border:1px dashed var(--border);
  animation:sfFadeIn 0.3s ease;
}
.sf-spinner {
  width:16px; height:16px;
  border:2px solid var(--border); border-top-color:var(--primary);
  border-radius:50%; animation:sfSpin 0.7s linear infinite; flex-shrink:0;
}
@keyframes sfSpin { to{transform:rotate(360deg)} }
@keyframes sfFadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* Caixa de resultado */
.sf-resultado-box {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  animation:sfFadeIn 0.3s ease;
}
.sf-opcoes-header {
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.72rem; font-weight:700; color:var(--text);
  text-transform:uppercase; letter-spacing:0.07em;
  padding:0.65rem 0.85rem;
  background:var(--bg-alt);
  border-bottom:1px solid var(--border);
}
.sf-fallback-badge {
  font-size:0.58rem; background:#fff3e0; color:#e65100;
  border:1px solid #ffcc80; padding:0.1rem 0.45rem;
  border-radius:20px; font-weight:700; letter-spacing:0;
  text-transform:uppercase; margin-left:auto;
  display:flex; align-items:center; gap:0.2rem;
}
.sf-desconto-badge {
  font-size:0.58rem; background:#e8f5e9; color:#2e7d32;
  padding:0.06rem 0.3rem; border-radius:10px; font-weight:700; margin-left:0.2rem;
}
.sf-mais-barato {
  font-size:0.55rem; background:var(--primary); color:#fff;
  padding:0.06rem 0.35rem; border-radius:10px; font-weight:700;
  vertical-align:middle; margin-left:0.3rem; text-transform:uppercase; letter-spacing:0.04em;
}
.sf-opcoes-list { display:flex; flex-direction:column; }
.sf-opcao {
  display:flex; align-items:center;
  padding:0.65rem 0.85rem;
  cursor:pointer;
  transition:background 0.15s;
  gap:0.6rem; user-select:none;
  border-bottom:1px solid var(--border);
}
.sf-opcao:last-child { border-bottom:none; }
.sf-opcao:hover { background:var(--bg-alt); }
.sf-opcao--selecionada {
  background:linear-gradient(135deg, rgba(201,168,76,0.08), rgba(201,168,76,0.04)) !important;
  border-left:3px solid var(--primary);
  padding-left:calc(0.85rem - 2px);
}
.sf-opcao input[type="radio"] { display:none; }
.sf-opcao-radio {
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--border); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:border-color 0.15s;
}
.sf-opcao--selecionada .sf-opcao-radio {
  border-color:var(--primary);
}
.sf-radio-dot {
  width:8px; height:8px; border-radius:50%;
  background:transparent; transition:background 0.15s;
}
.sf-opcao--selecionada .sf-radio-dot { background:var(--primary); }
.sf-opcao-info { display:flex; align-items:center; gap:0.5rem; width:100%; }
.sf-opcao-icon { font-size:1.2rem; flex-shrink:0; }
.sf-opcao-detalhes { flex:1; min-width:0; }
.sf-opcao-nome { display:flex; align-items:center; font-size:0.84rem; font-weight:700; color:var(--text); }
.sf-opcao-empresa { display:block; font-size:0.68rem; color:var(--text-muted); margin-top:0.1rem; }
.sf-opcao-valores { display:flex; flex-direction:column; align-items:flex-end; gap:0.1rem; flex-shrink:0; }
.sf-opcao-preco { font-size:0.9rem; font-weight:700; color:var(--primary); white-space:nowrap; }
.sf-opcao-prazo { font-size:0.63rem; color:var(--text-muted); white-space:nowrap; display:flex; align-items:center; gap:0.18rem; }
.sf-gratis { color:#2e7d32; font-weight:700; font-size:0.84rem; }
.sf-frete-gratis-aviso {
  display:flex; align-items:center; gap:0.5rem;
  background:#e8f5e9; color:#2e7d32;
  border-bottom:1px solid #a5d6a7;
  padding:0.55rem 0.85rem;
  font-size:0.78rem; font-weight:700;
}
.sf-selecionar-aviso {
  display:flex; align-items:center; gap:0.4rem;
  font-size:0.68rem; color:var(--text-muted);
  padding:0.5rem 0.85rem;
  background:var(--bg-alt); border-top:1px solid var(--border);
  font-style:italic;
}
.sf-erro {
  display:flex; align-items:center; gap:0.5rem;
  color:#c62828; font-size:0.8rem;
  padding:0.7rem 0.85rem;
  background:#ffebee; border-radius:6px;
  border:1px solid #ffcdd2;
}
/* Endereço */
.cart-endereco {
  margin:0.5rem 1rem 0;
  padding:1rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  animation:sfEndEnter 0.35s ease;
}
@keyframes sfEndEnter { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.cart-endereco-title {
  display:flex; align-items:center; gap:0.45rem;
  font-size:0.72rem; font-weight:800; color:var(--primary);
  text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.9rem;
}
/* Duas colunas: CEP + Número lado a lado; Rua ocupa linha inteira */
.cart-endereco-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.6rem;
}
.cart-endereco-field { display:flex; flex-direction:column; gap:0.25rem; }
.cart-endereco-field--rua   { grid-column:1 / -1; }  /* linha inteira */
.cart-endereco-field--numero { grid-column:1; }       /* coluna 1 */

.cart-endereco-field label {
  font-size:0.63rem; font-weight:700;
  color:var(--text-muted); text-transform:uppercase; letter-spacing:0.07em;
}

/* Campo preenchido automaticamente (readonly) */
.cart-endereco-input {
  width:100%; padding:0.5rem 0.7rem;
  border:1px solid var(--border); border-radius:5px;
  background:var(--bg-alt); color:var(--text-muted);
  font-family:var(--font-body); font-size:0.82rem;
  cursor:default; box-sizing:border-box;
}

/* Campo editável pelo usuário */
.cart-endereco-input--edit {
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--primary) !important;
  cursor:text !important;
  font-weight:600;
}
.cart-endereco-input--edit:focus {
  outline:none;
  box-shadow:0 0 0 3px rgba(201,168,76,0.18);
}
.cart-endereco-input--erro { border-color:#e53935 !important; }
.cart-endereco-erro {
  display:flex; align-items:center; gap:0.3rem;
  color:#c62828; font-size:0.7rem; margin-top:0.15rem;
}
/* Resumo */
.cart-summary { flex-shrink:0; padding:0.9rem 1.4rem 1.4rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:0.55rem; background:var(--surface); }
.cart-summary-row { display:flex; justify-content:space-between; align-items:center; font-size:0.85rem; color:var(--text-muted); }
.cart-total-row { font-size:0.95rem; color:var(--text); padding-top:0.4rem; border-top:1px solid var(--border); margin-top:0.2rem; }
.cart-total-row strong { font-family:var(--font-heading); font-size:1.3rem; color:var(--primary); }
.cart-checkout-btn { margin-top:0.35rem; }
/* Botão "Continuar Comprando" — visível no fundo claro do carrinho */
.cart-summary .btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cart-summary .btn-ghost:hover {
  background: var(--bg-alt);
  color: var(--text);
  border-color: var(--primary);
}

/* ============================================================
   MODAL DE PRODUTO
   ============================================================ */
.product-modal {
  position:fixed; inset:0; z-index:700;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem; pointer-events:none; opacity:0;
}
.product-modal.open { pointer-events:all; opacity:1; }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:695; backdrop-filter:blur(3px); }
.modal-overlay.visible { display:block; }
.modal-inner {
  position:relative; background:var(--surface); border-radius:10px; max-width:820px; width:100%;
  max-height:90vh; overflow:hidden; display:grid; grid-template-columns:1fr 1fr;
  box-shadow:0 24px 70px rgba(0,0,0,0.28);
}
.modal-img-wrap { background:var(--bg-alt); display:flex; align-items:center; justify-content:center; min-height:340px; overflow:hidden; }
.modal-img-wrap img { width:100%; height:100%; max-height:480px; object-fit:contain; object-position:center; padding:2rem; filter:drop-shadow(0 4px 14px rgba(0,0,0,0.10)); }
.modal-details {
  padding:2.2rem; overflow-y:auto; display:flex; flex-direction:column; gap:0.75rem;
  /* Permite rolar a descrição longa dentro do modal */
  max-height:90vh;
}
.modal-close { position:absolute; top:0.9rem; right:0.9rem; z-index:5; background:rgba(0,0,0,0.45); color:#fff; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.modal-close:hover { background:rgba(0,0,0,0.75); }
.modal-cat { font-size:0.65rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--primary); }
.modal-name { font-size:1.55rem; color:var(--text); line-height:1.2; }
.modal-unit { font-size:0.82rem; color:var(--text-muted); }
.modal-desc {
  font-size:0.92rem; color:var(--text-muted); line-height:1.75; flex:1;
  white-space:pre-line;
}
.modal-price { font-family:var(--font-heading); font-size:1.9rem; font-weight:700; color:var(--primary); }
/* Badge disponível/esgotado no modal */
.modal-stock {
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size:0.78rem; font-weight:700; padding:0.3rem 0.8rem;
  border-radius:20px; letter-spacing:0.04em;
}
.modal-stock--in {
  background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7;
}
.modal-stock--out {
  background:#fff5f5; color:#c62828; border:1px solid #ffcdd2;
}
/* Botão desabilitado (esgotado) */
.btn-disabled-out {
  background:#bdbdbd !important; cursor:not-allowed !important;
  opacity:0.75; pointer-events:none;
}

/* ============================================================
   MODAL MERCADO PAGO
   ============================================================ */
.mp-payment-modal { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:1rem; }
.mp-payment-modal.active { display:flex; }
.mp-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); }
.mp-modal-inner { position:relative; z-index:1; background:var(--surface); border-radius:10px; width:100%; max-width:820px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.28); animation:mpSlideIn 0.3s ease; }
@keyframes mpSlideIn { from{opacity:0;transform:translateY(22px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.mp-modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.5rem; border-bottom:1px solid var(--border); background:var(--bg-alt); border-radius:10px 10px 0 0; position:sticky; top:0; z-index:2; }
.mp-modal-header h2 { font-size:1.05rem; font-weight:600; color:var(--text); display:flex; align-items:center; gap:0.5rem; margin:0; }
.mp-modal-header h2 i { color:var(--primary); }
.mp-modal-close { background:none; border:none; font-size:1.2rem; color:var(--text-muted); cursor:pointer; padding:0.3rem 0.45rem; border-radius:6px; transition:background 0.2s,color 0.2s; }
.mp-modal-close:hover { background:var(--border); color:var(--text); }
.mp-modal-body { padding:1.3rem; display:flex; flex-direction:column; gap:1.3rem; }
.mp-resumo-section h3,.mp-payer-section h3,.mp-methods-section h3 { font-size:0.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.12em; margin-bottom:0.85rem; }
.mp-resumo-body { display:flex; flex-direction:column; gap:0.4rem; }
.mp-resumo-item { display:flex; justify-content:space-between; align-items:baseline; font-size:0.85rem; color:var(--text); gap:0.5rem; }
.mp-total-row { font-size:0.95rem; padding-top:0.4rem; }
.mp-total-row strong { color:var(--primary); font-size:1.05rem; }
.mp-divider { border:none; border-top:1px solid var(--border); margin:0.4rem 0; }
.mp-gratis-badge { background:#e8f5e9; color:#2e7d32; font-size:0.65rem; font-weight:700; padding:0.12rem 0.45rem; border-radius:20px; }
.mp-payer-grid { display:flex; flex-direction:column; gap:0.75rem; }
.mp-methods-tabs { display:flex; gap:0.75rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.mp-method-btn { display:flex; flex-direction:column; align-items:center; gap:0.25rem; padding:0.75rem 1.4rem; border:1px solid var(--border); border-radius:6px; background:var(--surface); cursor:pointer; transition:all 0.22s; font-size:0.78rem; color:var(--text-muted); text-align:center; }
.mp-method-btn i { font-size:1.3rem; }
.mp-method-btn:hover { border-color:var(--primary); background:var(--bg-alt); }
.mp-method-btn.active { border-color:var(--primary); background:var(--bg-alt); color:var(--primary); }
.mp-method-btn.active i { color:var(--primary); }
.mp-payment-area { margin-top:0.4rem; }
.mp-gerar-btn { width:100%; padding:0.85rem; font-size:0.9rem; gap:0.55rem; justify-content:center; border-radius:6px; }
.mp-loading { text-align:center; padding:1.4rem; font-size:0.88rem; color:var(--text-muted); display:flex; align-items:center; justify-content:center; gap:0.5rem; }
.mp-error { background:#fff5f5; border:1px solid #ffcdd2; border-radius:6px; padding:0.9rem; color:#c62828; font-size:0.82rem; }
.mp-pix-box { text-align:center; display:flex; flex-direction:column; align-items:center; gap:0.75rem; }
.mp-pix-title { font-weight:700; font-size:0.95rem; color:#32BCAD; display:flex; align-items:center; gap:0.4rem; }
.mp-pix-valor { font-size:0.9rem; color:var(--text); }
.mp-qr-img { width:200px; height:200px; border:2px solid var(--border); border-radius:8px; padding:0.5rem; background:#fff; display:block; }
.mp-pix-hint { font-size:0.78rem; color:var(--text-muted); }
.mp-pix-code-wrap { display:flex; flex-direction:column; gap:0.35rem; width:100%; }
.mp-pix-code { font-family:monospace; font-size:0.65rem; border:1px solid var(--border); border-radius:6px; padding:0.55rem; background:var(--bg-alt); resize:none; color:var(--text); width:100%; }
.mp-pix-instrucoes { text-align:left; width:100%; margin:0; padding:0.75rem 1rem; background:var(--bg-alt); border-radius:8px; border:1px solid var(--border); list-style:none; display:flex; flex-direction:column; gap:0.35rem; }
.mp-pix-instrucoes li { font-size:0.8rem; color:var(--text); display:flex; align-items:center; gap:0.5rem; }
.mp-pix-instrucoes li i { color:var(--primary); flex-shrink:0; }
.mp-pix-confirmacao { width:100%; margin-top:0.25rem; }
.mp-gratis-badge { background:#e8f5e9; color:#2e7d32; font-size:0.72rem; font-weight:700; padding:0.15rem 0.45rem; border-radius:4px; }
.mp-pix-id,.mp-pix-exp { font-size:0.72rem; color:var(--text-muted); }
.mp-pix-status { display:flex; align-items:center; gap:0.5rem; font-size:0.8rem; color:var(--text-muted); padding:0.55rem 0.75rem; background:var(--bg-alt); border-radius:6px; border:1px solid var(--border); flex-wrap:wrap; justify-content:center; }
.mp-status-ok { color:#2e7d32; font-weight:700; display:flex; align-items:center; gap:0.3rem; }
.mp-status-err { color:#c62828; font-weight:700; display:flex; align-items:center; gap:0.3rem; }
.mp-checkout-box { display:flex; flex-direction:column; gap:0.9rem; }
.mp-checkout-btn { text-align:center; gap:0.5rem; justify-content:center; text-decoration:none; border-radius:6px; padding:0.85rem; font-size:0.9rem; }
.mp-security-badges { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.9rem; padding-top:0.9rem; border-top:1px solid var(--border); }
.mp-security-badges span { font-size:0.7rem; color:var(--text-muted); display:flex; align-items:center; gap:0.3rem; }
.mp-security-badges i { font-size:0.8rem; color:#2e7d32; }
.mp-endereco-resumo { display:flex; gap:0.5rem; align-items:flex-start; color:var(--text-muted); font-size:0.78rem; }
.mp-endereco-resumo i { color:var(--primary); font-size:0.82rem; flex-shrink:0; margin-top:0.1rem; }
.mp-endereco-pre { font-family:var(--font-body); font-size:0.78rem; white-space:pre-wrap; margin:0; color:var(--text); line-height:1.5; }

/* ============================================================
   TOAST
   ============================================================ */
.toast-container {
  position:fixed; bottom:2rem; right:2rem; z-index:9999;
  display:flex; flex-direction:column-reverse; gap:0.7rem;
  pointer-events:none;
}
.toast {
  background:var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:0.85rem 1.1rem;
  box-shadow:0 6px 24px var(--shadow); font-size:0.84rem; max-width:300px;
  display:flex; align-items:center; gap:0.65rem;
  animation:toastIn 0.28s ease; color:var(--text); pointer-events:all;
}
@keyframes toastIn { from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:translateX(0)} }
.toast.success { border-left:3px solid #4CAF50; }
.toast.error   { border-left:3px solid #c62828; }
.toast.info    { border-left:3px solid var(--primary); }
.toast.warning { border-left:3px solid #FF9800; }
.toast i { font-size:1rem; }
.toast.success i { color:#4CAF50; }
.toast.error   i { color:#c62828; }
.toast.info    i { color:var(--primary); }
.toast.warning i { color:#FF9800; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1280px) {
  .products-grid,.featured-grid,.cat-section .products-grid,#productGrid>.products-grid { grid-template-columns:repeat(3,1fr) !important; gap:1.3rem; }
}
@media (max-width:1024px) {
  .historia-grid { grid-template-columns:1fr; gap:3rem; }
  .historia-img-wrapper img { height:340px; }
  .contato-grid { grid-template-columns:1fr; gap:3rem; }
  .products-grid,.featured-grid,.cat-section .products-grid,#productGrid>.products-grid { grid-template-columns:repeat(3,1fr) !important; }
  .catalog-toolbar { flex-direction:column; align-items:stretch; }
  .catalog-search-wrap { width:100%; }
  /* Hero tablet */
  .hero-content { width:58%; padding:6rem 2rem 5rem 3rem; }
}
@media (max-width:768px) {
  .main-nav { display:none; }
  .hamburger { display:flex; }
  /* Hero mobile: texto embaixo, gradiente de baixo pra cima */
  .hero { align-items:flex-end; }
  .hero-bg::after {
    background: linear-gradient(
      to top,
      rgba(8,4,1,0.95) 0%,
      rgba(8,4,1,0.72) 38%,
      rgba(8,4,1,0.22) 68%,
      transparent 100%
    );
  }
  .hero-content {
    width: 100%;
    max-width: 100%;
    padding: 2.5rem 1.4rem 3.5rem 1.4rem;
  }
  .hero-stats { flex-direction:row; gap:0; }
  .hero-stat { padding-right:1.4rem; margin-right:1.4rem; }
  .products-grid,.featured-grid,.cat-section .products-grid,#productGrid>.products-grid { grid-template-columns:repeat(2,1fr) !important; gap:1rem; }
  .testimonials-grid { grid-template-columns:repeat(2,1fr); gap:1.1rem; }
  .modal-inner { grid-template-columns:1fr; max-height:92vh; overflow-y:auto; }
  .modal-img-wrap { min-height:200px; max-height:240px; }
  .modal-img-wrap img { min-height:180px; max-height:240px; }
  .modal-details { max-height:none; overflow-y:visible; padding:1.5rem; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; padding:3rem 0; }
}
@media (max-width:480px) {
  .products-grid,.featured-grid,.cat-section .products-grid,#productGrid>.products-grid { grid-template-columns:repeat(2,1fr) !important; gap:0.65rem; }
  .product-card-body { padding:0.75rem 0.85rem 0.9rem; }
  .product-title { font-size:0.9rem; }
  .product-price { font-size:1.2rem; }
  .btn-add-cart { padding:0.42rem 0.65rem; font-size:0.75rem; }
  .hero-title { font-size:2.4rem; }
  .hero-ctas { flex-direction:column; }
  .hero-ctas .btn { width:100%; justify-content:center; }
  .hero-stats { flex-direction:column; gap:0.8rem; }
  .hero-stat { border-right:none; padding-right:0; margin-right:0; border-bottom:1px solid rgba(255,255,255,0.12); padding-bottom:0.8rem; margin-bottom:0; }
  .hero-stat:last-child { border-bottom:none; }
  .cart-sidebar { width:100%; right:-100%; }
  .testimonials-grid { grid-template-columns:1fr; }
  .mp-methods-tabs { flex-direction:column; }
}