/* =====================================================================
   DBY Faves — product grid
   Colors/spacing are CSS variables so the Elementor widget's Style tab
   (and any theme) can override them on `.dby-faves`.
   ===================================================================== */

.dby-faves {
	--fv-cols: 3;
	--fv-gap: 28px;
	--fv-navy: var(--navy, #004077);
	--fv-navy-deep: var(--navy-deep, #00305c);
	--fv-terra: var(--terra, #E77241);
	--fv-terra-deep: var(--terra-deep, #c95c2c);
	--fv-cream: var(--cream, #F4F0EB);
	--fv-cream-deep: var(--cream-deep, #ece5d9);
	--fv-ink: var(--ink, #2C2C2C);
	--fv-muted: #6b6b6b;
	--fv-white: #ffffff;
	--fv-radius: 22px;
	--fv-shadow: var(--lift, 0 24px 48px -12px rgba(15, 23, 42, .18));
	--fv-card-bg: var(--fv-white);
	--fv-media-bg: var(--fv-white);   /* product shots are usually on white */
	--fv-media-ratio: 1 / 1;          /* Amazon-style square product images */
	--fv-media-pad: 22px;
	--fv-body-pad: 24px 26px 28px;
	--fv-kicker: var(--fv-terra);
	--fv-title: var(--fv-navy);
	--fv-text: var(--fv-ink);
	--fv-btn-bg: var(--fv-navy);
	--fv-btn-text: var(--fv-white);
	--fv-btn-ic-bg: var(--fv-terra);
	--fv-btn-ic-text: var(--fv-white);
	--fv-btn-hover-bg: var(--fv-navy-deep);
	--fv-btn-hover-text: var(--fv-white);
	--fv-filter-bg: var(--fv-white);
	--fv-filter-text: var(--fv-navy);
	--fv-filter-border: rgba(0, 64, 119, .18);
	--fv-filter-active-bg: var(--fv-navy);
	--fv-filter-active-text: var(--fv-white);
	--fv-badge-bg: var(--fv-navy);
	--fv-badge-text: var(--fv-white);
	--fv-badge-pick-bg: var(--fv-terra);
	--fv-badge-pick-text: var(--fv-white);
	color: var(--fv-text);
}

.dby-faves *, .dby-faves *::before, .dby-faves *::after { box-sizing: border-box; }

/* ---- Filters ---- */
.dby-faves__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 12px;
	margin: 0 0 34px;
}
.dby-faves__filters--types { margin-top: -18px; }
.dby-faves .dby-faves__filters .dby-faves__filter,
.dby-faves .dby-faves__filters .dby-faves__filter:hover,
.dby-faves .dby-faves__filters .dby-faves__filter:focus {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 11px 20px;
	border: 1.5px solid var(--fv-filter-border);
	border-radius: 999px;
	background: var(--fv-filter-bg);
	color: var(--fv-filter-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	text-transform: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.dby-faves .dby-faves__filters .dby-faves__filter:hover {
	border-color: var(--fv-filter-active-bg);
	transform: translateY(-1px);
}
.dby-faves .dby-faves__filters .dby-faves__filter:focus-visible {
	outline: 3px solid var(--fv-terra);
	outline-offset: 2px;
}
.dby-faves .dby-faves__filters .dby-faves__filter.is-active,
.dby-faves .dby-faves__filters .dby-faves__filter.is-active:hover,
.dby-faves .dby-faves__filters .dby-faves__filter.is-active:focus {
	background: var(--fv-filter-active-bg);
	border-color: var(--fv-filter-active-bg);
	color: var(--fv-filter-active-text);
}
.dby-faves__count {
	font-size: 12px;
	font-weight: 800;
	opacity: .7;
}
.dby-faves__filters--sub { margin: -20px 0 30px; }
.dby-faves__filters--sub[hidden] { display: none; }
.dby-faves .dby-faves__filters--sub .dby-faves__filter,
.dby-faves .dby-faves__filters--sub .dby-faves__filter:hover,
.dby-faves .dby-faves__filters--sub .dby-faves__filter:focus {
	padding: 8px 15px;
	font-size: 13.5px;
	font-weight: 700;
	border-color: transparent;
	background: rgba(0, 64, 119, .06);
}
.dby-faves .dby-faves__filters--sub .dby-faves__filter:hover { background: rgba(0, 64, 119, .12); }
.dby-faves .dby-faves__filters--sub .dby-faves__filter.is-active,
.dby-faves .dby-faves__filters--sub .dby-faves__filter.is-active:hover,
.dby-faves .dby-faves__filters--sub .dby-faves__filter.is-active:focus {
	background: var(--fv-terra);
	border-color: var(--fv-terra);
	color: var(--fv-white);
}
.dby-faves .dby-faves__filters--types .dby-faves__filter {
	padding: 7px 14px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .1em;
}

/* ---- Grid ---- */
.dby-faves__grid {
	display: grid;
	grid-template-columns: repeat(var(--fv-cols), minmax(0, 1fr));
	gap: var(--fv-gap);
	align-items: stretch;
}
@media (max-width: 1000px) {
	.dby-faves__grid { grid-template-columns: repeat(min(var(--fv-cols), 2), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.dby-faves__grid { grid-template-columns: 1fr; gap: 22px; }
}
/* Inside the Elementor widget the responsive Columns control owns the
   breakpoints (desktop/tablet/mobile), so the fallbacks above step aside. */
.elementor-widget-dby-faves .dby-faves__grid {
	grid-template-columns: repeat(var(--fv-cols), minmax(0, 1fr));
}

.dby-faves__empty {
	text-align: center;
	font-size: 18px;
	color: var(--fv-muted);
	padding: 40px 20px;
	margin: 0;
}
.dby-faves__grid + .dby-faves__empty { padding-top: 0; }

/* ---- Card ---- */
.dby-fave {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--fv-card-bg);
	border-radius: var(--fv-radius);
	box-shadow: var(--fv-shadow);
	overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease;
}
.dby-fave:hover { transform: translateY(-5px); }
.dby-fave[hidden] { display: none; }

.dby-fave__media {
	position: relative;
	aspect-ratio: var(--fv-media-ratio);
	background: var(--fv-media-bg);
	overflow: hidden;
	border-bottom: 1px solid rgba(0, 64, 119, .08); /* hairline so a white well still reads as a frame */
}
/* The frame is absolutely positioned so a tall product image can never
   stretch the well — every card's image area stays the same ratio. */
.dby-fave__frame {
	position: absolute;
	inset: var(--fv-media-pad);
	display: flex;
	align-items: center;
	justify-content: center;
}
.dby-faves .dby-fave__img,
.elementor .dby-faves .dby-fave__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 0;
	transition: transform .3s ease;
}
.dby-fave:hover .dby-fave__img { transform: scale(1.035); }
.dby-fave__placeholder {
	font-size: 64px;
	font-weight: 900;
	color: var(--fv-navy);
	opacity: .18;
}
.dby-fave__placeholder--text {
	font-size: 26px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.2;
	opacity: .55;
}

.dby-fave__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--fv-badge-bg);
	color: var(--fv-badge-text);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.3;
	pointer-events: none;
}
.dby-fave__badge--pick {
	background: var(--fv-badge-pick-bg);
	color: var(--fv-badge-pick-text);
}
.dby-fave.is-featured .dby-fave__media::after {
	content: "★";
	position: absolute;
	top: 12px;
	right: 14px;
	color: var(--fv-terra);
	font-size: 18px;
	line-height: 1;
}

.dby-fave__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--fv-body-pad);
}
.dby-fave__cat {
	display: block;
	font-size: 12.5px;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fv-kicker);
	margin-bottom: 8px;
}
.dby-faves .dby-fave__title {
	margin: 0 0 4px;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--fv-title);
}
.dby-faves .dby-fave__title a {
	color: inherit;
	text-decoration: none;
}
.dby-faves .dby-fave__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dby-fave__brand {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--fv-muted);
	margin-bottom: 12px;
}
.dby-faves .dby-fave__desc {
	margin: 0 0 18px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--fv-text);
}
.dby-fave__footer {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding-top: 6px;
}

/* Pill button (mirrors the theme's pill-btn.navy) */
.dby-faves .dby-fave__btn,
.dby-faves .dby-fave__btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 7px 7px 7px 22px;
	border-radius: 999px;
	background: var(--fv-btn-bg);
	color: var(--fv-btn-text);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.dby-faves .dby-fave__btn:hover,
.dby-faves .dby-fave__btn:focus {
	background: var(--fv-btn-hover-bg);
	color: var(--fv-btn-hover-text);
	text-decoration: none;
	transform: translateY(-2px);
}
.dby-faves .dby-fave__btn:focus-visible {
	outline: 3px solid var(--fv-terra);
	outline-offset: 2px;
}
.dby-fave__btn-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--fv-btn-ic-bg);
	color: var(--fv-btn-ic-text);
	flex: 0 0 auto;
}
.dby-fave__btn-ic svg { width: 16px; height: 16px; display: block; }

.dby-fave__code {
	font-size: 14px;
	color: var(--fv-muted);
}
.dby-fave__code strong {
	color: var(--fv-navy);
	letter-spacing: .06em;
	font-weight: 900;
}
.dby-faves .dby-fave__note {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--fv-muted);
}

/* ---- Disclosure ---- */
.dby-faves .dby-faves__disclosure {
	margin: 34px auto 0;
	max-width: 70ch;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fv-muted);
}
.dby-faves .dby-faves__disclosure--above { margin: 0 auto 28px; }

@media (prefers-reduced-motion: reduce) {
	.dby-fave, .dby-fave__img, .dby-faves .dby-fave__btn, .dby-faves .dby-faves__filters .dby-faves__filter { transition: none; }
	.dby-fave:hover, .dby-faves .dby-fave__btn:hover { transform: none; }
	.dby-fave:hover .dby-fave__img { transform: none; }
}