/* ============================================================
   Shopify Connect — Product Widget Styles
   (Shopify Add to Cart + Shopify Product widgets)

   Depends on the --sc-* variables defined in cart.css.
   ============================================================ */

.sc-product-widget {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body h2.sc-product-title {
	margin: 0;
	font-family: "Bebas Neue Pro", sans-serif;
	font-weight: 700;
	font-size: 67px;
	line-height: 59px;
	color: #2d4159;
}

.sc-product-price {
	font-family: "Bebas Neue Pro", sans-serif;
	font-size: 45px;
	font-weight: 700;
	line-height: normal;
	color: #2d4159;
}

.sc-price.sc-sale {
	color: #c00;
}

.sc-compare-price {
	font-size: 16px;
	color: var(--sc-muted);
	margin-left: 6px;
}

.sc-product-description {
	font-size: 15px;
	line-height: 1.7;
	color: var(--sc-muted);
}

/* Variant selectors */
.sc-variant-selectors {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sc-option-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sc-option-label {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sc-muted);
}

.sc-option-select {
	width: 100%;
	max-width: 240px;
	padding: 10px 14px;
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	font-size: 15px;
	color: var(--sc-text);
	background: var(--sc-bg);
	appearance: none;
	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='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
	cursor: pointer;
}

.sc-option-select:focus {
	outline: 2px solid var(--sc-btn-bg);
	outline-offset: 2px;
}

/* Quantity + Add to Cart row — one continuous rounded shape split by color,
   not two separate pills, so the row itself owns the rounding/clipping and
   the two halves sit flush against each other. */
.sc-atc-row {
	display: flex;
	align-items: stretch;
	border-radius: 14px;
	overflow: hidden;
}

/* Quantity control — overrides the mini cart's base look (cart.css) with
   its own, since this file loads after cart.css on any page using the
   widget. See cart.css for the mini cart's own (unrelated) styling. */
.sc-product-widget .sc-qty-control {
	flex: 0 0 auto;
	background: #eee;
	border: none;
	border-radius: 0;
}

.sc-product-widget .sc-qty-btn {
	width: 40px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
	color: var(--sc-text);
	transition: background 0.15s;
}

.sc-product-widget .sc-qty-btn:hover {
	background: rgba(0, 0, 0, 0.06);
}

.sc-product-widget .sc-qty-btn:focus-visible {
	outline: 2px solid var(--sc-btn-bg);
	outline-offset: -2px;
}

.sc-product-widget .sc-qty-input {
	width: 40px;
	height: 52px;
	padding: 0;
	border: none;
	background: none;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	color: var(--sc-text);
	box-sizing: border-box;
	-moz-appearance: textfield;
	-webkit-appearance: none;
	appearance: none;
}

/* Add to cart button */
body .sc-product-widget button.sc-add-to-cart {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 15px 24px;
	background: #fa9f1b;
	color: #2d4159;
	border: none;
	border-radius: 0;
	font-family: "Bebas Neue Pro", "Bebas Neue", sans-serif;
	font-size: 23px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: opacity 0.2s;
}

.sc-product-widget .sc-add-to-cart:hover:not(:disabled) {
	opacity: 0.85;
}

.sc-product-widget .sc-add-to-cart:focus-visible {
	outline: 2px solid var(--sc-btn-bg);
	outline-offset: -2px;
}

.sc-product-widget .sc-add-to-cart:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Message */
.sc-atc-message {
	font-size: 14px;
	min-height: 20px;
	transition: opacity 0.3s;
}

.sc-msg-success {
	color: #1a7f37;
}
.sc-msg-error {
	color: #c00;
}