/* ==========================================================================
   Soft & Chic — The Studio Issue
   Página única, sem scroll: passarela horizontal de modelos + carril vertical
   de peças, sincronizados pelo mesmo estado (ver assets/js/app.js).
   ========================================================================== */

:root {
  --bg: #ffffff;
  --ink: #141312;
  --muted: #8d8781;
  --soft: #625c57;
  --hair: #e9e5e1;
  --blush: #b8958a;
  --ghost: #f3efeb;

  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --sans: "Jost", Futura, "Helvetica Neue", Arial, sans-serif;
  --script: "Monsieur La Doulaise", "Snell Roundhand", cursive;

  --pad: clamp(16px, 2.4vw, 40px);
  --head-h: clamp(84px, 12.5vh, 128px);
  --cap-h: clamp(150px, 21vh, 196px);
  --rail-w: clamp(120px, 12vw, 200px);
  --foot-y: clamp(16px, 3vh, 32px);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; }
p, h1, h2 { margin: 0; }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ---------- Tipografia utilitária ---------- */

.label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.label--muted { color: var(--muted); }

.link { position: relative; display: inline-block; }
.link::after {
  content: "";
  position: absolute;
  left: 0; right: .26em; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .7s var(--ease-out);
}
.link:hover::after, .link:focus-visible::after,
.link.is-current::after { transform: scaleX(1); transform-origin: left center; }

/* Ícones de traço fino */
.icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* Máscara para revelar texto de baixo para cima */
.mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .1em .14em .16em;
  margin: -.1em -.14em -.16em;
}
.mask > span { display: inline-block; }

/* ---------- Ecrã de entrada ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
}
/* O logótipo completo, como no cabeçalho (o "&" segue as mesmas contas do .logo__amp) */
.loader__mark {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(44px, min(7vw, 11vh), 96px);
  line-height: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  isolation: isolate;
}
.loader__mark i { font-style: italic; }
.loader__amp {
  display: inline-block;
  font-family: var(--script);
  font-weight: 400;
  color: var(--blush);
  font-size: 1em;
  line-height: 1;
  margin: -.3em -.06em;
  position: relative;
  top: -.05em;
  z-index: -1;
}
.loader__line { margin-top: 2.4em; }
.loader__progress {
  position: absolute;
  left: 50%;
  bottom: 14vh;
  width: 140px;
  height: 1px;
  background: var(--hair);
  transform: translateX(-50%);
  overflow: hidden;
}
.loader__bar {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease-out);
}
.loader__count {
  position: absolute;
  left: 50%;
  bottom: calc(14vh + 14px);
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
}

/* ---------- Masthead ---------- */

.masthead {
  position: absolute;
  z-index: 30;
  top: 0; left: 0; right: 0;
  height: var(--head-h);
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--bg);
}
.masthead__side { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); }
.masthead__side--left { flex-direction: column; align-items: flex-start; gap: 5px; }
.masthead__side--right { justify-content: flex-end; }
.masthead__rule {
  position: absolute;
  left: var(--pad); right: var(--pad); bottom: 0;
  height: 1px;
  background: var(--hair);
}

.logo {
  /* Limitado também pela altura: em janelas baixas o cabeçalho encolhe */
  --logo-fs: clamp(34px, min(4.2vw, 6.4vh), 62px);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: var(--logo-fs);
  line-height: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.logo__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
}
.logo__name {
  display: inline-flex;
  align-items: baseline;
  position: relative;
  isolation: isolate;
}
.logo__word {
  display: inline-flex;
  overflow: hidden;
  padding: .06em .1em .16em;
  margin: -.06em -.1em -.16em;
}
.logo__word--italic { font-style: italic; }
.logo .ch { display: inline-block; }
/* "&" caligráfico centrado no título. Tinta do "&": de 0,844 acima a 0,199 abaixo
   da linha de base (centro a −0,3225 do seu corpo); "Soft Chic": de 0,76 acima a
   0,015 abaixo (centro a −0,3725). Para os centros coincidirem com o "&" a k×:
   top = 0,3225k − 0,3725 → 1× em desktop (−0,05em), 1,2× em mobile (+0,01em). */
.logo__amp {
  display: inline-block;
  font-family: var(--script);
  font-weight: 400;
  color: var(--blush);
  font-size: 1em;
  line-height: 1;
  margin: -.3em -.06em;
  position: relative;
  top: -.05em;
  z-index: -1;
}
/* Subtítulo: pequeno, espaçado, ladeado por dois filetes que se desenham */
.logo__by {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: calc(var(--logo-fs) * .24);
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--muted);
}
.logo__by-text { padding-left: .36em; white-space: nowrap; }
.logo__by-text em {
  margin-right: .25em;
  font-family: var(--serif);
  font-size: 1.5em;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--blush);
}
.logo__by .bch { display: inline-block; }
.logo__by-line {
  width: 16px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  transform-origin: right center;
  transition: transform .9s var(--ease-out);
}
.logo__by-line:last-child { transform-origin: left center; }
.logo__link:hover .logo__by-line { transform: scaleX(1.8); }

/* ---------- Passarela ---------- */

.stage {
  position: absolute;
  z-index: 10;
  inset: var(--head-h) 0 0 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.runway {
  position: absolute;
  left: 0; right: 0; top: 0;
  bottom: var(--cap-h);
}

/* Sem `will-change: transform` de propósito: assim o Chrome volta a rasterizar
   quando a escala muda e a modelo que chega ao centro fica nítida. */
.look {
  position: absolute;
  left: 50%;
  bottom: calc(var(--drop, 0px) * -1);
  width: var(--wc, 300px);
  height: var(--hc, 450px);
  margin: 0;
  transform-origin: 50% 100%;
}
.look__inner { position: absolute; inset: 0; }
/* Fotos com fundo (não recortadas): o multiply faz o fundo claro desaparecer
   no branco da página. Tem de estar no .look, que é o contexto de empilhamento. */
.look--opaque { mix-blend-mode: multiply; }
.look__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.look__img--mono { filter: grayscale(1) contrast(1.02); }
.look__img--color { will-change: opacity; }
/* Sombra de contacto sintética sob os pés (os recortes não têm chão) */
.look__shadow {
  position: absolute;
  left: 24%; right: 24%;
  bottom: 1.7%;
  height: 3.4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 28, 22, .22), rgba(40, 28, 22, 0));
  filter: blur(3px);
}

/* Palavra editorial gigante por trás das modelos */
.ghost {
  position: absolute;
  left: 0; right: 0; top: 0;
  bottom: var(--cap-h);
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}
.ghost__wrap { will-change: transform; }
.ghost__word {
  display: block;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 400;
  font-size: min(36vh, 22vw);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ghost);
  white-space: nowrap;
  transform: translateY(-6%);
}


/* ---------- Carril de peças ---------- */

.rail {
  position: absolute;
  z-index: 20;
  top: var(--head-h);
  right: 0;
  bottom: 0;
  width: var(--rail-w);
  padding: clamp(14px, 2.6vh, 26px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.rail::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  background: var(--hair);
}
/* Fade dos modelos que passam por baixo do carril */
.rail::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: 100%;
  width: clamp(40px, 6vw, 90px);
  background: linear-gradient(to left, var(--bg), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.rail__viewport {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.rail__track { position: absolute; inset: 0; }

.thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tw, 100px);
  height: var(--th, 150px);
}
.thumb > span { display: block; width: 100%; height: 100%; }
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Visor fixo no centro do carril: a peça selecionada passa sempre por aqui */
.rail__frame {
  --c: var(--ink);
  --l: 9px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--tw, 100px) + 20px);
  height: calc(var(--th, 150px) + 20px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) left top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) right top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) left bottom / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) right bottom / 1px var(--l);
  background-repeat: no-repeat;
}

/* ---------- Legenda ---------- */

.caption {
  position: absolute;
  z-index: 15;
  left: 50%;
  bottom: var(--foot-y);
  width: min(640px, calc(100vw - 2 * var(--rail-w) - 2 * var(--pad)));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 1vh, 10px);
  text-align: center;
  pointer-events: none;
}
/* Alturas fixas: a legenda tem sempre a mesma altura, seja qual for a peça,
   e o JS reserva esse espaço por baixo da passarela. */
.caption__title {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.04;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.caption__title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  white-space: nowrap;
  padding: .08em .1em .14em;
  margin: -.08em -.1em -.14em;
}
.caption__title .ch { display: inline-block; }
.caption__desc {
  max-width: 52ch;
  min-height: 3.1em;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--soft);
}
.caption__meta { color: var(--ink); }
.caption__buy {
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin-top: 2px;
}
.caption__price {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 21px;
  letter-spacing: .01em;
}
.caption__add {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.caption__add-label { white-space: nowrap; }
.caption__add .icon { width: 17px; height: 17px; margin-top: -3px; transition: transform .6s var(--ease-out); }
.caption__add:hover .icon { transform: translateY(-2px); }
.caption__add:hover .caption__add-label::after,
.caption__add:focus-visible .caption__add-label::after { transform: scaleX(1); transform-origin: left center; }
.icon__check { opacity: 0; transition: opacity .5s ease; }
.caption__add.is-in-bag .icon__check { opacity: 1; }
.caption__add.is-in-bag { color: var(--soft); }

/* Peça a "voar" até ao saco */
.fly {
  position: fixed;
  z-index: 150;
  object-fit: contain;
  pointer-events: none;
}

/* ---------- HUD ---------- */

.hud {
  position: absolute;
  z-index: 15;
  left: var(--pad);
  bottom: var(--foot-y);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.counter { display: flex; align-items: center; gap: 12px; }
.counter__current {
  display: inline-block;
  overflow: hidden;
  height: 1.15em;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 30px;
  line-height: 1.15;
  font-variant-numeric: lining-nums;
}
.counter__current > span { display: inline-block; }
.counter__sep { width: 28px; height: 1px; background: var(--ink); }

.dots { display: flex; gap: 6px; }
.dot {
  position: relative;
  width: 18px;
  height: 16px;
  transition: width .8s var(--ease-out);
}
.dot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: #d9d3cd;
  transition: background-color .6s;
}
.dot:hover::before { background: var(--muted); }
.dot.is-active { width: 40px; }
.dots--dense { gap: 4px; }
.dots--dense .dot { width: 8px; }
.dots--dense .dot.is-active { width: 24px; }
.dot.is-active::before { background: var(--ink); }

.hint {
  position: absolute;
  z-index: 15;
  right: calc(var(--rail-w) + var(--pad));
  bottom: var(--foot-y);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity 1s ease;
}
.hint__line { position: relative; width: 34px; height: 1px; overflow: hidden; }
.hint__line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  animation: hint-line 2.4s var(--ease-in-out) infinite;
}
@keyframes hint-line {
  0%   { transform: translateX(-101%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

/* ---------- Cursor ---------- */

.cursor {
  position: fixed;
  z-index: 100;
  left: 0; top: 0;
  width: 88px; height: 88px;
  margin: -44px 0 0 -44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--ink);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(20, 19, 18, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translate3d(-200px, -200px, 0) scale(0);
  will-change: transform;
  transition: width .5s var(--ease-out), height .5s var(--ease-out), margin .5s var(--ease-out), background-color .5s ease;
}
.cursor__label {
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding-left: .28em;
  white-space: nowrap;
  transition: opacity .3s ease;
}
/* Depois do primeiro arrasto: um anel discreto, sem instruções */
.cursor.is-plain {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: rgba(255, 255, 255, .25);
}
.cursor.is-plain .cursor__label { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .stage, .rail { cursor: none; }
}
@media not all and (hover: hover) and (pointer: fine) {
  .cursor { display: none; }
}

/* ---------- Coleção (contentor da página inicial) ---------- */

.home { position: absolute; inset: 0; }

.empty-state {
  position: absolute;
  inset: 0;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 18px;
  text-align: center;
}
.empty-state__title {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 80px);
  line-height: 1;
  letter-spacing: -.02em;
}
.empty-state__title em { font-style: italic; }
body.is-empty .empty-state { display: grid; }
body.is-empty .rail,
body.is-empty .caption,
body.is-empty .hud,
body.is-empty .hint,
body.is-empty .ghost { display: none; }

.preview-badge {
  display: none;
  position: fixed;
  z-index: 120;
  left: 50%;
  top: calc(var(--head-h) + 12px);
  transform: translateX(-50%);
  padding: 8px 16px 7px;
  background: var(--ink);
  color: #fff;
  pointer-events: none;
}
.is-preview .preview-badge { display: block; }

/* ==========================================================================
   Páginas: Saco e Loja (sobrepõem-se à coleção; o cabeçalho mantém-se)
   ========================================================================== */

.page {
  position: absolute;
  z-index: 26;
  inset: var(--head-h) 0 0 0;
  background: var(--bg);
  overflow: hidden;
}
.page[hidden] { display: none; }

.page__grid {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.page__title {
  margin: clamp(10px, 1.6vh, 16px) 0 clamp(18px, 3.6vh, 40px);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(44px, 5.4vw, 88px);
  line-height: .95;
  letter-spacing: -.02em;
  outline: none;
}
.page__title em { font-style: italic; }

/* ----- Saco ----- */

.bag {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 5.5vh, 64px) clamp(28px, 4.5vw, 84px) clamp(22px, 4vh, 44px) var(--pad);
}
.bag__list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  overflow-y: auto;
}
.bag__list[hidden] { display: none; }
.bag-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: clamp(14px, 1.8vw, 28px);
  padding: clamp(10px, 1.6vh, 16px) 0;
  border-top: 1px solid var(--hair);
  overflow: hidden;
}
.bag-item:last-child { border-bottom: 1px solid var(--hair); }
.bag-item__img { width: clamp(44px, 4.4vw, 62px); aspect-ratio: 2 / 3; object-fit: contain; }
.bag-item__info { display: grid; gap: 6px; }
.bag-item__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.15;
}
.bag-item__price { font-family: var(--serif); font-size: 18px; white-space: nowrap; }
.bag-item__price--none { font-family: var(--sans); font-size: 9.5px; }
.bag-item__remove { color: var(--muted); transition: color .3s; }
.bag-item__remove:hover { color: var(--ink); }

.bag__empty { max-width: 40ch; display: grid; gap: 14px; justify-items: start; }
.bag__empty[hidden] { display: none; }
.bag__empty-title { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2vw, 30px); }
.bag__empty-text { margin-bottom: 6px; font-weight: 300; font-size: 14.5px; line-height: 1.7; color: var(--soft); }

.bag__total {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--ink);
}
.bag__total[hidden] { display: none; }
.bag__total .label + .label { margin-top: 6px; letter-spacing: .18em; }
.bag__total-value { font-family: var(--serif); font-size: clamp(26px, 2.5vw, 38px); line-height: 1; }

/* ----- Reserva por telefone ----- */

.reserve {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center; /* se não couber, alinha ao topo em vez de cortar em cima e em baixo */
  padding: clamp(28px, 5vh, 60px) var(--pad) clamp(22px, 4vh, 44px) clamp(28px, 4.5vw, 84px);
  background: #faf8f6;
  border-left: 1px solid var(--hair);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--hair) transparent;
}
.reserve__title {
  margin: 14px 0 18px;
  max-width: 15ch;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(30px, 3.1vw, 50px);
  line-height: 1.06;
  letter-spacing: -.01em;
}
.reserve__title em { font-style: italic; }
.reserve__text { max-width: 46ch; font-weight: 300; font-size: 14.5px; line-height: 1.75; color: var(--soft); }
.reserve__steps {
  list-style: none;
  margin: clamp(16px, 3.4vh, 34px) 0;
  padding: 0;
  max-width: 48ch;
  display: grid;
  gap: clamp(8px, 1.6vh, 14px);
}
.reserve__steps li { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: baseline; }
.reserve__num { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--blush); }
.reserve__steps p { font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--soft); }
.reserve__steps strong { font-weight: 500; color: var(--ink); }

.call {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 17px 26px 17px 22px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  transition: background-color .5s ease, color .5s ease;
}
.call:hover, .call:focus-visible { background: transparent; color: var(--ink); }
.call .icon { width: 18px; height: 18px; }
.call__label { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; }
.call__number {
  padding-left: 16px;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1;
  letter-spacing: .02em;
  box-shadow: inset 1px 0 0 color-mix(in srgb, currentColor 35%, transparent);
}
.reserve__visit {
  margin-top: clamp(14px, 2.4vh, 22px);
  display: grid;
  gap: 5px;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: var(--soft);
}
.reserve__visit .status { margin-bottom: 4px; }
.reserve__visit .label--muted { margin-top: 4px; letter-spacing: .2em; }

/* Estado da loja em tempo real: ponto verde a pulsar quando está aberta */
.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  white-space: nowrap;
}
.status:empty { display: none; }
.status::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: #c9c2bb;
}
.status.is-open { color: var(--ink); }
.status.is-open::before {
  background: #6f9a6c;
  animation: status-pulse 2.6s ease-out infinite;
}
@keyframes status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(111, 154, 108, .45); }
  70%  { box-shadow: 0 0 0 7px rgba(111, 154, 108, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 154, 108, 0); }
}

/* ----- Loja ----- */

.page__grid--store { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }

.covers {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 3.2vh, 36px) 0 clamp(18px, 3.2vh, 32px) var(--pad);
}
.covers__stage { position: relative; flex: 1; min-height: 0; touch-action: pan-y; }
.covers__nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding-top: clamp(12px, 2.4vh, 22px);
}
.covers__arrow { padding: 4px 6px; font-size: 14px; letter-spacing: 0; color: var(--muted); transition: color .3s; }
.covers__arrow:hover { color: var(--ink); }
.covers__count { min-width: 9ch; text-align: center; }
.covers__progress {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 120px;
  height: 1px;
  transform: translateX(-50%);
  background: var(--hair);
  overflow: hidden;
}
.covers__progress > span {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Capa de revista: tipografia em unidades da própria capa (cqw) */
.cover {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cw, 360px);
  height: calc(var(--cw, 360px) * 4 / 3);
  margin: calc(var(--cw, 360px) * -2 / 3) 0 0 calc(var(--cw, 360px) / -2);
  container-type: inline-size;
  cursor: pointer;
  transition: transform 1.2s var(--ease-out), filter 1.2s var(--ease-out);
}
.cover[data-pos="0"] { z-index: 3; transform: none; cursor: default; }
.cover[data-pos="-1"] { z-index: 1; transform: translateX(-40%) rotate(-6deg) scale(.8); filter: saturate(.7) brightness(.97); }
.cover[data-pos="1"] { z-index: 2; transform: translateX(40%) rotate(6deg) scale(.8); filter: saturate(.7) brightness(.97); }

.cover__body {
  --rx: 0deg;
  --ry: 0deg;
  --gx: 50%;
  --gy: 30%;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #e9e5e0;
  box-shadow: 0 36px 60px -34px rgba(30, 20, 14, .5), 0 2px 6px rgba(30, 20, 14, .06);
  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .7s var(--ease-out);
}
.cover__img,
.cover__cut {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.cover__img { height: 100%; object-fit: cover; }
.cover__cut { height: auto; z-index: 2; } /* a cabeça da modelo passa à frente do título */

.cover__mast {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 5cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--mast, var(--ink));
  pointer-events: none;
}
.cover__name {
  display: inline-flex;
  align-items: baseline;
  isolation: isolate;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 21cqw;
  line-height: 1;
  letter-spacing: -.025em;
}
.cover__name i { font-style: italic; }
.cover__amp {
  position: relative;
  top: .01em;
  z-index: -1;
  margin: -.3em -.06em;
  font-family: var(--script);
  font-size: 1.2em;
  line-height: 1;
  color: var(--blush);
}
.cover__issue {
  position: absolute;
  z-index: 3;
  left: 4.5cqw;
  right: 4.5cqw;
  top: 1.3cqw;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 1.6cqw;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mast, var(--ink));
}
.cover__issue-by em {
  margin-right: .3em;
  font-family: var(--serif);
  font-size: 1.5em;
  letter-spacing: .02em;
  text-transform: none;
  color: #9a7468;
}
.cover__lines {
  position: absolute;
  z-index: 3;
  left: 5cqw;
  top: 47%;
  width: 29cqw;
  display: grid;
  gap: 5cqw;
  color: var(--lines, var(--ink));
}
.cover__lines--right { left: auto; right: 5cqw; top: 74%; text-align: right; }
.cover__small {
  display: block;
  margin-bottom: 1.2cqw;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 2cqw;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.cover__big { display: block; font-family: var(--serif); font-size: 5cqw; line-height: 1.05; }
.cover__big em, .cover__headline em { font-style: italic; }
.cover__headline {
  position: absolute;
  z-index: 3;
  left: 5cqw;
  bottom: 5cqw;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 10cqw;
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--lines, var(--ink));
}
.cover__headline--corner { max-width: 50cqw; }
.cover__foot { position: absolute; z-index: 3; left: 5cqw; right: 26cqw; bottom: 5cqw; color: #fff; }
.cover__foot .cover__headline { position: static; margin: 1cqw 0 1.8cqw; color: inherit; font-size: 11cqw; }
.cover__small--light { font-weight: 400; letter-spacing: .22em; opacity: .85; }
.cover__barcode {
  position: absolute;
  z-index: 3;
  right: 4.5cqw;
  bottom: 4.5cqw;
  width: 15cqw;
  padding: 1cqw 1.2cqw .5cqw;
  background: #fff;
}
.cover__barcode svg { display: block; width: 100%; fill: #111; }
.cover__barcode text { font-family: var(--sans); font-size: 7px; letter-spacing: .6px; }
.cover__gloss {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(55% 42% at var(--gx) var(--gy), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .7s ease;
}
.cover__body.is-lit .cover__gloss { opacity: 1; }

/* Temas */
.cover--boutique .cover__body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(18, 14, 12, .62), rgba(18, 14, 12, 0) 40%);
  pointer-events: none;
}
.cover--fachada .cover__lines--right { top: 23%; width: 40cqw; }
.cover--fachada .cover__big { font-size: 4.4cqw; }
.cover--fachada .cover__headline--corner { max-width: 62cqw; font-size: 9cqw; color: #fff; }
/* Como na capa Nº 01: a base escurece para o título branco se ler sobre a porta e a calçada */
.cover--fachada .cover__body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(18, 14, 12, .66), rgba(18, 14, 12, 0) 34%);
  pointer-events: none;
}
/* A modelo ocupa quase toda a largura: a coluna da esquerda fica antes da manga (~21cqw) */
.cover--fucsia .cover__lines:not(.cover__lines--right) { width: 16cqw; top: 44%; }
.cover--fucsia .cover__lines:not(.cover__lines--right) .cover__big { font-size: 3.7cqw; }
.cover--fucsia .cover__big { font-size: 4.4cqw; }

/* ----- Informação da loja ----- */

.store {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4.6vh, 56px) var(--pad) clamp(18px, 3.4vh, 36px) clamp(24px, 3.4vw, 64px);
  /* Em janelas baixas o conteúdo não cabe: scroll só nesta coluna (as capas ficam fixas) */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--hair) transparent;
}
.store__title {
  display: inline-flex;
  align-items: baseline;
  isolation: isolate;
  margin-top: 10px;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(44px, 4.6vw, 80px);
  line-height: 1;
  letter-spacing: -.02em;
  outline: none;
}
.store__title em { font-style: italic; }
.store__amp {
  position: relative;
  top: .01em;
  z-index: -1;
  margin: -.3em -.06em;
  font-family: var(--script);
  font-size: 1.2em;
  line-height: 1;
  color: var(--blush);
}
.store__by { margin-top: 18px; font-size: 9.5px; letter-spacing: .34em; color: var(--muted); }
.store__by em {
  margin-right: .2em;
  font-family: var(--serif);
  font-size: 1.45em;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ink);
}
.store__intro {
  max-width: 58ch;
  margin: clamp(14px, 2.6vh, 24px) 0 clamp(14px, 2.8vh, 28px);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--soft);
}
.store__info { margin: 0; }
.store__info > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding: clamp(8px, 1.3vh, 12px) 0;
  border-top: 1px solid var(--hair);
}
.store__info > div:last-child { border-bottom: 1px solid var(--hair); }
.store__info dd { margin: 0; font-size: 14px; line-height: 1.5; }
.store__info .store__phone { font-family: var(--serif); font-size: 21px; line-height: 1.1; letter-spacing: .02em; }
.store__action { justify-self: end; white-space: nowrap; }
.hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.hours li { display: grid; grid-template-columns: 8.6em auto; column-gap: 14px; }
.hours li span { white-space: nowrap; }
.hours li span:first-child { color: var(--soft); font-weight: 300; }
.hours + .status { margin-top: 8px; }
.store__dot { margin: 0 6px; color: var(--muted); }

.store__cards {
  flex: 1;
  min-height: 96px;
  max-height: 210px;
  margin-top: clamp(14px, 2.6vh, 24px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 12px;
}
.store__card { position: relative; margin: 0; overflow: hidden; background: #f2efeb; }
.store__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.store__card:hover img { transform: scale(1.05); }
.store__card figcaption,
.store__map-label {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 9px;
  padding: 5px 8px 4px;
  font-size: 9px;
  letter-spacing: .26em;
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
}
/* O mapa esconde os botões de zoom (canto superior esquerdo) mas mantém a
   atribuição do OpenStreetMap visível no canto inferior direito. */
.store__map iframe {
  position: absolute;
  left: -80px;
  top: -80px;
  width: calc(100% + 120px);
  height: calc(100% + 120px);
  border: 0;
  pointer-events: none;
  filter: grayscale(1) contrast(1.06) brightness(1.04);
}
.store__pin {
  position: absolute;
  z-index: 2;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.store__map-link { position: absolute; inset: 0; z-index: 3; }
.store__map-credit {
  position: absolute;
  z-index: 4;
  right: 6px;
  bottom: 5px;
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--soft);
  background: rgba(255, 255, 255, .8);
  padding: 2px 5px;
}
.store__pin .icon {
  width: 30px;
  height: 30px;
  fill: var(--blush);
  stroke: #fff;
  stroke-width: 1.3;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25));
}

/* ---------- Responsivo ---------- */

@media (max-width: 1100px) {
  .nav-optional, .hint { display: none; }
}

@media (max-width: 760px) {
  :root {
    --rail-w: 78px;
    --head-h: 84px;
    --cap-h: 168px;
  }
  .masthead { grid-template-columns: auto 1fr auto; }
  .masthead__side--left, .hint, .rail__head, .rail__foot, .counter { display: none; }
  .logo { --logo-fs: 32px; grid-column: 1 / 3; justify-self: start; }
  .logo__amp, .loader__amp { font-size: 1.2em; top: .01em; }
  .logo__link { align-items: flex-start; }
  .logo__by { font-size: 7.5px; gap: 8px; }
  .logo__by-line:first-child { display: none; }
  .logo__by-text { padding-left: 0; }

  /* Páginas: uma coluna, com scroll interno */
  .page { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .page__grid, .page__grid--store { display: block; height: auto; }
  .bag, .store { padding: 26px var(--pad) 30px; }
  .reserve { padding: 30px var(--pad) 40px; border-left: 0; border-top: 1px solid var(--hair); }
  .bag__total { margin-top: 20px; }
  .bag-item { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
  .bag-item__remove { grid-column: 2; justify-self: start; }
  .call { align-self: stretch; justify-content: center; flex-wrap: wrap; }
  .call__number { flex-basis: 100%; text-align: center; padding-left: 0; box-shadow: none; }
  .covers { padding: 22px var(--pad) 26px; }
  .covers__stage { flex: none; }
  .caption__add-label { letter-spacing: .16em; }
  .caption__buy { gap: 16px; }
  .store__info > div { grid-template-columns: 74px minmax(0, 1fr); row-gap: 4px; }
  .store__action { grid-column: 2; justify-self: start; }
  .hours li { grid-template-columns: 7.4em minmax(0, 1fr); column-gap: 10px; }
  .store__cards { flex: none; height: 170px; }
  .caption {
    left: var(--pad);
    right: calc(var(--rail-w) + var(--pad));
    width: auto;
    transform: none;
  }
  .caption__title { font-size: 26px; white-space: normal; min-height: 2.08em; display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap; column-gap: .25em; }
  .caption__desc { font-size: 12px; }
  .caption__meta, .caption__kicker { font-size: 9.5px; letter-spacing: .16em; }
  .hud { left: auto; right: calc(var(--rail-w) + var(--pad)); bottom: calc(var(--foot-y) + 4px); }
  .dots { display: none; }
}

@media (max-height: 640px) {
  :root { --cap-h: 132px; }
  .caption__desc { display: none; }
}

/* Portáteis baixos: tudo cabe sem scroll, com texto um pouco mais compacto */
@media (min-width: 761px) and (max-height: 820px) {
  .reserve__text, .store__intro { font-size: 13.5px; line-height: 1.65; }
  .reserve__steps p { font-size: 13px; }
  .store__cards { max-height: 150px; }
  .store__title { font-size: clamp(40px, 3.8vw, 62px); }
  .store__by { margin-top: 12px; }
  .store__intro { margin: 12px 0 14px; }
  .store__info dd { font-size: 13.5px; }
  .bag-item__img { width: 40px; }
}

@media (min-width: 761px) and (max-height: 740px) {
  .store__cards { min-height: 78px; }
  .store__intro { font-size: 13px; line-height: 1.55; }
  .store__title { font-size: clamp(36px, 3.4vw, 52px); }
}

@media (prefers-reduced-motion: reduce) {
  .hint__line::before { animation: none; transform: none; }
  .status.is-open::before { animation: none; }
  .link::after { transition: none; }
}