/*
Theme Name: Invize Theme
Theme URI: https://invize.se
Author: Brainchild
Author URI: https://invize.se
Description: Block theme for the Invize webshop. Customize colors, fonts, header, and footer under Appearance → Customize with live preview. Requires Invize Helper plugin.
Version: 1.3.34
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: invize
Tags: block-theme, e-commerce, dark, full-site-editing, woocommerce
*/

:root {
	--invize-sidebar-sticky-top-gap: 1.5rem;
	--invize-sidebar-sticky-bottom-gap: 1rem;
	--invize-admin-bar-height: 0px;
	--invize-sidebar-sticky-offset: calc(var(--invize-sidebar-sticky-top-gap) + var(--invize-admin-bar-height));
	--invize-single-product-summary-min-width: 18rem;
	--invize-single-product-media-max-width: 28rem;
	--invize-single-product-stack-breakpoint: 40rem;
	--invize-single-product-main-stack-breakpoint: 44rem;
	--invize-sticky-header-z-index: 1000;
	--invize-sticky-header-transition-duration: 0.25s;
	--invize-sticky-header-top: var(--invize-admin-bar-height, 0px);
}

body.admin-bar {
	--invize-admin-bar-height: 32px;
}

@media (min-width: 782px) {
	body.invize-shop-sidebar-sticky .invize-shop-layout .wp-block-columns {
		align-items: stretch;
	}

	body.invize-shop-sidebar-sticky .invize-shop-layout .wp-block-columns > .wp-block-column:first-child > *:first-child,
	body.invize-shop-sidebar-sticky .invize-shop-layout .wp-block-columns > .wp-block-column:first-child .invize-shop-sidebar {
		position: sticky;
		top: var(--invize-sidebar-sticky-offset);
		max-height: calc(100vh - var(--invize-sidebar-sticky-offset) - var(--invize-sidebar-sticky-bottom-gap));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

body.single-product .invize-shop-layout > .wp-block-columns > .wp-block-column {
	min-width: 0;
}

/* Single product: image + summary. Grid avoids flex min-width:auto squeezing the summary to zero. */
body.single-product .invize-shop-layout > .wp-block-columns > .wp-block-column:last-child {
	container-type: inline-size;
	container-name: invize-single-product-main;
	min-width: 0;
}

body.single-product :is(
	.invize-single-product-layout,
	.invize-single-product-columns,
	.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-product-image-gallery),
	.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-product-gallery),
	.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-add-to-cart-form)
).wp-block-columns {
	display: grid !important;
	grid-template-columns: minmax(0, 5fr) minmax(var(--invize-single-product-summary-min-width), 7fr);
	align-items: start;
	gap: var(--wp--style--block-gap, 1.5rem);
	flex-wrap: unset !important;
}

body.single-product :is(
	.invize-single-product-layout,
	.invize-single-product-columns,
	.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-product-image-gallery),
	.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-product-gallery),
	.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-add-to-cart-form)
) > .wp-block-column {
	flex-basis: auto !important;
	width: auto !important;
	max-width: none;
	min-width: 0;
}

body.single-product :is(
	.invize-single-product-layout,
	.invize-single-product-columns,
	.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-product-image-gallery),
	.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-product-gallery),
	.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-add-to-cart-form)
) > .wp-block-column:is(.invize-single-product-summary, :has(.wp-block-woocommerce-add-to-cart-form)) {
	min-width: min(100%, var(--invize-single-product-summary-min-width));
}

body.single-product :is(
	.invize-single-product-layout,
	.invize-single-product-columns,
	.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-product-image-gallery),
	.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-product-gallery),
	.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-add-to-cart-form)
) > .wp-block-column:is(.invize-single-product-media, :has(.wp-block-woocommerce-product-image-gallery), :has(.wp-block-woocommerce-product-gallery)) {
	max-width: min(100%, var(--invize-single-product-media-max-width));
}

body.single-product :is(
	.invize-single-product-media,
	.wp-block-column:has(.wp-block-woocommerce-product-image-gallery),
	.wp-block-column:has(.wp-block-woocommerce-product-gallery)
) :is(
	.wp-block-woocommerce-product-image-gallery,
	.wp-block-woocommerce-product-gallery,
	.wc-block-product-gallery,
	.wc-block-product-gallery-large-image,
	.woocommerce-product-gallery,
	.wc-block-components-product-image
) {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
}

body.single-product :is(
	.invize-single-product-media,
	.wp-block-column:has(.wp-block-woocommerce-product-image-gallery),
	.wp-block-column:has(.wp-block-woocommerce-product-gallery)
) img {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
}

@container invize-single-product-main (max-width: 40rem) {
	body.single-product :is(
		.invize-single-product-layout,
		.invize-single-product-columns,
		.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-product-image-gallery),
		.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-add-to-cart-form)
	).wp-block-columns {
		grid-template-columns: 1fr !important;
	}

	body.single-product :is(
		.invize-single-product-layout,
		.invize-single-product-columns,
		.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-product-image-gallery),
		.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-add-to-cart-form)
	) > .wp-block-column {
		max-width: none;
	}
}

@media (max-width: 782px) {
	body.single-product :is(
		.invize-single-product-layout,
		.invize-single-product-columns,
		.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-product-image-gallery),
		.invize-shop-layout > .wp-block-columns > .wp-block-column > .wp-block-columns:has(.wp-block-woocommerce-add-to-cart-form)
	).wp-block-columns {
		grid-template-columns: 1fr !important;
	}
}

.invize-sticky-header {
	position: fixed;
	top: var(--invize-sticky-header-top);
	right: 0;
	left: 0;
	z-index: var(--invize-sticky-header-z-index);
	width: 100%;
	max-width: none;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-100%);
	transition:
		transform var(--invize-sticky-header-transition-duration) ease,
		visibility var(--invize-sticky-header-transition-duration);
}

.invize-sticky-header.is-visible {
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* Frontend: sticky header renders outside .wp-site-blocks, so constrained children use root content-size (720px) unless overridden here. */
body .invize-sticky-header .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	box-sizing: border-box;
	width: 100%;
	max-width: min(var(--wp--style--global--wide-size), 100%);
	margin-inline: auto;
}

body .invize-sticky-header .wp-block-columns {
	box-sizing: border-box;
	width: 100%;
	max-width: min(var(--wp--style--global--wide-size), 100%);
	margin-inline: auto;
}