/**
 * Shared layout CSS used by both the Products widget and the Shop Archive
 * widget: the responsive grid, breadcrumb, toolbar (mobile filter toggle,
 * results count, chips, sort dropdown), results area, and the mobile
 * slide-in drawer mechanics for the filter sidebar. This file is
 * deliberately style-agnostic — it applies no matter which product card
 * style (style-1/2/3) or filter style (filter-style-1/2) is selected.
 * Style-specific card CSS lives under styles/<key>/style.css; filter-
 * sidebar-specific CSS (the actual box/price/category styling) lives
 * under filter-styles/<key>/style.css.
 */

.vynox-pb-grid {
	display: grid;
	/* Single variable, not one-per-breakpoint: Elementor's own responsive
	   control mechanism generates the desktop/tablet/mobile media queries
	   for us and re-declares --vynox-columns inside each one, so this same
	   property name is correct at every breakpoint without us needing to
	   hardcode 1024px/767px cutoffs that might not match Elementor's own
	   configured breakpoints (which are also user-editable in Elementor's
	   site settings). Fallback of 4 covers the case where no value was ever
	   set at all (e.g. an older saved widget from before this control existed). */
	grid-template-columns: repeat( var( --vynox-columns, 4 ), 1fr );
	gap: var( --vynox-grid-gap, 20px );
}

.vynox-pb-grid__item {
	display: flex;
}

.vynox-pb-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 40px 20px;
	opacity: 0.7;
}

/* Shop archive: sidebar filters + product grid layout. Bare grid template
   only — the sidebar's own background/border/padding is each filter
   style's own concern (filter-styles/<key>/style.css). */
.vynox-shop-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 32px;
	align-items: start;
}

@media ( max-width: 767px ) {
	.vynox-shop-layout {
		grid-template-columns: 1fr;
	}
}

/* Breadcrumb */
.vynox-shop-breadcrumb {
	font-size: 13px;
	margin-bottom: 16px;
	color: var( --wp--preset--color-contrast-3, #767676 );
}

.vynox-shop-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.vynox-shop-breadcrumb a:hover {
	text-decoration: underline;
}

.vynox-shop-breadcrumb__sep {
	margin: 0 4px;
	opacity: 0.6;
}

/* Toolbar: mobile filter toggle + results count + chips + sort dropdown */
.vynox-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.vynox-shop-toolbar__info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	flex: 1;
}

.vynox-shop-results-count {
	font-size: 14px;
	color: var( --wp--preset--color-contrast-3, #767676 );
	white-space: nowrap;
}

.vynox-shop-archive-widget .vynox-shop-toolbar__mobile-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	background: var( --wp--preset--color-base, #ffffff );
	border: 1px solid var( --vynox-filter-border, #e5e5e5 );
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	color: var( --vynox-filter-text, #1a1a1a );
}

/* Active filter chips */
.vynox-shop-active-chips {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.vynox-shop-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var( --wp--preset--color-contrast-4, #f2f2f2 );
	color: var( --vynox-filter-text, #1a1a1a );
	border-radius: 999px;
	padding: 5px 8px 5px 12px;
	font-size: 12px;
	white-space: nowrap;
}

.vynox-shop-active-chips .vynox-shop-chip button {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: none;
	background: rgba( 0, 0, 0, 0.12 );
	color: inherit;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	padding: 0;
}

/* Custom sort dropdown */
.vynox-shop-sort {
	position: relative;
	--vynox-sort-bg: var( --vynox-sort-bg-override, var( --wp--preset--color-base, #ffffff ) );
	--vynox-sort-border: var( --vynox-sort-border-override, var( --wp--preset--color-contrast-2, #e5e5e5 ) );
	--vynox-sort-text: var( --vynox-sort-text-override, var( --wp--preset--color-contrast, #1a1a1a ) );
}

.vynox-shop-archive-widget .vynox-shop-toolbar .vynox-shop-sort__trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--e-global-color-primary);
	border: 1px solid var( --vynox-sort-border );
	color: #fff;
	border-radius: 8px;
	padding: 9px 14px;
	font-size: 13px;
	cursor: pointer;
	min-width: 180px;
	justify-content: space-between;
}

.vynox-shop-archive-widget .vynox-shop-toolbar .vynox-shop-sort__menu {
	display: none;
	position: absolute;
	top: calc( 100% + 6px );
	right: 0;
	min-width: 100%;
	background: var( --vynox-sort-bg );
	border: 1px solid #FF7A00;
	border-radius: 8px;
	list-style: none;
	margin: 0;
	padding: 6px;
	z-index: 20;
	box-shadow: 0 8px 24px #ff7a0096;
}

.vynox-shop-sort.is-open .vynox-shop-sort__menu {
	display: block;
}

.vynox-shop-toolbar .vynox-shop-sort__menu button {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 8px 10px;
	font-size: 13px;
	color: var( --vynox-sort-text );
	border-radius: 6px;
	cursor: pointer;
}

.vynox-shop-toolbar .vynox-shop-sort__menu button:hover,
.vynox-shop-toolbar .vynox-shop-sort__menu button.is-active {
	background: #ff7a002e;
	color: var(--e-global-color-primary);
}

.vynox-shop-results {
	position: relative;
	min-height: 200px;
}

.vynox-shop-results.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.vynox-shop-results__spinner {
	display: none;
	position: absolute;
	top: 12px;
	right: 12px;
	width: 22px;
	height: 22px;
	border: 3px solid var( --wp--preset--color-contrast-2, #e5e5e5 );
	border-top-color: var( --wp--preset--color-primary, #2e7d32 );
	border-radius: 50%;
	animation: vynox-spin 0.7s linear infinite;
}

.vynox-shop-results.is-loading .vynox-shop-results__spinner {
	display: block;
}

@keyframes vynox-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Mobile: filter sidebar becomes a left-slide-in overlay panel. Targets the
   bare .vynox-shop-filters class — every filter style's <aside> carries
   this class (alongside its own style-specific class) specifically so it
   gets this shared drawer/close-button behavior for free. */
.vynox-shop-filters.vynox-filter2 .vynox-shop-filters__mobile-close {
	display: none;
}

.vynox-shop-mobile-backdrop {
	display: none;
}

@media ( max-width: 767px ) {
	.vynox-shop-toolbar__mobile-toggle {
		display: inline-flex;
	}

	.vynox-shop-layout .vynox-shop-filters {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 1000;
		width: 82vw;
		max-width: 320px;
		border-radius: 0;
		overflow-y: auto;
		transform: translateX( -100% );
		transition: transform 0.3s ease;
		box-shadow: 0 0 24px rgba( 0, 0, 0, 0.2 );
	}

	.vynox-shop-archive-widget.is-filters-open .vynox-shop-filters {
		transform: translateX( 0 );
	}

	.vynox-shop-filters .vynox-shop-filters__mobile-close {
		display: block;
		position: absolute;
		top: 12px;
		right: 12px;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		border: none;
		background: var( --wp--preset--color-contrast-4, #f2f2f2 );
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
	}

	.vynox-shop-mobile-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba( 0, 0, 0, 0.4 );
		z-index: 999;
	}

	.vynox-shop-archive-widget.is-filters-open .vynox-shop-mobile-backdrop {
		display: block;
	}

	body.vynox-filters-open {
		overflow: hidden;
	}
}

/* ---------- Star rating (wc_get_rating_html() output) ----------
 * Every style's card (style-1..4) and the Products/Shop Archive widgets
 * only ever set .star-rating's color/font-size — the actual 5-star glyph
 * rendering was always expected to come from WooCommerce's own bundled
 * frontend CSS (which draws it via a custom icon font + an absolutely
 * positioned width-percentage overlay). On a site where that stylesheet
 * isn't loaded (theme doesn't enqueue it, or strips it for performance),
 * .star-rating had no visual styling at all — the accessible fallback
 * text ("Rated 4.50 out of 5 based on 10 customer ratings") rendered as
 * plain visible text instead of stars.
 *
 * This reproduces the same overlay-width technique WooCommerce itself
 * uses, but with a literal Unicode star glyph instead of a bundled icon
 * font — self-contained, no external font file, works regardless of
 * whether the theme/WooCommerce's own CSS is present. Empty stars are a
 * fixed neutral gray (not meant to be dynamic); filled stars use
 * `color: inherit` so each style's own --vynox-sX-star-color override
 * (set via `color` on an ancestor like .vynox-s3-card__rating
 * .star-rating) still works unchanged.
 */
.vynox-s3-card__rating .star-rating {
	position: relative;
	display: inline-block;
	height: 22px;
	line-height: 1;
	width: 5.3em;
	font-size: 18px;
}

.vynox-s3-card__rating .star-rating::before {
	content: '\2605\2605\2605\2605\2605';
	position: absolute;
	top: 0;
	left: 0;
	font-size: 20px;
	color: #e0e0e0;
}

.vynox-s3-card__rating .star-rating span {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	padding-top: 1.5em;
}

.vynox-s3-card__rating .star-rating span::before {
	content: '\2605\2605\2605\2605\2605';
	position: absolute;
	top: 0;
	left: 0;
	color: var(--e-global-color-primary);
	font-size: 20px;
}

span.vynox-s3-card__rating-count {color: #365817;}