/* =====================================================
   01 RESET
===================================================== */

{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* =====================================================
   02 DESIGN SYSTEM
===================================================== */

:root{

  --bg:#f8fafc;
  --card:#ffffff;

  --text:#0f172a;
  --muted:#64748b;

  --border:#e5e7eb;

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:24px;
  --radius-xl:32px;

  --shadow:
  0 10px 30px rgba(15,23,42,.08);

  --shadow-hover:
  0 15px 40px rgba(15,23,42,.12);

}

/* =====================================================
   03 BODY
===================================================== */

body{

  font-family:
  Inter,
  -apple-system,
  BlinkMacSystemFont,
  sans-serif;

  background:var(--bg);

  color:var(--text);

  min-height:100vh;

  overflow-x:hidden;

  position:relative;

}

/* =====================================================
   04 FUNDO PREMIUM
===================================================== */

body::before{

  content:"";

  position:fixed;

  inset:0;

  pointer-events:none;

  z-index:0;

  background:

  radial-gradient(
    circle at 10% 15%,
    rgba(var(--theme-rgb),.08),
    transparent 28%
  ),

  radial-gradient(
    circle at 90% 20%,
    rgba(var(--theme-rgb),.05),
    transparent 30%
  ),

  radial-gradient(
    circle at 50% 85%,
    rgba(var(--theme-rgb),.05),
    transparent 35%
  );

}

body > *{

  position:relative;

  z-index:1;

}

/* =====================================================
   05 CONTAINER
===================================================== */

.container{

  width:min(1400px,95%);

  margin:auto;

  padding:30px;

}

/* =====================================================
   06 TOPO FIXO
===================================================== */

.topo-fixo{

  position:sticky;

  top:0;

  z-index:100;

}

/* =====================================================
   07 HEADER SLIM PRO
===================================================== */

.header{

  background:
  linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );

  border-radius:0 0 28px 28px;

  padding:12px 0 !important;

  box-shadow:
  0 10px 25px rgba(0,0,0,.08);

}

.header-inner{

  width:min(1400px,95%);

  margin:auto;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:18px;

}

/* =====================================================
   08 BRAND
===================================================== */

.brand{

  display:flex;

  align-items:center;

  gap:18px;

}

.logo-wrapper{

  width:82px;

  height:82px;

  border-radius:22px;

  background:#fff;

  overflow:hidden;

  flex-shrink:0;

  box-shadow:
  0 10px 25px rgba(0,0,0,.10);

}

.logo-img{

  width:100%;

  height:100%;

  object-fit:cover;

}

.logo-fallback{

  width:100%;

  height:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:30px;

  font-weight:800;

  color:var(--primary);

}

.brand-info{

  display:flex;

  flex-direction:column;

  gap:4px;

}

.brand-info h2{

  color:#fff;

  font-size:32px;

  font-weight:800;

}

.brand-info small{

  color:rgba(255,255,255,.90);

  font-size:14px;

}

.headline{

  color:rgba(255,255,255,.85);

  font-size:14px;

}

/* =====================================================
   09 HEADER RIGHT
===================================================== */

.header-right{

  display:flex;

  align-items:center;

  gap:16px;

}

/* =====================================================
   10 BUSCA
===================================================== */

.search-box-header{

  width:480px;

  height:64px;

  background:#fff;

  border-radius:22px;

  display:flex;

  align-items:center;

  padding:0 22px;

  box-shadow:
  0 12px 30px rgba(0,0,0,.10);

}

.search-box-header input{

  width:100%;

  border:none;

  outline:none;

  background:transparent;

  font-size:16px;

}

.search-suggestions{

  display:none;

}

/* =====================================================
   11 WHATSAPP
===================================================== */
.whatsapp-btn{

  width:48px;
  height:48px;

  min-width:48px;

  border:none;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:22px;

  cursor:pointer;

  padding:0;
}
/* =====================================================
   12 CATEGORIAS
===================================================== */

.categories{

  width:min(1400px,95%);

  margin:24px auto;

  display:flex;

  gap:12px;

  flex-wrap:wrap;

}

.category-btn{

  height:48px;

  padding:0 22px;

  border:none;

  border-radius:999px;

  background:#fff;

  font-weight:600;

  color:var(--text);

  box-shadow:
  0 6px 18px rgba(0,0,0,.05);

}

.category-btn.active{

  color:#fff;

  background:
  linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );

}

/* =====================================================
   ETAPA 2
   FEATURED PRODUCT PREMIUM
===================================================== */

.featured-product{

  background:#fff;

  border-radius:32px;

  padding:40px;

  margin-top:20px;

  border:1px solid var(--border);

  box-shadow:
  0 15px 40px rgba(15,23,42,.08);

  position:relative;

  overflow:hidden;

}

.featured-product::before{

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:

  radial-gradient(
    circle at 15% 80%,
    rgba(var(--theme-rgb),.08),
    transparent 30%
  ),

  radial-gradient(
    circle at 90% 20%,
    rgba(var(--theme-rgb),.06),
    transparent 25%
  );

}

.featured-badge{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding:10px 18px;

  border-radius:999px;

  font-size:14px;

  font-weight:800;

  color:var(--primary);

  background:
  rgba(var(--theme-rgb),.10);

  margin-bottom:25px;

}

.featured-content{

  display:grid;

  grid-template-columns:
  420px 1fr;

  gap:60px;

  align-items:center;

}

.featured-image{

  width:420px;

  height:420px;

  display:flex;

  align-items:center;

  justify-content:center;

}

.featured-image img{

  width:100%;

  height:100%;

  object-fit:contain;

  transition:.35s;

}

.featured-image:hover img{

  transform:scale(1.03);

}

.featured-info{

  display:flex;

  flex-direction:column;

  gap:18px;

}

.featured-info h2{

  margin:0;

  font-size:52px;

  line-height:1.05;

  font-weight:900;

  color:var(--text);

}

.featured-info p{

  margin:0;

  font-size:20px;

  line-height:1.8;

  color:var(--muted);

  max-width:850px;

}

.featured-price{

  font-size:64px;

  font-weight:900;

  color:var(--primary);

  line-height:1;

  margin-top:10px;

}

.featured-btn{

  width:max-content;

  height:64px;

  padding:0 42px;

  border:none;

  border-radius:18px;

  font-size:18px;

  font-weight:800;

  color:#fff;

  cursor:pointer;

  background:

  linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );

  box-shadow:
  0 15px 35px rgba(0,0,0,.15);

  transition:.25s;

}

.featured-btn:hover{

  transform:
  translateY(-3px);

  box-shadow:
  0 20px 45px rgba(0,0,0,.18);

}

/* =====================================================
   TRUST SECTION PREMIUM
===================================================== */

.trust-section{

  display:grid;

  grid-template-columns:
  repeat(4,1fr);

  gap:20px;

  margin-top:28px;

}

.trust-card{

  background:#fff;

  border:1px solid var(--border);

  border-radius:24px;

  padding:24px;

  display:flex;

  align-items:center;

  gap:18px;

  box-shadow:
  0 10px 25px rgba(15,23,42,.06);

  transition:.25s;

}

.trust-card:hover{

  transform:
  translateY(-4px);

  box-shadow:
  0 18px 40px rgba(15,23,42,.10);

}

.trust-card span{

  width:58px;

  height:58px;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:26px;

  border-radius:18px;

  background:
  rgba(var(--theme-rgb),.10);

}

.trust-card strong{

  display:block;

  font-size:17px;

  font-weight:800;

  color:var(--text);

}

.trust-card small{

  display:block;

  margin-top:4px;

  font-size:14px;

  color:var(--muted);

}

/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width:1200px){

  .featured-content{

    grid-template-columns:1fr;

    text-align:center;

  }

  .featured-image{

    margin:auto;

  }

  .featured-btn{

    margin:auto;

  }

  .trust-section{

    grid-template-columns:
    repeat(2,1fr);

  }

}

@media (max-width:768px){

  .featured-product{

    padding:25px;

  }

  .featured-image{

    width:260px;

    height:260px;

  }

  .featured-info h2{

    font-size:34px;

  }

  .featured-info p{

    font-size:16px;

  }

  .featured-price{

    font-size:42px;

  }

  .trust-section{

    grid-template-columns:1fr;

  }

}



/* =====================================================
   IMAGEM PRINCIPAL
===================================================== */

.featured-image{

  width:500px;

  height:500px;

  margin:auto;

  display:flex;
  align-items:center;
  justify-content:center;

}

.featured-image img{

  width:100%;
  height:100%;

  object-fit:contain;

}

/* =====================================================
   INFORMAÇÕES
===================================================== */

.featured-info{

  max-width:760px;

}

.featured-info h2{

  font-size:48px;

  line-height:1.05;

  font-weight:900;

  margin-bottom:18px;

  letter-spacing:-1px;

}

.featured-info p{

  max-width:650px;

  font-size:18px;

  line-height:1.8;

  color:var(--muted);

}

/* =====================================================
   PREÇO
===================================================== */

.featured-price{

  margin-top:15px;

  font-size:62px;

  font-weight:900;

  line-height:1;

  color:var(--primary);

}

/* =====================================================
   BOTÃO
===================================================== */

.featured-btn{

  width:280px;

  height:68px;

  margin-top:10px;

  font-size:20px;

  font-weight:800;

}

/* =====================================================
   RESERVA PARA ETAPA 2.5
===================================================== */

.featured-image::after{

  content:"";

  display:block;

  height:20px;

}

/* =====================================================
   RESPONSIVO
===================================================== */

@media(max-width:1200px){

  .featured-content{

    grid-template-columns:1fr;

    gap:40px;

  }

  .featured-image{

    width:420px;
    height:420px;

  }

}

@media(max-width:768px){

  .featured-product{

    padding:25px;

  }

  .featured-image{

    width:280px;
    height:280px;

  }

  .featured-info h2{

    font-size:34px;

  }

  .featured-price{

    font-size:48px;

  }

  .featured-btn{

    width:100%;

  }

}


/* =====================================================
   FEATURED GALLERY
===================================================== */

.featured-image{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.featured-image img{

  width:220px !important;

  height:220px !important;

  max-width:220px !important;

  max-height:220px !important;

  object-fit:contain !important;

  display:block !important;

  margin:auto !important;

}

.featured-image{

  position:relative !important;

  width:340px !important;

  height:260px !important;

  display:grid !important;

  grid-template-columns:56px 1fr !important;

  gap:14px !important;

  align-items:center !important;

  overflow:visible !important;
}

.featured-thumbs{

  display:flex;
  justify-content:center;
  gap:12px;

  width:100%;
}

.featured-thumb{

  width:72px;
  height:72px;

  border-radius:16px;

  overflow:hidden;

  cursor:pointer;

  border:2px solid transparent;

  background:#fff;

  transition:.25s ease;

  box-shadow:
  0 8px 20px rgba(0,0,0,.08);
}

.featured-thumb:hover{

  transform:translateY(-4px);
}

.featured-thumb.active{

  border-color:var(--primary);
}

.featured-thumb img{

  width:100%;
  height:100%;

  object-fit:cover;
}


/* =====================================================
   FEATURED THUMBS
===================================================== */

.featured-thumbs{

  display:flex;
  justify-content:center;
  gap:14px;

  margin-top:18px;

  flex-wrap:wrap;
}

.featured-thumb{

  width:90px;
  height:90px;

  border-radius:18px;

  overflow:hidden;

  cursor:pointer;

  background:#fff;

  border:2px solid transparent;

  transition:.25s ease;

  box-shadow:
  0 8px 20px rgba(0,0,0,.08);
}

.featured-thumb:hover{

  transform:translateY(-4px);
}

.featured-thumb.active{

  border-color:var(--primary);

  transform:translateY(-4px);

  box-shadow:
  0 12px 30px rgba(0,0,0,.15);
}

.featured-thumb img{

  width:100%;
  height:100%;

  object-fit:cover;
}


/* =====================================================
   HOTFIX MINIATURAS PREMIUM
===================================================== */

.featured-thumbs{

  display:flex;
  justify-content:center;
  align-items:center;

  gap:14px;

  margin-top:-8px;

  flex-wrap:wrap;

  width:100%;
}

.featured-image{

  display:flex;
  flex-direction:column;
  align-items:center;
}



.featured-thumb{

  width:90px;
  height:90px;

  flex-shrink:0;

  border-radius:18px;

  overflow:hidden;

  cursor:pointer;

  background:#fff;

  border:2px solid transparent;

  transition:
  transform .25s ease,
  border-color .25s ease,
  box-shadow .25s ease;

  box-shadow:
  0 8px 20px rgba(0,0,0,.08);
}

.featured-thumb:hover{

  transform:
  translateY(-4px)
  scale(1.03);

  box-shadow:
  0 12px 28px rgba(0,0,0,.12);
}

.featured-thumb.active{

  border-color:var(--primary);

  transform:
  translateY(-4px)
  scale(1.05);

  box-shadow:
  0 15px 35px
  rgba(var(--theme-rgb),.35);
}

.featured-thumb 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;

  object-fit:cover !important;

  opacity:1 !important;

  visibility:visible !important;

  border-radius:0 !important;

  transform:none !important;
}

/* impede regras da imagem principal
   afetarem as miniaturas */

.featured-image > img{

  width:100%;

  max-width:420px;

  height:auto;

  object-fit:contain;

  border-radius:24px;
}

/* =====================================================
   ETAPA 4.2
   PRODUCT GRID PREMIUM
===================================================== */

.products{

  display:grid;

  grid-template-columns:
  repeat(auto-fill,minmax(280px,1fr));

  gap:28px;

  margin-top:40px;

}

/* =====================================================
   CARD
===================================================== */

.product{

  position:relative;

  background:#fff;

  border-radius:28px;

  overflow:hidden;

  border:1px solid var(--border);

  box-shadow:
  0 10px 30px rgba(15,23,42,.06);

  transition:.35s ease;

  display:flex;
  flex-direction:column;

}

.product:hover{

  transform:
  translateY(-8px);

  box-shadow:
  0 20px 50px rgba(15,23,42,.12);

}

/* =====================================================
   IMAGEM
===================================================== */

.product img{

  width:100%;
  height:280px;

  object-fit:contain;

  padding:20px;

  cursor:pointer;

  transition:.35s ease;

}

.product:hover img{

  transform:scale(1.05);

}

/* =====================================================
   NOME
===================================================== */

.product h2{

  padding:
  0 22px;

  font-size:20px;

  font-weight:800;

  line-height:1.25;

  margin-bottom:10px;

}

/* =====================================================
   DESCRIÇÃO
===================================================== */

.product .desc{

  padding:
  0 22px;

  color:var(--muted);

  font-size:14px;

  line-height:1.6;

  display:-webkit-box;

  -webkit-box-orient:vertical;

  -webkit-line-clamp:2;

  overflow:hidden;

  min-height:44px;

}

/* =====================================================
   VER MAIS
===================================================== */

.ver-mais{

  padding:
  0 22px;

  margin-top:8px;

  color:var(--primary);

  font-weight:700;

  cursor:pointer;

  font-size:14px;

}

/* =====================================================
   PREÇO
===================================================== */

.product .price{

  padding:
  18px 22px 10px;

  margin-top:auto;

  font-size:30px;

  font-weight:900;

  color:var(--primary);

}

/* =====================================================
   BOTÃO
===================================================== */

.product .button{

  margin:
  0 22px 22px;

  height:56px;

  border:none;

  border-radius:16px;

  cursor:pointer;

  color:#fff;

  font-size:15px;

  font-weight:800;

  background:
  linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );

  transition:.25s;

}

.product .button:hover{

  transform:
  translateY(-2px);

}

/* =====================================================
   BADGE DESTAQUE
===================================================== */

.product-badge{

  position:absolute;

  top:16px;
  left:16px;

  z-index:5;

  padding:
  8px 14px;

  border-radius:999px;

  font-size:12px;

  font-weight:800;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #f59e0b,
    #ef4444
  );
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

  .products{

    grid-template-columns:1fr;

    gap:20px;

  }

  .product img{

    height:220px;

  }

}


/* =====================================================
   OZONCORE COMPACT VIEW V3
   LAYOUT APROVADO - HERO COMPACTO
   HEADER ALINHADO AO CORPO
   4 PRODUTOS NA PRIMEIRA DOBRA
===================================================== */

/* =====================================================
   01 CONTAINER
===================================================== */

.container{

  padding:12px !important;

  max-width:1320px !important;

  margin:auto !important;
}

/* =====================================================
   02 HEADER
===================================================== */

.header{

  padding:10px 0 !important;

  border-radius:0 0 24px 24px !important;
}

.header-inner{

  width:min(1320px,95%) !important;

  gap:20px !important;
}

/* =====================================================
   03 LOGO E NOME
===================================================== */

.logo-img,
.logo-fallback{

  width:72px !important;

  height:72px !important;
}

.brand-info h2{

  font-size:24px !important;

  margin:0 !important;

  line-height:1.1 !important;
}

.brand-info small{

  font-size:14px !important;
}

/* =====================================================
   04 BUSCA
===================================================== */

.search-box-header{

  height:56px !important;
}

.search-box-header input{

  height:56px !important;
}

/* =====================================================
   05 CATEGORIAS
===================================================== */

.categories{

  margin-top:4px !important;

  margin-bottom:4px !important;

  gap:10px !important;
}

.category{

  height:44px !important;

  padding:0 18px !important;

  font-size:14px !important;
}

/* =====================================================
   06 HERO DESTAQUE
===================================================== */

.featured-product{

  margin-top:0 !important;

  padding:16px 20px !important;

  border-radius:24px !important;
}

/* =====================================================
   07 GRID HERO FINAL
===================================================== */
.featured-content{

  display:grid !important;

  grid-template-columns:
  300px 1fr 320px !important;

  gap:24px !important;

  align-items:flex-start !important;
}
/* =====================================================
   08 FOTO
===================================================== */

.featured-image{

  width:180px !important;

  position:relative !important;
}


.featured-image > img{

  max-width:170px !important;

  max-height:170px !important;

  object-fit:contain !important;
}

/* =====================================================
   09 MINIATURAS
===================================================== */

.featured-thumbs{

  margin-top:6px !important;

  gap:8px !important;
}

.featured-thumb{

  width:52px !important;

  height:52px !important;
}

/* =====================================================
   10 TEXTO CENTRAL
===================================================== */

.featured-info{

  display:flex !important;

  flex-direction:column !important;

  justify-content:center !important;

  gap:8px !important;
}

.featured-info h2{

  font-size:24px !important;

  line-height:1.15 !important;

  margin:0 !important;
}

.featured-info p{

  font-size:13px !important;

  line-height:1.35 !important;

  max-height:72px !important;

  overflow:hidden !important;
}

/* =====================================================
   11 COLUNA PREÇO
===================================================== */

.featured-side{

  display:flex !important;

  flex-direction:column !important;

  justify-content:center !important;

  align-items:flex-start !important;

  gap:14px !important;
}

/* =====================================================
   12 PREÇO
===================================================== */

.featured-price{

  font-size:56px !important;

  font-weight:800 !important;

  line-height:1 !important;

  margin:0 !important;
}

/* =====================================================
   13 BOTÃO COMPRAR
===================================================== */

.featured-btn{

  width:230px !important;

  height:54px !important;

  font-size:17px !important;

  border-radius:16px !important;
}

/* =====================================================
   14 TRUST SECTION
===================================================== */

.trust-section{

  display:none !important;
}

/* =====================================================
   15 PRODUTOS
===================================================== */

.products{

  grid-template-columns:
  repeat(4,minmax(0,1fr)) !important;

  gap:18px !important;

  margin-top:16px !important;
}

/* =====================================================
   16 CARDS
===================================================== */

.product{

  padding:14px !important;

  min-height:auto !important;
}

.product img{

  max-height:150px !important;

  padding:12px !important;
}

.product h2{

  font-size:18px !important;

  line-height:1.2 !important;
}

.product .price{

  font-size:20px !important;
}

/* =====================================================
   17 AJUSTE VISUAL FINAL
===================================================== */

.featured-product,
.products{

  max-width:1320px !important;

  margin-left:auto !important;

  margin-right:auto !important;
}


.featured-badge{

  position:absolute !important;

  top:8px !important;

  left:8px !important;

  margin:0 !important;

  padding:5px 10px !important;

  font-size:11px !important;

  z-index:10 !important;
}

/* =====================================================
   OZONCORE HERO CLEAN FINAL
===================================================== */

/* CARD */

.featured-product{

  padding:16px 20px !important;

  border-radius:24px !important;

  margin-top:0 !important;

  overflow:hidden !important;
}

/* BADGE */

.featured-badge{

  position:absolute !important;

  top:10px !important;

  left:12px !important;

  padding:4px 10px !important;

  font-size:10px !important;

  margin:0 !important;

  z-index:50 !important;
}

/* GRID */

.featured-content{

  display:grid !important;

  grid-template-columns:
  300px 1fr !important;

  gap:24px !important;

  align-items:flex-start !important;
}

/* FOTO */

.featured-image{

  width:300px !important;

  display:flex !important;

  flex-direction:row !important;

  align-items:flex-start !important;

  gap:12px !important;
}

/* MINIATURAS */

.featured-thumbs{

  display:flex !important;

  flex-direction:column !important;

  gap:8px !important;

  margin:0 !important;

  order:1 !important;
}

.featured-thumb{

  width:48px !important;

  height:48px !important;

  border-radius:10px !important;
}

/* FOTO PRINCIPAL */

.featured-image > img{

  width:220px !important;

  height:220px !important;

  max-width:220px !important;

  max-height:220px !important;

  object-fit:contain !important;

  order:2 !important;
}

/* TEXTO */

.featured-info{

  display:flex !important;

  flex-direction:column !important;

  gap:10px !important;

  min-width:0 !important;
}

/* TITULO */

.featured-info h2{

  font-size:22px !important;

  line-height:1.15 !important;

  margin:0 !important;
}

/* DESCRIÇÃO */

.featured-info p{

  font-size:14px !important;

  line-height:1.45 !important;

  max-width:760px !important;

  margin:0 !important;

  overflow:hidden !important;
}

/* PREÇO + BOTÃO */

.featured-actions{

  display:flex !important;

  align-items:center !important;

  gap:24px !important;

  margin-top:8px !important;
}

/* PREÇO */

.featured-price{

  font-size:60px !important;

  line-height:1 !important;

  margin:0 !important;

  white-space:nowrap !important;
}

/* BOTÃO */

.featured-btn{

  width:240px !important;

  height:56px !important;

  margin:0 !important;

  border-radius:16px !important;

  font-size:18px !important;
}

.featured-actions{

  display:flex !important;

  flex-direction:column !important;

  align-items:flex-start !important;

  justify-content:center !important;

  gap:14px !important;

  margin-top:0 !important;
}


/* =====================================================
   CORREÇÃO DEFINITIVA HERO
===================================================== */

.featured-content{

  display:grid !important;

  grid-template-columns:
  320px 1fr 320px !important;

  gap:24px !important;

  align-items:center !important;
}

.featured-info{

  min-width:0 !important;

  display:flex !important;

  flex-direction:column !important;

  justify-content:center !important;
}

.featured-actions{

  display:flex !important;

  flex-direction:column !important;

  justify-content:center !important;

  align-items:flex-start !important;

  gap:16px !important;
}

.featured-price{

  font-size:64px !important;

  line-height:1 !important;

  margin:0 !important;

  white-space:nowrap !important;
}

.featured-btn{

  width:260px !important;

  height:58px !important;

  margin:0 !important;
}

/* =====================================================
   HERO AUTO HEIGHT
===================================================== */

.featured-product{

  height:auto !important;

  min-height:0 !important;

  padding:20px !important;

  overflow:hidden !important;
}

.featured-content{

  align-items:center !important;
}

.featured-info{

  align-self:center !important;
}

.featured-actions{

  align-self:center !important;
}


/* =====================================================
   OZONCORE HERO FINAL FIX
===================================================== */

/* CARD */

.featured-product{

  height:auto !important;

  min-height:0 !important;

  padding:16px 20px !important;

  overflow:hidden !important;
}

/* GRID */

.featured-content{

  display:grid !important;

  grid-template-columns:
  320px 1fr 320px !important;

  gap:24px !important;

  align-items:center !important;
}

/* FOTO */

.featured-image{

  width:320px !important;

  height:auto !important;

  min-height:auto !important;

  display:flex !important;

  flex-direction:row !important;

  align-items:center !important;

  gap:12px !important;
}

/* IMAGEM PRINCIPAL */

.featured-image > img{

  width:220px !important;

  height:220px !important;

  max-width:220px !important;

  max-height:220px !important;

  object-fit:contain !important;
}

/* MINIATURAS */

.featured-thumbs{

  display:flex !important;

  flex-direction:column !important;

  gap:8px !important;

  margin:0 !important;
}

.featured-thumb{

  width:52px !important;

  height:52px !important;
}

/* TEXTO */

.featured-info{

  display:flex !important;

  flex-direction:column !important;

  justify-content:center !important;

  min-width:0 !important;
}

.featured-info p{

  max-height:95px !important;

  overflow:hidden !important;
}

/* PREÇO + BOTÃO */

.featured-actions{

  display:flex !important;

  flex-direction:column !important;

  justify-content:center !important;

  gap:16px !important;

  align-items:flex-start !important;
}

.featured-price{

  font-size:64px !important;

  line-height:1 !important;

  margin:0 !important;

  white-space:nowrap !important;
}

.featured-btn{

  width:260px !important;

  height:56px !important;

  margin:0 !important;
}
/* =====================================================
   OZONCORE HERO FINAL TUNING
   AJUSTE FINO DEFINITIVO
===================================================== */

/* HERO MAIS COMPACTO */

.featured-product{

  margin-top:8px !important;

  padding:14px 18px !important;
}

/* APROXIMA CATEGORIAS DO HERO */

.categories{

  margin-bottom:6px !important;
}

/* ALINHAMENTO SUPERIOR */

.featured-content{

  align-items:flex-start !important;
}

/* BADGE PRODUTO DESTAQUE */

.featured-badge{

  top:14px !important;

  left:18px !important;

  z-index:999 !important;

  padding:6px 12px !important;

  font-size:11px !important;

  border-radius:999px !important;

  background:#fff7fb !important;

  box-shadow:
  0 4px 12px rgba(0,0,0,.05) !important;
}

/* TEXTO */

.featured-info{

  padding-top:6px !important;
}

.featured-info h2{

  margin-bottom:10px !important;
}

.featured-info p{

  font-size:14px !important;

  line-height:1.45 !important;

  max-height:120px !important;

  overflow:hidden !important;
}

/* FOTO */

.featured-image{

  align-items:flex-start !important;
}

.featured-image > img{

  width:230px !important;

  height:230px !important;

  max-width:230px !important;

  max-height:230px !important;
}

/* MINIATURAS */

.featured-thumbs{

  margin-top:2px !important;
}

.featured-thumb{

  width:50px !important;

  height:50px !important;
}

/* PREÇO */

.featured-price{

  font-size:60px !important;

  line-height:0.95 !important;

  margin-bottom:14px !important;
}

/* BOTÃO */

.featured-btn{

  width:290px !important;

  height:62px !important;

  font-size:18px !important;

  border-radius:18px !important;
}

/* =====================================================
   MICRO AJUSTE VISUAL
===================================================== */

.featured-price{

  font-size:60px !important;

  line-height:.95 !important;
}

.featured-badge{

  padding:4px 10px !important;

  font-size:12px !important;

  opacity:.85 !important;
}

.featured-image > img{

  margin-top:12px !important;
}



/* =====================================================
   HERO DIREITA FINAL
===================================================== */

/* COLUNA DIREITA */

.featured-actions{

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  justify-content:center !important;

  gap:18px !important;

  width:340px !important;

}

/* PREÇO */

.featured-price{

  font-size:50px !important;

  font-weight:900 !important;

  line-height:1 !important;

  margin:0 !important;

  text-align:center !important;

  white-space:nowrap !important;

}

/* BOTÃO */

.featured-btn{

  width:290px !important;

  height:55px !important;

  border-radius:20px !important;

  font-size:20px !important;

  font-weight:800 !important;

}

/* SELLOS */

.hero-trust{

  width:290px !important;

  display:grid !important;

  grid-template-columns:repeat(4,1fr) !important;

  margin-top:0 !important;

  background:#fff !important;

  border:1px solid #e8edf3 !important;

  border-radius:18px !important;

  overflow:hidden !important;

  box-shadow:
  0 6px 20px rgba(15,23,42,.05) !important;
}

.hero-trust-item{

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  justify-content:center !important;

  gap:6px !important;

  padding:12px 6px !important;

  min-height:74px !important;
}

.hero-trust-item:not(:last-child){

  border-right:
  1px solid #edf2f7 !important;
}

.hero-icon{

  width:22px !important;

  height:22px !important;

  color:var(--primary) !important;
}

.hero-trust-item span{

  font-size:12px !important;

  font-weight:700 !important;

  color:#64748b !important;
}


.featured-info h2{

  font-size:26px !important;

  line-height:1.15 !important;
}

.featured-info p{

  font-size:15px !important;

  line-height:1.55 !important;

  max-height:none !important;
}


/* ==========================================
   FORÇAR DESTAQUE MAIS À DIREITA
========================================== */

.featured-image{
  position:relative !important;
}

.featured-badge{

  position:absolute !important;

  top:17px !important;

  left:120px !important;

  right:auto !important;

  margin:0 !important;

  transform:none !important;

  z-index:999 !important;
}


.featured-actions{

  padding-top:18px !important;

}

/* =====================================================
   DESCRIÇÃO HERO
   LIMITAR EM 5 LINHAS
===================================================== */

.featured-info p{

  display:-webkit-box !important;

  -webkit-box-orient:vertical !important;

  -webkit-line-clamp:5 !important;

  overflow:hidden !important;

  max-height:110px !important;

  line-height:1.45 !important;

}

/* ==========================================
   HERO TRUST PREMIUM
========================================== */

.hero-trust{

  width:290px !important;

  display:grid !important;

  grid-template-columns:repeat(4,1fr) !important;

  background:#fff !important;

  border:1px solid #e8edf3 !important;

  border-radius:18px !important;

  overflow:hidden !important;

  box-shadow:
  0 6px 20px rgba(15,23,42,.05) !important;
}

.hero-trust-item{

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  justify-content:center !important;

  gap:8px !important;

  min-height:78px !important;

  padding:10px 6px !important;

  text-align:center !important;
}

.hero-trust-item:not(:last-child){

  border-right:
  1px solid #edf2f7 !important;
}

.trust-icon{

  font-size:22px !important;

  line-height:1 !important;
}

.hero-trust-item span:last-child{

  font-size:11px !important;

  font-weight:700 !important;

  color:#475569 !important;

  line-height:1.15 !important;
}


/* ==========================================
   LOGO PREMIUM BUSINESS
========================================== */

.logo-wrapper{

  width:82px !important;

  height:82px !important;

  border-radius:22px !important;

  overflow:hidden !important;

  background:#fff !important;

  border:3px solid rgba(255,255,255,.85) !important;

  box-shadow:
    0 10px 25px rgba(0,0,0,.12),
    0 4px 10px rgba(0,0,0,.06) !important;
}

.logo-img{

  width:100% !important;

  height:100% !important;

  object-fit:cover !important;

  object-position:center center !important;

  display:block !important;
}

.logo-fallback{

  width:100% !important;

  height:100% !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  font-size:28px !important;

  font-weight:800 !important;
}




/* =====================================================
   HEADER PREMIUM FINAL
===================================================== */

/* HEADER MAIS ELEGANTE */

.header{

  padding:14px 0 !important;
}

/* BUSCA */

.search-box-header{

  width:560px !important;

  height:58px !important;

  border-radius:20px !important;

  padding:0 22px !important;
}

.search-box-header input{

  font-size:18px !important;

  font-weight:500 !important;
}

/* BOTÃO WHATSAPP */

.whatsapp-btn{

  height:58px !important;

  min-width:150px !important;

  padding:0 28px !important;

  border-radius:18px !important;

  font-size:18px !important;

  font-weight:700 !important;
}

/* LOGO + NOME */

.brand{

  gap:16px !important;
}

.brand-info h2{

  font-size:30px !important;

  line-height:1 !important;
}

/* ALINHAMENTO GERAL */

.header-inner{

  align-items:center !important;

  min-height:96px !important;
}


/* =====================================================
   SEARCH PREMIUM DROPDOWN
===================================================== */

.search-box-header{

  position:relative !important;
}

.search-suggestions{

  position:absolute !important;
  top:72px !important;
  left:0 !important;
  width:100% !important;
  display:none;
  background:#fff !important;

  border:1px solid #e5e7eb !important;

  border-radius:20px !important;

  overflow:hidden !important;

  box-shadow:
  0 20px 40px rgba(15,23,42,.12) !important;

  z-index:9999 !important;
}

/* quando JS colocar conteúdo */

.search-suggestions.show{

  display:block !important;
}

/* itens */

.search-suggestions div{

  padding:14px 18px !important;

  cursor:pointer !important;

  font-size:15px !important;

  color:#334155 !important;

  border-bottom:
  1px solid #f1f5f9 !important;

  transition:.15s !important;
}

.search-suggestions div:last-child{

  border-bottom:none !important;
}

.search-suggestions div:hover{

  background:
  rgba(var(--theme-rgb),.08) !important;

  color:var(--primary) !important;
}

/* =====================================================
   CATEGORIAS PREMIUM
===================================================== */

.category-btn{

  height:54px;

  padding:0 26px;

  border:none;

  border-radius:18px;

  background:#fff;

  color:#1e293b;

  font-size:15px;

  font-weight:700;

  cursor:pointer;

  transition:.25s;

  box-shadow:
  0 8px 20px rgba(15,23,42,.06);

}

.category-btn:hover{

  transform:translateY(-2px);

  box-shadow:
  0 12px 28px rgba(15,23,42,.10);

}

.category-btn.active{

  color:#fff;

  background:
  linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );

  box-shadow:
  0 10px 25px rgba(var(--theme-rgb),.35);

}


/* =====================================================
   ESPAÇAMENTO PREMIUM
===================================================== */

.categories{

  margin:20px auto 16px auto !important;
}

.featured-product{

  margin-top:0 !important;
}

/* =====================================================
   ESPAÇAMENTO PREMIUM V2
===================================================== */

.categories{

  margin:18px auto 12px auto !important;
}

.featured-product{

  margin-top:0 !important;
}





/* =====================================================
   ESPAÇAMENTO PREMIUM V3
===================================================== */

.categories{

  margin:16px auto 10px auto !important;
}

.featured-product{

  margin-top:0 !important;
}


.categories{

  margin:14px auto 10px auto !important;
}


/* =====================================================
   CARD PRODUTO PREMIUM V1
===================================================== */

/* ESCONDE DESCRIÇÃO */

.product-description{

  display:none !important;
}

/* IMAGEM MAIOR */

.product-image{

  height:240px !important;
}

.product-image img{

  width:100% !important;

  height:100% !important;

  object-fit:contain !important;

  transition:.3s !important;
}

/* TÍTULO */

.product-title{

  min-height:60px !important;

  font-size:18px !important;

  line-height:1.25 !important;

  font-weight:800 !important;

  color:#0f172a !important;

  margin-top:12px !important;
}

/* PREÇO */

.product-price{

  font-size:20px !important;

  font-weight:900 !important;

  color:var(--primary) !important;

  margin-top:12px !important;
}

/* VER MAIS -> SAIBA MAIS (VISUAL) */

.product-card a,
.product-card .ver-mais{

  display:inline-flex !important;

  align-items:center !important;

  justify-content:center !important;

  padding:10px 16px !important;

  border-radius:12px !important;

  background:rgba(var(--theme-rgb),.10) !important;

  color:var(--primary) !important;

  font-size:14px !important;

  font-weight:800 !important;

  text-decoration:none !important;

  transition:.25s !important;
}

.product-card a:hover,
.product-card .ver-mais:hover{

  background:rgba(var(--theme-rgb),.18) !important;

  transform:translateY(-2px) !important;
}

/* HOVER PREMIUM */

.product-card{

  transition:.25s !important;
}

.product-card:hover{

  transform:translateY(-6px) !important;

  box-shadow:
  0 20px 45px rgba(15,23,42,.12) !important;
}

.product-card:hover .product-image img{

  transform:scale(1.05) !important;
}


/* ==========================================
   CARD PRODUTO PREMIUM V2
========================================== */

.product{

  background:#fff !important;

  border-radius:28px !important;

  padding:24px !important;

  border:1px solid #eef2f7 !important;

  box-shadow:
  0 12px 35px rgba(15,23,42,.06) !important;

  transition:.25s !important;

}

.product:hover{

  transform:translateY(-6px) !important;

  box-shadow:
  0 20px 45px rgba(15,23,42,.10) !important;

}

/* IMAGEM */

.product img{

  width:200px !important;

  height:200px !important;

  object-fit:contain !important;

  margin:0 auto 20px !important;

  display:block !important;

}

/* TÍTULO */

.product h2{

  font-size:18px !important;

  line-height:1.15 !important;

  font-weight:800 !important;

  min-height:58px !important;

  color:#0f172a !important;

  margin-bottom:14px !important;

}

/* DESCRIÇÃO PRODUTOS */

.product .desc{

  padding:0 22px;

  color:var(--muted);

  font-size:14px;

  line-height:1.6;

  display:-webkit-box;

  -webkit-box-orient:vertical;

  -webkit-line-clamp:2;

  overflow:hidden;

  margin-bottom:10px;

}

.product .desc.expanded{

  display:block !important;

  -webkit-line-clamp:unset !important;

  overflow:visible !important;

  max-height:none !important;

}
/* SAIBA MAIS */

.ver-mais{

  display:inline-flex !important;

  align-items:center !important;

  gap:6px !important;

  font-size:14px !important;

  font-weight:700 !important;

  color:var(--primary) !important;

  margin-bottom:16px !important;

  cursor:pointer !important;

  transition:.2s !important;

}

.ver-mais:hover{

  opacity:.75 !important;
}

/* PREÇO */

.product .price{

  font-size:18px !important;

  font-weight:900 !important;

  color:var(--primary) !important;

  margin-bottom:16px !important;

}

/* BOTÃO */

.product button{

  width:100% !important;

  height:54px !important;

  border:none !important;

  border-radius:18px !important;

  font-size:18px !important;

  font-weight:800 !important;

  color:#fff !important;

  background:
  linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  ) !important;

  box-shadow:
  0 10px 25px rgba(0,0,0,.12) !important;
}

/* ==========================================
   CARD COMPACT PREMIUM
========================================== */

.product{

  display:flex !important;

  flex-direction:column !important;
}

/* PREÇO */

.product .price{

  text-align:center !important;

  font-size:18px !important;

  margin:12px 0 !important;
}

/* BOTÃO */

.product button{

  width:220px !important;

  height:48px !important;

  margin:0 auto !important;

  display:block !important;

  border-radius:16px !important;

  font-size:18px !important;
}

/* MENOS ESPAÇO INTERNO */

.product{

  padding:20px !important;
}

.product button{

  width:200px !important;

  height:46px !important;

  margin:0 auto !important;
}


/* =====================================================
   CARRINHO FLUTUANTE
===================================================== */

.floating-cart{

  position:fixed;

  right:24px;
  bottom:24px;

  display:none;

  align-items:center;

  gap:14px;

  padding:16px 22px;

  border-radius:20px;

  cursor:pointer;

  color:#fff;

  z-index:9999;

  background:
  linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );

  box-shadow:
  0 20px 40px rgba(0,0,0,.20);
}

.floating-cart-icon{

  font-size:24px;
}

.floating-cart-info{

  display:flex;
  flex-direction:column;
}

.floating-cart-info span{

  font-size:13px;

  opacity:.9;
}

.floating-cart-info strong{

  font-size:16px;

  font-weight:800;
}


/* =====================================================
   PREMIUM ALERT
===================================================== */

.premium-alert{

  position:fixed;

  inset:0;

  display:none;

  align-items:center;

  justify-content:center;

  background:rgba(15,23,42,.65);

  backdrop-filter:blur(8px);

  z-index:999999;
}

.premium-alert.show{

  display:flex;
}

.premium-alert-box{

  width:500px;

  max-width:92vw;

  max-height:88vh;

  overflow-y:auto;

  background:#fff;

  border-radius:22px;

  padding:28px 30px;

  text-align:left;

  box-shadow:
    0 25px 60px rgba(0,0,0,.22);

}
.premium-alert-box h2{

  margin:14px 0 18px;

  font-size:26px;

  font-weight:700;

  color:#1E293B;

  text-align:center;

  line-height:1.25;

}

.premium-alert-box p{

  margin:0;

  color:#475569;

  font-size:16px;

  line-height:1.55;

  white-space:pre-line;

  text-align:left;

}
.alert-btn{

  width:100%;

  height:52px;

  border:none;

  border-radius:14px;

  cursor:pointer;

  color:#fff;

  font-weight:800;

  margin-top:20px;

  background:
  linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );
}



/* =====================================================
   AÇÕES DO CARRINHO
===================================================== */



.coupon-box{

  display:flex;

  gap:10px;

  margin-bottom:18px;
}

.coupon-box input{

  flex:1;

  height:46px;

  border:1px solid #e5e7eb;

  border-radius:12px;

  padding:0 14px;
}

.coupon-box button{

  width:120px;

  border:none;

  border-radius:12px;

  cursor:pointer;

  color:#fff;

  font-weight:700;

  background:
  linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );
}

.coupon-message{

  margin-bottom:15px;

  font-size:13px;

  font-weight:600;
}


/* =====================================================
   CHECKOUT PREMIUM OZONCORE V3
===================================================== */

/* LISTA DE PRODUTOS */

.cart-items{

  padding:12px;

  overflow-y:auto;

  max-height:160px;

  min-height:0;
}

/* ITEM DO CARRINHO */

.cart-item{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:12px;

  padding:10px 12px;

  margin-bottom:8px;

  background:#f8fafc;

  border:1px solid #e5e7eb;

  border-radius:14px;
}

.cart-item > div:first-child{
  flex:1;
  min-width:0;
}




.cart-item strong{

  display:block;

  font-size:14px;

  font-weight:800;

  margin-bottom:2px;

  line-height:1.2;
}

.cart-item small{

  font-size:12px;

  color:#64748b;
}

/* QUANTIDADE */

.qty-controls{

  display:flex;

  align-items:center;

  gap:8px;

  flex-shrink:0;
}

.qty-controls button{

  width:28px;

  height:28px;

  border:none;

  border-radius:8px;

  cursor:pointer;

  color:#fff;

  font-size:14px;

  font-weight:800;

  background:
  linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );
}

.qty-controls span{

  min-width:18px;

  text-align:center;

  font-size:13px;

  font-weight:700;
}

/* DADOS DO CLIENTE */

.checkout-user{

  display:flex;

  flex-direction:row;

  gap:10px;

  margin:10px 0;
}
.checkout-user input{

  width:100%;
  height:40px;
  padding:0 14px;
  border:1px solid #e2e8f0;
  border-radius:12px;

  background:#f8fafc;

  font-size:14px;

  color:#0f172a;

  transition:.25s;
}

.checkout-user input:focus{

  outline:none;

  border-color:var(--primary);

  box-shadow:
  0 0 0 3px rgba(var(--theme-rgb),.12);
}

/* CUPOM */

.coupon-box{

  display:flex;

  gap:8px;

  margin-bottom:10px;
}

.coupon-box input{

  flex:1;

  height:40px;

  border:1px solid #e2e8f0;

  border-radius:12px;

  padding:0 14px;

  background:#f8fafc;

  font-size:14px;
}

.coupon-box button{

  width:100px;

  border:none;

  border-radius:12px;

  cursor:pointer;

  color:#fff;

  font-size:13px;

  font-weight:700;

  background:
  linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );
}

/* RODAPÉ */

.cart-footer{

  border-top:1px solid #e5e7eb;

  padding:14px 18px;

  background:#fff;

  flex-shrink:0;
}

/* TOTAIS */

.cart-total-row{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:6px;

  font-size:14px;
}

.cart-total-row.total{

  margin-top:8px;

  padding-top:8px;

  border-top:1px solid #e5e7eb;

  font-size:18px;

  font-weight:900;
}

.cart-total-row.total strong{

  color:var(--primary);
}

/* BOTÕES */

.cart-actions{

  display:flex;

  gap:10px;

  margin-top:12px;

  padding-top:12px;

  border-top:1px solid #e5e7eb;
}

.checkout-whatsapp,
.checkout-email{

  flex:1;

  height:42px;

  border:none;

  border-radius:12px;

  cursor:pointer;

  color:#fff;

  font-size:14px;

  font-weight:800;

  display:flex;

  align-items:center;

  justify-content:center;

  transition:.25s;
}

.checkout-whatsapp{

  background:
  linear-gradient(
    135deg,
    #25D366,
    #16A34A
  );
}

.checkout-email{

  background:
  linear-gradient(
    135deg,
    #2563EB,
    #1D4ED8
  );
}

.checkout-whatsapp:hover,
.checkout-email:hover{

  transform:translateY(-2px);
}

/* MODAL */

.cart-box{

  width:min(700px,95vw);

  max-height:85vh;

  background:#fff;

  border-radius:28px;

  overflow:hidden;

  display:flex;

  flex-direction:column;
}

/* MOBILE */

@media (max-width:768px){

  .cart-items{

    max-height:220px;
  }

  .cart-actions{

    flex-direction:column;
  }

}


/* ==========================================
   OZONCORE CART ARMOR
========================================== */

#cartModal{

  position:fixed !important;

  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  width:100vw !important;
  height:100vh !important;

  display:none;

  align-items:center !important;
  justify-content:center !important;

  background:rgba(15,23,42,.70) !important;

  backdrop-filter:blur(8px) !important;

  z-index:999999 !important;
}

#cartModal[style*="display: flex"]{

  display:flex !important;
}

#cartModal .cart-box{

  width:min(640px,95vw) !important;

  max-height:92vh !important;

  background:#fff !important;

  border-radius:24px !important;

  overflow:hidden !important;

  display:flex !important;

  flex-direction:column !important;

  position:relative !important;
}

#cartModal .cart-header{

  flex-shrink:0 !important;
}

#cartModal .cart-items{

  padding:12px !important;

  overflow-y:auto !important;

  max-height:45vh !important;

  min-height:0 !important;
}


#cartModal .cart-item{

  display:flex !important;

  justify-content:space-between !important;

  align-items:center !important;

  gap:12px !important;

  padding:10px 12px !important;
}

#cartModal .cart-item > div:first-child{

  flex:1 !important;

  min-width:0 !important;
}

#cartModal .cart-footer{

  flex-shrink:0 !important;

  background:#fff !important;
}

#cartModal .checkout-user{

  display:flex !important;

  gap:10px !important;
}

#cartModal .checkout-user input{

  flex:1 !important;
}

#cartModal .coupon-box{

  display:flex !important;

  gap:8px !important;
}

#cartModal .coupon-box input{

  flex:1 !important;
}

#cartModal .cart-actions{

  display:flex !important;

  gap:10px !important;
}

#cartModal .checkout-whatsapp,
#cartModal .checkout-email{

  flex:1 !important;
}

@media (max-width:768px){

  #cartModal .checkout-user{

    flex-direction:column !important;
  }

  #cartModal .cart-actions{

    flex-direction:column !important;
  }
}




/* ==========================================
   OZONCORE CART V4
========================================== */

/* MODAL */

#cartModal .cart-box{

  width:min(760px,95vw) !important;

  max-height:90vh !important;

  border-radius:22px !important;
}

/* HEADER */

#cartModal .cart-header{

  padding:14px 18px !important;
}

#cartModal .cart-header h2{

  font-size:20px !important;

  margin:0 !important;
}

/* PRODUTOS1 */

#cartModal .cart-items{

  padding:5px !important;

  max-height:420px !important;

  overflow-y:auto !important;

  min-height:60px !important;

}

#cartModal .cart-item{

  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;

  gap:10px !important;

  padding:8px 10px !important;

  margin-bottom:6px !important;

  border-radius:12px !important;
}

#cartModal .cart-item > div:first-child{

  flex:1 !important;

  min-width:0 !important;
}

#cartModal .cart-item strong{

  font-size:13px !important;

  line-height:1.2 !important;

  margin:0 !important;
}

#cartModal .cart-item small{

  font-size:11px !important;
}

/* QUANTIDADE */

#cartModal .qty-controls{

  gap:6px !important;
}

#cartModal .qty-controls button{

  width:24px !important;

  height:24px !important;

  font-size:12px !important;

  border-radius:6px !important;
}

#cartModal .qty-controls span{

  min-width:18px !important;

  font-size:12px !important;
}

/* FOOTER */

#cartModal .cart-footer{

  padding:12px 16px !important;
}

/* DADOS */

#cartModal .checkout-user{

  display:flex !important;

  gap:8px !important;

  margin:8px 0 !important;
}

/* Nome */

#clienteNome{

  flex:15 !important;
}

/* WhatsApp */

#clienteTelefone{

  flex:2 !important;
}

#clienteEmail{
  flex:15 !important;
}

/* Cupom */

#couponCode{
  flex:1.8 !important;
  max-width:140px !important;
}

/* Inputs */

#cartModal .checkout-user input,
#cartModal .coupon-box input{

  height:36px !important;

  font-size:13px !important;
}

/* ESCONDER BOTÃO APLICAR */

#cartModal .coupon-box button{

  display:none !important;
}

/* CUPOM */

#cartModal .coupon-box{

  margin:2px 0 !important;
}

/* MENSAGEM CUPOM */

#cartModal .coupon-message{

  margin:4px 0 !important;

  font-size:12px !important;
}

/* TOTAIS */

#cartModal .cart-total-row{

  margin-bottom:4px !important;

  font-size:13px !important;
}

#cartModal .cart-total-row.total{

  font-size:18px !important;

  margin-top:6px !important;

  padding-top:6px !important;
}

/* BOTÕES */

#cartModal .cart-actions{

  margin-top:8px !important;

  padding-top:8px !important;

  gap:8px !important;
}

#cartModal .checkout-whatsapp,
#cartModal .checkout-email{

  height:38px !important;

  font-size:13px !important;
}

/* MOBILE */

@media (max-width:768px){

  #cartModal .cart-box{

    width:95vw !important;
  }

  #cartModal .checkout-user{

    flex-direction:column !important;
  }

  #clienteNome,
  #clienteTelefone,
  #couponCode{

    width:100% !important;

    max-width:none !important;
  }

  #cartModal .cart-actions{

    flex-direction:column !important;
  }

  #cartModal .cart-items{

    max-height:280px !important;
  }
}


.cart-header{

  display:flex;

  justify-content:space-between;

  align-items:center;
}

.cart-close-btn{

  width:36px;
  height:36px;

  border:none;

  border-radius:10px;

  background:#f3f4f6;

  cursor:pointer;

  font-size:18px;

  font-weight:700;

  transition:.2s;
}

.cart-close-btn:hover{

  background:#e5e7eb;

  transform:scale(1.05);
}


/* =====================================================
   CATEGORIAS MOBILE - 1 LINHA
===================================================== */

@media (max-width:768px){

    .categories{

    display:flex !important;
    flex-wrap:nowrap !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    gap:12px !important;

    padding:10px 4px !important;

    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .categories::-webkit-scrollbar{
    display:none;
  }

}
  .categories::-webkit-scrollbar{
    display:none;
  }

  .category{

    flex:0 0 auto !important;

    min-width:max-content !important;

    white-space:nowrap !important;

    padding:14px 22px !important;

    border-radius:18px !important;
  }




/* =====================================================
   HEADER MOBILE FINAL
===================================================== */

@media (max-width:600px){

  .header-inner{

    flex-direction:column !important;

    align-items:stretch !important;

    gap:14px !important;
  }

  .brand{

    width:100% !important;
  }

  .brand-info{

    min-width:0 !important;
  }

  .brand-info h2{

    font-size:24px !important;

    line-height:1.05 !important;

    word-break:break-word !important;
  }

  .header-right{

    width:100% !important;

    display:flex !important;

    align-items:center !important;

    gap:10px !important;
  }

  .search-box-header{

    flex:1 !important;

    width:auto !important;

    min-width:0 !important;
  }

  .search-box-header input{

    font-size:15px !important;
  }

  .whatsapp-btn{

    flex:0 0 52px !important;

    width:52px !important;

    height:52px !important;

    min-width:52px !important;
  }

}


.wa-icon{

 color:#25D366;
 
 font-size:22px;

  display:inline-flex;

  align-items:center;

  justify-content:center;
}





/* =====================================================
   HERO MOBILE DEFINITIVO
===================================================== */

@media (max-width:768px){

  .featured-content{

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    gap:16px !important;
  }

  .featured-image{

    width:100% !important;

    max-width:320px !important;
  }

  .featured-info{

    width:100% !important;

    text-align:center !important;
  }

  .featured-actions{

    width:100% !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:center !important;

    gap:14px !important;
  }

  .featured-price{

    font-size:42px !important;
  }

  .featured-btn{

    display:flex !important;

    width:100% !important;

    max-width:320px !important;

    height:58px !important;
  }

}

/* =====================================================
   HERO TRUST MOBILE LIMPO
===================================================== */

@media (max-width:768px){

  .hero-trust{

    width:100% !important;

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

    gap:8px !important;

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

    padding:0 !important;

    margin-top:10px !important;
  }

  .hero-trust-item{

    display:inline-flex !important;

    flex-direction:row !important;

    align-items:center !important;

    justify-content:center !important;

    width:auto !important;

    min-height:auto !important;

    padding:0 !important;

    border:none !important;

    gap:4px !important;
  }

  .hero-trust-item:not(:last-child){

    border:none !important;
  }

  /* Remove Produtos Selecionados */

  .hero-trust-item:nth-child(3){

    display:none !important;
  }

  .hero-trust-item span:last-child{

    font-size:12px !important;

    font-weight:600 !important;
  }

}



/* =====================================================
   HERO MOBILE FINAL
   BOTÃO + DESCRIÇÃO
===================================================== */

@media (max-width:768px){

  /* BOTÃO COMPRAR */

  .featured-btn{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    text-align:center !important;

    padding:0 !important;
  }

  /* DESCRIÇÃO APENAS 2 LINHAS */

  .featured-info p{

    display:-webkit-box !important;

    -webkit-box-orient:vertical !important;

    -webkit-line-clamp:2 !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;

    line-height:1.45 !important;

    max-height:44px !important;

    margin-bottom:0 !important;
  }

}

.whatsapp-btn{

  color:#25D366 !important;

  font-size:28px !important;

}

.hero-trust-item:last-child span:last-child{

  color:#25D366 !important;

}


.topo-fixo{

  position:sticky;

  top:0;

  z-index:9999 !important;

}


/* ==========================================
   FEATURED DETAILS OVERRIDE
========================================== */

.featured-info p.expanded{

  display:block !important;

  overflow:visible !important;

  max-height:none !important;

  -webkit-line-clamp:unset !important;

}

/* ==========================================
   MOBILE ONLY
========================================== */

.mobile-only{
  display:none;
}

@media (max-width:768px){

  .mobile-only{
    display:block !important;
  }

}

/* ==========================================
   WHATSAPP HEADER RESPONSIVO
========================================== */

.whatsapp-btn{

  min-width:150px;

  width:auto;

  height:60px;

  padding:0 18px;

  border:none;

  border-radius:18px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;

}

.wa-icon{

  color:#25D366;

  font-size:22px;

  line-height:1;

}

.wa-text{

  color:#25D366;

  font-weight:700;

  font-size:18px;

  white-space:nowrap;

}

@media (max-width:768px){

  .whatsapp-btn{

    min-width:56px !important;

    width:56px !important;

    height:56px !important;

    padding:0 !important;

    gap:0 !important;

  }

  .wa-text{

    display:none !important;

  }

  .wa-icon{

    font-size:28px !important;

  }

}

.details-modal-content{

  width:90% !important;

  max-width:520px !important;

  max-height:80vh !important;

  overflow-y:auto !important;

  border-radius:24px !important;

  padding:28px !important;

}

.details-modal-content h2{

  font-size:28px !important;

  line-height:1.2 !important;

  margin-bottom:18px !important;

}

.details-modal-content p{

  font-size:18px !important;

  line-height:1.8 !important;

}

important

/* ==========================================
   TRAVA HORIZONTAL MOBILE
========================================== */

html,
body{

  overflow-x:hidden !important;

  max-width:100vw !important;

}

@media (max-width:768px){

  body{

    position:relative;

    overflow-x:hidden !important;

  }

}
/* =====================================================
   CART MOBILE FINAL PREMIUM V4
===================================================== */

@media (max-width:768px){

  #cartModal .cart-box{

    width:96vw !important;
    max-width:96vw !important;

    max-height:92vh !important;

    border-radius:28px !important;

    overflow:hidden !important;
  }

  /* HEADER */

  #cartModal .cart-header{

    padding:22px !important;
  }

  #cartModal .cart-header h2{

    font-size:22px !important;
    font-weight:800 !important;
  }

  /* LISTA PRODUTOS */

  #cartModal .cart-items{

    max-height:180px !important;

    min-height:120px !important;

    padding:12px !important;
  }

  #cartModal .cart-item{

    padding:14px !important;

    border-radius:18px !important;
  }

  #cartModal .cart-item strong{

    font-size:18px !important;

    line-height:1.3 !important;
  }

  /* FORMULÁRIO */

  #cartModal .checkout-user{

    display:grid !important;

    grid-template-columns:
      1fr 120px !important;

    gap:12px !important;

    padding:16px !important;
  }

  #clienteNome{

    grid-column:1 / 3 !important;

    height:58px !important;

    min-width:0 !important;
  }

  #clienteTelefone{

    height:58px !important;

    min-width:0 !important;
  }

  #couponCode{

    height:58px !important;

    max-width:none !important;

    min-width:0 !important;
  }

  #clienteEmail{

    grid-column:1 / 3 !important;

    height:58px !important;

    min-width:0 !important;
  }

  #cartModal .checkout-user input{

    width:100% !important;

    box-sizing:border-box !important;

    font-size:16px !important;

    border-radius:16px !important;

    padding:0 16px !important;
  }

  /* CUPOM */

  #couponMessage{

    padding:0 16px !important;

    font-size:15px !important;
  }

  /* TOTAIS */

  #cartModal .cart-total-row{

    font-size:18px !important;

    padding:0 16px !important;
  }

  #cartModal .cart-total-row.total{

    margin-top:10px !important;

    padding-top:12px !important;

    border-top:1px solid #e5e7eb !important;

    font-size:30px !important;

    font-weight:900 !important;
  }

  #cartModal .cart-total-row.total strong{

    font-size:30px !important;
  }

  /* BOTÃO */

  #cartModal .cart-actions{

    padding:0 16px 18px !important;

    border:none !important;
  }

  #cartModal .checkout-whatsapp{

    width:100% !important;

    height:70px !important;

    border-radius:18px !important;

    font-size:22px !important;

    font-weight:800 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;
  }

}


/* =====================================================
   OZONCORE PREMIUM ATMOSPHERE
   HERO EFFECTS V3
===================================================== */

.featured-product{

  position:relative;

  overflow:hidden;

  background:#fff;

  box-shadow:
    0 20px 60px rgba(0,0,0,.08);

}

/* ==========================================
   CONTEÚDO PRINCIPAL
========================================== */

.featured-content{

  position:relative;

  z-index:2;

}

/* ==========================================
   SPLASH ESQUERDA (SUAVE)
========================================== */

.featured-content::before{

  content:"";

  position:absolute;

  left:-320px;
  top:50%;

  transform:translateY(-50%);

  width:520px;
  height:520px;

  background:
    radial-gradient(
      circle,
      rgba(var(--splash-left),0.12),
      transparent 72%
    );

  border-radius:50%;

  pointer-events:none;

  z-index:-1;

}

/* ==========================================
   SPLASH DIREITA (SUAVE)
========================================== */

.featured-content::after{

  content:"";

  position:absolute;

  right:-380px;
  top:50%;

  transform:translateY(-50%);

  width:620px;
  height:620px;

  background:
    radial-gradient(
      circle,
      rgba(var(--splash-right),0.08),
      transparent 72%
    );

  border-radius:50%;

  pointer-events:none;

  z-index:-1;

}

/* ==========================================
   GLOW DO PRODUTO
========================================== */

.featured-image{

  position:relative;

}

.featured-image::after{

  content:"";

  position:absolute;

  width:240px;
  height:240px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  background:
    rgba(var(--glow-color),0.18);

  filter:blur(90px);

  border-radius:50%;

  z-index:0;

  pointer-events:none;

}

/* ==========================================
   IMAGEM ACIMA DO GLOW
========================================== */

.featured-image img{

  position:relative;

  z-index:2;

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

  .featured-content::before{

    left:-260px;

    width:380px;
    height:380px;

    opacity:.7;

  }

  .featured-content::after{

    right:-280px;

    width:420px;
    height:420px;

    opacity:.5;

  }

  .featured-image::after{

    width:180px;
    height:180px;

    filter:blur(60px);

  }

}

/* =====================================================
   OZONCORE MOBILE GRID PREMIUM
===================================================== */

@media (max-width:768px){

  #products{

    display:grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:14px !important;

    padding:0 14px 20px 14px !important;

    justify-content:center !important;

    align-items:start !important;

    box-sizing:border-box !important;
  }

  #products .product{

    width:100% !important;

    min-width:0 !important;

    margin:0 !important;

    padding:14px !important;

    border-radius:20px !important;

    box-sizing:border-box !important;

    display:flex !important;

    flex-direction:column !important;

    justify-content:space-between !important;

    min-height:320px !important;
  }

  #products .product img{

    width:100% !important;

    height:130px !important;

    object-fit:contain !important;

    display:block !important;

    margin:0 auto 10px auto !important;
  }

  #products .product h2{

    font-size:14px !important;

    line-height:1.3 !important;

    min-height:40px !important;

    margin:6px 0 10px 0 !important;

    text-align:center !important;
  }

  #products .desc{

    display:none !important;
  }

  #products .ver-mais{

    display:none !important;
  }

  #products .price{

    font-size:20px !important;

    text-align:center !important;

    margin:12px 0 !important;
  }

  #products .button{

    width:100% !important;

    height:44px !important;

    font-size:14px !important;

    border-radius:14px !important;
  }

}



/* =====================================================
   OZONCORE MOBILE GRID PREMIUM V2
===================================================== */

@media (max-width:768px){

  #products{

    display:grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:8px !important;

    width:100% !important;

    padding:0 8px 16px 8px !important;

    box-sizing:border-box !important;
  }

  #products .product{

    width:100% !important;

    min-width:0 !important;

    max-width:none !important;

    margin:0 !important;

    padding:10px !important;

    border-radius:18px !important;

    box-sizing:border-box !important;
  }

  #products .product img{

    width:100% !important;

    height:120px !important;

    object-fit:contain !important;
  }

  #products .product h2{

    font-size:13px !important;

    line-height:1.25 !important;

    min-height:42px !important;

    margin:8px 0 !important;

    text-align:center !important;
  }

  #products .desc,
  #products .ver-mais{

    display:none !important;
  }

  #products .price{

    font-size:18px !important;

    text-align:center !important;

    margin:8px 0 !important;
  }

  #products .button{

    width:100% !important;

    height:40px !important;

    font-size:13px !important;
  }

}

@media (max-width:768px){

  .desc,
  .ver-mais{

    display:none !important;

  }

}

/* ==========================================
   MODAL PRODUTO
========================================== */

.product-modal{

  position:fixed;

  inset:0;

  background:rgba(0,0,0,.6);

  display:flex;

  align-items:center;

  justify-content:center;

  z-index:99999;

}

.product-modal-box{

  width:92%;

  max-width:420px;

  background:#fff;

  border-radius:24px;

  padding:20px;

  position:relative;

}

.product-modal-box img{

  width:100%;

  height:260px;

  object-fit:contain;

}

.product-modal-close{

  position:absolute;

  right:15px;

  top:15px;

}

/* ==========================================
   BOTÃO MODAL PREMIUM
========================================== */

#modalBuyBtn{

  width:100%;

  height:56px;

  border:none;

  border-radius:16px;

  background:
    linear-gradient(
      90deg,
      #19c6b7,
      #1ea9ff
    );

  color:#fff;

  font-size:18px;

  font-weight:700;

  cursor:pointer;

  margin-top:16px;

  box-shadow:
    0 10px 30px rgba(30,169,255,.25);

  transition:.25s;
}

#modalBuyBtn:hover{

  transform:translateY(-2px);

  box-shadow:
    0 15px 35px rgba(30,169,255,.35);
}

#modalBuyBtn:active{

  transform:scale(.98);
}

/* ==========================================
   FECHAR MODAL PREMIUM
========================================== */

.product-modal-close{

  position:absolute;

  top:18px;

  right:18px;

  width:48px;

  height:48px;

  border:none;

  border-radius:14px;

  background:#fff;

  color:#000;

  font-size:28px;

  font-weight:700;

  cursor:pointer;

  z-index:10;

  box-shadow:
    0 8px 25px rgba(0,0,0,.18);

  transition:.25s;
}

.product-modal-close:hover{

  transform:scale(1.08);

  box-shadow:
    0 0 20px rgba(0,0,0,.25),
    0 0 40px rgba(30,169,255,.20);
}


/* =====================================================
   CATEGORIAS GLASS
===================================================== */

.categories{

    display:flex;
    align-items:center;
    gap:10px;

    overflow-x:auto;
    overflow-y:hidden;

    padding:8px 12px !important;

    margin-top:4px !important;
    margin-bottom:0 !important;

    background:rgba(255,255,255,.16);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    border-radius:18px;

    border:1px solid rgba(255,255,255,.22);

    box-shadow:0 6px 18px rgba(15,23,42,.06);

    scrollbar-width:none;
}

.categories::-webkit-scrollbar{
    display:none;
}



/* =====================================================
   ENTREGA COMPACTA
===================================================== */

.delivery-fields{

    margin-top:6px;

    display:flex;

    flex-direction:column;

    gap:4px;

}

.delivery-row{

    display:flex;

    align-items:center;

    gap:4px;

    width:100%;

}

.delivery-row input{

    box-sizing:border-box;

    height:30px;

    padding:0 8px;

    font-size:12px;

    border-radius:4px;

}

/* ---------- LINHA 1 ---------- */

.cep{

    flex:0 0 80px;

}

.endereco{

    flex:1;

}

.numero{

    flex:0 0 42px;

}

.complemento{

    flex:0 0 85px;

}

/* ---------- LINHA 2 ---------- */

.bairro{

    flex:0 0 110px;

}

.cidade{

    flex:1;

}

.uf{

    flex:0 0 38px;

}

/* ---------- CHECKBOX ---------- */

.delivery-check{

    display:flex;

    align-items:center;

    gap:6px;

    margin:4px 0;

}

.delivery-check input{

    width:16px;

    height:16px;

    cursor:pointer;

}

.delivery-text{

    font-size:13px;

    font-weight:700;

    color:var(--primary);

    letter-spacing:.2px;

}

/* ---------- MOBILE ---------- */

@media (max-width:768px){

    .delivery-row{

        flex-wrap:wrap;

        gap:6px;

    }

    .cep{

        flex:0 0 38%;

    }

    .numero{

        flex:0 0 18%;

    }

    .complemento{

        flex:1;

    }

    .endereco{

        flex:1 1 100%;

    }

    .bairro{

        flex:1 1 48%;

    }

    .cidade{

        flex:1 1 38%;

    }

    .uf{

        flex:0 0 45px;

    }

}



/* =====================================================
   OZONTECK CHECKOUT MOBILE V2
   PATCH EXCLUSIVO MOBILE
   (Remover este bloco para voltar ao comportamento anterior)
===================================================== */

@media (max-width:768px){

    /* Modal */
    #cartModal .cart-box{

        width:96vw !important;
        max-width:96vw !important;

        height:92vh !important;
        max-height:92vh !important;

        display:flex !important;
        flex-direction:column !important;

        overflow:hidden !important;

    }

    /* Header nunca diminui */

    #cartModal .cart-header{

        flex:0 0 auto !important;

    }

    /* Apenas produtos rolam */

    #cartModal .cart-items{

        flex:1 1 auto !important;

        min-height:120px !important;

        max-height:none !important;

        overflow-y:auto !important;

        -webkit-overflow-scrolling:touch !important;

    }

    /* Footer sempre aparece */

    #cartModal .cart-footer{

        flex:0 0 auto !important;

        overflow:visible !important;

        padding-bottom:12px !important;

        background:#fff !important;

    }

    /* Botão */

    #cartModal .cart-actions{

        margin-top:12px !important;

        padding-top:12px !important;

        border-top:1px solid #ececec !important;

    }

    #cartModal .checkout-whatsapp{

        width:100% !important;

        height:58px !important;

        font-size:18px !important;

    }

}


/* =====================================================
   OZONTECK CHECKOUT MOBILE
   AJUSTE FINO FINAL
   (Somente Mobile)
===================================================== */
/* =====================================================
   OZONTECK.EU
   CHECKOUT MOBILE
   PATCH OFICIAL
   Data: 06/07/2026

   Correções:
   ✓ Produtos com scroll
   ✓ Endereço de entrega
   ✓ Botão sempre visível
   ✓ Compatível com Desktop

   NÃO REMOVER SEM TESTES.
===================================================== */
@media (max-width:768px){

  /* HEADER MAIS COMPACTO */

  #cartModal .cart-header{

    padding:12px 16px !important;

  }

  #cartModal .cart-header h2{

    font-size:20px !important;

  }

  /* PRODUTOS */

  #cartModal .cart-items{

    max-height:165px !important;

    min-height:110px !important;

    padding:8px !important;

  }

  /* FORMULÁRIO */

  #cartModal .checkout-user{

    gap:8px !important;

    padding:8px !important;

  }

  #clienteNome,
  #clienteTelefone,
  #clienteEmail,
  #couponCode{

    height:46px !important;

    font-size:15px !important;

  }

  /* CHECKBOX */

  .delivery-check{

    margin:2px 0 !important;

  }

  .delivery-text{

    font-size:12px !important;

  }

  /* ENTREGA */

  .delivery-fields{

    margin-top:2px !important;

    gap:3px !important;

  }

  .delivery-row{

    gap:4px !important;

  }

  .delivery-row input{

    height:32px !important;

    font-size:12px !important;

    padding:0 6px !important;

  }

  /* CUPOM */

  #couponMessage{

    margin:4px 0 !important;

    font-size:13px !important;

  }

  /* TOTAIS */

  #cartModal .cart-total-row{

    font-size:15px !important;

    margin-bottom:2px !important;

    padding:0 12px !important;

  }

  #cartModal .cart-total-row.total{

    margin-top:6px !important;

    padding-top:6px !important;

    font-size:22px !important;

  }

  #cartModal .cart-total-row.total strong{

    font-size:22px !important;

  }

  /* BOTÃO */

  #cartModal .cart-actions{

    padding:6px 12px 10px !important;

    margin-top:6px !important;

  }

  #cartModal .checkout-whatsapp{

    height:54px !important;

    font-size:18px !important;

    border-radius:14px !important;

  }

}



/* =====================================================
   OZONTECK.EU
   CHECKOUT MOBILE FINAL
   PATCH ÚNICO
===================================================== */

@media (max-width:768px){

  /* Modal */

  #cartModal .cart-box{

      width:95vw !important;
      height:92vh !important;

      max-width:95vw !important;
      max-height:92vh !important;

      display:flex !important;
      flex-direction:column !important;

      overflow:hidden !important;

      border-radius:26px !important;

  }

  /* Produtos ocupam praticamente toda a tela */

  #cartModal .cart-items{

      flex:1 1 auto !important;

      max-height:none !important;

      min-height:300px !important;

      overflow-y:auto !important;

      padding:10px !important;

  }

  /* Cards menores para caber mais */

  #cartModal .cart-item{

      padding:12px !important;

      margin-bottom:8px !important;

      border-radius:16px !important;

  }

  #cartModal .cart-item strong{

      font-size:16px !important;

      line-height:1.25 !important;

  }

  /* Footer nunca encolhe */

  #cartModal .cart-footer{

      flex-shrink:0 !important;

      padding:10px 14px !important;

      background:#fff !important;

  }

  /* Campos */

  #cartModal .checkout-user{

      gap:8px !important;

      margin:8px 0 !important;

  }

  #cartModal .checkout-user input{

      height:46px !important;

      font-size:15px !important;

  }

  /* Totais */

  #cartModal .cart-total-row{

      font-size:15px !important;

      margin:2px 0 !important;

  }

  #cartModal .cart-total-row.total{

      font-size:22px !important;

      margin-top:6px !important;

  }

  /* Botão */

  #cartModal .cart-actions{

      padding:12px 0 0 !important;

      margin-top:8px !important;

      border-top:1px solid #ececec !important;

  }

  #cartModal .checkout-whatsapp{

      width:100% !important;

      height:68px !important;

      font-size:22px !important;

      font-weight:800 !important;

      border-radius:18px !important;

  }

}


/* =====================================================
   OZONTECK.EU
   CHECKOUT MOBILE V2
   (PATCH FINAL)
===================================================== */

@media (max-width:768px){

  /* Modal */

  #cartModal .cart-box{

    width:95vw !important;
    max-width:95vw !important;

    height:92vh !important;
    max-height:92vh !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;

    border-radius:24px !important;

  }

  /* Cabeçalho */

  #cartModal .cart-header{

    flex-shrink:0 !important;

    padding:18px 18px 12px !important;

  }

  /* ==========================
     PRODUTOS
  ========================== */

  #cartModal .cart-items{

    flex:1 1 auto !important;

    min-height:0 !important;

    max-height:320px !important;

    overflow-y:auto !important;

    padding:10px 10px 4px !important;

  }

  #cartModal .cart-item{

    min-height:88px !important;

    padding:12px !important;

    margin-bottom:8px !important;

    border-radius:16px !important;

  }

  #cartModal .cart-item strong{

    font-size:17px !important;

    line-height:1.25 !important;

  }

  #cartModal .cart-item-price{

    font-size:16px !important;

  }

  /* ==========================
     RODAPÉ
  ========================== */

  #cartModal .cart-footer{

    flex-shrink:0 !important;

    background:#fff !important;

    padding:12px 16px 16px !important;

    border-top:1px solid #ececec !important;

  }

  /* Campos */

  #cartModal .checkout-user{

    gap:8px !important;

    margin-bottom:10px !important;

  }

  #cartModal .checkout-user input{

    height:46px !important;

    font-size:16px !important;

  }

  /* Totais */

  #cartModal .cart-total-row{

    margin:2px 0 !important;

    font-size:16px !important;

  }

  #cartModal .cart-total-row.total{

    margin-top:8px !important;

    font-size:22px !important;

    font-weight:700 !important;

  }

  #cartModal #cartTotal{

    font-size:24px !important;

    font-weight:800 !important;

  }

  /* ==========================
     BOTÃO
  ========================== */

  #cartModal .cart-actions{

    margin-top:12px !important;

    padding:0 !important;

  }

  #cartModal .checkout-whatsapp{

    width:100% !important;

    height:64px !important;

    min-height:64px !important;

    border-radius:18px !important;

    font-size:22px !important;

    font-weight:700 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

  }

}


/* =====================================================
   OZONTECK.EU
   HOTFIX ALERTA SOBRE O CARRINHO
   100% Seguro para Produção
===================================================== */

/* Carrinho continua acima da loja */
#cartModal{
    z-index:999990 !important;
}

/* Caixa do carrinho */
#cartModal .cart-box{
    position:relative !important;
    z-index:999991 !important;
}

/* Alerta SEMPRE acima do carrinho */
.premium-alert{

    position:fixed !important;

    inset:0 !important;

    display:none;

    align-items:center !important;

    justify-content:center !important;

    z-index:2147483646 !important;

}

/* Quando aberto */

.premium-alert.show{

    display:flex !important;

}

/* Caixa do alerta */

.premium-alert-box{

    position:relative !important;

    z-index:2147483647 !important;

}

/* =====================================================
   PREÇO OFICIAL + REFERÊNCIAS INTERNACIONAIS
===================================================== */

.price {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 3px;
}


.price-brl {
  display: block;
}


.price-international {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 2px;

  margin-top: 1px;
}


.price-ref {
  display: block;

  color: #8fa3b8;

  font-size: 10px;

  font-weight: 700;

  line-height: 1.25;

  white-space: nowrap;
}



/* =====================================================
   TOTAL DO CARRINHO
   BRL OFICIAL + REFERÊNCIAS INTERNACIONAIS
===================================================== */

.cart-total-brl {
  display: block;
}


.cart-total-international {
  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 2px;

  margin-top: 4px;
}


.cart-total-ref {
  display: block;

  color: #8fa3b8;

  font-size: 10px;

  font-weight: 700;

  line-height: 1.25;

  white-space: nowrap;
}


/* =====================================================
   PRATELEIRAS HORIZONTAIS PREMIUM
===================================================== */

.products{
  display:block !important;
  margin-top:28px !important;
}


.product-shelf{
  margin-bottom:34px;
}


.product-shelf-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}


.product-shelf-header h2{
  margin:0;
  font-size:26px;
  line-height:1.2;
  font-weight:900;
  color:var(--text);
}


.product-shelf-actions{
  display:flex;
  align-items:center;
  gap:8px;
}


.product-shelf-arrow{
  width:42px;
  height:42px;

  border:1px solid var(--border);
  border-radius:50%;

  background:#fff;
  color:var(--text);

  font-size:28px;
  line-height:1;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:
  0 6px 18px rgba(15,23,42,.08);

  transition:.2s ease;
}


.product-shelf-arrow:hover{
  transform:translateY(-2px);

  box-shadow:
  0 10px 24px rgba(15,23,42,.12);
}


.product-shelf-track{
  display:flex;

  gap:18px;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-behavior:smooth;

  scrollbar-width:none;

  padding:
  4px
  4px
  14px;
}


.product-shelf-track::-webkit-scrollbar{
  display:none;
}


/* =====================================================
   CARD DENTRO DA PRATELEIRA
===================================================== */

.product-shelf-track .product{
  flex:
  0
  0
  240px;

  width:240px;

  min-height:430px;
}


.product-shelf-track .product img{
  height:210px !important;

  padding:16px !important;
}


.product-shelf-track .product h2{
  font-size:16px !important;

  line-height:1.25 !important;

  min-height:40px !important;

  padding:
  0
  16px !important;

  margin-bottom:8px !important;
}


.product-shelf-track .product .desc{
  padding:
  0
  16px !important;

  font-size:13px !important;

  line-height:1.45 !important;

  min-height:38px !important;
}


.product-shelf-track .product .ver-mais{
  padding:
  0
  16px !important;

  font-size:13px !important;

  margin-top:6px !important;
}


.product-shelf-track .product .price{
  padding:
  14px
  16px
  8px !important;

  font-size:22px !important;
}


.product-shelf-track .product .button{
  margin:
  0
  16px
  16px !important;

  height:48px !important;

  border-radius:14px !important;
}


/* =====================================================
   ESTADO VAZIO
===================================================== */

.products-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  min-height:220px;

  text-align:center;

  background:#fff;

  border:1px solid var(--border);

  border-radius:24px;

  padding:30px;

  box-shadow:
  0 10px 30px rgba(15,23,42,.06);
}


.products-empty strong{
  font-size:20px;

  color:var(--text);
}


.products-empty span{
  margin-top:8px;

  font-size:14px;

  color:var(--muted);
}


/* =====================================================
   RESPONSIVO
===================================================== */

@media(max-width:768px){

  .product-shelf{
    margin-bottom:26px;
  }


  .product-shelf-header{
    margin-bottom:10px;
  }


  .product-shelf-header h2{
    font-size:20px;
  }


  .product-shelf-actions{
    display:none;
  }


  .product-shelf-track{
    gap:12px;

    padding-bottom:10px;

    scroll-snap-type:
    x
    proximity;

    -webkit-overflow-scrolling:
    touch;
  }


  .product-shelf-track .product{
    flex:
    0
    0
    78vw;

    width:78vw;

    max-width:300px;

    scroll-snap-align:start;
  }


  .product-shelf-track .product img{
    height:200px !important;
  }

}


/* =====================================================
   PREMIUM V2
   REFINAMENTO DAS PRATELEIRAS HORIZONTAIS
===================================================== */


/* -----------------------------------------------------
   PRATELEIRA
----------------------------------------------------- */

.product-shelf{
  position:relative !important;
  margin-bottom:32px !important;
}


.product-shelf-header{
  margin-bottom:12px !important;
  padding-right:0 !important;
}


.product-shelf-header h2{
  font-size:26px !important;
  font-weight:900 !important;
  letter-spacing:-.5px !important;
}


/* -----------------------------------------------------
   TRACK HORIZONTAL
----------------------------------------------------- */

.product-shelf-track{
  display:flex !important;

  gap:16px !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;

  padding:
    4px
    2px
    14px !important;

  scroll-behavior:smooth !important;
  scrollbar-width:none !important;

  scroll-snap-type:x proximity;
}


.product-shelf-track::-webkit-scrollbar{
  display:none !important;
}


/* -----------------------------------------------------
   CARD
   5 CARDS + PARTE DO PRÓXIMO
----------------------------------------------------- */

.product-shelf-track .product{
  flex:
    0
    0
    clamp(
      210px,
      19.2vw,
      255px
    ) !important;

  width:
    clamp(
      210px,
      19.2vw,
      255px
    ) !important;

  min-width:
    clamp(
      210px,
      19.2vw,
      255px
    ) !important;

  min-height:410px !important;

  border-radius:24px !important;

  scroll-snap-align:start;

  overflow:hidden !important;
}


/* -----------------------------------------------------
   IMAGEM
----------------------------------------------------- */

.product-shelf-track .product img{
  width:100% !important;
  height:195px !important;

  object-fit:contain !important;

  padding:
    18px
    18px
    10px !important;
}


/* -----------------------------------------------------
   NOME
----------------------------------------------------- */

.product-shelf-track .product h2{
  font-size:16px !important;
  line-height:1.18 !important;

  min-height:38px !important;

  margin:
    0
    0
    8px !important;

  padding:
    0
    18px !important;

  font-weight:900 !important;
}


/* -----------------------------------------------------
   DESCRIÇÃO
----------------------------------------------------- */

.product-shelf-track .product .desc{
  font-size:13px !important;
  line-height:1.4 !important;

  padding:
    0
    18px !important;

  margin:0 !important;

  min-height:37px !important;

  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;

  overflow:hidden !important;
}


/* DESCRIÇÃO ABERTA */

.product-shelf-track .product .desc.expanded{
  display:block !important;

  -webkit-line-clamp:unset !important;

  overflow:visible !important;

  max-height:none !important;
}


/* -----------------------------------------------------
   VER DETALHES
----------------------------------------------------- */

.product-shelf-track .product .ver-mais{
  display:block !important;

  padding:
    0
    18px !important;

  margin-top:7px !important;

  font-size:13px !important;
  line-height:1.2 !important;

  font-weight:800 !important;
}


/* -----------------------------------------------------
   PREÇO + CÂMBIO
----------------------------------------------------- */

.product-shelf-track .product .price{
  margin-top:auto !important;

  padding:
    16px
    18px
    9px !important;

  font-size:22px !important;
  line-height:1.05 !important;
}


/* -----------------------------------------------------
   BOTÃO ADICIONAR
----------------------------------------------------- */

.product-shelf-track .product .button{
  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  width:
    calc(100% - 36px) !important;

  height:46px !important;

  margin:
    0
    18px
    18px !important;

  padding:
    0
    14px !important;

  border-radius:14px !important;

  font-size:16px !important;
  font-weight:900 !important;
}


/* =====================================================
   SETAS
   MAIS PRÓXIMAS DA PRATELEIRA
===================================================== */

.product-shelf-actions{
  position:absolute !important;

  right:2px !important;
  top:-4px !important;

  display:flex !important;

  gap:8px !important;

  z-index:10 !important;
}


.product-shelf-arrow{
  width:40px !important;
  height:40px !important;

  min-width:40px !important;

  border-radius:50% !important;

  font-size:25px !important;

  background:
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 8px 22px
    rgba(15,23,42,.10) !important;
}


/* =====================================================
   TABLET
===================================================== */

@media(
  min-width:769px
) and (
  max-width:1100px
){

  .product-shelf-track .product{
    flex:
      0
      0
      230px !important;

    width:230px !important;
    min-width:230px !important;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

  .product-shelf{
    margin-bottom:26px !important;
  }


  .product-shelf-header h2{
    font-size:21px !important;
  }


  .product-shelf-actions{
    display:none !important;
  }


  .product-shelf-track{
    gap:12px !important;

    padding:
      2px
      2px
      12px !important;

    -webkit-overflow-scrolling:
      touch;
  }


  .product-shelf-track .product{
    flex:
      0
      0
      76vw !important;

    width:
      76vw !important;

    min-width:
      76vw !important;

    max-width:
      290px !important;

    min-height:390px !important;
  }


  .product-shelf-track .product img{
    height:185px !important;
  }


  .product-shelf-track .product h2{
    font-size:15px !important;
  }


  .product-shelf-track .product .button{
    height:46px !important;
  }

}


/* =====================================================
   PREMIUM V3
   CARDS HORIZONTAIS - 20% MAIS COMPACTOS
===================================================== */


/* -----------------------------------------------------
   CARD
----------------------------------------------------- */

.product-shelf-track .product{
  flex:
    0
    0
    clamp(
      175px,
      15.8vw,
      205px
    ) !important;

  width:
    clamp(
      175px,
      15.8vw,
      205px
    ) !important;

  min-width:
    clamp(
      175px,
      15.8vw,
      205px
    ) !important;

  min-height:335px !important;

  border-radius:20px !important;
}


/* -----------------------------------------------------
   IMAGEM
----------------------------------------------------- */

.product-shelf-track .product img{
  height:155px !important;

  padding:
    12px
    12px
    6px !important;
}


/* -----------------------------------------------------
   NOME
----------------------------------------------------- */

.product-shelf-track .product h2{
  font-size:13px !important;

  line-height:1.18 !important;

  min-height:31px !important;

  padding:
    0
    12px !important;

  margin:
    0
    0
    5px !important;
}


/* -----------------------------------------------------
   DESCRIÇÃO
----------------------------------------------------- */

.product-shelf-track .product .desc{
  padding:
    0
    12px !important;

  font-size:11px !important;

  line-height:1.35 !important;

  min-height:30px !important;

  -webkit-line-clamp:2 !important;
}


/* -----------------------------------------------------
   VER DETALHES
----------------------------------------------------- */

.product-shelf-track .product .ver-mais{
  padding:
    0
    12px !important;

  margin-top:5px !important;

  font-size:11px !important;

  font-weight:800 !important;
}


/* -----------------------------------------------------
   PREÇO
----------------------------------------------------- */

.product-shelf-track .product .price{
  padding:
    11px
    12px
    6px !important;

  font-size:18px !important;

  line-height:1 !important;
}


/* -----------------------------------------------------
   REFERÊNCIAS INTERNACIONAIS
----------------------------------------------------- */

.product-shelf-track .price-international{
  margin-top:4px !important;

  gap:2px !important;
}


.product-shelf-track .price-ref{
  font-size:9px !important;

  line-height:1.2 !important;
}


/* -----------------------------------------------------
   BOTÃO ADICIONAR
----------------------------------------------------- */

.product-shelf-track .product .button{
  width:
    calc(100% - 24px) !important;

  height:36px !important;

  margin:
    0
    12px
    12px !important;

  padding:
    0
    10px !important;

  border-radius:10px !important;

  font-size:12px !important;

  font-weight:900 !important;
}


/* -----------------------------------------------------
   ESPAÇO ENTRE CARDS
----------------------------------------------------- */

.product-shelf-track{
  gap:12px !important;
}


/* -----------------------------------------------------
   TÍTULO DAS PRATELEIRAS
----------------------------------------------------- */

.product-shelf-header h2{
  font-size:23px !important;
}


/* -----------------------------------------------------
   SETAS
----------------------------------------------------- */

.product-shelf-arrow{
  width:36px !important;

  height:36px !important;

  min-width:36px !important;

  font-size:22px !important;
}


/* =====================================================
   TABLET
===================================================== */

@media(
  min-width:769px
) and (
  max-width:1100px
){

  .product-shelf-track .product{
    flex:
      0
      0
      195px !important;

    width:195px !important;

    min-width:195px !important;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

  .product-shelf-track .product{
    flex:
      0
      0
      68vw !important;

    width:
      68vw !important;

    min-width:
      68vw !important;

    max-width:
      250px !important;

    min-height:330px !important;
  }


  .product-shelf-track .product img{
    height:155px !important;
  }


  .product-shelf-header h2{
    font-size:19px !important;
  }


  .product-shelf-track{
    gap:10px !important;
  }

}



/* =====================================================
   PREMIUM MOBILE FINAL
   PRATELEIRAS HORIZONTAIS
===================================================== */

@media (max-width:768px){

  /* -----------------------------------------
     CONTAINER GERAL
  ----------------------------------------- */

  .container{
    width:100% !important;
    max-width:100% !important;

    padding:
      10px
      12px
      24px !important;

    overflow:hidden !important;
  }


  /* -----------------------------------------
     PRODUTOS
     CANCELA GRID ANTIGO
  ----------------------------------------- */

  #products,
  .products{
    display:block !important;

    width:100% !important;

    padding:0 !important;
    margin-top:18px !important;

    overflow:visible !important;
  }


  /* -----------------------------------------
     PRATELEIRA
  ----------------------------------------- */

  .product-shelf{
    width:100% !important;

    margin:
      0
      0
      24px !important;

    overflow:visible !important;
  }


  .product-shelf-header{
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    margin-bottom:10px !important;

    padding:
      0
      2px !important;
  }


  .product-shelf-header h2{
    margin:0 !important;

    font-size:20px !important;
    line-height:1.2 !important;

    font-weight:900 !important;
  }


  /* setas ficam escondidas no celular
     porque o usuário arrasta com o dedo */

  .product-shelf-actions{
    display:none !important;
  }


  /* -----------------------------------------
     TRILHO HORIZONTAL
  ----------------------------------------- */

  .product-shelf-track{
    display:flex !important;

    flex-wrap:nowrap !important;

    width:100% !important;

    gap:10px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:
      2px
      2px
      12px !important;

    margin:0 !important;

    scroll-snap-type:
      x mandatory !important;

    scroll-behavior:
      smooth !important;

    -webkit-overflow-scrolling:
      touch !important;

    scrollbar-width:
      none !important;
  }


  .product-shelf-track::-webkit-scrollbar{
    display:none !important;
  }


  /* -----------------------------------------
     CARD MOBILE
  ----------------------------------------- */

  #products .product-shelf-track .product{
    flex:
      0
      0
      72vw !important;

    width:
      72vw !important;

    min-width:
      72vw !important;

    max-width:
      260px !important;

    min-height:
      330px !important;

    margin:0 !important;

    padding:0 !important;

    border-radius:
      18px !important;

    box-sizing:
      border-box !important;

    scroll-snap-align:
      start !important;

    display:flex !important;

    flex-direction:
      column !important;

    justify-content:
      flex-start !important;
  }


  /* -----------------------------------------
     IMAGEM
  ----------------------------------------- */

  #products .product-shelf-track .product img{
    width:100% !important;

    height:
      150px !important;

    margin:0 !important;

    padding:
      12px
      12px
      6px !important;

    object-fit:
      contain !important;
  }


  /* -----------------------------------------
     NOME
  ----------------------------------------- */

  #products .product-shelf-track .product h2{
    padding:
      0
      12px !important;

    margin:
      0
      0
      6px !important;

    min-height:
      34px !important;

    font-size:
      14px !important;

    line-height:
      1.2 !important;

    text-align:
      left !important;

    font-weight:
      900 !important;
  }


  /* -----------------------------------------
     DESCRIÇÃO
     CANCELA display:none ANTIGO
  ----------------------------------------- */

  #products .product-shelf-track .product .desc{
    display:
      -webkit-box !important;

    -webkit-box-orient:
      vertical !important;

    -webkit-line-clamp:
      2 !important;

    overflow:
      hidden !important;

    padding:
      0
      12px !important;

    margin:0 !important;

    min-height:
      30px !important;

    font-size:
      11px !important;

    line-height:
      1.35 !important;

    text-align:
      left !important;
  }


  #products .product-shelf-track .product .desc.expanded{
    display:
      block !important;

    -webkit-line-clamp:
      unset !important;

    overflow:
      visible !important;

    max-height:
      none !important;
  }


  /* -----------------------------------------
     VER DETALHES
     CANCELA display:none ANTIGO
  ----------------------------------------- */

  #products .product-shelf-track .product .ver-mais{
    display:
      block !important;

    padding:
      0
      12px !important;

    margin-top:
      5px !important;

    font-size:
      11px !important;

    line-height:
      1.2 !important;

    font-weight:
      800 !important;

    text-align:
      left !important;
  }


  /* -----------------------------------------
     PREÇO
  ----------------------------------------- */

  #products .product-shelf-track .product .price{
    margin-top:
      auto !important;

    padding:
      12px
      12px
      6px !important;

    font-size:
      18px !important;

    line-height:
      1 !important;

    text-align:
      left !important;
  }


  #products .product-shelf-track .price-international{
    margin-top:
      4px !important;
  }


  #products .product-shelf-track .price-ref{
    font-size:
      9px !important;

    line-height:
      1.2 !important;
  }


  /* -----------------------------------------
     ADICIONAR
  ----------------------------------------- */

  #products .product-shelf-track .product .button{
    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:
      calc(100% - 24px) !important;

    height:
      38px !important;

    margin:
      0
      12px
      12px !important;

    padding:
      0
      10px !important;

    border-radius:
      10px !important;

    font-size:
      13px !important;

    font-weight:
      900 !important;
  }

}


@media (max-width:768px){

  .featured-thumbs{
    display:none !important;
  }

}

/* =====================================================
   MOBILE - LIBERAR ROLAGEM NATURAL
===================================================== */

@media (max-width:768px){

  html,
  body{
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  .product-shelf-track{
    touch-action:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

}



/* =====================================================
   PREMIUM MOBILE FINAL
   HEADER + BUSCA + CATEGORIAS + HERO + TELA TRAVADA
===================================================== */

@media (max-width:768px){

  /* ===================================================
     01. TRAVAR TELA LATERAL
  =================================================== */

  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    position:relative !important;
  }


  /* ===================================================
     02. HEADER
  =================================================== */

  .header{
    width:100% !important;
    max-width:100% !important;

    overflow:hidden !important;

    border-radius:
      0
      0
      18px
      18px !important;
  }

  .header-inner{
    width:100% !important;
    max-width:100% !important;

    padding:
      10px
      12px !important;

    box-sizing:border-box !important;

    display:grid !important;

    grid-template-columns:
      1fr !important;

    gap:10px !important;
  }


  /* ===================================================
     03. MARCA
  =================================================== */

  .brand{
    width:100% !important;

    display:flex !important;

    align-items:center !important;

    gap:10px !important;
  }

  .logo-wrapper{
    width:52px !important;
    height:52px !important;

    min-width:52px !important;

    border-radius:15px !important;
  }

  .brand-info{
    min-width:0 !important;
  }

  .brand-info h2{
    margin:0 !important;

    font-size:18px !important;

    line-height:1.05 !important;

    white-space:nowrap !important;
  }

  .brand-info small{
    font-size:11px !important;
  }

  .headline{
    display:none !important;
  }


  /* ===================================================
     04. BUSCA + WHATSAPP
  =================================================== */

  .header-right{
    width:100% !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      44px !important;

    gap:8px !important;

    align-items:center !important;
  }

  .search-box-header{
    width:100% !important;

    min-width:0 !important;

    height:44px !important;

    padding:
      0
      12px !important;

    border-radius:14px !important;

    box-sizing:border-box !important;
  }

  .search-box-header input{
    width:100% !important;

    min-width:0 !important;

    font-size:16px !important;

    line-height:1 !important;
  }

  .whatsapp-btn{
    width:44px !important;
    height:44px !important;

    min-width:44px !important;

    padding:0 !important;

    border-radius:14px !important;
  }

  .wa-text{
    display:none !important;
  }


  /* ===================================================
     05. CATEGORIAS
  =================================================== */

  .categories{
    width:100% !important;
    max-width:100% !important;

    display:flex !important;

    flex-wrap:nowrap !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    gap:7px !important;

    margin:
      8px
      0
      10px !important;

    padding:
      0
      10px
      6px !important;

    box-sizing:border-box !important;

    scrollbar-width:none !important;

    -webkit-overflow-scrolling:
      touch !important;
  }

  .categories::-webkit-scrollbar{
    display:none !important;
  }

  .category-btn{
    flex:
      0
      0
      auto !important;

    height:38px !important;

    padding:
      0
      14px !important;

    border-radius:12px !important;

    font-size:13px !important;

    line-height:1 !important;

    white-space:nowrap !important;
  }


  /* ===================================================
     06. CONTAINER
  =================================================== */

  .container{
    width:100% !important;
    max-width:100% !important;

    padding:
      8px
      10px
      20px !important;

    box-sizing:border-box !important;

    overflow:hidden !important;
  }


  /* ===================================================
     07. HERO
  =================================================== */

  .featured-product{
    width:100% !important;

    max-width:100% !important;

    min-height:0 !important;

    margin-top:0 !important;

    padding:
      14px
      14px
      16px !important;

    border-radius:18px !important;

    box-sizing:border-box !important;

    overflow:hidden !important;
  }

  .featured-content{
    display:grid !important;

    grid-template-columns:
      125px
      minmax(0,1fr) !important;

    gap:12px !important;

    align-items:center !important;

    width:100% !important;
  }


  /* ===================================================
     08. MINIATURAS OFF NO MOBILE
  =================================================== */

  .featured-thumbs{
    display:none !important;
  }


  /* ===================================================
     09. IMAGEM DESTAQUE
  =================================================== */

  .featured-image{
    width:125px !important;

    height:165px !important;

    min-width:125px !important;

    margin:0 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;
  }

  .featured-image > img{
    width:100% !important;

    height:150px !important;

    max-width:125px !important;

    max-height:150px !important;

    object-fit:contain !important;

    margin:0 !important;
  }


  /* ===================================================
     10. TEXTO DO DESTAQUE
  =================================================== */

  .featured-info{
    min-width:0 !important;

    gap:6px !important;

    padding:0 !important;
  }

  .featured-info h2{
    margin:0 !important;

    font-size:20px !important;

    line-height:1.12 !important;

    letter-spacing:-.3px !important;
  }

  .featured-info p{
    margin:0 !important;

    font-size:13px !important;

    line-height:1.4 !important;

    display:-webkit-box !important;

    -webkit-box-orient:
      vertical !important;

    -webkit-line-clamp:
      3 !important;

    overflow:hidden !important;

    max-height:
      55px !important;
  }

  #featuredMore{
    margin-top:4px !important;

    font-size:12px !important;

    line-height:1.2 !important;
  }


  /* ===================================================
     11. PREÇO + COMPRAR
  =================================================== */

  .featured-actions{
    grid-column:
      1 / -1 !important;

    width:100% !important;

    display:grid !important;

    grid-template-columns:
      1fr
      1.35fr !important;

    gap:10px !important;

    margin-top:10px !important;
  }

  .featured-price{
    margin:0 !important;

    font-size:30px !important;

    line-height:1 !important;

    display:flex !important;

    align-items:center !important;
  }

  .featured-btn{
    width:100% !important;

    height:44px !important;

    margin:0 !important;

    padding:
      0
      12px !important;

    border-radius:13px !important;

    font-size:14px !important;
  }


  /* ===================================================
     12. TRUST MAIS COMPACTO
  =================================================== */

  .hero-trust{
    grid-column:
      1 / -1 !important;

    width:100% !important;

    margin-top:8px !important;
  }


  /* ===================================================
     13. PRODUTOS / PRATELEIRAS
  =================================================== */

  #products,
  .products,
  .product-shelf{
    width:100% !important;

    max-width:100% !important;

    box-sizing:border-box !important;
  }

  .product-shelf{
    overflow:hidden !important;
  }

  .product-shelf-track{
    width:100% !important;

    max-width:100% !important;

    display:flex !important;

    flex-wrap:nowrap !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    -webkit-overflow-scrolling:
      touch !important;

    scrollbar-width:none !important;
  }

  .product-shelf-track::-webkit-scrollbar{
    display:none !important;
  }

}


/* =====================================================
   MOBILE - CORREÇÃO BUSCA INTELIGENTE
===================================================== */

@media (max-width:768px){

  /* permite o dropdown sair do header */
  .header{
    overflow:visible !important;
  }


  .header-inner{
    overflow:visible !important;
  }


  .header-right{
    overflow:visible !important;
  }


  .search-box-header{
    position:relative !important;
    overflow:visible !important;
    z-index:1000 !important;
  }


  .search-suggestions{
    top:
      calc(100% + 6px) !important;

    left:0 !important;

    width:100% !important;

    max-height:260px !important;

    overflow-y:auto !important;

    overflow-x:hidden !important;

    border-radius:14px !important;

    z-index:99999 !important;
  }


  .search-suggestions div{
    padding:
      11px
      14px !important;

    font-size:14px !important;

    line-height:1.25 !important;
  }

}


/* =====================================================
   OZONTECK - ENTREGA + OBSERVAÇÃO
   TESTE _NEW - 2026-09-15
===================================================== */

/* OPÇÃO DE ENTREGA */

#cartModal .delivery-option{
  margin:10px 0 8px;
}

#cartModal .delivery-check{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
  cursor:pointer;
  user-select:none;
}

#cartModal .delivery-check input{
  width:18px;
  height:18px;
  margin:0;
  flex:0 0 auto;
  accent-color:var(--primary);
  cursor:pointer;
}

#cartModal .delivery-check span{
  color:#0f172a;
  font-size:14px;
  font-weight:700;
  line-height:1.25;
}

#cartModal .delivery-check small{
  color:#64748b;
  font-size:12px;
  font-weight:500;
}


/* ENDEREÇO DESKTOP */

#cartModal .delivery-fields{
  display:none;
  margin:8px 0 10px;
  padding:12px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#f8fafc;
}

#cartModal .delivery-fields.is-active{
  display:block;
}

#cartModal .delivery-row{
  display:grid;
  gap:8px;
}

#cartModal .delivery-row-main{
  grid-template-columns:130px minmax(0,1fr) 90px;
}

#cartModal .delivery-row-extra{
  grid-template-columns:
    minmax(120px,.9fr)
    minmax(150px,1fr)
    70px
    minmax(150px,1fr);
  margin-top:8px;
}

#cartModal .delivery-fields input{
  width:100%;
  min-width:0;
  height:40px;
  padding:0 12px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#fff;
  color:#0f172a;
  font-size:13px;
  transition:.2s;
}

#cartModal .delivery-fields input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(var(--theme-rgb),.10);
}


/* RESUMO DO ENDEREÇO */

#cartModal .delivery-summary{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  padding:10px 12px;
  border:1px solid #dbeafe;
  border-radius:12px;
  background:#f8fbff;
}

#cartModal .delivery-summary > div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

#cartModal .delivery-summary strong{
  color:#0f172a;
  font-size:13px;
  line-height:1.25;
}

#cartModal .delivery-summary span{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#64748b;
  font-size:12px;
}

#cartModal #btnEditDelivery{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:var(--primary);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  padding:6px;
}


/* OBSERVAÇÃO */

#cartModal .order-observation{
  margin:8px 0 10px;
}

#cartModal #observacaoPedido{
  display:block;
  width:100%;
  min-height:58px;
  max-height:110px;
  resize:vertical;
  padding:10px 12px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
  color:#0f172a;
  font-family:inherit;
  font-size:13px;
  line-height:1.35;
  transition:.2s;
}

#cartModal #observacaoPedido:focus{
  outline:none;
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(var(--theme-rgb),.10);
}

#cartModal #observacaoPedido::placeholder{
  color:#94a3b8;
}


/* TELA INTERNA MOBILE:
   escondida no desktop */

#cartModal .delivery-mobile-screen{
  display:none;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:600px){

  /* campos desktop nunca aparecem no celular */

  #cartModal .delivery-fields,
  #cartModal .delivery-fields.is-active{
    display:none !important;
  }

  #cartModal .delivery-option{
    margin:8px 0 6px;
  }

  #cartModal .delivery-check{
    min-height:40px;
    padding:9px 11px;
  }

  #cartModal .delivery-check span{
    font-size:13px;
  }

  #cartModal .delivery-check small{
    font-size:11px;
  }

  #cartModal .order-observation{
    margin:7px 0 8px;
  }

  #cartModal #observacaoPedido{
    min-height:54px;
    max-height:90px;
    resize:none;
    font-size:13px;
  }

  #cartModal .delivery-summary{
    padding:9px 10px;
  }

  #cartModal .delivery-summary strong{
    font-size:12px;
  }

  #cartModal .delivery-summary span{
    font-size:11px;
  }


  /* TELA INTERNA */

  #cartModal .delivery-mobile-screen{
    position:absolute;
    inset:0;
    z-index:50;
    display:none;
    flex-direction:column;
    background:#fff;
    border-radius:inherit;
    overflow:hidden;
  }

  #cartModal .delivery-mobile-screen.is-open{
    display:flex;
  }

  #cartModal .delivery-mobile-header{
    flex:0 0 auto;
    min-height:58px;
    display:grid;
    grid-template-columns:42px 1fr 42px;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-bottom:1px solid #e5e7eb;
    background:#fff;
  }

  #cartModal .delivery-mobile-header h3{
    margin:0;
    color:#0f172a;
    font-size:17px;
    font-weight:800;
    line-height:1.2;
    text-align:center;
  }

  #cartModal .delivery-back,
  #cartModal .delivery-close{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:10px;
    background:#f1f5f9;
    color:#0f172a;
    font-size:19px;
    font-weight:700;
    cursor:pointer;
  }

  #cartModal .delivery-mobile-body{
    flex:1;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  #cartModal .delivery-mobile-body input{
    width:100%;
    min-height:46px;
    padding:0 13px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#f8fafc;
    color:#0f172a;
    font-size:14px;
  }

  #cartModal .delivery-mobile-body input:focus{
    outline:none;
    border-color:var(--primary);
    background:#fff;
    box-shadow:0 0 0 3px rgba(var(--theme-rgb),.10);
  }

  #cartModal .delivery-save{
    width:100%;
    min-height:46px;
    margin-top:4px;
    border:0;
    border-radius:12px;
    background:
      linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
      );
    color:#fff;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
  }

}


/* garante referência para a tela interna mobile */

#cartModal .cart-box{
  position:relative;
}



/* =====================================================
   OZONTECK - AJUSTE FINAL MOBILE DO CARRINHO
   Mais respiro inferior após endereço
===================================================== */

@media (max-width:600px){

  /* ganha espaço vertical sem apertar a leitura */
  #cartModal .delivery-summary{
    margin-top:6px !important;
    padding:7px 10px !important;
    min-height:auto !important;
  }

  #cartModal .order-observation{
    margin:6px 0 !important;
  }

  #cartModal #observacaoPedido{
    min-height:48px !important;
    height:48px !important;
    padding:7px 10px !important;
    line-height:1.25 !important;
  }

  /* aproxima levemente os totais */
  #cartModal .cart-total-row{
    margin:1px 0 !important;
  }

  #cartModal .cart-total-row.total{
    margin-top:5px !important;
    padding-top:5px !important;
  }

  /* botão continua grande, mas não encosta na borda */
  #cartModal .cart-actions{
    margin-top:8px !important;
    padding:0 0 12px !important;
  }

  #cartModal .checkout-whatsapp{
    height:58px !important;
    min-height:58px !important;
  }

  /* espaço seguro inferior inclusive em Android/iPhone */
  #cartModal .cart-footer{
    padding-bottom:
      calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

}



/* =====================================================
   OZONTECK - CARRINHO MOBILE ESTRUTURAL
   Produtos + checkout em fluxo único
===================================================== */

@media (max-width:600px){

  /* A CAIXA INTEIRA PASSA A SER A ÁREA DE ROLAGEM */
  #cartModal .cart-box{
    width:95vw !important;
    height:92dvh !important;
    max-height:92dvh !important;
    display:block !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    position:relative !important;
  }

  /* HEADER PERMANECE VISÍVEL */
  #cartModal .cart-header{
    position:sticky !important;
    top:0 !important;
    z-index:20 !important;
    width:100% !important;
    padding:12px 16px !important;
    background:#fff !important;
    border-bottom:1px solid #eef2f7 !important;
  }

  #cartModal .cart-header h2{
    font-size:20px !important;
    margin:0 !important;
  }

  /* PRODUTOS NÃO DISPUTAM MAIS ALTURA COM O FOOTER */
  #cartModal .cart-items{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:110px !important;
    max-height:none !important;
    overflow:visible !important;
    padding:10px 10px 6px !important;
  }

  /* CADA PRODUTO FICA INTEIRO E LEGÍVEL */
  #cartModal .cart-item{
    width:100% !important;
    min-height:88px !important;
    height:auto !important;
    overflow:visible !important;
    margin:0 0 8px !important;
    padding:12px !important;
  }

  #cartModal .cart-item:last-child{
    margin-bottom:0 !important;
  }

  /* FOOTER PASSA A SEGUIR OS PRODUTOS NATURALMENTE */
  #cartModal .cart-footer{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    padding:
      10px
      16px
      calc(20px + env(safe-area-inset-bottom, 0px))
      !important;
    border-top:1px solid #ececec !important;
    background:#fff !important;
  }

  /* BOTÃO COM RESPIRO REAL NO FINAL */
  #cartModal .cart-actions{
    margin-top:8px !important;
    padding:0 0 10px !important;
  }

  #cartModal .checkout-whatsapp{
    height:58px !important;
    min-height:58px !important;
  }

}


/* AJUSTE FINO - BORDA DO CARRINHO MOBILE */
@media (max-width:600px){
  #cartModal .cart-box{
    width:92vw !important;
    max-width:92vw !important;
  }
}


/* AJUSTE PROPORCIONAL DO CONTEÚDO INTERNO - MOBILE */
@media (max-width:600px){

  #cartModal .cart-box,
  #cartModal .cart-box *{
    box-sizing:border-box;
  }

  #cartModal .cart-items,
  #cartModal .cart-footer{
    width:100% !important;
    max-width:100% !important;
  }

  #cartModal .checkout-user{
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 0 8px !important;
  }

  #cartModal .checkout-user input{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  #cartModal .delivery-option,
  #cartModal .delivery-summary,
  #cartModal .order-observation,
  #cartModal #observacaoPedido{
    width:100% !important;
    max-width:100% !important;
  }

  #cartModal .cart-total-row,
  #cartModal .cart-actions,
  #cartModal .checkout-whatsapp{
    width:100% !important;
    max-width:100% !important;
  }

}


/* ==========================================================
   FIX FINAL — CARRINHO DESKTOP / TABLET
   Endereço aberto permanece dentro da viewport
   MOBILE <= 600px permanece intocado
   ========================================================== */

@media (min-width: 601px) {

  #cartModal .cart-box {
    max-height: 92vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #cartModal .cart-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
  }

}


/* ==========================================================
   CHECKOUT COMPACTO — DESKTOP / TABLET
   Endereço + observação
   MOBILE <= 600px permanece intocado
   ========================================================== */

@media (min-width: 601px) {

  /* BLOCO INFORMAR ENDEREÇO */

  #cartModal .delivery-option {
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 !important;
    box-sizing: border-box !important;
  }

  #cartModal .delivery-check {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;

    padding: 8px 10px !important;

    box-sizing: border-box !important;
    border-radius: 11px !important;
  }

  #cartModal .delivery-check span {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  #cartModal .delivery-check small {
    font-size: 11px !important;
  }


  /* CAMPOS DO ENDEREÇO */

  #cartModal .delivery-fields {
    width: 100% !important;
    max-width: 100% !important;

    margin: 6px 0 8px !important;
    padding: 9px 10px !important;

    box-sizing: border-box !important;
    border-radius: 11px !important;
  }

  #cartModal .delivery-fields input {
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  #cartModal .delivery-row-extra {
    margin-top: 6px !important;
  }


  /* OBSERVAÇÃO */

  #cartModal .order-observation {
    width: 100% !important;
    max-width: 100% !important;

    margin: 6px 0 8px !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

  #cartModal #observacaoPedido {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 64px !important;
    min-height: 64px !important;
    max-height: 90px !important;

    margin: 0 !important;
    padding: 10px 12px !important;

    box-sizing: border-box !important;

    border-radius: 11px !important;

    font-size: 12px !important;
    line-height: 1.35 !important;

    resize: vertical !important;
  }

}


/* =====================================================
   COMPARTILHAR PRODUTO
===================================================== */

.product-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

.product-card-actions .button {
  width: 100%;
  margin: 0;
}

.product-share-button {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.product-share-button:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.28);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

@media (max-width: 600px) {
  .product-card-actions {
    gap: 6px;
  }

  .product-share-button {
    min-height: 42px;
    font-size: 13px;
  }
}


/* =====================================================
   COMPARTILHAR PRODUTO • VISUAL PREMIUM FINAL
===================================================== */

.product .product-share-button {
  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 58% !important;
  min-width: 120px;
  min-height: 34px !important;

  margin: 7px auto 0 !important;
  padding: 7px 14px !important;

  border: 1px solid rgba(204, 53, 214, 0.55) !important;
  border-radius: 10px !important;

  background: #ffffff !important;
  background-image: none !important;

  color: #b22fc7 !important;

  font-family: inherit;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.1;

  box-shadow: none !important;
  cursor: pointer;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.product .product-share-button::before {
  content: "↗";
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-right: 6px;

  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.product .product-share-button:hover {
  background: rgba(204, 53, 214, 0.055) !important;
  border-color: #b22fc7 !important;
  color: #9824ae !important;

  transform: translateY(-1px);

  box-shadow:
    0 5px 14px rgba(178, 47, 199, 0.10) !important;
}

.product .product-share-button:active {
  transform: translateY(0);
  box-shadow: none !important;
}


/* MOBILE */
@media (max-width: 600px) {

  .product .product-share-button {
    width: 62% !important;
    min-width: 108px;
    min-height: 32px !important;

    margin-top: 6px !important;
    padding: 6px 10px !important;

    border-radius: 9px !important;

    font-size: 11px !important;
  }

  .product .product-share-button::before {
    margin-right: 5px;
    font-size: 14px;
  }

}


/* =====================================================
   COMPARTILHAR PRODUTO • PREMIUM APROVADO V2
===================================================== */

.product .product-share-button {
  position: relative;

  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;

  margin: 7px 0 0 !important;
  padding: 8px 12px !important;

  border: 1.5px solid rgba(190, 46, 211, .68) !important;
  border-radius: 10px !important;

  background: rgba(255, 255, 255, .94) !important;
  background-image: none !important;

  color: #a82bc2 !important;

  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;

  box-shadow:
    0 4px 12px rgba(168, 43, 194, .05) !important;

  cursor: pointer;

  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


/* ÍCONE SHARE — 3 PONTOS CONECTADOS */
.product .product-share-button::before {
  content: "";

  width: 17px;
  height: 17px;

  margin-right: 7px;

  background-color: currentColor;

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M18 16a3 3 0 0 0-2.39 1.19L8.91 13.7a3.2 3.2 0 0 0 0-3.4l6.7-3.49A3 3 0 1 0 15 5c0 .23.03.45.08.66L8.37 9.15A3 3 0 1 0 6 15c.9 0 1.71-.4 2.26-1.03l6.79 3.54A3 3 0 1 0 18 16Z'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M18 16a3 3 0 0 0-2.39 1.19L8.91 13.7a3.2 3.2 0 0 0 0-3.4l6.7-3.49A3 3 0 1 0 15 5c0 .23.03.45.08.66L8.37 9.15A3 3 0 1 0 6 15c.9 0 1.71-.4 2.26-1.03l6.79 3.54A3 3 0 1 0 18 16Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}


/* remove a seta do teste anterior */
.product .product-share-button::after {
  content: none !important;
}


.product .product-share-button:hover {
  background: rgba(190, 46, 211, .055) !important;
  border-color: #ad2bc6 !important;

  transform: translateY(-1px);

  box-shadow:
    0 6px 16px rgba(168, 43, 194, .10) !important;
}


.product .product-share-button:active {
  transform: translateY(0);

  box-shadow:
    0 2px 7px rgba(168, 43, 194, .07) !important;
}


/* MOBILE */
@media (max-width: 600px) {

  .product .product-share-button {
    width: 100% !important;
    min-height: 36px !important;

    margin-top: 6px !important;
    padding: 7px 10px !important;

    font-size: 11.5px !important;
  }

  .product .product-share-button::before {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }

}


/* =====================================================
   COMPARTILHAR PRODUTO • PREMIUM APROVADO V2
===================================================== */

.product .product-share-button {
  position: relative;

  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;

  margin: 7px 0 0 !important;
  padding: 8px 12px !important;

  border: 1.5px solid rgba(190, 46, 211, .68) !important;
  border-radius: 10px !important;

  background: rgba(255, 255, 255, .94) !important;
  background-image: none !important;

  color: #a82bc2 !important;

  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;

  box-shadow:
    0 4px 12px rgba(168, 43, 194, .05) !important;

  cursor: pointer;

  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


/* ÍCONE SHARE — 3 PONTOS CONECTADOS */
.product .product-share-button::before {
  content: "";

  width: 17px;
  height: 17px;

  margin-right: 7px;

  background-color: currentColor;

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M18 16a3 3 0 0 0-2.39 1.19L8.91 13.7a3.2 3.2 0 0 0 0-3.4l6.7-3.49A3 3 0 1 0 15 5c0 .23.03.45.08.66L8.37 9.15A3 3 0 1 0 6 15c.9 0 1.71-.4 2.26-1.03l6.79 3.54A3 3 0 1 0 18 16Z'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M18 16a3 3 0 0 0-2.39 1.19L8.91 13.7a3.2 3.2 0 0 0 0-3.4l6.7-3.49A3 3 0 1 0 15 5c0 .23.03.45.08.66L8.37 9.15A3 3 0 1 0 6 15c.9 0 1.71-.4 2.26-1.03l6.79 3.54A3 3 0 1 0 18 16Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}


/* remove a seta do teste anterior */
.product .product-share-button::after {
  content: none !important;
}


.product .product-share-button:hover {
  background: rgba(190, 46, 211, .055) !important;
  border-color: #ad2bc6 !important;

  transform: translateY(-1px);

  box-shadow:
    0 6px 16px rgba(168, 43, 194, .10) !important;
}


.product .product-share-button:active {
  transform: translateY(0);

  box-shadow:
    0 2px 7px rgba(168, 43, 194, .07) !important;
}


/* MOBILE */
@media (max-width: 600px) {

  .product .product-share-button {
    width: 100% !important;
    min-height: 36px !important;

    margin-top: 6px !important;
    padding: 7px 10px !important;

    font-size: 11.5px !important;
  }

  .product .product-share-button::before {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }

}

/* =====================================================
   COMPARTILHAR PRODUTO • COR AUTOMÁTICA DO TEMA
   FINAL
===================================================== */

.product .product-share-button {
  border-color: rgba(var(--theme-rgb), .68) !important;
  color: var(--primary) !important;
  background: rgba(255, 255, 255, .94) !important;
  background-image: none !important;
  box-shadow: 0 4px 12px rgba(var(--theme-rgb), .05) !important;
}

.product .product-share-button:hover {
  background: rgba(var(--theme-rgb), .055) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  box-shadow: 0 6px 16px rgba(var(--theme-rgb), .10) !important;
}

.product .product-share-button:active {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  box-shadow: 0 2px 7px rgba(var(--theme-rgb), .07) !important;
}