/*
 * Elixir Aroma responsive architecture.
 *
 * This is the final authority for shared viewport geometry. Keep page-specific
 * typography and content rules in their existing stylesheets; put only common
 * header, gutter and breadcrumb-banner geometry here.
 */

:root {
	--elixir-narrow-gutter: clamp(10px, 3.75vw, 24px);
	--elixir-wide-gutter: 30px;
}

/* A breadcrumb banner is one visual unit: section, image layer and content
 * always receive the same minimum height. */
.gurantee-section.breadcrum-banner {
	--elixir-banner-height: 350px;
	position: relative;
	min-height: var(--elixir-banner-height);
}

.gurantee-section.breadcrum-banner.height-400,
.gurantee-section.breadcrum-banner.h-400 {
	--elixir-banner-height: 400px;
}

.gurantee-section.breadcrum-banner.height-350,
.gurantee-section.breadcrum-banner.h-350 {
	--elixir-banner-height: 350px;
}

.gurantee-section.breadcrum-banner.newListPdiv.bigBannerHeight {
	--elixir-banner-height: 510px;
}

.gurantee-section.breadcrum-banner.prod-new-list-bnr-wrap.bigBannerHeight {
	--elixir-banner-height: 590px;
}

.gurantee-section.breadcrum-banner > .gurantee-section-bg,
.gurantee-section.breadcrum-banner > .gurantee-section-bg > .gurantee-content {
	box-sizing: border-box !important;
	min-height: var(--elixir-banner-height) !important;
}

@media (min-width: 300px) and (max-width: 999px) {
	.container {
		width: 100%;
		max-width: none;
		padding-right: var(--elixir-narrow-gutter);
		padding-left: var(--elixir-narrow-gutter);
	}

	.logo-section .container {
		padding-right: var(--elixir-narrow-gutter);
		padding-left: var(--elixir-narrow-gutter);
	}

	.logo-search-account-container {
		gap: 12px;
		min-width: 0;
	}

	.logo-container,
	.loginCart-section {
		min-width: 0;
	}

	.mobile-search-3bar {
		width: 100%;
		box-sizing: border-box;
	}

	.mobile-search-3bar .mobileNewSearch {
		min-width: 0;
		flex: 1 1 auto;
	}

	.mobile-search-3bar input,
	.mobile-search-3bar .mobileNewSearch input {
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}

	.gurantee-section.breadcrum-banner > .gurantee-section-bg,
	.gurantee-section.breadcrum-banner > .gurantee-section-bg > .gurantee-content {
		height: var(--elixir-banner-height) !important;
		margin-top: 0 !important;
	}

	.gurantee-section.breadcrum-banner {
		box-sizing: border-box !important;
		height: var(--elixir-banner-height) !important;
		min-height: var(--elixir-banner-height) !important;
	}

	/* Categories and real product pages share the same structural principle:
	 * the heading group is centered in the image, while the product back-link
	 * remains an independent element at the lower edge. Legacy banner padding
	 * (30px and an asymmetric 64px/80px pair) moved the flex context down.
	 * Keep the homepage untouched: it uses .banner, not these page classes. */
	.gurantee-section.breadcrum-banner.essent_oilBanner-wrap > .gurantee-section-bg,
	.gurantee-section.breadcrum-banner.bigBannerHeight.bannerBtm2Line > .gurantee-section-bg {
		display: flex !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.gurantee-section.breadcrum-banner.essent_oilBanner-wrap > .gurantee-section-bg > .gurantee-content,
	.gurantee-section.breadcrum-banner.bigBannerHeight.bannerBtm2Line > .gurantee-section-bg > .gurantee-content {
		gap: clamp(12px, 1.8vw, 20px) !important;
		justify-content: center !important;
	}

	.gurantee-section.breadcrum-banner.essent_oilBanner-wrap > .gurantee-section-bg > .gurantee-content h1,
	.gurantee-section.breadcrum-banner.essent_oilBanner-wrap > .gurantee-section-bg > .gurantee-content p,
	.gurantee-section.breadcrum-banner.bigBannerHeight.bannerBtm2Line > .gurantee-section-bg > .gurantee-content h1,
	.gurantee-section.breadcrum-banner.bigBannerHeight.bannerBtm2Line > .gurantee-section-bg > .gurantee-content p {
		margin: 0 !important;
	}

	.gurantee-section.breadcrum-banner.essent_oilBanner-wrap > .gurantee-section-bg > .gurantee-content h1,
	.gurantee-section.breadcrum-banner.bigBannerHeight.bannerBtm2Line > .gurantee-section-bg > .gurantee-content h1 {
		text-wrap: balance;
	}

	.gurantee-section.breadcrum-banner.essent_oilBanner-wrap > .gurantee-section-bg > .gurantee-content p,
	.gurantee-section.breadcrum-banner.bigBannerHeight.bannerBtm2Line > .gurantee-section-bg > .gurantee-content p {
		text-wrap: pretty;
	}

	/* A cart row is already a mobile composition in the template. Its outer
	 * wrappers must therefore follow the page gutter instead of table sizing. */
	.woocommerce-cart .cart-wrapper,
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-cart .custom-shopcart-table,
	.woocommerce-cart .custom-shopcart-table tbody,
	.woocommerce-cart .custom-shopcart-table tr.elixir-cart-row,
	.woocommerce-cart .custom-shopcart-table td,
	.woocommerce-cart .custom-shopcart-table .product-detail,
	.woocommerce-cart .custom-shopcart-table .prod-title-sub-wgt-offer-wrapper {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.woocommerce-cart .custom-shopcart-table .prod-title-sub-wgt-offer-wrapper,
	.woocommerce-cart .custom-shopcart-table .prod-incl {
		white-space: normal;
	}

	/* WooCommerce fields, including Select2, use the same gutter contract as
	 * the checkout section. This prevents a 100%-wide control plus padding. */
	.woocommerce-checkout form.checkout,
	.woocommerce-checkout form.checkout .woocommerce-billing-fields,
	.woocommerce-checkout form.checkout .form-row,
	.woocommerce-checkout form.checkout .woocommerce-input-wrapper,
	.woocommerce-checkout form.checkout .select2-container,
	.woocommerce-checkout form.checkout input.input-text,
	.woocommerce-checkout form.checkout select,
	.woocommerce-checkout form.checkout textarea {
		box-sizing: border-box !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.woocommerce-checkout form.checkout .form-row,
	.woocommerce-checkout form.checkout .woocommerce-input-wrapper,
	.woocommerce-checkout form.checkout .select2-container,
	.woocommerce-checkout form.checkout input.input-text,
	.woocommerce-checkout form.checkout select,
	.woocommerce-checkout form.checkout textarea {
		width: 100% !important;
	}

	/* The cart asset is visually lighter than the key icon. Give only that
	 * artwork the same 42px box as the login icon; button geometry stays put. */
	.logo-section .loginCart-section .cart img {
		width: 42px !important;
		height: 42px !important;
	}

	/* Quick view is one touch-first composition throughout the narrow layout.
	 * Older styles switch it at 767px and contain a separate 800–999px rule
	 * that shrinks the product image to 18%. Keep the visual contract tied to
	 * the viewport: image, product options and CTA always stack in this range. */
	#myModal5 .modal-dialog.modal-lg {
		width: min(calc(100vw - 32px), 720px) !important;
		max-width: calc(100vw - 32px) !important;
		margin: 16px auto !important;
	}

	#myModal5 .modal-content {
		max-height: calc(100dvh - 32px) !important;
		overflow-x: hidden !important;
	}

	#myModal5 .modal-header {
		top: 8px !important;
		right: 8px !important;
	}

	#myModal5 .modal-header .close.popup_closed_btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		height: 44px !important;
		margin: 0 !important;
		padding: 8px !important;
		right: auto !important;
	}

	#myModal5 .modal-header .close.popup_closed_btn img {
		max-width: 100% !important;
		max-height: 100% !important;
	}

	#myModal5 .modal-body {
		padding: clamp(20px, 3vw, 28px) clamp(16px, 4vw, 28px) 24px !important;
	}

	#myModal5 .quickModal-divide-wrap {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: clamp(20px, 3vw, 28px) !important;
		align-items: start !important;
	}

	#myModal5 .modal-left-image {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 0 !important;
		padding: clamp(16px, 4vw, 28px) !important;
	}

	#myModal5 .modal-left-image img {
		display: block !important;
		width: min(82%, 420px) !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: min(42dvh, 360px) !important;
		margin: 0 auto !important;
		object-fit: contain !important;
	}

	#myModal5 .elixir-quickview-form {
		min-width: 0 !important;
	}

	#myModal5 .essentialModalHeader {
		margin: 0 52px 20px 0 !important;
		padding-bottom: 14px !important;
		text-align: left !important;
	}

	#myModal5 .essentialModalHeader h4 {
		font-size: clamp(28px, 4vw, 34px) !important;
		line-height: 1.08 !important;
		text-align: left !important;
	}

	#myModal5 .essentialModalHeader p {
		font-size: clamp(20px, 3.2vw, 26px) !important;
		line-height: 1.2 !important;
		text-align: left !important;
	}

	#myModal5 .quickModal-divide-wrap form table {
		display: block !important;
		width: 100% !important;
		margin-bottom: 0 !important;
	}

	#myModal5 .quickModal-divide-wrap table tbody {
		display: block !important;
		width: 100% !important;
	}

	#myModal5 .quickModal-divide-wrap table tbody tr.table-prod-tr {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto !important;
		gap: 10px 16px !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 14px 0 !important;
	}

	#myModal5 .quickModal-divide-wrap table tbody tr.table-prod-tr td {
		min-width: 0 !important;
		padding: 0 !important;
	}

	#myModal5 .quickModal-divide-wrap table tbody tr.table-prod-tr td:first-child {
		grid-column: 1 / -1 !important;
	}

	#myModal5 .quickModal-divide-wrap table tbody tr.table-prod-tr td:nth-of-type(2) {
		grid-column: 1 !important;
	}

	#myModal5 .quickModal-divide-wrap table tbody tr.table-prod-tr td:nth-of-type(3) {
		position: static !important;
		right: auto !important;
		bottom: auto !important;
		grid-column: 2 !important;
	}

	#myModal5 .single-prod-right-wrap .table_col2,
	#myModal5 .quickModal-divide-wrap .table_col2 {
		display: block !important;
		width: auto !important;
	}

	#myModal5 .single-prod-right-wrap .col2-span-wrap {
		display: flex !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		text-align: left !important;
	}

	#myModal5 .quickModal-divide-wrap .col2-span-wrap .table-span-regular.cut__price {
		position: static !important;
		left: auto !important;
		width: auto !important;
		justify-content: flex-start !important;
		text-align: left !important;
	}

	#myModal5 .table_col3 {
		display: flex !important;
		justify-content: flex-end !important;
	}

	#myModal5 .handle-counter {
		grid-template-columns: repeat(3, 44px) !important;
		gap: 4px !important;
		min-height: 44px !important;
	}

	#myModal5 .handle-counter button,
	#myModal5 .handle-counter input.counter-value {
		width: 44px !important;
		height: 44px !important;
		min-height: 44px !important;
	}

	#myModal5 .prod-cart-wrapper button.addnowcart {
		width: 100% !important;
		min-height: 52px !important;
	}
}

/* The authenticated header has three controls rather than one. At the
 * smallest supported viewport the controls stay reachable as labelled icons
 * instead of forcing the whole document wider than the viewport. */
@media (min-width: 300px) and (max-width: 374px) {
	.logo-section .logo-container {
		flex: 0 1 96px;
	}

	.logo-section .logo-container img {
		width: 96px !important;
		max-width: 100%;
	}

	.logo-section .loginCart-section {
		flex: 0 1 auto;
		margin-left: auto;
	}

	.logo-section .loginCart-section .login,
	.logo-section .loginCart-section .cart {
		padding-right: 5px !important;
		padding-left: 5px !important;
	}

	.logo-section .loginCart-section a {
		font-size: 0 !important;
	}

	.logo-section .loginCart-section img,
	.logo-section .loginCart-section .login.account img.elixir-header-account-icon,
	.logo-section .loginCart-section .login:not(.account) img,
	.logo-section .loginCart-section .cart img {
		width: 30px !important;
		height: 30px !important;
		margin-bottom: 0 !important;
	}
}

@media (min-width: 1000px) {
	.container {
		padding-right: var(--elixir-wide-gutter);
		padding-left: var(--elixir-wide-gutter);
	}

	/* The logout and cart controls meet at one deliberate divider. The
	 * historical styles draw a rule from both controls; own the join here
	 * with the logout edge and disable the cart's duplicate pseudo-element. */
	.logo-section .loginCart-section .login.logout {
		border-right: 0 !important;
	}

	.logo-section .loginCart-section .login.logout::after {
		content: "" !important;
		display: block !important;
		position: absolute;
		top: 50%;
		right: 0;
		left: auto;
		width: 3px !important;
		height: 104px;
		background: rgba(255, 255, 255, .9);
		transform: translateY(-50%);
	}

	.logo-section .loginCart-section .login.logout + .cart {
		border-left: 0 !important;
	}

	.logo-section .loginCart-section .login.logout + .cart::before {
		content: none !important;
		display: none !important;
	}

	/* The control group reads as one system only when every exposed edge has
	 * the same weight: account left, account/logout split, logout/cart split,
	 * and the cart's outer edge. */
	.logo-section .loginCart-section .login.account::before,
	.logo-section .loginCart-section .login.logout::before,
	.logo-section .loginCart-section .cart::after {
		width: 3px !important;
	}

	.mobile-search-3bar,
	.mobile-nav-hide {
		display: none;
	}
}