/* ==================== IMPORTS ==================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary: #0060FF;
  --primary-dark: #0047CC;
  --primary-light: #EBF2FF;
  --primary-glow: rgba(0, 96, 255, 0.15);
  --secondary: #080C1A;
  --accent: #25D366;
  --accent-hover: #1ebe59;
  --white: #ffffff;
  --bg-body: #F0F2F7;
  --bg-surface: #F7F8FC;
  --text-main: #0D1117;
  --text-muted: #5A6478;
  --text-light: #9BA3B4;
  --border-light: rgba(0,0,0,0.07);
  --border-medium: rgba(0,0,0,0.1);
  --card-bg: #ffffff;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-hover: 0 24px 48px rgba(0,0,0,0.10), 0 8px 20px rgba(0,0,0,0.06);
  --shadow-xl: 0 32px 64px rgba(0,0,0,0.12), 0 12px 24px rgba(0,0,0,0.06);
  --status-warning: #f59e0b;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --border-radius-2xl: 24px;
  --danger: #ef4444;
  --danger-light: #fef2f2;

  --apple-start: #f5f5f7;
  --apple-end: #e8e8ef;
  --apple-glow: rgba(160, 160, 180, 0.2);
  --apple-accent: #6e6e73;
  --redmi-start: #EBF2FF;
  --redmi-end: #D6E8FF;
  --redmi-glow: rgba(0, 96, 255, 0.18);
  --redmi-accent: #0060FF;
  --xiaomi-start: #FFF3E8;
  --xiaomi-end: #FFE5CC;
  --xiaomi-glow: rgba(255, 110, 0, 0.18);
  --xiaomi-accent: #FF6200;
  --poco-start: #1A1A1A;
  --poco-end: #2A2A2A;
  --poco-glow: rgba(255, 214, 0, 0.2);
  --poco-accent: #FFD600;
  --samsung-start: #EEF0FF;
  --samsung-end: #E0E4FF;
  --samsung-glow: rgba(60, 80, 220, 0.18);
  --samsung-accent: #3C50DC;
  --moto-start: #EDF0F5;
  --moto-end: #DDE3EE;
  --moto-glow: rgba(30, 80, 130, 0.15);
  --moto-accent: #1E5082;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  background: var(--bg-body);
  color: var(--text-main);
  line-height: 1.5;
}

body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* ==================== HEADER ==================== */
header {
  background: linear-gradient(135deg, #060A18 0%, #0B1230 50%, #0D1535 100%);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
}

header::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(0, 96, 255, 0.12) 0%, rgba(0, 60, 200, 0.06) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

header::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -80px;
  width: 400px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(80, 140, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 28px 20px;
  position: relative;
  z-index: 1;
  gap: 16px;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 0;
}

.logo-frame {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.logo-ring {
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  border: 1px solid rgba(0, 96, 255, 0.4);
  background: linear-gradient(135deg, rgba(0, 96, 255, 0.08), transparent);
  pointer-events: none;
  box-shadow: 0 0 12px rgba(0, 96, 255, 0.15);
}

.main-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
  display: block;
}

.header-divider-v {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.12), transparent);
  margin: 0 18px;
  flex-shrink: 0;
}

.store-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.store-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.6px;
}

.store-name .brand-accent {
  color: #4488FF;
  background: linear-gradient(135deg, #4488FF, #66AAFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.store-tagline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.8px;
  margin: 0;
  text-transform: uppercase;
}

.cart-icon-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
  margin-left: auto;
  backdrop-filter: blur(8px);
}

.cart-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0, 96, 255, 0.2);
}

.cart-icon-btn svg {
  width: 20px;
  height: 20px;
  stroke: rgba(255,255,255,0.85);
}

.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: linear-gradient(135deg, var(--accent), #1ebe59);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.4);
  animation: badgePop 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
  border: 1.5px solid #080C1A;
}

@keyframes badgePop {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.header-glow-line {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 96, 255, 0.5) 30%, rgba(100, 170, 255, 0.6) 50%, rgba(0, 96, 255, 0.5) 70%, transparent 100%);
  position: relative;
  z-index: 1;
}

/* ==================== CARRINHO SIDEBAR ==================== */
.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.cart-overlay.active {
  opacity: 1;
  visibility: visible;
}

.cart-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  height: 100%;
  background: var(--white);
  z-index: 1600;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
}

.cart-sidebar.active {
  transform: translateX(0);
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  background: var(--white);
}

.cart-header h2 {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-main);
  margin: 0;
  letter-spacing: -0.3px;
}

.cart-header h2 svg {
  stroke: var(--primary);
}

.cart-close-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s;
}

.cart-close-btn:hover {
  background: var(--bg-body);
  color: var(--text-main);
  border-color: var(--border-medium);
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.cart-items::-webkit-scrollbar { width: 4px; }
.cart-items::-webkit-scrollbar-track { background: transparent; }
.cart-items::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.cart-empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.5; }
.cart-empty p { font-size: 0.95rem; font-weight: 700; color: var(--text-main); margin-bottom: 6px; letter-spacing: -0.2px; }
.cart-empty span { font-size: 0.78rem; color: var(--text-muted); }

.cart-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.cart-item-image {
  width: 68px;
  height: 68px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
}

.cart-item-image img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }

.cart-item-info { flex: 1; min-width: 0; }

.cart-item-name {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.cart-item-specs {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cart-item-spec {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}

.cart-item-bottom { display: flex; align-items: center; justify-content: space-between; }
.cart-item-price { font-size: 0.92rem; font-weight: 800; color: var(--primary); letter-spacing: -0.3px; }

.cart-item-quantity { display: flex; align-items: center; gap: 8px; }

.cart-qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--primary);
  transition: all 0.18s;
  font-weight: 600;
}

.cart-qty-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }
.cart-qty-value { font-size: 0.82rem; font-weight: 700; min-width: 20px; text-align: center; }

.cart-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s;
  font-size: 0.68rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cart-item-remove:hover { color: var(--danger); background: var(--danger-light); }

.cart-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
  background: var(--white);
}

.cart-summary { margin-bottom: 16px; }

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.cart-summary-row span:last-child { font-weight: 500; color: var(--text-main); }

.cart-total {
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--border-light);
}

.cart-total span:last-child {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  letter-spacing: -0.4px;
}

.cart-checkout-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent), #1ebe59);
  color: white;
  border: none;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.25);
  letter-spacing: -0.2px;
}

.cart-checkout-btn:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35); }

.cart-clear-btn {
  width: 100%;
  padding: 10px;
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 0.73rem;
  cursor: pointer;
  margin-top: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: color 0.2s;
  font-weight: 500;
}

.cart-clear-btn:hover { color: var(--danger); }

.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #0D1117;
  color: white;
  padding: 12px 22px;
  border-radius: 14px;
  font-size: 0.83rem;
  font-weight: 600;
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.38s cubic-bezier(0.34, 1.2, 0.64, 1);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  letter-spacing: -0.2px;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.toast.success {
  background: linear-gradient(135deg, #0D2E1A, #133D22);
  border-color: rgba(37, 211, 102, 0.25);
}

/* ==================== FILTROS ==================== */
.filter-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 14px 20px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.04);
}

.filter-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  width: 16px;
  height: 16px;
  transition: color 0.2s;
}

#searchInput {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border: 1.5px solid var(--border-light);
  background: var(--bg-surface);
  font-size: 0.83rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
  border-radius: 12px;
  color: var(--text-main);
  font-weight: 500;
}

#searchInput::placeholder { color: var(--text-light); font-weight: 400; }

#searchInput:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(0, 96, 255, 0.08);
}

#searchInput:focus + .search-icon,
.search-wrapper:focus-within .search-icon { color: var(--primary); }

.filter-groups-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.filter-groups {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 7px 16px;
  border: 1.5px solid var(--border-light);
  background: var(--white);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.2, 0, 0, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.1px;
}

.filter-btn:hover {
  border-color: rgba(0, 96, 255, 0.3);
  color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 96, 255, 0.1);
}

.filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(0, 96, 255, 0.25);
}

.brand-logo {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.filter-icon { font-size: 0.8rem; }

@media (max-width: 768px) {
  .filter-groups {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .filter-groups::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0; padding: 6px 12px; font-size: 0.73rem; }
  .filter-btn span:not(.filter-icon) { display: none; }
  .brand-logo { width: 17px; height: 17px; }
}

.resultados-bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px 4px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.contador-texto {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: -0.1px;
}

.ordenacao-wrapper {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
}

#ordenacaoSelect {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-main);
  background: var(--white);
  border: 1.5px solid var(--border-light);
  border-radius: 10px;
  padding: 6px 28px 6px 12px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6478' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: all 0.2s;
}

#ordenacaoSelect:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 96, 255, 0.08);
}

.skeleton-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px 40px 24px;
}

@keyframes shimmer {
  0% { background-position: -800px 0; }
  100% { background-position: 800px 0; }
}

.shimmer {
  background: linear-gradient(90deg, #f0f2f7 25%, #e4e8f0 50%, #f0f2f7 75%);
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 8px;
}

.skeleton-card {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.skeleton-img { height: 220px; width: 100%; border-radius: 0; }

.skeleton-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-line { height: 12px; }
.skeleton-price { height: 30px; width: 50%; margin-top: 6px; }
.skeleton-btn { height: 44px; width: 100%; border-radius: 12px; margin-top: 8px; }

.img-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 85%, var(--glow-color, rgba(0,102,255,0.10)) 0%, transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 0;
}

.produto:hover .img-glow { opacity: 1; }
.img-container img { position: relative; z-index: 1; }
.img-container > * { position: relative; z-index: 1; }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 16px 24px 40px 24px;
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 1024px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; gap: 14px; padding: 16px 16px 32px 16px; } }

.produto {
  background: var(--card-bg);
  border: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow 0.38s cubic-bezier(0.2, 0, 0, 1), border-color 0.38s cubic-bezier(0.2, 0, 0, 1), transform 0.38s cubic-bezier(0.2, 0, 0, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--border-radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.produto:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(0, 96, 255, 0.15);
}

.img-container {
  cursor: pointer;
  position: relative;
  padding: 28px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 230px;
  overflow: hidden;
}

.img-container.brand-apple { background: linear-gradient(145deg, var(--apple-start) 0%, var(--apple-end) 100%); }
.img-container.brand-iphone { background: linear-gradient(145deg, #f2f2f7 0%, #e8e8ef 100%); }
.img-container.brand-redmi { background: linear-gradient(145deg, var(--redmi-start) 0%, var(--redmi-end) 100%); }
.img-container.brand-xiaomi { background: linear-gradient(145deg, var(--xiaomi-start) 0%, var(--xiaomi-end) 100%); }
.img-container.brand-poco { background: linear-gradient(145deg, #1E1E1E 0%, #2A2A2A 100%); }
.img-container.brand-samsung { background: linear-gradient(145deg, var(--samsung-start) 0%, var(--samsung-end) 100%); }
.img-container.brand-motorola, .img-container.brand-moto { background: linear-gradient(145deg, var(--moto-start) 0%, var(--moto-end) 100%); }
.img-container:not([class*="brand-"]) { background: linear-gradient(145deg, #f8fafc 0%, #f0f4f9 100%); }

.img-container::before {
  content: attr(data-brand);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5.5rem;
  font-weight: 900;
  letter-spacing: -2px;
  color: rgba(0, 0, 0, 0.05);
  pointer-events: none;
  z-index: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
  text-transform: uppercase;
  user-select: none;
}

.img-container.brand-poco::before { color: rgba(255, 214, 0, 0.1); }

.img-container img {
  width: 100%;
  max-height: 190px;
  object-fit: contain;
  transition: transform 0.45s cubic-bezier(0.2, 0, 0, 1);
  filter: drop-shadow(0 16px 24px rgba(0,0,0,0.1));
  position: relative;
  z-index: 1;
}

.produto:hover .img-container img { transform: scale(1.06) translateY(-4px); }

.detail-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(10, 12, 26, 0.65);
  backdrop-filter: blur(10px);
  padding: 6px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: all 0.25s ease;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.68rem;
  font-weight: 600;
  color: white;
  font-family: 'Plus Jakarta Sans', sans-serif;
  z-index: 10;
  letter-spacing: -0.1px;
}

.img-container:hover .detail-btn { opacity: 1; }
.detail-btn:hover { background: var(--primary); border-color: transparent; transform: scale(1.02); }
.detail-btn svg { width: 13px; height: 13px; }

@media (max-width: 768px) {
  .detail-btn { opacity: 0.85; padding: 5px 10px; font-size: 0.63rem; }
  .img-container { min-height: 195px; padding: 22px 20px; }
  .img-container img { max-height: 160px; }
}

.badges-wrapper {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 5;
}

.type-badge {
  padding: 4px 9px;
  font-size: 0.57rem;
  font-weight: 700;
  border-radius: 8px;
  letter-spacing: 0.3px;
  text-align: center;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  width: fit-content;
  text-transform: uppercase;
}

.novo-badge { background: rgba(0, 96, 255, 0.92); color: var(--white); }
.usado-badge { background: rgba(37, 211, 102, 0.92); color: var(--white); }
.promo-badge { background: rgba(245, 158, 11, 0.92); color: var(--white); }
.desconto-badge { background: rgba(239, 68, 68, 0.92); color: var(--white); font-size: 0.65rem; font-weight: 800; }
.encomenda-badge { background: rgba(124, 58, 237, 0.92); color: var(--white); }

.card-body { flex: 1; display: flex; flex-direction: column; padding: 0; }
.card-footer { display: flex; align-items: center; gap: 8px; padding: 0 16px 18px 16px; }

.produto h3 {
  font-size: 0.97rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 16px 16px 4px 16px;
  letter-spacing: -0.35px;
  line-height: 1.3;
}

.ram-info {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0 16px 6px 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-weight: 500;
}

.variacoes-hint {
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.63rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.1px;
}

.bateria-info {
  display: flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 600;
  color: #059669; background: #ecfdf5; border: 1px solid #a7f3d0;
  padding: 3px 9px; border-radius: 8px; margin: 0 16px 8px 16px; width: fit-content;
}

.bateria-info svg { flex-shrink: 0; color: #059669; }

.specs-gb {
  background: var(--primary-light);
  color: var(--primary);
  padding: 4px 10px;
  font-weight: 700;
  font-size: 0.68rem;
  display: inline-block;
  width: fit-content;
  margin: 0 16px 14px 16px;
  border-radius: 8px;
  letter-spacing: -0.1px;
}

.preco-container { padding: 0 16px 14px 16px; margin-top: auto; }
.preco-antigo { text-decoration: line-through; color: #b0bccc; font-size: 0.68rem; margin-bottom: 2px; font-weight: 500; }
.preco-wrapper { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.preco-label { font-size: 0.66rem; color: var(--text-muted); font-weight: 600; }
.preco {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.05em;
  line-height: 1;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.preco-sob-consulta {
  font-size: 0.82rem; font-weight: 700; color: var(--status-warning);
  background: #fef3c7; display: inline-block; padding: 4px 10px; border-radius: 8px;
}

.btn-detalhes {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  font-family: 'Plus Jakarta Sans', sans-serif;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 2px 6px rgba(0, 0, 0, 0.10);
}

.btn-detalhes:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #0052D4 !important;
  transform: scale(1.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20) !important;
}

.btn-detalhes svg {
  stroke: currentColor;
  width: 18px;
  height: 18px;
}

.btn-whatsapp {
  flex: 1;
  background: linear-gradient(135deg, var(--accent), #1ebe59);
  color: var(--white);
  text-align: center;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: 'Plus Jakarta Sans', sans-serif;
  border-radius: 12px;
  letter-spacing: -0.1px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn-whatsapp:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
}

.btn-whatsapp svg { width: 15px; height: 15px; transition: transform 0.2s; }
.btn-whatsapp:hover svg { transform: translateX(2px); }

/* ==================== MODAL PRINCIPAL (CORRIGIDO) ==================== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.22s, opacity 0.22s;
}

.modal.active {
  visibility: visible;
  opacity: 1;
}

.modal .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}

.modal-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-content {
  background: var(--white);
  border-radius: var(--border-radius-2xl);
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
  animation: modalUp 0.3s cubic-bezier(0.2, 0, 0, 1);
  display: flex;
  flex-direction: column;
}

@keyframes modalUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.modal-header h2 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  letter-spacing: -0.4px;
}

.modal-close {
  background: var(--white);
  border: 1.5px solid var(--border-light);
  cursor: pointer;
  padding: 7px;
  color: var(--text-muted);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.modal-close:hover {
  background: var(--bg-body);
  color: var(--text-main);
  border-color: var(--border-medium);
}

.modal-close svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.5;
}

.modal-body {
  padding: 22px;
  overflow-y: auto;
  flex: 1;
}

.modal-body::-webkit-scrollbar {
  width: 4px;
}

.modal-body::-webkit-scrollbar-track {
  background: var(--bg-body);
}

.modal-body::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 4px;
}

.modal-footer {
  padding: 18px 22px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.btn-cancel {
  background: var(--white);
  color: var(--text-muted);
  border: 1.5px solid var(--border-light);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 11px;
  transition: all 0.2s;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.btn-cancel:hover {
  color: var(--text-main);
  background: var(--bg-body);
  border-color: var(--border-medium);
}

.btn-add-cart {
  background: var(--primary);
  color: var(--white);
  border: none;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all 0.2s;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 4px 12px rgba(0, 96, 255, 0.25);
  letter-spacing: -0.1px;
}

.btn-add-cart:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 96, 255, 0.35);
}

.btn-continue {
  width: 100%;
  background: linear-gradient(135deg, var(--accent), #1ebe59);
  color: white;
  border: none;
  padding: 13px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  margin-top: 12px;
  transition: all 0.2s;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.25);
}

.btn-continue:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Estilos do conteúdo do modal */
.selection-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selection-section {
  margin-bottom: 8px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.section-icon {
  font-size: 1rem;
}

.section-title h3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  letter-spacing: -0.2px;
}

.section-badge {
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: auto;
}

.info-box {
  background: #FFF8E7;
  border: 1px solid #FFE5A3;
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 4px;
}

.info-box p {
  font-size: 0.7rem;
  color: #B45309;
  line-height: 1.4;
  margin: 0;
}

.storage-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.storage-option {
  flex: 1;
  min-width: 100px;
  cursor: pointer;
}

.storage-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-light);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
}

.storage-option.selected .storage-card {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.storage-option.disabled .storage-card {
  opacity: 0.5;
  cursor: not-allowed;
}

.storage-icon {
  margin-bottom: 6px;
}

.storage-icon svg {
  stroke: var(--text-muted);
}

.storage-option.selected .storage-icon svg {
  stroke: white;
}

.storage-size {
  font-size: 0.9rem;
  font-weight: 800;
  margin-bottom: 2px;
}

.storage-ram {
  font-size: 0.65rem;
  font-weight: 500;
  opacity: 0.7;
  margin-bottom: 4px;
}

.storage-price {
  font-size: 0.7rem;
  font-weight: 700;
}

.storage-status {
  font-size: 0.55rem;
  font-weight: 700;
  margin-top: 4px;
  color: #f59e0b;
}

.storage-check {
  position: absolute;
  top: 6px;
  right: 8px;
  background: white;
  color: var(--primary);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
}

.storage-option.selected .storage-check {
  background: rgba(255,255,255,0.95);
  color: var(--primary);
}

.color-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.color-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  min-width: 60px;
}

.color-circle-wrapper {
  position: relative;
  width: 42px;
  height: 42px;
}

.color-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.color-option:hover .color-circle {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.color-option.selected .color-circle {
  border: 2.5px solid var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 96, 255, 0.2);
}

.color-selected-icon {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: var(--primary);
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  border: 2px solid white;
}

.color-name {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: capitalize;
}

.color-option.selected .color-name {
  color: var(--primary);
}

.selected-color-name {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: auto;
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-light);
  border-radius: 14px;
  padding: 8px 16px;
  width: fit-content;
}

.quantity-btn {
  width: 36px;
  height: 36px;
  background: var(--white);
  border: 1.5px solid var(--border-light);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--primary);
  font-size: 1rem;
}

.quantity-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  transform: scale(1.05);
}

.quantity-display {
  text-align: center;
  min-width: 60px;
}

.quantity-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-main);
}

.quantity-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.order-summary {
  background: var(--bg-surface);
  border-radius: 14px;
  padding: 14px;
  margin-top: 12px;
}

.summary-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 12px;
  letter-spacing: -0.2px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  margin-bottom: 6px;
  color: var(--text-muted);
}

.summary-row span:first-child {
  font-weight: 500;
}

.summary-row span:last-child {
  font-weight: 600;
  color: var(--text-main);
}

.summary-divider {
  height: 1px;
  background: var(--border-light);
  margin: 8px 0;
}

.summary-total {
  font-size: 0.8rem !important;
}

.summary-total span:last-child {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--primary);
}

.modal-product-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 0 0 18px 0;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 18px;
}

.modal-product-image {
  width: 80px;
  height: 80px;
  border-radius: 14px;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border-light);
}

.modal-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.modal-product-info {
  flex: 1;
  min-width: 0;
}

.modal-product-info h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
  letter-spacing: -0.4px;
  line-height: 1.3;
}

.modal-product-specs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.modal-spec-badge {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
}

.modal-product-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.modal-price-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.04em;
}

.modal-price-consult {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--status-warning);
  background: #fef3c7;
  padding: 4px 10px;
  border-radius: 8px;
  display: inline-block;
}

.modal-price-old {
  font-size: 0.7rem;
  text-decoration: line-through;
  color: #b0bccc;
  font-weight: 500;
}

@media (max-width: 480px) {
  .modal-content {
    max-width: 95%;
    margin: 0 auto;
  }
  
  .storage-option {
    min-width: 80px;
  }
  
  .storage-card {
    padding: 8px;
  }
  
  .storage-size {
    font-size: 0.8rem;
  }
  
  .color-circle-wrapper,
  .color-circle {
    width: 36px;
    height: 36px;
  }
  
  .modal-product-header {
    flex-direction: column;
    text-align: center;
  }
  
  .modal-product-specs {
    justify-content: center;
  }
  
  .modal-product-price {
    justify-content: center;
  }
  
  .section-title {
    flex-wrap: wrap;
  }
  
  .selected-color-name {
    margin-left: 0;
  }
}

/* ==================== MODAL FULLSCREEN ==================== */
.product-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.25s, opacity 0.25s;
}

.product-modal.active {
  visibility: visible;
  opacity: 1;
}

.product-modal .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
}

.product-modal-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none;
  border-radius: 0;
}

@media (min-width: 769px) {
  .product-modal-container {
    width: 92%;
    height: 90%;
    max-width: 1400px;
    margin: 2% auto;
    border-radius: var(--border-radius-2xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(0,0,0,0.05);
  }
}

.product-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  background: var(--white);
  z-index: 10;
}

.product-modal-header h2 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.product-modal-close {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-light);
  cursor: pointer;
  padding: 8px;
  color: var(--text-muted);
  border-radius: 10px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.product-modal-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
}

.product-modal-close:hover {
  background: var(--bg-body);
  color: var(--text-main);
  border-color: var(--border-medium);
}

.product-modal-body {
  flex: 1;
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.product-modal-body::-webkit-scrollbar {
  width: 4px;
}

.product-modal-body::-webkit-scrollbar-track {
  background: var(--bg-body);
}

.product-modal-body::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 4px;
}

@media (max-width: 768px) {
  .product-modal-body {
    flex-direction: column;
  }
  .product-gallery {
    flex: none;
    min-height: auto;
    padding: 16px 16px 8px 16px;
  }
  .product-info {
    flex: none;
    border-left: none;
    border-top: 1px solid var(--border-light);
    border-radius: 20px 20px 0 0;
    margin-top: -8px;
    padding: 20px;
  }
}

@media (min-width: 769px) {
  .product-modal-body {
    flex-direction: row;
    overflow: hidden;
  }
  .product-gallery {
    flex: 1.2;
    overflow-y: auto;
    height: 100%;
  }
  .product-info {
    flex: 1.1;
    overflow-y: auto;
    height: 100%;
  }
}

.product-gallery {
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gallery-carousel {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.carousel-main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.carousel-image {
  max-width: 100%;
  max-height: 48vh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  transition: opacity 0.3s ease-in-out;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1));
}

.carousel-image.fade-transition {
  animation: fadeEffect 0.25s ease-in-out;
}

@keyframes fadeEffect {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

.carousel-image.zoom-enabled {
  transform: scale(1.3);
  cursor: zoom-out;
  transition: transform 0.3s ease;
  z-index: 10;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
  padding: 0 2px;
}

.carousel-btn {
  pointer-events: auto;
  background: var(--white);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-main);
  margin: 0;
  transition: all 0.2s;
}

.carousel-btn svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

.carousel-btn:hover {
  background: var(--primary);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(0, 96, 255, 0.25);
}

.image-counter {
  position: absolute;
  bottom: 68px;
  right: 8px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  color: white;
  font-size: 0.63rem;
  padding: 3px 8px;
  border-radius: 8px;
  font-weight: 600;
  z-index: 5;
}

.carousel-indicators {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 12px;
}

.indicator-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s;
}

.indicator-dot.active {
  width: 20px;
  border-radius: 3px;
  background: var(--primary);
}

.carousel-thumbnails {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.thumbnail-item {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.2s ease;
  background: var(--white);
}

.thumbnail-item:hover {
  transform: scale(1.05);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.thumbnail-item.active {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 96, 255, 0.2);
}

.thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 22px 28px 28px 28px;
  background: var(--white);
  border-left: 1px solid var(--border-light);
}

.product-info-title {
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.product-info-title h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.4px;
}

.product-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.63rem;
  font-weight: 700;
  border-radius: 8px;
  letter-spacing: 0.2px;
}

.product-badge.new {
  background: var(--primary);
  color: white;
}

.product-badge.used {
  background: var(--accent);
  color: white;
}

.product-badge.promo {
  background: #f59e0b;
  color: white;
}

.product-info-description {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.product-info-description p {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.65;
  max-width: 90%;
}

.product-info-observacao {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.product-info-price {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.price-old {
  font-size: 0.73rem;
  color: #b0bccc;
  text-decoration: line-through;
  margin-bottom: 3px;
  font-weight: 500;
}

.price-current {
  font-size: 1.95rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.variant-group {
  margin-bottom: 16px;
}

.variant-group label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.variant-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.variant-storage {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-light);
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.variant-storage:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.variant-storage.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 4px 10px rgba(0, 96, 255, 0.2);
}

.variant-storage.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.variant-color {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.variant-color-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.variant-color-circle:hover {
  transform: scale(1.08);
}

.variant-color.selected .variant-color-circle {
  border-color: var(--primary);
  border-width: 2.5px;
}

.quantity-selector-modal {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.quantity-btn-modal {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--border-light);
  background: var(--bg-surface);
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s;
}

.quantity-btn-modal:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.quantity-value-modal {
  font-size: 1rem;
  font-weight: 700;
  min-width: 40px;
  text-align: center;
}

.btn-whatsapp-modal {
  width: 100%;
  background: linear-gradient(135deg, var(--accent), #1ebe59);
  color: white;
  border: none;
  padding: 13px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  margin-top: 16px;
  transition: all 0.2s;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.25);
  letter-spacing: -0.2px;
}

.btn-whatsapp-modal:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
}

footer {
  background: var(--white);
  border-top: 1px solid var(--border-light);
  padding: 28px 24px;
  text-align: center;
}

.footer-grid {
  display: flex;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.footer-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.73rem;
  font-weight: 500;
}

.copyright {
  color: var(--text-light);
  font-size: 0.63rem;
  font-weight: 500;
}

.loading {
  text-align: center;
  padding: 48px;
  color: var(--text-muted);
  grid-column: 1/-1;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.18);
}

@media (max-width: 768px) {
  .header-main {
    padding: 18px 20px 16px;
  }
  .logo-frame {
    width: 46px;
    height: 46px;
  }
  .main-logo {
    width: 46px;
    height: 46px;
  }
  .store-name {
    font-size: 1.25rem;
  }
  .cart-sidebar {
    max-width: 100%;
  }
  .product-modal-close {
    width: 32px;
    height: 32px;
    padding: 6px;
  }
  .product-modal-close svg {
    width: 16px;
    height: 16px;
  }
  .image-counter {
    bottom: 58px;
    font-size: 0.6rem;
  }
  .carousel-image {
    max-height: 40vh;
  }
  .carousel-image.zoom-enabled {
    transform: scale(1.2);
  }
  .product-info-description p {
    max-width: 100%;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .logo-frame {
    width: 42px;
    height: 42px;
  }
  .main-logo {
    width: 42px;
    height: 42px;
  }
  .store-name {
    font-size: 1.1rem;
  }
  .header-divider-v {
    margin: 0 12px;
    height: 30px;
  }
  .store-tagline {
    font-size: 0.6rem;
  }
  .resultados-bar {
    padding: 12px 16px 2px 16px;
  }
  .footer-grid {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .price-current {
    font-size: 1.55rem;
  }
  .thumbnail-item {
    width: 46px;
    height: 46px;
  }
  .variant-color-circle {
    width: 36px;
    height: 36px;
  }
  .carousel-image {
    max-height: 35vh;
  }
  .image-counter {
    bottom: 52px;
  }
  .preco {
    font-size: 1.4rem;
  }
}/* ============================================================
   PATCH: Nova identidade visual — Card com base azul degradê
   Adicione este bloco ao FINAL do seu style.css
   (ou importe como folha separada após o style.css)
   ============================================================ */

/* ----------------------------------------------------------
   1. VARIÁVEIS EXTRAS DO TEMA AZUL
      Adicionadas sem sobrescrever as variáveis existentes.
   ---------------------------------------------------------- */
:root {
  --card-blue-start:   #0052D4;   /* azul royal profundo         */
  --card-blue-mid:     #1A6BEF;   /* azul vivo                   */
  --card-blue-end:     #2E86FF;   /* azul elétrico brilhante     */
  --card-blue-border:  #1A5FD8;   /* borda sólida harmônica      */

  --card-text-white:   #FFFFFF;
  --card-text-soft:    rgba(180, 210, 255, 0.75); /* subtexto sobre azul */
  --card-text-muted-blue: #A8C8FF; /* specs, preço antigo        */
}

/* ----------------------------------------------------------
   2. BORDA PREMIUM NO CARD INTEIRO
   ---------------------------------------------------------- */
.produto {
  border: 1.5px solid var(--card-blue-border) !important;
  box-shadow:
    0 4px 16px rgba(0, 82, 212, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.produto:hover {
  border-color: var(--card-blue-mid) !important;
  box-shadow:
    0 20px 48px rgba(0, 82, 212, 0.22),
    0 8px 20px rgba(0, 0, 0, 0.10) !important;
}

/* ----------------------------------------------------------
   3. CARD BODY — DEGRADÊ AZUL NA ÁREA DE TEXTO
   ---------------------------------------------------------- */
.card-body {
  background: linear-gradient(
    160deg,
    var(--card-blue-start) 0%,
    var(--card-blue-mid)   55%,
    var(--card-blue-end)   100%
  );
  position: relative;
}

/* Camada de noise sutil para dar profundidade premium */
.card-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(0,20,80,0.25) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.card-body > * { position: relative; z-index: 1; }

/* ----------------------------------------------------------
   4. TÍTULO DO PRODUTO — BRANCO
   ---------------------------------------------------------- */
.produto h3 {
  color: var(--card-text-white) !important;
  text-shadow: 0 1px 4px rgba(0, 20, 80, 0.2);
}

/* ----------------------------------------------------------
   5. SPECS (RAM / ARMAZENAMENTO) — AZUL CLARO ACESSÍVEL
   ---------------------------------------------------------- */
.ram-info {
  color: var(--card-text-muted-blue) !important;
}

/* Pill de variações ("+ 3 versões") */
.variacoes-hint {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #CBE4FF !important;
  border: 1px solid rgba(255,255,255,0.18);
}

/* Pill de armazenamento único (specs-gb) */
.specs-gb {
  background: rgba(255, 255, 255, 0.13) !important;
  color: #D0E8FF !important;
  border: 1px solid rgba(255,255,255,0.18);
}

/* Badge de bateria */
.bateria-info {
  background: rgba(0, 255, 140, 0.1) !important;
  border-color: rgba(0, 255, 140, 0.25) !important;
  color: #6DFFC6 !important;
}

.bateria-info svg { color: #6DFFC6 !important; }

/* ----------------------------------------------------------
   6. PREÇOS
   ---------------------------------------------------------- */
/* Preço antigo riscado */
.preco-antigo {
  color: var(--card-text-muted-blue) !important;
  opacity: 0.75;
}

/* Preço "a partir de" label */
.preco-label {
  color: rgba(180, 210, 255, 0.8) !important;
}

/* Preço principal — BRANCO + destaque */
.preco {
  color: var(--card-text-white) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* "Sob consulta" — mantém legível */
.preco-sob-consulta {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #FFD980 !important;
}

/* ----------------------------------------------------------
   7. CARD FOOTER — CONTINUA O DEGRADÊ AZUL SEM INTERRUPÇÃO
   ---------------------------------------------------------- */
.card-footer {
  padding: 14px 16px 18px 16px;
  border-top: none;
  background: transparent;
}

/* Botão COMPRAR (verde) — inalterado, apenas garantimos sombra sobre azul */
.btn-whatsapp:hover {
  opacity: 0.93;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Botão LUPA — oculto por padrão, aparece ao hover do card (ver regra acima) */
/* Os overrides de cor já estão definidos no bloco .btn-detalhes principal */

/* ----------------------------------------------------------
   8. SKELETON — mantém coerência de cor durante carregamento
   ---------------------------------------------------------- */
.skeleton-card {
  border: 1.5px solid rgba(0, 82, 212, 0.15) !important;
}

/* ── GRADIENTE COBRE 100% DA ÁREA INFERIOR (body + footer) ──────────────── */
/* Técnica: wrapper virtual usando o próprio .produto como container do gradiente,
   isolando apenas a metade inferior. O img-container já tem bg próprio (brand-*),
   então definimos o gradiente diretamente no .produto e usamos a img-container
   para "tapar" a parte de cima com sua cor natural. */

.produto {
  /* Gradiente de fundo do card inteiro — a img-container sobrepõe com seu bg */
  background: linear-gradient(
    160deg,
    #0052D4 0%,
    #1A6BEF 55%,
    #2E86FF 100%
  ) !important;
}

/* card-body e card-footer agora são transparentes — o gradiente vem do .produto */
.card-body {
  background: transparent !important;
}
.card-body::before {
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(0,20,80,0.20) 0%, transparent 60%) !important;
}

/* ── DETALHE AZUL NO MODAL FULLSCREEN ───────────────────────────────────── */

/* Barra azul no topo do container — o "detalhe" de identidade */
.product-modal-container {
  border-top: 3.5px solid transparent !important;
  background-image: linear-gradient(var(--white), var(--white)),
                    linear-gradient(90deg, #0052D4 0%, #2E86FF 50%, #0052D4 100%) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}

/* Header com linha inferior azul sutil + título com acento */
.product-modal-header {
  border-bottom: 1px solid rgba(0, 82, 212, 0.12) !important;
  background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%) !important;
}

/* Título do modal com cor levemente azulada */
.product-modal-header h2 {
  color: #0a1a3a !important;
}

/* Botão fechar com hover azul */
.product-modal-close:hover {
  background: var(--primary-light) !important;
  border-color: rgba(0, 96, 255, 0.2) !important;
  color: var(--primary) !important;
}

/* Divisor entre galeria e info com tom azul */
.product-info {
  border-left-color: rgba(0, 82, 212, 0.10) !important;
}

/* Preço principal no modal fullscreen — azul vibrante */
.price-current {
  color: var(--primary) !important;
}
/* ──────────────────────────────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════════════════
   EVOLUÇÃO PREMIUM — Card de Produto
   Camada de refinamento sobre a estrutura existente.
   Inspiração: Apple Store · Xiaomi · Nothing.tech · Samsung Store
   ══════════════════════════════════════════════════════════════════════════ */

/* ── CARD: Estrutura e elevação ─────────────────────────────────────────── */
.produto {
  border-radius: 20px !important;
  border: 1px solid rgba(26, 95, 216, 0.22) !important;
  box-shadow:
    0 2px 8px rgba(0, 40, 120, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition:
    transform 0.40s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.40s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.30s ease !important;
  will-change: transform;
}

.produto:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(46, 134, 255, 0.45) !important;
  box-shadow:
    0 16px 40px rgba(0, 60, 180, 0.16),
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(46, 134, 255, 0.12) !important;
}

/* ── ÁREA SUPERIOR: Fundo por marca mais elegante ───────────────────────── */
.img-container {
  min-height: 220px !important;
  padding: 32px 28px !important;
  position: relative;
  overflow: hidden;
}

/* Sobreposição de iluminação radial atrás do produto */
.img-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 60%;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 255, 255, 0.55) 0%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Fundo iPhone/Apple — névoa cinza‑pérola */
.img-container.brand-apple,
.img-container.brand-iphone {
  background: linear-gradient(160deg, #f8f8fa 0%, #eeeef4 60%, #e4e4ed 100%) !important;
}

/* Fundo Redmi — névoa azul glacial */
.img-container.brand-redmi {
  background: linear-gradient(160deg, #EEF5FF 0%, #DCE9FF 60%, #C8DCFF 100%) !important;
}

/* Fundo Poco — escuro com brilho dourado */
.img-container.brand-poco {
  background: linear-gradient(160deg, #1A1A22 0%, #222230 60%, #1C1C28 100%) !important;
}

/* Fundo genérico */
.img-container:not([class*="brand-"]) {
  background: linear-gradient(160deg, #F6F8FB 0%, #EDF0F7 60%, #E4E9F4 100%) !important;
}

/* ── IMAGEM DO PRODUTO: zoom e sombra premium ───────────────────────────── */
.img-container img {
  filter:
    drop-shadow(0 12px 20px rgba(0, 0, 0, 0.13))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.07)) !important;
  transition: transform 0.50s cubic-bezier(0.22, 1, 0.36, 1), filter 0.50s ease !important;
  position: relative;
  z-index: 1;
}

.produto:hover .img-container img {
  transform: scale(1.055) translateY(-5px) !important;
  filter:
    drop-shadow(0 20px 32px rgba(0, 0, 0, 0.16))
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.08)) !important;
}

/* ── BADGES: sofisticados, com blur e borda fina ────────────────────────── */
.type-badge {
  padding: 4px 10px !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border-radius: 8px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

.novo-badge {
  background: rgba(0, 82, 212, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
}

.usado-badge {
  background: rgba(22, 185, 90, 0.90) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
}

.promo-badge {
  background: rgba(234, 142, 12, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
}

.desconto-badge {
  background: rgba(220, 48, 48, 0.90) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  font-weight: 800 !important;
}

/* ── ÁREA AZUL: gradiente refinado e profundidade ───────────────────────── */
.produto {
  background: linear-gradient(
    175deg,
    #0148C0 0%,
    #1260E8 40%,
    #1E6FF5 70%,
    #2176FF 100%
  ) !important;
}

.card-body::before {
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(255,255,255,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(0, 15, 70, 0.28) 0%, transparent 55%) !important;
}

/* ── TÍTULO: hierarquia tipográfica nítida ──────────────────────────────── */
.produto h3 {
  font-size: 1.0rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.4px !important;
  line-height: 1.25 !important;
  margin: 18px 18px 5px 18px !important;
  text-shadow: 0 1px 3px rgba(0, 10, 50, 0.18) !important;
}

/* ── SPECS: legibilidade premium sobre o azul ───────────────────────────── */
.ram-info {
  margin: 0 18px 8px 18px !important;
  color: rgba(185, 215, 255, 0.85) !important;
  font-size: 0.71rem !important;
  font-weight: 500 !important;
}

.specs-gb {
  margin: 0 18px 14px 18px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(210, 235, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 7px !important;
  font-size: 0.67rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  letter-spacing: 0.1px !important;
}

.variacoes-hint {
  background: rgba(255, 255, 255, 0.13) !important;
  color: rgba(210, 235, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 6px !important;
}

/* ── PREÇO: dominante, impactante ───────────────────────────────────────── */
.preco-container {
  padding: 0 18px 16px 18px !important;
}

.preco-antigo {
  font-size: 0.70rem !important;
  color: rgba(160, 200, 255, 0.65) !important;
  font-weight: 500 !important;
  margin-bottom: 1px !important;
}

.preco {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.06em !important;
  line-height: 1 !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.20) !important;
}

/* ── CARD FOOTER: espaçamento premium ───────────────────────────────────── */
.card-footer {
  padding: 12px 18px 20px 18px !important;
  gap: 10px !important;
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── BOTÃO COMPRAR: acabamento Apple-level ──────────────────────────────── */
.btn-whatsapp {
  background: linear-gradient(160deg, #28d968 0%, #1fc658 50%, #17b84e 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.15px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 3px 8px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.btn-whatsapp:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(160deg, #34ef78 0%, #25d865 50%, #1ec958 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 20px rgba(20, 180, 70, 0.28) !important;
  opacity: 1 !important;
}

/* ── BOTÃO LUPA: glassmorphism refinado ─────────────────────────────────── */
.btn-detalhes {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.11) !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  color: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.10) !important;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.btn-detalhes:hover {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  color: #0148C0 !important;
  transform: scale(1.07) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.btn-detalhes svg {
  width: 17px !important;
  height: 17px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

/* ── BATERIA: verde suave sobre azul ────────────────────────────────────── */
.bateria-info {
  background: rgba(30, 210, 100, 0.10) !important;
  border: 1px solid rgba(30, 210, 100, 0.22) !important;
  color: #7DFFC0 !important;
}
.bateria-info svg { color: #7DFFC0 !important; }

/* ── SKELETON: coerente com a borda azul ────────────────────────────────── */
.skeleton-card {
  border: 1px solid rgba(26, 95, 216, 0.14) !important;
  border-radius: 20px !important;
}

/* ══════════════════════════════════════════════════════════════════════════ */