/* @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz@8..144&family=Oswald:wght@200..700&display=swap'); */
:root {
  --color-menu: #1F1F21;
  --color-menu-input: #424242;
  --color-menu-input-hover: #555555;
  --color-submenu: #000000;
  --color-body: #ffffff;
  --color-menu-text: #ffffff;
  --color-input: #F4F4F6;
  --color-input-hover: #d7d7d7;
  --color-hover-accent: #b3b3b3;
  --color-highlight: #89d659;
  --color-danger: #FF3B30;
  --color-text: #1E1E1E;
  --color-text-highlight: #888888;
  --color-border: #9f9f9f;

  --font-size-s: 14px;
  --font-size-m: 18px;
  --font-size-l: 24px;
  --font-size-xl: 36px;
}

.color-1{color: var(--color-hover-accent);}
.color-1-bg{background: var(--color-hover-accent);}
.color-2{color: var(--color-menu);}
.color-2-bg{background: var(--color-menu); color: var(--color-menu-text);}

.font-size-s{font-size: var(--font-size-s);}
.font-size-m{font-size: var(--font-size-m);}
.font-size-l{font-size: var(--font-size-l);}
.font-size-xl{font-size: var(--font-size-xl);}

body {margin: 0; padding: 0; font-family: 'Roboto Flex', sans-serif; font-size: 16px; font-weight: normal; color: var(--color-text); background: var(--color-body); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; -webkit-tap-highlight-color: transparent;}
.frame{max-width: 80vw; padding: 20px; box-sizing: border-box;}
.button{padding: 8px 16px; border-radius: 30px; background: var(--color-input); border: none; color: var(--color-text); transition: all 0.3s ease; position: relative; display: inline-flex; outline: none; z-index: 1; transition: 0.2s; align-items: center; font-size: 18px; cursor: pointer;}
.button:hover{ background: var(--color-hover-accent);}
.shop-now{font-size: var(--font-size-s);}
.shop-now:after{content: ">"; margin-left: 10px;;}

h1,h2{text-shadow: 1px 1px 2px var(--color-text-highlight); color: var(--color-input);}

.marginX-3{margin-right: 3px; margin-left: 3px;}
.chevron{font-weight: normal; font-size: 9px;}
.fa-chevron-down{transform: translateY(3px);}
ul{margin: 0;}
.font-size-20{font-size: 20px;}
.font-size-24{font-size: 24px;}
input[type='text'], input[type='number'], input[type='password'], select, textarea{background-color: var(--color-input);}
/* #toggle-mobile-filters button, .continue-shopping .button, #fill-form .checkout .button, .plugin-Shop .button{background: #fff; color: #000; border: 1px solid #eb173c; border-radius: 0;} */
.plugin-Shop .button{padding: 4px 8px;}
.select-quick-buttons .button{padding: 0; font-size: 12px;}
.icon{height: 30px; width: 30px; margin: 0 3px;}

.font-1, h1, h2, h3, h4, h5, h6 {font-family: "Oswald", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal;}

.payment-methods .File{height: 20px; margin: 0 2px;}

/* HEADER */
#subheader{font-size: var(--font-size-s); background-color: var(--color-submenu); padding: 5px 0;}
#subhead-pages > ul{display: flex;}
#subhead-pages > div, #subhead-pages > ul > li{border-right: 1px solid var(--color-menu-text); padding: 0 10px;}
#subhead-pages > div:last-child{border-right: none; padding-right: 0;}
#header{z-index: 3; position: relative; background-color: var(--color-menu); color: var(--color-menu-text);}
.sticky-menu #header{height: 96px;}
#header #navbar{z-index: 2; position: relative;}
.sticky-menu .nav-top{position: fixed; top: 0; left: 0; width: 100%;}
.nav-top{ background-color: var(--color-menu);}
#cart-count{ background-color: var(--color-highlight); width: 22px; height: 22px; border-radius: 100%; top: -8px; right: -8px;}

.category-list{position: fixed; top: 90px; max-height: 0px; opacity: 0; overflow: hidden; transition: 0.5s; left: 0; width: 100%; background-color: var(--color-menu);}
.sticky-menu .category-list{top: 68px;}
.category-list .flex{gap: 80px;}
.menu-category:hover .category-list{opacity: 1; max-height: 1000px; padding-top: 30px;}
.subcategory-items{font-size: var(--font-size-s); color: var(--color-text-highlight);}
.subcategory-items > a{margin: 14px 0; display: block; opacity: 0; transform: translateY(20px); transition: 0.5s; transition-delay: 0.1s;}
.subcategory-items > a:hover{color: var(--color-menu-text);}
.menu-category:hover .subcategory-items > a{opacity: 1; transform: translateY(0px);}

.menu-link, .languages{white-space: nowrap; font-size: 22px;}
#top-menu .menu-link.active, #top-menu .menu-link:hover{font-weight: bold; text-shadow: 1px 1px var(--color-text-highlight);}
#top-menu i{font-size: 10px; transform: translate(2px, -2px);}

#search-form input{ line-height: 34px; box-shadow: none; transform: translateX(-1px); outline: none; border: unset; border-radius: 28px; width: 200px; padding: 3px 12px 3px 20px; background-color: var(--color-menu-input);}
#search-form input:hover{background-color: var(--color-menu-input-hover);}
#search-form input::placeholder{color: var(--color-menu-text);}
#search-form button{ border: none; background-color: var(--color-menu-input); margin-left: -40px; width: 40px; height: 40px; padding: 8px; box-shadow: unset; border-radius: 28px;}
#search-form button:hover{ background: var(--color-hover-accent);}
#search-form button img{filter: invert(1);}
.color-invert{filter: invert(1);}
#search-form-result{position: absolute; top: 100%; left: 0; max-height: 450px; overflow: auto; z-index: 2;}
.search-row{padding: 2px 5px;}
.search-product-file{width: 70px; height: 50px;}
.header-account-menu{z-index: 3;}
#header-logo{height: 50px; width: fit-content; display: block;}


.header-account-mobile{display: none; position: fixed; top: 60px; left: 0; width: 100%; height: 100%; background: var(--color-menu-text); color: var(--color-submenu); text-align: center; font-size: 26px; padding-top: 30px;}
.header-account-mobile.active{display: block;}
.header-account-mobile .logger a{padding: 10px 20px;}
.nav-top #logo{width: 100%; height: 100%; margin: 0 20px;}

.languages > a::after{content: " | ";}
.languages > a:last-child:after{content: "";}

.logger a{display: block;}
.drop-down-container{position: relative;}
.drop-down{background-color: var(--color-menu); color: var(--color-menu-text); position: absolute; left: 50%; transform: translateX(-50%); top: 100%; display: none; border-radius: 10px; border: 1px solid var(--color-hover-accent);}
.drop-down-container:hover .drop-down{display: block;}
.drop-down li, .logger a{padding: 10px;}
.drop-down li:last-child, .logger a:last-child{border-bottom: unset;}
.drop-down:hover li, .logger:hover a{border-bottom: none;}

#mobile-menu ul{margin: 0; z-index: 6;}
#mobile-menu ul li{list-style-type: none; height: 1px; width: 40px; margin: 7px auto; background: var(--color-menu-text); transition: 0.3s;}
#mobile-menu-trigger.active{transform: translate(10px, 3px);}
#mobile-menu-trigger.active li:nth-child(1){transform: rotate(45deg) translateY(12px); transform-origin: center; background-color: var(--color-highlight);}
#mobile-menu-trigger.active li:nth-child(2){width: 0;}
#mobile-menu-trigger.active li:nth-child(3){transform: rotate(-45deg) translateY(-12px); transform-origin: center; background-color: var(--color-highlight);}
#mobile-content{display: none; height: calc(100vh - 70px); overflow: auto; top: 70px; position: fixed; width: 100%; box-sizing: border-box; background-color: #000;;}
#mobile-header #search-form{position: absolute; z-index: 2;}
#mobile-header #search-form input, .sticky-menu #mobile-header #search-form input{width: 50vw;}
.not-available{opacity: 1;}
.shopping-cart-items-count{background-color: var(--color-highlight); color: var(--color-submenu);}

/* INDEX */
#index{flex: 1;}
#catalog-filters{width: 15%;}
#catalog-products{flex: 1; padding: 0 40px;}

/* PRODUCT */
.product-preview{background-color: transparent; padding: 0; width: 300px;}
.product-preview .preview-poster{height: 350px;}
.product-preview:hover{box-shadow: none;;}
.product-preview .preview-buy{display: none;}
.product-preview .favourite-product{position: absolute; top: 10px; right: 10px;}
.product-preview .preview-title{margin-top: 10px; font-size: 14px;}

.product-page .left-panel{width: 75%; flex: none;}
.product-page .product-gallery .poster{display: none;}
.product-page .product-gallery .thumbnail{width: 50%; height: auto;}
.product-page .right-panel{position: sticky; top: 50px; height: fit-content; width: 25%; flex: none;}
.product-page #attribute_id{ width: 100%; padding: 10px; background-color: var(--color-input);}
.product-page .add-to-cart.button, .shopping-button{width: 100%; background-color: var(--color-highlight); justify-content: center;}
.product-page .customer-ratings > form > .flex{display: block;}
.product-page .product-quantity, .cart-product-quantity {display: flex; align-items: center; gap: 10px;}
.product-page .product-quantity-selector, .cart-product .product-quantity-selector{padding: 6px; border-radius: 20px; border-color: #cacaca;}
#description-description > div{max-height: 0;}
.product-page .product-categories .product-category{color: var(--color-menu); text-decoration: none;}

/* FILTERS */
.filter-buttons .button{width: 100%; box-sizing: border-box;}
.select-attribute-button{background-color: var(--color-highlight);}
.remove-attribute-button{border: 1px solid var(--color-danger); font-size: 0.9rem;}

/* CART */
.shopping-items, #person-address-select, #person-company-select, .review-products{border: 1px solid var(--color-border); padding: 20px; border-radius: 10px;}
.cart-product{border-bottom: 1px solid var(--color-border); padding: 20px 0;}
.cart-product:last-child{border-bottom: none;}
.continue-shopping, #review-content{margin-top: 20px;}
.shopping-summary, #order-common-data{background-color: var(--color-input); padding: 20px; border-radius: 10px; height: fit-content; position: sticky; top: 90px;} 
#person-company-requierement{margin-bottom: 20px;}
.checkout-data .checkout{background-color: var(--color-input); padding: 20px; border-radius: 10px;}
#shopping-order-summary{background-color: var(--color-input-hover); padding: 20px; border-radius: 10px;}
#make-order-button .shopping-button{width: fit-content;}

/* HOME */
.shop-layout-categories .category-text h4{transform: translateY(80px);}

/* FOOTER */
#footer{ background-color: var(--color-menu); color: #fff;}
#footer-logo{height: 100px;}
#footer i{width: 25px; height: 25px; display: inline-block; margin-right: 10px;}
.footer-menu-list {font-size: 16px; line-height: 30px; text-transform: lowercase;}
.footer-menu-list *::first-letter{text-transform: uppercase;}
.footer-menu-list > a{height: 38px;}

/* SWIPER */
.swiper-button-next, .swiper-button-prev{color: var(--color-highlight);}
.swiper-pagination-bullet-active{background-color: var(--color-highlight);}
.swiper-button-next:before, .swiper-button-prev:before{content: ""; display: block; position: absolute; width: 100%; height: 100%; background-color: var(--color-menu); padding: 6px 12px; z-index: -1; opacity: 0.5;}

@media screen and (max-width: 1080px) {
  .frame{max-width: 100vw;}
  .stop-overflow{overflow: hidden;}

  /* HEADER */
  #subheader{justify-content: center;}
  #header-logo{height: 40px; padding: 4px 10px;}
  #mobile-content.active{display: block;}
  .mobile-navigation-container{padding-left: 20px; font-size: 22px;}
  .mobile-navigation-container .mobile-navigation-container{max-height: 0; overflow: hidden; transition: 0.5s;}
  .mobile-navigation-container.active > .mobile-navigation-container{max-height: 2000px;}
  .mobile-navigation-opener{transition: 0.5s;}
  .mobile-navigation-container.active > .mobile-navigation-page > .mobile-navigation-opener{transform: rotate(45deg) translateY(-6px) scale(1.3); color: var(--color-highlight);}
  .mobile-navigation-container > .mobile-navigation-container{font-size: 20px;}
  .mobile-navigation-container > .mobile-navigation-container > .mobile-navigation-container{font-size: 18px;}
  .mobile-navigation-container > .mobile-navigation-container > .mobile-navigation-container > .mobile-navigation-container{font-size: 16px;}
  .sticky-menu #mobile-content{top: 48px; height: calc(100vh - 48px);}

  /* HOME */
  .shop-layout-categories{height: auto;}
  .shop-layout-categories .home-category{height: 150px;}
  .shop-layout-categories .category-text h4{transform: none;}

  /* CART */
  .shopping-summary{margin-top: 20px;}

  /* FOOTER */
  #footer-nav h3{margin: 40px 0 15px;}
  .footer-menu-list{padding-left: 10px;}

  .product-page .left-panel{width: 100%;}
  .product-page .right-panel{width: 100%; position: relative; top: 0; height: auto;}

}