@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-display: swap;
	src: url(/public/fonts/IBM-Plex-Sans-Var-Roman-Latin1.woff2) format("woff2");
}
@font-face {
	font-family: "IBM Plex Sans";
	font-style: italic;
	font-display: swap;
	src: url(/public/fonts/IBM-Plex-Sans-Var-Italic-Latin1.woff2) format("woff2");
}

:root {
	--color-primary: #000;
	--color-secondary: #000;
	--color-accent: #d46131;
	--color-background: #fff;
	--color-background-secondary: #fcf4f0;
	--color-background-accent: rgb(243 214 202 / 0.5);
	--color-error: #c30;
	--color-success: green;

	--font-weight-bold: 700;

	--animation-duration: 0.2s;
	--animation-easing: ease-in-out;

	--product-image-aspect-ratio: 4 / 5;

	--grid-gap: 1rem;

	--svg-logo-ratio: 285 / 66;

	@media (width >= 60rem) {
		--grid-gap: 2.5rem;
	}
}

_::-webkit-full-page-media,
_:future,
:root {
	--font-weight-bold: 500;
}

a {
	color: var(--color-primary);
	transition: color var(--animation-duration) var(--animation-easing);

	&:hover,
	&:focus,
	&:active {
		color: var(--color-secondary);
	}
}

button {
	appearance: none;
	color: var(--color-background);
	background: var(--color-primary);
	border: 0;
	font: inherit;
	font-weight: var(--font-weight-bold);
	padding: 0.75rem 1rem;
	text-align: left;
	cursor: pointer;
	transition: background var(--animation-duration) var(--animation-easing);

	&:hover,
	&:focus,
	&:active {
		background: var(--color-secondary);
	}

	@media (width >= 60rem) {
		padding: 1rem 1.25rem;
		font-size: 1.25rem;
	}

	&.u-invert {
		color: inherit;
		background-color: transparent;
		outline: 1px solid;
		outline-offset: -1px;
	}
}

input,
select {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid currentColor;
	font: inherit;

	&:is(input) {
		border-radius: 0;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 300;
}

strong,
b {
	font-weight: var(--font-weight-bold);
}

hr {
	margin-block: 2rem;
	border: 0;
	border-block-end: 1px solid #eaeaea;
}

svg {
	display: block;
	fill: currentColor;
}

.u-visuallyhidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

body {
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 300;
	line-height: 1.4;
	margin: 0;
	color: var(--color-primary);
	background: var(--color-background);
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	margin-block-end: auto;
}

.container {
	margin-inline: 1.5rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--grid-gap);

	@media (width >= 60rem) {
		width: 100rem;
		max-width: calc(100% - 4rem);
		margin: 0 auto;
		grid-template-columns: repeat(12, 1fr);
	}
}

.error {
	color: var(--color-error);
}

.success {
	color: var(--color-success);
}

/**
 * Header
 */

header {
	--header-shadow: hsla(0 0% 0% / 0.1) 0 0.5rem 1rem;
	--header-background: var(--color-background);

	position: relative;
	z-index: 10;
	padding-block: 1.5rem;
	margin-block-end: 2rem;

	& .logo {
		grid-column: 1 / 3;
		width: 10rem;
		align-self: self-start;
		margin-inline-start: -0.25rem;
	}

	& .nav {
		grid-column: 1 / -1;
	}

	& .country {
		grid-column: 3 / 4;
		grid-row: 1;
	}

	& shop-profile {
		grid-column: 1 / -1;
		grid-row: 2;
		min-height: 1.4em; /* Prevent layout shift */
	}

	& .company__vat {
		font-style: italic;
		text-wrap: nowrap;
		display: inline-flex;
		justify-content: end;
		gap: 0.25rem;
	}

	& .logout {
		display: inline-flex;
	}

	& .logout__button {
		background: transparent;
		padding: 0;
		color: inherit;

		svg {
			width: 1rem;
			height: 1rem;
		}
	}

	& shop-cart {
		grid-column: 4 / 5;
		grid-row: 1 / 3;
		margin-left: auto;
		margin-block-start: -0.75rem;
	}

	@media (width >= 60rem) {
		position: sticky;
		top: 0;
		background: var(--header-background);
		box-shadow: var(--header-shadow);
		padding-block: 2.6875rem;
		margin-block-end: 4rem;

		& .logo {
			grid-column: 1 / 3;
			width: 13.625rem;
		}

		& .nav {
			grid-column: 3 / 9;
			margin-block-start: 1.1875rem;
		}

		& .country {
			grid-column: 9 / 12;
			margin-block-start: 0.875rem;
			margin-inline-end: 2rem;
		}

		& shop-profile {
			grid-column: 9 / 12;
			grid-row: 1;
		}

		& .company {
			text-align: right;
			display: flex;
			flex-direction: column;
			align-self: end;
		}

		& shop-cart {
			grid-column: 12 / -1;
			grid-row: 1 / -1;
			margin-block-start: auto;
		}
	}
}

@keyframes scroll-header {
	from {
		box-shadow: none;
		background: none;
	}
	to {
		box-shadow: var(--header-shadow);
		background: var(--header-background);
	}
}

@supports (animation-timeline: scroll()) {
	header {
		@media (width >= 60rem) {
			animation: scroll-header linear both;
			animation-timeline: scroll();
			animation-range: entry 0% entry 2rem;
		}
	}
}

.logo {
	display: block;

	& svg {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: var(--svg-logo-ratio);
	}
}

.nav--main {
	font-size: 1.125rem;

	& .nav__items {
		gap: 1.75rem;
	}

	& a {
		text-decoration: none;
		border-bottom: 0.0625rem solid transparent;

		&[aria-current="page"] {
			border-bottom-color: currentColor;
		}
	}
}

.nav__items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 1rem;
}

.country {
	display: flex;
	justify-content: end;
	gap: 1.25rem;

	& select {
		border: 0;
		font: inherit;
		color: inherit;
		padding: 0;
		width: auto;
		background-color: rgba(255, 255, 255, 0.01);
	}

	.abbr {
		text-transform: uppercase;
	}

	& svg {
		display: none;

		@media (width >= 60rem) {
			display: block;
			width: 2.25rem;
			aspect-ratio: 1;
			flex-shrink: 0;
		}
	}
}

/**
 * Content
 */

.section {
	margin-block-end: 2rem;
}

.section__image {
	display: block;
	width: 100%;
	height: auto;
}

.section--intro {
	position: relative;
	overflow: hidden;
	left: calc(50% - 50cqw);
	width: 100cqw;
	margin-block-start: -12rem;

	& .section__title {
		grid-column: 1 / -1;
		margin: 0;
		padding-block-start: 12rem;
		padding-block-end: 2rem;
		font-size: 2rem;
		line-height: 1.25;
		font-weight: 200;
		position: relative;
		z-index: 1;
		text-shadow: var(--color-background) 0 0 0.5rem;
	}

	& .section__image {
		position: absolute;
		inset: 0;
		object-fit: cover;
		height: 100%;
	}

	@media (width >= 60rem) {
		margin-block-start: -12.5rem;
		height: 48.5625rem;
		min-height: 30rem;
		max-height: 90vh;

		& .section__title {
			grid-column: 1 / 6;
			padding-block-start: 13.8125rem;
			font-size: 4rem;
			line-height: 1.25;
		}
	}
}

/**
 * Cart
 */

shop-cart {
	display: block;
	position: relative;

	& button[type="submit"] {
		width: 100%;

		span {
			font-weight: 300;
			font-size: 0.8em;
			display: inline-block;
		}
	}
}

.cart__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	appearance: none;
	background: none;
	color: inherit;
	border: 0;
	cursor: pointer;
	position: relative;

	&:hover,
	&:focus,
	&:active {
		background: none;
		color: inherit;
	}

	& svg {
		width: 100%;
		height: auto;
		overflow: visible;
	}
}
.cart__toggle-count {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2ch;
	font-size: 0.875rem;
	position: absolute;
	top: 0.375rem;
	right: 0.5rem;
	color: var(--color-background);
	transform: rotate(-15deg);
}

.cart__content {
	display: none;

	.cart__toggle[aria-expanded="true"] ~ & {
		display: block;
		position: absolute;
		top: calc(100% + 1rem);
		right: 0;
		border: 1px solid;
		padding: 1rem;
		background: var(--color-background-secondary);
		max-height: calc(100vh - 10rem);
		width: 26.6875rem;
		max-width: calc(100vw - 4rem);
		overflow: auto;
		box-sizing: border-box;

		@media (width >= 60rem) {
			right: 0;
		}
	}
}

.cart__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: 0;
	font-size: 1.25rem;
}

.cart__items {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-block-end: 2rem;
}

.cart__item {
	display: grid;
	grid-template-columns: 3rem auto min-content min-content;
	gap: 0.5rem;

	@media (width >= 60rem) {
		grid-template-columns: 5rem auto min-content min-content;
		gap: 1rem;
	}
}
.cart__item--shipping {
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	padding-block-start: 0.75rem;
}
.cart__item--total {
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	padding-block-start: 0.75rem;
}

.cart__item-image {
	display: block;
	width: 100%;
	aspect-ratio: var(--product-image-aspect-ratio);
	object-fit: cover;
}

.cart__item-text {
	margin: 0;
	grid-column: 2 / 3;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.cart__item-number {
	margin-right: -0.5rem;

	& input {
		width: 3.5rem;
		padding-inline: 0.5rem;
		background-color: transparent;
		border-right-width: 0;

		&[readonly] {
			opacity: 0.5;
			cursor: progress;
		}

		@media (width >= 60rem) {
			border-right-width: 1px;
		}
	}
}

.cart__item-remove {
	align-self: self-start;
	padding: 0.6315rem;

	svg {
		transform: rotate(45deg);
	}

	&:disabled {
		opacity: 0.5;
		cursor: progress;
	}

	@media (width >= 60rem) {
		padding: 0.6375rem;
	}
}

.cart__checkout {
	background: red;
	color: #fff;
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
}

/**
 * Add to cart
 */

.add-to-cart {
	container-type: inline-size;
	container-name: add-to-cart;

	& button[type="submit"] {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 1.375rem;

		& svg.added {
			display: none;
		}

		&:disabled {
			opacity: 0.5;
			cursor: progress;
		}

		&.is-added {
			background-color: var(--color-accent);

			& svg.added {
				display: block;
			}

			& svg:not(.added) {
				display: none;
			}
		}

		@container add-to-cart (width < 22rem) {
			font-size: 1rem;
		}

		@container add-to-cart (width < 18rem) {
			& svg {
				width: 1.25rem !important;
				height: 1.25rem !important;
			}

			& span {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			& svg:not(.added) {
				display: none;
			}

			&.is-added {
				& span {
					color: var(--color-accent);
				}
			}
		}
	}
}

/**
 * Listing
 */

.products {
}

.products__title {
	grid-column: 1 / -1;
	font-size: 1.75rem;

	@media (width >= 60rem) {
		font-size: 2.5rem;
	}
}

.products__items {
	list-style: none;
	padding: 0;
	margin-block: 0;
}

.products__item {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border-bottom: 0.25rem solid;
	padding-block-end: 1.5rem;

	@media (hover: hover) {
		&:hover,
		&:focus-within {
			.products__item-submit {
				opacity: 1;
			}
		}
	}

	@media (width >= 60rem) {
		grid-column: span 3;
	}
}

.products__item-link {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-decoration: none;
	color: inherit;

	@media (width >= 60rem) {
		gap: 1rem;
	}
}

.products__item-image {
	display: block;
	width: 100%;
	aspect-ratio: var(--product-image-aspect-ratio);
	object-fit: cover;
	border-bottom: 0.125rem solid;
}

.products__item-title {
	margin-block: 0;
	font-size: 1rem;
	font-weight: var(--font-weight-bold);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	@media (width >= 60rem) {
		font-size: 1.25rem;
	}
}

.products__item-abstract {
	margin-block: 0;
}

.products__item-cart {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1rem;
}

.products__item-price {
	margin-block: 0;
	font-weight: var(--font-weight-bold);

	@media (width >= 60rem) {
		font-size: 1.25rem;
	}
}

.products__item-submit {
	display: none;

	@media (hover: hover) {
		display: block;
		opacity: 0;
	}
}

/**
 * Detail
 */

.product {
	& .container {
		grid-row-gap: 4rem;
	}
}

.product__images,
.product__descriptions {
	grid-column: 1 / -1;

	@media (width >= 60rem) {
		grid-column: 1 / 9;
	}
}

.product__descriptions {
	@media (width < 60rem) {
		grid-row: 3;
	}
}

.product__images {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: var(--grid-gap);
}
.product__images-item {
	@media (width < 60rem) {
		&:first-child {
			grid-column: 1 / -1;
		}
	}
}
.product__images-image {
	display: block;
	width: 100%;
	aspect-ratio: var(--product-image-aspect-ratio);
}

.product__details {
	grid-column: 1 / -1;

	@media (width >= 60rem) {
		grid-column: 9 / -1;
		grid-row: 1 / 3;
	}
}

.product__title {
	margin-block-start: 0;
	margin-block-end: 0.5rem;
	font-size: 1.75rem;

	@media (width >= 60rem) {
		font-size: 2.5rem;
		margin-block-start: -0.75rem;
	}
}

.product__category {
	font-weight: var(--font-weight-bold);
}

.product__price {
	font-size: 3rem;
	margin-block: 1.5rem;
}

.product__add {
	display: block;
}

.product__add-rows {
	margin-block: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.product__add-row {
	display: grid;
	grid-template-columns: 6rem auto;
	align-items: center;

	& dt {
		font-weight: var(--font-weight-bold);
	}
}
.product__add-value {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid #e0e0e0;
	font: inherit;

	&:is(input, select) {
		border-color: currentColor;
		color: inherit;
	}
}
.product__add-row--shipping {
	align-items: start;
	margin-block-start: 1rem;
}

.product__variants {
	background: #ffeeee;
	padding: 1rem;

	& p {
		margin: 0;
	}
	& ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
}

.product__details-text {
	& img {
		max-width: 50%;
	}
}

.product__related {
	grid-column: 1 / -1;

	.container {
		max-width: 100%;
	}
}

.product__related-title {
	grid-column: 1 / -1;
	font-weight: var(--font-weight-bold);
}

/**
 * Detail
 */

.detail {
	grid-column: 1 / -1;

	img {
		display: block;
		width: 100%;
		height: auto;

		@media (width >= 40rem) {
			float: left;
			width: 50%;
			margin-inline-end: 1.5rem;
			margin-block-start: 0.25rem;
			margin-block-end: 1.25rem;
		}

		@media (width >= 60rem) {
			width: 25%;
		}
	}
}

/**
 * Form
 */

.form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 30rem;

	label {
		font-weight: bold;
	}

	button[type="submit"] {
		margin-block-start: 1rem;
	}
}

.form__hint {
	margin-block-start: 0.25rem;

	&:not([hidden]) {
		display: block;
	}
}

/**
 * Login
 */

.login {
	grid-column: 1 / -1;
}

/**
 * Admin
 */

.admin {
	grid-column: 1 / -1;
}

/**
 * Footer
 */

.footer {
	background: var(--color-background-accent);
	padding-block: 3rem;
	margin-block-start: 2rem;

	& .container {
		grid-row-gap: 4rem;
	}

	@media (width >= 60rem) {
		margin-block-start: 4rem;
	}
}

.footer__title {
	font-weight: var(--font-weight-bold);
	margin-block-start: 0;
}

.footer__menu {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;

	& .footer__title {
		grid-column: 1 / -1;
	}

	@media (width >= 60rem) {
		grid-column: 1 / 3;
	}
}
.footer__menu-nav {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;

	& a {
		text-decoration: none;
		border-bottom: 0.0625rem solid transparent;

		&[aria-current="page"] {
			border-bottom-color: currentColor;
		}
	}

	@media (width < 60rem) {
		grid-column: 1 / 3;

		& + & {
			grid-column: 3 / -1;
		}
	}

	@media (width >= 60rem) {
		margin-block-end: 4rem;
	}
}

.footer__contact {
	grid-column: 1 / -1;

	& p:last-child {
		margin-block-end: 0;
	}

	@media (width >= 60rem) {
		grid-column: 4 / 9;
	}
}

.footer__meta {
	grid-column: 1 / -1;

	& svg {
		width: 10rem;
		aspect-ratio: var(--svg-logo-ratio);
	}

	& p:last-child {
		margin-block-end: 0;
	}

	@media (width >= 60rem) {
		grid-column: 10 / -1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
}