/* Qingtan Muyu mobile refinements. Desktop layout intentionally remains unchanged. */

.qtm-brand-link {
  flex: 0 0 auto;
  min-width: 0;
  gap: 11px;
  color: #2c1810;
  text-decoration: none;
}

.qtm-site-logo {
  display: block;
  object-fit: contain;
}

.qtm-header-logo-mark {
  display: block;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  overflow: hidden;
  border-radius: 10px;
  background: #f7f5ef;
}

.qtm-header-logo-source {
  display: block;
  width: 136px;
  height: 136px;
  max-width: none;
  transform: translate(-43px, -27px);
}

.qtm-header-brand-name {
  display: block;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.qtm-header-brand-name small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qtm-site-logo--footer {
  width: 148px;
  height: 148px;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.qtm-site-footer {
  background: #2c1810 !important;
  color: #fff;
}

.qtm-site-footer .qtm-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: rgba(243, 237, 228, 0.62);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.qtm-site-footer .qtm-footer-legal a {
  color: #f3ede4;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.qtm-privacy-policy h2 {
  margin: 34px 0 10px;
  color: #2c1810;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
}

.qtm-privacy-policy h2:first-child {
  margin-top: 0;
}

.qtm-privacy-policy p {
  color: #504440;
  font-size: 16px;
  line-height: 1.75;
}

.qtm-privacy-policy a {
  color: #3e5622;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.qtm-privacy-consent {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(780px, calc(100vw - 48px));
  padding: 20px 22px;
  color: #f8f4ee;
  background: #2c1810;
  border: 1px solid rgba(243, 237, 228, 0.24);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(24, 12, 6, 0.32);
}

.qtm-privacy-consent[hidden] {
  display: none !important;
}

.qtm-privacy-copy {
  flex: 1 1 auto;
}

.qtm-privacy-copy h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.qtm-privacy-copy p {
  margin: 0;
  color: rgba(243, 237, 228, 0.82);
  font-size: 13px;
  line-height: 1.55;
}

.qtm-privacy-copy a {
  color: #fbbf24;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.qtm-privacy-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.qtm-privacy-actions button {
  min-height: 42px;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.qtm-consent-essential {
  color: #f3ede4;
  border: 1px solid rgba(243, 237, 228, 0.55);
  background: transparent;
}

.qtm-consent-accept {
  color: #2c1810;
  background: #fbbf24;
}

body.qtm-consent-visible > aside[aria-label="Quick contact options"] {
  visibility: hidden;
}

@media (max-width: 767px) {
  :root {
    --qtm-mobile-gutter: 20px;
  }

  html {
    scroll-padding-top: 76px;
  }

  body {
    padding-bottom: 72px;
  }

  header.sticky > div {
    height: 68px;
    padding-inline: 16px;
  }

  header.sticky > div > a {
    min-width: 0;
  }

  .qtm-brand-link {
    gap: 8px;
  }

  .qtm-header-logo-mark {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 9px;
  }

  .qtm-header-logo-source {
    width: 121px;
    height: 121px;
    transform: translate(-38px, -24px);
  }

  .qtm-header-brand-name {
    font-size: 14px;
  }

  .qtm-header-brand-name small {
    margin-top: 3px;
    font-size: 9px;
    letter-spacing: 0.07em;
  }

  .qtm-site-logo--footer {
    width: 124px;
    height: 124px;
  }

  .qtm-privacy-consent {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
    border-radius: 14px;
  }

  .qtm-privacy-copy h2 {
    font-size: 16px;
  }

  .qtm-privacy-copy p {
    font-size: 12px;
  }

  .qtm-privacy-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  header.sticky summary {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  header.sticky details nav {
    width: min(17rem, calc(100vw - 24px));
    max-height: calc(100vh - 88px);
    overflow-y: auto;
  }

  [class~="px-margin-desktop"],
  [class~="px-margin-mobile"] {
    padding-inline: var(--qtm-mobile-gutter) !important;
  }

  [class~="py-32"],
  [class~="py-24"] {
    padding-block: 56px !important;
  }

  [class~="py-20"] {
    padding-block: 52px !important;
  }

  [class~="py-16"] {
    padding-block: 48px !important;
  }

  [class~="mb-32"] {
    margin-bottom: 64px !important;
  }

  [class~="mb-24"],
  [class~="mb-20"] {
    margin-bottom: 52px !important;
  }

  [class~="mb-16"],
  [class~="mb-14"] {
    margin-bottom: 44px !important;
  }

  [class~="gap-24"],
  [class~="gap-16"] {
    gap: 32px !important;
  }

  [class~="gap-12"] {
    gap: 28px !important;
  }

  [class~="p-12"],
  [class~="p-10"],
  [class~="p-8"] {
    padding: 24px !important;
  }

  [class~="min-h-[819px]"],
  [class~="min-h-[760px]"],
  [class~="min-h-[600px]"],
  [class~="min-h-[520px]"] {
    min-height: auto !important;
  }

  [class~="h-[716px]"] {
    height: 460px !important;
  }

  [class~="h-[60vh]"] {
    height: min(520px, 68vh) !important;
  }

  [class~="text-display-lg"] {
    font-size: clamp(2.25rem, 10.5vw, 2.65rem) !important;
    line-height: 1.07 !important;
    letter-spacing: -0.035em !important;
  }

  [class~="text-headline-lg"] {
    font-size: clamp(1.85rem, 8.5vw, 2.2rem) !important;
    line-height: 1.12 !important;
  }

  h1,
  h2,
  h3,
  p,
  a,
  dd,
  dt {
    overflow-wrap: anywhere;
  }

  main > section:first-child[class~="min-h-[760px]"] > div.relative {
    padding-top: 52px !important;
    padding-bottom: 44px !important;
  }

  main > section:first-child[class~="min-h-[760px]"] [class~="mt-12"] {
    margin-top: 32px !important;
  }

  main > section:first-child[class~="min-h-[760px]"] [class~="grid-cols-2"] > div {
    min-width: 0;
    padding: 12px 10px !important;
    align-items: flex-start;
  }

  main > section:first-child[class~="min-h-[760px]"] [class~="grid-cols-2"] span:last-child {
    font-size: 0.72rem;
    line-height: 1.35;
  }

  #product-rfq {
    padding: 22px !important;
  }

  #product-rfq form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #product-rfq form > [class~="col-span-2"] {
    grid-column: span 1 / span 1 !important;
  }

  dl [class~="grid-cols-[120px_1fr]"] {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding-inline: 12px !important;
  }

  dl + [class~="grid-cols-3"] > div {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 6px;
  }

  form input,
  form select,
  form textarea,
  form button,
  a[class*="py-3"],
  a[class*="py-4"] {
    min-height: 44px;
  }

  footer {
    padding-top: 52px !important;
    padding-bottom: 40px !important;
  }

  aside[aria-label="Quick contact options"] {
    right: 50% !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    transform: translateX(50%);
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px;
    border: 1px solid rgba(211, 195, 190, 0.7);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 30px rgba(44, 24, 16, 0.18);
    backdrop-filter: blur(10px);
  }

  aside[aria-label="Quick contact options"] > a,
  aside[aria-label="Quick contact options"] > details > summary {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0 !important;
    justify-content: center;
  }

  aside[aria-label="Quick contact options"] details > div {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 78px !important;
    width: auto !important;
  }
}

@media (max-width: 389px) {
  :root {
    --qtm-mobile-gutter: 16px;
  }

  [class~="text-display-lg"] {
    font-size: 2.1rem !important;
  }

  main > section:first-child[class~="min-h-[760px]"] [class~="grid-cols-2"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* QTM MOBILE COMPACT LAYOUT 2026-08-18 */
@media (max-width: 767px) {
  main > .h-16 { height: 28px !important; }
  main > section:not(:first-child) [class~="mb-12"] { margin-bottom: 28px !important; }
  main > section:not(:first-child) [class~="mb-10"] { margin-bottom: 24px !important; }
  main > section[class~="mb-20"], main > section[class~="mb-24"], main > section[class~="mb-32"] { margin-bottom: 36px !important; }
  main > section:not(:first-child)[class~="py-20"] { padding-block: 40px !important; }

  body.home main > section:first-of-type > div.relative { padding-block: 36px 30px !important; }
  body.home main > section:first-of-type h1 { font-size: clamp(2rem,9.5vw,2.45rem) !important; }
  body.home main > section:first-of-type p { margin-bottom: 24px !important; }
  body.home main > section:first-of-type h1 + p + div { width:100%; display:grid !important; grid-template-columns:1fr 1fr; gap:10px !important; }
  body.home main > section:first-of-type h1 + p + div > a { padding:12px 8px !important; min-width:0; min-height:48px; font-size:.68rem; line-height:1.25; text-align:center; }
  body.home main > section:first-of-type [class~="mt-12"] { margin-top:24px !important; }

  body.home main > section:nth-of-type(2) > .grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  body.home main > section:nth-of-type(2) .h-64 { height:128px !important; }
  body.home main > section:nth-of-type(2) .p-6 { padding:14px 10px !important; }
  body.home main > section:nth-of-type(2) h3 { font-size:.98rem !important; line-height:1.22; margin-bottom:8px !important; }
  body.home main > section:nth-of-type(2) h3 + span { font-size:.72rem !important; line-height:1.2; gap:4px !important; }

  body.home main > section:nth-of-type(3) .max-w-container-max > .grid,
  body.home main > section:nth-of-type(4) .max-w-container-max > .grid:last-child,
  body.home main > section:nth-of-type(6) > .grid,
  body.home main > section:nth-of-type(8) > .grid,
  body.home main > section:nth-of-type(9) > .grid,
  body.home main > section:nth-of-type(11) > .grid,
  body:has(#product-rfq) main > section:nth-of-type(2) .grid {
    display:flex !important; grid-template-columns:none !important; gap:14px !important;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; overscroll-behavior-inline:contain;
    margin-inline:calc(var(--qtm-mobile-gutter) * -1); padding:2px var(--qtm-mobile-gutter) 14px; scrollbar-width:none;
  }
  body.home main > section:nth-of-type(3) .max-w-container-max > .grid::-webkit-scrollbar,
  body.home main > section:nth-of-type(4) .max-w-container-max > .grid:last-child::-webkit-scrollbar,
  body.home main > section:nth-of-type(6) > .grid::-webkit-scrollbar,
  body.home main > section:nth-of-type(8) > .grid::-webkit-scrollbar,
  body.home main > section:nth-of-type(9) > .grid::-webkit-scrollbar,
  body.home main > section:nth-of-type(11) > .grid::-webkit-scrollbar,
  body:has(#product-rfq) main > section:nth-of-type(2) .grid::-webkit-scrollbar { display:none; }
  body.home main > section:nth-of-type(3) .max-w-container-max > .grid > *,
  body.home main > section:nth-of-type(4) .max-w-container-max > .grid:last-child > *,
  body.home main > section:nth-of-type(6) > .grid > *,
  body.home main > section:nth-of-type(8) > .grid > *,
  body.home main > section:nth-of-type(9) > .grid > *,
  body.home main > section:nth-of-type(11) > .grid > *,
  body:has(#product-rfq) main > section:nth-of-type(2) .grid > * { flex:0 0 min(82vw,318px); scroll-snap-align:start; }

  body.home main > section:nth-of-type(3) .h-64 { height:210px !important; }
  body.home main > section:nth-of-type(3) .p-6 { padding:18px !important; }
  body.home main > section:nth-of-type(4) .grid-cols-2 > div { padding:16px 10px !important; }
  body.home main > section:nth-of-type(4) .grid-cols-2 strong { font-size:1.35rem !important; line-height:1.1; }

  body.home main > section:nth-of-type(5) > div > div:first-child > .grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  body.home main > section:nth-of-type(5) > div > div:first-child > .grid > div { padding:16px !important; }
  body.home main > section:nth-of-type(5) > div > div:first-child > .grid h3 { font-size:1rem !important; line-height:1.25; }
  body.home main > section:nth-of-type(5) > div > div:first-child > .grid p { font-size:.82rem; line-height:1.5; }
  body.home main > section:nth-of-type(5) > div > div:nth-child(2) > .grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
  body.home main > section:nth-of-type(5) > div > div:nth-child(2) > .grid > div { padding:12px !important; gap:8px !important; }
  body.home main > section:nth-of-type(5) > div > div:nth-child(2) > .grid span:last-child { font-size:.78rem !important; line-height:1.3; }
  body.home main > section:nth-of-type(5) .h-\[400px\] { height:240px !important; }
  body.home main > section:nth-of-type(5) [class~="mb-20"] { margin-bottom:40px !important; }

  body.home main > section:nth-of-type(7) .grid { gap:10px !important; }
  body.home main > section:nth-of-type(7) .grid > div { min-height:0 !important; padding:14px 10px !important; }
  body.home main > section:nth-of-type(7) .grid > div p,
  body.home main > section:nth-of-type(7) .grid > div span { font-size:.76rem !important; line-height:1.35; }

  body.home main > section:nth-of-type(10) .grid .grid { display:flex !important; grid-template-columns:none !important; gap:12px !important; overflow-x:auto; scroll-snap-type:x proximity; margin-inline:calc(var(--qtm-mobile-gutter) * -1); padding:2px var(--qtm-mobile-gutter) 14px; scrollbar-width:none; }
  body.home main > section:nth-of-type(10) .grid .grid::-webkit-scrollbar { display:none; }
  body.home main > section:nth-of-type(10) .grid .grid > * { flex:0 0 min(78vw,300px); scroll-snap-align:start; padding:18px !important; }
  body.home main > section:nth-of-type(10) .grid .grid p { font-size:.86rem; line-height:1.5; }

  body.page-parent main .grid[class~="lg:grid-cols-3"],
  body.parent-pageid-12:not(:has(#product-rfq)) main .grid[class~="lg:grid-cols-3"],
  body.page-parent main .grid[class~="lg:grid-cols-4"],
  body.parent-pageid-12:not(:has(#product-rfq)) main .grid[class~="lg:grid-cols-4"] { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  body.page-parent main article > .p-6,
  body.parent-pageid-12:not(:has(#product-rfq)) main article > .p-6 { padding:14px !important; }
  body.page-parent main article h3,
  body.parent-pageid-12:not(:has(#product-rfq)) main article h3 { font-size:.98rem !important; line-height:1.25; margin-block:7px 9px !important; }
  body.page-parent main article p.text-sm,
  body.parent-pageid-12:not(:has(#product-rfq)) main article p.text-sm { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; font-size:.75rem !important; line-height:1.45 !important; margin-bottom:10px !important; }
  body.page-parent main article p.text-xs,
  body.parent-pageid-12:not(:has(#product-rfq)) main article p.text-xs { display:none; }
  body.page-parent main article .grid.grid-cols-2,
  body.parent-pageid-12:not(:has(#product-rfq)) main article .grid.grid-cols-2 { gap:5px !important; }
  body.page-parent main article .grid.grid-cols-2 a,
  body.parent-pageid-12:not(:has(#product-rfq)) main article .grid.grid-cols-2 a { padding:9px 4px !important; min-height:42px; font-size:.67rem !important; line-height:1.15; display:flex; align-items:center; justify-content:center; }

  body:has(#product-rfq) main > section:first-of-type { padding-block:28px 38px !important; }
  body:has(#product-rfq) main > section:first-of-type nav { margin-bottom:22px !important; font-size:.75rem; }
  body:has(#product-rfq) main > section:first-of-type > div > .grid { gap:30px !important; }
  body:has(#product-rfq) #product-rfq { padding:18px !important; }
  body:has(#product-rfq) main > section:nth-of-type(2) { padding-block:38px !important; }
  body:has(#product-rfq) main > section:nth-of-type(2) .p-5 { padding:16px !important; }

  footer { padding-top:40px !important; }
  footer > div { grid-template-columns:repeat(2,minmax(0,1fr)) !important; column-gap:18px !important; row-gap:30px !important; }
  footer > div > div:first-child, footer > div > div:last-child { grid-column:1 / -1; }
  footer > div > div { gap:14px !important; }
  footer nav { gap:10px !important; }
  footer nav a { font-size:.84rem !important; line-height:1.35; }
}
@media (max-width:359px) {
  body.home main > section:nth-of-type(2) > .grid,
  body.page-parent main .grid[class~="lg:grid-cols-3"],
  body.parent-pageid-12:not(:has(#product-rfq)) main .grid[class~="lg:grid-cols-3"] { grid-template-columns:minmax(0,1fr) !important; }
}


/* QTM MOBILE VIEWPORT WIDTH FIX 2026-08-18 */
@media (max-width: 767px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden !important; }
  main, main > section { width:100%; max-width:100vw; min-width:0; }
  main > section > *, main .max-w-container-max { min-width:0 !important; max-width:100% !important; }
  main h1, main h2, main h3, main p { max-width:100% !important; }
  body.home main > section:first-of-type > div.relative { width:100vw !important; max-width:100vw !important; overflow:hidden; }
  body.home main > section:first-of-type h1,
  body.home main > section:first-of-type p { width:100% !important; overflow-wrap:anywhere; }
  body.home main > section:first-of-type h1 + p + div { min-width:0 !important; max-width:100% !important; }
  body.home main > section:first-of-type h1 + p + div > a { max-width:100%; overflow:hidden; }
  footer, footer > div { width:100%; max-width:100vw; min-width:0; }
}