/* ============================================
Custom attribute icons — product detail page
============================================ */

/* Spacing above/below the whole icon block + thick divider line above it */
.custom-product-attributes {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 24px 0;
	padding-top: 24px;
	border-top: 3px solid #D9D6CC;
}

/* Each attribute: icon on top, value centered below it */
.custom-product-attributes .custom-product-attribute {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	margin: 0;
	flex: 1;
	min-width: 0;
	padding: 0 16px;
	position: relative;
	overflow-wrap: break-word;
	font-size: clamp(12px, 3vw, 16px);
}

/* Divider bar between attributes (not after the last one) */
.custom-product-attributes .custom-product-attribute:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 40px;
	background-color: #D9D6CC;
}

/* Icon sits on a round background, sized relative to its column */
.custom-product-attributes .custom-product-attribute__icon {
	width: 40%;
	max-width: 64px;
	aspect-ratio: 1 / 1;
	background-color: #EEECE5;
	border-radius: 50%;
	padding: 8px;
	box-sizing: border-box;
	box-shadow: none;
}

/* Last row without bottom spacing */
.custom-product-attributes .custom-product-attribute:last-child {
	margin-bottom: 0;
}

/* ============================================
Custom attribute icons — shop/category loop
============================================ */

/* Turn each product tile into a 2-column grid: image + icons side by side,
   summary (title/price/button) spanning the full width below.
   Image column is wider than the icon column so the image reads bigger.
   No explicit row height is set — the row stretches to whatever the taller
   column needs (usually the icon list), and the image (height: 100% below)
   grows to match it, giving a tall/portrait image instead of a fixed square. */
.woocommerce ul.products li.product {
	display: grid;
	grid-template-columns: 3fr 2fr;
	grid-template-areas:
		"heading heading"
		"thumbnail icons"
		"summary summary";
	column-gap: 0px;
	align-items: stretch;
	container-type: inline-size; /* makes the card's own width queryable below, instead of the viewport's */
	container-name: product-card;
}

/* Product image: fixed height instead of relying on grid stretch — Astra's
   own theme CSS sets "height: auto !important" on product thumbnails, which
   was silently overriding our earlier height: 100% rule (that's why there
   was empty space below the bottle instead of a filled box). A fixed height
   + object-fit: cover with !important reliably fills the box and crops
   the (square) source image to match, regardless of Astra's defaults. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
	grid-area: thumbnail;
	width: 100% !important;
	height: 260px !important;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}

/* The <a> wrapping the image also needs to fill the box — otherwise it stays
   at its own intrinsic (inline) size and the image's "width: 100%" resolves
   relative to that smaller box instead of the full grid cell */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap > a {
	display: block;
	width: 100%;
	height: 100%;
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
}

/* Icons column next to the image — centered both horizontally and vertically
   within its column, so it reads as a balanced pairing next to the image */
.woocommerce ul.products li.product .custom-product-attributes-loop-wrap {
	grid-area: icons;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

/* Title / price / button always spans both columns below */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
	grid-area: summary;
}

/* Small icon variant (used in the loop): stacked vertically to fit the narrow column */
.custom-product-attributes.small {
	flex-direction: column;
	align-items: center;
	gap: 10px;
	border-top: none;
	padding-top: 0;
	margin: 0;
	width: 100%;
}

.custom-product-attributes.small .custom-product-attribute--small {
	flex: none;
	padding: 0;
	gap: 6px;
	font-size: 11px;
	line-height: 1.3;
}

/* Divider becomes a short horizontal line below each item instead of a vertical bar */
.custom-product-attributes.small .custom-product-attribute--small:not(:last-child)::after {
	content: '';
	position: static;
	display: block;
	width: 32px;
	height: 1px;
	background-color: #D9D6CC;
	margin-top: 6px;
	transform: none;
}

.custom-product-attributes.small .custom-product-attribute__icon {
	width: 44px;
	max-width: 44px;
}

/* Loop: attribute value always 2 lines high, truncated with "…" if longer */
.custom-product-attributes.small .custom-product-attribute__value {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	max-width: 100%;
	min-height: 2.6em; /* 2 lines x line-height 1.3 */
}

/* ============================================
Custom attribute icons — mobile layout
============================================ */

/* Below this width, the 3fr/2fr side-by-side split gets too narrow for the
   fixed-height image (it starts looking squeezed/disproportionate) and the
   badge overlays (VDP, out-of-stock — positioned with fixed px offsets by
   another plugin) start overlapping the icon text. Switch to a single
   stacked column instead: image full-width on top, icons in a horizontal
   row below it, summary (title/price/button) below that. */
@media (max-width: 600px) {

	.woocommerce ul.products li.product {
		grid-template-columns: 1fr;
		grid-template-areas:
			"heading"
			"thumbnail"
			"icons"
			"summary";
		row-gap: 8px;
	}

	/* Shorter fixed height on mobile — the full card width is now available,
	   so it doesn't need to be as tall to look proportionate */
	.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
		height: 200px !important;
	}

	/* Icons in a horizontal row below the image instead of a vertical stack
	   next to it — more natural use of the now-full card width */
	.woocommerce ul.products li.product .custom-product-attributes-loop-wrap {
		height: auto;
	}

	.custom-product-attributes.small {
		flex-direction: column;
		justify-content: center;
		gap: 20px;
	}

	/* No divider between items on mobile — cleaner with just the icons stacked */
	.custom-product-attributes.small .custom-product-attribute--small::after {
		content: none;
	}
}


/* ============================================
Product heading — shop/category loop
============================================ */

/* Hide the original loop title below the image */
.woocommerce ul.products li.product .astra-shop-summary-wrap > .ast-loop-product__link {
	display: none;
}

/* Heading = own grid row above image + icons */
.woocommerce ul.products li.product > a.product-heading {
	grid-area: heading;
	grid-column: 1 / -1; /* explicitly span all columns */
	display: block;
	padding-bottom: 0.75rem;
	text-align: left;
	text-decoration: none;
	color: inherit;
}

.woocommerce ul.products li.product .product-heading__brand,
.woocommerce ul.products li.product .product-heading__name {
	margin: 0;
	font-family: inherit;
	font-style: normal;
	color: inherit;
}

/* Brand: one line, gap below */
.woocommerce ul.products li.product .product-heading__brand {
	margin-bottom: 0.2rem;
	min-height: 1.3em; /* keeps the layout stable if the brand is empty */
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Name: up to 2 lines, space always reserved so all images start at the same height */
.woocommerce ul.products li.product .product-heading__name {
	min-height: 2.4em;
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ============================================
Product heading — single product page
============================================ */

.product-heading__brand--single {
	display: block;
	margin-bottom: 6px;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}