/* Shop */

/* ================================
   ROOT
================================ */
:root {
    --dso-arrow-size: 0.8rem;
    --dso-btn-w: 2.4rem;
    --dso-btn-h: 3.2rem;
}

/* ================================
   SHOP LAYOUT
================================ */
.dso-shop {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 1.6rem;
}

.dso-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.dso-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.6rem;
}

/* ================================
   PRODUCT CARD
================================ */
.dso-card {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.dso-card-img {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--br1);
	outline: 1px solid var(--dso-warm-gray-20);
}

.dso-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dso-card-title {
	font-family: var(--dso-header-font);
	font-size: 1rem;
}

/* ================================
   PDP OVERLAY
================================ */
.dso-pdp {
	position: fixed;
	inset: 0;
	display: none;
	z-index: 999;

	align-items: center;
	justify-content: center;

	background-image: radial-gradient(
		circle,
		color-mix(in srgb, var(--dso-cool-gray-90), transparent 25%),
		color-mix(in srgb, var(--dso-cool-gray-90), transparent 50%)
	);
}

.dso-pdp.active {
	display: flex;
}

/* ================================
   PDP INNER (DESKTOP GRID)
================================ */
.dso-pdp-inner {
	position: relative;
	background: #fff;

	width: min(1200px, calc(100vw - 3.2rem));
    max-height: calc(80dvh - 6.4rem);
    min-height: none;

	border-radius: var(--br1);
	box-shadow: 0 0.8rem 0.8rem -0.4rem var(--dso-cool-gray-90-25p);

	display: grid;
	grid-template-columns: 4fr 3fr;
    align-content: stretch;
	gap: 1.6rem;

	padding: 1.6rem;
}

/* ================================
   MEDIA (LEFT)
================================ */
.dso-pdp-media {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* IMAGE WRAP */
.dso-pdp-image-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;

	display: flex;
	align-items: center;
	justify-content: center;

	overflow: hidden;
	border-radius: var(--br1);
}

.dso-pdp-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* NAV BUTTONS */
.dso-pdp-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);

	width: var(--dso-btn-w);
	height: var(--dso-btn-h);

	display: flex;
	align-items: center;
	justify-content: center;

	background: transparent;
	cursor: pointer;
	z-index: 2;
}

.dso-pdp-nav:hover,
.dso-pdp-nav:focus-visible {
	background: var(--dso-cool-gray-80-15p);
}

.dso-prev { left: 0; }
.dso-next { right: 0; }

.dso-prev::after {
	content: '';
	border-right: calc(var(--dso-arrow-size) * 1.414) solid var(--dso-cool-gray-80);
	border-top: var(--dso-arrow-size) solid transparent;
	border-bottom: var(--dso-arrow-size) solid transparent;
}

.dso-next::after {
	content: '';
	border-left: calc(var(--dso-arrow-size) * 1.414) solid var(--dso-cool-gray-80);
	border-top: var(--dso-arrow-size) solid transparent;
	border-bottom: var(--dso-arrow-size) solid transparent;
}

/* CLOSE BUTTON */
.dso-pdp-close {
	position: absolute;
	top: -0.8rem;
	right: 0;

	transform: translateY(-100%);

	width: var(--dso-btn-w);
	height: var(--dso-btn-w);

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 999px;
	background: var(--dso-cool-gray-90);
	color: var(--dso-warm-gray-10);

	z-index: 15;
	cursor: pointer;
}

.dso-pdp-close::after {
	content: '✕';
}

/* ================================
   INFO (RIGHT)
================================ */
.dso-pdp-info {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;

    grid-column: 2;

	min-height: 0; /* critical */

    align-self: start;
    height: 100%;
}

/* TITLE */
.dso-pdp-title {
	margin: 0;
	font-size: 1.8rem;
	font-weight: 600;
    line-height: 1.125;
}

/* DESCRIPTION (SCROLL ZONE) */
.dso-pdp-description {
	flex: 1 1 auto;
	min-height: 0;

	overflow-y: auto;
}

.dso-pdp-description p:last-child {
    margin-bottom: 0;
}

.dso-pdp-description ul {
    margin-left: 1.2rem;
}

.dso-pdp-bottom {
    margin-top: auto;

    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* PRICE */
.dso-pdp-price {
	font-weight: 700;
}

/* OPTIONS */
.dso-pdp-options {
	display: flex;
	gap: 0.8rem;
}

.dso-pdp-options select {
	flex: 1;
	padding: 0.4rem;

    font-family: var(--dso-heading-font);
}

/* ACTIONS */
.dso-pdp-actions {
	flex: 0 0 auto;
    grid-column: 2;

    padding-top: 1.6rem;
}

/* BUTTON */
.dso-pdp-add-to-cart {
	width: 100%;
	padding: 0.8rem;

    font-size: 1.2rem;
	background: var(--dso-green-50);
	color: var(--dso-warm-gray-10);

	border: none;
	cursor: pointer;
}

/* This never shows because we don't allow invalid select combos */
.dso-pdp-add-to-cart:disabled {
    background-color: var(--dso-warm-gray-20);
    color: var(--dso-cool-gray-80);
}

.dso-pdp-add-to-cart:hover {
	background: var(--dso-orange-50);
}

/* ================================
   MOBILE
================================ */
@media (max-width: 921px) {

	.dso-shop {
		grid-template-columns: 1fr;
	}

	.dso-product-grid {
		grid-template-columns: 1fr;
	}

	.dso-pdp-inner {
        position: relative;

		display: flex;
		flex-direction: column;

		width: calc(100% - 1.6rem);

        max-height: 80vh;
        min-height: none;

		padding: 0.8rem;
	}

	.dso-pdp-media {
		flex: 0 0 auto;
		max-height: 30vh;
	}

	.dso-pdp-image-wrap {
        display: flex;
        align-items: center;
        justify-content: center;

		height: 100%;
	}

	.dso-pdp-image-wrap img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;

		object-fit: contain;
	}

	.dso-pdp-info {
        display: flex;
        flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}

	.dso-pdp-description {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
		overflow-y: auto;

        /* Scrollbar aesthetics */
        /* padding-right: 1.2rem; */
	}

    .dso-pdp-actions {
        flex: 0 0 auto;
        padding-top: 0;
    }

    .dso-pdp-add-to-cart {
        margin-top: 0;
    }
}