/* ===== RESET & TOKENS ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#121212;--bg2:#1a1a1a;--surface:#222;--surface2:#2a2a2a;
  --border:#2e2e2e;--text1:#f0f0f0;--text2:#999;--text3:#666;
  --pink:#fe2c55;--green:#00b578;--gold:#ffbb00;--green:#00b578;
  --font:'Inter',system-ui,-apple-system,sans-serif;
}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text1);
  max-width:480px;margin:0 auto;overflow-x:hidden;padding-bottom:72px;
  -webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
button{font-family:inherit;border:none;cursor:pointer}

/* ===== HEADER ===== */
.header{position:sticky;top:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:10px 12px;background:var(--bg);
  border-bottom:1px solid var(--border)}
.header-left{display:flex;align-items:center;gap:10px;flex:1}
.header-left svg{color:var(--text2);flex-shrink:0}
.header-search{flex:1;background:var(--surface2);border:1px solid var(--border);
  border-radius:20px;padding:8px 14px;font-size:14px;color:var(--text2);outline:none}
.header-icons{display:flex;gap:16px}
.header-icons svg{width:24px;height:24px;color:var(--text1)}

/* ===== TABS ===== */
.tabs-wrapper{position:sticky;top:51px;z-index:99;background:var(--bg)}
.tabs{display:flex;position:relative;padding:0 12px}
.tab{flex:1;text-align:center;padding:12px 0;font-size:13px;font-weight:600;
  color:var(--text2);cursor:pointer;transition:color .2s}
.tab.active{color:var(--text1)}
.tab-indicator{position:absolute;bottom:0;height:2px;background:var(--pink);
  border-radius:2px;transition:left .3s,width .3s}
.tabs-border{height:1px;background:var(--border)}

/* ===== CAROUSEL ===== */
.carousel-wrapper{position:relative;background:#000;overflow:hidden}
.carousel-track{display:flex;transition:transform .35s ease}
.carousel-slide{min-width:100%;position:relative}
.carousel-slide img{width:100%;aspect-ratio:1/1;object-fit:cover}
.carousel-dots{position:absolute;bottom:12px;right:14px;background:rgba(0,0,0,.55);
  color:#fff;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:600}

/* ===== FLASH SALE / LIGHTNING BANNER ===== */
.banner-relampago{
  position:relative;width:100%;height:64px;
  font-family:var(--font);color:white;overflow:hidden;border-radius:0;
}
.fundo-esquerdo{
  position:absolute;inset:0;background-color:#ea4a59;z-index:1;
}
.fundo-direito{
  position:absolute;top:0;right:0;bottom:0;left:48%;
  background:linear-gradient(90deg,#f55548,#ee7d35);
  clip-path:polygon(60px 0,100% 0,100% 100%,0 100%);
  z-index:2;
}
.raio-central{
  position:absolute;top:0;bottom:0;left:48%;width:80px;
  background:linear-gradient(180deg,#fbe864 0%,#f6893c 45%,#ea4a59 90%);
  clip-path:polygon(55% 0,100% 0,45% 48%,75% 48%,15% 100%,0% 100%,45% 52%,20% 52%);
  z-index:3;
}
.conteudo{
  position:relative;z-index:4;display:flex;
  justify-content:space-between;align-items:center;
  height:100%;padding:0 14px;
}
.bloco-preco{display:flex;flex-direction:column;justify-content:center}
.preco-linha-topo{display:flex;align-items:center;gap:6px}
.tag-desconto{
  background:white;color:#c4263b;font-size:13px;font-weight:700;
  padding:2px 5px;border-radius:3px;line-height:1.1;
}
.moeda{font-size:14px;font-weight:600;margin-top:4px}
.valor{font-size:26px;font-weight:700;letter-spacing:-0.5px}
.icone-cupom{width:20px;height:18px;margin-left:2px}
.preco-antigo{
  font-size:12px;color:rgba(255,255,255,0.5);
  text-decoration:line-through;margin-top:-1px;padding-left:2px;
}
.bloco-timer{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.titulo-oferta{display:flex;align-items:center;gap:4px;font-size:13px;opacity:0.95}
.icone-raio-branco{width:9px;height:13px}
.tempo-restante{font-size:14px;font-weight:600}

/* ===== INSTALLMENT ROW ===== */
.installment-row{
  display:flex;align-items:center;gap:6px;padding:8px 16px;
  font-size:13px;color:var(--text1);background:var(--bg);
  border-bottom:1px solid var(--border);
}
.installment-row svg{width:16px;height:16px;flex-shrink:0;color:var(--text2)}

/* ===== COUPON ROW ===== */
.coupon-row{
  display:flex;align-items:center;gap:8px;padding:8px 16px;
  font-size:13px;background:var(--bg);border-bottom:1px solid var(--border);
  overflow-x:auto;white-space:nowrap;
}
.coupon-tag{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(254,44,85,.1);color:var(--pink);
  border:1px dashed var(--pink);border-radius:4px;
  padding:4px 10px;font-size:12px;font-weight:600;flex-shrink:0;
}

/* ===== PRODUCT INFO ===== */
.product-info{padding:14px 16px 10px;background:var(--bg);border-bottom:1px solid var(--border)}
.product-title{display:flex;gap:10px;align-items:flex-start}
.product-title span{font-size:15px;font-weight:700;line-height:1.45;flex:1}
.bookmark-icon{width:22px;height:22px;color:var(--text2);flex-shrink:0;margin-top:2px;cursor:pointer}
.meta-row{display:flex;align-items:center;gap:6px;margin-top:6px;
  font-size:13px;color:var(--text2);flex-wrap:wrap}
.stars{color:var(--gold);font-size:14px;letter-spacing:-1px}
.rating-val{font-weight:700;color:var(--text1)}
.dot{color:var(--text3)}

/* ===== SHIPPING ROW ===== */
.shipping-row{
  display:flex;align-items:center;gap:6px;padding:8px 16px;
  font-size:13px;color:#00b578;background:var(--bg);
  border-bottom:1px solid var(--border);
}
.shipping-row svg{width:14px;height:14px;flex-shrink:0}
.shipping-row .date{color:var(--text2)}

/* ===== OPTIONS ===== */
.options-section{background:var(--bg);border-bottom:8px solid var(--border)}
.options-grid{display:flex;gap:8px;flex-wrap:wrap}
.option-chip{display:flex;align-items:center;gap:6px;padding:6px 12px 6px 6px;
  border-radius:20px;border:1.5px solid var(--border);font-size:13px;
  color:var(--text1);cursor:pointer;transition:all .2s}
.option-chip img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.option-chip.selected{border-color:var(--pink);background:rgba(254,44,85,.08)}
.size-option{padding:8px 18px;border-radius:20px;border:1.5px solid var(--border);
  font-size:13px;color:var(--text1);cursor:pointer;transition:all .2s}
.size-option.selected{border-color:var(--pink);background:rgba(254,44,85,.08);font-weight:600}

/* ===== SECTIONS ===== */
.section{background:var(--bg);border-bottom:8px solid var(--border);padding:0}
.section-row{display:flex;align-items:center;padding:14px 16px;gap:10px;border-bottom:1px solid var(--border)}
.section-row:last-child{border-bottom:none}
.section-label{font-size:13px;font-weight:600;white-space:nowrap}
.section-value{flex:1;font-size:13px;color:var(--text2);text-align:right}
.chevron{width:16px;height:16px;color:var(--text3);flex-shrink:0}

/* ===== PROTECTION ===== */
.protection-section{background:var(--bg);border-bottom:8px solid var(--border);padding:14px 16px}
.protection-header{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin-bottom:10px}
.protection-items{display:flex;flex-wrap:wrap;gap:8px}
.protection-item{font-size:12px;color:var(--text2);background:var(--surface2);
  padding:5px 12px;border-radius:16px}

/* ===== REVIEWS ===== */
.reviews-section{background:var(--bg);border-bottom:8px solid var(--border);padding:16px}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.section-header h2{font-size:16px;font-weight:700}
.see-more{font-size:13px;color:var(--text2);cursor:pointer}
.review-filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.review-filter{background:var(--surface2);border:1px solid var(--border);border-radius:16px;
  padding:6px 12px;font-size:12px;color:var(--text2);white-space:nowrap;flex-shrink:0}
.review-filter.active{background:rgba(254,44,85,.1);color:var(--pink);border-color:var(--pink)}
.rating-overview{display:flex;gap:20px;padding:12px 0;align-items:center}
.big-rating{font-size:40px;font-weight:900;line-height:1}
.rating-bars{flex:1;display:flex;flex-direction:column;gap:5px}
.bar-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text2)}
.bar-track{flex:1;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;background:var(--text1);border-radius:3px;width:0;transition:width 1s ease}
.bar-count{width:28px;text-align:right;font-size:11px}
.review-photos-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.review-photo{width:80px;height:80px;border-radius:8px;overflow:hidden;flex-shrink:0;
  position:relative;cursor:pointer}
.review-photo img{width:100%;height:100%;object-fit:cover}
.review-photo-overlay{position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.6));padding:4px 6px}
.review-photo-user{font-size:10px;color:#fff;font-weight:500}
.review-card{background:var(--surface);border-radius:12px;padding:14px;margin-bottom:10px}
.reviewer-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.reviewer-avatar{width:32px;height:32px;border-radius:50%;background:var(--surface2);flex-shrink:0}
.reviewer-info{flex:1;min-width:0}
.reviewer-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reviewer-meta{font-size:11px;color:var(--text2)}
.review-stars{color:var(--gold);font-size:14px;letter-spacing:-1px;margin-bottom:4px}
.review-date{font-size:11px;color:var(--text3);margin-bottom:6px}
.review-text{font-size:13px;line-height:1.55;color:var(--text1);margin-bottom:8px}
.review-images{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.review-img{width:72px;height:72px;border-radius:6px;object-fit:cover;cursor:pointer}
.review-actions{display:flex;gap:12px}
.review-action-btn{display:flex;align-items:center;gap:4px;background:none;
  color:var(--text2);font-size:12px;padding:4px 0}
.review-action-btn svg{width:16px;height:16px}

/* ===== LIGHTBOX ===== */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.92);
  display:none;align-items:center;justify-content:center;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:85vh;border-radius:8px}
.lightbox-close{position:absolute;top:16px;right:16px;background:none;
  color:#fff;font-size:24px;z-index:1001;cursor:pointer}

/* ===== DESCRIPTION ===== */
.desc-section{background:var(--bg);padding:16px;border-bottom:8px solid var(--border)}
.desc-title{font-size:16px;font-weight:700;margin-bottom:12px}
.desc-block{border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden}
.desc-block-header{display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;cursor:pointer;background:var(--surface)}
.desc-block-header h3{font-size:14px;font-weight:700}
.desc-chevron{font-size:12px;color:var(--text2);transition:transform .3s}
.desc-block:not(.open) .desc-block-body{display:none}
.desc-block:not(.open) .desc-chevron{transform:rotate(180deg)}
.desc-block-body{padding:14px}
.spec-list{display:flex;flex-direction:column;gap:8px}
.spec-item{display:flex;justify-content:space-between;font-size:13px;gap:10px}
.spec-name{color:var(--text2);flex-shrink:0}
.spec-val{color:var(--text1);text-align:right}
.desc-text{font-size:13px;line-height:1.6;color:var(--text1)}
.desc-text p{margin-bottom:8px}
.desc-text strong{color:var(--cyan);font-weight:700}

/* ===== BOTTOM BAR ===== */
.bottom-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;z-index:100;background:var(--bg);
  border-top:1px solid var(--border);display:flex;align-items:center;
  padding:10px 12px;gap:8px}
.bottom-icon{display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10px;color:var(--text2);padding:0 8px;cursor:pointer;background:none}
.bottom-icon svg{width:22px;height:22px}
.btn-cart{flex:1;padding:12px 0;border-radius:24px;font-size:14px;font-weight:700;
  background:var(--surface2);color:var(--text1);border:1.5px solid var(--border);
  text-align:center;cursor:pointer}
.btn-buy{flex:1;padding:12px 0;border-radius:24px;font-size:14px;font-weight:700;
  background:var(--pink);color:#fff;text-align:center;cursor:pointer;position:relative;overflow:hidden}
.btn-buy .sub{display:block;font-size:10px;font-weight:500;opacity:.85;margin-top:-2px}

/* ===== ANIMATIONS ===== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s}
.reveal.visible{opacity:1;transform:none}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:0;height:0}

/* ===== MODAL / BOTTOM SHEET ===== */
.modal-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.6);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-sheet{
  width:100%;max-width:480px;
  background:var(--bg2);
  border-radius:16px 16px 0 0;
  padding:0;
  transform:translateY(100%);
  transition:transform .35s ease;
  max-height:85vh;overflow-y:auto;
}
.modal-overlay.open .modal-sheet{transform:translateY(0)}

/* Modal product row */
.modal-product-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:20px 16px 14px;
}
.modal-product-thumb{
  width:64px;height:64px;border-radius:8px;
  object-fit:cover;flex-shrink:0;
}
.modal-product-info{flex:1;min-width:0}
.modal-price-row{
  display:flex;align-items:center;gap:6px;
  margin-bottom:2px;
}
.modal-discount-tag{
  background:var(--pink);color:#fff;
  font-size:12px;font-weight:700;
  padding:2px 6px;border-radius:3px;
}
.modal-price{
  font-size:14px;font-weight:600;color:var(--pink);
}
.modal-price-old{
  font-size:12px;color:var(--text3);
  text-decoration:line-through;margin-bottom:4px;
}
.modal-coupon-inline{
  display:inline-flex;align-items:center;
  background:rgba(254,44,85,.1);color:var(--pink);
  border-radius:4px;padding:3px 8px;
  font-size:11px;font-weight:600;
}
.modal-close-btn{
  background:none;color:var(--text2);
  padding:4px;flex-shrink:0;cursor:pointer;
  margin-top:-4px;
}

/* Modal coupon countdown row */
.modal-coupon-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  font-size:13px;color:var(--text2);
}
.modal-coupon-timer{
  color:var(--pink);font-weight:700;font-size:14px;
  font-variant-numeric:tabular-nums;
}

/* Modal section title */
.modal-section-title{
  padding:14px 16px 8px;
  font-size:14px;font-weight:600;color:var(--text1);
}

/* Modal model grid */
.modal-model-grid{
  display:flex;gap:10px;padding:0 16px 14px;flex-wrap:wrap;
}
.modal-model-card{
  width:120px;border-radius:10px;overflow:hidden;
  border:2px solid var(--border);cursor:pointer;
  transition:border-color .2s;
  position:relative;
}
.modal-model-card.selected{
  border-color:var(--pink);
}
.modal-model-card img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
}
.modal-model-label{
  display:block;text-align:center;
  font-size:12px;font-weight:600;
  padding:6px 4px;
  color:var(--pink);
  background:var(--surface);
}

/* Modal color chips */
.modal-color-grid{
  display:flex;gap:8px;padding:0 16px 10px;flex-wrap:wrap;
}
.modal-color-chip{
  display:flex;align-items:center;gap:6px;padding:6px 12px 6px 6px;
  border-radius:20px;border:1.5px solid var(--border);font-size:13px;
  color:var(--text1);cursor:pointer;transition:all .2s;
}
.modal-color-chip img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.modal-color-chip.selected{border-color:var(--pink);background:rgba(254,44,85,.08)}

/* Modal size options */
.modal-size-grid{
  display:flex;gap:8px;padding:0 16px 10px;flex-wrap:wrap;
}
.modal-size-chip{
  padding:8px 18px;border-radius:20px;border:1.5px solid var(--border);
  font-size:13px;color:var(--text1);cursor:pointer;transition:all .2s;
}
.modal-size-chip.selected{border-color:var(--pink);background:rgba(254,44,85,.08);font-weight:600}

/* Modal quantity row */
.modal-qty-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border-top:1px solid var(--border);
}
.modal-qty-label{font-size:14px;font-weight:600;color:var(--text1)}
.modal-qty-controls{display:flex;align-items:center;gap:0}
.modal-qty-btn{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:none;color:var(--text2);
  border:1px solid var(--border);
  font-size:18px;cursor:pointer;
}
.modal-qty-btn:first-child{border-radius:4px 0 0 4px}
.modal-qty-btn:last-child{border-radius:0 4px 4px 0}
.modal-qty-val{
  width:42px;height:34px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;color:var(--text1);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--surface);
}

/* Modal action buttons */
.modal-actions{
  display:flex;gap:10px;
  padding:12px 16px 24px;
  padding-bottom:max(24px,env(safe-area-inset-bottom));
}
.modal-btn-cart{
  flex:1;padding:12px 0;border-radius:24px;
  font-size:14px;font-weight:700;line-height:1.2;
  background:var(--surface2);color:var(--text1);
  border:1.5px solid var(--border);
  text-align:center;cursor:pointer;
}
.modal-btn-buy{
  flex:1;padding:12px 0;border-radius:24px;
  font-size:14px;font-weight:700;
  background:var(--pink);color:#fff;
  text-align:center;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.modal-btn-sub{
  display:block;font-size:10px;font-weight:500;
  opacity:.85;margin-top:-2px;color:#fff;
}