html, body { background: #fff !important; }
/* Common homepage product section wrappers in many Salla themes */
section,
section[data-section-id],
.s-block,
.s-block--products,
.s-block-products,
.s-products-list,
.s-products-grid,
.salla-products,
.home-products,
.products-section,
.products-list,
.products-grid {
  background-color: #ffffff !important;
}


/* =========================
   1) STOP IMAGE/CARD ZOOM ON TOUCH
   ========================= */

/* Disable hover/active scale on cards and images */
.s-product-card-entry,
.s-product-card-entry * ,
.s-product-card-image,
.s-product-card-image img,
.s-block--special-products .s-product-card-entry,
.s-block--special-products .s-product-card-image img {
  transform: none !important;
}

/* =========================
   FIX: Special Products block tap/hover jump + stop zoom
   ========================= */

/* Target special/featured products section */
.s-block--special-products .s-product-card-entry,
.s-block--special-products .s-product-card-image,
.s-block--special-products .s-product-card-image img {
  transition: none !important;
  transform: none !important;
}

/* Disable any hover/active/focus scaling on tap */
.s-block--special-products .s-product-card-entry:hover,
.s-block--special-products .s-product-card-entry:active,
.s-block--special-products .s-product-card-entry:focus,
.s-block--special-products .s-product-card-entry:focus-within,
.s-block--special-products .s-product-card-entry:hover img,
.s-block--special-products .s-product-card-entry:active img,
.s-block--special-products .s-product-card-entry:focus img,
.s-block--special-products .s-product-card-entry:focus-within img {
  transform: none !important;
  scale: 1 !important;
}

/* Lock the image box size so it cannot resize */
.s-block--special-products .s-product-card-image {
  overflow: hidden !important;
}

.s-block--special-products .s-product-card-image img {
  width: 100% !important;
  height: 220px !important;   /* adjust if you want */
  object-fit: contain !important;
}

/* Prevent layout reflow/jump inside the card */
.s-block--special-products .s-product-card-entry {
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent !important;
}


/* Reduce spacing between homepage sections */
.s-block {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
}

/* ===== OUTER PRODUCT TILE  ===== */

.s-product-card-entry {
    border: 1px solid #B97A8B !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    padding: 8px !important;
}

.s-product-card-entry .s-product-card-image {
    background: transparent !important;
}

.s-product-card-entry .s-product-card-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
}

/* Make ALL price numbers bigger (normal + discounted + old) */
.s-product-card-entry :is(.s-money, [class*="money"], [class*="price"]) {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.s-product-card-entry :is(.s-money, [class*="money"], [class*="price"]) * {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* Old/strikethrough price smaller */
.s-product-card-entry :is(del, s, .price-before, [class*="before"], [class*="old"]) * {
  font-size: 18px !important;
  font-weight: 500 !important;
}

/* HOME slider full width */
.s-home-slider {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* slider height */
.s-home-slider,
.s-home-slider .swiper,
.s-home-slider .swiper-wrapper,
.s-home-slider .swiper-slide {
  height: 460px !important;
}

/* image fill */
.s-home-slider img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* pagination */
.s-home-slider .swiper-pagination-bullet {
  background: #ffffff !important;
  opacity: 1 !important;
}

.s-home-slider .swiper-pagination-bullet-active {
  background: #8E4B5E !important;
}

/* =========================
   FIX PRODUCT CARDS ON IPAD
   ========================= */

@media (min-width: 768px) and (max-width: 1024px) {

  /* Force clean 2 column grid */
  .s-products-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* Make card contents stack properly */
  .s-product-card-entry {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
  }

  /* Product image consistency */
  .s-product-card-image img {
    height: 220px !important;
    object-fit: contain !important;
  }

  /* Product title spacing */
  .s-product-card-entry h3 {
    font-size: 14px !important;
    min-height: 40px !important;
  }

  /* Price section alignment */
  .s-product-card-entry [data-testid="price"],
  .s-product-card-entry [data-testid="discount"] {
    display: inline-block !important;
    font-size: 16px !important;
    margin-right: 6px !important;
  }

  /* Prevent old price dropping below */
  .s-product-card-entry del {
    display: inline-block !important;
    font-size: 13px !important;
  }

  /* Add to cart button fix */
  .s-product-card-entry button {
    width: 100% !important;
    margin-top: 8px !important;
  }
}
  
/* Remove rating stars from product cards */
.s-product-card-entry .s-product-card-rating,
.s-product-card-entry [data-testid="rating"] {
  display: none !important;
}

/* =========================
   FUN + TIDY FOOTER (KiwiCub)
   ========================= */

/* Footer background + spacing */
footer, .s-footer, .store-footer, .site-footer {
  padding: 34px 18px !important;
  background: #fff7f9 !important; /* light blush */
  border-top: 1px solid rgba(185,122,139,.35) !important;
  position: relative !important;
}

/* Subtle dotted pattern */
footer::before, .s-footer::before, .store-footer::before, .site-footer::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(rgba(185,122,139,.18) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .35;
  pointer-events: none !important;
}

/* Keep footer content above pattern */
footer * , .s-footer * , .store-footer * , .site-footer * {
  position: relative !important;
}

/* Make footer content centered and tighter */
footer .container, .s-footer .container, .store-footer .container, .site-footer .container{
  max-width: 980px !important;
  margin: 0 auto !important;
}

/* Logo spacing */
footer img, .s-footer img{
  margin: 10px auto 12px !important;
  display: block !important;
}

/* Tagline style */
footer p, .s-footer p{
  margin: 8px 0 18px !important;
  line-height: 1.7 !important;
  color: #6f6a6c !important;
  text-align: center !important;
}

/* Headings */
footer h3, footer h4,
.s-footer h3, .s-footer h4{
  margin: 18px 0 10px !important;
  font-size: 18px !important;
  color: #2b2b2b !important;
  text-align: center !important;
}

/* Links: clean + on brand */
footer a, .s-footer a{
  color: #8E4B5E !important;
  text-decoration: none !important;
}
footer a:hover, .s-footer a:hover{
  text-decoration: underline !important;
}

/* Make important links look like pills */
footer a[href*="policy"], footer a[href*="return"], footer a[href*="refund"],
.s-footer a[href*="policy"], .s-footer a[href*="return"], .s-footer a[href*="refund"]{
  display: inline-block !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(185,122,139,.55) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  margin: 6px 6px !important;
}

/* Contact row tidy (phone/email lines) */
footer [href^="tel:"], footer [href^="mailto:"],
.s-footer [href^="tel:"], .s-footer [href^="mailto:"]{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(185,122,139,.35) !important;
  border-radius: 14px !important;
  background: #fff !important;
  margin: 6px 6px !important;
  color: #3a3a3a !important;
}

/* Make icons consistent size */
footer svg, .s-footer svg{
  width: 18px !important;
  height: 18px !important;
}
/* =========================
   TIDY FOOTER (clean + grouped)
   Put at VERY BOTTOM
   ========================= */

footer, .s-footer, .store-footer, .site-footer{
  background: #fff !important;
  padding: 26px 16px !important;
}

/* Center + limit width so it doesn't look scattered */
footer .container, .s-footer .container, .store-footer .container, .site-footer .container{
  max-width: 520px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Tighten big empty gaps between elements */
footer * , .s-footer *{
  margin-top: 0 !important;
}

/* Logo + tagline spacing */
footer img, .s-footer img{
  display: block !important;
  margin: 6px auto 10px !important;
}
footer p, .s-footer p{
  margin: 0 auto 18px !important;
  line-height: 1.6 !important;
  color: #7a7a7a !important;
}

/* Headings: consistent */
footer h3, footer h4,
.s-footer h3, .s-footer h4{
  margin: 18px 0 10px !important;
  font-size: 18px !important;
  color: #222 !important;
}

/* Make the links look like tidy buttons */
footer a, .s-footer a{
  text-decoration: none !important;
}

/* Important links */
footer a[href*="policy"], footer a[href*="return"], footer a[href*="refund"],
.s-footer a[href*="policy"], .s-footer a[href*="return"], .s-footer a[href*="refund"]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(185,122,139,.45) !important;
  border-radius: 999px !important;
  background: #fff7f9 !important;
  color: #8E4B5E !important;
  margin: 6px 6px !important;
}

/* Contact items: make them look like clean pills (NOT input-style) */
footer a[href^="tel:"], footer a[href^="mailto:"],
.s-footer a[href^="tel:"], .s-footer a[href^="mailto:"]{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  margin: 10px auto !important;
  max-width: 360px !important;
  border: 1px solid rgba(185,122,139,.35) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #333 !important;
  direction: ltr !important; /* keeps email/number aligned nicely */
}

/* Keep icons same size and aligned */
footer svg, .s-footer svg{
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

/* Slight separator line to feel premium */
footer::before, .s-footer::before{
  content: "" !important;
  display: block !important;
  width: 76px !important;
  height: 3px !important;
  margin: 0 auto 16px !important;
  border-radius: 99px !important;
  background: rgba(185,122,139,.35) !important;
}
/* Remove footer top line */
footer, .s-footer, .store-footer, .site-footer {
  border-top: none !important;
  box-shadow: none !important;
}
/* WhatsApp floating button - match footer pills */
a[href*="wa.me"],
a[href*="whatsapp"],
.salla-whatsapp,
.whatsapp-button {
  border: 1px solid rgba(185,122,139,.45) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

/* =========================
   Standardize contact pills (RTL align)
   ========================= */

/* Phone + Email align from right */
footer a[href^="tel:"],
footer a[href^="mailto:"],
.s-footer a[href^="tel:"],
.s-footer a[href^="mailto:"]{
  direction: rtl !important;
  justify-content: flex-start !important;
  text-align: right !important;
}

/* Icon stays on the right */
footer a[href^="tel:"] svg,
footer a[href^="mailto:"] svg,
.s-footer a[href^="tel:"] svg,
.s-footer a[href^="mailto:"] svg{
  order: 0 !important;
}

/* Text after icon */
footer a[href^="tel:"] span,
footer a[href^="mailto:"] span,
.s-footer a[href^="tel:"] span,
.s-footer a[href^="mailto:"] span{
  order: 1 !important;
}

/* WhatsApp floating button: push slightly up + right consistency */
a[href*="wa.me"]{
  right: 16px !important;
  left: auto !important;
}

/* Instagram as contact pill */
footer a[href*="instagram"],
.s-footer a[href*="instagram"]{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  margin: 10px auto !important;
  max-width: 360px !important;
  border: 1px solid rgba(185,122,139,.35) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #333 !important;
  direction: rtl !important;
  text-decoration: none !important;
}

/* Add Instagram text */
footer a[href*="instagram"]::after,
.s-footer a[href*="instagram"]::after{
  content: "kiwicub.sa" !important; /* change if needed */
  font-size: 14px !important;
}

/* =========================
   CONTACT GROUP ALIGNMENT
   ========================= */

/* Phone + Email + Instagram same pill */
footer a[href^="tel:"],
footer a[href^="mailto:"],
footer a[href*="instagram"],
.s-footer a[href^="tel:"],
.s-footer a[href^="mailto:"],
.s-footer a[href*="instagram"]{

  width: 100% !important;
  max-width: 360px !important;
  margin: 10px auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  padding: 12px 16px !important;
  gap: 12px !important;

  border: 1px solid rgba(185,122,139,.35) !important;
  border-radius: 16px !important;
  background: #fff !important;

  direction: rtl !important;
  text-align: right !important;
}

/* ICON always on the RIGHT */
footer a[href^="tel:"] svg,
footer a[href^="mailto:"] svg,
footer a[href*="instagram"] svg,
.s-footer a[href^="tel:"] svg,
.s-footer a[href^="mailto:"] svg,
.s-footer a[href*="instagram"] svg{
  order: 0 !important;
  flex: 0 0 18px !important;
}

/* TEXT always after icon */
footer a[href^="tel:"] span,
footer a[href^="mailto:"] span,
footer a[href*="instagram"] span,
.s-footer a[href^="tel:"] span,
.s-footer a[href^="mailto:"] span,
.s-footer a[href*="instagram"] span{
  order: 1 !important;
}

/* =========================
   FOOTER CONTACT: align + tighter spacing
   ========================= */

/* Make the footer contact area tighter */
footer .container, .s-footer .container{
  max-width: 520px !important;
}

/* Phone + Email pills: same width/height + aligned */
footer a[href^="tel:"],
footer a[href^="mailto:"],
.s-footer a[href^="tel:"],
.s-footer a[href^="mailto:"]{
  width: 100% !important;
  max-width: 360px !important;
  min-height: 50px !important;      /* shorter */
  padding: 0 16px !important;

  margin: 6px auto !important;      /* less space between */
  border: 1px solid rgba(185,122,139,.35) !important;
  border-radius: 16px !important;
  background: #fff !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  direction: rtl !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

/* Remove underline / input-like look on email */
footer a[href^="mailto:"],
.s-footer a[href^="mailto:"]{
  text-decoration: none !important;
}

/* Icon size consistent */
footer a[href^="tel:"] svg,
footer a[href^="mailto:"] svg,
.s-footer a[href^="tel:"] svg,
.s-footer a[href^="mailto:"] svg{
  width: 20px !important;
  height: 20px !important;
}

/* If there is extra gap between blocks, reduce it */
footer h3, footer h4,
.s-footer h3, .s-footer h4{
  margin: 14px 0 8px !important;
}
footer p, .s-footer p{
  margin-bottom: 12px !important;
}

/* =========================
   REMOVE BORDER from floating WhatsApp button
   ========================= */

/* Most themes use one of these */
.whatsapp-button,
.s-whatsapp,
.salla-whatsapp,
a[href*="wa.me"],
a[href*="whatsapp"],
button[aria-label*="WhatsApp"],
button[title*="WhatsApp"]{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Remove instagram row in footer (icon + text) */
footer a[href*="instagram"],
.s-footer a[href*="instagram"],
footer [class*="instagram"],
.s-footer [class*="instagram"]{
  display: none !important;
}

/* Phone + Email as identical pills */
footer a[href^="tel:"],
footer a[href^="mailto:"],
.s-footer a[href^="tel:"],
.s-footer a[href^="mailto:"]{
  width: 100% !important;
  max-width: 360px !important;
  min-height: 52px !important;
  margin: 6px auto !important;
  padding: 0 16px !important;

  border: 1px solid rgba(185,122,139,.35) !important;
  border-radius: 16px !important;
  background: #fff !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;

  direction: rtl !important;
  text-decoration: none !important;
}
/* Tighten spacing in footer */
footer h3, footer h4,
.s-footer h3, .s-footer h4{
  margin: 6px 0 6px !important;
}

footer p, .s-footer p{
  margin: 6px 0 6px !important;
}

footer .s-footer__contact,
.s-footer .s-footer__contact{
  margin-top: 6px !important;
}

/* Salla custom elements used on product page */
salla-add-product-button,
salla-buy-now-button,
salla-product-actions,
salla-button{
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Anything inside them (themes often draw shape on inner div) */
salla-add-product-button * ,
salla-buy-now-button * ,
salla-product-actions * ,
salla-button *{
  border-radius: 10px !important;
}

.s-product-fixed-bar{
  overflow: visible !important;
}
/* ========== 1) HIDE the list/grid toggle buttons (category pages) ========== */
.s-products-listing button.s-button-icon,
.s-products-listing .s-button--icon,
.s-products-listing .btn--icon,
.s-products-listing [class*="view-toggle"],
.s-products-listing [class*="layout-toggle"],
.s-products-listing [class*="listing-toggle"],
.s-products-listing [data-testid*="view"],
.s-products-listing [data-testid*="layout"]{
  display: none !important;
}

/* ========== 2) FORCE grid layout so list-view never breaks cards ========== */
.s-products-listing .s-products-grid,
.s-products-listing .products-grid,
.s-products-listing .s-products-list,
.s-products-listing .products-list{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

/* Each product card becomes 2 per row on mobile */
.s-products-listing .s-product-card-entry,
.s-products-listing .product-card,
.s-products-listing .s-product-card{
  width: calc(50% - 7px) !important;
  max-width: calc(50% - 7px) !important;
}

/* Prevent “list mode” styles (usually width:100% / row layout) */
.s-products-listing .s-product-card-entry *{
  flex-direction: unset !important;
}
/* 1) Reduce space between category/title/price (many themes use gap) */
.s-product-card-entry .s-product-card-content,
.s-product-card-entry .s-product-card-body,
.s-product-card-entry .s-product-card-info,
.s-product-card-entry .s-product-card-details {
  row-gap: 4px !important;
  gap: 4px !important;
}

/* 2) Specifically tighten category -> price area */
.s-product-card-entry :is(.s-product-card-category, [class*="category"]) {
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
  line-height: 1.15 !important;
}

.s-product-card-entry :is(.s-product-card-title, [class*="title"], h3, h4) {
  margin-top: 0px !important;
  margin-bottom: 2px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* 3) Add space between price and button */
.s-product-card-entry :is(.s-product-card-price, [class*="price"]) {
  margin-top: 0px !important;
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
  display: block !important;
}

/* Prevent slider distortion */
.s-product-card-entry {
    height: auto !important;
    min-height: unset !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Make image container stable */
.s-product-card-image {
    height: 260px !important;  /* adjust if needed */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Prevent image resizing weirdly */
.s-product-card-image img {
    max-height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Product thumbnail images (the small 5 images) */
.s-product-gallery__thumbs,
.s-product-gallery__thumbs .swiper-slide {
    height:280px !important;   /* try 80–110px */
}

/* Reduce space under main slider */
.s-slider,
.s-home-slider,
.s-block--slider,
.s-block-slider {
    margin-bottom: 0px !important;   /* try 0–15px */
    padding-bottom: 0 !important;
}

/* Reduce space between ALL sections */
section,
.s-block,
.s-block--products,
.s-block--banners,
.s-block--slider,
.s-block--images {
    margin-top: 10px !important;   /* lower = tighter */
    margin-bottom: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* ===== Review section fixed/equal height ===== */

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

.s-block--testimonials .swiper-slide{
  height: auto !important;
  display: flex !important;
}

/* REVIEW CARD */
.s-block--testimonials .testimonial-item,
.s-block--testimonials .testimonial,
.s-block--testimonials .card,
.s-block--testimonials .swiper-slide > div{
  height: 220px !important;     /* fixed height so slider doesn't jump */
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  padding: 22px 18px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* TEXT AREA takes remaining space */
.s-block--testimonials p,
.s-block--testimonials .content,
.s-block--testimonials .testimonial-content{
  line-height: 1.9 !important;
  margin-bottom: 12px !important;
  flex-grow: 1 !important;
  overflow: hidden !important;
}

/* FOOTER always stays at bottom */
.s-block--testimonials .testimonial-footer,
.s-block--testimonials .rating,
.s-block--testimonials .stars{
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* avatar size */
.s-block--testimonials .testimonial-footer img{
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* smaller quote icon */
.s-block--testimonials .testimonial-item i,
.s-block--testimonials .testimonial-item svg,
.s-block--testimonials .testimonial-item .icon-quote{
  font-size: 26px !important;
  width: 26px !important;
  height: 26px !important;
  opacity: 0.7 !important;
}