.sb-hero,
.sb-selector {
	max-width: 1080px;
	margin-inline: auto;
}

.sb-hero {
	padding: 2rem 1rem 1.25rem;
	text-align: center;
}

.sb-eyebrow {
	display: inline-block;
	margin: 0 0 .65rem;
	padding: .4rem .75rem;
	border-radius: 999px;
	background: #fff2d8;
	color: #8a4b00;
	font-size: .88rem;
	font-weight: 800;
}

.sb-hero h1 {
	max-width: 800px;
	margin: .15rem auto .7rem;
	font-size: clamp(1.75rem, 8vw, 4rem);
	line-height: 1.12;
}

.sb-hero > p:last-child {
	max-width: 680px;
	margin-inline: auto;
	color: #5b6472;
	font-size: 1rem;
}

.sb-selector {
	padding: .25rem 1rem 1rem;
}

.sb-selector-heading {
	margin: .5rem auto 1rem;
	text-align: center;
}

.sb-selector-heading h2 {
	margin: 0 0 .25rem;
	font-size: 1.45rem;
}

.sb-selector-heading p {
	margin: 0;
	color: #697485;
	font-size: .95rem;
}

.sb-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .65rem;
}

.sb-grid > .sb-grid-head {
	display: none;
}

.sb-grade {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	justify-content: flex-start;
	min-height: 42px;
	margin-top: .45rem;
	padding: 0 .85rem;
	border-radius: 12px;
	background: #16233a;
	color: #fff;
	font-weight: 800;
}

.sb-choice label {
	display: block;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.sb-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sb-choice label > span {
	display: flex;
	min-height: 72px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 2px solid #e5e9ef;
	border-radius: 14px;
	background: #fff;
	font-weight: 750;
	touch-action: manipulation;
	transition: .18s ease;
}

.sb-choice small {
	margin-top: .15rem;
	color: #7a8493;
	font-weight: 600;
}

.sb-choice input:focus-visible + span {
	outline: 3px solid rgba(241, 115, 51, .3);
	outline-offset: 2px;
}

.sb-choice input:checked + span {
	border-color: #f17333;
	background: #fff3e8;
	color: #b8440d;
	box-shadow: 0 4px 16px rgba(241, 115, 51, .18);
}

.sb-choice input:disabled + span {
	opacity: .45;
	cursor: not-allowed;
}

.sb-sample-button {
	display: none;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	margin-top: .4rem;
	border: 1px solid #f17333;
	border-radius: 11px;
	background: #fff;
	color: #b8440d;
	font-size: .9rem;
	font-weight: 800;
	text-decoration: none;
}

.sb-choice.is-selected .sb-sample-button {
	display: flex;
}

.sb-unavailable {
	display: grid;
	min-height: 72px;
	place-items: center;
	color: #aab0ba;
}

.sb-summary {
	position: sticky;
	bottom: 8px;
	z-index: 20;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .65rem;
	align-items: center;
	margin-top: 1rem;
	padding: .8rem;
	border: 1px solid #dfe5ed;
	border-radius: 16px;
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 14px 40px rgba(23, 33, 51, .2);
	backdrop-filter: blur(12px);
}

.sb-summary > div {
	display: flex;
	flex-direction: column;
	padding-inline: .25rem;
}

.sb-summary > div > span {
	color: #697485;
	font-size: .78rem;
}

.sb-summary strong {
	font-size: 1.12rem;
	white-space: nowrap;
}

.sb-summary button {
	grid-column: 1 / -1;
	min-height: 52px;
	border: 0;
	border-radius: 12px;
	background: #f17333;
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
	cursor: pointer;
	touch-action: manipulation;
}

.sb-summary button:disabled {
	background: #b8bec7;
	cursor: not-allowed;
}

.sb-notice {
	max-width: 760px;
	margin: 1rem auto;
	padding: 1rem;
	border-radius: 12px;
	background: #fff4d6;
	text-align: center;
}

@media (min-width: 761px) {
	.sb-hero {
		padding: 3.5rem 1rem 2rem;
	}

	.sb-hero > p:last-child {
		font-size: 1.1rem;
	}

	.sb-selector {
		padding: 1rem;
	}

	.sb-selector-heading {
		margin-bottom: 1.25rem;
	}

	.sb-grid {
		grid-template-columns: 90px repeat(5, minmax(115px, 1fr));
		gap: .55rem;
		align-items: start;
		overflow-x: auto;
		padding-bottom: .5rem;
	}

	.sb-grid > .sb-grid-head {
		display: flex;
	}

	.sb-grid-head,
	.sb-grade {
		align-items: center;
		justify-content: center;
		min-height: 52px;
		margin: 0;
		padding: 0;
		border-radius: 12px;
		background: #16233a;
		color: #fff;
		font-weight: 800;
	}

	.sb-grade {
		grid-column: auto;
	}

	.sb-choice label > span,
	.sb-unavailable {
		min-height: 66px;
	}

	.sb-summary {
		bottom: 14px;
		grid-template-columns: 1fr 1fr minmax(220px, 1.4fr);
		gap: 1rem;
		margin-top: 1.25rem;
		padding: 1rem 1.2rem;
		border-radius: 18px;
	}

	.sb-summary > div {
		padding: 0;
	}

	.sb-summary > div > span {
		font-size: .85rem;
	}

	.sb-summary strong {
		font-size: 1.25rem;
	}

	.sb-summary button {
		grid-column: auto;
	}
}


/* Bulk selection and promotional pricing */
.sb-promo {
	margin: .5rem 0 1rem;
	padding: 1rem;
	border: 1px solid #f2d584;
	border-radius: 18px;
	background: linear-gradient(145deg, #fffaf0, #fff1f6);
	box-shadow: 0 10px 30px rgba(23, 54, 111, .08);
}

.sb-promo-copy {
	text-align: center;
}

.sb-promo-kicker {
	display: inline-block;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: #c92d63;
	color: #fff;
	font-size: .8rem;
	font-weight: 800;
}

.sb-promo h2 {
	margin: .6rem 0 .25rem;
	font-size: 1.25rem;
}

.sb-promo-copy p {
	margin: 0;
	color: #52647f;
	font-size: .9rem;
}

.sb-promo-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .5rem;
	margin-top: .9rem;
}

.sb-promo-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	padding: .65rem .3rem;
	border: 1px solid #d9e2f0;
	border-radius: 12px;
	background: #fff;
	text-align: center;
}

.sb-promo-card strong {
	font-size: .82rem;
}

.sb-promo-card span {
	color: #c92d63;
	font-size: 1rem;
	font-weight: 900;
}

.sb-promo-card small {
	color: #52647f;
	font-size: .68rem;
}

.sb-promo-card.is-best {
	border: 2px solid #c92d63;
	background: #fff0f5;
}

.sb-price-details {
	margin-top: .8rem;
	text-align: center;
}

.sb-price-details summary {
	color: #17366f;
	font-size: .9rem;
	font-weight: 800;
	cursor: pointer;
}

.sb-price-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .35rem;
	margin-top: .7rem;
	text-align: left;
}

.sb-price-list span {
	display: flex;
	justify-content: space-between;
	padding: .35rem .5rem;
	border-radius: 8px;
	background: rgba(255, 255, 255, .8);
	font-size: .78rem;
}

.sb-bulk-actions {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	margin: 0 0 .85rem;
}

.sb-select-all,
.sb-clear-all,
.sb-grade button {
	min-height: 42px;
	border-radius: 12px;
	font-family: inherit;
	font-weight: 800;
	cursor: pointer;
	touch-action: manipulation;
}

.sb-select-all {
	border: 0;
	background: #c92d63;
	color: #fff;
	box-shadow: 0 7px 18px rgba(201, 45, 99, .2);
}

.sb-select-all:disabled {
	background: #17366f;
	color: #fff;
	cursor: default;
}

.sb-clear-all {
	border: 1px solid #c92d63;
	background: #fff;
	color: #c92d63;
}

.sb-grade {
	justify-content: space-between;
	gap: .65rem;
}

.sb-grade button {
	min-height: 32px;
	padding: .25rem .65rem;
	border: 1px solid rgba(255, 255, 255, .7);
	background: #fff;
	color: #17366f;
	font-size: .78rem;
}

.sb-grade button.is-active {
	border-color: #fff;
	background: #c92d63;
	color: #fff;
}

@media (min-width: 761px) {
	.sb-promo {
		padding: 1.35rem;
	}

	.sb-promo-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.sb-price-list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.sb-bulk-actions {
		flex-direction: row;
		justify-content: center;
	}

	.sb-select-all {
		min-width: 420px;
		padding-inline: 1.25rem;
	}

	.sb-clear-all {
		padding-inline: 1rem;
	}

	.sb-grid {
		grid-template-columns: 118px repeat(5, minmax(115px, 1fr));
	}

	.sb-grade {
		flex-direction: column;
		padding: .4rem;
	}

	.sb-grade button {
		width: 100%;
		min-height: 28px;
		padding: .2rem .3rem;
		font-size: .68rem;
	}
}


/* Spacing and readability refinements v1.6.1 */
.sb-price-list {
	display: block;
	max-width: 560px;
	margin: .85rem auto 0;
}

.sb-price-list span {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .5rem;
	padding: .65rem .85rem;
	border: 1px solid #d9e2f0;
	border-radius: 10px;
	background: #fff;
	font-size: .9rem;
	line-height: 1.45;
}

.sb-price-list span:last-child {
	margin-bottom: 0;
}

.sb-bulk-actions {
	margin: 1.4rem 0 1.35rem;
	padding: .15rem 0;
}

.sb-select-all {
	min-height: 60px;
	padding: .9rem 1.2rem;
	border: 2px solid #fff;
	font-size: 1.02rem;
	line-height: 1.45;
	letter-spacing: .01em;
	box-shadow: 0 10px 24px rgba(201, 45, 99, .3), 0 0 0 2px #c92d63;
}

.sb-select-all:hover,
.sb-select-all:focus-visible {
	background: #a51f50;
	transform: translateY(-1px);
}

.sb-grade {
	padding: .45rem .55rem .45rem .85rem;
}

.sb-grade > span {
	white-space: nowrap;
}

.sb-grade button {
	min-width: 132px;
	min-height: 40px;
	margin-left: auto;
	padding: .5rem .85rem;
	border-width: 2px;
	font-size: .86rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
}

@media (min-width: 761px) {
	.sb-price-list {
		display: block;
	}

	.sb-grid {
		grid-template-columns: 205px repeat(5, minmax(115px, 1fr));
	}

	.sb-grade {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: .45rem .55rem .45rem .75rem;
	}

	.sb-grade button {
		width: auto;
		min-width: 132px;
		min-height: 38px;
		padding: .45rem .7rem;
		font-size: .8rem;
	}
}


/* Product price and details actions v1.6.3 */
.sb-choice .sb-unit-price {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: .35rem;
	padding: .12rem .55rem;
	border-radius: 999px;
	background: #17366f;
	color: #fff;
	font-size: .86rem;
	font-weight: 900;
	line-height: 1.4;
}

.sb-choice input:checked + span .sb-unit-price {
	background: #c92d63;
	color: #fff;
}

.sb-details-button {
	display: none;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	margin-top: .35rem;
	border: 1px solid #17366f;
	border-radius: 11px;
	background: #17366f;
	color: #fff;
	font-size: .9rem;
	font-weight: 800;
	text-decoration: none;
}

.sb-details-button:hover,
.sb-details-button:focus-visible {
	background: #102957;
	color: #fff;
}

.sb-choice.is-selected .sb-details-button {
	display: flex;
}


/* Keep the details label readable over the navy button. */
.sb-choice .sb-details-button,
.sb-choice .sb-details-button:visited {
	color: #fff;
}

body .sb-selector .sb-choice a.sb-details-button,
body .sb-selector .sb-choice a.sb-details-button:visited,
body .sb-selector .sb-choice a.sb-details-button:hover,
body .sb-selector .sb-choice a.sb-details-button:focus-visible {
	color: #fff !important;
}


/* Availability-aware catalogue v1.6.6 */
.sb-unavailable {
	min-height: 88px;
	padding: .5rem;
	border: 1px dashed #d9a9bb;
	border-radius: 14px;
	background: #fff7fa;
	color: #a94468;
	font-size: .82rem;
	font-weight: 800;
	text-align: center;
}

.sb-grade-soon {
	margin-left: auto;
	padding: .35rem .7rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: .78rem;
	font-weight: 800;
}

@media (min-width: 761px) {
	.sb-promo-grid {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	}

	.sb-unavailable {
		min-height: 86px;
	}
}
