/*
 * Phadin global content-width system.
 *
 * --ph-container-max is generated from Flatsome's Site Width option after
 * subtracting its two native 15px gutters, so the whole site remains
 * adjustable from one existing Theme Options control.
 * Top-level Flatsome rows keep their native 15px column gutter. The small
 * outer compensation below brings the resulting content edge to 24px/20px/
 * 15px without adding a second full container padding.
 */

:root {
	--ph-container-gap: var(--ph-container-gap-desktop, 24px);
	--ph-container-row-offset: 9px;
}

.ph-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ph-container-max, 1520px);
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--ph-container-gap);
	padding-left: var(--ph-container-gap);
}

.header-wrapper .header-inner.container,
.shop-page-title .page-title-inner.container,
body.tax-product_cat #main > .category-page-row,
body.post-type-archive-product #main > .category-page-row,
body.single-product .product-main > .row.content-row,
body.single-product .product-footer > .container,
body.blog .blog-wrapper > .row,
body.archive:not(.tax-product_cat) .blog-wrapper > .row,
body.single-post .blog-wrapper > .row {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ph-container-max, 1520px);
	margin-right: auto;
	margin-left: auto;
}

.header-wrapper .header-inner.container {
	padding-right: var(--ph-container-gap) !important;
	padding-left: var(--ph-container-gap) !important;
}

.shop-page-title .page-title-inner.container {
	padding-right: var(--ph-container-gap);
	padding-left: var(--ph-container-gap);
}

body.tax-product_cat #main > .category-page-row,
body.post-type-archive-product #main > .category-page-row,
body.single-product .product-main > .row.content-row,
body.single-product .product-footer > .container,
body.blog .blog-wrapper > .row,
body.archive:not(.tax-product_cat) .blog-wrapper > .row,
body.single-post .blog-wrapper > .row,
#main > .section > .section-content > .row:not(.row-full-width),
#main > .page-wrapper > .section > .section-content > .row:not(.row-full-width) {
	padding-right: var(--ph-container-row-offset);
	padding-left: var(--ph-container-row-offset);
}

#main > .section > .section-content > .row:not(.row-full-width),
#main > .page-wrapper > .section > .section-content > .row:not(.row-full-width) {
	box-sizing: border-box;
	max-width: var(--ph-container-max, 1520px);
}

/*
 * The product layout extension consumes this variable in its existing
 * desktop shell rules. Repoint it to the shared site container instead of
 * competing with the extension's grid declarations.
 */
body.single-product.phadin-pas-enabled.phadin-commerce-layout-enabled {
	--phadin-product-content-max-width: var(--ph-container-max, 1520px) !important;
}

@media (max-width: 1024px) {
	:root {
		--ph-container-gap: var(--ph-container-gap-tablet, 20px);
		--ph-container-row-offset: 5px;
	}
}

@media (min-width: 850px) and (max-width: 1280px) {
	body.tax-product_cat .products.large-columns-5 > .product-small,
	body.post-type-archive-product .products.large-columns-5 > .product-small {
		flex-basis: 25%;
		max-width: 25%;
	}
}

@media (max-width: 767px) {
	:root {
		--ph-container-gap: var(--ph-container-gap-mobile, 15px);
		--ph-container-row-offset: 0px;
	}
}