/*
 * Agossa 3.0 — mobile product experience + deterministic variation UX
 * Loaded after all earlier commerce layers.
 */

:root {
	--ag30-ink: #20201e;
	--ag30-muted: #77736c;
	--ag30-paper: #ffffff;
	--ag30-stone: #f5f3ee;
	--ag30-stone-2: #ebe8e1;
	--ag30-line: rgba(32, 32, 30, .12);
	--ag30-line-strong: rgba(32, 32, 30, .22);
	--ag30-dark: #232321;
	--ag30-serif: Georgia, "Times New Roman", serif;
	--ag30-sans: Arial, Helvetica, sans-serif;
}

.single-product .agossa-attribute-mobile-head {
	display: none;
}

/* =========================================================
 * PRODUCT — MOBILE / TABLET PREMIUM SHEET
 * ======================================================= */
@media (max-width: 991.98px) {
	body.single-product {
		background: var(--ag30-stone) !important;
	}

	.single-product .agossa-reference-layout {
		display: block !important;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
		background: #171716 !important;
		isolation: isolate;
	}

	.single-product .agossa-reference-layout .agossa-hero-slider {
		position: relative !important;
		inset: auto !important;
		width: 100% !important;
		height: clamp(390px, 73svh, 590px) !important;
		min-height: 390px !important;
		max-height: 590px !important;
		background: #171716 !important;
		border-radius: 0 !important;
		cursor: grab;
		touch-action: pan-y !important;
	}

	@supports not (height: 73svh) {
		.single-product .agossa-reference-layout .agossa-hero-slider {
			height: clamp(390px, 73vh, 590px) !important;
		}
	}

	.single-product .agossa-reference-layout .agossa-hero-slide-media img {
		object-position: center center !important;
		filter: saturate(24%) contrast(99%) brightness(96%) !important;
		transform: scale(1.003) !important;
	}

	.single-product .agossa-reference-layout .agossa-hero-overlay {
		background:
			linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.03) 48%, rgba(0,0,0,.18) 76%, rgba(0,0,0,.62) 100%) !important;
	}

	.single-product .agossa-reference-layout .agossa-hero-nav {
		top: auto !important;
		right: 16px !important;
		bottom: 50px !important;
		left: auto !important;
		display: flex !important;
		flex-direction: row !important;
		gap: 8px !important;
		transform: none !important;
	}

	.single-product .agossa-reference-layout .agossa-hero-arrow {
		width: 44px !important;
		height: 44px !important;
		border: 1px solid rgba(255,255,255,.28) !important;
		border-radius: 999px !important;
		background: rgba(18,18,17,.34) !important;
		color: #fff !important;
		box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;
		backdrop-filter: blur(10px) !important;
		-webkit-backdrop-filter: blur(10px) !important;
	}

	.single-product .agossa-reference-layout .agossa-hero-arrow > svg {
		width: 23px !important;
		height: 12px !important;
	}

	.single-product .agossa-reference-layout .agossa-product-panel-wrap {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		z-index: 12 !important;
		width: 100% !important;
		max-height: none !important;
		margin: -28px 0 0 !important;
		padding: 0 16px calc(34px + env(safe-area-inset-bottom, 0px)) !important;
		transform: none !important;
		overflow: visible !important;
		background: var(--ag30-stone) !important;
		border-radius: 28px 28px 0 0 !important;
		box-shadow: 0 -14px 38px rgba(15,15,14,.08) !important;
	}

	.single-product .agossa-reference-layout .agossa-product-panel {
		width: 100% !important;
		max-width: 620px !important;
		margin: 0 auto !important;
		padding: 26px 0 0 !important;
		border: 0 !important;
		background: transparent !important;
		color: var(--ag30-ink) !important;
	}

	.single-product .agossa-reference-layout .agossa-gallery-launch-panel {
		top: -78px !important;
		right: 2px !important;
		width: 46px !important;
		height: 46px !important;
		border: 1px solid rgba(255,255,255,.34) !important;
		border-radius: 999px !important;
		background: rgba(18,18,17,.34) !important;
		color: #fff !important;
		box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;
		backdrop-filter: blur(10px) !important;
		-webkit-backdrop-filter: blur(10px) !important;
	}

	.single-product .agossa-reference-layout .agossa-gallery-launch-panel svg {
		width: 21px !important;
		height: 21px !important;
	}

	.single-product .agossa-reference-layout .agossa-panel-header {
		padding: 0 !important;
		color: var(--ag30-ink) !important;
		text-align: left !important;
	}

	.single-product .agossa-reference-layout .agossa-panel-title {
		max-width: calc(100% - 8px);
		margin: 0 !important;
		color: var(--ag30-ink) !important;
		font-family: var(--ag30-serif) !important;
		font-size: clamp(34px, 10vw, 44px) !important;
		font-weight: 400 !important;
		line-height: 1.02 !important;
		letter-spacing: .055em !important;
		text-align: left !important;
		text-shadow: none !important;
	}

	.single-product .agossa-reference-layout .agossa-panel-slogan {
		max-width: 90% !important;
		margin: 10px 0 0 !important;
		color: #6f6b64 !important;
		font-family: var(--ag30-sans) !important;
		font-size: 12.5px !important;
		font-weight: 400 !important;
		line-height: 1.55 !important;
		letter-spacing: .01em !important;
		text-align: left !important;
	}

	.single-product .agossa-reference-layout .agossa-panel-divider {
		width: 100% !important;
		height: 1px !important;
		margin: 20px 0 13px !important;
		background: var(--ag30-line) !important;
	}

	.single-product .agossa-reference-layout .agossa-panel-meta-line {
		justify-content: flex-start !important;
		gap: 4px 8px !important;
		min-height: 18px !important;
		padding: 0 !important;
		color: #77736c !important;
		font-size: 10.5px !important;
		font-weight: 600 !important;
		line-height: 1.45 !important;
		letter-spacing: .07em !important;
		text-align: left !important;
		text-transform: uppercase;
	}

	.single-product .agossa-reference-layout .agossa-panel-meta-line .dot {
		color: #aaa59d !important;
		opacity: 1 !important;
	}

	.single-product .agossa-reference-layout .agossa-panel-price,
	.single-product .agossa-reference-layout .agossa-dynamic-price {
		align-items: flex-start !important;
		justify-content: flex-start !important;
		min-height: 0 !important;
		margin: 18px 0 24px !important;
		color: var(--ag30-ink) !important;
		font-family: var(--ag30-serif) !important;
		font-size: 36px !important;
		line-height: 1 !important;
		text-align: left !important;
	}

	.single-product .agossa-reference-layout .agossa-panel-price > .price,
	.single-product .agossa-reference-layout .agossa-dynamic-price > .price {
		flex-direction: row !important;
		align-items: baseline !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		width: 100% !important;
		color: var(--ag30-ink) !important;
		text-align: left !important;
	}

	.single-product .agossa-reference-layout .agossa-panel-price > .price > .woocommerce-Price-amount,
	.single-product .agossa-reference-layout .agossa-dynamic-price > .price > .woocommerce-Price-amount,
	.single-product .agossa-reference-layout .agossa-panel-price ins,
	.single-product .agossa-reference-layout .agossa-dynamic-price ins,
	.single-product .agossa-reference-layout .agossa-panel-price ins .woocommerce-Price-amount,
	.single-product .agossa-reference-layout .agossa-dynamic-price ins .woocommerce-Price-amount {
		color: var(--ag30-ink) !important;
		font-family: var(--ag30-serif) !important;
		font-size: 36px !important;
		font-weight: 400 !important;
		line-height: 1 !important;
	}

	.single-product .agossa-reference-layout .agossa-panel-price del,
	.single-product .agossa-reference-layout .agossa-dynamic-price del,
	.single-product .agossa-reference-layout .agossa-panel-price del .woocommerce-Price-amount,
	.single-product .agossa-reference-layout .agossa-dynamic-price del .woocommerce-Price-amount {
		color: #8d8982 !important;
		font-family: var(--ag30-sans) !important;
		font-size: 11px !important;
		font-weight: 400 !important;
	}

	.single-product .agossa-reference-layout .variations_form.cart {
		margin: 0 !important;
	}

	.single-product .agossa-reference-layout .agossa-panel-options {
		gap: 15px !important;
	}

	.single-product .agossa-reference-layout .agossa-attribute-block {
		display: grid;
		gap: 8px;
	}

	.single-product .agossa-reference-layout .agossa-attribute-mobile-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 17px;
		padding: 0 2px;
	}

	.single-product .agossa-reference-layout .agossa-attribute-mobile-label {
		color: #57534d;
		font-size: 10px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: .12em;
		text-transform: uppercase;
	}

	.single-product .agossa-reference-layout .agossa-attribute-mobile-current {
		max-width: 55%;
		overflow: hidden;
		color: #908b83;
		font-size: 10px;
		font-weight: 500;
		line-height: 1;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.single-product .agossa-reference-layout .agossa-attribute-pills {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
	}

	.single-product .agossa-reference-layout .agossa-attr-pill {
		height: 54px !important;
		min-height: 54px !important;
		padding: 0 14px !important;
		border: 1px solid var(--ag30-line-strong) !important;
		border-radius: 999px !important;
		background: rgba(255,255,255,.72) !important;
		color: #5e5a54 !important;
		box-shadow: 0 1px 0 rgba(255,255,255,.7) inset !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		letter-spacing: .01em !important;
	}

	.single-product .agossa-reference-layout .agossa-attr-pill.is-active {
		border-color: var(--ag30-dark) !important;
		background: var(--ag30-dark) !important;
		color: #fff !important;
		box-shadow: 0 9px 22px rgba(32,32,30,.10) !important;
	}

	.single-product .agossa-reference-layout .agossa-attribute-select-wrap {
		position: relative;
	}

	.single-product .agossa-reference-layout .agossa-custom-select {
		height: 56px !important;
		min-height: 56px !important;
		padding: 0 48px 0 16px !important;
		border: 1px solid var(--ag30-line-strong) !important;
		border-radius: 14px !important;
		background: rgba(255,255,255,.82) !important;
		color: var(--ag30-ink) !important;
		box-shadow: 0 1px 0 rgba(255,255,255,.75) inset !important;
		font-size: 13px !important;
		font-weight: 550 !important;
	}

	.single-product .agossa-reference-layout .agossa-custom-select:focus {
		border-color: #716d66 !important;
		background: #fff !important;
		box-shadow: 0 0 0 3px rgba(32,32,30,.06) !important;
	}

	.single-product .agossa-reference-layout .agossa-select-caret {
		right: 18px !important;
		border-color: #69655f !important;
	}

	.single-product .agossa-reference-layout .agossa-quantity-row {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
		margin-top: 1px;
	}

	.single-product .agossa-reference-layout .agossa-quantity-row:has(.agossa-measure-box.is-hidden) {
		grid-template-columns: 1fr !important;
	}

	.single-product .agossa-reference-layout .agossa-qty-box,
	.single-product .agossa-reference-layout .agossa-measure-box {
		height: 56px !important;
		min-height: 56px !important;
		border: 1px solid var(--ag30-line) !important;
		border-radius: 999px !important;
		background: #fff !important;
		color: var(--ag30-ink) !important;
		box-shadow: 0 7px 20px rgba(34,33,30,.035) !important;
	}

	.single-product .agossa-reference-layout .agossa-qty-box {
		grid-template-columns: 36px minmax(30px, 1fr) auto 36px !important;
		gap: 3px !important;
		padding: 0 8px !important;
	}

	.single-product .agossa-reference-layout .agossa-qty-minus,
	.single-product .agossa-reference-layout .agossa-qty-plus {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		color: #403d38 !important;
		font-size: 17px !important;
	}

	.single-product .agossa-reference-layout .agossa-qty-box .qty,
	.single-product .agossa-reference-layout .agossa-measure-input {
		color: var(--ag30-ink) !important;
		font-size: 14px !important;
		font-weight: 700 !important;
	}

	.single-product .agossa-reference-layout .agossa-qty-label,
	.single-product .agossa-reference-layout .agossa-measure-unit {
		color: #8c877f !important;
		font-size: 9px !important;
		font-weight: 500 !important;
		letter-spacing: .02em !important;
	}

	.single-product .agossa-reference-layout .agossa-measure-box {
		padding: 0 15px 0 18px !important;
	}

	.single-product .agossa-reference-layout .single_variation_wrap {
		margin-top: 0 !important;
	}

	.single-product .agossa-reference-layout .single_add_to_cart_button.button,
	.single-product .agossa-reference-layout .single_add_to_cart_button.button.alt {
		height: 58px !important;
		min-height: 58px !important;
		margin: 1px 0 0 !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: var(--ag30-dark) !important;
		color: #fff !important;
		box-shadow: 0 12px 26px rgba(32,32,30,.12) !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		letter-spacing: .075em !important;
	}

	.single-product .agossa-reference-layout .agossa-attr-pill:focus-visible,
	.single-product .agossa-reference-layout .agossa-custom-select:focus-visible,
	.single-product .agossa-reference-layout .agossa-qty-minus:focus-visible,
	.single-product .agossa-reference-layout .agossa-qty-plus:focus-visible,
	.single-product .agossa-reference-layout .agossa-measure-input:focus-visible,
	.single-product .agossa-reference-layout .single_add_to_cart_button:focus-visible {
		outline: 2px solid rgba(32,32,30,.66) !important;
		outline-offset: 2px !important;
	}

	.single-product .agossa-reference-layout .agossa-variation-description {
		display: none !important;
	}

	/* Fullscreen gallery feels native on phones. */
	.single-product .agossa-gallery-modal-dialog {
		grid-template-rows: calc(58px + env(safe-area-inset-top, 0px)) minmax(0, 1fr) calc(72px + env(safe-area-inset-bottom, 0px)) !important;
	}

	.single-product .agossa-gallery-modal-topbar {
		padding-top: env(safe-area-inset-top, 0px) !important;
	}

	.single-product .agossa-gallery-modal-stage {
		grid-template-columns: 0 minmax(0, 1fr) 0 !important;
		padding: 0 !important;
	}

	.single-product .agossa-gallery-modal-nav {
		position: absolute !important;
		top: 50% !important;
		z-index: 6 !important;
		width: 46px !important;
		height: 46px !important;
		transform: translateY(-50%) !important;
		background: rgba(20,20,19,.40) !important;
		border-radius: 999px !important;
		backdrop-filter: blur(10px) !important;
		-webkit-backdrop-filter: blur(10px) !important;
	}

	.single-product .agossa-gallery-modal-prev { left: 12px !important; }
	.single-product .agossa-gallery-modal-next { right: 12px !important; }

	/* Product details continue the same paper / stone language. */
	.single-product .agossa-hero-product > .agossa-product-details {
		background: var(--ag30-stone) !important;
	}

	.single-product .agossa-product-tabs {
		padding: 56px 16px 72px !important;
	}

	.single-product .agossa-product-tabs-heading {
		gap: 8px !important;
		margin-bottom: 20px !important;
	}

	.single-product .agossa-product-tabs-kicker {
		margin: 0 0 1px !important;
		font-size: 9px !important;
		letter-spacing: .16em !important;
	}

	.single-product .agossa-product-tabs-heading h2 {
		font-size: 34px !important;
		line-height: 1.03 !important;
	}

	.single-product .agossa-product-tab-nav,
	.single-product .woocommerce-tabs ul.tabs.agossa-product-tab-nav {
		gap: 7px !important;
		margin-bottom: 14px !important;
		padding-bottom: 2px !important;
		scroll-snap-type: x proximity;
	}

	.single-product .agossa-product-tab-nav li,
	.single-product .woocommerce-tabs ul.tabs.agossa-product-tab-nav li {
		scroll-snap-align: start;
	}

	.single-product .agossa-product-tab-nav li a {
		min-height: 40px !important;
		padding: 0 15px !important;
		background: rgba(255,255,255,.62) !important;
		font-size: 10px !important;
	}

	.single-product .agossa-product-tab-nav li.active a {
		background: var(--ag30-dark) !important;
	}

	.single-product .agossa-product-tab-panels {
		border: 1px solid var(--ag30-line) !important;
		border-radius: 22px !important;
		background: rgba(255,255,255,.82) !important;
		box-shadow: 0 18px 48px rgba(32,32,30,.045) !important;
		overflow: hidden;
	}

	.single-product .agossa-product-tab-panel,
	.single-product .woocommerce-tabs .panel {
		padding: 26px 20px !important;
		font-size: 13.5px !important;
		line-height: 1.75 !important;
	}

	.single-product .agossa-product-tab-panel > h2:first-child,
	.single-product .agossa-product-tab-panel .woocommerce-Reviews-title {
		font-size: 28px !important;
		line-height: 1.08 !important;
	}

	.single-product #reviews.woocommerce-Reviews {
		grid-template-columns: 1fr !important;
		gap: 30px !important;
	}

	.single-product #reviews .comment_container {
		padding: 18px 16px 18px 64px !important;
		border-radius: 16px !important;
		background: #f7f5f0 !important;
	}

	.single-product #review_form #respond {
		padding: 22px 17px !important;
		border: 1px solid var(--ag30-line) !important;
		border-radius: 18px !important;
		background: #f7f5f0 !important;
	}
}

@media (max-width: 430px) {
	.single-product .agossa-reference-layout .agossa-hero-slider {
		height: clamp(370px, 67svh, 520px) !important;
		min-height: 370px !important;
	}

	.single-product .agossa-reference-layout .agossa-product-panel-wrap {
		margin-top: -24px !important;
		padding-right: 14px !important;
		padding-left: 14px !important;
		border-radius: 24px 24px 0 0 !important;
	}

	.single-product .agossa-reference-layout .agossa-product-panel {
		padding-top: 24px !important;
	}

	.single-product .agossa-reference-layout .agossa-panel-title {
		font-size: clamp(32px, 9.4vw, 40px) !important;
		letter-spacing: .045em !important;
	}

	.single-product .agossa-reference-layout .agossa-panel-price,
	.single-product .agossa-reference-layout .agossa-dynamic-price,
	.single-product .agossa-reference-layout .agossa-panel-price > .price > .woocommerce-Price-amount,
	.single-product .agossa-reference-layout .agossa-dynamic-price > .price > .woocommerce-Price-amount,
	.single-product .agossa-reference-layout .agossa-panel-price ins,
	.single-product .agossa-reference-layout .agossa-dynamic-price ins,
	.single-product .agossa-reference-layout .agossa-panel-price ins .woocommerce-Price-amount,
	.single-product .agossa-reference-layout .agossa-dynamic-price ins .woocommerce-Price-amount {
		font-size: 34px !important;
	}

	.single-product .agossa-reference-layout .agossa-quantity-row {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.single-product .agossa-reference-layout .agossa-qty-box {
		grid-template-columns: 32px minmax(24px, 1fr) auto 32px !important;
		padding: 0 7px !important;
	}

	.single-product .agossa-reference-layout .agossa-qty-minus,
	.single-product .agossa-reference-layout .agossa-qty-plus {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
	}
}

@media (max-width: 359.98px) {
	.single-product .agossa-reference-layout .agossa-quantity-row {
		grid-template-columns: 1fr !important;
	}

	.single-product .agossa-reference-layout .agossa-panel-title {
		font-size: 31px !important;
	}

	.single-product .agossa-product-tabs {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}
}

/* The desktop reference look remains unchanged; only the helper labels stay hidden. */
@media (min-width: 992px) {
	.single-product .agossa-attribute-mobile-head {
		display: none !important;
	}
}
