/* DevMods Bind — ajustes de apresentação sobre o modelo servido (hub6-studio.html).
 * Entra depois do CSS do modelo; só corrige, não redesenha. */

/* Resumo do carrinho (drawer e página): Subtotal, economia da promoção e
 * aviso de cupom. O aviso separa os valores do botão. */
[data-hub6-tl="eco"] {
  font: 500 14px var(--body);
  color: var(--hub6-text-secondary);
}
#dw .df .hub6-nota {
  margin: 10px 0 20px;
}
.co-side .hub6-nota {
  margin-top: 10px;
  font-size: 13px;
  color: var(--hub6-text-secondary);
}

/* Minha conta: estado vazio (pedidos, downloads, último pedido) ocupa a
 * largura da coluna como os outros painéis; o limite de 620px é da página
 * de carrinho vazio. Texto centralizado. */
/* Minha conta — lista de pedidos: o toggle abre/fecha sem deslocar.
 * O modelo gira a <i> 45°, mas a tinta do glifo "＋" não é concêntrica —
 * o X "andava" alguns px. Aqui o giro acontece no ::before quadrado,
 * com o glifo centralizado: posição idêntica nos dois estados. */
.ord summary i {
  font-size: 0 !important;
  display: block !important;
  width: 28px;
  height: 28px !important;
  line-height: 28px !important;
  text-align: center !important;
}
.ord summary i::before {
  content: '＋';
  display: block;
  width: 28px;
  height: 28px;
  font-size: 15px;
  line-height: 28px;
  text-align: center;
  color: inherit;
  transition: transform 0.25s ease;
}
.ord[open] summary i {
  transform: none !important;
}
.ord[open] summary i::before {
  transform: rotate(45deg);
}

/* Minha conta — avatar: degradê simples como o do banner (.ahead).
 * Sai o redemoinho conic-gradient (agressivo e circular demais). */
.av,
.av.big {
  background:
    radial-gradient(120px 96px at 78% 14%, rgba(232,89,12,.32), rgba(232,89,12,0) 60%),
    linear-gradient(120deg, #17191C 0%, #24272B 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Pedido digital: a esteira de envio não faz sentido nesta loja e escapava
 * em alguns F5/skeleton. Esconde sempre (account-only). */
.olist ol.trk,
.b-last ol.trk {
  display: none !important;
}

/* Minha conta — dashboard: ÚLTIMO PEDIDO ocupa só a metade; Downloads e
 * Endereço de entrega dividem a outra metade por igual. */
@media (min-width: 901px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'last dl' 'last addr';
  }
}

.acontent .empty-p {
  max-width: none;
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 140px;
}

.acontent .empty-p p {
  margin: 0;
  text-align: center;
  width: 100%;
}

/* Imagens de produto em 3:2 (fotos 4:3 a 16:9 perdem no máximo ~16%). */
.pc-img,
.pch-img,
.stage {
  aspect-ratio: 3 / 2;
}
.pch {
  grid-template-columns: 180px 1fr;
}
.thumbs button {
  height: auto;
  aspect-ratio: 3 / 2;
}
@media (max-width: 700px) {
  .rail {
    height: 59px;
  }
}
.gal.hub6-1foto {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 600px) {
  .pch {
    grid-template-columns: 120px 1fr;
  }
}

/* PDP: "Comprar agora" no degradê do 404, fluindo no hover como o ✳ do hero. */
#buyn,
#buyn:hover,
#buyn:focus-visible {
  border-color: transparent;
  color: var(--hub6-ink);
  background: linear-gradient(90deg, #FFBC87, #C3A4EA 33%, var(--hub6-brand-strong) 66%, #FFBC87) 0% 50% / 150% 100%;
  animation: hub6-buy-flow 4s linear infinite;
}
/* Com a imagem em 150%, 300% de posição = um ciclo inteiro do gradiente. */
@keyframes hub6-buy-flow {
  to { background-position: 300% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  #buyn { animation: none; }
}

/* Lightbox: a moldura segue a proporção da foto enviada, inteira, sem o
 * quadrado com recorte do modelo. */
.lb-frame:not(.f) {
  width: auto;
  height: auto;
  aspect-ratio: auto;
}
.lb-frame:not(.f) img {
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: calc(100vh - 150px);
  object-fit: contain;
}
/* O anel de foco só aparece navegando por Tab; com mouse ou setas, não. */
.lb:not(.hub6-tab) .lb-btn:focus-visible {
  outline: none;
}
/* Setas do teclado: o botão do lado "pisca" o hover, como se fosse clicado. */
.lb-btn.is-press {
  background: var(--hub6-brand-strong);
  color: var(--hub6-ink);
}

/* Mobile: os dois menus da toolbar (Relevância e Filtros) abrem com a
 * largura da toolbar, alinhados às mesmas bordas. */
@media (max-width: 600px) {
  .tools {
    position: relative;
  }
  .tools .fdrop {
    position: static;
  }
  .tools .fdrop .filters,
  .tools .fdrop .sort-list {
    left: 0;
    right: 0;
    width: auto;
  }
}

/* Skeleton nas Políticas: o span que embrulha o título herda o tamanho do
 * h2 (a regra `.doc-body h2 span` é só para o número). */
.doc-body h2 > .sk-t {
  font: inherit;
  letter-spacing: inherit;
}

/* Skeleton nas Políticas: o gradiente recortado no texto vazava por cima
 * da barra. Enquanto carrega, só a barra aparece. */
[aria-busy="true"] .doc-body section :is(h2, h2 span, p, li, a, b, strong):not(.sk-t) {
  background-image: none !important;
}

/* Pré-visualização do admin (iframe ?hub6_prev=1): sem aviso de cookies. */
html.hub6-previa [aria-labelledby="hub6-cookie-title"] { display: none !important; }

/* Carrossel da home: faixa de ponta a ponta (sem margem lateral do .wrap). */
.hub6-car-sec {
  width: 100vw;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.hub6-car {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 0;
}
.hub6-car-track {
  grid-area: 1 / 1;
  display: flex;
  width: 100%;
  min-width: 0;
  transition: transform var(--hub6-car-t, .4s) ease;
}
.hub6-car-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  box-sizing: border-box;
}
.hub6-car-slide a { display: block; width: 100%; height: 100%; }
.hub6-car-slide img,
.hub6-car-slide video,
.hub6-car-slide .hub6-car-frame { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.hub6-car-slide.is-vazio {
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--hub6-border, #ddd) 35%, transparent);
  color: var(--hub6-text-secondary, #666);
  font: 600 14px var(--display, sans-serif);
  letter-spacing: -.02em;
}
/* Setas no mesmo visual do lightbox do produto (.lb-btn). */
.hub6-car .lb-nav {
  position: absolute;
  top: 50%;
  margin-top: -24px;
  z-index: 2;
  grid-area: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.hub6-car .lb-prev { left: 16px; }
.hub6-car .lb-next { right: 16px; left: auto; bottom: auto; }
/* Faixas laterais: mouse perto da seta → mostra o botão. */
.hub6-car-hot {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(22%, 120px);
  z-index: 1;
  grid-area: auto;
}
.hub6-car-hot.is-prev { left: 0; }
.hub6-car-hot.is-next { right: 0; }
.hub6-car.is-nav-prev .lb-prev,
.hub6-car.is-nav-next .lb-next,
.hub6-car .lb-nav:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
/* Touch / sem hover fino: setas somem; autoplay cobre a troca. */
@media (hover: none), (pointer: coarse) {
  .hub6-car .lb-nav,
  .hub6-car-hot { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hub6-car-track { transition: none; }
  .hub6-car .lb-nav { transition: none; }
}

/* Turnstile auth: modal compacto (não inline no formulário). */
.hub6-ts-modal .hub6-ts-panel {
	width: min(520px, 100%);
	max-height: none;
}
.hub6-ts-modal .pol-modal-hd h2 {
	font-size: clamp(18px, 2.2vw, 22px);
	line-height: 1.25;
	white-space: nowrap;
}
@media (max-width: 420px) {
	.hub6-ts-modal .pol-modal-hd h2 {
		white-space: normal;
	}
}
.hub6-ts-modal .hub6-ts-body {
	padding: 22px 24px 28px;
	display: grid;
	gap: 18px;
	justify-items: center;
	text-align: center;
}
.hub6-ts-modal .hub6-ts-hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--hub6-text-secondary);
}
.hub6-ts-modal .hub6-ts-slot {
  min-height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =========================================================================
 * Telas do modelo done()/gatewayState() — overlay DevMods sobre o modelo.
 * (só essas rotas usam .panel.ok; hub6-thankyou.css porta o resto)
 * ========================================================================= */

/* done(): círculo de sucesso — fundo verde (só a compra concluída;
 * pendente/cancelado/falha têm cores próprias). */
.wrap.page .panel.ok:not(.wait):not(.cancel):not(.fail) .okc {
	background: linear-gradient(160deg, #35C878 0%, #1F8F57 100%);
	border-color: rgba(53,200,120,.5);
	color: #fff;
	box-shadow: 0 0 0 6px rgba(53,200,120,.14), inset 0 1px 0 rgba(255,255,255,.4);
}

.wrap.page .panel.ok.wait .okc,
.wrap.page .panel.ok.cancel .okc,
.wrap.page .panel.ok.fail .okc {
	border-color: transparent;
	color: #fff !important;
}

/* Pedido concluído: o número desce para a linha do item — o eyebrow some. */
.wrap.page .panel.ok:not(.wait):not(.cancel):not(.fail) .eyebrow {
  display: none;
}

/* Cancelado: círculo vermelho com o glifo do mesmo tamanho do ✓ concluído */
.wrap.page .panel.ok.cancel .okc {
	background: linear-gradient(160deg, #E85A44 0%, #C93A24 100%);
	border-color: rgba(232,90,68,.45);
	width: 64px;
	height: 64px;
	font-size: 28px;
	box-shadow: 0 0 0 6px rgba(232,90,68,.14), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Pendente: três pontos pulando em sequência (tipo "carregando…") */
.wrap.page .panel.ok.wait .okc {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.wrap.page .panel.ok.wait .okc .hub6-ponto {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	animation: hub6-ponto-pulo 0.85s infinite cubic-bezier(.3, 1.5, .5, 1);
	animation-delay: calc(var(--i, 0) * .12s);
}
@keyframes hub6-ponto-pulo {
	0%, 80%, 100% { transform: translateY(0); opacity: .7; }