/**
 * Global responsive layer — Peptides Theme
 * Loaded last so it can refine layout across all templates.
 */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

body {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	position: relative;
	margin: 0;
}

img,
video,
svg,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

#site-header,
#site-content,
#site-footer,
.site-content,
main,
.elementor,
.elementor > .elementor-element,
.elementor-42 {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

#site-content,
.site-content,
main {
	overflow-x: clip;
	overflow-wrap: anywhere;
	word-wrap: break-word;
}

/*
 * Desktop / laptop: full-width site — never lock the homepage into a
 * phone-sized “webview” column with empty space beside it.
 */
@media (min-width: 901px) {
	html,
	body {
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
	}

	#site-header,
	#site-content,
	#site-footer,
	.site-header,
	.site-footer,
	.site-content,
	main,
	.elementor,
	.elementor-42,
	.elementor-42 > .elementor-element,
	.elementor-42 .e-con-full.e-parent {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		float: none !important;
		transform: none !important;
	}

	.site-header__inner {
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}

	/* Desktop nav — full menu bar, not hamburger “webview” chrome */
	.site-header__menu-toggle {
		display: none !important;
	}

	.site-header__nav {
		flex: 1 1 auto !important;
		order: 0 !important;
	}

	.primary-menu {
		display: flex !important;
		position: static !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 30px !important;
		background: transparent !important;
		padding: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	.primary-menu li {
		border: 0 !important;
	}

	.primary-menu a {
		display: inline !important;
		padding: 0 !important;
	}

	.site-header__search-toggle {
		display: inline-block !important;
	}

	.site-header__brand,
	.site-header__utils {
		order: 0 !important;
		flex: 0 0 auto !important;
	}
}

/* Still fill the viewport on tablet widths (hamburger OK below 901px) */
@media (min-width: 768px) and (max-width: 900px) {
	html,
	body,
	#site-header,
	#site-content,
	#site-footer,
	.elementor,
	.elementor-42,
	.elementor-42 > .elementor-element {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* —— Tablet (≤1024px) —— */
@media (max-width: 1024px) {
	/* Prevent Elementor 100vw / wide desktop rules from creating side whitespace */
	.elementor-section,
	.elementor-container,
	.e-con,
	.e-con-inner,
	.e-con-full,
	.e-flex {
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.site-header__inner {
		padding-inline: 24px;
		height: 56px;
		min-height: 56px;
	}

	.site-footer__inner {
		padding: 40px 24px;
	}

	.product-footer-banner__image {
		min-height: 32vh;
		max-height: 48vh;
	}

	.shop-hero__image {
		max-height: 180px;
	}

	/* Kill Elementor desktop-only content-width: 100vw (causes right-side gap) */
	.elementor-42 .e-con,
	.elementor-42 .e-con-full,
	.elementor-42 .elementor-element {
		--content-width: 100% !important;
		--width: 100% !important;
	}

	.elementor-42 .elementor-element-a894606,
	.elementor-42 .elementor-element-20b0638,
	.elementor-42 .elementor-element-2f3dc59 {
		width: 100% !important;
		max-width: 100% !important;
		--content-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Neutralize large desktop hero margins that spill past the viewport */
	.elementor-42 .elementor-element-e8fc249,
	.elementor-42 .elementor-element-3383dfa,
	.elementor-42 .elementor-element-f59209b {
		margin: 0 !important;
		max-width: 100% !important;
	}
}

/* —— Tablet / small laptop (≤900px) —— */
@media (max-width: 900px) {
	.site-logo__img {
		height: 42px;
		max-width: min(180px, 48vw);
	}

	.site-header__utils {
		gap: 10px;
	}

	.site-header__cart,
	.site-header__search-toggle {
		font-size: 13px;
	}

	.site-header__account {
		padding: 8px 14px;
		font-size: 13px;
	}

	/* Generic pages / Elementor content */
	.page #site-content,
	.page .site-content,
	.single #site-content {
		padding-inline: 20px;
		box-sizing: border-box;
	}

	/* Full-bleed Elementor pages (home, about, etc.) — no side gutters */
	body.home #site-content,
	body.page-id-42 #site-content,
	body.elementor-page-42 #site-content,
	body.page-id-285 #site-content,
	body.elementor-page-285 #site-content,
	body.elementor-page #site-content,
	body.elementor-default.elementor-page #site-content {
		padding-inline: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.page:has(.policy-page) #site-content,
	body.page:has(.policy-page) .site-content {
		padding-inline: 0;
	}

	/* WooCommerce generic */
	.woocommerce-cart .woocommerce,
	.woocommerce-account .woocommerce {
		padding-inline: 20px;
		box-sizing: border-box;
	}
}

/* —— Mobile (≤767px) —— */
@media (max-width: 767px) {
	html,
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden !important;
	}

	.site-header,
	.site-header__inner,
	#site-content,
	#site-footer,
	.site-footer__inner {
		max-width: 100%;
		overflow-x: clip;
	}

	/* No side margins on Elementor / About full-bleed pages */
	body.elementor-page #site-content,
	body.page-id-285 #site-content,
	body.elementor-page-285 #site-content,
	body.home #site-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-inline: 0 !important;
	}

	.site-header__inner {
		padding: 0 16px;
		height: 52px;
		min-height: 52px;
		gap: 12px;
	}

	.site-logo__img {
		height: 32px !important;
		max-height: 32px !important;
		max-width: 100px !important;
	}

	.shop-hero__image {
		max-height: 140px;
	}

	.site-header__cart {
		font-size: 12px;
	}

	.site-header__account {
		padding: 8px 12px;
		font-size: 12px;
		white-space: nowrap;
	}

	.primary-menu {
		padding-left: 16px;
		padding-right: 16px;
	}

	.site-header__search {
		padding-left: 16px;
		padding-right: 16px;
	}

	.site-header__search-form {
		flex-wrap: wrap;
		gap: 8px;
	}

	.site-header__search-form input[type="search"] {
		flex: 1 1 100%;
		min-width: 0;
	}

	.site-header__search-form button {
		width: 100%;
	}

	/* Policy pages — keep readable gutters on phones */
	.policy-page {
		padding: 2rem 20px 3.5rem !important;
	}

	.policy-page__title {
		letter-spacing: 0.08em;
		font-size: clamp(1.35rem, 7vw, 1.85rem);
	}

	.policy-page--shipping .policy-page__title {
		font-size: clamp(1.25rem, 6vw, 1.55rem);
	}

	.policy-page__body p,
	.policy-page__body ul,
	.policy-page__body li {
		font-size: 0.95rem;
	}

	.policy-section h2,
	.policy-page--doc .policy-section h2 {
		font-size: clamp(1.15rem, 5vw, 1.4rem);
	}

	.policy-page--shipping .policy-section h2 {
		font-size: clamp(1.05rem, 4.5vw, 1.25rem);
		flex-wrap: wrap;
	}

	/* Product detail */
	.single-product div.product.pdp {
		padding: 0 16px 48px !important;
	}

	.pdp__title {
		font-size: clamp(26px, 8vw, 32px) !important;
	}

	.pdp__actions,
	.pdp__subscribe {
		width: 100%;
	}

	.pdp__actions .single_add_to_cart_button,
	.pdp__subscribe {
		width: 100%;
		justify-content: center;
	}

	.pdp-disclaimer {
		padding: 14px 14px 14px 16px;
	}

	.single-product .related.products .products {
		grid-template-columns: 1fr !important;
	}

	.single-product .related > h2,
	.single-product .related.products > h2 {
		font-size: 22px;
		padding-inline: 0;
	}

	/* Shop */
	.shop-catalog {
		padding: 24px 16px 48px !important;
	}

	.shop-hero,
	.woocommerce-products-header {
		padding-inline: 16px;
	}

	/* Checkout / cart */
	.site-content--checkout,
	body.woocommerce-checkout #site-content,
	body:has(.wc-block-checkout) #site-content,
	body.woocommerce-cart #site-content {
		padding: 20px 16px 48px !important;
	}

	form.woocommerce-checkout {
		padding-inline: 0 !important;
	}

	.checkout-page-title {
		font-size: clamp(28px, 8vw, 40px);
		margin-bottom: 20px;
	}

	/* Footer */
	.site-footer__inner {
		padding: 32px 16px !important;
	}

	.site-footer__policies {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.site-footer__policies li {
		width: 100%;
	}

	.product-footer-banner__image {
		min-height: 28vh;
		max-height: 40vh;
	}

	/* Popular / home — two compact cards side-by-side on phone */
	.popular-carousel {
		max-width: 100%;
		overflow: hidden;
	}

	.popular-carousel__nav {
		display: none !important;
	}

	.popular-carousel__viewport {
		max-width: 100%;
		width: 100%;
		container-type: normal !important;
	}

	.popular-carousel__track {
		--popular-gap: 12px !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 12px !important;
		padding: 0 !important;
		width: max-content !important;
	}

	.popular-carousel__slide {
		flex: 0 0 calc((100vw - 44px) / 2) !important;
		width: calc((100vw - 44px) / 2) !important;
		min-width: calc((100vw - 44px) / 2) !important;
		max-width: calc((100vw - 44px) / 2) !important;
		padding-inline: 0 !important;
		box-sizing: border-box !important;
	}

	.popular-card,
	.popular-card__media,
	.popular-card__media img,
	.popular-card__image {
		width: 100% !important;
		max-width: 100% !important;
	}

	.popular-card__media {
		aspect-ratio: 1 / 1 !important;
	}

	.popular-card__title {
		font-size: 14px !important;
	}

	.popular-card__meta {
		font-size: 11px !important;
	}

	.popular-card__price,
	.popular-card__price .amount {
		font-size: 14px !important;
	}

	.popular-card__add {
		width: 28px !important;
		height: 28px !important;
		min-width: 28px !important;
		font-size: 18px !important;
	}

	/* Homepage Elementor containers — fill phone width, no side void */
	.elementor-42,
	.elementor-42 > .elementor-element,
	.elementor-42 .e-con,
	.elementor-42 .e-con-full,
	.elementor-42 .e-con-inner,
	.elementor-42 .e-flexbox-base,
	.elementor-42 .e-div-block-base {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		--content-width: 100% !important;
		box-sizing: border-box !important;
	}

	.elementor-42 .elementor-element-a894606,
	.elementor-42 .elementor-element-20b0638 {
		min-height: 0 !important;
		--min-height: auto !important;
		--padding-left: 0 !important;
		--padding-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Hero video section — size to heading content on mobile (ends near PRECISELY.). */
	.elementor-42 .elementor-element-2f3dc59 {
		min-height: 0 !important;
		height: auto !important;
		--min-height: auto !important;
		--padding-left: 0 !important;
		--padding-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.elementor-42 img,
	.elementor-42 video {
		max-width: 100% !important;
		height: auto;
	}

	/* Absolute / motion layers must not expand page width */
	.elementor-42 .elementor-motion-effects-container,
	.elementor-42 .elementor-absolute,
	.elementor-42 .elementor-widget-video,
	.elementor-42 .elementor-background-video-container {
		max-width: 100% !important;
		overflow: hidden;
	}
}

/* —— Small phones (≤480px) —— */
@media (max-width: 480px) {
	.site-header__inner {
		padding: 0 12px;
		height: 48px;
		min-height: 48px;
		gap: 8px;
	}

	.site-logo__img {
		height: 28px !important;
		max-height: 28px !important;
		max-width: 90px !important;
	}

	.site-header__utils {
		gap: 6px;
	}

	.site-header__cart {
		font-size: 11px;
	}

	.site-header__account {
		padding: 7px 10px;
		font-size: 11px;
	}

	.shop-hero__image {
		max-height: 120px;
	}

	.policy-page {
		padding: 1.75rem 16px 3rem !important;
	}

	.single-product div.product.pdp {
		padding: 0 12px 40px !important;
	}

	.pdp__price-row {
		flex-wrap: wrap;
		gap: 8px;
	}

	.pdp-energy__stat-value {
		font-size: clamp(28px, 10vw, 40px);
	}

	.shop-catalog {
		padding: 20px 12px 40px !important;
	}

	.site-content--checkout,
	body.woocommerce-checkout #site-content,
	body:has(.wc-block-checkout) #site-content,
	body.woocommerce-cart #site-content {
		padding: 16px 12px 40px !important;
	}
}