/* =========================================================================
 * DKLens — mobile layout guard.
 *
 * Several Elementor widgets on the homepage were resized by dragging the
 * editor handles, which stored literal widths like 93.6% and 104.63%. Anything
 * over 100% pushes its section wider than the phone viewport, so text and
 * backgrounds run off the right edge. This clamps them without touching the
 * Elementor data, and stops feature rows from refusing to wrap.
 * ========================================================================= */

/* Full-bleed sections use 100vw, which on desktop includes the scrollbar and
   would otherwise cause a few pixels of horizontal scroll. `clip` rather than
   `hidden` so sticky headers keep working. */
html,
body {
	overflow-x: clip;
}

@media (max-width: 767px) {

	/* Nothing may be wider than its own container on a phone. */
	.elementor-element,
	.elementor-widget,
	.elementor-widget-container,
	.e-con,
	.e-con-inner,
	.e-flexbox {
		max-width: 100% !important;
	}

	/* Elementor v4 writes hand-dragged widths into a custom property. */
	.elementor-element {
		--container-widget-width: 100% !important;
	}

	/* Feature / USP rows: wrap instead of running off-screen. */
	.e-flexbox {
		flex-wrap: wrap;
	}

	/* Hero copy — long single lines were being clipped, not wrapped. */
	.hero-eyebrow,
	.hero-title,
	.hero-sub {
		white-space: normal !important;
		max-width: 100% !important;
		overflow-wrap: break-word;
	}

	/* Media never overhangs. */
	img,
	svg,
	video,
	iframe {
		max-width: 100%;
	}
}

/* =========================================================================
 * Headlight showcase (.dks coverflow) — restore the arrows on phones.
 *
 * That block ships its own inline <style> that sets `.dks__arrow { display:
 * none }` below 700px, leaving only the dots. Inline styles in the body are
 * parsed after this stylesheet, so every property here needs !important to
 * win. The arrows are moved down to flank the dots, which is a stable
 * position regardless of how tall the slide image renders.
 * ========================================================================= */

@media (max-width: 700px) {
	.dks__arrow {
		display: flex !important;
		position: absolute !important;
		top: auto !important;
		bottom: 16px !important;
		transform: none !important;
		width: 38px !important;
		height: 38px !important;
		background: #FFFFFF !important;
		border: 1px solid #E6E6E6 !important;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
		z-index: 8 !important;
	}

	.dks__arrow--prev {
		left: 14px !important;
		right: auto !important;
	}

	.dks__arrow--next {
		right: 14px !important;
		left: auto !important;
	}

	/* Kill the desktop hover nudge — it just looks like a glitch on touch. */
	.dks__arrow--prev:hover,
	.dks__arrow--next:hover {
		transform: none !important;
	}

	.dks__arrow svg {
		width: 44% !important;
		height: 44% !important;
	}
}

/* =========================================================================
 * Mobile catalog accordion — output of [dklens_mobile_catalog].
 * Loaded site-wide because the shortcode can be placed anywhere, but it is
 * really meant for Woodmart's mobile menu drawer.
 * ========================================================================= */

.dklm {
	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
	color: #111111;
}

.dklm * {
	box-sizing: border-box;
}

.dklm__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 15px 18px;
	border-bottom: 1px solid #ECECEC;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #111111;
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}

/* Hide the default disclosure triangle. */
.dklm__row::-webkit-details-marker {
	display: none;
}

.dklm__row::marker {
	content: "";
}

.dklm__chevron {
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-right: 2px solid #B0B0B0;
	border-bottom: 2px solid #B0B0B0;
	transform: rotate(-45deg);
	transition: transform 200ms ease;
}

.dklm__group[open] > .dklm__row {
	color: #FF5A00;
}

.dklm__group[open] > .dklm__row .dklm__chevron {
	transform: rotate(45deg);
	border-color: #FF5A00;
}

.dklm__children {
	margin: 0;
	padding: 0;
	list-style: none;
	background: #FAFAFA;
}

.dklm__child {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 18px 13px 30px;
	border-bottom: 1px solid #ECECEC;
	font-size: 13.5px;
	color: #444444;
	text-decoration: none;
}

.dklm__child--all {
	font-weight: 700;
	color: #111111;
}

.dklm__count {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 600;
	color: #9A9A9A;
}

.dklm__row:focus-visible,
.dklm__child:focus-visible {
	outline: 2px solid #FF5A00;
	outline-offset: -2px;
}

/* =========================================================================
 * Mobile catalog drill-down (.dkc) — Woodmart's Categories tab.
 * Panels are stacked in the DOM; only the active one is displayed, and the
 * breadcrumb at the top walks back up.
 * ========================================================================= */

.dkc {
	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
	color: #111111;
}

/* The drill-down sits inside a single <li> so Woodmart's tab logic keeps
   working on the parent <ul>. Strip that host's inherited list styling. */
.dkc-host {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}

.dkc * {
	box-sizing: border-box;
}

/* --- Breadcrumb --- */
.dkc__crumbs {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	border-bottom: 1px solid #ECECEC;
}

.dkc__crumbs.is-nested {
	display: flex;
}

.dkc__crumb {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	min-height: 0;
	padding: 6px 11px;
	border: none;
	border-radius: 999px;
	background: #F1F1F1;
	color: #555555;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.dkc__crumb + .dkc__crumb {
	margin-left: 12px;
}

.dkc__crumb + .dkc__crumb::before {
	content: "›";
	position: absolute;
	left: -12px;
	top: 50%;
	transform: translateY(-50%);
	color: #B0B0B0;
	font-size: 14px;
}

.dkc__crumb.is-current {
	background: #FFF0E8;
	color: #FF5A00;
}

/* --- Panels --- */
.dkc__panel {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dkc__panel.is-active {
	display: block;
	animation: dkc-slide 220ms ease;
}

@keyframes dkc-slide {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* --- Rows --- */
.dkc__row {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 11px 16px;
	border: none;
	border-bottom: 1px solid #F0F0F0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #111111;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.dkc__row:hover {
	background: #FAFAFA;
	color: #111111;
}

.dkc__row--all {
	color: #FF5A00;
	font-weight: 700;
}

.dkc__thumb {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #F5F5F5;
	border-radius: 8px;
}

.dkc__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.dkc__row--all .dkc__thumb {
	display: none;
}

.dkc__name {
	flex: 1 1 auto;
	min-width: 0;
}

.dkc__count {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 600;
	color: #9A9A9A;
}

.dkc__chev {
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	border-right: 2px solid #BFBFBF;
	border-bottom: 2px solid #BFBFBF;
	transform: rotate(-45deg);
}

.dkc__row:focus-visible {
	outline: 2px solid #FF5A00;
	outline-offset: -2px;
}