/* ════════════════════════════════════════════════════════════════════
   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-hero:clamp(1.7rem,1.1rem + 3vw,3rem);
    --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; --pills-h:50px; --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 floatBlob{from{transform:translate(0,0) scale(1)}to{transform:translate(30px,-24px) scale(1.12)}}
@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)
   ════════════════════════════════════════════════════════════════════ */
.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-logo{display:flex;align-items:baseline;gap:6px;font-family:var(--font-display);font-weight:700;font-size:clamp(1.12rem,1rem + .6vw,1.4rem);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;padding:10px 0}
.head-logo span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.head-logo em{font-style:normal;font-family:var(--font-body);font-size:.58em;font-weight:800;color:#fff;background:var(--grad-brand);border-radius:6px;padding:3px 8px;margin-left:8px;transform:translateY(-2px);letter-spacing:.02em;display:inline-block}

.head-search{flex:1 1 220px;max-width:560px;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-logo-img{display:none}
.head-logo-img img{display:block;width:100%;height:auto}
.head-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--r-full);background:var(--surface);border:1.5px solid var(--line);color:var(--ink-2);transition:all var(--t-fast)}
.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 (sticky logo abaixo do header no desktop) */
.cat-nav{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(246,248,253,.92));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:sticky;top:var(--header-h);z-index:990;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}
    .cat-nav{display:none} /* no mobile as categorias ficam no botão "Categorias" da bottom bar */
    /* fixed em vez de sticky: alguns navegadores mobile falham com sticky;
       o padding-top do body é ajustado por JS no inc_header.php */
    .site-head{position:fixed;top:0;left:0;right:0}
    /* Mobile: logo em faixa na 1ª linha; busca + ícones (Início/Categorias/Carrinho/Wpp) na 2ª */
    .site-head-inner{row-gap:0;padding-top:8px;padding-bottom:9px}
    .head-logo{order:1;flex-basis:100%;padding:0;justify-content:center}
    .head-logo-text{display:none}
    .head-logo-img{display:block;width:100%;max-width:520px;margin:0 auto}
    .head-search{order:2;flex:1 1 120px;max-width:none;padding:8px 0 0}
    .head-actions{order:3;margin-left:0;gap:6px;padding-top:8px}
    .head-ico{display:inline-flex}
    .head-cart{width:40px;height:40px}
}

/* ════════════════════════════════════════════════════════════════════
   BANNER desktop (arte oficial) + HERO tech animado (mobile)
   ════════════════════════════════════════════════════════════════════ */
.topo-banner-desk{display:block;max-width:var(--container);margin:clamp(10px,1.6vw,18px) auto 0;padding:0 var(--pad-x)}
.topo-banner-desk img{display:block;width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--sh-2);transition:transform var(--t-med) var(--ease),box-shadow var(--t-med)}
.topo-banner-desk:hover img{transform:translateY(-2px);box-shadow:var(--sh-3)}
@media(max-width:768px){
    .topo-banner-desk{display:none} /* no mobile a marca já está na faixa do header + hero */
}
@media(min-width:769px){
    .hero-tech{display:none} /* no desktop o banner oficial substitui o hero em código */
}
.hero-tech{position:relative;overflow:hidden;background:var(--grad-soft);border-bottom:1px solid var(--line)}
.hero-tech::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%232563eb' stroke-width='1'%3E%3Cpath d='M10 60h30l10-10h25M60 10v25l10 10v30M110 60H85l-10 10H50'/%3E%3Ccircle cx='10' cy='60' r='2.5' fill='%232563eb'/%3E%3Ccircle cx='60' cy='10' r='2.5' fill='%237c3aed'/%3E%3Ccircle cx='110' cy='60' r='2.5' fill='%237c3aed'/%3E%3Ccircle cx='75' cy='45' r='2' fill='%2306b6d4'/%3E%3C/g%3E%3C/svg%3E");opacity:.07;pointer-events:none}
.hero-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;pointer-events:none}
.hero-blob.b1{width:380px;height:380px;background:#93c5fd;top:-140px;left:6%;animation:floatBlob 16s ease-in-out infinite alternate}
.hero-blob.b2{width:320px;height:320px;background:#c4b5fd;bottom:-160px;right:8%;animation:floatBlob 19s ease-in-out infinite alternate-reverse}
.hero-inner{position:relative;max-width:var(--container);margin:0 auto;padding:clamp(28px,5.5vw,58px) var(--pad-x);display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(10px,1.6vw,16px)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:var(--r-full);padding:6px 14px;font-size:var(--fs-xs);font-weight:800;color:var(--ink-2);letter-spacing:.05em;text-transform:uppercase;backdrop-filter:blur(4px)}
.hero-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--grad-brand);box-shadow:0 0 8px rgba(124,58,237,.8)}
.hero-title{font-family:var(--font-display);font-size:var(--fs-hero);font-weight:700;letter-spacing:-.03em;line-height:1.08;color:var(--ink)}
.hero-title span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-sub{font-size:clamp(.88rem,.82rem + .4vw,1.05rem);color:var(--ink-2);max-width:560px;line-height:1.6}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.hero-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:var(--r-full);font-weight:800;font-size:var(--fs-body);transition:transform var(--t-fast),box-shadow var(--t-fast)}
.hero-cta.primary{background:var(--grad-brand);color:#fff;box-shadow:var(--glow-blue)}
.hero-cta.primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(59,130,246,.4)}
.hero-cta.ghost{background:rgba(255,255,255,.8);color:var(--ink);border:1.5px solid var(--line);backdrop-filter:blur(4px)}
.hero-cta.ghost:hover{transform:translateY(-2px);border-color:var(--violet-2);color:var(--violet);box-shadow:var(--glow-violet)}

/* ════════════════════════════════════════════════════════════════════
   TRUST BAR
   ════════════════════════════════════════════════════════════════════ */
.trust-bar{max-width:var(--container);margin:clamp(12px,2vw,20px) auto 0;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) + var(--pills-h) + 14px);max-height:calc(100vh - var(--header-h) - var(--pills-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:var(--sh-1);overflow:hidden;position:sticky;top:calc(var(--header-h) + var(--pills-h) + 14px);border:1px solid var(--line)}
.sidebar-title{padding:14px 16px;font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);background:var(--surface-2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px}
.cat-list{list-style:none}
.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}
.cat-list li a:hover{background:var(--blue-soft);color:var(--blue)}
.cat-list li a.active{background:var(--grad-soft);color:var(--blue);font-weight:700;border-left:3px solid var(--blue-2)}
.cat-list li a svg{margin-left:auto;flex-shrink:0}
.cat-tree-l2{list-style:none;margin-left:12px;border-left:2px solid var(--line);background:#fafbfe}
.cat-tree-l2 li>a{display:flex;align-items:center;padding:8px 14px;font-size:calc(var(--fs-sm) - .03rem);color:var(--ink-2);transition:all var(--t-fast);gap:5px}
.cat-tree-l2 li>a:hover{background:var(--blue-soft);color:var(--blue)}
.cat-tree-l2 li>a.active{background:var(--blue-soft);color:var(--blue);font-weight:700;border-left:3px solid var(--blue-2);margin-left:-2px;padding-left:13px}
.cat-tree-l3{list-style:none;margin-left:12px;border-left:2px solid #dbe6fb;background:#f6f9ff}
.cat-tree-l3 li>a{display:flex;align-items:center;padding:7px 12px;font-size:var(--fs-xs);color:var(--ink-3);transition:all var(--t-fast);gap:5px}
.cat-tree-l3 li>a:hover{background:#e5efff;color:var(--blue)}
.cat-tree-l3 li>a.active{background:#e5efff;color:var(--blue);font-weight:700;border-left:3px solid var(--blue-2);margin-left:-2px;padding-left:11px}

@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)}

/* Chips de subcategoria */
.subcats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.subcat-chip{padding:7px 15px;border:1.5px solid var(--line);border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);background:var(--surface);cursor:pointer;transition:all var(--t-fast);white-space:nowrap;display:block}
.subcat-chip:hover{border-color:var(--blue-2);color:var(--blue);background:var(--blue-soft);transform:translateY(-1px)}
.subcat-chip.active{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:var(--glow-blue)}
.subcat-chip.neta{font-size:var(--fs-xs);padding:6px 12px;opacity:.9}
@media(max-width:768px){
    .subcats{display:none} /* no mobile as subcategorias ficam no menu "Categorias" da bottom bar */
}

/* Section titles */
.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:860px;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:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:20px;align-items:start}
.prod-gallery{min-width:0}
.prod-main-photo{width:100%;aspect-ratio:1;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%;aspect-ratio:1;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;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}
.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}
    .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}
}

/* ════════════════════════════════════════════════════════════════════
   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}
}