:root{
  --bg: #0B63C7;
  --card: #062651;
  --muted:#a8b0bf;
  --text:#ffffff;
  --line:rgba(255,255,255,.10);
  --brand:#28c76f;
  --brand2:#4aa3ff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Arial, Helvetica, sans-serif}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

.topbar{border-bottom:1px solid var(--line);background:#0b0c0f}
.topbar__content{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;padding:10px 0;color:var(--muted);font-size:13px}
.topbar__sep{opacity:.4}
.topbar__link{color:#dbe8ff;text-decoration:none}
.topbar__link:hover{text-decoration:underline}

.header{padding:18px 0;border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(74,163,255,.08), rgba(0,0,0,0))}
.header__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center}
@media(max-width:980px){.header__grid{grid-template-columns:1fr;}}
.brand{display:flex;gap:14px;align-items:center}
.brand__logo{width:62px;height:62px;border-radius:14px;border:1px solid var(--line);object-fit:cover;background:var(--card)}
.brand__text h1{margin:0;font-size:26px;letter-spacing:.5px}
.brand__text p{margin:4px 0 0;color:var(--muted)}

.hero{width:100%}
.hero__slider{position:relative;border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden}
.hero__frame{aspect-ratio: 16/9;display:flex;align-items:center;justify-content:center}
.hero__frame img{width:100%;height:100%;object-fit:cover;display:block}
.hero__nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.45);color:#fff;font-size:26px;cursor:pointer}
.hero__nav:hover{background:rgba(0,0,0,.65)}
.hero__nav--left{left:10px}
.hero__nav--right{right:10px}
.hero__dots{display:flex;gap:8px;justify-content:center;margin-top:8px}
.hero__dots button{width:10px;height:10px;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer}
.hero__dots button[aria-current="true"]{background:var(--brand2);border-color:transparent}

.main{display:grid;grid-template-columns:1fr 360px;gap:18px;padding:18px 0 34px}
@media(max-width:980px){.main{grid-template-columns:1fr}.cart{position:static}}

.notice{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.notice{grid-template-columns:1fr}}
.notice__card{border:1px solid var(--line);background:var(--card);border-radius:18px;padding:16px}
.notice__card h2{margin:0 0 8px;font-size:18px}
.notice__card ul{margin:10px 0 0;padding-left:18px;color:#e8ecf6}
.notice__actions{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.check{display:flex;gap:10px;align-items:flex-start;color:#e8ecf6}
.check input{margin-top:3px}

.frete label{display:block;margin-top:10px;color:#e8ecf6}
.frete input{width:100%;margin-top:6px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#0b0c0f;color:#fff}
.frete__row{display:grid;grid-template-columns:1fr 140px;gap:12px;align-items:end}
.frete__result{border:1px solid var(--line);background:#0b0c0f;border-radius:12px;padding:10px 12px}
.frete__result span{display:block;color:var(--muted);font-size:12px}
.frete__result strong{font-size:16px}

.catalog{margin-top:18px}
.catalog__head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:0 0 12px}
.catalog__head h2{margin:0;font-size:20px}
.catalog__tools{display:flex;gap:10px;flex-wrap:wrap}
.input{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#0b0c0f;color:#fff;min-width:220px}
select.input{min-width:200px}

.products{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px}
@media(max-width:820px){.products{grid-template-columns:1fr}}

.product{border:1px solid var(--line);background:var(--card);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.product__media{position:relative;background:#0b0c0f}
.product__media img{width:100%;height:210px;object-fit:cover;display:block}
.product__tag{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.55);border:1px solid var(--line);padding:6px 10px;border-radius:999px;font-size:12px}
.product__carousel{position:absolute;right:10px;top:10px;display:flex;gap:6px}
.product__carousel button{width:34px;height:34px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.55);color:#fff;font-size:18px;cursor:pointer}
.product__carousel button:hover{background:rgba(0,0,0,.75)}
.product__body{padding:14px}
.product__title{margin:0 0 6px;font-size:18px}
.product__desc{margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.3}
.price{display:flex;gap:10px;align-items:baseline}
.price__now{font-size:18px;font-weight:700}
.price__old{font-size:13px;color:var(--muted);text-decoration:line-through}

.product__actions{display:flex;gap:10px;align-items:center;margin-top:12px}
.btn{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#0b0c0f;color:#fff;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn--primary{background:var(--brand);border-color:transparent;color:#06120b;font-weight:700}
.btn--ghost{background:transparent}
.qty{display:flex;gap:8px;align-items:center;color:#e8ecf6}
.qty button{width:34px;height:34px;border-radius:12px}

.cart{position:sticky;top:12px;height:max-content}
.cart__card{border:1px solid var(--line);background:var(--card);border-radius:18px;padding:16px;margin-bottom:14px}
.cart__card h2{margin:0 0 10px;font-size:18px}
.cart__items{display:flex;flex-direction:column;gap:10px;min-height:24px}
.cartitem{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed rgba(255,255,255,.12);padding-bottom:10px}
.cartitem:last-child{border-bottom:none;padding-bottom:0}
.cartitem__left{min-width:0}
.cartitem__name{font-size:13px;line-height:1.2}
.cartitem__meta{color:var(--muted);font-size:12px;margin-top:4px}
.cartitem__right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cartitem__controls{display:flex;gap:6px;align-items:center}
.cartitem__controls button{width:30px;height:30px;border-radius:10px}
.cart__totals{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.row{display:flex;justify-content:space-between;align-items:center;margin:7px 0;color:#e8ecf6}
.row--big strong{font-size:18px}
.muted{color:var(--muted);font-size:12px;margin:10px 0 0}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.pay__actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.pay__qr{border:1px solid var(--line);border-radius:18px;background:#0b0c0f;padding:12px;margin-top:10px;text-align:center}
.pay__qr img{width:100%;max-width:280px;border-radius:12px;border:1px solid var(--line)}

.footer{border-top:1px solid var(--line);padding:22px 0;color:#e8ecf6}
.footer__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px}
@media(max-width:820px){.footer__grid{grid-template-columns:1fr}}
.footer h3{margin:0 0 8px}
.footer p{margin:0 0 8px;color:var(--muted)}
.footer__bottom{border-top:1px solid var(--line);margin-top:14px;padding-top:12px;color:var(--muted);text-align:center}

/* Pix QR layout */
.pay__qrgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.pay__qrcol img{width:100%;max-width:260px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#fff}
.pix__code{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.12);padding:10px;background:rgba(0,0,0,.25);color:var(--text);resize:vertical}
@media (max-width: 880px){.pay__qrgrid{grid-template-columns:1fr}}

@media (max-width: 360px){ .catalog-grid{grid-template-columns: 1fr;} }
@media (max-width: 480px){ .hero-carousel{height: 260px;} }



/* --- Ajustes Profissionais --- */
:root{
  --bg: #0b73c9; /* azul bb (aprox da logo) */
  --card: rgba(0,0,0,.25);
  --stroke: rgba(255,255,255,.12);
  --text: #eaf4ff;
  --muted: rgba(234,244,255,.75);
  --accent: #58d0ff;
}

body{ background: var(--bg) !important; color: var(--text) !important; }

.container{ max-width: 1200px; margin: 0 auto; padding: 0 14px; }

.catalog_grid{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px !important;
}
@media (max-width: 1024px){
  .catalog_grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px){
  .catalog_grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.product_card, .card, .panel{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

.product_card img{
  width:100%;
  height: 220px;
  object-fit: contain;
  background: rgba(0,0,0,.12);
  border-radius: 12px;
  image-orientation: from-image;
}
@media (max-width:760px){
  .product_card img{ height: 180px; }
}

.topbar_logo img{ width: 70px !important; height: 70px !important; }

.floating_cart_btn{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  border-radius: 999px;
  padding: 12px 14px;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--stroke);
  color: var(--text);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  gap:10px;
}
.floating_cart_btn span.badge{
  background: var(--accent);
  color:#001018;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
}

.modal_backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
  display:none;
}
.modal{
  position: fixed;
  right: 14px;
  top: 14px;
  bottom: 14px;
  width: min(420px, calc(100% - 28px));
  background: rgba(3,16,34,.92);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  z-index: 9999;
  display:none;
  overflow:auto;
  padding: 14px;
  backdrop-filter: blur(12px);
}
.modal_header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom: 10px;
}
.btn{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
}
.btn_primary{
  background: var(--accent);
  color: #001018;
  border-color: transparent;
  font-weight: 800;
}
.small{ font-size: 12px; color: var(--muted); }