/* ============================================================
   MyLu · Loja — cabeçalho, portas dos mundos, filtros e vitrine
   Tudo via tokens; nada de cor crua além de rgba das 4 da casa.
   ============================================================ */

/* ----------------- CABEÇALHO DA LOJA ----------------- */
.loja-hero {
  padding-top: calc(var(--header-h) + clamp(48px, 9vh, 104px));
  padding-bottom: clamp(24px, 4vh, 56px);
}
.lh-grid {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
}
.lh-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(3.6rem, 9vw, 6.8rem); line-height: 0.9; letter-spacing: -0.02em;
  margin-top: var(--s-3);
}
.lh-title em { font-style: italic; color: var(--ink-gold); }
.lh-lead { max-width: 34ch; font-size: clamp(1.15rem, 1.6vw, 1.4rem); padding-bottom: 10px; }

/* ----------------- PORTAS DOS MUNDOS ----------------- */
.loja-doors { padding-block: clamp(20px, 3vh, 40px) clamp(48px, 7vh, 88px); }
.doors-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-6); align-items: stretch;
  margin-top: var(--s-7); /* respiro pro frasco que vaza do destaque */
}

/* porta destaque (Nicho): frasco flutuando + palavra-conceito em joia */
.door-hero {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 48px);
  padding-right: clamp(140px, 26%, 220px); /* o frasco mora à direita */
  min-height: clamp(380px, 36vw, 460px);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-calm) var(--ease-soft),
              box-shadow var(--dur-calm) var(--ease-soft),
              border-color var(--dur-calm) var(--ease-soft);
}
.door-hero:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-gold); }
.dh-stage {
  position: absolute; top: clamp(-52px, -4vw, -36px); right: clamp(24px, 7%, 72px);
  width: clamp(96px, 9vw, 122px); pointer-events: none;
}
.dh-flacon {
  position: relative; z-index: 2; transform-origin: 50% 90%;
  filter: drop-shadow(0 30px 34px rgba(42, 32, 24, 0.30));
  transition: transform var(--dur-bloom) var(--ease-bloom);
}
.dh-flacon .flacon { width: 100%; height: auto; }
.dh-pedestal {
  position: absolute; z-index: 1; left: 50%; bottom: -8px;
  width: 130%; height: 24px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(42, 32, 24, 0.20), rgba(42, 32, 24, 0) 70%);
  filter: blur(2px);
  transition: transform var(--dur-bloom) var(--ease-bloom), opacity var(--dur-bloom) var(--ease-soft);
}
.door-hero:hover .dh-flacon { transform: translateY(-12px) rotate(-2.5deg) scale(1.04); }
.door-hero:hover .dh-pedestal { transform: translateX(-50%) scale(0.8); opacity: 0.6; }
.dh-name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 0.98;
  margin-top: var(--s-3);
}
.dh-name em { font-style: italic; color: var(--ink-gold); }
.dh-desc { font-size: 0.95rem; color: var(--ink-2); margin-top: var(--s-3); max-width: 30ch; }
.dlink {
  margin-top: var(--s-5); display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-gold);
}
.dlink svg { width: 16px; height: 16px; transition: transform var(--dur-quick) var(--ease-soft); }
.door-hero:hover .dlink svg { transform: translateX(4px); }

/* portas menores: nome + conceito + seta, em coluna */
.doors-side { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.door-mini {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-4); min-height: 88px;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-calm) var(--ease-soft), padding-left var(--dur-calm) var(--ease-soft);
}
.door-mini:hover { background: var(--cream-warm); padding-left: var(--s-5); }
.dm-name { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.45rem; line-height: 1.1; }
.dm-name em { font-style: italic; font-weight: 500; color: var(--ink-gold); margin-left: 6px; }
.dm-desc { display: block; font-size: 0.84rem; color: var(--ink-3); margin-top: 2px; max-width: 38ch; }
.dm-arrow { flex: none; color: var(--ink-gold); }
.dm-arrow svg { width: 20px; height: 20px; transition: transform var(--dur-quick) var(--ease-soft); }
.door-mini:hover .dm-arrow svg { transform: translateX(4px); }

/* ----------------- FILTROS ----------------- */
.loja-filtros { padding-block: 0; }
.filterbar {
  display: flex; align-items: center; gap: var(--s-4);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: var(--s-3);
}
.fchips {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: var(--s-2);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px; margin: -4px; /* não cortar o anel de foco */
}
.fchips::-webkit-scrollbar { display: none; }
.fchip {
  flex: none; min-height: 44px; padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--cream-deep); color: var(--ink-2);
  font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.04em;
  transition: background var(--dur-quick) var(--ease-soft),
              color var(--dur-quick) var(--ease-soft),
              transform var(--dur-quick) var(--ease-soft);
}
.fchip:hover { transform: translateY(-1px); }
.fchip.is-on { background: var(--wheat-deep); color: var(--on-gold); } /* trigo profundo: contraste AA com o creme */

/* ordenação discreta, à direita */
.loja-sort { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-2); }
.sort-label {
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
.sort-wrap { position: relative; display: inline-flex; align-items: center; }
.sort-wrap select {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: none; cursor: pointer;
  min-height: 44px; padding: 0 26px 0 8px;
  font-family: var(--sans); font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--dur-quick) var(--ease-soft);
}
.sort-wrap select:hover { color: var(--ink); }
.sort-wrap svg { position: absolute; right: 6px; width: 14px; height: 14px; color: var(--wheat); pointer-events: none; }

/* ----------------- VITRINE ----------------- */
.loja-grade { padding-top: 0; }
.loja-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--s-6);
  row-gap: clamp(96px, 9vw, 124px);             /* o frasco vaza 92px do topo */
  margin-top: clamp(92px, 9vw, 118px);          /* respiro pra primeira fileira */
  align-items: stretch;
}
/* ritmo editorial: cards pares descem um degrau (só desktop;
   margin em vez de transform pra não brigar com o hover/gsap) */
@media (min-width: 1000px) { .pcard.is-low { margin-top: 28px; } }

.pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 0 var(--s-5) var(--s-5);
  text-align: center; box-shadow: var(--shadow-xs);
  transition: transform var(--dur-calm) var(--ease-soft),
              box-shadow var(--dur-calm) var(--ease-soft),
              border-color var(--dur-calm) var(--ease-soft);
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-gold); }
.pcard:active { transform: scale(0.98); }

/* palco: o frasco vaza pelo topo e pousa num pedestal de sombra.
   Ancorado pela BASE numa caixa de altura fixa: toda foto/vetor pousa
   exatamente no pedestal, qualquer que seja a proporção do frasco. */
.pcard-stage { position: relative; height: 170px; pointer-events: none; }
.pcard-flacon {
  position: absolute; z-index: 2; left: 50%; bottom: 12px;
  height: 250px; width: 150px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 26px 28px rgba(42, 32, 24, 0.30));
  transition: transform var(--dur-bloom) var(--ease-bloom);
}
.pcard-flacon .flacon { width: 100%; height: 100%; }
.pcard-pedestal {
  position: absolute; z-index: 1; left: 50%; top: 146px;
  width: 116px; height: 24px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(42, 32, 24, 0.20), rgba(42, 32, 24, 0) 70%);
  filter: blur(2px);
  transition: transform var(--dur-bloom) var(--ease-bloom), opacity var(--dur-bloom) var(--ease-soft);
}
.pcard:hover .pcard-flacon { transform: translateX(-50%) translateY(-10px) rotate(-2.5deg) scale(1.04); }
.pcard:hover .pcard-pedestal { transform: translateX(-50%) scale(0.8); opacity: 0.6; }

.pcard-body { flex: 1; display: flex; flex-direction: column; }
.pcard-name { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; line-height: 1.15; }
/* link esticado: o <a> do nome cobre o card inteiro (o .pcard é relative),
   sem aninhar o botão de sacola dentro do link */
.pcard-name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.pcard-notes { margin-top: 4px; }
.pcard-buy {
  margin-top: auto; padding-top: var(--s-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  border-top: 1px solid var(--line);
}
.pcard-body > .pcard-notes { margin-bottom: var(--s-4); }
.pcard-price { text-align: left; font-size: 1.15rem; line-height: 1.1; }
.pcard-from {
  display: block; font-family: var(--sans); font-weight: 400;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 2px; /* info de preço: contraste AA */
}
.pcard-add {
  position: relative; z-index: 2; /* acima do link esticado do card */
  flex: none; width: 44px; height: 44px; border-radius: var(--r-pill);
  border: 1px solid var(--line-gold); color: var(--ink-gold);
  display: grid; place-items: center;
  transition: background var(--dur-quick) var(--ease-soft),
              color var(--dur-quick) var(--ease-soft),
              transform var(--dur-quick) var(--ease-soft);
}
.pcard-add:hover { background: var(--wheat); color: var(--on-gold); transform: translateY(-1px); }
.pcard-add:active { transform: scale(0.94); }
.pcard-add svg { width: 18px; height: 18px; }

/* ----------------- BANNER DO QUIZ (meio da grade) ----------------- */
.quiz-banner {
  grid-column: 1 / -1;
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: clamp(24px, 4vw, 56px);
  background: var(--bg-inverse); color: var(--on-dark);
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 56px) clamp(28px, 5vw, 64px);
}
.quiz-banner::before { /* luz quente que atravessa o trigo */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 130% at 85% 0%, rgba(201, 162, 74, 0.14), rgba(201, 162, 74, 0) 60%);
}
.qb-espiga { position: relative; flex: none; width: clamp(54px, 6vw, 84px); color: var(--gold); }
.qb-espiga .espiga { width: 100%; height: auto; filter: drop-shadow(0 0 24px rgba(201, 162, 74, 0.35)); }
.qb-text { position: relative; flex: 1; }
.qb-text h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.08;
  color: var(--cream); max-width: 24ch;
}
.qb-text h2 em { font-style: italic; color: var(--gold-bright); }
.qb-text p { margin-top: var(--s-3); font-size: 0.95rem; color: var(--on-dark-2); max-width: 46ch; }
.qb-cta { position: relative; flex: none; }

/* ----------------- ESTADO VAZIO ----------------- */
.loja-empty { grid-column: 1 / -1; display: none; text-align: center; padding: clamp(40px, 7vh, 80px) var(--s-5); }
.loja-empty.is-on { display: block; }
.loja-empty p {
  font-family: var(--serif); font-style: italic; font-size: 1.4rem;
  color: var(--ink-2); max-width: 30ch; margin-inline: auto;
}
.loja-empty .btn { margin-top: var(--s-5); }

/* ----------------- FECHO: EXPLORE TAMBÉM ----------------- */
.loja-explore .divider-gold { margin-bottom: var(--s-6); }
.explore-eyebrow { margin-bottom: var(--s-5); }
.explore-list { border-top: 1px solid var(--line); }
.explore-link {
  display: flex; align-items: baseline; gap: var(--s-4);
  padding: clamp(18px, 3vh, 28px) 4px;
  border-bottom: 1px solid var(--line);
}
.xl-name {
  position: relative; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.05;
}
.xl-name::after {
  content: ""; position: absolute; left: 0; bottom: 4px; height: 2px; width: 0;
  background: var(--gold);
  transition: width var(--dur-calm) var(--ease-soft);
}
.explore-link:hover .xl-name::after { width: 100%; }
.xl-concept { font-family: var(--serif); font-style: italic; color: var(--ink-gold); font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.xl-arrow {
  margin-left: auto; align-self: center; flex: none;
  width: 22px; height: 22px; color: var(--ink-gold);
  transition: transform var(--dur-quick) var(--ease-soft);
}
.explore-link:hover .xl-arrow { transform: translateX(6px); }

/* ----------------- GUARDA: REDUCED MOTION -----------------
   No modo reduced o motion.js nunca chama disarm(): o body fica .is-armed
   e a regra global da landing deixaria todo [data-settle] deslocado
   24px/rotacionado pra sempre. Defesa local: estado final direto.
   Zero efeito no fluxo normal (disarm remove .is-armed). */
@media (prefers-reduced-motion: reduce) {
  body.is-armed [data-settle] { opacity: 1; transform: none; }
}

/* ----------------- RESPONSIVO ----------------- */
@media (max-width: 1000px) {
  .loja-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
  .doors-grid { grid-template-columns: 1fr; }
  .door-hero { min-height: 340px; }
}

@media (max-width: 760px) {
  .filterbar { flex-wrap: wrap; }

  /* grade 2 colunas, frasco menor, sem degrau */
  .loja-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-4);
    row-gap: clamp(80px, 14vw, 96px);
    margin-top: 84px;
  }
  .pcard { padding: 0 var(--s-4) var(--s-4); }
  .pcard-stage { height: 122px; }
  .pcard-flacon { height: 176px; width: 106px; bottom: 13px; }
  .pcard-pedestal { top: 100px; width: 84px; height: 18px; }
  .pcard-name { font-size: 1.12rem; }
  .pcard-price { font-size: 1.05rem; }

  /* banner empilhado */
  .quiz-banner { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  .qb-espiga { width: 48px; }

  /* portas empilhadas: destaque primeiro, texto abaixo do frasco */
  .door-hero { padding: var(--s-6); padding-top: 184px; min-height: 0; }
  .dh-stage { top: -32px; right: var(--s-6); width: 72px; }
  .door-mini { padding-inline: var(--s-2); min-height: 80px; }
  .door-mini:hover { padding-left: var(--s-3); }
}