/* Cart, checkout, order confirmation and My Account. Rules trace to docs/design-spec-store.md
   (section names in the comments). Loaded after style.css. */

/* ================================================================ Store foundations */

/* Error: WooCommerce's own error colour for dark controls (#F18C8C, packages-style.css
   .has-dark-controls), 7.9:1 on Dark, 7.3:1 on Surface. The only new colour, one job.
   Plate rule: the page rule's recipe (ivory at 10%) computed over Surface instead of Dark,
   so rules inside a plate have the same 1.26:1 weight as rules on the page. */
:root {
	--swag-error: #F18C8C;
	--swag-plate-rule: #302F2D;
}

/* Specificity: WooCommerce prints its block stylesheets (cart.css, checkout.css,
   mini-cart-style.css) in the footer, after this file, so a tie goes to Woo. Every rule
   below is nested in :root, which adds one class-level step and wins those ties without
   !important. */
:root {
	.swag-store {
		font-size: var(--wp--preset--font-size--medium);
	}
	/* Woo's block-theme CSS caps page titles on cart, checkout and account at 1000px, centred. */
	.swag-store > .swag-store__title.wp-block-post-title {
		max-width: 1312px;
		margin: 0 auto 32px;
		font-size: var(--wp--preset--font-size--title);
		font-weight: 500;
		line-height: 1.1;
		letter-spacing: -0.022em;
		color: var(--wp--preset--color--light);
	}
	.swag-store h2,
	.swag-store .wc-block-components-title.wc-block-components-title {
		font-size: var(--wp--preset--font-size--large);
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: -0.017em;
		color: var(--wp--preset--color--contrast);
		text-transform: none;
	}
	.swag-store a:not(.wp-element-button):not(.button) {
		color: var(--wp--preset--color--contrast);
	}
	.swag-store :is(.amount, .wc-block-formatted-money-amount, td, th) {
		font-variant-numeric: tabular-nums;
	}

	/* ================================================================ Notices */

	/* Store notices as plates: Surface ground, 8px, no border (spec-store, Notices). Woo's own
	   icon disc stays, recoloured: ivory for success and info, error red for errors, so the state
	   reads from the icon shape and the text, not colour alone. */
	.swag-store .wc-block-store-notices,
	.swag-store .woocommerce-notices-wrapper:not(:empty) {
		margin-bottom: 32px;
	}
	.wc-block-components-notice-banner.wc-block-components-notice-banner {
		gap: 12px;
		margin: 0 0 8px;
		padding: 16px 20px !important;
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.5;
		color: var(--wp--preset--color--contrast);
		background: var(--wp--preset--color--surface);
		border: 0;
		border-radius: 8px;
	}
	/* Woo focuses a new notice so screen readers announce it; it is not a control, so no ring. */
	.wc-block-components-notice-banner[tabindex="-1"]:focus {
		outline: none;
	}
	.wc-block-components-notice-banner.wc-block-components-notice-banner > svg {
		width: 24px;
		height: 24px;
		fill: var(--wp--preset--color--base);
		background-color: var(--wp--preset--color--contrast);
	}
	.wc-block-components-notice-banner.is-error > svg {
		background-color: var(--swag-error);
	}
	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
		color: var(--wp--preset--color--contrast) !important;
		opacity: 1;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}
	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward:hover {
		text-decoration: underline;
		color: var(--wp--preset--color--light) !important;
	}
	.wc-block-components-notice-banner > .wc-block-components-button {
		color: var(--wp--preset--color--contrast) !important;
		opacity: 1;
	}

	/* ================================================================ Form controls */

	/* One form language with the archive select and the PDP size buttons: Dark ground, 1px
	   Control edge (3.37:1), 4px corners, ivory text. Focus is the theme's 2px Guardian Blue
	   outline. Checkout block inputs keep Woo's floating label, set at 14px, so they are 56px
	   (spec-store, Form controls). */
	.wc-block-components-form .wc-block-components-text-input input:is([type=email], [type=number], [type=password], [type=tel], [type=text], [type=url]),
	.wc-block-components-text-input input:is([type=email], [type=number], [type=password], [type=tel], [type=text], [type=url]) {
		height: 56px;
		padding: 16px;
		font-size: var(--wp--preset--font-size--medium);
		line-height: 22px;
		color: var(--wp--preset--color--contrast);
		background-color: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--edge);
		border-radius: 4px;
	}
	.wc-block-components-form .wc-block-components-text-input.is-active input:is([type=email], [type=number], [type=password], [type=tel], [type=text], [type=url]),
	.wc-block-components-text-input.is-active input:is([type=email], [type=number], [type=password], [type=tel], [type=text], [type=url]),
	.wc-block-components-text-input input:-webkit-autofill {
		padding: 26px 16px 8px;
	}
	.wc-block-components-form .wc-block-components-text-input input:focus,
	.wc-block-components-text-input input:focus {
		padding-left: 16px;
		color: var(--wp--preset--color--contrast);
		background-color: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--contrast);
		outline: 2px solid var(--wp--preset--color--primary);
		outline-offset: 2px;
	}
	.wc-block-components-form .wc-block-components-text-input label,
	.wc-block-components-text-input label {
		left: 17px;
		top: 28px;
		font-size: var(--wp--preset--font-size--medium);
		color: var(--wp--preset--color--contrast-muted);
		letter-spacing: -0.011em;
	}
	.wc-block-components-form .wc-block-components-text-input.is-active label,
	.wc-block-components-text-input.is-active label,
	.wc-block-components-text-input input:-webkit-autofill + label {
		top: 8px;
		transform: scale(0.875);
	}
	/* Chrome paints autofilled fields light blue with black text; an inset fill keeps them Dark.
	   No blur and no offset: a fill, not a shadow. */
	.swag-store input:-webkit-autofill,
	.swag-store input:-webkit-autofill:focus {
		-webkit-text-fill-color: var(--wp--preset--color--contrast);
		-webkit-box-shadow: 0 0 0 100px var(--wp--preset--color--base) inset;
		caret-color: var(--wp--preset--color--contrast);
	}

	.wc-block-components-form .wc-block-components-text-input.has-error input,
	.wc-block-components-text-input.has-error input,
	.wc-block-components-text-input.has-error input:focus {
		border-color: var(--swag-error);
		box-shadow: none;
	}
	.wc-block-components-form .wc-block-components-text-input.has-error label,
	.wc-block-components-text-input.has-error label {
		color: var(--swag-error);
	}
	.wc-block-components-validation-error {
		margin-top: 6px;
		font-size: var(--wp--preset--font-size--small);
		line-height: 20px;
		color: var(--swag-error);
	}
	.wc-block-components-validation-error > p {
		display: flex;
		align-items: flex-start;
		gap: 6px;
		margin: 0;
		line-height: 20px;
	}
	.wc-block-components-validation-error svg {
		flex-shrink: 0;
		fill: var(--swag-error);
	}

	/* Country select, same box as the text inputs. */
	.wc-blocks-components-select .wc-blocks-components-select__container {
		background: var(--wp--preset--color--base);
	}
	.wc-blocks-components-select .wc-blocks-components-select__select,
	.wc-blocks-components-select .wc-blocks-components-select__select:focus {
		height: 56px;
		padding: 26px 40px 8px 16px;
		font-size: var(--wp--preset--font-size--medium);
		color: var(--wp--preset--color--contrast);
		border: 1px solid var(--wp--preset--color--edge);
		border-radius: 4px;
	}
	.wc-blocks-components-select .wc-blocks-components-select__select:focus {
		border-color: var(--wp--preset--color--contrast);
		outline: 2px solid var(--wp--preset--color--primary);
		outline-offset: 2px;
	}
	.wc-blocks-components-select .wc-blocks-components-select__label {
		top: 8px;
		left: 17px;
		font-size: var(--wp--preset--font-size--small);
		line-height: 19px;
		color: var(--wp--preset--color--contrast-muted);
	}
	.wc-blocks-components-select .wc-blocks-components-select__expand {
		fill: var(--wp--preset--color--contrast);
	}
	.has-error .wc-blocks-components-select .wc-blocks-components-select__select {
		border-color: var(--swag-error);
		color: var(--wp--preset--color--contrast);
	}

	/* Checkboxes: 20px, 4px, edge border; checked fills ivory like a selected size button. */
	.wc-block-components-checkbox label {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 20px;
		color: var(--wp--preset--color--contrast);
	}
	.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] {
		background-color: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--edge);
		border-radius: 4px;
	}
	.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked {
		background: var(--wp--preset--color--contrast);
		border-color: var(--wp--preset--color--contrast);
	}
	.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:focus-visible {
		outline: 2px solid var(--wp--preset--color--primary);
		outline-offset: 2px;
	}
	.wc-block-components-checkbox .wc-block-components-checkbox__mark {
		fill: var(--wp--preset--color--base);
	}

	/* Radio groups (shipping, payment): one edge-bordered group, 4px; the chosen option gets an
	   ivory 1px ring and an ivory dot, like the selected size button. Woo draws the ring as an
	   inset box-shadow; here it is an outline, so no shadow is left on the page. */
	.wc-block-components-radio-control--highlight-checked::after {
		border-color: var(--wp--preset--color--edge);
	}
	.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option::after,
	.wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option::after {
		background: var(--wp--preset--color--border);
	}
	.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
	.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
		box-shadow: none;
		outline: 1px solid var(--wp--preset--color--contrast);
		outline-offset: -1px;
	}
	.wc-block-components-radio-control__option {
		padding: 16px 16px 16px 52px;
		color: var(--wp--preset--color--contrast);
	}
	.wc-block-components-radio-control .wc-block-components-radio-control__input {
		left: 16px;
		background: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--edge);
	}
	.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
		border-color: var(--wp--preset--color--contrast);
	}
	.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
		background: var(--wp--preset--color--contrast);
	}
	.wc-block-components-radio-control .wc-block-components-radio-control__input:focus {
		outline: 2px solid var(--wp--preset--color--primary);
		outline-offset: 2px;
	}
	.wc-block-components-radio-control__label,
	.wc-block-components-radio-control__secondary-label {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 24px;
	}
	.wc-block-components-radio-control__description,
	.wc-block-components-radio-control__secondary-description,
	.wc-block-components-radio-control-accordion-content {
		font-size: var(--wp--preset--font-size--small);
		line-height: 20px;
		color: var(--wp--preset--color--contrast-muted);
	}
	.wc-block-components-radio-control-accordion-content {
		padding: 0 16px 16px 52px;
	}

	.wc-block-components-textarea,
	.wc-block-checkout__order-notes textarea {
		padding: 12px 16px;
		font: inherit;
		color: var(--wp--preset--color--contrast);
		background: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--edge);
		border-radius: 4px;
	}

	/* Classic forms (My Account): label above the field (Baymard, label position), 14px 500
	   like the PDP's "Maat", 48px fields. */
	.swag-store .woocommerce form .form-row {
		margin: 0 0 16px;
		padding: 0;
	}
	.swag-store .woocommerce form .form-row label,
	.swag-store .woocommerce form .woocommerce-form-row label {
		display: block;
		margin: 0 0 8px;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		line-height: 20px;
		letter-spacing: -0.006em;
		color: var(--wp--preset--color--contrast);
	}
	.swag-store .woocommerce form .form-row :is(.required, .optional) {
		font-weight: 400;
		color: var(--wp--preset--color--contrast-muted);
		text-decoration: none;
		border: 0;
	}
	.swag-store .woocommerce form .form-row :is(input.input-text, textarea, select),
	.swag-store .woocommerce form :is(input.input-text, input.woocommerce-Input) {
		box-sizing: border-box;
		width: 100%;
		height: 48px;
		margin: 0;
		padding: 0 16px;
		font: inherit;
		font-size: var(--wp--preset--font-size--medium);
		line-height: 22px;
		color: var(--wp--preset--color--contrast);
		background: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--edge);
		border-radius: 4px;
		transition: border-color var(--swag-ease);
	}
	.swag-store .woocommerce form .form-row textarea {
		height: auto;
		min-height: 96px;
		padding: 12px 16px;
	}
	.swag-store .woocommerce form :is(input.input-text, input.woocommerce-Input, textarea, select):focus {
		border-color: var(--wp--preset--color--contrast);
		outline: 2px solid var(--wp--preset--color--primary);
		outline-offset: 2px;
	}
	.swag-store .woocommerce form .form-row.woocommerce-invalid :is(input.input-text, select) {
		border-color: var(--swag-error);
	}
	.swag-store .woocommerce form .password-input input[type=password],
	.swag-store .woocommerce form .password-input input[type=text] {
		padding-right: 48px;
	}
	.swag-store .woocommerce form .show-password-input {
		right: 14px;
	}
	/* Woo's eye icon is a near-black SVG; inverted it reads ivory on Dark. */
	.swag-store .woocommerce form .show-password-input::before {
		filter: invert(1);
	}

	.swag-store .woocommerce input[type=checkbox].woocommerce-form__input-checkbox,
	.swag-store .woocommerce .woocommerce-form__label-for-checkbox input[type=checkbox] {
		appearance: none;
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		margin: 0;
		background: var(--wp--preset--color--base) no-repeat center;
		border: 1px solid var(--wp--preset--color--edge);
		border-radius: 4px;
		cursor: pointer;
	}
	.swag-store .woocommerce input[type=checkbox].woocommerce-form__input-checkbox:checked {
		background-color: var(--wp--preset--color--contrast);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23121212' stroke-width='2'%3E%3Cpath d='M3 7.5 5.8 10 11 4'/%3E%3C/svg%3E");
		border-color: var(--wp--preset--color--contrast);
	}
	.swag-store .woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		margin: 0;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 400;
		cursor: pointer;
	}

	/* select2 (Woo's country picker on the address form). */
	.swag-store .select2-container--default .select2-selection--single {
		height: 48px;
		background: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--edge);
		border-radius: 4px;
	}
	.swag-store .woocommerce form .form-row .select2-container--default .select2-selection--single .select2-selection__rendered {
		padding: 0 40px 0 16px;
		font-size: var(--wp--preset--font-size--medium);
		line-height: 46px;
		color: var(--wp--preset--color--contrast);
	}
	.swag-store .select2-container--default .select2-selection--single .select2-selection__arrow {
		top: 1px;
		right: 12px;
		height: 46px;
	}
	.swag-store .select2-container--default .select2-selection--single .select2-selection__arrow b {
		border-top-color: var(--wp--preset--color--contrast);
	}
	.swag-store .select2-container--focus .select2-selection--single,
	.swag-store .select2-container--open .select2-selection--single {
		border-color: var(--wp--preset--color--contrast);
	}
	.select2-container .select2-dropdown {
		color: var(--wp--preset--color--contrast);
		background: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--edge);
		border-radius: 4px;
	}
	.select2-container .select2-search--dropdown .select2-search__field {
		height: 40px;
		padding: 0 12px;
		color: var(--wp--preset--color--contrast);
		background: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--edge);
		border-radius: 4px;
	}
	.select2-container .select2-results__option {
		padding: 8px 12px;
	}
	.select2-container--default .select2-results__option[aria-selected=true],
	.select2-container--default .select2-results__option[data-selected=true] {
		background: var(--wp--preset--color--border);
	}
	.select2-container--default .select2-results__option--highlighted[aria-selected],
	.select2-container--default .select2-results__option--highlighted[data-selected] {
		color: var(--wp--preset--color--light);
		background: var(--wp--preset--color--primary);
	}

	/* ================================================================ Buttons */

	/* Pills only on actions. Guardian Blue 48px for the page's one purchase action (proceed to
	   checkout, place order, mini-cart checkout), exactly the PDP add-to-cart. Ivory pill for
	   other form submits (theme button), outline pill for secondary actions (header account). */
	.wc-block-cart__submit-button.wc-block-cart__submit-button,
	.wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button,
	.wc-block-mini-cart__footer-checkout.wc-block-mini-cart__footer-checkout {
		min-height: 48px;
		padding: 0 24px;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 500;
		letter-spacing: -0.011em;
		color: var(--wp--preset--color--light);
		background: var(--wp--preset--color--primary);
		border: 0;
		border-radius: 999px;
		box-shadow: none;
		transition: background-color var(--swag-ease);
	}
	.wc-block-cart__submit-button.wc-block-cart__submit-button:hover,
	.wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button:hover:not(:disabled),
	.wc-block-mini-cart__footer-checkout.wc-block-mini-cart__footer-checkout:hover {
		color: var(--wp--preset--color--light);
		background: var(--wp--preset--color--primary-deep);
	}

	.swag-store .woocommerce :is(button.button, .button.wp-element-button):not(.view):not(.edit):not(.wc-forward) {
		min-height: 48px;
		padding: 0 24px;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 500;
		line-height: 1;
	}

	.wc-block-mini-cart__footer-cart.wc-block-mini-cart__footer-cart,
	.swag-store .woocommerce a.button.view,
	.swag-store .woocommerce a.edit,
	.wc-block-components-totals-coupon__button.wc-block-components-totals-coupon__button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--wp--preset--color--contrast);
		background: transparent;
		border: 1px solid var(--wp--preset--color--edge);
		border-radius: 999px;
		box-shadow: none;
		text-decoration: none;
		transition: border-color var(--swag-ease);
	}
	.wc-block-mini-cart__footer-cart.wc-block-mini-cart__footer-cart:hover,
	.swag-store .woocommerce a.button.view:hover,
	.swag-store .woocommerce a.edit:hover,
	.wc-block-components-totals-coupon__button.wc-block-components-totals-coupon__button:hover {
		color: var(--wp--preset--color--contrast);
		background: transparent;
		border-color: var(--wp--preset--color--contrast);
	}
	.swag-store .woocommerce a.button.view,
	.swag-store .woocommerce a.edit {
		height: 36px;
		padding: 0 16px;
		font-size: var(--wp--preset--font-size--nav);
		font-weight: 500;
		letter-spacing: -0.009em;
		white-space: nowrap;
	}

	/* ================================================================ Line items (cart, mini-cart, summaries) */

	/* Thumbnails are the product's 4:5 plate, not a square: the same crop as the grid and the
	   product page, so the item in the cart looks like the one that was picked (spec-store,
	   Cart). Line items carry no category class, so the plate is the unlit Surface gradient. */
	.wc-block-cart-item__image img:not([hidden]),
	.wc-block-components-order-summary-item__image img:not([hidden]) {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 5;
		object-fit: cover;
		background: linear-gradient(180deg, #1B1B1A 0%, #161616 100%);
		border-radius: 8px;
	}
	.wc-block-components-product-name.wc-block-components-product-name {
		font-weight: 500;
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
	}
	a.wc-block-components-product-name:hover {
		text-decoration: underline;
	}
	.wc-block-cart-item__prices,
	.wc-block-components-product-metadata,
	.wc-block-components-product-details {
		font-size: var(--wp--preset--font-size--small);
		line-height: 20px;
		letter-spacing: -0.006em;
		color: var(--wp--preset--color--contrast-muted);
	}
	/* The short description repeats on every line; GitHub's cart shows name, variant and price only (R1-cart). */
	.wc-block-components-product-metadata__description {
		display: none;
	}
	.wc-block-components-product-details {
		margin: 0;
		list-style: none;
	}

	.wc-block-components-quantity-selector.wc-block-components-quantity-selector {
		width: 108px;
		height: 36px;
		color: var(--wp--preset--color--contrast);
		border: 1px solid var(--wp--preset--color--edge);
		border-radius: 4px;
	}
	.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
		font-size: var(--wp--preset--font-size--small);
		font-variant-numeric: tabular-nums;
		color: var(--wp--preset--color--contrast);
	}
	.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
		min-width: 34px;
		font-size: var(--wp--preset--font-size--medium);
		color: var(--wp--preset--color--contrast);
		opacity: 1;
	}
	.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
		color: var(--wp--preset--color--edge);
		opacity: 1;
	}
	.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) {
		background: var(--wp--preset--color--surface);
	}
	.wc-block-components-quantity-selector :is(input, button):focus {
		box-shadow: none;
	}
	.wc-block-components-quantity-selector :is(input, button):focus-visible {
		outline: 2px solid var(--wp--preset--color--primary);
		outline-offset: 2px;
	}

	/* Remove: the header search's 36px round icon button. */
	.wc-block-cart-item__remove-link.wc-block-cart-item__remove-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		color: var(--wp--preset--color--contrast-muted);
		border-radius: 999px;
		text-decoration: none;
		opacity: 1;
	}
	.wc-block-cart-item__remove-link.wc-block-cart-item__remove-link:hover {
		color: var(--wp--preset--color--contrast);
		background: var(--wp--preset--color--surface);
	}
	.wc-block-cart-item__remove-link svg {
		fill: currentColor;
	}

	/* Totals rows. */
	.wc-block-components-totals-wrapper {
		padding: 16px 0;
		border-top: 1px solid var(--wp--preset--color--border);
	}
	.wp-block-woocommerce-cart-order-summary-totals-block,
	.wp-block-woocommerce-checkout-order-summary-totals-block {
		padding: 0;
		border-top-color: var(--swag-plate-rule);
	}
	.wc-block-components-totals-wrapper:empty {
		display: none;
	}
	.wc-block-components-totals-item {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 24px;
		color: var(--wp--preset--color--contrast);
	}
	.wc-block-components-totals-item + .wc-block-components-totals-item,
	.wc-block-components-totals-wrapper > * + * {
		margin-top: 8px;
	}
	.wc-block-components-totals-item__description:empty {
		display: none;
	}
	.wc-block-components-totals-item__description {
		font-size: var(--wp--preset--font-size--small);
		line-height: 20px;
		color: var(--wp--preset--color--contrast-muted);
	}
	.wc-block-components-totals-footer-item.wc-block-components-totals-footer-item :is(.wc-block-components-totals-item__label, .wc-block-components-totals-item__value) {
		font-size: var(--wp--preset--font-size--large);
		font-weight: 500;
		line-height: 28px;
		letter-spacing: -0.017em;
		color: var(--wp--preset--color--light);
	}
	.wc-block-components-panel__button {
		font-size: var(--wp--preset--font-size--medium);
		color: var(--wp--preset--color--contrast);
	}
	.wc-block-components-panel__button svg {
		fill: var(--wp--preset--color--contrast);
	}
	.wc-block-components-totals-coupon__form {
		gap: 8px;
	}
	.wc-block-components-totals-coupon__button.wc-block-components-totals-coupon__button {
		height: 56px;
		padding: 0 20px;
		font-size: var(--wp--preset--font-size--medium);
	}

	/* ================================================================ Summary plates */

	/* The money column of cart and checkout is a Surface plate, 8px: the one grouped panel on
	   the page, as Shopify's checkout groups its summary on a tinted ground (R-checkout). A
	   ground without a border is not a card by the checklist's own test (L2). */
	.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
	.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
		margin: 0;
		padding: 8px 24px;
		border: 0;
		background: var(--wp--preset--color--surface);
		border-radius: 8px;
	}
	.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
	.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
		border-top-color: var(--swag-plate-rule);
	}
	.wc-block-cart__sidebar .wc-block-components-panel,
	.wc-block-cart__sidebar .wc-block-components-totals-coupon,
	.wc-block-cart__sidebar .wc-block-components-totals-item,
	.wc-block-checkout__sidebar .wc-block-components-panel,
	.wc-block-checkout__sidebar .wc-block-components-totals-coupon,
	.wc-block-checkout__sidebar .wc-block-components-totals-item {
		padding-left: 0;
		padding-right: 0;
	}
	.wc-block-cart__sidebar .wc-block-components-text-input input,
	.wc-block-checkout__sidebar .wc-block-components-text-input input {
		background-color: var(--wp--preset--color--surface);
	}

	/* ================================================================ Cart */

	/* Items beside a summary plate at the product page's 7:5 split and 48px gap, so cart,
	   checkout and product page share one column rhythm (spec, Product page). Woo sets is-large
	   on the layout from its own width. */
	.wc-block-components-sidebar-layout.is-large {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 48px;
		align-items: start;
		margin: 0;
	}
	.wc-block-components-sidebar-layout.is-large > :is(.wc-block-components-main, .wc-block-components-sidebar) {
		width: auto;
		padding: 0;
	}
	.wc-block-cart:not(.is-large) > .wc-block-cart__sidebar {
		margin-top: 40px;
	}
	.wc-block-checkout:not(.is-large) > .wc-block-checkout__sidebar {
		margin: 0 0 32px;
	}

	.swag-cart .wc-block-cart__totals-title.wc-block-cart__totals-title {
		display: block;
		margin: 16px 0 8px;
		padding: 0;
		font-size: var(--wp--preset--font-size--large);
		font-weight: 500;
		letter-spacing: -0.017em;
		text-align: left;
		text-transform: none;
		color: var(--wp--preset--color--contrast);
	}
	.wc-block-cart__submit {
		margin: 8px 0 24px;
	}
	.wc-block-cart__submit-container {
		padding: 0;
	}

	/* GitHub's cart has no column labels, just the rule (R1-cart). The header row stays for
	   screen readers. */
	.wc-block-cart .wc-block-cart-items .wc-block-cart-items__header {
		text-transform: none;
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	table.wc-block-cart-items {
		width: 100%;
		border-collapse: collapse;
	}
	.wc-block-cart__main .wc-block-cart-items td {
		padding: 24px 0;
		border-top: 1px solid var(--wp--preset--color--border);
		vertical-align: top;
	}
	.wc-block-cart__main .wc-block-cart-items tr:last-child td {
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
	.wc-block-cart__main .wc-block-cart-items tr:first-child td {
		padding-top: 0;
		border-top: 0;
	}
	/* GitHub gives the thumbnail a quarter of the item row (261 of 1091px, R1-cart). */
	.wc-block-cart__main .wc-block-cart-items .wc-block-cart-item__image {
		width: 160px;
		padding-right: 24px;
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
		font-size: var(--wp--preset--font-size--large);
		line-height: 28px;
		letter-spacing: -0.017em;
	}
	.wc-block-cart .wc-block-cart-item__prices {
		margin-top: 4px;
	}
	.wc-block-cart .wc-block-cart-item__quantity {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 16px;
	}
	.wc-block-cart table.wc-block-cart-items td.wc-block-cart-item__total {
		display: table-cell;
		padding-left: 16px;
		text-align: right;
	}
	.wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price {
		font-size: var(--wp--preset--font-size--large);
		line-height: 28px;
		letter-spacing: -0.017em;
		color: var(--wp--preset--color--contrast-muted);
	}

	/* Narrow: the row becomes Woo's grid; thumbnail 96px, still 4:5. */
	.is-medium table.wc-block-cart-items .wc-block-cart-items__row,
	.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
	.is-small table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 96px minmax(0, 1fr);
		padding: 24px 0;
		border-top: 1px solid var(--wp--preset--color--border);
	}
	.is-medium table.wc-block-cart-items .wc-block-cart-items__row:first-child,
	.is-mobile table.wc-block-cart-items .wc-block-cart-items__row:first-child,
	.is-small table.wc-block-cart-items .wc-block-cart-items__row:first-child {
		padding-top: 0;
		border-top: 0;
	}
	:is(.is-medium, .is-mobile, .is-small) .wc-block-cart__main .wc-block-cart-items td {
		padding: 0;
		border: 0;
	}
	:is(.is-medium, .is-mobile, .is-small) .wc-block-cart__main .wc-block-cart-items .wc-block-cart-item__image {
		width: auto;
		padding-right: 16px;
	}
	.wc-block-cart:is(.is-medium, .is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
	.wc-block-cart:is(.is-medium, .is-mobile, .is-small) .wc-block-cart-item__total .wc-block-components-product-price {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 24px;
	}
	.wc-block-cart:is(.is-medium, .is-mobile, .is-small) table.wc-block-cart-items td.wc-block-cart-item__total {
		padding-left: 0;
	}
	:is(.is-medium, .is-mobile, .is-small) table.wc-block-cart-items tr:last-child td {
		border-bottom: 0;
	}
	/* Woo pins "Doorgaan naar afrekenen" to the bottom of small screens on a white bar with a
	   shadow; here it is Dark with a rule, like the header. */
	.wc-block-cart__submit-container--sticky.wc-block-cart__submit-container--sticky {
		padding: 12px var(--swag-margin);
		background: var(--wp--preset--color--base);
		border-top: 1px solid var(--wp--preset--color--border);
		box-shadow: none;
	}
	.wc-block-cart__submit-container--sticky::before {
		display: none;
	}

	/* ================================================================ Empty cart */

	/* The announcement bar at eight rows: Surface band, the drop's ASCII on both edges, the
	   message in the middle (spec-store, ASCII). Woo's sad-face mask on ::before becomes the
	   left edge, ::after the right. */
	.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 96px;
		margin: 0 0 var(--wp--preset--spacing--60);
		padding: 24px 96px;
		overflow: hidden;
		font-size: var(--wp--preset--font-size--large);
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: -0.017em;
		text-align: center;
		color: var(--wp--preset--color--contrast);
		background: var(--wp--preset--color--surface);
		border-radius: 8px;
	}
	.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before,
	.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		display: block;
		width: 320px;
		height: auto;
		margin: 0;
		background-color: transparent;
		background-repeat: no-repeat;
		background-size: auto 96px;
		mask-image: none;
		-webkit-mask-image: none;
		pointer-events: none;
	}
	.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before {
		left: 0;
		background-image: url("../img/store-ascii-band-left.svg");
		background-position: left center;
	}
	.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::after {
		right: 0;
		background-image: url("../img/store-ascii-band-right.svg");
		background-position: right center;
	}
	@media (max-width: 767px) {
		.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
			padding: 24px 64px;
			font-size: var(--wp--preset--font-size--medium);
		}
		.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before,
		.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::after {
			width: 88px;
		}
		.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before {
			mask-image: linear-gradient(to right, #000 40%, transparent 100%);
			-webkit-mask-image: linear-gradient(to right, #000 40%, transparent 100%);
		}
		.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::after {
			mask-image: linear-gradient(to left, #000 40%, transparent 100%);
			-webkit-mask-image: linear-gradient(to left, #000 40%, transparent 100%);
		}
	}
	.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
		display: none;
	}
	.wp-block-woocommerce-empty-cart-block > h2.wp-block-heading:not(.wc-block-cart__empty-cart__title) {
		margin: 0 0 32px;
		font-size: var(--wp--preset--font-size--heading);
		letter-spacing: -0.020em;
		text-align: left;
	}

	/* "Nieuw in de winkel" as the shop's product cards (spec, Product card): 4:5 plate lit in the
	   category colour, 14px name, muted price, whole card one link, four in a row like "Bekijk ook". */
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 52px 16px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	@media (max-width: 1023px) {
		.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 40px 16px;
		}
	}
	.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__products .wc-block-grid__product {
		position: relative;
		width: auto;
		flex: none;
		max-width: none;
		margin: 0;
		padding: 0;
		text-align: left;
		border: 0;
	}
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
		display: block;
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
	}
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	/* Plate and line artwork come from style.css (Plates, Product lines). */
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
		display: block;
		margin: 0;
		overflow: hidden;
	}
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__products .wc-block-grid__product-image img {
		display: block;
		border: 0;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 5;
		object-fit: cover;
	}
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
		margin: 12px 0 0;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		line-height: 20px;
		letter-spacing: -0.006em;
	}
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link:hover .wc-block-grid__product-title {
		text-decoration: underline;
	}
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
		margin: 0;
		font-size: var(--wp--preset--font-size--small);
		line-height: 20px;
		letter-spacing: -0.006em;
		color: var(--wp--preset--color--contrast-muted);
	}

	/* ================================================================ Checkout */

	/* Enclosed checkout: logo and a way back to the cart, no navigation (Baymard, checkout
	   flow). Not sticky (style.css Header): there is nothing to reach. */
	.swag-checkout-header__cart .wc-block-cart-link {
		display: inline-flex;
		align-items: center;
		height: 36px;
		padding: 0 18px;
		font-size: var(--wp--preset--font-size--nav);
		letter-spacing: -0.009em;
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
		border: 1px solid var(--wp--preset--color--edge);
		border-radius: 999px;
		transition: border-color var(--swag-ease);
	}
	.swag-checkout-header__cart .wc-block-cart-link:hover {
		border-color: var(--wp--preset--color--contrast);
	}
	.swag-checkout-header__cart .wc-block-cart-link svg,
	.swag-checkout-header__cart .wc-block-cart-link .wc-block-cart-link__icon {
		display: none;
	}
	/* The legal line stays on checkout (BW 3:15d, see spec Footer); the navigation does not. */
	.swag-footer-legal-only .swag-footer {
		padding-top: 0;
	}
	.swag-footer-legal-only .swag-footer__top {
		display: none;
	}
	.swag-footer-legal-only .swag-footer__legal {
		margin-top: 0;
		border-top: 0;
	}

	.wc-block-checkout__form .wc-block-components-checkout-step {
		margin: 0 0 40px;
		padding: 0;
		border: 0;
	}
	.wc-block-components-checkout-step__heading {
		margin: 0 0 16px;
	}
	.wc-block-components-checkout-step__heading .wc-block-components-checkout-step__title {
		margin: 0;
	}
	.wc-block-components-checkout-step__description {
		margin: -8px 0 16px;
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--contrast-muted);
	}
	.wc-block-checkout__guest-checkout-notice {
		margin: 8px 0 0;
		font-size: var(--wp--preset--font-size--small);
		line-height: 20px;
		color: var(--wp--preset--color--contrast-muted);
	}
	.wc-block-components-address-form__address_2-toggle {
		display: inline-block;
		margin-top: 12px;
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--contrast);
		text-decoration: underline;
		text-underline-offset: 0.2em;
		text-decoration-thickness: 1px;
	}
	.wc-block-checkout__use-address-for-billing {
		margin-top: 20px;
	}
	.wc-block-components-address-card {
		padding: 16px 20px;
		font-size: var(--wp--preset--font-size--medium);
		color: var(--wp--preset--color--contrast);
		background: var(--wp--preset--color--surface);
		border: 0;
		border-radius: 8px;
	}
	.wc-block-components-address-card__edit {
		color: var(--wp--preset--color--contrast);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
	.wc-block-checkout__terms {
		margin: 0 0 24px;
		font-size: var(--wp--preset--font-size--small);
		line-height: 20px;
		color: var(--wp--preset--color--contrast-muted);
	}
	.wc-block-checkout__terms.wc-block-checkout__terms--with-separator {
		padding-top: 24px;
		border-top: 1px solid var(--wp--preset--color--border);
	}
	.wc-block-checkout__actions_row {
		margin: 0;
	}
	.wc-block-checkout__add-note {
		margin: 0;
	}
	.wc-block-checkout__order-notes.wc-block-components-checkout-step {
		margin-bottom: 32px;
	}

	/* Summary plate beside the form, sticky below the page top. */
	.wc-block-checkout__sidebar.is-sticky {
		top: 32px;
	}
	.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
		margin: 0;
		padding: 16px 0 8px;
		color: var(--wp--preset--color--contrast);
		border: 0;
	}
	.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
		margin: 0;
		font-size: var(--wp--preset--font-size--large);
		font-weight: 500;
		letter-spacing: -0.017em;
	}
	.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content.is-open {
		border-bottom: 0;
	}
	.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary {
		padding: 0;
	}
	/* Small screens: Woo repeats the summary above "Plaats bestelling"; same plate. */
	.wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill {
		padding: 8px 24px;
		background: var(--wp--preset--color--surface);
		border: 0;
		border-radius: 8px;
	}
	.wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill :is(.wc-block-components-totals-coupon, .wc-block-components-totals-item) {
		padding-left: 0;
		padding-right: 0;
	}
	.wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill .wc-block-components-totals-wrapper {
		border-top-color: var(--swag-plate-rule);
	}
	.wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper .wc-block-components-title {
		margin: 0 0 16px;
	}
	.wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper {
		padding-bottom: 24px;
	}
	.wc-block-components-checkout-order-summary__title-price {
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 500;
	}
	.wc-block-components-checkout-order-summary__title-icon svg {
		fill: var(--wp--preset--color--contrast);
	}
	.wp-block-woocommerce-checkout-order-summary-cart-items-block.wc-block-components-totals-wrapper {
		border-top: 0;
	}
	.wc-block-components-order-summary .wc-block-components-order-summary-item {
		gap: 0;
		padding: 8px 0;
		font-size: var(--wp--preset--font-size--medium);
	}
	.wc-block-components-order-summary .wc-block-components-order-summary-item__image {
		width: 56px;
		margin-top: 0;
		padding-bottom: 0;
	}
	.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
		padding: 0 16px;
	}
	.wc-block-components-order-summary .wc-block-components-order-summary-item__description .wc-block-components-product-name {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 22px;
	}
	.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
		font-size: var(--wp--preset--font-size--medium);
		color: var(--wp--preset--color--contrast);
	}
	/* Quantity count: the header cart badge (Guardian Blue, Light figure). */
	.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
		min-width: 22px;
		min-height: 22px;
		font-size: var(--wp--preset--font-size--small);
		background: var(--wp--preset--color--primary);
		border: 0;
		box-shadow: none;
	}
	.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
		color: var(--wp--preset--color--light);
	}
	.wc-block-checkout__sidebar .wc-block-components-product-metadata {
		margin-top: 2px;
	}

	/* ================================================================ Mini-cart drawer */

	/* Dark drawer with the nav's rule on its edge;
	   the page behind dims to 60% black, no blur (spec-store, Mini-cart). */
	.wc-block-components-drawer__screen-overlay {
		background-color: rgb(0 0 0 / 0.6);
	}
	.wc-block-components-drawer.wc-block-mini-cart__drawer,
	.wc-block-mini-cart__drawer .components-modal__content {
		color: var(--wp--preset--color--contrast);
		background: var(--wp--preset--color--base);
		border-left: 1px solid var(--wp--preset--color--border);
		box-shadow: none;
	}
	/* Woo sets the close button's padding and background with !important; matching it is the
	   only way to get the 36px icon button. */
	.wc-block-mini-cart__drawer .wc-block-components-drawer__close.wc-block-components-drawer__close {
		margin: 0;
		top: 14px;
		right: 14px;
		width: 36px;
		height: 36px;
		padding: 6px !important;
		color: var(--wp--preset--color--contrast) !important;
		background: transparent !important;
		border-radius: 999px;
		opacity: 1;
	}
	.wc-block-mini-cart__drawer .wc-block-components-drawer__close.wc-block-components-drawer__close:hover {
		background: var(--wp--preset--color--surface) !important;
	}
	.wc-block-mini-cart__drawer .wc-block-components-drawer__close svg {
		width: 24px;
		height: 24px;
		fill: currentColor;
	}
	.wc-block-mini-cart__title.wc-block-mini-cart__title {
		margin: 20px 64px 8px 24px;
		font-size: var(--wp--preset--font-size--heading);
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: -0.020em;
		color: var(--wp--preset--color--contrast);
		mask-image: none;
	}
	.wc-block-mini-cart__title .wp-block-woocommerce-mini-cart-title-items-counter-block {
		font-weight: 400;
		color: var(--wp--preset--color--contrast-muted);
	}
	.wc-block-mini-cart__items {
		padding: 8px 24px 0;
	}
	.wc-block-mini-cart__products-table .wc-block-cart-items__row {
		padding: 16px 0;
		border-top: 1px solid var(--wp--preset--color--border);
	}
	.wc-block-mini-cart__products-table .wc-block-cart-items__row:first-child {
		border-top: 0;
	}
	.wc-block-mini-cart__products-table .wc-block-cart-items__row {
		grid-template-columns: 72px minmax(0, 1fr);
	}
	.wc-block-mini-cart__products-table .wc-block-cart-item__image {
		padding-right: 16px;
	}
	.wc-block-mini-cart__products-table table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 22px;
	}
	.wc-block-mini-cart__products-table .wc-block-cart-item__total .wc-block-components-product-price {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 22px;
		color: var(--wp--preset--color--contrast-muted);
	}
	.wc-block-mini-cart__products-table .wc-block-cart-item__quantity {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 12px;
	}
	.wc-block-mini-cart__footer.wc-block-mini-cart__footer {
		padding: 20px 24px 24px;
		border-top: 1px solid var(--wp--preset--color--border);
		box-shadow: none;
	}
	.wc-block-mini-cart__footer::before {
		display: none;
	}
	.wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal {
		margin: 0;
		padding: 0;
		font-weight: 500;
	}
	.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
		margin-top: 4px;
		font-weight: 400;
	}
	/* Stacked, full width: side by side at 480px, Woo's "Bekijk mijn winkelwagen" breaks onto
	   two lines. Checkout stays last, nearest the thumb. */
	.wc-block-mini-cart__footer-actions {
		flex-direction: column;
		gap: 8px;
		margin-top: 20px;
	}
	.wc-block-mini-cart__footer-actions .wc-block-components-button {
		box-sizing: border-box;
		flex: none;
		width: 100%;
		min-height: 48px;
		padding: 0 16px;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 500;
	}
	.wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart.wc-block-mini-cart__footer-cart.is-style-outline {
		min-height: 48px;
		border: 1px solid var(--wp--preset--color--edge);
		box-shadow: none;
	}
	.wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart.wc-block-mini-cart__footer-cart.is-style-outline:hover {
		color: var(--wp--preset--color--contrast);
		background-color: transparent;
		border-color: var(--wp--preset--color--contrast);
	}
	.wc-block-mini-cart__empty-cart-wrapper {
		padding: 64px 24px;
		color: var(--wp--preset--color--contrast);
	}
	.wc-block-mini-cart__empty-cart-wrapper p {
		font-size: var(--wp--preset--font-size--large);
		letter-spacing: -0.017em;
	}
	.wc-block-mini-cart__empty-cart-wrapper strong {
		font-weight: 500;
	}

	/* ================================================================ Order confirmation */

	/* The receipt plate: Surface, 8px, the drop's ASCII on its right edge. The announcement bar's
	   surface-plus-edge combination at a larger size, used once, at the moment the order is in
	   (spec-store, ASCII). */
	.swag-receipt__plate {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		padding: 40px;
		background: var(--wp--preset--color--surface);
		border-radius: 8px;
	}
	.swag-receipt__plate::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
		width: 360px;
		background: url("../img/store-ascii-receipt.svg") no-repeat right center;
		mask-image: linear-gradient(to left, #000 45%, transparent 100%);
		-webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%);
		pointer-events: none;
	}
	.swag-receipt .wc-block-order-confirmation-status {
		margin: 0;
		padding-right: 280px;
	}
	.swag-receipt .wc-block-order-confirmation-status h1 {
		margin: 0;
		font-size: var(--wp--preset--font-size--title);
		font-weight: 500;
		line-height: 1.1;
		letter-spacing: -0.022em;
		color: var(--wp--preset--color--light);
	}
	.swag-receipt .wc-block-order-confirmation-status p {
		margin: 12px 0 0;
		font-size: var(--wp--preset--font-size--large);
		line-height: 1.4;
		letter-spacing: -0.017em;
		color: var(--wp--preset--color--contrast);
	}
	.swag-receipt .wc-block-order-confirmation-summary {
		margin: 32px 280px 0 0;
		padding-top: 24px;
		border-top: 1px solid var(--swag-plate-rule);
	}
	.swag-receipt .wc-block-order-confirmation-summary-list {
		display: flex;
		flex-wrap: wrap;
		gap: 16px 40px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.swag-receipt .wc-block-order-confirmation-summary-list-item {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin: 0;
		padding: 0;
		border: 0;
	}
	.swag-receipt .wc-block-order-confirmation-summary-list-item__key {
		font-size: var(--wp--preset--font-size--small);
		font-weight: 400;
		line-height: 20px;
		color: var(--wp--preset--color--contrast-muted);
	}
	.swag-receipt .wc-block-order-confirmation-summary-list-item__value {
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 500;
		line-height: 24px;
		color: var(--wp--preset--color--contrast);
		font-variant-numeric: tabular-nums;
	}
	@media (max-width: 1023px) {
		/* The edge moves to a strip along the plate's top; the text starts below it. */
		.swag-receipt__plate {
			padding: 88px 24px 32px;
		}
		.swag-receipt__plate::after {
			left: 0;
			bottom: auto;
			width: auto;
			height: 60px;
			background-position: right top;
			mask-image: linear-gradient(to left, #000 30%, transparent 90%);
			-webkit-mask-image: linear-gradient(to left, #000 30%, transparent 90%);
		}
		.swag-receipt .wc-block-order-confirmation-status {
			padding-right: 0;
		}
		.swag-receipt .wc-block-order-confirmation-summary {
			margin-right: 0;
		}
		.swag-receipt .wc-block-order-confirmation-summary-list {
			gap: 16px 32px;
		}
	}

	.swag-receipt__body {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 48px;
		align-items: start;
		margin-top: var(--wp--preset--spacing--60);
	}
	.swag-receipt__main > * + *,
	.swag-receipt__side > * + * {
		margin-top: 40px;
	}
	.swag-receipt__main > :empty,
	.swag-receipt__side > :empty {
		display: none;
	}
	@media (max-width: 1023px) {
		.swag-receipt__body {
			grid-template-columns: minmax(0, 1fr);
			gap: 40px;
		}
	}
	/* Woo's heading patterns carry an inline fluid size (15.7 to 24px); the section title size
	   (24px, spec Home) replaces it, so !important is the only way past the style attribute. */
	.swag-receipt__body h2,
	.swag-receipt__body .wc-bacs-bank-details-heading {
		margin: 0 0 16px;
		font-size: var(--wp--preset--font-size--heading) !important;
		letter-spacing: -0.020em;
	}
	.swag-receipt__body :is(.wc-block-order-confirmation-shipping-address, .wc-block-order-confirmation-billing-address) {
		padding: 0;
		border: 0;
	}
	.swag-receipt__body .wc-block-order-confirmation-totals {
		margin-top: 0;
	}
	.swag-receipt__body address {
		margin: 0;
		padding: 0;
		font-style: normal;
		line-height: 1.6;
		border: 0;
	}

	/* Order tables (confirmation and My Account order): rules, no box; label left, money right. */
	.swag-store :is(.wc-block-order-confirmation-totals__table, .woocommerce-table--order-details, .woocommerce-orders-table) {
		width: 100%;
		margin: 0;
		border: 0;
		border-collapse: collapse;
		border-radius: 0;
	}
	.swag-store :is(.wc-block-order-confirmation-totals__table, .woocommerce-table--order-details) :is(th, td) {
		padding: 14px 0;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 400;
		line-height: 24px;
		text-align: left;
		vertical-align: top;
		background: none;
		border: 0;
		border-top: 1px solid var(--wp--preset--color--border);
	}
	.swag-store :is(.wc-block-order-confirmation-totals__table, .woocommerce-table--order-details) thead th {
		padding-top: 0;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		line-height: 20px;
		color: var(--wp--preset--color--contrast-muted);
		border-top: 0;
	}
	.swag-store :is(.wc-block-order-confirmation-totals__table, .woocommerce-table--order-details) :is(th, td):last-child {
		padding-left: 16px;
		text-align: right;
	}
	.swag-store :is(.wc-block-order-confirmation-totals__table, .woocommerce-table--order-details) tbody a {
		text-decoration: none;
	}
	.swag-store :is(.wc-block-order-confirmation-totals__table, .woocommerce-table--order-details) tbody a:hover {
		text-decoration: underline;
	}
	.swag-store :is(.wc-block-order-confirmation-totals__table, .woocommerce-table--order-details) .product-quantity {
		margin-left: 4px;
		font-weight: 400;
		color: var(--wp--preset--color--contrast-muted);
	}
	.swag-store :is(.wc-block-order-confirmation-totals__table, .woocommerce-table--order-details) tfoot tr:last-child :is(th, td) {
		font-size: var(--wp--preset--font-size--large);
		font-weight: 500;
		line-height: 28px;
		letter-spacing: -0.017em;
		color: var(--wp--preset--color--light);
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
	.swag-store .shipped_via {
		display: block;
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--contrast-muted);
	}

	/* Bank transfer details: the next thing a bank-transfer customer has to do, so they lead the
	   column; label and value on one ruled row. */
	.swag-store .woocommerce-bacs-bank-details .wc-bacs-bank-details-account-name {
		margin: 0 0 8px;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 500;
		color: var(--wp--preset--color--contrast);
	}
	.swag-store .woocommerce-bacs-bank-details ul.bacs_details {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.swag-store .woocommerce-bacs-bank-details ul.bacs_details li {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		margin: 0;
		padding: 12px 0;
		font-size: var(--wp--preset--font-size--medium);
		color: var(--wp--preset--color--contrast-muted);
		border-top: 1px solid var(--wp--preset--color--border);
	}
	.swag-store .woocommerce-bacs-bank-details ul.bacs_details li:last-child {
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
	.swag-store .woocommerce-bacs-bank-details ul.bacs_details strong {
		font-weight: 500;
		color: var(--wp--preset--color--contrast);
		font-variant-numeric: tabular-nums;
	}

	/* ================================================================ My Account */

	/* Woo's block-theme CSS caps the account content at 1000px, centred; the page grid is 1312px. */
	.woocommerce-account .swag-account .woocommerce {
		max-width: none;
	}

	/* Logged out: sign in and register side by side, each column capped at 480px like GitHub's
	   checkout form column (499px, R-checkout). No boxes around the forms. */
	.swag-account #customer_login {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 480px));
		gap: 48px 96px;
	}
	.swag-account #customer_login::before,
	.swag-account #customer_login::after {
		display: none;
	}
	.swag-account #customer_login > .u-column1,
	.swag-account #customer_login > .u-column2 {
		float: none;
		width: auto;
	}
	.swag-account #customer_login h2 {
		margin: 0 0 24px;
		font-size: var(--wp--preset--font-size--heading);
		letter-spacing: -0.020em;
	}
	.swag-account .woocommerce form.login,
	.swag-account .woocommerce form.register,
	.swag-account .woocommerce form.lost_reset_password {
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
	}
	.swag-account .woocommerce form.login .form-row:has(.woocommerce-form-login__submit) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 16px 24px;
		margin-top: 24px;
	}
	.swag-account .woocommerce form.login .form-row:has(.woocommerce-form-login__submit)::before,
	.swag-account .woocommerce form.login .form-row:has(.woocommerce-form-login__submit)::after {
		display: none;
	}
	.swag-account .woocommerce form.login .woocommerce-form-login__submit {
		order: -1;
		margin: 0;
	}
	.swag-account .woocommerce :is(.lost_password, .woocommerce-privacy-policy-text, form.register > p:not(.form-row), form.lost_reset_password > p:first-child) {
		margin: 16px 0;
		font-size: var(--wp--preset--font-size--small);
		line-height: 20px;
		color: var(--wp--preset--color--contrast-muted);
	}
	.swag-account .woocommerce form.lost_reset_password {
		max-width: 480px;
	}
	.swag-account .woocommerce form .form-row-first,
	.swag-account .woocommerce form .form-row-last {
		float: none;
		width: auto;
	}
	.swag-account .woocommerce form .clear {
		display: none;
	}
	@media (max-width: 767px) {
		.swag-account #customer_login {
			grid-template-columns: minmax(0, 1fr);
		}
		.swag-account #customer_login > .u-column2 {
			padding-top: 48px;
			border-top: 1px solid var(--wp--preset--color--border);
		}
	}

	/* Logged in: the archive's 4-column grid, navigation in the first column (spec, Archive
	   sidebar). Items as the header's nav plates, 15px, padded 7px 14px, 4px Surface plate on
	   hover and on the current view (R10), pulled 14px left so the text lines up with the title. */
	.swag-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
		align-items: start;
	}
	.swag-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
	.swag-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
		display: none;
	}
	.swag-account .woocommerce-MyAccount-navigation {
		float: none;
		width: auto;
	}
	.swag-account .woocommerce-MyAccount-content {
		grid-column: 2 / -1;
		float: none;
		width: auto;
		min-width: 0;
	}
	.woocommerce-account .swag-account .woocommerce-MyAccount-navigation ul {
		margin: 0 0 0 -14px;
		padding: 0;
		list-style: none;
	}
	.woocommerce-account .swag-account .woocommerce-MyAccount-navigation li {
		padding: 0;
	}
	.woocommerce-account .swag-account .woocommerce-MyAccount-navigation li a {
		display: block;
		padding: 7px 14px;
		font-size: var(--wp--preset--font-size--nav);
		letter-spacing: -0.009em;
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
		border-radius: 4px;
	}
	.woocommerce-account .swag-account .woocommerce-MyAccount-navigation li a:hover,
	.woocommerce-account .swag-account .woocommerce-MyAccount-navigation li.is-active a {
		text-decoration: none;
		background: var(--wp--preset--color--surface);
	}
	.woocommerce-account .swag-account .woocommerce-MyAccount-navigation li.is-active a {
		color: var(--wp--preset--color--light);
	}
	.woocommerce-account .swag-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 16px;
	}
	@media (max-width: 1023px) {
		.swag-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
			display: block;
		}
		.swag-account .woocommerce-MyAccount-navigation {
			margin-bottom: 32px;
			padding-bottom: 16px;
			border-bottom: 1px solid var(--wp--preset--color--border);
		}
		.woocommerce-account .swag-account .woocommerce-MyAccount-navigation ul {
			display: flex;
			flex-wrap: wrap;
			gap: 4px;
			margin: 0 0 0 -14px;
		}
		.woocommerce-account .swag-account .woocommerce-MyAccount-navigation-link--customer-logout {
			margin-top: 0;
		}
	}

	.swag-account .woocommerce-MyAccount-content > p {
		max-width: 60ch;
		margin: 0 0 16px;
	}
	.swag-account .woocommerce-MyAccount-content mark {
		font-weight: 500;
		color: var(--wp--preset--color--light);
		background: none;
	}
	.swag-account .woocommerce-MyAccount-content h2 {
		margin: 0 0 16px;
	}
	.swag-account .woocommerce-MyAccount-content section + section,
	.swag-account .woocommerce-order-details {
		margin-top: 40px;
	}
	.swag-account .order-again {
		margin: 32px 0 0;
	}
	.swag-store .woocommerce a.button.wp-element-button:not(.view):not(.edit):not(.wc-forward) {
		display: inline-flex;
		align-items: center;
		text-decoration: none;
	}

	/* Orders list: rules, not a box; the view action as the outline pill. */
	.swag-account .woocommerce-orders-table :is(th, td) {
		padding: 14px 16px 14px 0;
		font-size: var(--wp--preset--font-size--medium);
		line-height: 24px;
		text-align: left;
		vertical-align: middle;
		background: none;
		border: 0;
		border-top: 1px solid var(--wp--preset--color--border);
	}
	.swag-account .woocommerce-orders-table thead th {
		padding-top: 0;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		line-height: 20px;
		color: var(--wp--preset--color--contrast-muted);
		border-top: 0;
	}
	.swag-account .woocommerce-orders-table tbody tr:last-child :is(th, td) {
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
	.swag-account .woocommerce-orders-table :is(th, td):last-child {
		padding-right: 0;
		text-align: right;
	}
	.swag-account .woocommerce-orders-table__cell-order-number a {
		font-weight: 500;
		text-decoration: none;
	}
	.swag-account .woocommerce-orders-table__cell-order-number a:hover {
		text-decoration: underline;
	}
	.swag-account .woocommerce-orders-table .button + .button {
		margin-left: 8px;
	}
	@media (max-width: 768px) {
		.swag-account table.shop_table_responsive thead {
			display: none;
		}
		.swag-account table.shop_table_responsive tbody tr {
			display: block;
			padding: 12px 0;
			border-top: 1px solid var(--wp--preset--color--border);
		}
		.swag-account table.shop_table_responsive tbody tr:last-child {
			border-bottom: 1px solid var(--wp--preset--color--border);
		}
		.swag-account .woocommerce-orders-table tbody :is(th, td),
		.swag-account .woocommerce-orders-table tbody tr:last-child :is(th, td) {
			display: block;
			padding: 6px 0;
			text-align: right;
			background: none !important;
			border: 0;
		}
		.swag-account table.shop_table_responsive tr td::before {
			font-size: var(--wp--preset--font-size--small);
			font-weight: 400;
			color: var(--wp--preset--color--contrast-muted);
			float: left;
		}
		.swag-account .woocommerce-orders-table__cell-order-actions::before {
			display: none;
		}
		.swag-account .woocommerce-orders-table tbody .woocommerce-orders-table__cell-order-number {
			text-align: left;
		}
	}

	/* Addresses: two columns; heading and edit action on one row. */
	.swag-account :is(.woocommerce-Addresses, .woocommerce-columns--addresses) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 48px;
		margin-top: 32px;
	}
	.swag-account :is(.woocommerce-Addresses, .woocommerce-columns--addresses)::before,
	.swag-account :is(.woocommerce-Addresses, .woocommerce-columns--addresses)::after {
		display: none;
	}
	.swag-account :is(.woocommerce-Addresses, .woocommerce-columns--addresses) > * {
		float: none;
		width: auto;
		max-width: none;
	}
	.swag-account .woocommerce-Address-title {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 16px;
		margin-bottom: 16px;
	}
	.swag-account .woocommerce-MyAccount-content .woocommerce-Address-title :is(h2, a.edit) {
		float: none;
		margin: 0;
	}
	.swag-account .woocommerce-Address-title::before,
	.swag-account .woocommerce-Address-title::after {
		display: none;
	}
	.swag-account address {
		margin: 0;
		padding: 0;
		font-style: normal;
		line-height: 1.6;
		color: var(--wp--preset--color--contrast);
		border: 0;
	}
	.swag-account .woocommerce-customer-details address p {
		margin: 8px 0 0;
		padding: 0;
	}
	.swag-account .woocommerce-customer-details address p::before {
		display: none;
	}
	@media (max-width: 767px) {
		.swag-account :is(.woocommerce-Addresses, .woocommerce-columns--addresses) {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	/* Address and account forms: two fields per row where Woo pairs them, capped at 640px. */
	.swag-account .woocommerce-address-fields,
	.swag-account form.edit-account {
		max-width: 640px;
	}
	.swag-account .woocommerce-address-fields__field-wrapper,
	.swag-account form.edit-account {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
	}
	.swag-account .woocommerce-address-fields__field-wrapper > *,
	.swag-account form.edit-account > * {
		grid-column: 1 / -1;
	}
	.swag-account .woocommerce-address-fields__field-wrapper > :is(.form-row-first, .form-row-last),
	.swag-account form.edit-account > :is(.form-row-first, .form-row-last) {
		grid-column: auto;
	}
	.swag-account form.edit-account fieldset {
		margin: 24px 0 0;
		padding: 0;
		border: 0;
	}
	.swag-account form.edit-account legend {
		margin: 0 0 16px;
		padding: 0;
		font-size: var(--wp--preset--font-size--large);
		font-weight: 500;
		letter-spacing: -0.017em;
		color: var(--wp--preset--color--contrast);
	}
	.swag-account #account_display_name_description {
		display: block;
		margin-top: 8px;
		font-size: var(--wp--preset--font-size--small);
		line-height: 20px;
		color: var(--wp--preset--color--contrast-muted);
	}
	.swag-account #account_display_name_description em {
		font-style: normal;
	}
	.swag-account form.edit-account > p:last-of-type,
	.swag-account .woocommerce-address-fields > p:last-child {
		margin-top: 16px;
	}
	@media (max-width: 599px) {
		.swag-account .woocommerce-address-fields__field-wrapper > :is(.form-row-first, .form-row-last),
		.swag-account form.edit-account > :is(.form-row-first, .form-row-last) {
			grid-column: 1 / -1;
		}
	}
}