/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.1
 Text Domain:  woodmart
*/

/* ==========================================================================
   PHASE 6J — Floating UI stack (chat / RU-UA / scrollToTop / mobile toolbar)
   CSS-only positioning. No business-logic changes.
   ========================================================================== */

:root {
	--cozy-floating-right: 24px;
	--cozy-floating-gap: 14px;
	--cozy-chat-h: 48px;
	--cozy-lang-h: 40px;
	--cozy-scroll-h: 50px;
	--cozy-chat-bottom: 24px;
	/* Phase 6J.3: desktop language is in top-bar — scroll stacks above chat only. */
	--cozy-lang-bottom: calc(var(--cozy-chat-bottom) + var(--cozy-chat-h) + var(--cozy-floating-gap));
	--cozy-scroll-bottom: calc(var(--cozy-chat-bottom) + var(--cozy-chat-h) + var(--cozy-floating-gap));
	--cozy-float-z-scroll: 360;
	--cozy-float-z-lang: 370;
	--cozy-float-z-chat: 380;
	--cozy-float-z-chat-open: 2147483001;
	--cozy-float-z-toolbar: 350;
}

/* ----- Desktop / large tablet: vertical stack (chat lowest; no lang FAB) ----- */
@media (min-width: 1025px) {
	.cozy-chat-widget--floating:not(.is-open) {
		right: var(--cozy-floating-right) !important;
		bottom: var(--cozy-chat-bottom) !important;
		left: auto !important;
		z-index: var(--cozy-float-z-chat);
	}

	.cozy-chat-widget--floating:not(.is-open) .cozy-chat-toggle {
		position: relative;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		min-width: 44px;
		min-height: 44px;
	}

	/* Floating language removed from desktop — header top-bar owns it. */
	.dv-wru-switcher--floating,
	.dv-lang-switcher.dv-wru-switcher--floating {
		display: none !important;
	}

	.scrollToTop {
		inset-inline-end: var(--cozy-floating-right) !important;
		inset-inline-start: auto !important;
		bottom: var(--cozy-scroll-bottom) !important;
		z-index: var(--cozy-float-z-scroll) !important;
		width: var(--cozy-scroll-h);
		height: var(--cozy-scroll-h);
	}
}

/* ----- ≤1024: toolbar visible — clear bottom-right stack ----- */
@media (max-width: 1024px) {
	:root {
		--cozy-floating-right: 14px;
		--cozy-floating-gap: 12px;
		--cozy-chat-h: 56px;
		--cozy-mobile-toolbar-h: 55px;
		--cozy-mobile-safe-bottom: calc(var(--cozy-mobile-toolbar-h) + env(safe-area-inset-bottom, 0px));
	}

	/* Preferred: language lives in mobile drawer when injection succeeded. */
	body:has(.dv-wru-switcher--mobile-nav) .dv-wru-switcher--floating,
	body:has(.dv-wru-switcher--mobile-nav) .dv-lang-switcher.dv-wru-switcher--floating {
		display: none !important;
	}

	/* Fallback: keep compact floating lang above chat if drawer injection missing. */
	body:not(:has(.dv-wru-switcher--mobile-nav)) .dv-wru-switcher--floating,
	body:not(:has(.dv-wru-switcher--mobile-nav)) .dv-lang-switcher.dv-wru-switcher--floating {
		display: inline-flex !important;
		right: var(--cozy-floating-right) !important;
		bottom: calc(var(--cozy-mobile-safe-bottom) + var(--cozy-chat-h) + var(--cozy-floating-gap)) !important;
		left: auto !important;
		z-index: var(--cozy-float-z-lang) !important;
		padding: 8px 12px !important;
		font-size: 13px !important;
		transform: none !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	}

	body:not(:has(.dv-wru-switcher--mobile-nav)).cozy-chat-open .dv-wru-switcher--floating,
	body:not(:has(.dv-wru-switcher--mobile-nav)).cozy-chat-mobile-open .dv-wru-switcher--floating {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	/* Scroll opposite corner so it never fights chat. */
	.scrollToTop {
		inset-inline-end: auto !important;
		inset-inline-start: 12px !important;
		right: auto !important;
		left: 12px !important;
		bottom: calc(12px + var(--cozy-mobile-safe-bottom)) !important;
		z-index: var(--cozy-float-z-scroll);
		width: 44px;
		height: 44px;
		transform: translateX(-120%);
	}

	.scrollToTop.button-show {
		transform: none;
		pointer-events: auto;
	}

	.sticky-toolbar-on .scrollToTop {
		bottom: calc(12px + var(--cozy-mobile-safe-bottom)) !important;
	}

	/* Chat launcher stays above toolbar + safe-area (plugin JS still adjusts). */
	.cozy-chat-widget--floating:not(.is-open) .cozy-chat-toggle {
		right: var(--cozy-floating-right) !important;
		left: auto !important;
		min-width: 48px;
		min-height: 48px;
		z-index: var(--cozy-float-z-chat);
	}

	.wd-toolbar {
		z-index: var(--cozy-float-z-toolbar);
	}
}

/* Narrow phones: slightly tighter chat offset defaults when JS has not run yet. */
@media (max-width: 767px) {
	.cozy-chat-widget--floating:not(.is-open) .cozy-chat-toggle {
		bottom: calc(var(--cozy-chat-mobile-bottom-offset, 72px) + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* ----- Mobile drawer language (relocated, Phase 6J.1 compact) ----- */
.dv-wru-mobile-nav-item {
	list-style: none;
	margin: 0;
	padding: 10px 15px 8px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dv-wru-switcher--mobile-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
}

.dv-wru-switcher--mobile-nav .dv-wru-switcher__link {
	min-width: 0;
	min-height: 0;
	display: inline;
	padding: 0;
	opacity: 0.55;
	text-decoration: none;
	color: inherit;
	font-weight: 400;
}

.dv-wru-switcher--mobile-nav .dv-wru-switcher__link:hover {
	opacity: 0.85;
	text-decoration: none;
}

.dv-wru-switcher--mobile-nav .dv-wru-switcher__link.is-active {
	opacity: 1;
	font-weight: 600;
	color: var(--wd-primary-color, inherit);
	text-decoration: none;
}

.dv-wru-switcher--mobile-nav .dv-wru-switcher__sep {
	opacity: 0.35;
	font-weight: 400;
}

/* Desktop: drawer copy not needed in the visible header stack. */
@media (min-width: 1025px) {
	.mobile-nav .dv-wru-mobile-nav-item,
	.wd-nav-mobile > .dv-wru-mobile-nav-item,
	li.dv-wru-mobile-nav-item {
		display: none !important;
	}
}

/* ==========================================================================
   PHASE 6J.3 — Desktop language in WHB top-bar (after phones, before social)
   ========================================================================== */

.whb-top-bar .whb-col-left {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 14px;
	min-width: 0;
}

.whb-top-bar .whb-col-left .wd-header-text {
	min-width: 0;
}

.dv-wru-switcher--desktop-header {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, 0.82);
}

.dv-wru-switcher--desktop-header .dv-wru-switcher__link {
	display: inline;
	min-width: 0;
	min-height: 0;
	padding: 0;
	color: inherit;
	text-decoration: none;
	opacity: 0.72;
	font-weight: 400;
}

.dv-wru-switcher--desktop-header .dv-wru-switcher__link:hover {
	opacity: 0.95;
	text-decoration: none;
	color: #fff;
}

.dv-wru-switcher--desktop-header .dv-wru-switcher__link.is-active {
	opacity: 1;
	font-weight: 600;
	color: #fff;
}

.dv-wru-switcher--desktop-header .dv-wru-switcher__sep {
	opacity: 0.4;
	font-weight: 400;
}

/* Belt-and-suspenders: never show top-bar switcher under Woodmart mobile breakpoint. */
@media (max-width: 1024px) {
	.dv-wru-switcher--desktop-header {
		display: none !important;
	}
}

/* Tight desktop: keep phones + social; hide header lang if row is cramped. */
@media (min-width: 1025px) and (max-width: 1200px) {
	.dv-wru-switcher--desktop-header {
		display: none !important;
	}

	/* Temporary floating fallback only in this narrow desktop band. */
	.dv-wru-switcher--floating,
	.dv-lang-switcher.dv-wru-switcher--floating {
		display: inline-flex !important;
		right: var(--cozy-floating-right) !important;
		bottom: var(--cozy-lang-bottom) !important;
		left: auto !important;
		z-index: var(--cozy-float-z-lang) !important;
		transform: none !important;
	}

	:root {
		--cozy-scroll-bottom: calc(var(--cozy-lang-bottom) + var(--cozy-lang-h) + var(--cozy-floating-gap));
	}

	body.cozy-chat-open .dv-wru-switcher--floating,
	body.cozy-chat-mobile-open .dv-wru-switcher--floating {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}
}

/* Open chat panel stays above utility floats; toolbar remains usable when closed. */
.cozy-chat-widget--floating.is-open {
	z-index: var(--cozy-float-z-chat-open);
}

/* ==========================================================================
   PHASE 6J.2 — Hide floating utilities while Woodmart off-canvas is open
   Open state from cartWidget.js / mobileNavigation.js / hiddenSidebar.js:
   .cart-widget-side.wd-opened | .mobile-nav.wd-opened | .wd-sidebar.wd-opened
   .login-form-side.wd-opened
   ========================================================================== */

body:has(.cart-widget-side.wd-opened) .cozy-chat-widget--floating,
body:has(.cart-widget-side.wd-opened) .cozy-chat-toggle,
body:has(.cart-widget-side.wd-opened) .scrollToTop,
body:has(.mobile-nav.wd-opened) .cozy-chat-widget--floating,
body:has(.mobile-nav.wd-opened) .cozy-chat-toggle,
body:has(.mobile-nav.wd-opened) .scrollToTop,
body:has(.wd-sidebar.wd-opened) .cozy-chat-widget--floating,
body:has(.wd-sidebar.wd-opened) .cozy-chat-toggle,
body:has(.wd-sidebar.wd-opened) .scrollToTop,
body:has(.login-form-side.wd-opened) .cozy-chat-widget--floating,
body:has(.login-form-side.wd-opened) .cozy-chat-toggle,
body:has(.login-form-side.wd-opened) .scrollToTop {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Desktop floating language must not sit over open cart drawer. */
body:has(.cart-widget-side.wd-opened) .dv-wru-switcher--floating,
body:has(.login-form-side.wd-opened) .dv-wru-switcher--floating {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* ==========================================================================
   PHASE 6J.4 — Product contact / click-to-call (single product only)
   ========================================================================== */

.cozy-product-contact {
	margin: 14px 0 12px;
	padding: 12px 14px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.02);
	color: inherit;
}

.cozy-product-contact__heading {
	margin: 0 0 2px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.cozy-product-contact__sub {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	opacity: 0.7;
}

.cozy-product-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.cozy-product-contact__item {
	margin: 0;
	padding: 0;
	flex: 1 1 200px;
	min-width: 0;
}

.cozy-product-contact__link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 6px 4px;
	text-decoration: none !important;
	color: inherit;
	border-radius: 4px;
	transition: background-color 0.15s ease;
}

.cozy-product-contact__link:hover {
	background: rgba(0, 0, 0, 0.03);
	color: inherit;
}

.cozy-product-contact__icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	color: var(--wd-primary-color, #83b735);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1L6.6 10.8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1L6.6 10.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cozy-product-contact__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cozy-product-contact__name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}

.cozy-product-contact__phone {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--wd-primary-color, #83b735);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.cozy-product-contact {
		padding: 12px;
	}

	.cozy-product-contact__list {
		flex-direction: column;
		gap: 4px;
	}

	.cozy-product-contact__item {
		flex: 1 1 auto;
	}

	.cozy-product-contact__link {
		min-height: 48px;
		padding: 8px 6px;
	}
}

/* PHASE 6J.4.1 — Desktop compact left-aligned contacts (mobile/tablet unchanged) */
@media (min-width: 1025px) {
	.cozy-product-contact {
		/* hug content; stay left-aligned with summary / ATC */
		width: fit-content;
		max-width: 100%;
		box-sizing: border-box;
	}

	.cozy-product-contact__list {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		gap: 28px;
	}

	.cozy-product-contact__item {
		flex: 0 0 auto;
		width: auto;
		min-width: 0;
	}

	.cozy-product-contact__link {
		min-height: 0;
		padding: 2px 0;
		gap: 8px;
	}

	.cozy-product-contact__link:hover {
		background: transparent;
	}

	.cozy-product-contact__body {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: baseline;
		gap: 8px;
	}

	.cozy-product-contact__name,
	.cozy-product-contact__phone {
		white-space: nowrap;
	}
}


/* ==========================================================================
   PHASE 6J.6 — Hide WHB contact/social top bar on mobile/tablet
   Breakpoint: Woodmart mobile/tablet max-width 1024px (desktop ≥1025)
   Desktop ≥1025: contacts + language + social unchanged (6J.3)
   ========================================================================== */

@media (max-width: 1024px) {
	/* Remove green contact/social row from customer chrome */
	.whb-top-bar {
		display: none !important;
	}

	/*
	 * Zero sticky/header height contributions so display:none does not leave
	 * reserved padding (Woodmart --wd-header-sm-h includes --wd-top-bar-sm-h).
	 * !important beats WHB inline :root block (#wd-style-default_header-inline-css).
	 */
	html:root {
		--wd-top-bar-h: 0.00001px !important;
		--wd-top-bar-sm-h: 0.00001px !important;
		--wd-top-bar-sticky-h: 0.00001px !important;
	}
}