/*
 * Your Space Collective: shared WooCommerce styles (loaded site-wide).
 *
 * Notices can appear on any Brizy page: Brizy's WooCommerce compatibility injects them into
 * the header section. Brizy's .brz-reset-all also forces 19px / 30.4px type and link colours
 * onto everything inside the page, which beats WooCommerce's block styles. Where that happens
 * the rules below use !important. Keep them to the properties Brizy actually overrides.
 *
 * Palette: teal #2a6f6f (primary), olive #44473d (text, hover), sage #859570 (secondary),
 * oat #dfd5ca / #f4f0eb (surfaces).
 */

/* ------------------------------------------------------------------ Notices (classic) */

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	width: calc(100% - 32px);
	max-width: 1200px;
	margin: 20px auto !important;
	padding: 16px 20px 16px 56px !important;
	border: 0 !important;
	border-left: 4px solid #2a6f6f !important;
	border-radius: 12px;
	background: #f4f0eb !important;
	box-shadow: none;
	color: #44473d !important;
	font-family: "Brandon Grotesque", brandon-grotesque, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400;
	line-height: 1.5 !important;
	list-style: none;
	text-align: left;
}
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after {
	display: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	top: 50% !important;
	left: 20px !important;
	transform: translateY(-50%);
	font-size: 20px;
	line-height: 1;
	color: #2a6f6f !important;
}
.woocommerce-error {
	border-left-color: #a8483a !important;
}
.woocommerce-error::before {
	color: #a8483a !important;
}
.woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* WooCommerce focuses the notice for screen readers; that is not a keyboard focus ring. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
	outline: none;
}
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
	color: #2a6f6f !important;
	text-decoration: underline;
}
.woocommerce-error .button {
	order: 2;
	float: none !important;
	margin: 0 !important;
	padding: 10px 22px !important;
	font-size: 14px !important;
}

/* ------------------------------------------------------------------ Notices (blocks: cart, checkout) */

.wc-block-components-notice-banner {
	gap: 12px;
	padding: 16px 20px !important;
	border: 0 !important;
	border-left: 4px solid #2a6f6f !important;
	border-radius: 12px !important;
	background: #f4f0eb !important;
	color: #44473d !important;
	font-family: "Brandon Grotesque", brandon-grotesque, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
}
.wc-block-components-notice-banner > svg {
	background-color: #2a6f6f !important;
	fill: #fff !important;
}
.wc-block-components-notice-banner.is-error {
	border-left-color: #a8483a !important;
}
.wc-block-components-notice-banner.is-error > svg {
	background-color: #a8483a !important;
}
.wc-block-components-notice-banner.is-warning {
	border-left-color: #e3b448 !important;
}
.wc-block-components-notice-banner.is-warning > svg {
	background-color: #b8871c !important;
}
.wc-block-components-notice-banner a {
	color: #2a6f6f !important;
}

/* ------------------------------------------------------------------ Primary buttons (teal, solid) */

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-totals-coupon__button,
.wc-block-components-button.contained:not(.is-link),
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .woocommerce-form-login__submit,
.woocommerce .woocommerce-form-register__submit,
.woocommerce .woocommerce-Button,
.woocommerce .woocommerce-button,
.woocommerce button[name="save_account_details"],
.woocommerce button[name="save_address"],
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px !important;
	border: 2px solid #2a6f6f !important;
	border-radius: 100px !important;
	background: #2a6f6f !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: "Brandon Grotesque", brandon-grotesque, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	line-height: 1.2 !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase !important;
	cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s;
}
/* Block buttons nest the label (Place Order two levels deep), and Brizy styles each level. */
.wc-block-components-button:not(.is-link) .wc-block-components-button__text,
.wc-block-components-button:not(.is-link) .wc-block-components-button__text * {
	color: inherit !important;
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-totals-coupon__button:hover,
.wc-block-components-button.contained:not(.is-link):hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .woocommerce-form-login__submit:hover,
.woocommerce .woocommerce-form-register__submit:hover,
.woocommerce .woocommerce-Button:hover,
.woocommerce .woocommerce-button:hover,
.woocommerce button[name="save_account_details"]:hover,
.woocommerce button[name="save_address"]:hover,
.woocommerce #respond input#submit:hover {
	border-color: #44473d !important;
	background: #44473d !important;
	color: #fff !important;
}
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible,
.wc-block-components-button:not(.is-link):focus-visible,
.woocommerce .button:focus-visible,
.woocommerce-message .button:focus-visible,
.woocommerce-info .button:focus-visible,
.woocommerce-error .button:focus-visible {
	outline: 2px solid #44473d !important;
	outline-offset: 3px;
	box-shadow: none !important;
}
.wc-block-components-button:not(.is-link):disabled,
.wc-block-components-button:not(.is-link)[aria-disabled="true"],
.woocommerce .button:disabled,
.woocommerce .button.disabled {
	opacity: .5 !important;
	cursor: not-allowed;
}
.wc-block-components-button:not(.is-link):disabled:hover,
.woocommerce .button:disabled:hover,
.woocommerce .button.disabled:hover {
	border-color: #2a6f6f !important;
	background: #2a6f6f !important;
}

/* ------------------------------------------------------------------ Secondary buttons (sage outline) */

.woocommerce a.button:not(.alt):not(.woocommerce-button):not(.woocommerce-Button),
.woocommerce button.button:not(.alt):not(.woocommerce-button):not(.woocommerce-Button):not(.woocommerce-form-login__submit):not(.woocommerce-form-register__submit):not([name="save_account_details"]):not([name="save_address"]),
.woocommerce a.added_to_cart,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.wc-block-components-button.outlined:not(.is-link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 22px !important;
	border: 2px solid #859570 !important;
	border-radius: 100px !important;
	background: transparent !important;
	color: #6a7651 !important;
	font-family: "Brandon Grotesque", brandon-grotesque, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	transition: background-color .2s, border-color .2s, color .2s;
}
.woocommerce a.button:not(.alt):not(.woocommerce-button):not(.woocommerce-Button):hover,
.woocommerce button.button:not(.alt):not(.woocommerce-button):not(.woocommerce-Button):not(.woocommerce-form-login__submit):not(.woocommerce-form-register__submit):not([name="save_account_details"]):not([name="save_address"]):hover,
.woocommerce a.added_to_cart:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover,
.wc-block-components-button.outlined:not(.is-link):hover {
	border-color: #6a7651 !important;
	background: #6a7651 !important;
	color: #fff !important;
}

/* ------------------------------------------------------------------ Link-style buttons */

.wc-block-components-button.is-link,
.wc-block-components-checkout-return-to-cart-button,
.wc-block-components-totals-coupon-link,
.woocommerce .reset_variations {
	color: #2a6f6f !important;
	font-family: "Brandon Grotesque", brandon-grotesque, "Helvetica Neue", Arial, sans-serif !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.wc-block-components-button.is-link:hover,
.wc-block-components-checkout-return-to-cart-button:hover,
.wc-block-components-totals-coupon-link:hover,
.woocommerce .reset_variations:hover {
	color: #44473d !important;
}
/* Cart line "remove item" bin icon: olive, teal with a soft tint on hover.
   The SVG fills with currentColor, but Brizy gives the svg its own colour, so currentColor
   resolved to olive regardless of the button. Make the svg inherit the button's colour. */
.wc-block-cart-item__remove-link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 6px !important;
	border-radius: 100px !important;
	color: #44473d !important;
	text-decoration: none !important;
	transition: color .2s, background-color .2s;
}
.wc-block-cart-item__remove-link svg,
.wc-block-cart-item__remove-link svg * {
	color: inherit !important;
	fill: currentColor !important;
}
.wc-block-cart-item__remove-link:hover {
	background: rgba(42, 111, 111, .1) !important;
	color: #2a6f6f !important;
}
.wc-block-cart-item__remove-link:focus-visible {
	outline: 2px solid #2a6f6f !important;
	outline-offset: 1px;
}
/* Coupon toggle: a disclosure, not a link. */
.wc-block-components-panel__button {
	color: #44473d !important;
}
.wc-block-components-panel__button:hover {
	color: #2a6f6f !important;
}

/* ------------------------------------------------------------------ Cart quantity stepper */

.wc-block-components-quantity-selector {
	border-radius: 100px !important;
}
.wc-block-components-quantity-selector::after {
	border-radius: 100px !important;
	border-color: rgba(68, 71, 61, .3) !important;
}
.wc-block-components-quantity-selector__button {
	color: #44473d !important;
	font-size: 18px !important;
	line-height: 1 !important;
}
.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	color: #2a6f6f !important;
	background: rgba(42, 111, 111, .08) !important;
}
.wc-block-components-quantity-selector__button:first-of-type {
	border-radius: 100px 0 0 100px !important;
}
.wc-block-components-quantity-selector__button:last-of-type {
	border-radius: 0 100px 100px 0 !important;
}
.wc-block-components-quantity-selector__input {
	font-size: 16px !important;
	line-height: 1 !important;
	color: #44473d !important;
}

/* ------------------------------------------------------------------ Cart and checkout fields */

.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea {
	border-color: rgba(68, 71, 61, .35) !important;
	border-radius: 8px !important;
	color: #44473d !important;
	font-family: "Brandon Grotesque", brandon-grotesque, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 16px !important;
	line-height: 25px !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: #2a6f6f !important;
	box-shadow: 0 0 0 1px #2a6f6f !important;
	outline: none !important;
}
.wc-blocks-components-select .wc-blocks-components-select__container {
	border-radius: 8px !important;
}
/* Floating labels: Brizy's 19px / 30.4px inheritance makes them collide with the value. */
.wc-block-components-text-input label {
	font-size: 16px !important;
	line-height: 22px !important;
	color: rgba(68, 71, 61, .75) !important;
}
.wc-blocks-components-select .wc-blocks-components-select__label {
	top: 7px !important;
	font-size: 13px !important;
	line-height: 16px !important;
	color: rgba(68, 71, 61, .75) !important;
}
.wc-blocks-components-select .wc-blocks-components-select__select {
	padding: 20px 36px 0 11px !important;
}
.wc-block-components-checkbox label,
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__secondary-label {
	font-size: 16px !important;
	line-height: 1.4 !important;
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: #2a6f6f !important;
	border-color: #2a6f6f !important;
}
.wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: #fff !important;
}
.wc-block-components-radio-control__input:checked {
	border-color: #2a6f6f !important;
}
.wc-block-components-radio-control__input:checked::before {
	background: #2a6f6f !important;
}

/* ------------------------------------------------------------------ Cart and checkout summary text */

.wc-block-components-order-summary-item .wc-block-components-product-name,
.wc-block-cart-items .wc-block-components-product-name {
	font-family: "Brandon Grotesque", brandon-grotesque, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #44473d !important;
}

/* ------------------------------------------------------------------ Product cards (shop grid, related, upsells) */

:is(.ys-shop, .ys-product) ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 32px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.ys-product ul.products {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
:is(.ys-shop, .ys-product) ul.products::before,
:is(.ys-shop, .ys-product) ul.products::after {
	display: none !important;
}
:is(.ys-shop, .ys-product) ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left;
}
:is(.ys-shop, .ys-product) ul.products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}
:is(.ys-shop, .ys-product) ul.products li.product a img {
	display: block;
	width: 100% !important;
	height: auto;
	aspect-ratio: 1;
	margin: 0 0 16px !important;
	border-radius: 12px;
	background: #f4f0eb;
	box-shadow: none;
	object-fit: cover;
	transition: opacity .25s;
}
:is(.ys-shop, .ys-product) ul.products li.product .woocommerce-LoopProduct-link:hover img {
	opacity: .88;
}
:is(.ys-shop, .ys-product) ul.products li.product .ys-card__cat {
	display: block;
	margin: 0 0 4px;
	color: #6a7651;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.4;
	text-transform: uppercase;
}
:is(.ys-shop, .ys-product) ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 6px !important;
	padding: 0 !important;
	color: #44473d !important;
	font-family: "Brandon Grotesque", brandon-grotesque, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	transition: color .2s;
}
:is(.ys-shop, .ys-product) ul.products li.product .woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title {
	color: #2a6f6f !important;
}
:is(.ys-shop, .ys-product) ul.products li.product .price {
	display: block;
	margin: 0 0 16px !important;
	color: #44473d !important;
	font-size: 16px !important;
	font-weight: 400;
	line-height: 1.4;
}
:is(.ys-shop, .ys-product) ul.products li.product .price del {
	margin-right: 6px;
	opacity: .6;
}
:is(.ys-shop, .ys-product) ul.products li.product .price ins {
	color: #2a6f6f;
	font-weight: 700;
	text-decoration: none;
}
:is(.ys-shop, .ys-product) ul.products li.product .woocommerce-price-suffix {
	margin-left: 4px;
	font-size: 13px;
	opacity: .75;
}
:is(.ys-shop, .ys-product) ul.products li.product .button {
	align-self: flex-start;
	margin-top: auto !important;
}
:is(.ys-shop, .ys-product) ul.products li.product .added_to_cart {
	align-self: flex-start;
	margin-top: 8px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: #2a6f6f !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
/* The "adding" spinner / "added" tick WooCommerce appends to the button */
:is(.ys-shop, .ys-product) ul.products li.product .button.loading {
	opacity: .6 !important;
}

/* Badges on the card image */
:is(.ys-shop, .ys-product) ul.products li.product span.onsale,
:is(.ys-shop, .ys-product) ul.products li.product .ys-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	z-index: 2;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 5px 12px;
	border-radius: 100px;
	background: #b25a48;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
}
:is(.ys-shop, .ys-product) ul.products li.product .ys-card__badge--soldout {
	background: #44473d;
}
/* A product can be on sale and sold out: stack the second badge. */
:is(.ys-shop, .ys-product) ul.products li.product span.onsale + .ys-card__badge {
	top: 46px;
}

@media (max-width: 991px) {
	:is(.ys-shop, .ys-product) ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 24px;
	}
}
@media (max-width: 480px) {
	:is(.ys-shop, .ys-product) ul.products {
		gap: 32px 16px;
	}
	:is(.ys-shop, .ys-product) ul.products li.product .woocommerce-loop-product__title {
		font-size: 17px !important;
	}
	:is(.ys-shop, .ys-product) ul.products li.product .button {
		align-self: stretch;
		padding-left: 12px !important;
		padding-right: 12px !important;
		font-size: 13px !important;
	}
}

/* Checkout: intro under the personalisation heading (added by assets/js/checkout-notes.js). */
.wc-block-checkout__order-notes .ysc-notes-intro {
	margin: 0 0 12px !important;
}