/* House shop / product-category archive. Shared card and chrome styles live in style.css. */

.ustd-shop {
	background: var(--usr-cream);
	overflow-wrap: anywhere;
}

/* ------------------------------------------------ collection hero ---- */

.ustd-shop__hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 318px;
	background: #001453;
	color: var(--usr-white);
}

.ustd-shop__hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("../imagery/shop/desktop/shop-header_2880x636.jpg") right center / 1440px 318px no-repeat;
	pointer-events: none;
}

.ustd-shop__hero-in {
	position: relative;
	min-height: 318px;
	padding-top: 96px;
	padding-bottom: 48px;
}

.ustd-shop__crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	color: var(--usr-white);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	max-width: 660px;
}

.ustd-shop__crumbs a,
.ustd-shop__crumbs a:hover,
.ustd-shop__crumbs a:focus {
	color: var(--usr-white);
	text-decoration: none;
}

.ustd-shop__crumbs a:hover,
.ustd-shop__crumbs a:focus-visible { text-decoration: underline; }

.ustd-shop__title {
	max-width: 660px;
	margin: 26px 0 0;
	color: var(--usr-white);
	font-size: 48px;
	font-weight: 500;
	letter-spacing: -0.528px;
	line-height: 58px;
}

.ustd-shop__sub {
	max-width: 660px;
	margin: 14px 0 0;
	color: var(--usr-white);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
}

/* ----------------------------------------------------- catalog ---- */

.ustd-shop__catalog { background: var(--usr-cream); }

.ustd-shop__notices:empty { display: none; }
.ustd-shop__notices:has(> .woocommerce-notices-wrapper:empty) { display: none; }
.ustd-shop__notices:not(:empty) { padding-top: 20px; }
.ustd-shop__notices .woocommerce-message,
.ustd-shop__notices .woocommerce-info,
.ustd-shop__notices .woocommerce-error {
	margin: 0 0 12px;
	padding: 13px 18px;
	border: 0;
	border-radius: 12px;
	background: var(--usr-white);
	color: var(--usr-ink);
	font-size: 14px;
	line-height: 20px;
	list-style: none;
}
.ustd-shop__notices .woocommerce-error { background: var(--usr-tint-red); color: var(--usr-red); }
.ustd-shop__notices .woocommerce-message::before,
.ustd-shop__notices .woocommerce-info::before,
.ustd-shop__notices .woocommerce-error::before { display: none; }
.ustd-shop__notices .button { float: right; }

.ustd-shop__bar-in {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 0;
	padding-top: 64px;
	padding-bottom: 24px;
	border-bottom: 0;
}
.ustd-shop__bar-in::after { content: ''; position: absolute; right: 48px; bottom: 0; left: 48px; height: 1px; background: #F2EBE0; }

.ustd-shop__chips {
	display: flex;
	align-self: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.ustd-shop__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	max-width: 100%;
	padding: 12px 18px;
	border: 1px solid var(--usr-hairline);
	border-radius: 999px;
	background: var(--usr-white);
	color: var(--usr-navy);
	font-size: 13px;
	font-weight: 400;
	line-height: 18px;
	text-decoration: none;
	white-space: normal;
	text-align: center;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ustd-shop__chip:hover,
.ustd-shop__chip:focus-visible {
	border-color: var(--usr-navy);
	color: var(--usr-navy);
	text-decoration: none;
}

.ustd-shop__chip.is-active {
	border-color: var(--usr-navy);
	background: var(--usr-navy);
	color: var(--usr-white);
}

.ustd-shop__sort {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	flex-wrap: wrap;
	min-width: 0;
	gap: 12px;
	margin: 0;
}

.ustd-shop__sort label {
	color: var(--usr-secondary);
	font-size: 13px;
	line-height: 18px;
}

.ustd-shop__sort select {
	field-sizing: fixed;
	width: auto;
	max-width: 100%;
	height: auto;
	min-height: 48px;
	margin: 0;
	padding: 0 30px 0 18px;
	border: 1px solid var(--usr-hairline);
	border-radius: 999px;
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--usr-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4Z' fill='%2313266B'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	color: var(--usr-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	cursor: pointer;
}

.ustd-shop__sort select:focus-visible { border-color: var(--usr-navy); }
.ustd-shop__sort noscript button { margin-left: 6px; }

.ustd-shop__products { padding: 44px 0 95px; }

.ustd-shop__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 322px));
	gap: 20px;
	align-items: start;
}

.ustd-shop__grid .ustd-grid__cell { width: 100%; max-width: 322px; }

.ustd-shop .woocommerce-pagination { margin-top: 40px; }
.ustd-shop .woocommerce-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
.ustd-shop .woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; }
.ustd-shop .woocommerce-pagination .page-numbers li > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	padding: 12px 6px;
	border: 0;
	border-radius: 50%;
	background: var(--usr-white);
	color: var(--usr-navy);
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
}
.ustd-shop .woocommerce-pagination .page-numbers .current { background: var(--usr-navy); color: var(--usr-white); }
.ustd-shop .woocommerce-pagination a:hover,
.ustd-shop .woocommerce-pagination a:focus-visible { background: var(--usr-tint-blue); text-decoration: none; }

.ustd-shop__empty {
	padding: 72px 24px;
	border-radius: 24px;
	background: var(--usr-white);
	text-align: center;
}
.ustd-shop__empty h2 { margin: 0 0 12px; color: var(--usr-navy); font-size: 28px; line-height: 34px; }
.ustd-shop__empty p { margin: 0; color: var(--usr-secondary); }
.ustd-shop__empty .ustd-btn { margin-top: 20px; }

/* ---------------------------------------- compare specifications ---- */

.ustd-shop__specs {
	min-height: 0;
	background: url("../design/shop-comparison.png") center / cover no-repeat var(--usr-navy);
	color: var(--usr-white);
}

.ustd-shop__specs-in {
	min-height: 0;
	padding-top: 96px;
	padding-bottom: 104px;
}

.ustd-shop__specs-title {
	margin: 0;
	color: var(--usr-white);
	font-size: 36px;
	font-weight: 500;
	letter-spacing: -0.432px;
	line-height: 43px;
}

.ustd-shop__specs-sub {
	margin: 10px 0 0;
	color: var(--usr-white);
	font-size: 18px;
	line-height: 27px;
}

.ustd-spec-table {
	overflow: hidden;
	margin-top: 38px;
	border-radius: 28px;
	background: #FCF8F0;
	color: var(--usr-ink);
}

.ustd-spec-table__row {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: 20px;
	padding: 0 32px;
	border-bottom: 1px solid var(--usr-hairline);
}

.ustd-spec-table__row:last-child { border-bottom: 0; }

.ustd-spec-table__row > span {
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 20px 0;
	color: var(--usr-navy);
	font-size: 15px;
	line-height: 22px;
}

.ustd-spec-table__row--head {
	border: 0;
	background: var(--usr-navy);
}

.ustd-spec-table__row--head > span {
	color: var(--usr-white);
	font-size: 13px;
	font-weight: 500;
	line-height: 19px;
}

.ustd-spec-table__row .ustd-spec-table__product,
.ustd-spec-table__product a {
	color: var(--usr-ink);
	font-weight: 500;
	text-decoration: none;
}
.ustd-spec-table__product a:hover,
.ustd-spec-table__product a:focus-visible { color: var(--usr-navy); text-decoration: underline; }

.ustd-spec-mobile { display: none; }

/* Keep the artwork at the content boundary on wide screens; fade only its outer field. */
@media (min-width: 1441px) {
	.ustd-shop__hero::before {
		left: 50%;
		right: auto;
		width: 1440px;
		transform: translateX(-50%);
		mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	}
}

/* Leave room for the right-anchored bottles while the desktop artwork crops. */
@media (min-width: 721px) and (max-width: 1150px) {
	.ustd-shop__hero-in { padding-top: 64px; padding-bottom: 32px; }
	.ustd-shop__crumbs,
	.ustd-shop__title,
	.ustd-shop__sub { max-width: calc(100% - 320px); }
}

@media (max-width: 1150px) and (min-width: 861px) {
	.ustd-shop__grid { grid-template-columns: repeat(3, minmax(0, 322px)); }
}

@media (max-width: 860px) and (min-width: 721px) {
	.ustd-shop__grid { grid-template-columns: repeat(2, minmax(0, 322px)); }
}

@media (max-width: 720px) {
	/* Keep the bottles visible at the lower right, with copy in its own left area. */
	.ustd-shop__hero::before {
		top: auto;
		height: min(212px, 49.6875vw);
		background-position: right bottom;
		background-size: min(960px, 225vw) auto;
		mask-image: linear-gradient(to bottom, transparent, #000 32px);
	}

	.ustd-shop__hero,
	.ustd-shop__hero-in { min-height: 318px; }

	.ustd-shop__hero-in {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.ustd-shop__crumbs { gap: 6px; font-size: 13px; line-height: 18px; }
	.ustd-shop__title {
		margin-top: 18px;
		font-size: 30px;
		letter-spacing: -0.36px;
		line-height: 36px;
	}
	.ustd-shop__sub {
		max-width: calc(100% - clamp(152px, calc(45vw + 8px), 216px));
		margin-top: 12px;
		font-size: 15px;
		line-height: 23px;
	}

	.ustd-shop__bar-in {
		display: block;
		min-height: 0;
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.ustd-shop__bar-in::after { display: none; }
	.ustd-shop__chips { gap: 8px; }
	.ustd-shop__chip {
		min-height: 40px;
		padding: 10px 16px;
		font-size: 13px;
		line-height: 18px;
	}

	.ustd-shop__sort {
		justify-content: flex-start;
		gap: 6px;
		margin-top: 16px;
	}
	.ustd-shop__sort label { font-size: 13px; line-height: 20px; }
	.ustd-shop__sort select {
		min-height: 20px;
		padding: 0 15px 0 0;
		border: 0;
		border-radius: 0;
		background-color: transparent;
		background-position: right center;
		background-size: 9px 6px;
		color: var(--usr-navy);
		font-size: 13px;
		font-weight: 500;
		line-height: 20px;
	}

	.ustd-shop__products { padding: 28px 0 42px; }
	.ustd-shop .ustd-shop__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		justify-content: stretch;
	}
	/* Fill both tracks instead of inheriting the shared 167px mobile card cap. */
	.ustd-shop .ustd-shop__grid > .ustd-grid__cell,
	.ustd-shop .ustd-shop__grid > .ustd-grid__cell > .ustd-card.ustd-card--house {
		width: 100%;
		min-width: 0;
		max-width: none;
		float: none;
		margin: 0;
	}
	.ustd-shop .woocommerce-pagination { margin-top: 28px; }
	.ustd-shop .woocommerce-pagination ul.page-numbers { gap: 8px; }
	.ustd-shop__empty { padding: 52px 20px; }

	.ustd-shop__specs,
	.ustd-shop__specs-in { min-height: 0; }
	.ustd-shop__specs-in {
		padding-top: 64px;
		padding-bottom: 58px;
	}
	.ustd-shop__specs-title {
		font-size: 26px;
		letter-spacing: -0.336px;
		line-height: 32px;
	}
	.ustd-shop__specs-sub {
		max-width: 320px;
		margin-top: 10px;
		font-size: 15px;
		line-height: 23px;
	}

	.ustd-spec-table { display: none; }
	.ustd-spec-mobile {
		display: grid;
		grid-template-rows: none;
		gap: 12px;
		min-height: 0;
		margin-top: 26px;
	}

	.ustd-spec-field {
		display: flex;
		flex-direction: column;
		min-width: 0;
		padding: 16px 20px 30px;
		border-radius: 16px;
		background: var(--usr-white);
		color: var(--usr-ink);
	}
	.ustd-spec-field h3 {
		margin: 0 0 14px;
		color: var(--usr-secondary);
		font-size: 10px;
		font-weight: 500;
		letter-spacing: 1px;
		line-height: 12px;
		text-transform: uppercase;
	}
	.ustd-spec-field dl {
		display: flex;
		flex-direction: column;
		margin: 0;
	}
	.ustd-spec-field dl > div {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 12px;
		align-items: center;
		padding: 8px 0;
		border-bottom: 1px solid #EBE4D9;
	}
	.ustd-spec-field dl > div:last-child { border-bottom: 0; }
	.ustd-spec-field dt,
	.ustd-spec-field dd {
		min-width: 0;
		margin: 0;
		font-size: 13px;
		font-weight: 400;
		line-height: 16px;
	}
	.ustd-spec-field dt,
	.ustd-spec-field dt a { color: var(--usr-secondary); text-decoration: none; }
	.ustd-spec-field dt a:hover,
	.ustd-spec-field dt a:focus-visible { color: var(--usr-navy); text-decoration: underline; }
	.ustd-spec-field dd { color: var(--usr-navy); font-weight: 500; text-align: right; }

}

@media (prefers-reduced-motion: reduce) {
	.ustd-shop__chip { transition: none; }
}