/**
 * Homestead Living – Shop product cards
 * Hover-to-reveal Add to Cart on mouse/trackpad devices only. No button on touch devices.
 *
 * Markup expected (set in the Product Collection's Product Template):
 *   Group  (Additional CSS class: hl-card-product)
 *     ├─ Product Image
 *     └─ Add to Cart Button (woocommerce/product-button)
 */


.tax-product_cat .wc-block-product-template__responsive {
	grid-gap: 0;
}

.hl-card-product {
	position: relative;
}

/* Touch devices: no button */
.hl-card-product .wp-block-woocommerce-product-button,
.hl-card-product .added_to_cart {
	display: none;
}

.hl-card-product .wp-block-group.related-text .wp-block-button .wp-block-button__link {
    /* border: 1px solid #504e51; */
    background: #272727;
    color: #fff;
    font-family: "Avenir";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    padding: 10px 10px !important;
    line-height: 100%;
    letter-spacing: 1px;
    text-transform: none;
    margin-bottom: 0 !important;
}

.hl-card-product .wp-block-group.related-text .wp-block-button .wp-block-button__link:hover {
	background: #000000 !important;
	color: #fff !important;
}

.hl-card-product img {
    height: 248px !important;
    max-height: 248px !important;
    max-width: 100% !important;
    aspect-ratio: .9 / 1;
    width: 100% !important;
    object-fit: contain !important;
    object-position: center bottom;
}

.hl-card-product .wc-block-components-product-image {
    max-height: 250px !important;
    padding: 0 !important;
}

.hl-card-product .wp-block-group.related-text {
    padding: 10px 0 0 0;
    min-height: auto;
    margin-block-start: 10px;
}

li.product.type-product .hl-card-product p.product-title.wp-block-post-title {
    font-size: 16px !important;
    font-family: 'Avenir';
    line-height: 1.2 !important;
    letter-spacing: 0;
}

.hl-card-product .wp-block-group.related-text .wc-block-components-product-price.wc-block-grid__product-price {
	margin-bottom: 0;
}


.hl-card-product .wp-block-group.related-text .woocommerce-Price-amount,
.hl-card-product .wp-block-group.related-text .subscription-details {
    font-family: 'Avenir' !important;
    font-size: 14px !important;
}

.hl-card-product .wp-block-group.related-text .wp-block-woocommerce-product-price {
	margin-block-start: 0;
}

.hl-card-product .product-rating-summary {
    font-size: 0.8rem !important;
    line-height: .8rem !important;
    margin-block-start: 0;
}

.hl-card-product .product-rating-summary .star-rating {
    font-size: .9rem !important;
}

.hl-card-product .product-rating-summary p {
    display: none;
}

.shop-landing-nav .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    padding-bottom: 0;
    border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease;
	font-size: 16px;
	text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
}

.shop-landing-nav .wp-block-navigation:not(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
    border-bottom: 2px solid #000;
    text-decoration: none !important;
}

.shop-landing-nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    z-index: 9999;
    top: 100%;
    gap: 0 !important;
    padding: 10px;
}

.shop-landing-nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container li {
	padding-bottom: 0;
}

.shop-landing-nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container li a {
	text-transform: none;
	font-size: 16px;
}

.shop-landing-nav nav {
    min-height: 44px;
}

.shop-landing-nav nav button {
    border: none !important;
    margin-top: 0 !important;
    text-transform: uppercase;
}

.shop-landing-nav .wp-block-navigation .wp-block-navigation__submenu-icon {
	margin-top: 6px;
}

/* Carousel arrows on the sides, vertically centered on the products */
.hl-shop-carousel {
	position: relative;
	padding-inline: 3rem; /* gutter so arrows don't cover the first/last cover */
	margin-block-start: 40px;
}

.hl-shop-carousel .wc-block-next-previous-buttons {
	position: absolute;
	top: 35%; /* roughly the middle of the cover images; adjust to taste */
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	margin: 0;
	pointer-events: none; /* clicks pass through the empty middle to the products */
	z-index: 3;
}

.hl-shop-carousel .wc-block-next-previous-buttons > * {
	pointer-events: auto;
}

/* Carousel arrows: circular buttons */
.hl-shop-carousel .wc-block-next-previous-buttons button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	padding: 0;
	border: 1px solid #272727;
	border-radius: 50%;
	background: #fff;
	color: #272727;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hl-shop-carousel .wc-block-next-previous-buttons button:hover {
	background: #272727;
	color: #fff;
}

.hl-shop-carousel .wc-block-next-previous-buttons button:focus-visible {
	outline: 2px solid #272727;
	outline-offset: 2px;
}

/* At the start or end of the row */
.hl-shop-carousel .wc-block-next-previous-buttons button:is([disabled], [aria-disabled="true"]) {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
}

.hl-shop-carousel .wc-block-next-previous-buttons button:is([disabled], [aria-disabled="true"]):hover {
	background: #fff;
	color: #272727;
}

/* Slightly larger arrow inside the circle */
.hl-shop-carousel .wc-block-next-previous-buttons__icon {
	width: 5px;
	height: 12px;
	fill: currentColor;
	padding: 0;
	overflow: visible;
}

.hl-shop-carousel .wc-block-next-previous-buttons__button:first-child svg {
    width: 8px;
}


/* 6 products per view on wide carousels */
.hl-shop-carousel .is-product-collection-layout-carousel {
	--hl-carousel-gap: 1.25rem;
	column-gap: var(--hl-carousel-gap);
	scroll-padding: 0 4px;
}

:is(.hl-shop-carousel, .hl-shop-grid) .wp-block-group-is-layout-flex.is-layout-flex {
    margin-block-start: 0;
}

/* product rating */
.wc-block-grid__product-rating {
	margin-block-start: 0 !important;
}

:is(.hl-shop-carousel, .hl-shop-grid) .woo-product-rating .wc-block-components-product-rating__stars {
	display: block;
}

/*.hl-card-product {
    padding-top: 0.6em;
    padding-right: 0.6em;
}
*/ .wc-block-grid__product-rating .wc-block-grid__product-rating__stars {
	font-size: .8rem !important;
}

.wc-block-grid__product-rating .wc-block-grid__product-rating__stars span:before {
    /*font-size: .8rem !important;*/
    color: #EDD058 !important;
}

.hl-card-product .wc-block-components-product-sale-badge {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    z-index: 3;
    margin: -0.5em -0.5em 0 0;
    /* margin: 0; */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3em;
    min-height: 3em;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #B30D1C;
    color: #fff;
    font-size: 0.857em;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
}

.hl-shop-carousel .is-product-collection-layout-carousel {
    padding-block-start: 0.6em;
    padding-inline-end: 0.6em;
    margin-block: 30px !important;
}


/* Category & tag grids: no side margins on products; the grid's gap handles spacing */
.hl-shop-grid .wc-block-product-template > li {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.hl-shop-grid .wc-block-product-template {
	gap: 1.5rem 1rem;
}


@container carousel (min-width: 900px) {
	.hl-shop-carousel .is-product-collection-layout-carousel .wc-block-product {
		min-width: calc((100% - 5 * var(--hl-carousel-gap)) / 6);
		max-width: none;
		scroll-snap-align: start;
	}
}

/* Touch devices swipe, so hide the arrows there */
@media (hover: none), (max-width: 768px) {
	.hl-shop-carousel {
		padding-inline: 0; /* gutter so arrows don't cover the first/last cover */
		margin-block-start: 0;

	}
	
	.hl-shop-carousel .wc-block-next-previous-buttons {
		display: none !important;
	}
}


/* Category & tag grids: 2 products side by side on phones */
@media (max-width: 600px) {
	.hl-shop-grid .wc-block-product-template {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1.5rem 1rem;
	}

	.hl-shop-grid .wc-block-product-template > li {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}

}


/* Mouse / trackpad: button overlays the bottom of the image, revealed on hover or keyboard focus */
@media (hover: hover) and (pointer: fine) {
	.hl-card-product .wp-block-woocommerce-product-button {
		display: block;
		position: absolute;
		left: 0.75rem;
		right: 0.75rem;
		/*bottom: 2rem;*/
		top: 13rem;
		z-index: 2;
		margin: 0 !important;
		opacity: 0;
		width: auto !important;
		text-align: center;
		max-width: none !important;
	}

	.hl-card-product .wp-block-woocommerce-product-button .wc-block-components-product-button__button {
		width: 100%;
		margin-inline: auto;
	}

	.hl-card-product:hover .wp-block-woocommerce-product-button,
	.hl-card-product:focus-within .wp-block-woocommerce-product-button {
		opacity: 1;
		transform: none;
	}


}

@media (prefers-reduced-motion: reduce) {
	.hl-card-product .wp-block-woocommerce-product-button {
		transition: none;
		transform: none;
	}
}