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

export const ProductDetailPage = styled('section')({
	display: 'grid',
	gap: 18
});

export const ProductBreadcrumb = styled('nav')({
	display: 'flex',
	alignItems: 'center',
	gap: 8,
	minHeight: 38,
	paddingBottom: 12,
	borderBottom: '1px solid rgba(20, 33, 31, 0.1)',
	color: 'var(--store-muted)',
	fontSize: 13,
	fontWeight: 850,
	'& svg': {
		fontSize: 13
	},
	'& button': {
		display: 'inline-flex',
		alignItems: 'center',
		gap: 6,
		maxWidth: 220,
		padding: 0,
		border: 0,
		background: 'transparent',
		color: 'var(--store-muted)',
		font: 'inherit',
		whiteSpace: 'nowrap',
		overflow: 'hidden',
		textOverflow: 'ellipsis',
		cursor: 'pointer'
	},
	'& button:hover': {
		color: 'var(--store-primary)'
	},
	'& strong': {
		color: 'var(--store-danger)',
		whiteSpace: 'nowrap',
		overflow: 'hidden',
		textOverflow: 'ellipsis'
	},
	'@media (max-width: 640px)': {
		overflowX: 'auto',
		paddingBottom: 10
	}
});

export const ProductDetailTop = styled('div')(({ theme }) => ({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'space-between',
	gap: 12,
	'& span': {
		color: 'var(--store-muted)',
		fontSize: 13,
		fontWeight: 900
	},
	[theme.breakpoints.down('sm')]: {
		alignItems: 'flex-start',
		flexDirection: 'column'
	}
}));

export const ProductDetailShell = styled('section')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: 'minmax(0, 1.05fr) minmax(360px, 0.85fr)',
	gap: 28,
	padding: 18,
	borderRadius: 12,
	background: 'var(--store-surface)',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	boxShadow: '0 14px 34px rgba(15, 23, 42, 0.06)',
	[theme.breakpoints.down('md')]: {
		gridTemplateColumns: '1fr'
	},
	[theme.breakpoints.down('sm')]: {
		padding: 12
	}
}));

export const ProductGallery = styled('div')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: '72px minmax(0, 1fr)',
	gap: 14,
	minWidth: 0,
	alignSelf: 'start',
	[theme.breakpoints.down('sm')]: {
		gridTemplateColumns: '1fr',
		'& > div:first-of-type': {
			order: 2
		}
	}
}));

export const ProductThumbs = styled('div')(({ theme }) => ({
	display: 'grid',
	alignContent: 'start',
	gap: 10,
	'& button': {
		width: 68,
		height: 68,
		padding: 0,
		border: '2px solid transparent',
		borderRadius: 12,
		background: '#fff',
		overflow: 'hidden',
		cursor: 'pointer',
		boxShadow: '0 10px 22px rgba(15, 23, 42, 0.08)',
		transition: 'transform 160ms ease, border-color 160ms ease'
	},
	'& button:first-of-type': {
		borderColor: 'var(--store-accent)'
	},
	'& button:hover': {
		transform: 'translateY(-2px)',
		borderColor: 'var(--store-primary)'
	},
	'& img': {
		width: '100%',
		height: '100%',
		objectFit: 'cover',
		display: 'block'
	},
	[theme.breakpoints.down('sm')]: {
		display: 'flex',
		overflowX: 'auto',
		paddingBottom: 4
	}
}));

export const ProductMainImage = styled('div')({
	height: 460,
	borderRadius: 10,
	background: 'linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--store-background) 86%, #ffffff))',
	display: 'grid',
	placeItems: 'center',
	overflow: 'hidden',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	...bannerHoverEffectStyles,
	'& img': {
		width: '100%',
		height: '100%',
		objectFit: 'contain',
		display: 'block'
	},
	'@media (max-width: 900px)': {
		minHeight: 420
	},
	'@media (max-width: 640px)': {
		minHeight: 300
	}
});

export const ProductDetailInfo = styled('div')({
	display: 'grid',
	alignContent: 'start',
	gap: 14,
	padding: '8px 4px',
	'& h1': {
		fontWeight: 950,
		lineHeight: 1.08,
		letterSpacing: 0
	}
});

export const ProductDetailMeta = styled('div')({
	display: 'grid',
	gap: 2,
	color: 'var(--store-muted)',
	fontSize: 13,
	fontWeight: 800,
	'& strong': {
		color: 'var(--store-text)',
		fontSize: 14,
		fontWeight: 950,
		textTransform: 'uppercase'
	}
});

export const ProductDetailRating = styled('div')({
	display: 'flex',
	alignItems: 'center',
	gap: 6,
	color: 'var(--store-accent)',
	fontWeight: 950,
	'& span': {
		marginLeft: 8,
		color: 'var(--store-muted)',
		fontSize: 13
	}
});

export const ProductDetailPrice = styled('div')({
	display: 'flex',
	alignItems: 'baseline',
	gap: 10,
	flexWrap: 'wrap',
	'& strong': {
		color: 'var(--store-price-color)',
		fontSize: 'calc(var(--store-price-size) * 1.55)',
		fontWeight: 950
	},
	'& del': {
		color: 'var(--store-muted)',
		fontSize: 14
	}
});

export const ProductAvailability = styled('div')({
	display: 'flex',
	alignItems: 'center',
	gap: 7,
	color: 'var(--store-muted)',
	fontSize: 13,
	fontWeight: 850,
	'& svg': {
		color: 'var(--store-secondary)'
	},
	'& strong': {
		color: 'var(--store-success)',
		fontWeight: 950
	}
});

export const ProductInstallments = styled('div')({
	display: 'grid',
	gap: 8,
	margin: '4px 0',
	padding: '12px 14px',
	borderRadius: 10,
	border: '1px dashed color-mix(in srgb, var(--store-primary) 40%, transparent)',
	background: 'color-mix(in srgb, var(--store-primary) 6%, transparent)'
});

export const InstallmentsTitle = styled('p')({
	margin: 0,
	fontSize: 12,
	fontWeight: 800,
	letterSpacing: '0.06em',
	textTransform: 'uppercase',
	color: 'var(--store-muted)'
});

/** Fila del precio de contado — es la opción por defecto, siempre presente. */
export const InstallmentOption = styled('button', {
	shouldForwardProp: (prop) => prop !== '$selected'
})<{ $selected?: boolean }>(({ $selected }) => ({
	display: 'flex',
	alignItems: 'center',
	gap: 10,
	width: '100%',
	padding: '9px 11px',
	borderRadius: 9,
	cursor: 'pointer',
	textAlign: 'left',
	font: 'inherit',
	transition: 'border-color 0.15s, background 0.15s',
	border: $selected
		? '2px solid var(--store-primary)'
		: '1px solid color-mix(in srgb, var(--store-text) 14%, transparent)',
	// Compensa el borde extra del estado seleccionado para que no salte el layout.
	margin: $selected ? 0 : 1,
	background: $selected
		? 'color-mix(in srgb, var(--store-primary) 10%, #ffffff)'
		: 'color-mix(in srgb, #ffffff 70%, transparent)',
	'&:hover': {
		borderColor: 'var(--store-primary)'
	}
}));

export const InstallmentRadio = styled('span', {
	shouldForwardProp: (prop) => prop !== '$selected'
})<{ $selected?: boolean }>(({ $selected }) => ({
	flexShrink: 0,
	width: 15,
	height: 15,
	borderRadius: '50%',
	border: `2px solid ${$selected ? 'var(--store-primary)' : 'color-mix(in srgb, var(--store-text) 30%, transparent)'}`,
	background: $selected
		? 'radial-gradient(circle, var(--store-primary) 0 4px, transparent 4px)'
		: 'transparent'
}));

export const InstallmentBody = styled('span')({
	display: 'grid',
	gap: 2,
	flex: 1,
	minWidth: 0
});

export const InstallmentMain = styled('span')({
	display: 'flex',
	alignItems: 'baseline',
	justifyContent: 'space-between',
	gap: 10,
	fontSize: 13.5,
	color: 'var(--store-text)',
	'& strong': { fontWeight: 900 }
});

export const InstallmentSub = styled('span')({
	display: 'flex',
	alignItems: 'center',
	flexWrap: 'wrap',
	gap: 6,
	fontSize: 11.5,
	color: 'var(--store-muted)'
});

export const InstallmentTag = styled('span', {
	shouldForwardProp: (prop) => prop !== '$tone'
})<{ $tone?: 'free' | 'discount' | 'interest' }>(({ $tone }) => {
	const tone =
		$tone === 'free'
			? { bg: 'color-mix(in srgb, #16a34a 14%, transparent)', fg: '#15803d' }
			: $tone === 'discount'
				? { bg: 'color-mix(in srgb, var(--store-primary) 16%, transparent)', fg: 'var(--store-primary)' }
				: { bg: 'color-mix(in srgb, var(--store-text) 9%, transparent)', fg: 'var(--store-muted)' };
	return {
		padding: '1px 7px',
		borderRadius: 999,
		fontSize: 10.5,
		fontWeight: 800,
		letterSpacing: '0.02em',
		background: tone.bg,
		color: tone.fg
	};
});

export const ProductFactBox = styled('ul')({
	display: 'grid',
	gap: 6,
	margin: '8px 0',
	padding: '14px 16px',
	borderLeft: '4px solid var(--store-danger)',
	background: 'color-mix(in srgb, var(--store-background) 54%, #ffffff)',
	listStyle: 'none',
	'& li': {
		display: 'flex',
		alignItems: 'center',
		gap: 5,
		color: 'var(--store-muted)',
		fontSize: 13
	},
	'& strong': {
		color: 'var(--store-text)',
		fontWeight: 950
	}
});

export const ProductOptions = styled('div')({
	display: 'grid',
	gap: 8,
	paddingTop: 8,
	borderTop: '1px solid rgba(20, 33, 31, 0.1)',
	'& > strong': {
		color: 'var(--store-text)',
		fontSize: 15,
		fontWeight: 950
	},
	'& > span': {
		color: 'var(--store-muted)',
		fontSize: 13,
		fontWeight: 900
	}
});

export const ProductSwatches = styled('div')({
	display: 'flex',
	alignItems: 'center',
	gap: 7,
	'& button': {
		width: 24,
		height: 24,
		padding: 0,
		border: '2px solid #fff',
		outline: '1px solid rgba(20, 33, 31, 0.2)',
		cursor: 'pointer'
	},
	'& button[data-active="true"]': {
		outlineColor: 'var(--store-secondary)',
		boxShadow: '0 0 0 3px color-mix(in srgb, var(--store-secondary) 18%, transparent)'
	}
});

/**
 * Fila de valores de un atributo de variante cuando no son colores (talle,
 * material…). Los colores usan `ProductSwatches`, que ya los dibuja redondos.
 */
export const VariantChoiceRow = styled('div')({
	display: 'flex',
	alignItems: 'center',
	flexWrap: 'wrap',
	gap: 7
});

/**
 * Chip de un valor de atributo. Sigue el mismo lenguaje visual que
 * `InstallmentOption` (borde de 2px al seleccionar, compensado con margin para
 * que no salte el layout). `$unavailable` = no hay ninguna variante con stock
 * para esa combinación.
 */
export const VariantChoice = styled('button', {
	shouldForwardProp: (prop) => prop !== '$selected' && prop !== '$unavailable'
})<{ $selected?: boolean; $unavailable?: boolean }>(({ $selected, $unavailable }) => ({
	minWidth: 42,
	padding: '6px 12px',
	borderRadius: 8,
	cursor: $unavailable ? 'not-allowed' : 'pointer',
	font: 'inherit',
	fontSize: 13,
	fontWeight: 800,
	lineHeight: 1.2,
	transition: 'border-color 0.15s, background 0.15s',
	color: $selected ? 'var(--store-primary)' : 'var(--store-text)',
	border: $selected
		? '2px solid var(--store-primary)'
		: '1px solid color-mix(in srgb, var(--store-text) 16%, transparent)',
	margin: $selected ? 0 : 1,
	background: $selected ? 'color-mix(in srgb, var(--store-primary) 10%, #ffffff)' : '#ffffff',
	opacity: $unavailable ? 0.45 : 1,
	textDecoration: $unavailable ? 'line-through' : 'none',
	'&:hover': {
		borderColor: 'var(--store-primary)'
	}
}));

export const ProductDetailDescription = styled('p')({
	margin: 0,
	color: 'var(--store-muted)',
	fontSize: 15,
	lineHeight: 1.55
});

export const QuantityField = styled('div')({
	display: 'grid',
	gap: 6,
	width: 'max-content',
	'& > span': {
		color: 'var(--store-muted)',
		fontSize: 12,
		fontWeight: 900
	}
});

export const QuantityControl = styled('div')({
	display: 'inline-flex',
	alignItems: 'center',
	gap: 8,
	minHeight: 42,
	padding: 5,
	borderRadius: 999,
	background:
		'linear-gradient(135deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--store-background) 88%, #ffffff))',
	border: '1px solid color-mix(in srgb, var(--store-primary) 14%, rgba(255, 255, 255, 0.76))',
	boxShadow: '0 10px 22px rgba(15, 23, 42, 0.07)',
	'& strong': {
		minWidth: 28,
		textAlign: 'center',
		color: 'var(--store-text)',
		fontSize: 14,
		fontWeight: 950
	},
	'& .MuiIconButton-root': {
		width: 32,
		height: 32,
		borderRadius: 999,
		color: 'var(--store-primary)'
	},
	'& .MuiIconButton-root:hover': {
		background: 'var(--store-primary)',
		color: '#fff'
	}
});

export const ProductSpecs = styled('ul')({
	display: 'grid',
	gap: 8,
	margin: 0,
	padding: 0,
	listStyle: 'none',
	'& li': {
		display: 'grid',
		gridTemplateColumns: '120px minmax(0, 1fr)',
		gap: 10,
		padding: '10px 0',
		borderBottom: '1px solid rgba(20, 33, 31, 0.08)'
	},
	'& strong': {
		color: 'var(--store-text)',
		fontSize: 13,
		fontWeight: 950
	},
	'& span': {
		color: 'var(--store-muted)',
		fontSize: 13,
		fontWeight: 800
	},
	'@media (max-width: 520px)': {
		'& li': {
			gridTemplateColumns: '1fr',
			gap: 2
		}
	}
});

export const ProductDetailSectionBlock = styled('section')({
	display: 'grid',
	gap: 14,
	padding: 20,
	borderRadius: 18,
	background: 'var(--store-surface)',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	boxShadow: '0 14px 36px rgba(15, 23, 42, 0.06)'
});

export const ContentPageView = styled('section')({
	display: 'grid',
	gap: 18
});

export const ContentHero = styled('section')({
	display: 'grid',
	justifyItems: 'start',
	gap: 12,
	padding: '34px clamp(18px, 4vw, 44px)',
	borderRadius: 18,
	background: 'var(--store-surface)',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	boxShadow: '0 18px 48px rgba(15, 23, 42, 0.08)',
	'& h1': {
		fontWeight: 950,
		lineHeight: 1.05,
		letterSpacing: 0
	},
	'& p': {
		maxWidth: 760,
		margin: 0,
		color: 'var(--store-muted)',
		fontSize: 16,
		lineHeight: 1.55
	}
});

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

export const ContentBlock = styled(ProductDetailSectionBlock)({
	gap: 12
});

export const SectionTitle = styled('h2')({
	margin: 0,
	paddingBottom: 10,
	borderBottom: '3px solid var(--store-accent)',
	color: 'var(--store-text)',
	fontSize: 20,
	fontWeight: 950,
	letterSpacing: 0
});

export const RichDescription = styled('p')({
	margin: 0,
	color: 'var(--store-text)',
	fontSize: 15,
	lineHeight: 1.7
});

export const SpecTable = styled('ul')({
	width: 'min(560px, 100%)',
	margin: '0 auto',
	padding: 0,
	listStyle: 'none',
	borderTop: '1px solid rgba(20, 33, 31, 0.14)',
	'& li': {
		display: 'grid',
		gridTemplateColumns: 'minmax(160px, 0.8fr) minmax(0, 1fr)',
		borderBottom: '1px solid rgba(20, 33, 31, 0.14)'
	},
	'& strong, & span': {
		padding: '12px 14px',
		fontSize: 14
	},
	'& strong': {
		textAlign: 'right',
		color: 'var(--store-text)',
		fontWeight: 950,
		borderRight: '1px solid rgba(20, 33, 31, 0.14)'
	},
	'& span': {
		color: 'var(--store-text)'
	},
	'@media (max-width: 560px)': {
		'& li': {
			gridTemplateColumns: '1fr'
		},
		'& strong': {
			textAlign: 'left',
			borderRight: 0,
			paddingBottom: 2
		},
		'& span': {
			paddingTop: 2
		}
	}
});

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

export const ProductDetailLower = styled('section')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: '270px minmax(0, 1fr)',
	gap: 28,
	alignItems: 'start',
	'&[data-has-sidebar="false"]': {
		gridTemplateColumns: '1fr'
	},
	[theme.breakpoints.down('md')]: {
		gridTemplateColumns: '1fr'
	}
}));

export const ProductRelatedSidebar = styled('aside')({
	background: 'var(--store-surface)',
	border: '1px solid rgba(20, 33, 31, 0.1)',
	borderRadius: 12,
	overflow: 'hidden',
	boxShadow: '0 12px 30px rgba(15, 23, 42, 0.05)'
});

export const ProductSideTitle = styled('h2')({
	margin: 0,
	padding: '13px 16px',
	background:
		'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 70%, var(--store-secondary)))',
	color: '#fff',
	fontSize: 15,
	fontWeight: 950,
	textTransform: 'uppercase'
});

export const RelatedMiniList = styled('div')({
	display: 'grid',
	padding: '10px 16px'
});

export const RelatedMiniThumb = styled('div')({
	width: 60,
	height: 60,
	borderRadius: 10,
	border: '1px solid rgba(20, 33, 31, 0.08)',
	overflow: 'hidden',
	flexShrink: 0,
	...bannerHoverEffectStyles,
	'& img': {
		width: '100%',
		height: '100%',
		objectFit: 'cover',
		display: 'block'
	}
});

export const RelatedMiniCard = styled('button')({
	display: 'grid',
	gridTemplateColumns: '64px minmax(0, 1fr)',
	gap: 12,
	alignItems: 'center',
	padding: '14px 0',
	border: 0,
	borderBottom: '1px solid rgba(20, 33, 31, 0.08)',
	background: 'transparent',
	textAlign: 'left',
	cursor: 'pointer',
	'&:last-child': {
		borderBottom: 0
	},
	'& div': {
		minWidth: 0,
		display: 'grid',
		gap: 4
	},
	'& strong': {
		color: 'var(--store-text)',
		fontSize: 13,
		fontWeight: 950,
		lineHeight: 1.25
	},
	'& span': {
		color: 'var(--store-price-color)',
		fontSize: 'var(--store-price-size)',
		fontWeight: 950
	},
	'&:hover strong': {
		color: 'var(--store-primary)'
	}
});

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

export const ProductTabBar = styled('div')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: 'repeat(4, minmax(120px, 1fr))',
	alignItems: 'end',
	overflowX: 'auto',
	'& button': {
		minHeight: 42,
		padding: '0 18px',
		border: '1px solid rgba(20, 33, 31, 0.12)',
		borderBottom: 0,
		background: '#fff',
		color: 'var(--store-text)',
		fontSize: 14,
		fontWeight: 950,
		textTransform: 'uppercase',
		cursor: 'pointer'
	},
	'& button[data-active="true"]': {
		background:
			'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 72%, var(--store-secondary)))',
		borderColor: 'var(--store-primary)',
		color: '#fff'
	},
	[theme.breakpoints.down('sm')]: {
		gridTemplateColumns: 'repeat(4, minmax(150px, 1fr))'
	}
}));

export const ProductTabPanel = styled('section')({
	display: 'grid',
	gap: 18,
	padding: 20,
	background: 'var(--store-surface)',
	border: '1px solid rgba(20, 33, 31, 0.12)',
	boxShadow: '0 12px 30px rgba(15, 23, 42, 0.05)'
});

export const ProductTextBlock = styled('div')({
	display: 'grid',
	gap: 8,
	'& strong': {
		color: 'var(--store-text)',
		fontWeight: 950
	},
	'& p': {
		margin: 0,
		color: 'var(--store-muted)',
		fontSize: 14,
		lineHeight: 1.65
	}
});

export const ReviewCard = styled('article')({
	display: 'grid',
	gap: 10,
	padding: 16,
	borderRadius: 16,
	background:
		'linear-gradient(135deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--store-background) 90%, #ffffff))',
	border: '1px solid color-mix(in srgb, var(--store-primary) 12%, rgba(255, 255, 255, 0.78))',
	'& > div:first-of-type': {
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'space-between',
		gap: 10
	},
	'& strong': {
		color: 'var(--store-text)',
		fontWeight: 950
	},
	'& span': {
		color: 'var(--store-muted)',
		fontSize: 12,
		fontWeight: 800
	},
	'& p': {
		margin: 0,
		color: 'var(--store-muted)',
		fontSize: 14,
		lineHeight: 1.5
	}
});

export const ReviewRating = styled('div')({
	display: 'inline-flex',
	alignItems: 'center',
	gap: 4,
	width: 'max-content',
	color: 'var(--store-accent)',
	fontWeight: 950
});

export const ProductDetailActions = styled('div')(({ theme }) => ({
	display: 'flex',
	alignItems: 'center',
	gap: 12,
	marginTop: 8,
	'& .MuiButton-root': {
		minHeight: 48,
		paddingInline: 20
	},
	[theme.breakpoints.down('sm')]: {
		alignItems: 'stretch',
		flexDirection: 'column',
		'& .MuiButton-root': {
			width: '100%'
		}
	}
}));

export const QuickViewContent = styled(DialogContent)(({ theme }) => ({
	position: 'relative',
	padding: 26,
	[theme.breakpoints.down('sm')]: {
		padding: 16
	}
}));

export const QuickViewClose = styled(IconButton)({
	position: 'absolute',
	top: 10,
	right: 10,
	zIndex: 2,
	color: 'var(--store-muted)'
});

export const QuickViewHeader = styled('header')({
	paddingRight: 44,
	paddingBottom: 16,
	marginBottom: 18,
	borderBottom: '1px solid rgba(20, 33, 31, 0.1)',
	'& h2': {
		fontWeight: 950,
		letterSpacing: 0
	},
	'& strong': {
		display: 'block',
		marginTop: 10,
		fontSize: 13,
		fontWeight: 950,
		textTransform: 'uppercase'
	},
	'& span': {
		color: 'var(--store-muted)',
		fontSize: 13,
		fontWeight: 800
	}
});

export const QuickViewGrid = styled('div')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: 'minmax(0, 1fr) minmax(320px, 0.78fr)',
	gap: 28,
	[theme.breakpoints.down('md')]: {
		gridTemplateColumns: '1fr'
	}
}));

export const QuickViewImageArea = styled('div')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: '72px minmax(0, 1fr)',
	gap: 14,
	'&[data-has-thumbnails="false"]': {
		gridTemplateColumns: 'minmax(0, 1fr)'
	},
	[theme.breakpoints.down('sm')]: {
		gridTemplateColumns: '1fr'
	}
}));

export const QuickViewMainImage = styled(ProductMainImage)({
	minHeight: 430,
	'@media (max-width: 640px)': {
		minHeight: 280
	}
});

export const QuickViewInfo = styled('div')({
	display: 'grid',
	alignContent: 'start',
	gap: 14
});

export const QuickViewActions = styled('div')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: '1fr 1fr',
	gap: 12,
	marginTop: 8,
	[theme.breakpoints.down('sm')]: {
		gridTemplateColumns: '1fr'
	}
}));

export const ProductCategoryLink = styled('div')({
	marginTop: 8,
	paddingTop: 14,
	borderTop: '1px solid rgba(20, 33, 31, 0.1)',
	color: 'var(--store-muted)',
	fontSize: 13,
	fontWeight: 900
});

/**
 * Textarea propio para el comentario de la reseña.
 *
 * Mismo motivo que `CheckoutNotesField`: el `<TextField multiline>` de MUI fija
 * `height: 1.4375em` en `.MuiInputBase-input` y su override `height: auto` para
 * multilínea no gana contra las capas de Tailwind, así que la caja queda de una
 * línea y el texto se dibuja fuera. Se usa un textarea nativo.
 */
export const ReviewCommentField = styled('label')({
	display: 'grid',
	gap: 6,
	'& > span': {
		fontSize: 13,
		fontWeight: 'var(--store-label-weight)' as unknown as number,
		color: 'var(--store-muted)'
	},
	'& textarea': {
		width: '100%',
		minHeight: 78,
		padding: '10px 12px',
		border: '1px solid rgba(20, 33, 31, 0.23)',
		borderRadius: 12,
		background: '#fff',
		color: 'var(--store-text)',
		fontSize: 14,
		fontFamily: 'inherit',
		lineHeight: 1.45,
		resize: 'vertical',
		outline: 0,
		transition: 'border-color 160ms ease, box-shadow 160ms ease'
	},
	'& textarea:focus': {
		borderColor: 'var(--store-primary)',
		boxShadow: '0 0 0 3px color-mix(in srgb, var(--store-primary) 12%, transparent)'
	},
	'& textarea:disabled': {
		background: 'rgba(20, 33, 31, 0.04)',
		cursor: 'not-allowed'
	}
});