/**
 * VOC Sourcing — mobile & small-screen fixes
 * Load after voc-site.css / voc-footer.css
 */

html {
  overflow-x: clip;
}

/* Safe areas (notched phones) */
:root {
  --voc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --voc-safe-right: env(safe-area-inset-right, 0px);
}

.voc-fab-stack {
  bottom: calc(var(--voc-fab-bottom) + var(--voc-safe-bottom));
  right: calc(var(--voc-fab-right) + var(--voc-safe-right));
}

body.voc-shop-page .voc-shop-fab {
  bottom: calc(
    var(--voc-fab-bottom) + var(--voc-fab-stack-height) + var(--voc-fab-gap) + var(--voc-safe-bottom)
  );
  right: calc(var(--voc-fab-right) + var(--voc-safe-right));
}

/* Side dock — sit above WhatsApp / quote stack (was overlapping on phones) */
@media (max-width: 991px) {
  .voc-side-dock {
    bottom: calc(var(--voc-fab-bottom) + var(--voc-fab-stack-height) + 0.75rem + var(--voc-safe-bottom));
    right: var(--voc-safe-right);
  }

  body.voc-shop-page .voc-side-dock {
    bottom: calc(
      var(--voc-fab-bottom) + var(--voc-fab-stack-height) + var(--voc-fab-gap) + var(--voc-fab-size) +
        0.85rem + var(--voc-safe-bottom)
    );
  }
}

/* No horizontal scroll from full-bleed sections */
.voc-bleed {
  width: 100%;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Containers — tighter gutters on narrow screens */
@media (max-width: 575px) {
  .voc-container,
  .voc-about-home__grid,
  .voc-incoterm-grid,
  .voc-contact-social,
  .voc-contact-grid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .voc-navbar__inner {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    gap: 0.5rem;
  }

  .voc-navbar__logo {
    height: 48px;
    max-width: 160px;
  }

  .voc-navbar__logo-wrap {
    padding: 0.25rem 0.45rem;
  }

  .voc-heading {
    font-size: clamp(1.45rem, 6vw, 2rem);
  }

  .voc-hero {
    min-height: min(88vh, 720px);
    min-height: min(88dvh, 720px);
  }

  .voc-hero__content {
    padding: 5rem 0.85rem 5.5rem;
  }

  .voc-hero__title {
    font-size: clamp(1.65rem, 7.5vw, 2.25rem);
  }

  .voc-hero__eyebrow {
    font-size: 0.65rem;
    padding: 0.35rem 0.75rem;
  }

  .voc-hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
  }

  .voc-hero__btn {
    width: 100%;
    justify-content: center;
  }

  .voc-about-home,
  .voc-find-cta,
  .voc-social-home-section,
  .voc-incoterm-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .voc-find-cta__panel {
    padding: 1.35rem 1rem;
    border-radius: 20px;
  }

  .voc-find-cta__cats {
    grid-template-columns: 1fr;
  }

  .voc-cta-section .voc-btn-primary,
  .voc-cta-section .voc-btn-outline {
    display: block;
    width: 100%;
    max-width: 20rem;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .voc-contact-hero {
    padding: 3.5rem 1rem 2.75rem;
  }

  .voc-contact-hero h1 {
    max-width: none;
    font-size: clamp(1.5rem, 7vw, 2.1rem);
  }

  .voc-contact-social__col-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .voc-contact-social__follow {
    width: 100%;
    text-align: center;
  }

  .voc-contact-youtube-grid {
    grid-template-columns: 1fr;
  }

  .voc-contact-youtube-grid .voc-contact-yt-card:first-child {
    grid-column: auto;
  }

  .voc-ig-shell {
    min-width: 0;
    max-width: 100%;
  }

  .voc-ig-embed {
    min-width: 0;
    width: 100%;
  }

  .voc-ig-profile__stats {
    gap: 0.5rem;
  }

  .voc-incoterm-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .voc-footer .footer__form {
    flex-direction: column;
    align-items: stretch;
  }

  .voc-footer .footer__form input,
  .voc-footer .footer__form button {
    width: 100%;
  }

  .voc-shop-topbar__inner {
    padding: 0.65rem 0.75rem;
    gap: 0.5rem;
  }

  .voc-shop-cart__panel {
    max-width: 100%;
  }

  .voc-shop-cart-item {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .voc-shop-cart-item__qty {
    justify-self: start;
  }
}

@media (max-width: 380px) {
  .voc-ig-profile__actions {
    flex-wrap: wrap;
  }

  .voc-ig-profile__btn--follow,
  .voc-ig-profile__btn--message {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
  }

  .voc-ig-profile__btn--icon {
    flex: 1 1 100%;
    width: 100%;
    min-height: 32px;
  }
}