/*
  UAE Responsive Overrides
  ------------------------
  Goal: Fix mobile/tablet layout issues without touching existing Elementor/WooCommerce/theme files.
  Strategy: Small-screen overrides only, scoped to known offenders + safe globals (overflow + media).
*/

/* Prevent accidental horizontal scrolling from oversized widgets. */
html,
body {
	max-width: 100%;
	overflow-x: clip;
}

@supports not (overflow: clip) {
	html,
	body {
		overflow-x: hidden;
	}
}

/* Media should never exceed viewport width. */
img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

/* Mobile-only shop categories menu (injected via MU plugin): hidden by default (desktop/tablet). */
.uae-mobile-shop-menu {
	display: none;
}

/*
  Prevent overflow from long strings WITHOUT breaking normal words into letters.
  (The previous overflow-wrap:anywhere caused vertical/letter-by-letter text in buttons/links.)
*/
.site,
.elementor,
.woocommerce {
	/* Keep normal word wrapping (no mid-word/letter breaking). */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

/* Default: never break words mid-word/letter. (We handle long URLs via ellipsis/scroll on small screens.) */
a,
code,
pre {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

@media (max-width: 1024px) {
	/* Tablet/mobile requirement: NO word-breaking anywhere. */
	*,
	*::before,
	*::after {
		overflow-wrap: normal !important;
		word-break: normal !important;
		hyphens: manual !important;
	}

	/* Mobile/tablet overflow hardening (safe, non-invasive). */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* Long URLs / code should not force word-breaking; allow horizontal scroll or ellipsis instead. */
	pre {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	/*
	  Avoid overflow from *URL-like* links without forcing truncation everywhere.
	  (The previous rule was truncating product titles and post titles.)
	*/
	a[href^="http"],
	a[href^="//"] {
		display: inline-block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: bottom;
	}

	/* Allow normal wrapping for content/title links (no word-breaking, but wrap at spaces). */
	.woocommerce ul.products li.product a,
	.woocommerce-loop-product__title,
	.woocommerce-loop-product__title a,
	.woocommerce ul.products li.product .price,
	.elementor .elementor-post__title a,
	.elementor .elementor-post__excerpt,
	.elementor .elementor-post__meta-data {
		white-space: normal !important;
		text-overflow: clip !important;
		overflow: visible !important;
	}

	main,
	#main-container,
	.site,
	.elementor {
		max-width: 100%;
		overflow-x: hidden;
	}

	/* Allow flex/grid children to shrink (prevents sideways scroll). */
	.elementor .e-con,
	.elementor .e-con-inner,
	.elementor .elementor-container,
	.elementor .elementor-row,
	.elementor .elementor-column,
	.elementor .elementor-widget,
	.elementor .elementor-widget-container {
		min-width: 0;
	}

	/* If any theme/plugin sets very wide containers, keep them inside viewport. */
	.elementor .elementor-section,
	.elementor .elementor-container,
	.elementor .e-con,
	.elementor .e-con-inner,
	.elementor .elementor-widget,
	.elementor .elementor-widget-container {
		max-width: 100%;
	}

	/* Specific known offender: post-4021 uses margin-left:-60px (causes horizontal overflow). */
	.elementor-4021 .elementor-element.elementor-element-39e66eb {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Home slider (post-131): keep true full-bleed on mobile/tablet without causing overflow. */
	.elementor-131 .elementor-element.elementor-element-b6690b2.elementor-widget-slides,
	.elementor-131 .elementor-element.elementor-element-b6690b2 .elementor-widget-slides {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}

	/* Blocksy/Theme blog cards (home + blog pages): prevent overlay layouts on small screens. */
	.ct-posts,
	.entries {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 18px !important;
	}

	.ct-posts article,
	.entries article {
		display: flex !important;
		flex-direction: column !important;
	}

	.ct-posts .ct-media-container,
	.ct-posts .ct-image-container,
	.entries .ct-media-container,
	.entries .ct-image-container {
		order: 1;
		width: 100% !important;
		max-width: 100% !important;
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	.ct-posts .ct-card-content,
	.ct-posts .ct-entry-content,
	.entries .ct-card-content,
	.entries .ct-entry-content {
		order: 2;
		position: static !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	/* Blocksy "cover" cards: disable absolute-cover image + fixed min-height on mobile/tablet. */
	[data-archive="default"][data-cards="cover"] .entry-card {
		min-height: auto !important;
	}

	[data-archive="default"][data-cards="cover"] .entry-card .ct-media-container {
		position: static !important;
		inset: auto !important;
		margin: 0 !important;
	}

	[data-archive="default"][data-cards="cover"] .entry-card .ct-media-container img {
		height: auto !important;
		width: 100% !important;
		display: block;
		object-fit: cover;
	}

	[data-archive="default"][data-cards="cover"] .entry-card > *:not(.ct-media-container) {
		position: static !important;
	}

	/* Override other MU fixes that used overflow-wrap:anywhere on headings (causes ugly mid-word breaks). */
	.elementor-widget-heading .elementor-heading-title {
		overflow-wrap: normal !important;
		word-break: normal !important;
		hyphens: manual !important;
		white-space: normal;
	}

	/*
	  Tablet banners: show FULL background image (no crop)
	  Applies to Elementor sections/containers that use background images.
	*/
	.elementor .elementor-section.elementor-motion-effects-element-type-background,
	.elementor .e-con.elementor-motion-effects-element-type-background,
	.elementor .elementor-element.elementor-motion-effects-element-type-background {
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: center top !important;
	}

	.elementor
		.elementor-element.elementor-motion-effects-element-type-background
		> .elementor-motion-effects-container
		> .elementor-motion-effects-layer,
	.elementor
		.elementor-section.elementor-motion-effects-element-type-background
		> .elementor-motion-effects-container
		> .elementor-motion-effects-layer,
	.elementor
		.e-con.elementor-motion-effects-element-type-background
		> .elementor-motion-effects-container
		> .elementor-motion-effects-layer {
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: center top !important;
	}

	/* Elementor Slides: keep inside viewport and scale down cleanly on tablet. */
	.elementor .elementor-widget-slides {
		width: 100% !important;
		max-width: 100% !important;
		left: auto !important;
		right: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		overflow: hidden !important;
	}

	/* Elementor Posts (all pages): prevent overlapping cards on mobile/tablet. */
	.elementor .elementor-widget-posts .elementor-post,
	.elementor .elementor-posts-container .elementor-post {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor .elementor-post__thumbnail,
	.elementor .elementor-post__thumbnail__link,
	.elementor .elementor-post__text,
	.elementor .elementor-post__excerpt,
	.elementor .elementor-post__meta-data {
		position: static !important;
		float: none !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	/* Posts widget thumbnails are sometimes rendered as background images on the link */
	.elementor .elementor-post__thumbnail__link {
		display: block !important;
		min-height: 220px;
		aspect-ratio: 4 / 3;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
		overflow: hidden;
	}

	.elementor .elementor-post__thumbnail img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block;
	}

	/* Allow normal wrapping (at spaces) for main content, but never break words. */
	main .elementor h1,
	main .elementor h2,
	main .elementor h3,
	main .elementor h4,
	main .elementor h5,
	main .elementor h6,
	main .elementor p,
	main .elementor li,
	main .elementor span,
	main .elementor a,
	main .woocommerce-loop-product__title,
	main .elementor-post__title {
		white-space: normal !important;
	}

	.elementor .elementor-widget-slides .swiper-slide {
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: 16 / 9;
	}

	.elementor .elementor-widget-slides .swiper-slide-bg {
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: center center !important;
	}
}

@media (max-width: 767px) {
	/* Mobile requirement: NO word-breaking anywhere. */
	*,
	*::before,
	*::after {
		overflow-wrap: normal !important;
		word-break: normal !important;
		hyphens: manual !important;
	}

	/*
	  Mobile header layout (Blocksy)
	  - Put the search bar ABOVE the header buttons/icons
	  - Add spacing below the CTA pill button (e.g. "PASLAUGOS")
	*/
	header.ct-header [data-device="mobile"] [data-row] > div {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	/* Search bar first + full width */
	header.ct-header [data-device="mobile"] form.ct-search-form,
	header.ct-header [data-device="mobile"] form.woocommerce-product-search,
	header.ct-header [data-device="mobile"] form[role="search"] {
		order: -10;
		flex: 0 0 100%;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Ensure the search input spans full width */
	header.ct-header [data-device="mobile"] form.ct-search-form .search-field,
	header.ct-header [data-device="mobile"] form.woocommerce-product-search .search-field,
	header.ct-header [data-device="mobile"] form[role="search"] .search-field {
		width: 100% !important;
	}

	/* Bottom pill/CTA button spacing */
	header.ct-header [data-device="mobile"] .ct-header-cta {
		margin-bottom: 10px !important;
	}

	/* Site-specific header search (ki-product-search) */
	header.ct-header [data-device="mobile"] .nm-mobile-header-search {
		flex: 0 0 100%;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding: 6px 14px 0;
	}
	
	/* Same wrapper, but for Elementor header templates (not always inside `header.ct-header`). */
	.elementor-location-header .nm-mobile-header-search {
		flex: 0 0 100%;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding: 6px 14px 0;
	}

	header.ct-header [data-device="mobile"] .nm-mobile-header-search form.ki-product-search {
		width: 100% !important;
		max-width: 100% !important;
	}
	
	.elementor-location-header .nm-mobile-header-search form.ki-product-search {
		width: 100% !important;
		max-width: 100% !important;
	}

	header.ct-header [data-device="mobile"] .nm-mobile-header-search input.ki-product-search__input,
	header.ct-header [data-device="mobile"] .nm-mobile-header-search input#ki-product-search-input {
		width: 100% !important;
	}
	
	.elementor-location-header .nm-mobile-header-search input.ki-product-search__input,
	.elementor-location-header .nm-mobile-header-search input#ki-product-search-input {
		width: 100% !important;
	}

	/* "PASLAUGOS" pill is an Elementor button inside the header template */
	.elementor-location-header a.elementor-button.elementor-size-sm {
		margin-bottom: 10px !important;
	}

	/* Add breathing room between header and the first content block on mobile. */
	#main-container > main {
		padding-top: 0 !important;
	}

	/* Blocksy header (mobile): keep hamburger + logo on one line, aligned to top-left. */
	header.ct-header [data-device="mobile"] {
		position: relative;
	}

	/* Force the row that contains the logo to behave like a left-aligned strip. */
	header.ct-header [data-device="mobile"] .site-logo-container {
		display: inline-flex;
		align-items: center;
		margin: 0 !important;
	}

	/* Pin the hamburger trigger next to the logo on the same top line. */
	header.ct-header [data-device="mobile"] .ct-header-trigger.ct-toggle {
		position: absolute;
		left: 12px;
		top: 10px;
		z-index: 5;
	}

	header.ct-header [data-device="mobile"] .site-logo-container {
		padding-left: 44px; /* room for hamburger */
	}

	/* Remove extra vertical spacing that makes the logo appear on a separate "row". */
	header.ct-header [data-device="mobile"] [data-row] {
		min-height: 0 !important;
	}

	/* Mobile WooCommerce category menu (accordion). */
	.uae-mobile-shop-menu {
		display: block;
		position: sticky;
		top: 0;
		z-index: 60;
		background: #fff;
		border-top: 1px solid rgba(90, 97, 53, 0.25);
		border-bottom: 1px solid rgba(90, 97, 53, 0.25);
	}

	.uae-mobile-shop-menu__root {
		padding: 0;
		margin: 0;
	}

	.uae-mobile-shop-menu__summary {
		list-style: none;
		cursor: pointer;
		padding: 10px 14px;
		color: #5A6135;
		font-size: 13px;
		font-weight: 600;
		white-space: nowrap;
	}

	.uae-mobile-shop-menu__summary::-webkit-details-marker {
		display: none;
	}

	.uae-mobile-shop-menu__list {
		margin: 0;
		padding: 0 0 10px 0;
		list-style: none;
	}

	.uae-mobile-shop-menu__item {
		border-top: 1px solid rgba(90, 97, 53, 0.12);
	}

	.uae-mobile-shop-menu__link,
	.uae-mobile-shop-menu__group-summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 12px 14px;
		color: #5A6135;
		text-decoration: none;
		white-space: nowrap;
	}

	.uae-mobile-shop-menu__item.is-active > .uae-mobile-shop-menu__link,
	.uae-mobile-shop-menu__item.is-active > .uae-mobile-shop-menu__group > .uae-mobile-shop-menu__group-summary {
		font-weight: 700;
	}

	.uae-mobile-shop-menu__group-summary {
		list-style: none;
		cursor: pointer;
	}

	.uae-mobile-shop-menu__group-summary::-webkit-details-marker {
		display: none;
	}

	.uae-mobile-shop-menu__sublist {
		list-style: none;
		margin: 0;
		padding: 0 0 10px 0;
		background: rgba(252, 249, 237, 0.5);
	}

	.uae-mobile-shop-menu__subitem a {
		display: block;
		padding: 10px 18px;
		color: #5A6135;
		text-decoration: none;
		white-space: nowrap;
	}

	.uae-mobile-shop-menu__subitem.is-active a {
		font-weight: 700;
		text-decoration: underline;
	}

	/*
	  Elementor: targeted fixes for exported CSS offenders
	  ---------------------------------------------------
	  These selectors were found in wp-content/uploads/elementor/css/post-*.css
	  and cause horizontal overflow or fixed sizing on phones.
	*/

	/* Banners on mobile: align background images to the LEFT (not centered). */
	/* Global: most Elementor "photo banners" are backgrounds on the motion-effects layer. */
	.elementor .elementor-element > .elementor-motion-effects-container > .elementor-motion-effects-layer,
	.elementor .elementor-element > .elementor-background-overlay,
	.elementor .elementor-element > .elementor-background-slideshow,
	/* Also handle direct background images applied on the element itself (common for Elementor sections/containers). */
	.elementor .elementor-element,
	.elementor .e-con,
	.elementor .e-con-inner,
	.elementor-section {
		background-position: left center !important;
		background-repeat: no-repeat !important;
	}

	/*
	  Mobile banners (site-wide): show FULL background image (no crop)
	  Applies to Elementor sections/containers that use background images.
	*/
	.elementor .elementor-section.elementor-motion-effects-element-type-background,
	.elementor .e-con.elementor-motion-effects-element-type-background,
	.elementor .elementor-element.elementor-motion-effects-element-type-background {
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: center top !important;
	}

	.elementor
		.elementor-element.elementor-motion-effects-element-type-background
		> .elementor-motion-effects-container
		> .elementor-motion-effects-layer,
	.elementor
		.elementor-section.elementor-motion-effects-element-type-background
		> .elementor-motion-effects-container
		> .elementor-motion-effects-layer,
	.elementor
		.e-con.elementor-motion-effects-element-type-background
		> .elementor-motion-effects-container
		> .elementor-motion-effects-layer {
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: center top !important;
	}

	/*
	  First-block banners (site-wide): mobile hero safety net
	  - Make sure the first visible banner/hero fits inside viewport
	  - Neutralize negative overlaps
	  - Keep reasonable height on phones
	*/
	main .elementor > .elementor-section-wrap > .elementor-section:first-child,
	main .elementor > .elementor-section:first-child,
	main .elementor > .e-con:first-child,
	main .elementor .elementor-top-section:first-child,
	main .elementor .e-con:first-of-type {
		margin-top: 0 !important;
		height: auto !important;
	}

	/* First-block background banners: can be small on mobile, but must fit and never overflow. */
	main .elementor > .elementor-section-wrap > .elementor-section:first-child.elementor-motion-effects-element-type-background,
	main .elementor > .elementor-section:first-child.elementor-motion-effects-element-type-background,
	main .elementor > .e-con:first-child.elementor-motion-effects-element-type-background,
	main .elementor .elementor-top-section:first-child.elementor-motion-effects-element-type-background,
	main .elementor .e-con:first-of-type.elementor-motion-effects-element-type-background {
		min-height: clamp(140px, 38vw, 320px) !important;
		/* Keep explicit height guidance for the first hero banner. */
	}

	/* If the hero is an image widget (not a background), ensure it scales to the viewport. */
	main .elementor > .elementor-section-wrap > .elementor-section:first-child .elementor-widget-image img,
	main .elementor > .elementor-section:first-child .elementor-widget-image img,
	main .elementor .e-con:first-of-type .elementor-widget-image img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block;
	}

	.elementor .elementor-widget-slides .swiper-slide-bg,
	.elementor-577 .elementor-element.elementor-element-a8206d7,
	.elementor-577 .elementor-element.elementor-element-a8206d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
	.elementor-330 .elementor-element.elementor-element-68f7606,
	.elementor-330 .elementor-element.elementor-element-68f7606 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
	.elementor-3663 .elementor-element.elementor-element-eafa53d,
	.elementor-3663 .elementor-element.elementor-element-eafa53d > .elementor-motion-effects-container > .elementor-motion-effects-layer,
	.elementor-393 .elementor-element.elementor-element-2b2d2f4,
	.elementor-393 .elementor-element.elementor-element-2b2d2f4 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
	.elementor-424 .elementor-element.elementor-element-26ddbb2,
	.elementor-424 .elementor-element.elementor-element-26ddbb2 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-position: left center !important;
	}

	/* elementor-3663: remove prior hard shift so the full banner remains visible. */
	.elementor-3663 .elementor-element.elementor-element-eafa53d > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-position: center top !important;
		background-size: contain !important;
		background-repeat: no-repeat !important;
	}

	/*
	  Banner text cut-off fix (elementor-3663):
	  Elementor set some widgets to absurd widths (e.g. 500%) which pushes text off-screen on mobile.
	*/
	.elementor-3663 .elementor-element.elementor-element-781d928 {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.elementor-3663 .elementor-element.elementor-element-47fb635 {
		width: 100% !important;
		max-width: 100% !important;
		text-align: left !important;
	}

	.elementor-3663 .elementor-element.elementor-element-5887188 {
		width: 100% !important;
		max-width: 100% !important;
		text-align: left !important;
		line-height: 1.55 !important;
	}

	/* Generic safety net: constrain fixed-width Elementor elements on small screens. */
	.elementor .elementor-element {
		max-width: 100% !important;
	}

	/* Elementor Slides: fit all screens (mobile) and avoid fixed heights like 140px/600px from exported CSS. */
	.elementor .elementor-widget-slides {
		width: 100% !important;
		max-width: 100% !important;
		left: auto !important;
		right: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		overflow: hidden !important;
	}

	.elementor .elementor-widget-slides .swiper-slide {
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: 3 / 1; /* mobile banners are wide; helps show full image without huge whitespace */
	}

	.elementor .elementor-widget-slides .swiper-slide-bg {
		background-size: contain !important; /* scale down, show full image */
		background-repeat: no-repeat !important;
		background-position: center center !important;
	}

	/* Some exports set slide contents max-width:0% on mobile; keep text readable without overflow. */
	.elementor .elementor-widget-slides .swiper-slide-contents {
		max-width: min(92vw, 560px) !important;
	}

	/* Home page (post-131) slides: use same wide ratio so the entire banner stays visible. */
	.elementor-131 .elementor-widget-slides .swiper-slide {
		aspect-ratio: 3 / 1 !important;
	}

	/* Home slider: keep true full-bleed on phones (some themes wrap it in a container). */
	.elementor-131 .elementor-element.elementor-element-b6690b2.elementor-widget-slides,
	.elementor-131 .elementor-element.elementor-element-b6690b2 .elementor-widget-slides {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}

	/*
	  BLOGAS (Elementor post-577): fix overflow + overlapping post cards on mobile.
	  - post-577 sets some widgets to width:500% which can break layout
	  - posts widget thumbnails/text can overlap depending on skin
	*/
	.elementor-577 .elementor-element.elementor-element-34f8536 {
		width: 100% !important;
		max-width: 100% !important;
		--container-widget-width: 100% !important;
	}

	.elementor-577 .elementor-element.elementor-element-ec496f9,
	.elementor-577 .elementor-posts-container {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 18px !important;
	}

	.elementor-577 .elementor-post {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor-577 .elementor-post__thumbnail,
	.elementor-577 .elementor-post__thumbnail__link {
		width: 100% !important;
		max-width: 100% !important;
		position: static !important;
		float: none !important;
		margin: 0 !important;
		transform: none !important;
	}

	.elementor-577 .elementor-post__text,
	.elementor-577 .elementor-post__excerpt,
	.elementor-577 .elementor-post__meta-data {
		width: 100% !important;
		max-width: 100% !important;
		position: static !important;
		float: none !important;
		margin: 0 !important;
		transform: none !important;
	}

	.elementor-577 .elementor-post__read-more {
		align-self: flex-start;
		max-width: 100% !important;
	}

	/* Elementor Posts widget (all pages): force non-overlapping stacked layout on phones. */
	.elementor .elementor-widget-posts .elementor-post {
		display: flex !important;
		flex-direction: column !important;
	}

	.elementor .elementor-widget-posts .elementor-post__thumbnail__link,
	.elementor .elementor-widget-posts .elementor-post__thumbnail {
		order: 1;
	}

	.elementor .elementor-widget-posts .elementor-post__text {
		order: 2;
		position: static !important;
		transform: none !important;
		margin-top: 0 !important;
		padding: 14px 0 !important;
	}

	/* WooCommerce product grids (home sections too): ensure images and titles are fully visible. */
	.woocommerce ul.products li.product {
		overflow: hidden;
		display: flex !important;
		flex-direction: column !important;
	}

	.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
	.woocommerce ul.products li.product a.woocommerce-loop-product__link,
	.woocommerce ul.products li.product > a {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px;
		align-items: stretch;
	}

	.woocommerce ul.products li.product a img {
		width: 100% !important;
		height: auto !important;
		display: block;
		aspect-ratio: 1 / 1;
		object-fit: contain;
		background: #fff;
	}

	/* Blocksy Woo cards "type-2": remove negative margins that create broken-looking white/grey blocks on phones. */
	[data-products="type-2"] .product {
		padding-inline: 12px !important;
		padding-bottom: 14px !important;
	}

	[data-products="type-2"] figure,
	[data-products="type-2"] .ct-woo-card-actions {
		width: 100% !important;
		margin-inline: 0 !important;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		white-space: normal !important;
	}

	/* Instagram/“Trending on social media” (Smash Balloon): keep a stable 2-column grid without broken items. */
	#sbi_images,
	.sbi_photo_wrap {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 10px !important;
	}

	.sbi_item {
		flex: 0 0 calc(50% - 5px) !important;
		width: calc(50% - 5px) !important;
	}

	.sbi_item img,
	.sbi_photo {
		width: 100% !important;
		height: auto !important;
		display: block;
	}

	/* Don't fight Elementor full-width widgets (e.g., Slides using 100vw + negative margins). */
	.elementor .elementor-widget-slides.elementor-element,
	.elementor .elementor-widget-slides {
		max-width: none !important;
	}

	/* post-977: headings/widgets set to 415% width */
	.elementor-977 .elementor-element.elementor-element-64c1dab,
	.elementor-977 .elementor-element.elementor-element-3aaeca8,
	.elementor-977 .elementor-element.elementor-element-c2b6c25,
	.elementor-977 .elementor-element.elementor-element-a4f7577 {
		width: 100% !important;
		max-width: 100% !important;
		--container-widget-width: 100% !important;
	}

	/* post-527: massive side margin + fixed-width form block */
	.elementor-527 .elementor-element.elementor-element-b7679c4 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.elementor-527 .elementor-element.elementor-element-bfbf7e1 {
		width: 100% !important;
		max-width: 100% !important;
		--container-widget-width: 100% !important;
	}

	/* post-964 + post-1: fixed 527px text blocks should go full-width on phones */
	.elementor-964 .elementor-element.elementor-element-833f7a0,
	.elementor-964 .elementor-element.elementor-element-3d3b5e3,
	.elementor-964 .elementor-element.elementor-element-a6d3b05,
	.elementor-964 .elementor-element.elementor-element-496f09d,
	.elementor-964 .elementor-element.elementor-element-4059797,
	.elementor-964 .elementor-element.elementor-element-a0da934,
	/* post-1176: text block forced to 1300px */
	.elementor-1176 .elementor-element.elementor-element-4f09f39,
	.elementor-1 .elementor-element.elementor-element-bdfca33,
	.elementor-1 .elementor-element.elementor-element-74c775d,
	.elementor-1 .elementor-element.elementor-element-526d1d1 {
		width: 100% !important;
		max-width: 100% !important;
		--container-widget-width: 100% !important;
	}

	/* post-964: very tall min-height sections (video blocks) */
	.elementor-964 .elementor-element.elementor-element-607be17,
	.elementor-964 .elementor-element.elementor-element-3298ed3 {
		min-height: auto !important;
	}

	/* post-977 + post-1: fixed-dimension images should scale down */
	.elementor-977 .elementor-element.elementor-element-c307443 img,
	.elementor-1 .elementor-element.elementor-element-301de2d img,
	.elementor-1 .elementor-element.elementor-element-b4066bd img,
	.elementor-1 .elementor-element.elementor-element-2c17c1b img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	/* post-977: huge fixed-height hero image */
	.elementor-977 .elementor-element.elementor-element-bd4c98b img {
		height: auto !important;
		max-height: 60vh;
		object-fit: cover;
	}

	/* post-3360: popup modal fixed to 1015x667 */
	#elementor-popup-modal-3360 .dialog-message {
		width: calc(100vw - 32px) !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: calc(100vh - 32px) !important;
	}

	#elementor-popup-modal-3360 .dialog-widget-content {
		max-height: calc(100vh - 32px) !important;
		overflow: auto !important;
	}

	/*
	  WooCommerce: safer small-screen defaults
	  ---------------------------------------
	  Don’t re-template tables; just allow scrolling and stack form rows.
	*/

	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-checkout #order_review,
	.woocommerce-account .woocommerce-MyAccount-content,
	.woocommerce-order .woocommerce-order-details {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.woocommerce table.shop_table {
		min-width: 640px;
	}

	.woocommerce form .form-row {
		width: 100% !important;
		float: none !important;
	}

	/* Product grids: avoid ultra-squeezed columns on phones. */
	.woocommerce ul.products {
		grid-template-columns: 1fr !important;
	}

	/*
	  Home page slider (Elementor Slides found in post-131.css)
	  -------------------------------------------------------
	  Keep it full-width, but avoid tiny fixed heights / empty side strips on mobile.
	*/
	.elementor-131 .elementor-element.elementor-element-b6690b2 .swiper-slide {
		height: auto !important;
		min-height: 52vw !important; /* reasonable mobile banner height */
	}

	/* Prefer cover on mobile to remove blank side areas from contain. */
	.elementor-131 .elementor-element.elementor-element-b6690b2 .swiper-slide-bg {
		background-size: cover !important;
		background-position: left center !important;
	}

	/* Elementor set mobile slide contents to max-width:0% (hides text). Re-enable it. */
	.elementor-131 .elementor-element.elementor-element-b6690b2 .swiper-slide-contents {
		max-width: min(92vw, 560px) !important;
		padding: 12px 14px !important;
	}

	/*
	  Home cards with huge desktop padding-top (post-131 uses 400px)
	  Reduce vertical empty space on mobile.
	*/
	.elementor-131 .elementor-element.elementor-element-c15be38,
	.elementor-131 .elementor-element.elementor-element-ba1cc10,
	.elementor-131 .elementor-element.elementor-element-3618e84 {
		margin-right: 0 !important;
		padding-top: 58vw !important;
		padding-bottom: 16px !important;
	}

	.elementor-131 .elementor-element.elementor-element-29d72a9 {
		margin: 20px 0 !important;
	}

	/*
	  VIP Klubas hero (post-424): avoid negative overlap + make button/hero usable on phones.
	*/
	.elementor-424 .elementor-element.elementor-element-26ddbb2 {
		margin-top: 16px !important;
		/* Banner uses background-size:contain; keep it visible but avoid huge empty whitespace. */
		min-height: clamp(160px, 42vw, 320px) !important;
		background-position: center top !important;
		background-repeat: no-repeat !important;
		background-size: contain !important;
	}

	.elementor-424 .elementor-element.elementor-element-3639886 {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* VIP Klubas: ensure no background tiling from the inner container that used background-size:auto. */
	.elementor-424 .elementor-element.elementor-element-f8fe2b3 {
		background-repeat: no-repeat !important;
		background-size: contain !important;
		background-position: center top !important;
	}

	/*
	  VIP Klubas: photo + text section (post-424 element fd72b55)
	  Fix readability (text over busy image) + ensure background never tiles.
	*/
	.elementor-424 .elementor-element.elementor-element-fd72b55:not(.elementor-motion-effects-element-type-background),
	.elementor-424 .elementor-element.elementor-element-fd72b55 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-repeat: no-repeat !important;
		background-size: contain !important;
		background-position: center top !important;
	}

	/* Stronger light overlay behind content to make text readable. */
	.elementor-424 .elementor-element.elementor-element-fd72b55::before {
		background: rgba(252, 249, 237, 0.72) !important;
		opacity: 1 !important;
	}

	/* Ensure text column has its own readable panel on small screens. */
	.elementor-424 .elementor-element.elementor-element-fd72b55 .e-con-inner,
	.elementor-424 .elementor-element.elementor-element-fd72b55 .elementor-container {
		background: rgba(252, 249, 237, 0.72);
		border-radius: 18px;
		padding: 18px 16px;
	}

	.elementor-424 .elementor-element.elementor-element-fd72b55 .elementor-heading-title,
	.elementor-424 .elementor-element.elementor-element-fd72b55,
	.elementor-424 .elementor-element.elementor-element-fd72b55 p,
	.elementor-424 .elementor-element.elementor-element-fd72b55 li {
		color: #2f341d !important;
		text-shadow: 0 1px 2px rgba(252, 249, 237, 0.85);
	}

	/*
	  VIP Klubas: "yellow nodes" / beige cards spacing on mobile.
	  These cards were built with fixed 40px paddings and min-height; tighten to mobile-friendly spacing.
	*/
	.elementor-424 .elementor-element.elementor-element-a5818b4,
	.elementor-424 .elementor-element.elementor-element-ca12068,
	.elementor-424 .elementor-element.elementor-element-7cc7601,
	.elementor-424 .elementor-element.elementor-element-dd9b926,
	.elementor-424 .elementor-element.elementor-element-df02aba,
	.elementor-424 .elementor-element.elementor-element-41a8ac3 {
		min-height: auto !important;
		padding: 26px 22px !important;
		border-radius: 22px !important;
	}

	.elementor-424 .elementor-element.elementor-element-a5818b4 + .elementor-element,
	.elementor-424 .elementor-element.elementor-element-ca12068 + .elementor-element,
	.elementor-424 .elementor-element.elementor-element-7cc7601 + .elementor-element,
	.elementor-424 .elementor-element.elementor-element-dd9b926 + .elementor-element,
	.elementor-424 .elementor-element.elementor-element-df02aba + .elementor-element,
	.elementor-424 .elementor-element.elementor-element-41a8ac3 + .elementor-element {
		margin-top: 14px !important;
	}

	.elementor-424 .elementor-element.elementor-element-a5818b4 p,
	.elementor-424 .elementor-element.elementor-element-ca12068 p,
	.elementor-424 .elementor-element.elementor-element-7cc7601 p,
	.elementor-424 .elementor-element.elementor-element-dd9b926 p,
	.elementor-424 .elementor-element.elementor-element-df02aba p,
	.elementor-424 .elementor-element.elementor-element-41a8ac3 p,
	.elementor-424 .elementor-element.elementor-element-a5818b4 li,
	.elementor-424 .elementor-element.elementor-element-ca12068 li,
	.elementor-424 .elementor-element.elementor-element-7cc7601 li,
	.elementor-424 .elementor-element.elementor-element-dd9b926 li,
	.elementor-424 .elementor-element.elementor-element-df02aba li,
	.elementor-424 .elementor-element.elementor-element-41a8ac3 li {
		line-height: 1.55;
	}

	/*
	  Kontaktai page (post-3732): first section is pulled up with negative margins,
	  which causes the header CTA to overlap the first block.
	*/
	.elementor-3732 .elementor-element.elementor-element-87648aa {
		margin-top: 0 !important;
	}

	.elementor-3732 .elementor-element.elementor-element-1967475,
	.elementor-3732 .elementor-element.elementor-element-47079ce,
	.elementor-3732 .elementor-element.elementor-element-0213bcd {
		margin-top: 0 !important;
	}

	/* Avoid awkward word-splitting headings on mobile (e.g. "Susisieki" + "me"). */
	.elementor-3732 .elementor-heading-title br {
		display: none;
	}

	/* Ambasadorystės hero (post-393): keep its own mobile "contain" behavior, just remove overlap. */
	.elementor-393 .elementor-element.elementor-element-2b2d2f4 {
		margin-top: 0 !important;
	}

	/*
	  Blog cards (Elementor Posts widget): stack image + text on mobile to stop overlap.
	*/
	.elementor .elementor-widget-posts .elementor-post,
	.elementor .elementor-posts-container .elementor-post {
		display: flex !important;
		flex-direction: column !important;
	}

	.elementor .elementor-post__thumbnail__link,
	.elementor .elementor-post__thumbnail {
		width: 100% !important;
	}

	.elementor .elementor-post__text {
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/*
	  Header tightening (header template uses elementor-6)
	  Reduce excessive vertical spacing on mobile.
	*/
	.elementor-6 .elementor-element.elementor-element-3040f8a img {
		width: 140px !important;
	}

	.elementor-6 .elementor-element.elementor-element-726fc76 {
		--gap: 0px 16px;
	}

	/* Revert: keep header CTA/button behavior as originally intended. */
	.elementor-6 .elementor-element.elementor-element-991edc9,
	.elementor-6 .elementor-element.elementor-element-991edc9 .elementor-button {
		width: 100% !important;
		max-width: 100% !important;
	}

	/*
	  Kontaktai/menu bug: prevent menu labels from breaking letter-by-letter (vertical stacking).
	  Keep menu text intact even when containers get narrow.
	*/
	header a,
	.elementor-6 a,
	.elementor-6 .e-n-menu-title,
	.elementor-6 .e-n-menu-title-container,
	.elementor-6 .e-n-menu-title-container span {
		overflow-wrap: normal !important;
		word-break: keep-all !important;
		white-space: nowrap !important;
	}

	/*
	  Buttons & form controls (Elementor + WooCommerce)
	  ------------------------------------------------
	  Goals:
	  - stop overflow from huge padding / fixed widths
	  - allow multi-line labels (Arabic/English/long text)
	  - ensure comfortable tap targets
	*/

	/* Elementor buttons (general) */
	.elementor a.elementor-button,
	.elementor .elementor-button {
		max-width: 100% !important;
		white-space: normal !important;
		line-height: 1.2;
		text-align: center;
	}

	.elementor a.elementor-button .elementor-button-text,
	.elementor .elementor-button .elementor-button-text {
		white-space: normal !important;
	}

	/* Clamp padding so buttons don't become wider than the viewport. */
	.elementor a.elementor-button,
	.elementor .elementor-button {
		padding-left: clamp(16px, 6vw, 32px) !important;
		padding-right: clamp(16px, 6vw, 32px) !important;
		padding-top: clamp(10px, 3.5vw, 14px) !important;
		padding-bottom: clamp(10px, 3.5vw, 14px) !important;
		border-radius: clamp(12px, 6vw, 46px);
	}

	/* Elementor forms: submit buttons and inputs should fit container */
	.elementor form.elementor-form .elementor-button,
	.elementor form.elementor-form button.elementor-button,
	.elementor form.elementor-form input[type="submit"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor form.elementor-form .elementor-field,
	.elementor form.elementor-form input[type="text"],
	.elementor form.elementor-form input[type="email"],
	.elementor form.elementor-form input[type="tel"],
	.elementor form.elementor-form input[type="url"],
	.elementor form.elementor-form input[type="number"],
	.elementor form.elementor-form input[type="search"],
	.elementor form.elementor-form input[type="password"],
	.elementor form.elementor-form select,
	.elementor form.elementor-form textarea {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* WooCommerce buttons: wrap + keep inside viewport */
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce #respond input#submit,
	.woocommerce a.add_to_cart_button,
	.woocommerce a.single_add_to_cart_button,
	.woocommerce button.single_add_to_cart_button {
		max-width: 100% !important;
		white-space: normal !important;
		line-height: 1.2;
	}

	/* Quantity + add-to-cart row on product pages can overflow; allow wrapping. */
	.woocommerce div.product form.cart {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.woocommerce div.product form.cart .quantity,
	.woocommerce div.product form.cart .single_add_to_cart_button {
		max-width: 100%;
	}
}

@media (min-width: 480px) and (max-width: 767px) {
	/* Two columns is usually safe on larger phones. */
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

#woo-cart-panel dl.variation dt.variation-Discount,
#woo-cart-panel dl.variation dt[class*="variation-Discount"],
#woo-cart-panel dl.variation dt[class*="variation-discount"],
.ct-cart-content dl.variation dt.variation-Discount,
.ct-cart-content dl.variation dt[class*="variation-Discount"],
.ct-cart-content dl.variation dt[class*="variation-discount"] {
	display: none !important;
}

#woo-cart-panel dl.variation dd.variation-Discount,
#woo-cart-panel dl.variation dd[class*="variation-Discount"],
#woo-cart-panel dl.variation dd[class*="variation-discount"],
.ct-cart-content dl.variation dd.variation-Discount,
.ct-cart-content dl.variation dd[class*="variation-Discount"],
.ct-cart-content dl.variation dd[class*="variation-discount"] {
	background: transparent !important; /* override cyan backgrounds applied by plugins */
	margin: 0 !important;
}

#woo-cart-panel .nomeda-dovana-badge,
.ct-cart-content .nomeda-dovana-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: #5A6135;
	color: #fff;
	font-weight: 600;
	font-style: normal;
	line-height: 1.4;
}

/* Side cart: restyle Woo "error" notices (used by gift-picker prompt). */
#woo-cart-panel .woocommerce-error,
#woo-cart-panel .woocommerce-notices-wrapper .woocommerce-error,
.ct-cart-content .woocommerce-error,
.ct-cart-content .woocommerce-notices-wrapper .woocommerce-error,
.ct-cart-content .woocommerce-mini-cart__total .woocommerce-error {
	background: #5A6135 !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: none !important;
}

#woo-cart-panel .woocommerce-error li,
.ct-cart-content .woocommerce-error li {
	color: #fff !important;
}

#woo-cart-panel .woocommerce-error a,
.ct-cart-content .woocommerce-error a {
	color: #fff !important;
	text-decoration: underline;
}
