/*
 * ASTAR Premium — Dopame-inspired layout for Salla Twilight
 * Version: 1.2.0
 * Scope: full storefront experience layer for Salla Twilight.
 * Pair with: astar-experience-v1.js
 * Does not alter product data, prices, inventory or checkout.
 */

:root {
  --as-primary: #8fd6f2;
  --as-primary-strong: #111111;
  --as-primary-deep: #111111;
  --as-secondary: #b7e51f;
  --as-ink: #111111;
  --as-muted: #111111;
  --as-line: #ffffff;
  --as-surface: #ffffff;
  --as-soft: #ffffff;
  --as-soft-blue: #8fd6f2;
  --as-danger: #b7e51f;
  --as-radius-sm: 10px;
  --as-radius-md: 16px;
  --as-radius-lg: 22px;
  --as-shadow: 0 8px 24px rgba(25, 56, 75, 0.08);
  --as-shadow-hover: 0 16px 34px rgba(25, 56, 75, 0.14);
  --as-container: 1280px;
  --as-blue-900: #111111;
  --as-blue-800: #111111;
  --as-blue-100: #8fd6f2;
  --as-lime-soft: #b7e51f;
  --as-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


html {
  scroll-behavior: smooth;
}

body,
.app-inner {
  color: var(--as-ink) !important;
  background: var(--as-surface) !important;
  font-family: "Almarai", "DIN Next Arabic", "Segoe UI", Arial, sans-serif !important;
}

.container {
  width: min(calc(100% - 32px), var(--as-container)) !important;
  max-width: var(--as-container) !important;
  margin-inline: auto !important;
}

a,
button,
salla-add-product-button {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s ease !important;
}

/* ---------- Promotion strip ---------- */
.promotion-banner-wrapper,
.promotion-banner,
.promotion-banner__inner {
  background: var(--as-secondary) !important;
  color: #fff !important;
}

.promotion-banner {
  min-height: 34px !important;
  border: 0 !important;
}

.promotion-banner__inner {
  min-height: 34px !important;
}

.promotion-banner__inner a {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* ---------- Header ---------- */
.store-header {
  position: relative;
  z-index: 50;
  background: var(--as-surface) !important;
  border-bottom: 1px solid var(--as-line) !important;
  box-shadow: none !important;
}

.store-header.as-scrolled {
  box-shadow: 0 12px 30px rgba(18, 52, 74, 0.1) !important;
  border-bottom-color: rgba(18, 52, 74, 0.14) !important;
}

.store-header.as-scrolled .navbar-brand img,
.store-header.as-scrolled .navbar-brand .logo-normal {
  transform: scale(0.94);
}

.top-navbar {
  min-height: 38px !important;
  color: var(--as-muted) !important;
  background: var(--as-soft) !important;
  border-bottom: 1px solid var(--as-line) !important;
}

.header__topbar-inner {
  min-height: 38px !important;
  align-items: center !important;
}

.topnav-link-item,
.topnav-link-item a,
.header__language-btn {
  color: var(--as-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.topnav-link-item a:hover,
.header__language-btn:hover {
  color: var(--as-primary-deep) !important;
}

.main-nav-container,
.main-nav-container .inner {
  background: var(--as-surface) !important;
}

.header__main-row {
  min-height: 82px !important;
  padding-block: 10px !important;
  align-items: center !important;
  gap: 20px !important;
}

.header__main-start {
  flex: 0 0 auto !important;
}

.navbar-brand {
  width: 86px !important;
  min-width: 86px !important;
  margin: 0 !important;
}

.navbar-brand img,
.navbar-brand .logo-normal {
  width: 86px !important;
  max-height: 62px !important;
  object-fit: contain !important;
}

.mobile-menu {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.main-menu {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none;
}

.main-menu::-webkit-scrollbar {
  display: none;
}

.main-menu__desktop-item {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.main-menu__desktop-item > a,
.main-menu__parent-label,
.main-menu__link {
  min-height: 40px !important;
  padding: 9px 11px !important;
  color: var(--as-ink) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.main-menu__desktop-item > a:hover,
.main-menu__parent-label:hover,
.main-menu__link:hover {
  color: var(--as-primary-deep) !important;
  background: var(--as-soft-blue) !important;
}

.main-menu__desktop-item.offers-link > a,
.offers-link > a {
  color: var(--as-secondary) !important;
  background: #8fd6f2 !important;
}

.sub-menu {
  padding: 8px !important;
  background: var(--as-surface) !important;
  border: 1px solid var(--as-line) !important;
  border-radius: var(--as-radius-md) !important;
  box-shadow: var(--as-shadow) !important;
}

.header__main-end {
  flex: 0 0 auto !important;
  gap: 4px !important;
}

.header-btn,
.header__cart-summary,
.theme-toggle,
.store-header button[aria-label="Search"] {
  width: 42px !important;
  height: 42px !important;
  margin: 0 2px !important;
  color: var(--as-ink) !important;
  background: var(--as-soft) !important;
  border: 1px solid var(--as-line) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.header-btn:hover,
.header__cart-summary:hover,
.theme-toggle:hover,
.store-header button[aria-label="Search"]:hover {
  color: var(--as-primary-deep) !important;
  background: var(--as-soft-blue) !important;
  border-color: var(--as-primary) !important;
  transform: translateY(-1px) !important;
}

.s-cart-summary-count {
  color: #fff !important;
  background: var(--as-secondary) !important;
  border: 2px solid #fff !important;
}

/* ---------- Main hero ---------- */
.s-block--photos-slider:first-of-type {
  width: min(calc(100% - 32px), var(--as-container)) !important;
  margin: 18px auto 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--as-soft) !important;
  border: 1px solid var(--as-line) !important;
  border-radius: var(--as-radius-lg) !important;
  box-shadow: 0 5px 18px rgba(25, 56, 75, 0.06) !important;
}

.s-block--photos-slider:first-of-type .photos-slider__image,
.s-block--photos-slider:first-of-type .swiper,
.s-block--photos-slider:first-of-type .swiper-slide {
  border-radius: var(--as-radius-lg) !important;
}

.s-block--photos-slider:first-of-type .photos-slider__image {
  width: 100% !important;
  display: block !important;
}

.s-slider-nav-arrow {
  width: 42px !important;
  height: 42px !important;
  color: var(--as-ink) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--as-line) !important;
  border-radius: 50% !important;
  box-shadow: 0 5px 18px rgba(18, 44, 60, 0.12) !important;
}

.s-slider-nav-arrow:hover {
  color: var(--as-primary-deep) !important;
  border-color: var(--as-primary) !important;
}

.s-slider-pagination-bullet-active {
  background: var(--as-primary-strong) !important;
}

/* ---------- Category cards ---------- */
.s-block--square-links {
  width: min(calc(100% - 32px), var(--as-container)) !important;
  margin: 16px auto 24px !important;
  padding: 14px 0 !important;
  background: var(--as-soft) !important;
  border: 1px solid var(--as-line) !important;
  border-top: 4px solid var(--as-primary) !important;
  border-radius: var(--as-radius-lg) !important;
}

.s-block--square-links > div > .container {
  width: calc(100% - 28px) !important;
}

.s-block--square-links .swiper-wrapper {
  align-items: stretch !important;
}

.s-block--square-links .swiper-slide {
  width: calc((100% - 70px) / 6) !important;
  height: auto !important;
  align-self: flex-start !important;
}

.s-block--square-links .swiper-slide > a {
  height: auto !important;
  display: block !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--as-radius-md) !important;
  box-shadow: 0 4px 14px rgba(25, 56, 75, 0.08) !important;
}

.s-block--square-links .swiper-slide > a:hover {
  border-color: var(--as-primary) !important;
  box-shadow: var(--as-shadow) !important;
  transform: translateY(-3px) !important;
}

.square-links__image-wrap {
  aspect-ratio: 20 / 27 !important;
  border-radius: var(--as-radius-md) !important;
  background: #fff !important;
}

.square-links__image-wrap img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 20 / 27 !important;
  object-fit: cover !important;
  border-radius: var(--as-radius-md) !important;
  display: block !important;
}

.square-links__item-title {
  display: none !important;
}

.square-links__item-subtitle {
  display: none !important;
}

/* ---------- Feature row ---------- */
.s-block--enhanced-features {
  margin-block: 20px 30px !important;
  padding: 0 !important;
}

.enhanced-features__grid {
  gap: 0 !important;
  padding: 6px 0 !important;
  background: var(--as-surface) !important;
  border-block: 1px solid var(--as-line) !important;
}

.s-block--enhanced-features__item {
  min-height: 92px !important;
  padding: 14px 18px !important;
  border-inline-start: 1px solid var(--as-line) !important;
}

.s-block--enhanced-features__item:first-child {
  border-inline-start: 0 !important;
}

.feature-icon {
  color: var(--as-primary-deep) !important;
}

.feature-icon img {
  max-width: 52px !important;
  max-height: 52px !important;
}

/* ---------- Section titles ---------- */
.s-block--best-offers,
.s-products-slider-wrapper,
.s-block--products-slider {
  margin-block: 24px !important;
}

.home-block-title,
.s-slider-block__title {
  margin-bottom: 14px !important;
  text-align: start !important;
}

.home-block-title h2,
.home-block-title h3,
.s-slider-block__title h2,
.s-slider-block__title h3 {
  color: var(--as-ink) !important;
  font-size: clamp(21px, 2vw, 28px) !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.s-slider-block__title a,
.home-block-title a {
  color: var(--as-primary-deep) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.s-slider-block__title a:hover,
.home-block-title a:hover {
  color: var(--as-secondary) !important;
}

/* ---------- Product cards ---------- */
custom-salla-product-card.product-card,
.product-card {
  height: 100% !important;
  overflow: hidden !important;
  background: var(--as-surface) !important;
  border: 1px solid var(--as-line) !important;
  border-radius: var(--as-radius-md) !important;
  box-shadow: 0 3px 12px rgba(25, 56, 75, 0.05) !important;
}

custom-salla-product-card.product-card:hover,
.product-card:hover {
  border-color: var(--as-primary) !important;
  box-shadow: var(--as-shadow-hover) !important;
  transform: translateY(-4px) !important;
}

.product-card__image {
  aspect-ratio: 1 / 1 !important;
  padding: 12px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--as-line) !important;
}

.product-card__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.product-card__content {
  padding: 14px !important;
  background: #fff !important;
}

.product-card__title,
.product-card__title a {
  color: var(--as-ink) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
}

.product-card__price,
.product-card__price * {
  color: var(--as-primary-deep) !important;
  font-weight: 900 !important;
}

.product-card__promotion,
.s-product-card-promotion-title {
  color: #fff !important;
  background: var(--as-secondary) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

.product-card__normal-cart__btn,
.product-card__enhnaced-mini-cart__btn,
salla-add-product-button.product-card__normal-cart__btn {
  min-height: 42px !important;
  color: var(--as-ink) !important;
  background: var(--as-primary) !important;
  border: 1px solid var(--as-primary) !important;
  border-radius: 11px !important;
  font-weight: 900 !important;
}

.product-card__normal-cart__btn:hover,
.product-card__enhnaced-mini-cart__btn:hover,
salla-add-product-button.product-card__normal-cart__btn:hover {
  color: #fff !important;
  background: var(--as-primary-deep) !important;
  border-color: var(--as-primary-deep) !important;
}

.s-product-card-rating {
  color: #b7e51f !important;
}

/* ---------- Product page ---------- */
.product-single .product-entry,
.product-single__content,
.product-details {
  border-radius: var(--as-radius-md) !important;
}

.product-form,
.product-options-wrapper,
.product-single__content {
  background: var(--as-surface) !important;
}

.s-button-primary,
.s-add-product-button-main,
button[type="submit"].s-button-primary {
  color: var(--as-ink) !important;
  background: var(--as-primary) !important;
  border-color: var(--as-primary) !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
}

.s-button-primary:hover,
.s-add-product-button-main:hover,
button[type="submit"].s-button-primary:hover {
  color: #fff !important;
  background: var(--as-primary-deep) !important;
  border-color: var(--as-primary-deep) !important;
}

/* ---------- Reviews, FAQ and content cards ---------- */
.s-block--testimonials,
.s-block--faq,
.faq-block,
.testimonials-slider {
  width: min(calc(100% - 32px), var(--as-container)) !important;
  margin-inline: auto !important;
}

.testimonial-item,
.s-block--testimonials .swiper-slide,
.faq-item,
.s-accordion-item {
  background: var(--as-surface) !important;
  border: 1px solid var(--as-line) !important;
  border-radius: var(--as-radius-md) !important;
  box-shadow: 0 3px 12px rgba(25, 56, 75, 0.05) !important;
}

/* ---------- Footer ---------- */
.store-footer {
  margin-top: 46px !important;
  color: #ffffff !important;
  background: #111111 !important;
  border-top: 5px solid var(--as-primary) !important;
}

.store-footer h3,
.store-footer h4,
.store-footer .footer-title {
  color: #fff !important;
  font-weight: 900 !important;
}

.store-footer a,
.store-footer p,
.store-footer span {
  color: #ffffff !important;
}

.store-footer a:hover {
  color: var(--as-primary) !important;
}

#wa-selia,
.wa-selia {
  background: #b7e51f !important;
  box-shadow: 0 8px 24px rgba(20, 120, 74, 0.24) !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 1023px) {
  .container {
    width: min(calc(100% - 24px), var(--as-container)) !important;
  }

  .top-navbar {
    display: none !important;
  }

  .header__main-row {
    min-height: 68px !important;
    padding-block: 8px !important;
    gap: 10px !important;
  }

  .navbar-brand,
  .navbar-brand img,
  .navbar-brand .logo-normal {
    width: 70px !important;
    min-width: 70px !important;
    max-height: 52px !important;
  }

  .header-btn,
  .header__cart-summary,
  .theme-toggle,
  .store-header button[aria-label="Search"] {
    width: 38px !important;
    height: 38px !important;
  }

  .s-block--photos-slider:first-of-type,
  .s-block--square-links {
    width: calc(100% - 24px) !important;
  }

  .s-block--square-links .swiper-slide {
    width: calc((100% - 32px) / 3.25) !important;
  }

  .s-block--photos-slider:first-of-type {
    margin-top: 12px !important;
    border-radius: 16px !important;
  }

  .s-block--photos-slider:first-of-type .photos-slider__image,
  .s-block--photos-slider:first-of-type .swiper,
  .s-block--photos-slider:first-of-type .swiper-slide {
    border-radius: 16px !important;
  }

  .s-block--square-links {
    margin-top: 12px !important;
    padding-block: 12px !important;
    border-radius: 16px !important;
  }

  .square-links__item-title {
    min-height: 38px !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
  }

  .enhanced-features__grid {
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .s-block--enhanced-features__item {
    min-height: 88px !important;
    padding: 12px !important;
    background: var(--as-soft) !important;
    border: 1px solid var(--as-line) !important;
    border-radius: 14px !important;
  }

  .home-block-title h2,
  .home-block-title h3,
  .s-slider-block__title h2,
  .s-slider-block__title h3 {
    font-size: 20px !important;
  }

  .product-card__content {
    padding: 11px !important;
  }

  .product-card__title,
  .product-card__title a {
    font-size: 13px !important;
  }
}

@media (max-width: 520px) {
  .promotion-banner,
  .promotion-banner__inner {
    min-height: 30px !important;
  }

  .promotion-banner__inner a {
    font-size: 11px !important;
  }

  .theme-toggle {
    display: none !important;
  }

  .s-block--square-links .swiper-slide {
    width: calc((100% - 14px) / 2.15) !important;
  }

  .s-slider-nav-arrow {
    width: 34px !important;
    height: 34px !important;
  }

  .s-block--best-offers,
  .s-products-slider-wrapper,
  .s-block--products-slider {
    margin-block: 18px !important;
  }
}

/* ================================================================
   Experience layer v3 — Dopame-inspired rhythm, ASTAR Premium ID
   ================================================================ */

body.index main {
  overflow: clip !important;
}

body.index main > section {
  position: relative;
}

/* A calmer, more editorial rhythm between homepage sections. */
body.index .s-block--best-offers {
  width: min(calc(100% - 32px), var(--as-container)) !important;
  max-width: var(--as-container) !important;
  margin: 56px auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.index .s-block--best-offers:nth-of-type(even)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -26px max(-50vw + 50%, -90px);
  background: linear-gradient(135deg, #ffffff 0%, var(--as-blue-100) 100%);
  border-block: 1px solid #ffffff;
}

/* Hero behaves like a premium framed campaign rather than a loose image. */
body.index .s-block--photos-slider:first-of-type {
  isolation: isolate;
  margin-top: 22px !important;
  background: var(--as-blue-900) !important;
  border: 0 !important;
  box-shadow: 0 22px 55px rgba(18, 52, 74, 0.18) !important;
}

body.index .s-block--photos-slider:first-of-type::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: inherit;
}

body.index .s-block--photos-slider:first-of-type img {
  transition: transform 1.1s var(--as-ease), filter 0.5s ease !important;
}

body.index .s-block--photos-slider:first-of-type:hover img {
  transform: scale(1.018) !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

/* Category rail: rounded editorial tiles with a controlled, lively hover. */
body.index .s-block--square-links {
  margin-top: 24px !important;
  padding: 18px 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%) !important;
  border: 1px solid #ffffff !important;
  border-top: 4px solid var(--as-primary) !important;
  box-shadow: 0 12px 34px rgba(23, 34, 45, 0.06) !important;
}

body.index .s-block--square-links .swiper-slide > a {
  isolation: isolate;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(34, 18, 48, 0.08) !important;
  transition: transform 0.35s var(--as-ease), box-shadow 0.35s ease !important;
}

body.index .s-block--square-links .swiper-slide > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 1px solid transparent;
  border-radius: inherit;
  transition: border-color 0.25s ease !important;
}

body.index .s-block--square-links .swiper-slide > a:hover {
  transform: translateY(-7px) rotate(-0.35deg) !important;
  box-shadow: 0 18px 38px rgba(18, 52, 74, 0.16) !important;
}

body.index .s-block--square-links .swiper-slide > a:hover::after {
  border-color: rgba(183, 229, 31, 0.95);
}

body.index .s-block--square-links img {
  transition: transform 0.65s var(--as-ease), filter 0.35s ease !important;
}

body.index .s-block--square-links a:hover img {
  transform: scale(1.035) !important;
  filter: saturate(1.04) !important;
}

/* Homepage titles follow the strong Dopame hierarchy. */
body.index .home-block-title,
body.index .s-slider-block__title {
  position: relative;
  margin-bottom: 24px !important;
}

body.index .home-block-title h2,
body.index .home-block-title h3,
body.index .s-slider-block__title h2,
body.index .s-slider-block__title h3 {
  max-width: 780px;
  font-size: clamp(25px, 2.6vw, 38px) !important;
  font-weight: 950 !important;
  letter-spacing: -0.025em !important;
}

body.index .enhanced-title-border,
body.index .home-block-line {
  width: 78px !important;
  height: 6px !important;
  margin-top: 12px !important;
  background: var(--as-primary) !important;
  border: 0 !important;
  border-radius: 999px !important;
}

/* Product cards: larger image, visible CTA and playful arrow motion. */
body.index custom-salla-product-card.product-card,
body.index .product-card {
  isolation: isolate;
  border-color: #ffffff !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 24px rgba(23, 34, 45, 0.07) !important;
  transition: transform 0.38s var(--as-ease), box-shadow 0.38s ease, border-color 0.3s ease !important;
}

body.index custom-salla-product-card.product-card:hover,
body.index .product-card:hover {
  border-color: rgba(183, 229, 31, 0.9) !important;
  box-shadow: 0 24px 48px rgba(18, 52, 74, 0.14) !important;
  transform: translateY(-8px) !important;
}

body.index .product-card__image {
  aspect-ratio: 1 / 1.04 !important;
  padding: 16px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #fff 0%, #ffffff 100%) !important;
}

body.index .product-card__image img {
  transition: transform 0.7s var(--as-ease), opacity 0.3s ease !important;
}

body.index .product-card:hover .product-card__image img.main-image {
  transform: scale(1.045) !important;
}

body.index .product-card__content {
  padding: 16px !important;
}

body.index .product-card__title,
body.index .product-card__title a {
  min-height: 48px;
  font-size: 16px !important;
}

body.index .product-card__normal-cart__btn,
body.index .product-card__enhnaced-mini-cart__btn,
body.index salla-add-product-button.product-card__normal-cart__btn {
  min-height: 46px !important;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
}

body.index .product-card__normal-cart__btn::after,
body.index .product-card__enhnaced-mini-cart__btn::after {
  content: "←";
  display: inline-block;
  margin-inline-start: 8px;
  transition: transform 0.25s var(--as-ease) !important;
}

body.index .product-card:hover .product-card__normal-cart__btn::after,
body.index .product-card:hover .product-card__enhnaced-mini-cart__btn::after {
  transform: translateX(-5px);
}

/* Existing feature block becomes the trust row from the reference experience. */
body.index .s-block--enhanced-features {
  width: min(calc(100% - 32px), var(--as-container)) !important;
  margin: 62px auto !important;
}

body.index .enhanced-features__grid {
  gap: 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.index .s-block--enhanced-features__item {
  min-height: 150px !important;
  padding: 24px 20px !important;
  text-align: center !important;
  background: #fff !important;
  border: 1px solid #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 9px 26px rgba(18, 52, 74, 0.07) !important;
  transition: transform 0.35s var(--as-ease), box-shadow 0.35s ease !important;
}

body.index .s-block--enhanced-features__item:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 38px rgba(18, 52, 74, 0.14) !important;
}

body.index .feature-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 12px !important;
  display: grid;
  place-items: center;
  background: var(--as-lime-soft) !important;
  border-radius: 18px !important;
}

body.index .feature-icon img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
}

body.index .s-block--enhanced-features__item h2 {
  color: var(--as-blue-800) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

body.index .s-block--enhanced-features__item p {
  margin-top: 5px !important;
  color: var(--as-muted) !important;
  font-size: 13px !important;
}

/* ---------- Custom selected-offers section injected by v3 JS ---------- */
.as-deals {
  --mx: 50%;
  --my: 50%;
  width: min(calc(100% - 32px), var(--as-container));
  margin: 68px auto;
  direction: rtl;
}

.as-deals__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.as-deals__eyebrow {
  margin: 0 0 7px;
  color: var(--as-primary-deep);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.as-deals__title {
  margin: 0;
  color: var(--as-ink);
  font-size: clamp(29px, 3vw, 44px);
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.as-deals__subtitle {
  max-width: 430px;
  margin: 0;
  color: var(--as-muted);
  font-size: 15px;
  line-height: 1.7;
}

.as-deals__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.as-deal {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  min-height: 390px;
  padding: 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(18, 52, 74, 0.1);
  border-radius: 26px;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  box-shadow: 0 12px 32px rgba(18, 52, 74, 0.09);
  transition: transform 0.28s var(--as-ease), box-shadow 0.3s ease, border-color 0.3s ease;
}

.as-deal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(330px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.42), transparent 55%);
  transition: opacity 0.3s ease;
}

.as-deal::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  inset-inline-end: -110px;
  bottom: -150px;
  border: 42px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.as-deal:hover {
  z-index: 2;
  border-color: rgba(183, 229, 31, 0.9);
  box-shadow: 0 24px 52px rgba(18, 52, 74, 0.18);
}

.as-deal:hover::before {
  opacity: 1;
}

.as-deal--blue {
  color: #fff;
  background: linear-gradient(145deg, var(--as-blue-900), var(--as-secondary));
}

.as-deal--ivory {
  color: var(--as-ink);
  background: linear-gradient(145deg, #fff, #ffffff);
}

.as-deal--lime {
  color: #111111;
  background: linear-gradient(145deg, #b7e51f, var(--as-primary));
}

.as-deal__tag {
  position: relative;
  z-index: 1;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid currentColor;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  opacity: 0.86;
}

.as-deal__value {
  position: relative;
  z-index: 1;
  margin: auto 0 8px;
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 950;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.as-deal__name {
  position: relative;
  z-index: 1;
  max-width: 320px;
  margin: 0 0 26px;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 950;
  line-height: 1.35;
}

.as-deal__cta {
  position: relative;
  z-index: 2;
  min-height: 58px;
  margin-top: auto;
  padding: 8px 10px 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--as-ink) !important;
  background: #fff;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 950;
}

.as-deal__arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--as-blue-900);
  border-radius: 10px;
  transition: transform 0.25s var(--as-ease), background 0.25s ease;
}

.as-deal:hover .as-deal__arrow {
  transform: translateX(-5px);
  background: var(--as-primary-deep);
}

.as-deals__note {
  margin: 16px 0 0;
  color: var(--as-muted);
  font-size: 12px;
  text-align: center;
}

/* Reviews and FAQ become clean editorial cards. */
body.index .s-block--testimonials,
body.index .s-block--faq {
  width: 100% !important;
  margin: 68px 0 !important;
  padding: 58px 0 !important;
  background: linear-gradient(135deg, #ffffff, var(--as-blue-100)) !important;
}

body.index .review,
body.index .single-faq {
  background: #fff !important;
  border: 1px solid #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 22px rgba(18, 52, 74, 0.07) !important;
}

body.index .faq-btn {
  min-height: 58px;
}

body.index .faq-btn i {
  color: var(--as-blue-900) !important;
  background: var(--as-primary) !important;
  transition: transform 0.25s var(--as-ease) !important;
}

body.index .single-faq:has(.faq-content:not([style*="display: none"])) .faq-btn i {
  transform: rotate(180deg);
}

/* Footer closer to the reference: deep blue, strong utility hierarchy. */
.store-footer {
  color: #fff !important;
  background: linear-gradient(145deg, var(--as-blue-900), #111111) !important;
  border-top: 6px solid var(--as-primary) !important;
}

.store-footer__inner {
  padding-top: 58px !important;
}

.store-footer__menu-title,
.store-footer h3,
.store-footer h4 {
  position: relative;
  padding-bottom: 12px;
}

.store-footer__menu-title::after,
.store-footer h3::after,
.store-footer h4::after {
  content: "";
  position: absolute;
  width: 42px;
  height: 4px;
  inset-inline-start: 0;
  bottom: 0;
  background: var(--as-primary);
  border-radius: 99px;
}

.store-footer a:hover {
  color: var(--as-primary) !important;
  transform: translateX(-3px);
}

/* Scroll-reveal classes added by JS. Content remains visible without JS. */
.as-js .as-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--as-ease), transform 0.75s var(--as-ease) !important;
}

.as-js .as-reveal.as-inview {
  opacity: 1;
  transform: none;
}

.as-js .as-reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s var(--as-ease), transform 0.65s var(--as-ease) !important;
}

.as-js .as-reveal-stagger.as-inview > * {
  opacity: 1;
  transform: none;
}

.as-js .as-reveal-stagger.as-inview > *:nth-child(2) { transition-delay: 80ms !important; }
.as-js .as-reveal-stagger.as-inview > *:nth-child(3) { transition-delay: 160ms !important; }
.as-js .as-reveal-stagger.as-inview > *:nth-child(4) { transition-delay: 240ms !important; }
.as-js .as-reveal-stagger.as-inview > *:nth-child(5) { transition-delay: 320ms !important; }

/* A slim reading-progress accent makes long category pages feel responsive. */
.as-page-progress {
  position: fixed;
  z-index: 9999;
  inset: 0 0 auto;
  width: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--as-primary), var(--as-secondary));
  box-shadow: 0 0 12px rgba(183, 229, 31, 0.5);
}

@media (max-width: 1023px) {
  body.index .s-block--best-offers,
  body.index .s-block--enhanced-features,
  .as-deals {
    width: calc(100% - 24px) !important;
    margin-block: 42px !important;
  }

  body.index .home-block-title h2,
  body.index .home-block-title h3,
  body.index .s-slider-block__title h2,
  body.index .s-slider-block__title h3 {
    font-size: 26px !important;
  }

  .as-deals__head {
    display: block;
  }

  .as-deals__subtitle {
    margin-top: 10px;
  }

  .as-deals__grid {
    margin-inline: -12px;
    padding: 0 12px 12px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(285px, 82vw);
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .as-deals__grid::-webkit-scrollbar {
    display: none;
  }

  .as-deal {
    min-height: 345px;
    padding: 26px;
    scroll-snap-align: center;
  }

  body.index .s-block--testimonials,
  body.index .s-block--faq {
    margin-block: 44px !important;
    padding-block: 38px !important;
  }
}

@media (max-width: 520px) {
  body.index .s-block--photos-slider:first-of-type {
    width: calc(100% - 16px) !important;
    margin-top: 8px !important;
    border-radius: 14px !important;
  }

  body.index .s-block--square-links {
    width: calc(100% - 16px) !important;
    margin-top: 12px !important;
  }

  body.index .s-block--best-offers,
  body.index .s-block--enhanced-features,
  .as-deals {
    width: calc(100% - 20px) !important;
  }

  body.index .s-block--best-offers {
    margin-block: 34px !important;
  }

  body.index .product-card__content {
    padding: 12px !important;
  }

  body.index .product-card__title,
  body.index .product-card__title a {
    min-height: 40px;
    font-size: 13px !important;
  }

  body.index .enhanced-features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.index .s-block--enhanced-features__item {
    min-height: 135px !important;
    padding: 18px 12px !important;
  }

  .as-deals__title {
    font-size: 29px;
  }

  .as-deals__grid {
    grid-auto-columns: 86vw;
  }

  .as-deal {
    min-height: 330px;
  }

  .store-footer__menu-title::after,
  .store-footer h3::after,
  .store-footer h4::after {
    inset-inline-start: 50%;
    transform: translateX(50%);
  }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .as-js .as-reveal,
  .as-js .as-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .as-deal {
    transform: none !important;
  }
}

/* ==========================================================
   ASTAR Salla theme bridge — built against astar-nuts.com/ar
   Keeps the National Day products and existing store content.
   ========================================================== */

body.index {
  --color-primary: var(--as-primary-deep) !important;
  --color-primary-reverse: #fff !important;
  background:
    radial-gradient(circle at 10% 12%, rgba(143, 214, 242, 0.16), transparent 28rem),
    #fff !important;
}

body.index :is(h1, h2, h3, h4, h5, h6, p, a, button, input) {
  font-family: "Almarai", "DIN Next Arabic", "Segoe UI", Arial, sans-serif !important;
}

/* ASTAR header */
.header-store {
  position: relative;
  z-index: 80;
  width: 100%;
  padding: 0 !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(18, 52, 74, 0.1) !important;
  box-shadow: none !important;
}

.header-store.as-scrolled {
  box-shadow: 0 12px 30px rgba(18, 52, 74, 0.12) !important;
}

.header-store .top-navbar,
.header-store .main-nav-container,
.header-store .main-nav-container > .inner {
  background: #fff !important;
}

.header-store .inner-content {
  min-height: 78px !important;
  color: var(--as-ink) !important;
  background: linear-gradient(100deg, #8fd6f2 0%, #fff 52%, #ffffff 100%) !important;
  border: 1px solid rgba(73, 185, 232, 0.18) !important;
  border-radius: 0 0 22px 22px !important;
}

.header-store .main-menu {
  background: #fff !important;
  border: 1px solid rgba(18, 52, 74, 0.08) !important;
  border-radius: 0 0 18px 18px !important;
}

.header-store .main-menu > li > a,
.header-store .main-menu > li > span,
.header-store .main-menu > li.root-level > a {
  color: var(--as-ink) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
}

.header-store .main-menu > li > a:hover,
.header-store .main-menu > li.root-level > a:hover {
  color: var(--as-primary-deep) !important;
  background: var(--as-soft-blue) !important;
}

.header-store .offers-link > a,
.header-store .main-menu a[href*="1076705008"],
.header-store .main-menu a[href*="offers"] {
  color: #111111 !important;
  background: var(--as-secondary) !important;
}

.header-store :is(.search-btn, .header-btn, .s-cart-summary-wrapper) {
  color: var(--as-primary-deep) !important;
}

.header-store .navbar-brand img {
  object-fit: contain !important;
  transition: transform 0.3s var(--as-ease) !important;
}

.header-store.as-scrolled .navbar-brand img {
  transform: scale(0.94) !important;
}

/* Keep and redesign the National Day products banner */
body.index main > .s-block--slider-with-bg {
  display: block !important;
  margin: 22px auto 28px !important;
  padding: 0 16px !important;
  overflow: visible !important;
}

body.index .s-block--slider-with-bg .slider-bg {
  min-height: 250px !important;
  padding: 38px 22px 122px !important;
  color: var(--as-primary-deep) !important;
  background:
    radial-gradient(circle at 12% 15%, rgba(255,255,255,.9), transparent 19rem),
    linear-gradient(120deg, #8fd6f2 0%, #8fd6f2 58%, #b7e51f 100%) !important;
  border: 1px solid rgba(18, 52, 74, 0.12) !important;
  border-top: 7px solid var(--as-secondary) !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 42px rgba(18, 52, 74, 0.12) !important;
}

body.index .s-block--slider-with-bg .slider-bg h3 {
  color: var(--as-primary-deep) !important;
  font-size: clamp(28px, 4vw, 52px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}

body.index .s-block--slider-with-bg .s-block__display-all {
  min-height: 44px !important;
  padding: 10px 18px !important;
  color: #111111 !important;
  background: var(--as-secondary) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(122, 164, 0, 0.22) !important;
}

body.index .s-block--slider-with-bg .s-block__display-all * {
  color: #111111 !important;
}

body.index .s-block--slider-with-bg .with-bg {
  margin-top: -105px !important;
  padding: 0 42px 26px !important;
  overflow: visible !important;
}

/* Main hero */
body.index main > .home-slider.s-block--hero-slider {
  width: min(calc(100% - 32px), var(--as-container)) !important;
  margin: 0 auto 30px !important;
  overflow: hidden !important;
  border: 1px solid rgba(18, 52, 74, 0.1) !important;
  border-radius: 28px !important;
  box-shadow: var(--as-shadow) !important;
}

body.index .home-slider.s-block--hero-slider :is(img, .swiper-slide) {
  border-radius: 28px !important;
}

body.index .home-slider.s-block--hero-slider img {
  transition: transform 0.8s var(--as-ease) !important;
}

body.index .home-slider.s-block--hero-slider:hover img {
  transform: scale(1.025) !important;
}

/* Categories — calm, clear and correctly sized */
body.index main > .new-main-links {
  width: min(calc(100% - 32px), var(--as-container)) !important;
  margin: 0 auto 34px !important;
  padding: 28px 24px 34px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #8fd6f2, #8fd6f2) !important;
  border: 1px solid rgba(18, 52, 74, 0.09) !important;
  border-top: 5px solid var(--as-secondary) !important;
  border-radius: 28px !important;
}

body.index .new-main-links .main-title h5,
body.index .new-main-links .main-title {
  color: var(--as-primary-deep) !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 900 !important;
}

body.index .new-main-links .swiper-wrapper {
  align-items: stretch !important;
  padding: 8px 2px 32px !important;
}

body.index .new-main-links .swiper-slide {
  width: 190px !important;
  height: 245px !important;
}

body.index .new-main-links .slide--cat-entry {
  display: grid !important;
  grid-template-rows: 188px 57px !important;
  width: 190px !important;
  height: 245px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(18, 52, 74, 0.1) !important;
  border-radius: 22px !important;
  box-shadow: 0 9px 24px rgba(18, 52, 74, 0.08) !important;
}

body.index .new-main-links .slide--cat-entry:hover {
  transform: translateY(-7px) !important;
  border-color: var(--as-primary-strong) !important;
  box-shadow: 0 18px 34px rgba(18, 52, 74, 0.15) !important;
}

body.index .new-main-links .slide--cat-entry > img {
  position: static !important;
  width: 100% !important;
  height: 188px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transition: transform 0.55s var(--as-ease) !important;
}

body.index .new-main-links .slide--cat-entry:hover > img {
  transform: scale(1.045) !important;
}

body.index .new-main-links .link_title-container {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 57px !important;
  padding: 8px 10px !important;
  background: #fff !important;
  border-top: 4px solid var(--as-secondary) !important;
  border-radius: 0 !important;
}

body.index .new-main-links .link_title {
  color: var(--as-primary-deep) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* Product and offer cards */
body.index :is(.fixed-product, .s-block--slider-with-bg) custom-salla-product-card,
body.index .fixed-product .s-product-card-entry {
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(18, 52, 74, 0.1) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 26px rgba(18, 52, 74, 0.09) !important;
}

body.index :is(.fixed-product, .s-block--slider-with-bg) custom-salla-product-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(73, 185, 232, 0.65) !important;
  box-shadow: 0 20px 38px rgba(18, 52, 74, 0.16) !important;
}

body.index .s-product-card-image {
  overflow: hidden !important;
  background: linear-gradient(180deg, #fff, #ffffff) !important;
}

body.index .s-product-card-image img {
  transition: transform 0.55s var(--as-ease) !important;
}

body.index custom-salla-product-card:hover .s-product-card-image img {
  transform: scale(1.045) !important;
}

body.index .s-product-card-promotion-title {
  color: #111111 !important;
  background: var(--as-secondary) !important;
  border-radius: 999px !important;
}

body.index .s-product-card-content-title {
  color: var(--as-primary-deep) !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
}

body.index .s-product-card-price,
body.index .s-product-card-sale-price {
  color: var(--as-primary-deep) !important;
  font-weight: 900 !important;
}

body.index .s-product-card-content-footer .s-button-element,
body.index salla-add-product-button .s-button-element {
  min-height: 46px !important;
  color: #fff !important;
  background: var(--as-primary-deep) !important;
  border: 1px solid var(--as-primary-deep) !important;
  border-radius: 12px !important;
}

body.index .s-product-card-content-footer .s-button-element:hover,
body.index salla-add-product-button .s-button-element:hover {
  color: #111111 !important;
  background: var(--as-secondary) !important;
  border-color: var(--as-secondary) !important;
  transform: translateY(-2px) !important;
}

body.index main > .fixed-product {
  width: min(calc(100% - 32px), var(--as-container)) !important;
  margin: 0 auto 36px !important;
  padding: 30px 24px !important;
  background: #fff !important;
  border: 1px solid rgba(18, 52, 74, 0.09) !important;
  border-radius: 28px !important;
  box-shadow: var(--as-shadow) !important;
}

body.index .fixed-product .main-title,
body.index .fixed-product .main-title * {
  color: var(--as-primary-deep) !important;
  font-weight: 900 !important;
}

/* Existing editorial banners */
body.index main > .s-block--new-fixed-banner {
  width: min(calc(100% - 32px), var(--as-container)) !important;
  margin: 0 auto 34px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
}

body.index .s-block--new-fixed-banner a,
body.index .s-block--new-fixed-banner article {
  overflow: hidden !important;
  border-radius: 24px !important;
}

body.index .s-block--new-fixed-banner img {
  transition: transform 0.7s var(--as-ease) !important;
}

body.index .s-block--new-fixed-banner a:hover img {
  transform: scale(1.035) !important;
}

/* ASTAR interactive editorial cards */
.as-deal--blue {
  color: #fff !important;
  background: linear-gradient(145deg, #111111, #111111 65%, #8fd6f2) !important;
}

.as-deal--ivory {
  color: var(--as-ink) !important;
  background: linear-gradient(145deg, #fff, #8fd6f2) !important;
}

.as-deal--lime {
  color: #111111 !important;
  background: linear-gradient(145deg, #b7e51f, #b7e51f) !important;
}

.as-deal__cta {
  color: var(--as-ink) !important;
}

.as-deal__arrow {
  color: #fff !important;
  background: var(--as-primary-deep) !important;
}

/* Testimonials and footer */
body.index main > .s-block--testimonials {
  width: min(calc(100% - 32px), var(--as-container)) !important;
  margin: 0 auto 38px !important;
  padding: 30px 22px !important;
  background: linear-gradient(135deg, #8fd6f2, #ffffff) !important;
  border: 1px solid rgba(18, 52, 74, 0.09) !important;
  border-radius: 28px !important;
}

.store-footer {
  background: #111111 !important;
  border-top: 7px solid var(--as-secondary) !important;
}

.store-footer,
.store-footer :is(h2, h3, h4, p, a, span) {
  color: #fff !important;
}

.store-footer a:hover {
  color: var(--as-secondary) !important;
}

@media (max-width: 767px) {
  body.index main > .s-block--slider-with-bg {
    padding-inline: 10px !important;
  }

  body.index .s-block--slider-with-bg .slider-bg {
    min-height: 205px !important;
    padding: 28px 16px 102px !important;
    border-radius: 22px !important;
  }

  body.index .s-block--slider-with-bg .with-bg {
    margin-top: -88px !important;
    padding-inline: 20px !important;
  }

  body.index main > :is(.new-main-links, .fixed-product, .s-block--testimonials) {
    width: calc(100% - 20px) !important;
    padding: 22px 14px 28px !important;
    border-radius: 22px !important;
  }

  body.index .new-main-links .swiper-slide {
    width: 150px !important;
    height: 205px !important;
  }

  body.index .new-main-links .slide--cat-entry {
    grid-template-rows: 153px 52px !important;
    width: 150px !important;
    height: 205px !important;
    border-radius: 18px !important;
  }

  body.index .new-main-links .slide--cat-entry > img {
    height: 153px !important;
  }

  body.index .new-main-links .link_title-container {
    height: 52px !important;
  }

  body.index .new-main-links .link_title {
    font-size: 12px !important;
  }
}

/* ==========================================================
   ASTAR verified live fixes v1.3 — 2026-09-16
   Final cascade layer for the current Salla product markup.
   ========================================================== */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

body.index main {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

body.index main custom-salla-product-card.s-product-card-entry,
body.index main custom-salla-product-card .s-product-card-entry {
  color: #111 !important;
  background: #fff !important;
  background-image: none !important;
  border: 2px solid #b7e51f !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08) !important;
}

body.index main custom-salla-product-card .s-product-card-content-footer .s-button-element,
body.index main custom-salla-product-card salla-add-product-button .s-button-element {
  width: 100% !important;
  min-height: 46px !important;
  color: #111 !important;
  background: #b7e51f !important;
  background-image: none !important;
  border: 1px solid #b7e51f !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
}

body.index main custom-salla-product-card .s-product-card-content-footer .s-button-element:hover,
body.index main custom-salla-product-card salla-add-product-button .s-button-element:hover {
  color: #111 !important;
  background: #b7e51f !important;
  border-color: #b7e51f !important;
  filter: brightness(.94) !important;
}

@media (max-width: 767px) {
  body.index main > :is(
    .home-slider,
    .new-main-links,
    .fixed-product,
    .s-block--best-offers,
    .s-block--new-fixed-banner,
    .s-block--testimonials,
    .as-national-offers
  ) {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin-inline: auto !important;
  }
}


/* ==========================================================
   ASTAR strict palette v1.1
   Brand surfaces: white + baby blue + lime green only.
   Black is reserved for readable text and icons.
   ========================================================== */
:root {
  --as-primary: #8fd6f2 !important;
  --as-primary-strong: #8fd6f2 !important;
  --as-primary-deep: #8fd6f2 !important;
  --as-secondary: #b7e51f !important;
  --as-ink: #111111 !important;
  --as-muted: #111111 !important;
  --as-line: #b7e51f !important;
  --as-surface: #ffffff !important;
  --as-soft: #ffffff !important;
  --as-soft-blue: #8fd6f2 !important;
  --as-danger: #b7e51f !important;
  --as-blue-900: #8fd6f2 !important;
  --as-blue-800: #8fd6f2 !important;
  --as-blue-100: #8fd6f2 !important;
  --as-lime-soft: #b7e51f !important;
}

html,
body,
.app-inner,
body.index,
body.index main,
body.index main::before,
body.index main::after {
  color: #111 !important;
  background: #fff !important;
  background-image: none !important;
}

/* White header; remove all dark-blue navigation cells */
.header-store,
.header-store .top-navbar,
.header-store .main-nav-container,
.header-store .main-nav-container > .inner,
.header-store .inner-content,
.header-store .main-menu,
.header-store .main-menu > li,
.header-store .main-menu > li.root-level,
.header-store .main-menu > li > a,
.header-store .main-menu > li > span,
.header-store .main-menu > li.root-level > a,
.header-store .mobile-menu,
.header-store .sub-menu,
.header-store .sub-menu ul,
.header-store .sub-menu li,
.header-store .sub-menu a {
  color: #111 !important;
  background: #fff !important;
  background-image: none !important;
}

.header-store .inner-content {
  border: 2px solid #8fd6f2 !important;
  border-top: 0 !important;
}

.header-store .main-menu {
  border: 2px solid #8fd6f2 !important;
}

.header-store .main-menu > li,
.header-store .main-menu > li.root-level {
  border-inline-end: 1px solid #8fd6f2 !important;
}

.header-store .main-menu > li > a:hover,
.header-store .main-menu > li.root-level > a:hover {
  color: #111 !important;
  background: #8fd6f2 !important;
}

.header-store .offers-link > a,
.header-store .main-menu a[href*="1076705008"],
.header-store .main-menu a[href*="offers"] {
  color: #111 !important;
  background: #b7e51f !important;
}

/* Baby-blue banner surfaces */
body.index .s-block--slider-with-bg .slider-bg,
body.index main > .home-slider.s-block--hero-slider,
body.index main > .s-block--new-fixed-banner,
body.index .as-deal,
body.index .as-deal--blue,
body.index .as-deal--ivory,
body.index .as-deal--lime {
  color: #111 !important;
  background-color: #8fd6f2 !important;
  background-image: none !important;
}

body.index .s-block--slider-with-bg .slider-bg,
body.index main > .home-slider.s-block--hero-slider,
body.index main > .s-block--new-fixed-banner {
  border: 0 !important;
  border-top: 7px solid #b7e51f !important;
}

body.index .s-block--slider-with-bg .slider-bg :is(h2,h3,h4,p,span),
body.index .as-deal :is(h2,h3,h4,p,span,strong) {
  color: #111 !important;
}

/* White sections only */
body.index main > .new-main-links,
body.index main > .fixed-product,
body.index main > .s-block--testimonials,
body.index .s-block--best-offers,
body.index .s-block--enhanced-features,
.as-deals {
  color: #111 !important;
  background: #fff !important;
  background-image: none !important;
  border-color: #b7e51f !important;
}

/* White category and product cards with lime borders */
body.index .new-main-links .slide--cat-entry,
body.index :is(.fixed-product, .s-block--slider-with-bg) custom-salla-product-card,
body.index custom-salla-product-card,
body.index .s-product-card-entry,
body.index .s-block--best-offers .product-card,
body.index .s-block--enhanced-features__item,
body.index .s-block--testimonials .swiper-slide {
  color: #111 !important;
  background: #fff !important;
  background-image: none !important;
  border: 2px solid #b7e51f !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
}

body.index .s-product-card-image,
body.index .s-product-card-content,
body.index .new-main-links .link_title-container {
  color: #111 !important;
  background: #fff !important;
  background-image: none !important;
}

body.index .new-main-links .link_title-container {
  border-top: 4px solid #b7e51f !important;
}

body.index :is(.s-product-card-content-title,
  .s-product-card-price,
  .s-product-card-sale-price,
  .s-product-card-starting-price,
  .link_title,
  .main-title,
  .subtitle) {
  color: #111 !important;
}

/* Every action button is lime green */
body.index :is(.s-button-element,
  .s-block__display-all,
  .as-deal__cta,
  .as-deal__arrow,
  .s-slider-nav-arrow,
  button[type="submit"]),
body.index salla-add-product-button .s-button-element,
.header-store :is(.search-btn, .header-btn, .s-cart-summary-wrapper),
.store-footer :is(button, .s-button-element) {
  color: #111 !important;
  background: #b7e51f !important;
  background-image: none !important;
  border-color: #b7e51f !important;
}

body.index :is(.s-button-element,
  .s-block__display-all,
  .as-deal__cta,
  .as-deal__arrow):hover,
body.index salla-add-product-button .s-button-element:hover {
  color: #111 !important;
  background: #b7e51f !important;
  filter: brightness(.94) !important;
  transform: translateY(-2px) !important;
}

body.index .s-product-card-promotion-title,
body.index .swiper-pagination-bullet-active,
.as-page-progress {
  color: #111 !important;
  background: #b7e51f !important;
  background-image: none !important;
}

/* Lime footer */
.store-footer,
.store-footer::before,
.store-footer::after,
.store-footer .container,
.store-footer .footer-container,
.store-footer .store-footer__inner,
.store-footer .store-footer__bottom {
  color: #111 !important;
  background: #b7e51f !important;
  background-image: none !important;
  border-color: #b7e51f !important;
}

.store-footer :is(h1,h2,h3,h4,h5,p,a,span,li,i),
.store-footer a:hover {
  color: #111 !important;
}

.store-footer :is(h3,h4)::after {
  background: #fff !important;
}

/* Preserve photos while removing stray dark overlays */
body.index :is(.home-slider, .s-block--new-fixed-banner) :is(.overlay, .slide-overlay) {
  background: transparent !important;
}

/* ==========================================================
   ASTAR live-site corrections v1.2
   These selectors match the current Salla custom elements.
   ========================================================== */

html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.index main > :is(
  .home-slider,
  .new-main-links,
  .fixed-product,
  .s-block--best-offers,
  .s-block--new-fixed-banner,
  .s-block--testimonials
) {
  max-width: min(calc(100vw - 32px), var(--as-container)) !important;
  box-sizing: border-box !important;
}

body.index .new-main-links :is(salla-slider, .swiper, .swiper-container),
body.index .fixed-product :is(salla-slider, .swiper, .swiper-container),
body.index .s-block--best-offers :is(salla-slider, .swiper, .swiper-container) {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* The current Salla card is a custom element with s-product-card-entry. */
html body.index main custom-salla-product-card.s-product-card-entry,
html body.index main .fixed-product custom-salla-product-card,
html body.index main .s-block--best-offers custom-salla-product-card,
html body.index main .s-block--slider-with-bg custom-salla-product-card {
  overflow: hidden !important;
  color: #111 !important;
  background: #fff !important;
  background-image: none !important;
  border: 2px solid #b7e51f !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
}

html body.index main custom-salla-product-card.s-product-card-entry:hover,
html body.index main .fixed-product custom-salla-product-card:hover,
html body.index main .s-block--best-offers custom-salla-product-card:hover {
  border-color: #b7e51f !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12) !important;
}

html body.index main custom-salla-product-card .s-product-card-content-footer .s-button-element,
html body.index main custom-salla-product-card salla-add-product-button .s-button-element,
html body.index main .fixed-product custom-salla-product-card .s-button-element,
html body.index main .s-block--best-offers custom-salla-product-card .s-button-element {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  color: #111 !important;
  background: #b7e51f !important;
  background-image: none !important;
  border: 1px solid #b7e51f !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
}

html body.index main custom-salla-product-card .s-product-card-content-footer .s-button-element:hover,
html body.index main custom-salla-product-card salla-add-product-button .s-button-element:hover {
  color: #111 !important;
  background: #b7e51f !important;
  border-color: #b7e51f !important;
  filter: brightness(0.94) !important;
}

/* Existing National Day products are moved by JS; no products are duplicated. */
body.index main > .as-national-offers {
  width: min(calc(100% - 32px), var(--as-container)) !important;
  max-width: var(--as-container) !important;
  margin: 24px auto 34px !important;
  padding: 30px 24px 34px !important;
  overflow: hidden !important;
  color: #111 !important;
  background: #8fd6f2 !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 7px solid #b7e51f !important;
  border-radius: 28px !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.1) !important;
}

.as-national-head {
  margin-bottom: 22px;
  color: #111;
}

.as-national-head__eyebrow {
  margin: 0 0 5px;
  color: #111;
  font-size: 13px;
  font-weight: 900;
}

.as-national-head__title {
  margin: 0;
  color: #111;
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 950;
  line-height: 1.2;
}

body.index .as-national-offers .s-slider-block__title,
body.index .as-national-offers .home-block-title {
  margin-bottom: 18px !important;
}

@media (max-width: 767px) {
  body.index main > :is(
    .home-slider,
    .new-main-links,
    .fixed-product,
    .s-block--best-offers,
    .s-block--new-fixed-banner,
    .s-block--testimonials,
    .as-national-offers
  ) {
    max-width: calc(100vw - 20px) !important;
  }

  body.index main > .as-national-offers {
    margin-block: 16px 26px !important;
    padding: 22px 14px 26px !important;
    border-radius: 22px !important;
  }
}

/* ASTAR final cascade v1.3 */
html body.index main {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

html body.index main :is(h1, h2, h3, h4, h5, h6, p, a, strong),
html .header-store :is(a, button),
html .store-footer :is(h1, h2, h3, h4, h5, h6, p, a, span, strong) {
  color: #111 !important;
}

html body.index main custom-salla-product-card.s-product-card-entry,
html body.index main custom-salla-product-card .s-product-card-entry {
  background: #fff !important;
  border: 2px solid #b7e51f !important;
  border-radius: 22px !important;
}

html body.index main custom-salla-product-card .s-product-card-content-footer .s-button-element,
html body.index main custom-salla-product-card salla-add-product-button .s-button-element {
  width: 100% !important;
  min-height: 46px !important;
  color: #111 !important;
  background: #b7e51f !important;
  border-color: #b7e51f !important;
  border-radius: 12px !important;
}