/* ============================= */
/* ===== VARIABLES & SETUP ===== */
/* ============================= */

:root {
   --white: #fff;
   --black: #0A0A0A;
   --grey-primary: #B4B4B4;
   --grey-brigter: #C0C0C0;
   --grey-darker: #808080;
   --grey-more-darker: #616161;
   --navy-blue: #06157F;

   --wallpaper: #008081;
}

@font-face {
   font-family: Sysfont;
   src: url('../../assets/fonts/sysfont.otf') format(opentype);
   font-display: swap;
}
@font-face {
   font-family: AppleGaramond;
   src: url('../../assets/fonts/AppleGaramond.ttf') format(truetype);
   font-display: swap;
}

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: Sysfont;
}

body {
   background-color: var(--grey-primary);
   height: 100%;
   overflow-y: hidden;
}




/* =================== */
/* ===== BUTTONS ===== */
/* =================== */

.btn-primary, .btn-secondary {
   border: none;
   outline: none;
   background-color: unset;
   cursor: pointer;
   padding: 6px 12px;
   -webkit-padding-before: 6px;
   -webkit-padding-end: 12px;
   -webkit-padding-after: 6px;
   -webkit-padding-start: 12px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   font-size: 1.25em;
}
.btn-primary:has(a), .btn-secondary:has(a) {
   padding: 0px;
}
.btn-primary:has(a) a, .btn-secondary:has(a) a {
   padding: 6px 12px;
}
.btn-primary img, .btn-secondary img {
   height: 85%;
}
.btn-primary a, .btn-secondary a {
   color: currentColor;
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
}
.btn-primary:hover, .btn-secondary:hover {
   filter: brightness(.9);
}

/* Primary Button */
.btn-primary {
   color: var(--black);
   background-color: var(--grey-primary);
   box-shadow: inset -2px -2px 0px var(--black), inset -4px -4px 0px var(--grey-darker), inset 2px 2px 0px var(--white);
}

/*  Secondary Button */
.btn-secondary {
   color: var(--white);
   background-color: var(--navy-blue);
   box-shadow: inset -2px -2px 0px var(--black), inset -4px -4px 0px #050A2D, inset 2px 2px 0px var(--white);
}

/* Buttons active style */
.btn-primary-clicked, .btn-primary-active-bg:active, .btn-primary-focus-bg:focus {
   box-shadow: inset 2px 2px 0px var(--black), inset -2px -2px 0px var(--white);
   background: url('../../assets/img/elem-parts/btn-focus-bg.svg');
   background-size: cover;
}

/* Primary dashed */
.btn-primary-dashed {
   position: relative;
}
.btn-primary-dashed:after {
   position: absolute;
   content: '';
   width: calc(100% - 10px);
   height: calc(100% - 10px);
   top: 4px;
   left: 4px;
   border: 1px dashed var(--black);
}

.btn-secondary.disabled {
   opacity: .75;
   cursor: default;
}



/* =================== */
/* ===== FORMS ===== */
/* =================== */

/* RADIO */
label:has(input[type="radio"]) {  
   display: flex; 
   width: unset;
   justify-content: start;
   gap: 10px;
   margin-left: 25px;
   position: relative;
}




/* =================== */
/* ===== DESKTOP ===== */
/* =================== */

.desktop {
   background: var(--wallpaper);
   width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
}
.desktop-folder {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 5px;
   font-size: 1.25rem;
   color: white;
   cursor: pointer;
   position: absolute;
   top: 35px;
   z-index: 100;
   background-color: transparent;
   border: none;
}
.menu-folder {
   left: 30px;
}
.cart-folder {
   right: 30px;
   /* position: relative; */
}
.cart-folder img {
   transform: translateY(-2px);
}
.cart-folder:has(.cart-count) img {
   transform: translateY(0px);
}
.cart-desktop-folder {
   width: 50px;
}
.cart-count {
   position: absolute;
   width: 18px;
   height: 18px;
   font-size: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
   right: 0;
   top: 0;
   z-index: 2;
}
.cart-count::after {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background-image: url('../../assets/img/elem-parts/cart-count.webp');
   background-size: contain;
   z-index: -1;
}

/* desktop menu */
#desktop-menu {
   display: none;
   position: absolute;
   left: 0;
   bottom: 0;
   transform: translateY(95%) translateX(12.5%);
   width: max-content;
   z-index: 100;
}
.dekstop-menu-show {
   display: block !important;
}
#desktop-menu ul {
   list-style-type: none;
   display: flex;
   flex-direction: column;
   gap: 3px;
}
#desktop-menu ul a {
   text-decoration: none;
   color: var(--black);
   display: block;
   padding: 2px 95px 3px 15px;
   font-size: 1.25em;
   text-align: left;
}
#desktop-menu ul li::first-letter {
   text-decoration: underline !important;
}
#desktop-menu ul li:first-child {
   box-shadow: inset 0px -2px var(--white), inset 0px -4px var(--grey-darker);
   padding-bottom: 5px;
}
#desktop-menu ul li:last-child {
   box-shadow: inset 0px 2px var(--grey-darker), inset 0px 4px var(--white);
   padding-top: 5px;
}

#desktop-menu ul li:hover {
   background-color: var(--navy-blue);
}
#desktop-menu ul li:hover a {
   color: var(--white);
}


/* empty cart modal */
#empty-cart-modal, #cookies-warning {
   top: 50%;
   left: 50%;
   transform: translatex(-50%) translatey(-50%);
   box-shadow: inset -2px -2px 0px var(--black), inset -4px -4px 0px var(--grey-darker), inset 2px 2px 0px var(--grey-darker), inset 4px 4px 0px var(--white);
   padding: 8px 8px 20px;
   background: var(--grey-primary);
   font-size: 1.1rem;
   width: 300px;
   width: clamp(310px, 100%, 500px);
   border: none;
   outline: none;
   z-index: 100;
}
#empty-cart-modal .window-container-topbar-left,
#cookies-warning .window-container-topbar-left {
   font-size: 1.5em;
}
#close-empty-cart-modal {
   cursor: pointer;
}
#close-empty-cart-modal.btn-primary,
#cookies-warning .btn-primary {
   width: 120px;
   font-size: 1.2em;
   padding: 8px 24px;
   margin-top: 0px;
}
.empty-cart-modal-content {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 15px;
   padding: 10px 0;
}
.empty-cart-modal-content p {
   margin: 8px 0px 5px;
   display: block;
   font-size: 1.25em;
   width: fit-content;
   text-align: center;
   padding-inline: 4px;
}
.empty-cart-modal-content p span {
   display: flex;
   justify-content: start;
   align-items: center;
   padding-left: 15px;
   height: 60px;
   text-align: left;
   width: fit-content;
}
.empty-cart-modal-content p img {
   width: 60px;
   float: left;
   display: block;
}

#empty-cart-modal::backdrop {
   background: rgba(0, 0, 0, 0.25);
}


/* Cookies warning */
#cookies-warning {
   position: absolute;
}
.warning-content-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 15px;
   padding: 10px 0;
}
.warning-content {
   display: flex;
   justify-content: center;
   margin: 8px 0px 5px;
}
.warning-content img {
   width: 60px;
   height: 60px;
   float: left;
   display: block;
}
.warning-text {
   display: block;
   padding-left: 15px;
   text-align: left;
   width: fit-content;
}
.warning-text p {
   font-size: 1.25em;
   text-align: left;
   max-width: 351px;
}
.warning-text a {
   color: currentColor;
}

#cookies-warning::backdrop {
   background: rgba(0, 0, 0, 0.25);
}


.website-wrapper {
   width: 100%;
   margin-top: 50px;
   height: 85vh;
   overflow-y: auto;
}




/* ============================ */
/* ===== CUSTOM SCROLLBAR ===== */
/* ============================ */

/* width */
::-webkit-scrollbar {
   width: 20px;
} 
/* Track */
::-webkit-scrollbar-track {
background-color: var(--grey-primary);
background-image: url('../../assets/img/elem-parts/scrollbar-bg.svg');
} 
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--grey-primary);
box-shadow: inset -2px -2px 0px var(--black), inset -4px -4px 0px var(--grey-darker), inset 2px 2px 0px var(--grey-brigter), inset 4px 4px 0px var(--white);
} 
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--grey-darker);
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
   background-color: var(--grey-primary);
   display: block;
   width: 20px;
   height: 20px;
   box-shadow: inset -2px -2px 0px var(--black), inset -4px -4px 0px var(--grey-darker), inset 2px 2px 0px var(--grey-brigter), inset 4px 4px 0px var(--white);
}
::-webkit-scrollbar-button:single-button:hover {
   background-color: var(--grey-darker);
}
::-webkit-scrollbar-button:single-button:decrement {
   background-image: url('../../assets/img/elem-parts/scrollbar-arrow-up.svg');
   background-size: 60% 60%;
   background-position: center;
}
::-webkit-scrollbar-button:single-button:increment {
   background-image: url('../../assets/img/elem-parts/scrollbar-arrow-down.svg');
   background-size: 60% 60%;
   background-position: center;
}



/* ========================== */
/* ===== DEFAULT WINDOW ===== */
/* ========================== */

.content-container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 75px;
   position: relative;
   z-index: 10;
   justify-items: center;
   width: clamp(300px, 75%, 1300px);
   margin-inline: auto;
}
.content-container-block {
   display: block;
}
.no-scrollbar-container::-webkit-scrollbar {
   display: none;
}
.no-scrollbar-container {
   scrollbar-width: none;
}

/* Application */
.app-container {
   height: 100%;
}
.app-tabs {
   display: flex;
   font-size: 1.5em;
   gap: 15px;
   padding: 0px 10px 0;
}
.app-tabs a {
   color: var(--black);
   text-decoration: none;
}
.app-tabs span::first-letter {
   text-decoration: underline !important;
}

/* product container */
.window-container {
   position: relative;
   box-shadow: inset -2px -2px 0px var(--black), inset -4px -4px 0px var(--grey-darker), inset 2px 2px 0px var(--grey-darker), inset 4px 4px 0px var(--white);
   padding: 8px;
   display: flex;
   flex-direction: column;
   gap: 5px;
   width: 100%;
   background: var(--grey-primary);
}
/* .product-ratio {
   aspect-ratio: 1/1;
} */
.window-container.big {
   font-size: 1rem;
}
/* small windows from product site */
.window-container.small {
   font-size: clamp(.6rem, 4vw, .8rem);
   max-width: 50%;
}
.window-container.small .window-container-icon {
   width: 26px;
}
.window-container.small .window-container-close-icon {
   width: 24px;
   height: 24px;
}

.window-container-topbar {
   background: var(--navy-blue);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 3px 4px;
}
.window-container-topbar-left {
   display: flex;
   justify-content: left;
   align-items: center;
   color: var(--white);
   gap: 5px;
   font-size: 1.625em;
}
.window-container-icons {
   height: 100%;
   display: flex;
   align-items: center;
   gap: 2px;
}
.window-container-icon {
   width: 30px;
}
.window-container-close-icon {
   width: 28px;
   height: 28px;
   background-color: unset;
   border: none;
   outline: none;
}
.window-container-close-icon img {
   width: 100%;
}



/* =========================== */
/* ===== SHOP & PRODUCTS ===== */
/* =========================== */

/* product image */
.white-window-container {
   display: flex;
   background: var(--white);
   width: 100%;
   height: fit-content;
   position: relative;
   padding-bottom: 6px;
   box-shadow: inset 2px 2px 0px var(--grey-darker), inset 4px 4px 0px var(--black), inset -2px -2px 0px var(--white), inset -4px -4px 0px var(--grey-primary), inset -6px -6px 0px var(--grey-darker), inset 6px 0px 0px var(--grey-darker);
}
.window-container.small .white-window-container {
   box-shadow: inset 1px 1px 0px var(--grey-darker), inset 2px 2px 0px var(--black), inset -1px -1px 0px var(--white), inset -2px -2px 0px var(--grey-primary), inset -3px -3px 0px var(--grey-darker), inset 3px 0px 0px var(--grey-darker);
}
/* product image */
.product-ratio .white-window-container,
.white-window-container-100h {
   height: 100%;
}
.white-window-container:has(img) {   
   aspect-ratio: 1/1;
   height: unset !important;
}
.product-img {
   max-width: calc(100% - 12px);
   margin: 4px auto 0;
   display: flex;
   object-fit: cover;
   object-position: top;
   aspect-ratio: 1/1;
   height: calc(100% - 4px);
}
.product-img-small {
   width: calc(100% - 12px);
   height: calc(100% - 10px);
   margin: 4px auto 0;
   display: block;
   object-fit: cover;
   object-position: top;
}

/* product footer */
.default-product-data {
   display: flex;
   width: 100%;
   gap: 5px;
   font-size: 1.5em !important;
}
.default-product-quantity,
.default-product-price {
   background: var(--grey-brigter);
   padding: 10px 5px;
   display: flex;
   justify-content: center;
   align-items: center;
   box-shadow: inset 1px 1px 0px var(--grey-more-darker), inset -1px -1px 0px var(--white);
}
.default-product-quantity {
   width: 55%;
}
.default-product-price {
   width: 45%;
   position: relative;
}
.default-product-data-empty {
   padding: 14px 5px;
}
.corner {
   position: absolute;
   bottom: 1px;
   right: 1px;
   height: 50%;
}

/* explorer */
.explorer-white {
   display: block;
   overflow: hidden;
}
.explorer-product {
   display: none;
   height: 100%;
   width: 100%;
   overflow: hidden;
}

.explorer-product .product-img {
   display: flex;
   max-width: calc(100% - 12px);
   object-fit: cover;
   object-position: top;
   margin: 4px auto 0;
   aspect-ratio: 1/1;
   height: calc(100% - 4px);
}
.explorer-navigation {
   display: flex;
   justify-content: end;
   gap: 10px;
   height: 40px;
   padding-right: 4%;
}
.explorer-btn {
   box-shadow: inset 0px 0px 0px 2px var(--black), inset -4px -4px 0px var(--grey-darker), inset 4px 4px 0px var(--white);
   font-size: 1.1em;
   align-items: center;
   display: flex;
   gap: 4px;
   padding-inline: 40px;
}
.explorer-btn img {
   width: .6em;
}
.explorer-btn span {
   transform: translateY(2%);
}




/* ================== */
/* ===== FOOTER ===== */
/* ================== */

.footer-toolbar {
   background: var(--grey-primary);
   width: 100%;
   position: sticky;
   bottom: 0px;
   left: 0;
   padding: 3px 5px 4px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-top: 2px solid white;
   flex-wrap: wrap;
   gap: 5px;
   z-index: 100;
   transition: all .3s ease;
}
.footer-elem a {
   height: 100% !important;
}

/* MAIN MENU */
.menu-start {
   display: flex;
   list-style-type: none;
   gap: 7px;
   flex-wrap: wrap;
}

/* submenu */
.menu-start-submenu-container {
   position: absolute;
   top: 0;
   left: 5px;
   transform: translateY(calc(-100% - 2px));
   background-color: var(--grey-primary);
   box-shadow: inset -2px -2px 0px var(--black), inset -4px -4px 0px var(--grey-darker), inset 2px 2px 0px var(--grey-primary), inset 4px 4px 0px var(--white);
   z-index: 100;
   display: none;
   width: 270px;
}
.start-menu-show {
   display: flex;
}

.menu-stripe {
   background: var(--grey-darker);
   writing-mode: vertical-lr; 
   color: var(--grey-primary);
   padding: 10px 3px 10px 4px;
   box-shadow: inset 0px -2px 0px var(--black), inset 0px -4px 0px var(--grey-darker), inset 2px 2px 0px var(--grey-primary), inset 0px 4px 0px var(--white);
}
.menu-stripe p {
   rotate: 180deg;
   font-size: 1.75rem;
   letter-spacing: 3px;
}
.menu-stripe span {
   color: var(--white);
}

.menu-start-submenu {
   list-style-type: none;
   padding: 4px 7px 4px 0px;
}
.menu-start-submenu-item {
   justify-content: left;
   box-shadow: none;
}
.menu-start-submenu-item a {
   display: flex;
   align-items: center;
   justify-content: left;
   gap: 20px;
   text-decoration: none;
   color: var(--black);
   font-size: 1.5rem;
   padding: 12px 65px 12px 10px !important;
}
.menu-start-submenu-item a:hover {
   background: var(--navy-blue);
   color: var(--white);
   /* box-shadow: inset 0px 3px var(--white), inset 0px 5px var(--black), inset 0px -3px var(--white), inset 0px -5px var(--black); */
   filter: brightness(.9);
}
.menu-start-submenu-item img {
   width: 40px;
}
.menu-vision img {
   width: 45px !important;
}
.menu-vision a {
   gap: 15px;
   padding: 10px 65px 10px 10px !important;
}
.menu-esc a {
   padding-top: 16px !important;
   padding-bottom: 10px !important;
}
.menu-start-submenu-item:first-child a:hover {
   /* box-shadow: inset 0px 0px var(--white), inset 0px 0px var(--black), inset 0px -3px var(--white), inset 0px -5px var(--black); */
}
.menu-start-submenu-item:nth-last-child(2) a:hover {
   /* box-shadow: inset 0px 3px var(--white), inset 0px 5px var(--black), inset 0px 0px var(--white), inset 0px 0px var(--black); */
}
.menu-start-submenu-item:last-child {
   box-shadow: inset 0px 2px var(--grey-darker), inset 0px 4px var(--white);
}
/* .menu-start-submenu-item:last-child a {
   padding-top: 10px;
} */
.menu-start-submenu-item:last-child a:hover {
   box-shadow:  inset 0px 2px var(--grey-darker), inset 0px 4px var(--white);
}

/* Clock */
.clock {
   padding-inline: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   height: 37px;
   box-shadow: inset 2px 2px 0px var(--grey-darker), inset -2px -2px 0px var(--white);
   font-size: 1.15rem;
}










/* --------=======================-------- */
/* -----======= MOBILE STYLES =======----- */
/* --------=======================-------- */


@media(max-width: 950px) {

   /* =================== */
   /* ===== DESKTOP ===== */
   /* =================== */
   
   .desktop {
      background: var(--wallpaper);
      width: 100%;
      padding-bottom: 50px;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: start;
   }
   .desktop-folders {
      padding-inline: 30px;
   }
   .desktop-folder {
      font-size: .9em;
      top: 15px;
   }
   .menu-folder {
      left: 20px;
   }
   .cart-folder {
      right: 20px;
   }
   .cart-desktop-folder {
      width: 40px;
  }
  .website-wrapper {
     margin-top: 90px;
     overflow-y: auto;
   }
   #desktop-menu {      
      font-size: 1.125em;
   }
   #desktop-menu ul a {
      padding: 2px 65px 2px 10px;
   }


   /* =================== */
   /* ===== BUTTONS ===== */
   /* =================== */
   
   .btn-primary, .btn-secondary {
      padding: 4px 10px;
      gap: 5px;
      font-size: 1.1em;
   }
   .btn-primary img, .btn-secondary img {
      height: 80%;
   }
   .btn-primary a, .btn-secondary a {
      gap: 5px;
   }
   .explorer-btn {
      padding-inline: 30px;
   }
   

   /* ========================== */
   /* ===== DEFAULT WINDOW ===== */
   /* ========================== */

   .content-container {
      grid-template-columns: 1fr;
      width: clamp(310px, 85%, 1300px);
      gap: 35px;
   }
   .content-container:has(.app-container) {
      width: clamp(310px, 99%, 1300px);
   }
   .window-container.big {
      font-size: .85rem;
   }




   /* ================== */
   /* ===== FOOTER ===== */
   /* ================== */

   .footer-hidden {
      transform: translateY(100%);
   }

   /* MAIN MENU */
   .menu-start {
      display: flex;
      list-style-type: none;
      gap: 5px;
   }
   .menu-start-item {
      height: 33px;
   }

   /* submenu */
   .menu-vision a {
      gap: 20px !important;
      /* padding: 10px 65px 10px 10px !important; */
   }
   .menu-start-submenu-item a {
      gap: 25px;
      font-size: 1.375rem !important;
   }
   .menu-vision img {
      width: 40px !important;
   }
   .menu-start-submenu-container {
      width: 268px;
   } 
   .menu-stripe {
      padding: 8px 5px 8px 8px;
   }
   .menu-stripe p {
      font-size: 1.75rem;
   }
   
   .menu-start-submenu {
      padding: 10px 7px 10px 0px;
   }
   .menu-start-submenu-item a {
      font-size: 1.125rem;
   }
   .menu-start-submenu-item img {
      width: 35px;
   }

   /* Clock */
   .clock {
      padding: 4px 12px;
      height: 33px;
      font-size: 1.1rem;
   }

}


@media(max-width: 650px) {

   .content-container {
      grid-template-columns: 1fr;
      width: clamp(310px, 99%, 1300px);
      gap: 35px;
   }
   
   .window-container {
      padding: 6px;
   }
   .window-container.big {
      font-size: .8rem;
   }

   .empty-cart-modal-content p {
      font-size: 1.125em;
   }
   .empty-cart-modal-content p span {
      height: 55px;
   }
  .empty-cart-modal-content p img {
      width: 55px;
   }
   
   .warning-text p {
      font-size: 1.125em;
   }

}


@media(max-width:550px) {
   /* width */
   ::-webkit-scrollbar {
      display: none;
   }
   /* Buttons */
   ::-webkit-scrollbar-button:single-button {
      display: none;
   }
}


@media(max-width: 475px) {

   .footer-elem a span {
      display: none;
   }

   #empty-cart-modal {
      width: 99%;
   }
   .empty-cart-modal-content p {
      font-size: .9em;
      padding-inline: 5px;
   }
   .empty-cart-modal-content p span {
      height: 40px;
      padding-left: 8px;
   }
  .empty-cart-modal-content p img {
      width: 40px;
   } 
   
   .warning-content {      
      margin-left: 8px;
   }
   .warning-content img {
      width: 40px;
      height: 40px;
   } 
   .warning-text {
      padding-left: 8px;
   }
   .warning-text p {
      font-size: .9em;
   }
   .start-btn {
      width: 85px !important;
   }
   .social-link a {
      width: 40px !important;
      padding: 6px 0px !important;
      -webkit-padding-before: 6px !important;
      -webkit-padding-end: 0px !important;
      -webkit-padding-after: 6px !important;
      -webkit-padding-start: 0px !important;
   }

}