/* Cross-platform hardening: desktop, Android Chrome and iOS Safari */

.button,
.icon-button,
.category-button,
.offer-card,
.product-card,
.quick-item,
.sergel-card,
.whatsapp-float,
.whatsapp-contact-float,
.mobile-menu nav a {
  touch-action: manipulation;
}

.category-button {
  min-height: 44px;
}

.mobile-menu {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: contain;
}

.mobile-menu nav a {
  min-height: 52px;
  display: flex;
  align-items: center;
}

/* Visual fallback: if the main hero image is late or fails, another local image remains behind it. */
.hero-image-frame {
  background-color: var(--purple-900);
  background-image: url('../img/hero-copo-acai-morango.png?v=20260816-2');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.product-card-media,
.modal-media,
.gallery-item,
.facade-image,
.montagem-media {
  background-color: var(--purple-900);
}

.hero-image-frame img,
.product-card-media img,
.gallery-item img,
.facade-image img,
.montagem-media img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Product video stays above its poster; the poster remains available as a real fallback. */
.product-card-media video {
  opacity: 1 !important;
}

/* Critical modal rule: never let an empty hidden video cover a normal product image. */
.modal-media [data-modal-video][hidden],
.modal-media [data-modal-video]:not([src]) {
  display: none !important;
  opacity: 0 !important;
}

.modal-media [data-modal-video]:not([hidden])[src] {
  display: block !important;
  opacity: 1 !important;
}

.modal-media [data-modal-media][hidden] {
  display: none !important;
}

/* A mídia só pode forçar visibilidade quando o modal estiver realmente aberto. */
.product-modal.open .modal-media [data-modal-media]:not([hidden]) {
  display: block;
  visibility: visible;
}

/* Modal fechado nunca pode virar uma camada invisível sobre os cliques da página. */
.product-modal[aria-hidden='true'],
.product-modal:not(.open) {
  pointer-events: none !important;
}

.product-modal.open[aria-hidden='false'] {
  pointer-events: auto;
}

/* Keep the family bar fully outside the hero and visually connect it to offers. */
.quick-bar {
  margin-top: 0 !important;
  padding-top: 18px;
  background: var(--cream-50);
}

/* Quick cards are real actions: visual behavior must match their click behavior. */
.quick-item[role='button'] {
  cursor: pointer;
  transition: background .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}

.quick-item[role='button']:hover {
  background: rgba(78, 15, 96, .035);
}

.quick-item[role='button']:focus-visible,
.sergel-card[role='link']:focus-visible {
  position: relative;
  z-index: 2;
  outline: 3px solid var(--yellow-500);
  outline-offset: -3px;
}

.sergel-card[role='link'] {
  cursor: pointer;
}

.sergel-card[role='link']:focus-visible {
  box-shadow: 0 20px 48px rgba(49, 5, 63, .2);
}

/* The global section spacing is generous; offers need a tighter top rhythm after the quick bar. */
.offers {
  padding-top: clamp(36px, 4.5vw, 56px) !important;
}

/*
 * Floating CTAs:
 * - Desktop/notebook: compact, round brand icons by default; CTA expands only on hover/focus.
 * - iOS/Android/touch: always stays circular so it never covers the site.
 */
.whatsapp-float,
.whatsapp-contact-float {
  width: 58px;
  min-width: 58px;
  height: 58px;
  min-height: 58px;
  justify-content: flex-start;
  gap: 0;
  padding: 0 15px !important;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 50%;
  transition:
    width .32s var(--ease),
    border-radius .32s var(--ease),
    transform .25s var(--ease),
    box-shadow .25s ease,
    opacity .2s ease;
}

.whatsapp-float {
  color: var(--purple-950) !important;
  background: #fff !important;
  border: 1px solid rgba(33, 33, 33, .08);
  box-shadow: 0 16px 40px rgba(31, 35, 41, .2) !important;
}

.whatsapp-float svg,
.whatsapp-contact-float svg {
  display: none !important;
}

.whatsapp-float::before,
.whatsapp-contact-float::before {
  content: '';
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Multicolor Google Maps pin: recognizable even with the CTA collapsed. */
.whatsapp-float::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 4C15.7 4 9 10.7 9 19c0 10.7 15 25 15 25s15-14.3 15-25C39 10.7 32.3 4 24 4z'/%3E%3Cpath fill='%23FBBC04' d='M9 19c0 5.1 3.4 11 7.2 15.9L24 19 12.3 11.2A14.9 14.9 0 0 0 9 19z'/%3E%3Cpath fill='%2334A853' d='M24 44s7.8-7.5 12-15.3L24 19l-7.8 15.9C20.1 40.1 24 44 24 44z'/%3E%3Cpath fill='%234285F4' d='M35.7 10.5A14.9 14.9 0 0 0 24 4a14.9 14.9 0 0 0-11.7 6.5L24 19l11.7-8.5z'/%3E%3Ccircle cx='24' cy='19' r='5.2' fill='white'/%3E%3C/svg%3E");
}

.whatsapp-contact-float {
  position: fixed;
  right: 18px;
  bottom: 88px;
  z-index: 901;
  display: inline-flex;
  align-items: center;
  color: #fff;
  background: #25D366;
  box-shadow: 0 18px 44px rgba(37, 211, 102, .32);
  font-size: .84rem;
  font-weight: 900;
  line-height: 1;
}

/* WhatsApp brand-style speech bubble + handset icon, local and crisp. */
.whatsapp-contact-float::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='white' d='M16 3.5A12.4 12.4 0 0 0 5.4 22.3L4 28.5l6.4-1.7A12.4 12.4 0 1 0 16 3.5zm0 2.4a10 10 0 1 1-5.1 18.6l-.5-.3-3.5.9.9-3.4-.3-.5A10 10 0 0 1 16 5.9z'/%3E%3Cpath fill='white' d='M11.1 9.8c-.3-.7-.7-.7-1-.7h-.8c-.3 0-.8.1-1.2.6-.4.5-1.5 1.5-1.5 3.6s1.6 4.2 1.8 4.5c.2.3 3.1 4.8 7.6 6.5 3.8 1.5 4.5 1.2 5.3 1.1.8-.1 2.6-1.1 3-2.1.4-1 .4-1.9.3-2.1-.1-.2-.4-.3-.8-.5l-2.8-1.3c-.4-.2-.7-.3-1 .3l-1.3 1.6c-.2.3-.5.3-.9.1-2.4-1.2-4-2.1-5.6-4.8-.4-.7.4-.7 1.2-2.3.1-.3.1-.6 0-.8z'/%3E%3C/svg%3E");
}

.whatsapp-float span,
.whatsapp-contact-float span {
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-width .32s var(--ease),
    margin-left .32s var(--ease),
    opacity .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-float:hover,
  .whatsapp-float:focus-visible {
    width: 168px;
    border-radius: 999px;
  }

  .whatsapp-contact-float:hover,
  .whatsapp-contact-float:focus-visible {
    width: 190px;
    border-radius: 999px;
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(37, 211, 102, .4);
  }

  .whatsapp-float:hover span,
  .whatsapp-float:focus-visible span,
  .whatsapp-contact-float:hover span,
  .whatsapp-contact-float:focus-visible span {
    max-width: 140px;
    margin-left: 10px;
    opacity: 1;
  }
}

.whatsapp-contact-float:focus-visible,
.whatsapp-float:focus-visible {
  outline: 3px solid var(--yellow-500);
  outline-offset: 3px;
}

.button-whatsapp {
  color: #fff !important;
  background: #25D366 !important;
  box-shadow: 0 14px 30px rgba(37, 211, 102, .2);
}

.button-whatsapp:hover,
.button-whatsapp:focus-visible {
  box-shadow: 0 18px 36px rgba(37, 211, 102, .3);
}

.modal-actions .button {
  min-width: 0;
  flex: 1 1 190px;
}

/* Floating actions are unnecessary while a product modal already exposes its own CTAs. */
body.modal-open .whatsapp-float,
body.modal-open .whatsapp-contact-float {
  opacity: 0;
  pointer-events: none;
}

@supports (-webkit-touch-callout: none) {
  .hero-image-frame img,
  .product-card-media img,
  .gallery-item img,
  .facade-image img,
  .montagem-media img {
    transform: translateZ(0);
  }
}

@supports (padding: max(0px)) {
  .site-header {
    top: max(8px, env(safe-area-inset-top));
  }

  .mobile-menu {
    padding-top: max(14px, calc(env(safe-area-inset-top) + 10px));
    padding-right: max(14px, calc(env(safe-area-inset-right) + 10px));
    padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
    padding-left: max(14px, calc(env(safe-area-inset-left) + 10px));
  }

  .whatsapp-float {
    right: max(18px, calc(env(safe-area-inset-right) + 12px));
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  }

  .whatsapp-contact-float {
    right: max(18px, calc(env(safe-area-inset-right) + 12px));
    bottom: max(88px, calc(env(safe-area-inset-bottom) + 82px));
  }

  @media (max-width: 760px) {
    .modal-actions {
      padding-bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px)) !important;
    }

    .whatsapp-float {
      right: max(12px, calc(env(safe-area-inset-right) + 8px));
      bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
    }

    .whatsapp-contact-float {
      right: max(12px, calc(env(safe-area-inset-right) + 8px));
      bottom: max(72px, calc(env(safe-area-inset-bottom) + 68px));
    }
  }
}

@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .quick-bar {
    margin-top: 0 !important;
    padding-top: 14px;
  }

  .offers {
    padding-top: 30px !important;
  }

  /* Touch devices: keep both CTAs icon-only and circular at all times. */
  .whatsapp-float,
  .whatsapp-contact-float {
    width: 50px;
    min-width: 50px;
    height: 50px;
    min-height: 50px;
    padding: 0 11.5px !important;
    gap: 0;
    border-radius: 50%;
    justify-content: flex-start;
    -webkit-tap-highlight-color: transparent;
  }

  .whatsapp-float span,
  .whatsapp-contact-float span {
    display: none !important;
  }

  .whatsapp-float::before,
  .whatsapp-contact-float::before {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }

  .modal-dialog {
    height: 92vh;
    height: 92dvh;
    max-height: 92vh;
    max-height: 92dvh;
  }

  .modal-media {
    min-height: 190px !important;
    max-height: 30vh;
    max-height: 30dvh;
  }

  .modal-actions {
    gap: 8px;
  }
}

@media (max-width: 520px) {
  .modal-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .modal-actions .button {
    width: 100%;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  .whatsapp-float,
  .whatsapp-contact-float {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0 9.5px !important;
  }

  .whatsapp-contact-float {
    bottom: 64px;
  }
}