/* DOT Made Elements — widgets.css
 * Most card/rail/hero/flash styling ships with the theme's woocommerce.css.
 * This file carries editor-safety fallbacks so widgets still read correctly
 * inside the Elementor editor if the theme stylesheet isn't loaded there.
 */

.elementor-widget-dm_product_rail,
.elementor-widget-dm_category_tiles,
.elementor-widget-dm_hero,
.elementor-widget-dm_flash_deal,
.elementor-widget-dm_departments_menu {
	--dm-green: #74be72;
	--dm-green-dark: #5fa85b;
	--dm-orange: #e8552b;
	--dm-orange-tint: #fbece8;
	--dm-ink: #2e3338;
	--dm-muted: #8a9099;
	--dm-line: #eceef0;
	--dm-line-strong: #e2e5e9;
	--dm-bg: #f6f7f9;
	--dm-star: #f5a623;
	--dm-radius: 11px;
	--dm-radius-lg: 14px;
	--dm-gap: 14px;
	--dm-shadow: 0 8px 24px rgba(40, 50, 60, 0.1);
	--dm-shadow-hover: 0 12px 30px rgba(40, 50, 60, 0.16);
	--dm-font: "Inter", system-ui, sans-serif;
	--dm-display: "Poppins", "Inter", sans-serif;
}

/* Keep the editor preview tidy even before theme CSS cascades in. */
.elementor-widget-dm_product_rail .dm-empty,
.elementor-widget-dm_category_tiles .dm-empty,
.elementor-widget-dm_flash_deal .dm-empty,
.elementor-widget-dm_departments_menu .dm-empty {
	color: #8a9099;
	font: 400 14px var(--dm-font, sans-serif);
	padding: 20px;
	border: 1px dashed #d7dbe0;
	border-radius: 10px;
	text-align: center;
}

/* Departments Menu — "All Departments" list card. */
.dm-dept-menu {
	background: #fff;
	border: 1px solid var(--dm-line-strong);
	border-radius: var(--dm-radius-lg);
	overflow: hidden;
	font-family: var(--dm-font);
}

.dm-dept-menu__head {
	background: var(--dm-green);
	color: #fff;
	font: 700 15px/1.3 var(--dm-display, var(--dm-font));
	padding: 14px 18px;
}

.dm-dept-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dm-dept-menu__item + .dm-dept-menu__item {
	border-top: 1px solid var(--dm-line);
}

.dm-dept-menu__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 18px;
	color: var(--dm-ink);
	font-size: 14px;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.dm-dept-menu__item a:hover,
.dm-dept-menu__item a:focus-visible {
	background: var(--dm-bg);
	color: var(--dm-green-dark);
}

.dm-dept-menu__chevron {
	color: var(--dm-muted);
	font-size: 17px;
	line-height: 1;
	flex-shrink: 0;
}

.dm-dept-menu__all {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 14px 18px;
	border-top: 1px solid var(--dm-line);
	color: var(--dm-green-dark);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: color 0.15s ease;
}

.dm-dept-menu__all:hover,
.dm-dept-menu__all:focus-visible {
	color: var(--dm-green);
	text-decoration: underline;
}

/* Mobile only (matches Elementor's own mobile breakpoint, up to 767px) — swap
   the list card for a horizontal scrolling pill row so it reads like a quick
   category filter strip instead of a squeezed dropdown card. Tablet (768px+)
   keeps the desktop card layout. */
.dm-dept-menu__pills {
	display: none;
}

@media (max-width: 767px) {
	.dm-dept-menu--has-pills {
		border-radius: 0;
	}

	.dm-dept-menu__card--has-pills {
		display: none;
	}

	.dm-dept-menu__pills {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		scroll-snap-type: x mandatory;
		padding: 10px 0 14px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.dm-dept-menu__pills::-webkit-scrollbar {
		display: none;
	}

	.dm-dept-menu__pill {
		flex: 0 0 auto;
		scroll-snap-align: start;
		padding: 8px 16px;
		border: 1px solid var(--dm-line-strong);
		border-radius: 999px;
		background: #fff;
		color: var(--dm-ink);
		font: 600 13px var(--dm-font);
		white-space: nowrap;
		text-decoration: none;
		transition: border-color 0.15s ease, color 0.15s ease;
	}

	/* Gutter lives on the end items themselves (margin), not the scroll
	   container's padding or a gap-dependent spacer — flex scroll containers
	   are unreliable at rendering their own leading/trailing padding, but a
	   flex item's own margin is always respected. */
	.dm-dept-menu__pill:first-child {
		margin-left: 16px;
	}

	.dm-dept-menu__pill:last-child {
		margin-right: 16px;
	}

	.dm-dept-menu__pill:hover,
	.dm-dept-menu__pill:focus-visible {
		border-color: var(--dm-ink);
	}

	.dm-dept-menu__pill.is-active {
		border-color: var(--dm-ink);
		color: var(--dm-ink);
		font-weight: 700;
	}
}

/* Product Rail — independent mobile layout override. `.is-mobile-grid` /
   `.is-mobile-scroll` are set from the widget's own "Mobile" control, always
   in addition to the desktop `.is-grid`/`.is-scroll` class, so any of the
   four grid/scroll combinations across desktop+mobile are possible. Uses
   !important because it must win over the theme's base `.dm-rail__track`
   rules (woocommerce.css) regardless of stylesheet load order. */

/* Elementor's own row/column/widget-wrap chain is flex-based. Flex (and
   grid) items default to `min-width: auto`, meaning "never shrink below my
   content's size" — so a fixed-width horizontal-scroll row inside them can
   force every ancestor up to the column to stretch to the row's full
   (unscrolled) width, dragging the whole page into horizontal scroll instead
   of the overflow staying contained in the track's own scrollport. Zeroing
   min-width along the chain we control breaks that propagation; it's a
   no-op for the grid layout, so it's safe unconditionally. */
.elementor-widget-dm_product_rail,
.elementor-widget-dm_product_rail .elementor-widget-container,
.elementor-widget-dm_departments_menu,
.elementor-widget-dm_departments_menu .elementor-widget-container,
.dm-rail,
.dm-dept-menu {
	min-width: 0;
	max-width: 100%;
}

@media (max-width: 767px) {
	.elementor-widget-dm_product_rail .dm-rail__track.is-mobile-grid {
		display: grid !important;
		overflow-x: visible !important;
		grid-template-columns: repeat(var(--dm-cols, 2), 1fr);
		gap: 11px;
	}

	.elementor-widget-dm_product_rail .dm-rail__track.is-mobile-scroll {
		display: flex !important;
		overflow-x: auto !important;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		scroll-snap-type: x mandatory;
		padding-bottom: 6px;
		scrollbar-width: none;
	}

	.elementor-widget-dm_product_rail .dm-rail__track.is-mobile-scroll::-webkit-scrollbar {
		display: none;
	}

	.elementor-widget-dm_product_rail .dm-rail__track.is-mobile-scroll > .dm-card {
		flex: 0 0 var(--dm-card-w, 200px);
		scroll-snap-align: start;
	}

	/* An arrow pair only ever renders when the desktop layout is "scroll" —
	   if mobile overrides that back to grid, the arrows would otherwise be
	   left dangling above a non-scrolling grid. */
	.elementor-widget-dm_product_rail .dm-rail--mobile-grid .dm-rail__arrows {
		display: none;
	}
}