/* ============================================================
   GMPerfumes — Design tokens
   Verde-floresta (logo) + dourado quente + creme.
   Mobile-first. Robust gourmet (Bodoni Moda + Manrope).
   ============================================================ */
:root{
  color-scheme: light;

  /* Backgrounds — warm cream */
  --bg:           oklch(97% 0.012 95);
  --bg-2:         oklch(94.5% 0.018 95);
  --bg-3:         oklch(91% 0.022 90);
  --card:         #fff;

  /* Green family — from logo (dark forest) to tints */
  --green-950:    oklch(16% 0.035 165);
  --green-900:    oklch(22% 0.045 165);
  --green-800:    oklch(28% 0.055 162);
  --green-700:    oklch(36% 0.07 160);
  --green-500:    oklch(50% 0.10 160);
  --green-200:    oklch(88% 0.04 160);
  --green-50:     oklch(96% 0.018 160);

  /* Gold family */
  --gold:         oklch(74% 0.13 82);
  --gold-deep:    oklch(60% 0.13 78);
  --gold-soft:    oklch(88% 0.06 85);

  /* Type */
  --ink:          oklch(18% 0.02 90);
  --ink-2:        oklch(38% 0.018 90);
  --ink-3:        oklch(56% 0.015 90);
  --line:         oklch(86% 0.018 90);
  --line-2:       oklch(78% 0.02 90);

  /* Status */
  --sale:         oklch(50% 0.18 25);
  --whats:        #1FAB58;

  /* Type families */
  --serif: "DM Serif Display", "Times New Roman", Georgia, serif;
  --sans:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 28px; --sp-7: 40px; --sp-8: 56px;
  --sp-9: 80px;

  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 18px;
  --shadow-1:  0 1px 2px rgba(10,40,30,.06);
  --shadow-2:  0 6px 18px -8px rgba(10,40,30,.18), 0 2px 4px rgba(10,40,30,.05);
  --shadow-3:  0 24px 48px -24px rgba(10,40,30,.30);

  --ease: cubic-bezier(.2,.7,.2,1);

  /* Layout */
  --header-h: 112px;        /* promo + header on mobile */
  --bottom-nav-h: 64px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:clip;
  width:100%;
  max-width:100%;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}

body{padding-bottom: var(--bottom-nav-h);}
@media (min-width: 900px){
  body{padding-bottom:0}
}

/* Utility */
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}
@media (min-width: 760px){ .wrap{padding:0 32px} }

.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.serif{font-family:var(--serif)}
h1,h2,h3{font-family:var(--serif);letter-spacing:-.005em;color:var(--ink)}
h1{font-size:clamp(28px,5vw,52px);line-height:1.05}
h2{font-size:clamp(22px,3vw,36px);line-height:1.1}
h3{font-size:clamp(17px,1.6vw,22px);line-height:1.15}

/* ============================================================
   Promo bar (entrega 15h00)
   ============================================================ */
.promo{
  background:var(--green-950);color:var(--gold);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;
  padding:9px 0;overflow:hidden;position:relative;
}
.promo-track{display:flex;gap:48px;white-space:nowrap;animation:marquee 32s linear infinite;width:max-content}
.promo-track span{display:inline-flex;align-items:center;gap:12px}
.promo-track i{width:4px;height:4px;background:var(--gold);border-radius:50%}
.promo-track strong{color:#fff;font-weight:600}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   Header
   ============================================================ */
.header{
  position:sticky;top:0;z-index:50;
  background:var(--green-900);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 8px 24px -16px rgba(0,0,0,.4);
}
.header-top{display:flex;align-items:center;gap:10px;padding:10px 16px;min-width:0;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0;overflow:hidden}
.brand-mark{
  width:36px;height:36px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--green-700), var(--green-950));
  border:1.5px solid var(--gold);
  display:flex;align-items:center;justify-content:center;flex:0 0 36px;
  box-shadow:0 0 0 2px rgba(0,0,0,.2) inset, 0 4px 8px rgba(0,0,0,.3);
}
.brand-mark svg{width:22px;height:22px}
.brand-text{display:flex;flex-direction:column;line-height:1;min-width:0;overflow:hidden}
.brand-text .nm{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.brand-text .sb{font-family:var(--mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.search{
  flex:1 1 0;min-width:0;display:flex;align-items:center;gap:8px;
  background:#fff;border-radius:999px;padding:0 14px;height:42px;
  color:var(--ink);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  position:relative;
}
.search svg{width:18px;height:18px;stroke:var(--ink-2);fill:none;stroke-width:1.6;flex:0 0 18px}
.search input{flex:1;background:transparent;border:0;outline:none;font-size:14px;min-width:0}
.search input::placeholder{color:var(--ink-3)}
.search .cam{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--green-700);flex:0 0 32px}
.search .cam svg{stroke:currentColor;width:18px;height:18px}

.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border: 1px solid var(--line);
  z-index: 1000;
  overflow: hidden;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}
.suggestion-header {
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  text-align: left;
}
.suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.2s;
  text-align: left;
}
.suggestion-item:hover {
  background: var(--bg-2);
}
.suggestion-item img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 2px;
}
.suggestion-item .placeholder-svg {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.suggestion-info {
  display: flex;
  flex-direction: column;
}
.suggestion-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.suggestion-brand {
  font-size: 9.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  font-family: var(--mono);
  margin-top: 1px;
}
.suggestion-price {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green-700);
}
.suggestion-empty {
  font-size: 13px;
  color: var(--ink-3);
  padding: 12px 16px;
  text-align: center;
}

.cart-btn,
.header .account-btn{
  position:relative;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);
  color:var(--gold);flex:0 0 42px;
}
.header .account-btn{margin-right:0}
.cart-btn:hover{background:rgba(255,255,255,.14)}
.cart-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}
.cart-count{
  position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 5px;
  background:var(--sale);color:#fff;border-radius:999px;
  font-family:var(--mono);font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--green-900);
  transform:scale(0);transition:transform .35s var(--ease);
}
.cart-count.show{transform:scale(1)}

/* Location strip below header */
.loc{
  display:flex;align-items:center;gap:6px;padding:0 16px 8px;font-size:12px;color:rgba(255,255,255,.78);
  flex-wrap:wrap;min-width:0;
}
.loc svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:1.6;flex:0 0 14px}
.loc strong{color:#fff;font-weight:600}
.loc .ddl{margin-left:auto;color:var(--gold);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:4px;flex-shrink:0}
.loc .ddl::before{content:"";width:6px;height:6px;background:var(--gold);border-radius:50%;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes gmFadeIn{from{opacity:0}to{opacity:1}}
@keyframes gmPop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}

/* Category chips (horizontal scroller) */
.chips{
  display:flex;gap:6px;padding:0 12px 10px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;scroll-snap-align:start;
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.85);
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
  border:1px solid rgba(255,255,255,.06);
  transition:all .25s var(--ease);
  white-space:nowrap;
}
.chip:hover{background:rgba(255,255,255,.14)}
.chip.active{background:var(--gold);color:var(--green-950);border-color:var(--gold)}
.chip .dot{width:5px;height:5px;border-radius:50%;background:var(--gold)}
.chip.active .dot{background:var(--green-900)}

/* ============================================================
   Section heading
   ============================================================ */
.section{padding: 20px 0}
@media (min-width: 760px){ .section{padding:32px 0} }
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 16px;margin-bottom:14px}
@media (min-width: 760px){ .sec-head{padding:0 32px} }
.sec-head h2{font-size:clamp(20px,2.4vw,28px)}
.sec-head h2 em{font-style:italic;color:var(--green-700)}
.sec-head .more{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-700);font-weight:600;display:inline-flex;align-items:center;gap:6px;
}
.sec-head .more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ============================================================
   Hero banner — compact
   ============================================================ */
.hero{
  margin:12px 16px 4px;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(110deg, var(--green-950) 0%, var(--green-800) 60%, var(--green-700) 100%);
  position:relative;color:#fff;
}
@media (min-width: 760px){ .hero{margin:16px 32px 4px} }
.hero-inner{
  display:flex;align-items:center;gap:12px;
  padding:18px 18px;min-height:148px;position:relative;z-index:2;
}
.hero-copy{flex:1;min-width:0}
.hero-tag{
  display:inline-block;background:var(--gold);color:var(--green-950);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  padding:4px 9px;border-radius:4px;margin-bottom:8px;
}
.hero h1{
  font-family:var(--serif);font-style:italic;color:#fff;
  font-size:clamp(22px,4.6vw,34px);line-height:1.08;letter-spacing:-.01em;margin-bottom:6px;font-weight:500;
}
.hero h1 em{color:var(--gold);font-style:italic}
.hero p{color:rgba(255,255,255,.78);font-size:12.5px;max-width:34ch;margin-bottom:12px;line-height:1.45}
.hero .cta{
  display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:var(--green-950);
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:10px 16px;border-radius:999px;
}
.hero .cta:hover{background:#fff}
.hero .cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.hero-art{
  width:96px;height:118px;flex:0 0 96px;position:relative;
}
.hero-art svg{width:100%;height:100%}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 80% at 90% 50%, rgba(212,175,55,.22), transparent 70%),
    radial-gradient(40% 60% at 10% 110%, rgba(212,175,55,.10), transparent 70%);
  pointer-events:none;
}
@media (min-width: 760px){
  .hero-inner{padding:32px 36px;min-height:240px}
  .hero-art{width:200px;height:240px;flex-basis:200px}
  .hero p{font-size:14.5px;max-width:42ch}
}

/* ============================================================
   Ofertas Relâmpago strip
   ============================================================ */
.flash{
  margin:8px 16px;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(95deg, var(--gold) 0%, var(--gold-deep) 100%);
  color:var(--green-950);padding:10px 14px;
  display:flex;align-items:center;gap:10px;justify-content:space-between;
}
@media (min-width: 760px){ .flash{margin:8px 32px} }
.flash .lab{font-family:var(--serif);font-style:italic;font-size:18px;display:flex;align-items:center;gap:8px}
.flash .lab svg{width:16px;height:16px;fill:currentColor}
.flash .timer{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-weight:700}
.flash .timer span{
  background:var(--green-950);color:var(--gold);padding:5px 7px;border-radius:5px;
  font-size:13px;min-width:30px;text-align:center;display:inline-block;
}
.flash .timer i{font-style:normal;font-size:14px;color:var(--green-950);font-weight:800}

/* ============================================================
   Product grid + cards
   ============================================================ */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 16px}
@media (min-width: 600px){ .grid{grid-template-columns:repeat(3,1fr);gap:14px} }
@media (min-width: 900px){ .grid{grid-template-columns:repeat(4,1fr);gap:16px;padding:0 32px} }
@media (min-width: 1200px){ .grid{grid-template-columns:repeat(5,1fr)} }

/* Horizontal scroll variant */
.hscroll{
  display:flex;gap:10px;padding:0 16px 6px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.hscroll::-webkit-scrollbar{display:none}
.hscroll > *{flex:0 0 60%;scroll-snap-align:start;max-width:240px;min-width:160px}
@media (min-width: 600px){ .hscroll > *{flex-basis:32%} }
@media (min-width: 900px){ .hscroll{padding:0 32px 6px} .hscroll > *{flex-basis:22%} }

.card{
  background:var(--card);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  border:1px solid var(--line);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}

.card-media{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:#f7f3ee; /* fundo padronizado fixo — sem cor dinâmica por imagem */
}
/* Skeleton/shimmer enquanto a imagem carrega — some no onload (.media-loaded).
   aspect-ratio acima já reserva o espaço (evita layout shift). */
.card-media::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,#f7f3ee 30%,#efe9dd 50%,#f7f3ee 70%);
  background-size:200% 100%;
  animation:gmSkeleton 1.2s ease-in-out infinite;
}
.card-media.media-loaded::before{animation:none;opacity:0}
@keyframes gmSkeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){ .card-media::before{animation:none} }

/* ----- Skeleton de CARD (mostrado na hora, antes dos dados carregarem) -----
   A moldura da seção aparece instantânea com shimmer; nunca em branco. */
.skel-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.skel-card .skel-img{aspect-ratio:1/1;background:linear-gradient(100deg,#f0f0f0 30%,#e7e7e7 50%,#f0f0f0 70%);background-size:200% 100%;animation:gmSkeleton 1.2s ease-in-out infinite}
.skel-card .skel-body{padding:12px;display:flex;flex-direction:column;gap:8px}
.skel-card .skel-line{height:9px;border-radius:4px;background:#ececec;animation:gmSkeleton 1.2s ease-in-out infinite;background-image:linear-gradient(100deg,#efefef 30%,#e4e4e4 50%,#efefef 70%);background-size:200% 100%}
.skel-card .skel-line.short{width:42%}
.skel-card .skel-line.med{width:72%}
@media (prefers-reduced-motion: reduce){ .skel-card .skel-img,.skel-card .skel-line{animation:none} }
/* swap sem z-index explícito: como o ::before é o primeiro filho, ele pinta
   abaixo do swap; badge/wish (depois na árvore) seguem acima da imagem. */
.card-media .swap{position:absolute;inset:0;transition:opacity .55s var(--ease)}
.card-media .swap svg, .card-media .swap img{width:100%;height:100%;object-fit:contain;padding:8px}
/* Fade-in suave da imagem ao terminar de carregar (onload adiciona .media-loaded).
   A imagem começa transparente sobre o skeleton e aparece sem "pulo". */
.card-media .swap img{opacity:0;transition:opacity .4s ease}
.card-media.media-loaded .swap img{opacity:1}
/* Only swap when card has the `has-hover` flag */
.card.has-hover .card-media .img-b{opacity:0}
.card.has-hover:hover .card-media .img-a{opacity:0}
.card.has-hover:hover .card-media .img-b{opacity:1}
.card:not(.has-hover) .card-media .img-b{display:none}

.badge{
  position:absolute;top:8px;left:8px;z-index:2;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:4px 8px;border-radius:4px;background:var(--sale);color:#fff;
}
.badge.new{background:var(--green-700);color:#fff}
.badge.top{background:var(--gold);color:var(--green-950)}

.wish{
  position:absolute;top:6px;right:6px;z-index:2;width:30px;height:30px;
  background:rgba(255,255,255,.92);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 4px rgba(0,0,0,.06);
}
.wish svg{width:15px;height:15px;stroke:var(--ink-2);fill:none;stroke-width:1.5}
.wish.on svg{fill:var(--sale);stroke:var(--sale)}

.card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.card-brand{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-700);font-weight:700}
.card-name{font-family:var(--serif);font-size:15.5px;line-height:1.15;color:var(--ink);margin-top:2px}
.card-vol{font-size:11px;color:var(--ink-3);font-weight:500}
.card-prices{margin-top:6px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price{font-family:var(--sans);font-size:18px;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.price-cents{font-size:11px;vertical-align:super;font-weight:600;letter-spacing:0}
.was{font-size:11px;color:var(--ink-3);text-decoration:line-through;font-weight:500}
.off{
  background:var(--green-50);color:var(--green-800);
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:2px 6px;border-radius:4px;
}
.card-foot{
  margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.installments{font-size:10.5px;color:var(--green-700);font-weight:600}
.free-ship{font-size:10.5px;color:var(--green-700);font-weight:700;letter-spacing:.01em}
.add{
  width:48px;height:48px;border-radius:50%;
  background:var(--green-900);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 48px;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:transform .1s, box-shadow .1s, background .25s var(--ease), color .25s var(--ease);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.add:hover{background:var(--gold);color:var(--green-950)}
.add:active{transform:scale(.92);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.add.added{background:var(--gold);color:var(--green-950)}
.add svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
@media (max-width: 767px){
  .add{width:52px;height:52px;flex:0 0 52px}
  .add svg{width:22px;height:22px}
}

.btn-wa-small {
  background: var(--whats);
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  width: 100%;
  justify-content: center;
  transition: all .25s var(--ease);
}
.btn-wa-small:hover {
  background: #178b47;
  transform: translateY(-1px);
}
.btn-wa-small svg {
  width: 14px;
  height: 14px;
}
.card.out-of-stock .card-media img, .card.out-of-stock .card-media svg {
  opacity: 0.6;
  filter: grayscale(100%);
}

/* ============================================================
   Brand strip (round avatars, scrollable)
   ============================================================ */
.brand-strip{display:flex;gap:14px;padding:8px 16px 16px;overflow-x:auto;scrollbar-width:none}
.brand-strip::-webkit-scrollbar{display:none}
@media (min-width: 760px){ .brand-strip{padding:8px 32px 16px} }
.brand-card{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;
  width:78px;text-align:center;
}
.brand-card .av{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(160deg, var(--green-900), var(--green-800));
  border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold);
  box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease);
}
.brand-card:hover .av{transform:scale(1.04)}
.brand-card .nm{font-size:11px;font-weight:600;color:var(--ink);line-height:1.15}
.brand-card .ct{font-size:10px;color:var(--ink-3)}

/* Highlighted brand block (Lattafa feature) */
.brand-feat{
  margin:10px 16px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--green-950), var(--green-800));
  color:#fff;padding:18px 18px 14px;position:relative;overflow:hidden;
}
@media (min-width: 760px){ .brand-feat{margin:10px 32px;padding:32px} }
.brand-feat::before{
  content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  border-radius:50%;background:radial-gradient(circle, rgba(212,175,55,.15), transparent 60%);
}
.brand-feat .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;position:relative;z-index:2}
.brand-feat .top h2{color:#fff;font-style:italic;font-size:24px}
.brand-feat .top h2 em{color:var(--gold);font-style:italic}
.brand-feat .top .more{color:var(--gold)}
.brand-feat .hscroll{margin:0 -18px;padding:0 18px 10px}
@media (min-width: 760px){ .brand-feat .hscroll{margin:0 -32px;padding:0 32px 10px} }

.scroll-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--ink-2);
  transition: all .25s var(--ease);
}
.scroll-btn:hover {
  background: var(--card);
  color: var(--ink);
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.scroll-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.brand-feat .lat-btn {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
  color: #fff;
}
.brand-feat .lat-btn:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* ============================================================
   Benefits row (mobile horizontal scroll)
   ============================================================ */
.benefits{display:flex;gap:10px;padding:8px 16px 16px;overflow-x:auto;scrollbar-width:none}
.benefits::-webkit-scrollbar{display:none}
@media (min-width: 760px){
  .benefits{padding:8px 32px 16px;display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;gap:14px}
}
.benefit{
  flex:0 0 78%;max-width:280px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;display:flex;align-items:flex-start;gap:12px;
}
@media (min-width: 760px){ .benefit{flex:1;max-width:none} }
.benefit .ic{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;
  background:var(--green-50);color:var(--green-700);
  display:flex;align-items:center;justify-content:center;
}
.benefit .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.benefit .tx h3{font-family:var(--serif);font-size:15px;color:var(--ink);margin-bottom:2px}
.benefit .tx p{font-size:12px;color:var(--ink-2);line-height:1.45}

/* ============================================================
   Franca delivery strip
   ============================================================ */
.franca{
  margin:14px 16px;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--green-950);color:#fff;position:relative;
  padding:24px 20px;
}
@media (min-width: 760px){ .franca{margin:14px 32px;padding:40px} }
.franca::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 90% 10%, rgba(212,175,55,.18), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(46, 110, 80,.5), transparent 60%);
  pointer-events:none;
}
.franca-inner{position:relative;display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
@media (min-width: 760px){ .franca-inner{grid-template-columns:1.2fr .8fr;gap:48px} }
.franca .eyebrow{color:var(--gold);font-weight:600}
.franca h2{color:#fff;font-style:italic;margin-top:8px;font-size:clamp(22px,4vw,34px)}
.franca h2 em{color:var(--gold);font-style:italic}
.franca p{color:rgba(255,255,255,.72);margin-top:10px;font-size:13.5px;line-height:1.6;max-width:44ch}
.franca-stats{
  margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
}
.franca-stats div .num{font-family:var(--serif);font-size:22px;color:var(--gold);display:block;line-height:1;font-style:italic}
.franca-stats div .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:5px;display:block}
.clock-mini{
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);padding:18px;text-align:center;
}
.clock-mini .tick{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;font-weight:600}
.clock-mini .big{font-family:var(--serif);font-size:64px;color:var(--gold);line-height:1;font-style:italic;margin:6px 0}
.clock-mini .sub{font-size:11px;color:rgba(255,255,255,.6);line-height:1.4}

/* ============================================================
   Footer (compact for mobile, expands for desktop)
   ============================================================ */
.footer{
  background:var(--green-950);color:rgba(255,255,255,.7);
  padding:32px 0 24px;margin-top:24px;
}
.footer-grid{display:grid;grid-template-columns:1fr;gap:24px;padding:0 16px}
@media (min-width: 760px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;padding:0 32px;gap:40px} }
.footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:600}
.footer a{display:block;padding:5px 0;font-size:13.5px;color:rgba(255,255,255,.65)}
.footer a:hover{color:var(--gold)}
.footer .br{font-family:var(--serif);font-style:italic;font-size:26px;color:#fff;}
.footer .br + p{margin-top:8px;font-size:13px;line-height:1.6;max-width:36ch;color:rgba(255,255,255,.6)}
.footer-bot{
  margin-top:24px;padding:18px 16px 0;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4)
}
@media (min-width: 760px){ .footer-bot{padding:18px 32px 0} }
.pay-row{display:flex;gap:6px;flex-wrap:wrap}
.pay-row span{padding:4px 8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:4px;font-size:9px}

/* ============================================================
   Bottom nav (mobile)
   ============================================================ */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--green-900);
  border-top:1px solid rgba(255,255,255,.08);
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:6px 0 max(6px, env(safe-area-inset-bottom));
}
@media (min-width: 900px){ .bottom-nav{display:none} }
/* No mobile a conta vive no bottom-nav → esconde o botão Conta do header (evita duplicar) */
@media (max-width: 899px){ .header .account-btn{display:none !important} }
.bn-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:rgba(255,255,255,.55);font-size:10.5px;font-weight:600;
  padding:6px 0;transition:color .2s var(--ease);position:relative;
}
.bn-item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.bn-item.active{color:var(--gold)}
.bn-item.active::before{
  content:"";position:absolute;top:0;left:30%;right:30%;height:2px;background:var(--gold);border-radius:0 0 3px 3px;
}
.bn-item .bn-badge{
  position:absolute;top:2px;right:calc(50% - 18px);min-width:14px;height:14px;padding:0 4px;
  background:var(--sale);color:#fff;border-radius:999px;font-family:var(--mono);font-size:9px;font-weight:700;
  display:none;align-items:center;justify-content:center;
}
.bn-item .bn-badge.show{display:flex}

/* ============================================================
   Cart drawer
   ============================================================ */
.scrim{position:fixed;inset:0;background:rgba(10,40,30,.55);backdrop-filter:blur(2px);z-index:90;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;height:100dvh;width:min(420px, 100vw);background:var(--bg);
  z-index:100;box-shadow:-24px 0 60px -16px rgba(0,0,0,.4);
  transform:translateX(100%);transition:transform .45s var(--ease);
  display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.drawer-head{
  padding:18px 18px;display:flex;justify-content:space-between;align-items:center;
  background:var(--green-900);color:#fff;
}
.drawer-head .title{font-family:var(--serif);font-style:italic;font-size:22px;display:flex;align-items:baseline;gap:8px}
.drawer-head .title small{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);font-style:normal}
.drawer .close{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff}
.drawer .close:hover{background:rgba(255,255,255,.1)}
.drawer .close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

.cart-banner{
  margin:12px 14px 0;padding:10px 12px;background:var(--green-50);border:1px solid var(--green-200);border-radius:var(--radius);
  display:flex;gap:10px;align-items:flex-start;
}
.cart-banner .icon{width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:var(--green-700);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:700}
.cart-banner .txt{font-size:11.5px;line-height:1.45;color:var(--ink-2)}
.cart-banner .txt strong{color:var(--green-800);display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:2px;font-weight:700}

.cart-items{flex:1;overflow-y:auto;padding:14px 18px}
.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--ink-3);gap:12px;padding:30px}
.cart-empty .glyph{font-family:var(--serif);font-style:italic;font-size:56px;color:var(--green-700);line-height:1;}
.cart-empty p{max-width:24ch;font-size:13px;line-height:1.5}
.cart-item{display:grid;grid-template-columns:72px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-item:last-child{border-bottom:0}
.cart-item .thumb{aspect-ratio:1;background:#f7f3ee;overflow:hidden;border-radius:var(--radius-sm);border:1px solid var(--line)}
.cart-item .thumb svg, .cart-item .thumb img{width:100%;height:100%;object-fit:contain;padding:6px}
.cart-item .name{font-family:var(--serif);font-size:15px;line-height:1.15;}
.cart-item .brand{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-700);margin-bottom:3px;font-weight:700}
.cart-item .qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;margin-top:8px;height:28px}
.cart-item .qty button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-weight:700}
.cart-item .qty span{font-family:var(--mono);font-size:11.5px;min-width:22px;text-align:center;font-weight:600}
.cart-item .right{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;text-align:right;gap:8px}
.cart-item .right .p{font-family:var(--sans);font-size:16px;font-weight:700}
.cart-item .right .rm{font-size:9.5px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.cart-item .right .rm:hover{color:var(--sale)}

.drawer-foot{border-top:1px solid var(--line);padding:14px 18px 16px;background:var(--bg)}
.drawer-foot .row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;font-size:12.5px;color:var(--ink-2)}
.drawer-foot .row.total{padding-top:8px;margin-top:6px;border-top:1px solid var(--line)}
.drawer-foot .row.total .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:700}
.drawer-foot .row.total .val{font-family:var(--sans);font-size:24px;color:var(--green-900);font-weight:800;letter-spacing:-.01em}
.drawer-foot .actions{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.btn-wa{
  background:var(--whats);color:#fff;width:100%;padding:14px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  transition:all .25s var(--ease);
}
.btn-wa:hover{background:#178b47;transform:translateY(-1px)}
.btn-wa svg{width:18px;height:18px;fill:#fff}
.btn-cont{padding:10px;text-align:center;color:var(--ink-3);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.btn-cont:hover{color:var(--ink)}

/* ============================================================
   Toast
   ============================================================ */
.toast{
  position:fixed;left:50%;bottom:calc(var(--bottom-nav-h) + 16px);transform:translate(-50%, 24px);
  background:var(--green-950);color:var(--gold);padding:11px 18px;border-radius:999px;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  display:flex;align-items:center;gap:10px;border:1px solid rgba(212,175,55,.3);
  opacity:0;pointer-events:none;transition:all .35s var(--ease);z-index:120;
  font-family:var(--sans);
  box-shadow:var(--shadow-3);
  max-width:90vw;
}
.toast.show{opacity:1;transform:translate(-50%, 0)}
.toast .dot{width:6px;height:6px;background:var(--gold);border-radius:50%}
@media (min-width: 900px){ .toast{bottom:32px} }

/* ----- Popup ancorado ao carrinho (feedback "adicionado") ----- */
#cartPop{
  position:fixed; z-index:200; max-width:240px;
  background:var(--card,#fff); color:var(--ink,#1a1a1a);
  border:1px solid var(--line,#e7e1d4); border-radius:12px;
  box-shadow:var(--shadow-3, 0 14px 36px -12px rgba(0,0,0,.4));
  padding:12px 32px 12px 14px; font-family:var(--sans);
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
#cartPop.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
#cartPop strong{ display:block; font-size:13px; font-weight:700; line-height:1.2; }
#cartPop span{ display:block; font-size:11.5px; color:var(--ink-2,#7a7468); margin-top:3px; }
#cartPop .cart-pop-x{
  position:absolute; top:5px; right:8px; background:none; border:0;
  font-size:17px; line-height:1; color:var(--ink-3,#a59f92); cursor:pointer; padding:2px;
}
/* seta: quadrado rotacionado na borda, alinhado ao centro do ícone do carrinho */
#cartPop::after{
  content:""; position:absolute; left:var(--arrow-x,50%); margin-left:-6px;
  width:12px; height:12px; background:var(--card,#fff); border:1px solid var(--line,#e7e1d4); transform:rotate(45deg);
}
#cartPop.pop-top::after{ top:-7px; border-right:0; border-bottom:0; }     /* popup abaixo do header → seta p/ cima */
#cartPop.pop-bottom::after{ bottom:-7px; border-left:0; border-top:0; }   /* popup acima da bottom-nav → seta p/ baixo */

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease), transform .55s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   Brand page (marca.html)
   ============================================================ */
.brand-hero{
  background:linear-gradient(140deg, var(--green-950), var(--green-800));
  color:#fff;padding:28px 16px 24px;position:relative;overflow:hidden;
}
@media (min-width: 760px){ .brand-hero{padding:48px 32px 40px} }
.brand-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 90% 20%, rgba(212,175,55,.18), transparent 50%);
}
.brand-hero .crumb{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);display:flex;align-items:center;gap:8px;margin-bottom:14px;position:relative;
}
.brand-hero .crumb a{color:rgba(255,255,255,.55)}
.brand-hero .crumb a:hover{color:var(--gold)}
.brand-hero .crumb span{color:var(--gold)}
.brand-hero-top{display:flex;align-items:center;gap:16px;position:relative;z-index:2}
.brand-seal{
  width:78px;height:78px;border-radius:50%;flex:0 0 78px;
  background:linear-gradient(160deg, var(--green-800), var(--green-950));
  border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;font-size:32px;color:var(--gold);
  box-shadow:inset 0 0 24px rgba(0,0,0,.3);
}
@media (min-width: 760px){ .brand-seal{width:108px;height:108px;flex-basis:108px;font-size:44px} }
/* Ícone (lupa) dentro do selo do hero — usado na página de busca. Herda o dourado. */
.brand-seal .seal-ico{width:42%;height:42%;color:var(--gold);stroke:var(--gold)}
.brand-hero h1{
  font-family:var(--serif);font-style:italic;color:#fff;
  font-size:clamp(32px,6vw,56px);line-height:1;letter-spacing:-.01em;
}
.brand-hero h1 + .meta{color:rgba(255,255,255,.7);font-size:13px;margin-top:6px;display:flex;gap:14px;flex-wrap:wrap}
.brand-hero h1 + .meta span{display:inline-flex;align-items:center;gap:5px}
.brand-hero h1 + .meta i{width:4px;height:4px;background:var(--gold);border-radius:50%}
.brand-hero p.desc{position:relative;z-index:2;color:rgba(255,255,255,.78);font-size:14px;line-height:1.6;margin-top:18px;max-width:60ch}

/* Brand switcher (horizontal scroll) */
.brand-switch-wrap{
  background:#fff;border-bottom:1px solid var(--line);position:sticky;top:var(--header-h);z-index:40;
}
.brand-switch{
  display:flex;gap:8px;padding:10px 16px;overflow-x:auto;scrollbar-width:none;
}
.brand-switch::-webkit-scrollbar{display:none}
@media (min-width: 760px){ .brand-switch{padding:10px 32px} }
.bs-pill{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  height:36px;padding:0 14px;border-radius:999px;
  background:var(--bg-2);color:var(--ink-2);
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
  border:1px solid var(--line);transition:all .25s var(--ease);
  white-space:nowrap;
}
.bs-pill:hover{background:var(--green-50);color:var(--green-800);border-color:var(--green-200)}
.bs-pill.active{background:var(--green-900);color:var(--gold);border-color:var(--green-900)}
.bs-pill .ct{font-family:var(--mono);font-size:10px;opacity:.7;font-weight:500}

/* Filters bar on brand page */
.subfilters{
  display:flex;gap:6px;padding:10px 16px;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line);background:var(--bg);
}
@media (min-width: 760px){ .subfilters{padding:10px 32px} }
.subfilters::-webkit-scrollbar{display:none}
.subfilter{
  flex:0 0 auto;padding:7px 12px;border-radius:999px;
  background:transparent;color:var(--ink-2);
  font-size:12px;font-weight:600;letter-spacing:.01em;
  border:1px solid var(--line);
  transition:all .25s var(--ease);
  white-space:nowrap;
}
.subfilter:hover{border-color:var(--ink-2);color:var(--ink)}
.subfilter.active{background:var(--green-50);color:var(--green-800);border-color:var(--green-700)}
.results-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px 6px;font-size:12.5px;color:var(--ink-3);
}
@media (min-width: 760px){ .results-bar{padding:14px 32px 6px} }
.results-bar strong{color:var(--ink);font-weight:700}
.sort{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-700);font-weight:600;
}
.sort svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* Empty state */
.empty{
  text-align:center;padding:48px 24px;color:var(--ink-3);
}
.empty .g{font-family:var(--serif);font-style:italic;font-size:48px;color:var(--green-700);}
.empty p{margin-top:8px;font-size:13px}

/* "Ver mais" pagination */
.load-more-wrap{text-align:center;margin:32px 16px 8px;padding:0 8px}
@media (min-width:760px){ .load-more-wrap{margin:40px 32px 12px} }
.btn-carregar-mais{
  display:inline-block;padding:14px 40px;background:transparent;border:1.5px solid var(--ink);
  border-radius:32px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);cursor:pointer;transition:all .2s var(--ease);
}
.btn-carregar-mais:hover{background:var(--ink);color:#fff}
.contagem-produtos{margin:10px 0 0;font-size:11.5px;color:var(--ink-3);letter-spacing:.04em}

/* ============================================================
   MOBILE-FIRST (<= 767px) — Header redesenhado
   Prioridade visual: busca > carrinho > perfil > logo
   - Logo: só o ícone (brand-mark), texto MAISON · FRANCA/SP escondido
   - Busca: ocupa o espaço livre, height 44px, font-size 16px (sem zoom iOS)
   - Ícones de ação: mínimo 44x44 (área de toque WCAG)
   ============================================================ */
@media (max-width: 767px){
  html, body { overflow-x: hidden; max-width: 100%; }

  .header-top{
    display:grid;
    grid-template-columns:auto 1fr auto auto;
    align-items:center;
    gap:8px;
    padding:10px 16px;
  }
  .brand{gap:0;flex:0 0 auto;min-width:0}
  .brand-text{display:none}
  .brand-mark{width:36px;height:36px;flex:0 0 36px}

  .search{
    min-width:0;
    height:44px;
    border-radius:22px;
    padding:0 12px;
    gap:8px;
  }
  .search input{font-size:16px}
  .search input::placeholder{font-size:14px}
  .search svg{width:18px;height:18px;flex:0 0 18px}
  .search .cam{width:36px;height:36px;flex:0 0 36px}
  .search .cam svg{width:18px;height:18px}

  .header .account-btn,
  .cart-btn{
    width:44px;height:44px;flex:0 0 44px;
    display:flex;align-items:center;justify-content:center;
    margin-right:0;
  }
  .header .account-btn svg,
  .cart-btn svg{width:20px;height:20px}

  .loc{
    padding:4px 16px 6px;
    font-size:12px;
    gap:5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .loc .ddl{font-size:10px}
  .chips{padding:0 16px 10px}
  .chip{height:30px;padding:0 12px;font-size:12px}
  .promo{font-size:10px;letter-spacing:.12em}

  /* Padding mínimo 16px nas seções principais */
  .grid{gap:12px;padding:0 16px}
  .sec-head{padding:0 16px}
  .section{padding:20px 0}
}

/* Viewports muito estreitas (≤340px) — apertam menos, mantém toque */
@media (max-width: 340px){
  .header-top{padding:9px 10px;gap:6px}
  .brand-mark{width:32px;height:32px;flex:0 0 32px}
  .hero-inner{padding:14px 14px;gap:8px;min-height:130px}
  .hero h1{font-size:20px}
  .hero p{font-size:11.5px}
  .hero-art{width:80px;height:100px;flex:0 0 80px}
  .grid{gap:8px;padding:0 12px}
  .sec-head{padding:0 12px}
  .section{padding:16px 0}
  .franca-stats div .num{font-size:18px}
  .clock-mini .big{font-size:48px}
}

/* Garante que nada pode crescer além do viewport via min-content intrinsic */
img, video, iframe, canvas, svg{max-width:100%;height:auto}

/* Acessibilidade: respeitar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
.hero img, .card-media img, .card-media svg, .brand-mark img, .cart-item .thumb img{height:100%}
/* Tabelas e listas longas em mobile não devem forçar largura */
table{max-width:100%}