/*
Theme Name: Carpet Factory
Theme URI: https://carpetfactory.com.au/
Author: Carpet Factory
Description: A lean WooCommerce block theme for Carpet Factory's flooring catalogue and CFQ decision workflows.
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: carpet-factory
*/

:root {
	--cf-header-height: 5.25rem;
	--cf-sticky-offset: calc(var(--cf-header-height) + 1.25rem);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	overflow-x: clip;
}

.cf-site-header {
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .cf-site-header {
	top: 32px;
}

.cf-site-header__inner {
	min-height: var(--cf-header-height);
}

.cf-site-header .wp-block-site-logo img {
	height: auto;
	max-height: 4rem;
	object-fit: contain;
	width: auto;
}

.cf-site-header .wp-block-navigation-item__content,
.cf-site-header .wp-block-navigation__responsive-container-open,
.cf-site-header .wp-block-navigation__responsive-container-close {
	color: #111;
}

.cf-site-header .wp-block-navigation-item__content {
	text-decoration: none;
}

.cf-site-header .wp-block-navigation-item__content:hover,
.cf-site-header .wp-block-navigation-item__content:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25rem;
}

.cf-site-header__tools {
	flex-shrink: 0;
}

.cf-single-product-main {
	padding-bottom: 4rem;
	padding-top: 1.5rem;
}

.cf-product-layout {
	align-items: start;
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
	grid-template-columns: minmax(0, 3fr) minmax(22rem, 2fr);
	margin-top: 1.25rem;
}

.cf-product-story,
.cf-product-decision-rail {
	min-width: 0;
}

.cf-product-decision-rail {
	align-self: start;
	background: #fff;
	display: block;
	position: sticky;
	top: var(--cf-sticky-offset);
}

.admin-bar .cf-product-decision-rail {
	top: calc(var(--cf-sticky-offset) + 32px);
}

.cf-product-decision-rail > * + * {
	margin-block-start: 1rem;
}

.cf-product-decision-rail .wp-block-post-title {
	font-size: 2.25rem;
	line-height: 1.12;
}

.cf-product-decision-rail .wp-block-woocommerce-product-price {
	font-size: 1.25rem;
}

.cf-product-decision-rail .cfq-flooring-product-summary {
	color: #6b7280;
}

.cf-product-decision-rail .cfq-boxed-quantity,
.cf-product-decision-rail .cfq-boxed-quantity--wide,
.cf-product-decision-rail .cfq-customer-intent {
	max-width: 100%;
	width: 100%;
}

.cf-product-decision-rail .cfq-boxed-quantity--wide,
.cf-product-decision-rail .cfq-customer-intent {
	margin-left: 0;
	margin-right: 0;
}

.cf-product-gallery {
	background: #fafafa;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
}

.cf-product-gallery .wc-block-product-gallery-large-image {
	order: 0;
}

.cf-product-gallery .wc-block-product-gallery-thumbnails {
	height: auto;
	order: 1;
	width: 100%;
}

.cf-product-gallery .wc-block-product-gallery-thumbnails__scrollable {
	display: flex;
	flex-direction: row;
	gap: 0.65rem;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 0.25rem;
	scrollbar-width: thin;
}

.cf-product-gallery .wc-block-product-gallery-thumbnails__thumbnail {
	flex: 0 0 clamp(4.5rem, 10vw, 6.5rem);
	height: auto;
}

.cf-product-gallery .wc-block-product-gallery-thumbnails__thumbnail__image {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.cf-product-gallery .wc-block-product-gallery-large-image__wrapper {
	background: #fafafa;
	aspect-ratio: 16 / 9;
}

.cf-product-gallery .wc-block-components-product-image img,
.cf-product-gallery .wc-block-components-product-image video {
	background: #fafafa;
	object-fit: contain !important;
}

.cf-product-features-wrap {
	margin-top: 1.25rem;
}

.cf-product-story__details {
	border-top: 1px solid #e5e7eb;
	margin-top: 2rem;
	padding-top: 1.5rem;
}

.cf-product-story .wp-block-woocommerce-product-details,
.cf-product-story .wp-block-woocommerce-product-reviews {
	max-width: 100%;
}

.cf-product-story .wp-block-woocommerce-product-reviews {
	border-top: 1px solid #e5e7eb;
	margin-top: 2rem;
	padding-top: 2rem;
}

.cf-related-products {
	border-top: 1px solid #e5e7eb;
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: 2.5rem;
}

.cf-related-products .wp-block-post-title {
	font-size: 1rem;
}

.cf-site-footer {
	background: #111;
	color: #fff;
	margin-top: 0;
}

.cf-site-footer a {
	color: inherit;
}

.cf-site-footer__meta {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 1199px) {
	.cf-product-layout {
		gap: 2.25rem;
		grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 1fr);
	}
}

@media (max-width: 1023.98px) {
	.cf-product-layout {
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}

	.cf-product-story,
	.cf-product-decision-rail {
		width: 100%;
	}

	.cf-product-decision-rail {
		position: static;
	}

	.cf-product-story {
		display: contents;
	}

	.cf-product-story__gallery {
		order: 1;
		width: 100%;
	}

	.cf-product-decision-rail {
		order: 2;
	}

	.cf-product-story__details {
		order: 3;
		width: 100%;
	}

	.cf-product-story__reviews {
		order: 4;
		width: 100%;
	}
}

@media (max-width: 782px) {
	:root {
		--cf-header-height: 4.5rem;
	}

	.admin-bar .cf-site-header {
		top: 46px;
	}

	.cf-site-header__inner {
		gap: 0.75rem;
	}

	.cf-site-header .wp-block-site-logo img {
		max-height: 3.25rem;
	}

	.cf-site-header__tools {
		gap: 0.25rem !important;
	}

	.cf-product-layout {
		gap: 1.5rem;
	}

	.cf-product-decision-rail .wp-block-post-title {
		font-size: 1.75rem;
	}

	.cf-product-gallery .wc-block-product-gallery-large-image__wrapper {
		aspect-ratio: 16 / 10;
	}

	.cf-product-decision-rail .cfq-boxed-workflow-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.admin-bar .cf-site-header {
		top: 0;
	}

	.cf-single-product-main {
		padding-top: 0.75rem;
	}

	.cf-product-gallery .wc-block-product-gallery-thumbnails {
		aspect-ratio: auto !important;
		height: auto;
	}

	.cf-product-gallery .wc-block-product-gallery-thumbnails__thumbnail {
		flex-basis: 4.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}