/* Google Fonts loaded via index.html with preconnect for performance */

/* Marquee animation for trustedBy section */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

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

html {
  font-size: calc(100vw / (1920 / 10));
  max-width: 100%;
}

body {
  position: relative;
  margin: 0;
  overflow-x: hidden;
}

@media only screen and (max-width: 1440px) {
  html {
    font-size: calc(100vw / (1440 / 10));
  }
}

@media only screen and (max-width: 1200px) {
  html {
    font-size: calc(100vw / (1200 / 10));
  }
}

@media only screen and (max-width: 1024px) {
  html {
    font-size: calc(100vw / (1024 / 10));
  }
}

@media only screen and (max-width: 768px) {
  html {
    font-size: calc(100vw / (768 / 10));
  }
}

@media only screen and (max-width: 480px) {
  html {
    font-size: calc(100vw / (480 / 10));
  }
}

body {
  font-family: "Prompt", sans-serif;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  width: 100%;
  padding: 0 6.4rem;
}

.header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1500;
  border-bottom: 1px solid #e6e6e6;
  background: #fff;
  transition: box-shadow 160ms ease;
  will-change: box-shadow;
}

.header.fixed {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.headerTop {
  width: 100%;
  height: 6.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #121212;
  color: #fff;
  overflow: hidden;
  transition: height 220ms ease, opacity 180ms ease;
  will-change: height, opacity;
}

.header.fixed .headerTop {
  height: 0;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .header {
    transition: none;
  }

  .headerTop {
    transition: none;
  }

  .headerNavbar,
  .navbarSearch a img,
  .navbarSearchWrapper {
    transition: none;
  }

  .headerNavbarLinks {
    transition: none;
  }
}

.headerTop a,
.headerTop p {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.headerTop a:hover {
  color: rgb(204, 0, 0);
}

.headerNavbar {
  width: 100%;
  padding-top: 2.6rem;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
  position: relative;
  background: #fff;
}

.navbarSearch {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.navbarSearch a {
  flex-shrink: 0;
}

.navbarSearch a img {
  width: 24rem;
  height: auto;
}

.navbarSearchWrapper {
  flex: 1;
  max-width: 101rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #e6e6e6;
  border-radius: 2.4rem;
  padding: 1.2rem 2.4rem;
}

.navbarSearchWrapper input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  color: rgb(7, 7, 7);
  font-size: 1.6rem;
  line-height: 100%;
  font-weight: 400;
  background: #e6e6e6;
}

.navbarBacketWrapper {
  display: flex;
  align-items: center;
  gap: 0rem;
}

.navbarBacketWrapper button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.navbarBacketWrapper button:hover {
  background: #f0f0f0;
}

.navbarBacketWrapper button svg {
  width: 3.6rem;
  height: 3.6rem;
}

.navbarBacketWrapper button:nth-child(2) svg {
  width: 2.6rem;
  height: 2.6rem;
}

.navbarBacketWrapper button:nth-child(1) svg {
  color: rgb(204, 0, 0);
}

.navbarBacketWrapper button:hover svg {
  color: #121212;
}

.headerNavbarLinks {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2.4rem;
  overflow: hidden;
  max-height: 6rem;
  opacity: 1;
  transform: translateY(0);
  transform-origin: top;
  transition: max-height 220ms ease, opacity 180ms ease, transform 220ms ease;
  will-change: max-height, opacity, transform;
  overflow-anchor: none;
}

.headerNavbarLinks.linksHidden {
  max-height: 0;
  opacity: 0;
  transform: translateY(-0.6rem);
  pointer-events: none;
}

.headerNavbarLinks a {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  color: rgb(7, 7, 7);
  font-size: 1.6rem;
  line-height: 1.9rem;
  position: relative;
  padding-bottom: 0.8rem;
}

.headerNavbarLinks a::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: rgb(7, 7, 7);
}

.headerNavbarLinks a:hover::after {
  width: 100%;
}

.headerNavbarLinks a svg {
  width: 2rem;
  color: rgb(7, 7, 7);
}

.headerNavbarLinks a:last-child {
  color: rgb(204, 0, 0);
}

.headerNavbarLinks a:last-child::after {
  background-color: rgb(204, 0, 0);
}

.headerNavbarLinks a.active::after {
  width: 100%;
  background-color: rgb(7, 7, 7);
}

.headerNavbarLinks a:last-child.active::after {
  background-color: rgb(204, 0, 0);
}

.mobileMenuToggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.8rem;
  color: #121212;
}

@media only screen and (max-width: 1440px) {
  .navbarSearchWrapper {
    max-width: 82.5rem;
  }

  .navbarBacketWrapper button svg {
    width: 3rem;
    height: 3rem;
  }

  .navbarSearchWrapper {
    gap: 2.4rem;
  }
}

@media only screen and (max-width: 1200px) {
  .container {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 2rem;
  }

  .headerTop {
    display: none;
  }

  .headerNavbar {
    padding-top: 1.92rem;
    padding-bottom: 1.92rem;
    gap: 1.92rem;
    display: flex;
    flex-direction: column;
  }

  .navbarSearch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.44rem;
    flex-wrap: wrap;
  }

  .navbarSearch a img {
    width: 19.2rem;
  }

  .mobileMenuToggle {
    display: flex;
    flex-shrink: 0;
    padding: 0.96rem;
  }

  .mobileMenuToggle svg {
    width: 2.88rem;
    height: 2.88rem;
  }

  .navbarBacketWrapper {
    margin-left: auto;
    gap: 0.48rem;
  }

  .navbarBacketWrapper button {
    padding: 0.96rem;
  }

  .navbarBacketWrapper button svg {
    width: 2.88rem;
    height: 2.88rem;
  }

  .navbarSearchWrapper {
    width: 100%;
    max-width: 100%;
    padding: 1.44rem 2.88rem;
    border-radius: 2.88rem;
    gap: 1.2rem;
    flex: 1 1 100%;
    order: 2;
    margin-top: 1rem;
  }

  .navbarSearchWrapper svg {
    width: 2.88rem;
    height: 2.88rem;
  }

  .navbarSearchWrapper input {
    font-size: 1.92rem;
  }

  .headerNavbarLinks {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1.2rem;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 1600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 70vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .headerNavbarLinks.mobileOpen {
    display: flex !important;
  }

  .headerNavbarLinks a {
    width: 100%;
    padding: 1.92rem 0;
    border-bottom: 1px solid #e6e6e6;
    justify-content: space-between;
    font-size: 1.92rem;
    gap: 0.36rem;
  }

  .headerNavbarLinks a:last-child {
    border-bottom: none;
  }

  .headerNavbarLinks a::after {
    display: none;
  }

  .headerNavbarLinks a svg {
    transform: rotate(-90deg);
    width: 1.68rem;
    height: 1.68rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 2rem;
  }

  .headerNavbar {
    padding: 1.8rem 2rem;
    gap: 1.6rem;
  }

  .headerNavbarLinks {
    padding: 1.2rem;
  }

  .navbarSearch {
    row-gap: 1rem;
    column-gap: 0.5rem;
  }

  .navbarSearch a img {
    width: 20rem;
    height: 5.25rem;
  }

  .mobileMenuToggle {
    padding: 0.8rem;
  }

  .mobileMenuToggle svg {
    width: 3rem;
    height: 3rem;
  }

  .navbarBacketWrapper {
    gap: 0.4rem;
  }

  .navbarBacketWrapper button {
    padding: 0.8rem;
  }

  .navbarBacketWrapper button svg {
    width: 3rem;
    height: 3rem;
  }

  .navbarSearchWrapper {
    padding: 0.9rem 2rem;
    border-radius: 3.12rem;
    gap: 1.3rem;
    margin-top: 0;
  }

  .navbarSearchWrapper svg {
    width: 3.12rem;
    height: 3.12rem;
  }

  .navbarSearchWrapper input {
    font-size: 2.08rem;
  }

  .headerNavbarLinks a {
    padding: 1.6rem 0;
    font-size: 2.08rem;
    gap: 0.39rem;
  }

  .headerNavbarLinks a svg {
    width: 1.82rem;
    height: 1.82rem;
  }
}

@media (max-width: 390px) {
  .headerNavbar {
    padding: 1.8rem 2.5rem;
    padding-bottom: 3rem;
    gap: 2rem;
  }

  .navbarSearch a img {
    width: 25rem;
    height: auto;
  }

  .navbarSearch {
    column-gap: 1.3rem;
  }

  .mobileMenuToggle svg {
    width: 3.5rem;
    height: 3.5rem;
  }

  .navbarBacketWrapper button svg {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* Main */
main {
  display: flex;
  flex-direction: column;
}

/* Hero Section */
.hero {
  width: 100%;
  height: 43rem;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.heroImageDesktop,
.heroImageMobile {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  top: 0;
  left: 0;
}

.heroImageDesktop {
  display: block;
}

.heroImageMobile {
  display: none;
}

.heroContent {
  max-width: 105.6rem;
  width: 100%;
  margin-left: auto;
  margin-right: 3rem;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 8.2rem 0;
  padding: 3.2rem 4rem;
  box-shadow: 0 12px 40px rgba(10, 10, 10, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.heroContent h1 {
  width: 100%;
  font-family: "Prompt", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 4rem;
  color: rgb(42, 43, 42);
  text-align: center;
  margin: 0;
}

.heroContent p {
  width: 100%;
  font-family: "Prompt", sans-serif;
  font-weight: 400;
  font-size: 2.3rem;
  line-height: 3.5rem;
  color: rgb(42, 43, 42);
  margin: 1rem 0 2rem 0;
  margin-left: auto;
  margin-right: auto;
}

.heroContentButtons {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.heroContentButtons button {
  width: 22.5rem;
  height: 4.7rem;
  font-weight: 700;
  font-size: 1.9rem;
  cursor: pointer;
  color: #fff;
  border: none;
  border-radius: 3rem;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.btnPrimary {
  background: rgb(204, 0, 0);
}

.btnPrimary:hover {
  background: #000;
}

.btnSecondary {
  background: #000;
}

.btnSecondary:hover {
  background: rgb(204, 0, 0);
}

/* Features Bar */
.featuresBar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rem;
  margin-bottom: 1rem;
  background: #f4f4f4;
  padding: 1.6rem;
}

.featuresCarouselWrapper {
  width: 100%;
  height: 7rem;
  display: none;
  margin-bottom: 1rem;
  background: #f4f4f4;
  padding: 0rem;
}

.featuresCarousel {
  width: 100%;
}

.featuresCarouselItem {
  padding: 0 0.8rem;
}

.featuresCarouselWrapper .featureItem {
  width: 100%;
}

.featureItem {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.featureItem img {
  width: 3rem;
  height: auto;
  object-fit: contain;
  aspect-ratio: 1 / 1;
}

.featureText {
  text-align: left;
}

.featureTitle {
  font-family: Helvetica, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: rgb(42, 43, 42);
  margin-bottom: 0.2rem;
}

.featureSubtitle {
  font-family: Helvetica, sans-serif;
  font-size: 1.44rem;
  font-weight: 400;
  color: rgb(42, 43, 42);
}

.description {
  max-width: 90rem;
  margin: 0 auto;
  text-align: center;
}

.description p {
  color: #374151;
  line-height: 1.8;
  font-size: 1.6rem;
}

.description a {
  color: rgb(204, 0, 0);
  text-decoration: underline;
  cursor: pointer;
}

.description a:hover {
  color: rgb(204, 0, 0);
}

/* Trusted By */
.trustedBy {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  margin-top: 4rem;
  margin-bottom: 4rem;
  padding: 0 2rem;
}

.trustedBy h1 {
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 3rem;
  line-height: 4.5rem;
  color: rgb(42, 43, 42);
  text-align: center;
}

.trustedByLogosCarousel {
  width: 100%;
  overflow: hidden;
}

.logo-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 4rem;
  transition: all 0.3s ease;
}

.logo-item img {
  width: 16rem;
  height: auto;
  object-fit: contain;
}

/* Brands */
.brands {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4rem;
  cursor: pointer;
}

.brandItem {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.brandItem p {
  width: 128px;
  font-family: Prompt, sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 2.7rem;
  color: rgb(107, 102, 102);
  text-align: center;
}

.brandItemLogo {
  width: 12.8rem;
  height: 12.8rem;
  border-radius: 50%;
  border: 1px solid rgb(42, 43, 42);
  transition: all 0.3s ease;
}

.brandItemLogo:hover {
  transform: scale(1.1);
}

.brandItem:nth-child(1) .brandItemLogo {
  background: url('../images/trustedBy9.webp') center/70% 50% no-repeat;
}

.brandItem:nth-child(2) .brandItemLogo {
  background: url('../images/brands2.webp') center/cover no-repeat;
}

.brandItem:nth-child(3) .brandItemLogo {
  background: url('../images/brands1.webp') center/cover no-repeat;
}

.brandItem:nth-child(4) .brandItemLogo {
  background: url('../images/brands3.webp') center/100% 60% no-repeat;
}

.brandItem:nth-child(5) .brandItemLogo {
  background: url('../images/brands4.webp') center/cover no-repeat;
}

.brandItem:nth-child(6) .brandItemLogo {
  background: url('../images/brands5.webp') center/cover no-repeat;
}

.brandItem:nth-child(7) .brandItemLogo {
  background: url('../images/brands6.webp') center/70% 60% no-repeat;
}

.brandItem:nth-child(7) p {
  color: rgb(204, 0, 0);
}

.brandItem:nth-child(7) .brandItemLogo {
  border-color: rgb(204, 0, 0);
}

/* Best Selling */
.bestSellingContainer {
  width: 100%;
  margin: 4rem auto 0 auto;
  padding: 0 6.4rem;
}

.bestSellingContainer:nth-of-type(2) {
  margin: 0 auto;
}

.bestSellingHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3.2rem;
}

.bestSellingTitle {
  font-family: "Prompt", sans-serif;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 3.6rem;
  color: rgb(51, 51, 51);
}

.bestSellingLink {
  font-family: "Helvetica", sans-serif;
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 400;
  color: rgb(204, 0, 0);
  text-decoration: none;
  transition: all 0.3s ease;
}

.bestSellingLink:hover {
  color: #000;
  text-decoration: underline;
}

.bestSellingGrid {
  display: flex;
  align-items: stretch;
  gap: 2.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 4rem;
  order: 10;
  cursor: grab;
  user-select: none;
  padding-top: 1rem;
}

.bestSellingGrid.active {
  cursor: grabbing;
  scroll-behavior: auto;
}

.bestSellingGrid::-webkit-scrollbar {
  height: 2px;
}

.bestSellingGrid::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.bestSellingGrid::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.bestSellingGrid::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.bestSellingCard {
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border-radius: 2.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.09);
  transition: all 0.3s ease;
  padding: 1rem;
}

.bestSellingGrid .bestSellingCard {
  width: calc((100% - 8rem) / 5);
  flex: 0 0 calc((100% - 8rem) / 5);
}

.bestSellingSectionCards .bestSellingCard {
  width: calc((100% - 6rem) / 3);
  flex: 0 0 calc((100% - 6rem) / 3);
}

.bestSellingSectionCards.cards-4 .bestSellingCard {
  width: calc((100% - 6rem) / 4);
  flex: 0 0 calc((100% - 6rem) / 4);
}

@media (min-width: 1281px) {
  .bestSellingGrid .bestSellingCard {
    width: calc((100% - 8rem) / 5);
    flex: 0 0 calc((100% - 8rem) / 5);
  }

  .bestSellingImageBox {
    height: clamp(18rem, 16vw, 26rem);
  }
}

@media (max-width: 1280px) and (min-width: 1024px) {
  .bestSellingGrid .bestSellingCard {
    width: calc((100% - 8rem) / 5);
    flex: 0 0 calc((100% - 8rem) / 5);
  }

  .bestSellingImageBox {
    height: clamp(20rem, 20vw, 30rem);
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .bestSellingGrid .bestSellingCard {
    width: calc((100% - 5rem) / 3);
    flex: 0 0 calc((100% - 5rem) / 3);
  }

  .bestSellingSectionCards .bestSellingCard {
    width: calc((100% - 5rem) / 3);
    flex: 0 0 calc((100% - 5rem) / 3);
  }

  .bestSellingImageBox {
    height: clamp(20rem, 28vw, 32.5rem);
  }
}

@media (max-width: 767px) {
  .bestSellingGrid .bestSellingCard,
  .bestSellingSectionCards .bestSellingCard {
    width: calc((100% - 2.5rem) / 2);
    flex: 0 0 calc((100% - 2.5rem) / 2);
  }

  .bestSellingImageBox {
    height: clamp(18rem, 35vw, 24rem);
  }
}

.bestSellingCard:focus-visible {
  outline: 2px solid rgb(204, 0, 0);
  outline-offset: 4px;
}

.bestSellingCard:hover .bestSellingBtn {
  color: rgb(204, 0, 0);
  border-color: rgb(204, 0, 0);
}

.bestSellingCard:hover .bestSellingName {
  color: rgb(204, 0, 0);
}

.bestSellingImageBox {
  width: 100%;
  height: 32.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.bestSellingIconsWrapper {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 10;
  pointer-events: none;
}

.bestSellingLikeIcon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
  border: none;
  background: none;
}

.bestSellingLikeIcon svg {
  width: 100%;
  height: 100%;
  color: #333;
  transition: all 0.3s ease;
}

.bestSellingLikeIcon:hover svg {
  color: #f01911;
  fill: #f01911;
}

.bestSellingLikeIcon.liked svg {
  color: #f01911;
  fill: #f01911;
}

.bestSellingBrandIcon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.bestSellingBrandIcon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bestSellingImage {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

.bestSellingImageDefault {
  opacity: 1;
  z-index: 1;
}

.bestSellingImageHover {
  opacity: 0;
  z-index: 2;
}

.bestSellingCard:hover .bestSellingImageDefault {
  opacity: 0;
}

.bestSellingCard:hover .bestSellingImageHover {
  opacity: 1;
}

.bestSellingInfo {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.bestSellingInfoTop {
  display: flex;
  flex-direction: column;
}

.bestSellingName {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #333;
  margin-bottom: 0.6rem;
  line-height: 2.4rem;
  min-height: 4.8rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bestSellingPrice {
  font-family: "Helvetica", sans-serif;
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-weight: 400;
  color: #333;
  margin-bottom: 1.6rem;
}

.bestSellingPrice strong {
  font-size: 2rem;
  line-height: 2.4rem;
  font-weight: 700;
  margin-left: 0.5rem;
}

.bestSellingColors {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.bestSellingColorCircle {
  width: 6rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bestSellingColorCircle img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.bestSellingColorCircle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: rgb(204, 0, 0);
  transition: width 0.3s ease;
}

.bestSellingColorCircle:hover::after {
  width: 100%;
}

.moreColors {
  min-width: 3rem;
  font-family: "Helvetica", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  background: #000;
  padding: 0.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.3s ease;
  justify-content: center;
  vertical-align: middle;
}

.moreColors:hover {
  color: rgb(204, 0, 0);
}

.bestSellingBtn {
  width: 100%;
  padding: 1rem;
  background-color: transparent;
  border: 0.2rem solid rgb(42, 43, 42);
  border-radius: 3rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 700;
  color: rgb(42, 43, 42);
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
}

/* Refresh Section */
.refreshContainer {
  width: 100%;
  padding: 2rem 6.4rem;
}

.refreshContent {
  display: flex;
  gap: 4rem;
  align-items: center;
  justify-content: center;
}

.refreshText {
  max-width: 56rem;
}

.refreshTitle {
  font-family: Prompt, sans-serif;
  font-size: 2.9rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  line-height: 3.7rem;
  margin-bottom: 2rem;
}

.refreshDescription {
  font-size: 1.6rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  line-height: 2.4rem;
  margin-bottom: 3.2rem;
}

.refreshBtn {
  padding: 1.6rem 3.2rem;
  background-color: #c7100a;
  color: #fff;
  border: none;
  border-radius: 3rem;
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.refreshBtn:hover {
  background-color: #000;
}

.refreshImage {
  max-width: 93.6rem;
  width: 100%;
  overflow: hidden;
  background: #f4f4f4;
  padding: 3rem 6rem;
}

.refreshImage img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Info Cards */
.infoCardsSection {
  width: 100%;
  padding: 2rem 6.4rem;
  background-color: #fff;
}

.infoCardsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
}

.infoCard {
  background-color: #f4f4f4;
  padding: 3.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  transition: all 0.3s ease;
}

.infoCardTitle {
  font-family: "Prompt", sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  color: #2a2b2a;
  line-height: 1.4;
  margin: 0;
  transition: all 0.3s ease;
}

.infoCardTitle:hover {
  cursor: pointer;
  color: rgb(204, 0, 0);
}

.infoCardText {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #2a2b2a;
  line-height: 2.4rem;
  margin: 0;
  flex-grow: 1;
}

.infoCardBtn {
  display: inline-block;
  padding: 1.2rem 3.2rem;
  background-color: rgb(204, 0, 0);
  color: #fff;
  text-decoration: none;
  border-radius: 3rem;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  transition: all 0.3s ease;
  align-self: flex-start;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  border: none;
}

.infoCardBtn:hover {
  background-color: #000;
}

/* Features Section */
.featuresSection {
  width: 100%;
  padding: 2rem 5rem;
  background-color: #f4f4f4;
  overflow-x: hidden;
}

.featuresSection .featuresContainer {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.featuresSection .featuresCarouselWrapper {
  display: none;
  width: 100%;
  max-width: 140rem;
  margin: 0 auto;
}

.featuresSection .featuresCarousel {
  width: 100%;
}

.featuresSection .featuresCarouselItem {
  padding: 0 1.5rem;
}

.featuresSection .featureItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

.featuresSection .featureItem:hover .featureIcon {
  color: rgb(204, 0, 0);
  transform: scale(1.1);
}

.featuresSection .featureIconWrapper {
  margin-bottom: 0.5rem;
}

.featuresSection .featureIconWrapper svg {
  width: 3.6rem;
  height: 3.6rem;
}

.featuresSection .featureTitle {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: rgb(42, 43, 42);
  line-height: 1.8rem;
}

.featuresSection .featureDescription {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: rgb(42, 43, 42);
  line-height: 1.8rem;
}

.featuresSection .featureDivider {
  position: absolute;
  right: -3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 8rem;
  background-color: rgba(107, 102, 102, 0.2);
}

/* Newsletter Section */
.newsletterSection {
  width: 100%;
  padding: 2rem 6.4rem;
  background-color: #bb1608;
}

.newsletterContainer {
  text-align: center;
}

.newsletterTitle {
  font-family: "Prompt", sans-serif;
  font-size: 3.6rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 0.6rem;
  line-height: 1.4;
}

.newsletterDescription {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 2rem;
  line-height: 2.4rem;
  opacity: 0.95;
}

.newsletterForm {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  max-width: 60rem;
  margin: 0 auto;
}

.newsletterInputWrapper {
  flex: 1;
  position: relative;
  display: flex;
}

.newsletterInput {
  width: 100%;
  padding: 0 2rem;
  font-family: "Helvetica", sans-serif;
  font-size: 1.5rem;
  border: none;
  border-radius: 0.5rem 0 0 0.5rem;
  outline: none;
  background-color: #fff;
  color: rgb(51, 51, 51);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.newsletterInput::placeholder {
  color: rgb(107, 102, 102);
}

.newsletterError {
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  background-color: rgb(51, 51, 51);
  color: #fff;
  padding: 0.6rem 1.2rem;
  font-family: "Helvetica", sans-serif;
  font-size: 1.2rem;
  border-radius: 0.4rem;
  white-space: nowrap;
}

.newsletterError::before {
  content: "";
  position: absolute;
  top: -0.4rem;
  left: 2rem;
  width: 0;
  height: 0;
  border-left: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-bottom: 0.4rem solid rgb(51, 51, 51);
}

.newsletterBtn {
  padding: 1rem 3.2rem;
  background-color: #000;
  border: none;
  border-radius: 0 0.5rem 0.5rem 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.newsletterBtn svg {
  width: 3.6rem;
  height: 3.6rem;
}

.newsletterBtn:hover {
  background-color: rgb(51, 51, 51);
}

.newsletterArrow {
  width: 2rem;
  height: 2rem;
  color: #fff;
}

/* Footer */
.footer {
  width: 100%;
  background-color: #222529;
  color: #fff;
  padding: 6rem 6.4rem 10rem 6.4rem;
}

.footerTop {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
  gap: 4rem;
  margin-bottom: 4rem;
  padding-bottom: 4rem;
}

.footerColumn {
  display: flex;
  flex-direction: column;
}

.footerLogo {
  width: 30rem;
  height: auto;
  margin-bottom: 2rem;
}

.footerAbout {
  max-width: 40rem;
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: rgba(255, 255, 255, 0.7);
}

.footerTitle {
  font-family: "Prompt", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 1rem;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.footerTitle svg {
  display: none;
}

.footerList {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.footerLink {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 3.2rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
  letter-spacing: 0.1rem;
}

.footerLink:hover {
  color: rgb(204, 0, 0);
  transform: translateX(0.5rem);
}

.footerContact {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footerContact a {
  font-size: 1.6rem;
  line-height: 2.4rem;
}

.footerAddress {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  line-height: 2.4rem;
}

.footerPhone strong,
.footerHours strong {
  font-family: "Helvetica", sans-serif;
  color: #fff;
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.footerPhone,
.footerHours {
  font-family: "Helvetica", sans-serif;
  font-size: 1.4rem;
  line-height: 2rem;
  color: rgba(255, 255, 255, 0.7);
}

.footerSocial {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footerSocialLink {
  width: 2.4rem;
  height: 2.4rem;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.footerSocialLink:hover {
  color: rgb(204, 0, 0);
  transform: translateY(-0.3rem);
}

.footerSocialLink svg {
  width: 100%;
  height: 100%;
}

.footerMiddle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footerLinks {
  display: flex;
  gap: 2.5rem;
}

.footerBottomLink {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footerBottomLink:hover {
  color: rgb(204, 0, 0);
}

.footerTopLink {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.footerTopLink:hover {
  color: rgb(204, 0, 0);
}

.footerBottom {
  padding-top: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footerPayments {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.footerPaymentIcon {
  width: 3.6rem;
  transition: all 0.3s ease;
}

.footerPaymentIcon:hover {
  opacity: 1;
  transform: scale(1.05);
}

.footerCopyright {
  font-family: "Helvetica", sans-serif;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1440px) {
  .heroContent {
    max-width: 79.2rem;
    width: 100%;
  }

  .bestSellingImageBox {
    height: auto;
    aspect-ratio: 1/1;
  }

  .refreshContent {
    gap: 11.4rem;
  }

  .refreshText {
    max-width: 39rem;
  }

  .refreshImage {
    max-width: 67.6rem;
    padding: 0;
    background: none;
  }

  .refreshImage img {
    object-fit: contain;
  }
}

@media (max-width: 1024px) {
  .heroContent {
    max-width: 79.2rem;
  }

  .brands {
    overflow-x: auto;
    justify-content: flex-start;
    padding: 2rem;
    gap: 3rem;
    scroll-behavior: smooth;
    cursor: grab;
    user-select: none;
  }

  .brands.active {
    cursor: grabbing;
    scroll-behavior: auto;
  }

  .brands::-webkit-scrollbar {
    display: none;
  }

  .brandItem {
    flex-shrink: 0;
  }

  .bestSellingContainer {
    padding: 0 3rem;
  }

  .refreshContainer {
    padding: 1rem 3rem;
  }

  .refreshContent {
    gap: 6rem;
  }

  .refreshTitle {
    font-size: 3.2rem;
    line-height: 4.2rem;
  }

  .refreshDescription {
    font-size: 1.5rem;
    line-height: 2.4rem;
  }

  .infoCardsSection {
    padding: 2rem 3rem 3rem 3rem;
  }

  .infoCardsGrid {
    gap: 3rem;
  }

  .infoCard {
    padding: 2.8rem;
  }

  .infoCardTitle {
    font-size: 2.2rem;
  }

  .infoCardText {
    font-size: 1.5rem;
    line-height: 2.2rem;
  }

  .newsletterSection {
    padding: 3rem 2rem;
  }

  .newsletterTitle {
    font-size: 3.2rem;
  }

  .newsletterDescription {
    font-size: 1.5rem;
    line-height: 2.2rem;
  }

  .footer {
    padding: 5rem 4rem 2rem;
  }

  .footerTop {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }

  .featuresSection {
    padding: 2rem 0rem;
  }

  .featuresSection .featuresContainer {
    display: none;
  }

  .featuresSection .featuresCarouselWrapper {
    display: block;
  }

  .featuresSection .featureDivider {
    display: none;
  }
}

@media (max-width: 900px) {
  .infoCardsGrid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .infoCard {
    padding: 2.4rem;
  }

  .infoCardTitle {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .heroImageDesktop {
    display: none;
  }

  .heroImageMobile {
    display: block;
    object-fit: contain;
    object-position: center top;
  }

  .featuresBar {
    display: none;
  }

  .featuresCarouselWrapper {
    width: 100%;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .featuresCarouselItem {
    padding: 0 0.6rem;
  }

  .featureItem {
    gap: 1.2rem;
  }

  .hero {
    height: 62rem;
  }

  .heroContent {
    max-width: 72rem;
    background: #e9e9e9;
    margin-top: 35rem;
  }

  .heroContent h1 {
    max-width: 77%;
    font-size: 2.6rem;
    line-height: 3rem;
  }

  .heroContent p {
    font-size: 1.8rem;
    line-height: 2rem;
    margin: 1rem 0 1rem 0;
  }

  .description {
    max-width: 60rem;
  }

  .trustedBy {
    gap: 2rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .trustedBy h1 {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }

  .logo-item {
    margin: 0 2.4rem;
  }

  .logo-item img {
    width: 16rem;
  }

  main .brands {
    order: -1;
  }

  .brands {
    gap: 2.4rem;
    padding: 1.6rem;
    margin: 0;
  }

  .brandItem p {
    width: 12.8rem;
    font-size: 1.8rem;
    line-height: 2.7rem;
  }

  .brandItemLogo {
    width: 12.8rem;
    height: 12.8rem;
  }

  .bestSellingContainer {
    padding: 0 2rem;
    margin: 3rem auto;
  }

  .bestSellingHeader {
    margin-bottom: 3rem;
  }

  .bestSellingTitle {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }

  .refreshContainer {
    padding: 1rem 3rem;
  }

  .refreshContent {
    flex-direction: column-reverse;
    gap: 1rem;
  }

  .refreshText {
    max-width: 100%;
    text-align: start;
  }

  .refreshImage {
    width: 100%;
    height: auto;
  }

  .infoCardsSection {
    padding: 2rem 3rem 3rem 3rem;
  }

  .infoCardsGrid {
    gap: 2.2rem;
  }

  .infoCard {
    padding: 2.2rem;
  }

  .infoCardTitle {
    font-size: 1.98rem;
  }

  .infoCardText {
    font-size: 1.54rem;
    line-height: 2.2rem;
  }

  .infoCardBtn {
    padding: 1.5rem 2rem;
    font-size: 1.4rem;
  }

  .featuresSection {
    padding: 4rem 2rem;
  }

  .featuresSection .featuresCarouselItem {
    padding: 0 1rem;
  }

  .footer {
    padding: 4.79rem 2.39rem 2.39rem;
  }

  .footerTop {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    margin-bottom: 0rem;
    padding-bottom: 2rem;
  }

  .footerLogo {
    margin-bottom: 2.39rem;
  }

  .footerAbout {
    font-size: 1.67rem;
    line-height: 2.39rem;
  }

  .footerTitle {
    font-size: 2.16rem;
    margin-bottom: 0rem;
  }

  .footerTitle svg {
    display: block;
    width: 2rem;
    height: 2rem;
    transition: transform 0.3s ease;
  }

  .footerTitle.active svg {
    transform: rotate(180deg);
  }

  .footerList {
    padding-top: 0.9rem;
    gap: 0.3rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .footerList.open {
    max-height: 500px;
  }

  .footerLink {
    font-size: 1.67rem;
  }

  .footerContact {
    gap: 2.39rem;
  }

  .footerAddress {
    margin-top: 2rem;
  }

  .footerAddress,
  .footerPhone,
  .footerHours {
    font-size: 1.67rem;
    line-height: 2.39rem;
  }

  .footerSocial {
    gap: 1.8rem;
  }

  .footerSocialLink {
    width: 2.87rem;
    height: 2.87rem;
  }

  .footerMiddle {
    flex-direction: column-reverse;
    gap: 2.39rem;
    align-items: flex-start;
    padding: 2.39rem 0;
  }

  .footerLinks {
    gap: 3rem;
  }

  .footerBottomLink,
  .footerTopLink {
    font-size: 1.56rem;
  }

  .footerBottom {
    flex-direction: column;
    gap: 0rem;
    align-items: flex-start;
    padding-top: 2rem;
  }

  .footerPayments {
    justify-content: flex-start;
    gap: 1.44rem;
  }

  .footerCopyright {
    width: 100%;
    font-size: 1.3rem;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .featuresCarouselWrapper {
    height: 11rem;
    overflow: visible;
    padding: 1.2rem 0;
  }

  .featuresCarouselWrapper .featureItem {
    transform: scale(1.1);
    transform-origin: center;
  }

  .hero {
    height: 65rem;
  }

  .heroContent {
    max-width: 45rem;
    margin: 0 auto;
    margin-top: 20rem;
  }

  .heroContent h1 {
    max-width: 100%;
    font-size: 2.3rem;
    line-height: 3rem;
    font-weight: 500;
  }

  .heroContent p {
    font-size: 1.9rem;
    line-height: 2.5rem;
    margin: 1.2rem 0 2rem 0;
  }

  .heroContentButtons button {
    width: 26rem;
    height: 5.3rem;
    font-size: 2.1rem;
    line-height: 2.1rem;
  }

  .description p {
    font-size: 1.8rem !important;
    padding: 1.2rem;
  }

  .trustedBy {
    gap: 1.6rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .trustedBy h1 {
    font-size: 2.3rem;
    line-height: 3rem;
  }

  .logo-item {
    margin: 0 2rem;
  }

  .logo-item img {
    width: 13.6rem;
  }

  .brands {
    gap: 2rem;
    padding: 1.2rem;
  }

  .brandItem p {
    width: 10rem;
    font-size: 1.6rem;
    line-height: 2rem;
  }

  .brandItemLogo {
    width: 10rem;
    height: 10rem;
  }

  .brandItem:nth-child(1) .brandItemLogo {
    background-size: 80% 50%;
  }

  .bestSellingContainer {
    margin: 1rem auto;
  }

  .bestSellingHeader {
    margin-bottom: 2rem;
  }

  .bestSellingTitle {
    font-size: 2rem;
  }

  .bestSellingCard {
    width: calc((100% - 2.5rem) / 2);
    flex: 0 0 calc((100% - 2.5rem) / 2);
    border-radius: 2rem;
  }

  .bestSellingImageBox {
    height: 24rem;
  }

  .bestSellingName {
    font-size: 1.8rem;
    line-height: 2.3rem;
    margin-bottom: 1rem;
    min-height: 3rem;
  }

  .bestSellingPrice {
    font-size: 1.6rem;
    line-height: 2rem;
    font-weight: 700;
  }

  .bestSellingPrice strong {
    font-size: 1.6rem;
    line-height: 2rem;
  }

  .bestSellingColors {
    gap: 0.5rem;
  }

  .bestSellingColorCircle {
    width: 4.5rem;
  }

  .bestSellingBtn {
    padding: 1rem;
    border: 0.1rem solid rgb(42, 43, 42);
    border-radius: 2.5rem;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8rem;
  }

  .moreColors {
    min-width: 2.5rem;
    font-size: 1.1rem;
    padding: 0.3rem;
  }

  .refreshContainer {
    padding: 0 2rem;
  }

  .refreshContent {
    gap: 2rem;
  }

  .refreshDescription {
    font-size: 1.7rem;
  }

  .refreshBtn {
    padding: 1.6rem 3.2rem;
    font-size: 1.9rem;
    line-height: 1.9rem;
    border-radius: 3rem;
  }

  .infoCardsSection {
    padding: 2rem 1.6rem 1rem 1.6rem;
  }

  .infoCardsGrid {
    gap: 1.6rem;
  }

  .infoCard {
    padding: 1.8rem;
  }

  .infoCardTitle {
    font-size: 2.5rem;
  }

  .infoCardText {
    font-size: 1.7rem;
    line-height: 2.4rem;
  }

  .infoCardBtn {
    padding: 1.6rem 3.2rem;
    font-size: 1.6rem;
    line-height: 1.2;
    vertical-align: bottom;
    border-radius: 3rem;
  }

  .featuresSection {
    padding: 2rem 1rem;
  }

  .featuresSection .featuresCarouselItem {
    padding: 0 0.5rem;
  }

  .featuresSection .featureIconWrapper {
    margin-bottom: 1rem;
  }

  .featuresSection .featureTitle {
    font-size: 1.98rem;
    margin-bottom: 0rem;
  }

  .featuresSection .featureDescription {
    font-size: 1.54rem;
    line-height: 2.2rem;
  }

  .footer {
    padding: 3.59rem 1.92rem 10rem 1.92rem;
  }

  .footerTop {
    gap: 2rem;
  }

  .footerLogo {
    margin-bottom: 2.64rem;
  }

  .footerAbout {
    font-size: 1.85rem;
    line-height: 2.64rem;
  }

  .footerTitle {
    font-size: 1.8rem;
  }

  .footerBottom {
    gap: 2.64rem;
  }

  .footerPayments {
    gap: 1rem;
  }

  .footerAddress {
    margin-top: 0.4rem;
  }

  .footerCopyright {
    font-size: 1.71rem;
  }
}

/* Product Detail Page */
.productDetail {
  width: 100%;
  padding: 1rem 6.4rem;
}

.backButton {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  color: rgb(51, 51, 51);
  padding: 0.5rem;
}

.backButton svg {
  width: 1.5rem;
  height: 1.5rem;
}

.backBtn {
  transition: all 0.3s ease;
}

.backBtn:last-child {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.backBtn:hover {
  text-decoration: underline;
}

.productGrid {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  width: 100%;
  max-width: 180rem;
  margin: 0 auto;
  position: relative;
}

.imageSection {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 105.7rem;
  position: sticky;
  top: 14rem;
  align-self: flex-start;
  height: fit-content;
}

.imageZoomContainer {
  width: 100%;
  max-width: 105.7rem;
  height: 58.1rem;
  overflow: hidden;
  cursor: zoom-in;
  border: 1px solid #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.productImage {
  width: 100%;
  object-fit: contain;
  transition: all 0.1s ease-out;
}

.navButton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.navButton:hover {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.navButtonLeft {
  left: 2rem;
}

.navButtonRight {
  right: 2rem;
}

.zoomHint {
  margin-top: 1rem;
  text-align: center;
  color: #666;
  font-size: 0.9rem;
}

.colorVariants {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
}

.colorVariant {
  width: 8rem;
  height: 8rem;
  cursor: pointer;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
  position: relative;
  display: block;
  overflow: hidden;
}

.colorVariantImage {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.colorVariant::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: rgb(7, 7, 7);
  transition: width 0.3s ease;
}

.colorVariant:hover::after {
  width: 100%;
}

.colorVariantActive::after {
  width: 100%;
  background-color: rgb(7, 7, 7);
}

.productInfo {
  width: 46.9rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.productInfoLogo img {
  width: 12rem;
}

.details h1 {
  font-family: Prompt, sans-serif;
  font-size: clamp(23px, 2.4rem, 2.4rem);
  font-weight: 400;
  line-height: 31px;
  color: rgb(51, 51, 51);
}

.stars {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 2rem 0;
}

.rating {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.star {
  width: 2rem;
  height: 2rem;
}

.reviews {
  font-family: "Helvetica", sans-serif;
  font-size: 1.8rem;
  line-height: 2.7rem;
  font-weight: 400;
  color: rgb(0, 204, 0);
}

.sku {
  font-family: "Helvetica", sans-serif;
  font-size: 1.5rem;
  line-height: 2.1rem;
  font-weight: 400;
  color: rgb(1, 51, 51);
}

.payment {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.productSize {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.price {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: rgb(51, 51, 51);
}

.rulerIcon {
  width: 2rem;
  height: 2rem;
}

.productSize p {
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2rem;
  color: rgb(24, 24, 24);
  border-bottom: 1px solid #c7100a;
  transition: all 0.3s ease;
}

.productSize p:hover {
  border-color: #000;
  cursor: pointer;
}

.wishlist {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #b90909;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: normal;
}

.wishlisted .heartIcon {
  color: #b90909;
}

.heartIcon {
  width: 2rem;
  height: 2rem;
  transition: all 0.3s ease;
}

.buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3rem;
}

.buttons button {
  padding: 1.2rem 2.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  background-color: #000;
  border: 2px solid #000;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 3rem;
}

.buttons button:nth-child(1) {
  background: #fff;
  color: #000;
}

.buttons button:nth-child(1):hover {
  color: #fff;
  background: #000;
}

.buttons button:nth-child(2):hover {
  background: #fff;
  color: #000;
}

.check {
  margin-top: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 1rem;
}

.checkIcon {
  font-size: 4.2rem;
}

.check p {
  font-family: "Helvetica", sans-serif;
  font-size: 1.4rem;
  line-height: 2.1rem;
  color: rgb(51, 51, 51);
}

.accordionContainer {
  margin-top: 2rem;
}

.accordionItem {
  border: 1px solid #424940;
  border-radius: 2rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

.accordionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  cursor: pointer;
  background: #ffffff;
  transition: background 0.3s ease;
  user-select: none;
}

.accordionHeader:hover {
  background: #f9f9f9;
}

.accordionTitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Helvetica", sans-serif;
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-weight: 700;
  color: #333333;
}

.accordionTitleIcon {
  width: 2rem;
  height: 2rem;
  color: #333333;
}

.accordionArrow {
  width: 2rem;
  height: 2rem;
  color: #4d4d4d;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.accordionOpen .accordionArrow {
  transform: rotate(180deg);
}

.accordionTitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Helvetica", sans-serif;
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-weight: 700;
  color: #333333;
}

.accordionTitle svg {
  font-size: 2.5rem;
}

.accordionContent {
  padding: 0 2rem;
  font-family: "Helvetica", sans-serif;
  font-size: 1.4rem;
  line-height: 2.1rem;
  color: #666666;
  background: #ffffff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordionOpen .accordionContent {
  max-height: 1000px;
  padding: 0 2rem 2rem 2rem;
}

.accordionContent p {
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: #333;
}

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modalContent {
  background-color: #fff;
  padding: 3.5rem 2rem 1rem;
  border-radius: 0.5rem;
  max-width: 75rem;
  width: 90%;
  max-height: 90vh;
  overflow-x: auto;
  position: relative;
}

.closeButton {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: #000;
  cursor: pointer;
  transition: color 0.3s ease;
}

.sizeGuideModal {
  display: none;
  z-index: 9999;
}

.imageModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  cursor: pointer;
  overflow: hidden;
}

.imageModalContent {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.imageModalImg {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  user-select: none;
}

.relatedProducts {
  padding: 4rem 6.4rem;
}

.relatedProducts h2 {
  font-family: "Prompt", sans-serif;
  font-size: 2.8rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  margin-bottom: 3rem;
}

.relatedProductsGrid {
  display: flex;
  align-items: stretch;
  gap: 2.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 2rem;
  cursor: grab;
  user-select: none;
  padding-top: 1rem;
}

.relatedProductsGrid::-webkit-scrollbar {
  height: 2px;
}

.relatedProductsGrid::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.relatedProductsGrid::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.relatedProductsGrid .bestSellingCard {
  flex: 0 0 calc((100% - 7.5rem) / 4);
  width: calc((100% - 7.5rem) / 4);
}

@media (max-width: 1024px) {
  .productDetail {
    padding: 1rem 2rem;
  }

  .productGrid {
    flex-direction: column;
    gap: 3rem;
  }

  .imageSection {
    width: 100%;
    position: static;
    top: auto;
  }

  .productInfo {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .productDetail {
    padding: 1rem 3.2rem;
  }

  .backButton {
    gap: 0.3rem;
  }

  .navButton {
    width: 3rem;
    height: 3rem;
  }

  .navButtonLeft {
    left: 1rem;
  }

  .navButtonRight {
    right: 1rem;
  }

  .colorVariant {
    width: 8.4rem;
    height: 8.4rem;
  }

  .details h1 {
    font-size: 2.2rem;
    line-height: 2.4rem;
  }

  .stars {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .star {
    font-size: 1.6rem;
  }

  .navButton {
    display: none;
  }

  .relatedProducts {
    padding: 2rem;
  }
}

@media (max-width: 480px) {
  .productDetail {
    padding: 1rem;
  }

  .backButton {
    flex-wrap: wrap;
    align-items: center;
  }

  .relatedProducts {
    padding: 1rem;
  }
}

/* ==========================================
   ARTICLES PAGE STYLES
   ========================================== */
.articlesPage {
  width: 100%;
  padding: 1rem 6.4rem 0rem;
}

.articlesHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6.4rem;
}

.articlesTitle {
  font-family: "Prompt", sans-serif;
  font-size: 3.2rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  line-height: 4rem;
}

.shareSection {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.shareSection span {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 700;
  color: rgb(51, 51, 51);
}

.shareIcon {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(51, 51, 51);
  transition: color 0.3s ease;
}

.shareIcon:hover {
  color: rgb(204, 0, 0);
}

.shareIcon svg {
  width: 100%;
  height: 100%;
}

.categoriesWrapper {
  position: relative;
  padding: 1.2rem 0;
  padding-right: 8rem;
  border-top: 0.2rem solid #f0f0f0;
  border-bottom: 0.2rem solid #f0f0f0;
  margin-bottom: 6.4rem;
}

.categoriesWrapper.expanded {
  padding-right: 0;
}

.categoriesInner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 3.2rem;
  max-height: calc((2.7rem + 1rem) * 2 + 0.6rem);
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.categoriesWrapper.expanded .categoriesInner {
  max-height: none;
}

.categoryBtn {
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 2.7rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  cursor: pointer;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
  white-space: nowrap;
  position: relative;
  display: inline-grid;
}

.categoryBtn::before {
  content: attr(data-label);
  font-weight: 600;
  visibility: hidden;
  grid-area: 1 / 1;
}

.categoryBtnLabel {
  grid-area: 1 / 1;
}

.categoryBtn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.2s ease;
}

.categoryBtn:hover {
  color: #000;
}

.categoryBtn:hover::after {
  width: 100%;
}

.categoryBtn:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.35);
  outline-offset: 3px;
  border-radius: 4px;
}

.categoryBtn.active {
  color: #000;
  font-weight: 600;
}

.categoryBtn.active::after {
  width: 100%;
}

.moreBtn {
  position: absolute;
  right: 0;
  bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: none;
  font-size: 1.8rem;
  line-height: 2.7rem;
  color: rgb(204, 0, 0);
  cursor: pointer;
  padding: 0.5rem 0;
  padding-left: 1rem;
  transition: all 0.3s ease;
  font-weight: 600;
  white-space: nowrap;
}

.categoriesWrapper.expanded .moreBtn {
  position: relative;
  bottom: auto;
  right: auto;
  margin-top: 1.6rem;
  padding-left: 0;
  background: transparent;
}

.moreBtn:hover {
  color: rgb(153, 0, 0);
  text-decoration: underline;
}

.moreBtn svg {
  width: 1.6rem;
  height: 1.6rem;
}

.featuredArticle {
  display: flex;
  gap: 8rem;
  padding: 0 6rem;
  background: #f4f4f4;
  margin-bottom: 6.4rem;
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}

.featuredArticle:hover .featuredTitle {
  color: rgb(204, 0, 0);
}

.featuredImage {
  width: 100%;
  max-width: 75rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.featuredImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.featuredImage:hover img {
  transform: scale(1.05);
}

.featuredContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featuredTitle {
  font-family: "Prompt", sans-serif;
  font-size: 2.9rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  line-height: 3.7rem;
  margin-bottom: 1.5rem;
}

.featuredExcerpt {
  font-family: "Helvetica", sans-serif;
  font-size: 1.8rem;
  line-height: 2.7rem;
  color: rgb(51, 51, 51);
  margin-bottom: 1.5rem;
}

.featuredMeta {
  font-family: "Helvetica", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 2.7rem;
  color: rgb(102, 102, 102);
  margin-bottom: 2rem;
}

.featuredArrow {
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  border: 2px solid rgb(204, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(204, 0, 0);
  transition: all 0.3s ease;
}

.featuredArrow:hover {
  background: #f4e5e4;
}

.featuredArrow svg {
  width: 2.4rem;
  height: 2.4rem;
}

.articlesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 3rem;
  margin-bottom: 4rem;
}

.articleCard {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.articleCard:hover .articleTitle {
  color: rgb(204, 0, 0);
}

.articleImage {
  width: 100%;
  height: 20rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.articleImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 0.3s ease;
}

.articleCard:hover .articleImage img {
  transform: scale(1.05);
}

.articleCategory {
  font-family: "Helvetica", sans-serif;
  font-size: 1.4rem;
  line-height: 2.1rem;
  color: rgba(51, 51, 51, 0.6);
  margin-bottom: 0.8rem;
  display: block;
}

.articleTitle {
  font-family: "Prompt", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  line-height: 2.8rem;
  margin-bottom: 1rem;
  transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.articleExcerpt {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: rgb(51, 51, 51);
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.articleMeta {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: rgba(51, 51, 51, 0.6);
  margin-top: auto;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  padding: 3rem 0;
  border-top: 1px solid #e5e5e5;
}

.paginationBtn {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: rgb(51, 51, 51);
  cursor: pointer;
  transition: color 0.3s ease;
}

.paginationBtn:hover:not(:disabled) {
  color: rgb(51, 51, 51);
}

.paginationBtn:disabled {
  color: rgba(51, 51, 51, 0.6);
  cursor: not-allowed;
}

.paginationBtn svg {
  width: 1.8rem;
  height: 2.4rem;
  vertical-align: middle;
  position: relative;
  top: 1px;
}

.prevIcon {
}

.paginationNumbers {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pageNumber {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1.6rem;
  color: rgb(51, 51, 51);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0.3rem;
}

.pageNumber:hover {
  background: #f5f5f5;
}

.activePage {
  font-weight: 600;
  border-bottom: 0.2rem solid rgb(51, 51, 51);
  border-radius: 0;
}

.paginationDots {
  font-family: "Helvetica", sans-serif;
  font-size: 1.8rem;
  color: rgb(51, 51, 51);
  padding: 0 0.5rem;
}

/* ==========================================
   ABOUT US PAGE STYLES
   ========================================== */
.aboutPage {
  width: 100%;
  padding: 2rem 6.4rem 4rem;
}

.pageTitle {
  font-family: "Prompt", sans-serif;
  font-size: 3.2rem;
  line-height: 4rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  text-align: center;
  margin-bottom: 2rem;
}

.aboutContent {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.mainTitle {
  font-family: "Prompt", sans-serif;
  font-size: 4.1rem;
  font-weight: 700;
  color: rgb(51, 51, 51);
  line-height: 5.4rem;
  margin-bottom: 2rem;
}

.sectionTitle {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: rgb(51, 51, 51);
  line-height: 2.4rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.aboutContent p {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: rgb(51, 51, 51);
  margin-bottom: 1.5rem;
}

.italicText {
  font-style: italic;
}

.contactInfo {
  padding-top: 2rem;
}

.contactTitle {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  margin-bottom: 0.5rem;
}

.contactLink {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: rgb(204, 0, 0);
  text-decoration: none;
  display: block;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.contactLink:hover {
  text-decoration: underline;
}

.phoneInfo {
  margin-top: 1.5rem;
}

.phoneInfo p {
  margin-bottom: 0.3rem;
}

.hoursInfo {
  margin-top: 1.5rem;
}

.hoursInfo p {
  margin-bottom: 0.3rem;
}

.calendarLink {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: rgb(204, 0, 0);
  text-decoration: none;
  transition: color 0.3s ease;
}

.calendarLink:hover {
  text-decoration: underline;
}

/* ==========================================
   BRANDS PAGE STYLES
   ========================================== */
.brandsPage {
  width: 100%;
  padding: 1rem 6.4rem 4rem;
}

.heroBanner {
  width: 100%;
  margin-bottom: 2rem;
}

.heroBanner img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.filterSection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #e5e5e5;
  background: #f3f3f3;
}

.filterBtn {
  min-width: 4rem;
  height: 4rem;
  padding: 0 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid #000;
  border-radius: 0.3rem;
  font-size: 1.3rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  cursor: pointer;
  transition: all 0.3s ease;
}

.filterBtn.active,
.filterBtn:hover {
  background: rgb(51, 51, 51);
  border-color: rgb(51, 51, 51);
  color: #fff;
}

.filterTitle {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: rgb(51, 51, 51);
}

.brandsGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3rem 2rem;
}

.brandCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.brandCard:hover .brandLogo {
  opacity: 0.7;
}

.brandCard:hover .brandName {
  color: inherit;
}

.brandLogo {
  width: 100%;
  height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}

.brandLogo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.brandName {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 400;
  color: rgb(0, 0, 0);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

.noResults {
  text-align: center;
  padding: 4rem 0;
}

.noResults p {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  color: rgb(102, 102, 102);
}

/* ==========================================
   EYEGLASSES/SUNGLASSES PAGE STYLES
   ========================================== */
.eyeglassesPage {
  width: 100%;
  padding: 1rem 6.4rem;
}

.heroSection {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4rem;
  padding: 1rem 8rem 3rem 0;
}

.heroTitle {
  font-family: "Prompt", sans-serif;
  font-size: 3.2rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  margin-bottom: 1rem;
  line-height: 4rem;
}

.heroSubtitle {
  font-family: "Prompt", sans-serif;
  font-size: 2.5rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  margin-bottom: 0.5rem;
  line-height: 3.3rem;
}

.heroSectionSale {
  margin-bottom: 0;
}

.featureList {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.featureList li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  color: rgb(51, 51, 51);
  line-height: 2.4rem;
}

.featureList li .checkIcon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

.heroSection .heroContent {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 1rem 0;
  text-align: left;
  align-items: flex-start;
  max-width: none;
  margin: 0;
  width: auto;
  flex: 1;
}

.heroSection .heroContent h1 {
  text-align: left;
}

.heroSection .heroContent p {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.heroImage {
  flex: 1;
  max-width: 53.3rem;
  height: auto;
  display: flex;
  justify-content: flex-end;
}

.heroImage img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.categoriesSection {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0rem 0 3rem;
}

.sliderBtn {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  z-index: 10;
}

.sliderBtn:hover:not(:disabled) {
  border-color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sliderBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sliderBtn svg {
  font-size: 1.6rem;
  color: #333;
}

.categoriesSlider {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  flex: 1;
  padding: 1rem 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.categoriesSlider::-webkit-scrollbar {
  display: none;
}

.categoryCard {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 2rem;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
  flex-shrink: 0;
  max-width: 220px;
}

.categoryCard:hover {
  border-color: #333;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.categoryImage {
  width: 8rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.categoryImage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.categoryName {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 600;
  color: rgb(51, 51, 51);
  text-align: center;
}

.bestSellingSection {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3rem;
}

.bestSellingSectionCards {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem 2rem;
}

.bestSellingSectionCards.cards-3 {
  gap: 3rem 3rem;
}

.bestSellingLoadMore {
  width: 25rem;
  height: 4.6rem;
  border: 1px solid #000;
  outline: none;
  background: none;
  color: #000;
  transition: all 0.3s ease;
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  cursor: pointer;
}

.bestSellingLoadMore:hover:not(:disabled) {
  background: #000;
  color: #fff;
}

.bestSellingLoadMore:disabled {
  cursor: not-allowed;
}

.descriptionSection {
  width: 100%;
  max-width: 125rem;
  margin: 0 auto;
  padding: 2rem 0 0rem 0rem;
}

.sunglassesDescription {
  max-width: max-content;
}

.descriptionSection p {
  font-family: "Helvetica", sans-serif;
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: rgb(51, 51, 51);
  margin-bottom: 2rem;
}

.descriptionSection p a {
  color: #f01911;
  text-decoration: underline;
}

.descriptionSection h3 {
  font-family: "Helvetica", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.4rem;
  color: rgb(51, 51, 51);
  margin-bottom: 0.5rem;
  margin-top: 2rem;
}

.descriptionSection ul {
  list-style: disc;
  padding-left: 3rem;
  margin: 1.5rem 0 2rem;
}

.descriptionSection ul li {
  font-family: "Helvetica", sans-serif;
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: rgb(51, 51, 51);
  margin-bottom: 0.5rem;
}

.descriptionSection ul li strong {
  font-weight: 700;
}

.brandFeatureSection {
  width: max-content;
  background-color: #f5f5f5;
  padding: 2rem 4rem 2rem 0;
  margin: 2rem auto 3rem auto;
}

.brandFeatureContainer {
  display: flex;
  align-items: center;
  gap: 5rem;
}

.brandFeatureImage {
  width: 45rem;
  flex-shrink: 0;
}

.brandFeatureImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brandFeatureContent {
  flex: 1;
}

.brandFeatureContent h2 {
  font-family: "Prompt", sans-serif;
  font-size: 3.2rem;
  font-weight: 400;
  font-style: normal;
  color: rgb(51, 51, 51);
  margin-bottom: 1.5rem;
  line-height: 4rem;
}

.brandFeatureContent p {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: rgb(51, 51, 51);
  max-width: 55rem;
}

.kidsSizeIcon {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 10;
  pointer-events: none;
}

.kidsSizeDesktop {
  display: block;
  width: 5rem;
  height: auto;
  object-fit: contain;
}

.kidsSizeMobile {
  display: none;
  width: 4rem;
  height: auto;
  object-fit: contain;
}

/* ==========================================
   SALE PAGE STYLES
   ========================================== */
.salePriceWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}

.salePrices {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.salePrice {
  font-family: "Helvetica", sans-serif;
  font-size: 2rem;
  line-height: 2.4rem;
  font-weight: 700;
  color: #e22d2d;
}

.originalPrice {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  text-decoration: line-through;
}

.saleBadge {
  background-color: rgb(204, 0, 0);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  white-space: nowrap;
}

/* ==========================================
   RISK FREE GUARANTEE PAGE STYLES
   ========================================== */
.guaranteePage {
  width: 100%;
  padding: 2rem 6.4rem 4rem;
}

.badgeWrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}

.badge {
  width: 29.6rem;
  height: auto;
  object-fit: contain;
}

.guaranteeContent {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.guaranteeContent p {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: rgb(51, 51, 51);
  margin-bottom: 1.5rem;
}

.guaranteeContent p strong {
  font-weight: 700;
}

.link {
  color: rgb(204, 0, 0);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.link:hover {
  text-decoration: underline;
}

.bulletList {
  list-style: disc;
  padding-left: 3rem;
  margin-bottom: 1.5rem;
}

.bulletList li {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: rgb(51, 51, 51);
  margin-bottom: 0.8rem;
}

.addressSection {
  padding-top: 2rem;
}

.addressLabel {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  margin-bottom: 0.5rem;
}

.companyName {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  margin-bottom: 0.3rem;
}

.addressSection p {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: rgb(51, 51, 51);
  margin-bottom: 0.3rem;
}

/* ==========================================
   NOT FOUND / 404 PAGE STYLES
   ========================================== */
.container {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background: #fff;
}

.content {
  text-align: center;
  max-width: 50rem;
}

.errorCode {
  font-family: "Prompt", sans-serif;
  font-size: 12rem;
  font-weight: 600;
  color: rgb(204, 0, 0);
  line-height: 1;
  margin: 0;
}

.title {
  font-family: "Prompt", sans-serif;
  font-size: 3.2rem;
  font-weight: 400;
  color: #2a2b2a;
  margin: 1rem 0;
}

.description {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 3rem;
}

.icon {
  width: 100%;
  margin-bottom: 2rem;
}

.icon img {
  width: 15rem;
  height: auto;
}

/* ==========================================
   SHIPPING & MEASUREMENTS STYLES
   ========================================== */
.shippingSection {
  width: 100%;
}

.shippingTitle {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #333333;
  margin-bottom: 2rem;
  line-height: 2.4rem;
}

.shippingTable {
  margin-bottom: 2rem;
}

.shippingRow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  padding: 0.3rem 0;
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
}

.shippingLabel {
  color: #333;
  font-weight: bold;
  font-size: 1.8rem;
  min-width: 150px;
}

.shippingValue {
  color: #333;
  font-size: 1.8rem;
  font-weight: 400;
}

.shippingText {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: #333333;
  margin-bottom: 1.5rem;
}

.shippingLink {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: #333333;
  margin-bottom: 2rem;
}

.shippingSubtitle {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #333333;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.measurementsSection {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.measurementsTable {
  width: 100%;
  border-collapse: collapse;
  font-family: "Helvetica", sans-serif;
}

.measurementsTable thead th {
  text-align: center;
  padding: 0.5rem 1rem;
  vertical-align: bottom;
}

.measurementsTable thead th:first-child {
  width: 40%;
}

.measurementsTable .sizeLabel {
  display: block;
  font-size: 1.6rem;
  font-weight: 400;
  color: #333333;
}

.measurementsTable .sizeAsterisk {
  display: block;
  font-size: 1.4rem;
  font-weight: 400;
  color: #333333;
}

.measurementsTable .sizeNumber {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: #333333;
  margin-top: 0.2rem;
}

.measurementsTable tbody td {
  padding: 0.3rem 1rem;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #333333;
  text-align: center;
}

.measurementsTable tbody td.measurementLabel {
  white-space: nowrap;
  text-align: left;
  font-weight: 400;
  color: #333;
}

.measurementNote {
  margin: 1.5rem 0 0 0;
  font-family: "Helvetica", sans-serif;
  font-size: 1.4rem;
  color: #333333;
  font-style: normal;
  text-align: left;
}

.additionalInfo {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e5e5;
}

.additionalInfo p {
  font-family: "Helvetica", sans-serif;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #333333;
  margin-bottom: 1rem;
}

.additionalInfo p:first-child {
  margin-bottom: 1.5rem;
}

.redText {
  color: #c62828;
  font-weight: 600;
}

.specificationTable {
  width: 100%;
}

.specRow {
  display: flex;
  gap: 5rem;
  padding: 0.5rem 0;
}

.specRow:last-child {
  border-bottom: none;
}

.specLabel {
  width: 20rem;
  font-family: "Helvetica", sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
}

.specValue {
  font-family: "Helvetica", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: #333;
  text-align: right;
}

/* ==========================================
   MODAL STYLES
   ========================================== */
.modalTitle {
  font-family: "Prompt", sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 1rem;
}

.modalDescription {
  font-family: "Prompt", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #333;
  margin-bottom: 2rem;
}

.modalNote {
  font-family: "Helvetica", sans-serif;
  font-size: 1.4rem;
  line-height: 1.8rem;
  color: #333;
  margin-bottom: 1.5rem;
}

.modalNote span {
  color: #c7100a;
}

.modalFootnote {
  font-family: "Helvetica", sans-serif;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #333;
  margin: 1rem 0 2rem 0;
  padding-left: 10%;
}

.sizeTable {
  width: 80%;
  border-collapse: collapse;
  margin: 0 auto;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
}

.sizeTable th,
.sizeTable td {
  padding: 1rem;
  text-align: left;
  font-family: "Helvetica", sans-serif;
  font-size: 1.4rem;
  line-height: 1.8rem;
  border: 1px solid #ccc;
}

.sizeTable thead {
  background-color: #d9d7d7;
}

.sizeTable th {
  font-weight: 700;
  color: rgb(51, 51, 51);
}

.sizeTable tbody tr {
  background-color: #d9d7d7;
}

.sizeTable tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

.sizeTable td {
  color: rgb(51, 51, 51);
}

.diagramSection {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
}

.diagramSection img {
  width: 48.5rem;
  height: auto;
}

.diagramLabels {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.diagramLabels p {
  font-family: "Helvetica", sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 2rem;
  color: #333;
}

.imageModalClose {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 5rem;
  height: 5rem;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  font-size: 3rem;
  line-height: 100%;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 2001;
  padding: 0;
}

.imageModalClose:hover {
  background-color: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.imageModalNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 6rem;
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2001;
}

.imageModalNav:hover {
  background-color: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.1);
}

.imageModalNavLeft {
  left: 3rem;
  background: none;
}
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 2001;
  padding: 0;
}

.imageModalClose:hover {
  background-color: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.imageModalNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 6rem;
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2001;
}

.imageModalNav:hover {
  background-color: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.1);
}

.imageModalNavLeft {
  left: 3rem;
  background: none;
}

.imageModalNavRight {
  right: 3rem;
  background: none;
}

/* ==========================================
   BOTTOM BAR (MOBILE CART)
   ========================================== */
.bottomBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  z-index: 100;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.bottomBarVisible {
  transform: translateY(0);
}

.bottomBarContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 6.4rem;
  gap: 2rem;
}

.bottomBarLeft {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
}

.bottomBarImage {
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
}

.bottomBarImage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bottomBarInfo {
  flex: 1;
}

.bottomBarInfo h4 {
  font-family: "Helvetica", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.3rem;
}

.bottomBarVariant {
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  color: rgb(51, 51, 51);
  line-height: 2.1rem;
  margin-bottom: 0.2rem;
}

.bottomBarChoose {
  color: #c7100a;
  cursor: pointer;
  font-weight: 600;
}

.bottomBarPrice {
  font-family: "Helvetica", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
}

.bottomBarButtons {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}

.bottomBarButtons button {
  padding: 0.8rem 2rem;
  font-size: 1.4rem;
  font-weight: 700;
  border-radius: 3rem;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.bottomBarButtons button:first-child {
  background: #fff;
  color: #000;
  border: 2px solid #000;
}

.bottomBarButtons button:first-child:hover {
  background: #000;
  color: #fff;
}

.bottomBarButtons button:last-child {
  background: #000;
  color: #fff;
  border: 2px solid #000;
}

.bottomBarButtons button:last-child:hover {
  background: #fff;
  color: #000;
}

/* ==========================================
   READ MORE & ADDITIONAL
   ========================================== */
.readMore {
  background: transparent;
  border: none;
  color: #fc3131;
  font-size: 1.8rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin-top: 1rem;
  text-decoration: none;
  transition: text-decoration 0.3s ease;
}

.readMore:hover {
  text-decoration: underline;
}

.accordionCollapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms cubic-bezier(0.2, 0, 0, 1);
  will-change: grid-template-rows;
}

.accordionCollapseInner {
  overflow: hidden;
}

.sizeHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  margin-bottom: 0rem;
  padding-bottom: 1rem;
}

.sizeLabel {
  display: block;
  font-family: "Helvetica", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #333333;
}

.sizeValue {
  display: block;
  font-family: "Helvetica", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #333333;
}

.sizeAsterisk {
  font-weight: 700;
}

.sizeNumber {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: #333333;
  margin-top: 0.2rem;
}

.measurementRow {
  display: flex;
  gap: 5rem;
  padding: 0.5rem 0;
}

.measurementLabel {
  font-family: "Helvetica", sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
}

@media (prefers-reduced-motion: reduce) {
  .accordionCollapse {
    transition: none;
  }

  .accordionContent {
    transition: none;
  }
}

/* ==========================================
   RESPONSIVE BREAKPOINTS FOR NEW STYLES
   ========================================== */
@media (max-width: 1200px) {
  .articlesPage {
    padding: 1rem 3.2rem 0rem;
  }

  .articlesGrid {
    gap: 3rem 2rem;
  }

  .featuredArticle {
    padding: 2rem 2rem 2rem 0;
  }

  .featuredImage {
    width: 100%;
    max-width: 70rem;
  }

  .brandsGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .articlesPage {
    padding: 1rem 3.2rem 0rem;
  }

  .featuredArticle {
    gap: 3rem;
  }

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

  .featuredImage {
    max-width: 50rem;
  }

  .brandsPage {
    padding: 1rem 3.2rem 4rem;
  }

  .brandsGrid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem 1.5rem;
  }

  .brandLogo {
    height: 8rem;
  }

  .eyeglassesPage {
    padding: 1rem 3.2rem;
  }

  .brandFeatureContainer {
    gap: 3rem;
  }

  .brandFeatureImage {
    width: 35rem;
    height: 25rem;
  }

  .brandFeatureContent h2 {
    font-size: 2.8rem;
  }

  .brandFeatureContent p {
    font-size: 1.5rem;
    line-height: 2.4rem;
  }

  .guaranteePage {
    padding: 2rem 3.2rem 4rem;
  }

  .aboutPage {
    padding: 2rem 3.2rem 4rem;
  }
}

@media (max-width: 768px) {
  .articlesPage {
    padding: 1rem 2rem 0rem;
  }

  .articlesHeader {
    margin-bottom: 3.2rem;
  }

  .categoriesWrapper {
    margin-bottom: 3.2rem;
    padding-right: 6rem;
  }

  .categoriesInner {
    gap: 0rem 2rem;
    max-height: calc((2.4rem + 0.8rem) * 2 + 0rem);
  }

  .categoryBtn {
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 0.4rem 0;
  }

  .moreBtn {
    font-size: 1.6rem;
    line-height: 2.4rem;
    bottom: 1rem;
  }

  .featuredArticle {
    width: 100%;
    flex-direction: column;
    gap: 2rem;
    padding: 0;
  }

  .featuredImage {
    max-width: 100%;
    height: auto;
  }

  .featuredImage img {
    width: 100%;
    height: auto;
  }

  .featuredContent {
    padding: 0 2rem 2rem;
  }

  .brandsPage {
    padding: 1rem 2rem 3rem;
  }

  .pageTitle {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }

  .filterSection {
    gap: 0.4rem;
  }

  .filterBtn {
    min-width: 2.5rem;
    height: 2.5rem;
    font-size: 1.1rem;
  }

  .brandsGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.5rem;
  }

  .brandLogo {
    height: 7rem;
  }

  .heroSection {
    flex-direction: column;
    padding: 1rem 0 0 0;
  }

  .heroTitle {
    margin: 0;
  }

  .categoriesSection {
    padding: 1.5rem 0;
  }

  .descriptionSection p,
  .descriptionSection ul li {
    font-size: 1.6rem;
    line-height: 2.2rem;
  }

  .descriptionSection h3 {
    font-size: 1.6rem;
    line-height: 2.2rem;
  }

  .brandFeatureSection {
    width: 100%;
    padding: 2rem 0;
  }

  .brandFeatureContainer {
    flex-direction: column;
  }

  .brandFeatureImage {
    width: 100%;
    height: 39.6rem;
  }

  .brandFeatureContent p {
    max-width: 100%;
  }

  .badgeWrapper {
    margin-bottom: 2rem;
  }

  .guaranteeContent {
    padding: 0;
  }

  .bulletList {
    padding-left: 2.5rem;
  }

  .guaranteePage {
    padding: 1.5rem 2rem 3rem;
  }

  .aboutPage {
    padding: 1.5rem 2rem 3rem;
  }

  .aboutContent {
    padding: 0;
  }

  .errorCode {
    font-size: 8rem;
  }

  .title {
    font-size: 2.4rem;
  }

  .description {
    font-size: 1.4rem;
  }

  .buttons {
    flex-direction: column;
    align-items: center;
  }

  .btnPrimary,
  .btnSecondary {
    width: 100%;
    max-width: 25rem;
    text-align: center;
  }

  .shippingLabel {
    min-width: 120px;
  }

  .modalContent {
    width: 95%;
    padding: 2.5rem 1.5rem;
    max-height: 85vh;
  }

  .diagramSection {
    flex-direction: column;
    gap: 2rem;
  }

  .diagramSection img {
    width: 100%;
    max-width: 40rem;
  }

  .diagramLabels {
    width: 100%;
    padding: 0 1rem;
  }

  .diagramLabels p {
    font-size: 1.3rem;
    line-height: 2.2rem;
  }

  .imageModalClose {
    width: 4rem;
    height: 4rem;
    font-size: 4rem;
    top: 1.5rem;
    right: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  .imageModalNav {
    width: 5rem;
    height: 5rem;
  }

  .imageModalNavLeft {
    left: 2rem;
  }

  .imageModalNavRight {
    right: 2rem;
  }
}

@media (max-width: 480px) {
  .articlesPage {
    padding: 1rem 1.5rem 0rem;
  }

  .articlesGrid {
    grid-template-columns: 1fr;
    gap: 3rem 0;
  }

  .featuredArticle {
    margin-bottom: 3rem;
  }

  .categoriesWrapper {
    padding-right: 5.5rem;
  }

  .categoriesInner {
    gap: 0.3rem 1.5rem;
    max-height: calc((2.2rem + 0.6rem) * 2 + 0.3rem);
  }

  .categoryBtn {
    font-size: 1.4rem;
    line-height: 2.2rem;
    padding: 0.3rem 0;
  }

  .moreBtn {
    font-size: 1.4rem;
    line-height: 2.2rem;
    bottom: 1rem;
  }

  .moreBtn svg {
    width: 1.4rem;
    height: 1.4rem;
  }

  .brandsPage {
    padding: 1rem 1.5rem 2rem;
  }

  .pageTitle {
    font-size: 2.5rem;
    line-height: 1;
  }

  .filterSection {
    gap: 0.3rem;
  }

  .filterBtn {
    min-width: 3rem;
    height: 3rem;
    font-size: 1.6rem;
    padding: 0 0.5rem;
  }

  .filterBtn:first-child {
    padding: 0 1rem;
    font-size: 1.6rem;
  }

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

  .brandLogo {
    height: 6rem;
  }

  .eyeglassesPage {
    padding: 1rem 2rem;
  }

  .backButton {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.2rem;
  }

  .heroImage {
    display: none;
  }

  .categoryCard {
    width: 12rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 1.2rem;
  }

  .heroSubtitle {
    font-size: 2.2rem;
  }

  .brandFeatureSection {
    background: none;
    padding: 0;
  }

  .brandFeatureImage {
    display: none;
  }

  .brandFeatureContent h2 {
    font-size: 3.3rem;
    line-height: 4rem;
  }

  .brandFeatureContent p {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }

  .guaranteePage {
    padding: 1rem 1.5rem 2rem;
  }

  .bulletList {
    padding-left: 2rem;
  }

  .aboutPage {
    padding: 1rem 1.5rem 2rem;
  }

  .mainTitle {
    font-size: 3rem;
    line-height: 4rem;
  }

  .sizeHeader {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

@media (max-width: 1440px) and (min-width: 769px) {
  .kidsSizeIcon {
    bottom: 0.8rem;
    right: 0.8rem;
  }

  .kidsSizeDesktop {
    width: 4.5rem;
  }

  .heroSectionSale {
    margin-bottom: 2rem;
  }

  .salePriceWrapper {
    gap: 0.8rem;
  }

  .salePrice {
    font-size: 1.9rem;
  }

  .originalPrice {
    font-size: 1.5rem;
  }

  .saleBadge {
    font-size: 1.1rem;
    padding: 0.4rem 0.8rem;
  }

  .bestSellingSectionCards {
    justify-content: flex-start;
  }

  .bestSellingSectionCards .bestSellingCard {
    width: calc((100% - 6rem) / 3);
  }

  .bestSellingSectionCards.cards-4 .bestSellingCard {
    width: calc((100% - 6rem) / 4);
  }

  .bestSellingImageBox {
    height: clamp(24rem, 20vw, 34rem);
  }
}

@media (max-width: 768px) {
  .bottomBarContent {
    padding: 1rem 2rem;
    flex-wrap: wrap;
  }

  .bottomBarButtons button {
    padding: 0.6rem 1.5rem;
    font-size: 1.2rem;
  }
}

@media (max-width: 768px) and (min-width: 481px) {
  .kidsSizeIcon {
    bottom: 0.6rem;
    right: 0.6rem;
  }

  .kidsSizeDesktop {
    width: 4rem;
  }

  .heroSectionSale {
    margin-bottom: 2rem;
  }

  .salePriceWrapper {
    gap: 0.5rem;
  }

  .salePrice {
    font-size: 1.8rem;
  }

  .originalPrice {
    font-size: 1.4rem;
  }

  .saleBadge {
    font-size: 1rem;
    padding: 0.4rem 0.8rem;
  }
}

@media (max-width: 480px) {
  .kidsSizeIcon {
    bottom: 0.5rem;
    right: 0.5rem;
  }

  .kidsSizeDesktop {
    display: none;
  }

  .kidsSizeMobile {
    display: block;
    width: 5rem;
  }

  .heroSectionSale {
    margin-bottom: 2rem;
  }

  .salePriceWrapper {
    gap: 0.4rem;
    margin-bottom: 0.8rem;
  }

  .salePrices {
    gap: 0.6rem;
  }

  .salePrice {
    font-size: 1.3rem;
    line-height: 1.8rem;
  }

  .originalPrice {
    font-size: 1.1rem;
    line-height: 1.8rem;
  }

  .saleBadge {
    font-size: 0.9rem;
  }
}

@media (max-width: 1440px) {
  .imageSection {
    max-width: 77rem;
  }

  .productDetail {
    padding: 1rem 6.4rem;
  }

  .productGrid {
    gap: 3rem;
    justify-content: space-between;
  }

  .imageZoomContainer {
    width: 100%;
    height: 50rem;
  }

  .productInfo {
    width: 53.9rem;
  }
}