/*
Theme Name:  Clover King Seeds
Theme URI:   https://cloverkingseeds.ca
Author:      Clover King Seeds
Description: Theme for Clover King Seeds Garden Center — a microgreens grower, seed house and garden centre in Cold Lake, Alberta. Requires the Lovable Core and Clover King Core plugins for content types, editable fields and lead capture.
Version:     1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clover-king
Tags:        custom-menu, featured-images, translation-ready, e-commerce
*/

/*
 * The design system lives in assets/css/app.css — a compiled utility stylesheet.
 * It is a fixed artefact: a class that is not already in it has no styles, so
 * anything it cannot express is written here instead, using the same tokens.
 *
 * Palette, for reference:
 *   --frost #EDF1F0   --frost-deep #DCE4E1   --paper #FBFCFB
 *   --boreal #0E2A26  --boreal-mid #1C433C   --sage #9FB4A9
 *   --clover #2F6B4F  --growlamp #E0A11B     --radish #A8324A
 */

/* Core alignment classes. */
.alignwide {
	margin-left: auto;
	margin-right: auto;
	max-width: 82.5rem;
}

.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: none;
	width: 100vw;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
	margin-bottom: 1rem;
	margin-right: 1.5rem;
}

.alignright {
	float: right;
	margin-bottom: 1rem;
	margin-left: 1.5rem;
}

/* Screen-reader text, per the WordPress accessibility guidelines. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--paper);
	border-radius: 12px;
	box-shadow: 0 8px 24px -12px rgba(14, 42, 38, 0.4);
	clip-path: none;
	color: var(--clover);
	display: block;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	height: auto;
	left: 1rem;
	line-height: normal;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

/* Honeypot: reachable by bots, never by people, and never affecting layout. */
.lvc-hp-field {
	clip-path: inset(50%) !important;
	height: 1px !important;
	overflow: hidden !important;
	pointer-events: none !important;
	position: absolute !important;
	white-space: nowrap !important;
	width: 1px !important;
}

/*
 * Editor-authored policy content. The utility sheet cannot reach block-editor
 * markup, so the legal-document styling is expressed here with the same tokens.
 */
.ck-legal-body > h2 {
	color: var(--boreal);
	font-family: var(--font-display);
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	margin-top: 2.75rem;
	scroll-margin-top: 7rem;
}

.ck-legal-body > h2:first-child {
	margin-top: 0;
}

.ck-legal-body > h3 {
	color: var(--boreal);
	font-family: var(--font-display);
	font-size: 1.0625rem;
	margin-top: 2rem;
}

.ck-legal-body > p {
	color: color-mix(in oklab, var(--boreal) 78%, transparent);
	line-height: 1.8;
	margin-top: 1rem;
}

.ck-legal-body > ul,
.ck-legal-body > ol {
	margin-top: 1rem;
}

.ck-legal-body > ul > li,
.ck-legal-body > ol > li {
	color: color-mix(in oklab, var(--boreal) 78%, transparent);
	line-height: 1.8;
	list-style: none;
	padding-left: 1.25rem;
	position: relative;
}

.ck-legal-body > ul > li + li,
.ck-legal-body > ol > li + li {
	margin-top: 0.5rem;
}

.ck-legal-body > ul > li::before {
	background: var(--clover);
	border-radius: 9999px;
	content: "";
	height: 0.375rem;
	left: 0;
	position: absolute;
	top: 0.75rem;
	width: 0.375rem;
}

.ck-legal-body > ol {
	counter-reset: ck-legal-item;
}

.ck-legal-body > ol > li {
	counter-increment: ck-legal-item;
}

.ck-legal-body > ol > li::before {
	color: var(--clover);
	content: counter(ck-legal-item) ".";
	font-family: var(--font-display);
	left: 0;
	position: absolute;
}

.ck-legal-body a {
	color: var(--clover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ck-legal-body strong {
	color: var(--boreal);
}

/* A "note" callout inside policy copy. */
.ck-legal-body .is-style-note {
	background: var(--frost);
	border-left: 3px solid var(--clover);
	border-radius: 8px;
	padding: 1rem 1.25rem;
}

/* Native controls, tinted to the brand. */
.ck-check {
	accent-color: var(--clover);
	height: 1rem;
	width: 1rem;
}

@media print {
	.ck-no-print,
	header[data-site-header],
	footer[data-site-footer] {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}
}

/*
 * WooCommerce.
 *
 * WooCommerce's own stylesheets are dropped in inc/woocommerce.php, so anything
 * it prints that no template of this theme reaches now arrives with nothing on
 * it at all: a notice is a bare paragraph, a checkout field is a browser field,
 * the place-order button is a browser button. What follows dresses all of that
 * in the same tokens as the rest of the site.
 *
 * The section is written into the `components` layer deliberately. The compiled
 * utility sheet declares `components` before `utilities`, so a class a template
 * of this theme puts on one of these elements — the pill on the cart's coupon
 * field, the twelve-pixel corners on the checkout's inputs, the sizing on a
 * quantity box — still wins, and everything below only fills in behind it.
 *
 * Every class name here is WooCommerce's own, because its scripts find the
 * cart table, the review order, the quantity input and the place-order button
 * by exactly these names. They are styled, never renamed.
 */
@layer components {

	/* ---------------------------------------------------------------------
	 * Notices
	 * ------------------------------------------------------------------ */

	.woocommerce-notices-wrapper:not(:empty),
	.woocommerce-NoticeGroup {
		display: block;
		margin-bottom: 2rem;
	}

	/*
	 * One panel, three voices: the left rule is what says whether something
	 * went right, is worth knowing, or went wrong.
	 */
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		background: var(--paper);
		border: 1px solid color-mix(in oklab, var(--sage) 40%, transparent);
		border-left: 3px solid var(--clover);
		border-radius: 16px;
		color: color-mix(in oklab, var(--boreal) 82%, transparent);
		/* Contains the floated button below without a clearing element. */
		display: flow-root;
		font-family: var(--font-serif);
		font-size: 15.5px;
		line-height: 1.7;
		list-style: none;
		margin: 0 0 1rem;
		padding: 1.125rem 1.5rem;
	}

	.woocommerce-message:last-child,
	.woocommerce-info:last-child,
	.woocommerce-error:last-child {
		margin-bottom: 0;
	}

	.woocommerce-info {
		border-left-color: var(--growlamp);
	}

	.woocommerce-error {
		border-left-color: var(--radish);
	}

	/*
	 * WooCommerce prints the "view cart" pill before the sentence it belongs
	 * to, and the sentence itself is a bare text node that no selector can
	 * reach. Floating the pill is what moves it to the end of the notice while
	 * leaving the sentence — and any link inside it — running as one line.
	 */
	.woocommerce-message > .button,
	.woocommerce-info > .button,
	.woocommerce-error .button {
		float: right;
		margin-left: 1rem;
	}

	.woocommerce-error li + li {
		margin-top: 0.5rem;
	}

	.woocommerce-message a:not(.button),
	.woocommerce-info a:not(.button) {
		color: var(--clover);
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.woocommerce-error a:not(.button) {
		color: var(--radish);
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	/*
	 * The two invitations above the checkout — sign in, or enter a code. Each is
	 * an ordinary notice, and the rule above takes the bottom margin off a notice
	 * that is last in its box so a stack of them ends flush. These are last in a
	 * box of their own, immediately above the checkout's first heading, and
	 * without a margin here they sit on top of it.
	 */
	.woocommerce-form-coupon-toggle,
	.woocommerce-form-login-toggle {
		display: block;
		margin-bottom: 2.5rem;
	}

	/*
	 * The coupon and login forms the two notices on the checkout open onto.
	 * They are hidden until asked for, so they need a panel of their own.
	 */
	.checkout_coupon,
	.woocommerce-form-login {
		background: var(--paper);
		border: 1px solid color-mix(in oklab, var(--sage) 40%, transparent);
		border-radius: 16px;
		margin-bottom: 1.5rem;
		padding: 1.5rem;
	}

	/* ---------------------------------------------------------------------
	 * Buttons WooCommerce prints for itself
	 * ------------------------------------------------------------------ */

	/*
	 * The pill from inc/template-tags.php, in CSS, for the buttons no template
	 * of this theme can put a class on. A plain one is the ghost; the `alt`
	 * WooCommerce marks its primary with — place order, proceed to checkout —
	 * is the clover fill.
	 */
	.button {
		align-items: center;
		background: var(--paper);
		border: 1px solid var(--sage);
		border-radius: 9999px;
		color: var(--boreal);
		cursor: pointer;
		display: inline-flex;
		font-family: var(--font-display);
		font-size: 14px;
		font-weight: 600;
		justify-content: center;
		letter-spacing: 0.01em;
		line-height: 1;
		padding: 0.875rem 1.5rem;
		text-align: center;
		text-decoration: none;
		transition: background-color 0.2s, border-color 0.2s, color 0.2s;
	}

	.button:hover {
		border-color: var(--clover);
		color: var(--clover);
	}

	.button.alt {
		background: var(--clover);
		border-color: var(--clover);
		box-shadow: 0 8px 24px -14px rgba(14, 42, 38, 0.5);
		color: var(--paper);
	}

	.button.alt:hover {
		background: var(--boreal-mid);
		border-color: var(--boreal-mid);
		color: var(--paper);
	}

	.button:disabled,
	.button.disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}

	/* WooCommerce blocks the page while a button is working. */
	.button.loading {
		opacity: 0.6;
		pointer-events: none;
	}

	.wc-proceed-to-checkout {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		margin-top: 1.75rem;
	}

	.checkout-button,
	#place_order {
		width: 100%;
	}

	/* ---------------------------------------------------------------------
	 * Form fields
	 * ------------------------------------------------------------------ */

	.form-row {
		display: block;
		margin: 0 0 1.25rem;
	}

	.form-row:last-child {
		margin-bottom: 0;
	}

	.woocommerce-input-wrapper {
		display: block;
	}

	.form-row label {
		color: color-mix(in oklab, var(--boreal) 50%, transparent);
		display: block;
		font-family: var(--font-display);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.14em;
		margin-bottom: 0.5rem;
		text-transform: uppercase;
	}

	/* A checkbox's label is a sentence beside the box, not a head above it. */
	.form-row label.checkbox,
	.form-row .woocommerce-form__label-for-checkbox {
		align-items: flex-start;
		color: color-mix(in oklab, var(--boreal) 75%, transparent);
		display: flex;
		font-family: var(--font-serif);
		font-size: 15px;
		font-weight: 400;
		gap: 0.625rem;
		letter-spacing: normal;
		line-height: 1.7;
		margin-bottom: 0;
		text-transform: none;
	}

	.form-row input[type="checkbox"],
	.form-row input[type="radio"] {
		accent-color: var(--clover);
		flex-shrink: 0;
	}

	/* The asterisk is the only thing on a form allowed to shout. */
	.required {
		border: 0;
		color: var(--radish);
		text-decoration: none;
	}

	.optional {
		color: color-mix(in oklab, var(--boreal) 45%, transparent);
	}

	.input-text,
	.form-row select,
	.form-row textarea,
	.shipping-calculator-form select,
	select.country_select,
	select.state_select {
		background: var(--paper);
		border: 1px solid var(--sage);
		border-radius: 16px;
		color: var(--boreal);
		display: block;
		font-family: var(--font-serif);
		font-size: 15px;
		line-height: 1.5;
		padding: 0.75rem 1rem;
		transition: border-color 0.2s;
		width: 100%;
	}

	.form-row textarea,
	textarea.input-text {
		min-height: 8rem;
		resize: vertical;
	}

	.input-text::placeholder,
	.form-row textarea::placeholder {
		color: color-mix(in oklab, var(--boreal) 40%, transparent);
	}

	.input-text:focus,
	.form-row select:focus,
	.form-row textarea:focus,
	select.country_select:focus,
	select.state_select:focus {
		border-color: var(--clover);
	}

	/* The ring the whole site focuses by, restated so a field carries it too. */
	.input-text:focus-visible,
	.form-row select:focus-visible,
	.form-row textarea:focus-visible,
	select.country_select:focus-visible,
	select.state_select:focus-visible {
		outline: 2px solid var(--clover);
		outline-offset: 2px;
	}

	/*
	 * The checkout script marks a row as it is filled in, and with no
	 * stylesheet of WooCommerce's left, these are the only things that tell a
	 * reader whether an address was accepted.
	 */
	.woocommerce-invalid .input-text,
	.woocommerce-invalid select,
	.woocommerce-invalid textarea {
		border-color: var(--radish);
	}

	.woocommerce-validated .input-text,
	.woocommerce-validated select,
	.woocommerce-validated textarea {
		border-color: var(--clover);
	}

	.checkout-inline-error-message,
	.coupon-error-notice {
		color: var(--radish);
		display: block;
		font-size: 13.5px;
		line-height: 1.6;
		margin-top: 0.5rem;
	}

	/* A field's own note, e.g. the one under an order-notes box. */
	.form-row .description {
		color: color-mix(in oklab, var(--boreal) 55%, transparent);
		display: block;
		font-size: 13.5px;
		line-height: 1.6;
		margin-top: 0.5rem;
	}

	/*
	 * WooCommerce pairs two fields — a first and last name, a city and a
	 * postcode — by marking one row first and the next last, and used to lay
	 * them out with floats its stylesheet no longer supplies. Whatever holds
	 * such a pair becomes a two-column grid instead, and every other row in it
	 * spans both columns; below the breakpoint the pair simply stacks.
	 *
	 * The row gap is left to the rows' own margins so that a wrapper already
	 * spacing its children does not space them twice.
	 */
	@media (min-width: 768px) {
		:where(div, form, fieldset, section):has(> .form-row-first) {
			column-gap: 1.25rem;
			display: grid;
			grid-template-columns: 1fr 1fr;
			row-gap: 0;
		}

		:where(div, form, fieldset, section):has(> .form-row-first) > * {
			grid-column: 1 / -1;
		}

		:where(div, form, fieldset, section):has(> .form-row-first) > .form-row-first {
			grid-column: 1;
		}

		:where(div, form, fieldset, section):has(> .form-row-first) > .form-row-last {
			grid-column: 2;
		}
	}

	/* The billing and delivery halves of the checkout, stacked. */
	#customer_details .col-2 {
		margin-top: 2.5rem;
	}

	/* ---------------------------------------------------------------------
	 * Tables
	 * ------------------------------------------------------------------ */

	.shop_table,
	.cart_totals table,
	.woocommerce-checkout-review-order-table {
		border-collapse: collapse;
		text-align: left;
		width: 100%;
	}

	.shop_table td,
	.shop_table th,
	.cart_totals table td,
	.cart_totals table th,
	.woocommerce-checkout-review-order-table td,
	.woocommerce-checkout-review-order-table th {
		padding: 0.875rem 0;
		vertical-align: top;
	}

	/*
	 * One hairline between rows, drawn on the top edge. A table this theme has
	 * already ruled underneath its last row therefore gains no second line.
	 */
	.shop_table tr + tr > *,
	.cart_totals table tr + tr > *,
	.woocommerce-checkout-review-order-table tr + tr > *,
	.shop_table tfoot tr:first-child > *,
	.woocommerce-checkout-review-order-table tfoot tr:first-child > * {
		border-top: 1px solid color-mix(in oklab, var(--sage) 40%, transparent);
	}

	.shop_table thead th,
	.woocommerce-checkout-review-order-table thead th {
		border-bottom: 1px solid color-mix(in oklab, var(--sage) 40%, transparent);
		color: color-mix(in oklab, var(--boreal) 50%, transparent);
		font-family: var(--font-mono);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	/* A row head is a label, not a column head, so it reads as running text. */
	.shop_table tbody th,
	.shop_table tfoot th,
	.cart_totals table th,
	.woocommerce-checkout-review-order-table tfoot th {
		color: color-mix(in oklab, var(--boreal) 65%, transparent);
		font-family: var(--font-serif);
		font-size: 15.5px;
		font-weight: 400;
		text-align: left;
	}

	.cart_totals table td,
	.shop_table td.product-price,
	.shop_table td.product-subtotal,
	.woocommerce-checkout-review-order-table .product-total {
		font-variant-numeric: tabular-nums;
		text-align: right;
	}

	.woocommerce-checkout-review-order-table .product-quantity {
		color: color-mix(in oklab, var(--boreal) 55%, transparent);
		font-weight: 400;
	}

	/* The line the reader actually came for. */
	.order-total th,
	.order-total td {
		color: var(--boreal);
		font-family: var(--font-display);
		font-size: 17px;
		font-weight: 600;
	}

	.cart-discount td,
	.cart-discount th {
		color: var(--clover);
	}

	.woocommerce-remove-coupon {
		color: var(--radish);
		font-size: 13px;
	}

	/* The shipping choices, in the cart totals and again in the order review. */
	#shipping_method,
	.woocommerce-shipping-methods {
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: left;
	}

	#shipping_method li {
		align-items: baseline;
		display: flex;
		gap: 0.5rem;
	}

	#shipping_method li + li {
		margin-top: 0.5rem;
	}

	#shipping_method label {
		color: color-mix(in oklab, var(--boreal) 78%, transparent);
		font-size: 15px;
		line-height: 1.6;
	}

	#shipping_method input {
		accent-color: var(--clover);
	}

	.woocommerce-shipping-destination,
	.woocommerce-shipping-contents {
		color: color-mix(in oklab, var(--boreal) 55%, transparent);
		font-size: 13.5px;
		line-height: 1.6;
		margin-top: 0.5rem;
	}

	.shipping-calculator-button {
		color: var(--clover);
		font-family: var(--font-display);
		font-size: 13px;
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.shipping-calculator-form {
		display: grid;
		gap: 0.75rem;
		margin-top: 0.75rem;
		text-align: left;
	}

	/* ---------------------------------------------------------------------
	 * The quantity control
	 * ------------------------------------------------------------------ */

	.quantity {
		align-items: center;
		display: inline-flex;
	}

	/*
	 * Declared after the field rules above so that a quantity box, which
	 * WooCommerce also marks `input-text`, keeps its pill rather than the
	 * full-width shape of an address field.
	 */
	.qty {
		background: var(--paper);
		border: 1px solid var(--sage);
		border-radius: 9999px;
		color: var(--boreal);
		font-family: var(--font-display);
		font-size: 15px;
		font-variant-numeric: tabular-nums;
		font-weight: 600;
		height: 2.75rem;
		padding: 0 0.75rem;
		text-align: center;
		width: 6.25rem;
	}

	.qty:focus {
		border-color: var(--clover);
	}

	/* The design's quantity box is a plain field, so the spinner comes off. */
	.qty[type="number"] {
		-moz-appearance: textfield;
		appearance: textfield;
	}

	.qty::-webkit-outer-spin-button,
	.qty::-webkit-inner-spin-button {
		-webkit-appearance: none;
		appearance: none;
		margin: 0;
	}

	/* ---------------------------------------------------------------------
	 * Payment, terms and the small print
	 * ------------------------------------------------------------------ */

	#payment .payment_methods {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	#payment .payment_methods > li {
		border-top: 1px solid color-mix(in oklab, var(--sage) 40%, transparent);
		padding: 0.875rem 0;
	}

	#payment .payment_methods > li > label {
		align-items: center;
		color: var(--boreal);
		display: inline-flex;
		font-family: var(--font-display);
		font-size: 15px;
		font-weight: 600;
		gap: 0.625rem;
	}

	#payment .payment_methods input {
		accent-color: var(--clover);
	}

	#payment .payment_box {
		background: var(--frost);
		border-radius: 12px;
		color: color-mix(in oklab, var(--boreal) 72%, transparent);
		font-size: 14.5px;
		line-height: 1.7;
		margin-top: 0.75rem;
		padding: 1rem 1.25rem;
	}

	.form-row.place-order {
		border-top: 1px solid color-mix(in oklab, var(--sage) 40%, transparent);
		margin-top: 1.25rem;
		padding-top: 1.25rem;
	}

	/* The strength meter the account password field puts under itself. */
	.woocommerce-password-strength {
		border: 1px solid var(--sage);
		border-radius: 9999px;
		font-family: var(--font-mono);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.14em;
		margin-top: 0.625rem;
		padding: 0.375rem 0.875rem;
		text-align: center;
		text-transform: uppercase;
	}

	.woocommerce-password-strength.short,
	.woocommerce-password-strength.bad {
		background: color-mix(in oklab, var(--radish) 12%, transparent);
		border-color: color-mix(in oklab, var(--radish) 40%, transparent);
		color: var(--radish);
	}

	.woocommerce-password-strength.good {
		background: color-mix(in oklab, var(--growlamp) 14%, transparent);
		border-color: color-mix(in oklab, var(--growlamp) 45%, transparent);
		color: color-mix(in oklab, var(--growlamp) 70%, var(--boreal));
	}

	.woocommerce-password-strength.strong {
		background: color-mix(in oklab, var(--clover) 12%, transparent);
		border-color: color-mix(in oklab, var(--clover) 40%, transparent);
		color: var(--clover);
	}

	.woocommerce-password-hint {
		color: color-mix(in oklab, var(--boreal) 55%, transparent);
		display: block;
		font-size: 13.5px;
		line-height: 1.6;
		margin-top: 0.5rem;
	}

	/*
	 * The wrapper opens the block that ends in the place-order button, and is
	 * usually the first thing inside a row already ruled off above it. The
	 * second rule is therefore only drawn when something actually precedes it.
	 */
	.woocommerce-terms-and-conditions-wrapper {
		margin-bottom: 1.25rem;
	}

	.woocommerce-terms-and-conditions-wrapper:not(:first-child) {
		border-top: 1px solid color-mix(in oklab, var(--sage) 40%, transparent);
		margin-top: 1.5rem;
		padding-top: 1.5rem;
	}

	.woocommerce-terms-and-conditions-wrapper > .woocommerce-privacy-policy-text {
		margin-bottom: 1rem;
	}

	/*
	 * The terms themselves are folded away until asked for; WooCommerce sets
	 * the fold inline, so only the panel around it is described here.
	 */
	.woocommerce-terms-and-conditions {
		background: var(--frost);
		border: 1px solid color-mix(in oklab, var(--sage) 40%, transparent);
		border-radius: 16px;
		color: color-mix(in oklab, var(--boreal) 78%, transparent);
		font-size: 15px;
		line-height: 1.7;
		margin-bottom: 1rem;
		padding: 1.25rem 1.5rem;
	}

	.woocommerce-terms-and-conditions p + p {
		margin-top: 0.75rem;
	}

	.woocommerce-privacy-policy-text {
		color: color-mix(in oklab, var(--boreal) 60%, transparent);
		font-size: 14px;
		line-height: 1.7;
	}

	.woocommerce-privacy-policy-text p + p {
		margin-top: 0.75rem;
	}

	.woocommerce-terms-and-conditions-link,
	.woocommerce-privacy-policy-link,
	.woocommerce-privacy-policy-text a {
		color: var(--clover);
		text-decoration: underline;
		text-underline-offset: 2px;
	}
}

/*
 * The cart's line items, on a narrow screen.
 *
 * The items table is six columns wide — thumbnail, name, price, quantity,
 * subtotal, remove — and six columns do not fit a phone. WooCommerce solved this
 * in woocommerce-smallscreen.css, which inc/woocommerce.php drops, so the table
 * has to be folded here instead or it runs off the side of the page.
 *
 * This block is deliberately outside the `components` layer. The cells carry
 * their desktop padding and alignment as utility classes, and a layer below
 * `utilities` could not override them; unlayered rules outrank every layer, so
 * the fold wins where it has to and only inside this media query.
 *
 * The totals table beside it is left alone: it is two columns, a label and a
 * figure, and it already reads correctly at any width.
 */
@media (max-width: 767px) {

	.woocommerce-cart-form__contents thead {
		display: none;
	}

	.woocommerce-cart-form__contents,
	.woocommerce-cart-form__contents tbody {
		display: block;
		width: 100%;
	}

	/*
	 * Photograph down the left, the name and its price beside it, then the
	 * quantity and what the line comes to on a row of their own.
	 */
	.woocommerce-cart-form__contents .cart_item {
		align-items: start;
		column-gap: 1rem;
		display: grid;
		grid-template-areas:
			"thumb name     remove"
			"thumb price    price"
			"qty   subtotal subtotal";
		grid-template-columns: 84px 1fr auto;
		padding-bottom: 1.25rem;
		padding-top: 1.25rem;
		row-gap: 0.875rem;
	}

	/*
	 * The hairline between rows is drawn on the top edge of every cell, which is
	 * right for a table and wrong for a folded one — each cell is its own grid
	 * item here, so the rule would draw a line inside the item rather than
	 * between two of them. The row carries its own underline already.
	 */
	.woocommerce-cart-form__contents .cart_item > td {
		border-top: 0;
		display: block;
		padding: 0;
	}

	.woocommerce-cart-form__contents .product-thumbnail {
		grid-area: thumb;
	}

	.woocommerce-cart-form__contents .product-name {
		grid-area: name;
	}

	/* Under the name, where a price belongs when it is not in a column. */
	.woocommerce-cart-form__contents .product-price {
		grid-area: price;
		text-align: left;
	}

	.woocommerce-cart-form__contents .product-quantity {
		grid-area: qty;
	}

	.woocommerce-cart-form__contents .product-subtotal {
		align-self: center;
		grid-area: subtotal;
		text-align: right;
	}

	.woocommerce-cart-form__contents .product-remove {
		align-self: start;
		grid-area: remove;
		text-align: right;
	}

	/* The coupon row and the update button stack rather than sit side by side. */
	.woocommerce-cart-form__contents .actions {
		display: block;
		padding-left: 0;
		padding-right: 0;
	}
}

/*
 * The announcement bar.
 *
 * It is a fixed 36px band, which is right for the one line the copy is on at a
 * desk. The text is a setting, and on a phone even the shipped sentence takes
 * three lines, so the band has to grow rather than crop what it was given. The
 * rule is unlayered so it outranks the height utility on the element itself,
 * and it keeps 36px as the floor so a short announcement looks unchanged.
 */
[data-announcement] {
	height: auto;
	min-height: 2.25rem;
	padding-bottom: 0.375rem;
	padding-top: 0.375rem;
}