/* =====================================================================
   XANTHER — English product detail page (product.html)
   Light editorial luxe: warm white / cream, near-black ink,
   champagne gold + soft rose accents. Reuses base tokens via
   styles.css; all product-specific layout lives here.
   ===================================================================== */

.product-page {
  --lav-050:  #faf7f2;   /* page bg */
  --lav-100:  #f1ece4;   /* alt section */
  --lav-200:  #e6dfd3;   /* hairlines / borders */
  --lav-300:  #d8cfc0;   /* stronger border */
  --lav-600:  #b3873f;   /* champagne accent */
  --lav-800:  #211b14;   /* headings (ink) */
  --ink-soft: #6f6557;
  --surface:  #ffffff;
  --rose:     #c98a8a;
  --rose-deep:#b06a64;   /* rose readable on light */
  background: var(--lav-050);
  color: var(--lav-800);
}
.product-page .section-lav { background: var(--lav-100); }

/* ---- header tweaks ---- */
.btn-small { padding: 9px 20px; font-size: 13.5px; }
.btn-outline { background: transparent; border: 1px solid var(--lav-600); color: var(--lav-800); }
.btn-outline:hover { background: var(--lav-600); color: #fff; }

/* ---- hero ---- */
.p-hero { padding: clamp(48px, 7vw, 90px) 0 0; }
.p-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.p-hero-text h1 { font-size: clamp(36px, 5.2vw, 62px); color: var(--lav-800); }
.p-hero-sub { color: var(--ink-soft); font-size: 18px; margin: 18px 0 22px; max-width: 460px; }
.pill-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 28px; }
.pill-row li {
  font-size: 13px; letter-spacing: .04em; color: var(--lav-800);
  background: var(--surface); border: 1px solid var(--lav-200); border-radius: 100px; padding: 8px 16px;
}
.p-hero-media img { border-radius: 18px; box-shadow: 0 30px 70px -40px rgba(70,55,38,.25); }

/* ---- overview ---- */
.overview-lede {
  max-width: 720px; margin: 0 auto; text-align: center;
  font-size: 19px; line-height: 1.8; color: var(--ink-soft);
}
.overview-lede strong { color: var(--lav-800); }

/* ---- six guards ---- */
.guard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.guard-card {
  background: var(--surface); border: 1px solid var(--lav-200); border-radius: 16px; padding: 26px 24px;
}
.guard-no {
  font-family: var(--serif); font-size: 15px; color: var(--rose-deep);
  letter-spacing: .18em; display: block; margin-bottom: 10px;
}
.guard-card h3 { font-size: 22px; color: var(--lav-800); margin-bottom: 8px; }
.guard-card p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }

/* ---- split sections ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.split-rev .split-media { order: -1; }
.split-media img { border-radius: 16px; width: 100%; box-shadow: 0 24px 60px -36px rgba(70,55,38,.22); }
.split-media.split-narrow { max-width: 420px; margin: 0 auto; }
.split-text h2 { font-size: clamp(30px, 4vw, 44px); color: var(--lav-800); margin-bottom: 14px; }
.split-lede { color: var(--lav-600); font-size: 17.5px; margin: 0 0 14px; }
.split-text p { color: var(--ink-soft); }
.h3-plain { font-size: 28px; color: var(--lav-800); margin-bottom: 10px; }

.dot-list { list-style: none; margin: 0 0 18px; padding: 0; }
.dot-list li { padding: 9px 0 9px 26px; position: relative; font-size: 15.5px; }
.dot-list li::before { content: "✦"; position: absolute; left: 2px; color: var(--rose-deep); font-size: 13px; top: 11px; }

.num-list { list-style: none; margin: 0; padding: 0; }
.num-list li { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--lav-200); align-items: baseline; }
.num-list li:last-child { border-bottom: none; }
.num-list li > span { font-family: var(--serif); color: var(--rose-deep); font-size: 20px; }
.num-list strong { display: block; color: var(--lav-800); font-weight: 500; margin-bottom: 3px; }
.num-list li div { font-size: 15px; color: var(--ink-soft); }

.chip-row { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 8px 0 0; }
.chip-row li {
  font-size: 12.5px; color: var(--lav-800); background: var(--surface);
  border: 1px solid var(--lav-200); border-radius: 100px; padding: 6px 13px;
}
.track-note { font-size: 14px; color: #9a8e7d; font-style: italic; }

/* ---- design ---- */
.design-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; margin-bottom: 34px; }
.design-grid figure { margin: 0; }
.design-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.design-big img { border-radius: 16px; }
.craft-row { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0; margin: 0 0 30px; }
.craft-row li strong { display: block; color: var(--lav-800); font-weight: 500; font-size: 17px; margin-bottom: 4px; }
.craft-row li span { font-size: 14px; color: var(--ink-soft); }
.color-row {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 26px;
  padding: 18px 0 0; margin: 0; border-top: 1px solid var(--lav-200);
}
.color-row li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--lav-800); }
.swatch { width: 22px; height: 22px; border-radius: 50%; display: inline-block; border: 1px solid rgba(33,27,20,.15); }
.sw-white { background: linear-gradient(135deg, #fdfdfb, #e8e4dc); }
.sw-black { background: linear-gradient(135deg, #2c2c2e, #101012); }
.sw-red   { background: linear-gradient(135deg, #c23a3a, #8e2424); }
.sw-green { background: linear-gradient(135deg, #2e6e52, #17402e); }
.sw-earth { background: linear-gradient(135deg, #b09a7c, #7c6a52); }

/* ---- five elements ---- */
.element-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.element-card {
  background: var(--surface); border: 1px solid var(--lav-200); border-radius: 16px;
  padding: 24px 18px; text-align: center;
}
.el-name { display: block; font-family: var(--serif); font-size: 22px; color: var(--rose-deep); margin-bottom: 12px; }
.element-card .swatch { width: 34px; height: 34px; margin: 0 auto 12px; }
.element-card p { margin: 0 0 4px; font-size: 14.5px; color: var(--lav-800); font-weight: 500; }
.el-traits { font-size: 12.5px; color: #9a8e7d; letter-spacing: .06em; }

/* ---- wide media / triples ---- */
.wide-media { margin: 0 0 26px; }
.wide-media img { width: 100%; border-radius: 16px; }
.triple-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 10px; }
.triple-row strong { display: block; color: var(--lav-800); font-weight: 500; margin-bottom: 4px; }
.triple-row span { font-size: 14px; color: var(--ink-soft); }
.fine-print { font-size: 12.5px; color: #8d8272; margin: 10px 0 0; }
.fine-print.center { text-align: center; max-width: 640px; margin: 18px auto 0; }
.container-inner { max-width: 900px; margin: 40px auto 0; }
.pack-split { align-items: center; }

/* ---- lifestyle ---- */
.life-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
.life-grid figure { margin: 0; }
.life-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.life-caption { text-align: center; color: var(--ink-soft); font-size: 15px; margin: 0; }

/* ---- sizing ---- */
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 30px; }
.step-card { background: var(--surface); border: 1px solid var(--lav-200); border-radius: 16px; padding: 24px; text-align: center; }
.step-no {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--lav-600); color: #fff; font-family: var(--serif); font-size: 19px; margin-bottom: 12px;
}
.step-card h3 { font-size: 20px; color: var(--lav-800); margin-bottom: 6px; }
.step-card p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.kit-note { text-align: center; font-size: 16px; color: var(--lav-800); margin: 18px 0 44px; }
.measure-wrap { margin-bottom: 44px; }
.measure-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0; margin: 16px 0 10px; counter-reset: m; }
.measure-steps li { text-align: center; }
.measure-steps img { width: 100%; max-width: 240px; border-radius: 12px; margin: 0 auto 10px; }
.measure-steps p { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

.notice-card {
  background: var(--surface); border: 1px solid var(--lav-300); border-left: 4px solid var(--rose);
  border-radius: 14px; padding: 26px 28px; margin: 0 auto 18px; max-width: 760px;
}
.notice-card h3 { font-size: 22px; color: var(--rose-deep); margin-bottom: 12px; }
.notice-card p { font-size: 15px; color: var(--ink-soft); margin: 0 0 10px; }
.notice-card p:last-child { margin-bottom: 0; }
.notice-plain { border-left-color: var(--lav-600); }
.notice-plain h3 { color: var(--lav-800); }

/* ---- closing ---- */
.p-closing { background: var(--bg-alt, #f1ece4); color: var(--lav-800); padding: clamp(56px, 8vw, 100px) 0; text-align: center; }
.p-closing h2 { font-size: clamp(30px, 4.5vw, 48px); margin-bottom: 14px; }
.p-closing p { color: var(--ink-soft); margin: 0 0 26px; }
.p-closing .btn-primary { background: var(--lav-800); color: #faf7f2; }
.p-closing .btn-primary:hover { background: var(--lav-600); color: #fff; }
.p-closing .fine-print { color: var(--ink-soft); margin-top: 26px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .p-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .guard-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 26px; }
  .split-rev .split-media { order: 0; }
  .design-grid { grid-template-columns: 1fr 1fr; }
  .craft-row, .triple-row { grid-template-columns: 1fr; gap: 12px; }
  .element-grid { grid-template-columns: repeat(2, 1fr); }
  .step-grid { grid-template-columns: 1fr; }
  .measure-steps { grid-template-columns: 1fr; }
  .life-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .guard-grid { grid-template-columns: 1fr; }
  .design-grid { grid-template-columns: 1fr; }
  .element-grid { grid-template-columns: 1fr; }
}

/* Desktop art direction: landscape frames without cropping product annotations. */
.product-page figure { min-width: 0; }
.p-hero-media, .split-media, .wide-media { margin-left: 0; margin-right: 0; }
.p-hero-media img, .split-media img, .wide-media img { display: block; height: auto; }
@media (min-width: 901px) {
  .product-page .container { max-width: 1280px; }
  .p-hero-grid { grid-template-columns: .85fr 1.15fr; gap: 48px; }
  .p-hero-media { aspect-ratio: 16 / 10; background: var(--lav-100); border-radius: 18px; overflow: hidden; }
  .p-hero-media img { width: 100%; height: 100%; object-fit: contain; box-shadow: none; }
  .split { grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); }
  .split-media, .split-media.split-narrow { width: 100%; max-width: none; aspect-ratio: 4 / 3; background: var(--lav-100); border-radius: 16px; overflow: hidden; }
  .split-media img { width: 100%; height: 100%; object-fit: contain; box-shadow: none; }
  .wide-media { aspect-ratio: 16 / 7; background: var(--lav-100); border-radius: 16px; overflow: hidden; }
  .wide-media img { width: 100%; height: 100%; object-fit: contain; }
  .design-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .design-grid figure { aspect-ratio: 4 / 3; background: var(--lav-100); border-radius: 16px; overflow: hidden; }
  .design-grid img { object-fit: contain; }
  .life-grid figure { aspect-ratio: 4 / 3; overflow: hidden; }
  .life-grid img { object-fit: cover; object-position: center; }
  .measure-steps img { aspect-ratio: 4 / 3; object-fit: contain; }
}
@media (max-width: 900px) {
  .product-page .split-media { width: 100%; margin-inline: auto; }
  .product-page .split-narrow { max-width: 360px; }
}

.finish-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); height:100%; gap:8px; }
.finish-gallery img { width:100%; height:100%; min-height:0; object-fit:contain; }
.pending-media { display:none; }
.split:has(> .pending-media) { grid-template-columns:1fr; max-width:900px; margin-inline:auto; }
@media(max-width:900px) { .finish-gallery { aspect-ratio: 4 / 3; } }

/* Cool white / light gray preview theme — 2026-09-29. */
.product-page {
  --lav-050: #fafbfd;
  --lav-100: #f0f3f6;
  --lav-200: #dfe4ea;
  --lav-300: #cbd2dc;
  --lav-600: #56677b;
  --lav-800: #202936;
  --ink-soft: #5f6b79;
  --surface: #ffffff;
  --rose: #8796a8;
  --rose-deep: #53657c;
  --bg: #fafbfd;
  --bg-alt: #f0f3f6;
  --ink: #202936;
  --line: #dfe4ea;
}
.product-page .site-header { background: rgba(250,251,253,.96); border-color: #e3e7ed; }
.product-page .p-hero-media,
.product-page .design-grid figure,
.product-page .split-media,
.product-page .wide-media { background: #f8fafc; }
.product-page .finish-gallery { background: #f8fafc; }
.product-page .btn-outline { border-color: #a3afbd; }
.product-page .p-closing .btn-primary { color: #fff; }
.product-page .fine-print, .product-page .el-traits, .product-page .track-note { color: #687587; }

/* Consistent detail imagery: preserve products and sizing instructions. */
.product-page .p-hero-media { aspect-ratio: auto; padding: 12px; border: 1px solid var(--line); }
.product-page .finish-gallery { height: auto; aspect-ratio: auto; grid-template-rows: repeat(2,minmax(0,1fr)); gap: 12px; }
.product-page .finish-gallery img { aspect-ratio: 1; height: auto; border-radius: 12px; box-shadow: none; }
.product-page .design-grid figure { aspect-ratio: 4 / 3; padding: 12px; border: 1px solid var(--line); }
.product-page .design-grid img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-page .life-grid figure { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 16px; background: #f8fafc; }
.product-page .life-grid img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.product-page .measure-steps li { padding: 20px; background: #f0f3f6; border: 1px solid var(--line); border-radius: 16px; }
.product-page .measure-steps img { display: block; width: 100%; max-width: 280px; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #f0f3f6; }

/* Six coordinated feature illustrations. */
.product-page .guard-card { padding: 0; overflow: hidden; }
.guard-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: #f8fafc; border-bottom: 1px solid var(--line); }
.guard-copy { padding: 24px; }
@media (max-width: 560px) { .guard-copy { padding: 22px; } }

/* Water and paper-material editorial scenes. */
.care-media { margin: 0 auto 30px; width: 100%; max-width: 900px; }
.care-media img, .pack-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 16px; background: #f8fafc; }
.pack-media { margin: 0; min-width: 0; }
.pack-media figcaption { text-align: center; }
.product-page .pack-split { max-width: 1100px; grid-template-columns: 1.15fr 1fr; }
@media (max-width: 900px) { .product-page .pack-split { grid-template-columns: 1fr; } }

/* Work lifestyle: preserve landscape composition on all screens. */
.work-media { margin: 0; min-width: 0; }
.work-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 16px; background: #f8fafc; }

/* Landscape application interface, with readable full-width metrics. */
.monitor-layout { display:flex; flex-direction:column; gap:28px; }
.monitor-layout .split-text { order:-1; }
.monitor-media { margin:0; width:100%; }
.monitor-media img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; border-radius:18px; border:1px solid var(--line); }
.monitor-media figcaption { text-align:center; }
#emotion-monitoring { scroll-margin-top:80px; }