:root{--bg:#050607;--bg2:#0d1013;--panel:#11151a;--line:#3b4249;--muted:#aeb4bc;--white:#f7f7f5;--gold:#ffbf2f;--cond:'Barlow Condensed',Impact,sans-serif;--sans:'Montserrat',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% 18%,#151b22 0,#080a0d 35%,#050607 68%);color:var(--white);font-family:var(--sans);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.025),transparent 18%,transparent 80%,rgba(255,255,255,.018));z-index:20}.container{width:min(1390px,calc(100% - 48px));margin-inline:auto}.topbar{height:64px;border-bottom:1px solid #272d33;background:rgba(2,3,4,.88);backdrop-filter:blur(16px);position:sticky;top:0;z-index:30}.topbar__inner{height:100%;display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:26px}.main-nav{display:flex;gap:42px}.main-nav a,.brand{font-family:var(--cond);font-weight:800;color:#f5f5f5;text-decoration:none;letter-spacing:.8px}.main-nav a{font-size:16px}.brand{font-size:33px;justify-self:center;white-space:nowrap;transform:scaleX(.88);text-shadow:0 0 1px #fff}.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}.icon-btn{border:0;background:transparent;color:white;font-size:22px;cursor:pointer;position:relative}.menu-btn{display:grid;gap:4px;width:25px;padding:0}.menu-btn span{height:1.5px;background:#ddd;width:22px}.cart-button span{position:absolute;right:-7px;top:-8px;font:700 10px var(--sans);background:#f7f7f5;color:#111;border-radius:999px;min-width:18px;height:18px;display:grid;place-items:center}.searchbox{width:210px;height:34px;border:1px solid #20262b;border-radius:99px;display:flex;align-items:center;gap:8px;padding:0 12px}.searchbox input{border:0;outline:0;background:transparent;color:#fff;width:100%;font:500 11px var(--sans)}
.hero{min-height:400px;display:grid;grid-template-columns:1.05fr 1.08fr .62fr;position:relative;border-bottom:1px solid #30363d;background:linear-gradient(90deg,rgba(6,7,8,.96) 0%,rgba(6,7,8,.78) 27%,rgba(6,7,8,.08) 52%,rgba(5,6,7,.65) 100%);overflow:hidden}.hero:after{content:"";position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(transparent,rgba(5,6,7,.9));pointer-events:none}.hero__copy{padding:47px 0 36px 30px;z-index:3}.hero h1{font-family:var(--cond);font-size:73px;line-height:.86;margin:0 0 22px;font-weight:900;letter-spacing:1px;text-shadow:0 5px 18px #000}.hero h1 span{color:transparent;-webkit-text-stroke:1px #e7e7e7}.hero__kicker{display:flex;align-items:center;gap:18px;font-size:12px;letter-spacing:4px;margin:8px 0 18px}.hero__kicker i{display:block;width:1px;height:18px;background:#b9bec3}.hero__copy p{max-width:430px;color:#eef0f2;font-size:15px;line-height:1.45;margin:0 0 22px}.hero__buttons{display:flex;gap:18px;flex-wrap:wrap}.btn{font-family:var(--cond);font-weight:800;letter-spacing:.6px;border-radius:999px;padding:11px 24px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:18px;border:1px solid #f4f4f4;cursor:pointer}.btn--light{background:#f7f7f5;color:#08090a}.btn--ghost{background:rgba(7,8,9,.2);color:#fff}.wide{width:100%;padding:10px 14px}.hero__printer{position:relative;background-image:var(--hero-photo, url('assets/hero_printer.jpg'));background-position:center;background-size:cover;min-height:400px;filter:saturate(.75) contrast(1.1);isolation:isolate}.hero__printer:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#060708 0%,rgba(6,7,8,.93) 4%,rgba(6,7,8,.68) 10%,rgba(6,7,8,.28) 18%,transparent 31%,transparent 74%,rgba(5,6,7,.18) 84%,rgba(5,6,7,.68) 100%),linear-gradient(180deg,rgba(5,6,7,.12) 0%,transparent 55%,rgba(5,6,7,.72) 100%)}.hero__printer:after{content:"";position:absolute;left:-70px;top:0;bottom:0;width:160px;z-index:2;pointer-events:none;background:linear-gradient(90deg,#060708 0%,rgba(6,7,8,.86) 32%,rgba(6,7,8,.42) 62%,transparent 100%);filter:blur(10px)}.bestseller{z-index:5;align-self:center;margin:20px 20px 20px 0;border:1px solid #626971;border-radius:18px;padding:15px;background:linear-gradient(160deg,rgba(17,20,24,.92),rgba(4,5,6,.87));box-shadow:0 15px 35px rgba(0,0,0,.35)}.bestseller__title{font-family:var(--cond);font-size:20px;font-weight:800;margin-bottom:12px}.bestseller__main{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center}.bestseller__main img,.bestseller__thumbs img{width:100%;border-radius:12px;object-fit:cover;background:#20242a}.bestseller__main img{height:115px}.bestseller h3{font-family:var(--cond);font-size:21px;margin:0 0 4px}.bestseller p{font-size:10px;line-height:1.45;color:#c1c5ca;margin:0 0 15px}.bestseller strong{font:800 22px var(--cond)}.bestseller__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.bestseller__thumbs img{height:65px}
.category-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin-top:-1px;padding:6px 0 17px}.category-card{position:relative;height:84px;border:1px solid #3a424a;border-radius:12px;overflow:hidden;text-decoration:none;color:white;background:linear-gradient(145deg,rgba(24,29,35,.96),rgba(8,10,12,.98));transition:.25s;display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}.category-card:hover{transform:translateY(-3px);border-color:#818891;background:linear-gradient(145deg,rgba(31,37,44,.98),rgba(10,12,15,.99))}.category-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.055),transparent 58%)}.category-card span{position:relative;z-index:2;font:800 19px var(--cond);letter-spacing:.35px;display:block;width:100%;padding:0 12px}.category-card small{display:block;font:500 11px var(--sans);margin-top:4px;color:#d5d9dd}
.products-section{padding:0 0 22px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 14px}.section-heading__title{display:flex;align-items:center;gap:20px}.section-heading h2{font:900 37px var(--cond);margin:0;white-space:nowrap}.section-heading__title span{width:70px;height:1px;background:#f7f7f5}.section-heading small{font-size:7px;letter-spacing:3px;color:#d3d6d9}.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.filter{border:1px solid #343b43;border-radius:999px;padding:8px 18px;background:transparent;color:#fff;font-size:10px;cursor:pointer}.filter.active{background:#f7f7f5;color:#111;border-color:#f7f7f5}.product-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}.product-card{position:relative;border:1px solid #4a5159;border-radius:12px;overflow:hidden;background:linear-gradient(#11161b,#0b0e11);min-width:0;transition:.25s}.product-card:hover{transform:translateY(-5px);box-shadow:0 18px 35px rgba(0,0,0,.35)}.product-card>img{width:100%;height:150px;object-fit:contain;object-position:center;display:block;background:#0b0e11;padding:6px}.heart{position:absolute;right:9px;top:8px;z-index:2;background:rgba(4,5,6,.35);border:0;color:#fff;font-size:22px;cursor:pointer}.heart.active{color:#ff6b7a}.product-card__info{padding:10px 12px 11px}.product-card h3{font:700 17px var(--cond);margin:0}.rating{font-size:12px;color:var(--gold);margin:2px 0 4px}.rating small{color:#aaa}.product-card strong{display:block;font:800 20px var(--cond);margin-bottom:7px}.product-card .add-cart{width:100%;border:0;border-radius:999px;background:#f7f7f5;color:#101214;padding:7px 6px;font:800 13px var(--cond);cursor:pointer}.product-card.hidden{display:none}
.benefits{border-top:1px solid #20262c;border-bottom:1px solid #20262c;background:linear-gradient(90deg,#07090b,#12171c,#07090b)}.benefits__grid{display:grid;grid-template-columns:repeat(4,1fr);padding:15px 0}.benefits__grid>div{display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:0 30px;border-right:1px solid #3a4046;align-items:center}.benefits__grid>div:last-child{border-right:0}.benefits span{grid-row:1/3;font-size:28px}.benefit-icon{width:30px;height:30px;display:grid;place-items:center;color:#f7f7f5}.benefit-icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.benefits b{font:800 16px var(--cond)}.benefits small{font-size:10px;color:#c8ccd0}.custom-cta{position:relative;overflow:hidden;background:radial-gradient(circle at 34% 50%,rgba(255,255,255,.07),transparent 27%),linear-gradient(95deg,#0a0d10 0%,#171c21 46%,#0d1115 100%);padding:24px 0 30px;border-bottom:1px solid #20262c}.custom-cta:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.018),transparent 24%,rgba(255,255,255,.025) 52%,transparent 78%)}.custom-cta__inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:30px}.custom-cta__text{display:flex;align-items:center;gap:36px;margin-left:0}.custom-cta h2{font:900 32px var(--cond);margin:0;white-space:nowrap}.custom-cta p{max-width:420px;font-size:12px;line-height:1.45;color:#e7e9eb;margin:0}.toast{position:fixed;right:24px;bottom:24px;background:#f7f7f5;color:#111;padding:12px 18px;border-radius:999px;font-weight:700;font-size:12px;transform:translateY(100px);opacity:0;transition:.3s;z-index:50}.toast.show{transform:translateY(0);opacity:1}
@media(max-width:1150px){.main-nav{gap:22px}.hero{grid-template-columns:1fr 1.05fr}.bestseller{display:none}.product-grid{grid-template-columns:repeat(3,1fr)}.category-strip{grid-template-columns:repeat(3,1fr)}.custom-cta__text{margin-left:0}.searchbox{display:none}}
@media(max-width:780px){.container{width:min(100% - 24px,700px)}.topbar{height:58px}.topbar__inner{grid-template-columns:auto 1fr auto;gap:12px}.main-nav{display:none}.brand{font-size:25px;justify-self:center}.top-actions .icon-btn:first-of-type{display:none}.hero{grid-template-columns:1fr;min-height:auto;border-bottom:0}.hero__copy{padding:44px 8px 24px;text-align:center}.hero h1{font-size:58px}.hero__copy p{margin-inline:auto;font-size:14px}.hero__kicker{justify-content:center;gap:11px;font-size:10px;letter-spacing:2px}.hero__buttons{justify-content:center}.hero__printer{min-height:330px;background-position:center}.category-strip{grid-template-columns:1fr 1fr;gap:10px;padding-top:12px}.category-card{height:92px}.section-heading{align-items:flex-start;flex-direction:column}.section-heading__title{display:block}.section-heading h2{font-size:34px}.section-heading__title span,.section-heading small{display:none}.filters{justify-content:flex-start;overflow:auto;width:100%;flex-wrap:nowrap;padding-bottom:4px}.filter{white-space:nowrap}.product-grid{grid-template-columns:1fr 1fr;gap:11px}.product-card>img{height:145px}.benefits__grid{grid-template-columns:1fr 1fr;gap:0}.benefits__grid>div{border-right:0;border-bottom:1px solid #31373d;padding:13px 8px}.custom-cta__inner{flex-direction:column;text-align:center}.custom-cta__text{margin-left:0;flex-direction:column;gap:8px}.custom-cta h2{font-size:30px}.custom-cta:before{background-size:auto}.custom-cta .btn{width:100%}}
@media(max-width:460px){.brand{font-size:20px}.top-actions{gap:4px}.hero h1{font-size:49px}.hero__printer{min-height:270px}.category-strip{grid-template-columns:1fr}.product-grid{grid-template-columns:1fr 1fr}.product-card h3{font-size:15px}.product-card strong{font-size:18px}.product-card>img{height:126px}.product-card__info{padding:9px}.benefits__grid{grid-template-columns:1fr}.btn{font-size:14px}.hero__buttons .btn{width:100%}}

/* ===== AJUSTE: FOTO DO HERO INTEGRADA AO FUNDO + ANIMACOES ===== */
.hero{background:#060708}
.hero__printer{
  overflow:hidden;
  isolation:isolate;
  background-image:
    radial-gradient(ellipse at center,transparent 42%,rgba(6,7,8,.08) 63%,rgba(6,7,8,.48) 84%,#060708 100%),
    linear-gradient(90deg,#060708 0%,rgba(6,7,8,.94) 4%,rgba(6,7,8,.58) 11%,rgba(6,7,8,.16) 20%,transparent 31%,transparent 77%,rgba(6,7,8,.16) 85%,rgba(6,7,8,.70) 94%,#060708 100%),
    linear-gradient(180deg,#060708 0%,rgba(6,7,8,.48) 5%,rgba(6,7,8,.08) 14%,transparent 24%,transparent 70%,rgba(6,7,8,.22) 80%,rgba(6,7,8,.76) 93%,#060708 100%),
    var(--hero-photo, url('assets/hero_printer.jpg'));
  background-position:center,center,center,center;
  background-size:cover,cover,cover,cover;
  background-repeat:no-repeat;
  filter:saturate(.78) contrast(1.08);
  box-shadow:inset 0 0 95px 18px rgba(6,7,8,.42);
  animation:heroImageIn 1.15s cubic-bezier(.2,.75,.2,1) both,heroAmbient 9s ease-in-out 1.15s infinite alternate;
}
.hero__printer:before{
  content:"";
  position:absolute;
  inset:-15%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 34%,rgba(190,226,255,.04) 45%,rgba(230,247,255,.16) 50%,rgba(190,226,255,.04) 55%,transparent 66%);
  transform:translateX(-55%);
  animation:printerLightSweep 7s ease-in-out 1.5s infinite;
}
.hero__printer:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,#060708 0%,transparent 18%,transparent 84%,#060708 100%),
    linear-gradient(180deg,rgba(6,7,8,.72) 0%,transparent 16%,transparent 75%,#060708 100%);
  opacity:.58;
}

/* entrada inicial */
body{animation:pageFade .65s ease-out both}
.topbar{animation:topbarDrop .65s cubic-bezier(.2,.75,.2,1) both}
.hero__copy h1{animation:heroCopyIn .8s .10s cubic-bezier(.2,.75,.2,1) both}
.hero__kicker{animation:heroCopyIn .8s .22s cubic-bezier(.2,.75,.2,1) both}
.hero__copy p{animation:heroCopyIn .8s .34s cubic-bezier(.2,.75,.2,1) both}
.hero__buttons{animation:heroCopyIn .8s .46s cubic-bezier(.2,.75,.2,1) both}
.bestseller{animation:bestSellerIn .9s .42s cubic-bezier(.2,.75,.2,1) both}

/* microinteracoes premium */
.brand{transition:transform .35s ease,text-shadow .35s ease,letter-spacing .35s ease}
.brand:hover{transform:scaleX(.88) translateY(-1px);letter-spacing:1.3px;text-shadow:0 0 18px rgba(255,255,255,.20)}
.main-nav a{position:relative;transition:color .25s ease,transform .25s ease}
.main-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:1px;background:#fff;transition:right .28s ease}
.main-nav a:hover{transform:translateY(-2px)}
.main-nav a:hover:after{right:0}
.icon-btn{transition:transform .25s ease,opacity .25s ease}
.icon-btn:hover{transform:translateY(-2px) scale(1.05);opacity:1}
.searchbox{transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.searchbox:focus-within{border-color:#69737d;box-shadow:0 0 0 3px rgba(255,255,255,.035);transform:translateY(-1px)}
.btn{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease}
.btn:before{content:"";position:absolute;top:-40%;bottom:-40%;width:34px;left:-55px;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .55s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 11px 25px rgba(0,0,0,.32)}
.btn:hover:before{left:calc(100% + 28px)}
.btn strong{transition:transform .25s ease}
.btn:hover strong{transform:translateX(4px)}

.category-card{transition:transform .30s cubic-bezier(.2,.75,.2,1),border-color .30s ease,background .30s ease,box-shadow .30s ease}
.category-card:hover{transform:translateY(-5px) scale(1.012);box-shadow:0 16px 30px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07)}
.category-card:before{content:"";position:absolute;top:0;bottom:0;width:55px;left:-85px;z-index:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:skewX(-18deg);transition:left .55s ease}
.category-card:hover:before{left:calc(100% + 30px)}
.category-card small{transition:transform .25s ease,color .25s ease}
.category-card:hover small{transform:translateY(2px);color:#fff}

.filter{transition:transform .22s ease,background .22s ease,color .22s ease,border-color .22s ease}
.filter:hover{transform:translateY(-2px);border-color:#747c85}
.filter.active{animation:filterPop .3s ease both}

.product-card{transition:transform .32s cubic-bezier(.2,.75,.2,1),box-shadow .32s ease,border-color .32s ease}
.product-card:hover{transform:translateY(-8px);border-color:#737b84;box-shadow:0 20px 44px rgba(0,0,0,.42)}
.product-card>img{transition:transform .55s cubic-bezier(.2,.75,.2,1),filter .55s ease}
.product-card:hover>img{transform:scale(1.055);filter:brightness(1.07) contrast(1.04)}
.product-card .add-cart{transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.product-card .add-cart:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.28);background:#fff}
.heart{transition:transform .22s ease,color .22s ease}
.heart:hover{transform:scale(1.16)}
.heart.active{animation:heartPop .35s ease both}

.bestseller{transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease}
.bestseller:hover{transform:translateY(-4px);border-color:#858d96;box-shadow:0 20px 42px rgba(0,0,0,.48)}
.bestseller__main img,.bestseller__thumbs img{transition:transform .35s ease,filter .35s ease}
.bestseller__main img:hover,.bestseller__thumbs img:hover{transform:scale(1.035);filter:brightness(1.08)}

.benefits__grid>div{transition:background .28s ease,transform .28s ease}
.benefits__grid>div:hover{background:rgba(255,255,255,.025);transform:translateY(-2px)}
.benefits__grid>div>span{transition:transform .30s ease}
.benefits__grid>div:hover>span{transform:translateY(-3px) scale(1.05)}
.custom-cta .btn{animation:ctaPulse 3.4s ease-in-out infinite}

/* animacao ao rolar */
.reveal-on-scroll{opacity:0;transform:translateY(24px);filter:blur(3px);transition:opacity .75s cubic-bezier(.2,.75,.2,1),transform .75s cubic-bezier(.2,.75,.2,1),filter .75s ease;transition-delay:var(--reveal-delay,0ms)}
.reveal-on-scroll.revealed{opacity:1;transform:translateY(0);filter:blur(0)}
.reveal-left{transform:translateX(-28px)}
.reveal-right{transform:translateX(28px)}
.reveal-left.revealed,.reveal-right.revealed{transform:translateX(0)}

@keyframes pageFade{from{opacity:0}to{opacity:1}}
@keyframes topbarDrop{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(22px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes bestSellerIn{from{opacity:0;transform:translateX(30px);filter:blur(4px)}to{opacity:1;transform:translateX(0);filter:blur(0)}}
@keyframes heroImageIn{from{opacity:0;transform:scale(1.035);filter:saturate(.55) contrast(1.05) blur(3px)}to{opacity:1;transform:scale(1);filter:saturate(.78) contrast(1.08) blur(0)}}
@keyframes heroAmbient{from{background-position:center,center,center,49.5% 50%;filter:saturate(.76) contrast(1.07) brightness(.98)}to{background-position:center,center,center,50.5% 50%;filter:saturate(.82) contrast(1.10) brightness(1.025)}}
@keyframes printerLightSweep{0%,68%{transform:translateX(-62%);opacity:0}76%{opacity:.9}88%{opacity:.65}100%{transform:translateX(62%);opacity:0}}
@keyframes filterPop{0%{transform:scale(.94)}70%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes heartPop{0%{transform:scale(.8)}55%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 10px 30px rgba(255,255,255,.10)}}

@media(max-width:780px){
  .hero__printer{
    background-image:
      radial-gradient(ellipse at center,transparent 40%,rgba(6,7,8,.10) 62%,rgba(6,7,8,.44) 83%,#060708 100%),
      linear-gradient(90deg,#060708 0%,rgba(6,7,8,.58) 8%,transparent 24%,transparent 78%,rgba(6,7,8,.55) 94%,#060708 100%),
      linear-gradient(180deg,#060708 0%,rgba(6,7,8,.24) 8%,transparent 20%,transparent 70%,rgba(6,7,8,.72) 92%,#060708 100%),
      var(--hero-photo, url('assets/hero_printer.jpg'));
  }
  .reveal-left,.reveal-right{transform:translateY(20px)}
  .reveal-left.revealed,.reveal-right.revealed{transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal-on-scroll{opacity:1!important;transform:none!important;filter:none!important}
}

/* ===== HERO ESTAVEL: FOTO DA IMPRESSORA + DEGRADE SEM MASCARAS =====
   A foto permanece inteira. O fade e aplicado como camadas sobre a propria foto,
   evitando duplicacao, blur excessivo e bugs de mask-image. */
.hero{
  background:#050607!important;
  border-bottom:0!important;
  overflow:hidden!important;
}
.hero__printer{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  min-height:400px;
  background-image:
    linear-gradient(90deg,
      #050607 0%,
      rgba(5,6,7,.98) 4%,
      rgba(5,6,7,.90) 10%,
      rgba(5,6,7,.68) 17%,
      rgba(5,6,7,.36) 24%,
      rgba(5,6,7,.12) 31%,
      transparent 38%,
      transparent 70%,
      rgba(5,6,7,.10) 77%,
      rgba(5,6,7,.34) 84%,
      rgba(5,6,7,.70) 92%,
      #050607 100%),
    linear-gradient(180deg,
      #050607 0%,
      rgba(5,6,7,.62) 5%,
      rgba(5,6,7,.24) 11%,
      rgba(5,6,7,.06) 18%,
      transparent 27%,
      transparent 69%,
      rgba(5,6,7,.12) 77%,
      rgba(5,6,7,.48) 88%,
      #050607 100%),
    var(--hero-photo, url('assets/hero_printer.jpg'))!important;
  background-size:cover,cover,cover!important;
  background-position:center,center,center!important;
  background-repeat:no-repeat!important;
  filter:saturate(.80) contrast(1.08) brightness(.98)!important;
  box-shadow:none!important;
  animation:heroImageIn 1s cubic-bezier(.2,.75,.2,1) both!important;
}
.hero__printer::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:radial-gradient(ellipse 64% 66% at 52% 48%,transparent 54%,rgba(5,6,7,.10) 69%,rgba(5,6,7,.42) 86%,rgba(5,6,7,.92) 100%)!important;
  filter:none!important;
  transform:none!important;
  animation:none!important;
}
.hero__printer::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,transparent 62%,rgba(5,6,7,.18) 75%,rgba(5,6,7,.78) 94%,#050607 100%)!important;
  filter:none!important;
  transform:none!important;
  animation:none!important;
}
@media(max-width:780px){
  .hero__printer{
    min-height:330px;
    background-position:center,center,50% 50%!important;
    background-image:
      linear-gradient(90deg,#050607 0%,rgba(5,6,7,.86) 8%,rgba(5,6,7,.34) 20%,transparent 32%,transparent 70%,rgba(5,6,7,.28) 84%,#050607 100%),
      linear-gradient(180deg,#050607 0%,rgba(5,6,7,.32) 9%,transparent 22%,transparent 68%,rgba(5,6,7,.58) 88%,#050607 100%),
      var(--hero-photo, url('assets/hero_printer.jpg'))!important;
  }
  .hero__printer::before{
    background:radial-gradient(ellipse 76% 70% at 50% 48%,transparent 53%,rgba(5,6,7,.12) 70%,rgba(5,6,7,.50) 88%,rgba(5,6,7,.95) 100%)!important;
  }
}
@media(max-width:460px){.hero__printer{min-height:270px}}


/* ===== HERO SEM FOTO + TEXTO PRINCIPAL REFINADO ===== */
.hero{
  min-height:430px!important;
  grid-template-columns:minmax(0,1fr) 340px!important;
  align-items:center!important;
  gap:52px!important;
  padding:36px 28px!important;
  background:
    radial-gradient(circle at 34% 48%,rgba(255,255,255,.075),transparent 24%),
    radial-gradient(circle at 68% 30%,rgba(255,255,255,.035),transparent 22%),
    linear-gradient(115deg,#050607 0%,#0a0d10 48%,#050607 100%)!important;
  border-bottom:0!important;
  overflow:hidden!important;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-35%;
  pointer-events:none;
  background:conic-gradient(from 210deg at 50% 50%,transparent,rgba(255,255,255,.035),transparent 22%,transparent 72%,rgba(255,255,255,.025),transparent);
  animation:heroBackgroundDrift 16s linear infinite;
}
.hero::after{
  content:""!important;
  position:absolute!important;
  left:7%!important;
  right:7%!important;
  bottom:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)!important;
}
.hero__copy{
  padding:24px 0!important;
  text-align:center!important;
  justify-self:center!important;
  width:min(100%,850px)!important;
  position:relative!important;
  z-index:3!important;
}
.hero h1{
  font-size:clamp(66px,7vw,108px)!important;
  line-height:.82!important;
  margin:0 0 28px!important;
  letter-spacing:1.4px!important;
  cursor:default;
  transition:transform .45s cubic-bezier(.2,.75,.2,1),text-shadow .45s ease,color .45s ease;
}
.hero h1 span{
  transition:color .45s ease,-webkit-text-stroke-color .45s ease,text-shadow .45s ease;
}
.hero__kicker{justify-content:center!important;margin:12px 0 22px!important}
.hero__copy p{margin:0 auto 26px!important;max-width:620px!important;font-size:16px!important;line-height:1.65!important;color:#dfe3e7!important}
.hero__buttons{justify-content:center!important}
.bestseller{margin:0!important;justify-self:end!important;width:100%!important;position:relative!important}

/* Mais movimento sutil em toda a interface */
.section-heading h2,.custom-cta h2{transition:letter-spacing .3s ease,transform .3s ease,text-shadow .3s ease}
.section-heading:hover h2,.custom-cta__text:hover h2{letter-spacing:.7px;transform:translateY(-2px);text-shadow:0 0 18px rgba(255,255,255,.08)}
.category-card span,.product-card h3,.benefits b{transition:transform .28s ease,letter-spacing .28s ease,color .28s ease}
.category-card:hover span{transform:translateY(-2px);letter-spacing:.8px}
.product-card:hover h3{transform:translateX(2px);letter-spacing:.2px}
.benefits__grid>div:hover b{transform:translateX(3px);letter-spacing:.15px}
.benefits__grid>div{overflow:hidden;position:relative}
.benefits__grid>div::after{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent);transition:transform .65s ease;pointer-events:none}
.benefits__grid>div:hover::after{transform:translateX(120%)}
.product-card::after{content:"";position:absolute;inset:-1px;border-radius:12px;pointer-events:none;border:1px solid transparent;transition:border-color .28s ease}
.product-card:hover::after{border-color:rgba(255,255,255,.12)}
.custom-cta::after{content:"";position:absolute;inset:-30% -10%;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.028),transparent 34%);animation:ctaAmbient 8s ease-in-out infinite alternate}

@keyframes heroBackgroundDrift{from{transform:rotate(0deg) scale(1)}to{transform:rotate(360deg) scale(1.04)}}
@keyframes ctaAmbient{from{transform:translateX(-3%) scale(1)}to{transform:translateX(3%) scale(1.06)}}

@media(max-width:1150px){
  .hero{grid-template-columns:1fr!important;gap:0!important;padding:42px 28px!important}
  .bestseller{display:none!important}
}
@media(max-width:780px){
  .hero{min-height:auto!important;padding:34px 12px 38px!important}
  .hero__copy{padding:24px 0!important}
  .hero h1{font-size:clamp(50px,15vw,72px)!important}
  .hero__copy p{font-size:14px!important;line-height:1.55!important}
}
@media(max-width:460px){
  .hero{padding-inline:6px!important}
  .hero h1{font-size:49px!important}
}


/* TITULO PRINCIPAL — DESFOQUE INDIVIDUAL POR PALAVRA
   Cada palavra fica levemente desfocada e somente a palavra sob o mouse fica nitida. */
.hero h1{
  color:#f5f5f5!important;
  filter:none!important;
  cursor:default!important;
  transform:none!important;
  text-shadow:0 5px 18px #000!important;
}
.hero h1 .hero-word{
  display:inline-block;
  color:#f5f5f5!important;
  filter:blur(3px);
  transform:translateZ(0) scale(1);
  transition:filter .30s ease,transform .30s cubic-bezier(.2,.75,.2,1),text-shadow .30s ease,opacity .30s ease!important;
  will-change:filter,transform;
}
.hero h1 .hero-word--outline{
  color:transparent!important;
  -webkit-text-stroke:1px #e7e7e7!important;
  text-stroke:1px #e7e7e7;
}
@media (hover:hover) and (pointer:fine){
  .hero h1:hover{
    color:#f5f5f5!important;
    filter:none!important;
    transform:none!important;
    text-shadow:0 5px 18px #000!important;
  }
  .hero h1 .hero-word:hover{
    filter:blur(0);
    transform:translateY(-2px) scale(1.018);
    text-shadow:0 5px 18px #000!important;
  }
  .hero h1 .hero-word--outline:hover{
    color:transparent!important;
    -webkit-text-stroke-color:#e7e7e7!important;
    text-shadow:none!important;
  }
}
/* Em celular/tablet, sem hover real, o titulo continua totalmente nitido. */
@media (hover:none), (pointer:coarse){
  .hero h1 .hero-word{filter:blur(0)!important}
}


/* PONTEIRO COM LUZ — efeito neutro branco, sem alterar as cores do titulo */
.cursor-glow{
  position:fixed;
  left:0;top:0;
  width:190px;height:190px;
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  opacity:0;
  transform:translate3d(-50%,-50%,0);
  background:radial-gradient(circle,rgba(255,255,255,.16) 0%,rgba(255,255,255,.085) 18%,rgba(255,255,255,.035) 38%,rgba(255,255,255,0) 70%);
  filter:blur(2px);
  mix-blend-mode:screen;
  transition:opacity .22s ease;
  will-change:left,top,opacity;
}
.cursor-glow.is-visible{opacity:1}
.cursor-spark{
  position:fixed;
  left:0;top:0;
  width:5px;height:5px;
  border-radius:50%;
  pointer-events:none;
  z-index:9998;
  background:rgba(255,255,255,.8);
  box-shadow:0 0 7px rgba(255,255,255,.55);
  transform:translate(-50%,-50%);
  animation:cursorSpark .55s ease-out forwards;
}
@keyframes cursorSpark{
  from{opacity:.7;transform:translate(-50%,-50%) scale(1)}
  to{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.15)}
}
@media (hover:none),(pointer:coarse){.cursor-glow,.cursor-spark{display:none!important}}
@media (prefers-reduced-motion:reduce){.cursor-glow,.cursor-spark{display:none!important}}

/* ===== AJUSTE FINAL: HERO SEM BORDAS VISIVEIS + FUNDO ANIMADO ===== */
/* A faixa principal agora ocupa toda a largura. O conteúdo continua alinhado ao restante do site,
   mas o fundo não termina na borda do .container — evitando a faixa/linha vertical marcada. */
.hero.container{
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  padding-left:max(28px, calc((100% - 1390px)/2 + 28px))!important;
  padding-right:max(28px, calc((100% - 1390px)/2 + 28px))!important;
  border-left:0!important;
  border-right:0!important;
  box-shadow:none!important;
  isolation:isolate;
}
.hero.container::before{
  inset:-42% -8%!important;
  background:
    radial-gradient(circle at 18% 48%,rgba(255,255,255,.052),transparent 18%),
    radial-gradient(circle at 52% 30%,rgba(255,255,255,.032),transparent 20%),
    conic-gradient(from 210deg at 50% 50%,transparent,rgba(255,255,255,.027),transparent 22%,transparent 72%,rgba(255,255,255,.020),transparent)!important;
  animation:heroBackgroundDrift 18s linear infinite!important;
  opacity:.9;
}
.hero.container::after{
  left:0!important;
  right:0!important;
  bottom:-1px!important;
  height:70px!important;
  background:linear-gradient(180deg,transparent 0%,rgba(5,6,7,.36) 50%,#050607 100%)!important;
  z-index:1!important;
}
.hero__copy,.bestseller{z-index:3!important}

/* Camada ambiente por trás de todas as seções. Somente tons neutros para preservar o visual preto/branco. */
body::after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 15% 28%,rgba(255,255,255,.032) 0 2px,transparent 3px),
    radial-gradient(circle at 74% 18%,rgba(255,255,255,.025) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 68%,rgba(255,255,255,.028),transparent 14%),
    radial-gradient(circle at 22% 82%,rgba(255,255,255,.023),transparent 16%);
  background-size:190px 190px,260px 260px,auto,auto;
  animation:siteAmbientMove 22s ease-in-out infinite alternate;
  opacity:.85;
}
main{position:relative;isolation:isolate}
main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 8% 18%,rgba(255,255,255,.035),transparent 22%),
    radial-gradient(ellipse at 92% 46%,rgba(255,255,255,.025),transparent 20%),
    linear-gradient(110deg,transparent 0 43%,rgba(255,255,255,.012) 50%,transparent 57%);
  background-size:auto,auto,260% 100%;
  animation:backgroundSweep 13s ease-in-out infinite;
}

/* brilho muito leve atravessando cards, sem mudar a paleta */
.category-card::before,.product-card::before{
  content:"";
  position:absolute;
  inset:-70% -35%;
  pointer-events:none;
  z-index:1;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.05) 50%,transparent 58%);
  transform:translateX(-65%) rotate(4deg);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.category-card:hover::before,.product-card:hover::before{transform:translateX(65%) rotate(4deg)}
.product-card>img,.product-card__info,.product-card>.heart{position:relative;z-index:2}
.category-card span{z-index:2}

@keyframes siteAmbientMove{
  0%{transform:translate3d(-1.5%,-1%,0) scale(1)}
  50%{transform:translate3d(1.2%,.6%,0) scale(1.025)}
  100%{transform:translate3d(-.3%,1.2%,0) scale(1.01)}
}
@keyframes backgroundSweep{
  0%,100%{background-position:center,center,0% 50%;opacity:.7}
  50%{background-position:center,center,100% 50%;opacity:1}
}

@media(max-width:780px){
  .hero.container{
    padding-left:18px!important;
    padding-right:18px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body::after,main::before,.hero.container::before{animation:none!important}
}


/* ===== VERSAO SEM CARD "MAIS VENDIDO" + FUNDO MAIS VIVO ===== */
.hero.container{
  grid-template-columns:minmax(0,1fr)!important;
  place-items:center!important;
  text-align:center!important;
  min-height:500px!important;
  position:relative!important;
}
.hero__copy{
  width:min(980px,100%)!important;
  padding:54px 20px 66px!important;
  margin-inline:auto!important;
  position:relative!important;
  z-index:4!important;
}
.hero__copy p{margin-left:auto!important;margin-right:auto!important;max-width:680px!important}
.hero__kicker,.hero__buttons{justify-content:center!important}

/* manchas luminosas neutras em movimento no hero */
.hero.container{
  background:
    radial-gradient(circle at 18% 35%,rgba(255,255,255,.07),transparent 20%),
    radial-gradient(circle at 82% 28%,rgba(255,255,255,.045),transparent 18%),
    radial-gradient(circle at 50% 86%,rgba(255,255,255,.035),transparent 24%),
    linear-gradient(115deg,#050607 0%,#0b0e11 50%,#050607 100%)!important;
  background-size:130% 130%,125% 125%,140% 140%,100% 100%!important;
  animation:heroLightFlow 12s ease-in-out infinite alternate!important;
}
.hero.container::before{
  inset:-30% -10%!important;
  background:
    repeating-linear-gradient(118deg,transparent 0 90px,rgba(255,255,255,.012) 91px 92px,transparent 93px 180px),
    radial-gradient(circle at 25% 50%,rgba(255,255,255,.045),transparent 19%),
    radial-gradient(circle at 75% 45%,rgba(255,255,255,.028),transparent 17%)!important;
  background-size:180% 100%,100% 100%,100% 100%!important;
  animation:heroMeshMove 18s linear infinite!important;
  opacity:.95!important;
}

/* animação ambiente nas demais áreas do site */
.products-section,.category-strip,.benefits,.custom-cta{position:relative;isolation:isolate}
.products-section::before,.category-strip::before{
  content:"";
  position:absolute;
  inset:-25px -8vw;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 12% 42%,rgba(255,255,255,.025),transparent 18%),
    radial-gradient(circle at 86% 58%,rgba(255,255,255,.020),transparent 16%);
  animation:sectionGlowFloat 14s ease-in-out infinite alternate;
}

@keyframes heroLightFlow{
  0%{background-position:0% 30%,100% 10%,45% 100%,center}
  50%{background-position:12% 40%,88% 24%,55% 85%,center}
  100%{background-position:5% 28%,96% 38%,48% 92%,center}
}
@keyframes heroMeshMove{
  from{background-position:-35% 0,center,center;transform:translate3d(-1%,0,0) rotate(.001deg)}
  to{background-position:135% 0,center,center;transform:translate3d(1%,.5%,0) rotate(.001deg)}
}
@keyframes sectionGlowFloat{
  from{transform:translate3d(-1.5%,0,0);opacity:.65}
  to{transform:translate3d(1.5%,1%,0);opacity:1}
}

@media(max-width:780px){
  .hero.container{min-height:auto!important;text-align:center!important}
  .hero__copy{padding:42px 8px 52px!important}
}
@media(prefers-reduced-motion:reduce){
  .hero.container,.hero.container::before,.products-section::before,.category-strip::before{animation:none!important}
}

/* Produtos gerenciados pelo painel admin */
.product-card{cursor:pointer}.product-card__info p{margin:5px 0 8px;color:#aeb4ba;font:500 11px/1.35 Montserrat,sans-serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.product-card img{aspect-ratio:1.22/1;object-fit:contain;object-position:center}
.product-modal{position:fixed;inset:0;z-index:9990;display:none;align-items:center;justify-content:center;padding:24px}.product-modal.open{display:flex}.product-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(10px)}.product-modal__box{position:relative;z-index:1;width:min(920px,100%);max-height:90vh;overflow:auto;display:grid;grid-template-columns:1.12fr .88fr;gap:26px;background:#0b0d0f;border:1px solid #333941;border-radius:22px;padding:24px;box-shadow:0 28px 90px rgba(0,0,0,.55)}.product-modal__close{position:absolute;right:14px;top:10px;z-index:5;border:0;background:transparent;color:#fff;font-size:34px;cursor:pointer}.product-modal__gallery>img{width:100%;aspect-ratio:1.2/1;object-fit:contain;object-position:center;border-radius:15px;border:1px solid #282d33;background:#050607}.product-modal__thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:9px}.product-modal__thumbs button{padding:0;border:1px solid #333941;border-radius:9px;overflow:hidden;background:#08090a;cursor:pointer;aspect-ratio:1}.product-modal__thumbs button.active{border-color:#fff}.product-modal__thumbs img{width:100%;height:100%;object-fit:contain;object-position:center;background:#050607}.product-modal__content{align-self:center;min-width:0}.product-modal__content small{color:#9ea5ac;text-transform:uppercase;letter-spacing:.16em}.product-modal__content h2{font:900 clamp(38px,6vw,64px)/.95 'Barlow Condensed',sans-serif;margin:12px 0}.product-modal__content>strong{display:block;font:900 32px 'Barlow Condensed';margin:14px 0}.product-modal__content p{color:#c4c8cc;line-height:1.7;font-size:14px;margin-bottom:24px}
@media(max-width:720px){.product-modal{padding:12px}.product-modal__box{grid-template-columns:1fr;padding:15px}.product-modal__thumbs{grid-template-columns:repeat(6,1fr)}.product-modal__content h2{font-size:42px}}


/* Ajuste: fotos dos produtos ocupam toda a área visual sem cortar a foto principal */
.product-card__media{
  position:relative;
  z-index:2;
  width:100%;
  height:178px;
  overflow:hidden;
  background:#080a0c;
  isolation:isolate;
}
.product-card__media::before{
  content:"";
  position:absolute;
  inset:-18px;
  z-index:0;
  background-image:var(--product-bg);
  background-size:cover;
  background-position:center;
  filter:blur(15px) brightness(.48) saturate(.85);
  transform:scale(1.12);
  opacity:.9;
}
.product-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(5,6,7,.10),rgba(5,6,7,.24));
  pointer-events:none;
}
.product-card__media>img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  padding:0;
  background:transparent;
  aspect-ratio:auto;
  transition:transform .55s cubic-bezier(.2,.75,.2,1),filter .55s ease;
}
.product-card:hover .product-card__media>img{
  transform:scale(1.035);
  filter:brightness(1.07) contrast(1.04);
}
/* neutraliza regras antigas que miravam a imagem diretamente no card */
.product-card>img{display:none!important}
@media(max-width:780px){.product-card__media{height:160px}}
@media(max-width:460px){.product-card__media{height:145px}}

/* CORREÇÃO FINAL DOS CARDS: a foto ocupa 100% da área visual do produto */
.product-card__media{
  height:190px!important;
  background:#080a0c!important;
  overflow:hidden!important;
}
.product-card__media::before,
.product-card__media::after{
  display:none!important;
}
.product-card__media>img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  padding:0!important;
  margin:0!important;
  background:#080a0c!important;
  aspect-ratio:auto!important;
  transform:none;
}
.product-card:hover .product-card__media>img{
  transform:scale(1.035)!important;
}
@media(max-width:780px){.product-card__media{height:170px!important}}
@media(max-width:460px){.product-card__media{height:155px!important}}

/* ===== CORREÇÃO DEFINITIVA: FOTO OCUPA TODO O TOPO DO CARD ===== */
/* O coração tinha sido sobrescrito para position:relative e criava uma faixa vazia acima da foto. */
.product-card > .heart{
  position:absolute!important;
  top:10px!important;
  right:10px!important;
  left:auto!important;
  margin:0!important;
  z-index:20!important;
  width:34px!important;
  height:34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border-radius:50%!important;
  background:rgba(5,6,7,.42)!important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.product-card__media{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:205px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#080a0c!important;
  border:0!important;
}
.product-card__media > img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center!important;
  aspect-ratio:auto!important;
  border-radius:0!important;
}
.product-card__info{
  position:relative!important;
  z-index:3!important;
  margin:0!important;
}
@media(max-width:780px){.product-card__media{height:185px!important}}
@media(max-width:460px){.product-card__media{height:165px!important}}

/* ===== MENU + CARRINHO FUNCIONAIS ===== */
body.drawer-open{overflow:hidden}
.drawer-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);cursor:pointer}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 22px 18px;border-bottom:1px solid #282e34}.drawer-head small{display:block;color:#89919a;font:600 10px Montserrat,sans-serif;letter-spacing:.16em;margin-bottom:3px}.drawer-head strong{font:900 24px 'Barlow Condensed',sans-serif;letter-spacing:.04em}.drawer-close{width:42px;height:42px;border:1px solid #333a42;border-radius:50%;background:#0d1013;color:#fff;font-size:28px;line-height:1;cursor:pointer;transition:.2s}.drawer-close:hover{background:#fff;color:#090b0d;transform:rotate(8deg)}
.site-menu,.cart-drawer{position:fixed;inset:0;z-index:10020;visibility:hidden;pointer-events:none}.site-menu.open,.cart-drawer.open{visibility:visible;pointer-events:auto}.site-menu__panel,.cart-drawer__panel{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,#0d1013,#070809);border-color:#353c44;box-shadow:0 0 60px rgba(0,0,0,.65);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.site-menu__panel{left:0;width:min(390px,88vw);border-right:1px solid #353c44;transform:translateX(-104%);display:flex;flex-direction:column}.site-menu.open .site-menu__panel{transform:translateX(0)}
.site-menu__nav{display:grid;padding:18px}.site-menu__nav a{display:flex;align-items:center;justify-content:space-between;min-height:62px;padding:0 15px;border-bottom:1px solid #20262c;text-decoration:none;color:#fff;font:800 21px 'Barlow Condensed',sans-serif;letter-spacing:.05em;transition:.2s}.site-menu__nav a:hover{padding-left:22px;background:rgba(255,255,255,.035)}.site-menu__nav span{font:400 20px Montserrat,sans-serif}.site-menu__foot{margin-top:auto;padding:22px;color:#8e969e;font-size:11px;line-height:1.6;border-top:1px solid #20262c}
.cart-drawer__panel{right:0;width:min(470px,94vw);border-left:1px solid #353c44;transform:translateX(104%);display:flex;flex-direction:column}.cart-drawer.open .cart-drawer__panel{transform:translateX(0)}
.cart-items{padding:10px 18px;overflow:auto;flex:1;min-height:0}.cart-item{display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #23292f}.cart-item__img{width:82px;height:82px;border-radius:10px;overflow:hidden;background:#070809;border:1px solid #292f35}.cart-item__img img{width:100%;height:100%;object-fit:cover;display:block}.cart-item h3{margin:0 0 5px;font:800 17px 'Barlow Condensed',sans-serif;line-height:1.05}.cart-item__price{display:block;font:800 16px 'Barlow Condensed',sans-serif;margin-bottom:8px}.cart-qty{display:inline-flex;align-items:center;border:1px solid #343b42;border-radius:999px;overflow:hidden}.cart-qty button{width:30px;height:28px;border:0;background:#101419;color:#fff;cursor:pointer;font-size:16px}.cart-qty span{min-width:30px;text-align:center;font:700 12px Montserrat,sans-serif}.cart-item__remove{align-self:start;border:0;background:transparent;color:#8f979f;cursor:pointer;font-size:20px;padding:4px}.cart-item__remove:hover{color:#fff}.cart-empty{display:none;flex:1;min-height:280px;padding:48px 28px;align-items:center;justify-content:center;text-align:center;flex-direction:column}.cart-empty.show{display:flex}.cart-empty>span{font-size:42px;filter:grayscale(1);opacity:.8}.cart-empty strong{font:900 25px 'Barlow Condensed',sans-serif;margin:12px 0 2px}.cart-empty p{color:#969da4;font-size:12px;margin:0 0 20px}.cart-empty .btn{width:190px;justify-content:center;border:0}
.cart-summary{padding:18px 22px 22px;border-top:1px solid #2a3036;background:#090b0d}.cart-summary>div{display:flex;align-items:center;justify-content:space-between;color:#aab0b6;font-size:12px;margin-bottom:10px}.cart-summary .cart-total{color:#fff;border-top:1px solid #22282e;padding-top:14px;margin-top:12px}.cart-total span{font:800 16px 'Barlow Condensed',sans-serif}.cart-total strong{font:900 28px 'Barlow Condensed',sans-serif}.cart-checkout{width:100%;justify-content:center;border:0;margin-top:8px}.cart-clear{width:100%;border:0;background:transparent;color:#8e969e;padding:12px;cursor:pointer;font-size:11px}.cart-clear:hover{color:#fff}
.menu-btn{cursor:pointer;transition:transform .2s}.menu-btn:hover{transform:scale(1.08)}.menu-btn span{transition:transform .25s,opacity .25s}.menu-btn.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}.menu-btn.is-open span:nth-child(2){opacity:0}.menu-btn.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.cart-button{transition:transform .2s}.cart-button.cart-pop{animation:cartPop .34s ease}@keyframes cartPop{50%{transform:scale(1.24)}}
@media(max-width:700px){.cart-item{grid-template-columns:70px minmax(0,1fr) auto}.cart-item__img{width:70px;height:70px}.drawer-head{padding:17px 16px}.cart-items{padding:8px 14px}.cart-summary{padding:15px 16px 18px}}

/* ===== MOBILE ANIMATIONS + CURSOR GLOW V2 ===== */
/* Desktop: ponteiro com luz mais intensa */
@media (hover:hover) and (pointer:fine){
  .cursor-glow{
    width:280px!important;
    height:280px!important;
    background:radial-gradient(circle,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.18) 14%,
      rgba(255,255,255,.085) 30%,
      rgba(255,255,255,.03) 48%,
      rgba(255,255,255,0) 72%)!important;
    filter:blur(1px)!important;
    box-shadow:0 0 42px rgba(255,255,255,.10),0 0 90px rgba(255,255,255,.06)!important;
  }
  .cursor-spark{
    width:7px!important;
    height:7px!important;
    background:#fff!important;
    box-shadow:0 0 9px rgba(255,255,255,.95),0 0 18px rgba(255,255,255,.45)!important;
  }
}

/* Celular/tablet: animações que não dependem de hover */
@media (hover:none), (pointer:coarse), (max-width:780px){
  body::after{
    opacity:1!important;
    animation:mobileAmbient 12s ease-in-out infinite alternate!important;
  }
  main::before{
    animation:mobileSweep 9s ease-in-out infinite!important;
    opacity:.95!important;
  }
  .hero.container{
    animation:mobileHeroFlow 8s ease-in-out infinite alternate!important;
  }
  .hero.container::before{
    animation:mobileHeroMesh 11s linear infinite!important;
    opacity:1!important;
  }
  .products-section::before,.category-strip::before{
    animation:mobileSectionGlow 9s ease-in-out infinite alternate!important;
    opacity:.9!important;
  }
  .custom-cta::after{
    animation:mobileCtaGlow 7s ease-in-out infinite alternate!important;
  }

  /* Cards ganham respiração e brilho alternado, sem depender do mouse */
  .category-card,.product-card,.benefits__grid>div{
    animation:mobileCardFloat 5.2s ease-in-out infinite!important;
  }
  .category-card:nth-child(2n),.product-card:nth-child(2n),.benefits__grid>div:nth-child(2n){animation-delay:-1.6s!important}
  .category-card:nth-child(3n),.product-card:nth-child(3n){animation-delay:-3.1s!important}
  .category-card::before,.product-card::before{
    transform:translateX(-85%) rotate(4deg)!important;
    animation:mobileCardShine 6.2s ease-in-out infinite!important;
  }
  .category-card:nth-child(2n)::before,.product-card:nth-child(2n)::before{animation-delay:-2.3s!important}

  /* Toque dá resposta visual imediata */
  .category-card:active,.product-card:active,.btn:active,.filter:active,.icon-btn:active{
    transform:scale(.975)!important;
    transition:transform .12s ease!important;
  }
  .product-card.touch-active,.category-card.touch-active{
    border-color:rgba(255,255,255,.38)!important;
    box-shadow:0 12px 34px rgba(255,255,255,.055),0 16px 35px rgba(0,0,0,.35)!important;
  }

  /* No celular, palavras reagem ao toque em vez de hover */
  .hero h1 .hero-word{
    filter:blur(2.4px)!important;
    transition:filter .22s ease,transform .22s ease,text-shadow .22s ease!important;
  }
  .hero h1 .hero-word.touch-word{
    filter:blur(0)!important;
    transform:translateY(-2px) scale(1.02)!important;
    text-shadow:0 4px 20px rgba(255,255,255,.13),0 5px 18px #000!important;
  }
  .hero h1 .hero-word--outline.touch-word{
    color:transparent!important;
    -webkit-text-stroke:1px #e7e7e7!important;
  }

  /* Luz acompanha o dedo enquanto toca a tela */
  .touch-glow{
    position:fixed;
    width:190px;height:190px;
    border-radius:50%;
    pointer-events:none;
    z-index:9997;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(255,255,255,.24),rgba(255,255,255,.10) 22%,rgba(255,255,255,.035) 42%,transparent 70%);
    mix-blend-mode:screen;
    opacity:0;
    transition:opacity .16s ease;
  }
  .touch-glow.show{opacity:1}
  .touch-spark{
    position:fixed;
    width:6px;height:6px;border-radius:50%;
    pointer-events:none;z-index:9998;
    background:#fff;
    box-shadow:0 0 8px rgba(255,255,255,.8);
    transform:translate(-50%,-50%);
    animation:touchSpark .5s ease-out forwards;
  }
}

@keyframes mobileAmbient{
  from{transform:translate3d(-2%,-1%,0) scale(1.01)}
  to{transform:translate3d(2%,1.4%,0) scale(1.045)}
}
@keyframes mobileSweep{
  0%,100%{background-position:center,center,0% 50%;opacity:.72}
  50%{background-position:center,center,100% 50%;opacity:1}
}
@keyframes mobileHeroFlow{
  0%{background-position:0% 25%,100% 15%,45% 100%,center}
  100%{background-position:15% 42%,86% 32%,58% 82%,center}
}
@keyframes mobileHeroMesh{
  from{background-position:-40% 0,center,center;transform:translate3d(-1.5%,0,0)}
  to{background-position:140% 0,center,center;transform:translate3d(1.5%,.7%,0)}
}
@keyframes mobileSectionGlow{
  from{transform:translate3d(-2%,0,0) scale(1);opacity:.62}
  to{transform:translate3d(2%,1%,0) scale(1.04);opacity:1}
}
@keyframes mobileCtaGlow{
  from{transform:translateX(-4%) scale(1)}
  to{transform:translateX(4%) scale(1.07)}
}
@keyframes mobileCardFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes mobileCardShine{
  0%,58%{transform:translateX(-85%) rotate(4deg);opacity:.25}
  72%{opacity:.9}
  100%{transform:translateX(85%) rotate(4deg);opacity:.25}
}
@keyframes touchSpark{
  from{opacity:.9;transform:translate(-50%,-50%) scale(1)}
  to{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.2)}
}

/* ===== FUNDO GLOBAL ANIMADO V3 - DESKTOP + MOBILE ===== */
/* Camada dedicada, sempre visível atrás do conteúdo do site. */
.animated-site-bg{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 50% -8%,rgba(255,255,255,.055),transparent 33%),
    linear-gradient(180deg,rgba(255,255,255,.008),transparent 28%,rgba(255,255,255,.006) 72%,transparent),
    #050607;
}
.animated-site-bg::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:
    radial-gradient(circle at 18% 28%,rgba(255,255,255,.09) 0%,rgba(255,255,255,.028) 16%,transparent 34%),
    radial-gradient(circle at 82% 23%,rgba(255,255,255,.065) 0%,rgba(255,255,255,.018) 18%,transparent 36%),
    radial-gradient(circle at 67% 78%,rgba(255,255,255,.055) 0%,rgba(255,255,255,.014) 17%,transparent 35%),
    radial-gradient(circle at 26% 82%,rgba(255,255,255,.047) 0%,rgba(255,255,255,.012) 16%,transparent 33%);
  filter:blur(22px);
  transform-origin:center;
  animation:globalBgOrbits 18s ease-in-out infinite alternate;
  will-change:transform;
}
.animated-site-bg::after{
  content:"";
  position:absolute;
  inset:-20%;
  opacity:.55;
  background:
    linear-gradient(115deg,transparent 0 43%,rgba(255,255,255,.032) 49%,rgba(255,255,255,.012) 52%,transparent 58%),
    repeating-linear-gradient(90deg,transparent 0 78px,rgba(255,255,255,.012) 79px,transparent 80px),
    repeating-linear-gradient(0deg,transparent 0 78px,rgba(255,255,255,.009) 79px,transparent 80px);
  background-size:260% 100%,100% 100%,100% 100%;
  animation:globalBgSweep 14s linear infinite;
  will-change:background-position,transform;
}
.animated-site-bg .bg-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(2px);
  opacity:.75;
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,rgba(255,255,255,.075) 18%,rgba(255,255,255,.018) 45%,transparent 72%);
  mix-blend-mode:screen;
  will-change:transform;
}
.animated-site-bg .bg-orb--1{width:420px;height:420px;left:-120px;top:18%;animation:bgOrbOne 13s ease-in-out infinite alternate}
.animated-site-bg .bg-orb--2{width:520px;height:520px;right:-180px;top:43%;animation:bgOrbTwo 17s ease-in-out infinite alternate}
.animated-site-bg .bg-orb--3{width:340px;height:340px;left:38%;bottom:-110px;animation:bgOrbThree 15s ease-in-out infinite alternate}

/* Coloca o conteúdo acima da animação, sem afetar drawers/modais já existentes. */
body{position:relative;background:#050607!important}
body>header,body>main,body>footer,.topbar{position:relative;z-index:1}
.site-menu,.cart-drawer,.product-modal,.toast,.cursor-glow,.cursor-spark,.touch-glow,.touch-spark{z-index:10020}

/* Seções ficam levemente translúcidas para o movimento do fundo aparecer. */
.products-section,.category-strip{position:relative;background:transparent!important}
.benefits{background:linear-gradient(90deg,rgba(7,9,11,.86),rgba(18,23,28,.83),rgba(7,9,11,.86))!important;backdrop-filter:blur(2px)}
.custom-cta{background:radial-gradient(circle at 34% 50%,rgba(255,255,255,.07),transparent 27%),linear-gradient(95deg,rgba(10,13,16,.91) 0%,rgba(23,28,33,.86) 46%,rgba(13,17,21,.91) 100%)!important}

@keyframes globalBgOrbits{
  0%{transform:translate3d(-2.5%,-1.5%,0) rotate(-2deg) scale(1)}
  35%{transform:translate3d(2.2%,1.2%,0) rotate(1.4deg) scale(1.035)}
  70%{transform:translate3d(-.8%,2.5%,0) rotate(-.7deg) scale(1.06)}
  100%{transform:translate3d(2.8%,-1%,0) rotate(2deg) scale(1.025)}
}
@keyframes globalBgSweep{
  0%{background-position:-80% 50%,0 0,0 0;transform:translate3d(-1.5%,0,0)}
  50%{background-position:80% 50%,24px 0,0 24px;transform:translate3d(1.5%,1%,0)}
  100%{background-position:180% 50%,48px 0,0 48px;transform:translate3d(-1%,0,0)}
}
@keyframes bgOrbOne{from{transform:translate3d(0,0,0) scale(.9)}to{transform:translate3d(150px,80px,0) scale(1.16)}}
@keyframes bgOrbTwo{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-180px,-95px,0) scale(.88)}}
@keyframes bgOrbThree{from{transform:translate3d(-80px,20px,0) scale(.88)}to{transform:translate3d(110px,-130px,0) scale(1.18)}}

@media(max-width:780px){
  .animated-site-bg::before{filter:blur(16px);animation-duration:14s}
  .animated-site-bg::after{opacity:.68;animation-duration:11s}
  .animated-site-bg .bg-orb--1{width:300px;height:300px;left:-110px;top:13%;animation-duration:10s}
  .animated-site-bg .bg-orb--2{width:360px;height:360px;right:-140px;top:47%;animation-duration:12s}
  .animated-site-bg .bg-orb--3{width:260px;height:260px;left:24%;bottom:-80px;animation-duration:11s}
}
@media(prefers-reduced-motion:reduce){
  .animated-site-bg::before,.animated-site-bg::after,.animated-site-bg .bg-orb{animation:none!important}
}

/* ===== FUNDO UNIFICADO: MESMO FUNDO DO TITULO EM TODO O SITE =====
   Esta camada agora replica o visual do hero e fica continua do topo ao rodape.
   As secoes principais ficam transparentes para nao criar mudancas de fundo. */
.animated-site-bg{
  background:
    radial-gradient(circle at 18% 35%,rgba(255,255,255,.07),transparent 20%),
    radial-gradient(circle at 82% 28%,rgba(255,255,255,.045),transparent 18%),
    radial-gradient(circle at 50% 86%,rgba(255,255,255,.035),transparent 24%),
    linear-gradient(115deg,#050607 0%,#0b0e11 50%,#050607 100%)!important;
  background-size:130% 130%,125% 125%,140% 140%,100% 100%!important;
  animation:heroLightFlow 12s ease-in-out infinite alternate!important;
}
.animated-site-bg::before{
  inset:-30% -10%!important;
  background:
    repeating-linear-gradient(118deg,transparent 0 90px,rgba(255,255,255,.012) 91px 92px,transparent 93px 180px),
    radial-gradient(circle at 25% 50%,rgba(255,255,255,.045),transparent 19%),
    radial-gradient(circle at 75% 45%,rgba(255,255,255,.028),transparent 17%)!important;
  background-size:180% 100%,100% 100%,100% 100%!important;
  filter:none!important;
  opacity:.95!important;
  animation:heroMeshMove 18s linear infinite!important;
}
.animated-site-bg::after{display:none!important}
.animated-site-bg .bg-orb{display:none!important}

/* O hero deixa de ter um fundo separado e passa a mostrar exatamente a mesma camada global. */
.hero.container{
  background:transparent!important;
  animation:none!important;
}
.hero.container::before,
.hero.container::after{
  display:none!important;
}

/* Remove fundos diferentes das secoes para manter continuidade visual. */
main,
.category-strip,
.products-section,
.benefits,
.custom-cta,
footer{
  background:transparent!important;
}
main::before,
body::after,
.products-section::before,
.category-strip::before,
.custom-cta::before,
.custom-cta::after{
  display:none!important;
}

/* Mantem apenas linhas/divisores e os proprios cards, sem criar faixas de outra cor. */
.benefits{
  border-top:1px solid rgba(255,255,255,.08)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  backdrop-filter:none!important;
}
.custom-cta{
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}

@media (hover:none), (pointer:coarse), (max-width:780px){
  .animated-site-bg{
    animation:mobileHeroFlow 8s ease-in-out infinite alternate!important;
  }
  .animated-site-bg::before{
    animation:mobileHeroMesh 11s linear infinite!important;
    opacity:1!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .animated-site-bg,.animated-site-bg::before{animation:none!important}
}


/* ===== TITULO PRINCIPAL: CONTORNO + PREENCHIMENTO LETRA POR LETRA =====
   Estado normal: todas as letras aparecem somente em tracado branco.
   Desktop: somente a letra sob o ponteiro e preenchida de branco.
   Celular/tablet: toque em uma letra para preencher temporariamente. */
.hero h1.hero-letter-title{
  color:transparent!important;
  filter:none!important;
  cursor:default!important;
  transform:none!important;
  text-shadow:none!important;
  -webkit-text-fill-color:transparent!important;
}
.hero h1 .hero-letter-word{
  display:inline-block;
  white-space:nowrap;
}
.hero h1 .hero-letter{
  display:inline-block;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  -webkit-text-stroke:1.35px rgba(247,247,245,.96)!important;
  text-stroke:1.35px rgba(247,247,245,.96);
  filter:none!important;
  transform:translateZ(0);
  transition:
    color .18s ease,
    -webkit-text-fill-color .18s ease,
    transform .20s cubic-bezier(.2,.75,.2,1),
    text-shadow .20s ease,
    -webkit-text-stroke-color .18s ease!important;
  will-change:transform,color;
}
@media (hover:hover) and (pointer:fine){
  .hero h1 .hero-letter:hover{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    -webkit-text-stroke-color:#fff!important;
    transform:translateY(-2px) scale(1.035);
    text-shadow:0 0 14px rgba(255,255,255,.18),0 5px 18px rgba(0,0,0,.72)!important;
  }
}
@media (hover:none), (pointer:coarse){
  .hero h1 .hero-letter{
    color:transparent!important;
    -webkit-text-fill-color:transparent!important;
    -webkit-text-stroke:1.25px rgba(247,247,245,.96)!important;
  }
  .hero h1 .hero-letter.touch-letter{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    -webkit-text-stroke-color:#fff!important;
    transform:translateY(-2px) scale(1.035)!important;
    text-shadow:0 0 14px rgba(255,255,255,.16),0 5px 18px rgba(0,0,0,.72)!important;
  }
}

/* ===== TITULO PRINCIPAL: CONTORNO + PREENCHIMENTO POR PALAVRA ===== */
.hero h1.hero-word-title{
  color:transparent!important;
  filter:none!important;
  cursor:default!important;
  transform:none!important;
  text-shadow:none!important;
  -webkit-text-fill-color:transparent!important;
}
.hero h1 .hero-outline-word{
  display:inline-block;
  white-space:nowrap;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  -webkit-text-stroke:1.35px rgba(247,247,245,.96)!important;
  text-stroke:1.35px rgba(247,247,245,.96);
  filter:none!important;
  transform:translateZ(0);
  transition:color .22s ease,-webkit-text-fill-color .22s ease,transform .24s cubic-bezier(.2,.75,.2,1),text-shadow .24s ease,-webkit-text-stroke-color .22s ease!important;
  will-change:transform,color;
}
@media (hover:hover) and (pointer:fine){
  .hero h1 .hero-outline-word:hover{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    -webkit-text-stroke-color:#fff!important;
    transform:translateY(-2px) scale(1.025);
    text-shadow:0 0 18px rgba(255,255,255,.20),0 5px 18px rgba(0,0,0,.72)!important;
  }
}
@media (hover:none), (pointer:coarse){
  .hero h1 .hero-outline-word{
    color:transparent!important;
    -webkit-text-fill-color:transparent!important;
    -webkit-text-stroke:1.25px rgba(247,247,245,.96)!important;
  }
  .hero h1 .hero-outline-word.touch-word-fill{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    -webkit-text-stroke-color:#fff!important;
    transform:translateY(-2px) scale(1.025)!important;
    text-shadow:0 0 18px rgba(255,255,255,.18),0 5px 18px rgba(0,0,0,.72)!important;
  }
}

/* ===== CATEGORIAS: LAYOUT COMPACTO E RESPONSIVO NO CELULAR ===== */
@media (max-width:780px){
  .category-strip{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    padding:10px 0 14px!important;
    margin-top:0!important;
  }
  .category-card{
    height:66px!important;
    min-height:66px!important;
    border-radius:10px!important;
    padding:0!important;
    animation:none!important;
  }
  .category-card span{
    padding:0 7px!important;
    font-size:15px!important;
    line-height:1.05!important;
    letter-spacing:.18px!important;
  }
  .category-card small{
    margin-top:3px!important;
    font-size:9px!important;
    line-height:1.1!important;
  }
  .category-card:last-child{
    grid-column:1 / -1!important;
    height:60px!important;
    min-height:60px!important;
  }
}

@media (max-width:460px){
  .category-strip{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    padding:8px 0 12px!important;
  }
  .category-card{
    height:60px!important;
    min-height:60px!important;
    border-radius:9px!important;
  }
  .category-card span{
    font-size:13.5px!important;
    padding:0 5px!important;
  }
  .category-card small{
    font-size:8.5px!important;
    margin-top:3px!important;
  }
  .category-card:last-child{
    height:56px!important;
    min-height:56px!important;
  }
}

@media (max-width:350px){
  .category-card span{font-size:12.5px!important}
  .category-card small{font-size:8px!important}
}