/* ==========================================================================
   Galatic — Theme Layer 2026-08-14 v1
   Restyle completo dos componentes para a nova identidade.
   Depende de galatic-tokens-20260814-v1.css (carregar antes deste).
   Light = padrão (:root). Dark = html[data-theme="dark"].
   Prefixo `html body` garante paridade de especificidade com
   design-sanitize-20260722-v4.css.
   ========================================================================== */

/* ---------- Base ---------- */

html body {
  background: var(--g-bg);
  color: var(--g-text);
}

/* Campo de estrelas sutil — quase imperceptível, nunca compete com conteúdo */
html body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, var(--g-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 64%, var(--g-star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 12%, var(--g-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 42%, var(--g-star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 78%, var(--g-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 88%, var(--g-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 34%, var(--g-star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 68% 90%, var(--g-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 8%, var(--g-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 52%, var(--g-star) 50%, transparent 51%);
  opacity: .55;
}

html body > * {
  position: relative;
  z-index: 1;
}

/* ---------- Tipografia ---------- */

html body h1,
html body h2,
html body h3,
html body .shopBrand b,
html body .productInfo h3,
html body .detailBuy h1,
html body .staticProductInfo h1 {
  font-family: var(--font-display);
}

/* ---------- Topbar ---------- */

html body .topbar {
  background: #0D1B3D;
  color: #FFF9F1;
}

html body .topbar a {
  color: #FFD9B0;
}

/* ---------- Navegação ---------- */

html body .shopNav {
  background: color-mix(in srgb, var(--g-surface) 92%, transparent);
  border-bottom: 1px solid var(--g-border);
  backdrop-filter: blur(18px);
}

html body .shopBrand b {
  color: var(--g-text);
  letter-spacing: .14em;
}

html body .shopBrand small {
  color: var(--g-primary);
  letter-spacing: .18em;
}

html body .shopLinks a {
  color: var(--g-text);
}

html body .shopLinks a:after {
  background: var(--g-primary);
}

html body .navSearch,
html body .mobileSearch {
  background: var(--g-bg-soft);
  border: 1px solid var(--g-border);
  border-radius: 999px;
}

html body .navSearch input,
html body .mobileSearch input {
  color: var(--g-text);
}

html body .navSearch input::placeholder,
html body .mobileSearch input::placeholder {
  color: var(--g-text-muted);
}

html body .navSearchLink {
  color: var(--g-text-muted);
}

html body .navActions > a:not(.cartButton),
html body .mobileMenu {
  background: var(--g-bg-soft);
  border: 1px solid var(--g-border);
  color: var(--g-text);
}

html body .navActions > a:not(.cartButton) > b,
html body .cartButton b {
  background: var(--g-primary);
  color: var(--g-primary-contrast);
}

html body .navActions > a.accountActive {
  color: var(--g-primary-hover) !important;
  border-color: var(--g-primary) !important;
  background: var(--g-badge-seminovo-bg) !important;
}

html body .cartButton {
  background: var(--g-text);
  color: var(--g-bg);
}

html body .cartButton:hover {
  background: var(--g-primary);
  color: var(--g-primary-contrast);
}

/* dropdown mobile */
@media (max-width: 1120px) {
  html body .shopLinks {
    background: var(--g-surface);
    border: 1px solid var(--g-border);
    box-shadow: var(--shadow);
  }
}

/* Botão de tema (injetado por galatic-theme-20260814-v1.js) */
html body .themeToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--g-border);
  background: var(--g-bg-soft);
  color: var(--g-text);
  cursor: pointer;
  padding: 0;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

html body .themeToggle:hover {
  border-color: var(--g-primary);
  transform: translateY(-1px);
}

html body .themeToggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .themeToggle .iconMoon { display: none; }
html[data-theme="dark"] body .themeToggle .iconSun { display: none; }
html[data-theme="dark"] body .themeToggle .iconMoon { display: block; }

/* ---------- Hero ---------- */

html body .storeHero {
  background: #FFF6E6;
  color: #0D1B3D;
  border-radius: var(--g-radius-lg);
}

html[data-theme="dark"] body .storeHero {
  background: #0A1428;
  color: #F2F4F7;
}

/* estrelas dentro do hero */
html body .storeHero:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 22%, rgba(255, 249, 241, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 18% 68%, rgba(255, 249, 241, .55) 50%, transparent 51%),
    radial-gradient(2px 2px at 30% 14%, rgba(246, 198, 78, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 82%, rgba(255, 249, 241, .45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 10%, rgba(122, 210, 255, .6) 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 58%, rgba(255, 249, 241, .5) 50%, transparent 51%),
    radial-gradient(2px 2px at 86% 26%, rgba(255, 138, 0, .65) 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 74%, rgba(255, 249, 241, .45) 50%, transparent 51%);
  opacity: 0;
}

html[data-theme="dark"] body .storeHero:after {
  opacity: 1;
}

html body .storeHeroShade {
  background:
    linear-gradient(90deg, rgba(255, 246, 230, .97) 0%, rgba(255, 246, 230, .85) 35%, rgba(255, 246, 230, .15) 72%),
    linear-gradient(transparent 55%, rgba(255, 246, 230, .5));
}

html[data-theme="dark"] body .storeHeroShade {
  background:
    linear-gradient(90deg, rgba(6, 12, 26, .96) 0%, rgba(6, 12, 26, .82) 35%, rgba(6, 12, 26, .18) 72%),
    linear-gradient(transparent 45%, rgba(6, 12, 26, .55));
}

html body .storeHeroCopy > p {
  color: var(--g-primary);
}

html body .storeHeroCopy h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #0D1B3D;
}

html[data-theme="dark"] body .storeHeroCopy h1 {
  color: #F2F4F7;
}

html body .storeHeroCopy h1 em {
  color: var(--g-primary);
  font-style: normal;
}

html[data-theme="dark"] body .storeHeroCopy h1 em {
  color: var(--g-hero-accent);
}

html body .storeHeroCopy > span {
  color: #3D4B6B;
}

html[data-theme="dark"] body .storeHeroCopy > span {
  color: rgba(242, 244, 247, .82);
}

html body .storeHeroCopy a {
  background: var(--g-primary);
  border-color: var(--g-primary);
  color: var(--g-primary-contrast);
}

html body .storeHeroCopy a:hover {
  background: var(--g-primary-hover);
  border-color: var(--g-primary-hover);
}

html body .storeHeroCopy > div > button,
html body .storeHeroCopy a.secondaryHero {
  background: transparent;
  border: 1px solid rgba(13, 27, 61, .35);
  color: #0D1B3D;
}

html[data-theme="dark"] body .storeHeroCopy > div > button,
html[data-theme="dark"] body .storeHeroCopy a.secondaryHero {
  background: rgba(255, 249, 241, .08);
  border: 1px solid rgba(255, 249, 241, .28);
  color: var(--g-hero-text);
}

html body .storeHeroCopy > div > button:hover,
html body .storeHeroCopy a.secondaryHero:hover {
  background: rgba(13, 27, 61, .07);
  border-color: rgba(13, 27, 61, .55);
}

html[data-theme="dark"] body .storeHeroCopy > div > button:hover,
html[data-theme="dark"] body .storeHeroCopy a.secondaryHero:hover {
  background: rgba(255, 249, 241, .16);
}

html body .heroProduct {
  background: color-mix(in srgb, var(--g-surface) 94%, transparent);
  border: 1px solid var(--g-border);
  color: var(--g-text);
  box-shadow: var(--shadow);
}

html body .heroProduct > span,
html body .heroProduct small {
  color: var(--g-text-muted);
}

html body .heroProduct button,
html body .heroProduct > div > a {
  background: var(--g-text);
  color: var(--g-bg);
}

html body .heroProduct button:hover,
html body .heroProduct > div > a:hover {
  background: var(--g-primary);
  color: var(--g-primary-contrast);
}

/* ---------- Trust strip ---------- */

html body .trustStrip {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-md);
  box-shadow: 0 12px 35px rgba(13, 27, 61, .05);
}

html body .trustStrip > div {
  border-right: 1px solid var(--g-border);
}

html body .trustStrip i,
html body .trustStrip > div > .uiIcon {
  color: var(--g-primary);
  background: var(--g-badge-seminovo-bg);
}

html body .trustStrip small {
  color: var(--g-text-muted);
}

/* ---------- Cards de produto ---------- */

html body .productCard {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-md);
}

html body .productCard:hover {
  box-shadow: var(--shadow);
  border-color: var(--g-border-strong);
}

html body .productImage {
  background: var(--g-bg-soft);
}

html body .productInfo > p {
  color: var(--g-primary-hover);
}

html body .productInfo > small {
  color: var(--g-text-muted);
}

html body .productBadge {
  background: #0D1B3D;
  color: #FFF9F1;
}

/* estados */
html body .productUnavailable .addButton {
  color: var(--g-text-muted);
  background: var(--g-border);
}

html body .productUnavailable .productBadge {
  background: var(--g-badge-oferta-bg);
  color: var(--g-badge-oferta-fg);
}

html body .stock b { color: var(--g-success); }
html body .stock.comingSoon {
  color: var(--g-badge-oferta-fg);
  background: var(--g-badge-oferta-bg);
}

/* badges utilitários da nova identidade (novo/seminovo/raro/oferta/vendido) */
html body .g-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html body .g-badge--novo     { background: var(--g-badge-novo-bg);     color: var(--g-badge-novo-fg); }
html body .g-badge--seminovo { background: var(--g-badge-seminovo-bg); color: var(--g-badge-seminovo-fg); }
html body .g-badge--raro     { background: var(--g-badge-raro-bg);     color: var(--g-badge-raro-fg); }
html body .g-badge--oferta   { background: var(--g-badge-oferta-bg);   color: var(--g-badge-oferta-fg); }
html body .g-badge--vendido  { background: var(--g-badge-vendido-bg);  color: var(--g-badge-vendido-fg); }

/* ---------- Botões ---------- */

html body .primaryBuy,
html body .finishOrder,
html body .summaryCheckout {
  background: var(--g-primary);
  color: var(--g-primary-contrast);
}

html body .primaryBuy:hover,
html body .finishOrder:hover,
html body .summaryCheckout:hover {
  background: var(--g-primary-hover);
}

html body .addButton,
html body .emptyCart button,
html body .accountForm > button,
html body .contactLayout form > button,
html body .portalForm > button,
html body .catalogEmpty button,
html body .largeEmpty > a {
  background: var(--g-text);
  color: var(--g-bg);
}

html body .addButton:hover,
html body .emptyCart button:hover,
html body .accountForm > button:hover,
html body .contactLayout form > button:hover,
html body .portalForm > button:hover,
html body .catalogEmpty button:hover,
html body .largeEmpty > a:hover {
  background: var(--g-primary);
  color: var(--g-primary-contrast);
}

html body .addButton.added {
  background: var(--g-success);
  color: #fff;
}

html body .filters button,
html body .catalogPagination button {
  border: 1px solid var(--g-border);
  background: var(--g-surface);
  color: var(--g-text);
}

html body .filters button.active {
  background: var(--g-text);
  color: var(--g-bg);
  border-color: var(--g-text);
}

/* ---------- Página de produto gerada (staticCatalogPage) ---------- */

html body.staticCatalogPage {
  background: var(--g-bg);
  color: var(--g-text);
}

html body .staticBreadcrumb { color: var(--g-text-muted); }
html body .staticBreadcrumb a { color: var(--g-text-muted); }
html body .staticBreadcrumb a:hover { color: var(--g-primary); }

html body .staticProductImage {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg);
}

html body .staticEyebrow {
  color: var(--g-primary-hover) !important;
}

html body .staticProductInfo h1 {
  color: var(--g-text);
}

html body .staticAvailability[data-available="1"] { color: var(--g-success); }
html body .staticAvailability[data-available="0"] { color: var(--g-danger); }

html body .staticPriceLabel { color: var(--g-text-muted); }
html body .staticPrice { color: var(--g-text); }

html body .staticPurchase .quantity {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  color: var(--g-text);
}

html body .staticPurchase .quantity button {
  color: var(--g-text);
}

html body .staticPurchase .primaryBuy,
html body .staticPrimary {
  background: var(--g-primary);
  color: var(--g-primary-contrast);
}

html body .staticPurchase .primaryBuy:hover,
html body .staticPrimary:hover {
  background: var(--g-primary-hover);
}

html body .staticSecondary {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  color: var(--g-text);
}

html body .staticSecondary:hover {
  border-color: var(--g-primary);
  color: var(--g-primary);
}

html body .staticAlternatives {
  background: #0D1B3D;
  color: #FFF9F1;
}

html body .staticAlternatives p { color: var(--g-primary); }
html body .staticAlternatives a { color: #FFF9F1; }
html body .staticAlternatives a:hover { color: var(--g-primary); }

/* ---------- Página de produto rica (detailBuy) ---------- */

html body .detailGallery,
html body .detailBuy {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
}

html body .detailBuy > p { color: var(--g-primary-hover); }
html body .detailBuy > small { color: var(--g-text-muted); }
html body .detailBuy > strong { color: var(--g-text); }

html body .detailImage { background: var(--g-bg-soft); }

html body .detailImage > span {
  background: #0D1B3D;
  color: #FFF9F1;
}

html body .galleryRail button {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
}

html body .galleryRail button.active {
  border-color: var(--g-primary);
  box-shadow: 0 0 0 2px var(--g-glow);
}

html body .quantity {
  background: var(--g-bg-soft);
  border: 1px solid var(--g-border);
  color: var(--g-text);
}

html body .installments,
html body .breadcrumbs { color: var(--g-text-muted); }
html body .breadcrumbs span { color: var(--g-text); }

/* ---------- Carrinho / Checkout ---------- */

html body .cartPageItems,
html body .cartSummary,
html body .deliveryForm,
html body .checkoutForm,
html body .orderSummary,
html body .paymentLayout > div,
html body .paymentLayout > aside {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-md);
}

html body .cartPageItems article {
  border-bottom: 1px solid var(--g-border);
}

html body .cartPageItems article > a > img {
  background: var(--g-bg-soft);
}

html body .checkoutHead {
  background: #0D1B3D;
  color: #FFF9F1;
}

html body .checkoutHead span { color: rgba(255, 249, 241, .65); }

html body .checkoutStep > span,
html body .checkoutBlock > header > span {
  background: #0D1B3D;
  color: #FFF9F1;
}

html body .checkoutBlock header p { color: var(--g-primary-hover); }

html body .checkoutNotice,
html body .shippingResult {
  background: var(--g-badge-novo-bg);
  color: var(--g-text);
}

html body .paymentOptions button {
  background: var(--g-bg-soft);
  border: 1px solid var(--g-border);
  color: var(--g-text);
}

html body .paymentOptions button.active {
  border-color: var(--g-primary);
  background: var(--g-badge-seminovo-bg);
  box-shadow: 0 0 0 2px var(--g-glow);
}

html body .apiMessage {
  color: var(--g-badge-seminovo-fg);
  background: var(--g-badge-seminovo-bg);
}

html body .cartDrawer {
  background: var(--g-bg);
}

html body .cartDrawer > footer {
  background: var(--g-surface);
  border-top: 1px solid var(--g-border);
}

/* shipping-cart (camada com !important própria) */
html body .cartShippingEstimator {
  background: var(--g-bg-soft) !important;
  border: 1px solid var(--g-border) !important;
}

html body .cartShippingEstimator input {
  background: var(--g-surface);
  border: 1px solid var(--g-border-strong);
  color: var(--g-text);
}

html body .cartShippingEstimator input:focus {
  border-color: var(--g-primary);
  box-shadow: 0 0 0 3px var(--g-glow);
}

html body .cartShippingEstimator button {
  background: var(--g-text);
  color: var(--g-bg);
}

html body .cartShippingEstimator button:hover {
  background: var(--g-primary);
  color: var(--g-primary-contrast);
}

html body .cartShippingRate {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
}

html body .cartShippingRate:has(input:checked) {
  border-color: var(--g-primary);
  box-shadow: 0 0 0 2px var(--g-glow);
}

html body .cartShippingRate input { accent-color: var(--g-primary); }

html body .cartShippingStatus[data-state="error"] { color: var(--g-danger); }
html body .cartShippingStatus[data-state="success"] { color: var(--g-success); }

html body .cartQty {
  background: var(--g-surface) !important;
  border: 1px solid var(--g-border) !important;
  color: var(--g-text);
}

/* ---------- Checkout Asaas (CSS injetado via JS) ---------- */

html body .asaasCheckout {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
}

html body .asaasBrand small { color: var(--g-text-muted); }

html body .asaasMethods label {
  border: 1px solid var(--g-border);
  color: var(--g-text);
}

html body .asaasMethods label:has(input:checked) {
  border-color: var(--g-primary);
  box-shadow: 0 0 0 2px var(--g-glow);
}

html body .asaasMethods input { accent-color: var(--g-primary); }

html body .asaasInstallments select {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  color: var(--g-text);
}

html body .asaasCheckout button[type="submit"] {
  background: var(--g-primary);
  color: var(--g-primary-contrast);
}

html body .asaasCheckout button[type="submit"]:hover {
  background: var(--g-primary-hover);
}

html body .asaasPixStatus {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
}

html body .asaasPixStatus p { color: var(--g-text-muted); }

html body .asaasPixStatus textarea {
  background: var(--g-bg-soft);
  border: 1px solid var(--g-border);
  color: var(--g-text);
}

html body .asaasPixStatus button {
  background: var(--g-text);
  color: var(--g-bg);
}

/* ---------- Formulários ---------- */

html body .fieldGrid input,
html body .fieldGrid select,
html body .contactLayout select,
html body .contactLayout textarea,
html body .authForm input,
html body .portalForm input,
html body .portalForm select,
html body .portalForm textarea,
html body .accountForm input,
html body .orderLookup input,
html body .cartSummary input {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  color: var(--g-text);
}

html body .fieldGrid input:focus,
html body .fieldGrid select:focus,
html body .contactLayout select:focus,
html body .contactLayout textarea:focus,
html body .authForm input:focus,
html body .portalForm input:focus,
html body .portalForm select:focus,
html body .portalForm textarea:focus,
html body .accountForm input:focus,
html body .orderLookup input:focus,
html body .cartSummary input:focus {
  border-color: var(--g-primary);
  box-shadow: 0 0 0 3px var(--g-glow);
}

html body input::placeholder,
html body textarea::placeholder {
  color: var(--g-text-muted);
}

html body .fieldGrid label,
html body .authForm label,
html body .portalForm label,
html body .accountForm label,
html body .contactLayout form > label {
  color: var(--g-text-muted);
}

html body .fieldError { color: var(--g-danger) !important; }

html body .authConfirmMessage[data-state="invalid"] { color: var(--g-danger); }
html body .authConfirmMessage[data-state="valid"] { color: var(--g-success); }
html body .sentMessage { color: var(--g-success); }

html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body summary:focus-visible {
  outline: 3px solid var(--g-focus);
  outline-offset: 3px;
}

html body .dangerZone button {
  color: var(--g-danger);
  border-color: var(--g-danger);
}

/* ---------- Footer ---------- */

html body .proFooter {
  background: #060C18;
  color: #F2F4F7;
}

html body .proFooter > div > a { color: #A8B2C3; }
html body .proFooter > div > a:hover { color: #FF8A00; }

html body .miniFooter {
  background: var(--g-surface);
  border-top: 1px solid var(--g-border);
}

html body .miniFooter > span { color: var(--g-text-muted); }

/* ---------- Elementos espaciais decorativos ---------- */

/* Órbita fina decorativa — usar em seções editoriais via .g-orbit */
html body .g-orbit {
  position: relative;
}

html body .g-orbit::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border: 1px solid var(--g-orbit-line);
  border-radius: 50%;
  top: -70px;
  right: -60px;
  pointer-events: none;
}

html body .g-orbit::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--g-primary);
  top: -16px;
  right: 30px;
  box-shadow: 0 0 18px var(--g-glow);
  pointer-events: none;
}

/* Brilho estrela discreto */
html body .g-spark {
  color: var(--g-solar);
}

/* ---------- Overrides exclusivos do DARK (hex literais do CSS legado) ---------- */

html[data-theme="dark"] body .storeHero {
  background: #0A1428;
}

html[data-theme="dark"] body .productBadge,
html[data-theme="dark"] body .detailImage > span {
  background: #18243B;
  color: #F2F4F7;
  border: 1px solid #2B3850;
}

html[data-theme="dark"] body .staticAlternatives {
  background: #101A2E;
  border: 1px solid #2B3850;
}

html[data-theme="dark"] body .checkoutHead,
html[data-theme="dark"] body .checkoutStep > span,
html[data-theme="dark"] body .checkoutBlock > header > span {
  background: #18243B;
  color: #F2F4F7;
}

html[data-theme="dark"] body .topbar {
  background: #060C18;
}

html[data-theme="dark"] body .stripePanel > button {
  background: #635bff;
  color: #fff;
}

/* seleção de texto */
::selection {
  background: var(--g-primary);
  color: var(--g-primary-contrast);
}

/* ---------- Logo com troca por tema ---------- */

html body .g-logo {
  border-radius: 10px;
  display: inline-block;
}

/* Lockup ilustrado: símbolo, órbita e lettering formam uma única marca. */
html body .shopNav {
  min-height: 104px;
}

html body .shopBrand.brandLockup {
  flex: 0 0 auto;
  gap: 0;
}

html body .shopBrand.brandLockup .g-wordmark {
  width: 292px;
  height: auto;
  max-width: none;
  border-radius: 0;
  object-fit: contain;
}

html body .footerIdentity .shopBrand.brandLockup .g-wordmark,
html body .proFooter .shopBrand.brandLockup .g-wordmark {
  width: 336px;
}

/* A assinatura completa recebe escala própria nos fluxos de acesso. */
html body .authBrand.authWordmark {
  width: 276px;
  max-width: calc(100vw - 64px);
  gap: 0;
}

html body .authBrand.authWordmark .g-wordmark {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-radius: 0;
  object-fit: contain;
}

html body .g-logo-dark { display: none; }

html[data-theme="dark"] body .g-logo-light { display: none; }
html[data-theme="dark"] body .g-logo-dark { display: inline-block; }

/* Hero: troca de arte por tema */
html body .g-hero-art-dark { display: none; }
html[data-theme="dark"] body .g-hero-art-light { display: none; }
html[data-theme="dark"] body .g-hero-art-dark { display: block; }

html body .checkoutLoading {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  color: var(--g-text-muted);
}

/* ---------- Painéis editoriais sempre navy (nos dois temas) ---------- */

html body .aboutShop,
html body .detailStory,
html body .storyCTA,
html body .helpCTA,
html body .accountIntro,
html body .accountWelcome,
html body .reviewHero {
  background: #0D1B3D;
  color: #FFF9F1;
}

html[data-theme="dark"] body .aboutShop,
html[data-theme="dark"] body .detailStory,
html[data-theme="dark"] body .storyCTA,
html[data-theme="dark"] body .helpCTA,
html[data-theme="dark"] body .accountIntro,
html[data-theme="dark"] body .accountWelcome,
html[data-theme="dark"] body .reviewHero {
  background: #101A2E;
  border: 1px solid var(--g-border);
  color: #F2F4F7;
}

/* ---------- Botões escuros legados: contraste correto no dark ----------
   Estes usam background:var(--ink) + color:#fff fixo. No dark, --ink vira
   warm white, então o texto precisa ir para o tom do fundo. */

html body .checkoutEmpty a,
html body .homeSplit a,
html body .cartSummary label button,
html body .orderLookup form > button,
html body .reviewEditor > button,
html body .authPrimary,
html body .accountGate > div a:first-child,
html body .accountPerson > span,
html body .profileAvatar,
html body .drawerCustomer > i,
html body .contentTabs button.active,
html body .portalToolbar button.active,
html body .dealSpotlightVisual > span,
html body .dealActions > a:first-child,
html body .flowHeader > div span.active,
html body .catalogBody aside div > button.active,
html body .notifyProduct {
  color: var(--g-bg);
}

/* ---------- Footer: novo logo não recebe o filtro de inversão legado ---------- */

html body .footerIdentity .shopBrand img {
  filter: none;
}

/* ---------- Auth (entrar/cadastro) ---------- */

html body .authPanel {
  background: var(--g-bg-soft);
  color: var(--g-text);
  position: relative;
}

html body .authPanel > .authThemeToggle {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 4;
  box-shadow: 0 10px 28px rgba(13, 27, 61, .08);
}

html body .authPanel > .authThemeToggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--g-primary) 45%, transparent);
  outline-offset: 3px;
}

html[data-theme="dark"] body .authPanel {
  background: var(--g-surface);
  color: var(--g-text);
}

@media (max-width: 720px) {
  html body .authPanel > .authThemeToggle {
    top: 16px;
    right: 16px;
  }
}

/* Auth: botões e tabs seguem os tokens */
html body .authSecondary {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  color: var(--g-text);
}

html body .authSecondary:hover {
  border-color: var(--g-primary);
  color: var(--g-primary);
}

html body .authTabs button.active {
  background: var(--g-surface);
  color: var(--g-text);
}

html[data-theme="dark"] body .authPrimary .uiIcon {
  filter: none;
}

/* ============================================================
   Elementos decorativos — ilustracoes Galatic
   (meeple astronauta, constelacao de cartas, foguete)
   ============================================================ */
@keyframes gDecorFloat {
  0%, 100% { transform: translateY(0) rotate(var(--g-decor-tilt, 0deg)); }
  50% { transform: translateY(-10px) rotate(var(--g-decor-tilt, 0deg)); }
}

.categoryHub,
.homeSplit,
.storyHero,
.storyCTA { position: relative; }

img.g-decor {
  position: absolute;
  inset: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  width: clamp(96px, 11vw, 148px);
  max-width: none;
  height: auto;
  border-radius: var(--g-radius-lg);
  border: 1px solid var(--g-border);
  background: #081020;
  box-shadow: 0 18px 40px rgba(4, 10, 26, .35);
  animation: gDecorFloat 7s ease-in-out infinite;
}
img.g-decor--tr { top: 28px; right: 32px; bottom: auto; left: auto; }
img.g-decor--br { bottom: 28px; right: 32px; top: auto; left: auto; }
img.g-decor--sm { width: clamp(72px, 8vw, 104px); }
img.g-decor--delay { animation-delay: -3.5s; }

img.g-decor-empty {
  display: block;
  width: 132px;
  height: 132px;
  object-fit: cover;
  margin: 0 auto 18px;
  border-radius: 32px;
  border: 1px solid var(--g-border);
  box-shadow: 0 18px 40px rgba(4, 10, 26, .35);
  animation: gDecorFloat 7s ease-in-out infinite;
}

@media (max-width: 760px) {
  .g-decor { display: none; }
  .g-decor-empty { width: 104px; height: 104px; border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-decor,
  .g-decor-empty { animation: none; }
}

/* Empty states tematizados (carrinho, favoritos, busca, pedidos) */
.largeEmpty,
.catalogEmpty {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  color: var(--g-text);
}
.largeEmpty h2,
.largeEmpty h3,
.catalogEmpty h2,
.catalogEmpty h3 { color: var(--g-text); }
.largeEmpty p,
.catalogEmpty p { color: var(--g-text-muted); }

/* Nave 3D que acompanha o scroll (home, data-g-nave no body) */
.g-nave {
  position: fixed;
  left: 0;
  top: 0;
  width: clamp(150px, 15vw, 230px);
  height: auto;
  border-radius: 50%;
  z-index: 30;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  filter: drop-shadow(0 18px 28px rgba(4, 10, 26, .35));
}
@media (max-width: 899px) {
  .g-nave { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .g-nave { display: none; }
}

/* ============================================================
   DARK — campanha de fantasia sombria
   Mantém os produtos neutros e concentra a narrativa no cenário.
   ============================================================ */

html[data-theme="dark"] body {
  background-color: #070A12;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(141, 94, 176, .10), transparent 28%),
    radial-gradient(circle at 86% 68%, rgba(101, 214, 166, .08), transparent 30%);
}

html[data-theme="dark"] body::before {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(101, 214, 166, .40) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 64%, rgba(232, 216, 183, .34) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 12%, rgba(141, 94, 176, .42) 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 42%, rgba(101, 214, 166, .30) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 78%, rgba(213, 106, 50, .30) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 88%, rgba(232, 216, 183, .28) 50%, transparent 51%);
}

html[data-theme="dark"] body .shopNav {
  background: color-mix(in srgb, #0D101A 94%, transparent);
  border-color: #352A3E;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .26);
}

html[data-theme="dark"] body .storeHero {
  background: #070A12;
  border-color: rgba(101, 214, 166, .24);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(213, 106, 50, .08);
}

html[data-theme="dark"] body .storeHeroShade {
  background:
    linear-gradient(90deg, rgba(7, 10, 18, .98) 0%, rgba(7, 10, 18, .91) 34%, rgba(7, 10, 18, .18) 70%),
    linear-gradient(transparent 44%, rgba(7, 10, 18, .64));
}

html[data-theme="dark"] body .storeHeroCopy > p,
html[data-theme="dark"] body .categoryHub > header p,
html[data-theme="dark"] body .homeSection > header p,
html[data-theme="dark"] body .visualEditorial > div > p,
html[data-theme="dark"] body .homeSplit > div > p {
  color: #65D6A6;
}

html[data-theme="dark"] body .productCard {
  background: linear-gradient(180deg, #17131F, #100E18);
  border-color: rgba(141, 94, 176, .28);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] body .productCard:hover {
  border-color: rgba(101, 214, 166, .48);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .34), 0 0 28px rgba(101, 214, 166, .08);
}

html[data-theme="dark"] body .categoryHub > div > a,
html[data-theme="dark"] body .visualEditorial,
html[data-theme="dark"] body .homeSplit,
html[data-theme="dark"] body .marketPremiere {
  border-color: rgba(141, 94, 176, .30);
  box-shadow: 0 24px 58px rgba(0, 0, 0, .30);
}

html[data-theme="dark"] body .categoryHub > div > a:hover {
  border-color: rgba(101, 214, 166, .52);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .40), 0 0 34px rgba(101, 214, 166, .08);
}

html[data-theme="dark"] body .homeSplit > div {
  background:
    radial-gradient(circle at 88% 18%, rgba(101, 214, 166, .10), transparent 34%),
    linear-gradient(145deg, #17131F, #0D101A);
  color: #F3EEE5;
}

html[data-theme="dark"] body .homeSplit {
  background: #0D101A;
}

html[data-theme="dark"] body .homeSplit > div h2 {
  color: #F3EEE5;
}

html[data-theme="dark"] body .homeSplit > div > span {
  color: #B8AEBB;
}

html[data-theme="dark"] body .homeSplit a {
  background: #D56A32;
  border-color: #D56A32;
  color: #110A0A;
}

html[data-theme="dark"] body .homeSplit a:hover {
  background: #E47B40;
  border-color: #E47B40;
}

html[data-theme="dark"] body .themeToggle {
  border-color: rgba(101, 214, 166, .34);
  box-shadow: inset 0 0 18px rgba(101, 214, 166, .07);
}

img[data-g-theme-image] {
  transition: filter .35s ease, opacity .35s ease;
}

/* ============================================================
   CONTRASTE ENTRE TEMAS — auditoria integral 2026-08-15
   Os SVGs legados possuem traços escuros fixos. No tema dark,
   eles recebem um tratamento comum e só voltam ao original em
   controles de fundo claro/cobre, onde o traço escuro é correto.
   ============================================================ */

html[data-theme="dark"] body .uiIcon {
  filter: brightness(0) invert(1);
  opacity: .92;
}

html[data-theme="dark"] body :is(
  .cartButton,
  .addButton,
  .primaryBuy,
  .authPrimary,
  .heroProduct > div > a,
  .storeHeroCopy > div > a:first-child,
  .homeSplit a,
  .premiereCopy > a,
  .contactLayout form > button,
  .orderLookup form > button,
  .guidesCinemaCopy > a,
  .offersCinemaCopy > div > a:first-child,
  .guideSpotlight > div > a,
  .offerChoice > a
) .uiIcon,
html[data-theme="dark"] body .paymentMark img {
  filter: none;
  opacity: 1;
}

/* Superfícies legadas que permaneciam brancas ao alternar para dark. */
html[data-theme="dark"] body :is(
  .catalogBar,
  .offersTrustRail,
  .commerceOffersEmpty > div,
  .valuesGrid article,
  .helpLayout aside a,
  .contactCards article,
  .contactLayout form,
  .orderLookup,
  .guideCard,
  .growthNewsletter,
  .dealSpotlight,
  .staticRecommendations > a,
  .staticRecommendations article
) {
  background: var(--g-surface);
  border-color: var(--g-border);
  color: var(--g-text);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] body :is(
  .catalogBar,
  .offersTrustRail,
  .commerceOffersEmpty,
  .valuesGrid,
  .helpLayout,
  .contactCards,
  .contactLayout,
  .orderLookup,
  .guideCard,
  .growthNewsletter,
  .dealSpotlight,
  .staticRecommendations
) :is(h1, h2, h3, h4, b, strong, label, em) {
  color: var(--g-text);
}

html[data-theme="dark"] body :is(
  .offersTrustRail,
  .commerceOffersEmpty,
  .valuesGrid,
  .helpLayout,
  .contactCards,
  .contactLayout,
  .orderLookup,
  .guideCard,
  .growthNewsletter,
  .dealSpotlight,
  .staticRecommendations
) :is(p, small, span) {
  color: var(--g-text-muted);
}

html[data-theme="dark"] body :is(
  .catalogBar label,
  .catalogBar input,
  .catalogBar select,
  .catalogBar button,
  .catalogPagination button
) {
  background: var(--g-surface-elevated);
  border-color: var(--g-border);
  color: var(--g-text);
}

html[data-theme="dark"] body :is(
  .catalogBar input,
  .catalogBar select,
  .contactLayout input,
  .contactLayout select,
  .contactLayout textarea,
  .orderLookup input
)::placeholder {
  color: var(--g-text-muted);
  opacity: .8;
}

html[data-theme="dark"] body .catalogBar select {
  color-scheme: dark;
}

html[data-theme="dark"] body .offersTrustRail > div {
  border-color: var(--g-border);
}

html[data-theme="dark"] body .commerceOffersEmpty {
  background: var(--g-bg);
  color: var(--g-text);
}

html[data-theme="dark"] body :is(
  .helpLayout aside a:hover,
  .valuesGrid article:hover,
  .guideCard:hover,
  .staticRecommendations > a:hover,
  .staticRecommendations article:hover
) {
  border-color: var(--g-border-strong);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .34), 0 0 26px rgba(101, 214, 166, .06);
}

/* A área visual do destaque de oferta continua clara para preservar o produto. */
html[data-theme="dark"] body .dealSpotlightVisual {
  background: radial-gradient(circle at 50% 42%, #F7F3EA 0, #DED8CE 62%, #C9C1B5 100%);
  color: #0D1B3D;
}

html[data-theme="dark"] body .dealSpotlightVisual :is(span, small) {
  color: #0D1B3D;
}

/* Labels editoriais precisam de contraste também no tema claro. */
html[data-theme="light"] body :is(
  .pageHero p,
  .staticEyebrow,
  .productInfo > p,
  .catalogIntro > p,
  .contactLayout form > p,
  .orderLookup > p
) {
  color: var(--g-accent-copy);
}

/* Estado inicial do painel administrativo antes da API responder. */
.galaticAdminBoot {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 32px;
  box-sizing: border-box;
  background: var(--g-bg);
  color: var(--g-text);
  text-align: center;
  font-family: var(--font-sans);
}

.galaticAdminBoot img {
  border-radius: var(--g-radius-md);
}

.galaticAdminBoot span {
  color: var(--g-text-muted);
}

/* Paginação compacta: evita rolagem infinita sem perder o contexto do catálogo. */
html body .catalogPagination {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr);
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  padding: 17px 18px;
  border: 1px solid var(--g-border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--g-surface) 94%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--g-text) 6%, transparent);
}
html body .catalogPagination[hidden] { display: none; }
html body .catalogPageSummary,
html body .catalogPagePosition { color: var(--g-text-muted); font-size: 12px; }
html body .catalogPagePosition { justify-self: end; }
html body .catalogPageSummary b,
html body .catalogPagePosition b { color: var(--g-text); }
html body .catalogPageControls { display: flex; align-items: center; justify-content: center; gap: 6px; }
html body .catalogPagination .catalogPageControls button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  transition: transform .18s, border-color .18s, background .18s, color .18s;
}
html body .catalogPagination .catalogPageControls button:not(:disabled):hover {
  border-color: var(--g-primary);
  transform: translateY(-1px);
}
html body .catalogPagination .catalogPageControls button.active {
  border-color: var(--g-primary);
  background: var(--g-primary);
  color: var(--g-primary-contrast);
}
html body .catalogPagination .catalogPageControls button:disabled { opacity: .35; cursor: not-allowed; }
html body .catalogPageEllipsis { min-width: 20px; color: var(--g-text-muted); text-align: center; }
html body .catalogResults { scroll-margin-top: 110px; }