/* ===== LOJA CLARA (30/10/2026, noite) =====
   Os vídeos da loja agora são claros: baixo-relevo marfim com um brilho dourado passando em cada peça
   (fontes em assets/biblioteca/loja_clara/; no site, media/lojaclara_*). Carregado DEPOIS de shop-hibrido.css.
   Texto escuro (azul-noite + cobre) sobre um véu marfim, posto na área vazia de cada vídeo:
   vídeos deitados (abertura, topo das coleções, faixas do celular) = esquerda livre;
   vídeos em pé (cartões das coleções no PC) = topo livre.
   Para voltar ao visual escuro: tirar o <link> deste arquivo e voltar o VID do shop.js para loja_*. */
body.obs { --lc-ink: #141a33; --lc-ink2: #3a3f55; --lc-cobre: #8a6420; --lc-veu: 250, 246, 238; }

/* cabeçalho: faixa azul-noite sólida (o logo dourado e os links brancos sumiam sobre o vídeo claro) */
/* faixa do topo: vidro fosco escuro (2/11), regra em css/shop-hibrido.css */

/* abertura da loja e topo de cada coleção */
body.obs .obs-hero .obs-vid, body.obs .obs-col .obs-vid { filter: none; background: rgb(var(--lc-veu)); }
body.obs .obs-hero { background: rgb(var(--lc-veu)); }
body.obs .obs-hero::after { background: linear-gradient(90deg, rgba(var(--lc-veu), .92) 0%, rgba(var(--lc-veu), .66) 32%, rgba(var(--lc-veu), 0) 56%); }
body.obs .obs-hero__in { max-width: none; margin: 0; padding-left: clamp(28px, 6vw, 110px); padding-right: 50%; text-align: left; text-shadow: none; }
body.obs .obs-hero h1 { color: var(--lc-ink); margin: 0; max-width: 11ch; }
body.obs .obs-hero .obs-label { color: var(--lc-cobre); }
body.obs .obs-hero__sub { color: var(--lc-ink2); margin: 22px 0 0; }
body.obs .obs-hero__cta { justify-content: flex-start; }
body.obs .obs-hero .obs-btn--line { border-color: rgba(20, 26, 51, .45); color: var(--lc-ink); }
body.obs .obs-hero .obs-btn--line:hover { border-color: var(--lc-cobre); color: var(--lc-cobre); }
body.obs .obs-scroll i { background: linear-gradient(var(--lc-cobre), transparent); }

/* cartões das coleções (PC: em pé, título no topo vazio) */
body.obs .obs-col { color: var(--lc-ink); background: rgb(var(--lc-veu)); }
body.obs .obs-col .obs-vid { object-position: 50% 100%; }   /* peças embaixo, inteiras; o topo vazio fica atrás do título */
body.obs .obs-col::after { background: linear-gradient(180deg, rgba(var(--lc-veu), .9) 0%, rgba(var(--lc-veu), .6) 30%, rgba(var(--lc-veu), 0) 54%); }
body.obs .obs-col__in { top: 0; bottom: auto; text-shadow: none; }
body.obs .obs-col__n { color: var(--lc-cobre); }
body.obs .obs-col p { color: var(--lc-ink2); }
body.obs .obs-col__go { color: var(--lc-cobre); }
body.obs .obs-paths .obs-col__in { text-align: center; }

@media (max-width: 760px) {
  /* abertura e topo das coleções no celular: vídeo em pé (topo livre, peças embaixo) → texto no topo, sobre véu marfim */
  body.obs .obs-hero::after { background: linear-gradient(180deg, rgba(var(--lc-veu), .94) 0%, rgba(var(--lc-veu), .84) 46%, rgba(var(--lc-veu), 0) 72%); }
  body.obs:not([data-page="product"]) .obs-hero { align-items: start; }
  body.obs .obs-hero .obs-vid { animation: none; }   /* sem o zoom de entrada: a tela do celular já corta as laterais do vídeo em pé */
  body.obs:not([data-page="product"]) .obs-hero__in { padding: 128px var(--gut) 0; text-align: center; }
  body.obs .obs-catnav--over a:not([aria-current]) { background: rgba(20, 26, 51, .8); }
  body.obs .obs-hero h1, body.obs .obs-hero__sub { margin-left: auto; margin-right: auto; }
  body.obs .obs-hero__cta { justify-content: center; }
  /* (30/10, pedido do Arthur) topo de cada coleção ocupa a tela toda do celular; peças embaixo, inteiras */
  body.obs:not([data-page="product"]) .obs-hero--cat { min-height: 100svh; }
  body.obs .obs-hero .obs-vid { object-position: 50% 100%; }
  /* as 6 coleções da loja (#obs-cols): cada uma ocupa a tela toda, com o vídeo em pé; título no topo claro, peças embaixo */
  body.obs #obs-cols { gap: 2px; padding: 0; }
  body.obs #obs-cols .obs-col { aspect-ratio: auto; height: 100svh; border-radius: 0; }
  body.obs .obs-col .obs-vid { object-position: 50% 100%; }
  body.obs .obs-col::after { background: linear-gradient(180deg, rgba(var(--lc-veu), .94) 0%, rgba(var(--lc-veu), .8) 30%, rgba(var(--lc-veu), 0) 52%); }
  body.obs #obs-cols .obs-col__in { top: 0; bottom: auto; display: block; max-width: none; padding: 34px var(--gut) 0; text-align: center; }
  body.obs #obs-cols .obs-col h3 { font-size: 2.4rem; margin-bottom: 10px; }
  body.obs #obs-cols .obs-col p { display: block; font-size: 1rem; margin: 0 auto 16px; }
  body.obs #obs-cols .obs-col__go { display: inline-block; font-size: 1rem; }
  /* "Other paths / Keep exploring": quadradinhos no formato do vídeo em pé (9:16), imagem inteira, texto centrado no topo claro */
  body.obs .obs-paths .obs-cols__row--2 { scroll-padding-inline: var(--gut); }   /* o encaixe da rolagem respeita a margem (o 1º não cola na borda) */
  body.obs .obs-paths .obs-cols__row--2 .obs-col { flex: 0 0 46vw; aspect-ratio: 9 / 16; height: auto; }
  body.obs .obs-paths .obs-col::after { background: linear-gradient(180deg, rgba(var(--lc-veu), .94) 0%, rgba(var(--lc-veu), .7) 26%, rgba(var(--lc-veu), 0) 46%); }
  body.obs .obs-paths .obs-col__in { top: 0; bottom: auto; padding: 16px 10px 0; text-align: center; }
  body.obs .obs-paths .obs-col h3 { font-size: 1.15rem; margin-bottom: 6px; }
}
}

/* ===== PORTAL STONE (30/10, pedido do Arthur: o quadradinho em linha estava "muito feio") =====
   Vídeo do Cubo de Metatron em ouro real sobre azul-marinho (media/portal_metatron_*), feito no Flow em 16:9 e 9:16.
   O quadradinho entre os produtos usa o vídeo em pé; o texto fica embaixo, na parte escura vazia. */
body.obs .etile--video { background: #0b1230; color: #f1eadb; }
body.obs .etile--video .obs-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; background: #0b1230; }   /* (30/10, v2) vídeo em pé já vem com o Metatron no alto: sem encolher por código */
body.obs .etile--video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 18, 48, 0) 46%, rgba(11, 18, 48, .82) 74%, #0b1230 100%); }
body.obs .etile--video > :not(video) { position: relative; z-index: 1; }
body.obs .etile--video h3 { color: #f1eadb; }
body.obs .etile--video p { color: rgba(241, 234, 219, .82); }
body.obs .etile--video span { color: #e8c28a; }
/* palco "Every sign has its stone": o vídeo já é escuro, sem o clareamento do shop-hibrido */
body.obs .obs-stage__media .obs-vid { filter: none; background: #0b1230; }
body.obs .obs-stage { background: #0b1230; }   /* o lado do texto no mesmo azul-marinho do vídeo do Metatron */
@media (max-width: 760px) {
  body.obs .obs-stage__media { min-height: 0; aspect-ratio: 9 / 16; }
  body.obs .etile--video .obs-vid { object-fit: contain; object-position: 50% 0%; }   /* quadradinho estreito: o vídeo inteiro na largura, Metatron no alto, texto no azul de baixo */
  body.obs .obs-stage__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, rgba(11, 18, 48, 0), #0b1230); }   /* emenda o pé do vídeo no azul do texto */   /* celular: caixa no formato do vídeo em pé, o Metatron aparece inteiro */
}

/* ===== PALCO "Every sign has its stone" no PC (31/10, pedido do Arthur: o Metatron no meio atrapalhava as palavras) =====
   Vídeo de ponta a ponta com o Metatron do lado ESQUERDO (media/portal_metatron_lado_pc.mp4) e o texto à direita, sobre o azul vazio. */
@media (min-width: 961px) {
  body.obs .obs-stage { position: relative; display: block; min-height: min(56.25vw, 92vh); overflow: hidden; }
  body.obs .obs-stage__media { position: absolute; inset: 0; min-height: 0; }
  body.obs .obs-stage__media .obs-vid { object-position: 25% 50%; }
  body.obs .obs-stage__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 18, 48, 0) 45%, rgba(11, 18, 48, .55) 100%); }   /* firma o azul atrás do texto */
  body.obs .obs-stage__text { position: relative; z-index: 1; margin-left: 52%; min-height: min(56.25vw, 92vh); display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 5vw, 80px) clamp(28px, 6vw, 110px) clamp(40px, 5vw, 80px) 0; }
  body.obs .obs-stage__text .obs-btn { align-self: flex-start; }
}

/* vídeo da página do produto no celular: caixa em pé, para o vídeo 9:16 aparecer inteiro (31/10, fotos e vídeos novos dos produtos) */
@media (max-width: 760px) {
  body.obs .pd-video-wrap { aspect-ratio: 9 / 16; max-height: 82svh; margin: 0 auto; }
  /* (3/11) banner mais baixo (pedido do Arthur): caixa 4:5 que corta só o fundo vazio de cima e de baixo do vídeo em pé, sem esticar */
  body.obs .pd-video-sec .pd-video-wrap { aspect-ratio: 4 / 5; max-height: none; width: 100%; }
  body.obs .pd-video-sec .pd-video-player { object-position: 50% 74%; }
}

/* galeria do produto com muitas fotos: as miniaturas rolam de lado em vez de alargar a página (31/10, produtos com 5-8 fotos) */
.pd__gallery { min-width: 0; }
.pd__thumbs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pd__thumbs::-webkit-scrollbar { display: none; }
.pd__thumbs .pd__thumb { flex: 0 0 auto; }

/* faixa "In Motion" da página do produto (2/11): vídeo em loop sem controles e botão com o texto centralizado */
.pd-video-wrap { position: relative; width: 100%; }
.pd-video-player { pointer-events: none; }
/* (3/11) nem o botão grande de "play" do celular aparece: o vídeo só roda em loop */
.pd-video-player::-webkit-media-controls,
.pd-video-player::-webkit-media-controls-panel,
.pd-video-player::-webkit-media-controls-overlay-play-button,
.pd-video-player::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; opacity: 0 !important; }
.pd-video-text .pd-video-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 16px;
  min-height: 52px; padding: 0 32px; line-height: 1; text-align: center; }

/* depoimentos (2/11): carrossel na largura toda, cards menores, sem barra de rolagem; arrasta com mouse/dedo; setas e barrinha embaixo */
#app { overflow-x: clip; }
.reviews-carousel { margin-inline: calc(50% - 50vw); }
.reviews-track { gap: 14px; padding: 4px max(16px, calc(50vw - 590px)) 10px; scroll-padding-inline: max(16px, calc(50vw - 590px));
  scrollbar-width: none; cursor: grab; user-select: none; }
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.reviews-track.is-drag .review-card { pointer-events: none; }
.reviews-track .review-card { flex: 0 0 clamp(220px, 70vw, 260px); padding: 16px; gap: 10px; border-radius: 12px; }
.reviews-track .review-card:hover { transform: none; }
.review-card__media { margin: -16px -16px 4px; border-radius: 12px 12px 0 0; aspect-ratio: 1 / 1; background: #e9e2d4; }
.review-card__title { font-size: .95rem; }
.review-card__quote { font-size: .84rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.review-card__author { font-size: .76rem; padding-top: 8px; margin-top: auto; }
.review-card__badge { font-size: .68rem; }
.review-card__media--video { cursor: pointer; }
.review-card__media--video video { cursor: pointer; }
.review-card__play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.88); color: #141a33; font-size: 18px; padding-left: 4px; pointer-events: none; transition: opacity .2s; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.review-card__media--video.is-playing .review-card__play { opacity: 0; }
.rv-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.rv-nav .rv-arrow { position: static; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(20,26,51,.18); background: #fff; color: #141a33; font-size: 22px; line-height: 1; cursor: pointer; transition: opacity .2s, background .2s; }
.rv-nav .rv-arrow:hover:not(:disabled) { background: #141a33; color: #fff; }
.rv-nav .rv-arrow:disabled { opacity: .35; cursor: default; }
.rv-bar { position: relative; width: min(220px, 40vw); height: 3px; border-radius: 3px; background: rgba(20,26,51,.12); overflow: hidden; }
.rv-bar i { position: absolute; top: 0; height: 100%; border-radius: 3px; background: #141a33; transition: left .15s linear; }
.reviews-note { text-align: center; margin-top: 10px; }

/* ===== página de pré-sell (2/11): faixa de confiança, intro com foto, pedras, ritual, para quem é, chamadas de compra ===== */
.ps-sec { padding-top: clamp(40px, 6vw, 72px); }
.ps-h { font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15; color: #141a33; margin: 6px 0 14px; }
.ps-p { font-size: 1rem; line-height: 1.7; color: rgba(20,26,51,.82); margin: 0 0 12px; max-width: 60ch; }
.ps-head { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.ps-head .ps-p { margin-inline: auto; }
.ps-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 28px; padding: 16px; border-radius: 14px; background: #f6f0e4; border: 1px solid rgba(220,183,102,.35); }
.ps-trust div { display: flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 500; color: #141a33; justify-content: center; text-align: left; }
.ps-trust svg { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: #b08a3e; stroke-width: 1.6; }
.ps-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.ps-img { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 18px 40px rgba(20,26,51,.12); }
.ps-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-stones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ps-stone { background: #fff; border: 1px solid rgba(20,26,51,.1); border-radius: 16px; padding: 26px 22px; text-align: center; }
.ps-orb { display: block; width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 32%), radial-gradient(circle at 45% 40%, var(--c) 0 50%, color-mix(in srgb, var(--c) 62%, #000) 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.22), inset 0 -6px 12px rgba(0,0,0,.35); }
.ps-stone__role { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 600; color: #b08a3e; margin: 0 0 4px; }
.ps-stone h3 { font-family: 'Cinzel', serif; font-size: 1.25rem; color: #141a33; margin: 0 0 10px; }
.ps-stone p { font-size: .93rem; line-height: 1.6; color: rgba(20,26,51,.78); margin: 0; }
.ps-ritual .ps-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: none; }
.ps-steps li { position: relative; background: #0b1230; color: #f2eee3; border-radius: 16px; padding: 28px 24px 24px; }
.ps-num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #dcb766; color: #141a33; font-weight: 700; margin-bottom: 14px; }
.ps-steps h3 { font-family: 'Cinzel', serif; font-size: 1.15rem; margin: 0 0 8px; color: #f2eee3; }
.ps-steps p { font-size: .92rem; line-height: 1.6; color: rgba(242,238,227,.8); margin: 0; }
.ps-checks { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 12px; }
.ps-checks li { position: relative; padding-left: 34px; font-size: 1rem; line-height: 1.5; color: #141a33; }
.ps-checks li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: #e8f0e4; color: #3d6b3a; font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
.ps-cta { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; background: #f6f0e4; border: 1px solid rgba(220,183,102,.4); border-radius: 20px; padding: clamp(20px, 3vw, 32px); }
.ps-cta img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.ps-cta__price { margin: 4px 0 16px; font-size: 1rem; color: #141a33; }
.ps-cta__price b { font-size: 1.5rem; }
.ps-cta__price .stars { color: #d4a34b; margin-left: 10px; letter-spacing: 2px; }
.ps-cta__price small { color: rgba(20,26,51,.6); }
.ps-final { text-align: center; max-width: 680px; margin: 0 auto; padding: clamp(28px, 4vw, 44px); border-radius: 20px; background: #0b1230; }
.ps-final .ps-h { color: #f2eee3; }
.ps-final .ps-p { color: rgba(242,238,227,.8); margin-inline: auto; }
.ps-final .disclose { color: rgba(242,238,227,.55); margin-top: 14px; font-size: .78rem; }
.pd-buy-link { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 34px; line-height: 1; }
@media (max-width: 760px) {
  .ps-trust { grid-template-columns: 1fr 1fr; }
  .ps-trust div { justify-content: flex-start; font-size: .8rem; }
  .ps-split, .ps-stones, .ps-ritual .ps-steps { grid-template-columns: 1fr; }
  .ps-split--rev .ps-img { order: -1; }
  .ps-img { aspect-ratio: 4 / 3; }
  .ps-cta { grid-template-columns: 1fr; text-align: center; }
  .ps-cta img { max-width: 200px; margin: 0 auto; }
  .pd-buy-link { width: 100%; }
}
.ps-trust + .pd-video-sec { padding-top: 36px; margin-top: 0; }
@media (max-width: 760px) {
  .ps-stones { gap: 12px; }
  .ps-stone { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; text-align: left; padding: 18px; align-items: start; }
  .ps-stone .ps-orb { grid-row: 1 / span 3; width: 56px; height: 56px; margin: 4px 0 0; }
  .ps-stone h3 { margin-bottom: 6px; }
}

/* banners azul-marinho da página do produto no mesmo vidro cinza da faixa do topo (2/11, pedido do Arthur) */
.pd-video-card, .ps-steps li, .ps-final {
  background: rgba(66, 67, 74, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
  border: 1px solid rgba(255, 255, 255, .06);
}
.pd-video-card .eyebrow { color: #f0d48e; }

/* 3/11: com Self-care e Sound o menu de cima tem 11 abas; entre 961 e 1240px o botão "Menu" saía da tela (rolagem lateral). Compacta só nessa faixa. */
@media (min-width: 961px) and (max-width: 1240px) {
  .obs-top { gap: 14px; }
  .obs-top .obs-nav { gap: 12px; font-size: 15px; }
  .obs-top .obs-toplink { padding-inline: 12px; }
}

/* presell: prêmios e reconhecimentos (3/11) */
.ps-award-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.ps-award { background: #fff; border: 1px solid rgba(176,138,62,.35); border-radius: 16px; padding: 24px 22px; text-align: center; }
.ps-award svg { width: 34px; height: 34px; stroke: #b08a3e; fill: none; stroke-width: 1.6; margin: 0 auto 10px; display: block; }
.ps-award__by { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #8a6a2c; margin: 0 0 6px; }
.ps-award h3 { font-family: 'Cinzel', serif; font-size: 1.12rem; color: #141a33; margin: 0 0 8px; }
.ps-award p { font-size: .92rem; line-height: 1.55; color: rgba(20,26,51,.78); margin: 0; }
@media (max-width: 760px) { .ps-award-list { gap: 12px; } .ps-award { padding: 18px; } }
@media (min-width: 761px) { .ps-award-list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; } }

/* "Other paths" com 7-8 cards no desktop: títulos cabem no card (antes "frequencies" estourava a borda) */
@media (min-width: 761px) {
  body.obs .obs-paths .obs-col__in { padding: 16px 8px 18px; }
  body.obs .obs-paths .obs-col h3 { font-size: clamp(.92rem, 1.3vw, 1.45rem); line-height: 1.08; margin-bottom: 8px; overflow-wrap: anywhere; hyphens: auto; }
  body.obs .obs-paths .obs-col__go { font-size: .6rem; letter-spacing: .12em; }
  body.obs .obs-paths .obs-cols__row--2 { gap: 10px; }
  body.obs .obs-paths .obs-cols__row--2 .obs-col { aspect-ratio: 3 / 4.3; }
}
/* coleção atual na faixa "All paths": mais apagada, marcada "You are here" */
body.obs .obs-paths .obs-col--here { outline: 1px solid rgba(138, 100, 32, .55); outline-offset: -1px; }
body.obs .obs-paths .obs-col--here .obs-col__go { border-bottom-color: transparent; opacity: .8; }

/* aviso visível na compra (4/11): ex.: Shakti, loja parceira só no Reino Unido/Europa */
.pd-notice { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(138, 100, 32, .35); border-radius: 10px;
  background: rgba(216, 178, 106, .12); font-size: .86rem; line-height: 1.5; color: inherit; }
.pd-notice b { display: block; margin-bottom: 2px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #8a6420; }