/* =============================================================
   Single product page — option contrast + brand colours.

   IMPORTANT: the visible configurator is NOT Woodmart's swatch
   markup. It's a custom "wpc-" component (wpc-tabs /
   wpc-swatch-panel / wpc-swatch) that replaces the standard
   variation form. Woodmart's .wd-swatch markup is still in the
   DOM but hidden — which is why styling it changed nothing.
   ============================================================= */

.single-product {
	--bbs-navy: #2b2e52;
	--bbs-ink: #1a1a2e;
	--bbs-muted: #5a5870;
	--bbs-line: #d9d9e2;
	--bbs-sale: #e4032e;
}

/* -------------------------------------------------------------
   Configurator panel — replace the beige/putty background with
   a clean neutral surface and brand accents.
   ------------------------------------------------------------- */
.wpc-variations,
.wpc-swatch-panel,
.wpc-tabs,
.wpc-total-row,
.wpc-summary .wpc-total {
	background: #f7f8fa !important;
	border-color: #e6e7ee !important;
	border-radius: 12px !important;
}

.wpc-swatch-panel {
	background: transparent !important;
	border: 0 !important;
	padding: 4px 0 !important;
}

.wpc-variations {
	padding: 14px !important;
	border: 1px solid #e6e7ee !important;
}

.wpc-total-row {
	border: 1px solid #e6e7ee !important;
	padding: 14px 16px !important;
}

/* Trustpilot rating under the title */
.bbs-tp-mini {
	margin: 6px 0 10px;
}

/* Trustpilot review section */
.bbs-tp-reviews {
	margin: 48px 0 8px;
	padding: 28px;
	background: #f7f8fa;
	border: 1px solid #e6e7ee;
	border-radius: 12px;
}

.bbs-tp-reviews__title {
	margin: 0 0 18px;
	font-size: 26px;
	font-weight: 700;
	color: var(--bbs-ink);
}

/* Customers also viewed */
.bbs-also-viewed {
	margin: 40px 0 10px;
}

.bbs-also-viewed .related > h2,
.bbs-also-viewed h2 {
	margin: 0 0 22px;
	font-size: 26px;
	font-weight: 700;
	color: var(--bbs-ink);
	text-align: left;
}

/* Gap between cards. Woodmart carousels place slides in a track
   with no gutter, so the card borders meet. Padding on the slide
   keeps the gap outside the card and preserves slide widths. */
.bbs-also-viewed .wd-carousel-item,
.bbs-also-viewed .wd-carousel-inner > .wd-carousel-item {
	padding-left: 8px !important;
	padding-right: 8px !important;
	box-sizing: border-box;
}

.bbs-also-viewed .wd-carousel {
	margin-left: -8px;
	margin-right: -8px;
}

/* Grid fallback, when the section renders as a grid rather than
   a carousel. */
.bbs-also-viewed .products.wd-grid-g,
.bbs-also-viewed .wd-products {
	--wd-gap-lg: 16px;
	--wd-gap-md: 16px;
	--wd-gap-sm: 12px;
	gap: 16px;
}

/* Product description accordion body */
.bbs-product-description {
	line-height: 1.7;
	color: var(--bbs-ink);
}

/* -------------------------------------------------------------
   Remove duplicated price + stock meter
   The wpc- configurator already shows the price (with the sale
   badge and a live total), so Woodmart's own price block is a
   second, conflicting figure — and it carries the stray "kg"
   price-unit suffix. The stock meter is hidden alongside it.
   ------------------------------------------------------------- */
.single-product .wd-single-price,
.single-product .wd-progress-bar.wd-stock-progress-bar {
	display: none !important;
}

/* -------------------------------------------------------------
   Price row
   ------------------------------------------------------------- */
.wpc-price,
.wpc-price .amount {
	color: var(--bbs-sale) !important;
	font-weight: 700;
}

.wpc-price-compare,
.wpc-price-compare .amount {
	color: var(--bbs-muted) !important;
	text-decoration: line-through;
	font-weight: 400;
}

.wpc-discount-badge {
	background: var(--bbs-sale) !important;
	color: #fff !important;
	border-radius: 6px;
	padding: 4px 9px;
	font-size: 12px;
	font-weight: 700;
}

/* -------------------------------------------------------------
   Attribute tabs (Size / Color / Base / Headboard / Storage)
   ------------------------------------------------------------- */
.wpc-tab {
	background: #fff !important;
	border: 1.5px solid var(--bbs-line) !important;
	border-radius: 10px !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.wpc-tab:hover {
	border-color: var(--bbs-navy) !important;
}

.wpc-tab-name {
	color: var(--bbs-ink) !important;
	font-weight: 700 !important;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: 1 !important;
}

.wpc-tab-selected {
	color: var(--bbs-muted) !important;
	font-size: 11px;
	font-weight: 500;
	opacity: 1 !important;
}

.wpc-tab.is-active {
	border-color: var(--bbs-navy) !important;
	box-shadow: 0 0 0 1px var(--bbs-navy) inset;
	background: #f5f6fb !important;
}

.wpc-tab.is-active .wpc-tab-name,
.wpc-tab.is-active .wpc-tab-selected {
	color: var(--bbs-navy) !important;
}

/* -------------------------------------------------------------
   Option tiles inside each panel
   ------------------------------------------------------------- */
.wpc-swatch {
	background: #fff !important;
	border: 1.5px solid var(--bbs-line) !important;
	border-radius: 10px !important;
	color: var(--bbs-ink) !important;
	opacity: 1 !important;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.wpc-swatch:hover {
	border-color: var(--bbs-navy) !important;
}

.wpc-swatch-name {
	color: var(--bbs-ink) !important;
	font-weight: 600 !important;
	font-size: 13px;
	opacity: 1 !important;
}

.wpc-swatch-diff {
	color: var(--bbs-muted) !important;
	font-size: 12px;
	font-weight: 600;
}

/* Selected */
.wpc-swatch.is-selected {
	border-color: var(--bbs-navy) !important;
	box-shadow: 0 0 0 1px var(--bbs-navy) inset;
	background: #f5f6fb !important;
}

.wpc-swatch.is-selected .wpc-swatch-name {
	color: var(--bbs-navy) !important;
	font-weight: 700 !important;
}

.wpc-swatch-check {
	background: var(--bbs-navy) !important;
	color: #fff !important;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
}

.wpc-swatch.is-selected .wpc-swatch-check {
	display: inline-flex;
}

/* Unavailable — legible, not faded to nothing. No strikethrough:
   it was reading as "everything is unavailable", including the
   currently selected option. */
.wpc-swatch.is-disabled,
.wpc-swatch[disabled] {
	background: #f4f4f7 !important;
	border-color: #e2e2ea !important;
	opacity: 1 !important;
	cursor: not-allowed;
}

.wpc-swatch.is-disabled .wpc-swatch-name,
.wpc-swatch[disabled] .wpc-swatch-name {
	color: #9a9aab !important;
	text-decoration: none !important;
}

/* The selected option is never shown as unavailable. */
.wpc-swatch.is-selected .wpc-swatch-name,
.wpc-swatch.is-selected.is-disabled .wpc-swatch-name {
	color: var(--bbs-navy) !important;
	text-decoration: none !important;
}

/* -------------------------------------------------------------
   Total + add to basket
   ------------------------------------------------------------- */
.wpc-total-row,
.wpc-total {
	color: var(--bbs-ink) !important;
	font-weight: 700;
}

.wpc-total-value,
.wpc-total .amount {
	color: var(--bbs-sale) !important;
}

.wpc-add-to-cart,
.single-product .single_add_to_cart_button {
	background: var(--bbs-navy) !important;
	color: #fff !important;
	border-radius: 8px !important;
	font-weight: 700;
}

.wpc-notice,
.single-product .wc-no-matching-variations {
	color: var(--bbs-ink) !important;
	font-weight: 600;
}

@media (max-width: 768px) {
	/* One card per view — the horizontal card needs full width */
	.bbs-also-viewed .wd-carousel {
		--wd-col-sm: 1 !important;
	}

	.bbs-also-viewed .wd-carousel-item {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Room for the arrows either side */
	.bbs-also-viewed .wd-carousel-inner {
		padding-inline: 6px;
	}
}