<style>
/* =========================
   FONT IMPORT
========================= */
@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap");

/* =========================
   THEME VARIABLES OVERRIDE
   (Zid main colors)
========================= */
:root {
    /* MAIN COLORS */
    --primary-color: #8e5d40;            /* main brand color */
    --primary-color-op-5: #8e5d40;
    --sub-primary-color: #887C64;        /* hover / secondary */

    /* TEXT COLORS */
    --secondary-color-alt8: #484848;     /* body text */
    --bs-body-color: #484848;

    /* BACKGROUNDS */
    --body_background_color: #FFFFFF;
    --secondary-color-alt2: #F0F2F3;     /* section bg */

    /* HEADER & FOOTER */
    --header-primary-color: #8e5d40;
    --header-text-color-primary-bg: #ffffff;
    --footer-primary-color: #F0F2F3;
    --footer-text-color-primary-bg: #484848;
}

/* =========================
   GLOBAL FONT & BODY
========================= */
html, body {
    font-family: 'Tajawal', sans-serif !important;
    background-color: #FFFFFF !important;
    color: #484848 !important;
}

/* Paragraphs / normal text */
p, p span, li {
    color: #484848 !important;
}






/* =========================================
   GLOBAL SECTION CONSISTENCY (ALL SECTIONS)
   - Equal spacing
   - Same title size
   - Title primary color + bold
========================================= */

/* 1) Equal spacing for all sections */
.s-block{
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

/* remove random margins inside sections */
.s-block .tp-title-section{
  margin-bottom: 34px !important;
  text-align: center !important;  /* if you want left, tell me */
}

/* 2) ALL section headings same look */
.s-block .tp-title-section h3,
.s-block .tp-title-section h2{
  color: var(--primary-color, #8e5d40) !important;
  font-weight: 800 !important;
  font-size: 34px !important;
  line-height: 1.25 !important;
  margin: 0 0 10px !important;
}

/* 3) ALL section subtitle/description same look */
.s-block .tp-title-section p{
  color: var(--secondary-color-alt8, #484848) !important;
  font-size: 16px !important;
  line-height: 28px !important;
  margin: 0 !important;
  opacity: .95 !important;
}

/* 4) Make all section containers feel equal width */
.s-block .container{
  padding-left: 30px !important;
  padding-right: 30px !important;
}

/* 5) Responsive spacing + title sizing */
@media (max-width: 991.98px){
  .s-block{
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .s-block .tp-title-section h3,
  .s-block .tp-title-section h2{
    font-size: 28px !important;
  }

  .s-block .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (max-width: 640px){
  .s-block{
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .s-block .tp-title-section h3,
  .s-block .tp-title-section h2{
    font-size: 24px !important;
  }
}



/* =========================
   HEADER – FULL UPDATED DESIGN
========================= */

/* =========================
   LOGO SIZE CORRECTION
   (Paste at the bottom of CSS)
========================= */

/* =========================
   LOGO SIZE CORRECTION (UPDATED BIGGER)
   Paste this at the very bottom of your CSS
========================= */

/* 1. Desktop - Make it Big */
@media (min-width: 992px) {
    .header-nav .main-logo {
        width: 220px !important;       /* Increased width significantly */
        max-width: 100% !important;    
        height: auto !important;       /* Maintain aspect ratio */
        max-height: 110px !important;  /* Allow it to be taller */
        object-fit: contain !important;
    }
}

/* 2. Mobile - Keep it standard size */
@media (max-width: 991.98px) {
    .header-nav .main-logo {
        width: 130px !important;
        max-height: 70px !important;
    }
}

/* Wrapper */
header.header-nav {
    background: #FFFFFF;
    box-shadow: none;
    
}

/* ---------- TOP BAR (Free shipping band) ---------- */
.header-nav .tp-bar {
    background: #8e5d40 !important;
    color: #FFFFFF;
    padding: 10px 0;
}

.header-nav .tp-bar a {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
    opacity: 0.7;
}

/* ---------- MIDDLE ROW (logo + search + icons) ---------- */
.header-nav .bg-header {
    background: #F0F1F3;
}

.header-nav .bg-header .header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* logo left, widgets right */
    gap: 1.5rem;
    padding: 20px 0;
}

/* right (menu on mobile) + left (icons) */
.header-nav .right-box,
.header-nav .left-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* MENU BUTTON (default visible, only mobile/tablet) */
.header-nav .menu-btn {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.header-nav .menu-btn .menu-box span {
    display: block;
    width: 18px;
    height: 2px;
    background: #272343;
    margin-bottom: 3px;
}

/* SEARCH ICON BUTTON (small icon version – where .search-box is used) */
.header-nav .search-box {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-nav .search-box svg {
    color: #8e5d40;
}

/* PROFILE / LANGUAGE / WISHLIST / CART ICON CONTAINERS */
.header-nav .cart-btn a,
.header-nav .login-profile .login-btn,
.header-nav .login-profile .user-btn,
.header-nav .language-currency-btn,
.header-nav .wishlist-btn {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 11px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
}

/* icons color */
.header-nav .cart-btn svg,
.header-nav .login-profile svg,
.header-nav .wishlist-btn svg,
.header-nav .language-currency-btn svg {
    color: #8e5d40;
}

/* cart number badge */
.header-nav .cart-btn {
    position: relative;
}

.header-nav .cart-btn .cart-badge {
    position: absolute;
    top: 6px;
    right: 3px;
    background: #8e5d40;
    color: #FFFFFF;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}





/* ========== BOTTOM NAV (menu-style-2) ========== */
.menu-style-2 {
    background: #FFFFFF;
    /* bottom line removed */
    box-shadow: none;
    border-top: none;
}

.menu-style-2 .menu-flex-box {
    display: flex;
    align-items: center;
    justify-content: center;     /* center whole nav block */
    padding: 16px 0;             /* equal top/bottom */
    border-top: none;
}

/* nav list centered */
.menu-style-2 .tp-menu-list {
    margin: 0 auto;
}

.menu-style-2 .tp-menu-list .ul-list {
    list-style: none;
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
    justify-content: center;     /* links centered horizontally */
}

/* links */
.menu-style-2 .tp-menu-list .ul-list li a {
    font-family: 'Tajawal', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.1;
    text-transform: capitalize;
    color: #636270;              /* keep text color same */
    padding: 8px 14px;           /* vertical + horizontal padding */
    border-radius: 999px;        /* pill look around highlight */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.menu-style-2 .tp-menu-list .ul-list li a svg {
    margin-left: 4px;
}

/* 🔥 active (current page) – background primary color */
.menu-style-2 .tp-menu-list .ul-list li a.active,
.menu-style-2 .tp-menu-list .ul-list li.top-level-link.active > a,
.menu-style-2 .tp-menu-list .ul-list li.current-menu-item > a {
    background: var(--primary-color, #8e5d40);
    color: #636270; /* as you asked, text color same */
}

/* hover – background secondary color, text same */
.menu-style-2 .tp-menu-list .ul-list li a:hover {
    background: var(--secondary-color, #DEDEDE);
    color: #636270;
}

/* =========================
   RESPONSIVE TWEAKS
========================= */

/* Desktop ≥ 992px */
@media (min-width: 992px) {

  /* hide burger menu on desktop */
  .header-nav .menu-btn {
    display: none !important;
  }

  /* header box: keep original spacing but allow absolute centering of search */
  .header-nav .bg-header .header-box {
    position: relative;
    justify-content: space-between;
  }

  .header-nav .middle-box a {
    display: inline-flex;
    align-items: center;
  }

  /* show language / wishlist / cart to the right of search */
  .header-nav .bg-header .left-box {
    display: flex !important;  /* override d-none from HTML */
    align-items: center;
    gap: 12px;
  }

  /* centered search bar with fixed width */
  .header-nav .search-header-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 480px;
    width: 100%;
    z-index: 2;
  }

  /* hide duplicate icons from bottom menu on desktop */
  .menu-style-2 .left-box {
    display: none !important;
  }
}

/* Mobile / small screens – keep theme defaults */
@media (max-width: 991.98px) {

  .header-nav .bg-header .header-box {
    justify-content: space-between;
    position: static;
  }

  /* Hide Login/Profile Button on Mobile Devices */

    .header-nav .login-profile {
        display: none !important;
    }


  .header-nav .search-header-box {
    position: static;
    transform: none;
    max-width: 100%;
    width: 100%;
  }
}


 

/* =========================
   LINKS
========================= */
a {
    color: #8e5d40;
}

a:hover {
    color: #887C64;
}

/* =========================
   ICONS
========================= */
i,
svg {
    color: #887C64 !important;
}

/* =========================
   SECTION BACKGROUNDS
========================= */
.section-secondary,
.bg-alt,
.section-light-bg,
.custom-block-bg {
    background-color: #F0F2F3 !important;
}

/* =========================
   CARDS / BOXES
========================= */
.card,
.product-box,
.category-box,
.widget-box {
    border-radius: 6px;
}

/* =========================
  HOMEPAGE FORMS / INPUTS
========================= */
input,
select,
textarea {
    border: 1px solid #8e5d40 !important;
    color: #484848 !important;
    font-family: 'Tajawal', sans-serif !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #887C64 !important;
    outline: none !important;
    box-shadow: 0 0 5px #8e5d4033;
}



/* =============================
   HOMEPAGE UPDATE SELLER Section Home Page
============================= */

/* Title & paragraph left-aligned */
.tp-slider-banners h3,
.tp-slider-banners h2 {
    color: #ffffff !important;
    text-align: left !important;
    font-weight: 700;
    margin-bottom: 8px;
}

.tp-slider-banners p {
    color: #ffffff !important;
    text-align: left !important;
    max-width: 420px;
    margin-bottom: 20px;
    line-height: 26px;
}

/* Buy Button – bigger & left aligned */
.tp-slider-banners a.tp-btn,
.tp-slider-banners button.tp-btn {
    background: #8e5d40 !important;
    color: #ffffff !important;
    border: none !important;
    min-width: 240px !important;
    padding: 15px 22px !important;
    text-align: center !important;
    font-weight: 600;
    border-radius: 10px;
    display: inline-block !important;
}

/* Button hover → secondary color */
.tp-slider-banners a.tp-btn:hover,
.tp-slider-banners button.tp-btn:hover {
    background: #887C64 !important;
    color: #ffffff !important;
}


/* Timer centered */
.tp-slider-banners .tp-count-box,
.tp-slider-banners .count-down-box,
.tp-slider-banners .tp-timer-box {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Timer circle sizes / look */
.tp-slider-banners .count {
    width: 65px !important;
    height: 65px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border: 2px solid #ffffff !important;
    background: transparent !important;
    color: #ffffff !important;
}

.tp-slider-banners .count span {
    font-size: 13px !important;
    color: #ffffff !important;
}

/* Add space between banner and product cards */
/* GAP BETWEEN BANNER & PRODUCTS */

.box-text-info {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important; /* left align */
    text-align: left !important;
}

.box-text-info h3 {
    font-size: 34px;
    font-weight: 700;
    color: #ffffff !important;
    margin-bottom: 10px;
    text-align: left !important;
}

.box-text-info p {
    font-size: 16px;
    color: #ffffff !important;
    line-height: 26px;
    margin-bottom: 25px;
    max-width: 430px;
    text-align: center !important;
}

/* -------- BUY BUTTON -------- */
.box-text-info a.tp-btn,
.box-text-info .tp-btn {
    background: var(--primary-color, #8e5d40) !important;
    border-color: var(--primary-color, #8e5d40) !important;
    color: #ffffff !important;
    min-width: 230px;
    padding: 15px 25px;
    border-radius: 10px;
    font-weight: 600;
    margin-top: 10px;
    display: inline-block;
    text-align: center !important;
}

/* hover → secondary color */
.box-text-info a.tp-btn:hover,
.box-text-info .tp-btn:hover {
    background: var(--sub-primary-color, #887C64) !important;
    border-color: var(--sub-primary-color, #887C64) !important;
    color: #ffffff !important;
}

/* -------- TIMER CENTERED BELOW BUTTON -------- */
.tp-countdown-banner {
    width: 100%;
    display: flex;
    justify-content: center !important;
    margin: 25px 0;
}

.tp-countdown-banner ul {
    display: flex;
    gap: 14px;
    padding: 0;
}

.tp-countdown-banner ul li {
    background: rgba(255,255,255,0.12);
    border: 1.8px solid #ffffff;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #ffffff !important;
    font-size: 12px;
}

/* timer big number */
.tp-countdown-banner ul li span {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff !important;
}


/* Removes top margin for the banner section */
/* Apply spacing fix to BOTH English and Arabic sliders */
.tp-slider-spicial-section.s-block {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important; 
}

/* Ensure the slider container itself has no extra margin */
.tp-slider-spicial-section {
    margin-top: 0 !important;
}

/* 1. Force English (LTR) arrows to rotate 180deg */
html[dir="ltr"] .tp-slider-button-prev span, 
html[dir="ltr"] .tp-slider-button-next span {
    transform: rotate(180deg) !important;
    display: inline-block !important;
}

/* 2. Force Arabic (RTL) arrows to stay normal (0deg) */
html[dir="rtl"] .tp-slider-button-prev span, 
html[dir="rtl"] .tp-slider-button-next span {
    transform: rotate(0deg) !important;
    display: inline-block !important;
}



/* 1. Target the correct SWIPER slide class */
.tp-slider-spicial .swiper-slide .box-text-info {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;      /* Centers horizontally */
    justify-content: center !important;  /* Centers vertically */
    text-align: center !important;       /* Forces text center */
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    z-index: 50 !important;
    
    /* Override direction specific positioning */
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

/* 2. Force Title & Paragraph to Center (Overrides RTL/LTR defaults) */
.tp-slider-spicial .box-text-info h3, 
.tp-slider-spicial .box-text-info p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 800px !important;
}

/* 3. Center the Button */
.tp-slider-spicial .box-text-info .tp-btn,
.tp-slider-spicial .box-text-info a.tp-btn {
    margin: 10px auto 0 !important;
    display: inline-flex !important;
}


/* ============================================================
   MOBILE SLIDER: EXACT RATIO (768x983)
   ============================================================ */

@media (max-width: 768px) {

    /* 1. Force Image to respect the exact 768x983 ratio */
    .tp-slider-spicial .swiper-slide img {
        width: 100% !important;
        height: auto !important;           /* Let ratio control height */
        aspect-ratio: 768 / 983 !important; /* ✅ EXACT ZID SPEC */
        object-fit: cover !important;      /* Ensures image covers the box */
    }

    /* 2. Scale Text to fit nicely inside this ratio */
    .tp-slider-spicial .box-text-info h3 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    .tp-slider-spicial .box-text-info p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
        max-width: 90% !important;
    }

    /* 3. Button Size */
    .tp-slider-spicial .box-text-info .tp-btn {
        min-width: 140px !important;
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}






/* ==========================================================
   HOMEPAGE MAIN SLIDER (CLASS BASED)
   .tp-slider-spicial
   - Center title + button
   - Responsive image height
   - Smaller button on mobile
   ========================================================== */

/* ==========================================================
   HOMEPAGE MAIN SLIDER (CLASS BASED) – BULLETPROOF CENTER
   .tp-slider-spicial
   Works in RTL/LTR + Zid theme overrides
   ========================================================== */

/* make <a> parent positioned so overlay works */
.tp-slider-spicial .slick-slide > a{
  position: relative !important;
  display: block !important;
}

/* image sizing */
.tp-slider-spicial .slick-slide img{
  width: 100% !important;
  height: 650px !important;
  object-fit: cover !important;
  display: block !important;
}

/* ✅ FULL OVERLAY + FLEX CENTER (instead of left:50% translate) */
.tp-slider-spicial .slick-slide > a .box-text-info{
  position: absolute !important;
  inset: 0 !important;              /* top/right/bottom/left = 0 */
  transform: none !important;       /* kill any translate overrides */
  left: 0 !important;
  right: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;   /* horizontal center */
  justify-content: center !important;/* vertical center */
  text-align: center !important;

  width: 100% !important;
  max-width: 900px !important;      /* keeps content not too wide */
  margin: 0 auto !important;
  padding: 0 16px !important;

  z-index: 50 !important;
}

/* title */
.tp-slider-spicial .box-text-info h3{
  text-align: center !important;
  margin: 0 0 14px !important;
}

/* button centered */
.tp-slider-spicial .box-text-info .tp-btn,
.tp-slider-spicial .box-text-info a.tp-btn{
  margin: 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Tablet */
@media (max-width: 991.98px){
  .tp-slider-spicial .slick-slide img{ height: 500px !important; }
}

/* Mobile */
@media (max-width: 576px){
  .tp-slider-spicial .slick-slide img{ height: 380px !important; }

  .tp-slider-spicial .box-text-info h3{
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .tp-slider-spicial .box-text-info .tp-btn.tp-btn-white{
    min-width: 140px !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
  }
}

/* ✅ RTL safe (Arabic) */
[dir="rtl"] .tp-slider-spicial .box-text-info{
  direction: rtl !important;
  text-align: center !important;
}






/* ============================
  HOMEPAGE SHOP BY COLLECTION – WHITE CARD DESIGN (FIXED)
   ============================ */

/* Spacing around each slick slide */
.tp-product-card.s-block .products-slider.s-slider .slick-slide {
    padding: 16px !important;
    background: transparent !important; /* remove grey behind card */
}

/* Main card wrapper (real card box) */
.tp-product-card.s-block .products-slider.s-slider .slick-slide .product-box,
.tp-product-card.s-block .products-slider.s-slider .slick-slide .card-product-style-2 {
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 20px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;

    /* ⭐ your exact shadow */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    height: 100% !important;
}

/* Remove any section background behind products */
.tp-product-card.s-block {
    background: #ffffff !important;
}



/* ✅ Product image only (NOT loader, NOT icons) */
.tp-product-card.s-block .products-slider.s-slider a.tp-image-product img,
.tp-product-card.s-block .products-slider.s-slider .box-img-product img,
.tp-product-card.s-block .products-slider.s-slider .tp-product-thumb img {
    width: 100% !important;
    border-radius: 14px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Title styling */
.tp-product-card.s-block .products-slider.s-slider .slick-slide .tp-product-title,
.tp-product-card.s-block .products-slider.s-slider .slick-slide h3,
.tp-product-card.s-block .products-slider.s-slider .slick-slide h4 {
    color: #333 !important;
    font-weight: 600 !important;
    margin: 8px 0 4px !important;
}

/* Price styling */
.tp-product-card.s-block .products-slider.s-slider .slick-slide .tp-product-price,
.tp-product-card.s-block .products-slider.s-slider .slick-slide .price,
.tp-product-card.s-block .products-slider.s-slider .slick-slide .tp-product-price-new {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #8e5d40 !important;
    margin-top: 6px !important;
}

/* ✅ Respect d-none on the add-to-cart spinner */
.tp-product-card.s-block .products-slider.s-slider 
.product-card-add-to-cart .add-to-cart-progress.d-none {
    display: none !important;
} 





























/* ============================
   CONTACT PAGE BANNER UTILIZED THE BLOG COMPONENT HERE DONT CONFUSE= FULL BLEED (LIKE HOME SLIDER)
============================ */

/* kill container padding/limits ONLY for this section */
#blog-post .container{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* hide Zid mandatory title */
#blog-post .blog-title{
  display: none !important;
}

/* remove extra spacing around section */
#blog-post.blog{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}

/* make banner block full width like slider */
#blog-post .blog-text{
  margin: 0 !important;
  padding: 0 !important;
}

/* the first wrapper div inside blog-text */
#blog-post .blog-text > div{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
}

/* banner container (your relative div) */
#blog-post .blog-text > div > div{
  width: 100% !important;
  height: clamp(260px, 28vw, 520px) !important; /* closer to home banner feel */
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

/* image full cover */
#blog-post .blog-text img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}




/* =============== PRODUCT PAGE START FROM HERE ================================================ */

/* ===== TOP BAR: Filter + Count + Sort (3 items) ===== */
.tp-shop-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  flex-wrap:wrap !important;
}

/* Right side group (Filter + Count) */
.tp-shop-top-right{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}

/* Filter button style */
#products-list-filter,
.tp-shop-top .tp-filter-btn{
  background: transparent !important;
  color: #2b2b2b !important;
  border: 1px solid #8e5d40 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

#products-list-filter svg,
.tp-shop-top .tp-filter-btn svg{
  color:#8e5d40 !important;
}

/* Result count */
.tp-shop-top-result p{
  margin:0 !important;
  font-size:14px !important;
  color:#444 !important;
}
#product-filter-count{
  padding:0 6px !important;
  font-weight:700 !important;
  color:#8e5d40 !important;
}

/* Sort dropdown button */
#products-list-sort,
.tp-shop-top .btn-sort{
  background: transparent !important;
  border: 1px solid #8e5d40 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  color:#2b2b2b !important;
  font-weight:600 !important;
}

#products-list-sort svg{
  color:#8e5d40 !important;
}  





/* ==========================================================
  HOME PAGE INFORMATIVE CARDS (High Quality / Warranty / Shipping / 24/7)
   Section: .tp-informative-container
   - 2x2 grid on desktop
   - 2 columns on tablet
   - 1 column on mobile
   - icon + text aligned like screenshot
   - RTL safe
   ========================================================== */

/* ==========================================================
   INFORMATIVE ICON ROW (High Quality / Warranty / Shipping / Support)
   - Icon on top
   - Title + subtitle below
   - No background / no card
   - 4 in a row (desktop)
   - Responsive + RTL safe
   ========================================================== */

/* Wrapper */
.tp-informative-container .tp-informative{
  display: flex !important;
  justify-content: center !important;
}

/* Grid */
.tp-informative-container .right-section{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 40px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Item */
.tp-informative-container .informative-box{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;

  text-decoration: none !important;
}

/* Icon (SVG / PNG) */
.tp-informative-container .informative-box img{
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  margin-bottom: 6px !important;
}

/* Text */
.tp-informative-container .informative-text{
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Title in PRIMARY color */
.tp-informative-container .informative-text h3{
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--primary-color, #8e5d40) !important;  /* ✅ changed */
  text-align: center !important;                   /* ✅ force center */
}


.tp-informative-container .informative-text p{
  margin: 0 !important;
  font-size: 13px !important;
  color: #8b8b8b !important;
  line-height: 1.4 !important;
}

/* Hide unused blocks */
.tp-informative-container .center-image,
.tp-informative-container .left-section{
  display: none !important;
}

/* =========================
   RESPONSIVE
========================= */

/* Tablet */
@media (max-width: 991.98px){
  .tp-informative-container .right-section{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
  }
}

/* Mobile */
@media (max-width: 576px){
  .tp-informative-container .right-section{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* =========================
   RTL (Arabic)
========================= */
[dir="rtl"] .tp-informative-container .right-section{
  direction: rtl !important;
}

[dir="rtl"] .tp-informative-container .informative-text h3,
[dir="rtl"] .tp-informative-container .informative-text p{
  text-align: center !important;
}












/* ============================================================
   TOMOOR ALULA - UNIFIED BUSINESS PAGE STYLES
   ============================================================ */

/* 1. Global Container Fixes */
.business-page-section {
    padding: 60px 0 !important;
    background: #fff !important;
}

/* 2. Hero Banner Styles */
.hero-banner-wrapper {
    position: relative;
    padding: 40px 0;
}

.hero-title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 900;
    color: var(--primary-color, #8e5d40);
    margin-bottom: 20px;
}

/* 3. Bento Gallery Logic (8/4 and 3/3/6 Spans) */
.bento-gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 320px;
    gap: 24px;
}

.bento-item {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.3s ease;
}

.bento-item:hover { transform: translateY(-5px); }

/* Grid Spans */
.bento-item.wide { grid-column: span 8; background: #F3F3F3; }
.bento-item.small-top { grid-column: span 4; background: #EBE7DE; }
.bento-item.small { grid-column: span 3; background: #C8BC9F; }
.bento-item.small-alt { grid-column: span 3; background: #E6F4EA; }
.bento-item.medium { grid-column: span 6; background: #FDE8E9; }

/* Image Positioning */
.bento-img-box {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
    z-index: 1;
}

.bento-img-box img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.1));
}

/* 4. Client Section (Logo Marquee) */
.client-marquee {
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0.6;
    padding: 40px 0;
}

.client-marquee img {
    height: 40px;
    width: auto;
    filter: grayscale(100%);
    transition: 0.3s;
}

.client-marquee img:hover { filter: grayscale(0%); opacity: 1; }

/* RTL Adjustments */
[dir="rtl"] .bento-item { text-align: right; }
[dir="rtl"] .bento-img-box { right: auto; left: 0; }












/* =========================
   BUSINESS HERO – EXACT SLIDER LOOK, WHITE BG
========================= */

/* reset #blog-post container so it doesn't force black bg */
#blog-post .container{
  max-width:1500px !important;
  width:100% !important;
  margin:0 auto !important;
  padding:0 30px !important;
}

#blog-post .blog-text{
  margin:0 !important;
  padding:0 !important;
}

#blog-post .blog-text > div{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
}

#blog-post .blog-text > div > div{
  width:100% !important;
  height:auto !important;
  background:#ffffff !important;   /* 🔥 remove black */
  border-radius:0 !important;
  overflow:visible !important;
}

/* scope styling to your business hero section */
[section-id="business-hero-en"] .tp-slider-item,
[section-id="business-hero-ar"] .tp-slider-item{
  background:#ffffff !important;
  padding:40px 0 !important;
}

/* text block */
[section-id="business-hero-en"] .tp-slider-content,
[section-id="business-hero-ar"] .tp-slider-content{
  max-width:420px !important;
  color:var(--secondary-color-alt8) !important;
}

/* little label line (تمور سعودية فاخرة / Premium Saudi Dates) */
[section-id="business-hero-en"] .tp-slider-content > span,
[section-id="business-hero-ar"] .tp-slider-content > span{
  display:block !important;
  margin-bottom:6px !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--sub-primary-color) !important;
}

/* title in primary color */
[section-id="business-hero-en"] .tp-slider-title,
[section-id="business-hero-ar"] .tp-slider-title{
  font-size:clamp(26px, 2.6vw, 34px) !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  margin-bottom:12px !important;
  color:var(--primary-color) !important;
}

/* paragraph */
[section-id="business-hero-en"] .tp-slider-content p,
[section-id="business-hero-ar"] .tp-slider-content p{
  max-width:460px !important;
  margin-bottom:22px !important;
  line-height:1.8 !important;
  color:var(--secondary-color-alt8) !important;
}

/* button – same style as your main theme buttons */
[section-id="business-hero-en"] .tp-slider-btn .tp-btn,
[section-id="business-hero-ar"] .tp-slider-btn .tp-btn{
  background:var(--primary-color) !important;
  border-color:var(--primary-color) !important;
  color:#ffffff !important;
  min-width:230px !important;
  padding:12px 26px !important;
  border-radius:10px !important;
  font-weight:600 !important;
  font-size:14px !important;
  text-align:center !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

[section-id="business-hero-en"] .tp-slider-btn .tp-btn:hover,
[section-id="business-hero-ar"] .tp-slider-btn .tp-btn:hover{
  background:var(--sub-primary-color) !important;
  border-color:var(--sub-primary-color) !important;
  color:#ffffff !important;
}

/* image – straight, no curve, white bg */
[section-id="business-hero-en"] .tp-slider-thumb img,
[section-id="business-hero-ar"] .tp-slider-thumb img{
  width:100% !important;
  max-width:500px !important;
  height:auto !important;
  object-fit:cover !important;
  border-radius:0 !important;
}

/* keep the decorative shape if you want */
[section-id="business-hero-en"] .tp-slider-shape,
[section-id="business-hero-ar"] .tp-slider-shape{
  display:block !important;
}

/* responsive */
@media (max-width: 991.98px){
  [section-id="business-hero-en"] .tp-slider-item,
  [section-id="business-hero-ar"] .tp-slider-item{
    flex-direction:column !important;
    text-align:center !important;
    padding:24px 0 32px !important;
  }

  [section-id="business-hero-en"] .tp-slider-content,
  [section-id="business-hero-ar"] .tp-slider-content{
    max-width:100% !important;
    padding:0 16px !important;
    margin-bottom:16px !important;
    text-align:center !important;
  }

  [section-id="business-hero-en"] .tp-slider-btn,
  [section-id="business-hero-ar"] .tp-slider-btn{
    display:flex !important;
    justify-content:center !important;
  }

  [section-id="business-hero-en"] .tp-slider-thumb img,
  [section-id="business-hero-ar"] .tp-slider-thumb img{
    max-width:320px !important;
    margin:0 auto !important;
  }
}








/* =========================
   TESTIMONIAL SECTION TITLE (BOLD)
========================= */
.tp-testimonial-section-title{
  font-weight: 900 !important;   /* bold */
  color: var(--primary-color, #8e5d40) !important;
  font-size: 34px !important;
  line-height: 1.25 !important;
  margin: 0 0 10px !important;
}






/* =========================
  Newsletter 
========================= */
.offer-content .tp-btn{
  background: var(--primary-color, #8e5d40) !important;
  border-color: var(--primary-color, #8e5d40) !important;
  color: #fff !important;
}

/* Hover = sub primary */
.offer-content .tp-btn:hover{
  background: var(--sub-primary-color, #887C64) !important;
  border-color: var(--sub-primary-color, #887C64) !important;
  color: #fff !important;
}































/* ================================
   Customer Favorites Banner
   - White BG image as background
   - LEFT aligned + justified text
   - H3 = Primary color
   - P = Secondary color
================================ */

/* banner container */
.tp-banner-with-products.s-block .banner-products .banner-info{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: transparent !important;
  min-height: 450px !important;
  display: flex !important;
  align-items: center !important;     /* vertical center */
  justify-content: flex-start !important;
  padding: 40px 48px !important;
  text-align: left !important;
}

/* remove theme overlays */
.tp-banner-with-products.s-block .banner-products .banner-info::before,
.tp-banner-with-products.s-block .banner-products .banner-info::after{
  content: none !important;
  display: none !important;
}

/* image behaves like background */
.tp-banner-with-products.s-block .banner-products .banner-info > img.lazy-img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* text wrapper */
.tp-banner-with-products.s-block .banner-products .banner-info .box-text-info{
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 520px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
}

/* heading = primary */
.tp-banner-with-products.s-block .banner-products .banner-info .box-text-info h3{
  color: var(--primary-color, #8e5d40) !important;
  font-weight: 800 !important;
  font-size: 34px !important;
  margin: 0 0 14px !important;
  text-align: left !important;
}

/* paragraph = secondary + justified */
.tp-banner-with-products.s-block .banner-products .banner-info .box-text-info p{
  color: var(--secondary-color-alt8, #484848) !important;
  font-size: 16px !important;
  line-height: 28px !important;
  margin: 0 0 24px !important;
  text-align: justify !important;
}

/* button (left aligned) */
.tp-banner-with-products.s-block .banner-products .banner-info .box-text-info .tp-btn,
.tp-banner-with-products.s-block .banner-products .banner-info .box-text-info a.tp-btn{
  background: var(--primary-color, #8e5d40) !important;
  border-color: var(--primary-color, #8e5d40) !important;
  color: #fff !important;
  min-width: 230px !important;
  padding: 14px 26px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* hover */
.tp-banner-with-products.s-block .banner-products .banner-info .box-text-info .tp-btn:hover,
.tp-banner-with-products.s-block .banner-products .banner-info .box-text-info a.tp-btn:hover{
  background: var(--sub-primary-color, #887C64) !important;
  border-color: var(--sub-primary-color, #887C64) !important;
  color: #fff !important;
}
/* ==========================================================
   RESPONSIVE FIX: CUSTOMER FAVORITES BANNER
   ========================================================== */

/* Tablet & Mobile Screens (Max width 991px) */
@media (max-width: 991.98px) {
    
    /* 1. Reduce Container Height & Padding */
    .tp-banner-with-products.s-block .banner-products .banner-info {
        min-height: 350px !important;  /* Reduced from 450px */
        padding: 30px 25px !important; /* Reduced from 48px */
    }

    /* 2. Allow Text Box to fit smaller screens */
    .tp-banner-with-products.s-block .banner-products .banner-info .box-text-info {
        max-width: 100% !important; /* Use full width available */
        padding-right: 0 !important;
    }
}

/* Mobile Only (Max width 576px) */
@media (max-width: 576px) {

    /* 1. Further Reduce Height/Padding for Phones */
    .tp-banner-with-products.s-block .banner-products .banner-info {
        min-height: 300px !important;
        padding: 20px !important;
        /* Optional: Move text to bottom if covering face of image */
        /* align-items: flex-end !important; */ 
    }

    /* 2. Smaller Heading Size */
    .tp-banner-with-products.s-block .banner-products .banner-info .box-text-info h3 {
        font-size: 24px !important; /* Reduced from 34px */
        margin-bottom: 10px !important;
    }

    /* 3. Readable Paragraph Text */
    .tp-banner-with-products.s-block .banner-products .banner-info .box-text-info p {
        font-size: 14px !important;
        line-height: 22px !important;
        text-align: left !important; /* 'Justify' looks bad on mobile, switch to Left */
        margin-bottom: 18px !important;
    }

    /* 4. Adjust Button Size */
    .tp-banner-with-products.s-block .banner-products .banner-info .box-text-info .tp-btn,
    .tp-banner-with-products.s-block .banner-products .banner-info .box-text-info a.tp-btn {
        min-width: 180px !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}






/* =========================================
   OUR GALLERY – Bigger Square Cards
========================================= */

/* spacing between cards */
.tp-brands-style-2 .animated-brands--marquee .marquee__group{
  gap: 22px !important;
}

/* anchor becomes the card */
.tp-brands-style-2 .animated-brands--marquee a{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 140px !important;     /* 🔥 card width */
  height: 140px !important;    /* 🔥 card height */
  background: #ffffff !important;
  border-radius: 18px !important; /* soft radius */
  overflow: hidden !important;

  box-shadow: 0 10px 28px rgba(0,0,0,.08) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* image fits perfectly inside square */
.tp-brands-style-2 .animated-brands--marquee a img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* hover polish */
.tp-brands-style-2 .animated-brands--marquee a:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 16px 40px rgba(0,0,0,.12) !important;
}

/* ======================
   Responsive tuning
====================== */

/* Tablet */
@media (max-width: 991.98px){
  .tp-brands-style-2 .animated-brands--marquee a{
    width: 120px !important;
    height: 120px !important;
    border-radius: 16px !important;
  }
}

/* Mobile */
@media (max-width: 640px){
  .tp-brands-style-2 .animated-brands--marquee a{
    width: 100px !important;
    height: 100px !important;
    border-radius: 14px !important;
  }
}








/* ============================================================
   DYNAMIC BENTO GRID - AUTO-DESIGN FOR NEW CATEGORIES
   ============================================================ */
@media (min-width: 992px) {
    .tp-product-category .container {
        max-width: 1400px !important;
        width: 100% !important;
        padding: 0 40px !important;
    }

    .tp-product-category .tp-category-swiper .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important; 
        grid-auto-rows: 320px !important;
        gap: 24px !important;
        transform: none !important;
        width: 100% !important;
    }

    .tp-product-category .tp-category-swiper .swiper-slide {
        width: 100% !important; 
        height: 100% !important;
        margin: 0 !important;
        display: block !important;
    }


  
    /* --- DYNAMIC MAPPING --- 
       This pattern repeats every 5 items: Wide, Small, Small, Small, Medium */
    
    .tp-product-category .tp-category-swiper .swiper-slide:nth-child(5n+1) { grid-column: span 8 !important; } 
    .tp-product-category .tp-category-swiper .swiper-slide:nth-child(5n+2) { grid-column: span 4 !important; } 
    .tp-product-category .tp-category-swiper .swiper-slide:nth-child(5n+3) { grid-column: span 3 !important; } 
    .tp-product-category .tp-category-swiper .swiper-slide:nth-child(5n+4) { grid-column: span 3 !important; } 
    .tp-product-category .tp-category-swiper .swiper-slide:nth-child(5n+5) { grid-column: span 6 !important; }

    /* --- ITEM STYLING --- */
    .tp-product-category .tp-product-category-item {
        width: 100% !important;
        height: 100% !important;
        border-radius: 24px !important;
        padding: 40px !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        text-align: left !important;
        position: relative !important;
        overflow: hidden !important;
        border: none !important;
    }

    /* Background colors repeat automatically */
    .tp-product-category .tp-category-swiper .swiper-slide:nth-child(5n+1) .tp-product-category-item { background: #F0F0F0 !important; }
    .tp-product-category .tp-category-swiper .swiper-slide:nth-child(5n+2) .tp-product-category-item { background: #EBE7DE !important; }
    .tp-product-category .tp-category-swiper .swiper-slide:nth-child(5n+3) .tp-product-category-item { background: #C8BC9F !important; }
    .tp-product-category .tp-category-swiper .swiper-slide:nth-child(5n+4) .tp-product-category-item { background: #E6F4EA !important; }
    .tp-product-category .tp-category-swiper .swiper-slide:nth-child(5n+5) .tp-product-category-item { background: #FDE8E9 !important; }

    .tp-product-category .tp-product-category-title a {
        font-size: 34px !important;
        font-weight: 800 !important;
        color: #484848 !important;
        text-decoration: none !important;
    }

    .tp-product-category .tp-product-category-thumb {
        position: absolute !important;
        bottom: 20px !important;
        right: 20px !important;
        width: auto !important;
        height: auto !important;
        max-width: 60% !important;
        max-height: 70% !important;
        z-index: 1 !important;
    }

.tp-product-category .tp-product-category-thumb img {
    width: 100% !important;      /* fill the box width */
    height: 100% !important;     /* fill the box height */
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: cover !important;        /* fill space (no gaps) */
    object-position: center !important;  /* keep centered crop */

    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.1));
    display: block !important;
}


    /* --- SHOW ARROWS ONLY IF NEEDED --- 
       Hiding them on desktop because grid is static. 
       If you want them visible, change to 'flex' */
    .tp-product-category .tp-slider-arrow { 
        display: none !important; 
    }
}









/* =========================
   CATEGORY COVER IMAGE (LANDSCAPE 1080x720)
   ========================= */

/* Make the image behave like 1080x720 (3:2) landscape everywhere */
/* CATEGORY COVER IMAGE — WIDER + SHORTER */
.category-cover-img{
  width: 100% !important;           /* full width of its container */
  max-width: 100% !important;       /* no 1080 cap */
  aspect-ratio: 16 / 9 !important;  /* ✅ wider + shorter than 3:2 */
  height: auto !important;          /* controlled by aspect-ratio */
  object-fit: cover !important;     /* crop cleanly */
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 12px !important;
}


/* If your theme forces height somewhere, enforce it */
.category-cover-img{
  min-height: 0 !important;
}

/* Mobile: keep same ratio, just smaller width */
@media (max-width: 576px){
  .category-cover-img{
    max-width: 100% !important;
    border-radius: 10px !important;
  }
}





















/* ==========================================================
   FIX: VIDEO & TEXT RESPONSIVENESS (ID: c357ddfc...)
   ========================================================== */
/* ==========================================================
   VIDEO HERO – PRODUCTION SAFE (CLASS BASED)
   Applies to homepage tp-video only
   ========================================================== */

/* Base wrapper */
.tp-video .relative{
  position: relative !important;
  overflow: hidden !important;
}

/* Video sizing (16:9 / 720p feel) */
.tp-video video{
  width: 100% !important;
  height: clamp(420px, 56.25vw, 720px) !important;
  object-fit: cover !important;
  display: block !important;
}

/* Overlay container */
.tp-video .box-text-info{
  position: absolute !important;
  inset: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 0 18px !important;

  z-index: 5 !important;
}

/* Text readability */
.tp-video .box-text-info h3,
.tp-video .box-text-info p{
  color: #ffffff !important;
  width: 100% !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Desktop typography */
.tp-video .box-text-info h3{
  font-size: 46px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  margin-bottom: 16px !important;
}

.tp-video .box-text-info p{
  font-size: 16px !important;
  line-height: 26px !important;
  margin-bottom: 22px !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
  overflow: hidden !important;
}

/* Button */
.tp-video .box-text-info .tp-btn{
  min-width: 220px !important;
  padding: 12px 22px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}

/* =========================
   TABLET & MOBILE
   ========================= */
@media (max-width: 991.98px){

  .tp-video video{
    height: 520px !important;
  }

  .tp-video .box-text-info{
    padding: 40px 16px !important;
  }

  .tp-video .box-text-info h3{
    font-size: 28px !important;
  }

  .tp-video .box-text-info p{
    font-size: 14px !important;
    line-height: 22px !important;
    -webkit-line-clamp: 4 !important;
  }

  .tp-video .box-text-info .tp-btn{
    min-width: 170px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
}

/* Small phones */
@media (max-width: 576px){

  .tp-video video{
    height: 460px !important;
  }

  .tp-video .box-text-info h3{
    font-size: 22px !important;
  }

  .tp-video .box-text-info p{
    -webkit-line-clamp: 3 !important;
  }

  .tp-video .box-text-info .tp-btn{
    min-width: 150px !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
  }
}

/* ==========================================================
   RTL FIX (Arabic) for VIDEO HERO (.tp-video)
   - Make text direction RTL
   - Keep layout centered
   - Fix typed.js span direction
   ========================================================== */

[dir="rtl"] .tp-video .box-text-info{
  direction: rtl !important;
  text-align: center !important;   /* keep centered like EN */
}

/* Make title + paragraph RTL (so punctuation/line flow is correct) */
[dir="rtl"] .tp-video .box-text-info h3,
[dir="rtl"] .tp-video .box-text-info p{
  direction: rtl !important;
  unicode-bidi: plaintext !important;
  text-align: center !important;
}

/* Typed.js part: force RTL for the animated word */
[dir="rtl"] .tp-video .box-text-info .element,
[dir="rtl"] .tp-video .box-text-info .typed-cursor{
  direction: rtl !important;
  unicode-bidi: isolate !important;
}

/* Button Arabic direction (text inside) */
[dir="rtl"] .tp-video .box-text-info .tp-btn{
  direction: rtl !important;
}
















/* ===== Clients Marquee (only this section) ===== */
/* ===== Clients Section (EN + AR) ===== */

/* ===== Marquee Animation (CSS ONLY) ===== */
[section-id="da7934e2-b342-479c-9712-d54d0f57841d"] .brands-style-box{
  overflow: hidden !important;
}

[section-id="da7934e2-b342-479c-9712-d54d0f57841d"] .animated-brands--marquee{
  display: flex !important;
  width: max-content !important;
  will-change: transform !important;
  animation: zidClientsMarquee 18s linear infinite !important;
}

/* pause on hover */
[section-id="da7934e2-b342-479c-9712-d54d0f57841d"] .brands-style-box:hover .animated-brands--marquee{
  animation-play-state: paused !important;
}

/* keep items aligned */
[section-id="da7934e2-b342-479c-9712-d54d0f57841d"] .marquee__group{
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  padding-right: 24px !important;
  flex-shrink: 0 !important;
}

/* animation (because you have duplicated groups A+B) */
@keyframes zidClientsMarquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* mobile */
@media (max-width: 768px){
  [section-id="da7934e2-b342-479c-9712-d54d0f57841d"] .marquee__group{
    gap: 16px !important;
    padding-right: 16px !important;
  }
  [section-id="da7934e2-b342-479c-9712-d54d0f57841d"] .marquee__group img{
    width: 64px !important;
    height: 64px !important;
  }
}















































































/* =========================
   ZID BLOG VIDEO – FIXED
========================= */

.zid-blog-video{
  width: 100%;
  max-width: 1106px;
  margin: 0 auto;
  position: relative;
}

.zid-blog-video video{
  width: 100% !important;
  height: auto !important;
  min-height: 320px !important; /* 🔥 prevents collapse */
  display: block !important;
  object-fit: cover !important;
  background: #000; /* avoids white flash */
}

/* Mobile */
@media (max-width: 576px){
  .zid-blog-video video{
    min-height: 220px !important;
  }
}


































/* Base layout */
ul.dropdown li a{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

/* Image placeholder (hidden by default) */
ul.dropdown li a::before{
  content: "" !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background-size: cover !important;
  background-position: center !important;
  flex: 0 0 46px !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.10) !important;
  display: none !important;
}


/*----------- Chocolate Categories--------- */

/* ✅ Chocolate The Rocks */
ul.dropdown li a[href*="/categories/1459538"]::before{
  display: block !important;
  background-image: url("https://media.zid.store/038f6dee-047e-4937-9777-b0a0f060b50f/d9404684-a543-4c52-93df-0e81839e06a4-260x260.png") !important;
}

/* ✅ Chocolate Truffle */
ul.dropdown li a[href*="/categories/1459540"]::before{
  display: block !important;
  background-image: url("https://media.zid.store/038f6dee-047e-4937-9777-b0a0f060b50f/d9a5bbd9-2a66-43f4-b3ae-1c65dd8b2e90.png") !important;
}

/* ✅ Chocolate Signature */
ul.dropdown li a[href*="/categories/1459537"]::before{
  display: block !important;
  background-image: url("https://media.zid.store/038f6dee-047e-4937-9777-b0a0f060b50f/0c1e7ad8-6a78-485d-97f5-e4e2b8f21e57.png") !important;
}

/* ✅ Chocolate Classic */
ul.dropdown li a[href*="/categories/1459536"]::before{
  display: block !important;
  background-image: url("https://media.zid.store/038f6dee-047e-4937-9777-b0a0f060b50f/dcdccc99-f965-4c87-8ce0-9a28ed7081de.png") !important;
}








/*----------- Stuffed Dates Categories--------- */


/* ✅ Saudi Delight Selection */
ul.dropdown li a[href*="/categories/1459535"]::before{
  display: block !important;
  background-image: url("https://media.zid.store/038f6dee-047e-4937-9777-b0a0f060b50f/bc6ae406-fdbe-4a51-bd96-024c4ab3af1d.png") !important;
}

/* ✅ Classic Selection */
ul.dropdown li a[href*="/categories/1459534"]::before{
  display: block !important;
  background-image: url("https://media.zid.store/038f6dee-047e-4937-9777-b0a0f060b50f/1361b8b7-df9f-4c57-9843-d6fefd7dfe34.png") !important;
}

/* ✅ Signature Selection */
ul.dropdown li a[href*="/categories/1459533"]::before{
  display: block !important;
  background-image: url("https://media.zid.store/038f6dee-047e-4937-9777-b0a0f060b50f/e279e44a-d09e-476c-9194-02d1356da894.png") !important;
} 

/* ✅ Monafi */
ul.dropdown li a[href*="/categories/1459532"]::before{
  display: block !important;
  background-image: url("https://media.zid.store/038f6dee-047e-4937-9777-b0a0f060b50f/5a4d1d30-8185-4010-b0c5-3023b592bdeb.png") !important;
}

/* ✅ Sawafy */
ul.dropdown li a[href*="/categories/1459531"]::before{
  display: block !important;
  background-image: url("https://media.zid.store/038f6dee-047e-4937-9777-b0a0f060b50f/e3b63187-946e-411a-98e4-4f6cc70c704d.png") !important;
}

/* ✅ Saggai */
ul.dropdown li a[href*="/categories/1459530"]::before{
  display: block !important;
  background-image: url("https://media.zid.store/038f6dee-047e-4937-9777-b0a0f060b50f/c11a4092-7b19-47ac-ae20-020bf1e8a223.png") !important;
}

/* ✅ Anbara */
ul.dropdown li a[href*="/categories/1459528"]::before{
  display: block !important;
  background-image: url("https://media.zid.store/038f6dee-047e-4937-9777-b0a0f060b50f/c261439f-82f1-4254-a574-0e41b0188ce7.png") !important;
}

/* ✅ Barni Al-Ais */
ul.dropdown li a[href*="/categories/1459527"]::before{
  display: block !important;
  background-image: url("https://media.zid.store/038f6dee-047e-4937-9777-b0a0f060b50f/3aacfb6b-4234-4959-a0eb-cb9649d5f9fb.png") !important;
}

/* ✅ Barni */
ul.dropdown li a[href*="/categories/1459526"]::before{
  display: block !important;
  background-image: url("https://media.zid.store/038f6dee-047e-4937-9777-b0a0f060b50f/ea961a0c-7987-4754-9354-0978091f31c0.png") !important;
}

/* ✅ Medjool */
ul.dropdown li a[href*="/categories/1459525"]::before{
  display: block !important;
  background-image: url("https://media.zid.store/038f6dee-047e-4937-9777-b0a0f060b50f/34166940-d937-4654-8104-ee9fbfdb12a7.png") !important;
}

/* ✅ Ajwa */
ul.dropdown li a[href*="/categories/1459524"]::before{
  display: block !important;
  background-image: url("https://media.zid.store/038f6dee-047e-4937-9777-b0a0f060b50f/3f8afaba-bb5b-4951-895e-16d894504cad.png") !important;
}


















/* =========================================================
   1. GLOBAL REMOVAL: REWARDS, INSTAGRAM & WHATSAPP TEXT
   (Forced override for Desktop and Mobile)
   ========================================================= */
html body .loyalty_button_footer,
html body .loyalty_footer_btn,
html body #app-loyalty,
html body .smt-wrapper,
html body .instagram-teaser,
html body .smt-app,                         /* Targets the Instagram follow app */
html body .smt-app-instagram_follow,        /* Specific Instagram app class */
html body .shadow-smt-app,                  /* Targets the shadow overlay */
html body a[href*="instagram.com"],
html body .sm-button .sm-text,
html body .waves-whatsapp .text,
html body .waves-whatsapp .message,
html body .message.sm-fixed.bottom-right,   /* Specific WhatsApp bubble class */
html body [class*="LoyaltyNotEnabledException"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    z-index: -9999 !important;
    position: absolute !important;
}

/* =========================================================
   2. WHATSAPP ICON ADJUSTMENTS (Clean & Floated)
   ========================================================= */

/* Desktop Position */
html body .sm-button,
html body .waves-whatsapp,
html body [id*="whatsapp"] {
    bottom: 110px !important; 
    z-index: 999999 !important;
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    right: 20px !important;
}

/* Icon Sizing */
html body .sm-button img,
html body .waves-whatsapp img {
    width: 26px !important; 
    height: 26px !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Mobile Position (Clears bottom nav) */
@media (max-width: 991.98px) {
    html body .sm-button,
    html body .waves-whatsapp {
        bottom: 150px !important; /* Slightly higher for mobile clearance */
        width: 42px !important;
        height: 42px !important;
    }
}
</style>