/**
 * DEJOIY Universe + Elementor — full responsive layer (all screen sizes).
 */

/* Hide legacy Elementor page body when Universe v2 is active (prevents double homepage). */
.dejoiy-universe-home .container.content-page,
.dejoiy-universe-home .content-page.sidebar-mobile-bottom,
.dejoiy-universe-home .elementor.elementor-10 {
	display: none !important;
}


/* —— Global box model & overflow —— */
.dejoiy-universe-home,
.dejoiy-universe-home .page-wrapper,
.dejoiy-universe-home .template-container,
.dejoiy-universe-home .template-content {
	box-sizing: border-box;
	max-width: 100%;
	overflow-x: clip;
}

.dejoiy-universe-home *,
.dejoiy-universe-home *::before,
.dejoiy-universe-home *::after {
	box-sizing: border-box;
}

/* Broken DOM fallback: universe wrongly wrapped in chrome-header */
.dejoiy-universe-home .dejoiy-site-chrome-header:has(> #dejoiy-universe) {
	display: contents;
}

.dejoiy-universe-home .dejoiy-site-chrome-header > #dejoiy-universe {
	display: block;
	width: 100%;
	max-width: 100%;
}

.dejoiy-universe-home.dejoiy-site-chrome-on .page-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
}

.dejoiy-universe-home.dejoiy-site-chrome-on .dejoiy-site-chrome-header {
	order: -20;
	width: 100%;
	min-width: 0;
	flex: 0 0 auto;
}

.dejoiy-universe-home.dejoiy-site-chrome-on #dejoiy-universe {
	order: -10;
	width: 100%;
	min-width: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

#dejoiy-universe > header.elementor-location-header,
#dejoiy-universe > .elementor-location-header {
	order: -50 !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 auto;
}

.dejoiy-universe-home.dejoiy-site-chrome-on .dejoiy-site-chrome-footer,
.dejoiy-universe-home.dejoiy-site-chrome-on .et-footers-wrapper {
	order: 30;
	width: 100%;
	min-width: 0;
	flex: 0 0 auto;
}

/* —— Elementor header / footer (all devices) —— */
.dejoiy-universe-home .elementor-location-header,
.dejoiy-universe-home .elementor-location-footer,
.dejoiy-universe-home .dejoiy-site-chrome-header,
.dejoiy-universe-home .dejoiy-site-chrome-footer {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.dejoiy-universe-home .elementor-section,
.dejoiy-universe-home .elementor-container,
.dejoiy-universe-home .e-con,
.dejoiy-universe-home .e-con-inner,
.dejoiy-universe-home .elementor-column,
.dejoiy-universe-home .elementor-widget-wrap {
	max-width: 100% !important;
	min-width: 0 !important;
}

.dejoiy-universe-home .elementor-container {
	width: 100% !important;
	padding-left: clamp(12px, 3vw, 20px) !important;
	padding-right: clamp(12px, 3vw, 20px) !important;
}

.dejoiy-universe-home .elementor-widget-wrap img,
.dejoiy-universe-home .elementor-widget-wrap video,
.dejoiy-universe-home .elementor-widget-wrap iframe,
.dejoiy-universe-home .elementor-widget-image img,
.dejoiy-universe-home img {
	max-width: 100%;
	height: auto;
}

.dejoiy-universe-home .etheme-elementor-slider,
.dejoiy-universe-home .swiper,
.dejoiy-universe-home .swiper-container {
	max-width: 100% !important;
	width: 100% !important;
}

.dejoiy-universe-home .etheme-elementor-off-canvas__container {
	max-width: min(100vw, 420px);
}

/* —— Universe content: prevent grid blowout —— */
#dejoiy-universe,
#dejoiy-universe .du-hero,
#dejoiy-universe .du-story,
#dejoiy-universe .du-joi,
#dejoiy-universe .du-reco,
#dejoiy-universe .du-world,
#dejoiy-universe .du-join {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

#dejoiy-universe .du-gate,
#dejoiy-universe .du-card-v2,
#dejoiy-universe .du-reco__tab,
#dejoiy-universe .du-joi__chip {
	min-width: 0;
}

#dejoiy-universe .du-card-v2__title {
	word-break: break-word;
	overflow-wrap: anywhere;
	hyphens: auto;
}

#dejoiy-universe .du-card-v2__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Product shelves: 3-up on phones, 4 on desktop (shelves show 4 products) */
#dejoiy-universe .du-shelf-v2 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.4rem, 1.8vw, 1rem);
	width: 100%;
}

#dejoiy-universe .du-reco__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	width: 100%;
}

#dejoiy-universe .du-joi__form {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	width: 100%;
}

#dejoiy-universe .du-joi__input {
	width: 100%;
	min-width: 0;
}

#dejoiy-universe .du-joi__examples {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

#dejoiy-universe .du-story__verbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1rem;
	padding: 0;
	list-style: none;
}

#dejoiy-universe .du-join__roles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

/* —— Tablet landscape / small laptop (768–1024) —— */
@media (min-width: 600px) {
	#dejoiy-universe .du-shelf-v2 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	#dejoiy-universe .du-joi__form {
		flex-direction: row;
		align-items: stretch;
	}

	#dejoiy-universe .du-joi__input {
		flex: 1 1 auto;
	}
}

@media (min-width: 900px) {
	#dejoiy-universe .du-gates {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	#dejoiy-universe .du-shelf-v2 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* —— Mobile (≤767px) —— */
@media (max-width: 767px) {
	.dejoiy-universe-home .dejoiy-site-chrome-header .elementor-location-header {
		position: sticky;
		top: 0;
		z-index: 300;
		background: #fff;
		box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
	}

	.dejoiy-universe-home .header-wrapper {
		display: none !important;
	}

	.dejoiy-universe-home .mobile-header-wrapper {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.dejoiy-universe-home .elementor-hidden-mobile,
	.dejoiy-universe-home .elementor-hidden-phone {
		display: none !important;
	}

	.dejoiy-universe-home .elementor-column {
		width: 100% !important;
	}

	#dejoiy-universe {
		padding-left: env(safe-area-inset-left, 0);
		padding-right: env(safe-area-inset-right, 0);
	}

	#dejoiy-universe .du-hero {
		padding-top: clamp(0.85rem, 3.5vw, 1.35rem);
		padding-bottom: clamp(1rem, 4vw, 1.5rem);
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	#dejoiy-universe .du-reco,
	#dejoiy-universe .du-world {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		padding-top: clamp(1.1rem, 4vw, 1.75rem);
		padding-bottom: clamp(1.1rem, 4vw, 1.75rem);
	}

	#dejoiy-universe .du-gates {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.65rem;
	}

	#dejoiy-universe .du-gate {
		min-height: 120px;
		padding: 0.9rem 0.85rem;
	}

	#dejoiy-universe .du-world {
		margin-left: 0;
		margin-right: 0;
	}

	#dejoiy-universe .du-reco__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 0.25rem;
	}

	#dejoiy-universe .du-reco__tabs::-webkit-scrollbar {
		display: none;
	}

	#dejoiy-universe .du-reco__tab {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	#dejoiy-universe .du-shelf-v2 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.4rem;
	}

	#dejoiy-universe .du-card-v2__media {
		aspect-ratio: 3 / 4;
	}

	#dejoiy-universe .du-card-v2__body {
		padding: 0.45rem 0.4rem 0.55rem;
	}

	#dejoiy-universe .du-card-v2__title {
		font-size: 0.68rem;
		line-height: 1.25;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	#dejoiy-universe .du-card-v2__price {
		font-size: 0.72rem;
	}

	#dejoiy-universe .du-card-v2__seller,
	#dejoiy-universe .du-card-v2__dpin {
		font-size: 0.62rem;
	}

	#dejoiy-universe .du-card-v2__eco {
		font-size: 0.55rem;
		padding: 0.15rem 0.35rem;
	}

	#dejoiy-universe .du-card-v2__fav {
		width: 1.75rem;
		height: 1.75rem;
		top: 0.35rem;
		right: 0.35rem;
	}

	#dejoiy-universe .du-reco__title {
		font-size: 1.15rem;
		margin-bottom: 0.65rem;
	}

	#dejoiy-universe .du-reco__tabs {
		margin-bottom: 0.75rem;
	}

	#dejoiy-universe .du-reco__tab {
		padding: 0.4rem 0.7rem;
		font-size: 0.78rem;
	}

	#dejoiy-universe .du-join {
		margin-left: 0.5rem;
		margin-right: 0.5rem;
	}
}

/* —— Small phones (≤480px) —— */
@media (max-width: 480px) {
	#dejoiy-universe .du-gates {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#dejoiy-universe .du-shelf-v2 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.35rem;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	#dejoiy-universe .du-story__formula {
		font-size: clamp(1.5rem, 8vw, 2rem);
	}
}

/* —— Large desktop (≥1440px) —— */
@media (min-width: 1440px) {
	#dejoiy-universe .du-hero__in,
	#dejoiy-universe .du-reco__in,
	#dejoiy-universe .du-world__in,
	#dejoiy-universe .du-joi__in,
	#dejoiy-universe .du-story__in,
	#dejoiy-universe .du-join__in {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* —— XStore breakpoint alignment (≤1250) —— */
@media (max-width: 1250px) {
	.dejoiy-universe-home .header-wrapper,
	.dejoiy-universe-home .site-header-vertical {
		display: none !important;
	}

	.dejoiy-universe-home .mobile-header-wrapper {
		display: block !important;
	}
}

@media (min-width: 1251px) {
	.dejoiy-universe-home .mobile-header-wrapper {
		display: none !important;
	}
}

/* Fix header rendered after Universe (DOM order) — visual order on all screens */
.dejoiy-universe-home .page-wrapper {
	display: flex !important;
	flex-direction: column !important;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.dejoiy-universe-home .page-wrapper > header.elementor-location-header,
.dejoiy-universe-home .page-wrapper > .elementor-location-header {
	order: -1000 !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 auto;
	position: sticky;
	top: 0;
	z-index: 500;
	background: #fff;
}

.dejoiy-universe-home .dejoiy-site-chrome-header:has(> #dejoiy-universe) {
	display: contents !important;
}

.dejoiy-universe-home #dejoiy-universe {
	order: -500;
	width: 100%;
}

/* Sticky mobile nav from XStore */
.dejoiy-universe-home .et-mobile-panel-wrapper {
	max-width: 100vw;
}