/* =========================
   Header Logo
========================= */
.store-header .navbar-brand img.logo-light,
.store-header .navbar-brand img {
  width: 80px !important;
  height: 80px !important;
  max-width: 80px !important;
  object-fit: contain !important;
}

@media (max-width: 768px) {
  .store-header .navbar-brand img.logo-light,
  .store-header .navbar-brand img {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
  }
}

/* =========================
   Hero / Fixed Banner
========================= */
section.s-block.s-block--fixed-banner.wide-placeholder {
  padding-block: 0 !important;
}

section.s-block.s-block--fixed-banner.wide-placeholder > .container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* =========================
   General Banners
========================= */
.banner-entry {
  height: 350px !important;
}

@media (max-width: 480px) {
  .banner-entry {
    height: 240px !important;
  }
}

.sm\:gap-8 {
  gap: 1rem !important;
}

/* =========================
   Orange Banner Sections
========================= */
section.s-block.s-block--banners.container:nth-of-type(2),
section.s-block.s-block--banners.container:nth-of-type(3) {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background: #ea8349 !important;
}

section.s-block.s-block--banners.container:nth-of-type(2) {
  padding-top: 50px !important;
}

section.s-block.s-block--banners.container:nth-of-type(3) {
  padding: 8px 0 50px !important;
  margin-top: 0 !important;
}

section.s-block.s-block--banners.container:nth-of-type(2) > .grid,
section.s-block.s-block--banners.container:nth-of-type(3) > .grid {
  width: 1400px !important;
  max-width: calc(100% - 40px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 12px !important;
}

section.s-block.s-block--banners.container:nth-of-type(2) .banner-entry,
section.s-block.s-block--banners.container:nth-of-type(3) .banner-entry {
  border-radius: 8px !important;
  overflow: hidden !important;
}

section.s-block.s-block--banners.container:nth-of-type(2) img,
section.s-block.s-block--banners.container:nth-of-type(3) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 768px) {
  section.s-block.s-block--banners.container:nth-of-type(2),
  section.s-block.s-block--banners.container:nth-of-type(3) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  section.s-block.s-block--banners.container:nth-of-type(2) > .grid,
  section.s-block.s-block--banners.container:nth-of-type(3) > .grid {
    max-width: calc(100% - 20px) !important;
    gap: 8px !important;
  }
}

/* =========================
   Last Banner Section
========================= */
section.s-block.s-block--banners.container:last-of-type > .grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
}

section.s-block.s-block--banners.container:last-of-type .banner-entry {
  height: 250px !important;
}

@media (max-width: 768px) {
  section.s-block.s-block--banners.container:last-of-type > .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  section.s-block.s-block--banners.container:last-of-type .banner-entry {
    height: 180px !important;
  }
}

/* =========================
   Product Cards Hover
========================= */
.s-product-card-entry {
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  overflow: hidden !important;
}

.s-product-card-entry:hover {
  box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px !important;
  z-index: 5 !important;
}

/* =========================
   Product Sections Spacing
========================= */
section#best-offers-3-slider,
section#best-offers-5-slider,
section#best-offers-7-slider,
section#best-offers-11-slider {
  margin-block: 30px !important;
}

/* =========================
   Footer Logo
========================= */
a.flex.items-center.m-0.logo-footer img {
  width: 150px !important;
  height: 150px !important;
  object-fit: contain !important;
}