/*
 * LuxuryBedroom Mobile Experience
 * Warstwa responsywna pozostająca poza motywem i wtyczkami aktualizowanymi zewnętrznie.
 */

:root {
	--lbme-gold: var(--theme-palette-color-2, #bf9e4e);
	--lbme-ink: var(--theme-palette-color-4, #111518);
	--lbme-muted: var(--theme-palette-color-3, #64696d);
	--lbme-line: rgba(17, 21, 24, 0.1);
	--lbme-mobile-header-height: 88px;
	--lbme-mobile-logo-width: 205px;
}

@media (max-width: 999px) {
	html {
		scroll-padding-top: calc(var(--lbme-mobile-header-height) + 18px);
	}

	body.lbme-mobile-experience {
		overflow-x: clip;
	}

	body.lbme-sticky-mobile-header header#header {
		position: sticky;
		top: 0;
		z-index: 100;
	}

	body.admin-bar.lbme-sticky-mobile-header header#header {
		top: 46px;
	}

	header.ct-header > [data-device="mobile"] [data-row="middle"] {
		--height: var(--lbme-mobile-header-height) !important;
		background: #fff;
		border-bottom: 1px solid rgba(17, 21, 24, 0.06);
		box-shadow: 0 10px 30px rgba(17, 21, 24, 0);
		transition: box-shadow 180ms ease;
	}

	body.lbme-has-scrolled header.ct-header > [data-device="mobile"] [data-row="middle"] {
		box-shadow: 0 10px 30px rgba(17, 21, 24, 0.08);
	}

	header.ct-header > [data-device="mobile"] [data-row="middle"] > .ct-container {
		gap: 8px;
		grid-template-columns: minmax(0, 1fr) auto !important;
	}

	header.ct-header > [data-device="mobile"] [data-column="start"],
	header.ct-header > [data-device="mobile"] [data-column="start"] [data-items],
	header.ct-header > [data-device="mobile"] [data-id="logo"] {
		min-width: 0;
	}

	header.ct-header > [data-device="mobile"] [data-id="logo"] {
		--logo-max-height: none !important;
		margin-inline-end: 0 !important;
		max-width: min(var(--lbme-mobile-logo-width), calc(100vw - 170px));
		width: 100%;
	}

	header.ct-header > [data-device="mobile"] [data-id="logo"] .site-logo-container,
	header.ct-header > [data-device="mobile"] [data-id="logo"] img.lbme-mobile-logo {
		display: block;
		height: auto;
		max-height: none;
		max-width: 100%;
		width: 100%;
	}

	header.ct-header > [data-device="mobile"] [data-column="end"] [data-items] {
		align-items: center;
		display: flex;
		gap: 4px;
	}

	header.ct-header > [data-device="mobile"] [data-id="account"],
	header.ct-header > [data-device="mobile"] [data-id="cart"],
	header.ct-header > [data-device="mobile"] [data-id="trigger"] {
		height: 40px;
		margin: 0 !important;
		min-width: 40px;
		width: 40px;
	}

	header.ct-header > [data-device="mobile"] [data-id="account"] > a,
	header.ct-header > [data-device="mobile"] [data-id="cart"] > a,
	header.ct-header > [data-device="mobile"] [data-id="trigger"] {
		align-items: center;
		border-radius: 999px;
		display: flex;
		height: 40px;
		justify-content: center;
		transition: background-color 160ms ease, color 160ms ease;
		width: 40px;
	}

	header.ct-header > [data-device="mobile"] [data-id="account"] > a:hover,
	header.ct-header > [data-device="mobile"] [data-id="cart"] > a:hover,
	header.ct-header > [data-device="mobile"] [data-id="trigger"]:hover {
		background: #f4f1eb;
	}

	header.ct-header > [data-device="mobile"] [data-id="account"] svg,
	header.ct-header > [data-device="mobile"] [data-id="cart"] svg {
		height: 19px;
		width: 19px;
	}

	header.ct-header > [data-device="mobile"] [data-id="trigger"] svg {
		height: 16px;
		width: 20px;
	}

	#offcanvas {
		--side-panel-width: min(360px, 92vw) !important;
	}

	#offcanvas .ct-panel-actions {
		padding: 12px;
	}

	#offcanvas .ct-toggle-close {
		height: 44px;
		width: 44px;
	}

	#offcanvas .ct-panel-content[data-device="mobile"] .ct-panel-content-inner {
		padding: 30px 24px 40px;
	}

	#offcanvas [data-id="offcanvas-logo"] {
		--logo-max-height: none !important;
		display: block;
		margin-bottom: 24px;
		max-width: 220px;
		width: min(220px, 72vw);
	}

	#offcanvas [data-id="offcanvas-logo"] img.lbme-mobile-logo {
		display: block;
		height: auto;
		width: 100%;
	}

	#offcanvas [data-id="mobile-menu"] {
		--theme-font-size: 18px;
	}

	#offcanvas [data-id="mobile-menu"] .ct-menu-link {
		align-items: center;
		display: flex;
		line-height: 1.25;
		min-height: 44px;
		padding-block: 8px;
	}

	#offcanvas [data-id="text"] {
		font-size: 15px;
		line-height: 1.45;
		margin-top: 24px;
	}

	#offcanvas [data-id="text"] p {
		margin: 0;
	}

	body.lbme-hide-mobile-menu-categories #offcanvas [data-device="mobile"] [data-id="content-block"] {
		display: none !important;
	}

	#offcanvas .lbme-category-count {
		color: rgba(255, 255, 255, 0.62);
	}

	body.home .entry-content > .wp-block-greenshift-blocks-row:first-child {
		margin-bottom: 28px !important;
		padding-block: 36px !important;
	}

	body.home .entry-content h1 {
		font-size: clamp(29px, 8vw, 36px) !important;
		line-height: 1.14 !important;
		text-wrap: balance;
	}

	body.home .entry-content h2 {
		line-height: 1.22;
		text-wrap: balance;
	}

	body.home a.gspb-buttonbox {
		min-height: 52px;
	}

	body.home .lbme-home-categories {
		scroll-margin-top: calc(var(--lbme-mobile-header-height) + 18px);
	}

	body.home .lbme-home-categories .wp-block-term > .gspb_container {
		align-items: center !important;
		background: #fff;
		border: 1px solid var(--lbme-line) !important;
		border-radius: 16px !important;
		box-shadow: 0 14px 34px rgba(17, 21, 24, 0.055);
		display: grid !important;
		gap: 4px 16px !important;
		grid-template-columns: 96px minmax(0, 1fr) !important;
		grid-template-rows: auto auto !important;
		min-height: 116px;
		padding: 16px !important;
	}

	body.home .lbme-home-categories .wp-block-term .ct-dynamic-media {
		border-radius: 12px;
		grid-column: 1;
		grid-row: 1 / 3;
		height: 76px !important;
		overflow: hidden;
		width: 96px !important;
	}

	body.home .lbme-home-categories .wp-block-term .ct-dynamic-media img {
		height: 100% !important;
		object-fit: cover !important;
		width: 100% !important;
	}

	body.home .lbme-home-categories .wp-block-term h5.ct-dynamic-data {
		align-self: end;
		grid-column: 2;
		grid-row: 1;
		line-height: 1.35;
		margin: 0 !important;
		text-align: left !important;
	}

	body.home .lbme-home-categories .wp-block-term h5.ct-dynamic-data a {
		color: var(--lbme-ink);
	}

	body.home .lbme-home-categories .wp-block-term .lbme-category-count {
		align-self: start;
		color: var(--lbme-muted);
		font-size: 13px !important;
		grid-column: 2;
		grid-row: 2;
		line-height: 1.35 !important;
		text-align: left !important;
	}

	body.home .lbme-home-categories .wp-block-term > .gspb_container:not(:has(.ct-dynamic-media))::before {
		background: linear-gradient(145deg, #f3efe8, #e6ded2);
		border-radius: 12px;
		content: '';
		grid-column: 1;
		grid-row: 1 / 3;
		height: 76px;
		width: 96px;
	}

	body.lbme-compact-home-copy.home .wp-block-cover.has-aspect-ratio {
		aspect-ratio: auto !important;
		max-width: none !important;
		min-height: 0 !important;
		padding: 42px 24px !important;
		width: 100% !important;
	}

	body.lbme-compact-home-copy.home .wp-block-cover.has-aspect-ratio .wp-block-cover__inner-container {
		max-width: 620px;
		width: 100%;
	}

	body.lbme-compact-home-copy.home .wp-block-cover.has-aspect-ratio p {
		font-size: 16px !important;
		line-height: 1.68 !important;
		margin-bottom: 28px !important;
		max-width: 62ch;
		text-align: left !important;
	}

	body.lbme-compact-home-copy.home .wp-block-cover.has-aspect-ratio p:last-child {
		margin-bottom: 0 !important;
	}

	body.lbme-compact-home-copy.home .entry-content > .wp-block-group.alignfull:has(.wp-block-cover.has-aspect-ratio) > .wp-block-group {
		max-width: 720px;
		padding: 0 !important;
		width: 100% !important;
	}

	body.lbme-compact-home-copy.home .entry-content > .wp-block-group.alignfull:has(.wp-block-cover.has-aspect-ratio) {
		padding: 38px 0 !important;
	}

	body.woocommerce-shop .entry-content h1,
	body.post-type-archive-product .entry-content h1 {
		font-size: clamp(28px, 7.7vw, 34px) !important;
		line-height: 1.16 !important;
		text-wrap: balance;
	}

	.woo-listing-top [href="#woo-filters-panel"],
	.woo-listing-top .woocommerce-ordering {
		min-height: 44px;
	}

	[data-products] .product {
		overflow: hidden;
	}

	[data-products] .product .ct-woo-card-extra {
		width: 40px;
	}

	[data-products] .product .ct-woo-card-extra button,
	[data-products] .product .ct-woo-card-extra a {
		height: 40px;
		min-height: 40px;
		min-width: 40px;
		width: 40px;
	}

	body.single-product .product-entry-wrapper {
		padding-top: 20px;
	}

	body.single-product .woocommerce-product-gallery {
		margin-bottom: 30px;
	}

	body.single-product .entry-summary .entry-title {
		font-size: clamp(32px, 9vw, 38px) !important;
		line-height: 1.08 !important;
		text-wrap: balance;
	}

	body.single-product .entry-summary .price {
		font-size: clamp(28px, 8vw, 34px) !important;
		line-height: 1.15;
	}

	body.single-product .ct-breadcrumbs {
		overflow-x: auto;
		scrollbar-width: none;
	}

	body.single-product .ct-breadcrumbs::-webkit-scrollbar {
		display: none;
	}

	body.single-product .wbc-config-header h2 {
		font-size: clamp(30px, 8.5vw, 36px);
		line-height: 1.12;
		text-wrap: balance;
	}

	body.single-product .wbc-choice-shell,
	body.single-product .wbc-product-action-card,
	body.single-product .wbc-summary {
		box-shadow: 0 12px 34px rgba(17, 21, 24, 0.045);
	}

	.lbme-mobile-experience :where(a, button, input, select, textarea):focus-visible {
		outline: 3px solid #bf9e4e;
		outline: 3px solid color-mix(in srgb, var(--lbme-gold) 72%, white);
		outline-offset: 3px;
	}
}

@media (min-width: 783px) and (max-width: 999px) {
	body.admin-bar.lbme-sticky-mobile-header header#header {
		top: 32px;
	}
}

@media (max-width: 374px) {
	header.ct-header > [data-device="mobile"] [data-id="logo"] {
		max-width: min(var(--lbme-mobile-logo-width), calc(100vw - 158px));
	}

	header.ct-header > [data-device="mobile"] [data-id="account"],
	header.ct-header > [data-device="mobile"] [data-id="cart"],
	header.ct-header > [data-device="mobile"] [data-id="trigger"],
	header.ct-header > [data-device="mobile"] [data-id="account"] > a,
	header.ct-header > [data-device="mobile"] [data-id="cart"] > a {
		height: 38px;
		min-width: 38px;
		width: 38px;
	}

	body.home .lbme-home-categories .wp-block-term > .gspb_container {
		gap: 4px 12px !important;
		grid-template-columns: 82px minmax(0, 1fr) !important;
		padding: 14px !important;
	}

	body.home .lbme-home-categories .wp-block-term .ct-dynamic-media,
	body.home .lbme-home-categories .wp-block-term > .gspb_container:not(:has(.ct-dynamic-media))::before {
		height: 68px !important;
		width: 82px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lbme-mobile-experience *,
	.lbme-mobile-experience *::before,
	.lbme-mobile-experience *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}
