/* =========================================================
   MalachiteKSA — ONE CSS FILE (Brand #23483f)
   Includes:
   1) Brand tokens + primary buttons
   2) Header (green + white) + Logo NOT recolored fix
   3) Hero slider (caption overlay panel + controls)
   ========================================================= */

/* ========== 0) TOKENS ========== */
:root{
  /* Brand */
  --mk-green: #23483f;
  --mk-green-hover: #1d3d35;
  --mk-green-pressed: #17322c;

  /* Neutrals */
  --mk-white: #ffffff;
  --mk-white-90: rgba(255,255,255,.90);
  --mk-white-80: rgba(255,255,255,.82);
  --mk-white-70: rgba(255,255,255,.70);
  --mk-white-55: rgba(255,255,255,.55);

  /* Borders / shadow */
  --mk-border-on-green: rgba(255,255,255,.18);
  --mk-shadow: 0 10px 28px rgba(0,0,0,.14);

  /* Focus */
  --mk-focus-on-green: rgba(255,255,255,.30);
  --mk-focus: rgba(35,72,63,.25);

  /* Radius */
  --mk-r-sm: 12px;
  --mk-r-md: 16px;
  --mk-r-lg: 22px;

  /* Hero panel */
  --hero-panel-bg: rgba(0,0,0,.40);
  --hero-panel-border: rgba(255,255,255,.18);
  --hero-panel-blur: 10px;
  --hero-panel-radius: 18px;

  /* Hero controls */
  --hero-control-bg: rgba(0,0,0,.35);
  --hero-control-bg-hover: rgba(0,0,0,.50);
}

/* ========== 1) GLOBAL PRIMARY OVERRIDES (useful across site) ========== */
.btn-primary,
button.btn-primary,
a.btn-primary,
.text-bg-primary,
.badge.text-bg-primary,
.bg-primary{
  background: var(--mk-green) !important;
  border-color: transparent !important;
  color: var(--mk-white) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover{
  background: var(--mk-green-hover) !important;
}

.btn-primary:active,
button.btn-primary:active,
a.btn-primary:active{
  background: var(--mk-green-pressed) !important;
  transform: translateY(1px) !important;
}

.btn-primary:focus-visible,
button.btn-primary:focus-visible,
a.btn-primary:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px var(--mk-focus) !important;
}

/* Optional brand link utility */
a.link-primary,
.link-primary{ color: var(--mk-green) !important; }
a.link-primary:hover,
.link-primary:hover{ color: var(--mk-green-hover) !important; }


/* =========================================================
   2) HEADER — green background + white icons/text
   ========================================================= */
#fixed-header.navbar{
  background: var(--mk-green) !important;
  border-bottom: 1px solid var(--mk-border-on-green) !important;
  box-shadow: var(--mk-shadow) !important;
}

#fixed-header.bg-light-subtle,
#fixed-header.bg-body{
  background: var(--mk-green) !important;
}

/* Icons/links white (EXCLUDING logo handled below) */
#fixed-header :is(.nav-link, i, .ti, .ti::before, .js-cart-status){
  color: var(--mk-white) !important;
}

/* Make non-brand SVG icons white by default */
#fixed-header svg{
  fill: var(--mk-white) !important;
  color: var(--mk-white) !important;
}

/* Link secondary -> soft white */
#fixed-header .link-secondary{
  color: var(--mk-white-80) !important;
}

#fixed-header .nav-link:hover,
#fixed-header .nav-link:focus{
  color: var(--mk-white) !important;
  opacity: 1 !important;
}

/* Header focus ring */
#fixed-header .nav-link:focus-visible,
#fixed-header button:focus-visible,
#fixed-header input:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px var(--mk-focus-on-green) !important;
  border-radius: 12px !important;
}

/* Logo sizing */
#fixed-header .css-logo{
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ---- FIX: Don’t recolor the LOGO (img or svg) ---- */
#fixed-header .navbar-brand img.css-logo{
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* If Zid ever uses an SVG logo: do NOT force its fill */
#fixed-header .navbar-brand svg,
#fixed-header .navbar-brand svg *{
  fill: initial !important;
  color: initial !important;
}

/* Ensure brand area SVG is excluded from the generic svg whitening */
#fixed-header .navbar-brand svg{
  fill: initial !important;
  color: initial !important;
}

/* Desktop search */
#fixed-header form[role="search"] .input-group{
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.10) !important;
}

#fixed-header .js-search-input-text{
  background: rgba(255,255,255,.16) !important;
  color: var(--mk-white) !important;
}
#fixed-header .js-search-input-text::placeholder{
  color: var(--mk-white-55) !important;
}

#fixed-header .input-group-text{
  background: rgba(255,255,255,.16) !important;
  border: 0 !important;
  color: var(--mk-white) !important;
}

#fixed-header .js-search-submit,
#fixed-header form[role="search"] .btn.btn-primary{
  background: var(--mk-green-hover) !important;
  border: 0 !important;
  color: var(--mk-white) !important;
}
#fixed-header .js-search-submit:hover,
#fixed-header form[role="search"] .btn.btn-primary:hover{
  background: var(--mk-green-pressed) !important;
}
#fixed-header .js-search-submit.disabled{
  opacity: .95 !important;
}

/* Mobile search container */
#fixed-header .js-search-mobile-container{
  background: var(--mk-green) !important;
  border-bottom: 1px solid var(--mk-border-on-green) !important;
  box-shadow: var(--mk-shadow) !important;
}

#fixed-header .js-search-input-text-mobile{
  background: rgba(255,255,255,.16) !important;
  color: var(--mk-white) !important;
}
#fixed-header .js-search-input-text-mobile::placeholder{
  color: var(--mk-white-55) !important;
}

#fixed-header #js-search-mobile-close,
#fixed-header #js-search-mobile-close svg{
  color: var(--mk-white) !important;
  fill: var(--mk-white) !important;
}

/* Cart badge pill */
#fixed-header .js-cart-badge{
  background: var(--mk-white) !important;
  color: var(--mk-green) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  font-weight: 800 !important;
}

/* Make bootstrap border-secondary not clash */
#fixed-header.border-bottom{
  border-bottom-color: var(--mk-border-on-green) !important;
}


/* =========================================================
   3) HERO SLIDER — caption overlay panel under text
   Targets your <section class="css-slider ...">
   ========================================================= */

.css-slider .carousel-item{
  position: relative !important;
  overflow: hidden !important;
}

.css-slider img.desktop-tablet-image,
.css-slider img.mobile-image{
  object-fit: cover !important;
  transform: translateZ(0) !important;
}

/* Subtle overall gradient to help readability */
.css-slider .carousel-item::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(80% 70% at 30% 40%, rgba(0,0,0,.10), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 55%),
    linear-gradient(0deg, rgba(0,0,0,.25), rgba(0,0,0,0) 45%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Caption positioning */
.css-slider .carousel-caption{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: clamp(18px, 4vw, 42px) !important;
  z-index: 2 !important;
  padding: 0 !important;
}

/* The caption column becomes the overlay panel */
.css-slider .carousel-caption.col-12.col-md-8.col-lg-4{
  background: var(--hero-panel-bg) !important;
  border: 1px solid var(--hero-panel-border) !important;
  backdrop-filter: blur(var(--hero-panel-blur)) !important;
  -webkit-backdrop-filter: blur(var(--hero-panel-blur)) !important;
  border-radius: var(--hero-panel-radius) !important;
  padding: 18px 18px 16px 18px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.22) !important;
}

/* Title always readable */
.css-slider .carousel-caption h2{
  color: var(--mk-white) !important;
  text-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: .2px !important;
  line-height: 1.15 !important;
}

/* Zid class override */
.css-slider .carousel-caption .text-light-subtle{
  color: var(--mk-white) !important;
  opacity: 1 !important;
}

/* CTA button in hero */
.css-slider .carousel-caption .btn.btn-primary{
  background: var(--mk-green) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: var(--mk-white) !important;
  border-radius: 14px !important;
  padding: 11px 16px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
}

.css-slider .carousel-caption .btn.btn-primary:hover{
  background: var(--mk-green-hover) !important;
  transform: translateY(-1px) !important;
}

.css-slider .carousel-caption .btn.btn-primary:active{
  transform: translateY(1px) !important;
}

/* Keep icon inside CTA white */
.css-slider .carousel-caption .btn.btn-primary :is(i, .ti, .ti::before){
  color: var(--mk-white) !important;
}

/* Carousel arrows */
.css-slider .carousel-control-prev,
.css-slider .carousel-control-next{
  width: 52px !important;
  height: 52px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 1 !important;
}

.css-slider .carousel-control-prev{ left: 14px !important; }
.css-slider .carousel-control-next{ right: 14px !important; }

.css-slider .carousel-control-prev-icon,
.css-slider .carousel-control-next-icon{
  background-color: var(--hero-control-bg) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 999px !important;
  width: 52px !important;
  height: 52px !important;
  background-size: 55% 55% !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}

.css-slider .carousel-control-prev:hover .carousel-control-prev-icon,
.css-slider .carousel-control-next:hover .carousel-control-next-icon{
  background-color: var(--hero-control-bg-hover) !important;
}

/* Mobile hero adjustments */
@media (max-width: 576px){
  .css-slider .carousel-caption{
    bottom: 14px !important;
  }

  .css-slider .carousel-caption.col-12.col-md-8.col-lg-4{
    width: calc(100% - 24px) !important;
    margin-inline: 12px !important;
    border-radius: 16px !important;
    padding: 14px !important;
  }

  .css-slider .carousel-caption h2{
    font-size: 20px !important;
  }

  .css-slider .carousel-control-prev,
  .css-slider .carousel-control-next{
    width: 44px !important;
    height: 44px !important;
  }

  .css-slider .carousel-control-prev-icon,
  .css-slider .carousel-control-next-icon{
    width: 44px !important;
    height: 44px !important;
  }
}
/* =========================================================
   CATEGORIES — Creative Touches (add AFTER your current block)
   ========================================================= */

/* 1) Add a subtle malachite accent line at the top of each card */
.css-categories .card.card-product{
  position: relative !important;
}

.css-categories .card.card-product::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(
    90deg,
    rgba(35,72,63,0),
    rgba(35,72,63,.85),
    rgba(35,72,63,0)
  ) !important;
  opacity: .55 !important;
  z-index: 3 !important;
}

/* 2) Add a soft glow behind the card on hover (premium feel) */
.css-categories a{
  display: block !important;
  position: relative !important;
}

.css-categories a::after{
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 22px !important;
  background: radial-gradient(
    70% 70% at 50% 20%,
    rgba(35,72,63,.22),
    rgba(35,72,63,0) 65%
  ) !important;
  filter: blur(16px) !important;
  opacity: 0 !important;
  transition: opacity 220ms ease !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.css-categories a:hover::after{
  opacity: 1 !important;
}

/* Keep card above the glow */
.css-categories a .card.card-product{
  z-index: 1 !important;
}

/* 3) Add a “shine sweep” over the image on hover */
.css-categories .zooming{
  position: relative !important;
}

.css-categories .zooming::after{
  content: "" !important;
  position: absolute !important;
  top: -20% !important;
  left: -60% !important;
  width: 55% !important;
  height: 140% !important;
  transform: rotate(20deg) !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.22),
    rgba(255,255,255,0)
  ) !important;
  opacity: 0 !important;
  transition: left 520ms ease, opacity 220ms ease !important;
  pointer-events: none !important;
}

.css-categories a:hover .zooming::after{
  left: 120% !important;
  opacity: .9 !important;
}

/* 4) Give the footer a slight gradient so it feels layered */
.css-categories .card-footer{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0),
    rgba(35,72,63,.045)
  ) !important;
}

/* 5) Make the chevron do a tiny “nudge” on hover */
.css-categories a:hover .card-title .ti{
  transform: translateX(-2px) !important; /* RTL-friendly: left is “forward” */
  transition: transform 180ms ease !important;
}

/* 6) Better keyboard focus (looks premium + accessible) */
.css-categories a:focus-visible{
  outline: none !important;
}

.css-categories a:focus-visible .card.card-product{
  box-shadow:
    0 16px 40px rgba(0,0,0,.14),
    0 0 0 3px rgba(35,72,63,.22) !important;
  border-color: rgba(35,72,63,.35) !important;
}
/* =========================================================
   PRODUCTS SLIDER (التصفية النهائية) — premium product cards
   Targets: section.css-products
   ========================================================= */

/* Section border */
.css-products{
  border-top-color: rgba(15, 23, 42, 0.10) !important;
}

/* Section title */
.css-products h2{
  color: #0b1220 !important;
  letter-spacing: .2px !important;
}

/* ---- Swiper controls (match categories style) ---- */
.css-products .swiper-button-next,
.css-products .swiper-button-prev{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: rgba(35,72,63,.10) !important;
  border: 1px solid rgba(35,72,63,.18) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.10) !important;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease, opacity 160ms ease !important;
}

.css-products .swiper-button-next::after,
.css-products .swiper-button-prev::after{
  font-size: 14px !important;
  font-weight: 900 !important;
  color: var(--mk-green) !important;
}

.css-products .swiper-button-next:hover,
.css-products .swiper-button-prev:hover{
  background: rgba(35,72,63,.16) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.14) !important;
}

.css-products .swiper-button-disabled{
  opacity: .45 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: default !important;
}

/* ---- Product card container ---- */
.css-products .card.card-product{
  position: relative !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #fff !important; /* cleaner than bg-transparent */
  box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

/* subtle top accent line */
.css-products .card.card-product::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, rgba(35,72,63,0), rgba(35,72,63,.85), rgba(35,72,63,0)) !important;
  opacity: .55 !important;
  z-index: 3 !important;
}

/* hover lift */
.css-products .card.card-product:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.14) !important;
  border-color: rgba(35,72,63,.22) !important;
}

/* ---- Image wrapper + image ---- */
.css-products .zooming{
  position: relative !important;
  background: rgba(35,72,63,.08) !important;
}

/* Shine sweep on hover */
.css-products .zooming::after{
  content: "" !important;
  position: absolute !important;
  top: -20% !important;
  left: -60% !important;
  width: 55% !important;
  height: 140% !important;
  transform: rotate(20deg) !important;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0)) !important;
  opacity: 0 !important;
  transition: left 520ms ease, opacity 220ms ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.css-products .card.card-product:hover .zooming::after{
  left: 120% !important;
  opacity: .9 !important;
}

/* Normalize image sizing */
.css-products .card-img-top{
  width: 100% !important;
  height: 190px !important;
  object-fit: cover !important;
  transition: transform 220ms ease, filter 220ms ease !important;
}
.css-products .card.card-product:hover .card-img-top{
  transform: scale(1.04) !important;
  filter: saturate(1.02) contrast(1.02) !important;
}

/* ---- Wishlist heart: make it look intentional (small glass circle) ---- */
.css-products .add-to-wishlist{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important; /* RTL: still ok, it's a corner control */
  z-index: 5 !important;
}
.css-products .add-to-wishlist .icon-heart-mask{
  width: 38px !important;
  height: 38px !important;
  display: inline-block !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
}

/* ---- Title + meta text ---- */
.css-products .card-body{
  padding: 10px 14px 0 14px !important; /* cleaner spacing */
}

.css-products h2.list-group-item{
  padding: 10px 0 6px 0 !important;
}

.css-products h2.list-group-item a.text-dark-emphasis{
  color: #0b1220 !important;
  font-weight: 800 !important;
  letter-spacing: .15px !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* “متوفر بعدة خيارات” badge -> softer + brand dot */
.css-products .text-warning-emphasis{
  color: rgba(35,72,63,.92) !important;
}
.css-products .text-warning-emphasis i,
.css-products .text-warning-emphasis .ti,
.css-products .text-warning-emphasis .ti::before{
  color: rgba(35,72,63,.92) !important;
}

/* ---- Discount badge “التخفيضات 50%” -> make it premium ---- */
.css-products .badge.bg-primary.bg-opacity-10.text-primary{
  background: rgba(35,72,63,.12) !important;
  color: var(--mk-green) !important;
  border: 1px solid rgba(35,72,63,.18) !important;
  font-weight: 800 !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  letter-spacing: .2px !important;
}

/* ---- Price row ---- */
.css-products .border-0.border-secondary.border-opacity-10.px-3.py-1{
  padding: 10px 14px 6px 14px !important;
}

/* New price: strong + brand (instead of red) */
.css-products strong.text-danger-emphasis{
  color: var(--mk-green) !important;
  font-weight: 900 !important;
  font-size: 15px !important;
}

/* Currency icon inherits currentColor -> keeps brand */
.css-products .riyal-svg{
  color: currentColor !important;
  opacity: .95 !important;
}

/* Old price */
.css-products .text-decoration-line-through.text-muted{
  color: rgba(15, 23, 42, 0.50) !important;
  font-style: normal !important;
  margin-inline-start: 6px !important;
}

/* ---- CTA button: premium pill-ish ---- */
.css-products .card-footer{
  padding: 10px 14px 14px 14px !important;
}

.css-products .card-footer .btn.btn-primary{
  border-radius: 14px !important;
  padding: 11px 14px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.14) !important;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
}

.css-products .card-footer .btn.btn-primary:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 26px rgba(0,0,0,.16) !important;
}

.css-products .card-footer .btn.btn-primary:active{
  transform: translateY(1px) !important;
}

/* Icon inside CTA */
.css-products .card-footer .btn.btn-primary :is(i, .ti, .ti::before){
  color: var(--mk-white) !important;
}

/* ---- Keyboard focus (premium + accessible) ---- */
.css-products a:focus-visible{
  outline: none !important;
}
.css-products a:focus-visible .card.card-product{
  box-shadow:
    0 16px 40px rgba(0,0,0,.14),
    0 0 0 3px rgba(35,72,63,.22) !important;
  border-color: rgba(35,72,63,.35) !important;
}

/* Mobile tweaks */
@media (max-width: 576px){
  .css-products .card-img-top{
    height: 170px !important;
  }
  .css-products .swiper-button-next,
  .css-products .swiper-button-prev{
    width: 40px !important;
    height: 40px !important;
  }
}
/* =========================================================
   PRODUCTS SLIDER OVERRIDES
   - Hide wishlist
   - Make images taller / consistent with previous section
   ========================================================= */

/* 1) Hide wishlist button (only inside css-products section) */
.css-products .add-to-wishlist{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2) Make the image area taller and let image fully fill it */
.css-products .zooming{
  height: 235px !important;          /* increase to match your categories feel */
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
}

/* Ensure the link wrapper and image stretch to full height */
.css-products a.css-thumbnail{
  display: block !important;
  height: 100% !important;
}

.css-products .card-img-top{
  height: 100% !important;           /* fills zooming height */
  width: 100% !important;
  object-fit: cover !important;
}

/* Optional: keep mobile proportion nice */
@media (max-width: 576px){
  .css-products .zooming{
    height: 210px !important;
  }
}
/* =========================================================
   TESTIMONIALS (آراء عملائنا) — premium cards + pagination
   Targets: section.css-testimonials
   ========================================================= */

/* Section border + subtle background wash */
.css-testimonials{
  border-top-color: rgba(15, 23, 42, 0.10) !important;
  background:
    radial-gradient(900px 420px at 80% 0%, rgba(35,72,63,.08), rgba(35,72,63,0) 60%),
    radial-gradient(700px 360px at 15% 100%, rgba(35,72,63,.06), rgba(35,72,63,0) 65%) !important;
}

/* Title */
.css-testimonials h2{
  color: #0b1220 !important;
  letter-spacing: .2px !important;
}

/* Swiper container spacing */
.css-testimonials .reviewsSwiper{
  padding: 6px 0 2px 0 !important;
}

/* Card base */
.css-testimonials .swiper-slide.card{
  border-radius: 18px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.10) !important;
  overflow: hidden !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

/* Add a premium top accent line */
.css-testimonials .swiper-slide.card::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, rgba(35,72,63,0), rgba(35,72,63,.85), rgba(35,72,63,0)) !important;
  opacity: .55 !important;
  z-index: 2 !important;
}

/* Hover lift (still works with tilt; this is subtle) */
.css-testimonials .swiper-slide.card:hover{
  box-shadow: 0 18px 44px rgba(0,0,0,.14) !important;
  border-color: rgba(35,72,63,.22) !important;
}

/* Quote text */
.css-testimonials .blockquote p{
  color: rgba(15, 23, 42, 0.72) !important;
  font-weight: 500 !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

/* Add a decorative quote mark (top-right for Arabic feel) */
.css-testimonials figure{
  position: relative !important;
  margin: 0 !important;
}
.css-testimonials figure::before{
  content: "“" !important;
  position: absolute !important;
  top: -14px !important;
  right: -2px !important;
  font-size: 54px !important;
  line-height: 1 !important;
  color: rgba(35,72,63,.18) !important;
  font-weight: 900 !important;
  pointer-events: none !important;
}

/* Name */
.css-testimonials .blockquote-footer,
.css-testimonials cite.fw-bold{
  color: #0b1220 !important;
  font-weight: 800 !important;
  letter-spacing: .15px !important;
}

/* The little bottom quote SVG badge -> make it brand, subtle */
.css-testimonials svg.badge.bg-primary{
  background: rgba(35,72,63,.10) !important;
  color: rgba(35,72,63,.85) !important;
  border: 1px solid rgba(35,72,63,.16) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
}

/* Pagination bullets -> brand */
.css-testimonials .swiper-pagination{
  margin-top: 10px !important;
}

.css-testimonials .swiper-pagination-bullet{
  background: rgba(35,72,63,.25) !important;
  opacity: 1 !important;
  transform: scale(.92) !important;
}

.css-testimonials .swiper-pagination-bullet-active{
  background: var(--mk-green) !important;
  transform: scale(1.15) !important;
}

/* Better keyboard focus */
.css-testimonials .swiper-slide.card:focus-within{
  box-shadow:
    0 18px 44px rgba(0,0,0,.14),
    0 0 0 3px rgba(35,72,63,.22) !important;
  border-color: rgba(35,72,63,.32) !important;
}

/* Mobile: reduce padding so cards don’t feel too tall */
@media (max-width: 576px){
  .css-testimonials .swiper-slide.card{
    border-radius: 16px !important;
  }
  .css-testimonials .swiper-slide.card.p-5{
    padding: 18px !important;
  }
  .css-testimonials figure::before{
    font-size: 46px !important;
    top: -10px !important;
  }
}
/* 1) Force footer background on footer AND its sections (Bootstrap classes override otherwise) */
footer,
footer.mt-auto,
footer.bg-secondary,
footer.bg-secondary.bg-opacity-10,
footer section,
footer section.bg-transparent,
footer section.bg-light-subtle,
footer section.bg-body,
footer section[class*="bg-"]{
  background: var(--mk-green) !important;
  background-color: var(--mk-green) !important;
}

/* Kill opacity utility that can make it look "not green" */
footer.bg-opacity-10,
footer .bg-opacity-10{
  --bs-bg-opacity: 1 !important;
  opacity: 1 !important;
}

/* 2) Ensure footer sits above any pseudo backgrounds */
footer{
  position: relative !important;
  color: var(--mk-white) !important;
  box-shadow: var(--mk-shadow-footer) !important;
  border: 0 !important;
  isolation: isolate !important;
}

/* 3) Luxury glow backdrop */
footer::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(900px 420px at 85% 0%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(700px 360px at 10% 100%, rgba(255,255,255,.06), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.18)) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Put all real footer content above the glow */
footer > *{
  position: relative !important;
  z-index: 1 !important;
}

/* 4) Text colors (override Bootstrap text-body / secondary) */
footer :is(h1,h2,h3,h4,h5,h6){
  color: var(--mk-white) !important;
  letter-spacing: .2px !important;
}

footer :is(p,span,li,small,div){
  color: var(--mk-white-90) !important;
}

footer .text-body,
footer .text-body-secondary,
footer .text-body-tertiary,
footer .text-dark,
footer .text-dark-subtle,
footer .text-muted,
footer .text-secondary,
footer .link-secondary{
  color: var(--mk-white-90) !important;
}

/* 5) Headings underline accent */
footer h2{
  position: relative !important;
}
footer h2::after{
  content: "" !important;
  display: block !important;
  width: 42px !important;
  height: 2px !important;
  margin-top: 10px !important;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.90), rgba(255,255,255,0)) !important;
  opacity: .75 !important;
}

/* 6) Links */
footer a{
  color: var(--mk-white-90) !important;
  text-decoration: none !important;
  transition: transform 160ms ease, opacity 160ms ease, color 160ms ease !important;
}
footer a:hover{
  color: var(--mk-white) !important;
  opacity: 1 !important;
  transform: translateX(-2px) !important; /* subtle RTL motion */
}

/* Remove any "border-primary" underline look and replace with white */
footer .border-primary{
  border-color: rgba(255,255,255,.22) !important;
}

/* 7) Dividers (top/bottom lines inside footer) */
footer :is(.border-top, .border-bottom){
  border-color: var(--mk-border-on-green) !important;
}
footer hr{
  border-color: var(--mk-border-on-green) !important;
  opacity: 1 !important;
}

/* 8) Icons (tabler icons + svg twitter X) */
footer i,
footer .ti,
footer .ti::before,
footer svg{
  color: var(--mk-white) !important;
  fill: var(--mk-white) !important;
  transition: transform 180ms ease, opacity 180ms ease !important;
}
footer a:hover :is(i, .ti, svg){
  transform: scale(1.08) !important;
}

/* 9) Business center badge image: keep image colors normal */
footer img{
  filter: none !important;
  -webkit-filter: none !important;
}

/* 10) Payment/shipping icons as “glass chips” */
footer .js-shipping-icon{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

footer .js-shipping-icon:hover{
  background: rgba(255,255,255,.16) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.22) !important;
}

/* 11) Copyright row */
footer [data-section="js-copyright"]{
  background: rgba(0,0,0,.10) !important; /* make it a darker strip */
}

footer .rotate-center{
  color: var(--mk-white-75) !important;
  font-weight: 500 !important;
}

/* Scroll to top */
footer [data-scroll]{
  color: var(--mk-white) !important;
  opacity: .95 !important;
  transition: transform 180ms ease, opacity 180ms ease !important;
}
footer [data-scroll]:hover{
  transform: translateY(-4px) !important;
  opacity: 1 !important;
}

/* 12) Mobile bottom strip (d-sm-none section) */
footer section.d-sm-none{
  background: rgba(0,0,0,.12) !important;
}

/* 13) Make spacing feel premium */
footer .container{
  padding-top: 10px !important;
}
footer ul.nav{
  gap: 6px !important;
}

/* 14) Mobile tweaks */
@media (max-width: 576px){
  footer h2::after{ margin-top: 8px !important; }
  footer .js-shipping-icon{ padding: 5px !important; border-radius: 10px !important; }
}
/* =========================================================
   CATEGORIES (css-categories) — Consistency Fix
   - Same image height for all cards
   - Image always covers (no stretching)
   - Title clamped to 2 lines (same footer height)
   ========================================================= */

/* 1) Normalize card height behavior */
.css-categories .swiper-slide{
  height: auto !important;
}

/* 2) Make card a consistent layout */
.css-categories .card.card-product{
  display: flex !important;
  flex-direction: column !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* 3) Lock the media (image) area height */
.css-categories .card.card-product .js-card-top,
.css-categories .card.card-product .js-card-top .zooming{
  height: 185px !important;       /* adjust if you want taller/shorter */
  min-height: 185px !important;
}

/* Ensure zooming wrapper doesn't collapse */
.css-categories .card.card-product .zooming{
  display: block !important;
}

/* 4) Force ALL images to fill the media area consistently */
.css-categories .card.card-product img.card-img-top{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* 5) If a placeholder SVG shows, make it fill the same area */
.css-categories .card.card-product svg.placeholder-img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* 6) Footer height consistency: clamp title to 2 lines */
.css-categories .card.card-product .card-footer{
  margin-top: auto !important;          /* push footer to bottom */
  padding: 12px 14px !important;
  min-height: 58px !important;          /* keeps all footers aligned */
  display: flex !important;
  align-items: center !important;
}

/* Title text -> consistent */
.css-categories .card.card-product .card-title{
  width: 100% !important;
  margin: 0 !important;
  color: #0b1220 !important;
  font-weight: 800 !important;
}

/* Clamp title to 2 lines so long names don’t increase card height */
.css-categories .card.card-product .card-title{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Keep chevron aligned */
.css-categories .card.card-product .card-title .ti{
  flex: 0 0 auto !important;
}

/* 7) Mobile: slightly smaller media height */
@media (max-width: 576px){
  .css-categories .card.card-product .js-card-top,
  .css-categories .card.card-product .js-card-top .zooming{
    height: 165px !important;
    min-height: 165px !important;
  }
}
/* =========================================================
   STORE STATEMENT SECTION (css-store) — luxury upgrade
   ========================================================= */

.css-store{
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}

/* Background glow + subtle waves */
.css-store::before{
  content: "" !important;
  position: absolute !important;
  inset: -20px !important;
  background:
    radial-gradient(900px 420px at 50% 10%,
      rgba(35,72,63,.16),
      rgba(35,72,63,0) 62%),
    radial-gradient(700px 360px at 15% 95%,
      rgba(35,72,63,.10),
      rgba(35,72,63,0) 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Glass card container */
.css-store .container{
  position: relative !important;
  z-index: 1 !important;
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(35,72,63,.12) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.10) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 28px 22px !important;
}

/* Accent line above title */
.css-store figure{
  position: relative !important;
  margin: 0 !important;
}

.css-store figure::before{
  content: "" !important;
  display: block !important;
  width: 64px !important;
  height: 3px !important;
  margin: 0 auto 14px auto !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,
    rgba(35,72,63,0),
    rgba(35,72,63,.95),
    rgba(35,72,63,0)
  ) !important;
  opacity: .9 !important;
}

/* Title */
.css-store h2{
  color: #0b1220 !important;
  letter-spacing: .2px !important;
  line-height: 1.25 !important;
  margin-bottom: 10px !important;
  text-wrap: balance !important;
}

/* Paragraph */
.css-store p{
  color: rgba(15, 23, 42, .72) !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  margin: 0 !important;
}

/* Add tiny “premium” emphasis on key words if you want later:
   wrap a word with <span class="mk-accent">...</span> */
.css-store .mk-accent{
  color: var(--mk-green) !important;
  font-weight: 800 !important;
}

/* Mobile tweaks */
@media (max-width: 576px){
  .css-store .container{
    padding: 22px 16px !important;
    border-radius: 18px !important;
  }
  .css-store h2{
    font-size: 22px !important;
  }
  .css-store p{
    font-size: 15px !important;
  }
}