/* =============================================================
   LOJA — cards de produto, modal de detalhes e acessórios
   O conteúdo vem de assets/data/produtos-data.js (editado pelo
   painel /admin) e é montado pelo js/loja.js.
   ============================================================= */

/* ---------- Card de produto ---------- */
.product { display: flex; flex-direction: column; }

/* Quadrado de propósito: o cliente sobe arte de promoção na vertical (~4:5),
   e no quadrado ela aparece grande sem dominar o card. */
.product__media {
  position: relative; aspect-ratio: 1/1;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, #EAF6FE, #D4ECFb);
  display: grid; place-items: center;
  margin-bottom: 1.2rem; overflow: hidden;
}
.product__media svg { width: 70%; height: 70%; transition: transform var(--t-med); }

/* Truque do "blur-fill": a mesma foto entra duas vezes — .pm-bg desfocada
   preenchendo o quadro e .pm-fg nítida e INTEIRA por cima. Resolve foto de
   qualquer proporção sem cortar nada e sem sobra branca (que o cliente
   achou feia quando era só `contain`).

   As duas são position:absolute de propósito: o .product__media é grid com
   place-items:center, e uma <img> com height:100% ali dentro transborda e
   é cortada pelo overflow — o `contain` sozinho NÃO resolve. */
.product__media .pm-bg, .media-frame .pm-bg, .pmodal__media .pm-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  opacity: .5; transform: scale(1.2); filter: blur(20px) saturate(1.3);
}
.product__media .pm-fg, .media-frame .pm-fg, .pmodal__media .pm-fg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; z-index: 1;
}
.product__media .pm-fg { padding: 10px; transition: transform var(--t-med); }
.media-frame .pm-fg    { padding: clamp(16px, 3vw, 32px); }
.pmodal__media .pm-fg  { padding: 14px; }
.product:hover .product__media .pm-fg { transform: scale(1.05); }
.product:hover .product__media svg   { transform: translateY(-6px) scale(1.04); }

/* z-index 3 pra etiqueta ficar na frente da foto (a .pm-fg é z-index 1) */
.product__tag {
  position: absolute; z-index: 3; top: .8rem; left: .8rem;
  background: var(--grad-cta); color: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  box-shadow: 0 4px 12px rgba(6,40,74,.25);
}

/* Nome/marca são cortados com reticências pra texto longo do painel
   nunca quebrar o card. A descrição NÃO é cortada (o cliente reclamou):
   quem tem texto longo ganha o botão "Ver mais detalhes" e abre o modal. */
.product__brand {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-blue-500);
}
.product h3 {
  font-size: 1.18rem; margin: .2rem 0 .4rem;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.product__desc { font-size: .92rem; margin: .35rem 0 .2rem; }

.product__price { margin-top: auto; padding-top: 1rem; display: flex; align-items: baseline; gap: .4rem; }
.product__price .val { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--c-navy); }
.product__price .cur { font-weight: 600; color: var(--muted); }
.product__price .consult { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--c-blue-700); }
.product__buy { margin-top: 1rem; width: 100%; font-size: .92rem; padding: .72rem 1rem; }

/* Flex em vez de grid: centraliza sozinho com qualquer quantidade de
   produtos (3, 4, 5…) sem deixar buraco na última linha. */
.products-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.1rem, 2.4vw, 1.9rem); }
.products-grid > .product { flex: 1 1 240px; max-width: 300px; }

.product.is-clickable { cursor: pointer; }
.product__more {
  align-self: flex-start; margin: .15rem 0 0; padding: 0;
  background: none; border: none; cursor: pointer;
  color: var(--c-blue-700); font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .9rem;
  display: inline-flex; align-items: center; gap: .25rem;
  transition: color var(--t-fast);
}
.product__more::after { content: '›'; font-size: 1.15em; line-height: 1; }
.product__more:hover { color: var(--c-orange); }

/* ---------- Modal de detalhes ----------
   Abre um "quadradinho" em cima da página (não navega pra outra tela). */
.pmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.2rem; }
.pmodal[hidden] { display: none; }
.pmodal__backdrop {
  position: absolute; inset: 0; background: rgba(5,26,48,.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: pmFade .25s ease;
}
.pmodal__box {
  position: relative; z-index: 1;
  width: min(560px, 100%); max-height: 90vh; overflow: auto;
  background: #fff; border-radius: var(--r-lg);
  box-shadow: 0 40px 90px rgba(4,20,40,.5);
  animation: pmPop .3s var(--ease);
}
.pmodal__x {
  position: absolute; top: .65rem; right: .65rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ink);
  font-size: 1.55rem; line-height: 1; display: grid; place-items: center;
  box-shadow: var(--shadow-sm); transition: background var(--t-fast);
}
.pmodal__x:hover { background: #EAF1F7; }
.pmodal__media {
  position: relative; aspect-ratio: 16/10;
  background: linear-gradient(160deg,#EAF6FE,#D4ECFb);
  display: grid; place-items: center; overflow: hidden;
}
.pmodal__media svg { width: 46%; height: 72%; }
.pmodal__media.has-img { aspect-ratio: 4/3; max-height: 380px; }
.pmodal__body { padding: clamp(1.3rem, 3.5vw, 2rem); }
.pmodal__brand { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-blue-500); }
.pmodal__name { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: .2rem 0 .5rem; }
.pmodal__price { margin-bottom: .9rem; display: flex; align-items: baseline; gap: .4rem; }
.pmodal__price .val { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--c-navy); }
.pmodal__price .cur { font-weight: 600; color: var(--muted); }
.pmodal__price .consult { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--c-blue-700); }
.pmodal__desc { color: var(--ink); font-size: 1.04rem; line-height: 1.7; margin-bottom: 1.5rem; }
.pmodal__buy { width: 100%; }

@keyframes pmFade { from { opacity: 0; } }
@keyframes pmPop  { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  .pmodal__backdrop, .pmodal__box { animation: none !important; }
}

/* ---------- Acessórios ---------- */
/* Ilustração genérica quando o acessório ainda não tem foto cadastrada */
.acc-illus { display: grid; place-items: center; gap: .8rem; width: 100%; height: 100%; padding: 2rem; }
.acc-illus svg { width: clamp(88px, 26%, 140px); height: auto; }
.acc-illus span {
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.05rem;
  color: #EAF6FE; text-align: center; text-shadow: 0 2px 10px rgba(4,20,40,.35);
}
.acc-benefits { display: grid; gap: 1.1rem; margin-top: 1.7rem; }
.acc-price { margin-top: 1.5rem; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--c-navy); }
.acc-price .cur { font-weight: 600; color: var(--muted); font-size: 1.05rem; }

/* No celular a foto precisa entrar ENTRE a descrição e os benefícios
   (pedido do cliente). O .split__text não tem estilo de caixa nenhum, então
   `display:contents` dissolve o wrapper e promove .acc-head/.acc-body a itens
   do grid — aí o `order` intercala a foto no meio. No desktop nada muda.
   A especificidade extra (.split.acc-split) garante a ordem mesmo contra a
   regra genérica `.split--rev .split__media { order: 0 }` do 07-componentes. */
@media (max-width: 980px) {
  .acc-split { gap: 1.5rem; }
  .acc-split .split__text { display: contents; }
  .split.acc-split .acc-head   { order: 1; }
  .split.acc-split .split__media { order: 2; }
  .split.acc-split .acc-body   { order: 3; }
  /* o respiro entre os blocos já vem do gap — zera a margem do 1º item
     (normalmente .acc-benefits; pode ser o preço ou o botão se não houver) */
  .acc-split .acc-body > :first-child { margin-top: 0; }
}