/* Small-screen fixes that the legacy theme lacked. Loaded after the legacy CSS on every page. */

/* Footer: the support email is set at 32px and ran past the right edge on phones. */
@media (max-width: 575px) {
  .site-footer .contact-link-x.email-x {
    font-size: clamp(18px, 6vw, 32px);
    overflow-wrap: anywhere; /* last resort for very long addresses */
    max-width: 100%;
  }
}

/* Product page: keep the short cart label ("In Cart") on one line inside the price bar. */
@media (max-width: 600px) {
  .dz-product-detail .product-num .btn,
  .dz-product-detail .product-num button { white-space: nowrap; }
}

/* Home "Sweet Styles Await" slider: between 768px and 992px the legacy layout turns into a
   column with align-items:flex-start, so the slider wrapper shrank to its content and Swiper
   kept growing it (slides reached ~13 million px and froze tablets). Pin it to the row width. */
@media (max-width: 992px) {
  .featured-layout > .featured-slider-wrap {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
  }
}

/* Several legacy home sections are bare .row elements (-15px side margins, no container), so
   the page scrolled ~15px sideways. The live site hides this with body{overflow-x:hidden}, but
   only below 767px, so tablets and desktops scrolled. overflow-x:clip trims the stray pixels
   at every width without creating a scroll container, so sticky headers keep working. */
.page-wraper { overflow-x: clip; }