/* S263a M06 and M07: design D and P4 for every page that is not the home or the product page
   (docs/design/s262-migration-plan.md, section 3 and section 4 steps 6 to 9). Linked from the page
   body only (views/lib/pages-d.ts), so no other page fetches it and the shared first paint budget is
   untouched. Every rule is scoped through `:root:has(link.pd...)`, the link's own class naming the
   mode, so it outranks pages.css without a single !important. Colours, faces, easing, gutter and
   section rhythm are the shared tokens in page.css; nothing here names a colour of its own. The
   rules it replaces in pages.css leave in step 10. Type, spacing and component look only: no
   markup, text or behaviour is decided here. */

/* ------------------------------------------------------------ every mode --- */
:root:has(link.pd) .pg-head__in,
:root:has(link.pd) .pg-in {
  padding-inline: var(--gut);
}
:root:has(link.pd) .pg-head__in {
  padding-block: clamp(32px, 5vw, 72px) clamp(28px, 4vw, 56px);
}
:root:has(link.pd) .pg-head h1,
:root:has(link.pd) .pg-sec h1,
:root:has(link.pd) .pg-sec h2,
:root:has(link.pd) .pg-empty > h2,
:root:has(link.pd) .pg-empty > h1 {
  font-family: var(--sc-font-display);
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
  text-wrap: balance;
  overflow-wrap: break-word;
}
:root:has(link.pd) .pg-head h1,
:root:has(link.pd) .pg-sec h1 {
  font-size: var(--tv-fs-display);
  max-width: 18ch;
}
:root:has(link.pd) .pg-sec h2 {
  font-size: var(--tv-fs-section);
  max-width: 22ch;
  margin-block-end: 20px;
}
:root:has(link.pd) .pg-sec h3 {
  font: 600 1.125rem/1.3 var(--sc-font-text);
}
:root:has(link.pd) .pg-head__lede {
  color: var(--sc-ink-soft);
  font-size: 18px;
  line-height: 1.55;
  max-width: 34em;
  margin-block-start: 20px;
}
:root:has(link.pd) .pg-crumbs {
  font: 700 12px/1.2 var(--sc-font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-block-end: 20px;
}

/* the D button and link (home-d.css `.hd-btn`, `.hd-lnk`) on the shared classes */
:root:has(link.pd) main .tv-btn:not(.tv-btn--ghost, .tv-btn--outline, .tv-btn--wa) {
  /* S277 (S-13): the two sizes of page.css, 52 and 44, fixed */
  height: 52px;
  padding: 0 28px;
  background: var(--sc-accent);
  color: var(--tv-cta-ink);
  font: 700 16px/1.15 var(--sc-font-text);
  box-shadow: none;
  transition:
    transform 160ms var(--ease-out),
    background-color 160ms var(--ease-out);
}
:root:has(link.pd) main .tv-btn.tv-btn--sm {
  height: 44px;
  padding: 0 1.2rem;
}
:root:has(link.pd) main .tv-btn:active {
  transform: scale(0.97);
}
:root:has(link.pd)
  main
  .tv-btn:not(
    .tv-btn--ghost,
    .tv-btn--outline,
    .tv-btn--wa,
    .tv-btn--green,
    [aria-disabled='true']
  ):active {
  background: var(--tv-accent-hover);
}
:root:has(link.pd) main .tv-btn--ghost {
  min-height: 52px;
  font: 600 16px/1.15 var(--sc-font-text);
}
/* S277 (S-14): the outline button is the primary's size and weight */
:root:has(link.pd) main .tv-btn--outline {
  height: 52px;
  font: 700 16px/1.2 var(--sc-font-text);
}
:root:has(link.pd) main .tv-link {
  font-weight: 600;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}
:root:has(link.pd) main .tv-btn:focus-visible,
:root:has(link.pd) main .tv-link:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  :root:has(link.pd)
    main
    .tv-btn:not(.tv-btn--ghost, .tv-btn--outline, .tv-btn--wa, [aria-disabled='true']):hover {
    background: var(--tv-accent-hover);
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root:has(link.pd) main .tv-btn {
    transition: none;
  }
}

:root:has(link.pd) .pg-note {
  border-inline-start-width: 3px;
  border-radius: 0 var(--sc-r-md) var(--sc-r-md) 0;
}
:root:has(link.pd) .pg-table td,
:root:has(link.pd) .pg-table th {
  font-variant-numeric: tabular-nums;
}
:root:has(link.pd) .pg-table thead th,
:root:has(link.pd) .pg-table tbody th {
  font-family: var(--sc-font-text);
  font-weight: 600;
}
:root:has(link.pd) .pg-figure,
:root:has(link.pd) .pg-v2-fig,
:root:has(link.pd) .pd-step-pic {
  border-radius: var(--sc-r-lg);
  overflow: hidden;
}
:root:has(link.pd) .pd-step-pic {
  margin-block-start: var(--sc-6);
}
:root:has(link.pd) .pd-head-pic {
  max-width: 720px;
  margin-block-start: clamp(24px, 4vw, 40px);
  border-radius: var(--sc-r-lg);
}

/* ------------------------------------------------- shop: cart and checkout, P4 --- */
/* P4's headings: the same condensed face as every other page (S279, S-27), a tighter size. */
:root:has(link.pd-shop) .pg-head h1,
:root:has(link.pd-shop) .pg-sec h1,
:root:has(link.pd-shop) .pg-sec h2,
:root:has(link.pd-shop) .pg-empty > h2,
:root:has(link.pd-shop) .pg-empty > h1 {
  font-stretch: 62%; /* S279 (S-27): the condensed voice, no wide axis */
  line-height: 1;
  letter-spacing: 0;
}
:root:has(link.pd-shop) .pg-head h1,
:root:has(link.pd-shop) .pg-sec h1 {
  font-size: var(--tv-fs-section);
}
:root:has(link.pd-shop) .pg-sec h2,
:root:has(link.pd-shop) .pg-empty > h2 {
  font-size: var(--tv-fs-card);
}
:root:has(link.pd-shop) .pg-cartline__money,
:root:has(link.pd-shop) .pg-cartline__meta,
:root:has(link.pd-shop) .pg-summary,
:root:has(link.pd-shop) .pg-summary__row {
  font-family: var(--sc-font-text);
  font-variant-numeric: tabular-nums;
}
:root:has(link.pd-shop) .pg-cartline figure {
  border-radius: var(--sc-r-md);
  overflow: hidden;
}

/* --------------------------------------- operate: account, order, track, thanks --- */
/* D's quieter mode: the same headings one step smaller, nothing louder than the task. */
:root:has(link.pd-operate) .pg-head h1,
:root:has(link.pd-operate) .pg-sec h1 {
  font-size: var(--tv-fs-section);
}
:root:has(link.pd-operate) .pg-sec h2 {
  font-size: var(--tv-fs-24);
}
:root:has(link.pd-operate) .pg-summary__row,
:root:has(link.pd-operate) .pg-table {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------- read: guides, legal and info pages --- */
:root:has(link.pd-read) .pg-sec p,
:root:has(link.pd-read) .pg-sec li,
:root:has(link.pd-read) .pg-guia__body {
  font-size: var(--tv-fs-body);
  line-height: 1.6;
}
:root:has(link.pd-read) .pg-sec p {
  max-width: 40em;
}
:root:has(link.pd-read) .pg-sec h2 {
  font-size: var(--tv-fs-section);
  margin-block-start: 8px;
}
/* P4's square marker on a reading section's heading */
:root:has(link.pd-read) .pg-guia__body h2::before {
  content: '';
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-inline-end: 0.35em;
  vertical-align: 0.12em;
  background: var(--tv-accent-deep); /* S279: brick, orange is for buttons and the focus ring */
}

/* ---------------------------- section: guarantee, subscription, refills, how it works --- */
:root:has(link.pd-section) .pg-sec {
  padding-block: clamp(48px, 7vw, 96px);
}
:root:has(link.pd-section) .pg-sec--tight {
  padding-block: clamp(32px, 4.5vw, 56px);
}
:root:has(link.pd-section) .pg-sec h2 {
  font-size: var(--tv-fs-section);
}
:root:has(link.pd-section) .pg-card {
  border: 1px solid var(--tv-sage);
  border-radius: var(--sc-r-lg);
  box-shadow: none;
}

/* ------------------------------------------------ affiliate terms (D, read mode) --- */
:root:has(link.pd) .affiliate-terms {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 72px) var(--gut) var(--sec);
  font-family: var(--sc-font-text);
  font-size: var(--tv-fs-body);
  line-height: 1.6;
}
:root:has(link.pd) .affiliate-terms h1,
:root:has(link.pd) .affiliate-terms h2 {
  font-family: var(--sc-font-display);
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
  text-wrap: balance;
  overflow-wrap: break-word;
  margin: 0;
}
:root:has(link.pd) .affiliate-terms h1 {
  font-size: var(--tv-fs-display);
  max-width: 18ch;
}
:root:has(link.pd) .affiliate-terms h2 {
  font-size: var(--tv-fs-section);
  margin-block: 40px 16px;
}