/* ════════════════════════════════════════════════════════════════════
   MicroTi — Design System "Claro Tech"
   Único CSS do site. Linkar como /assets/theme.css?v=N (bump a cada deploy).
   ════════════════════════════════════════════════════════════════════ */

:root{
    /* Superfícies */
    --bg:#f6f8fd; --bg-accent:#eef2fb; --surface:#fff; --surface-2:#f1f5f9;
    --ink:#0b1220; --ink-2:#43506b; --ink-3:#8a94ad; --line:#e3e8f3;

    /* Marca */
    --blue:#2563eb; --blue-2:#3b82f6; --blue-soft:#eff6ff;
    --violet:#7c3aed; --violet-2:#8b5cf6; --violet-soft:#f5f3ff;
    --cyan:#06b6d4;
    --success:#16a34a; --success-2:#15803d; --danger:#dc2626; --warn:#d97706; --wpp:#25d366;

    /* Gradientes */
    --grad-brand:linear-gradient(135deg,#2563eb,#7c3aed);
    --grad-text:linear-gradient(90deg,#2563eb,#7c3aed);
    --grad-cta:linear-gradient(135deg,#7c3aed,#6d28d9);
    --grad-cta-h:linear-gradient(135deg,#8b5cf6,#7c3aed);
    --grad-buy:linear-gradient(135deg,#16a34a,#15803d);
    --grad-buy-h:linear-gradient(135deg,#22c55e,#16a34a);
    --grad-soft:linear-gradient(135deg,#eff6ff,#f5f3ff);

    /* Sombras / glow */
    --sh-1:0 1px 3px rgba(15,23,42,.06);
    --sh-2:0 4px 16px rgba(15,23,42,.08);
    --sh-3:0 16px 40px rgba(15,23,42,.14);
    --glow-blue:0 8px 24px rgba(59,130,246,.28);
    --glow-violet:0 8px 24px rgba(124,58,237,.28);
    --glow-green:0 8px 24px rgba(22,163,74,.28);
    --ring:0 0 0 3px rgba(59,130,246,.16);

    /* Raios */
    --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;

    /* Tipografia fluida */
    --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --font-display:'Space Grotesk','Inter',sans-serif;
    --fs-h2:clamp(1.15rem,1rem + .8vw,1.5rem);
    --fs-h3:clamp(.98rem,.92rem + .35vw,1.15rem);
    --fs-body:clamp(.86rem,.83rem + .18vw,.95rem);
    --fs-sm:clamp(.75rem,.73rem + .12vw,.81rem);
    --fs-xs:clamp(.66rem,.64rem + .1vw,.72rem);
    --fs-price:clamp(1rem,.93rem + .4vw,1.18rem);

    /* Layout / motion */
    --container:1280px; --pad-x:clamp(12px,3vw,24px);
    --header-h:64px; --bottombar-h:62px;
    --ease:cubic-bezier(.22,.61,.36,1); --t-fast:.15s; --t-med:.25s;
}

/* ── Reset & base ─────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);min-height:100vh;font-size:var(--fs-body);line-height:1.5}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font-family:inherit;font-size:inherit}
img{max-width:100%}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
    html{scroll-behavior:auto}
}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(22,163,74,.35)}70%{box-shadow:0 0 0 16px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ════════════════════════════════════════════════════════════════════
   HEADER unificado (inc_header.php)
   Ordem: faixa da marca → selos → pills de categorias → barra de busca
   ════════════════════════════════════════════════════════════════════ */
/* Faixa da marca — logo oficial centralizada no topo */
.site-brand{background:#fff;border-bottom:1px solid var(--line)}
.brand-logo{display:block;max-width:var(--container);margin:0 auto;padding:clamp(10px,1.6vw,18px) var(--pad-x)}
.brand-logo img{display:block;width:min(100%,800px);height:auto;margin:0 auto}

/* Barra sticky de utilidades: busca + WhatsApp + carrinho */
.site-head{position:sticky;position:-webkit-sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--line)}
@supports ((backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px))){
    .site-head{background:rgba(255,255,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}
.site-head-inner{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x);min-height:var(--header-h);display:flex;align-items:center;gap:clamp(10px,2vw,20px);flex-wrap:wrap}
.header-back{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2);font-size:var(--fs-sm);font-weight:700;white-space:nowrap;transition:color var(--t-fast)}
.header-back:hover{color:var(--blue)}

.head-search{flex:1 1 220px;max-width:760px;min-width:0}
.search-wrap{position:relative}
.search-live{width:100%;padding:10px 16px 10px 40px;border:1.5px solid var(--line);border-radius:var(--r-full);font-size:var(--fs-sm);color:var(--ink);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a94ad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 15px center;outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast);box-shadow:var(--sh-1)}
.search-live:focus{border-color:var(--blue-2);box-shadow:var(--ring)}
.search-live::placeholder{color:var(--ink-3)}
.search-live::-webkit-search-cancel-button{cursor:pointer}

.head-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.head-wpp{display:inline-flex;align-items:center;gap:7px;background:var(--grad-buy);color:#fff;padding:9px 15px;border-radius:var(--r-full);font-weight:800;font-size:var(--fs-sm);white-space:nowrap;transition:transform var(--t-fast),box-shadow var(--t-fast);box-shadow:0 2px 8px rgba(22,163,74,.25)}
.head-wpp:hover{transform:translateY(-1px);box-shadow:var(--glow-green)}
.head-ico{display:none;position:relative;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-full);background:var(--surface);border:1.5px solid var(--line);color:var(--ink-2);cursor:pointer;flex-shrink:0}
.head-ico svg{width:19px;height:19px}
.head-ico-wpp{color:#fff;background:var(--grad-buy);border-color:transparent}
.head-account{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;padding:0 13px;border:1.5px solid var(--line);border-radius:var(--r-full);background:#fff;color:var(--ink-2);font-size:var(--fs-xs);font-weight:850;letter-spacing:.04em;transition:all var(--t-fast)}
.head-account svg{width:18px;height:18px}.head-account:hover{border-color:var(--violet-2);color:var(--violet);box-shadow:var(--glow-violet)}
.head-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:42px;height:42px;padding:0 16px;border-radius:var(--r-full);background:var(--surface);border:1.5px solid var(--line);color:var(--ink-2);text-decoration:none;transition:all var(--t-fast)}
.head-cart-label{font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em}
.head-cart:hover{border-color:var(--blue-2);color:var(--blue);box-shadow:var(--glow-blue)}
.head-cart-badge{position:absolute;top:-5px;right:-5px;background:var(--danger);color:#fff;font-size:.66rem;font-weight:900;min-width:18px;height:18px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff}
.head-cart-badge.is-empty{display:none}

/* Pills de categorias (faixa estática entre os selos e a barra de busca) */
.cat-nav{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(246,248,253,.92));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cat-nav-inner{max-width:var(--container);margin:0 auto;padding:8px var(--pad-x);display:flex;align-items:center;gap:7px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.cat-nav-inner::-webkit-scrollbar{display:none}
.cat-nav-link{display:flex;align-items:center;gap:6px;padding:7px 14px;color:var(--ink-2);font-size:var(--fs-sm);font-weight:700;white-space:nowrap;border:1.5px solid var(--line);border-radius:var(--r-full);background:var(--surface);transition:all var(--t-fast);cursor:pointer;flex-shrink:0}
.cat-nav-link:hover{color:var(--violet);border-color:var(--violet-2);background:var(--violet-soft);transform:translateY(-1px)}
.cat-nav-link.active{color:#fff;border-color:transparent;background:var(--grad-brand);box-shadow:var(--glow-violet)}

/* Bottom bar mobile (estilo app) */
.bottom-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:950;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.bb-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 4px 7px;font-size:.62rem;font-weight:700;color:var(--ink-2);background:none;border:none;cursor:pointer;position:relative;letter-spacing:.02em}
.bb-item svg{width:21px;height:21px}
.bb-item:active{color:var(--blue)}
.bb-item.bb-wpp{color:var(--success)}
.bb-badge{position:absolute;top:2px;left:calc(50% + 4px);background:var(--danger);color:#fff;font-size:.6rem;font-weight:900;min-width:16px;height:16px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff}
.bb-badge.is-empty{display:none}

@media(max-width:768px){
    .bottom-bar{display:flex}
    body{padding-bottom:calc(var(--bottombar-h) + env(safe-area-inset-bottom))}
    .head-wpp{display:none}
    /* Mobile: busca + ícones (Início/Categorias/Carrinho/Wpp) numa linha só */
    .site-head-inner{min-height:0;padding-top:8px;padding-bottom:8px;row-gap:8px}
    .head-search{flex:1 1 120px;max-width:none}
    .head-actions{gap:6px}
    .head-ico{display:inline-flex}
    .head-cart{width:40px;min-width:40px;height:40px;padding:0}
    .head-cart-label{display:none}
    .head-account{display:none}
}

/* ════════════════════════════════════════════════════════════════════
   TRUST BAR (selos de confiança, logo abaixo da marca)
   ════════════════════════════════════════════════════════════════════ */
.trust-bar{max-width:var(--container);margin:clamp(12px,2vw,20px) auto;padding:0 var(--pad-x)}
.trust-bar-inner{border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,rgba(37,99,235,.35),rgba(124,58,237,.35)) border-box;border-radius:var(--r-lg);padding:clamp(10px,1.6vw,16px) clamp(14px,2vw,24px);display:flex;align-items:center;justify-content:space-around;gap:12px;flex-wrap:wrap;box-shadow:var(--sh-1)}
.trust-item{display:flex;align-items:center;gap:10px;min-width:130px}
.trust-item .ti-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-md);background:var(--grad-soft);font-size:1.15rem;flex-shrink:0}
.trust-item-text{line-height:1.25}
.trust-item-text strong{font-size:var(--fs-sm);color:var(--ink);display:block;font-weight:800}
.trust-item-text span{font-size:var(--fs-xs);color:var(--ink-3)}
.trust-divider{width:1px;height:34px;background:var(--line);flex-shrink:0}
@media(max-width:900px){
    .trust-divider{display:none}
    .trust-bar-inner{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;justify-items:start}
}

/* ════════════════════════════════════════════════════════════════════
   LAYOUT vitrine (sidebar + conteúdo)
   ════════════════════════════════════════════════════════════════════ */
.layout{max-width:var(--container);margin:clamp(14px,2.2vw,22px) auto;padding:0 var(--pad-x);display:grid;grid-template-columns:225px 1fr;gap:clamp(14px,1.8vw,22px);align-items:start}
.content{min-width:0}

/* Coluna lateral: categorias + caixa de informações (a coluna inteira gruda
   no scroll e rola internamente se passar da altura da tela) */
.side-col{position:sticky;top:calc(var(--header-h) + 14px);max-height:calc(100vh - var(--header-h) - 28px);overflow-y:auto;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.side-col::-webkit-scrollbar{width:6px}
.side-col::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.side-col .sidebar{position:static;top:auto;flex-shrink:0}

/* Caixa de informações da loja (o footer fica longe por causa do scroll infinito) */
.sidebar-info{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);border:1px solid var(--line);overflow:hidden;flex-shrink:0}
.sidebar-info-body{padding:13px 16px;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55;display:flex;flex-direction:column;gap:9px}
.sidebar-info-body .si-item{display:flex;gap:8px;align-items:flex-start}
.sidebar-info-body .si-item .si-ico{flex-shrink:0}
.sidebar-info-body a{color:var(--blue);font-weight:600}
.sidebar-info-body a:hover{text-decoration:underline}
.sidebar-info-links{border-top:1px solid var(--surface-2);padding-top:9px;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-xs)}
.sidebar-info-links a{color:var(--ink-2);font-weight:600}
.sidebar-info-links a:hover{color:var(--blue);text-decoration:none}
.sidebar-info-cnpj{font-size:.62rem;color:var(--ink-3);padding-top:2px}

/* Sidebar árvore de categorias */
.sidebar{background:var(--surface);border-radius:var(--r-lg);box-shadow:0 8px 28px rgba(30,64,175,.1);overflow:hidden;position:sticky;top:calc(var(--header-h) + 14px);border:1px solid #d9e5f7}
.sidebar-title{padding:14px 16px;font-size:var(--fs-xs);font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#173b70;background:linear-gradient(135deg,#eef5ff,#f8fbff);border-bottom:1px solid #d9e5f7;display:flex;align-items:center;gap:7px}
.cat-list{list-style:none;padding:6px}
.cat-list>li+li{border-top:0}
.cat-list li a{display:flex;align-items:center;padding:10px 16px;font-size:var(--fs-sm);color:var(--ink-2);transition:all var(--t-fast);gap:6px;position:relative}
.cat-list>li>a{margin:2px 0;border-radius:8px}
.cat-list li a:hover{background:var(--blue-soft);color:var(--blue)}
.cat-list li a.active{font-weight:800}
.cat-list>li>a.branch-active{background:#e5f0ff;color:#1556a8;box-shadow:inset 0 0 0 1px #c9ddf7}
.cat-list li a svg{margin-left:auto;flex-shrink:0}
.cat-tree-l2{list-style:none;margin:4px 0 7px 10px;padding:6px;background:#f3f7fc;border-radius:10px}
.cat-tree-l2 li>a{display:flex;align-items:center;padding:8px 10px;font-size:calc(var(--fs-sm) - .03rem);color:var(--ink-2);transition:all var(--t-fast);gap:7px;border-radius:7px}
.cat-tree-l2>li.has-sub>a::before{content:'›';display:grid;place-items:center;width:18px;height:18px;border-radius:6px;background:#dceaff;color:#3979c9;font-size:.95rem;font-weight:900;line-height:1;flex-shrink:0}
.cat-tree-l2 li>a:hover{background:var(--blue-soft);color:var(--blue)}
.cat-tree-l2 li>a.branch-active{background:#dcecff;color:#1556a8;box-shadow:0 2px 7px rgba(35,105,190,.1)}
.cat-tree-l3{list-style:none;margin:4px 0 5px 16px;padding:5px;background:#e7f0fb;border-radius:9px}
.cat-tree-l3 li>a{display:flex;align-items:center;padding:7px 9px;font-size:var(--fs-xs);color:#526b86;transition:all var(--t-fast);gap:7px;border-radius:6px}
.cat-tree-l3 li>a:hover{background:#e5efff;color:var(--blue)}
.cat-list li a.selected{background:linear-gradient(135deg,#1559b5,#2385e8);color:#fff;font-weight:900;box-shadow:0 3px 10px rgba(21,89,181,.2)}
.cat-list li a.selected::before{background:rgba(255,255,255,.2);color:#fff}
.cat-list li a.selected::after{content:'✓';display:grid;place-items:center;margin-left:auto;width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.2);font-size:.62rem;font-weight:900;flex-shrink:0}
.cat-list li a.selected svg{display:none}
.cat-list li a.selected:hover{background:linear-gradient(135deg,#124c9c,#1d73cb);color:#fff}

@media(max-width:900px){
    .layout{grid-template-columns:1fr}
    .sidebar,.side-col{display:none}
}

/* Informações da loja dentro do drawer mobile (abaixo da árvore de categorias) */
.drawer-info{border-top:1px solid var(--surface-2);margin-top:6px;padding:14px 16px 20px}
.drawer-info-title{font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin-bottom:10px;display:flex;align-items:center;gap:6px}

/* Painel de conteúdo inline (Sobre, Fale Conosco, etc. abertos sem navegar) */
.content-panel{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--sh-1);padding:clamp(18px,3vw,28px);animation:fadeIn .18s ease}
.content-panel-back{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:700;font-size:var(--fs-sm);background:none;border:none;cursor:pointer;padding:0;margin-bottom:16px}
.content-panel-back:hover{text-decoration:underline}
.content-panel-body h1{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:700;letter-spacing:-.02em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin-bottom:6px;display:inline-block}
.content-panel-body .page-updated{font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:24px}
.content-panel-body h2{font-size:var(--fs-h3);font-weight:800;color:var(--ink);margin:26px 0 8px;display:flex;align-items:center;gap:8px}
.content-panel-body h2::before{content:'';display:block;width:3px;height:15px;background:var(--grad-brand);border-radius:2px;flex-shrink:0}
.content-panel-body h2:first-of-type{margin-top:0}
.content-panel-body p,.content-panel-body li{font-size:var(--fs-body);line-height:1.75;color:var(--ink-2)}
.content-panel-body ul{padding-left:20px;margin-bottom:10px}
.content-panel-body a{color:var(--blue);font-weight:600}
.content-panel-body a:hover{text-decoration:underline}
.content-panel-loading{text-align:center;padding:44px 10px;color:var(--ink-3);font-size:var(--fs-body)}

/* Section titles */
.product-category-path{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;background:linear-gradient(135deg,#f2f7ff,#fff);border:1px solid #d9e6f7;border-left:4px solid #2477dc;border-radius:9px;color:#54708f;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;box-shadow:0 3px 12px rgba(30,64,175,.06)}
.product-category-path .current{color:#1559b5;font-weight:900}
.product-category-sep{color:#79a2d5;font-size:1rem;line-height:1}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-title-bar{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:9px}
.section-title-bar::before{content:'';display:block;width:4px;height:18px;background:var(--grad-brand);border-radius:2px}

/* ════════════════════════════════════════════════════════════════════
   GRID + CARD de produto
   ════════════════════════════════════════════════════════════════════ */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(142px,17vw,178px),1fr));gap:clamp(10px,1.4vw,16px)}
@media(max-width:400px){.prod-grid{grid-template-columns:repeat(2,1fr);gap:9px}}

.card{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);display:flex;flex-direction:column;transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),border-color var(--t-med);border:1px solid var(--line);position:relative;animation:cardIn .3s var(--ease) both}
.card:hover{transform:translateY(-4px);box-shadow:var(--glow-blue);border-color:rgba(59,130,246,.45)}
.card.prod-click{cursor:pointer}
.card.sem-estoque{opacity:.62;filter:grayscale(.35)}
.card.sem-estoque:hover{transform:none;box-shadow:var(--sh-1);border-color:var(--line)}

.card-img{position:relative;aspect-ratio:1;background:linear-gradient(135deg,#fafbfe,var(--surface-2));overflow:hidden;flex-shrink:0}
.card-img img{width:100%;height:100%;object-fit:contain;padding:10px;display:block;transition:transform .35s var(--ease)}
.card:not(.sem-estoque):hover .card-img img{transform:scale(1.07)}
.no-photo{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#cbd5e1;gap:6px}
.no-photo span{font-size:2.8rem}
.no-photo small{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:#cbd5e1;font-weight:700}

.card-badges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:4px;z-index:2}
.badge-cond{font-size:.6rem;font-weight:800;padding:3px 8px;border-radius:6px;letter-spacing:.04em;line-height:1.5;box-shadow:var(--sh-1)}
.badge-cond.Novo{background:#dcfce7;color:#166534}
.badge-cond.SemiNovo{background:#fef3c7;color:#92400e}
.badge-cond.Usado{background:#fee2e2;color:#991b1b}
.badge-cond.Recondicionado{background:#e0f2fe;color:#0c4a6e}
.badge-sem-estoque{position:absolute;inset:0;background:rgba(11,18,32,.5);display:flex;align-items:center;justify-content:center;z-index:3;backdrop-filter:blur(1px)}
.badge-sem-estoque span{background:#fff;color:var(--ink);font-size:.7rem;font-weight:900;letter-spacing:2.5px;padding:6px 13px;border-radius:var(--r-sm);box-shadow:var(--sh-2)}

.card-body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:4px;flex:1}
.card-cat{font-size:var(--fs-xs);color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.card-name{font-size:var(--fs-sm);font-weight:600;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-price-wrap{margin-top:auto;padding-top:8px;display:flex;align-items:baseline;justify-content:center;gap:4px}
.card-price{font-family:var(--font-display);font-size:var(--fs-price);font-weight:700;color:var(--blue);text-align:center;letter-spacing:-.01em}
.btn-comprar{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:10px 8px;background:var(--grad-cta);color:#fff;border:none;border-radius:10px;font-weight:800;font-size:var(--fs-sm);cursor:pointer;margin-top:7px;transition:all var(--t-fast);letter-spacing:.03em;box-shadow:0 2px 6px rgba(124,58,237,.28)}
.btn-comprar:hover{background:var(--grad-cta-h);box-shadow:var(--glow-violet);transform:scale(1.02)}
.btn-sem-estoque{display:block;width:100%;padding:10px;background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line);border-radius:10px;font-weight:700;font-size:var(--fs-sm);cursor:not-allowed;margin-top:7px;letter-spacing:.02em;text-align:center}

/* Skeleton (loading da busca) */
.card-sk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.card-sk .sk-img{aspect-ratio:1}
.card-sk .sk-line{height:12px;border-radius:6px;margin:8px 13px 0}
.card-sk .sk-line.short{width:55%}
.card-sk .sk-btn{height:36px;border-radius:10px;margin:10px 13px 13px}
.card-sk .sk-img,.card-sk .sk-line,.card-sk .sk-btn{background:linear-gradient(90deg,var(--surface-2) 25%,#e8edf7 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}

/* Empty state */
.empty{text-align:center;padding:70px 20px;color:var(--ink-3);grid-column:1/-1}
.empty-icon{font-size:3.2rem;margin-bottom:14px;filter:grayscale(.2)}
.empty p{font-size:var(--fs-body);line-height:1.7}
.empty a{color:var(--blue);font-weight:700}
.no-results-msg{display:none;text-align:center;padding:44px 20px;color:var(--ink-3);font-size:var(--fs-body);grid-column:1/-1}

/* Loader do scroll infinito */
#infiniteLoader{color:var(--ink-3)}

/* ════════════════════════════════════════════════════════════════════
   SERVIÇOS
   ════════════════════════════════════════════════════════════════════ */
.svc-section-title{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;color:var(--ink);margin:24px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--line);display:flex;align-items:center;gap:8px}
.svc-section-title:first-child{margin-top:0}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,18vw,185px),1fr));gap:clamp(10px,1.4vw,16px);margin-bottom:6px}
@media(max-width:400px){.svc-grid{grid-template-columns:repeat(2,1fr);gap:9px}}
.svc-card{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);display:flex;flex-direction:column;transition:transform var(--t-med) var(--ease),box-shadow var(--t-med),border-color var(--t-med);border:1px solid var(--line);animation:cardIn .3s var(--ease) both}
.svc-card:hover{transform:translateY(-3px);box-shadow:var(--glow-blue);border-color:rgba(59,130,246,.4)}
.svc-card-img{width:100%;aspect-ratio:1;overflow:hidden;background:linear-gradient(135deg,#fafbfe,var(--surface-2));flex-shrink:0}
.svc-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--ease)}
.svc-card:hover .svc-card-img img{transform:scale(1.05)}
.svc-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.svc-card-name{font-size:var(--fs-body);font-weight:800;color:var(--ink);line-height:1.3}
.svc-card-desc{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.45}
.svc-card-price{font-family:var(--font-display);font-size:var(--fs-price);font-weight:700;color:var(--blue);margin-top:auto;padding-top:6px}
.svc-card-price.variavel{color:var(--ink-3);font-size:var(--fs-sm);font-weight:700;font-family:var(--font-body)}
.btn-svc-wpp{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px;background:var(--grad-buy);color:#fff;border:none;border-radius:10px;font-weight:800;font-size:var(--fs-sm);cursor:pointer;margin-top:6px;transition:all var(--t-fast);text-decoration:none;letter-spacing:.03em;box-shadow:0 2px 6px rgba(22,163,74,.22)}
.btn-svc-wpp:hover{background:var(--grad-buy-h);box-shadow:var(--glow-green)}

/* ════════════════════════════════════════════════════════════════════
   DRAWER mobile de categorias
   ════════════════════════════════════════════════════════════════════ */
.sidebar-drawer{display:none;position:fixed;inset:0;z-index:1200;background:rgba(11,18,32,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sidebar-drawer.open{display:block;animation:fadeIn .15s ease}
.sidebar-drawer-panel{position:absolute;left:0;top:0;bottom:0;width:min(300px,84vw);background:var(--surface);overflow-y:auto;box-shadow:var(--sh-3);animation:slideIn .22s var(--ease);border-radius:0 var(--r-lg) var(--r-lg) 0}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.drawer-close{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--line);font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:1rem;position:sticky;top:0;background:var(--surface);z-index:1}
.drawer-close span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.drawer-close button{background:var(--surface-2);border:none;font-size:1.3rem;cursor:pointer;color:var(--ink-2);line-height:1;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-full);transition:background var(--t-fast)}
.drawer-close button:hover{background:var(--line)}
.cat-toggle{cursor:pointer;justify-content:space-between}
.cat-toggle .chev{transition:transform var(--t-fast);flex-shrink:0;margin-left:auto}
.cat-node.expanded>.cat-toggle .chev{transform:rotate(90deg)}
.cat-node>.cat-tree-l2,.cat-node>.cat-tree-l3{display:none}
.cat-node.expanded>.cat-tree-l2,.cat-node.expanded>.cat-tree-l3{display:block}

/* ════════════════════════════════════════════════════════════════════
   LIGHTBOX + BACK TO TOP
   ════════════════════════════════════════════════════════════════════ */
.lb{display:none;position:fixed;inset:0;z-index:9900;align-items:center;justify-content:center;padding:20px}
.lb.open{display:flex}
.lb-blur{position:absolute;inset:0;background:rgba(8,12,24,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lb-box{position:relative;z-index:1;max-width:min(900px,94vw);max-height:92vh;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.7);animation:lbIn .18s ease}
.lb-box img{display:block;width:100%;height:auto;max-height:92vh;object-fit:contain;background:#0b1220}
.lb-close{position:absolute;top:12px;right:12px;z-index:2;background:rgba(0,0,0,.65);border:none;color:#fff;border-radius:50%;width:36px;height:36px;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--t-fast)}
.lb-close:hover{background:var(--danger)}
@keyframes lbIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

.back-top{position:fixed;bottom:24px;right:24px;width:44px;height:44px;background:var(--grad-brand);color:#fff;border:none;border-radius:50%;font-size:1.2rem;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:var(--glow-blue);z-index:940;transition:transform var(--t-fast),box-shadow var(--t-fast)}
.back-top.show{display:flex}
.back-top:hover{transform:translateY(-3px)}
@media(max-width:768px){.back-top{bottom:calc(var(--bottombar-h) + 14px + env(safe-area-inset-bottom));right:14px}}

/* ════════════════════════════════════════════════════════════════════
   MODAL de produto
   ════════════════════════════════════════════════════════════════════ */
.modal-overlay{display:none;position:fixed;inset:0;z-index:8000;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(11,18,32,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal-box{position:relative;z-index:1;background:var(--bg);border-radius:var(--r-xl);max-width:680px;width:100%;max-height:92vh;overflow-y:auto;padding:22px;box-shadow:var(--sh-3);animation:modalIn .2s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:none}}
.modal-close{position:absolute;top:12px;right:12px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);border-radius:50%;width:32px;height:32px;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;z-index:2;transition:all var(--t-fast)}
.modal-close:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.modal-loading{text-align:center;padding:44px 10px;color:var(--ink-3);font-size:var(--fs-body)}
.modal-actions{margin-top:14px}

.modal-box .prod-summary{display:flex;flex-direction:column;gap:18px;align-items:stretch}
.prod-gallery{min-width:0}
.prod-main-photo{width:100%;height:clamp(260px,42vh,390px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.prod-main-photo img{width:100%;height:100%;object-fit:contain;padding:12px}
.modal-box .prod-thumb-placeholder{width:100%;height:clamp(260px,42vh,390px);border-radius:var(--r-lg);background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:3rem}
.prod-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.prod-thumb-btn{aspect-ratio:1;border:2px solid var(--line);border-radius:10px;background:var(--surface);padding:4px;cursor:pointer;overflow:hidden;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.prod-thumb-btn:hover{border-color:var(--blue-2)}
.prod-thumb-btn.active{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad-brand) border-box;box-shadow:var(--glow-blue)}
.prod-thumb-btn img{width:100%;height:100%;object-fit:contain;display:block}
.prod-info{flex:1;min-width:0}
.modal-box .prod-info h2{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:700;line-height:1.25;margin:0 34px 10px 0;color:var(--ink);letter-spacing:-.01em}
.prod-info .desc{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6;margin:12px 0;padding-top:12px;border-top:1px solid var(--line)}
.prod-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}
.prod-meta span{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);padding:6px 11px;color:var(--ink-2);font-size:var(--fs-xs);font-weight:700}
.modal-box .prod-price{font-family:var(--font-display);font-size:clamp(1.4rem,1.2rem + 1vw,1.7rem);font-weight:700;color:var(--success)}

.qtd-row{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.qtd-row label{font-size:var(--fs-xs);font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.qtd-stepper{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-full);overflow:hidden;background:var(--surface)}
.qtd-btn{width:36px;height:36px;border:none;background:var(--surface-2);color:var(--blue);font-size:1.2rem;font-weight:700;cursor:pointer;line-height:1;transition:background var(--t-fast)}
.qtd-btn:hover{background:var(--blue-soft)}
.qtd-stepper input{width:46px;height:36px;border:none;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);text-align:center;font-size:var(--fs-body);font-weight:700;-moz-appearance:textfield;background:var(--surface);color:var(--ink)}
.qtd-stepper input::-webkit-outer-spin-button,.qtd-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qtd-hint{font-size:var(--fs-xs);color:var(--ink-3)}

.cart-notice{background:var(--blue-soft);border:1px solid #bfdbfe;border-radius:var(--r-md);padding:13px;margin-bottom:14px;font-size:var(--fs-sm);color:var(--blue);font-weight:700;text-align:center}
.btn-add-cart{width:100%;padding:14px;background:var(--surface);color:var(--blue);border:2px solid var(--blue-2);border-radius:var(--r-md);font-size:var(--fs-body);font-weight:800;cursor:pointer;transition:all var(--t-fast);margin-bottom:10px}
.btn-add-cart:hover{background:var(--blue-soft);box-shadow:var(--glow-blue)}
.btn-add-cart:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}
.btn-confirm{width:100%;padding:16px;background:var(--grad-buy);color:#fff;border:none;border-radius:var(--r-md);font-size:clamp(.98rem,.92rem + .3vw,1.08rem);font-weight:800;cursor:pointer;transition:all var(--t-fast);letter-spacing:.02em;box-shadow:0 4px 14px rgba(22,163,74,.28)}
.btn-confirm:hover{background:var(--grad-buy-h);box-shadow:var(--glow-green);transform:translateY(-1px)}
.btn-confirm:disabled{background:#94a3b8;cursor:not-allowed;box-shadow:none;transform:none}
.prod-share{display:flex;flex-direction:column;align-items:flex-end;gap:5px;margin-left:auto}
.prod-share-label{font-size:var(--fs-xs);color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.prod-share-icons{display:flex;align-items:center;gap:7px}
.prod-share-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:all var(--t-fast);padding:0}
.prod-share-btn img{width:16px;height:16px;object-fit:contain;display:block}
.prod-share-btn:hover{border-color:var(--blue-2);box-shadow:var(--glow-blue);transform:translateY(-1px)}
.prod-share-icons .prod-share-copied{display:none;background:none;border:none;padding:0;border-radius:0;font-size:var(--fs-xs);color:var(--success);font-weight:700}
.prod-share-icons .prod-share-copied.show{display:inline}
.unavail-box{text-align:center;padding:22px 10px}
.unavail-icon{font-size:2.6rem;margin-bottom:10px}
.unavail-title{font-size:var(--fs-h3);font-weight:800;color:var(--ink);margin-bottom:6px}
.unavail-msg{color:var(--ink-3);font-size:var(--fs-sm);margin-bottom:14px}
.btn-back{display:inline-block;background:var(--grad-brand);color:#fff;text-decoration:none;padding:12px 28px;border-radius:var(--r-md);font-weight:700;font-size:var(--fs-body)}
.btn-back:hover{box-shadow:var(--glow-blue)}

@media(max-width:720px){
    .modal-overlay{padding:10px;align-items:flex-end}
    .modal-box{padding:18px;max-height:94vh;border-radius:var(--r-xl) var(--r-xl) 0 0}
    .modal-box .prod-summary{grid-template-columns:1fr;gap:14px}
    .prod-main-photo,.modal-box .prod-thumb-placeholder{height:230px}
    .modal-box .prod-info h2{margin-right:34px}
    .modal-actions{position:sticky;bottom:-18px;background:linear-gradient(transparent,var(--bg) 25%);padding:12px 0 4px;margin-bottom:-4px}
}

.cart-inline-frame{display:block;width:100%;min-height:720px;border:0;background:transparent}
.cart-empty{text-align:center;padding:clamp(34px,6vw,58px) 20px}
.cart-empty-icon{font-size:3.4rem;margin-bottom:12px}
.cart-empty h1{font-family:var(--font-display);font-size:var(--fs-h2);color:var(--ink);margin-bottom:8px}
.cart-empty p{color:var(--ink-3);line-height:1.6}
body.cart-embed{background:transparent;padding:0}
body.cart-embed .container{max-width:760px;margin:0 auto;padding:0 0 24px}

/* ════════════════════════════════════════════════════════════════════
   CARRINHO / CHECKOUT (páginas)
   ════════════════════════════════════════════════════════════════════ */
.container{max-width:640px;margin:clamp(18px,3vw,30px) auto;padding:0 var(--pad-x) 60px}
.section{background:var(--surface);border-radius:var(--r-lg);padding:clamp(16px,2.4vw,22px);margin-bottom:14px;box-shadow:var(--sh-1);border:1px solid var(--line)}
.section-label{font-size:var(--fs-xs);font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px}

/* Steps decorativos do fluxo */
.cart-steps{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:18px;font-size:var(--fs-xs);font-weight:700;color:var(--ink-3)}
.cart-steps .step{display:flex;align-items:center;gap:6px}
.cart-steps .dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1.5px solid var(--line);font-size:.62rem;font-weight:800;color:var(--ink-3)}
.cart-steps .step.on .dot{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:var(--glow-blue)}
.cart-steps .step.on{color:var(--ink)}
.cart-steps .bar{width:clamp(18px,5vw,38px);height:2px;background:var(--line);border-radius:2px}

.cart-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--surface-2)}
.cart-item:last-child{border-bottom:none}
.cart-thumb{width:60px;height:60px;border-radius:var(--r-md);object-fit:cover;flex-shrink:0;border:1px solid var(--line);background:var(--surface-2)}
.cart-thumb-placeholder{width:60px;height:60px;border-radius:var(--r-md);background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:var(--fs-sm);font-weight:700;line-height:1.35;margin-bottom:4px;color:var(--ink)}
.cart-item-price{font-size:var(--fs-xs);color:var(--ink-3)}
.cart-item-subtotal{font-family:var(--font-display);font-size:var(--fs-body);font-weight:700;color:var(--success);margin-top:2px}
.cart-item-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cart-qtd-stepper{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-full);overflow:hidden;background:var(--surface)}
.cart-qtd-btn{width:30px;height:30px;border:none;background:var(--surface-2);color:var(--blue);font-size:1rem;font-weight:700;cursor:pointer;line-height:1;transition:background var(--t-fast)}
.cart-qtd-btn:hover{background:var(--blue-soft)}
.cart-qtd-btn:disabled{opacity:.4;cursor:not-allowed}
.cart-qtd-val{width:34px;text-align:center;font-size:var(--fs-sm);font-weight:700}
.cart-remove{background:none;border:none;color:var(--danger);font-size:var(--fs-xs);font-weight:700;cursor:pointer;padding:2px}
.cart-remove:hover{text-decoration:underline}
.cart-total-row{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;margin-top:10px;border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,rgba(22,163,74,.4),rgba(37,99,235,.35)) border-box;border-radius:var(--r-md);font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;color:var(--success-2)}

/* Sucesso */
.success-box{text-align:center;padding:28px 10px}
.success-icon{font-size:3.2rem;margin-bottom:14px;display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:#f0fdf4;border:2px solid #bbf7d0;animation:pulseRing 2s ease-out infinite}
.success-title{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:700;color:var(--success-2);margin-bottom:8px}
.success-msg{color:var(--ink-2);font-size:var(--fs-body);line-height:1.65;margin-bottom:18px}
.success-detail{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:var(--r-md);padding:14px;margin-bottom:18px;font-size:var(--fs-sm);text-align:left;line-height:1.9}
.success-detail strong{color:var(--success-2)}
.btn-wpp{display:inline-flex;align-items:center;gap:8px;background:var(--wpp);color:#fff;text-decoration:none;padding:13px 26px;border-radius:var(--r-md);font-weight:800;font-size:var(--fs-body);box-shadow:0 4px 12px rgba(37,211,102,.35);transition:all var(--t-fast)}
.btn-wpp:hover{background:#1ebe5d;transform:translateY(-1px)}
.back-link{display:block;text-align:center;margin-top:16px;color:var(--blue);text-decoration:none;font-size:var(--fs-sm);font-weight:600}
.back-link:hover{text-decoration:underline}

/* Página de produto standalone (checkout.php) */
.container .prod-summary{display:flex;gap:14px;align-items:center}
.container .prod-thumb{width:80px;height:80px;border-radius:var(--r-md);object-fit:cover;flex-shrink:0;border:1px solid var(--line)}
.container .prod-thumb-placeholder{width:80px;height:80px;border-radius:var(--r-md);background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:2.2rem;flex-shrink:0}
.container .prod-info h2{font-size:var(--fs-body);font-weight:700;line-height:1.35;margin-bottom:4px;color:var(--ink)}
.container .prod-info .desc{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px;border:none;padding:0}
.container .prod-price{font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:var(--success)}

/* ── Formulário de cliente/entrega (inc_form_cliente_entrega.php) ── */
.delivery-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:0}
.delivery-opt{border:1.5px solid var(--line);border-radius:var(--r-md);padding:14px 12px;cursor:pointer;text-align:center;transition:all var(--t-fast);user-select:none;background:var(--surface)}
.delivery-opt input[type=radio]{display:none}
.delivery-opt.selected{border-color:transparent;background:linear-gradient(var(--blue-soft),var(--blue-soft)) padding-box,var(--grad-brand) border-box;box-shadow:var(--sh-1)}
.delivery-opt-icon{font-size:1.6rem;margin-bottom:6px}
.delivery-opt-label{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
.delivery-opt.selected .delivery-opt-label{color:var(--blue)}
.store-info{background:var(--blue-soft);border:1px solid #bfdbfe;border-radius:var(--r-md);padding:14px;margin-top:12px;font-size:var(--fs-sm);line-height:1.6}
.store-info .store-name{font-weight:800;color:var(--blue);font-size:var(--fs-body);margin-bottom:4px}
.store-info .store-hour{color:var(--ink-3);font-size:var(--fs-xs);margin-top:4px}
.field{margin-bottom:12px}
.field label{display:block;font-size:var(--fs-xs);font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.field input,.field select{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-size:var(--fs-body);font-family:inherit;transition:border-color var(--t-fast),box-shadow var(--t-fast);background:var(--surface);color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--blue-2);box-shadow:var(--ring)}
.field .hint{font-size:var(--fs-xs);color:var(--ink-3);margin-top:4px}
.field .hint.found{color:var(--success);font-weight:700}
.field-row{display:grid;gap:10px}
.field-row.cols-2{grid-template-columns:1fr 1fr}
.field-row.cols-3{grid-template-columns:2fr 1fr 1fr}
.frete-box{display:none;margin-top:12px;border-radius:var(--r-md);padding:13px 16px;background:#fffbeb;border:1px solid #fde68a}
.frete-box.visible{display:block}
.frete-box-title{font-size:var(--fs-xs);font-weight:800;color:#92400e;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.frete-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:4px}
.frete-row.total{margin-bottom:0;border-top:1px solid #fde68a;padding-top:8px;margin-top:6px;font-weight:900;font-size:var(--fs-body);color:var(--success-2)}
.frete-combinar{display:none;margin-top:12px;border-radius:var(--r-md);padding:13px 16px;background:#f0f9ff;border:1px solid #bae6fd;font-size:var(--fs-sm);color:#0369a1}
.frete-combinar.visible{display:block}
.alert-err{background:#fef2f2;border:1px solid #fecaca;color:var(--danger);border-radius:var(--r-md);padding:13px 15px;margin-bottom:14px;font-size:var(--fs-sm);font-weight:600}
@media(max-width:480px){
    .field-row.cols-3{grid-template-columns:1fr 1fr}
    .field-row.cols-3 .field:first-child{grid-column:1/-1}
}

/* ════════════════════════════════════════════════════════════════════
   PÁGINAS INSTITUCIONAIS
   ════════════════════════════════════════════════════════════════════ */
.page-wrap{max-width:860px;margin:0 auto;padding:clamp(22px,4vw,40px) var(--pad-x) 60px}
.page-card{background:var(--surface);border-radius:var(--r-lg);padding:clamp(22px,3.5vw,34px) clamp(18px,3vw,30px);box-shadow:var(--sh-1);border:1px solid var(--line)}
.page-card h1{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:700;letter-spacing:-.02em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin-bottom:6px;display:inline-block}
.page-updated{font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:24px}
.page-card h2{font-size:var(--fs-h3);font-weight:800;color:var(--ink);margin:26px 0 8px;display:flex;align-items:center;gap:8px}
.page-card h2::before{content:'';display:block;width:3px;height:15px;background:var(--grad-brand);border-radius:2px;flex-shrink:0}
.page-card h2:first-of-type{margin-top:0}
.page-card p,.page-card li{font-size:var(--fs-body);line-height:1.75;color:var(--ink-2)}
.page-card ul{padding-left:20px;margin-bottom:10px}
.page-card a{color:var(--blue);font-weight:600}
.page-card a:hover{text-decoration:underline}

/* ════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════ */
.site-footer{background:#0b1220;color:#94a3b8;font-size:var(--fs-sm);margin-top:48px;padding:0 0 28px;position:relative}
.site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-brand)}
.footer-top{max-width:var(--container);margin:0 auto;padding:36px var(--pad-x) 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:1px solid #1c2740}
.footer-logo-wrap{display:block;flex-shrink:0}
.footer-logo{height:38px;width:auto;display:block}
.footer-selos{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer-selos img{height:46px;width:auto;border-radius:6px;opacity:.92;transition:opacity var(--t-fast)}
.footer-selos img:hover{opacity:1}
.footer-inner{max-width:var(--container);margin:0 auto;padding:32px var(--pad-x) 0;display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:32px}
.footer-addr{line-height:1.9;color:#94a3b8;font-size:var(--fs-sm)}
.footer-col-title{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#e2e8f0;margin-bottom:12px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-links li a{color:#94a3b8;font-size:var(--fs-sm);transition:color var(--t-fast)}
.footer-links li a:hover{color:#60a5fa}
.footer-trust{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-trust li{color:#94a3b8;font-size:var(--fs-sm);line-height:1.4;display:flex;align-items:flex-start;gap:8px}
.footer-bottom{max-width:var(--container);margin:28px auto 0;padding:20px var(--pad-x) 0;border-top:1px solid #1c2740;text-align:center;font-size:var(--fs-xs);color:#64748b}
@media(max-width:1024px){.footer-inner{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
    .footer-top{padding:28px var(--pad-x) 22px;justify-content:center;text-align:center}
    .footer-inner{grid-template-columns:1fr;gap:26px;text-align:left}
    .footer-selos{justify-content:center}
    .footer-selos img{height:40px}
}

/* ════════════════════════════════════════════════════════════════════
   MODERNIZAÇÃO 2026-07 — "Navy Tech"
   Topo azul-marinho profundo (marca, selos, categorias, busca) sobre a
   arte gerada; área de produtos permanece clara; rodapé escuro refinado.
   Apenas acabamento visual — layout, posições e fluxos preservados.
   Reversível: backups/antes_modernizacao_20260718
   ════════════════════════════════════════════════════════════════════ */
:root{
    --navy-0:#060f1c;--navy-1:#0a1a2c;--navy-2:#10243a;
    --navy-surface:rgba(15,34,54,.9);--navy-soft:rgba(23,48,75,.72);
    --navy-line:rgba(130,175,220,.16);--navy-line-2:rgba(66,162,255,.5);
    --navy-text:#f7f9fc;--navy-text-2:#aab8c7;--navy-mute:#69798a;
    --tech-blue:#1687ff;--tech-cyan:#28c7e8;
    /* Ações de compra passam ao azul tecnológico (o violeta permanece
       como detalhe da marca em pills/gradientes institucionais) */
    --grad-cta:linear-gradient(135deg,#2563eb,#1d4ed8);
    --grad-cta-h:linear-gradient(135deg,#3b82f6,#2563eb);
}

/* ── Faixa da marca: banda hero escura com a arte tecnológica ── */
.site-brand{position:relative;background:#081527 url(img/band-topo-1920.webp) center/cover no-repeat;border-bottom:1px solid var(--navy-line)}
.site-brand::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,15,28,.5),rgba(6,15,28,.08) 45%,rgba(6,15,28,.42)),linear-gradient(rgba(6,15,28,.12),rgba(6,15,28,.3));pointer-events:none}
.brand-logo{position:relative;z-index:1}
.brand-logo img{width:min(100%,560px);filter:drop-shadow(0 4px 18px rgba(0,0,0,.45))}
@media(max-width:768px){.site-brand{background-image:url(img/band-topo-900.webp)}.brand-logo{padding:8px var(--pad-x)}.brand-logo img{width:min(100%,300px)}}

/* ── Selos de confiança: ilha de vidro sobre o navy contínuo ── */
.trust-bar{max-width:none;margin:0;padding:clamp(12px,2vw,20px) var(--pad-x);background:linear-gradient(180deg,#071322,var(--navy-1))}
.trust-bar-inner{max-width:calc(var(--container) - 2*var(--pad-x));margin:0 auto;background:linear-gradient(var(--navy-surface),var(--navy-surface)) padding-box,linear-gradient(135deg,rgba(66,162,255,.45),rgba(40,199,232,.28)) border-box;box-shadow:0 14px 34px rgba(0,0,0,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.trust-item .ti-icon{background:rgba(40,199,232,.1);border:1px solid rgba(40,199,232,.28)}
.trust-item-text strong{color:var(--navy-text)}
.trust-item-text span{color:var(--navy-text-2)}
.trust-divider{background:var(--navy-line)}
.trust-item{animation:cardIn .4s var(--ease) both}
.trust-item:nth-child(3){animation-delay:.06s}.trust-item:nth-child(5){animation-delay:.12s}.trust-item:nth-child(7){animation-delay:.18s}

/* ── Pills de categorias sobre o navy ── */
.cat-nav{background:linear-gradient(180deg,var(--navy-1),#0c1f33);border-top:1px solid var(--navy-line);border-bottom:1px solid var(--navy-line)}
.cat-nav-link{background:var(--navy-soft);border-color:var(--navy-line);color:var(--navy-text-2)}
.cat-nav-link:hover{color:#fff;border-color:var(--navy-line-2);background:rgba(22,135,255,.16)}
.cat-nav-link.active{color:#fff;background:var(--grad-brand);border-color:transparent;box-shadow:0 6px 18px rgba(37,99,235,.35)}

/* ── Barra sticky de busca: vidro navy ── */
.site-head{background:#081527;border-bottom:1px solid var(--navy-line);box-shadow:0 10px 30px rgba(3,8,16,.35)}
@supports ((backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px))){
    .site-head{background:rgba(7,19,34,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}
.header-back{color:var(--navy-text-2)}
.header-back:hover{color:var(--tech-cyan)}
.search-live{border-color:transparent;box-shadow:0 4px 16px rgba(3,8,16,.3)}
.search-live:focus{border-color:var(--tech-blue);box-shadow:0 0 0 3px rgba(22,135,255,.22),0 4px 16px rgba(3,8,16,.3)}
.head-account{background:var(--navy-soft);border-color:var(--navy-line);color:var(--navy-text-2)}
.head-account:hover{border-color:var(--navy-line-2);color:#fff;box-shadow:0 6px 18px rgba(22,135,255,.25)}
.head-cart{background:var(--navy-soft);border-color:var(--navy-line);color:var(--navy-text-2)}
.head-cart:hover{border-color:var(--navy-line-2);color:#fff;box-shadow:0 6px 18px rgba(22,135,255,.25)}
.head-cart-badge{border-color:#0a1a2c}
.head-ico{background:var(--navy-soft);border-color:var(--navy-line);color:var(--navy-text-2)}
.head-ico-wpp{color:#fff;background:var(--grad-buy);border-color:transparent}

/* ── Transição elegante do topo escuro para a vitrine clara ── */
.layout{position:relative}
.layout::before{content:'';position:absolute;top:calc(-1*clamp(14px,2.2vw,22px));left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(22,135,255,.3),rgba(40,199,232,.3),transparent);pointer-events:none}

/* ── Cards sem botão Comprar: o clique no próprio produto abre a janela
   (abrirDetalhesProduto no card inteiro). O aviso de estoque continua
   pelo selo sobre a foto. ── */
.card .btn-comprar,.card .btn-sem-estoque{display:none}
.card-price-wrap{padding-bottom:4px}

/* ── Janela do produto: verdes → azul-marinho do topo ── */
.modal-box .prod-price{color:#132b47}
.modal-box .btn-confirm{background:linear-gradient(180deg,#132b47,#0c1e35);border:1px solid rgba(130,175,220,.22);box-shadow:0 1px 2px rgba(6,15,28,.2),0 10px 24px rgba(6,15,28,.22),inset 0 1px 0 rgba(255,255,255,.07)}
.modal-box .btn-confirm:hover{background:linear-gradient(180deg,#18365a,#102843);border-color:rgba(66,162,255,.45);transform:translateY(-1px);box-shadow:0 2px 4px rgba(6,15,28,.22),0 16px 34px rgba(8,25,50,.32),inset 0 1px 0 rgba(255,255,255,.08)}
.modal-box .btn-confirm:disabled{background:#94a3b8;border-color:transparent;box-shadow:none;transform:none}
.modal-box .btn-add-cart{color:#132b47;border-color:#132b47}
.modal-box .btn-add-cart:hover{background:#eef4fb;box-shadow:0 8px 20px rgba(6,15,28,.14)}
.modal-box .qtd-btn{color:#132b47}

/* ── Banner da assistência técnica (seção Serviços) ── */
.svc-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;margin-bottom:18px;border:1px solid var(--navy-line);box-shadow:var(--sh-2);background:#0a1a2c}
.svc-hero img{display:block;width:100%;height:clamp(170px,26vw,300px);object-fit:cover;object-position:center right}
.svc-hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:clamp(16px,3vw,34px);background:linear-gradient(90deg,rgba(6,15,28,.82) 0%,rgba(6,15,28,.55) 42%,transparent 70%)}
.svc-hero-copy h2{font-family:var(--font-display);font-size:clamp(1.15rem,1rem + 1.2vw,1.7rem);font-weight:700;color:#fff;letter-spacing:-.01em;max-width:400px;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.svc-hero-copy p{font-size:var(--fs-sm);color:#c9d8ea;max-width:340px;line-height:1.5;text-shadow:0 1px 10px rgba(0,0,0,.5)}
@media(max-width:600px){.svc-hero img{height:190px;object-position:72% center}.svc-hero-copy{justify-content:flex-end;padding-bottom:14px;background:linear-gradient(rgba(6,15,28,.1),rgba(6,15,28,.78) 70%)}}

/* ── Bottom bar mobile: vidro navy ── */
.bottom-bar{background:rgba(7,19,34,.94);border-top:1px solid var(--navy-line);box-shadow:0 -8px 26px rgba(3,8,16,.4)}
@supports not ((backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px))){.bottom-bar{background:#081527}}
.bb-item{color:var(--navy-text-2)}
.bb-item:active{color:var(--tech-cyan)}
.bb-item.bb-wpp{color:#4ade80}
.bb-badge{border-color:#0a1a2c}

/* ── Rodapé: navy contínuo com brilho refinado ── */
.site-footer{background:linear-gradient(180deg,#0a1a2c,#060f1c 60%)}
.site-footer::before{background:linear-gradient(90deg,transparent,#2563eb,#28c7e8,transparent)}
.footer-top{border-bottom-color:var(--navy-line)}
.footer-bottom{border-top-color:var(--navy-line)}
.footer-logo{height:44px}

/* ── Fundo da área clara: textura tecnológica discreta ──
   Brilhos azuis desfocados + grade de pontos + ruído leve, tudo em CSS
   (sem requisições extras). Fica atrás de cards/superfícies brancas e
   nunca compete com as fotos dos produtos. ── */
body{position:relative}
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:
    radial-gradient(900px 520px at 88% 6%,rgba(37,99,235,.055),transparent 62%),
    radial-gradient(760px 480px at -6% 38%,rgba(40,199,232,.05),transparent 60%),
    radial-gradient(820px 560px at 55% 108%,rgba(124,58,237,.04),transparent 62%),
    var(--bg)}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:
    radial-gradient(rgba(28,65,100,.075) 1px,transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.16 0 0 0 0 0.3 0 0 0 0 0.5 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:26px 26px,160px 160px;
    mask-image:linear-gradient(180deg,transparent 0,#000 120px);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 120px)}
/* No embed do carrinho (iframe) o fundo precisa continuar transparente */
body.cart-embed::before,body.cart-embed::after{display:none}

/* ── Fechamento: 3 formas de recebimento (Loja / Motoboy / Correios) ── */
.delivery-opts-3{grid-template-columns:repeat(3,1fr)}
.delivery-opt-sub{font-size:var(--fs-xs);color:var(--ink-3);margin-top:3px;font-weight:600}
.delivery-opt.selected .delivery-opt-sub{color:var(--blue)}
@media(max-width:520px){
    .delivery-opts-3{grid-template-columns:1fr 1fr 1fr;gap:7px}
    .delivery-opts-3 .delivery-opt{padding:11px 6px}
    .delivery-opts-3 .delivery-opt-icon{font-size:1.3rem;margin-bottom:4px}
    .delivery-opts-3 .delivery-opt-label{font-size:.7rem}
    .delivery-opts-3 .delivery-opt-sub{font-size:.6rem}
}

/* Conta obrigatória para entrega em casa */
.login-gate{display:flex;flex-direction:column;gap:14px;margin-top:14px;padding:16px;border-radius:var(--r-lg);background:linear-gradient(135deg,#0c1e35,#132b47);border:1px solid rgba(130,175,220,.25);box-shadow:0 10px 26px rgba(6,15,28,.22)}
.login-gate-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.login-gate-icon{font-size:1.7rem}
.login-gate-copy{flex:1 1 220px;min-width:0}
.login-gate-copy strong{display:block;color:#f7f9fc;font-size:var(--fs-body)}
.login-gate-copy span{display:block;color:#aab8c7;font-size:var(--fs-xs);margin-top:3px;line-height:1.5}
.login-gate-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-gate{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:var(--r-md);background:#fff;color:#0c1e35;font-size:var(--fs-sm);font-weight:800;text-decoration:none;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2);transition:transform var(--t-fast),opacity var(--t-fast)}
.btn-gate:hover{transform:translateY(-1px)}
.btn-gate:disabled{opacity:.65;cursor:not-allowed;transform:none}
.btn-gate.ghost{background:rgba(255,255,255,.1);color:#e8f0fa;border:1px solid rgba(130,175,220,.35);box-shadow:none}
.logado-chip{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:var(--r-full);background:#dcfce7;color:#166534;font-size:.62rem;font-weight:800;text-transform:none;letter-spacing:0}
.login-gate-opcional{background:linear-gradient(135deg,#132b47,#0c1e35);box-shadow:0 6px 16px rgba(6,15,28,.16)}

/* Resumo compacto quando já logado — substitui o formulário completo */
.conta-resumo{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px;padding:12px 14px;border-radius:var(--r-md);background:var(--blue-soft);border:1px solid #bfdbfe}
.conta-resumo span{font-size:var(--fs-sm);color:var(--ink-2);font-weight:600;white-space:nowrap}

/* Login/cadastro inline dentro do gate (sem navegar p/ outra página) */
.inline-auth{display:flex;flex-direction:column;gap:10px;padding-top:2px}
.inline-auth .field{margin-bottom:0}
.inline-auth .field label{color:#c8d6e6}
.inline-auth .field input{background:rgba(255,255,255,.96);border-color:rgba(130,175,220,.3)}
.inline-auth .field input:focus{border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(66,162,255,.28)}
.inline-auth-err{min-height:1.1em;font-size:var(--fs-xs);color:#fca5a5;font-weight:700}
.inline-auth-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:480px){.inline-auth .field-row.cols-2{grid-template-columns:1fr}}

/* Correios: CEP + cotações */
.cep-row{display:flex;gap:8px}
.cep-row input{flex:1}
.btn-cep{flex:0 0 auto;min-height:42px;padding:0 16px;border:none;border-radius:10px;background:linear-gradient(180deg,#132b47,#0c1e35);color:#eaf1fa;font-size:var(--fs-sm);font-weight:800;cursor:pointer;border:1px solid rgba(130,175,220,.22);box-shadow:0 1px 2px rgba(6,15,28,.2),0 8px 20px rgba(6,15,28,.16);transition:all var(--t-fast)}
.btn-cep:hover{background:linear-gradient(180deg,#18365a,#102843);border-color:rgba(66,162,255,.45);transform:translateY(-1px)}
.correios-opcoes{margin-top:6px}
.correios-opt{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:12px 14px;margin-bottom:8px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--surface);cursor:pointer;transition:all var(--t-fast)}
.correios-opt:hover{border-color:var(--blue-2)}
.correios-opt.selected{border-color:transparent;background:linear-gradient(var(--blue-soft),var(--blue-soft)) padding-box,linear-gradient(135deg,#2563eb,#28c7e8) border-box;box-shadow:var(--sh-1)}
.correios-opt input{display:none}
.correios-opt .co-nome{font-size:var(--fs-sm);font-weight:800;color:var(--ink)}
.correios-opt .co-prazo{font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap}
.correios-opt .co-valor{font-family:var(--font-display);font-size:var(--fs-body);font-weight:700;color:#132b47;white-space:nowrap}
@media(max-width:480px){.correios-opt{grid-template-columns:1fr auto}.correios-opt .co-prazo{grid-column:1;margin-top:-4px}}

/* ── Acessibilidade / movimento reduzido ── */
@media (prefers-reduced-motion:reduce){
    .trust-item{animation:none}
}