/*
 * Perfamix Home Discovery Batch — Shared CSS v0.6.1
 * Product Discovery Grid + Reviews Carousel + Brand Discovery Grid
 */

/* ──────────────────────────────────────────────────────────── */
/* 1. Shared Star Rating Component                              */
/* ──────────────────────────────────────────────────────────── */
.pfmx-star {
	display: inline-flex;
	position: relative;
	width: var(--pfmx-edg-star-size, var(--pfmx-rc-star-size, 16px));
	height: var(--pfmx-edg-star-size, var(--pfmx-rc-star-size, 16px));
	color: var(--pfmx-edg-star-empty, var(--pfmx-rc-star-empty, #e5e7eb));
}

.pfmx-star::before {
	content: "★";
	font-family: inherit;
	font-size: 100%;
	line-height: 1;
	display: block;
	width: 100%;
	height: 100%;
}

.pfmx-star-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	color: var(--pfmx-edg-star-filled, var(--pfmx-rc-star-filled, #fbbf24));
}

.pfmx-star-fill::before {
	content: "★";
	font-family: inherit;
	font-size: 100%;
	line-height: 1;
	display: block;
	width: var(--pfmx-edg-star-size, var(--pfmx-rc-star-size, 16px));
	height: 100%;
}

.pfmx-edg-card__rating,
.pfmx-rc-rating {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

/* ──────────────────────────────────────────────────────────── */
/* 2. Editorial Grid Base (Product & Brand)                     */
/* ──────────────────────────────────────────────────────────── */
.pfmx-editorial-grid {
	position: relative;
}

.pfmx-editorial-grid--has-fade {
	overflow: hidden;
}

.pfmx-edg-list {
	display: grid;
	grid-template-columns: repeat(var(--pfmx-edg-cols, 6), 1fr);
	column-gap: var(--pfmx-edg-gap-col, 20px);
	row-gap: var(--pfmx-edg-gap-row, 30px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pfmx-edg-item {
	display: block;
	min-width: 0;
}

.pfmx-edg-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	background: var(--pfmx-edg-card-bg, transparent);
	border: 1px solid var(--pfmx-edg-card-border, #f3f4f6);
	border-radius: var(--pfmx-edg-card-radius, 8px);
	padding: var(--pfmx-edg-card-padding, 16px);
	height: 100%;
	min-height: var(--pfmx-edg-card-min-h, auto);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.pfmx-edg-card:hover,
.pfmx-edg-card:focus-visible {
	border-color: var(--pfmx-edg-card-border-hover, #d1d5db);
	text-decoration: none;
}

.pfmx-edg-card__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* ──────────────────────────────────────────────────────────── */
/* 3. Product Discovery Grid specific                           */
/* ──────────────────────────────────────────────────────────── */
.pfmx-product-discovery .pfmx-edg-card__image {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--pfmx-edg-img-space, 16px);
}

.pfmx-product-discovery .pfmx-edg-card__image img {
	max-height: var(--pfmx-edg-img-max-h, 180px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.pfmx-edg-card__name {
	color: var(--pfmx-edg-name-color, #111827);
	margin-bottom: var(--pfmx-edg-name-space, 8px);
	font-weight: 500;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s ease;
}

.pfmx-edg-card:hover .pfmx-edg-card__name,
.pfmx-edg-card:focus-visible .pfmx-edg-card__name {
	color: var(--pfmx-edg-name-hover, var(--pfmx-edg-name-color, #111827));
}

/* ──────────────────────────────────────────────────────────── */
/* 4. Brand Discovery Grid specific                             */
/* ──────────────────────────────────────────────────────────── */
.pfmx-edg-brand__logo {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--pfmx-edg-logo-space, 16px);
	flex-grow: 1;
}

.pfmx-edg-brand__logo img {
	max-width: var(--pfmx-edg-logo-max-w, 120px);
	max-height: var(--pfmx-edg-logo-max-h, 80px);
	width: auto;
	height: auto;
	object-fit: contain;
}

.pfmx-edg-brand__name {
	color: var(--pfmx-edg-name-color, #111827);
	margin-bottom: var(--pfmx-edg-name-space, 4px);
	font-weight: 600;
}

.pfmx-edg-brand__count {
	color: var(--pfmx-edg-meta-color, #6b7280);
	font-size: 0.875em;
	margin-bottom: var(--pfmx-edg-meta-space, 8px);
}

/* ──────────────────────────────────────────────────────────── */
/* 5. Bottom Fade Overlay — no color mix function, no click intercept  */
/*                                                              */
/* Uses two CSS variables:                                      */
/*   --pfmx-edg-fade-color  : solid stop color (default #fff)  */
/*   --pfmx-edg-fade-height : height of the overlay            */
/*   --pfmx-edg-fade-strength : overlay opacity 0-1            */
/*   --pfmx-edg-fade-start  : transparent stop % (default 10%) */
/* ──────────────────────────────────────────────────────────── */
.pfmx-editorial-grid--has-fade .pfmx-edg-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--pfmx-edg-fade-height, 180px);
	background: linear-gradient(to bottom,
			transparent var(--pfmx-edg-fade-start, 10%),
			var(--pfmx-edg-fade-color, #ffffff) 100%);
	opacity: var(--pfmx-edg-fade-strength, 1);
	pointer-events: none;
	z-index: 10;
}

/* ──────────────────────────────────────────────────────────── */
/* 6. Reviews Carousel Layout                                   */
/* ──────────────────────────────────────────────────────────── */
.pfmx-reviews-carousel {
	--pfmx-rc-card-radius-default: 26px;
	--pfmx-rc-card-pad-default: 32px 28px 26px;
	--pfmx-rc-card-blur-default: 16px;
	position: relative;
	padding: var(--pfmx-rc-padding, 0);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pfmx-reviews-carousel.pfmx-rc-pos-top-end .pfmx-rc-controls {
	align-self: flex-end;
}

.pfmx-reviews-carousel.pfmx-rc-pos-bottom .pfmx-rc-controls {
	order: 10;
	align-self: center;
	margin-top: 10px;
}

/* Navigation controls remain available before and after Swiper initialises. */
.pfmx-rc-controls {
	display: flex;
	gap: var(--pfmx-rc-nav-gap, 8px);
	align-items: center;
}

.pfmx-rc-controls button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pfmx-rc-nav-size, 44px);
	height: var(--pfmx-rc-nav-size, 44px);
	border-radius: var(--pfmx-rc-nav-radius, 50%);
	background: var(--pfmx-rc-nav-bg, transparent);
	border: 1px solid var(--pfmx-rc-nav-border, #e5e7eb);
	color: var(--pfmx-rc-nav-color, #374151);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	padding: 0;
}

.pfmx-rc-controls button:hover,
.pfmx-rc-controls button:focus-visible {
	background: var(--pfmx-rc-nav-bg-hover, #f3f4f6);
	color: var(--pfmx-rc-nav-color-hover, #111827);
}

.pfmx-rc-controls button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pfmx-rc-controls svg {
	width: var(--pfmx-rc-nav-icon, 20px);
	height: var(--pfmx-rc-nav-icon, 20px);
}

/* ──────────────────────────────────────────────────────────── */
/* 7. Reviews Carousel Swiper track                             */
/* ──────────────────────────────────────────────────────────── */
.pfmx-rc-swiper {
	width: 100%;
	overflow: hidden;
}

/* Pre-initialization horizontal scroll fallback — no html.no-js dependency */
.pfmx-rc-swiper>.swiper-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	height: 100%;
	box-sizing: content-box;
	transform: translate3d(0, 0, 0);
	transition-property: transform;
	align-items: stretch;
	gap: 0;
}

.pfmx-rc-swiper>.swiper-wrapper>.swiper-slide {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	height: auto;
}

.pfmx-rc-swiper:not(.swiper-initialized)>.swiper-wrapper {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	gap: 20px;
}

.pfmx-rc-swiper:not(.swiper-initialized)>.swiper-wrapper>.pfmx-rc-card {
	flex: 0 0 calc(100% / var(--pfmx-rc-spv-fallback, 3) - 20px);
	scroll-snap-align: start;
}

/* ──────────────────────────────────────────────────────────── */
/* 8. Review Card — premium single surface                      */
/* ──────────────────────────────────────────────────────────── */
.pfmx-rc-card {
	display: flex;
	flex-direction: column;
	background-color: var(--pfmx-rc-card-bg, #faf9f7);
	background: radial-gradient(circle at top right, var(--pfmx-rc-card-glow, rgba(255, 255, 255, 0.4)) 0%, transparent 60%), var(--pfmx-rc-card-bg, rgba(250, 249, 247, 0.78));
	-webkit-backdrop-filter: blur(var(--pfmx-rc-card-blur, var(--pfmx-rc-card-blur-default))) saturate(var(--pfmx-rc-card-saturate, 135%));
	backdrop-filter: blur(var(--pfmx-rc-card-blur, var(--pfmx-rc-card-blur-default))) saturate(var(--pfmx-rc-card-saturate, 135%));
	border: 1px solid var(--pfmx-rc-card-border, rgba(232, 227, 218, 0.8));
	border-radius: var(--pfmx-rc-card-radius, var(--pfmx-rc-card-radius-default));
	padding: var(--pfmx-rc-card-pad, var(--pfmx-rc-card-pad-default));
	min-height: var(--pfmx-rc-card-min-h, auto);
	height: 100%;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 10px rgba(0, 0, 0, 0.05), 0 4px 20px rgba(0, 0, 0, 0.03);
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pfmx-rc-card:focus-visible {
	outline: 2px solid var(--pfmx-rc-card-border-hover, #c8bfb0);
	outline-offset: 3px;
}

/* Card Top Rail */
.pfmx-rc-card__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12px;
	z-index: 2;
	position: relative;
}

.pfmx-rc-quote-icon {
	width: 42px;
	height: 42px;
	color: rgba(0, 0, 0, 0.04);
	flex-shrink: 0;
	margin-left: 12px;
	margin-top: -6px;
}

/* Desktop hover/focus lift — only on true pointer devices */
@media (hover: hover) and (pointer: fine) {

	.pfmx-rc-card:hover,
	.pfmx-rc-card:focus-within {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 30px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
		border-color: var(--pfmx-rc-card-border-hover, #c8bfb0);
		transform: translateY(calc(var(--pfmx-rc-card-lift, 6) * -1px)) scale(1.005) rotateX(0.5deg);
		transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
			border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
			transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.pfmx-rc-card:hover .pfmx-rc-prod__arrow,
	.pfmx-rc-card:focus-within .pfmx-rc-prod__arrow {
		transform: translateX(4px);
		transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
}

@media (prefers-reduced-motion: reduce) {

	.pfmx-rc-card,
	.pfmx-rc-card:hover,
	.pfmx-rc-card:focus-within {
		transform: none !important;
		transition: none !important;
	}
}

/* ──────────────────────────────────────────────────────────── */
/* 9. Review Card — content elements                            */
/* ──────────────────────────────────────────────────────────── */

/* Reset theme blockquote decorations scoped to our widget only */
.pfmx-rc-text {
	/* Neutralise common theme blockquote overrides */
	background: transparent !important;
	border: none !important;
	border-left: none !important;
	border-right: none !important;
	padding: 0 !important;
	margin: 0 0 var(--pfmx-rc-text-space, 24px) 0 !important;
	quotes: none;
	color: var(--pfmx-rc-text-color, #3d3731);
	font-size: clamp(1.05rem, 2vw, 1.15rem);
	line-height: 1.6;
	font-style: normal;
	flex-grow: 1;
	position: relative;
	/* In case the theme uses ::before/::after on blockquote for quote marks */
}

.pfmx-rc-text::before,
.pfmx-rc-text::after {
	content: none !important;
}

.pfmx-rc-meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
}

.pfmx-rc-reviewer {
	display: block;
	color: var(--pfmx-rc-reviewer-color, #111827);
	font-weight: 700;
	font-style: normal;
	font-size: 0.9em;
	letter-spacing: 0.01em;
	margin-bottom: var(--pfmx-rc-reviewer-space, 0);
}

/* Product chip */
.pfmx-rc-prod {
	display: inline-flex;
	align-items: center;
	gap: var(--pfmx-rc-prod-gap, 10px);
	text-decoration: none;
	background: var(--pfmx-rc-prod-bg, rgba(255, 255, 255, 0.7));
	border: 1px solid var(--pfmx-rc-prod-border, #e2ddd8);
	border-radius: var(--pfmx-rc-prod-radius, 8px);
	padding: 6px 10px 6px 6px;
	margin-bottom: var(--pfmx-rc-prod-space, 0);
	transition: background-color 0.2s ease, border-color 0.2s ease;
	max-width: 100%;
}

.pfmx-rc-prod:hover,
.pfmx-rc-prod:focus-visible {
	text-decoration: none;
	background: var(--pfmx-rc-prod-bg-hover, rgba(255, 255, 255, 0.95));
	border-color: var(--pfmx-rc-card-border-hover, #c8bfb0);
}

.pfmx-rc-prod:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pfmx-rc-prod__img img {
	width: var(--pfmx-rc-prod-img-size, 40px);
	height: var(--pfmx-rc-prod-img-size, 40px);
	object-fit: cover;
	border-radius: var(--pfmx-rc-prod-img-radius, 6px);
	display: block;
	flex-shrink: 0;
}

.pfmx-rc-prod__name {
	color: var(--pfmx-rc-prod-color, #4b5563);
	font-size: 0.8em;
	font-weight: 600;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: color 0.2s ease;
}

.pfmx-rc-prod:hover .pfmx-rc-prod__name,
.pfmx-rc-prod:focus-visible .pfmx-rc-prod__name {
	color: var(--pfmx-rc-prod-hover, #111827);
}

.pfmx-rc-prod__arrow {
	width: 16px;
	height: 16px;
	color: currentColor;
	opacity: 0.5;
	flex-shrink: 0;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease;
}

.pfmx-rc-prod:hover .pfmx-rc-prod__arrow,
.pfmx-rc-prod:focus-visible .pfmx-rc-prod__arrow {
	opacity: 1;
}

@media (max-width: 767px) {
	.pfmx-reviews-carousel {
		--pfmx-rc-card-radius-default: 20px;
		--pfmx-rc-card-pad-default: 24px 20px;
		--pfmx-rc-card-blur-default: 10px;
	}

	.pfmx-rc-controls button {
		min-width: 44px;
		min-height: 44px;
	}
}

/* Rating row */
.pfmx-rc-rating {
	gap: 3px;
}

/* ──────────────────────────────────────────────────────────── */
/* 10. Editor notice                                            */
/* ──────────────────────────────────────────────────────────── */
.pfmx-edg-editor-notice {
	padding: 16px;
	background: #fff8eb;
	border-left: 4px solid #f59e0b;
	color: #374151;
	font-family: sans-serif;
	font-size: 14px;
}