/**
 * Woo Custom UI styles: category archive, Gravity Forms email preview, etc.
 *
 * @package Woo_Custom
 */

/* -------------------------------------------------------------------------
   Category archive
   ------------------------------------------------------------------------- */

.archive.woocommerce-page .wrap-inner {
	margin-top: 0;
}

/* Two-column layout: left custom, right products - full width */
.woo-custom-category-columns {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 2rem;
	margin-bottom: 2rem;
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	box-sizing: border-box;
}

.woo-custom-category-column--left {
	background-color: #285131;
	padding-right: var(--wp--preset--spacing--30);
	padding-left: var(--wp--preset--spacing--30);
	flex-basis: 200px;
	min-width: 200px;
}

/* Columns block inside left column: use full width of container */
.woo-custom-category-column__pattern--fullwidth .wp-block-columns {
	width: 100%;
	max-width: 100%;
}

/* Flow layout spacing: direct children of pattern wrapper get top margin (first child excluded) */
.woo-custom-category-column__pattern > *:not(:first-child) {
	margin-block-start: 24px;
	margin-block-end: 0;
}

.woo-custom-category-column--left .woo-custom-category-column__image {
	margin-bottom: 1rem;
}

.woo-custom-category-column--left .woo-custom-category-column__image img {
	width: 100%;
	height: auto;
	display: block;
}

.woo-custom-category-column--left .woo-custom-category-column__description {
	margin-bottom: 1.5rem;
}

.woo-custom-category-column--right {
	padding: 1rem;
	min-width: 0;
}

.woo-custom-category-column--right .woo-custom-category-column__title {
	margin-top: 0;
	margin-bottom: 1rem;
}

@media (max-width: 768px) {
	.woo-custom-category-columns {
		grid-template-columns: 1fr;
	}

	.woo-custom-category-column--left {
		position: relative;
		margin-bottom: 1rem;
	}
}

/* Ensure equal heights using Flexbox */
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
    gap: 1em;
}

.woocommerce ul.products::before,
.woocommerce ul.products::before,
.woocommerce-page ul.products::before {
    content: "";
    display: none;
}

/* Ensure product list items have equal height (Fennelly.net gets border/background from woo-ui-fennelly.css) */
.woocommerce ul.products li.product,
.wc-block-product .wp-block-group {
	display: flex;
	flex-direction: column;
	float: none;
	padding: 1em;
	overflow: hidden;
	height: stretch;
}
.wc-block-product .wp-block-group {
    height: 100%;
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin: 0;
}
.wc-block-product .wp-block-group h2 {
    margin-top: auto !important;
}

/* Make the product link grow to fill available space and be a flex container */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

/* Image aligned at start (top) */
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
	width: 100%;
	height: auto;
	display: block;
	flex-shrink: 0;
	border-radius: 4px;
}

/* Title aligned at end (bottom) - margin-top: auto will work when link is flex: 1 */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin-top: auto;
	padding: 0;
	margin-bottom: 0;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 500;
}

/* -------------------------------------------------------------------------
   Gravity Forms "Email to friend" message preview
   ------------------------------------------------------------------------- */

.woo-custom-gform-email-preview {
	padding: 1em !important;
	background: white !important;
	border-radius: 12px !important;
}
