/** Shopify CDN: Minification failed

Line 2120:8 Expected identifier but found whitespace
Line 2120:9 Unexpected "#111111"

**/
/* ==========================================================================
   MUNDIAL THEME — Dark Premium Matchday
   Built for the World Cup hype. Sells jerseys. Converts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET & BASE
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.no-scroll { overflow: hidden; }

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-fg, #F5F1EB);
  background: var(--color-bg, #0D1117);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* Focus visible accessibility */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-accent);
  color: #000;
  padding: 12px 20px;
  z-index: 9999;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.skip-to-content:focus { top: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY — Athletic, condensed display + clean body
   -------------------------------------------------------------------------- */
.font-display,
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: 'Anton', 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

h1, .h1 { font-size: clamp(2.5rem, 7vw, 6rem); }
h2, .h2 { font-size: clamp(2rem, 5vw, 4rem); }
h3, .h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h4, .h4 { font-size: clamp(1.2rem, 2vw, 1.6rem); }

.font-mono { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; }

.eyebrow {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}

p { max-width: 70ch; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.page-width {
  width: 100%;
  max-width: var(--page-width, 1440px);
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) { .page-width { padding: 0 40px; } }
@media (min-width: 1200px) { .page-width { padding: 0 56px; } }

.section { padding: clamp(60px, 8vw, 120px) 0; }
.section--tight { padding: clamp(40px, 5vw, 80px) 0; }
.section--flush { padding: 0; }

.section-header {
  margin-bottom: clamp(32px, 5vw, 64px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.section-header__title { max-width: 800px; }
.section-header__title .eyebrow { margin-bottom: 16px; display: block; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 32px;
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-accent);
  color: #000;
}
.btn--primary:hover {
  background: var(--color-fg);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 230, 118, 0.25);
}

.btn--secondary {
  background: transparent;
  color: var(--color-fg);
  border-color: var(--color-fg);
}
.btn--secondary:hover {
  background: var(--color-fg);
  color: var(--color-bg);
}


.btn--ghost {
  background: transparent;
  color: var(--color-fg);
  padding: 14px 24px;
  border-color: var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

.btn--full { width: 100%; }

.btn--small { padding: 12px 20px; font-size: 0.8rem; }
.btn--large { padding: 22px 44px; font-size: 1.05rem; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Arrow icon hover effect */
.btn .icon-arrow { transition: transform 0.25s ease; }
.btn:hover .icon-arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. ANNOUNCEMENT BAR — marquee energy
   -------------------------------------------------------------------------- */
.announcement-bar {
  background: var(--color-accent);
  color: #000;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.announcement-bar__marquee {
  display: flex;
  animation: marquee 35s linear infinite;
  white-space: nowrap;
  padding: 12px 0;
  width: max-content;
}
.announcement-bar__item {
  padding: 0 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.announcement-bar__item::before {
  content: '★';
  color: #000;
  font-size: 0.7rem;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.announcement-bar:hover .announcement-bar__marquee { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #0d1117;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}
.site-header.is-scrolled {
  background: rgba(8, 12, 18, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
/* Search bar permanece branco/legível mesmo com header escuro no scroll */
.site-header.is-scrolled .header-search-form {
  background: #ffffff !important;
  border-color: rgba(255,255,255,0.3) !important;
}
.site-header.is-scrolled .header-search-form__input {
  background: #ffffff !important;
  color: #111111 !important;
}
.site-header.is-scrolled .header-search-form__input::placeholder {
  color: #888888 !important;
}
.site-header.is-scrolled .header-search-form__icon {
  color: #555555 !important;
}
.site-header.is-scrolled .header-search-form__submit {
  background: #111111 !important;
  color: #ffffff !important;
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 80px;
  gap: 32px;
}

.header__logo {
  font-family: 'Anton', sans-serif;
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-fg);
  justify-self: center;
  white-space: nowrap;
}
.header__logo img { max-height: 40px; width: auto; }
.header__logo .logo-accent { color: var(--color-accent); }

.header__nav {
  display: none;
  align-items: center;
  gap: 28px;
  justify-self: start;
}
@media (min-width: 990px) { .header__nav { display: flex; } }

.header__nav-link {
  font-family: 'Anton', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 0;
  position: relative;
  transition: color 0.2s ease;
}
.header__nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.header__nav-link:hover { color: var(--color-accent); }
.header__nav-link:hover::after { transform: scaleX(1); }
.header__nav-link.has-mega::after { display: none; }

.header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}
.header__action-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-fg);
  transition: background 0.2s ease, color 0.2s ease;
  position: relative;
}
.header__action-btn:hover { background: rgba(255,255,255,0.08); color: var(--color-accent); }
.header__action-btn svg { width: 22px; height: 22px; }

.cart-count-bubble {
  position: absolute;
  top: 6px; right: 6px;
  background: var(--color-accent);
  color: #000;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  line-height: 1;
}
.cart-count-bubble:empty { display: none; }

/* --------------------------------------------------------------------------
   7. MEGA MENU
   -------------------------------------------------------------------------- */
.mega-menu {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 48px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 99;
}
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
.mega-menu__column h5 {
  font-size: 0.95rem;
  margin-bottom: 18px;
  color: var(--color-accent);
  letter-spacing: 0.1em;
}
.mega-menu__column a {
  display: block;
  font-size: 0.92rem;
  padding: 6px 0;
  color: var(--color-fg);
  opacity: 0.75;
  transition: opacity 0.2s, color 0.2s, transform 0.2s;
}
.mega-menu__column a:hover { opacity: 1; color: var(--color-accent); transform: translateX(4px); }
.mega-menu__feature {
  background: #131B26;
  padding: 24px;
  position: relative;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.mega-menu__feature img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.mega-menu__feature-content { position: relative; z-index: 2; }
.mega-menu__feature-content h6 { font-family: 'Anton', sans-serif; font-size: 1.4rem; text-transform: uppercase; margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   8. HERO — Hits like a stadium roar
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(560px, 90vh, 900px);
  display: flex;
  align-items: end;
  overflow: hidden;
  background: #0D1117;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img, .hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center right;
}
@media (max-width: 767px) {
  .hero {
    min-height: 100svh;
  }
  .hero__media img, .hero__media video {
    object-fit: cover;
    object-position: top center;
  }
  .hero__media {
    background: #0D1117;
  }
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.0) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(40px, 6vw, 100px) 0;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px;
  margin-bottom: 24px;
}
.hero__eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--color-accent);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 var(--color-accent); }
  50% { opacity: 0.6; transform: scale(1.2); box-shadow: 0 0 0 8px transparent; }
}

.hero__title {
  font-size: clamp(3.5rem, 11vw, 9rem);
  line-height: 1.05;       /* was 1 — too tight for Ç cedilla descender */
  margin-bottom: 24px;
  max-width: 12ch;
  color: #FFFFFF;
  padding-bottom: 0.08em; /* prevents overflow:hidden clipping descenders like Ç */
}
.hero__title .accent { color: var(--color-accent); }

.hero__subtitle {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  max-width: 50ch;
  margin-bottom: 32px;
  opacity: 0.85;
  color: #FFFFFF;
}

.hero__cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

/* --------------------------------------------------------------------------
   9. COUNTDOWN TIMER — Mundial 2026 hype generator
   -------------------------------------------------------------------------- */
.countdown {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.countdown__unit {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 18px 24px;
  min-width: 92px;
  text-align: center;
  position: relative;
}
.countdown__unit::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-top: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
}
.countdown__unit::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-bottom: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
}
.countdown__number {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  display: block;
}
.countdown__label {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 8px;
  display: block;
}

/* --------------------------------------------------------------------------
   10. COLLECTION LIST — square cards with hover
   -------------------------------------------------------------------------- */
/* Mobile: horizontal scroll carousel */
.collection-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.collection-list::-webkit-scrollbar { display: none; }
.collection-list .collection-card {
  flex: 0 0 72vw;
  max-width: 300px;
  scroll-snap-align: start;
}
/* Desktop: back to grid */
@media (min-width: 768px) {
  .collection-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .collection-list .collection-card {
    flex: none;
    max-width: none;
  }
}

/* Vivid accent colors per card position */
/* Editorial tones — inspired by national flag palettes, muted premium */
.collection-list .collection-card:nth-child(1) { --card-accent: #1B4332; --card-text: #fff; } /* deep forest green */
.collection-list .collection-card:nth-child(2) { --card-accent: #7F1D1D; --card-text: #fff; } /* deep crimson */
.collection-list .collection-card:nth-child(3) { --card-accent: #1E3A5F; --card-text: #fff; } /* navy */
.collection-list .collection-card:nth-child(4) { --card-accent: #2D2D2D; --card-text: #fff; } /* near black */
.collection-list .collection-card:nth-child(5) { --card-accent: #3D2B1F; --card-text: #fff; } /* deep earth */
.collection-list .collection-card:nth-child(6) { --card-accent: #4A1942; --card-text: #fff; } /* deep plum */

.collection-card {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--card-accent, #0F0F0F);
  display: block;
  isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.collection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.15);
}
.collection-card__image {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  filter: brightness(0.75) saturate(1.15);
  mix-blend-mode: normal;
}
.collection-card:hover .collection-card__image {
  transform: scale(1.06);
  opacity: 0.9;
}
/* When no image: show solid color card with pattern */
.collection-card:not(:has(img)) {
  background: var(--card-accent, #0F0F0F);
}
.collection-card__overlay {
  position: absolute;
  inset: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(0,0,0,0.55) 100%
  );
}
.collection-card__count {
  align-self: end;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  padding: 5px 12px;
  background: var(--color-accent);
  color: #000;
  border-radius: 0;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.collection-card__title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  text-transform: uppercase;
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.collection-card__arrow {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--card-accent, var(--color-accent));
  background: transparent;
  padding: 0;
  border-radius: 0;
  width: fit-content;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 2px;
}
.collection-card:hover .collection-card__arrow {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}


/* --------------------------------------------------------------------------
   11. PRODUCT CARD — Hover swap, quick view
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
@media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card {
  position: relative;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
}
.product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #EDEAE5;
  margin-bottom: 16px;
}
.product-card__image {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.product-card__image--secondary { opacity: 0; }
.product-card:hover .product-card__image--primary { opacity: 0; }
.product-card:hover .product-card__image--secondary { opacity: 1; transform: scale(1.04); }

.product-card__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.product-badge {
  padding: 5px 10px;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--color-fg);
  color: var(--color-bg);
}
.product-badge--sale { background: var(--color-sale); color: #fff; }
.product-badge--new { background: var(--color-accent); color: #000; }
.product-badge--hot { background: #FF6B00; color: #000; }

.product-card__actions {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
}
.product-card:hover .product-card__actions { opacity: 1; transform: translateY(0); }

.product-card__quick-action {
  flex: 1;
  padding: 12px;
  background: rgba(255,255,255,0.95);
  color: #000;
  font-family: 'Anton', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.2s, color 0.2s;
  backdrop-filter: blur(10px);
}
.product-card__quick-action:hover { background: var(--color-accent); color: #000; }

@media (hover: none) {
  .product-card__actions { display: none; }
}

.product-card__info { padding: 0 4px; }
.product-card__vendor {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 6px;
}
.product-card__title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--color-fg);
}
.product-card__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
}
.product-card__price-compare {
  font-size: 0.8rem;
  text-decoration: line-through;
  opacity: 0.5;
}
.product-card__price-sale { color: var(--color-sale); font-weight: 700; }

/* --------------------------------------------------------------------------
   12. PRODUCT PAGE
   -------------------------------------------------------------------------- */
.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 0;
}
@media (min-width: 990px) {
  .product {
    grid-template-columns: 55% 1fr;
    gap: 56px;
    align-items: start;
  }
}

.product__media-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
/* When inside new gallery layout, media-main handles display */
.product__gallery .product__media-list { display: contents; }
@media (min-width: 768px) {
  .product__media-list { grid-template-columns: 1fr 1fr; }
  .product__media-list > :first-child { grid-column: 1 / -1; }
}
.product__media-item {
  position: relative;
  background: #EDEAE5;
  overflow: hidden;
  aspect-ratio: 4/5;
  width: 100%;
}
.product__media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Main image area inside gallery */
#product-media-main .product__media-item { aspect-ratio: 4/5; }

@media (min-width: 990px) {
  .product__info-wrapper { position: sticky; top: 100px; }
}

.product__info { padding: 0 4px; }
.product__vendor {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}
.product__title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: 16px;
  line-height: 1.05;
}
.product__price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.4rem;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.product__price-compare {
  font-size: 1rem;
  text-decoration: line-through;
  opacity: 0.5;
}
.product__price-sale { color: var(--color-sale); font-weight: 700; }
.product__price-saving {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  padding: 5px 10px;
  background: var(--color-sale);
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product__form { margin-bottom: 32px; }
.product__option {
  margin-bottom: 24px;
}
.product__option-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.product__option-label-help {
  text-decoration: underline;
  opacity: 0.7;
  cursor: pointer;
}

.product__option-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.size-btn {
  min-width: 56px;
  padding: 12px 16px;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.size-btn:hover { border-color: var(--color-fg); }
.size-btn[data-selected="true"] {
  background: var(--color-fg);
  color: var(--color-bg);
  border-color: var(--color-fg);
}
.size-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.color-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.color-btn[data-selected="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-bg) inset;
}

.quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  margin-bottom: 16px;
}
.quantity__btn {
  width: 48px; height: 48px;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-fg);
}
.quantity__input {
  width: 56px; height: 48px;
  text-align: center;
  background: transparent;
  border: none;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--color-fg);
  -moz-appearance: textfield;
}
.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product__description {
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}
.product__description h4 {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}
.product__description p { opacity: 0.85; line-height: 1.7; }

.product__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.product__feature {
  padding: 16px;
  border: 1px solid var(--color-border);
  text-align: center;
}
.product__feature svg { width: 24px; height: 24px; margin: 0 auto 8px; color: var(--color-accent); }
.product__feature-title {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   13. COLLECTION PAGE
   -------------------------------------------------------------------------- */
.collection-hero {
  padding: clamp(60px, 8vw, 120px) 0 clamp(40px, 5vw, 60px);
  border-bottom: 1px solid var(--color-border);
}
.collection-hero__title {
  font-size: clamp(3rem, 8vw, 6rem);
  margin-bottom: 16px;
}
.collection-hero__description { max-width: 60ch; opacity: 0.8; }

.collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 40px;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.collection-toolbar__count { opacity: 0.7; }
.collection-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--color-fg);
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 64px;
}
.pagination a, .pagination span {
  min-width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  border: 1px solid var(--color-border);
}
.pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination .current { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }

/* --------------------------------------------------------------------------
   14. CART DRAWER
   -------------------------------------------------------------------------- */
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: 100%;
  max-width: 440px;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  visibility: hidden;
}
.cart-drawer.is-open { transform: translateX(0); visibility: visible; }
.cart-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
  z-index: 999;
}
.cart-drawer__backdrop.is-open { opacity: 1; visibility: visible; }

.cart-drawer__header {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
}
.cart-drawer__title { font-size: 1.8rem; }
.cart-drawer__close {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-drawer__close svg { width: 18px; height: 18px; }

.cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}
.cart-drawer__empty {
  text-align: center;
  padding: 60px 24px;
}
.cart-drawer__empty p { margin: 0 auto 24px; }

.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}
.cart-item__image {
  aspect-ratio: 4/5;
  background: #FFFFFF;
  overflow: hidden;
}
.cart-item__image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__title {
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 4px;
}
.cart-item__variant {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
  margin-bottom: 8px;
}
.cart-item__price {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 700;
}
.cart-item__controls {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;
}
.cart-item__remove {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  text-decoration: underline;
  transition: opacity 0.2s, color 0.2s;
}
.cart-item__remove:hover { opacity: 1; color: var(--color-sale); }

.cart-item__quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
}
.cart-item__quantity button {
  width: 32px; height: 32px;
  font-size: 0.9rem;
}
.cart-item__quantity input {
  width: 36px; height: 32px;
  text-align: center;
  background: transparent;
  border: none;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--color-fg);
}

/* Personalization fee item styling */
.cart-item--fee {
  background: rgba(0, 200, 83, 0.08);
  padding: 16px;
  border-radius: 8px;
  border: 1px dashed var(--color-accent);
  border-bottom: 1px dashed var(--color-accent);
  margin-bottom: 12px;
}
.cart-item--fee .cart-item__title {
  color: var(--color-accent);
  font-weight: 600;
}
.cart-item--fee .cart-item__price {
  color: var(--color-accent);
  font-size: 1.1rem;
}
.cart-item--fee::before {
  content: '✓ ';
  color: var(--color-accent);
  font-weight: bold;
  margin-right: 4px;
}

.cart-drawer__footer {
  padding: 24px;
  border-top: 1px solid var(--color-border);
}
.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}
.cart-drawer__subtotal-label {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.cart-drawer__subtotal-value { font-size: 1.3rem; font-weight: 700; }
.cart-drawer__shipping-note {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  opacity: 0.6;
  text-align: center;
  margin-top: 12px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   15. QUICK VIEW MODAL
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.is-open { display: flex; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(10px);
}
.modal__content {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  max-width: 1000px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 2;
}
.modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   17. NEWSLETTER
   -------------------------------------------------------------------------- */
.newsletter {
  background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 8vw, 100px) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(0, 230, 118, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(255, 45, 45, 0.05) 0%, transparent 50%);
  pointer-events: none;
}
.newsletter__inner {
  position: relative;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.newsletter__title { font-size: clamp(2.2rem, 5vw, 3.5rem); margin-bottom: 16px; }
.newsletter__description { opacity: 0.8; margin: 0 auto 32px; }
.newsletter__form {
  display: flex;
  gap: 8px;
  max-width: 500px;
  margin: 0 auto;
}
.newsletter__input {
  flex: 1;
  padding: 18px 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  font-size: 0.95rem;
}
.newsletter__input:focus { outline: none; border-color: var(--color-accent); }

/* --------------------------------------------------------------------------
   18. UTILITIES & MOTION
   -------------------------------------------------------------------------- */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .announcement-bar__marquee { animation: none; }
}

/* --------------------------------------------------------------------------
   19. MOBILE NAV
   -------------------------------------------------------------------------- */
.mobile-nav-toggle {
  display: inline-flex;
}
@media (min-width: 990px) { .mobile-nav-toggle { display: none; } }

.mobile-nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  background: var(--color-bg);
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav__list {
  padding: 16px 24px;
}
.mobile-nav__link {
  display: block;
  padding: 18px 0;
  font-family: 'Anton', sans-serif;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border);
}

/* Accordion mobile nav */
.mobile-nav__accordion {
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav__accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  font-family: 'Anton', sans-serif;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-fg);
  cursor: pointer;
  text-align: left;
}
.mobile-nav__chevron {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: var(--color-accent);
}
.mobile-nav__accordion.is-open .mobile-nav__chevron {
  transform: rotate(180deg);
}
.mobile-nav__submenu {
  display: none;
  padding: 4px 0 12px 16px;
  border-left: 2px solid var(--color-accent);
  margin-left: 4px;
}
.mobile-nav__accordion.is-open .mobile-nav__submenu {
  display: block;
}
.mobile-nav__sublink {
  display: block;
  padding: 10px 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  color: var(--color-fg);
  opacity: 0.8;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mobile-nav__sublink:hover {
  opacity: 1;
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   20. PAGE TRANSITION / LOADER
   -------------------------------------------------------------------------- */
.template-cart .cart-page { padding: clamp(40px, 6vw, 80px) 0; }
.cart-page__title { font-size: clamp(2.5rem, 6vw, 4rem); margin-bottom: 32px; }
.cart-page__empty { text-align: center; padding: 80px 0; }

/* Generic form inputs */
.field {
  display: block;
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.field:focus { outline: none; border-color: var(--color-accent); }
.field-label {
  display: block;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--color-accent);
}

/* Editorial split section */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 70vh;
}
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse { direction: rtl; }
  .split--reverse > * { direction: ltr; }
}
.split__media {
  position: relative;
  background: #FFFFFF;
  min-height: 400px;
  overflow: hidden;
}
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__content {
  padding: clamp(40px, 6vw, 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split__title { margin-bottom: 24px; }
.split__text { opacity: 0.85; margin-bottom: 32px; }

/* Trust strip */
.trust-strip {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 32px 0;
  background: #FFFFFF;
}
.trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: center;
}
@media (min-width: 768px) { .trust-strip__inner { grid-template-columns: repeat(4, 1fr); } }
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.trust-item svg { width: 28px; height: 28px; color: var(--color-accent); }
.trust-item__title {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.trust-item__subtitle { font-size: 0.8rem; opacity: 0.7; }

/* --------------------------------------------------------------------------
   21. SOCIAL PROOF TOAST
   -------------------------------------------------------------------------- */
.sp-toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  padding: 14px 16px;
  max-width: 280px;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(-120%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.sp-toast.is-visible {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.sp-toast__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.sp-toast__body { min-width: 0; }
.sp-toast__top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  margin-bottom: 3px;
}
.sp-toast__top svg { width: 12px; height: 12px; flex-shrink: 0; }
.sp-toast__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-toast__detail {
  font-size: 0.78rem;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-toast__time {
  font-size: 0.7rem;
  color: var(--color-muted);
  margin-top: 2px;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   22. PRODUCT REVIEWS
   -------------------------------------------------------------------------- */
.product-reviews {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}
.product-reviews__header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
}
.product-reviews__title {
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.product-reviews__score {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--color-muted);
}
.product-reviews__stars { color: var(--color-accent); font-size: 0.85rem; }
.review-list { display: flex; flex-direction: column; gap: 24px; }
.review-item {
  display: flex;
  gap: 14px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
.review-item:last-child { border-bottom: none; padding-bottom: 0; }
.review-item__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  filter: grayscale(15%);
}
.review-item__content { min-width: 0; flex: 1; }
.review-item__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.review-item__name {
  font-size: 0.88rem;
  font-weight: 600;
}
.review-item__stars { color: var(--color-accent); font-size: 0.8rem; letter-spacing: 1px; }
.review-item__date {
  font-size: 0.72rem;
  color: var(--color-muted);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  margin-left: auto;
}
.review-item__text {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--color-fg);
  opacity: 0.88;
}

/* --------------------------------------------------------------------------
   23. TESTIMONIALS SECTION
   -------------------------------------------------------------------------- */
.testimonials {
  padding: clamp(60px, 8vw, 100px) 0;
  text-align: center;
  background: #0F0F0F;
  color: #F2F0EB;
}
.testimonials .eyebrow { color: var(--color-accent); }
.testimonials .testimonials__heading { color: #F2F0EB; }
.testimonials__heading {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: clamp(40px, 5vw, 64px);
}
/* Mobile: horizontal scroll carousel */
.testimonials__grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  text-align: left;
  padding-bottom: 16px;
  position: relative;
}
.testimonials__grid::-webkit-scrollbar { 
  display: none;
}
.testimonials__grid::-webkit-scrollbar-track {
  background: transparent;
}
.testimonials__grid::after {
  content: '←  SCROLL  →';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  pointer-events: none;
}
.testimonials__grid .testimonial-card {
  flex: 0 0 80vw;
  max-width: 340px;
  scroll-snap-align: start;
}
/* Desktop: carrossel horizontal em vez de grid */
@media (min-width: 640px) {
  .testimonials__grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .testimonials__grid .testimonial-card {
    flex: 0 0 calc(40% - 12px);
    max-width: none;
    scroll-snap-align: start;
  }
}
@media (min-width: 1024px) {
  .testimonials__grid .testimonial-card {
    flex: 0 0 calc(33.333% - 11px);
  }
}

.testimonial-card {
  background: #1A1A1A;
  box-shadow: 0 2px 24px rgba(0,0,0,0.3);
  border: 1px solid var(--color-border);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.2s ease;
}
.testimonial-card:hover { border-color: var(--color-accent); }
.testimonial-card__stars {
  color: var(--color-accent);
  font-size: 0.9rem;
  letter-spacing: 2px;
}
.testimonial-card__text {
  font-size: 0.92rem;
  line-height: 1.65;
  opacity: 0.82;
  color: #F2F0EB;
  flex: 1;
  font-style: italic;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}
.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  filter: grayscale(15%);
}
.testimonial-card__name {
  font-size: 0.88rem;
  font-weight: 600;
}
.testimonial-card__location {
  font-size: 0.75rem;
  color: var(--color-muted);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   24. INFO PAGES (Sobre Nós, Envios, etc.)
   -------------------------------------------------------------------------- */
.info-page {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) 0;
}
.info-page__eyebrow {
  display: block;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}
.info-page__title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 48px;
  line-height: 1.05;
}
.info-page__body {
  font-size: 1rem;
  line-height: 1.8;
  opacity: 0.9;
}
.info-page__body h2 {
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  margin: 40px 0 16px;
}
.info-page__body h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 24px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}
.info-page__body p { margin-bottom: 16px; }
.info-page__body ul {
  list-style: none;
  padding: 0;
  margin-bottom: 16px;
}
.info-page__body ul li {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: 12px;
}
.info-page__body ul li::before {
  content: '→';
  color: var(--color-accent);
  flex-shrink: 0;
}
.info-page__contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}
@media (min-width: 600px) { .info-page__contact-grid { grid-template-columns: repeat(2, 1fr); } }
.info-page__contact-card {
  border: 1px solid var(--color-border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-page__contact-card span:first-child {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.info-page__contact-card a {
  font-size: 0.95rem;
  color: var(--color-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   25. LUXURY REFINEMENTS — Premium feel, not gaming
   -------------------------------------------------------------------------- */

/* Featured collection sections alternate bg */
.section:nth-of-type(even) { background: #FFFFFF; }
.section:nth-of-type(odd)  { background: var(--color-bg); }

/* Section header accent line */
.section-header { position: relative; }

/* Product card refinements for light bg */
.product-card {
  background: #FFFFFF;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.product-card:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.product-card__media { background: #F2F0EB; }

/* Collection list — elegant editorial approach */
.collection-list {
  gap: 12px;
}

/* No-image card: show country-flag-inspired gradient overlay instead of flat color */
.collection-card {
  aspect-ratio: 3 / 4;   /* portrait — more editorial */
}
.collection-card__overlay {
  background: linear-gradient(
    170deg,
    transparent 30%,
    rgba(0,0,0,0.72) 100%
  );
}

/* Title inside card — big, confident */
.collection-card__title {
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  color: #ffffff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

/* Accent tag on card top-right */
.collection-card__count {
  background: var(--color-accent);
  color: #000;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  padding: 4px 10px;
  border-radius: 0;
  align-self: start;
  justify-self: end;
  width: fit-content;
}

/* Trust badges on white surface */
.trust-strip { background: #FFFFFF; }
.trust-item__title { color: #111111; }
.trust-item__subtitle { color: #757065; }

/* Countdown — verde no tema escuro */
.countdown__number { color: #00C853; }
.countdown__unit {
  background: rgba(0, 200, 83, 0.12);
  border: 1px solid rgba(0, 200, 83, 0.4);
}
.countdown__unit::before,
.countdown__unit::after {
  border-color: #00C853;
}

/* Product info bg contrast on product page */
.product__info-wrapper { background: var(--color-bg); }

/* Cart drawer — white */
.cart-drawer { background: #FFFFFF; }

/* Quick view modal */
.quick-view-modal { background: #FFFFFF; }

/* Review cards — white surface */
.review-item { background: transparent; }

/* Smooth section transitions */
.section { transition: background 0.3s ease; }

/* Button refinements for light bg */
.btn--secondary {
  border-color: #111111;
  color: #111111;
}
.btn--secondary:hover {
  background: #111111;
  color: #F2F0EB;
}

/* Hero buttons are on a dark background — keep secondary visible */
.hero .btn--secondary {
  border-color: rgba(255,255,255,0.6);
  color: #FFFFFF;
}
.hero .btn--secondary:hover {
  background: #FFFFFF;
  color: #111111;
  border-color: #FFFFFF;
}

/* Hero text — always white (hero is always dark) */
.hero__title { color: #FFFFFF; }
.hero__subtitle { color: rgba(255,255,255,0.85); }

/* Product vendor on light bg */
.product-card__vendor { color: var(--color-accent); }

/* Mobile nav on light bg */
.mobile-nav { background: #F2F0EB; color: #111111; }
.mobile-nav__link { color: #111111; border-color: #E2DFD9; }

/* --------------------------------------------------------------------------
   26. LEAGUE CATEGORIES
   -------------------------------------------------------------------------- */
.league-cats {
  padding: clamp(40px, 5vw, 72px) 0;
  border-bottom: 1px solid var(--color-border);
}
.league-cats__header {
  margin-bottom: 32px;
}
.league-cats__title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  text-transform: uppercase;
  margin-top: 8px;
}
.league-cats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (max-width: 767px) {
  .league-cats__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}
@media (min-width: 1200px) {
  .league-cats__grid {
    grid-template-columns: repeat(9, 1fr);
  }
}

.league-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.league-cat-item:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.league-cat-item__icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}
.league-cat-item__img {
  width: auto;
  height: auto;
  max-width: 68px;
  max-height: 68px;
  object-fit: contain;
  display: block;
}
.league-cat-item__logo {
  width: 100%;
  height: 100%;
  background-size: 65% 65%;
  background-repeat: no-repeat;
  background-position: center center;
}
.league-cat-item__icon svg {
  width: 60%;
  height: 60%;
  color: #111111;
}
.league-cat-item__icon img {
  width: auto;
  height: auto;
  max-width: 68px;
  max-height: 68px;
  object-fit: contain;
  display: block;
}
  color: #111111;
}
.league-cat-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Text-style league icon — colorful tile with league name */
.league-cat-item__text {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px;
  border-radius: 8px;
  background: #f5f1eb;
  color: #111;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.02em;
  overflow: hidden;
}
.league-cat-item__text-line1 {
  font-size: 0.82rem;
  line-height: 1;
}
.league-cat-item__text-line2 {
  font-size: 0.62rem;
  line-height: 1;
  opacity: 0.9;
  margin-top: 2px;
  letter-spacing: 0.05em;
}
/* If only 1 word, line1 fills more space */
.league-cat-item__text:not(:has(.league-cat-item__text-line2)) .league-cat-item__text-line1 {
  font-size: 1rem;
}

.league-cat-item__label {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111111;
  text-align: center;
  line-height: 1.3;
}
.league-cat-item:hover .league-cat-item__label {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   27. FAQ SECTION — smooth accordion
   -------------------------------------------------------------------------- */
.faq-section { background: var(--color-bg); }
.faq-section__header { margin-bottom: clamp(32px, 4vw, 56px); }
.faq-section__title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-transform: uppercase;
  margin-top: 8px;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .faq-grid { grid-template-columns: 1fr 1fr; gap: 0 40px; }
}

.faq-item { border-top: 1px solid var(--color-border); }
.faq-item:last-child { border-bottom: 1px solid var(--color-border); }
@media (min-width: 768px) {
  .faq-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-border); }
}

.faq-item__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  gap: 24px;
  background: none;
  border: none;
  font-family: 'Anton', sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111111;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}
.faq-item__question:hover { color: var(--color-accent); }
.faq-item__question[aria-expanded="true"] { color: var(--color-accent); }

.faq-item__icon {
  flex-shrink: 0;
  color: var(--color-accent);
  width: 16px;
  height: 16px;
  position: relative;
}
.faq-icon-plus,
.faq-icon-minus {
  position: absolute;
  top: 0; left: 0;
  transition: opacity 0.2s ease, transform 0.3s ease;
}
.faq-icon-minus { opacity: 0; transform: rotate(-90deg); }
.faq-item__question[aria-expanded="true"] .faq-icon-plus { opacity: 0; transform: rotate(90deg); }
.faq-item__question[aria-expanded="true"] .faq-icon-minus { opacity: 1; transform: rotate(0deg); }

.faq-item__answer {
  overflow: hidden;
  height: 0;
  transition: height 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item__answer-inner { padding-bottom: 22px; }
.faq-item__answer p {
  font-size: 0.92rem;
  line-height: 1.75;
  color: #111111;
  opacity: 0.82;
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   28. MOBILE CAROUSEL DOTS
   -------------------------------------------------------------------------- */
.carousel-wrap { position: relative; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
@media (min-width: 768px) { .carousel-dots { display: none; } }

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.carousel-dot.is-active {
  background: var(--color-accent);
  transform: scale(1.4);
}

/* --------------------------------------------------------------------------
   29. SHIPPING PROGRESS BAR — cart drawer
   -------------------------------------------------------------------------- */
.shipping-bar {
  padding: 12px 20px 14px;
  background: #f8f8f6;
  border-bottom: 1px solid var(--color-border);
}
.shipping-bar__text {
  font-size: 0.82rem;
  color: #111;
  margin-bottom: 8px;
  text-align: center;
}
.shipping-bar__text--done { color: #1B7A3E; }
.shipping-bar__track {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}
.shipping-bar__fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   30. PRODUCT RATING LINK
   -------------------------------------------------------------------------- */
.product__rating-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 16px;
  text-decoration: none;
  color: inherit;
}
.product__rating-stars {
  color: var(--color-accent);
  font-size: 0.9rem;
  letter-spacing: 1px;
}
.product__rating-score {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 700;
}
.product__rating-count {
  font-size: 0.8rem;
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.product__rating-link:hover .product__rating-count { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   31. PRODUCT STOCK URGENCY
   -------------------------------------------------------------------------- */
.product__stock-urgency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 12px;
  margin-bottom: 20px;
  font-weight: 700;
}
.product__stock-urgency--low {
  background: #FFF3CD;
  color: #7A4F00;
  border-left: 3px solid #F59E0B;
}
.product__stock-urgency--ok {
  background: #D1FAE5;
  color: #065F46;
  border-left: 3px solid var(--color-accent);
}
.product__stock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 1.8s ease-in-out infinite;
}
.product__stock-urgency--low .product__stock-dot { background: #F59E0B; }
.product__stock-urgency--ok .product__stock-dot { background: var(--color-accent); }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* --------------------------------------------------------------------------
   32. STICKY ADD TO CART — mobile only
   -------------------------------------------------------------------------- */
.sticky-atc {
  display: none; /* hidden until JS activates */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: #FFFFFF;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.12);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 12px 0;
}
.sticky-atc.is-visible {
  display: block;
  transform: translateY(0);
}
/* Only show on mobile */
@media (min-width: 990px) { .sticky-atc { display: none !important; } }

.sticky-atc__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sticky-atc__product {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.sticky-atc__product img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.sticky-atc__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-atc__price {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--color-accent);
  font-weight: 700;
}
.sticky-atc__btn {
  flex-shrink: 0;
  padding: 12px 20px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ==========================================================================
   33. DEEP REFINEMENTS — Nike-level polish
   ========================================================================== */

/* --------------------------------------------------------------------------
   SKELETON LOADERS
   -------------------------------------------------------------------------- */
@keyframes skeleton-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton-box,
.skeleton-line {
  background: linear-gradient(90deg, #e8e5e0 25%, #f0ede8 50%, #e8e5e0 75%);
  background-size: 1200px 100%;
  animation: skeleton-shimmer 2s ease-in-out infinite;
  border-radius: 2px;
  will-change: background-position;
}
.skeleton-line { display: block; margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) {
  .skeleton-box, .skeleton-line { animation: none; background: #e8e5e0; }
}

/* --------------------------------------------------------------------------
   SCROLL-TRIGGERED REVEALS — staggered children
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-grid] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1),
              transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
[data-reveal-grid].revealed > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-grid].revealed > *:nth-child(2) { transition-delay: 0.07s; }
[data-reveal-grid].revealed > *:nth-child(3) { transition-delay: 0.14s; }
[data-reveal-grid].revealed > *:nth-child(4) { transition-delay: 0.21s; }
[data-reveal-grid].revealed > *:nth-child(5) { transition-delay: 0.28s; }
[data-reveal-grid].revealed > *:nth-child(6) { transition-delay: 0.35s; }
[data-reveal-grid].revealed > *:nth-child(7) { transition-delay: 0.42s; }
[data-reveal-grid].revealed > *:nth-child(8) { transition-delay: 0.49s; }
[data-reveal-grid].revealed > * { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-grid] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   HERO — cinematic entrance + parallax container
   -------------------------------------------------------------------------- */
.hero__media img {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Hero title — split line animation (no overflow:hidden needed:
   hero.liquid renders plain text, not .hero__title-line spans) */
.hero__title {
  /* overflow: hidden removed — was clipping Ç cedilla with no animation benefit */
}
.hero__title-line {
  display: block;
  animation: heroLineIn 0.9s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay: calc(var(--line-index, 0) * 0.12s + 0.2s);
}
@keyframes heroLineIn {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.hero__eyebrow {
  animation: fadeSlideRight 0.7s cubic-bezier(0.4,0,0.2,1) 0.1s both;
}
.hero__subtitle {
  animation: fadeSlideRight 0.7s cubic-bezier(0.4,0,0.2,1) 0.45s both;
}
.hero__cta-row {
  animation: fadeSlideRight 0.7s cubic-bezier(0.4,0,0.2,1) 0.6s both;
}
.countdown {
  animation: fadeSlideRight 0.7s cubic-bezier(0.4,0,0.2,1) 0.75s both;
}
@keyframes fadeSlideRight {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   BUTTON RIPPLE EFFECT
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
}
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-expand 0.55s cubic-bezier(0.4,0,0.2,1) forwards;
  pointer-events: none;
  background: rgba(255,255,255,0.28);
}
@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

/* --------------------------------------------------------------------------
   PRODUCT CARD — Nike-level hover
   -------------------------------------------------------------------------- */
.product-card {
  cursor: pointer;
}
.product-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.08) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.product-card:hover .product-card__media::after { opacity: 1; }

/* Vendor badge — more editorial */
.product-card__vendor {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  opacity: 0.7;
}

/* Price — mono emphasis */
.product-card__price {
  font-size: 0.9rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   SECTION ALTERNATING RHYTHM — dark sections for breathing room
   -------------------------------------------------------------------------- */
.section--dark {
  background: #0F0F0F;
  color: #F2F0EB;
}
.section--dark .eyebrow { color: var(--color-accent); }
.section--dark .h2, .section--dark h2,
.section--dark .section-header__title .h2 { color: #F2F0EB !important; }
.section--dark .product-card { background: #1A1A1A; }
.section--dark .product-card__title { color: #F2F0EB; }
.section--dark .product-card__media { background: #252525; }

/* --------------------------------------------------------------------------
   SECTION HEADER — accent underline on title
   -------------------------------------------------------------------------- */
.section-header__title .h2 {
  position: relative;
  display: inline-block;
}
.section-header__title .h2::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 2.5ch;
  height: 3px;
  background: var(--color-accent);
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.section-header:hover .section-header__title .h2::after { width: 100%; }

/* --------------------------------------------------------------------------
   COLLECTION CARD — number badge more prominent
   -------------------------------------------------------------------------- */
.collection-card__count {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 10px;
}

/* --------------------------------------------------------------------------
   ANNOUNCEMENT BAR — pulse dot
   -------------------------------------------------------------------------- */
.announcement-bar .eyebrow::before {
  content: '●';
  color: var(--color-accent);
  margin-right: 8px;
  font-size: 0.5rem;
  vertical-align: middle;
  animation: pulse-dot 1.8s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   TRUST BADGES — icon pulse on hover
   -------------------------------------------------------------------------- */
.trust-item svg {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.trust-item:hover svg { transform: scale(1.2) rotate(-5deg); }

/* --------------------------------------------------------------------------
   FORM INPUTS — focus state upgrade
   -------------------------------------------------------------------------- */
.field:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0,200,83,0.12);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* --------------------------------------------------------------------------
   SCROLLBAR — custom thin accent scrollbar (webkit)
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* --------------------------------------------------------------------------
   SELECTION COLOR
   -------------------------------------------------------------------------- */
::selection {
  background: var(--color-accent);
  color: #000;
}

/* --------------------------------------------------------------------------
   LINK UNDERLINE ANIMATION
   -------------------------------------------------------------------------- */
.footer__column a,
.header__nav-link {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s ease, color 0.2s ease, opacity 0.2s ease;
}
.footer__column a:hover,
.header__nav-link:hover {
  background-size: 100% 1px;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   PRODUCT PAGE — size button upgrade
   -------------------------------------------------------------------------- */
.size-btn {
  min-width: 52px;
  height: 52px;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}
.size-btn[data-selected="true"] {
  background: #111111;
  color: #F2F0EB;
  border-color: #111111;
  transform: scale(1.05);
}
.size-btn:hover:not([data-selected="true"]) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   CART DRAWER — item image border on hover
   -------------------------------------------------------------------------- */
.cart-item__image {
  transition: transform 0.25s ease;
}
.cart-item:hover .cart-item__image { transform: scale(1.03); }

/* --------------------------------------------------------------------------
   MOBILE NAV — slide in from left
   -------------------------------------------------------------------------- */
.mobile-nav {
  transform: translateX(-100%);
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
}
.mobile-nav.is-open {
  transform: translateX(0);
}

/* ==========================================================================
   34. PRODUCT PAGE — deep redesign
   ========================================================================== */
.product-page { padding: 32px 0 80px; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 0;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
}
.breadcrumb a { color: var(--color-muted); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb__sep { opacity: 0.4; }

/* GALERIA PRODUTO — DESKTOP: thumbs à esquerda, foto grande à direita */
.product__gallery {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: start;
}
#product-media-main {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}
.product__thumbs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product__thumb {
  width: 80px;
  height: 80px;
  border: 2px solid var(--color-border);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease;
  background: none;
  padding: 0;
  flex-shrink: 0;
}

/* MOBILE: foto em cima, thumbs em baixo em linha */
@media (max-width: 767px) {
  .product__gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #product-media-main {
    order: 1;
    width: 100%;
  }
  .product__thumbs {
    order: 2;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .product__thumb {
    width: 60px;
    height: 60px;
  }
}
.product__thumb.is-active { border-color: var(--color-accent); }
.product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product__media-item--hidden { display: none; }

/* Form row */
.product__form-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.product__atc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

/* Delivery promise */
.product__delivery-promise {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  padding: 10px 14px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  margin-bottom: 24px;
  color: #166534;
}

/* TABS */
.product__tabs { margin: 24px 0; }
.product__tabs-nav {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  gap: 0;
  margin-bottom: 20px;
}
.product__tab-btn {
  padding: 10px 20px;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.product__tab-btn:hover { color: #111; }
.product__tab-btn.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 700;
}
.product__tab-panel { display: none; font-size: 0.9rem; line-height: 1.75; }
.product__tab-panel.is-active { display: block; }
.product__tab-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product__tab-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.88rem;
  display: flex;
  gap: 8px;
}
.product__tab-list li::before {
  content: '→';
  color: var(--color-accent);
  flex-shrink: 0;
}

/* SIZE GUIDE MODAL */
.size-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media (min-width: 640px) {
  .size-guide-modal { align-items: center; }
}
.size-guide-modal.is-open {
  pointer-events: all;
  opacity: 1;
}
.size-guide-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}
.size-guide-modal__panel {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  transform: translateY(40px);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  z-index: 1;
}
.size-guide-modal.is-open .size-guide-modal__panel { transform: translateY(0); }
.size-guide-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.size-guide-modal__header h3 {
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
}
.size-guide-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #111;
}
.size-guide-modal__note {
  font-size: 0.82rem;
  color: #666;
  margin-bottom: 20px;
}
.size-guide-modal__table-wrap { overflow-x: auto; margin-bottom: 20px; }
.size-guide-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.size-guide-table th {
  background: #111;
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.size-guide-table td { padding: 10px 14px; border-bottom: 1px solid #eee; }
.size-guide-table tr:hover td { background: #f9f9f9; }
.size-guide-modal__tip {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  font-size: 0.82rem;
  color: #166534;
}

/* Size guide trigger button */
.product__size-guide-btn {
  background: none;
  border: none;
  font-size: 0.75rem;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

/* ==========================================================================
   35. INFO PAGES — complete redesign
   ========================================================================== */
.info-page-hero {
  padding: clamp(56px, 8vw, 100px) 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 56px;
}
.info-page-hero--dark {
  background: #0F0F0F;
  color: #F2F0EB;
  border-bottom-color: #2a2a2a;
}
.info-page-hero--accent {
  background: linear-gradient(135deg, #0F0F0F 0%, #1B3A2A 100%);
  color: #F2F0EB;
  border-bottom-color: #1B3A2A;
}
.info-page__subtitle {
  font-size: 1rem;
  opacity: 0.75;
  max-width: 60ch;
  margin-top: 12px;
  line-height: 1.6;
}

.info-page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-bottom: 80px;
}
@media (min-width: 768px) {
  .info-page-layout {
    grid-template-columns: 200px 1fr;
    gap: 64px;
  }
}

/* Sticky side nav */
.info-page-nav {
  position: sticky;
  top: 100px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.info-page-nav__title {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 12px;
}
.info-page-nav a {
  font-size: 0.82rem;
  color: var(--color-muted);
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--color-border);
  transition: color 0.2s, border-color 0.2s;
  line-height: 1.4;
}
.info-page-nav a:hover {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
}

.info-page__body--wide { max-width: 100%; padding-bottom: 80px; }

.info-page__section {
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--color-border);
}
.info-page__section:last-child { border-bottom: none; }

.info-page__section--highlight {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 0;
  padding: 32px;
  border-bottom: 1px solid #BBF7D0 !important;
}

/* Cookie table */
.info-page__cookie-table { margin-top: 16px; }
.info-page__cookie-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
}
.info-page__cookie-row span { padding: 10px 12px; }
.info-page__cookie-row--header span {
  background: #111;
  color: #fff;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* About stats */
.about-intro { margin-bottom: 56px; }
.about-intro__text { font-size: 1.15rem; line-height: 1.8; max-width: 65ch; margin-bottom: 16px; }

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  margin-bottom: 56px;
}
@media (min-width: 768px) { .about-stats { grid-template-columns: repeat(4, 1fr); } }
.about-stat {
  background: var(--color-bg);
  padding: 32px 24px;
  text-align: center;
}
.about-stat__number {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: 8px;
}
.about-stat__label {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Autenticidade pillars */
.auth-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 56px;
}
@media (min-width: 640px) { .auth-pillars { grid-template-columns: repeat(3, 1fr); } }
.auth-pillar {
  padding: 32px 24px;
  border: 1px solid var(--color-border);
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}
.auth-pillar:hover { border-color: var(--color-accent); transform: translateY(-4px); }
.auth-pillar__icon { font-size: 2.5rem; margin-bottom: 16px; }
.auth-pillar h3 {
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.auth-pillar p { font-size: 0.88rem; line-height: 1.65; opacity: 0.85; }

/* Compare columns */
.auth-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 20px;
}
.auth-compare__col {
  padding: 24px;
  border: 1px solid var(--color-border);
}
.auth-compare__col h4 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ==========================================================================
   36. HOW IT WORKS SECTION
   ========================================================================== */
.how-it-works.section { padding: clamp(48px, 6vw, 80px) 0 !important; }
.hiw-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  position: relative;
}
@media (min-width: 768px) { .hiw-steps { grid-template-columns: repeat(4, 1fr); } }

.hiw-step {
  padding: 40px 32px;
  border-right: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.hiw-step:last-child { border-right: none; }
@media (max-width: 767px) {
  .hiw-step:nth-child(2n) { border-right: none; }
  .hiw-step { border-bottom: 1px solid rgba(255,255,255,0.08); }
}

.hiw-step__num { display: none; }
.hiw-step__icon {
  font-size: 2rem;
  margin-bottom: 16px;
}
.hiw-step__title {
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #F2F0EB !important;
  margin-bottom: 10px;
}
.hiw-step__text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(242,240,235,0.65);
  max-width: 100%;
}

/* ==========================================================================
   37. PERFORMANCE + NEW FEATURES
   ========================================================================== */

/* ── Scroll progress bar ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--color-accent);
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
  transform-origin: left;
  pointer-events: none;
}

/* ── Added to cart toast ── */
.atc-toast {
  position: fixed;
  top: 88px;
  right: 24px;
  z-index: 9998;
  background: #0F0F0F;
  color: #F2F0EB;
  border-left: 3px solid var(--color-accent);
  padding: 14px 18px 14px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 300px;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.atc-toast.is-visible {
  transform: translateX(0);
  opacity: 1;
}
.atc-toast__img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #2a2a2a;
}
.atc-toast__check {
  width: 18px; height: 18px;
  background: var(--color-accent);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 900;
}
.atc-toast__text { min-width: 0; }
.atc-toast__label {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 2px;
}
.atc-toast__name {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Content visibility: removed — was causing white gaps when sections
   collapsed to their intrinsic-size after scrolling past ── */

/* ── Image lazy loading placeholder ── */
img[loading="lazy"] {
  background: #EDEAE5;
}

/* ── Product page info wrapper color fix ── */
.product__info-wrapper { background: transparent !important; }

/* ── Size options label fix on light bg ── */
.product__option-label { color: #111111; }

/* ── Delivery promise color refinement ── */
.product__delivery-promise { color: #166534; }

/* ==========================================================================
   PERSONALIZAÇÃO (NOME + NÚMERO)
   ========================================================================== */
.product__perso {
  margin: 24px 0;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  background: #fafaf8;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.product__perso:has([data-perso-toggle]:checked) {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.12);
}

.product__perso-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
}
.product__perso-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.product__perso-toggle-track {
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #d8d6d0;
  position: relative;
  transition: background .25s ease;
}
.product__perso-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
[data-perso-toggle]:checked ~ .product__perso-toggle-track {
  background: var(--color-accent);
}
[data-perso-toggle]:checked ~ .product__perso-toggle-track::after {
  transform: translateX(18px);
}

.product__perso-toggle-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  gap: 12px;
}
.product__perso-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #111;
}
.product__perso-title svg { color: var(--color-accent); }
.product__perso-fee {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(0, 230, 118, 0.1);
  padding: 4px 10px;
  border-radius: 100px;
}

.product__perso-fields {
  padding: 0 18px 18px;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 0;
  animation: persoSlide .3s cubic-bezier(.4,0,.2,1) both;
}
.product__perso-fields[hidden] { display: none !important; }
@keyframes persoSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.product__perso-row {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 10px;
  margin-top: 16px;
}
.product__perso-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product__perso-label {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  font-weight: 600;
}
.product__perso-input {
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
  transition: border-color .2s ease;
}
.product__perso-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.15);
}
.product__perso-field--number .product__perso-input { text-align: center; }

.product__perso-preview {
  margin-top: 16px;
  padding: 16px;
  background: #0a0a0a;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  color: #fff;
}
.product__perso-preview-label {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}
.product__perso-preview-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 32px;
  min-width: 160px;
}
.product__perso-preview-name {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.product__perso-preview-num {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--color-accent);
}
.product__perso-preview-name:empty::before { content: 'RONALDO'; opacity: 0.35; }
.product__perso-preview-num:empty::before  { content: '7'; opacity: 0.35; }

.product__perso-warning {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: #fff5e6;
  border: 1px solid #ffd089;
  border-radius: 6px;
  font-size: 0.78rem;
  color: #6b4400;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .product__perso-row { grid-template-columns: 1fr 80px; }
  .product__perso-preview-num { font-size: 2.8rem; }
}

/* ==========================================================================
   CART ITEM — propriedades (personalização) display
   ========================================================================== */
.cart-item__properties {
  margin: 6px 0 8px;
  padding: 6px 10px;
  background: rgba(0, 200, 83, 0.08);
  border-left: 2px solid var(--color-accent);
  border-radius: 4px;
}
.cart-item__property {
  display: flex;
  gap: 6px;
  font-size: 0.78rem;
  line-height: 1.5;
}
.cart-item__property-key {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  font-weight: 600;
}
.cart-item__property-value {
  font-weight: 700;
  color: var(--color-fg);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   NEWSLETTER POPUP
   ========================================================================== */
/* ==========================================================================
   COLLECTION FILTERS — sidebar (desktop) + drawer (mobile)
   ========================================================================== */
.collection-wrap { padding-top: 24px; }

/* Toolbar improvements */
.collection-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.collection-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-fg);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.collection-filter-toggle:hover { border-color: var(--color-accent); }
.collection-filter-toggle__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--color-accent);
  color: #fff;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 100px;
  margin-left: 4px;
}
.collection-toolbar__count {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.collection-toolbar__sort-form { margin-left: auto; }
.collection-toolbar__sort {
  background: transparent;
  border: 1.5px solid var(--color-border);
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--color-fg);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.collection-toolbar__sort:hover { border-color: var(--color-accent); }

/* Layout: sidebar + grid */
.collection-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  position: relative;
}
@media (min-width: 990px) {
  .collection-layout { grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
  .collection-filter-toggle { display: none; }
  .collection-filters__backdrop { display: none; }
  .collection-filters__header { display: none; }
  .collection-filters__apply { display: none; }
}

/* Sidebar */
.collection-filters {
  background: var(--color-bg);
}
@media (min-width: 990px) {
  .collection-filters {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 8px;
  }
}

@media (max-width: 989px) {
  .collection-filters {
    position: fixed;
    top: 0; left: 0;
    width: min(360px, 90vw);
    height: 100vh;
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 60px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .collection-filters.is-open { transform: translateX(0); }
  .collection-filters__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
  }
  .collection-filters__title {
    font-family: 'Anton', Impact, sans-serif;
    font-size: 1.4rem;
    text-transform: uppercase;
  }
  .collection-filters__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-border);
    color: var(--color-fg);
  }
  .collection-filters > details,
  .collection-filters__active { padding: 0 20px; }
  .collection-filters__apply {
    margin: auto 20px 20px;
    flex-shrink: 0;
  }
  .collection-filters__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1099;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }
  .collection-filters__backdrop.is-open { opacity: 1; visibility: visible; }
}

.collection-filters__active {
  margin-bottom: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
.collection-filters__clear {
  display: inline-block;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-sale);
  text-decoration: none;
  font-weight: 600;
}
.collection-filters__clear:hover { text-decoration: underline; }

/* Filter group */
.collection-filter-group {
  border-bottom: 1px solid var(--color-border);
  padding: 14px 0;
}
.collection-filter-group__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg);
  padding: 6px 0;
}
.collection-filter-group__summary::-webkit-details-marker { display: none; }
.collection-filter-group__summary::marker { display: none; }
.collection-filter-group__chevron {
  transition: transform .2s ease;
  color: var(--color-muted);
}
.collection-filter-group:not([open]) .collection-filter-group__chevron {
  transform: rotate(-90deg);
}
.collection-filter-group__options {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.collection-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-fg);
  font-size: 0.9rem;
  transition: background .15s ease;
}
.collection-filter-option:hover { background: rgba(0,0,0,0.04); }
.collection-filter-option__check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.collection-filter-option.is-active .collection-filter-option__check {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.collection-filter-option.is-active .collection-filter-option__label {
  font-weight: 600;
}
.collection-filter-option__label { line-height: 1.3; }

/* ==========================================================================
   WHATSAPP FLOATING BUTTON
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.55);
}
.whatsapp-float__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.4;
  animation: waPulse 2s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes waPulse {
  0%   { transform: scale(1);    opacity: 0.4; }
  100% { transform: scale(1.8);  opacity: 0; }
}
@media (max-width: 640px) {
  .whatsapp-float { bottom: 18px; right: 18px; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float__pulse { animation: none; }
}

/* ==========================================================================
   CONTACT PAGE — form + improved contact cards
   ========================================================================== */
.info-page__contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 24px 0 40px;
}
.info-page__contact-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-fg);
  transition: border-color .2s, transform .2s;
}
.info-page__contact-card[href]:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.info-page__contact-label {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
}
.info-page__contact-value {
  font-size: 1rem;
  font-weight: 600;
  word-break: break-all;
}
.info-page__contact-hint {
  font-size: 0.78rem;
  color: var(--color-accent);
  font-weight: 600;
}

.info-page__contact-form {
  display: grid;
  gap: 14px;
  max-width: 640px;
}
.info-page__form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 600px) {
  .info-page__form-row { grid-template-columns: 1fr 1fr; }
}
.info-page__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.info-page__field-label {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
}
.info-page__field input,
.info-page__field select,
.info-page__field textarea {
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-fg);
  font-size: 0.95rem;
  font-family: inherit;
}
.info-page__field input:focus,
.info-page__field select:focus,
.info-page__field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.15);
}

/* ==========================================================================
   GIFT BAR — gamificação multi-milestone (estilo storewm)
   ========================================================================== */
.gift-bar {
  padding: 16px 20px 26px;
  background: linear-gradient(135deg, #fff8e8 0%, #fff1d6 100%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.gift-bar__headline {
  font-size: 0.86rem;
  text-align: center;
  margin: 0 0 18px;
  color: #1a1a1a;
  line-height: 1.4;
}
.gift-bar__headline strong { color: var(--color-sale); font-weight: 700; }

.gift-bar__track {
  position: relative;
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 100px;
  margin: 22px 12px 8px;
}
.gift-bar__fill {
  position: absolute;
  inset: 0;
  height: 100%;
  background: linear-gradient(90deg, #ff9500, #ff5722, var(--color-sale));
  border-radius: 100px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

.gift-bar__milestone {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.gift-bar__gift-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  filter: grayscale(0.6);
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.gift-bar__milestone.is-reached .gift-bar__gift-icon {
  background: linear-gradient(135deg, #ffce00, #ff8800);
  border-color: var(--color-sale);
  filter: grayscale(0);
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(255, 136, 0, 0.45);
  animation: giftBounce .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes giftBounce {
  0%   { transform: scale(0.8); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1.12); }
}
.gift-bar__milestone-label {
  position: absolute;
  top: 38px;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  white-space: nowrap;
}
.gift-bar__milestone.is-reached .gift-bar__milestone-label {
  color: var(--color-sale);
}

.gift-bar__milestone--3 { transform: translate(-100%, -50%); }
.gift-bar__milestone--3 .gift-bar__milestone-label { right: 0; }

/* ==========================================================================
   VIDEO TESTIMONIALS — vertical video carousel
   ========================================================================== */
.video-testimonials { position: relative; }
.section-header--centered { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.section-header--centered .eyebrow { display: block; margin-bottom: 12px; }

.video-testimonials__title { margin: 0 0 12px; }
.video-testimonials__subtitle {
  color: var(--color-muted);
  font-size: 1.05rem;
  max-width: 540px;
  margin: 0 auto 40px;
}

.video-testimonials__scroll {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}
.video-testimonials__scroll::-webkit-scrollbar { display: none; }

.video-testimonials__track {
  display: flex;
  gap: 16px;
  width: max-content;
}

.video-card {
  flex-shrink: 0;
  width: clamp(180px, 28vw, 240px);
  scroll-snap-align: start;
}

.video-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  cursor: pointer;
  border: none;
  padding: 0;
  display: block;
}
.video-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.video-card__media:hover img { transform: scale(1.04); }
.video-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a, #333);
  color: var(--color-accent);
  font-size: 3rem;
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background .2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.video-card__play svg { margin-left: 3px; }
.video-card__media:hover .video-card__play {
  background: var(--color-accent);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}

.video-card__info {
  padding: 12px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.video-card__name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-fg);
}
.video-card__product {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.video-testimonials__nav {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
}
.video-testimonials__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.video-testimonials__arrow:hover {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* Video modal */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.video-modal.is-open { display: flex; }
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
}
.video-modal__panel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 9/16;
  max-height: 88vh;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
.video-modal__panel video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.video-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.video-modal__close:hover { background: rgba(0,0,0,0.85); }

.video-testimonials__empty {
  text-align: center;
  padding: 40px;
  background: var(--color-bg);
  border: 1.5px dashed var(--color-border);
  border-radius: 12px;
  color: var(--color-muted);
}

/* ==========================================================================
   TRACK ORDER PAGE
   ========================================================================== */
.track-order {
  max-width: 720px;
  margin: 0 auto;
}
.track-order__header {
  text-align: center;
  margin-bottom: 40px;
}
.track-order__header .eyebrow {
  display: block;
  margin-bottom: 12px;
}
.track-order__title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0 0 16px;
  line-height: 1;
}
.track-order__subtitle {
  color: var(--color-muted);
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 540px;
  margin: 0 auto;
}

.track-order__form {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 16px;
  padding: 32px;
  display: grid;
  gap: 18px;
  margin-bottom: 48px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
@media (min-width: 640px) {
  .track-order__form { grid-template-columns: 1fr 1fr; }
  .track-order__submit { grid-column: 1 / -1; }
}
.track-order__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.track-order__label {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
}
.track-order__input {
  padding: 14px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--color-bg);
  color: var(--color-fg);
  transition: border-color .2s, box-shadow .2s;
}
.track-order__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.15);
}

.track-order__help, .track-order__steps {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 24px;
}
.track-order__help h3, .track-order__steps h3 {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 16px;
}
.track-order__help ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.track-order__help li {
  padding: 8px 0 8px 24px;
  position: relative;
  color: var(--color-fg);
  line-height: 1.5;
}
.track-order__help li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}
.track-order__help a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
}

.track-order__steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}
.track-order__steps-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.track-order__step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 1.1rem;
}
.track-order__steps-list strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 2px;
}
.track-order__steps-list p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-muted);
}

/* ==========================================================================
   ANNOUNCEMENT BAR — split layout (lado a lado, estilo storewm)
   ========================================================================== */
.announcement-bar--split {
  display: flex;
}
.announcement-bar__split {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 0;
}
.announcement-bar__split .announcement-bar__item {
  flex: 1;
  text-align: center;
  padding: 12px 16px;
  border-right: 1px solid rgba(0,0,0,0.2);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.announcement-bar__split .announcement-bar__item:last-child {
  border-right: none;
}
@media (max-width: 640px) {
  .announcement-bar__split .announcement-bar__item:nth-child(n+3) { display: none; }
  .announcement-bar__split .announcement-bar__item { font-size: 0.7rem; padding: 10px 12px; }
}

/* ==========================================================================
   PROMO BANNER — secondary countdown / sale banner
   ========================================================================== */
.promo-banner {
  padding: clamp(40px, 6vw, 80px) 0;
}
.promo-banner__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 768px) {
  .promo-banner__inner { grid-template-columns: 1fr 1fr; gap: 48px; }
}

.promo-banner__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}
.promo-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-banner__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.promo-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-sale);
  width: max-content;
  padding: 6px 14px;
  background: rgba(192, 57, 43, 0.1);
  border-radius: 100px;
  border: 1px solid rgba(192, 57, 43, 0.25);
}

.promo-banner__heading {
  font-family: 'Anton', Impact, sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0;
}

.promo-banner__text {
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.85;
  max-width: 50ch;
  margin: 0;
}

.promo-countdown {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.promo-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 60px;
}
.promo-countdown__num {
  font-family: 'Anton', Impact, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.promo-countdown__label {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}
.promo-countdown__sep {
  font-family: 'Anton', Impact, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  opacity: 0.5;
  margin-top: -16px;
}

.promo-banner__cta {
  align-self: flex-start;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .promo-countdown__unit { padding: 10px 8px; min-width: 50px; }
  .promo-countdown__sep { font-size: 1.2rem; }
}

/* ==========================================================================
   CART PAGE — summary aside (theme-aware)
   ========================================================================== */
.cart-summary {
  background: var(--color-bg);
  color: var(--color-fg);
  padding: 32px;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  position: sticky;
  top: 100px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.cart-summary__title {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 24px;
  color: var(--color-fg);
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
}
.cart-summary__row--total {
  padding: 20px 0;
  font-size: 1.1rem;
  border-bottom: none;
  border-top: 2px solid var(--color-fg);
  margin-top: 4px;
}

.cart-summary__label {
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}
.cart-summary__label--total {
  color: var(--color-fg);
  font-weight: 700;
  font-size: 0.95rem;
}

.cart-summary__value {
  color: var(--color-fg);
  font-weight: 700;
}
.cart-summary__value--muted { color: var(--color-muted); font-weight: 500; }
.cart-summary__value--total {
  font-size: 1.3rem;
  font-weight: 700;
}

.cart-summary__note {
  display: block;
  width: 100%;
  min-height: 80px;
  margin: 20px 0 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: inherit;
  font-size: 0.92rem;
  resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.cart-summary__note:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.15);
}
.cart-summary__note::placeholder {
  color: var(--color-muted);
  opacity: 0.7;
}

.cart-summary__secure {
  margin-top: 14px;
  text-align: center;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ==========================================================================
   PROMO BANNER — overrides to integrate with site theme
   ========================================================================== */
.promo-banner {
  background: linear-gradient(135deg, #0D1117 0%, #1a1a1a 100%);
  color: var(--color-fg);
  border-top: 3px solid #00C853;
  border-bottom: 3px solid #00C853;
}
/* Accent variant — subtle dark background */
.promo-banner--accent {
  background: linear-gradient(135deg,
    rgba(20, 20, 20, 0.04) 0%,
    rgba(30, 30, 30, 0.08) 50%,
    rgba(20, 20, 20, 0.04) 100%);
  border-top: 1px solid rgba(0, 200, 83, 0.2);
  border-bottom: 1px solid rgba(0, 200, 83, 0.2);
  position: relative;
}
.promo-banner--accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0.6;
}

/* Eyebrow: use accent green instead of sale red, with brand styling */
.promo-banner__eyebrow {
  background: rgba(0, 0, 0, 0.15);
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Heading: use foreground for contrast in light theme */
.promo-banner__heading { color: var(--color-fg); }
.promo-banner__text {
  color: var(--color-fg);
  opacity: 0.75;
}

/* Countdown units: better contrast */
.promo-banner .promo-countdown__unit {
  background: rgba(0, 200, 83, 0.12);
  color: #000000;
  border: 1px solid rgba(0, 200, 83, 0.3);
}
.promo-banner .promo-countdown__num {
  color: #000000;
  font-weight: 700;
}
.promo-banner .promo-countdown__label {
  color: rgba(0, 0, 0, 0.6);
  opacity: 1;
}
.promo-banner .promo-countdown__sep {
  color: rgba(0, 0, 0, 0.3);
  opacity: 1;
}

/* When user overrides with custom bg (dark for example), revert to white style on countdown */
.promo-banner[style*="background"] .promo-countdown__unit,
.promo-banner[style*="color: #fff"] .promo-countdown__unit,
.promo-banner[style*="color:#fff"] .promo-countdown__unit {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}

/* ==========================================================================
   COOKIE CONSENT BANNER — RGPD compliant
   ========================================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  display: none;
  pointer-events: none;
  padding: 16px;
}
.cookie-banner.is-open { display: block; }

.cookie-banner__panel {
  pointer-events: auto;
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1.5px solid var(--color-border);
  border-radius: 16px;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  animation: cookieBannerUp .4s cubic-bezier(.4,0,.2,1);
}
@keyframes cookieBannerUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cookie-banner__content {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.cookie-banner__icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}
.cookie-banner__title {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 1.3rem;
  text-transform: uppercase;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}
.cookie-banner__description {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-fg);
  opacity: 0.85;
  margin: 0;
}
.cookie-banner__link {
  color: var(--color-accent);
  text-decoration: underline;
  font-weight: 600;
}
.cookie-banner__link:hover { opacity: 0.8; }

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.cookie-banner__actions .btn { flex: 1; min-width: 120px; }
@media (min-width: 640px) {
  .cookie-banner__actions .btn { flex: 0 1 auto; }
}

/* Customize view */
.cookie-banner__customize-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.cookie-banner__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease;
}
.cookie-banner__close:hover { background: var(--color-fg); color: var(--color-bg); }

.cookie-banner__categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.cookie-category {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color .2s ease;
}
.cookie-category:not(.cookie-category--required):hover {
  border-color: var(--color-accent);
}
.cookie-category--required {
  background: rgba(0, 200, 83, 0.03);
  cursor: default;
}

.cookie-category__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cookie-category__name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-fg);
}
.cookie-category__desc {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-muted);
}

.cookie-category__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cookie-category__switch {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.cookie-category__switch-track {
  width: 42px;
  height: 24px;
  border-radius: 100px;
  background: #d8d6d0;
  position: relative;
  transition: background .25s ease;
}
.cookie-category__switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.cookie-category__input:checked ~ .cookie-category__switch .cookie-category__switch-track {
  background: var(--color-accent);
}
.cookie-category__input:checked ~ .cookie-category__switch .cookie-category__switch-thumb {
  transform: translateX(18px);
}
.cookie-category__switch--locked .cookie-category__switch-track {
  background: var(--color-accent);
  opacity: 0.5;
}
.cookie-category__switch--locked .cookie-category__switch-thumb {
  transform: translateX(18px);
}
.cookie-category__locked {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Re-open cookie button (small, bottom-left) */
.cookie-toggle {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 89;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-fg);
  color: var(--color-bg);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  transition: transform .2s ease, opacity .2s ease;
  opacity: 0.6;
}
.cookie-toggle:hover { opacity: 1; transform: scale(1.08); }
.cookie-toggle:not([hidden]) { display: flex; }

@media (max-width: 640px) {
  .cookie-toggle { bottom: 18px; left: 18px; width: 38px; height: 38px; }
}

/* ==========================================================================
   INFO PAGES — extra utility classes used in legal/help pages
   ========================================================================== */
.info-page__note {
  margin: 20px 0;
  padding: 14px 18px;
  background: rgba(255, 153, 0, 0.08);
  border-left: 3px solid #ff9900;
  border-radius: 0 8px 8px 0;
  color: var(--color-fg);
  font-size: 0.92rem;
  line-height: 1.55;
}
.info-page__note strong { color: #cc7700; }

.info-page__steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  display: grid;
  gap: 14px;
  margin: 16px 0;
}
.info-page__steps li {
  counter-increment: step;
  position: relative;
  padding: 16px 16px 16px 56px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  line-height: 1.5;
}
.info-page__steps li::before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-page__cta-block {
  margin-top: 48px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(0,200,83,0.05), rgba(0,200,83,0.12));
  border: 1.5px solid rgba(0,200,83,0.25);
  border-radius: 16px;
  text-align: center;
}
.info-page__cta-block h3 {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 1.6rem;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.info-page__cta-block p {
  color: var(--color-muted);
  margin: 0 0 20px;
}
.info-page__cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Shipping grid (used on Envios page) */
.info-page__shipping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.info-page__shipping-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
}
.info-page__shipping-card strong {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.info-page__shipping-time {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-accent);
}
.info-page__shipping-desc {
  font-size: 0.8rem;
  color: var(--color-muted);
  line-height: 1.4;
}

/* ==========================================================================
   CART RECOMMENDATIONS — cross-sell in drawer
   ========================================================================== */
.cart-recs {
  border-top: 1px solid var(--color-border);
  padding: 16px 24px;
  max-height: 280px;
  overflow: hidden;
}
.cart-recs__title {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 700;
  margin: 0 0 12px;
}
.cart-recs__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-rec {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
}
.cart-rec__image {
  width: 52px;
  height: 65px;
  border-radius: 6px;
  overflow: hidden;
  background: #f0ede8;
  flex-shrink: 0;
}
.cart-rec__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-rec__info {
  min-width: 0;
}
.cart-rec__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-fg);
  line-height: 1.25;
  margin: 0 0 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-rec__price {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-fg);
}
.cart-rec__price-compare {
  font-size: 0.72rem;
  text-decoration: line-through;
  opacity: 0.5;
  margin-left: 4px;
  font-weight: 400;
}
.cart-rec__add {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: transform .15s ease, background .15s ease;
}
.cart-rec__add:hover { transform: scale(1.1); }
.cart-rec__add:disabled { opacity: 0.5; cursor: wait; }
.cart-rec__add svg { width: 16px; height: 16px; }

/* ==========================================================================
   HEADER V2 — logo left, nav, big center search, actions right
   ========================================================================== */
.header__inner--v2 {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 80px;
  grid-template-columns: none;
}

.header__left {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-shrink: 0;
}
.header__inner--v2 .header__logo {
  justify-self: unset;
  flex-shrink: 0;
}

/* Nav sits right after logo */
.header__inner--v2 .header__nav {
  justify-self: unset;
  gap: 22px;
}

/* Home icon link */
.header__nav-link--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
.header__nav-link--icon svg { width: 20px; height: 20px; }
.header__nav-link--icon::after { display: none; }

/* Center search — the big rectangle */
.header__search {
  flex: 1;
  display: none;
  max-width: 620px;
  margin: 0 auto;
}
@media (min-width: 990px) { .header__search { display: block; } }

.header-search-form {
  display: flex;
  align-items: center;
  gap: 0;
  background: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 12px;
  overflow: hidden;
  height: 50px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.header-search-form:focus-within {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 4px rgba(0, 200, 83, 0.20);
}
.header-search-form__icon {
  margin-left: 16px;
  color: #555555 !important;
  flex-shrink: 0;
}
.header-search-form__input {
  flex: 1;
  border: none;
  background: #ffffff !important;
  padding: 0 14px;
  font-size: 0.95rem;
  color: #111111 !important;
  height: 100%;
}
.header-search-form__input:focus { outline: none; }
.header-search-form__input::placeholder { color: #888888 !important; }
.header-search-form__submit {
  height: 100%;
  padding: 0 24px;
  background: #111111 !important;
  color: #ffffff !important;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background .2s ease;
  flex-shrink: 0;
}
.header-search-form__submit:hover { background: var(--color-accent) !important; color: #fff !important; }

/* Actions stay right */
.header__inner--v2 .header__actions {
  justify-self: unset;
  margin-left: auto;
  flex-shrink: 0;
}

/* Mobile search icon only shows on small screens */
.header__action-btn--mobile-search { display: inline-flex; }
@media (min-width: 990px) {
  .header__action-btn--mobile-search { display: none; }
}

/* Mobile nav search bar */
.mobile-nav__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 24px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  padding: 4px 4px 4px 14px;
}
.mobile-nav__search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 0;
  font-size: 0.95rem;
  color: var(--color-fg);
}
.mobile-nav__search-input:focus { outline: none; }
.mobile-nav__search button {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--color-fg);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* On tablet, hide text nav links to save room (keep home icon + catalog) */
@media (max-width: 1100px) and (min-width: 990px) {
  .header__left { gap: 18px; }
  .header__inner--v2 .header__nav { gap: 16px; }
}

/* Cart rec — size selector pills */
.cart-rec__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.cart-rec__size-pill {
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border: 1.5px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
  line-height: 1;
}
.cart-rec__size-pill:hover:not(:disabled) { border-color: var(--color-fg); }
.cart-rec__size-pill.is-selected {
  background: var(--color-fg);
  color: var(--color-bg);
  border-color: var(--color-fg);
}
.cart-rec__size-pill:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Give cart recs a bit more room now they have size pills */
.cart-recs { max-height: 340px; overflow-y: auto; }
.cart-rec { align-items: start; }
.cart-rec__add { margin-top: 2px; }

/* ==========================================================================
   PERSONALIZAÇÃO — Caixa de tabs com jogadores / nome personalizado
   ========================================================================== */

/* Container geral */

/* ── Perso box header: title left, fee badge right ── */
.perso-box__header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.perso-box__header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.perso-box__fee-badge {
  font-size: 0.78rem;
  font-weight: 700;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.05em;
  color: var(--color-fg);
  background: rgba(0,0,0,0.06);
  border: 1px solid var(--color-border);
  padding: 3px 10px;
  border-radius: 20px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.perso-box__fee-badge.is-active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.perso-box {
  margin: 20px 0 8px;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  color: #111;
}

/* Cabeçalho */
.perso-box__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1.5px solid rgba(0,0,0,0.09);
  color: #111;
  background: #f7f7f7;
}

/* Abas (tabs) */
.perso-box__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1.5px solid rgba(0,0,0,0.09);
}

.perso-box__tab {
  padding: 13px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  background: #f7f7f7;
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: #555;
  transition: background 0.18s, color 0.18s;
  text-align: center;
  letter-spacing: 0.01em;
}

.perso-box__tab.is-active {
  background: #111;
  color: #fff;
}

.perso-box__tab:not(.is-active):hover {
  background: #e8e8e8;
  color: #111;
}

/* Painéis (panels) */
.perso-box__panel {
  padding: 18px 18px 14px;
}

/* Dica de ajuda */
.perso-box__hint {
  font-size: 0.75rem;
  color: #888;
  margin-bottom: 12px;
}

/* Grid de jogadores */
.perso-box__players {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.player-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  border: 1.5px solid rgba(0,0,0,0.13);
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  background: #f5f5f5;
  color: #111;
  transition: all 0.15s;
  min-width: 80px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.player-chip__num {
  font-size: 0.68rem;
  font-weight: 600;
  color: #666;
  margin-top: 2px;
}

.player-chip:hover,
.player-chip.is-selected {
  background: #111;
  color: #fff;
  border-color: #111;
}

.player-chip.is-selected .player-chip__num,
.player-chip:hover .player-chip__num {
  color: rgba(255,255,255,0.7);
}

/* Campos nome + número */
.perso-box__fields {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 12px;
}

.perso-box__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 7px;
}

.perso-box__input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  font-size: 0.92rem;
  font-family: inherit;
  background: #fff;
  color: #111;
  transition: border-color 0.15s;
  outline: none;
}

.perso-box__input:focus {
  border-color: #111;
}

.perso-box__input::placeholder {
  color: #bbb;
  text-transform: uppercase;
}

/* Linha de Patches */
.perso-box__patches {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-top: 1.5px solid rgba(0,0,0,0.09);
  background: #fafafa;
}

.perso-box__patches-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.perso-box__patches-check {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #111;
  flex-shrink: 0;
}

.perso-box__patches-title {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  color: #111;
}

.perso-box__patches-sub {
  display: block;
  font-size: 0.75rem;
  color: #888;
  margin-top: 1px;
}

.perso-box__patches-price {
  font-weight: 800;
  font-size: 0.9rem;
  color: #111;
}

/* Linha de quantidade (compacta, acima do botão) */
.product__qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 10px;
}

/* Botão ATC amarelo — full width */
.product__atc-yellow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 18px 24px;
  background: #F5C518;
  color: #111;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
  margin-top: 4px;
}

.product__atc-yellow:hover {
  background: #e6b800;
  transform: translateY(-1px);
}

.product__atc-yellow:active {
  transform: translateY(0);
}

.product__atc-yellow:disabled {
  background: #ccc;
  color: #888;
  cursor: not-allowed;
  transform: none;
}

/* Ícones de pagamento */
.product__payment-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Container uniforme para cada logo */
.product__payment-icons svg,
.product__payment-logo {
  display: block;
  width: 52px;
  height: 34px;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  padding: 3px 4px;
}

/* Mobile — ajustes */
@media (max-width: 749px) {
  .perso-box__fields {
    grid-template-columns: 1fr 90px;
    gap: 10px;
  }
  .player-chip {
    min-width: 70px;
    font-size: 0.68rem;
    padding: 7px 10px;
  }
  .product__atc-yellow {
    font-size: 1rem;
    padding: 16px 20px;
  }
}

/* ==========================================================================
   HERO CONTENT — texto colado à esquerda sem o padding simétrico do page-width
   ========================================================================== */
.hero__content-inner {
  width: 100%;
  padding-left: clamp(16px, 4vw, 80px);
  padding-right: 0;
  max-width: 100%;
  /* Constrain text to left half so it doesn't overlap the players */
  box-sizing: border-box;
}

/* All direct children of the inner wrapper max at ~50% width on desktop */
.hero__content-inner > * {
  max-width: min(600px, 52vw);
}

/* But on mobile everything goes full width */
@media (max-width: 767px) {
  .hero__content-inner { padding-left: 20px; padding-right: 20px; }
  .hero__content-inner > * { max-width: 100%; }
}

/* ==========================================================================
   STICKY HEADER — garantir que o wrapper Shopify não quebra o sticky
   ========================================================================== */
#shopify-section-header-group,
.shopify-section-group-header-group {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Impedir que qualquer overflow quebre o sticky */
body > * { overflow-x: clip; }

/* ==========================================================================
   HOW-IT-WORKS — gradiente verde mesh (Design_sem_nome-7.png)
   Canto inf-esq: verde escuro teal → Centro: verde médio → Canto sup-dir: verde brilhante
   ========================================================================== */
.how-it-works.section--dark {
  background:
    radial-gradient(ellipse 75% 65% at 92% 10%, rgba(80, 185, 60, 0.90) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 55% 45%, rgba(35, 130, 40, 0.75) 0%, transparent 60%),
    radial-gradient(ellipse 70% 80% at 5% 90%, rgba(5, 45, 35, 1.0) 0%, transparent 60%),
    linear-gradient(145deg, #072e20 0%, #0d5a2a 30%, #1a8a30 58%, #3db840 80%, #52c832 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.how-it-works.section--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
.how-it-works.section--dark > * { position: relative; z-index: 1; }
.how-it-works.section--dark .eyebrow { color: rgba(255,255,255,0.75); }
.how-it-works.section--dark h2,
.how-it-works.section--dark .h2 { color: #ffffff !important; text-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.how-it-works.section--dark .how-step__title { color: #ffffff; }
.how-it-works.section--dark .how-step__text { color: rgba(255,255,255,0.85); }
.how-it-works.section--dark .how-step__number { color: rgba(255,255,255,0.12); }
.how-it-works.section--dark .how-step { border-color: rgba(255,255,255,0.12) !important; }

/* ==========================================================================
   HEADER — sempre escuro: forçar cores de texto a branco
   ========================================================================== */
.site-header .header__logo { color: #ffffff; }
.site-header .header__nav-link { color: #ffffff; }
.site-header .header__nav-link:hover { color: var(--color-accent); }
.site-header .header__action-btn { color: #ffffff; }
.site-header .header__action-btn:hover { color: var(--color-accent); }
.site-header .cart-count-bubble { background: var(--color-accent); color: #000; }

/* Search bar — sempre branco/legível sobre fundo escuro */
.site-header .header-search-form {
  background: #ffffff;
  border-color: rgba(255,255,255,0.15);
}
.site-header .header-search-form:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.25);
}
.site-header .header-search-form__input {
  background: #ffffff;
  color: #111111;
}
.site-header .header-search-form__input::placeholder { color: #777777; }
.site-header .header-search-form__icon { color: #555555; }
.site-header .header-search-form__submit {
  background: #111111;
  color: #ffffff;
}
.site-header .header-search-form__submit:hover {
  background: var(--color-accent);
  color: #ffffff;
}

/* ==========================================================================
   CART REC — size toggle dropdown (cleaner than inline pills)
   ========================================================================== */
.cart-rec__price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.cart-rec__size-toggle-wrap {
  position: relative;
}
.cart-rec__size-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: 100px;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cart-rec__size-toggle:hover { border-color: var(--color-accent); }
.cart-rec__size-toggle[aria-expanded="true"] {
  border-color: var(--color-accent);
  background: rgba(0, 200, 83, 0.06);
}
.cart-rec__size-toggle svg { transition: transform .2s ease; }
.cart-rec__size-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.cart-rec__sizes {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--color-bg);
  border: 1.5px solid var(--color-accent);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 160px;
  z-index: 20;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  animation: sizeDropIn .18s cubic-bezier(.4,0,.2,1);
}
.cart-rec__sizes[hidden] { display: none; }
@keyframes sizeDropIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Keep original pill styles for inside the dropdown */
.cart-rec__sizes .cart-rec__size-pill {
  min-width: 30px;
  height: 26px;
  padding: 0 7px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.cart-rec__sizes .cart-rec__size-pill:hover:not(:disabled) {
  border-color: var(--color-accent);
  background: rgba(0,200,83,0.06);
}
.cart-rec__sizes .cart-rec__size-pill.is-selected {
  background: var(--color-fg);
  color: var(--color-bg);
  border-color: var(--color-fg);
}
.cart-rec__sizes .cart-rec__size-pill:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Ensure .cart-rec info column can hold relative-positioned dropdown */
.cart-rec__info { position: relative; }

/* ==========================================================================
   GIFT BAR — milestone prize labels (clean tooltip above icon when reached)
   ========================================================================== */
.gift-bar__milestone-prize {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #1a6e2e;
  white-space: nowrap;
  background: #c8ffd4;
  padding: 2px 7px;
  border-radius: 100px;
  border: 1px solid rgba(26, 110, 46, 0.25);
  pointer-events: none;
  /* Hidden by default — only show when milestone is reached */
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
/* Show prize tooltip only when milestone is reached */
.gift-bar__milestone.is-reached .gift-bar__milestone-prize {
  opacity: 1;
  visibility: visible;
}
/* Tooltip triangle pointer */
.gift-bar__milestone-prize::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(26, 110, 46, 0.25);
}

/* Milestone --3 aligns right to not go off-screen */
.gift-bar__milestone--3 .gift-bar__milestone-prize {
  left: auto;
  right: 0;
  transform: none;
}
.gift-bar__milestone--3 .gift-bar__milestone-prize::after {
  left: auto;
  right: 12px;
  transform: none;
}

/* Extra bottom padding for the milestone labels below track */
.gift-bar { padding-bottom: 12px !important; }

/* ==========================================================================
   CATEGORY NAV BAR
   ========================================================================== */

.cat-nav {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  position: sticky;
  top: var(--header-height, 72px);
  z-index: 90;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-nav::-webkit-scrollbar { display: none; }

.cat-nav__inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  width: max-content;
  min-width: 100%;
}

.cat-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #222;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
  border: 1.5px solid transparent;
}

.cat-nav__item:hover {
  background: #f2f2f2;
  color: #000;
}

.cat-nav__item--featured {
  background: #111;
  color: #fff;
  border-color: #111;
}

.cat-nav__item--featured:hover {
  background: #333;
  color: #fff;
}

.cat-nav__icon {
  font-size: 1rem;
  line-height: 1;
}

/* ==========================================================================
   UNBOXING VIDEO SECTION
   ========================================================================== */

.unboxing-section {
  padding: 60px 0 80px;
}

.unboxing-section__subtitle {
  color: var(--color-muted, #888);
  font-size: 1rem;
  margin-top: 8px;
}

.unboxing-player {
  margin-top: 36px;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 80px rgba(0,0,0,0.18);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.unboxing-player__wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.unboxing-player__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  outline: none;
}

.unboxing-player__caption {
  text-align: center;
  padding: 14px 20px;
  font-size: 0.85rem;
  color: var(--color-muted, #888);
  background: #000;
}

.unboxing-player__placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.4);
  font-size: 0.9rem;
}

.unboxing-player__no-vid {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

.unboxing-player__wrap--poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 749px) {
  .unboxing-player {
    border-radius: 12px;
    margin-top: 24px;
  }
  .cat-nav__inner {
    padding: 8px 16px;
  }
  .cat-nav__item {
    padding: 7px 14px;
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   HEADER — Nike-style nav with dropdowns
   ========================================================================== */

.header__wrap {
  display: flex;
  align-items: center;
  gap: 0;
  height: 68px;
  padding: 0 24px;
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
}

/* Logo */
.header__wrap .header__logo {
  flex-shrink: 0;
  margin-right: 32px;
}

/* Nav */
.header__wrap .header__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

/* Nav items */
.hnav__item {
  position: relative;
}

.hnav__link,
.hnav__link--btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
  font-family: inherit;
}

.hnav__link:hover,
.hnav__link--btn:hover,
.hnav__item--drop.is-open .hnav__link--btn {
  color: var(--color-accent, #00C853);
  background: rgba(255,255,255,0.06);
}

.hnav__chevron {
  transition: transform 0.2s;
  flex-shrink: 0;
  opacity: 0.7;
}

.hnav__item--drop.is-open .hnav__chevron {
  transform: rotate(180deg);
}

/* Dropdown */
.hnav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: #1a1f2e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 200;
  overflow: hidden;
}

.hnav__item--drop.is-open .hnav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hnav__dropdown-inner {
  padding: 8px;
}

.hnav__dropdown-link {
  display: block;
  padding: 10px 14px;
  font-size: 0.83rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  border-radius: 7px;
  transition: background 0.12s, color 0.12s;
}

.hnav__dropdown-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* Search bar (compact, right of nav) */
.header__wrap .header__search {
  flex-shrink: 0;
  width: 280px;
  margin: 0 16px;
}

/* Actions */
.header__wrap .header__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* Mobile: hide desktop nav */
@media (max-width: 989px) {
  .header__wrap .header__nav { display: none; }
  .header__wrap .header__search { display: none; }
  .header__wrap { padding: 0 16px; }
}

/* Remove old cat-nav if present */
.cat-nav { display: none !important; }

/* Mobile sub-links */
.mobile-nav__link--sub {
  padding-left: 32px;
  font-size: 0.8rem;
  opacity: 0.7;
}

/* ==========================================================================
   PRODUCT CARD — ATC + WISHLIST
   ========================================================================== */

.product-card { position: relative; }

/* Wishlist heart — top right corner */
.product-card__wish {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.15s, background 0.15s;
  color: #555;
}
.product-card__wish:hover { transform: scale(1.1); background: #fff; color: #e03;  }
.product-card__wish.is-wished { color: #e03; }
.product-card__wish.is-wished .wish-icon--empty  { display: none !important; }
.product-card__wish.is-wished .wish-icon--filled { display: block !important; }

/* ATC button wrapper */
.product-card__atc-wrap {
  padding: 0 12px 12px;
}
.product-card__atc {
  width: 100%;
  padding: 11px 16px;
  background: #111;
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
}
.product-card__atc:hover { background: #333; }
.product-card__atc:disabled { background: #ccc; color: #888; cursor: not-allowed; }
.product-card__atc.is-added { background: var(--color-accent, #00C853); color: #fff; }

/* ==========================================================================
   SIZE MODAL
   ========================================================================== */
.size-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 500; backdrop-filter: blur(3px);
}
.size-modal {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 501;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 24px 20px 32px;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  max-width: 480px;
  margin: 0 auto;
  animation: slideUp 0.25s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.size-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.size-modal__title { font-size: 1rem; font-weight: 700; color: #111; }
.size-modal__close { color: #555; }
.size-modal__sizes {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.size-btn {
  flex: 1 1 calc(25% - 10px);
  min-width: 60px;
  padding: 12px 8px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  background: #fff;
  color: #111;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
  font-family: inherit;
}
.size-btn:hover { border-color: #111; background: #111; color: #fff; }
.size-btn--out { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }

/* ==========================================================================
   WISHLIST DRAWER
   ========================================================================== */
.wishlist-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 400; opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.wishlist-overlay.is-open { opacity: 1; pointer-events: auto; }

.wishlist-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 100vw;
  background: #fff; z-index: 401;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 40px rgba(0,0,0,0.15);
}
.wishlist-drawer.is-open { transform: translateX(0); }

.wishlist-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.wishlist-drawer__title { font-size: 1.05rem; font-weight: 800; color: #111; text-transform: uppercase; letter-spacing: .04em; }
.wishlist-drawer__close { color: #555; }
.wishlist-drawer__items { flex: 1; overflow-y: auto; padding: 16px; }

.wishlist-empty { color: #888; font-size: 0.9rem; text-align: center; padding: 40px 0; }

.wishlist-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid #f0f0f0;
  position: relative;
}
.wishlist-item__img { width: 80px; height: 80px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: #f5f5f5; }
.wishlist-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wishlist-item__info { flex: 1; min-width: 0; }
.wishlist-item__title { display: block; font-size: 0.85rem; font-weight: 600; color: #111; text-decoration: none; line-height: 1.35; margin-bottom: 4px; }
.wishlist-item__title:hover { color: var(--color-accent, #00C853); }
.wishlist-item__price { display: block; font-size: 0.85rem; font-weight: 700; color: #111; margin-bottom: 8px; }
.wishlist-item__cta {
  display: inline-block; padding: 6px 14px;
  background: #111; color: #fff;
  font-size: 0.75rem; font-weight: 700;
  border-radius: 6px; text-decoration: none;
  letter-spacing: .03em;
  transition: background .15s;
}
.wishlist-item__cta:hover { background: var(--color-accent, #00C853); color: #fff; }
.wishlist-item__rm {
  flex-shrink: 0; background: none; border: none;
  cursor: pointer; color: #bbb; padding: 4px;
  transition: color .15s;
}
.wishlist-item__rm:hover { color: #e03; }

@media (max-width: 480px) {
  .wishlist-drawer { width: 100vw; }
  .size-modal { border-radius: 16px 16px 0 0; }
}

/* ==========================================================================
   QUICK-ADD MODAL — tamanho + personalização
   ========================================================================== */
.qa-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 500; backdrop-filter: blur(4px);
}
.qa-modal {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 501; background: #fff;
  border-radius: 20px 20px 0 0;
  max-width: 520px; margin: 0 auto;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.2);
  animation: qaSlideUp .28s cubic-bezier(.4,0,.2,1);
  padding-bottom: env(safe-area-inset-bottom, 16px);
}
@keyframes qaSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

.qa-modal__handle {
  width: 40px; height: 4px; background: #e0e0e0;
  border-radius: 2px; margin: 12px auto 0;
}
.qa-modal__product {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px 14px;
  border-bottom: 1px solid #f0f0f0;
}
.qa-modal__img {
  width: 60px; height: 60px; object-fit: cover;
  border-radius: 8px; flex-shrink: 0; background: #f5f5f5;
}
.qa-modal__meta { flex: 1; min-width: 0; }
.qa-modal__name { font-size: .88rem; font-weight: 700; color: #111; line-height: 1.3; }
.qa-modal__price { font-size: .85rem; font-weight: 600; color: #111; margin-top: 3px; }
.qa-modal__close { margin-left: auto; flex-shrink: 0; color: #888; }

/* Sections */
.qa-section { padding: 16px 18px; border-bottom: 1px solid #f0f0f0; }
.qa-label {
  font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #333; margin-bottom: 12px;
}
.qa-label-opt { font-weight: 500; color: #aaa; text-transform: none; letter-spacing: 0; }

/* Size buttons */
.qa-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.qa-size {
  padding: 10px 14px; border: 2px solid #e0e0e0; border-radius: 8px;
  font-size: .85rem; font-weight: 700; background: #fff; color: #111;
  cursor: pointer; font-family: inherit; transition: all .15s; min-width: 52px; text-align: center;
}
.qa-size:hover { border-color: #111; background: #111; color: #fff; }
.qa-size.is-sel { border-color: #111; background: #111; color: #fff; }
.qa-size--out { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.qa-size-err { color: #e03; font-size: .78rem; margin-top: 8px; }

/* Perso tabs */
.qa-perso-tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: 10px; overflow: hidden; border: 1.5px solid #e8e8e8; margin-bottom: 14px; }
.qa-ptab { padding: 11px; font-size: .82rem; font-weight: 600; background: #f7f7f7; border: none; cursor: pointer; color: #666; font-family: inherit; transition: background .15s, color .15s; }
.qa-ptab.is-active { background: #111; color: #fff; }

/* Player chips */
.qa-players { display: flex; flex-wrap: wrap; gap: 7px; }
.qa-player {
  padding: 7px 12px; border: 1.5px solid #e0e0e0; border-radius: 8px;
  font-size: .72rem; font-weight: 700; cursor: pointer; background: #f5f5f5;
  color: #111; font-family: inherit; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: all .15s; line-height: 1.2;
}
.qa-player span { font-size: .65rem; color: #888; font-weight: 600; }
.qa-player:hover, .qa-player.is-sel { background: #111; color: #fff; border-color: #111; }
.qa-player.is-sel span, .qa-player:hover span { color: rgba(255,255,255,.65); }

/* Name fields */
.qa-name-fields { display: grid; grid-template-columns: 1fr 90px; gap: 10px; }
.qa-field-label { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #666; margin-bottom: 6px; }
.qa-input { width: 100%; padding: 11px 13px; border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: .9rem; font-family: inherit; color: #111; background: #fff; outline: none; }
.qa-input:focus { border-color: #111; }
.qa-input::placeholder { color: #bbb; }

/* Footer */
.qa-footer { padding: 14px 18px 20px; }
.qa-atc-btn {
  width: 100%; padding: 16px; background: #F5C518; color: #111;
  font-family: inherit; font-size: 1rem; font-weight: 800; border: none;
  border-radius: 100px; cursor: pointer; transition: background .18s;
}
.qa-atc-btn:hover { background: #e6b800; }
.qa-atc-btn.is-added { background: var(--color-accent, #00C853); color: #fff; }

@media (max-width: 480px) {
  .qa-modal { border-radius: 16px 16px 0 0; }
  .qa-name-fields { grid-template-columns: 1fr 80px; }
}

/* "Sem personalização" chip */
.qa-player--clear {
  background: #f0f0f0;
  border-color: #ccc;
  color: #888;
  font-size: .7rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  min-width: 70px;
}
.qa-player--clear.is-sel {
  background: #f0f0f0;
  border-color: #aaa;
  color: #555;
}
.qa-player--clear:hover {
  background: #e5e5e5;
  color: #333;
  border-color: #aaa;
}

/* ==========================================================================
   SIZE BUTTONS — compact pill style (product page override)
   ========================================================================== */
.product__variants .size-btn {
  min-width: 0;
  width: auto;
  height: auto;
  padding: 9px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 50px;
  border: 1.5px solid #ddd;
  background: #fff;
  color: #111;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.03em;
  font-family: inherit;
  flex-shrink: 0;
  transform: none !important;
}
.product__variants .size-btn:hover:not([disabled]) {
  border-color: #111;
  background: #111;
  color: #fff;
}
.product__variants .size-btn[data-selected="true"] {
  background: #111;
  color: #fff;
  border-color: #111;
  transform: none !important;
}
.product__variants .size-btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}
.product__variants .size-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==========================================================================
   FIX 1 — Produto: imagem cabe no ecrã sem scroll
   ========================================================================== */

/* Desktop: limita altura ao viewport menos o header */
#product-media-main {
  max-height: calc(100vh - 120px);
}
#product-media-main .product__media-item {
  aspect-ratio: auto;
  max-height: calc(100vh - 120px);
  overflow: hidden;
}
#product-media-main .product__media-item img {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  object-position: center top;
}

/* Mobile: imagem full-width */
@media (max-width: 767px) {
  #product-media-main {
    max-height: none;
  }
  #product-media-main .product__media-item {
    aspect-ratio: 1 / 1;
    max-height: none;
  }
  #product-media-main .product__media-item img {
    max-height: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* ==========================================================================
   FIX 2 — Cart Drawer: gift bar sem sobreposição
   ========================================================================== */

/* Mais espaço para os ícones de milestone não sobreporem o headline */
.gift-bar {
  padding: 14px 20px 20px;
}

.gift-bar__headline {
  font-size: 0.8rem;
  margin: 0 0 14px;
  padding: 0 8px;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

/* Mais espaço em cima do track para os gift icons (32px de altura) */
.gift-bar__track {
  margin: 28px 16px 10px;
}

/* Labels "Leva X" abaixo do track com mais espaço */
.gift-bar__milestone-label {
  top: 40px;
  font-size: 0.6rem;
  white-space: nowrap;
}

/* Prize tooltip não sobrepõe nada */
.gift-bar__milestone-prize {
  font-size: 0.65rem;
  white-space: nowrap;
  top: auto;
  bottom: calc(100% + 8px);
}

/* Padding extra para os labels abaixo do track */
.gift-bar {
  padding-bottom: 28px !important;
}

/* Envio grátis row com espaço */
.gift-bar__shipping-row,
.gift-bar [data-gift-bar-shipping] {
  margin-top: 8px;
  font-size: 0.78rem;
  text-align: center;
}

/* ==========================================================================
   FIX — Remover bordas cinzentas das imagens do produto
   ========================================================================== */
.product__media-item {
  background: transparent !important;
  border: none !important;
}
#product-media-main .product__media-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.product__thumb {
  border: 2px solid transparent !important;
  background: transparent !important;
}
.product__thumb.is-active {
  border-color: var(--color-accent) !important;
}

/* ==========================================================================
   LIVE SEARCH DROPDOWN — sugestões + histórico
   ========================================================================== */

#header-search-wrap { position: relative; }

.search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.16);
  z-index: 300;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.07);
  min-width: 360px;
}

.search-dropdown__section { padding: 10px 0; }
.search-dropdown__section + .search-dropdown__section {
  border-top: 1px solid #f0f0f0;
}

.search-dropdown__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 4px;
}

.search-dropdown__label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
}

.search-dropdown__clear-all {
  font-size: 0.72rem;
  font-weight: 600;
  color: #999;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color .15s;
}
.search-dropdown__clear-all:hover { color: #e03; }

/* History items */
.search-history-item {
  display: flex;
  align-items: center;
  padding: 2px 16px;
}
.search-history-query {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: #222;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: color .15s;
}
.search-history-query svg { color: #bbb; flex-shrink: 0; }
.search-history-query:hover { color: var(--color-accent, #00C853); }
.search-history-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #ccc;
  font-size: 0.75rem;
  padding: 4px 6px;
  border-radius: 4px;
  font-family: inherit;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.search-history-remove:hover { color: #e03; background: #fee; }

/* Result items */
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  text-decoration: none;
  transition: background .12s;
}
.search-result-item:hover { background: #f7f7f7; }

.search-result-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 6px;
  background: #f5f5f5;
  flex-shrink: 0;
}
.search-result-img--empty { background: #eee; }

.search-result-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-result-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.search-result-price {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent, #00C853);
}

/* Empty state */
.search-dropdown__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  color: #bbb;
  font-size: 0.85rem;
}
.search-dropdown__empty svg { color: #ddd; }

/* Loading spinner */
.search-dropdown__loading {
  display: flex;
  justify-content: center;
  padding: 20px;
}
.search-spinner {
  width: 22px; height: 22px;
  border: 2px solid #eee;
  border-top-color: var(--color-accent, #00C853);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 749px) {
  .search-dropdown {
    position: fixed;
    top: 70px;
    left: 12px; right: 12px;
    min-width: 0;
    border-radius: 12px;
  }
}

/* Search dropdown — sem espaço vazio em baixo */
.search-dropdown {
  max-height: 70vh;
  overflow-y: auto;
}
.search-dropdown__loading {
  padding: 14px;
}
.search-dropdown__empty {
  padding: 16px;
}

/* Search: sd-hidden class replaces hidden attribute to avoid theme CSS overrides */
.sd-hidden { display: none !important; }

/* ==========================================================================
   GIFT BAR — fix sobreposição de texto (override final)
   ========================================================================== */

/* Remove prize badges que sobrepõem o headline — info já está no headline */
.gift-bar__milestone-prize { display: none !important; }

/* Container principal com padding suficiente para labels abaixo */
.gift-bar {
  padding: 16px 20px 42px !important;
}

/* Headline limpo e legível */
.gift-bar__headline {
  font-size: 0.83rem !important;
  line-height: 1.5 !important;
  margin: 0 0 22px !important;
  padding: 0 4px !important;
  text-align: center !important;
}

/* Track com espaço suficiente acima para os ícones (32px) não sobreporem o headline */
.gift-bar__track {
  margin: 20px 14px 0 !important;
}

/* Ícone de milestone — centrado no track, sem conflito */
.gift-bar__gift-icon {
  position: relative;
  z-index: 2;
}

/* Label abaixo do track — posição fixa, não absoluta ao ícone */
.gift-bar__milestone-label {
  position: absolute !important;
  top: 24px !important;
  font-size: 0.6rem !important;
  white-space: nowrap !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.gift-bar__milestone--3 .gift-bar__milestone-label {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

/* ==========================================================================
   GIFT BAR — fix definitivo ícones + labels
   ========================================================================== */
.gift-bar__gift-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  font-size: 0 !important;         /* hide any residual emoji text */
  color: #666 !important;
}
.gift-bar__milestone.is-reached .gift-bar__gift-icon {
  background: linear-gradient(135deg,#ffce00,#ff8800) !important;
  color: #fff !important;
  border-color: #ff9500 !important;
}
.gift-bar__track {
  margin: 16px 14px 28px !important;  /* room above for icons, below for labels */
}
.gift-bar__milestone-label {
  top: 28px !important;
  font-size: 0.58rem !important;
}
.gift-bar {
  padding: 14px 20px 48px !important;
}

/* ==========================================================================
   GIFT PICKER — escolha da camisola grátis
   ========================================================================== */
.gift-picker {
  background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 14px 16px 16px;
}
.gift-picker__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  color: #1a6e2e;
}
.gift-picker__header svg { flex-shrink: 0; margin-top: 2px; }
.gift-picker__header strong { display: block; font-size: 0.85rem; color: #1a1a1a; }
.gift-picker__slots { font-size: 0.75rem; color: #1a6e2e; font-weight: 600; }
.gift-picker__loading { font-size: 0.8rem; color: #888; text-align: center; padding: 12px; }
.gift-picker__empty { font-size: 0.78rem; color: #888; padding: 8px 0; }

.gift-picker__products {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gift-picker__products::-webkit-scrollbar { display: none; }

.gift-product {
  flex-shrink: 0;
  width: 110px;
  background: #fff;
  border-radius: 10px;
  border: 2px solid #e8e8e8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px 10px;
  transition: border-color .15s;
}
.gift-product.is-selected { border-color: #1a6e2e; }

.gift-product__img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
  margin-bottom: 6px;
}
.gift-product__title {
  font-size: 0.68rem;
  font-weight: 600;
  color: #111;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gift-product__btn {
  width: 100%;
  padding: 5px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1.5px solid #111;
  background: #fff;
  color: #111;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  text-align: center;
}
.gift-product__btn:hover { background: #111; color: #fff; }
.gift-product__btn.is-selected { background: #1a6e2e; color: #fff; border-color: #1a6e2e; }

/* Gift picker size selection */
.gift-product__sizes {
  width: 100%;
  margin-top: 6px;
}
.gift-sizes__label {
  font-size: 0.62rem;
  color: #666;
  margin-bottom: 5px;
  text-align: center;
}
.gift-size-btn {
  display: inline-block;
  margin: 2px;
  padding: 4px 8px;
  font-size: 0.65rem;
  font-weight: 700;
  border: 1.5px solid #ccc;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}
.gift-size-btn:hover { border-color: #111; background: #111; color: #fff; }

.gift-product__chosen {
  width: 100%;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #1a6e2e;
  padding: 5px 4px;
  background: #e8f5e9;
  border-radius: 6px;
  margin-top: 4px;
}

/* Gift picker — completion message */
.gift-picker__done {
  text-align: center;
  padding: 12px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a6e2e;
  background: #e8f5e9;
}

/* Fix cart drawer layout so items area doesn't get crushed */
.cart-drawer__items {
  min-height: 0 !important;
  flex: 1 1 0 !important;
}

/* ==========================================================================
   SITE FOOTER — Premium ecommerce layout
   ========================================================================== */

/* ── Outer shell ── */
.site-footer {
  background: #0d1117;
  color: #b8b8b8;
  padding: 0 0 0;
  margin-top: 80px;
  font-size: 0.88rem;
  line-height: 1.65;
}

/* ── Green accent rule (top of footer) ── */
.site-footer::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, #00C853 0%, transparent 55%);
  margin-bottom: 56px;
}

/* ═══ TOP GRID — 4 columns ══════════════════════════════════════════════════ */
.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* 2-col at tablet */
@media (min-width: 640px) {
  .footer__top {
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 48px;
  }
  /* brand takes full width on tablet, rest stack 2-col */
  .footer__col--brand {
    grid-column: 1 / -1;
  }
}

/* 4-col on desktop */
@media (min-width: 1024px) {
  .footer__top {
    grid-template-columns: 1.75fr 1fr 1fr 1.5fr;
    gap: 0 52px;
    align-items: start;
  }
  .footer__col--brand {
    grid-column: auto;
  }
}

/* ── Column base ── */
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer__col--brand {
  gap: 20px;
}

/* ── Brand ── */
.footer__logo-img {
  display: block;
  max-width: 140px;
  height: auto;
}
.footer__logo-text {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 2rem;
  letter-spacing: 0.02em;
  color: #ffffff;
  line-height: 1;
}
.footer__logo-accent { color: #00C853; }

.footer__tagline {
  color: #777;
  line-height: 1.6;
  font-size: 0.875rem;
  margin: 0;
  max-width: 30ch;
}

/* ── Social icons ── */
.footer__socials {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.footer__socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  color: #888;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}
.footer__socials a:hover {
  background: #00C853;
  border-color: #00C853;
  color: #fff;
  transform: translateY(-2px);
}

/* ── Column headings ── */
.footer__heading {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}

/* ── Nav links ── */
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer__links a {
  color: #777;
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1;
  padding: 7px 0 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 0.15s ease, padding-left 0.15s ease;
  display: block;
  position: relative;
}
.footer__links a:last-child { border-bottom: none; }
.footer__links a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2px;
  height: 10px;
  background: #00C853;
  border-radius: 1px;
  transition: transform 0.15s ease;
}
.footer__links a:hover {
  color: #ffffff;
  padding-left: 10px;
}
.footer__links a:hover::before {
  transform: translateY(-50%) scaleY(1);
}

/* ── Newsletter column ── */
.footer__newsletter-text {
  color: #777;
  font-size: 0.855rem;
  line-height: 1.55;
  margin: 0 0 18px;
}
.footer__newsletter-form { display: flex; flex-direction: column; gap: 10px; }
.footer__newsletter-input-wrap {
  display: flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.footer__newsletter-input-wrap:focus-within {
  border-color: #00C853;
  box-shadow: 0 0 0 3px rgba(0,200,83,0.10);
}
.footer__newsletter-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 13px 16px;
  color: #fff;
  font-size: 0.875rem;
  outline: none;
  min-width: 0;
}
.footer__newsletter-input::placeholder { color: #444; }
.footer__newsletter-btn {
  background: #00C853;
  color: #fff;
  border: none;
  width: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.footer__newsletter-btn:hover { background: #00a847; }
.footer__newsletter-success {
  color: #5dcc8a;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer__newsletter-error { color: #ff7070; font-size: 0.82rem; margin: 0; }

/* ═══ MIDDLE STRIP — payments + shipping ════════════════════════════════════ */
.footer__middle {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
@media (min-width: 768px) {
  .footer__middle {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer__payment,
.footer__shipping {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer__payment-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #444;
  white-space: nowrap;
  flex-shrink: 0;
}
.footer__payment-icons {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.footer__payment-icons img,
.footer__payment-icons svg {
  height: 22px;
  width: auto;
  background: #ffffff;
  border-radius: 4px;
  padding: 0 2px;
}
.footer__shipping-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #888;
  font-size: 0.84rem;
}
.footer__shipping-info svg { color: #00C853; flex-shrink: 0; }

/* ═══ BOTTOM BAR — copyright + legal links ══════════════════════════════════ */
.footer__bottom {
  display: flex;
  flex-direction: column-reverse;
  gap: 14px;
  padding: 22px 0 32px;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

.footer__copyright {
  color: #444;
  font-size: 0.79rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  line-height: 1.5;
}
@media (min-width: 768px) { .footer__copyright { justify-content: flex-start; } }

.footer__nif {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  color: #383838;
  font-size: 0.75rem;
}

.footer__bottom-links {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.footer__bottom-links a {
  color: #555;
  font-size: 0.79rem;
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer__bottom-links a:hover { color: #bbb; }
/* Use gap instead of visible separators — .footer__sep hidden */
.footer__sep { display: none; }

/* ── Mobile polish ── */
@media (max-width: 639px) {
  .site-footer::before { margin-bottom: 40px; }
  .footer__top { gap: 36px; }
  .footer__heading { margin-bottom: 14px; padding-bottom: 10px; }
  .footer__middle { gap: 16px; }
  .footer__bottom { padding-bottom: 24px; }
}

/* ==========================================================================
   IMPROVEMENTS — Performance, Accessibility, Mobile, CRO
   ========================================================================== */

/* --------------------------------------------------------------------------
   ACCESSIBILITY: prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__media img { transform: none !important; }
  .product-card:hover .product-card__image--primary { opacity: 1 !important; }
  .product-card:hover .product-card__image--secondary { opacity: 0 !important; }
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY: Enhanced focus styles
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 200, 83, 0.2);
}

/* --------------------------------------------------------------------------
   PERFORMANCE: CLS prevention for product images — already handled by
   the original .product-card__media { aspect-ratio: 4/5; } at top of file
   -------------------------------------------------------------------------- */

/* Hero: original CSS already sets positioning, min-height and object-fit correctly. */

/* --------------------------------------------------------------------------
   MOBILE: Improved touch targets (min 44x44px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .header__action-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .size-btn,
  .color-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .quantity__btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.2rem;
  }

  /* Product page: full-width form on mobile */
  .product__atc-yellow {
    width: 100%;
    padding: 18px 24px;
    font-size: 1rem;
  }

  /* Cart drawer: larger close button */
  .cart-drawer__close {
    min-width: 44px;
    min-height: 44px;
  }

  /* Announcement bar on mobile */
  .announcement-bar { font-size: 0.75rem; }

  /* Mobile nav: more breathing room */
  .mobile-nav__link {
    padding: 14px 24px;
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------
   MOBILE: Product gallery improvements
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .product__gallery {
    margin-bottom: 24px;
  }

  .product__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .product__thumbs::-webkit-scrollbar { display: none; }

  .product__thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
  }

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

/* --------------------------------------------------------------------------
   CRO: Product info improvements
   -------------------------------------------------------------------------- */

/* Stock urgency pulse animation */
.product__stock-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--color-accent);
  animation: dot-pulse 2s ease-in-out infinite;
}

.product__stock-urgency--low .product__stock-dot {
  background: #ff9800;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .product__stock-dot { animation: none; }
}

/* Better price display */
.product__price {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.product__price-current {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-fg);
}

.product__price-compare {
  font-size: 1rem;
  text-decoration: line-through;
  opacity: 0.5;
}

.product__price-saving {
  background: var(--color-sale, #C0392B);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   CRO: Button improvements
   -------------------------------------------------------------------------- */

/* Primary CTA - cleaner hover */
.btn--primary {
  position: relative;
  overflow: hidden;
}

.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.btn--primary:hover::after { opacity: 1; }

/* Product ATC button */
.product__atc-yellow {
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product__atc-yellow:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 200, 83, 0.3);
}

.product__atc-yellow:not(:disabled):active {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   CRO: Cart drawer footer sticky
   -------------------------------------------------------------------------- */
.cart-drawer {
  display: flex;
  flex-direction: column;
}

.cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.cart-drawer__footer {
  position: sticky;
  bottom: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   UX: Empty states
   -------------------------------------------------------------------------- */
.cart-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 24px;
  min-height: 50vh;
  justify-content: center;
}

.cart-page__empty::before {
  content: '';
  display: block;
  width: 80px;
  height: 80px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  margin: 0 auto 32px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z' stroke='%23555' stroke-width='1.5'/%3E%3Cpath d='M3 6h18M16 10a4 4 0 0 1-8 0' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px;
}

/* --------------------------------------------------------------------------
   UX: Loading states
   -------------------------------------------------------------------------- */
.btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}

.btn.is-loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   UX: Smooth page transitions (Turbolinks-safe)
   -------------------------------------------------------------------------- */
.page-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  transition: opacity 0.15s ease;
}

/* --------------------------------------------------------------------------
   VISUAL: Toast notifications
   -------------------------------------------------------------------------- */
.toast {
  border-left: 3px solid var(--color-accent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* --------------------------------------------------------------------------
   MOBILE: Sticky ATC bar improvements
   -------------------------------------------------------------------------- */
.sticky-atc {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (min-width: 768px) {
  .sticky-atc { display: none !important; }
}

/* --------------------------------------------------------------------------
   VISUAL: Trust badges strip
   -------------------------------------------------------------------------- */
.trust-item {
  transition: transform 0.2s ease;
}

.trust-item:hover {
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   SEO: Better heading hierarchy visual cue
   -------------------------------------------------------------------------- */
.collection-hero__title {
  font-size: clamp(2rem, 6vw, 4.5rem);
}

/* --------------------------------------------------------------------------
   PERFORMANCE: content-visibility removed from footer — caused large white
   gap below last section due to intrinsic-size mismatch on scroll
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   MOBILE: Better collection grid
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .product-card__title {
    font-size: 0.85rem;
  }

  .product-card__price {
    font-size: 0.9rem;
  }
}

/* --------------------------------------------------------------------------
   UX: Form improvements
   -------------------------------------------------------------------------- */
input[type="email"],
input[type="text"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
}

/* Better placeholder styling */
::placeholder {
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   UX: Skip to content animation
   -------------------------------------------------------------------------- */
.skip-to-content {
  transition: top 0.15s ease;
}

/* --------------------------------------------------------------------------
   VISUAL: Micro-interactions on product cards
   -------------------------------------------------------------------------- */
.product-card {
  transition: box-shadow 0.2s ease;
}

.product-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* --------------------------------------------------------------------------
   MOBILE: Announcement bar scrolls smoothly
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .announcement-bar__track {
    will-change: transform;
  }
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY: Screen reader only text
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   PRINT: Basic print styles
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .cart-drawer,
  .whatsapp-float,
  .cookie-banner,
  .sticky-atc,
  .announcement-bar {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 12pt;
  }

  a { color: #000; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}