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

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

   --wallpaper: #008081;
}


.website-wrapper {
   height: calc(100vh - 53px);
   padding-bottom: 100px;
}



/* ==================== */
/* ===== PRODUCTS ===== */
/* ==================== */

.white-window-container {
   overflow: hidden;
}
.product-images {
   position: relative;
}
.product-current-image {
   object-fit: cover;
   transform-origin: center;
   cursor: zoom-in;
}
@media(max-width: 950px) {
   .product-current-image {
      cursor: default;
   }
}
.arrow-btn {
   background: none;
   position: absolute;
   width: fit-content;
   height: 100%;
   border: none;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   outline: none;
}
.arrow-btn img {
   width: 30px;
   height: 30px;
   height: auto;
   image-rendering: pixelated;
   filter: drop-shadow(0 0 0.1rem white);
}
.arrow-left {
   left: 0px;
   padding-left: 15px;
}
.arrow-right {
   right: 0px;
   padding-right: 15px;
}

.products-boxes {
   width: 100%;
}

.related-products {
   display: flex;
}
.slider {
   display: flex;
   width: 100%;
   gap: 15px;
   margin-top: 20px;
   overflow-x: scroll;
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
}
.slider::-webkit-scrollbar {
   display: none;
}
.related-products button {
   background: none;
   outline: none;
   border: none;
   padding-inline: 3px;
   cursor: pointer;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
}
.rel-arr-l img, .rel-arr-r img {
   width: 20px;
   height: 20px;
   height: auto;
   image-rendering: pixelated;
}

.window-container.small {
   min-width: calc(50% - 7.5px);
}
.small-product-image {
   cursor: pointer;
   padding-bottom: 5px;
   aspect-ratio: 1/1 !important;
}
.small-product-image img {
   margin: 2px auto 0;
   width: calc(100% - 6px);
   max-width: unset;
   height: 100%;
   aspect-ratio: 1/1 !important;
}
@media(min-width: 950px) {
   .window-container.small:hover .small-product-image {
      filter: brightness(.9);
   }
}
.active-image-info {
   padding: 6px 3px !important;
}

.related-products {
   position: relative;
   width: 100%;
}
.rel-arr-l {
   left: -28px;
}
.rel-arr-r {
   right: -28px;
}




/* ========================= */
/* ===== CHARACTER.EXE ===== */
/* ========================= */

.character-exe {
   height: fit-content;
   padding-bottom: 0;
}
.character-data-container {
   font-size: 1.5rem;
   display: flex;
   flex-direction: column;
   height: 100%;
}
.character-row-1 {
   text-align: center;
   padding: 15px 0;
   box-shadow: inset 0px -2px 0px var(--white), inset 0px -4px 0px var(--grey-darker);
}
.character-row-2-all {
   box-shadow: inset 0px -2px 0px var(--white), inset 0px -4px 0px var(--grey-darker), inset 0px -6px 0px var(--black);
}
.character-row-2 {
   display: flex;
   padding: 20px 0px 10px 10px;
   gap: 15px;
}

.message-and-icons {
   display: flex;
   margin-right: 5px;
}
.product-message {
   width: calc(100% - 191px - 32px);
   padding: 20px 5px 25px;
   font-size: 1em;
   margin-left: 30px;
}
.icons {
   display: flex;
   height: fit-content;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}
.deliveries, .payments {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.deliveries {
   width: 62%;
}
.payments {
   width: 32%;
}
/* .icons img {
   max-height: 20px;
} */
.inpost {
   width: 34%;
}
.dpd {
   width: 13%;
}
.dhl {
   width: 43%;
}
.payu {
   width: 60%;
}
.paypal {
   width: 30%;
}
@media (max-width: 950px) {
   .icons {
      padding-top: 8px;
   }
}

.character-prof-wrapper {
   width: 30%;
}
.character-prof {
   background-color: var(--grey-brigter);
   width: 100%;
   border-radius: 50%;
   aspect-ratio: 1/1 !important;
   object-fit: cover;
   border: 2px solid var(--grey-darker);
}
.character-details {
   display: flex;
   height: initial;
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
   width: 100%;
   gap: 20px;
   margin-right: 5px;
}
select#product-size {   
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  text-align: center !important;
  text-align: -webkit-center !important;
  font-size: 1.125em !important;
  text-align-last: center !important;
  -moz-text-align-last: center !important;
   
  padding: 6px;
  -webkit-padding-end: 6px;
  -webkit-padding-start: 6px;
}
#product-size:focus option:first-child {
   display: none;
}
select option {   
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
   appearance: none !important;
   text-align: center !important;
   text-align: -webkit-center !important;
   font-family: Sysfont !important;
   font-size: .8em !important;
 }
#add-to-cart {
   font-size: 1.125em !important;
}
#product-size option:hover {   
  background-color: var(--navy-blue);
  color: red !important;
}
.character-details button {
   font-size: 1.125em !important;
   padding-top: 10px !important;
}
.character-prices {
   display: flex;
   justify-content: space-between;
   width: 100%;
}
.character-prices > div {
   width: 100%;
   display: flex;
}
.character-prices > div > div {
   display: flex;
   flex-direction: column;
   align-items: center;
}
.first-div-spans {
   justify-content: start;
}
.sec-div-spans {
   justify-content: center;
}
.thrd-div-spans {
   justify-content: end;
}
.num-span {
   font-size: 1.5em;
}
.character-buttons {
   display: flex;
   justify-content: space-between;
   width: 100%;
   gap: 20px;
   font-size: 1em;
}
.character-buttons .btn-primary, .character-buttons .btn-secondary {
   font-size: 1em;
   width: 100%;
   padding-top: 8px;
   padding-bottom: 8px;
}

/* product info */
.character-row-3 {
   margin: 8px 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
   overflow: hidden;
}
.character-row-3 .character-buttons {
   gap: 4px;
   width: calc(100% - 10px);
   margin-inline: 5px;
}
.product-info-container {
   display: flex;
   flex-direction: column;
   gap: 3px;
}
.character-row-3 .white-window-container {
   height: 515px !important;
   overflow: hidden;
   display: flex;
   aspect-ratio: unset;
}
.product-info {
   font-size: .85em;
   margin-top: 4px;
   height: 0px;
   width: 100%;
   overflow: auto;
   padding: 25px;
   padding-bottom: 35px;
   height: calc(100% - 4px);
}
.product-info-container .default-product-data {
   height: 40px;
}

.product-info-content {
   width: 100%;
   flex-direction: column;
   display: none;
}
.product-info-content * {
   font-family: 'Times New Roman', Times, serif !important;
}
.product-info-content p {
   margin-bottom: 10px;
}
.product-info-content h2 {
   margin-bottom: 15px;
   margin-top: 20px;
}
.product-info-content h3 {
   margin-bottom: 10px;
   margin-top: 5px;
}
.product-info-content ul, .product-info-content ol {
   margin-bottom: 10px;
   margin-left: 20px;
}
.product-info-content ul li, .product-info-content ol li {
   margin-bottom: 5px;
}

/* sizes */
.product-sizes {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   margin-top: 15px;
   flex-direction: row;
   height: 100%;
}
.sizes-table {
   width: 50%;
   max-width: 270px;
}
.sizes-measure {
   width: 50%;
   max-width: 270px;
}
/* shipping */
.product-shipping, .product-return {
   gap: 10px;
}








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


@media(max-width: 1550px) {

   /* ==================== */
   /* ===== PRODUCTS ===== */
   /* ==================== */

   .related-products {
      gap: 5px;
   }
   .window-container.small {
      font-size: .75rem;
   }
   .character-buttons {
      gap: 10px;
   }

}


@media(max-width: 1400px) {

   .content-container:has(.products-boxes) {
      gap: 25px;
   }

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

   .content-container:has(.products-boxes) {
      display: flex;
      flex-direction: column;
      width: clamp(300px, 70%, 1300px);
   }

   /* ========================= */
   /* ===== CHARACTER.EXE ===== */
   /* ========================= */
   .character-data-container {
      font-size: 1.25rem;
   }
   .character-row-3 .white-window-container {
      height: 450px !important;
   }

}


@media(max-width: 1200px) {

   /* ========================= */
   /* ===== CHARACTER.EXE ===== */
   /* ========================= */
   .character-buttons {
      gap: 5px;
      font-size: .9em;
  }
  .character-details button {
      font-size: 1em !important;
   }
   .character-row-3 .white-window-container {
      height: 400px !important;
   }

}


@media(max-width: 1100px) {

   .content-container:has(.products-boxes) {
      gap: 30px;
   }

   /* ========================= */
   /* ===== CHARACTER.EXE ===== */
   /* ========================= */
   .character-data-container {
      font-size: 1.125rem;
   }
   .character-row-2 {
      padding-bottom: 5px;
  }

}


@media(max-width: 950px) {
   
   .content-container {
      padding-bottom: 75px;
   }

   /* ========================== */
   /* ===== DEFAULT WINDOW ===== */
   /* ========================== */
   
   .window-container.small {
      min-width: 60%;
   }

   .related-products {
      margin: 8px auto;
      gap: 8px;
   }   
   .rel-arr-l, .rel-arr-r {
      display: none;
   }

   /* ========================= */
   /* ===== CHARACTER.EXE ===== */
   /* ========================= */
   .character-data-container {
      font-size: 1.25rem;
   }

   .product-info-container .default-product-data {
      height: 28px;
   }
   
   .character-buttons .btn-primary, .character-buttons .btn-secondary {
      font-size: 1.125em;
   }
   
   #product-size, #add-to-cart {
      font-size: 1.25em !important;
   }

   .character-row-1 {
      font-size: 1.25em;
   }
   .product-message {
      font-size: 20px;
   }


}


@media(max-width: 700px) {

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

   .content-container:has(.products-boxes) {
      width: clamp(300px, 95%, 1300px);
   }

   /* ========================= */
   /* ===== CHARACTER.EXE ===== */
   /* ========================= */
   .character-data-container {
      font-size: 1.125rem;
   }
   .character-buttons {
      gap: 10px;
      font-size: 1.1em;
   }
   .character-row-2 {
      padding: 20px 5px 5px 10px;
  }

  .product-message {
      margin-left: 25px;
   }
   
   .character-buttons .btn-primary, .character-buttons .btn-secondary {
      font-size: 1.125em;
   }

   .product-info {
      font-size: 1.125em;
   }

   .related-products {
      width: 100vw;
      transform: translateX(-2.5vw);
   }
   .slider {
      width: 100% !important;
      padding: 0 2.5vw;
   }

}


@media(max-width: 500px) {

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

   .content-container:has(.products-boxes) {
      width: clamp(300px, 99%, 1300px);
   }

   /* ========================= */
   /* ===== CHARACTER.EXE ===== */
   /* ========================= */

   .character-details {
      gap: 10px;
   }
   .character-buttons {
      gap: 5px;
  }
  .character-row-2 {
     padding: 20px 0px 0px 8px;
   }
   .character-info-tabs-buttons button {
      padding-inline: 5px;
   }
  .character-row-3 .character-buttons {
      gap: 0px;
   }
   .product-info {
      padding: 20px;
   }


   .related-products {
      width: 100vw;
      transform: translateX(-.5vw);
   }
   .slider {
      padding: 0 .5vw;
   }

}


@media(max-width: 460px) {
   
   .character-data-container {
      font-size: 1rem;
   }

   .character-prices {
      font-size: 1.2em;
  }
  
   /* .product-message {
      font-size: 1.125em;
   } */
   
   .character-buttons .btn-primary, .character-buttons .btn-secondary {
      font-size: 1.25em;
   }

}


@media(max-width: 415px) {
   
   .character-data-container {
      font-size: .9rem;
   }

}


@media(max-width: 375px) {
   
   .character-data-container {
      font-size: .75rem;
   }

}