/* Korkunova PDP - Vanilla Dream (mockup pdp-hero-01A.png, 2048x1152).
   Palette: docs/korkunova-pdp/PALETTE.md; fonts: docs/korkunova-pdp/FONTS.md.
   Every rule is scoped under body.pdp so index / our-story never move. Desktop (>=1100) is authored in
   mockup pixels times the shared --u (100cqw / 2048): the composition fills the page width at every
   desktop size, nothing is capped. Text-run numbers below were fitted to the mockup ink boxes at 2048 in
   Chrome and Firefox (scratch tooling in pipeline/work/kp-build/, gitignored; see REPORT-T3). */

:root {
  --pdp-cream: #F8F3F0;
  --pdp-rose: #B87D73;
  --pdp-gold: #CCA97F;
  --pdp-gold-label: #F6D6A2;
  --pdp-button: #3E3D3D;
  --pdp-hair-header: #ECE6E2;
  --pdp-hair-1: #DED8D4;
  --pdp-hair-2: #E8E1DD;
  --pdp-hair-3: #E1DBD7;
  --pdp-divider: #CEC5C0;
  --pdp-thumb-edge: #E4DCD7;
  --pdp-thumb-active: #CAA8A0;
  --pdp-thumb-frame: #FBF7F5;
  --pdp-ink-strong: #302F2E;
  --pdp-ink-body: #1F1E1D;
  --pdp-ink-caption: #282726;
  --pdp-ink-nav: #302F2E;
  --pdp-ink-reviews: #333231;
  --pdp-ink-logo: #2B2A29;
  --pdp-ink-logo-sub: #262524;
  --pdp-book: "EB Garamond", Garamond, "Times New Roman", serif;
  --pdp-sans-body: "Urbanist", "Jost", Arial, sans-serif;
}

/* body is a size container, so its background does not reach the canvas: html carries it too. */
html:has(> body.pdp) { background: var(--pdp-cream); }
body.pdp { background: var(--pdp-cream); }
body.pdp button { font: inherit; color: inherit; }
body.pdp .site-header, body.pdp .nav { background: var(--pdp-cream); }

/* ================= Base: shared by every width; the desktop block below overrides the geometry ======== */
body.pdp .pdp-inner { display: flex; flex-direction: column; }
body.pdp .pdp-gallery { position: relative; }
body.pdp .pdp-photo { width: 100%; height: auto; aspect-ratio: 2048 / 1918; object-fit: cover; }
body.pdp .pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px 16px 0; }
body.pdp .pdp-thumb {
  display: block; width: 100%; aspect-ratio: 162 / 185; padding: 3px; cursor: pointer;
  border: 2px solid var(--pdp-thumb-edge); border-radius: 9px; background: var(--pdp-thumb-frame);
}
body.pdp .pdp-thumb[aria-pressed="true"] { border-color: var(--pdp-thumb-active); }
/* The mockup's thumbnails are tighter crops of the same four photos. Cover-fit pinned right puts each bottle
   (B1's measured centres, 57-61% across) within 2% of the frame's middle; then a 1.3x zoom about the bottle's
   height centre. The origin stays inside the box so the zoomed image still covers it. */
body.pdp .pdp-thumb-clip { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; }
body.pdp .pdp-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; transform: scale(1.3); }
body.pdp .pdp-thumbs li:nth-child(1) img { transform-origin: 50% 51.7%; }
body.pdp .pdp-thumbs li:nth-child(2) img { transform-origin: 50% 46.1%; }
body.pdp .pdp-thumbs li:nth-child(3) img { transform-origin: 50% 21.8%; }
body.pdp .pdp-thumbs li:nth-child(4) img { transform-origin: 50% 46.1%; }

body.pdp .pdp-buy { padding: 28px 20px 40px; color: var(--pdp-ink-strong); }
body.pdp .pdp-eyebrow {
  display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.14em; color: var(--pdp-rose);
}
body.pdp .pdp-eyebrow::after { content: none; }
body.pdp .pdp-glyph { width: 30px; height: auto; }
body.pdp .pdp-title { margin: 10px 0 0; font-weight: 300; font-size: clamp(48px, 12vw, 84px); line-height: 1.05; white-space: nowrap; }
body.pdp .pdp-t1 { color: var(--pdp-ink-strong); }
body.pdp .pdp-t2 { color: var(--pdp-rose); }
body.pdp .pdp-rating { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
body.pdp .pdp-stars { width: 110px; fill: var(--pdp-rose); }
body.pdp .pdp-reviews { font-family: var(--pdp-sans-body); font-size: 15px; letter-spacing: 0.05em; color: var(--pdp-ink-reviews); }
body.pdp .pdp-price { margin-top: 16px; font-size: 34px; letter-spacing: 0.12em; font-variant-numeric: lining-nums; }
body.pdp .pdp-size { margin-top: 4px; font-family: var(--pdp-book); font-size: 19px; font-variant-numeric: lining-nums; color: var(--pdp-ink-body); }
body.pdp .pdp-desc {
  margin-top: 18px; padding: 18px 0; border-block: 1px solid var(--pdp-hair-1);
  font-family: var(--pdp-book); font-size: 18px; line-height: 1.5; color: var(--pdp-ink-body);
}
body.pdp .pdp-desc br { display: none; }
body.pdp .pdp-cart { display: flex; gap: 14px; margin-top: 20px; }
body.pdp .pdp-add {
  flex: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; min-height: 54px; padding: 0 0 0 0.3em; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--pdp-button); color: var(--pdp-gold-label);
  font-family: var(--serif); font-weight: 300; font-size: 18px; letter-spacing: 0.3em;
}
body.pdp .pdp-add:hover { background: #2f2e2d; }
body.pdp .pdp-guarantees {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--pdp-hair-3);
}
body.pdp .pdp-guarantees li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px; text-align: center; }
body.pdp .pdp-guarantees li + li { border-left: 1px solid var(--pdp-divider); }
body.pdp .pdp-guarantees img { height: 36px; width: auto; }
body.pdp .pdp-guarantees p { font-family: var(--pdp-book); font-size: 15px; line-height: 1.35; color: var(--pdp-ink-caption); }
body.pdp .pdp-thumb:focus-visible, body.pdp .pdp-add:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}

/* ================= Below 1100: responsive layout =================
   < 900: one column. The photo spans the page at its own 1.068:1 (2048x1918 = the desktop slot, so nothing is
   cropped), the four thumbnails sit in a row under it, then the buy box, all on the site's 20px narrow gutter
   (index / our-story). 900-1099: the desktop's 1104:944 split comes back as two columns (gallery + thumbnail
   row left, buy box right), so the photo stops at ~54% of the width instead of filling a 900px-tall screen.
   Guarantees run three across down to 560 and stack one per row below it. Type is fluid with floors: body
   copy >= 16px, captions >= 14px, spaced caps >= 11px. */
@media (max-width: 1099.98px) {
  body.pdp .pdp-thumbs { gap: clamp(8px, 2.2vw, 14px); padding: clamp(10px, 2.6vw, 16px) 20px 0; }

  body.pdp .pdp-buy { padding: 30px 20px 44px; }
  /* Eyebrow: caps, then the gold hairline (shrinks first), then the glyph (never shrinks). */
  body.pdp .pdp-eyebrow { gap: 10px; font-size: clamp(11px, 3.1vw, 14px); line-height: 1.3; }
  body.pdp .pdp-eyebrow span { flex: none; white-space: nowrap; }
  body.pdp .pdp-eyebrow::after {
    content: ""; order: 1; flex: 0 1 64px; min-width: 20px; height: 1px; background: var(--pdp-gold);
  }
  body.pdp .pdp-glyph { order: 2; flex: none; width: clamp(28px, 7.4vw, 36px); }

  /* One line wherever it fits (13vw keeps it inside 350px at 390); if it ever wraps, only between the words. */
  body.pdp .pdp-title { margin-top: 8px; font-size: clamp(46px, 13vw, 84px); line-height: 1.08; white-space: normal; }
  body.pdp .pdp-t1, body.pdp .pdp-t2 { white-space: nowrap; }
  body.pdp .pdp-rating { margin-top: 10px; }
  body.pdp .pdp-stars { width: clamp(104px, 27vw, 128px); height: auto; aspect-ratio: 158.83 / 21.71; }
  body.pdp .pdp-reviews { font-size: clamp(14px, 3.9vw, 16px); }
  body.pdp .pdp-price { margin-top: 16px; font-size: clamp(30px, 8.6vw, 42px); line-height: 1.1; }
  body.pdp .pdp-size { margin-top: 2px; font-size: clamp(17px, 4.6vw, 20px); }
  body.pdp .pdp-desc { margin-top: 20px; padding: 18px 0 20px; font-size: clamp(17px, 4.5vw, 20px); }
  body.pdp .pdp-cart { gap: 12px; margin-top: 22px; }
  body.pdp .pdp-add { flex: 1 1 0; min-width: 0; white-space: nowrap; font-size: clamp(15px, 4.2vw, 19px); }
  body.pdp .pdp-guarantees { margin-top: 24px; padding-top: 22px; }
  body.pdp .pdp-guarantees li { justify-content: flex-start; gap: 10px; padding: 0 8px; }
  body.pdp .pdp-guarantees img { height: 38px; }
  body.pdp .pdp-guarantees p { font-size: clamp(14px, 3.9vw, 16px); }
}
/* Below 560 three columns leave ~110px a caption: one guarantee per row instead, icon left in a fixed column
   so the rows keep the buy box's left edge and read as a list (centred, each row would be ~110px tall). */
@media (max-width: 559.98px) {
  body.pdp .pdp-guarantees { display: block; padding-top: 0; }
  body.pdp .pdp-guarantees li {
    display: grid; grid-template-columns: 56px 1fr; align-items: center; column-gap: 16px;
    padding: 14px 0; text-align: left;
  }
  body.pdp .pdp-guarantees li + li { border-left: 0; border-top: 1px solid var(--pdp-hair-3); }
  body.pdp .pdp-guarantees img { justify-self: center; height: auto; max-width: 56px; max-height: 36px; width: auto; }
  body.pdp .pdp-guarantees p br { display: none; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  body.pdp .pdp-inner { display: grid; grid-template-columns: 1104fr 944fr; align-items: start; }
  body.pdp .pdp-thumbs { padding: 14px 20px 0; }
  body.pdp .pdp-buy { padding: 44px clamp(28px, 4cqw, 44px) 48px; }
  body.pdp .pdp-eyebrow { font-size: 12px; letter-spacing: 0.12em; }
  body.pdp .pdp-title { font-size: 6cqw; }
  body.pdp .pdp-price { font-size: 38px; }
  body.pdp .pdp-size { font-size: 19px; }
  body.pdp .pdp-desc { font-size: 18px; }
  body.pdp .pdp-add { font-size: 17px; }
  body.pdp .pdp-guarantees p { font-size: 15px; }
}

/* ================= Desktop (>=1100): the mockup composition, mockup px x --u ================= */
@media (min-width: 1100px) {
  /* ---- Header: the shared site header (style.css) on the cream band set above ---- */

  /* ---- Composition below the header: mockup y118-1152 ---- */
  body.pdp .pdp-inner { display: block; height: calc(1034 * var(--u)); }
  body.pdp .pdp-gallery { position: absolute; left: 0; top: 0; width: calc(1104 * var(--u)); height: 100%; overflow: hidden; }
  /* P01 is 2048x1918 = the 1104x1034 slot (1.0677:1); B1 registered it to the mockup (identity fit). */
  body.pdp .pdp-photo { width: 100%; height: 100%; aspect-ratio: auto; }
  /* Thumbnails: outer boxes measured off the mockup (they are not evenly spaced there). */
  body.pdp .pdp-thumbs { display: block; padding: 0; }
  body.pdp .pdp-thumbs li { position: absolute; left: calc(47 * var(--u)); width: calc(162 * var(--u)); }
  body.pdp .pdp-thumbs li:nth-child(1) { top: calc(76 * var(--u)); height: calc(189 * var(--u)); }
  body.pdp .pdp-thumbs li:nth-child(2) { top: calc(280 * var(--u)); height: calc(191 * var(--u)); }
  body.pdp .pdp-thumbs li:nth-child(3) { top: calc(482 * var(--u)); height: calc(181 * var(--u)); }
  body.pdp .pdp-thumbs li:nth-child(4) { top: calc(680 * var(--u)); height: calc(177 * var(--u)); }
  body.pdp .pdp-thumb {
    height: 100%; aspect-ratio: auto; padding: calc(3 * var(--u));
    border-width: max(1px, calc(2 * var(--u))); border-radius: calc(9 * var(--u));
  }
  body.pdp .pdp-thumb-clip { border-radius: calc(6 * var(--u)); }

  body.pdp .pdp-buy {
    position: absolute; left: calc(1104 * var(--u)); top: 0; width: calc(944 * var(--u)); height: 100%;
    padding: 0; background: var(--pdp-cream);
  }
  body.pdp .pdp-buy > *, body.pdp .pdp-cart > * { position: absolute; margin: 0; }
  body.pdp .pdp-cart { position: static; display: block; margin: 0; }

  /* Text runs (left/top in buy-box px = mockup - (1104, 118)). */
  body.pdp .pdp-eyebrow {
    display: block; left: calc(101.541 * var(--u)); top: calc(72.446 * var(--u));
    font-size: calc(23.568 * var(--u)); letter-spacing: 0.1421em; word-spacing: 0.0702em; line-height: 1; white-space: nowrap;
  }
  /* Gold hairline x1722-1845 at y204, then the P05 glyph (alpha bbox mapped onto ink x1855-1889 y192-221). */
  body.pdp .pdp-eyebrow::after {
    content: ""; position: absolute; left: calc(516.459 * var(--u)); top: calc(13.554 * var(--u));
    width: calc(124 * var(--u)); height: max(1px, calc(1 * var(--u))); background: var(--pdp-gold);
  }
  body.pdp .pdp-glyph { position: absolute; left: calc(648.919 * var(--u)); top: calc(0.824 * var(--u)); width: calc(36.3 * var(--u)); height: auto; max-width: none; }

  body.pdp .pdp-title {
    left: calc(103.726 * var(--u)); top: calc(129.473 * var(--u));
    font-size: calc(134 * var(--u)); line-height: 1; letter-spacing: -0.0395em;
  }
  body.pdp .pdp-t2 { margin-left: calc(14.157 * var(--u)); letter-spacing: -0.0206em; }

  body.pdp .pdp-rating { display: block; left: 0; top: 0; width: 100%; }
  /* Five stars: ink x1218-1377, y417-440 (the viewBox is the stars' own ink box, stretched onto it). */
  body.pdp .pdp-stars { position: absolute; left: calc(114 * var(--u)); top: calc(299 * var(--u)); width: calc(160 * var(--u)); height: calc(24 * var(--u)); }
  body.pdp .pdp-reviews {
    position: absolute; left: calc(302.623 * var(--u)); top: calc(302.125 * var(--u)); white-space: nowrap;
    font-size: calc(21.509 * var(--u)); letter-spacing: 0.0474em; word-spacing: 0.0315em; line-height: 1;
  }
  body.pdp .pdp-price {
    left: calc(102.891 * var(--u)); top: calc(368.229 * var(--u));
    font-size: calc(55.028 * var(--u)); letter-spacing: 0.1504em; line-height: 1; font-weight: 400;
  }
  body.pdp .pdp-size {
    left: calc(110.093 * var(--u)); top: calc(450.543 * var(--u));
    font-size: calc(29.144 * var(--u)); letter-spacing: -0.027em; word-spacing: 0.2357em; line-height: 1; font-family: var(--pdp-book);
  }
  /* Hairlines x1213-1932 at mockup y632, 778, 957 (two-row rules; colour = their mean, 2u thick). */
  body.pdp .pdp-buy::before, body.pdp .pdp-buy::after, body.pdp .pdp-desc::before {
    content: ""; position: absolute; left: calc(109 * var(--u)); width: calc(720 * var(--u)); height: max(1px, calc(2 * var(--u)));
  }
  body.pdp .pdp-buy::before { top: calc(514 * var(--u)); background: var(--pdp-hair-1); }
  body.pdp .pdp-desc::before { left: calc(-10.161 * var(--u)); top: calc(117.369 * var(--u)); background: var(--pdp-hair-2); }
  body.pdp .pdp-buy::after { top: calc(839 * var(--u)); background: var(--pdp-hair-3); }

  body.pdp .pdp-desc {
    left: calc(119.161 * var(--u)); top: calc(542.631 * var(--u)); padding: 0; border: 0;
    font-size: calc(28.794 * var(--u)); line-height: calc(45 * var(--u)); white-space: nowrap;
  }
  body.pdp .pdp-desc br { display: inline; }
  body.pdp .pdp-d1 { letter-spacing: 0.0483em; }
  body.pdp .pdp-d2 { letter-spacing: 0.0492em; margin-left: calc(-0.289 * var(--u)); }

  body.pdp .pdp-add {
    left: calc(111 * var(--u)); top: calc(699.5 * var(--u)); width: calc(720 * var(--u)); height: calc(97.5 * var(--u));
    min-height: 0; padding: 0 0 0 0.1826em; border-radius: calc(3 * var(--u)); text-align: center;
    box-shadow: 0 calc(1.5 * var(--u)) calc(2.5 * var(--u)) rgba(30, 28, 27, 0.35);
    font-size: calc(33.208 * var(--u)); letter-spacing: 0.1826em; word-spacing: 0.3739em; line-height: 1;
    padding-top: calc(2.023 * var(--u)); display: flex; align-items: center; justify-content: center; white-space: nowrap;
  }

  /* Guarantees: dividers x1407/1701 (2 cols each), y1003-1093; icons map alpha bboxes onto the ink boxes. */
  body.pdp .pdp-guarantees { display: block; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; pointer-events: none; }
  body.pdp .pdp-guarantees li { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; pointer-events: auto; }
  body.pdp .pdp-guarantees li + li { border: 0; }
  body.pdp .pdp-guarantees li + li::before {
    content: ""; position: absolute; top: calc(885 * var(--u)); width: max(1px, calc(2 * var(--u))); height: calc(91 * var(--u));
    background: var(--pdp-divider);
  }
  body.pdp .pdp-g2::before { left: calc(303 * var(--u)); }
  body.pdp .pdp-g3::before { left: calc(597 * var(--u)); }
  body.pdp .pdp-guarantees img { position: absolute; height: auto; max-width: none; }
  body.pdp .pdp-g1 img { left: calc(140.2 * var(--u)); top: calc(881.2 * var(--u)); width: calc(79.6 * var(--u)); }
  body.pdp .pdp-g2 img { left: calc(428.47 * var(--u)); top: calc(871.47 * var(--u)); width: calc(40.1 * var(--u)); }
  body.pdp .pdp-g3 img { left: calc(707.7 * var(--u)); top: calc(877.5 * var(--u)); width: calc(39.6 * var(--u)); }
  body.pdp .pdp-guarantees p {
    position: absolute; transform: translateX(-50%); white-space: nowrap; text-align: center;
    font-size: calc(21.03 * var(--u)); line-height: calc(28 * var(--u)); font-variant-numeric: lining-nums;
  }
  body.pdp .pdp-g1 p { left: calc(176.677 * var(--u)); top: calc(943.512 * var(--u)); letter-spacing: 0.0358em; }
  body.pdp .pdp-g2 p { left: calc(448.687 * var(--u)); top: calc(928.889 * var(--u)); }
  body.pdp .pdp-g2 p span:first-child { letter-spacing: 0.0455em; }
  body.pdp .pdp-g2 p span:last-child { letter-spacing: 0.026em; }
  body.pdp .pdp-g3 p { left: calc(725.4 * var(--u)); top: calc(942.925 * var(--u)); letter-spacing: 0.053em; }
}

/* ================= Section 2: "Loved by women who wear it" (mockup pdp-s2-01.png, 2048x1152) =========
   Palette: docs/korkunova-pdp2/PALETTE.md; fonts: docs/korkunova-pdp2/FONTS.md. Appended directly below the
   hero; every rule is scoped under body.pdp .pdp2. Desktop (>=1100) is authored in this mockup's pixels
   (y 0 = the hero's bottom edge) times the shared --u, so it fills the page width like the hero. Text-run
   numbers were fitted to the mockup ink boxes at 2048 (scratch tooling pipeline/work/kp2-build/, gitignored;
   see docs/korkunova-pdp2/reports/REPORT-D3.md). */
:root {
  --pdp2-cream: #F9F2EC;
  --pdp2-cream-top: #F8F0E9;
  --pdp2-cream-low: #FAF3ED;
  --pdp2-rose: #AC786D;
  --pdp2-rose-text: #A76F66;
  --pdp2-gold: #C7A981;
  --pdp2-rule: #E4DBD4;
  --pdp2-underline: #D4B0AA;
  --pdp2-ink: #242525;
  --pdp2-ink-soft: #2B2A2A;
  --pdp2-rose-name: #AE7F76;
}

/* ---- Base (all widths): shared type and colour; the <1100 and >=1100 blocks below set the layout ---- */
body.pdp .pdp2 {
  position: relative; padding: 48px 20px 40px; background: var(--pdp2-cream);
  color: var(--pdp2-ink); font-family: var(--pdp-book); text-align: center;
}
body.pdp .pdp2 h2, body.pdp .pdp2 h3, body.pdp .pdp2 figure, body.pdp .pdp2 blockquote { margin: 0; }
body.pdp .pdp2-photo { width: 100%; max-width: 720px; height: auto; margin: 0 auto 28px; }
body.pdp .pdp2-cards, body.pdp .pdp2-benefits { max-width: 640px; margin-inline: auto; }
body.pdp .pdp2-eyebrow { font-family: var(--sans); font-size: 14px; letter-spacing: 0.1em; line-height: 1.4; text-wrap: balance; color: var(--pdp2-rose-text); }
body.pdp .pdp2-orn { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
body.pdp .pdp2-orn::before, body.pdp .pdp2-orn::after { content: ""; flex: 0 1 72px; height: 1px; background: var(--pdp2-gold); }
body.pdp .pdp2-glyph { width: 30px; height: auto; }
body.pdp .pdp2-title { margin-top: 10px; font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 9vw, 64px); line-height: 1.1; color: var(--pdp2-ink-soft); }
body.pdp .pdp2-t1, body.pdp .pdp2-t2 { white-space: nowrap; }
body.pdp .pdp2-t2 { color: var(--pdp2-rose); }
body.pdp .pdp2-rating { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 14px; font-size: 17px; font-variant-numeric: lining-nums; }
body.pdp .pdp2-stars { width: 112px; height: auto; aspect-ratio: 162.78 / 21.71; fill: var(--pdp2-rose); }
body.pdp .pdp2-cards { display: grid; gap: 16px; margin-top: 28px; }
body.pdp .pdp2-card {
  padding: 24px 20px; border: 1px solid var(--pdp2-rule); border-radius: 6px; background: var(--pdp2-cream);
}
body.pdp .pdp2-card-stars { width: 96px; height: auto; aspect-ratio: 155.18 / 21.71; margin: 0 auto; fill: var(--pdp2-rose); }
body.pdp .pdp2-quote { margin-top: 14px; font-size: 19px; line-height: 1.45; }
body.pdp .pdp2-quote br { display: none; }
body.pdp .pdp2-name { margin-top: 12px; font-size: 16px; letter-spacing: 0.06em; color: var(--pdp2-rose-name); }
body.pdp .pdp2-more { margin-top: 24px; font-size: 17px; letter-spacing: 0.06em; font-variant-numeric: lining-nums; }
body.pdp .pdp2-more a { color: var(--pdp2-rose-text); text-decoration: underline; text-decoration-color: var(--pdp2-underline); text-underline-offset: 0.45em; }
body.pdp .pdp2-more a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
body.pdp .pdp2-benefits { display: grid; gap: 24px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--pdp2-rule); text-align: left; }
body.pdp .pdp2-benefits li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: center; }
body.pdp .pdp2-benefits img { grid-row: span 2; justify-self: center; width: 52px; height: auto; }
body.pdp .pdp2-benefits h3 { font-weight: 400; font-size: 20px; line-height: 1.25; }
body.pdp .pdp2-benefits p { font-size: 16px; line-height: 1.4; color: var(--pdp2-ink-soft); }
body.pdp .pdp2-benefits br { display: none; }

/* ---- Below 1100: the designed layout, on the hero's bands ----
   < 900: one centred column - eyebrow, ornament, H2, rating; then the photo edge to edge at its own aspect
   (nothing cropped) with its bottom fading into the cream; cards (2-up from 600), link, a full-width hairline,
   benefits (stacked icon left; 3 across, icon above, from 768). 900-1099: the hero's two columns come back -
   the text column left, the photo right from the section top down to the hairline, covering its column and
   feathered on its LEFT edge as on desktop; cards stacked. The bottle sits at x 50.8-79.9% / y 24.3-89.0% of
   the photo file: the bottom fade starts below it, the split crop and left fade stay clear of it. The photo
   follows the rating in the DOM (reading order: heading, rating, photo, cards), so no flex/grid order is needed. */
@media (max-width: 1099.98px) {
  body.pdp .pdp2 { display: flex; flex-direction: column; align-items: center; padding: 44px 20px 40px; }
  body.pdp .pdp2 > * { width: 100%; }
  body.pdp .pdp2-eyebrow { font-size: clamp(11px, 3.1vw, 14px); letter-spacing: 0.12em; line-height: 1.3; }
  body.pdp .pdp2-orn { margin-top: 10px; }
  body.pdp .pdp2-glyph { width: clamp(28px, 7.4vw, 34px); }
  body.pdp .pdp2-title { margin-top: 8px; font-size: clamp(38px, 9.6vw, 60px); line-height: 1.12; text-wrap: balance; }
  body.pdp .pdp2-rating { margin-top: 12px; }
  body.pdp .pdp2-count { font-size: 17px; letter-spacing: 0.04em; }
  body.pdp .pdp2-photo {
    width: calc(100% + 40px); max-width: none; margin: 28px -20px 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 89.5%, rgba(0, 0, 0, 0.45) 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 89.5%, rgba(0, 0, 0, 0.45) 95%, transparent 100%);
  }
  body.pdp .pdp2-cards { max-width: 820px; margin-top: 12px; }
  body.pdp .pdp2-card { padding: 24px clamp(18px, 4vw, 28px) 22px; }
  body.pdp .pdp2-quote { font-size: clamp(18px, 4.6vw, 19px); text-wrap: balance; }
  body.pdp .pdp2-more { margin-top: 26px; }
  body.pdp .pdp2-more a { display: inline-block; padding: 12px 4px; }
  /* the hairline runs edge to edge as on desktop (there from x64 to the right edge) */
  body.pdp .pdp2-benefits {
    width: calc(100% + 40px); max-width: none; margin: 26px -20px 0; padding: 30px 20px 0;
  }
  body.pdp .pdp2-benefits li { max-width: 560px; width: 100%; margin-inline: auto; }
  body.pdp .pdp2-benefits p { text-wrap: balance; }
}
@media (min-width: 600px) and (max-width: 1099.98px) {
  body.pdp .pdp2-cards { grid-template-columns: 1fr 1fr; }
}
/* 768+: three across with dividers, icon above (beside it, "Scientifically Formulated" would not hold one line) */
@media (min-width: 768px) and (max-width: 1099.98px) {
  body.pdp .pdp2-benefits { grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: 32px; }
  body.pdp .pdp2-benefits li { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 12px; text-align: center; }
  body.pdp .pdp2-benefits li + li { border-left: 1px solid var(--pdp2-rule); }
  body.pdp .pdp2-benefits img { width: auto; height: 50px; margin-bottom: 14px; }
  body.pdp .pdp2-benefits h3 { white-space: nowrap; font-size: 19px; }
  body.pdp .pdp2-benefits p { margin-top: 6px; font-size: 15px; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  body.pdp .pdp2 {
    display: grid; grid-template-columns: clamp(28px, 4cqw, 44px) minmax(0, 1fr) clamp(20px, 3cqw, 32px) 44%;
    align-items: start; padding: 52px 0 44px;
  }
  body.pdp .pdp2 > * { grid-column: 2; }
  body.pdp .pdp2-eyebrow { font-size: 12px; }
  body.pdp .pdp2-title { font-size: 5cqw; }
  body.pdp .pdp2-cards { grid-template-columns: 1fr; margin-top: 26px; }
  body.pdp .pdp2-photo {
    grid-column: 4; grid-row: 1 / 7; align-self: stretch; width: 100%; height: 0; min-height: calc(100% + 52px);
    margin: -52px 0 0; object-fit: cover; object-position: 72% 50%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.45) 9%, #000 18%);
    mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.45) 9%, #000 18%);
  }
  body.pdp .pdp2-more { margin: 22px 0 0; padding-bottom: 40px; }
  body.pdp .pdp2-benefits { grid-column: 1 / -1; width: auto; margin: 0; padding: 34px clamp(28px, 4cqw, 44px) 0; }
}

/* ================= Desktop (>=1100): the mockup composition, mockup px x --u ================= */
@media (min-width: 1100px) {
  body.pdp .pdp2 {
    height: calc(1152 * var(--u)); padding: 0; text-align: left; isolation: isolate;
    /* the page cream is 1-3 levels darker along the top and 1 level lighter in the benefits band */
    background: linear-gradient(to bottom, var(--pdp2-cream-top) 0, var(--pdp2-cream) calc(150 * var(--u)),
      var(--pdp2-cream) calc(854 * var(--u)), var(--pdp2-cream-low) 100%);
  }
  body.pdp .pdp2 > * { position: absolute; margin: 0; }
  /* Full-width hairline at mockup y854-855 from x64; it is also the photo's hard bottom edge. */
  body.pdp .pdp2::after {
    content: ""; position: absolute; left: calc(64 * var(--u)); right: 0; top: calc(854 * var(--u));
    height: max(1px, calc(2 * var(--u))); background: var(--pdp2-rule);
  }

  /* Photo box [1000,0,1048,854]; C1 registered the file to it (identity). The feather is an elliptical mask
     centred off the box's lower right: solid inside the ellipse, a short fade to a faint haze, then cream
     (fitted to the mockup's deviation-from-cream profiles; REPORT-D3). The bottom edge stays hard. It comes
     after the rating in the DOM, so z-index -1 (inside the isolated section) keeps it under the H2 and cards. */
  body.pdp .pdp2-photo {
    z-index: -1; left: calc(1000 * var(--u)); top: 0; width: calc(1048 * var(--u)); height: calc(854 * var(--u));
    max-width: none; object-fit: cover;
    -webkit-mask-image: radial-gradient(calc(1407.72 * var(--u)) calc(1381.98 * var(--u)) at calc(1126.33 * var(--u)) calc(942.37 * var(--u)), #000 62.55%, rgba(0, 0, 0, 0.138) 72.12%, transparent 100%);
    mask-image: radial-gradient(calc(1407.72 * var(--u)) calc(1381.98 * var(--u)) at calc(1126.33 * var(--u)) calc(942.37 * var(--u)), #000 62.55%, rgba(0, 0, 0, 0.138) 72.12%, transparent 100%);
  }

  body.pdp .pdp2-eyebrow {
    left: calc(351.341 * var(--u)); top: calc(94.926 * var(--u)); white-space: nowrap; line-height: 1;
    font-size: calc(24.612 * var(--u)); letter-spacing: 0.1406em; word-spacing: 0.2446em;
  }
  /* Gold hairlines x488-636 / x711-856 at y159 (1 px core + halo: one 1u line, summed darkness), glyph between. */
  body.pdp .pdp2-orn { display: block; left: 0; top: 0; width: 0; height: 0; }
  body.pdp .pdp2-orn::before, body.pdp .pdp2-orn::after {
    position: absolute; top: calc(159 * var(--u)); height: max(1px, calc(1 * var(--u)));
  }
  body.pdp .pdp2-orn::before { left: calc(488 * var(--u)); width: calc(149 * var(--u)); }
  body.pdp .pdp2-orn::after { left: calc(711 * var(--u)); width: calc(146 * var(--u)); }
  body.pdp .pdp2-glyph { position: absolute; left: calc(652.58 * var(--u)); top: calc(142.7 * var(--u)); width: calc(41.84 * var(--u)); max-width: none; }

  body.pdp .pdp2-title {
    left: calc(98.5 * var(--u)); top: calc(191.899 * var(--u)); white-space: nowrap; line-height: 1;
    font-size: calc(97.832 * var(--u)); letter-spacing: 0.0307em; word-spacing: -0.0432em;
  }
  body.pdp .pdp2-t2 { margin-left: calc(3.2 * var(--u)); letter-spacing: 0.0136em; word-spacing: -0.0363em; }

  body.pdp .pdp2-rating { display: block; left: 0; top: 0; width: 0; height: 0; font-size: calc(28.419 * var(--u)); }
  /* Stars: ink x436-650, y324-353 (viewBox = the stars' own ink box, stretched onto it). */
  body.pdp .pdp2-stars { position: absolute; left: calc(436 * var(--u)); top: calc(324 * var(--u)); width: calc(214 * var(--u)); height: calc(29 * var(--u)); max-width: none; }
  body.pdp .pdp2-count {
    position: absolute; left: calc(684.717 * var(--u)); top: calc(324.519 * var(--u)); white-space: nowrap; line-height: 1;
    letter-spacing: 0.0721em; word-spacing: 0.0573em;
  }

  /* Cards: outer boxes x129-654 / x671-1192, y391-750; 2u border, 8u radius, opaque cream. */
  body.pdp .pdp2-cards { display: block; left: 0; top: 0; width: 0; height: 0; }
  body.pdp .pdp2-card {
    position: absolute; top: calc(391 * var(--u)); height: calc(360 * var(--u)); padding: 0;
    border-width: max(1px, calc(2 * var(--u))); border-radius: calc(8 * var(--u));
  }
  body.pdp .pdp2-card1 { left: calc(129 * var(--u)); width: calc(526 * var(--u)); }
  body.pdp .pdp2-card2 { left: calc(671 * var(--u)); width: calc(522 * var(--u)); }
  /* Stars: ink x293-463 / x827-1006, y431-456 (box-relative below). */
  body.pdp .pdp2-card-stars { position: absolute; top: calc(38 * var(--u)); height: calc(25 * var(--u)); margin: 0; max-width: none; }
  body.pdp .pdp2-card1 .pdp2-card-stars { left: calc(162 * var(--u)); width: calc(170 * var(--u)); }
  body.pdp .pdp2-card2 .pdp2-card-stars { left: calc(154 * var(--u)); width: calc(179 * var(--u)); }
  body.pdp .pdp2-quote { margin: 0; font-size: calc(33.741 * var(--u)); line-height: 1; }
  body.pdp .pdp2-quote br { display: inline; }
  body.pdp .pdp2-quote span, body.pdp .pdp2-name {
    position: absolute; transform: translateX(-50%); white-space: nowrap; line-height: 1;
  }
  body.pdp .pdp2-card1 .pdp2-q1 { left: calc(247.323 * var(--u)); top: calc(92.872 * var(--u)); letter-spacing: 0.0583em; }
  body.pdp .pdp2-card1 .pdp2-q2 { left: calc(250.612 * var(--u)); top: calc(138.641 * var(--u)); letter-spacing: 0.055em; }
  body.pdp .pdp2-card1 .pdp2-q3 { left: calc(260.074 * var(--u)); top: calc(185.685 * var(--u)); letter-spacing: 0.0445em; }
  body.pdp .pdp2-card1 .pdp2-q4 { left: calc(257.091 * var(--u)); top: calc(232.958 * var(--u)); letter-spacing: 0.0504em; }
  body.pdp .pdp2-card2 .pdp2-q1 { left: calc(252.264 * var(--u)); top: calc(95.142 * var(--u)); letter-spacing: 0.0549em; }
  body.pdp .pdp2-card2 .pdp2-q2 { left: calc(256.031 * var(--u)); top: calc(142.176 * var(--u)); letter-spacing: 0.033em; }
  body.pdp .pdp2-card2 .pdp2-q3 { left: calc(255.486 * var(--u)); top: calc(187.374 * var(--u)); letter-spacing: 0.0373em; }
  body.pdp .pdp2-name { margin: 0; font-size: calc(28.687 * var(--u)); }
  body.pdp .pdp2-card1 .pdp2-name { left: calc(247.607 * var(--u)); top: calc(289.371 * var(--u)); letter-spacing: 0.0648em; }
  body.pdp .pdp2-card2 .pdp2-name { left: calc(249.205 * var(--u)); top: calc(288.808 * var(--u)); letter-spacing: 0.0442em; }

  /* "Read all 62 reviews" + its 2u rose underline at y814-815, x493-740. */
  body.pdp .pdp2-more {
    left: calc(496.168 * var(--u)); top: calc(779.488 * var(--u)); white-space: nowrap; line-height: 1;
    font-size: calc(27.602 * var(--u)); letter-spacing: 0.0759em; word-spacing: 0.0291em;
  }
  body.pdp .pdp2-more a { position: relative; display: block; text-decoration: none; }
  body.pdp .pdp2-more a::after {
    content: ""; position: absolute; left: calc(-3.168 * var(--u)); top: calc(34.512 * var(--u));
    width: calc(248 * var(--u)); height: max(1px, calc(2 * var(--u))); background: var(--pdp2-underline);
  }

  /* Benefits: three across, dividers x685 / x1334 (2u), y892-1051; icons map alpha bboxes onto the ink boxes. */
  body.pdp .pdp2-benefits { display: block; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0; border: 0; }
  body.pdp .pdp2-benefits li { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; }
  body.pdp .pdp2-benefits li + li::before {
    content: ""; position: absolute; width: max(1px, calc(2 * var(--u))); background: var(--pdp2-rule);
  }
  body.pdp .pdp2-b2::before { left: calc(685 * var(--u)); top: calc(892 * var(--u)); height: calc(160 * var(--u)); }
  body.pdp .pdp2-b3::before { left: calc(1334 * var(--u)); top: calc(893 * var(--u)); height: calc(159 * var(--u)); }
  body.pdp .pdp2-benefits img { position: absolute; height: auto; max-width: none; }
  body.pdp .pdp2-b1 img { left: calc(131.73 * var(--u)); top: calc(912.73 * var(--u)); width: calc(95.55 * var(--u)); }
  body.pdp .pdp2-b2 img { left: calc(779.73 * var(--u)); top: calc(925.58 * var(--u)); width: calc(106.2 * var(--u)); }
  body.pdp .pdp2-b3 img { left: calc(1419.78 * var(--u)); top: calc(908.78 * var(--u)); width: calc(91.44 * var(--u)); }
  body.pdp .pdp2-benefits h3, body.pdp .pdp2-benefits p span { position: absolute; white-space: nowrap; line-height: 1; }
  body.pdp .pdp2-benefits h3 { font-size: calc(34.057 * var(--u)); }
  body.pdp .pdp2-benefits p { font-size: calc(25.213 * var(--u)); }
  body.pdp .pdp2-benefits br { display: inline; }
  body.pdp .pdp2-b1 h3 { left: calc(278.271 * var(--u)); top: calc(920.137 * var(--u)); letter-spacing: 0.0227em; }
  body.pdp .pdp2-b1 .pdp2-l1 { left: calc(278.539 * var(--u)); top: calc(975.053 * var(--u)); letter-spacing: 0.0239em; }
  body.pdp .pdp2-b1 .pdp2-l2 { left: calc(278.539 * var(--u)); top: calc(1009.749 * var(--u)); letter-spacing: 0.0297em; }
  body.pdp .pdp2-b2 h3 { left: calc(941.361 * var(--u)); top: calc(920.018 * var(--u)); letter-spacing: 0.0106em; }
  body.pdp .pdp2-b2 .pdp2-l1 { left: calc(940.089 * var(--u)); top: calc(974.988 * var(--u)); letter-spacing: 0.0225em; }
  body.pdp .pdp2-b2 .pdp2-l2 { left: calc(940.089 * var(--u)); top: calc(1009.684 * var(--u)); letter-spacing: 0.0166em; }
  body.pdp .pdp2-b3 h3 { left: calc(1566.171 * var(--u)); top: calc(920.01 * var(--u)); letter-spacing: 0.0214em; }
  body.pdp .pdp2-b3 .pdp2-l1 { left: calc(1564.875 * var(--u)); top: calc(975.108 * var(--u)); letter-spacing: 0.0454em; }
  body.pdp .pdp2-b3 .pdp2-l2 { left: calc(1564.875 * var(--u)); top: calc(1009.804 * var(--u)); letter-spacing: 0.0208em; }
}

/* ================= Section 3: "The Truth About Pheromones" (mockup pdp-s2-02.png, 2048x1152) =========
   Palette: docs/korkunova-pdp3/PALETTE.md; fonts: docs/korkunova-pdp3/FONTS.md. Appended directly below
   section 2; every rule is scoped under body.pdp .pdp3. Desktop (>=1100) is authored in this mockup's pixels
   (y 0 = section 2's bottom edge) times the shared --u, so it fills the page width like the sections above.
   Text-run numbers were fitted to the mockup ink boxes at 2048 (scratch tooling pipeline/work/kp3-build/,
   gitignored; see docs/korkunova-pdp3/reports/REPORT-F3.md). */
:root {
  --pdp3-cream: #F7F0EA;
  --pdp3-rule: #D9C4AC;
  --pdp3-ink: #343435;
  --pdp3-ink-body: #2B2C2E;
  --pdp3-rose-text: #A47068;
  --pdp3-rose: #AE7A70;
  --pdp3-script: "Pinyon Script", "Cormorant Garamond", cursive;
}

/* ---- Base (all widths): shared type and colour; the <1100 and >=1100 blocks below set the layout ---- */
body.pdp .pdp3 { position: relative; background: var(--pdp3-cream); color: var(--pdp3-ink-body); font-family: var(--pdp-book); text-align: left; }
body.pdp .pdp3 h2, body.pdp .pdp3 p, body.pdp .pdp3 blockquote { margin: 0; }
body.pdp .pdp3-photo, body.pdp .pdp3-glyph { display: block; max-width: none; }
body.pdp .pdp3-eyebrow-text { font-family: var(--pdp-sans-body); color: var(--pdp3-rose-text); }
body.pdp .pdp3-eyebrow::after { content: ""; background: var(--pdp3-rule); }
body.pdp .pdp3-title { font-family: var(--serif); font-weight: 400; color: var(--pdp3-ink); }
body.pdp .pdp3-title span { display: block; }
body.pdp .pdp3-quote { font-family: var(--pdp3-script); font-weight: 400; color: var(--pdp3-rose); }

/* ---- Below 1100: the designed layout, on the hero's and section 2's bands ----
   < 900: one column on the 20px gutter, the text on a measure capped at 640px: eyebrow row (caps, hairline,
   glyph), H2, then the photo edge to edge, body, hairline, pull quote. The photo is cropped for the slot, not
   the file: 4:5 below 600, square from 600 (4:5 would be 960px tall at 768); the face, hand and bottle sit at
   file fractions x 0.29-0.63, y 0.09-0.79, inside both crops. 900-1099: the desktop split - the photo fills
   the left 993/2048 of the section to its full height (a tall crop of the face, hand and bottle), the cream
   panel right. The mockup's forced breaks are dropped: the H2 balances (its two parts nowrap, so it can only
   break between "About" and "Pheromones"); the body and quote reflow. The body is justified only on the full
   640px measure (680-899, at 19.5px its widest word gap is 1.3x a space); on narrower measures - below 680
   and the 392-478px split column - justification opened gaps of 2-4.7x a space in both engines (rivers;
   hyphens:auto did not help in Chrome), so it sets ragged there. No hyphenation. The photo follows the H2
   in the DOM, so reading order matches every band. */
@media (max-width: 1099.98px) {
  body.pdp .pdp3 { display: flex; flex-direction: column; padding: 44px 20px 48px; }
  body.pdp .pdp3 > :not(.pdp3-photo) { width: 100%; max-width: 640px; margin-inline: auto; }
  body.pdp .pdp3-eyebrow { display: flex; align-items: center; gap: 12px; }
  body.pdp .pdp3-eyebrow-text { flex: none; white-space: nowrap; font-size: clamp(11px, 3.1vw, 14px); letter-spacing: 0.12em; line-height: 1.3; }
  body.pdp .pdp3-eyebrow::after { order: 1; flex: 1 1 auto; min-width: 20px; height: 1px; }
  body.pdp .pdp3-glyph { order: 2; flex: none; width: clamp(28px, 7.4vw, 34px); height: auto; }
  body.pdp .pdp3 > .pdp3-title { margin-top: 10px; font-size: clamp(40px, 10.4vw, 64px); line-height: 1.08; text-wrap: balance; }
  body.pdp .pdp3-title span { display: inline; white-space: nowrap; }
  body.pdp .pdp3-photo {
    width: calc(100% + 40px); max-width: none; height: auto; margin: 28px -20px 0;
    aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%;
  }
  body.pdp .pdp3-body { margin-top: 28px; font-size: clamp(17px, 4.5vw, 19px); line-height: 1.6; hyphens: manual; }
  body.pdp .pdp3-body p + p { margin-top: 14px; }
  body.pdp .pdp3-body::after { content: ""; display: block; height: 1px; margin-top: 28px; background: var(--pdp3-rule); }
  body.pdp .pdp3 > .pdp3-quote { margin-top: 24px; font-size: clamp(30px, 8vw, 40px); line-height: 1.3; text-wrap: balance; }
  body.pdp .pdp3-quote br { display: none; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  body.pdp .pdp3-photo { aspect-ratio: 1; object-position: 50% 35%; }
}
@media (min-width: 680px) and (max-width: 899.98px) {
  body.pdp .pdp3-body { font-size: 19.5px; text-align: justify; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  body.pdp .pdp3 { padding: 56px clamp(28px, 4cqw, 44px) 56px calc(993 / 2048 * 100% + clamp(28px, 4cqw, 44px)); }
  body.pdp .pdp3 > :not(.pdp3-photo) { max-width: none; margin-inline: 0; }
  body.pdp .pdp3-photo {
    position: absolute; left: 0; top: 0; width: calc(993 / 2048 * 100%); height: 100%; margin: 0;
    aspect-ratio: auto; object-position: 46% 50%;
  }
  body.pdp .pdp3-eyebrow-text { font-size: 12px; }
  body.pdp .pdp3-glyph { width: 30px; }
  body.pdp .pdp3 > .pdp3-title { margin-top: 12px; font-size: 5.2cqw; }
  body.pdp .pdp3-body { margin-top: 24px; font-size: 18px; line-height: 1.55; }
  body.pdp .pdp3-body::after { margin-top: 26px; }
  body.pdp .pdp3 > .pdp3-quote { margin-top: 22px; font-size: clamp(30px, 3.1cqw, 34px); }
}

/* ================= Desktop (>=1100): the mockup composition, mockup px x --u ================= */
@media (min-width: 1100px) {
  body.pdp .pdp3 { height: calc(1152 * var(--u)); padding: 0; isolation: isolate; }
  body.pdp .pdp3 > * { position: absolute; margin: 0; }
  /* Photo box [0,0,993,1152]: E1 registered the file to it (identity); hard right edge at x993. */
  body.pdp .pdp3-photo { left: 0; top: 0; width: calc(993 * var(--u)); height: calc(1152 * var(--u)); object-fit: cover; }

  /* Eyebrow, its rule (rows 99-100, x1450-1828: one 2u line, the mean of the two rows) and the glyph
     (ink x1844-1884, y84-122; the file's ink box x3-196, y3-186 mapped onto it). */
  body.pdp .pdp3-eyebrow { left: 0; top: 0; width: 0; height: 0; }
  body.pdp .pdp3-eyebrow-text {
    position: absolute; left: calc(1106.76 * var(--u)); top: calc(86.864 * var(--u)); white-space: nowrap; line-height: 1;
    font-size: calc(23.595 * var(--u)); letter-spacing: 0.1215em; word-spacing: 0.1833em;
  }
  body.pdp .pdp3-eyebrow::after {
    position: absolute; left: calc(1450 * var(--u)); top: calc(99 * var(--u)); width: calc(379 * var(--u));
    height: max(1px, calc(2 * var(--u)));
  }
  body.pdp .pdp3-glyph { position: absolute; left: calc(1843.366 * var(--u)); top: calc(83.366 * var(--u)); width: calc(42.268 * var(--u)); height: auto; }

  /* H2: two lines as set; the mockup sets the second ~17% larger than the first (both ink boxes fitted). */
  body.pdp .pdp3-title { left: 0; top: 0; width: 0; height: 0; }
  body.pdp .pdp3-title span { position: absolute; white-space: nowrap; line-height: 1; }
  body.pdp .pdp3-t1 { left: calc(1101.406 * var(--u)); top: calc(156.194 * var(--u)); font-size: calc(107.991 * var(--u)); letter-spacing: -0.0171em; word-spacing: 0.1609em; }
  body.pdp .pdp3-t2 { left: calc(1107.799 * var(--u)); top: calc(261.418 * var(--u)); font-size: calc(126.312 * var(--u)); letter-spacing: 0.0429em; }

  /* Body: the mockup's seven lines, each a block of the column width, JUSTIFIED by word spacing (one
     letter-spacing for every line); the last line of each paragraph sits ragged. No hyphenation. */
  body.pdp .pdp3-body { left: 0; top: 0; width: 0; height: 0; font-size: calc(28.4 * var(--u)); letter-spacing: 0.0217em; }
  body.pdp .pdp3-body span {
    position: absolute; display: block; left: calc(1111.262 * var(--u)); width: calc(584.402 * var(--u)); line-height: 1;
    text-align: justify; text-align-last: justify; hyphens: manual; word-spacing: -0.2em;
  }
  /* The justified lines start from a tightened word space so each fits its column in both engines before
     justification widens the gaps; the paragraph-final lines keep the face's own word space, ragged. */
  body.pdp .pdp3-p1 .pdp3-l3, body.pdp .pdp3-p2 .pdp3-l4 { text-align-last: left; word-spacing: normal; }
  body.pdp .pdp3-p1 .pdp3-l1 { top: calc(416.036 * var(--u)); }
  body.pdp .pdp3-p1 .pdp3-l2 { top: calc(459.605 * var(--u)); }
  body.pdp .pdp3-p1 .pdp3-l3 { top: calc(503.594 * var(--u)); }
  body.pdp .pdp3-p2 .pdp3-l1 { top: calc(571.516 * var(--u)); }
  body.pdp .pdp3-p2 .pdp3-l2 { top: calc(613.739 * var(--u)); }
  body.pdp .pdp3-p2 .pdp3-l3 { top: calc(653.695 * var(--u)); }
  body.pdp .pdp3-p2 .pdp3-l4 { top: calc(695.04 * var(--u)); }
  /* Rule under the body: core row 761 with halos 760/762, x1111-1736 (one 2u line, summed darkness). */
  body.pdp .pdp3-body::after {
    content: ""; position: absolute; left: calc(1111 * var(--u)); top: calc(760 * var(--u)); width: calc(626 * var(--u));
    height: max(1px, calc(2 * var(--u))); background: var(--pdp3-rule);
  }

  /* Pull quote: four lines as set, one size (ink height, FONTS.md), per-line tracking fitted to each line's ink width
     and each line's baseline (bottom of the x-height band) on the mockup's. */
  body.pdp .pdp3-quote { left: 0; top: 0; width: 0; height: 0; font-size: calc(60.0 * var(--u)); }
  body.pdp .pdp3-quote span { position: absolute; white-space: nowrap; line-height: 1; }
  body.pdp .pdp3-q1 { left: calc(1111.75 * var(--u)); top: calc(815.361 * var(--u)); letter-spacing: 0.0627em; }
  body.pdp .pdp3-q2 { left: calc(1113.732 * var(--u)); top: calc(889.97 * var(--u)); letter-spacing: 0.0461em; }
  body.pdp .pdp3-q3 { left: calc(1116.045 * var(--u)); top: calc(962.762 * var(--u)); letter-spacing: 0.0058em; }
  body.pdp .pdp3-q4 { left: calc(1118.735 * var(--u)); top: calc(1035.984 * var(--u)); letter-spacing: 0.0637em; }
}

/* ================= Section 4: "Nothing hidden. Everything declared." (mockup pdp-s2-03.png, 2048x1152) =========
   Palette: docs/korkunova-pdp4/PALETTE.md; fonts: docs/korkunova-pdp4/FONTS.md. Appended directly below
   section 3; every rule is scoped under body.pdp .pdp4. Desktop (>=1100) is authored in this mockup's pixels
   (y 0 = section 3's bottom edge) times the shared --u, so it fills the page width like the sections above.
   Text-run numbers were fitted to the mockup ink boxes at 2048 (scratch tooling pipeline/work/kp4-build/,
   gitignored; see docs/korkunova-pdp4/reports/REPORT-G3.md). The connector lines are one inline SVG in the
   mockup's own coordinate space (viewBox 0 0 2048 1152), laid over the section, so they scale with --u exactly. */
:root {
  --pdp4-rose-text: #AC776C;
  --pdp4-ink: #363839;
  --pdp4-ink-foot: #232425;
  --pdp4-line: #DDC8AB;
  --pdp4-hair: #E1CBAD;
}

/* ---- Base (all widths): shared type and colour; the <1100 and >=1100 blocks below set the layout ---- */
body.pdp .pdp4 { position: relative; background: var(--pdp2-cream-low); color: var(--pdp2-ink-soft); font-family: var(--pdp-book); text-align: left; }
body.pdp .pdp4 h2, body.pdp .pdp4 h3, body.pdp .pdp4 p, body.pdp .pdp4 dl, body.pdp .pdp4 dt, body.pdp .pdp4 dd { margin: 0; padding: 0; }
body.pdp .pdp4-bottle, body.pdp .pdp4-glyph { display: block; max-width: none; }
body.pdp .pdp4-eyebrow, body.pdp .pdp4-label { font-family: var(--sans); font-weight: 400; color: var(--pdp4-rose-text); }
body.pdp .pdp4-orn::before, body.pdp .pdp4-orn::after { content: ""; background: var(--pdp4-hair); }
body.pdp .pdp4-title { font-family: var(--serif); font-weight: 400; color: var(--pdp2-ink-soft); }
body.pdp .pdp4-title span { color: var(--pdp2-rose); }
body.pdp .pdp4-sub { color: var(--pdp4-ink); }
body.pdp .pdp4-name { font-family: var(--serif); font-weight: 500; color: var(--pdp3-ink-body); }
body.pdp .pdp4-foot { color: var(--pdp4-ink-foot); }
body.pdp .pdp4-lines { fill: none; stroke-width: 2; pointer-events: none; }
/* Strokes are 2 mockup px (>= 1 CSS px from 1100 up) in a colour of half the measured 1-px line's darkness; the
   rings 2.25 (the mockup's rings are ~10% darker than its lines). The inner ends fade as the mockup's do. */
body.pdp .pdp4-lines .pdp4-dot { stroke: var(--pdp4-line); stroke-width: 2.25; }
body.pdp .pdp4-lines .pdp4-stop { stop-color: var(--pdp4-line); }

/* ---- Below 1100: the designed layout, on the bands of sections 1-3 ----
   One grid; the DOM order (header, left list, bottle, right list, footer) is the desktop reading order, and the
   areas place the blocks per band. The connector SVG is not rendered below 1100 (see the 900-1099 note).
   < 900: header centred on a measure capped at 640px (eyebrow, ornament, H2 on two lines - "Nothing hidden." /
   "Everything declared.", the second sentence forced to its own line and neither split - subline balanced); the
   bottle; ACTIVE PHEROMONES then FRAGRANCE (side by side from 600, on a 760px measure); the footer line last.
   The bottle photo is 1.45:1 with the bottle left of centre and the shadow trailing right, so it is cropped for
   the slot (object-fit: cover): below 600 edge to edge at 11:10 (file x 1.4-77.4%: bottle, plinth and the start
   of the shadow), 600-899 the same crop 560px wide, centred. Bottle + plinth sit at file x 8-62.5%, y 5-88.6%,
   inside the mask's solid core (plinth ends 8.6% / 19.6% in from the sides; the fade takes 7% of each side, 4% at
   the top - the cap starts at 5% - and the bottom 10%, below the plinth); the label at x 25-46%, y 42-51%, far
   inside it. Descriptions wrap with text-wrap: pretty (balance where unsupported): no one-word last lines. The mask fades all four
   edges into the cream (the photo's cream is within 2 levels of the section's), so no hard photo edge shows
   above or below. Selectors carry .pdp4 twice so they outrank the base reset (body.pdp .pdp4 p { margin: 0 }). */
@media (max-width: 1099.98px) {
  body.pdp .pdp4 {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eb" "orn" "h2" "sub" "bottle" "l" "r" "foot";
    padding: 44px max(20px, calc((100% - 760px) / 2)) 48px; text-align: center;
  }
  body.pdp .pdp4 .pdp4-eyebrow { grid-area: eb; }
  body.pdp .pdp4 .pdp4-orn { grid-area: orn; }
  body.pdp .pdp4 .pdp4-title { grid-area: h2; }
  body.pdp .pdp4 .pdp4-sub { grid-area: sub; }
  body.pdp .pdp4 .pdp4-bottle { grid-area: bottle; }
  body.pdp .pdp4 .pdp4-col-l { grid-area: l; }
  body.pdp .pdp4 .pdp4-col-r { grid-area: r; }
  body.pdp .pdp4 .pdp4-foot { grid-area: foot; }
  body.pdp .pdp4 .pdp4-eyebrow, body.pdp .pdp4 .pdp4-title, body.pdp .pdp4 .pdp4-sub, body.pdp .pdp4 .pdp4-foot, body.pdp .pdp4 .pdp4-col { width: 100%; max-width: 640px; justify-self: center; }
  body.pdp .pdp4 .pdp4-eyebrow { font-size: clamp(11px, 3.1vw, 14px); letter-spacing: 0.16em; word-spacing: 0.1em; line-height: 1.3; }
  body.pdp .pdp4 .pdp4-orn { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
  body.pdp .pdp4 .pdp4-orn::before, body.pdp .pdp4 .pdp4-orn::after { width: 40px; height: 1px; }
  body.pdp .pdp4 .pdp4-glyph { width: clamp(28px, 7.4vw, 34px); height: auto; }
  body.pdp .pdp4 .pdp4-title { margin-top: 10px; font-size: clamp(34px, 9.6vw, 60px); line-height: 1.12; letter-spacing: 0.01em; white-space: nowrap; }
  body.pdp .pdp4 .pdp4-title span { display: block; }
  body.pdp .pdp4 .pdp4-sub { margin-top: 14px; font-size: clamp(17px, 4.5vw, 19px); line-height: 1.5; text-wrap: balance; }
  body.pdp .pdp4 .pdp4-bottle {
    width: calc(100% + 40px); max-width: none; height: auto; margin: 24px -20px 0; justify-self: center;
    aspect-ratio: 11 / 10; object-fit: cover; object-position: 6% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 90%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 90%, transparent);
    mask-composite: intersect;
  }
  body.pdp .pdp4 .pdp4-lines { display: none; }
  body.pdp .pdp4 .pdp4-col { margin-top: 28px; text-align: left; }
  body.pdp .pdp4 .pdp4-label { font-size: 13px; letter-spacing: 0.2em; line-height: 1.4; }
  body.pdp .pdp4 .pdp4-item { margin-top: 18px; }
  body.pdp .pdp4 .pdp4-name { font-size: 26px; line-height: 1.2; letter-spacing: 0.02em; }
  body.pdp .pdp4 .pdp4-desc { margin-top: 4px; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
  @supports not (text-wrap: pretty) { body.pdp .pdp4 .pdp4-desc { text-wrap: balance; } }
  body.pdp .pdp4 .pdp4-foot { margin-top: 36px; font-size: 17px; line-height: 1.5; letter-spacing: 0.02em; text-wrap: balance; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  body.pdp .pdp4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; grid-template-areas: "eb eb" "orn orn" "h2 h2" "sub sub" "bottle bottle" "l r" "foot foot"; }
  body.pdp .pdp4 .pdp4-bottle { width: 560px; margin: 24px 0 0; }
  body.pdp .pdp4 .pdp4-col { max-width: none; }
}
/* 900-1099: the three-column composition - header, left list | bottle | right list, footer. Scaled from the
   desktop (x --u) the bodies would render 10.9-13.3px, under the 16px floor, so the columns re-flow at their own
   sizes instead: the text columns widen (251-312px) and the bottle takes a narrower 9:10 crop (file x 4.2-66.3%:
   the bottle and the whole plinth, centred, its ends 6.2% in from the sides) 30% of the page wide, centred on the
   lists; the side fades narrow to 5% (eased: 20% opaque at 2.5%) so both plinth ends sit in the opaque core while
   the photo edge stays within 3 levels of the cream where the shadow reaches it. The connectors are not drawn here:
   on desktop each one is fixed geometry in the mockup's own space, aimed from a name's cap-height to a measured point short of
   the glass; once the columns re-flow, the names' heights change with every width while the bottle does not, so
   a static SVG cannot keep a ring on its name and the end short of the glass across the band, and the page has no
   script to re-draw it (spec: no JS). A connector that misses its name reads as a defect, so the band drops them. */
@media (min-width: 900px) and (max-width: 1099.98px) {
  body.pdp .pdp4 {
    grid-template-columns: minmax(0, 1fr) 30cqw minmax(0, 1fr); column-gap: 28px;
    grid-template-areas: "eb eb eb" "orn orn orn" "h2 h2 h2" "sub sub sub" "l bottle r" "foot foot foot";
    padding: 56px clamp(28px, 4cqw, 44px) 48px;
  }
  body.pdp .pdp4 .pdp4-eyebrow { font-size: 12px; }
  body.pdp .pdp4 .pdp4-glyph { width: 30px; }
  body.pdp .pdp4 .pdp4-title, body.pdp .pdp4 .pdp4-sub { max-width: none; }
  body.pdp .pdp4 .pdp4-title { font-size: 4.8cqw; }
  body.pdp .pdp4 .pdp4-title span { display: inline; }
  body.pdp .pdp4 .pdp4-sub { font-size: 18px; }
  body.pdp .pdp4 .pdp4-bottle {
    width: 100%; margin: 28px 0 0; align-self: center; aspect-ratio: 9 / 10; object-position: 11% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2) 2.5%, #000 5%, #000 95%, rgba(0, 0, 0, 0.2) 97.5%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2) 2.5%, #000 5%, #000 95%, rgba(0, 0, 0, 0.2) 97.5%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 90%, transparent);
  }
  body.pdp .pdp4 .pdp4-col { max-width: none; margin-top: 40px; }
  body.pdp .pdp4 .pdp4-name { font-size: 24px; }
  body.pdp .pdp4 .pdp4-desc { font-size: 17px; }
  body.pdp .pdp4 .pdp4-foot { max-width: none; margin-top: 40px; }
}

/* ================= Desktop (>=1100): the mockup composition, mockup px x --u ================= */
@media (min-width: 1100px) {
  body.pdp .pdp4 { height: calc(1152 * var(--u)); padding: 0; isolation: isolate; }
  body.pdp .pdp4 > * { position: absolute; margin: 0; }
  body.pdp .pdp4 .pdp4-col, body.pdp .pdp4-list, body.pdp .pdp4-item, body.pdp .pdp4-desc { left: 0; top: 0; width: 0; height: 0; }
  body.pdp .pdp4-list, body.pdp .pdp4-item, body.pdp .pdp4-desc { position: absolute; }
  body.pdp .pdp4-eyebrow, body.pdp .pdp4-title, body.pdp .pdp4-sub, body.pdp .pdp4-label, body.pdp .pdp4-name, body.pdp .pdp4-desc span, body.pdp .pdp4-foot {
    position: absolute; white-space: nowrap; line-height: 1;
  }
  body.pdp .pdp4-desc span { display: block; }

  /* Bottle photo: H01 registered to the mockup region [600,330,1190,822] at identity (REPORT-F1). Its cream sits
     within 2 levels of the page's, so a mask fades the top (30u), left (70u) and right (90u) edges into the section;
     the bottom runs to the section's (and the page's) bottom edge with the shadow, as the mockup's does. Under
     the connectors and every text run. */
  body.pdp .pdp4-bottle {
    left: calc(600 * var(--u)); top: calc(330 * var(--u)); width: calc(1190 * var(--u)); height: calc(822 * var(--u)); z-index: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5.882%, #000 92.437%, transparent), linear-gradient(180deg, transparent, #000 3.65%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 5.882%, #000 92.437%, transparent), linear-gradient(180deg, transparent, #000 3.65%);
    mask-composite: intersect;
  }
  body.pdp .pdp4-lines { left: 0; top: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
  body.pdp .pdp4 > :not(.pdp4-bottle):not(.pdp4-lines) { z-index: 2; }

  /* Header: eyebrow, the ornament (glyph ink x1014-1051, y112-144: the file's ink x3-196 mapped onto it; hairlines
     x948-1000 / x1061-1112 on row ~123.2 (placed by render: the engines snap the 2u line to whole rows, 123-124 at 2048, centroid 123.5), each one 2u line of the summed darkness of the 1-px core + its halo),
     the H2 on ONE line with the rose second sentence, the subline. */
  body.pdp .pdp4-eyebrow { left: calc(785.908 * var(--u)); top: calc(69.294 * var(--u)); font-size: calc(23.156 * var(--u)); letter-spacing: 0.2411em; word-spacing: 0.1067em; }
  body.pdp .pdp4-orn { left: 0; top: 0; width: 0; height: 0; }
  body.pdp .pdp4-orn::before, body.pdp .pdp4-orn::after { position: absolute; top: calc(122.68 * var(--u)); height: calc(2 * var(--u)); }
  body.pdp .pdp4-orn::before { left: calc(948 * var(--u)); width: calc(53 * var(--u)); }
  body.pdp .pdp4-orn::after { left: calc(1061 * var(--u)); width: calc(52 * var(--u)); }
  body.pdp .pdp4-glyph { position: absolute; left: calc(1013.412 * var(--u)); top: calc(111.412 * var(--u)); width: calc(39.175 * var(--u)); height: auto; }
  body.pdp .pdp4-title { left: calc(373.885 * var(--u)); top: calc(162.328 * var(--u)); font-size: calc(86.451 * var(--u)); letter-spacing: 0.02em; word-spacing: 0.0223em; }
  body.pdp .pdp4-sub { left: calc(458.885 * var(--u)); top: calc(273.862 * var(--u)); font-size: calc(30.582 * var(--u)); letter-spacing: 0.0379em; word-spacing: 0.0695em; }

  /* Columns: label, then name + description pairs. One name size and one body size for both columns, x per column;
     each line at the mockup's own top with its own tracking (the mockup tracks its lines unevenly, up to ~8%). */
  body.pdp .pdp4-col-l .pdp4-label { left: calc(166.434 * var(--u)); top: calc(375.251 * var(--u)); font-size: calc(21.701 * var(--u)); letter-spacing: 0.2515em; word-spacing: -0.0142em; }
  body.pdp .pdp4-col-r .pdp4-label { left: calc(1651.572 * var(--u)); top: calc(374.169 * var(--u)); font-size: calc(21.753 * var(--u)); letter-spacing: 0.2229em; }
  body.pdp .pdp4-name { font-size: calc(37.951 * var(--u)); }
  body.pdp .pdp4-col-l .pdp4-name { left: calc(163.506 * var(--u)); }
  body.pdp .pdp4-col-r .pdp4-name { left: calc(1628.844 * var(--u)); }
  body.pdp .pdp4-i1 .pdp4-name { top: calc(435.191 * var(--u)); letter-spacing: 0.036em; }
  body.pdp .pdp4-i2 .pdp4-name { top: calc(639.202 * var(--u)); letter-spacing: 0.0192em; }
  body.pdp .pdp4-i3 .pdp4-name { top: calc(853.904 * var(--u)); letter-spacing: 0.0188em; }
  body.pdp .pdp4-i4 .pdp4-name { top: calc(438.376 * var(--u)); letter-spacing: 0.033em; }
  body.pdp .pdp4-i5 .pdp4-name { top: calc(642.78 * var(--u)); letter-spacing: 0.0222em; }
  body.pdp .pdp4-i6 .pdp4-name { top: calc(856.321 * var(--u)); letter-spacing: 0.0377em; }
  body.pdp .pdp4-desc { font-size: calc(24.831 * var(--u)); }
  body.pdp .pdp4-col-l .pdp4-desc span { left: calc(165.806 * var(--u)); }
  body.pdp .pdp4-col-r .pdp4-desc span { left: calc(1627.342 * var(--u)); }
  body.pdp .pdp4-i1 .pdp4-l1 { top: calc(487.507 * var(--u)); letter-spacing: 0.0219em; }
  body.pdp .pdp4-i1 .pdp4-l2 { top: calc(523.607 * var(--u)); letter-spacing: 0.0372em; }
  body.pdp .pdp4-i1 .pdp4-l3 { top: calc(558.335 * var(--u)); letter-spacing: 0.036em; }
  body.pdp .pdp4-i2 .pdp4-l1 { top: calc(693.833 * var(--u)); letter-spacing: 0.0243em; }
  body.pdp .pdp4-i2 .pdp4-l2 { top: calc(728.021 * var(--u)); letter-spacing: 0.0154em; }
  body.pdp .pdp4-i2 .pdp4-l3 { top: calc(763.404 * var(--u)); letter-spacing: 0.0258em; }
  body.pdp .pdp4-i3 .pdp4-l1 { top: calc(908.182 * var(--u)); letter-spacing: 0.0199em; }
  body.pdp .pdp4-i3 .pdp4-l2 { top: calc(942.859 * var(--u)); letter-spacing: 0.0209em; }
  body.pdp .pdp4-i4 .pdp4-l1 { top: calc(492.982 * var(--u)); letter-spacing: 0.055em; }
  body.pdp .pdp4-i4 .pdp4-l2 { top: calc(528.994 * var(--u)); letter-spacing: 0.0162em; }
  body.pdp .pdp4-i5 .pdp4-l1 { top: calc(698.984 * var(--u)); letter-spacing: 0.0089em; }
  body.pdp .pdp4-i5 .pdp4-l2 { top: calc(735.038 * var(--u)); letter-spacing: 0.0147em; }
  body.pdp .pdp4-i6 .pdp4-l1 { top: calc(911.448 * var(--u)); letter-spacing: 0.0072em; }
  body.pdp .pdp4-i6 .pdp4-l2 { top: calc(947.552 * var(--u)); letter-spacing: 0.016em; }

  /* Footer line over the shadow (above the photo in the stacking order). */
  body.pdp .pdp4-foot { left: calc(676.053 * var(--u)); top: calc(1084.208 * var(--u)); font-size: calc(26.038 * var(--u)); letter-spacing: 0.0395em; word-spacing: 0.0574em; }
}

/* ================= Section 5: "Made in Pensacola, Florida. Not China." (mockup pdp-s2-04.png, 2048x1152) =========
   Palette: docs/korkunova-pdp5/PALETTE.md; fonts: docs/korkunova-pdp5/FONTS.md. Appended directly below
   section 4; every rule is scoped under body.pdp .pdp5. Desktop (>=1100) is authored in this mockup's pixels
   (y 0 = section 4's bottom edge) times the shared --u, so it fills the page width like the sections above.
   Text-run numbers were fitted to the mockup ink boxes at 2048 (scratch tooling pipeline/work/kp5-build/,
   gitignored). Rules, the eyebrow hairline and the three cell dividers are CSS: each one a 2u line (>= 1 CSS px
   from 1100 up) in a colour of half the summed darkness of the mockup's 1-2 px line and its halo. */
:root {
  --pdp5-rose-text: #A16E67;
  --pdp5-ink: #181B1E;
  --pdp5-ink-label: #101214;
  --pdp5-ink-foot: #4A4949;
  --pdp5-hair: #D1C1AC;
  --pdp5-divider: #DBD3CB;
}

/* ---- Base (all widths): shared type and colour; the <1100 and >=1100 blocks below set the layout ---- */
body.pdp .pdp5 { position: relative; background: var(--pdp-cream); color: var(--pdp5-ink); font-family: var(--pdp-book); text-align: left; }
body.pdp .pdp5 h2, body.pdp .pdp5 p, body.pdp .pdp5 ul, body.pdp .pdp5 li { margin: 0; padding: 0; }
body.pdp .pdp5 ul { list-style: none; }
body.pdp .pdp5-photo, body.pdp .pdp5-glyph, body.pdp .pdp5-icons img { display: block; max-width: none; }
body.pdp .pdp5-eyebrow-text { font-family: var(--sans); font-weight: 400; color: var(--pdp5-rose-text); }
body.pdp .pdp5-eyebrow::after { content: ""; background: var(--pdp5-hair); }
body.pdp .pdp5-title { font-family: var(--serif); font-weight: 300; color: var(--pdp3-ink-body); }
body.pdp .pdp5-rose { color: var(--pdp2-rose-text); }
body.pdp .pdp5-icons { color: var(--pdp5-ink-label); }
body.pdp .pdp5-foot { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--pdp5-ink-foot); }
body.pdp .pdp5-body::before, body.pdp .pdp5-body::after, body.pdp .pdp5-icons::after { content: ""; background: var(--pdp2-rule); }
body.pdp .pdp5-icons li + li::before { content: ""; background: var(--pdp5-divider); }

/* ---- Below 1100: the designed narrow layout, on the bands of sections 1-4 (type floors: body copy >= 16px,
   spaced caps >= 11px; hairlines 1 CSS px). The DOM order is the reading order in every band: photo, eyebrow
   (caps, gold hairline, butterfly), H2, rule, body, rule, icon row, rule, refund line.
   < 900: the photo is a full-width band on top - 5:4 below 600, 4:3 at 600-899 - cropped by cover around the pour
   (object-position 50% 58%, REPORT-J1: file rows 23-83% at 5:4 and 25-82% at 4:3 keep the bottle, both hands,
   beaker, funnel and cap; at 4:3 the apron wordmark clips at the top), then the text column on the 20px gutter
   and a 640px measure, with sections 2-4's narrow rhythm (44px of cream above the eyebrow, 48px under the last line).
   900-1099: the desktop split, scaled - the photo fills the left 940/2048 of the section edge to edge with the hard
   edge, the text column right of it on sections 2-3's split padding. The body re-flows at its own size (the mockup's
   forced breaks only hold at desktop scale, where it renders 13.5-16.5px here), so the section grows taller than
   1152u and the cover crop follows the taller column: the narrowest column (900) shows file x 10-90%, all of the
   pour. H2 spans keep "Made in Pensacola," and "Not China." unbroken; the only other break is after "Florida.".
   Icons keep their desktop sizes and tops relative to the label (em of the label size), so the labels share one
   baseline as in the mockup (label box 3.92em below the icon row's top), and keep their two-line breaks;
   4-up from 600 with a divider between neighbouring cells, 2x2 below 600 with one divider between the two
   columns of each row (the cells' left edge in the right column), none at an outer edge. ---- */
@media (max-width: 1099.98px) {
  body.pdp .pdp5 { display: flex; flex-direction: column; padding: 0 20px 48px; }
  body.pdp .pdp5 > :not(.pdp5-photo) { width: 100%; max-width: 640px; margin-inline: auto; }
  body.pdp .pdp5 .pdp5-photo {
    width: calc(100% + 40px); height: auto; margin: 0 -20px; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 58%;
  }
  body.pdp .pdp5 .pdp5-eyebrow { display: flex; align-items: center; gap: 12px; margin-top: 44px; }
  body.pdp .pdp5-eyebrow-text { flex: none; white-space: nowrap; font-size: clamp(11px, 3.1vw, 14px); letter-spacing: 0.12em; line-height: 1.3; }
  body.pdp .pdp5-eyebrow::after { order: 1; flex: 1 1 auto; min-width: 20px; height: 1px; }
  body.pdp .pdp5-glyph { order: 2; flex: none; width: clamp(28px, 7.4vw, 34px); height: auto; }
  body.pdp .pdp5 .pdp5-title { margin-top: 10px; font-size: clamp(40px, 10.4vw, 64px); line-height: 1.08; }
  body.pdp .pdp5-t1, body.pdp .pdp5-rose { white-space: nowrap; }
  body.pdp .pdp5 .pdp5-body { margin-top: 28px; font-size: clamp(17px, 4.5vw, 19px); line-height: 1.6; text-wrap: pretty; }
  /* no one-word last line (REVIEW-S5 #8b); engines without `pretty` (Firefox) balance the paragraph instead */
  @supports not (text-wrap: pretty) { body.pdp .pdp5 .pdp5-body { text-wrap: balance; } }
  body.pdp .pdp5-body::before, body.pdp .pdp5-body::after, body.pdp .pdp5-icons::after { display: block; height: 1px; }
  body.pdp .pdp5-body::before { margin-bottom: 22px; }
  body.pdp .pdp5-body::after { margin-top: 24px; }
  body.pdp .pdp5 .pdp5-icons {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; margin-top: 26px;
    text-align: center; font-size: 17px; line-height: 1.25;
  }
  body.pdp .pdp5 .pdp5-icons li { position: relative; display: grid; grid-template-rows: 3.92em auto; justify-items: center; align-items: start; padding: 0 6px; }
  body.pdp .pdp5-icons img { height: auto; }
  body.pdp .pdp5-i1 img { width: 2.603em; margin-top: 0.147em; }
  body.pdp .pdp5-i2 img { width: 2.924em; }
  body.pdp .pdp5-i3 img { width: 2.024em; }
  body.pdp .pdp5-i4 img { width: 2.482em; }
  body.pdp .pdp5-icons span { display: block; white-space: nowrap; }
  body.pdp .pdp5-icons li + li::before { position: absolute; left: 0; top: 0.35em; bottom: 0; width: 1px; }
  body.pdp .pdp5-icons .pdp5-i3::before { content: none; }
  body.pdp .pdp5-icons::after { grid-column: 1 / -1; margin-top: 0; }
  body.pdp .pdp5 .pdp5-foot { margin-top: 22px; font-size: 17px; line-height: 1.5; text-align: center; text-wrap: balance; }
}
@media (min-width: 600px) and (max-width: 1099.98px) {
  body.pdp .pdp5 .pdp5-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.pdp .pdp5-icons .pdp5-i3::before { content: ""; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  body.pdp .pdp5 .pdp5-photo { aspect-ratio: 4 / 3; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  body.pdp .pdp5 {
    display: block; min-height: calc(1152 * var(--u));
    padding: 56px clamp(28px, 4cqw, 44px) 56px calc(940 / 2048 * 100% + clamp(28px, 4cqw, 44px));
  }
  body.pdp .pdp5 > :not(.pdp5-photo) { max-width: none; margin-inline: 0; }
  body.pdp .pdp5 .pdp5-photo {
    position: absolute; left: 0; top: 0; width: calc(940 / 2048 * 100%); height: 100%; margin: 0; aspect-ratio: auto;
    object-position: 50% 58%;
  }
  body.pdp .pdp5 .pdp5-eyebrow { margin-top: 0; }
  body.pdp .pdp5-eyebrow-text { font-size: 12px; }
  body.pdp .pdp5-glyph { width: 30px; }
  body.pdp .pdp5 .pdp5-title { margin-top: 12px; font-size: 5.2cqw; }
  body.pdp .pdp5 .pdp5-body { margin-top: 26px; font-size: 18px; line-height: 1.55; }
  body.pdp .pdp5 .pdp5-icons { font-size: 16px; }
  body.pdp .pdp5 .pdp5-foot { margin-top: 20px; }
}

/* ================= Desktop (>=1100): the mockup composition, mockup px x --u ================= */
@media (min-width: 1100px) {
  body.pdp .pdp5 { height: calc(1152 * var(--u)); padding: 0; isolation: isolate; }
  body.pdp .pdp5 > * { position: absolute; margin: 0; }
  body.pdp .pdp5-eyebrow, body.pdp .pdp5-title, body.pdp .pdp5-body, body.pdp .pdp5-icons, body.pdp .pdp5-icons li { position: absolute; left: 0; top: 0; width: 0; height: 0; }
  body.pdp .pdp5-eyebrow-text, body.pdp .pdp5-title > span, body.pdp .pdp5-body span, body.pdp .pdp5-icons span, body.pdp .pdp5-foot {
    position: absolute; white-space: nowrap; line-height: 1;
  }

  /* Photo box [0,0,940,1152]: the 1152x1536 master by cover, scaled by width; object-position 51.7% puts the
     bottle and funnel within 5 px of the mockup's (REPORT-J1). Hard right edge at x940, no fade. */
  body.pdp .pdp5-photo { left: 0; top: 0; width: calc(940 * var(--u)); height: calc(1152 * var(--u)); object-fit: cover; object-position: 50% 51.7%; }

  /* Eyebrow, its hairline (x1365-1719 on rows 129-130: one 2u line, centroid 129.8) and the butterfly (display
     box from REPORT-J2: the file's alpha>64 box mapped onto the mockup ink x1731-1765, y117-146). */
  body.pdp .pdp5-eyebrow::after { position: absolute; left: calc(1365 * var(--u)); top: calc(128.8 * var(--u)); width: calc(355 * var(--u)); height: max(1px, calc(2 * var(--u))); }
  body.pdp .pdp5-glyph { position: absolute; left: calc(1730.5 * var(--u)); top: calc(116.5 * var(--u)); width: calc(36.1 * var(--u)); height: auto; }

  /* Rules: rows 466-467, 741 (+ halo 740) and 992 (+ halo 993, centroid 992.4), x1051.5-1919.5. */
  body.pdp .pdp5-body::before, body.pdp .pdp5-body::after, body.pdp .pdp5-icons::after {
    position: absolute; left: calc(1051.5 * var(--u)); width: calc(868 * var(--u)); height: max(1px, calc(2 * var(--u)));
  }
  body.pdp .pdp5-body::before { top: calc(466 * var(--u)); }
  body.pdp .pdp5-body::after { top: calc(740 * var(--u)); }
  body.pdp .pdp5-icons::after { top: calc(991.6 * var(--u)); }

  /* Icon row: four cells; the three dividers (centres x1250, 1491.3, 1709.8; y795-947) sit between cells only.
     Each icon at its REPORT-J2 display box, each label line where the mockup's is. */
  body.pdp .pdp5-icons li + li::before { position: absolute; top: calc(795 * var(--u)); width: max(1px, calc(2 * var(--u))); height: calc(153 * var(--u)); }
  body.pdp .pdp5-i2::before { left: calc(1249 * var(--u)); }
  body.pdp .pdp5-i3::before { left: calc(1490.3 * var(--u)); }
  body.pdp .pdp5-i4::before { left: calc(1708.8 * var(--u)); }
  body.pdp .pdp5-icons img { position: absolute; height: auto; }

  /* Even line weights: a fractional 2u line snaps to 1 or 2 device rows depending on where it lands (REVIEW-S5 #7),
     so where round() is supported every rule, divider and the hairline is a whole number of px thick
     (max(1px, round(2u)): 1px below 1536, 2px to 2047, 3px at 2560) on a whole-px offset centred on the mockup line. */
  @supports (top: round(1.5px, 1px)) {
    body.pdp .pdp5 { --pdp5-lw: max(1px, round(calc(2 * var(--u)), 1px)); }
    body.pdp .pdp5-eyebrow::after { top: round(calc(129.8 * var(--u) - var(--pdp5-lw) / 2), 1px); height: var(--pdp5-lw); }
    body.pdp .pdp5-body::before, body.pdp .pdp5-body::after, body.pdp .pdp5-icons::after { height: var(--pdp5-lw); }
    body.pdp .pdp5-body::before { top: round(calc(467 * var(--u) - var(--pdp5-lw) / 2), 1px); }
    body.pdp .pdp5-body::after { top: round(calc(741 * var(--u) - var(--pdp5-lw) / 2), 1px); }
    body.pdp .pdp5-icons::after { top: round(calc(992.6 * var(--u) - var(--pdp5-lw) / 2), 1px); }
    body.pdp .pdp5-icons li + li::before { width: var(--pdp5-lw); }
    body.pdp .pdp5-i2::before { left: round(calc(1250 * var(--u) - var(--pdp5-lw) / 2), 1px); }
    body.pdp .pdp5-i3::before { left: round(calc(1491.3 * var(--u) - var(--pdp5-lw) / 2), 1px); }
    body.pdp .pdp5-i4::before { left: round(calc(1709.8 * var(--u) - var(--pdp5-lw) / 2), 1px); }
  }
  body.pdp .pdp5-i1 img { left: calc(1098.6 * var(--u)); top: calc(789.6 * var(--u)); width: calc(68.8 * var(--u)); }
  body.pdp .pdp5-i2 img { left: calc(1326.7 * var(--u)); top: calc(785.7 * var(--u)); width: calc(77.3 * var(--u)); }
  body.pdp .pdp5-i3 img { left: calc(1571.8 * var(--u)); top: calc(785.8 * var(--u)); width: calc(53.5 * var(--u)); }
  body.pdp .pdp5-i4 img { left: calc(1783.7 * var(--u)); top: calc(785.7 * var(--u)); width: calc(65.6 * var(--u)); }

  /* Text runs: each line at the mockup's own ink box (size from ink height, tracking from the summed ink width
     of its words, word spacing from the rest). One body size and one label size. */
  body.pdp .pdp5-eyebrow-text { left: calc(1055.061 * var(--u)); top: calc(115.493 * var(--u)); font-size: calc(24.912 * var(--u)); letter-spacing: 0.1348em; word-spacing: 0.2313em; }
  body.pdp .pdp5-t1 { left: calc(1052.365 * var(--u)); top: calc(180.474 * var(--u)); font-size: calc(109.452 * var(--u)); letter-spacing: 0.0361em; word-spacing: -0.0260em; }
  body.pdp .pdp5-t2 { left: calc(1051.821 * var(--u)); top: calc(296.230 * var(--u)); font-size: calc(117.793 * var(--u)); letter-spacing: -0.0192em; word-spacing: 0.0785em; }
  body.pdp .pdp5-l1 { left: calc(1056.412 * var(--u)); top: calc(511.864 * var(--u)); font-size: calc(30.752 * var(--u)); letter-spacing: 0.0685em; word-spacing: -0.0194em; }
  body.pdp .pdp5-l2 { left: calc(1054.938 * var(--u)); top: calc(564.385 * var(--u)); font-size: calc(30.752 * var(--u)); letter-spacing: 0.0607em; word-spacing: 0.0040em; }
  body.pdp .pdp5-l3 { left: calc(1055.245 * var(--u)); top: calc(617.670 * var(--u)); font-size: calc(30.752 * var(--u)); letter-spacing: 0.0499em; word-spacing: 0.0225em; }
  body.pdp .pdp5-l4 { left: calc(1054.642 * var(--u)); top: calc(670.791 * var(--u)); font-size: calc(30.752 * var(--u)); letter-spacing: 0.0614em; word-spacing: 0.0129em; }
  body.pdp .pdp5-i1 .pdp5-k1 { left: calc(1057.317 * var(--u)); top: calc(892.710 * var(--u)); font-size: calc(26.435 * var(--u)); letter-spacing: -0.0463em; word-spacing: 0.1945em; }
  body.pdp .pdp5-i2 .pdp5-k1 { left: calc(1318.559 * var(--u)); top: calc(892.094 * var(--u)); font-size: calc(26.435 * var(--u)); letter-spacing: -0.0171em; word-spacing: 0.1836em; }
  body.pdp .pdp5-i2 .pdp5-k2 { left: calc(1292.276 * var(--u)); top: calc(924.980 * var(--u)); font-size: calc(26.435 * var(--u)); letter-spacing: -0.0076em; word-spacing: 0.1334em; }
  body.pdp .pdp5-i3 .pdp5-k1 { left: calc(1534.214 * var(--u)); top: calc(892.543 * var(--u)); font-size: calc(26.435 * var(--u)); letter-spacing: -0.0207em; word-spacing: 0.1843em; }
  body.pdp .pdp5-i3 .pdp5-k2 { left: calc(1574.556 * var(--u)); top: calc(925.297 * var(--u)); font-size: calc(26.435 * var(--u)); letter-spacing: -0.0229em; }
  body.pdp .pdp5-i4 .pdp5-k1 { left: calc(1781.781 * var(--u)); top: calc(892.873 * var(--u)); font-size: calc(26.435 * var(--u)); letter-spacing: -0.0134em; }
  body.pdp .pdp5-i4 .pdp5-k2 { left: calc(1766.178 * var(--u)); top: calc(925.500 * var(--u)); font-size: calc(26.435 * var(--u)); letter-spacing: -0.0040em; }
  body.pdp .pdp5-foot { left: calc(1160.181 * var(--u)); top: calc(1025.134 * var(--u)); font-size: calc(23.986 * var(--u)); letter-spacing: 0.0981em; word-spacing: -0.1440em; }
}