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

export const Root = styled('main')({
	'--header-height': '76px',
	position: 'relative',
	minHeight: '100vh',
	background: 'var(--store-background)',
	color: 'var(--store-text)',
	fontFamily: 'var(--store-font, "Inter", system-ui, sans-serif)',
	'&[data-header-variant="compact"]': {
		'--header-height': '66px'
	},
	'&[data-motion="none"] *': {
		scrollBehavior: 'auto !important',
		animationDuration: '0.01ms !important',
		animationIterationCount: '1 !important',
		transitionDuration: '0.01ms !important'
	},
	// Los bloques arrancan visibles y sólo se desplazan un poco al entrar. Con opacity 0
	// la página quedaba en blanco hasta hacer scroll: en vistas previas de links, para
	// buscadores y en capturas de página completa se veía casi vacía.
	'&[data-scroll-animations="true"] [data-store-reveal]': {
		transform: 'translateY(18px)',
		transition: 'transform var(--store-motion-slow, 400ms) cubic-bezier(0.22, 1, 0.36, 1)'
	},
	'&[data-scroll-animations="true"] [data-store-reveal][data-store-visible="true"]': {
		opacity: 1,
		transform: 'translateY(0)'
	},
	'&[data-motion="subtle"] [data-store-reveal]': {
		transform: 'translateY(10px)'
	},
	'&[data-motion="subtle"] [data-store-reveal][data-store-visible="true"]': {
		transform: 'translateY(0)'
	},
	'@media (prefers-reduced-motion: reduce)': {
		'& *, & *::before, & *::after': {
			scrollBehavior: 'auto !important',
			animationDuration: '0.01ms !important',
			animationIterationCount: '1 !important',
			transitionDuration: '0.01ms !important'
		},
		'& [data-store-reveal]': {
			opacity: '1 !important',
			transform: 'none !important'
		}
	},
	'& .MuiButton-root': {
		minHeight: 44,
		borderRadius: 999,
		textTransform: 'none',
		fontWeight: 900,
		letterSpacing: 0,
		transition:
			'transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease'
	},
	'& .MuiButton-contained': {
		background:
			'linear-gradient(135deg, var(--store-primary) 0%, color-mix(in srgb, var(--store-primary) 72%, var(--store-secondary)) 100%)',
		color: '#fff',
		boxShadow:
			'0 16px 34px color-mix(in srgb, var(--store-primary) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.26)'
	},
	'& .MuiButton-contained:hover': {
		transform: 'translateY(-2px)',
		background:
			'linear-gradient(135deg, color-mix(in srgb, var(--store-primary) 92%, #ffffff) 0%, var(--store-secondary) 100%)',
		boxShadow:
			'0 22px 42px color-mix(in srgb, var(--store-primary) 36%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.32)'
	},
	'& .MuiButton-contained:active': {
		transform: 'translateY(0) scale(0.99)'
	},
	'& .MuiButton-outlined': {
		borderColor: 'color-mix(in srgb, var(--store-primary) 26%, rgba(255, 255, 255, 0.72))',
		color: 'var(--store-primary)',
		background: 'rgba(255, 255, 255, 0.76)',
		boxShadow: '0 12px 28px rgba(15, 23, 42, 0.07)'
	},
	'& .MuiButton-outlined:hover': {
		transform: 'translateY(-2px)',
		borderColor: 'color-mix(in srgb, var(--store-primary) 44%, #ffffff)',
		background: '#fff',
		boxShadow: '0 18px 34px rgba(15, 23, 42, 0.12)'
	},
	'& .MuiButton-root:focus-visible': {
		outline: '3px solid color-mix(in srgb, var(--store-accent) 34%, transparent)',
		outlineOffset: 3
	},
	'& .MuiButton-root.Mui-disabled': {
		background: 'linear-gradient(135deg, #d8dedb, #eef1ef)',
		color: 'rgba(20, 33, 31, 0.44)',
		boxShadow: 'none'
	},
	'& .MuiChip-root': {
		borderRadius: 999,
		fontWeight: 900,
		transition: 'transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease'
	},
	'& .MuiChip-root:hover': {
		transform: 'translateY(-1px)',
		boxShadow: '0 10px 22px rgba(15, 23, 42, 0.09)'
	}
});

export const TopBar = styled('div')({
	position: 'relative',
	minHeight: 40,
	padding: '0 clamp(16px, 4vw, 56px)',
	background:
		'linear-gradient(110deg, color-mix(in srgb, var(--store-text) 97%, #050b14), color-mix(in srgb, var(--store-text) 90%, var(--store-primary)))',
	color: '#fff',
	fontSize: 12,
	fontWeight: 800,
	textAlign: 'center',
	borderBottom: '1px solid color-mix(in srgb, var(--store-accent) 24%, transparent)',
	'&::after': {
		content: '""',
		position: 'absolute',
		left: '50%',
		bottom: -1,
		width: 'min(420px, 42vw)',
		height: 2,
		transform: 'translateX(-50%)',
		background: 'linear-gradient(90deg, transparent, var(--store-accent), transparent)'
	}
});

export const TopBarInner = styled('div')(({ theme }) => ({
	width: 'min(1440px, 100%)',
	minHeight: 40,
	margin: '0 auto',
	display: 'grid',
	gridTemplateColumns: 'minmax(160px, 0.55fr) minmax(260px, 1fr) minmax(190px, 0.55fr)',
	alignItems: 'center',
	gap: 16,
	[theme.breakpoints.down('md')]: {
		gridTemplateColumns: '1fr',
		gap: 4,
		padding: '7px 0'
	}
}));

export const TopContact = styled('a')(({ theme }) => ({
	display: 'inline-flex',
	alignItems: 'center',
	gap: 6,
	justifySelf: 'start',
	whiteSpace: 'nowrap',
	textDecoration: 'none',
	color: 'inherit',
	minHeight: 28,
	padding: '0 10px',
	borderRadius: 999,
	background: 'rgba(255,255,255,0.07)',
	border: '1px solid rgba(255,255,255,0.1)',
	opacity: 0.9,
	transition: 'opacity 180ms ease, background 180ms ease, transform 180ms ease',
	'&:hover': { opacity: 1, background: 'rgba(255,255,255,0.13)', transform: 'translateY(-1px)' },
	'& svg': { color: '#25d366' },
	[theme.breakpoints.down('md')]: {
		display: 'none'
	}
}));

export const TopMessage = styled('div')({
	justifySelf: 'center',
	display: 'inline-flex',
	alignItems: 'center',
	justifyContent: 'center',
	minWidth: 0,
	lineHeight: 1.25,
	'& svg': {
		filter: 'drop-shadow(0 0 8px color-mix(in srgb, var(--store-accent) 70%, transparent))'
	}
});

export const TopTrust = styled('div')(({ theme }) => ({
	justifySelf: 'end',
	whiteSpace: 'nowrap',
	opacity: 0.82,
	display: 'inline-flex',
	alignItems: 'center',
	gap: 4,
	minHeight: 28,
	padding: '0 10px',
	borderRadius: 999,
	background: 'rgba(255,255,255,0.06)',
	border: '1px solid rgba(255,255,255,0.09)',
	[theme.breakpoints.down('md')]: {
		display: 'none'
	}
}));

export const Header = styled('header')({
	position: 'sticky',
	top: 0,
	zIndex: 20,
	display: 'grid',
	gap: 0,
	background: 'color-mix(in srgb, var(--store-surface) 94%, transparent)',
	borderBottom: '1px solid rgba(20, 33, 31, 0.08)',
	backdropFilter: 'blur(22px) saturate(1.2)',
	transition: 'box-shadow 220ms ease, background 220ms ease',
	'&[data-scrolled="true"]': {
		background: 'color-mix(in srgb, var(--store-surface) 97%, transparent)',
		boxShadow: '0 18px 42px rgba(15,23,42,0.1)'
	},
	'&::after': {
		content: '""',
		position: 'absolute',
		left: 0,
		right: 0,
		bottom: 0,
		height: 1,
		background:
			'linear-gradient(90deg, transparent, color-mix(in srgb, var(--store-primary) 30%, transparent), transparent)'
	},
	'[data-sticky-header="false"] &': {
		position: 'relative'
	}
});

export const HeaderMain = styled('div')(({ theme }) => ({
	width: 'min(1440px, 100%)',
	minHeight: 82,
	margin: '0 auto',
	display: 'grid',
	gridTemplateColumns: 'minmax(230px, 0.72fr) minmax(320px, 1.5fr) minmax(170px, auto)',
	gap: 24,
	alignItems: 'center',
	padding: '14px clamp(16px, 4vw, 56px) 10px',
	transition: 'min-height 220ms ease, padding 220ms ease',
	'[data-header-variant="compact"] &': {
		minHeight: 74,
		paddingTop: 10,
		paddingBottom: 8
	},
	'[data-scrolled="true"] &': {
		minHeight: 64,
		paddingTop: 7,
		paddingBottom: 5
	},
	[theme.breakpoints.down('md')]: {
		gridTemplateColumns: '1fr auto',
		gap: 12,
		paddingTop: 10,
		'& > [data-header-search="true"]': {
			gridColumn: '1 / -1',
			order: 3
		}
	}
}));

export const HeaderNav = styled('nav')(({ theme }) => ({
	position: 'relative',
	width: 'min(980px, calc(100% - 32px))',
	margin: '0 auto 12px',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	gap: 4,
	padding: 6,
	borderRadius: 12,
	background: 'color-mix(in srgb, var(--store-primary) 4%, rgba(255,255,255,0.72))',
	border: '1px solid color-mix(in srgb, var(--store-primary) 12%, rgba(20,33,31,0.07))',
	boxShadow: '0 12px 32px rgba(15,23,42,0.055), inset 0 1px 0 rgba(255,255,255,0.8)',
	transition: 'margin 220ms ease, padding 220ms ease, box-shadow 220ms ease',
	'[data-header-variant="compact"] &': {
		marginBottom: 9
	},
	'[data-scrolled="true"] &': {
		marginBottom: 7,
		paddingTop: 4,
		paddingBottom: 4,
		boxShadow: '0 8px 22px rgba(15,23,42,0.06)'
	},
	overflow: 'visible',
	[theme.breakpoints.down('md')]: {
		width: '100%',
		marginBottom: 0,
		justifyContent: 'flex-start',
		padding: '7px 16px 9px',
		borderRadius: 0,
		borderLeft: 0,
		borderRight: 0,
		overflowX: 'auto',
		overflowY: 'hidden',
		scrollbarWidth: 'none',
		'&::-webkit-scrollbar': { display: 'none' },
		// En 390 px los accesos no entran y el último quedaba cortado sin indicio de que
		// se podía deslizar. El borde derecho se desvanece para insinuarlo.
		maskImage: 'linear-gradient(90deg, #000 calc(100% - 44px), transparent)',
		WebkitMaskImage: 'linear-gradient(90deg, #000 calc(100% - 44px), transparent)',
		scrollSnapType: 'x proximity',
		'& > *': { scrollSnapAlign: 'start', flexShrink: 0 }
	}
}));

export const Brand = styled('button')({
	display: 'inline-flex',
	alignItems: 'center',
	gap: 14,
	padding: 0,
	border: 0,
	background: 'transparent',
	color: 'inherit',
	textDecoration: 'none',
	minWidth: 0,
	cursor: 'pointer',
	textAlign: 'left',
	transition: 'transform 180ms ease',
	'&:hover': { transform: 'translateY(-1px)' },
	'&:hover > span:first-of-type': {
		transform: 'rotate(-3deg) scale(1.04)',
		boxShadow: '0 18px 36px color-mix(in srgb, var(--store-primary) 32%, transparent)'
	},
	'&:focus-visible': {
		outline: '3px solid color-mix(in srgb, var(--store-accent) 34%, transparent)',
		outlineOffset: 4,
		borderRadius: 10
	},
	'& strong': {
		display: 'block',
		fontSize: 20,
		lineHeight: 1.1,
		color: 'var(--store-primary)',
		fontWeight: 950,
		letterSpacing: 0
	},
	'& small': {
		display: 'flex',
		alignItems: 'center',
		gap: 6,
		color: 'var(--store-muted)',
		fontSize: 12,
		marginTop: 4,
		'&::before': {
			content: '""',
			width: 6,
			height: 6,
			borderRadius: '50%',
			background: 'var(--store-success)',
			boxShadow: '0 0 0 3px color-mix(in srgb, var(--store-success) 14%, transparent)'
		}
	},
	'@media (max-width: 420px)': {
		gap: 10,
		'& strong': { fontSize: 17 },
		'& small': { fontSize: 10.5 }
	}
});

export const BrandMark = styled('span')({
	width: 52,
	height: 52,
	borderRadius: 8,
	display: 'grid',
	placeItems: 'center',
	background:
		'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 55%, var(--store-secondary)))',
	color: '#fff',
	fontWeight: 900,
	fontSize: 20,
	flex: '0 0 auto',
	boxShadow:
		'0 14px 30px color-mix(in srgb, var(--store-primary) 24%, transparent), inset 0 1px 0 rgba(255,255,255,0.32)',
	transition: 'width 220ms ease, height 220ms ease, transform 180ms ease, box-shadow 180ms ease',
	'[data-scrolled="true"] &': {
		width: 42,
		height: 42,
		fontSize: 18
	},
	'@media (max-width: 420px)': {
		width: 46,
		height: 46
	}
});

export const SearchWrap = styled('div')({
	minWidth: 0,
	'& .MuiOutlinedInput-root': {
		height: 50,
		paddingRight: 6,
		borderRadius: 12,
		background: '#fff',
		boxShadow: '0 14px 36px rgba(20,33,31,0.075)',
		transition: 'height 220ms ease, box-shadow 180ms ease'
	},
	'& .MuiOutlinedInput-notchedOutline': {
		borderColor: 'rgba(20, 33, 31, 0.14)'
	},
	'& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline': {
		borderColor: 'color-mix(in srgb, var(--store-primary) 45%, rgba(20, 33, 31, 0.14))'
	},
	'& .MuiOutlinedInput-root.Mui-focused': {
		boxShadow: '0 16px 38px rgba(20,33,31,0.1), 0 0 0 4px color-mix(in srgb, var(--store-primary) 8%, transparent)'
	},
	'[data-scrolled="true"] & .MuiOutlinedInput-root': {
		height: 42
	}
});

export const HeaderActions = styled('div')(({ theme }) => ({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'flex-end',
	gap: 8,
	'& .mobile-menu': {
		display: 'none'
	},
	[theme.breakpoints.down('md')]: {
		'& .mobile-menu': {
			display: 'inline-flex'
		}
	}
}));

export const HeaderActionButton = styled('button')<{ $primary?: boolean }>(({ theme, $primary }) => ({
	height: 42,
	display: 'inline-flex',
	alignItems: 'center',
	gap: 8,
	padding: '0 18px',
	border: $primary ? 'none' : '1px solid color-mix(in srgb, var(--store-primary) 14%, rgba(255, 255, 255, 0.76))',
	borderRadius: 999,
	background: $primary
		? 'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 72%, var(--store-secondary)))'
		: 'linear-gradient(135deg, rgba(255, 255, 255, 0.88), color-mix(in srgb, var(--store-background) 88%, #ffffff))',
	color: $primary ? '#fff' : 'color-mix(in srgb, var(--store-text) 82%, var(--store-primary))',
	fontWeight: 900,
	fontSize: 13,
	cursor: 'pointer',
	boxShadow: $primary
		? '0 10px 26px color-mix(in srgb, var(--store-primary) 32%, transparent), inset 0 1px 0 rgba(255,255,255,0.22)'
		: '0 10px 24px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.84)',
	transition: 'border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease',
	'&:hover': {
		transform: 'translateY(-2px)',
		boxShadow: $primary
			? '0 18px 36px color-mix(in srgb, var(--store-primary) 40%, transparent)'
			: '0 16px 30px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9)',
		...(!$primary && {
			borderColor: 'color-mix(in srgb, var(--store-primary) 34%, rgba(255, 255, 255, 0.84))',
			color: 'var(--store-primary)'
		})
	},
	'&:focus-visible': {
		outline: '3px solid color-mix(in srgb, var(--store-accent) 34%, transparent)',
		outlineOffset: 3
	},
	[theme.breakpoints.down('md')]: {
		display: 'none'
	}
}));

export const HeaderIconButton = styled(IconButton)({
	width: 44,
	height: 44,
	borderRadius: 999,
	border: '1px solid color-mix(in srgb, var(--store-primary) 14%, rgba(255, 255, 255, 0.76))',
	background:
		'linear-gradient(135deg, rgba(255, 255, 255, 0.88), color-mix(in srgb, var(--store-background) 88%, #ffffff))',
	color: 'color-mix(in srgb, var(--store-text) 78%, var(--store-primary))',
	boxShadow: '0 10px 24px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.84)',
	transition: 'border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease',
	'&[data-action="wishlist"]': {
		color: 'color-mix(in srgb, var(--store-danger) 82%, var(--store-text))'
	},
	'&[data-action="account"]': {
		color: 'var(--store-primary)'
	},
	'&[data-action="cart"]': {
		borderColor: 'transparent',
		background:
			'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 68%, var(--store-secondary)))',
		color: '#fff',
		boxShadow:
			'0 12px 28px color-mix(in srgb, var(--store-primary) 28%, transparent), inset 0 1px 0 rgba(255,255,255,0.24)'
	},
	'&:hover': {
		transform: 'translateY(-2px) scale(1.03)',
		borderColor: 'color-mix(in srgb, var(--store-primary) 34%, rgba(255, 255, 255, 0.84))',
		color: 'var(--store-primary)',
		background: '#fff',
		boxShadow: '0 16px 30px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9)'
	},
	'&[data-action="cart"]:hover': {
		color: '#fff',
		background:
			'linear-gradient(135deg, color-mix(in srgb, var(--store-primary) 88%, #fff), var(--store-secondary))',
		boxShadow: '0 18px 34px color-mix(in srgb, var(--store-primary) 38%, transparent)'
	},
	'&:focus-visible': {
		outline: '3px solid color-mix(in srgb, var(--store-accent) 34%, transparent)',
		outlineOffset: 3
	},
	'[data-scrolled="true"] &': {
		width: 40,
		height: 40
	}
});

export const NavPill = styled('button')<{ $accent?: boolean }>(({ $accent }) => ({
	height: 38,
	display: 'inline-flex',
	alignItems: 'center',
	justifyContent: 'center',
	gap: 6,
	padding: '0 17px',
	border: $accent
		? '1.5px solid color-mix(in srgb, var(--store-primary) 30%, transparent)'
		: '1px solid color-mix(in srgb, var(--store-primary) 14%, rgba(255, 255, 255, 0.7))',
	borderRadius: 999,
	background: $accent
		? 'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 68%, var(--store-secondary)))'
		: 'transparent',
	color: $accent ? '#fff' : 'color-mix(in srgb, var(--store-text) 82%, var(--store-primary))',
	fontWeight: 900,
	fontSize: 13,
	whiteSpace: 'nowrap',
	cursor: 'pointer',
	boxShadow: $accent ? '0 10px 22px color-mix(in srgb, var(--store-primary) 24%, transparent)' : 'none',
	transition:
		'background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease',
	'&:hover': {
		transform: 'translateY(-2px)',
		background:
			'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 72%, var(--store-secondary)))',
		borderColor: 'var(--store-primary)',
		color: '#fff',
		boxShadow: '0 14px 28px 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
	},
	'[data-scrolled="true"] &': {
		height: 34
	}
}));

export const NavMegaItem = styled('div')({
	position: 'relative',
	display: 'inline-flex',
	alignItems: 'center',
	flex: '0 0 auto',
	'&:hover > div, &:focus-within > div': {
		opacity: 1,
		visibility: 'visible',
		transform: 'translate(-50%, 0)',
		pointerEvents: 'auto'
	},
	'@media (max-width: 900px)': {
		position: 'static',
		'& > div': {
			display: 'none'
		}
	}
});

export const HeaderMegaMenu = styled('div')({
	position: 'absolute',
	top: 'calc(100% + 10px)',
	left: '50%',
	zIndex: 60,
	width: 'min(920px, calc(100vw - 32px))',
	display: 'grid',
	gap: 18,
	padding: 20,
	borderRadius: 12,
	background: 'rgba(255, 255, 255, 0.98)',
	border: '1px solid rgba(20, 33, 31, 0.1)',
	boxShadow: '0 32px 80px rgba(15, 23, 42, 0.2)',
	backdropFilter: 'blur(18px)',
	opacity: 0,
	visibility: 'hidden',
	pointerEvents: 'none',
	transform: 'translate(-50%, 8px)',
	transition: 'opacity 180ms ease, transform 180ms ease, visibility 180ms ease',
	'&::before': {
		content: '""',
		position: 'absolute',
		top: -10,
		left: 0,
		right: 0,
		height: 12
	}
});

export const HeaderMegaPromos = styled('div')({
	display: 'grid',
	gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
	gap: 14,
	'@media (max-width: 980px)': {
		gridTemplateColumns: 'repeat(2, minmax(0, 1fr))'
	}
});

export const HeaderMegaPromo = styled('button')({
	position: 'relative',
	minHeight: 96,
	display: 'grid',
	alignContent: 'end',
	justifyItems: 'start',
	gap: 3,
	padding: 12,
	border: 0,
	borderRadius: 12,
	overflow: 'hidden',
	background: 'var(--store-primary)',
	color: '#fff',
	textAlign: 'left',
	cursor: 'pointer',
	boxShadow: '0 12px 28px rgba(15, 23, 42, 0.1)',
	transition: 'transform 180ms ease, box-shadow 180ms ease',
	...bannerHoverEffectStyles,
	'& img': {
		position: 'absolute',
		zIndex: 0,
		inset: 0,
		width: '100%',
		height: '100%',
		objectFit: 'cover',
		opacity: 0.78,
		transition: 'transform 220ms ease, opacity 220ms ease'
	},
	'& span, & strong': {
		position: 'relative',
		zIndex: 3
	},
	'& span': {
		padding: '3px 8px',
		borderRadius: 999,
		background: 'color-mix(in srgb, var(--store-accent) 86%, rgba(255, 255, 255, 0.2))',
		fontSize: 10,
		fontWeight: 950,
		textTransform: 'uppercase'
	},
	'& strong': {
		maxWidth: '100%',
		fontSize: 14,
		fontWeight: 950,
		lineHeight: 1.08,
		textTransform: 'uppercase'
	},
	'&:hover': {
		transform: 'translateY(-3px)',
		boxShadow: '0 20px 40px rgba(15, 23, 42, 0.16)'
	},
	'&:hover img': {
		transform: 'scale(1.06)',
		opacity: 0.9
	}
});

export const HeaderMegaColumns = styled('div')({
	display: 'grid',
	gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
	gap: 22,
	'@media (max-width: 980px)': {
		gridTemplateColumns: 'repeat(2, minmax(0, 1fr))'
	}
});

export const HeaderMegaColumn = styled('div')({
	display: 'grid',
	alignContent: 'start',
	gap: 9,
	minWidth: 0,
	'& strong, & .mega-column-title': {
		paddingBottom: 8,
		borderBottom: '1px solid rgba(20, 33, 31, 0.12)',
		color: 'var(--store-text)',
		fontSize: 13,
		fontWeight: 950,
		textTransform: 'uppercase',
		cursor: 'pointer'
	},
	'& .mega-column-title': {
		justifySelf: 'start',
		maxWidth: '100%',
		border: 0,
		background: 'transparent',
		textAlign: 'left'
	},
	'& .mega-column-title:hover': {
		color: 'var(--store-primary)'
	},
	'& button:not(.mega-column-title)': {
		justifySelf: 'start',
		maxWidth: '100%',
		padding: 0,
		border: 0,
		background: 'transparent',
		color: 'var(--store-muted)',
		fontSize: 13,
		fontWeight: 800,
		textAlign: 'left',
		lineHeight: 1.35,
		cursor: 'pointer'
	},
	'& button:not(.mega-column-title):hover': {
		color: 'var(--store-primary)'
	}
});

export const Main = styled('div')({
	width: 'min(1440px, 100%)',
	margin: '0 auto',
	padding: '24px clamp(14px, 4vw, 56px) 56px',
	'[data-section-background="alternating"] &': {
		background:
			'linear-gradient(180deg, var(--store-background) 0 640px, color-mix(in srgb, var(--store-primary) 3%, var(--store-background)) 640px 100%)'
	}
});

export const HomeShowcase = styled('section')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: '1fr',
	gap: 0,
	alignItems: 'stretch',
	marginBottom: 22,
	borderRadius: 18,
	overflow: 'hidden',
	background: 'var(--store-surface)',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	boxShadow: '0 22px 60px rgba(15, 23, 42, 0.08)',
	[theme.breakpoints.down('lg')]: {
		gridTemplateColumns: '1fr',
		overflow: 'visible',
		background: 'transparent',
		border: 0,
		boxShadow: 'none',
		gap: 14
	}
}));

export const HomeMarketArea = styled('div')({
	minWidth: 0,
	display: 'grid',
	gridTemplateRows: 'minmax(340px, 1fr)'
});

export const HeroSection = styled('section')(({ theme }) => ({
	minWidth: 0,
	padding: 20,
	[theme.breakpoints.down('lg')]: {
		padding: 0
	}
}));

export const HeroActions = styled('div')({
	display: 'flex',
	flexWrap: 'wrap',
	gap: 10,
	'& .MuiButton-root': {
		paddingInline: 18
	},
	'& .MuiButton-outlined': {
		borderColor: 'rgba(255, 255, 255, 0.62)',
		color: '#fff',
		background: 'rgba(255, 255, 255, 0.08)',
		backdropFilter: 'blur(10px)'
	},
	'& .MuiButton-outlined:hover': {
		borderColor: '#fff',
		background: 'rgba(255, 255, 255, 0.16)'
	}
});

export const HeroImage = styled('div')({
	position: 'relative',
	minHeight: 430,
	borderRadius: 16,
	overflow: 'hidden',
	background: 'var(--store-text)',
	...bannerHoverEffectStyles,
	'& img': {
		position: 'relative',
		zIndex: 0,
		width: '100%',
		height: '100%',
		objectFit: 'cover',
		display: 'block',
		opacity: 0.82,
		transition: 'transform 520ms ease'
	},
	'&:hover img': {
		transform: 'scale(1.03)'
	}
});

export const HeroOverlay = styled('div')(({ theme }) => ({
	position: 'absolute',
	top: '50%',
	right: 'clamp(18px, 5vw, 64px)',
	zIndex: 3,
	width: 'min(520px, 52%)',
	display: 'grid',
	justifyItems: 'start',
	gap: 12,
	transform: 'translateY(-50%)',
	color: '#fff',
	'& h1': {
		fontWeight: 950,
		lineHeight: 1,
		letterSpacing: 0,
		textShadow: '0 18px 42px rgba(0, 0, 0, 0.3)'
	},
	'& p': {
		margin: 0,
		color: 'rgba(255, 255, 255, 0.86)',
		fontWeight: 700
	},
	[theme.breakpoints.down('md')]: {
		left: 18,
		right: 18,
		width: 'auto',
		'& h1': {
			fontSize: 34
		}
	}
}));

export const HeroDeal = styled('div')({
	position: 'absolute',
	left: 18,
	bottom: 18,
	zIndex: 3,
	display: 'grid',
	gap: 2,
	padding: '14px 16px',
	borderRadius: 8,
	background: '#fff',
	boxShadow: '0 18px 50px rgba(0, 0, 0, 0.16)',
	'& strong': {
		fontSize: 22,
		color: 'var(--store-accent)'
	},
	'& span': {
		color: 'var(--store-muted)',
		fontSize: 13,
		fontWeight: 700
	}
});