/* ═══════════════════════════════════════════════════════
   E2X COMERCIAL — DESIGN SYSTEM 2024
   Mobile-first · Animated · Modern
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --green:       #3E8E63;
  --green-dark:  #2F7350;
  --green-xdark: #1F5238;
  --green-light: #EAF4EF;
  --green-glow:  rgba(62,142,99,.18);
  --g50:  #fafafa; --g100:#f4f4f5; --g200:#e4e4e7;
  --g300: #d1d1d6; --g400:#a1a1aa; --g500:#71717a;
  --g600: #52525b; --g700:#3f3f46; --g800:#27272a; --g900:#18181b;
  --white:#ffffff;
  --red:#ef4444; --amber:#f59e0b; --blue:#3b82f6; --purple:#8b5cf6;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 4px 16px rgba(0,0,0,.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.16);
  --r-xs:4px; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-full:9999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --dur:.22s;
}

*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--g100);color:var(--g900);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;-webkit-tap-highlight-color:transparent}
input,select,textarea{font-family:inherit}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--g100)}
::-webkit-scrollbar-thumb{background:var(--g300);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--green)}

/* ══════════════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════════════ */
@keyframes fadeUp    {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn    {from{opacity:0}to{opacity:1}}
@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn   {from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes pulse     {0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes spin      {to{transform:rotate(360deg)}}
@keyframes shimmer   {0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes float     {0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes glow      {0%,100%{box-shadow:0 0 0 0 var(--green-glow)}50%{box-shadow:0 0 20px 4px var(--green-glow)}}
@keyframes countUp   {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounceDot {0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
@keyframes toastIn   {from{transform:translateX(80px) scale(.9);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}
@keyframes toastOut  {from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.85)}}
@keyframes cartBounce{0%{transform:scale(1)}30%{transform:scale(1.4)}60%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes gradMove  {0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes ripple    {0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}

/* ══════════════════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════════════════ */
.topbar{background:var(--g900);color:var(--g400);font-size:12px;padding:7px 0;animation:slideRight .4s var(--ease)}
.topbar .wrap{max-width:1380px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:16px}
.topbar span{display:flex;align-items:center;gap:5px}
.topbar i{color:var(--green);font-size:11px}
.topbar .ml{margin-left:auto;display:flex;gap:14px}
.topbar a{color:var(--g400);transition:color var(--dur)}
.topbar a:hover{color:var(--green)}

/* ══════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════ */
.header{
  background:white;border-bottom:1px solid var(--g200);
  position:sticky;top:0;z-index:900;
  box-shadow:var(--shadow-sm);
  animation:fadeIn .3s var(--ease);
}
.header-inner{
  max-width:1380px;margin:0 auto;padding:0 16px;
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:20px;height:68px;
}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:42px;transition:transform var(--dur) var(--ease-back)}
.logo:hover img{transform:scale(1.05)}

/* Search */
.search-wrap{position:relative}
.search-wrap input{
  width:100%;height:42px;padding:0 48px 0 18px;
  border:2px solid var(--g200);border-radius:var(--r-full);
  font-size:14px;outline:none;transition:border-color var(--dur),box-shadow var(--dur),background var(--dur);
  background:var(--g50);
}
.search-wrap input:focus{border-color:var(--green);background:white;box-shadow:0 0 0 4px var(--green-glow)}
.search-wrap input::placeholder{color:var(--g400)}
.search-btn{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  background:var(--green);color:white;width:32px;height:32px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;font-size:13px;
  transition:background var(--dur),transform var(--dur) var(--ease-back);
}
.search-btn:hover{background:var(--green-dark);transform:translateY(-50%) scale(1.1)}
.search-btn:active{transform:translateY(-50%) scale(.95)}

/* Search dropdown */
.search-dd{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:white;border:1px solid var(--g200);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);z-index:200;overflow:hidden;
  display:none;animation:scaleIn .2s var(--ease);transform-origin:top center;
}
.search-dd.show{display:block}
.sdi{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;transition:background .15s}
.sdi:hover{background:var(--g50)}
.sdi img{width:40px;height:40px;object-fit:contain;border-radius:var(--r-sm);background:var(--g100);padding:2px}
.sdi-name{font-size:13px;font-weight:500;line-height:1.3}
.sdi-price{font-size:12px;color:var(--green);font-weight:700;margin-top:2px}
.sdi-cat{font-size:10px;color:var(--g400);margin-top:1px}

/* Header actions */
.h-actions{display:flex;align-items:center;gap:6px}
.h-btn{
  position:relative;border:1.5px solid var(--g200);border-radius:var(--r);
  padding:8px 13px;font-size:13px;font-weight:500;color:var(--g700);
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  transition:border-color var(--dur),color var(--dur),background var(--dur),transform var(--dur) var(--ease-back);
}
.h-btn:hover{border-color:var(--green);color:var(--green)}
.h-btn:active{transform:scale(.97)}
.h-btn.primary{background:var(--green);border-color:var(--green);color:white}
.h-btn.primary:hover{background:var(--green-dark);border-color:var(--green-dark)}
.h-btn .badge{
  position:absolute;top:-7px;right:-7px;background:var(--red);color:white;
  font-size:10px;font-weight:700;width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:2px solid white;
  animation:cartBounce .4s var(--ease-back);
}

/* NAV */
.nav{background:var(--g900);border-bottom:2px solid var(--green)}
.nav-inner{
  max-width:1380px;margin:0 auto;padding:0 16px;
  display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.nav-inner::-webkit-scrollbar{display:none}
.nav-item{
  display:flex;align-items:center;gap:6px;padding:10px 15px;
  color:var(--g400);font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-2px;
  transition:color var(--dur),border-color var(--dur),background var(--dur);
  position:relative;
}
.nav-item i{font-size:12px}
.nav-item:hover{color:white}
.nav-item.active{color:white;border-bottom-color:var(--green)}
.nav-item.active::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;
  background:var(--green);border-radius:2px 2px 0 0;
}

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.hero{
  background:linear-gradient(135deg,var(--g900) 0%,#1c1c2e 55%,#0f1117 100%);
  padding:52px 16px;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 90% at 70% 50%,rgba(62,142,99,.13),transparent);
  pointer-events:none;animation:gradMove 8s ease infinite;background-size:200% 200%;
}
.hero::after{
  content:'';position:absolute;bottom:-80px;left:-80px;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(var(--green-glow),transparent 70%);pointer-events:none;
}
.hero-wrap{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:1fr 420px;gap:44px;align-items:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(62,142,99,.15);border:1px solid rgba(62,142,99,.3);
  color:var(--green);border-radius:var(--r-full);padding:4px 14px;
  font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:16px;
  animation:fadeUp .5s var(--ease) .1s both;
}
.hero h1{
  font-size:46px;font-weight:800;line-height:1.1;color:white;margin-bottom:14px;
  animation:fadeUp .5s var(--ease) .2s both;
}
.hero h1 em{font-style:normal;color:var(--green)}
.hero p{
  font-size:15px;color:var(--g400);line-height:1.7;margin-bottom:26px;max-width:480px;
  animation:fadeUp .5s var(--ease) .3s both;
}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap;animation:fadeUp .5s var(--ease) .4s both}
.hero-stats{display:flex;gap:24px;margin-top:28px;flex-wrap:wrap;animation:fadeUp .5s var(--ease) .5s both}
.hstat{text-align:center}
.hstat .n{font-size:26px;font-weight:800;color:var(--green)}
.hstat .l{font-size:10px;color:var(--g500);font-weight:500;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

/* Hero card */
.hero-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-2xl);padding:18px;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  animation:scaleIn .5s var(--ease) .3s both;
}
.hmc{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r);padding:12px;cursor:pointer;
  transition:background var(--dur),border-color var(--dur),transform var(--dur) var(--ease-back);
  display:flex;flex-direction:column;gap:6px;
}
.hmc:hover{background:rgba(62,142,99,.12);border-color:rgba(62,142,99,.3);transform:translateY(-2px)}
.hmc img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:var(--r-sm);background:rgba(255,255,255,.05);padding:6px}
.hmc-name{font-size:11px;color:var(--g300);font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hmc-price{font-size:13px;font-weight:700;color:var(--green)}

/* ══════════════════════════════════════════════════════
   TRUST BAR
══════════════════════════════════════════════════════ */
.trust{background:white;border-bottom:1px solid var(--g200)}
.trust-wrap{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.trust-item{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-right:1px solid var(--g200);font-size:13px;font-weight:500;color:var(--g700);
  transition:background var(--dur);
}
.trust-item:hover{background:var(--g50)}
.trust-item:last-child{border-right:none}
.trust-item i{color:var(--green);font-size:19px;flex-shrink:0;transition:transform var(--dur) var(--ease-back)}
.trust-item:hover i{transform:scale(1.15) rotate(-5deg)}
.trust-item span{font-size:11px;color:var(--g400);display:block;margin-top:2px;font-weight:400}

/* ══════════════════════════════════════════════════════
   BUTTONS (global)
══════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 22px;border-radius:var(--r);font-size:14px;font-weight:700;
  transition:all var(--dur) var(--ease-back);position:relative;overflow:hidden;
}
.btn::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:white;opacity:0;transition:opacity .15s;
}
.btn:active::after{opacity:.12}
.btn-green{background:var(--green);color:white;border:none}
.btn-green:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(62,142,99,.35)}
.btn-green:active{transform:translateY(0)}
.btn-outline{background:transparent;color:white;border:1.5px solid rgba(255,255,255,.3)}
.btn-outline:hover{border-color:var(--green);color:var(--green)}
.btn-wpp{background:#25D366;color:white;border:none}
.btn-wpp:hover{background:#1da851;transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,211,102,.3)}

/* Ripple effect */
.ripple-host{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background:rgba(255,255,255,.3);pointer-events:none}

/* ══════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════ */
.main{max-width:1380px;margin:0 auto;padding:24px 16px;display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start}

/* ══════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════ */
.sidebar{position:sticky;top:130px;display:flex;flex-direction:column;gap:10px}
.sb-card{
  background:white;border:1px solid var(--g200);border-radius:var(--r-lg);overflow:hidden;
  animation:fadeUp .4s var(--ease) both;
}
.sb-card:nth-child(2){animation-delay:.08s}
.sb-card:nth-child(3){animation-delay:.12s}
.sb-head{
  padding:12px 14px;border-bottom:1px solid var(--g200);
  display:flex;align-items:center;justify-content:space-between;
}
.sb-head h3{font-size:12px;font-weight:700;color:var(--g900);display:flex;align-items:center;gap:7px}
.sb-head h3 i{color:var(--green);font-size:12px}
.sb-head .clr{font-size:11px;color:var(--g400);padding:0}
.sb-head .clr:hover{color:var(--green)}
.sb-body{padding:6px 0;max-height:280px;overflow-y:auto}
.cat-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 14px;cursor:pointer;font-size:12.5px;color:var(--g600);
  border-left:2px solid transparent;text-decoration:none;
  transition:background var(--dur),color var(--dur),border-color var(--dur);
}
.cat-item:hover{background:var(--g50);color:var(--g900)}
.cat-item.active{background:var(--green-light);color:var(--green-dark);font-weight:600;border-left-color:var(--green)}
.cat-cnt{font-size:10px;background:var(--g200);color:var(--g500);padding:1px 7px;border-radius:var(--r-full);transition:background var(--dur),color var(--dur)}
.cat-item.active .cat-cnt{background:var(--green);color:white}

.price-body{padding:14px}
.price-slider{width:100%;accent-color:var(--green);margin-bottom:8px;height:4px}
.price-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--g500);margin-bottom:10px}
.price-chips{display:flex;flex-wrap:wrap;gap:5px}
.pchip{
  padding:4px 10px;border-radius:var(--r-full);border:1px solid var(--g200);
  font-size:11px;font-weight:500;color:var(--g600);background:white;
  transition:all var(--dur);
}
.pchip:hover,.pchip.on{background:var(--green);color:white;border-color:var(--green)}

.sort-body{padding:10px 14px}
.sort-sel{
  width:100%;padding:8px 12px;border:1px solid var(--g200);border-radius:var(--r-sm);
  font-size:13px;color:var(--g700);background:white;outline:none;cursor:pointer;
  transition:border-color var(--dur);
}
.sort-sel:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-glow)}

/* Sidebar mobile toggle */
.sb-toggle{
  display:none;position:fixed;bottom:80px;right:16px;z-index:800;
  width:48px;height:48px;border-radius:50%;background:var(--green);color:white;
  box-shadow:var(--shadow-lg);font-size:18px;
  align-items:center;justify-content:center;
  transition:transform var(--dur) var(--ease-back);
}
.sb-toggle:hover{transform:scale(1.1)}
.sb-toggle:active{transform:scale(.95)}

/* ══════════════════════════════════════════════════════
   PRODUCTS AREA
══════════════════════════════════════════════════════ */
.pbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.pbar h2{font-size:17px;font-weight:700}
.pbar .cnt{font-size:13px;color:var(--g400);margin-left:7px;font-weight:400}
.view-btns{display:flex;gap:3px}
.vbtn{width:30px;height:30px;border:1px solid var(--g200);border-radius:var(--r-sm);background:white;color:var(--g400);display:flex;align-items:center;justify-content:center;font-size:12px;transition:all var(--dur)}
.vbtn:hover,.vbtn.on{background:var(--green);color:white;border-color:var(--green)}

.ftags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.ftag{
  display:flex;align-items:center;gap:6px;
  background:var(--green-light);color:var(--green-dark);
  border:1px solid rgba(62,142,99,.3);padding:4px 11px;border-radius:var(--r-full);
  font-size:12px;font-weight:500;animation:scaleIn .2s var(--ease-back);
}
.ftag button{color:var(--green-dark);font-size:11px;padding:0}

/* ── PRODUCT GRID ── */
.pg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pg.list{grid-template-columns:1fr}

/* SKELETON */
.skel{
  background:linear-gradient(90deg,var(--g100) 25%,var(--g200) 50%,var(--g100) 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-lg);
}
.skel-card{background:white;border:1px solid var(--g200);border-radius:var(--r-lg);overflow:hidden;animation:fadeIn .3s var(--ease)}
.skel-img{aspect-ratio:1}
.skel-body{padding:12px;display:flex;flex-direction:column;gap:8px}
.skel-line{height:12px;border-radius:4px}
.skel-line.w60{width:60%}
.skel-line.w40{width:40%}
.skel-line.w80{width:80%}

/* CARD */
.card{
  background:white;border:1px solid var(--g200);border-radius:var(--r-lg);
  display:flex;flex-direction:column;cursor:pointer;position:relative;overflow:hidden;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s;
  animation:fadeUp .4s var(--ease) both;
  -webkit-tap-highlight-color:transparent;
}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px);border-color:var(--g300)}
.card:active{transform:translateY(-2px)}

.card-img{aspect-ratio:1;background:var(--g50);overflow:hidden;position:relative}
.card-img img{
  width:100%;height:100%;object-fit:contain;padding:12px;
  transition:transform .4s var(--ease);
}
.card:hover .card-img img{transform:scale(1.1)}

.card-badges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:4px;z-index:1}
.cbadge{display:inline-block;font-size:9px;font-weight:800;padding:2px 7px;border-radius:var(--r-full);letter-spacing:.3px;text-transform:uppercase}
.cbadge.new{background:var(--green);color:white}
.cbadge.hot{background:var(--red);color:white}
.cbadge.sale{background:var(--amber);color:var(--g900)}

.card-fav{
  position:absolute;top:7px;right:7px;z-index:1;
  width:28px;height:28px;border-radius:50%;background:white;
  border:1px solid var(--g200);display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--g400);
  opacity:0;transform:scale(.7);
  transition:opacity var(--dur),transform var(--dur) var(--ease-back),color var(--dur),border-color var(--dur),background var(--dur);
}
.card:hover .card-fav{opacity:1;transform:scale(1)}
.card-fav:hover,.card-fav.on{color:var(--red);border-color:var(--red);background:rgba(239,68,68,.08)}
.card-fav.on{opacity:1;transform:scale(1)}

.card-body{padding:12px;flex:1;display:flex;flex-direction:column;gap:4px}
.card-cat{font-size:9px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.5px}
.card-name{
  font-size:12.5px;font-weight:500;line-height:1.45;color:var(--g800);flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card-code{font-size:10px;color:var(--g400)}
.card-price{font-size:17px;font-weight:800;color:var(--g900);letter-spacing:-.4px;margin-top:2px}
/* Selo "Ver preço" — preço só para clientes cadastrados (B2B) */
.price-gate{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--green-dark,#2F7350);background:var(--green-light,#EAF4EF);border:1px solid rgba(62,142,99,.25);border-radius:100px;padding:4px 11px;text-decoration:none;white-space:nowrap;transition:background .18s,border-color .18s}
.price-gate:hover{background:#dcefe4;border-color:var(--green,#3E8E63)}
.price-gate i{font-size:10px}

.card-foot{padding:0 12px 12px;display:flex;gap:6px}
.btn-buy{
  flex:1;background:var(--green);color:white;border-radius:var(--r-sm);padding:8px;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:5px;
  transition:background var(--dur),transform var(--dur) var(--ease-back);position:relative;overflow:hidden;
}
.btn-buy:hover{background:var(--green-dark)}
.btn-buy:active{transform:scale(.97)}
.btn-peek{
  width:34px;background:var(--g100);border:1px solid var(--g200);border-radius:var(--r-sm);
  color:var(--g500);font-size:13px;display:flex;align-items:center;justify-content:center;
  transition:all var(--dur);
}
.btn-peek:hover{background:var(--green-light);border-color:var(--green);color:var(--green-dark)}

/* List view */
.pg.list .card{flex-direction:row}
.pg.list .card-img{width:120px;min-width:120px;aspect-ratio:auto;height:auto}
.pg.list .card-body{padding:14px}
.pg.list .card-name{-webkit-line-clamp:2;font-size:14px}
.pg.list .card-price{font-size:20px}
.pg.list .card-foot{padding:0 14px 14px}

/* Empty state */
.empty{display:flex;flex-direction:column;align-items:center;padding:70px 30px;text-align:center;grid-column:1/-1;animation:fadeUp .4s var(--ease)}
.empty i{font-size:60px;color:var(--g200);margin-bottom:18px}
.empty h3{font-size:19px;font-weight:700;margin-bottom:7px}
.empty p{font-size:14px;color:var(--g400)}

/* ── PAGINATION ── */
.pag{display:flex;justify-content:center;gap:4px;margin-top:28px;flex-wrap:wrap}
.pb{
  width:34px;height:34px;border:1px solid var(--g200);border-radius:var(--r-sm);
  background:white;font-size:13px;font-weight:500;color:var(--g700);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--dur) var(--ease-back);
}
.pb:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
.pb.on{background:var(--green);color:white;border-color:var(--green);transform:translateY(-2px);box-shadow:0 4px 12px rgba(62,142,99,.3)}
.pb:disabled{opacity:.35;pointer-events:none}
.pag-sep{padding:0 3px;color:var(--g300);display:flex;align-items:center}

/* ══════════════════════════════════════════════════════
   PRODUCT MODAL
══════════════════════════════════════════════════════ */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  z-index:1100;display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.overlay.show{opacity:1;pointer-events:all}
.modal{
  background:white;border-radius:var(--r-2xl);
  max-width:860px;width:100%;max-height:92vh;overflow-y:auto;
  position:relative;box-shadow:var(--shadow-xl);
  transform:scale(.9) translateY(16px);opacity:0;
  transition:transform .35s var(--ease),opacity .35s;
}
.overlay.show .modal{transform:scale(1) translateY(0);opacity:1}
.modal-x{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  background:var(--g100);display:flex;align-items:center;justify-content:center;
  color:var(--g500);font-size:14px;z-index:2;
  transition:background var(--dur),color var(--dur),transform var(--dur) var(--ease-back);
}
.modal-x:hover{background:var(--red);color:white;transform:rotate(90deg) scale(1.1)}

.modal-grid{display:grid;grid-template-columns:1fr 1fr}
.modal-left{
  background:var(--g50);border-radius:var(--r-2xl) 0 0 var(--r-2xl);
  padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:300px;
}
.modal-left img{max-height:260px;object-fit:contain;transition:transform .3s var(--ease)}
.modal-left img:hover{transform:scale(1.05)}
.modal-secure{display:flex;align-items:center;gap:6px;background:var(--green-light);color:var(--green-dark);border-radius:var(--r-full);padding:5px 12px;font-size:11px;font-weight:600}

.modal-right{padding:28px;overflow-y:auto}
.modal-cat{display:inline-block;background:var(--green-light);color:var(--green-dark);border-radius:var(--r-full);padding:3px 12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px}
.modal-name{font-size:19px;font-weight:700;line-height:1.3;margin-bottom:7px}
.modal-code{font-size:12px;color:var(--g400);margin-bottom:18px}
.modal-code span{background:var(--g100);padding:2px 8px;border-radius:4px;font-family:monospace}

.modal-price-box{background:var(--g50);border-radius:var(--r-lg);padding:14px;margin-bottom:18px}
.modal-price-tag{font-size:11px;color:var(--g500);margin-bottom:3px}
.modal-price-val{font-size:30px;font-weight:800;color:var(--g900);letter-spacing:-1px}
.modal-price-val em{font-style:normal;color:var(--green)}
.modal-price-inst{font-size:12px;color:var(--g500);margin-top:3px}

.qty-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.qty-row label{font-size:13px;font-weight:600}
.qty-ctrl{display:flex;align-items:center;border:1.5px solid var(--g200);border-radius:var(--r-sm);overflow:hidden}
.qty-ctrl button{width:34px;height:34px;background:var(--g50);font-size:16px;font-weight:700;color:var(--g600);transition:background var(--dur)}
.qty-ctrl button:hover{background:var(--green-light);color:var(--green-dark)}
.qty-ctrl input{width:44px;height:34px;border:none;border-left:1.5px solid var(--g200);border-right:1.5px solid var(--g200);text-align:center;font-size:14px;font-weight:600;outline:none}

.modal-actions{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.mbtn{width:100%;padding:12px;border-radius:var(--r);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px;transition:all var(--dur) var(--ease-back);border:none}
.mbtn-green{background:var(--green);color:white}
.mbtn-green:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 5px 16px rgba(62,142,99,.3)}
.mbtn-blue{background:var(--blue);color:white}
.mbtn-blue:hover{background:#2563eb;transform:translateY(-2px)}
.mbtn-wpp{background:#25D366;color:white}
.mbtn-wpp:hover{background:#1da851;transform:translateY(-2px)}

.modal-trust{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:1px solid var(--g100)}
.mt-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--g500)}
.mt-row i{color:var(--green);width:14px;flex-shrink:0}

/* ══════════════════════════════════════════════════════
   CART DRAWER
══════════════════════════════════════════════════════ */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1200;opacity:0;pointer-events:none;transition:opacity .25s}
.cart-overlay.show{opacity:1;pointer-events:all}
.cart-drawer{
  position:fixed;right:0;top:0;bottom:0;width:400px;
  background:white;box-shadow:var(--shadow-xl);z-index:1201;
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .35s var(--ease);
}
.cart-overlay.show .cart-drawer{transform:translateX(0)}
.cart-head{padding:18px 20px;border-bottom:1px solid var(--g200);display:flex;align-items:center;justify-content:space-between}
.cart-head h3{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.cart-head h3 i{color:var(--green)}
.cart-x{width:30px;height:30px;border-radius:50%;background:var(--g100);display:flex;align-items:center;justify-content:center;color:var(--g500);font-size:14px;transition:all var(--dur)}
.cart-x:hover{background:var(--red);color:white;transform:rotate(90deg)}
.cart-body{flex:1;overflow-y:auto;padding:14px 20px}
.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:var(--g400);animation:fadeUp .3s var(--ease)}
.cart-empty i{font-size:52px;color:var(--g200)}

.cart-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--g100);animation:slideRight .25s var(--ease)}
.ci-img{width:60px;height:60px;object-fit:contain;border-radius:var(--r-sm);background:var(--g50);padding:3px;flex-shrink:0}
.ci-info{flex:1;min-width:0}
.ci-name{font-size:12.5px;font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
.ci-price{font-size:14px;font-weight:700;color:var(--green-dark)}
.ci-row{display:flex;align-items:center;gap:7px;margin-top:5px}
.ci-qty{display:flex;align-items:center;border:1px solid var(--g200);border-radius:6px;overflow:hidden}
.ci-qty button{width:22px;height:22px;background:var(--g50);font-size:13px;font-weight:700;color:var(--g600);transition:background var(--dur)}
.ci-qty button:hover{background:var(--green-light);color:var(--green-dark)}
.ci-qty span{width:26px;text-align:center;font-size:12px;font-weight:600;border-left:1px solid var(--g200);border-right:1px solid var(--g200);line-height:22px}
.ci-del{background:none;color:var(--g300);font-size:13px;margin-left:auto;transition:color var(--dur),transform var(--dur) var(--ease-back)}
.ci-del:hover{color:var(--red);transform:scale(1.2)}

.cart-foot{padding:16px 20px;border-top:1px solid var(--g200);background:var(--g50)}
.cart-sub{display:flex;justify-content:space-between;margin-bottom:4px;font-size:14px}
.cart-sub strong{font-size:21px;font-weight:800}
.cart-disc{font-size:12px;color:var(--green);margin-bottom:12px;display:flex;align-items:center;gap:5px}

/* ══════════════════════════════════════════════════════
   CHECKOUT MODAL
══════════════════════════════════════════════════════ */
.ck-modal{
  background:white;border-radius:var(--r-2xl);max-width:660px;width:100%;
  max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-xl);
  transform:scale(.9) translateY(16px);opacity:0;transition:transform .35s var(--ease),opacity .35s;
}
.overlay.show .ck-modal{transform:scale(1) translateY(0);opacity:1}
.ck-head{padding:20px 26px;border-bottom:1px solid var(--g200);display:flex;align-items:center;gap:12px}
.ck-head h2{font-size:17px;font-weight:700}

.ck-steps{display:flex;padding:20px 26px 0;gap:0}
.ck-step{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:11px;font-weight:600;color:var(--g400);position:relative;
}
.ck-step::after{content:'';position:absolute;top:11px;left:calc(50% + 14px);right:calc(-50% + 14px);height:2px;background:var(--g200);transition:background .4s}
.ck-step:last-child::after{display:none}
.ck-dot{width:22px;height:22px;border-radius:50%;background:var(--g200);color:var(--g400);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;transition:background .3s,color .3s,transform .3s var(--ease-back)}
.ck-step.on .ck-dot{background:var(--green);color:white;transform:scale(1.15)}
.ck-step.done .ck-dot{background:var(--green);color:white}
.ck-step.done::after{background:var(--green)}
.ck-step.on{color:var(--g900)}

.ck-body{padding:22px 26px}
.ck-sec{margin-bottom:22px}
.ck-sec h3{font-size:13px;font-weight:700;color:var(--g600);margin-bottom:12px;display:flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.4px}
.ck-sec h3 i{color:var(--green)}
.ck-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck-grid.full{grid-template-columns:1fr}
.fg{display:flex;flex-direction:column;gap:4px}
.fg label{font-size:11px;font-weight:600;color:var(--g600)}
.fg input,.fg select{padding:9px 11px;border:1.5px solid var(--g200);border-radius:var(--r-sm);font-size:13px;outline:none;font-family:inherit;transition:border-color var(--dur),box-shadow var(--dur)}
.fg input:focus,.fg select:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-glow)}

.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pay-opt{
  border:2px solid var(--g200);border-radius:var(--r-lg);padding:14px 8px;
  display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;
  transition:all var(--dur) var(--ease-back);
}
.pay-opt:hover{border-color:var(--green-dark);transform:translateY(-2px)}
.pay-opt.on{border-color:var(--green);background:var(--green-light);transform:translateY(-2px);box-shadow:0 4px 12px rgba(62,142,99,.2)}
.pay-opt i{font-size:22px;color:var(--g500);transition:color var(--dur),transform var(--dur) var(--ease-back)}
.pay-opt.on i{color:var(--green);transform:scale(1.1)}
.pay-opt span{font-size:12px;font-weight:600;color:var(--g600)}
.pay-opt.on span{color:var(--green-dark)}

.pix-box{background:var(--g50);border:1px dashed var(--g300);border-radius:var(--r-lg);padding:18px;text-align:center;animation:fadeIn .3s var(--ease)}
.pix-key{font-size:16px;font-weight:700;background:white;border:1px solid var(--g200);border-radius:var(--r-sm);padding:9px 14px;display:inline-block;margin:8px 0;font-family:monospace;letter-spacing:1px}
.pix-copy{background:var(--green);color:white;border-radius:var(--r-sm);padding:8px 20px;font-size:13px;font-weight:600;cursor:pointer;margin-top:5px;border:none;font-family:inherit;transition:all var(--dur) var(--ease-back)}
.pix-copy:hover{background:var(--green-dark);transform:scale(1.03)}
.pix-timer{font-size:12px;color:var(--g400);margin-top:7px;display:flex;align-items:center;gap:5px;justify-content:center}

.cc-preview{
  background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:14px;padding:20px;
  color:white;margin-bottom:14px;transition:all .3s;
}
.cc-num{font-size:17px;letter-spacing:2px;margin-bottom:10px;font-family:monospace}
.cc-row{display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.6)}
.cc-form{animation:fadeUp .25s var(--ease)}

.ck-summary{background:var(--g50);border-radius:var(--r-lg);padding:14px;margin-bottom:16px}
.cks-item{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;border-bottom:1px solid var(--g100)}
.cks-item:last-of-type{border-bottom:none}
.cks-total{display:flex;justify-content:space-between;font-size:15px;font-weight:800;padding-top:10px;margin-top:6px;border-top:1px solid var(--g200)}

.ck-foot{padding:0 26px 22px;display:flex;justify-content:space-between;gap:10px}
.ck-back{background:white;border:1.5px solid var(--g200);border-radius:var(--r);padding:10px 20px;font-size:14px;font-weight:600;color:var(--g600);transition:all var(--dur)}
.ck-back:hover{border-color:var(--g400)}
.ck-next{background:var(--green);color:white;border:none;border-radius:var(--r);padding:11px 26px;font-size:14px;font-weight:700;flex:1;transition:all var(--dur) var(--ease-back)}
.ck-next:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 5px 16px rgba(62,142,99,.3)}

/* ══════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════ */
.toast-stack{position:fixed;bottom:20px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.toast{
  background:var(--g900);color:white;padding:11px 16px;border-radius:var(--r-lg);
  font-size:13px;font-weight:500;display:flex;align-items:center;gap:9px;
  box-shadow:var(--shadow-lg);pointer-events:all;max-width:300px;
  animation:toastIn .35s var(--ease) forwards,toastOut .3s var(--ease) 2.7s forwards;
}
.toast i{font-size:15px}
.toast.ok i{color:var(--green)}
.toast.err i{color:var(--red)}
.toast.info i{color:var(--blue)}

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
footer{background:var(--g900);color:var(--g400);margin-top:60px}
.foot-main{max-width:1380px;margin:0 auto;padding:48px 16px 36px;display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:40px;border-bottom:1px solid rgba(255,255,255,.06)}
.fc h4{font-size:13px;font-weight:700;color:white;margin-bottom:14px;letter-spacing:.2px}
.fc p,.fc li{font-size:13px;line-height:1.8}
.fc a{color:var(--g400);transition:color var(--dur);display:flex;align-items:center;gap:6px}
.fc a:hover{color:var(--green)}
.fc li{margin-bottom:3px}
.f-social{display:flex;gap:9px;margin-top:16px}
.f-social a{width:34px;height:34px;background:rgba(255,255,255,.07);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--g400);transition:all var(--dur) var(--ease-back)}
.f-social a:hover{background:var(--green);color:white;transform:translateY(-3px)}
.f-pay{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.f-pay i{font-size:24px}
.foot-bot{max-width:1380px;margin:0 auto;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;font-size:12px;flex-wrap:wrap;gap:10px}
.secure-badge{display:flex;align-items:center;gap:5px;color:var(--green);font-size:12px}

/* ══════════════════════════════════════════════════════
   MOBILE BOTTOM NAV
══════════════════════════════════════════════════════ */
.mob-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:white;border-top:1px solid var(--g200);
  box-shadow:0 -4px 20px rgba(0,0,0,.08);z-index:700;
  padding:6px 0 max(6px,env(safe-area-inset-bottom));
}
.mob-nav-inner{display:flex;justify-content:space-around}
.mob-tab{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:4px 12px;cursor:pointer;color:var(--g400);font-size:10px;font-weight:600;
  transition:color var(--dur);-webkit-tap-highlight-color:transparent;
  position:relative;
}
.mob-tab i{font-size:20px;transition:transform var(--dur) var(--ease-back)}
.mob-tab:hover,.mob-tab.active{color:var(--green)}
.mob-tab:hover i,.mob-tab.active i{transform:translateY(-2px)}
.mob-tab .mbadge{position:absolute;top:2px;right:8px;background:var(--red);color:white;width:16px;height:16px;border-radius:50%;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid white}

/* ══════════════════════════════════════════════════════
   MOBILE SIDEBAR DRAWER
══════════════════════════════════════════════════════ */
.mob-sidebar-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:600;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.mob-sidebar-overlay.show{opacity:1;pointer-events:all}
.mob-sidebar-drawer{
  position:fixed;left:0;top:0;bottom:0;width:280px;
  background:white;z-index:601;overflow-y:auto;
  transform:translateX(-100%);transition:transform .35s var(--ease);
  padding-bottom:max(20px,env(safe-area-inset-bottom));
}
.mob-sidebar-overlay.show .mob-sidebar-drawer{transform:translateX(0)}
.mob-sb-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 8px}
.mob-sb-head h3{font-size:15px;font-weight:700}
.mob-sb-x{width:30px;height:30px;border-radius:50%;background:var(--g100);display:flex;align-items:center;justify-content:center;color:var(--g500);font-size:14px}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media(max-width:1200px){.pg{grid-template-columns:repeat(3,1fr)}}

@media(max-width:960px){
  .main{grid-template-columns:1fr}
  .sidebar{display:none}
  .sb-toggle{display:flex}
  .pg{grid-template-columns:repeat(2,1fr)}
  .hero-wrap{grid-template-columns:1fr}
  .hero-card{display:none}
  .hero h1{font-size:34px}
  .trust-wrap{grid-template-columns:repeat(3,1fr)}
  .trust-item:nth-child(n+4){border-top:1px solid var(--g200)}
  .foot-main{grid-template-columns:1fr 1fr;gap:28px}
  .modal-grid{grid-template-columns:1fr}
  .modal-left{border-radius:var(--r-2xl) var(--r-2xl) 0 0;min-height:200px;padding:20px}
  .modal-left img{max-height:200px}
  .cart-drawer{width:100%}
  .mob-nav{display:block}
  body{padding-bottom:70px}
}

@media(max-width:600px){
  .topbar{display:none}
  .header-inner{grid-template-columns:auto 1fr;height:auto;padding:10px 14px;gap:10px}
  .h-actions{grid-column:1/-1;justify-content:flex-end}
  .search-wrap{grid-column:1/-1}
  .pg{grid-template-columns:repeat(2,1fr);gap:10px}
  .trust-wrap{grid-template-columns:1fr 1fr}
  .trust-item:nth-child(n+3){border-top:1px solid var(--g200)}
  .trust-item:nth-child(2n){border-right:none}
  .foot-main{grid-template-columns:1fr}
  .pay-grid{grid-template-columns:1fr 1fr}
  .ck-grid{grid-template-columns:1fr}
  .hero{padding:36px 14px}
  .hero h1{font-size:28px}
  .hero-stats{gap:16px}
  .hstat .n{font-size:22px}
  .pbar h2{font-size:15px}
  /* Cards: 2 colunas com respiro no touch */
  .card-body{padding:10px 10px 0}
  .card-img img{padding:10px}
  .card-name{font-size:12px;-webkit-line-clamp:2}
  .card-price{font-size:15px}
  .card-foot{padding:8px 10px 10px;gap:5px}
  .btn-buy{padding:9px 6px;font-size:11.5px}
  .btn-peek{width:32px}
  /* Favoritar sempre visível (não há hover no touch) */
  .card-fav{opacity:1;transform:scale(1);top:8px;right:8px;width:30px;height:30px;font-size:13px}
}

@media(max-width:380px){
  /* Mantém 2 colunas mesmo em telas pequenas (catálogo B2B) */
  .pg{grid-template-columns:repeat(2,1fr);gap:8px}
  .hero h1{font-size:24px}
  .card-body{padding:9px 9px 0}
  .card-cat{font-size:8.5px}
  .card-code{display:none}
  .btn-buy span,.btn-buy{font-size:11px}
}

/* ══════════════════════════════════════════════════════
   UTILITY
══════════════════════════════════════════════════════ */
.stagger-1{animation-delay:.05s}
.stagger-2{animation-delay:.10s}
.stagger-3{animation-delay:.15s}
.stagger-4{animation-delay:.20s}
.stagger-5{animation-delay:.25s}
.stagger-6{animation-delay:.30s}

/* ══════════════════════════════════════════════════════
   HERO X — PREMIUM CINEMATIC HERO
══════════════════════════════════════════════════════ */
@keyframes hxScan{0%{transform:translateY(-100%);opacity:0}10%{opacity:1}90%{opacity:.4}100%{transform:translateY(110vh);opacity:0}}
@keyframes hxLive{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(62,142,99,.6)}50%{opacity:.6;box-shadow:0 0 0 5px rgba(62,142,99,0)}}
@keyframes hxBlink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes hxFadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes hxAccent{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.herox{
  position:relative;overflow:hidden;
  background:#060a0f;
  min-height:88vh;display:flex;flex-direction:column;justify-content:center;
  padding-bottom:0;
}

/* Spotlight layer (driven by JS mousemove) */
.hx-spotlight{position:absolute;inset:0;pointer-events:none;z-index:1;transition:background .1s;}

/* Noise overlay for depth */
.hx-noise{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;}

/* Dot grid */
.hx-grid{position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse 90% 100% at 50% 0%,black 30%,transparent 90%);}

/* Scan line */
.hx-scanline{position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(62,142,99,.35) 40%,rgba(62,142,99,.5) 50%,rgba(62,142,99,.35) 60%,transparent);
  z-index:2;pointer-events:none;
  animation:hxScan 8s cubic-bezier(.4,0,.6,1) infinite;animation-delay:1.2s;}

/* Body content */
.hx-body{position:relative;z-index:3;max-width:860px;margin:0 auto;padding:90px 40px 52px;
  animation:hxFadeUp .7s var(--ease) both;}

/* Eyebrow */
.hx-eyebrow{display:flex;align-items:center;gap:9px;font-size:12px;color:rgba(255,255,255,.42);
  letter-spacing:.4px;margin-bottom:28px;font-weight:500;}
.hx-live{width:8px;height:8px;background:#3E8E63;border-radius:50%;flex-shrink:0;
  animation:hxLive 2s ease-in-out infinite;}

/* Title */
.hx-title{font-size:clamp(38px,6vw,82px);font-weight:900;line-height:1.0;letter-spacing:-2px;
  color:#fff;margin:0 0 24px;}
.hx-t1{display:block;animation:hxFadeUp .6s .05s var(--ease) both;opacity:0;}
.hx-t2{display:block;color:rgba(255,255,255,.45);font-weight:300;letter-spacing:-1px;
  animation:hxFadeUp .6s .15s var(--ease) both;opacity:0;}
.hx-t3{display:block;animation:hxFadeUp .6s .25s var(--ease) both;opacity:0;}

.hx-accent{font-style:normal;
  background:linear-gradient(90deg,#3E8E63,#7CC9A2,#3E8E63,#52A57A,#3E8E63);
  background-size:300% 100%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:hxAccent 5s ease-in-out infinite;}
.hx-cur{color:#3E8E63;font-style:normal;-webkit-text-fill-color:#3E8E63;
  animation:hxBlink .75s step-end infinite;margin-left:2px;}

/* Description */
.hx-desc{color:rgba(255,255,255,.46);font-size:16px;line-height:1.75;
  max-width:600px;margin:0 0 36px;
  animation:hxFadeUp .6s .35s var(--ease) both;opacity:0;}

/* CTAs */
.hx-actions{display:flex;gap:12px;flex-wrap:wrap;
  animation:hxFadeUp .6s .45s var(--ease) both;opacity:0;}
.hx-cta{display:inline-flex;align-items:center;gap:8px;
  background:var(--green);color:#fff;border:none;padding:14px 28px;
  border-radius:var(--r);font-size:15px;font-weight:700;cursor:pointer;
  transition:all .22s var(--ease);position:relative;overflow:hidden;
  box-shadow:0 0 0 0 rgba(62,142,99,.4);}
.hx-cta::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 55%);pointer-events:none;}
.hx-cta:hover{transform:translateY(-2px) scale(1.02);
  box-shadow:0 6px 28px rgba(62,142,99,.45),0 0 60px rgba(62,142,99,.18);}
.hx-arrow{transition:transform .2s var(--ease);}
.hx-cta:hover .hx-arrow{transform:translateX(4px);}
.hx-wpp{display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.8);padding:13px 22px;border-radius:var(--r);
  font-size:15px;font-weight:600;cursor:pointer;
  transition:all .22s var(--ease);backdrop-filter:blur(12px);}
.hx-wpp:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);
  color:#fff;transform:translateY(-2px);}
.hx-wpp .fab{color:#25D366;}

/* Metrics row */
.hx-metrics{display:flex;align-items:center;margin-top:44px;
  animation:hxFadeUp .6s .55s var(--ease) both;opacity:0;}
.hx-metric{padding:0 28px 0 0;text-align:left;}
.hx-metric:first-child{padding-left:0;}
.hx-mv{display:block;font-size:26px;font-weight:800;color:#fff;
  letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1;}
.hx-ml{display:block;font-size:11px;color:rgba(255,255,255,.35);
  margin-top:4px;text-transform:uppercase;letter-spacing:.6px;font-weight:500;}
.hx-mdiv{width:1px;height:30px;background:rgba(255,255,255,.1);margin-right:28px;flex-shrink:0;}

/* Wave */
.hx-wave{position:relative;z-index:3;line-height:0;margin-top:0;}
.hx-wave svg{width:100%;height:60px;display:block;}

/* Responsive */
@media(max-width:960px){
  .hx-body{padding:72px 20px 44px;text-align:center;}
  .hx-eyebrow{justify-content:center;}
  .hx-desc{margin-left:auto;margin-right:auto;}
  .hx-actions{justify-content:center;}
  .hx-metrics{justify-content:center;flex-wrap:wrap;gap:4px 0;}
  .hx-br{display:none;}
  .hx-metric{padding:0 16px;}
  .hx-metric:first-child{padding-left:16px;}
}
@media(max-width:640px){
  /* Eyebrow flui como frase centralizada — bolinha inline, sem colunas tortas */
  .hx-eyebrow{display:block;text-align:center;line-height:1.8;max-width:340px;margin:0 auto 24px;}
  .hx-live{display:inline-block;vertical-align:middle;margin-right:7px;margin-top:-2px;}
}
@media(max-width:480px){
  .hx-title{font-size:34px;letter-spacing:-1px;}
  .hx-mv{font-size:20px;}
  /* Métricas em grade 2×2 centralizada */
  .hx-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    justify-items:center;gap:20px 12px;max-width:320px;margin:38px auto 0;}
  .hx-mdiv{display:none;}
  .hx-metric{padding:0;text-align:center;}
  .hx-metric:first-child{padding-left:0;}
  .hx-chip-name{max-width:110px;}
}

/* PIX QR box */
.pix-qr-wrap{text-align:center;padding:12px 0;}
.pix-qr-wrap canvas,.pix-qr-wrap img{border-radius:8px;margin:0 auto;}

/* ── FRETE / SHIPPING ── */
.frete-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--g200);border-radius:var(--r);cursor:pointer;margin-bottom:8px;transition:all .18s;background:white;}
.frete-opt:hover{border-color:var(--green);background:var(--green-light);}
.frete-opt.on{border-color:var(--green);background:var(--green-light);box-shadow:0 0 0 3px rgba(62,142,99,.12);}
.frete-opt::before{content:'';width:18px;height:18px;border-radius:50%;border:2px solid var(--g300);flex-shrink:0;transition:all .18s;}
.frete-opt.on::before{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 4px white;}
.frete-opt-body{display:flex;justify-content:space-between;align-items:center;flex:1;gap:8px;}
.frete-label{font-size:13px;font-weight:500;color:var(--g700);}
.frete-price{font-size:13px;font-weight:700;color:var(--g800);}
.frete-price.free{color:var(--green);}

/* ══════════════════════════════════════════════════════
   CEP DELIVERY CHECKER
══════════════════════════════════════════════════════ */
.cep-checker {
  background: var(--g50); border: 1px solid var(--g200);
  border-radius: var(--r); padding: 12px 14px; margin-bottom: 12px;
}
.cep-checker-label {
  font-size: 12px; font-weight: 600; color: var(--g600);
  margin-bottom: 8px; display: flex; align-items: center; gap: 5px;
}
.cep-checker-label i { color: var(--green); }
.cep-checker-row { display: flex; gap: 7px; }
.cep-checker-row input {
  flex: 1; padding: 8px 11px; border: 1.5px solid var(--g200);
  border-radius: calc(var(--r) - 2px); font-size: 14px;
  background: white; outline: none; transition: border-color .15s;
}
.cep-checker-row input:focus { border-color: var(--green); }
.cep-checker-row button {
  padding: 8px 14px; background: var(--green); color: white;
  border: none; border-radius: calc(var(--r) - 2px);
  font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: background .15s;
  touch-action: manipulation;
}
.cep-checker-row button:hover { background: var(--green-dark); }
.cep-result { margin-top: 10px; font-size: 13px; border-radius: calc(var(--r) - 2px); padding: 10px 12px; }
.cep-result.ok { background: #f0fdf4; border: 1px solid #bbf7d0; }
.cep-result.err { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
.cep-loc { font-weight: 600; color: var(--g700); margin-bottom: 7px; font-size: 13px; }
.cep-options { display: flex; gap: 10px; }
.cep-opt { display: flex; flex-direction: column; align-items: center; background: white; border: 1px solid var(--g100); border-radius: 6px; padding: 7px 14px; flex: 1; }
.cep-svc { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--g400); letter-spacing: .05em; }
.cep-svc.sedex { color: #d97706; }
.cep-days { font-size: 14px; font-weight: 700; color: var(--g800); margin-top: 2px; }
.cep-note { font-size: 10px; color: var(--g400); margin-top: 7px; text-align: center; }

/* ══════════════════════════════════════════════════════
   ANTI-FLICKER: GPU compositing + smooth transitions
══════════════════════════════════════════════════════ */
#pg { will-change: opacity; }
.card {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
@keyframes cardIn { from{opacity:0;transform:translateY(10px) translateZ(0)} to{opacity:1;transform:translateY(0) translateZ(0)} }
.card { animation: cardIn .22s ease both; }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card, .herox *, [style*="animation"] { animation: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════
   MOBILE PREMIUM
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Bottom sheet modal */
  .overlay.show .modal-inner {
    position: fixed; bottom: 0; left: 0; right: 0;
    max-height: 92vh; border-radius: 20px 20px 0 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    animation: slideUp .28s cubic-bezier(.32,.72,0,1);
  }
  @keyframes slideUp { from{transform:translateY(60px);opacity:0} to{transform:translateY(0);opacity:1} }
  .modal-inner::before {
    content: ''; display: block; width: 40px; height: 4px;
    background: var(--g200); border-radius: 2px; margin: 12px auto 4px;
  }
  .modal-grid { gap: 0; }
  .modal-right { padding: 16px 20px 32px; }

  /* Cards: better tap feedback */
  .card { cursor: pointer; }
  .card:active { transform: scale(0.97) translateZ(0); transition: transform .1s ease; }
  .btn-buy, .mbtn, .btn-green { touch-action: manipulation; min-height: 44px; }
  .card-foot { gap: 8px; }
  .btn-buy { padding: 11px 14px; font-size: 13px; }

  /* Larger tap targets for qty */
  .qty-ctrl button { width: 38px; height: 38px; font-size: 18px; }
  .qty-ctrl input { width: 48px; height: 38px; }

  /* Sticky cart bar on mobile */
  .mob-cart-sticky {
    position: fixed; bottom: 70px; left: 12px; right: 12px; z-index: 900;
    background: var(--g900); color: white; border-radius: 14px;
    padding: 13px 18px; display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 8px 32px rgba(0,0,0,.28); cursor: pointer;
    transform: translateY(100px); opacity: 0;
    transition: transform .3s cubic-bezier(.32,.72,0,1), opacity .3s ease;
    touch-action: manipulation;
  }
  .mob-cart-sticky.visible { transform: translateY(0); opacity: 1; }
  .mob-cart-sticky .mcs-left { display: flex; align-items: center; gap: 10px; }
  .mob-cart-sticky .mcs-badge { background: var(--green); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
  .mob-cart-sticky .mcs-label { font-size: 14px; font-weight: 600; }
  .mob-cart-sticky .mcs-total { font-size: 15px; font-weight: 700; color: var(--green); }

  /* Smooth scroll */
  html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
  .cart-drawer { -webkit-overflow-scrolling: touch; }
  .modal-right { -webkit-overflow-scrolling: touch; }

  /* CEP checker compact on mobile */
  .cep-checker-row input { font-size: 16px; } /* prevents iOS zoom */
}

@media (max-width: 600px) {
  /* Full-width cart drawer */
  .cart-drawer { border-radius: 0; }

  /* Bigger product name on card */
  .card-name { font-size: 13px; line-height: 1.35; }

  /* Checkout steps easier to read */
  .ck-modal { border-radius: 0; min-height: 100dvh; }
  .ck-head { padding: 14px 16px; }

  /* Modal close button larger on mobile */
  .modal-x { width: 38px; height: 38px; font-size: 16px; }
}