/*
 * Neutral WooCommerce layer. Replaces WooCommerce's default layout stylesheets.
 * The Cart and Checkout blocks keep their own styles and take colors from
 * theme.json. Target .wc-block-* classes here only for design overrides.
 */

/* Product grid and card: the standing carton on a light tile, the words below on the page,
   and a round Add filled in cocoa that turns honey on hover and once added (approved 2026-11-12, "Honey wash").
   Four columns on the shared grid gap; two on phones. */

ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(var(--space-6), 3.4vw, var(--space-7)) var(--grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 719px) {
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

.product-card__media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--surface-ring);
	overflow: hidden;
}

.product-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.product-card:hover .product-card__media img,
.product-card:focus-within .product-card__media img {
	transform: scale(1.04);
}

.product-card:target .product-card__media {
	box-shadow: 0 0 0 3px var(--color-accent);
}

.product-card__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--space-3);
	padding: var(--space-3) var(--space-0) 0;
}

.product-card__body > :not(.product-card__form):not(.product-card__view) {
	grid-column: 1;
}

.product-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-variation-settings: "opsz" 24;
	font-weight: 620;
	font-size: clamp(17px, 1.5vw, 21px);
	letter-spacing: -0.008em;
	line-height: 1.14;
	text-wrap: balance;
}

.product-card__link {
	text-decoration: none;
}

/* The whole card is the link to the product; the Add button sits above it */
.product-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-md);
}

.product-card__link:focus-visible {
	outline: none;
}

.product-card__link:focus-visible::after {
	outline: 3px solid var(--color-focus);
	outline-offset: 4px;
}

.product-card:hover .product-card__link {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.product-card .product-claims {
	margin-top: var(--space-1);
	color: var(--color-soft);
	font-size: 13.5px;
	line-height: 1.35;
}

.product-card .product-claims__list {
	display: inline;
}

.product-card .product-claims__item {
	display: inline;
}

.product-card .product-claims__item + .product-claims__item::before {
	content: " · ";
}

.product-card .product-claims__note {
	margin: 0;
	font-size: 12.5px;
}

.product-card__price {
	margin: var(--space-2) 0 0;
	font-size: 16px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.product-card__form,
.product-card__view {
	position: relative;
	z-index: 2;
	grid-column: 2;
	grid-row: 1 / span 4;
	align-self: end;
	margin: 0;
}

.product-card__add {
	position: relative;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-accent-contrast);
	font: 600 15px/1 var(--font-body);
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.product-card__add:hover,
.product-card__add.is-added {
	background: var(--color-highlight);
	color: var(--color-text);
}

.product-card__add[aria-busy="true"] {
	opacity: 0.6;
	cursor: wait;
}

.product-card__icon {
	grid-area: 1 / 1;
	display: block;
}

.product-card__icon--done,
.product-card__add.is-added .product-card__icon--add,
.product-card__add-label {
	display: none;
}

.product-card__add.is-added .product-card__icon--done {
	display: block;
}

.product-card__view {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	color: var(--color-accent);
	font-weight: 600;
}

@media (max-width: 719px) {
	.product-card__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.product-card__form,
	.product-card__view {
		grid-column: 1;
		grid-row: auto;
		margin-top: var(--space-3);
	}

	.product-card__add {
		display: flex;
		gap: var(--space-2);
		justify-content: center;
		width: 100%;
		height: var(--tap-target);
		border-radius: var(--radius-pill);
	}

	.product-card__icon--add {
		display: none;
	}

	.product-card__add-label {
		display: inline;
	}

	.product-card__add.is-added .product-card__add-label {
		display: none;
	}
}

/* Shared product details */

.product-claims {
	margin-top: var(--space-1);
	color: var(--color-soft);
	font-size: 13.5px;
	line-height: 1.35;
}

.product-card .product-claims__list {
	display: inline;
}

.product-card .product-claims__item {
	display: inline;
}

.product-card .product-claims__item + .product-claims__item::before {
	content: " · ";
}

.product-card .product-claims__note {
	margin: 0;
	font-size: 12.5px;
}

.product-card__price {
	margin: var(--space-2) 0 0;
	font-size: 16px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.product-card__form,
.product-card__view {
	position: relative;
	z-index: 2;
	grid-column: 2;
	grid-row: 1 / span 4;
	align-self: end;
	margin: 0;
}

.product-card__add {
	position: relative;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-accent-contrast);
	font: 600 15px/1 var(--font-body);
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.product-card__add:hover,
.product-card__add.is-added {
	background: var(--color-highlight);
	color: var(--color-text);
}

.product-card__add[aria-busy="true"] {
	opacity: 0.6;
	cursor: wait;
}

.product-card__icon {
	grid-area: 1 / 1;
	display: block;
}

.product-card__icon--done,
.product-card__add.is-added .product-card__icon--add,
.product-card__add-label {
	display: none;
}

.product-card__add.is-added .product-card__icon--done {
	display: block;
}

.product-card__view {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	color: var(--color-accent);
	font-weight: 600;
}

@media (max-width: 719px) {
	.product-card__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.product-card__form,
	.product-card__view {
		grid-column: 1;
		grid-row: auto;
		margin-top: var(--space-3);
	}

	.product-card__add {
		display: flex;
		gap: var(--space-2);
		justify-content: center;
		width: 100%;
		height: var(--tap-target);
		border-radius: var(--radius-pill);
	}

	.product-card__icon--add {
		display: none;
	}

	.product-card__add-label {
		display: inline;
	}

	.product-card__add.is-added .product-card__add-label {
		display: none;
	}
}

/* Shared product details */

.product-net-weight {
	color: var(--color-muted);
	font-size: var(--text-sm);
}

.product-net-weight__label::after {
	content: ":";
}

.product-claims {
	font-size: var(--text-sm);
}

.product-claims__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-claims__note {
	margin: var(--space-1) 0 0;
	color: var(--color-muted);
}

/* Single product: assets/css/product.css. Cart drawer contents: assets/css/cart.css. */

/* Breadcrumb and notices */

.woocommerce-breadcrumb {
	margin-bottom: var(--space-4);
	color: var(--color-muted);
	font-size: var(--text-sm);
}

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flow-root;
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + var(--space-1));
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	/* The coloured edge is a shadow, so the rounded corners clip it cleanly */
	box-shadow: inset 4px 0 0 var(--notice-color, var(--color-accent));
	list-style: none;
}

.woocommerce-message {
	--notice-color: var(--color-success);
}

.woocommerce-error {
	--notice-color: var(--color-error);
}

.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
}

/* Classic account forms */

.woocommerce .col2-set {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 720px) {
	.woocommerce .col2-set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce form .form-row {
	margin-block: 0 var(--space-4);
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: var(--space-1);
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	width: 100%;
	min-height: var(--tap-target);
	padding: var(--space-2) var(--space-3);
	border: var(--border);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: inherit;
}

.woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.woocommerce-MyAccount-navigation ul {
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

/* Mini-cart: the list reset only; the drawer's contents are styled in assets/css/cart.css */

.woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cart drawer */

.cart-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(var(--drawer-width), 100%);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--color-bg);
	color: var(--color-text);
	box-shadow: var(--shadow-drawer);
}

.cart-drawer::backdrop {
	background: var(--color-backdrop);
}

.cart-drawer__panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	height: 100%;
	padding: var(--space-4);
}

.cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.cart-drawer__title {
	margin: 0;
	font-size: var(--text-lg);
}

.cart-drawer__close {
	min-height: var(--tap-target);
	padding-inline: var(--space-3);
	border: var(--border);
	border-radius: var(--radius-pill);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.cart-drawer__status {
	margin: 0;
	color: var(--color-success);
}

.cart-drawer__status:empty {
	display: none;
}

.cart-drawer .widget_shopping_cart_content {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

/* Cart and Checkout blocks: corners on the site's scale (tokens.css).
   WooCommerce ships these at 4-8px; `body` lifts each rule over the block stylesheet,
   which can load after this one. Fields are sm, boxes md, anything pressed is a pill. */

body .wc-block-components-form .wc-block-components-text-input input[type],
body .wc-block-components-text-input input[type],
body .wc-block-components-textarea,
body .wc-blocks-components-select .wc-blocks-components-select__container,
body .wc-blocks-components-select .wc-blocks-components-select__select,
body .wc-block-components-address-card,
body .wc-block-components-address-autocomplete-suggestions,
body .wc-block-gateway-container .wc-block-gateway-input,
body .wc-block-components-notice-banner,
body .wc-block-components-shipping-rates-control__package--multiple,
body .wc-block-components-local-pickup-select--multiple,
body .wc-block-checkout__shipping-option .wc-block-components-shipping-rates-control__no-shipping-address-message,
body .wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-container,
body .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted,
body .wc-block-components-radio-control--highlight-checked::after,
body .wc-block-components-skeleton.wc-block-components-skeleton--checkout-payment,
body .wc-block-components-skeleton.wc-block-components-skeleton--checkout-shipping,
body .wc-block-order-confirmation-totals table,
body .wc-block-order-confirmation-order-note,
body .wc-block-order-confirmation-shipping-address,
body .wc-block-order-confirmation-billing-address,
body .wc-block-cart-item__image img,
body .wc-block-components-order-summary-item__image img {
	border-radius: var(--radius-sm);
}

body .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:first-child::after {
	border-top-left-radius: var(--radius-sm);
	border-top-right-radius: var(--radius-sm);
}

body .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:last-child::after {
	border-bottom-left-radius: var(--radius-sm);
	border-bottom-right-radius: var(--radius-sm);
}

body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
body .wc-block-components-skeleton__element,
body .wc-block-components-product-sale-badge {
	border-radius: var(--radius-xs);
}

body .wp-block-woocommerce-checkout-order-summary-block,
body .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill {
	border-radius: var(--radius-md);
}

/* The express box draws its outline in three pieces. WooCommerce makes the two top pieces
   3px tall, which caps their corner; they grow to the radius and sit that much higher above the body. */
body .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container {
	top: calc(-1 * var(--radius-md) - 1px);
}

body .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::before,
body .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::after {
	height: var(--radius-md);
}

body .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::before {
	border-radius: var(--radius-md) 0 0 0;
}

body .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::after {
	border-radius: 0 var(--radius-md) 0 0;
}

body .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content {
	margin-top: calc(var(--radius-md) + 2px);
	padding-top: var(--space-0);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}

body .wc-block-components-quantity-selector,
body .wc-block-components-express-payment .wc-block-components-express-payment__event-buttons > div,
body .wc-block-components-express-payment .wc-block-components-express-payment__event-buttons > li {
	border-radius: var(--radius-pill);
}