/* =============================================
   Site-wide mobile responsiveness
   ============================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
video,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

/* Safe horizontal padding on small viewports */
@media screen and (max-width: 575px) {
  .container,
  .container-fluid {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}

/* Section headings — typography.css tokens; tighten spacing on phones */
@media screen and (max-width: 575px) {
  section .heading,
  .hp-section-head__title {
    margin-bottom: 18px;
  }
}

/* USP / highlight badges */
@media screen and (max-width: 767px) {
  .usp-sec .highlight,
  .highlight {
    font-size: clamp(1rem, 4vw, 1.35rem) !important;
    line-height: 1.4 !important;
    padding: 14px 20px !important;
    max-width: 100%;
    word-break: break-word;
  }
}

/* Legacy products sections (chocolates, gifting, etc.) */
@media screen and (max-width: 767px) {
  .products-sec {
    padding: 40px 0;
    overflow-x: clip;
  }

  .products-sec .products {
    padding: 24px 0;
  }

  .products-sec .products .content {
    margin: 12px 0;
    padding: 0 4px;
  }

  .products-sec .products h3 {
    text-align: center;
  }

  .products-sec .products .buttons-part {
    margin-left: 0;
    justify-content: center;
    gap: 10px;
  }

  .products-sec .products .btn-part a {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    max-width: 300px;
  }
}

/* Category / product carousels — keep controls on screen */
@media screen and (max-width: 767px) {
  .owl-carousel .owl-nav button.owl-prev {
    left: 4px !important;
  }

  .owl-carousel .owl-nav button.owl-next {
    right: 4px !important;
  }

  .owl-carousel .owl-nav button {
    width: 38px !important;
    height: 38px !important;
  }
}

/* Cloffy / Fitlys stacked product grids — single-row flex, not 2-col grid */
@media screen and (max-width: 575px) {
  .cloffy-products--stack .cloffy-cat-grid:not(.cloffy-cat-grid--scroll),
  .page-fitlys .cloffy-cat-grid:not(.cloffy-cat-grid--scroll) {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: unset !important;
  }

  .cloffy-cat-grid--scroll .cloffy-cat-item {
    width: min(72vw, 200px) !important;
  }

}

/* Home — loved products carousel */
@media screen and (max-width: 575px) {
  .home-cafe .hp-loved {
    overflow-x: clip;
  }

  .home-cafe .hp-loved__slide {
    padding: 0 6px;
  }
}

/* Premium marquee / stats */
@media screen and (max-width: 767px) {
  .premium-marquee__track,
  .hp-marquee__track {
    overflow: hidden;
  }

  .premium-stats__grid,
  .hp-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* Testimonials */
@media screen and (max-width: 575px) {
  .testimonials-sec {
    padding-left: 0;
    padding-right: 0;
    overflow-x: clip;
  }

  .testimonials-sec .testimonial .info-part {
    padding: 20px 16px !important;
  }

}

/* Story sections */
@media screen and (max-width: 575px) {
  .story-sec {
    padding-top: 40px;
  }

  .story-sec .content h3,
  .prod-tech .story-text h3 {
    width: 100%;
    padding: 0 8px;
  }
}

/* Gifting / Dhatri page-specific grids */
@media screen and (max-width: 767px) {
  .gift-collection__grid,
  .dhatri-range__grid,
  .dhatri-pillars__grid {
    grid-template-columns: 1fr;
  }
}

/* Prevent long URLs/emails from breaking layout */
@media screen and (max-width: 767px) {
  .footer-sec a,
  .footer-sec .info {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Touch-friendly tap targets in nav panels */
@media screen and (max-width: 991px) {
  .noir-panel__link {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}

/* Reduce motion journey fallback already in journey-scroll.css */
@media screen and (max-width: 399px) {
  :root {
    --announcement-bar-height: 36px;
  }

  .announcement-bar__item {
    font-size: 11px;
  }
}