/* Etapa 2 — descoberta espacial, seleção pessoal e movimento responsável */
.wow-scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 220;
  height: 2px;
  pointer-events: none;
}
.wow-scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--bronze-dark), #d8bb93);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* Hero com profundidade suave; o conteúdo continua legível sem JavaScript. */
.wow-ready .hero-image {
  isolation: isolate;
  transform: perspective(1200px) rotateX(var(--hero-tilt-y, 0deg)) rotateY(var(--hero-tilt-x, 0deg));
  transform-origin: center;
  transition: transform .65s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
  will-change: transform;
}
.wow-ready .hero-image::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -35%;
  background: radial-gradient(circle at var(--hero-x, 62%) var(--hero-y, 38%), rgba(255,243,218,.26), transparent 28%);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: background-position .25s ease;
}
.wow-ready .hero-image img { transform: scale(1.025); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.wow-ready .hero-image:hover img { transform: scale(1.055); }
.hero-copy::after {
  content: "OLFÈRE  ·  SÃO PAULO";
  display: block;
  margin-top: 42px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .24em;
}

/* Mapa olfativo */
.sensory-map-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(169,139,101,.12), transparent 27%),
    radial-gradient(circle at 88% 75%, rgba(116,129,108,.12), transparent 25%);
}
.sensory-map {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(350px,.8fr);
  min-height: 690px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: rgba(255,253,249,.72);
  box-shadow: 0 28px 80px rgba(43,40,35,.08);
  backdrop-filter: blur(18px);
}
.sensory-map__canvas {
  position: relative;
  min-height: 690px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(196,212,202,.28), transparent 45%, rgba(202,169,131,.24)),
    linear-gradient(0deg, rgba(255,255,255,.5), transparent 48%, rgba(87,68,53,.08));
}
.sensory-map__canvas::before,
.sensory-map__canvas::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.sensory-map__canvas::before {
  inset: 8% 8% 11%;
  border: 1px solid rgba(128,102,72,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 85px rgba(255,255,255,.12), 0 0 0 170px rgba(255,255,255,.08);
}
.sensory-map__canvas::after {
  left: 50%;
  top: 7%;
  bottom: 10%;
  border-left: 1px dashed rgba(128,102,72,.2);
}
.sensory-map__axis {
  position: absolute;
  z-index: 2;
  color: rgba(43,40,35,.62);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sensory-map__axis--top { top: 22px; left: 50%; transform: translateX(-50%); }
.sensory-map__axis--bottom { bottom: 22px; left: 50%; transform: translateX(-50%); }
.sensory-map__axis--left { left: 22px; top: 50%; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; }
.sensory-map__axis--right { right: 22px; top: 50%; transform: rotate(90deg) translateX(50%); transform-origin: right top; }
.sensory-map__point {
  --point-size: 42px;
  position: absolute;
  z-index: 4;
  left: var(--map-x);
  top: var(--map-y);
  display: grid;
  place-items: center;
  width: var(--point-size);
  height: var(--point-size);
  padding: 0;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: rgba(43,40,35,.83);
  color: white;
  box-shadow: 0 8px 28px rgba(43,40,35,.2);
  cursor: pointer;
  transform: translate(-50%,-50%);
  transition: width .25s ease, height .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sensory-map__point::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(128,102,72,.35);
  border-radius: inherit;
  opacity: 0;
  transform: scale(.75);
  transition: .25s ease;
}
.sensory-map__point span {
  position: absolute;
  left: 50%;
  top: calc(100% + 9px);
  width: max-content;
  max-width: 130px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,4px);
  transition: .25s ease;
}
.sensory-map__point:hover,
.sensory-map__point:focus-visible,
.sensory-map__point.is-active {
  --point-size: 56px;
  z-index: 8;
  background: var(--bronze-dark);
  box-shadow: 0 12px 38px rgba(128,102,72,.34);
}
.sensory-map__point:hover::before,
.sensory-map__point:focus-visible::before,
.sensory-map__point.is-active::before { opacity: 1; transform: scale(1); }
.sensory-map__point:hover span,
.sensory-map__point:focus-visible span,
.sensory-map__point.is-active span { opacity: 1; transform: translate(-50%,0); }
.sensory-map__point i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sensory-map__preview {
  position: relative;
  display: grid;
  align-content: end;
  min-width: 0;
  overflow: hidden;
  background: var(--ink);
  color: white;
}
.sensory-map__preview-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .64;
  transform: scale(1.02);
  transition: opacity .35s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.sensory-map__preview.is-changing .sensory-map__preview-image { opacity: .18; transform: scale(1.08); }
.sensory-map__preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 10%, rgba(31,28,24,.12) 35%, rgba(31,28,24,.95) 88%);
}
.sensory-map__preview-content { position: relative; z-index: 2; padding: clamp(30px,5vw,58px); }
.sensory-map__preview-content .eyebrow { color: rgba(255,255,255,.72); }
.sensory-map__preview h3 { margin-bottom: 12px; color: white; font-size: clamp(2.7rem,5vw,4.8rem); line-height: .94; }
.sensory-map__preview p:not(.eyebrow) { color: rgba(255,255,255,.76); }
.sensory-map__notes { display: grid; gap: 8px; margin: 25px 0; }
.sensory-map__notes span { font-size: 11px; line-height: 1.5; }
.sensory-map__notes strong { display: inline-block; width: 62px; color: white; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.sensory-map__preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sensory-map__preview .button { background: white; border-color: white; color: var(--ink); }
.sensory-map__preview .button:hover { background: #e3c79d; border-color: #e3c79d; }

/* Minha seleção */
.header-tool--selection { position: relative; }
.selection-count {
  position: absolute;
  right: -1px;
  top: -2px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--bronze-dark);
  color: white;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
.selection-count[hidden] { display: none; }

/* 9px e pequeno demais para um contador que informa quantidade.
   A regra vive aqui porque wow.css carrega depois de styles.css e
   venceria qualquer override de mesma especificidade la. */
@media (max-width: 680px) {
  .selection-count { font-size: 10px; min-width: 17px; height: 17px; }
}
.product-favorite {
  position: absolute;
  z-index: 5;
  top: 13px;
  right: 13px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 50%;
  background: rgba(255,253,249,.88);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(43,40,35,.1);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.product-favorite:hover { transform: scale(1.08); }
.product-favorite svg { width: 19px; fill: transparent; stroke: currentColor; stroke-width: 1.7; }
.product-favorite.is-selected { background: var(--ink); color: white; }
.product-favorite.is-selected svg { fill: currentColor; }
.product-page-favorite {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bronze-dark);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.product-page-favorite svg { width: 18px; fill: transparent; stroke: currentColor; stroke-width: 1.7; }
.product-page-favorite.is-selected svg { fill: currentColor; }
.quick-view .product-page-favorite:not(:has(svg))::before { content: "♡"; font-size: 18px; line-height: 1; }
.quick-view .product-page-favorite.is-selected:not(:has(svg))::before { content: "♥"; }
.selection-drawer { width: min(560px,100%); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--paper); color: var(--ink); }
.selection-drawer::backdrop { background: rgba(31,28,24,.48); backdrop-filter: blur(4px); }
.selection-drawer[open] { animation: selection-in .35s cubic-bezier(.2,.7,.2,1); }
@keyframes selection-in { from { transform: translateX(100%); } }
.selection-drawer__panel { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.selection-drawer__header { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding: 32px clamp(22px,5vw,42px); border-bottom: 1px solid var(--line); }
.selection-drawer__header h2 { margin: 0; font-size: 2.8rem; }
.selection-drawer__close { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.selection-drawer__body { padding: 12px clamp(22px,5vw,42px); overflow-y: auto; }
.selection-item { display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.selection-item img { display: block; width: 92px; aspect-ratio: 4/5; border-radius: 14px; object-fit: cover; }
.selection-item h3 { margin: 3px 0; font-size: 1.55rem; }
.selection-item p { margin: 0; color: var(--muted); font-size: 11px; }
.selection-item a { text-decoration: none; }
.selection-item__remove { width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.selection-empty { display: grid; place-items: center; min-height: 55vh; text-align: center; }
.selection-empty div { max-width: 330px; }
.selection-empty h3 { font-size: 2.4rem; }
.selection-drawer__footer { padding: 22px clamp(22px,5vw,42px); border-top: 1px solid var(--line); background: var(--ivory); }
.selection-drawer__footer p { margin: 0 0 14px; color: var(--muted); font-size: 11px; }
.selection-drawer__footer .button { width: 100%; }
.selection-toast {
  position: fixed;
  z-index: 240;
  left: 50%;
  bottom: 24px;
  max-width: calc(100% - 30px);
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  box-shadow: 0 14px 38px rgba(43,40,35,.24);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,12px);
  transition: .25s ease;
}
.selection-toast.is-visible { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 980px) {
  .sensory-map { grid-template-columns: 1fr; }
  .sensory-map__canvas { min-height: 430px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sensory-map__preview { min-height: 480px; }
}
@media (max-width: 620px) {
  .hero-copy::after { margin-top: 28px; }
  .sensory-map { min-height: 0; border-radius: 22px; }
  .sensory-map__canvas { min-height: 360px; }
  .sensory-map__canvas::before { inset: 13% 10% 16%; box-shadow: 0 0 0 55px rgba(255,255,255,.12); }
  .sensory-map__axis--left { left: 14px; }
  .sensory-map__axis--right { right: 14px; }
  .sensory-map__point { --point-size: 34px; }
  .sensory-map__point:hover,.sensory-map__point:focus-visible,.sensory-map__point.is-active { --point-size: 46px; }
  .sensory-map__point span { display: none; }
  .sensory-map__preview { min-height: 430px; }
  .sensory-map__preview-content { padding: 28px 22px; }
  .selection-item { grid-template-columns: 74px 1fr auto; }
  .selection-item img { width: 74px; }
}
@media (pointer: coarse) {
  .product-favorite { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .wow-ready .hero-image,.wow-ready .hero-image img,.sensory-map__point,.sensory-map__preview-image,.selection-drawer[open],.selection-toast { animation: none!important; transition: none!important; transform: none; }
  .sensory-map__point { transform: translate(-50%,-50%); }
}