@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Gabriela&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
	--primary: #272727;
	--primary-hover: #393939;
    --primary-active: #494949;
	--text: #282828;
	--text-gray: #5d5d5d;
	--header-topbar-background-color: #fafafa;
	--header-topbar-text-color: #000;
	--header-topbar-icon-color: #000;
	--header-background-color: #111111;
	--header-border-color: #dad7d7;
	--header-color-text: #ffffff;
	--header-svg-color: #ffffff;
	--header-menu-color-text: #ffffff;
	--footer-border-color: #eee;
	--btn-product-thumb-view: #fff;
	--btn-product-thumb-view-color: #212529;

	--font-primary: 'Inter', sans-serif;

	--border-radius-default: 8px;
	--btn-product-thumb-radius: var(--border-radius-default);
	--spacing-sections-home: 70px;
	--container-xxl: 1620px;
	--logo-max-height: 60px;

	@media (max-width: 991px) {
		--logo-max-height: 42px;
	}
}

.container-arrow {border: none; background: transparent;}
.container-arrow i {font-size: 20px;}

.heading-title {font-size: 44px; font-weight: 200; margin-bottom: 12px; letter-spacing: 1px;}

.top-bar, .top-bar a {font-weight: 300; font-size: 12px; text-transform: capitalize;}
.top-bar-marquee .swiper-slide-content:after {width: 3px; height: 3px; background: #000; margin: auto 28px;}

.header-wrapper, .header-left, .header-right {gap: 24px;}
.menu-advanced {flex: 2;}
.menu-advanced .lista-nivel-1 {justify-content: center;}
.menu-advanced .item-nivel-1 .item-nivel-1-text {padding: 10px 20px; text-transform: capitalize;}

.promotional-bar .block {gap: 12px;}
.promotional-bar svg {width: 32px; height: 32px;}
.promotional-bar .title {font-weight: 200; color: #000; font-size: 26px; margin-bottom: 12px;}
.promotional-bar .content {font-weight: 300; color: #505050; font-size: 14px;}

.product-list-content {margin-bottom: 38px; display: flex; justify-content: space-between;}
.product-list:not(.title-left) .product-list-link {margin-top: 6px;}
.product-list .product-list-link a {font-weight: 300; color: var(--text);}
.product-list .product-list-link a i {font-size: 12px;}
.product-list-description {display: none;}
.product-list-carousel-overflow .swiper {overflow-x: visible;}

.product-thumb .wishlist {display: flex;}

.product-thumb .image img {border-radius: 4px;}

.product-thumb-center {height: 130px;}

.product-thumb-title {font-weight: 300; margin-bottom: 10px; margin-top: 22px;}
.product-thumb-title a {color: #0e0e0e;}

.product-thumb .product-price-value {font-size: 16px; margin-bottom: 4px; font-weight: 400;}
.product-thumb .product-short-installments {font-size: 14px; color: #282828; font-weight: 300; margin-top: 0;}

.product-thumb:hover .product-thumb-bottom {bottom: calc(100% + 22px);}
.product-thumb .btn-product-thumb {color: 12px; text-transform: capitalize;}

.product-thumb .product-variation-wrapper {display: flex;}
.product-thumb .variations {margin: 8px 0;}
.variations .variant-button.color-button {border: 1px solid #ddd; width: 18px; height: 18px;}
.variations .active .variant-button.color-button {outline-color: transparent;}
.product-thumb .variant-group-label {display: none;}
.product-thumb .variants-group {display: none;}
.product-thumb .variations .variants-group-color {display: flex;}


.banners-grid {display: grid; grid-template-areas: "banner1 banner2" "banner1 banner3"; gap: 16px;}
.banners-grid .banner {overflow: hidden;  border-radius: 16px;}
.banners-grid .shadow {position: absolute; height: 100%; width: 100%; left: 0; bottom: 0; background: linear-gradient(0deg, rgb(0 0 0 / 70%) 40%, rgba(253, 187, 45, 0) 100%); z-index: 1; border-radius: var(--border-radius-default);}
.banners-grid .banner:nth-child(1) {grid-area: banner1;}
.banners-grid .banner:nth-child(2) {grid-area: banner2;}
.banners-grid .banner:nth-child(3) {grid-area: banner3;}
.banners-grid img {height: 100%; transition: ease .5s all;}
/* .banners-grid img:hover {transform: scale(1.05);} */
.banners-grid .infos-banner {position: absolute; bottom: 40px; left: 40px; z-index: 1; display: flex; flex-direction: column; align-items: start; gap: 16px;}
.banners-grid .title-banner {font-size: 32px; font-weight: 200;}
.banners-grid .infos-banner a {color: var(--text); font-size: 13px; font-weight: 200; border: 1px solid #fff; padding: 12px 16px; border-radius: 100px;}