/**
 * IMTAKT USA - Dedicated Mobile Responsive Stylesheet
 * Scoped strictly to viewports <= 896px so PC desktop (>= 897px) remains 100% untouched.
 */
@media screen and (max-width: 896px) {

  /* 1. Global Mobile Reset & Fluid Constraints & Comprehensive Clipping Prevention */
  html,
  body {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    padding-top: 0 !important;
    box-sizing: border-box !important;
  }

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

  main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Global Comprehensive Text & Heading Overflow Prevention */
  h1, h2, h3, h4, h5, h6, p, span, a, li, label {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* Global Container Width Reset */
  .p-colorarea-box,
  .p-texttitle,
  .p-description,
  .p-box,
  .p-frame,
  .p-frame-wide,
  .p-colorarea,
  .p-content,
  .p-selection,
  .p-select,
  .p-family,
  .o-others,
  .o-locations,
  .o-locations-content,
  .s-box {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .p-texttitle {
    width: 92% !important;
    max-width: 500px !important;
    margin: 20px auto 16px auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 12px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .p-texttitle h1 {
    font-size: 1.35rem !important;
    line-height: 1.35 !important;
    font-weight: bold !important;
    color: #333333 !important;
    margin: 0 !important;
    text-align: center !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .p-texttitle p {
    font-size: 0.9rem !important;
    color: #666666 !important;
    margin-top: 4px !important;
  }

  .p-colorarea-box {
    width: 92% !important;
    max-width: 500px !important;
    margin: 16px auto !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
    text-align: left !important;
  }

  .p-colorarea-box p[style*="f0f6f8"] {
    margin: 8px 0 !important;
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
    border-radius: 6px !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .p-colorarea-title:before,
  .p-colorarea-title:after {
    width: 1.2em !important;
    margin: 0 0.4em !important;
  }

  /* 2. Header & Top Navigation */
  header,
  .header {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    padding: 6px 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  }

  .header nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    gap: 4px 10px !important;
    white-space: normal !important;
  }

  .header .logo {
    height: 34px !important;
    flex-basis: auto !important;
    margin-right: 0 !important;
    margin-bottom: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .header .logo img {
    max-height: 30px !important;
    width: auto !important;
  }

  .header-menu {
    font-size: 1.05rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px 6px !important;
  }

  .header-menu a {
    padding: 4px 6px !important;
    font-size: 1.05rem !important;
  }

  .header-resource {
    position: relative !important;
    display: inline-block !important;
  }

  .header-resource ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 1000 !important;
    min-width: 190px !important;
    padding: 4px 0 !important;
    margin: 0 !important;
  }

  .header-resource:hover ul,
  .header-resource:focus-within ul,
  .header-resource:active ul {
    display: block !important;
  }

  .header-resource ul li {
    padding: 6px 12px !important;
    text-align: start !important;
  }

  .searchlogo {
    margin-left: 0 !important;
  }

  /* 3. Breadcrumbs & Header Banners (.p-head) */
  .breadcrumbs {
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }

  .breadcrumbs :first-child {
    margin-left: 0 !important;
  }

  .breadcrumbs a,
  .breadcrumbs span {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
  }

  .breadcrumbs span.current {
    opacity: 0.85 !important;
    font-weight: 400 !important;
  }

  .p-head {
    justify-content: center !important;
    height: auto !important;
    padding: 18px 12px !important;
    text-align: center !important;
  }

  .p-head > * {
    margin-left: 0 !important;
    text-align: center !important;
    font-size: 1.6rem !important;
  }

  .p-sub1,
  .p-sub2,
  .p-content,
  .p-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* 4. Top Page Hero & Search Bar Form (.main-form) */
  .main-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1.2rem 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
  }

  .main-top a {
    margin-right: 0 !important;
  }

  .main-top .top-img img {
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .main-top .top-title {
    position: static !important;
    font-size: 1.4em !important;
    margin: 8px 0 !important;
    text-align: center !important;
  }

  .main-form {
    flex-direction: column !important;
    gap: 0.8rem !important;
    padding: 1.2rem 1rem !important;
    text-align: center !important;
    line-height: 1.35 !important;
  }

  .main-form p {
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
  }

  .main-form .main-input {
    width: 95% !important;
    max-width: 420px !important;
    margin: 0.4rem auto !important;
  }

  /* 5. Top Page Main Layout Stacking & Redesigned Menu Cards (.main-news) */
  .main-news {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 1rem !important;
    box-sizing: border-box !important;
    gap: 1.5rem !important;
  }

  .main-news-left {
    display: block !important;
    width: 100% !important;
  }

  .main-news-left a {
    display: block !important;
    margin: 0 0 10px 0 !important;
    text-decoration: none !important;
  }

  .main-news-left .menu-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #e0d5e2 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
  }

  .main-news-left .menu-box h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    color: #4a444a !important;
    text-align: left !important;
    flex: 1 !important;
    display: block !important;
    padding-right: 24px !important;
  }

  /* Hide old overlapping left arrow */
  .main-news-left .arrow {
    display: none !important;
  }

  /* Modern right chevron arrow */
  .main-news-left .menu-box::after {
    content: "›" !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.6rem !important;
    font-weight: bold !important;
    color: #a084a4 !important;
    line-height: 1 !important;
  }

  .main-news-left .box-color {
    background: linear-gradient(135deg, #f8f3f9 0%, #ffffff 100%) !important;
  }

  .main-news-left .box-color1 {
    background: linear-gradient(135deg, #f3e5f5 0%, #ffffff 100%) !important;
    border-color: #d1b4d6 !important;
  }

  .main-news-left .box-color2 {
    background: linear-gradient(135deg, #eee8f0 0%, #ffffff 100%) !important;
  }

  .main-news-right {
    display: block !important;
    width: 100% !important;
  }

  /* 5.1 Individual Product Page Title & Hero Image Section (.p-title) */
  .p-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.5rem auto !important;
    padding: 0 14px !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  .p-title-left {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
  }

  .p-title-left img {
    max-width: 82% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 8px auto !important;
  }

  .p-title-left p {
    margin-left: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    border-bottom: none !important;
  }

  .p-title-img {
    width: 100% !important;
    max-width: 260px !important;
    height: auto !important;
    max-height: 240px !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 6px !important;
  }

  .p-title-button {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 10px 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  /* 6. TAB-renderer Components & Content Boxes */
  .info-box,
  .p-info-box {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-bottom: 2px solid #e1689b !important;
    padding-bottom: 0 !important;
    margin-bottom: 14px !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .info-box::-webkit-scrollbar,
  .p-info-box::-webkit-scrollbar {
    display: none !important;
  }

  .info-box-tab {
    flex: 0 0 auto !important;
    padding: 9px 14px !important;
    font-size: 0.98rem !important;
    white-space: nowrap !important;
    border-radius: 6px 6px 0 0 !important;
  }

  .info-box-content {
    min-height: auto !important;
    max-height: 520px !important;
    padding: 12px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 6.1 Products List Page Overlap Fixes & Banners */
  a[href*="selectguide"] img,
  img[src*="selectguide"] {
    max-width: 92% !important;
    height: auto !important;
    display: block !important;
    margin: 14px auto !important;
  }

  /* 8. Products List Page (products/index.php) - Series vs Individual Column Contrast */
  .p-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 92% !important;
    max-width: 480px !important;
    margin: 20px auto !important;
    padding: 20px 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2d8e2 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
    box-sizing: border-box !important;
  }

  main hr {
    display: none !important;
  }

  .p-content-img {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-bottom: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e8dfe6 !important;
    border-bottom: 3px solid #a28097 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
  }

  .p-content-img img {
    min-width: 0 !important;
    max-width: 180px !important;
    max-height: 42px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
  }

  .p-content-right {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .p-content-list1 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  .p-content-list1 h2 {
    font-size: 1.15rem !important;
    font-weight: bold !important;
    color: #5a4054 !important;
    border-left: 3px solid #a28097 !important;
    padding-left: 10px !important;
    margin: 12px 0 10px 0 !important;
    text-align: left !important;
  }

  .p-content-list1 ul {
    margin: 8px 0 16px 0 !important;
    padding-left: 16px !important;
    text-align: left !important;
  }

  .p-content-list1 ul li {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    color: #555555 !important;
    margin-bottom: 6px !important;
    word-break: break-word !important;
  }

  .p-content-list1 ul li span {
    display: inline-block !important;
    font-size: 0.8rem !important;
    color: #7b5973 !important;
    font-weight: 600 !important;
    background: #ffffff !important;
    border: 1px solid #e8dee6 !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    margin-left: 4px !important;
  }

  .p-content-list2 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px dashed #e0d4de !important;
    justify-content: center !important;
  }

  .p-content-list2 > div {
    flex: 1 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    width: auto !important;
    min-height: 52px !important;
    background: #ffffff !important;
    border: 1px solid #e2d4e1 !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
  }

  .p-content-list2 > div a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
  }

  .p-content-list2 img {
    max-height: 36px !important;
    max-width: 90% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    mix-blend-mode: multiply !important;
  }

  .p-subcontent {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2rem auto !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  .p-subcontent-div {
    width: 100% !important;
    margin: 1rem 0 !important;
  }

  .p-box,
  .p-box2,
  .p-description {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    gap: 12px !important;
  }

  .p-box-left,
  .p-box2-left,
  .p-box-right,
  .p-box2-right {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .p-two-column > * {
    width: 100% !important;
    padding: 8px 0 !important;
  }

  .p-frame {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  .p-frame-left,
  .p-frame-right {
    width: 100% !important;
  }

  /* 7. Section Cards & Scrollboxes */
  .p-section-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .p-section-card h4.p-section-card-title {
    font-size: 1.35rem !important;
    margin-bottom: 10px !important;
  }

  .p-section-card .p-sec-heading {
    font-size: 1.15rem !important;
    margin: 10px 0 6px !important;
    padding-left: 8px !important;
  }

  .p-section-card-scrollbox {
    padding: 10px 10px !important;
    max-height: 420px !important;
    width: 100% !important;
  }

  .p-section-card ul.p-card-list li.p-card-item,
  .p-section-card ul.p-card-list li,
  .p-section-card a {
    font-size: 1.1rem !important;
    line-height: 1.45 !important;
  }

  /* 8. Applications Database Search Button */
  .p-db-search-wrapper {
    margin-bottom: 12px !important;
    text-align: center !important;
  }

  .p-db-search-btn {
    display: inline-block !important;
    max-width: 100% !important;
    padding: 9px 16px !important;
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
  }

  /* 9. Tables (USP Table, Specification Code List Table) */
  table.usp,
  .info-box-list {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }

  .p-codelist-table {
    display: table !important;
    width: max-content !important;
    min-width: 620px !important;
    margin-bottom: 1.5rem !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
  }

  .p-codelist-table th,
  .p-codelist-table td {
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 0.88rem !important;
    vertical-align: middle !important;
  }

  .p-codelist-table-colhead th {
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 0.88rem !important;
    height: auto !important;
  }

  .p-codelist-table-rowhead,
  .p-codelist-table-rowhead1 {
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 0.88rem !important;
    width: auto !important;
    height: auto !important;
  }

  /* 10. Company / Locations Section (.o-locations) & Company Page */
  .o-link {
    display: block !important;
    width: 90% !important;
    max-width: 320px !important;
    height: auto !important;
    margin: 10px auto !important;
    background: #f7f4f7 !important;
    border: 1px solid #dcd0dc !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
    text-align: center !important;
  }

  .o-link > a > div {
    margin: 0 !important;
    padding: 0 !important;
    color: #7a5470 !important;
    text-align: center !important;
  }

  .o-link h1 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #6a4060 !important;
    margin: 0 !important;
  }

  .o-linkborder {
    display: none !important;
  }

  #overview.p-colorarea-title,
  #about.p-colorarea-title {
    width: 100% !important;
    margin: 24px 0 16px 0 !important;
    padding-top: 0 !important;
    margin-left: 0 !important;
    text-align: center !important;
  }

  #overview.p-colorarea-title h1,
  #about.p-colorarea-title h1 {
    font-size: 1.8rem !important;
    color: #4a4a4a !important;
  }

  main img[src*="Slide1_small"] {
    max-width: 92% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 20px auto !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08) !important;
  }

  main img[src*="Slide1_small"] + div {
    width: 92% !important;
    max-width: 500px !important;
    margin: 0 auto 24px auto !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  main img[src*="Slide1_small"] + div > div {
    background: #ffffff !important;
    border: 1px solid #e2dadf !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
  }

  main img[src*="Slide1_small"] + div h1 {
    font-size: 1.15rem !important;
    color: #6a4060 !important;
    font-weight: bold !important;
    border-bottom: 2px solid #a28097 !important;
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
  }

  main img[src*="Slide1_small"] + div table {
    width: 100% !important;
    font-size: 0.9rem !important;
    margin: 6px 0 !important;
  }

  main img[src*="Slide1_small"] + div td {
    font-size: 0.9rem !important;
    word-break: break-word !important;
  }

  main > h1[style*="760px"] {
    width: 92% !important;
    margin: 28px auto 14px auto !important;
    margin-right: auto !important;
    font-size: 1.3rem !important;
    color: #4a4a4a !important;
    text-align: center !important;
    display: block !important;
  }

  .o-locations {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 92% !important;
    max-width: 500px !important;
    margin: 0 auto 12px auto !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  .o-locations-tab {
    flex: 1 1 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 6px !important;
    font-size: 0.85rem !important;
    background: #f0eaf0 !important;
    color: #5a4b57 !important;
    border-radius: 6px !important;
    border: 1px solid #dcd2dc !important;
    text-align: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .o-locations-tab.active {
    background: #8b6283 !important;
    color: #ffffff !important;
    border-color: #8b6283 !important;
    font-weight: bold !important;
  }

  .o-locations-tab:nth-child(n + 2) {
    border-left: 1px solid #dcd2dc !important;
  }

  .o-locations-content {
    width: 92% !important;
    max-width: 500px !important;
    height: auto !important;
    min-height: auto !important;
    margin: 0 auto 24px auto !important;
    padding: 16px !important;
    background: #faf8fa !important;
    border: 1px solid #e5dce5 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    position: static !important;
  }

  .o-locations-content table {
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
    font-size: 0.9rem !important;
  }

  .o-locations-content tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  .o-locations-content td {
    display: inline-block !important;
    width: auto !important;
    min-width: auto !important;
    background: #ffffff !important;
    border: 1px solid #e0d6e0 !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    color: #54394e !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  }

  .o-locations-note {
    position: static !important;
    width: 100% !important;
    margin-top: 14px !important;
    padding: 10px 0 0 0 !important;
    border-top: 1px dashed #d9cbd9 !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    color: #a85858 !important;
    text-align: left !important;
  }

  .p-colorarea {
    width: 100% !important;
    margin-top: 1rem !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .p-description {
    width: 92% !important;
    max-width: 500px !important;
    margin: 0 auto 20px auto !important;
    padding: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e6dede !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #444444 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .p-description h1 {
    font-size: 1.15rem !important;
    line-height: 1.35 !important;
    font-weight: bold !important;
    color: #333333 !important;
    margin: 8px 0 10px 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    text-align: left !important;
  }

  .p-description p {
    margin-bottom: 12px !important;
  }

  .p-description-em {
    margin: 12px 0 12px 20px !important;
    padding: 0 !important;
    color: #75556d !important;
    font-weight: 600 !important;
  }

  .p-description[style*="1000px"] {
    width: 92% !important;
    max-width: 500px !important;
    margin: 20px auto !important;
    padding: 20px 16px !important;
    background: #fdfafc !important;
    border: 1px solid #eee4eb !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  .p-two-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .p-two-column img {
    width: 140px !important;
    max-width: 60% !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    border: 3px solid #d5c0cf !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
  }

  .p-two-column > div {
    width: 100% !important;
    text-align: left !important;
  }

  .p-two-column h2 {
    font-size: 1.25rem !important;
    color: #6d4b65 !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    font-weight: bold !important;
  }

  .p-two-column p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #444 !important;
    margin-bottom: 12px !important;
  }

  .p-two-column p[style*="right"] {
    text-align: right !important;
    margin-right: 0 !important;
    font-weight: 600 !important;
    color: #6d4b65 !important;
    font-style: italic !important;
  }

  /* 14. Resources Page (others/help.php) */
  main > div[style*="column.jpg"] {
    height: 140px !important;
  }

  main > div[style*="column.jpg"] h1 {
    padding-top: 50px !important;
    font-size: 1.8rem !important;
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
    text-align: center !important;
  }

  .o-others {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 92% !important;
    max-width: 480px !important;
    margin: 24px auto !important;
    box-sizing: border-box !important;
  }

  .o-others > div {
    width: 100% !important;
  }

  .o-others-box-pic {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 110px !important;
    background: #ffffff !important;
    border: 1px solid #e2e6f0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06) !important;
    text-decoration: none !important;
  }

  .o-others-box-pic img {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    border-right: 1px solid #eaeaea !important;
  }

  .o-others-box-pic div {
    padding: 12px 14px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .o-others-box-pic h2 {
    font-size: 1.1rem !important;
    color: #2c3e50 !important;
    font-weight: bold !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
  }

  .o-others-box-pic p {
    font-size: 0.85rem !important;
    color: #666666 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
  }

  .o-others-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 90px !important;
    padding: 16px 18px !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
  }

  .o-others-box h2 {
    font-size: 1.1rem !important;
    font-weight: bold !important;
    color: #2c3e50 !important;
    margin-bottom: 4px !important;
    font-family: inherit !important;
    padding: 0 !important;
  }

  .o-others-box p {
    font-size: 0.85rem !important;
    color: #555555 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    font-family: inherit !important;
  }

  .o-others-color1 {
    background: linear-gradient(135deg, #e8ebf2 0%, #d7dbe4 100%) !important;
    border: 1px solid #c8cee0 !important;
  }

  .o-others-color2 {
    background: linear-gradient(135deg, #eeeef7 0%, #cecce4 100%) !important;
    border: 1px solid #bcbaaa !important;
  }

  .o-others-color3 {
    background: linear-gradient(135deg, #f5f0f3 0%, #e2d2db 100%) !important;
    border: 1px solid #d4c0cc !important;
  }

  .o-others-color4 {
    background: linear-gradient(135deg, #f0f4f7 0%, #d0dee8 100%) !important;
    border: 1px solid #b8ccd8 !important;
  }

  /* 11. User Reports & User Articles Lists */
  .p-report-desc {
    font-size: 1.0rem !important;
    margin: 2px 0 6px 10px !important;
  }

  .p-article-title {
    font-size: 1.15rem !important;
  }

  /* 12. Footer Alignment */
  .footer {
    margin-top: 48px !important;
    margin-bottom: 0 !important;
    padding: 24px 16px !important;
    background-color: #cfb5c0 !important;
  }

  .footer-div {
    display: flex !important;
    flex-direction: column !important;
    max-width: 92% !important;
    margin: 0 auto !important;
    gap: 20px !important;
    padding: 12px 8px !important;
  }

  /* 13. Search Results & Filter Tables (.result-tabs) */
  .result-tabs {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .result-tabs div {
    padding: 8px 12px !important;
    font-size: 1rem !important;
  }

  /* 15. Column Selection Guide Section (products/selectguide) */
  .p-head-title {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
    text-align: center !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
  }

  .p-head-title span {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    display: block !important;
    margin-top: 6px !important;
    color: #f0e6ee !important;
    font-weight: normal !important;
  }

  .p-sub1 {
    width: 92% !important;
    max-width: 480px !important;
    margin: 16px auto !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .p-sub1 h2 {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    color: #666666 !important;
    font-weight: normal !important;
  }

  .p-selection {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 92% !important;
    max-width: 480px !important;
    margin: 20px auto 30px auto !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  .p-selection > a {
    width: 100% !important;
    display: block !important;
    text-decoration: none !important;
    margin: 0 !important;
  }

  .p-selection-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px 16px 18px 20px !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    text-align: left !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06) !important;
    position: relative !important;
  }

  .p-selection-box:before {
    width: 16px !important;
    height: 16px !important;
    left: 12px !important;
    bottom: -8px !important;
  }

  .p-selection-box:after {
    width: 10px !important;
    height: 10px !important;
    left: 4px !important;
    bottom: -12px !important;
  }

  .p-selection-box h1 {
    font-size: 1.1rem !important;
    line-height: 1.35 !important;
    font-weight: bold !important;
    color: #333333 !important;
    margin: 4px 0 6px 0 !important;
    text-align: left !important;
  }

  .p-selection-box h2 {
    font-size: 0.85rem !important;
    font-weight: normal !important;
    color: #666666 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .p-selection-box p {
    font-size: 0.85rem !important;
    color: #555555 !important;
    margin: 4px 0 0 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
  }

  .p-search-box,
  .p-search-box2 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    padding: 16px 48px 16px 16px !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    background-size: 32px auto !important;
    background-position: right 14px center !important;
    text-align: left !important;
  }

  .p-search-box h1,
  .p-search-box2 h1 {
    font-size: 1.0rem !important;
    font-weight: bold !important;
    color: #333333 !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  .p-search-box h2,
  .p-search-box2 h2 {
    font-size: 0.85rem !important;
    font-weight: normal !important;
    color: #666666 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .p-search-box p,
  .p-search-box2 p {
    font-size: 0.8rem !important;
    color: #555555 !important;
    margin: 2px 0 0 0 !important;
    text-align: left !important;
  }

  .p-select {
    width: 92% !important;
    max-width: 480px !important;
    margin: 0 auto 30px auto !important;
    box-sizing: border-box !important;
  }

  .p-select-title {
    width: 100% !important;
    margin: 20px auto 16px auto !important;
    margin-left: 0 !important;
    padding: 10px 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border-top: 2px solid #9577b0 !important;
    border-bottom: 2px solid #9577b0 !important;
  }

  .p-select-title h1 {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    color: #333333 !important;
    font-weight: bold !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .p-select-box {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-top: 16px !important;
    gap: 16px !important;
    align-items: center !important;
    grid-template-columns: none !important;
  }

  .p-select-box-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 16px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e8dfdf !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05) !important;
    text-align: center !important;
  }

  .p-select-box-content img {
    height: 36px !important;
    max-width: 85% !important;
    object-fit: contain !important;
    margin: 0 auto 10px auto !important;
    display: block !important;
  }

  .p-select-box-content h3 {
    font-size: 0.95rem !important;
    color: #5a4b57 !important;
    font-weight: bold !important;
    margin: 8px 0 12px 0 !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  .p-select-box-content ul {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 0 !important;
    padding-left: 20px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }

  .p-select-box-content li {
    margin-bottom: 6px !important;
    word-break: break-word !important;
  }

  .p-select-box-content li a {
    color: #7b4c73 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
  }

  .p-text-box {
    width: 92% !important;
    max-width: 100% !important;
    margin: 16px auto !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .p-text-box h2 {
    font-size: 1.1rem !important;
    margin: 12px 0 6px 0 !important;
  }

  .p-text-box p {
    font-size: 0.9rem !important;
    padding-left: 0 !important;
    line-height: 1.5 !important;
  }

  /* 16. Product Series Index Pages (.p-family, .p-family-box) */
  .p-family {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 92% !important;
    max-width: 440px !important;
    margin: 20px auto !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  .p-family > div {
    width: 100% !important;
    margin: 0 !important;
  }

  .p-family > div > a {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    margin: 0 !important;
  }

  .p-family-box {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 120px !important;
    box-sizing: border-box !important;
    padding: 20px 16px !important;
    margin: 0 auto !important;
    border-radius: 10px !important;
    border: 1px solid #d4c8d4 !important;
    background-color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .p-family-box img {
    height: 38px !important;
    max-width: 85% !important;
    object-fit: contain !important;
    margin-bottom: 10px !important;
    display: block !important;
  }

  .p-family-box p {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    color: #555555 !important;
    margin: 0 !important;
    padding: 0 8px !important;
    word-break: break-word !important;
    text-align: center !important;
    font-family: inherit !important;
  }

  /* 17. Scherzo Pages (products/Scherzo) & Codelist Tabs (.p-codelist) */
  div[style*="750px"] {
    width: 92% !important;
    max-width: 440px !important;
    margin: 20px auto 30px auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: auto !important;
  }

  div[style*="750px"] a {
    width: 100% !important;
    display: block !important;
    text-decoration: none !important;
    margin: 0 !important;
  }

  div[style*="750px"] .p-title-button,
  .p-title-button {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    margin: 0 auto !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  div[style*="750px"] .p-title-button h1,
  .p-title-button h1 {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  main img[src*="surface.jpg"] {
    max-width: 92% !important;
    height: auto !important;
    display: block !important;
    margin: 20px auto !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
  }

  main span[style*="margin-left:30px"] {
    margin-left: 0 !important;
    display: block !important;
    margin-top: 6px !important;
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
  }

  main .p-colorarea-box a h1[style*="padding-right"] {
    padding-right: 0 !important;
    font-size: 1.0rem !important;
    text-align: center !important;
    margin: 16px 0 !important;
    word-break: break-word !important;
  }

  main .p-title-button[style*="450px"] {
    width: 100% !important;
    max-width: 320px !important;
    margin: 16px auto !important;
    height: auto !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
  }

  .p-frame-wide {
    width: 92% !important;
    max-width: 500px !important;
    margin: 20px auto !important;
    padding: 16px 12px !important;
    box-sizing: border-box !important;
  }

  .p-frame-wide table {
    width: 100% !important;
    margin: 12px 0 !important;
    font-size: 0.88rem !important;
    display: block !important;
    overflow-x: auto !important;
  }

  .p-frame-wide table td {
    padding: 4px 6px !important;
    word-break: break-word !important;
  }

  .p-codelist {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 92% !important;
    max-width: 500px !important;
    margin: 0 auto 16px auto !important;
  }

  .p-codelist-tab {
    flex: 1 1 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    width: auto !important;
    height: auto !important;
    min-height: 60px !important;
    padding: 10px 8px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background-color: #f0eaf0 !important;
  }

  .p-codelist-tab.active {
    background-color: #8b6283 !important;
  }

  .p-codelist-tab.active h2,
  .p-codelist-tab.active p {
    color: #ffffff !important;
  }

  .p-codelist-tab h2 {
    font-size: 0.95rem !important;
    margin-bottom: 4px !important;
    color: #333333 !important;
    font-weight: bold !important;
  }

  .p-codelist-tab p {
    font-size: 0.75rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: #666666 !important;
  }

  .p-codelist-content {
    width: 92% !important;
    max-width: 500px !important;
    margin: 0 auto 30px auto !important;
    padding: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .p-circlebox {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    margin: 8px 0 12px 0 !important;
    display: inline-block !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 0.85rem !important;
    border-radius: 50% !important;
    float: none !important;
  }

  .p-codelist-content-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin-bottom: 12px !important;
  }

  .p-codelist-content-title h2 {
    font-size: 1.3rem !important;
    color: #333333 !important;
    margin: 0 !important;
  }

  .p-codelist-content-title p {
    font-size: 0.85rem !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  /* Support & User Reports Mobile Responsive Overhaul */
  .s-box {
    width: 92% !important;
    max-width: 540px !important;
    margin: 0 auto 30px auto !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  .page-heading {
    position: relative !important;
    margin: 28px 0 16px 0 !important;
    font-size: 1.45rem !important;
    font-weight: bold !important;
    text-align: left !important;
    padding-left: 10px !important;
  }

  .oval {
    position: absolute !important;
    top: -10px !important;
    left: 0 !important;
    z-index: -1 !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    opacity: 0.6 !important;
  }

  /* Distinct White Card Container for Each User Report Item */
  .s-box > div:not(.page-heading) {
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e8dfe6 !important;
    border-left: 4px solid #a28097 !important;
    border-radius: 10px !important;
    padding: 16px 14px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
  }

  .s-box > div:not(.page-heading) > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    text-decoration: none !important;
    width: 100% !important;
  }

  .s-box h2 {
    font-size: 1.1rem !important;
    font-weight: bold !important;
    color: #6b3558 !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }

  .s-country,
  .s-country1 {
    display: inline-block !important;
    font-size: 0.75rem !important;
    color: #666666 !important;
    font-weight: 500 !important;
    background: #f4f4f6 !important;
    border: 1px solid #e5e0e5 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
  }

  .flex-between {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 8px 0 4px 0 !important;
    padding-top: 8px !important;
    border-top: 1px dashed #efe6ed !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .flex-between > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .flex-between > span {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    color: #222222 !important;
    font-weight: 500 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    text-align: left !important;
  }

  /* Refined Soft Pastel Badge Tags (Right-Aligned) */
  .flex-between > a.info-app2,
  .flex-between > .info-app2,
  .info-app2 {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-end !important;
    margin-left: auto !important;
    width: auto !important;
    max-width: fit-content !important;
    font-size: 0.73rem !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    margin-top: 4px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    line-height: 1.2 !important;
  }

  /* Soft Pastel Tints for Product Categories */
  .color-unison { background-color: #ebf4f8 !important; color: #2c6885 !important; border: 1px solid #cce2ed !important; }
  .color-intrada { background-color: #fcf6e8 !important; color: #856114 !important; border: 1px solid #f2e3be !important; }
  .color-cadenza { background-color: #fcf0f5 !important; color: #9c2453 !important; border: 1px solid #f5cbde !important; }
  .color-scherzo { background-color: #f3f0f9 !important; color: #51397a !important; border: 1px solid #dcd3ee !important; }
  .color-dacapo { background-color: #f0f6f1 !important; color: #3e6840 !important; border: 1px solid #cee0d0 !important; }
  .color-presto { background-color: #f9f2f2 !important; color: #704040 !important; border: 1px solid #ebd4d4 !important; }
  .color-nardis { background-color: #eff3fc !important; color: #35589e !important; border: 1px solid #cddafd !important; }

  /* Hide raw hr divider lines when using card boxes */
  .s-box hr {
    display: none !important;
  }

  .s-logoposition {
    width: 92% !important;
    max-width: 540px !important;
    margin: 20px auto !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  .s-content-right {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .s-content-right h2 {
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
    color: #333333 !important;
  }

  .s-content-right p {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: #555555 !important;
    margin-bottom: 10px !important;
  }
}