/* Theme layer on top of app.css: Windows 95. */

/* ================================================================== Windows 95 */

:root[data-theme="win95"] {
	--font: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, "Segoe UI", sans-serif;
	--font-display: var(--font);
	--radius: 0;
	--radius-sm: 0;
	--radius-lg: 0;
	--bg: #008080;
	--surface: #c0c0c0;
	--surface-2: #d4d0c8;
	--surface-3: #a8a8a8;
	--text: #000000;
	--muted: #3a3a3a;
	--border: #808080;
	--brand: #000080;
	--brand-strong: #000060;
	--brand-soft: #c0c0c0;
	--on-brand: #ffffff;
	--accent: #c0c0c0;
	--accent-strong: #c0c0c0;
	--on-accent: #000000;
	--price: #a00000;
	--sale-bg: #ffffe1;
	--ok: #006400;
	--warn: #806000;
	--danger: #a00000;
	--topbar-bg: #c0c0c0;
	--topbar-text: #000000;
	--shadow: none;
	--shadow-lg: none;
	--hero-bg: transparent;
	--raised: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
	--sunken: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
	color-scheme: light;
}

[data-theme="win95"] body {
	font-size: 14px;
	padding-bottom: 44px;
}
[data-theme="win95"] a {
	color: #0000ee;
	text-decoration: underline;
}
[data-theme="win95"] a:visited {
	color: #551a8b;
}
[data-theme="win95"] h1,
[data-theme="win95"] h2,
[data-theme="win95"] h3 {
	font-weight: 700;
	letter-spacing: 0;
}
[data-theme="win95"] .page > h1,
[data-theme="win95"] .page-head h1,
[data-theme="win95"] .page-head p,
[data-theme="win95"] .section-head,
[data-theme="win95"] .section-head .muted,
[data-theme="win95"] .breadcrumbs,
[data-theme="win95"] .breadcrumbs a,
[data-theme="win95"] .toolbar > p {
	color: #ffffff;
	text-shadow: 1px 1px 0 #000;
}
[data-theme="win95"] .link-more {
	color: #ffff00;
}
[data-theme="win95"] .window,
[data-theme="win95"] .chip,
[data-theme="win95"] .pay-method,
[data-theme="win95"] .variant {
	background: #c0c0c0;
	border: 0;
	border-radius: 0;
	box-shadow: var(--raised);
}
[data-theme="win95"] .titlebar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 3px 3px 0;
	padding: 2px 3px 2px 6px;
	background: linear-gradient(90deg, #000080, #1084d0);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
}
[data-theme="win95"] .titlebar__buttons {
	display: flex;
	gap: 2px;
}
[data-theme="win95"] .titlebar__buttons i {
	display: grid;
	place-items: center;
	width: 16px;
	height: 14px;
	background: #c0c0c0;
	color: #000;
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	box-shadow: var(--raised);
}
[data-theme="win95"] .btn,
[data-theme="win95"] .icon-btn,
[data-theme="win95"] .search button,
[data-theme="win95"] .copy,
[data-theme="win95"] .stepper button,
[data-theme="win95"] .gallery__thumbs button,
[data-theme="win95"] .theme-menu button,
[data-theme="win95"] .start-btn,
[data-theme="win95"] .dock__item {
	background: #c0c0c0;
	color: #000;
	border: 0;
	border-radius: 0;
	box-shadow: var(--raised);
	text-decoration: none;
}
[data-theme="win95"] .btn:active:not(:disabled),
[data-theme="win95"] .icon-btn:active,
[data-theme="win95"] .dock__item[aria-current="page"],
[data-theme="win95"] .start-btn[aria-expanded="true"],
[data-theme="win95"] .chip[aria-pressed="true"],
[data-theme="win95"] .variant:has(input:checked),
[data-theme="win95"] .pay-method:has(input:checked) {
	box-shadow: var(--sunken);
	transform: none;
	background: #c0c0c0;
	color: #000;
}
[data-theme="win95"] .btn--primary,
[data-theme="win95"] .btn--accent {
	font-weight: 700;
	outline: 1px solid #000;
	outline-offset: -1px;
}
[data-theme="win95"] .btn:focus-visible {
	outline: 1px dotted #000;
	outline-offset: -5px;
}
[data-theme="win95"] .badge {
	background: #ff0000;
	color: #fff;
	border-radius: 0;
}
[data-theme="win95"] .tag {
	border-radius: 0;
	background: #ffffe1;
	border: 1px solid #000;
	color: #000;
}
[data-theme="win95"] .field input,
[data-theme="win95"] .field select,
[data-theme="win95"] .field textarea,
[data-theme="win95"] .search,
[data-theme="win95"] .stepper,
[data-theme="win95"] .table input,
[data-theme="win95"] .toolbar input,
[data-theme="win95"] .ship-meter__bar,
[data-theme="win95"] .gallery__main,
[data-theme="win95"] .product-card__media,
[data-theme="win95"] .vietqr__code svg {
	background: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: var(--sunken);
}
[data-theme="win95"] .search:focus-within {
	box-shadow: var(--sunken);
}
[data-theme="win95"] .ship-meter__bar span {
	background: repeating-linear-gradient(90deg, #000080 0 10px, transparent 10px 12px);
}
[data-theme="win95"] .topbar {
	border-bottom: 1px solid #808080;
}
[data-theme="win95"] .site-header {
	margin: 6px;
	top: 6px;
}
[data-theme="win95"] .catnav {
	border-top: 1px solid #808080;
}
[data-theme="win95"] .catnav a {
	color: #000;
	text-decoration: none;
}
[data-theme="win95"] .catnav a[aria-current="page"],
[data-theme="win95"] .catnav a:hover {
	background: #000080;
	color: #fff;
	border-bottom-color: transparent;
}
[data-theme="win95"] .logo img,
[data-theme="win95"] .cat-tile img,
[data-theme="win95"] .variant img,
[data-theme="win95"] .line img {
	border-radius: 0;
	box-shadow: none;
}
[data-theme="win95"] .logo__text strong {
	color: #000080;
}
[data-theme="win95"] .hero {
	padding-block: 20px;
}
[data-theme="win95"] .hero__copy {
	background: #c0c0c0;
	box-shadow: var(--raised);
	padding: 18px;
}
[data-theme="win95"] .hero h1 em {
	background: none;
	color: #000080;
}
[data-theme="win95"] .hero__tile {
	border-radius: 0;
	transform: none !important;
	padding: 4px;
}
[data-theme="win95"] .eyebrow--pill {
	border-radius: 0;
	background: #000080;
	color: #fff;
}
[data-theme="win95"] .section--band {
	background: transparent;
}
[data-theme="win95"] .perks__icon {
	border-radius: 0;
	background: #000080;
	color: #fff;
}
[data-theme="win95"] .product-card:hover,
[data-theme="win95"] .cat-tile:hover {
	transform: none;
}
[data-theme="win95"] .product-card__media {
	margin: 4px;
}
[data-theme="win95"] .product-card__views,
[data-theme="win95"] .video-card__views {
	border-radius: 0;
	background: #000080;
}
[data-theme="win95"] .video-card__btn {
	border-radius: 0;
	background: #c0c0c0;
	color: #000;
	box-shadow: var(--raised);
}
[data-theme="win95"] .price--lg {
	font-family: var(--font);
}
[data-theme="win95"] .buybox {
	background: #c0c0c0;
	box-shadow: var(--raised);
	padding: 14px;
}
[data-theme="win95"] .steps li::before {
	border-radius: 0;
}
[data-theme="win95"] .drawer__panel {
	top: 8px;
	right: 8px;
	bottom: 52px;
	animation: none;
}
[data-theme="win95"] .toast {
	background: #ffffe1;
	color: #000;
	border: 1px solid #000;
	border-radius: 0;
}
[data-theme="win95"] .toast a {
	color: #0000ee;
}
[data-theme="win95"] .site-footer {
	background: #c0c0c0;
	box-shadow: var(--raised);
	margin: 30px 6px 0;
}
[data-theme="win95"] .site-footer a {
	color: #000;
}

/* Taskbar with a working Start menu, on every screen size. */
[data-theme="win95"] .dock {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	height: 40px;
	padding: 3px 4px;
	background: #c0c0c0;
	backdrop-filter: none;
	border-top: 0;
	box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff;
}
[data-theme="win95"] .start-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 32px;
	padding: 0 8px;
	font-weight: 700;
	cursor: pointer;
	flex-shrink: 0;
}
[data-theme="win95"] .dock__item {
	flex: 0 1 140px;
	flex-direction: row;
	justify-content: flex-start;
	gap: 4px;
	height: 32px;
	padding: 0 8px;
	font-size: 12px;
	overflow: hidden;
	white-space: nowrap;
}
[data-theme="win95"] .dock__item .icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
[data-theme="win95"] .tray-clock {
	display: block;
	margin-left: auto;
	padding: 6px 10px;
	font-size: 12px;
	box-shadow: var(--sunken);
	flex-shrink: 0;
}
[data-theme="win95"] .start-menu:not([hidden]) {
	display: flex;
	position: fixed;
	left: 2px;
	bottom: 40px;
	width: 250px;
	padding: 3px;
	z-index: 70;
}
[data-theme="win95"] .start-menu__brand {
	width: 28px;
	background: linear-gradient(0deg, #000080, #1084d0);
	color: #c0c0c0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 8px;
}
[data-theme="win95"] .start-menu__brand span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-weight: 700;
	font-size: 18px;
	color: #fff;
}
[data-theme="win95"] .start-menu ul {
	flex: 1;
}
[data-theme="win95"] .start-menu a {
	display: block;
	padding: 8px 10px;
	color: #000;
	text-decoration: none;
}
[data-theme="win95"] .start-menu a:hover,
[data-theme="win95"] .start-menu a:focus {
	background: #000080;
	color: #fff;
}
@media (max-width: 899px) {
	[data-theme="win95"] .dock__item span {
		display: none;
	}
	[data-theme="win95"] .dock__item {
		flex: 0 0 40px;
		justify-content: center;
	}
	[data-theme="win95"] .buybar {
		bottom: 40px;
	}
}
[data-theme="win95"] ::-webkit-scrollbar {
	width: 16px;
	height: 16px;
	background: #dfdfdf;
}
[data-theme="win95"] ::-webkit-scrollbar-thumb {
	background: #c0c0c0;
	box-shadow: var(--raised);
}