/* KCJ page typography and rhythm.
   Load after legacy component sheets. This is an unlayered migration boundary:
   unlayered legacy CSS would outrank normal declarations inside @layer.
   Families select tokens; components select roles. New components should use
   page-title, section-title, card-title, page-intro and reading-copy directly.
   No viewport-specific heading replacements, fixed text heights or !important. */
:root {
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --page-gutter: 1rem;
  --page-max: 85rem;
  --reading-max: 65ch;
  --type-body: 1rem;
  --type-compact: .875rem;
  --type-meta: .75rem;
  --type-card: clamp(1rem, .9rem + .5vw, 1.25rem);
  --type-section: clamp(1.25rem, 1.1rem + .75vw, 1.75rem);
  --section-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  --page-header-gap: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --card-inset: clamp(1rem, .85rem + .75vw, 1.5rem);
}
@media (min-width:37.5rem) { :root { --page-gutter: 1.5rem; } }
@media (min-width:64rem) { :root { --page-gutter: 2rem; } }

/* One outer edge for navigation, page headings, grids and footer. A nested
   container keeps its parent's edge instead of subtracting the gutter twice. */
:is(#header,#main,#footer) .container {
  width: min(var(--page-max), calc(100% - var(--page-gutter) * 2));
  margin-inline: auto;
  min-width: 0;
}
#main .container .container { width: 100%; }

#main[data-page-family] {
  --type-page: clamp(1.5rem, 1.35rem + .75vw, 2rem);
  font-size: var(--type-body);
  line-height: 1.6;
  overflow-wrap: break-word;
}
#main[data-page-family="campaign"] {
  --type-page: clamp(1.625rem, 1.25rem + 1.875vw, 2.75rem);
  --type-section: clamp(1.25rem, 1rem + 1.25vw, 2rem);
}
#main[data-page-family="catalog"] {
  --type-page: clamp(1.625rem, 1.4rem + 1.125vw, 2.25rem);
}
#main[data-page-family="editorial"] {
  --type-page: clamp(1.625rem, 1.3rem + 1.625vw, 2.5rem);
  --type-section: clamp(1.25rem, 1rem + 1.25vw, 2rem);
}
/* Product, service and tool families use the compact default. */

/* Heading semantics and visual roles are separate. The carousel's alternate
   heading is an H2 semantically but shares the campaign page-title role. */
#main[data-page-family] :is(h1,.page-title,.account-entry-copy > h2),
#main[data-page-family] .home-hero-carousel .hero-copy :is(h1,h2.home-hero-title) {
  font-size: var(--type-page);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin-block: 0 var(--space-3);
  max-width: 100%;
  min-width: 0;
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: none;
}
#main[data-page-family] :is(h2,.section-title) {
  font-size: var(--type-section);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.02em;
  margin-block: 0 var(--space-3);
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
  text-wrap: pretty;
}
#main[data-page-family] :is(h3,.card-title) {
  font-size: var(--type-card);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -.01em;
  margin-block: 0 var(--space-2);
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}
#main[data-page-family] :is(
  .editorial-story h2,.editorial-tile h2,.info-card h2,.brand-card h2,.origin-card h2,
  .concern-tile h2,.routine-step-title h2,.customer-contact-intro h2,
  .secure-payment-panel h2,.shop-promo h2,.texture-discovery-card h3,
  .customer-hub-grid h3,.product-care-card h3,.discovery-spotlights h3,
  .discovery-trend-tile h3,.origin-start-note h2,.origin-guidance h2,
  .origin-brand-section h2,.origin-product-types h2,.concern-pathways h2,
  .editorial-destinations h3,.editorial-steps h3
) {
  font-size: var(--type-card);
  line-height: 1.4;
  margin-block: 0 var(--space-2);
}
#main[data-page-family] :is(.summary-card h2,.summary-card h3,.checkout-section h2,.routine-builder-summary h2) {
  font-size: clamp(1.125rem, 1rem + .625vw, 1.375rem);
  line-height: 1.4;
}
#main[data-page-family] .product-card .product-copy h3 {
  font-size: clamp(.875rem, .825rem + .25vw, 1rem);
  line-height: 1.5;
  font-weight: 400;
  margin-block: 0 var(--space-2);
}
#main[data-page-family] .adviser-welcome h2 {
  font-size: var(--type-section);
  line-height: 1.3;
  letter-spacing: -.02em;
  margin-block: 0 var(--space-3);
}
/* Logo assets retain their own dimensions; these are not text-sized headings. */
#main[data-page-family] :is(.brand-detail-logo-heading,.brand-directory-logo-heading) {
  margin-block: var(--space-3);
  line-height: 1;
  hyphens: none;
}

/* Quiz questions use a section role rather than the inherited serif legend. */
#main[data-page-family] .quiz-wrap fieldset { min-inline-size: 0; }
#main[data-page-family] .quiz-choice {
  font-size: var(--type-compact);
  line-height: 1.5;
  max-inline-size: calc(100% - var(--space-2));
  min-inline-size: 0;
  margin-inline: 0 var(--space-2);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
#main[data-page-family] .quiz-choice input { flex: 0 0 auto; }
#main[data-page-family] .adviser-page { font-family: var(--sans); }
#main[data-page-family] :is(.quiz-wrap legend,.quiz-panel legend) {
  font-family: var(--sans);
  font-size: var(--type-section);
  font-weight: 650;
  line-height: 1.35;
  margin-block: 0 var(--space-4);
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}
#main[data-page-family] :is(.adviser-generated,.adviser-asked p,.adviser-answer > p,
  .adviser-opening-message > p,.adviser-guided-welcome > p,.adviser-journey p,
  .adviser-pick-why,.adviser-card-copy p,.adviser-limitations li) {
  font-size: var(--type-compact);
  line-height: 1.65;
  overflow-wrap: anywhere;
  hyphens: none;
}
#main[data-page-family] .adviser-shell .adviser-form #adviser-status {
  font-size: var(--type-meta);
  line-height: 1.5;
}

/* Reading and introduction copy never shrinks with the viewport. Compact card
   descriptions retain a distinct role; metadata must remain readable. */
#main[data-page-family] :is(
  .page-intro,.reading-copy,.prose,.content-page,
  .page-head > p:not(:where(.eyebrow)),.catalog-head > p:not(:where(.eyebrow)),
  .customer-page-heading > p,.adviser-heading p,.editorial-lead,
  .origin-page-head > p,.origin-collection-header p,.brand-detail-hero p,
  .concern-hero-copy > p:not(:where(.eyebrow)),.concern-detail-copy > p:not(:where(.eyebrow)),
  .texture-hero p,.technology-hero p,.ingredient-hero p,
  .about-brand-intro > p:not(:where(.eyebrow)),
  .standards-hero-copy > p:not(:where(.eyebrow)),.about-purpose > p,
  .editorial-section p,.editorial-section li,.prose p,.prose li,
  .content-page > p,.content-page > ul,.content-page > ol,
  .concern-detail-intro > p,.innovation-promise p,.care-essential p,
  .customer-help-summary > p,.customer-card > p,.utility-card > p
),
#main[data-page-family] .home-hero-carousel .hero-copy > p {
  font-size: var(--type-body);
  line-height: 1.65;
  max-width: var(--reading-max);
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}
#main[data-page-family] :is(.about-brand-intro > .about-brand-tagline,.standards-hero-copy > .standards-lead) {
  font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
  line-height: 1.5;
  margin-block: 0 var(--space-3);
}
#main[data-page-family] :is(
  .info-card p,.editorial-tile p,.editorial-story p,.customer-hub-grid p,
  .concern-tile-copy p,.innovation-evidence-card p,.texture-discovery-card p,
  .home-ingredient-copy p,.home-technology-copy p,.product-care-card p,
  .about-principles p,.standards-step-list p,.origin-start-note p,.origin-guidance p
) {
  font-size: var(--type-compact);
  line-height: 1.6;
  min-height: 0;
  overflow-wrap: anywhere;
  hyphens: none;
}
#main[data-page-family] :is(
  .eyebrow,.product-brand,.product-meta,.origin-country-count,.origin-footnote,
  .origin-steps,.origin-country-code,.origin-back,.origin-brand-links a,
  .texture-discovery-card small,.ingredient-visual-card small,.concern-origin-note,
  .concern-tile-explore,.concern-tile-shop,.brand-results span,.home-hero-professional
) {
  font-size: var(--type-meta);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
#main[data-page-family] .eyebrow {
  margin-block: 0 var(--space-2);
  letter-spacing: .07em;
}
#main[data-page-family] :is(.page-head,.catalog-head,.customer-page-heading,.adviser-heading,.editorial-hero,.origin-page-head,.origin-collection-header) p:not(.eyebrow) {
  margin-block: 0;
}

/* The header owns the gap before content. Following sections add no second
   top padding or margin. Internal stack spacing is separate from section rhythm. */
#main[data-page-family] :is(.page-head,.catalog-head,.customer-page-heading,.adviser-heading) {
  padding-block: var(--page-header-gap);
  margin-block: 0;
  text-align: start;
}
#main[data-page-family] :is(.editorial-hero,.about-brand-hero,.standards-hero,.texture-hero,.technology-hero,.concern-explorer-hero,.concern-detail-hero) {
  padding-block: var(--page-header-gap);
  gap: var(--section-gap);
  text-align: start;
}
#main[data-page-family] :is(.concern-hero-copy,.concern-detail-copy) { padding-block: 0; }
#main[data-page-family] .section { padding-block: var(--section-gap); }
#main[data-page-family] .section + .section { padding-block-start: 0; }
#main[data-page-family] :is(.page-head,.catalog-head,.customer-page-heading,.adviser-heading) + :is(
  .section,.utility-layout,.account-layout,.account-entry,.cart-layout,.checkout-layout,
  .routine-builder-layout,.care-content,.explore-content,.discovery-content,.customer-help-page
) {
  padding-block-start: 0;
  margin-block-start: 0;
}
#main[data-page-family] :is(.section-head,.account-section-heading,.editorial-section-heading,.innovation-section-head,.concern-explore-heading) {
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}
#main[data-page-family] :is(.section-head,.account-section-heading,.editorial-section-heading,.innovation-section-head,.concern-explore-heading) :is(h2,h3) {
  margin-block-end: 0;
}
#main[data-page-family] .section-head > * { min-width: 0; }
#main[data-page-family] :is(.editorial-section,.standards-process,.standards-evidence,.about-purpose) {
  padding-block: var(--section-gap);
}
/* Two bordered editorial sections split one gap between them. */
#main[data-page-family] .editorial-section { padding-block: calc(var(--section-gap) / 2); }
#main[data-page-family] .editorial-hero + .editorial-body > .editorial-section:first-child {
  padding-block-start: 0;
}
#main[data-page-family] :is(.origin-page-head,.origin-collection-header) {
  padding-block: 0 var(--page-header-gap);
  margin-block: 0;
}
#main[data-page-family] .origin-journey { padding-block: var(--page-header-gap) var(--section-gap); }
#main[data-page-family] .origin-steps { margin-block-start: 0; }
#main[data-page-family] :is(.brand-detail,.care-content,.explore-content) { padding-block-end: var(--section-gap); }
#main[data-page-family] :is(.account-entry,.account-layout,.cart-layout,.utility-layout,.routine-builder-layout) { gap: var(--space-5); }
#main[data-page-family] :is(
  .summary-card,.utility-card,.receipt,.care-receipt,.care-review,.routine-builder-summary,
  .about-principles > article,.about-origin-card > div,.about-discovery-copy,.standards-closing,
  .innovation-evidence-copy,.innovation-watch-grid article,.innovation-advisor,
  .concern-detail-intro,.concern-reference-panel,.brand-routine-links,.home-roots-copy
) { padding: var(--card-inset); }
#main[data-page-family] .checkout-section { padding-block-end: var(--space-5); margin-block-end: var(--space-5); }
#main[data-page-family] .account-stat-grid { margin-block-end: var(--space-5); }
#main[data-page-family] .account-stat-grid strong { font-size: 1.5rem; }
#main[data-page-family] .home-injectables { margin-block: var(--section-gap) 0; }
#main[data-page-family] .home-technology-showcase { padding-block: var(--section-gap); margin-block: 0; }
#main[data-page-family] :is(.prose,.reading-copy) > h2 { margin-block-start: var(--space-6); }
#main[data-page-family] :is(.prose,.reading-copy) > h2:first-child { margin-block-start: 0; }

/* The home hero shares the page shell. Copy starts on that shell's edge;
   artwork and carousel behavior retain component-owned geometry. */
#main[data-page-family] .home-hero-carousel {
  width: min(var(--page-max), calc(100% - var(--page-gutter) * 2));
  margin-inline: auto;
}
#main[data-page-family] .home-hero-carousel .hero-copy {
  padding-block: var(--page-header-gap);
  padding-inline: 0 var(--space-5);
  min-width: 0;
}
#main[data-page-family] .home-hero-carousel .hero-copy > p { margin-block: 0 var(--space-4); }
#main[data-page-family] .home-hero-carousel .hero-actions { gap: var(--space-3) var(--space-4); }

@media (max-width:47.5rem) {
  #main[data-page-family] :is(.section-head,.origin-collection-header,.origin-results-heading) {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  #main[data-page-family] .section-head > .text-link { align-self: flex-start; }
  #main[data-page-family] .home-hero-carousel .hero-copy { padding-inline: 0; }
}

/* Constrained retail cards must still reflow when text is enlarged. Ordinary
   words stay intact; an unbroken name or translated action can break if needed. */
#main[data-page-family] .product-card :is(.product-copy h3 a,.product-quick,.compare-toggle) {
  min-inline-size: 0;
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}
#main[data-page-family] .product-card .product-copy h3 a { display: block; }
#main[data-page-family] .product-card .product-bottom { flex-wrap: wrap; }
#main[data-page-family] .adviser-service-row { flex-wrap: wrap; }
#main[data-page-family] .adviser-service-row > * {
  min-inline-size: 0;
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Newsletter display copy shares the site section role. Footer navigation
   headings retain their own compact style. */
#footer .footer-newsletter h2 {
  font-size: var(--type-section);
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -.02em;
  margin-block: 0 var(--space-3);
  max-width: 100%;
  overflow-wrap: anywhere;
  hyphens: none;
}

/* Intrinsic sizing for text-led navigation strips, including enlarged text. */
#main[data-page-family] :is(.skin-question-links,.injectables-type-links,.discovery-product-kicker) {
  min-inline-size: 0;
}
#main[data-page-family] .skin-question-links a {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
#main[data-page-family] .injectables-type-links a {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
#main[data-page-family] .injectables-type-links a > span {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
#main[data-page-family] .discovery-product-kicker {
  font-size: var(--type-meta);
  flex-wrap: wrap;
  line-height: 1.5;
}
#main[data-page-family] .discovery-product-kicker > span:first-child {
  flex: 1 1 0;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
#main[data-page-family] .discovery-rank {
  flex: 0 0 auto;
  font-size: var(--type-meta);
  width: auto;
  min-width: 1.5rem;
  height: auto;
  min-height: 1.5rem;
  padding-inline: var(--space-1);
}
#main[data-page-family] .standards-hero-copy > p:not(.eyebrow) { margin-block: 0; }
@media (max-width:33.75rem) {
  #main[data-page-family] .skin-question-links { grid-template-columns: minmax(0,1fr); }
}
#main[data-page-family] .text-link {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
#main[data-page-family] .text-link > :not(svg) { min-inline-size: 0; overflow-wrap: anywhere; }

/* Innovation navigation shares one link component across texture, ingredient
   and technology pages; translated labels must fit the available inline size. */
#main[data-page-family] .innovation-nav > a {
  font-size: var(--type-meta);
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}