/**
 * Add To Cart Widget Styles
 */

.singlegrid-pdp-add-to-cart-wrapper form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin-bottom: 0;
}

.singlegrid-pdp-add-to-cart-wrapper .variations,
.singlegrid-pdp-add-to-cart-wrapper table.variations,
.singlegrid-pdp-add-to-cart-wrapper table.variations tbody,
.singlegrid-pdp-add-to-cart-wrapper table.variations tr,
.singlegrid-pdp-add-to-cart-wrapper table.variations th,
.singlegrid-pdp-add-to-cart-wrapper table.variations td {
	display: block !important;
	width: 100% !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 12px 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* No trailing space under the last attribute row; the form gap separates it from the buttons */
.singlegrid-pdp-add-to-cart-wrapper table.variations,
.singlegrid-pdp-add-to-cart-wrapper table.variations tbody,
.singlegrid-pdp-add-to-cart-wrapper table.variations tr:last-child,
.singlegrid-pdp-add-to-cart-wrapper table.variations tr:last-child td,
.singlegrid-pdp-add-to-cart-wrapper table.variations tr:last-child select {
	margin-bottom: 0 !important;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-variation-row {
	display: block;
	margin-bottom: 15px;
	width: 100%;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-variation-label,
.singlegrid-pdp-add-to-cart-wrapper .variations label,
.singlegrid-pdp-add-to-cart-wrapper table.variations th,
.singlegrid-pdp-add-to-cart-wrapper table.variations td.label {
	display: block !important;
	margin-bottom: 6px !important;
	font-weight: 600;
	text-align: left !important;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-variation-value {
	width: 100%;
}

.singlegrid-pdp-add-to-cart-wrapper .single_variation_wrap {
	width: 100%;
}

.singlegrid-pdp-add-to-cart-wrapper .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 15px;
}

/* Quantity Stepper (+ / - Buttons) */
.singlegrid-pdp-add-to-cart-wrapper .quantity.singlegrid-pdp-qty-stepper-enabled {
	display: inline-flex !important;
	align-items: center !important;
	position: relative !important;
}

.singlegrid-pdp-add-to-cart-wrapper .quantity .singlegrid-pdp-qty-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid #cbd5e0;
	background-color: #f7fafc;
	color: #2d3748;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	transition: all 0.2s ease;
	line-height: 1 !important;
	box-shadow: none !important;
}

.singlegrid-pdp-add-to-cart-wrapper .quantity .singlegrid-pdp-qty-btn.minus {
	border-radius: 4px 0 0 4px;
	border-right: none;
}

.singlegrid-pdp-add-to-cart-wrapper .quantity .singlegrid-pdp-qty-btn.plus {
	border-radius: 0 4px 4px 0;
	border-left: none;
}

.singlegrid-pdp-add-to-cart-wrapper .quantity input.qty {
	width: 50px !important;
	height: 36px !important;
	text-align: center !important;
	border: 1px solid #cbd5e0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 4px !important;
	-moz-appearance: textfield;
}

.singlegrid-pdp-add-to-cart-wrapper .quantity input.qty::-webkit-outer-spin-button,
.singlegrid-pdp-add-to-cart-wrapper .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Hide native select when swatches or pills are active for an attribute */
.singlegrid-pdp-add-to-cart-wrapper select.singlegrid-pdp-has-swatches,
.singlegrid-pdp-add-to-cart-wrapper select.singlegrid-pdp-has-pills,
.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-swatches-wrapper ~ select,
.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-variation-pills-wrapper ~ select,
.singlegrid-pdp-add-to-cart-wrapper.singlegrid-pdp-var-style-pill select {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
	pointer-events: none !important;
}

.singlegrid-pdp-add-to-cart-wrapper.singlegrid-pdp-var-style-dropdown .singlegrid-pdp-variation-pills-wrapper,
.singlegrid-pdp-add-to-cart-wrapper.singlegrid-pdp-var-style-dropdown .singlegrid-pdp-swatches-wrapper {
	display: none !important;
}

.singlegrid-pdp-add-to-cart-wrapper.singlegrid-pdp-var-style-dropdown select {
	position: static !important;
	opacity: 1 !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 0 12px 0 !important;
	padding: 8px 12px !important;
	overflow: visible !important;
	clip: auto !important;
	border: 1px solid #cbd5e0 !important;
	pointer-events: auto !important;
	display: block !important;
}

.singlegrid-pdp-add-to-cart-wrapper.singlegrid-pdp-var-style-pill .singlegrid-pdp-swatches-wrapper {
	display: none !important;
}

.singlegrid-pdp-variation-pills-wrapper {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px;
	margin-top: 4px;
}

.singlegrid-pdp-variation-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	font-size: 14px;
	line-height: 1.2;
	border: 1px solid #cbd5e0;
	border-radius: 20px;
	background-color: #ffffff;
	color: #2d3748;
	cursor: pointer;
	user-select: none;
	transition: all 0.2s ease;
	margin: 0 !important;
	position: relative !important;
}

.singlegrid-pdp-variation-pill .singlegrid-pdp-pill-text {
	color: inherit;
}

.singlegrid-pdp-variation-pill input.singlegrid-pdp-radio-input {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none !important;
}

.singlegrid-pdp-variation-pill:hover {
	border-color: #a0aec0;
	background-color: #f7fafc;
}

.singlegrid-pdp-variation-pill.singlegrid-pdp-pill-active,
.singlegrid-pdp-variation-pill:has(input.singlegrid-pdp-radio-input:checked) {
	border-color: #3182ce;
	background-color: #ebf8ff;
	color: #2b6cb0;
	font-weight: 600;
}

/* Unavailable / Disabled Variation Pill */
.singlegrid-pdp-variation-pill.singlegrid-pdp-pill-disabled {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
	position: relative !important;
	overflow: hidden !important;
	color: #a0aec0 !important;
	border-color: #e2e8f0 !important;
	background-color: #f8fafc !important;
	pointer-events: none !important;
}

.singlegrid-pdp-variation-pill.singlegrid-pdp-pill-disabled input {
	pointer-events: none !important;
}

.singlegrid-pdp-variation-pill.singlegrid-pdp-pill-disabled::after {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: linear-gradient(to bottom right, transparent calc(50% - 1px), #e53e3e calc(50% - 0.5px), #e53e3e calc(50% + 0.5px), transparent calc(50% + 1px)) !important;
	pointer-events: none !important;
	z-index: 10 !important;
}

/*
 * Never show WooCommerce's variation details block (description, price, stock).
 * It stays in the markup because WooCommerce fires show_variation/hide_variation from it,
 * which is what enables and disables the Add to Cart button.
 */
.singlegrid-pdp-add-to-cart-wrapper .single_variation {
	display: none !important;
}

/* ==========================================================================
   Variation Swatches Styling (Color, Image, Label)
   ========================================================================== */

/* Swatches wrapper flex layout */
.singlegrid-pdp-swatches-wrapper {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	margin-bottom: 8px;
}

/* Base Swatch */
.singlegrid-pdp-swatch {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px;
	height: 36px;
	padding: 2px;
	margin: 0 !important;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background-color: #ffffff;
	cursor: pointer;
	user-select: none;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-sizing: border-box;
}

.singlegrid-pdp-swatch .singlegrid-pdp-radio-input {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	pointer-events: none !important;
}

.singlegrid-pdp-swatch .singlegrid-pdp-swatch-inner {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	box-sizing: border-box;
	pointer-events: none;
}

/* Color Swatch */
.singlegrid-pdp-swatch-color .singlegrid-pdp-swatch-color-inner {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Image Swatch */
.singlegrid-pdp-swatch-image .singlegrid-pdp-swatch-image-inner {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Label Swatch */
.singlegrid-pdp-swatch.singlegrid-pdp-swatch-label {
	width: auto !important;
	min-width: 36px;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 500;
	color: #1e293b;
	line-height: 1.2;
}

.singlegrid-pdp-swatch.singlegrid-pdp-swatch-label .singlegrid-pdp-swatch-label-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* Hover & Active States */
.singlegrid-pdp-swatch:hover {
	border-color: #64748b;
	transform: translateY(-1px);
}

.singlegrid-pdp-swatch.singlegrid-pdp-swatch-active,
.singlegrid-pdp-swatch:has(input.singlegrid-pdp-radio-input:checked) {
	border-color: #2563eb;
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb;
	transform: none;
}

.singlegrid-pdp-swatch.singlegrid-pdp-swatch-label.singlegrid-pdp-swatch-active,
.singlegrid-pdp-swatch.singlegrid-pdp-swatch-label:has(input.singlegrid-pdp-radio-input:checked) {
	background-color: #eff6ff;
	color: #1d4ed8;
	font-weight: 600;
}

/* Swatch Shapes */
.singlegrid-pdp-swatch-shape-circle .singlegrid-pdp-swatch,
.singlegrid-pdp-swatch-shape-circle .singlegrid-pdp-swatch .singlegrid-pdp-swatch-inner {
	border-radius: 50% !important;
}

.singlegrid-pdp-swatch-shape-square .singlegrid-pdp-swatch,
.singlegrid-pdp-swatch-shape-square .singlegrid-pdp-swatch .singlegrid-pdp-swatch-inner {
	border-radius: 0 !important;
}

.singlegrid-pdp-swatch-shape-rounded .singlegrid-pdp-swatch,
.singlegrid-pdp-swatch-shape-rounded .singlegrid-pdp-swatch .singlegrid-pdp-swatch-inner {
	border-radius: 6px;
}

/* Unavailable / Disabled Swatches */
.singlegrid-pdp-swatch.singlegrid-pdp-swatch-disabled {
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	position: relative !important;
	overflow: hidden !important;
}

.singlegrid-pdp-swatch.singlegrid-pdp-swatch-disabled::after {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), #ef4444 calc(50% - 1px), #ef4444 calc(50% + 1px), transparent calc(50% + 1.5px)) !important;
	pointer-events: none !important;
	z-index: 10 !important;
}

/* Tooltips */
.singlegrid-pdp-swatch-tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background-color: #0f172a;
	color: #ffffff;
	padding: 4px 8px;
	font-size: 11px;
	line-height: 1.2;
	font-weight: 500;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 100;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.singlegrid-pdp-swatch-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 4px;
	border-style: solid;
	border-color: #0f172a transparent transparent transparent;
}

.singlegrid-pdp-swatch:hover .singlegrid-pdp-swatch-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Selected Value Label */
.singlegrid-pdp-selected-value-label {
	font-weight: 500;
	color: inherit;
	margin-left: 4px;
}

/* ==========================================================================
   Quantity, Add to Cart & Buy Now Layouts
   ========================================================================== */

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-actions {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	width: 100%;
	min-width: 0;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-qty-wrap {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-no-qty .singlegrid-pdp-atc-qty-wrap {
	display: none;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-qty-label {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-buttons {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 15px;
	min-width: 0;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-actions .single_add_to_cart_button,
.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-buy-now-button {
	display: inline-flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0 !important;
	float: none !important;
	text-align: center;
	white-space: normal;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-buy-now-button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Button Width: Full (equal-width columns; a grid avoids flex-basis: 0 inflating the row height) */
.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-btn-width-full .singlegrid-pdp-atc-buttons {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-btn-width-full .single_add_to_cart_button,
.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-btn-width-full .singlegrid-pdp-buy-now-button {
	width: 100%;
}

/*
 * Layout: Quantity, Add to Cart and Buy Now on one row.
 * The buttons drop to their own row (still side by side) only when less than 240px is left beside the quantity.
 */
.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-layout-inline .singlegrid-pdp-atc-buttons {
	flex: 1 1 0;
	flex-wrap: nowrap;
	min-width: min(100%, 240px);
}

/* Layout: Quantity above, buttons inline below */
.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-layout-qty_top {
	flex-direction: column;
	align-items: stretch;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-layout-qty_top .singlegrid-pdp-atc-qty-wrap {
	align-self: flex-start;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-layout-qty_top .singlegrid-pdp-atc-buttons {
	flex: 0 0 auto;
	flex-wrap: nowrap;
}

/*
 * Layout: Quantity and Add to Cart inline, Buy Now full width below.
 * With "fit" an empty trailing column takes the leftover space, so the grid (and Buy Now) stays full width.
 */
.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-layout-buy_now_below {
	display: grid;
	grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr);
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-layout-buy_now_below.singlegrid-pdp-btn-width-full {
	grid-template-columns: auto minmax(0, 1fr);
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-layout-buy_now_below.singlegrid-pdp-atc-no-qty {
	grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-layout-buy_now_below.singlegrid-pdp-atc-no-qty.singlegrid-pdp-btn-width-full {
	grid-template-columns: minmax(0, 1fr);
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-layout-buy_now_below .singlegrid-pdp-atc-buttons {
	display: contents;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-layout-buy_now_below .single_add_to_cart_button {
	align-self: stretch;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-atc-layout-buy_now_below .singlegrid-pdp-buy-now-button {
	grid-column: 1 / -1;
	width: 100%;
}

/* Price inside buttons: the price stays in one piece and moves below the label when space runs out */
.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-btn-price {
	white-space: nowrap;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-btn-price[hidden] {
	display: none !important;
}

.singlegrid-pdp-add-to-cart-wrapper .singlegrid-pdp-btn-price-sep {
	white-space: pre;
}