/**
 * FlexMart Shop Experience — Front-end styles.
 *
 * Same class names the card markup has always used (see
 * includes/functions-card.php and, for AJAX-filtered results,
 * FlexMart Smart Filters' FSF_Card_Renderer) — this file is a visual
 * redesign, not a structural one, so both rendering paths stay
 * identical automatically.
 */

:root{
	--fmshop-primary:#0F172A;
	--fmshop-accent:#2563EB;
	--fmshop-accent-dark:#1D4ED8;
	--fmshop-bg-light:#F8FAFC;
	--fmshop-text:#111827;
	--fmshop-text-secondary:#6B7280;
	--fmshop-border:#E5E7EB;
	--fmshop-stock-in:#16A34A;
	--fmshop-stock-order:#D97706;
	--fmshop-stock-out:#DC2626;
	--fmshop-radius-card:18px;
	--fmshop-radius-pill:999px;
	--fmshop-shadow-sm:0 1px 3px rgba(15,23,42,0.07);
	--fmshop-shadow-md:0 14px 28px rgba(15,23,42,0.14);
	--fmshop-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* -----------------------------------------------------------------------
   Page header — Shop/Category/Tag title + description
   ----------------------------------------------------------------------- */
.woocommerce-products-header{ font-family:var(--fmshop-font); margin:8px 0 18px; }
.woocommerce-products-header__title.page-title{
	font-size:clamp(1.5rem,4vw,2rem);
	font-weight:800;
	color:var(--fmshop-primary);
	letter-spacing:-0.01em;
	margin:0 0 8px;
}
.woocommerce-products-header .term-description,
.term-description{
	color:var(--fmshop-text-secondary);
	font-size:0.95rem;
	max-width:70ch;
	margin:0 0 4px;
}

/* =========================================================================
   CATEGORY CHIP ROW — Trending / Best Sellers / New Arrivals / Best Deals
   ========================================================================= */
.fmshop-chips{
	margin:0 0 6px;
}

.fmshop-chips__track{
	display:flex;
	gap:14px;
	overflow-x:auto;
	scroll-snap-type:x proximity;
	-webkit-overflow-scrolling:touch;
	padding:4px 4px 6px;
	scrollbar-width:none;
}

.fmshop-chips__track::-webkit-scrollbar{ display:none; }

.fmshop-chip{
	flex:0 0 auto;
	scroll-snap-align:start;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	width:76px;
	text-decoration:none !important;
	box-shadow:none !important;
}

.fmshop-chip__thumb{
	width:64px;
	height:64px;
	border-radius:18px;
	overflow:hidden;
	background:var(--fmshop-bg-light);
	border:1px solid var(--fmshop-border);
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:var(--fmshop-shadow-sm);
	transition:transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s ease, border-color 0.22s ease;
}

.fmshop-chip:active .fmshop-chip__thumb{ transform:scale(0.94); }

@media (hover:hover) and (pointer:fine){
	.fmshop-chip:hover .fmshop-chip__thumb{
		transform:translateY(-3px);
		box-shadow:var(--fmshop-shadow-md);
		border-color:rgba(37,99,235,0.3);
	}
}

.fmshop-chip__img{
	width:100% !important;
	height:100% !important;
	object-fit:contain !important;
	padding:8px;
	box-sizing:border-box;
	display:block;
	margin:0 !important;
}

.fmshop-chip__label{
	font-family:var(--fmshop-font);
	font-size:0.72rem;
	font-weight:600;
	color:var(--fmshop-text);
	text-align:center;
	line-height:1.25;
}

/* Selected chip — set by chips.js to reflect the currently-active sort. */
.fmshop-chip.is-active .fmshop-chip__thumb{
	border-color:var(--fmshop-accent);
	box-shadow:0 0 0 2px rgba(37,99,235,0.18), var(--fmshop-shadow-sm);
}
.fmshop-chip.is-active .fmshop-chip__label{
	color:var(--fmshop-accent);
	font-weight:700;
}

/* Safety net: collapse any top margin/padding on whatever the Smart
   Filters plugin (or the theme) renders immediately after this chip
   row, so the product grid sits close behind it regardless of what
   that markup's own default spacing happens to be. Targets class
   names only — doesn't modify or depend on that plugin's files. */
.fmshop-chips + .fsf-layout,
.fmshop-chips ~ .fsf-layout{
	margin-top:0 !important;
}
.fmshop-chips + .fsf-layout .fsf-main > *:first-child,
ul.products{
	margin-top:0 !important;
}

/* =========================================================================
   PRODUCT GRID — classic ul.products / li.product markup
   ========================================================================= */
ul.products{
	display:grid !important;
	grid-template-columns:repeat(2, 1fr) !important;
	gap:14px 12px !important;
	margin:0 0 32px !important;
	padding:0 !important;
	list-style:none !important;
	align-items:stretch !important;
}
ul.products::before, ul.products::after{ content:none !important; }
@media (min-width:640px){ ul.products{ grid-template-columns:repeat(3, 1fr) !important; gap:18px !important; } }
@media (min-width:900px){ ul.products{ grid-template-columns:repeat(4, 1fr) !important; gap:22px !important; } }
@media (min-width:1280px){ ul.products{ grid-template-columns:repeat(5, 1fr) !important; gap:24px !important; } }

/* <li> is just a plain grid cell; .fmshop-card is the visible card —
   CSS Grid's own stretch behaviour (align-items:stretch above) gives
   every card in a row equal height automatically, and .fmshop-cta's
   margin-top:auto (below) pushes Add to Cart to the bottom of that
   stretched space regardless of title length. */
ul.products li.product{
	width:auto !important;
	float:none !important;
	margin:0 !important;
	padding:0 !important;
	list-style:none !important;
}
ul.products li.product::before,
ul.products li.product::after{ content:none !important; }

.fmshop-card{
	display:flex;
	flex-direction:column;
	height:100%;
	background:#fff;
	border:1px solid var(--fmshop-border);
	border-radius:var(--fmshop-radius-card);
	overflow:hidden;
	box-shadow:var(--fmshop-shadow-sm);
	font-family:var(--fmshop-font);
	transition:transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.fmshop-card:hover{
	transform:translateY(-4px);
	box-shadow:var(--fmshop-shadow-md);
	border-color:rgba(37,99,235,0.22);
}
.fmshop-card-link{
	display:block;
	text-decoration:none !important;
	color:inherit;
	box-shadow:none !important;
}

/* -----------------------------------------------------------------------
   Image — fixed square container, contain-fit so nothing ever stretches
   or crops; the light background fills any letterboxed space cleanly.
   position:relative is kept (and deliberately not overridden anywhere
   else) since it's the anchor other FlexMart plugins — e.g. Wishlist's
   heart-icon injection into the card's top-right corner — position
   themselves against.
   ----------------------------------------------------------------------- */
.fmshop-media{
	position:relative;
	aspect-ratio:1 / 1;
	overflow:hidden;
	background:var(--fmshop-bg-light);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:14px;
	box-sizing:border-box;
}
.fmshop-img{
	width:100% !important;
	height:100% !important;
	max-width:100%;
	max-height:100%;
	object-fit:contain !important;
	display:block;
	margin:0 !important;
	transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
@media (hover:hover) and (pointer:fine){
	.fmshop-card:hover .fmshop-img{ transform:scale(1.05); }
}

/* Sale / New badges over the image */
.fmshop-badges{
	position:absolute;
	top:10px;
	left:10px;
	right:10px;
	z-index:2;
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	pointer-events:none;
}
.fmshop-badge{
	display:inline-flex;
	align-items:center;
	font-size:0.7rem;
	font-weight:700;
	letter-spacing:0.02em;
	padding:4px 9px;
	border-radius:var(--fmshop-radius-pill);
	line-height:1;
	box-shadow:var(--fmshop-shadow-sm);
	color:#fff;
}
.fmshop-badge-sale{ background:linear-gradient(135deg,#EF4444,#DC2626); }
.fmshop-badge-new{ background:linear-gradient(135deg,var(--fmshop-primary),#1E293B); margin-left:auto; }
/* Safety net: if any leftover default WooCommerce/theme sale ribbon
   still slips through outside our own badge system, hide it — this
   guarantees a product never shows two sale badges at once. */
.products li.product .onsale:not(.fmshop-badge-sale){ display:none !important; }

/* -----------------------------------------------------------------------
   Card body — tightened spacing throughout, since the stock line below
   no longer needs room for a pill/border/dot.
   ----------------------------------------------------------------------- */
.fmshop-body{ display:flex; flex-direction:column; padding:12px 12px 10px; }

.fmshop-title{
	font-size:0.9rem;
	font-weight:600;
	color:var(--fmshop-text);
	margin:0 0 6px;
	line-height:1.32;
	min-height:calc(1.32em * 2);
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	/* min-height reserves exactly 2 lines of space always, so price/
	   stock start at the same vertical position on every card regardless
	   of whether this title is one line or two. */
}

.fmshop-rating{ margin:0 0 6px; line-height:1; }
.fmshop-rating .star-rating{ font-size:0.82rem; }

.fmshop-price{
	margin:0 0 4px;
	font-family:var(--fmshop-font);
	display:flex;
	align-items:baseline;
	flex-wrap:wrap;
	gap:6px;
	font-size:1.1rem;
	font-weight:800;
}
/* Universal-selector safety net, applied two ways: directly on
   .fmshop-price/its children (this site's markup has no enclosing
   .price wrapper) and on .fmshop-price .price as a fallback for setups
   that do include one — the accent color can't silently miss either way. */
.fmshop-price,
.fmshop-price *,
.fmshop-price .price,
.fmshop-price .price *{
	font-family:var(--fmshop-font) !important;
	color:var(--fmshop-accent) !important;
}
.fmshop-price .price{
	display:flex;
	align-items:baseline;
	flex-wrap:wrap;
	gap:6px;
	font-size:1.1rem;
	font-weight:800;
}
.fmshop-price ins,
.fmshop-price ins *{
	text-decoration:none !important;
	font-weight:800 !important;
	color:var(--fmshop-accent) !important;
}
.fmshop-price ins{ font-size:1em; order:1; }
/* Old price: these rules come AFTER the general/ins rules above and
   have higher specificity (an extra type selector), so they correctly
   win and override everything back to grey for anything inside <del>. */
.fmshop-price del,
.fmshop-price del *{
	font-weight:400 !important;
	color:var(--fmshop-text-secondary) !important;
	text-decoration:line-through !important;
	opacity:0.85;
}
.fmshop-price del{ font-size:0.72em; order:2; }
.fmshop-price .price del,
.fmshop-price .price del *{
	color:var(--fmshop-text-secondary) !important;
	font-weight:400 !important;
	text-decoration:line-through !important;
}
.fmshop-price .woocommerce-Price-currencySymbol{ font-size:0.85em; font-weight:700; }
.fmshop-price .screen-reader-text{
	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;
}

/* -----------------------------------------------------------------------
   Stock status — plain coloured text only. No circle, no pill, no
   border, no background. The emoji dot from the markup is hidden here
   rather than removed from the PHP, so FSF_Card_Renderer's AJAX markup
   (which includes the same dot span) picks up the identical look with
   no change needed on that side.
   ----------------------------------------------------------------------- */
.fmshop-stock-badge{
	display:inline-flex;
	align-items:center;
	align-self:flex-start;
	font-size:0.72rem;
	font-weight:600;
	margin:0 0 8px;
	padding:0;
	border:none;
	background:none;
	border-radius:0;
}
.fmshop-stock-badge span[aria-hidden]{ display:none; }
.fmshop-stock-in{ color:var(--fmshop-stock-in) !important; background:none !important; border:none !important; }
.fmshop-stock-order{ color:var(--fmshop-stock-order) !important; background:none !important; border:none !important; }
.fmshop-stock-out{ color:var(--fmshop-stock-out) !important; background:none !important; border:none !important; }

/* -----------------------------------------------------------------------
   Add to Cart
   ----------------------------------------------------------------------- */
.fmshop-cta{
	margin-top:auto;
	padding:0 12px 14px;
	display:flex;
	justify-content:center;
}
.fmshop-cta .fmshop-add-to-cart{
	display:block;
	width:88%;
	margin:0 auto;
	text-align:center;
	font-family:var(--fmshop-font);
	font-size:0.85rem;
	font-weight:700;
	color:#fff !important;
	background:linear-gradient(135deg,var(--fmshop-accent),var(--fmshop-accent-dark));
	border:none;
	border-radius:var(--fmshop-radius-pill);
	padding:10px 18px;
	cursor:pointer;
	box-shadow:0 8px 18px rgba(37,99,235,0.28);
	transition:transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s ease, opacity 0.22s ease;
}
.fmshop-cta .fmshop-add-to-cart:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(37,99,235,0.36); }
.fmshop-cta .fmshop-add-to-cart:active{ transform:translateY(0) scale(0.98); }
.fmshop-cta .fmshop-add-to-cart.loading{ opacity:0.75; }

/* "View cart" link — WooCommerce shows this automatically next to the
   button after a successful add. Kadence renders it with its own
   button-like styling (including an arrow icon), which clashes with
   the clean single-button design — hidden entirely per the original
   snippet's own decision, along with any pseudo-element arrow Kadence's
   own link/button styles might be injecting onto it or the Add to Cart
   button itself. */
.fmshop-cta .added_to_cart,
.fmshop-cta a.added_to_cart,
.fmshop-cta a.added_to_cart.wc-forward{
	display:none !important;
}
.fmshop-cta .fmshop-add-to-cart::after,
.fmshop-cta .fmshop-add-to-cart::before,
.fmshop-cta .added_to_cart::after,
.fmshop-cta .added_to_cart::before{
	content:none !important;
	display:none !important;
}
.fmshop-cta .fmshop-add-to-cart svg,
.fmshop-cta .fmshop-add-to-cart img,
.fmshop-cta .fmshop-add-to-cart i,
.fmshop-cta .fmshop-add-to-cart .icon,
.fmshop-cta .fmshop-add-to-cart [class*="icon"]{
	display:none !important;
}
.fmshop-cta .fmshop-add-to-cart{
	white-space:nowrap;
}

li.product.outofstock .fmshop-add-to-cart{ background:var(--fmshop-text-secondary); box-shadow:none; }

/* Force the button visible regardless of any theme-level "reveal on
   hover" pattern (common in WooCommerce card themes, including
   Kadence) — those patterns key off specific wrapper markup that this
   custom card structure may not match, which can leave the button
   permanently invisible rather than actually revealing on hover.
   Covers more than just opacity (clicking still worked while nothing
   showed, pointing to clipping/sizing/color rather than opacity:0), and
   uses the repeated-class specificity trick so this reliably outranks a
   competing theme rule even if that rule also uses !important. */
.fmshop-cta.fmshop-cta,
.fmshop-cta.fmshop-cta .fmshop-add-to-cart.fmshop-add-to-cart{
	opacity:1 !important;
	visibility:visible !important;
	pointer-events:auto !important;
	overflow:visible !important;
	clip:auto !important;
	clip-path:none !important;
	position:relative !important;
	left:auto !important;
	right:auto !important;
	text-indent:0 !important;
}
.fmshop-cta.fmshop-cta .fmshop-add-to-cart.fmshop-add-to-cart{
	display:block !important;
	height:auto !important;
	max-height:none !important;
	min-height:0 !important;
	width:88% !important;
	color:#fff !important;
	background:linear-gradient(135deg,var(--fmshop-accent),var(--fmshop-accent-dark)) !important;
}

/* =========================================================================
   NATIVE WOOCOMMERCE BLOCKS SUPPORT
   Everything above targets the classic ul.products/li.product markup.
   This site's Shop page (per the original snippet's own debug notes)
   can instead render via the native WooCommerce Product Collection
   block, which uses completely different, WooCommerce-Blocks-owned
   class names — so it gets its own matching set of rules.
   ========================================================================= */
.wp-block-woocommerce-product-collection{ margin:0 0 32px; }

.wc-block-product-template{
	display:grid !important;
	grid-template-columns:repeat(2, 1fr) !important;
	gap:14px 12px !important;
	list-style:none !important;
	padding:0 !important;
	margin:0 !important;
	align-items:stretch !important;
}
@media (min-width:640px){ .wc-block-product-template{ grid-template-columns:repeat(3, 1fr) !important; gap:18px !important; } }
@media (min-width:900px){ .wc-block-product-template{ grid-template-columns:repeat(4, 1fr) !important; gap:22px !important; } }
@media (min-width:1280px){ .wc-block-product-template{ grid-template-columns:repeat(5, 1fr) !important; gap:24px !important; } }

.wc-block-product-template > li{
	display:flex !important;
	flex-direction:column;
	height:100%;
	background:#fff;
	border:1px solid var(--fmshop-border);
	border-radius:var(--fmshop-radius-card);
	overflow:hidden;
	box-shadow:var(--fmshop-shadow-sm);
	font-family:var(--fmshop-font);
	padding:0 !important;
	margin:0 !important;
	list-style:none !important;
	transition:transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.wc-block-product-template > li:hover{
	transform:translateY(-4px);
	box-shadow:var(--fmshop-shadow-md);
	border-color:rgba(37,99,235,0.22);
}
.wc-block-product-template > li::before,
.wc-block-product-template > li::after{ content:none !important; }
.wc-block-product-template > li > a{ text-decoration:none !important; box-shadow:none !important; }

/* Image — fixed square, contain-fit, matching the classic path above. */
.wp-block-woocommerce-product-image{
	margin:0 !important;
	aspect-ratio:1 / 1;
	overflow:hidden;
	background:var(--fmshop-bg-light);
	display:flex !important;
	align-items:center;
	justify-content:center;
	padding:14px;
	box-sizing:border-box;
}
.wp-block-woocommerce-product-image img{
	width:100% !important;
	height:100% !important;
	max-width:100% !important;
	max-height:100% !important;
	object-fit:contain !important;
	display:block !important;
	margin:0 !important;
	transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
@media (hover:hover) and (pointer:fine){
	.wc-block-product-template > li:hover .wp-block-woocommerce-product-image img{ transform:scale(1.05); }
}

.wc-block-components-product-sale-badge{
	display:inline-flex !important;
	align-items:center;
	font-size:0.7rem !important;
	font-weight:700 !important;
	letter-spacing:0.02em;
	padding:4px 9px !important;
	margin:10px 12px 0 !important;
	border-radius:var(--fmshop-radius-pill) !important;
	line-height:1;
	background:linear-gradient(135deg,#EF4444,#DC2626) !important;
	color:#fff !important;
	border:none !important;
}

/* Native Stock Indicator block — same "plain text only" treatment as
   the classic .fmshop-stock-badge above. */
.wc-block-components-product-stock-indicator{
	display:inline-flex !important;
	align-items:center;
	font-size:0.72rem !important;
	font-weight:600 !important;
	padding:0 !important;
	margin:0 12px 6px !important;
	border-radius:0 !important;
	background:none !important;
	border:none !important;
	color:var(--fmshop-stock-in) !important;
}
.wc-block-components-product-stock-indicator.wc-block-components-product-stock-indicator--out-of-stock{
	background:none !important;
	color:var(--fmshop-stock-out) !important;
	border:none !important;
}
.wc-block-components-product-stock-indicator.wc-block-components-product-stock-indicator--available-on-backorder{
	background:none !important;
	color:var(--fmshop-stock-order) !important;
	border:none !important;
}

.wp-block-post-title{
	font-size:0.9rem !important;
	font-weight:600 !important;
	color:var(--fmshop-text) !important;
	margin:12px 12px 5px !important;
	line-height:1.32 !important;
	min-height:calc(1.32em * 2);
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	text-align:left !important;
}
.wp-block-post-title a{ color:inherit !important; text-decoration:none !important; }

.wp-block-woocommerce-product-price{ margin:0 12px 6px !important; text-align:left !important; }
.wp-block-woocommerce-product-price .price,
.wp-block-woocommerce-product-price .price *{
	color:var(--fmshop-accent) !important;
	font-family:var(--fmshop-font) !important;
}
.wp-block-woocommerce-product-price .price{
	font-size:1.1rem !important;
	font-weight:800 !important;
	display:flex !important;
	align-items:baseline;
	gap:6px;
	flex-wrap:wrap;
	justify-content:flex-start !important;
}
.wp-block-woocommerce-product-price .price ins,
.wp-block-woocommerce-product-price .price ins *{
	text-decoration:none !important;
	font-weight:800 !important;
	color:var(--fmshop-accent) !important;
}
.wp-block-woocommerce-product-price .price del,
.wp-block-woocommerce-product-price .price del *{
	font-weight:400 !important;
	color:var(--fmshop-text-secondary) !important;
	text-decoration:line-through !important;
	opacity:0.85;
	font-size:0.72em !important;
}

.wp-block-woocommerce-product-button{
	margin:auto 12px 14px !important;
	padding:0 !important;
}
.wp-block-woocommerce-product-button a{
	display:block !important;
	width:88% !important;
	margin:0 auto !important;
	text-align:center !important;
	font-family:var(--fmshop-font) !important;
	font-size:0.85rem !important;
	font-weight:700 !important;
	color:#fff !important;
	background:linear-gradient(135deg,var(--fmshop-accent),var(--fmshop-accent-dark)) !important;
	border:none !important;
	border-radius:var(--fmshop-radius-pill) !important;
	padding:10px 18px !important;
	box-shadow:0 8px 18px rgba(37,99,235,0.28) !important;
	transition:transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s ease !important;
}
.wp-block-woocommerce-product-button a:hover{
	transform:translateY(-2px);
	box-shadow:0 12px 24px rgba(37,99,235,0.36) !important;
}

@media (max-width:480px){
	.wc-block-product-template{ gap:10px !important; }
	.wp-block-post-title{ font-size:0.85rem !important; }
}

/* -----------------------------------------------------------------------
   Mobile fine-tuning (classic markup)
   ----------------------------------------------------------------------- */
@media (max-width:480px){
	ul.products{ gap:10px !important; }
	.fmshop-title{ font-size:0.85rem; }
	.fmshop-body{ padding:10px 10px 8px; }
	.fmshop-cta{ padding:0 10px 12px; }
	.fmshop-chips__track{ gap:12px; }
	.fmshop-chip{ width:70px; }
	.fmshop-chip__thumb{ width:58px; height:58px; border-radius:16px; }
}

@media (prefers-reduced-motion: reduce){
	.fmshop-card, .fmshop-img, .fmshop-chip__thumb, .wc-block-product-template > li, .wp-block-woocommerce-product-image img{
		transition:none !important;
	}
}