/* ============================================================
   Maxi Popular — Design tokens (Cores / Tipografia / Espaçamento)
   ============================================================ */
:root{
  /* Primary */
  --color-primary: #006FF7;
  --color-primary-hover: #005ED1;
  --color-primary-light: #EAF4FF;

  /* Background */
  --bg-primary: #F8FAFC;
  --bg-secondary: #FFFFFF;

  /* Text */
  --color-text-primary: #0F172A;
  --color-text-secondary: #334155;
  --color-text-tertiary: #64748B;

  /* Neutrals */
  --neutral-900:#0F172A;
  --neutral-600:#475569;
  --neutral-500:#64748B;
  --neutral-400:#94A3B8;
  --neutral-300:#CBD5E1;
  --neutral-200:#E2E8F0;
  --neutral-100:#F1F5F9;
  --white:#FFFFFF;

  /* Border */
  --border: #E2E8F0;

  /* Feedback */
  --info-light:#D6EFFF; --info:#3695FF; --info-dark:#1E6EDC;
  --success-light:#EAF7F0; --success:#0FA958; --success-dark:#0A7B3E;
  --alert-light:#FEF3C7; --alert:#EAB308; --alert-dark:#D48B00;
  --error-light:#FEECEC; --error:#F03D3D; --error-dark:#A62B2B;

  /* Typography */
  --font-family: "Roboto", Arial, sans-serif;
  --font-title-xl: 700 24px/1.2 var(--font-family);
  --font-title-lg: 700 20px/1.2 var(--font-family);
  --font-title-md: 700 16px/1.2 var(--font-family);
  --font-text-md: 400 16px/1.4 var(--font-family);
  --font-text-sm: 400 14px/1.4 var(--font-family);
  --font-text-xs: 400 12px/1.4 var(--font-family);
  --font-button: 500 14px/1.4 var(--font-family);
  --font-label: 500 12px/1.4 var(--font-family);

  /* Spacing (4px base) */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow-md: 0 8px 24px rgba(15,23,42,.10);
}

/* ============================================================
   Reset / base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font: var(--font-text-md);
  color: var(--color-text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
input{ font:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }
svg{ display:block; }

.icon{ width:20px; height:20px; flex:none; }

/* ============================================================
   Grid / Container
   Desktop (≥1024px): 12 cols, margin 120 (capped via max-width),
   gutter 24 · Tablet (768–1023): 8 cols, margin 24, gutter 24 ·
   Mobile (<768): margin 16
   ============================================================ */
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--spacing-sm);
}
@media (min-width:768px){
  .container{ padding:0 var(--spacing-md); }
}
@media (min-width:1024px){
  .container{ padding:0 var(--spacing-md); }
}

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--spacing-xs);
  font:var(--font-button);
  border:none; border-radius:var(--radius-sm);
  padding:12px 20px;
  transition:background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--color-primary); color:var(--white); }
.btn-primary:hover{ background:var(--color-primary-hover); }
.btn-success{ background:var(--success); color:var(--white); }
.btn-success:hover{ background:var(--success-dark); }
.btn-dark{ background:var(--color-text-primary); color:var(--alert); }
.btn-dark:hover{ background:#000; }
.btn-outline{ background:var(--white); color:var(--color-text-primary); border:1px solid var(--border); }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 14px; font-size:12px; }

/* ============================================================
   Top utility bar
   ============================================================ */
.topbar{
  background:var(--neutral-100);
  border-bottom:1px solid var(--border);
  font:var(--font-text-sm);
  color:var(--color-text-secondary);
}
.topbar .container{
  display:flex; align-items:center; justify-content:center;
  gap:var(--spacing-xl);
  padding-top:var(--spacing-xs); padding-bottom:var(--spacing-xs);
  flex-wrap:wrap;
  min-height:40px;
}
.topbar-item{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.topbar-item .icon{ width:16px; height:16px; color:var(--color-primary); }
.topbar-item a{ color:var(--color-primary); font-weight:500; text-decoration:underline; }
.topbar-item strong{ font-weight:700; }

/* ============================================================
   Header
   ============================================================ */
.site-header{ background:var(--white); border-bottom:1px solid var(--border); }
.header-row{
  display:flex; align-items:center; gap:var(--spacing-lg);
  padding-top:var(--spacing-md); padding-bottom:var(--spacing-md);
}
.logo{ display:flex; align-items:center; gap:8px; flex:none; }
.logo-mark{
  width:34px; height:34px; border-radius:9px;
  background:
    linear-gradient(45deg, transparent 48%, var(--alert) 48% 52%, transparent 52%),
    linear-gradient(135deg, transparent 48%, var(--error) 48% 52%, transparent 52%);
  background-color:var(--color-primary-light);
  position:relative; flex:none;
}
.logo-mark::before{
  content:"+"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:900; color:var(--color-primary);
}
.logo-text{ line-height:1; }
.logo-text .l1{ font-size:11px; color:var(--error); font-weight:700; letter-spacing:.3px; }
.logo-text .l2{ font-size:22px; font-weight:800; color:var(--color-primary); font-style:italic; margin-top:1px; }
.logo-text .l3{ font-size:12px; font-weight:700; color:var(--error); text-align:right; display:block; }

.search-form{
  flex:1 1 auto; display:flex; max-width:640px;
  border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
  background:var(--white);
}
.search-form input{
  flex:1; border:none; outline:none; padding:12px var(--spacing-sm);
  font:var(--font-text-md); color:var(--color-text-primary); min-width:0;
  background:transparent;
}
.search-form input::placeholder{ color:var(--neutral-400); }
.search-form button{ border-radius:0; padding-left:24px; padding-right:24px; }

.header-actions{ display:flex; align-items:center; gap:var(--spacing-lg); flex:none; }
.header-link{
  display:flex; align-items:center; gap:8px; color:var(--color-text-primary);
  font:var(--font-text-sm);
}
.header-link .icon{ color:var(--color-text-secondary); width:22px; height:22px; }
.header-link strong{ display:block; font-weight:700; font-size:14px; }
.header-link .muted{ color:var(--color-text-tertiary); }
.cart-badge-wrap{ position:relative; }
.cart-count{
  position:absolute; top:-6px; left:12px; background:var(--color-primary); color:#fff;
  font:700 10px/1 var(--font-family); width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.header-mobile-toggle{ display:none; background:none; border:none; padding:4px; color:var(--color-text-primary); }

/* Category nav */
.category-nav{ border-top:1px solid var(--border); }
.category-nav .container{ display:flex; align-items:center; gap:var(--spacing-lg); overflow-x:auto; scrollbar-width:none; }
.category-nav .container::-webkit-scrollbar{ display:none; }
.category-nav ul{ display:flex; align-items:center; gap:var(--spacing-lg); padding:var(--spacing-sm) 0; }
.category-nav li{ white-space:nowrap; }
.category-nav a{ display:flex; align-items:center; gap:8px; font:var(--font-text-sm); font-weight:500; color:var(--color-text-primary); }
.category-nav a .icon{ width:18px; height:18px; }
.category-nav .all-cats{ font-weight:700; }
.category-nav .highlight{ color:var(--color-primary); }
.category-nav .highlight .icon{ color:var(--color-primary); }

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb{ background:var(--neutral-100); border-bottom:1px solid var(--border); }
.breadcrumb ol{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:var(--spacing-sm) 0; }
.breadcrumb li{ display:flex; align-items:center; gap:8px; font:var(--font-text-sm); color:var(--color-text-tertiary); }
.breadcrumb .icon{ width:16px; height:16px; }
.breadcrumb .sep{ width:14px; height:14px; color:var(--neutral-400); }
.breadcrumb li.current{ color:var(--color-text-primary); font-weight:500; }
.breadcrumb a:hover{ color:var(--color-primary); }

/* ============================================================
   Sections / titles
   ============================================================ */
.section{ padding-top:var(--spacing-xl); }
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--spacing-md); }
.section-title{ font:var(--font-title-lg); color:var(--color-text-primary); }
.see-all{ display:flex; align-items:center; gap:4px; color:var(--color-primary); font:var(--font-text-sm); font-weight:700; flex:none; }
.see-all .icon{ width:16px; height:16px; }

/* ============================================================
   Hero
   ============================================================ */
.hero{ margin-top:var(--spacing-xl); border-radius:var(--radius-lg); overflow:hidden; }
.hero img{ width:100%; height:auto; }

.features-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--spacing-md);
  padding:var(--spacing-lg) 0;
}
.feature-item{ display:flex; align-items:center; gap:12px; }
.feature-item .icon{ width:26px; height:26px; color:var(--color-text-tertiary); flex:none; }
.feature-item span{ font:var(--font-text-sm); color:var(--color-text-tertiary); line-height:1.3; }

/* ============================================================
   Product cards / carousels
   ============================================================ */
.card-row{
  display:grid; grid-auto-flow:column; grid-auto-columns:220px;
  gap:var(--spacing-md); overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.card-row::-webkit-scrollbar{ display:none; }
.card-row.related{ grid-auto-columns:210px; }

.product-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--spacing-sm); display:flex; flex-direction:column; gap:var(--spacing-xs);
  scroll-snap-align:start; position:relative;
}
.product-card .thumb{
  position:relative; background:var(--bg-primary); border-radius:var(--radius-sm);
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden;
  margin-bottom:var(--spacing-xs);
}
.product-card .thumb .icon{ width:56%; height:56%; }
.badge-discount{
  position:absolute; top:8px; left:8px; background:var(--success-light); color:var(--success-dark);
  font:700 12px/1 var(--font-family); padding:5px 8px; border-radius:6px;
}
.product-card .p-name{ font:var(--font-text-md); font-weight:500; color:var(--color-text-primary); min-height:44px; }
.product-card .p-brand{ font:var(--font-text-xs); color:var(--color-text-tertiary); }
.product-card .p-price-old{ font:var(--font-text-sm); color:var(--neutral-400); text-decoration:line-through; }
.product-card .p-price{ font:700 18px/1.2 var(--font-family); color:var(--success-dark); }
.product-card .btn{ margin-top:4px; }

/* Brands */
.brand-row{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px,1fr);
  gap:var(--spacing-md); overflow-x:auto; scrollbar-width:none;
}
.brand-row::-webkit-scrollbar{ display:none; }
.brand-tile{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md);
  height:84px; display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--color-text-secondary); font-size:17px; letter-spacing:.2px;
}

/* App promo */
.app-promo{
  margin-top:var(--spacing-xl);
  background:var(--neutral-100); border-radius:var(--radius-lg);
  display:flex; align-items:center; gap:var(--spacing-lg);
  padding:var(--spacing-lg); flex-wrap:wrap;
}
.app-promo img{ width:110px; flex:none; }
.app-promo .txt{ flex:1 1 260px; }
.app-promo h3{ font:var(--font-title-lg); margin-bottom:6px; }
.app-promo p{ font:var(--font-text-sm); color:var(--color-text-tertiary); }
.app-promo .qr-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md);
  display:flex; align-items:center; gap:var(--spacing-sm); padding:var(--spacing-sm) var(--spacing-md);
  flex:none;
}
.qr-placeholder{
  width:56px; height:56px; border-radius:6px; flex:none;
  background:
    repeating-linear-gradient(0deg, var(--neutral-900) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(90deg, var(--neutral-900) 0 4px, transparent 4px 8px);
  background-blend-mode:multiply; background-color:#fff; border:3px solid var(--neutral-900);
}
.store-badges{ display:flex; gap:8px; margin-top:6px; }
.store-badge{
  display:flex; flex-direction:column; justify-content:center; background:var(--neutral-900); color:#fff;
  border-radius:6px; padding:5px 10px; font-size:10px; line-height:1.2;
}
.store-badge strong{ font-size:13px; }

/* Campaign banner */
.campaign-banner{
  margin-top:var(--spacing-xl); border-radius:var(--radius-lg); overflow:hidden; position:relative;
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.10), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,.08), transparent 45%),
    linear-gradient(120deg, #1a1147, #2b1c6b 45%, #150e38);
  color:#fff; padding:var(--spacing-xl) var(--spacing-lg);
  display:flex; align-items:center; justify-content:space-between; gap:var(--spacing-lg); flex-wrap:wrap;
}
.campaign-banner .side-a{ flex:1 1 260px; text-align:center; }
.campaign-banner .side-a .icon-lg{ font-size:44px; }
.campaign-banner .lucky-text{
  font:800 30px/1.15 var(--font-family); color:var(--alert);
  text-shadow:0 2px 0 rgba(0,0,0,.35); text-transform:uppercase;
}
.campaign-banner .side-b{ flex:1 1 340px; max-width:460px; }
.campaign-banner .edition{ color:var(--alert); font-weight:800; letter-spacing:.5px; margin-bottom:var(--spacing-sm); font-size:15px; text-transform:uppercase; }
.campaign-banner .date-pill{
  display:inline-block; background:#f0632a; color:#fff; font-weight:700; font-size:14px;
  padding:10px 16px; border-radius:8px; margin-bottom:var(--spacing-sm);
}
.campaign-banner p{ font:var(--font-text-sm); color:#d9d4f2; margin-bottom:var(--spacing-md); }
.campaign-banner .btn-dark{ font-weight:700; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ margin-top:var(--spacing-xxl); background:var(--neutral-100); border-top:1px solid var(--border); }
.footer-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--spacing-lg);
  padding:var(--spacing-xl) 0;
}
.footer-col h4{ font:var(--font-title-md); margin-bottom:var(--spacing-sm); }
.footer-col a, .footer-col p{ display:block; font:var(--font-text-sm); color:var(--color-text-secondary); margin-bottom:12px; }
.pay-icons{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.pay-badge{
  border:1px solid var(--border); background:#fff; border-radius:4px; font-size:10px; font-weight:700;
  padding:4px 6px; color:var(--color-text-secondary); letter-spacing:.2px;
}
.social-icons{ display:flex; gap:12px; }
.social-icons a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--color-text-secondary);
}
.footer-bottom{
  border-top:1px solid var(--border); text-align:center; padding:var(--spacing-md) 0;
  font:var(--font-text-xs); color:var(--color-text-tertiary);
}

/* ============================================================
   Modal (CEP)
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:var(--spacing-md);
}
.modal-overlay[hidden]{ display:none; }
.modal-card{
  background:#fff; border-radius:var(--radius-md); max-width:420px; width:100%;
  padding:var(--spacing-lg); box-shadow:var(--shadow-md); position:relative;
}
.modal-card h2{ font:var(--font-title-lg); margin-bottom:var(--spacing-xs); }
.modal-card > p{ font:var(--font-text-sm); color:var(--color-text-tertiary); margin-bottom:var(--spacing-md); }
.field-label{ display:block; font:var(--font-label); color:var(--color-text-secondary); margin-bottom:6px; }
.field-input{
  width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px var(--spacing-sm);
  margin-bottom:var(--spacing-md); outline:none;
}
.field-input:focus{ border-color:var(--color-primary); }
.modal-foot{ text-align:center; margin-top:var(--spacing-sm); font:var(--font-text-sm); color:var(--color-text-secondary); }
.modal-foot a{ color:var(--color-primary); font-weight:700; }
.modal-close{
  position:absolute; top:var(--spacing-sm); right:var(--spacing-sm); background:none; border:none;
  color:var(--color-text-tertiary); padding:4px;
}

/* ============================================================
   Product page
   ============================================================ */
.product-layout{
  display:grid; grid-template-columns:1fr 380px; gap:var(--spacing-lg);
  padding:var(--spacing-xl) 0;
  align-items:start;
}
.gallery-main{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md);
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.gallery-main .icon{ width:42%; height:42%; color:var(--color-primary); }
.gallery-thumbs{ display:flex; align-items:center; gap:var(--spacing-xs); margin-top:var(--spacing-sm); }
.thumb-nav{ background:var(--white); border:1px solid var(--border); border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; flex:none; color:var(--color-text-secondary); }
.thumb-list{ display:flex; gap:var(--spacing-xs); flex:1; }
.thumb-item{
  width:64px; height:64px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg-primary); display:flex; align-items:center; justify-content:center; flex:none;
}
.thumb-item.active{ border-color:var(--color-primary); border-width:2px; }
.thumb-item .icon{ width:60%; height:60%; color:var(--color-primary); }

.product-info{ margin-top:var(--spacing-lg); }
.product-info h1{ font:var(--font-title-xl); margin-bottom:6px; }
.product-brand{ font:var(--font-text-sm); color:var(--color-text-tertiary); margin-bottom:var(--spacing-md); }

.accordion-item{ border-bottom:1px solid var(--border); }
.accordion-item summary{
  list-style:none; display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  padding:var(--spacing-sm) 0; font:var(--font-title-md); color:var(--color-text-primary);
}
.accordion-item summary::-webkit-details-marker{ display:none; }
.accordion-item summary .icon{ width:18px; height:18px; color:var(--color-text-secondary); transition:transform .15s ease; flex:none; }
.accordion-item[open] summary .icon{ transform:rotate(180deg); }
.accordion-item .accordion-body{ padding-bottom:var(--spacing-md); font:var(--font-text-md); color:var(--color-text-secondary); }

.purchase-col{ display:flex; flex-direction:column; gap:var(--spacing-md); }
.purchase-box{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--spacing-md);
}
.purchase-box.selected{ border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-light); }
.purchase-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--spacing-xs); }
.radio-label{ display:flex; align-items:center; gap:10px; font:var(--font-title-md); }
.radio-dot{
  width:20px; height:20px; border-radius:50%; border:2px solid var(--neutral-300); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.radio-dot.checked{ border-color:var(--color-primary); }
.radio-dot.checked::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--color-primary); }
.info-icon-btn{ color:var(--color-text-tertiary); background:none; border:1px solid var(--border); border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.info-icon-btn .icon{ width:14px; height:14px; }
.lab-name{ font:var(--font-text-sm); color:var(--color-text-tertiary); margin:0 0 var(--spacing-sm) 30px; }

.price-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--spacing-sm); margin-left:30px; }
.price-old{ font:var(--font-text-sm); color:var(--neutral-400); text-decoration:line-through; }
.price-discount-tag{ background:var(--success-light); color:var(--success-dark); font:700 12px/1 var(--font-family); padding:4px 8px; border-radius:6px; margin-left:6px; }
.price-now{ font:800 26px/1.1 var(--font-family); color:var(--success-dark); }

.qty-stepper{ display:flex; align-items:center; gap:0; background:var(--color-primary); border-radius:var(--radius-sm); overflow:hidden; flex:none; }
.qty-stepper button{ background:none; border:none; color:#fff; width:32px; height:32px; display:flex; align-items:center; justify-content:center; }
.qty-stepper button .icon{ width:14px; height:14px; }
.qty-stepper .qty-value{ color:#fff; font-weight:700; width:26px; text-align:center; }

.installment{ font:var(--font-text-sm); color:var(--color-text-tertiary); margin:var(--spacing-xs) 0 var(--spacing-md) 30px; }
.cpf-block{ margin-left:30px; margin-bottom:var(--spacing-sm); }

.oferta-price{ font:800 22px/1.2 var(--font-family); color:var(--color-text-primary); margin-left:30px; }

.tag-free{ background:var(--success-light); color:var(--success-dark); font:700 12px/1 var(--font-family); padding:4px 8px; border-radius:6px; }
.section-label-row{ display:flex; align-items:center; gap:8px; margin-bottom:var(--spacing-sm); }
.section-label-row h3{ font:var(--font-title-md); }

.store-card{ border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--spacing-sm); }
.store-status{ display:flex; align-items:center; justify-content:space-between; font:var(--font-text-sm); margin-bottom:6px; }
.store-status .open{ color:var(--success-dark); font-weight:700; }
.store-status .dist{ display:flex; align-items:center; gap:4px; color:var(--color-text-tertiary); }
.store-status .dist .icon{ width:14px; height:14px; }
.store-card strong{ display:block; font:var(--font-title-md); margin-bottom:2px; }
.store-card .addr{ font:var(--font-text-sm); color:var(--color-text-tertiary); }

.delivery-card{
  border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--spacing-sm);
  display:flex; align-items:center; justify-content:space-between; font:var(--font-text-md);
}
.delivery-card .price{ color:var(--success-dark); font-weight:700; }

/* ============================================================
   Checkout steps indicator
   ============================================================ */
.checkout-steps{ display:flex; align-items:center; justify-content:center; gap:8px; padding:var(--spacing-md) 0 var(--spacing-lg); flex-wrap:wrap; }
.checkout-steps .step{ display:flex; align-items:center; gap:8px; font:var(--font-text-sm); color:var(--color-text-tertiary); white-space:nowrap; }
.checkout-steps .step .num{ width:26px; height:26px; border-radius:50%; border:2px solid var(--neutral-300); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex:none; }
.checkout-steps .step .num .icon{ width:14px; height:14px; }
.checkout-steps .step.active{ color:var(--color-text-primary); font-weight:700; }
.checkout-steps .step.active .num{ border-color:var(--color-primary); background:var(--color-primary); color:#fff; }
.checkout-steps .step.done .num{ border-color:var(--success); background:var(--success); color:#fff; }
.checkout-steps .sep{ width:28px; height:1px; background:var(--border); flex:none; }

/* ============================================================
   Cart page
   ============================================================ */
.page-title{ font:var(--font-title-xl); padding-top:var(--spacing-lg); margin-bottom:var(--spacing-md); }
.cart-page-grid{ display:grid; grid-template-columns:1fr 380px; gap:var(--spacing-lg); align-items:start; padding-bottom:var(--spacing-xl); }
.cart-list{ display:flex; flex-direction:column; gap:var(--spacing-sm); }
.cart-item{ display:flex; gap:var(--spacing-md); align-items:center; border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--spacing-sm); background:#fff; }
.cart-item .thumb{ width:76px; height:76px; background:var(--bg-primary); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex:none; }
.cart-item .thumb .icon{ width:56%; height:56%; color:var(--color-primary); }
.cart-item .info{ flex:1; min-width:0; }
.cart-item .info .name{ font:var(--font-title-md); margin-bottom:2px; }
.cart-item .info .brand{ font:var(--font-text-xs); color:var(--color-text-tertiary); margin-bottom:6px; }
.cart-item .unit-price{ font:var(--font-text-sm); color:var(--color-text-tertiary); }
.cart-item .actions{ display:flex; align-items:center; gap:var(--spacing-md); flex:none; }
.cart-item .line-total{ font:700 16px/1.2 var(--font-family); color:var(--color-text-primary); min-width:88px; text-align:right; }
.remove-btn{ background:none; border:none; color:var(--color-text-tertiary); padding:6px; }
.remove-btn:hover{ color:var(--error); }
.remove-btn .icon{ width:18px; height:18px; }

.summary-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--spacing-md); }
.summary-card h3{ font:var(--font-title-md); margin-bottom:var(--spacing-sm); }
.summary-row{ display:flex; justify-content:space-between; gap:var(--spacing-sm); font:var(--font-text-md); color:var(--color-text-secondary); margin-bottom:var(--spacing-xs); }
.summary-row.total{ font:var(--font-title-lg); color:var(--color-text-primary); border-top:1px solid var(--border); padding-top:var(--spacing-sm); margin-top:var(--spacing-sm); margin-bottom:var(--spacing-md); }
.summary-row .free{ color:var(--success-dark); font-weight:700; }

.empty-state{ text-align:center; padding:var(--spacing-xxl) var(--spacing-md); background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); grid-column:1/-1; }
.empty-state .icon{ width:64px; height:64px; color:var(--neutral-300); margin:0 auto var(--spacing-md); }
.empty-state p{ color:var(--color-text-tertiary); margin-bottom:var(--spacing-md); }

/* ============================================================
   Checkout: entrega / identificação
   ============================================================ */
.checkout-grid{ display:grid; grid-template-columns:1fr 380px; gap:var(--spacing-lg); align-items:start; padding-bottom:var(--spacing-xl); }
.checkout-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--spacing-md); margin-bottom:var(--spacing-md); }
.checkout-card h2{ font:var(--font-title-lg); margin-bottom:var(--spacing-md); }

.method-options{ display:flex; gap:var(--spacing-md); margin-bottom:var(--spacing-md); flex-wrap:wrap; }
.method-option{ flex:1 1 220px; border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--spacing-sm); cursor:pointer; display:flex; gap:10px; align-items:flex-start; background:#fff; }
.method-option .radio-dot{ margin-top:2px; }
.method-option.selected{ border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-light); }
.method-option .icon{ color:var(--color-primary); width:22px; height:22px; flex:none; }
.method-option strong{ display:block; font:var(--font-title-md); margin-bottom:2px; }
.method-option span{ font:var(--font-text-sm); color:var(--color-text-tertiary); }

.method-panel{ display:none; }
.method-panel.active{ display:block; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-sm); }
.form-grid .full{ grid-column:1/-1; }
.form-field label{ display:block; font:var(--font-label); color:var(--color-text-secondary); margin-bottom:6px; }

.store-pick{ border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--spacing-sm); margin-bottom:var(--spacing-sm); cursor:pointer; display:flex; align-items:flex-start; gap:10px; }
.store-pick.selected{ border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-light); }
.store-pick .radio-dot{ margin-top:2px; }

/* ============================================================
   Pagamento
   ============================================================ */
.pay-tabs{ display:flex; gap:4px; margin-bottom:var(--spacing-md); border-bottom:1px solid var(--border); }
.pay-tab{ padding:12px 18px; font:var(--font-button); color:var(--color-text-tertiary); border-bottom:2px solid transparent; display:flex; align-items:center; gap:8px; background:none; border-top:none; border-left:none; border-right:none; }
.pay-tab .icon{ width:18px; height:18px; }
.pay-tab.active{ color:var(--color-primary); border-bottom-color:var(--color-primary); }
.pay-panel{ display:none; }
.pay-panel.active{ display:block; }
.pix-box{ text-align:center; padding:var(--spacing-lg); border:1px dashed var(--border); border-radius:var(--radius-md); }
.pix-code{ display:flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin-top:var(--spacing-md); max-width:420px; margin-left:auto; margin-right:auto; }
.pix-code input{ flex:1; border:none; padding:10px 12px; color:var(--color-text-tertiary); background:var(--bg-primary); outline:none; }
.pix-code button{ border-radius:0; }
.installments-select{ width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px var(--spacing-sm); background:#fff; color:var(--color-text-primary); }
.boleto-box{ text-align:center; padding:var(--spacing-lg); border:1px dashed var(--border); border-radius:var(--radius-md); }
.boleto-box .icon{ width:48px; height:48px; color:var(--color-text-tertiary); margin:0 auto var(--spacing-sm); }

/* ============================================================
   Confirmação
   ============================================================ */
.confirm-box{ max-width:640px; margin:0 auto; text-align:center; padding:var(--spacing-xxl) 0 var(--spacing-xl); }
.confirm-icon{ width:80px; height:80px; color:var(--success); margin:0 auto var(--spacing-md); }
.confirm-box h1{ font:var(--font-title-xl); margin-bottom:8px; }
.confirm-box > p{ color:var(--color-text-tertiary); }
.order-number{ display:inline-block; background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 16px; font-weight:700; margin:var(--spacing-sm) 0 var(--spacing-lg); }
.confirm-summary{ text-align:left; border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--spacing-md); margin-bottom:var(--spacing-lg); background:#fff; }
.confirm-summary h3{ font:var(--font-title-md); margin-bottom:var(--spacing-sm); }
.confirm-actions{ display:flex; gap:var(--spacing-sm); justify-content:center; flex-wrap:wrap; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1023px){
  .features-row{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:repeat(3,1fr); }
  .product-layout{ grid-template-columns:1fr; }
  .purchase-col{ order:-1; }
  .cart-page-grid, .checkout-grid{ grid-template-columns:1fr; }
}

@media (max-width:767px){
  .topbar .container{ justify-content:flex-start; overflow-x:auto; gap:var(--spacing-md); }
  .header-row{ flex-wrap:wrap; }
  .search-form{ order:3; max-width:none; flex-basis:100%; }
  .header-actions{ margin-left:auto; gap:var(--spacing-md); }
  .header-link span:not(.icon){ display:none; }
  .header-link{ position:relative; }
  .category-nav ul{ gap:var(--spacing-md); }
  .features-row{ grid-template-columns:1fr 1fr; gap:var(--spacing-sm); }
  .feature-item span{ font-size:12px; }
  .section{ padding-top:var(--spacing-lg); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .campaign-banner{ flex-direction:column; text-align:center; }
  .campaign-banner .side-a, .campaign-banner .side-b{ text-align:center; max-width:none; }
  .app-promo{ flex-direction:column; text-align:center; }
  .app-promo .qr-card{ flex-direction:column; }
  .cart-item{ flex-wrap:wrap; }
  .cart-item .actions{ margin-left:auto; }
  .cart-item .line-total{ width:100%; text-align:left; order:3; }
  .form-grid{ grid-template-columns:1fr; }
  .method-options{ flex-direction:column; }
  .checkout-steps .step span:not(.num){ display:none; }
  .confirm-actions{ flex-direction:column; }
  .confirm-actions .btn{ width:100%; }
}