/*
 * Custom Irish — type scale
 * =========================
 * Ratio-based scale derived from thecoachhouse.ie, per Sinéad's request to use
 * that site's font ratios as the reference.
 *
 * ---------------------------------------------------------------------------
 * REVERT PATH
 * ---------------------------------------------------------------------------
 * This file is deliberately separate from theme-brand.css and is enqueued on
 * its own handle ('customirish-type') in functions.php. To undo the entire type
 * change without touching colour, fonts or layout work:
 *
 *     1. Delete this file, OR
 *     2. Comment out the single wp_enqueue_style( 'customirish-type', ... )
 *        line in functions.php
 *
 * Nothing else depends on it. A backup of the pre-change state is also kept at
 * aaa_remote/_type-scale-backup/ on staging.
 * ---------------------------------------------------------------------------
 *
 * ---------------------------------------------------------------------------
 * WHERE THE TYPE ACTUALLY COMES FROM — read before "fixing" it in Elementor
 * ---------------------------------------------------------------------------
 * Elementor's Global Fonts are set (kit post 283) and ARE wired to the tags:
 * Primary -> H1, Secondary -> H2, Accent -> H3, Text -> body/links. Values:
 *
 *   Primary   "H1 - Page Title"   Cormorant Garamond 400, capitalize,
 *                                 64px desktop / 42 tablet / 38 mobile, lh 1.23
 *   Secondary "H2 - Section"      Cormorant Garamond 400, capitalize,
 *                                 44.8px / 32 mobile, lh 1.3
 *   Accent    "H3 - Subsection"   Cormorant Garamond 400, UPPERCASE,
 *                                 35.2px / 26 mobile, ls 0.15rem, lh 1.35
 *   Text      "Body Text"         EB Garamond 400, 19.2px / 18 mobile, lh 1.6
 *
 * BUT those globals are not what renders. Every size rule in this file carries
 * !important, so THIS FILE WINS wherever the two disagree. Editing the Global
 * Fonts panel will look like it does nothing. Two consequences worth knowing:
 *
 *   - The desktop values agree by design (64 / 44.8 / 35.2 / 19.2), because the
 *     globals were set to the same measured Coach House numbers this scale uses.
 *     So on desktop you cannot tell which one is in charge. It is this file.
 *   - They disagree on mobile. The Elementor global drops body copy to 18px;
 *     --fs-body here is a flat 1.2rem, so 19.2px renders at every width and the
 *     Elementor mobile setting is dead. Headings differ too, since this file
 *     uses clamp() to scale fluidly rather than snapping at Elementor's
 *     breakpoints — at 390px: H2 33.8px, H3 28.4px, not Elementor's 32 / 26.
 *
 * A third source USED TO outrank both — per-widget Elementor typography set on
 * individual widgets. The homepage H1 was the clearest case, rendering 48px
 * desktop / 27.45px mobile, which matched neither the global nor this file.
 *
 * RESOLVED 15 Aug. A sweep of 170 visible headings across 16 page types found
 * **zero** unexplained deviations: every H1, H2 and H3 on the site now takes its
 * size, line-height, tracking, transform and family from this file. The
 * homepage hero was the last one and now inherits --fs-hero. So the answer to
 * "where does this heading's type come from" is, finally, just this file.
 *
 * Four deliberate exceptions remain, and they are exceptions, not strays:
 *   - product title       40px / 1.05 / 600  (64px put it on five lines)
 *   - product card titles 28px               (h2/h3 in a three-across grid)
 *   - blog card titles    28px               (same reasoning, listing cards)
 *   - WooCommerce headings need the carve-out further down this file, because
 *     `body .woocommerce *` in theme-brand.css forces the body face on them.
 *
 * If a heading ever looks wrong in one place only, re-run the sweep before
 * assuming it is hand-set — the sweep is what found the checkout headings
 * silently rendering in EB Garamond.
 * ---------------------------------------------------------------------------
 *
 * MEASURED REFERENCE (thecoachhouse.ie, desktop, root 16px)
 *   H1 hero      64px / lh 79  (1.23)  weight 400
 *   H2 section   44.8px / lh 58 (1.30) weight 400
 *   Paragraph    19px / lh 31  (1.60)  weight 400
 *
 * CUSTOM IRISH BEFORE THIS FILE
 *   H1  34px (smaller than H2 — a hierarchy bug)
 *   H2  48px
 *   H3  22px
 *   p   14px / lh 1.5     <- the main problem: Garamond has a small x-height,
 *                            so 14px read much smaller than the old Manrope
 *
 * APPROACH
 * Sizes use clamp() so they scale fluidly between mobile and desktop instead of
 * snapping at breakpoints. The middle term is expressed in rem + vw so the
 * scale still respects a user's browser font-size setting (an accessibility
 * requirement — a fixed vw-only value would ignore it).
 *
 * Heading weight drops to 500. Coach House runs its headings at 400; Cormorant
 * Garamond at the previous 600/700 reads far heavier and blockier than the
 * reference, so matching sizes alone would not have matched the feel.
 */

:root {
	/*
	 * Sizes below are the MEASURED values from thecoachhouse.ie (DevTools),
	 * not approximations:
	 *   h1  64px      h2  44.8px     p  19.2px
	 *   nav 19.2px    buttons 16px   footer links 19.2px
	 *
	 * Each is expressed as clamp(mobile-floor, fluid, coach-house-value) so the
	 * desktop rendering matches the reference exactly while still scaling down
	 * on small screens. The middle term uses rem + vw so a visitor's browser
	 * font-size setting is still respected.
	 */
	/*
	 * Flat 1.2rem (19.2px), not a clamp.
	 *
	 * Coach House declares a fixed 1.2rem, so its body copy is 19.2px at every
	 * width. Our fluid version only reached 19.2px at viewports >=1200px
	 * (16.8px + 0.002 * W = 19.2 solves to W = 1200), so any narrower window
	 * rendered smaller than the reference. rem keeps the browser's own
	 * font-size setting respected, which a px value would ignore.
	 */
	--fs-body:    1.2rem;
	--fs-small:   clamp(16px, 0.95rem + 0.15vw, 16.5px);
	/* ----------------------------------------------------------------------
	 * HEADINGS — the client's spec sheet, 15 Aug. These values are transcribed
	 * from it and are not to be "improved":
	 *
	 *              DESKTOP (1200px+)              MOBILE (768px and below)
	 *   H1  64px / lh 1.15 / ls -0.5px      40px / lh 1.2 / ls -0.5px
	 *   H2  40px / lh 1.25 / ls 0px         28px / lh 1.3 / ls 0px
	 *   H3  20px / lh 1.4  / ls 2px         16px / lh 1.4 / ls 1.5px
	 *
	 *   All three Cormorant Garamond. H1 and H2 Initial Caps, H3 ALL CAPS.
	 *   Body text EB Garamond.
	 *
	 * THE GAP: the sheet defines 768-and-below and 1200-and-up, and says
	 * nothing about 769-1199px. Rather than snap from 40px to 64px at 1200,
	 * the sizes interpolate across that band with clamp(), tuned to land on
	 * the specified value exactly at each end. Check the arithmetic before
	 * editing: H1 slope (64-40)/(1200-768) = 0.055556/px = 5.5556vw, and
	 * 40 - 0.055556*768 = -2.667px, so the middle term hits 40px at 768 and
	 * 64px at 1200. Same method for H2 and H3.
	 *
	 * PX, NOT REM: the sheet specifies pixels, so pixels is what this is. It
	 * is a deliberate departure from the rest of this file, which uses rem so
	 * a visitor's browser font-size setting is respected. These headings now
	 * ignore that setting. Swapping to rem (64px = 4rem at a 16px root) would
	 * render identically at default settings and restore the behaviour — one
	 * line each, if the accessibility point outweighs literal compliance.
	 * ---------------------------------------------------------------------- */
	--fs-h1:      clamp(40px, -2.667px + 5.5556vw, 64px);
	--fs-h2:      clamp(28px,  6.667px + 2.7778vw, 40px);
	--fs-h3:      clamp(16px,  8.889px + 0.9259vw, 20px);

	/* Mobile line-heights and tracking; the desktop values are swapped in at
	   1200px in the media query below. */
	--lh-h1:      1.2;
	--lh-h2:      1.3;
	--lh-h3:      1.4;
	--ls-h1:      -0.5px;
	--ls-h2:      0px;
	--ls-h3:      1.5px;

	/* The hero headline is an H1 and takes the H1 spec — confirmed 15 Aug. */
	--fs-hero:    clamp(40px, -2.667px + 5.5556vw, 64px);

	/*
	 * Product-card titles are h2/h3 markup sitting in a three-across grid, so
	 * they do not follow the heading spec — at the H2 size a card title would
	 * be 40px. Left at the approved 28px. Flagged to Gerald as the one place
	 * the spec is not applied literally.
	 */
	--fs-card-title: clamp(24px, 1.40rem + 0.70vw, 28px);
	--fs-nav:     1.2rem;   /* Coach House nav is 19.2px flat too */
	--fs-button:  16px;

	--lh-body:    1.6;
	--lh-heading: 1.23;   /* legacy — headings now use --lh-h1/h2/h3 */
	--wt-heading: 400;    /* Coach House runs headings at 400, not 500 */
}

/*
 * Desktop half of the spec sheet, stated literally.
 *
 * The sizes are re-declared here rather than left to the clamps' maxima, and
 * that is not belt-and-braces — the clamps alone were measurably wrong. `vw`
 * resolves against a viewport that excludes the scrollbar, so at a 1200px
 * window the ramp only reached 63.17 / 39.58 / 19.86 instead of 64 / 40 / 20.
 * Close, but the sheet gives exact numbers. Declaring them at the breakpoint
 * makes 1200px-and-up exact regardless of scrollbar width; the clamps now only
 * do the job they are actually needed for, which is the 769-1199px band the
 * sheet leaves undefined.
 */
@media (min-width: 1200px) {
	:root {
		--fs-h1:   64px;
		--fs-h2:   40px;
		--fs-h3:   20px;
		--fs-hero: 64px;
		--lh-h1:   1.15;
		--lh-h2:   1.25;
		--ls-h3:   2px;
	}
}

/* --------------------------------------------------------------------------
   Body copy
   -------------------------------------------------------------------------- */
body,
body p,
body li,
body td,
body .elementor-widget-text-editor,
body .woocommerce-product-details__short-description,
body .entry-content p {
	font-size: var(--fs-body) !important;
	line-height: var(--lh-body) !important;
}

/* Small print keeps EB Garamond Medium per the brief — 400 goes muddy at these
   sizes, especially on mobile. */
body small,
body .product_meta,
body figcaption,
body .copyright,
body .copyright p {
	font-size: var(--fs-small) !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */
/* H1 — Initial Caps per the sheet. text-transform is set here rather than left
   to the Elementor kit so it holds even if the kit is edited. */
body h1,
body .entry-title,
body .product_title,
body .elementor-widget-heading h1.elementor-heading-title {
	font-size: var(--fs-h1) !important;
	line-height: var(--lh-h1) !important;
	letter-spacing: var(--ls-h1) !important;
	font-family: var(--font-heading, 'Cormorant Garamond'), Garamond, 'Times New Roman', serif !important;
	text-transform: capitalize !important;
	font-weight: var(--wt-heading) !important;
}

/* H2 — Initial Caps. */
body h2,
body .elementor-widget-heading h2.elementor-heading-title {
	font-size: var(--fs-h2) !important;
	line-height: var(--lh-h2) !important;
	letter-spacing: var(--ls-h2) !important;
	font-family: var(--font-heading, 'Cormorant Garamond'), Garamond, 'Times New Roman', serif !important;
	text-transform: capitalize !important;
	font-weight: var(--wt-heading) !important;
}

/* H3 — ALL CAPS with the wider tracking the sheet asks for. */
body h3,
body .elementor-widget-heading h3.elementor-heading-title {
	font-size: var(--fs-h3) !important;
	line-height: var(--lh-h3) !important;
	letter-spacing: var(--ls-h3) !important;
	font-family: var(--font-heading, 'Cormorant Garamond'), Garamond, 'Times New Roman', serif !important;
	text-transform: uppercase !important;
	font-weight: var(--wt-heading) !important;
}

/*
 * WooCommerce headings — claw back the heading face.
 *
 * theme-brand.css (~line 407) carries
 *     body .woocommerce, body .woocommerce * { font-family: var(--font-body) !important }
 * to force EB Garamond across WooCommerce's UI. The `*` catches headings too,
 * and at (0,1,1) it outranks the plain `body h3` rule above at (0,0,2) — a
 * class beats two elements — so the checkout's "Billing details", "Ship to a
 * different address?" and "Your order" rendered in EB Garamond while every
 * other H3 on the site was Cormorant. Found by the 15 Aug sweep, not by eye.
 *
 * These selectors score (0,1,2) and take the headings back without touching the
 * brand rule, which is doing a real job for the rest of the Woo interface.
 */
body .woocommerce h1,
body .woocommerce h2,
body .woocommerce h3,
body .woocommerce .elementor-heading-title {
	font-family: var(--font-heading, 'Cormorant Garamond'), Garamond, 'Times New Roman', serif !important;
}

/*
 * Hero headline only. The homepage hero carried the largest type before this
 * change and should stay the biggest thing on the site; inner-page H1s use the
 * smaller --fs-h1 so a product title does not compete with it.
 */
body.home .elementor-location-header + * h1,
body.home .elementor-element-4021a3fa h1,
body.home .elementor-element-4021a3fa .elementor-heading-title {
	font-size: var(--fs-hero) !important;
	line-height: 1.15 !important;
}

/* --------------------------------------------------------------------------
   Product listings — titles were sized for the old sans-serif
   -------------------------------------------------------------------------- */
body ul.products li.product .woocommerce-loop-product__title,
body .wc-block-grid__product-title {
	font-size: var(--fs-card-title) !important;
	line-height: 1.3 !important;
	font-weight: var(--wt-heading) !important;
}

body ul.products li.product .price,
body .woocommerce-Price-amount {
	font-size: var(--fs-body) !important;
}

/* --------------------------------------------------------------------------
   Navigation sits slightly below body size so it does not shout
   -------------------------------------------------------------------------- */
body #primary_menu nav > ul > li > a,
body .main-navigation ul.menu > li > a {
	font-size: var(--fs-nav) !important;
}

/*
 * Dropdown items.
 *
 * The rule above uses direct-child combinators, so it only ever reached the
 * top level — every submenu link stayed on Elementor's 16px. A dropdown is
 * still primary navigation and should not shrink just because it is nested.
 */
body ul.sub-menu a,
body ul.sub-menu li a,
body .elementor-nav-menu--dropdown a,
body ul.elementor-nav-menu--dropdown li a,
body .sub-menu .elementor-item,
body #primary_menu ul ul li a,
body .main-navigation ul.menu ul li a {
	font-size: var(--fs-nav) !important;
	line-height: 1.5 !important;
}

/*
 * Top utility bar ("Help", and the account link — "Account" logged out, the
 * user's first name logged in). 14px -> 16px in the type pass, now 19.6px to
 * match the currency switcher sitting beside them in the same bar.
 *
 * The earlier 16px was deliberately a step below the main nav, on the grounds
 * that this is secondary navigation. That is now reversed on purpose: the bar
 * reads as one row, and leaving two 16px links next to a 19.6px switcher looked
 * like an oversight rather than a hierarchy. Side effect worth knowing — at
 * 19.6px these links are marginally LARGER than the main nav (--fs-nav, 1.2rem
 * / 19.2px), so the utility bar is no longer subordinate by size.
 *
 * The bar is an Elementor container, not the theme's .top-bar, so it is
 * targeted by the id Elementor gives it (#top_bar--menu) as well as by the
 * generic selectors — the theme ones alone matched nothing. Verified reach:
 * exactly four elements, all in widget 25aaea9a — the two visible links and
 * their two hidden mobile duplicates. Nothing else in the header matches.
 */
body #top_bar--menu a,
body #top_bar--menu .elementor-item,
body .top-bar a,
body .top-bar li,
body .top-bar p,
body .shoptimizer-top-bar a,
body .header-widget-region a {
	font-size: 1.225rem !important;
}

/*
 * Currency switcher — the closed label was the last 15px thing in the bar.
 *
 * Aelia ships `.wc_aelia_cs_currency_selector` at 15px and everything inside
 * inherits it, so "Pound Sterling" sat below even the 16px links beside it.
 *
 * Note it was ALREADY inconsistent with itself: the open dropdown's rows are
 * `<li>`, so `body li` above hit them with --fs-body (19.2px) while the closed
 * label stayed 15px — the text grew when you opened the menu. Both arms are
 * set to 19.6px here so the switcher reads at one size open or closed, and
 * matches the promo strip below it.
 *
 * `li.option` needs its own arm: `body li` carries !important, so inheriting
 * from the selector root would not have reached the dropdown rows.
 *
 * Side effect, accepted: the bar's line-height is the inherited 1.6 ratio, not
 * a fixed value, so the switcher's row grows with the text — 24px (15 x 1.6)
 * to 31.4px (19.6 x 1.6). The utility bar is therefore ~7px taller than it
 * was. If it ever needs to go back to a slim 24px row, add
 * `line-height: 24px` to this rule rather than shrinking the text: 19.6px sits
 * in a 24px row at a 1.22 ratio, which is tight but legal for a single line.
 */
body .wc_aelia_cs_currency_selector,
body .wc_aelia_cs_currency_selector .currency_name,
body .wc_aelia_cs_currency_selector li.option {
	font-size: 1.225rem !important;
}

/*
 * Currency switcher, part 2 — the OPEN dropdown was sized to the CLOSED label,
 * so the longest currency name truncated for everyone not on US dollars.
 *
 * Reported as a browser difference (the client sees "United States (US) D...",
 * we don't). It is not the browser — Chrome and Safari render this identically.
 * It is the SELECTED currency. Aelia sizes the open panel from the trigger
 * (`.dropdown { width: 100%; max-width: 100% !important }`) and the trigger is
 * shrink-to-fit, so the panel is only ever as wide as the label you happen to
 * be showing. Measured on staging, desktop, at the 19.6px set above:
 *
 *   selected           trigger   panel    row width   longest name
 *   US dollar           234px    234px      208px        192px   fits
 *   Euro                 80px    200px*     174px        192px   CUT
 *   Pound sterling      154px    200px*     174px        192px   CUT
 *   Canadian dollar     167px    200px*     174px        192px   CUT
 *
 *   * the 200px floor is the header snippet's `min-width` on `.dropdown`
 *     (server-side inline <style>, not this repo), not Aelia's own 130px.
 *     Without it the EUR panel would be 80px wide.
 *
 * 18px short, and `.currency_name` ships `overflow: hidden` +
 * `text-overflow: ellipsis`, so it renders as "United States (US) D...". The
 * client is on EUR and sees it; a US session is the one case that fits, which
 * is why it read as a browser difference.
 *
 * THIS IS OUR REGRESSION, which is why the fix lives in this file. At Aelia's
 * shipped 15px the same name measures ~147px against the same 174px row and
 * fits with room to spare; the 19.6px rule above is what pushed it over. The
 * type size is not being reverted — the panel is being made to size itself.
 *
 * Fix: size the panel to its own rows (`width: max-content`), with the trigger
 * as a floor (`min-width: 100%`) so it can never be narrower than the label it
 * hangs off. `max-width` has to be named explicitly: the plugin ships it as
 * `100% !important`, which would otherwise clamp `max-content` straight back
 * to the trigger's width.
 *
 * After: 218px on every non-USD selection, 234px on USD (the trigger floor
 * wins), nothing cut in any of the four. The panel stays left-aligned under
 * the trigger and grows rightwards; worst case (EUR, the narrowest trigger and
 * therefore the rightmost panel) it ends at 1578px against the header
 * container's 1618px edge — 40px clear — and the whole utility bar carries
 * `elementor-hidden-tablet elementor-hidden-mobile`, so there is no narrow
 * viewport for it to overflow.
 *
 * The ellipsis is deliberately left in place, as a safety net for a currency
 * name longer than anything in the current four.
 */
body .wc_aelia_cs_currency_selector .dropdown {
	width: max-content !important;
	min-width: 100% !important;
	max-width: none !important;
}

/*
 * Wishlist count — put it back to the cart count's size.
 *
 * REGRESSION FIX, and the cause is in this file. The two header bubbles were
 * built to match: the site's own header snippet gives both a 20px circle,
 * #c9dcd1 on #5e7775, at 12px. The cart's number lives in a data-counter
 * attribute, but the wishlist's sits inside
 * `<p class="elementor-icon-box-description">` — so `body p` above, at
 * --fs-body with !important, outranked the snippet's 12px and took it to
 * 19.2px. It overflowed the fixed 20px circle, which is what made it read as
 * both bigger and heavier than the cart beside it.
 *
 * Sized here rather than by removing the !important from `body p`, which is
 * load-bearing for actual copy across the site.
 */
body #wishlist_counter .elementor-icon-box-content,
body #wishlist_counter .elementor-icon-box-description,
body #wishlist_counter p.elementor-icon-box-description,
body .wishlist--count {
	font-size: 12px !important;
	line-height: 20px !important;
	letter-spacing: 0 !important;
}

/*
 * Promo strip — "Free Shipping Available".
 *
 * Elementor has it at 14px Manrope, which was the site-wide small-text default
 * before the type pass and is now the smallest thing in the header. It was
 * raised to 16px, then to 19.6px (1.225rem) on Gerald's call — the strip is a
 * selling point rather than fine print, and at 16px it still read as the
 * quietest thing in the header.
 *
 * 19.6px is a hair above body copy (--fs-body, 1.2rem / 19.2px). Written as
 * rem, not px, so a visitor's browser font-size setting is still respected —
 * the same reason every other size in this file is rem-based.
 *
 * Two widget ids because the strip is duplicated — 96fd7d2 is shown on
 * desktop, 76853939 is the mobile one (each hidden at the other's widths) —
 * so both arms are needed to cover mobile and desktop.
 */
body .elementor-element-96fd7d2 .elementor-image-box-title,
body .elementor-element-76853939 .elementor-image-box-title {
	font-size: 1.225rem !important;
	line-height: 1.4 !important;
}

/*
 * Promo strip icon — sit the truck's wheels on the text baseline.
 *
 * Raising the copy left the truck floating, with dead space under the wheels.
 * That space is NOT margin, which is why a negative margin does not move it:
 * `shipping.svg` is 22.166 x 15 with the default preserveAspectRatio, so when
 * Elementor forces the <img> to a 28px-tall box the artwork scales to fit and
 * is CENTRED in it, letterboxed top and bottom. The dead space is inside the
 * replaced element.
 *
 * The lever is therefore the box height, not any offset: taller box -> the
 * centred artwork moves down. Elementor's own mobile rule
 *   @media (max-width: 767px) .elementor-10224 ... .elementor-image-box-img img
 * had it at 24px, which left the wheels ~1.3px above the baseline. 28px lands
 * them on it. Scoped to the same breakpoint as Elementor's rule; above 767px
 * this widget is hidden and the desktop one (96fd7d2) runs height:auto, so it
 * renders at the SVG's true 22x15 with no letterbox and needs nothing.
 *
 * Do not "tidy" this to height:auto — that removes the letterbox the alignment
 * depends on and lifts the truck ~6px.
 */
@media (max-width: 767px) {
	body .elementor-element-76853939 .elementor-image-box-img img {
		height: 28px !important;
	}
}

/* --------------------------------------------------------------------------
   Sidebar / widget area
   --------------------------------------------------------------------------
   The category and filter sizes live on the <a>, not the <li>, so the earlier
   list rule raised the wrapper to 18px while the visible link stayed at 16px —
   leaving the left column visibly smaller than the product grid beside it.
   Target the links directly so both columns read at the same size.

   Widget titles were 13px, which is small for an uppercase label in Garamond.
   Bumped and given a little tracking so the caps do not crowd.
   -------------------------------------------------------------------------- */
body .widget-area a,
body .widget-area li,
body .widget li a,
body .product-categories li a,
body .widget_product_categories li a,
body .widget_layered_nav li a,
body .wc-layered-nav-term a,
body aside .widget a,
body #secondary a {
	font-size: var(--fs-body) !important;
	line-height: 1.55 !important;
}

body .widget-area .widget-title,
body .widget .widget-title,
body .widget-area .gamma,
body aside .widget-title,
body #secondary .widget-title {
	font-size: clamp(14px, 0.85rem + 0.2vw, 16px) !important;
	letter-spacing: 0.06em !important;
	line-height: 1.4 !important;
}

/* Result count and catalogue sorting sit with the rest of the UI chrome.
   The listbox that replaces the sorting select (ci-sorting-select.js) is named
   here too — its button and its options — so the control keeps one size
   wherever it is drawn. Without it the button matched neither this rule (it is
   not a select) nor the button standard's mobile 16px (.ci-select__button is
   excluded from that on purpose), and fell through to the 12px the sorting
   wrapper inherits. */
body .woocommerce-result-count,
body .woocommerce-ordering select,
body .ci-select__button,
body .ci-select__option {
	font-size: clamp(15px, 0.9rem + 0.2vw, 17px) !important;
}

/* --------------------------------------------------------------------------
   Accordions / toggles — FAQ page
   --------------------------------------------------------------------------
   Same trap as the shop sidebar: the visible question text is the inner
   <a class="elementor-accordion-title">, which carried its own 14px while the
   wrapping div.elementor-tab-title reported 19.2px. The result was a question
   rendering smaller than its own answer.

   17px rather than the full 19.2px body size: these are uppercase and
   letterspaced, so their cap-height already reads about a size larger than
   mixed-case text at the same value. At 19.2px they overpowered the answers.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Header search field
   --------------------------------------------------------------------------
   The input and its placeholder were left at the theme's own small size while
   everything around them moved to 19.2px. Both the typed text and the
   placeholder need setting — a placeholder does not inherit font-size from the
   input in every engine, so ::placeholder is stated explicitly.
   -------------------------------------------------------------------------- */
body .search-field,
body input[type="search"],
body .cgkit-ajax-search input,
body .header-search input,
body .widget_search input,
body form[role="search"] input[type="search"] {
	font-size: var(--fs-body) !important;
	line-height: 1.5 !important;
}

body .search-field::placeholder,
body input[type="search"]::placeholder,
body .cgkit-ajax-search input::placeholder,
body .header-search input::placeholder,
body .widget_search input::placeholder,
body form[role="search"] input[type="search"]::placeholder {
	font-size: var(--fs-body) !important;
	opacity: 1;
}

/*
 * The card subtitle above each accordion ("Common queries answered", "Status of
 * your order") is marked up as an h6, so the global heading rules never touched
 * it and it kept Elementor's 18px. It is a line of body copy, not a heading —
 * sized as such.
 */
body .elementor-widget-heading h6.elementor-heading-title,
body h6.elementor-heading-title {
	font-size: var(--fs-body) !important;
	line-height: var(--lh-body) !important;
	font-weight: 400 !important;
}

body .elementor-accordion-title,
body .elementor-tab-title,
body .elementor-tab-title a,
body .elementor-toggle-title,
body a.elementor-toggle-title {
	font-size: 17px !important;
	line-height: 1.45 !important;
	letter-spacing: 0.05em !important;
}

/* --------------------------------------------------------------------------
   My Account
   --------------------------------------------------------------------------
   The left column links were 16px inside a 19.2px <li> — the size lives on the
   anchor, so the list rule never reached the text. Inline links in the panel
   ("Log out", "recent orders", "shipping and billing addresses") had the same
   problem, which made the dashboard paragraph look like it changed size
   mid-sentence.

   Everything goes to body size. The nav keeps weight 500 so the active item
   still reads as selected without being the only legible thing in the column.
   -------------------------------------------------------------------------- */
body .woocommerce-MyAccount-navigation a,
body .woocommerce-MyAccount-navigation li a,
body .woocommerce-MyAccount-content a,
body .woocommerce-MyAccount-content p,
body .woocommerce-MyAccount-content li,
body .woocommerce-MyAccount-content td,
body .woocommerce-MyAccount-content th {
	font-size: var(--fs-body) !important;
	line-height: var(--lh-body) !important;
}

body .woocommerce-MyAccount-navigation li a {
	font-weight: 500 !important;
}

body .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   Slide-out cart drawer
   --------------------------------------------------------------------------
   Product names were 16px and the "1 x $172.00" line 14px — the smallest text
   in the checkout path, on the one panel where a customer is checking what
   they are about to pay for. Names come up to body size; the quantity/price
   line to 17px so it stays subordinate to the name without being fine print.
   -------------------------------------------------------------------------- */
body .elementor-menu-cart__product-name,
body .elementor-menu-cart__product-name a,
body .widget_shopping_cart_content li a,
body .woocommerce-mini-cart-item a {
	font-size: var(--fs-body) !important;
	line-height: 1.45 !important;
}

body .elementor-menu-cart__product-price,
body .elementor-menu-cart__product .quantity,
body .widget_shopping_cart_content .quantity {
	font-size: 17px !important;
}

body .elementor-menu-cart__subtotal,
body .widget_shopping_cart_content .total {
	font-size: 20px !important;
}

/* The panel title was 18px — smaller than the product names below it, so the
   drawer had no clear top. Sized as a heading in its own right. */
body .elementor-menu-cart__main--title,
body h4.elementor-menu-cart__main--title {
	font-size: 26px !important;
	line-height: 1.3 !important;
}

/*
 * The drawer's variation summary is intentionally NOT pinned here. It used to
 * be held at 16px, and because that selector scores (0,2,3) it also beat the
 * cart page's own variation rule further down the file — the labels on
 * /cart/ stayed at 16px while their values went to 19.2px. The single
 * dl.variation rule below now covers both.
 */

/* --------------------------------------------------------------------------
   Mobile floor
   --------------------------------------------------------------------------
   Never let body copy fall below 16px on small screens: Garamond is already
   small for its point size, and sub-16px inputs cause iOS Safari to zoom the
   viewport on focus.
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {
	/*
	 * 18px, not 16px. Garamond has a small x-height, so 16px reads noticeably
	 * smaller than 16px in a sans-serif would — on a phone it was the weakest
	 * text on the page. 18px still clears the 16px minimum that stops iOS
	 * Safari zooming the viewport when an input takes focus.
	 */
	body,
	body p,
	body li,
	body input,
	body select,
	body textarea {
		font-size: 18px !important;
		line-height: 1.6 !important;
	}
}

/* --------------------------------------------------------------------------
   Footer + copyright bar
   --------------------------------------------------------------------------
   The footer is an Elementor template, so Shoptimizer's .site-footer /
   .copyright selectors never matched it and it kept its own sizes:
     link columns (About, Blog, Help & Support / FAQs)  16px  vs 18px body
     Terms & Conditions / Cookie Policy / Privacy Policy  smaller again

   Those legal links are the ones people actually need to find, so shrinking
   them is the wrong trade. Bring the columns up to body size and give the
   legal row a readable 16px rather than fine print.

   Targeted by container id as well as generic selectors so it survives either
   the Elementor template or a theme-rendered footer.
   -------------------------------------------------------------------------- */
body .elementor-element-572d5d1d a,
body .elementor-element-572d5d1d li,
body .site-footer a,
body .site-footer li,
body footer.site-footer a {
	font-size: var(--fs-body) !important;
	line-height: 1.7 !important;
}

body .elementor-element-572d5d1d h4,
body .elementor-element-572d5d1d .elementor-heading-title,
body .site-footer .widget-title {
	font-size: clamp(19px, 1.1rem + 0.4vw, 23px) !important;
	line-height: 1.3 !important;
}

/* Legal row: ©…, Terms & Conditions, Cookie Policy, Privacy Policy */
body .elementor-element-3ec3de3 a,
body .elementor-element-3ec3de3 p,
body .elementor-element-3ec3de3 span,
body footer.copyright a,
body footer.copyright p {
	font-size: clamp(15px, 0.9rem + 0.25vw, 17px) !important;
	line-height: 1.6 !important;
}

/* --------------------------------------------------------------------------
   Legal row layout — keep the three links on one line
   --------------------------------------------------------------------------
   Side effect of the size bump above: the copyright widget is pinned to a
   fixed 48.067% of the row, so the nav menu only ever gets the remaining
   ~429px. At 14px the three links fitted; at 15–17px they need ~449px, so
   "Privacy Policy" dropped to a second line on its own — reading as if it
   belonged to something else.

   Two changes, desktop only (tablet/mobile already stack the row):
     1. copyright widget sizes to its text instead of claiming 48%, which
        hands the menu the ~508px it needs;
     2. the menu itself never breaks mid-list — if the row gets too narrow
        for both, the whole menu wraps to its own centred line below the
        copyright, which is a deliberate layout rather than an orphan link.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	body .elementor-element-4a25991f > .e-con-inner {
		flex-wrap: wrap !important;
		justify-content: center !important;
		row-gap: 6px !important;
		column-gap: 24px !important;
	}

	body .elementor-element-35e49736 {
		width: auto !important;
		max-width: none !important;
		--container-widget-width: auto !important;
	}

	body .elementor-element-558afc2c {
		width: auto !important;
		max-width: none !important;
		--container-widget-width: auto !important;
		flex: 0 0 auto !important;
	}

	body .elementor-element-558afc2c .elementor-nav-menu {
		flex-wrap: nowrap !important;
	}

	body .elementor-element-558afc2c .elementor-nav-menu .elementor-item {
		white-space: nowrap !important;
	}
}

/* --------------------------------------------------------------------------
   Same three links on phones
   --------------------------------------------------------------------------
   The row already stacks below 1025px — copyright above, links beneath — so
   the desktop rule does not apply here. But the links have the same problem
   for the same reason, just against the viewport instead of a sibling widget.
   Measured on staging, links at the 15px clamp floor:

     viewport   links need   row gives   result
     360px        335px        320px     Privacy Policy orphaned
     375px        335px        335px     borderline
     390px        336px        350px     one line
     414px        338px        374px     one line

   So every phone at 375px and under broke, which is most Android handsets and
   the smaller iPhones. Two changes, and deliberately NOT a smaller font — the
   links are already at the clamp floor and legibility of legal text is the
   thing being protected:

     1. Elementor's 5px of padding either side of each link drops to 2px
        (18px back across the three) — the divider still has room;
     2. the bottom bar's own side padding drops 20px → 12px on phones
        (16px back). Together that turns a 15px deficit at 360px into ~19px
        of slack, which is enough to survive font-rendering differences
        between devices.

   Phones only (<=767px): tablets have hundreds of pixels spare and are left
   exactly as they were.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	body .elementor-element-558afc2c .elementor-nav-menu--main .elementor-item {
		padding-left: 2px !important;
		padding-right: 2px !important;
	}

	body .elementor-element-3ec3de3 {
		--padding-left: 12px !important;
		--padding-right: 12px !important;
	}
}

/*
 * Centre the links for the whole non-desktop range, not just phones.
 * Once the row stacks, the copyright and the payment marks both centre
 * themselves but the menu stays hard left, so the bar reads as misaligned —
 * clearest at exactly 1024px. The widget carries Elementor's
 * `elementor-nav-menu__align-center` class already; it just loses to the
 * per-breakpoint rules in the generated CSS.
 */
@media (max-width: 1024px) {
	body .elementor-element-558afc2c .elementor-nav-menu {
		justify-content: center !important;
	}

	body .elementor-element-558afc2c,
	body .elementor-element-558afc2c .elementor-nav-menu--main {
		width: 100% !important;
	}
}

/*
 * Below ~360px there is no honest way to fit 335px of link on one line without
 * shrinking the text, so stop trying: stack the three, centred, one per line.
 * Three deliberate rows read as a list; two-plus-one reads as a mistake. It
 * also gives each link a tap target taller than the 25px a single 15px line
 * produces. The dividers are turned off because Elementor draws them as a
 * border on each item's ::after, which in a column becomes a stray mark
 * hanging off the end of every link.
 */
@media (max-width: 359px) {
	body .elementor-element-558afc2c .elementor-nav-menu {
		flex-direction: column !important;
		align-items: center !important;
	}

	body .elementor-element-558afc2c .elementor-nav-menu > li:not(:last-child)::after {
		content: none !important;
	}

	body .elementor-element-558afc2c .elementor-nav-menu--main .elementor-item {
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}
}

/* --------------------------------------------------------------------------
   Buttons — 16px, matching Coach House
   --------------------------------------------------------------------------
   Their VIEW MENU button measures 16px orpheus-pro with 32px horizontal
   padding. Buttons sit BELOW body size there, which is what stops them
   shouting over the copy — worth keeping rather than scaling them up with
   everything else.
   -------------------------------------------------------------------------- */
body .button,
body button,
body input[type="submit"],
body .elementor-button,
body .wp-element-button,
body .single_add_to_cart_button,
body .checkout-button,
body #place_order,
body .wc-block-components-checkout-place-order-button {
	font-size: var(--fs-button) !important;
	letter-spacing: 0.06em !important;
}

/* --------------------------------------------------------------------------
   Breadcrumbs + facet counts
   --------------------------------------------------------------------------
   Both were sitting in the small-print bucket and reading as afterthoughts:
     breadcrumb   16px  (it is primary navigation on category and product pages)
     span.count   12px  (the "(47)" beside each filter — the smallest text on
                         the site, and it carries real information)

   Breadcrumb goes to 18px: clearly bigger, but a step under the 19.2px body so
   it still reads as supporting navigation rather than competing with content.
   Counts go to 15px and sit alongside their 19.2px labels without shouting.
   -------------------------------------------------------------------------- */
body .woocommerce-breadcrumb,
body .woocommerce-breadcrumb a,
body nav.woocommerce-breadcrumb,
body nav.woocommerce-breadcrumb a,
body .shoptimizer-breadcrumb,
body .shoptimizer-breadcrumb a {
	font-size: clamp(16px, 0.95rem + 0.25vw, 18px) !important;
	line-height: 1.5 !important;
}

body .widget .count,
body span.count,
body .widget-area .count,
body .widget_layered_nav .count,
body .product-categories .count {
	font-size: clamp(13px, 0.80rem + 0.15vw, 15px) !important;
	line-height: 1.4 !important;
}

/* --------------------------------------------------------------------------
   Product title — its own size
   --------------------------------------------------------------------------
   The global h1 is 64px, which is right for a homepage hero but far too large
   for a product title sitting in a ~360px summary column: it wrapped to four
   lines and pushed the price and USPs below the fold.

   36px is roughly 1.9x body, matching the proportion in the approved mockup,
   and keeps the title to two lines at desktop width. Scoped to .product_title
   so hero and page H1s elsewhere are untouched.
   -------------------------------------------------------------------------- */
/* NOTE: body.single-product, not `body.single-product` — single-product is a
   class ON the body element, so the descendant form never matches anything. */
body.single-product .product_title,
body.single-product h1.product_title.entry-title,
/*
 * THE 36px EXCEPTION — removed 15 Aug when the spec sheet was applied, restored
 * the same day on Gerald's call. It is the one heading on the site that does
 * not follow the sheet's H1, and that is deliberate.
 *
 * Why it exists, measured rather than asserted: at the sheet's 64px, in the
 * ~360px summary column, the title ran to FIVE lines (368px tall) and pushed
 * the price 651px down the page — measured on celtic-cross-gold-border at a
 * 1674px viewport. 36px keeps it to two lines with the price above the fold.
 *
 * line-height 1.05 and weight 600 are restored with the size because they were
 * tuned for it: Cormorant at 400 reads thin at 36px, where at the hero's 64px
 * it does not, and 1.15 leaves too much air between two tight lines.
 *
 * Letter-spacing is deliberately NOT re-declared. The -0.5px now comes from the
 * sheet's H1 rule above, so the title keeps the specified tracking while taking
 * its own size — the part of the sheet that can be honoured here, is.
 */
body h1.product_title,
body .product_title.entry-title {
	/* 15 Aug: nudged 36px -> 40px on request. Reaches the cap at ~1371px, so
	   normal desktop widths get the full 40px. Floor 26 -> 28px so phones move
	   with it rather than staying at the old size. */
	font-size: clamp(28px, 1.60rem + 1.05vw, 40px) !important;
	line-height: 1.05 !important;
	font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   Mobile — supporting text
   --------------------------------------------------------------------------
   The clamp floors above cover body and headings, but a number of smaller
   elements carry their own fixed sizes that were tuned for the old sans-serif.
   In Garamond, at phone width, they read as fine print: "Add to wishlist", the
   breadcrumb, the trust strip and the swatch labels were all noticeably weaker
   than the copy around them.

   Raised together here so the whole page scales up on mobile rather than only
   the paragraphs.
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {

	/* Wishlist link above the gallery */
	body .commercekit-wishlist a,
	body .commercekit-wishlist-icon a,
	body .cgkit-wishlist a,
	body a.commercekit-wishlist-btn,
	body .commercekit-wishlist-btn {
		font-size: 17px !important;
	}

	/* Breadcrumb */
	body .woocommerce-breadcrumb,
	body .woocommerce-breadcrumb a,
	body nav.woocommerce-breadcrumb,
	body nav.woocommerce-breadcrumb a {
		font-size: 17px !important;
		line-height: 1.55 !important;
	}

	/* Trust strip — more room per cell once it stacks, so it can grow */
	body .ci-trust-title {
		font-size: 14px !important;
	}
	body .ci-trust-text {
		font-size: 16px !important;
	}

	/* USP bullets and social proof */
	body .ci-product-usps li,
	body .ci-review-count {
		font-size: 18px !important;
	}

	/* Step labels and swatches */
	body .cgkit-attribute-name,
	body .variations label,
	body .pewc-group-description {
		font-size: 18px !important;
	}
	body .cgkit-attribute-swatch.cgkit-button button {
		font-size: 16px !important;
	}

	/* Facet counts and sorting chrome */
	body .widget .count,
	body span.count {
		font-size: 14px !important;
	}
	body .woocommerce-result-count,
	body .woocommerce-ordering select {
		font-size: 17px !important;
	}

	/* Secure-checkout note */
	body .ci-secure-note {
		font-size: 14.5px !important;
	}
}

/* --------------------------------------------------------------------------
   Category / shop cards on mobile
   --------------------------------------------------------------------------
   The product name and price on a listing card were still rendering below body
   size on phones. Both go to 18px to match the rest of the mobile scale.

   The category label above the name ("FRAMED PRINTS") is deliberately left a
   step smaller at 15px — at 18px it competes with the product name directly
   beneath it. Easy to raise if you want them equal.
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {
	body ul.products li.product .woocommerce-loop-product__title,
	body .wc-block-grid__product-title {
		font-size: 18px !important;
		line-height: 1.35 !important;
	}

	body ul.products li.product .price,
	body ul.products li.product .price .woocommerce-Price-amount,
	body .wc-block-grid__product-price {
		font-size: 18px !important;
	}

	body ul.products li.product .woocommerce-loop-product__category,
	body ul.products li.product .posted_in,
	body ul.products li.product .product-category-label,
	body ul.products li.product .cgkit-product-category {
		font-size: 15px !important;
		letter-spacing: 0.05em !important;
	}
}

/* --------------------------------------------------------------------------
   Cart + Checkout
   --------------------------------------------------------------------------
   Both pages had drifted well below the site scale — the same inner-anchor
   trap as elsewhere, plus WooCommerce's own small defaults on the order table:

     product name link            16px   (a inside .product-name)
     variation labels/values      14px   (dl.variation dt / dd)
     order-review table cells     14px
     totals row headings          15px
     "Change address"             14px
     the 1-2-3 progress steps     14px

   Product names and totals go to full body size — they are the numbers and the
   items a customer is checking before they pay, and they should be the most
   legible things on the page.

   The variation lists stop at 17px on purpose. They are the longest text in
   the cart (a full blessing runs to six lines) and at 19.2px a single row grew
   taller than the viewport, pushing the totals and the checkout button off
   screen. 17px is a clear lift from 14px while keeping the row scannable.
   -------------------------------------------------------------------------- */

/* Product names — the link carries the size, not the cell */
body .woocommerce-cart-form .product-name a,
body .woocommerce-cart-form td.product-name > a,
body .woocommerce-checkout-review-order-table .product-name,
body .woocommerce-checkout-review-order-table td.product-name,
body .woocommerce-table--order-details .product-name a,
body .shop_table td.product-name a {
	font-size: var(--fs-body) !important;
	line-height: 1.45 !important;
}

/* Totals, subtotals, shipping rows and prices */
body .shop_table th,
body .shop_table td,
body .cart_totals th,
body .cart_totals td,
body .woocommerce-checkout-review-order-table th,
body .woocommerce-checkout-review-order-table td,
body .cart-subtotal th, body .cart-subtotal td,
body .order-total th, body .order-total td,
body .woocommerce-shipping-totals th,
body .woocommerce-shipping-totals td,
body ul#shipping_method li label,
body #shipping_method label {
	font-size: var(--fs-body) !important;
	line-height: 1.5 !important;
}

/*
 * Variation / personalisation summary — full body size, per request.
 *
 * These were held at 17px because they are the longest text in the cart: a
 * full blessing runs to six or seven lines, and at 19.2px a single row grows
 * tall enough to push the totals and the checkout button below the fold. That
 * trade was reviewed and the larger size chosen; noted here so the shorter
 * rows are not mistaken for a bug later.
 */
body dl.variation dt,
body dl.variation dd,
body dl.variation dd p,
body .wc-item-meta li,
body .wc-item-meta strong,
body .woocommerce-checkout-review-order-table dl.variation dt,
body .woocommerce-checkout-review-order-table dl.variation dd,
body .woocommerce-checkout-review-order-table dl.variation dd p,
body .woocommerce-cart-form__cart-item.cart_item .variation dt,
body .woocommerce-cart-form__cart-item.cart_item .variation dd,
body .woocommerce-cart-form__cart-item.cart_item .variation dd p,
body .elementor-menu-cart__product .variation dt,
body .elementor-menu-cart__product .variation dd {
	font-size: var(--fs-body) !important;
	line-height: 1.5 !important;
}

/* Quantity column, remove control, shipping calculator toggle */
body .product-quantity,
body td.product-quantity,
body .shipping-calculator-button,
body .woocommerce-shipping-destination,
body .woocommerce-shipping-methods label {
	font-size: 17px !important;
}

/* The 1 - 2 - 3 progress steps above the cart. The markup is ul.checkout-bar,
   with the label in a span inside an anchor — all three need naming. */
body ul.checkout-bar li,
body ul.checkout-bar li a,
body ul.checkout-bar li span,
body .checkout-bar li,
body .checkout-bar a,
body .checkout-bar span {
	font-size: 17px !important;
}

/* Checkout form: labels and the fields themselves */
body .woocommerce-checkout .form-row label,
body .woocommerce-billing-fields label,
body .woocommerce-shipping-fields label,
body .woocommerce-checkout input.input-text,
body .woocommerce-checkout textarea,
body .woocommerce-checkout select,
body .select2-container .select2-selection__rendered,
body .woocommerce-form__label span,
body #order_comments {
	font-size: var(--fs-body) !important;
	line-height: 1.5 !important;
}

/*
 * Privacy policy and Terms & Conditions links, and the payment method labels.
 *
 * The links sat at 14px inside 19.2px paragraphs — the two links on the page a
 * customer is most likely to want before paying were the smallest text on it.
 * Payment method labels ("Payment options") were 15px.
 */
body .woocommerce-privacy-policy-text a,
body .woocommerce-privacy-policy-text p,
body .woocommerce-terms-and-conditions-wrapper a,
body .woocommerce-terms-and-conditions-wrapper label,
body .woocommerce-form__label-for-checkbox span,
body .wc_payment_method label,
body .payment_methods label,
body ul.payment_methods li label {
	font-size: var(--fs-body) !important;
	line-height: 1.5 !important;
}

/* Coupon row */
body .coupon input#coupon_code,
body .checkout_coupon input.input-text,
body .woocommerce-form-coupon-toggle,
body .woocommerce-form-coupon-toggle .woocommerce-info {
	font-size: var(--fs-body) !important;
}

/*
 * Woo notices — error banner, info bar, success message.
 *
 * On checkout these stack directly against the coupon field and were rendering
 * a step below it. Shoptimizer sets .woocommerce-error/.woocommerce-info to a
 * 13-14px clamp and the customizer's inline block lifts that to 16px, while the
 * coupon input between them is --fs-body (19.2px). Measured on staging before
 * this rule: login toggle 16px, coupon input 19.2px, and the error banner
 * either 16px or 19.2px depending on which markup rendered it — see below.
 *
 * Both child elements are named on purpose. WooCommerce core wraps error text
 * in <ul class="woocommerce-error"><li>, and the <li> already picked up 19.2px
 * from the generic `body li` rule near the top of this file, whereas payment
 * gateways inject the same message as a bare <div> and got 16px. That is why
 * one banner could look right and the next one wrong on the same page; naming
 * the wrapper and the li together makes it 19.2px whichever markup arrives.
 *
 * :not(.cart-empty) is load-bearing. WooCommerce gives the empty-cart message
 * BOTH .cart-empty and .woocommerce-info, and Shoptimizer sizes it as a page
 * heading. Dropping the exclusion shrinks it to body copy.
 *
 * a:not(.button) likewise — "View cart" and "Apply coupon" render as anchors
 * inside notices and belong to --fs-button, not to body copy.
 */
body .woocommerce-error,
body .woocommerce-error li,
body .woocommerce-error a:not(.button),
body .woocommerce-info:not(.cart-empty),
body .woocommerce-info:not(.cart-empty) li,
body .woocommerce-info:not(.cart-empty) a:not(.button),
body .woocommerce-message:not(.cart-empty),
body .woocommerce-message:not(.cart-empty) li,
body .woocommerce-message:not(.cart-empty) a:not(.button),
body .wc-block-components-notice-banner,
body .wc-block-components-notice-banner p,
body .wc-block-components-notice-banner li {
	font-size: var(--fs-body) !important;
	line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   Blog archive — post titles
   --------------------------------------------------------------------------
   The listing title renders as an <a> inside the heading and carried its own
   16px in EB Garamond, so a post title read at the same size as the excerpt
   beneath it and in the body face rather than the heading face.
   -------------------------------------------------------------------------- */
body .post .entry-title,
body .post .entry-title a,
body article .entry-title a,
body .blog .entry-title,
body .blog .entry-title a,
body .archive .entry-title,
body .archive .entry-title a,
body .search-results .entry-title a {
	font-size: var(--fs-card-title) !important;
	font-family: var(--font-heading, "Cormorant Garamond"), Georgia, serif !important;
	font-weight: var(--wt-heading) !important;
	line-height: 1.25 !important;
}

/* The date line under it sits a step below body copy. */
body .post .posted-on,
body .post .entry-meta,
body article .entry-meta a,
body .blog .entry-meta {
	font-size: 16px !important;
	letter-spacing: 0.05em !important;
}

/* --------------------------------------------------------------------------
   Blog archive — spacing under the title and under the date
   --------------------------------------------------------------------------
   Client review, Blog page: "Increase spacing below between heading, date and
   body text."

   Cause, and why it is a consequence of our own work: the parent theme sizes
   the listing date at 12px and spaces the card for that — `.post
   .entry-header h2 { margin-bottom: 0.35rem }` (5.6px) and `.post
   .entry-header .posted-on { margin-bottom: 0.5rem }` (8px), both in
   `src/css/layout/blog.css`. The block directly above this one lifts the
   title to --fs-card-title (24-28px) and the date to 16px, but the two
   margins were never revisited. So a 16px uppercase date now sits in gaps
   drawn around a 12px one, and the three lines read as one block.

   Measured on the staging blog listing at 1671px, before:
     title -> date   5.59px box  / 13.89px visible
     date  -> excerpt   8px box  / 18.56px visible
   ("visible" = box gap plus the half-leading each side: title 3.5px, date
   4.8px, excerpt 5.76px. The box numbers alone understate how tight it looks,
   which is why they are given both ways.)

   em rather than px on both, so the gaps track the type: the title clamps
   24-28px across the breakpoint range and the date is a flat 16px, so one
   value holds at both ends without a media query.

   Scoped to the listing (`body.blog`, `body.archive`, `body.search-results`).
   Single posts render the same `.entry-header` with an <h1> and were NOT part
   of this review, so their rhythm is deliberately left alone.

   Specificity, not order: (0,4,1) and (0,5,0) against the parent's (0,2,1)
   and (0,3,0), so no !important is needed and nothing here has to depend on
   file load order.
   -------------------------------------------------------------------------- */
body.blog .post .entry-header h2.entry-title,
body.archive .post .entry-header h2.entry-title,
body.search-results .post .entry-header h2.entry-title {
	margin-bottom: 0.45em;
}

body.blog .post .entry-header .posted-on,
body.archive .post .entry-header .posted-on,
body.search-results .post .entry-header .posted-on {
	margin-bottom: 1.15em;
}