/* ============================================================
 * legal.css — the ONE legal-page look (mobile screen 2f · desktop D2).
 *
 * Shared by /terms/, /privacy-policy/, /refund-policy/, /shipping/,
 * /disclaimer/, /affiliate-disclosure/. Each of those pages has a
 * one-line `page-<slug>.css` that @imports this file, because the
 * plugin's per-page convention (capriastro-engine.php) enqueues
 * `page-<slug>.css` by URI and adding a six-slug enqueue there would
 * mean editing shared code. See the build report for the single
 * enqueue line that would replace the six one-liners.
 *
 * The COPY is the owner's, untouched, inside the Elementor text-editor
 * widget (`.cap-legal__body`). This file styles the raw h2/h3/p/ul/table
 * that widget emits — no classes are added to the prose, so the owner can
 * keep editing it in Elementor and it stays styled.
 *
 * Token-only; scoped `.cap-shell …` (Elementor's kit styles bare a/p/li).
 * ============================================================ */

.cap-shell .cap-legal { padding-bottom: var(--cap-space-xl); }

/* D2 — measure left, section-nav rail right; the nav spans both head rows so
   it sits level with the title. Under 1280 everything is one column and the
   DOM order (head · nav · body · links) is already the mobile order. */
.cap-shell .cap-legal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cap-rail);
  grid-template-rows: auto auto auto;
  column-gap: var(--cap-gutter-rail);
  row-gap: var(--cap-space-md);
  align-items: start;
  padding-top: var(--cap-space-after-header);
}
.cap-shell .cap-legal__head  { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--cap-space-md); }
.cap-shell .cap-legal__nav   { grid-column: 2; grid-row: 1 / span 2; display: none; }
.cap-shell .cap-legal__nav.is-ready { display: block; }
.cap-shell .cap-legal__body  { grid-column: 1; grid-row: 2; max-width: var(--cap-measure); }
.cap-shell .cap-legal__body a.cap-legal__name { white-space: nowrap; }   /* a link's name moves to the next line whole (owner 2026-10-02, E1; legal.js marks them) */
.cap-shell .cap-legal__links { grid-column: 1 / -1; grid-row: 3; }

/* head — the title is the page's own Elementor heading widget, so the h1 role
   is applied to what that widget prints rather than by adding a class to it. */
.cap-shell .cap-legal__head .cap-h1,
.cap-shell .cap-legal__title .elementor-heading-title {
  font-family: var(--cap-font-display); font-weight: 800; font-size: var(--cap-type-xl);
  line-height: var(--cap-leading-display); letter-spacing: var(--cap-track-display);
  color: var(--cap-color-text); margin: 0;
}
.cap-shell .cap-legal-updated {
  align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-updated-badge);
  letter-spacing: var(--cap-track-meta); text-transform: uppercase; line-height: var(--cap-leading-ui);
  color: var(--cap-color-primary);
  border: var(--cap-border-hairline) solid var(--cap-color-primary);
  border-radius: var(--cap-radius-pill); padding: var(--cap-btn-pad-xs);
}
/* two dates in one pill (Terms, Privacy — owner 2026-10-01): " · " between them, drawn by the second date's span (legal.js);
   the pill flows as text so the space before the "·" stays the place a narrow pill breaks — the "·" opens the next line */
.cap-shell .cap-legal-updated:has(.cap-legal-updated__second) { display: inline-block; text-align: start; }   /* round 32 (owner 2026-10-06): left, as on the Refunds page — was centred */
/* the " · " between the dates is a .cap-sep span legal.js adds — dropped where the second date starts a line (owner 2026-10-07) */
.cap-shell :is(.cap-legal-updated__first, .cap-legal-updated__second) { white-space: nowrap; }   /* a date never splits (owner 2026-10-07) */

/* "On this page" — built from the body's own h2s (see the inline builder), so
   it can never drift from copy the owner edits. Hidden until it has links. */
.cap-shell .cap-legal__nav-list { display: flex; flex-direction: column; gap: var(--cap-space-sm); margin-top: var(--cap-space-sm); }
.cap-shell .cap-legal__navlink {
  font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-sm);
  letter-spacing: var(--cap-track-ui); text-transform: uppercase; line-height: var(--cap-leading-tight);
  color: var(--cap-color-text);
}
@media (hover: hover) { .cap-shell .cap-legal__navlink:hover { color: var(--cap-color-primary); } }
/* the items read as links (owner 2026-10-01): ink, with the thin violet underline our other text links carry */
.cap-shell .cap-legal__navlink { text-decoration: underline; text-decoration-color: var(--cap-color-primary); text-decoration-thickness: var(--cap-border-hairline); text-underline-offset: var(--cap-space-gap-2); align-self: flex-start; }
/* legal.js: a numbered section heading set as a bold paragraph ("1. The short version") wears the h2 style; a blank
   paragraph (a lone space) takes no room. Styling only — the words and the stored page are untouched. */
.cap-shell .cap-legal__body p.cap-legal__h b, .cap-shell .cap-legal__body p.cap-legal__h strong { font-weight: inherit; }
.cap-shell .cap-legal__body p.cap-legal__blank { display: none; }

/* ─── the owner's prose ───────────────────────────────────── */
/* Elementor's kit sets `.elementor-widget-text-editor { font-family; color }`
   on the widget itself, so an inherited face on the wrapper loses to it —
   the role has to be re-stated on the widget (0,3,0 beats the kit's 0,1,0). */
.cap-shell .cap-legal__body,
.cap-shell .cap-legal__body .elementor-widget-text-editor {
  font-family: var(--cap-font-serif); font-weight: 400;
  font-size: var(--cap-type-base); line-height: var(--cap-leading-body);
  color: var(--cap-color-text-body);
}
/* the kit paints every button in its own accent — the design's pill instead */
.cap-shell .cap-legal .elementor-widget-button .elementor-button {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-btn);
  letter-spacing: var(--cap-track-btn); text-transform: uppercase; line-height: var(--cap-leading-ui);
  padding: var(--cap-btn-pad-m); border-radius: var(--cap-radius-pill);
  border: var(--cap-border-hairline) solid transparent;
  background-color: var(--cap-color-text); color: var(--cap-color-bg);
  fill: var(--cap-color-bg); box-shadow: none;
  transition: background-color var(--cap-ease), color var(--cap-ease);
}
@media (hover: hover) { .cap-shell .cap-legal .elementor-widget-button .elementor-button:hover { background-color: var(--cap-color-primary); color: var(--cap-color-bg); } }
.cap-shell .cap-legal .elementor-widget-button { margin-bottom: var(--cap-space-md); }
.cap-shell .cap-legal__body > :first-child { margin-top: 0; }
/* the head owns the space above the FIRST section (the grid's row gap) — but
   only the first: a later widget that opens on an h2 keeps its own space. */
.cap-shell .cap-legal__body > .elementor-element:first-child .elementor-widget-container > h2:first-child { margin-top: 0; }
.cap-shell .cap-legal__body p { margin: 0 0 var(--cap-space-md); }
.cap-shell .cap-legal__body b,
.cap-shell .cap-legal__body strong { font-weight: 600; color: var(--cap-color-text); }
.cap-shell .cap-legal__body a { color: var(--cap-color-primary); border-bottom: var(--cap-border-hairline) solid var(--cap-color-primary); overflow-wrap: anywhere; }   /* a bare URL may break (the Privacy Policy's pushed a phone 14 px wide) */
.cap-shell .cap-legal__body :is(p, li, td, th) { overflow-wrap: anywhere; }   /* a web address set as plain text in the approved text (the Privacy Policy's Anthropic and Google addresses, 2026-10-18) breaks only where it cannot fit — ordinary words never break */
@media (hover: hover) { .cap-shell .cap-legal__body a:hover { color: var(--cap-color-text); border-bottom-color: var(--cap-color-text); } }

/* section heading — role A (Barlow 500, .1em, uppercase, ink) */
.cap-shell .cap-legal__body :is(h2, p.cap-legal__h) {
  font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-section);
  letter-spacing: var(--cap-track-label); text-transform: uppercase; line-height: var(--cap-leading-tight);
  color: var(--cap-color-text);
  margin: calc(var(--cap-space-lg) + var(--cap-space-md)) 0 var(--cap-space-md);   /* 48 above every section heading (owner 2026-10-01, the Shipping evening: it was 32 inside one text block, 48 across two) */
  scroll-margin-top: var(--cap-space-lg);
}
/* sub-heading — role B2 */
.cap-shell .cap-legal__body h3,
.cap-shell .cap-legal__body h4 {
  font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-subchapter);
  letter-spacing: var(--cap-track-label); text-transform: uppercase; line-height: var(--cap-leading-tight);
  color: var(--cap-color-text);
  margin: var(--cap-space-md) 0 var(--cap-space-sm);
}
/* lists — prose, so serif, marked with the ✦ the design uses everywhere */
.cap-shell .cap-legal__body ul,
.cap-shell .cap-legal__body ol { margin: 0 0 var(--cap-space-md); padding-left: var(--cap-space-md); }
.cap-shell .cap-legal__body ul { list-style: none; padding-left: 0; }
.cap-shell .cap-legal__body ul > li { position: relative; padding-left: var(--cap-space-lg); margin-bottom: var(--cap-space-sm); }
.cap-shell .cap-legal__body ul > li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--cap-color-primary); font-family: var(--cap-font-ui); }
.cap-shell .cap-legal__body ol > li { margin-bottom: var(--cap-space-sm); }

/* tables — square, hairline-ruled, data in Barlow (the design's data rule) */
.cap-shell .cap-legal__body table { width: 100%; border-collapse: collapse; margin: 0 0 var(--cap-space-md); border-top: var(--cap-border-hairline) solid var(--cap-color-line); }
.cap-shell .cap-legal__body th,
.cap-shell .cap-legal__body td { text-align: left; vertical-align: top; padding: var(--cap-space-cell-y) var(--cap-space-cell-x); border-bottom: var(--cap-border-hairline) solid var(--cap-color-line); }   /* the correspondences table's cells (owner 2026-09-30) */
.cap-shell .cap-legal__body thead td { padding-top: var(--cap-space-head-y); padding-bottom: var(--cap-space-head-y); }
.cap-shell .cap-legal__body thead td,
.cap-shell .cap-legal__body th { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-sm); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-text); }
.cap-shell .cap-legal__body thead td p,
.cap-shell .cap-legal__body td p:last-child { margin-bottom: 0; }
.cap-shell .cap-legal__body td { font-size: var(--cap-type-small); }

/* ─── legal link row ──────────────────────────────────────── */
.cap-shell .cap-legal__links { margin-top: var(--cap-space-lg); padding-top: var(--cap-space-md); border-top: var(--cap-border-hairline) solid var(--cap-color-line); }
.cap-shell .cap-legal__links-row { display: flex; flex-wrap: wrap; gap: var(--cap-space-sm) var(--cap-space-md); }
.cap-shell .cap-legal__links-row a { color: var(--cap-color-muted); }
@media (hover: hover) { .cap-shell .cap-legal__links-row a:hover { color: var(--cap-color-text); } }
.cap-shell .cap-legal__links-row a.is-current { color: var(--cap-color-text); border-bottom: var(--cap-border-selected) solid var(--cap-color-primary); padding-bottom: var(--cap-space-xs); }

@media (max-width: 1279px) {
  .cap-shell .cap-legal__grid { grid-template-columns: 1fr; row-gap: var(--cap-space-lg); }
  .cap-shell .cap-legal__head,
  .cap-shell .cap-legal__nav,
  .cap-shell .cap-legal__body,
  .cap-shell .cap-legal__links { grid-column: 1; grid-row: auto; }
  .cap-shell .cap-legal__body { max-width: none; }
}
@media (max-width: 699px) {
  .cap-shell .cap-legal__grid { padding-top: var(--cap-space-lg); row-gap: var(--cap-space-card-pad); }
  .cap-shell .cap-legal__head { gap: var(--cap-space-sm); }
  .cap-shell .cap-legal__body :is(h2, p.cap-legal__h) { font-size: var(--cap-type-section); }
  .cap-shell .cap-legal__body table,
  .cap-shell .cap-legal__body thead,
  .cap-shell .cap-legal__body tbody,
  .cap-shell .cap-legal__body tr,
  .cap-shell .cap-legal__body td { display: block; width: 100%; }
  .cap-shell .cap-legal__body thead { display: none; }
  .cap-shell .cap-legal__body tr { border-bottom: var(--cap-border-hairline) solid var(--cap-color-line); padding: var(--cap-space-sm) 0; }
  .cap-shell .cap-legal__body td { border-bottom: 0; padding: var(--cap-space-xs) 0; }

  /* 2f, 28 Sep sheet (CD's markup at 388): head 11 / .14em → 14 → h1 → 14 → the 10 px badge; the nav box 24 under it
     (13 / 18 pads, 13 px eyebrow and rows 8 apart); the body 24 under the box; h2 17 / .08em, 14 to its paragraph and
     20 above; h3 14 / .08em regular; paragraphs 16 / 1.75 with 14 between; the link row 26 under the body, 20 inside */
  .cap-shell .cap-legal__grid { row-gap: var(--cap-space-lg); }
  .cap-shell .cap-legal__head { gap: var(--cap-space-gap-7); }
  .cap-shell .cap-legal__title .elementor-heading-title { line-height: var(--cap-leading-hero); letter-spacing: var(--cap-track-hero); }
  .cap-shell .cap-legal__head .cap-meta { display: block; }
  /* the badge is the 'Updated' badge role, 10 px at every width (owner 2026-10-07); two dates break at the "·" where narrow */
  .cap-shell .cap-legal__nav { padding: var(--cap-btn-pad-small); }
  .cap-shell .cap-legal__nav .cap-eyebrow { font-size: var(--cap-type-eyebrow); line-height: normal; }
  .cap-shell .cap-legal__nav-list { gap: var(--cap-space-sm); margin-top: var(--cap-space-gap-5); }
  .cap-shell .cap-legal__navlink { font-size: var(--cap-type-label); line-height: normal; }
  .cap-shell .cap-legal__body, .cap-shell .cap-legal__body .elementor-widget-text-editor { line-height: var(--cap-leading-article); }
  .cap-shell .cap-legal__body p { margin-bottom: var(--cap-space-gap-7); }
  .cap-shell .cap-legal__body :is(h2, p.cap-legal__h) { letter-spacing: var(--cap-track-name); line-height: normal; margin: var(--cap-space-panel-pad) 0 var(--cap-space-gap-7); }
  .cap-shell .cap-legal__body h3, .cap-shell .cap-legal__body h4 { font-weight: 500; font-size: var(--cap-mp-type-legal-h3); letter-spacing: var(--cap-track-name); line-height: normal; margin: var(--cap-space-panel-pad) 0 var(--cap-space-gap-7); }
  .cap-shell .cap-legal__links { margin-top: var(--cap-space-card-pad); padding-top: var(--cap-space-panel-pad); border-top-color: var(--cap-color-line); }
  .cap-shell .cap-legal__links-row { gap: var(--cap-space-sm) var(--cap-mp-gyr-contract-split); }
  .cap-shell .cap-legal__links-row a { letter-spacing: var(--cap-track-feature); color: var(--cap-color-caption); line-height: normal; }
  .cap-shell .cap-legal__links-row a.is-current { color: var(--cap-color-text); border-bottom-width: var(--cap-border-hairline); padding-bottom: var(--cap-space-gap-1); }
}

/* the "Legal" eyebrow over every legal page's headline: the standard eyebrow — purple, 16 · .16em — at every width
   (owner 2026-10-01; it was the small grey meta line). Styling only — the words are untouched. */
.cap-shell .cap-legal__head .cap-meta { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-eyebrow); letter-spacing: var(--cap-track-eyebrow); text-transform: uppercase; color: var(--cap-color-primary); line-height: var(--cap-leading-tight); }
/* EVEN GAPS (owner 2026-10-01): across two text blocks the last paragraph's 16 no longer adds to the next heading's 48, so
   every heading sits 48 under the text above it, wherever the owner's blocks split; a double line break inside a paragraph
   (Shipping, "If that's you…") is drawn as the paragraph gap (legal.js), not a whole empty line */
.cap-shell .cap-legal__body > .elementor-element:has(+ .elementor-element .elementor-widget-container > :is(h2, p.cap-legal__h):first-child) .elementor-widget-container > :last-child { margin-bottom: 0; }
.cap-shell .cap-legal__body .cap-legal__pbreak { display: block; height: var(--cap-space-md); }
.cap-shell .cap-legal__body .cap-legal__first.cap-legal__first { margin-top: 0; }   /* legal.js: the first block that shows, after any hidden blank paragraph */
/* the legal-links row below 1280 (owner 2026-10-01): each link a 44 tap band (components.css, THE 44 × 44 TAP AREA), the
   links 24 apart and wrapped lines 44 apart, so no two bands meet */
@media (max-width: 1279px) {
  .cap-shell .cap-legal__links-row { column-gap: var(--cap-gutter); row-gap: calc(var(--cap-tap-min) - 1lh); line-height: var(--cap-leading-tight); font-size: var(--cap-type-meta); }   /* round 31: the row is set in its links' own size, so 1lh is THEIR line — at the row's 16 the wrapped lines (a 320 phone) came 40 apart, not 44 */
  .cap-shell .cap-legal__links-row a { line-height: var(--cap-leading-tight); }
}
/* "On this page" is desktop-only (owner 2026-10-02): below 1280 the box is gone entirely — its rows sat closer than the
   44 tap rule allows. Desktop keeps the clickable list unchanged. */
@media (max-width: 1279px) {
  .cap-shell .cap-legal__nav.cap-legal__nav { display: none; }
}

/* ─── the Shipping page's country lists (owner 2026-10-02, [capriastro_countries]) ───
   one row per region, 44 high, closed at first, the count beside the name; the countries inside run alphabetically,
   in columns (two on a phone, three from 768). */
.cap-shell .cap-countries { margin: 0 0 var(--cap-space-md); border-top: var(--cap-border-hairline) solid var(--cap-color-line); }
.cap-shell .cap-countries__region { border-bottom: var(--cap-border-hairline) solid var(--cap-color-line); }
.cap-shell .cap-countries__row {
  display: flex; align-items: center; gap: var(--cap-space-sm); min-height: var(--cap-tap-min); cursor: pointer; list-style: none;
  font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-label); letter-spacing: var(--cap-track-label);
  text-transform: uppercase; line-height: var(--cap-leading-tight); color: var(--cap-color-text);
}
.cap-shell .cap-countries__row::-webkit-details-marker { display: none; }
.cap-shell .cap-countries__count { color: var(--cap-color-caption); letter-spacing: var(--cap-track-ui); }
.cap-shell .cap-countries__row::after { content: ""; flex: none; margin-left: auto; width: var(--cap-faq-toggle); height: var(--cap-faq-toggle); background: currentColor; color: var(--cap-color-caption); -webkit-mask: url("../img/faq-toggle-plus.svg") center / contain no-repeat; mask: url("../img/faq-toggle-plus.svg") center / contain no-repeat; }   /* the FAQ's + / − */
.cap-shell .cap-countries__region[open] .cap-countries__row::after { color: var(--cap-color-primary); -webkit-mask-image: url("../img/faq-toggle-minus.svg"); mask-image: url("../img/faq-toggle-minus.svg"); }
@media (hover: hover) { .cap-shell .cap-countries__row:hover { color: var(--cap-color-primary); } }
.cap-shell .cap-countries__row:focus-visible { outline: var(--cap-focus-ring); outline-offset: var(--cap-focus-ring-offset); }
.cap-shell .cap-legal__body .cap-countries__list { list-style: none; margin: 0; padding: 0 0 var(--cap-space-md); columns: 3; column-gap: var(--cap-space-md); font-size: var(--cap-type-data); line-height: var(--cap-leading-body); }
.cap-shell .cap-legal__body .cap-countries__list li { margin: 0; padding: 0 0 0 var(--cap-space-gap-6); text-indent: calc(-1 * var(--cap-space-gap-6)); break-inside: avoid; }   /* a wrapped name indents its second line, so "Bosnia and / Herzegovina" never reads as two countries (owner 2026-10-02, E2) */
.cap-shell .cap-legal__body .cap-countries__list li::before { content: none; }
@media (max-width: 699px) { .cap-shell .cap-legal__body .cap-countries__list { columns: 2; } }

/* THE FOOTER GAP (owner 2026-10-02): from the last thing on the page to the footer, 64 from 700 up and 40 on a phone. */
.cap-shell .cap-legal { padding-bottom: var(--cap-space-footer-gap); }

/* THE TABLES ON A PHONE (owner 2026-10-02): each row is one tidy block — a full hairline border, 12 inside, 8 between rows. The
   theme's own table rules (grey half-borders on every cell, the grey stripe on odd rows) are switched off here; the first cell
   leads, the second is labelled with its column heading (legal.js copies it into data-label) and set lighter. Tablet and
   desktop keep the table as it is. */
@media (max-width: 699px) {
  .cap-shell .cap-legal__body table { border-top: 0; }
  .cap-shell .cap-legal__body tbody tr { border: var(--cap-border-hairline) solid var(--cap-color-line-strong); padding: var(--cap-space-block-2); margin: 0 0 var(--cap-space-sm); }
  .cap-shell .cap-legal__body tbody tr > td { border: 0; padding: 0; background: transparent; }
  .cap-shell .cap-legal__body tbody tr > td + td { margin-top: var(--cap-space-block-2); color: var(--cap-color-text-secondary); }
  .cap-shell .cap-legal__body tbody tr > td + td[data-label]::before { content: attr(data-label); display: block; margin-bottom: var(--cap-space-xs); font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-caption); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-caption); }
}