@media (max-width: 760px) {
  html body:not(.admin-body) {
    padding-top: 58px !important;
  }

  html body:not(.admin-body) header.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 5000 !important;
    display: block !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: visible !important;
  }

  html body:not(.admin-body) header.topbar .logo.centered-logo,
  html body:not(.admin-body) header.topbar a.logo.centered-logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1 !important;
    display: flex !important;
    width: 146px !important;
    max-width: 146px !important;
    height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    text-decoration: none !important;
  }

  html body:not(.admin-body) header.topbar .logo-text {
    display: block !important;
    color: #050505 !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 6px !important;
    white-space: nowrap !important;
  }

  html body:not(.admin-body) header.topbar .header-tools {
    position: fixed !important;
    right: 10px !important;
    top: 7px !important;
    z-index: 5002 !important;
    display: flex !important;
    width: 96px !important;
    height: 44px !important;
    min-width: 96px !important;
    min-height: 44px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
  }

  html body:not(.admin-body) header.topbar .topbar-button {
    display: flex !important;
    position: relative !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #1fb463 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  html body:not(.admin-body) header.topbar .account-icon,
  html body:not(.admin-body) header.topbar .search-icon {
    display: none !important;
  }

  html body:not(.admin-body) header.topbar .mobile-menu-button {
    position: fixed !important;
    left: 10px !important;
    top: 8px !important;
    z-index: 5003 !important;
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #111 !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  html body:not(.admin-body) header.topbar .mobile-menu-button::before {
    content: "" !important;
    display: block !important;
    width: 27px !important;
    height: 18px !important;
    border-top: 3px solid #111 !important;
    border-bottom: 3px solid #111 !important;
    background: linear-gradient(#111, #111) center / 27px 3px no-repeat !important;
  }

  html body:not(.admin-body) header.topbar .mobile-menu-button::after,
  html body:not(.admin-body) header.topbar .mobile-menu-button > * {
    content: none !important;
    display: none !important;
  }

  html body.mobile-menu-open:not(.admin-body) header.topbar .mobile-menu-button::before {
    content: "X" !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: none !important;
    font-size: 42px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
  }

  html body:not(.admin-body) header.topbar .main-nav {
    top: 58px !important;
  }

  html body:not(.admin-body) .cert-strip {
    overflow: hidden !important;
    padding: 18px 0 !important;
    background: #fff !important;
  }

  html body:not(.admin-body) .cert-strip .clean-cert-logos {
    display: none !important;
  }

  html body:not(.admin-body) .cert-strip .cert-row {
    display: none !important;
  }

  html body:not(.admin-body) .cert-strip .mobile-cert-marquee {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  html body:not(.admin-body) .cert-strip .mobile-cert-track {
    display: flex !important;
    width: max-content !important;
    min-width: max-content !important;
    align-items: center !important;
    gap: 44px !important;
    animation: mobileCertMarqueeOverride 18s linear infinite !important;
    will-change: transform !important;
  }

  html body:not(.admin-body) .cert-strip .mobile-cert-track span {
    flex: 0 0 auto !important;
    min-width: 72px !important;
    color: #111 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  @keyframes mobileCertMarqueeOverride {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-50%, 0, 0);
    }
  }

  html body:not(.admin-body) .intro-block .video-frame,
  html body:not(.admin-body) .intro-block .intro-video {
    position: relative !important;
    background-image: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .18)), url("/assets/collection-machine.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
  }

  html body:not(.admin-body) #service .video-frame {
    position: relative !important;
    background-image: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .18)), url("/assets/about-feature-factory.png") !important;
    background-size: cover !important;
    background-position: center !important;
  }

  html body:not(.admin-body) #process .timeline article:nth-child(1) .process-card-bg::before {
    background-image: url("/assets/process-inquiry.jpg") !important;
  }

  html body:not(.admin-body) #process .timeline article:nth-child(2) .process-card-bg::before {
    background-image: url("/assets/process-development.jpg") !important;
  }

  html body:not(.admin-body) #process .timeline article:nth-child(3) .process-card-bg::before {
    background-image: url("/assets/process-production.jpg") !important;
  }

  html body:not(.admin-body) #process .timeline article:nth-child(4) .process-card-bg::before {
    background-image: url("/assets/process-inspection.jpg") !important;
  }

  html body:not(.admin-body) #process .timeline article:nth-child(5) .process-card-bg::before {
    background-image: url("/assets/process-delivery.jpg") !important;
  }

  html body:not(.admin-body) #process .timeline article:nth-child(6) .process-card-bg::before {
    background-image: url("/assets/process-after-sales.jpg") !important;
  }

  html body:not(.admin-body) #process .process-card-bg::before {
    background-size: cover !important;
    background-position: center !important;
  }

  html body:not(.admin-body) .about-page .about-hero {
    background-image: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), url("/assets/about-hero-factory.png") !important;
    background-size: cover !important;
    background-position: center !important;
  }

  html body:not(.admin-body) .about-page .about-photo {
    background-image: url("/assets/about-feature-factory.png") !important;
    background-size: cover !important;
    background-position: center !important;
  }
  /* Final mobile layout refinements. */
  html body:not(.admin-body) .mobile-core-advantages { margin-top: 48px !important; }
  html body:not(.admin-body) .mobile-core-advantages h2 { font-size: 28px !important; letter-spacing: 0 !important; text-transform: none !important; text-align: left !important; }
  html body:not(.admin-body) .mobile-core-advantages .mobile-blue-line { width: 52px !important; height: 4px !important; margin: 14px 0 24px !important; }
  html body:not(.admin-body) .mobile-core-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html body:not(.admin-body) .mobile-core-grid article { min-width: 0 !important; min-height: 220px !important; padding: 18px 14px !important; }
  html body:not(.admin-body) .mobile-core-grid .mobile-line-icon { margin-bottom: 12px !important; font-size: 34px !important; }
  html body:not(.admin-body) .mobile-core-grid h3 { margin: 0 0 14px !important; font-size: 16px !important; line-height: 1.25 !important; letter-spacing: 0 !important; }
  html body:not(.admin-body) .mobile-core-grid ul { padding-left: 17px !important; font-size: 12px !important; line-height: 1.55 !important; }

  html body:not(.admin-body) #process .process-card-bg::before { inset: 0 auto 0 0 !important; width: 42% !important; height: 100% !important; min-height: 100% !important; background-size: cover !important; background-position: center !important; background-color: #f2f4f5 !important; }
  html body:not(.admin-body) #process .timeline article,
  html body:not(.admin-body) #process .process-card-bg { height: 150px !important; min-height: 150px !important; }
  html body:not(.admin-body) #process .process-card-bg { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; padding: 16px 16px 16px 46% !important; }

  html body:not(.admin-body) .application-grid { gap: 0 !important; }
  html body:not(.admin-body) .application-grid span { display: block !important; min-height: 0 !important; padding: 17px 8px !important; border: 0 !important; border-bottom: 1px solid #ddd !important; border-radius: 0 !important; cursor: default !important; font-size: 18px !important; pointer-events: none !important; }
  html body:not(.admin-body) .application-grid span::after,
  html body:not(.admin-body) .application-detail { display: none !important; content: none !important; }
}

/* Keep these two layout corrections last because legacy hotfixes above repeat them. */
@media (max-width: 760px) {
  html body:not(.admin-body) main#top > section.hero.clone-section {
    min-height: 600px !important;
    background-size: auto 88% !important;
    background-position: center top !important;
    background-color: #080808 !important;
  }

  html body:not(.admin-body) main#top > section.hero.clone-section .hero-inner.single-image-hero {
    min-height: 600px !important;
  }

  html body:not(.admin-body) #process .timeline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  html body:not(.admin-body) #process .timeline article,
  html body:not(.admin-body) #process .process-card-bg {
    width: 100% !important;
    height: auto !important;
    min-height: 164px !important;
  }

  html body:not(.admin-body) #process .process-card-bg {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    justify-content: initial !important;
    align-items: initial !important;
    padding: 16px 14px 16px calc(42% + 14px) !important;
    overflow: hidden !important;
    color: #111 !important;
    background: #fff !important;
  }

  html body:not(.admin-body) #process .process-card-bg::before {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    display: block !important;
    width: 42% !important;
    height: 100% !important;
    min-height: 100% !important;
    content: "" !important;
  }

  html body:not(.admin-body) #process .process-card-bg span {
    width: 34px !important;
    height: 34px !important;
    margin: 0 0 8px !important;
    font-size: 15px !important;
  }

  html body:not(.admin-body) #process .process-card-bg h3 {
    margin: 0 0 7px !important;
    color: #111 !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }

  html body:not(.admin-body) #process .process-card-bg p {
    margin: 0 !important;
    color: #666 !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
    overflow: visible !important;
    white-space: normal !important;
  }
}

/* 2026-07-16 mobile usability corrections */
@media (max-width: 760px) {
  /* Show the full hero subject at a calmer scale. */
  html body:not(.admin-body) main#top > section.hero.clone-section {
    min-height: 600px !important;
    background-size: auto 88% !important;
    background-position: center top !important;
    background-color: #080808 !important;
  }

  html body:not(.admin-body) main#top > section.hero.clone-section .single-image-hero {
    min-height: 600px !important;
  }

  /* Product filters and cards become intentional horizontal swipe rows. */
  html body:not(.admin-body) #products .style-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 28px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scroll-snap-type: x proximity !important;
    padding: 0 20px 14px !important;
    scrollbar-width: none !important;
  }

  html body:not(.admin-body) #products .style-tabs::-webkit-scrollbar,
  html body:not(.admin-body) #products .product-grid::-webkit-scrollbar {
    display: none !important;
  }

  html body:not(.admin-body) #products .style-tabs button {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    white-space: nowrap !important;
  }

  html body:not(.admin-body) #products .product-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 20px 12px !important;
    scrollbar-width: none !important;
  }

  html body:not(.admin-body) #products .product-grid .product-tile {
    flex: 0 0 min(74vw, 300px) !important;
    width: min(74vw, 300px) !important;
    scroll-snap-align: start !important;
  }

  /* Process cards: fixed image column and a roomy text column. */
  html body:not(.admin-body) #process .timeline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  html body:not(.admin-body) #process .timeline article,
  html body:not(.admin-body) #process .process-card-bg {
    width: 100% !important;
    height: auto !important;
    min-height: 164px !important;
  }

  html body:not(.admin-body) #process .process-card-bg {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    justify-content: initial !important;
    padding: 16px 14px 16px calc(42% + 14px) !important;
    overflow: hidden !important;
    color: #111 !important;
    background: #fff !important;
  }

  html body:not(.admin-body) #process .process-card-bg::before {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    display: block !important;
    width: 42% !important;
    height: 100% !important;
    content: "" !important;
  }

  html body:not(.admin-body) #process .process-card-bg span {
    position: relative !important;
    z-index: 1 !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 0 8px !important;
    color: #fff !important;
    background: #4f98c5 !important;
    font-size: 15px !important;
  }

  html body:not(.admin-body) #process .process-card-bg h3 {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 0 7px !important;
    color: #111 !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }

  html body:not(.admin-body) #process .process-card-bg p {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
    color: #666 !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  /* Product highlights in a compact 2 x 2 grid. */
  html body:not(.admin-body) .product-info .icon-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 16px 0 18px !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body:not(.admin-body) .product-info .icon-list li {
    position: relative !important;
    min-height: 74px !important;
    padding: 34px 8px 9px !important;
    border: 1px solid #e2e2e2 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  html body:not(.admin-body) .product-info .icon-list li::before {
    position: absolute !important;
    top: 9px !important;
    left: 50% !important;
    display: grid !important;
    place-items: center !important;
    width: 20px !important;
    height: 20px !important;
    border: 1.5px solid #333 !important;
    border-radius: 50% !important;
    content: "✓" !important;
    font-size: 13px !important;
    transform: translateX(-50%) !important;
  }

  /* Compact, scroll-safe inquiry dialog. */
  html body:not(.admin-body) #inquiryModal {
    align-items: center !important;
    padding: 10px !important;
  }

  html body:not(.admin-body) #inquiryModal .inquiry-panel {
    width: min(100%, 430px) !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 18px 16px !important;
    overflow-y: auto !important;
  }

  html body:not(.admin-body) #inquiryModal .modal-close {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    float: right !important;
    width: 34px !important;
    height: 34px !important;
    margin: -4px -4px 0 8px !important;
    border-radius: 50% !important;
    background: #fff !important;
    font-size: 25px !important;
    line-height: 32px !important;
  }

  html body:not(.admin-body) #inquiryModal h2 {
    margin: 0 40px 12px 0 !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
  }

  html body:not(.admin-body) #inquiryModal input,
  html body:not(.admin-body) #inquiryModal textarea {
    min-height: 42px !important;
    margin-bottom: 8px !important;
    padding: 9px 11px !important;
    font-size: 14px !important;
  }

  html body:not(.admin-body) #inquiryModal .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px 10px !important;
    margin: 4px 0 10px !important;
  }

  html body:not(.admin-body) #inquiryModal .role-grid label {
    display: grid !important;
    grid-template-columns: 18px 1fr !important;
    gap: 7px !important;
    align-items: start !important;
    min-width: 0 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  html body:not(.admin-body) #inquiryModal .role-grid input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #111 !important;
  }

  html body:not(.admin-body) #inquiryModal textarea {
    min-height: 82px !important;
    rows: 3 !important;
  }

  html body:not(.admin-body) #inquiryModal .upload-box {
    min-height: 54px !important;
    margin-top: 2px !important;
    padding: 7px !important;
    font-size: 12px !important;
  }

  html body:not(.admin-body) #inquiryModal .modal-actions {
    gap: 8px !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 760px) {
  html body:not(.admin-body) #process .process-card-bg::before {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 42% !important;
    height: 100% !important;
    min-height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
  }
}

/* Keep the final workflow override last so earlier restoration rules cannot undo it. */
@media (max-width: 760px) {
  html body:not(.admin-body) #process .timeline { gap: 12px !important; }
  html body:not(.admin-body) #process .timeline article,
  html body:not(.admin-body) #process .process-card-bg { height: 150px !important; min-height: 150px !important; }
  html body:not(.admin-body) #process .process-card-bg { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; padding: 16px 16px 16px 46% !important; }
  html body:not(.admin-body) #process .process-card-bg::before { inset: 0 auto 0 0 !important; width: 42% !important; height: 100% !important; min-height: 100% !important; background-size: cover !important; background-position: center !important; background-color: #f2f4f5 !important; }
  html body:not(.admin-body) #process .timeline article:nth-child(1) .process-card-bg::before { background-position: center 70% !important; }
  html body:not(.admin-body) #process .timeline article:nth-child(2) .process-card-bg::before,
  html body:not(.admin-body) #process .timeline article:nth-child(3) .process-card-bg::before,
  html body:not(.admin-body) #process .timeline article:nth-child(4) .process-card-bg::before { background-position: center !important; }
  html body:not(.admin-body) #process .process-card-bg span { flex: 0 0 auto !important; margin: 0 0 7px !important; }
  html body:not(.admin-body) #process .process-card-bg h3 { margin: 0 0 5px !important; font-size: 18px !important; line-height: 1.2 !important; }
  html body:not(.admin-body) #process .process-card-bg p { margin: 0 !important; font-size: 13px !important; line-height: 1.35 !important; }
}

@media (max-width: 760px) {
  html body:not(.admin-body) #process .timeline {
    gap: 12px !important;
  }

  html body:not(.admin-body) #process .timeline article,
  html body:not(.admin-body) #process .process-card-bg {
    height: 150px !important;
    min-height: 150px !important;
  }

  html body:not(.admin-body) #process .process-card-bg {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 16px 16px 16px 46% !important;
  }

  html body:not(.admin-body) #process .process-card-bg::before {
    width: 42% !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #f2f4f5 !important;
  }

  html body:not(.admin-body) #process .timeline article:nth-child(1) .process-card-bg::before { background-position: center 70% !important; }
  html body:not(.admin-body) #process .timeline article:nth-child(2) .process-card-bg::before { background-position: center !important; }
  html body:not(.admin-body) #process .timeline article:nth-child(3) .process-card-bg::before { background-position: center !important; }
  html body:not(.admin-body) #process .timeline article:nth-child(4) .process-card-bg::before { background-position: center !important; }

  html body:not(.admin-body) #process .process-card-bg span {
    flex: 0 0 auto !important;
    margin: 0 0 7px !important;
  }

  html body:not(.admin-body) #process .process-card-bg h3 {
    margin: 0 0 5px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  html body:not(.admin-body) #process .process-card-bg p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

/* Stable storefront restoration. */
html body:not(.admin-body) #process .process-card-bg {
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

html body:not(.admin-body) #process .timeline article:nth-child(1) .process-card-bg {
  background-image: linear-gradient(rgba(7, 22, 35, .08), rgba(7, 22, 35, .68)), url("/assets/process-inquiry.jpg") !important;
  background-position: center bottom !important;
}

html body:not(.admin-body) #process .timeline article:nth-child(2) .process-card-bg {
  background-image: linear-gradient(rgba(7, 22, 35, .08), rgba(7, 22, 35, .68)), url("/assets/process-development.jpg") !important;
  background-position: 72% center !important;
}

html body:not(.admin-body) #process .timeline article:nth-child(3) .process-card-bg {
  background-image: linear-gradient(rgba(7, 22, 35, .08), rgba(7, 22, 35, .68)), url("/assets/process-production-user.jpg?v=20260715b") !important;
  background-position: 18% center !important;
}

html body:not(.admin-body) #process .timeline article:nth-child(4) .process-card-bg {
  background-image: linear-gradient(rgba(7, 22, 35, .08), rgba(7, 22, 35, .68)), url("/assets/process-inspection-cn.png?v=20260715b") !important;
  background-position: 58% center !important;
}

html body:not(.admin-body) #process .timeline article:nth-child(5) .process-card-bg {
  background-image: linear-gradient(rgba(7, 22, 35, .08), rgba(7, 22, 35, .68)), url("/assets/process-delivery.jpg") !important;
  background-position: center center !important;
}

html body:not(.admin-body) #process .timeline article:nth-child(6) .process-card-bg {
  background-image: linear-gradient(rgba(7, 22, 35, .08), rgba(7, 22, 35, .68)), url("/assets/process-after-sales.jpg") !important;
  background-position: center center !important;
}

html body:not(.admin-body) #process .process-card-bg::before {
  content: none !important;
  display: none !important;
}

html body:not(.admin-body) .mobile-core-advantages,
html body:not(.admin-body) .mobile-service-cards,
html body:not(.admin-body) .mobile-extra-info {
  display: none !important;
}

@media (max-width: 760px) {
  html body:not(.admin-body) {
    padding-top: 0 !important;
  }

  html body:not(.admin-body) header.topbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }

  html body:not(.admin-body) header.topbar .mobile-menu-button {
    position: absolute !important;
  }

  html body:not(.admin-body) header.topbar .header-tools {
    position: fixed !important;
    display: flex !important;
    visibility: visible !important;
    width: 96px !important;
    height: 44px !important;
    right: 10px !important;
    top: 7px !important;
    z-index: 5002 !important;
    overflow: visible !important;
  }

  html body:not(.admin-body) header.topbar a.topbar-button[href*="wa.me"],
  html body:not(.admin-body) a.topbar-button[href*="wa.me"] {
    position: fixed !important;
    display: inline-flex !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: center !important;
    top: 7px !important;
    right: 10px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: #19b65b !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    z-index: 5003 !important;
  }

  html body:not(.admin-body) header.topbar .main-nav {
    position: absolute !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 5001 !important;
  }

  html body:not(.admin-body) #process {
    padding: 44px 18px !important;
  }

  html body:not(.admin-body) #process .timeline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  html body:not(.admin-body) #process .timeline article,
  html body:not(.admin-body) #process .process-card-bg {
    min-height: 126px !important;
  }

  html body:not(.admin-body) #process .timeline article {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
  }

  html body:not(.admin-body) #process .timeline article::before,
  html body:not(.admin-body) #process .timeline article::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  html body:not(.admin-body) #process .process-card-bg {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 126px !important;
    position: relative !important;
    padding: 18px 14px 16px 43% !important;
    overflow: hidden !important;
    border: 1px solid #e3e3e3 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #111 !important;
  }

  html body:not(.admin-body) #process .timeline article:nth-child(n) .process-card-bg {
    background-color: #fff !important;
    background-image: none !important;
    background-position: initial !important;
  }

  html body:not(.admin-body) #process .process-card-bg::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 39% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  html body:not(.admin-body) #process .timeline article:nth-child(1) .process-card-bg::before { background-image: url("/assets/process-inquiry.jpg") !important; background-position: center bottom !important; }
  html body:not(.admin-body) #process .timeline article:nth-child(2) .process-card-bg::before { background-image: url("/assets/process-development.jpg") !important; background-position: 72% center !important; }
  html body:not(.admin-body) #process .timeline article:nth-child(3) .process-card-bg::before { background-image: url("/assets/process-production-user.jpg?v=20260715b") !important; background-position: 18% center !important; }
  html body:not(.admin-body) #process .timeline article:nth-child(4) .process-card-bg::before { background-image: url("/assets/process-inspection-cn.png?v=20260715b") !important; background-position: 58% center !important; }
  html body:not(.admin-body) #process .timeline article:nth-child(5) .process-card-bg::before { background-image: url("/assets/process-delivery.jpg") !important; background-position: center !important; }
  html body:not(.admin-body) #process .timeline article:nth-child(6) .process-card-bg::before { background-image: url("/assets/process-after-sales.jpg") !important; background-position: center !important; }

  html body:not(.admin-body) #process .process-card-bg > * {
    position: relative !important;
    z-index: 1 !important;
  }

  html body:not(.admin-body) #process .process-card-bg span {
    display: inline-flex !important;
    width: 28px !important;
    height: 28px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 6px !important;
    border-radius: 50% !important;
    background: #548cb3 !important;
    color: #fff !important;
    font-size: 13px !important;
  }

  html body:not(.admin-body) #process .process-card-bg h3 {
    margin: 0 0 5px !important;
    color: #111 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  html body:not(.admin-body) #process .process-card-bg p {
    margin: 0 !important;
    color: #666 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  html body:not(.admin-body) .mobile-core-advantages {
    display: block !important;
  }

  html body:not(.admin-body) .empty-product-state {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 28px 20px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    line-height: 1.5 !important;
  }

  /* Keep the complete mobile hero message inside one continuous image. */
  html body:not(.admin-body) main#top > section.hero.clone-section {
    height: 470px !important;
    min-height: 470px !important;
    padding: 0 !important;
    background: #080808 !important;
    overflow: hidden !important;
  }

  html body:not(.admin-body) main#top > section.hero.clone-section .hero-inner.single-image-hero {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100% !important;
    height: 470px !important;
    min-height: 470px !important;
    padding: 0 !important;
    background-image:
      linear-gradient(to bottom, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .10) 38%, rgba(0, 0, 0, .68) 100%),
      url("/assets/home-hero-crochet-dress.jpg") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 62% center !important;
  }

  html body:not(.admin-body) main#top > section.hero.clone-section .hero-inner.single-image-hero::before,
  html body:not(.admin-body) main#top > section.hero.clone-section .hero-inner.single-image-hero::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.admin-body) main#top > section.hero.clone-section .hero-copy.hero-overlay {
    box-sizing: border-box !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 22px 20px 28px !important;
    background: transparent !important;
    color: #fff !important;
    text-align: center !important;
  }

  html body:not(.admin-body) main#top > section.hero.clone-section .hero-copy .crumb {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  html body:not(.admin-body) main#top > section.hero.clone-section .hero-copy h1 {
    max-width: 350px !important;
    margin: 0 0 9px !important;
    color: #fff !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8) !important;
  }

  html body:not(.admin-body) main#top > section.hero.clone-section .hero-copy .lead {
    max-width: 350px !important;
    margin: 0 0 16px !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-shadow: 0 1px 7px rgba(0, 0, 0, .9) !important;
  }

  html body:not(.admin-body) main#top > section.hero.clone-section .hero-actions {
    display: flex !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 !important;
  }

  html body:not(.admin-body) main#top > section.hero.clone-section .hero-actions .button.dark {
    display: none !important;
  }

  html body:not(.admin-body) main#top > section.hero.clone-section .hero-actions .button.light {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 170px !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 760px) {
  html body:not(.admin-body) .mobile-core-advantages { margin-top: 48px !important; }
  html body:not(.admin-body) .mobile-core-advantages h2 { font-size: 28px !important; letter-spacing: 0 !important; text-transform: none !important; text-align: left !important; }
  html body:not(.admin-body) .mobile-core-advantages .mobile-blue-line { width: 52px !important; height: 4px !important; margin: 14px 0 24px !important; }
  html body:not(.admin-body) .mobile-core-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html body:not(.admin-body) .mobile-core-grid article { min-width: 0 !important; min-height: 220px !important; padding: 18px 14px !important; }
  html body:not(.admin-body) .mobile-core-grid .mobile-line-icon { margin-bottom: 12px !important; font-size: 34px !important; }
  html body:not(.admin-body) .mobile-core-grid h3 { margin: 0 0 14px !important; font-size: 16px !important; line-height: 1.25 !important; letter-spacing: 0 !important; }
  html body:not(.admin-body) .mobile-core-grid ul { padding-left: 17px !important; font-size: 12px !important; line-height: 1.55 !important; }

  html body:not(.admin-body) #process .process-card-bg::before { width: 42% !important; background-size: cover !important; background-position: center !important; background-color: #f2f4f5 !important; }
  html body:not(.admin-body) #process .timeline article,
  html body:not(.admin-body) #process .process-card-bg { height: 150px !important; min-height: 150px !important; }
  html body:not(.admin-body) #process .process-card-bg { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; padding: 16px 16px 16px 46% !important; }

  html body:not(.admin-body) .application-grid { gap: 0 !important; }
  html body:not(.admin-body) .application-grid span { display: block !important; min-height: 0 !important; padding: 17px 8px !important; border: 0 !important; border-bottom: 1px solid #ddd !important; border-radius: 0 !important; cursor: default !important; font-size: 18px !important; pointer-events: none !important; }
  html body:not(.admin-body) .application-grid span::after,
  html body:not(.admin-body) .application-detail { display: none !important; content: none !important; }
}