/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
    --color-primary: #228b22;
	--color-secondary: #ffb83a;
	--color-third: #878787;
	--color-bg: #7fba00;
	--color-white: #ffffff;
	--color-border: #eeeeee;
	--color-text: #222222;
}

.section-title {
	color: var(--color-primary);
	font-size: 26px;
	text-transform: uppercase;
}

/* CSS Product Woocommerce */
ul.products.columns-6 {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	list-style-type: none;
}

ul.products {
	gap: 0 !important;
	border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}

li.product {
	padding: 15px;
	position: relative;
	border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

li.product a {
	display: block;
}

li.product .thumb {
	margin-bottom: 15px;
}

li.product .attachment-woocommerce_thumbnail {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 5px;
}

li.product .content {
	text-align: center;
}

li.product .woocommerce-loop-product__title {
	font-weight: 500;
	font-size: 16px;
}

li.product .price bdi {
	font-weight: 700;
	font-size: 15px;
	color: var(--color-primary);
}

li.product .price del bdi {
	font-weight: 400;
	font-size: 15px;
	color: #878787;
}

li.product .price ins {
	text-decoration: none;
}

li.product .price ins bdi {
	font-weight: 700;
	font-size: 15px;
	color: #ec0101;
}

/*li.product .button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 0);
	width: 48px;
	height: 48px;
	opacity: 0;
	visibility: hidden;
	text-indent: -9999px;
	overflow: hidden;
	border-radius: 50%;
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
	background-size: 24px 24px;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--color-bg) !important;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.71%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6%206h15l-1.5%209h-12z%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2219%22%20r%3D%221%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%221%22/%3E%3Cpath%20d%3D%22M6%206H3%22/%3E%3C/svg%3E");
}

li.product:hover .button {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%);
}

li.product .button:hover {
	background-color: var(--color-secondary) !important;
}*/


@media (max-width: 1024px) {
	ul.products.columns-6 {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 992px) {
	ul.products.columns-6 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	ul.products.columns-6 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* CSS Shop Page */
.layout-default .brxe-section .brxe-container {
	padding: 0;
}

.archive .banner .bricks-archive-title-wrapper .term-description {
	text-align: center;
	color: var(--color-primary);
}

.archive .bricks-before-shop-loop {
	margin-bottom: 20px !important;
	justify-content: end !important;
}

.archive .bricks-before-shop-loop .woocommerce-ordering {
	width: 210px;
}

.archive .bricks-before-shop-loop .woocommerce-ordering select {
	outline: none;
	border-radius: 40px;
	border: 1px solid #ddd;
}

.archive .products-wrap {
	display: flex;
	gap: 30px;
}

.archive .products-wrap .sidebar {
	width: 25%;
}

.archive .products-wrap .sidebar .sidebar-wrap {
	position: relative;
	display: flex;
	gap: 30px;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.archive .products-wrap .sidebar .bricks-widget-wrapper .heading {
	position: relative;
}

.archive .products-wrap .sidebar .bricks-widget-wrapper .heading::before {
	content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 60px;
    height: 2px;
    background: var(--color-text);
}

.archive .products-wrap .sidebar .bricks-widget-wrapper .wp-block-categories-list {
	margin-top: 20px;
	padding: 0;
	list-style: none;
}

.archive .products-wrap .sidebar .bricks-widget-wrapper .wp-block-categories-list .cat-item {
	position: relative;
	margin-bottom: 5px;
	padding-left: 15px;
	text-transform: capitalize;
}

.archive .products-wrap .sidebar .bricks-widget-wrapper .wp-block-categories-list .cat-item:before {
	content: "+";
    position: absolute;
    left: 0;
	color: var(--color-text);
}

.archive .products-wrap .sidebar .wc-block-product-filters__overlay-content {
	gap: 20px;
}

.archive .products-wrap .sidebar .wc-block-product-filters__overlay-content input[type="text"] {
	line-height: 20px;
}

.archive .products-wrap .brxe-woocommerce-products {
	width: 75%;
}

.archive .products-wrap .brxe-woocommerce-products .woocommerce-pagination {
	margin-top: 40px;
	justify-content: center;
}

.archive .products-wrap .brxe-woocommerce-products .woocommerce-pagination .page-numbers li:hover,
.archive .products-wrap .brxe-woocommerce-products .woocommerce-pagination .page-numbers li .current {
	font-weight: 400;
	color: #ec0101;
}

@media (max-width: 1024px) {
	
}

@media (max-width: 992px) {
	.archive .products-wrap .brxe-woocommerce-products ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.archive .bricks-before-shop-loop {
		display: none !important;
	}

	.archive .products-wrap .sidebar .sidebar-wrap .bricks-widget-wrapper:has(.product-filter) {
		position: absolute;
		top: 4px;
		right: 0;
	}

	.archive .products-wrap .sidebar .bricks-widget-wrapper .wp-block-categories-list {
		display: none;
	}

	.archive .products-wrap .sidebar .bricks-widget-wrapper .wp-block-categories-list.open {
		display: block;
	}

	.archive .products-wrap {
		flex-wrap: wrap;
	}
	
	.archive .products-wrap .sidebar {
		width: 100%;
	}

	.archive .products-wrap .brxe-woocommerce-products {
		width: 100%;
	}

	.archive .products-wrap .brxe-woocommerce-products ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* CSS Single Product Page */
.single-product .content-area {
	width: 100%;
}

.single-product .site-main .woocommerce-notices-wrapper {
	width: 100%;
}

.single-product .site-main .summary .product_title {
	font-size: 24px;
}

.single-product .site-main .summary .woocommerce-product-rating .star-rating span:before {
	color: #fbbc04;
}

.single-product .site-main .summary .price {
	font-size: 22px;
	line-height: 1;
}

.single-product .site-main .summary bdi {
	color: var(--color-third);
}

.single-product .site-main .summary .price:has(del) del bdi {
	color: var(--color-third);
}

.single-product .site-main .summary .price:has(ins) ins bdi {
	color: #ec0101;
}

.single-product .site-main form .quantity,
.single-product .site-main form.woocommerce-cart-form .quantity {
	border: 1px solid var(--color-text);
	border-radius: 40px;
}

.single-product .site-main form.cart .quantity .qty, 
.single-product .site-main form.woocommerce-cart-form .quantity .qty {
	font-weight: 700;
	font-size: 16px;
	border: none;
}

.single-product .site-main form.cart .quantity .minus,
.single-product .site-main form.cart .quantity .plus, 
.single-product .site-main form.woocommerce-cart-form .quantity .minus, 
.single-product .site-main form.woocommerce-cart-form .quantity .plus {
	border: none;
}

.single-product .site-main form .button {
	font-weight: 500;
	font-size: 14px;
	border-radius: 8px;
	color: var(--color-white);
	background-color: var(--color-primary);
}

.single-product .site-main .product .woocommerce-tabs {
	position: relative;
	padding-top: 50px;
	border: none;
	background-color: #f5f3ea;
}

.single-product .site-main .product .woocommerce-tabs:before {
    content: "";
    position: absolute;
	top: 0;
    left: calc(-1 * (50vw - 585px - 7.5px));
	width: calc(100% + (100vw - 1170px - 15px));
	height: 100%;
    background-color: #f5f3ea;
    z-index: -1;
}

.single-product .site-main .product .woocommerce-tabs .wc-tabs {
	justify-content: center;
	border: none;
}

.single-product .site-main .product .woocommerce-tabs .wc-tabs li {
	padding: 10px 25px;
	font-weight: 600;
	font-size: 14px;
	color: var(--color-third);
	border-radius: 40px;
    border: 1px solid transparent;
}

.single-product .site-main .product .woocommerce-tabs .wc-tabs li.active {
	color: var(--color-text);	
	border-color: var(--color-text);
}

.single-product .site-main .product .woocommerce-Reviews {
	margin-bottom: 60px;
}

.single-product .site-main .product .woocommerce-Reviews {
	width: 100%;
}

.single-product .site-main .product #reviews form .stars.selected a.active~a:before {
	color: #d5d6d7;
}

.single-product .site-main .product .woocommerce-Reviews .star-rating span:before,
.single-product .site-main .product #reviews form .stars.selected a.active:before,
.single-product .site-main .product #reviews form .stars.selected a:not(.active):before {
	color: #fbbc04;
}

.single-product .related > h2 {
	color: var(--color-primary);
    font-size: 26px;
    text-transform: uppercase;
}

@media (max-width: 1330px) {
	.single-product .site-main .product .woocommerce-tabs:before {
		left: calc(-1 * (50vw - 50% + 7.5px));
		width: calc(100% + (100vw - 100%));
	}
}

@media (max-width: 1024px) {
	.single-product .site-main .product .woocommerce-tabs .panel {
		padding: 30px 0;
	}
}

@media (max-width: 991px) {
	.single-product .site-main .product .woocommerce-tabs:before {
		left: -32px;
		width: calc(100% + 64px);
	}

	.single-product .summary {
		margin-top: 30px;
	}
}

@media (max-width: 767px) {
	.single-product .site-main .product .woocommerce-tabs:before {
		left: -18px;
		width: calc(100% + 36px);
	}
}

/* CSS Cart Page */
.woocommerce-cart .wp-block-woocommerce-cart {
	margin-left: 0;
	width: 100%;
	max-width: 100%;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart .wc-block-cart-items th,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__totals-title {
	font-size: 12px;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart .wc-block-cart-item__product .wc-block-components-product-name {
	font-weight: 600;
	font-size: 16px;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart .wc-block-cart-item__product .price .wc-block-formatted-money-amount {
	color: var(--color-third);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart .wc-block-cart-item__product .price:has(del) del {
	color: var(--color-third);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart .wc-block-cart-item__product .price:has(ins) ins {
	font-weight: 700;
	color: #ec0101;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart .wc-block-cart-item__total .price .wc-block-formatted-money-amount {
	font-weight: 700;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button {
	font-weight: 600;
	font-size: 16px;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector:after {
	border-radius: 40px;
	border: 1px solid var(--color-text);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__submit-button {
	font-weight: 500;
	font-size: 14px;
	border-radius: 8px;
	color: var(--color-white);
	background-color: var(--color-primary);
}

/* CSS Checkout Page */
.woocommerce-checkout .wp-block-woocommerce-checkout {
	padding: 0;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-coupon__button {
	font-weight: 500;
	font-size: 14px;
	border-radius: 8px;
	transition:  all .3s ease-in-out;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-coupon__button:not(:disabled) {
	font-weight: 500;
	font-size: 14px;
	border-radius: 8px;
	color: var(--color-white);
	background-color: var(--color-primary);
}

/* CSS Page My Account */
.woocommerce-account #brx-content .woocommerce {
	gap: 20px !important;
}

.woocommerce-account #brx-content .u-column > h2 {
	text-align: center;
}

.woocommerce-account #brx-content .u-column.register {
	display: none;
}

.woocommerce-account #brx-content form {
	margin: 0 auto;
	gap: 20px;
	width: 50%;
	text-align: start;
	border: none;
}

.woocommerce-account #brx-content form p:not([class]) {
	text-align: center;
}

.woocommerce-account #brx-content form  label {
	margin-bottom: 10px;
}

.woocommerce-account #brx-content form  label .required{
	color: #fc655e;
}

.woocommerce-account #brx-content form  input {
	border-radius: 10px;
	border-color: var(--color-text)
}

.woocommerce-account #brx-content form .form-row .show-password-input {
	right: 1px;
	width: 40px;
	height: 40px;
	border-radius: 10px;
}

.woocommerce-account #brx-content form .form-row .show-password-input::after {
	margin-left: 0;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.woocommerce-account #brx-content .form-row:has(.woocommerce-LostPassword) {
	display: flex;
	justify-content: space-between;
}

.woocommerce-account #brx-content .form-row:has(.button) {
	text-align: center;
}

.woocommerce-account #brx-content form .button {
	padding: 10px 25px;
    font-weight: 500;
	font-size: 14px;
    line-height: 1.45;
	min-width: 200px;
    border-radius: 40px;
	color: var(--color-white);
	border: 1px solid var(--color-primary);
	background-color: var(--color-primary);
}

.woocommerce-account #brx-content form .btn-account {
	margin-top: 10px;
	cursor: pointer;
	text-decoration: underline;
}

/* CSS Global Woo */
.woocommerce .woocommerce-breadcrumb {
	margin-bottom: 20px;
	width: 100%;
}

.woocommerce .woocommerce-breadcrumb a {
	font-weight: 400;
}

.woocommerce #brx-content.wordpress {
	margin: 0;
	width: 100%;
}

.woocommerce #brx-content > h1 {
	display: none;
}

.woocommerce #brx-content .alignwide {
	margin-left: 0;
	padding-top: 0;
	width: 100%;
	max-width: 100%;
}

.woocommerce #brx-content .wc-block-components-sidebar {
	margin-top: 0;
}

/* CSS Footer */
@media (max-width: 767px) {
	.menu {
		display: none;
	}

	.menu.open {
		display: block;
	}
}

