/* ==========================================================================
   site-fixes.css
   Repair layer for the gins.com.tw static build. Loaded last so it wins
   where it needs to. Every rule here fixes a defect that was measured in a
   real browser at 320 / 375 / 768 / 1280px - none of it restyles the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Horizontal overflow
   The original bundle shipped without a CSS reset, so the browser default
   body margin pushed every page 8px past the viewport on every breakpoint.
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;   /* stop iOS inflating text in landscape */
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;               /* last-resort guard for stray wide nodes */
}

/* The off-canvas drawer sits at left:-300px. Clipping it here rather than on
   <html> keeps position:sticky working elsewhere on the page. */

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

/* --------------------------------------------------------------------------
   2. Fluid media
   Product shots come back from the CDN at their native size and blew past
   narrow viewports.
   -------------------------------------------------------------------------- */
img,
svg,
video,
canvas,
iframe,
embed,
object {
  max-width: 100%;
}

img,
svg,
video {
  height: auto;
}

/* Keep aspect ratio on embedded maps and video players */
iframe {
  border: 0;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   3. Long unbroken strings
   Order numbers, tracking codes and pasted URLs in the article and checkout
   pages forced a wider scroll box on mobile.
   -------------------------------------------------------------------------- */
body,
p,
li,
dd,
td,
th,
h1, h2, h3, h4, h5, h6,
.content,
.article_content,
.cUnitContainerSub a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* --------------------------------------------------------------------------
   4. Tables
   Bootstrap 3 tables do not shrink. Wrap the overflow instead of letting it
   widen the page.
   -------------------------------------------------------------------------- */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  table {
    max-width: 100%;
  }

  .table_scroll,
  .article_content table,
  .checkout_section table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --------------------------------------------------------------------------
   5. Uncompiled template placeholders
   The quick-view modal and the AI-recommendation strip are Vue-rendered. On a
   static snapshot their bindings never resolve, so raw {{ ... }} mustaches
   were painting into the layout - one of them was 398px wide inside a 320px
   viewport. Bootstrap's own .modal rule now hides the modal; v-cloak covers
   the rest until Vue mounts.
   -------------------------------------------------------------------------- */
[v-cloak] {
  display: none !important;
}

.modal:not(.in) {
  display: none;
}

/* --------------------------------------------------------------------------
   6. Touch targets
   Measured 47 of 122 interactive elements under 24px tall on the homepage at
   375px. Nudge the worst offenders toward the 44px guideline without
   disturbing inline text links inside prose.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .navbar-nav > li > a,
  .nav > li > a,
  .top_header a,
  .mhelpmenu_cuslink a,
  .footer_menu a,
  .pagination > li > a,
  .pagination > li > span,
  .btn,
  button {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .pagination > li > a,
  .pagination > li > span,
  .btn,
  button {
    justify-content: center;
  }

  /* The off-canvas trigger is pinned at top:20%;left:0 below 1200px.
     Give it a thumb-sized hit area. */
  .navbar-header button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Removes the legacy 300ms tap delay, which is what FastClick was there for */
a,
button,
input,
select,
textarea,
label,
[role="button"] {
  touch-action: manipulation;
}

/* --------------------------------------------------------------------------
   7. Forms on iOS
   Any input under 16px makes Safari zoom the whole page on focus, which
   leaves the user zoomed in and scrolled sideways.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   8. Grid gutters
   Several product-grid rows used negative margins without a matching padded
   parent, which leaked past the viewport edge on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .container,
  .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  .row {
    margin-left: -6px;
    margin-right: -6px;
  }

  .row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* --------------------------------------------------------------------------
   9. Accessibility
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid #ed143d;
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 10px 16px;
  background: #fff;
  color: #000;
}

.skip-link:focus {
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   10. Print
   -------------------------------------------------------------------------- */
@media print {
  header,
  footer,
  .navbar,
  .top_header,
  .scroll-top,
  .fb_messenger,
  .modal {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }
}