/* ==========================================================================
   RISKY — estilos globais
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --c-bg: #ffffff;
  --c-fg: #0b0b0b;
  --c-muted: #5c5c5c;
  --c-line: #e8e8e8;
  --c-surface: #f3f3f3;
  --c-image: #e9e9ec;
  --c-product: #ffffff; /* fundo das fotos de camiseta (as fotos também têm fundo branco) */
  --c-navy: #052c56; /* azul marinho da marca */

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-body);

  --header-h: 60px;
  --header-h-compact: 56px;
  --gutter: clamp(16px, 4vw, 56px);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-slide: cubic-bezier(.77, 0, .18, 1);
  --dur-fast: 180ms;
  --dur: 300ms;
  --dur-slow: 800ms;

  --z-header: 100;
  --z-skip: 300;

  /* botão com contorno: cores do hover (invertidas em fundos escuros) */
  --btn-hover-bg: var(--c-fg);
  --btn-hover-fg: #ffffff;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 72px;
    --header-h-compact: 60px;
  }
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

/* rolagem suave (Lenis 1.3.26): regras recomendadas pela biblioteca */
html.lenis,
html.lenis body { height: auto; }

.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }

.lenis.lenis-smooth iframe { pointer-events: none; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

button { font: inherit; color: inherit; }

a,
button,
summary { touch-action: manipulation; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* o atributo hidden sempre esconde, mesmo em elementos que têm display próprio no CSS */
[hidden] { display: none !important; }

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

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: var(--z-skip);
  padding: 10px 16px;
  background: var(--c-fg);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) ease;
}

.skip-link:focus { transform: none; }

/* ---------- Ícones ---------- */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm { width: 18px; height: 18px; }
.icon--xs { width: 14px; height: 14px; stroke-width: 2; }

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--dur-fast) ease;
}

.icon-btn:hover { opacity: .65; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 28px;
  border-radius: 999px;
  font: 500 12.5px/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.btn--outline {
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
}

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

.btn--dark { color: var(--c-fg); }

/* ---------- Links animados ----------
   Adaptado do "Skiper 40" da Skiper UI (https://skiper-ui.com), autor @gurvinder-singh02.
   Licença gratuita: uso livre, com atribuição à Skiper UI.

   .link-fx               sublinhado entra pela esquerda e sai pela direita
   .link-fx--reverse      entra pela direita e sai pela esquerda
   .link-fx--center       cresce a partir do centro
   .link-fx--highlight    bloco sobe por trás do texto invertendo as cores (usar sobre fundo sólido)
   .link-fx--fill         bloco preenche da esquerda invertendo as cores (usar sobre fundo sólido)
   .link-fx__arrow        seta (svg) que aparece no hover */
.link-fx {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.link-fx::before {
  content: '';
  position: absolute;
  bottom: var(--link-fx-offset, -.12em);
  left: 0;
  width: 100%;
  height: max(1px, .07em);
  background: currentColor;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms var(--ease-standard);
}

.link-fx__arrow {
  width: .55em;
  height: .55em;
  margin-left: .3em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateY(.25em);
  transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard);
}

.link-fx:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left;
}

.link-fx:focus-visible .link-fx__arrow {
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  .link-fx:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }

  .link-fx:hover .link-fx__arrow {
    opacity: 1;
    transform: none;
  }
}

/* sem mouse não há hover: a seta fica sempre visível */
@media (hover: none) {
  .link-fx__arrow {
    opacity: 1;
    transform: none;
  }
}

.link-fx--reverse::before { transform-origin: left; }

.link-fx--reverse:focus-visible::before { transform-origin: right; }

.link-fx--center::before,
.link-fx--center:focus-visible::before { transform-origin: center; }

.link-fx--highlight,
.link-fx--fill { padding-inline: .5em; }

.link-fx--highlight::before,
.link-fx--fill::before {
  background: #fff;
  mix-blend-mode: difference;
}

.link-fx--highlight::before {
  bottom: 0;
  height: 1.4em;
  transform: scaleY(0);
  transform-origin: bottom;
}

.link-fx--fill::before {
  top: 0;
  bottom: 0;
  height: auto;
  transform-origin: left;
}

.link-fx--highlight .link-fx__arrow,
.link-fx--fill .link-fx__arrow { margin-left: .6em; }

.link-fx--fill .link-fx__arrow { transform: translateX(-.25em) rotate(45deg); }

.link-fx--highlight:focus-visible::before { transform: scaleY(1); }

.link-fx--highlight:focus-visible .link-fx__arrow { transform: rotate(45deg); }

.link-fx--fill:focus-visible::before { transform: scaleX(1); transform-origin: left; }

.link-fx--fill:focus-visible .link-fx__arrow { transform: rotate(45deg); }

@media (hover: hover) {
  .link-fx--reverse:hover::before { transform-origin: right; }

  .link-fx--center:hover::before { transform-origin: center; }

  .link-fx--highlight:hover::before { transform: scaleY(1); }

  .link-fx--highlight:hover .link-fx__arrow { transform: rotate(45deg); }

  .link-fx--fill:hover::before { transform: scaleX(1); transform-origin: left; }

  .link-fx--fill:hover .link-fx__arrow { transform: rotate(45deg); }
}

/* ---------- Desfoque progressivo ----------
   Adaptado do "Skiper 41" (ProgressiveBlur) da Skiper UI (https://skiper-ui.com), autor @gurvinder-singh02.
   Licença gratuita: uso livre, com atribuição à Skiper UI.

   Uso: <div class="progressive-blur progressive-blur--top" aria-hidden="true"></div>
   dentro de um elemento com position relative/fixed/absolute.
   Ajustes: --pb-color (cor do fundo), --pb-size (tamanho da faixa), --pb-blur (intensidade). */
.progressive-blur {
  --pb-color: var(--c-bg);
  --pb-size: 150px;
  --pb-blur: 4px;
  --pb-dir: to bottom;
  position: absolute;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(var(--pb-dir), var(--pb-color), transparent);
  -webkit-mask-image: linear-gradient(var(--pb-dir), #000 50%, transparent);
  mask-image: linear-gradient(var(--pb-dir), #000 50%, transparent);
  -webkit-backdrop-filter: blur(var(--pb-blur));
  backdrop-filter: blur(var(--pb-blur));
}

.progressive-blur--top,
.progressive-blur--bottom {
  left: 0;
  width: 100%;
  height: var(--pb-size);
}

.progressive-blur--left,
.progressive-blur--right {
  top: 0;
  width: var(--pb-size);
  height: 100%;
}

.progressive-blur--top { top: 0; --pb-dir: to bottom; }
.progressive-blur--bottom { bottom: 0; --pb-dir: to top; }
.progressive-blur--left { left: 0; --pb-dir: to right; }
.progressive-blur--right { right: 0; --pb-dir: to left; }

/* ==========================================================================
   Cabeçalho fixo
   Layout minimalista inspirado em balddoria.com: menu e cidade à esquerda,
   marca no centro, ícones à direita. Sempre transparente (data-transparent): logo e ícones
   brancos sobre o banner escuro (data-tone="dark") e azul marinho sobre os fundos brancos.
   ========================================================================== */
.site-top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
}

/* páginas sem banner no topo: o conteúdo começa abaixo do cabeçalho */
.site-top ~ main:not(:has(> .hero:first-of-type)) { padding-top: var(--header-h); }

/* ---------- Cabeçalho ---------- */
.header {
  --badge-bg: var(--c-fg);
  --badge-fg: #fff;
  position: relative;
  background: var(--c-bg);
  color: var(--c-fg);
  transition: background-color var(--dur) ease, color var(--dur) ease;
}

.site-top[data-transparent] .header { background: transparent; }

.site-top[data-transparent][data-tone="dark"] .header {
  --badge-bg: #fff;
  --badge-fg: #000;
  color: #fff;
}

.header__inner {
  position: relative;
  z-index: 1; /* acima do desfoque */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
  padding-inline: var(--gutter);
  transition: height var(--dur) var(--ease-out);
}

.site-top.is-scrolled .header__inner { height: var(--header-h-compact); }

/* depois de rolar, um desfoque leve e sem cor atrás do cabeçalho, para os textos dele não se
   misturarem com o que passa por baixo. Sobre o banner não aparece */
.header .header__blur {
  top: 0;
  --pb-color: transparent;
  --pb-size: calc(100% + 24px);
  --pb-blur: 8px;
  opacity: 0;
  transition: opacity var(--dur) ease;
}

.site-top.is-scrolled:not(.is-over-hero) .header__blur { opacity: 1; }

.header__side {
  display: flex;
  align-items: center;
  min-width: 0;
}

.header__side--start { gap: clamp(24px, 2.6vw, 40px); }

/* o ícone encosta na margem, descontando a área de toque do botão */
.header__side--end {
  justify-content: flex-end;
  margin-right: -11px;
}

.header .icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

/* textos pequenos em maiúsculas, como no Balddoria */
.menu-btn {
  --link-fx-offset: -4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: 500 11px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.menu-btn__icon {
  width: 14px;
  height: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.header__location {
  display: none;
  margin: 0;
  font: 400 10.5px/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* no celular ficam só o menu, a marca e a sacola */
.header__icon--wide { display: none; }

@media (min-width: 768px) {
  .header__icon--wide { display: inline-flex; }
}

@media (min-width: 1024px) {
  .header__location { display: block; }
}
/* o sublinhado animado (Skiper 40) acompanha o botão inteiro, não só o texto */
.menu-btn:focus-visible .link-fx::before,
.drawer__foot-link:focus-visible .link-fx::before {
  transform: scaleX(1);
  transform-origin: left;
}

@media (hover: hover) {
  .menu-btn:hover .link-fx::before,
  .drawer__foot-link:hover .link-fx::before {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* logo em imagem: estrela + nome. No cabeçalho as duas versões do nome ficam empilhadas:
   a azul marinho aparece com o cabeçalho branco (ou sobre banner claro) e a branca sobre
   banner escuro, trocando com a mesma transição de cor do cabeçalho. A estrela só existe
   em azul marinho; sobre o banner escuro um filtro a deixa branca */
.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: center;
  text-decoration: none;
}

.logo__word {
  position: relative;
  display: block;
}

.logo__img {
  display: block;
  width: auto;
  height: 22px;
  transition: opacity var(--dur) ease;
}

.logo__img--light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.logo__star {
  display: block;
  width: auto;
  height: 34px;
  transition: filter var(--dur) ease;
}

/* estrela animada (Rive): um quadro 300/256 maior que a estrela, centralizado sobre ela.
   Enquanto gira, a imagem normal fica invisível; no fim ela volta e o quadro sai */
.logo__rive {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(34px * 300 / 256);
  height: calc(34px * 300 / 256);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: filter var(--dur) ease;
}

@media (min-width: 1024px) {
  .logo__rive {
    width: calc(42px * 300 / 256);
    height: calc(42px * 300 / 256);
  }
}

.logo__star.is-spinning { visibility: hidden; }

.site-top[data-transparent][data-tone="dark"] .logo__rive { filter: brightness(0) invert(1); }

.site-top[data-transparent][data-tone="dark"] .logo__img--dark { opacity: 0; }
.site-top[data-transparent][data-tone="dark"] .logo__img--light { opacity: 1; }
.site-top[data-transparent][data-tone="dark"] .logo__star { filter: brightness(0) invert(1); }

@media (min-width: 1024px) {
  .logo { gap: 10px; }
  .logo__img { height: 28px; }
  .logo__star { height: 42px; }
}

.logo--footer .logo__img { height: 26px; }

.cart-btn__count {
  position: absolute;
  top: 6px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-fg);
  font: 600 10px/16px var(--font-body);
  text-align: center;
  transition: background-color var(--dur) ease, color var(--dur) ease;
}

/* ---------- Menu (painel lateral translúcido) ---------- */
.drawer {
  inset: 0 auto 0 0;
  width: min(86vw, 380px);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(255 255 255 / .88);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: var(--c-fg);
  transform: translateX(-100%);
  transition: transform 420ms var(--ease-out), overlay 420ms allow-discrete, display 420ms allow-discrete;
}

.drawer[open] { transform: none; }

/* a página continua visível ao lado, sem escurecer */
.drawer::backdrop { background: transparent; }

/* estado inicial da animação de entrada (navegadores sem suporte só não animam) */
@starting-style {
  .drawer[open] { transform: translateX(-100%); }
}

.drawer__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ícone X animado (Rive): o canvas fica por cima do X normal, que some quando o player carrega */
.drawer__close-rive {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.has-rive > .icon { visibility: hidden; }

/* textos do menu: sobem de leve e aparecem, um depois do outro, a cada abertura.
   --i (ordem) vem do JS (initDrawerMotion); com movimento reduzido não anima */
@keyframes drawer-item {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .drawer[open] :is(.drawer__title, .drawer__link, .drawer__foot-link, .drawer__location) {
    animation: drawer-item 600ms var(--ease-out) both;
    animation-delay: calc(120ms + var(--i, 0) * 45ms);
  }
}

.drawer__head {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: var(--header-h);
  padding-inline: calc(var(--gutter) - 12px);
}

.drawer__nav {
  flex: 1;
  padding: 4px var(--gutter) 28px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.drawer__list,
.drawer__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer__list {
  display: grid;
  gap: 22px;
}

.drawer__sublist {
  display: grid;
  gap: 11px;
  margin-top: 13px;
}

.drawer__title,
.drawer__link {
  --link-fx-offset: -4px;
  color: var(--c-fg);
  font: 500 12px/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.drawer__link {
  color: var(--c-muted);
  font-weight: 400;
  transition: color var(--dur-fast) ease;
}

.drawer__link:hover { color: var(--c-fg); }

.drawer__foot {
  display: grid;
  padding: 12px var(--gutter) 24px;
  border-top: 1px solid var(--c-line);
}

.drawer__foot-link {
  --link-fx-offset: -4px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: 500 12px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.drawer__location {
  margin: 10px 0 0;
  color: var(--c-muted);
  font: 400 10.5px/1.4 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* a partir do tablet, a busca volta para o cabeçalho; no desktop, a cidade também */
@media (min-width: 768px) {
  .drawer__foot-link { display: none; }

  .drawer__location { margin-top: 0; }
}

@media (min-width: 1024px) {
  .drawer__foot { display: none; }
}

/* ---------- Sacola (painel lateral direito) ----------
   Mesma entrada do menu, só que pela direita; a página atrás escurece de leve */
.cart {
  inset: 0 0 0 auto;
  width: min(100vw, 440px);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  transform: translateX(100%);
  transition: transform 420ms var(--ease-out), overlay 420ms allow-discrete, display 420ms allow-discrete;
}

.cart[open] { transform: none; }

.cart::backdrop {
  background: rgb(0 0 0 / .28);
  opacity: 0;
  transition: opacity 320ms ease, overlay 420ms allow-discrete, display 420ms allow-discrete;
}

.cart[open]::backdrop { opacity: 1; }

@starting-style {
  .cart[open] { transform: translateX(100%); }
  .cart[open]::backdrop { opacity: 0; }
}

.cart__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cart__head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 calc(var(--gutter-cart) - 12px) 0 var(--gutter-cart);
  border-bottom: 1px solid var(--c-line);
}

.cart { --gutter-cart: 24px; }

@media (max-width: 599px) {
  .cart { --gutter-cart: 16px; }
}

.cart__title {
  margin: 0;
  font: 500 12px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- Frete grátis: texto + barra animada ----------
   A barra enche até o subtotal; um caminhãozinho acompanha a ponta até a bolinha da meta.
   Ao alcançar: o caminhão vira um check azul e um brilho passa uma vez pela barra.
   O movimento é feito pelo JS (updateShipping), sempre com transform. */
.cart__shipping {
  flex-shrink: 0;
  padding: 16px var(--gutter-cart) 18px;
  border-bottom: 1px solid var(--c-line);
}

.cart__shipping-text {
  margin: 0 0 12px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.cart__shipping-text strong { font-weight: 600; }

.cart__shipping.is-done .cart__shipping-text { color: var(--c-navy); }

.ship-bar {
  position: relative;
  height: 24px;
  /* metade do caminhão de cada lado: no começo e no fim ele não passa da borda */
  margin-inline: 12px;
}

.ship-bar__track {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--c-line);
  transform: translateY(-50%);
}

.ship-bar__fill {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: var(--c-navy);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* brilho que atravessa a barra uma vez ao ganhar o frete grátis */
.ship-bar__fill::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .75), transparent);
  content: '';
  transform: translateX(-100%);
}

.cart__shipping.is-celebrating .ship-bar__fill::after { animation: ship-glint 900ms var(--ease-out) 1; }

/* meta: bolinha no fim da barra */
.ship-bar__goal {
  position: absolute;
  top: 50%;
  right: 0;
  width: 10px;
  height: 10px;
  border: 2px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-bg);
  transform: translate(50%, -50%);
}

.cart__shipping.is-done .ship-bar__goal { border-color: var(--c-navy); }

/* trilho do tamanho da barra: andar X% dele leva o caminhão a X% da barra */
.ship-bar__rail {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform: translateX(0);
  will-change: transform;
}

.ship-bar__rider {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--c-navy);
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-navy);
  transform: translate(-50%, -50%);
  transition: background-color var(--dur) ease, color var(--dur) ease;
}

.ship-bar__icon {
  grid-area: 1 / 1;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--dur-fast) ease, transform var(--dur) var(--ease-out);
}

.ship-bar__icon--check {
  opacity: 0;
  transform: scale(.5);
}

.cart__shipping.is-done .ship-bar__rider {
  background: var(--c-navy);
  color: #fff;
}

.cart__shipping.is-done .ship-bar__icon--truck {
  opacity: 0;
  transform: scale(.5);
}

.cart__shipping.is-done .ship-bar__icon--check {
  opacity: 1;
  transform: none;
}

.cart__shipping.is-celebrating .ship-bar__rider { animation: ship-pop 520ms var(--ease-out) 1; }

@keyframes ship-glint {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes ship-pop {
  0% { transform: translate(-50%, -50%) scale(1); }
  45% { transform: translate(-50%, -50%) scale(1.28); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* itens + sugestões rolam juntos; cabeçalho, frete e rodapé ficam parados */
.cart__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.cart__items {
  margin: 0;
  padding: 0 var(--gutter-cart);
  list-style: none;
}

/* item que acabou de entrar pelas sugestões: um fundo azul-claro que some devagar */
.cart-line.is-new { animation: cart-line-new 1400ms ease-out 1; }

@keyframes cart-line-new {
  from { background: rgb(5 44 86 / .07); }
  to { background: transparent; }
}

/* ---------- Sugestões "Complete o frete grátis" ---------- */
.upsell {
  padding: 18px 0 22px;
  border-top: 1px solid var(--c-line);
  background: var(--c-surface);
}

.upsell__title {
  margin: 0 0 12px;
  padding-inline: var(--gutter-cart);
  font: 500 11px/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.upsell__list {
  display: grid;
  grid-auto-columns: 148px;
  grid-auto-flow: column;
  gap: 10px;
  margin: 0;
  padding: 0 var(--gutter-cart) 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scroll-padding-inline: var(--gutter-cart);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

.upsell-card {
  min-width: 0;
  scroll-snap-align: start;
}

.upsell-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-product);
}

.upsell-card__img,
.upsell-card__img img {
  display: block;
  width: 100%;
  height: 100%;
}

.upsell-card__img img { object-fit: cover; }

/* + no canto da foto */
.upsell-card__add {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgb(0 0 0 / .08);
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-navy);
  box-shadow: 0 4px 12px -4px rgb(0 0 0 / .2);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.upsell-card__add:hover { background: var(--c-navy); color: #fff; }

.upsell-card__add:active { transform: scale(.94); }

.upsell-card.is-choosing .upsell-card__add { visibility: hidden; }

/* tamanhos: sobem de baixo por cima da foto */
.upsell-card__sizes {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 6px 8px 8px;
  background: rgb(255 255 255 / .96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: upsell-sizes-in 260ms var(--ease-out) 1;
}

@keyframes upsell-sizes-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.upsell-card__sizes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font: 500 10px/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.upsell-card__close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: -6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-muted);
  cursor: pointer;
}

.upsell-card__chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.upsell-card__chip {
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: var(--c-bg);
  color: var(--c-fg);
  font: 500 12px/1 var(--font-body);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.upsell-card__chip:hover,
.upsell-card__chip:focus-visible {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: #fff;
}

.upsell-card__name {
  display: block;
  margin-top: 8px;
  color: var(--c-fg);
  font: 600 12px/1.35 var(--font-body);
  text-decoration: none;
}

.upsell-card__name:hover { text-decoration: underline; }

.upsell-card__price {
  margin: 2px 0 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.upsell-card__hint {
  margin: 4px 0 0;
  color: var(--c-navy);
  font: 500 11px/1.3 var(--font-body);
}

@media (prefers-reduced-motion: reduce) {
  .cart-line.is-new,
  .upsell-card__sizes { animation: none; }
}

.cart-line {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
}

.cart-line:last-child { border-bottom: 0; }

.cart-line__media {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-product);
}

.cart-line__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-line__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cart-line__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cart-line__name {
  color: inherit;
  font: 600 13px/1.35 var(--font-body);
  text-decoration: none;
}

.cart-line__name:hover { text-decoration: underline; }

.cart-line__price {
  flex: none;
  margin: 0;
  font: 400 13px/1.35 var(--font-body);
  font-variant-numeric: tabular-nums;
}

.cart-line__size {
  margin: 4px 0 0;
  color: var(--c-muted);
  font-size: 13px;
}

.cart-line__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
}

/* seletor de quantidade: − 1 + */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-line);
  border-radius: 999px;
}

.qty__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.qty__btn:hover:not(:disabled) { background: var(--c-surface); }

.qty__btn:disabled {
  opacity: .35;
  cursor: default;
}

.qty__value {
  min-width: 22px;
  font: 500 13px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.cart-line__remove {
  --link-fx-offset: -3px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-muted);
  font: 400 12px/1 var(--font-body);
  cursor: pointer;
}

.cart__empty {
  display: grid;
  flex: 1;
  place-content: center;
  justify-items: center;
  gap: 20px;
  padding: 32px var(--gutter-cart);
  text-align: center;
}

.cart__empty p {
  margin: 0;
  color: var(--c-muted);
  font-size: 15px;
}

.cart__foot {
  display: grid;
  flex-shrink: 0;
  gap: 10px;
  padding: 18px var(--gutter-cart) max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-line);
}

.cart__subtotal {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font: 600 15px/1.4 var(--font-body);
  font-variant-numeric: tabular-nums;
}

.cart__installments {
  margin: 2px 0 0;
  color: var(--c-muted);
  font-size: 13px;
  text-align: right;
}

.cart__note {
  margin: -4px 0 4px;
  color: var(--c-muted);
  font-size: 12px;
}

.cart__checkout {
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--c-navy);
  color: #fff;
  font: 500 15px/1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease;
}

.cart__checkout:hover { background: #0a3d74; }

.cart__error {
  margin: 0;
  color: #b42318;
  font-size: 13px;
}

.cart__error:empty { display: none; }

.cart__continue {
  --link-fx-offset: -3px;
  justify-self: center;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-fg);
  font: 400 13px/1 var(--font-body);
  cursor: pointer;
}

/* ---------- Aviso rápido "Adicionado à sacola" (embaixo do ícone da sacola) ---------- */
.cart-toast {
  position: fixed;
  top: calc(var(--header-h) + 8px);
  right: var(--gutter);
  z-index: calc(var(--z-header) + 1);
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(360px, calc(100vw - 2 * var(--gutter)));
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--c-bg);
  color: var(--c-fg);
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / .25), 0 0 0 1px rgb(0 0 0 / .05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 200ms ease, transform 320ms var(--ease-out), visibility 0s linear 320ms;
}

.cart-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 200ms ease, transform 320ms var(--ease-out), visibility 0s;
}

.cart-toast__icon {
  flex: none;
  color: var(--c-navy);
  stroke-width: 2;
}

.cart-toast__text {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
}

.cart-toast__text strong { font-weight: 600; }

.cart-toast__text span {
  overflow: hidden;
  color: var(--c-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-toast__link {
  --link-fx-offset: -3px;
  flex: none;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-navy);
  font: 500 13px/1 var(--font-body);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .cart,
  .cart::backdrop,
  .cart-toast,
  .ship-bar__rider,
  .ship-bar__icon { transition: none; }

  .cart__shipping.is-celebrating .ship-bar__fill::after,
  .cart__shipping.is-celebrating .ship-bar__rider { animation: none; }
}

/* ---------- Busca (caixa flutuante, inspirada no Balddoria) ---------- */
.search {
  width: min(720px, calc(100% - 2 * var(--gutter)));
  max-width: none;
  max-height: min(680px, calc(100dvh - 120px));
  margin: clamp(64px, 12vh, 140px) auto auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-fg);
  box-shadow: 0 24px 60px -12px rgb(0 0 0 / .28);
  opacity: 0;
  transform: translateY(-12px) scale(.98);
  transition: opacity 240ms ease, transform 320ms var(--ease-out), overlay 320ms allow-discrete, display 320ms allow-discrete;
}

.search[open] {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
}

.search::backdrop {
  background: rgb(0 0 0 / .18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 240ms ease, overlay 320ms allow-discrete, display 320ms allow-discrete;
}

.search[open]::backdrop { opacity: 1; }

@starting-style {
  .search[open] {
    opacity: 0;
    transform: translateY(-12px) scale(.98);
  }

  .search[open]::backdrop { opacity: 0; }
}

/* no celular a busca ocupa a tela toda */
@media (max-width: 599px) {
  .search {
    width: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
}

.search__form {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 20px;
  border-bottom: 1px solid var(--c-line);
  transition: border-color var(--dur-fast) ease;
}

.search__form:focus-within { border-bottom-color: var(--c-fg); }

.search__input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 400 16px/1.4 var(--font-body);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.search__input::placeholder { color: var(--c-muted); }

.search__input::-webkit-search-cancel-button { display: none; }

.search__body {
  display: grid;
  gap: 28px;
  padding: 22px 20px 28px;
  overflow-y: auto;
}

.search__label {
  margin: 0 0 14px;
  color: var(--c-muted);
  font: 500 11px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search__chip {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: none;
  color: var(--c-fg);
  font: 400 13px/1 var(--font-body);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.search__chip:hover,
.search__chip[aria-pressed="true"] {
  border-color: var(--c-fg);
  background: var(--c-fg);
  color: #fff;
}

.search__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .search__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.search-card {
  display: grid;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.search-card__media {
  display: block;
  margin-bottom: 4px;
  aspect-ratio: 1 / 1; /* fotos de produto quadradas: sem cortar as mangas */
  overflow: hidden;
  border-radius: 8px;
  background: var(--c-product);
}

.search-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}

.search-card:hover .search-card__media img { transform: scale(1.04); }

.search-card__name { font: 400 13px/1.35 var(--font-body); }

.search-card__price {
  font: 500 13px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
}

.search__empty {
  margin: 0;
  color: var(--c-muted);
  font-size: 14px;
}

/* ==========================================================================
   Banner principal (carrossel)
   ========================================================================== */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  max-height: 960px;
  overflow: hidden;
  background: #e9e8e5;
  color: var(--c-fg);
  touch-action: pan-y;
}

.hero[data-tone="dark"] {
  --btn-hover-bg: #fff;
  --btn-hover-fg: #000;
  color: #fff;
}

/* banner horizontal sem versão em pé: no celular a altura acompanha a largura,
   senão o recorte pega só o meio da foto (use .hero--wide na seção) */
@media (max-width: 767px) {
  .hero--wide {
    height: min(100svh, 150vw);
    min-height: 0;
  }
}

/* na foto deitada o rapaz está à direita: se a tela cortar as laterais, o corte preserva ele */
@media (min-width: 768px) and (orientation: landscape) {
  .hero .hero__img--sujeito-direita { object-position: 66% 50%; }
}

/* com um banner só não há o que passar: somem setas e bolinhas */
.hero.is-single .hero__arrow,
.hero.is-single .hero__controls { display: none; }

/* Transição adaptada do "Skiper 51" (Carousel_005, efeito creative do Swiper) da Skiper UI
   (https://skiper-ui.com), autor @gurvinder-singh02. Licença gratuita: uso livre, com atribuição à Skiper UI.
   Posições (data-pos, controladas pelo JS):
   - active: na tela
   - right:  fora da tela, à direita (de onde o próximo slide entra)
   - behind: afundado para trás e escurecido (para onde o slide anterior vai) */
.hero__slides {
  position: absolute;
  inset: 0;
  perspective: 1200px;
}

.hero__slide {
  --slide-dur: 1000ms;
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  transform: translate3d(100%, 0, 0);
}

.hero__slide[data-pos="active"],
.hero__slide.is-animating { visibility: visible; }

.hero__slide[data-pos="active"] { transform: none; }

.hero__slide[data-pos="behind"] { transform: translate3d(0, 0, -400px); }

.hero__slide.is-animating { transition: transform var(--slide-dur) var(--ease-slide); }

/* sombra sobre o slide que afunda */
.hero__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.hero__slide.is-animating::after { transition: opacity var(--slide-dur) var(--ease-slide); }

.hero__slide[data-pos="behind"]::after { opacity: .45; }

.hero__slide[data-tone="dark"] { color: #fff; }

/* leve escurecimento no topo para o cabeçalho branco ficar legível */
.hero__slide[data-tone="dark"]::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 220px;
  background: linear-gradient(rgba(0, 0, 0, .45), transparent);
  pointer-events: none;
}

/* foto em pé com céu claro (data-tone-portrait="light"): sem escurecimento */
@media (max-width: 767px), (orientation: portrait) {
  .hero__slide[data-tone-portrait="light"]::before { display: none; }
}

.hero__slide picture,
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform 7s var(--ease-out);
}

.hero__slide.is-active .hero__img { transform: scale(1); }

/* mar em movimento (WebGL) por cima da foto; aparece suave quando o primeiro quadro está pronto.
   O zoom de abertura é copiado da foto pelo JS, para as duas ficarem alinhadas */
/* setas (aparecem ao passar o mouse ou com foco do teclado) */
.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  opacity: 0;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity var(--dur) ease;
}

.hero__arrow--prev { left: 4px; }
.hero__arrow--next { right: 4px; }

.hero:hover .hero__arrow,
.hero__arrow:focus-visible { opacity: .8; }

.hero__arrow:hover { opacity: 1; }

@media (min-width: 1024px) and (hover: hover) {
  .hero__arrow { display: inline-flex; }
}

/* indicadores (bolinhas) */
.hero__controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%);
}

/* bolinhas no estilo da paginação do Skiper 51 (Swiper) */
.hero__dots { display: flex; }

.hero__dot {
  position: relative;
  width: 24px; /* área de clique maior que a bolinha */
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero__dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .25;
  transition: opacity 200ms ease;
}

.hero__dot:hover::before { opacity: .5; }

.hero__dot[aria-current="true"]::before { opacity: 1; }

/* ==========================================================================
   Categorias (círculos)
   ========================================================================== */
.categories {
  padding-block: 36px 28px;
  border-bottom: 1px solid var(--c-line);
}

.categories__scroller {
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}

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

.categories__list {
  display: flex;
  gap: clamp(14px, 3vw, 40px);
  width: max-content;
  margin: 0 auto;
  padding: 4px 0;
  list-style: none;
}

.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 84px;
  color: var(--c-fg);
  text-decoration: none;
}

.category__thumb {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--c-surface);
  transition: box-shadow var(--dur) ease;
}

.category__thumb img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  transition: transform 500ms var(--ease-out);
}

.category:hover .category__thumb { box-shadow: 0 0 0 1.5px var(--c-fg); }

.category:hover .category__thumb img { transform: scale(1.08); }

.category__label {
  font: 400 13px/1.3 var(--font-body);
  text-align: center;
}

/* ==========================================================================
   Coleções — galeria expansível
   Adaptada do "Skiper 52" (HoverExpand_001) da Skiper UI (https://skiper-ui.com), autor @gurvinder-singh02.
   Licença gratuita: uso livre, com atribuição à Skiper UI.

   O painel .is-active cresce e os outros viram faixas: lado a lado no desktop,
   empilhadas no celular. Ajustes: --he-height (altura total), --he-grow (quantas
   vezes o painel aberto é maior que um fechado), --he-gap (espaço entre painéis).
   ========================================================================== */
.collections { padding-top: clamp(48px, 6vw, 80px); }

.hover-expand {
  --he-height: 520px;
  --he-grow: 5;
  --he-gap: 4px;
  display: flex;
  flex-direction: column;
  gap: var(--he-gap);
  width: calc(100% - 2 * var(--gutter));
  max-width: 1152px;
  height: var(--he-height);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  transition: opacity var(--dur) ease 150ms, transform var(--dur) ease 150ms;
}

.hover-expand.is-pending {
  opacity: 0;
  transform: translateY(20px);
}

@media (min-width: 768px) {
  .hover-expand {
    --he-height: clamp(360px, 36vw, 460px);
    flex-direction: row;
  }
}

.hover-expand__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: clamp(14px, 2vw, 24px);
  background: var(--c-image);
  transition: flex-grow var(--dur) ease-in-out;
}

.hover-expand__item.is-active { flex-grow: var(--he-grow); }

.hover-expand__item:has(:focus-visible) {
  outline: 2px solid var(--c-fg);
  outline-offset: 3px;
}

.hover-expand__link {
  position: absolute;
  inset: 0;
  color: #ffffff;
  text-decoration: none;
}

.hover-expand__link:focus-visible { outline: none; }

/* degradê escuro que aparece no painel aberto, para o texto ficar legível */
.hover-expand__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(0 0 0 / .5), transparent 55%);
  opacity: 0;
  transition: opacity var(--dur) ease;
}

.hover-expand__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hover-expand__caption {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(14px, 1.6vw, 20px);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur) ease;
}

.hover-expand__item.is-active .hover-expand__link::before,
.hover-expand__item.is-active .hover-expand__caption { opacity: 1; }

.hover-expand__name { font: 500 clamp(18px, 1.8vw, 24px)/1.1 var(--font-display); }

.hover-expand__code {
  color: rgb(255 255 255 / .6);
  font: 400 12px/1.4 var(--font-body);
}

/* ==========================================================================
   Vitrines de produtos
   ========================================================================== */
.showcase { padding-top: clamp(48px, 6vw, 80px); }

main > .showcase:last-child { padding-bottom: clamp(56px, 7vw, 96px); }

.section-title {
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  padding-inline: var(--gutter);
  font: 500 clamp(22px, 2.2vw, 30px)/1.2 var(--font-display);
  text-align: center;
}

.showcase__foot {
  display: flex;
  justify-content: center;
  padding: 32px var(--gutter) 0;
}

/* ---------- Carrossel horizontal ----------
   De ponta a ponta, sem espaço entre os cards: 2 colunas no celular e tablet, 4 no computador */
.carousel {
  --gap: 0px;
  --per-view: 2;
  --track-pad: 0px;
  position: relative;
  container-type: inline-size;
}

@media (min-width: 1024px) {
  .carousel { --per-view: 4; }
}

.carousel__track {
  display: grid;
  grid-auto-columns: calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view));
  grid-auto-flow: column;
  gap: var(--gap);
  margin: 0;
  padding: 0 var(--track-pad);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--track-pad);
  scroll-behavior: smooth;
  scrollbar-width: none;
}

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

.carousel__item {
  min-width: 0;
  scroll-snap-align: start;
}

/* setas redondas brancas por cima do primeiro e do último card, na altura do meio da foto (3:4) */
.carousel__arrow {
  position: absolute;
  top: calc(100cqi / var(--per-view) * 2 / 3);
  z-index: 2;
  display: none;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgb(0 0 0 / .85);
  border-radius: 50%;
  background: #fff;
  color: var(--c-fg);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.carousel__arrow .icon { width: 20px; height: 20px; }

.carousel__arrow:hover { background: var(--c-fg); color: #fff; }

.carousel__arrow--prev { left: 15px; }
.carousel__arrow--next { right: 15px; }

@media (min-width: 1024px) {
  .carousel.is-scrollable .carousel__arrow { display: grid; }
}

/* celular e tablet: sempre grade de 2 colunas. A vitrine não rola para o lado,
   então o único arraste horizontal é o da foto dentro do card (sem gestos brigando) */
@media (max-width: 1023px) {
  .carousel .carousel__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }

  .carousel .carousel__arrow { display: none; }

  /* cópias de teste só aparecem no computador */
  .carousel__item[data-clone] { display: none; }
}

/* ---------- Card de produto ----------
   Foto em pé (3:4) em fundo cinza, cantos retos; embaixo, nome à esquerda e preço à direita,
   e a linha de cor / tamanhos em cinza.
   Computador: ao passar o mouse (ou com foco do teclado) a frente entra deslizando
   por cima das costas e a foto aproxima devagar.
   Celular: a foto arrasta para o lado (costas → frente) e as bolinhas mostram a posição. */
.product-card__link {
  display: block;
  color: var(--c-fg);
  text-decoration: none;
}

.product-card__link:focus-visible { outline-offset: -3px; }

.product-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-product);
}

.product-card__track {
  position: absolute;
  inset: 0;
}

.product-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- com mouse: deslize + zoom lento ---- */
@media (hover: hover) and (pointer: fine) {
  /* curva suave no começo e no fim: o movimento acelera e freia devagar */
  .product-card {
    --card-ease: cubic-bezier(.45, .05, .25, 1);
  }

  /* voltando (mouse sai): um pouco mais rápido que a entrada */
  .product-card__track {
    transition: transform 1400ms var(--card-ease);
  }

  .product-card__img {
    position: absolute;
    inset: 0;
    transition: transform 700ms var(--card-ease);
  }

  /* a frente espera fora do quadro, à direita */
  .product-card__img--front { transform: translateX(101%); }

  /* entrando (mouse em cima ou foco do teclado): deslize lento e zoom bem leve */
  .product-card__link:is(:hover, :focus-visible) .product-card__track {
    transform: scale(1.03);
    transition-duration: 2600ms;
  }

  .product-card__media.has-front .product-card__img--back { will-change: transform; }

  .product-card__link:is(:hover, :focus-visible) .has-front .product-card__img--back {
    transform: translateX(-6%);
    transition-duration: 1000ms;
  }

  .product-card__link:is(:hover, :focus-visible) .product-card__img--front {
    transform: translateX(0);
    transition-duration: 1000ms;
  }

  .product-card__media .product-card__dots { display: none; }
}

/* ---- toque: arrastar a foto ---- */
@media not all and (hover: hover) and (pointer: fine) {
  .product-card__track {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .product-card__track::-webkit-scrollbar { display: none; }

  .product-card__img {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
}

.product-card__dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
  pointer-events: none;
}

.product-card__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(0 0 0 / .22);
  transition: background-color var(--dur-fast) ease;
}

.product-card__dots span.is-active { background: rgb(0 0 0 / .65); }

.product-card__info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 4px;
  padding: 14px 12px 0;
}

.product-card__name {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font: 600 12px/1.35 var(--font-body);
}

.product-card__price {
  flex: none;
  margin: 0;
  color: #333;
  font: 400 12px/1.35 var(--font-body);
  font-variant-numeric: tabular-nums;
}

.product-card__meta {
  flex: 0 0 100%;
  margin: 0;
  color: #757575;
  font: 400 11px/1.35 var(--font-body);
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* celular: o preço desce para baixo do nome */
@media (max-width: 599px) {
  .product-card__price { flex-basis: 100%; }
}

@media (min-width: 1024px) {
  .product-card__info { padding: 18px 15px 0; row-gap: 6px; }
  .product-card__name,
  .product-card__price { font-size: 15px; }
  .product-card__meta { font-size: 14px; }
}

/* ==========================================================================
   Página de coleções (colecao.html)
   Caminho pequeno (o mesmo .breadcrumb da página de produto), contagem + tamanho das fotos,
   e a mesma grade de cards da home, de ponta a ponta.
   Tamanho das fotos: data-view 2 · 4 · 6 = colunas no computador; no celular 1 · 2 · 3.
   O 4 (padrão) é igual à vitrine da home.
   ========================================================================== */
.collection {
  --tab-idle: #767676; /* cinza com contraste 4.5:1 no branco */
  padding-top: 14px;
}

.collection__crumbs { padding-inline: var(--gutter); }

.collection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(12px, 1.6vw, 20px) var(--gutter) clamp(8px, 1vw, 12px);
}

.collection-bar__count {
  margin: 0;
  color: var(--c-muted);
  font: 400 11px/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* o ícone encosta na margem, descontando a área de toque (como no cabeçalho) */
.view-switch {
  display: flex;
  margin-right: -11px;
}

.view-switch__btn { color: var(--tab-idle); }

.view-switch__btn .icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

/* ativo: preto + tracinho embaixo (não depende só da cor) */
.view-switch__btn[aria-pressed="true"] { color: var(--c-fg); }

.view-switch__btn[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  transform: translateX(-50%);
}

.view-switch__btn[aria-pressed="true"]:hover { opacity: 1; }

.collection-grid {
  --cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.collection-grid[data-view="2"] { --cols: 1; }
.collection-grid[data-view="6"] { --cols: 3; }

@media (min-width: 1024px) {
  .collection-grid[data-view="2"] { --cols: 2; }
  .collection-grid[data-view="4"] { --cols: 4; }
  .collection-grid[data-view="6"] { --cols: 6; }
}

/* fotos pequenas: textos do card menores para caberem */
.collection-grid[data-view="6"] .product-card__info { padding: 10px 6px 0; column-gap: 8px; }
.collection-grid[data-view="6"] .product-card__name,
.collection-grid[data-view="6"] .product-card__price { flex-basis: 100%; font-size: 11px; }
.collection-grid[data-view="6"] .product-card__meta { font-size: 10px; }

@media (min-width: 1024px) {
  .collection-grid[data-view="6"] .product-card__info { padding: 12px 10px 0; }
  .collection-grid[data-view="6"] .product-card__name,
  .collection-grid[data-view="6"] .product-card__price { font-size: 13px; }
  .collection-grid[data-view="6"] .product-card__meta { font-size: 12px; }
}

.collection-grid__sentinel { height: 1px; }

.collection-empty {
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: clamp(40px, 6vw, 80px) var(--gutter);
  color: var(--c-muted);
  text-align: center;
}

.collection-empty p { margin: 0; }

.collection-page .lookbook--2 { margin-top: clamp(56px, 7vw, 96px); }

/* ==========================================================================
   Página de produto
   Celular: fotos arrastando para o lado (de ponta a ponta), informações embaixo e barra fixa de compra.
   Computador: fotos empilhadas em 2 colunas à esquerda, informações à direita acompanhando a rolagem.
   ========================================================================== */
.product-page { padding-bottom: clamp(56px, 7vw, 96px); }

.product {
  display: grid;
  gap: 24px;
}

/* computador: miniaturas + foto principal (3:4, cabe na altura da tela) + informações com largura
   boa de leitura. O conjunto fica centralizado, com o caminho, o topo das fotos e o nome alinhados */
@media (min-width: 1024px) {
  .product {
    --photo-h: calc(100vh - 150px);
    --thumb-w: 64px;
    --thumb-gap: 14px;
    grid-template-columns:
      minmax(0, calc(min(48vw, var(--photo-h) * .75) + var(--thumb-w) + var(--thumb-gap)))
      minmax(340px, 460px);
    justify-content: center;
    align-items: start;
    gap: 18px clamp(40px, 5vw, 88px);
    padding: 20px var(--gutter) 0;
  }

  .product__gallery {
    display: grid;
    grid-template-columns: var(--thumb-w) minmax(0, 1fr);
    align-items: start;
    gap: var(--thumb-gap);
  }
}

/* ---------- Galeria ---------- */
.gallery { position: relative; }

.gallery__track {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

.gallery__slide {
  flex: 0 0 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-product);
  scroll-snap-align: start;
}

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

/* tablet: fotos menores, com a próxima aparecendo ao lado (não ocupa a tela toda na altura) */
@media (min-width: 600px) and (max-width: 1023px) {
  .gallery__track { gap: 6px; }

  .gallery__slide { flex-basis: calc(60% - 3px); }
}

/* computador: todas as fotos no mesmo lugar, uma por cima da outra; a ativa aparece
   e a anterior some ao mesmo tempo (as duas se misturam), com um leve assentar da nova */
@media (min-width: 1024px) {
  .gallery__track {
    display: grid;
    overflow: visible;
    scroll-snap-type: none;
  }

  .gallery__slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 520ms ease, visibility 0s linear 520ms;
  }

  .gallery__slide img {
    transform: scale(1.025);
    transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
  }

  .gallery__slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity 520ms ease, visibility 0s;
  }

  .gallery__slide.is-active img { transform: none; }

  .gallery .gallery__count { display: none; }
}

/* miniaturas: coluna à esquerda, as que não estão ativas ficam apagadas ("em espera") */
.gallery__thumbs { display: none; }

@media (min-width: 1024px) {
  .gallery__thumbs {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

.gallery__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--c-product);
  cursor: pointer;
  opacity: .45;
  transition: opacity 320ms ease;
}

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

/* a ativa: acesa, com um traço fino embaixo */
.gallery__thumb::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--c-fg);
  content: '';
  transform: scaleX(0);
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1);
}

.gallery__thumb:hover { opacity: .8; }

.gallery__thumb[aria-current="true"] { opacity: 1; }

.gallery__thumb[aria-current="true"]::after { transform: scaleX(1); }

.gallery__thumb:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__slide,
  .gallery__slide.is-active,
  .gallery__slide img,
  .gallery__thumb,
  .gallery__thumb::after { transition: none; }
}

/* setas discretas: só o traço fino da seta, sem círculo; ficam mais fortes ao passar o mouse.
   A área de clique é maior que o desenho (44 px). Dão a volta: depois da última vem a primeira */
.gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-fg);
  cursor: pointer;
  opacity: .5;
  touch-action: manipulation;
  transform: translateY(-50%);
  transition: opacity var(--dur-fast) ease, transform 320ms cubic-bezier(.16, 1, .3, 1);
}

.gallery__arrow .icon {
  width: 26px;
  height: 26px;
  stroke-width: 1;
}

.gallery__arrow:hover { opacity: 1; }

.gallery__arrow--prev { left: 4px; }
.gallery__arrow--next { right: 4px; }

.gallery__arrow--prev:hover { transform: translate(-3px, -50%); }
.gallery__arrow--next:hover { transform: translate(3px, -50%); }

.gallery__arrow:focus-visible {
  opacity: 1;
  outline: 1px solid var(--c-fg);
  outline-offset: -6px;
}

@media (min-width: 1024px) {
  .gallery__arrow--prev { left: 8px; }
  .gallery__arrow--next { right: 8px; }
}

.gallery__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / .9);
  font: 500 12px/1.4 var(--font-body);
  font-variant-numeric: tabular-nums;
}

/* ---------- Informações ---------- */
.product__info { padding-inline: var(--gutter); }

@media (min-width: 1024px) {
  .product__info {
    position: sticky;
    top: calc(var(--header-h-compact) + 24px);
    padding-inline: 0;
  }
}

/* caminho: Início / Camisetas / produto — em cima das fotos, na largura toda */
.product > .breadcrumb {
  grid-column: 1 / -1;
  margin-bottom: -12px;
  padding: 14px var(--gutter) 0;
}

@media (min-width: 1024px) {
  .product > .breadcrumb {
    margin-bottom: 0;
    padding: 0;
  }
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--c-muted);
  font: 400 12px/1.4 var(--font-body);
}

.breadcrumb li + li::before {
  content: '/';
  margin-right: 6px;
  color: #b3b3b3;
}

.breadcrumb a {
  --link-fx-offset: -2px;
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover { color: var(--c-fg); }

.breadcrumb [aria-current] { color: var(--c-fg); }

.product__name {
  margin: 0;
  font: 500 clamp(22px, 2.2vw, 28px)/1.25 var(--font-body);
  text-wrap: balance;
}

.product__pricing { margin-top: 10px; }

.product__price {
  margin: 0;
  font: 500 20px/1.4 var(--font-body);
  font-variant-numeric: tabular-nums;
}

.product__price-note {
  margin: 2px 0 0;
  color: var(--c-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.product__price-note strong { color: var(--c-fg); font-weight: 600; }

.product__form { margin-top: 24px; }

.product__color {
  margin: 0 0 18px;
  color: var(--c-muted);
  font-size: 14px;
}

.product__color strong { color: var(--c-fg); font-weight: 500; }

/* ---------- Benefícios (frete, trocas, pagamento) ---------- */
.perks {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--c-line);
  list-style: none;
}

.perks__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  line-height: 1.4;
}

.perks__item .icon {
  flex: none;
  color: var(--c-navy);
}

/* ---------- Abas abríveis (Descrição, Detalhes, Trocas) ---------- */
.more {
  margin-top: 22px;
  border-top: 1px solid var(--c-line);
}

.more__item { border-bottom: 1px solid var(--c-line); }

.more__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  font: 500 12px/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.more__summary::-webkit-details-marker { display: none; }

.more__summary:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 2px;
}

.more__chevron {
  flex: none;
  color: var(--c-muted);
  transition: transform var(--dur) var(--ease-out);
}

.more__item[open] .more__chevron { transform: rotate(180deg); }

.more__body {
  padding: 0 0 20px;
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.6;
}

.more__body p {
  max-width: 60ch;
  margin: 0;
}

.more__body p + p { margin-top: 10px; }

/* abrir e fechar com movimento suave (navegadores sem suporte só abrem direto) */
@supports (interpolate-size: allow-keywords) {
  .more__item {
    interpolate-size: allow-keywords;
  }

  .more__item::details-content {
    height: 0;
    overflow: hidden;
    transition: height 320ms var(--ease-out), content-visibility 320ms allow-discrete;
  }

  .more__item[open]::details-content { height: auto; }
}

/* ---------- Você também pode gostar ---------- */
.related { padding-top: clamp(56px, 7vw, 96px); }

.related__title {
  margin: 0 0 clamp(16px, 2vw, 24px);
  padding-inline: var(--gutter);
  font: 500 12px/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- Barra fixa de compra (celular) ---------- */
.buy-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-line);
  background: rgb(255 255 255 / .94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 320ms var(--ease-out), visibility 0s linear 320ms;
}

.buy-bar.is-visible {
  visibility: visible;
  transform: none;
  transition: transform 320ms var(--ease-out), visibility 0s;
}

.buy-bar__text {
  flex: 1;
  min-width: 0;
}

.buy-bar__name,
.buy-bar__price {
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buy-bar__price {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.buy-bar__btn {
  flex: none;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--c-navy);
  color: #fff;
  font: 500 14px/1 var(--font-body);
  cursor: pointer;
  touch-action: manipulation;
}

/* a barra não cobre o fim da página nem o que estiver com foco */
@media (max-width: 1023px) {
  body.has-buy-bar { padding-bottom: 72px; }

  html:has(body.has-buy-bar) { scroll-padding-bottom: 88px; }
}

@media (min-width: 1024px) {
  .buy-bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .buy-bar,
  .more__chevron,
  .more__item::details-content { transition: none; }
}

.sizes {
  margin: 0;
  padding: 0;
  border: 0;
}

.sizes__legend {
  margin-bottom: 12px;
  padding: 0;
  font: 500 14px/1.4 var(--font-body);
}

.sizes__options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.sizes__option span {
  display: grid;
  place-items: center;
  height: 48px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font: 500 14px/1 var(--font-body);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.sizes__option:hover span { border-color: var(--c-fg); }

.sizes__option input:checked + span {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: #fff;
}

.sizes__option input:focus-visible + span {
  outline: 2px solid var(--c-navy);
  outline-offset: 2px;
}

/* botão "Tabela de medidas": régua num quadrado azul-claro, texto em maiúsculas e seta à direita */
.size-guide {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  margin-top: 14px;
  padding: 0 16px 0 0;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-bg);
  color: var(--c-fg);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.size-guide__icon {
  display: grid;
  flex: none;
  place-items: center;
  align-self: stretch;
  width: 56px;
  border-right: 1px solid var(--c-line);
  background: rgb(5 44 86 / .05);
  color: var(--c-navy);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.size-guide__icon .icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
}

.size-guide__label {
  flex: 1;
  padding-left: 16px;
  font: 500 12px/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.size-guide__arrow {
  flex: none;
  color: var(--c-muted);
  transition: transform var(--dur) var(--ease-out), color var(--dur-fast) ease;
}

.size-guide:hover {
  border-color: var(--c-navy);
  box-shadow: 0 6px 18px -10px rgb(5 44 86 / .35);
}

.size-guide:hover .size-guide__icon {
  background: var(--c-navy);
  color: #fff;
}

.size-guide:hover .size-guide__arrow {
  color: var(--c-navy);
  transform: translateX(3px);
}

.size-guide:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 2px;
}

/* ---------- Popup da tabela de medidas ---------- */
.size-chart {
  width: min(560px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-fg);
  box-shadow: 0 24px 60px -12px rgb(0 0 0 / .3);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity 240ms ease, transform 320ms var(--ease-out), overlay 320ms allow-discrete, display 320ms allow-discrete;
}

.size-chart[open] {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
}

.size-chart::backdrop {
  background: rgb(0 0 0 / .32);
  opacity: 0;
  transition: opacity 240ms ease, overlay 320ms allow-discrete, display 320ms allow-discrete;
}

.size-chart[open]::backdrop { opacity: 1; }

@starting-style {
  .size-chart[open] {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }

  .size-chart[open]::backdrop { opacity: 0; }
}

.size-chart__head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 20px;
  border-bottom: 1px solid var(--c-line);
}

.size-chart__title {
  margin: 0;
  font: 500 12px/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.size-chart__body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.size-chart__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--c-surface);
}

.size-chart__note {
  margin: 14px 0 0;
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* no celular o popup sobe de baixo e ocupa a largura toda */
@media (max-width: 599px) {
  .size-chart {
    width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }

  .size-chart[open] { transform: none; }

  @starting-style {
    .size-chart[open] { transform: translateY(100%); }
  }

  .size-chart__body { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .size-chart,
  .size-chart::backdrop,
  .size-guide__arrow { transition: none; }
}

.sizes__error {
  margin: 10px 0 0;
  color: #b42318;
  font-size: 14px;
}

/* Adicionar à sacola (contorno) + Comprar agora (azul marinho): lado a lado quando cabem */
.product__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.product__add {
  width: 100%;
  min-height: 52px;
  border: 1.5px solid var(--c-navy);
  border-radius: 999px;
  background: var(--c-navy);
  color: #fff;
  font: 500 15px/1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.product__add:hover { border-color: #0a3d74; background: #0a3d74; }

.product__add:focus-visible { outline-color: var(--c-navy); }

.product__add--outline {
  background: transparent;
  color: var(--c-navy);
}

.product__add--outline:hover { border-color: var(--c-navy); background: rgb(5 44 86 / .06); }

/* ---------- "Adicionar à sacola" animado ----------
   Adaptado de "Add to cart", de Aaron Iker (https://codepen.io/aaroniker/pen/pogGgbx).
   A camiseta pula do botão (a borda de cima estica junto), cai no carrinho, o carrinho marca ✓
   e sai pela direita; depois o texto volta. Quem move tudo é o GSAP (js/main.js), mexendo nas
   variáveis abaixo. O fundo e a borda ficam no ::before para encolherem juntos no clique. */
.cart-anim {
  --bg: var(--cart-fill);
  --ink: var(--cart-ink);
  --background-scale: 1;
  --text-o: 1;
  --text-x: 0px;
  --cart-x: 0px;
  --cart-y: 0px;
  --cart-rotate: 0deg;
  --cart-scale: .75;
  --cart-clip: 0px;
  --cart-clip-x: 0px;
  --cart-tick-offset: 10px;
  --shirt-y: -16px;
  --shirt-scale: 0;
  --shirt-second-y: 24px;
  /* cores parado (botão com contorno) e animando (azul marinho) */
  --cart-fill: transparent;
  --cart-fill-hover: rgb(5 44 86 / .06);
  --cart-ink: var(--c-navy);
  position: relative;
  isolation: isolate;
  border-color: transparent;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

.cart-anim:hover { border-color: transparent; background: none; }

.cart-anim:not(.is-adding):hover { --bg: var(--cart-fill-hover); }

.cart-anim.is-adding {
  --bg: var(--c-navy);
  --ink: #fff;
  cursor: default;
}

/* botão já cheio (barra fixa do celular) */
.cart-anim--solid {
  --cart-fill: var(--c-navy);
  --cart-fill-hover: #0a3d74;
  --cart-ink: #fff;
}

/* a barra do celular tem a largura do texto: sobra dos dois lados para o carrinho caber */
.buy-bar__btn.cart-anim[data-cart-icon="on"] { padding-inline: 36px; }

.cart-anim::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1.5px solid var(--c-navy);
  border-radius: inherit;
  background: var(--bg);
  transform: scaleX(var(--background-scale)) translateZ(0);
  transition: background-color var(--dur-fast) ease;
}

.cart-anim__label {
  display: inline-block;
  position: relative;
  color: var(--ink);
  white-space: nowrap;
  opacity: var(--text-o);
  transform: translateX(var(--text-x)) translateZ(0);
  transition: color var(--dur-fast) ease;
  pointer-events: none;
}

.cart-anim svg {
  display: block;
  overflow: visible;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* a borda de cima que estica quando a camiseta pula */
.cart-anim__bump {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 64px;
  height: 13px;
  margin-left: -32px;
  fill: var(--bg);
  opacity: 0; /* só aparece durante o pulo (GSAP) */
  pointer-events: none;
}

.cart-anim__shirt,
.cart-anim__cart {
  position: absolute;
  left: 50%;
  pointer-events: none;
}

.cart-anim__shirt {
  top: 0;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  transform-origin: 50% 100%;
  transform: translateY(var(--shirt-y)) scale(var(--shirt-scale));
}

.cart-anim__shirt svg {
  width: 24px;
  height: 24px;
  fill: var(--c-navy);
}

.cart-anim__shirt g { fill: #fff; }

/* a mesma camiseta em branco aparece de cima para baixo quando ela entra no botão azul */
.cart-anim__shirt svg + svg {
  position: absolute;
  inset: 0;
  fill: #fff;
  clip-path: polygon(0 var(--shirt-second-y), 24px var(--shirt-second-y), 24px 24px, 0 24px);
}

.cart-anim__shirt svg + svg g { fill: var(--c-navy); }

.cart-anim__cart {
  top: 50%;
  width: 36px;
  height: 26px;
  margin: -13px 0 0 -18px;
  transform: translate(var(--cart-x), var(--cart-y)) rotate(var(--cart-rotate)) scale(var(--cart-scale)) translateZ(0);
}

.cart-anim__cart svg {
  position: relative;
  width: 36px;
  height: 26px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  transition: stroke var(--dur-fast) ease;
}

/* o carrinho "enche" antes do ✓ */
.cart-anim__cart::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  width: 22px;
  height: 12px;
  background: var(--ink);
  clip-path: polygon(0 0, 22px 0, calc(22px - var(--cart-clip-x)) var(--cart-clip), var(--cart-clip-x) var(--cart-clip));
}

.cart-anim__cart .wheel { stroke-width: 1.5; }

.cart-anim__cart .tick {
  stroke: var(--c-navy);
  stroke-dasharray: 10px;
  stroke-dashoffset: var(--cart-tick-offset);
}

.product__status {
  min-height: 1.4em;
  margin: 12px 0 0;
  color: #b42318;
  font-size: 14px;
}

.product__details {
  display: grid;
  gap: 8px;
  margin: 0;
  font-size: 14px;
}

.product__details div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
}

.product__details dt { color: var(--c-muted); }

.product__details dd { margin: 0; }

.product-missing {
  max-width: 560px;
  margin: 0 auto;
  padding: 80px var(--gutter);
  text-align: center;
}

.product-missing h1 {
  margin: 0;
  font: 500 26px/1.3 var(--font-body);
}

.product-missing p {
  margin: 12px 0 28px;
  color: var(--c-muted);
}

/* ==========================================================================
   Lookbook — galeria parallax
   Adaptada do "Skiper 30" (Parallax_002) da Skiper UI (https://skiper-ui.com), autor @gurvinder-singh02.
   Licença gratuita: uso livre, com atribuição à Skiper UI.

   Cada coluna começa deslocada para cima (top) e o JS a faz descer enquanto a
   galeria atravessa a tela, cada uma numa velocidade (data-parallax-speed).
   Colunas visíveis: 2 no celular, 3 no tablet, 4 no desktop.
   ========================================================================== */
.parallax-gallery {
  display: flex;
  gap: 2vw;
  height: 175vh;
  padding: 2vw;
  overflow: hidden;
  background: var(--c-bg);
}

.parallax-gallery__col {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2vw;
  min-width: 0;
  height: 100%;
  will-change: transform;
}

.parallax-gallery__col:nth-child(1) { top: -45%; }
.parallax-gallery__col:nth-child(2) { top: -95%; }
.parallax-gallery__col:nth-child(3) { top: -45%; }
.parallax-gallery__col:nth-child(4) { top: -75%; }

.parallax-gallery__col:nth-child(n + 3) { display: none; }

@media (min-width: 600px) {
  .parallax-gallery__col:nth-child(3) { display: flex; }
}

@media (min-width: 1024px) {
  .parallax-gallery__col:nth-child(4) { display: flex; }
}

.parallax-gallery__item {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  background: var(--c-image);
}

.parallax-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* segundo lookbook, embaixo dos produtos: um respiro depois do texto dos cards */
.lookbook--2 { margin-top: clamp(32px, 4vw, 64px); }

/* sem movimento: galeria estática, com as colunas no lugar. */
@media (prefers-reduced-motion: reduce) {
  .parallax-gallery { height: auto; }

  .parallax-gallery__col:nth-child(n) {
    top: 0;
    height: auto;
    transform: none !important;
  }

  .parallax-gallery__item {
    flex: none;
    aspect-ratio: 3 / 4;
  }
}

/* celular sem suporte a animação por rolagem em CSS: mesma galeria estática acima
   (o JS de scroll (initParallax) nem roda abaixo de 600px — travava a rolagem em aparelho real). */
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  @supports not (animation-timeline: view()) {
    .parallax-gallery { height: auto; }

    .parallax-gallery__col:nth-child(n) {
      top: 0;
      height: auto;
      transform: none !important;
    }

    .parallax-gallery__item {
      flex: none;
      aspect-ratio: 3 / 4;
    }
  }
}

/* celular com suporte: parallax leve só em CSS (animation-timeline: view()), sem JS nenhum —
   o navegador anima na GPU, fora do "caminho" que trava a rolagem. */
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .parallax-gallery { height: 140vh; }

    .parallax-gallery__col {
      top: -10%;
      height: 120%;
      animation: parallax-drift-mobile linear both;
      animation-timeline: view(block);
    }
  }
}

@keyframes parallax-drift-mobile {
  from { transform: translate3d(0, -8%, 0); }
  to { transform: translate3d(0, 8%, 0); }
}

/* ==========================================================================
   Rodapé
   ========================================================================== */
.footer {
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
}

.footer__inner {
  display: grid;
  gap: 40px;
  padding: 56px var(--gutter) 40px;
}

@media (min-width: 768px) {
  .footer__inner { grid-template-columns: 1.2fr 2fr; }
}

.footer__brand p {
  max-width: 32ch;
  margin: 14px 0 0;
  color: var(--c-muted);
  font-size: 14px;
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
}

.footer__title {
  margin: 0 0 14px;
  font: 600 12.5px/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.footer__col ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__col a {
  --link-fx-offset: 5px;
  padding-block: 6px;
  color: var(--c-muted);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

.footer__col a:hover { color: var(--c-fg); }

.footer__bottom {
  padding: 18px var(--gutter);
  border-top: 1px solid var(--c-line);
}

.footer__bottom p {
  margin: 0;
  color: var(--c-muted);
  font-size: 12.5px;
}

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}