/* ==========================================================================
   1. BUTTONS & GLOBAL OVERRIDES
   ========================================================================== */
.s-button-outline.s-button-primary-outline {
  background: #1C3D32 !important;
  border-color: #1C3D32 !important;
  color: #fff !important;
}

.s-button-outline.s-button-primary-outline .s-button-text,
.s-button-outline.s-button-primary-outline i {
  color: #fff !important;
}

/* ==========================================================================
   2. HEADER & NAVBAR
   ========================================================================== */
.store-header,
#mainnav .inner {
  position: relative;
  overflow: hidden;
  background-color: #17362d;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0px, rgba(255, 255, 255, .05) 1px, transparent 1px, transparent 70px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0px, rgba(255, 255, 255, .05) 1px, transparent 1px, transparent 70px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0px, rgba(0, 0, 0, .18) 28px, transparent 28px, transparent 150px),
    linear-gradient(90deg, #17362d 0%, #1b4036 50%, #17362d 100%);
}

.store-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 6px 6px;
  opacity: .35;
  mix-blend-mode: soft-light;
}

@media (max-width: 991px) {
  #mainnav .inner .container > .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .flex.items-center:first-child {
    width: 100%;
  }
}

/* ==========================================================================
   3. FOOTER SECTION
   ========================================================================== */
.store-footer,
.store-footer__inner,
.store-footer__contacts-row,
.footer-bottom,
.footer-bottom .container {
  background: transparent !important;
}

.store-footer {
  position: relative;
  overflow: hidden;
  background-color: #17362d !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .05) 1px, transparent 1px, transparent 90px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .05) 1px, transparent 1px, transparent 90px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0, rgba(0, 0, 0, .18) 35px, transparent 35px, transparent 180px),
    linear-gradient(90deg, #17362d, #1d4037, #17362d) !important;
}

.store-footer__curve {
  color: #17362d !important;
}

.store-footer,
.store-footer * {
  color: #fff !important;
}

/* ==========================================================================
   4. ENHANCED FEATURES SECTION (WHY ZHI)
   ========================================================================== */
/* Container General Styles */
.s-block--enhanced-features {
  background: #17362d;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  padding: 45px 35px !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0, rgba(255, 255, 255, .04) 1px, transparent 1px, transparent 70px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0, rgba(255, 255, 255, .04) 1px, transparent 1px, transparent 70px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0, rgba(0, 0, 0, .18) 35px, transparent 35px, transparent 180px),
    linear-gradient(90deg, #17362d, #1b4036, #17362d);
}

.s-block--enhanced-features::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://cdn.files.salla.network/homepage/2025390797/c564e08b-af82-4021-afd0-07087e0ac7f1_1440x634.webp") left center/280px auto no-repeat;
  opacity: .05;
  pointer-events: none;
}

/* Items Base Styles */
.s-block--enhanced-features__item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: center;
  padding: 30px 25px !important;
  position: relative;
}

/* Dividing Lines */
.s-block--enhanced-features__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18%;
  left: 0;
  width: 1px;
  height: 64%;
  background: rgba(255, 255, 255, .15);
}

/* Icons & Content Styling */
.s-block--enhanced-features .feature-icon {
  margin-bottom: 20px !important;
}

.s-block--enhanced-features .feature-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: none !important;
}

.s-block--enhanced-features h2,
.s-block--enhanced-features [data-selia="home-enhanced-features-item-title"] {
  color: #fff !important;
  font-size: 24px;
  font-weight: 700;
  margin: 18px 0 12px !important;
}

.s-block--enhanced-features p,
.s-block--enhanced-features [data-selia="home-enhanced-features-item-subtitle"] {
  color: #e3e3e3 !important;
  line-height: 1.8;
  font-size: 15px;
  margin: 0 auto !important;
  max-width: 220px;
}

/* Hover Overrides */
.s-block--enhanced-features__item div[class*=absolute] {
  display: none !important;
}

.s-block--enhanced-features__item:hover {
  transform: none !important;
}

/* Layout for Desktop Screen */
@media (min-width: 768px) {
  .s-block--enhanced-features > .grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
  }
}

/* Layout for Mobile Screen (Forced Single Row Flexbox Layout) */
@media (max-width: 767px) {
  .s-block--enhanced-features {
    padding: 20px 5px !important;
  }

  .s-block--enhanced-features > .grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .s-block--enhanced-features .s-block--enhanced-features__item {
    flex: 1 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding: 5px 2px !important;
    box-sizing: border-box !important;
  }

  .s-block--enhanced-features__item:not(:last-child)::after {
    top: 10%;
    height: 80%;
  }

  .s-block--enhanced-features .feature-icon {
    font-size: 1.1rem !important;
    margin-bottom: 4px !important;
  }

  .s-block--enhanced-features h2,
  .s-block--enhanced-features [data-selia="home-enhanced-features-item-title"] {
    font-size: 0.6rem !important;
    line-height: 1.1 !important;
    margin: 2px 0 !important;
    word-break: break-word;
  }

  .s-block--enhanced-features p,
  .s-block--enhanced-features [data-selia="home-enhanced-features-item-subtitle"] {
    font-size: 0.48rem !important;
    line-height: 1.1 !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   5. SPECIAL CATEGORIES WITH BG SECTION
   ========================================================================== */
.special-cats-with-bg > .absolute,
.special-cats-with-bg .relative.mx-auto.max-w-3xl {
  display: none !important;
}

.special-cats-with-bg section[aria-labelledby] {
  margin-top: 0 !important;
}

.special-cats-with-bg {
  padding: 40px 0 !important;
}

.special-cats-with-bg .category-name,
.special-cats-with-bg p,
.special-cats-with-bg a {
  font-size: 0 !important;
  color: transparent !important;
}

.special-cats-with-bg .bg-gradient-to-b {
  display: none !important;
}

@media (max-width: 640px) {
  .special-cats-with-bg section[aria-labelledby] > div {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    max-width: 100% !important;
    padding: 0 12px !important;
  }

  .special-cats-with-bg [data-selia="home-special-cats-bg-card"] {
    height: 120px !important;
    border-radius: 14px !important;
  }
}