@import url('https://fonts.googleapis.com/css2?family=Poppins: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 { 
	/* cores */
    --primary: #00aef0;
    --primary-hover: #069ed8;
    --primary-active: #098cbe;
    --secondary: #24242b;
    --secondary-hover: #373737;
    --secondary-active: #1d1d1d;
    --green:#00b32d;
	--green-hover: #0b8b2b;
	--green-active: #0a7023;
    --gray:#e6e6e6;
	--gray-hover: #e1e1e1;
	--gray-active: #dadada;
    --gray-light:#f3f3f3;
	--gray-light-hover: #e8e8e8;
	--gray-light-active: #e2e2e2;
	/* cores */

	/* header */
	--header-topbar-background-color: var(--primary-hover);
	--header-topbar-text-color: #fff;
	--header-topbar-icon-color: #fff;
	--header-background-color: #ffffff;
	--header-border-color: var(--primary-hover);
	--header-color-text: var(--secondary);
	--header-svg-color: var(--primary);

	--header-search-background-color: #fff;
	--header-search-border-color: #fff;
	--header-content-bottom-background: #fff;
	--header-menu-color-text: #1c1c1c;
	--header-menu-mobile-color-text: var(--text);
	--header-menu-icon-color: var(--primary);
	--header-menu-mobile-icon-color: var(--text);
	--header-menu-font-size: 13px;
	--header-menu-text-height: 38px;
	/* header */

	/* footer */
	--footer-background-color: #fff;
	--footer-border-color: #eee;
	--footer-color-text: var(--text);
	--footer-dark-background-color: #181515;
	--footer-dark-border-color: #292929;
	--footer-dark-color-text: #fff;
	--footer-dark: 0;
	/* footer */

	/* fontes */
    --font-primary: 'Poppins', sans-serif;
	/* fontes */
   
	/* botões */
    --btn-primary:var(--primary);
    --btn-primary-hover: var(--primary-hover);
    --btn-primary-active: var(--primary-active);
    --btn-secondary: var(--secondary);
    --btn-secondary-hover: var(--secondary-hover);
    --btn-secondary-active: var(--secondary-active);
	/* botões */
	
	/* radius */
	--border-radius-default: 4px;
	--btn-border-radius: 100px;
	--input-border-radius: 100px;
	/* radius */
	
	/* geral */
	--product-thumb-spacing: 4px;
	--spacing-sections-home: 56px;
    --text: #282828;
	--background: #fff;
    --container-xxl: 1420px;
    --logo-max-height: 83px;
	@media (max-width: 991px) {
		--logo-max-height: 74px;
	}
	/* geral */
}

		header {box-shadow: 0 0 6px -2px rgb(0 0 0 / 30%); top: -1px !important; background: var(--header-background-color);}
		header, header a {color: var(--header-color-text);}
		.top-bar {background: var(--header-topbar-background-color); padding: 10px 0; text-transform: uppercase; font-size: 12px; z-index: 5; position: relative;}
		.top-bar, .top-bar a {color: var(--header-topbar-text-color);}
		.top-bar i {color: var(--header-topbar-icon-color);}

		.logo {max-height: var(--logo-max-height);}
		
		.header-middle {padding: 14px 0; gap: 40px;}
		.header-middle svg {width: 28px; height: 28px;}
		.header-middle svg, .header-middle svg fill {fill: var(--header-svg-color);}

		/* buscador */
		.header-middle .search {width: 100%; display: flex; border-radius: 100px; border: 1px solid var(--primary)!important; box-shadow: 0 2px 2px #0000000a; background: var(--header-search-background-color);}
		.header-middle .search:focus-within {background: #f6f6f6; border-color: var(--primary);}
		.header-middle .search input {width: 100%; display: flex; background: none; padding-left: 20px; font-size: 13px;}
		.header-middle .search .btn {padding: 12px 20px; display: flex;}
		.header-middle .search svg {width: 18px; height: 18px;}
		@media (max-width: 991px) {
			.header-middle .header_search {order: 5; flex: auto; width: 100%;}
			.header-middle .search .btn {padding: 10px 14px;}
			.header-middle .search svg {width: 16px; height: 16px;}
		}
		/* buscador */

		/* conta */
		.header-info {font-size: 13px;}
		#header-account-desktop .dropdown-santstyle__box {max-width: 240px; right: 50%; transform: translateX(50%);}
		#header-account-desktop .dropdown-santstyle__box::after {right: 109px;}
		#header-account-desktop .dropdown-santstyle__box::before {right: 110px;}
		.header-account .btn {width: 100%; padding: 12px; text-transform: uppercase; font-size: 12px;}

		.account-dropdown {line-height: normal; color: var(--text);}
		.account-dropdown svg {width: 40px; height: 40px; fill: var(--primary);}
		.account-dropdown i {color: var(--primary); font-size: 19px; margin-right: 8px; display: flex;}
		.account-dropdown__links a {display: flex; align-items: center; font-size: 13px; transition: ease all .2s; color: #131313;}
		.account-dropdown__links a:hover {color: var(--primary);}
 		/* conta */

		/* carrinho */
		#cart-top > button {padding: 0;}
		.cart-qtd {position: absolute; bottom: 50%; right: -18px; transform: translateY(50%);}
		#cart-total .total {display: none;}
		#cart-total .items {background: var(--primary)!important; color: #fff!important; border-radius: 50%; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; font-size: 10px; line-height: normal;}
		@media (max-width: 991px) {
			.cart-qtd {bottom: -1px; transform: none; right: -1px;}
			#cart-total .items {width: 14px; height: 14px; font-size: 9px;}
		}
		/* carrinho */

		.header-content-bottom {border-top: 1px solid var(--header-border-color); background: var(--header-content-bottom-background); padding: 4px 0;}

		@media (max-width: 991px) {
			.header-middle {flex-wrap: wrap; padding: 8px 0; gap: 10px;}
			.header-content-bottom .menu_pro {display: none;}
			.header-middle .header_account_info {display: none;}
			.header-content-bottom {display: none;}
			.header_logo {display: flex; justify-content: center;}

			.button-canvas-mobile, #cart-top {flex: 1;}
			#cart-top {display: flex; justify-content: end;}

		}