/* Add custom CSS styles below */ 
/* Add custom CSS styles below */

.top-navbar {
  background: linear-gradient(90deg, rgb(239, 58, 34) 0%, rgb(245, 130, 32) 100%);
  color: white;
}

.banner-entry {
  min-height: 260px;
}

.sm\:gap-8 {
  gap: 3rem;
}

.store-footer__inner {
  background: linear-gradient(
    180deg,
    rgba(0, 67, 117, 1) 0%,
    rgba(0, 114, 188, 1) 100%
  );
  color: white;
}

.navbar-brand h2 {
  color: white;
}

.h-80 {
  height: 100%;
}

.s-contacts-item {
  width: 300px;
}

/* =====================
   BANNERS – MOBILE
===================== */
@media (max-width: 767px) {
  .s-block--banners .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .s-block--banners .grid .banner-entry {
    min-height: 80px;
    height: 80px;
  }

  .s-block--banners .grid.sm\:gap-8 {
    gap: 1rem;
  }

  .s-block--banners + .s-block--banners {
    margin-top: 2rem;
  }
}

/* =====================
   FEATURES – MOBILE
===================== */
@media screen and (max-width: 767px) {
  .s-block--features.cards-view .arrow {
    margin-top: 0;
    margin-bottom: 0;
    width: 3rem;
  }

  .s-block--features.cards-view .s-block--features__item p {
    display: none;
  }

  .s-block--features.cards-view
    .flex.flex-col.gap-6.items-center.justify-center {
    flex-direction: row;
    align-items: start !important;
    gap: 0.25rem !important;
  }

  .s-block--features.cards-view .arrow {
    transform: rotate(180deg);
    margin-top: 50px;
  }

  .s-block--features__item.flex {
    flex-direction: column !important;
  }
}

/* =====================
   CATEGORIES – MOBILE
===================== */
@media screen and (max-width: 767px) {
  .s-block--categories
    .swiper:where([dir="rtl"], [dir="rtl"] *) {
    padding-left: 0.5rem;
  }

  .s-block--categories .swiper.s-slider-container {
    overflow: visible !important;
  }

  .s-block--categories .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
    transform: none !important;
    transition: none !important;
  }

  .s-block--categories .swiper-slide {
    width: 100% !important;
    flex: unset !important;
    height: auto !important;
  }

  .s-block--categories .slide--cat-entry {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    border-width: 0;
  }

  .s-block--categories .slide--cat-entry .link-image {
    order: -1;
    width: 70px;
    height: 70px;
  }

  .s-block--categories .slide--cat-entry > div:last-child {
    order: 2;
  }

  .s-block--categories .slide--cat-entry .link-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .s-block--categories .swiper.s-slider-container.swiper-pointer-events {
    pointer-events: auto;
  }

  .s-block--categories .swiper.s-slider-container .swiper-wrapper {
    pointer-events: none;
  }

  .s-block--categories .swiper.s-slider-container .swiper-slide {
    pointer-events: auto;
  }
}

/* =====================
   BLOG LAYOUT FIXES
===================== */
#block-blog-11
  .h-full.flex.flex-col.border.border-gray-200.dark\:border-white\/10.rounded.overflow-hidden.bg-white.dark\:bg-dark {
  position: relative;
  background: transparent !important;
  border: none !important;
  overflow: hidden;
}

#block-blog-11
  .h-full.flex.flex-col.border.border-gray-200.dark\:border-white\/10.rounded.overflow-hidden.bg-white.dark\:bg-dark
  .bg-gray-50 {
  position: relative;
  z-index: 0;
}

#block-blog-11
  .h-full.flex.flex-col.border.border-gray-200.dark\:border-white\/10.rounded.overflow-hidden.bg-white.dark\:bg-dark
  .bg-gray-50
  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(70%);
}

#block-blog-11
  .h-full.flex.flex-col.border.border-gray-200.dark\:border-white\/10.rounded.overflow-hidden.bg-white.dark\:bg-dark
  .flex.flex-col.gap-2\.5.p-6 {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0)
  );
  color: #fff;
  text-align: right;
  padding-top: 7rem;
}

#block-blog-11 .flex.flex-col.gap-2\.5.p-6 h2 a,
#block-blog-11 .flex.flex-col.gap-2\.5.p-6 p,
#block-blog-11 .flex.flex-col.gap-2\.5.p-6 small {
  color: #fff !important;
}

#block-blog-11 .flex.flex-col.gap-2\.5.p-6 salla-button,
#block-blog-11 .flex.flex-col.gap-2\.5.p-6 .btn--main {
  position: relative;
  z-index: 3;
}