/* ========================================
   BASE STYLES
   ======================================== */

html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: 'Inter', sans-serif;
  color: #333333;
  /* Define a cor padrão do texto para primary-dark */
  background-color: #f9fafb;
  /* Alterado para a nova cor de fundo */
}

/* ========================================
   LAYOUT & UTILITY
   ======================================== */

.container {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ========================================
   MAIN CAROUSEL (3-STEP IMAGE LOAD)
   ======================================== */

.carousel-container {
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.3s ease-in-out;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
  scroll-snap-align: start;
}

/* MODIFICADO: Usando 'padding-bottom' para forçar a proporção 1:1 de forma robusta */
.image-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  /* Define a largura máxima */
  overflow: hidden;
  margin: 0 auto;
  height: 0;
  /* <NOVO */
  padding-bottom: 100%;
  /* <NOVO (100% da largura = proporção 1:1) */
}

/* MODIFICADO: TODAS as imagens agora são position: absolute */
.image-wrapper img {
  position: absolute;
  /* <MODIFICADO */
  inset: 0;
  /* <MODIFICADO */
  width: 100%;
  height: 100%;
  /* <MODIFICADO de auto para 100% */
  object-fit: contain;
  transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease;
  border-radius: 0;
}

/* Bloco NOVO de 3 etapas */
/* Camada 1: 'pequeno' - Define o layout, muito borrado */
.image-wrapper .pequeno {
  filter: blur(20px);
  transform: scale(1.05);
  opacity: 1;
  z-index: 1;
  /* <ADICIONADO DE VOLTA */
}

/* Camada 2: 'medio' - Absoluta, sobrepõe a 'pequeno' */
.image-wrapper .medio {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  filter: blur(10px);
  /* Menos blur que o 'pequeno' */
  transform: scale(1.03);
  z-index: 2;
  /* Acima do 'pequeno' */
}

/* Camada 3: 'full' - Absoluta, sobrepõe a 'medio' */
.image-wrapper .full {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  filter: blur(0px);
  transform: scale(1.01);
  z-index: 3;
  /* Acima do 'medio' */
}

.image-wrapper .loaded {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: scale(1) !important;
}

/* ========================================
   THUMBNAIL CAROUSEL
   ======================================== */

.thumbnail-carousel-track {
  display: flex;
  transition: transform 0.3s ease-in-out;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.thumbnail-carousel-track::-webkit-scrollbar {
  display: none;
}

.thumbnail-slide {
  min-width: 60px;
  height: 60px;
  box-sizing: border-box;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  overflow: hidden;
  opacity: 0.6;
  transition: border-color 0.3s ease, opacity 0.3s ease;
  scroll-snap-align: start;
}

.thumbnail-slide.active {
  border-color: #D1A100;
  /* Cor alterada para gold */
  opacity: 1;
}

.thumbnail-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   PURCHASE OPTIONS & RADIO BUTTONS
   ======================================== */

.purchase-option {
  transition: all 0.3s;
}

.purchase-option.active {
  border-color: #D1A100;
  /* Cor alterada para gold */
  box-shadow: 0 0 0 2px #D1A10080;
  /* Cor alterada para gold */
}

.option-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.custom-radio {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #333333;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
}

.custom-radio-inner {
  width: 0.75rem;
  height: 0.75rem;
  background-color: transparent;
  border-radius: 9999px;
  transition: background-color 0.2s;
}

.option-radio:checked+.purchase-option .custom-radio {
  border-color: #D1A100;
  /* Cor alterada para gold */
}

.option-radio:checked+.purchase-option .custom-radio-inner {
  background-color: #D1A100;
  /* Cor alterada para gold */
}

#cart-price,
#cart-compare-price {
  display: inline-block;
}

/* ========================================
   STICKY ADD TO CART BUTTON
   ======================================== */

.sticky-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0;
  padding: 1rem;
  background-color: #FFFFFF;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

.sticky-button-container.visible {
  transform: translateY(0);
  opacity: 1;
}

/* ========================================
   SECTION TRANSITIONS (TRIANGLES)
   ======================================== */

/* Transição DE: #f9fafb (Topo) -> PARA: deep-purple (Fundo) */
.section-transition-triangle {
  position: relative;
  width: 100%;
  height: 60px;
  overflow: hidden;
  background-color: #f9fafb;
  margin-bottom: -2px;
  /* CHANGED: from -1px to -2px for more overlap */
}

/* Triângulo Apontando para Cima (cor da seção inferior) */
.section-transition-triangle svg {
  position: absolute;
  top: 0;
  /* CHANGED: from 'bottom: 0' to 'top: 0' */
  left: 0;
  width: 100%;
  height: 100%;
  fill: #1A0E3E;
}

/* Transição DE: Branco (Ingredientes) -> PARA: #f9fafb (Benefícios) */
.inverted-triangle-transition-2 {
  position: relative;
  width: 100%;
  height: 60px;
  /* Reduzido de 100px para 60px */
  overflow: hidden;
  /* Fundo da div é a cor da seção ANTERIOR (White) */
  background-color: #FFFFFF;
  margin-bottom: -1px;
}

/* Triângulo Apontando para Cima (cor da seção inferior) */
.inverted-triangle-transition-2 svg {
  position: absolute;
  bottom: 0;
  /* Alinha o triângulo na parte inferior da div */
  left: 0;
  width: 100%;
  height: 100%;
  /* A cor de preenchimento é a cor da seção de destino (#f9fafb) */
  fill: #f9fafb;
}

/* ========================================
   BOTTLE & CAPSULE ANIMATION
   ======================================== */

.animated-capsule,
.animated-bottle {
  /* Otimização de performance */
  will-change: transform, opacity;
}

/* --- ESTADO INICIAL (OCULTO / FORA DA TELA) --- */

.animated-bottle {
  opacity: 0;
  transform: scale(0.85) translateY(20px);
  /* Transição de ENTRADA: suave e elegante */
  transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s,
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}

.capsule-1 {
  transform: translateX(-300px) translateY(-50px) rotate(15deg) scale(0.8);
  opacity: 0;
  /* Transição de ENTRADA: bounce elegante */
  transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0s,
    opacity 0.6s ease-out 0.2s;
  animation: none;
}

.capsule-2 {
  transform: translateX(300px) translateY(50px) rotate(-30deg) scale(0.8);
  opacity: 0;
  /* Transição de ENTRADA: bounce elegante com delay levemente diferente */
  transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
    opacity 0.6s ease-out 0.35s;
  animation: none;
}

/* --- ESTADO VISÍVEL (QUANDO .is-visible É ADICIONADO) --- */

.is-visible .animated-bottle {
  opacity: 1;
  transform: scale(1) translateY(0);
  /* Transição de SAÍDA: rápida e suave */
  transition: opacity 0.5s ease-out 0s,
    transform 0.5s ease-out 0s;
  animation: bottle-breath 6s ease-in-out infinite 1.5s;
}

.is-visible .capsule-1 {
  transform: translateX(0) translateY(0) rotate(15deg) scale(1);
  opacity: 1;
  /* Transição de SAÍDA: suave */
  transition: transform 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.3s,
    opacity 0.4s ease-out 0.2s;
  animation: premium-float-1 4s ease-in-out infinite 1s;
}

.is-visible .capsule-2 {
  transform: translateX(0) translateY(0) rotate(-30deg) scale(1);
  opacity: 1;
  /* Transição de SAÍDA: suave */
  transition: transform 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.3s,
    opacity 0.4s ease-out 0.2s;
  animation: premium-float-2 4.5s ease-in-out infinite 1.2s;
}

/* --- ANIMAÇÕES DE FLUTUAÇÃO PREMIUM --- */

/* Float para cápsula 1 - movimento Y + rotação sutil */
@keyframes premium-float-1 {

  0%,
  100% {
    transform: translateY(0px) rotate(15deg);
  }

  25% {
    transform: translateY(-12px) rotate(17deg);
  }

  50% {
    transform: translateY(-6px) rotate(14deg);
  }

  75% {
    transform: translateY(-15px) rotate(16deg);
  }
}

/* Float para cápsula 2 - movimento Y + rotação sutil (diferente) */
@keyframes premium-float-2 {

  0%,
  100% {
    transform: translateY(0px) rotate(-30deg);
  }

  25% {
    transform: translateY(-10px) rotate(-28deg);
  }

  50% {
    transform: translateY(-8px) rotate(-32deg);
  }

  75% {
    transform: translateY(-14px) rotate(-29deg);
  }
}

/* Frasco com sutil breathing effect quando visível */
@keyframes bottle-breath {

  0%,
  100% {
    transform: scale(1) translateY(0);
  }

  50% {
    transform: scale(1.02) translateY(-3px);
  }
}

/* ========================================
   OFFER TIMER BANNER
   ======================================== */

.offer-timer-banner {
  width: 100%;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  color: white;
  font-weight: 700;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.375;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: slide-down 0.5s ease-out;
  position: relative;
  overflow: hidden;
  /* CRITICAL: Ensure proper text wrapping */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  background-color: red;
}

/* Make banner content flexible */
.offer-timer-banner>span {
  display: inline-block;
  max-width: 100%;
}

/* New wrapper for better text control */
.banner-text-wrapper {
  display: inline;
}

.banner-main-text {
  display: inline;
}

/* Expired banner specific styles */
.expired-icon {
  font-size: 1.2em;
  margin-right: 0.5rem;
}

.expired-text {
  font-weight: 700;
  margin-right: 0.5rem;
}

.expired-cta {
  display: inline;
  font-weight: 600;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* --- Medium Devices & Down (< 767px) --- */
@media (max-width: 767px) {

  /* Fix main product section spacing */
  .main-product-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Ensure banner has proper spacing */
  .offer-timer-banner {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    /* Remove rounded corners on mobile */
  }

  /* Ensure carousel doesn't overflow */
  .carousel-container {
    border-radius: 0;
    box-shadow: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    margin-top: 0 !important;
    overflow: hidden;
    /* CRITICAL */
  }

  /* Fix image wrapper aspect ratio */
  .image-wrapper {
    width: 100%;
    max-width: 100%;
    /* Don't exceed screen width */
    margin: 0 auto;
  }

  /* Prevent carousel track overflow */
  .carousel-track {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .carousel-slide {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .container.mx-auto.px-4.py-12 {
    /* Ajustado de py-8 para py-12 */
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .md\:w-1\/2 {
    width: 100%;
  }

  /* Make animated container slightly smaller on mobile */
  #animated-product-container,
  #animated-product-container-2 {
    max-width: 280px;
    /* Adjust max-width for mobile if needed */
  }

  /* Fix purchase options on mobile */
  .purchase-option {
    padding: 0.875rem;
    /* Slightly reduced */
    font-size: 0.9rem;
    /* Slightly smaller */
  }

  /* Adjust price display on mobile */
  .purchase-option .text-xl {
    font-size: 1.125rem;
    /* Slightly smaller */
  }

  /* Fix sticky button container */
  .sticky-button-container {
    padding: 0.875rem 1rem;
    /* Adjusted padding */
    left: 0;
    right: 0;
    width: 100%;
  }

  /* Ensure buttons don't overflow */
  .sticky-button-container button,
  #addToCartBtn {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    white-space: normal;
    /* Allow wrapping if needed */
    word-wrap: break-word;
  }

  /* Fix FAQ section on mobile */
  .faq-item {
    padding: 0.875rem;
  }

  .faq-question {
    font-size: 0.9rem;
  }

  .faq-answer {
    font-size: 0.85rem;
  }

  /* Fix footer on mobile */
  footer .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  footer .grid {
    gap: 2rem;
  }

  /* Fix payment methods section on mobile */
  footer .flex.flex-wrap {
    gap: 0.75rem;
  }

  footer .bg-white.rounded {
    padding: 0.5rem 0.75rem;
  }

  /* Fix review section on mobile */
  .cc-modal {
    width: 95%;
    max-width: none;
  }

  #review-list-container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* --- Small Devices (< 480px) --- */
@media (max-width: 480px) {

  /* Mobile layout for expired banner */
  .expired-cta {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85em;
  }
}

/* ========================================
   CRITICAL MOBILE OVERFLOW FIXES
   ======================================== */

/* --- Medium Devices & Down (< 767px) --- */
@media (max-width: 767px) {
  html {
    overflow-x: hidden;
    width: 100%;
  }

  body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }

  /* Fix offer banner specifically */
  .offer-timer-banner {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0.75rem 0.875rem !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Ensure banner text wraps properly */
  .banner-text-wrapper,
  .banner-main-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    font-size: 0.8125rem !important;
    /* Slightly smaller on mobile */
    line-height: 1.4 !important;
  }

  /* Stack urgent warning on new line */
  .timer-urgent-text {
    display: block !important;
    margin-top: 0.35rem !important;
    font-size: 0.8125rem !important;
  }

  /* Expired banner mobile fixes */
  .expired-text {
    font-size: 0.875rem !important;
  }

  .expired-cta {
    display: block !important;
    margin-top: 0.35rem !important;
    font-size: 0.8125rem !important;
  }

  /* Fix containers */
  .container,
  .max-w-7xl {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Fix all sections */
  section,
  .bg-deep-purple,
  .bg-white {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* --- Extra Small Devices (< 375px) --- */
@media (max-width: 374px) {
  .offer-timer-banner {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.75rem !important;
  }

  .banner-main-text {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
  }

  .timer-icon {
    font-size: 1rem !important;
    margin-right: 0.375rem !important;
  }
}