/* =====================================================================================
   Victor Store — vitrine (celular primeiro)
   ===================================================================================== */

/* ---------------------------------------------------------------- topo */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--black); color: var(--on-black);
  transition: box-shadow .2s;
}
.topbar.is-scrolled { box-shadow: 0 1px 0 rgba(255, 255, 255, .07), 0 6px 20px rgba(0, 0, 0, .18); }
.topbar__in { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: block; flex: none; }
.brand img { height: 38px; width: auto; }
@media (min-width: 768px) { .brand img { height: 44px; } }
.topbar__actions { display: flex; align-items: center; gap: 2px; margin-right: -10px; }
.bagbtn__count {
  position: absolute; top: 4px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: #fff; color: var(--black);
  font-size: 11px; font-weight: 800; line-height: 19px; text-align: center;
}
.bagbtn__count.bump { animation: bump .45s var(--ease); }
@keyframes bump { 30% { transform: scale(1.35); } }

.demo-ribbon {
  background: #ffd84d; color: #3a2e00; text-align: center;
  font-size: 12.5px; font-weight: 600; padding: 7px 12px; line-height: 1.35;
}

/* categorias (faixa preta abaixo do topo) */
.catnav { background: var(--black); border-top: 1px solid rgba(255, 255, 255, .08); }
.catnav__in {
  display: flex; align-items: stretch; gap: 22px; height: 46px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.catnav__in::-webkit-scrollbar { display: none; }
.catnav a {
  position: relative; display: flex; align-items: center; white-space: nowrap; flex: none;
  font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--on-black-muted); transition: color .15s;
}
.catnav a:last-child { padding-right: 28px; }
@media (hover: hover) { .catnav a:hover { color: #fff; } }
.catnav a[aria-current="page"] { color: #fff; }
.catnav a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; }
.catnav a:last-child[aria-current="page"]::after { right: 28px; }
@media (min-width: 900px) {
  .catnav__in { justify-content: center; gap: 36px; -webkit-mask-image: none; mask-image: none; }
  .catnav a:last-child { padding-right: 0; }
  .catnav a:last-child[aria-current="page"]::after { right: 0; }
}

/* ---------------------------------------------------------------- páginas */
#main { min-height: 62vh; outline: none; }
.view { animation: view-in .3s var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
.boot { min-height: 60vh; display: grid; place-items: center; color: var(--muted); }
.noscript { padding: 40px 16px; text-align: center; }

.section { padding-block: 36px; }
.section--tight { padding-top: 12px; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section__link {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 44px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.section__link .ico { width: 18px; height: 18px; transition: transform .2s var(--ease); }
@media (hover: hover) { .section__link:hover .ico { transform: translateX(3px); } }

/* ---------------------------------------------------------------- capa (início) */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: max(540px, min(82vh, 740px));
  min-height: max(540px, min(82svh, 740px));
  background: var(--black); color: #fff;
}
.hero.has-slides { justify-content: flex-end; }
.hero__bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.hero__glow {
  position: absolute; left: 50%; top: 30%; width: 130vmax; height: 130vmax; margin: -65vmax 0 0 -65vmax;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04) 45%, transparent 70%);
  animation: glow 16s ease-in-out infinite alternate;
}
@keyframes glow { from { transform: translate(-16%, -10%); } to { transform: translate(14%, 8%); } }

/* letreiro gigante com o nome da loja, correndo devagar no fundo */
.hero__wall { position: absolute; left: -20%; right: -20%; top: 3%; display: grid; gap: .08em; transform: rotate(-8deg); }
.hero__wall-row {
  display: flex; width: max-content; white-space: nowrap;
  font-size: clamp(72px, 25vw, 230px); font-weight: 800; font-stretch: 125%; text-transform: uppercase;
  line-height: .95; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .11);
  animation: wall 48s linear infinite;
}
.hero__wall-row:nth-child(2) { animation-direction: reverse; -webkit-text-stroke-color: rgba(255, 255, 255, .06); }
.hero__wall-row span { padding-right: .4em; }
@keyframes wall { to { transform: translateX(-50%); } }

/* logo grande com brilho (enquanto ainda não há fotos de produtos) */
.hero__markbox {
  position: relative; z-index: -1; flex: 1; min-height: 150px;
  display: flex; align-items: center; justify-content: center; padding: 30px var(--gutter) 0; pointer-events: none;
}
.hero__mark {
  width: min(78vw, 500px); height: auto;
  filter: drop-shadow(0 0 26px rgba(255, 255, 255, .3)) drop-shadow(0 0 2px rgba(255, 255, 255, .45));
  animation: mark-in 1.1s var(--ease) .1s both, float 6s ease-in-out 1.3s infinite alternate;
}
@keyframes mark-in { from { opacity: 0; transform: translateY(26px) scale(.95); } }
@keyframes float { to { transform: translateY(-10px); } }
.hero.has-slides .hero__markbox, .hero.has-slides .hero__wall { display: none; }

/* carrossel das peças mais novas (aparece sozinho quando houver produtos com foto) */
.hero__slides { position: absolute; inset: 0; z-index: -2; display: none; }
.hero.has-slides .hero__slides { display: block; }
.hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
.hero__slide.is-on { opacity: 1; }
.hero__slide > img { position: absolute; inset: 0; transform: scale(1.08); }
.hero__slide.is-on > img { animation: kenburns 7s ease-out forwards; }
@keyframes kenburns { to { transform: scale(1); } }
.hero__slides::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 10, .5) 0%, rgba(10, 10, 10, 0) 22%, rgba(10, 10, 10, .22) 42%, rgba(10, 10, 10, .74) 62%, rgba(10, 10, 10, .96) 100%);
}
.hero__bars { position: absolute; left: var(--gutter); right: var(--gutter); top: 8px; z-index: 2; display: flex; gap: 6px; }
.hero__bars button { flex: 1; padding: 10px 0; }
.hero__bars i { position: relative; display: block; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .32); }
.hero__bars i::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left center; }
.hero__bars .is-done i::after { transform: scaleX(1); }
.hero__bars .is-on i::after { animation: bar var(--dur, 5.5s) linear forwards; }
@keyframes bar { to { transform: scaleX(1); } }
.hero__pick {
  position: absolute; left: var(--gutter); top: 38px; z-index: 2; max-width: calc(100% - var(--gutter) * 2);
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(10, 10, 10, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-size: 13.5px;
}
.hero__pick-tag { flex: none; padding: 5px 9px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero__pick-name { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__pick-price { flex: none; font-weight: 800; }
.hero__pick .ico { flex: none; transition: transform .2s var(--ease); }
@media (hover: hover) { .hero__pick:hover .ico { transform: translateX(3px); } }

/* texto da capa */
.hero__in { position: relative; padding-block: 28px 40px; pointer-events: none; }
.hero__in > * { pointer-events: auto; }
.hero__copy { max-width: 640px; }
.hero__eyebrow { color: #bdbbb5; display: flex; align-items: center; gap: 10px; }
.hero__eyebrow::before { content: ''; width: 26px; height: 1.5px; background: currentColor; }
.hero__title { margin-top: 14px; font-size: clamp(40px, 11.6vw, 100px); font-stretch: 112%; line-height: .98; }
.hero__line { display: block; overflow: hidden; padding-bottom: .05em; }
.hero__line > span { display: block; animation: rise .9s var(--ease) both; }
.hero__line + .hero__line > span { animation-delay: .12s; }
.hero__eyebrow, .hero__title, .hero__text { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.hero__title .outline { color: transparent; -webkit-text-stroke: 1.5px #fff; }
@keyframes rise { from { transform: translateY(108%); } }
.hero__text { margin-top: 16px; max-width: 520px; color: #d0cec8; font-size: 15.5px; line-height: 1.55; animation: fade-up .8s var(--ease) .25s both; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; animation: fade-up .8s var(--ease) .35s both; }
.hero__ctas .btn { flex: 1 1 auto; white-space: nowrap; padding-inline: 22px; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }

@media (min-width: 960px) {
  .hero { min-height: 620px; justify-content: center; }
  .hero.has-slides { justify-content: center; }
  .hero__in { padding-block: 80px; }
  .hero__copy { max-width: 54%; }
  .hero__text { font-size: 17px; }
  .hero__ctas .btn { flex: 0 0 auto; }
  .hero__wall { top: 8%; }
  .hero.has-slides .hero__wall { display: grid; }
  .hero__markbox {
    position: absolute; top: 0; bottom: 0; padding: 0; flex: none;
    right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); width: 40%; max-width: 520px;
  }
  .hero__mark { width: 100%; }
  .hero__slides {
    inset: 54px max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) 54px auto;
    width: min(36vw, 440px); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  }
  .hero__slides::after { background: linear-gradient(180deg, rgba(10, 10, 10, .38) 0%, rgba(10, 10, 10, 0) 20%, rgba(10, 10, 10, 0) 62%, rgba(10, 10, 10, .62) 100%); }
  .hero__bars { left: 16px; right: 16px; }
  .hero__pick { top: auto; bottom: 16px; left: 16px; right: 16px; max-width: none; }
}

/* faixa que corre com as categorias */
.marquee { overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .1); background: var(--black); color: #6f6e6a; }
.marquee__track {
  display: flex; width: max-content; gap: 0; padding-block: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
  animation: marquee 38s linear infinite;
}
.marquee__track span { padding-inline: 18px; }
.marquee__track span::after { content: '✦'; margin-left: 36px; font-size: 9px; color: #4b4a47; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- blocos de categoria */
.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.cat {
  position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); isolation: isolate;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
@media (hover: hover) { .cat:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); } }
.cat:active { transform: scale(.985); }
.cat__media { position: absolute; inset: 0; z-index: -1; }
.cat__media > img { transition: transform .6s var(--ease), opacity .35s var(--ease); }
@media (hover: hover) { .cat:hover .cat__media > img { transform: scale(1.05); } }
.cat__icon { position: absolute; inset: 0 0 26% 0; display: grid; place-items: center; color: var(--ink); }
.cat__icon .ico { width: 46%; height: auto; max-width: 112px; stroke-width: 1.05; }
.cat__label { position: absolute; left: 14px; right: 14px; bottom: 13px; }
.cat__name { display: block; font-size: 15px; font-weight: 800; font-stretch: 115%; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.cat__count { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.cat.has-photo { border-color: transparent; color: #fff; }
.cat.has-photo::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); z-index: -1; }
.cat.has-photo .cat__count { color: rgba(255, 255, 255, .8); }
.cat--all { background: var(--black); color: #fff; border-color: var(--black); }
.cat--all .cat__icon { color: #fff; }
.cat--all .cat__count { color: var(--on-black-muted); }
@media (min-width: 720px) { .cat__name { font-size: 16px; } .cat { aspect-ratio: 1 / 1; } }

/* Conjuntos: bloco de destaque (2 colunas no celular; 2×2 no computador) */
.cat--feature { grid-column: span 2; aspect-ratio: 16 / 9; background: var(--black); border-color: var(--black); color: #fff; }
.cat--feature::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 85% 20%, rgba(255, 255, 255, .16), transparent 60%);
}
.cat--feature .cat__icon { inset: 0 0 0 auto; width: 52%; color: #fff; }
.cat--feature .cat__icon .ico { width: 60%; max-width: 150px; stroke-width: .9; filter: drop-shadow(0 0 18px rgba(255, 255, 255, .25)); }
.cat--feature .cat__label { left: 18px; right: 18px; bottom: 16px; }
.cat__kicker {
  display: inline-block; margin-bottom: 8px; padding: 4px 9px; border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.cat--feature .cat__name { font-size: 24px; font-stretch: 120%; }
.cat__desc { display: block; margin-top: 4px; max-width: 62%; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .78); }
.cat--feature .cat__count { color: rgba(255, 255, 255, .62); margin-top: 6px; }
.cat--feature.has-photo::after { inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 55%, transparent 100%); }
@media (min-width: 720px) {
  .cat--feature { grid-row: span 2; aspect-ratio: auto; }
  .cat--feature .cat__name { font-size: 34px; }
  .cat--feature .cat__label { left: 26px; bottom: 24px; }
  .cat__desc { font-size: 15px; }
}

/* selo de kit e economia no cartão */
.card__tag--kit { gap: 5px; background: var(--ink); color: #fff; }
.card__save {
  position: absolute; right: 8px; top: 8px; z-index: 2; height: 24px; padding: 0 8px; border-radius: 999px;
  display: inline-flex; align-items: center; background: #d23a2f; color: #fff; font-size: 11.5px; font-weight: 800;
}
.card__was { margin-left: 4px; font-size: 12.5px; font-weight: 500; color: var(--muted); }

/* ---------------------------------------------------------------- grade de produtos */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 16px; } }
@media (min-width: 1080px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card { position: relative; display: block; min-width: 0; -webkit-touch-callout: none; }
.card__media { aspect-ratio: 3 / 4; border-radius: 12px; }
.card__media > img { position: absolute; inset: 0; }
.card__media > .card__alt { opacity: 0; transition: opacity .35s var(--ease); }
@media (hover: hover) {
  .card:hover .card__media > .card__alt.is-loaded { opacity: 1; }
  .card:hover .card__name { text-decoration: underline; text-underline-offset: 3px; }
}
.card:active .card__media { transform: scale(.985); }
.card__media { transition: transform .15s var(--ease); }
.card__tag {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  height: 24px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255, 255, 255, .92); color: var(--ink);
}
.card__body { padding: 10px 2px 0; }
.card__name {
  font-size: 14px; font-weight: 500; line-height: 1.32; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.card__price { font-size: 15.5px; font-weight: 700; letter-spacing: -.005em; }
.card__dots { display: flex; gap: 4px; flex: none; }
.card.is-off .card__media > img { opacity: .5; filter: grayscale(.7); }
.card.is-off .card__media > img.is-loaded { opacity: .5; }
.card.is-off .card__price { color: var(--muted); }
@media (min-width: 720px) { .card__name { font-size: 15px; } .card__price { font-size: 16.5px; } }

.card--skeleton .card__media { background: none; }
.card--skeleton .sk-line { height: 13px; margin-top: 10px; width: 80%; }
.card--skeleton .sk-line + .sk-line { width: 40%; margin-top: 8px; }

/* carrossel horizontal (relacionados, novidades no celular) */
.hscroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; }
@media (min-width: 720px) { .hscroll { grid-auto-columns: 31%; gap: 16px; } }
@media (min-width: 1080px) { .hscroll { grid-auto-columns: 23.5%; } }

/* ---------------------------------------------------------------- como comprar */
.steps { display: grid; gap: 10px; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.step__n {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff; font-weight: 800; font-size: 15px;
}
.step h3 { font-size: 15.5px; font-weight: 700; }
.step p { font-size: 14px; color: var(--muted); margin-top: 3px; line-height: 1.45; }

/* ---------------------------------------------------------------- catálogo */
.cat-head { padding-block: 22px 12px; }
.cat-head__title { font-size: clamp(30px, 8vw, 52px); }
.cat-head__count { margin-top: 8px; color: var(--muted); font-size: 14px; }

.toolbar {
  position: sticky; top: var(--header-h); z-index: 60;
  background: rgba(245, 244, 241, .9); -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.toolbar__in { display: flex; align-items: center; gap: 8px; min-height: 58px; padding-block: 8px; }
.toolbar__sort { position: relative; }
.toolbar__sort select {   /* select nativo invisível por cima do botão: abre o seletor do próprio celular */
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  font-size: 16px; -webkit-appearance: none; appearance: none; border: 0;
}
.toolbar__sort:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.toolbar .btn--sm { --h: 42px; }
.toolbar__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--ink);
  font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center;
}
.btn--ghost .toolbar__count { background: var(--ink); color: #fff; }
.toolbar__spacer { flex: 1; }
.toolbar .btn { white-space: nowrap; }
.toolbar__total { font-size: 13px; color: var(--muted); white-space: nowrap; }
.cat-head__count:empty { display: none; }
@media (max-width: 479px) { .toolbar__total { display: none; } }
@media (min-width: 480px) { .cat-head__count { display: none; } }
.active-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; }
.active-filters::-webkit-scrollbar { display: none; }
.active-filters .chip { flex: none; }

.results { padding-top: 18px; }
.loadmore { display: flex; justify-content: center; padding: 30px 0 6px; }
.loadmore .muted { font-size: 13px; }
.sentinel { height: 1px; }

/* ---------------------------------------------------------------- filtros (janela) */
.fgroup { padding-block: 18px; border-bottom: 1px solid var(--line); }
.fgroup:first-child { padding-top: 6px; }
.fgroup:last-child { border-bottom: 0; }
.fgroup__title { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; color: var(--ink-2); }
.fgroup__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.price-range .input { min-height: 48px; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px 2px; margin-inline: -4px; }

/* ---------------------------------------------------------------- produto */
.pdp { padding-bottom: 104px; }
@media (min-width: 900px) { .pdp { padding-bottom: 32px; } }
.pdp__grid { display: grid; }
@media (min-width: 900px) {
  .pdp__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 52px; align-items: start; padding-top: 28px; }
  .pdp__info { position: sticky; top: calc(var(--header-h) + 24px); }
}

.gallery { position: relative; margin-inline: calc(var(--gutter) * -1); }
@media (min-width: 900px) { .gallery { margin-inline: 0; } }
.gallery__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; background: var(--surface-2); isolation: isolate;
}
.gallery__track::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .gallery__track { border-radius: 18px; } }
.gallery__slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; aspect-ratio: 3 / 4; cursor: zoom-in; }
.gallery__slide > img { position: absolute; inset: 0; }
.gallery__slide > img.is-wide { object-fit: contain; }
.gallery__slide > .lo { filter: blur(10px); transform: scale(1.04); }
.gallery__slide > .hi { z-index: 1; }
.gallery__ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gallery__ui > * { pointer-events: auto; }
.gallery__back, .gallery__zoom, .gallery__share {
  position: absolute; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .88); color: var(--ink); box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: grid; place-items: center;
}
.gallery__back { left: 12px; top: 12px; }
.gallery__share { right: 12px; top: 12px; }
.gallery__zoom { right: 12px; bottom: 14px; }
.gallery__count {
  position: absolute; left: 12px; bottom: 16px; height: 26px; padding: 0 10px; border-radius: 999px;
  background: rgba(10, 10, 10, .62); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center;
}
.gallery__dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.gallery__dots span { width: 6px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); transition: width .25s var(--ease), background-color .25s; }
.gallery__dots span.is-on { width: 18px; background: #fff; }
.gallery__nav { display: none; }
@media (min-width: 900px) {
  .gallery__back { display: none; }
  .gallery__nav {
    display: grid; place-items: center; position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%;
    background: rgba(255, 255, 255, .9); color: var(--ink); box-shadow: var(--shadow-1); opacity: 0; transition: opacity .2s;
  }
  .gallery:hover .gallery__nav { opacity: 1; }
  .gallery__nav--prev { left: 14px; }
  .gallery__nav--next { right: 14px; }
  .gallery__nav:disabled { opacity: 0 !important; pointer-events: none; }
}
.thumbs { display: none; }
@media (min-width: 900px) {
  .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; margin-top: 12px; }
  .thumbs button { aspect-ratio: 3 / 4; border-radius: 10px; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
  .thumbs button[aria-current="true"] { outline-color: var(--ink); }
}

.pdp__info { padding-top: 20px; }
.pdp__crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.pdp__crumbs a { min-height: 32px; display: inline-flex; align-items: center; }
@media (hover: hover) { .pdp__crumbs a:hover { color: var(--ink); } }
.pdp__name { font-size: 25px; font-weight: 700; line-height: 1.15; letter-spacing: -.012em; margin-top: 6px; }
@media (min-width: 900px) { .pdp__name { font-size: 34px; } }
.pdp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.pdp__ref { font-size: 13px; color: var(--muted); }
.pdp__price { font-size: 27px; font-weight: 800; letter-spacing: -.015em; margin-top: 14px; }
.pdp__price.is-off { color: var(--muted); }

.opt { margin-top: 24px; }
.opt__label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.opt__label b { color: var(--ink); font-size: 15px; letter-spacing: 0; text-transform: none; margin-left: 6px; }
.opt.is-missing .opt__label { color: var(--danger); }
.opt.is-missing .chips, .opt.is-missing .swatches { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.opt .chip { min-width: 54px; }
.opt .chip--sm { min-width: 46px; min-height: 40px; }

/* conjunto/kit: uma escolha de tamanho para cada peça */
.pdp__was { margin-left: 6px; font-size: 17px; font-weight: 500; color: var(--muted); }
.pdp__save {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; border-radius: 999px;
  background: #fdecea; color: #b42318; font-size: 13.5px; font-weight: 700;
}
.pdp__kitnote { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.kit__piece { padding: 12px 14px 14px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); transition: border-color .2s; }
.kit__piece + .kit__piece { margin-top: 8px; }
.kit__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 15px; }
.kit__chosen { font-size: 13px; color: var(--muted); white-space: nowrap; }
.kit__chosen b { color: var(--ink); }
.kit__single { margin: -4px 0 0; font-size: 13.5px; color: var(--muted); }
.kit__piece.is-missing { border-color: var(--danger); animation: shake .4s; }
.line__pieces { display: grid; gap: 2px; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.line__pieces b { font-weight: 600; }
.line__kit { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--surface); }
.qty button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.qty button:disabled { opacity: .3; }
.qty output { min-width: 30px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.qty--sm button { width: 38px; height: 38px; }
.qty--sm .ico { width: 16px; height: 16px; }

.pdp__actions { display: grid; gap: 10px; margin-top: 26px; }
.pdp__unavailable { margin-top: 22px; }
.perks { display: grid; gap: 14px; margin-top: 26px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.perk { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.perk b { display: block; color: var(--ink); font-size: 14.5px; }
.pdp__desc { margin-top: 26px; }
.pdp__desc h2 { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pdp__desc p { white-space: pre-line; color: var(--ink-2); font-size: 15.5px; line-height: 1.65; }
.related { margin-top: 44px; }

/* barra fixa de compra (celular) */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--gutter) calc(10px + var(--safe-b));
  background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, .06);
  transform: translateY(110%); transition: transform .28s var(--ease);
}
.buybar.is-on { transform: none; }
.buybar__info { min-width: 0; flex: 0 1 auto; }
.buybar__name { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
.buybar__price { font-size: 17px; font-weight: 800; }
.buybar .btn { flex: 1; }
@media (min-width: 900px) { .buybar { display: none; } }

/* visualizador de fotos em tela cheia */
.viewer { position: fixed; inset: 0; z-index: 350; background: #0b0b0b; color: #fff; animation: fade-in .2s var(--ease); }
.viewer.is-leaving { animation: fade-out .18s var(--ease) forwards; }
.viewer__track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.viewer__track::-webkit-scrollbar { display: none; }
.viewer__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; overflow: auto; display: grid; place-items: center; overscroll-behavior: contain; }
.viewer__slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.viewer__slide.is-zoomed { place-items: start; }
.viewer__slide.is-zoomed img { max-width: none; max-height: none; width: 220%; cursor: zoom-out; }
@media (min-width: 900px) { .viewer__slide.is-zoomed img { width: 160%; } }
.viewer__bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px 18px;
  background: linear-gradient(rgba(0, 0, 0, .5), transparent);
}
.viewer__count { font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.viewer__close { color: #fff; background: rgba(255, 255, 255, .14); }
.viewer__hint { position: absolute; left: 0; right: 0; bottom: calc(16px + var(--safe-b)); text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .6); pointer-events: none; }

/* ---------------------------------------------------------------- sacola */
.bag { padding-block: 22px 40px; }
.bag__title { font-size: clamp(28px, 8vw, 44px); }
.bag__grid { display: grid; gap: 22px; margin-top: 18px; }
@media (min-width: 960px) {
  .bag__grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; align-items: start; }
  .bag__aside { position: sticky; top: calc(var(--header-h) + 20px); }
}
.lines { border-top: 1px solid var(--line); }
.line { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.line__img { aspect-ratio: 3 / 4; border-radius: 10px; display: block; }
.line__top { display: flex; justify-content: space-between; gap: 8px; }
.line__name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.line__opts { font-size: 13px; color: var(--muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.line__opts .swatch { width: 12px; height: 12px; display: inline-block; vertical-align: -1px; margin-right: 5px; }
.line__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.line__price { font-weight: 700; font-size: 15.5px; text-align: right; }
.line__price small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.line__remove { color: var(--muted); margin: -8px -10px 0 0; }
.line__warn { margin-top: 10px; font-size: 13px; color: var(--danger); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.line.is-bad .line__img { opacity: .45; filter: grayscale(1); }
.line.is-bad .line__price { color: var(--muted); text-decoration: line-through; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
.panel + .panel { margin-top: 14px; }
.panel__title { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.summary__row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 15px; }
.summary__row .muted { font-size: 14px; }
.summary__total { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 21px; font-weight: 800; }

.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 74px; padding: 10px 8px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface);
  font-size: 13.5px; font-weight: 600; line-height: 1.2; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.choice input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #faf9f7; }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice .ico { width: 22px; height: 22px; }
.checkout__send { margin-top: 18px; }
.checking { margin-top: 10px; }
.checkout__note { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--muted); }
.form-grid { display: grid; gap: 16px; }

/* ---------------------------------------------------------------- busca */
.search { position: fixed; inset: 0; z-index: 320; background: var(--bg); display: flex; flex-direction: column; animation: fade-in .16s var(--ease); }
.search.is-leaving { animation: fade-out .14s var(--ease) forwards; }
.search__bar { background: var(--black); padding: calc(10px + env(safe-area-inset-top, 0px)) 0 10px; }
.search__bar .wrap { display: flex; align-items: center; gap: 6px; }
.search__field { position: relative; flex: 1; }
.search__field .ico { position: absolute; left: 15px; top: 50%; margin-top: -10px; width: 20px; height: 20px; color: #8d8b86; pointer-events: none; }
.search__input {
  width: 100%; height: 48px; border-radius: 999px; border: 1.5px solid transparent; background: #1d1d1d; color: #fff;
  padding: 0 18px 0 44px; font-size: 16px; outline: none; -webkit-appearance: none; appearance: none;
}
.search__input::placeholder { color: #8d8b86; }
.search__input:focus { border-color: #4a4a4a; }
.search__input::-webkit-search-cancel-button { display: none; }
.search__close { color: #fff; }
.search__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-block: 18px 40px; }
.search__label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 6px 0 12px; }
.search__label:not(:first-child) { margin-top: 26px; }
.sresults { display: grid; }
.sresult { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sresult__img { aspect-ratio: 3 / 4; border-radius: 8px; }
.sresult__name { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.sresult__cat { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sresult__price { font-weight: 700; font-size: 15px; white-space: nowrap; }
.sresult.is-off .sresult__price { color: var(--muted); }
.search__all { margin-top: 18px; }
.search__status { padding: 26px 0; color: var(--muted); text-align: center; font-size: 14.5px; }

/* ---------------------------------------------------------------- rodapé */
.footer { background: var(--black); color: var(--on-black-muted); margin-top: 56px; padding-block: 44px calc(30px + var(--safe-b)); font-size: 14.5px; }
.footer__grid { display: grid; gap: 30px; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
.footer__brand img { height: 46px; width: auto; }
.footer__brand p { margin-top: 14px; max-width: 320px; line-height: 1.55; }
.footer h3 { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.footer__list { display: grid; gap: 4px; }
.footer__list a, .footer__list span { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; line-height: 1.35; }
.footer__list .ico { width: 18px; height: 18px; flex: none; color: #fff; }
@media (hover: hover) { .footer__list a:hover { color: #fff; } }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px;
  margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px;
}
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }

.confirm-msg { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }

/* janela de pedido enviado */
.sent { text-align: center; display: grid; justify-items: center; gap: 10px; padding: 8px 0 4px; }
.sent__icon { width: 68px; height: 68px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; }
.sent__icon .ico { width: 32px; height: 32px; }
.sent p { color: var(--ink-2); }

/* ---------------------------------------------------------------- estoque na página do produto e na sacola */
.chip.is-out { border-style: dashed; }
.opt__stock { font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--warn); }
.opt__stock:empty { display: none; }
.kit__piece .opt__stock { display: block; margin-top: 6px; }
.kit__out { color: var(--danger); font-weight: 600; }
.opt__out { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--danger); }
.line__note { margin-top: 10px; font-size: 13px; color: var(--warn); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.checkout__note .ico { vertical-align: -2px; margin-right: 2px; }
.myorders ul { display: grid; }
.myorders a { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.myorders li:first-child a { border-top: 0; padding-top: 0; }
.myorders .muted { font-size: 13px; }

/* ---------------------------------------------------------------- página do pedido */
.order { padding-block: 22px 10px; }
.order__loading { display: grid; justify-items: center; gap: 14px; padding: 80px 0; color: var(--muted); }
.order__hero { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 10px 0 24px; }
.order__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); margin-bottom: 4px; }
.order__icon .ico { width: 30px; height: 30px; }
.order__hero.is-ok .order__icon { background: var(--ok-bg); color: var(--ok); }
.order__hero.is-wait .order__icon { background: var(--black); color: #fff; }
.order__hero.is-late .order__icon { background: var(--warn-bg); color: var(--warn); }
.order__hero.is-off .order__icon { background: var(--danger-bg); color: var(--danger); }
.order__title { font-size: clamp(26px, 7.4vw, 40px); }
.order__lead { color: var(--ink-2); font-size: 15.5px; max-width: 460px; line-height: 1.5; }
.order__lead b { font-size: 17px; }
.order__steps { display: flex; justify-content: center; gap: 6px; margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); counter-reset: s; }
.order__steps li { display: flex; align-items: center; gap: 6px; }
.order__steps li + li::before { content: ''; width: 18px; height: 1.5px; background: var(--line-2); margin-right: 2px; }
.order__steps span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-2); font-size: 11.5px; }
.order__steps .is-done { color: var(--ink); }
.order__steps .is-done span { background: var(--ink); border-color: var(--ink); color: #fff; }
.order__steps .is-now { color: var(--ink); }
.order__steps .is-now span { border-color: var(--ink); }
@media (max-width: 400px) {
  .order__steps { gap: 4px; font-size: 11.5px; }
  .order__steps li + li::before { width: 8px; }
  .order__steps span { width: 22px; height: 22px; }
}
.order__grid { display: grid; gap: 14px; }
@media (min-width: 960px) {
  .order__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
  .order__aside { position: sticky; top: calc(var(--header-h) + 20px); }
}
.order__main, .order__aside { display: grid; gap: 14px; align-content: start; }
.order__main .panel + .panel, .order__aside .panel + .panel { margin-top: 0; }
.order__pix { text-align: center; display: grid; gap: 12px; }
.order__pix .panel__title { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 0; }
.order__amount { font-size: 30px; font-weight: 800; }
.order__qr { width: min(240px, 70vw); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--line); background: #fff; padding: 6px; }
.order__qr .qr { width: 100%; height: 100%; display: block; }
.order__pixinfo { display: grid; gap: 6px; text-align: left; background: var(--surface-2); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; }
.order__pixinfo div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.order__pixinfo dt { color: var(--muted); }
.order__pixinfo dd { font-weight: 600; }
.order__next { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 13.5px; color: var(--ink-2); }
.order__next .ico { flex: none; color: var(--wa); margin-top: 1px; }
.order__pay p { color: var(--ink-2); line-height: 1.55; }
.order__pay .panel__title { display: flex; align-items: center; gap: 8px; }
.order__wa .checkout__note { margin-top: 8px; }
.order__items { display: grid; }
.order__items li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.order__items li:first-child { padding-top: 0; }
.order__items li > div { display: grid; gap: 2px; min-width: 0; }
.order__items .swatch { width: 11px; height: 11px; display: inline-block; vertical-align: -1px; margin-right: 4px; }
.order__items + .summary__total { border-top: 0; margin-top: 4px; }
.order__aside > .small, .order__items ~ .small { margin-top: 8px; }
.order__link p { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.break { overflow-wrap: anywhere; }
/* área do lojista na página do pedido (só aparece com o painel logado no aparelho) */
.staff { border: 1.5px dashed var(--ink); background: #fbfaf8; display: grid; gap: 12px; }
.staff__tag { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.staff__info { display: grid; gap: 8px; font-size: 14.5px; }
.staff__info div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
.staff__info dt { color: var(--muted); }
.staff__info dd { font-weight: 600; overflow-wrap: anywhere; }
.staff__info a { text-decoration: underline; text-underline-offset: 3px; }
.staff__actions { display: grid; gap: 8px; }