/* premium.css — acabamento de boutique. Carregado DEPOIS do CSS da página. Só visual: não altera lógica. */
:root{--sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--goldl:#e7c98a;--ivory:#fffaf8;--sh:0 10px 34px color-mix(in srgb,var(--vinho) 12%,transparent);--ease:cubic-bezier(.2,.8,.2,1)}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--ivory);-webkit-font-smoothing:antialiased}
::selection{background:color-mix(in srgb,var(--rose) 30%,#fff)}

/* Cabeçalho */
.store-header{background:#fffaf8f2;border-bottom:1px solid color-mix(in srgb,var(--gold) 35%,#fff);box-shadow:0 1px 0 #fff inset}
.brand{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.2em;color:var(--vinho)}
.brand .crown{color:var(--gold);font-size:26px}
.brand b{font:700 10.5px var(--sans);letter-spacing:.42em;color:var(--rose-dark);margin-top:2px}
.icon-btn,.pill{font-family:var(--sans);font-size:13px;letter-spacing:.04em;transition:.2s var(--ease)}
.icon-btn{background:var(--vinho);color:#fff;border-color:var(--vinho)}
.pill:hover{background:color-mix(in srgb,var(--rose) 10%,#fff)}
.icon-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb,var(--vinho) 30%,transparent)}
#cartCount{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;border-radius:99px;background:var(--goldl);color:var(--vinho);font-size:11px}

/* Hero */
.hero{position:relative;overflow:hidden;padding:76px 20px 70px;background:radial-gradient(900px 420px at 85% 0,color-mix(in srgb,var(--goldl) 40%,transparent),transparent 60%),linear-gradient(120deg,#fbeef3,var(--ivory) 55%,#f6e3eb)}
.hero h1{letter-spacing:-.01em}
.hero p{font-size:16.5px;color:#7a6570}
.eyebrow{font-family:var(--sans)}
.eyebrow::before{content:"";display:inline-block;width:34px;height:1px;background:var(--gold);vertical-align:middle;margin-right:12px}
.cta{background:linear-gradient(135deg,var(--rose-dark),var(--vinho));font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:16px 28px;box-shadow:0 10px 24px color-mix(in srgb,var(--vinho) 28%,transparent);transition:.25s var(--ease)}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px color-mix(in srgb,var(--vinho) 36%,transparent)}
.cta.ghost{background:transparent;box-shadow:none;border-color:var(--gold);color:var(--vinho)}
.hero-art{box-shadow:0 30px 60px color-mix(in srgb,var(--vinho) 24%,transparent),inset 0 0 0 7px #ffffff14,inset 0 0 0 8px var(--goldl);animation:floaty 7s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-8px)}}

/* Faixa de diferenciais */
.perks{background:var(--vinho);border:0}
.perks-in{color:#f6e8ee;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding:15px 20px}
.perks li::before{color:var(--goldl)}
.perks a{color:var(--goldl)}

/* Vitrine */
.section-head h2{font-size:clamp(30px,5vw,44px);font-weight:600}
.section-head h2::after{content:"";display:block;width:56px;height:2px;margin-top:10px;background:linear-gradient(90deg,var(--gold),transparent)}
.search{background:#fff;font-family:var(--sans);transition:.2s}
.search:focus{outline:0;border-color:var(--rose);box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 14%,transparent)}
.filters{scrollbar-width:none}.filters::-webkit-scrollbar{display:none}
.filter{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.03em;transition:.2s var(--ease)}
.filter:hover{border-color:var(--rose)}
.filter.active{background:var(--vinho);border-color:var(--vinho);box-shadow:0 6px 16px color-mix(in srgb,var(--vinho) 25%,transparent)}
.grid{gap:24px}
.product{border:0;border-radius:20px;box-shadow:0 2px 14px #5b344010;animation:rise .55s var(--ease) both}
.product:nth-child(2){animation-delay:.05s}.product:nth-child(3){animation-delay:.1s}.product:nth-child(4){animation-delay:.15s}.product:nth-child(n+5){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.product:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.photo img{transition:transform .7s var(--ease)}.product:hover .photo img{transform:scale(1.05)}
.badge{background:var(--vinho);color:var(--goldl);letter-spacing:.14em;font-size:10px;padding:7px 11px;box-shadow:0 4px 12px #0003}
.count{backdrop-filter:blur(4px)}
.p-info{padding:16px 16px 18px}
.category{color:var(--gold);font-weight:700;letter-spacing:.16em;font-size:10px}
.p-info h3{font:600 20px/1.2 var(--serif);color:var(--vinho);margin:4px 0 6px}
.price{font:700 18px var(--sans);color:var(--ink)}
.avista{color:var(--rose-dark);font-weight:600}
.add{background:#fff;border:1.5px solid color-mix(in srgb,var(--gold) 55%,#fff);color:var(--vinho);border-radius:12px;font-size:13px;letter-spacing:.03em;transition:.2s}
.add:hover:not(:disabled){background:color-mix(in srgb,var(--goldl) 25%,#fff)}
.buy{background:linear-gradient(135deg,var(--rose-dark),var(--vinho));border-radius:12px;font-size:13px;letter-spacing:.03em;transition:.2s var(--ease)}
.buy:hover:not(:disabled){box-shadow:0 8px 20px color-mix(in srgb,var(--vinho) 30%,transparent)}
.opt{border-radius:11px;font-family:var(--sans)}
.sw[aria-checked=true]{border-color:var(--vinho);box-shadow:0 0 0 3px color-mix(in srgb,var(--rose) 18%,transparent)}
.empty{font:italic 500 22px var(--serif);color:var(--rose-dark);padding:70px 20px}
.product.hl{box-shadow:0 0 0 3px var(--gold),var(--sh)}

/* Sacola */
.modal-bg{backdrop-filter:blur(4px);background:#2b1620b3}
.modal-bg.open .cart{animation:slide .35s var(--ease)}
@keyframes slide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.cart{background:var(--ivory)}
.cart-top h2{font:600 32px var(--serif);color:var(--vinho)}
.cart-row img{border-radius:12px}
.total{font:700 20px var(--serif);color:var(--vinho);border-top:1px solid color-mix(in srgb,var(--gold) 40%,#fff);margin-top:6px}
.checkout h3{font:600 24px var(--serif);color:var(--vinho)}
.checkout input,.checkout textarea{background:#fff;font-family:var(--sans)}
.checkout input:focus,.checkout textarea:focus{outline:0;border-color:var(--rose);box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 14%,transparent)}
.checkout button[type=submit]{background:linear-gradient(135deg,var(--rose-dark),var(--vinho));box-shadow:0 10px 24px color-mix(in srgb,var(--vinho) 28%,transparent)}

/* Rodapé */
footer{background:linear-gradient(180deg,#4a1d31,#34121f);color:#e9d3dc;border:0;padding:54px 20px 90px}
footer .brand{color:#fff}footer .brand .crown{color:var(--goldl)}
footer .brand b{color:var(--goldl)}
.footer-note{color:var(--goldl);font-size:26px}
footer a{color:var(--goldl);border-bottom:1px solid #e7c98a55;text-decoration:none;padding-bottom:2px}

/* WhatsApp flutuante */
.wa-float{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:20;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 10px 26px #25d36663,0 2px 6px #0003;transition:.25s var(--ease)}
.wa-float:hover{transform:scale(1.08)}
.wa-float[hidden]{display:none}
.wa-float svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:ping 2.6s ease-out infinite}
@keyframes ping{to{transform:scale(1.5);opacity:0}}

@media(max-width:800px){.grid{gap:12px}.hero{padding:44px 16px 40px}.p-info h3{font-size:17px}.perks-in{font-size:11px;gap:6px 16px}.product{border-radius:16px}.brand{font-size:15px;letter-spacing:.14em}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ETAPA 1 — listagem estilo Mercado Livre: card limpo, toque abre o produto */
#products .opts,#products .add,#products .buy,#products .market-stock,#products .product-model{display:none!important}
#products .product .photo{cursor:pointer;aspect-ratio:3/4}
#products .product .photo img{pointer-events:none}
#products .product::after{content:"Retirada em Pilão Arcado";display:block;padding:0 10px 12px;font-size:11px;font-weight:700;color:#168b58}
#products .p-info{padding-bottom:6px}
#products{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:801px){#products{grid-template-columns:repeat(4,minmax(0,1fr))}}