/**
 * Article chapters (Kajal, 2026-09-18, look D): Kunskapscenter articles in La Roche-Posay's scroll order
 * (laroche-posay.se "Känslig hud"), in the site's own design — bone / espresso / konjak, Jost + Karla, the glass
 * card, the blush seek-care layer. Loaded on articles only (single.php); markup from inc/render-article-story.php.
 *
 * Order: photo at the top (a sharp banner) → title → one line with the clock (reading time | date) → the intro →
 * the chapter list (their numbered index; ours with each chapter's icon — no numbers, no eyebrow) → the chapters
 * (icon above the heading, where their number sits) → the service card (their product range; ours the service,
 * never a medicine) → "Varför Provitalia" (their four photo tiles; ours the site's four pillars as glass tiles —
 * Kajal rejected photo-background cards) → sources, note → more articles → the breadcrumb at the foot.
 */

.pv-article-story {
	--pvd-ink: #2a251f;
	--pvd-body: #514840;
	--pvd-muted: #6a5f53;
	--pvd-konjak: #c88a4e;
	--pvd-rose: rgb(168 92 82);
	--pvd-blush: rgb(241 228 218);
	--pvd-rule: rgb(42 37 31 / 10%);
	--pvd-hairline: linear-gradient(90deg, rgb(200 138 78 / 0%) 4%, rgb(200 138 78 / 65%) 38%, rgb(220 167 110 / 80%) 55%, rgb(200 138 78 / 0%) 96%);
}

/* ---- Photo at the top: a wide banner with a sharp edge, the title right under it (La Roche-Posay) ---- */
.pv-article-story #dc-root main { padding-top: 0 !important; }
.pv-article-story .pvd-hero { margin: 0; }
.pv-article-story .pvd-hero img { display: block; width: 100%; height: clamp(240px, 31vw, 460px); object-fit: cover; object-position: 50% 35%; }
@media (max-width: 760px) {
	.pv-article-story .pvd-hero img { height: 92vw; min-height: 300px; max-height: 420px; }
}

/* ---- Title block: title, one line with the clock (reading time | date), the intro — no eyebrow ---- */
.pv-article-story #dc-root article > header { text-align: left !important; }
/* The site header's konjak hairline (mirror.css: header::after) also matched the article's own <header>; with no
   positioned parent it floated at one window height down the page, across the text. Only the site header keeps it. */
.pv-article-story #dc-root article > header::after { content: none !important; }
.pv-article-story #dc-root article > header > div { align-items: flex-start !important; text-align: left !important; width: 100% !important; max-width: 720px !important; margin-inline: auto; }
.pv-article-story #dc-root article > header h1 { text-align: left !important; font-size: clamp(40px, 6.4vw, 60px) !important; line-height: 1.05 !important; margin: 0 !important; }
.pv-article-story #dc-root article > header .pvd-meta { display: flex; align-items: center; gap: 10px; margin: 18px 0 0 !important; font-size: 15px; line-height: 1.4; color: var(--pvd-muted); text-align: left !important; }
.pv-article-story #dc-root article > header .pvd-meta svg { flex: none; width: 20px; height: 20px; color: var(--pvd-konjak); }
.pv-article-story .pvd-meta-bar { width: 1px; height: 14px; background: rgb(42 37 31 / 30%); }
.pv-article-story #dc-root article > header .pvd-intro { margin: 18px 0 0 !important; max-width: 720px !important; font-family: inherit !important; font-size: 17px !important; line-height: 1.65 !important; color: var(--pvd-body) !important; text-align: left !important; text-wrap: pretty !important; }
.pv-article-story #dc-root article > header { padding-bottom: 18px !important; }

/* ---- The short answer: plain intro text, as their introduction (no box, no larger type) ---- */
.pv-article-story #dc-root .art-body .pvd-lead { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 18px !important; }
.pv-article-story #dc-root .art-body .pvd-lead::before { display: none !important; }
.pv-article-story #dc-root .art-body .pvd-lead p { font-family: inherit !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.65 !important; color: var(--pvd-body) !important; text-wrap: pretty !important; max-width: none !important; }

/* The intro reads as the body text below it (16px on phones, 17px from 761px — the site's article paragraph). */
@media (max-width: 760px) {
	.pv-article-story #dc-root article > header .pvd-intro,
	.pv-article-story #dc-root .art-body .pvd-lead p { font-size: 16px !important; }
}

/* ---- Icon discs (konjak tint; rose on seek care) ---- */
.pv-article-story .pvd-disc { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 999px; background: rgb(200 138 78 / 16%); color: var(--pvd-konjak); }
.pv-article-story .pvd-disc svg { width: 22px; height: 22px; }
.pv-article-story .pvd-disc--small { width: 36px; height: 36px; }

/* ---- "I den här artikeln" ---- */
.pv-article-story #dc-root .art-body .pvd-chapters { margin: 44px 0 20px; }
.pv-article-story #dc-root .art-body .pvd-chapters ul { gap: 0 !important; margin: 0 !important; border-bottom: 1px solid var(--pvd-rule); }
.pv-article-story #dc-root .art-body .pvd-chapters li { padding: 0 !important; border-top: 1px solid var(--pvd-rule); }
.pv-article-story #dc-root .art-body .pvd-chapters li::before { display: none !important; }
.pv-article-story #dc-root .art-body .pvd-chapters a { display: flex; align-items: center; gap: 16px; padding: 14px 0; color: var(--pvd-ink) !important; text-decoration: none !important; font-family: Jost, Futura, sans-serif; font-size: 18px; line-height: 1.3; }

/* ---- Chapters: the icon above the heading, calm gaps ---- */
.pv-article-story #dc-root .art-body .pvd-chapter { margin-top: 64px !important; }
.pv-article-story #dc-root .art-body .pvd-chapter > h2 { display: flex !important; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0 0 16px !important; font-family: Jost, Futura, sans-serif !important; font-weight: 400 !important; font-size: clamp(27px, 3.6vw, 34px) !important; }
.pv-article-story #dc-root .art-body .pvd-chapter > h2::after { display: none !important; }
.pv-article-story #dc-root .art-body h3 { font-size: 13px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--pvd-konjak) !important; font-weight: 600 !important; }

/* No numbers in the chapters: ordered lists get plain circles (the sources keep theirs). */
.pv-article-story #dc-root .art-body .pvd-chapter ol > li { padding-left: 24px !important; }
.pv-article-story #dc-root .art-body .pvd-chapter ol > li::before { content: "" !important; top: .62em !important; left: 4px !important; width: 9px !important; height: 9px !important; border: 1.5px solid var(--pvd-konjak) !important; background: none !important; box-sizing: border-box; }

/* ---- Seek care: the blush layer, hollow rose rings (never filled — a filled mark reads as "you have this") ---- */
.pv-article-story #dc-root .art-body .pva-sec--care { background: var(--pvd-blush); border-radius: 26px; padding: 28px 24px 16px !important; }
.pv-article-story #dc-root .art-body .pva-sec--care > h2 .pvd-disc { background: rgb(214 160 150 / 24%); color: var(--pvd-rose); }
.pv-article-story #dc-root .art-body ul.pva-signs { gap: 0 !important; }
.pv-article-story #dc-root .art-body ul.pva-signs > li { border-top: 1px solid rgb(168 92 82 / 22%); padding: 12px 0 12px 28px !important; color: var(--pvd-ink) !important; }
.pv-article-story #dc-root .art-body ul.pva-signs > li::before { top: 21px !important; width: 11px !important; height: 11px !important; background: none !important; border: 1.5px solid var(--pvd-rose); box-sizing: border-box; }

/* ---- Questions and sources: closed rows, a plus that turns ---- */
.pv-article-story details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; }
.pv-article-story details > summary::-webkit-details-marker { display: none; }
.pv-article-story details > summary:focus-visible { outline: 2px solid var(--pvd-konjak); outline-offset: 4px; border-radius: 8px; }
.pv-article-story .pva-plus { margin-left: auto; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgb(200 138 78 / 45%); color: var(--pvd-konjak); transition: transform .25s ease; }
.pv-article-story .pva-plus svg { width: 16px; height: 16px; }
.pv-article-story details[open] > summary .pva-plus { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .pv-article-story .pva-plus { transition: none; } }
.pv-article-story .pva-faq { border-bottom: 1px solid var(--pvd-rule); }
.pv-article-story .pva-q { border-top: 1px solid var(--pvd-rule); }
.pv-article-story .pva-q > summary { padding: 16px 0; font-family: Jost, Futura, sans-serif; font-size: 19px; line-height: 1.35; color: var(--pvd-ink); }
.pv-article-story .pva-ans { padding: 0 0 8px; }
.pv-article-story #dc-root .art-body .pva-sources { margin-top: 56px; border-top: 1px solid var(--pvd-rule); border-bottom: 1px solid var(--pvd-rule); }
.pv-article-story .pva-sources > summary { padding: 14px 0; font-family: Jost, Futura, sans-serif; font-size: 19px; color: var(--pvd-ink); }
.pv-article-story .pva-sources ol { margin-top: 6px !important; }
.pv-article-story #dc-root .art-body .pva-sources ol > li { font-size: 14.5px !important; }
.pv-article-story .pva-count { color: var(--pvd-muted); font-size: 14px; }

/* ---- Two-weight headings (their "VI HAR EN / SERIE ÄVEN FÖR DET"; ours Jost light + regular) ---- */
.pv-article-story #dc-root .art-body h2.pvd-two { display: grid !important; margin: 0 0 14px !important; font-family: Jost, Futura, sans-serif !important; font-size: clamp(30px, 4.2vw, 40px) !important; line-height: 1.1 !important; font-weight: 300 !important; }
.pv-article-story #dc-root .art-body h2.pvd-two span + span { font-weight: 500; }
.pv-article-story #dc-root .art-body h2.pvd-two::after { display: none !important; }

/* ---- The service card: the dark card with the konjak hairline ---- */
.pv-article-story #dc-root .art-body .pvd-service { position: relative; display: grid; gap: 22px; margin: 80px 0 0 !important; padding: 30px 24px !important; border-radius: 26px; background: #2a251f; }
.pv-article-story #dc-root .art-body .pvd-service::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--pvd-hairline); }
.pv-article-story #dc-root .art-body .pvd-service h2.pvd-two { color: #f5efe5 !important; }
.pv-article-story #dc-root .art-body .pvd-service p { color: rgb(245 239 229 / 78%) !important; text-wrap: pretty; }
.pv-article-story #dc-root .art-body a.pvd-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; border-radius: 999px; background: var(--pvd-konjak); color: #2a251f !important; text-decoration: none !important; font-weight: 500; }
.pv-article-story #dc-root .art-body a.pvd-btn:focus-visible { outline: 2px solid #f5efe5; outline-offset: 3px; }
.pv-article-story .pvd-service-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
@media (min-width: 900px) {
	.pv-article-story #dc-root .art-body .pvd-service { grid-template-columns: 1.1fr 1fr; align-items: center; padding: 36px !important; }
}

/* ---- "Varför Provitalia": four glass tiles ---- */
.pv-article-story #dc-root .art-body .pvd-why { margin: 80px 0 0 !important; padding: 0 !important; }
.pv-article-story #dc-root .art-body .pvd-why ul { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px !important; margin: 18px 0 0 !important; }
/* Phones: one pillar per row (Kajal, 2026-09-18). */
@media (max-width: 760px) {
	.pv-article-story #dc-root .art-body .pvd-why ul { grid-template-columns: 1fr; }
}
.pv-article-story #dc-root .art-body .pvd-why li { position: relative; display: grid; align-content: start; gap: 8px; padding: 20px 16px !important; border: 1px solid rgb(255 255 255 / 72%); border-radius: 20px; background: rgb(245 239 229 / 62%); box-shadow: 0 14px 32px -24px rgb(42 37 31 / 30%); }
.pv-article-story #dc-root .art-body .pvd-why li::before { content: "" !important; position: absolute; top: 0 !important; left: 0 !important; right: 0; width: auto !important; height: 1px !important; border-radius: 0 !important; background: var(--pvd-hairline) !important; }
.pv-article-story #dc-root .art-body .pvd-why strong { font-family: Jost, Futura, sans-serif; font-weight: 500; font-size: 17px; color: var(--pvd-ink); line-height: 1.25; }
.pv-article-story #dc-root .art-body .pvd-why li p { font-size: 14px !important; line-height: 1.55 !important; margin: 0 !important; text-wrap: pretty !important; max-width: none !important; }
@media (min-width: 900px) {
	.pv-article-story #dc-root .art-body .pvd-why ul { grid-template-columns: repeat(4, 1fr); }
}

/* ---- The general note: small, no box ---- */
.pv-article-story #dc-root .art-body .pva-note { margin-top: 28px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.pv-article-story #dc-root .art-body .pva-note::before,
.pv-article-story #dc-root .art-body .pva-note svg { display: none !important; }
.pv-article-story #dc-root .art-body .pva-note p { font-size: 14px !important; color: var(--pvd-muted) !important; }

/* ---- The breadcrumb right under the photo (Kajal, 2026-09-18), words and slashes on one line ---- */
.pv-article-story #dc-root main section.pvd-crumbs { padding-top: 22px !important; padding-bottom: 0 !important; }
.pv-article-story .pvd-crumbs nav { justify-content: flex-start !important; align-items: center !important; flex-wrap: wrap; row-gap: 4px; width: 100%;
	max-width: 720px !important;
	margin: 0 auto !important; padding-inline: 0 !important; }
.pv-article-story .pvd-crumbs nav > * {
	display: inline-flex !important;
	align-items: center;
	line-height: 1.4 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
/* The site's links are taller (tap room) with their words at the top; centred, words and slashes share one line. */
.pv-article-story .pvd-crumbs nav > a { min-height: 32px; }
.pv-article-story .pvd-crumbs nav > span { min-height: 32px; }
.pv-article-story #dc-root article > header { padding-top: 18px !important; }
@media (max-width: 760px) {
	/* One line on phones: the page's own title is the heading right below, so the last step is left out. */
	.pv-article-story .pvd-crumbs nav { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
	.pv-article-story .pvd-crumbs nav > [aria-current="page"],
	.pv-article-story .pvd-crumbs nav > span[aria-hidden="true"]:nth-last-child(2) { display: none !important; }
}

/* ---- Every paragraph uses its column's full width (the site caps article paragraphs at a line length) ---- */
.pv-article-story #dc-root .art-body p { max-width: none !important; }

/* ---- Text runs to the column's edge (Kajal, 2026-09-18: on phones the text looked narrower than the page). The
   site balances short paragraphs (text-wrap: balance), which evens all lines out and leaves them far from the right
   edge — on a phone 32 of 51 blocks used under 90 % of the width. "pretty" fills the lines and still keeps a lone
   word off the last line. ---- */
.pv-article-story #dc-root main p,
.pv-article-story #dc-root main li,
.pv-article-story #dc-root main summary { text-wrap: pretty !important; }

/* ---- Wide screens (Kajal's La Roche-Posay screenshots, 2026-09-18): one content width for everything — about
   860px, centred, like theirs (~850px) — the title, the date line and the intro run across all of it; below them
   the chapter list and the chapters share it in two columns with a wide gap, and the list stays in place a good
   distance under the menu bar while the chapters scroll; the current chapter lights up (js/article-story.js).
   Phones keep the list once, above the chapters. ---- */
@media (min-width: 1000px) {
	.pv-article-story #dc-root article > section.col > div,
	.pv-article-story #dc-root article > header > div,
	.pv-article-story .pvd-crumbs nav { max-width: 860px !important; }
	/* From 1200px the old layout made this a grid (text 720px + 160px for the old contents list, shifted by
	   calc(50% - 360px)); it gives way to one centred column. */
	.pv-article-story #dc-root article > section.col > div { display: block !important; width: 100%; margin-inline: auto !important; }
	.pv-article-story #dc-root article > header h1,
	.pv-article-story #dc-root article > header p,
	.pv-article-story #dc-root article > header .pvd-intro,
	.pv-article-story #dc-root .art-body > p,
	.pv-article-story #dc-root .art-body > .pvd-lead,
	.pv-article-story #dc-root .art-body > .pva-note { max-width: none !important; }
	.pv-article-story #dc-root article > header h1,
	.pv-article-story #dc-root article > header p { margin-left: 0 !important; margin-right: auto !important; }

	.pv-article-story #dc-root .art-body .pvd-read { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 88px; align-items: start; margin-top: 56px; }
	.pv-article-story .pvd-read-side { position: sticky; top: 141px; max-height: calc(100vh - 161px); overflow-y: auto; scrollbar-width: none; }
	.pv-article-story #dc-root .art-body .pvd-read .pvd-chapters { margin: 0 !important; }
	.pv-article-story #dc-root .art-body .pvd-read-main > .pvd-chapter:first-child { margin-top: 0 !important; }

	/* The side list: quiet rows, the current chapter lit — its disc filled konjak, its name dark. */
	.pv-article-story #dc-root .art-body .pvd-read .pvd-chapters ul { border-bottom: 0; }
	.pv-article-story #dc-root .art-body .pvd-read .pvd-chapters li { border-top: 0; }
	.pv-article-story #dc-root .art-body .pvd-read .pvd-chapters a { gap: 12px; padding: 7px 0; font-size: 15.5px; line-height: 1.3; color: var(--pvd-muted) !important; transition: color .2s ease; }
	.pv-article-story .pvd-read .pvd-chapters .pvd-disc { width: 34px; height: 34px; background: transparent; border: 1px solid rgb(200 138 78 / 38%); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
	.pv-article-story .pvd-read .pvd-chapters .pvd-disc svg { width: 17px; height: 17px; }
	.pv-article-story #dc-root .art-body .pvd-read .pvd-chapters a:hover,
	.pv-article-story #dc-root .art-body .pvd-read .pvd-chapters a.is-current { color: var(--pvd-ink) !important; }
	.pv-article-story #dc-root .art-body .pvd-read .pvd-chapters a.is-current { font-weight: 500; }
	.pv-article-story .pvd-read .pvd-chapters a.is-current .pvd-disc { background: var(--pvd-konjak); border-color: var(--pvd-konjak); color: #f5efe5; }
}
/* ---- From 1024px (the menu bar shows its items): the content spans exactly from the first menu item's left edge
   to the last one's right edge (Kajal, 2026-09-18), measured by js/article-story.js into --pvd-edge-l/-r; without
   the script it is centred at the menu row's usual width. ---- */
@media (min-width: 1024px) {
	.pv-article-story #dc-root article > header.col,
	.pv-article-story #dc-root article > section.col,
	.pv-article-story #dc-root main section.pvd-crumbs,
	.pv-article-story #dc-root main section.pv-art-more {
		max-width: none !important;
		margin-inline: 0 !important;
		padding-left: var(--pvd-edge-l, max(40px, calc(50% - 535px))) !important;
		padding-right: var(--pvd-edge-r, max(40px, calc(50% - 535px))) !important;
	}
	.pv-article-story #dc-root article > header > div,
	.pv-article-story #dc-root article > section.col > div,
	.pv-article-story .pvd-crumbs nav { max-width: none !important; width: 100% !important; margin-inline: 0 !important; }
}
@media (min-width: 1000px) and (prefers-reduced-motion: reduce) {
	.pv-article-story #dc-root .art-body .pvd-read .pvd-chapters a,
	.pv-article-story .pvd-read .pvd-chapters .pvd-disc { transition: none; }
}

/* ---- Text pages in the article design (page-legal-story.php; Kajal, 2026-09-23: Allmänna villkor, Cookiepolicy,
   Tillgänglighet, Integritet). No photo: the breadcrumb row sits right under the menu bar and the title follows it as
   on the article. The crumb is two steps, "Hem / <page>", which fit a phone line — so the page's own step stays on
   phones (the article hides its last step there). The chapters keep the article's look; a hand-styled box in the
   page reads as the site's info box (mirror.css .pv-infobox). ---- */
/* A table wider than its column (the policy's overview) scrolls inside its own box; the page never scrolls sideways.
   The column and the reading block are flex/grid items that would otherwise grow to the table's width, so they may
   shrink (min-width: 0). */
.pv-legal-story #dc-root article > section.col > div,
.pv-legal-story #dc-root .art-body,
.pv-legal-story #dc-root .art-body .pvd-read,
.pv-legal-story #dc-root .art-body .pvd-read-main,
.pv-legal-story #dc-root .art-body .pvd-chapter { min-width: 0; }
.pv-legal-story #dc-root .art-body .pvl-table { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 18px; contain: inline-size; }
.pv-legal-story #dc-root .art-body .pvl-table table { margin: 0; }
/* The cells may wrap (the site's table rule keeps them on one line, which makes the table's smallest width 720px). */
.pv-legal-story #dc-root .art-body .pvl-table th,
.pv-legal-story #dc-root .art-body .pvl-table td { white-space: normal; min-width: 9em; }
/* Kajal's pick B (2026-09-24): a table with a header row becomes rows that fold out — the row's name is the title,
   the column names label its fields, every word stays, all rows start closed. The plus and the closed/open motion are
   the article's (.pva-plus, details > summary above). Labels sit above their text on phones, beside it from 761px. */
.pv-legal-story #dc-root .art-body .pvl-rows { margin: 0 0 18px; border-bottom: 1px solid var(--pvd-rule); }
.pv-legal-story #dc-root .art-body .pvl-row { display: block; border-top: 1px solid var(--pvd-rule); }
.pv-legal-story #dc-root .art-body .pvl-row > summary { width: 100%; box-sizing: border-box; padding: 16px 0; font-family: Jost, Futura, sans-serif; font-size: 19px; line-height: 1.35; color: var(--pvd-ink); }
.pv-legal-story #dc-root .art-body .pvl-row-body { padding: 0 0 12px; }
.pv-legal-story #dc-root .art-body .pvl-field { display: grid; gap: 3px; padding: 12px 0; border-top: 1px solid var(--pvd-rule); }
.pv-legal-story #dc-root .art-body .pvl-field:first-child { border-top: 0; padding-top: 0; }
.pv-legal-story #dc-root .art-body .pvl-label { font-size: 13px; line-height: 1.4; color: var(--pvd-muted); }
.pv-legal-story #dc-root .art-body .pvl-value { font-size: 15px; line-height: 1.6; color: var(--pvd-body); text-wrap: pretty; }
@media (min-width: 761px) {
	.pv-legal-story #dc-root .art-body .pvl-field { grid-template-columns: 11em minmax(0, 1fr); gap: 18px; }
	.pv-legal-story #dc-root .art-body .pvl-label { padding-top: 2px; }
}
@media (max-width: 760px) {
	.pv-legal-story .pvd-crumbs nav > [aria-current="page"],
	.pv-legal-story .pvd-crumbs nav > span[aria-hidden="true"]:nth-last-child(2) { display: inline-flex !important; }
}
.pv-legal-story #dc-root .art-body .pv-infobox { margin: 0 0 28px !important; }
.pv-legal-story #dc-root .art-body .pv-infobox p { margin: 0 !important; }