@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background-color: #111;
}

/* Ensure main content takes available space */
main {
  flex: 1;
  position: relative;
  z-index: 1;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: "Monomakh", sans-serif;
  /* font-family: "M PLUS Rounded 1c", sans-serif; */
  line-height: 1;
  font-weight: 400;
  color: #b3b2b2;
  overflow-x: hidden;
  overflow-y: auto; /* Changed from hidden */
  padding-top: 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::-webkit-scrollbar {
  width: 0.8rem;
  border-radius: 25%;
  background: #000;
}

::-webkit-scrollbar-thumb {
  background: #7e1416;
  border-radius: 11px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d42425;
}

.fixed-position {
  overflow: hidden;
}

img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
}

br {
  display: block;
  content: "";
  margin-bottom: 0.5em;
}

.headerSecondary {
  padding-bottom: 0.8rem;
  font-size: 3.6rem;
  font-weight: 800;
  letter-spacing: 1px;
  background-image: linear-gradient(#d42425, #7e1416);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.grid {
  display: grid;
  gap: 9.6rem;
}

.grid2 {
  display: grid;
  gap: 4.8rem;
}

.cols2 {
  grid-template-columns: repeat(2, 1fr);
}

.cols3 {
  grid-template-columns: repeat(3, 1fr);
}

.container {
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

button,
button:link,
button:visited {
  display: inline-block;
  text-decoration: none;
  font-weight: bolder;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.btnCart img {
  background: none;
  filter: invert(16%) sepia(68%) saturate(5488%) hue-rotate(341deg) brightness(74%) contrast(93%);
  width: 3rem;
  transition: filter 0.3s;
}

.btnCart:hover img,
.btnCart:active img {
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%); /* Invert image color on hover */
  padding: 0;
}

/* MOBILE */
.btnNav {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}

/* ========== BASE NAVIGATION STYLES ========== */
.header {
  position: relative;
}

.mainNav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 500;
  background-color: #111;
  box-shadow: 0 3px 5px rgba(212, 36, 36, 0.5);
}

.mainNavList {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  height: 6rem;
}
.mainNavList .mainNavLeft {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.mainNavList .mainNavLeft .headerLogo {
  display: flex;
  align-items: center;
}
.mainNavList .mainNavLeft .headerLogo .headerImg {
  height: 3rem;
}
.mainNavList .mainNavLeft a:not(.headerLogo a) {
  padding: 1rem 1.5rem;
  font-weight: 800;
  font-size: 1.8rem;
  text-decoration: none;
  color: #d42425;
  transition: all 0.3s;
  border-radius: 11px;
}
.mainNavList .mainNavLeft a:not(.headerLogo a):hover {
  color: #000;
  background-color: #d42425;
  opacity: 70%;
}
.mainNavList .mainNavRight {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.mainNavList .mainNavRight .mainNavListShop {
  padding: 1rem 1.5rem;
  font-weight: 800;
  font-size: 1.8rem;
  text-decoration: none;
  color: #111;
  transition: all 0.3s;
  border-radius: 11px;
  background-color: #d42425;
  box-shadow: 0 0 1rem rgba(212, 36, 36, 0.5);
}
.mainNavList .mainNavRight .mainNavListShop:hover {
  color: #000;
  background-color: #d42425;
  box-shadow: 0 0 1rem rgba(255, 114, 140, 0.635);
  opacity: 70%;
}
.mainNavList .mainNavRight .btnCart {
  padding: 1rem;
  position: relative;
  transition: all 0.3s;
}
.mainNavList .mainNavRight .btnCart:hover {
  background-color: #d42425;
  opacity: 70%;
  border-radius: 11px;
}
.mainNavList .mainNavRight .btnCart .cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: #ac1e20;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* ========== MOBILE NAVIGATION ========== */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1rem;
  z-index: 999;
}
.mobile-nav-toggle img {
  background: transparent;
  width: 2.5rem;
  height: 2.5rem;
  filter: brightness(0) saturate(100%) invert(28%) sepia(65%) saturate(4315%) hue-rotate(341deg) brightness(81%) contrast(111%);
}

.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 997;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-nav-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background-color: #111;
  z-index: 998;
  transition: all 0.3s ease;
  overflow-y: auto;
  padding: 2rem;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}
.mobile-nav-menu .mobile-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid #ac1e20;
  margin-bottom: 2rem;
}
.mobile-nav-menu .mobile-nav-header .mobile-nav-logo img {
  height: 3rem;
}
.mobile-nav-menu .mobile-nav-header .mobile-nav-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.mobile-nav-menu .mobile-nav-header .mobile-nav-close img {
  background: transparent;
  width: 2rem;
  height: 2rem;
  filter: brightness(0) saturate(100%) invert(28%) sepia(65%) saturate(4315%) hue-rotate(341deg) brightness(81%) contrast(111%);
}
.mobile-nav-menu .mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #ac1e20;
}
.mobile-nav-menu .mobile-nav-list li {
  margin-bottom: 1.5rem;
}
.mobile-nav-menu .mobile-nav-list li:last-child {
  border-radius: 4px;
  border: solid 1px rgba(255, 114, 140, 0.635);
}
.mobile-nav-menu .mobile-nav-list li a {
  display: block;
  padding: 1rem;
  font-size: 1.8rem;
  color: #d42425;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s;
}
.mobile-nav-menu .mobile-nav-list li a:hover {
  background-color: rgba(212, 36, 37, 0.1);
}
.mobile-nav-menu .mobile-nav-cart {
  display: flex;
  align-items: center;
  padding: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
}
.mobile-nav-menu .mobile-nav-cart img {
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 1rem;
}
.mobile-nav-menu .mobile-nav-cart span {
  font-size: 1.6rem;
  color: #d42425;
}

/* Active state for mobile menu */
.mobile-nav-active .mobile-nav-overlay {
  opacity: 1;
  visibility: visible;
}
.mobile-nav-active .mobile-nav-menu {
  left: 0;
}

/* ========== MEDIA QUERIES ========== */
@media (max-width: 991.98px) {
  /* Hide desktop navigation links on mobile */
  .mainNavList .mainNavLeft a:not(.headerLogo a) {
    display: none;
  }
  .mainNavList .mainNavLeft .headerLogo {
    display: none;
  }
  .mainNavList .mainNavRight .mainNavListShop {
    display: none;
  }
  /* Show mobile toggle button */
  .mobile-nav-toggle {
    display: block;
  }
}
@media (min-width: 992px) {
  /* Hide mobile menu elements on desktop */
  .mobile-nav-toggle,
  .mobile-nav-overlay,
  .mobile-nav-menu {
    display: none !important;
  }
}
.carousel {
  position: relative;
  width: 100vw;
  overflow: hidden;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

/* Individual Slide */
.carousel-item {
  flex: 0 0 33.33%;
  box-sizing: border-box;
}

/* Slide Image */
.carousel-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Carousel Controls (Previous/Next Buttons) */
.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.185);
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  padding: 2rem 0;
  z-index: 10;
}

.carousel-control-prev img,
.carousel-control-next img {
  background-color: transparent;
  filter: invert(16%) sepia(68%) saturate(5488%) hue-rotate(341deg) brightness(74%) contrast(93%);
  width: 4rem;
  align-items: center;
}

.carousel-control-prev {
  left: 1rem;
}

.carousel-control-next {
  right: 1rem;
}

/* Carousel Indicators */
.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  background-color: transparent;
  z-index: 10;
}

.carousel-indicators .indicator {
  width: 40px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-indicators .indicator.active {
  background-color: #ff0000;
  transform: scaleY(1.5);
}

.carousel-indicators .indicator:hover {
  opacity: 50%; /* Lighten on hover */
}

/* Pause on hover */
.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next {
  display: block;
}

.centerLogo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  background: none;
  margin: 6rem auto 0;
  z-index: 2;
}

.sectionFooter {
  background: #000;
  font-size: 1.8rem;
  line-height: 4rem;
  padding-top: 4rem;
}
.sectionFooter .footerContainer {
  background: #000;
  align-items: center;
  justify-items: center;
}

.footerLogoIcons {
  background: #000;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 0.2fr;
  align-items: center;
  justify-items: center;
}
.footerLogoIcons .footerLogo {
  grid-column: 1/-1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  width: 100%;
  background: #000;
}
.footerLogoIcons .footerSocialIcon {
  display: flex;
  justify-content: center;
  padding: 2rem 2rem;
  background: #000;
}
.footerLogoIcons .footerSocialIcon img {
  background: none;
  width: 4rem;
  filter: invert(17%) sepia(64%) saturate(3898%) hue-rotate(335deg) brightness(88%) contrast(100%);
}

.footerLinks {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-direction: column;
  background: #000;
  font-size: 120%;
  color: #fff;
}
.footerLinks .footerHeaderLinks {
  background: #000;
  margin-bottom: 1.5rem;
}
.footerLinks ul {
  list-style: none;
  justify-content: center;
  background: #000;
}
.footerLinks a {
  color: #6b6b6b;
  text-decoration: none;
  transition: color 0.3s ease;
  background: #000;
}
.footerLinks a:hover {
  color: #ac1e20;
}
.footerLinks li {
  background-color: #000;
  margin-bottom: 1.5rem;
}

.footerContact {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-direction: column;
  background: #000;
}
.footerContact .footerHeaderContact {
  background: #000;
  font-size: 120%;
  color: #fff;
  text-align: left;
  margin-bottom: 1.5rem;
}
.footerContact a {
  color: #6b6b6b;
  text-decoration: none;
  transition: color 0.3s ease;
  cursor: pointer;
  background: #000;
}
.footerContact a:hover {
  color: #ac1e20;
}
.footerContact ul {
  justify-content: center;
  list-style: none;
  background: #000;
}
.footerContact li {
  background-color: #000;
  margin-bottom: 1.5rem;
}

.copyright {
  background: #000;
  padding: 1rem 0;
}

/**************************/
/*        SNACKBAR        */
/**************************/
#snackbar {
  visibility: hidden;
  min-width: 15rem;
  margin-left: -12.5rem;
  background-color: #ac1e20;
  color: #fff;
  text-align: center;
  border-radius: 11px;
  padding: 0.2rem;
  position: fixed;
  z-index: 999;
  left: 90%;
  bottom: 10rem;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  opacity: 75%;
}

#snackbar.show {
  visibility: visible;
  animation: fadein 0.5s, fadeout 0.5s 2s;
}
@keyframes fadein {
  from {
    bottom: 0;
    opacity: 50%;
  }
  to {
    bottom: 10rem;
    opacity: 75%;
  }
}
@keyframes fadeout {
  from {
    bottom: 10rem;
    opacity: 75%;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
.copyright {
  font-size: 1.2rem;
  color: #6b6b6b;
  background: #000;
}

.home-page {
  /* ========== MEDIA QUERIES ========== */
  /* Large devices (desktops, less than 1200px) */
  /* Medium devices (tablets, less than 992px) */
  /* Small devices (landscape phones, less than 768px) */
  /* Extra small devices (portrait phones, less than 576px) */
  /* Very small devices (small phones, less than 400px) */
}
.home-page .sectionBanner {
  margin: 0;
  padding-top: 4rem;
  width: 100vw;
  overflow: hidden;
  position: relative;
}
.home-page .sectionBanner .bannerContainer {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.home-page .sectionBanner .bannerContainer .bannerCarouselPrev,
.home-page .sectionBanner .bannerContainer .bannerCarouselNext {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: #d42425;
  font-size: 7rem;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
}
.home-page .sectionBanner .bannerContainer .bannerCarouselPrev {
  left: 1.5rem;
}
.home-page .sectionBanner .bannerContainer .bannerCarouselNext {
  right: 2.5rem;
}
.home-page .sectionBanner .bannerContainer .bannerCarouselPrev:hover,
.home-page .sectionBanner .bannerContainer .bannerCarouselNext:hover {
  color: #7e1416;
}
.home-page .sectionBanner .bannerContainer .bannerCarouselPrev:hover:active,
.home-page .sectionBanner .bannerContainer .bannerCarouselNext:hover:active {
  transform: translateY(-50%) scale(0.8);
}
.home-page .sectionBanner .bannerCarousel {
  overflow: hidden;
  position: relative;
}
.home-page .sectionBanner .bannerSlide {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.home-page .sectionBanner .bannerTrack {
  will-change: transform;
  display: flex;
  transition: transform 0.5s ease;
  backface-visibility: hidden;
  height: 90vh;
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
.home-page .sectionBanner .bannerTrack a {
  display: block;
  flex: 0 0 33.3333%;
  height: 100%;
}
.home-page .sectionBanner .bannerTrack img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
  pointer-events: none;
  -webkit-user-drag: none;
}
.home-page .sectionBanner .bannerTrack img a:hover img {
  transform: scale(1.02);
}
.home-page .sectionBanner .bannerCarouselIndicators {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.home-page .sectionBanner .bannerCarouselIndicators .line {
  height: 0.5rem;
  width: 3rem;
  border-radius: 11px;
  background: #b3b2b2;
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.home-page .sectionBanner .bannerCarouselIndicators .line.active {
  background: #d42425;
  width: 40px;
}
.home-page .sectionDiscount {
  width: 90%;
  margin: 0 auto;
  padding-top: 12rem;
}
.home-page .discountBox {
  background-color: #111;
  text-align: center;
  padding-bottom: 10rem;
}
.home-page .discountHeader {
  font-size: 5rem;
  margin-bottom: 8rem;
}
.home-page .sectionDiscount .no-discounts-fallback {
  grid-column: 1/-1; /* Spans all columns */
  width: 100%;
  max-width: 100vw; /* Full viewport width */
  margin-left: calc(-1 * var(--page-padding)); /* Compensate for page padding */
  margin-right: calc(-1 * var(--page-padding));
}
.home-page .sectionDiscount .no-discounts-fallback img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.home-page .containerTestimonials {
  position: relative;
  overflow: hidden;
  padding: 2rem 0;
}
.home-page .containerTestimonials h2 {
  text-align: center;
}
.home-page .carouselContainerTestimonial {
  width: 100%;
  overflow: hidden;
  margin: 2rem 0;
  position: relative;
}
.home-page .carouselTrackTestimonial {
  display: flex;
  gap: 1.5rem;
  will-change: transform;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: transform 0.3s ease-out;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  width: -moz-max-content;
  width: max-content; /* Ensure track is wide enough */
}
.home-page .carouselTrackTestimonial:active {
  cursor: grabbing;
}
.home-page .carouselLeft .carouselTrackTestimonial,
.home-page .carouselRight .carouselTrackTestimonial {
  animation: none;
}
.home-page .cardTestimonial {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex: 0 0 auto;
  width: 300px;
  height: 300px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-page .cardTestimonial img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 1199.98px) {
  .home-page .sectionBanner .bannerTrack {
    height: 80vh;
  }
  .home-page .sectionBanner .bannerCarouselPrev,
  .home-page .sectionBanner .bannerCarouselNext {
    font-size: 5rem;
  }
  .home-page .discountHeader {
    font-size: 4rem;
    margin-bottom: 6rem;
  }
  .home-page .containerTestimonials h2 {
    font-size: 4rem;
  }
}
@media (max-width: 991.98px) {
  .home-page .sectionBanner {
    padding-top: 3rem;
  }
  .home-page .sectionBanner .bannerTrack {
    height: 60vh;
  }
  .home-page .sectionBanner .bannerCarouselPrev,
  .home-page .sectionBanner .bannerCarouselNext {
    font-size: 4rem;
  }
  .home-page .productArticles {
    gap: 3rem;
    padding: 0 2rem;
    grid-template-columns: 1fr 1fr;
  }
  .home-page .sectionDiscount {
    padding-top: 8rem;
  }
  .home-page .discountBox {
    padding-bottom: 8rem;
  }
  .home-page .discountHeader {
    font-size: 3.5rem;
    margin-bottom: 5rem;
  }
}
@media (max-width: 767.98px) {
  .home-page .sectionBanner .bannerTrack {
    height: 60vh;
  }
  .home-page .sectionBanner .bannerTrack a {
    display: block;
    flex: 0 0 50%;
  }
  .home-page .sectionBanner .bannerCarouselPrev,
  .home-page .sectionBanner .bannerCarouselNext {
    font-size: 3rem;
  }
  .home-page .sectionBanner .bannerCarouselIndicators .line {
    width: 2rem;
    height: 0.4rem;
  }
  .home-page .sectionBanner .bannerCarouselIndicators .line.active {
    width: 3rem;
  }
  .home-page .sectionDiscount {
    padding-top: 6rem;
    width: 95%;
  }
  .home-page .discountHeader {
    font-size: 3rem;
    margin-bottom: 4rem;
  }
  .home-page .cardTestimonial {
    width: 250px;
    height: 250px;
  }
  .home-page .containerTestimonials h2 {
    font-size: 3rem;
  }
}
@media (max-width: 575.98px) {
  .home-page .sectionBanner {
    padding-top: 2rem;
  }
  .home-page .sectionBanner .bannerTrack {
    height: 50vh;
  }
  .home-page .sectionBanner .bannerCarouselPrev {
    left: 0.5rem;
  }
  .home-page .sectionBanner .bannerCarouselNext {
    right: 0.5rem;
  }
  .home-page .discountHeader {
    font-size: 2.5rem;
  }
  .home-page .containerTestimonials h2 {
    font-size: 2.5rem;
  }
}
@media (max-width: 399.98px) {
  .home-page .sectionBanner .bannerTrack {
    height: 40vh;
  }
  .home-page .sectionBanner .bannerCarouselIndicators {
    gap: 0.5rem;
  }
  .home-page .sectionBanner .bannerCarouselIndicators .line {
    width: 1.5rem;
  }
  .home-page .sectionBanner .bannerCarouselIndicators .line.active {
    width: 2rem;
  }
  .home-page .discountHeader {
    font-size: 2rem;
  }
  .home-page .containerTestimonials h2 {
    font-size: 2.2rem;
  }
  .home-page .cardTestimonial {
    width: 190px;
    height: 190px;
  }
}

.shop-page .shopTitle {
  font-size: 6rem;
  text-align: center;
  padding-top: 8rem;
}
.shop-page .shopMainContent {
  margin-top: 4rem;
  display: flex;
  min-height: calc(100vh - 120px); /* Adjust based on header/footer height */
}
.shop-page .sidebar {
  width: 18%;
  background-color: #111;
  padding-left: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}
.shop-page .sidebar h2 {
  margin-bottom: 2rem;
  font-size: 2.6rem;
  letter-spacing: 0.3rem;
  color: #d42425;
}
.shop-page .filterList {
  list-style-type: none;
  padding: 0;
  flex-direction: column;
}
.shop-page .filterList li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.shop-page .filterList label {
  margin-left: 8px;
  font-size: 2rem;
  color: #ac1e20;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}
.shop-page .filterList label:hover svg {
  background: rgba(255, 71, 84, 0.1450980392);
}
.shop-page .filterList input {
  width: 0;
  height: 0;
  opacity: 0;
}
.shop-page .filterList span {
  padding-left: 1rem;
  font-size: 2.4rem;
  color: #b3b2b2;
  transition: color 0.3s ease;
}
.shop-page .filterList span:hover {
  cursor: pointer;
  color: #d42425;
}
.shop-page .filterList .categoryCount {
  padding-left: 0;
}
.shop-page .filterList input:checked ~ span {
  color: #d42425;
}
.shop-page .filterList input:checked + svg {
  background: #ac1e20;
  stroke-dashoffset: 0;
}
.shop-page .filterList svg {
  scale: 0.7;
  border: 0.2rem solid #d42425;
  stroke: #f9f9f9;
  stroke-dasharray: 25;
  stroke-dashoffset: 25;
  stroke-linecap: round;
  stroke-width: 0.2rem;
  border-radius: 0.2rem;
  fill: none;
  transition: background 0.3s ease, stroke-dashoffset 0.4s;
}
.shop-page input[type=checkbox] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  position: absolute;
}
.shop-page .shopContent {
  background-color: #111;
  text-align: center;
  padding-bottom: 10rem;
  width: 82%;
}
@media (max-width: 1200px) {
  .shop-page .shopMainContent {
    flex-direction: column;
  }
  .shop-page .sidebar {
    width: 100%;
    padding: 2rem;
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 114, 140, 0.635);
  }
  .shop-page .sidebar h2 {
    text-align: center;
  }
  .shop-page .sidebar h2 .filterList {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .shop-page .shopContent {
    width: 100%;
    padding: 2rem;
  }
  .shop-page .filterList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.5rem;
  }
  .shop-page .filterList span {
    font-size: 2rem;
  }
  .shop-page .filterList li {
    margin-bottom: 0;
  }
}
@media (max-width: 768px) {
  .shop-page .shopTitle {
    font-size: 4.5rem;
    padding-top: 6rem;
  }
  .shop-page .sidebar h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
  }
  .shop-page .filterList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .shop-page .filterList span {
    font-size: 1.6rem;
  }
}
@media (max-width: 576px) {
  .shop-page .shopTitle {
    font-size: 3.5rem;
    padding-top: 5rem;
  }
  .shop-page .filterList {
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
  }
  .shop-page .filterList span {
    font-size: 1.6rem;
  }
}
@media (max-width: 375px) {
  .shop-page .shopTitle {
    font-size: 3rem;
    padding-top: 4rem;
  }
  .shop-page .sidebar h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
  }
  .shop-page .filterList {
    display: grid;
  }
}

.blog-page .blogTitle {
  font-size: 6rem;
  text-align: center;
  padding: 10rem 0 2rem 0;
}
.blog-page .blogArticles {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  padding: 4rem;
  margin-bottom: 6rem;
  justify-content: center;
  align-items: center;
}
.blog-page .blogArticle {
  background: #000;
  padding: 3rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(212, 36, 36, 0.5);
  border: solid 1px #7e1416;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.blog-page .blogArticleTitle {
  background: #000;
  font-size: 4rem;
  margin-bottom: 3rem;
  color: #b3b2b2;
  text-align: center;
  -webkit-text-decoration: underline #b81533;
          text-decoration: underline #b81533;
}
.blog-page .blogArticleImage {
  width: 100%;
  max-width: 60rem;
  height: auto;
  border-radius: 8px;
  margin-bottom: 1rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.blog-page .blogArticleText {
  font-size: 3rem;
  line-height: 1.6;
  color: #c6c5c5;
  width: 100%;
  text-align: left;
  border-radius: 11px;
  background-color: #000;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.blog-page .blogArticleText p {
  background-color: #000;
  width: 100%;
  margin: 4rem 0 0 0;
  padding: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.blog-page .blogArticleText ul {
  background-color: #000;
  padding-left: 5rem;
  list-style: circle;
}
.blog-page .blogArticleText li {
  background-color: #000;
  padding-left: 1rem;
}

/* ========== BLOG PAGE MEDIA QUERIES ========== */
/* Large tablets (less than 992px) */
@media (max-width: 991.98px) {
  .blog-page .blogTitle {
    font-size: 5rem;
    padding: 8rem 0 2rem 0;
  }
  .blog-page .blogArticles {
    gap: 5rem;
    padding: 3rem;
  }
  .blog-page .blogArticle {
    width: 85%;
    padding: 2.5rem;
  }
  .blog-page .blogArticleTitle {
    font-size: 3.5rem;
    margin-bottom: 2.5rem;
  }
  .blog-page .blogArticleText {
    font-size: 2.5rem;
  }
  .blog-page .blogArticleText ul {
    padding-left: 4rem;
  }
}
/* Small tablets and large phones (less than 768px) */
@media (max-width: 767.98px) {
  .blog-page .blogTitle {
    font-size: 4.5rem;
    padding: 6rem 0 1.5rem 0;
  }
  .blog-page .blogArticles {
    gap: 4rem;
    padding: 2rem;
    margin-bottom: 4rem;
  }
  .blog-page .blogArticle {
    width: 90%;
    padding: 2rem;
  }
  .blog-page .blogArticleTitle {
    font-size: 3rem;
    margin-bottom: 2rem;
  }
  .blog-page .blogArticleText {
    font-size: 2.2rem;
    line-height: 1.5;
  }
  .blog-page .blogArticleText ul {
    padding-left: 3rem;
  }
}
/* Small phones (less than 576px) */
@media (max-width: 575.98px) {
  .blog-page .blogTitle {
    font-size: 3.5rem;
    padding: 5rem 0 1rem 0;
  }
  .blog-page .blogArticles {
    gap: 3rem;
    padding: 1.5rem;
  }
  .blog-page .blogArticle {
    width: 95%;
    padding: 1.5rem;
  }
  .blog-page .blogArticleTitle {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
  }
  .blog-page .blogArticleText {
    font-size: 1.8rem;
  }
  .blog-page .blogArticleText ul {
    padding-left: 2.5rem;
  }
  .blog-page .blogArticleText li {
    padding-left: 0.5rem;
  }
}
/* Extra small phones (less than 400px) */
@media (max-width: 399.98px) {
  .blog-page .blogTitle {
    font-size: 3rem;
    padding: 4rem 0 1rem 0;
  }
  .blog-page .blogArticleTitle {
    font-size: 2.2rem;
  }
  .blog-page .blogArticleText {
    font-size: 1.6rem;
  }
  .blog-page .blogArticleText ul {
    padding-left: 2rem;
  }
}
.about-page .sectionAboutUs {
  background-image: url("/img/Konjanik-portrait.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.61); /* Overlay color */
  background-blend-mode: overlay; /* Darkens BG only */
  width: 100%;
  height: auto;
  margin-top: 4rem;
}
.about-page .sectionAboutUs h1 {
  margin-top: 4rem;
  padding-top: 6rem;
  font-size: 6rem;
  text-align: center;
  margin-bottom: 2rem;
}
.about-page .sectionAboutUs .aboutUsContainer {
  width: 80%;
  margin: auto;
  background: transparent;
}
.about-page .sectionAboutUs .aboutUsContainer .aboutUsText {
  background: transparent;
  font-size: 2rem;
  line-height: 2.5rem;
  text-align: justify;
  text-justify: distribute;
  margin-bottom: 4rem;
}
.about-page .sectionAboutUs .aboutUsContainer .aboutUsText p {
  background: transparent;
  margin-bottom: 2.5rem;
}
.about-page .sectionAboutUs .aboutUsContainer .aboutUsText h2 {
  font-size: 3rem;
  margin: 4rem 0;
}
.about-page .sectionAboutUs .aboutUsContainer .aboutUsText .aboutUsExpectations {
  list-style: none;
  padding-left: 0;
  margin: 2rem 0 6rem 3rem;
  background: transparent;
}
.about-page .sectionAboutUs .aboutUsContainer .aboutUsText .aboutUsExpectations li {
  position: relative;
  background: transparent;
  padding-left: 3.5rem;
  margin-bottom: 1.5rem;
  font-size: 2.5rem;
  line-height: 1.7;
}
.about-page .sectionAboutUs .aboutUsContainer .aboutUsText .aboutUsExpectations li::before {
  content: "";
  background-image: url("/img/Nemanjic_Coat_of_Arms_Badge.png");
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 4rem;
  height: 4rem;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}
.about-page .sectionAboutUs .aboutUsContainer .aboutUsText .thankYou {
  color: #d42425;
  text-align: center;
  font-size: 3.5rem;
  line-height: 1.7;
  letter-spacing: 0.5rem;
  margin: 8rem 0;
}
.about-page .sectionAboutUs .aboutUsContainer .aboutUsText .thankYou strong {
  background: transparent;
}
.about-page .sectionAboutUs .aboutUsContainer .aboutUsText .headerSecondary {
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2rem;
  position: relative;
  display: inline-block;
}
.about-page .sectionAboutUs .aboutUsContainer .aboutUsText .headerSecondary::after {
  content: "";
  position: absolute;
  bottom: -0.1rem;
  left: 0;
  width: 100%;
  height: 0.2rem;
  background: linear-gradient(45deg, #d42425, #7e1416);
}
.about-page .sectionAboutUs .aboutUsContainer .aboutUsText .aboutUsQuote {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  list-style: none;
  background: transparent;
  margin-top: 4rem;
  text-align: start;
}
.about-page .sectionAboutUs .aboutUsContainer .aboutUsText .aboutUsQuote li {
  margin-bottom: 1rem;
  background: transparent;
}
.about-page .sectionAboutUs .sectionPrivacyPolicy {
  background: transparent;
  padding: 2rem 0;
}
.about-page .sectionAboutUs .sectionPrivacyPolicy h2 {
  font-size: 5rem;
  margin-bottom: 5rem;
}
.about-page .sectionAboutUs .sectionPrivacyPolicy .privacyPolicyContainer {
  margin: 2rem auto;
  background: transparent;
  font-size: 2.5rem;
  line-height: 1.7;
  text-align: justify;
  text-justify: distribute;
}
.about-page .sectionAboutUs .sectionPrivacyPolicy .privacyPolicyContainer p {
  margin-bottom: 1.5rem;
  background: transparent;
}
.about-page .sectionAboutUs .sectionPrivacyPolicy .privacyPolicyContainer p:last-child {
  margin-bottom: 0;
}
.about-page .sectionAboutUs .sectionDelivery {
  background: transparent;
  padding: 4rem 0;
}
.about-page .sectionAboutUs .sectionDelivery h2 {
  font-size: 5rem;
  margin-bottom: 5rem;
}
.about-page .sectionAboutUs .sectionDelivery .deliveryContainer {
  margin: 2rem auto;
  background: transparent;
  font-size: 2.5rem;
  line-height: 1.7;
  text-align: justify;
  text-justify: distribute;
}
.about-page .sectionAboutUs .sectionDelivery .deliveryContainer p {
  margin-bottom: 1.5rem;
  background: transparent;
}
.about-page .sectionAboutUs .sectionDelivery .deliveryContainer p:last-child {
  margin-bottom: 0;
}
.about-page .sectionUsualQuestions {
  background: transparent;
  width: 80%;
  margin: 6rem auto;
}
.about-page .sectionUsualQuestions h2 {
  font-size: 5rem;
  margin-bottom: 5rem;
  text-align: center;
}
.about-page .sectionUsualQuestions .usualQuestionsContainer {
  margin: 2rem auto;
  background: transparent;
}
.about-page .sectionUsualQuestions .faqItem {
  background: transparent;
  border-bottom: 1px solid #6b6b6b;
  margin-bottom: 0.5rem;
  transition: border-color 0.3s ease;
  overflow: hidden;
}
.about-page .sectionUsualQuestions .faqItem:not(.is-open) .faqAnswer {
  display: block;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  overflow: hidden;
}
.about-page .sectionUsualQuestions .faqItem.is-open {
  border-bottom: 1px solid #d42425;
}
.about-page .sectionUsualQuestions .faqItem.is-open .faqQuestion {
  color: #d42425;
}
.about-page .sectionUsualQuestions .faqItem.is-open .faqQuestion::after {
  transform: translateY(-50%) rotate(180deg);
  color: #d42425;
}
.about-page .sectionUsualQuestions .faqItem.is-open .faqAnswer {
  max-height: 1000px;
  opacity: 1;
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
  margin-top: 0.5rem;
}
.about-page .sectionUsualQuestions .faqItem:first-child {
  border-top: 1px solid #6b6b6b;
}
.about-page .sectionUsualQuestions .faqItem.is-open::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 0;
  height: 100%;
  width: 3px;
  background: linear-gradient(to bottom, #7e1416, #d42425, #d42425);
}
.about-page .sectionUsualQuestions .faqQuestion {
  position: relative;
  padding: 1.2rem 3rem 1.2rem 0;
  font-size: 2.5rem;
  cursor: pointer;
  list-style: none;
  transition: color 0.3s ease;
  background: transparent;
}
.about-page .sectionUsualQuestions .faqQuestion::after {
  content: "▼";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: center center;
  font-size: 2rem;
  color: #7e1416;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), color 0.3s ease;
  width: 1em;
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-page .sectionUsualQuestions .faqQuestion:hover {
  color: #d42425;
}
.about-page .sectionUsualQuestions .faqQuestion:hover::after {
  color: #d42425;
}
.about-page .sectionUsualQuestions .faqAnswer {
  display: block;
  padding: 0 1rem;
  line-height: 1.6;
  text-align: justify;
  font-size: 2rem;
  background: rgba(126, 20, 22, 0.5);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease 0.1s, padding 0.3s ease, margin 0.3s ease;
  will-change: max-height, opacity;
}
.about-page .sectionUsualQuestions .faqAnswer p {
  margin-bottom: 1rem;
  background: transparent;
}
.about-page .sectionUsualQuestions .faqAnswer p:last-child {
  margin-bottom: 0;
}

/* ========== ABOUT PAGE MEDIA QUERIES ========== */
/* Large tablets (less than 992px) */
@media (max-width: 991.98px) {
  .about-page .sectionAboutUs {
    /* FAQ Section Adjustments */
  }
  .about-page .sectionAboutUs h1 {
    font-size: 5rem;
    padding-top: 5rem;
  }
  .about-page .sectionAboutUs .aboutUsContainer {
    width: 85%;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText {
    font-size: 1.8rem;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText h2 {
    font-size: 2.5rem;
    margin: 3rem 0;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText .aboutUsExpectations li {
    font-size: 2rem;
    padding-left: 3rem;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText .aboutUsExpectations li::before {
    width: 3rem;
    height: 3rem;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText .thankYou {
    font-size: 3rem;
    margin: 6rem 0;
  }
  .about-page .sectionAboutUs .sectionPrivacyPolicy h2,
  .about-page .sectionAboutUs .sectionDelivery h2 {
    font-size: 4rem;
    margin-bottom: 4rem;
  }
  .about-page .sectionAboutUs .sectionPrivacyPolicy .privacyPolicyContainer,
  .about-page .sectionAboutUs .sectionPrivacyPolicy .deliveryContainer,
  .about-page .sectionAboutUs .sectionDelivery .privacyPolicyContainer,
  .about-page .sectionAboutUs .sectionDelivery .deliveryContainer {
    font-size: 2rem;
  }
  .about-page .sectionUsualQuestions {
    width: 85%;
  }
  .about-page .sectionUsualQuestions .headerUsualQuestions {
    font-size: 4rem;
    margin-bottom: 4rem;
  }
  .about-page .sectionUsualQuestions .faqQuestion {
    font-size: 2rem;
    padding: 1rem 3rem 1rem 0;
  }
  .about-page .sectionUsualQuestions .faqAnswer {
    font-size: 1.8rem;
    padding: 0 1rem;
  }
}
/* Small tablets and large phones (less than 768px) */
@media (max-width: 767.98px) {
  .about-page .sectionAboutUs {
    margin-top: 3rem;
    /* FAQ Section Adjustments */
  }
  .about-page .sectionAboutUs h1 {
    font-size: 4rem;
    padding-top: 4rem;
    margin-bottom: 1.5rem;
  }
  .about-page .sectionAboutUs .aboutUsContainer {
    width: 90%;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText {
    font-size: 1.6rem;
    line-height: 2rem;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText h2 {
    font-size: 2.2rem;
    margin: 2.5rem 0;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText .aboutUsExpectations li {
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText .thankYou {
    font-size: 2.5rem;
    margin: 5rem 0;
    letter-spacing: 0.3rem;
  }
  .about-page .sectionAboutUs .sectionPrivacyPolicy,
  .about-page .sectionAboutUs .sectionDelivery {
    padding: 1.5rem 0;
  }
  .about-page .sectionAboutUs .sectionPrivacyPolicy h2,
  .about-page .sectionAboutUs .sectionDelivery h2 {
    font-size: 3.5rem;
    margin-bottom: 3rem;
  }
  .about-page .sectionAboutUs .sectionPrivacyPolicy .privacyPolicyContainer,
  .about-page .sectionAboutUs .sectionPrivacyPolicy .deliveryContainer,
  .about-page .sectionAboutUs .sectionDelivery .privacyPolicyContainer,
  .about-page .sectionAboutUs .sectionDelivery .deliveryContainer {
    font-size: 1.8rem;
    line-height: 1.6;
  }
  .about-page .sectionUsualQuestions {
    width: 90%;
    margin: 4rem auto;
  }
  .about-page .sectionUsualQuestions .headerUsualQuestions {
    font-size: 3rem;
    margin-bottom: 3rem;
  }
  .about-page .sectionUsualQuestions .faqQuestion {
    font-size: 1.8rem;
    padding: 0.8rem 2.5rem 0.8rem 0;
  }
  .about-page .sectionUsualQuestions .faqQuestion::after {
    right: 0.5rem;
    font-size: 1.8rem;
  }
  .about-page .sectionUsualQuestions .faqAnswer {
    font-size: 1.6rem;
    line-height: 1.5;
  }
}
/* Small phones (less than 576px) */
@media (max-width: 575.98px) {
  .about-page .sectionAboutUs {
    margin-top: 2rem;
    /* FAQ Section Adjustments */
  }
  .about-page .sectionAboutUs h1 {
    font-size: 3.2rem;
    padding-top: 3rem;
  }
  .about-page .sectionAboutUs .aboutUsContainer {
    width: 92%;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText h2 {
    text-align: center;
    font-size: 2rem;
    width: 100%;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText .aboutUsExpectations li {
    font-size: 1.6rem;
    padding-left: 2.5rem;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText .aboutUsExpectations li::before {
    width: 2.5rem;
    height: 2.5rem;
    top: 0.1rem;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText .thankYou {
    font-size: 2rem;
    margin: 4rem 0;
    letter-spacing: 0.2rem;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText .headerSecondary::after {
    height: 0.15rem;
  }
  .about-page .sectionAboutUs .sectionPrivacyPolicy,
  .about-page .sectionAboutUs .sectionDelivery {
    padding: 1rem 0;
  }
  .about-page .sectionAboutUs .sectionPrivacyPolicy h2,
  .about-page .sectionAboutUs .sectionDelivery h2 {
    font-size: 3rem;
    margin-bottom: 2.5rem;
  }
  .about-page .sectionAboutUs .sectionPrivacyPolicy .privacyPolicyContainer,
  .about-page .sectionAboutUs .sectionPrivacyPolicy .deliveryContainer,
  .about-page .sectionAboutUs .sectionDelivery .privacyPolicyContainer,
  .about-page .sectionAboutUs .sectionDelivery .deliveryContainer {
    font-size: 1.6rem;
  }
  .about-page .sectionUsualQuestions {
    width: 92%;
    margin: 3rem auto;
  }
  .about-page .sectionUsualQuestions .headerUsualQuestions {
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .about-page .sectionUsualQuestions .faqQuestion {
    font-size: 1.6rem;
    padding: 0.7rem 2rem 0.7rem 0;
  }
  .about-page .sectionUsualQuestions .faqQuestion::after {
    font-size: 1.5rem;
  }
  .about-page .sectionUsualQuestions .faqAnswer {
    font-size: 1.4rem;
    padding: 0 0.8rem;
  }
}
/* Extra small phones (less than 400px) */
@media (max-width: 399.98px) {
  .about-page .sectionAboutUs {
    /* FAQ Section Adjustments */
  }
  .about-page .sectionAboutUs h1 {
    font-size: 2.8rem;
  }
  .about-page .sectionAboutUs .aboutUsContainer .aboutUsText .thankYou {
    font-size: 1.8rem;
  }
  .about-page .sectionAboutUs .sectionPrivacyPolicy h2,
  .about-page .sectionAboutUs .sectionDelivery h2 {
    font-size: 2.5rem;
  }
  .about-page .sectionAboutUs .sectionPrivacyPolicy .privacyPolicyContainer,
  .about-page .sectionAboutUs .sectionPrivacyPolicy .deliveryContainer,
  .about-page .sectionAboutUs .sectionDelivery .privacyPolicyContainer,
  .about-page .sectionAboutUs .sectionDelivery .deliveryContainer {
    font-size: 1.4rem;
  }
  .about-page .sectionUsualQuestions .headerUsualQuestions {
    font-size: 2rem;
    margin-bottom: 2.5rem;
  }
  .about-page .sectionUsualQuestions .faqQuestion {
    font-size: 1.4rem;
    padding: 0.6rem 1.8rem 0.6rem 0;
  }
  .about-page .sectionUsualQuestions .faqAnswer {
    font-size: 1.3rem;
  }
}
.product-page .productTempMainContent {
  margin: 5rem 0 6rem 0;
}
.product-page .productTempMainContent .productTempContainer {
  grid-template-columns: 0.6fr 0.5fr;
  gap: 2rem;
  font-size: 2.4rem;
  margin: 0 2rem;
  align-items: start;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.product-page .productTempMainContent .productTempContainer .productTempImgBox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  overflow-y: auto;
  position: sticky;
  padding-right: 1rem;
  scrollbar-width: none;
  z-index: auto !important;
}
.product-page .productTempMainContent .productTempContainer .productTempImgBox::-webkit-scrollbar {
  display: none;
}
.product-page .productTempMainContent .productTempContainer .productTempImgBox img {
  width: 100%;
  display: block;
  cursor: pointer;
  transition: transform 0.2s ease;
  position: relative;
  z-index: 10;
  pointer-events: auto;
  touch-action: pan-y;
}
.product-page .productTempMainContent .productTempContainer .productTempImgBox img:hover {
  transform: scale3d(1.05, 1.05, 1);
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox {
  height: 200%;
  position: sticky;
  display: flex;
  flex-direction: column;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox > * {
  pointer-events: auto;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempDescriptionBox {
  flex-grow: 1;
  padding-bottom: 4rem;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox h4 {
  padding-bottom: 4rem;
  font-size: 2.6rem;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox p {
  padding-bottom: 1rem;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempCategory {
  color: #6b6b6b;
  padding-bottom: 4rem;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempName {
  padding-bottom: 4rem;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempHbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6rem;
  padding-top: 3rem;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempHbox .productTempPrice {
  font-size: 3rem;
  color: #d42425;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempHbox .productTempSizeGuide {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #f3b1b6;
  text-decoration: none;
  transition: all 0.3s;
  font-size: 1.8rem;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempHbox .productTempSizeGuide:hover {
  color: #d42425;
  text-decoration: underline;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempHbox .productTempSizeGuide img {
  width: 2rem;
  height: 2rem;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes {
  list-style: none;
  padding-bottom: 4rem;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 3rem;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li {
  position: relative;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li.unavailable .sizeLabel span {
  color: #6b6b6b !important;
  background-color: #d1d1d1 !important;
  border-color: #6b6b6b !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 0.7;
  position: relative;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li.unavailable .sizeLabel span:hover {
  transform: none !important;
  box-shadow: none !important;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li.unavailable .sizeInput {
  pointer-events: none;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li.unavailable::after {
  content: "Распродато";
  position: absolute;
  bottom: -1.8rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  color: #f3b1b6;
  white-space: nowrap;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li .sizeInput {
  position: absolute;
  opacity: 0;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li .sizeInput:checked + .sizeLabel span {
  color: #c6c5c5;
  background-color: #d42425;
  border-color: #d42425;
  box-shadow: 0 0 10px rgba(212, 36, 37, 0.5), inset 0 0 10px rgba(126, 20, 22, 0.5);
  transform: scale(1.05);
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li .sizeInput:focus-visible + .sizeLabel span {
  outline: 2px solid #d42425;
  outline-offset: 2px;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li .sizeLabel {
  cursor: pointer;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li .sizeLabel span {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  padding: 2rem 4rem;
  border: solid 1px #ac1e20;
  box-shadow: 0 0 2px 2px rgba(126, 20, 22, 0.5);
  border-radius: 4rem;
  background-color: #111;
  width: 6rem;
  height: 4rem;
  transition: all 0.3s ease;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li .sizeLabel span:hover {
  color: #c6c5c5;
  transform: scale(1.05);
  box-shadow: 2px 4px 8px rgba(212, 36, 36, 0.5), 0 6px 20px rgba(172, 30, 32, 0.5), inset 0 0 10px rgba(126, 20, 22, 0.5);
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempQuantityCartBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .btnProductTempCart {
  color: #f3b1b6;
  position: relative;
  overflow: hidden;
  height: 6rem;
  padding: 0 8rem;
  border-radius: 4rem;
  background: #222;
  background-size: 400%;
  color: #b3b2b2;
  margin: 2rem 0 6rem 0;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .btnProductTempCart:hover {
  box-shadow: 0 8px 8px rgba(160, 160, 160, 0.226), 0 6px 12px rgba(109, 109, 109, 0.075);
  transition: all 0.7s;
  transform: scale(1.03);
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .btnProductTempCart:hover::before {
  transform: scaleX(1);
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .btnProductTempCart::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(82.3deg, #d42425 15%, #7e1416 85%);
  transition: all 0.475s;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .btnProductTempCart .btnProductTempCartText {
  position: relative;
  z-index: 1;
  background: none;
  font-size: 2.4rem;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempDescription {
  padding-bottom: 2rem;
  padding-top: 2rem;
  letter-spacing: 1px;
  line-height: 3.2rem;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempDescriptionList {
  list-style: none;
  padding-left: 2rem;
  margin-top: 4rem;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempDescriptionList li {
  position: relative;
  padding-left: 4rem;
  margin-bottom: 2rem;
}
.product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempDescriptionList li::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  background-image: url(/img/Icons/icons8-correct.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.product-page body.modal-open {
  overflow: hidden;
}
.product-page .sizeGuideModal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  animation: fadeIn 0.3s;
}
.product-page .sizeGuideModal .modalContent {
  position: relative;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 40%;
  max-height: 85%;
  background: transparent;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease-out;
  transform: translate(-50%, -50%) scale(0.95);
}
.product-page .sizeGuideModal .modalContent img {
  max-height: 80vh;
  max-width: 100%;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
}
.product-page .sizeGuideModal .closeModal {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: #d42425;
  transition: all 0.3s;
}
.product-page .sizeGuideModal .closeModal svg {
  width: 24px;
  height: 24px;
  stroke-width: 2px;
  background: transparent;
}
.product-page .sizeGuideModal .closeModal:hover {
  color: #f3b1b6;
  transform: scale(1.1);
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal {
  transition: transform 0.3s ease-out;
}

.modal.swiping {
  transform: translateY(50px);
}

[data-swipe] {
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

#galleryCurrentImage {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: all 0.3s;
}

.imageGalleryModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1000;
}

.galleryModalContent {
  position: relative;
  width: 100%;
  background: transparent;
  transition: transform 0.3s ease-out;
  touch-action: pan-y;
}

.galleryMainImage {
  text-align: center;
  margin-top: 20px;
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  width: 100%;
  overflow: hidden;
}

.galleryMainImage img {
  max-height: 80vh;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.galleryThumbnails {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 0;
  justify-content: center;
  background: transparent;
}

.galleryThumbnails img {
  width: 8rem;
  height: 9rem;
  -o-object-fit: cover;
     object-fit: cover;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s;
  pointer-events: auto;
}

.galleryThumbnails img:hover,
.galleryThumbnails img.active {
  opacity: 1;
}

.galleryPrev,
.galleryNext {
  position: absolute;
  top: 50%;
  width: auto;
  padding: 1rem;
  margin-top: -50px;
  color: #ac1e20;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 50%;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  background: transparent;
  border: none;
  cursor: pointer;
}
.galleryPrev:hover,
.galleryNext:hover {
  transform: scale(1.5);
  background: rgba(126, 20, 22, 0.5);
}

.galleryNext {
  right: 1rem;
}

.galleryPrev {
  left: 1rem;
}

.closeGalleryModal {
  position: absolute;
  top: -1.2rem;
  right: 1rem;
  color: #ac1e20;
  background: transparent;
  font-weight: bold;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 2;
  transition: all ease 0.3s;
}
.closeGalleryModal svg {
  background: transparent;
}
.closeGalleryModal:hover {
  color: #f3b1b6;
  transform: scale(1.1);
}

/* Animation classes */
.gallery-image-enter {
  opacity: 0;
  transform: scale(0.95);
}

.gallery-image-enter-active {
  opacity: 1;
  transform: scale(1);
}

.gallery-image-exit {
  opacity: 1;
  transform: scale(1);
  position: absolute;
  top: 0;
  left: 0;
}

.gallery-image-exit-active {
  opacity: 0;
  transform: scale(1.05);
}

/* ========== PRODUCT TEMPLATE MEDIA QUERIES ========== */
/* Large tablets (less than 992px) */
@media (max-width: 991.98px) {
  .product-page .productTempMainContent {
    margin: 4rem 0 5rem 0;
  }
  .product-page .productTempMainContent .productTempContainer {
    grid-template-columns: 1fr;
    gap: 3rem;
    font-size: 2rem;
    margin: 0 1.5rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempImgBox {
    position: relative;
    padding-right: 0;
    grid-template-columns: repeat(2, 1fr); /* Maintain 2 columns */
    gap: 0.8rem;
    max-height: none;
    overflow-y: visible;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox {
    position: relative;
    height: auto;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox h4 {
    padding-bottom: 3rem;
    font-size: 2.4rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempHbox {
    padding: 2rem 0 4rem 0;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempHbox .productTempPrice {
    font-size: 2.6rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempHbox .productTempSizeGuide {
    font-size: 1.6rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li .sizeLabel span {
    padding: 1.5rem 3rem;
    width: 8rem;
    height: 5rem;
    font-size: 1.8rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .btnProductTempCart {
    height: 5.5rem;
    padding: 0 6rem;
    margin: 1.5rem 0 4rem 0;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .btnProductTempCart .btnProductTempCartText {
    font-size: 2.2rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempDescription {
    line-height: 3rem;
  }
  .product-page .sizeGuideModal .modalContent {
    max-width: 60%;
    top: 50%;
  }
  .product-page .galleryMainImage img {
    max-height: 80vh;
  }
  .product-page .galleryThumbnails img {
    width: 7rem;
    height: 8rem;
  }
}
/* Small tablets and large phones (less than 768px) */
@media (max-width: 767.98px) {
  .product-page .productTempMainContent {
    margin: 3rem 0 4rem 0;
  }
  .product-page .productTempMainContent .productTempContainer {
    font-size: 1.8rem;
    margin: 0 1rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempImgBox {
    gap: 0.6rem; /* Slightly reduce gap */
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox h4 {
    font-size: 2.2rem;
    padding-bottom: 2rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempCategory,
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempName {
    padding-bottom: 3rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempHbox {
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem 0 3rem 0;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempHbox .productTempPrice {
    font-size: 2.4rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes {
    gap: 0.8rem;
    padding-bottom: 3rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li .sizeLabel span {
    padding: 1rem 2rem;
    width: 7rem;
    height: 4.5rem;
    font-size: 1.6rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .btnProductTempCart {
    height: 5rem;
    padding: 0 5rem;
    margin: 1rem 0 3rem 0;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .btnProductTempCart .btnProductTempCartText {
    font-size: 2rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempDescription {
    line-height: 2.8rem;
    padding: 1.5rem 0;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempDescriptionList {
    margin-top: 3rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempDescriptionList li {
    padding-left: 3rem;
    margin-bottom: 1.5rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempDescriptionList li::before {
    width: 2.5rem;
    height: 2.5rem;
  }
  .product-page .sizeGuideModal .modalContent {
    max-width: 75%;
    padding: 1.5rem;
  }
  .product-page .galleryMainImage {
    min-height: 250px;
  }
  .product-page .galleryMainImage img {
    max-height: 83vh;
  }
  .product-page .galleryThumbnails img {
    width: 6rem;
    height: 7rem;
  }
  .product-page .galleryPrev,
  .product-page .galleryNext {
    padding: 0.8rem;
    font-size: 18px;
  }
}
/* Small phones (less than 576px) */
@media (max-width: 575.98px) {
  .product-page .productTempMainContent {
    margin: 2rem 0 3rem 0;
  }
  .product-page .productTempMainContent .productTempContainer {
    font-size: 1.6rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempImgBox {
    gap: 0.5rem; /* Keep 2 columns with small gap */
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox h4 {
    font-size: 2rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempHbox .productTempSizeGuide {
    font-size: 1.4rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempHbox .productTempSizeGuide img {
    width: 1.6rem;
    height: 1.6rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li .sizeLabel span {
    padding: 0.8rem 1.5rem;
    width: 5rem;
    height: 3.5rem;
    font-size: 1.4rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li.unavailable::after {
    font-size: 1rem;
    bottom: -1.5rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .btnProductTempCart {
    height: 4.5rem;
    padding: 0 4rem;
    margin: 1rem 0 2.5rem 0;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .btnProductTempCart .btnProductTempCartText {
    font-size: 1.8rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempDescription {
    line-height: 2.5rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempDescriptionList li {
    padding-left: 2.5rem;
    margin-bottom: 1.2rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempDescriptionList li::before {
    width: 2rem;
    height: 2rem;
  }
  .product-page .sizeGuideModal .modalContent {
    max-width: 85%;
    padding: 1rem;
  }
  .product-page .galleryMainImage {
    min-height: 200px;
    margin-top: 1rem;
  }
  .product-page .galleryMainImage img {
    max-height: 85vh;
  }
  .product-page .galleryThumbnails {
    gap: 4px;
  }
  .product-page .galleryThumbnails img {
    width: 4rem;
    height: 5rem;
  }
  .product-page .galleryPrev,
  .product-page .galleryNext {
    padding: 0.6rem;
    font-size: 16px;
    margin-top: -40px;
  }
  .product-page .closeGalleryModal {
    top: -1rem;
    right: 0.8rem;
  }
}
/* Extra small phones (less than 400px) */
@media (max-width: 399.98px) {
  .product-page .productTempMainContent .productTempContainer .productTempImgBox {
    gap: 0.4rem; /* Minimal gap for very small screens */
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .productTempSizes li .sizeLabel span {
    padding: 0.6rem 1.2rem;
    width: 4.5rem;
    height: 3.5rem;
    font-size: 1.3rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .btnProductTempCart {
    height: 4rem;
    padding: 0 3rem;
  }
  .product-page .productTempMainContent .productTempContainer .productTempDetailsBox .btnProductTempCart .btnProductTempCartText {
    font-size: 1.6rem;
  }
  .product-page .sizeGuideModal .modalContent {
    max-width: 90%;
  }
}
.contact-page h1 {
  margin: 9rem 0 4rem 0;
  text-align: center;
}
.contact-page .infoContact {
  grid-template-columns: 1fr 0.7fr;
  align-content: center;
  justify-items: center;
  gap: 2rem;
  margin-bottom: 5rem;
  font-size: 2rem;
  color: #b3b2b2;
}
.contact-page .infoContact img {
  width: 80%;
  -o-object-fit: cover;
     object-fit: cover;
  background: none;
  filter: brightness(0) saturate(100%) invert(28%) sepia(65%) saturate(4315%) hue-rotate(341deg) brightness(81%) contrast(111%);
}
.contact-page .infoContact img:hover {
  transform: scale(1.05);
}
.contact-page .infoContact .basicInfoContact {
  text-align: start;
  align-items: center;
  grid-template-columns: 0.2fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
}
.contact-page .infoContact .basicInfoContact a {
  color: #b3b2b2;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
.contact-page .infoContact .basicInfoContact a:hover {
  color: #d42425;
  transform: scale(1.05);
}
.contact-page .infoContact .socialInfoContact {
  gap: 2rem;
  color: #b3b2b2;
}
.contact-page .infoContact .socialInfoContact a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #b3b2b2;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
.contact-page .infoContact .socialInfoContact a:hover {
  color: #d42425;
  transform: scale(1.05);
}
.contact-page .infoContact .socialInfoContact img {
  width: 5rem;
  height: 5rem;
  -o-object-fit: cover;
     object-fit: cover;
  background: none;
  filter: brightness(0) saturate(100%) invert(28%) sepia(65%) saturate(4315%) hue-rotate(341deg) brightness(81%) contrast(111%);
}
.contact-page .infoContact .socialInfoContact img:hover {
  transform: scale(1.05);
}
.contact-page .containerForm {
  padding: 4rem;
}
.contact-page .containerForm .formContact {
  border: solid 2px #d42425;
  border-radius: 11px;
  text-align: center;
  padding: 4rem;
  background-color: #000;
  width: 80%;
  margin: 0 auto;
  animation: fadeIn 0.5s ease-out;
  background: linear-gradient(rgba(17, 17, 17, 0.85), rgba(51, 51, 51, 0.6)), url("/img/SerbianFlag1.png") center/cover no-repeat;
}
.contact-page .containerForm .formContact h2 {
  color: #ac1e20;
  font-size: 3rem;
  background: transparent;
  padding-bottom: 3rem;
}
.contact-page .containerForm .formContact form {
  background: transparent;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.contact-page .containerForm .formContact form input::-moz-placeholder, .contact-page .containerForm .formContact form textarea::-moz-placeholder {
  color: rgba(255, 114, 140, 0.635);
  opacity: 1;
}
.contact-page .containerForm .formContact form input::placeholder,
.contact-page .containerForm .formContact form textarea::placeholder {
  color: rgba(255, 114, 140, 0.635);
  opacity: 1;
}
.contact-page .containerForm .formContact form div {
  background: transparent;
  width: 100%;
}
.contact-page .containerForm .formContact form label {
  color: #b3b2b2;
  font-size: 2rem;
  text-align: start;
  background: none;
  width: 100%;
}
.contact-page .containerForm .formContact form input {
  font-family: "Monomakh", sans-serif;
  margin: 2rem;
  width: 90%;
  background-color: #333;
  color: #b3b2b2;
  border: solid 2px #ac1e20;
  border-radius: 11px;
  padding: 1rem;
  font-size: 2rem;
}
.contact-page .containerForm .formContact form input:focus {
  outline: none;
  border: solid 2px #d42425;
  box-shadow: 0 0 5px #d42425;
}
.contact-page .containerForm .formContact form .messageContact {
  grid-column: 1/-1;
}
.contact-page .containerForm .formContact form .messageContact textarea {
  font-family: "Monomakh", sans-serif;
  width: 100%;
  height: 20rem;
  border: solid 2px #ac1e20;
  background-color: #333;
  border-radius: 11px;
  padding: 2rem;
  margin-top: 2rem;
  color: #d42425;
  font-size: 2rem;
  resize: none;
  overflow-y: auto;
}
.contact-page .containerForm .formContact form .messageContact textarea:focus {
  outline: none;
  box-shadow: 0 0 0.5rem #d42425;
}
.contact-page .containerForm .formContact form .btnContact {
  background-color: #ac1e20;
  color: #c6c5c5;
  font-size: 2rem;
  padding: 1rem 2rem;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  grid-column: 1/-1;
  width: 20%;
  margin: 2rem auto 0;
}
.contact-page .containerForm .formContact form .btnContact:hover {
  background-color: #7e1416;
  transform: scale(1.05);
}
.contact-page .containerForm .formContact form .btnContact:focus {
  outline: 2px solid #7e1416;
  outline-offset: 2px;
}
.contact-page .containerForm .formContact form .btnContact:active {
  background-color: #7e1416;
  transform: scale(0.95);
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.contact-page .containerForm .formSubmitMessage {
  color: #4caf50;
  background: transparent;
  font-size: 2rem;
  text-align: center;
  margin-top: 3rem;
}

/* ========== CONTACT PAGE MEDIA QUERIES ========== */
/* Large tablets (less than 992px) */
@media (max-width: 991.98px) {
  .contact-page h1 {
    margin: 7rem 0 3rem 0;
    font-size: 4.5rem;
  }
  .contact-page .infoContact {
    grid-template-columns: 1fr 0.7fr;
    font-size: 1.8rem;
    margin-bottom: 4rem;
  }
  .contact-page .infoContact img {
    width: 70%;
  }
  .contact-page .infoContact .socialInfoContact img {
    width: 4.5rem;
    height: 4.5rem;
  }
  .contact-page .containerForm {
    padding: 3rem;
  }
  .contact-page .containerForm .formContact {
    width: 90%;
    padding: 3rem;
  }
  .contact-page .containerForm .formContact h2 {
    font-size: 2.5rem;
    padding-bottom: 2rem;
  }
  .contact-page .containerForm .formContact form {
    gap: 2rem;
  }
  .contact-page .containerForm .formContact form label {
    font-size: 1.8rem;
  }
  .contact-page .containerForm .formContact form input {
    font-size: 1.8rem;
    padding: 0.8rem;
    margin: 1.5rem;
  }
  .contact-page .containerForm .formContact form .messageContact textarea {
    height: 18rem;
    font-size: 1.8rem;
  }
  .contact-page .containerForm .formContact form .btnContact {
    font-size: 1.8rem;
    width: 25%;
  }
}
/* Small tablets and large phones (less than 768px) */
@media (max-width: 767.98px) {
  .contact-page h1 {
    margin: 6rem 0 2.5rem 0;
    font-size: 4rem;
  }
  .contact-page .infoContact {
    font-size: 1.6rem;
    grid-template-columns: 1fr 0.7fr;
    text-align: center;
  }
  .contact-page .infoContact .basicInfoContact {
    grid-template-columns: 0.15fr 1fr;
    margin-left: 3rem;
  }
  .contact-page .infoContact .basicInfoContact a {
    text-align: end;
  }
  .contact-page .infoContact img {
    width: 80%;
  }
  .contact-page .infoContact .socialInfoContact img {
    width: 4rem;
    height: 4rem;
  }
  .contact-page .containerForm {
    padding: 2rem;
  }
  .contact-page .containerForm .formContact {
    width: 95%;
    padding: 2.5rem;
  }
  .contact-page .containerForm .formContact h2 {
    font-size: 2.2rem;
  }
  .contact-page .containerForm .formContact form {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .contact-page .containerForm .formContact form label {
    font-size: 1.6rem;
  }
  .contact-page .containerForm .formContact form input {
    margin: 1rem;
    font-size: 1.6rem;
  }
  .contact-page .containerForm .formContact form .messageContact textarea {
    height: 15rem;
    font-size: 1.6rem;
    padding: 1.5rem;
  }
  .contact-page .containerForm .formContact form .btnContact {
    width: 35%;
    font-size: 1.6rem;
  }
}
/* Small phones (less than 576px) */
@media (max-width: 575.98px) {
  .contact-page h1 {
    margin: 5rem 0 2rem 0;
    font-size: 3.5rem;
  }
  .contact-page .infoContact {
    font-size: 1.4rem;
    margin-bottom: 3rem;
    margin: 0 2rem;
    grid-template-columns: 1fr 0.6fr;
  }
  .contact-page .infoContact img {
    width: 2.5rem;
  }
  .contact-page .infoContact .basicInfoContact {
    grid-template-columns: 0.5fr 1fr;
    margin: 0;
    gap: 0.5rem;
    font-size: 1.4rem;
  }
  .contact-page .infoContact .basicInfoContact a {
    text-align: end;
  }
  .contact-page .infoContact .socialInfoContact img {
    width: 3.5rem;
    height: 3.5rem;
    margin-right: 0rem;
  }
  .contact-page .containerForm {
    padding: 1.5rem;
  }
  .contact-page .containerForm .formContact {
    padding: 2rem;
  }
  .contact-page .containerForm .formContact h2 {
    font-size: 2rem;
    padding-bottom: 1.5rem;
  }
  .contact-page .containerForm .formContact form label {
    font-size: 1.4rem;
  }
  .contact-page .containerForm .formContact form input {
    font-size: 1.4rem;
    padding: 0.6rem;
    margin: 0.8rem;
  }
  .contact-page .containerForm .formContact form .messageContact textarea {
    height: 12rem;
    font-size: 1.4rem;
    padding: 1rem;
    width: 90%;
  }
  .contact-page .containerForm .formContact form .btnContact {
    width: 45%;
    font-size: 1.4rem;
    padding: 0.8rem 1.5rem;
  }
  .contact-page .containerForm .formSubmitMessage {
    font-size: 1.6rem;
  }
}
/* Extra small phones (less than 400px) */
@media (max-width: 399.98px) {
  .contact-page h1 {
    margin: 4rem 0 1.5rem 0;
    font-size: 3rem;
  }
  .contact-page .infoContact {
    font-size: 1rem;
  }
  .contact-page .infoContact .socialInfoContact img {
    width: 3rem;
    height: 3rem;
  }
  .contact-page .containerForm .formContact form .btnContact {
    width: 55%;
  }
}
.cart-page {
  min-height: 100vh;
  /* Checkout Modal Styles */
}
.cart-page h1 {
  margin-top: 9rem;
  margin-bottom: 4rem;
  text-align: center;
  font-size: 5rem;
}
.cart-page .cartContainer {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 0 auto;
}
.cart-page .cartContainer .cartHeader {
  color: #c6c5c5;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cart-page .cartContainer .cartColumnName {
  display: grid;
  padding: 0 0 1rem 6rem;
  grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr;
  font-size: 2rem;
  gap: 2rem;
}
.cart-page .cartContainer .cartItems {
  display: grid;
  margin-bottom: 3rem;
  padding: 3rem 0 0 0;
}
.cart-page .cartContainer .cartItem:last-child {
  border-bottom: 1px solid #7e1416;
}
.cart-page .cartContainer .cartItem {
  background-color: #000;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 1rem;
  align-items: center;
  border-top: 1px solid #7e1416;
  justify-content: center;
  align-items: center;
}
.cart-page .cartContainer .cartItem div {
  background: #000;
}
.cart-page .cartContainer .cartItem .cartItemProductInfo {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 3rem;
  text-align: center;
  justify-items: start;
}
.cart-page .cartContainer .cartItem .cartItemQuantity {
  display: flex;
  justify-content: flex-start;
  width: 70%;
  border-radius: 11px;
}
.cart-page .cartContainer .cartItem .cartItemQuantity button {
  width: 3.5rem;
  height: 3.5rem;
  border-top: 1px solid #ac1e20;
  border-bottom: 1px solid #ac1e20;
  background: none;
  cursor: pointer;
  color: #c6c5c5;
  font-size: 2rem;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(172, 30, 32, 0.5);
}
.cart-page .cartContainer .cartItem .cartItemQuantity button:hover {
  color: #6b6b6b;
}
.cart-page .cartContainer .cartItem .cartItemQuantity button:active {
  transform: scale(0.9);
}
.cart-page .cartContainer .cartItem .cartItemQuantity .cartQuantityIncBtn {
  border-radius: 11px 0 0 11px;
  border-left: 1px solid #ac1e20;
}
.cart-page .cartContainer .cartItem .cartItemQuantity .cartQuantityDecBtn {
  border-radius: 0 11px 11px 0;
  border-right: 1px solid #ac1e20;
}
.cart-page .cartContainer .cartItem .categoryCart {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
}
.cart-page .cartContainer .cartItem img {
  display: flex;
  width: 70%;
  height: auto;
  grid-row: span 4;
  margin: 0 auto;
}
.cart-page .cartContainer .cartItem .categoryCart {
  color: #f3b1b6;
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
}
.cart-page .cartContainer .cartItem h3 {
  color: #c6c5c5;
  margin: 0 0 0.5rem 0;
  font-size: 2.5rem;
  background: none;
}
.cart-page .cartContainer .cartItem .cartPrice {
  color: #b3b2b2;
  font-size: 2.5rem;
}
.cart-page .cartContainer .cartItem p {
  margin: 0.3rem 0;
  color: #b3b2b2;
  font-size: 2rem;
  background: none;
}
.cart-page .cartContainer .cartItem label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #c6c5c5;
  font-size: 2rem;
  background: none;
  box-shadow: 0 0 10px rgba(172, 30, 32, 0.5);
}
.cart-page .cartContainer .cartItem label input[type=number] {
  width: 3.5rem;
  height: 3.5rem;
  background: #000;
  border: 1px solid #ac1e20;
  color: #c6c5c5;
  padding: 0.5rem;
  width: 60px;
  text-align: center;
  font-size: 2rem;
  -moz-appearance: textfield;
}
.cart-page .cartContainer .cartItem label input[type=number]::-webkit-outer-spin-button, .cart-page .cartContainer .cartItem label input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart-page .cartContainer .cartItem label input[type=number]:focus {
  outline: none;
  border-color: #d42425;
  box-shadow: 0 0 0 2px rgba(212, 36, 36, 0.5);
}
.cart-page .cartContainer .cartItem .cartItemRemove {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  justify-content: center;
  width: 100%;
}
.cart-page .cartContainer .cartItem .cartItemRemove .cartProductTotal {
  color: #d42425;
  font-size: 3rem;
}
.cart-page .cartContainer .cartItem .cartItemRemove .cartItemRemoveBtn {
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 25%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.cart-page .cartContainer .cartItem .cartItemRemove .cartItemRemoveBtn:hover {
  background-color: transparent;
}
.cart-page .cartContainer .cartItem .cartItemRemove .cartItemRemoveBtn img {
  width: 80%;
  background-color: transparent;
  transition: all 0.1s ease;
  padding: 0.5rem;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}
.cart-page .cartContainer .cartItem .cartItemRemove .cartItemRemoveBtn img:hover {
  background-color: rgba(126, 20, 22, 0.5);
  transform: scale(1.1);
}
.cart-page .cartContainer .cartItem .cartItemRemove .cartItemRemoveBtn:hover img {
  filter: brightness(0) saturate(100%) invert(5%) sepia(73%) saturate(7364%) hue-rotate(354deg) brightness(118%) contrast(88%);
}
.cart-page .cartContainer .cartItem .cartItemRemove .cartItemRemoveBtn:active img {
  transform: scale(0.9);
}
.cart-page .cartContainer .cartSummary {
  align-self: flex-end;
  background: #000;
  text-align: center;
  padding: 2.5rem 2rem 1rem 2rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 114, 140, 0.635);
  margin-top: 2rem;
  margin-bottom: 9rem;
  box-shadow: 0 2px 10px rgba(126, 20, 22, 0.5);
}
.cart-page .cartContainer .cartSummary p {
  margin-bottom: 0.5rem;
  color: #c6c5c5;
  font-size: 3rem;
  background: none;
}
.cart-page .cartContainer .cartSummary p strong {
  color: #c6c5c5;
  font-size: 3rem;
}
.cart-page .cartContainer .cartSummary button {
  background-color: #ac1e20;
  color: #c6c5c5;
  border: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
  font-size: 2rem;
  width: 100%;
  margin: 1rem 0;
}
.cart-page .cartContainer .cartSummary button:hover {
  background-color: #d42425;
  box-shadow: 0.1rem 0.2rem 2rem rgba(212, 36, 36, 0.5);
  color: #c6c5c5;
}
.cart-page .cartContainer .cartSummary button:active {
  background-color: #7e1416;
  transform: scale(0.97);
  box-shadow: none;
}
.cart-page .emptyCart {
  text-align: center;
  padding: 3rem 0 8rem 0;
  display: none;
}
.cart-page .emptyCart p {
  color: #c6c5c5;
  font-size: 3rem;
  padding-bottom: 5rem;
}
.cart-page .emptyCart a {
  color: #d42425;
  font-weight: bold;
  letter-spacing: 1.5px;
  font-size: 2rem;
  transition: color 0.3s ease;
}
.cart-page .emptyCart a:hover {
  color: #f3b1b6;
  text-decoration: underline;
}
.cart-page .modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0rem;
  width: 100%;
  height: auto;
  background-color: rgba(0, 0, 0, 0.7);
  overflow-y: auto;
  color: #c6c5c5;
}
.cart-page .modal .modalContent {
  background: #222;
  margin: 5% auto;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  border: 1px solid rgba(255, 114, 140, 0.635);
  box-shadow: 0 2px 10px rgba(126, 20, 22, 0.5);
}
.cart-page .modal .modalContent .closeModal {
  position: absolute;
  top: 0rem;
  right: 0.5rem;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #d42425;
}
.cart-page .modal .modalContent h2 {
  margin: 1rem 0;
  font-size: 3rem;
  text-align: center;
  background: none;
}
.cart-page .modal .modalContent .checkoutSummary {
  border-bottom: 1px solid #d42425;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  background: none;
}
.cart-page .modal .modalContent .checkoutSummary h3 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  background: none;
}
.cart-page .modal .modalContent .checkoutSummary #checkoutItems {
  background: none;
}
.cart-page .modal .modalContent .checkoutSummary #checkoutItems .checkoutItem {
  background: none;
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0;
  font-size: 2rem;
}
.cart-page .modal .modalContent .checkoutSummary #checkoutItems .checkoutItem span {
  background: none;
}
.cart-page .modal .modalContent .checkoutSummary .checkoutTotal {
  font-weight: bold;
  margin-top: 1rem;
  text-align: right;
  background: none;
  font-size: 2rem;
}
.cart-page .modal .modalContent .checkoutSummary .checkoutTotal p,
.cart-page .modal .modalContent .checkoutSummary .checkoutTotal span {
  background: none;
}
.cart-page .modal .modalContent .checkoutSummary .checkoutTotal span {
  color: #d42425;
}
.cart-page .modal .modalContent #checkoutForm {
  margin-top: 1.5rem;
  background: none;
}
.cart-page .modal .modalContent #checkoutForm .formGroup {
  margin-bottom: 1rem;
  background: none;
}
.cart-page .modal .modalContent #checkoutForm .formGroup label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  background: none;
  font-size: 1.5rem;
  color: #f3b1b6;
}
.cart-page .modal .modalContent #checkoutForm .formGroup input,
.cart-page .modal .modalContent #checkoutForm .formGroup textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #7e1416;
  border-radius: 4px;
  background: none;
  font-size: 2rem;
  resize: none;
  color: #c6c5c5;
}
.cart-page .modal .modalContent .btn-submit {
  display: flex;
  justify-content: center;
  background-color: #d42425;
  color: #c6c5c5;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.5rem;
  width: 40%;
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.3s ease;
}
.cart-page .modal .modalContent .btn-submit:hover {
  background-color: #ac1e20;
}

/* ========== CART PAGE MEDIA QUERIES ========== */
/* Large tablets (less than 992px) */
@media (max-width: 991.98px) {
  .cart-page h1 {
    margin-top: 7rem;
    font-size: 4rem;
  }
  .cart-page .cartContainer {
    width: 100%;
  }
  .cart-page .cartContainer .cartColumnName {
    display: none;
  }
  .cart-page .cartContainer .cartItem {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
    padding: 1.5rem 1rem;
  }
  .cart-page .cartContainer .cartItem .cartItemImage img {
    width: 70%;
  }
  .cart-page .cartContainer .cartItem .cartItemProductInfo h3 {
    font-size: 2rem;
  }
  .cart-page .cartContainer .cartItem .cartItemProductInfo p {
    font-size: 1.6rem;
  }
  .cart-page .cartContainer .cartItem .cartPrice {
    font-size: 2rem;
  }
  .cart-page .cartContainer .cartItem .cartItemQuantity {
    width: 100%;
  }
  .cart-page .cartContainer .cartItem .cartItemQuantity button {
    width: 3rem;
    height: 3rem;
    font-size: 1.6rem;
  }
  .cart-page .cartContainer .cartItem .cartItemQuantity input[type=number] {
    width: 3rem;
    height: 3rem;
    font-size: 1.6rem;
  }
  .cart-page .cartContainer .cartItem .cartItemRemove .cartProductTotal {
    font-size: 2rem;
  }
  .cart-page .cartContainer .cartItem .cartItemRemoveBtn img {
    width: 2.5rem;
  }
  .cart-page .cartContainer .cartSummary {
    padding: 1.5rem;
  }
  .cart-page .cartContainer .cartSummary p {
    font-size: 2.2rem;
  }
  .cart-page .cartContainer .cartSummary button {
    font-size: 1.8rem;
    padding: 1rem 1.5rem;
  }
  .cart-page .emptyCart p {
    font-size: 2.2rem;
  }
  .cart-page .emptyCart a {
    font-size: 1.8rem;
  }
  .cart-page .modal .modalContent {
    width: 85%;
    padding: 1.5rem;
  }
  .cart-page .modal .modalContent h2 {
    font-size: 2.2rem;
  }
  .cart-page .modal .modalContent .checkoutSummary h3 {
    font-size: 2rem;
  }
  .cart-page .modal .modalContent #checkoutItems .checkoutItem {
    font-size: 1.6rem;
  }
  .cart-page .modal .modalContent .btn-submit {
    display: flex;
    width: 50%;
    font-size: 1.6rem;
    justify-content: center;
  }
}
/* Small tablets and large phones (less than 768px) */
@media (max-width: 767.98px) {
  .cart-page h1 {
    margin-top: 7rem;
    margin-bottom: 0rem;
    font-size: 3.5rem;
  }
  .cart-page .cartContainer {
    width: 50%;
  }
  .cart-page .cartContainer .cartColumnName {
    display: none;
  }
  .cart-page .cartContainer .cartItem {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "image info" "price quantity" "remove remove";
    gap: 1.5rem;
    padding: 3rem;
    border: 1px solid #ac1e20;
    margin-bottom: 2rem;
    border-radius: 8px;
  }
  .cart-page .cartContainer .cartItem .cartItemImage {
    grid-area: image;
  }
  .cart-page .cartContainer .cartItem .cartItemImage img {
    margin: 0rem;
    width: 70%;
    max-width: 10rem;
  }
  .cart-page .cartContainer .cartItem .cartItemProductInfo {
    grid-area: info;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .cart-page .cartContainer .cartItem .cartItemProductInfo h3 {
    font-size: 2rem;
  }
  .cart-page .cartContainer .cartItem .cartItemPrice {
    grid-area: price;
    text-align: left;
  }
  .cart-page .cartContainer .cartItem .cartItemQuantity {
    grid-area: quantity;
    justify-content: right;
    width: 100%;
    margin: 0 auto;
  }
  .cart-page .cartContainer .cartItem .cartItemRemove {
    grid-area: remove;
    flex-direction: row;
    justify-content: space-between;
    gap: 1.5rem;
  }
  .cart-page .cartContainer .cartItem .cartItemRemove .cartProductTotal {
    justify-content: center;
    font-size: 2rem;
  }
  .cart-page .cartContainer .cartItem .cartItemRemove .cartItemRemoveBtn img {
    width: 4rem;
  }
  .cart-page .cartContainer .cartSummary {
    width: 100%;
  }
  .cart-page .cartContainer .cartSummary p {
    font-size: 2rem;
  }
  .cart-page .cartContainer .cartSummary button {
    font-size: 1.6rem;
  }
  .cart-page .emptyCart p {
    font-size: 2rem;
  }
  .cart-page .emptyCart a {
    font-size: 1.6rem;
  }
  .cart-page .modal .modalContent {
    width: 80%;
  }
  .cart-page .modal .modalContent h2 {
    font-size: 2rem;
  }
  .cart-page .modal .modalContent .btn-submit {
    width: 40%;
  }
}
/* Small phones (less than 576px) */
@media (max-width: 575.98px) {
  .cart-page h1 {
    margin-top: 5rem;
    font-size: 3rem;
  }
  .cart-page .cartContainer {
    width: 70%;
  }
  .cart-page .cartContainer .cartItem {
    grid-template-columns: 1fr;
    grid-template-areas: "image" "info" "price" "quantity" "remove";
    gap: 1rem;
    padding: 1rem;
  }
  .cart-page .cartContainer .cartItem .cartItemImage img {
    width: 70%;
    margin: 0 auto;
  }
  .cart-page .cartContainer .cartItem .cartItemQuantity {
    display: flex;
    justify-content: center;
  }
  .cart-page .cartContainer .cartItem .cartItemRemove {
    grid-area: remove;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
  }
  .cart-page .cartContainer .cartItem .cartItemPrice {
    text-align: center;
    margin: 0.5rem 0;
  }
  .cart-page .cartContainer .cartSummary p {
    font-size: 1.8rem;
  }
  .cart-page .cartContainer .cartSummary button {
    padding: 0.8rem;
    font-size: 1.5rem;
  }
  .cart-page .emptyCart p {
    font-size: 1.8rem;
  }
  .cart-page .emptyCart a {
    font-size: 1.5rem;
  }
  .cart-page .modal .modalContent {
    padding: 1rem;
  }
  .cart-page .modal .modalContent h2 {
    font-size: 1.6rem;
  }
  .cart-page .modal .modalContent .checkoutSummary h3 {
    font-size: 1.4rem;
  }
  .cart-page .modal .modalContent .checkoutItem span {
    font-size: 1.4rem;
  }
  .cart-page .modal .modalContent .checkoutTotal p {
    font-size: 1.4rem;
  }
  .cart-page .modal .modalContent .checkoutForm .formGroup label {
    font-size: 1.4rem;
  }
  .cart-page .modal .modalContent .btn-submit {
    width: 70%;
    font-size: 1.4rem;
  }
}
/* Extra small phones (less than 400px) */
@media (max-width: 399.98px) {
  .cart-page .cartContainer .cartItem .cartItemQuantity button,
  .cart-page .cartContainer .cartItem .cartItemQuantity input[type=number] {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.4rem;
  }
  .cart-page .cartContainer .cartSummary p {
    font-size: 1.6rem;
  }
  .cart-page .emptyCart p {
    font-size: 1.6rem;
  }
  .cart-page .modal .modalContent .btn-submit {
    width: 80%;
  }
}
/* ========== BASE NAVIGATION STYLES ========== */
.header {
  position: relative;
}

.mainNav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 500;
  background-color: #111;
  box-shadow: 0 3px 5px rgba(212, 36, 36, 0.5);
}

.mainNavListTemplate {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 2rem;
  height: 6rem;
  gap: 2rem;
}
.mainNavListTemplate .mainNavLeft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}
.mainNavListTemplate .mainNavLeft .headerLogo {
  display: flex;
  align-items: center;
}
.mainNavListTemplate .mainNavLeft .headerLogo .headerImg {
  height: 3rem;
}
.mainNavListTemplate .mainNavLeft a:not(.headerLogo a) {
  padding: 1rem 1.5rem;
  font-weight: 800;
  font-size: 1.8rem;
  text-decoration: none;
  color: #d42425;
  transition: all 0.3s;
  border-radius: 11px;
}
.mainNavListTemplate .mainNavLeft a:not(.headerLogo a):hover {
  color: #000;
  background-color: #d42425;
  opacity: 70%;
}
.mainNavListTemplate .mainNavCenter {
  display: flex;
  justify-content: center;
}
.mainNavListTemplate .mainNavCenter .navCenterLogo img {
  height: 3rem;
  width: auto;
  max-width: 200px;
  transition: transform 0.3s;
}
.mainNavListTemplate .mainNavCenter .navCenterLogo img:hover {
  transform: scale(1.05);
}
.mainNavListTemplate .mainNavRight {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}
.mainNavListTemplate .mainNavRight .mainNavListShop {
  padding: 1rem 1.5rem;
  font-weight: 800;
  font-size: 1.8rem;
  text-decoration: none;
  color: #111;
  transition: all 0.3s;
  border-radius: 11px;
  background-color: #d42425;
  box-shadow: 0 0 1rem rgba(212, 36, 36, 0.5);
}
.mainNavListTemplate .mainNavRight .mainNavListShop:hover {
  color: #000;
  background-color: #d42425;
  box-shadow: 0 0 1rem rgba(255, 114, 140, 0.635);
  opacity: 70%;
}
.mainNavListTemplate .mainNavRight .btnCart {
  padding: 1rem;
  position: relative;
  transition: all 0.3s;
}
.mainNavListTemplate .mainNavRight .btnCart:hover {
  background-color: #d42425;
  opacity: 70%;
  border-radius: 11px;
}
.mainNavListTemplate .mainNavRight .btnCart .cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: #ac1e20;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* ========== MOBILE NAVIGATION ========== */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1rem;
  z-index: 999;
}
.mobile-nav-toggle svg {
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  color: #d42425;
}
.mobile-nav-toggle .close-icon {
  display: none;
}

.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 997;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-nav-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background-color: #111;
  z-index: 998;
  transition: all 0.3s ease;
  overflow-y: auto;
  padding: 2rem;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}
.mobile-nav-menu .mobile-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid #ac1e20;
  margin-bottom: 2rem;
}
.mobile-nav-menu .mobile-nav-header .mobile-nav-logo {
  margin: auto;
}
.mobile-nav-menu .mobile-nav-header .mobile-nav-logo img {
  height: 3rem;
  width: auto;
  max-width: 180px;
}
.mobile-nav-menu .mobile-nav-header .mobile-nav-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.mobile-nav-menu .mobile-nav-header .mobile-nav-close svg {
  width: 2rem;
  height: 2rem;
  fill: #d42425;
}
.mobile-nav-menu .mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #ac1e20;
}
.mobile-nav-menu .mobile-nav-list li {
  margin-bottom: 1.5rem;
}
.mobile-nav-menu .mobile-nav-list li a {
  display: block;
  padding: 1rem;
  font-size: 1.8rem;
  color: #d42425;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s;
}
.mobile-nav-menu .mobile-nav-list li a:hover {
  background-color: rgba(212, 36, 37, 0.1);
}
.mobile-nav-menu .mobile-nav-list li a.active {
  background-color: #d42425;
  color: white;
}
.mobile-nav-menu .mobile-nav-cart {
  display: flex;
  align-items: center;
  padding: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
}
.mobile-nav-menu .mobile-nav-cart img {
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 1rem;
}
.mobile-nav-menu .mobile-nav-cart span {
  font-size: 1.6rem;
  color: #d42425;
}

/* Active state for mobile menu */
.mobile-nav-active .mobile-nav-overlay {
  opacity: 1;
  visibility: visible;
}
.mobile-nav-active .mobile-nav-menu {
  left: 0;
}
.mobile-nav-active .mobile-nav-toggle .menu-icon {
  display: none;
}
.mobile-nav-active .mobile-nav-toggle .close-icon {
  display: block;
}

/* ========== MEDIA QUERIES ========== */
@media (max-width: 991.98px) {
  /* Hide desktop navigation elements on mobile */
  .mainNavListTemplate {
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 0 1rem;
  }
  .mainNavListTemplate .mainNavLeft .mainNavListHome,
  .mainNavListTemplate .mainNavLeft .mainNavListAbout,
  .mainNavListTemplate .mainNavLeft .mainNavListBlog,
  .mainNavListTemplate .mainNavLeft .mainNavListContact {
    display: none;
  }
  .mainNavListTemplate .headerImg {
    display: none;
  }
  .mainNavListTemplate .mainNavCenter {
    display: none;
  }
  .mainNavListTemplate .mainNavRight .mainNavListShop {
    display: none;
  }
  /* Show mobile toggle button */
  .mobile-nav-toggle {
    display: block;
  }
}
@media (min-width: 992px) {
  /* Ensure desktop navigation is properly displayed */
  .mobile-nav-toggle,
  .mobile-nav-overlay,
  .mobile-nav-menu {
    display: none !important;
  }
}
/*
--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heights
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6
Large: 1.8

- Letter spacing
-0.5px
0.75px

--- 05 SHADOWS

0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

--- 06 BORDER-RADIUS

Default: 9px
Medium: 11px

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/
.productArticles {
  background: transparent;
  list-style: none;
  padding: 0 3rem 0 1rem;
  justify-content: center;
}

.productItem {
  position: relative;
  display: block;
  background: transparent;
  width: 100%;
  height: 0;
  border-radius: 11px;
  cursor: pointer;
  transition: all 120ms;
  overflow: hidden;
  box-shadow: 0px 1px 13px rgba(212, 36, 36, 0.5);
  text-decoration: none;
  padding-bottom: 125%;
}

.productItem:active {
  transform: scale(0.98);
}

.productItem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0px 0px 25px 5px rgba(255, 255, 255, 0.164);
  z-index: 1;
}

.productItem::after {
  content: "Изабери величину";
  position: absolute;
  bottom: -50%;
  left: 0;
  background-color: #222;
  opacity: 90%;
  width: 100%;
  height: 10%;
  color: #f3b1b6;
  line-height: 5rem;
  font-size: 3rem;
  z-index: 2;
  transition: all 0.4s ease-in;
}

.productItem:hover::after {
  bottom: 0;
}

.productItem img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transition: all 0.4s ease-in;
  -o-object-fit: cover;
     object-fit: cover;
}

.productItem:hover img {
  top: 0;
  left: 0;
  transform: scale(1.05);
  filter: brightness(0.5);
}

.productDetails {
  position: absolute;
  top: 5%;
  left: -100%;
  background: transparent;
  color: #b3b2b2;
  transition: all 0.4s ease-in;
  z-index: 3;
}
.productDetails .productDetailsText {
  background: transparent;
  text-align: start;
}
.productDetails span {
  font-size: 2.6rem;
  font-weight: 600;
  background: transparent;
  text-shadow: 0.1rem 0.2rem 1rem rgba(0, 0, 0, 0.695);
}
.productDetails p {
  margin-top: 2rem;
  background: transparent;
  font-size: 2.2rem;
  font-weight: bold;
  text-shadow: 0.1rem 0.2rem 1rem rgba(0, 0, 0, 0.695);
}
.productDetails .productName {
  color: #f3b1b6;
  font-size: 2.5rem;
}

.productItem:hover .productDetails {
  background: transparent;
  top: 5%;
  left: 5%;
}

.productBadge {
  position: absolute;
  top: -0.5rem;
  right: 0;
  z-index: 5;
  width: 20%;
  height: 20%;
  pointer-events: none;
  background: transparent;
}
.productBadge img {
  background: transparent;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3)) brightness(1.1);
  transition: none !important;
}

.productItem:hover .productBadge img {
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3)) brightness(1.1) !important;
  transform: none !important;
}

/* Cart styles */
.cart-added-message {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ac1e20;
  color: #c6c5c5;
  padding: 2rem 4rem;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
  font-size: 2rem;
  font-weight: bold;
}

.cart-added-message.show {
  opacity: 1;
}

.cart-count {
  display: none;
  background-color: #d00;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  position: absolute;
  bottom: 1rem;
  right: 2rem;
}

/* ========== PRODUCT CARDS & CART MEDIA QUERIES ========== */
/* Large tablets (less than 992px) */
@media (max-width: 991.98px) {
  .productArticles {
    gap: 3rem;
    padding: 0 2rem;
  }
  .productItem::after {
    display: none;
  }
  .productDetails {
    left: -200%;
  }
  .productDetails span {
    font-size: 2rem;
  }
  .productDetails p {
    font-size: 1.8rem;
  }
  .productDetails .productName {
    font-size: 2rem;
  }
  .footerContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footerContainer .footerLogo {
    width: 60%;
  }
  .footerLinks {
    display: none;
  }
  .footerContact {
    display: none;
  }
}
/* Small tablets and large phones (less than 768px) */
@media (max-width: 767.98px) {
  .productArticles {
    gap: 2.5rem;
    padding: 0 1.5rem;
  }
  .productItem::after {
    font-size: 1.8rem;
    line-height: 3rem;
  }
  .productDetails span {
    font-size: 1.6rem;
  }
  .productDetails p {
    font-size: 1.4rem;
    margin-top: 1rem;
  }
  .productDetails .productName {
    font-size: 1.6rem;
  }
}
/* Small phones (less than 576px) */
@media (max-width: 575.98px) {
  .productArticles {
    gap: 2rem;
    padding: 0 1rem;
  }
  .productItem::after {
    font-size: 1.4rem;
    line-height: 2.5rem;
    height: 12%;
  }
  .productDetails span {
    font-size: 1.4rem;
  }
  .productDetails p {
    font-size: 1.2rem;
  }
  .productDetails .productName {
    font-size: 1.4rem;
  }
  .cart-added-message {
    position: fixed;
    text-align: center;
    bottom: 2rem;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    background-color: #ac1e20;
    color: #c6c5c5;
    padding: 1rem 3rem;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
    font-size: 1.5rem;
    font-weight: bold;
  }
}
/* Extra small phones (less than 400px) */
@media (max-width: 399.98px) {
  .productArticles {
    gap: 1.5rem;
    padding: 0 0.5rem;
  }
  .productDetails span {
    font-size: 1.3rem;
  }
  .productDetails p {
    font-size: 1.1rem;
  }
  .productDetails .productName {
    font-size: 1.3rem;
  }
}