/**
 * IGET mobile polish — sitewide enhancements for <=1000px.
 * Does not replace origin CSS; layers on top for layout/touch/safe-area.
 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media screen and (max-width: 1000px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    overscroll-behavior-x: none;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

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

  /* ---- Age gate ----
     Do NOT force display:flex !important always — origin hides with
     $("#age-show").css('display','none') and that must win. */
  #age-show {
    width: 100vw !important;
    min-height: 100dvh !important;
    padding: env(safe-area-inset-top, 0) 20px env(safe-area-inset-bottom, 20px) !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Only flex-center when origin shows the gate as block */
  #age-show[style*="display: block"],
  #age-show[style*="display:block"] {
    display: flex !important;
  }

  #age-show .agree-font-box {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(100%, 360px) !important;
    padding: 0 4px !important;
    text-align: center !important;
  }

  #age-show .agree-font-box > h2.ageshows,
  #age-show .agree-font-box > h2.ageback {
    font-size: clamp(18px, 5vw, 22px) !important;
    letter-spacing: 0.04em;
  }

  #age-show .agree-font-box > p.ageshows,
  #age-show .agree-font-box > p.ageback {
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin: 12px 0 22px !important;
  }

  #age-show .agree-button {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }

  /* Only style visible enter/close — never force .ageback visible */
  #age-show .agree-button .agree-enter,
  #age-show .agree-button .agree-close {
    flex: 1 1 140px !important;
    min-height: 44px !important;
    height: auto !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    position: relative;
    z-index: 2;
  }

  #age-show .agree-button .agree-closs.ageback {
    /* keep origin .ageback { display:none } unless jQuery .show() */
    flex: 1 1 140px;
    min-height: 44px;
    padding: 12px 14px;
    box-sizing: border-box;
    font-size: 13px;
    border-radius: 999px;
    touch-action: manipulation;
  }

  #age-show .age-logo-box {
    margin-left: 0 !important;
    margin-bottom: 24px !important;
  }

  #age-show .age-logo-box img {
    max-width: 160px !important;
    height: auto !important;
  }

  /* ---- Sticky mobile header ---- */
  .web-h-menu.web-show {
    position: sticky !important;
    top: 0 !important;
    z-index: 9990 !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: calc(6px + env(safe-area-inset-top, 0)) 12px 6px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px;
  }

  .web-logo-a {
    height: auto !important;
    flex: 0 1 auto;
    min-width: 0;
  }

  .web-logo-a img,
  .web-header-logo {
    height: 36px !important;
    width: auto !important;
    max-width: 42vw !important;
    object-fit: contain;
  }

  .web-h-menu .com-h-s-box {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    height: auto !important;
    margin: 0 !important;
  }

  .web-h-menu .com-h-s-box > a {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    -webkit-tap-highlight-color: transparent;
  }

  .web-h-icon,
  .web-h-menu .com-h-search {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain;
  }

  /* Hide non-functional cart/lang on mobile to reduce clutter */
  .web-h-menu .com-h-s-box > a[href="javascript:;"]:has(.com-h-search) {
    display: none !important;
  }

  /* Fallback if :has unsupported — hide 2nd/3rd icon links that are javascript:; */
  .web-h-menu .com-h-s-box > a:nth-child(2),
  .web-h-menu .com-h-s-box > a:nth-child(3) {
    display: none !important;
  }

  /* Keep hamburger (1) and search (4) */
  .web-h-menu .com-h-s-box > a:nth-child(1),
  .web-h-menu .com-h-s-box > a:nth-child(4) {
    display: grid !important;
  }

  /* ---- Full-screen drawer ---- */
  .web-menu-out {
    padding-top: env(safe-area-inset-top, 0) !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Do NOT set overflow-y:hidden on body — origin common.js watches that and
     re-shows #age-show every 300ms. Lock scroll another way. */
  body.iget-menu-open {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    touch-action: none;
    overflow-y: scroll !important; /* keep computed overflow-y != hidden */
  }

  .web-menu-out .com-menu-a {
    min-height: 52px !important;
    font-size: 16px !important;
  }

  .web-menu-out .com-sub-a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    padding-left: 28px !important;
  }

  .web-close {
    width: 52px !important;
    height: 52px !important;
  }

  /* ---- Warning strip ---- */
  .com-warning,
  .com-h-warning {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #warning {
    font-size: 11px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  /* ---- Home / sections ---- */
  .d-i-box,
  .about-font-box,
  .hot-pro-out,
  .news-out,
  .pro-box-out,
  .page-com-top,
  .news-list-out,
  .news-del-out,
  .contact-out,
  .verificate-out,
  .search-out {
    padding-left: max(12px, env(safe-area-inset-left, 0)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0)) !important;
    box-sizing: border-box !important;
  }

  .mySwiper,
  .swiper,
  .swiper-slide,
  .swiper-img,
  .detail-img {
    max-width: 100% !important;
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 36px !important;
    height: 36px !important;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 18px !important;
  }

  /* Product grid */
  .pro-box-out {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px 2% !important;
    justify-content: space-between !important;
  }

  .n-b-o-item {
    width: 49% !important;
    margin: 0 0 8px !important;
    box-sizing: border-box !important;
  }

  .n-b-o-imgbox,
  .n-b-o-imgbox img,
  .p-img-box-a img {
    width: 100% !important;
    max-width: 100% !important;
    object-fit: contain;
  }

  .n-b-titel {
    font-size: 12px !important;
    line-height: 1.3 !important;
    word-break: break-word;
  }

  .n-b-ks {
    font-size: 11px !important;
  }

  /* Page chrome */
  .page-com-title {
    font-size: 20px !important;
    letter-spacing: 0.06em;
  }

  .page-com-menu {
    gap: 4px 0 !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: 14px !important;
    padding-bottom: 4px;
  }

  .page-com-menu::-webkit-scrollbar {
    display: none;
  }

  .page-com-item {
    flex: 0 0 auto !important;
    margin: 0 10px 0 0 !important;
    white-space: nowrap;
  }

  .page-com-item a,
  .page-com-item {
    font-size: 13px !important;
  }

  /* News */
  .news-item {
    padding: 16px 0 !important;
  }

  .news-list-info a {
    -webkit-line-clamp: 2 !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .news-list-desc {
    -webkit-line-clamp: 2 !important;
    height: auto !important;
    margin-top: 6px !important;
  }

  .news-dtl-title {
    font-size: 20px !important;
    line-height: 1.35 !important;
    word-break: break-word;
  }

  .news-str-detail {
    font-size: 15px !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere;
  }

  .news-str-detail img {
    display: block !important;
    margin: 12px auto !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  /* Contact / forms */
  .contact-out,
  .contact-content,
  .com-tip {
    width: 100% !important;
    max-width: 100% !important;
  }

  input,
  textarea,
  select,
  button {
    font-size: 16px !important; /* avoid iOS zoom */
    max-width: 100%;
  }

  textarea {
    min-height: 120px;
  }

  /* Footer */
  .com-footer-box,
  .footerpage {
    overflow-x: hidden;
  }

  .f-sub-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  .f-medium-box {
    margin-left: 0 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .whatsapp-box {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 12px !important;
  }

  .whatsapp-box a {
    margin-left: 0 !important;
  }

  /* Floating chat widget → bottom sheet on phone */
  .msgout {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: min(70dvh, 520px) !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .zxindex,
  .whatsapp-fixed,
  [class*="whatsapp-box"] a img {
    max-width: 48px;
  }

  /* Product detail common absolute text → tone down overflow */
  .ssabsolute,
  .IGETbarss,
  .ROCKss,
  .koushu {
    max-width: 92vw;
  }

  /* Verify page */
  .verificate-out img {
    max-width: 100% !important;
  }

  /* Home about copy readability */
  .about-font-box p {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .about-font-box h3 {
    font-size: 18px !important;
  }

  /* Pagination */
  div.zxf_pagediv {
    padding: 0 8px 24px !important;
    overflow-x: auto;
  }
}

@media screen and (max-width: 480px) {
  .n-b-o-item {
    width: 48.5% !important;
  }

  .web-logo-a img,
  .web-header-logo {
    height: 32px !important;
    max-width: 38vw !important;
  }

  #age-show .agree-button .agree-enter,
  #age-show .agree-button .agree-close,
  #age-show .agree-button .agree-closs {
    flex: 1 1 100% !important;
  }
}