/*
 * WooCommerce.
 *
 * WooCommerce's own templates are left alone — this file only dresses them.
 * The house rules: hairlines rather than boxes, no shadows, no rounded cards,
 * text left-aligned rather than centred, and the photograph doing the work.
 */

/* ------------------------------------------------------------ breadcrumb */

.woocommerce-breadcrumb {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
}

.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--contrast-soft);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--accent-deep);
}

/* --------------------------------------------------------------- archive */

.woocommerce-result-count {
	margin: 0;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.8125rem;
}

.woocommerce-ordering select,
.woocommerce select.orderby {
	padding: 0.55rem 2rem 0.55rem 0.75rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	text-align: left;
}

.woocommerce ul.products li.product a img {
	width: 100%;
	height: auto;
	margin: 0 0 var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--base-alt);
	border-radius: 0;
	box-shadow: none;
	transition: opacity 0.3s ease;
}

.woocommerce ul.products li.product a:hover img {
	opacity: 0.88;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 0.3rem;
	padding: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.35;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin: 0;
	color: var(--wp--preset--color--contrast-soft);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	font-weight: 400;
}

.woocommerce ul.products li.product .price del {
	margin-right: 0.4rem;
	opacity: 0.55;
}

.woocommerce ul.products li.product .price ins {
	color: var(--wp--preset--color--accent-deep);
	text-decoration: none;
}

/* A row of buttons turns a quiet grid into a supermarket shelf. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .onsale {
	display: none;
}

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	gap: 0.5rem;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	margin: 0;
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: grid;
	place-items: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-size: 0.8125rem;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------- single product */

/*
 * WooCommerce 11 renders the product page from its blockified template: there
 * is no .summary and no floated .images, just a group of blocks. Imposing a
 * grid on div.product here collapses the layout — the columns come from Woo's
 * own block markup. Only typography and controls are dressed.
 */

.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img {
	background: var(--wp--preset--color--base-alt);
}

.woocommerce div.product .flex-control-thumbs {
	display: flex;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .flex-control-thumbs li {
	width: 72px;
	margin: 0;
	float: none;
}

.wc-block-components-product-price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 400;
}

/*
 * Only the form is the flex row.
 *
 * The block wrapper had the same rule, which made the form a flex item — and a
 * flex item sizes to its content, so the form settled at 568px inside a 664px
 * column. Everything else in that column (the title, the price, the SKU rule)
 * ran the full width, and the buttons sat short of them.
 */
.wc-block-add-to-cart-form {
	display: block;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	width: 100%;
	margin: var(--wp--preset--spacing--30) 0;
}

/*
 * Two things in this form take no width but still take a gap, and between them
 * they pushed the first row 12px in from each edge while the full-width buttons
 * below it stayed flush:
 *
 *   - a hidden input is still a flex item
 *   - so is WooCommerce's clearfix, which sets ::before and ::after to
 *     `content: " "; display: table` — harmless on a block, a flex item here
 */
.woocommerce div.product form.cart input[type="hidden"] {
	display: none;
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	display: none;
}

/*
 * The three rows have to end on the same line.
 *
 * Add to cart sized itself to its label, so the first row stopped less than half
 * way across while Buy now and Quick order below it ran the full width — three
 * actions in a column, each a different length, reading as three unrelated
 * things. The quantity keeps its width and the button takes whatever is left.
 */
/*
 * The quantity box, made to end exactly where the buttons do.
 *
 * Three things were stopping it: Woo's own 4px right margin on the wrapper (the
 * row's gap already spaces it), a 1px screen-reader label sitting in the wrapper
 * as a flex item, and the input's content-box sizing, which made `width: 100%`
 * mean "100% plus the padding and border" and land 10px short.
 */
/*
 * The wrapper is a plain block, not a flex row.
 *
 * As a flex row it kept six pixels back from the input for reasons that changed
 * every time something else in it did — Woo's margin, the screen-reader label,
 * the input's own basis. A block wrapper with the input at width 100% has one
 * answer and it is always the same one.
 */
.woocommerce div.product form.cart div.quantity {
	display: block;
	flex: 0 0 auto;
	margin: 0;
}

.woocommerce div.product form.cart div.quantity > label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
}

/* One height for every control in the stack, quantity box included. */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .button.coccone-buynow,
.woocommerce div.product form.cart .quantity input,
.wc-block-add-to-cart-form .quantity input,
.coccone-quick__toggle {
	min-height: 3.125rem;
}

/*
 * Buy now sits under the row, at full width.
 *
 * It is the second choice, not the louder one: Add to cart keeps the filled
 * treatment and this takes an outline. Two filled buttons stacked would make the
 * visitor choose between two shouts, and the one that skips a step should not be
 * the one that looks like the default.
 *
 * The width is what separates them — a full-width rule under a row reads as a
 * different kind of action rather than as a third item in the same row.
 */
/* The `button` class it shares with Add to cart carries WooCommerce's filled
   treatment from a three-part selector, so the outline has to be stated at the
   same depth or the two buttons arrive identical. */
.woocommerce div.product form.cart .button.coccone-buynow,
.coccone-buynow {
	flex: 1 0 100%;
	order: 99;
	min-height: 3.125rem;
	margin: 0;
	padding: 0 1.5rem;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.woocommerce div.product form.cart .button.coccone-buynow:hover,
.woocommerce div.product form.cart .button.coccone-buynow:focus-visible,
.coccone-buynow:hover,
.coccone-buynow:focus-visible {
	background: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--base);
}

/* WooCommerce disables the row until a colourway is chosen; the outline needs
   to say so too, or it looks like the one button still working. */
.woocommerce-variation-add-to-cart-disabled .coccone-buynow {
	opacity: 0.4;
	pointer-events: none;
}

/*
 * On a variable product the quantity and the button are not children of the
 * form — WooCommerce nests them in .woocommerce-variation-add-to-cart, which
 * arrives as a grid. The form's own layout rules never reach them, and on a
 * narrow screen the quantity box was collapsing to a sliver beside the button.
 */
/*
 * The same shrink-to-content problem, one level deeper.
 *
 * On a variable product the buttons live in single_variation_wrap, a flex item
 * of the form, so the whole stack sized itself to the widest button and stopped
 * 120px short of the swatches above it. It takes the full line instead.
 */
.woocommerce div.product form.cart .single_variation_wrap {
	flex: 1 0 100%;
}

/*
 * WooCommerce's live region for variation errors. It has to stay in the
 * accessibility tree, so it is taken out of the flow rather than hidden — as a
 * flex item it was a 1px box collecting a 12px gap.
 */
.woocommerce div.product form.cart .reset_variations_alert {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	width: 100%;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .quantity {
	flex: 0 0 auto;
}

.wc-block-add-to-cart-form .quantity input,
.woocommerce div.product form.cart .quantity input {
	box-sizing: border-box;
	width: 4.5rem;
	min-height: 3.125rem;
	padding: 0 0.75rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	text-align: center;
}

/*
 * SKU and category.
 *
 * These are not one block. WooCommerce 11 prints them as two — a product-sku
 * block and a post-terms block — side by side in a flex group, and they arrive
 * at two different type sizes: the SKU at 13px and the category at the body's
 * 17px, so they read as a caption sitting next to a sentence. The rule under
 * them only spanned the SKU, because it was on the SKU's own box.
 *
 * Both are the same quiet caption, and the rule belongs to the row that holds
 * them.
 */
.wp-block-woocommerce-product-sku,
.wc-block-components-product-sku,
.woocommerce .product_meta,
.taxonomy-product_cat.wp-block-post-terms {
	margin: 0;
	color: var(--wp--preset--color--contrast-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

.taxonomy-product_cat.wp-block-post-terms a {
	color: var(--wp--preset--color--contrast-soft);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.taxonomy-product_cat.wp-block-post-terms a:hover {
	color: var(--wp--preset--color--accent-deep);
}

/* The group is generated, so it is reached through what it contains. */
.wp-block-group:has(> .wp-block-woocommerce-product-sku) {
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

.woocommerce div.product form.cart .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .wc-block-components-button {
	padding: 1em 2.4em;
	background: var(--wp--preset--color--contrast);
	border: 0;
	border-radius: 2px;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.2;
	transition: background 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce .wc-block-components-button:hover {
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--base);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--wp--preset--color--contrast);
}

/* Tabs, stripped back to a row of labels over a hairline. */
.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: var(--wp--preset--spacing--60);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--contrast);
}

.woocommerce div.product .related,
.woocommerce div.product .upsells {
	grid-column: 1 / -1;
	margin-top: var(--wp--preset--spacing--70);
}

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

/* ------------------------------------------------------- cart & checkout */

.woocommerce table.shop_table {
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}

.woocommerce table.shop_table th {
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.woocommerce table.shop_table td {
	padding: var(--wp--preset--spacing--30) 0;
	border-top: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.woocommerce-cart table.cart img {
	width: 72px;
	background: var(--wp--preset--color--base-alt);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-size: var(--wp--preset--font-size--large);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	padding: 0.8rem 1rem;
	height: auto;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
}

.woocommerce form .form-row label {
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
}

.woocommerce-checkout #payment {
	background: var(--wp--preset--color--base-alt);
	border-radius: 2px;
}

/* ---------------------------------------------------------------- notices */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--base-alt);
	border: 0;
	border-top: 2px solid var(--wp--preset--color--accent);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

.woocommerce-error {
	border-top-color: #a4402f;
}

/* --------------------------------------------------------------- account */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.75rem 0;
	color: var(--wp--preset--color--contrast);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--wp--preset--color--accent-deep);
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 860px) {
	.wc-block-add-to-cart-form,
	.woocommerce div.product form.cart {
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
		flex-direction: column;
	}

	.woocommerce div.product form.cart div.quantity {
		width: 100%;
	}

	.wc-block-add-to-cart-form .quantity input,
	.woocommerce div.product form.cart .quantity input {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Blockified archive.
   WooCommerce 11 renders the catalogue with the Product Collection block, not
   the classic ul.products, so the loop styling has to target the block classes.
   Its template centres the title, price and button; a quiet catalogue reads
   better left-aligned, with the add-to-cart left for the product page.
   --------------------------------------------------------------------------- */

/*
 * WooCommerce prints its column rule inline, as
 * `.wc-block-product-template__responsive.columns-N`, which outranks a single
 * class selector — and the N it picks left one product stretched half the page.
 * Matching its specificity is not enough because the inline block styles are
 * printed after this file, so the override is marked important on purpose.
 *
 * The count is stated rather than inferred from a minimum width: auto-fill
 * reads the container, and the container is the page measure, so the same rule
 * produced five columns on a wide archive and two on a narrow one.
 */
.wc-block-product-template,
.wc-block-product-template__responsive {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

@media (max-width: 900px) {
	.wc-block-product-template,
	.wc-block-product-template__responsive {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 480px) {
	.wc-block-product-template,
	.wc-block-product-template__responsive {
		grid-template-columns: 1fr !important;
	}
}

li.wc-block-product {
	text-align: left;
}

li.wc-block-product .wc-block-components-product-image {
	margin: 0 0 var(--wp--preset--spacing--30);
}

li.wc-block-product .wc-block-components-product-image img {
	width: 100%;
	height: auto;
	background: var(--wp--preset--color--base-alt);
	border-radius: 0;
	transition: opacity 0.3s ease;
}

li.wc-block-product a:hover img {
	opacity: 0.88;
}

li.wc-block-product .wp-block-post-title,
li.wc-block-product .wc-block-components-product-name {
	margin: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
}

li.wc-block-product .wp-block-post-title a,
li.wc-block-product .wc-block-components-product-name {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

li.wc-block-product .wc-block-components-product-price {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast-soft);
	text-align: left;
}

/* The button belongs on the product page, not on every tile in the grid. */
li.wc-block-product .wc-block-components-product-button {
	display: none;
}

li.wc-block-product .wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 0;
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wp-block-woocommerce-product-collection-no-results {
	max-width: 34rem;
}

/* ---------------------------------------------------------------------------
   Colour swatches
   ---------------------------------------------------------------------------
   The select WooCommerce printed is still there, driving everything. It is
   taken off the screen rather than out of the DOM — display:none would put it
   beyond reach of the script that reads and rewrites it.
*/

.coccone-swatches__native {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.coccone-swatches {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.coccone-swatches__chosen {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 0.7rem;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.coccone-swatches__label {
	color: var(--wp--preset--color--contrast-soft);
}

.coccone-swatches__value {
	color: var(--wp--preset--color--contrast-soft);
	letter-spacing: 0.1em;
	text-transform: none;
	font-size: 0.8125rem;
}

.coccone-swatches__value.is-chosen {
	color: var(--wp--preset--color--contrast);
}

.coccone-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The ring is drawn on the button and the colour on an inner span, so the
 * selected state can sit clear of the ink rather than on top of it — a border
 * drawn straight onto a dark swatch is invisible.
 */
.coccone-swatch {
	display: block;
	width: 34px;
	height: 34px;
	padding: 3px;
	background: none;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.coccone-swatch__ink {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 999px;
	/* A hairline so a white or cream colourway still reads as a disc. */
	box-shadow: inset 0 0 0 1px rgba(42, 23, 16, 0.16);
	background: var(--wp--preset--color--base-alt);
}

.coccone-swatch:hover {
	border-color: var(--wp--preset--color--line);
}

.coccone-swatch.is-active {
	border-color: var(--wp--preset--color--contrast);
}

.coccone-swatch:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Not available in this combination: shown, but not offered. */
.coccone-swatch.is-unavailable {
	cursor: not-allowed;
	opacity: 0.35;
}

.coccone-swatch.is-unavailable:hover {
	border-color: transparent;
}

/* WooCommerce's own Clear link sits under the row and needs no box. */
.woocommerce-variation-add-to-cart .reset_variations,
.variations .reset_variations {
	display: inline-block;
	margin-top: 0.2rem;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-soft);
}

/*
 * The variations table is a layout table with one row. Unpicking it needs the
 * margins and the line height as well as the padding: once the cells are
 * display:block, the newlines between the table's tags become anonymous line
 * boxes — 24px under the swatches and 14px above the variation copy, from
 * nothing but whitespace. The real content sets its own line height back.
 */
.variations,
.variations tbody,
.variations tr,
.variations th,
.variations td,
.single_variation_wrap {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
}

/*
 * WooCommerce sets the cell line height from `.woocommerce div.product
 * form.cart .variations td`, which outranks a two-class selector. Matching its
 * specificity is the only way to reach it, so the chain is repeated rather than
 * marked important.
 */
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	line-height: 0;
	margin: 0;
	padding: 0;
}

.variations .coccone-swatches,
.variations .reset_variations,
.single_variation_wrap > * {
	line-height: 1.4;
}

/* The swatches already end on a margin; the wrapper adding its own doubled it. */
.single_variation_wrap {
	margin-top: 0;
}

/* The label is printed inside the swatch block instead. */
.variations .label {
	display: none;
}

/*
 * The chosen colourway's note — "pure saturated citrus". WooCommerce prints it
 * bare between the swatches and the cart button, where it reads as a stray line
 * of body copy rather than as a caption belonging to the swatch above it.
 */
.woocommerce-variation-description {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.875rem;
	line-height: 1.6;
}

.woocommerce-variation-description p:last-child {
	margin-bottom: 0;
}

/* The price is already stated above the swatches; repeating it under them adds
   a second, competing price to the same screen. Hiding it leaves the wrapper
   behind though — an empty block with a line's height and a margin under it,
   which is where the gap between the swatches and the cart button came from. */
.woocommerce-variation-price {
	display: none;
}

.woocommerce-variation {
	margin-bottom: 0;
}

.woocommerce-variation:not(:has(.woocommerce-variation-description)):not(:has(.woocommerce-variation-availability)) {
	display: none;
}

.woocommerce-variation-add-to-cart {
	margin-top: var(--wp--preset--spacing--30);
}

/* Quieter than an underlined uppercase link, which read as a second call to
   action sitting directly under the first. */
.variations .reset_variations {
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-bottom: 2px;
	opacity: 0;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.variations .reset_variations:hover {
	color: var(--wp--preset--color--contrast);
}

/* WooCommerce toggles it with inline styles; only show ours once it is visible. */
.variations .reset_variations[style*="visible"],
.variations .reset_variations:not([style*="hidden"]) {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
   Checkout
   ---------------------------------------------------------------------------
   WooCommerce serves the checkout through a distraction-free template: no nav,
   no footer, one way forward. That is kept — it is the right call on the page
   where someone is entering a card — but it arrives wearing the plugin's
   defaults, and Buy now now sends people straight to it.
*/

.coccone-checkout-head {
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.coccone-checkout-head .wp-block-site-logo img {
	display: block;
	height: 34px;
	width: auto;
}

.coccone-checkout-head .wc-block-components-button,
.coccone-checkout-head a {
	color: var(--wp--preset--color--contrast);
}

/* Fields ------------------------------------------------------------------ */

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.woocommerce-checkout .input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus,
.wc-block-components-text-input input:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: none;
}

.woocommerce-checkout label,
.wc-block-components-checkout-step__heading {
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

/* Headings ---------------------------------------------------------------- */

.woocommerce-checkout h2,
.woocommerce-checkout h3,
.wc-block-components-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
}

/*
 * WooCommerce's notices arrive in its own blue. On a page that is otherwise
 * brown, cream and one accent, a blue box is the only thing on screen that
 * belongs to another site.
 */
.woocommerce-info,
.woocommerce-message,
.wc-block-components-notice-banner,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success {
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
}

.woocommerce-info::before,
.woocommerce-message::before,
.wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner.is-info > svg,
.wc-block-components-notice-banner.is-success > svg {
	color: var(--wp--preset--color--accent-deep);
	fill: var(--wp--preset--color--accent-deep);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	background: #fdf3f1;
	border-color: #d9a99f;
	color: #7a2e1e;
}

/* Order table ------------------------------------------------------------- */

.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}

.woocommerce-checkout-review-order-table thead th {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-soft);
}

.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	border-bottom: 0;
}

/* Shipping choices read as a decision, not as a form default. */
.woocommerce-checkout #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout #shipping_method li {
	margin-bottom: 0.4rem;
}

.woocommerce-checkout #shipping_method label {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
}

/* Place order ------------------------------------------------------------- */

#place_order,
.wc-block-components-checkout-place-order-button {
	min-height: 3.25rem;
	padding: 0 2.4rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 0;
	border-radius: 2px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

#place_order:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--color--accent-deep);
}

#payment,
.woocommerce-checkout #payment {
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   Quick order
   ---------------------------------------------------------------------------
   The checkout form, opened in place. It sits inside the buying column and has
   to read as part of it — a panel that continues the page, not a dialog that
   interrupts it. So: the same cream ground the rest of the site uses for its
   quieter bands, one hairline around it, and no shadow.
*/

.coccone-quick__toggle {
	flex: 1 0 100%;
	order: 100;
	min-height: 3.125rem;
	margin: 0;
	padding: 0 1.5rem;
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.coccone-quick__toggle:hover {
	border-color: var(--wp--preset--color--contrast);
}

.coccone-quick__toggle[aria-expanded="true"] {
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--accent-deep);
}

.coccone-quick {
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	line-height: 1.4;
}

.coccone-quick[hidden] {
	display: none;
}

.coccone-quick h2 {
	margin: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
}

.coccone-quick__lead {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.875rem;
}

/* Fields ------------------------------------------------------------------ */

/* Names the two halves of the form, so no field can be read as the wrong one. */
.coccone-quick__group {
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30);
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-soft);
}

.coccone-quick__group:first-of-type {
	margin-top: 0;
}

.coccone-quick ::placeholder {
	color: var(--wp--preset--color--contrast-soft);
	opacity: 0.55;
}

.coccone-quick__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.coccone-quick__field {
	margin: 0;
}

.coccone-quick__field--wide {
	grid-column: 1 / -1;
}

.coccone-quick__field label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.coccone-quick input[type="text"],
.coccone-quick input[type="email"],
.coccone-quick input[type="tel"],
.coccone-quick select,
.coccone-quick textarea {
	width: 100%;
	/*
	 * Without this the min-height is added to the padding rather than containing
	 * it, and every field renders 63px tall — deep enough to read as a textarea,
	 * which is part of why an email address ended up typed into Address.
	 */
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0.55rem 0.8rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
}

.coccone-quick textarea {
	min-height: 3.5rem;
	resize: vertical;
}

.coccone-quick input:focus,
.coccone-quick select:focus,
.coccone-quick textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

.coccone-quick .is-missing {
	border-color: #b4553f;
}

/* Summary ----------------------------------------------------------------- */

.coccone-quick__summary {
	margin: var(--wp--preset--spacing--40) 0;
	padding: var(--wp--preset--spacing--40) 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.coccone-quick__qty {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-soft);
}

.coccone-quick__qty button {
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
	line-height: 1;
	cursor: pointer;
}

.coccone-quick__qty button:hover {
	border-color: var(--wp--preset--color--contrast);
}

.coccone-quick__qty output {
	min-width: 1.5rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
}

.coccone-quick__ship {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	border: 0;
}

.coccone-quick__ship legend {
	padding: 0;
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.coccone-quick__ship label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.3rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.coccone-quick__totals {
	margin: 0;
}

.coccone-quick__totals > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.3rem 0;
}

.coccone-quick__totals dt {
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.875rem;
}

.coccone-quick__totals dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
}

.coccone-quick__totals .is-total {
	margin-top: 0.3rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.coccone-quick__totals .is-total dt {
	color: var(--wp--preset--color--contrast);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	align-self: center;
}

.coccone-quick__totals .is-total dd {
	font-size: 1.25rem;
}

/* Actions ----------------------------------------------------------------- */

.coccone-quick__error {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: #8a3a26;
	font-size: 0.875rem;
}

.coccone-quick__error[hidden] {
	display: none;
}

.coccone-quick__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.coccone-quick__submit {
	flex: 1 1 auto;
	min-height: 3rem;
	padding: 0 1.5rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease;
}

.coccone-quick__submit:hover:not(:disabled) {
	background: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
}

.coccone-quick__submit:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.coccone-quick__submit.is-working {
	opacity: 0.6;
	cursor: progress;
}

.coccone-quick__cancel {
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.coccone-quick__cancel:hover {
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 700px) {
	.coccone-quick {
		padding: var(--wp--preset--spacing--40);
	}

	.coccone-quick__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   The cart page
   ---------------------------------------------------------------------------
   WooCommerce ships this as one wide table with the totals stacked underneath.
   At 1440px that left the items squeezed into the left half and the right half
   empty, with the totals below the fold; at 390px it fell back to Woo's
   responsive table, which drops the product photograph entirely and prints
   "Product:", "Price:", "Quantity:" labels down the page.

   Same markup, two layouts: a summary beside the items where there is room, and
   a card per item where there is not.
*/

/* ------------------------------------------------------------ the page */

/*
 * WooCommerce's block-theme stylesheet caps the cart, the checkout and the
 * account at `max-width: 1000px`, which on this site left 200px of the wide
 * measure unused on either side and pushed the list and the summary together in
 * the middle. The page takes the same width as everything else on the site.
 */
body.woocommerce-cart .entry-content > .woocommerce {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	max-width: none;
	padding-bottom: var(--wp--preset--spacing--70);
}

body.woocommerce-cart .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

@media (min-width: 900px) {
	body.woocommerce-cart .entry-content > .woocommerce {
		/*
		 * The summary is a fixed measure, not a share: it holds four short lines
		 * and a button, and letting it grow with the viewport only spreads them
		 * further apart. The list takes everything else, so the two sit at
		 * opposite ends of the page rather than in a column down the middle.
		 */
		grid-template-columns: minmax(0, 1fr) 24rem;
		column-gap: 5rem;
		row-gap: var(--wp--preset--spacing--50);
	}
}

/* ------------------------------------------------------------- the list */

body.woocommerce-cart .woocommerce-cart-form {
	width: 100%;
	min-width: 0;
	margin: 0;
}

/*
 * `overflow-x: auto` is WooCommerce's answer to a table too wide for a phone.
 * This one is a grid and never is, but the remove control was hanging two pixels
 * past the end of its cell — and two pixels is enough to raise a scrollbar the
 * full width of the list, which is exactly what was showing under the coupon.
 * The overflow goes, and the cell below is sized so nothing hangs anyway.
 */
body.woocommerce-cart .shop_table {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	overflow: visible;
}

body.woocommerce-cart .shop_table thead,
body.woocommerce-cart .shop_table tbody,
body.woocommerce-cart .shop_table tfoot {
	display: block;
}

body.woocommerce-cart table.shop_table tbody > tr {
	display: block;
	box-sizing: border-box;
	width: 100%;
}

/*
 * The column headings go. They were labelling a table that is no longer laid out
 * as one, and every value below is already self-evident — a price looks like a
 * price.
 */
body.woocommerce-cart .shop_table thead {
	display: none;
}

/*
 * One row, one grid: photograph, then the name taking the slack, then the three
 * numbers. The remove control is positioned rather than given a column, so it
 * cannot push the rest around.
 */
body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto auto auto;
	align-items: center;
	gap: 1.125rem;
	padding: var(--wp--preset--spacing--40) 2.25rem var(--wp--preset--spacing--40) 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item > td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

/* Woo prints the column name into each cell on narrow screens. */
body.woocommerce-cart .shop_table_responsive tr td::before,
body.woocommerce-cart .shop_table tr td::before {
	content: none !important;
}

body.woocommerce-cart table.shop_table td.product-thumbnail {
	display: block !important;
}

body.woocommerce-cart table.shop_table td.product-thumbnail img {
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	width: 88px;
	height: 110px;
	object-fit: cover;
	margin: 0;
	background: var(--wp--preset--color--base-alt);
}

body.woocommerce-cart table.shop_table td.product-name a {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	line-height: 1.3;
	text-decoration: none;
}

body.woocommerce-cart table.shop_table td.product-name a:hover {
	color: var(--wp--preset--color--accent-deep);
}

body.woocommerce-cart table.shop_table td.product-name .variation {
	margin: 0.2rem 0 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-soft);
}

body.woocommerce-cart table.shop_table td.product-name .variation dt,
body.woocommerce-cart table.shop_table td.product-name .variation dd,
body.woocommerce-cart table.shop_table td.product-name .variation p {
	display: inline;
	margin: 0;
	font-weight: 400;
}

body.woocommerce-cart table.shop_table td.product-price,
body.woocommerce-cart table.shop_table td.product-subtotal {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	white-space: nowrap;
	text-align: right;
}

body.woocommerce-cart table.shop_table td.product-price {
	min-width: 4.5rem;
	color: var(--wp--preset--color--contrast-soft);
}

body.woocommerce-cart table.shop_table td.product-subtotal {
	color: var(--wp--preset--color--contrast);
	min-width: 5rem;
}

body.woocommerce-cart table.shop_table td.product-quantity .quantity input {
	box-sizing: border-box;
	width: 4rem;
	min-height: 2.75rem;
	padding: 0 0.5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	text-align: center;
}

/* The remove control, at the end of the row rather than in front of it. */
body.woocommerce-cart table.shop_table td.product-remove {
	position: absolute;
	top: 50%;
	right: 0;
	width: 1.875rem;
	height: 1.875rem;
	transform: translateY(-50%);
}

body.woocommerce-cart table.shop_table td.product-remove a.remove {
	display: grid;
	box-sizing: border-box;
	place-items: center;
	width: 100%;
	height: 100%;
	background: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.9375rem;
	line-height: 1;
	text-decoration: none;
}

body.woocommerce-cart table.shop_table td.product-remove a.remove:hover {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------- coupon row */

/*
 * The coupon and Update cart sat as three controls bunched at the left, each a
 * different height — the field 50px against two 48px buttons, which is enough
 * to read as misaligned rather than as a row.
 *
 * One height for all three, the coupon holding the left and Update cart pushed
 * to the far end, so the row spans the list the way the row of items above it
 * does.
 */
body.woocommerce-cart table.shop_table td.actions {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: var(--wp--preset--spacing--50) 0 0;
	background: none;
	border: 0;
}

body.woocommerce-cart .woocommerce-cart-form .coupon > label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

body.woocommerce-cart .woocommerce-cart-form .coupon {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 0 1 28rem;
}

body.woocommerce-cart .woocommerce-cart-form .coupon > button {
	margin-left: 0.75rem;
}

body.woocommerce-cart .woocommerce-cart-form .coupon input[type="text"],
body.woocommerce-cart .woocommerce-cart-form #coupon_code {
	box-sizing: border-box;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 3rem;
	min-height: 0;
	padding: 0 1rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
}

body.woocommerce-cart .woocommerce-cart-form .coupon button,
body.woocommerce-cart table.shop_table td.actions > button {
	box-sizing: border-box;
	height: 3rem;
	min-height: 0;
	padding: 0 1.5rem;
	border-radius: 2px;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

body.woocommerce-cart .woocommerce-cart-form .coupon button {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--contrast);
}

body.woocommerce-cart .woocommerce-cart-form .coupon button:hover {
	background: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
}

/*
 * Update cart is an outline, and WooCommerce disables it until a quantity
 * actually changes. It arrived filled grey, which reads as a broken primary
 * button sitting next to a working one.
 */
body.woocommerce-cart table.shop_table td.actions > button[name="update_cart"] {
	width: auto;
	margin-left: auto;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
}

body.woocommerce-cart table.shop_table td.actions > button[name="update_cart"]:hover:not(:disabled) {
	border-color: var(--wp--preset--color--contrast);
}

body.woocommerce-cart table.shop_table td.actions > button[name="update_cart"]:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ------------------------------------------------------------ summary */

body.woocommerce-cart .cart-collaterals {
	width: auto;
	margin: 0;
	float: none;
}

body.woocommerce-cart .cart-collaterals .cart_totals {
	box-sizing: border-box;
	width: auto;
	float: none;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
}

@media (min-width: 900px) {
	body.woocommerce-cart .cart-collaterals .cart_totals {
		position: sticky;
		top: var(--wp--preset--spacing--40);
	}
}

body.woocommerce-cart .cart-collaterals .cart_totals h2 {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
}

body.woocommerce-cart .cart-collaterals .cart_totals table {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
}

body.woocommerce-cart .cart-collaterals .cart_totals tbody {
	display: block;
}

body.woocommerce-cart .cart-collaterals .cart_totals tr {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

body.woocommerce-cart .cart-collaterals .cart_totals tr:last-child {
	border-bottom: 0;
}

body.woocommerce-cart .cart-collaterals .cart_totals th,
body.woocommerce-cart .cart-collaterals .cart_totals td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
}

body.woocommerce-cart .cart-collaterals .cart_totals th {
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
}

body.woocommerce-cart .cart-collaterals .cart_totals td {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
	text-align: right;
}

body.woocommerce-cart .cart-collaterals .cart_totals .order-total td {
	font-size: 1.25rem;
}

/* The shipping choices are a decision, so they get room and a left edge. */
body.woocommerce-cart .cart-collaterals .cart_totals #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

body.woocommerce-cart .cart-collaterals .cart_totals #shipping_method li {
	margin-bottom: 0.35rem;
}

body.woocommerce-cart .cart-collaterals .cart_totals #shipping_method label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast);
}

body.woocommerce-cart .cart-collaterals .cart_totals .woocommerce-shipping-destination,
body.woocommerce-cart .cart-collaterals .cart_totals .shipping-calculator-button {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--contrast-soft);
	text-align: left;
}

body.woocommerce-cart .wc-proceed-to-checkout {
	padding: var(--wp--preset--spacing--40) 0 0;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 3.25rem;
	padding: 1rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
}

/* ------------------------------------------------------------- narrow */

@media (max-width: 700px) {
	/*
	 * Each item becomes a card. The photograph stays — Woo's own responsive
	 * table drops it, which removes the one thing that makes a cart legible at
	 * a glance — and the three numbers move under the name instead of trying to
	 * hold columns 60px wide.
	 */
	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item {
		grid-template-columns: 84px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name  name"
			"thumb price price"
			"thumb qty   subtotal";
		align-items: start;
		gap: 0.4rem 1rem;
		padding: 1.15rem 2.5rem 1.15rem 0;
	}

	/*
	 * The last row carries the stepper, so it sets its own rhythm — and the line
	 * total centres against the pill rather than sitting on its baseline.
	 */
	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item > td.product-quantity {
		align-self: start;
		margin-top: 0.35rem;
	}

	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item > td.product-subtotal {
		align-self: center;
	}

	body.woocommerce-cart table.shop_table td.product-thumbnail {
		grid-area: thumb;
	}

	body.woocommerce-cart table.shop_table td.product-thumbnail img {
		width: 84px;
		height: 105px;
	}

	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item > td {
		text-align: left !important;
	}

	body.woocommerce-cart table.shop_table td.product-name {
		grid-area: name;
		font-size: 0.9375rem;
	}

	body.woocommerce-cart table.shop_table td.product-price {
		grid-area: price;
		min-width: 0;
		text-align: left;
		font-size: 0.875rem;
	}

	body.woocommerce-cart table.shop_table td.product-quantity {
		grid-area: qty;
	}

	/*
	 * The line total sits at the end of the stepper's row rather than being
	 * dropped. Once the quantity is something the visitor changes on the card
	 * instead of a number they read, price times quantity stops being a repeat
	 * and starts being the answer.
	 */
	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item > td.product-subtotal {
		grid-area: subtotal;
		display: block;
		min-width: 0;
		font-size: 1rem;
		text-align: right !important;
		white-space: nowrap;
	}

	body.woocommerce-cart table.shop_table td.product-remove {
		top: 1.05rem;
		transform: none;
	}

	/*
	 * The coupon field and its button belong on one line — stacked, they read as
	 * two unrelated controls and push the summary a whole button further down.
	 * Update cart takes the line under them, since it is the one that acts on
	 * the list above.
	 *
	 * `flex: 0 0 auto` is the important part. The row above states
	 * `flex: 1 1 20rem`, which in a row means "at least 20rem wide"; the moment
	 * this container turns into a column that same basis means **20rem tall**,
	 * and it was opening a 320px hole between the list and the summary.
	 */
	body.woocommerce-cart .woocommerce-cart-form .coupon {
		flex: 0 0 auto;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
	}

	body.woocommerce-cart .woocommerce-cart-form .coupon input[type="text"] {
		flex: 1 1 auto;
		min-width: 0;
	}

	body.woocommerce-cart .woocommerce-cart-form .coupon button {
		flex: 0 0 auto;
		padding: 0 1.1rem;
	}

	body.woocommerce-cart .woocommerce-cart-form .coupon > button {
		margin-left: 0.75rem;
	}

	body.woocommerce-cart .woocommerce-cart-form .coupon {
		flex-basis: auto;
	}

	body.woocommerce-cart table.shop_table td.actions > button[name="update_cart"] {
		width: auto;
		align-self: flex-end;
	}

	/*
	 * The shipping choices are two full sentences; against a label column they
	 * were wrapping after three words. On a narrow screen the label goes above
	 * them and they get the width.
	 */
	body.woocommerce-cart .cart-collaterals .cart_totals tr.woocommerce-shipping-totals {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	body.woocommerce-cart table.shop_table td.actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	body.woocommerce-cart .cart-collaterals .cart_totals {
		padding: var(--wp--preset--spacing--40);
	}
}

/* -------------------------------------------------------- nothing in it */

/*
 * WooCommerce 11 renders the empty cart as an information banner — a blue icon
 * and a tinted box, which reads as something having gone wrong. An empty cart is
 * a normal state, so it gets a plain line and one way onward.
 *
 * Both parts also have to span the grid: with no item list there are two
 * children, and the second was landing in the summary column beside the message.
 */
body.woocommerce-cart .wc-empty-cart-message,
body.woocommerce-cart .return-to-shop {
	grid-column: 1 / -1;
}

body.woocommerce-cart .wc-empty-cart-message {
	margin: 0 0 var(--wp--preset--spacing--40);
}

body.woocommerce-cart .wc-empty-cart-message .wc-block-components-notice-banner {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
}

body.woocommerce-cart .wc-empty-cart-message .wc-block-components-notice-banner > svg {
	display: none;
}

body.woocommerce-cart .wc-empty-cart-message .wc-block-components-notice-banner__content {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	line-height: 1.4;
}

body.woocommerce-cart .return-to-shop {
	margin: 0;
}

body.woocommerce-cart .return-to-shop .button {
	display: inline-block;
	padding: 1.05rem 2rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
}

body.woocommerce-cart .return-to-shop .button:hover {
	background: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
}

/* ---------------------------------------------------------------------------
   Address fields
   ---------------------------------------------------------------------------
   Two places ask for an address — the cart's shipping calculator and the
   checkout — and WooCommerce prints the same markup for both: `p.form-row`
   holding a label and a field, with the country and state selects replaced by
   Select2.

   So they are dressed once, here, and each rule names both contexts. The parts
   that belong to only one of them are further down, under their own headings.

   What was wrong before this existed:

   - every label right-aligned, running away from the field it named — inherited
     `text-align: right` from the summary's `td`;
   - four different control heights in one form — 70px and 52px for the two
     Select2 boxes, 46px for the text fields, 38px for the button. Select2 sizes
     its own box, and the text fields were sized by their line box, so a
     `min-height` never bit;
   - Select2's own grey, rounded, blue-focus treatment, which belongs to no part
     of this site.
   --------------------------------------------------------------------------- */

body.woocommerce-cart .cart-collaterals .shipping-calculator-form .form-row,
body.woocommerce-checkout form.checkout .form-row {
	display: block;
	margin: 0 0 0.85rem;
	padding: 0;
	text-align: left;
}

/*
 * `:not()` on the checkout half. The small-caps treatment names a field; a
 * checkbox's label is a sentence, and "Create an account?" was arriving in
 * capitals beside "Ship to a different address?" in ordinary type. Excluded
 * here rather than fought below — at three elements deep this rule outranks
 * anything written on the checkbox label itself.
 */
body.woocommerce-cart .cart-collaterals .shipping-calculator-form label,
body.woocommerce-checkout form.checkout .form-row > label:not(.woocommerce-form__label-for-checkbox) {
	display: block;
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--contrast-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	text-align: left;
}

/* The asterisk is not worth a colour of its own next to a label this quiet. */
body.woocommerce-cart .cart-collaterals .shipping-calculator-form label .required,
body.woocommerce-checkout form.checkout .form-row > label .required {
	color: inherit;
	text-decoration: none;
}

/*
 * One height for every control, the text fields included. Stated as `height`
 * rather than `min-height`: the fields were 46px against a 48px button because
 * their own line box was doing the sizing.
 */
body.woocommerce-cart .cart-collaterals .shipping-calculator-form input.input-text,
body.woocommerce-cart .cart-collaterals .shipping-calculator-form .select2-selection--single,
body.woocommerce-checkout form.checkout input.input-text,
body.woocommerce-checkout form.checkout select,
body.woocommerce-checkout form.checkout .select2-selection--single {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	height: 3rem;
	min-height: 0;
	margin: 0;
	padding: 0 0.9rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	line-height: 3rem;
	outline: none;
}

/* The one field that is a paragraph rather than a line. */
body.woocommerce-checkout form.checkout textarea.input-text {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: auto;
	min-height: 7rem;
	padding: 0.85rem 0.9rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	line-height: 1.6;
	outline: none;
	resize: vertical;
}

body.woocommerce-cart .cart-collaterals .shipping-calculator-form input.input-text:focus,
body.woocommerce-cart .cart-collaterals .shipping-calculator-form .select2-container--open .select2-selection--single,
body.woocommerce-checkout form.checkout input.input-text:focus,
body.woocommerce-checkout form.checkout textarea.input-text:focus,
body.woocommerce-checkout form.checkout select:focus,
body.woocommerce-checkout form.checkout .select2-container--open .select2-selection--single {
	border-color: var(--wp--preset--color--contrast);
	box-shadow: none;
}

/* A field WooCommerce has marked as wrong. */
body.woocommerce-checkout form.checkout .woocommerce-invalid input.input-text,
body.woocommerce-checkout form.checkout .woocommerce-invalid .select2-selection--single {
	border-color: #c0563c;
}

/* ------------------------------------------------------------- Select2 */

/*
 * Select2 wraps the real `<select>` in spans of its own and hides the element,
 * so the box that has to be dressed is `.select2-selection--single`, above. The
 * container around it only has to stop being an inline-block of its own size.
 */
body.woocommerce-cart .cart-collaterals .shipping-calculator-form .select2-container,
body.woocommerce-checkout form.checkout .select2-container {
	display: block;
	width: 100% !important;
}

body.woocommerce-cart .cart-collaterals .shipping-calculator-form .select2-selection__rendered,
body.woocommerce-checkout form.checkout .select2-selection__rendered {
	/* Room at the end for the chevron, which is positioned over this. */
	padding: 0 1.5rem 0 0;
	color: var(--wp--preset--color--contrast);
	line-height: 1.3;
}

body.woocommerce-cart .cart-collaterals .shipping-calculator-form .select2-selection__placeholder,
body.woocommerce-checkout form.checkout .select2-selection__placeholder {
	color: var(--wp--preset--color--contrast-soft);
}

body.woocommerce-cart .cart-collaterals .shipping-calculator-form .select2-selection__arrow,
body.woocommerce-checkout form.checkout .select2-selection__arrow {
	top: 0;
	right: 0.75rem;
	width: 1rem;
	height: 3rem;
}

/*
 * Select2's arrow is a CSS triangle built out of a border, and it flips by
 * swapping the border colours. A chevron reads better at this size, so the
 * triangle is unmade and two edges of a rotated square take its place.
 */
body.woocommerce-cart .cart-collaterals .shipping-calculator-form .select2-selection__arrow b,
body.woocommerce-checkout form.checkout .select2-selection__arrow b {
	top: 50%;
	left: 50%;
	width: 0.4rem;
	height: 0.4rem;
	margin: 0;
	border: 0;
	border-right: 1px solid var(--wp--preset--color--contrast-soft);
	border-bottom: 1px solid var(--wp--preset--color--contrast-soft);
	transform: translate(-50%, -70%) rotate(45deg);
}

/* Stated at the depth of the rule above, or the chevron never turns over. */
body.woocommerce-cart .cart-collaterals .shipping-calculator-form .select2-container--open .select2-selection__arrow b,
body.woocommerce-checkout form.checkout .select2-container--open .select2-selection__arrow b {
	transform: translate(-50%, -20%) rotate(-135deg);
}

/*
 * The list opens at the end of `<body>`, outside either form, so these cannot
 * be scoped to one — the page's own body class is as close as they can get.
 */
body.woocommerce-cart .select2-dropdown,
body.woocommerce-checkout .select2-dropdown {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

body.woocommerce-cart .select2-search--dropdown,
body.woocommerce-checkout .select2-search--dropdown {
	padding: 0.5rem;
}

body.woocommerce-cart .select2-search--dropdown .select2-search__field,
body.woocommerce-checkout .select2-search--dropdown .select2-search__field {
	box-sizing: border-box;
	height: 2.5rem;
	padding: 0 0.7rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	outline: none;
}

body.woocommerce-cart .select2-results__option,
body.woocommerce-checkout .select2-results__option {
	padding: 0.55rem 0.9rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
}

body.woocommerce-cart .select2-container--default .select2-results__option--highlighted[aria-selected],
body.woocommerce-cart .select2-container--default .select2-results__option--highlighted[data-selected],
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected],
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--contrast);
}

body.woocommerce-cart .select2-container--default .select2-results__option[aria-selected="true"],
body.woocommerce-cart .select2-container--default .select2-results__option[data-selected="true"],
body.woocommerce-checkout .select2-container--default .select2-results__option[aria-selected="true"],
body.woocommerce-checkout .select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
}

/* ------------------------------------------- the cart's calculator only */

body.woocommerce-cart .cart-collaterals .shipping-calculator-form {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: var(--wp--preset--spacing--30) 0 0;
	border-top: 1px solid var(--wp--preset--color--line);
	text-align: left;
}

body.woocommerce-cart .cart-collaterals .shipping-calculator-form .button {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 3rem;
	min-height: 0;
	margin: 0.25rem 0 0;
	padding: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}

body.woocommerce-cart .cart-collaterals .shipping-calculator-form .button:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
}

/*
 * The toggle that opens all of this. It carries an icon from WooCommerce's own
 * icon font, which this theme does not load — it was rendering as a hollow box
 * beside the link.
 */
body.woocommerce-cart .cart-collaterals .shipping-calculator-button::after {
	content: none;
}

body.woocommerce-cart .cart-collaterals .shipping-calculator-button {
	display: inline-block;
	margin-top: 0.5rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

body.woocommerce-cart .cart-collaterals .shipping-calculator-button:hover {
	color: var(--wp--preset--color--accent-deep);
}

/*
 * The shipping row stacks at every width, not just on a phone.
 *
 * Against the summary's label column it had 205px of a 270px panel: two full
 * sentences wrapping after three words, and the address form under them
 * indented away from the totals it belongs to. The label goes above, and both
 * take the panel.
 */
body.woocommerce-cart .cart-collaterals .cart_totals tr.woocommerce-shipping-totals {
	grid-template-columns: 1fr;
	gap: 0.5rem;
}

body.woocommerce-cart .cart-collaterals .cart_totals tr.woocommerce-shipping-totals td {
	text-align: left;
}

/* ---------------------------------------------------------------------------
   The checkout
   ---------------------------------------------------------------------------
   WooCommerce's classic checkout arrives as one column of form with the order
   dumped underneath it. At 1440 that meant: billing on the left, an all but
   empty right column holding one checkbox and a notes box, and "Your order" —
   the thing being paid for — a thousand pixels below the fold. The product
   names and their prices ran into each other, and there were no photographs at
   all on the last screen before someone pays.

   The form takes the page; the order takes a panel beside it and stays there.
   --------------------------------------------------------------------------- */

/*
 * The same 1000px cap WooCommerce's block-theme stylesheet puts on the cart.
 * The checkout uses the site's wide measure like everything else.
 */
body.woocommerce-checkout .entry-content > .woocommerce {
	max-width: none;
	padding-bottom: var(--wp--preset--spacing--70);
}

/*
 * 136px of nothing under the header before the first line of the page — an
 * empty store-notices block and the content wrapper each contributing a block
 * gap. The page starts where it is told to instead.
 */
body.woocommerce-checkout main.wp-block-group {
	padding-top: var(--wp--preset--spacing--50);
}

/* Empty, it should take no room at all. */
body.woocommerce-checkout main > .wc-block-store-notices {
	margin: 0;
	padding: 0;
}

body.woocommerce-checkout main .entry-content {
	margin-top: 0;
}

@media (min-width: 1000px) {
	/*
	 * Two columns: everything the shopper fills in on the left, the order panel
	 * on the right.
	 *
	 * This block used to say `form.checkout` has exactly three children — the
	 * customer details, the "Your order" heading and the panel — and pinned the
	 * details to `grid-row: 1 / span 2` to sit beside the other two. That was
	 * true when it was written and stopped being true when Stripe's express
	 * checkout was switched on: the plugin inserts three more children *before*
	 * the details — the wallet buttons, a block of hidden attribution inputs and
	 * the "— OR —" rule. They had no row of their own, so auto-placement put
	 * them after the explicitly-placed details, and Apple Pay / Google Pay ended
	 * up at the very bottom of the page, below the order notes, where nobody
	 * scrolls to look for them. On a phone, where this grid does not apply, the
	 * same markup already read in DOM order and the buttons were at the top.
	 *
	 * So the left column is left to auto-place in DOM order — which is the order
	 * Stripe intends — and only the right column is pinned. Nothing needs
	 * changing here if the express block disappears (wallets unavailable, Stripe
	 * off): the details simply become row 1 again.
	 */
	body.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 26rem;
		column-gap: 4.5rem;
		row-gap: 0;
		align-items: start;
	}

	/*
	 * The coupon panel is not in that grid — it is a sibling — so it is given the
	 * column's width by the same arithmetic. Below this breakpoint there is one
	 * column and it simply fills it.
	 */
	body.woocommerce-checkout form.checkout_coupon {
		width: calc(100% - 26rem - 4.5rem);
	}

	/* Anything WooCommerce adds later lands in the form column, not the panel. */
	body.woocommerce-checkout form.checkout > * {
		grid-column: 1;
	}

	/*
	 * `stretch`, so the panel reads as one box.
	 *
	 * Row 1 is now as tall as the wallet buttons beside it (135px) rather than as
	 * tall as this heading (75px), which left 60px of white page showing between
	 * the beige of the heading and the beige of the panel below it. Stretching the
	 * heading fills that row with the same beige; its own top padding keeps the
	 * words where they were.
	 */
	body.woocommerce-checkout form.checkout > #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		align-self: stretch;
	}

	/*
	 * The panel starts on the second row and spans past however many rows the
	 * left column turns out to need. `align-items: start` keeps it at its own
	 * height, and the extra implicit rows are empty with a zero row gap, so they
	 * cost nothing.
	 */
	body.woocommerce-checkout form.checkout > #order_review {
		grid-column: 2;
		grid-row: 2 / span 99;
		position: sticky;
		top: var(--wp--preset--spacing--40);
	}
}

/*
 * The wallet buttons run the width of the fields below them.
 *
 * They were capped at 34rem because Stripe used to draw each button at about
 * 260px inside whatever cell it was given, so a full-width row left a bare strip
 * to the right of Google Pay — invisible on Apple Pay and Amazon Pay, which have
 * no border, and plainly wrong on the one that does. The cap fixed that and
 * introduced a worse problem: the checkout then had three different measures
 * stacked down one column — coupon, wallets, fields — and none of them agreed.
 *
 * One measure now, the form column's. If Stripe leaves a strip inside its own
 * iframe again it is Stripe's strip to leave; three widths in a column is the
 * thing a shopper actually notices.
 */
#wc-stripe-express-checkout-element {
	width: 100%;
	max-width: none;
}

/*
 * Stripe's order-attribution inputs are hidden fields in a visible wrapper,
 * which took 25px between the wallet buttons and the "— OR —" rule. Hidden
 * inputs still submit from a `display: none` parent.
 */
body.woocommerce-checkout form.checkout > wc-order-attribution-inputs,
body.woocommerce-checkout #wc-stripe-express-checkout__order-attribution-inputs {
	display: none;
}

/* ----------------------------------------------------------- the form */

/*
 * WooCommerce floats these two at 48% each. In a column that is now the whole
 * left side, the shipping fields and the order notes belong under the billing
 * address, not beside it.
 */
body.woocommerce-checkout .col2-set {
	display: block;
	width: auto;
}

body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2 {
	float: none;
	width: auto;
	max-width: none;
}

body.woocommerce-checkout .col2-set .col-2 {
	margin-top: var(--wp--preset--spacing--50);
}

body.woocommerce-checkout .woocommerce-additional-fields {
	margin-top: var(--wp--preset--spacing--40);
}

/*
 * The notes have a heading of their own in the markup, but it says "Additional
 * information" over a single field already labelled "Order notes". The field's
 * label is enough.
 */
body.woocommerce-checkout .woocommerce-additional-fields > h3 {
	display: none;
}

body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout #order_review_heading {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

/*
 * First and last name share a line; everything else takes the width. Woo does
 * this with floats and percentages, which leave the row a few pixels short and
 * need a clearfix after every pair.
 */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
}

body.woocommerce-checkout form.checkout .form-row {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	max-width: none;
}

body.woocommerce-checkout form.checkout .form-row-first {
	grid-column: 1;
}

body.woocommerce-checkout form.checkout .form-row-last {
	grid-column: 2;
}

/* The floats' clearfix has nothing to clear now and only adds a gap. */
body.woocommerce-checkout form.checkout .clear {
	display: none;
}

/*
 * Street address is two fields under one label, so the second sits directly
 * under the first rather than a full row away.
 */
body.woocommerce-checkout form.checkout #billing_address_2_field,
body.woocommerce-checkout form.checkout #shipping_address_2_field {
	margin-top: -0.35rem;
}

/* --------------------------------------------- ship to a different address */

/*
 * WooCommerce makes this an `h3` wrapping a label and a checkbox, so it arrives
 * at heading size and heading weight for what is a single question.
 */
body.woocommerce-checkout #ship-to-different-address {
	margin: 0;
	font-size: 1rem;
}

body.woocommerce-checkout #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

body.woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	margin-top: var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------- the coupon line */

/*
 * "Have a coupon?" arrived as an information banner — a blue icon and a tinted
 * box across the top of the page, which reads as something having gone wrong
 * before anything has been filled in.
 */
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
	margin: 0 0 var(--wp--preset--spacing--50);
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.875rem;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner > svg {
	display: none;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle a {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
 * The coupon form is a sibling of `form.checkout`, not a child, so it cannot
 * sit in the grid's left column — it is given the same measure instead. Left at
 * full width it was a single field stretched across 1144px.
 *
 * That measure is now the column's own arithmetic rather than a round number
 * that happened to look right. The grid is `minmax(0, 1fr) 26rem` with a 4.5rem
 * column gap, so the form column is whatever is left after the order panel and
 * the gap — and the coupon, sitting outside the grid, is told the same sum. It
 * lines up with the fields below it at every width instead of at one.
 */
body.woocommerce-checkout form.checkout_coupon {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
}

/* WooCommerce's line of explanation above the field. */
body.woocommerce-checkout form.checkout_coupon > p:not(.form-row) {
	flex: 1 0 100%;
	margin: 0;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.8125rem;
	line-height: 1.6;
}

body.woocommerce-checkout form.checkout_coupon .form-row {
	flex: 1 1 auto;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

body.woocommerce-checkout form.checkout_coupon .form-row-last {
	flex: 0 0 auto;
}

body.woocommerce-checkout form.checkout_coupon .clear {
	display: none;
}

/*
 * Woo sizes the field through `#coupon_code`, an id, so it is answered by name
 * — the same fight as on the cart page.
 */
body.woocommerce-checkout form.checkout_coupon input.input-text,
body.woocommerce-checkout form.checkout_coupon #coupon_code {
	box-sizing: border-box;
	width: 100%;
	height: 3rem;
	min-height: 0;
	margin: 0;
	padding: 0 1rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	outline: none;
}

body.woocommerce-checkout form.checkout_coupon .button {
	box-sizing: border-box;
	width: auto;
	height: 3rem;
	min-height: 0;
	margin: 0;
	padding: 0 1.5rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

body.woocommerce-checkout form.checkout_coupon .button:hover {
	background: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
}

/* ------------------------------------------------------------ the order */

body.woocommerce-checkout #order_review_heading {
	box-sizing: border-box;
	margin: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 0;
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-bottom: 0;
	border-radius: 2px 2px 0 0;
}

body.woocommerce-checkout #order_review {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 0;
	border-radius: 0 0 2px 2px;
}

/* Same treatment as the cart: the table markup is kept, the table is not. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot {
	display: block;
	width: 100%;
}

/*
 * The column headings go. "Product" and "Subtotal" labelled a table that is no
 * longer laid out as one, and each value below says what it is.
 */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead {
	display: none;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr {
	display: grid;
	box-sizing: border-box;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: center;
	width: 100%;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr > th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr > td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	vertical-align: middle;
}

/* Woo prints the column name into each cell on narrow screens. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr td::before,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr th::before {
	content: none !important;
}

/* One line of the order: photograph, name over count, line total. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.8rem;
	text-align: left !important;
}

body.woocommerce-checkout .coccone-order__thumb {
	display: block;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 3.25rem;
	height: 4rem;
	object-fit: cover;
	margin: 0;
	background: var(--wp--preset--color--base);
}

/*
 * `flex-basis: 0`, not `auto`.
 *
 * A wrapping flex container breaks lines using each item's max-content size and
 * only then flexes what is left, so a name wider than the space beside the
 * photograph was pushed to its own line however freely it was allowed to
 * shrink. From zero it never triggers the break, and grows into the room.
 */
body.woocommerce-checkout .coccone-order__name {
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
}

/*
 * The count takes its own line under the name, indented past the photograph.
 * Full-width rather than a second column, so a long name is free to wrap.
 */
body.woocommerce-checkout .coccone-order__qty {
	box-sizing: border-box;
	flex: 1 0 100%;
	margin: 0.2rem 0 0;
	padding-left: 4.05rem;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

/* A variation's attributes, printed under the name. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation {
	box-sizing: border-box;
	flex: 1 0 100%;
	margin: 0.15rem 0 0;
	padding-left: 4.05rem;
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-soft);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation dt,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation dd,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation p {
	display: inline;
	margin: 0;
	font-weight: 400;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
	text-align: right !important;
	white-space: nowrap;
}

/* The totals under the list. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	text-align: left !important;
	white-space: nowrap;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
	text-align: right !important;
}

/*
 * The shipping choices are two full sentences. Against a label column in a
 * 26rem panel they wrapped after three words, so that row stacks.
 */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
	grid-template-columns: 1fr;
	gap: 0.5rem;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
	text-align: left !important;
}

body.woocommerce-checkout #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-checkout #shipping_method li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 0.4rem;
}

body.woocommerce-checkout #shipping_method input[type="radio"] {
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--wp--preset--color--contrast);
}

body.woocommerce-checkout #shipping_method label {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total {
	padding-bottom: 0;
	border-bottom: 0;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td {
	font-size: 1.25rem;
}

/* ----------------------------------------------------------- the payment */

/*
 * The panel already has a ground and a hairline; a second box inside it for the
 * payment methods was a box in a box.
 */
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
	margin-top: var(--wp--preset--spacing--40);
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

body.woocommerce-checkout #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

body.woocommerce-checkout #payment ul.payment_methods > li {
	margin: 0 0 0.6rem;
	padding: 0;
	background: none;
}

body.woocommerce-checkout #payment ul.payment_methods label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

body.woocommerce-checkout #payment .payment_box {
	margin: 0.5rem 0 0;
	padding: 0.85rem 1rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.8125rem;
	line-height: 1.6;
}

body.woocommerce-checkout #payment .payment_box::before {
	content: none;
}

/* The "no available payment methods" notice, while there is no gateway on. */
body.woocommerce-checkout #payment .wc-block-components-notice-banner {
	margin: 0;
	padding: 0.85rem 1rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	font-size: 0.8125rem;
	line-height: 1.6;
}

body.woocommerce-checkout #payment .wc-block-components-notice-banner > svg {
	display: none;
}

body.woocommerce-checkout #payment .form-row.place-order {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
}

body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
	margin: 0 0 0.75rem;
	padding: 0;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.75rem;
	line-height: 1.6;
}

body.woocommerce-checkout #payment #place_order {
	box-sizing: border-box;
	display: block;
	float: none;
	width: 100%;
	min-height: 3.25rem;
	margin: 0;
	padding: 1rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}

body.woocommerce-checkout #payment #place_order:hover {
	background: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
}

/* ------------------------------------------------------------- narrow */

@media (max-width: 999px) {
	/*
	 * One column. The order still comes after the form — someone filling in an
	 * address should not have to scroll past the thing they already decided to
	 * buy to reach the first field.
	 */
	body.woocommerce-checkout form.checkout > #order_review_heading {
		margin-top: var(--wp--preset--spacing--50);
	}
}

@media (max-width: 600px) {
	body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	body.woocommerce-checkout form.checkout .form-row-first,
	body.woocommerce-checkout form.checkout .form-row-last {
		grid-column: 1;
	}

	body.woocommerce-checkout #order_review_heading {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
	}

	body.woocommerce-checkout #order_review {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	}
}

/* ---------------------------------------------------------------------------
   Create an account, or sign in
   ---------------------------------------------------------------------------
   One panel, on the cart and on the checkout.

   WooCommerce opens the checkout with two information banners — "Returning
   customer? Click here to login" and "Have a coupon? Click here to enter your
   code" — and puts nothing at all on the cart. Three sentences of chrome before
   the first field on one page, no invitation on the other, and neither of them
   says why an account is worth having or whether it is required.

   Both banners are hidden and this replaces them. The forms they toggle are
   printed separately and are untouched: WooCommerce's own checkout script binds
   `a.showlogin` and `a.showcoupon` on `document.body`, so links carrying those
   classes work exactly as its own do.
   --------------------------------------------------------------------------- */

body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
	display: none;
}

body.woocommerce-cart .coccone-account-prompt,
body.woocommerce-checkout .coccone-account-prompt {
	box-sizing: border-box;
	max-width: 44rem;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
}

/*
 * The cart's wrapper is a two-column grid, and this arrives as a child of it.
 * Left to place itself it would take the item list's column and push the list
 * into a second row; it belongs across the top of both.
 */
body.woocommerce-cart .coccone-account-prompt {
	grid-column: 1 / -1;
	/* The grid's own row gap does the spacing here. */
	margin-bottom: 0;
}

body.woocommerce-cart .coccone-account-prompt__note,
body.woocommerce-checkout .coccone-account-prompt__note {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/*
 * Guest checkout is on, so this says so. It is the one line on either page that
 * answers "am I being made to sign up?", and it is worth more than the offer
 * above it — hence stated plainly rather than tucked into the same paragraph.
 */
body.woocommerce-cart .coccone-account-prompt__guest,
body.woocommerce-checkout .coccone-account-prompt__guest {
	margin: 0.4rem 0 0;
	color: var(--wp--preset--color--contrast-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	line-height: 1.6;
}

body.woocommerce-cart .coccone-account-prompt__links,
body.woocommerce-checkout .coccone-account-prompt__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: var(--wp--preset--spacing--30) 0 0;
}

/*
 * Sign in and Create an account are the two actions, so they are buttons. Both
 * outlined: one is not more correct than the other, and the page already has a
 * filled button for the thing that actually completes an order.
 */
body.woocommerce-cart .coccone-account-prompt__links > a,
body.woocommerce-checkout .coccone-account-prompt__links > a {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.875rem;
	padding: 0 1.4rem;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

body.woocommerce-cart .coccone-account-prompt__links > a:hover,
body.woocommerce-checkout .coccone-account-prompt__links > a:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
}

/*
 * The coupon is not an account action and does not belong in the pair. It sits
 * after them as what it is — a link — with the space between doing the work a
 * separator would otherwise have to.
 */
body.woocommerce-checkout .coccone-account-prompt__links > a.showcoupon {
	height: auto;
	margin-left: auto;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--contrast-soft);
	letter-spacing: 0.14em;
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

body.woocommerce-checkout .coccone-account-prompt__links > a.showcoupon:hover {
	background: none;
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 520px) {
	/* Two buttons of different lengths side by side read as one broken row. */
	body.woocommerce-cart .coccone-account-prompt__links > a,
	body.woocommerce-checkout .coccone-account-prompt__links > a {
		flex: 1 1 100%;
	}

	body.woocommerce-checkout .coccone-account-prompt__links > a.showcoupon {
		margin-left: 0;
		justify-content: flex-start;
	}
}

/*
 * The same link on its own, for a customer who is already signed in and has
 * nothing to be offered but this.
 */
body.woocommerce-checkout .coccone-coupon-line {
	margin: 0 0 var(--wp--preset--spacing--50);
}

body.woocommerce-checkout .coccone-coupon-line a {
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

body.woocommerce-checkout .coccone-coupon-line a:hover {
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------- signing in, and signing up */

/*
 * Both forms are siblings of `form.checkout`, like the coupon form, so they take
 * the same measure and the same panel rather than the width of the page — and
 * the same as each other, because they are two answers to one question.
 *
 * That measure used to be a flat 34rem, and it was the last thing on the
 * checkout still saying a different number. Going down the left column a shopper
 * met the account panel at the form's width, then a sign-in panel narrower than
 * it, then the coupon, then the wallets, then the fields — five boxes, more than
 * one edge. They all sit on the form column's edge now; the width is the grid's
 * own arithmetic, set in the media query below where the two columns exist.
 */
body.woocommerce-checkout form.woocommerce-form-login,
body.woocommerce-checkout form.coccone-register {
	box-sizing: border-box;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
}

body.woocommerce-checkout form.woocommerce-form-login > p:first-child,
body.woocommerce-checkout form.coccone-register .coccone-register__intro {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.8125rem;
	line-height: 1.6;
}

body.woocommerce-checkout form.woocommerce-form-login .form-row,
body.woocommerce-checkout form.coccone-register .form-row {
	float: none;
	width: auto;
	margin: 0 0 0.85rem;
	padding: 0;
}

body.woocommerce-checkout form.woocommerce-form-login .clear {
	display: none;
}

/*
 * `:not()` because the small-caps treatment is for a field's name, and the last
 * row's label is a sentence beside a checkbox. Stated on this rule rather than
 * fought on the other: at three elements deep it outranks the checkbox rule
 * below however that one is written.
 */
body.woocommerce-checkout form.woocommerce-form-login > .form-row > label:not(.woocommerce-form__label-for-checkbox),
body.woocommerce-checkout form.coccone-register > .form-row > label {
	display: block;
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--contrast-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

body.woocommerce-checkout form.woocommerce-form-login input.input-text,
body.woocommerce-checkout form.coccone-register input.input-text {
	box-sizing: border-box;
	width: 100%;
	height: 3rem;
	min-height: 0;
	margin: 0;
	padding: 0 0.9rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	outline: none;
}

body.woocommerce-checkout form.woocommerce-form-login input.input-text:focus,
body.woocommerce-checkout form.coccone-register input.input-text:focus {
	border-color: var(--wp--preset--color--contrast);
}

/* Woo wraps the password in a span with a reveal button over its right edge. */
body.woocommerce-checkout form.woocommerce-form-login .password-input {
	display: block;
	position: relative;
	width: 100%;
}

body.woocommerce-checkout form.woocommerce-form-login .show-password-input {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	padding: 0;
	transform: translateY(-50%);
	background: none;
	border: 0;
	cursor: pointer;
}

/*
 * Remember me and the button share the last row. It is matched by its content
 * rather than by position: WooCommerce puts three hidden inputs in the same
 * paragraph, and a `:last-of-type` would be the lost-password line.
 */
body.woocommerce-checkout form.woocommerce-form-login .form-row:has(> .button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--30);
}

body.woocommerce-checkout form.woocommerce-form-login .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

body.woocommerce-checkout form.woocommerce-form-login .woocommerce-form__input-checkbox {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

body.woocommerce-checkout form.woocommerce-form-login .button,
body.woocommerce-checkout form.coccone-register .button {
	box-sizing: border-box;
	width: auto;
	height: 3rem;
	min-height: 0;
	margin: 0 0 0 auto;
	padding: 0 1.75rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

body.woocommerce-checkout form.woocommerce-form-login .button:hover,
body.woocommerce-checkout form.coccone-register .button:hover {
	background: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
}

body.woocommerce-checkout form.woocommerce-form-login .lost_password {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: 0.8125rem;
}

body.woocommerce-checkout form.woocommerce-form-login .lost_password a {
	color: var(--wp--preset--color--contrast-soft);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
 * The button takes the end of its own row, level with Login's on the form
 * beside it, so opening one after the other does not move the action.
 */
body.woocommerce-checkout form.coccone-register .coccone-register__actions {
	display: flex;
	justify-content: flex-end;
	margin: var(--wp--preset--spacing--30) 0 0;
}

/*
 * Whatever went wrong, said above the fields rather than beside one of them:
 * "that email already has an account" is about the attempt, not about a field.
 */
body.woocommerce-checkout form.coccone-register .coccone-register__error {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0.7rem 0.9rem;
	background: #fdf3f1;
	border: 1px solid #d9a99f;
	border-radius: 2px;
	color: #7a2e1e;
	font-size: 0.8125rem;
	line-height: 1.5;
}

body.woocommerce-checkout form.coccone-register .coccone-register__error[hidden] {
	display: none;
}

body.woocommerce-checkout form.coccone-register .required {
	color: inherit;
	text-decoration: none;
}

/*
 * The form column's width, by the same sum the coupon uses: the grid is
 * `minmax(0, 1fr) 26rem` with a 4.5rem gap, and these two are outside it.
 * Below 1000px there is one column and they simply fill it.
 */
@media (min-width: 1000px) {
	body.woocommerce-checkout form.woocommerce-form-login,
	body.woocommerce-checkout form.coccone-register {
		width: calc(100% - 26rem - 4.5rem);
	}
}

/* ---------------------------------------------------------------------------
   The account page: sign in, or sign up
   ---------------------------------------------------------------------------
   WooCommerce prints both forms side by side in a two-column set, so the first
   thing the page asks is which of two people you are. `woocommerce/myaccount/
   form-login.php` shows one at a time instead, chosen by `?action=register`,
   with a line at the foot leading to the other.

   One column, centred, at the measure of a form rather than the measure of a
   page — and the same field treatment as the two forms on the checkout, since
   they are the same two forms.
   --------------------------------------------------------------------------- */

body.woocommerce-account .coccone-account-page {
	box-sizing: border-box;
	width: 100%;
	max-width: 30rem;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
}

body.woocommerce-account .coccone-account-page h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

body.woocommerce-account .coccone-account-page__intro {
	margin: -0.35rem 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	line-height: 1.6;
}

/*
 * WooCommerce puts a border, padding and a top margin on `form.login` and
 * `form.register` so they stand out on a bare page. Inside a panel that is a box
 * drawn inside a box.
 */
body.woocommerce-account .coccone-account-page form.login,
body.woocommerce-account .coccone-account-page form.register {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

/*
 * Signed out this page is one centred panel, so its title is centred over it
 * rather than left at the page's edge a third of a screen away.
 */
body.woocommerce-account:not(.logged-in) .wp-block-post-title {
	text-align: center;
}

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

body.woocommerce-account .coccone-account-page .form-row {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 0.85rem;
	padding: 0;
}

/*
 * `:not()` because the small-caps treatment names a field, and the last row's
 * label is a sentence beside a checkbox — the same fight as on the checkout.
 */
body.woocommerce-account .coccone-account-page .form-row > label:not(.woocommerce-form__label-for-checkbox) {
	display: block;
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--contrast-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

body.woocommerce-account .coccone-account-page .required {
	color: inherit;
	text-decoration: none;
}

body.woocommerce-account .coccone-account-page input.input-text {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 3rem;
	min-height: 0;
	margin: 0;
	padding: 0 0.9rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	outline: none;
}

body.woocommerce-account .coccone-account-page input.input-text:focus {
	border-color: var(--wp--preset--color--contrast);
	box-shadow: none;
}

/* WooCommerce wraps the password in a span with a reveal button over it. */
body.woocommerce-account .coccone-account-page .password-input {
	display: block;
	position: relative;
	width: 100%;
}

body.woocommerce-account .coccone-account-page .show-password-input {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	padding: 0;
	transform: translateY(-50%);
	background: none;
	border: 0;
	cursor: pointer;
}

body.woocommerce-account .coccone-account-page .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

body.woocommerce-account .coccone-account-page .woocommerce-form__input-checkbox {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

/* -------------------------------------------------------------- actions */

/*
 * Full width. There is one thing to do on this page and nothing to weigh it
 * against, so the button takes the measure of the form.
 */
body.woocommerce-account .coccone-account-page .button {
	box-sizing: border-box;
	display: block;
	float: none;
	width: 100%;
	height: 3.25rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}

body.woocommerce-account .coccone-account-page .button:hover {
	background: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
}

body.woocommerce-account .coccone-account-page .lost_password {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: 0.8125rem;
	text-align: center;
}

body.woocommerce-account .coccone-account-page .lost_password a {
	color: var(--wp--preset--color--contrast-soft);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------ the other */

/*
 * The way to the view this page is not. Above a rule rather than beside the
 * button, so it reads as a different question and not as a second action.
 */
body.woocommerce-account .coccone-account-page__switch {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: var(--wp--preset--spacing--30) 0 0;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	text-align: center;
}

body.woocommerce-account .coccone-account-page__switch a {
	color: var(--wp--preset--color--contrast);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

body.woocommerce-account .coccone-account-page__switch a:hover {
	color: var(--wp--preset--color--accent-deep);
}

/* Errors and notices sit above the panel, at its measure. */
body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper {
	width: 100%;
	max-width: 30rem;
	margin: 0 auto var(--wp--preset--spacing--30);
}

@media (max-width: 600px) {
	body.woocommerce-account .coccone-account-page {
		padding: var(--wp--preset--spacing--40);
	}
}

/* ------------------------------------------------- getting back in again */

/*
 * The lost-password and reset forms are wrapped in the same panel as sign-in,
 * so the fields, the labels, the button and the link below it are all inherited
 * and nothing is repeated here. Two things the panel had no reason to know
 * about:
 */

/* WooCommerce's clearfix div, which the panel's block rows have no use for. */
body.woocommerce-account .coccone-account-page .clear {
	display: none;
}

/*
 * Woo marks the rows `form-row-first` and `form-row-last`, asking for a 50/50
 * pair. `.form-row` above already answers with `width: auto`, but Woo's own
 * `.form-row-first { float: left; width: 47% }` is the same weight and later in
 * the cascade on some pages, so the two are named outright.
 */
body.woocommerce-account .coccone-account-page .form-row-first,
body.woocommerce-account .coccone-account-page .form-row-last {
	float: none;
	width: auto;
}

/* ---------------------------------------------------------------------------
   The account page, signed in
   ---------------------------------------------------------------------------
   WooCommerce gives it a list of links down one side and, on the dashboard, two
   sentences of prose with the whole account buried in them as inline links:
   "you can view your recent orders, manage your shipping and billing addresses,
   and edit your password and account details". A paragraph doing the work of a
   menu — nothing in it is a target, and none of it says what is behind any of
   the three places it names.

   Below that, 500px of nothing: the content column was 118px tall in a page
   seven hundred deep, held to 1000px of a 1440px screen with the whole right
   third empty.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   One measure for the heading and the block under it
   ---------------------------------------------------------------------------
   WooCommerce's own woocommerce-blocktheme.css caps three things at 1000px:

     .woocommerce-account .wp-block-post-title,
     .woocommerce-account main .woocommerce,
     ... and the same pair for the cart and the checkout

   1000px of a 1440px screen, centred, is a heading starting at 213px — while
   everything else on the site (the cart, the contact page, the product grid)
   starts at 113px, on the theme's 1200px wide measure. The account page was the
   only page whose title did not line up with the page above and below it.

   Releasing the block with `max-width: none` — which is what was here first —
   only made it worse: the heading stayed at 1000px and the block went edge to
   edge at 1377px, so the two were wrong in opposite directions.

   Both are put on the wide measure instead, which is where the cart already is.
   WooCommerce's selector is (0,2,1); naming the body twice makes these (0,3,1).
   --------------------------------------------------------------------------- */

body.woocommerce-account.logged-in .wp-block-post-title,
body.woocommerce-account.logged-in .entry-content > .woocommerce {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/*
 * No padding-bottom here.
 *
 * There was one, from when the content column was 118px tall and the page
 * needed something under it. The menu column is 5 items and about 350px now, so
 * the page stands on its own — and the padding was putting 240px of white above
 * the footer where the contact page and the cart have 112px. The account page
 * was the only page on the site with a different bottom band.
 */

@media (min-width: 860px) {
	body.woocommerce-account.logged-in .entry-content > .woocommerce {
		display: grid;
		grid-template-columns: 15rem minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--70);
		align-items: start;
	}

	/*
	 * WooCommerce prints an empty notices wrapper before the menu. Left to place
	 * itself it took the first column and pushed the menu into the second and
	 * the content onto a row of its own — the menu ended up to the *right* of a
	 * content column 163px wide.
	 */
	body.woocommerce-account.logged-in .entry-content > .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	/*
	 * Placed by name rather than by order.
	 *
	 * The menu is the first child and the content the second, and auto-placement
	 * still put the menu in the second column and the content in the first —
	 * WooCommerce floats the content right, and something in that pair was
	 * reordering them. Saying where each one goes ends the argument.
	 */
	body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 2;
		order: 0;
	}

	body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
		grid-column: 2;
		grid-row: 2;
		order: 0;
	}
}

/*
 * Woo floats the menu at 30% and the content at 68%. Float is ignored on a grid
 * item but the widths are not, and below the breakpoint the floats are wrong
 * anyway — the menu is a row of pills there, not a column.
 */
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* ------------------------------------------------------------ the menu */

/*
 * A rule under every item made the menu read as a table of contents. The
 * current page is marked instead — a filled ground and a line at its left edge,
 * which is the one thing the old menu never showed.
 */
body.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.7rem 0.9rem;
	border-left: 2px solid transparent;
	border-radius: 0 2px 2px 0;
	color: var(--wp--preset--color--contrast-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--contrast);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wp--preset--color--base-alt);
	border-left-color: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--contrast);
}

/*
 * Signing out is not one of the places you can be, so it sits apart from the
 * four that are.
 */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

@media (max-width: 859px) {
	/* A row of pills above the content rather than a column beside it. */
	body.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: var(--wp--preset--spacing--50);
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li a {
		padding: 0.55rem 0.9rem;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 999px;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
		background: var(--wp--preset--color--contrast);
		border-color: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base-alt);
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
}

/* ------------------------------------------------------- the dashboard */

body.woocommerce-account .coccone-account__hello {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

body.woocommerce-account .coccone-account__hello strong {
	font-weight: 400;
}

body.woocommerce-account .coccone-account__intro {
	margin: 0.5rem 0 var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.9375rem;
	line-height: 1.6;
}

body.woocommerce-account .coccone-account__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-account .coccone-account__cards a {
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	text-decoration: none;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

body.woocommerce-account .coccone-account__cards a:hover {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

body.woocommerce-account .coccone-account__card-title {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	color: var(--wp--preset--color--contrast);
}

body.woocommerce-account .coccone-account__card-note {
	display: block;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.8125rem;
	line-height: 1.6;
}

/* ----------------------------------------------- headings and notices */

body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3,
body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}

/*
 * WooCommerce says "you have no orders yet" in an information banner with a
 * blue icon, which reads as a fault rather than as a fact about a new account.
 */
body.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
}

body.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner > svg {
	display: none;
}

/* ------------------------------------------------------------ addresses */

body.woocommerce-account .woocommerce-MyAccount-content > p:not([class]) {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Woo floats the two at 47%, which leaves the row short and needs clearing. */
body.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--wp--preset--spacing--40);
}

/*
 * The clearfix that came with those floats has to go with them.
 *
 * woocommerce-layout.css carries the old two-pseudo clearfix:
 *
 *     .woocommerce .col2-set::after,
 *     .woocommerce .col2-set::before { content: " "; display: table }
 *
 * Harmless while the box is a block. On a grid container a pseudo-element with
 * `content` is a grid item like any other — so the grid held four items, not
 * two. ::before took (1,1), Billing was pushed to (1,2), Shipping fell to (2,1)
 * and ::after landed in (2,2): the two cards staggered diagonally down the page
 * with an empty cell above each one.
 *
 * Nothing in the DOM explained it — the container's element children were the
 * two cards, and both read `grid-column: auto`. The tell was the container
 * reporting `grid-template-rows: 114.9px 114.9px`: two rows for two items that
 * should have shared one.
 *
 * The same clearfix rides on `.title`, and the card header is a flex row — so
 * its line was `::before + <h2> + <a> + ::after`, four items under
 * `space-between`. The two phantoms took the ends and pushed the heading and its
 * link 34px inward, off the padding edge that the address under them sits on.
 *
 * The two halves need different weights, because Woo states them twice at
 * different strengths:
 *
 *   woocommerce-layout.css  .woocommerce .col2-set::before                (0,2,1)
 *   woocommerce.css         .woocommerce-account .addresses .title::before (0,3,1)
 *
 * A first attempt answered both with `body.woocommerce-account .X::before`,
 * which is (0,2,2). That beat the first — two classes against two, decided on
 * the later sheet — and lost the second, where three classes beat two before
 * the element count is ever read. So the cards came apart and the headings
 * stayed inset, and the CSS looked like it had simply not loaded.
 *
 * Naming the wrapper as well as the header makes the second pair (0,3,2).
 */
body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after,
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title::before,
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title::after {
	display: none;
}

body.woocommerce-account .woocommerce-Addresses .col-1,
body.woocommerce-account .woocommerce-Addresses .col-2 {
	box-sizing: border-box;
	float: none;
	width: auto;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
}

body.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

body.woocommerce-account .woocommerce-Address-title .edit {
	color: var(--wp--preset--color--contrast);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.35em;
	white-space: nowrap;
}

body.woocommerce-account .woocommerce-Address address {
	margin: 0;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.9375rem;
	font-style: normal;
	line-height: 1.7;
}

/* ---------------------------------------------------------------- forms */

body.woocommerce-account .woocommerce-MyAccount-content form .form-row,
body.woocommerce-account .woocommerce-MyAccount-content form .woocommerce-form-row {
	box-sizing: border-box;
	float: none;
	width: auto;
	margin: 0 0 0.85rem;
	padding: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content form .clear {
	display: none;
}

body.woocommerce-account .woocommerce-MyAccount-content form label {
	display: block;
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--contrast-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

body.woocommerce-account .woocommerce-MyAccount-content form .required {
	color: inherit;
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-content form input.input-text,
body.woocommerce-account .woocommerce-MyAccount-content form input[type="text"],
body.woocommerce-account .woocommerce-MyAccount-content form input[type="email"],
body.woocommerce-account .woocommerce-MyAccount-content form input[type="tel"],
body.woocommerce-account .woocommerce-MyAccount-content form input[type="password"],
body.woocommerce-account .woocommerce-MyAccount-content form .select2-selection--single {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	height: 3rem;
	min-height: 0;
	margin: 0;
	padding: 0 0.9rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	outline: none;
}

body.woocommerce-account .woocommerce-MyAccount-content form input:focus,
body.woocommerce-account .woocommerce-MyAccount-content form .select2-container--open .select2-selection--single {
	border-color: var(--wp--preset--color--contrast);
	box-shadow: none;
}

/*
 * The password fields sit inside a fieldset of their own. It is a second
 * subject on the same form, so it gets a rule above it rather than running on
 * from the name and the email.
 */
body.woocommerce-account .woocommerce-MyAccount-content form fieldset {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: var(--wp--preset--spacing--40) 0 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

body.woocommerce-account .woocommerce-MyAccount-content form legend {
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	color: var(--wp--preset--color--contrast);
}

body.woocommerce-account .woocommerce-MyAccount-content form em {
	display: block;
	margin-top: 0.35rem;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.8125rem;
	font-style: normal;
	line-height: 1.6;
}

/* Woo wraps a password in a span with a reveal button over its right edge. */
body.woocommerce-account .woocommerce-MyAccount-content form .password-input {
	display: block;
	position: relative;
	width: 100%;
}

body.woocommerce-account .woocommerce-MyAccount-content form .show-password-input {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	padding: 0;
	transform: translateY(-50%);
	background: none;
	border: 0;
	cursor: pointer;
}

/* --------------------------------------------------------------- buttons */

body.woocommerce-account .woocommerce-MyAccount-content .button,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 3.25rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0 2rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

body.woocommerce-account .woocommerce-MyAccount-content .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
	background: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
}

/*
 * The button inside a notice is the way out of an empty page, not the page's
 * own action, so it does not take the filled treatment.
 */
body.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner .button {
	min-height: 2.875rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0 1.5rem;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

body.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner .button:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
}

/* ---------------------------------------------------------------- orders */

body.woocommerce-account table.woocommerce-orders-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

body.woocommerce-account table.woocommerce-orders-table th {
	padding: 0 0 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-align: left;
	text-transform: uppercase;
}

body.woocommerce-account table.woocommerce-orders-table td {
	padding: 1rem 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
	vertical-align: middle;
}

body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
	min-height: 2.5rem;
	margin: 0;
	padding: 0 1.1rem;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--line);
	font-size: 0.625rem;
}

body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:hover {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
}

@media (max-width: 600px) {
	/* The order table becomes a card per order rather than five columns. */
	body.woocommerce-account table.woocommerce-orders-table thead {
		display: none;
	}

	body.woocommerce-account table.woocommerce-orders-table,
	body.woocommerce-account table.woocommerce-orders-table tbody,
	body.woocommerce-account table.woocommerce-orders-table tr {
		display: block;
		width: 100%;
	}

	body.woocommerce-account table.woocommerce-orders-table tr {
		padding: var(--wp--preset--spacing--30) 0;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	body.woocommerce-account table.woocommerce-orders-table td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.25rem 0;
		border: 0;
		text-align: right;
	}

	body.woocommerce-account table.woocommerce-orders-table td::before {
		content: attr(data-title);
		color: var(--wp--preset--color--contrast-soft);
		font-size: 0.625rem;
		font-weight: 700;
		letter-spacing: 0.18em;
		text-transform: uppercase;
	}
}

/* ---------------------------------------------------------------------------
   Quantity steppers
   ---------------------------------------------------------------------------
   `assets/js/quantity.js` puts a minus and a plus around every quantity input
   and marks the wrapper `.coccone-qty`. Here the three of them become one pill:
   the frame moves from the input to the wrapper, and the input loses its own
   border and its spinner arrows.

   The selectors are spelled out for each of the three places a quantity box
   appears because the rules they have to beat are: on a product page,
   `.woocommerce div.product form.cart .quantity input` (0,4,2); in the cart,
   `body.woocommerce-cart table.shop_table td.product-quantity .quantity input`
   (0,5,3). Adding `.coccone-qty` to each is one class deeper than each, which is
   all it takes; the last line in every list covers anywhere else one turns up.
   --------------------------------------------------------------------------- */

.woocommerce div.product form.cart div.quantity.coccone-qty,
.wc-block-add-to-cart-form div.quantity.coccone-qty,
body.woocommerce-cart table.shop_table td.product-quantity div.quantity.coccone-qty,
div.quantity.coccone-qty {
	display: inline-flex;
	align-items: stretch;
	box-sizing: border-box;
	width: auto;
	margin: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	overflow: hidden;
}

/*
 * The number.
 *
 * `width: auto` and `flex: 1` rather than a measure: the pill is sized by its
 * own rule below, and the number takes whatever the two buttons leave. A fixed
 * width here is what made the box fall apart at every breakpoint before.
 */
.woocommerce div.product form.cart .coccone-qty input.qty,
.wc-block-add-to-cart-form .coccone-qty input.qty,
body.woocommerce-cart table.shop_table td.product-quantity .coccone-qty input.qty,
.coccone-qty input.qty {
	box-sizing: border-box;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	line-height: 1;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

/* The native arrows are the thing being replaced. */
.coccone-qty input.qty::-webkit-outer-spin-button,
.coccone-qty input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.coccone-qty input.qty:focus {
	outline: none;
}

/*
 * The focus ring belongs on the pill, not on the number inside it — a ring
 * around the middle third of a control reads as a rendering fault.
 */
.coccone-qty:focus-within {
	border-color: var(--wp--preset--color--contrast);
}

.coccone-qty__step {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 2.5rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

.coccone-qty__step:hover:not(:disabled) {
	background: var(--wp--preset--color--base-alt);
}

.coccone-qty__step:active:not(:disabled) {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/*
 * At the floor — one on a product page, zero in the cart, which is how
 * WooCommerce removes a line — minus has nothing left to do. It stays in place
 * and greys rather than disappearing, so the pill does not change width under
 * the finger.
 */
.coccone-qty__step:disabled {
	color: var(--wp--preset--color--line);
	cursor: default;
}

.coccone-qty__step svg {
	display: block;
}

/* --------------------------------------------------- on a product page */

/*
 * Beside Add to cart the pill holds the row's height, and it is wide enough
 * that both buttons are comfortable targets.
 */
.woocommerce div.product form.cart div.quantity.coccone-qty,
.wc-block-add-to-cart-form div.quantity.coccone-qty {
	flex: 0 0 auto;
	width: 8.5rem;
	min-height: 3.125rem;
}

@media (max-width: 782px) {
	/*
	 * The controls stack into a column on a narrow screen, so the pill takes the
	 * line like the buttons under it — and the two targets grow with it.
	 */
	.woocommerce div.product form.cart div.quantity.coccone-qty,
	.wc-block-add-to-cart-form div.quantity.coccone-qty {
		width: 100%;
	}

	.woocommerce div.product form.cart .coccone-qty__step,
	.wc-block-add-to-cart-form .coccone-qty__step {
		width: 3.25rem;
	}
}

/* ---------------------------------------------------------- in the cart */

body.woocommerce-cart table.shop_table td.product-quantity div.quantity.coccone-qty {
	width: 7.25rem;
	min-height: 2.75rem;
}

body.woocommerce-cart table.shop_table td.product-quantity .coccone-qty__step {
	width: 2.25rem;
}

/*
 * Once the form actually submits, the list is held back so the numbers about to
 * change do not look settled. The flag is set at submit rather than at the first
 * press — dimmed and inert during the wait, the table would have swallowed the
 * second press of a visitor going from one to three.
 */
body.woocommerce-cart form[data-coccone-updating] table.shop_table tbody {
	opacity: 0.55;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   The search results page
   ---------------------------------------------------------------------------
   WooCommerce serves `?s=…&post_type=product` from its own block template,
   product-search-results — breadcrumbs, the query title, and a Product
   Collection. The theme's own `templates/search.html` never sees a product
   search; it is only reached by a search with no post_type on it.

   Two things were wrong with what Woo hands back.

   1. The page ended flush against the dark band. Every other page on the site
      leaves 112px of white between its last block and the newsletter — the cart,
      the contact page, the account — and this one left nothing, so the "no
      products were found" line and the field under it were sitting on the edge
      of the brown.

   2. The field it offers after a failed search was 46px where every other field
      on the site is 48px, which is close enough to look like a mistake rather
      than a decision.
   --------------------------------------------------------------------------- */

/*
 * On `main`, not on the block inside it.
 *
 * There is no `.entry-content` on this template — Woo's product-search-results
 * hangs its blocks straight off `<main class="wp-block-group has-global-padding
 * is-layout-constrained">`, so the first attempt at this rule matched nothing at
 * all and the field stayed welded to the brown. Putting the room on `main` also
 * covers both states without having to know which block ends the page.
 */
body.search main.wp-block-group {
	padding-bottom: var(--wp--preset--spacing--70);
}

/*
 * The field and its button, matched to the account and checkout forms: 48px,
 * the same border, the same dark submit in small caps.
 */
body.search .wp-block-search__input {
	box-sizing: border-box;
	height: 48px;
	padding: 0 0.9rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
}

body.search .wp-block-search__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

body.search .wp-block-search__button {
	box-sizing: border-box;
	height: 48px;
	padding: 0 1.6rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 0;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}

body.search .wp-block-search__button:hover {
	background: var(--wp--preset--color--accent-deep);
}

/* The line above the field, given the weight of a statement rather than a note. */
body.search-no-results .wc-block-product-template__no-results,
body.search-no-results .woocommerce-info {
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: 1.0625rem;
}

/* ---------------------------------------------------------------------------
   The product page, below the buy column
   ---------------------------------------------------------------------------
   Everything under the SKU line arrived as WooCommerce left it. Measured:

     tab labels ......... 11px
     first panel heading  40px, and it read "Description", under a tab that
                          already read "Description"
     body copy .......... 17px on a 1200px line — about 150 characters, where
                          anything past 75 is hard to track back from
     related heading .... 13px, smaller than the paragraphs above it
     related row ........ five columns holding three cards, hugging the left
     gap to the footer .. 0px

   The page had a considered buying column and then stopped considering.
   --------------------------------------------------------------------------- */

/* --------------------------------------------------- the join, and the room */

/*
 * A hairline where the buying column ends. The 100px of white below the SKU was
 * the gallery being taller than the summary, not a decision — with a rule across
 * it, it reads as one.
 */
body.single-product .wp-block-woocommerce-product-details {
	margin-top: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--line);
}

/*
 * No padding above the strip, because there is already a margin under the rule.
 *
 * With `padding-top` set to the same value as the margin, the rule sat 72px
 * below the buying column and 145px above the tabs — the box's own first child
 * brings about 73px of its own, and the two stacked. Measured both sides rather
 * than assuming they matched.
 */
body.single-product .wp-block-woocommerce-product-details {
	padding-top: 0;
}

/*
 * The page ended flush against the dark band, like the search results did.
 * Every other page leaves 112px.
 */
body.single-product main.wp-block-group {
	padding-bottom: var(--wp--preset--spacing--70);
}

/* ------------------------------------------------------------- the tab strip */

/*
 * The selectors below are heavier than they look, and each weight was measured
 * rather than guessed.
 *
 *   Woo's tab link ........ (0,4,4)  .woocommerce div.product .woocommerce-tabs ul.tabs li a
 *   global styles, heading  (0,2,1)  .wp-block-woocommerce-product-collection h2.wp-block-heading
 *   Woo's card, inline .... (0,4,1)  .wc-block-product-template.is-flex-container.is-flex-container.columns-5 > li
 *
 * The last of those doubles a class to buy itself a point; the rules here do the
 * same where they have to.
 *
 * A first attempt at the tabs mirrored Woo's own chain and added the body —
 * `body.single-product .woocommerce div.product ...` — which should have been
 * (0,5,5) and won. It matched nothing: checked with `element.matches()`, that
 * exact selector returns false on the very link Woo's own selector matches. The
 * chain here is one confirmed to match, weighted with classes the markup already
 * carries: `.woocommerce-tabs.wc-tabs-wrapper` and `ul.tabs.wc-tabs`.
 */

body.single-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Woo draws a tab as a bordered box with a rounded top. This is a shop. */
body.single-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

body.single-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li::before,
body.single-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li::after {
	display: none;
}

/*
 * Woo's own rule is `.woocommerce div.product .woocommerce-tabs ul.tabs li a` —
 * (0,4,4). Naming the body was (0,3,4) and lost by one class, so the labels
 * stayed at 11px while everything else on the panel changed. Mirroring Woo's
 * chain and adding the body makes this (0,5,5).
 */
body.single-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li a {
	display: block;
	padding: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

body.single-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li a:hover {
	color: var(--wp--preset--color--contrast);
}

/*
 * The active tab is marked under the label, on the same line the strip already
 * draws — so the two rules meet instead of the tab sitting in a raised box.
 */
body.single-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li.active a {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------- the panel */

/*
 * A measure, not a width.
 *
 * The strip stays wide because it is navigation; the prose does not, because it
 * is prose. 68 characters is the middle of the range a line can be read at
 * without losing the start of the next one.
 */
body.single-product .woocommerce-Tabs-panel {
	max-width: 68ch;
}

body.single-product .woocommerce-Tabs-panel > h2,
body.single-product .woocommerce-Tabs-panel > h3 {
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
}

body.single-product .woocommerce-Tabs-panel > *:first-child {
	margin-top: 0;
}

body.single-product .woocommerce-Tabs-panel p {
	margin: 0 0 var(--wp--preset--spacing--30);
	line-height: 1.7;
}

body.single-product .woocommerce-Tabs-panel ul {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding-left: 1.1rem;
	list-style: disc;
}

body.single-product .woocommerce-Tabs-panel li {
	margin-bottom: 0.35rem;
	line-height: 1.6;
}

body.single-product .woocommerce-Tabs-panel li::marker {
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------ the related row */

.coccone-related {
	margin-top: var(--wp--preset--spacing--70);
}

/* The heading and the two arrows share one line. */
.coccone-related__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

.coccone-related .coccone-related__head h2.wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
}

.coccone-related__arrows {
	display: flex;
	flex: 0 0 auto;
	gap: 0.5rem;
}

.coccone-related__arrow {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.coccone-related__arrow:hover:not(:disabled) {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border-color: var(--wp--preset--color--contrast);
}

.coccone-related__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Nothing to slide to — see the script. */
.coccone-related.is-static .coccone-related__arrows {
	display: none;
}

/* --------------------------------------------------------------- the track */

/*
 * The same `<ul>` WooCommerce printed, read sideways.
 *
 * `is-flex-container columns-5` is Woo's own class on it and it is left alone —
 * overriding `display` here would fight a rule that already says flex. What
 * changes is that the line stops wrapping and starts scrolling.
 */
.coccone-related ul.wc-block-product-template.is-flex-container {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0 0 0.25rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

/* The bar is the arrows' job on a desktop and the swipe's on a phone. */
.coccone-related ul.wc-block-product-template.is-flex-container::-webkit-scrollbar {
	display: none;
}

/*
 * Cards end level, and no name is cut to do it.
 *
 * "Quilted Leather Camera Bag with Gold Chain" takes three lines where "Orange
 * Leather Hobo Bag" takes one, so the prices sat at three different heights
 * across the row.
 *
 * The first attempt clamped the title to two lines. It did not hold: the rule
 * was the only one on the page setting `display` on that heading, said
 * `-webkit-box`, and the element still computed `flow-root` — something inside
 * one of WooCommerce's container queries, which a plain walk of `cssRules` does
 * not enumerate. Chasing it would have bought a truncated product name anyway.
 *
 * So the card is a column and the price is pushed to the bottom of it. The cards
 * are already the same height — they are stretched flex items in the track — so
 * the prices line up whatever the titles do, and every name is readable.
 */
.coccone-related ul.wc-block-product-template.is-flex-container.is-flex-container > li {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	width: clamp(11.5rem, 23%, 17rem);
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.coccone-related ul.wc-block-product-template.is-flex-container.is-flex-container > li > *:has(.wc-block-components-product-price) {
	margin-top: auto;
	padding-top: 0.35rem;
}

.coccone-related ul.wc-block-product-template.is-flex-container.is-flex-container > li h3.wp-block-post-title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.3;
}

.coccone-related ul.wc-block-product-template.is-flex-container.is-flex-container > li h3 a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.coccone-related ul.wc-block-product-template.is-flex-container.is-flex-container > li h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.coccone-related ul.wc-block-product-template.is-flex-container > li .wc-block-components-product-price {
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast-soft);
}

.coccone-related ul.wc-block-product-template.is-flex-container > li img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--wp--preset--color--base-alt);
}

/*
 * No Add to cart in this row.
 *
 * It is a row for looking, at the end of a page whose whole right column was the
 * decision to buy. A second buy button four cards wide competes with that one,
 * and a card here has no colour chosen yet.
 */
.coccone-related ul.wc-block-product-template.is-flex-container > li .wc-block-components-product-button {
	display: none;
}

/* ------------------------------------------------------------------ phones */

@media (max-width: 600px) {
	.coccone-related ul.wc-block-product-template.is-flex-container.is-flex-container > li {
		width: 62vw;
	}

	.coccone-related__head {
		align-items: flex-start;
	}
}

/* ---------------------------------------------------------------------------
   Quick order: why the button will not press
   ---------------------------------------------------------------------------
   On a variable product with no colour chosen, the submit is disabled. The
   message explaining that was only ever shown on click — and a disabled button
   does not fire one, so the message could never appear and the reader met a dead
   button with no reason beside it.

   It sits on its own line under the two buttons rather than between them: the
   submit is `flex: 1 1 auto` and the sentence is about 140px, so putting the
   three in a row squeezes the button people are meant to press.
   --------------------------------------------------------------------------- */

.coccone-quick__actions {
	flex-wrap: wrap;
}

.coccone-quick__need {
	display: flex;
	flex: 1 0 100%;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--wp--preset--color--accent-deep);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.coccone-quick__need[hidden] {
	display: none;
}

.coccone-quick__need .coccone-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* ---------------------------------------------------------------------------
   Reviews
   ---------------------------------------------------------------------------
   The one part of the product page still wearing the browser's own controls.
   Measured before:

     name and email .... 237 x 22px, 13.3px type, a 2px grey system border
     the review box .... 670 x 100px, 13.3px
     the submit ........ 114 x 38px, 12px
     labels ............ inline, so "Name *" sat against the edge of its field

   Every other field on this site is 48px with a small-caps label above it and a
   1px rule in the theme's line colour. This makes the reviews agree with them.
   --------------------------------------------------------------------------- */

body.single-product #reviews {
	max-width: 40rem;
}

/* ---------------------------------------------------------------- the list */

body.single-product #reviews .woocommerce-Reviews-title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.25;
}

body.single-product #reviews .woocommerce-noreviews {
	margin: 0 0 var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--contrast-soft);
}

body.single-product #reviews ol.commentlist {
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: 0;
	list-style: none;
}

body.single-product #reviews #comments ol.commentlist li {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0 0 var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

body.single-product #reviews #comments ol.commentlist li:last-child {
	border-bottom: 0;
}

/*
 * The avatar and the text, side by side — as a flex row, not as a float.
 *
 * WooCommerce positions the avatar **absolutely** inside `.comment_container`
 * and leaves room for it with padding on `.comment-text`. Zeroing that padding —
 * which the rule below this one did, to get rid of the box drawn around a review
 * — took the room away and left the avatar sitting on top of the words. It looked
 * like the float had failed; the float was never in play, because an absolutely
 * positioned element's `float` computes to `none` whatever the stylesheet says.
 *
 * A flex row needs no padding to reserve, no number to keep in step with Woo's,
 * and behaves the same whether the review is published or still awaiting
 * approval.
 */
body.single-product #reviews #comments ol.commentlist li .comment_container {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

body.single-product #reviews #comments ol.commentlist li img.avatar {
	position: static;
	flex: 0 0 auto;
	float: none;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--base-alt);
	border: 0;
	border-radius: 50%;
}

/*
 * Two IDs, because Woo's rule has two.
 *
 * `.woocommerce #reviews #comments ol.commentlist li .comment-text` draws the
 * box around a review, and it is (2,3,2). Naming the body and one ID was
 * (1,2,2) and lost on the ID count alone, so the framed rectangle stayed. This
 * matches its weight and wins on order.
 */
body.single-product #reviews #comments ol.commentlist li .comment-text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 0;
}

body.single-product #reviews #comments ol.commentlist li .comment-text .meta {
	margin: 0 0 0.35rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--contrast-soft);
}

body.single-product #reviews #comments ol.commentlist li .comment-text .meta strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* "verified owner", which WooCommerce prints beside the name when it applies. */
body.single-product #reviews .woocommerce-review__verified {
	color: var(--wp--preset--color--accent-deep);
	font-style: normal;
}

body.single-product #reviews #comments ol.commentlist li .comment-text p {
	margin: 0 0 0.5rem;
	line-height: 1.65;
}

/* --------------------------------------------------------------- the form */

body.single-product #reviews .comment-reply-title {
	display: block;
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 400;
}

body.single-product #reviews .comment-notes {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--contrast-soft);
}

body.single-product #reviews .comment-form label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

body.single-product #reviews .comment-form .required {
	color: var(--wp--preset--color--accent-deep);
	border: 0;
}

body.single-product #reviews .comment-form p {
	margin: 0 0 var(--wp--preset--spacing--30);
}

/*
 * Name and email share a row where there is width for it, and stack below 600px.
 * They are two short fields; on one line each they made the form twice as tall
 * as it needed to be.
 */
@media (min-width: 601px) {
	body.single-product #reviews .comment-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--wp--preset--spacing--30);
	}

	body.single-product #reviews .comment-form > *:not(.comment-form-author):not(.comment-form-email) {
		grid-column: 1 / -1;
	}
}

body.single-product #reviews .comment-form input[type="text"],
body.single-product #reviews .comment-form input[type="email"],
body.single-product #reviews .comment-form input[type="url"],
body.single-product #reviews .comment-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0 0.9rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	transition: border-color 0.2s ease;
}

body.single-product #reviews .comment-form input[type="text"],
body.single-product #reviews .comment-form input[type="email"],
body.single-product #reviews .comment-form input[type="url"] {
	height: 48px;
}

body.single-product #reviews .comment-form textarea {
	min-height: 9rem;
	padding: 0.8rem 0.9rem;
	line-height: 1.6;
	resize: vertical;
}

body.single-product #reviews .comment-form input:focus,
body.single-product #reviews .comment-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

/* The "save my name" line is a checkbox and its sentence, not a field. */
body.single-product #reviews .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
}

body.single-product #reviews .comment-form-cookies-consent input {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin: 0.15rem 0 0;
	accent-color: var(--wp--preset--color--accent-deep);
}

body.single-product #reviews .comment-form-cookies-consent label {
	margin: 0;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

body.single-product #reviews .form-submit input[type="submit"] {
	min-height: 3rem;
	padding: 0 2rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 0;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}

body.single-product #reviews .form-submit input[type="submit"]:hover {
	background: var(--wp--preset--color--accent-deep);
}

/* --------------------------------------------------------------- the stars */

/*
 * WooCommerce draws the rating control as five links in its own icon font, with
 * the chosen value written into a select that is hidden. The behaviour is
 * already right — hover previews, click chooses — so nothing here changes what
 * it does; it changes how big it is and what colour it goes.
 */
body.single-product #reviews .comment-form-rating {
	margin-bottom: var(--wp--preset--spacing--40);
}

body.single-product #reviews p.stars {
	margin: 0;
}

body.single-product #reviews p.stars a {
	margin-right: 0.15rem;
	color: var(--wp--preset--color--line);
	font-size: 1.5rem;
	transition: color 0.15s ease;
}

body.single-product #reviews p.stars:hover a,
body.single-product #reviews p.stars.selected a.active,
body.single-product #reviews p.stars.selected a:not(.active) {
	color: var(--wp--preset--color--accent);
}

/* Past the one being pointed at, the stars stay unlit. */
body.single-product #reviews p.stars a:hover ~ a,
body.single-product #reviews p.stars.selected a.active ~ a {
	color: var(--wp--preset--color--line);
}

/* The rating already given, shown above a review in the list. */
body.single-product #reviews .star-rating {
	color: var(--wp--preset--color--accent);
	font-size: 0.875rem;
}

/* The reason the SUBMIT will not press — see inc/reviews.php. */
body.single-product #reviews .coccone-review__need {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--accent-deep);
	font-size: 0.8125rem;
	line-height: 1.4;
}

body.single-product #reviews .coccone-review__need[hidden] {
	display: none;
}

body.single-product #reviews .coccone-review__need .coccone-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* ---------------------------------------------------------------------------
   The colours a bag comes in, on its card
   ---------------------------------------------------------------------------
   Scanning the grid gave no clue that the camera bag exists in seven colours and
   the duffel in one. Every card looked like a single object.

   Placed after WooCommerce's card link has closed — the image, title and price
   are all inside one anchor, and these are links of their own.
   --------------------------------------------------------------------------- */

.coccone-loop-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin: 0.55rem 0 0;
	padding: 0;
	list-style: none;
}

.coccone-loop-swatches li {
	margin: 0;
	padding: 0;
	line-height: 1;
}

.coccone-loop-swatches a {
	display: block;
	padding: 2px;
	border: 1px solid transparent;
	border-radius: 50%;
	transition: border-color 0.15s ease;
}

.coccone-loop-swatches a:hover,
.coccone-loop-swatches a:focus-visible {
	border-color: var(--wp--preset--color--contrast);
	outline: none;
}

.coccone-loop-swatch__ink {
	display: block;
	width: 13px;
	height: 13px;
	background: var(--wp--preset--color--base-alt);
	border: 1px solid rgba(42, 23, 16, 0.14);
	border-radius: 50%;
}

.coccone-loop-swatches__more {
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
   The shop filter
   ---------------------------------------------------------------------------
   Three rows of links above the grid: shape, colour, price. Every one of them is
   a URL, so the browser's back button, a bookmark and a shared link all work
   without a line of script.
   --------------------------------------------------------------------------- */

.coccone-filter {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0 0 var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.coccone-filter__row {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: 0.7rem;
}

.coccone-filter__row:last-of-type {
	margin-bottom: 0;
}

/* The label sits in a fixed column so the three rows line up with each other. */
.coccone-filter__label {
	flex: 0 0 4.5rem;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 2;
}

.coccone-filter__set {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.coccone-filter__set li {
	margin: 0;
	padding: 0;
}

.coccone-filter__pill {
	display: block;
	padding: 0.32rem 0.8rem;
	color: var(--wp--preset--color--contrast);
	background: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: 0.75rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.coccone-filter__pill:hover {
	border-color: var(--wp--preset--color--contrast);
}

.coccone-filter__pill.is-on {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border-color: var(--wp--preset--color--contrast);
}

.coccone-filter__pill--small {
	padding: 0.22rem 0.65rem;
	font-size: 0.6875rem;
}

/* The second row is the colourways inside a chosen family, so it is quieter. */
.coccone-filter__row--sub {
	margin-top: -0.3rem;
}

/* ------------------------------------------------------------- the colours */

.coccone-filter__dot {
	display: block;
	padding: 3px;
	border: 1px solid transparent;
	border-radius: 50%;
	transition: border-color 0.15s ease;
}

.coccone-filter__dot:hover,
.coccone-filter__dot:focus-visible {
	border-color: var(--wp--preset--color--contrast-soft);
	outline: none;
}

.coccone-filter__dot.is-on {
	border-color: var(--wp--preset--color--contrast);
}

.coccone-filter__ink {
	display: block;
	width: 17px;
	height: 17px;
	border: 1px solid rgba(42, 23, 16, 0.16);
	border-radius: 50%;
}

.coccone-filter__clear {
	margin: 0.9rem 0 0;
	font-size: 0.75rem;
}

.coccone-filter__clear a {
	color: var(--wp--preset--color--accent-deep);
	text-underline-offset: 0.25em;
}

.coccone-shop__none {
	margin: var(--wp--preset--spacing--50) 0;
	color: var(--wp--preset--color--contrast-soft);
}

/* ------------------------------------------------------- the sorting select */

/*
 * WooCommerce's ordering control, which was a 206x38 system dropdown in 13px
 * type sitting beside a result count in the theme's own serif.
 */
.woocommerce .coccone-shop .woocommerce-ordering select {
	padding: 0.45rem 2rem 0.45rem 0.8rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	cursor: pointer;
	appearance: none;
	background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" stroke="%232a1710" stroke-width="1.2"><path d="m3 4.5 3 3 3-3"/></svg>' );
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
	background-size: 12px 12px;
}

.woocommerce .coccone-shop .woocommerce-result-count {
	margin: 0;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.75rem;
	line-height: 2.2;
}

@media (max-width: 600px) {
	.coccone-filter__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}

	.coccone-filter__label {
		flex: none;
		line-height: 1.4;
	}
}


/*
 * Waiting to be approved.
 *
 * WooCommerce's own class is `woocommerce-review__awaiting-approval`, printed by
 * `review-meta.php` in place of the author's name — not `comment-awaiting-
 * moderation`, which is WordPress's and appears in the body. Both are named
 * here because both can turn up.
 *
 * The first review from any email address is held — `comment_previously_approved`
 * is on — and WordPress says so with a line inside the review itself. Left
 * unstyled it reads as part of what the reviewer wrote.
 */
body.single-product #reviews .woocommerce-review__awaiting-approval,
body.single-product #reviews .comment-awaiting-moderation {
	display: block;
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--accent-deep);
	font-size: 0.75rem;
	font-style: normal;
	letter-spacing: 0.02em;
}

/* The rating sits at the end of the meta line, not floated over the text. */
body.single-product #reviews #comments ol.commentlist li .comment-text .star-rating {
	float: right;
	margin: 0 0 0.2rem var(--wp--preset--spacing--30);
}
/* ---------------------------------------------------------------------------
   The rating line under a product title
   ---------------------------------------------------------------------------
   Five large black stars and "(1 customer review)" underlined, in a column where
   everything else is quiet. The stars were the loudest thing between the title
   and the price.
   --------------------------------------------------------------------------- */

body.single-product .wp-block-woocommerce-product-rating {
	margin: 0.35rem 0 var(--wp--preset--spacing--30);
}

body.single-product .wc-block-components-product-rating__container {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

body.single-product .wc-block-components-product-rating__stars {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--accent);
}

body.single-product .coccone-rating__score {
	color: var(--wp--preset--color--contrast);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

body.single-product .coccone-rating__of {
	color: var(--wp--preset--color--contrast-soft);
	font-weight: 400;
}

body.single-product .wc-block-components-product-rating__container a {
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.8125rem;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
}

body.single-product .wc-block-components-product-rating__container a:hover {
	color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------------------
   Order received
   ---------------------------------------------------------------------------
   The last page of the shop and the only one every buyer sees. It arrived as
   WooCommerce's block confirmation with nothing done to it: the five facts about
   the order in a bare list, a system password box in the create-account panel, a
   default table, two unframed address columns — and the page stopping dead
   against the dark band.

   Note this page has **two** states. Straight after checkout it shows everything
   below. Come back to the same URL in a later session and WooCommerce asks the
   visitor to confirm their email first — a different, much shorter page, which is
   styled at the end of this file.
   --------------------------------------------------------------------------- */

body.woocommerce-order-received main.wp-block-group,
body.woocommerce-checkout main.wp-block-group {
	padding-bottom: var(--wp--preset--spacing--70);
}

/* ------------------------------------------------------------- the heading */

.wp-block-woocommerce-order-confirmation-status h1 {
	margin-bottom: var(--wp--preset--spacing--20);
}

.wp-block-woocommerce-order-confirmation-status p {
	margin: 0 0 var(--wp--preset--spacing--50);
	max-width: 46ch;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 1.0625rem;
}

/* ------------------------------------------------- the five facts, as a row */

/*
 * Order # · Date · Total · Email · Payment.
 *
 * A bare list, so the label and the value ran together and the five items sat at
 * whatever widths their text happened to be. They are the summary of the whole
 * transaction and want to read as a row of small facts: the label quiet and
 * small-caps above, the value under it.
 */
/*
 * Two classes and an element, because Woo's rule is two classes and an element.
 *
 * `.wc-block-order-confirmation-summary ul` in `order-confirmation-summary.css`
 * is (0,2,1) and sets both `padding: 0` and `gap: 16px`. The bare class here was
 * (0,1,0), so only the background and the flex row ever landed: the panel had no
 * padding at all — the last fact, "Credit / Debit Card", ended exactly on the
 * right edge of the beige — and the gap was Woo's 16px, not the theme's.
 */
.wc-block-order-confirmation-summary ul.wc-block-order-confirmation-summary-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40);
	list-style: none;
	background: var(--wp--preset--color--base-alt);
	border-radius: 2px;
}

.wc-block-order-confirmation-summary-list-item {
	margin: 0;
	padding: 0;
}

/*
 * `__key`, which is what WooCommerce actually calls it.
 *
 * The first pass styled `__label` — a reasonable guess and the wrong one, so the
 * five labels stayed inline with their values at body size. Read off the
 * rendered markup: `<span class="…__key">Order #:</span>`.
 */
.wc-block-order-confirmation-summary-list-item__key {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.wc-block-order-confirmation-summary-list-item__value {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
	line-height: 1.4;
	word-break: break-word;
}

/* --------------------------------------------------- create an account box */

/*
 * White, not grey.
 *
 * Woo washes this panel with `rgba(0, 0, 0, 0.04)`, which on a page whose other
 * two panels are the theme's beige read as a third, colder colour sitting between
 * them. It keeps the 1px rule instead: three panels, two beige and one outlined,
 * rather than beige / grey / beige.
 */
.wp-block-woocommerce-order-confirmation-create-account {
	gap: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
}

.wc-block-order-confirmation-create-account-content h3 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 400;
}

.wc-block-order-confirmation-create-account-content ul {
	margin: 0;
	padding-left: 1.1rem;
}

.wc-block-order-confirmation-create-account-content li {
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.9375rem;
}

/*
 * The label goes above the field.
 *
 * WooCommerce writes the input *first* and the label after it, because on the
 * checkout that pair is a floating label: the label is positioned absolutely
 * over the empty field and rises when it is filled. The stylesheet that does the
 * positioning is a checkout asset and is not enqueued here, so the label fell
 * back to static and printed *below* the input — reading as a stray word between
 * the field and the strength bar.
 *
 * Ordering the wrapper as a column and pulling the label to the front gives the
 * same layout as every other field on the site, and does not depend on a
 * stylesheet this page may or may not load.
 */
.wc-block-order-confirmation-create-account-form .wc-block-components-text-input {
	display: flex;
	flex-direction: column;
}

.wc-block-order-confirmation-create-account-form .wc-block-components-text-input label {
	order: -1;
	margin-bottom: 0.4rem;
}

.wc-block-order-confirmation-create-account-form label,
.wc-block-order-confirmation-create-account-form .wc-block-components-text-input label {
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wc-block-order-confirmation-create-account-form input[type="password"],
.wc-block-order-confirmation-create-account-form input[type="text"],
.wc-block-order-confirmation-create-account-form input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 0.9rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
}

.wc-block-order-confirmation-create-account-form input:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

.wc-block-order-confirmation-create-account-form button,
.wc-block-order-confirmation-create-account-form .wp-element-button {
	width: 100%;
	min-height: 3rem;
	margin-top: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 0;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}

.wc-block-order-confirmation-create-account-form button:hover {
	background: var(--wp--preset--color--accent-deep);
}

/*
 * The strength meter, which was showing a pink bar under an empty field.
 *
 * WooCommerce already writes `class="… hidden"` on it while there is nothing to
 * measure — but the rule that acts on `hidden` is in the same checkout stylesheet
 * that carries the floating label, and this page does not enqueue it. So the
 * "weak" meter sat there from the moment the page loaded, reading as a warning
 * about a password nobody had typed yet.
 */
.wc-block-order-confirmation-create-account-form .wc-block-components-password-strength.hidden {
	display: none;
}

.wc-block-order-confirmation-create-account-form .wc-block-components-password-strength {
	margin-top: 0.5rem;
}

.wc-block-order-confirmation-create-account-form .wc-block-components-password-strength__meter {
	display: block;
	width: 100%;
	height: 4px;
	border-radius: 2px;
}

.wc-block-order-confirmation-create-account-form .wc-block-components-validation-error {
	font-size: 0.75rem;
}

.wc-block-order-confirmation-create-account-form-wrapper p:last-child {
	margin-bottom: 0;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.75rem;
	line-height: 1.5;
}

/* ---------------------------------------------------------- the order table */

.wp-block-woocommerce-order-confirmation-totals-wrapper > h2,
.wp-block-woocommerce-order-confirmation-shipping-wrapper > h2,
.wp-block-woocommerce-order-confirmation-billing-wrapper > h2,
.wp-block-woocommerce-order-confirmation-shipping-wrapper > h3,
.wp-block-woocommerce-order-confirmation-billing-wrapper > h3 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 400;
}

.wp-block-woocommerce-order-confirmation-totals-wrapper {
	margin-bottom: var(--wp--preset--spacing--60);
}

.wc-block-order-confirmation-totals__table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
}

.wc-block-order-confirmation-totals__table th,
.wc-block-order-confirmation-totals__table td {
	padding: var(--wp--preset--spacing--30);
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: 0.9375rem;
	text-align: left;
	vertical-align: top;
}

.wc-block-order-confirmation-totals__table thead th {
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.wc-block-order-confirmation-totals__table td:last-child,
.wc-block-order-confirmation-totals__table th:last-child {
	text-align: right;
	white-space: nowrap;
}

.wc-block-order-confirmation-totals__table tfoot tr:last-child th,
.wc-block-order-confirmation-totals__table tfoot tr:last-child td {
	border-bottom: 0;
	font-weight: 600;
}

.wc-block-order-confirmation-totals__table a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wc-block-order-confirmation-totals__table a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* --------------------------------------------------------- the two addresses */

/*
 * `box-sizing`, or the card overhangs its own column.
 *
 * `height: 100%` is what makes the two beige cards finish level with each other
 * whichever address is longer. Under the default `content-box` the 24px of
 * padding is *added* to that 100%, so each card ended 48px below the column it
 * sits in — eating 48px of the space between the page and the dark band, and
 * leaving 16px of it on a phone where the whole gap is 64px to begin with.
 */
.wp-block-woocommerce-order-confirmation-shipping-wrapper,
.wp-block-woocommerce-order-confirmation-billing-wrapper {
	box-sizing: border-box;
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-alt);
	border-radius: 2px;
}

/*
 * One frame around an address, not two.
 *
 * `.wc-block-order-confirmation-shipping-address` carries its own 1px rule and
 * 16px of padding, which inside the beige card above drew a second rectangle
 * around the same four lines.
 */
.wc-block-order-confirmation-shipping-address,
.wc-block-order-confirmation-billing-address,
.wc-block-order-confirmation-order-note {
	padding: 0;
	border: 0;
}

.wp-block-woocommerce-order-confirmation-shipping-wrapper address,
.wp-block-woocommerce-order-confirmation-billing-wrapper address {
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* --------------------------------------------- coming back to the same page */

/*
 * The other state: a later visit, where WooCommerce asks for the email address
 * on the order before it will show any of it.
 */
.woocommerce-verify-email {
	max-width: 26rem;
	margin-top: var(--wp--preset--spacing--40);
}

/*
 * Woo marks the email field `form-row-first`, which is 50% of the row — so on a
 * wide screen the input came out 208px inside a 416px form while the button
 * under it was 298px. Nothing here is paired with anything, so each row is full
 * width and the two line up.
 */
.woocommerce-verify-email .form-row {
	width: 100%;
	float: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
}

.woocommerce-verify-email label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/*
 * An ID and two classes, because Woo's rule is an ID and two classes.
 *
 * `.wc-block-order-confirmation-status-description .woocommerce-verify-email
 * #verify-email { width: 50% }` is (1,2,0). The bare class here was (0,2,0), so
 * the field stayed at half the form — 208px under a 298px button.
 */
.wc-block-order-confirmation-status-description .woocommerce-verify-email input#verify-email,
.woocommerce-verify-email input.input-text {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 0.9rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
}

.woocommerce-verify-email input.button {
	width: auto;
	min-height: 3rem;
	padding: 0 2rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 0;
	border-radius: 2px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ------------------------------------------------------------------ phones */

@media (max-width: 780px) {
	.wc-block-order-confirmation-summary ul.wc-block-order-confirmation-summary-list {
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		padding: var(--wp--preset--spacing--30);
	}

	/*
	 * The label stays above its value on a phone too.
	 *
	 * Woo's own `order-confirmation-summary.css` puts it back inline below 600px
	 * with `.wc-block-order-confirmation-summary ul li > .…__key`, which is three
	 * classes and an element to the bare class here — so the five labels slid
	 * back onto their values at body size on exactly the width where the page is
	 * hardest to read. Same chain, so this wins on order.
	 */
	.wc-block-order-confirmation-summary ul li > .wc-block-order-confirmation-summary-list-item__key {
		display: block;
	}

	/*
	 * And the total column stops refusing to wrap.
	 *
	 * `white-space: nowrap` keeps an amount on one line, which is right on a wide
	 * screen and is what pushed the table 4px past the edge of a 375px one.
	 */
	.wc-block-order-confirmation-totals__table td:last-child,
	.wc-block-order-confirmation-totals__table th:last-child {
		white-space: normal;
	}

	.wc-block-order-confirmation-totals__table {
		table-layout: fixed;
		width: 100%;
	}

	.wc-block-order-confirmation-totals__table td,
	.wc-block-order-confirmation-totals__table th {
		word-break: break-word;
	}

	.wp-block-woocommerce-order-confirmation-create-account {
		padding: var(--wp--preset--spacing--40);
	}

	.wc-block-order-confirmation-totals__table th,
	.wc-block-order-confirmation-totals__table td {
		padding: 0.7rem 0.6rem;
		font-size: 0.875rem;
	}
}

/* ---------------------------------------------------------------------------
   Pay for order
   ---------------------------------------------------------------------------
   The page a link in an email leads to. It had no top at all: WooCommerce's
   `checkout/form-pay.php` opens with `<table class="shop_table">`, and the
   checkout page carries no title block, so the page began at a row of column
   headings reading PRODUCT / QTY / TOTALS with nothing above them — no heading
   saying what the page was, and the order's own number nowhere on it.

   It also had no lid. `#order_review` is the checkout's order panel, and it is
   drawn as the *bottom* of a box: `border-top: 0` and square top corners,
   because on the checkout `#order_review_heading` supplies the rest. There is no
   heading on this page, so the panel opened with a cut edge.

   `.coccone-pay__head` is that heading's counterpart here — same beige, same
   rule, same radius — so the two read as one box, exactly as they do on the
   checkout.

   The same head is used by the email-verification page, which WooCommerce puts
   in front of both this page and order-received once a guest order is more than
   ten minutes old. That is the state a link in an email actually lands on, and
   it had no heading either. So none of these rules are scoped to
   `body.woocommerce-order-pay` — the classes exist on those pages and nowhere
   else.
   --------------------------------------------------------------------------- */

.coccone-pay__head {
	box-sizing: border-box;
	margin: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-bottom: 0;
	border-radius: 2px 2px 0 0;
}

.coccone-pay__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.15;
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------- the three facts */

/*
 * Number, date, total — the same three the order-received page shows, in the
 * same treatment: the label quiet and small-caps above, the value under it. A
 * person who has both emails open should not have to work out that they are
 * looking at the same order twice.
 */
.coccone-pay__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0;
	list-style: none;
}

.coccone-pay__facts li {
	margin: 0;
	padding: 0;
}

.coccone-pay__key {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.coccone-pay__value {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.coccone-pay__value .amount {
	font-weight: 600;
}

/* ------------------------------------------------------------------ phones */

@media (max-width: 780px) {
	.coccone-pay__head {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	.coccone-pay__title {
		font-size: 1.375rem;
		margin-bottom: var(--wp--preset--spacing--30);
	}

	.coccone-pay__facts {
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}
}

/* ------------------------------------------- verify your email, then pay */

/*
 * The body of the box, under the same lid. WooCommerce's own field and button
 * inside it are already dressed by the rules in the order-confirmation section,
 * which name `.woocommerce-verify-email` and were never scoped to that page.
 */
.coccone-verify {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 0;
	border-radius: 0 0 2px 2px;
}

.coccone-verify > form {
	margin: 0;
}

.coccone-verify p {
	max-width: 52ch;
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.coccone-verify .form-row {
	max-width: 26rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
}

@media (max-width: 780px) {
	.coccone-verify {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	}
}