/*
 * Product card.
 *
 * These rules used to sit in a style block inside product/catalog.twig, so the
 * card looked one way on that page and another way in a category listing, in
 * search results and on a manufacturer page. They belong to the card, not to a
 * page, so they live here and are loaded everywhere the card is drawn.
 */


.content-block.h-100.d-flex.flex-column {
	border: none;
}

.sc-module-img.position-relative {
	border: solid 0.5px rgb(229, 229, 229);
	border-radius: 16px;
}

.sc-module-rating.d-flex.align-items-center.mt-2.mb-1.br-4 {
	background: transparent;
}

.sc-module-info .dark-text {
	font-family: Inter;
	font-weight: 400;
	font-size: 13px !important;
	line-height: 26px;
	letter-spacing: -1%;
	color: rgb(117, 117, 117);
}

.sc-module-title.dark-text.fw-700 {
	font-family: Inter;
	font-weight: 600 !important;
	font-size: 16px !important;
	line-height: 26px;
	letter-spacing: -1%;
	vertical-align: middle;
	color: #000;
}

.list-product-descript-jd {
	display: block;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: Inter;
	font-weight: 400;
	font-size: 14px !important;
	line-height: 22px;
	letter-spacing: -1%;
	color: #6b7280 !important;
	margin-top: 10px;
}

.price-and-quant-jd {
	display: flex;
	flex-direction: unset;
	height: 35px;
}

.sc-module-price-box.py-2.mt-auto {
	margin-left: auto;
	text-align: right;
}

.sc-module-price-old.light-text.fsz-14 {
	font-family: Inter;
	font-weight: 400;
	font-size: 14px !important;
	line-height: 26px;
	letter-spacing: -1%;
	text-align: right;
	text-decoration: line-through;
	color: rgb(183, 183, 183);
}

.sc-module-price.fw-800.dark-text.mt-1 {
	font-family: Inter;
	font-weight: 700 !important;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -1%;
	text-align: right;
	color: #000 !important;
}

.sc-module-quantity.d-flex.align-items-center.justify-content-center.py-1.br-12 {
	height: 28px;
	margin-top: auto;
	margin-bottom: auto;
	border: none;
}

.sc-module-quantity.d-flex.align-items-center.justify-content-center.py-1.br-12 .form-control {
	border: none;
}

.sc-module-quantity-btn {
	width: 28px;
	height: 28px;
	padding: 0px !important;
}

.sc-module-quantity.d-flex.align-items-center.justify-content-center.py-1.br-12 {
	padding: 0px !important;
}

.sc-module-quantity-btn span {
	width: 28px !important;
	height: 28px !important;
}

.sc-module-quantity .form-control {
	width: 44px !important;
	min-width: 44px;
	max-width: 44px !important;
	font-family: Inter;
	font-weight: 500;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: -1%;
	color: #000;
}

.sc-module-price-box.py-2.mt-auto {
	padding: 0px !important;
	height: 35px;
}

.sc-module-price-old.light-text.fsz-14 {
	line-height: 10px;
	margin-bottom: auto;
}

.sc-module-price.fw-800.dark-text.mt-1 {
	line-height: 13px;
}

.price-and-quant-jd {
	margin-top: 10px;
	margin-bottom: 10px;
}

.sc-btn.sc-btn-primary.sc-btn-with-icon.br-4.sc-module-cart-btn {
	width: 100% !important;
	min-width: 100%;
	background: rgb(43, 127, 255) !important;
	border-radius: 18px !important;
	color: #fff;
}

.sc-module-cart .sc-btn-text {
	display: flex !important;
}

.sc-module-price.fw-800.dark-text.mt-1.jd-1 {
	margin-top: auto !important;
	margin-bottom: auto;
}

/*
 * A card that stands for a run of sizes leads to the product page instead of
 * the cart, so its button repeats the geometry of the buy button and differs
 * only in weight: an outline for a step aside, a solid fill for a purchase.
 *
 * Written without the button classes of the theme on purpose: the theme
 * stylesheet loads after this one and its palette would win.
 */
.sh-choose-btn {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 36px;
	padding: 7px 16px;
	border: 1px solid #2b7fff;
	border-radius: 18px;
	background: #fff;
	/* A shade darker than the brand blue: at 14px the fill itself does not
	   hold the contrast the text needs on white */
	color: #1c6ae8;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* The arrow is painted with the text colour, so it follows every state */
.sh-choose-btn::after {
	content: '';
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translateX(0);
	transition: transform .15s ease;
}

.sh-choose-btn:hover,
.sh-choose-btn:focus-visible {
	border-color: #1c6ae8;
	background: #1c6ae8;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(43, 127, 255, .28);
}

.sh-choose-btn:hover::after {
	transform: translateX(3px);
}

.sh-choose-btn:focus-visible {
	outline: 2px solid #1c6ae8;
	outline-offset: 2px;
}

.sh-choose-btn:active {
	background: #1558c6;
	border-color: #1558c6;
	box-shadow: none;
}

/* Compact layout of the theme: the buy button shrinks to an icon in the
   corner of the picture, so the link keeps to its own width there */
.sc-module-cart-absolute .sh-choose-btn {
	flex: 0 0 auto;
	width: auto;
	padding: 7px 14px;
}

@media (prefers-reduced-motion: reduce) {
	.sh-choose-btn,
	.sh-choose-btn::after {
		transition: none;
	}
}

.sh-price-from {
	display: inline-block;
	margin-right: 2px;
	font-size: 12px;
	font-weight: 600;
	color: #94a3b8;
}