/* Editorial layer for shop and product pages — the approved home-page language
   (light display type, 1px rules, Latin numbering, image hover, footer wordmark). Loaded after pi.css and home.css. */

:root { --display-2: clamp(26px, 3.4vw, 52px); }

/* Header: same as home once scrolled */
.ed .site-header { background: rgba(255,255,255,.96); }
@supports (backdrop-filter: blur(8px)) { .ed .site-header { background: rgba(255,255,255,.84); backdrop-filter: blur(12px); } }

/* Eyebrow with a short rule, as in the hero */
.ed .eyebrow { display: flex; align-items: center; gap: 12px; }
.ed .eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--color-ink); flex: none; }

/* ---------- Section heads ---------- */
.ed .sec-head h2 { font-size: var(--display-2); font-weight: 300; line-height: 1.3; }
.ed .section { padding-block: clamp(56px, 8vw, 112px); }

/* ---------- Product top ---------- */
.ed .crumbs { padding-block: var(--s3); }
.ed .pdp-top { padding-bottom: clamp(56px, 8vw, 112px); }
.ed .pdp-title { font-size: clamp(30px, 3.4vw, 50px); font-weight: 300; line-height: 1.35; letter-spacing: -0.01em; }
.ed .pdp-title small { font-size: var(--text-lg); font-weight: 300; margin-top: 8px; }
.ed .answer { font-size: var(--text-base); line-height: 1.9; color: var(--color-ink-2); }
.ed .price { font-size: 28px; font-weight: 300; }
.ed .pdp-buy { gap: var(--s3); }
@media (min-width: 1024px) { .ed .pdp-buy { padding-top: var(--s2); } }

/* ---------- Story ---------- */
.ed .story { border-top: 1px solid var(--color-ink); }
.ed .ch-text { gap: var(--s3); }
.ed .ch-text > .caps:first-child { display: grid; gap: 10px; }
.ed .ch-no { justify-self: start; font-family: var(--font-en); font-size: clamp(44px, 5vw, 76px); font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--color-ink); }
.ed .ch-text h2 { font-size: clamp(28px, 3vw, 46px); font-weight: 300; line-height: 1.4; }
.ed .ch-text .prose { color: var(--color-ink-2); line-height: 1.95; }
.ed .ch-text .prose b { color: var(--color-ink); font-weight: 500; }
.ed .story-stage { background: #F3F2EF; }
.ed .panel { background: #F3F2EF; }
.ed .panel-big { font-weight: 300; }
.ed .ch-media { background: #F3F2EF; }

/* ---------- Cards (shop, related) ---------- */
.ed .cards { gap: var(--s5) var(--s2); }
@media (min-width: 1024px) { .ed .cards { grid-template-columns: repeat(4, 1fr); gap: var(--s5) var(--s3); } }
.ed .shop .cards { grid-template-columns: 1fr 1fr; }
@media (min-width: 1024px) { .ed .shop .cards { grid-template-columns: repeat(3, 1fr); } }
.ed .card a { gap: 4px; }
.ed .card .card-img { position: relative; background: #F3F2EF; }
.ed .card .card-img img { position: absolute; inset: 0; transition: opacity .5s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.ed .card .card-img img + img { opacity: 0; }
.ed .card a:hover .card-img img { opacity: 1; }
.ed .card a:hover .card-img img:first-child { transform: scale(1.03); }
.ed .card .caps { margin-top: 12px; }
.ed .card .c-name { font-size: var(--text-base); font-weight: 500; }
.ed .card .c-price { color: var(--color-ink-2); }
.ed .card .c-no { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 1; font-family: var(--font-en); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); }

/* ---------- Shop ---------- */
.ed .shop-head { padding-block: clamp(40px, 7vw, 96px) var(--s4); gap: var(--s3); }
.ed .shop-head h1 { font-size: clamp(36px, 5.6vw, 84px); font-weight: 300; line-height: 1.2; }
.ed .shop-head p { max-width: 46ch; font-size: var(--text-lg); font-weight: 300; }
.ed .shop .toc { top: 64px; }
.ed .shop .toc a { font-size: var(--text-base); }
.ed .group-head { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
@media (min-width: 900px) { .ed .group-head { grid-template-columns: 1fr auto; align-items: end; } }
.ed .group-head .count { font-family: var(--font-en); font-size: var(--text-sm); color: var(--color-ink-2); letter-spacing: var(--tracking-caps); }

/* ---------- Footer ---------- */
.ed .site-footer { margin-top: 0; }

/* Reveal */
.js .ed .rv, .js.ed .rv { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1 !important; transform: none !important; transition: none; } }

/* ---------- Learn pages: ingredient, concern, skin type, guide ---------- */
.l-hero { display: grid; gap: var(--s4); padding-block: clamp(32px, 6vw, 88px) clamp(48px, 7vw, 96px); border-bottom: 1px solid var(--color-ink); }
@media (min-width: 1024px) { .l-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5); align-items: end; } }
.l-hero__copy { display: grid; gap: var(--s3); }
.l-hero h1 { font-size: clamp(30px, 4.2vw, 62px); font-weight: 300; line-height: 1.35; letter-spacing: -0.01em; max-width: 20ch; }
.l-answer { font-size: var(--text-lg); font-weight: 300; line-height: 1.9; max-width: 60ch; }

.specimen { background: #F3F2EF; padding: var(--s4) var(--s3); display: grid; gap: var(--s3); align-self: stretch; align-content: space-between; min-height: 320px; }
.specimen__latin { font-size: clamp(34px, 3.8vw, 56px); font-weight: 300; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; text-align: left; }
.specimen dl { display: grid; grid-template-columns: auto 1fr; gap: 10px var(--s3); font-size: var(--text-sm); border-top: 1px solid var(--color-ink); padding-top: var(--s2); }
.specimen dt { padding-top: 3px; }
.l-inline { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.l-inline li { display: inline-flex; align-items: center; gap: 6px; }

.l-lead p { font-size: clamp(18px, 1.6vw, 22px); font-weight: 300; line-height: 2; color: var(--color-ink); max-width: 62ch; }
.l-pair { display: grid; gap: var(--s4); }
@media (min-width: 768px) { .l-pair { grid-template-columns: 1fr 1fr; } }
.l-pair .caps { margin-bottom: var(--s2); }
.bullets { list-style: none; display: grid; gap: 10px; }
.bullets li { display: flex; gap: 12px; }
.bullets li::before { content: ""; flex: none; width: 12px; height: 1px; background: var(--color-ink); margin-top: 0.95em; }
.bullets ul { list-style: none; display: grid; gap: 6px; margin-top: 8px; padding-inline-start: var(--s3); color: var(--color-ink-2); }

.l-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1); }
.l-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); border: 1px solid var(--color-ink); border-radius: var(--radius); text-decoration: none; font-size: var(--text-sm); }
.l-chips a:hover { background: var(--color-ink); color: var(--color-bg); }
/* product page → learn pages */
.p-learn { display: grid; gap: var(--s4); }
@media (min-width: 768px) { .p-learn { grid-template-columns: 1fr 1fr; } }
.p-learn h3 { font-size: var(--text-lg); font-weight: 400; margin: 4px 0 var(--s2); }

.l-causes { list-style: none; display: grid; border-top: 1px solid var(--color-line); }
.l-causes li { display: grid; grid-template-columns: 56px 1fr; gap: var(--s2); padding-block: var(--s3); border-bottom: 1px solid var(--color-line); }
.l-causes .n { font-size: 28px; font-weight: 300; line-height: 1.2; }
.l-causes p { font-size: var(--text-lg); font-weight: 300; line-height: 1.8; }

.l-routine { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .l-routine { grid-template-columns: 1fr 1fr; } }
.l-routine__col { background: #F3F2EF; padding: var(--s4) var(--s3); display: grid; gap: var(--s2); align-content: start; }
.l-routine__col h3 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 300; }
.l-prod { display: inline-block; margin-inline-start: 6px; font-size: var(--text-sm); }
.l-doctor li { border-inline-start-color: var(--color-ink); }

.l-tabs { border-bottom: 1px solid var(--color-line); }
.l-tabs ul { list-style: none; display: flex; gap: var(--s3); overflow-x: auto; scrollbar-width: none; padding-block: 12px; }
.l-tabs a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; padding-bottom: 4px; }
.l-tabs a[aria-current] { color: var(--color-ink); border-bottom: 1px solid var(--color-ink); }
.l-tabs .fn { height: 14px; }
.l-fnbar { display: block; height: 4px; width: 120px; background: var(--fn); margin-top: -2px; }

.byline { display: grid; gap: var(--s4); }
.sources { display: grid; gap: 8px; font-size: var(--text-sm); padding-inline-start: 1.2em; direction: ltr; text-align: left; }
.sources a { color: var(--color-ink-2); word-break: break-all; }

/* Guide (article) */
.g-head { display: grid; gap: var(--s3); padding-block: clamp(32px, 6vw, 88px) var(--s4); max-width: 980px; }
.g-head h1 { font-size: clamp(30px, 4.4vw, 64px); font-weight: 300; line-height: 1.35; }
.g-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--text-sm); color: var(--color-ink-2); }
.g-meta span + span::before { content: "·"; margin-inline-end: var(--s3); color: var(--color-ink-3); }
.g-grid { display: grid; gap: var(--s4); border-top: 1px solid var(--color-ink); padding-top: var(--s4); }
@media (min-width: 1024px) { .g-grid { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s6); } .g-toc { position: sticky; top: 100px; align-self: start; } }
.g-toc ol { list-style: none; display: grid; gap: 10px; margin-top: var(--s2); counter-reset: t; font-size: var(--text-sm); }
.g-toc li { counter-increment: t; display: flex; gap: 10px; }
.g-toc li::before { content: "0" counter(t); color: var(--color-ink-3); font-size: var(--text-xs); padding-top: 3px; }
.g-toc a { text-decoration: none; color: var(--color-ink-2); }
.g-toc a:hover { color: var(--color-ink); }
.g-body { max-width: 720px; font-size: 17px; line-height: 2; }
.g-body > * + * { margin-top: var(--s3); }
.g-body h2 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; line-height: 1.5; margin-top: var(--s5); scroll-margin-top: 100px; }
.g-body h3 { font-size: var(--text-lg); font-weight: 500; margin-top: var(--s4); }
.g-body p { color: var(--color-ink); }
.g-body a { text-decoration-thickness: 1px; }
.g-body .steps li::before { padding-top: 6px; }
.g-body .compare { font-size: var(--text-sm); }
.g-summary { background: #F3F2EF; padding: var(--s3); display: grid; gap: var(--s1); border-inline-start: 2px solid var(--color-ink); }
.g-summary p:last-child { font-size: var(--text-base); line-height: 1.9; }

/* Index pages */
.l-index .is-soon { display: grid; grid-template-columns: 48px 1fr auto; align-items: baseline; gap: var(--s2); padding-block: 22px; border-bottom: 1px solid var(--color-line); color: var(--color-ink-3); }
@media (min-width: 900px) { .l-index .is-soon { grid-template-columns: 64px 1fr 260px 120px; } .l-index .is-soon .en { grid-column: 3; grid-row: 1; } .l-index .is-soon .go { grid-column: 4; } }
@media (max-width: 899px) { .l-index .is-soon .en { grid-column: 2; } .l-index .is-soon .go { grid-column: 3; grid-row: 1; } }
.l-index .soon { font-size: var(--text-xs); }
.l-index .is-soon .t { font-size: clamp(22px, 2.6vw, 38px); font-weight: 300; line-height: 1.3; }
.l-index .is-soon .en { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.g-body .steps { gap: var(--s2); }
.g-body .steps li { display: block; position: relative; padding-inline-start: 48px; }
.g-body .steps li::before { position: absolute; inset-inline-start: 0; top: 0; }
.g-body .steps ul { list-style: none; display: grid; gap: 6px; margin-top: 8px; color: var(--color-ink-2); }
.g-body .steps ul li { padding-inline-start: 22px; }
.g-body .steps ul li::before { content: ""; width: 12px; height: 1px; background: var(--color-ink); top: 1em; padding: 0; }