/*
Theme Name: Eternity Diamonds Child
Theme URI: https://staging.eternitydiamonds.co.za
Description: Custom child theme for Eternity Diamonds based on Blocksy.
Author: Eternity Diamonds
Template: blocksy
Version: 1.0.0
Text Domain: eternity-blocksy-child
*/

/* Hide the large title banner on WooCommerce product category archive pages only */
body.tax-product_cat .hero-section {
	display: none;
}

/* WooCommerce product image sizing fixes (archive grids + single product) */

/* Archive/category grid: show the full product image uncropped, centred, on a white ground */
[data-products] .ct-media-container {
	background-color: #ffffff;
}

[data-products] .ct-media-container img {
	object-fit: contain;
	object-position: center;
}

/* Archive/category grid: centre each card's content. Blocksy's own card rule already reads
   align-items: var(--horizontal-alignment) and text-align: var(--text-horizontal-alignment)
   (and the add-to-cart row reads justify-content from the same variable), but neither is set
   anywhere for product cards, so they were falling back to left/stretch. Setting the two
   variables here feeds Blocksy's existing rules -- no need for separate title/price/button
   selectors, and nothing outside [data-products] .product is affected. */
[data-products] .product {
	--horizontal-alignment: center;
	--text-horizontal-alignment: center;
}

/* Single product gallery: stop the gallery column stretching to match the taller summary
   column's height -- confirmed via live DevTools testing as the cause of the large empty
   space below the image (thumbnails/tabs were being pushed down as a result). */
.woocommerce-product-gallery {
	align-self: flex-start;
	height: auto;
}

/* Single product gallery: fixed square frame, full image visible (no cropping), no stacked
   height/aspect-ratio overrides -- one consistent box per product regardless of source photo. */
.woocommerce-product-gallery .ct-media-container {
	background-color: #ffffff;
	aspect-ratio: 1 / 1;
	height: auto;
	overflow: hidden;
}

.woocommerce-product-gallery .ct-media-container img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Single product gallery: reduce the desktop gallery column width for a more balanced layout.
   Blocksy already drives both the gallery and summary widths from this custom property
   (summary width is calc(100% - var(--product-gallery-width))), so overriding it here keeps
   both columns in sync instead of leaving a gap. Mobile/tablet (below 1000px) are untouched --
   Blocksy already sets the gallery to full width there. */
@media (min-width: 1000px) {
	.product-entry-wrapper {
		--product-gallery-width: 42%;
	}
}

/* ============================================
   FOOTER -- first column branding treatment only
   Scoped strictly to .ct-footer [data-column="widget-area-1"] and its two
   known direct-child blocks (#block-14 heading, #block-11 paragraph).
   widget-area-2/3/4 and the header are never touched.
   ============================================ */

/* Hide the plain-text "Eternity Diamonds" heading -- the wordmark image below
   replaces it visually. The paragraph widget (#block-11) is left untouched. */
.ct-footer [data-column="widget-area-1"] #block-14 {
	display: none;
}

/* isolation: isolate forces this element to establish its OWN stacking context
   regardless of z-index, so the watermark/wordmark z-index values below are only
   ever compared against each other and this column's own background -- not against
   whatever stacking context Blocksy's footer (e.g. its reveal/sticky treatment)
   establishes further up the tree. That outer stacking context is what was sinking
   the old z-index: -1 watermark behind the footer's own opaque background, making
   it invisible. padding-top reserves fixed space for the wordmark at the top of the
   column, so in-flow content (#block-11) naturally starts below it -- no arbitrary
   margin needed on the paragraph itself. Sized generously (110px / 80px on mobile) so
   there's no overlap even at the wordmark's largest rendered height across column
   widths, since the wordmark's own width -- and therefore height, via its fixed
   aspect-ratio -- is percentage-based and varies with the column's actual width. */

/* Stretching widget-area-1 itself (align-self: stretch / height: 100%) had no
   visible effect -- the column is content-height and isn't independently stretched
   by its grid/flex parent. Rather than fight that, the watermark now lives on the
   middle ROW instead (below), which already has the correct full visual height
   (proven by the navy footer background already filling it correctly). */
.ct-footer [data-column="widget-area-1"] {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-top: 110px;
}

/* Foreground wordmark -- occupies the padding-top space reserved above, sized
   proportionally (no stretching) via a percentage width + fixed aspect-ratio, so it
   scales with the column's actual width rather than a small fixed pixel value. */
.ct-footer [data-column="widget-area-1"]::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 100%;
	max-width: 380px;
	aspect-ratio: 2048 / 398;
	background-image: url("https://www.eternitydiamonds.co.za/wp-content/uploads/2024/07/Eternity-Logo-2048x398.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	pointer-events: none;
	z-index: 1;
}

/* Explicitly above the watermark (z-index only has effect once positioned). */
.ct-footer [data-column="widget-area-1"] #block-11 {
	position: relative;
	z-index: 1;
}

/* Watermark -- lives on the middle footer ROW (not widget-area-1) so it gets the
   row's actual full height for free. Anchored flush to the row's true left edge
   (left: 0) rather than .ct-container's centred inset, so the diamond begins right
   at the edge of the blue footer area and can crop off-screen there, matching the
   old reference footer. Width is a simplified, generous estimate based on
   --theme-container-width (Blocksy's real site-width variable, confirmed to exist
   on this theme from earlier inspection of .woocommerce-notices-wrapper) divided
   into quarters for the 4 columns, with extra allowance added since the box now
   also has to cover the row's own outer inset before reaching widget-area-1 -- not
   pixel-exact (unverifiable without live DOM access), but intentionally generous
   enough to stay clear of widget-area-2 while still looking edge-to-edge on the left. */
.ct-footer [data-row="middle"] {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.ct-footer [data-row="middle"]::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(var(--theme-container-width, 1200px) / 4 * 1.15);
	background-image: url("https://www.eternitydiamonds.co.za/wp-content/uploads/2024/07/Eternity.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: auto 100%;
	opacity: 0.06;
	pointer-events: none;
	z-index: 0;
}

/* Keeps the real 4-column grid above the row-level watermark. Only position/z-index
   are set here -- width, grid-template-columns, gap and padding are untouched. */
.ct-footer [data-row="middle"] > .ct-container {
	position: relative;
	z-index: 1;
}

@media (max-width: 768px) {
	.ct-footer [data-column="widget-area-1"] {
		padding-top: 80px;
	}

	.ct-footer [data-column="widget-area-1"]::after {
		width: 70%;
		max-width: 260px;
	}

	/* Footer columns stack to full width on mobile, so the first-column area is
	   the whole row rather than a quarter of it. */
	.ct-footer [data-row="middle"]::before {
		left: 0;
		width: 100%;
	}
}