/* ================================================================== */
/*  SOL Product Page — styles provided by sol-boxofgood plugin        */
/*  Covers: variation tiles, two-column layout, order bar             */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/*  Variation Tiles (product page) — scent-card style                 */
/* ------------------------------------------------------------------ */

.variations_form,
.variation-tiles-wrapper {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.variation-tiles-wrapper {
	margin-bottom: 1.5em;
}

.variation-tiles__label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #1C201B;
	margin: 0 0 12px 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.variation-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px;
}

.variation-tile {
	position: relative;
	border: 1.5px solid #D8D5CC;
	border-radius: 13px;
	padding: 14px 14px 13px;
	background: #fff;
	cursor: pointer;
	text-align: left;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	line-height: 1.3;
	transition: border-color .15s ease, transform .1s ease;
	font-family: inherit;
	outline: none;
	overflow: hidden;
	flex: 0 1 calc(33.333% - 7px);
	min-width: min-content;
	box-sizing: border-box;
}

.variation-tile:hover,
.variation-tile:focus {
	border-color: #29422F;
	transform: translateY(-1px);
	outline: none;
	box-shadow: none;
}

/* Override Storefront's aggressive button:hover background rule */
.single-product .variation-tile:hover,
.single-product .variation-tile:focus {
	background-color: #fff !important;
	color: #1C201B !important;
}

.variation-tile--selected,
.variation-tile--selected:hover,
.variation-tile--selected:focus,
.variation-tile--selected:active {
	border-color: #29422F;
	background: #F3F7EF;
	box-shadow: 0 0 0 1px #29422F;
	transform: none;
	outline: none;
}

.single-product .variation-tile--selected,
.single-product .variation-tile--selected:hover,
.single-product .variation-tile--selected:focus,
.single-product .variation-tile--selected:active {
	background-color: #F3F7EF !important;
	color: #1C201B !important;
}

.variation-tile__label {
	font-weight: 700;
	font-size: 18px;
	color: #1C201B;
	display: flex;
	align-items: center;
	gap: 7px;
	/* leave room for the checkmark dot */
	padding-right: 2vw;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
}

.variation-tile__price {
	font-size: 16px;
	color: #5B6358;
	margin-top: 0;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	flex-shrink: 0;
}

.variation-tile__price .woocommerce-Price-amount {
	font-size: inherit;
	color: inherit;
}

/* ================================================================== */
/*  Single Product Page v2 (sol-product-page)                         */
/* ================================================================== */

.sol-product-page {
	/* Remove default WC floats/widths that fight our grid */
}

/* Override WooCommerce's default margin-bottom on these elements */
.single-product div.product .images,
.single-product div.product .summary,
.single-product div.product .woocommerce-product-gallery {
	margin-bottom: 0 !important;
}

.sol-product-layout {
	display: grid;
	grid-template-columns: minmax(0, 460px) 1fr;
	gap: 56px;
	align-items: start;
	margin-bottom: 2em;
}

/* ── Media column ── */
.sol-product-media {
	min-width: 0;
}

/* ── Info column ── */
.sol-product-info {
	min-width: 0;
}

/* Force the WC gallery to fill the grid column width.
   WC's JS sets an inline width based on the old float layout;
   we override it so the gallery fills our CSS grid column.
   Border/radius applied directly to the gallery element. */
.sol-product-media .woocommerce-product-gallery {
	width: 100% !important;
	opacity: 1 !important;
	border-radius: 18px;
	border: 1px solid #E4E1D7;
	background: #fff;
	overflow: hidden;
}

.sol-product-media .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	width: 100% !important;
}

.sol-product-media .woocommerce-product-gallery .woocommerce-product-gallery__image {
	width: 100% !important;
}

.sol-product-media .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
}

/* ── Info column ── */
.sol-product-maker-byline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: #29422F;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 12px;
	cursor: pointer;
}

.sol-product-maker-byline svg {
	width: 13px;
	height: 13px;
	stroke: #29422F;
}

.sol-product-title {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 38px;
	line-height: 1.06;
	margin: 0 0 8px;
	letter-spacing: -.01em;
	color: #1C201B;
}

.single-product div.product .sol-product-price p.price,
.single-product div.product .sol-product-price .woocommerce-Price-amount,
.single-product div.product .sol-product-price bdi {
	font-family: 'Fraunces', serif;
	font-size: 26px;
	font-weight: 700;
	color: #1C201B;
}

.single-product div.product .sol-product-price p.price {
	margin: 0 0 20px;
	display: block;
}

/* When WC injects price_html directly (no wrapping <p>), style the bare amount */
.single-product div.product .sol-product-price > .woocommerce-Price-amount {
	display: block;
	margin: 0 0 20px;
}

/* ── Feature chips (product tags) ── */
.sol-product-feature-strip {
	display: flex;
	gap: 10px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}

.sol-product-feature-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #EEF2E6;
	border: 1px solid #DCE3D0;
	border-radius: 11px;
	padding: 9px 13px;
	font-size: 12.5px;
	font-weight: 600;
	color: #1E3123;
}

.sol-product-feature-chip svg {
	width: 15px;
	height: 15px;
	stroke: #29422F;
	flex-shrink: 0;
}

/* ── Short description ── */
.sol-product-description {
	font-size: 15px;
	line-height: 1.65;
	color: #5B6358;
	margin-bottom: 24px;
}

.sol-product-description p {
	margin: 0 0 12px;
}

.sol-product-description p:last-child {
	margin-bottom: 0;
}

/* ================================================================== */
/*  Product page order bar (qty + freq + total + CTA)                 */
/* ================================================================== */

.sol-product-order-bar {
	margin-top: 24px;
}

/* Row 1: qty + freq side by side */
.sol-order-controls {
	display: flex;
	gap: 20px;
	align-items: flex-end;
	margin-bottom: 0;
}

.sol-order-qty,
.sol-order-freq {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sol-order-freq {
	flex: 1;
}

.sol-order-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #5B6358;
	margin: 0;
}

/* Qty stepper — product page specific classes (sol-pdp-*) */
.sol-pdp-qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid #D8D5CC;
	border-radius: 11px;
	overflow: hidden;
	background: #fff;
	height: 48px;
}

.sol-pdp-qty-btn {
	width: 42px;
	height: 100%;
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: #1C201B;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sol-pdp-qty-btn:hover {
	background: #F3F7EF !important;
	color: #1C201B !important;
}

.sol-pdp-qty-val {
	width: 36px;
	text-align: center;
	border: none;
	border-left: 1.5px solid #D8D5CC;
	border-right: 1.5px solid #D8D5CC;
	font-size: 16px;
	font-weight: 700;
	color: #1C201B;
	background: #fff;
	height: 100%;
	padding: 0;
	-moz-appearance: textfield;
}

.sol-pdp-qty-val::-webkit-inner-spin-button,
.sol-pdp-qty-val::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

/* Frequency select — style to match stepper height */
.sol-order-freq .woocommerce-variation,
.sol-order-freq select,
.sol-order-freq .sol-frequency-select {
	height: 48px;
	border: 1.5px solid #D8D5CC;
	border-radius: 11px;
	padding: 0 36px 0 14px;
	font-size: 15px;
	color: #1C201B;
	background: #fff url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E") no-repeat right 10px center;
	background-size: 16px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}

/* Divider */
.sol-order-divider {
	border: none;
	border-top: 1px solid #E4E1D7;
	margin: 20px 0;
}

/* Row 2: total + CTA */
.sol-order-summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.sol-order-total {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sol-product-total-value {
	font-family: 'Fraunces', serif;
	font-size: 28px;
	font-weight: 700;
	color: #1C201B;
	margin: 0;
	line-height: 1.1;
}

/* CTA button — let Storefront theme color apply, just override shape/size */
.sol-order-summary-row .single_add_to_cart_button,
.sol-order-summary-row .button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 14px;
	padding: 14px 24px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
}

/* Hide the WC single_variation_wrap container — we render our own UI.
   But keep it in the DOM so WC's variation JS can find it and enable
   the add-to-cart button after a variation is matched. */
.sol-wc-variation-hook-container {
	display: none !important;
}

/* WC's variation JS hides .single_variation_wrap until a variation is
   matched, then shows it. Since our button is outside that wrapper,
   we need to always show our order bar. The button inside it is
   enabled/disabled by WC JS via the .disabled class. */
.sol-product-order-bar .single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Strip the old "Frequency" label + br tags that select_frequency() adds */
.sol-order-freq br,
.sol-order-freq > div > b {
	display: none;
}

.sol-order-freq .select-frequency {
	height: 48px;
	border: 1.5px solid #D8D5CC;
	border-radius: 11px;
	padding: 0 36px 0 14px;
	font-size: 15px;
	color: #1C201B;
	background: #fff url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E") no-repeat right 10px center;
	background-size: 16px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}

/* ================================================================== */
/*  Grouped / Assortment product form                                  */
/* ================================================================== */

/* Card wrapper */
.sol-assortment-form {
    padding: 0 !important;
	background: #fff;
	border-radius: 12px;
	border: 1px solid #E4E1D7;
	overflow: hidden;
	margin-top: 16px;
}

/* Item rows — reuse sidebar .sol-no-item layout */
.sol-assortment-form .sol-no-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid #e8e8e4;
}

.sol-assortment-form .sol-no-item:last-of-type {
	border-bottom: none;
}

/* Thumbnail */
.sol-assortment-form .sol-no-item-img {
	width: 72px;
	height: 72px;
	border-radius: 8px;
	object-fit: cover;
	background: #e8e8e4;
	flex-shrink: 0;
}

.sol-assortment-form .sol-no-item-img-placeholder {
	width: 72px;
	height: 72px;
	border-radius: 8px;
	background: #e8e8e4;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: #bbb;
}

/* Info column */
.sol-assortment-form .sol-no-item-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* Name + price row */
.sol-assortment-form .sol-no-item-name-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.sol-assortment-form .sol-no-item-name {
	font-weight: 600;
	font-size: 15px;
	color: #2b2b2b;
	margin: 0 0 2px;
	line-height: 1.3;
	flex: 1 1 0;
	min-width: 0;
}

.sol-assortment-form .sol-no-item-name a {
	color: inherit;
	text-decoration: none;
}

.sol-assortment-form .sol-no-item-name a:hover {
	text-decoration: underline;
}

.sol-assortment-form .sol-no-item-price {
	font-weight: 700;
	font-size: 15px;
	color: #2b2b2b;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Variation subtitle */
.sol-assortment-form .sol-no-item-meta {
	font-size: 12px;
	color: #888;
	margin: 0 0 4px;
}

/* Controls row */
.sol-assortment-form .sol-no-item-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	flex-wrap: wrap;
}

/* Qty stepper — reuse sidebar styles */
.sol-assortment-form .sol-no-qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	height: 40px;
}

.sol-assortment-form .sol-no-qty-btn {
	width: 40px;
	height: 40px;
	border: none;
	background: #f6f5f1;
	font-size: 20px;
	font-weight: 600;
	color: #555;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
	transition: background .15s;
}

.sol-assortment-form .sol-no-qty-btn:hover {
	background: #e8e8e4 !important;
	color: #555 !important;
}

.sol-assortment-form .sol-grp-qty-minus {
	color: #c0392b;
	background: #fdf0ee;
}

.sol-assortment-form .sol-grp-qty-minus:hover {
	background: #f9d9d5 !important;
	color: #c0392b !important;
}

.sol-assortment-form .sol-grp-qty-plus {
	color: #4a7c59;
	background: #eaf4ee;
}

.sol-assortment-form .sol-grp-qty-plus:hover {
	background: #d4ecdb !important;
	color: #4a7c59 !important;
}

.sol-assortment-form .sol-no-qty-val {
	min-width: 36px;
	width: 40px;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	color: #2b2b2b;
	border: none;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	background: transparent;
	height: 40px;
	padding: 0;
	outline: none;
	-moz-appearance: textfield;
}

.sol-assortment-form .sol-no-qty-val::-webkit-inner-spin-button,
.sol-assortment-form .sol-no-qty-val::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Frequency select */
.sol-assortment-form .sol-no-freq-select {
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 14px;
	color: #2b2b2b;
	height: 40px;
	cursor: pointer;
	flex: 1 1 120px;
	min-width: 0;
	max-width: 180px;
}

.sol-assortment-form .sol-no-freq-select:focus {
	outline: 2px solid #4a7c59;
	outline-offset: -1px;
}

/* Unavailable rows */
.sol-assortment-form .sol-no-item--unavailable {
	opacity: .5;
	pointer-events: none;
}

.sol-no-item-unavailable-badge {
	font-size: 12px;
	color: #c0392b;
	font-weight: 600;
	margin: 4px 0 0;
}

/* Footer: total + CTA */
.sol-assortment-footer {
	padding: 16px 18px;
	border-top: 2px solid #dde6cc;
	background: #eef3e4;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

/* Total block — reuses .sol-order-total / .sol-product-total-value from order bar */
.sol-assortment-total {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sol-assortment-total .sol-order-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #5B6358;
	margin: 0;
}

.sol-assortment-total .sol-product-total-value {
	font-family: 'Fraunces', serif;
	font-size: 24px;
	font-weight: 700;
	color: #1C201B;
	margin: 0;
	line-height: 1.1;
}

.sol-assortment-cta {
	border-radius: 10px;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* ── Responsive ── */
@media (max-width: 900px) {
	.sol-product-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.sol-product-media {
		position: static;
	}

	.sol-product-title {
		font-size: 30px;
	}
}