/* Material Archive — project theme tokens and components.
   Warm neutral, editorial, generous whitespace, roomy Chinese line lengths. */

:root {
  --paper: #f6f1e8;
  --paper-2: #efe8db;
  --surface: #fffdf9;
  --ink: #191714;
  --ink-2: #4c453b;
  --ink-3: #7d7466;
  --line: #ded4c2;
  --line-2: #cdc0aa;
  --wood: #7a5636;
  --wood-deep: #43301f;
  --clay: #b06a52;
  --clay-soft: #e6d0c4;
  --olive: #6b7350;
  --olive-soft: #dfe2d2;
  --brass: #b9915a;

  --serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
  --sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;

  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 72px;
  --sp-8: 104px;
  --sp-9: 144px;

  --wrap: 1180px;
  --read: 34em;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 18px 44px rgba(58, 47, 34, 0.10);
  --shadow-sm: 0 8px 20px rgba(58, 47, 34, 0.08);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

a { color: var(--wood-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--clay); }

:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ---------- masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 241, 232, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead__inner {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 76px;
}
.brandlink {
  display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink);
  flex: 0 0 auto; margin-right: var(--sp-2);
}
.brandlink__text { display: flex; flex-direction: column; gap: 1px; }
.brandlink__mark {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--wood) 0%, var(--wood-deep) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
/* The brand crest, when the artwork is on disk. Sized above the drawn plate it
   replaces: at 34px the crest's ring lettering collapses into speckle, and 40px
   stands level with the two-line wordmark beside it. */
.brandlink__logo { width: 40px; height: 40px; flex: 0 0 auto; display: block; }
.brandlink__name { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; line-height: 1.25; }
.brandlink__sub { font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; white-space: nowrap; line-height: 1.3; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1px; flex-wrap: wrap; justify-content: flex-end; }
.nav a {
  display: inline-block; padding: 8px 9px; border-radius: 999px;
  font-size: 14.5px; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.nav a:hover { background: var(--paper-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--ink); color: #fdf9f1; }

.navtoggle {
  display: none; margin-left: auto; border: 1px solid var(--line-2); background: var(--surface);
  border-radius: 10px; padding: 9px 14px; font-size: 15px; font-family: var(--sans); color: var(--ink); cursor: pointer;
}
.topcall {
  margin-left: var(--sp-3); display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fdf9f1 !important; padding: 11px 18px; border-radius: 999px;
  font-size: 15px; text-decoration: none; white-space: nowrap; flex: 0 0 auto;
}
.topcall:hover { background: var(--clay); color: #fff !important; }

/* ---------- hero ---------- */
.hero { padding: var(--sp-7) 0 var(--sp-6); border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: 0.18em; color: var(--ink-3); text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--line-2); }
h1 {
  font-family: var(--serif); font-weight: 700; letter-spacing: 0.01em;
  font-size: clamp(31px, 3.5vw, 50px); line-height: 1.2; margin: var(--sp-3) 0 var(--sp-4);
}
h1 .l2 { display: block; }
.lead { font-size: 18px; line-height: 1.82; color: var(--ink-2); max-width: 30em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; font-size: 16.5px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-family: var(--sans);
}
.btn--primary { background: var(--clay); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #9d5c46; color: #fff; }
.btn--ghost { border-color: var(--line-2); color: var(--ink); background: var(--surface); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.hero__art { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.hero__art img { display: block; width: 100%; height: auto; }

.identity {
  margin-top: var(--sp-6); display: grid; gap: 0;
  /* Capping the track at 30% of the row keeps six identity pairs in a balanced
     3x2 grid instead of leaving a single orphan cell on a fifth column. */
  grid-template-columns: repeat(auto-fit, minmax(max(190px, 30%), 1fr));
  border-top: 1px solid var(--line);
}
.identity div { padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.identity dt { font-size: 12.5px; letter-spacing: 0.12em; color: var(--ink-3); margin: 0 0 6px; }
.identity dd { margin: 0; font-size: 16.5px; color: var(--ink); }
.identity dd a { text-decoration: none; border-bottom: 1px solid var(--line-2); }

/* ---------- generic band ---------- */
.band { padding: var(--sp-8) 0; border-bottom: 1px solid var(--line); }
.band--tight { padding: var(--sp-7) 0; }
.band--surface { background: var(--surface); }
.band--ink { background: var(--ink); color: #f2ece1; border-bottom: none; }
.band--ink a { color: #f2ece1; }
.band__head { max-width: 46em; margin-bottom: var(--sp-6); }
h2 { font-family: var(--serif); font-size: clamp(27px, 3.1vw, 42px); line-height: 1.24; margin: 0 0 var(--sp-3); letter-spacing: 0.01em; }
h3 { font-family: var(--serif); font-size: clamp(21px, 2.1vw, 27px); line-height: 1.36; margin: var(--sp-6) 0 var(--sp-3); }
h4 { font-size: 18px; margin: var(--sp-4) 0 var(--sp-2); }
p { margin: 0 0 var(--sp-4); }
.sectionLead { font-size: 17.5px; color: var(--ink-2); }

/* ---------- service comparison ---------- */
.compare { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ccard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.ccard__kw {
  align-self: flex-start; font-size: 12.5px; letter-spacing: 0.14em;
  background: var(--olive-soft); color: #47502f; padding: 5px 11px; border-radius: 999px;
}
.ccard h3 { margin: 0; font-size: 24px; }
.ccard__fit { font-size: 15px; color: var(--ink-3); margin: 0; }
.ccard ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); font-size: 16px; }
.ccard li { margin-bottom: 8px; }
.ccard__more { margin-top: auto; font-size: 15.5px; }

/* ---------- method sequence ---------- */
.seq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.seq__row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-5);
  padding: var(--sp-6) 0; border-bottom: 1px solid var(--line); align-items: start;
}
.seq__no { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--clay); }
.seq h3 { margin: 0 0 var(--sp-2); }
.seq__summary { color: var(--ink-2); margin-bottom: var(--sp-3); }
.seq ul { margin: 0 0 var(--sp-3); padding-left: 1.1em; color: var(--ink-2); }
.seq li { margin-bottom: 7px; }
.seq__leave { font-size: 15px; color: var(--ink-3); border-left: 2px solid var(--line-2); padding-left: 12px; }

/* ---------- evidence list ---------- */
.trust { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.trust__card { border-top: 2px solid var(--wood); padding-top: var(--sp-3); }
.trust__card h3 { margin: 0 0 var(--sp-2); font-size: 20px; }
.trust__card p { margin: 0; font-size: 16px; color: var(--ink-2); }

/* ---------- partner mark (brand asset, shown as dealer evidence) ----------
   The mark belongs to 佛山丽星家具, not to this store, so it never stands in
   for the site's own identity: it always sits next to a caption naming the
   relationship. The badge image itself is a photo-derived circular crop from
   the store's own storefront sign, so it keeps its dark ground; on the dark
   footer it needs a light rim or it disappears. */
.partnerBadge {
  display: flex; align-items: center; gap: var(--sp-4);
  margin: 0 0 var(--sp-5); padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.partnerBadge img { display: block; flex: 0 0 auto; border-radius: 50%; box-shadow: var(--shadow-sm); }
.partnerBadge figcaption { display: grid; gap: 3px; min-width: 0; }
.partnerBadge__name { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); }
.partnerBadge__role { font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; color: var(--brass); }
.partnerBadge__note { font-size: 13.5px; line-height: 1.62; color: var(--ink-3); margin-top: 3px; }

.partnerBadge--lead { margin-top: var(--sp-5); }
.partnerBadge--article, .partnerBadge--statement { margin: var(--sp-5) 0 var(--sp-5); }
.partnerBadge--foot { background: none; border: 0; padding: 0; margin: var(--sp-4) 0 0; gap: var(--sp-3); }
.partnerBadge--foot img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 6px 16px rgba(0, 0, 0, 0.34); }
.partnerBadge--foot .partnerBadge__name { font-size: 15.5px; color: #f3ede2; }
.partnerBadge--foot .partnerBadge__role { font-size: 12.5px; color: #c9a86f; }
/* On an ink footer the artwork is used with its plate keyed away, so the disc
   crop and the light ring that framed the plated version have to come off. The
   bare mark is taller than it is wide (its ring lettering sits above and below
   the horse), so it is contained rather than stretched into the square. */
.partnerBadge--bare img { border-radius: 0; box-shadow: none; object-fit: contain; }
@media (max-width: 560px) {
  .partnerBadge { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* ---------- real storefront ---------- */
.band--storefront { background: var(--ink); color: var(--paper); }
.storefront { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr); gap: var(--sp-6); align-items: center; }
.storefront__figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: #171614; box-shadow: var(--shadow); }
.storefront__figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.storefront__figure figcaption { padding: 10px 14px; font-size: 13px; letter-spacing: .06em; color: #d8d0c2; background: #171614; }
.storefront__copy h2 { color: var(--paper); margin: var(--sp-3) 0; }
.storefront__copy p { color: #d8d0c2; font-size: 17px; }
.storefront__figure--contact { margin-bottom: var(--sp-4); border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--surface); }
.storefront__figure--contact figcaption { color: var(--ink-3); background: var(--surface); }

/* ---------- real showroom products ---------- */
.productGallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.productGallery--cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.productGallery--single { grid-template-columns: minmax(0, 760px); }
.productPhoto { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
/* `height: auto` is not optional here. Every <img> carries width/height
   attributes so the browser can reserve space before the file arrives, and
   those attributes act as presentational hints. Overriding only `width`
   leaves the attribute height in force, `aspect-ratio` then never applies,
   and object-fit: cover crops a landscape photo into a tall vertical strip. */
.productPhoto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.productPhoto figcaption { padding: 11px 14px; color: var(--ink-3); font-size: 13px; letter-spacing: .04em; }

/* ---------- WeChat consultation QR ---------- */
.wechatQr { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: var(--sp-4); align-items: center; margin-top: var(--sp-5); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.wechatQr h2 { margin: var(--sp-2) 0; font-size: 24px; }
.wechatQr p { margin: 0; color: var(--ink-2); font-size: 16px; }
.wechatQr figure { margin: 0; padding: 8px; background: #fff; border-radius: var(--radius); text-align: center; }
.wechatQr img { display: block; width: 100%; height: auto; border-radius: 4px; }
.wechatQr figcaption { margin-top: 6px; color: var(--ink-3); font-size: 12px; }
.wechatQr--compact { max-width: 660px; margin-top: var(--sp-5); background: #f8f4ed; }
.band--ink .wechatQr { color: var(--ink); }

/* ---------- editorial index ---------- */
.edindex { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.ecard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.ecard:hover { border-color: var(--line-2); }
.ecard__art { aspect-ratio: 16 / 9; background: var(--paper-2); overflow: hidden; }
.ecard__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecard__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ecard__meta { font-size: 13px; letter-spacing: 0.08em; color: var(--ink-3); }
.ecard h3 { margin: 0; font-size: 21px; line-height: 1.42; }
.ecard p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.ecard__more { margin-top: auto; font-size: 15px; color: var(--wood-deep); }

/* ---------- timeline (news) ---------- */
.timeline { border-top: 1px solid var(--line); }
.tlrow {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--sp-5);
  padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); align-items: start;
}
.tlrow time { font-family: var(--serif); font-size: 19px; color: var(--ink-3); }
.tlrow h3 { margin: 0 0 8px; font-size: 22px; }
.tlrow h3 a { text-decoration: none; }
.tlrow p { margin: 0; color: var(--ink-2); font-size: 16px; }
.tag {
  display: inline-block; font-size: 12.5px; letter-spacing: 0.1em;
  background: var(--clay-soft); color: #7a4430; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}

/* ---------- reading column ---------- */
.article { max-width: var(--read); }
.article p { font-size: 17.5px; line-height: 1.86; }
.article h2 { font-size: clamp(23px, 2.2vw, 31px); line-height: 1.34; margin: var(--sp-6) 0 var(--sp-3); }
.article > p:first-of-type { font-size: 19px; color: var(--ink-2); }
.articleHd { padding: var(--sp-7) 0 var(--sp-5); border-bottom: 1px solid var(--line); }
.articleHd .meta { font-size: 14px; color: var(--ink-3); letter-spacing: 0.06em; }
.articleHd h1 { font-size: clamp(29px, 3.3vw, 46px); margin-bottom: var(--sp-3); }
.articleHd .lead { max-width: 32em; }

/* ---------- detail (service) ---------- */
.detail__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.detail__aside { position: sticky; top: 104px; }
.asideCard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.asideCard h3 { margin-top: 0; font-size: 20px; }
.asideCard__art { border-radius: var(--radius); overflow: hidden; margin-bottom: var(--sp-4); }
/* Same reason as .productPhoto img: without `height: auto` the width/height
   attributes on these figures win and the diagram is stretched into a column. */
.asideCard__art img { display: block; width: 100%; height: auto; }
.keyline { display: flex; gap: var(--sp-3); padding: 12px 0; border-top: 1px solid var(--line); font-size: 15.5px; }
.keyline:first-of-type { border-top: none; }
.keyline dt { flex: 0 0 92px; color: var(--ink-3); margin: 0; font-size: 14px; }
.keyline dd { margin: 0; color: var(--ink); }

/* ---------- FAQ accordion ---------- */
.faqGroup { margin-bottom: var(--sp-6); }
.faqGroup > h2 { font-size: clamp(22px, 2.3vw, 30px); }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer; list-style: none; padding: var(--sp-4) 40px var(--sp-4) 0; position: relative;
  font-family: var(--serif); font-size: 19px; line-height: 1.5;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
}
.qa[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.qa__body { padding: 0 0 var(--sp-4); max-width: var(--read); color: var(--ink-2); }
.qa__body p { margin: 0 0 var(--sp-3); }

/* ---------- contact ---------- */
.contactGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.bigcall {
  display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-6); text-decoration: none; color: inherit; box-shadow: var(--shadow-sm);
}
.bigcall__label { font-size: 13px; letter-spacing: 0.14em; color: var(--ink-3); }
.bigcall__num { font-family: var(--serif); font-size: clamp(30px, 4vw, 44px); margin: 10px 0 6px; letter-spacing: 0.01em; }
.factList { display: grid; gap: 0; margin: 0; }
.factList div { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: var(--sp-3); padding: 14px 0; border-bottom: 1px solid var(--line); }
.factList dt { color: var(--ink-3); font-size: 14.5px; margin: 0; }
.factList dd { margin: 0; }

/* ---------- statement page ---------- */
.statementBox {
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--clay);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: var(--sp-6); box-shadow: var(--shadow-sm);
}
.statementBox p { font-size: 17.5px; }
.pillrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-4); }
.pill { font-size: 14px; background: var(--paper-2); border: 1px solid var(--line-2); padding: 7px 14px; border-radius: 999px; color: var(--ink-2); }

/* ---------- notes ---------- */
.notelist { list-style: none; margin: 0; padding: 0; }
.notelist li { padding: 14px 0 14px 26px; border-bottom: 1px solid var(--line); position: relative; color: var(--ink-2); font-size: 16px; }
.notelist li::before { content: "—"; position: absolute; left: 0; color: var(--clay); }
.band--ink .notelist li { border-bottom-color: rgba(255,255,255,0.14); color: #ddd5c7; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #cbc3b6; padding: var(--sp-7) 0 var(--sp-5); font-size: 15px; }
.foot a { color: #f0e9dd; text-decoration: none; }
.foot a:hover { color: var(--brass); }
.foot__grid { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.foot h4 { font-size: 13px; letter-spacing: 0.16em; color: #9c9385; margin: 0 0 var(--sp-3); font-family: var(--sans); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 10px; }
.foot__name { font-family: var(--serif); font-size: 21px; color: #f5efe4; margin-bottom: 10px; }
.foot__alias { display: block; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.02em; color: #a89e8c; margin-top: 4px; }
.foot__bottom { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,0.12); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; font-size: 13.5px; color: #9c9385; }

/* ---------- utility ---------- */
.crumb { font-size: 14px; color: var(--ink-3); padding: var(--sp-4) 0 0; }
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--clay); }
.localnote {
  background: var(--olive-soft); border: 1px dashed #a8ad8c; color: #454d31;
  border-radius: var(--radius); padding: 14px 18px; font-size: 15px; margin-bottom: var(--sp-5);
}

@media (max-width: 1180px) {
  .nav { display: none; }
  .nav[data-open="true"] {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; left: 24px; right: 24px; top: 74px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow);
    z-index: 30;
  }
  .navtoggle { display: inline-block; }
  .topcall { display: none; }
  .masthead__inner { position: relative; }
}

@media (max-width: 900px) {
  .hero__grid, .detail__grid, .contactGrid, .foot__grid, .storefront { grid-template-columns: minmax(0, 1fr); }
  /* A three-up row holds its three columns down to the phone breakpoint. Letting
     it fall to a single column at 900px stacked three landscape photos into
     ~1,900px of scroll — the very thing the row exists to avoid. The two-up
     gallery does collapse here, which is fine for a pair. `:not()` is needed
     because a media query adds no specificity: a bare .productGallery rule here
     would out-order .productGallery--cols3 and flatten the row anyway. */
  .productGallery:not(.productGallery--cols3) { grid-template-columns: minmax(0, 1fr); }
  .wechatQr { grid-template-columns: minmax(0, 1fr); }
  .wechatQr figure { max-width: 230px; }
  .detail__aside { position: static; }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 18px; }
  /* Below this the three columns would be ~190px each, too small to read a
     showroom photo, so the row finally becomes a stack — but a short one. */
  .productGallery, .productGallery--cols3 { grid-template-columns: minmax(0, 1fr); }
  .band { padding: var(--sp-7) 0; }
  .hero { padding: var(--sp-6) 0 var(--sp-5); }
  h1 { font-size: clamp(27px, 7.1vw, 34px); line-height: 1.24; }
  .seq__row, .tlrow { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .seq__no { font-size: 30px; }
  .factList div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lead, .article p { max-width: none; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
}

@media print {
  .masthead, .hero__actions, .navtoggle { display: none; }
  body { background: #fff; }
}