/* ==========================================================
   GRPARALLEL 2.4.16 — shared visual architecture
   ========================================================== */

/* 01. Shared desktop frame geometry */
@media (min-width: 1101px){
	:root {
		--shell-top: 1vw;
		--shell-right: 3.5vw;
		--shell-left: calc(var(--nav-width) + 2vw);
		--shell-height: calc(100vh - 2vw);
		--shell-width: calc(100% - var(--nav-width) - 5.5vw);
		--shell-radius: 1.5vw;
	}

	.product-window,
	.cart-window,
	.standard-page-window {
		width: var(--shell-width) !important;
		height: var(--shell-height) !important;
		margin-top: var(--shell-top) !important;
		margin-right: var(--shell-right) !important;
		margin-bottom: var(--shell-top) !important;
		margin-left: var(--shell-left) !important;
		border-radius: var(--shell-radius) !important;
	}

	.checkout-page {
		width: 100% !important;
		height: 100vh !important;
		min-height: 100vh !important;
		min-height: 0 !important;
		padding: var(--shell-top) var(--shell-right) var(--shell-top) var(--shell-left) !important;
		box-sizing: border-box;
		overflow: hidden !important;
	}
	.checkout-shell {
		width: 100% !important;
		height: var(--shell-height) !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		border-radius: var(--shell-radius) !important;
	}

	/* Keep the order-received page on the same outer grid. */
	.order-received-page {
		min-height: 100vh !important;
		height: 100vh !important;
		padding: var(--shell-top) var(--shell-right) var(--shell-top) var(--shell-left) !important;
		box-sizing: border-box;
		overflow: hidden !important;
	}
	.order-received-shell {
		width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		margin: 0 !important;
		border-radius: var(--shell-radius) !important;
		overflow: auto;
	}
}

/* 02. Product-card rhythm: bottom metadata/actions stay aligned even when
      product names have different lengths. */
.plugin-card {
	display: flex;
	flex-direction: column;
}
/* 02a. Plugin-card filtering: hidden cards must override the flex layout. */
.plugin-card.hidden {
	display: none !important;
}
.plugin-card-link {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
}
.plugin-info {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
}
.plugin-info h3 {
	min-height: 2.4em !important;
}
.plugin-info p {
	min-height: 3em !important;
}
.plugin-meta {
	margin-top: auto !important;
	flex: 0 0 auto !important;
}

/* 03. Home collection continuation */
.plugins-continue-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .65vw;
	min-width: 10vw;
	margin-top: .9vw;
	padding: .72vw 1.05vw;
	border: 1px solid rgba(0,115,170,.45);
	border-radius: 999px;
	background: rgba(0,115,170,.08);
	color: #0073aa !important;
	font-size: .72vw;
	font-weight: 800;
	text-decoration: none;
	transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.plugins-continue-button:hover {
	transform: translateY(-2px);
	background: #0073aa;
	border-color: #0073aa;
	color: #fff !important;
}
.plugins-continue-button span { transition: transform .2s ease; }
.plugins-continue-button:hover span { transform: translateX(3px); }

/* 04. Global account shortcut: clearer door + entering arrow. */
.account-nav-link .account-nav-icon svg { overflow: visible; }
.account-nav-link .account-nav-icon svg path:first-child { d: path('M13 4h7v16h-7'); }

/* 05. Checkout — read-only customer confirmation for authenticated users. */
.checkout-customer-confirmation {
	display: grid;
	gap: .75vw;
	padding: 1vw 0 .25vw;
}
.checkout-customer-confirmation-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1vw;
	padding: .75vw 0;
	border-bottom: 1px solid rgba(255,255,255,.07);
}
.checkout-customer-confirmation-row span {
	color: rgba(243,241,235,.42);
	font-size: .62vw;
}
.checkout-customer-confirmation-row strong {
	color: #f3f1eb;
	font-size: .76vw;
	font-weight: 650;
	text-align: right;
	word-break: break-word;
}
.checkout-customer-confirmation p {
	margin: .45vw 0 0;
	color: rgba(243,241,235,.48);
	font-size: .58vw;
	line-height: 1.55;
}
.checkout-customer-confirmation a {
	color: rgba(243,241,235,.75) !important;
	text-decoration: underline;
	text-decoration-color: rgba(243,241,235,.3);
	text-underline-offset: .12em;
}
.checkout-account-required-fields {
	margin-top: .7vw;
	padding-top: .85vw;
	border-top: 1px solid rgba(255,255,255,.07);
}
.checkout-account-required-title {
	font-size: .72vw;
	font-weight: 700;
	color: #f3f1eb;
}
.checkout-account-required-fields > p {
	margin: .35vw 0 .85vw;
	color: rgba(243,241,235,.46);
	font-size: .58vw;
	line-height: 1.5;
}

/* 06. Mobile frame + checkout document scrolling. */
@media (max-width: 700px){
	.plugins-continue-button { min-width: 150px; margin-top: 10px; padding: 10px 16px; font-size: 12px; }
	.checkout-page {
		position: fixed !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100dvh !important;
		min-height: 100dvh !important;
		max-height: none !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		touch-action: pan-y !important;
	}
	.checkout-shell {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
	}
	.checkout-customer-confirmation { gap: 8px; padding-top: 12px; }
	.checkout-customer-confirmation-row { padding: 10px 0; }
	.checkout-customer-confirmation-row span { font-size: 9px; }
	.checkout-customer-confirmation-row strong { font-size: 12px; }
	.checkout-customer-confirmation p { margin-top: 5px; font-size: 10px; line-height: 1.55; }
	.checkout-account-required-fields { margin-top: 8px; padding-top: 12px; }
	.checkout-account-required-title { font-size: 12px; }
	.checkout-account-required-fields > p { margin: 5px 0 10px; font-size: 10px; }
}