/* ===== product detail page — shared components ===== */
/* Reuses deep.css variables + .dp-header/.dp-nav/.dp-split/.dp-kicker/
   .dp-h2/.dp-body/.dp-rule/.dp-accent-label/.dp-tagline/.dp-fact-box —
   this file only adds the components unique to detail pages. */

.dp-back-link { font-size: 13px; letter-spacing: .04em; color: var(--ink-3); }

/* ---- 3-col ratio/ingredient table (label / amount / role) ---- */
.dp-ratio-table { background: var(--white); padding: 32px; }
.dp-ratio-table__head { display: grid; grid-template-columns: 1.2fr 0.6fr 1.6fr; padding: 0 0 16px; border-bottom: 2px solid #3b2e26; }
.dp-ratio-table__head > div { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #3b2e26; }
.dp-ratio-table__row { display: grid; grid-template-columns: 1.2fr 0.6fr 1.6fr; align-items: center; border-bottom: 1px solid var(--line); padding: 20px 0; }
.dp-ratio-table__row > div:first-child { font-size: 15px; font-weight: 800; }
.dp-ratio-table__row > div:nth-child(2) { font-size: 15px; font-weight: 800; color: #8a6a4a; }
.dp-ratio-table__row > div:last-child { font-size: 13px; color: var(--ink-3); }

/* ---- small numbered single-line list (e.g. usage steps, no title/desc split) ---- */
.dp-numbered-line-list { display: flex; flex-direction: column; }
.dp-numbered-line { display: flex; align-items: flex-start; gap: 14px; border-top: 1px solid var(--line-2); padding: 10px 0; }
.dp-numbered-line__n {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: #3b2e26; color: var(--bg); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.dp-numbered-line__text { font-size: 14px; color: var(--ink-3); line-height: 1.5; }

/* ---- 2-col "way" comparison block (e.g. 2-way boosting ritual) ---- */
.dp-ways-section { width: 100%; padding: 100px 64px; background: var(--bg); }
.dp-ways-section__inner { max-width: 1300px; margin: 0 auto; }
.dp-ways-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 48px; }
.dp-way__label { font-size: 13px; letter-spacing: .06em; color: #8a6a4a; font-weight: 700; margin-bottom: 14px; }
.dp-way__title { font-size: 20px; font-weight: 800; line-height: 1.4; margin-bottom: 20px; }
.dp-way__desc { font-size: 11px; color: var(--ink-3); line-height: 1.8; margin-bottom: 24px; }
.dp-way__sub-title { font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.dp-way__list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.dp-way__list-item { font-size: 11px; color: var(--ink-3); line-height: 1.7; }

/* ---- hero tagline: full frame video + giant wordmark ---- */
.dp-hero-tagline { position: relative; height: 70vh; width: 100%; overflow: hidden; background: var(--ink); }
.dp-hero-tagline video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dp-hero-tagline__mark { position: absolute; left: 32px; top: 20px; font-size: 64px; font-weight: 300; line-height: 1; color: var(--white); z-index: 1; }
.dp-hero-tagline__sub { position: absolute; right: 32px; top: 24px; font-size: 10px; color: var(--white); text-align: right; z-index: 1; }
.dp-hero-tagline__panel { position: absolute; left: 0; bottom: 0; padding: 48px; max-width: 600px; z-index: 1; }
.dp-hero-tagline__kicker { font-size: 13px; letter-spacing: .12em; color: var(--white); font-weight: 700; margin-bottom: 16px; }
.dp-hero-tagline__title { font-size: 26px; font-weight: 300; line-height: 1.4; color: var(--white); margin-bottom: 20px; }
.dp-hero-tagline__body { font-size: 12px; color: var(--white); line-height: 1.8; margin-bottom: 20px; }
.dp-hero-tagline__quote { font-size: 14px; font-weight: 300; color: var(--white); }
.dp-hero-tagline__footer-label { position: absolute; right: 32px; bottom: 32px; font-size: 10px; color: var(--white); text-align: right; z-index: 1; }

/* ---- per-page size/weight overrides (opt-in, desktop only — mobile resets below) ---- */
.dp-hero-tagline__mark--xl { font-size: 98px; }
.dp-hero-tagline__mark--lg { font-size: 95px; }
.dp-hero-tagline__mark--md { font-size: 80px; }
.dp-hero-tagline__mark--sm { font-size: 60px; }
.dp-hero-tagline__title--bold { font-weight: 700; }
.dp-hero-tagline__title--xbold { font-weight: 800; }
.dp-hero-tagline__title--lg { font-size: 21px; }
.dp-hero-tagline__title--sm { font-size: 13px; }
.dp-hero-tagline__quote--lg { font-size: 12px; }
.dp-hero-tagline__quote--sm { font-size: 7px; }
.dp-hero-tagline__body--xs { font-size: 9px; }
.dp-hero-tagline__body--2xs { font-size: 6px; }
.dp-hero-tagline__kicker--sm { font-size: 11px; }
.dp-hero-tagline__kicker--xs { font-size: 7px; }
.dp-hero-tagline__kicker--md { font-size: 10px; }

/* ---- dark-text variant: desktop only — mobile already renders ink-colored text ---- */
.dp-hero-tagline--dark-text .dp-hero-tagline__mark,
.dp-hero-tagline--dark-text .dp-hero-tagline__sub,
.dp-hero-tagline--dark-text .dp-hero-tagline__kicker,
.dp-hero-tagline--dark-text .dp-hero-tagline__title,
.dp-hero-tagline--dark-text .dp-hero-tagline__body,
.dp-hero-tagline--dark-text .dp-hero-tagline__quote,
.dp-hero-tagline--dark-text .dp-hero-tagline__footer-label { color: var(--ink); }
.dp-hero-tagline__kicker--light { font-weight: 300; }
.dp-hero-tagline__body--sm { font-size: 11px; }

/* ---- boxed variant: only pages whose design uses black label-boxes opt in via this modifier ---- */
.dp-hero-tagline--boxed .dp-hero-tagline__mark { font-size: 72px; }
.dp-hero-tagline--boxed .dp-hero-tagline__mark.dp-hero-tagline__mark--lg { font-size: 95px; }
.dp-hero-tagline--boxed .dp-hero-tagline__mark span { display: inline-block; background: #111110; padding: 3px 10px; }
.dp-hero-tagline--boxed .dp-hero-tagline__kicker { display: inline-block; font-size: 11px; background: #111110; padding: 3px 10px; }
.dp-hero-tagline--boxed .dp-hero-tagline__title { display: inline-block; font-size: 21px; font-weight: 800; background: #111110; padding: 3px 10px; }
.dp-hero-tagline--boxed .dp-hero-tagline__quote { display: inline-block; font-size: 13px; background: #111110; padding: 3px 10px; }

/* ---- overview hero: reuses .dp-split/.dp-split__media/.dp-split__text
   directly (same 50/50 image+text pattern as every landing-page
   product section, already fully responsive) — these classes just
   add the price/CTA bar and product-name styling on top of that */
.dp-overview__eyebrow { font-size: 13px; letter-spacing: .12em; color: var(--ink-5); margin-bottom: 8px; }
.dp-overview__name { font-size: 30px; font-weight: 800; margin-bottom: 6px; }
.dp-overview__subtitle { font-size: 13px; color: #8a6a4a; font-weight: 700; letter-spacing: .04em; }
.dp-overview__headline { font-size: 19px; font-weight: 800; line-height: 1.4; margin: 20px 0; }
.dp-overview__cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ink); color: var(--bg); padding: 18px 24px; margin-top: 20px; }
.dp-overview__cta-label { font-size: 14px; font-weight: 600; white-space: nowrap; }
.dp-overview__cta-price { font-size: 16px; font-weight: 700; white-space: nowrap; }

/* ---- generic N-column card grid (5-point target care, usage order) ---- */
.dp-card-grid-section { width: 100%; padding: 100px 64px; background: var(--bg); }
.dp-card-grid-section--dark { background: #123524; color: var(--white); }
.dp-card-grid-section__inner { max-width: 1300px; margin: 0 auto; }
.dp-card-grid { display: grid; gap: 14px; margin-bottom: 44px; }
.dp-card-grid__item { padding: 24px 20px; background: var(--white); }
.dp-card-grid-section--dark .dp-card-grid__item { background: rgba(232,226,211,0.1); }
.dp-card-grid-section--dark .dp-card-grid__item-title,
.dp-card-grid-section--dark .dp-card-grid__item-desc { color: #E8E2D3; }
.dp-card-grid__item-title { font-size: 13px; font-weight: 800; margin-bottom: 12px; }
.dp-card-grid__item-desc { font-size: 11px; line-height: 1.7; }
.dp-card-grid--center { text-align: center; }
.dp-card-grid--center .dp-card-grid__item-title:empty { display: none; }
.dp-card-grid--white-cards .dp-card-grid__item { background: var(--white); color: var(--ink); }
.dp-card-grid--white-cards .dp-card-grid__item-desc { color: var(--ink-3); }

.dp-simple-compare--left .dp-simple-compare__head > div,
.dp-simple-compare--left .dp-simple-compare__row > div { text-align: left; }

/* ---- 3-col comparison variant (label / general / deep) — overrides
   the 4-col grid from .dp-comparison-row / .dp-comparison__head ---- */
.dp-comparison--3col .dp-comparison__head,
.dp-comparison--3col .dp-comparison-row { grid-template-columns: 1.2fr 1fr 1fr; }
.dp-comparison--3col .dp-comparison-row__label { text-align: left; }

/* ---- simple 2-col comparison (product-specific vs. general) ---- */
.dp-simple-compare__head { display: grid; grid-template-columns: 1.2fr 1fr; padding: 0 32px; margin-bottom: 16px; }
.dp-simple-compare__head > div { text-align: center; font-size: 15px; font-weight: 700; color: var(--ink-3); }
.dp-simple-compare__head > div:last-child { font-size: 17px; font-weight: 800; color: var(--ink); }
.dp-simple-compare__rows { display: flex; flex-direction: column; gap: 16px; }
.dp-simple-compare__row { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; padding: 22px 32px; background: var(--white); }
.dp-simple-compare__row > div { text-align: center; font-size: 12px; color: var(--ink-3); }
.dp-simple-compare__row > div:last-child { font-size: 13px; font-weight: 700; color: var(--ink); }

/* ---- numbered step list (reused for concept steps + usage steps) ---- */
.dp-step-list { display: flex; flex-direction: column; }
.dp-step { display: flex; gap: 20px; align-items: flex-start; border-top: 1px solid var(--line-2); padding: 22px 0; }
.dp-step__n {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #8a6a4a; color: #8a6a4a; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.dp-step__title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.dp-step__desc { font-size: 12px; color: var(--ink-3); line-height: 1.7; }

/* ---- who is it for: 2-col bordered list ---- */
.dp-whofor { width: 100%; padding: 100px 64px; background: var(--bg); }
.dp-whofor__inner { max-width: 1300px; margin: 0 auto; }
.dp-whofor__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
.dp-whofor__list { display: flex; flex-direction: column; gap: 6px; }
.dp-whofor__list .dp-whofor__item { border-top: none; padding: 0; }
.dp-whofor__item { border-top: 1px solid var(--line-2); padding: 20px 0; font-size: 13px; color: var(--ink-3); line-height: 1.7; }

/* ---- closing statement on dark bg ---- */
.dp-closing { position: relative; width: 100%; padding: 120px 64px; background: var(--ink); text-align: center; }
.dp-closing__inner { max-width: 760px; margin: 0 auto; }
.dp-closing__kicker { font-size: 13px; letter-spacing: .12em; color: #F3E9E4; font-weight: 700; margin-bottom: 28px; }
.dp-closing__title { font-size: 26px; font-weight: 800; line-height: 1.6; color: var(--white); margin-bottom: 32px; }
.dp-closing__sub { font-size: 14px; color: #F3E9E4; letter-spacing: .04em; margin-bottom: 28px; }
.dp-closing__name { font-size: 16px; font-weight: 800; color: var(--white); margin-bottom: 10px; }
.dp-closing__tags { font-size: 12px; color: #F3E9E4; letter-spacing: .04em; }

/* ---- plain full-bleed video, no text overlay ---- */
.dp-fullbleed-video { position: relative; height: 70vh; width: 100%; overflow: hidden; background: var(--ink); }
.dp-fullbleed-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- simple 2-col headline list (e.g. dual functional care) ---- */
.dp-dual { width: 100%; padding: 100px 64px; background: var(--white); }
.dp-dual__inner { max-width: 1300px; margin: 0 auto; }
.dp-dual__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; margin-top: 24px; }
.dp-dual__col-title { font-size: 15px; font-weight: 800; margin-bottom: 14px; }
.dp-dual__col-body { font-size: 12px; color: var(--ink-3); line-height: 1.9; }
.dp-dual__footer { margin-top: 40px; border-top: 1px solid var(--line-2); padding-top: 24px; font-size: 15px; font-weight: 700; }

/* ---- simple product-page footer ---- */
.dp-product-footer { width: 100%; background: var(--bg-alt); padding: 48px; text-align: center; font-size: 12px; color: var(--ink-5); }

/* ===== mobile ===== */
@media (max-width: 860px) {

  /* hero tagline: same stacked-video-then-text pattern used elsewhere
     — too much text to safely overlay a video with fixed offsets */
  .dp-hero-tagline { display: flex; flex-direction: column; height: auto; min-height: auto; background: var(--white); }
  .dp-hero-tagline video { position: relative; inset: auto; width: 100%; aspect-ratio: 1 / 1; }
  .dp-hero-tagline__mark,
  .dp-hero-tagline--boxed .dp-hero-tagline__mark,
  .dp-hero-tagline--boxed .dp-hero-tagline__mark.dp-hero-tagline__mark--lg,
  .dp-hero-tagline__mark--xl,
  .dp-hero-tagline__mark--lg,
  .dp-hero-tagline__mark--md,
  .dp-hero-tagline__mark--sm { position: static; font-size: 32px; padding: 5mm 24px 0; color: var(--ink); }
  .dp-hero-tagline__mark span,
  .dp-hero-tagline--boxed .dp-hero-tagline__mark span { background: transparent; padding: 0; }
  .dp-hero-tagline__mark { order: 1; }
  .dp-hero-tagline__panel { order: 2; position: static; max-width: 100%; padding: 12px 24px 32px; }
  .dp-hero-tagline__sub { order: 3; position: static; text-align: left; padding: 8px 24px 0; color: var(--ink-3); font-size: 11px; }
  .dp-hero-tagline__footer-label { order: 4; }
  .dp-hero-tagline__kicker, .dp-hero-tagline__title, .dp-hero-tagline__body, .dp-hero-tagline__quote,
  .dp-hero-tagline--boxed .dp-hero-tagline__kicker,
  .dp-hero-tagline--boxed .dp-hero-tagline__title,
  .dp-hero-tagline--boxed .dp-hero-tagline__quote { color: var(--ink); background: transparent; padding: 0; }
  .dp-hero-tagline--boxed .dp-hero-tagline__title,
  .dp-hero-tagline__title--bold,
  .dp-hero-tagline__title--xbold { font-weight: 300; }
  .dp-hero-tagline__kicker--light { font-weight: 700; }
  .dp-hero-tagline__kicker--sm,
  .dp-hero-tagline__kicker--xs,
  .dp-hero-tagline__kicker--md { font-size: 13px; }
  .dp-hero-tagline__title--lg,
  .dp-hero-tagline__title--sm { font-size: 26px; }
  .dp-hero-tagline__quote,
  .dp-hero-tagline--boxed .dp-hero-tagline__quote,
  .dp-hero-tagline__quote--lg,
  .dp-hero-tagline__quote--sm { font-size: 14px; }
  .dp-hero-tagline__body,
  .dp-hero-tagline__body--sm,
  .dp-hero-tagline__body--xs,
  .dp-hero-tagline__body--2xs { color: var(--ink-3); font-size: 12px; }
  .dp-hero-tagline__footer-label { position: static; text-align: left; padding: 0 24px 24px; color: var(--ink-3); }

  .dp-fullbleed-video { height: 40vh; }
  .dp-card-grid-section:not(.dp-card-grid-section--dark),
  .dp-ways-section, .dp-whofor, .dp-product-footer { background: var(--white); }
  .dp-card-grid-section { padding: 56px 24px; }
  .dp-card-grid { grid-template-columns: 1fr !important; }
  .dp-simple-compare__head, .dp-simple-compare__row { grid-template-columns: 1fr; text-align: left; gap: 6px; padding: 16px 20px; }
  .dp-comparison--3col .dp-comparison__head,
  .dp-comparison--3col .dp-comparison-row { grid-template-columns: 1fr !important; }
  .dp-ratio-table { padding: 20px; }
  .dp-ratio-table__head, .dp-ratio-table__row { grid-template-columns: 1fr; gap: 4px; }
  .dp-simple-compare__head { padding: 0; }
  .dp-simple-compare__head > div, .dp-simple-compare__row > div { text-align: left; }
  .dp-dual { padding: 56px 24px; }
  .dp-dual__grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 28px; }

  .dp-ways-section { padding: 56px 24px; }
  .dp-ways-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 40px; }

  .dp-whofor { padding: 56px 24px; }
  .dp-whofor__grid { grid-template-columns: 1fr; column-gap: 0; }

  .dp-closing { padding: 64px 24px; }
  .dp-closing__title { font-size: 22px; }
}