/* ==========================================================================
   mingda · page templates (design-spec §5.1 home, §5.3 product detail)
   ========================================================================== */

/* ============================== home (§5.1) ============================== */

/* 1 · hero carousel */
.md-hero{position:relative;background:var(--md-color-bg-dark);
  color:var(--md-color-text-inverse);overflow:hidden;}
.md-hero__slides{position:relative;}
.md-hero__slide{position:relative;display:none;padding-block:var(--md-space-12);}
.md-hero__slide.is-active{display:block;}
.md-hero__media{position:absolute;inset:0;z-index:0;}
.md-hero__media img{width:100%;height:100%;object-fit:cover;opacity:.42;}
.md-hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(21,21,23,.88) 0%,rgba(21,21,23,.62) 55%,rgba(21,21,23,.35) 100%);}
.md-hero__inner{position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(12,1fr);gap:var(--md-space-6);}
.md-hero__copy{grid-column:span 6;}
.md-hero__copy h1,.md-hero__headline{color:var(--md-color-text-inverse);
  margin:0 0 var(--md-space-5);font-family:var(--md-font-heading);
  font-size:var(--md-text-h1);line-height:var(--md-lh-h1);font-weight:700;
  letter-spacing:var(--md-tracking-h1);}
html[lang="zh-CN"] .md-hero__headline{font-family:var(--md-font-heading-zh);}
.md-hero__copy .md-lede{color:var(--md-color-text-inverse-secondary);
  max-width:46ch;margin:0 0 var(--md-space-6);}
.md-hero .md-actions{flex-wrap:wrap;}
.md-hero__dots{position:absolute;left:50%;bottom:var(--md-space-5);
  transform:translateX(-50%);z-index:2;display:flex;gap:var(--md-space-2);
  list-style:none;margin:0;padding:0;}
.md-hero__dots button{width:40px;height:6px;border:0;border-radius:var(--md-radius-xs);
  background:var(--md-color-grey-600);cursor:pointer;padding:0;
  transition:background-color 180ms ease-out;}
.md-hero__dots button[aria-selected="true"]{background:var(--md-color-primary);}
@media (max-width:1023px){.md-hero__copy{grid-column:span 8;}}
@media (max-width:767px){
  .md-hero__inner{display:block;}
  .md-hero__slide{padding-block:var(--md-space-7) var(--md-space-8);}
  .md-hero__copy{grid-column:auto;width:100%;max-width:100%;}
  .md-hero__copy .md-eyebrow{margin-bottom:var(--md-space-2);font-size:0.6875rem;}
  .md-hero__copy h1,.md-hero__headline{
    font-size:1.625rem;line-height:1.22;margin:0 0 var(--md-space-3);
    letter-spacing:-0.01em;max-width:100%;
  }
  .md-hero__copy .md-lede{
    font-size:0.9375rem;line-height:1.45;margin:0 0 var(--md-space-4);
    color:rgba(255,255,255,0.85);max-width:100%;
  }
  .md-hero .md-actions{flex-direction:column;align-items:stretch;gap:var(--md-space-2);}
  .md-hero .md-btn{width:100%;min-height:44px;font-size:0.9375rem;padding:0 var(--md-space-4);}
  .md-hero__dots{bottom:var(--md-space-3);}
  .md-hero__dots button{width:28px;height:4px;}
  .md-hero__media img{object-position:center 30%;opacity:.46;}
  .md-hero__media::after{
    background:linear-gradient(180deg,rgba(21,21,23,.82) 0%,rgba(21,21,23,.68) 50%,rgba(21,21,23,.88) 100%);
  }
}

/* 2 · stat bar. Five tiles read better as 3 + 2 than as one row of five
   (client call, 2026-09-17). */
.md-stat-bar{background:var(--md-color-bg-dark);color:var(--md-color-text-inverse);
  padding-block:var(--md-space-9);}
.md-stat-bar__grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--md-space-6);}
.md-stat{display:flex;flex-direction:column;gap:var(--md-space-2);
  border-left:2px solid var(--md-color-primary);padding-left:var(--md-space-4);}
.md-stat__value{font-family:var(--md-font-heading);font-size:var(--md-text-stat);
  font-weight:700;line-height:1;letter-spacing:var(--md-tracking-h1);
  color:var(--md-color-text-inverse);font-variant-numeric:tabular-nums;
  /* "OEKO-TEX®" would otherwise break after the hyphen */
  white-space:nowrap;}
.md-stat__label{font-size:var(--md-text-small);color:var(--md-color-text-inverse-secondary);}
@media (max-width:1023px){
  .md-stat-bar__grid{grid-template-columns:repeat(2,1fr);}
  .md-stat-bar{padding-block:var(--md-space-8);}
}
@media (max-width:767px){
  .md-stat-bar{padding-block:var(--md-space-6);}
  .md-stat-bar__grid{grid-template-columns:repeat(2,1fr);gap:var(--md-space-4) var(--md-space-3);}
  .md-stat{padding-left:var(--md-space-3);gap:var(--md-space-1);}
  .md-stat:last-child:nth-child(odd){grid-column:1 / -1;}
  .md-stat__value{font-size:1.75rem;line-height:1;}
  .md-stat__label{font-size:0.75rem;line-height:1.35;}
}

/* 3 · role cards */
.md-role-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md-space-6);}
.md-role-card{background:var(--md-color-white);border:1px solid var(--md-color-border);
  border-radius:var(--md-radius-sm);padding:var(--md-space-5);display:flex;
  flex-direction:column;gap:var(--md-space-3);transition:border-color 240ms ease-out,
  background-color 240ms ease-out;}
.md-role-card:hover{border-color:var(--md-color-primary);
  background:var(--md-color-green-50);}
.md-role-card__icon{width:32px;height:32px;color:var(--md-color-primary);}
.md-role-card__icon svg{width:32px;height:32px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.md-role-card h3{font-size:var(--md-text-h4);margin:0;}
.md-role-card p{font-size:var(--md-text-body);color:var(--md-color-text-secondary);
  margin:0;}
.md-role-card .md-text-link{margin-top:auto;}
@media (max-width:1023px){.md-role-cards{grid-template-columns:1fr 1fr;}}
@media (max-width:767px){.md-role-cards{grid-template-columns:1fr;}}

/* 4 · industry cards */
.md-industry-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md-space-6);}
.md-industry-card{display:flex;flex-direction:column;background:var(--md-color-white);
  border:1px solid var(--md-color-border);border-radius:var(--md-radius-sm);
  overflow:hidden;transition:border-color 240ms ease-out,box-shadow 240ms ease-out;}
.md-industry-card:hover{border-color:var(--md-color-primary);box-shadow:var(--md-shadow-1);}
.md-industry-card__media{aspect-ratio:3/2;overflow:hidden;background:var(--md-color-bg-subtle);}
.md-industry-card__media img{width:100%;height:100%;object-fit:cover;}
.md-industry-card__body{padding:var(--md-space-5);}
.md-industry-card h3{font-size:var(--md-text-h4);margin:0 0 var(--md-space-2);}
.md-industry-card p{font-size:var(--md-text-small);color:var(--md-color-text-secondary);
  margin:0 0 var(--md-space-3);}
.md-industry-card__fibres{font-size:var(--md-text-caption);color:var(--md-color-text-link);
  text-transform:uppercase;letter-spacing:var(--md-tracking-caption);font-weight:600;}
@media (max-width:1023px){.md-industry-cards{grid-template-columns:1fr 1fr;}}
@media (max-width:767px){.md-industry-cards{grid-template-columns:1fr;gap:var(--md-space-4);}}

/* 5 · product line cards */
.md-product-lines{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md-space-6);}
@media (max-width:1023px){.md-product-lines{grid-template-columns:1fr 1fr;}}
@media (max-width:767px){.md-product-lines{grid-template-columns:1fr;gap:var(--md-space-4);}}

/* 7 · factory & capacity */
.md-factory{display:grid;grid-template-columns:6fr 6fr;gap:var(--md-space-8);
  align-items:center;}
.md-factory__media{display:grid;grid-template-columns:2fr 1fr;gap:var(--md-space-4);}
.md-factory__main{aspect-ratio:4/3;overflow:hidden;border-radius:var(--md-radius-none);
  background:var(--md-color-bg-subtle);}
.md-factory__main img{width:100%;height:100%;object-fit:cover;}
/* Client instruction 2026-09-18: the left column held one 4:3 photo (288px)
   while the three square thumbnails set the row to 608px, so 320px of the column
   was simply empty. Photo and loop now share the column as two grid rows, so the
   video absorbs exactly that leftover height and its bottom edge lands on the
   thumbnails' bottom edge at every width — no hard-coded size, no magic number. */
.md-factory__stack{display:grid;grid-template-rows:auto 1fr;
  gap:var(--md-space-4);min-height:0;}
.md-factory__video{position:relative;margin:0;overflow:hidden;min-height:0;
  background:var(--md-color-bg-subtle);aspect-ratio:5/4;cursor:pointer;}
.md-factory__video-el{display:block;width:100%;height:100%;object-fit:cover;}
.md-factory__video-play-btn{position:absolute;inset:0;margin:auto;width:56px;height:56px;
  padding:0;box-sizing:border-box;border-radius:var(--md-radius-pill);
  background:rgba(21,21,23,.78);color:var(--md-color-white);
  border:2px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;
  pointer-events:none;transition:transform .18s ease,background-color .18s ease;z-index:2;}
.md-factory__video-play-btn[hidden]{display:none!important;}
.md-factory__video:hover .md-factory__video-play-btn{background:var(--md-color-primary);border-color:transparent;transform:scale(1.08);}
.md-factory__video-play-btn svg{width:24px;height:24px;max-width:none;display:block;margin-left:3px;fill:currentColor;flex-shrink:0;}
@media (min-width:1024px){
  /* Below this breakpoint the column is full width and nothing else sets the row
     height, so the clip needs a ratio of its own. At and above it the thumbnails
     beside it already set the row, so the clip drops its ratio and takes the
     remainder — that is what makes the bottom edges land on the same pixel
     rather than within a few. Left at 5/4, the clip would instead measure
     slightly taller than the three squares and push them out of true. */
  .md-factory__video{aspect-ratio:auto;}
}
.md-factory__thumbs{display:grid;grid-template-columns:1fr;gap:var(--md-space-4);}
.md-factory__thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--md-radius-none);background:var(--md-color-bg-subtle);}
/* Capacity gallery — a uniform grid of plant photographs.
   The section previously reused the main+thumbs pattern: one 4:3 photograph in
   a 2fr column beside four square thumbnails in a 1fr column. That left the
   left column 528px taller than its only child, so the grid rendered a large
   hole under the main photograph. A single grid of equal tiles cannot leave a
   hole whatever the count, and it is what lets the section carry a full set of
   the plant rather than five frames. */
.md-plant-gallery{display:grid;gap:var(--md-space-4);
  grid-template-columns:repeat(3,1fr);}
.md-plant-gallery img{display:block;width:100%;height:100%;aspect-ratio:3/2;
  object-fit:cover;border-radius:var(--md-radius-sm);}
@media (max-width:1023px){
  .md-plant-gallery{grid-template-columns:repeat(2,1fr);}
  /* Nine tiles over two columns leaves the ninth alone on a half-empty row.
     Letting an odd last tile span both columns closes that row, and the tile it
     lands on is the shot of the site, which reads as a deliberate closing frame
     rather than as a leftover. */
  .md-plant-gallery img:last-child:nth-child(odd){grid-column:1 / -1;}
}

.md-factory__copy .md-actions{margin-top:var(--md-space-6);}
.md-factory__numbers{display:grid;grid-template-columns:1fr 1fr;gap:var(--md-space-5);
  margin-top:var(--md-space-6);}
.md-factory__number{background:var(--md-color-bg-subtle);border-radius:var(--md-radius-sm);
  padding:var(--md-space-4);}
.md-factory__number strong{display:block;font-family:var(--md-font-heading);
  font-size:var(--md-text-h3);font-weight:700;color:var(--md-color-text-link);
  line-height:1;font-variant-numeric:tabular-nums;}
.md-factory__number span{font-size:var(--md-text-caption);
  color:var(--md-color-text-secondary);}
@media (max-width:1023px){
  .md-factory{grid-template-columns:1fr;gap:var(--md-space-6);}
  .md-factory__media{grid-template-columns:1fr;}
  .md-factory__thumbs{grid-template-columns:repeat(3,1fr);}
}

/* 7c · about page · the plant block — stills beside the factory tour.
   Client instruction 2026-09-18, built 2026-09-20: add the factory tour to the
   About page, "不要自动播放，要显示整个视频的格式" — click to play, and the whole
   frame, never a crop. The block it lands in reuses .md-factory__media, whose left
   column ran one 4:3 photograph (608px) against two square thumbnails (826px) and
   so left 218px of the column empty at this width. The tour needs a 16:9 box to
   show its whole frame, so it goes under the photograph in the same column and the
   column grows to 1080px; the stills beside it become three and stretch to that
   height, which is what closes the gap instead of moving it.

   This is NOT .md-factory__video: that one drops its ratio above 1024px and absorbs
   the leftover height with object-fit:cover, which is right for an abstract machine
   loop and wrong for a film whose every frame was chosen. */
.md-plant{display:grid;grid-template-columns:2fr 1fr;gap:var(--md-space-4);
  align-items:stretch;}
.md-plant__stack{display:grid;grid-template-rows:auto auto;gap:var(--md-space-4);
  min-height:0;}
.md-plant__photo{aspect-ratio:4/3;overflow:hidden;background:var(--md-color-bg-subtle);}
.md-plant__photo img{display:block;width:100%;height:100%;object-fit:cover;}
.md-plant__tour{margin:0;}
.md-plant__video{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--md-color-bg-dark);}
.md-plant__video-el{display:block;width:100%;height:100%;object-fit:cover;}
/* The poster frame and the film are the same crop, so the player does not jump
   when it starts. */
.md-plant__caption{margin:var(--md-space-3) 0 0;font-size:var(--md-text-caption);
  color:var(--md-color-text-muted);}
.md-plant__thumbs{display:grid;grid-template-rows:repeat(3,1fr);
  gap:var(--md-space-4);min-height:0;}
.md-plant__thumbs img{display:block;width:100%;height:100%;object-fit:cover;
  background:var(--md-color-bg-subtle);}
@media (max-width:1023px){
  .md-plant{grid-template-columns:1fr;}
  .md-plant__thumbs{grid-template-columns:repeat(3,1fr);grid-template-rows:none;}
  .md-plant__thumbs img{aspect-ratio:1/1;height:auto;}
}

/* 7b · capacity page · titled feature blocks.
   Distinct from .md-factory__number, which is a number card (strong + span).
   Two columns so four blocks read as a 2 x 2 panel instead of four narrow
   columns of running text. */
.md-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--md-space-6);}
/* White card with a border, not background-subtle: these blocks sit on a
   --subtle section, where a subtle card would be invisible. */
.md-feature{background:var(--md-color-white);border:1px solid var(--md-color-border);
  border-radius:var(--md-radius-sm);border-top:2px solid var(--md-color-primary);
  padding:var(--md-space-5);}
.md-feature h3{margin:0 0 var(--md-space-2);font-family:var(--md-font-heading);
  font-size:var(--md-text-h4);color:var(--md-color-text-primary);line-height:1.3;}
.md-feature p{margin:0;font-size:var(--md-text-body);
  color:var(--md-color-text-secondary);}
@media (max-width:767px){
  .md-feature-grid{grid-template-columns:1fr;}
}

/* 8 · resources / blog cards */
.md-blog-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md-space-6);}
.md-card-blog{display:flex;flex-direction:column;background:var(--md-color-white);
  border:1px solid var(--md-color-border);border-radius:var(--md-radius-sm);
  overflow:hidden;}
.md-card-blog__media{aspect-ratio:3/2;background:var(--md-color-bg-subtle);overflow:hidden;}
.md-card-blog__media img{width:100%;height:100%;object-fit:cover;}
.md-card-blog__media--placeholder{display:flex;align-items:center;justify-content:center;
  font-family:var(--md-font-heading);font-size:var(--md-text-h4);font-weight:700;
  color:var(--md-color-text-muted);}
.md-card-blog__body{padding:var(--md-space-5);display:flex;flex-direction:column;
  gap:var(--md-space-2);}
.md-card-blog__tag{font-size:var(--md-text-caption);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--md-tracking-caption);color:var(--md-color-green-600);}
.md-card-blog h3{font-size:var(--md-text-h4);margin:0;line-height:1.3;}
.md-card-blog h3 a{color:inherit;text-decoration:none;}
.md-card-blog h3 a:hover{color:var(--md-color-text-link);}
.md-card-blog__excerpt{font-size:var(--md-text-small);color:var(--md-color-text-secondary);
  margin:0;}
.md-card-blog__meta{font-size:var(--md-text-caption);color:var(--md-color-text-muted);}
.md-card-blog .md-text-link{margin-top:auto;}
.md-resources__foot{display:flex;align-items:center;gap:var(--md-space-6);
  flex-wrap:wrap;margin-top:var(--md-space-8);}
@media (max-width:1023px){.md-blog-cards{grid-template-columns:1fr 1fr;}}
@media (max-width:767px){.md-blog-cards{grid-template-columns:1fr;}}

/* 6 · standard strip */
.md-standard-strip__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--md-space-5);flex-wrap:wrap;margin-bottom:var(--md-space-8);}
.md-standard-strip__head h2{margin:0;}

/* ======================= product detail (§5.3) ============================ */

.md-crumbs{font-size:var(--md-text-caption);color:var(--md-color-text-secondary);
  padding-block:var(--md-space-5);overflow-wrap:break-word;min-width:0;}
.md-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--md-space-2);
  margin:0;padding:0;}
.md-crumbs li{margin:0;display:flex;align-items:center;gap:var(--md-space-2);}
.md-crumbs li::after{content:"/";color:var(--md-color-grey-400);}
.md-crumbs li:last-child::after{content:"";}
.md-crumbs a{color:var(--md-color-text-secondary);text-decoration:none;}
.md-crumbs a:hover{color:var(--md-color-text-link);text-decoration:underline;}
.md-crumbs [aria-current="page"]{color:var(--md-color-grey-700);}

.md-pdp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--md-space-8);
  padding-bottom:var(--md-section-y);align-items:start;}
.md-gallery,
.md-pdp .md-gallery{display:flex;flex-direction:column;gap:var(--md-space-3);width:100%;}
.md-gallery__main,
.md-pdp .md-gallery__main{width:100%;aspect-ratio:1/1;background:#ffffff;overflow:hidden;
  border:1px solid var(--md-color-border);border-radius:var(--md-radius-sm);
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,0.04);}
.md-gallery__main img,
.md-pdp .md-gallery__main img{width:100%;height:100%;object-fit:cover;display:block;}
.md-gallery__thumbs,
.md-pdp .md-gallery__thumbs{display:flex;flex-wrap:wrap;gap:var(--md-space-3);
  margin-top:var(--md-space-1);list-style:none;padding:0;}
.md-gallery__thumbs li,
.md-pdp .md-gallery__thumbs li{margin:0;width:80px;flex:0 0 80px;}
.md-gallery__thumbs button,
.md-pdp .md-gallery__thumbs button{display:block;width:100%;padding:0;background:#ffffff;
  border:1.5px solid var(--md-color-border);border-radius:var(--md-radius-xs);
  cursor:pointer;overflow:hidden;aspect-ratio:1/1;transition:border-color 0.2s,box-shadow 0.2s,transform 0.15s;}
.md-gallery__thumbs button:hover,
.md-pdp .md-gallery__thumbs button:hover{border-color:var(--md-color-primary);transform:translateY(-1px);}
.md-gallery__thumbs button.is-active,
.md-pdp .md-gallery__thumbs button.is-active{border:2px solid var(--md-color-primary);box-shadow:0 0 0 2px rgba(62,142,55,0.2);}
.md-gallery__thumbs img,
.md-pdp .md-gallery__thumbs img{width:100%;height:100%;object-fit:cover;display:block;}

.md-pdp-summary .md-brand-badge{display:inline-flex;align-items:center;gap:var(--md-space-2);
  padding:2px var(--md-space-2);border-radius:var(--md-radius-xs);
  background:var(--md-color-primary);color:var(--md-color-text-on-primary);
  font-family:var(--md-font-heading);font-size:var(--md-text-caption);font-weight:600;
  letter-spacing:var(--md-tracking-caption);text-transform:uppercase;
  margin-bottom:var(--md-space-4);}
.md-pdp-summary .md-brand-badge--hailidun{background:var(--md-color-hailidun);}
.md-pdp-summary h1{margin:0 0 var(--md-space-3);}
.md-pdp-summary__spec-line{font-size:var(--md-text-body-lg);color:var(--md-color-text-secondary);
  margin:0 0 var(--md-space-4);font-variant-numeric:tabular-nums;}
.md-pdp-summary__brand-line{font-size:var(--md-text-small);
  color:var(--md-color-text-secondary);margin:0 0 var(--md-space-4);}

/* Quick specs & CTAs */
.md-pdp-specs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--md-space-3);margin:var(--md-space-4) 0 var(--md-space-5);}
.md-pdp-spec-card{background:var(--md-color-bg-subtle);border:1px solid var(--md-color-border);border-radius:var(--md-radius-sm);padding:9px 13px;}
.md-pdp-spec-label{display:block;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--md-color-text-secondary);margin-bottom:2px;font-weight:600;}
.md-pdp-spec-value{display:block;font-size:0.9rem;font-weight:600;color:var(--md-color-text-primary);line-height:1.3;}

.md-highlights{list-style:none;margin:0 0 var(--md-space-5);padding:0;
  display:flex;flex-direction:column;gap:var(--md-space-2);}
.md-highlights li{position:relative;padding-left:var(--md-space-5);margin:0;
  font-size:var(--md-text-body);color:var(--md-color-text-primary);}
.md-highlights li::before{content:"✓";position:absolute;left:0;top:0;
  color:var(--md-color-primary);font-weight:700;}

.md-actions--pdp{display:flex;flex-wrap:wrap;gap:var(--md-space-3);align-items:center;margin-top:var(--md-space-3);margin-bottom:var(--md-space-5);}
.md-btn--whatsapp{background:#25D366;color:#ffffff !important;display:inline-flex;align-items:center;gap:8px;font-weight:600;border-radius:var(--md-radius-sm);padding:10px 18px;text-decoration:none;transition:background 0.2s,transform 0.15s,box-shadow 0.2s;font-size:0.9375rem;border:none;}
.md-btn--whatsapp:hover{background:#1ebc57;color:#ffffff !important;transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,211,102,0.25);}
.md-pdp-trust-bar{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px;padding-top:var(--md-space-4);border-top:1px dashed var(--md-color-border);}
.md-pdp-trust-item{display:flex;align-items:center;gap:6px;font-size:0.8125rem;color:var(--md-color-text-secondary);font-weight:500;}
.md-pdp-trust-item svg{color:var(--md-color-primary);flex-shrink:0;}
@media (max-width:640px){
  .md-pdp-specs-grid,.md-pdp-trust-bar{grid-template-columns:1fr;}
}

.md-pdp-metrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--md-space-4);}
.md-metric{background:var(--md-color-bg-subtle);border-radius:var(--md-radius-sm);
  padding:var(--md-space-4);}
.md-metric__label{display:block;font-size:var(--md-text-caption);
  color:var(--md-color-text-secondary);text-transform:uppercase;
  letter-spacing:var(--md-tracking-caption);margin-bottom:var(--md-space-2);}
.md-metric__value{display:block;font-family:var(--md-font-heading);
  font-size:var(--md-text-h3);font-weight:700;line-height:1.05;
  color:var(--md-color-text-primary);font-variant-numeric:tabular-nums;}
.md-metric__sub{display:block;font-size:var(--md-text-caption);
  color:var(--md-color-text-muted);margin-top:var(--md-space-1);}

.md-pdp-section + .md-pdp-section{padding-top:var(--md-section-y);}
.md-pdp-split{display:grid;grid-template-columns:7fr 5fr;gap:var(--md-space-8);
  align-items:start;}

/* Module 4 · the figure beside the key-value table.
   Client instruction 2026-09-21: the figure was a full-height portrait shot, so
   the left column ran out long before the right one and the section ended in a
   band of empty space. Cropping the figure to 4:3 brings the two columns level.
   Width is set explicitly so the aspect-ratio box cannot collapse its own
   width the way a max-height would make it. */
.md-pdp-spec-figure{margin-bottom:0;}
.md-pdp-spec-figure .md-scene__media{width:100%;aspect-ratio:4/3;overflow:hidden;}
.md-pdp-spec-figure .md-scene__media img{width:100%;height:100%;object-fit:cover;
  object-position:center;}

/* Shop page · the product carousel band
   Client instruction 2026-09-21: first set at 640px and then doubled on
   request, so the band now runs the full content width. The 1280px cap means
   the strip fills the container on a desktop viewport (which resolves to
   ~1200px, the native width of the client's banner files — so the frame is
   shown at 1:1 rather than upscaled) and 1200 x 450 is what the 8:3 frame
   resolves to at that width. */
.md-carousel-band{padding-top:0;}
.md-carousel{position:relative;width:100%;max-width:1280px;margin:0 auto;}
.md-carousel__viewport{position:relative;width:100%;aspect-ratio:8/3;
  overflow:hidden;border:1px solid var(--md-color-border);
  border-radius:var(--md-radius-sm);background:var(--md-color-white);}
.md-carousel__slide{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;opacity:0;
  transition:opacity .45s ease;pointer-events:none;}
.md-carousel__slide.is-active{opacity:1;pointer-events:auto;}
.md-carousel__dots{display:flex;justify-content:center;gap:7px;margin-top:10px;}
.md-carousel__dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:var(--md-color-border);cursor:pointer;transition:background .2s ease;}
.md-carousel__dot.is-active{background:var(--md-color-primary);}
@media (max-width:767px){
  .md-carousel{max-width:100%;}
}
@media (prefers-reduced-motion: reduce){
  .md-carousel__slide{transition:none;}
}

/* Module 4b · the product range (range table plus optional model cards) */
.md-range-models{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--md-space-5);margin-bottom:var(--md-space-8);}
.md-range-card{margin:0;background:var(--md-color-white);border:1px solid var(--md-color-border);
  border-radius:var(--md-radius-sm);overflow:hidden;}
.md-range-card__media{width:100%;aspect-ratio:1/1;overflow:hidden;background:#f8fafc;}
.md-range-card__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.md-range-card__caption{padding:10px 14px;border-top:1px solid var(--md-color-border);
  display:flex;flex-direction:column;gap:3px;}
.md-range-card__title{font-size:14px;font-weight:700;color:var(--md-color-text-main);}
.md-range-card__note{font-size:12px;color:var(--md-color-text-muted);line-height:1.5;}
@media (max-width:767px){
  .md-range-models{grid-template-columns:1fr 1fr;gap:var(--md-space-3);}
  .md-range-card__caption{padding:8px 10px;}
  .md-range-card__title{font-size:13px;}
}

.md-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--md-space-5);
  list-style:none;margin:0;padding:0;}
.md-swatches li{margin:0;}
.md-swatch__chip{width:100%;max-width:96px;aspect-ratio:1/1;border-radius:var(--md-radius-xs);
  border:1px solid var(--md-color-border);}
.md-swatch__name{font-size:var(--md-text-caption);color:var(--md-color-text-secondary);
  margin-top:var(--md-space-2);}
@media (max-width:1023px){
  .md-pdp-hero,.md-pdp-split{grid-template-columns:1fr;gap:var(--md-space-6);}
  .md-swatches{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:767px){
  .md-swatches{grid-template-columns:repeat(3,1fr);}
  .md-swatch__chip{max-width:64px;}
  .md-pdp-metrics{grid-template-columns:1fr 1fr;}
}

.md-app-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md-space-6);}
.md-app-cards.md-app-cards--cols-2{grid-template-columns:repeat(2,1fr) !important;}
.md-app-cards.md-app-cards--cols-3{grid-template-columns:repeat(3,1fr) !important;}
.md-app-card{border-top:1px solid var(--md-color-border-subtle);padding-top:var(--md-space-4);}
.md-app-card h3,.md-app-card h5{margin:0 0 var(--md-space-2);font-size:var(--md-text-h4);color:var(--md-color-text-primary);}
.md-app-card p{font-size:var(--md-text-body);color:var(--md-color-text-secondary);margin:0;line-height:1.5;}

.md-app-card__media{position:relative;overflow:hidden;border-radius:var(--md-radius-sm);
  background:var(--md-color-bg-subtle);border:1px solid var(--md-color-border);
  margin-bottom:var(--md-space-4);aspect-ratio:3/2;}
.md-app-card__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease;}
.md-app-card:hover .md-app-card__media img{transform:scale(1.03);}
.md-app-card__badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;
  gap:5px;align-items:flex-start;pointer-events:none;z-index:2;}
.md-app-card__badge{background:rgba(255,255,255,0.92);backdrop-filter:blur(4px);
  color:#111827;font-family:var(--md-font-heading);font-size:0.6875rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.04em;padding:3px 9px;border-radius:9999px;
  box-shadow:0 1px 3px rgba(0,0,0,0.18);line-height:1.2;border:1px solid rgba(0,0,0,0.06);}

@media (max-width:1023px){
  .md-app-cards,.md-app-cards.md-app-cards--cols-2,.md-app-cards.md-app-cards--cols-3{grid-template-columns:1fr 1fr !important;}
}
@media (max-width:767px){
  .md-app-cards,.md-app-cards.md-app-cards--cols-2,.md-app-cards.md-app-cards--cols-3{grid-template-columns:1fr !important;}
}

.md-related-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--md-space-4);}
@media (max-width:1023px){.md-related-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:767px){.md-related-grid{grid-template-columns:repeat(2,1fr);}}

.md-trust-note{border-left:4px solid var(--md-color-primary);
  background:var(--md-color-bg-brand-soft);border-radius:var(--md-radius-sm);
  padding:var(--md-space-4) var(--md-space-5);font-size:var(--md-text-small);
  color:var(--md-color-text-primary);}
.md-trust-note--hailidun{border-left-color:var(--md-color-hailidun);
  background:var(--md-color-bg-hailidun-soft);}

/* plain content pages that keep Astra layout get a touch of the same rhythm */
body:not(.md-tpl-home):not(.md-tpl-product) .entry-content{margin-block:var(--md-space-8);}
/* plain content pages that keep Astra layout get a touch of the same rhythm */
body:not(.md-tpl-home):not(.md-tpl-product) .entry-content{margin-block:var(--md-space-8);}

/* §5.3 · the product FAQ block. Not in the spec's component list, but the page
   emits FAQPage schema and schema is only valid when the Q&A is visible. */
.md-faq{padding-block:var(--md-space-5);border-top:1px solid var(--md-color-border-subtle);}
.md-faq:first-of-type{border-top:0;padding-top:0;}
.md-faq h3{margin:0 0 var(--md-space-3);font-size:var(--md-text-h4);color:var(--md-color-text-primary);}
.md-faq p{margin:0;font-size:var(--md-text-body);color:var(--md-color-text-secondary);}

/* The gallery main frame is empty until an image exists; keep the aspect box. */
.md-pdp .md-gallery__main{background:var(--md-color-bg-subtle);}

/* Selected colour swatch (§5.3 section 4). */
.md-swatches .md-swatch__chip.is-active{outline:2px solid var(--md-color-grey-800);outline-offset:2px;}

/* Same-family table rows that carry no link still need the details column to line up. */
.md-spec-table td.is-num .md-text-link{white-space:nowrap;}

/* On the detail page the enquiry band should not repeat the section rhythm twice. */
.md-pdp .md-cta-band{margin-top:0;}

/* ======================================================= client review 2026-09-16
   Yarn now leads the product-line row, so there are four cards instead of three.
   Kept in this file because it loads after components.css and has to win over the
   three-column rule above. */
@media (min-width:1024px){.md-product-lines{grid-template-columns:repeat(4,1fr);}}

/* ================= product archive · shop + product_cat (§5.2) ============
   TEMPORARY BUILD, 2026-09-17. The client is redesigning the product taxonomy,
   so this block adds no category and no filter — it only skins the native
   WooCommerce archive with the design system so /shop/ stops looking like a
   stock WooCommerce install. Every value is a token (§0.1). */

/* 2 · page head — breadcrumb sits above it, on its own row */
.md-shop-head{padding-top:0;}
.md-shop-head h1{margin:0 0 var(--md-space-4);max-width:30ch;}
.md-shop-head .md-lede{max-width:78ch;margin:0;}

/* Category description, printed by woocommerce_archive_description (§5.2 #2) */
.md-shop-head .term-description,
.md-shop-head .woocommerce-product-details__short-description{
  font-size:var(--md-text-body-lg);line-height:var(--md-lh-body-lg);
  color:var(--md-color-text-secondary);max-width:78ch;}
.md-shop-head .term-description p{margin-bottom:var(--md-space-4);}
.md-shop-head .term-description > *:last-child{margin-bottom:0;}

/* 3 · the three production lines — C3-b cards reused from the home page */
.md-shop-lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md-space-6);}
@media (max-width:1023px){.md-shop-lanes{grid-template-columns:1fr 1fr;}}
@media (max-width:767px){.md-shop-lanes{grid-template-columns:1fr;}}

/* 4 · result toolbar — WooCommerce owns the content, the design system owns the skin */
.md-shop-catalogue .md-section-head{margin-bottom:var(--md-space-6);}
.md-shop-toolbar{display:flex;align-items:center;justify-content:space-between;
  gap:var(--md-space-5);flex-wrap:wrap;margin-bottom:var(--md-space-6);}
.md-shop-toolbar .woocommerce-notices-wrapper{width:100%;}
.md-shop-toolbar .woocommerce-result-count{float:none;margin:0;
  font-size:var(--md-text-small);color:var(--md-color-text-secondary);}
.md-shop-toolbar .woocommerce-ordering{float:none;margin:0;}
.md-shop-toolbar .woocommerce-ordering select{
  max-width:100%;min-height:var(--md-size-btn-h-sm);
  font-family:var(--md-font-body);font-size:var(--md-text-small);
  color:var(--md-color-text-primary);background:var(--md-color-white);
  border:1px solid var(--md-color-border);border-radius:var(--md-radius-sm);
  padding:var(--md-space-2) var(--md-space-3);}
.md-shop-toolbar .woocommerce-ordering select:focus-visible{
  border-color:var(--md-color-primary);}
@media (max-width:767px){
  .md-shop-toolbar{align-items:flex-start;}
  .md-shop-toolbar .woocommerce-ordering,
  .md-shop-toolbar .woocommerce-ordering select{width:100%;}
}

/* 4b · filter chip rows — material then category (client instruction 2026-09-20)
   Row 1 sits where the catalog-ordering dropdown used to; the dropdown is removed
   in inc/material-tags.php, which is why the ordering rules above look unused —
   they are kept for any archive WooCommerce still prints a toolbar for.
   Row 2 is the category row the client asked for the same day.
   The chip is the design system's .md-chip-link (already used on the standards
   page) at a larger size for a filter row, plus an active state.
   The two rows share one left edge, and that is the whole reason this is a grid and
   not a flex row: with flex-wrap the chip list wraps to its own line the moment it is
   wider than the space left beside the label, which started the material row's chips
   96px to the right of the category row's — measured, not guessed. A fixed first
   column keeps the chip block at one x for both rows, however many lines the chips
   themselves take inside it. */
.md-shop-filter-rows{display:flex;flex-direction:column;gap:var(--md-space-3);
  margin-bottom:var(--md-space-5);}
.md-shop-filters{display:grid;grid-template-columns:var(--md-space-10) 1fr;
  align-items:baseline;column-gap:var(--md-space-4);row-gap:var(--md-space-2);}
.md-shop-filters__label{font-size:var(--md-text-eyebrow);text-transform:uppercase;
  letter-spacing:var(--md-tracking-eyebrow);color:var(--md-color-text-muted);}
.md-shop-filters ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:var(--md-space-2);}
.md-shop-filters .md-chip-link{display:inline-flex;align-items:center;gap:6px;
  padding:var(--md-space-2) var(--md-space-4);font-size:var(--md-text-small);}
.md-shop-filters .md-chip-link.is-active{background:var(--md-color-green-500);
  border-color:var(--md-color-green-500);color:var(--md-color-text-on-primary);}
.md-shop-filters__count{font-variant-numeric:tabular-nums;opacity:.65;}
/* One column on a phone: an 80px label column would cost a fifth of the screen. */
@media (max-width:767px){
  .md-shop-filters{grid-template-columns:1fr;row-gap:var(--md-space-2);}
}

/* WooCommerce notices inside the archive */
.md-shop .woocommerce-info,
.md-shop .woocommerce-message{
  background:var(--md-color-bg-subtle);border-left:4px solid var(--md-color-primary);
  border-radius:var(--md-radius-sm);border-top:0;border-right:0;border-bottom:0;
  padding:var(--md-space-4) var(--md-space-5);margin:0 0 var(--md-space-6);
  font-size:var(--md-text-small);color:var(--md-color-text-primary);}

/* 4 · C3-a card grid — WooCommerce's loop, our columns */
.md-product-grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--md-space-6);list-style:none;margin:0;padding:0;}
.md-product-grid > *{min-width:0;}
@media (max-width:1023px){.md-product-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:767px){
  .md-product-grid{grid-template-columns:1fr;gap:var(--md-space-5);}
}

/* The archive card is C3-a: square media (§4.3 ①④⑦⑧). */
.md-card__media--square{aspect-ratio:1/1;}
.md-card__media--square img{width:100%;height:100%;object-fit:cover;}
.md-card-product .md-card__title{margin:0;}
.md-card-product .md-card__params{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:break-word;}
.md-card-product .md-card__cta{position:relative;z-index:2;margin-top:var(--md-space-3);}
/* Whole card clickable (§4.3 ⑧): the overlay belongs to the title link, so the
   document still has one real link per card. */
.md-card-product .md-card__title a::after{content:"";position:absolute;inset:0;z-index:1;}

/* 5 · pagination (§5.2 #7) + WooCommerce's own page-numbers markup */
.md-shop .woocommerce-pagination{margin-top:var(--md-space-8);}
.md-shop .woocommerce-pagination ul.page-numbers{
  display:flex;flex-wrap:wrap;gap:var(--md-space-2);
  list-style:none;margin:0;padding:0;border:0;}
.md-shop .woocommerce-pagination .page-numbers li{margin:0;border:0;}
.md-shop .woocommerce-pagination a.page-numbers,
.md-shop .woocommerce-pagination span.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 var(--md-space-3);
  border:1px solid var(--md-color-border);border-radius:var(--md-radius-sm);
  background:var(--md-color-white);font-size:var(--md-text-small);font-weight:600;
  color:var(--md-color-text-primary);text-decoration:none;font-variant-numeric:tabular-nums;}
.md-shop .woocommerce-pagination a.page-numbers:hover{
  border-color:var(--md-color-primary);color:var(--md-color-text-link);}
.md-shop .woocommerce-pagination span.page-numbers.current{
  background:var(--md-color-primary);border-color:var(--md-color-primary);
  color:var(--md-color-text-on-primary);}

/* ===================================================== v3 product template
   The two detail templates (A fabric / B yarn) were rebuilt 2026-09-17 to the
   client's 《建站指令 v3》 8-module structure. New blocks added here:

     1 .md-text-block   module 2/3 prose (3–4 causal paragraphs, not tables)
     2 .md-compare      module 3 comparison table (knit vs woven / spinning)
     3 .md-std          module 6 standards, split into two columns
     4 .md-scene        module 7 application / working-condition image

   Everything consumes design tokens; no literal hex or px beyond the scale. */

/* 1 · prose blocks (module 2 · material, module 3 · structure) */
.md-text-block{max-width:78ch;}
.md-text-block p{margin:0 0 var(--md-space-5);font-size:var(--md-text-body-lg);
  line-height:var(--md-lh-body-lg);color:var(--md-color-text-primary);}
.md-text-block p:last-child{margin-bottom:0;}
.md-pdp-section .md-text-block + .md-compare{margin-top:var(--md-space-8);}
/* Same rhythm in the other direction: a prose block that follows a table
   (module 3b · measured quality sits under the spinning-route table). */
.md-pdp-section .md-compare + .md-text-block{margin-top:var(--md-space-8);}

/* 2 · comparison table (module 3) — same visual language as the spec table */
.md-compare{overflow-x:auto;background:var(--md-color-white);
  border:1px solid var(--md-color-border);border-radius:var(--md-radius-sm);}
.md-compare table{width:100%;border-collapse:collapse;min-width:720px;}
.md-compare thead th{background:var(--md-color-bg-subtle);
  padding:var(--md-space-3) var(--md-space-4);text-align:left;
  font-family:var(--md-font-heading);font-size:var(--md-text-small);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--md-tracking-caption);
  color:var(--md-color-grey-700);border-bottom:2px solid var(--md-color-primary);}
.md-compare tbody th,.md-compare tbody td{padding:var(--md-space-4);
  text-align:left;vertical-align:top;font-size:var(--md-text-small);
  border-bottom:1px solid var(--md-color-border-subtle);}
.md-compare tbody th{font-weight:600;color:var(--md-color-text-primary);width:18%;}
.md-compare tbody td{color:var(--md-color-text-secondary);}
.md-compare tbody tr:nth-child(even) th,.md-compare tbody tr:nth-child(even) td{
  background:var(--md-color-bg-subtle);}
.md-compare tbody tr:last-child th,.md-compare tbody tr:last-child td{border-bottom:0;}

/* 3 · standards, two columns (module 6) */
.md-std{display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:var(--md-color-white);border:1px solid var(--md-color-border);
  border-radius:var(--md-radius-sm);overflow:hidden;}
.md-std__col{padding:var(--md-space-6);}
.md-std__col + .md-std__col{border-left:1px solid var(--md-color-border);}
.md-std__col--ours{background:var(--md-color-bg-brand-soft);}
.md-std__title{margin:0 0 var(--md-space-2);font-size:var(--md-text-h4);}
.md-std__sub{margin:0 0 var(--md-space-5);font-size:var(--md-text-small);
  color:var(--md-color-text-secondary);}
.md-std__list{list-style:none;margin:0;padding:0;}
.md-std__item{padding:var(--md-space-4) 0;border-top:1px solid var(--md-color-border-subtle);}
.md-std__item:first-child{border-top:0;padding-top:0;}
.md-std__standard{display:block;font-family:var(--md-font-heading);font-weight:600;
  font-size:1.0625rem;line-height:1.3;color:var(--md-color-text-link);
  font-variant-numeric:tabular-nums;}
.md-std__claim{display:block;margin-top:var(--md-space-1);
  font-size:var(--md-text-small);color:var(--md-color-text-secondary);}
.md-std__status{display:inline-block;margin-top:var(--md-space-2);
  padding:2px var(--md-space-2);border-radius:var(--md-radius-pill);
  background:var(--md-color-white);border:1px solid var(--md-color-border);
  font-size:var(--md-text-caption);color:var(--md-color-grey-700);}
.md-std__note{margin:var(--md-space-5) 0 0;font-size:var(--md-text-small);
  color:var(--md-color-text-secondary);max-width:90ch;}
@media (max-width:1023px){
  .md-std{grid-template-columns:1fr;}
  .md-std__col + .md-std__col{border-left:0;border-top:1px solid var(--md-color-border);}
}
@media (max-width:767px){
  .md-std__col{padding:var(--md-space-5);}
}

/* 4 · application scene image (module 7) */
.md-scene{margin:0 0 var(--md-space-8);}
.md-scene__media img{display:block;width:100%;height:auto;
  border:1px solid var(--md-color-border);border-radius:var(--md-radius-sm);}
.md-scene__caption{margin-top:var(--md-space-3);font-size:var(--md-text-caption);
  color:var(--md-color-text-muted);}
@media (max-width:767px){
  .md-scene{margin-bottom:var(--md-space-6);}
}

/* Empty section (woocommerce/loop/no-products-found.php) */
.md-shop-empty{background:var(--md-color-white);border:1px solid var(--md-color-border);
  border-radius:var(--md-radius-sm);padding:var(--md-space-8);
  max-width:var(--md-container-narrow);}
.md-shop-empty .md-eyebrow{margin-bottom:var(--md-space-3);}
.md-shop-empty h2{margin:0 0 var(--md-space-4);}
.md-shop-empty p{color:var(--md-color-text-secondary);margin:0 0 var(--md-space-6);}
@media (max-width:767px){
  .md-shop-empty{padding:var(--md-space-6);}
  .md-shop-empty .md-actions{flex-direction:column;align-items:stretch;}
  .md-shop-empty .md-btn{width:100%;}
}

/* 5 路 Template C · module 1 — full-width long banner image (no left/right split)
   v3 §3.3 gives this page a banner instead of the left-image/right-copy hero,
   so the frame is the only new rule; everything else reuses existing components. */
.md-pdp-banner{margin:var(--md-space-8) 0 0;}
.md-pdp-banner img{display:block;width:100%;height:auto;
  border:1px solid var(--md-color-border);border-radius:var(--md-radius-sm);}
.md-pdp-banner + .md-actions{margin-top:var(--md-space-6);}
@media (max-width:767px){
  .md-pdp-banner{margin-top:var(--md-space-6);}
}

/* Template C · Hero Duo (Woven + Knitted side-by-side, compact 1-screen view) */
.md-pdp-duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--md-space-5);margin:var(--md-space-6) 0 0;}
.md-pdp-duo-card{margin:0;background:var(--md-color-white);border:1px solid var(--md-color-border);border-radius:var(--md-radius-sm);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.04);}
.md-pdp-duo-card__media{width:100%;aspect-ratio:1/1;overflow:hidden;background:#f8fafc;}
.md-pdp-duo-card__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .3s ease;}
.md-pdp-duo-card:hover .md-pdp-duo-card__media img{transform:scale(1.02);}
.md-pdp-duo-card__caption{padding:10px 14px;background:var(--md-color-white);border-top:1px solid var(--md-color-border);display:flex;flex-direction:column;gap:3px;}
.md-pdp-duo-card__title{font-size:14px;font-weight:700;color:var(--md-color-text-main);}
.md-pdp-duo-card__note{font-size:12px;color:var(--md-color-text-muted);}
.md-pdp-duo-grid + .md-actions{margin-top:var(--md-space-6);}

/* Template C · Application scenarios grid */
.md-pdp-scenes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--md-space-5);margin-top:var(--md-space-6);}
.md-pdp-scene-card{margin:0;background:var(--md-color-white);border:1px solid var(--md-color-border);border-radius:var(--md-radius-sm);overflow:hidden;}
.md-pdp-scene-card__media{aspect-ratio:4/3;overflow:hidden;background:#f8fafc;}
.md-pdp-scene-card__media img{width:100%;height:100%;object-fit:cover;display:block;}
.md-pdp-scene-card .md-scene__caption{padding:10px 14px;font-size:13px;line-height:1.5;color:var(--md-color-text-muted);background:var(--md-color-white);border-top:1px solid var(--md-color-border);}

@media (max-width:767px){
  .md-pdp-duo-grid{grid-template-columns:1fr 1fr;gap:var(--md-space-3);margin-top:var(--md-space-4);}
  .md-pdp-duo-card__caption{padding:6px 8px;}
  .md-pdp-duo-card__title{font-size:12px;}
  .md-pdp-duo-card__note{display:none;}
  .md-pdp-scenes-grid{grid-template-columns:1fr;gap:var(--md-space-4);}
}

/* 7d · 404 — the branded not-found page (client answer 2026-09-20, their point 4)
   A buyer who lands on a dead link is one step from leaving, so the page routes
   rather than apologises: one clear statement, two ways onward, then the real
   product families as chips.
   The first version of this page opened with a 67px numeral in green-200. A visual
   check reported it as "barely legible — low-contrast enough to look like a rendering
   fault", which is a fair reading of #C0E5BD on white at that size: decoration that
   a reviewer mistakes for a bug is not decoration. The numeral is gone; the page now
   opens with the same eyebrow the rest of the site uses, carrying the same
   information, and the H1 is the single dominant element. */
.md-notfound .md-eyebrow{margin-bottom:var(--md-space-3);}
.md-notfound h1{margin:0 0 var(--md-space-4);}
.md-notfound .md-lede{margin:0 0 var(--md-space-6);max-width:62ch;}
@media (max-width:767px){
  .md-notfound .md-actions{flex-direction:column;align-items:stretch;}
  .md-notfound .md-btn{width:100%;}
}

/* 7e · HAILIDUN brand story page (/hailidun/) */
.md-hailidun-brand-lockup{display:inline-flex;align-items:center;gap:var(--md-space-3);margin-bottom:var(--md-space-4);}
.md-hailidun-brand-lockup img{height:36px;width:auto;}
.md-hailidun-pill{display:inline-block;padding:3px 10px;font-size:var(--md-text-caption);
  font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--md-color-text-inverse);background:var(--md-color-hailidun);border-radius:var(--md-radius-xs);}
.md-hailidun-model-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--md-space-6);}
.md-hailidun-model-card{background:var(--md-color-white);border:1px solid var(--md-color-border);
  border-top:3px solid var(--md-color-hailidun);border-radius:var(--md-radius-sm);
  padding:var(--md-space-6);display:flex;flex-direction:column;gap:var(--md-space-3);}
.md-hailidun-model-card--oem{border-top-color:var(--md-color-primary);}
.md-hailidun-model-card h3{margin:0;font-size:var(--md-text-h4);color:var(--md-color-text-primary);}
.md-hailidun-model-card p{margin:0;font-size:var(--md-text-body);color:var(--md-color-text-secondary);
  line-height:var(--md-lh-body);}
.md-hailidun-roadmap{background:linear-gradient(135deg,var(--md-color-bg-subtle) 0%,var(--md-color-white) 100%);
  border:1px dashed var(--md-color-border-strong);border-radius:var(--md-radius-sm);
  padding:var(--md-space-6);margin-top:var(--md-space-8);display:flex;align-items:center;
  gap:var(--md-space-5);}
.md-hailidun-roadmap__icon{flex-shrink:0;width:48px;height:48px;border-radius:var(--md-radius-pill);
  background:var(--md-color-bg-hailidun-soft);color:var(--md-color-hailidun);
  display:flex;align-items:center;justify-content:center;}
.md-hailidun-roadmap__text h4{margin:0 0 var(--md-space-1);font-size:var(--md-text-h5);
  color:var(--md-color-text-primary);}
.md-hailidun-roadmap__text p{margin:0;font-size:var(--md-text-small);
  color:var(--md-color-text-secondary);line-height:var(--md-lh-small);}
@media (max-width:767px){
  .md-hailidun-model-grid{grid-template-columns:1fr;gap:var(--md-space-4);}
  .md-hailidun-roadmap{flex-direction:column;align-items:flex-start;gap:var(--md-space-3);padding:var(--md-space-5);}
}

/* ===================================================== 7f · Article table design
   Client instruction 2026-09-20: mobile article tables must have clean B2B styling,
   no harsh black borders, no awkward word wrapping, smooth horizontal scrolling,
   and must not be blocked by the back-to-top floating button. */
.md-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:var(--md-space-6) 0;
  border:1px solid var(--md-color-border);
  border-radius:var(--md-radius-sm);
  background:var(--md-color-white);
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.md-article table{
  width:100%;
  min-width:540px;
  border-collapse:collapse;
  border-spacing:0;
  margin:0;
  font-size:var(--md-text-small);
  line-height:1.45;
  color:var(--md-color-text-primary);
  border:none!important;
}
.md-article thead th{
  background:var(--md-color-bg-subtle);
  padding:var(--md-space-3) var(--md-space-4);
  font-family:var(--md-font-heading);
  font-size:0.8125rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--md-color-text-primary);
  border:none!important;
  border-bottom:2px solid var(--md-color-primary)!important;
  text-align:left;
  white-space:nowrap;
}
.md-article tbody th,
.md-article tbody td{
  padding:var(--md-space-3) var(--md-space-4);
  border:none!important;
  border-bottom:1px solid var(--md-color-border-subtle)!important;
  vertical-align:top;
  text-align:left;
}
.md-article tbody tr:last-child th,
.md-article tbody tr:last-child td{
  border-bottom:none!important;
}
.md-article tbody tr:nth-child(even){
  background:var(--md-color-bg-subtle);
}
.md-article tbody tr:hover{
  background:var(--md-color-green-50);
}
.md-article tbody th{
  font-weight:600;
  color:var(--md-color-text-primary);
}
.md-article table p{
  margin:0;
  padding:0;
}
/* Scroll to top floating button adjustment on mobile */
#ast-scroll-top{
  opacity:0.65;
  transition:opacity .18s ease;
  z-index:10;
}
#ast-scroll-top:hover{
  opacity:1;
}
@media (max-width:767px){
  #ast-scroll-top{
    right:12px;
    bottom:12px;
    width:36px;
    height:36px;
    line-height:36px;
  }
  .md-table-wrap{
    margin:var(--md-space-4) 0;
  }
}

/* ===================================================== 7g · Contact page (/contact/)
   Client instruction 2026-09-20: prominent direct contact information (telephone,
   WhatsApp, business email, business hours) alongside facility locations. */
.md-contact-form-card{
  background:var(--md-color-white);
  border:1px solid var(--md-color-border);
  border-radius:var(--md-radius-sm);
  padding:var(--md-space-7);
  box-shadow:var(--md-shadow-1);
}
.md-contact-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--md-space-6);
}
.md-contact-card{
  background:var(--md-color-white);
  border:1px solid var(--md-color-border);
  border-radius:var(--md-radius-sm);
  padding:var(--md-space-6);
  display:flex;
  flex-direction:column;
  gap:var(--md-space-3);
  box-shadow:var(--md-shadow-1);
}
.md-contact-card h3{
  margin:0;
  font-size:var(--md-text-h4);
  color:var(--md-color-text-primary);
}
.md-contact-card__intro{
  margin:0;
  font-size:var(--md-text-small);
  color:var(--md-color-text-secondary);
  line-height:var(--md-lh-small);
}
.md-contact-channels{
  list-style:none;
  margin:var(--md-space-2) 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--md-space-3);
}
.md-contact-channels li{
  display:flex;
  align-items:center;
  gap:var(--md-space-3);
  margin:0;
  padding:var(--md-space-3) var(--md-space-4);
  background:var(--md-color-bg-subtle);
  border-radius:var(--md-radius-sm);
  border:1px solid var(--md-color-border-subtle);
}
.md-contact-channel__icon{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--md-radius-pill);
  background:var(--md-color-white);
  color:var(--md-color-primary);
  flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.md-contact-channel__body{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.md-contact-channel__label{
  font-size:var(--md-text-caption);
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--md-color-text-muted);
  font-weight:600;
}
.md-contact-channel__value{
  font-family:var(--md-font-heading);
  font-weight:600;
  font-size:0.9375rem;
  color:var(--md-color-text-primary);
  text-decoration:none;
}
.md-contact-channel__value:hover{
  color:var(--md-color-primary);
}
.md-contact-card__hours{
  font-size:var(--md-text-caption);
  color:var(--md-color-text-muted);
  line-height:1.45;
  margin:0;
  padding-top:var(--md-space-3);
  border-top:1px solid var(--md-color-border-subtle);
}
.md-contact-locations{
  list-style:none;
  margin:var(--md-space-2) 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--md-space-3);
}
.md-contact-locations li{
  margin:0;
  font-size:var(--md-text-small);
  line-height:1.45;
  color:var(--md-color-text-secondary);
  border-bottom:1px solid var(--md-color-border-subtle);
  padding-bottom:var(--md-space-3);
}
.md-contact-locations li:last-child{
  border-bottom:none;
  padding-bottom:0;
}
.md-contact-locations strong{
  display:block;
  color:var(--md-color-text-primary);
  margin-bottom:2px;
  font-size:0.875rem;
}
@media (max-width:767px){
  .md-contact-info-grid{
    grid-template-columns:1fr;
    gap:var(--md-space-4);
  }
  .md-contact-form-card{
    padding:var(--md-space-4);
  }
  .md-contact-card{
    padding:var(--md-space-4);
  }
}

/* Video badge button beside Compliant chip on /standards/ cards */
.md-register__status-row{
  display:flex;
  align-items:center;
  gap:var(--md-space-2);
  flex-wrap:wrap;
  margin:var(--md-space-2) 0 var(--md-space-3);
}
.md-register__status-row .md-register__status{
  margin:0;
}
.md-video-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:0.6875rem;
  font-weight:700;
  color:var(--md-color-white);
  background:var(--md-color-hailidun);
  padding:2px 8px;
  border-radius:var(--md-radius-xs);
  text-decoration:none;
  letter-spacing:0.04em;
  text-transform:uppercase;
  transition:background-color .15s ease,transform .15s ease;
}
.md-video-btn:hover{
  background:var(--md-color-red-600);
  color:var(--md-color-white);
  transform:translateY(-1px);
  text-decoration:none;
}
.md-video-btn svg{
  flex-shrink:0;
}

/* ===================================================== 7h · Test Videos page (/how-a-flame-test-is-run/)
   Client instruction 2026-09-20: showcase laboratory testing method videos with direct jump anchors. */
.md-test-nav{
  display:flex;
  align-items:center;
  gap:var(--md-space-3);
  flex-wrap:wrap;
  margin-top:var(--md-space-5);
  padding-top:var(--md-space-4);
  border-top:1px solid var(--md-color-border-subtle);
}
.md-test-nav__label{
  font-size:var(--md-text-caption);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--md-color-text-muted);
}
.md-test-nav__chips{
  display:flex;
  align-items:center;
  gap:var(--md-space-2);
  flex-wrap:wrap;
}
.md-test-video-grid{
  display:flex;
  flex-direction:column;
  gap:var(--md-space-8);
}
.md-test-card{
  background:var(--md-color-white);
  border:1px solid var(--md-color-border);
  border-radius:var(--md-radius-sm);
  overflow:hidden;
  box-shadow:var(--md-shadow-1);
  scroll-margin-top:80px;
}
.md-test-card__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--md-space-4);
  padding:var(--md-space-5) var(--md-space-6);
  background:var(--md-color-bg-subtle);
  border-bottom:1px solid var(--md-color-border);
}
.md-test-card__titles h2{
  margin:var(--md-space-1) 0 0;
  font-size:1.375rem;
  color:var(--md-color-text-primary);
}
.md-test-card__badge-row{
  display:flex;
  align-items:center;
  gap:var(--md-space-2);
}
.md-test-card__badge-sub{
  font-size:var(--md-text-caption);
  color:var(--md-color-text-secondary);
  font-weight:500;
}
.md-test-card__backlink{
  font-size:var(--md-text-small);
  white-space:nowrap;
  flex-shrink:0;
  margin-top:var(--md-space-1);
}
.md-test-card__content{
  display:grid;
  grid-template-columns:5fr 4fr;
  gap:var(--md-space-6);
  padding:var(--md-space-6);
  align-items:start;
}
.md-test-card__player-box{
  position:relative;
  background:var(--md-color-black);
  border-radius:var(--md-radius-sm);
  overflow:hidden;
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.md-test-video-player{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.md-test-card__info{
  display:flex;
  flex-direction:column;
  gap:var(--md-space-3);
}
.md-test-card__summary{
  font-size:var(--md-text-small);
  color:var(--md-color-text-secondary);
  line-height:1.55;
  margin:0;
}
.md-test-card__spec-title{
  font-size:0.875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--md-color-text-primary);
  margin:var(--md-space-2) 0 0;
  padding-bottom:var(--md-space-2);
  border-bottom:1px solid var(--md-color-border);
}
.md-test-card__specs{
  display:flex;
  flex-direction:column;
  gap:var(--md-space-2);
  margin:0;
}
.md-test-card__spec-row{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:var(--md-text-caption);
  border-bottom:1px solid var(--md-color-border-subtle);
  padding-bottom:var(--md-space-2);
}
.md-test-card__spec-row dt{
  font-weight:700;
  color:var(--md-color-text-primary);
}
.md-test-card__spec-row dd{
  margin:0;
  color:var(--md-color-text-secondary);
  line-height:1.4;
}
.md-test-roadmap{
  background:linear-gradient(135deg,var(--md-color-white) 0%,var(--md-color-bg-subtle) 100%);
  border:1px dashed var(--md-color-border-strong);
  border-radius:var(--md-radius-sm);
  padding:var(--md-space-6);
  margin-top:var(--md-space-8);
  display:flex;
  align-items:flex-start;
  gap:var(--md-space-5);
}
.md-test-roadmap__icon{
  flex-shrink:0;
  width:48px;
  height:48px;
  border-radius:var(--md-radius-pill);
  background:var(--md-color-green-50);
  color:var(--md-color-primary);
  display:flex;
  align-items:center;
  justify-content:center;
}
.md-test-roadmap__body h4{
  margin:0 0 var(--md-space-1);
  font-size:var(--md-text-h5);
  color:var(--md-color-text-primary);
}
.md-test-roadmap__body p{
  margin:0;
  font-size:var(--md-text-small);
  color:var(--md-color-text-secondary);
  line-height:1.5;
}
@media (max-width:1023px){
  .md-test-card__content{
    grid-template-columns:1fr;
    gap:var(--md-space-4);
  }
}
@media (max-width:767px){
  .md-test-card__header{
    flex-direction:column;
    padding:var(--md-space-4);
  }
  .md-test-card__content{
    padding:var(--md-space-4);
  }
  .md-test-roadmap{
    flex-direction:column;
    gap:var(--md-space-3);
    padding:var(--md-space-4);
  }
}

/* --------------- Template C · lone application figure (speaker damper cloth) */
/* Client instruction 2026-09-22, on /product/speaker-damper-cloth-mp20232/.
   The shared frame above is a fixed 4:3 landscape box with object-fit:cover.
   That suits a ROW of cards which have to line up, but not a single figure:
   the figure on this page is a 750 x 1046 portrait, so cover cropped away the
   top and the bottom, taking the "PRODUCT APPLICATION" heading with it and
   clipping the label row underneath. The client asked for two things — the
   picture at 70% of the column, and the whole picture visible. Both follow from
   letting the frame take the picture's shape instead of the picture being
   forced into the frame's.

   Scoped to this product rather than to .md-pdp-scene-card at large, because
   that class is shared with the multi-card pages, where an even 4:3 box is
   doing real work. The same crop is present on those pages' scene images; apply
   this pattern there only on request.

   postid-31 is the speaker damper cloth product page. If that product is ever
   rebuilt under a new ID, this block has to move with it. */
body.postid-31 .md-pdp-scene-card{width:70%;max-width:750px;justify-self:center;}
body.postid-31 .md-pdp-scene-card__media{aspect-ratio:auto;overflow:visible;background:transparent;}
body.postid-31 .md-pdp-scene-card__media img{width:100%;height:auto;display:block;object-fit:contain;}

/* Client instruction 2026-09-22, second pass. The first version shrank the IMG
   to 70% inside a full-width card, which left the card's own white background
   showing as a blank bar down each side — exactly the whitespace the client was
   trying to get rid of. The frame has to shrink with the picture, so the width
   now sits on .md-pdp-scene-card (the <figure>) and the image fills it 100%.
   `justify-self` centres the narrowed card in the single grid column.
   max-width is the source's own 750 px: damper-cloth-application.jpg is
   750 x 1046, so this stops the browser upscaling it and going soft.
   Below 768 px the 70% would leave the card too small to read, so it goes full
   width there. */
@media (max-width:767px){
  body.postid-31 .md-pdp-scene-card{width:100%;}
}