/* ==========================================================================
   Lista de presentes + checkout
   ========================================================================== */

/* ---------- Abertura ---------- */
.g-intro { padding: calc(var(--header-h) + 56px) 0 40px; }
.g-intro__inner { display: grid; gap: 28px; }
.g-intro__title {
  margin-top: 22px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(52px, 14vw, 150px);
  line-height: .95;
  letter-spacing: -.015em;
}
.g-intro__title em { font-style: italic; }
.g-intro__text .lead { color: var(--ink-soft); max-width: 46ch; }
.g-intro__secure,
.co-secure {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  font-size: 13px;
  color: var(--muted);
}
.g-intro__secure svg, .co-secure svg {
  width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.2;
  /* o corpo do cadeado é a parte pesada: a base dele assenta na linha de base do texto */
  translate: 0 -2px;
}

/* ---------- Filtros ---------- */
.filters {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(241, 235, 227, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.filters__inner {
  display: flex;
  gap: 8px;
  padding-block: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filters__inner::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s;
}
.chip span { opacity: .5; letter-spacing: .05em; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }

/* ---------- Lista ---------- */
.g-list { padding: 24px 0 64px; }
.g-status { padding: 40px 0; text-align: center; color: var(--muted); }
.gift-grid { display: grid; }

.gift {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--line);
}
.gift.is-refresh { animation: gift-in .8s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes gift-in { from { opacity: 0; transform: translateY(18px); } }

.gift__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10; /* mesma proporção da imagem na tela de compra (400x250) */
  align-self: start;
  background: var(--cream-deep);
}
.gift__media > img,
.gift__media > .art { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gift:hover .gift__media > * { transform: scale(1.05); }

/* Arte que substitui a foto enquanto ela não chega */
.art {
  position: relative;
  display: grid;
  place-items: end start;
  padding: 10% 12%;
  color: rgba(35, 33, 29, .7);
  background: var(--art-bg);
  overflow: hidden;
}
.art svg { position: absolute; top: -12%; right: -30%; width: 120%; height: auto; color: #5f574c; fill: currentColor; opacity: .22; }
.art__num { position: relative; font-family: var(--serif); font-style: italic; font-size: clamp(42px, 12vw, 96px); line-height: .8; }
.art--1 { --art-bg: linear-gradient(165deg, #e6ddd2, #cdbfaf); }
.art--2 { --art-bg: linear-gradient(200deg, #ddd5cc, #b9b0a5); }
.art--3 { --art-bg: linear-gradient(150deg, #ebe3d9, #d4c6b4); }
.art--4 { --art-bg: linear-gradient(185deg, #d9d0c4, #c2b6a7); }
.art--2 svg { transform: scaleX(-1); right: auto; left: -30%; }
.art--4 svg { top: auto; bottom: -20%; transform: rotate(160deg); }

.gift__body { display: flex; flex-direction: column; min-width: 0; }
.gift__num { font-size: 10px; font-weight: 500; letter-spacing: .22em; color: var(--muted); }
.gift__title {
  margin-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
}
.gift__desc { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.gift__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-top: auto;
  padding-top: 14px;
}
.gift__price { font-family: var(--serif); font-size: 24px; line-height: 1; white-space: nowrap; }
.gift__price { min-width: 0; }
.gift__price small { display: block; margin-top: 6px; font-family: var(--sans); font-size: 11px; letter-spacing: .06em; color: var(--muted); white-space: normal; }
.gift__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gift__cta svg { width: 20px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform .4s var(--ease); }
.gift:hover .gift__cta svg { transform: translateX(5px); }
.gift__cta::after { content: ""; position: absolute; inset: 0; } /* card todo clicável */
.gift__cta:focus-visible { outline: none; }
.gift:has(.gift__cta:focus-visible) { outline: 1px solid var(--ink); outline-offset: 6px; }

.gift.is-complete .gift__media { filter: grayscale(1) opacity(.6); }
.gift.is-complete .gift__cta { color: var(--muted); }
.gift__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 6px 10px;
  background: var(--paper);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---------- Barra de cotas ---------- */
.quota { margin-top: 14px; }
.quota__bar { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: 4px; }
.quota__bar i {
  height: 6px;
  background: rgba(35, 33, 29, .12);
  position: relative;
  overflow: hidden;
}
.quota__bar i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--ease-out);
  transition-delay: calc(var(--k, 0) * 90ms + .2s);
}
.quota__bar i.is-sold::after { transform: scaleX(1); }
.quota__bar i.is-pick::after { transform: scaleX(1); background: repeating-linear-gradient(-45deg, var(--ink) 0 3px, transparent 3px 6px); transition-delay: 0s; }
.quota__info { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--ink-soft); }
.quota__info strong { font-weight: 500; color: var(--ink); }

/* ---------- Seção de cotas ---------- */
.g-quotas { background: var(--cream-deep); padding: 72px 0 80px; }
.g-quotas__head { max-width: 640px; margin-bottom: 28px; }
.g-quotas__head .title-italic { margin: 18px 0; font-size: clamp(40px, 10.5vw, 84px); }
.g-quotas__head p:not(.eyebrow) { font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.gift-grid--quotas .gift { border-color: rgba(35, 33, 29, .12); }

/* ==========================================================================
   CHECKOUT (painel lateral / folha inferior)
   ========================================================================== */
/* a barra de rolagem continua reservando espaço quando a página trava: nada pula de lado */
html { scrollbar-gutter: stable; }
/* a animação de abrir/fechar fica no presentes.js (Web Animations).
   overflow: clip (e não hidden): o painel começa fora da tela e, com hidden, o navegador
   rolava a camada para mostrar o botão que recebe o foco — o painel "aparecia" sem deslizar. */
.sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: clip;
}
/* véu escuro separado: só muda a opacidade (leve para o navegador animar) */
.sheet__veil { position: absolute; inset: 0; background: rgba(35, 33, 29, .5); opacity: 0; will-change: opacity; }
.sheet::backdrop { background: transparent; }
.sheet-lock { overflow: hidden; }

.sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 94svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  transform: translateY(100%);
  will-change: transform;
}

.sheet__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 14px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.sheet__close { width: 44px; height: 44px; display: grid; place-items: center; transition: transform .4s var(--ease); }
.sheet__close:hover { transform: rotate(90deg); }
.sheet__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom)); }

.steps { display: flex; gap: 16px; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.steps li { display: flex; align-items: center; gap: 7px; transition: color .4s; }
.steps span {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  letter-spacing: 0;
  transition: background-color .4s, color .4s, border-color .4s;
}
.steps b { font-weight: 500; white-space: nowrap; }
@media (max-width: 599px) { .steps li:not(.is-current) b { display: none; } }
.steps li.is-current { color: var(--ink); }
.steps li.is-current span { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.steps li.is-done { color: var(--ink-soft); }
.steps.is-hidden { visibility: hidden; }

.view { animation: view-in .6s var(--ease-out) both; }
.view.is-back { animation-name: view-in-back; }
@keyframes view-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes view-in-back { from { opacity: 0; transform: translateX(-24px); } }
.view--center { display: grid; justify-items: center; text-align: center; gap: 16px; padding: 24px 0 8px; }
.view__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 34px; line-height: 1.05; }
.view__title--big { font-size: clamp(38px, 10vw, 52px); }
.view__lead { font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 40ch; }
.view [data-view] .view__lead, .view > .view__lead { margin-top: 8px; }
.view__actions { margin-top: 32px; }
.view__actions--split { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.view__actions--split .btn { white-space: nowrap; padding-inline: 26px; gap: 14px; }
.view__actions--stack { display: grid; gap: 10px; width: 100%; max-width: 360px; margin-inline: auto; margin-top: 16px; }
.view--center .view__actions--stack { margin-top: 18px; }

/* Presente no checkout */
.co-gift { display: grid; gap: 6px; }
.co-gift__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 14px; background: var(--cream-deep); }
/* reações: cada nova ilustração entra por cima da anterior com um fade */
.co-react { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.015); transition: opacity .45s var(--ease), transform .6s var(--ease-out); }
.co-react.is-in { opacity: 1; transform: none; }
.co-gift__media > img, .co-gift__media > .art { width: 100%; height: 100%; object-fit: cover; }
.co-gift__media .art { place-items: center start; padding: 0 8%; }
.co-gift__media .art__num { font-size: 88px; }
.co-gift__num { font-size: 10px; font-weight: 500; letter-spacing: .22em; color: var(--muted); }
.co-gift__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 32px; line-height: 1.05; }
.co-gift__desc { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

.co-quota { margin-top: 24px; padding-top: 4px; }
.co-quota__pick { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.co-quota__pick .field__label { margin-bottom: 2px; }
.co-quota__each { font-size: 13px; color: var(--muted); }

.co-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.co-total span { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.co-total strong { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; }

/* Dados */
.co-form { display: grid; gap: 28px; margin-top: 28px; }

/* Pagamento */
.choice--pay { margin-top: 22px; grid-template-columns: 1fr; }
.choice--pay .choice__opt > span { min-height: 72px; }
.choice--pay .choice__opt svg { width: 24px; height: 24px; opacity: .8; stroke-width: 1.2; }
.choice--pay .choice__opt > span > span { display: block; font-size: 17px; }

.co-summary { margin: 26px 0 0; display: grid; gap: 10px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.co-summary div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; font-size: 14px; }
.co-summary dt { color: var(--muted); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding-top: 2px; }
.co-summary dd { margin: 0; }
.co-summary__total { align-items: baseline; margin-top: 6px; }
.co-summary__total dd { font-family: var(--serif); font-size: 28px; line-height: 1; }
.co-secure { margin-top: 18px; line-height: 1.5; }

/* Carregando */
.loader { display: flex; gap: 8px; height: 64px; align-items: center; }
.loader span { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: dot 1.2s var(--ease) infinite; }
.loader span:nth-child(2) { animation-delay: .15s; }
.loader span:nth-child(3) { animation-delay: .3s; }
.loader--still span { animation-duration: 2.4s; opacity: .5; }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: .3; } 40% { transform: translateY(-10px); opacity: 1; } }

.x-draw { width: 64px; height: 64px; fill: none; stroke: var(--error); stroke-width: 1.2; stroke-linecap: round; }
.x-draw circle { stroke-dasharray: 190; stroke-dashoffset: 190; animation: draw 1s var(--ease-out) forwards; }
.x-draw path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .5s var(--ease-out) .6s forwards; }

.demo-tag {
  padding: 6px 12px;
  border: 1px dashed var(--line-strong);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   TABLET
   ========================================================================== */
@media (min-width: 600px) {
  .gift-grid { grid-template-columns: repeat(2, 1fr); column-gap: 28px; row-gap: 48px; }
  .gift { grid-template-columns: 1fr; gap: 18px; padding: 0; border: 0; }
  .gift__title { font-size: 26px; }
  .g-list { padding-top: 48px; }
  .choice--pay { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   DESKTOP
   ========================================================================== */
@media (min-width: 900px) {
  .g-intro { padding: calc(var(--header-h) + 96px) 0 72px; }
  .g-intro__inner { grid-template-columns: 7fr 5fr; column-gap: clamp(48px, 7vw, 120px); align-items: end; }
  .filters__inner { padding-block: 16px; }
  .g-list { padding: 64px 0 120px; }
  .gift-grid { grid-template-columns: repeat(3, 1fr); column-gap: clamp(28px, 3vw, 48px); row-gap: 72px; }
  .gift__desc { font-size: 15px; }
  .g-quotas { padding: 140px 0 150px; }
  .g-quotas__head { margin-bottom: 64px; }
  .g-quotas__head p:not(.eyebrow) { font-size: 17px; }

  /* Checkout vira painel lateral */
  .sheet__panel {
    left: auto;
    top: 0;
    width: min(540px, 100%);
    max-height: none;
    transform: translateX(100%);
  }
  .sheet__head { padding: 20px 24px 20px 48px; }
  .sheet__body { padding: 40px 48px 48px; }
  .co-gift__title { font-size: 38px; }
  .view__title { font-size: 40px; }
}