/**
 * Omniverce Core — Feature 7: Featured Stores (Figma design).
 *
 * Styles ONLY the [devsaffinity_vendor_stores] output rendered by
 * Omniverce Core (class prefixes `ocfs-`). Measurements are the exact
 * values Hassan read from the Figma frame (2026-10-28):
 *   card outer width 266px · border 1px solid #E5E7EB · padding 10px
 *   logo image 70 x 70 (Hassan, 2026-10-28; Figma frame said 80 x 80) · name Inter Tight 500 16px / line-height 100%
 *   Pro Seller badge 65 x 16 · Direct badge 32 x 16
 *   stars block 100 x 16 · rating value Inter Tight 500 13px / 100%
 * Layout flow (Hassan, 2026-10-28): always TWO rows, items run DOWN
 * a column before moving right (1,2 in column 1; 3,4 in column 2 …),
 * so the rows read 1 3 5 7 / 2 4 6 8 — the original carousel's flow,
 * with only the card itself restyled.
 */

.ocfs-wrap {
	position: relative;
	font-family: "Inter Tight", Inter, Arial, sans-serif;
}

.ocfs-track {
	display: grid;
	grid-template-rows: repeat(var(--ocfs-rows, 2), auto);
	grid-auto-flow: column;
	grid-auto-columns: 266px;
	gap: 16px;
}

/* ---- Card ------------------------------------------------------------ */

.ocfs-cell {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 266px;
	padding: 10px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	text-decoration: none;
	color: #111827;
	box-sizing: border-box;
}

.ocfs-cell:hover {
	border-color: #d1d5db;
	box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
	text-decoration: none;
}

.ocfs-cell.ocfs-hide {
	display: none;
}

.ocfs-logo {
	flex: 0 0 auto;
	width: 70px;
	height: 70px;
	border-radius: 12px;
	overflow: hidden;
	background: #f2f2f2;
}

.ocfs-logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ocfs-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ocfs-name {
	font-family: "Inter Tight", Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	color: #111827;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Badges ---------------------------------------------------------- */

.ocfs-badges {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	height: 16px;
}

/* Primary badge (verified label, e.g. "Pro Seller"): 65 x 16 overall. */
.ocfs-badge-pro {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	height: 16px;
	color: #1662c7;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.ocfs-verified {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* Direct wordmark badge: 32 x 16 overall. */
.ocfs-direct {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	height: 16px;
	line-height: 1;
}

.ocfs-direct-word {
	font-size: 11.5px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: -0.2px;
	color: #1662c7;
	line-height: 1;
}

.ocfs-direct-swoosh {
	display: block;
	width: 100%;
	height: 4px;
	margin-top: 0;
}

.ocfs-chip {
	display: inline-block;
	padding: 2px 8px;
	background: #f2f2f2;
	color: #374151;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	border-radius: 8px;
	white-space: nowrap;
}

/* "N+" pill + hover bubble listing the remaining badges. */
.ocfs-more {
	position: relative;
	display: inline-flex;
}

.ocfs-more-pill {
	display: inline-block;
	padding: 2px 8px;
	background: #f0f0f0;
	color: #3f3f46;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
	border-radius: 8px;
	cursor: default;
}

.ocfs-bubble {
	position: absolute;
	bottom: calc(100% + 9px);
	right: -8px;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 14px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	box-shadow: 0 10px 26px rgba(16, 24, 40, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(3px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	pointer-events: none;
}

.ocfs-bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 22px;
	width: 10px;
	height: 10px;
	margin-top: -6px;
	background: #fff;
	border-right: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
	transform: rotate(45deg);
}

.ocfs-more:hover .ocfs-bubble,
.ocfs-more:focus-within .ocfs-bubble {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* ---- Rating ---------------------------------------------------------- */

.ocfs-rating {
	display: flex;
	align-items: center;
	margin-top: 6px;
	height: 16px;
}

/* Stars block: exactly 100 x 16 (flex spreads the 5 glyphs evenly). */
.ocfs-stars {
	position: relative;
	width: 100px;
	height: 16px;
	flex: 0 0 auto;
	font-size: 15px;
	line-height: 16px;
	color: #dcdcdc;
	font-family: Arial, Helvetica, sans-serif;
}

.ocfs-stars::before {
	content: "\2605\2605\2605\2605\2605";
	display: flex;
	justify-content: space-between;
	width: 100px;
}

.ocfs-stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 16px;
	overflow: hidden;
	color: #9aa0a6;
}

.ocfs-stars-fill::before {
	content: "\2605\2605\2605\2605\2605";
	display: flex;
	justify-content: space-between;
	width: 100px;
}

.ocfs-rating-value {
	margin-left: 8px;
	font-family: "Inter Tight", Inter, Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: #6b7280;
}

/* ---- Paging arrows ---------------------------------------------------- */

.ocfs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 58px;
	padding: 0;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	color: #111827;
	cursor: pointer;
}

.ocfs-arrow svg {
	width: 20px;
	height: 20px;
}

.ocfs-arrow:hover {
	background: #fafafa;
}

.ocfs-arrow:disabled {
	opacity: 0.45;
	cursor: default;
}

.ocfs-arrow-prev {
	left: -16px;
}

.ocfs-arrow-next {
	right: -16px;
}

/* ---- "View all" heading link (inserted by featured-stores.js) -------- */

.ocfs-viewall {
	position: absolute;
	right: 0;
	top: 4px;
	font-size: 15px;
	font-weight: 400;
	color: #111827;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ocfs-viewall:hover {
	color: #1662c7;
}

/* ---- Responsive: fewer 266px columns as the container narrows -------- */

@media (max-width: 1439px) {
	.ocfs-wrap {
		--ocfs-cols: 4 !important;
	}
}

@media (max-width: 1150px) {
	.ocfs-wrap {
		--ocfs-cols: 3 !important;
	}
}

@media (max-width: 880px) {
	.ocfs-wrap {
		--ocfs-cols: 2 !important;
	}
}

@media (max-width: 560px) {
	.ocfs-wrap {
		--ocfs-cols: 1 !important;
		margin-inline: auto;
	}

	.ocfs-arrow {
		width: 32px;
		height: 52px;
	}

	.ocfs-arrow-prev {
		left: -10px;
	}

	.ocfs-arrow-next {
		right: -10px;
	}
}