/* Homepage, section 9: Delivery and payment (patterns/home-delivery.php, [jkd_delivery_rates] in inc/sections.php).
   Loaded after home.css. Owner: delivery. Round 4 (2026-10-26).

   One idea: a freight tariff. The rate card (live from WooCommerce) and the ways to pay sit on ONE grid:
   the columns block is a grid whose two columns are row subgrids, so the header line, every row line and
   the note line run across both panels at the same y. The table's rows are display: contents so its cells
   are the grid items.

   Inside a row, three things sit on one line: the method name, its prices and the matching way to pay.
   Names and payment titles are the display face, uppercase, so their caps are the same height; the price is
   the same face, bigger. Every cell starts at the same padding, and the price cell's padding is reduced by
   exactly the difference between the two cap centres (the numbers below), so the digits are centred on the
   title line instead of sharing its baseline (where a big numeral reads as sitting high). Round 3 aligned
   baselines; Yousif read the $149 as higher than "Pallet freight" and "Credit card". Measured on 10-26:
   the digits' ink centre now equals the titles' cap centre to the pixel at 1024, 1440, 1920 and 2560.

   Saira Condensed, measured in Chrome at 1000px: a line box of height L has its baseline L/2 + .348em below
   its top. Caps are .6875em tall; digits .7031em, with a .0156em overshoot below the baseline. So a cap's centre
   and a digit's centre both sit .34375em above the baseline.
   Title at line-height 1.15: cap centre .575 + .348 - .344 = .579em below the line's top.
   Price at line-height 1: digit centre .5 + .348 - .344 = .504em below the line's top.
   (Chrome rounds a font's ascent and descent to whole pixels at each size, so the two centres can still differ
   by up to half a pixel at a given width. Measured: .4px at 1440.)

   The head is on the same two columns: kicker and title left, the lead on the right over the "Ways to pay"
   panel, its last line on the title's baseline. Phones stack the two panels; each delivery option becomes a
   block with the two zone prices side by side. */

.jkd-dl {
	--dl-pad: clamp(18px, 1.5vw, 30px);                  /* row padding, top and bottom */
	--dl-price: clamp(32px, 1.9vw + 6px, 52px);          /* 33 at 1440, 42 at 1920, 52 from 2420 */
	--dl-title: clamp(17px, .35vw + 12px, 21px);         /* method names and payment titles: 17 at 1440, 19 at 1920, 21 from 2570 */
	--dl-text: var(--jkd-fs);                            /* the line under a title: 15 at 1440, 16 at 1920, 17 at 2200 */
	--dl-gutter: clamp(36px, 5.5vw, 104px);              /* between the two panels */
	--dl-icon: clamp(24px, 1.5vw, 30px);
	--dl-rule: rgba(14, 15, 17, .2);                     /* hairlines on the grey */
	--dl-title-centre: calc(var(--dl-title) * .579);     /* a title's cap centre, from its line's top */
	--dl-price-centre: calc(var(--dl-price) * .504);     /* a price's digit centre, from its line's top */
	background: var(--jkd-grey);
	padding-block: clamp(56px, 5.8vw, 120px);
}

/* ------------------------------------------------------------------ Head: kicker and title left, the lead right, one baseline
   On the site Kadence wraps the group's children in .wp-block-group__inner-container, in the editor they sit in
   the group itself, so the grid is set on both. */
.jkd-sec.jkd-dl .jkd-dl__head { margin: 0 0 clamp(36px, 3.6vw, 68px); }
.jkd-sec.jkd-dl .jkd-dl__head > .wp-block-group__inner-container,
.editor-styles-wrapper .jkd-sec.jkd-dl .jkd-dl__head {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	grid-template-rows: auto auto;
	column-gap: var(--dl-gutter);
	align-items: last baseline;
}
.jkd-sec.jkd-dl .jkd-dl__kicker { grid-column: 1; grid-row: 1; margin: 0 0 clamp(14px, 1.2vw, 22px); }
.jkd-sec.jkd-dl .jkd-dl__head h2 {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
	font-size: clamp(34px, 2.4vw + 10px, 60px);
	line-height: .95;
	text-transform: uppercase;
	color: var(--jkd-text);
}
.jkd-sec.jkd-dl .jkd-dl__lead {
	grid-column: 2;
	grid-row: 1 / 3; /* spans both rows, so its height never pushes the title down from the kicker */
	align-self: last baseline;
	margin: 0;
	max-width: 30em;
	font-size: clamp(16px, .4vw + 12px, 20px);
	line-height: 1.5;
	color: var(--jkd-muted);
	text-wrap: pretty;
}

/* ------------------------------------------------------------------ The shared grid (two panels, one set of rows) */
.jkd-sec.jkd-dl .jkd-dl__grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	column-gap: var(--dl-gutter);
	row-gap: 0;
	margin: 0;
}
.jkd-sec.jkd-dl .jkd-dl__rates,
.jkd-sec.jkd-dl .jkd-dl__pay {
	display: grid;
	align-content: start;
	min-width: 0;
}
.jkd-sec.jkd-dl .jkd-dl__rates { grid-template-columns: minmax(0, 1fr) auto auto; }
.jkd-sec.jkd-dl .jkd-dl__pay { grid-template-columns: minmax(0, 1fr); }

/* Row subgrids: the parent carries the rows (eight is more than any zone list needs; unused rows are 0px high),
   each column spans them all, and the two notes pin to the last row so they line up whatever the row count. */
@supports (grid-template-rows: subgrid) {
	.jkd-sec.jkd-dl .jkd-dl__grid { grid-template-rows: repeat(8, auto); }
	.jkd-sec.jkd-dl .jkd-dl__rates,
	.jkd-sec.jkd-dl .jkd-dl__pay { grid-row: 1 / -1; grid-template-rows: subgrid; }
	.jkd-sec.jkd-dl .jkd-dl__note { grid-row: -2; }
}

/* The table dissolves into the grid: its cells are the items */
.jkd-tariff,
.jkd-tariff thead,
.jkd-tariff tbody,
.jkd-tariff tr { display: contents; }
.jkd-sec.jkd-dl .jkd-tariff { margin: 0; border: 0; border-collapse: collapse; font-size: inherit; }
.jkd-tariff th,
.jkd-tariff td { border: 0; background: none; vertical-align: top; }

/* Header line: a 2px black rule, small letter-spaced labels. Same on both panels, so the top edge is shared. */
.jkd-tariff .jkd-tariff__label,
.jkd-tariff .jkd-tariff__zone,
.jkd-sec.jkd-dl .jkd-dl__label {
	margin: 0;
	padding: 14px 0 12px;
	border-top: 2px solid var(--jkd-black);
	font: 700 clamp(12px, .2vw + 10px, 14px)/1.2 var(--jkd-display);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--jkd-text);
	text-align: left;
}
.jkd-tariff .jkd-tariff__zone { text-align: right; padding-left: clamp(20px, 2.6vw, 52px); }

/* Rows: one hairline above each, one under the last. Every cell starts at the same padding. */
.jkd-tariff .jkd-tariff__name,
.jkd-tariff .jkd-tariff__price,
.jkd-sec.jkd-dl .jkd-dl__way {
	border-top: 1px solid var(--dl-rule);
	padding-top: var(--dl-pad);
	padding-bottom: var(--dl-pad);
}
.jkd-tariff tbody tr:last-child > *,
.jkd-sec.jkd-dl .jkd-dl__way:has(+ .jkd-dl__note) { border-bottom: 1px solid var(--dl-rule); }

/* Titles: method names and payment titles, one face, one size, one line box */
.jkd-tariff .jkd-tariff__name,
.jkd-sec.jkd-dl .jkd-dl__way strong {
	font: 700 var(--dl-title)/1.15 var(--jkd-display);
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--jkd-text);
}
.jkd-tariff .jkd-tariff__name { padding-right: 20px; text-align: left; }
/* The line under a title (a shipping class description on the left, the payment line on the right) */
.jkd-tariff__sub,
.jkd-sec.jkd-dl .jkd-dl__way {
	font: 400 var(--dl-text)/1.45 var(--global-body-font-family, Saira, sans-serif);
	letter-spacing: 0;
	text-transform: none;
	color: var(--jkd-muted);
}
.jkd-tariff__sub { display: block; margin-top: 4px; }

/* Prices: the one loud element. The top padding gives back the gap between the two cap centres, so the digits
   are centred on the title line (see the head of this file). */
.jkd-tariff .jkd-tariff__price {
	padding-top: calc(var(--dl-pad) + var(--dl-title-centre) - var(--dl-price-centre));
	padding-left: clamp(20px, 2.6vw, 52px);
	font: 800 var(--dl-price)/1 var(--jkd-display);
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
	color: var(--jkd-black);
}
.jkd-tariff__price .woocommerce-Price-amount { font: inherit; color: inherit; }
/* The dollar sign: half size, its top on the digits' top (digits are .70em tall, the small sign .345em) */
.jkd-tariff__price .woocommerce-Price-currencySymbol {
	position: relative;
	top: -.71em;
	margin-right: .04em;
	font-size: .5em;
	font-weight: 700;
	letter-spacing: 0;
}
/* A zone without that method: "Call us" in the title's size, on the title's line (the cell keeps the plain padding) */
.jkd-tariff .jkd-tariff__price--call {
	padding-top: var(--dl-pad);
	font: 700 var(--dl-title)/1.15 var(--jkd-display);
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--jkd-muted);
}
.jkd-tariff .jkd-tariff__price--all { grid-column: 2 / -1; }

/* Ways to pay: icon hanging left, title on the shared line, one line under it */
.jkd-sec.jkd-dl .jkd-dl__way {
	position: relative;
	margin: 0;
	padding-left: calc(var(--dl-icon) + 16px);
}
.jkd-sec.jkd-dl .jkd-dl__way strong { display: block; position: relative; margin-bottom: 4px; }
.jkd-sec.jkd-dl .jkd-dl__way br { display: none; }
/* The icon, drawn through a mask so it takes the brand red from the stylesheet, centred on the title's caps */
.jkd-sec.jkd-dl .jkd-dl__way strong::after {
	content: "";
	position: absolute;
	left: calc(-1 * (var(--dl-icon) + 16px));
	top: calc(var(--dl-title-centre) - var(--dl-icon) / 2);
	width: var(--dl-icon);
	height: var(--dl-icon);
	background: var(--jkd-red);
	-webkit-mask: url(../home/icon-card.svg) center / contain no-repeat;
	mask: url(../home/icon-card.svg) center / contain no-repeat;
}
.jkd-sec.jkd-dl .jkd-dl__way--wallet strong::after {
	-webkit-mask-image: url(../home/icon-wallet.svg);
	mask-image: url(../home/icon-wallet.svg);
}
.jkd-sec.jkd-dl .jkd-dl__way--transfer strong::after {
	-webkit-mask-image: url(../home/icon-transfer.svg);
	mask-image: url(../home/icon-transfer.svg);
}

/* Notes: the last shared row */
.jkd-sec.jkd-dl .jkd-dl__note {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: 14px;
	font-size: var(--jkd-fs-sm);
	line-height: 1.5;
	color: var(--jkd-muted);
}
.jkd-sec.jkd-dl .jkd-dl__note a {
	color: var(--jkd-text);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--dl-rule);
	white-space: nowrap;
	transition: color .2s, text-decoration-color .2s;
}
.jkd-sec.jkd-dl .jkd-dl__note a:hover { color: var(--jkd-red); text-decoration-color: currentColor; }

/* ------------------------------------------------------------------ Laptops and tablets (782 to 1199): the lead goes back under the title */
@media (max-width: 1199px) {
	.jkd-sec.jkd-dl .jkd-dl__head > .wp-block-group__inner-container,
	.editor-styles-wrapper .jkd-sec.jkd-dl .jkd-dl__head { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
	.jkd-sec.jkd-dl .jkd-dl__lead { grid-column: 1; grid-row: 3; margin-top: clamp(12px, 1vw, 18px); max-width: 42em; }
}

/* ------------------------------------------------------------------ Phones and small tablets: the panels stack */
@media (max-width: 781px) {
	.jkd-sec.jkd-dl .jkd-dl__grid,
	.jkd-sec.jkd-dl .jkd-dl__rates,
	.jkd-sec.jkd-dl .jkd-dl__pay { display: block; }
	.jkd-sec.jkd-dl .jkd-dl__pay { margin-top: 44px; }

	/* Each option is a block: the name on its own line, then the two zones side by side, each labelled */
	.jkd-tariff,
	.jkd-tariff thead,
	.jkd-tariff tbody { display: block; }
	.jkd-tariff tr { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); column-gap: 16px; }
	.jkd-tariff .jkd-tariff__head { border-top: 2px solid var(--jkd-black); }
	.jkd-tariff .jkd-tariff__head .jkd-tariff__label { grid-column: 1 / -1; border-top: 0; }
	.jkd-tariff .jkd-tariff__head .jkd-tariff__zone { display: none; }
	.jkd-tariff .jkd-tariff__row { border-top: 1px solid var(--dl-rule); padding: 18px 0 20px; }
	.jkd-tariff tbody tr:last-child { border-bottom: 1px solid var(--dl-rule); }
	.jkd-tariff tbody tr:last-child > *,
	.jkd-tariff .jkd-tariff__name,
	.jkd-tariff .jkd-tariff__price { border: 0; padding: 0; }
	.jkd-tariff .jkd-tariff__name { grid-column: 1 / -1; margin-bottom: 14px; }
	.jkd-tariff .jkd-tariff__price { text-align: left; font-size: clamp(32px, 9.2vw, 38px); }
	.jkd-tariff .jkd-tariff__price::before {
		content: attr(data-zone);
		display: block;
		margin-bottom: 6px;
		font: 700 12px/1.2 var(--jkd-display);
		letter-spacing: .18em;
		text-transform: uppercase;
		color: var(--jkd-muted);
	}
	.jkd-tariff .jkd-tariff__price--all { grid-column: 1 / -1; }

	.jkd-sec.jkd-dl .jkd-dl__way { padding-top: 18px; padding-bottom: 20px; }
	.jkd-sec.jkd-dl .jkd-dl__note { padding-top: 12px; }
}