/* ============================================================
   PRODUCT PAGE DESIGN
   ============================================================ */

.single-product {
	--red: #c81e3a;
	--red-dark: #a9182f;
	--red-tint: #fdeef1;
	--ink-60: #6b6e78;
	--ink-30: #c7c9d1;
	--green: #1f8a4c;
	--radius: 12px;
	--shadow: 0 1px 2px rgba(20, 20, 30, .04), 0 8px 24px -12px rgba(20, 20, 30, .12);
}

/* ---------- 3-column grid: gallery | info | buybox ----------
   .summary uses display:contents so the two wrapper <div>s built by
   hooks below (.info / .buybox) become direct grid items alongside
   the gallery, instead of being nested one level deeper. */
.single-product .product-entry-wrapper {
	display: grid !important;
	grid-template-columns: 1fr 1fr 400px !important;
	grid-template-rows: auto auto auto !important;
	gap: 5px !important;
	align-items: start;
	flex-wrap: unset !important;
	/* The product <article> renders in Blocksy "wide" mode, which redefines
	   the width custom-properties to the WIDE value here — so referencing any
	   of them (--theme-block-max-width / --theme-normal-container-max-width)
	   just re-inherits that wide width. Pin an explicit width instead so the
	   top section lines up with the breadcrumb, calculator, tabs and related
	   products (all rendered at the normal 1290px container). */
	width: 100% !important;
	max-width: 1290px !important;
	margin-inline: auto !important;
	box-sizing: border-box;
}
/* .details and .bm-calc are NOT grid items — both are hooked to
   woocommerce_after_single_product_summary, rendering as true siblings
   after .product-entry-wrapper closes, specifically so they don't have
   to sit in a grid row sized by the tallest column (the buybox). */
.single-product .product-entry-wrapper > .summary {
	display: contents;
	/* Blocksy's own .entry-summary rule (this element carries that class
	   too) sets position:sticky + a calc() width + margin-inline-start,
	   sized for its normal 2-column flex layout. display:contents should
	   already neutralize those on an element with no box, but reset them
	   explicitly too so the grid columns can't be pulled out of place. */
	position: static !important;
	width: auto !important;
	margin-inline-start: 0 !important;
	align-self: auto !important;
}
@media (max-width: 1180px) {
	.single-product .product-entry-wrapper {
		grid-template-columns: 1fr 1fr !important;
	}
	.single-product .buybox {
		grid-column: 1 / -1;
	}
}
@media (max-width: 900px) {
	.single-product .product-entry-wrapper {
		grid-template-columns: 1fr !important;
	}
	/* Single column: every region must span the one track. Without this,
	   the desktop grid-column values (info = 2, buybox = 3) would place
	   those items into phantom implicit columns, pushing content off the
	   side and causing horizontal overflow on phones/tablets. Reset them
	   all to full width so they stack in source order: gallery → info →
	   buybox. */
	.single-product .gallery-shell,
	.single-product .woocommerce-product-gallery,
	.single-product .bms-product-gallery,
	.single-product .info,
	.single-product .buybox {
		grid-column: 1 / -1 !important;
		position: static !important;
	}
}

/* ---------- Breadcrumb ----------
   Blocksy's own native breadcrumb (not a custom one — adding a second
   would duplicate it), restyled to match the new design. Blocksy's
   [data-vertical-spacing] container padding + .hero-section margin
   (both theme-wide defaults) leave a lot of empty space above/below
   the breadcrumb on this template — tighten just here. */
.single-product .ct-container-full {
	padding-top: 24px !important;
}
.single-product .hero-section {
	margin-bottom: 20px !important;
}
.single-product .ct-breadcrumbs {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink);
}
.single-product .ct-breadcrumbs a {
	color: var(--ink-60);
	font-weight: 500;
	text-decoration: none;
}
.single-product .ct-breadcrumbs a:hover {
	color: var(--red);
}
.single-product .ct-breadcrumbs .ct-separator {
	width: 8px;
	height: 8px;
	margin: 0 6px;
	color: var(--ink-30);
	vertical-align: middle;
}
.single-product .ct-breadcrumbs .last-item {
	color: var(--ink);
}

/* ============================================================
   GALLERY
   ============================================================ */
/* The whole gallery is now one card (matching info/buybox), so all
   three columns read as equal-height cards instead of the shorter
   ones trailing off into bare page background. */
.single-product .gallery-shell {
	position: relative;
	grid-column: 1;
	padding: 20px;
	display: flex;
	flex-direction: column;
}
.single-product .bms-product-gallery,
.single-product .woocommerce-product-gallery {
	grid-column: 1;
}
.single-product .bms-main-image,
.single-product .woocommerce-product-gallery .ct-product-gallery-container {
	position: relative;
	border-radius: 9px !important;
	overflow: hidden;
	background: var(--panel);
}
.single-product .bms-main-image a {
	display: block;
}
.single-product .bms-main-image img,
.single-product .woocommerce-product-gallery img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0 !important;
	border: 0 !important;
	cursor: zoom-in;
}
.single-product .gal-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: #fff;
	border-radius: 100px;
	padding: 6px 12px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--red);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
	white-space: nowrap;
	z-index: 2;
}
.single-product .gal-zoom {
	position: absolute;
	bottom: 14px;
	right: 14px;
	background: rgba(27, 29, 36, .75);
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	z-index: 2;
	cursor: zoom-in;
	transition: background .15s ease;
}
.single-product .gal-zoom:hover {
	background: var(--red);
}
.single-product .bms-gallery-thumbs {
	display: flex !important;
	gap: 10px !important;
	margin-top: 12px !important;
	flex-wrap: wrap;
}
.single-product .bms-gallery-thumbs a {
	display: block;
	border-radius: 9px !important;
	overflow: hidden;
	border: 2px solid transparent !important;
	opacity: .7;
	transition: border-color .15s ease, opacity .15s ease;
	line-height: 0;
	box-shadow: var(--shadow);
}
.single-product .bms-gallery-thumbs a:hover {
	opacity: 1;
}
.single-product .bms-gallery-thumbs a.is-active {
	border-color: var(--red) !important;
	opacity: 1;
}
.single-product .bms-gallery-thumbs img {
	width: 76px !important;
	height: 76px !important;
	object-fit: cover;
	border-radius: 0 !important;
	border: 0 !important;
	display: block;
	cursor: pointer;
}
.single-product .gal-note {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	color: var(--ink-60);
	line-height: 1.6;
}

/* ============================================================
   GALLERY LIGHTBOX — featured image click opens this, browses the
   same photos as the thumbnail rail. Built by product-features.js.
   ============================================================ */
.bm-lightbox-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(20, 20, 26, .92);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
}
.bm-lightbox-overlay.is-open {
	display: flex;
}
body.bm-lightbox-locked {
	overflow: hidden;
}
.bm-lightbox-stage {
	max-width: 1100px;
	max-height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bm-lightbox-img {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
.bm-lightbox-close {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
.bm-lightbox-close:hover {
	background: var(--red);
}
.bm-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
.bm-lightbox-nav:hover {
	background: var(--red);
}
.bm-lightbox-prev {
	left: 18px;
}
.bm-lightbox-next {
	right: 18px;
}
.bm-lightbox-counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, .75);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
}
@media (max-width: 640px) {
	.bm-lightbox-overlay {
		padding: 70px 16px;
	}
	.bm-lightbox-nav {
		width: 40px;
		height: 40px;
	}
	.bm-lightbox-prev {
		left: 8px;
	}
	.bm-lightbox-next {
		right: 8px;
	}
}

/* ============================================================
   INFO COLUMN
   ============================================================ */
.single-product .info {
	grid-column: 2;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.single-product .brand-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-60);
}
.single-product .brand-row .sku {
	margin-left: auto;
	background: #eef0f3;
	color: var(--ink-60);
	padding: 4px 10px;
	border-radius: 6px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
.single-product .info .rating {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--ink-60);
}
.single-product .info .stars {
	color: #f5a623;
	letter-spacing: 2px;
}
.single-product .info .rating a {
	font-weight: 600;
	color: var(--red);
}
.single-product .specs-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 22px;
	padding: 14px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.single-product .specs-quick .sq {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.single-product .specs-quick .sq .l {
	font-size: 11.5px;
	color: var(--ink-60);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.single-product .specs-quick .sq .v {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ink);
}
.single-product .info .woocommerce-product-details__short-description p {
	font-size: 14px;
	color: #3a3c45;
	line-height: 1.6;
	margin: 0;
}
.single-product .info-cta {
	display: flex;
	gap: 10px;
	margin-top: 6px;
	flex-wrap: wrap;
}
.single-product .ghost-btn {
	flex: 1;
	min-width: 120px;
	border: 1.5px solid var(--line);
	background: #fff;
	border-radius: 9px;
	padding: 11px;
	font-size: 13.5px;
	font-weight: 700;
	font-family: 'Inter', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--ink);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
	cursor: pointer;
}
.single-product .ghost-btn:hover {
	border-color: var(--red);
	color: var(--red);
}

/* ============================================================
   BUY BOX
   ============================================================ */
.single-product .buybox {
	grid-column: 3;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.single-product .buybox > * {
	margin: 0 !important;
}
/* Blocksy's own layout still inserts empty "divider" layer elements
   (rendered as visible horizontal rules) around the add-to-cart spot,
   even though that native layer itself is disabled elsewhere — these
   are pure leftover clutter now, not a real divider between anything. */
.single-product .buybox .ct-product-divider {
	display: none !important;
}
.single-product .buybox .price {
	font-size: 32px !important;
	font-weight: 800 !important;
	letter-spacing: -.02em;
	color: var(--ink) !important;
}
.single-product .buybox .vat-toggle {
	display: flex;
	gap: 6px;
	font-size: 12px;
	color: var(--ink-60);
	margin-top: -6px !important;
}
.single-product .buybox .vat-toggle b {
	color: var(--ink);
}
.single-product .stock-preview .stock {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--green) !important;
	margin: 0 !important;
}
.single-product .stock-preview .stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green);
	flex: none;
}
.single-product .stock-preview .stock.out-of-stock {
	color: var(--red) !important;
}
.single-product .stock-preview .stock.out-of-stock::before {
	background: var(--red);
}
/* Blocksy bundles a second stock line with the add-to-cart form itself;
   the real one is shown earlier (.stock-preview), so hide the duplicate. */
.single-product .ct-product-add-to-cart > .stock {
	display: none !important;
}

/* ---------- Bulk pricing tiers ---------- */
.single-product .tiers {
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
}
.single-product .tiers .th {
	background: #f7f7f9;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-60);
	padding: 9px 14px;
}
.single-product .tier-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	font-size: 13.5px;
	border-top: 1px solid var(--line);
	gap: 10px;
}
.single-product .tier-row.is-current {
	background: var(--red-tint);
}
.single-product .tier-row .qty {
	font-weight: 700;
	white-space: nowrap;
	flex: 0 0 auto;
	color: var(--ink);
}
.single-product .tier-row .each {
	color: var(--ink-60);
	font-weight: 600;
	white-space: nowrap;
	flex: 0 0 auto;
}
.single-product .tier-row .save {
	font-size: 11px;
	font-weight: 700;
	color: var(--red);
	background: #fff;
	border: 1px solid #f3c3cd;
	padding: 2px 8px;
	border-radius: 100px;
	white-space: nowrap;
	flex: 0 0 auto;
}
.single-product .tier-row.is-current .save {
	background: var(--red);
	color: #fff;
	border-color: var(--red);
}

/* ---------- Quantity + add to basket ----------
   Blocksy's own stepper (.ct-increase/.ct-decrease) keeps its existing
   behavior; only sizing/color are tuned to match the new buybox. */
.single-product .buybox .ct-product-add-to-cart {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.single-product .buybox .ct-cart-actions {
	display: flex !important;
	gap: 10px;
	align-items: stretch !important;
}
.single-product .buybox .quantity {
	border: 1.5px solid var(--line) !important;
	border-radius: 9px !important;
	overflow: hidden;
}
.single-product .buybox .quantity .qty {
	height: 46px !important;
}
/* + / - stepper glyphs in brand red (Blocksy colours these via `color`). */
.single-product .buybox .quantity .ct-increase,
.single-product .buybox .quantity .ct-decrease {
	color: var(--bms-red, #e1251b) !important;
}
.single-product .buybox .quantity .ct-increase:hover,
.single-product .buybox .quantity .ct-decrease:hover {
	color: #fff !important;
	background: var(--bms-red, #e1251b) !important;
}
.single-product form.cart .single_add_to_cart_button {
	border-radius: 9px !important;
}

/* ============================================================
   DETAILS / TABS CARD
   ============================================================ */
.single-product .details {
	/* Same reasoning as .bm-calc below: this renders outside the
	   container that constrains .product-entry-wrapper (that comes from
	   Blocksy's .is-width-constrained utility on that element directly,
	   not a shared ancestor), so match it explicitly here too. */
	/* Cap at the viewport (minus a gutter) so this never forces horizontal
	   overflow on tablets/phones narrower than the container width. */
	width: min(var(--theme-container-width), calc(100% - 32px));
	max-width: var(--theme-block-max-width);
	margin-inline: auto;
	box-sizing: border-box;
	margin-top: 20px;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	font-family: 'Inter', sans-serif;
}
.single-product .details .woocommerce-tabs.wc-tabs-wrapper {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------- Tab nav ---------- */
.single-product .details ul.tabs.wc-tabs {
	display: flex !important;
	gap: 0 !important;
	padding: 0 28px !important;
	margin: 0 !important;
	border-bottom: 1px solid var(--line) !important;
	background: none !important;
	overflow-x: auto;
}
.single-product .details ul.tabs.wc-tabs::before,
.single-product .details ul.tabs.wc-tabs::after {
	display: none !important;
}
.single-product .details ul.tabs.wc-tabs li {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}
.single-product .details ul.tabs.wc-tabs li::before,
.single-product .details ul.tabs.wc-tabs li::after {
	display: none !important;
}
.single-product .details ul.tabs.wc-tabs li a {
	display: block;
	padding: 18px 4px !important;
	margin-right: 32px;
	font-size: 14.5px;
	font-weight: 700;
	font-family: 'Inter', sans-serif;
	color: var(--ink-60) !important;
	white-space: nowrap;
	border-bottom: 2.5px solid transparent !important;
	transition: color .15s ease, border-color .15s ease;
}
.single-product .details ul.tabs.wc-tabs li a:hover {
	color: var(--ink) !important;
}
.single-product .details ul.tabs.wc-tabs li.active a {
	color: var(--ink) !important;
	border-bottom-color: var(--red) !important;
}

/* ---------- Tab panels ---------- */
.single-product .details .woocommerce-Tabs-panel {
	max-width: none !important;
	margin: 0 !important;
	padding: 28px !important;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--ink-60);
}
.single-product .details .woocommerce-Tabs-panel > h2:first-child {
	display: none !important;
}
.single-product .details .woocommerce-Tabs-panel p {
	margin: 0 0 14px !important;
	max-width: 720px;
}
.single-product .details .woocommerce-Tabs-panel p:empty {
	display: none !important;
}
.single-product .details .woocommerce-Tabs-panel p:last-child {
	margin-bottom: 0 !important;
}
.single-product .details .woocommerce-Tabs-panel h2,
.single-product .details .woocommerce-Tabs-panel h3 {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: var(--ink);
	letter-spacing: -.01em;
	margin: 24px 0 10px;
}
.single-product .details .woocommerce-Tabs-panel h2:first-of-type,
.single-product .details .woocommerce-Tabs-panel h3:first-of-type {
	margin-top: 0;
}
.single-product .details .woocommerce-Tabs-panel ul {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
	max-width: 720px;
}
.single-product .details .woocommerce-Tabs-panel ul li {
	position: relative;
	padding-left: 20px;
}
.single-product .details .woocommerce-Tabs-panel ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--red);
}
.single-product .details .woocommerce-Tabs-panel strong {
	color: var(--ink);
	font-weight: 700;
}

/* ---------- Specification tab (custom .spec-table) ---------- */
.single-product .details .spec-table {
	width: 100%;
	max-width: 640px;
	border-collapse: collapse;
	font-size: 13.5px;
}
.single-product .details .spec-table tr:nth-child(odd) {
	background: #f7f7f9;
}
.single-product .details .spec-table td {
	padding: 10px 14px;
}
.single-product .details .spec-table td:first-child {
	color: var(--ink-60);
	font-weight: 600;
	width: 38%;
}
.single-product .details .spec-table td:last-child {
	font-weight: 700;
	color: var(--ink);
}

/* ---------- Additional information tab (native WC attributes table),
   shown automatically if a product has attributes marked visible ---------- */
.single-product .details table.woocommerce-product-attributes,
.single-product .details .shop_attributes {
	width: 100%;
	max-width: 640px;
	border: 1px solid var(--line);
	border-radius: 9px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.single-product .details .shop_attributes th {
	background: #f7f7f9;
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-60);
	padding: 10px 14px;
	width: 38%;
}
.single-product .details .shop_attributes td {
	padding: 10px 14px;
	color: var(--ink);
	font-weight: 700;
	font-style: normal;
}
.single-product .details .shop_attributes td p {
	margin: 0 !important;
}
.single-product .details .shop_attributes tr + tr th,
.single-product .details .shop_attributes tr + tr td {
	border-top: 1px solid var(--line);
}

/* ---------- Reviews tab empty state ---------- */
.single-product .details #reviews #comments {
	margin: 0 0 20px;
}
.single-product .details #review_form_wrapper .comment-form p {
	margin: 0 0 14px !important;
}
.single-product .details #review_form_wrapper label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
}
.single-product .details #review_form_wrapper input[type="text"],
.single-product .details #review_form_wrapper input[type="email"],
.single-product .details #review_form_wrapper textarea {
	border: 1px solid var(--line) !important;
	border-radius: 9px !important;
}
.single-product .details #review_form_wrapper .form-submit input {
	background: var(--red) !important;
	border: 0 !important;
	border-radius: 9px !important;
	font-family: 'Archivo', sans-serif;
	font-weight: 700 !important;
	text-transform: none !important;
}
.single-product .details #review_form_wrapper .form-submit input:hover {
	background: var(--red-dark) !important;
}

@media (max-width: 640px) {
	.single-product .details ul.tabs.wc-tabs {
		padding: 0 18px !important;
	}
	.single-product .details ul.tabs.wc-tabs li a {
		margin-right: 22px;
	}
	.single-product .details .woocommerce-Tabs-panel {
		padding: 20px !important;
	}
}

/* ---------- Pack calculator ----------
   Not part of the approved design; sits full-width, a true sibling of
   the 3-column grid rather than a competing item inside it. It renders
   outside the container that constrains .product-entry-wrapper (that
   constraint comes from Blocksy's own .is-width-constrained utility
   class applied directly on that element, not from a shared ancestor),
   so the same constraint is applied here explicitly to line it up. */
.single-product .bm-calc {
	/* Cap at the viewport (minus a gutter) so this never forces horizontal
	   overflow on tablets/phones narrower than the container width. */
	width: min(var(--theme-container-width), calc(100% - 32px));
	max-width: var(--theme-block-max-width);
	margin-inline: auto;
	box-sizing: border-box;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #f7f7f9;
	padding: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.single-product .bm-calc-title {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: var(--ink);
	margin: 0 0 6px;
}
.single-product .bm-calc-sub {
	font-size: 13px;
	color: var(--ink-60);
	line-height: 1.5;
	margin: 0 0 16px;
}
.single-product .bm-calc-sub a {
	color: var(--red);
	text-decoration: underline;
}
.single-product .bm-calc-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 12px;
}
.single-product .bm-calc-row label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	flex: none;
}
.single-product .bm-calc-input-group {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 0 12px;
	height: 42px;
}
.single-product .bm-calc-input-group input {
	border: 0 !important;
	padding: 0 !important;
	height: 40px !important;
	width: 100px;
	background: transparent !important;
	font-size: 14px;
	text-align: right;
}
.single-product .bm-calc-input-group input:focus {
	outline: none !important;
	box-shadow: none !important;
}
.single-product .bm-calc-input-group span {
	font-size: 13px;
	color: var(--ink-60);
}
.single-product .bm-calc-row select {
	height: 42px;
	border: 1px solid var(--line) !important;
	border-radius: 9px !important;
	padding: 0 12px !important;
	font-size: 13.5px;
	background: #fff;
}
.single-product .bm-calc-result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 14px 16px;
	margin-top: 4px;
}
.single-product .bm-calc-result span {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
}
.single-product .bm-calc-use {
	flex: none;
	height: 38px;
	padding: 0 18px;
	border: 0;
	border-radius: 9px;
	background: var(--red);
	color: #fff;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	transition: background .15s ease;
}
.single-product .bm-calc-use:hover {
	background: var(--red-dark);
}

@media (max-width: 480px) {
	.single-product .bm-calc-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.single-product .bm-calc-result {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

/* ============================================================
   STICKY ADD-TO-BASKET BAR (mobile/tablet only)
   ============================================================ */
.bm-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background: #fff;
	border-top: 1px solid var(--line, #e7e5e1);
	box-shadow: 0 -6px 20px rgba(0, 0, 0, .1);
	padding: 10px 16px;
}
.bm-sticky-bar[hidden] {
	display: none;
}
.bm-sticky-bar-inner {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
}
.bm-sticky-media img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}
.bm-sticky-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.bm-sticky-title {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink, #1b1e23);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bm-sticky-price {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 14px;
	color: var(--ink, #1b1e23);
}
.bm-sticky-btn {
	flex: none;
	height: 42px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--radius, 8px);
	background: var(--red, #E1251B);
	color: #fff;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	transition: background .15s ease;
}
.bm-sticky-btn:hover {
	background: var(--red-dark, #B81E15);
}
@media (min-width: 901px) {
	.bm-sticky-bar {
		display: none !important;
	}
}

/* ============================================================
   RESPONSIVE HARDENING — cross-device polish
   ============================================================ */

/* Grid children default to min-width:auto, which lets long product
   names, wide images or the spec table push past the viewport edge.
   Allowing them to shrink prevents any horizontal scroll on the page. */
.single-product .product-entry-wrapper,
.single-product .gallery-shell,
.single-product .woocommerce-product-gallery,
.single-product .bms-product-gallery,
.single-product .info,
.single-product .buybox {
	min-width: 0;
	max-width: 100%;
}
.single-product .gallery-shell img,
.single-product .woocommerce-product-gallery img,
.single-product .bms-main-image img {
	max-width: 100%;
	height: auto;
}

/* Wide spec/comparison tables scroll inside their own panel instead of
   stretching the page on small screens. */
.single-product .details .woocommerce-Tabs-panel {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.single-product .spec-table { min-width: 0; width: 100%; }

/* Tablet portrait (buybox is already full-width below the 2-up gallery/
   info from 1180 down; keep the reading column comfortable). */
@media (max-width: 900px) {
	.single-product .buybox {
		max-width: 560px;
		margin-inline: auto !important;
	}
}

/* Large phones / small tablets */
@media (max-width: 600px) {
	.single-product .gallery-shell,
	.single-product .info,
	.single-product .buybox {
		padding: 16px;
	}
	.single-product .buybox { max-width: none; }
	.single-product .buybox .price { font-size: 28px !important; }
	.single-product .specs-quick { gap: 14px 20px; }
	/* CTA + add-to-basket controls go full width so they're easy to tap. */
	.single-product .info-cta { flex-direction: column; }
	.single-product .ghost-btn { width: 100%; flex: 1 1 auto; }
	.single-product .buybox .ct-cart-actions {
		flex-wrap: wrap;
	}
	.single-product form.cart .single_add_to_cart_button {
		flex: 1 1 100% !important;
		min-width: 0 !important;
	}
}

/* Small phones */
@media (max-width: 400px) {
	.single-product .buybox .price { font-size: 25px !important; }
	.single-product .brand-row { flex-wrap: wrap; }
	.single-product .brand-row .sku { margin-left: 0; }
	.single-product .details ul.tabs.wc-tabs li a { font-size: 13.5px; }
}