/* Subtle depth and a neutral black default colour for the home-decor storefront. */
:root {
	--oeeroo-primary: #111;
	--oeeroo-primary-hover: #2b2b2b;
}

.oeeroo-shipping-hero,
.oeeroo-track-hero,
.oeeroo-legal-hero,
.oeeroo-about-hero:not(.has-image) {
	background: linear-gradient(125deg, #111, #2b2b2b);
}

.oeeroo-desktop-compare,
.oeeroo-saved-clear:before,
.oeeroo-saved-page[data-oeeroo-saved-page="compare"] .oeeroo-saved-clear:before,
.oeeroo-track-grid aside i,
.oeeroo-track-grid aside a,
.oeeroo-legal-layout aside a:hover,
.oeeroo-legal-contact a {
	color: #111 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline-color: #111;
}

/* Product cards use the same polished surface and hover interaction everywhere. */
.woocommerce ul.products li.product.oeeroo-card,
.woocommerce-page ul.products li.product.oeeroo-card,
.oeeroo-product-card,
.oeeroo-about-category-card {
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(17, 24, 39, .08);
	box-shadow: 0 4px 14px rgba(17, 24, 39, .09);
	transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.woocommerce ul.products li.product.oeeroo-card:hover,
.woocommerce-page ul.products li.product.oeeroo-card:hover,
.oeeroo-product-card:hover,
.oeeroo-about-category-card:hover {
	border-color: rgba(17, 24, 39, .16);
	box-shadow: 0 11px 24px rgba(17, 24, 39, .16);
	transform: translateY(-4px);
}

.home-products ul.products li.product.oeeroo-card {
	background: #fff !important;
	border: 1px solid rgba(17, 24, 39, .08) !important;
	box-shadow: 0 5px 16px rgba(17, 24, 39, .11) !important;
}

.home-products ul.products li.product.oeeroo-card:hover {
	box-shadow: 0 12px 25px rgba(17, 24, 39, .17) !important;
}

.oeeroo-card .oeeroo-card-media,
.oeeroo-card .product-image {
	overflow: hidden;
}

.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
button[type="submit"] {
	box-shadow: 0 3px 8px rgba(17, 17, 17, .18);
}

/* A clear positive action colour for product purchase buttons. */
.single-product .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button {
	background: #168c50 !important;
	border-color: #168c50 !important;
	box-shadow: 0 5px 12px rgba(22, 140, 80, .28) !important;
}

.single-product .single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover {
	background: #0f713f !important;
	border-color: #0f713f !important;
	box-shadow: 0 7px 16px rgba(22, 140, 80, .35) !important;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
button[type="submit"]:hover {
	box-shadow: 0 5px 12px rgba(17, 17, 17, .25);
}

/* Dropdowns always stay neutral, including the Contact form. */
select,
.woocommerce select,
.oeeroo-contact-form select,
.woocommerce form .form-row select {
	color: #111 !important;
	background-color: #fff !important;
	border-color: #cfd4da !important;
}

select:focus,
.woocommerce select:focus,
.oeeroo-contact-form select:focus,
.woocommerce form .form-row select:focus {
	border-color: #111 !important;
	box-shadow: 0 0 0 1px #111 !important;
	outline: 0;
}

select option {
	color: #111;
	background: #fff;
}

/* Clearly identify the thumbnail for the image that is currently open. */
.single-product .flex-control-thumbs img.flex-active {
	border-color: #111 !important;
	box-shadow: 0 0 0 2px #111 !important;
	opacity: 1 !important;
}

/* Informational pages use a consistent green for contact details and internal links. */
body.page #main a:not(.button):not(.wp-element-button),
body.page #main a:not(.button):not(.wp-element-button):visited,
body.page #main a[href^="tel:"],
body.page #main a[href^="mailto:"] {
	color: #35c58a !important;
}

body.page #main a:not(.button):not(.wp-element-button):hover,
body.page #main a:not(.button):not(.wp-element-button):focus-visible {
	color: #239b65 !important;
}

/* Breadcrumbs remain one clean line, with an ellipsis for long product names. */
.woocommerce .woocommerce-breadcrumb {
	display: block !important;
	max-width: min(100%, var(--oeeroo-container)) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
}

/* Four matching assurances sit in one line under the PayPal button. */
.single-product .oeeroo-purchase-assurances {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	width: 100% !important;
	float: none !important;
	clear: both !important;
	gap: 12px !important;
	margin: 15px 0 0 !important;
}

.single-product .oeeroo-purchase-assurance {
	display: flex !important;
	min-width: 0;
	align-items: center;
	justify-content: center;
	gap: 8px !important;
	color: var(--oeeroo-text) !important;
}

.single-product .oeeroo-purchase-assurance strong {
	display: block;
	font-size: 13px !important;
	line-height: 1.2;
}

.single-product .oeeroo-purchase-assurance small {
	display: none !important;
}

.single-product .oeeroo-assurance-icon {
	width: 40px !important;
	height: 40px !important;
	flex: 0 0 40px;
}

.single-product .oeeroo-assurance-icon svg {
	width: 22px !important;
	height: 22px !important;
}

.single-product .oeeroo-purchase-assurance p {
	margin: 0 !important;
	min-width: 0;
}

/* About Us uses the same desktop edges as Contact and the other content pages. */
@media (min-width: 768px) {
	.oeeroo-about-page > .oeeroo-container {
		width: min(calc(100% - 96px), var(--oeeroo-container)) !important;
		max-width: var(--oeeroo-container) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	/* Keep homepage category cards softly rounded instead of fully circular on desktop. */
	.category-shortcuts a,
	.category-shortcuts img,
	.category-shortcuts .category-placeholder {
		border-radius: 10px !important;
	}
}

@media (max-width: 767px) {
	.single-product .oeeroo-purchase-assurances {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px 8px !important;
	}

	.single-product .oeeroo-purchase-assurance {
		justify-content: flex-start;
	}
}

/* The active hero must always be visible and the arrows must stay clickable. */
.hero-slider .hero {
	display: none !important;
}

.hero-slider .hero.is-active {
	display: flex !important;
}

.hero-slider .hero-arrow {
	pointer-events: auto !important;
	border-radius: 50%;
}

@media (max-width: 767px) {
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product,
	.oeeroo-product-card,
	.oeeroo-about-category-card {
		box-shadow: 0 3px 10px rgba(17, 24, 39, .09);
	}
}

/* Product tabs share their full row evenly, whether WooCommerce renders two or three tabs. */
.single-product .woocommerce-tabs ul.tabs {
	display: flex !important;
	grid-template-columns: none !important;
	width: 100% !important;
}

.single-product .woocommerce-tabs ul.tabs li {
	flex: 1 1 0 !important;
	min-width: 0;
}

/* Keep lengthy product descriptions tidy until the shopper chooses to read more. */
.single-product .woocommerce-Tabs-panel--description .oeeroo-description-content {
	transition: max-height .25s ease;
}

.single-product .woocommerce-Tabs-panel--description .oeeroo-description-content.is-collapsed {
	max-height: 390px;
	overflow: hidden;
}

.single-product .oeeroo-description-toggle {
	display: block;
	min-width: 220px;
	margin: 20px auto 0;
	padding: 14px 26px;
	border: 1px solid #222;
	border-radius: 0;
	background: #fff;
	color: #111;
	font: 600 16px/1.2 inherit;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.single-product .oeeroo-description-toggle:hover,
.single-product .oeeroo-description-toggle:focus-visible {
	background: #111;
	color: #fff;
}

@media (max-width: 767px) {
	.single-product .woocommerce-tabs ul.tabs li {
		flex: 1 1 0 !important;
		white-space: normal !important;
	}

	.single-product .woocommerce-Tabs-panel--description .oeeroo-description-content.is-collapsed {
		max-height: 300px;
	}
}