:root{
    --brand:#6d28d9; --brand-700:#5b21b6;
    --ink:#0b1220; --muted:#6b7280; --paper:#ffffff;
    --ok:#16a34a; --warn:#b45309;
    --fw-r:400; --fw-m:500;
    --radius:12px;
  }

  /* GRID */
  .grid.produtos{display:grid;gap:14px;grid-template-columns:1fr}
  @media(min-width:600px){.grid.produtos{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(min-width:1024px){.grid.produtos{grid-template-columns:repeat(4,minmax(0,1fr))}}

  /* CARD */
  article.product{
    display:flex;
    flex-direction:column;
    text-align:center;
    color:var(--ink);
  }
  article.product a,
  article.product a:link,
  article.product a:visited,
  article.product a:hover,
  article.product a:focus,
  article.product a:active{
    text-decoration:none;
    outline:none;
  }
  .no-nav{cursor:auto}

  /* MEDIA */
  .media{
    aspect-ratio:1/1;
    overflow:hidden;
    border-radius:10px;
    background:#fff;
  }
  .media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* CORPO */
  .pb{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:10px 4px 16px;
  }
  .titulo{
    font-size:1rem;
    font-weight:var(--fw-m);
    line-height:1.3;
    color:#111827;
    max-width:92%;
  }
  .desc{
    font-size:.82rem;
    color:var(--muted);
    font-weight:var(--fw-r);
    max-width:92%;
    line-height:1.35;
  }

  /* INFO */
  .info-row{
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:2px;
  }
  .info-tag{font-size:.78rem;font-weight:var(--fw-m)}
  .info-max{color:#5b21b6}
  .info-stock-ok{color:var(--ok)}
  .info-stock-low{color:var(--warn)}
  .info-stock-out{color:#991b1b}
  .sep-dot{
    width:8px;
    height:4px;
    border-radius:999px;
    background:#e2e8f0;
    display:inline-block;
  }

  /* PREÇO */
  .price-area{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:6px;
    margin-top:6px;
    flex-wrap:wrap;
  }
  .price{
    font-size:1.15rem;
    font-weight:var(--fw-m);
    color:#0f172a;
  }
  .old{
    font-size:.85rem;
    color:#9ca3af;
    text-decoration:line-through;
    font-weight:var(--fw-r);
  }
  .pill-off{
    background:#ecfdf5;
    color:#047857;
    font-size:.72rem;
    padding:2px 6px;
    border-radius:6px;
    font-weight:var(--fw-m);
  }

  /* AÇÕES */
  .actions-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-top:10px;
  }

  /* BOTÃO “COMPRAR AGORA” — PÍLULA FIXA, SEM HOVER */
  .btn-buy{
    width:100%;
    max-width:300px;
    padding:1rem 1.4rem;
    border-radius:999px;
    font-size:1rem;
    font-weight:500;
   background: #7C3AED;
    color:#fff;
    border:none;
    cursor:pointer;
    white-space:nowrap;
    box-shadow:0 6px 18px rgba(109,40,217,.25);
    transition:none; /* sem animação */
  }
  .btn-buy:hover,
  .btn-buy:focus,
  .btn-buy:active{
    background: #7C3AED;
    transform:none;
    box-shadow:0 6px 18px rgba(109,40,217,.25);
  }
  .btn-buy[disabled]{
    opacity:.55;
    cursor:not-allowed;
    box-shadow:none;
  }
  .btn-buy i{
    margin-right:.45rem;
    font-size:1rem;
  }

  /* LINK “ADICIONAR AO CARRINHO” — SEM SUBLINHADO */
  .cart-link-btn{
    background:none;
    border:none;
    padding:0;
    color:var(--brand);
    font-size:.9rem;
    font-weight:var(--fw-m);
    cursor:pointer;
    white-space:nowrap;
    text-decoration:none;
  }
  .cart-link-btn:hover,
  .cart-link-btn:focus,
  .cart-link-btn:active{
    color:var(--brand);
    text-decoration:none;
    outline:none;
  }
  .cart-link-btn[disabled]{
    color:#a1a1aa;
    cursor:not-allowed;
    text-decoration:none;
  }
  .cart-link-btn{
    background:none;
    border:none;
    padding:0;
    color:var(--brand);
    font-size:.9rem;
    font-weight:var(--fw-m);
    cursor:pointer;
    white-space:nowrap;
    text-decoration:none;
  }
  .cart-link-btn:hover,
  .cart-link-btn:focus,
  .cart-link-btn:active{
    color:var(--brand);
    text-decoration:none;
    outline:none;
  }
  .cart-link-btn[disabled]{
    color:#a1a1aa;
    cursor:not-allowed;
    text-decoration:none;
  }
  /* TOAST */
  .cart-toast{
    position:fixed;
    top:16px;
    left:50%;
    transform:translateX(-50%);
    background:var(--paper);
    color:#3b0764;
    border:1px solid #e6dcff;
    padding:.7rem .9rem;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(2,6,23,.15);
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:var(--fw-m);
    z-index:9999;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }
  .cart-toast.show{opacity:1}
  .cart-toast .ico{
    width:24px;
    height:24px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:#6d28d9;
    color:#fff;
    font-size:.85rem;
    flex:0 0 24px;
  }
  .cart-toast .msg{font-size:.9rem}

  /* POPUP CENTRAL */
  .cart-popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.45);
    display:none;
    place-items:center;
    z-index:10000;
    backdrop-filter:saturate(1.2) blur(1.5px);
  }
  .cart-popup-overlay.show{display:grid}
  .cart-popup{
    width:min(92vw,420px);
    background:#fff;
    border:1px solid #e6dcff;
    border-radius:16px;
    box-shadow:0 24px 64px rgba(2,6,23,.25);
    padding:18px 16px 16px;
    text-align:center;
    color:#3b0764;
  }
  .cart-popup .plane{
    width:50px;
    height:50px;
    margin:0 auto 10px;
    border-radius:999px;
    background:#6d28d9;
    color:#fff;
    display:grid;
    place-items:center;
    font-size:24px;
    box-shadow:0 8px 22px rgba(109,40,217,.35),
               inset 0 -2px 0 rgba(255,255,255,.2);
  }
  .cart-popup .ttl{
    font-weight:var(--fw-m);
    font-size:1.05rem;
    color:#2e1065;
    margin-bottom:4px;
  }
  .cart-popup .msg{
    font-weight:var(--fw-m);
    font-size:.95rem;
    color:#5b21b6;
  }
  /* ================= Mallfy — Header Mobile-First (Android look) ================ */
/* Reset e base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 15px/1.45 system-ui,-apple-system,Roboto,Inter,"Segoe UI",Arial;color:#0b1220;background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,a,input{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* ===== Efeitos & Estados — Topbar ===== */

/* Elevação dinâmica + blur sutil quando rola */
.topbar{
  transition: box-shadow .18s ease, background-color .18s ease, backdrop-filter .18s ease;
  will-change: box-shadow, backdrop-filter;
}
.topbar.is-scrolled{
  background: rgba(255,255,255,.86);
  box-shadow: var(--elev-2);
  backdrop-filter: saturate(180%) blur(6px);
}

/* Busca: realce ao focar e hover discreto */
.search{
  transition: background-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.search:focus-within{
  background:#eef2fb;
  box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}

/* Input: placeholder e autofill mais limpos */
.search input::placeholder{ color:#98a2b3 }
.search input:-webkit-autofill{
  -webkit-text-fill-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}

/* Botões de ação: micro interactions */
.iconbtn{
  transform: translateZ(0); /* ativa composição */
}

.iconbtn:active{ transform: scale(.97) }
.iconbtn:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(124,58,237,.22);
}

/* Badge: pop leve ao atualizar (opcional) */
@keyframes popIn{ 0%{transform:scale(.6);opacity:0} 100%{transform:scale(1);opacity:1} }
.badge{ animation: popIn .18s ease-out }

/* Acessibilidade extra */
@media (prefers-contrast: more){
  .search:focus-within{ box-shadow: 0 0 0 3px rgba(124,58,237,.35); }
  .iconbtn:focus-visible{ box-shadow: 0 0 0 3px rgba(124,58,237,.35); }
}

/* ===== Mobile ≤700px — layout mais “app” e busca equilibrada ===== */
@media (max-width:700px){
  .top-inner{
    grid-template-columns: auto minmax(0,1fr) auto;
  }
  /* A busca ocupa ~60% da largura, sem quebrar */
  .search{
    flex: 0 1 clamp(160px, 60vw, 420px);
    margin: 0 6px;
    min-height: 42px;
  }
  .iconbtn{ width:40px; height:40px }
}

/* ===== Desktop/Tablet — polimento leve ===== */
@media (min-width:980px){
  .search{ max-width: 680px; margin-left: 4px }
  .iconbtn{ width:42px; height:42px }
}

/* Tokens */
:root{
  --marca:#7c3aed;
  --brand: var(--marca);
  --linha:#eceff3;
  --ink:#0b1220;
  --muted:#475467;
  --elev-1:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.08);
  --elev-2:0 3px 8px rgba(16,24,40,.10),0 1px 3px rgba(16,24,40,.06);
  --navh:64px;
  --fs-16:16px;
  --safe-b:env(safe-area-inset-bottom);
  --safe-t:env(safe-area-inset-top);
}

/* Container padrão */
.container{
  width:min(1120px,100%);
  margin-inline:auto;
  padding-inline:clamp(10px,3vw,14px);
}

/* Header */
.topbar{
  position:sticky; top:0; z-index:60;
  background:#fff;
  border:none;
  box-shadow:0 1px 8px rgba(0,0,0,.05);
  padding-top:var(--safe-t);
}
.top-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"logo search actions";
  align-items:center;
  gap:clamp(8px,2.5vw,14px);
  padding:10px clamp(10px,3vw,14px);
}

/* Áreas (sem alterar HTML) */
.top-inner .logo   { grid-area:logo; }
.top-inner .search { grid-area:search; }
.top-inner .actions{ grid-area:actions; justify-self:end; display:flex; align-items:center; gap:.75rem; }

/* Logo */
.logo{ display:flex; align-items:center; gap:8px; font-weight:900; letter-spacing:.2px; font-size:var(--fs-16) }
.logo img{ width:32px; height:32px; border-radius:10px }

/* Busca (clean, sem borda) */
.search{
  display:flex; align-items:center; gap:8px;
  background:#f6f7fb; border:none; border-radius:16px;
  padding:8px 12px; min-height:44px; width:100%;
}
.search i{ color:var(--brand) }
.search input{
  flex:1; border:0; outline:0; background:transparent; font:inherit; color:var(--ink);
  min-width:0;
}

/* Ações topo */
.iconbtn{
  position:relative; display:grid; place-items:center;
  width:48px; height:48px; border-radius:12px; color:#475467;
  transition:background .15s, transform .15s, color .15s;
  background:transparent; border:none;
}
.iconbtn i{ font-size:1.2rem }

.iconbtn:active{ transform:scale(.98) }

.badge{
  position:absolute; top:6px; right:6px;
  min-width:18px; height:18px; padding:0 4px; line-height:1;
  border-radius:999px; background:var(--marca); color:#fff; font-size:11px; font-weight:700;
  display:grid; place-items:center;
}

/* ===== Mobile (≤700px) — 2 linhas: "logo | ações" + "search" ===== */
/* MOBILE (<=700px) — 1 linha: logo | busca | ações */
@media (max-width:700px){
  .top-inner{
    display:grid;
    grid-template-columns: auto minmax(0,1fr) auto; /* busca cresce entre logo e ações */
    grid-template-areas: "logo search actions";
    align-items:center;
    row-gap:0;
  }

  .top-inner .logo    { grid-area:logo; }
  .top-inner .search  { grid-area:search; }
  .top-inner .actions { grid-area:actions; justify-self:end; display:flex !important; }

  /* Busca ocupa o espaço disponível sem quebrar */
  .search{
    width:auto;          /* libera do 100%/50% anterior */
    max-width:none;      /* remove limites */
    min-height:42px;
    margin:0 8px;        /* respiro entre logo e ícones */
  }

  .logo span{ display:none; }     /* compacto */
  .iconbtn{ width:40px; height:40px; } /* toque confortável */
}


/* Micro ajustes extras */
@media (max-width:480px){
  .topbar{ padding:.45rem .6rem }
  .logo img{ width:24px; height:24px }
}
@media (min-width:980px){
  .iconbtn{ width:38px; height:38px }
}

/* Bottom nav estilo app Android (opcional) */
.app-shell{ min-height:100dvh; padding-bottom:calc(var(--navh) + var(--safe-b)) }
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:1100;
  height:calc(var(--navh) + var(--safe-b)); padding-bottom:var(--safe-b);
  background:#fff; border-top:1px solid var(--linha); box-shadow:var(--elev-2);
  display:flex;
}
.bottomnav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; font-size:11px; color:#667085; font-weight:700; letter-spacing:.2px;
}
.bottomnav a i{ font-size:20px }
.bottomnav a:active{ transform:scale(.98) }
.bottomnav a.active{ color:var(--marca) }
@media (min-width:980px){
  .bottomnav{ display:none!important }
  .app-shell{ padding-bottom:0!important }
}

/* Acessibilidade */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid #c084fc66; outline-offset:2px; border-radius:10px;
}