/* ============================================================
   COTONET SKATE SHOP — E-COMMERCE PROFISSIONAL
   ============================================================ */

/* ---------- RESET & VARIABLES ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --black:     #0a0a0a;
  --dark:      #111111;
  --dark2:     #1a1a1a;
  --dark3:     #222222;
  --border:    #2a2a2a;
  --border2:   #333333;
  --accent:    #e8c832;
  --accent2:   #c8a820;
  --red:       #e83232;
  --white:     #ffffff;
  --off-white: #f5f5f5;
  --gray1:     #cccccc;
  --gray2:     #888888;
  --gray3:     #555555;
  --font-head: 'Bebas Neue', sans-serif;
  --font-ui:   'Inter', sans-serif;
  --header-h:  72px;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --max-w:     1360px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.6);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.8);
  --t:  .22s ease;
  --t2: .35s ease;
}

html { scroll-behavior: smooth; font-size: 16px; }
body { background: var(--black); color: var(--white); font-family: var(--font-ui); line-height: 1.6; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea { font-family: inherit; outline: none; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }
.section { padding: 6rem 0; }

/* ===== SECTION HEADINGS ===== */
.sec-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--accent); display: block; margin-bottom: .4rem; }
.sec-title {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  letter-spacing: 1px;
  color: var(--white);
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: .4rem;
}
.sec-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border2), transparent); }
.sec-sub { color: var(--gray2); font-size: .9rem; margin-bottom: 2.5rem; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.75rem;
  font-family: var(--font-head); font-size: 1rem; letter-spacing: 1.5px;
  border-radius: var(--radius-sm); transition: all var(--t); white-space: nowrap;
}
.btn--primary { background: var(--accent); color: var(--black); }
.btn--primary:hover { background: var(--accent2); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232,200,50,.2); }
.btn--outline { border: 1.5px solid var(--border2); color: var(--white); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.btn--dark { background: var(--dark3); color: var(--white); border: 1px solid var(--border); }
.btn--dark:hover { background: var(--accent); color: var(--black); border-color: var(--accent); }
.btn--ghost { color: var(--gray1); padding-left: 0; padding-right: 0; border-radius: 0; border-bottom: 1.5px solid transparent; }
.btn--ghost:hover { color: var(--accent); border-bottom-color: var(--accent); }
.btn--full { width: 100%; }
.btn--sm { padding: .5rem 1.1rem; font-size: .88rem; }
.btn--lg { padding: 1rem 2.5rem; font-size: 1.15rem; }

/* ===== TAGS ===== */
.tag { display: inline-block; padding: .2rem .65rem; border-radius: 3px; font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.tag--new  { background: var(--accent); color: var(--black); }
.tag--sale { background: var(--red); color: var(--white); }
.tag--hot  { background: #e87832; color: var(--white); }

/* ===== LOADER ===== */
#loader { position: fixed; inset: 0; z-index: 9999; background: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; transition: opacity .6s, visibility .6s; }
#loader.hidden { opacity: 0; visibility: hidden; }
.loader-logo { height: 52px; width: auto; animation: lPulse 1s ease infinite alternate; filter: invert(1); }
.loader-bar { width: 180px; height: 2px; background: var(--dark3); border-radius: 2px; overflow: hidden; }
.loader-fill { height: 100%; background: var(--accent); animation: lFill 1.2s ease-in-out forwards; }
.loader-txt { font-family: var(--font-head); font-size: .9rem; letter-spacing: 5px; color: var(--gray3); }
@keyframes lPulse { from { opacity: .3; } to { opacity: 1; } }
@keyframes lFill  { from { width: 0; } to { width: 100%; } }

/* ===== PROMO STRIP ===== */
.promo-strip { background: var(--accent); color: var(--black); text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: 2px; padding: .45rem 1rem; text-transform: uppercase; position: relative; z-index: 200; }

/* ===== HEADER ===== */
#header { position: sticky; top: 0; background: rgba(10,10,10,.95); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); z-index: 1000; height: var(--header-h); display: flex; align-items: center; }
.header-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3rem; }
.header-logo img { height: 42px; width: auto; display: block; filter: invert(1); }
.header-logo:hover img { opacity: .85; transition: opacity var(--t); }

.header-nav { display: flex; align-items: center; gap: 2.5rem; }
.header-nav a { font-size: .87rem; font-weight: 500; letter-spacing: .3px; color: var(--gray1); transition: color var(--t); position: relative; padding-bottom: 2px; }
.header-nav a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 100%; height: 1.5px; background: var(--accent); transition: right var(--t2); }
.header-nav a:hover { color: var(--white); }
.header-nav a:hover::after { right: 0; }

/* ===== NAV DROPDOWN ===== */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a { display: flex; align-items: center; gap: .35rem; }
.nav-arrow { font-size: .6rem; transition: transform var(--t); }
.nav-item:hover .nav-arrow { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--dark2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: .4rem;
  min-width: 172px;
  display: flex; flex-direction: column; gap: .1rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t2), visibility var(--t2), transform var(--t2);
  box-shadow: var(--shadow-md);
  z-index: 100;
}
.nav-dropdown-menu::before {
  content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.nav-item:hover .nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  padding: .55rem .85rem;
  border-radius: var(--radius-sm);
  color: var(--gray1);
  font-size: .84rem; font-weight: 500;
  display: flex; align-items: center; gap: .65rem;
  transition: background var(--t), color var(--t);
  white-space: nowrap; letter-spacing: .2px;
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:hover { background: var(--dark3); color: var(--accent); }

/* Mobile nav categories */
.mobile-nav-cats { display: flex; flex-direction: column; gap: .15rem; padding: 0 0 .75rem 1.5rem; border-bottom: 1px solid var(--border); }
.mobile-nav-cat { font-family: var(--font-ui) !important; font-size: 1.05rem !important; letter-spacing: .2px !important; color: var(--gray2) !important; border-bottom: none !important; padding-bottom: .45rem !important; display: flex !important; align-items: center; gap: .6rem; }
.mobile-nav-cat:hover { color: var(--accent) !important; }

.header-actions { display: flex; align-items: center; gap: .5rem; }
.hdr-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--gray1); border-radius: var(--radius-sm); font-size: 1rem; transition: color var(--t), background var(--t); position: relative; }
.hdr-btn:hover { color: var(--white); background: var(--dark3); }
.cart-badge { position: absolute; top: 5px; right: 5px; min-width: 15px; height: 15px; background: var(--accent); color: var(--black); border-radius: 8px; font-size: .58rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; }

#hamburger { display: none; }

/* Search overlay */
.search-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.94); z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; opacity: 0; visibility: hidden; transition: opacity var(--t2), visibility var(--t2); }
.search-overlay.open { opacity: 1; visibility: visible; }
.search-box { width: 100%; max-width: 640px; padding: 0 2rem; }
.search-inner { display: flex; align-items: center; border-bottom: 2px solid var(--accent); padding-bottom: 1rem; gap: 1rem; }
.search-inner input { flex: 1; background: none; border: none; font-size: 2.2rem; color: var(--white); font-family: var(--font-head); letter-spacing: 1px; }
.search-inner input::placeholder { color: var(--gray3); }
#search-close { color: var(--gray2); font-size: 1.2rem; transition: color var(--t); flex-shrink: 0; }
#search-close:hover { color: var(--white); }
.search-hint { color: var(--gray3); font-size: .82rem; margin-top: 1rem; }

/* Mobile nav */
.mobile-nav { position: fixed; inset: 0; top: var(--header-h); background: var(--dark); z-index: 999; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; transform: translateX(100%); transition: transform .35s cubic-bezier(.25,.8,.25,1); border-top: 1px solid var(--border); overflow-y: auto; }
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a { font-family: var(--font-head); font-size: 1.8rem; letter-spacing: 1.5px; color: var(--gray1); border-bottom: 1px solid var(--border); padding-bottom: 1rem; transition: color var(--t); display: flex; align-items: center; justify-content: space-between; }
.mobile-nav a:hover { color: var(--accent); }

/* ===== HERO ===== */
.hero { min-height: calc(100vh - var(--header-h) - 34px); display: flex; justify-content: center; background: var(--dark); }
.hero-left { background: var(--dark); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 5rem 2rem; max-width: 800px; width: 100%; gap: 2rem; position: relative; }
.hero-left::after { display: none; }

.hero-eyebrow { display: flex; align-items: center; gap: .75rem; font-size: .75rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem; }
.hero-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--accent); }

.hero-title { font-family: var(--font-head); font-size: clamp(3.5rem, 6vw, 7rem); line-height: .9; letter-spacing: -1px; color: var(--white); margin-bottom: 1.5rem; }
.hero-title em { display: block; font-style: normal; color: var(--accent); }

.hero-desc { color: var(--gray2); font-size: .97rem; max-width: 400px; margin-bottom: 2.5rem; line-height: 1.75; }

.hero-cta { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 4rem; justify-content: center; }

.hero-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.hm-item { padding: 1.5rem; border-right: 1px solid var(--border); background: var(--black); }
.hm-item:last-child { border-right: none; }
.hm-num { font-family: var(--font-head); font-size: 2.2rem; color: var(--accent); display: block; line-height: 1; }
.hm-label { font-size: .72rem; color: var(--gray3); text-transform: uppercase; letter-spacing: 2px; margin-top: .3rem; display: block; }

.hero-right { background: var(--black); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hero-right::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 40%, rgba(232,200,50,.06) 0%, transparent 65%); pointer-events: none; }
.hero-right::after { content: 'SKATE'; position: absolute; font-family: var(--font-head); font-size: 16rem; color: rgba(255,255,255,.025); line-height: 1; bottom: -3rem; right: -3rem; pointer-events: none; }

.hero-cards { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.25rem; animation: hFloat 5s ease-in-out infinite; }
.hero-card { display: flex; align-items: center; gap: 1.2rem; background: var(--dark); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.4rem; width: 310px; transition: border-color var(--t), transform var(--t); }
.hero-card:hover { border-color: var(--accent); transform: translateX(5px); }
.hero-card:nth-child(2) { margin-left: 2.5rem; }
.hero-card:nth-child(3) { margin-left: 1.2rem; }
.hc-thumb { width: 56px; height: 56px; background: var(--dark3); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; flex-shrink: 0; border: 1px solid var(--border); }
.hc-brand { font-size: .65rem; font-weight: 700; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; display: block; }
.hc-name { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: .2rem 0; }
.hc-price { font-family: var(--font-head); font-size: 1.1rem; }
.hc-add { width: 32px; height: 32px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--black); flex-shrink: 0; transition: transform var(--t); font-size: .85rem; }
.hc-add:hover { transform: scale(1.15); }

@keyframes hFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ===== MARQUEE ===== */
.marquee { background: var(--accent); overflow: hidden; padding: .55rem 0; }
.marquee-inner { display: flex; animation: marquee 26s linear infinite; width: max-content; }
.marquee-item { display: flex; align-items: center; gap: 1.5rem; padding: 0 2rem; font-family: var(--font-head); font-size: .85rem; letter-spacing: 3px; color: var(--black); white-space: nowrap; }
.marquee-dot { width: 4px; height: 4px; background: rgba(0,0,0,.35); border-radius: 50%; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== CATEGORIES ===== */
.cat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cat-cell { background: var(--dark); padding: 2.5rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .7rem; cursor: pointer; text-align: center; position: relative; overflow: hidden; transition: background var(--t); }
.cat-cell::before { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform var(--t2); z-index: 0; }
.cat-cell:hover::before { transform: scaleY(1); }
.cat-cell > * { position: relative; z-index: 1; transition: color var(--t); }
.cat-cell:hover .cat-icon { background: var(--black); }
.cat-cell:hover .cat-lbl { color: var(--black); }
.cat-cell:hover .cat-qty { color: rgba(0,0,0,.5); }
.cat-icon { width: 50px; height: 50px; background: var(--dark3); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; transition: background var(--t); }
.cat-lbl { font-family: var(--font-head); font-size: 1rem; letter-spacing: 1.5px; color: var(--white); }
.cat-qty { font-size: .72rem; color: var(--gray3); }

/* ===== PRODUCTS ===== */
.filter-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
.chip { padding: .42rem 1.1rem; border-radius: 100px; font-size: .8rem; font-weight: 500; border: 1px solid var(--border2); color: var(--gray2); background: transparent; transition: all var(--t); cursor: pointer; }
.chip:hover { border-color: var(--gray3); color: var(--white); }
.chip.on { background: var(--accent); color: var(--black); border-color: var(--accent); font-weight: 700; }

/* ── Botão de filtros avançados ───────────────────────────────── */
.filter-adv-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .79rem;
  font-weight: 600;
  font-family: var(--font-ui);
  border: 1px solid var(--border2);
  color: var(--gray2);
  background: var(--dark2);
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s, box-shadow .18s;
  white-space: nowrap;
  line-height: 1;
}
.filter-adv-btn i { font-size: .75rem; }
.filter-adv-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232,200,50,.06);
}
.filter-adv-btn.on {
  border-color: var(--accent);
  color: var(--black);
  background: var(--accent);
  box-shadow: 0 2px 10px rgba(232,200,50,.22);
}
.filter-adv-btn.on i { color: var(--black); }

.filter-adv-badge {
  background: rgba(0,0,0,.45);
  color: var(--accent);
  border-radius: 4px;
  min-width: 16px;
  height: 16px;
  font-size: .58rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  padding: 0 3px;
  line-height: 1;
}
.filter-adv-btn.on .filter-adv-badge { background: rgba(0,0,0,.28); color: var(--black); }

/* ── Painel de filtros ───────────────────────────────────────── */
.filter-panel {
  display: none;
  margin-top: .75rem;
  margin-bottom: 2rem;
  background: var(--dark2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
}
.filter-panel.open { display: block; animation: fpIn .2s ease; }
@keyframes fpIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Grade de grupos */
.fp-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.fp-group {
  padding: 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  border-right: 1px solid var(--border);
}
.fp-group:last-child { border-right: none; }

.fp-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
.fp-label i { font-size: .6rem; }

/* Select */
.fp-select-wrap { position: relative; }
.fp-select {
  width: 100%;
  background: var(--dark3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--white);
  padding: .48rem .7rem;
  padding-right: 2rem;
  font-size: .81rem;
  font-family: var(--font-ui);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .18s;
}
.fp-select:focus { border-color: var(--accent); }
.fp-select option { background: var(--dark3); color: var(--white); }
.fp-select-arrow {
  position: absolute;
  right: .65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .58rem;
  color: var(--gray3);
  pointer-events: none;
}

/* Faixa de preço */
.fp-price-wrap { display: flex; align-items: center; gap: .5rem; }
.fp-price-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--dark3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .18s;
}
.fp-price-field:focus-within { border-color: var(--accent); }
.fp-price-prefix {
  padding: 0 .35rem 0 .6rem;
  font-size: .7rem;
  color: var(--gray3);
  font-weight: 600;
  flex-shrink: 0;
  line-height: 1;
}
.fp-price-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--white);
  padding: .48rem .4rem .48rem 0;
  font-size: .81rem;
  font-family: var(--font-ui);
  outline: none;
}
.fp-price-input::-webkit-inner-spin-button,
.fp-price-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fp-price-input[type=number] { -moz-appearance: textfield; }
.fp-price-sep {
  width: 10px;
  height: 2px;
  background: var(--border2);
  border-radius: 1px;
  flex-shrink: 0;
}

/* Tags de destaque */
.fp-badge-row { display: flex; gap: .35rem; flex-wrap: wrap; }
.fp-tag {
  padding: .3rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .74rem;
  font-weight: 600;
  font-family: var(--font-ui);
  border: 1px solid var(--border2);
  color: var(--gray2);
  background: var(--dark3);
  cursor: pointer;
  transition: all .15s;
  line-height: 1.4;
}
.fp-tag:hover { border-color: var(--gray2); color: var(--white); }
.fp-tag.on {
  background: rgba(232,200,50,.1);
  color: var(--accent);
  border-color: var(--accent);
}

/* Toggle de disponibilidade */
.fp-group--check { justify-content: flex-start; }
.fp-toggle {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  cursor: pointer;
  user-select: none;
  width: fit-content;
}
.fp-toggle > input[type="checkbox"] { display: none; }
.fp-toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--dark3);
  border: 1px solid var(--border2);
  border-radius: 10px;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.fp-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gray3);
  transition: transform .2s ease, background .2s;
}
.fp-toggle > input[type="checkbox"]:checked + .fp-toggle-track {
  background: rgba(232,200,50,.12);
  border-color: var(--accent);
}
.fp-toggle > input[type="checkbox"]:checked + .fp-toggle-track .fp-toggle-thumb {
  transform: translateX(16px);
  background: var(--accent);
}
.fp-toggle-lbl { font-size: .81rem; color: var(--gray2); transition: color .15s; line-height: 1; }
.fp-toggle:hover .fp-toggle-lbl { color: var(--white); }

/* Rodapé do painel */
.fp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1.4rem;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.15);
}
.fp-count { font-size: .77rem; color: var(--gray2); font-weight: 500; }
.fp-count strong { color: var(--accent); font-weight: 700; }
.fp-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .74rem;
  font-weight: 600;
  font-family: var(--font-ui);
  color: var(--gray3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: .28rem .6rem;
  transition: color .15s, border-color .15s, background .15s;
}
.fp-clear-btn:hover { color: var(--white); border-color: var(--border2); background: var(--dark3); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }

/* Product Card */
.pc { background: var(--dark); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color var(--t), box-shadow var(--t), transform var(--t); display: flex; flex-direction: column; position: relative; }
.pc:hover { border-color: var(--border2); box-shadow: 0 12px 40px rgba(0,0,0,.65); transform: translateY(-4px); }
.pc.hide { display: none; }
.pc.hidden-search { display: none; }
.pc-badge { position: absolute; top: 12px; left: 12px; z-index: 3; }

.pc-media { position: relative; background: var(--dark2); aspect-ratio: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pc-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform .5s ease; }
.pc:hover .pc-img { transform: scale(1.04); }

.pc-actions { position: absolute; bottom: 0; left: 0; right: 0; display: flex; transform: translateY(100%); transition: transform var(--t2); }
.pc:hover .pc-actions { transform: translateY(0); }
.pca-btn { flex: 1; padding: .7rem; background: rgba(10,10,10,.92); backdrop-filter: blur(8px); color: var(--white); font-size: .78rem; font-weight: 600; letter-spacing: .4px; display: flex; align-items: center; justify-content: center; gap: .35rem; transition: background var(--t), color var(--t); border-right: 1px solid var(--border); }
.pca-btn:last-child { border-right: none; }
.pca-btn:hover { background: var(--accent); color: var(--black); }

.pc-body { padding: 1.2rem; flex: 1; display: flex; flex-direction: column; }
.pc-brand-lbl { font-size: .68rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: .35rem; }
.pc-name { font-weight: 600; font-size: .93rem; color: var(--white); margin-bottom: .5rem; line-height: 1.4; }
.pc-stars { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--accent); margin-bottom: .8rem; }
.pc-stars span { color: var(--gray3); margin-left: .1rem; }
.pc-pricing { display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1rem; margin-top: auto; }
.pc-price { font-family: var(--font-head); font-size: 1.35rem; color: var(--white); }
.pc-was { font-size: .82rem; color: var(--gray3); text-decoration: line-through; }

.btn-cart { width: 100%; padding: .68rem; background: var(--dark3); border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--white); font-family: var(--font-head); font-size: .9rem; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; gap: .5rem; transition: all var(--t); }
.btn-cart:hover { background: var(--accent); color: var(--black); border-color: var(--accent); }
.btn-cart.added { background: #1e3d1e; border-color: #2d5a2d; color: #5fcf5f; }

/* Produtos — estado vazio */
.products-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 5rem 2rem;
  color: var(--gray3);
  text-align: center;
  width: 100%;
}
.products-empty-state i { font-size: 3.5rem; color: var(--border2); }
.products-empty-state p { font-size: .95rem; }
.products-empty-state a { color: var(--accent); text-decoration: underline; font-size: .88rem; }

/* ===== PRODUCT ILLUSTRATIONS ===== */
.pv { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

/* Shape */
.ipv-shape { width: 50px; height: 140px; border-radius: 13px 13px 9px 9px; position: relative; box-shadow: 5px 5px 0 rgba(0,0,0,.5); animation: pvFloat 4s ease-in-out infinite; }
.ipv-shape::after { content: ''; position: absolute; inset: 7px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px, transparent 1px, transparent 8px); border-radius: 7px; }
.s-blue   { background: linear-gradient(160deg, #1e3c72, #2a5298); }
.s-purple { background: linear-gradient(160deg, #2d1b69, #6a3093); }
.s-dark   { background: linear-gradient(160deg, #0f2027, #203a43); }

/* Truck */
.ipv-truck { width: 140px; height: 90px; position: relative; display: flex; align-items: center; justify-content: center; animation: pvFloat 3.5s ease-in-out infinite; }
.t-axle { position: absolute; width: 130px; height: 5px; background: linear-gradient(90deg, #444, #ccc, #555, #ccc, #444); border-radius: 3px; z-index: 2; }
.t-hanger { position: absolute; width: 86px; height: 12px; background: linear-gradient(180deg, #aaa, #444); border-radius: 4px; top: 28px; z-index: 3; }
.t-baseplate { position: absolute; width: 48px; height: 16px; background: linear-gradient(90deg, #666, #bbb, #666); border-radius: 4px; bottom: 14px; z-index: 2; }
.t-wheel { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c0c0c0, #1a1a1a); border: 2.5px solid #888; position: absolute; animation: pvSpin 2.5s linear infinite; z-index: 4; }
.t-wl { left: 2px; top: 50%; transform: translateY(-50%); }
.t-wr { right: 2px; top: 50%; transform: translateY(-50%); }

/* Wheels */
.ipv-wheels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; animation: pvFloat 3s ease-in-out infinite; }
.iw { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: pvSpin 3s linear infinite; }
.iw::after { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--dark3); border: 1.5px solid rgba(255,255,255,.12); }
.iw-red   { background: radial-gradient(circle at 35% 35%, #ff7733, #aa2200); box-shadow: 0 0 12px rgba(255,80,0,.25); }
.iw-blue  { background: radial-gradient(circle at 35% 35%, #66aaff, #0033aa); box-shadow: 0 0 12px rgba(50,120,255,.25); }
.iw-wht   { background: radial-gradient(circle at 35% 35%, #fff, #999); }
.iw-blk   { background: radial-gradient(circle at 35% 35%, #555, #111); }

/* Bearings */
.ipv-bearings { display: flex; gap: 1.5rem; animation: pvFloat 3s ease-in-out infinite; }
.ib { width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(#888 0%, #eee 25%, #888 50%, #eee 75%, #888 100%); border: 3px solid #aaa; display: flex; align-items: center; justify-content: center; animation: pvSpin .9s linear infinite; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.ib::after { content: ''; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #888, #1a1a1a); border: 2px solid #555; }

/* Shoe */
.ipv-shoe { position: relative; animation: pvFloat 3.2s ease-in-out infinite; }
.sh-body { width: 116px; height: 55px; background: linear-gradient(135deg, #1a1a1a, #2d2d2d); border-radius: 50% 60% 12% 12% / 70% 80% 20% 20%; border: 1.5px solid #2a2a2a; position: relative; }
.sh-tongue { position: absolute; width: 28px; height: 22px; background: linear-gradient(180deg, #2d2d2d, #1a1a1a); border-radius: 4px 4px 0 0; top: 0; left: 18px; }
.sh-laces { position: absolute; width: 68px; height: 30px; top: 8px; left: 22px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0px, rgba(255,255,255,.1) 2px, transparent 2px, transparent 12px); }
.sh-sole { width: 124px; height: 14px; background: linear-gradient(90deg, #b89000, var(--accent), #b89000); border-radius: 3px 3px 7px 7px; margin-left: -4px; }

/* T-Shirt */
.ipv-shirt { position: relative; animation: pvFloat 3s ease-in-out infinite; }
.st-body { width: 72px; height: 76px; background: linear-gradient(160deg, #cc1111, #880000); border-radius: 0 0 8px 8px; margin: 0 auto; }
.st-sleeve-l { width: 28px; height: 28px; background: linear-gradient(135deg, #cc1111, #880000); border-radius: 0 0 0 6px; transform: rotate(-15deg); position: absolute; top: 0; left: 0; }
.st-sleeve-r { width: 28px; height: 28px; background: linear-gradient(135deg, #880000, #cc1111); border-radius: 0 0 6px 0; transform: rotate(15deg); position: absolute; top: 0; right: 0; }

/* Helmet */
.ipv-helmet { animation: pvFloat 3s ease-in-out infinite; }
.hm-shell { width: 88px; height: 65px; background: linear-gradient(135deg, #1a1a2e, #2d2d4e, #1a1a2e); border-radius: 50% 50% 20% 20% / 65% 65% 35% 35%; position: relative; border: 1.5px solid var(--border2); }
.hm-visor { position: absolute; bottom: -2px; left: 5%; right: 5%; height: 13px; background: var(--dark3); border-radius: 0 0 5px 5px; border: 1.5px solid var(--border2); border-top: none; }
.hm-vent { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 36px; height: 7px; background: var(--dark3); border-radius: 3px; border: 1px solid var(--border); }

/* Skate tool */
.ipv-tool { animation: pvFloat 2.8s ease-in-out infinite; }
.tl-body { width: 26px; height: 96px; background: linear-gradient(180deg, #ddd, #999, #ddd); border-radius: 7px 7px 5px 5px; position: relative; margin: 0 auto; }
.tl-body::before, .tl-body::after { content: ''; width: 52px; height: 13px; background: linear-gradient(90deg, #bbb, #eee, #bbb); border-radius: 4px; position: absolute; left: 50%; transform: translateX(-50%); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.tl-body::before { top: 7px; }
.tl-body::after  { bottom: 7px; }

/* Grip tape */
.ipv-grip { width: 108px; height: 72px; border-radius: 6px; border: 1.5px solid var(--border2); animation: pvFloat 3s ease-in-out infinite; background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 1px, transparent 1px, transparent 5px), #111; }

@keyframes pvFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pvSpin  { to { transform: rotate(360deg); } }

/* ===== PROMO BANNER ===== */
.promo-band { background: var(--accent); padding: 5rem 2rem; text-align: center; position: relative; overflow: hidden; }
.promo-band::before { content: 'SKATE'; position: absolute; font-family: var(--font-head); font-size: 18rem; color: rgba(0,0,0,.05); line-height: 1; top: -3rem; left: -3rem; pointer-events: none; }
.promo-band::after { content: 'LIFE'; position: absolute; font-family: var(--font-head); font-size: 18rem; color: rgba(0,0,0,.05); line-height: 1; bottom: -3rem; right: -3rem; pointer-events: none; }
.promo-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.promo-inner h2 { font-family: var(--font-head); font-size: clamp(2.5rem, 5vw, 5rem); color: var(--black); letter-spacing: 1px; line-height: 1; margin-bottom: .75rem; }
.promo-inner p { color: rgba(0,0,0,.6); font-size: 1rem; margin-bottom: 2rem; }
.promo-inner .btn--primary { background: var(--black); color: var(--white); }
.promo-inner .btn--primary:hover { background: var(--dark3); }

/* ===== BRANDS ===== */
.brands-row { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.brand-cell { background: var(--dark); padding: 1.75rem 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--t); }
.brand-cell:hover { background: var(--dark3); }
.brand-cell span { font-family: var(--font-head); font-size: 1rem; letter-spacing: 2.5px; color: var(--gray3); transition: color var(--t); }
.brand-cell:hover span { color: var(--accent); }
.brands-row2 { margin-top: 1px; grid-template-columns: repeat(5,1fr); }

/* ===== ABOUT ===== */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.about-visual { position: relative; aspect-ratio: 1; max-width: 480px; }
.about-board-frame { width: 100%; height: 100%; background: var(--dark); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.about-board-frame::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(232,200,50,.05), transparent 70%); }
.ab-shape { width: 86px; height: 250px; background: linear-gradient(170deg, #1e3c72, #2a5298, #0d1f4a); border-radius: 16px 16px 11px 11px; border: 1.5px solid rgba(232,200,50,.15); box-shadow: 0 0 40px rgba(232,200,50,.08), 16px 16px 50px rgba(0,0,0,.6); transform: rotate(-5deg); animation: abFloat 5s ease-in-out infinite; position: relative; z-index: 1; }
.ab-shape::after { content: ''; position: absolute; inset: 10px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 10px); border-radius: 8px; }
.about-num { position: absolute; font-family: var(--font-head); font-size: 7rem; color: var(--border); line-height: 1; }
.about-num.a1 { bottom: -1rem; left: -1rem; }
.about-num.a2 { top: -1rem; right: -1rem; }

.about-text p { color: var(--gray2); font-size: .95rem; line-height: 1.8; margin-bottom: 1.1rem; }
.about-text strong { color: var(--white); }
.about-feats { display: flex; flex-direction: column; gap: .75rem; margin: 1.75rem 0 2rem; }
.about-feat { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.2rem; background: var(--dark); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); transition: transform var(--t); }
.about-feat:hover { transform: translateX(4px); }
.feat-ico { color: var(--accent); font-size: 1.1rem; width: 18px; flex-shrink: 0; margin-top: 2px; }
.feat-strong { display: block; font-size: .92rem; font-weight: 600; margin-bottom: .15rem; }
.feat-small { color: var(--gray3); font-size: .8rem; }

@keyframes abFloat { 0%,100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-12px); } }

/* ===== CONTACT ===== */
.contact-split { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: start; }
.contact-list { display: flex; flex-direction: column; gap: .85rem; margin-top: 1.5rem; }
.ci { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: var(--dark); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--t); }
.ci:hover { border-color: var(--accent); }
.ci-ico { width: 38px; height: 38px; background: var(--dark3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.ci-lbl { font-size: .7rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray3); display: block; }
.ci-val { font-size: .92rem; color: var(--white); }

.contact-form { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.ff input, .ff textarea { width: 100%; padding: .88rem 1.1rem; background: var(--dark); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--white); font-size: .92rem; transition: border-color var(--t), box-shadow var(--t); }
.ff input:focus, .ff textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,200,50,.1); }
.ff input::placeholder, .ff textarea::placeholder { color: var(--gray3); }
.ff textarea { resize: vertical; min-height: 120px; }
.form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ===== FOOTER ===== */
.footer { background: var(--dark); border-top: 1px solid var(--border); }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; padding: 4rem 0 3rem; border-bottom: 1px solid var(--border); }
.ft-logo img { height: 38px; margin-bottom: 1rem; filter: invert(1); }
.ft-about-text { color: var(--gray2); font-size: .88rem; line-height: 1.7; max-width: 260px; margin-bottom: 1.5rem; }
.socials { display: flex; gap: .5rem; }
.soc { width: 34px; height: 34px; background: var(--dark3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gray2); font-size: .85rem; border: 1px solid var(--border); transition: all var(--t); }
.soc:hover { background: var(--accent); color: var(--black); border-color: var(--accent); }
.fc h5 { font-family: var(--font-head); font-size: .85rem; letter-spacing: 2px; text-transform: uppercase; color: var(--white); margin-bottom: 1.1rem; }
.fc ul { display: flex; flex-direction: column; gap: .55rem; }
.fc ul a { color: var(--gray2); font-size: .86rem; transition: color var(--t), padding-left var(--t); }
.fc ul a:hover { color: var(--accent); padding-left: .35rem; }
.nl-desc { color: var(--gray2); font-size: .86rem; margin-bottom: .9rem; }
.nl-form { display: flex; }
.nl-form input { flex: 1; padding: .7rem .9rem; background: var(--dark2); border: 1px solid var(--border); border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); color: var(--white); font-size: .85rem; }
.nl-form input:focus { border-color: var(--accent); }
.nl-form input::placeholder { color: var(--gray3); }
.nl-form button { padding: .7rem 1.1rem; background: var(--accent); color: var(--black); font-family: var(--font-head); font-size: .85rem; letter-spacing: 1px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: background var(--t); }
.nl-form button:hover { background: var(--accent2); }
.pay-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.4rem; }
.pay { padding: .25rem .6rem; background: var(--dark3); border: 1px solid var(--border2); border-radius: 3px; font-size: .65rem; font-weight: 700; letter-spacing: 1px; color: var(--gray2); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 0; color: var(--gray3); font-size: .8rem; flex-wrap: wrap; gap: .5rem; }
.footer-bottom a { color: var(--gray3); transition: color var(--t); }
.footer-bottom a:hover { color: var(--accent); }

/* ===== CART DRAWER ===== */
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity var(--t2); }
.backdrop.on { opacity: 1; pointer-events: all; }
.cart-drawer { position: fixed; top: 0; right: -440px; width: 420px; max-width: 100vw; height: 100vh; background: var(--dark); border-left: 1px solid var(--border); z-index: 2001; display: flex; flex-direction: column; transition: right .38s cubic-bezier(.25,.8,.25,1); }
.cart-drawer.on { right: 0; }
.cd-head { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid var(--border); }
.cd-head h3 { font-family: var(--font-head); font-size: 1.15rem; letter-spacing: 2px; }
.cd-close { width: 34px; height: 34px; background: var(--dark3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gray2); transition: all var(--t); }
.cd-close:hover { background: var(--accent); color: var(--black); }
.cd-body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: .1rem; }
.cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--gray3); text-align: center; padding: 2rem; }
.cart-empty i { font-size: 3rem; color: var(--border2); }
.cart-empty small { font-size: .85rem; }
.cart-item-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.cir-thumb { width: 56px; height: 56px; background: var(--dark3); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; border: 1px solid var(--border); }
.cir-info { flex: 1; min-width: 0; }
.cir-name { font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cir-price { font-family: var(--font-head); font-size: 1rem; color: var(--accent); }
.cir-qty { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.qb { width: 26px; height: 26px; background: var(--dark3); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; border: 1px solid var(--border); transition: all var(--t); }
.qb:hover { background: var(--accent); color: var(--black); border-color: var(--accent); }
.qnum { font-size: .88rem; min-width: 18px; text-align: center; }
.cir-del { color: var(--gray3); font-size: .88rem; transition: color var(--t); margin-left: .25rem; }
.cir-del:hover { color: var(--red); }
.cd-foot { padding: 1.5rem; border-top: 1px solid var(--border); }
.cd-free-ship {
  background: var(--dark2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}
.cd-fs-msg {
  font-size: .78rem;
  color: var(--gray2);
  margin-bottom: .5rem;
  line-height: 1.4;
}
.cd-fs-msg strong { color: var(--white); }
.cd-fs-msg.done { color: #4ade80; font-weight: 600; }
.cd-fs-bar-wrap {
  background: var(--dark3);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}
.cd-fs-bar {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #e8c832, #ffd700);
  transition: width .4s ease;
  width: 0%;
}
.cd-fs-bar.done { background: #4ade80; }
.cd-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; }
.cd-row span { color: var(--gray2); font-size: .88rem; }
.cd-row strong { font-family: var(--font-head); font-size: 1.5rem; }
.cd-ship { font-size: .75rem; color: var(--gray3); margin-bottom: 1.2rem; }
.cd-btns { display: flex; flex-direction: column; gap: .75rem; }
#checkout-btn { background: #25d366; border-color: #25d366; color: #fff; }
#checkout-btn:hover { background: #1ebe5d; border-color: #1ebe5d; }

/* ===== TOAST ===== */
#toasts { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 5000; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.toast { display: flex; align-items: center; gap: .7rem; padding: .8rem 1.2rem; background: var(--dark2); border: 1px solid var(--border2); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-size: .88rem; max-width: 300px; animation: tIn .28s ease, tOut .3s 2.7s forwards; pointer-events: all; }
.toast i { color: var(--accent); flex-shrink: 0; }
@keyframes tIn  { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes tOut { to { transform: translateX(115%); opacity: 0; } }

/* ===== CHECKOUT OVERLAY ===== */
.co-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.8); z-index: 1700;
  opacity: 0; visibility: hidden; transition: opacity var(--t2), visibility var(--t2);
}
.co-backdrop.on { opacity: 1; visibility: visible; }

.co-overlay {
  position: fixed; inset: 0; z-index: 1800;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1.5rem; overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t2), visibility var(--t2);
}
.co-overlay.on { opacity: 1; visibility: visible; pointer-events: auto; }

.co-inner {
  background: var(--dark2); border: 1px solid var(--border2);
  border-radius: var(--radius-lg); width: 100%; max-width: 540px;
  margin: auto; position: relative; box-shadow: var(--shadow-lg);
  padding: 2rem 2rem 2.5rem;
  animation: coIn .3s ease;
}
@keyframes coIn { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.co-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 34px; height: 34px; background: var(--dark3); border-radius: 50%;
  color: var(--gray1); display: flex; align-items: center; justify-content: center;
  font-size: .9rem; transition: background var(--t), color var(--t);
}
.co-close:hover { background: var(--accent); color: var(--black); }

/* Step indicator */
.co-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: 2rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.co-step {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  flex-shrink: 0;
}
.co-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--dark3); border: 2px solid var(--border2);
  color: var(--gray3); font-weight: 700; font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t2);
}
.co-step-lbl { font-size: .72rem; color: var(--gray3); font-weight: 500; }
.co-step.active .co-step-num { background: var(--accent); border-color: var(--accent); color: var(--black); }
.co-step.active .co-step-lbl { color: var(--accent); }
.co-step.done .co-step-num { background: var(--dark3); border-color: var(--accent); color: var(--accent); }
.co-step.done .co-step-num::before { content: '✓'; }
.co-step.done .co-step-lbl { color: var(--gray2); }
.co-step-line { flex: 1; height: 2px; background: var(--border2); min-width: 40px; margin: 0 .5rem; }

/* Panel */
.co-panel-title {
  font-family: var(--font-head); font-size: 1.3rem; letter-spacing: 1px;
  margin-bottom: 1.25rem; display: flex; align-items: center; gap: .6rem;
  color: var(--white);
}
.co-panel-title i { color: var(--accent); font-size: 1rem; }

/* Form fields */
.co-form { display: flex; flex-direction: column; gap: .9rem; }
.co-field-row { display: flex; gap: .75rem; align-items: flex-end; }
.co-field { display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.co-field--cep { max-width: 180px; }
.co-field--num  { max-width: 110px; }
.co-field--uf   { max-width: 80px;  }
.co-field--grow { flex: 2; }
.co-field label { font-size: .76rem; font-weight: 600; color: var(--gray2); letter-spacing: .5px; text-transform: uppercase; }
.co-field input {
  background: var(--dark3); border: 1px solid var(--border2); border-radius: var(--radius-sm);
  padding: .65rem .9rem; color: var(--white); font-size: .9rem;
  transition: border-color var(--t), box-shadow var(--t);
  width: 100%;
}
.co-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,200,50,.12); }
.co-field input::placeholder { color: var(--gray3); }

.co-cep-wrap { display: flex; }
.co-cep-wrap input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.co-cep-btn {
  padding: 0 .9rem; background: var(--accent); color: var(--black);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .9rem; transition: background var(--t);
}
.co-cep-btn:hover { background: var(--accent2); }
.co-cep-btn:disabled { background: var(--gray3); cursor: not-allowed; }
.co-cep-link { font-size: .75rem; color: var(--accent); text-decoration: underline; white-space: nowrap; margin-left: .25rem; align-self: flex-end; margin-bottom: .1rem; }

.co-err { color: var(--red); font-size: .8rem; min-height: 1.1rem; }
.co-address-preview {
  background: var(--dark3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .75rem 1rem;
  font-size: .84rem; color: var(--gray1); margin-bottom: 1rem;
  border-left: 3px solid var(--accent);
}
.co-address-preview strong { color: var(--white); }

/* Shipping option cards */
.co-ship-options { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.co-ship-card {
  display: flex; align-items: center; gap: 1rem;
  background: var(--dark3); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  cursor: pointer; transition: border-color var(--t), background var(--t);
}
.co-ship-card:hover { border-color: var(--border2); }
.co-ship-card.selected { border-color: var(--accent); background: rgba(232,200,50,.06); }
.co-ship-card input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.co-ship-info { flex: 1; }
.co-ship-name { font-family: var(--font-head); font-size: 1.05rem; letter-spacing: 1px; color: var(--white); }
.co-ship-days { font-size: .78rem; color: var(--gray2); margin-top: .15rem; }
.co-ship-price { font-family: var(--font-head); font-size: 1.15rem; color: var(--accent); white-space: nowrap; }

/* Order summary */
.co-summary {
  background: var(--dark3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; margin-bottom: 1.25rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.co-summary-item { display: flex; align-items: center; gap: .75rem; }
.co-summary-thumb {
  width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--dark2);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  flex-shrink: 0; overflow: hidden;
}
.co-summary-thumb img { width: 100%; height: 100%; object-fit: cover; }
.co-summary-name { flex: 1; font-size: .85rem; color: var(--gray1); }
.co-summary-qty  { font-size: .78rem; color: var(--gray3); }
.co-summary-price { font-weight: 600; color: var(--white); white-space: nowrap; font-size: .88rem; }
.co-summary-divider { height: 1px; background: var(--border); }
.co-summary-row { display: flex; justify-content: space-between; font-size: .85rem; color: var(--gray2); }
.co-summary-row.total { color: var(--white); font-weight: 700; font-size: 1rem; margin-top: .15rem; }
.co-summary-row.total span:last-child { color: var(--accent); font-family: var(--font-head); font-size: 1.2rem; }

/* Payment section */
.co-pay-methods { display: flex; flex-direction: column; gap: .75rem; }
.co-pay-label { font-size: .78rem; font-weight: 600; color: var(--gray2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: .1rem; }
.co-pay-divider { display: flex; align-items: center; gap: .75rem; color: var(--gray3); font-size: .78rem; }
.co-pay-divider::before, .co-pay-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.co-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }

/* Loading spinner for CEP */
.co-loading-msg { font-size: .82rem; color: var(--gray2); display: flex; align-items: center; gap: .5rem; }
.co-loading-msg i { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 500px) {
  .co-inner { padding: 1.5rem 1.1rem 2rem; }
  .co-field-row { flex-wrap: wrap; }
  .co-field--cep, .co-field--num, .co-field--uf { max-width: 100%; }
  .co-step-lbl { display: none; }
  .co-step-line { min-width: 20px; }
}

/* ===== PRODUCT DETAIL OVERLAY ===== */
.pd-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 1500;
  opacity: 0; visibility: hidden; transition: opacity var(--t2), visibility var(--t2);
}
.pd-backdrop.on { opacity: 1; visibility: visible; }

.pd-overlay {
  position: fixed; inset: 0; z-index: 1600;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t2), visibility var(--t2);
}
.pd-overlay.on { opacity: 1; visibility: visible; pointer-events: auto; }

.pd-inner {
  background: var(--dark2); border: 1px solid var(--border2);
  border-radius: var(--radius-lg); width: 100%; max-width: 860px;
  display: grid; grid-template-columns: 1fr 1fr;
  position: relative; box-shadow: var(--shadow-lg);
  animation: pdIn .3s ease;
}
@keyframes pdIn { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.pd-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 10;
  width: 36px; height: 36px; background: var(--dark3); border-radius: 50%;
  color: var(--gray1); font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t);
}
.pd-close:hover { background: var(--accent); color: var(--black); }

.pd-media {
  background: var(--dark); position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 340px; border-radius: var(--radius-lg) 0 0 var(--radius-lg); overflow: hidden;
}
.pd-img { width: 100%; height: 100%; min-height: 340px; display: flex; align-items: center; justify-content: center; }
.pd-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-badge-wrap { position: absolute; top: 1rem; left: 1rem; }

.pd-info {
  padding: 2.5rem 2rem;
  display: flex; flex-direction: column; gap: 1.1rem;
  overflow-y: auto; max-height: 90vh;
}
.pd-brand { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: var(--accent); }
.pd-name { font-family: var(--font-head); font-size: clamp(1.4rem, 2.5vw, 2rem); letter-spacing: 1px; line-height: 1.2; margin-top: .2rem; }
.pd-stars { display: flex; align-items: center; gap: .35rem; color: var(--accent); font-size: .85rem; }
.pd-stars span { color: var(--gray3); font-size: .78rem; }
.pd-pricing { display: flex; align-items: baseline; gap: .8rem; }
.pd-price { font-family: var(--font-head); font-size: 2rem; letter-spacing: 1px; color: var(--accent); }
.pd-was { color: var(--gray3); font-size: .9rem; text-decoration: line-through; }
.pd-installments { font-size: .82rem; font-weight: 600; color: var(--gray2); letter-spacing: .3px; margin-top: 2px; display: block; }
.pd-desc { color: var(--gray2); font-size: .88rem; line-height: 1.75; }

.pd-qty-row { display: flex; align-items: center; justify-content: space-between; }
.pd-qty-label { font-size: .8rem; color: var(--gray2); font-weight: 500; }
.pd-qty-ctrl { display: flex; align-items: center; gap: .75rem; }
.pd-qb {
  width: 34px; height: 34px; background: var(--dark3); border-radius: var(--radius-sm);
  font-size: 1.2rem; color: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t);
}
.pd-qb:hover { background: var(--accent); color: var(--black); }
.pd-qnum { font-family: var(--font-head); font-size: 1.15rem; min-width: 28px; text-align: center; }

.pd-actions { display: flex; flex-direction: column; gap: .7rem; margin-top: auto; padding-top: .5rem; }

/* ===== PRODUCT DETAIL — Cores & Tamanhos ===== */
.pd-opt-label {
  font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--gray2); margin-bottom: .55rem;
}
.pd-colors { display: flex; flex-wrap: wrap; gap: .45rem; }
.pd-color-btn {
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem .65rem .3rem .4rem;
  border: 2px solid var(--border2); border-radius: 999px;
  background: var(--dark3); cursor: pointer;
  font-size: .78rem; color: var(--gray1);
  transition: border-color var(--t), color var(--t);
}
.pd-color-btn:hover { border-color: var(--gray2); color: var(--white); }
.pd-color-btn.active { border-color: var(--accent); color: var(--white); }
.pd-color-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--clr, #333); border: 1.5px solid rgba(255,255,255,.15); flex-shrink: 0;
}
.pd-sizes { display: flex; flex-wrap: wrap; gap: .45rem; }
.pd-size-btn {
  min-width: 50px; padding: .4rem .7rem;
  border: 2px solid var(--border2); border-radius: var(--radius-sm);
  background: var(--dark3); color: var(--gray1);
  font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.pd-size-btn:hover { border-color: var(--gray2); color: var(--white); }
.pd-size-btn.active { border-color: var(--accent); background: var(--accent); color: var(--black); }

@media (max-width: 620px) {
  .pd-inner { grid-template-columns: 1fr; }
  .pd-media { min-height: 220px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .pd-img { min-height: 220px; }
  .pd-info { padding: 1.5rem 1.25rem; max-height: none; }
}

/* ===== BACK TO TOP ===== */
#btt { position: fixed; bottom: 1.5rem; left: 1.5rem; width: 40px; height: 40px; background: var(--dark3); border: 1px solid var(--border2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gray2); font-size: .85rem; z-index: 900; opacity: 0; transform: translateY(12px) scale(.85); transition: all var(--t2); }
#btt.show { opacity: 1; transform: translateY(0) scale(1); }
#btt:hover { background: var(--accent); color: var(--black); border-color: var(--accent); }

/* ===== SCROLL REVEAL ===== */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.rv.in { opacity: 1; transform: translateY(0); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: 4rem 2rem; }
  .hero-right { display: none; }
  .about-split { grid-template-columns: 1fr; }
  .about-visual { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .cat-grid { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 768px) {
  :root { --header-h: 64px; }
  .header-nav { display: none; }
  #hamburger { display: flex; }
  .cat-grid { grid-template-columns: repeat(2,1fr); }
  .contact-split { grid-template-columns: 1fr; }
  .form-row2 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .brands-row { grid-template-columns: repeat(3,1fr); }
  .brands-row2 { grid-template-columns: repeat(2,1fr); }
  .hero-metrics { grid-template-columns: repeat(3,1fr); }
  .fp-inner { grid-template-columns: repeat(2, 1fr); }
  .fp-group:nth-child(2n) { border-right: none; }
  .fp-group:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 500px) {
  .product-grid { grid-template-columns: repeat(2,1fr); gap: .85rem; }
  .pc-body { padding: .85rem; }
  .pc-price { font-size: 1.1rem; }
  .pc-name { font-size: .82rem; }
  .filter-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .85rem; }
  .chip { flex-shrink: 0; }
  .filter-adv-btn { flex-shrink: 0; }
  .cat-grid { grid-template-columns: repeat(2,1fr); }
  .fp-inner { grid-template-columns: 1fr; }
  .fp-group { border-right: none; border-bottom: 1px solid var(--border); }
  .fp-group:last-child { border-bottom: none; }
  .fp-footer { flex-direction: column-reverse; align-items: flex-start; gap: .5rem; }
}

/* ============================================================
   AUTH MODAL & ACCOUNT
   ============================================================ */

/* Backdrop */
.auth-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  backdrop-filter: blur(5px); z-index: 1100;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.auth-backdrop.on { opacity: 1; pointer-events: all; }

/* Modal box */
.auth-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -46%);
  z-index: 1101; background: var(--dark);
  border: 1px solid var(--dark3); border-radius: 16px;
  width: calc(100% - 2rem); max-width: 480px;
  padding: 2.5rem 2rem; max-height: 90vh; overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.auth-modal.on { opacity: 1; pointer-events: all; transform: translate(-50%, -50%); }

/* Close button */
.auth-close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  background: var(--dark2); border: 1px solid var(--dark3);
  color: var(--gray3); border-radius: 50%;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .9rem; transition: all .2s;
}
.auth-close:hover { background: var(--dark3); color: var(--white); }

/* Brand */
.auth-brand {
  font-family: var(--font-head); font-size: 2.2rem;
  letter-spacing: 4px; color: var(--accent);
  text-align: center; margin-bottom: .25rem;
}
.auth-sub { text-align: center; color: var(--gray3); font-size: .82rem; margin-bottom: 1.75rem; }

/* Tabs */
.auth-tabs {
  display: flex; gap: .3rem; margin-bottom: 1.75rem;
  background: var(--dark2); border-radius: 10px; padding: .3rem;
}
.auth-tab {
  flex: 1; padding: .55rem 1rem; border: none; background: none;
  color: var(--gray3); font-family: var(--font-head);
  font-size: 1rem; letter-spacing: 1.5px; cursor: pointer;
  border-radius: 8px; transition: all .2s;
}
.auth-tab.on { background: var(--accent); color: var(--black); }

/* Form rows for 2 cols */
.af-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }

/* Field group */
.af-group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.af-group label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: var(--gray3);
}
.af-input-wrap { position: relative; }
.af-input-wrap i {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--gray3); font-size: .85rem; pointer-events: none;
}
.af-input-wrap input {
  width: 100%; background: var(--dark2); border: 1px solid var(--dark3);
  border-radius: 8px; color: var(--white); font-family: var(--font-ui);
  font-size: .9rem; padding: .75rem 1rem .75rem 2.5rem;
  transition: border-color .2s; outline: none; box-sizing: border-box;
}
.af-input-wrap input:focus { border-color: var(--accent); }
.af-input-wrap input::placeholder { color: var(--gray3); }

/* Error text */
.auth-err { color: #e83232; font-size: .8rem; min-height: 1rem; margin: -.5rem 0 .5rem; }

/* Switch link */
.auth-switch { text-align: center; font-size: .83rem; color: var(--gray3); margin-top: 1rem; }
.auth-switch a { color: var(--accent); text-decoration: none; font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }

/* Account initial in header */
#account-initial {
  font-family: var(--font-head); font-size: 1.05rem;
  color: var(--accent); line-height: 1;
}

/* ─── Account View ─── */
.acv-head {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.75rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--dark3);
}
.acv-avatar {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--accent); color: var(--black);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 1.7rem; flex-shrink: 0;
}
.acv-name { font-weight: 700; font-size: 1.05rem; }
.acv-email { font-size: .82rem; color: var(--gray3); }

/* Orders section */
.acv-orders-title {
  font-family: var(--font-head); font-size: 1.1rem;
  letter-spacing: 2px; color: var(--accent);
  margin-bottom: .85rem;
}
.acv-no-orders {
  color: var(--gray3); font-size: .88rem;
  text-align: center; padding: 1.5rem 0;
}
.acv-orders-list { display: flex; flex-direction: column; gap: .6rem; max-height: 280px; overflow-y: auto; margin-bottom: 1rem; }
.acv-order-card {
  background: var(--dark2); border: 1px solid var(--dark3);
  border-radius: 10px; padding: .9rem 1rem;
  transition: border-color .2s;
}
.acv-order-card:hover { border-color: var(--accent); }
.aoc-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; flex-wrap: wrap; }
.aoc-id { font-family: var(--font-head); font-size: .95rem; letter-spacing: 1px; }
.aoc-date { font-size: .75rem; color: var(--gray3); }
.aoc-status {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: .18rem .55rem; border-radius: 100px; margin-left: auto;
}
.aoc-status--aguardando { background: rgba(232,200,50,.15); color: var(--accent); }
.aoc-status--confirmado { background: rgba(37,211,102,.15); color: #25d366; }
.aoc-status--enviado    { background: rgba(100,160,255,.15); color: #64a0ff; }
.aoc-status--entregue   { background: rgba(37,211,102,.2);  color: #25d366; }
.aoc-status--cancelado  { background: rgba(232,50,50,.15);  color: #e83232; }
.aoc-items { font-size: .8rem; color: var(--gray3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .3rem; }
.aoc-total { font-weight: 700; color: var(--accent); font-size: .9rem; }

@media (max-width: 520px) {
  .auth-modal { padding: 2rem 1.25rem; }
  .af-row { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE RESPONSIVENESS — ENHANCED
   ============================================================ */

/* ------ 768px — tablets e celulares grandes ------ */
@media (max-width: 768px) {
  /* Espaçamento global */
  .section { padding: 4rem 0; }
  .container { padding: 0 1.25rem; }

  /* Hero */
  .hero-left { padding: 3.5rem 1.5rem; gap: 1.5rem; }
  .hero-metrics { grid-template-columns: repeat(3,1fr); }
  .hm-item { padding: 1.1rem .75rem; }
  .hm-num { font-size: 1.7rem; }

  /* Hero CTA — botões empilhados e full-width em celulares */
  .hero-cta { flex-direction: column; align-items: stretch; gap: .75rem; }
  .hero-cta .btn { justify-content: center; width: 100%; }

  /* Botão grande menor */
  .btn--lg { padding: .85rem 1.75rem; font-size: 1rem; }

  /* Promo strip — evitar overflow de texto */
  .promo-strip { font-size: .72rem; letter-spacing: 1.5px; padding: .4rem .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Cart drawer full-width em celular */
  .cart-drawer { width: 100vw; right: -100vw; }
  .cart-drawer.on { right: 0; }

  /* Toasts — reposicionar para não sobrepor botões na parte inferior */
  #toasts { bottom: auto; top: 1rem; right: 1rem; left: 1rem; align-items: flex-end; }
  .toast { max-width: 100%; }

  /* Promo band */
  .promo-band { padding: 4rem 1.5rem; }
  .promo-band::before, .promo-band::after { font-size: 10rem; }

  /* About feats */
  .about-feat { padding: .85rem 1rem; }

  /* Seção de heading */
  .sec-title { font-size: clamp(1.5rem, 6vw, 2.2rem); gap: .6rem; }
  .sec-sub { font-size: .85rem; }

  /* Cabeçalho do drawer */
  .cd-head { padding: 1.2rem 1.1rem; }
  .cd-body { padding: .75rem 1.1rem; }
  .cd-foot { padding: 1.1rem; }
}

/* ------ 500px — celulares comuns ------ */
@media (max-width: 500px) {
  /* Espaçamento global reduzido */
  .section { padding: 3rem 0; }
  .container { padding: 0 1rem; }

  /* Hero compacto */
  .hero-left { padding: 2.5rem 1rem; gap: 1rem; }
  .hero-eyebrow { font-size: .65rem; letter-spacing: 3px; margin-bottom: 1rem; }
  .hero-title { margin-bottom: 1rem; }
  .hero-desc { font-size: .88rem; margin-bottom: 1.5rem; }
  .hero-metrics { grid-template-columns: repeat(3,1fr); gap: 0; }
  .hm-item { padding: .75rem .5rem; }
  .hm-num { font-size: 1.35rem; }
  .hm-label { font-size: .6rem; letter-spacing: 1.5px; }

  /* Promo strip super compacto */
  .promo-strip { font-size: .65rem; letter-spacing: 1px; }

  /* Categorias */
  .cat-cell { padding: 1.5rem .6rem; }
  .cat-icon { width: 42px; height: 42px; font-size: 1.15rem; }
  .cat-lbl { font-size: .85rem; letter-spacing: 1px; }
  .cat-qty { font-size: .65rem; }

  /* Cards de produto — ações sempre visíveis no touch */
  .pc-actions { transform: translateY(0); }
  .pc:hover .pc-actions { transform: translateY(0); }
  .pca-btn { padding: .6rem; font-size: .72rem; }

  /* Detalhes do card menores */
  .pc-brand-lbl { font-size: .62rem; }
  .pc-stars { font-size: .68rem; margin-bottom: .5rem; }

  /* Botão adicionar ao carrinho */
  .btn-cart { font-size: .82rem; padding: .6rem .5rem; }

  /* Marcas */
  .brands-row, .brands-row2 { grid-template-columns: repeat(2,1fr); }
  .brand-cell { padding: 1.25rem .75rem; }
  .brand-cell span { font-size: .85rem; letter-spacing: 2px; }

  /* Promo band */
  .promo-band { padding: 3rem 1rem; }
  .promo-band::before, .promo-band::after { display: none; }
  .promo-inner p { font-size: .88rem; }

  /* About */
  .about-feat { padding: .75rem .9rem; }
  .feat-strong { font-size: .85rem; }
  .feat-small { font-size: .75rem; }

  /* Contato */
  .contact-list { gap: .6rem; }
  .ci { padding: .75rem 1rem; }

  /* Footer */
  .footer-top { padding: 2.5rem 0 2rem; gap: 1.5rem; }
  .fc h5 { font-size: .78rem; letter-spacing: 1.5px; }
  .fc ul a { font-size: .82rem; }
  .ft-about-text { font-size: .84rem; }
  .footer-bottom { padding: 1rem 0; font-size: .74rem; }
  .nl-form input, .nl-form button { padding: .6rem .75rem; font-size: .8rem; }

  /* Checkout overlay — espaçamentos menores */
  .co-inner { padding: 1.25rem .9rem 1.75rem; }
  .co-panel-title { font-size: 1.1rem; }
  .co-ship-name { font-size: .9rem; }
  .co-ship-price { font-size: 1rem; }
  .co-summary-name { font-size: .8rem; }
  .co-nav-row { flex-direction: column-reverse; gap: .6rem; }
  .co-nav-row .btn { width: 100%; justify-content: center; }

  /* Product detail overlay — melhorias no info panel */
  .pd-info { padding: 1.25rem 1rem; gap: .75rem; }
  .pd-price { font-size: 1.65rem; }
  .pd-desc { font-size: .84rem; }
  .pd-qb { width: 38px; height: 38px; }

  /* Qty buttons maiores para toque */
  .qb { width: 30px; height: 30px; }

  /* Chips de filtro */
  .filter-row { gap: .35rem; }
  .chip { padding: .38rem .9rem; font-size: .75rem; }

  /* Seção de heading */
  .sec-sub { font-size: .82rem; margin-bottom: 2rem; }

  /* BTT e toasts — evitar sobreposição */
  #btt { bottom: 1rem; left: 1rem; width: 36px; height: 36px; font-size: .78rem; }

  /* Mobile nav compacto */
  .mobile-nav { padding: 1.5rem 1.25rem; gap: .75rem; }
  .mobile-nav a { font-size: 1.5rem; padding-bottom: .85rem; }
  .mobile-nav-cat { font-size: .92rem !important; }

  /* Header inner gap reduzido */
  .header-inner { padding: 0 1rem; gap: 1rem; }

  /* Socials no footer */
  .soc { width: 32px; height: 32px; font-size: .78rem; }
}

/* ------ 380px — celulares muito pequenos ------ */
@media (max-width: 380px) {
  .hero-metrics { grid-template-columns: 1fr; max-width: 200px; margin-left: auto; margin-right: auto; }
  .hm-item { border-right: none; border-bottom: 1px solid var(--border); }
  .hm-item:last-child { border-bottom: none; }
  .product-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .brands-row, .brands-row2 { grid-template-columns: 1fr; }
  .hero-left { padding: 2rem .85rem; }
  .pd-info { padding: 1rem .85rem; }
}