@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --background: #f8fafc;
  --foreground: #0f172a;
  --card: #ffffff;
  --primary: #1e3a8a; /* Deep Blue */
  --primary-fg: #f8fafc;
  --secondary: #3b82f6; /* Royal Blue */
  --secondary-fg: #ffffff;
  --muted: #f1f5f9;
  --muted-fg: #64748b;
  --accent: #2563eb; /* Active Blue */
  --accent-fg: #ffffff;
  --border: #e2e8f0;
  --radius: 0.75rem;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--background); color:var(--foreground); max-width:448px; margin:0 auto; }
h1,h2,h3 { font-family:'Playfair Display',serif; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; font-family:inherit; }
input { font-family:inherit; }

/* Header */
.header { position:sticky; top:0; z-index:50; background:var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.header-top { display:flex; align-items:center; justify-content: space-between; padding:12px 16px; min-height: 60px; }
.logo-link { display: flex; align-items: center; }
.header-top .logo { height:40px; width: auto; max-width: 180px; object-fit:contain; filter: brightness(0) invert(1); }
.header-icons { display:flex; align-items:center; gap:8px; color:var(--primary-fg); }
.header-icons svg, .header-btn svg { width:24px !important; height:24px !important; fill:none; stroke:currentColor; stroke-width:2; display: block; }
.header-btn { background: none; color: var(--primary-fg); padding: 4px; display: flex; align-items: center; justify-content: center; min-width: 36px; }
.cart-badge { position:relative; background: none; color: var(--primary-fg); padding: 4px; display: flex; align-items: center; justify-content: center; min-width: 36px; }
.cart-badge span { position:absolute; top:0; right:0; background: #ef4444; color: #fff; font-size:10px; font-weight:700; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); border: 1.5px solid var(--primary); }
.search-bar { padding:4px 16px 16px; background: var(--primary); }
.search-bar div { display:flex; align-items:center; background:rgba(255,255,255,0.15); border-radius:10px; padding:10px 16px; border: 1px solid rgba(255,255,255,0.1); }
.search-bar input { flex:1; border:none; outline:none; font-size:14px; background:transparent; color: #fff; font-weight: 500; }
.search-bar input::placeholder { color: rgba(255,255,255,0.7); }
.search-bar svg { width:20px; height:20px; color:rgba(255,255,255,0.8); fill:none; stroke:currentColor; stroke-width:2.5; }

.category-nav {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.category-nav::-webkit-scrollbar { display: none; }
.category-nav a {
  text-decoration: none;
  color: var(--muted-fg);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  background: var(--muted);
  border-radius: 50px;
  border: 1px solid var(--border);
  transition: 0.2s;
}
.category-nav a.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Hero / Banner */
.hero { position:relative; width:100%; overflow:hidden; border-radius:var(--radius); margin:16px; width:calc(100% - 32px); box-shadow:var(--shadow); }
.hero img { width:100%; height:auto; display:block; object-fit: cover; }
.hero-overlay { display: none; } /* User wants no text/buttons on banner */

/* Frete bar */
.frete-bar { margin:16px; padding:12px 16px; display:flex; align-items:center; gap:12px; border-radius:12px; background:var(--muted); }
.frete-bar svg { width:28px; height:28px; color:var(--primary); fill:none; stroke:currentColor; stroke-width:2; flex-shrink:0; }
.frete-bar .title { font-size:14px; font-weight:600; }
.frete-bar .sub { font-size:12px; color:var(--muted-fg); }

/* Product Section */
.section { padding:0 16px; margin-bottom:24px; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.section-header h2 { font-size:18px; color:var(--primary); font-weight:700; }
.section-header a { font-size:14px; color:var(--primary); font-weight:500; }
.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.product-card { background:var(--card); border-radius:12px; border:1px solid var(--border); padding:12px; text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.product-card .badge { position:absolute; top:8px; left:8px; z-index:1; font-size:12px; font-weight:700; padding:4px 12px; border-radius:50px; background:var(--primary); color:var(--primary-fg); }
.product-card .img-wrap { position:relative; }
.product-card img { width:100%; height:160px; object-fit:contain; border-radius:8px; }
.product-card .name { font-size:12px; margin-top:8px; font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.price-old { text-decoration:line-through; font-size:14px; color:var(--muted-fg); margin-top:4px; }
.price-new { font-size:18px; font-weight:700; color:var(--accent); }

/* Footer */
.footer { background:var(--card); border-top:1px solid var(--border); margin-top:24px; }
.footer-features { padding:32px 24px; }
.footer-feature { display:flex; align-items:flex-start; gap:16px; margin-bottom:24px; }
.footer-feature:last-child { margin-bottom:0; }
.footer-feature svg { width:28px; height:28px; color:var(--primary); flex-shrink:0; margin-top:4px; fill:none; stroke:currentColor; stroke-width:2; }
.footer-feature .title { font-size:14px; font-weight:600; }
.footer-feature .desc { font-size:12px; color:var(--muted-fg); margin-top:2px; }
.footer-bottom { border-top:1px solid var(--border); padding:24px; }
.footer-bottom .section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.footer-bottom p { font-size:12px; }
.footer-links { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.footer-links a { font-size:12px; color:var(--primary); font-weight:500; }

/* Product Detail */
.detail-back { display:flex; align-items:center; gap:4px; font-size:14px; color:var(--primary); padding:16px; background:none; font-weight: 500; }
.detail-img { background: #fff; border-radius:12px; padding:8px; display:flex; align-items:center; justify-content:center; margin:0 16px; position: relative; border: 1px solid var(--border); }
.image-gallery-container { width: 100%; position: relative; overflow: hidden; border-radius: 8px; }
.image-gallery { display: flex; overflow-x: auto; gap: 0; padding: 0; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.image-gallery::-webkit-scrollbar { display: none; }
.image-gallery img { width: 100%; flex-shrink: 0; scroll-snap-align: start; height: 320px; object-fit: contain; background: white; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.2); color: white; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items:center; justify-content:center; z-index: 10; cursor: pointer; border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(4px); }
.carousel-btn svg { width: 20px; height: 20px; stroke-width: 3; }
.carousel-btn.prev { left: 8px; }
.carousel-btn.next { right: 8px; }
.carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-fg); opacity: 0.3; transition: all 0.3s; }
.carousel-dot.active { width: 20px; border-radius: 10px; background: var(--primary); opacity: 1; }
.detail-content { padding:0 16px; }
.detail-content h1 { font-size:20px; margin-top:16px; line-height:1.3; }
.savings-badge { display:inline-flex; align-items:center; background:var(--foreground); color:var(--card); padding:4px 12px; border-radius:50px; font-size:12px; font-weight:700; margin-top:8px; }
.savings-badge .val { color:var(--accent); margin-left:4px; }
.qty-row { margin-top:16px; display:flex; align-items:center; gap:8px; }
.qty-ctrl { display:flex; align-items:center; border:1px solid var(--border); border-radius:8px; }
.qty-ctrl button { padding:8px 12px; background:none; font-size:16px; font-weight:700; color:var(--foreground); }
.qty-ctrl span { padding:0 12px; font-weight:600; }
.buy-btn { flex:1; background:var(--primary); color:var(--primary-fg); padding:12px; border-radius:8px; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; gap:8px; }
.card-flags { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.card-flags span { font-size:10px; padding:4px 8px; border:1px solid var(--border); border-radius:4px; font-weight:600; text-transform:uppercase; color:var(--muted-fg); }
.guarantees { margin-top:16px; border:1px solid var(--border); border-radius:12px; padding:12px; }
.guarantee { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; }
.guarantee:last-child { margin-bottom:0; }
.guarantee svg { width:16px; height:16px; color:var(--primary); flex-shrink:0; margin-top:2px; fill:none; stroke:currentColor; stroke-width:2; }
.guarantee p { font-size:12px; }
.related { margin-top:24px; }
.related h2 { font-size:18px; color:var(--primary); font-weight:700; margin-bottom:12px; }
.sticky-buy { position:fixed; bottom:0; left:0; right:0; z-index:50; background:var(--primary); padding:12px; }
.sticky-buy button { width:100%; max-width:448px; margin:0 auto; display:flex; background:var(--secondary); color:var(--secondary-fg); padding:12px; border-radius:8px; font-weight:700; font-size:14px; align-items:center; justify-content:center; gap:8px; }

/* Cart Drawer */
.cart-overlay { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,0.4); display:none; }
.cart-overlay.active { display:flex; }
.cart-panel { margin-left:auto; width:100%; max-width:448px; background:var(--card); height:100%; display:flex; flex-direction:column; }
.cart-header { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--border); }
.cart-header svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; }
.cart-items { flex:1; overflow-y:auto; padding:16px; }
.cart-item { display:flex; gap:12px; margin-bottom:16px; }
.cart-item img { width:64px; height:64px; object-fit:contain; border-radius:8px; border:1px solid var(--border); }
.cart-item .info { flex:1; }
.cart-item .name { font-size:14px; font-weight:500; }
.cart-qty { display:flex; align-items:center; gap:12px; margin-top:4px; }
.cart-qty button { background:none; color:var(--muted-fg); font-size:14px; padding:0; }
.cart-footer { border-top:1px solid var(--border); padding:16px; }
.cart-total { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.cart-total .label { font-weight:600; }
.cart-total .val { font-weight:700; font-size:18px; }
.checkout-btn { width:100%; background:var(--primary); color:var(--primary-fg); padding:12px; border-radius:8px; font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px; }
.continue-btn { width:100%; border:1px solid var(--border); color:var(--foreground); padding:12px; border-radius:8px; font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:center; gap:8px; background:none; }

/* Checkout */
.checkout-header { background:var(--primary); padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
.checkout-header .logo { height:36px; object-fit:contain; }
.checkout-header .secure { display:flex; align-items:center; gap:4px; color:var(--primary-fg); font-size:12px; font-weight:600; }
.back-btn { display:flex; align-items:center; gap:4px; font-size:14px; color:var(--primary); padding:12px 16px; font-weight:500; background:none; }
.info-bar { background:var(--secondary); color:var(--secondary-fg); font-size:12px; padding:8px 16px; text-align:center; }
.summary-toggle { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); background:none; width:100%; }
.summary-items { padding:12px 16px; background:var(--muted); }
.summary-item { display:flex; justify-content:space-between; font-size:14px; margin-bottom:4px; }
.checkout-form { padding:16px; flex:1; }
.step-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.step-header h2 { font-size:20px; font-weight:700; }
.step-header span { font-size:14px; color:var(--muted-fg); }
.step-desc { font-size:14px; color:var(--muted-fg); margin-bottom:16px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
.form-group label .opt { color:var(--muted-fg); font-weight:400; }
.form-group input { width:100%; border:1px solid var(--border); border-radius:8px; padding:12px; font-size:14px; outline:none; background:var(--card); }
.form-group input:focus { box-shadow:0 0 0 3px rgba(30,58,110,0.15); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.submit-btn { width:100%; background:var(--accent); color:var(--accent-fg); padding:16px; border-radius:12px; font-weight:700; font-size:18px; margin-top:24px; }
.frete-options { margin-top:24px; }
.frete-options .label { font-weight:600; margin-bottom:12px; }
.frete-option { width:100%; border:1px solid var(--border); border-radius:12px; padding:12px; display:flex; align-items:center; gap:12px; margin-bottom:8px; background:none; text-align:left; cursor:pointer; }
.frete-option.active { border-color:var(--primary); background:rgba(30,58,110,0.05); }
.frete-radio { width:20px; height:20px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.frete-option.active .frete-radio { border-color:var(--primary); }
.frete-radio .dot { width:10px; height:10px; border-radius:50%; background:var(--primary); display:none; }
.frete-option.active .frete-radio .dot { display:block; }
.frete-info { flex:1; }
.frete-info .name { font-size:14px; font-weight:600; }
.frete-info .days { font-size:12px; color:var(--muted-fg); }
.frete-price { font-size:14px; font-weight:700; }
.frete-price.free { color:var(--primary); }
.payment-section { text-align:center; padding:48px 0; }
.payment-section svg { width:48px; height:48px; color:var(--primary); margin:0 auto 16px; fill:none; stroke:currentColor; stroke-width:2; }
.payment-section h2 { font-size:20px; font-weight:700; }
.payment-section p { font-size:14px; color:var(--muted-fg); margin-top:8px; }
.payment-flags { display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.payment-flags span { font-size:10px; padding:6px 12px; border:1px solid var(--border); border-radius:4px; font-weight:600; color:var(--muted-fg); }
.checkout-bottom { background:var(--primary); padding:16px; display:flex; align-items:center; gap:12px; }
.checkout-bottom svg { width:28px; height:28px; color:var(--primary-fg); flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; }
.checkout-bottom .title { font-size:14px; font-weight:700; color:var(--primary-fg); }
.checkout-bottom .sub { font-size:12px; color:rgba(255,255,255,0.8); }

/* Utility */
.hidden { display:none !important; }