.unavailable{
	height: 34px;
	text-align: center;
	font-size: 12px;
	background: var(--gray-d-20);
	min-width: 60px;
}
.temp.unavailable{
	color: #fff;
}
.reg.unavailable{
	color: var(--black-l-40);
}
.style-page {
	margin: 0;
	width: 100%;
	position: relative;
	padding: 15px 0 46px;
}
/* Reserve row height so the async-hydrated Trustpilot rating does not push
   price/cart/design blocks down ~30px when stars render. */
.tp-widget {
	display: block;
	min-height: 30px;
}
#main_image {
	width: auto;
}
#style-image-column {
	position: relative;
	z-index: 2;
}
@media (min-width: 992px) {
	.style-page {
		width: 100%;
		margin: 0;
	}
	/* Equal-height columns so the sticky stage can travel the full rail height.
	   Sticky lives on the stage card: BS3's floated columns don't stretch,
	   which leaves position:sticky with no room to pin. */
	.style-main {
		display: flex;
	}
	.style-main > [class*="col-"] {
		float: none;
	}
	.product-stage {
		position: sticky;
		top: 110px;
	}
}
@media (min-width: 1366px) {
	.content-wrapper,
	#main {
		max-width: 1404px;
	}
	.style-page {
		margin: 0;
	}
}
.shopping-cart-total span {
	border-radius: 50%;
}
.display_short_price .price {
	position: relative;
	line-height: 60px;
	left: 0;
}
.price-wrapper .price-save {
	font-size: var(--xs-font-size);
	color: white;
	font-weight: var(--heavy-font-weight);
	border-color: transparent;
	background: var(--blue-light);
	border-radius: 999px;
	padding: 10px;
}
.sales-limit-container {
	border: 1px solid var(--gray-d-10);
	padding: 10px;
	border-radius: 10px;
	background-color: var(--gray-d-10);
	color: var(--gray-d-60);
	font-size: var(--xs-font-size);
}

.price-wrapper .perc-save-block {
	display: flex;
	justify-content: start;
	align-content: center;
}

.style_alternative {
	margin-top: 3em;
	text-align: left;
}
.price-style-description {
	display: block;
    font-size: 1.3em;
    color: var(--black-l-10);
    line-height: 1.4em;
    font-weight: 400;
}
.price-style-description sup {
	top: -.2em;
}
.price-style-description span {
	font-weight: 600;
}
.action-header {
	border-top: 1px solid var(--standard-hr-color);
	margin-top: 40px;
}
.action-header h2 {
    font-size: 26px;
    background: #fff;
    color: var(--black-l-10);
    padding: 10px 20px 10px 0;
    margin: -26px 0 10px;
    display: inline-block;
    font-weight: 500;
    vertical-align: middle;
}
h1.product-name {
	color: var(--black-l-10);
	line-height: normal;
	margin: 0;
	font-size: 24px;
	font-weight: 400;
	max-width: 810px;
}
.product-id {
    color: var(--blue-dark);
	font-weight: var(--medium-font-weight);
}
.alternate-images {
	transition: all .15s linear;
}
.alternate-images img {
	margin-bottom: 10px;
	border: 1px solid var(--gray-d-30);
	cursor: pointer;
}
.alternate-images img.active {
	border-color: #999;
}
.alternate-images img:hover {
	border-color: var(--standard-hr-color);
}
.sidebar-style {
	background: #daf5f7;
	padding: 1px 15px;
}
.sidebar-style h2 {
	background: #daf5f7 !important;
}
.accordion-container {
	margin-top: 40px;
}
.product-image-container .badge {
	position: absolute;
	top: 0;
	right: 0;
	background-color: var(--primary);
	color: white;
	font-size: var(--regular-font-size);
	font-weight: var(--heavy-font-weight);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	z-index: 1;
}
.product-image-container .sale-text {
	position: absolute;
	top:0;
	left:0;
	color: var(--primary);
	font-size: var(--regular-font-size);
	font-weight: var(--heavy-font-weight);
	text-align: left;
	z-index: 1;
}
.btn-buy {
	padding: 10px 36px;
}
.style-info-name {
	margin-bottom: 50px;
	padding-bottom: 0;
	position: relative;
}
.style-info-buy {
	padding-top: 40px;
}
.style_cart_table input, .cart_no_edit_row_qty {
	width: 44px;
	font-size: var(--standard-font-size);
	line-height: 30px;
	height: auto;
}
.temp-unavailable, .totes-unavailable {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	font-size: var(--standard-font-size);
	line-height: normal;
	height: 38px;
	border: 1px solid var(--gray-d-10);
	border-radius: 0;
	background: #fff;
	vertical-align: middle;
}
/* the legend explains the grid's marker cells; Simple view spells
   availability out per size row, so the legend rides with the grid only */
#grid-cart.grid-offscreen ~ .style-availability-issue {
	display: none;
}
/* one-size products render as the standard single-column grid — the legacy
   .singular rule floats every <tr> into a wrapped multi-column collage,
   which disintegrates the restyled table */
.colors-step .style_cart_table.singular tr {
	float: none;
	padding: 0;
}
/* glyphs ride the flexbox centering — cancel default.css's absolute
   top-left/baseline positioning. Same icon, size, and color as the
   "✖ - Sold Out" legend under the grid. */
.temp-unavailable:before, .totes-unavailable:before {
	position: static;
	margin: 0;
	display: block;
	line-height: 1;
	font-size: var(--small-font-size);
	color: var(--gray-d-30);
	/* FontAwesome's ink rides 1-2px below its em-box center (pixel-measured) */
	transform: translateY(-1px);
}
.style_cart_table .swatch {
	height: 34px;
	width: 34px;
	cursor: pointer;
}
.no-touch .style_cart_table tr:hover input {
	background: #fff;
}
.price-blocks, .digital-print-block {
	text-align:center;
	text-transform:uppercase;
	font-weight:500;
}

.price-blocks .top-text {
	line-height:20px;
	font-size:17px;
	min-height:52px;
	max-width:200px;
	margin:10px auto;
	position:relative;
}

.price-blocks .top-text.top-text-short {
	min-height: 26px;
}

.price-blocks .mid-text {
	font-size:45px;
	font-weight:700;
	line-height: 38px;
	padding-bottom:5px;
}

.price-blocks .mid-text sup {
	top:-.35em;
	font-size:65%;
}

.price-blocks .product-tooltip {
	position:absolute;
	top:0;
	right:-9px;
	font-size:12px;
	cursor:pointer;
	color:red;
}

.price-blocks .tooltip > .tooltip-inner {
	min-width:350px;
	padding: 15px 10px 15px 15px;
	background-color: white;
	color: black;
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
	text-align:left;
	text-transform:none;
}
.table-flow {
	max-height: 565px;
	overflow: auto;
	position: relative;
}
.style_cart_table thead {
	position: sticky;
	z-index: 1;
	background-color: var(--off-white);
	top: 0;
}
.remove-logo {
	color: #900;
	position: absolute;
	cursor:pointer;
	top: 3px;
	right: 4px;
	font-size: var(--standard-font-size);
}
@media (max-width:992px ){
	.table-flow {
		margin: 0 auto 25px;
	}
	.style_cart_table {
		margin: 0 auto;
	}
	.btn-buy {
		float: none !important;
	}
}
@media (max-width: 960px) {
	.for-smaller {
		display: block;
		text-align:center;
	}
	.for-smaller h1.product-name {
		max-width: 100%;
	}
	.price-style-description {
		display:none;
	}
	.price-wrapper {
		text-align: center !important;
	}
}
@media (max-width:768px) {
	.action-header h2 {
		padding: 10px 20px;
	}
	.add-to-cart-position {
		text-align: center;
	}
	.companion-wrapper {
		margin-bottom: 10px;
	}
	.decoration-toggle {
		margin-top: 12px;
		margin-bottom: 10px;
	}
	.decoration-option {
		min-width: 100px;
		padding: 10px 12px;
	}
	.price-blocks {
		margin-bottom:25px;
	}
	.price-blocks:last-of-type {
		margin-bottom:0;
	}
	.price-blocks .top-text {
		max-width:200px;
		margin: 0 auto;
		min-height:48px;
	}
	.price-blocks .tooltip > .tooltip-inner {
		min-width:175px;
	}
	#style-cart-container {
		padding-left:0;
	}
}
@media (max-width:480px) {
	.style-page {
		margin: 10px 0;
		width: 100%;
	}
	.style_cart_form{
		width: 100%;
		margin-left: 0;
	}
	.nopad-sm {
		padding: 0 15px !important;
	}
	.masonry-grid {
		margin: 0 auto 0 !important;
	}
	.style_cart_table .swatch {
		height: 27px;
		width: 27px;
	}
	.style_cart_table input, .cart_no_edit_row_qty {
		line-height: 26px;
		min-width:35px;
		max-width:35px;
	}
	.temp-unavailable, .totes-unavailable {
		min-width: 35px;
		max-width:35px;
		height:34px;
		line-height:normal;
	}
	.design-center.not-logged-in {
		border-right: none !important;
	}
	#main-images {
		padding: 0 40px;
	}
}
@media (min-width:980px) and  (max-width: 1080px){
	.style_cart_table input {
		padding: 10px 3px;
	}
}
/* end order grid and logo slider only */
.go_logo_threads{
	cursor:pointer;
}
.mobile-swatch-container {
	position: relative;
	text-align: center;
    padding: 8px 0 3px 5px;
	margin-bottom:10px;
}
.swatch {
	margin: 7px 5px 0 0;
	vertical-align:middle;
	width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
}
.mobile-swatch {
	cursor: pointer;
	width:30px;
	height:30px;
}

/* UPDATED PHONE */
.price-style-description.sm {
	display:none;
}
#how-to-measure {
	float: right;
}
.style_bullets p {
	margin: 0;
	font-size: 0.8em;
}
.price-style-description {
	line-height: 1em;
	font-size: 1.2em;
	vertical-align: middle;
	margin-top: 6px;
	float: left;
	margin-right: 20px;
	margin-left: 15px;
}
.style-page .star-reviews {
	float: right;
	cursor: pointer;
	color: #666;
}
.style-page .star-reviews i {
	color:#F7941D;
}

@media (max-width: 480px) {
	.nopad-sm {
		padding: 0;
	}
	.style-page .star-reviews {
		float: none;
		display:block;
		text-align:center;
		line-height: 1.4em;
	}
	.style-page .style-page {
		margin: 10px 0 30px;
		width: auto;
	}
	.breadcrumb {
		display: inline-block;
		margin-bottom:11px;
	}
	.breadcrumb .active {
		display: none;
		margin-bottom:11px;
	}
	.mobile-swatch-container {
		z-index: 3;
		top: auto;
		/*bottom: 5px;*/
	}
	h1.product-name {
		font-size: 21px;
	}
	.alternate-images {
		opacity: 1;
	}
	.price-wrapper {
		background: #f1f1f1;
		padding: 30px 20px;
		margin-top: 18px;
		border-radius: 7px;
	}
	.price-wrapper + .digital-print-wrapper {
		position: relative;
		top: -55px;
	}
	.price-style-description.sm {
		display:block;
	}
	.for-smaller {
		text-align: left;
	}
	.btn-buy span {
		display: none;
	}
	.style_cart_table {
		margin: auto;
	}
	.pagescrollup {
		bottom: 5px;
	}
	.tab-content .action-header {
		text-align: center !important;
	}
	.tab-content {
		border: none !important;
	}
	.hide-for-phone {
		display: none !important;
	}
	.center-for-phone {
		text-align:center;
	}
	#how-to-measure {
		float: none;
		padding: 20px;
		display: block;
		text-align: center;
	}
	.table-responsive {
		border: none;
	}
	.tab-pane {
		padding: 20px 0;
	}
	.add-to-cart {
		margin-right: 0 !important;
	}
	.price-wrapper .perc-save-block {
		justify-content: center;
	}
}


/* IMAGES & VIDEOS */
.alternate-images {
	z-index: 4;
	width: 100%;
	max-width: 50px;
	opacity: 0.8;
}

#style-images-carousel .carousel-control,
#style-images-modal-carousel .carousel-control {
	background-image: unset;
	width: 8%;
}
#style-images-carousel .carousel-inner .item img, #style-images-modal-carousel .carousel-inner .item img {
	width: auto;
}
#style-images-carousel .carousel-control .carousel-control-icon-container,
#style-images-modal-carousel .carousel-control .carousel-control-icon-container {
	width: 30px;
	height: 30px;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	color: var(--gray-d-60);
	text-align: center;
	opacity: 0.8;
	transition: opacity 0.3s ease;
}

#style-images-carousel:hover {
	cursor: pointer;
}

#style-images-carousel .carousel-control:hover,
#style-images-modal-carousel .carousel-control:hover,
#style-images-carousel .carousel-control:focus,
#style-images-modal-carousel .carousel-control:focus {
	opacity: 1;
	text-decoration: none;
}

#style-images-carousel .carousel-control .carousel-control-icon-container,
#style-images-modal-carousel .carousel-control .carousel-control-icon-container {
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
}

#style-images-carousel .carousel-control .glyphicon-chevron-left,
#style-images-modal-carousel .carousel-control .glyphicon-chevron-left {
	left: unset;
}

#style-images-carousel .carousel-control .glyphicon-chevron-right,
#style-images-modal-carousel .carousel-control .glyphicon-chevron-right {
	right: unset;
}

#style-images-carousel .carousel-control .glyphicon,
#style-images-modal-carousel .carousel-control .glyphicon {
	font-size: var(--xs-font-size);
	top: 25%;
}

.zoom-container {
	position: relative;
	cursor: zoom-in;
}

.zoom-container.zoomed-in {
	cursor: zoom-out;
}

.zoom-container.zoomed-in > span {
	overflow: hidden !important;
}

.product-video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow-x: hidden;
}
.product-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#product-video-thumbnail {
	width: 100%;
	padding: 0;
	margin-bottom: 15px;
	border: 1px solid var(--standard-hr-color);
	text-align: center;
	cursor: pointer;
	background: var(--gray);
	transition: all .15s linear;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	aspect-ratio: 1;
}
#product-video-thumbnail i {
	font-size: 16px;
	background: rgba(0,0,0,0.55);
	color: rgba(255,255,255,0.9);
	padding: 6px 6px 6px 8px;
	border-radius: 50%;
	line-height: 1;
}
#product-video-thumbnail span {
	display: block;
	font-size: 9px;
	color: rgba(0,0,0,0.5);
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
#product-video-thumbnail:hover {
	border-color: var(--blue-dark);
}
#product-video-thumbnail:hover i {
	background: var(--blue-dark);
}
#product-video-thumbnail:hover span {
	color: var(--blue-dark);
}
a[data-toggle="modal"] {
	cursor: pointer;
}
#modal-video .modal-backdrop.in {
    filter: alpha(opacity=7);
    opacity: 0.7;
}

#modal-video .modal-content {
    background: none;
    border: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#modal-video .modal-body {
    padding: 0 25px 25px 25px;
}

#modal-video .modal-header {
    padding: 25px 25px 15px 25px;
    text-align: right;
}

#modal-video .modal-header, .modal-footer {
    border: 0;
}

#modal-video .modal-header .close {
    float: none;
    margin: 0;
    font-size: 36px;
    color: rgba(255,255,255,0.8);
    font-weight: 300;
    text-shadow: none;
    opacity: 1;
}
#modal-video .modal-header .close:hover {
	color: rgba(255,255,255,1) !important;
}
.glow-effect {
	box-shadow: 0 0 0 3px rgb(142 250 255) !important;
}
.measurementbox {
	border-color: var(--standard-hr-color) !important;
	padding: 10px;
}
.style-position-card {
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid var(--gray-d-40);
	border-radius: 5%;
	min-width: 300px;
	min-height: 400px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.style-position-card .card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.style-position-card .card-body .card-img-top {
	height: 300px;
}
.style-position-card:hover {
	cursor: pointer;
	transform: translateY(-5px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.logo-position-image {
	height: 150px;
	width: 100%;
	object-fit: contain;
	object-position: top;
	border-radius: 10px;
	padding: 10px;
}
.logo-position-modal { min-width: 900px; }
@media screen and (max-width: 776px) {
	.style-position-card { width: 250px; min-width: unset; min-height: 300px; }
	.logo-position-modal { min-width: unset !important;	}
	#select-logo-location-placeholder { display: flex; flex-direction: column;	}
	.style-position-card .card-body .card-img-top { height: 200px; }
}

/* =====================================================================
   Product page shell: header/price row + two-column sticky stage
   and step rail. All colors come from qb-brand-guide tokens.
   ===================================================================== */
.style-page {
	--card-line: var(--gray-d-10);
}
/* Soft full-bleed backdrop so the white stage/rail cards read as cards.
   100vw includes the scrollbar gutter, so the root clips horizontal
   overflow while this page is rendered (clip does not create a scroll
   container, keeping position:sticky intact). */
html:has(.style-page[data-page-type="style"]) {
	overflow-x: clip;
}
.style-page::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--gray);
	z-index: -1;
}

.style-header .breadcrumb {
	background: none;
	padding: 0;
	margin: 0 0 2px;
	font-size: var(--xs-font-size);
}
.style-header h1.product-name {
	margin: 4px 0 10px;
	font-size: 30px;
	font-weight: var(--xx-heavy-font-weight);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-align: left;
	max-width: none;
	color: var(--black);
}
.style-header-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-bottom: 6px;
	font-size: var(--small-font-size);
}
.style-header-meta .tp-widget {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	margin: 0;
}
/* Data carrier for style.js — the style number is not shown in the redesign */
#product-id {
	display: none;
}

.style-price {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
}
.style-price .regular-price {
	font-size: var(--regular-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--gray-d-40);
}
.style-price .sale-price {
	font-size: 28px;
	font-weight: var(--xx-heavy-font-weight);
	color: var(--blue-dark);
	line-height: 1;
}
.price-each {
	font-size: var(--xs-font-size);
	color: var(--gray-d-50);
}
.sale-badge {
	font-size: var(--xs-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: #fff;
	background: var(--blue-light);
	border-radius: 999px;
	padding: 4px 12px;
	align-self: center;
}
.price-note {
	font-size: var(--xs-font-size);
}

.product-stage {
	background: #fff;
	border: 1px solid var(--card-line);
	border-radius: 18px;
	padding: 18px;
	box-shadow: 0 18px 44px -30px rgba(27, 39, 51, 0.35);
}
.product-stage #main-images {
	justify-content: center;
}

.buy-rail {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.rail-step {
	background: #fff;
	border: 1px solid var(--card-line);
	border-radius: 14px;
	padding: 16px 18px;
	position: relative;
}
.style-unavailable {
	text-align: center;
}

/* Stack the legacy cart sections as full-width rail cards until their
   own overhaul tickets rebuild them (logo step above colors & sizes). */
#style-info-buy .style_cart {
	margin: 0 !important;
}
#style-info-buy .design-center,
#style-info-buy .style_cart .col-md-3 {
	width: 100%;
	float: none;
}
#style-info-buy #style-cart-container {
	width: 100%;
	float: none;
	padding: 0;
}
#style-info-buy .well {
	background: #fff;
	border: 1px solid var(--card-line);
	border-radius: 14px;
	box-shadow: none;
}

#style-info-buy .btn-primary.add-to-cart {
	background: var(--primary);
	border-color: var(--primary);
	border-radius: 13px;
	padding: 16px;
	width: 100%;
	font-weight: var(--xx-heavy-font-weight);
	font-size: 20px;
	box-shadow: 0 12px 24px -12px hsla(200, 65%, 30%, 0.55);
}
.no-touch #style-info-buy .btn-primary.add-to-cart:hover,
#style-info-buy .btn-primary.add-to-cart:focus,
#style-info-buy .btn-primary.add-to-cart:active {
	background: var(--blue-hover);
	border-color: var(--blue-hover);
}

@media (max-width: 991px) {
	.style-header h1.product-name { font-size: 24px; }
	.style-price .sale-price { font-size: 24px; }
	.product-stage { padding: 12px; }
}

/* Compact stage: cap the garment image so the stage stays shorter than
   the rail, giving the sticky column room to pin while scrolling. */
.product-stage .carousel-inner img,
.product-stage #main_image {
	max-height: 540px;
	width: auto;
}
.product-stage .carousel-inner .item {
	text-align: center;
}

/* Colors & sizes step: Simple/Grid modes + live item total */
.colors-step-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 13px;
}
.colors-step-title {
	margin: 0;
	font-size: var(--small-font-size);
	font-weight: var(--xx-heavy-font-weight);
	color: var(--black);
}
.cart-mode-toggle {
	display: flex;
	border: 1.5px solid var(--gray-d-10);
	border-radius: 9px;
	overflow: hidden;
}
.cart-mode-toggle button {
	border: none;
	background: #fff;
	font-size: var(--xs-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--gray-d-50);
	padding: 6px 14px;
	cursor: pointer;
}
.cart-mode-toggle button.on {
	background: var(--primary);
	color: #fff;
}
.simple-swatch-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 13px;
	padding-top: 6px;
}
.simple-swatch-row[hidden] {
	display: none;
}
.simple-swatch {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.14);
	cursor: pointer;
	padding: 0;
}
.simple-swatch.on,
.simple-swatch.glow-effect {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--primary);
}
.simple-swatch-qty {
	position: absolute;
	top: -9px;
	right: -9px;
	background: var(--green-dark);
	color: #fff;
	font-size: var(--xs-font-size);
	font-weight: var(--xx-heavy-font-weight);
	border-radius: 99px;
	padding: 0 5px;
	border: 2px solid #fff;
	line-height: 1.35;
}
/* Styles with a long palette pick their color from a named list. The
   wrapper is not .dropdown: default.css force-shows every .dropdown menu on
   hover for the top nav, which would override this menu's click open/close. */
.simple-color-select {
	position: relative;
	margin-bottom: 13px;
}
.simple-color-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 12px;
	border: 1.5px solid var(--gray-d-10);
	border-radius: 9px;
	background: var(--pure-white);
	font-size: var(--small-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--black);
	text-align: left;
	cursor: pointer;
}
.simple-color-select.open .simple-color-toggle {
	border-color: var(--primary);
}
.simple-color-dot {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.14);
}
.simple-color-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.simple-color-chevron {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-left: auto;
	color: var(--gray-d-50);
	transition: transform 0.2s ease;
}
.simple-color-select.open .simple-color-chevron {
	transform: rotate(180deg);
}
.simple-color-menu {
	width: 100%;
	max-height: 320px;
	overflow-y: auto;
	padding: 4px 0;
	border: 1.5px solid var(--gray-d-10);
	border-radius: 9px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.simple-color-menu > li > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	white-space: normal;
	font-size: var(--small-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--black);
}
.simple-color-menu > li > a:hover,
.simple-color-menu > li > a:focus {
	background: var(--off-white);
	color: var(--black);
	text-decoration: none;
}
.simple-color-menu > li > a.on {
	background: hsla(var(--blue-h), var(--blue-s), var(--blue-l), 0.08);
	box-shadow: inset 3px 0 0 var(--primary);
}
.simple-color-menu .simple-swatch-qty {
	position: static;
	margin-left: auto;
	padding: 0 7px;
	border: none;
}
.simple-size-caption {
	font-size: var(--xs-font-size);
	color: var(--gray-d-50);
	margin-bottom: 8px;
}
.simple-size-caption b {
	color: var(--black);
}
.simple-size-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-bottom: 1px dashed var(--gray-d-10);
	padding: 7px 0;
}
.simple-size-row:last-child {
	border-bottom: none;
}
.simple-size-name {
	font-size: var(--xs-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--black);
}
.simple-size-name small {
	display: block;
	font-size: var(--xs-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--green-dark);
}
.simple-stepper {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--gray-d-10);
	border-radius: 9px;
	overflow: hidden;
}
.simple-stepper .simple-step {
	width: 34px;
	height: 34px;
	border: none;
	background: var(--gray);
	color: var(--primary);
	font-size: var(--regular-font-size);
	font-weight: var(--xx-heavy-font-weight);
	line-height: 1;
	cursor: pointer;
}
.simple-stepper .simple-qty {
	width: 52px;
	height: 34px;
	border: none;
	text-align: center;
	font-size: var(--xs-font-size);
	font-weight: var(--xx-heavy-font-weight);
	-moz-appearance: textfield;
}
.simple-stepper .simple-qty::-webkit-outer-spin-button,
.simple-stepper .simple-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.simple-stepper .simple-qty:focus {
	outline: none;
	background: var(--gray);
}
.simple-unavailable {
	font-size: var(--xs-font-size);
	color: var(--gray-d-40);
}
.simple-size-name .simple-low-note {
	color: var(--yellow-dark);
}

/* Hidden-but-jQuery-visible: style.js filters color rows with :visible,
   which display:none would defeat. The step card is position:relative. */
.grid-offscreen {
	position: absolute !important;
	left: -200vw;
	top: 0;
	visibility: hidden;
}
.item-total-step {
	border-width: 1.5px;
}
.item-total-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
}
.item-total-label {
	font-size: var(--xs-font-size);
	font-weight: var(--xx-heavy-font-weight);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gray-d-50);
}
.item-total-amount {
	font-size: 32px;
	font-weight: var(--xx-heavy-font-weight);
	color: var(--blue-dark);
	line-height: 1.05;
}
.item-total-meta {
	text-align: right;
	font-size: var(--xs-font-size);
	color: var(--gray-d-50);
}
.item-total-meta b {
	color: var(--black);
	font-size: var(--small-font-size);
}

/* Grid-mode cell hover arrows (from the shared cart template this file's
   qboro override replaces — the rules travel with the override now). */
.style_cart_table {
	position: relative;
}
.colors-step .arrows {
	position: absolute;
	top: 0;
	right: -3px;
	height: 100%;
	width: 10px;
	display: flex;
	flex-direction: column;
	background-color: var(--gray);
	border-left: 1px solid var(--gray-d-20);
	visibility: hidden;
	z-index: 2;
	transition: transform 0.3s ease;
}
.colors-step .arrows .arrow {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-size: 6px;
	padding: 0;
	text-align: center;
	margin: 0 auto;
	color: var(--gray-d-60);
	width: 100%;
}
.colors-step .arrows .arrow:hover {
	background-color: var(--gray-d-10);
}
.colors-step .arrows .up-arrow {
	border-bottom: 1px solid var(--gray-d-20);
	padding-left: 1px;
}
@media only screen and (min-width: 768px) {
	.colors-step .input-container-with-arrows {
		position: relative;
		display: inline-block;
		transition: all 0.3s ease;
	}
	.colors-step .input-container-with-arrows input {
		transition: all 0.3s ease;
	}
	.colors-step .input-container-with-arrows:hover input {
		padding-right: 10px !important;
		transform: scale(1.3);
		font-size: var(--xs-font-size);
		z-index: 2;
		position: relative;
	}
	.colors-step .input-container-with-arrows:hover .arrows {
		visibility: visible;
		transform: scale(1.2);
		z-index: 2;
	}
}

/* Logo step: dropzone (guest), logo cards, placement row, add row */
.logo-step-title {
	font-size: var(--small-font-size);
	font-weight: var(--xx-heavy-font-weight);
	color: var(--black);
	margin-bottom: 13px;
	text-align: left;
}
.logo-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	text-align: center;
	border: 2px dashed var(--primary);
	background: var(--off-white);
	border-radius: 12px;
	padding: 28px 18px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	text-decoration: none;
}
/* Element-qualified so it out-cascades the global .no-touch a:hover
   underline at equal specificity. */
a.logo-dropzone:hover,
a.logo-dropzone:focus {
	background: var(--gray);
	border-color: var(--blue-hover);
	text-decoration: none;
}
.logo-dropzone-icon {
	color: var(--primary);
	font-size: 30px;
	line-height: 1;
}
.logo-dropzone b {
	font-size: var(--small-font-size);
	color: var(--black);
}
.logo-dropzone-hint {
	font-size: var(--xs-font-size);
	color: var(--gray-d-50);
}

.logo-options .logo-card {
	border: 1.5px solid var(--gray-d-10);
	border-radius: 12px;
	padding: 13px;
	margin-bottom: 11px;
	position: relative;
	background: #fff;
}
/* Card anatomy: logo tile | action column. The action column holds the
   logo's name and readiness, the placement setting row, and one row of
   action tiles that grows to meet the logo tile's height. Below 1200px the
   rail is too narrow for two columns, so the action column drops under the
   logo. */
.logo-card-row {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 14px;
	text-align: left;
}
.logo-card-tile {
	flex: 0 0 auto;
	width: 210px;
}
.logo-card .logo-thumb {
	width: 210px;
	/* stretch with the action column (min-height carries the wrapped
	   layouts, where the percentage has nothing to resolve against) */
	height: 100%;
	min-height: 210px;
	border-radius: 10px;
	border: 1px solid var(--gray-d-10);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}
.logo-card .logo-thumb img.style-logo-preview {
	max-width: 194px;
	max-height: 194px;
}
/* The tile re-renders on every logo or ink change. The site's small spinner
   vanishes against a logo on a dark item color, so the tile dims under a
   scrim with a larger brand-blue spinner while the new render loads. */
.logo-card .logo-thumb > .spin-wrapper {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: hsla(0, 0%, 100%, 0.75);
	z-index: 2;
}
.logo-card .logo-thumb > .spin-wrapper > .spin {
	width: 48px;
	height: 48px;
	margin: 0;
	border: 5px solid var(--gray-d-10);
	border-top-color: var(--primary);
	background-color: var(--pure-white);
	box-shadow: 0 2px 10px hsla(0, 0%, 0%, 0.18);
	animation: logo-tile-spin 0.8s linear infinite;
}
@keyframes logo-tile-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.logo-card .logo-thumb > .spin-wrapper > .spin {
		animation-duration: 2.4s;
	}
}
.logo-card-name {
	font-weight: var(--xx-heavy-font-weight);
	font-size: var(--small-font-size);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	color: var(--black);
	margin-bottom: 8px;
	position: relative;
}
.logo-placement-label {
	display: block;
	font-size: var(--xs-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--gray-d-50);
	line-height: 1.25;
	margin: 0 0 4px;
}
/* The names tool inserts its "Showing … on the garment" picker before the
   placement field, so it opens the action column. */
.logo-card-meta > .qbnt-showing {
	margin: 0 0 10px;
}
.logo-card-meta {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.logo-pending-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--xs-font-size);
	font-weight: var(--x-heavy-font-weight);
	border-radius: 99px;
	padding: 2px 9px;
	cursor: help;
}
.logo-pending-badge.is-setup {
	color: var(--yellow-dark);
	background: var(--yellow-light);
}
.logo-pending-badge.is-other {
	color: var(--blue-dark);
	background: var(--gray);
}
.logo-pending-badge .logo-group-icon,
.logo-pending-info {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}
/* Explainer for the badge, anchored to the name row so it can use the row's
   width; same look as the Logo Type tooltip. */
.logo-pending-tip {
	display: none;
	position: absolute;
	z-index: 20;
	top: calc(100% + 8px);
	left: 0;
	box-sizing: border-box;
	width: max-content;
	max-width: min(330px, 100%);
	padding: 11px 13px;
	border-radius: 10px;
	background: var(--black);
	color: var(--pure-white);
	font-weight: var(--medium-font-weight);
	line-height: 1.5;
	box-shadow: 0 14px 30px -10px hsla(var(--black-h), var(--black-s), var(--black-l), 0.5);
}
.logo-pending-badge:hover .logo-pending-tip,
.logo-pending-badge:focus .logo-pending-tip {
	display: block;
}
/* Actions share one row as equal tiles, icon over label; tiles that are
   hidden (e.g. Add Instructions once a note exists) give their share to the
   rest. */
.logo-card-links {
	display: flex;
	gap: 8px;
	flex: 1 1 auto;
}
a.logo-card-link {
	flex: 1 1 0;
	min-width: 0;
	min-height: 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 4px;
	border: 1px solid var(--gray-d-10);
	border-radius: 8px;
	background: #fff;
	color: var(--primary);
	font-weight: var(--x-heavy-font-weight);
	font-size: var(--xs-font-size);
	line-height: 1.2;
	text-align: center;
	overflow-wrap: anywhere;
	cursor: pointer;
}
/* A names card has a single action: keep it a plain button, not one wide tile. */
.logo-card.qbnt-names-card .logo-card-links {
	flex: 0 0 auto;
}
.logo-card.qbnt-names-card a.logo-card-link {
	flex-direction: row;
	min-height: 0;
	gap: 8px;
	padding: 9px 12px;
}
a.logo-card-link:hover {
	border-color: var(--primary);
	color: var(--blue-hover);
	text-decoration: none;
}
/* Quiet at rest — the red only appears once the cursor commits to it. */
.logo-card .remove-logo {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: none;
	color: var(--gray-d-40);
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	transition: background-color .15s, color .15s;
}
.logo-card .remove-logo:hover {
	background: var(--red-light);
	color: var(--red-dark);
}

/* Hard goods keep the labeled dropdown; everything else gets the setting
   row below. */
.logo-position-container.logo-placement-field {
	margin: 0 0 10px;
}
/* Single-color items: the imprint ink is a labeled dropdown under Placement,
   drawn to match the placement select. */
.logo-imprint-field {
	position: relative;
	margin: 0 0 10px;
}
.logo-imprint-hint {
	font-weight: var(--medium-font-weight);
}
.logo-imprint-select {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 40px;
	padding: 6px 12px;
	border: 1px solid var(--gray-d-20);
	border-radius: 4px;
	background: var(--pure-white);
	color: var(--black);
	font-size: var(--xs-font-size);
	text-align: left;
}
.logo-imprint-select:hover,
.logo-imprint-field.is-open .logo-imprint-select {
	border-color: var(--primary);
}
.logo-imprint-select.is-empty {
	color: var(--gray-d-60);
}
.logo-imprint-select .fa {
	margin-left: auto;
	color: var(--gray-d-50);
}
.logo-imprint-swatch {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--gray-d-30);
}
.logo-imprint-select.is-empty .logo-imprint-swatch {
	border: 2px dashed var(--gray-d-30);
	box-shadow: none;
}
.logo-imprint-options {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	right: 0;
	width: max(100%, 340px);
	max-height: 320px;
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 8px;
	padding: 10px;
	background: var(--pure-white);
	border: 1px solid var(--gray-d-20);
	border-radius: 10px;
	box-shadow: 0 18px 38px -14px hsla(215, 55%, 24%, 0.4);
}
.logo-imprint-options[hidden] {
	display: none;
}
.logo-imprint-option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 7px 8px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--black);
	font-size: var(--xs-font-size);
	text-align: left;
}
.logo-imprint-option:hover,
.logo-imprint-option:focus-visible {
	background: var(--gray);
}
.logo-imprint-option[aria-pressed="true"] {
	background: hsla(var(--blue-h), var(--blue-s), var(--blue-l), 0.12);
	font-weight: var(--x-heavy-font-weight);
}
.logo-imprint-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.logo-imprint-options {
		width: 100%;
		grid-template-columns: 1fr;
	}
}
/* Add To Cart pressed without an ink: a red outline and a message above the
   dropdown, kept until an ink is picked, plus a one-shot pulse. */
.logo-imprint-error {
	display: none;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	color: var(--red);
	font-size: var(--xs-font-size);
	font-weight: var(--x-heavy-font-weight);
	line-height: 1.3;
}
.logo-imprint-field.has-error .logo-imprint-error {
	display: flex;
}
.logo-imprint-field.has-error .logo-imprint-select {
	border-color: var(--red);
	box-shadow: 0 0 0 3px hsla(var(--red-h), var(--red-s), var(--red-l), 0.15);
}
.logo-imprint-field.imprint-attention .logo-imprint-select {
	animation: imprint-error-pulse 1.25s ease-in-out 2;
}
@keyframes imprint-error-pulse {
	0%, 100% { box-shadow: 0 0 0 3px hsla(var(--red-h), var(--red-s), var(--red-l), 0.15); }
	50% { box-shadow: 0 0 0 6px hsla(var(--red-h), var(--red-s), var(--red-l), 0.35); }
}
@media (prefers-reduced-motion: reduce) {
	.logo-imprint-field.imprint-attention .logo-imprint-select {
		animation: none;
	}
}
/* A logo that fills its own frame prints as a solid block in one ink. */
.logo-imprint-solid {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 12px 0 0;
	padding: 9px 11px;
	border-radius: 8px;
	background: var(--yellow-light);
	color: var(--black);
	font-size: var(--xs-font-size);
	line-height: 1.45;
}
.logo-imprint-solid[hidden] {
	display: none;
}
.logo-imprint-solid .fa {
	margin-top: 2px;
	color: var(--yellow-dark);
}
.logo-imprint-solid a {
	font-weight: var(--x-heavy-font-weight);
	text-decoration: underline;
}
/* Full-color items have nothing to pick; the card just says how it prints. */
.logo-print-note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: var(--xs-font-size);
	color: var(--gray-d-60);
}
.logo-print-note-dots {
	display: inline-flex;
}
.logo-print-note-dots i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: -3px;
	box-shadow: 0 0 0 1.5px var(--pure-white);
}
.logo-print-note-dots i:nth-child(1) { background: var(--blue); }
.logo-print-note-dots i:nth-child(2) { background: var(--yellow); }
.logo-print-note-dots i:nth-child(3) { background: var(--green); }
/* Placement setting row: position icon, then "Placement: <location>" in one
   run of type, then the pencil. One click target that opens the location
   modal. img/h4 are the direct children style.js populates on every position
   change; the hidden select stays the form control. */
.logo-position-container.logo-placement-setting {
	display: flex;
	align-items: center;
	margin: 0 0 10px;
	padding: 1px 12px 1px 4px;
	border: 1px solid var(--gray-d-10);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
}
.logo-position-container.logo-placement-setting:hover,
.logo-position-container.logo-placement-setting:focus-visible {
	border-color: var(--primary);
}
.logo-placement-setting > img.logo-position-image {
	flex: 0 0 72px;
	width: 72px;
	height: 74px;
	object-fit: contain;
	/* the base rule top-aligns and its 10px padding shrinks the drawing to
	   52px; the icons carry their own margins, and wide art (the visor PNG)
	   must center vertically */
	object-position: center;
	padding: 2px;
}
.logo-placement-setting > h4 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding-left: 12px;
	font-size: var(--small-font-size);
	font-weight: var(--xx-heavy-font-weight);
	color: var(--black);
	line-height: 1.25;
}
.logo-placement-setting > h4::before {
	content: "Placement:\00a0";
}
.logo-placement-setting > .logo-placement-pencil {
	margin-left: auto;
	padding-left: 8px;
	font-size: 18px;
	line-height: 1;
	color: var(--gray-d-40);
}
.logo-placement-setting:hover > .logo-placement-pencil {
	color: var(--primary);
}
.logo-placement-setting > select.style-logo-position {
	display: none;
}
@media (max-width: 1199px) {
	.logo-card-meta {
		flex-basis: 100%;
	}
}
@media (max-width: 480px) {
	.logo-card-tile,
	.logo-card .logo-thumb {
		width: 170px;
	}
	.logo-card .logo-thumb {
		min-height: 170px;
	}
	.logo-card .logo-thumb img.style-logo-preview {
		max-width: 154px;
		max-height: 154px;
	}
}

/* Instructions for our team: a note per logo slot, shown under the card row */
a.logo-card-link.logo-instructions-button::before {
	font-family: FontAwesome, sans-serif;
	content: "\f0f6";
	width: 15px;
	text-align: center;
	flex-shrink: 0;
}
.logo-card.qbnt-names-card .logo-instructions-button,
.logo-card.qbnt-names-card .logo-card-instructions {
	display: none !important;
}
.logo-card-instructions {
	margin-top: 12px;
	border: 1px solid var(--gray-d-10);
	border-radius: 8px;
	padding: 10px 12px;
	background: var(--off-white);
	text-align: left;
}
.logo-instructions-head,
.logo-instructions-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.logo-instructions-title {
	font-size: var(--xs-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--gray-d-50);
	margin: 0;
}
.logo-instructions-actions {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.logo-instructions-actions a {
	font-size: var(--xs-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--primary);
	cursor: pointer;
}
.logo-instructions-text {
	margin: 5px 0 0;
	font-size: var(--xs-font-size);
	color: var(--black);
	white-space: pre-line;
	overflow-wrap: anywhere;
}
.logo-instructions-hint {
	margin: 4px 0 8px;
	font-size: var(--xs-font-size);
	color: var(--gray-d-50);
}
.logo-card-instructions textarea.logo-instructions-input {
	height: auto;
	font-size: var(--xs-font-size);
	resize: vertical;
}
.logo-instructions-foot {
	margin-top: 8px;
}
.logo-instructions-count {
	font-size: var(--xs-font-size);
	color: var(--gray-d-50);
}

.logo-add-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
	margin-top: 11px;
	padding-top: 12px;
	border-top: 1px dashed var(--gray-d-10);
}
.logo-add-row #add-logo-container {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	width: auto;
	float: none;
}
a.logo-add-tile {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1.5px solid var(--gray-d-10);
	background: var(--off-white);
	border-radius: 10px;
	padding: 10px 11px;
	line-height: 1.25;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.14s, background 0.14s;
}
a.logo-add-tile:hover,
a.logo-add-tile:focus {
	border-color: var(--primary);
	background: var(--pure-white);
	text-decoration: none;
}
a.logo-add-tile:hover .add-tile-ico {
	color: var(--primary);
}
.add-tile-ico {
	position: relative;
	width: 30px;
	height: 30px;
	color: var(--gray-d-50);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.14s;
}
.add-tile-ico svg.add-tile-main {
	width: 27px;
	height: 27px;
}
.add-tile-plus {
	position: absolute;
	right: -6px;
	top: -6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--primary);
	color: var(--pure-white);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--pure-white);
}
.add-tile-plus svg {
	width: 8px;
	height: 8px;
}
.add-tile-txt {
	min-width: 0;
}
.add-tile-txt b {
	display: block;
	font-size: var(--xs-font-size);
	font-weight: var(--xx-heavy-font-weight);
	color: var(--standard-font-color);
}

/* Locker modal: the header hosts the title and the upload button; inside the
   body, .logo-locker is the one scroller for every group (group headers stick
   to its top) and the body itself only hosts the scroll-edge fades. */
.select-logo-modal .modal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-right: 56px;  /* room for the theme's absolutely placed close glyph */
}
.select-logo-modal .modal-header .modal-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}
.logo-upload-header {
	font-size: var(--xs-font-size);
	font-weight: var(--x-heavy-font-weight);
	padding: 7px 12px;
	white-space: nowrap;
}
.logo-upload-header .fa {
	margin-right: 4px;
}
.logo-upload-header .logo-upload-short {
	display: none;
}
@media all and (max-width: 570px) {
	.logo-upload-header .logo-upload-label { display: none; }
	.logo-upload-header .logo-upload-short { display: inline; }
	.select-logo-modal .modal-header .modal-title { font-size: 20px; }
}
/* The modal grows with the window up to 720px, always leaving some page
   below it; the locker takes the height the header and search leave, and a
   small locker still sizes to its content. Phones use nearly the full screen. */
.select-logo-modal .modal-content {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 140px);
	max-height: min(calc(100vh - 140px), 720px);
	max-height: min(calc(100dvh - 140px), 720px);
}
@media (max-width: 767px) {
	.select-logo-modal .modal-content {
		max-height: calc(100vh - 20px);
		max-height: calc(100dvh - 20px);
	}
}
.select-logo-modal .modal-header,
.select-logo-modal .logo-filter-bar {
	flex-shrink: 0;
}
.select-logo-modal .modal-body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.logo-filter-bar {
	padding: 12px 15px 0;
}
.logo-locker {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding-bottom: 16px;
}
.logo-locker ul.select-logo {
	margin: 0;
	column-gap: 12px;
	row-gap: 12px;
}
/* Each status group sits on its own panel, marked by the status colour down
   its left edge — the same colour its heading icon carries. A locker with a
   single group renders no heading and no panel. */
.logo-locker .logo-group {
	background: var(--off-white);
	border: 1px solid var(--gray-d-10);
	border-left-width: 4px;
	border-radius: 12px;
	padding: 0 14px 14px 11px;
}
.logo-locker .logo-group + .logo-group {
	margin-top: 16px;
}
.logo-locker .logo-group[data-group="ready"] { border-left-color: var(--green-dark); }
.logo-locker .logo-group[data-group="setup"] { border-left-color: var(--yellow-dark); }
.logo-locker .logo-group[data-group="other"] { border-left-color: var(--primary); }
.logo-group-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 13px 0 12px;
	background: var(--off-white);
	font-size: var(--small-font-size);
	font-weight: var(--xx-heavy-font-weight);
	color: var(--black);
}
.logo-group-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}
.logo-group-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}
.logo-group-icon.is-ready { color: var(--green-dark); }
.logo-group-icon.is-setup { color: var(--yellow-dark); }
.logo-group-icon.is-other { color: var(--primary); }
.logo-group-sub {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--xs-font-size);
	font-weight: 400;
	line-height: 1.45;
	color: var(--gray-d-50);
}
.logo-locker-empty {
	text-align: center;
	color: var(--gray-d-50);
	padding: 26px 10px 30px;
}
/* Soft scroll edges: tiles fade at the top/bottom of the grid's viewport
   instead of hard-clipping. Each fade shows only while content continues
   past that edge (fade-top / fade-bottom, kept in step by script). */
.select-logo-modal .modal-body::before,
.select-logo-modal .modal-body::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 30px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .18s;
	z-index: 2;
}
.select-logo-modal .modal-body::before {
	top: 15px;
	background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
}
.select-logo-modal .modal-body::after {
	bottom: 0;
	background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
}
.select-logo-modal .modal-body.fade-top::before { opacity: 1; }
.select-logo-modal .modal-body.fade-bottom::after { opacity: 1; }
.select-logo li {
	flex-direction: column;
	justify-content: flex-start;
	height: auto;
	min-height: 170px;
	padding: 10px 10px 8px !important;
	position: relative;
}
.select-logo li img {
	margin: auto 0;
}
.select-logo li .logo-option-cap {
	margin: auto -10px -8px;
	width: calc(100% + 20px);
	padding: 6px 8px 8px;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}
.select-logo li .logo-option-status {
	width: 100%;
	text-align: center;
	font-size: var(--xs-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--black);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 0;
}
.select-logo li .logo-option-when {
	width: 100%;
	text-align: center;
	font-size: var(--xs-font-size);
	line-height: 1.3;
	color: var(--gray-d-40);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 0;
}
.select-logo li .logo-option-status.is-unnamed {
	color: var(--gray-d-50);
	font-weight: 500;
}
.select-logo li.logo-option.is-selected {
	border-color: var(--primary);
}
.select-logo li.logo-option.is-selected::after {
	content: "\f00c";
	font-family: FontAwesome, sans-serif;
	position: absolute;
	top: 6px;
	right: 6px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--primary);
	color: #fff;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
/* Locker tiles: three to a row, lighter than the cart's own list. */
.logo-locker .select-logo li {
	width: calc((100% - 24px) / 3);
	border: 1px solid var(--gray-d-10);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.logo-locker .select-logo li.logo-option.is-selected {
	border-color: var(--primary);
	box-shadow: 0 0 0 1px var(--primary);
}
@media all and (max-width: 570px) {
	.logo-locker ul.select-logo {
		column-gap: 8px;
		row-gap: 8px;
	}
	.logo-locker .select-logo li {
		width: calc((100% - 8px) / 2);
	}
	.logo-locker .select-logo li .logo-option-cap {
		padding-left: 4px;
		padding-right: 4px;
	}
	.logo-locker .logo-group {
		padding: 0 8px 8px 5px;
	}
}
.logo-filter-empty {
	text-align: center;
	color: var(--gray-d-50);
	font-size: var(--xs-font-size);
	padding: 22px 10px 26px;
}
.logo-filter-empty b {
	display: block;
	color: var(--black);
	margin-bottom: 8px;
}
.logo-filter-reset {
	font-family: inherit;
	font-size: var(--xs-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--primary);
	background: none;
	border: none;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}

/* Badge visibility + link icons that survive style.js text rewrites */
.logo-pending-badge[hidden] {
	display: none !important;
}
a.logo-card-link.change-logo-button::before,
a.logo-card-link.edit-logo-button::before,
a.logo-card-link.qbnt-edit-names::before {
	font-family: FontAwesome, sans-serif;
	width: 15px;
	text-align: center;
	flex-shrink: 0;
}
a.logo-card-link.change-logo-button::before {
	content: "\f021";
}
a.logo-card-link.edit-logo-button::before,
a.logo-card-link.qbnt-edit-names::before {
	content: "\f040";
}
.logo-card .logo-card-links > a.logo-card-link::before {
	width: auto;
	font-size: 18px;
	line-height: 1;
}
.logo-card.qbnt-names-card .logo-card-links > a.logo-card-link::before {
	font-size: inherit;
}
.select-logo li img {
	max-height: 110px;
}

/* Logo step: neutralize the Bootstrap row bleed inside the card */
.logo-step > .row {
	margin-left: 0;
	margin-right: 0;
}
.logo-step {
	text-align: left;
}

/* Compact logo-location modal: small diagram tiles in a grid, no giant
   scrolling column. The injected card markup comes from shared style.js,
   so presentation is imposed here (inline h5 font-size needs !important). */
.logo-position-modal {
	min-width: 0;
	max-width: 700px;
}
#select-logo-location-modal .modal-dialog {
	width: auto;
	max-width: 700px;
	margin: 30px auto;
}
#select-logo-location-placeholder {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
/* Bootstrap's .row clearfix pseudo-elements become grid items and leave a
   blank leading cell whenever the tile count isn't a row multiple. */
#select-logo-location-placeholder::before,
#select-logo-location-placeholder::after {
	content: none;
}
#select-logo-location-placeholder > [class*="col-"] {
	width: 100%;
	padding: 0;
	float: none;
}
#select-logo-location-modal .style-position-card {
	width: auto;
	min-width: 0;
	min-height: 0;
	height: 100%;
	border: 1.5px solid var(--gray-d-10);
	border-radius: 11px;
	padding: 10px 6px;
	cursor: pointer;
	box-shadow: none;
	background: var(--pure-white);
}
#select-logo-location-modal .style-position-card:hover {
	border-color: var(--primary);
}
#select-logo-location-modal .style-position-card .card-title {
	font-size: var(--xs-font-size) !important;
	font-weight: var(--x-heavy-font-weight);
	margin: 0 0 4px;
}
#select-logo-location-modal .style-position-card img.card-img-top {
	height: 132px;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}
@media (max-width: 600px) {
	#select-logo-location-placeholder {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Uniform vertical rhythm for the rail cards: the flex gap only reaches
   the rail's direct children, while the step cards render nested inside
   the cart block — consistent card margins replace it. */
.buy-rail {
	gap: 0;
}
#style-info-buy .rail-step {
	margin-bottom: 14px;
}

/* Grid view styled to the approved design: full hairline cell grid,
   uniform padding, blue-tinted header, named color column, selected row
   tinted with an inset marker. */
.colors-step #grid-cart .table-flow {
	border: 1px solid var(--gray-d-10);
	border-radius: 10px;
	overflow: auto;
}
/* The ID beats the shell's #style-info-buy .well card treatment — the
   .table-flow wrapper is the grid's single border/radius owner. */
.colors-step #grid-cart .style_cart_table.well {
	border: none;
	border-collapse: collapse;
	border-radius: 0;
	width: 100%;
	padding: 0;
	margin: 0;
	box-shadow: none;
}
.colors-step .style_cart_table th,
.colors-step .style_cart_table td {
	border: 1px solid var(--gray-d-10);
	padding: 6px;
	text-align: center;
	vertical-align: middle;
}
.colors-step .style_cart_table tr > :first-child {
	border-left: none;
}
.colors-step .style_cart_table tr > :last-child {
	border-right: none;
}
.colors-step .style_cart_table thead tr > * {
	border-top: none;
}
.colors-step .style_cart_table tbody tr:last-child > * {
	border-bottom: none;
}
.colors-step .style_cart_table thead th,
.colors-step .style_cart_table thead td {
	background: hsla(var(--blue-h), var(--blue-s), var(--blue-l), 0.06);
	font-weight: var(--xx-heavy-font-weight);
	font-size: var(--xs-font-size);
}
.colors-step .style_cart_table thead .size_surcharge {
	display: block;
	color: var(--green-dark);
	font-weight: var(--x-heavy-font-weight);
}
.colors-step .style_cart_table tbody tr {
	cursor: pointer;
}
.colors-step .style_cart_table .grid-color-cell {
	text-align: left;
	white-space: nowrap;
	padding-left: 16px;
}
.colors-step .style_cart_table .grid-color-cell .swatch {
	display: inline-block;
	vertical-align: middle;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	margin-right: 8px;
}
.grid-color-name {
	vertical-align: middle;
	font-size: var(--xs-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--standard-font-color);
}
.no-touch .colors-step .style_cart_table tbody tr:hover td {
	background: var(--off-white);
}
/* Selected color row: style.js marks the row's controls with glow-effect */
.colors-step .style_cart_table tbody tr:has(.glow-effect) td {
	background: hsla(var(--blue-h), var(--blue-s), var(--blue-l), 0.08);
}
.colors-step .style_cart_table tbody tr:has(.glow-effect) td.grid-color-cell {
	box-shadow: inset 3px 0 0 var(--primary);
}
.colors-step .style_cart_table input.style_cart_input {
	border: 1px solid var(--gray-d-10);
	border-radius: 6px;
	background: var(--pure-white);
}

/* Numbered rail steps, prototype-style. A counter numbers whichever step
   cards render, so single-method styles stay sequential automatically. */
.buy-rail {
	counter-reset: rail-step;
}
.method-step-title::before,
.logo-step-title::before,
.colors-step-title::before {
	counter-increment: rail-step;
	content: counter(rail-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--primary);
	color: var(--pure-white);
	font-size: var(--xs-font-size);
	font-weight: var(--xx-heavy-font-weight);
	margin-right: 9px;
	vertical-align: middle;
	flex-shrink: 0;
}

/* =====================================================================
   Preview stage: large centered garment view with round prev/next
   arrows overlaid at the sides and labeled view thumbnails below.
   All colors come from qb-brand-guide tokens.
   ===================================================================== */
.product-stage #main-images {
	position: relative;
	padding: 0;
}
.product-stage .product-image-container {
	position: relative;
}

/* Chip row under the gallery: the gender-companion chip and the
   alternatives selector, styled as a matched pair of pills */
.product-stage .stage-links {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

/* Gender-companion chip */
.product-stage .gender-companion-chip {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--pure-white); border: 1px solid var(--gray);
	border-radius: 99px; padding: 5px 14px 5px 6px;
	font-size: 14px; font-weight: 700; color: var(--blue-dark);
	text-decoration: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.product-stage .gender-companion-chip:hover, .product-stage .gender-companion-chip:focus {
	border-color: var(--blue); box-shadow: 0 4px 12px rgba(0, 0, 0, .14); color: var(--blue-dark);
}
.product-stage .gender-companion-chip .gcc-thumb {
	width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: 0 0 26px;
	background: var(--off-white); display: inline-flex; align-items: center; justify-content: center;
}
/* head-and-shoulders framing — an uncropped cover slice beheads the model */
.product-stage .gender-companion-chip .gcc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* right-pointing chevron, built like the alternatives pill's caret so the
   pair share one affordance language */
.product-stage .gender-companion-chip .gcc-go {
	width: 7px; height: 7px; flex: 0 0 7px;
	border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
	transform: rotate(-45deg);
}

/* The alternatives trigger dressed as the chip's twin (the module's own
   default styling — underlined text link — still serves the instance at
   the recommendations heading) */
.stage-links .nwylf-trigger {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--pure-white); border: 1px solid var(--gray);
	border-radius: 99px; padding: 0 16px; height: 38px;
	font-size: 14px; font-weight: 700; color: var(--blue-dark);
	text-decoration: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.stage-links .nwylf-trigger:hover, .stage-links .nwylf-trigger:focus {
	opacity: 1; border-color: var(--blue); box-shadow: 0 4px 12px rgba(0, 0, 0, .14); color: var(--blue-dark);
}
.stage-links .nwylf-trigger::after {
	content: ''; width: 7px; height: 7px; margin-top: -4px;
	border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
	transform: rotate(45deg);
}

.product-stage #product-image {
	position: relative;
	overflow: visible;
	border-radius: 12px;
}

/* Center each view in a consistent stage height so mixed-height photos
   don't jump the layout. The flex display must also cover Bootstrap's
   carousel transition classes (.next/.prev) or slides would collapse
   to zero height mid-animation. */
.product-stage #style-images-carousel .item {
	min-height: 430px;
}
.product-stage #style-images-carousel .item.active,
.product-stage #style-images-carousel .item.next,
.product-stage #style-images-carousel .item.prev {
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 991px) {
	.product-stage #style-images-carousel .item {
		min-height: 0;
	}
}

/* Non-front views: shrink-wrap each image in a positioned frame so its
   logo overlay canvas (anchored top/left of the frame) stays aligned
   with the image no matter how the slide itself is centered. */
.product-stage #style-images-carousel .stage-view {
	position: relative;
	display: inline-block;
}

/* Round overlay arrows, vertically centered on the garment image */
.product-stage #style-images-carousel .carousel-control {
	top: 50%;
	bottom: auto;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border: 1px solid var(--gray-d-10);
	border-radius: 50%;
	background: hsla(0, 0%, 100%, 0.92);
	box-shadow: 0 6px 18px -8px hsla(var(--black-h), var(--black-s), var(--black-l), 0.5);
	opacity: 1;
	text-shadow: none;
	z-index: 3;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.product-stage #style-images-carousel .carousel-control.left {
	left: 6px;
}
.product-stage #style-images-carousel .carousel-control.right {
	right: 6px;
}
.no-touch .product-stage #style-images-carousel .carousel-control:hover,
.product-stage #style-images-carousel .carousel-control:focus {
	background: var(--pure-white);
	transform: scale(1.07);
	text-decoration: none;
}
.product-stage #style-images-carousel .carousel-control:active {
	transform: scale(0.96);
}
.product-stage #style-images-carousel .carousel-control .carousel-control-icon-container {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: none;
	border-radius: 0;
	box-shadow: none;
	transform: none;
	opacity: 1;
	color: var(--blue);
}
.product-stage #style-images-carousel .carousel-control .glyphicon {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	margin: 0;
	width: auto;
	height: auto;
	font-size: 18px;
	line-height: 1;
}

/* Labeled view thumbnails below the garment image */
.product-stage .alternate-images {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	max-width: none;
	margin: 14px 0 4px;
	opacity: 1;
}
.product-stage .alternate-images .imgbox_a {
	width: 84px;
	padding: 4px;
	border: 1.5px solid var(--gray-d-10);
	border-radius: 10px;
	background: var(--pure-white);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.no-touch .product-stage .alternate-images .imgbox_a:hover {
	border-color: var(--gray-d-30);
}
.product-stage .alternate-images .imgbox_a:has(img.active) {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px hsla(var(--blue-h), var(--blue-s), var(--blue-l), 0.18);
}
.product-stage .alternate-images .imgbox_a img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	margin: 0;
	border: 0;
	border-radius: 6px;
}

/* Thumbnail labels, derived from the same data-image-type attribute the
   carousel keys off — covers server-rendered and JS-created thumbnails */
.product-stage .alternate-images .imgbox_a::after {
	display: block;
	margin-top: 3px;
	font-size: var(--xs-font-size);
	font-weight: var(--heavy-font-weight);
	line-height: 1.15;
	text-align: center;
	color: var(--gray-d-50);
}
.product-stage .alternate-images .imgbox_a[data-image-type="front"]::after { content: 'Front'; }
.product-stage .alternate-images .imgbox_a[data-image-type="side"]::after { content: 'Side'; }
.product-stage .alternate-images .imgbox_a[data-image-type="back"]::after { content: 'Back'; }
.product-stage .alternate-images .imgbox_a[data-image-type="flat_front"]::after { content: 'Flat Front'; }
.product-stage .alternate-images .imgbox_a[data-image-type="flat_back"]::after { content: 'Flat Back'; }
.product-stage .alternate-images .imgbox_a[data-image-type="inside"]::after { content: 'Inside'; }
.product-stage .alternate-images .imgbox_a[data-image-type="collar"]::after { content: 'Collar'; }
.product-stage .alternate-images .imgbox_a[data-image-type="cuff"]::after { content: 'Cuff'; }
.product-stage .alternate-images .imgbox_a[data-image-type="pocket"]::after { content: 'Pocket'; }
.product-stage .alternate-images .imgbox_a[data-image-type="lifestyle"]::after { content: 'Lifestyle'; }
.product-stage .alternate-images .imgbox_a[data-image-type="detail"]::after { content: 'Detail'; }
.product-stage .alternate-images .imgbox_a[data-image-type="video"]::after { content: 'Video'; }

/* Video tile, dressed to match the view thumbnails */
.product-stage .alternate-images .imgbox_a #product-video-thumbnail {
	width: 100%;
	aspect-ratio: 2 / 3;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
}
.product-stage .alternate-images .imgbox_a #product-video-thumbnail span {
	display: none;
}

/* Color selection lives in the rail's Colors & Sizes step; hide the
   mobile swatch row style.js clones under the image. */
.product-stage .mobile-swatch-container {
	display: none;
}

/* Garment-preview caption: shown while a customer's real logo is composited
   on the garment — sets proof expectations. */
.stage-preview-disclaimer[hidden] {
	display: none !important;
}
.stage-preview-disclaimer {
	text-align: center;
	font-size: var(--xs-font-size);
	color: var(--gray-d-50);
	font-style: italic;
	margin: 6px 0 2px;
}

/* =====================================================================
   "Select Logo Type" method cards: current method highlighted, the other
   method links to its sibling style page. All colors come from
   qb-brand-guide tokens.
   ===================================================================== */
.method-step-title {
	margin: 0 0 12px;
	font-size: var(--small-font-size);
	font-weight: var(--xx-heavy-font-weight);
	color: var(--black);
}
.method-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}
.method-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 13px;
	border: 1px solid var(--card-line);
	border-radius: 11px;
	background: var(--pure-white);
	text-align: center;
	color: var(--black);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.method-card--link:hover,
.method-card--link:focus-within {
	border-color: var(--gray-d-30);
	box-shadow: 0 6px 18px -12px hsla(var(--black-h), var(--black-s), var(--black-l), 0.5);
	text-decoration: none;
	color: var(--black);
}
/* Covers the card as its click target; the info icon (z-index 2) stays
   above it so the tooltip and its link remain reachable */
.method-card-stretch {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 11px;
}
/* Selected state mirrors the stage's active view thumbnail: brand-blue
   border with a soft blue ring, plus a light tint so it reads selected */
.method-card.on {
	border-color: var(--primary);
	background: hsla(var(--blue-h), var(--blue-s), var(--blue-l), 0.08);
	box-shadow: 0 0 0 3px hsla(var(--blue-h), var(--blue-s), var(--blue-l), 0.18);
}
.method-card.on::before {
	content: "\2713";
	position: absolute;
	/* above the photo variant's transformed img, which otherwise paints
	   over a z-index:auto pseudo-element */
	z-index: 2;
	top: 8px;
	left: 8px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--primary);
	color: var(--pure-white);
	font-size: var(--xs-font-size);
	font-weight: var(--xx-heavy-font-weight);
	line-height: 20px;
	text-align: center;
}
.method-card-info {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 18px;
	height: 18px;
	color: var(--primary);
	cursor: help;
	z-index: 2;
	/* white disc keeps the icon legible over the method photo */
	background: hsla(0, 0%, 100%, 0.85);
	border-radius: 50%;
}
.method-card-info svg {
	width: 18px;
	height: 18px;
	display: block;
}
.method-card-tip {
	position: absolute;
	top: 130%;
	right: -8px;
	width: 230px;
	background: var(--black);
	color: var(--pure-white);
	font-size: var(--xs-font-size);
	font-weight: var(--medium-font-weight);
	text-align: left;
	line-height: 1.5;
	padding: 11px 13px;
	border-radius: 10px;
	box-shadow: 0 14px 30px -10px hsla(var(--black-h), var(--black-s), var(--black-l), 0.5);
	display: none;
	z-index: 20;
}
.method-card-info:hover .method-card-tip,
.method-card-info:focus .method-card-tip,
.method-card-info:focus-within .method-card-tip {
	display: block;
}
/* invisible bridge across the icon→tip offset so hover survives the trip
   down to the Learn-more link */
.method-card-tip::before {
	content: '';
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
}
.method-card-tip .method-tip-link {
	display: block;
	margin-top: 6px;
	width: fit-content;
	color: hsl(200, 65%, 82%);
	font-weight: var(--xx-heavy-font-weight);
	text-decoration: underline;
}
.method-card-tip .method-tip-link:hover,
.method-card-tip .method-tip-link:focus {
	color: var(--pure-white);
}
/* Method not offered for this garment: the card stays for a consistent
   chooser, muted; the whole card reveals the why-tooltip. */
.method-card--disabled {
	cursor: not-allowed;
}
.method-card--disabled .method-card-photo img {
	filter: grayscale(1);
	opacity: .7;
}
.method-card--disabled .method-card-name,
.method-card--disabled .method-card-info {
	color: var(--gray-d-40);
}
.method-card-note {
	font-size: var(--xs-font-size);
	color: var(--gray-d-40);
	margin-top: 2px;
}
.method-card--disabled:hover .method-card-tip,
.method-card--disabled:focus-visible .method-card-tip,
.method-card--disabled:focus-within .method-card-tip {
	display: block;
}
/* Method photo: full-bleed strip across the card top (counters the card's
   13px padding); 3:1 matches the your-logo example assets */
.method-card-photo {
	margin: -13px -13px 0;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
	aspect-ratio: 3 / 1;
	background: var(--off-white);
}
.method-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* the strip renders only for customers without a logo yet (method_cards.php);
   give the name room under it */
.method-card-photo + .method-card-name {
	margin-top: 10px;
}
.method-card-name {
	margin-top: 2px;
	font-size: var(--small-font-size);
	font-weight: var(--xx-heavy-font-weight);
	line-height: 1.3;
}
.method-card-blurb {
	margin-top: 3px;
	font-size: var(--xs-font-size);
	line-height: 1.3;
	color: var(--gray-d-60);
}
.method-card-price {
	/* pin to the card bottom so prices align when blurb lengths differ */
	margin-top: auto;
	padding-top: 6px;
	font-size: var(--xs-font-size);
	font-weight: var(--xx-heavy-font-weight);
	color: var(--green-dark);
}

/* One-shot pulse pointing the shopper at the quantity grid when Add To
   Cart is pressed with nothing entered (paired with the toast in style.js). */
.colors-step.qty-attention {
	animation: qty-attention-pulse 1.25s ease-in-out 2;
}
@keyframes qty-attention-pulse {
	0%, 100% { box-shadow: 0 0 0 0 hsla(var(--blue-h), var(--blue-s), var(--blue-l), 0); }
	50% { box-shadow: 0 0 0 5px hsla(var(--blue-h), var(--blue-s), var(--blue-l), 0.4); }
}
@media (prefers-reduced-motion: reduce) {
	.colors-step.qty-attention {
		animation: none;
		box-shadow: 0 0 0 4px hsla(var(--blue-h), var(--blue-s), var(--blue-l), 0.4);
	}
}

/* Below-the-fold accordion: white panels to match the rail cards above.
   The shared accordion module inlines an !important off-white per block,
   so this page-scoped override has to out-specify it. */
.style-page .accordion-block-container .panel-heading,
.style-page .accordion-block-container .panel-body {
	background-color: var(--pure-white) !important;
}