/* PGO mobile layout overrides. Desktop styles remain unchanged above 768px. */
.pgo-mobile-menu-wrap {
  display: none;
}

/* Remove the legacy footer company/attribution block from every page. The
   footer navigation remains available, while the old company name, webtech
   credit, and visitor counter are no longer shown. */
.index_foot01,
.index_foot02,
.foot02 {
  display: none !important;
}

.foot01 strong {
  display: none !important;
}

/* Updated about-page content blocks. */
.pgo-about-content {
  width: 100%;
  color: #20272a;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  line-height: 1.9;
}

.pgo-about-section {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin: 0 0 24px;
  padding: 24px;
  background: #fbffff;
  border: 1px solid #edf1ee;
}

.pgo-about-mark {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 150px;
}

.pgo-about-mark img {
  display: block;
  width: 150px;
  height: 150px;
  max-width: 100%;
  object-fit: contain;
}

.pgo-about-copy h2 {
  margin: 0 0 14px;
  color: #d26922;
  font-size: 27px;
  line-height: 1.45;
}

.pgo-about-copy p {
  margin: 0 0 16px;
}

.pgo-about-copy ul {
  margin: 0 0 16px;
  padding-left: 1.5em;
}

.pgo-about-copy li {
  margin: 4px 0;
}

.pgo-about-invite {
  margin-bottom: 0;
}

.pgo-micro-content {
  width: 100%;
  color: #2f383a;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
}

.pgo-micro-content h1 {
  margin: 0 0 8px;
  color: #d26922;
  font-size: 28px;
}

.pgo-micro-intro {
  margin: 0 0 18px;
  color: #4d595a;
  font-size: 16px;
}

.pgo-micro-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.pgo-micro-card {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid #d9e2dc;
  background: #fbffff;
  text-align: center;
}

.pgo-micro-card img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: contain;
  background: #f5f8f6;
}

.pgo-micro-card figcaption {
  margin-top: 8px;
  color: #596662;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.pgo-lightbox-open {
  overflow: hidden;
}

.pgo-micro-lightbox {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(20, 28, 28, 0.84);
}

.pgo-micro-lightbox.is-open {
  display: flex;
}

.pgo-micro-lightbox img {
  display: block;
  width: auto;
  max-width: min(92vw, 1200px);
  height: auto;
  max-height: 88vh;
  object-fit: contain;
  background: #fbffff;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
}

.pgo-micro-lightbox-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  font-size: 30px;
  line-height: 36px;
}

.pgo-download-content {
  width: 100%;
  color: #2f383a;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
}

.pgo-download-section {
  margin: 0 0 24px;
  padding: 20px;
  border: 1px solid #d9e2dc;
  background: #fbffff;
}

.pgo-download-section h2 {
  margin: 0 0 10px;
  color: #d26922;
  font-size: 25px;
}

.pgo-download-section p {
  margin: 0 0 16px;
  line-height: 1.8;
}

.pgo-download-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pgo-download-group {
  padding: 14px;
  border: 1px solid #e0e7e2;
  background: #f5f8f6;
}

.pgo-download-group h3 {
  margin: 0 0 8px;
  color: #52645d;
  font-size: 17px;
  line-height: 1.5;
}

.pgo-download-group ul {
  margin: 0;
  padding-left: 1.2em;
}

.pgo-download-group li {
  margin: 8px 0;
  line-height: 1.5;
}

.pgo-download-group a {
  color: #3e6470;
  overflow-wrap: anywhere;
}

.pgo-download-action {
  display: inline-block;
  margin-left: 8px;
  color: #b75d20 !important;
  font-size: 13px;
  white-space: nowrap;
}

.pgo-download-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #cbd8cc;
  background: #eef5eb;
  color: #3e6470;
  text-decoration: none;
}

.pgo-download-file strong {
  color: #b75d20;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    min-width: 0 !important;
    font-size: 14px;
    line-height: 1.65;
  }

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

  img,
  video,
  iframe {
    max-width: 100%;
  }

  iframe {
    width: 100% !important;
    min-height: 220px;
  }

  /* Replace the fixed desktop shells with fluid mobile shells. */
  #index_header > div,
  #index_content > div,
  #index_footer > div,
  #innerheader > div,
  #innercontent > div,
  #footer > div,
  .innerheader_div {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #index_header table,
  #index_content table,
  #index_footer table,
  #innerheader table,
  #innercontent table,
  #footer table {
    max-width: 100% !important;
  }

  /* Replace the legacy fixed-width navigation with a compact dropdown. */
  #index_header .t4_bg,
  #innerheader .nav_page_menu {
    display: none !important;
  }

  #index_header,
  #innerheader {
    overflow: hidden;
  }

  /* The shared desktop stylesheet sets #innerheader to min-height:375px.
     That fixed minimum creates the blank block below the inner-page tabs
     after the hero image has scaled down on mobile. */
  #innerheader {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Match inner-page headers to the homepage mobile header: logo first,
     then the mobile dropdown, without the desktop search/social cell. */
  #innerheader .innerheader_div > table:first-of-type {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #innerheader .innerheader_div > table:first-of-type > tbody > tr:first-child > td > div > table > tbody > tr > td:nth-child(2) {
    display: none !important;
  }

  #innerheader .innerheader_div > table:first-of-type > tbody > tr:first-child > td:first-child {
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 0 !important;
  }

  #innerheader .innerheader_div > table:first-of-type > tbody > tr:first-child img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Remove the inner-page 904px shell from the mobile layout so its
     navigation and hero image match the homepage width exactly. */
  #innerheader .innerheader_div,
  #innerheader .innerheader_div > table,
  #innerheader .innerheader_div > table:first-of-type,
  #innerheader .line07_toptd,
  #innerheader .line07,
  #innerheader .line07_td,
  #innerheader .nav_page_menu,
  #innerheader #index_carousel_wapper,
  #innerheader #index_carousel,
  #innerheader .index_carousel_item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* The inner header keeps the desktop 904px table hierarchy in its
     markup. Reset every table layer that contains the mobile menu so its
     100% width is calculated from the phone viewport, not the old desktop
     table width. */
  #innerheader .innerheader_div > table:first-of-type,
  #innerheader .line07,
  #innerheader .nav_page_menu {
    table-layout: fixed !important;
  }

  /* Inner-page hero markup keeps an inline height of 202px. Once its image
     scales down on a phone, that leftover height becomes the large blank
     area between the hero and the page navigation. Let the image define the
     carousel height on mobile. */
  #innerheader #index_carousel_wapper,
  #innerheader #index_carousel,
  #innerheader .index_carousel_item {
    height: auto !important;
    min-height: 0 !important;
  }

  #innerheader #index_carousel_wapper {
    overflow: hidden !important;
  }

  #innerheader #index_carousel img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Inner-page breadcrumbs use a desktop multi-column table. Long product
     category names wrap into the fixed 44px row and overlap the content on
     mobile. Keep only the page title in this row on phones. */
  #innerheader #page_menu_bg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    overflow: hidden !important;
  }

  #innerheader #page_menu_bg > table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #innerheader #page_menu_bg > table > tbody > tr > td:not(#page_title) {
    display: none !important;
  }

  #innerheader #page_menu_bg #page_title {
    display: table-cell !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    text-align: left !important;
    padding: 0 14px !important;
    box-sizing: border-box;
  }

  #innerheader #page_menu_bg #page_title > div {
    margin: 0 !important;
    line-height: 44px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #innerheader .line07_toptd {
    display: table-cell !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: hidden;
  }

  #innerheader .line07_td {
    display: table-cell !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: hidden;
  }

  #innerheader .pgo-mobile-menu-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  #innerheader .pgo-mobile-menu {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto;
  }

  .pgo-mobile-menu-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 7px 10px;
    border-top: 1px dashed #d9e0d1;
    border-bottom: 1px dashed #d9e0d1;
    background: #fbfcf6;
  }

  .pgo-mobile-menu-label {
    flex: 0 0 auto;
    color: #a43317;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
  }

  .pgo-mobile-menu {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 4px 34px 4px 10px;
    border: 1px solid #b2bc92;
    border-radius: 3px;
    background: #fff;
    color: #575447;
    font-size: 16px;
  }

  /* Fluid banners and the two-column home page. */
  #index_carousel_wapper {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #index_carousel,
  #index_carousel .caroufredsel_wrapper,
  #index_carousel .index_carousel_item {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #index_carousel .index_carousel_item img {
    width: 100% !important;
    height: auto !important;
  }

  #index_carousel_wapper img {
    width: 100% !important;
    height: auto !important;
  }

  /* carouFredSel creates this wrapper after the page CSS has loaded. If it
     keeps its desktop inline width, the homepage banner is intermittently
     cropped until a refresh. Constrain the generated wrapper as well. */
  #index_carousel_wapper > .caroufredsel_wrapper,
  #index_carousel_wapper .caroufredsel_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #index_carousel_wapper .caroufredsel_wrapper > #index_carousel,
  #index_carousel_wapper .caroufredsel_wrapper .index_carousel_item {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #index_content table.t2 {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
  }

  #index_content table[width="990"],
  #index_content table[width="944"],
  #index_content table[width="664"],
  #index_content table[width="663"],
  #index_content table[width="635"],
  #index_content table[width="250"],
  #index_content table[width="210"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  #index_content,
  #innercontent {
    overflow-x: hidden;
  }

  #innercontent table[width="904"],
  #innercontent table[width="724"],
  #innercontent table[width="700"],
  #innercontent table[width="650"],
  #innercontent table[width="620"],
  #innercontent table[width="600"],
  #innercontent table[width="580"],
  #innercontent table[width="500"],
  #innercontent table[width="463"],
  #innercontent table[width="450"],
  #innercontent table[width="400"] {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
  }

  #index_content table[width="944"] > tbody > tr,
  #innercontent table[width="904"] > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  #index_content table[width="944"] > tbody > tr > td,
  #innercontent table[width="904"] > tbody > tr > td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  #index_content table[width="944"] table,
  #innercontent table[width="904"] table {
    width: 100% !important;
  }

  #index_content td[width="664"],
  #index_content td[width="250"],
  #innercontent td[width="724"],
  #innercontent td[width="171"] {
    width: 100% !important;
  }

  /* The BR600 promotional panel is a desktop-only sidebar asset. Remove it
     from the mobile flow so page content starts immediately. */
  #innercontent img[src*="adbanner/BR600.jpg"] {
    display: none !important;
  }

  #innercontent td:has(> center img[src*="adbanner/BR600.jpg"]),
  #innercontent td:has(> table img[src*="adbanner/BR600.jpg"]) {
    display: none !important;
  }

  #innercontent > div > table[width="904"] > tbody > tr > td[width="171"]:not(:has(.t9, .t9-1, .nav_left_page_menu)) {
    display: none !important;
  }

  /* Prevent legacy fixed-width content blocks from overflowing. */
  #index_content [style*="width:664px"],
  #index_content [style*="width:635px"],
  #index_content [style*="width:250px"],
  #innercontent [style*="width:904px"],
  #innercontent [style*="width:724px"],
  #innercontent [style*="width:700px"],
  #innercontent [style*="width:650px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  #index_content [style*="height:500px"],
  #innercontent [style*="height:400px"] {
    height: auto !important;
    min-height: 0 !important;
  }

  /* About page content becomes a readable single-column flow on phones. */
  #innercontent .pgo-about-content {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px;
    line-height: 1.8;
  }

  #innercontent .pgo-about-section {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    padding: 16px 14px;
  }

  #innercontent .pgo-about-mark {
    width: 132px;
    min-height: 132px;
    margin: 0 auto 16px;
  }

  #innercontent .pgo-about-mark img {
    width: 132px;
    height: 132px;
  }

  #innercontent .pgo-about-copy h2 {
    margin-bottom: 10px;
    font-size: 22px;
    line-height: 1.45;
  }

  #innercontent .pgo-about-copy p {
    margin-bottom: 12px;
    overflow-wrap: anywhere;
  }

  #innercontent .pgo-about-copy ul {
    padding-left: 1.35em;
  }

  #innercontent .pgo-micro-content h1 {
    font-size: 24px;
  }

  #innercontent .pgo-micro-intro {
    font-size: 15px;
  }

  #innercontent .pgo-micro-gallery {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #innercontent .pgo-micro-card img {
    height: auto;
    max-height: 360px;
  }

  .pgo-micro-lightbox {
    padding: 16px;
  }

  .pgo-micro-lightbox img {
    max-width: 94vw;
    max-height: 82vh;
  }

  #innercontent .pgo-download-section {
    margin-bottom: 16px;
    padding: 15px 13px;
  }

  #innercontent .pgo-download-section h2 {
    font-size: 22px;
  }

  #innercontent .pgo-download-groups {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #innercontent .pgo-download-file {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .line01,
  .line02,
  .line03,
  .line04,
  .line05,
  .line06 {
    max-width: 100%;
  }

  /* Make product/news grids readable instead of forcing tiny columns. */
  #index_content td[width="173"],
  #index_content td[width="198"],
  #index_content td[width="110"],
  #index_content td[width="64"] {
    width: auto !important;
  }

  #index_content .t12 {
    margin-bottom: 12px;
  }

  /* The homepage content table has desktop spacer columns that become
     visible as an unnecessary right offset on phones. */
  #index_content > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #index_content > div > table.t2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #index_content > div > table.t2 > tbody > tr > td {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #innercontent .line04 {
    width: 100% !important;
    height: auto !important;
    min-height: 112px;
  }

  #innercontent .line04 img {
    width: 100% !important;
    height: auto !important;
    max-height: 260px;
    object-fit: contain;
    margin: 0 !important;
  }

  /* News cards keep their thumbnail visible above the article text. */
  #innercontent .t10 img.line01 {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Restore legacy content thumbnails that can be lost when their fixed
     table cells are converted into the mobile flow. */
  #innercontent .t10 img.line02,
  #innercontent .t10 img.line03,
  #innercontent .t10 img.line06,
  #innercontent .t10 img.-prod-simg {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    object-fit: contain;
  }

  #innercontent .t10 img.line04 {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 300px;
    margin: 0 auto !important;
    object-fit: contain;
  }

  #innercontent .t10 table[width="331"] > tbody > tr > td[width="109"],
  #innercontent .t10 table[width="331"] > tbody > tr > td[width="109"] > table,
  #innercontent .t10 table[width="331"] > tbody > tr > td[width="109"] table[width="107"] {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #innercontent .t10 table[width="331"] td[height="107"],
  #innercontent .t10 table[width="331"] td[height="109"] {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #innercontent .t10 td:has(> table img.line01),
  #innercontent .t10 td:has(> table img.line02),
  #innercontent .t10 td:has(> table img.line04),
  #innercontent .t10 td:has(> table img.line06) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #innercontent .t10 td[width="122"],
  #innercontent .t10 table[width="122"],
  #innercontent .t10 table[width="120"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #innercontent .t10 td[width="122"] {
    padding: 10px 0 !important;
    text-align: center !important;
  }

  /* The homepage latest-products cards use the legacy t8 image class. */
  #index_content img.t8,
  #index_content img[class*="t8"] {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    object-fit: contain;
  }

  #index_content table.t12,
  #index_content table[width="173"],
  #index_content table[width="198"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  #index_content table.t12 > tbody > tr > td[width="110"],
  #index_content table.t12 > tbody > tr > td[width="173"],
  #index_content table.t12 > tbody > tr > td[width="198"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Latest-product rows are authored as three fixed 173px cards separated
     by 58px spacer cells. Stack each card vertically on mobile and keep its
     thumbnail cell in the flow above the text. */
  #index_content table[width="635"] > tbody > tr {
    display: block !important;
    width: 100% !important;
  }

  #index_content table[width="635"] > tbody > tr > td[width="173"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 0 !important;
  }

  #index_content table[width="635"] > tbody > tr > td[width="58"] {
    display: none !important;
  }

  #index_content table.t12 > tbody > tr {
    display: block !important;
    width: 100% !important;
  }

  #index_content table.t12 > tbody > tr > td:first-child,
  #index_content table.t12 > tbody > tr > td[width="110"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #index_content table.t12 > tbody > tr > td[width="8"] {
    display: none !important;
  }

  #index_content table.t12 > tbody > tr > td:first-child table[width="64"] {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  #index_content table.t12 img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  #index_content table.t12 td[style*="word-break"] table[width="110"],
  #index_content table.t12 td[style*="word-break"] > table {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Product listing cards: image, title and description flow downward. */
  #innercontent .t10 table[width="724"] > tbody > tr {
    display: block !important;
    width: 100% !important;
  }

  #innercontent .t10 table[width="724"] > tbody > tr > td[width="331"] {
    display: block !important;
    width: 100% !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #d9cbae;
  }

  #innercontent .t10 table[width="724"]:has(> tbody > tr > td[width="331"]) > tbody > tr > td:not([width="331"]) {
    display: none !important;
  }

  #innercontent .t10 table[width="331"],
  #innercontent .t10 table[width="214"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  #innercontent .t10 table[width="331"] > tbody > tr {
    display: block !important;
  }

  #innercontent .t10 table[width="331"] > tbody > tr > td[width="109"],
  #innercontent .t10 table[width="331"] > tbody > tr > td:not([width]) {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }

  #innercontent .t10 table[width="331"] > tbody > tr > td[width="109"] table {
    margin: 0 auto !important;
  }

  #innercontent .t10 table[width="331"] > tbody > tr > td:not([width]) > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
  }

  #innercontent .t10 table[width="331"] img {
    max-width: 100% !important;
  }

  /* Product detail pages have a different 724px table. Do not let the
     listing-only rules hide their main product image and description. */
  #innercontent .t10 #showmainimg {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain;
  }

  #innercontent .t10 table[width="364"],
  #innercontent .t10 table[width="322"],
  #innercontent .t10 table[width="293"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  #innercontent .t10 table[width="364"] > tbody > tr > td,
  #innercontent .t10 table[width="322"] > tbody > tr > td {
    display: block !important;
    width: 100% !important;
  }

  /* Specification tables are authored at 658px with a negative left margin.
     Reset both values on mobile so the complete table stays inside the page. */
  #innercontent .t10 table[width="658"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    table-layout: fixed !important;
  }

  #innercontent .t10 table[width="658"] td {
    max-width: 100% !important;
    padding: 4px 6px !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal !important;
  }

  #innercontent .t10 table[width="658"] td[style*="width: 251px"] {
    width: 38% !important;
  }

  #innercontent .t10 table[width="658"] td[style*="width: 407px"] {
    width: 62% !important;
  }

  #innercontent .t10 td[style*="word-wrap"] img,
  #innercontent .t10 td[style*="word-wrap"] iframe {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Buttons and pagination should wrap instead of being pushed off-screen. */
  #innercontent [style*="margin-left:64px"] {
    margin-left: 0 !important;
    text-align: center;
  }

  #innercontent [style*="margin-left:64px"] img {
    width: auto !important;
    max-width: 44% !important;
    height: auto !important;
  }

  #innercontent #user_asignpage {
    width: auto !important;
    min-width: 56px;
  }

  /* Side menus become full-width blocks below the page header. */
  .nav_left_page_menu,
  .nav_left_page_menu ul,
  .nav_left_page_menu li,
  .nav_left_page_menu a {
    width: 100% !important;
    max-width: 100% !important;
  }

  .nav_left_page_menu a {
    padding: 10px 14px !important;
  }

  /* Legacy inner-page category menus use nested fixed-width tables. Keep the
     label, background, and hit area together as one mobile button. */
  #innercontent > div > table[width="904"] > tbody > tr > td[width="171"],
  #innercontent > div > table[width="904"] > tbody > tr > td[width="171"] > div,
  #innercontent > div > table[width="904"] > tbody > tr > td[width="171"] > div table,
  #innercontent .t9,
  #innercontent .t9-1 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #innercontent > div > table[width="904"] > tbody > tr > td[width="171"] > div table,
  #innercontent .t9,
  #innercontent .t9-1 {
    table-layout: fixed;
  }

  #innercontent .t9,
  #innercontent .t9-1 {
    display: block !important;
    padding: 0 !important;
    border-bottom: 1px solid #d5ded8;
    background: #edf3ef !important;
  }

  #innercontent .t9 > a,
  #innercontent .t9-1 > a {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    min-height: 48px;
    box-sizing: border-box;
    padding: 10px 14px !important;
    color: #4d4d4d !important;
    text-decoration: none;
    background-image: none !important;
    background-color: transparent !important;
  }

  #innercontent .t9-1 > a,
  #innercontent .t9 > a:hover,
  #innercontent .t9-1 > a:hover {
    background-color: #d7dfcf !important;
    font-weight: 600;
  }

  /* Contact page: collapse the desktop contact/map columns and remove fixed
     input widths so the form remains usable on narrow phones. */
  #mailcontent,
  #mailcontent form,
  #mailcontent form table,
  #mailcontent form tbody,
  #mailcontent form tr {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #mailcontent td[width="380"],
  #mailcontent td[width="333"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #mailcontent iframe {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 260px !important;
    border: 0;
  }

  #mailcontent input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
  #mailcontent textarea,
  #mailcontent select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #mailcontent textarea {
    min-height: 120px;
  }

  #mailcontent img {
    max-width: 100%;
    height: auto;
  }

  /* Forms and contact content fit narrow screens. */
  input,
  select,
  textarea,
  button {
    max-width: 100%;
    font-size: 16px;
  }

  textarea {
    width: 100% !important;
  }

  #index_footer > div,
  #footer > div {
    padding-top: 16px !important;
    padding-bottom: 20px !important;
  }

  #index_footer table,
  #footer table {
    width: 100% !important;
  }

  .index_footmenu,
  .footmenu {
    line-height: 2;
    padding-left: 0 !important;
  }

  .index_footmenu > table,
  .footmenu > table {
    display: block;
    width: 100% !important;
  }

  .index_footmenu > table > tbody > tr,
  .footmenu > table > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
    width: 100%;
  }

  .index_footmenu > table > tbody > tr > td,
  .footmenu > table > tbody > tr > td {
    display: block;
    width: auto !important;
    text-align: center;
    word-break: keep-all;
  }

  .index_footmenu > table > tbody > tr > td[width="13"],
  .footmenu > table > tbody > tr > td[width="24"] {
    display: none;
  }

  .index_foot01,
  .index_foot02,
  .foot01,
  .foot02 {
    padding: 0 8px !important;
    word-break: break-word;
  }

  /* Keep the homepage latest products in the original three-column layout:
     three cards per row, two rows for the six products. */
  #index_content table[width="635"] > tbody > tr {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100% !important;
  }

  #index_content table[width="635"] > tbody > tr > td[width="173"] {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    padding: 8px 0 !important;
  }

  #index_content table[width="635"] > tbody > tr > td[width="58"] {
    display: none !important;
  }

  #index_content table.t12 {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #index_content table.t12 > tbody > tr:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    width: 100% !important;
  }

  #index_content table.t12 > tbody > tr:not(:first-child) {
    display: none !important;
  }

  #index_content table.t12 > tbody > tr:first-child > td:first-child,
  #index_content table.t12 > tbody > tr:first-child > td[width="110"] {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  #index_content table.t12 > tbody > tr:first-child > td:first-child {
    width: 100% !important;
    overflow: visible !important;
    text-align: center !important;
  }

  #index_content table.t12 > tbody > tr:first-child > td[width="8"] {
    display: none !important;
  }

  #index_content table.t12 > tbody > tr:first-child > td:first-child table[width="64"],
  #index_content table.t12 > tbody > tr:first-child > td[width="110"] > table {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #index_content table.t12 > tbody > tr:first-child > td:first-child table[width="64"] {
    width: auto !important;
    margin: 0 auto !important;
  }

  #index_content table.t12 img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }
}