/*
Theme Name: Christie
Theme URI: https://christie.codepixelz.tech/
Author: Christie
Author URI: https://christie.codepixelz.tech/
Description: The custom theme for Christie
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: christie
*/

.test {
	color: green;
}

:root {
	--color-black: #000;
	--color-white: #fff;
	--color-primary: #f10c23;
	--primary-dark: #960018;
	--primary-light: rgb(150 0 24 / 5%);
	--border-color: #e4e4f6;
	--border-radius: 16px;
	--body-bg-color: #f6f6f6;
	--container-max-width: 1280px;
	--section-padding: 90px;
	--gutter: 1rem;
	--font-h1: 64px;
	--font-h2: 44px;
	--font-h3: 38px;
	--font-h4: 32px;
	--font-h5: 28px;
	--font-h6: 22px;
	--font-body: 18px;
	--font-button: 20px;
	--font-body-medium: 16px;
	--font-body-small: 14px;
	--font-body-xsmall: 12px;
	--font-nav-text: 16px;
	--page-size: 1280px;
	--page-size-narrow: 768px;
	--page-size-wide: 1440px;
	--page-size-full-width: 1920px;
	--page-size-extra-narrow: 520px;
	--narrow-medium: 768px;
	--narrow-large: 820px;
	--narrow-wide: 900px;
}

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	margin: 0;
	padding: 0;
}

@font-face {
	font-family: Helvetica;
	font-style: normal;
	font-weight: normal;
	src:
		local("Helvetica"),
		url("Helvetica.woff") format("woff");
}

@font-face {
	font-family: "Helvetica Oblique";
	font-style: normal;
	font-weight: normal;
	src:
		local("Helvetica Oblique"),
		url("Helvetica-Oblique.woff") format("woff");
}

@font-face {
	font-family: "Helvetica Compressed";
	font-style: normal;
	font-weight: normal;
	src:
		local("Helvetica Compressed"),
		url("helvetica-compressed-5871d14b6903a.woff") format("woff");
}

@font-face {
	font-family: "Helvetica Rounded Bold";
	font-style: normal;
	font-weight: normal;
	src:
		local("Helvetica Rounded Bold"),
		url("src/fonts/helvetica-rounded-bold-5871d05ead8de.woff") format("woff");
}

@font-face {
	font-family: Helvetica;
	font-style: normal;
	font-weight: normal;
	src:
		local("Helvetica"),
		url("src/fonts/Helvetica-Bold.woff") format("woff");
}

@font-face {
	font-family: "Helvetica Bold Oblique";
	font-style: normal;
	font-weight: normal;
	src:
		local("Helvetica Bold Oblique"),
		url("src/fonts/Helvetica-BoldOblique.woff") format("woff");
}

@font-face {
	font-family: "Helvetica Light";
	font-style: normal;
	font-weight: normal;
	src:
		local("Helvetica Light"),
		url("src/fonts/helvetica-light-587ebe5a59211.woff") format("woff");
}

body {
	background-color: var(--body-bg-color);
	color: var(--color-black);
	font-family: Inter, sans-serif;
	font-size: var(--font-body);
	line-height: 1.2;
}

p {
	font-size: var(--font-body);
	line-height: 150%;
}

img {
	height: auto;
	max-width: 100%;
}

a:where(:not(.wp-element-button)) {
	text-decoration: none !important;
}

:is(h1, h2, h3, h4, h5, h6) {
	font-family: Fraunces, serif;
}

h1 {
	font-size: calc(var(--font-h1) / 2.5);
}

h2 {
	font-size: calc(var(--font-h2) / 1.75);
	font-weight: 600;
}

h3 {
	font-size: calc(var(--font-h3) / 1.75);
}

h4 {
	font-size: calc(var(--font-h4) / 1.75);
}

h5 {
	font-size: calc(var(--font-h5) - 4px);
	font-weight: 600;
}

h6 {
	font-size: calc(var(--font-h6) - 4px);
	font-weight: 600;
}

a {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

.main-content ul {
	padding-left: 40px;
}

.main-content ul li {
	line-height: 150%;
}

.main-content > section {
	margin: var(--section-padding) 0;
}

.bg-image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.bg-image::before {
	background-color: rgb(0 0 0 / 50%);
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.wp-block-post-content .wp-block-list {
	padding-left: 40px;
}

.wp-block-post-content .wp-block-list li {
	line-height: 1.5;
}

.wp-block-post-content a {
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

.wp-block-post-content a:hover {
	text-decoration-color: var(--color-primary) !important;
}

/* Base Grid */
.container {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--container-max-width);
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	width: 100%;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--gutter) * -1);
	margin-right: calc(var(--gutter) * -1);
}

.row.align-items-center {
	align-items: center;
}

[class*="col-"] {
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	position: relative;
	width: 100%;
}

.d-flex {
	display: flex;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-direction-column {
	flex-direction: column;
}

/* 12 Column Grid System */
.col-1 {
	flex: 0 0 8.333%;
	max-width: 8.333%;
}

.col-2 {
	flex: 0 0 16.666%;
	max-width: 16.666%;
}

.col-3 {
	flex: 0 0 25%;
	max-width: 25%;
}

.col-4 {
	flex: 0 0 33.333%;
	max-width: 33.333%;
}

.col-5 {
	flex: 0 0 41.666%;
	max-width: 41.666%;
}

.col-6 {
	flex: 0 0 50%;
	max-width: 50%;
}

.col-7 {
	flex: 0 0 58.333%;
	max-width: 58.333%;
}

.col-8 {
	flex: 0 0 66.666%;
	max-width: 66.666%;
}

.col-9 {
	flex: 0 0 75%;
	max-width: 75%;
}

.col-10 {
	flex: 0 0 83.333%;
	max-width: 83.333%;
}

.col-11 {
	flex: 0 0 91.666%;
	max-width: 91.666%;
}

.col-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

/* Mobile First Breakpoints */
@media (width >=576px) {
	.col-sm-1 {
		flex: 0 0 8.333%;
		max-width: 8.333%;
	}

	.col-sm-2 {
		flex: 0 0 16.666%;
		max-width: 16.666%;
	}

	.col-sm-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-sm-4 {
		flex: 0 0 33.333%;
		max-width: 33.333%;
	}

	.col-sm-5 {
		flex: 0 0 41.666%;
		max-width: 41.666%;
	}

	.col-sm-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-sm-7 {
		flex: 0 0 58.333%;
		max-width: 58.333%;
	}

	.col-sm-8 {
		flex: 0 0 66.666%;
		max-width: 66.666%;
	}

	.col-sm-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-sm-10 {
		flex: 0 0 83.333%;
		max-width: 83.333%;
	}

	.col-sm-11 {
		flex: 0 0 91.666%;
		max-width: 91.666%;
	}

	.col-sm-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.d-sm-block {
		display: block !important;
	}
}

@media (width >=768px) {
	.col-md-1 {
		flex: 0 0 8.333%;
		max-width: 8.333%;
	}

	.col-md-2 {
		flex: 0 0 16.666%;
		max-width: 16.666%;
	}

	.col-md-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-md-4 {
		flex: 0 0 33.333%;
		max-width: 33.333%;
	}

	.col-md-5 {
		flex: 0 0 41.666%;
		max-width: 41.666%;
	}

	.col-md-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-md-7 {
		flex: 0 0 58.333%;
		max-width: 58.333%;
	}

	.col-md-8 {
		flex: 0 0 66.666%;
		max-width: 66.666%;
	}

	.col-md-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-md-10 {
		flex: 0 0 83.333%;
		max-width: 83.333%;
	}

	.col-md-11 {
		flex: 0 0 91.666%;
		max-width: 91.666%;
	}

	.col-md-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	h1 {
		font-size: var(--font-h1);
	}

	h2 {
		font-size: var(--font-h2);
	}

	h3 {
		font-size: var(--font-h3);
	}

	h4 {
		font-size: var(--font-h4);
	}

	h5 {
		font-size: var(--font-h5);
	}

	h6 {
		font-size: var(--font-h6);
	}
}

@media (width >=992px) {
	.col-lg-1 {
		flex: 0 0 8.333%;
		max-width: 8.333%;
	}

	.col-lg-2 {
		flex: 0 0 16.666%;
		max-width: 16.666%;
	}

	.col-lg-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-lg-4 {
		flex: 0 0 33.333%;
		max-width: 33.333%;
	}

	.col-lg-5 {
		flex: 0 0 41.666%;
		max-width: 41.666%;
	}

	.col-lg-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-lg-7 {
		flex: 0 0 58.333%;
		max-width: 58.333%;
	}

	.col-lg-8 {
		flex: 0 0 66.666%;
		max-width: 66.666%;
	}

	.col-lg-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-lg-10 {
		flex: 0 0 83.333%;
		max-width: 83.333%;
	}

	.col-lg-11 {
		flex: 0 0 91.666%;
		max-width: 91.666%;
	}

	.col-lg-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.wrap {
	margin: 0 auto;
	max-width: var(--page-size);
	width: 100%;
	z-index: 1;
}

/* Ensure the main container doesn't restrict the children */
.wp-site-blocks > * {
	margin-block: 0;
}

/* Width undefined */
.main-content > .wp-block-group {
	padding: var(--section-padding) 0;
}

.wp-block-group > * {
	margin: 0 auto;
	max-width: 100%;
}

/* Wide Width */
.wp-block-group.alignwide {
	margin: 0 auto;
	max-width: 1200px;
}

.wp-block-group.alignwide > * {
	margin: 0 auto;
	max-width: 100%;
}

/* Full Width breakout */
.wp-block-group.alignfull {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	max-width: 100vw;
	width: 100vw;
}

.wp-block-group.alignfull > * {
	max-width: 100%;
	width: 100%;
}

.extra-narrow {
	max-width: var(--page-size-extra-narrow);
	width: 100%;
}

.narrow {
	max-width: var(--page-size-narrow);
	width: 100%;
}

.narrow-medium {
	max-width: var(--narrow-medium);
	width: 100%;
}

.narrow-large {
	max-width: var(--narrow-large);
	width: 100%;
}

.narrow-wide {
	max-width: var(--narrow-wide);
	width: 100%;
}

.wide {
	max-width: var(--page-size-wide);
	width: 100%;
}

.full-width {
	max-width: var(--page-size-full-width);
	width: 100%;
}

/* Utilities */
.d-none {
	display: none !important;
}

.d-block {
	display: block !important;
}

.text-center {
	text-align: center !important;
}

.text-muted {
	color: #6c757d !important;
}

.bg-dark {
	background-color: #212529 !important;
}

.text-white {
	color: #fff !important;
}

.img-fluid {
	height: auto;
	max-width: 100%;
}

.rounded {
	border-radius: 0.25rem !important;
}

.float-right {
	float: right;
}

/* Spacing Utilities */
.mb-2 {
	margin-bottom: 0.5rem !important;
}

.mb-3 {
	margin-bottom: 1rem !important;
}

.mb-4 {
	margin-bottom: 1.5rem !important;
}

.mb-5 {
	margin-bottom: 3rem !important;
}

.py-5 {
	padding-bottom: 3rem !important;
	padding-top: 3rem !important;
}

.px-3 {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

.me-auto {
	margin-right: auto !important;
}

ul.unstyled-list {
	list-style: none;
}

/* Header Specific Styles (to mimic Bootstrap components used) */
.top-header {
	background: var(--color-black);
	font-size: var(--font-body-small);
	padding: 10px 0;
}

.top-header ul {
	display: flex;
	gap: 0.625rem;
}

.top-header ul li {
	line-height: 1;
}

.top-header ul li a {
	color: var(--color-white);
}

.top-header-left ul li > a {
	align-items: center;
	display: flex;
	gap: 0.625rem;
}

.top-header-right {
	display: flex;
	gap: 1.25rem;
	justify-content: flex-end;
}

.top-header-right ul li img {
	height: 15px;
	width: 15px;
}

.top-header p {
	margin: 0;
}

.btm-header {
	border-bottom: 1px solid #eee;
	padding: 1rem 0 0;
}

.main-menu {
	float: right;
}

.navbar {
	align-items: center;
	display: flex;
}

.navbar-nav {
	display: flex;
	gap: 2rem;
	list-style: none;
}

.logo img {
	max-height: 50px;
}

/* Fix for full width submenu */
.btm-header .row {
	position: relative;
}

.btm-header .col-lg-10 {
	position: static;
}

/* Fallback for navbar toggler if no JS */
.navbar-toggler {
	display: none;
}

.footer-bottom ul li a {
	font-size: var(--font-body-small);
}

.btn {
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: calc(var(--border-radius) - 10px);
	cursor: pointer;
	display: inline-block;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	padding: 0.375rem 0.75rem;
	text-align: center;
	transition: all 0.3s ease;
	user-select: none;
	vertical-align: middle;
}

.btn-primary {
	background-color: var(--color-black);
	border-color: var(--color-black);
	color: #fff;
}

.btn-primary:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn:hover {
	opacity: 0.8;
	transform: translateY(-2px);
}

.site-footer {
	padding: 2rem 0;
}

.footer-widget.copyright p {
	font-size: var(--font-body-small);
	padding: 0.5rem 0;
}

.footer-widget ul {
	list-style: none;
}

.footer-widget ul li {
	padding: 0.5rem 0;
}

h2.widgettitle {
	font-size: var(--font-h6);
	font-weight: 600;
	margin-bottom: 1rem;
}

.footer-bottom {
	margin: 0 15px;
}

.footer-social {
	display: flex;
	gap: 0.625rem;
}

.footer-social img {
	height: 15px;
	width: 15px;
}

/* Global styles */
.toggle-widget {
	display: none;
}

.single-post article {
	padding: 50px 20px !important;
}

/* PRODUCT STYLE  */
.block-product-filter {
	justify-content: center;
}

.block-product-filter .content-wrap {
	gap: 30px;
	margin: 0 2.5rem;
}

.product-filter-options,
.product-card-wrap,
.product-saved-list {
	background: var(--color-white);
	border-radius: calc(var(--border-radius) - 6px);
	flex: 1 1 0;
	padding: 2rem;
}

.block-product-filter h2 {
	font-size: 2rem;
	margin-bottom: 2rem;
}

/* .block-product-filter h3 {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
} */

/* .product-cat-list,
.rental-list {
    background: var(--color-white);
    padding: 1rem;
    border-radius: calc(var(--border-radius) - 6px);
} */

.cat-wrap {
	margin-bottom: 1.5rem;
	overflow-wrap: break-word;
}

.cat-wrap h3 {
	font-size: 1.25rem;
	margin-bottom: 10px;
}

.cat-wrap p {
	margin-bottom: 0.25rem;
}

.cat-wrap ul {
	list-style: disc;
	margin-left: 20px;
	padding-left: 0;
}

.cat-wrap ul li {
	line-height: 1;
	margin-bottom: 10px;

	/* margin-left: 5px; */
}

.cat-wrap ul li::marker {
	color: var(--color-primary);
}

.cat-wrap ul li a {
	transition: all 0.3s ease;
}

.cat-wrap ul li a:hover {
	text-decoration: underline !important;
	text-decoration-color: var(--color-primary) !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

.product-cat-header {
	display: flex;
	flex-flow: row wrap;
	margin-bottom: 2rem;
}

.product-cat-header h2 {
	margin-bottom: 0;
}

.product-cat-header form {
	display: flex;
	flex-basis: 70%;
	flex-flow: row wrap;
	margin-left: auto;
	width: 100%;

	/* gap: 1rem; */
}

.product-cat-header form input {
	background: unset;
	border: 1px solid var(--color-black);
	border-radius: calc(var(--border-radius) - 6px);
	font-size: 1rem;
	outline: none;
	padding: 1rem;
}

.product-cat-header form input[type="text"] {
	border-bottom-right-radius: 0;
	border-right: 0;
	border-top-right-radius: 0;
	flex: 1 1 0;
}

.product-cat-header form input[type="submit"] {
	background-color: var(--color-primary);
	border-bottom-left-radius: 0;
	border-color: var(--color-primary);
	border-top-left-radius: 0;
	color: var(--color-white);
	width: 20%;
}

.product-cards {
	gap: 30px;
}

.product-card-item {
	background: var(--color-white);
	border: 1px solid var(--color-black);
	border-radius: calc(var(--border-radius) - 6px);
	flex-basis: calc((25% - 30px) + (30px / 4));
	padding: 1rem;
	transition: all 0.3s ease;
}

.product-card-item:hover {
	border-color: var(--primary-dark);
	transform: translateY(-2px);
}

.product-card-image {
	aspect-ratio: 1;
	justify-content: center;
}

.product-card-image figure {
	margin-bottom: 0;
}

.product-card-content .product-card-title {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	margin-block: 1rem;
}

.product-card-content .inline-content {
	gap: 1.5rem;
	justify-content: space-between;
}

.product-card-content .inline-content img {
	width: 1.5rem;
}

.equipment-pagination {
	display: flex;
	flex-flow: row wrap;
	gap: 1rem;
	justify-content: center;
	margin-top: 3rem;
}

.page-numbers {
	border-radius: 4px;
	display: inline-block;
	padding: 5px 10px;
}

.page-numbers.current {
	border: 1px solid;
}

/* PRODUCT SINGLE  */
.block-product-single {
	justify-content: center;
}

.block-product-single .content-wrap {
	gap: 30px;
	margin: 0 2.5rem;
}

.product-filter-options,
.product-detail-card {
	background: var(--color-white);
	border-radius: calc(var(--border-radius) - 6px);
	flex: 1 1 0;
	padding: 2rem;
}

.block-product-single h2 {
	font-size: 2rem;
	margin-bottom: 2rem;
}

.product-detail-card .detail-content {
	display: flex;
	flex-flow: column wrap;
	gap: 1rem;
}

.product-detail-card .detail-content ul {
	gap: 0;

	/* padding-left: 40px; */
	list-style: disc;
}

/* .cat-wrap {
	margin-bottom: 1.5rem;
	overflow-wrap: break-word;
} */

.product-title {
	line-height: 1.2;

	/* text-decoration: underline; */
	text-decoration-color: var(--border-color);
	text-underline-offset: 5px;
}

.product-detail-card .featured-image {
	background: var(--border-color);
	padding: 1rem;
	text-align: center;
}

.product-detail-card .featured-image img {
	max-width: 500px;
	width: 100%;

	/* margin: 0 auto; */
}

.product-detail-card .detail-content a {
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

.product-detail-card .detail-content a:hover {
	text-decoration-color: var(--color-primary) !important;
}

/* Tabs Wrapper */
.product-tabs {
	margin-top: 2rem;
}

/* Tab Navigation */
.tab-nav {
	border-bottom: 3px solid var(--border-color);
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.5rem;
}

.tab-btn {
	background: none;
	border: 1px solid;
	border-radius: calc(var(--border-radius) - 12px);
	color: var(--text-color);
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.75rem 1.5rem;
	transition: all 0.3s ease;
	word-break: keep-all;
}

.tab-btn.active,
.tab-btn:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

/* Tab Panels */
.tab-panel {
	display: none;
}

.tab-panel.active {
	display: block;
}

.tab-panel ul {
	/* padding-left: 0; */
	display: flex;
	flex-flow: column wrap;
	gap: 1.5rem;
	list-style: decimal;
}

.tab-panel:has(.download-img) ul {
	padding-left: 0;
}

.tab-panel:has(.download-img) li {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: 1rem;
	justify-content: flex-start;
}

.download-img {
	max-width: 36px;
	width: 100%;
}

.tab-panel a {
	font-size: 1.25rem;
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

.tab-panel a:hover {
	color: var(--color-primary);
	text-decoration-color: var(--color-primary);
}

/* Equipment archive banner (SCF background image) */
.custom-banner {
	background-color: #2d2d2d;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--color-white, #fff);
	margin: 0 !important;
	padding: 3rem 1rem;
	padding: var(--section-padding) calc(var(--gutter) + 4px) !important;
	position: relative;
	text-align: center;
}

.custom-banner-overlay {
	background: #000;
	inset: 0;
	opacity: 0.5;
	pointer-events: none;
	position: absolute;
}

.custom-banner-inner {
	margin: 0 auto;
	max-width: var(--container-max-width, 1280px);
	position: relative;
	z-index: 1;
}

.custom-banner-breadcrumb {
	/* font-size: var(--font-body-small, 14px); */
	gap: var(--gutter);
	list-style: none;
	margin: calc(var(--gutter) * 2) 0 0;
}

.custom-banner-breadcrumb a {
	color: inherit;
	opacity: 0.9;
	text-decoration: none;
}

.custom-banner-breadcrumb a:hover {
	opacity: 1;
	text-decoration: underline;
}

.custom-banner-breadcrumb .breadcrumb-sep {
	margin: 0 0.35rem;
	opacity: 0.7;
}

.custom-banner-breadcrumb .current {
	opacity: 0.9;
}


/* MAP MARKER STYLE  */
.gm-ui-hover-effect {
    display: none !important;
}

.gm-style-iw-ch,.gm-style .gm-style-iw-c,.gm-style .gm-style-iw-d{
	padding: 0 !important;
	overflow: auto !important;
}

.map-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-popup-close:hover {
    background: rgba(0,0,0,0.8);
}
 
.wpcf7-spinner:empty {
    display: none;
}

.contact-form .wpcf7 form .wpcf7-response-output {
    margin: 0;
    text-align: center;
    font-size: 1rem;
    border-radius: 5px;
    border-width: 1px;
}

.ul-breadcrumbs {
	gap: var(--gutter);
	list-style: none;
	margin: calc(var(--gutter) * 2) 0 0;
}

.ul-breadcrumbs li a {
	border-bottom: 1px solid currentcolor;
	padding-bottom: 5px;
	text-decoration: none;
}

.ul-breadcrumbs li a:hover {
	border-bottom: none;
	text-decoration: none;
}

.ul-breadcrumbs {
	justify-content: center;
}


/* RESPONSIVE STYLINGS  */

@media (width <=992px) {
	.main-content > section {
		/* margin: calc(var(--section-padding) / 2) 0; */
		margin-block: calc(var(--section-padding) / 2);
		padding: 0 calc(var(--gutter) + 4px);
	}

	.main-content > .wp-block-group {
		padding: calc(var(--section-padding) / 2) calc(var(--gutter) + 4px);
	}

	.top-header .top-header-right > ul.top-menu {
		display: none;
	}
}

@media (width >=992px) and (width <=1300px) {
	.main-content > section {
		padding: 0 calc(var(--gutter) + 4px);
	}

	.main-content > .wp-block-group {
		padding: calc(var(--section-padding) / 2) calc(var(--gutter) + 4px);
	}
}

@media (width <=991px) {
	.navbar-nav {
		flex-direction: column;
		gap: 0.5rem;
	}

	.footer-bottom .navbar-nav {
		flex-direction: row;
		gap: 1rem;
		justify-content: space-between;
	}

	.navbar-toggler {
		background: none;
		border: 1px solid #ddd;
		cursor: pointer;
		display: block;
		padding: 0.25rem 0.5rem;
	}

	.footer-widget .widget .widgettitle {
		align-content: center;
		align-items: center;
		cursor: pointer;
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		position: relative;
		transition: color 0.3s ease;
	}

	.footer-widget .widget .widgettitle::after {
		content: url("src/images/icons/chevron-down-white.svg");
		font-weight: bold;
		transform: rotate(0);
		transition: transform 0.3s ease;
	}

	.footer-widget .widget .widgettitle.active::after {
		transform: rotate(180deg);
	}

	.site-footer {
		padding: 2rem 0;
	}

	.footer-bottom {
		margin: 0 15px;
		padding: 1rem 0 0;
	}

	.footer-widget {
		margin-bottom: 1rem;
	}

	.footer-social {
		display: flex;
		float: none;
		gap: 1.5rem;
		justify-content: center;
		margin-top: 1rem;
	}

	.btm-header {
		padding: 0.5rem 0;
		position: relative;
	}

	.btm-header .row {
		position: static;
	}
}

@media screen and (width <= 1440px) {
	.product-filter-options,
	.product-card-wrap,
	.product-saved-list {
		padding: 1rem;
	}

	.sidebar-product {
		flex-direction: column;
	}

	.sidebar-product p {
		text-align: center;
	}

	.sidebar-product a {
		text-align: center;
	}
}

@media screen and (width <= 1199px) {
	.block-product-filter .content-wrap {
		margin: 0;
	}

	.block-product-filter .product-filter-options {
		flex-basis: calc(30% - 30px);
		max-width: 30%;
	}

	.block-product-filter .product-card-wrap {
		flex-basis: 70%;
		max-width: 70%;
	}

	.product-card-item {
		flex-basis: calc((33.33% - 30px) + (30px / 3));
	}

	.product-cat-header {
		flex-direction: column;
		gap: 1rem;
	}

	.sidebar-product {
		flex-direction: row;
	}

	.sidebar-product figure {
		width: 100px;
	}

	.sidebar-product span {
		margin-left: auto;
	}
}

@media screen and (width <= 991px) {
	.product-card-item {
		flex-basis: calc((50% - 30px) + (30px / 2));
	}

	.tab-nav {
		overflow-x: auto;
		width: 100%;
	}
}

@media screen and (width <= 768px) {
	.block-product-filter .content-wrap > div {
		flex-basis: 100%;
		max-width: 100%;
	}

	.product-cards {
		gap: 1.5rem;
	}

	.product-card-image {
		aspect-ratio: unset;
	}

	.product-card-item {
		flex-basis: calc((50% - 1.5rem) + (1.5rem / 2));
	}

	.product-card-content .inline-content {
		justify-content: center;
	}
}

@media screen and (width <= 480px) {
	.product-card-item {
		flex-basis: 100%;
	}
}

@media screen and (width <= 1440px) {
	.product-filter-options,
	.product-detail-card {
		padding: 1rem;
	}
}

@media screen and (width <= 1024px) {
	.block-product-single .content-wrap {
		margin: 0;
	}

	.block-product-single .product-filter-options {
		flex-basis: calc(30% - 30px);
		max-width: 30%;
	}

	.block-product-single .product-detail-card {
		flex-basis: 70%;
		max-width: 70%;
	}

	.product-cat-header {
		flex-direction: column;
		gap: 1rem;
	}
}

@media screen and (width <= 768px) {
	body * {
		overflow-wrap: break-word;
	}

	.top-header .row {
		align-items: center;
		flex-flow: row wrap;
		gap: 0.5rem;
	}

	.top-header .col-lg-6 {
		flex: 1 1 0;
		flex-basis: 100%;
		justify-content: center;
		max-width: 100%;
		padding: 0 0.5rem;
	}

	.top-header ul {
		flex-wrap: wrap;
	}

	.block-product-single .content-wrap > div {
		flex-basis: 100%;
		max-width: 100%;
	}

	.product-cards {
		gap: 1.5rem;
	}

	.block-product-filter h2,
	.block-product-single h2 {
		font-size: calc(var(--font-h2) / 1.75);
		margin-bottom: 1.5rem;
	}

	.cat-wrap {
		margin-bottom: 1rem;
	}

	.product-cat-header form {
		gap: 1rem;
		justify-content: center;

		/* width: 100%; */

		/* flex-basis: 100%; */
		margin: 0;
	}

	.product-card-content .inline-content {
		justify-content: center;
	}

	.product-cat-header form input[type="text"] {
		border: 1px solid var(--color-black);
		border-radius: calc(var(--border-radius) - 6px);
	}

	.product-cat-header form input[type="submit"] {
		border-radius: calc(var(--border-radius) - 6px);
		width: auto;
	}

	.custom-banner-breadcrumb {
		margin: var(--gutter) 0 0;
	}
}