/* Relicato mobile refinements: compact header + lock the public site to the light visual identity. */
:root {
  color-scheme: only light;
}

html,
body,
#root {
  background-color: #fffaf7;
  forced-color-adjust: none;
}

/* Alguns navegadores móveis (especialmente Samsung Internet com force-dark)
   tentam recolorir páginas claras. Reafirmamos a identidade visual da Relicato. */
@media (prefers-color-scheme: dark) {
  html,
  body,
  #root,
  .site-shell,
  .topbar,
  .hero,
  .about-strip,
  .section,
  .order-flow,
  .experience-grid,
  .service-info,
  .footer,
  .copyright,
  .order-page,
  .club-page,
  .public-gallery-page {
    color-scheme: only light !important;
    forced-color-adjust: none !important;
  }

  html,
  body,
  #root,
  .site-shell {
    background-color: #fffaf7 !important;
    color: #5f403b !important;
  }

  .topbar {
    background: rgba(255, 250, 247, .98) !important;
    color: #5f403b !important;
  }

  .hero {
    background:
      linear-gradient(90deg, rgba(255,248,245,.98) 0 48%, rgba(255,245,241,.52) 62%, transparent 100%) !important;
    color: #5f403b !important;
  }

  .about-strip,
  .section,
  .experience-grid,
  .service-info {
    background-color: #fffdfb !important;
    color: #5f403b !important;
  }

  .order-flow,
  .footer,
  .copyright {
    background-color: #fff8f5 !important;
    color: #5f403b !important;
  }

  .hero h1,
  .hero-text,
  .nav a,
  .header-login-link,
  .header-actions,
  .about-copy h2,
  .about-copy p {
    color: inherit !important;
  }

  .btn.primary,
  .full-btn,
  .builder-next,
  .final-send-button {
    color: #fff !important;
  }

  img,
  video {
    filter: none !important;
  }
}

@media (max-width: 760px) {
  .topbar {
    position: sticky !important;
    top: 0;
    min-height: 76px;
    padding: 8px 12px !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 8px 10px !important;
    align-items: center !important;
    background: rgba(255, 250, 247, .97) !important;
    backdrop-filter: blur(12px);
  }

  .brand {
    justify-content: flex-start !important;
    margin: 0 !important;
    align-self: start;
  }

  .brand img {
    width: 64px !important;
    max-height: 58px;
    object-fit: contain;
  }

  .nav {
    min-width: 0;
    justify-content: flex-start !important;
    align-content: center;
    gap: 3px 12px !important;
    font-size: 13px !important;
    line-height: 1.12;
  }

  .nav a {
    padding: 4px 0 !important;
    white-space: nowrap;
  }

  /* The third header block contains the account/cart actions. Keep it in the content column
     instead of letting CSS Grid auto-place it at the far-left edge on narrow screens. */
  .topbar > :nth-child(3) {
    grid-column: 2 !important;
    justify-self: start !important;
    margin: 0 !important;
    padding-left: 0 !important;
    min-width: 0;
  }

  .topbar .bag,
  .topbar .mini-link {
    font-size: 12px;
  }
}

@media (max-width: 430px) {
  .topbar {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    padding: 7px 10px !important;
    gap: 6px 8px !important;
  }

  .brand img {
    width: 54px !important;
  }

  .nav {
    gap: 2px 10px !important;
    font-size: 12.2px !important;
  }

  .topbar > :nth-child(3) {
    transform: translateX(4px);
  }
}