/* ----------------------------------------------------------------
	Canvas: Gear demo

	Scoped stylesheet for the Gear demo (outdoor equipment brand).
	Loaded only while the demo is active: see inc/demos.php.
-----------------------------------------------------------------*/


		/* -----------------------------------------------
		   WILDROOT: Outdoor Brand Theme
		----------------------------------------------- */

		:root {
			--cnvs-themecolor: #3D6B2A;
			--cnvs-themecolor-rgb: 61, 107, 42;
			--cnvs-primary-font: 'Source Sans 3', sans-serif;
			--cnvs-body-font: 'Source Sans 3', sans-serif;
		}

		/* Typography */
		h1, h2, h3, h4, h5,
		.wr-heading { font-family: 'Playfair Display', serif; }

		/* ── HEADER ── */
		#header {
			--cnvs-header-height: 76px;
			--cnvs-primary-menu-tt: none;
			--cnvs-primary-menu-font-weight: 600;
			--cnvs-primary-menu-font-size: 0.9375rem;
		}

		#logo a {
			color: var(--cnvs-contrast-1000);
		}

		.wr-logo-text {
			font-family: 'Playfair Display', serif;
			font-size: 1.5rem;
			font-weight: 900;
			letter-spacing: 3px;
			text-transform: uppercase;
			color: #F5F0E8;
			text-decoration: none;
			transition: color 0.3s;
		}

		#header-wrap.not-dark .wr-logo-text,
		#header.not-dark .wr-logo-text { color: #1F3A1B; }

		#header.not-dark .cnvs-hamburger-inner,
		#header.not-dark .cnvs-hamburger-inner::before,
		#header.not-dark .cnvs-hamburger-inner::after { background-color: #1F3A1B; }

		/* ── HERO ── */
		.wr-hero-badge {
			display: inline-block;
			font-family: 'Source Sans 3', sans-serif;
			font-size: 0.72rem;
			font-weight: 700;
			letter-spacing: 3.5px;
			text-transform: uppercase;
			color: rgba(245, 240, 232, 0.85);
			border: 1px solid rgba(245, 240, 232, 0.35);
			padding: 7px 22px;
			border-radius: 2px;
			margin-bottom: 28px;
		}

		.wr-hero-title {
			font-family: 'Playfair Display', serif;
			font-size: clamp(3.5rem, 9vw, 7.5rem);
			font-weight: 900;
			color: #F5F0E8;
			line-height: 1.03;
			letter-spacing: -2px;
			margin-bottom: 28px;
		}

		.wr-hero-subtitle {
			font-size: 1.2rem;
			font-weight: 300;
			color: rgba(245, 240, 232, 0.8);
			letter-spacing: 0.3px;
			line-height: 1.75;
			max-width: 480px;
			margin: 0 auto 48px;
		}

		.wr-scroll-hint {
			position: absolute;
			bottom: 44px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10px;
			color: rgba(245, 240, 232, 0.5);
			font-size: 0.68rem;
			font-weight: 700;
			letter-spacing: 2.5px;
			text-transform: uppercase;
			z-index: 10;
		}

		.wr-scroll-hint .wr-scroll-line {
			width: 1px;
			height: 56px;
			background: linear-gradient(to bottom, rgba(245, 240, 232, 0.6), transparent);
			animation: scrollAnim 2.2s ease-in-out infinite;
		}

		@keyframes scrollAnim {
			0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
			40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
			80%  { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
			100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
		}

		/* ── BUTTONS ── */
		.btn-wr {
			display: inline-block;
			background-color: #3D6B2A;
			color: #F5F0E8 !important;
			padding: 16px 44px;
			font-family: 'Source Sans 3', sans-serif;
			font-size: 0.8rem;
			font-weight: 700;
			letter-spacing: 2.5px;
			text-transform: uppercase;
			border-radius: 2px;
			text-decoration: none !important;
			transition: background-color 0.3s, transform 0.2s;
		}

		.btn-wr:hover { background-color: #2D5018; transform: translateY(-1px); }

		.btn-wr-ghost {
			display: inline-block;
			background-color: transparent;
			color: #F5F0E8 !important;
			padding: 14px 44px;
			font-family: 'Source Sans 3', sans-serif;
			font-size: 0.8rem;
			font-weight: 700;
			letter-spacing: 2.5px;
			text-transform: uppercase;
			border-radius: 2px;
			border: 2px solid rgba(245, 240, 232, 0.4);
			text-decoration: none !important;
			transition: border-color 0.3s, background-color 0.3s;
		}

		.btn-wr-ghost:hover {
			border-color: #F5F0E8;
			background-color: rgba(245, 240, 232, 0.08);
		}

		.btn-wr-sage {
			display: inline-block;
			background-color: #A8C98A;
			color: #1F3A1B !important;
			padding: 17px 48px;
			font-family: 'Source Sans 3', sans-serif;
			font-size: 0.82rem;
			font-weight: 700;
			letter-spacing: 2.5px;
			text-transform: uppercase;
			border-radius: 2px;
			text-decoration: none !important;
			transition: background-color 0.3s, transform 0.2s;
		}

		.btn-wr-sage:hover { background-color: #96BD72; transform: translateY(-1px); }

		/* Section label */
		.wr-section-label {
			display: inline-block;
			font-family: 'Source Sans 3', sans-serif;
			font-size: 0.7rem;
			font-weight: 700;
			letter-spacing: 3.5px;
			text-transform: uppercase;
			margin-bottom: 14px;
		}

		.wr-label-green  { color: #3D6B2A; }
		.wr-label-brown  { color: #8B5E3C; }
		.wr-label-sage   { color: #A8C98A; }
		.wr-label-cream  { color: rgba(245, 240, 232, 0.6); }

		/* ── PRODUCTS ── */
		#products { background-color: #F5F0E8; }

		.wr-product-card { position: relative; overflow: hidden; border-radius: 3px; }

		.wr-product-img {
			position: relative;
			overflow: hidden;
			aspect-ratio: 3/4;
			display: block;
		}

		.wr-product-img img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			display: block;
		}

		.wr-product-card:hover .wr-product-img img { transform: scale(1.07); }

		.wr-product-overlay {
			position: absolute;
			bottom: 0; left: 0; right: 0;
			padding: 48px 28px 28px;
			background: linear-gradient(to top, rgba(8, 17, 6, 0.9) 0%, rgba(8, 17, 6, 0.3) 60%, transparent 100%);
		}

		.wr-product-tag {
			display: inline-block;
			font-size: 0.65rem;
			font-weight: 700;
			letter-spacing: 2.5px;
			text-transform: uppercase;
			color: #A8C98A;
			margin-bottom: 8px;
		}

		.wr-product-name {
			font-family: 'Playfair Display', serif;
			font-size: 1.7rem;
			font-weight: 700;
			color: #F5F0E8;
			line-height: 1.2;
			margin-bottom: 6px;
		}

		.wr-product-price {
			font-size: 1rem;
			font-weight: 400;
			color: rgba(245, 240, 232, 0.65);
			margin-bottom: 18px;
		}

		.wr-product-link {
			display: inline-flex;
			align-items: center;
			gap: 7px;
			font-size: 0.75rem;
			font-weight: 700;
			letter-spacing: 1.5px;
			text-transform: uppercase;
			color: #F5F0E8 !important;
			text-decoration: none !important;
			border-bottom: 1px solid rgba(245, 240, 232, 0.35);
			padding-bottom: 3px;
			transition: color 0.3s, border-color 0.3s;
		}

		.wr-product-card:hover .wr-product-link {
			color: #A8C98A !important;
			border-color: #A8C98A;
		}

		/* ── BRAND STORY ── */
		#brand-story { background-color: #1F3A1B; }

		.wr-story-img-col {
			min-height: 540px;
			background: url('gear/images/story-alpine-lake.jpg') center center;
			background-size: cover;
			position: relative;
		}

		.wr-story-img-col::after {
			content: '';
			position: absolute;
			inset: 0;
			background: rgba(31, 58, 27, 0.25);
		}

		.wr-story-pad {
			padding: clamp(52px, 8vw, 100px) clamp(32px, 6vw, 80px);
		}

		.wr-stat-number {
			font-family: 'Playfair Display', serif;
			font-size: 3.2rem;
			font-weight: 900;
			color: #A8C98A;
			line-height: 1;
		}

		.wr-stat-label {
			font-size: 0.7rem;
			font-weight: 700;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: rgba(245, 240, 232, 0.45);
			margin-top: 7px;
		}

		.wr-stat-divider {
			width: 1px;
			background: rgba(245, 240, 232, 0.1);
			align-self: stretch;
		}

		/* ── GALLERY ── */
		#gallery { background-color: #EDE4D3; }

		.wr-gallery-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: 260px 260px;
			gap: 10px;
		}

		.wr-gallery-item {
			overflow: hidden;
			position: relative;
			border-radius: 2px;
		}

		.wr-gallery-item img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			transition: transform 0.55s ease;
		}

		.wr-gallery-item:hover img { transform: scale(1.06); }

		.wr-gallery-item:nth-child(1) { grid-row: span 2; }
		.wr-gallery-item:nth-child(4) { grid-column: span 2; }

		.wr-gallery-overlay {
			position: absolute;
			inset: 0;
			background: rgba(31, 58, 27, 0.5);
			opacity: 0;
			transition: opacity 0.3s;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.wr-gallery-item:hover .wr-gallery-overlay { opacity: 1; }
		.wr-gallery-overlay i { font-size: 1.8rem; color: #F5F0E8; }

		/* ── TESTIMONIALS ── */
		#testimonials { background-color: #F5F0E8; }

		.wr-testi-card {
			background: #FFFFFF;
			border-radius: 3px;
			padding: 36px 32px 32px;
			border-top: 3px solid #3D6B2A;
			height: 100%;
			display: flex;
			flex-direction: column;
			box-shadow: 0 2px 24px rgba(31, 58, 27, 0.07);
		}

		.wr-testi-stars {
			display: flex;
			gap: 3px;
			color: #C8A96A;
			font-size: 0.85rem;
			margin-bottom: 18px;
		}

		.wr-testi-quote {
			font-family: 'Playfair Display', serif;
			font-size: 1.05rem;
			font-style: italic;
			line-height: 1.8;
			color: #3A3A3A;
			flex: 1;
			margin-bottom: 28px;
		}

		.wr-testi-author { display: flex; align-items: center; gap: 14px; }

		.wr-testi-author img {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			object-fit: cover;
			flex-shrink: 0;
		}

		.wr-testi-name {
			font-weight: 700;
			color: #1F3A1B;
			font-size: 0.95rem;
		}

		.wr-testi-role {
			font-size: 0.7rem;
			font-weight: 700;
			letter-spacing: 1.5px;
			text-transform: uppercase;
			color: #8B5E3C;
			margin-top: 3px;
		}

		/* ── CTA ── */
		#cta-shop {
			position: relative;
			background: url('gear/images/cta-wild-is-waiting.jpg') center center;
			background-size: cover;
			background-attachment: fixed;
		}

		#cta-shop::before {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(160deg, rgba(15, 30, 12, 0.88) 0%, rgba(31, 58, 27, 0.82) 100%);
		}

		#cta-shop .container { position: relative; }

		/* ── FOOTER ── */
		#footer { background-color: #0C180A !important; }

		.wr-footer-link {
			color: rgba(245, 240, 232, 0.45) !important;
			font-size: 0.9rem;
			text-decoration: none !important;
			transition: color 0.2s;
			display: inline-block;
			margin-bottom: 10px;
		}

		.wr-footer-link:hover { color: rgba(245, 240, 232, 0.85) !important; }

		.wr-footer-heading {
			font-family: 'Source Sans 3', sans-serif;
			font-size: 0.68rem;
			font-weight: 700;
			letter-spacing: 3px;
			text-transform: uppercase;
			color: rgba(245, 240, 232, 0.6);
			margin-bottom: 22px;
		}

		/* ── RESPONSIVE ── */
		@media (max-width: 991px) {
			.wr-story-img-col { min-height: 360px; order: -1; }
		}

		@media (max-width: 767px) {
			.wr-gallery-grid {
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: 180px 180px 180px;
			}
			.wr-gallery-item:nth-child(1) { grid-row: span 1; }
			.wr-gallery-item:nth-child(4) { grid-column: span 1; }
			.wr-gallery-item:nth-child(5) { display: none; }
		}

	

/* ================================================================
	GEAR demo: ADDITIVE (store surfaces) section.
	Everything above this banner is the 1:1 port of the source demo
	stylesheet, with its two remote background photographs rewritten
	to the theme-relative copies beside this file. The rules below
	style surfaces the single-page source does not have: the demo's
	own catalogue page (.gear-shop), cart (.gear-cart), checkout
	(.gear-checkout), product singles (.gear-single) and the page
	title band the inner pages sit under. Demo vocabulary only: the
	theme-colour token, the sage and bark accents, the cream ground
	and the Playfair display face the source already declares.
	================================================================ */

/* ── Catalogue card ── */
.gear-shop .product-image,
.gear-archive.canvas-woocommerce .product-image {
	border-radius: 3px;
	overflow: hidden;
}

.gear-shop .product-title h3,
.gear-archive.canvas-woocommerce .product-title h3,
.gear-single .product-title h3 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
}

.gear-shop .product-title h3 a,
.gear-archive.canvas-woocommerce .product-title h3 a { color: #1F3A1B; }

.gear-shop .product-title h3 a:hover,
.gear-archive.canvas-woocommerce .product-title h3 a:hover { color: var(--cnvs-themecolor); }

.gear-shop .product-price,
.gear-shop .product-price ins,
.gear-archive.canvas-woocommerce .product-price,
.gear-archive.canvas-woocommerce .product-price ins,
.gear-single .product-price,
.gear-single p.price { color: var(--cnvs-themecolor); }

.gear-shop .sale-flash,
.gear-archive.canvas-woocommerce .sale-flash,
.gear-single .sale-flash { background-color: var(--cnvs-themecolor) !important; }

.gear-shop .bg-overlay .btn:hover,
.gear-archive.canvas-woocommerce .bg-overlay .btn:hover,
.gear-single .bg-overlay .btn:hover {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
	color: #F5F0E8;
}

/* The design's own product photography is set in a 3:4 box (see
 * .wr-product-img above), so the shared card-ratio property is pinned to the
 * same shape. Unset, a lazily loaded card image can resolve at an absurd
 * height before its intrinsic size is known. The archive scope covers the
 * canonical /shop/ and product-category surfaces, which render through the
 * site's global template and carry no wrapper class of their own. */
.gear-shop .product,
.gear-archive.canvas-woocommerce .product,
.gear-single .product {
	--cnvs-product-card-ratio: 3 / 4;
}

/* ── Product single ── */
.gear-single .single-product .product-title h1,
.gear-single .entry-title h1 {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	color: #1F3A1B;
}

.gear-single .single_add_to_cart_button,
.gear-single .button.alt {
	background-color: var(--cnvs-themecolor) !important;
	border-color: var(--cnvs-themecolor) !important;
	color: #F5F0E8 !important;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.gear-single .single_add_to_cart_button:hover,
.gear-single .button.alt:hover {
	background-color: #2D5018 !important;
	border-color: #2D5018 !important;
}

.gear-single .wc-tabs li.active a,
.gear-single .wc-tabs li a:hover { color: var(--cnvs-themecolor); }

/* ── Cart and checkout ── */
.gear-cart .canvas-cart-totals .order-total .amount,
.gear-checkout .order-total .amount { color: var(--cnvs-themecolor); }

.gear-cart a.button,
.gear-cart button.button,
.gear-checkout #place_order {
	background-color: var(--cnvs-themecolor) !important;
	border-color: var(--cnvs-themecolor) !important;
	color: #F5F0E8 !important;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 2px;
}

.gear-cart a.button:hover,
.gear-cart button.button:hover,
.gear-checkout #place_order:hover {
	background-color: #2D5018 !important;
	border-color: #2D5018 !important;
}

.gear-cart .cart_totals,
.gear-checkout .canvas-checkout-order {
	background-color: #EDE4D3;
	border-radius: 3px;
	padding: 28px;
}

.gear-cart .form-control:focus,
.gear-checkout .form-control:focus,
.gear-checkout .form-select:focus { border-color: var(--cnvs-themecolor); }

.gear-checkout .canvas-checkout-billing h3,
.gear-checkout .canvas-checkout-order h3 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: #1F3A1B;
}

/* ── Page title band (inner pages and product singles) ── */
.gear .page-title h1 {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	letter-spacing: -1px;
}

.gear .page-title.page-title-dark::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(12, 24, 9, 0.82) 0%, rgba(31, 58, 27, 0.7) 100%);
}

.gear .page-title.page-title-dark > .container { position: relative; }