import { styled } from '@mui/material/styles';
import IconButton from '@mui/material/IconButton';
import { bannerHoverEffectStyles } from '../bannerEffects';

export const CatalogLayout = styled('section')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: '280px minmax(0, 1fr)',
	gap: 20,
	marginTop: 22,
	alignItems: 'start',
	'&[data-no-sidebar="true"]': {
		gridTemplateColumns: '1fr'
	},
	[theme.breakpoints.down('lg')]: {
		gridTemplateColumns: '1fr'
	}
}));

export const SidePanel = styled('aside')(({ theme }) => ({
	position: 'sticky',
	top: 'calc(var(--header-height) + 16px)',
	display: 'grid',
	alignContent: 'start',
	gap: 18,
	padding: 18,
	background: 'var(--store-surface)',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	borderRadius: 16,
	boxShadow: '0 16px 38px rgba(15, 23, 42, 0.06)',
	'&[data-shop-by="true"]': {
		padding: 0,
		background: 'transparent',
		border: 0,
		borderRadius: 0,
		boxShadow: 'none'
	},
	[theme.breakpoints.down('lg')]: {
		position: 'static',
		// Cuando el sidebar se apila arriba de los productos, se puede colapsar
		// con el botón "Filtros" (FilterToggle) para no empujar el catálogo.
		'&[data-collapsed="true"] > :not(.filter-toggle)': {
			display: 'none'
		}
	}
}));

// Botón "Filtros" visible solo cuando el sidebar está apilado (móvil/tablet):
// abre y cierra el panel de filtros. En desktop no se muestra.
export const FilterToggle = styled('button')(({ theme }) => ({
	display: 'none',
	[theme.breakpoints.down('lg')]: {
		display: 'inline-flex',
		alignItems: 'center',
		justifyContent: 'center',
		gap: 8,
		width: '100%',
		padding: '11px 16px',
		fontSize: 14,
		fontWeight: 800,
		color: 'var(--store-primary)',
		background: 'var(--store-surface)',
		border: '1px solid color-mix(in srgb, var(--store-primary) 24%, rgba(20, 33, 31, 0.12))',
		borderRadius: 12,
		cursor: 'pointer',
		transition: 'background 150ms ease',
		'&:hover': {
			background: 'color-mix(in srgb, var(--store-primary) 8%, var(--store-surface))'
		}
	}
}));

export const FilterTitle = styled('div')({
	display: 'flex',
	alignItems: 'center',
	gap: 8,
	fontWeight: 900
});

export const SearchContext = styled('div')({
	padding: '10px 12px',
	borderRadius: 14,
	background: 'color-mix(in srgb, var(--store-primary) 8%, #ffffff)',
	color: 'var(--store-muted)',
	fontSize: 13,
	fontWeight: 800,
	'& strong': {
		color: 'var(--store-primary)'
	}
});

export const SearchFeedback = styled('div')({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'space-between',
	gap: 12,
	marginBottom: 14,
	padding: '12px 14px',
	border: '1px solid color-mix(in srgb, var(--store-primary) 16%, transparent)',
	borderRadius: 12,
	background: 'color-mix(in srgb, var(--store-primary) 6%, #ffffff)',
	color: 'var(--store-muted)',
	fontSize: 13,
	fontWeight: 750,
	'& strong': { color: 'var(--store-text)' },
	'& button': {
		padding: 0,
		border: 0,
		background: 'transparent',
		color: 'var(--store-primary)',
		font: 'inherit',
		fontWeight: 950,
		textDecoration: 'underline',
		cursor: 'pointer'
	}
});

export const SearchEmptyState = styled('div')({
	display: 'grid',
	placeItems: 'center',
	gap: 8,
	minHeight: 260,
	padding: 32,
	border: '1px dashed rgba(20, 33, 31, 0.18)',
	borderRadius: 16,
	background: 'rgba(255, 255, 255, 0.72)',
	color: 'var(--store-muted)',
	textAlign: 'center',
	'& svg': { fontSize: 36, color: 'var(--store-primary)' },
	'& strong': { color: 'var(--store-text)', fontSize: 16 }
});

export const FilterLabel = styled('div')({
	marginBottom: 10,
	color: 'var(--store-muted)',
	fontSize: 13,
	fontWeight: 800
});

export const CategoryList = styled('div')({
	display: 'flex',
	flexWrap: 'wrap',
	gap: 8,
	'& .MuiChip-root': {
		height: 34,
		borderColor: 'color-mix(in srgb, var(--store-primary) 22%, rgba(255, 255, 255, 0.7))',
		background: 'rgba(255, 255, 255, 0.76)'
	},
	'& .MuiChip-colorPrimary': {
		background:
			'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 72%, var(--store-secondary)))',
		color: '#fff',
		boxShadow: '0 12px 24px color-mix(in srgb, var(--store-primary) 22%, transparent)'
	}
});

export const FilterValue = styled('div')({
	fontWeight: 900,
	color: 'var(--store-primary)'
});

export const ShopByPanel = styled('div')({
	display: 'grid',
	alignContent: 'start',
	gap: 18,
	padding: 0,
	background: '#fff',
	border: '1px solid rgba(20, 33, 31, 0.1)',
	boxShadow: '0 10px 24px rgba(15, 23, 42, 0.04)'
});

export const ShopByHeader = styled('div')({
	position: 'relative',
	width: 'max-content',
	minWidth: 132,
	minHeight: 44,
	display: 'inline-flex',
	alignItems: 'center',
	padding: '0 20px',
	background:
		'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 78%, var(--store-accent)))',
	color: '#fff',
	fontSize: 16,
	fontWeight: 950,
	textTransform: 'uppercase',
	'&::after': {
		content: '""',
		position: 'absolute',
		top: 0,
		right: -22,
		width: 0,
		height: 0,
		borderTop: '44px solid var(--store-primary)',
		borderRight: '22px solid transparent'
	}
});

export const ShopByFilterGroup = styled('div')({
	display: 'grid',
	gap: 12,
	marginInline: 22,
	paddingBottom: 18,
	borderBottom: '1px dotted rgba(20, 33, 31, 0.18)',
	'&:last-of-type': {
		borderBottom: 0,
		paddingBottom: 0
	},
	'& > strong': {
		color: 'var(--store-text)',
		fontSize: 14,
		fontWeight: 950,
		textTransform: 'uppercase'
	},
	'& small': {
		marginRight: 8,
		color: 'var(--store-muted)',
		fontSize: 12,
		fontWeight: 850
	},
	'& > div:not(.MuiSlider-root)': {
		display: 'flex',
		alignItems: 'center',
		gap: 8,
		flexWrap: 'wrap'
	},
	'& > div span:not(:first-of-type)': {
		color: 'var(--store-muted)',
		fontSize: 12,
		fontWeight: 800
	},
	'& .MuiSlider-root': {
		color: 'var(--store-primary)',
		padding: '10px 0 0'
	}
});

export const ShopBySearch = styled('div')({
	display: 'grid !important',
	gridTemplateColumns: '1fr 42px',
	gap: 0,
	'& input': {
		minWidth: 0,
		height: 38,
		padding: '0 12px',
		border: '1px solid rgba(20, 33, 31, 0.16)',
		borderRight: 0,
		borderRadius: 0,
		background: '#fff',
		color: 'var(--store-text)',
		fontSize: 13,
		outline: 0
	},
	'& button': {
		width: 42,
		height: 38,
		display: 'grid',
		placeItems: 'center',
		border: '1px solid rgba(20, 33, 31, 0.16)',
		background: '#fff',
		color: 'var(--store-text)',
		cursor: 'pointer',
		transition: 'color 160ms ease, background 160ms ease',
		'&:hover': {
			background: 'var(--store-primary)',
			color: '#fff'
		}
	}
});

export const ShopBySubcategoryList = styled('div')({
	display: 'grid !important',
	gap: 9,
	'& label': {
		display: 'grid',
		gridTemplateColumns: '18px minmax(0, 1fr)',
		alignItems: 'center',
		gap: 10,
		color: 'var(--store-muted)',
		fontSize: 12,
		fontWeight: 850,
		lineHeight: 1.35
	},
	'& input': {
		accentColor: 'var(--store-primary)'
	},
	'& span': {
		overflow: 'hidden',
		textOverflow: 'ellipsis',
		whiteSpace: 'nowrap'
	}
});

export const ShopByColorGrid = styled('div')({
	display: 'grid !important',
	gridTemplateColumns: '1fr 1fr',
	gap: '8px 14px',
	'& label': {
		display: 'inline-flex',
		alignItems: 'center',
		gap: 8,
		color: 'var(--store-muted)',
		fontSize: 12,
		fontWeight: 850
	},
	'& span': {
		width: 16,
		height: 16,
		border: '1px solid rgba(20, 33, 31, 0.12)',
		boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.55)'
	}
});

export const ShopByResetButton = styled('button')({
	width: 'max-content',
	margin: '0 22px 22px',
	minHeight: 34,
	padding: '0 18px',
	border: 0,
	borderRadius: 3,
	background: 'rgba(20, 33, 31, 0.08)',
	color: 'var(--store-muted)',
	fontSize: 12,
	fontWeight: 950,
	textTransform: 'uppercase',
	cursor: 'pointer',
	transition: 'background 160ms ease, color 160ms ease',
	'&:hover': {
		background: 'var(--store-primary)',
		color: '#fff'
	}
});

export const Catalog = styled('section')({
	minWidth: 0
});

export const CatalogBreadcrumb = styled('nav')({
	display: 'flex',
	alignItems: 'center',
	gap: 7,
	margin: '0 0 18px',
	paddingBottom: 12,
	borderBottom: '1px solid rgba(20, 33, 31, 0.08)',
	color: 'var(--store-muted)',
	fontSize: 13,
	fontWeight: 850,
	'& button': {
		width: 26,
		height: 26,
		display: 'grid',
		placeItems: 'center',
		padding: 0,
		border: 0,
		borderRadius: 7,
		background: 'transparent',
		color: 'var(--store-muted)',
		cursor: 'pointer',
		transition: 'background 160ms ease, color 160ms ease, transform 160ms ease'
	},
	'& button:hover': {
		background: 'color-mix(in srgb, var(--store-primary) 10%, transparent)',
		color: 'var(--store-primary)',
		transform: 'translateY(-1px)'
	},
	'& button:focus-visible': {
		outline: '3px solid color-mix(in srgb, var(--store-accent) 34%, transparent)',
		outlineOffset: 2
	},
	'& span': {
		color: 'var(--store-primary)'
	},
	'& svg': {
		fontSize: 18
	}
});

export const CatalogHeader = styled('div')({
	display: 'flex',
	alignItems: 'center',
	gap: 10,
	marginBottom: 16,
	'& > strong': {
		fontSize: 12,
		fontWeight: 950,
		textTransform: 'uppercase',
		letterSpacing: 1.5,
		color: 'var(--store-muted)',
		whiteSpace: 'nowrap'
	},
	'& > span': {
		display: 'inline-flex',
		alignItems: 'center',
		height: 24,
		padding: '0 10px',
		borderRadius: 999,
		background: 'var(--store-primary)',
		color: '#fff',
		fontSize: 12,
		fontWeight: 950,
		flexShrink: 0
	},
	'& > div': {
		flex: 1,
		height: 1,
		background: 'rgba(20, 33, 31, 0.08)'
	}
});

export const InlinePromo = styled('div')({
	padding: '9px 12px',
	borderRadius: 999,
	background:
		'linear-gradient(135deg, var(--store-accent), color-mix(in srgb, var(--store-accent) 70%, var(--store-danger)))',
	color: '#fff',
	fontSize: 13,
	fontWeight: 900,
	boxShadow: '0 12px 26px color-mix(in srgb, var(--store-accent) 28%, transparent)'
});

export const CategoryCatalog = styled('div')({
	display: 'grid',
	gap: 34
});

export const CategoryProductSection = styled('section')({
	display: 'grid',
	gap: 0,
	minWidth: 0,
	transition: 'background var(--store-motion-base, 200ms) ease',
	'[data-section-background="alternating"] &:nth-of-type(even)': {
		marginInline: -16,
		padding: '16px 16px 20px',
		background: 'color-mix(in srgb, var(--store-secondary) 4%, var(--store-background))',
		borderTop: '1px solid color-mix(in srgb, var(--store-secondary) 10%, transparent)',
		borderBottom: '1px solid color-mix(in srgb, var(--store-secondary) 10%, transparent)'
	}
});

export const CategoryProductHeader = styled('div')(({ theme }) => ({
	display: 'flex',
	alignItems: 'center',
	gap: 0,
	minHeight: 46,
	[theme.breakpoints.down('sm')]: {
		alignItems: 'stretch',
		display: 'grid',
		gridTemplateColumns: '1fr auto',
		rowGap: 8
	}
}));

export const CategoryRibbon = styled('div')({
	position: 'relative',
	zIndex: 1,
	display: 'inline-flex',
	alignItems: 'center',
	gap: 8,
	minHeight: 36,
	padding: '0 16px',
	borderRadius: '0 10px 0 0',
	background:
		'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 72%, var(--store-secondary)))',
	color: '#fff',
	fontSize: 14,
	fontWeight: 950,
	textTransform: 'uppercase',
	boxShadow: '0 12px 26px color-mix(in srgb, var(--store-primary) 18%, transparent)',
	'&::before': {
		content: '""',
		position: 'absolute',
		left: 0,
		bottom: -10,
		width: 0,
		height: 0,
		borderTop: '10px solid color-mix(in srgb, var(--store-primary) 72%, #000000)',
		borderLeft: '10px solid transparent'
	},
	'& svg': {
		fontSize: 18
	}
});

export const CategoryHeaderLine = styled('div')({
	flex: 1,
	height: 2,
	background:
		'linear-gradient(90deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 24%, transparent))',
	boxShadow: '0 8px 16px color-mix(in srgb, var(--store-primary) 10%, transparent)',
	'@media (max-width: 640px)': {
		gridColumn: '1 / -1',
		order: 3
	}
});

export const CategoryHeaderActions = styled('div')({
	display: 'inline-flex',
	alignItems: 'center',
	gap: 7,
	paddingLeft: 10,
	background: 'var(--store-background)'
});

export const CategorySortLink = styled('button')({
	minHeight: 30,
	padding: '0 9px',
	border: 0,
	borderLeft: '1px solid rgba(20, 33, 31, 0.1)',
	background: 'transparent',
	color: 'var(--store-muted)',
	fontSize: 12,
	fontWeight: 850,
	cursor: 'pointer',
	transition: 'color 160ms ease',
	'&[data-active="true"], &:hover': {
		color: 'var(--store-primary)'
	},
	'@media (max-width: 760px)': {
		display: 'none'
	}
});

export const CategoryProductBody = styled('div')({
	minWidth: 0,
	padding: 0,
	background:
		'linear-gradient(135deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--store-background) 78%, #ffffff))',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	borderTop: 0,
	boxShadow: '0 14px 34px rgba(15, 23, 42, 0.04)',
	'@media (max-width: 640px)': {
		padding: 0
	}
});

export const CategoryShowcaseLayout = styled('div')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: '250px minmax(0, 1fr)',
	minHeight: 700,
	[theme.breakpoints.down('lg')]: {
		gridTemplateColumns: '1fr'
	}
}));

export const CategoryFeatureAside = styled('aside')(({ theme }) => ({
	display: 'grid',
	gridTemplateRows: '350px 1fr',
	borderRight: '1px solid rgba(20, 33, 31, 0.08)',
	background: '#fff',
	'& > img': {
		width: '100%',
		height: '100%',
		objectFit: 'cover',
		display: 'block'
	},
	[theme.breakpoints.down('lg')]: {
		display: 'none'
	}
}));

export const CategoryHotList = styled('div')({
	display: 'grid',
	alignContent: 'start',
	gap: 8,
	padding: 14,
	'& strong': {
		paddingBottom: 8,
		borderBottom: '1px solid rgba(20, 33, 31, 0.1)',
		color: 'var(--store-text)',
		fontSize: 13,
		fontWeight: 950,
		textTransform: 'uppercase'
	},
	'& button': {
		justifySelf: 'start',
		maxWidth: '100%',
		padding: 0,
		border: 0,
		background: 'transparent',
		color: 'var(--store-muted)',
		fontSize: 12,
		fontWeight: 800,
		textAlign: 'left',
		lineHeight: 1.35,
		cursor: 'pointer'
	},
	'& button::before': {
		content: '"›"',
		marginRight: 6,
		color: 'var(--store-primary)',
		fontWeight: 950
	},
	'& button:hover': {
		color: 'var(--store-primary)'
	}
});

export const CategoryShowcaseMain = styled('div')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
	gridAutoRows: '350px',
	minWidth: 0,
	alignItems: 'stretch',
	[theme.breakpoints.down('lg')]: {
		gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
		gridAutoRows: '350px'
	},
	[theme.breakpoints.down('sm')]: {
		gridTemplateColumns: '1fr',
		gridAutoRows: 'auto'
	}
}));

export const CategoryShowcaseBanner = styled('button')({
	position: 'relative',
	gridColumn: 'span 2',
	minHeight: '100%',
	border: 0,
	padding: 0,
	overflow: 'hidden',
	background: 'var(--store-text)',
	textAlign: 'left',
	cursor: 'pointer',
	...bannerHoverEffectStyles,
	'& img': {
		width: '100%',
		height: '100%',
		objectFit: 'cover',
		display: 'block',
		opacity: 0.82,
		transition: 'transform 240ms ease'
	},
	'& div': {
		position: 'absolute',
		right: 24,
		bottom: 22,
		zIndex: 3,
		display: 'grid',
		justifyItems: 'end',
		gap: 3,
		color: '#fff',
		textAlign: 'right'
	},
	'& span': {
		fontSize: 12,
		fontWeight: 950,
		textTransform: 'uppercase',
		color: 'var(--store-accent)'
	},
	'& strong': {
		fontSize: 30,
		fontWeight: 950,
		lineHeight: 1
	},
	'& small': {
		fontSize: 14,
		fontWeight: 800,
		color: 'rgba(255, 255, 255, 0.82)'
	},
	'&:hover img': {
		transform: 'scale(1.04)'
	},
	'@media (max-width: 760px)': {
		gridColumn: '1',
		minHeight: 210,
		'& div': {
			left: 18,
			right: 18,
			justifyItems: 'start',
			textAlign: 'left'
		}
	}
});

export const CategoryViewAll = styled('button')({
	minHeight: 30,
	display: 'inline-flex',
	alignItems: 'center',
	justifyContent: 'center',
	gap: 4,
	padding: '0 11px',
	border: '1px solid color-mix(in srgb, var(--store-primary) 18%, rgba(255, 255, 255, 0.78))',
	borderRadius: 8,
	background: 'rgba(255, 255, 255, 0.78)',
	color: 'var(--store-primary)',
	fontSize: 12,
	fontWeight: 950,
	cursor: 'pointer',
	boxShadow: '0 10px 22px rgba(15, 23, 42, 0.06)',
	transition: 'transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease',
	'&:hover': {
		transform: 'translateY(-2px)',
		background: 'var(--store-primary)',
		color: '#fff',
		boxShadow: '0 16px 30px color-mix(in srgb, var(--store-primary) 24%, transparent)'
	},
	'&:focus-visible': {
		outline: '3px solid color-mix(in srgb, var(--store-accent) 34%, transparent)',
		outlineOffset: 3
	}
});

export const ProductCarousel = styled('div')({
	display: 'grid',
	gridAutoFlow: 'column',
	gridAutoColumns: 'minmax(220px, 252px)',
	gap: 14,
	overflowX: 'auto',
	overscrollBehaviorX: 'contain',
	scrollSnapType: 'x mandatory',
	padding: '4px 2px 12px',
	scrollbarWidth: 'thin',
	'& > article': {
		scrollSnapAlign: 'start'
	},
	'&::-webkit-scrollbar': {
		height: 7
	},
	'&::-webkit-scrollbar-thumb': {
		background: 'color-mix(in srgb, var(--store-primary) 34%, transparent)',
		borderRadius: 999
	},
	'@media (max-width: 640px)': {
		gridAutoColumns: 'minmax(210px, 76vw)',
		gap: 10
	}
});

export const ProductGrid = styled('div')({
	display: 'grid',
	gridTemplateColumns: 'repeat(var(--catalog-columns-desktop), minmax(0, 1fr))',
	gap: 16,
	alignItems: 'stretch',
	'@media (max-width: 1100px)': {
		gridTemplateColumns: 'repeat(var(--catalog-columns-tablet), minmax(0, 1fr))'
	},
	'@media (max-width: 640px)': {
		gridTemplateColumns: 'repeat(var(--catalog-columns-mobile), minmax(0, 1fr))',
		gap: 10
	}
});

export const ShowcaseProductCard = styled('article')({
	position: 'relative',
	display: 'grid',
	gridTemplateRows: 'auto 140px',
	height: '100%',
	minWidth: 0,
	padding: 0,
	border: 0,
	borderRight: '1px solid rgba(20, 33, 31, 0.08)',
	borderBottom: '1px solid rgba(20, 33, 31, 0.08)',
	background: '#fff',
	textAlign: 'left',
	cursor: 'pointer',
	overflow: 'hidden',
	transition: 'background 180ms ease, box-shadow 180ms ease',
	'&:hover': {
		background: 'color-mix(in srgb, var(--store-background) 36%, #ffffff)',
		boxShadow: 'inset 0 0 0 1px color-mix(in srgb, var(--store-primary) 18%, transparent)'
	},
	'&:hover img': {
		transform: 'scale(1.05)'
	},
	'&:focus-visible': {
		outline: '3px solid color-mix(in srgb, var(--store-accent) 34%, transparent)',
		outlineOffset: -3
	}
});

export const ShowcaseProductImage = styled('div')({
	position: 'relative',
	display: 'grid',
	placeItems: 'center',
	minWidth: 0,
	aspectRatio: 'var(--catalog-image-ratio)',
	overflow: 'hidden',
	background: '#fff',
	...bannerHoverEffectStyles,
	'& img': {
		width: '100%',
		height: '100%',
		objectFit: 'cover',
		display: 'block',
		transition: 'transform 220ms ease'
	}
});

export const ShowcaseBadge = styled('span')({
	position: 'absolute',
	top: 10,
	left: 10,
	zIndex: 2,
	padding: '4px 8px',
	borderRadius: '0 8px 8px 0',
	background: 'var(--store-accent)',
	color: '#fff',
	fontSize: 10,
	fontWeight: 950,
	textTransform: 'uppercase',
	boxShadow: '0 10px 20px color-mix(in srgb, var(--store-accent) 22%, transparent)'
});

export const ShowcaseActionRail = styled('div')({
	position: 'absolute',
	top: 42,
	right: 9,
	zIndex: 8,
	display: 'grid',
	gap: 6,
	padding: 5,
	borderRadius: 999,
	background:
		'linear-gradient(135deg, color-mix(in srgb, var(--store-surface) 92%, #ffffff), color-mix(in srgb, var(--store-background) 82%, #ffffff))',
	border: '1px solid color-mix(in srgb, var(--store-primary) 14%, rgba(255, 255, 255, 0.72))',
	boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 26px rgba(15, 23, 42, 0.08)',
	opacity: 1,
	transform: 'translateX(0)',
	transition: 'opacity 180ms ease, transform 180ms ease',
	[`${ShowcaseProductCard}:hover &`]: {
		opacity: 1,
		transform: 'translateX(-2px)'
	},
	'@media (max-width: 900px)': {
		opacity: 1,
		transform: 'none'
	}
});

export const ShowcaseActionButton = styled(IconButton)({
	position: 'relative',
	width: 38,
	height: 38,
	borderRadius: 999,
	color: 'color-mix(in srgb, var(--store-text) 76%, var(--store-primary))',
	background: 'rgba(255, 255, 255, 0.78)',
	border: '1px solid rgba(255, 255, 255, 0.74)',
	boxShadow: '0 8px 18px rgba(15, 23, 42, 0.07)',
	overflow: 'hidden',
	transition:
		'transform 180ms ease, color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease',
	'&::before': {
		content: '""',
		position: 'absolute',
		inset: 5,
		borderRadius: 'inherit',
		background: 'currentColor',
		opacity: 0,
		transform: 'scale(0.72)',
		transition: 'opacity 180ms ease, transform 180ms ease'
	},
	'& svg': {
		position: 'relative',
		zIndex: 1,
		fontSize: 19
	},
	'&:hover': {
		transform: 'translateX(-3px) scale(1.04)',
		color: 'var(--store-primary)',
		background: '#fff',
		borderColor: 'color-mix(in srgb, var(--store-primary) 26%, #ffffff)',
		boxShadow: '0 14px 28px rgba(15, 23, 42, 0.13)'
	},
	'&:hover::before': {
		opacity: 0.1,
		transform: 'scale(1)'
	},
	'&[data-action="cart"]': {
		color: '#fff',
		background:
			'linear-gradient(135deg, var(--store-accent) 0%, color-mix(in srgb, var(--store-accent) 64%, var(--store-primary)) 100%)',
		borderColor: 'rgba(255, 255, 255, 0.58)',
		boxShadow:
			'0 14px 28px color-mix(in srgb, var(--store-accent) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.34)'
	},
	'&[data-action="cart"]:hover': {
		transform: 'translateX(-4px) scale(1.06)',
		background:
			'linear-gradient(135deg, color-mix(in srgb, var(--store-accent) 92%, #ffffff) 0%, var(--store-primary) 100%)',
		color: '#fff',
		borderColor: 'var(--store-accent)',
		boxShadow:
			'0 18px 34px color-mix(in srgb, var(--store-accent) 44%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.44)'
	},
	'&[data-action="favorite"]': {
		color: 'var(--store-danger)'
	},
	'&[data-action="favorite"]:hover': {
		background: 'color-mix(in srgb, var(--store-danger) 8%, #fff)',
		borderColor: 'color-mix(in srgb, var(--store-danger) 18%, transparent)',
		boxShadow: '0 14px 28px color-mix(in srgb, var(--store-danger) 18%, transparent)'
	},
	'&[data-action="compare"]': {
		color: 'var(--store-accent)'
	},
	'&[data-action="compare"]:hover': {
		background: 'color-mix(in srgb, var(--store-accent) 8%, #fff)',
		borderColor: 'color-mix(in srgb, var(--store-accent) 18%, transparent)',
		boxShadow: '0 14px 28px color-mix(in srgb, var(--store-accent) 18%, transparent)'
	},
	'&[data-action="view"]': {
		color: 'var(--store-secondary)'
	},
	'&[data-action="view"]:hover': {
		background: 'color-mix(in srgb, var(--store-secondary) 8%, #fff)',
		borderColor: 'color-mix(in srgb, var(--store-secondary) 18%, transparent)',
		boxShadow: '0 14px 28px color-mix(in srgb, var(--store-secondary) 16%, transparent)'
	}
});

export const ShowcaseProductInfo = styled('div')({
	position: 'relative',
	zIndex: 2,
	display: 'grid',
	alignContent: 'start',
	gap: 6,
	padding: 14,
	minHeight: 140,
	background: '#fff',
	'& > strong': {
		minHeight: 38,
		color: 'var(--store-text)',
		fontSize: 14,
		fontWeight: 900,
		lineHeight: 1.3,
		display: '-webkit-box',
		WebkitLineClamp: 2,
		WebkitBoxOrient: 'vertical',
		overflow: 'hidden'
	},
	'& .MuiSvgIcon-root': {
		fontSize: 16
	},
	'& strong': {
		color: 'var(--store-text)'
	},
	'& > div:last-child strong': {
		color: 'var(--store-price-color)'
	}
});

/** Marca · categoría y "En stock" en la tarjeta de los carruseles de la portada. */
export const ShowcaseMeta = styled('div')({
	display: 'flex',
	justifyContent: 'space-between',
	alignItems: 'center',
	gap: 8,
	minWidth: 0,
	color: 'var(--store-muted)',
	fontSize: 11.5,
	fontWeight: 800,
	'& > span': {
		minWidth: 0,
		overflow: 'hidden',
		textOverflow: 'ellipsis',
		whiteSpace: 'nowrap'
	},
	'& > em': {
		flexShrink: 0,
		fontStyle: 'normal',
		color: 'var(--store-success)'
	}
});

export const PaginationBar = styled('div')(({ theme }) => ({
	display: 'flex',
	flexWrap: 'wrap',
	alignItems: 'center',
	justifyContent: 'center',
	gap: 8,
	width: '100%',
	maxWidth: '100%',
	minWidth: 0,
	marginTop: 18,
	'& span': {
		color: 'var(--store-muted)',
		fontSize: 13,
		fontWeight: 900
	},
	'& .MuiButton-root': {
		minHeight: 38,
		paddingInline: 14
	},
	'& .MuiButton-root[data-pagination-page]': {
		minWidth: 44,
		paddingInline: 10
	},
	'& [data-pagination-ellipsis]': {
		display: 'grid',
		placeItems: 'center',
		minWidth: 24,
		minHeight: 38
	},
	[theme.breakpoints.down('sm')]: {
		gap: 8,
		'& .MuiButton-root': {
			minHeight: 34,
			minWidth: 40,
			paddingInline: 10,
			fontSize: 13
		}
	}
}));

// ── Hero Slider ──────────────────────────────────────────────────────────────

export const HeroSliderRoot = styled('section')(({ theme }) => ({
	display: 'block',
	marginBottom: 22,
	borderRadius: 18,
	overflow: 'hidden',
	background: 'var(--store-surface)',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	boxShadow: '0 26px 70px rgba(15, 23, 42, 0.14)',
	minHeight: 500,
	[theme.breakpoints.down('lg')]: {
		gridTemplateColumns: '1fr'
	},
	[theme.breakpoints.down('sm')]: {
		minHeight: 430,
		borderRadius: 14
	}
}));

export const HeroSliderMain = styled('div')({
	position: 'relative',
	overflow: 'hidden',
	minHeight: 500,
	'@media (max-width: 640px)': {
		minHeight: 430
	}
});

export const HeroSliderTrack = styled('div', {
	shouldForwardProp: (prop) => prop !== 'slide'
})<{ slide: number }>(({ slide }) => ({
	display: 'flex',
	width: '100%',
	height: '100%',
	minHeight: 500,
	transform: `translateX(-${slide * 100}%)`,
	transition: 'transform var(--store-motion-slow, 400ms) cubic-bezier(0.22, 1, 0.36, 1)',
	'@media (max-width: 640px)': {
		minHeight: 430
	}
}));

export const HeroSlide = styled('div', {
	shouldForwardProp: (prop) => prop !== 'bg'
})<{ bg?: string }>(({ bg }) => ({
	position: 'relative',
	display: 'grid',
	gridTemplateColumns: '1fr',
	alignItems: 'center',
	minWidth: '100%',
	minHeight: 500,
	padding: '46px clamp(54px, 8vw, 116px)',
	background: bg ?? 'color-mix(in srgb, var(--store-primary) 10%, #ffffff)',
	...bannerHoverEffectStyles,
	'& > .hero-contrast': {
		position: 'absolute',
		zIndex: 1,
		inset: 0,
		background:
			'linear-gradient(90deg, rgba(5, 16, 29, 0.82) 0%, rgba(5, 16, 29, 0.62) 38%, rgba(5, 16, 29, 0.16) 72%, rgba(5, 16, 29, 0.08) 100%)',
		pointerEvents: 'none'
	},
	'& > *': {
		position: 'relative',
		zIndex: 3
	},
	'& > div:last-child': {
		position: 'absolute',
		zIndex: 0,
		inset: 0,
		'& img': {
			width: '100%',
			height: '100%',
			objectFit: 'cover',
			display: 'block',
			filter: 'saturate(1.04) contrast(1.02)',
			transition: 'transform var(--store-motion-slow, 400ms) cubic-bezier(0.22, 1, 0.36, 1)'
		}
	},
	'&:hover > div:last-child img': {
		transform: 'scale(1.035)'
	},
	'[data-hero-variant="split"] &': {
		gridTemplateColumns: '0.85fr 1fr',
		padding: '32px clamp(24px, 5%, 60px)',
		'& > .hero-contrast': { display: 'none' },
		'& > div:last-child': {
			position: 'relative',
			display: 'grid',
			placeItems: 'center',
			'& img': {
				height: 'auto',
				maxHeight: 360,
				objectFit: 'contain',
				filter: 'drop-shadow(0 24px 44px rgba(0,0,0,0.16))'
			}
		}
	},
	'@media (max-width: 640px)': {
		minHeight: 430,
		gridTemplateColumns: '1fr',
		padding: '36px 28px 56px',
		'& > .hero-contrast': {
			background: 'linear-gradient(90deg, rgba(5, 16, 29, 0.82), rgba(5, 16, 29, 0.42))'
		},
		'[data-hero-variant="split"] & > div:last-child': { display: 'none' }
	}
}));

/** "Hasta 25%" + "en seleccionados": texto y subtexto de oferta del banner. */
export const HeroSlideDeal = styled('div')({
	display: 'flex',
	flexWrap: 'wrap',
	alignItems: 'baseline',
	gap: '4px 10px',
	color: '#fff',
	'& > strong': {
		fontSize: 'clamp(22px, 3vw, 32px)',
		fontWeight: 950,
		lineHeight: 1.05,
		color: 'color-mix(in srgb, var(--store-accent) 86%, #ffffff)'
	},
	'& > span': {
		fontSize: 14,
		fontWeight: 800,
		color: 'rgba(255, 255, 255, 0.84)'
	}
});

export const HeroSlideContent = styled('div')({
	display: 'grid',
	alignContent: 'center',
	gap: 14,
	paddingRight: 24,
	maxWidth: 590,
	'& > em': {
		fontStyle: 'normal',
		fontSize: 12,
		fontWeight: 900,
		textTransform: 'uppercase',
		letterSpacing: 2.5,
		color: 'color-mix(in srgb, var(--store-accent) 86%, #ffffff)'
	},
	'& > h2': {
		margin: 0,
		// Tamaño acotado para que una palabra larga (ej. ELECTRODOMESTICOS) entre
		// entera en el ancho del hero. `break-word` sólo parte la palabra como
		// último recurso (pantallas muy chicas), nunca de forma agresiva como
		// hacía `anywhere`.
		fontSize: 'clamp(26px, 4.4vw, 46px)',
		fontWeight: 950,
		lineHeight: 1.04,
		letterSpacing: 0,
		color: '#fff',
		textTransform: 'uppercase',
		textShadow: '0 18px 50px rgba(0, 0, 0, 0.26)',
		overflowWrap: 'break-word',
		hyphens: 'none',
		'& > span': { color: 'var(--store-accent)' }
	},
	'& > p': {
		margin: 0,
		color: 'rgba(255, 255, 255, 0.84)',
		fontSize: 15,
		lineHeight: 1.55,
		maxWidth: 480
	},
	'& > button': {
		width: 'max-content',
		minHeight: 46,
		display: 'inline-flex',
		alignItems: 'center',
		gap: 8,
		padding: '0 20px',
		border: '1px solid rgba(255, 255, 255, 0.45)',
		borderRadius: 999,
		background: 'color-mix(in srgb, var(--store-accent) 86%, var(--store-primary))',
		color: '#fff',
		fontSize: 13,
		fontWeight: 950,
		textTransform: 'uppercase',
		letterSpacing: 0,
		cursor: 'pointer',
		boxShadow: '0 16px 36px color-mix(in srgb, var(--store-accent) 36%, transparent)',
		transition: 'transform var(--store-motion-base, 200ms) ease, box-shadow var(--store-motion-base, 200ms) ease',
		'&:hover': {
			transform: 'translateY(-3px)',
			boxShadow: '0 22px 44px color-mix(in srgb, var(--store-accent) 46%, transparent)'
		},
		'& svg': {
			transition: 'transform var(--store-motion-fast, 150ms) ease'
		},
		'&:hover svg': { transform: 'translateX(3px)' }
	},
	'[data-hero-variant="split"] & > em': { color: 'var(--store-muted)' },
	'[data-hero-variant="split"] & > h2': { color: 'var(--store-text)', textShadow: 'none' },
	'[data-hero-variant="split"] & > p': { color: 'var(--store-muted)' },
	'@media (max-width: 640px)': {
		paddingRight: 0,
		'& > h2': {
			maxWidth: '100%',
			fontSize: 28,
			lineHeight: 1.08
		}
	}
});

export const HeroSliderArrow = styled('button', {
	shouldForwardProp: (prop) => prop !== 'direction'
})<{ direction: 'prev' | 'next' }>(({ direction }) => ({
	position: 'absolute',
	top: '50%',
	[direction === 'prev' ? 'left' : 'right']: 14,
	zIndex: 5,
	width: 38,
	height: 38,
	display: 'grid',
	placeItems: 'center',
	transform: 'translateY(-50%)',
	border: 0,
	borderRadius: 999,
	background: 'rgba(255, 255, 255, 0.86)',
	color: 'var(--store-text)',
	cursor: 'pointer',
	boxShadow: '0 8px 22px rgba(15, 23, 42, 0.14)',
	transition: 'transform 160ms ease, background 160ms ease, box-shadow 160ms ease',
	'&:hover': {
		transform: 'translateY(-50%) scale(1.08)',
		background: '#fff',
		boxShadow: '0 14px 30px rgba(15, 23, 42, 0.2)'
	},
	'& svg': { fontSize: 22 },
	'@media (max-width: 640px)': {
		top: 'auto',
		bottom: 14,
		transform: 'none',
		'&:hover': { transform: 'scale(1.08)' }
	}
}));

export const HeroDotBar = styled('div')({
	position: 'absolute',
	bottom: 16,
	left: '50%',
	transform: 'translateX(-50%)',
	display: 'flex',
	alignItems: 'center',
	gap: 7,
	zIndex: 5
});

export const HeroDot = styled('button', {
	shouldForwardProp: (prop) => prop !== 'active'
})<{ active?: boolean }>(({ active }) => ({
	width: active ? 22 : 8,
	height: 8,
	padding: 0,
	border: 0,
	borderRadius: 999,
	background: active ? 'var(--store-primary)' : 'rgba(0, 0, 0, 0.2)',
	cursor: 'pointer',
	transition: 'width 280ms ease, background 280ms ease'
}));

// ── Hero Aside ────────────────────────────────────────────────────────────────

export const HeroAsideColumn = styled('div')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
	gap: 16,
	marginBottom: 22,
	[theme.breakpoints.down('lg')]: {
		gridTemplateColumns: '1fr 1fr'
	},
	[theme.breakpoints.down('sm')]: {
		gridTemplateColumns: '1fr'
	}
}));

export const HeroAsideCard = styled('div')({
	display: 'grid',
	gridTemplateColumns: 'minmax(150px, 0.7fr) minmax(120px, 0.45fr)',
	gridTemplateRows: '1fr auto',
	background: '#fff',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	borderRadius: 14,
	overflow: 'hidden',
	boxShadow: '0 14px 36px rgba(15, 23, 42, 0.07)',
	transition: 'transform var(--store-motion-base, 200ms) ease, box-shadow var(--store-motion-base, 200ms) ease',
	'&:hover': {
		transform: 'translateY(-4px)',
		boxShadow: '0 22px 48px rgba(15, 23, 42, 0.13)'
	},
	'& > header': {
		padding: '18px 18px 8px',
		'& > em': {
			fontStyle: 'normal',
			fontSize: 11,
			fontWeight: 900,
			textTransform: 'uppercase',
			letterSpacing: 2,
			color: 'var(--store-muted)'
		},
		'& > strong': {
			display: 'block',
			marginTop: 3,
			fontSize: 15,
			fontWeight: 950,
			textTransform: 'uppercase',
			color: 'var(--store-text)',
			lineHeight: 1.2,
			'& > span': { color: 'var(--store-accent)' }
		},
		'& > small': {
			display: 'block',
			marginTop: 3,
			fontSize: 12,
			color: 'var(--store-muted)'
		}
	},
	'& > div': {
		gridColumn: 2,
		gridRow: '1 / 3',
		display: 'grid',
		placeItems: 'center',
		padding: '8px 18px',
		'& img': {
			maxWidth: '100%',
			maxHeight: 140,
			objectFit: 'contain',
			display: 'block',
			filter: 'drop-shadow(0 8px 18px rgba(0,0,0,0.12))',
			transition: 'transform 220ms ease'
		},
		'&:hover img': { transform: 'scale(1.06)' }
	},
	'& > footer': {
		gridColumn: 1,
		display: 'grid',
		gridTemplateColumns: '1fr auto',
		alignItems: 'center',
		padding: '0 18px 18px',
		gap: 10,
		'& > div': {
			'& > span': {
				display: 'block',
				fontSize: 10,
				fontWeight: 900,
				textTransform: 'uppercase',
				letterSpacing: 1,
				color: 'var(--store-muted)'
			},
			'& > strong': {
				fontSize: 'var(--store-price-size)',
				fontWeight: 950,
				color: 'var(--store-price-color)'
			}
		},
		'& > button': {
			display: 'inline-flex',
			alignItems: 'center',
			gap: 4,
			height: 30,
			padding: '0 12px',
			border: 0,
			borderRadius: 999,
			background: 'var(--store-text)',
			color: '#fff',
			fontSize: 10,
			fontWeight: 950,
			textTransform: 'uppercase',
			letterSpacing: 1,
			cursor: 'pointer',
			whiteSpace: 'nowrap',
			transition: 'background 160ms ease',
			'&:hover': { background: 'var(--store-primary)' },
			'& svg': { fontSize: 13 }
		}
	},
	'@media (max-width: 640px)': {
		gridTemplateColumns: 'minmax(0, 1fr) 120px'
	}
});

// ── Bottom Banners ─────────────────────────────────────────────────────────────

export const HeroBannerRow = styled('div')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
	gap: 16,
	marginBottom: 22,
	[theme.breakpoints.down('md')]: {
		gridTemplateColumns: '1fr',
		gap: 12
	}
}));

export const HeroBannerCard = styled('button')({
	position: 'relative',
	display: 'flex',
	alignItems: 'flex-end',
	minHeight: 200,
	border: 0,
	borderRadius: 12,
	overflow: 'hidden',
	cursor: 'pointer',
	textAlign: 'left',
	boxShadow: '0 12px 30px rgba(15, 23, 42, 0.14)',
	transition: 'transform 180ms ease, box-shadow 180ms ease',
	...bannerHoverEffectStyles,
	'&:hover': {
		transform: 'translateY(-4px)',
		boxShadow: '0 22px 46px rgba(15, 23, 42, 0.2)'
	},
	'&:hover img': { transform: 'scale(1.06) translateY(-4px)' },
	'& > img': {
		position: 'absolute',
		zIndex: 0,
		right: 0,
		bottom: 0,
		width: '55%',
		height: '100%',
		objectFit: 'contain',
		objectPosition: 'bottom right',
		display: 'block',
		transition: 'transform 240ms ease',
		filter: 'drop-shadow(0 16px 28px rgba(0,0,0,0.22))'
	},
	'& > div': {
		position: 'relative',
		zIndex: 2,
		padding: '22px 22px 24px',
		'& > em': {
			fontStyle: 'normal',
			display: 'block',
			fontSize: 11,
			fontWeight: 900,
			textTransform: 'uppercase',
			letterSpacing: 2,
			color: 'rgba(255, 255, 255, 0.72)'
		},
		'& > strong': {
			display: 'block',
			marginTop: 5,
			fontSize: 'clamp(20px, 2.4vw, 28px)',
			fontWeight: 950,
			textTransform: 'uppercase',
			lineHeight: 1.05,
			color: '#fff'
		},
		'& > span': {
			display: 'block',
			marginTop: 4,
			fontSize: 11,
			fontWeight: 850,
			textTransform: 'uppercase',
			letterSpacing: 1,
			color: 'rgba(255, 255, 255, 0.68)'
		}
	}
});

// ── Catalog Toolbar ────────────────────────────────────────────────────────────

export const CatalogToolbar = styled('div')(({ theme }) => ({
	display: 'flex',
	alignItems: 'center',
	gap: 12,
	padding: '10px 14px',
	marginBottom: 14,
	borderRadius: 10,
	background: 'var(--store-surface)',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	boxShadow: '0 8px 20px rgba(15, 23, 42, 0.04)',
	flexWrap: 'wrap',
	'& select': {
		height: 34,
		padding: '0 10px',
		border: '1px solid rgba(20, 33, 31, 0.14)',
		borderRadius: 8,
		background: '#fff',
		color: 'var(--store-text)',
		fontSize: 13,
		fontWeight: 800,
		cursor: 'pointer'
	},
	[theme.breakpoints.down('sm')]: {
		gap: 8
	}
}));

export const CatalogToolbarLabel = styled('span')({
	color: 'var(--store-muted)',
	fontSize: 13,
	fontWeight: 850,
	whiteSpace: 'nowrap'
});

export const CatalogViewButton = styled('button', {
	shouldForwardProp: (prop) => prop !== 'active'
})<{ active?: boolean }>(({ active }) => ({
	width: 34,
	height: 34,
	display: 'grid',
	placeItems: 'center',
	border: `1px solid ${active ? 'var(--store-primary)' : 'rgba(20, 33, 31, 0.14)'}`,
	borderRadius: 8,
	background: active ? 'var(--store-primary)' : '#fff',
	color: active ? '#fff' : 'var(--store-muted)',
	cursor: 'pointer',
	transition: 'all 160ms ease',
	'& svg': { fontSize: 18 }
}));

export const CategoryBanner = styled('section')(({ theme }) => ({
	position: 'relative',
	display: 'grid',
	gridTemplateColumns: 'minmax(0, 1fr) 200px',
	alignItems: 'center',
	gap: 20,
	padding: '22px 28px',
	marginBottom: 14,
	borderRadius: 12,
	background: 'color-mix(in srgb, var(--store-background) 60%, #ffffff)',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	boxShadow: '0 10px 28px rgba(15, 23, 42, 0.06)',
	...bannerHoverEffectStyles,
	'& > div': {
		position: 'relative',
		zIndex: 3,
		display: 'grid',
		gap: 8
	},
	'& h2': {
		margin: 0,
		fontSize: 'clamp(20px, 3vw, 30px)',
		fontWeight: 950,
		letterSpacing: 0,
		lineHeight: 1.1,
		textTransform: 'uppercase',
		color: 'var(--store-text)',
		'& em': { fontStyle: 'normal', color: 'var(--store-accent)' }
	},
	'& p': {
		margin: 0,
		color: 'var(--store-muted)',
		fontSize: 14,
		lineHeight: 1.6,
		maxWidth: 500
	},
	'& img': {
		position: 'relative',
		zIndex: 2,
		height: 130,
		width: '100%',
		objectFit: 'contain',
		display: 'block',
		justifySelf: 'end'
	},
	'&[data-landing="true"]': {
		gridTemplateColumns: 'minmax(0, 1fr) minmax(260px, 42%)',
		minHeight: 286,
		padding: '38px 42px',
		marginBottom: 12,
		borderRadius: 0,
		background:
			'linear-gradient(135deg, color-mix(in srgb, var(--store-surface) 76%, #f3f4f0), color-mix(in srgb, var(--store-background) 82%, #ffffff))',
		boxShadow: 'none',
		'& h2': {
			fontSize: 'clamp(28px, 4vw, 40px)',
			letterSpacing: 1.2
		},
		'& p': {
			maxWidth: 520,
			fontSize: 14,
			fontWeight: 750
		},
		'& img': {
			height: 210,
			objectFit: 'cover',
			borderRadius: 0,
			filter: 'drop-shadow(0 16px 26px rgba(15, 23, 42, 0.12))'
		}
	},
	[theme.breakpoints.down('sm')]: {
		gridTemplateColumns: '1fr',
		'& img': { display: 'none' }
	}
}));

export const SubcategoryPreviewGrid = styled('div')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: 'repeat(5, minmax(0, 1fr))',
	gap: 16,
	marginBottom: 24,
	[theme.breakpoints.down('lg')]: {
		gridTemplateColumns: 'repeat(3, minmax(0, 1fr))'
	},
	[theme.breakpoints.down('sm')]: {
		gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
		gap: 10
	}
}));

export const SubcategoryPreviewCard = styled('button')({
	display: 'grid',
	gap: 10,
	minWidth: 0,
	padding: 0,
	border: 0,
	background: 'transparent',
	color: 'var(--store-muted)',
	textAlign: 'left',
	fontSize: 13,
	fontWeight: 850,
	cursor: 'pointer',
	'& img': {
		width: '100%',
		aspectRatio: '1 / 1',
		objectFit: 'cover',
		display: 'block',
		border: '1px solid rgba(20, 33, 31, 0.12)',
		background: '#fff',
		transition: 'transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease'
	},
	'& span': {
		overflow: 'hidden',
		textOverflow: 'ellipsis',
		whiteSpace: 'nowrap'
	},
	'&:hover img': {
		transform: 'translateY(-3px)',
		borderColor: 'color-mix(in srgb, var(--store-primary) 26%, rgba(20, 33, 31, 0.12))',
		boxShadow: '0 14px 28px rgba(15, 23, 42, 0.1)'
	},
	'&:hover span': {
		color: 'var(--store-primary)'
	}
});

export const ProductListGrid = styled('div')({
	display: 'grid',
	gap: 12
});

export const ProductListRow = styled('article')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: '190px minmax(0, 1fr)',
	gap: 20,
	padding: 16,
	borderRadius: 10,
	background: 'var(--store-surface)',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	boxShadow: '0 8px 20px rgba(15, 23, 42, 0.05)',
	cursor: 'pointer',
	transition: 'transform 180ms ease, box-shadow 180ms ease',
	'&:hover': {
		transform: 'translateY(-2px)',
		boxShadow: '0 16px 36px rgba(15, 23, 42, 0.1)'
	},
	'& > div:first-of-type': {
		position: 'relative',
		height: 160,
		background: '#f5f7f6',
		borderRadius: 8,
		overflow: 'hidden',
		'& img': {
			width: '100%',
			height: '100%',
			objectFit: 'contain',
			display: 'block',
			padding: 8,
			transition: 'transform 220ms ease'
		},
		'&:hover img': { transform: 'scale(1.05)' }
	},
	[theme.breakpoints.down('sm')]: {
		gridTemplateColumns: '110px minmax(0, 1fr)',
		gap: 12,
		'& > div:first-of-type': { height: 120 }
	}
}));

export const ProductListRowBody = styled('div')({
	display: 'grid',
	alignContent: 'start',
	gap: 10,
	padding: '4px 0',
	'& h3': {
		margin: 0,
		fontSize: 16,
		fontWeight: 900,
		color: 'var(--store-text)',
		lineHeight: 1.3
	},
	'& p': {
		margin: 0,
		color: 'var(--store-muted)',
		fontSize: 13,
		lineHeight: 1.55,
		display: '-webkit-box',
		WebkitLineClamp: 3,
		WebkitBoxOrient: 'vertical',
		overflow: 'hidden'
	}
});

export const ProductCard = styled('article')({
	position: 'relative',
	display: 'grid',
	gridTemplateRows: 'auto 1fr',
	height: '100%',
	minHeight: 'var(--catalog-card-min-height, 438px)',
	minWidth: 0,
	background: 'var(--store-surface)',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	borderRadius: 8,
	overflow: 'hidden',
	cursor: 'pointer',
	boxShadow: '0 10px 30px rgba(20, 33, 31, 0.06)',
	transform: 'translateY(0)',
	transition:
		'transform var(--store-motion-base, 200ms) cubic-bezier(0.22, 1, 0.36, 1), box-shadow var(--store-motion-base, 200ms) ease, border-color var(--store-motion-base, 200ms) ease',
	'&:hover': {
		transform: 'translateY(-6px)',
		borderColor: 'color-mix(in srgb, var(--store-primary) 28%, rgba(20, 33, 31, 0.08))',
		boxShadow: '0 22px 48px rgba(20, 33, 31, 0.14)'
	},
	'&:hover img': {
		transform: 'scale(1.05)'
	},
	'[data-card-hover="none"] &': {
		'&:hover': {
			transform: 'none',
			borderColor: 'rgba(20, 33, 31, 0.08)',
			boxShadow: '0 10px 30px rgba(20, 33, 31, 0.06)'
		},
		'&:hover img': { transform: 'none' }
	},
	'[data-card-hover="zoom"] &': {
		'&:hover': {
			transform: 'none',
			boxShadow: '0 16px 38px rgba(20, 33, 31, 0.11)'
		},
		'&:hover img': { transform: 'scale(1.09)' }
	},
	'[data-card-hover="glow"] &': {
		'&:hover': {
			transform: 'translateY(-3px)',
			borderColor: 'color-mix(in srgb, var(--store-accent) 58%, transparent)',
			boxShadow:
				'0 20px 50px color-mix(in srgb, var(--store-primary) 16%, transparent), 0 0 0 4px color-mix(in srgb, var(--store-accent) 9%, transparent)'
		}
	},
	'&:focus-visible': {
		outline: '3px solid color-mix(in srgb, var(--store-accent) 34%, transparent)',
		outlineOffset: 3
	},
	'@media (max-width: 640px)': {
		minHeight: 'calc(var(--catalog-card-min-height, 438px) - 48px)'
	}
});

export const ProductImage = styled('div')({
	position: 'relative',
	aspectRatio: 'var(--catalog-image-ratio)',
	background: '#edf1ef',
	overflow: 'hidden',
	...bannerHoverEffectStyles,
	'& img': {
		width: '100%',
		height: '100%',
		objectFit: 'cover',
		display: 'block',
		transition: 'transform var(--store-motion-slow, 400ms) cubic-bezier(0.22, 1, 0.36, 1)'
	}
});

export const BadgeStack = styled('div')({
	position: 'absolute',
	top: 10,
	left: 10,
	display: 'grid',
	gap: 6,
	'& span': {
		width: 'max-content',
		padding: '4px 7px',
		borderRadius: 6,
		background: '#fff',
		color: 'var(--store-primary)',
		fontSize: 11,
		fontWeight: 900,
		boxShadow: '0 8px 26px rgba(0, 0, 0, 0.12)'
	}
});

export const ProductBody = styled('div')({
	display: 'grid',
	gridTemplateRows: 'auto minmax(var(--catalog-card-name-min-h, 48px), auto) auto 1fr',
	gap: 8,
	padding: 'var(--catalog-card-body-padding, 14px)',
	minHeight: 'var(--catalog-card-body-min-height, 210px)',
	'& h3': {
		fontWeight: 900,
		fontSize: 'var(--catalog-card-name-size, 14px)',
		lineHeight: 1.25,
		minHeight: 'var(--catalog-card-name-min-h, 48px)',
		display: '-webkit-box',
		WebkitLineClamp: 2,
		WebkitBoxOrient: 'vertical',
		overflow: 'hidden'
	}
});

export const ProductMeta = styled('div')({
	display: 'flex',
	justifyContent: 'space-between',
	gap: 8,
	color: 'var(--store-muted)',
	fontSize: 12,
	fontWeight: 800
});

export const Rating = styled('span')({
	display: 'inline-flex',
	alignItems: 'center',
	gap: 2,
	color: 'var(--store-accent)'
});

export const PriceRow = styled('div')({
	display: 'flex',
	alignItems: 'baseline',
	gap: 8,
	flexWrap: 'wrap',
	'& strong': {
		fontSize: 'var(--store-price-size)',
		color: 'var(--store-price-color)'
	},
	'& del': {
		color: 'var(--store-muted)',
		fontSize: 12
	}
});

/** Línea de financiación en la tarjeta: "Hasta 18 cuotas de Gs. 179.000". */
export const CardInstallments = styled('p')({
	margin: '-2px 0 0',
	fontSize: 11.5,
	lineHeight: 1.35,
	color: 'var(--store-muted)',
	'& strong': {
		fontWeight: 800,
		color: 'var(--store-primary)'
	}
});

export const CardFooter = styled('div')({
	display: 'grid',
	gap: 10,
	marginTop: 'auto',
	alignSelf: 'end',
	justifyItems: 'center',
	'@media (max-width: 640px)': {
		gap: 8
	}
});

export const StockText = styled('span')({
	display: 'inline-flex',
	alignItems: 'center',
	width: 'max-content',
	minHeight: 24,
	padding: '0 9px',
	borderRadius: 999,
	background: 'color-mix(in srgb, var(--store-success) 9%, #ffffff)',
	color: 'var(--store-success)',
	border: '1px solid color-mix(in srgb, var(--store-success) 18%, transparent)',
	fontSize: 12,
	fontWeight: 900,
	justifySelf: 'start'
});

export const ProductActions = styled('div')({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	gap: 7,
	width: 'min(100%, 184px)',
	minHeight: 50,
	padding: 6,
	borderRadius: 999,
	background:
		'linear-gradient(135deg, color-mix(in srgb, var(--store-surface) 92%, #ffffff), color-mix(in srgb, var(--store-background) 82%, #ffffff))',
	border: '1px solid color-mix(in srgb, var(--store-primary) 14%, rgba(255, 255, 255, 0.72))',
	boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 26px rgba(15, 23, 42, 0.08)'
});

export const IconAction = styled(IconButton)({
	position: 'relative',
	width: 38,
	height: 38,
	borderRadius: 999,
	color: 'color-mix(in srgb, var(--store-text) 76%, var(--store-primary))',
	background: 'rgba(255, 255, 255, 0.78)',
	border: '1px solid rgba(255, 255, 255, 0.74)',
	boxShadow: '0 8px 18px rgba(15, 23, 42, 0.07)',
	overflow: 'hidden',
	transition:
		'transform 180ms ease, color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease',
	'&::before': {
		content: '""',
		position: 'absolute',
		inset: 5,
		borderRadius: 'inherit',
		background: 'currentColor',
		opacity: 0,
		transform: 'scale(0.72)',
		transition: 'opacity 180ms ease, transform 180ms ease'
	},
	'& svg': {
		position: 'relative',
		zIndex: 1,
		fontSize: 19
	},
	'&:hover': {
		transform: 'translateY(-3px) scale(1.04)',
		color: 'var(--store-primary)',
		background: '#fff',
		borderColor: 'color-mix(in srgb, var(--store-primary) 26%, #ffffff)',
		boxShadow: '0 14px 28px rgba(15, 23, 42, 0.13)'
	},
	'&:hover::before': {
		opacity: 0.1,
		transform: 'scale(1)'
	},
	'&:active': {
		transform: 'translateY(-1px) scale(0.98)'
	},
	'&[data-action="favorite"]': {
		color: 'var(--store-danger)'
	},
	'&[data-action="favorite"]:hover': {
		background: 'color-mix(in srgb, var(--store-danger) 8%, #fff)',
		borderColor: 'color-mix(in srgb, var(--store-danger) 18%, transparent)',
		boxShadow: '0 14px 28px color-mix(in srgb, var(--store-danger) 18%, transparent)'
	},
	'&[data-action="compare"]': {
		color: 'var(--store-accent)'
	},
	'&[data-action="compare"]:hover': {
		background: 'color-mix(in srgb, var(--store-accent) 8%, #fff)',
		borderColor: 'color-mix(in srgb, var(--store-accent) 18%, transparent)',
		boxShadow: '0 14px 28px color-mix(in srgb, var(--store-accent) 18%, transparent)'
	},
	'&[data-action="view"]': {
		color: 'var(--store-secondary)'
	},
	'&[data-action="view"]:hover': {
		background: 'color-mix(in srgb, var(--store-secondary) 8%, #fff)',
		borderColor: 'color-mix(in srgb, var(--store-secondary) 18%, transparent)',
		boxShadow: '0 14px 28px color-mix(in srgb, var(--store-secondary) 16%, transparent)'
	}
});

export const PrimaryIconAction = styled(IconAction)({
	width: 42,
	height: 42,
	background:
		'linear-gradient(135deg, var(--store-accent) 0%, color-mix(in srgb, var(--store-accent) 68%, var(--store-primary)) 100%)',
	color: '#fff',
	borderColor: 'var(--store-accent)',
	boxShadow:
		'0 14px 26px color-mix(in srgb, var(--store-accent) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.36)',
	'&::after': {
		content: '""',
		position: 'absolute',
		inset: -8,
		borderRadius: 'inherit',
		background: 'radial-gradient(circle, rgba(255, 255, 255, 0.42), transparent 62%)',
		opacity: 0,
		transform: 'scale(0.7)',
		transition: 'opacity 180ms ease, transform 180ms ease'
	},
	'& svg': {
		fontSize: 21
	},
	'&:hover': {
		transform: 'translateY(-4px) scale(1.06)',
		background:
			'linear-gradient(135deg, color-mix(in srgb, var(--store-accent) 92%, #ffffff) 0%, var(--store-primary) 100%)',
		color: '#fff',
		borderColor: 'var(--store-accent)',
		boxShadow:
			'0 18px 34px color-mix(in srgb, var(--store-accent) 44%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.44)'
	},
	'&:hover::before': {
		opacity: 0.16
	},
	'&:hover::after': {
		opacity: 1,
		transform: 'scale(1)'
	},
	'&:focus-visible': {
		outline: '3px solid color-mix(in srgb, var(--store-accent) 34%, transparent)',
		outlineOffset: 3
	}
});