/* ============================================================
   MONTARIAS E LAÇOS CADORE — Loja Virtual (Piloto Final)
   Acabamento premium · mobile first · couro, tradição e ofício
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Couro e ateliê */
  --ink:#1b100a;
  --brown:#2b1810;
  --brown-2:#3b2317;
  --brown-3:#54331f;
  --rust:#a75e36;
  --rust-2:#c47f4e;
  --tan:#c08a5a;
  --brass:#b98a3f;

  /* Papel */
  --bg:#f4efe7;
  --bg-2:#ece4d8;
  --paper:#fffdf9;
  --sand:#e8d6c2;
  --line:#e2d0bd;
  --line-soft:rgba(43,24,16,.10);
  --muted:#7a6252;
  --muted-2:#9a8271;

  /* Estados */
  --green:#1f6f47;
  --green-2:#eaf4ee;
  --green-line:#bcdcc9;
  --red:#a33e31;
  --amber:#9d6a1c;

  /* Profundidade (sombras quentes, nunca cinza) */
  --sh-1:0 1px 2px rgba(43,24,16,.06), 0 2px 6px rgba(43,24,16,.05);
  --sh-2:0 2px 6px rgba(43,24,16,.06), 0 10px 26px rgba(43,24,16,.09);
  --sh-3:0 4px 12px rgba(43,24,16,.08), 0 22px 48px rgba(43,24,16,.13);
  --sh-4:0 8px 20px rgba(43,24,16,.10), 0 38px 80px rgba(43,24,16,.18);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);

  /* Raios */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:26px;
  --r-2xl:32px;

  /* Ritmo */
  --gutter:20px;
  --shell:1200px;
  --sec-y:clamp(52px,8vw,104px);

  /* Movimento */
  --e-out:cubic-bezier(.16,.84,.44,1);
  --e-soft:cubic-bezier(.33,1,.68,1);
  --e-spring:cubic-bezier(.2,.9,.3,1.3);
  --t-fast:.18s;
  --t-mid:.36s;
  --t-slow:.62s;

  /* Costura (assinatura da marca) */
  --stitch:rgba(255,252,246,.42);
  --stitch-dark:rgba(43,24,16,.22);

  /* Grão de couro */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");

  /* Tipografia */
  --f-display:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,'Times New Roman',serif;
  --f-ui:'Archivo',Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
html.smooth-nav{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html.scroll-lock,html.scroll-lock body{overflow:hidden}
html.scroll-lock body{padding-right:var(--sbw,0px)}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;letter-spacing:-.022em;margin:0}
p{margin:0}
::selection{background:var(--rust);color:#fff}

:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:6px}

.shell{width:min(var(--shell),100% - (var(--gutter) * 2));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Textura de couro reaproveitável */
.grain::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);
  opacity:.18;mix-blend-mode:overlay;
}

/* Costura do ateliê */
.stitched{position:relative}
.stitched::before{
  content:'';position:absolute;inset:7px;
  border:1px dashed var(--stitch-dark);
  border-radius:calc(var(--r-lg) - 6px);
  pointer-events:none;opacity:.5;
}
.stitched.on-dark::before{border-color:var(--stitch);opacity:.35}

/* ---------- 3. Reveal no scroll ---------- */
.reveal{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s var(--e-out),transform .7s var(--e-out);transition-delay:var(--d,0ms);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
.reveal.done{will-change:auto}
.reveal-l{opacity:0;transform:translate3d(-26px,0,0)}
.reveal-r{opacity:0;transform:translate3d(26px,0,0)}
.reveal-s{opacity:0;transform:scale(.965)}
.reveal-l.in,.reveal-r.in,.reveal-s.in{opacity:1;transform:none}

/* ---------- 4. Faixa superior ---------- */
.topline{
  position:relative;
  background:linear-gradient(90deg,#1a0e07,#2b1810 45%,#1a0e07);
  color:#e8d3c0;text-align:center;
  padding:9px 16px;
  font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  overflow:hidden;
}
.topline b{color:var(--rust-2);font-weight:800}
.topline .tl-full{display:none}
.topline::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.10) 48%,transparent 66%);
  transform:translateX(-120%);
  animation:sheen 7.5s ease-in-out 2s infinite;
}
@keyframes sheen{0%{transform:translateX(-120%)}28%,100%{transform:translateX(120%)}}

/* ---------- 5. Cabeçalho ---------- */
.header{
  position:sticky;top:0;z-index:60;
  background:rgba(244,239,231,.82);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid transparent;
  transition:background var(--t-mid) var(--e-soft),border-color var(--t-mid),box-shadow var(--t-mid);
}
.header.stuck{background:rgba(244,239,231,.94);border-bottom-color:var(--line-soft);box-shadow:0 8px 30px rgba(43,24,16,.07)}
.head-inner{height:66px;display:flex;align-items:center;justify-content:space-between;gap:14px}

.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{
  width:46px;height:46px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brown-2),var(--brown) 60%,#1d100a);
  border-radius:13px;
  box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform var(--t-mid) var(--e-spring),box-shadow var(--t-mid);
  position:relative;overflow:hidden;
}
.brand-mark img{width:30px;height:30px;object-fit:contain}
.brand-mark::after{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.22;mix-blend-mode:overlay}
.brand:hover .brand-mark{transform:translateY(-2px) rotate(-3deg);box-shadow:var(--sh-3),inset 0 1px 0 rgba(255,255,255,.2)}
.brand-txt{min-width:0}
.brand-txt strong{display:block;font-family:var(--f-display);font-size:12.5px;font-weight:600;letter-spacing:-.015em;line-height:1.12;max-width:160px}
.brand-txt span{display:none;font-size:8.5px;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;margin-top:3px;font-weight:600}

.nav{display:none}
.nav a{position:relative;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brown-2);padding:6px 0;transition:color var(--t-fast)}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--rust);transition:right var(--t-mid) var(--e-out)}
.nav a:hover{color:var(--rust)}
.nav a:hover::after{right:0}

.head-actions{display:flex;gap:7px;align-items:center}

/* Busca do cabeçalho: acha pelo nome da peça ou pela referência CAD-0000.
   No celular fica só a lupa, que abre o campo, para não roubar a barra toda. */
.head-busca{display:flex;align-items:center;gap:6px;
  background:var(--paper);border:1px solid var(--line);border-radius:99px;
  padding:5px 6px 5px 14px;box-shadow:var(--sh-1);min-width:0}
.head-busca input{
  border:0;background:none;outline:none;min-width:0;width:170px;
  font:inherit;font-size:14px;color:var(--ink);
}
.head-busca input::placeholder{color:var(--muted-2)}
.head-busca input:focus-visible{outline:none}
.head-busca:focus-within{border-color:var(--rust)}
.head-busca button{
  display:grid;place-items:center;flex:0 0 auto;
  width:32px;height:32px;border:0;border-radius:99px;cursor:pointer;
  background:var(--rust);color:#fff;
}
.head-busca button svg{width:16px;height:16px}
/* No celular o campo não cabe na barra: fica só a lupa, que abre a página de
   busca. O link do menu faz o mesmo. */
.head-lupa{display:none}
@media (max-width:1080px){ .head-busca input{width:120px} }
@media (max-width:720px){
  .head-busca{display:none}
  .head-lupa{
    display:grid;place-items:center;flex:0 0 auto;
    width:38px;height:38px;border-radius:99px;
    background:var(--paper);border:1px solid var(--line);
    color:var(--ink);box-shadow:var(--sh-1);
  }
  .head-lupa svg{width:17px;height:17px}
}
.pillbtn{
  position:relative;overflow:hidden;
  border-radius:12px;padding:11px 13px;
  font-size:10.5px;font-weight:800;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:7px;
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-mid),filter var(--t-fast);
  box-shadow:var(--sh-1);
}
.pillbtn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.pillbtn:active{transform:translateY(0) scale(.97)}
.pillbtn svg{width:14px;height:14px;flex:none}
.wa{background:var(--green);color:#fff}
.adminbtn{background:linear-gradient(160deg,var(--brown-2),var(--brown));color:#fff}
.cartbtn{background:linear-gradient(160deg,var(--rust-2),var(--rust));color:#fff}
.count{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:#fff;color:var(--rust);font-size:10px;font-weight:800;
  transition:transform var(--t-mid) var(--e-spring);
}
.count.pop{animation:countpop .5s var(--e-spring)}
@keyframes countpop{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}

.burger{
  width:42px;height:42px;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform var(--t-fast),background var(--t-fast);
}
.burger:active{transform:scale(.94)}
.burger i{display:block;width:16px;height:1.6px;background:var(--brown);border-radius:2px;transition:transform var(--t-mid) var(--e-out),opacity var(--t-fast)}
.burger i+i{margin-top:4px}
.burger.open i:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

/* Menu mobile */
.mobilenav{
  position:fixed;left:0;right:0;top:0;z-index:55;
  background:rgba(244,239,231,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:calc(env(safe-area-inset-top) + 84px) var(--gutter) 34px;
  transform:translateY(-102%);
  transition:transform .46s var(--e-out);
  box-shadow:0 30px 70px rgba(43,24,16,.18);
  border-bottom-left-radius:var(--r-2xl);border-bottom-right-radius:var(--r-2xl);
}
.mobilenav.open{transform:translateY(0)}
.mobilenav a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 4px;border-bottom:1px solid var(--line-soft);
  font-family:var(--f-display);font-size:21px;font-weight:600;
  opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--e-out),transform .4s var(--e-out),color var(--t-fast);
}
.mobilenav.open a{opacity:1;transform:none}
.mobilenav.open a:nth-child(1){transition-delay:.08s}
.mobilenav.open a:nth-child(2){transition-delay:.14s}
.mobilenav.open a:nth-child(3){transition-delay:.20s}
.mobilenav.open a:nth-child(4){transition-delay:.26s}
.mobilenav.open a:nth-child(5){transition-delay:.32s}
.mobilenav a small{font-family:var(--f-ui);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.mobilenav a:active{color:var(--rust)}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:#1a0e07;color:#fff;
  isolation:isolate;
}
.hero-media{position:absolute;left:0;right:0;top:-8%;bottom:-8%;z-index:0}
.hero-photo{
  width:100%;height:100%;object-fit:cover;object-position:center 46%;
  transform:scale(1.06) translate3d(0,0,0);
  will-change:transform;
}
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(178deg,rgba(20,11,6,.55) 0%,rgba(20,11,6,0) 32%),
    linear-gradient(0deg,rgba(20,11,6,.96) 4%,rgba(24,13,7,.78) 34%,rgba(28,15,8,.42) 62%,rgba(28,15,8,.28) 100%);
}
.hero-vignette{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 85% at 50% 40%,transparent 42%,rgba(14,7,3,.55) 100%);
}
.hero-grain{position:absolute;inset:0;z-index:3;pointer-events:none;background-image:var(--grain);opacity:.16;mix-blend-mode:overlay}
.hero-inner{position:relative;z-index:4;min-height:min(88svh,720px);display:flex;align-items:flex-end;padding:118px 0 72px}
.hero-copy{max-width:640px}

.eyebrow{
  display:inline-flex;gap:9px;align-items:center;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(6px);
  border-radius:999px;padding:8px 14px 8px 11px;
  font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#f4e4d5;
}
.eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--rust-2);
  box-shadow:0 0 0 0 rgba(196,127,78,.6);
  animation:pulse 2.6s var(--e-soft) infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(196,127,78,.55)}70%{box-shadow:0 0 0 9px rgba(196,127,78,0)}100%{box-shadow:0 0 0 0 rgba(196,127,78,0)}}

.hero h1{
  font-size:clamp(2.5rem,10.5vw,4.9rem);
  line-height:.99;letter-spacing:-.035em;font-weight:600;
  margin:20px 0 0;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero h1 em{font-style:normal;color:var(--rust-2)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .ln > span{display:block;transform:translateY(105%);transition:transform .95s var(--e-out);transition-delay:var(--d,0ms)}
.hero.ready h1 .ln > span{transform:none}

.hero p{
  font-size:clamp(.95rem,3.6vw,1.06rem);line-height:1.68;color:#e9d6c7;
  max-width:46ch;margin:18px 0 0;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--e-out) .5s,transform .8s var(--e-out) .5s;
}
.hero.ready p{opacity:1;transform:none}

.hero-actions{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--e-out) .62s,transform .8s var(--e-out) .62s;
}
.hero.ready .hero-actions{opacity:1;transform:none}

.cta{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:14px;padding:16px 22px;
  font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-mid),background var(--t-mid);
}
.cta svg{width:16px;height:16px;flex:none;transition:transform var(--t-mid) var(--e-out)}
.cta::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);transition:left .7s var(--e-out);
}
.cta:hover::after{left:120%}
.cta.solid{background:linear-gradient(165deg,var(--rust-2),var(--rust));color:#fff;box-shadow:0 10px 28px rgba(167,94,54,.42),inset 0 1px 0 rgba(255,255,255,.22)}
.cta.solid:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(167,94,54,.5),inset 0 1px 0 rgba(255,255,255,.28)}
.cta.ghost{border:1px solid rgba(255,255,255,.32);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}
.cta.ghost:hover{transform:translateY(-3px);background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.5)}
.cta:hover svg{transform:translateX(3px)}
.cta:active{transform:translateY(-1px) scale(.98)}

.proof{
  display:flex;gap:8px 20px;flex-wrap:wrap;margin-top:28px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
  opacity:0;transform:translateY(12px);
  transition:opacity .8s var(--e-out) .78s,transform .8s var(--e-out) .78s;
}
.hero.ready .proof{opacity:1;transform:none}
.proof span{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:#dcc6b5;font-weight:600;letter-spacing:.02em}
.proof span::before{
  content:'';width:15px;height:15px;flex:none;border-radius:50%;
  background-color:rgba(196,127,78,.22);
  border:1px solid rgba(196,127,78,.5);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8b78e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:9px;background-repeat:no-repeat;background-position:center;
}

.hero-scroll{
  position:absolute;left:50%;bottom:14px;z-index:5;transform:translateX(-50%);
  display:none;flex-direction:column;align-items:center;gap:7px;
  font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700;
}
.hero-scroll i{display:block;width:1px;height:32px;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);animation:scrolldrop 2.4s var(--e-soft) infinite}
@keyframes scrolldrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}46%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 7. Atalhos ---------- */
.quick{position:relative;z-index:6;margin-top:-30px}
.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.quick a{
  position:relative;overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:15px 14px;
  box-shadow:var(--sh-2);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  transition:transform var(--t-mid) var(--e-out),box-shadow var(--t-mid),border-color var(--t-mid);
}
.quick a::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--rust-2),var(--rust));
  transform:scaleY(0);transform-origin:bottom;
  transition:transform var(--t-mid) var(--e-out);
}
.quick a:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--sand)}
.quick a:hover::before{transform:scaleY(1);transform-origin:top}
.quick strong{display:block;font-size:12.5px;font-weight:800;letter-spacing:-.01em}
.quick small{display:block;color:var(--muted);font-size:10px;margin-top:2px;line-height:1.35}
.arrow{
  display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:10px;background:var(--bg-2);color:var(--rust);
  transition:background var(--t-mid),transform var(--t-mid) var(--e-out),color var(--t-mid);
}
.arrow svg{width:14px;height:14px}
.quick a:hover .arrow{background:var(--rust);color:#fff;transform:translateX(3px)}

/* ---------- 8. Seções ---------- */
.section{padding:var(--sec-y) 0;position:relative}
.section-title{margin-bottom:26px}
.section-title small{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--rust);font-size:9.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;margin-bottom:12px;
}
.section-title small::before{content:'';width:22px;height:1px;background:linear-gradient(90deg,var(--rust),transparent)}
.section-title h2{font-size:clamp(1.85rem,6.4vw,2.9rem);line-height:1.02;font-weight:600}
.section-title p{margin-top:10px;color:var(--muted);font-size:13.5px;max-width:56ch;line-height:1.62}
.title-row{display:flex;flex-direction:column;gap:14px}

/* ---------- 9. Produto principal ---------- */
.feature{
  position:relative;
  display:grid;grid-template-columns:1fr;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-2xl);
  overflow:hidden;
  box-shadow:var(--sh-3);
  transition:box-shadow .5s var(--e-out),transform .5s var(--e-out);
}
.feature:hover{box-shadow:var(--sh-4)}
.feature-media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(160deg,#fefcf9 0%,#f6efe5 100%);
  padding:22px;
}
.feature-media img{width:100%;height:100%;object-fit:contain;transition:transform 1.1s var(--e-out)}
.feature:hover .feature-media img{transform:scale(1.03)}

.badge{
  position:absolute;top:15px;left:15px;z-index:2;
  background:rgba(255,253,249,.94);backdrop-filter:blur(8px);
  color:var(--brown);padding:8px 12px;border-radius:999px;
  font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  box-shadow:var(--sh-1);
}
.badge.dark{background:rgba(27,16,10,.82);color:#f2e0d1}
.feature-copy{padding:26px 22px 24px;display:flex;flex-direction:column;justify-content:center}
.label{display:inline-block;font-size:9.5px;color:var(--rust);font-weight:800;text-transform:uppercase;letter-spacing:.17em}
.feature h3{font-size:clamp(1.7rem,6vw,2.5rem);line-height:1.04;font-weight:600;margin:11px 0 10px}
.feature p{font-size:13.5px;color:var(--muted);line-height:1.65;margin:0 0 20px}
.price-line{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:16px 0;margin-bottom:18px;
  border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);
}
.price small{display:block;font-size:8.5px;color:var(--muted);font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px}
.price strong{font-family:var(--f-display);font-size:clamp(2rem,7vw,2.6rem);font-weight:600;letter-spacing:-.03em;line-height:1;display:block}
.install{text-align:right;font-size:11.5px;line-height:1.45;color:var(--muted)}
.install b{display:block;color:var(--brown);font-size:13px;font-weight:800}
.feature-actions{display:grid;gap:9px}

/* ---------- 10. Busca e filtros ---------- */
.searchrow{display:grid;gap:12px;margin-bottom:22px}
.search-field{position:relative}
.search-field svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted-2);pointer-events:none;transition:color var(--t-fast)}
.search{
  width:100%;border:1px solid var(--line);background:var(--paper);
  border-radius:var(--r-md);padding:14px 42px 14px 42px;outline:none;
  font-size:14px;box-shadow:var(--sh-1);
  transition:border-color var(--t-mid),box-shadow var(--t-mid),background var(--t-mid);
}
.search::placeholder{color:var(--muted-2)}
.search:focus{border-color:var(--rust);box-shadow:0 0 0 4px rgba(167,94,54,.11),var(--sh-1)}
.search-field:focus-within svg{color:var(--rust)}
.search-clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%) scale(.6);
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--bg-2);color:var(--muted);opacity:0;pointer-events:none;
  transition:opacity var(--t-fast),transform var(--t-fast) var(--e-spring);
}
.search-clear.show{opacity:1;transform:translateY(-50%) scale(1);pointer-events:auto}
.search-clear:hover{background:var(--rust);color:#fff}
.search-clear svg{position:static;transform:none;width:13px;height:13px;color:currentColor}

.filters{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{display:none}
.filter{
  position:relative;flex:none;
  border:1px solid var(--line);background:var(--paper);color:var(--brown-3);
  border-radius:999px;padding:11px 15px;font-size:10.5px;font-weight:800;letter-spacing:.05em;
  box-shadow:var(--sh-1);
  transition:transform var(--t-fast) var(--e-out),background var(--t-mid),color var(--t-mid),border-color var(--t-mid),box-shadow var(--t-mid);
}
.filter:hover{transform:translateY(-2px);border-color:var(--sand)}
.filter:active{transform:scale(.96)}
.filter.active{background:linear-gradient(160deg,var(--brown-2),var(--brown));color:#fff;border-color:var(--brown);box-shadow:var(--sh-2)}
.result-count{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.03em}

/* ---------- 11. Cartões de produto ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:16px;perspective:1400px}
.card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--sh-2);
  transform-style:preserve-3d;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),border-color .4s;
}
.card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-4);border-color:var(--sand)}
.card-media{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  /* Em pe, no formato das fotos da loja (quase todas 3:4). Antes era 4:3
     deitado, e a foto ficava pequena no meio de duas faixas vazias enormes. */
  background:linear-gradient(160deg,#fefcf9 0%,#f6efe5 100%);
  padding:14px;
  border-bottom:1px solid var(--line-soft);
}
.card-media img{
  width:100%;height:100%;
  object-fit:contain;              /* NUNCA corta o produto */
  transition:transform .6s var(--e-out),filter .5s;
}
/* o respiro do padding permite crescer sem esconder nenhuma parte da peca */
.card:hover .card-media img{transform:scale(1.02)}  /* leve, sem encostar na borda */

.tag{
  position:absolute;top:11px;left:11px;z-index:2;
  background:rgba(255,253,249,.93);backdrop-filter:blur(8px);
  padding:6px 10px;border-radius:999px;
  font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--brown);
  box-shadow:0 2px 8px rgba(43,24,16,.14);
}
.tag.promo{background:linear-gradient(150deg,var(--rust-2),var(--rust));color:#fff}
.stocktag{
  position:absolute;right:11px;top:11px;z-index:2;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,253,249,.93);backdrop-filter:blur(8px);
  font-size:8.5px;font-weight:800;letter-spacing:.06em;color:var(--brown-3);
  box-shadow:0 2px 8px rgba(43,24,16,.14);
  display:inline-flex;align-items:center;gap:5px;
}
.stocktag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green)}
.stocktag.low{color:var(--amber)}
.stocktag.low::before{background:var(--amber)}
.stocktag.out{color:var(--red)}
.stocktag.out::before{background:var(--red)}
.card.is-out .card-media img{filter:grayscale(.55) brightness(.92)}

.card-body{padding:16px 15px 15px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.24rem;line-height:1.12;font-weight:600;margin:0 0 6px;letter-spacing:-.02em}
.desc{font-size:11.5px;color:var(--muted);line-height:1.55;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-bottom{margin-top:auto}
.smallprice{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:13px;padding-top:12px;border-top:1px dashed var(--line)}
.smallprice strong{font-family:var(--f-display);font-size:1.6rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.smallprice em{display:block;font-style:normal;font-family:var(--f-ui);font-size:8.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.smallprice span{font-size:10px;color:var(--muted);text-align:right;max-width:118px;line-height:1.35}
.card-actions{display:grid;gap:8px}

.wide{
  position:relative;overflow:hidden;
  width:100%;border-radius:12px;padding:13px 15px;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-mid),background var(--t-mid),color var(--t-mid),opacity var(--t-mid);
}
.wide svg{width:15px;height:15px;flex:none}
.wide:not(:disabled):hover{transform:translateY(-2px)}
.wide:not(:disabled):active{transform:translateY(0) scale(.98)}
.wide:disabled{opacity:.45;cursor:not-allowed}
.buy{background:linear-gradient(165deg,var(--rust-2),var(--rust));color:#fff;box-shadow:0 6px 18px rgba(167,94,54,.3),inset 0 1px 0 rgba(255,255,255,.2)}
.buy:not(:disabled):hover{box-shadow:0 12px 28px rgba(167,94,54,.4),inset 0 1px 0 rgba(255,255,255,.26)}
.secondary{background:linear-gradient(165deg,var(--brown-2),var(--brown));color:#fff;box-shadow:var(--sh-1)}
.outline{background:transparent;color:var(--brown);border:1px solid var(--line)}
.outline:hover{background:var(--bg-2);border-color:var(--sand)}
.wide.wa{background:var(--green);color:#fff}
.wide.added{background:linear-gradient(165deg,#2c8a5b,var(--green));color:#fff;box-shadow:0 6px 18px rgba(31,111,71,.32)}

.empty-state{
  grid-column:1/-1;text-align:center;padding:52px 20px;
  background:var(--paper);border:1px dashed var(--line);border-radius:var(--r-xl);color:var(--muted);
}
.empty-state strong{display:block;font-family:var(--f-display);font-size:1.35rem;color:var(--ink);margin-bottom:6px;font-weight:600}
.empty-state span{font-size:12.5px}

/* ---------- 12. História / fluxo ---------- */
.story{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,#33200f 0%,var(--brown) 46%,#1d100a 100%);
  color:#fff;
}
.story::before{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.2;mix-blend-mode:overlay;pointer-events:none}
.story::after{
  content:'';position:absolute;top:-20%;right:-14%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(196,127,78,.22),transparent 68%);pointer-events:none;
}
.story-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.story-img{
  position:relative;aspect-ratio:4/3;border-radius:var(--r-2xl);overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.1);
}
.story-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
.story-img:hover img{transform:scale(1.05)}
.story-img .seal{
  position:absolute;right:14px;bottom:14px;z-index:2;
  display:flex;align-items:center;gap:9px;
  background:rgba(27,16,10,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:8px 14px 8px 9px;
  font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#f0dccb;
}
.story-img .seal img{width:22px;height:22px;object-fit:contain}
.story small{display:inline-flex;align-items:center;gap:8px;color:var(--rust-2);font-size:9.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase}
.story small::before{content:'';width:22px;height:1px;background:linear-gradient(90deg,var(--rust-2),transparent)}
.story h2{font-size:clamp(1.85rem,6.6vw,2.9rem);line-height:1.04;font-weight:600;margin:12px 0 14px}
.story p{font-size:13.5px;line-height:1.72;color:#e2cebf;margin:0 0 24px;max-width:52ch}
.steps{display:grid;gap:10px}
.step{
  position:relative;
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg);padding:16px 15px;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(4px);
  transition:transform var(--t-mid) var(--e-out),background var(--t-mid),border-color var(--t-mid);
}
.step:hover{transform:translateY(-4px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
.step b{
  display:grid;place-items:center;width:29px;height:29px;border-radius:50%;
  background:linear-gradient(160deg,var(--rust-2),var(--rust));font-size:11px;font-weight:800;margin-bottom:10px;
  box-shadow:0 4px 12px rgba(167,94,54,.4);
}
.step strong{font-size:13px;font-weight:800;letter-spacing:-.01em}
.step span{display:block;font-size:11.5px;color:#d3bcac;line-height:1.55;margin-top:5px}

/* ---------- 11b. Estado do produto no carrinho ---------- */
.cart-slot{display:block;min-width:0}
.cart-slot.swap{animation:slotin .3s var(--e-out)}
@keyframes slotin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.incart{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:linear-gradient(160deg,#f2faf5,var(--green-2));
  border:1.5px solid var(--green-line);
  border-radius:12px;
  padding:6px 6px 6px 11px;
  min-height:46px;
}
.incart-tag{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--green);
}
.incart-tag svg{width:13px;height:13px;flex:none}
.incart-tag b{font-weight:800;font-size:11px}

.stepper{
  display:inline-flex;align-items:center;gap:2px;flex:none;
  background:#fff;border:1px solid var(--green-line);border-radius:10px;padding:2px;
}
.stepper button{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  font-size:15px;font-weight:800;color:var(--green);line-height:1;
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.stepper button:hover:not(:disabled){background:var(--green);color:#fff}
.stepper button:active:not(:disabled){transform:scale(.9)}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper .qty-value{min-width:22px;text-align:center;font-size:13px;font-weight:800;color:var(--ink)}

/* ---------- 14. Carrinho e checkout ---------- */
.backdrop{
  position:fixed;inset:0;z-index:80;
  background:rgba(23,13,7,.42);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--e-out),visibility .4s;
}
.backdrop.show{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:90;
  width:min(468px,100%);
  background:var(--bg);
  box-shadow:-30px 0 90px rgba(23,13,7,.35);
  transform:translateX(103%);
  transition:transform .5s var(--e-out);
  display:flex;flex-direction:column;
  will-change:transform;
}
.drawer.open{transform:none}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;
  background:linear-gradient(165deg,var(--brown-2),var(--brown));
  color:#fff;
  padding-top:calc(16px + env(safe-area-inset-top));
}
.drawer-head h3{margin:0;font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.drawer-head small{display:block;font-family:var(--f-ui);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#c9a98f;font-weight:700;margin-top:3px}
.drawer-close{
  width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.16);
  transition:background var(--t-fast),transform var(--t-fast);
}
.drawer-close:hover{background:rgba(255,255,255,.2)}
.drawer-close:active{transform:scale(.92)}
.drawer-close svg{width:16px;height:16px}
.drawer-body{padding:16px 16px 8px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--sand) transparent}
.drawer-body::-webkit-scrollbar{width:8px}
.drawer-body::-webkit-scrollbar-track{background:transparent}
.drawer-body::-webkit-scrollbar-thumb{background:var(--sand);border-radius:99px;border:2px solid var(--bg)}
.drawer-body::-webkit-scrollbar-thumb:hover{background:var(--line)}

.cartitem{
  display:grid;grid-template-columns:74px 1fr auto;gap:12px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:10px;margin-bottom:10px;
  box-shadow:var(--sh-1);
}
.cartitem.is-new{animation:itemin .45s var(--e-out) both}
@keyframes itemin{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.cartitem.leaving{animation:itemout .3s var(--e-out) forwards}
@keyframes itemout{to{opacity:0;transform:translateX(30px) scale(.96);margin-bottom:-84px}}
.cartitem img{width:74px;height:74px;object-fit:contain;background:#fefcf9;border:1px solid var(--line);border-radius:12px;flex:none;padding:4px}
.cartitem strong{display:block;font-size:13px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.cartitem small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.cartitem .line-total{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--brown);margin-top:2px;display:block}
.qty{display:inline-flex;align-items:center;gap:4px;margin-top:8px;background:var(--bg-2);border-radius:10px;padding:3px}
.qty button{
  width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;font-weight:800;color:var(--brown);line-height:1;
  transition:background var(--t-fast),transform var(--t-fast),color var(--t-fast);
}
.qty button:hover{background:var(--rust);color:#fff;border-color:var(--rust)}
.qty button:active{transform:scale(.9)}
.qty button:disabled{opacity:.35;cursor:not-allowed}
.qty span{min-width:24px;text-align:center;font-size:12px;font-weight:800}
.item-remove{
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:transparent;color:var(--muted-2);
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.item-remove:hover{background:#f7e3e0;color:var(--red)}
.item-remove:active{transform:scale(.9)}
.item-remove svg{width:15px;height:15px}

.cart-empty{padding:44px 20px;text-align:center;color:var(--muted)}
.cart-empty .ico{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);color:var(--muted-2)}
.cart-empty .ico svg{width:24px;height:24px}
.cart-empty strong{display:block;font-family:var(--f-display);font-size:1.2rem;color:var(--ink);margin-bottom:5px;font-weight:600}
.cart-empty span{font-size:12px}

.checkout{margin-top:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:16px 15px;box-shadow:var(--sh-1)}
.checkout-step{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.checkout-step b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--brown);color:#fff;font-size:10px;font-weight:800;flex:none}
.checkout-step span{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.paygrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:4px}
.paybox{
  position:relative;overflow:hidden;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:14px 12px 13px;background:#fff;
  transition:border-color var(--t-mid),box-shadow var(--t-mid),transform var(--t-fast) var(--e-out),background var(--t-mid);
}
.paybox:hover{transform:translateY(-2px);border-color:var(--sand)}
.paybox input{position:absolute;opacity:0;pointer-events:none}
.paybox .pay-top{display:flex;align-items:center;gap:8px}
.paybox .pay-ico{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--bg-2);color:var(--brown-3);transition:background var(--t-mid),color var(--t-mid)}
.paybox .pay-ico svg{width:16px;height:16px}
.paybox b{font-size:12.5px;font-weight:800;letter-spacing:-.01em}
.paybox small{display:block;color:var(--muted);font-size:10px;line-height:1.4;margin-top:7px}
.paybox .check{
  position:absolute;top:9px;right:9px;width:19px;height:19px;border-radius:50%;
  border:1.5px solid var(--line);background:#fff;
  display:grid;place-items:center;
  transition:background var(--t-mid),border-color var(--t-mid),transform var(--t-mid) var(--e-spring);
}
.paybox .check svg{width:11px;height:11px;color:#fff;opacity:0;transform:scale(.4);transition:opacity var(--t-fast),transform var(--t-mid) var(--e-spring)}
.paybox.active{border-color:var(--green);background:#fbfefc;box-shadow:0 0 0 3px rgba(31,111,71,.1),var(--sh-1)}
.paybox.active .check{background:var(--green);border-color:var(--green)}
.paybox.active .check svg{opacity:1;transform:none}
.paybox.active .pay-ico{background:var(--green-2);color:var(--green)}
.paybox.card-active{border-color:var(--rust);background:#fffcf9;box-shadow:0 0 0 3px rgba(167,94,54,.1),var(--sh-1)}
.paybox.card-active .check{background:var(--rust);border-color:var(--rust)}
.paybox.card-active .check svg{opacity:1;transform:none}
.paybox.card-active .pay-ico{background:#f7e7da;color:var(--rust)}
.paybox.off{opacity:.5}
.paybox.off b::after{content:' · desativado';font-size:9px;color:var(--red);letter-spacing:.04em}

/* Painéis Pix / Cartão com transição de altura */
.paypanel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--e-out),opacity .3s var(--e-out),margin .45s var(--e-out);margin-top:0}
.paypanel > div{overflow:hidden;min-height:0}
.paypanel.open{grid-template-rows:1fr;opacity:1;margin-top:12px}

.pixinfo{
  position:relative;
  background:linear-gradient(160deg,#f2faf5,var(--green-2));
  border:1px solid var(--green-line);border-radius:var(--r-md);padding:15px 14px;
}
.pixinfo .pix-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.pixinfo .pix-head .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--green);color:#fff;flex:none}
.pixinfo .pix-head .ico svg{width:16px;height:16px}
.pixinfo .pix-head b{font-size:12.5px;font-weight:800;display:block}
.pixinfo .pix-head small{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);font-weight:800}
.pixrow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed rgba(31,111,71,.18);font-size:12px}
.pixrow:last-of-type{border-bottom:0}
.pixrow span{color:var(--muted);font-size:11px;font-weight:700}
.pixrow b{text-align:right;font-weight:800;word-break:break-word;color:var(--ink)}
.pixkey-row{display:flex;gap:8px;align-items:center;margin-top:11px}
.pixkey-row code{
  flex:1;background:#fff;border:1px dashed var(--green-line);border-radius:10px;
  padding:11px 12px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:12.5px;
  color:var(--ink);word-break:break-all;
}
.copybtn{
  flex:none;border-radius:10px;padding:11px 13px;background:var(--green);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;
  transition:transform var(--t-fast),background var(--t-mid);
}
.copybtn svg{width:13px;height:13px}
.copybtn:active{transform:scale(.94)}
.copybtn.done{background:var(--brown)}
.pixnote{display:block;font-size:11px;color:var(--muted);line-height:1.55;margin-top:11px}
.pix-off{background:#fdf3f1;border-color:#ecc9c2}
.pix-off .pix-head .ico{background:var(--red)}
.pix-off .pix-head small{color:var(--red)}

/* Cartão demonstrativo */
.cardvisual{
  position:relative;aspect-ratio:1.586;max-width:100%;
  border-radius:16px;overflow:hidden;margin-bottom:13px;
  background:linear-gradient(140deg,#3d2517 0%,#2b1810 45%,#1c100a 100%);
  box-shadow:var(--sh-3),inset 0 1px 0 rgba(255,255,255,.1);
  color:#f3e4d6;padding:16px;
  display:flex;flex-direction:column;justify-content:space-between;
  transform:rotateX(0deg);transition:transform .6s var(--e-out);
}
.cardvisual::before{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.22;mix-blend-mode:overlay;pointer-events:none}
.cardvisual::after{content:'';position:absolute;top:-40%;left:-20%;width:80%;height:180%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);transform:rotate(18deg)}
.cv-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.cv-chip{width:34px;height:26px;border-radius:6px;background:linear-gradient(150deg,#d8b26a,#a8802f);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);position:relative}
.cv-chip::after{content:'';position:absolute;inset:5px 7px;border:1px solid rgba(0,0,0,.22);border-radius:2px}
.cv-brand{font-size:8.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#c9a98f}
.cv-number{position:relative;z-index:2;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:clamp(14px,4.4vw,17px);letter-spacing:.13em;color:#fff}
.cv-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;position:relative;z-index:2}
.cv-bottom small{display:block;font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:#a98a72;margin-bottom:3px;font-weight:800}
.cv-bottom b{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cv-demo{
  font-size:7.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#d49b6b;border:1px solid rgba(196,127,78,.5);background:rgba(196,127,78,.14);
  border-radius:999px;padding:5px 9px;
}
.field-note{display:block;margin-top:7px;font-size:10.5px;color:var(--muted);line-height:1.45}
.cardform-note{
  display:flex;gap:9px;align-items:flex-start;
  background:#fffaf4;border:1px dashed var(--line);border-radius:12px;padding:11px 12px;margin-top:11px;
  font-size:10.5px;color:var(--muted);line-height:1.55;
}
.cardform-note svg{width:14px;height:14px;flex:none;color:var(--rust);margin-top:1px}

.trustrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px dashed var(--line)}
.trustrow span{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.trustrow svg{width:13px;height:13px;color:var(--green)}

.orderbox{
  background:linear-gradient(160deg,#f2faf5,var(--green-2));
  border:1px solid var(--green-line);border-radius:var(--r-lg);padding:17px 16px;margin-top:14px;
  font-size:12.5px;line-height:1.65;color:var(--brown-3);
  animation:orderin .5s var(--e-out) both;
}
@keyframes orderin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.orderbox .ok-ico{width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;margin-bottom:11px}
.orderbox .ok-ico svg{width:20px;height:20px;stroke-dasharray:30;stroke-dashoffset:30;animation:drawcheck .6s var(--e-out) .18s forwards}
@keyframes drawcheck{to{stroke-dashoffset:0}}
.orderbox b{display:block;font-family:var(--f-display);font-size:1.2rem;color:var(--ink);margin-bottom:8px;font-weight:600}
.orderbox .ord-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed rgba(31,111,71,.16)}
.orderbox .ord-row:last-of-type{border-bottom:0}
.orderbox .ord-row span{color:var(--muted);font-size:11px;font-weight:700}
.orderbox .ord-note{display:block;margin-top:11px;font-size:11px;color:var(--muted);line-height:1.6}

.totalbar{
  display:grid;gap:11px;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:var(--paper);
  box-shadow:0 -10px 30px rgba(43,24,16,.06);
}
.totalline{display:flex;justify-content:space-between;align-items:flex-end}
.totalline small{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.totalline strong{font-family:var(--f-display);font-size:1.7rem;font-weight:600;letter-spacing:-.03em;line-height:1;transition:transform .4s var(--e-spring)}
.totalline strong.flash{animation:totalflash .55s var(--e-spring)}
@keyframes totalflash{0%{transform:scale(1)}40%{transform:scale(1.09);color:var(--rust)}100%{transform:scale(1)}}

/* ---------- 15. Rodapé ---------- */
.footer{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#20120a,#160c06);
  color:#c2ab9a;padding:44px 0 calc(96px + env(safe-area-inset-bottom));
}
.footer::before{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.16;mix-blend-mode:overlay;pointer-events:none}
.footer-grid{position:relative;z-index:2;display:grid;gap:26px}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand .mark{
  width:52px;height:52px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brown-2),#1a0e07);
  border:1px solid rgba(255,255,255,.09);
}
.footer-brand .mark img{width:34px;height:34px;object-fit:contain}
.footer-brand strong{display:block;color:#fff;font-family:var(--f-display);font-size:16px;font-weight:600;letter-spacing:-.01em}
.footer-brand span{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust-2);margin-top:4px;font-weight:700}
.footer-links{display:grid;gap:10px}
.footer-links a{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;transition:color var(--t-fast),transform var(--t-fast)}
.footer-links a svg{width:15px;height:15px;color:var(--rust-2);flex:none}
.footer-links a:hover{color:#fff;transform:translateX(3px)}
.footer-note{font-size:11px;line-height:1.65;color:#8f7967;border-top:1px solid rgba(255,255,255,.09);padding-top:18px}
.footer-note b{color:#c2ab9a;font-weight:700}

/* ---------- 16. Barra mobile ---------- */
.mobilebar{
  position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:70;
  display:flex;gap:8px;
  transform:translateY(140%);
  transition:transform .5s var(--e-out);
}
.mobilebar.show{transform:none}
.mobilebar a,.mobilebar button{
  flex:1;border-radius:15px;padding:14px 12px;
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:0 14px 34px rgba(23,13,7,.3),inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform var(--t-fast) var(--e-out);
}
.mobilebar a:active,.mobilebar button:active{transform:scale(.96)}
.mobilebar svg{width:16px;height:16px;flex:none}
.mobilebar .buy{background:linear-gradient(165deg,var(--rust-2),var(--rust));color:#fff;position:relative}
.mobilebar .count{background:#fff;color:var(--rust)}

/* ---------- 17. Avisos (toast) ---------- */
.toasts{
  position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom));z-index:120;
  transform:translateX(-50%);
  display:flex;flex-direction:column;gap:9px;align-items:center;
  width:min(400px,calc(100% - 24px));pointer-events:none;
}
.toast{
  width:100%;
  display:flex;align-items:center;gap:11px;
  background:rgba(27,16,10,.95);
  backdrop-filter:blur(12px);
  color:#f4e6d9;border:1px solid rgba(255,255,255,.1);
  border-radius:15px;padding:12px 14px;
  box-shadow:0 18px 44px rgba(23,13,7,.42);
  font-size:12.5px;font-weight:600;line-height:1.35;
  animation:toastin .45s var(--e-spring) both;
  pointer-events:auto;
}
.toast.out{animation:toastout .3s var(--e-out) forwards}
@keyframes toastin{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateY(10px) scale(.96)}}
.toast .t-ico{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.1)}
.toast .t-ico svg{width:15px;height:15px}
.toast.ok .t-ico{background:rgba(31,111,71,.35);color:#8fe0b4}
.toast.warn .t-ico{background:rgba(157,106,28,.35);color:#f0c179}
.toast.err .t-ico{background:rgba(163,62,49,.35);color:#f0a79c}
.toast img{width:34px;height:34px;border-radius:9px;object-fit:contain;background:#fefcf9;flex:none;padding:2px}
.toast b{display:block;font-weight:800}
.toast small{display:block;color:#b79e8b;font-size:10.5px;font-weight:600;margin-top:1px}

/* Voo do produto para o carrinho */
.fly{
  position:fixed;z-index:130;border-radius:14px;object-fit:cover;pointer-events:none;
  box-shadow:var(--sh-3);
  transition:transform .72s cubic-bezier(.5,-0.2,.7,1),opacity .72s ease-in,border-radius .72s ease;
}

.footer-links .footer-place{display:inline-flex;align-items:center;gap:9px;font-size:12.5px}
.footer-links .footer-place svg{width:15px;height:15px;color:var(--rust-2);flex:none}

/* Total do carrinho com sublinha de parcelamento */
.total-value{text-align:right;min-width:0}
.total-value #totalSub{display:block;font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.02em;margin-top:3px}
.total-value #totalSub:empty{display:none}

/* Assinatura da desenvolvedora — fecha o rodapé, separada da marca principal */
.footer-credit-wrap{
  position:relative;z-index:2;
  margin-top:26px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:center;
}
.footer-credit{
  display:inline-flex;align-items:center;gap:10px;
  font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#7d6857;
  transition:color var(--t-mid);
}
.footer-credit img{
  width:88px;max-width:34vw;height:auto;display:block;
  opacity:.9;transition:opacity var(--t-mid);
}
.footer-credit:hover{color:#a08a76}
.footer-credit:hover img{opacity:1}

/* ============================================================
   18. Responsivo — mobile first, ampliando a partir daqui
   ============================================================ */

@media (min-width:520px){
  .formgrid{grid-template-columns:1fr 1fr}
  .field.full{grid-column:1/-1}
  .feature-actions{grid-template-columns:1fr 1fr}
}

@media (min-width:620px){
  :root{--gutter:26px}
  .topline .tl-short{display:none}
  .topline .tl-full{display:inline}
  .brand-txt strong{font-size:14.5px;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand-txt span{display:block}
  .grid{grid-template-columns:repeat(2,1fr)}
  .searchrow{grid-template-columns:1fr}
  .quick-grid{gap:12px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .cartitem{grid-template-columns:86px 1fr auto}
  .cartitem img{width:86px;height:86px}
}

@media (min-width:780px){
  :root{--gutter:32px}
  .quick-grid{grid-template-columns:repeat(4,1fr)}
  .quick{margin-top:-38px}
  .stats{grid-template-columns:repeat(4,1fr)}
  .admin-list{grid-template-columns:repeat(2,1fr)}
  .admin-wrap{padding:24px 22px 26px}
  .title-row{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .section-title{margin-bottom:30px}
  .searchrow{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px}
  .filters{justify-content:flex-end;overflow:visible;flex-wrap:wrap}
  .feature-copy{padding:34px 32px}
}

@media (min-width:900px){
  .header .burger{display:none}
  .mobilebar{display:none}
  .footer{padding-bottom:46px}
  .toasts{left:24px;right:auto;bottom:24px;transform:none;align-items:flex-start}
  .hero-inner{min-height:min(90svh,760px);align-items:center;padding:130px 0 120px}
  .hero-scroll{display:flex}
  .feature{grid-template-columns:1.08fr .92fr}
  .feature-media{aspect-ratio:auto;min-height:520px}
  .story-grid{grid-template-columns:.92fr 1.08fr;gap:44px}
  .story-img{aspect-ratio:auto;min-height:440px}
  .stockboard{grid-template-columns:1.15fr .85fr}
  .drawer-body{padding:20px 20px 10px}
  .checkout{padding:20px 18px}
}

@media (min-width:1024px){
  .head-inner{height:80px}
  .nav{display:flex;gap:26px;align-items:center}
  .brand-mark{width:52px;height:52px}
  .brand-mark img{width:34px;height:34px}
  .brand-txt strong{font-size:16px}
  .pillbtn{padding:12px 16px;font-size:11px}
  .grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .footer-grid{grid-template-columns:1fr auto 1fr;align-items:center;gap:34px}
  .footer-links{grid-auto-flow:column;gap:26px;justify-content:center}
  .footer-note{grid-column:1/-1;text-align:center;max-width:66ch;margin-inline:auto}
  .hero h1{font-size:clamp(3.4rem,5.4vw,4.9rem)}
}

@media (min-width:1280px){
  :root{--gutter:40px}
  .grid{gap:22px}
}

/* ---------- 19. Toque: sem hover pesado ---------- */
@media (hover:none){
  .card:hover{transform:none;box-shadow:var(--sh-2)}
  .card:hover .card-media img{transform:none}
  .quick a:hover{transform:none;box-shadow:var(--sh-2)}
  .step:hover{transform:none}
  .stat:hover{transform:none}
  .cta:hover,.wide:not(:disabled):hover,.pillbtn:hover,.mini:hover{transform:none}
  .cta::after{display:none}
}

/* ---------- 20. Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.reveal-l,.reveal-r,.reveal-s{opacity:1 !important;transform:none !important}
  .hero h1 .ln > span{transform:none !important}
  .hero p,.hero-actions,.proof{opacity:1 !important;transform:none !important}
  .hero-photo{transform:scale(1.02) !important}
  .mobilebar{transform:none}
}

/* ---------- 21. Impressão ---------- */
@media print{
  .header,.mobilebar,.mobilenav,.drawer,.backdrop,.toasts,.hero-scroll,.topline{display:none !important}
  body{background:#fff}
  .reveal,.reveal-l,.reveal-r,.reveal-s{opacity:1 !important;transform:none !important}
}

/* ---------- 22. Utilitários de visibilidade ---------- */
.only-lg{display:none !important}
@media (min-width:900px){
  .only-lg{display:inline-flex !important}
  .only-sm{display:none !important}
}

/* ============================================================
   23. Loja real — complementos ao piloto aprovado
   ============================================================ */

/* Produto sem foto: espaço reservado, elegante e neutro */
.sem-foto{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:9px;
  color:var(--muted-2);
}
.sem-foto svg{width:34px;height:34px;opacity:.5}
.sem-foto span{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}

/* Selo de frete grátis */
.selo-frete{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--green-2);color:var(--green);
  border:1px solid var(--green-line);border-radius:999px;
  padding:5px 11px;margin-bottom:12px;
  font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.selo-frete svg{width:13px;height:13px}

/* Título do card vira link, sem mudar a aparência */
.card h3 a{color:inherit;transition:color var(--t-fast)}
.card h3 a:hover{color:var(--rust)}
.card-media{display:block}

/* Caminho de navegação */
.migalhas{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:22px;
  font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--muted);
}
.migalhas a{color:var(--rust);transition:color var(--t-fast)}
.migalhas a:hover{color:var(--brown)}
.migalhas span{opacity:.5}
.migalhas strong{color:var(--ink);font-weight:800}

/* Volta ao ponto de onde o cliente abriu o produto */
.produto-topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.produto-topo .migalhas{margin-bottom:0;min-width:0}
.produto-voltar{
  min-height:42px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;flex:none;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--brown);
  box-shadow:var(--sh-1);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:color var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
}
.produto-voltar svg{width:16px;height:16px;transform:rotate(180deg)}
.produto-voltar:hover{color:var(--rust);border-color:var(--rust);transform:translateX(-2px)}
.produto-voltar:focus-visible{outline:3px solid rgba(167,94,54,.28);outline-offset:2px}

/* Filtro que virou link de categoria */
a.filter{display:inline-flex;align-items:center;text-decoration:none}
a.filter.active{background:linear-gradient(160deg,var(--brown-2),var(--brown));color:#fff;border-color:var(--brown)}

/* ---------- Página do produto ---------- */
.produto-detalhe{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
/* minmax(0,...) e min-width:0 sao obrigatorios: sem eles o carrossel de fotos
   (um flex com scroll) estica a coluna pelo conteudo, a grade estoura e a
   pagina ganha rolagem lateral. Era o que quebrava o Kit Economico, que tem
   17 fotos. */
.produto-galeria,.produto-info{min-width:0}

.galeria-principal{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  /* Em pe, no formato das fotos da loja. Era quadrada, e as fotos 3:4
     ficavam pequenas no meio de duas faixas brancas enormes. */
  background:linear-gradient(160deg,#fefcf9 0%,#f6efe5 100%);
  border:1px solid var(--line);border-radius:var(--r-2xl);
  box-shadow:var(--sh-2);
}

/* Trilho que rola para o lado: uma foto por vez, com encaixe */
.galeria-trilho{
  display:flex;height:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;   /* nao dispara o "voltar" do celular */
  outline:none;
}
.galeria-trilho::-webkit-scrollbar{display:none}
.galeria-trilho:focus-visible{box-shadow:inset 0 0 0 3px rgba(167,94,54,.35)}

.galeria-slide{
  flex:0 0 100%;width:100%;height:100%;
  scroll-snap-align:center;scroll-snap-stop:always;
  padding:22px;
}
.galeria-slide img{
  width:100%;height:100%;
  object-fit:contain;                  /* o produto aparece inteiro */
  pointer-events:none;user-select:none;
}
.galeria-principal img{object-fit:contain}

/* Setas: aparecem no computador, ficam fora do caminho no celular */
.galeria-seta{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;display:none;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--brown);
  box-shadow:var(--sh-1);cursor:pointer;z-index:2;
  transition:background var(--t-fast),transform var(--t-fast),opacity var(--t-fast);
}
.galeria-seta svg{width:20px;height:20px}
.galeria-seta.anterior{left:12px}
.galeria-seta.anterior svg{transform:rotate(180deg)}
.galeria-seta.proxima{right:12px}
.galeria-seta:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.galeria-seta:disabled{opacity:.32;cursor:default;transform:translateY(-50%)}

/* Bolinhas: mostram em qual foto você está */
.galeria-pontos{
  position:absolute;left:0;right:0;bottom:12px;
  display:flex;justify-content:center;gap:6px;z-index:2;pointer-events:none;
}
.galeria-pontos .ponto{
  width:7px;height:7px;border-radius:50%;
  background:rgba(61,42,30,.24);transition:background var(--t-fast),width var(--t-fast);
}
.galeria-pontos .ponto.ativo{background:var(--rust);width:18px;border-radius:99px}

@media (min-width:900px){
  .galeria-seta{display:grid}
  .galeria-pontos{display:none}
}
@media (prefers-reduced-motion:reduce){
  .galeria-trilho{scroll-behavior:auto}
}

.galeria-miniaturas{display:flex;gap:9px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.galeria-miniaturas::-webkit-scrollbar{display:none}
.miniatura{
  flex:none;width:72px;height:72px;padding:6px;
  background:#fefcf9;border:1.5px solid var(--line);border-radius:var(--r-md);
  transition:border-color var(--t-mid),transform var(--t-fast);
}
.miniatura img{width:100%;height:100%;object-fit:contain}
.miniatura:hover{transform:translateY(-2px)}
.miniatura.ativa{border-color:var(--rust);box-shadow:0 0 0 3px rgba(167,94,54,.12)}

.produto-info h1{font-size:clamp(1.7rem,5.4vw,2.5rem);line-height:1.05;font-weight:600;margin:10px 0 14px}
.produto-selos{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.produto-selos .selo-frete{margin-bottom:0}
.produto-selos .stocktag{box-shadow:none;border:1px solid var(--line)}
.produto-descricao{font-size:14px;line-height:1.7;color:var(--muted);margin-bottom:20px}
.produto-avisos{display:grid;gap:9px;margin-top:16px}

/* ---------- Cartão: aviso, sem formulário ---------- */
.cartao-aviso{background:linear-gradient(160deg,#fffaf4,#f9efe4);border-color:var(--line)}
.cartao-aviso .pix-head .ico{background:linear-gradient(160deg,var(--rust-2),var(--rust))}
.cartao-aviso .pix-head small{color:var(--rust)}
.cartao-condicao{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.cartao-condicao .pixrow{border-bottom-color:rgba(43,24,16,.1)}

/* Botão finalizar quando o caminho é o WhatsApp */
.wide.buy.wa{background:linear-gradient(165deg,#2c8a5b,var(--green));box-shadow:0 6px 18px rgba(31,111,71,.3)}

@media (min-width:900px){
  .produto-detalhe{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}
  .produto-info{position:sticky;top:100px}
}

/* Convite para o restante do catálogo */
.convite-catalogo{
  display:grid;gap:20px;align-items:center;
  background:linear-gradient(165deg,#fbf6ef,#f3e9dc);
  border:1px solid var(--line);border-radius:var(--r-2xl);
  padding:30px 26px;box-shadow:var(--sh-2);
}
.convite-catalogo small{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--rust);font-size:9.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;margin-bottom:10px;
}
.convite-catalogo small::before{content:'';width:22px;height:1px;background:linear-gradient(90deg,var(--rust),transparent)}
.convite-catalogo h2{font-size:clamp(1.5rem,4.6vw,2.2rem);line-height:1.06;font-weight:600}
.convite-catalogo p{margin-top:9px;color:var(--muted);font-size:13.5px;line-height:1.6;max-width:52ch}
@media (min-width:820px){
  .convite-catalogo{grid-template-columns:1fr auto;padding:34px 34px}
}

/* A imagem com parallax precisa de folga para se mover sem revelar borda */
.story-img{overflow:hidden}
.story-img img[data-parallax]{will-change:transform}

/* Selo de frete: o texto ganhou os estados, entao nao pode quebrar */
.selo-frete{white-space:nowrap;max-width:100%;font-size:9px;letter-spacing:.06em}
@media (max-width:400px){.selo-frete{font-size:8.5px;padding:5px 9px}}

/* ---------- Seleção Especial da Lida ---------- */
/* Faixa de destaque da home: fundo de couro claro, para os kits escolhidos
   se separarem do resto da página sem precisar de moldura em cada card. */
.selecao-lida{
  position:relative;
  background:linear-gradient(168deg,#fbf6ef 0%,#f2e7d9 58%,#efe2d1 100%);
  border-block:1px solid var(--line);
  padding-block:calc(var(--sec-y) * .82);
}
.selecao-lida::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(167,94,54,.07), transparent 62%);
}
.selecao-lida > .shell{position:relative}

.selecao-lida-titulo{text-align:center;max-width:60ch;margin-inline:auto}
.selecao-lida-titulo small{justify-content:center}
.selecao-lida-titulo small::before{width:34px}
.selecao-lida-titulo small::after{
  content:'';width:34px;height:1px;background:linear-gradient(270deg,var(--rust),transparent);
}
.selecao-lida-titulo p{margin-inline:auto;font-size:14.5px;color:var(--brown-3)}

.selecao-lida .card{background:var(--paper);box-shadow:var(--sh-2)}

@media (min-width:760px){
  .selecao-lida .grid{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media (min-width:1180px){
  .selecao-lida .grid{grid-template-columns:repeat(2,1fr);gap:26px;max-width:1020px;margin-inline:auto}
}


/* Referência do produto, discreta abaixo do nome */
.produto-referencia{
  font-size:14px;letter-spacing:.07em;color:var(--muted-2);
  margin:-8px 0 16px;text-transform:uppercase;
}
.produto-referencia strong{color:var(--brown);font-weight:800;letter-spacing:.04em}

/* No computador a galeria nao passa da altura da tela, para nao obrigar
   a diminuir o zoom em produto com foto muito alta. */
@media (min-width:900px){
  .galeria-principal{max-height:min(78vh,720px)}
}
@media (max-width:520px){
  .galeria-slide{padding:14px}
}

/* ---------- Card da Seleção Especial da Lida ---------- */
/* Cada kit mostra todas as suas fotos aqui mesmo, arrastando para o lado. */
.vitrine-media{padding:0}

.vitrine-trilho{
  display:flex;height:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;outline:none;
}
.vitrine-trilho::-webkit-scrollbar{display:none}
.vitrine-trilho:focus-visible{box-shadow:inset 0 0 0 3px rgba(167,94,54,.35)}

.vitrine-slide{
  flex:0 0 100%;width:100%;height:100%;
  scroll-snap-align:center;scroll-snap-stop:always;
  display:block;padding:14px;
}
.vitrine-slide img{
  width:100%;height:100%;
  object-fit:contain;              /* produto inteiro, nunca cortado */
  transition:none;
}
.card:hover .vitrine-slide img{transform:none}

.vitrine-seta{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:none;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--brown);
  box-shadow:var(--sh-1);cursor:pointer;z-index:3;
  transition:background var(--t-fast),opacity var(--t-fast);
}
.vitrine-seta svg{width:16px;height:16px}
.vitrine-seta.ant{left:10px}
.vitrine-seta.ant svg{transform:rotate(180deg)}
.vitrine-seta.prox{right:10px}
.vitrine-seta:hover{background:#fff}
.vitrine-seta:disabled{opacity:.3;cursor:default}

.vitrine-pontos{
  position:absolute;left:0;right:0;bottom:10px;
  display:flex;justify-content:center;gap:5px;z-index:3;pointer-events:none;
}
.vitrine-pontos .ponto{
  width:6px;height:6px;border-radius:50%;
  background:rgba(61,42,30,.26);transition:background var(--t-fast),width var(--t-fast);
}
.vitrine-pontos .ponto.ativo{background:var(--rust);width:15px;border-radius:99px}

.vitrine-contador{
  position:absolute;top:12px;right:12px;z-index:3;
  padding:4px 9px;border-radius:99px;
  background:rgba(255,255,255,.92);border:1px solid var(--line);
  font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brown);
}

.card-ref{
  display:inline-block;margin:-4px 0 8px;
  font-size:13px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2);
}

@media (min-width:900px){
  .vitrine-seta{display:grid}
}
@media (min-width:760px){
  .selecao-lida .grid{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media (min-width:1180px){
  .selecao-lida .grid{grid-template-columns:repeat(4,1fr);gap:22px;max-width:none;margin-inline:0}
}

/* ---------- Menu do topo com submenu ---------- */
/* Com 18 seções o menu viraria uma fileira sem fim. Os kits ficam num
   submenu "Kits" e o resto em "Seções". No celular a lista continua aberta. */
.nav-menu{position:relative}
.nav-topo{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;cursor:pointer;padding:0;
  font:inherit;color:inherit;letter-spacing:inherit;
}
.nav-topo svg{width:13px;height:13px;transform:rotate(90deg);transition:transform var(--t-fast)}
.nav-menu.aberto .nav-topo svg{transform:rotate(-90deg)}
.nav-topo:hover{color:var(--rust)}

.nav-lista{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:230px;padding:8px;z-index:60;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
}
.nav-lista.larga{
  min-width:430px;
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
}
.nav-menu.aberto .nav-lista{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-lista::before{
  content:'';position:absolute;top:-18px;left:0;right:0;height:18px;   /* ponte do mouse */
}
.nav-lista a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;border-radius:var(--r-sm);
  font-size:12px;font-weight:700;letter-spacing:.01em;text-transform:none;
  color:var(--brown);white-space:nowrap;
}
.nav-lista a small{
  font-size:10px;font-weight:800;opacity:.5;
  padding:1px 6px;border-radius:99px;background:rgba(43,24,16,.07);
}
.nav-lista a:hover{background:var(--bg-2);color:var(--rust)}

.mobilenav-titulo{
  display:block;padding:16px 0 6px;
  font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rust);opacity:.85;
}

/* Mesma protecao na vitrine: o card tem carrossel dentro da grade. */
.grid > *,.card,.card-vitrine,.vitrine-media{min-width:0}

/* ---------- 23. Seções no mesmo card da Seleção Especial ---------- */
/* A lista antiga dava uma peça por linha, com a foto ocupando quase a tela
   inteira: para ver o preço de um produto o cliente rolava a página. Agora é o
   mesmo card da vitrine, vários por linha, foto em cima e preço logo abaixo. */
.secao-grade{gap:16px}
@media (min-width:600px){
  .secao-grade{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media (min-width:1080px){
  .secao-grade{grid-template-columns:repeat(3,1fr);gap:20px}
}
/* Daqui para cima são quatro por linha, o mesmo da Seleção Especial na home.
   Com três, o card fica maior que o da home e volta a parecer pesado. */
@media (min-width:1280px){
  .secao-grade{grid-template-columns:repeat(4,1fr);gap:22px}
}

/* Bolinhas embaixo da foto: só avisam que a peça tem mais de um ângulo e qual
   está à vista. Não são botões. Como ficam sobre o fundo claro da foto, levam
   um contorno claro para não sumirem nas peças de couro cru. */
.vitrine-pontos{bottom:12px;gap:6px}
.vitrine-pontos .ponto{
  width:7px;height:7px;
  background:rgba(61,42,30,.3);
  box-shadow:0 0 0 2px rgba(255,253,249,.8);
}
.vitrine-pontos .ponto.ativo{background:var(--rust);width:20px}

/* Miniaturas que aparecem quando o mouse encosta no card, como nas lojas
   grandes. Ficam sobrepostas na base da foto, de propósito: se empurrassem o
   conteúdo, o card mudaria de altura toda vez que o mouse passasse. No celular
   não existe mouse — lá ficam só as bolinhas e o arraste. */
.vitrine-pontos{transition:opacity var(--t-fast)}
.vitrine-minis{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:none;justify-content:center;gap:6px;padding:10px 8px 9px;
  background:linear-gradient(0deg,rgba(254,252,249,.97) 55%,rgba(254,252,249,0));
  opacity:0;transform:translateY(8px);
  transition:opacity var(--t-mid),transform var(--t-mid);
}
.vitrine-mini{
  flex:none;width:38px;height:44px;padding:3px;
  background:#fffdf9;border:1.5px solid var(--line);border-radius:7px;
  cursor:pointer;transition:border-color var(--t-fast),transform var(--t-fast);
}
.vitrine-mini img{width:100%;height:100%;object-fit:contain}
.vitrine-mini.ativa{border-color:var(--rust)}

@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .vitrine-minis{display:flex}
  .card:hover .vitrine-minis{opacity:1;transform:none}
  .card:hover .vitrine-pontos{opacity:0}
  .vitrine-mini:hover{transform:translateY(-2px)}
}

/* A tarja "São Luiz Gonzaga · RS · desde a bancada" entra junto com o resto da
   abertura, um instante antes do título. Antes ela já nascia pronta na tela
   enquanto tudo em volta se movia, e destoava. */
.eyebrow{opacity:0;transform:translateY(12px);
  transition:opacity .7s var(--e-out) .12s,transform .7s var(--e-out) .12s}
.hero.ready .eyebrow{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .eyebrow{opacity:1 !important;transform:none !important}
}

/* O bloco "tem mais" agora é a chamada da lista de seções, que vem logo abaixo
   dele — não precisa mais do botão à direita nem de duas colunas. */
.convite-secoes{grid-template-columns:1fr !important;text-align:center}
.convite-secoes small{justify-content:center}
.convite-secoes p{margin-inline:auto}

/* ---------- 24. Banner mais baixo, com as selas colando ---------- */
/* O cliente pediu para o site abrir mostrando peça, não só a capa. O banner
   perdeu altura para a Seleção Especial da Lida entrar na mesma tela — o
   movimento da foto e a entrada do texto continuam iguais. */
.hero-inner{min-height:min(56svh,470px);padding:88px 0 30px}
.hero p{margin-top:12px}
.hero-actions{margin-top:18px}
.proof{margin-top:15px}

/* Entre o tablet e o computador o título ficava no corpo máximo numa largura
   ainda estreita e quebrava em três linhas, comendo 240px de altura sozinho.
   Agora ele acompanha a largura da tela e a caixa de texto tem folga para a
   frase mais longa caber em duas linhas, como foi desenhada. */
.hero h1{font-size:clamp(2.4rem,6vw,4.9rem)}
.hero-copy{max-width:min(700px,100%)}
/* No monitor grande a frase mais longa precisa de largura para não virar três
   linhas — é o título que mandava na altura do banner. */
@media (min-width:1100px){
  .hero-copy{max-width:min(980px,100%)}
}

/* A Seleção Especial encosta no banner, sem o respiro cheio de seção. */
.selecao-lida{padding-top:26px}
.selecao-lida .section-title{margin-bottom:18px}
.selecao-lida-titulo p{margin-top:6px}

@media (min-width:1024px){
  .hero-inner{min-height:min(58svh,520px);padding:96px 0 38px}
  .selecao-lida{padding-top:32px}
}

/* No celular a tela é curta: para as selas aparecerem na abertura, o banner
   fica só com a tarja da cidade, o título e o WhatsApp. Nada se perde — os
   quatro selos se repetem ao longo da página (o de frete aparece em todo card)
   e "Ver produtos" não tem função com as selas logo abaixo. No computador o
   banner continua completo. */
@media (max-width:819px){
  .hero .proof{display:none}
  .hero-copy > p{display:none}
  .hero-actions .cta.solid{display:none}
  .hero-actions{margin-top:22px}
  .hero-inner{padding:80px 0 26px}
}

/* ---------- 25. Lista de seções compacta, no pé da home ---------- */
/* Ela saiu de cima dos produtos e desceu. Duas consequências: o encaixe
   negativo que a fazia montar sobre o banner não serve mais, e ela pode ficar
   bem menor — aqui embaixo é índice de navegação, não vitrine. */
.quick{margin-top:0;z-index:1}
.quick-grid{gap:8px}
.quick a{padding:10px 12px;border-radius:var(--r-md)}
.quick strong{font-size:11.5px}
.quick small{font-size:9.5px;margin-top:1px}
.quick .arrow{width:24px;height:24px}
.quick .arrow svg{width:12px;height:12px}
.quick a:hover{transform:translateY(-3px)}

@media (min-width:600px){
  .quick-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .quick-grid{grid-template-columns:repeat(4,1fr);gap:10px}
}
@media (min-width:1280px){
  .quick-grid{grid-template-columns:repeat(5,1fr)}
}

/* O "Role" do banner existia para avisar que havia conteúdo abaixo. Com o
   banner mais baixo ele encostou nos selos, e a Seleção Especial já aparece
   sozinha na primeira tela — o aviso não tem mais o que avisar. */
.hero-scroll{display:none !important}

/* Segunda rodada de redução do banner: o cliente pediu ainda menor, com as
   escritas menores junto. O título deixa de ser o maior bloco da abertura. */
.hero-inner{min-height:min(44svh,360px);padding:76px 0 22px}
.hero h1{font-size:clamp(2rem,4.6vw,3.4rem)}
.hero .eyebrow{font-size:8.5px;padding:6px 12px 6px 10px}
.hero p{font-size:clamp(.86rem,2.6vw,.95rem);margin-top:10px;max-width:52ch}
.hero-actions{margin-top:15px}
.hero-actions .cta{padding:12px 18px;font-size:12.5px}
.proof{margin-top:12px;font-size:10.5px}

@media (min-width:1024px){
  .hero-inner{min-height:min(46svh,400px);padding:84px 0 26px}
}

/* Terceira e última redução do banner de abertura: no computador os quatro
   selos saem (o de frete aparece em cada card, "couro legítimo" cinco vezes na
   página) e o banner fica em 352px, com as quatro selas inteiras na primeira
   tela. Abaixo disso a foto de couro vira uma tarja e o título fica espremido. */
@media (min-width:820px){
  .hero .proof{display:none}
  .hero-inner{min-height:min(36svh,320px);padding:72px 0 20px}
  .hero h1{font-size:clamp(2rem,4vw,2.9rem)}
  .hero p{margin-top:8px;font-size:.92rem}
  .hero-actions{margin-top:13px}
}

/* ---------- 26. Onde nos encontrar ---------- */
/* Fecha a página inicial: card com o endereço à esquerda, mapa à direita. Usa
   os mesmos tokens do resto do site — nenhuma cor nova — e o card segue o
   mesmo desenho do bloco "Tem mais", para a seção parecer parte do site e não
   um widget colado no fim. */
.onde-estamos{padding-top:0}
.onde-titulo{text-align:center}
.onde-titulo small{justify-content:center}
.onde-titulo small::after{
  content:'';width:22px;height:1px;background:linear-gradient(270deg,var(--rust),transparent);
}
.onde-titulo p{
  margin:10px auto 0;max-width:52ch;
  font-size:14.5px;line-height:1.6;color:var(--muted);
}

.onde-grade{display:grid;gap:16px;align-items:stretch}

.onde-card{
  background:linear-gradient(165deg,#fbf6ef,#f3e9dc);
  border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);
  padding:26px 24px;
  display:flex;flex-direction:column;align-items:flex-start;
}
.onde-marca{
  width:42px;height:42px;flex:none;margin-bottom:14px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);
  color:var(--rust);box-shadow:var(--sh-1);
}
.onde-marca svg{width:21px;height:21px}
.onde-nome{
  font-family:var(--f-display);
  font-size:clamp(1.2rem,3.4vw,1.45rem);line-height:1.15;
  font-weight:600;color:var(--ink);letter-spacing:-.01em;
}
.onde-endereco{
  font-style:normal;margin-top:10px;
  font-size:14.5px;line-height:1.72;color:var(--brown-2);
}
.onde-acoes{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:20px;
}
.onde-acoes .cta{font-size:12.5px;padding:12px 18px}
/* O botão vazado do banner foi desenhado para fundo escuro: borda e texto
   brancos. Aqui o fundo é claro, então ele veste as cores do couro para não
   sumir na página. O botão cheio não muda. */
.onde-acoes .cta.ghost{
  border-color:var(--line);color:var(--brown);
  background:var(--paper);backdrop-filter:none;
}
.onde-acoes .cta.ghost:hover{
  background:#fff;border-color:var(--rust);color:var(--rust);
}
.onde-acoes .cta.ghost svg{color:var(--green)}

/* O mapa mora numa moldura igual à dos outros blocos: a borda e o raio são do
   container, e o próprio mapa fica recortado dentro dele. */
.onde-mapa{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);background:#efe6da;
  min-height:260px;
}
.onde-mapa iframe{
  display:block;width:100%;height:100%;min-height:260px;border:0;
}

@media (min-width:880px){
  .onde-grade{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:22px}
  .onde-mapa,.onde-mapa iframe{min-height:340px}
  .onde-card{padding:30px 28px}
}

/* SEO — Fase 1: o título das páginas de seção passou de <h2> para <h1> por
   dentro, para o Google saber qual é o título principal. A aparência é a mesma
   do .section-title h2 acima. .title-row só existe na página de seção, então a
   regra não mexe em nenhum outro título do site (o <h1> de Como comprar fica
   como está). */
.title-row h1{font-size:clamp(1.85rem,6.4vw,2.9rem);line-height:1.02;font-weight:600}

/* Seleção Especial: botões de ordem por preço, no canto de cima da grade de
   kits. Reaproveitam o chip .filter das seções; aqui só o alinhamento e o
   rótulo pequeno, no padrão dos rótulos do site. */
.ordem-kits{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px;margin:-6px 0 14px}
.ordem-kits-rotulo{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:3px}
.ordem-kits .filter{font-family:inherit;cursor:pointer}

/* ---------- Fechamento: CPF e QR Code do Pix ---------- */
/* CPF obrigatório (nota fiscal e pagamento) e, no Pix, o QR Code com o valor
   exato do pedido para pagar ali mesmo pelo app do banco. */
.field-ajuda{display:block;margin-top:5px;font-size:10.5px;color:var(--muted);line-height:1.4}
.pix-qr{margin-top:12px;padding:14px;border-radius:14px;background:#fff;border:1px solid rgba(31,111,71,.18);text-align:center}
.pix-qr-img{width:min(220px,100%);margin:0 auto 10px}
.pix-qr-img svg{display:block;width:100%;height:auto}
.pix-qr-passo{display:block;font-size:11.5px;color:var(--muted);line-height:1.55}
.pix-qr .pixkey-row code{font-size:10px;line-height:1.45;text-align:left;max-height:74px;overflow:auto}

/* ---------- Fechamento: endereço de entrega ---------- */
/* Os campos do carrinho voltam ao visual do piloto aprovado. As regras de
   .field saíram do site.css junto com a demonstração de painel do piloto, e
   nome, CPF e WhatsApp estavam aparecendo com a caixa crua do navegador.
   Valem só dentro do fechamento (.checkout). */
.checkout .field label{display:block;font-size:9.5px;font-weight:800;text-transform:uppercase;color:var(--muted);margin-bottom:6px;letter-spacing:.11em}
.checkout .field label em{font-style:normal;font-weight:700;text-transform:none;letter-spacing:0;color:var(--muted-2)}
.checkout .field input,.checkout .field select{
  width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:#fff;
  font-size:14px;outline:none;
  transition:border-color var(--t-mid),box-shadow var(--t-mid),background var(--t-mid);
}
.checkout .field input:focus,.checkout .field select:focus{border-color:var(--rust);box-shadow:0 0 0 4px rgba(167,94,54,.1)}
.checkout .field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6252' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:15px;padding-right:36px}
.checkout .field .campo-erro{border-color:var(--red);box-shadow:0 0 0 4px rgba(163,62,49,.1)}

/* Endereço: CEP, rua, número + complemento, bairro, cidade + UF. */
.endereco{display:grid;gap:10px}
.endereco-par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.endereco-cidade{grid-template-columns:minmax(0,1fr) 92px}
/* O círculo de marcar fica no canto de cima: o título não passa por baixo. */
.paygrid-entrega .pay-top{padding-right:20px}

/* ---------- Menu do celular: a lista rola dentro dele ---------- */
/* Com 19 seções a lista passou da altura da tela. Como a página fica travada
   enquanto o menu está aberto, o que ficava abaixo da tela (Freios, Laços,
   Mantas, Pelegos...) não dava para alcançar, e a tela parecia congelada.
   Agora o menu tem no máximo a altura da tela e rola por dentro; o fim da
   lista ganha folga para não ficar atrás da barra de WhatsApp e Carrinho. */
.mobilenav{
  max-height:100vh;max-height:100dvh;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(34px + 76px + env(safe-area-inset-bottom));
}

/* Observação do pedido: mesma caixa dos outros campos, com altura para um
   recado curto (tamanho da sela, cor da barrigueira...). */
.checkout .field textarea{
  width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:#fff;
  font-size:14px;outline:none;min-height:84px;resize:vertical;line-height:1.5;
  transition:border-color var(--t-mid),box-shadow var(--t-mid);
}
.checkout .field textarea:focus{border-color:var(--rust);box-shadow:0 0 0 4px rgba(167,94,54,.1)}

/* ==========================================================================
   Pedido por link — a página que o cliente abre quando recebe o endereço
   pelo WhatsApp. Reaproveita o que já existe no carrinho (cartitem, paybox,
   orderbox, pix-qr) e só acrescenta a moldura de página e os campos, que no
   carrinho moram dentro de .checkout.
   ========================================================================== */
.pedido-colunas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.pedido-colunas > *{min-width:0}

.pedido-resumo,.pedido-form,.pedido-vendedor,.pedido-fechado{padding:22px 20px}
.pedido-resumo:hover,.pedido-form:hover,.pedido-vendedor:hover,.pedido-fechado:hover{transform:none;box-shadow:var(--sh-2);border-color:var(--line)}
.pedido-vendedor{margin-top:16px}
.pedido-vendedor p{margin:0 0 3px;font-size:12.5px;color:var(--muted);line-height:1.6}
.pedido-vendedor p strong{color:var(--ink);font-size:13.5px}

.pedido-bloco-titulo{
  font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;
}
.pedido-form .pedido-bloco-titulo{margin-top:6px}

.pedido-resumo .cartitem{padding:11px 0;border-bottom:1px dashed var(--line)}
.pedido-resumo .cartitem:last-of-type{border-bottom:0}

.pedido-conta{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);display:grid;gap:7px}
.pedido-conta > div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pedido-conta span{color:var(--muted);font-size:11.5px;font-weight:700}
.pedido-conta b{font-size:13.5px;font-weight:700;color:var(--brown)}
.pedido-conta-total{margin-top:4px;padding-top:9px;border-top:1px solid var(--line)}
.pedido-conta-total span{font-size:12.5px;color:var(--ink)}
.pedido-conta-total b{font-family:var(--f-display);font-size:1.45rem;font-weight:600;color:var(--ink)}

.pedido-aviso{display:flex;gap:9px;margin:14px 0 0;color:var(--muted);font-size:11.5px;line-height:1.6}
.pedido-aviso svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--green)}

.pedido-erro{border-color:rgba(163,62,49,.35);background:#fdf6f5}
.pedido-erro svg{color:var(--red)}

/* Os campos do formulário: mesmos valores de .checkout .field, porque esta
   página não fica dentro da gaveta do carrinho. */
.pedido-form .field label{display:block;font-size:9.5px;font-weight:800;text-transform:uppercase;color:var(--muted);margin-bottom:6px;letter-spacing:.11em}
.pedido-form .field label em{font-style:normal;font-weight:700;text-transform:none;letter-spacing:0;color:var(--muted-2)}
.pedido-form .field input,.pedido-form .field select,.pedido-form .field textarea{
  width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:#fff;
  font-size:14px;outline:none;font-family:inherit;color:var(--ink);
  transition:border-color var(--t-mid),box-shadow var(--t-mid);
}
.pedido-form .field textarea{min-height:84px;resize:vertical;line-height:1.5}
.pedido-form .field input:focus,.pedido-form .field select:focus,.pedido-form .field textarea:focus{
  border-color:var(--rust);box-shadow:0 0 0 4px rgba(167,94,54,.1);
}
.pedido-form .field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6252' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;padding-right:36px;
}

/* No celular, que é onde o cliente abre o link do WhatsApp, uma coluna só. */
@media (max-width:900px){
  .pedido-colunas{grid-template-columns:1fr;gap:14px}
  .pedido-resumo,.pedido-form,.pedido-vendedor,.pedido-fechado{padding:18px 16px}
}

/* ---------- Vídeo do produto, na galeria ---------- */
/* Entra logo depois da foto principal. Fundo escuro de cinema: o vídeo de
   celular costuma vir em pé e sobra faixa dos lados. O vídeo aparece inteiro,
   como as fotos (contain). */
.galeria-video{position:relative}
.galeria-video video{
  display:block;width:100%;height:100%;
  object-fit:contain;background:#15100c;border-radius:var(--r-lg);
}
.video-play{
  position:absolute;inset:22px;display:grid;place-items:center;align-content:center;gap:12px;
  border:0;border-radius:var(--r-lg);cursor:pointer;color:#fff;
  background:linear-gradient(180deg,rgba(27,16,10,0) 45%,rgba(27,16,10,.55) 100%);
}
.video-play-botao{
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:var(--rust);box-shadow:0 10px 30px rgba(27,16,10,.35),0 0 0 8px rgba(255,255,255,.18);
  transition:transform var(--t-fast),background var(--t-fast);
}
.video-play-botao svg{width:30px;height:30px;margin-left:4px}
.video-play:hover .video-play-botao{transform:scale(1.06);background:var(--rust-2)}
.video-play-texto{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(27,16,10,.62);padding:7px 13px;border-radius:99px;
}
.galeria-video.tocando .video-play{display:none}
@media (max-width:520px){
  .video-play{inset:14px}
  .video-play-botao{width:64px;height:64px}
}

.miniatura-video{position:relative;background:#15100c}
.miniatura-video img{opacity:.85}
.miniatura-play{
  position:absolute;inset:0;display:grid;place-items:center;color:#fff;
}
.miniatura-play svg{
  width:26px;height:26px;padding:5px 4px 5px 6px;border-radius:50%;
  background:var(--rust);box-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* ---------- Frete grátis em destaque (pedido do Pablo, 01/10/2026) ---------- */
/* Faixa do topo: frete grátis em TODOS os produtos, para RS, SC, PR e SP.
   Verde do selo de frete (o mesmo do bloco da página do produto), com os estados
   em etiquetas brancas. No celular quebra em duas linhas; do tablet para cima,
   uma linha só. O brilho que passa (::after da .topline) continua. */
.topline-frete{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px 10px;
  padding:8px 14px 9px;
  background:linear-gradient(90deg,#16573a,var(--green) 50%,#16573a);
  border-bottom:1px solid rgba(255,255,255,.16);
  color:#fff;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;
}
.topline-frete .tf-icone{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18)}
.topline-frete svg{width:16px;height:16px;color:#fff}
.topline-frete b{color:#fff;font-size:13.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.topline-frete .tf-estados{display:inline-flex;gap:5px}
.topline-frete .tf-estados i{
  font-style:normal;font-size:11px;font-weight:800;letter-spacing:.08em;line-height:1;
  padding:4px 8px;border-radius:999px;background:#fff;color:#16573a;
}
.topline-frete .tf-sub{order:5;flex-basis:100%;text-align:center;font-size:12px;opacity:.94}
.topline-frete .tf-para{display:none}
@media (min-width:620px){
  .topline-frete{padding:9px 16px;gap:4px 12px;font-size:13px}
  .topline-frete b{font-size:14px}
  .topline-frete .tf-sub{order:0;flex-basis:auto;font-size:13px}
  .topline-frete .tf-para{display:inline;font-size:13px;opacity:.94;margin-right:-4px}
  .topline-frete .tf-estados i{font-size:11.5px;padding:4px 9px}
}
@media (max-width:360px){
  .topline-frete{gap:3px 8px}
  .topline-frete .tf-icone{display:none}
  .topline-frete b{font-size:12.5px}
}

/* Card: faixa verde logo abaixo da foto, de ponta a ponta, sem cobrir a peça. */
.faixa-frete{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:-16px -15px 13px;padding:8px 10px;
  background:var(--green);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
}
.faixa-frete svg{width:16px;height:16px;flex:none}
.faixa-frete span{font-weight:700;opacity:.88;letter-spacing:.08em}
@media (max-width:400px){
  .faixa-frete{font-size:9px;gap:5px;letter-spacing:.06em;padding:7px 6px}
  .faixa-frete svg{width:14px;height:14px}
}

/* Página do produto: bloco verde junto do preço e do botão de comprar. */
.destaque-frete{
  display:flex;align-items:center;gap:14px;
  margin:16px 0 4px;padding:14px 16px;
  background:var(--green-2);border:1.5px solid var(--green-line);border-left:5px solid var(--green);
  border-radius:var(--r-lg);color:var(--green);
}
.destaque-frete-icone{
  width:46px;height:46px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:var(--green);color:#fff;
}
.destaque-frete-icone svg{width:25px;height:25px}
.destaque-frete strong{display:block;font-family:'Fraunces',serif;font-size:1.35rem;font-weight:600;line-height:1.1;letter-spacing:-.01em}
.destaque-frete div > span{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.destaque-frete small{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}

/* ============================================================
   Cartão pelo Mercado Pago (Payment Brick) — 01/10/2026
   O formulário em #mpCartao é do Mercado Pago; aqui só a moldura.
   ============================================================ */
.mp-cartao{
  background:linear-gradient(160deg,#fffaf4,#f9efe4);
  border:1px solid var(--line);border-radius:var(--r-md);padding:12px 10px 13px;
}
.mp-brick{min-height:120px}
.mp-nota{display:flex;gap:8px;align-items:flex-start;margin:10px 4px 0;font-size:10.5px;color:var(--muted);line-height:1.55}
.mp-nota svg{width:13px;height:13px;flex:none;color:var(--rust);margin-top:2px}
.mp-erro{padding:14px 12px;border:1px dashed var(--line);border-radius:12px;background:#fff;font-size:11.5px;color:var(--red);line-height:1.55}
.mp-desafio{margin-bottom:10px}
.mp-desafio-texto{margin:2px 4px 10px;font-size:12px;font-weight:700;color:var(--ink);line-height:1.5}
.mp-desafio-quadro{display:block;width:100%;height:520px;border:0;border-radius:12px;background:#fff}
/* A lista de parcelas do formulário não pode ficar cortada pela gaveta. */
#cardPanel.open > div{overflow:visible}

.orderbox.orderbox-recusado{background:linear-gradient(160deg,#fdf5f3,#f8e7e3);border-color:rgba(163,62,49,.28)}
.orderbox.orderbox-recusado .ok-ico{background:var(--red)}
.orderbox.orderbox-recusado .ok-ico svg{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
.mp-aviso{display:block;margin:0 0 10px;padding:11px 12px;border-radius:12px;background:#fdf2ef;border:1px solid rgba(163,62,49,.28);color:var(--red);line-height:1.5}
.mp-aviso b{display:block;font-size:12.5px;font-weight:800}
.mp-aviso span{display:block;font-size:11.5px;color:var(--brown-3)}
.mp-desafio-nota{margin:8px 4px 0;font-size:10.5px;color:var(--muted);line-height:1.5}

.mp-resumo{margin:0 0 10px;padding:11px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);line-height:1.5}
.mp-resumo:empty{display:none}
.mp-resumo b{display:block;font-size:13px;font-weight:800;color:var(--ink)}
.mp-resumo span{display:block;font-size:11px;color:var(--muted);margin-top:2px}

/* ============================================================
   Cartão pela OrendaPay — 05/10/2026
   Primeira opção de cartão; o Mercado Pago fica logo abaixo.
   Usa a mesma moldura do cartão (.mp-cartao) e os campos do checkout.
   ============================================================ */
.provedores{display:grid;gap:8px;margin-bottom:10px}
.provedores[hidden],.mp-cartao[hidden],.mp-aviso[hidden]{display:none}
.provedor{
  position:relative;display:flex;align-items:center;gap:11px;padding:11px 12px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--paper);
  transition:border-color var(--t-mid),background var(--t-mid),box-shadow var(--t-mid);
}
.provedor input{position:absolute;opacity:0;pointer-events:none}
.provedor-bola{width:16px;height:16px;flex:none;border-radius:50%;border:1.5px solid var(--sand);background:#fff;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.provedor-texto b{display:block;font-size:12.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.provedor-texto small{display:block;font-size:10.5px;color:var(--muted);line-height:1.4;margin-top:2px}
.provedor.ativo{border-color:var(--rust);background:#fffcf9;box-shadow:0 0 0 3px rgba(167,94,54,.1)}
.provedor.ativo .provedor-bola{border-color:var(--rust);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 8px var(--rust)}
.provedor:focus-within{outline:2px solid var(--rust-2);outline-offset:2px}
.op-form{display:grid;gap:10px}
.op-cartao .mp-resumo small{font-weight:700;color:var(--muted)}
#enderecoDoTitular{color:var(--brown-3);font-weight:700;margin:0 0 2px}
#enderecoDoTitular[hidden]{display:none}

/* ---------- Selo NOVO (06/10/2026) ---------- */
.tag.novo{background:var(--brown);color:#fff}
.tag + .tag.novo{top:42px}

/* ============================================================
   Conheça a Cadore + Destaques da Cadore — UM card só, depois do banner
   (versão 2 · 06/10/2026). Faixa baixa de propósito, para a Seleção
   Especial aparecer logo abaixo. O lado dos vídeos tem um leve destaque (fundo
   de couro claro, título maior, mais espaço) por ser o rosto e a confiança da
   loja. Os vídeos são em pé (9:16) e pequenos; abrem grandes ao clicar. As
   novidades são cards compactos (imagem, selo NOVO, nome em até 2 linhas e
   preço). Tudo com os tokens e o estilo de card que o site já usa.
   ============================================================ */
.conheca-novidades{padding-block:14px 8px}
.cn-card{
  display:grid;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);
}
.cn-col{min-width:0}

/* Cabeçalhos: título à esquerda e, nas Novidades, o link na mesma linha de base */
.cn-cab{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:10px;line-height:1.1}
.cn-cab h2{font-size:1.3rem;line-height:1.08;font-weight:600}
.cn-cab p{display:none;margin-top:4px;font-size:12px;line-height:1.45;color:var(--muted)}
.cn-todas{
  display:inline-block;white-space:nowrap;
  font-size:10px;line-height:1.1;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--rust);
}
.cn-todas svg{display:inline-block;width:12px;height:12px;margin-left:4px;vertical-align:-1px;transition:transform var(--t-fast)}
.cn-todas:hover svg{transform:translateX(3px)}

/* ---- Lado dos vídeos: um leve destaque ---- */
.cn-videos{padding:14px 16px 16px;background:linear-gradient(165deg,#fbf3e8 0%,#f3e6d4 100%)}
.cn-videos .cn-cab h2{font-size:1.5rem}
.cn-videos-lista{
  display:flex;align-items:flex-start;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;
  margin-inline:-16px;padding:2px 16px 4px;scrollbar-width:none;
}
.cn-videos-lista::-webkit-scrollbar{display:none}
.cn-video{
  position:relative;display:block;flex:0 1 124px;min-width:100px;aspect-ratio:9/16;padding:0;overflow:hidden;
  scroll-snap-align:start;isolation:isolate;border-radius:var(--r-md);background:#15100c;box-shadow:var(--sh-2);
  color:#fff;text-align:left;cursor:pointer;
}
.cn-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--e-out)}
.cn-video::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(27,16,10,0) 72%,rgba(27,16,10,.78) 100%);
}
/* Play pequeno, na faixa livre acima da cabeça do Pablo: não cobre o rosto nem a marca da camiseta. */
.cn-video-play{
  position:absolute;left:50%;top:12%;z-index:2;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(167,94,54,.95);
  box-shadow:0 4px 12px rgba(27,16,10,.4),0 0 0 3px rgba(255,255,255,.26);
  transform:translate(-50%,-50%);transition:transform var(--t-fast),background var(--t-fast);
}
.cn-video-play svg{width:14px;height:14px;margin-left:2px}
.cn-video:hover .cn-video-play{transform:translate(-50%,-50%) scale(1.08);background:var(--rust-2)}
.cn-video-titulo{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 9px 9px;
  font-family:var(--f-display);font-weight:600;font-size:12.5px;line-height:1.1;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cn-video:focus-visible{outline-offset:3px}

/* ---- Destaques da Cadore: carrossel de mini-banners (troca sozinho; ver o script da parcial) ---- */
.cn-destaques{padding:14px 16px 16px}
.cn-destaques .cn-cab{align-items:center;margin-bottom:10px}
.cn-destaques .cn-cab h2{font-size:1.3rem}

.dc-nav{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.dc-seta{display:none}
.dc-pontos{display:flex;align-items:center;gap:6px}
.dc-ponto{
  position:relative;width:7px;height:7px;padding:0;border-radius:999px;background:rgba(43,24,16,.22);
  transition:width var(--t-mid) var(--e-out),background var(--t-fast);
}
.dc-ponto::before{content:'';position:absolute;inset:-10px -4px}   /* área de toque maior que o ponto */
.dc-ponto[aria-current="true"]{width:20px;background:var(--rust)}

.dc-janela{overflow:hidden;border-radius:var(--r-lg);touch-action:pan-y;-webkit-user-select:none;user-select:none}
.dc-janela.arrastando{cursor:grabbing}
.dc-pista{display:flex;transition:transform .65s cubic-bezier(.3,.7,.2,1);will-change:transform}
@media (prefers-reduced-motion:reduce){.dc-pista{transition:none}}

/* O destaque é um mini-banner: fotos à esquerda, selo + nome + preço, e o botão. */
.dc-slide{
  position:relative;flex:0 0 100%;min-width:0;height:150px;display:flex;overflow:hidden;
  color:var(--ink);background:linear-gradient(135deg,#fffdf9 0%,#f6ecdf 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  -webkit-user-drag:none;
}
/* costura, o mesmo motivo do resto da loja */
.dc-slide::before{
  content:'';position:absolute;inset:4px;z-index:0;pointer-events:none;
  border:1px dashed rgba(167,94,54,.3);border-radius:calc(var(--r-lg) - 4px);
}
.dc-slide:focus-visible{outline:2px solid var(--rust);outline-offset:-2px}
/* o escudo da marca, bem de leve, no fundo (só onde sobra largura) */
.dc-slide::after{
  content:'';display:none;position:absolute;z-index:0;right:-10px;top:50%;height:150%;aspect-ratio:318/351;transform:translateY(-50%);
  background:rgba(167,94,54,.1);pointer-events:none;
  -webkit-mask:url('../img/shield_l.webp') center/contain no-repeat;mask:url('../img/shield_l.webp') center/contain no-repeat;
}

.dc-fotos{position:relative;z-index:1;flex:0 0 auto;display:flex;gap:6px;height:100%;padding:9px 0 9px 9px}
.dc-foto{
  position:relative;height:100%;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--r-md);border:1px solid var(--line-soft);
  background:linear-gradient(160deg,#fefcf9 0%,#f6efe5 100%);
}
.dc-foto img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:contain;pointer-events:none}   /* nunca corta a peça */
.dc-foto + .dc-foto{display:none}
.dc-chip{
  position:absolute;left:3px;bottom:3px;padding:2px 6px;border-radius:999px;
  background:rgba(27,16,10,.88);color:#fff;font-size:9.5px;font-weight:800;line-height:1.3;letter-spacing:.02em;
}

.dc-corpo{
  position:relative;z-index:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:8px;padding:8px 12px 8px 10px;
}
.dc-texto{display:grid;gap:3px;min-width:0;max-width:100%;justify-items:start}
.dc-selo{
  display:inline-block;padding:4px 10px;border-radius:999px;color:#fff;background:var(--brown);
  font-size:10px;font-weight:800;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 2px 8px rgba(43,24,16,.18);
}
.dc-promocao .dc-selo{background:linear-gradient(150deg,var(--rust-2),var(--rust))}
.dc-novo .dc-selo{background:var(--brown)}
.dc-destaque .dc-selo{background:linear-gradient(150deg,#b9852f,var(--amber))}
.dc-campanha .dc-selo{background:linear-gradient(150deg,#c4503f,var(--red))}
.dc-escuro .dc-selo{box-shadow:0 0 0 1px rgba(255,255,255,.28),0 2px 8px rgba(0,0,0,.3)}
.dc-titulo{
  font-family:var(--f-display);font-weight:600;font-size:1.02rem;line-height:1.14;letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dc-sub{display:none;font-size:12px;line-height:1.3;color:var(--muted)}
.dc-preco{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px}
.dc-preco em{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dc-preco strong{font-family:var(--f-display);font-size:1.3rem;font-weight:600;letter-spacing:-.03em;line-height:1.05;white-space:nowrap}
.dc-botao{
  display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;
  color:#fff;background:var(--rust);white-space:nowrap;
  font-size:10px;font-weight:800;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;
  transition:background var(--t-fast),transform var(--t-fast);
}
.dc-botao svg{width:12px;height:12px;flex:0 0 auto}

/* Campanha no visual escuro (ex.: Torra-Torra): fundo marrom, para chamar mais o olho */
.dc-escuro{color:#fff;background:linear-gradient(135deg,#2b1810 0%,#4a2b1c 100%);border-color:var(--brown)}
.dc-escuro::before{border-color:rgba(255,255,255,.2)}
.dc-escuro .dc-preco em{color:rgba(255,255,255,.72)}
.dc-escuro .dc-sub{color:rgba(255,255,255,.8)}
.dc-escuro .dc-botao{background:var(--rust-2)}
.dc-escuro::after{background:rgba(255,255,255,.07)}

/* Campo vazio não deixa espaço: sem imagem o texto ocupa o lugar dela; sem link o banner não é clicável */
.dc-sem-fotos .dc-corpo{padding-left:22px}
div.dc-slide{cursor:default}

/* ---- Só um dos lados existe ---- */
.cn-card.cn-sem-destaques{max-width:440px;margin-inline:0}

/* ---- Tablet e computador: uma FAIXA baixa, vídeos à esquerda e destaques à direita ----
   O título dos vídeos fica ao lado deles (e não em cima); nos Destaques o título, as setas e os
   pontos ficam na mesma linha, acima de um banner deitado. */
@media (min-width:760px){
  .conheca-novidades{padding-block:10px 6px}
  .cn-card{grid-template-columns:auto minmax(0,1fr);align-items:stretch}
  .cn-card.cn-so-um{grid-template-columns:minmax(0,1fr)}
  .cn-cab p{display:block}

  .cn-videos{display:flex;align-items:center;gap:16px;padding:10px 18px}
  .cn-videos .cn-cab{display:block;flex:0 0 118px;margin:0}
  .cn-videos .cn-cab h2{font-size:1.5rem;line-height:1.06}
  .cn-videos .cn-cab p{display:none}
  .cn-videos-lista{overflow:visible;gap:12px;margin:0;padding:0}
  .cn-video{flex:0 0 88px;min-width:0}
  .cn-video-play{width:28px;height:28px;box-shadow:0 3px 10px rgba(27,16,10,.4),0 0 0 3px rgba(255,255,255,.26)}
  .cn-video-play svg{width:12px;height:12px}
  .cn-video-titulo{padding:0 7px 7px;font-size:11px}

  .cn-destaques{display:flex;flex-direction:column;justify-content:center;padding:10px 18px}
  .cn-destaques .cn-cab{margin:0 0 8px;min-height:22px}
  .cn-destaques .cn-cab h2{font-size:1.2rem;line-height:1.05}

  .dc-slide{height:126px}
  .dc-fotos{padding:8px 0 8px 8px}
  .dc-corpo{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px 8px 12px}
  .dc-texto{flex:1 1 auto}
  .dc-titulo{font-size:1rem}
  .dc-preco strong{font-size:1.25rem}
  /* no tablet o botão é só a setinha: não sobra largura para o texto */
  .dc-botao{width:34px;height:34px;padding:0;justify-content:center;flex:0 0 auto}
  .dc-botao span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dc-botao svg{width:14px;height:14px}

  /* Sem destaque, o card tem o tamanho do que tem dentro e fica encostado na esquerda,
     no mesmo eixo do texto do banner (a margem esquerda é a do próprio .shell). */
  .cn-card.cn-sem-destaques{width:fit-content;max-width:100%;margin-inline:0;grid-template-columns:auto}
  .cn-sem-destaques .cn-videos .cn-cab{flex-basis:200px}
  .cn-sem-destaques .cn-videos .cn-cab p{display:block}
}
@media (min-width:1100px){
  .cn-videos{gap:18px;padding:10px 22px}
  .cn-videos .cn-cab{flex-basis:132px}
  .cn-videos .cn-cab h2{font-size:1.6rem}
  .cn-destaques{padding:10px 20px}
  .cn-destaques .cn-cab h2{font-size:1.3rem}
  .dc-nav{gap:10px}
  .dc-seta{
    display:grid;place-items:center;width:22px;height:22px;padding:0;border-radius:50%;
    color:var(--rust);background:var(--paper);border:1px solid var(--line);
    transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
  }
  .dc-seta svg{width:11px;height:11px}
  .dc-anterior svg{transform:scaleX(-1)}
  .dc-seta:hover{color:#fff;background:var(--rust);border-color:var(--rust)}

  .dc-slide::after{display:block}
  .dc-foto + .dc-foto{display:block}
  .dc-corpo{gap:18px;padding:8px 20px 8px 18px}
  .dc-sub{display:block}
  .dc-titulo{font-size:1.15rem}
  .dc-preco strong{font-size:1.5rem}
  .dc-botao{width:auto;height:auto;padding:10px 16px}
  .dc-botao span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .dc-botao svg{width:12px;height:12px}
  .cn-sem-destaques .cn-videos .cn-cab{flex-basis:230px}
}
/* Tela alta (1080 e parecidas): sobra altura, então a faixa pode ser um pouco maior e ainda
   deixar o começo dos primeiros cards da Seleção Especial na primeira tela. */
@media (min-width:1100px) and (min-height:900px){
  .conheca-novidades{padding-block:14px 6px}
  .cn-videos{padding:12px 22px}
  .cn-videos .cn-cab{flex-basis:146px}
  .cn-videos .cn-cab h2{font-size:1.75rem}
  .cn-video{flex-basis:100px}
  .cn-video-play{width:30px;height:30px}
  .cn-video-play svg{width:13px;height:13px}
  .cn-video-titulo{font-size:12px}
  .cn-destaques{padding:12px 20px}
  .cn-destaques .cn-cab h2{font-size:1.4rem}
  .dc-slide{height:146px}
  .dc-titulo{font-size:1.25rem}
  .dc-preco strong{font-size:1.65rem}
  .dc-campanha .dc-titulo{font-size:1.12rem}
  .dc-campanha .dc-sub{font-size:11.5px}
  .cn-sem-destaques .cn-videos .cn-cab{flex-basis:250px}
}
/* Computador estreito (1100 a 1279): o carrossel tem pouca largura, então o Torra-Torra mostra duas fotos e sem a frase de apoio. */
@media (min-width:1100px) and (max-width:1279px){
  .dc-campanha .dc-foto:nth-child(3){display:none}
  .dc-sub{display:none}
  .dc-botao{padding:10px 13px}
}
@media (hover:hover) and (pointer:fine){
  .dc-slide:hover .dc-botao{background:var(--rust-2);transform:translateX(2px)}
  .dc-escuro:hover .dc-botao{background:#d89466}
  .cn-video:hover img{transform:scale(1.035)}
}

/* ---- O player: uma janela que serve aos dois vídeos ---- */
dialog.cn-modal{
  width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden;
}
dialog.cn-modal[open]{display:grid;place-items:center}
dialog.cn-modal::backdrop{background:rgba(20,11,6,.86);backdrop-filter:blur(6px)}
.cn-modal-caixa{position:relative;display:grid;gap:10px;justify-items:center;max-width:94vw}
.cn-modal video{
  display:block;height:min(80vh,780px);max-width:94vw;aspect-ratio:9/16;
  background:#15100c;border-radius:var(--r-lg);box-shadow:var(--sh-4);object-fit:contain;
}
.cn-modal-fechar{
  position:absolute;top:10px;right:10px;z-index:3;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(27,16,10,.66);backdrop-filter:blur(6px);
}
.cn-modal-fechar svg{width:18px;height:18px}
.cn-modal-fechar:hover{background:var(--rust)}
.cn-modal-legenda{display:grid;gap:2px;text-align:center;max-width:min(94vw,440px)}
.cn-modal-legenda strong{font-family:var(--f-display);font-weight:600;font-size:1.05rem;line-height:1.2}
.cn-modal-legenda span{font-size:12px;color:rgba(255,255,255,.78)}

/* Conheça a Cadore com 3 vídeos — só no computador: o lado dos vídeos fica mais justo
   (título, miniaturas e espaços um pouco menores) para o Destaques da Cadore não ficar
   apertado. A altura do bloco não muda. Com 2 vídeos nada disto vale. */
@media (min-width:1100px){
  .cn-videos.cn-tres-videos{gap:14px;padding-inline:18px}
  .cn-tres-videos .cn-cab{flex-basis:118px}
  .cn-tres-videos .cn-cab h2{font-size:1.5rem}
  .cn-tres-videos .cn-videos-lista{gap:10px}
  .cn-tres-videos .cn-video{flex-basis:88px}
  .cn-tres-videos .cn-video-titulo{font-size:11px}
  /* O banner de campanha (Torra-Torra) tem título em duas linhas: um pouco menor, para caber inteiro. */
  .cn-tres-videos ~ .cn-destaques .dc-campanha .dc-titulo{font-size:1.02rem}
  .cn-tres-videos ~ .cn-destaques .dc-campanha .dc-sub{font-size:11px}
  .cn-tres-videos ~ .cn-destaques .dc-campanha .dc-botao{padding:10px 13px}
}

/* Seções de pelego (09/10/2026): em cima só "Ordenar" e os botões de preço; os
   botões das outras seções desceram para o fim da página. Tudo reaproveita o
   chip .filter e o rótulo .ordem-kits-rotulo — aqui só espaço e alinhamento. */
.pelego-controles{display:grid;gap:10px;margin:0 0 18px}
.pelego-controles .ordem-kits{margin:0;justify-content:flex-start}
.secao-grade > [hidden]{display:none}
.secoes-no-fim{display:grid;gap:12px;margin-top:38px;padding-top:24px;border-top:1px solid var(--line)}
@media (min-width:780px){
  .pelego-controles{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px}
  .secoes-no-fim .filters{justify-content:flex-start}
}

/* ============================================================
   Conheça a Cadore em carrossel (13/10/2026). O título sobe para cima das
   miniaturas, com as setas ao lado (o mesmo desenho das setas dos Destaques), e a
   fileira mostra quatro vídeos de cada vez; o resto — mais vídeos e as fotos da
   loja — vem pelas setas ou arrastando. As miniaturas dos vídeos continuam com o
   tamanho de antes no computador. Foto e vídeo têm a mesma altura e cada um a sua
   proporção: nada é recortado. Tudo aqui vale só para .cn-carrossel.
   ============================================================ */
/* Celular: cabem três miniaturas e o começo da quarta, para dar a ver que tem mais. */
.cn-carrossel{--cn-w:min(124px,calc((100vw - 106px) / 3));--cn-vao:10px}
.cn-carrossel .cn-cab{align-items:center}
.cn-nav{display:none;align-items:center;gap:8px;flex:0 0 auto}
.cn-nav[hidden]{display:none}
.cn-seta{
  position:relative;display:grid;place-items:center;width:22px;height:22px;padding:0;border-radius:50%;cursor:pointer;
  color:var(--rust);background:var(--paper);border:1px solid var(--line);
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),opacity var(--t-fast);
}
.cn-seta::before{content:'';position:absolute;inset:-9px -5px}   /* área de toque maior que a seta */
.cn-seta svg{width:11px;height:11px}
.cn-anterior svg{transform:scaleX(-1)}
.cn-seta:disabled{opacity:.38;cursor:default}
.cn-carrossel .cn-videos-lista{gap:var(--cn-vao);scroll-padding-inline:16px;overscroll-behavior-x:contain}
.cn-carrossel .cn-item{flex:0 0 auto;scroll-snap-align:start}
.cn-carrossel .cn-video{flex:0 0 var(--cn-w);width:var(--cn-w);min-width:0}
/* A foto: mesma altura do vídeo (9:16) e a largura que a proporção dela pedir (--prop vem da foto). */
.cn-foto{
  position:relative;display:block;height:calc(var(--cn-w) * 16 / 9);width:calc(var(--cn-w) * 16 / 9 * var(--prop,.75));
  padding:0;overflow:hidden;isolation:isolate;border-radius:var(--r-md);background:#15100c;box-shadow:var(--sh-2);cursor:zoom-in;
}
.cn-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--e-out)}
.cn-foto:focus-visible{outline-offset:3px}
/* No celular a miniatura ficou um pouco mais estreita (para caber o começo da quarta): o nome
   usa a mesma letra do computador, para "Pablo Cadore" continuar inteiro. */
@media (max-width:759px){
  .cn-carrossel .cn-video-titulo{padding:0 7px 8px;font-size:11px}
}

@media (min-width:760px){
  .cn-carrossel{--cn-w:88px;--cn-vao:12px}
  .cn-videos.cn-carrossel{display:block;padding:10px 18px 12px}
  .cn-carrossel .cn-cab{display:flex;margin:0 0 8px;min-height:22px}
  .cn-carrossel .cn-cab h2{font-size:1.2rem;line-height:1.05}
  .cn-nav{display:flex}
  /* A janela tem a largura exata de quatro vídeos, sem folga dos lados: assim nunca aparece
     uma lasca do item seguinte. A folga em cima e embaixo (devolvida pela margem negativa) é
     para a sombra; o contorno de foco fica por dentro da miniatura, para não sair cortado. */
  .cn-carrossel .cn-videos-lista{
    width:calc(4 * var(--cn-w) + 3 * var(--cn-vao));overflow-x:auto;overflow-y:hidden;
    margin:-4px 0 -10px;padding:4px 0 10px;scroll-padding-inline:0;
  }
  .cn-carrossel .cn-item:focus-visible{outline-offset:-2px}
  /* Destaques: o título fica na mesma linha do título dos vídeos e o banner, do tamanho de
     sempre, centrado na altura das miniaturas. */
  .cn-carrossel ~ .cn-destaques{justify-content:flex-start}
  .cn-carrossel ~ .cn-destaques .dc{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
  .cn-carrossel ~ .cn-destaques .dc-janela{margin-block:auto}
  .cn-sem-destaques .cn-carrossel .cn-cab{gap:4px 24px}
}
@media (min-width:1100px){
  .cn-videos.cn-carrossel{padding:10px 22px 12px}
  .cn-carrossel .cn-cab h2{font-size:1.3rem}
}
@media (min-width:1100px) and (min-height:900px){
  .cn-videos.cn-carrossel{padding:12px 22px 14px}
  .cn-carrossel .cn-cab h2{font-size:1.4rem}
}
@media (hover:hover) and (pointer:fine){
  .cn-seta:hover:not(:disabled){color:#fff;background:var(--rust);border-color:var(--rust)}
  .cn-foto:hover img{transform:scale(1.035)}
}

/* A janela do vídeo também mostra a foto ampliada, inteira e na proporção dela. */
.cn-modal video[hidden],.cn-modal-foto[hidden]{display:none}
.cn-modal-foto{
  display:block;width:auto;height:auto;max-width:94vw;max-height:min(84vh,1100px);
  background:#15100c;border-radius:var(--r-lg);box-shadow:var(--sh-4);
}

/* Campanha com frase comprida (ex.: a do brinde): o título pode ir a três linhas, para
   nunca sair cortado no celular. Título curto continua como estava. */
.dc-campanha .dc-titulo{-webkit-line-clamp:3}
/* Campanha só de texto (sem foto): a frase é o banner, então a letra cresce um pouco onde
   há largura — celular e computador. No tablet a coluna é estreita e fica como estava. */
.dc-campanha.dc-sem-fotos .dc-titulo{font-size:1.15rem;line-height:1.18}
@media (min-width:760px){
  .dc-campanha.dc-sem-fotos .dc-titulo{font-size:1.02rem;line-height:1.14}
}
@media (min-width:1100px){
  .cn-carrossel ~ .cn-destaques .dc-campanha.dc-sem-fotos .dc-titulo{font-size:1.35rem;line-height:1.16}
  .dc-campanha.dc-sem-fotos .dc-texto{gap:6px}
}

/* Frase de campanha em duas linhas, com letra maior (pedido do Édipo, 13/10/2026, à noite).
   O título da campanha respeita a quebra de linha que vier no texto do painel. Na campanha só
   de texto — hoje a do brinde — a letra acompanha a largura do próprio banner: o maior tamanho
   em que a linha mais comprida ("ganha uma rédea de brinde!") ainda cabe inteira, do celular
   ao computador. Frase mais comprida que essa continua cabendo, só que em três linhas. */
.dc-campanha .dc-titulo{white-space:pre-line}
.dc-campanha.dc-sem-fotos{container-type:inline-size}
.dc-campanha.dc-sem-fotos .dc-texto{gap:6px}
/* navegador antigo, sem medida pelo banner: tamanhos fixos e seguros */
.dc-campanha.dc-sem-fotos .dc-titulo{font-size:1.1rem;line-height:1.14}
@media (min-width:760px){
  .dc-campanha.dc-sem-fotos .dc-titulo{font-size:.92rem}
}
@media (min-width:1100px){
  .cn-carrossel ~ .cn-destaques .dc-campanha.dc-sem-fotos .dc-titulo{font-size:1.6rem}
}
@supports (font-size:1cqw){
  .dc-campanha.dc-sem-fotos .dc-titulo,
  .cn-carrossel ~ .cn-destaques .dc-campanha.dc-sem-fotos .dc-titulo{
    font-size:clamp(.9rem,calc((100cqw - 44px) / 13.4),1.8rem);line-height:1.12;
  }
  @media (min-width:1100px) and (min-height:900px){
    .cn-carrossel ~ .cn-destaques .dc-campanha.dc-sem-fotos .dc-titulo{font-size:clamp(.9rem,calc((100cqw - 44px) / 13.4),2rem)}
  }
}

/* ---------- Destaque animado: banner do brinde (campanha só de texto em duas partes) ----------
   A segunda parte da frase ("ganha uma rédea de brinde!") entra como uma cortina cor de
   ferrugem que cresce da direita, traz o presente e um brilho, e depois recolhe devolvendo o
   banner, cujo selo e título entram de novo. Ciclo de 6,5 s, que repete enquanto o mouse está
   em cima; no carrossel o destaque fica ~4,5 s no ar, então a virada aparece uma vez inteira.
   Só roda com o script ligado (.dc-anim-ok), o carrossel na tela (.dc-em-vista) e o destaque
   da vez (.dc-ativo). Sem isso, ou com "menos movimento", o banner é o parado de sempre. */
.dc-cortina{display:none}
.dc-anim-ok.dc-em-vista .dc-animada.dc-ativo .dc-cortina{
  display:flex;position:absolute;inset:0;z-index:3;align-items:center;gap:14px;padding:0 22px 0 20px;
  overflow:hidden;pointer-events:none;border-radius:inherit;color:#fff;
  background:linear-gradient(120deg,#b86f43 0%,#8f4b28 100%);
  clip-path:circle(0% at 100% 50%);
  animation:dc-cortina 6.5s 1.9s infinite backwards;
}
.dc-cortina::before{   /* a costura, como no resto do banner */
  content:'';position:absolute;inset:4px;border:1px dashed rgba(255,255,255,.38);
  border-radius:calc(var(--r-lg) - 4px);pointer-events:none;
}
.dc-cortina::after{    /* o brilho que passa */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.24) 48%,transparent 66%);
  transform:translateX(-120%);
  animation:dc-brilho 6.5s 1.9s infinite backwards;
}
/* o presente grande e clarinho no fundo da cortina, como o escudo da marca no banner.
   No celular fica menor e encostado na borda, para não passar por baixo da frase. */
.dc-brinde{
  --dc-presente-fundo:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='.17' stroke-width='.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
}
.dc-anim-ok.dc-em-vista .dc-brinde.dc-ativo .dc-cortina{
  background:var(--dc-presente-fundo) no-repeat right -42px center / auto 112%,linear-gradient(120deg,#b86f43 0%,#8f4b28 100%);
}
@media (min-width:760px){
  .dc-anim-ok.dc-em-vista .dc-brinde.dc-ativo .dc-cortina{
    background:var(--dc-presente-fundo) no-repeat right 14px center / auto 135%,linear-gradient(120deg,#b86f43 0%,#8f4b28 100%);
  }
}
.dc-presente{
  position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:#fff6ea;color:#7a3b1c;box-shadow:0 4px 14px rgba(0,0,0,.28);
}
.dc-presente svg{width:24px;height:24px}
.dc-payoff{
  position:relative;font-family:var(--f-display);font-weight:600;font-size:1.3rem;line-height:1.12;
  letter-spacing:-.02em;text-wrap:balance;
}
@media (min-width:760px){ .dc-presente{width:54px;height:54px} .dc-presente svg{width:28px;height:28px} .dc-payoff{font-size:1.5rem} }
@media (min-width:1100px){ .dc-payoff{font-size:1.7rem} }

.dc-anim-ok.dc-em-vista .dc-animada.dc-ativo .dc-presente{animation:dc-presente 6.5s 1.9s infinite backwards}
.dc-anim-ok.dc-em-vista .dc-animada.dc-ativo .dc-payoff{animation:dc-payoff 6.5s 1.9s infinite backwards}
/* o banner por baixo: entra quando o destaque chega e de novo quando a cortina recolhe */
.dc-anim-ok.dc-em-vista .dc-animada.dc-ativo .dc-selo{
  animation:dc-selo-ciclo 6.5s 1.9s infinite backwards, dc-selo-entrada .55s .15s backwards;
}
.dc-anim-ok.dc-em-vista .dc-animada.dc-ativo .dc-titulo{
  animation:dc-titulo-ciclo 6.5s 1.9s infinite backwards, dc-titulo-entrada .6s .3s backwards;
}

@keyframes dc-cortina{
  0%{clip-path:circle(0% at 100% 50%);animation-timing-function:cubic-bezier(.7,0,.2,1)}
  11%{clip-path:circle(170% at 100% 50%)}
  55%{clip-path:circle(170% at 100% 50%);animation-timing-function:cubic-bezier(.7,0,.2,1)}
  66%,100%{clip-path:circle(0% at 100% 50%)}
}
@keyframes dc-brilho{
  0%,16%{transform:translateX(-120%)}
  30%,100%{transform:translateX(120%)}
}
@keyframes dc-presente{
  0%,9%{transform:scale(0) rotate(-25deg);opacity:0}
  15%{transform:scale(1.18) rotate(8deg);opacity:1}
  19%{transform:scale(1) rotate(0)}
  33%{transform:scale(1) rotate(0)}
  36%{transform:scale(1.1) rotate(-7deg)}
  40%{transform:scale(1) rotate(6deg)}
  44%,100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes dc-payoff{
  0%,10%{opacity:0;transform:translateX(26px)}
  20%,100%{opacity:1;transform:none}
}
@keyframes dc-selo-ciclo{
  0%,52%{transform:scale(1);opacity:1}
  53%{transform:scale(.5);opacity:0}
  62%{transform:scale(1.14);opacity:1}
  67%,100%{transform:scale(1);opacity:1}
}
@keyframes dc-titulo-ciclo{
  0%,52%{transform:none;opacity:1}
  53%{transform:translateY(12px);opacity:0}
  65%,100%{transform:none;opacity:1}
}
@keyframes dc-selo-entrada{
  from{transform:scale(.4);opacity:0}
  65%{transform:scale(1.12);opacity:1}
  to{transform:scale(1);opacity:1}
}
@keyframes dc-titulo-entrada{
  from{transform:translateY(14px);opacity:0}
  to{transform:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){ .dc-cortina{display:none !important} }

/* ---------- Simulador de parcelas no carrinho (21/10/2026) ---------- */
.simulador{margin:14px 0 4px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.simulador[hidden]{display:none}
.simulador summary{display:flex;align-items:center;gap:9px;padding:12px 14px;cursor:pointer;font-weight:800;font-size:13px;color:var(--ink);list-style:none}
.simulador summary::-webkit-details-marker{display:none}
.simulador summary svg{width:18px;height:18px;flex:none;color:var(--rust)}
.simulador summary::after{content:"+";margin-left:auto;font-size:18px;color:var(--rust)}
.simulador[open] summary::after{content:"−"}
.sim-corpo{padding:0 14px 14px;display:grid;gap:10px}
.sim-chips{display:flex;flex-wrap:wrap;gap:6px}
.sim-chips[hidden]{display:none}
.sim-chip{font:inherit;font-size:12px;font-weight:700;padding:7px 11px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.sim-chip.ativo{border-color:var(--rust);background:#fffcf9;box-shadow:0 0 0 3px rgba(167,94,54,.1)}
.sim-lista{display:grid;gap:0;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.sim-linha{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;font-size:12.5px;border-top:1px solid var(--line)}
.sim-linha:first-child{border-top:0}
.sim-linha span{color:var(--muted);font-size:11.5px;text-align:right}
.sim-espera{padding:12px;font-size:12px;color:var(--muted)}
.sim-nota{margin:0;font-size:11px;line-height:1.5;color:var(--muted)}

/* ---------- Cupom de desconto no carrinho (23/10/2026) ---------- */
.cupom-bloco{margin:14px 0 4px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.cupom-bloco[hidden]{display:none}
.cupom-bloco summary{display:flex;align-items:center;gap:9px;padding:12px 14px;cursor:pointer;font-weight:800;font-size:13px;color:var(--ink);list-style:none}
.cupom-bloco summary::-webkit-details-marker{display:none}
.cupom-bloco summary svg{width:18px;height:18px;flex:none;color:var(--rust)}
.cupom-bloco summary::after{content:"+";margin-left:auto;font-size:18px;color:var(--rust)}
.cupom-bloco[open] summary::after{content:"−"}
.cupom-corpo{padding:0 14px 14px;display:grid;gap:8px}
.cupom-linha{display:flex;gap:8px}
.cupom-linha input{flex:1;min-width:0;padding:11px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:14px;text-transform:uppercase}
.cupom-btn{font:inherit;font-size:12.5px;font-weight:800;padding:0 16px;border:0;border-radius:12px;background:linear-gradient(165deg,var(--rust-2),var(--rust));color:#fff;cursor:pointer}
.cupom-btn-claro{background:#fff;color:var(--rust);border:1.5px solid var(--line);padding:8px 12px}
.cupom-aplicado{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#f1f7ef;border:1px solid #cfe2c9;font-size:13px;font-weight:700;color:#2d5a27}
.cupom-aplicado[hidden]{display:none}
.cupom-msg{margin:0;font-size:12px;line-height:1.45;color:var(--muted)}
.cupom-msg.erro{color:#a33a2a;font-weight:700}
.cupom-nota{margin:0;font-size:11px;color:var(--muted)}
.item-cupom{display:block;color:#2d5a27;font-weight:700;font-size:11.5px}
.cupom-linha[hidden]{display:none}