/* FlexMart Smart Homepage — frontend styles
 * Styles for the four sections this plugin still owns — Recently
 * Viewed, Trending Now, Recommended For You, Sponsored Products —
 * rendered by FlexMart Homepage as part of its own homepage layout
 * (see class-flexmart-smarthome-fmh-bridge.php). Compact rounded-square
 * chips and marketplace product cards, inspired by (not cloned from)
 * Jumia/Alibaba/Amazon mobile. Native CSS entrance animations only, no
 * libraries. Chip size / shadow / animation speed are admin-configurable
 * (Appearance panel); layout width and section spacing come from
 * FlexMart Homepage's own container. */

:root {
	--fsh-bg: #F8FAFC;
	--fsh-radius: 14px;
	--fsh-chip: 72px;
	--fsh-gap: 16px;
	--fsh-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
	--fsh-speed: 0.45s;
	--fsh-accent: #2563EB;
	--fsh-primary: #0F172A;
	--fsh-text-secondary: #6B7280;
	--fsh-border: #E5E7EB;
	--fsh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* No outer wrapper needed any more — each section (Recently Viewed,
 * Trending, Recommended, Sponsored) renders individually, called
 * directly by FlexMart Homepage as one of its own homepage sections
 * (see class-flexmart-smarthome-fmh-bridge.php). FlexMart Homepage's
 * own .fmh-container / .fmh-section provide the shared max-width and
 * vertical spacing now — this stylesheet only styles what's INSIDE
 * each section. */
.fsh-section,
.fsh-shelf {
	font-family: var(--fsh-font);
}

/* ================================================================
   SHELF HEADER — "Title … See All ›", shared by Recommended For You
   and Sponsored Products (Recently Viewed / Trending use the lighter
   chip-only header below, no shelf card).
   ================================================================ */
.fsh-shelf { background: #fff; border: 1px solid var(--fsh-border); border-radius: var(--fsh-radius); padding: 12px 12px 8px; box-shadow: var(--fsh-shadow); }
.fsh-shelf__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 2px 8px;
}
.fsh-shelf__title {
	font-size: 0.98rem;
	font-weight: 800;
	color: var(--fsh-primary);
	letter-spacing: -0.01em;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fsh-shelf__viewall {
	flex-shrink: 0;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--fsh-accent);
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 2px;
}
.fsh-shelf__viewall:hover { text-decoration: underline !important; }
.fsh-shelf__scroll {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding: 2px 2px 4px;
}
.fsh-shelf__scroll::-webkit-scrollbar { display: none; }

/* Sections that used to have their own outer title/subtitle before the
 * redesign — kept for anything still using the plain (non-shelf)
 * wrapper (Recently Viewed / Trending use this lighter chrome, not the
 * card-shelf background, matching the POS-dashboard reference). */
.fsh-section__title {
	font-size: 0.98rem;
	font-weight: 800;
	color: var(--fsh-primary);
	letter-spacing: -0.01em;
	margin: 0 2px 8px;
}

/* ================================================================
   CHIPS — Recently Viewed / Trending Now. Rounded-square (not
   circular) per the redesign, same compact POS-dashboard proportions.
   ================================================================ */
.fsh-chips {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding: 2px 2px 4px;
}
.fsh-chips::-webkit-scrollbar { display: none; }
.fsh-chip {
	flex: 0 0 auto;
	width: calc(var(--fsh-chip) + 12px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-decoration: none !important;
	scroll-snap-align: start;
}
.fsh-chip__media {
	width: var(--fsh-chip);
	height: var(--fsh-chip);
	border-radius: 16px; /* rounded square, not circle */
	overflow: hidden;
	background: var(--fsh-bg);
	border: 1px solid var(--fsh-border);
	box-shadow: var(--fsh-shadow);
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}
.fsh-chip__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fsh-chip__name {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--fsh-primary);
	text-align: center;
	line-height: 1.25;
	max-width: calc(var(--fsh-chip) + 12px);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
	.fsh-chip:hover .fsh-chip__media { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18); border-color: color-mix(in srgb, var(--fsh-accent) 35%, var(--fsh-border)); }
}

/* ================================================================
   MARKETPLACE PRODUCT CARD — image, discount badge, name, price,
   optional old price. Nothing more — no stock label, no Add to Cart;
   the whole card is a link to the product page. No card/border/shadow
   of its own — the shelf around it (.fsh-shelf) IS the card; this is
   just an image + text block that flows naturally inside it.
   ================================================================ */
.fsh-card {
	flex: 0 0 auto;
	width: 128px;
	display: flex;
	flex-direction: column;
	text-decoration: none !important;
	scroll-snap-align: start;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
	.fsh-card:hover { opacity: 0.88; }
}
.fsh-card:active { transform: scale(0.97); } /* touch feedback */
.fsh-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--fsh-bg, #F8FAFC); border-radius: 10px; overflow: hidden; }
.fsh-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fsh-card__badge {
	position: absolute;
	top: 6px;
	left: 6px;
	background: linear-gradient(135deg, #EF4444, #DC2626);
	color: #fff;
	font-size: 0.64rem;
	font-weight: 800;
	padding: 2px 6px;
	border-radius: 6px;
	line-height: 1.4;
	box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}
.fsh-card__body { display: flex; flex-direction: column; gap: 3px; padding: 8px 2px 0; }
.fsh-card__name {
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--fsh-primary);
	line-height: 1.3;
	min-height: calc(1.3em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fsh-card__price {
	display: flex;
	align-items: baseline;
	gap: 5px;
	flex-wrap: wrap;
	font-size: 0.86rem;
	font-weight: 800;
}
/* Current price: always the accent colour. Old price: always grey,
 * small, light, strikethrough — targeted explicitly (including
 * WooCommerce's nested .woocommerce-Price-amount span) with
 * !important, since a blanket ".fsh-card__price *" rule here
 * previously let the accent colour bleed into <del> too. Hidden
 * entirely (not just visually) when a product has no discount, so it
 * never reserves empty space. */
.fsh-card__price ins,
.fsh-card__price ins .woocommerce-Price-amount {
	color: var(--fsh-accent) !important;
	text-decoration: none !important;
	font-weight: 800 !important;
	order: 1;
}
.fsh-card__price del,
.fsh-card__price del * {
	color: var(--fsh-text-secondary) !important;
	font-weight: 400 !important;
	font-size: 0.68rem !important;
	text-decoration: line-through !important;
	order: 2;
}
.fsh-card__price:not(:has(del)) .woocommerce-Price-amount {
	color: var(--fsh-accent) !important;
	font-weight: 800 !important;
}

/* Sponsored shelf: small corner label identifying paid placement. */
.fsh-sponsored-wrap { position: relative; }
.fsh-sponsored-wrap::before {
	content: attr(data-fsh-label);
	position: absolute;
	top: -8px;
	left: 14px;
	background: var(--fsh-primary);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 6px;
	z-index: 1;
}

/* ================================================================
   TOP BRANDS — rounded brand cards, logo + name.
   ================================================================ */

/* ================================================================
   ENTRANCE ANIMATION — native CSS only, subtle fade + slide-up.
   ================================================================ */
.fsh-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--fsh-speed) ease, transform var(--fsh-speed) cubic-bezier(0.22, 1, 0.36, 1);
}
.fsh-reveal.fsh-reveal--in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.fsh-reveal { opacity: 1; transform: none; transition: none; }
}

/* ================================================================
   MOBILE — tight marketplace spacing throughout.
   ================================================================ */
@media (max-width: 480px) {
	.fsh-shelf { padding: 10px 10px 8px; }
	.fsh-card { width: 136px; }
}