/* Cryosthetics Toolkit — Trade Accounts front-end.

   Where a price or an add-to-cart button would have been, for anyone who is
   not an approved trade account. */

.cryo-trade-price-hidden {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #077A99;
}

.cryo-trade-notice {
	margin: 0 0 24px;
	padding: 20px 24px;
	background: #F5FAFD;
	border-left: 3px solid #0EA9D0;
}

.cryo-trade-notice p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: #5C6B7A;
	max-width: 60ch;
}

/* The notice's own button. The loop button's sizing is left to the theme,
   which styles it through .wd-add-btn-replace > a > span — overriding the
   display here would fight that. */
.cryo-trade-notice .cryo-trade-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}

/* This is our button, not one of the theme's, so it carries its own box
   rather than inheriting Woodmart's --btn-* variables. On the shop loop the
   theme sets `--btn-padding: 0` and leaves the height to whichever of its
   add-to-cart variants is active, which left the label overflowing the pill.
   The class is doubled because Woodmart's own button rules also sit at 0,1,0
   and would otherwise win the tie. */
.cryo-trade-cta.cryo-trade-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 6px 18px;
	font-size: 12px;
	line-height: 1.2;
	overflow: visible;
}

.cryo-trade-cta.cryo-trade-cta .cryo-trade-cta__label {
	display: inline-block;
	max-width: 100%;
	min-height: 0;
	line-height: 1.2;
	overflow-wrap: break-word;
}

/* The loop's "replace" style slides the label up out of the button on hover
   and slides an icon in behind it. That belongs to add-to-cart, not to a link
   off to the account page — without this the pill empties on hover. */
.wd-add-btn-replace > a.cryo-trade-cta:hover .cryo-trade-cta__label {
	transform: none;
}

.wd-add-btn-replace > a.cryo-trade-cta::before,
.wd-add-btn-replace > a.cryo-trade-cta::after {
	content: none;
}

.cryo-trade-register-note {
	margin: 4px 0 18px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #5C6B7A;
}

@media (max-width: 600px) {
	.cryo-trade-notice {
		padding: 16px 18px;
	}

	.cryo-trade-notice p {
		font-size: 14.5px;
	}
}

/* Registration form — the extra application fields. */
.cryo-trade-fields {
	display: flow-root;
}

.cryo-trade-field-desc {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #8496A6;
}

.cryo-trade-fields select {
	width: 100%;
}