:root{
  --radius-xl:36px;
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:14px;
  --soft-bg:#f7f4ef;
  --card-bg:#ffffff;
  --shadow-soft:0 20px 60px rgba(0,0,0,0.08);
  --shadow-light:0 10px 30px rgba(0,0,0,0.06)
}

body{
  background-color:#f6f2ea;
  position:relative
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(170, 155, 130, 0.18) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(150, 135, 110, 0.14) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(190, 175, 150, 0.12) 1px, transparent 0);
  background-size:22px 22px, 30px 30px, 26px 26px;
  background-position:0 0, 11px 7px, 17px 13px
}

/* ================= NAVBAR ================= */

#navbar{
  background-color:#f6f2ea !important;
  border-bottom:1px solid rgba(0,0,0,0.05)
}

#navbar.bg-light-subtle,
#navbar.bg-body{
  background-color:#f6f2ea !important
}

#navbar .container{
  background:transparent
}

#navbar{
  backdrop-filter:blur(12px)
}

#navbar .navbar{
  border-radius:0 0 var(--radius-lg) var(--radius-lg)
}

/* ================= NAVIGATION MENU ================= */

#navigation-menu{
  background:#f6f2ea !important;
  border-top:1px solid rgba(0,0,0,0.05);
  border-bottom:1px solid rgba(0,0,0,0.05)
}

#navigation-menu .css-menu{
  display:flex;
  align-items:center;
  gap:28px;
  overflow-x:auto;
  scrollbar-width:none
}

#navigation-menu .css-menu::-webkit-scrollbar{
  display:none
}

#navigation-menu .nav-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  font-size:14px;
  font-weight:500;
  color:#111 !important;
  border-radius:999px;
  overflow:hidden;
  transition:color .3s ease, transform .3s ease
}

#navigation-menu .nav-link::after{
  content:"";
  position:absolute;
  inset:0;
  background:#d8cfbf;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s ease;
  border-radius:999px;
  z-index:-1
}

#navigation-menu .nav-link:hover::after{
  transform:scaleX(1);
  transform-origin:left
}

#navigation-menu .nav-link:hover{
  color:#ffffff !important;
  transform:translateY(-1px)
}

#navigation-menu .nav-link::before{
  font-size:15px;
  line-height:1;
  color:#111;
  transition:transform .35s ease, color .35s ease
}

#navigation-menu .nav-link:hover::before{
  color:#c9a24d;
  transform:translateX(2px)
}

#navigation-menu .nav-item:nth-child(1) .nav-link::before{content:"🏠"}
#navigation-menu .nav-item:nth-child(2) .nav-link::before{content:"🛒"}
#navigation-menu .nav-item:nth-child(3) .nav-link::before{content:"📺"}
#navigation-menu .nav-item:nth-child(4) .nav-link::before{content:"🪑"}
#navigation-menu .nav-item:nth-child(5) .nav-link::before{content:"🛋️"}
#navigation-menu .nav-item:nth-child(6) .nav-link::before{content:"🪟"}
#navigation-menu .nav-item:nth-child(7) .nav-link::before{content:"🪞"}

/* ================= SLIDER ================= */

section.css-slider{
  max-width:92%;
  margin:40px auto;
  border-radius:var(--radius-xl);
  overflow:hidden
}

section.css-slider .carousel,
section.css-slider .carousel-inner,
section.css-slider .carousel-item{
  border-radius:var(--radius-xl)
}

section.css-slider img{
  border-radius:var(--radius-xl)
}

section.css-slider .carousel-caption{
  background:rgba(255,255,255,0.92);
  color:#111;
  padding:28px 32px;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
  max-width:420px
}

section.css-slider .carousel-caption h2{
  color:#111;
  font-weight:700
}

section.css-slider .carousel-caption p{
  color:#555
}

/* ================= CATEGORIES ================= */

section.css-categories .card{
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:0.4s ease
}

section.css-categories .card img{
  border-radius:var(--radius-md) var(--radius-md) 0 0
}

section.css-categories .card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-light)
}

section.css-categories .card-footer{
  background:transparent;
  border-top:none
}

/
/* ================= TESTIMONIALS ================= */

section.css-testimonials .swiper-slide.card{
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-light)
}

/* ================= IMAGE WITH TEXT ================= */

section.css-image-with-text{
  border-radius:var(--radius-xl);
  overflow:hidden;
  margin:60px auto;
  max-width:92%
}

/* ================= HEADINGS ================= */

h1, h2, h3, h4{
  letter-spacing:0.5px
}

.section-title,
h2.h5{
  font-weight:700
}

/* ================= FOOTER ================= */

footer{
  background-color:#f6f2ea !important
}

footer .bg-secondary,
footer .bg-light-subtle{
  background-color:#f6f2ea !important
}

footer section{
  background-color:transparent !important
}

footer .border-top,
footer .border-bottom{
  border-color:rgba(0,0,0,0.08) !important
}

/* ================= REMOVE CAPTION BG ================= */

.carousel-caption{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important
}

/* ======================================================
   GLOBAL RESET FOR PRODUCT CARDS
====================================================== */

.card-product,
.card-product .card-body,
.card-product .list-group-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ======================================================
   PRODUCT CARD STYLE (HOME + SLIDERS)
====================================================== */

.card-product {
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transition: all .3s ease;
}

.card-product:hover {
  transform: translateY(-5px);
}

/* صورة الكارت تتكيف طبيعي */
.card-product .css-thumbnail {
  display: block;
  width: 100%;
  background: #f6f3ee;
  border-radius: 16px 16px 0 0 !important;
  overflow: hidden;
}

.card-product .card-img-top {
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: contain !important;
  transition: transform .4s ease;
}

.card-product:hover .card-img-top {
  transform: scale(1.04);
}

/* النص والسعر */
.card-product h2 {
  font-size: 14px !important;
  font-weight: 600;
  margin-bottom: 4px !important;
}

.card-product strong {
  font-size: 15px;
  font-weight: 600;
}

.card-product .card-body {
  padding: 8px 6px !important;
}

/* ======================================================
   MOBILE – PRODUCTS SLIDER ONLY (FIXED)
====================================================== */

@media (max-width: 768px) {

  section.css-products .swiper-slide {
    width: 65% !important;
  }

  section.css-products .swiper-wrapper {
    padding-right: 12px;
  }


/* ======================================================
   PRODUCT HEADER CARD – CLEAN PROFESSIONAL STYLE
====================================================== */

/* الكارت الأساسي */
.card.mb-3.border-secondary {
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 12px 35px rgba(0,0,0,0.05) !important;
}

/* الهيدر الداخلي */
.card-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  padding: 20px 24px !important;
}

/* ======================================================
   PRODUCT TITLE
====================================================== */

.card-header h1 {
  color: #000000 !important;   /* أسود صريح */
  font-weight: 800 !important;
  font-size: 24px !important;
  letter-spacing: 0.3px;
  margin: 0 !important;
}

/* ======================================================
   SHARE & QR BUTTONS
====================================================== */

.card-header .btn-outline-primary {
  border-radius: 50px !important;
  border: 1px solid #e0d8cd !important;
  background: #f6f2ea !important;
  color: #6f563c !important;
  transition: all .3s ease;
  padding: 8px 12px !important;
}

/* هوفر */
.card-header .btn-outline-primary:hover {
  background: #8c6f4e !important;
  color: #ffffff !important;
  border-color: #8c6f4e !important;
  transform: translateY(-2px);
}

/* أيقونات */
.card-header i {
  font-size: 16px !important;
}

/* ======================================================
   DROPDOWN MENU
====================================================== */

.dropdown-menu {
  border-radius: 18px !important;
  padding: 10px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}

.dropdown-item {
  border-radius: 12px !important;
  transition: all .2s ease;
}

.dropdown-item:hover {
  background: #f6f2ea !important;
  color: #000 !important;
}

/* ======================================================
   MOBILE VERSION
====================================================== */

@media (max-width:768px){

  .card-header {
    padding: 16px !important;
  }

  .card-header h1 {
    font-size: 18px !important;
    line-height: 1.4;
  }

  .card-header .btn-outline-primary {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }

}
  /* ======================================================
   ADD TO CART CARD – PROFESSIONAL MOBILE FIX
====================================================== */

/* الكارت السفلي */
.js-quantity-add-buttons {
  background: #ffffff !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 28px 28px 0 0 !important;
  padding: 18px !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.06);
}

/* زرار أضف للسلة */
#product-view-add-to-cart,
.js-add-to-cart {
  background: #8c6f4e !important;
  border: none !important;
  border-radius: 40px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 14px 20px !important;
  transition: all .3s ease;
}

/* هوفر */
#product-view-add-to-cart:hover,
.js-add-to-cart:hover {
  background: #6f563c !important;
  transform: translateY(-2px);
}

/* زرار اشتري الآن */
.btn-buy-now {
  border-radius: 40px !important;
  font-weight: 700 !important;
}


/* ======================================================
   MOBILE – BUTTONS PERFECT ALIGNMENT
====================================================== */

@media (max-width:768px){

  .js-quantity-add-buttons {
    padding: 14px !important;
  }

  #product-view-add-to-cart,
  .js-add-to-cart,
  .btn-buy-now {
    width: 100% !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    border-radius: 30px !important;
  }

  .js-product-quantity {
    margin-bottom: 10px;
  }

}


/* ======================================================
   RELATED PRODUCTS – MOBILE 1 + HALF
====================================================== */

@media (max-width:768px){

  .js-related-section .swiper-slide {
    width: 65% !important; /* منتج + جزء من التالي */
  }

  .js-related-section .swiper-wrapper {
    padding-right: 12px;
  }

}


/* ======================================================
   FORCE IMAGE VISIBILITY (FIX NOT SHOWING)
====================================================== */

/* إلغاء أي d-none مخفي الصور */
.js-related-section .\!d-none {
  display: block !important;
}

/* منع lazy loading من إخفاء الصور */
.js-related-section .swiper-lazy {
  opacity: 1 !important;
}

.js-related-section .swiper-lazy-preloader {
  display: none !important;
}

/* تأكيد ظهور الصورة */
.card-product img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}


/* ======================================================
   DESKTOP RELATED FIX
====================================================== */

@media (min-width:1200px){

  .js-related-section .swiper-slide {
    width: calc(100% / 4 - 16px) !important;
  }

/* =========================================
   FORCE PRODUCT TITLE BLACK – FINAL FIX
========================================= */

.card-header > h1.mb-0 {
  color: #000000 !important;
}