/*
 * Brand Logo Grid for Elementor (v1.1.0)
 *
 * How styling works:
 * 1. Presets only define CSS custom properties (starting values).
 * 2. The rules below read those properties at low specificity.
 * 3. Every Elementor control writes CSS with higher specificity,
 *    so anything you change in Elementor always wins.
 */

/* ==========================================================================
   1. Default tokens (also the "Minimal Grid" preset)
   ========================================================================== */

.blg-widget {
	--blg-card-bg: #ffffff;
	--blg-card-bg-hover: #fdfafa;
	--blg-card-border-w: 1px;
	--blg-card-border-c: #ece6e3;
	--blg-card-border-hover: #dccdc8;
	--blg-card-radius: 4px;
	--blg-card-shadow: none;
	--blg-card-shadow-hover: 0 10px 24px -14px rgba(52, 36, 31, 0.22);
	--blg-card-padding: clamp(14px, 2vw, 28px);
	--blg-card-min-h: clamp(96px, 9vw, 132px);
	--blg-hover-y: -2px;
	--blg-hover-scale: 1;
	--blg-logo-scale-hover: 1.04;
	--blg-line-w: 1px;
	--blg-line-c: #ece6e3;
	--blg-outer-w: 1px;
	--blg-table-bg: #ffffff;
	--blg-gap: 16px;
	--blg-logo-h: clamp(34px, 4vw, 56px);
	--blg-logo-maxw: 150px;
	--blg-name-color: #4c423e;
	--blg-name-color-hover: #1f1917;
	--blg-name-size: 0.8125rem;
	--blg-name-weight: 500;
	--blg-name-ls: 0.02em;
	--blg-name-transform: none;
	--blg-wordmark-color: #2b2321;
	--blg-wordmark-size: clamp(0.95rem, 0.85rem + 0.45vw, 1.2rem);
	--blg-wordmark-weight: 600;
	--blg-wordmark-ls: 0.01em;
	--blg-wordmark-transform: none;
	--blg-subtitle-color: #7b6f6a;
	--blg-more-color: #2b2321;
	--blg-more-hover-bg: #2b2321;
	--blg-more-hover-color: #ffffff;
	--blg-focus: #2b2321;
	--blg-duration: 280ms;
	--blg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	display: block;
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.blg-widget *,
.blg-widget *::before,
.blg-widget *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   2. Presets (starting values only)
   ========================================================================== */

/* Luxury Beauty: blush porcelain cells, rose-taupe lines, refined type. */
.blg-preset-luxury {
	--blg-card-bg: #fbf7f6;
	--blg-card-bg-hover: #ffffff;
	--blg-card-border-c: #eaddd8;
	--blg-card-border-hover: #c7a198;
	--blg-card-radius: 2px;
	--blg-card-shadow-hover: 0 14px 30px -18px rgba(92, 58, 50, 0.3);
	--blg-card-padding: clamp(18px, 2.4vw, 34px);
	--blg-card-min-h: clamp(110px, 10vw, 150px);
	--blg-hover-y: -2px;
	--blg-logo-scale-hover: 1.03;
	--blg-line-c: #eaddd8;
	--blg-table-bg: #fbf7f6;
	--blg-name-color: #6a5650;
	--blg-name-color-hover: #3a2a26;
	--blg-name-size: 0.75rem;
	--blg-name-ls: 0.08em;
	--blg-wordmark-color: #3a2a26;
	--blg-wordmark-weight: 400;
	--blg-wordmark-ls: 0.18em;
	--blg-wordmark-transform: uppercase;
	--blg-wordmark-size: clamp(0.8rem, 0.72rem + 0.35vw, 1rem);
	--blg-subtitle-color: #8a7570;
	--blg-more-color: #5a4540;
	--blg-more-hover-bg: #5a4540;
	--blg-focus: #6b4b44;
	--blg-duration: 380ms;
}

/* Clean Table: crisp neutral lines, no lift, no shadow. */
.blg-preset-clean {
	--blg-card-bg: #ffffff;
	--blg-card-bg-hover: #fafafa;
	--blg-card-border-c: #e5e5e5;
	--blg-card-border-hover: #cfcfcf;
	--blg-card-radius: 0;
	--blg-card-shadow-hover: none;
	--blg-hover-y: 0px;
	--blg-logo-scale-hover: 1.02;
	--blg-line-c: #e5e5e5;
	--blg-name-color: #555555;
	--blg-name-color-hover: #111111;
	--blg-wordmark-color: #222222;
	--blg-subtitle-color: #6f6f6f;
	--blg-more-color: #222222;
	--blg-more-hover-bg: #222222;
	--blg-focus: #111111;
	--blg-duration: 200ms;
}

/* Soft Cards: rounded, airy, gentle shadow. */
.blg-preset-soft {
	--blg-card-bg: #ffffff;
	--blg-card-bg-hover: #ffffff;
	--blg-card-border-c: #f1e7e4;
	--blg-card-border-hover: #e8d3cd;
	--blg-card-radius: 14px;
	--blg-card-shadow: 0 1px 2px rgba(60, 40, 35, 0.04), 0 2px 10px -4px rgba(60, 40, 35, 0.06);
	--blg-card-shadow-hover: 0 16px 32px -18px rgba(60, 40, 35, 0.28);
	--blg-card-padding: clamp(16px, 2.2vw, 30px);
	--blg-hover-y: -3px;
	--blg-gap: 18px;
	--blg-line-c: #f1e7e4;
	--blg-name-color: #5b4d49;
	--blg-name-color-hover: #2b2321;
	--blg-focus: #8c5a50;
}

/* Logo Only: no boxes, grayscale logos that turn to color on hover. */
.blg-preset-logo-only {
	--blg-card-bg: transparent;
	--blg-card-bg-hover: transparent;
	--blg-card-border-w: 0px;
	--blg-card-shadow: none;
	--blg-card-shadow-hover: none;
	--blg-hover-y: 0px;
	--blg-logo-scale-hover: 1.05;
	--blg-line-w: 0px;
	--blg-outer-w: 0px;
	--blg-table-bg: transparent;
	--blg-gray: 100%;
	--blg-gray-hover: 0%;
	--blg-logo-opacity: 0.65;
	--blg-logo-opacity-hover: 1;
}

/* ==========================================================================
   3. Header
   ========================================================================== */

.blg-header {
	margin: 0 0 clamp(20px, 3vw, 40px);
}

.blg-widget .blg-title {
	display: block;
	max-width: 100%;
	margin: 0 auto 10px;
	padding: 0;
	text-align: center;
	overflow-wrap: break-word;
}

.blg-widget .blg-subtitle {
	display: block;
	max-width: min(40em, 100%);
	margin: 0 auto;
	padding: 0;
	text-align: center;
	line-height: 1.6;
	color: var(--blg-subtitle-color);
	overflow-wrap: break-word;
}

/* ==========================================================================
   4. Grid
   ========================================================================== */

.blg-grid-wrap {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.blg-widget .blg-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	column-gap: var(--blg-col-gap, var(--blg-gap));
	row-gap: var(--blg-row-gap, var(--blg-gap));
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blg-widget .blg-item {
	display: flex;
	justify-content: center;
	align-items: stretch;
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blg-widget .blg-item::before,
.blg-widget .blg-item::marker {
	content: none;
}

/* ==========================================================================
   5. Card / cell (shared)
   ========================================================================== */

.blg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: var(--blg-card-min-h);
	padding: var(--blg-card-padding);
	text-align: center;
	background-color: var(--blg-card-bg);
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color var(--blg-duration) var(--blg-ease),
		border-color var(--blg-duration) var(--blg-ease),
		box-shadow var(--blg-duration) var(--blg-ease),
		transform var(--blg-duration) var(--blg-ease);
}

.blg-widget a.blg-card,
.blg-widget a.blg-card:hover,
.blg-widget a.blg-card:focus {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   6. Layout: Separated Cards
   ========================================================================== */

:where(.blg-layout-cards) .blg-card {
	border: var(--blg-card-border-w) solid var(--blg-card-border-c);
	border-radius: var(--blg-card-radius);
	box-shadow: var(--blg-card-shadow);
}

/* ==========================================================================
   7. Layout: Seamless Brand Table
   Technique: each cell draws only its right and bottom line. The grid is
   pushed one line-width past the right and bottom edges of a wrapper with
   overflow hidden, so the outermost lines are clipped. Result: single,
   never-doubled inner lines at any column count, plus an optional outer
   border on the wrapper.
   ========================================================================== */

:where(.blg-layout-seamless) .blg-grid-wrap {
	overflow: hidden;
	background-color: var(--blg-table-bg);
	border-radius: 0;
}

.blg-layout-seamless.blg-outer-on .blg-grid-wrap {
	border: var(--blg-outer-w) solid var(--blg-outer-c, var(--blg-line-c));
}

.blg-layout-seamless .blg-grid {
	column-gap: 0;
	row-gap: 0;
	margin: 0 calc(-1 * var(--blg-line-w)) calc(-1 * var(--blg-line-w)) 0;
}

.blg-layout-seamless .blg-item {
	border-right: var(--blg-line-w) solid var(--blg-line-c);
	border-bottom: var(--blg-line-w) solid var(--blg-line-c);
}

:where(.blg-layout-seamless) .blg-card {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ==========================================================================
   8. Logo
   ========================================================================== */

.blg-logo-wrap {
	display: flex;
	align-items: center;
	justify-content: var(--blg-logo-justify, center);
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.blg-widget .blg-logo {
	display: block;
	width: 100%;
	max-width: min(var(--blg-logo-maxw), 100%);
	height: var(--blg-logo-h);
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	object-fit: contain;
	object-position: var(--blg-logo-pos, center center);
	opacity: var(--blg-logo-opacity, 1);
	filter: grayscale(var(--blg-gray, 0%));
	transform-origin: center center;
	transition:
		transform var(--blg-duration) var(--blg-ease),
		opacity var(--blg-duration) var(--blg-ease),
		filter var(--blg-duration) var(--blg-ease);
}

/* Text logo, shown when a brand has no image yet. */
.blg-wordmark {
	display: block;
	max-width: 100%;
	color: var(--blg-wordmark-color);
	font-size: var(--blg-wordmark-size);
	font-weight: var(--blg-wordmark-weight);
	letter-spacing: var(--blg-wordmark-ls);
	text-transform: var(--blg-wordmark-transform);
	line-height: 1.25;
	overflow-wrap: anywhere;
	transition:
		color var(--blg-duration) var(--blg-ease),
		transform var(--blg-duration) var(--blg-ease);
}

/* ==========================================================================
   9. Brand name
   ========================================================================== */

.blg-name {
	display: block;
	width: 100%;
	margin-top: 12px;
	color: var(--blg-name-color);
	font-size: var(--blg-name-size);
	font-weight: var(--blg-name-weight);
	letter-spacing: var(--blg-name-ls);
	text-transform: var(--blg-name-transform);
	line-height: 1.35;
	overflow-wrap: anywhere;
	transition: color var(--blg-duration) var(--blg-ease);
}

/* Product count (WooCommerce automatic mode). */
.blg-count {
	display: block;
	width: 100%;
	margin-top: 4px;
	color: var(--blg-count-color, var(--blg-subtitle-color));
	font-size: var(--blg-count-size, 0.75rem);
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* ==========================================================================
   10. Hover (only when "Hover Effects" is on)
   ========================================================================== */

:where(.blg-layout-cards).blg-hover-on .blg-card:hover,
:where(.blg-layout-cards).blg-hover-on .blg-card:focus-visible {
	transform: translateY(var(--blg-user-hover-y, var(--blg-hover-y))) scale(var(--blg-user-hover-scale, var(--blg-hover-scale)));
	background-color: var(--blg-card-bg-hover);
	border-color: var(--blg-card-border-hover);
	box-shadow: var(--blg-card-shadow-hover);
	z-index: 2;
}

:where(.blg-layout-seamless).blg-hover-on .blg-card:hover,
:where(.blg-layout-seamless).blg-hover-on .blg-card:focus-visible {
	transform: translateY(var(--blg-user-hover-y, 0px)) scale(var(--blg-user-hover-scale, 1));
	background-color: var(--blg-card-bg-hover);
	z-index: 2;
}

.blg-hover-on .blg-card:hover .blg-logo,
.blg-hover-on .blg-card:focus-visible .blg-logo {
	transform: scale(var(--blg-logo-scale-hover));
	opacity: var(--blg-logo-opacity-hover, var(--blg-logo-opacity, 1));
	filter: grayscale(var(--blg-gray-hover, var(--blg-gray, 0%)));
}

.blg-hover-on .blg-card:hover .blg-wordmark,
.blg-hover-on .blg-card:focus-visible .blg-wordmark {
	color: var(--blg-name-color-hover);
	transform: scale(var(--blg-logo-scale-hover));
}

.blg-hover-on .blg-card:hover .blg-name,
.blg-hover-on .blg-card:focus-visible .blg-name {
	color: var(--blg-name-color-hover);
}

/* ==========================================================================
   11. Keyboard focus (always on, even with hover disabled)
   ========================================================================== */

.blg-widget .blg-card:focus-visible {
	outline: 2px solid var(--blg-focus);
	outline-offset: 3px;
	z-index: 3;
}

.blg-layout-seamless .blg-card:focus-visible {
	outline-offset: -4px;
}

/* ==========================================================================
   12. Manual rows: scroll mode
   ========================================================================== */

.blg-overflow-scroll .blg-grid {
	grid-auto-rows: var(--blg-scroll-row-h, 140px);
}

.blg-overflow-scroll .blg-grid-wrap {
	--blg-rg: 0px;
	box-sizing: content-box;
	max-height: calc(var(--blg-rows, 2) * var(--blg-scroll-row-h, 140px) + (var(--blg-rows, 2) - 1) * var(--blg-rg));
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--blg-line-c) transparent;
}

.blg-overflow-scroll.blg-layout-cards .blg-grid-wrap {
	--blg-rg: var(--blg-row-gap, var(--blg-gap));
	padding-top: 4px;
	padding-bottom: 4px;
}

.blg-overflow-scroll .blg-card {
	min-height: 0;
}

/* ==========================================================================
   13. "View all brands" button
   ========================================================================== */

.blg-more-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	margin: clamp(20px, 2.5vw, 32px) auto 0;
}

.blg-widget .blg-more {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	padding: 0.8em 1.6em;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: none;
	color: var(--blg-more-color);
	background-color: transparent;
	background-image: none;
	border: 1px solid currentColor;
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	transition:
		color var(--blg-duration) var(--blg-ease),
		background-color var(--blg-duration) var(--blg-ease),
		border-color var(--blg-duration) var(--blg-ease);
}

.blg-widget .blg-more::after {
	content: "";
	width: 0.45em;
	height: 0.45em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform var(--blg-duration) var(--blg-ease);
}

.blg-expanded .blg-more::after {
	transform: translateY(0.1em) rotate(-135deg);
}

.blg-widget .blg-more:hover,
.blg-widget .blg-more:focus-visible {
	color: var(--blg-more-hover-color);
	background-color: var(--blg-more-hover-bg);
	border-color: var(--blg-more-hover-bg);
}

.blg-widget .blg-more:focus-visible {
	outline: 2px solid var(--blg-focus);
	outline-offset: 3px;
}

/* ==========================================================================
   14. Utilities
   ========================================================================== */

.blg-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.blg-empty {
	padding: 24px;
	text-align: center;
	font-size: 14px;
	color: #6b6b6b;
	border: 1px dashed #cfc6c2;
	border-radius: 4px;
}

/* ==========================================================================
   15. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.blg-widget .blg-card,
	.blg-widget .blg-logo,
	.blg-widget .blg-wordmark,
	.blg-widget .blg-name,
	.blg-widget .blg-more,
	.blg-widget .blg-more::after {
		transition: none;
	}

	.blg-widget.blg-hover-on .blg-card:hover,
	.blg-widget.blg-hover-on .blg-card:focus-visible,
	.blg-widget.blg-hover-on .blg-card:hover .blg-logo,
	.blg-widget.blg-hover-on .blg-card:focus-visible .blg-logo,
	.blg-widget.blg-hover-on .blg-card:hover .blg-wordmark,
	.blg-widget.blg-hover-on .blg-card:focus-visible .blg-wordmark {
		transform: none;
	}
}