/**
 * Apple Design foundations (WWDC / apple-design skill)
 * Applied to the public storefront without changing brand colors.
 */

:root {
  --apple-spring-response: 400ms;
  --apple-press-scale: 0.97;
  --apple-material-bg: rgba(255, 255, 255, 0.72);
  --apple-material-border: rgba(255, 255, 255, 0.45);
  --apple-material-blur: 20px;
}

/* Overlay do parcelamento: vidro fosco em vez de preto sólido */
.vitrine-parcelamento-overlay,
[id^="overlay-parcelamento-"] {
  background: rgba(15, 23, 42, 0.18) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}

/* Só o card aberto fica nítido acima do overlay */
body.vitrine-parcelamento-open .product-card:not(.vitrine-card-parcelamento-focus),
body.vitrine-parcelamento-open article[data-produto-id]:not(.vitrine-card-parcelamento-focus) {
  opacity: 0.22;
  filter: saturate(0.55);
  pointer-events: none;
  transition: opacity 200ms ease, filter 200ms ease;
}

body.vitrine-parcelamento-open .vitrine-card-parcelamento-focus {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85),
    0 18px 48px rgba(15, 23, 42, 0.22);
  transition: box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Evita que o overlay “coma” o card em foco (ele sobe com position:fixed via JS) */
body.vitrine-parcelamento-open .vitrine-parcelamento-overlay,
body.vitrine-parcelamento-open [id^="overlay-parcelamento-"] {
  background: rgba(15, 23, 42, 0.28) !important;
}

/* 15 — Typography: size-specific tracking / leading */
h1, .apple-display {
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-optical-sizing: auto;
}

h2 {
  letter-spacing: -0.015em;
  line-height: 1.15;
}

h3 {
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* 1 — Response on press, not only hover/release */
.product-card a,
.product-card button,
.btn-add-cart,
.carrinho-btn,
.catalogo-carousel-prev,
.catalogo-carousel-next,
#banner-carousel button,
a[href*="whatsapp"],
.vitrine-paginacao-btn,
.modelo-swatch,
.cor-swatch,
[data-obs-toggle],
button[onclick*="toggleShareMenu"],
button[onclick*="toggleParcelamento"] {
  transition:
    transform 100ms ease-out,
    box-shadow var(--apple-spring-response) cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

.product-card button:active,
.btn-add-cart:active,
.carrinho-btn:active,
.catalogo-carousel-prev:active,
.catalogo-carousel-next:active,
#banner-carousel button:active,
.vitrine-paginacao-btn:active,
a.snap-start:active {
  transform: scale(var(--apple-press-scale));
}

/* 12 — Materials: translucent chrome for floating controls */
.catalogo-carousel-prev,
.catalogo-carousel-next,
#banner-carousel button.absolute {
  background: var(--apple-material-bg) !important;
  -webkit-backdrop-filter: blur(var(--apple-material-blur)) saturate(180%);
  backdrop-filter: blur(var(--apple-material-blur)) saturate(180%);
  border: 1px solid var(--apple-material-border);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

/* Sticky search / chrome feel */
#catalogos-section form .relative input[name="busca"] {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}

/* 7 — Spatial consistency: origin-aware share menus */
[id^="share-menu-"] {
  transform-origin: top right;
}

/* 11 — Prefer compositor-friendly motion */
#banner-track {
  will-change: transform;
  transition: transform var(--apple-spring-response) cubic-bezier(0.22, 1, 0.36, 1);
}

#catalogo-carousel-track {
  scroll-behavior: smooth;
}

/* 14 — Reduced motion / transparency / contrast */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .product-card button:active,
  .btn-add-cart:active,
  .carrinho-btn:active,
  a.snap-start:active {
    transform: none;
  }

  #banner-track {
    transition: none !important;
    will-change: auto;
  }

  #catalogo-carousel-track {
    scroll-behavior: auto;
  }

  .product-badge,
  .animate-pulse-catalogo,
  .floating-cart,
  .discount-badge {
    animation: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .catalogo-carousel-prev,
  .catalogo-carousel-next,
  #banner-carousel button.absolute,
  #catalogos-section form .relative input[name="busca"] {
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .vitrine-parcelamento-overlay,
  [id^="overlay-parcelamento-"] {
    background: rgba(15, 23, 42, 0.45) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.vitrine-parcelamento-open .product-card:not(.vitrine-card-parcelamento-focus),
  body.vitrine-parcelamento-open article[data-produto-id]:not(.vitrine-card-parcelamento-focus) {
    opacity: 0.35;
    filter: none;
  }
}

@media (prefers-contrast: more) {
  .catalogo-carousel-prev,
  .catalogo-carousel-next,
  #banner-carousel button.absolute {
    border-color: #111827 !important;
    background: #ffffff !important;
  }

  .product-card {
    border-color: #111827 !important;
  }
}