/* ==========================================================
   Granite Setts — Single Product Redesign
   Scope: .granite-single-product (added by granite-single-product.js)
   Colours reuse theme variables already defined in style.css:
   --blue: #24346a   --red: #dc002c
========================================================== */

/* ---- Layout: gallery (+ description) left, summary right ---- */

.single-product .white_block {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.product_cat-granite-setts .woocommerce div.product .images {
    width: 46% !important;
}

.single-product .white_block > .woocommerce-product-gallery {
	order: 1;
	width: 50% !important;
	box-sizing: border-box !important;
}

.single-product .white_block > .summary.entry-summary {
	order: 2;
	width: 50% !important;
	box-sizing: border-box !important;
}

.single-product .white_block > .woocommerce-tabs.wc-tabs-wrapper {
	order: 3 !important;
	width: 50% !important;
	margin-top: 25px !important;
	margin-left: 54% !important;
	box-sizing: border-box !important;
}

@media (max-width: 1023px) {
	.single-product .white_block {
		flex-direction: column;
	}
	.single-product .white_block > .woocommerce-product-gallery,
	.single-product .white_block > .summary.entry-summary,
	.single-product .white_block > .woocommerce-tabs.wc-tabs-wrapper {
		width: 100% !important;
	}
	.single-product .white_block > .woocommerce-tabs.wc-tabs-wrapper {
		margin-top: 30px;
	}
}

/* ---- Title ---- */

.granite-product-title-wrap {
	margin-bottom: 15px;
}
.granite-product-title-wrap h1.product_title {
	margin-bottom: 0;
	color: #24346A;
	font-weight: 300 !important;
}
.woocommerce div.product .product_title {
	padding: 0 0 20px 0 !important;
}

/* ---- Description block (moved by JS to sit inside the gallery column,
   right under the thumbnails) ---- */

.granite-single-product .woocommerce-product-gallery .granite-description-block {
	margin-top: 25px;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
}
.granite-description-heading {
	color: #24346A !important;
	font-size: 24px !important;
	margin-bottom: 10px !important;
}
.granite-description-content {
	font-size: 15px;
	line-height: 1.6;
	color: #333;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    letter-spacing: normal !important;
}

/* Hide old static "Product description" block (duplicate of our dynamic
   Description: block) */
.granite-single-product .product_description {
	display: none !important;
}

/* Hide the OLD duplicate Specifications/Delivery costs buttons that live
   inside .summary — replaced by .granite-product-links */
.granite-single-product .summary.entry-summary > .btns {
	display: none !important;
}

/* Avoid showing the "declared meterage" notice twice: hide the one that
   sits directly inside .summary, keep the one inside the tabs/notices
   block */
.granite-single-product .summary.entry-summary > .btns,
.granite-single-product .summary.entry-summary > .woocommerce-tabs.wc-tabs-wrapper {
	display: none !important;
}

/* ---- Hide the native WooCommerce variation panel (price/desc/availability) ----
   Its content is fully re-used elsewhere (custom colour/size UI, moved
   description, existing calculator) so it isn't needed visually. The
   calculator + Buy Now button are SIBLINGS of this element and stay visible. */

.granite-single-product .single_variation_wrap > .woocommerce-variation.single_variation {
	display: none !important;
}

/* ---- Hide native attribute table, replaced by custom UI ---- */

.granite-single-product .granite-native-attribute {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.granite-single-product table.variations .reset_variations {
	display: none;
}

/* ---- Override the legacy ".value div" inline/padding-zero rule from
   style.css, which was written for the old radio-button layout and was
   also catching our new custom colour/size UI. ---- */

.woocommerce .white_block .value .granite-attribute-heading,
.woocommerce .white_block .value .granite-attribute-options {
	display: flex !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

.woocommerce .white_block .value .granite-attribute-control {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	width: 100% !important;
	margin: 0 0 26px 0 !important;
}

.woocommerce .white_block .value button.granite-size-option {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 12px 22px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	min-width: 150px !important;
	/*font-family: "Montserrat", sans-serif;*/
    font-size: 16px;
}

.woocommerce .white_block .value button.granite-colour-option {
	display: inline-flex !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ---- Custom attribute controls (colour / size) ---- */

.granite-attribute-control {
	margin-bottom: 26px;
	display: block !important;
}

.granite-attribute-heading {
	font-family: "Bitter", sans-serif;
	font-size: 22px;
	font-weight: 300 !important;
	color: #24346A;
	margin-bottom: 12px !important;
	display: flex !important;
	align-items: center;
	gap: 6px;
	width: 100% !important;
	
}

.no_cra {
    color: #24346A;
    font-family: "Bitter", sans-serif;
	font-size: 22px;
	font-weight: 200 !important;
}

.woocommerce .white_block input#area_needed, .woocommerce .quantity input.qty {
    background: #f3f3f3 !important;
    border: 1px solid #DADBDD !important;
    padding: 0 5px;
    width: 6em !important;
    text-align: center;
}

.granite-attribute-selected {
	font-size: 13px;
	color: #404040;
	font-weight: 300;
	margin-bottom: 10px;
}

.granite-attribute-options {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px;
	width: 100% !important;
}

/* Colour swatches — circular */

.granite-colour-option {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 2px solid #d9d9d9;
	background-color: #f3f3f3;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	cursor: pointer;
	padding: 0;
	transition: border-color 0.2s, transform 0.2s;
}
.granite-colour-option:hover:not(:disabled) {
	border-color: #24346A;
	transform: scale(1.05);
}
.granite-colour-option.is-active {
	border-color: #fff;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fff;
}
.granite-colour-option:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Size boxes — rectangular */

.granite-size-option {
	min-width: 150px !important;
	padding: 18px 24px !important;
	background: #F3F3F3;
	border: 1px solid #DADBDD;
	color: #404040;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	text-align: center;
	line-height: 1.3;
	box-sizing: border-box !important;
	transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}
.granite-size-option:hover:not(:disabled) {
	border-color: #24346A;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.granite-size-option.is-active {
	border-color: #24346A;
	background: #24346A;
	color: #fff;
}
.granite-size-option:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Size info icon */

.granite-size-info {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	line-height: 1;
	border-radius: 50%;
	border: 1px solid #949494;
	color: #949494;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	font-family: Georgia, serif;
	cursor: help;
	flex-shrink: 0;
	box-sizing: border-box;
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

/* ---- Calculator: only show area input, product total, VAT ---- */

.granite-single-product .granite-calculator-hidden-row {
	display: none !important;
}

.granite-single-product #price_calculator {
	border: none !important;
	background: transparent !important;
	width: 100%;
}
.granite-single-product #price_calculator tr {
	border: none !important;
	background: none !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 6px 0;
}
.granite-single-product #price_calculator td {
	padding: 0 !important;
}

.granite-single-product .granite-calculator-area-row label {
	font-family: "Bitter", sans-serif;
	color: #24346A;
	font-weight: 600;
	font-size: 17px;
}
.granite-single-product .granite-calculator-area-row input#area_needed {
	width: 90px;
	text-align: center;
	border: 1px solid #bbb;
	background: #fff !important;
}

.granite-single-product .granite-calculator-total-row {
	font-family: "Bitter", sans-serif;
	font-weight: 700;
	font-size: 19px;
}
.granite-single-product .granite-calculator-total-row,
.granite-single-product .granite-calculator-total-row * {
	color: #24346A !important;
}

.granite-single-product .granite-calculator-vat-row {
	font-family: "Bitter", sans-serif;
	font-weight: 700;
	font-size: 19px;
}
.granite-single-product .granite-calculator-vat-row,
.granite-single-product .granite-calculator-vat-row * {
	color: #24346A !important;
}

/* ---- Quantity / crates ---- */

.granite-single-product .quantity {
	display: block;
	margin-bottom: 6px;
}
.granite-single-product .quantity input.qty[type="number"] {
	-moz-appearance: number-input;
}
.granite-single-product .quantity input.qty[type="number"]::-webkit-inner-spin-button,
.granite-single-product .quantity input.qty[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: inner-spin-button !important;
	display: block !important;
	opacity: 1;
}

.granite-bulk-note {
    font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-style: italic;
	color: #101010;
	margin: 6px 0 20px 0 !important;
}

/* ---- Buttons ---- */

.granite-single-product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	gap: 0px;
	align-items: flex-start;
}

.granite-single-product .single_add_to_cart_button.button.alt {
	background: #24346A !important;
	color: #fff !important;
	border: 0;
	min-height: 55px;
	padding: 10px 40px;
	font-family: "Bitter", sans-serif;
	font-weight: 300;
	font-size: 18px;
	width: 100%;
	max-width: 320px;
}
.granite-single-product .single_add_to_cart_button.button.alt:hover {
	background: var(--red) !important;
}

/* Quantity > 10: hide Buy Now, show the custom order CTA instead. */
.granite-single-product.is-bulk-order .woocommerce-variation-add-to-cart .single_add_to_cart_button.button.alt {
	display: none !important;
}

.granite-single-product .granite-custom-order-button {
	display: none;
	min-height: 55px;
	padding: 10px 40px;
	background: var(--red);
	color: #fff;
	font-family: "Bitter", sans-serif;
	font-weight: 300;
	font-size: 18px;
	text-align: center;
	text-decoration: none !important;
	width: 100%;
	max-width: 320px;
	align-items: center;
	justify-content: center;
}
.granite-single-product.is-bulk-order .granite-custom-order-button {
	display: flex !important;
}

.granite-product-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
	width: 100%;
	max-width: 320px;
	font-weight: 300 !important;
}
.granite-product-links a {
	display: block;
	min-height: 50px;
	line-height: 50px;
	background: #24346A;
	color: #fff;
	text-align: center;
	font-family: "Bitter", sans-serif;
	font-weight: 300 !important;
	text-decoration: none !important;
}
.granite-product-links a:hover {
	background: var(--red);
    color: #fff !important;
}

/* Hide the OLD duplicate Specifications/Delivery costs buttons that used
   to be rendered elsewhere on the page — replaced by .granite-product-links. */
.single-product #shop_block > .btns {
	display: none !important;
}

/* ---- Gallery ---- */

.granite-single-product .woocommerce-product-gallery {
	position: relative;
}
.granite-single-product .flex-viewport {
	max-height: 520px !important;
	border: 1px solid #eee;
}

/* Gallery thumbnails: fixed row of 4, rest via arrows */

.granite-thumb-window {
	overflow: hidden;
	margin: 15px 10px 0 10px;
}

.granite-thumb-carousel {
	position: relative;
	display: flex;
	align-items: center;
}

.granite-single-product .woocommerce-product-gallery .flex-control-thumbs {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-behavior: smooth;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.granite-single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

.granite-single-product .woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 calc((100% - 30px) / 4) !important;
	width: calc((100% - 30px) / 4) !important;
	max-width: calc((100% - 30px) / 4) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.granite-single-product .woocommerce-product-gallery .flex-control-thumbs li img {
	width: 100% !important;
	/*height: 90px !important;*/
	height: 100% !important;
	object-fit: cover !important;
	opacity: 1 !important;
	cursor: pointer;
	border: 2px solid transparent;
	display: block;
}

.granite-single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	border-color: #24346A !important;
	    border-width: 5px;
}

/* Hide the colour-name label under each thumbnail */
.granite-single-product .woocommerce-product-gallery .thumbnail_title {
	display: none !important;
}

.granite-gallery-arrow {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 0;
	background: #24346A;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
    padding: 0 0 6px 0;
	box-sizing: border-box;
}
.granite-gallery-arrow:hover:not(:disabled) {
	background: var(--red);
}
.granite-gallery-arrow:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}
.granite-gallery-arrow--previous {
	margin-right: 8px;
}
.granite-gallery-arrow--next {
	margin-left: 8px;
}

/* ---- Mobile ---- */

@media (max-width: 767px) {
	.granite-attribute-options {
		gap: 8px;
	}
	.granite-size-option {
		min-width: 120px;
		padding: 12px 14px;
		font-size: 13px;
	}
	.granite-single-product .woocommerce-product-gallery .flex-control-thumbs li {
		flex: 0 0 calc((100% - 10px) / 2) !important;
		width: calc((100% - 10px) / 2) !important;
		max-width: calc((100% - 10px) / 2) !important;
	}
	.granite-thumb-window {
		margin: 15px 40px 0 40px;
	}
	.granite-single-product .single_add_to_cart_button.button.alt,
	.granite-single-product .granite-custom-order-button,
	.granite-product-links {
		max-width: 100%;
	}
}


.granitedecking,
.declaredmeteragentr {
	font-style: italic;
	font-size: 14px !important;
}
.type-product .greybg1.w-logo.lft {
    background: white !important;
}
.shop_block_row .wpb_raw_code {
    background: #fff;
    box-shadow: none !important;
}


.single-product .white_block > .granite-breadcrumb {
	display: block;
	width: 100%;
	font-size: 14px;
	margin: 0 0 20px 0;
	padding: 0 0 15px 0;
	color: #333;
	order: 0;
}
.granite-breadcrumb a {
	color: #7F7F7F;
	text-decoration: none;
	font-family: "Montserrat", sans-serif;
	    font-size: 16px;
    letter-spacing: normal !important;
}
.granite-breadcrumb a:hover {
	text-decoration: underline;
}
.granite-breadcrumb-sep {
	margin: 0 6px;
	color: #999;
}
.granite-breadcrumb-current {
	color: #24346A;
	font-weight: 400;
	font-family: "Montserrat", sans-serif;
	    font-size: 16px;
    letter-spacing: normal !important;
}


tr.attribute-pa_sizes{
    top: -25px !important;
    position: relative !important;
}

a.woocommerce-product-gallery__trigger {
    display: none !important;
}




.cst-her-beg-clur h1 {
    font-weight: 600 !important;
    text-shadow: none !important;
}

.w-grid .w-btn-wrapper.has_font_size>.button,
span.w-btn-label{
    text-transform: none;
    font-size: 16px;
    line-height: 1 !important;
    font-weight: 500;
    letter-spacing: 0em;
    font-family: "Bitter", sans-serif;
}






/* ==========================================================
   MOBILE FIXES (product page)
========================================================== */

@media (max-width: 767px) {

	/* ---- General overflow safety net ---- */
	.granite-single-product,
	.granite-single-product * {
		box-sizing: border-box !important;
	}
	.single-product .white_block {
		overflow-x: hidden !important;
		width: 100% !important;
	}

	/* ---- Reset the desktop-only shift that was pushing the
	   notice block off-screen to the right on mobile ---- */
	.single-product .white_block > .woocommerce-tabs.wc-tabs-wrapper {
		width: 100% !important;
		margin-left: 0 !important;
		padding: 0 15px !important;
	}
	.granitedecking,
	.declaredmeteragentr {
		width: 100% !important;
		text-align: left !important;
		margin: 0 0 10px 0 !important;
	}

	/* ---- 1. Gallery: centered, no overflow, thumbnails sized properly ---- */
	.granite-single-product .woocommerce-product-gallery {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		overflow: hidden !important;
	}
	.granite-single-product .flex-viewport {
		max-height: none !important;
		width: 100% !important;
	}
	.granite-single-product .woocommerce-product-gallery__wrapper,
	.granite-single-product .woocommerce-product-gallery__wrapper img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}
	.granite-thumb-window {
		width: 100% !important;
		max-width: 100% !important;
		margin: 15px 40px 0 40px !important;
	}
	.granite-single-product .woocommerce-product-gallery .flex-control-thumbs li img {
		height: 70px !important;
	}
	.granite-gallery-arrow {
		width: 30px !important;
		height: 30px !important;
		font-size: 18px !important;
	}

	/* ---- 2. Description: left aligned, equal spacing both sides ---- */
	.granite-single-product .woocommerce-product-gallery .granite-description-block {
		width: 100% !important;
		padding: 0 15px !important;
		text-align: left !important;
		box-sizing: border-box !important;
	}
	.granite-description-heading,
	.granite-description-content {
		width: 100% !important;
		text-align: left !important;
	}

	/* ---- 4. Colour / Size options: never overflow ---- */
	.granite-attribute-control,
	.granite-attribute-heading,
	.granite-attribute-options {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 15px !important;
		box-sizing: border-box !important;
	}
	.granite-attribute-options {
		flex-wrap: wrap !important;
	}
	.granite-colour-option {
		width: 34px !important;
		height: 34px !important;
	}
	.granite-size-option {
		min-width: 0 !important;
		width: calc(50% - 6px) !important;
		padding: 12px 10px !important;
		font-size: 13px !important;
	}

	/* ---- 5. # of crates: contained, not overflowing ---- */
	.granite-single-product .quantity,
	.granite-single-product .woocommerce-variation-add-to-cart,
	.granite-single-product #price_calculator {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 15px !important;
		box-sizing: border-box !important;
	}
	.granite-single-product #price_calculator tr {
		flex-wrap: wrap !important;
	}
	.granite-single-product .quantity input.qty {
		width: 70px !important;
	}
	.granite-bulk-note {
		width: 100% !important;
		padding: 0 15px !important;
	}

	/* ---- 6. Buttons: full width, never overflow ---- */
	.granite-single-product .single_add_to_cart_button.button.alt,
	.granite-single-product .granite-custom-order-button,
	.granite-product-links {
		max-width: 100% !important;
		width: calc(100% - 30px) !important;
		margin-left: 15px !important;
		margin-right: 15px !important;
	}
	.granite-product-links {
		margin-left: 15px !important;
	}

	/* ---- Summary column: consistent side padding overall ---- */
	.granite-single-product .summary.entry-summary {
		width: 100% !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}
	.granite-single-product .summary.entry-summary > * {
		padding-left: 15px !important;
		padding-right: 15px !important;
		box-sizing: border-box !important;
	}
}