/**
 * Mobile / tablet viewport & Elementor lightbox fixes
 * Prevents horizontal clipping and keeps enlarged images fully visible.
 */

/* Product mobile nav: never show on tablet/desktop (JS also skips >768) */
.tplf-product-mobile-nav {
  display: none !important;
}

@media (max-width: 1024px) {
  html {
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    max-width: 100%;
    overflow-x: clip !important;
  }

  img,
  video,
  iframe,
  embed,
  object,
  svg:not(.eicon):not(.elementor-icon) {
    max-width: 100%;
    height: auto;
  }

  .elementor-section,
  .elementor-container,
  .elementor-widget-wrap,
  .e-con,
  .e-con-inner,
  .elementor-column-wrap,
  .elementor-widget-container {
    max-width: 100%;
  }

  /* Tablet CSS often sets --content-width:1920px; keep it within the screen */
  .e-con,
  .elementor-section.elementor-section-boxed > .elementor-container {
    --content-width: min(100%, 100vw) !important;
  }

  /*
   * Homepage address strip (logo + HK + DG + CTA) — tablet only.
   * Elementor tablet widths sum to ~143% (25%+50%+50%+18%), so columns
   * overflow and get clipped. Scale to fit one row. Phone/desktop untouched.
   */
  @media (min-width: 769px) {
    body.home .elementor-element-a69490b > .e-con-inner,
    body.home .elementor-element-7df4d34 > .e-con-inner,
    body.home .elementor-element-59ab33e > .e-con-inner {
      flex-wrap: nowrap !important;
      justify-content: space-between !important;
      align-items: center !important;
      gap: 10px !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
      box-sizing: border-box !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    /* Logo */
    body.home .elementor-element-3901958,
    body.home .elementor-element-b54bc0c,
    body.home .elementor-element-6f8de01 {
      width: 15% !important;
      max-width: 15% !important;
      --container-widget-width: 100% !important;
      flex: 0 0 15% !important;
    }

    body.home .elementor-element-3901958 img,
    body.home .elementor-element-b54bc0c img,
    body.home .elementor-element-6f8de01 img {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
    }

    /* HK / DG address columns */
    body.home .elementor-element-d95b648,
    body.home .elementor-element-6d45f17,
    body.home .elementor-element-20f6179,
    body.home .elementor-element-2d6fcc5,
    body.home .elementor-element-0da9867,
    body.home .elementor-element-0154203 {
      --width: 36% !important;
      width: 36% !important;
      max-width: 36% !important;
      flex: 0 1 36% !important;
      min-width: 0 !important;
    }

    /* Contact button */
    body.home .elementor-element-3c0b04a,
    body.home .elementor-element-d4fef25,
    body.home .elementor-element-d38b638 {
      --width: 12% !important;
      width: 12% !important;
      max-width: 12% !important;
      flex: 0 0 12% !important;
      min-width: 0 !important;
    }

    body.home .elementor-element-a69490b .elementor-widget__width-initial,
    body.home .elementor-element-7df4d34 .elementor-widget__width-initial,
    body.home .elementor-element-59ab33e .elementor-widget__width-initial {
      width: 100% !important;
      max-width: 100% !important;
      --container-widget-width: 100% !important;
    }

    body.home .elementor-element-a69490b .elementor-widget-text-editor,
    body.home .elementor-element-7df4d34 .elementor-widget-text-editor,
    body.home .elementor-element-59ab33e .elementor-widget-text-editor {
      font-size: 13px !important;
      line-height: 1.45 !important;
    }

    body.home .elementor-element-a69490b .elementor-widget-container,
    body.home .elementor-element-7df4d34 .elementor-widget-container,
    body.home .elementor-element-59ab33e .elementor-widget-container {
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    body.home .elementor-element-0596d92 .elementor-button,
    body.home .elementor-element-8486b15 .elementor-button,
    body.home .elementor-element-5878f36 .elementor-button {
      white-space: normal !important;
      font-size: 13px !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }

    /*
     * Product listing + subpage top banners on tablet:
     * match quality-assurance tablet banner (--min-height: 131px).
     * Elementor default for product was 200px.
     */
    .elementor-element-19beaf0,
    .elementor-element-f2d1ffb,
    .elementor-element-3c8b672,
    .elementor-element-d08a202,
    .elementor-element-711ad18,
    .elementor-element-3ea0a3b,
    .elementor-element-f95df79 {
      --min-height: 131px !important;
      min-height: 131px !important;
    }

    .elementor-element-19beaf0:not(.elementor-motion-effects-element-type-background),
    .elementor-element-19beaf0 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
    .elementor-element-f2d1ffb:not(.elementor-motion-effects-element-type-background),
    .elementor-element-f2d1ffb > .elementor-motion-effects-container > .elementor-motion-effects-layer,
    .elementor-element-3c8b672:not(.elementor-motion-effects-element-type-background),
    .elementor-element-3c8b672 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
    .elementor-element-d08a202:not(.elementor-motion-effects-element-type-background),
    .elementor-element-d08a202 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
    .elementor-element-711ad18:not(.elementor-motion-effects-element-type-background),
    .elementor-element-711ad18 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
    .elementor-element-3ea0a3b:not(.elementor-motion-effects-element-type-background),
    .elementor-element-3ea0a3b > .elementor-motion-effects-container > .elementor-motion-effects-layer,
    .elementor-element-f95df79:not(.elementor-motion-effects-element-type-background),
    .elementor-element-f95df79 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
      background-position: center center !important;
      background-size: cover !important;
    }
  }

  .metaslider,
  .ml-slider,
  .flexslider,
  .flex-viewport,
  .metaslider .slides,
  .metaslider .slides > li,
  .metaslider img,
  .flexslider img {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .metaslider img,
  .flexslider img {
    height: auto !important;
    width: 100% !important;
    object-fit: contain;
  }

  /* ---- Elementor lightbox: keep full image in view ---- */
  .dialog-type-lightbox,
  .elementor-lightbox,
  .elementor-lightbox .dialog-lightbox-widget-content,
  .elementor-lightbox .dialog-lightbox-message,
  .elementor-lightbox .swiper,
  .elementor-lightbox .swiper-container {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }

  .elementor-lightbox .elementor-lightbox-item {
    padding: 56px 12px !important;
    box-sizing: border-box !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .elementor-lightbox .elementor-lightbox-image {
    max-width: 100% !important;
    max-height: calc(100vh - 120px) !important;
    max-height: calc(100dvh - 120px) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transform: none !important;
  }

  /* 3x CSS zoom crops most of the image on phones/tablets */
  .elementor-lightbox .elementor-slideshow__header .elementor-slideshow__zoom,
  .elementor-lightbox .elementor-slideshow__header [aria-label="缩放"],
  .elementor-lightbox .elementor-slideshow__header [aria-label="Zoom"],
  .elementor-lightbox .elementor-slideshow__header .eicon-zoom-in-bold,
  .elementor-lightbox .elementor-slideshow__header .eicon-search-plus {
    display: none !important;
  }

  .elementor-slideshow--zoom-mode .elementor-lightbox-image,
  .elementor-slideshow--zoom-mode .swiper-slide-active .elementor-lightbox-image {
    transform: none !important;
    max-width: 100% !important;
    max-height: calc(100vh - 120px) !important;
    max-height: calc(100dvh - 120px) !important;
  }

  .elementor-lightbox .elementor-slideshow__header,
  .elementor-lightbox .elementor-slideshow__footer {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  /* Phone only: flatten hardcoded "initial" widget widths (keep tablet Elementor %) */
  .elementor-element.elementor-widget__width-initial,
  .elementor-element.elementor-widget-tablet__width-initial,
  .elementor-element.elementor-widget-mobile__width-initial {
    width: 100% !important;
    max-width: 100% !important;
    --container-widget-width: 100% !important;
  }

  /* Mobile-only product category nav (injected by product-mobile-nav.js) */
  .tplf-product-mobile-nav {
    display: block !important;
    margin: 10px 12px 16px;
    box-sizing: border-box;
  }

  /* /product/ and all product subpage top banners — hide on phones only */
  .elementor-element-19beaf0,
  .elementor-element-f2d1ffb,
  .elementor-element-3c8b672,
  .elementor-element-d08a202,
  .elementor-element-711ad18,
  .elementor-element-3ea0a3b,
  .elementor-element-f95df79 {
    display: none !important;
  }

  .tplf-product-mobile-nav__caption {
    display: block;
    background: #23acff;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    padding: 10px 14px;
    border-radius: 8px 8px 0 0;
    margin: 0;
  }

  .tplf-product-mobile-nav__panel {
    border: 1px solid #cfe8f5;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #f7fbfe;
    overflow: hidden;
  }

  .tplf-product-mobile-nav__summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 40px 12px 14px;
    font-size: 16px;
    font-weight: 700;
    color: #0b6ea8;
    position: relative;
    user-select: none;
  }

  .tplf-product-mobile-nav__summary::-webkit-details-marker {
    display: none;
  }

  .tplf-product-mobile-nav__summary::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #0b6ea8;
    border-bottom: 2px solid #0b6ea8;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.15s ease;
  }

  .tplf-product-mobile-nav__panel[open] .tplf-product-mobile-nav__summary::after {
    transform: translateY(-20%) rotate(225deg);
  }

  .tplf-product-mobile-nav__body {
    border-top: 1px solid #d7ebf5;
    background: #fff;
    padding: 6px 0;
  }

  .tplf-product-mobile-nav__body ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .tplf-product-mobile-nav__body > ul > li > a {
    display: block;
    padding: 10px 14px;
    color: #222;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
  }

  .tplf-product-mobile-nav__body .sub-menu a {
    display: block;
    padding: 8px 14px 8px 28px;
    color: #444;
    text-decoration: none;
    font-size: 14px;
  }

  .tplf-product-mobile-nav__body a:hover,
  .tplf-product-mobile-nav__body .current-menu-item > a,
  .tplf-product-mobile-nav__body .current_page_item > a {
    color: #0b6ea8;
    background: #f3f9fc;
  }

  .elementor-lightbox .elementor-lightbox-item {
    padding: 48px 8px !important;
  }

  .elementor-lightbox .elementor-lightbox-image {
    max-height: calc(100vh - 96px) !important;
    max-height: calc(100dvh - 96px) !important;
  }

  /*
   * Phone only: clear fixed navbar above first banner.
   * Do NOT pad .pagebuilder-section here — Hestia JS sets that inline
   * when width > 768 for desktop/tablet. Override the inner .elementor instead.
   */
  body:not(.home) .section.pagebuilder-section {
    padding-top: 0 !important;
  }

  body:not(.home) .section.pagebuilder-section > .elementor {
    padding-top: 70px !important;
  }

  /* about-us ~80px banner → reduce gap by ~1/4 */
  body.page-id-3030 .section.pagebuilder-section > .elementor,
  body.page-id-5688 .section.pagebuilder-section > .elementor,
  body.page-id-6305 .section.pagebuilder-section > .elementor {
    padding-top: 50px !important;
  }

  /* printing-facilities / quality-assurance ~120px → increase by ~1/5 */
  body.page-id-6584 .section.pagebuilder-section > .elementor,
  body.page-id-6760 .section.pagebuilder-section > .elementor,
  body.page-id-2371 .section.pagebuilder-section > .elementor,
  body.page-id-5670 .section.pagebuilder-section > .elementor,
  body.page-id-6333 .section.pagebuilder-section > .elementor {
    padding-top: 94px !important;
  }

  /* certificates-and-qualification ~80px → reduce by ~1/5 */
  body.page-id-4241 .section.pagebuilder-section > .elementor,
  body.page-id-5662 .section.pagebuilder-section > .elementor,
  body.page-id-6347 .section.pagebuilder-section > .elementor {
    padding-top: 54px !important;
  }

  /*
   * Product top banners (producttopbanner-1.webp = 1920×459, bottles mid-frame).
   * Elementor mobile --min-height:80px + cover + top crop → only sky-blue strip.
   * Raise height and center the crop so bottle bodies fill the banner (like desktop).
   */
  .elementor-element-f2d1ffb,
  .elementor-element-3c8b672,
  .elementor-element-d08a202,
  .elementor-element-711ad18,
  .elementor-element-f95df79,
  .elementor-element-3ea0a3b,
  .elementor-element-72338fc,
  .elementor-element-b1a131e,
  .elementor-element-7c7d58b,
  .elementor-element-a5ed3e2 {
    --min-height: 180px !important;
    min-height: 180px !important;
  }

  .elementor-element-f2d1ffb:not(.elementor-motion-effects-element-type-background),
  .elementor-element-f2d1ffb > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-3c8b672:not(.elementor-motion-effects-element-type-background),
  .elementor-element-3c8b672 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-d08a202:not(.elementor-motion-effects-element-type-background),
  .elementor-element-d08a202 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-711ad18:not(.elementor-motion-effects-element-type-background),
  .elementor-element-711ad18 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-f95df79:not(.elementor-motion-effects-element-type-background),
  .elementor-element-f95df79 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-3ea0a3b:not(.elementor-motion-effects-element-type-background),
  .elementor-element-3ea0a3b > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-72338fc:not(.elementor-motion-effects-element-type-background),
  .elementor-element-72338fc > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-b1a131e:not(.elementor-motion-effects-element-type-background),
  .elementor-element-b1a131e > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-7c7d58b:not(.elementor-motion-effects-element-type-background),
  .elementor-element-7c7d58b > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-a5ed3e2:not(.elementor-motion-effects-element-type-background),
  .elementor-element-a5ed3e2 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-position: center center !important;
    background-size: cover !important;
  }
}