/* ==========================================================================
   御絲芃 Le' Esponeux 專頁樣式
   載入順序：site.css → contrast.css → le.css（本檔）→ 頁面 inline
   定位：子品牌專頁，暖砂米 × 白瓷 × 專業生醫的雙軌質感
   ========================================================================== */

/* ---------- 1. 品牌色（沿用 tokens.css 既有變數，補齊缺口） ---------- */
:root {
  --le-ink: #2A2119;
  --le-ink-soft: #6B5D4E;
  --le-gold: #C9A961;
  --le-porcelain: #FDFCFA;
  --le-line: rgba(168, 148, 120, 0.28);
  --le-silver: #C4C7D1;   /* 洗劑代表色：取自模特銀色禮服 */
}

/* ---------- 2. Hero：置中、加大留白、金色細線 ---------- */
.le-hero .page-hero__inner {
  text-align: center;
  align-items: center;
}
.le-hero .le-logo--lg {
  height: 72px;
  margin-bottom: var(--sp-5);
  /* base.css 有 img { display: block }，block 元素不受父層 text-align 影響，
     故需以 margin-inline: auto 讓 LOGO 與標題、金線、標語對齊同一條中軸線。 */
  margin-inline: auto;
}
.le-hero .page-hero__title {
  letter-spacing: 0.14em;
  /* 寬字距會在末字右側留下一個字距的空白，使置中視覺偏左 → 以 text-indent 補回 */
  text-indent: 0.14em;
}
/* 金線與標語同寬：兩者包在同一個 inline-block 容器，容器依內容寬度收縮，
   金線 width:100% 即等於標語第一行的寬度。 */
.le-hero__tagline {
  display: inline-block;
  max-width: 100%;
  margin-top: var(--sp-5);
}
.le-hero__rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--le-gold), transparent);
  margin: 0 0 var(--sp-4);
  border: 0;
}
/* 副標改為兩層級：第一層是名字的由來（較大），第二層是實質定位（較小）。
   刻意不使用 <br> 硬換行——硬換行在窄螢幕會鋸齒化，改由 max-width 控制折行。 */
.le-hero__lead {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: rgba(248, 250, 252, 0.98);
  max-width: none;
  margin: 0;
  text-wrap: pretty;
  text-shadow: 0 1px 2px rgba(8, 24, 46, 0.62), 0 2px 12px rgba(8, 24, 46, 0.46);
}
.le-hero__sub {
  font-size: var(--fs-base);
  line-height: 1.95;
  color: rgba(240, 244, 248, 0.88);
  max-width: 44ch;
  margin: var(--sp-3) auto 0;
  text-wrap: pretty;
  text-shadow: 0 1px 2px rgba(8, 24, 46, 0.62), 0 2px 12px rgba(8, 24, 46, 0.46);
}
@media (max-width: 768px) {
  .le-hero__lead { font-size: var(--fs-md); }
  .le-hero__sub { font-size: var(--fs-sm); line-height: 1.85; }
}

/* ---------- 3. 品牌情境照：全幅圖帶（取代純文字區塊） ---------- */
.le-scene {
  position: relative;
  overflow: hidden;
  background: var(--le-porcelain);
}
.le-scene__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}
.le-scene__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}
.le-scene__media--tall {
  aspect-ratio: 4 / 3;
}
.le-scene__media--tall img {
  object-position: center 18%;
}

/* 疊字版（圖上白字，沿用 contrast.css 工法） */
.le-scene__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28, 22, 14, 0.30) 0%, rgba(28, 22, 14, 0.06) 38%, rgba(28, 22, 14, 0.58) 100%),
    linear-gradient(120deg, rgba(42, 33, 25, 0.46) 0%, rgba(42, 33, 25, 0.14) 55%, rgba(42, 33, 25, 0) 100%);
  pointer-events: none;
}
.le-scene__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-6) var(--sp-5);
  color: #fff;
}
.le-scene__caption h3 {
  font-family: var(--font-display-cn);
  font-weight: var(--fw-black);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(20, 14, 8, 0.6), 0 4px 18px rgba(20, 14, 8, 0.5);
}
.le-scene__caption p {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(20, 14, 8, 0.65);
  max-width: 46ch;
}

/* 側欄版（左圖右文） */
.le-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 900px) {
  .le-split {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--sp-8);
  }
  .le-split--reverse .le-split__media { order: 2; }
  .le-split--reverse .le-split__body { order: 1; }
}
.le-split__media {
  position: relative;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  background: var(--le-cream);
}
.le-split__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* 人物特寫：對焦在上半身，避免寬版裁切時切到臉 */
  object-position: center 22%;
}
.le-split__body h3 {
  font-family: var(--font-display-cn);
  font-weight: var(--fw-black);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--le-ink);
  line-height: 1.4;
}
.le-split__body p {
  margin-top: var(--sp-3);
  color: var(--ht-muted);
  font-size: var(--fs-sm);
  line-height: 1.85;
}

/* ---------- 4. 產品卡（含實照） ---------- */
.le-products {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 640px) {
  .le-products { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .le-products { grid-template-columns: repeat(4, 1fr); }
}

.le-pcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--le-line);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.le-pcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -18px rgba(42, 33, 25, 0.28);
}
.le-pcard__shot {
  position: relative;
  background: linear-gradient(170deg, #FBFAF7 0%, #F1EDE5 100%);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 300px;
}
.le-pcard__shot img {
  max-height: 240px;
  width: auto;
  max-width: 78%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(42, 33, 25, 0.16));
}
.le-pcard__no {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  color: var(--le-primary-700);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--le-line);
  border-radius: var(--radius-pill);
  padding: 0.24em 0.7em;
}
.le-pcard__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.le-pcard__body h3 {
  font-family: var(--font-display-cn);
  font-weight: var(--fw-black);
  font-size: var(--fs-xl);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--le-ink);
}
/* 色標改為實心藥丸，讓四支產品的顏色一眼可辨（強化視覺層級） */
.le-pcard__en {
  display: block;
  width: fit-content;
  margin-top: var(--sp-2);
  padding: 0.24em 0.75em;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--le-ink-soft);
}
.le-products .le-pcard:nth-child(1) .le-pcard__en { background: #008C64; }
.le-products .le-pcard:nth-child(2) .le-pcard__en { background: #C7181E; }
.le-products .le-pcard:nth-child(3) .le-pcard__en { background: #11459B; }
.le-products .le-pcard:nth-child(4) .le-pcard__en {
  background: var(--le-silver);
  color: var(--le-ink);
}
.le-pcard__body > p {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ht-muted);
  line-height: 1.8;
  /* 固定為 3 行高：四張卡的文字區等高，下方規格區的虛線才會落在同一條線上。
     註：先前誤用 flex:1（推到底部），反而讓規格列數較多的第一張卡虛線偏高。 */
  flex: 0 0 auto;
  min-height: 5.4em;
}
.le-pcard__specs {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--le-line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  flex: 1;   /* 吸收剩餘高度，虛線（border-top）因此對齊 */
}
.le-pcard__specs li {
  display: flex;
  gap: 0.6em;
  font-size: var(--fs-xs);
  color: var(--ht-muted);
  line-height: 1.7;
}
.le-pcard__specs li b {
  flex: 0 0 3em;
  color: var(--le-ink);
  font-weight: var(--fw-bold);
}

/* 品牌三色情境圖（圖＋色名說明） */
.le-colorblock {
  margin: 0;
}
.le-colorblock .le-scene__media {
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}
.le-colorblock figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-display-cn);
  font-size: var(--fs-sm);
  color: var(--ht-muted);
  letter-spacing: 0.02em;
}
.le-colorblock figcaption b {
  display: inline-block;
  margin-right: 0.6em;
  font-family: var(--font-display-cn);
  font-weight: var(--fw-black);
  font-size: var(--fs-lg);
  color: var(--le-ink);
  vertical-align: -2px;
}

/* ---------- 5. 科研證據帶（深底 + 圖牆） ---------- */
/* 色溫校正：原為母品牌的冷藍漸層，在御絲芃暖色頁面上會顯得突兀，
   改為同色調的深墨棕，維持「深底壓場」的功能但不打架。 */
.le-proof {
  background: linear-gradient(165deg, #2A2119 0%, #3A2E22 58%, #4A3B2C 100%);
  color: #fff;
  padding: var(--sp-9) 0;
}
.le-proof .eyebrow {
  color: #E6D3AE;
  border-color: rgba(230, 211, 174, 0.42);
}
.le-proof h2 {
  font-family: var(--font-display-cn);
  font-weight: var(--fw-black);
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  letter-spacing: 0.04em;
}
.le-proof__lead {
  margin-top: var(--sp-3);
  color: rgba(255, 255, 255, 0.78);
  max-width: 62ch;
  font-size: var(--fs-sm);
  line-height: 1.9;
}
.le-proof__wall {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
@media (min-width: 860px) {
  .le-proof__wall { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
}
.le-proof__item {
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.le-proof__item img {
  width: 100%;
  height: 132px;
  object-fit: contain;
  background: #fff;
  padding: var(--sp-2);
  display: block;
}
.le-proof__item span {
  display: block;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--le-ink-soft);
  line-height: 1.6;
}
/* 證據卡說明編排：標籤粗體 + 說明換行（2026-09-23）
   標籤（<b>）與說明同字級，僅以字重區分層級。 */
.le-proof__item b { font-weight: 700; }
/* 內層 i18n span 不套用證據卡 padding（2026-09-23 修正）：
   .le-proof__item span 會同時命中內層 inline 的 .i18n-* span，
   而 inline 元素的 padding-left 只作用於「首行」→ 標籤行比說明行多縮 12px。
   故將內層 padding 歸零，兩行即切齊。 */
.le-proof__item [class^="i18n-"] { padding: 0; }

/* ---------- 6. 雙核心技術（圖示卡） ---------- */
.le-core {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 820px) {
  .le-core { grid-template-columns: repeat(2, 1fr); }
}
.le-core__card {
  background: #fff;
  border: 1px solid var(--le-line);
  border-radius: var(--radius-lg, 16px);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
}
.le-core__card img {
  width: 100%;
  height: 190px;
  object-fit: contain;
  background: var(--le-porcelain);
  border-radius: var(--radius-md, 12px);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.le-core__card h3 {
  font-family: var(--font-display-cn);
  font-weight: var(--fw-black);
  font-size: var(--fs-lg);
  color: var(--le-ink);
}
.le-core__card > p {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ht-muted);
  line-height: 1.85;
}

/* ---------- 7. 使用四步（圖示化） ---------- */
.le-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  counter-reset: le-step;
}
@media (min-width: 900px) {
  .le-steps { grid-template-columns: repeat(4, 1fr); }
}
.le-step {
  background: #fff;
  border: 1px solid var(--le-line);
  border-radius: var(--radius-lg, 16px);
  padding: var(--sp-5) var(--sp-4);
  position: relative;
  counter-increment: le-step;
}
.le-step::before {
  content: counter(le-step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--le-cream);
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-4);
  line-height: 1;
}
.le-step h4 {
  font-family: var(--font-display-cn);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--le-ink);
  position: relative;
}
.le-step p {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ht-muted);
  line-height: 1.8;
}

/* ---------- 8. 產品規格表 ---------- */
.le-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--le-line);
  background: #fff;
}
.le-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: var(--fs-sm);
}
.le-table th,
.le-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--le-line);
  color: var(--ht-muted);
  line-height: 1.7;
}
.le-table thead th {
  background: var(--le-cream);
  color: var(--le-ink);
  font-family: var(--font-display-cn);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.le-table tbody th {
  color: var(--le-ink);
  font-weight: var(--fw-bold);
  background: rgba(244, 237, 224, 0.42);
  white-space: nowrap;
}
.le-table tbody tr:last-child th,
.le-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- 9. 對應色帶（產品色系） ---------- */
.le-colorway {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.le-colorway__item {
  border-radius: var(--radius-md, 12px);
  padding: var(--sp-4) var(--sp-3);
  color: #fff;
  text-align: center;
}
.le-colorway__item b {
  display: block;
  font-family: var(--font-display-cn);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}
.le-colorway__item span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  opacity: 0.82;
}
/* 洗劑：不是第四色，而是三色共用的基礎 —— 獨立成一條細長色帶 */
.le-colorway-base {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  /* 整個色塊採用主題色 —— 讓它讀起來是「支撐上方三色的基礎」而非另一個顏色 */
  border: 1px solid rgba(140, 148, 164, 0.55);
  border-radius: var(--radius-md, 12px);
  background: var(--le-silver);
}
.le-colorway-base__swatch {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(42, 33, 25, 0.16);
}
.le-colorway-base__tag {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  color: var(--le-ink);
  border: 1px solid rgba(42, 33, 25, 0.26);
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-pill);
  padding: 0.2em 0.75em;
}
.le-colorway-base__text {
  font-size: var(--fs-sm);
  color: var(--le-ink);
  line-height: 1.7;
}
.le-colorway-base__text b {
  font-family: var(--font-display-cn);
  font-weight: var(--fw-black);
  color: var(--le-ink);
  margin-right: 0.45em;
}
@media (max-width: 600px) { .le-colorway-base { flex-wrap: wrap; gap: var(--sp-2); } }

/* ---------- 10. FAQ（沿用既有，強化為卡片） ---------- */
.le-faq {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.le-faq__item {
  background: #fff;
  border: 1px solid var(--le-line);
  border-left: 3px solid var(--le-gold);
  border-radius: var(--radius-md, 12px);
  padding: var(--sp-4) var(--sp-5);
}
.le-faq__item h4 {
  font-family: var(--font-display-cn);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--le-ink);
}
.le-faq__item p {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ht-muted);
  line-height: 1.9;
}

/* ---------- 11. 深底可讀性（沿用 contrast.css 工法） ---------- */
.le-proof .le-proof__lead,
.le-proof h2 { text-shadow: 0 1px 2px rgba(10, 24, 40, 0.35); }

/* ---------- 12. 響應式微調 ---------- */
@media (max-width: 640px) {
  .le-pcard__shot { min-height: 240px; }
  .le-pcard__shot img { max-height: 180px; }
  .le-scene__media { aspect-ratio: 4 / 3; }
  .le-scene__caption { padding: var(--sp-5) var(--sp-4); }
  .le-hero .le-logo--lg { height: 52px; }
}

/* ---------- 13. 無障礙與動效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .le-pcard { transition: none; }
  .le-pcard:hover { transform: none; }
}


/* =============================================================
   色溫校正（v0.10）
   母品牌以冷藍灰作為交替區塊底色，但御絲芃自有色系是暖瓷白／暖米／暖砂。
   兩者交錯會讓頁面看起來「破圖」，故在本頁把交替底色改為暖色系。
   le.css 僅在 le-esponeux.html 載入，因此直接覆寫即可。
   ============================================================= */
.section--alt { background: var(--le-cream); }


/* =============================================================
   2026-09-14 追加修正
   ============================================================= */

/* ---------- A. 圖帶重設計（編輯式版面） ---------- */
/* 沿革：① 初版是「淺底＋深色文字卡」→ 一條深卡浮在淺底上，比例失衡
        ② 第二版改「整條壓深」→ 變成沒有任何訊息的深藍方塊（Cozy：不知所謂）
        ③ 本版：照片真正露出，文字落在左側暖色漸層上，形成編輯式版面。
   重點：遮罩改為「左深右透」的方向性漸層，並換成御絲芃的深墨棕，與全頁色溫一致。 */
.le-bandquote {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* 深墨棕底色：底圖載入中／載入失敗時仍維持深色，
     避免露出頁面的暖米底而讓白字失效（曾因此整條圖帶看起來變淺）。 */
  background: #40301F;
}
.le-bandquote .band__bg {
  position: absolute;
  top: -8%; left: 0; right: 0;
  height: 116%;
  background-image: var(--band-img);
  background-position: center 16%;
  background-size: cover;
  background-repeat: no-repeat;
}
.le-bandquote .band__overlay {
  background: linear-gradient(90deg,
    rgba(64, 46, 31, 0.84) 0%,
    rgba(64, 46, 31, 0.74) 32%,
    rgba(64, 46, 31, 0.34) 60%,
    rgba(64, 46, 31, 0.02) 100%);
}
.le-bandquote .band__content {
  max-width: min(600px, 64%);
  padding: var(--sp-9) var(--sp-8);
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.le-bandquote .band__quote { max-width: 100%; }
.le-bandquote .band__note { max-width: 38ch; }
@media (max-width: 768px) {
  .le-bandquote { min-height: 300px; border-radius: var(--radius-md); }
  .le-bandquote .band__overlay {
    background: linear-gradient(180deg,
      rgba(64, 46, 31, 0.82) 0%,
      rgba(64, 46, 31, 0.74) 55%,
      rgba(64, 46, 31, 0.64) 100%);
  }
  .le-bandquote .band__content { max-width: 100%; padding: var(--sp-7) var(--sp-5); }
}

/* ---------- B. 三卡等寬（適用與承諾） ---------- */
/* 依 Cozy 指定改為等寬；保留中間卡的暖金淡底，避免三張完全一樣而顯得模板化。 */
.le-trio { grid-template-columns: repeat(3, 1fr); }

/* 卡片材質：暖瓷
   母品牌的 .card 是冷墨描邊＋冷灰陰影，放在御絲芃的暖米底上會顯得灰冷；
   這裡改用暖色髮絲邊與暖調分層陰影，並加一層極淡的紙張受光。 */
.le-trio > .card {
  background-color: #FFFFFF;
  background-image: linear-gradient(178deg, #FFFFFF 0%, #FDFBF7 56%, #FAF6EF 100%);
  border: 1px solid var(--le-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 1px 2px rgba(42, 33, 25, 0.035),
    0 6px 18px -8px rgba(42, 33, 25, 0.10),
    0 18px 40px -24px rgba(42, 33, 25, 0.14);
}
.le-trio > .card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 2px 4px rgba(42, 33, 25, 0.045),
    0 12px 28px -10px rgba(42, 33, 25, 0.14),
    0 28px 56px -28px rgba(42, 33, 25, 0.18);
}

/* 頂部色條對應產品色（小綠瓶／小紅瓶／小藍瓶）。
   面積刻意壓到 3px —— 整塊色塊會與暖瓷白頁面打架，也會讓區塊變成色票表。
   註：選擇器特異性與上面的 .le-trio > .card 相同，靠「後者勝出」覆寫 border-top。 */
.le-trio > :nth-child(1) { border-top: 3px solid #008C64; }
.le-trio > :nth-child(2) { border-top: 3px solid #C7181E; }
.le-trio > :nth-child(3) { border-top: 3px solid #11459B; }
@media (max-width: 900px) { .le-trio { grid-template-columns: 1fr; } }

/* =============================================================
   產品卡跨語言對齊（2026-09-15）
   問題：不同語言的文字長度差異大，四張卡的標題／色標／虛線高低不一
        （英文 "Revitalising Hair Growth" 折兩行、日文色標折兩行）。
   工法：① 色標改單行、縮短日文標示（見 i18n）
        ② 用 CSS subgrid 讓四張卡共用列高 —— 這是唯一能在所有寬度、
           所有語言都對齊的解法；固定 min-height 只在特定斷點有效。
   降級：不支援 subgrid 的瀏覽器維持原有 flex 版面，不會破版。
   ============================================================= */

/* 色標一律單行（文字已縮短，確保不溢位） */
.le-pcard__en { white-space: nowrap; }

@supports (grid-template-rows: subgrid) {
  /* 四張卡共用 4 列：圖 / 標題＋色標 / 說明 / 規格 */
  .le-products {
    grid-template-rows: auto auto auto auto;
  }
  .le-pcard {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: 0;
  }
  /* 讓 h3 與 p 直接成為卡片的 grid item，才能吃到共用列高 */
  .le-pcard__body { display: contents; }

  /* 原本掛在 .le-pcard__body 的內距改由各列自己承擔。
     ⚠️ display:contents 只改變「box tree」，DOM 不變 ——
        選擇器仍須依原始 DOM 撰寫（h3/p/ul 的父層仍是 .le-pcard__body），
        寫成 .le-pcard > h3 不會命中，內距會整組消失。 */
  .le-pcard__body > h3 {
    display: flex;
    flex-direction: column;
    /* 原版面：card gap 12px ＋ body padding-top 24px = 36px */
    padding: calc(var(--sp-3) + var(--sp-5)) var(--sp-5) 0;
  }
  /* 色標推到該列底部 —— 標題行數不同也能對齊 */
  .le-pcard__body > h3 .le-pcard__en { margin-top: auto; }

  .le-pcard__body > p {
    padding: 0 var(--sp-5);
    margin-top: var(--sp-3);
  }
  .le-pcard__body > .le-pcard__specs {
    /* 保留原本的 padding-top —— 那是虛線與第一列規格文字的距離 */
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    margin-top: var(--sp-4);
    margin-bottom: 0;
  }
}