:root {
  --primary-color: #d45e7c;
  --secondary-color: #50777c;
  --third-color: #92b6b9;
}

.product-grid .item-box .thumbnail {
  background-color: var(--primary-color);

  margin-top: 11px;
}

.item-box .prices span.actual-price {
  color: var(--primary-color);
}

.products-wrapper .product-grid .item-box {
  margin-bottom: 23px;
}

.product-category-item .picture,
.product-category-item .img-scale,
.home-page-category-grid img,
.product-category-item .picture img {
  border-radius: 15px;
}

button.btn.btn-primary.btn-category-main-page,
.master-column-wrapper .btn {
  border-radius: 50px !important;
  background-color: var(--primary-color);
  color: #fff !important;
  border: none !important;
}

.item-box .thumbnail .wishlist-compare-wrapper {
  border: transparent !important;
}

.theme-custom .nivoSlider {
  border-radius: 0px 0px 10px 10px;
  margin-bottom: 40px;
}

.title.sub-title {
  margin-bottom: 20px;
}

.title.sub-title strong {
  color: var(--secondary-color);
}

.box-shadow-wrapper,
.product-grid .item-box .thumbnail {
  border-radius: 15px !important;
  border: 1px solid #d9d9d9 !important;
  box-shadow: 1px 0px 12px rgb(0 0 0 / 16%) !important;
}

.block.block-blog-archive.well.box-shadow-wrapper .listbox ul li strong,
.box-shadow-wrapper .listbox ul li a {
  border-bottom: 1px solid #dddddd4a;
}

.block.block-recently-viewed-products.well.box-shadow-wrapper ul li {
  display: flex;
  align-items: center;
}

.block.block-recently-viewed-products.well.box-shadow-wrapper ul li.last,
.box-shadow-wrapper .listbox ul li:last-child a {
  border-bottom: transparent;
}

.title.main-title {
  border-bottom: 1px solid #d9d9d9;
  position: relative;
}

.title.main-title::before {
  position: absolute;
  width: 100px;
  height: 5px;
  background-color: var(--primary-color);
  content: '';
  bottom: -3px;
  inset-inline-start: 6px;
}

.product-details-page .addtocart-quantity-box {
  border-radius: 50px;
  overflow: hidden;
  margin-top: 10px;
}

.product-details-page .add-to-cart .qty-input,
.product-details-page .add-to-cart .addtocart-quantity-box span {
  height: 40px;
  line-height: 40px;
}

.product-sorting select.form-control {
  border-radius: 10px !important;
}

.product-details-page .add-to-cart .addtocart-quantity-box span {
  width: 40px;
  border-radius: 50px;
}

.product-details-page .add-to-cart .addtocart-quantity-box .increase-quantity,
.product-details-page .add-to-cart .addtocart-quantity-box .decrease-quantity {
  background-color: var(--secondary-color);
  border: transparent;
}

.product-details-page .add-to-cart .qty-input.form-control {
  background-color: var(--third-color) !important;
}

.product-details-page .add-to-cart .addtocart-quantity-box * {
  color: #fff;
}

.footer-lower {
  background: var(--primary-color);
  color: #fff !important;
  font-size: 0.8em;
  border: transparent;
}

.product-grid
  .item-box
  .wishlist-compare-wrapper
  .product-box-add-to-cart-button {
  background-color: var(--primary-color) !important;
  border: none !important;
}

.product-grid
  .item-box
  .wishlist-compare-wrapper
  .product-box-add-to-cart-button:hover {
  background-color: #6f3c2e !important;
  /* your brown */
}

.product-grid
  .item-box
  .wishlist-compare-wrapper
  .product-box-add-to-cart-button:hover::before,
.product-grid
  .item-box
  .wishlist-compare-wrapper
  .product-box-add-to-cart-button:hover::after {
  background-color: #6f3c2e !important;
}

.product-grid
  .item-box
  .wishlist-compare-wrapper
  .product-box-add-to-cart-button
  i {
  color: #fff !important;
}

.pager .pagination > li > a,
.pager .pagination > li > span,
.pager ul > li > a,
.pager ul > li > span {
  width: 45px !important;
  height: 45px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 45px !important;
}

.pager .pagination > li.active > a,
.pager .pagination > li.active > span,
.pager ul > li.active > a,
.pager ul > li.active > span,
.pager .current-page > span {
  border-radius: 50% !important;
}

.pager ul li.previous-page a,
.pager ul li.next-page a,
.pager ul li.first-page a,
.pager ul li.last-page a,
.pager ul li.previous-page span,
.pager ul li.next-page span,
.pager ul li.first-page span,
.pager ul li.last-page span {
  background-color: #6f3c2e !important;
  /* brown */
  border-color: #6f3c2e !important;
  color: #fff !important;
}

.pager ul li.previous-page a::before,
.pager ul li.next-page a::before,
.pager ul li.first-page a::before,
.pager ul li.last-page a::before,
.pager ul li.previous-page a::after,
.pager ul li.next-page a::after,
.pager ul li.first-page a::after,
.pager ul li.last-page a::after {
  color: #fff !important;
  border-color: #fff !important;
  background-color: #fff !important;
}

/* MOBILE: Add to cart button = 90% and perfectly centered */
@media (max-width: 768px) {
  .product-details-page .add-to-cart .product-add-button {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

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

  .product-details-page .add-to-cart button.add-to-cart-button {
    width: 80% !important;
    height: 64px !important;

    float: none !important;
    display: block !important;

    margin: 20px 0 !important;
    margin-inline: auto !important;

    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    font-size: 22px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
  }
}

.footer-designedby,
.designedby {
  display: none !important;
}

/* ========================================= */
/* FILTER & SIDEBAR IMPROVEMENTS (FIXED)     */
/* ========================================= */

/* 1. Remove the grey separator lines between the list items inside the filters */
.sidebar .listbox ul li,
.sidebar .listbox ul li a,
.sidebar .listbox ul li strong,
.box-shadow-wrapper .listbox ul li a {
  border-bottom: none !important;
}

/* 2. Remove the grey bottom border and the pink underline bar from the filter titles */
.sidebar .title.main-title,
.box-shadow-wrapper .title.main-title {
  border-bottom: none !important;
}

.sidebar .title.main-title::before,
.box-shadow-wrapper .title.main-title::before {
  display: none !important;
}

/* 3. Soften the overall box appearance (lighter shadow, softer borders, smoother corners) */
.sidebar .box-shadow-wrapper,
.sidebar .block,
.product-filters.box-shadow-wrapper {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #f2f2f2 !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  margin-bottom: 16px !important;
}

/* 4. Adjust the spacing inside the boxes so the text has room to breathe */
.sidebar .title.main-title {
  padding: 16px 20px 8px !important;
}

.sidebar .filter-content,
.sidebar .listbox {
  padding: 0 20px 16px !important;
}

/* ========================================= */
/* SORTING & FILTER BAR ENHANCEMENTS (V2)    */
/* ========================================= */

/* 1. Force remove any borders, shadows, or pseudo-element lines around the sorting area */
.category-page .product-selectors,
.category-page .product-selectors .product-sorting,
.category-page .product-selectors .form-group {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-bottom: 0 !important;
  border-top: 0 !important;
}

/* Strip out any generated lines from the theme */
.category-page .product-selectors::before,
.category-page .product-selectors::after {
  display: none !important;
}

/* 2. Layout the 'Sort By' section horizontally so it looks modern */
.category-page .product-sorting .form-group {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  /* Aligns to the right for Arabic */
  gap: 15px !important;
  /* Space between label and dropdown */
  margin-bottom: 20px !important;
}

/* 3. Style the "رتب بـ" label */
.category-page .product-sorting label {
  font-weight: 700 !important;
  color: #6f3c2e !important;
  /* Brand brown */
  font-size: 16px !important;
  margin: 0 !important;
  /* Reset margins since we use flex gap */
  white-space: nowrap !important;
}

/* 4. Completely overhaul the Dropdown (Select) */
.category-page .product-sorting select.form-control.dropdown-filter {
  background-color: #ffffff !important;
  /* Clean white */
  border: 1px solid #eaeaea !important;
  border-radius: 50px !important;
  /* Pill shape */
  padding: 8px 16px 8px 40px !important;
  /* Extra padding on the left for the custom arrow */
  height: 48px !important;
  color: #333333 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  width: 250px !important;
  max-width: 100% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;

  /* Hide the ugly native OS dropdown arrow and add a custom clean one */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  /* Custom Brown SVG Arrow */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236F3C2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 15px center !important;
  /* Position arrow on the left for RTL */
  background-size: 14px !important;
  transition: all 0.3s ease !important;
}

/* Hover & Focus states for the Dropdown */
.category-page .product-sorting select.form-control.dropdown-filter:hover {
  border-color: var(--primary-color) !important;
  /* Brand pink */
}

.category-page .product-sorting select.form-control.dropdown-filter:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(212, 94, 124, 0.15) !important;
  outline: none !important;
}

/* 5. Mobile specific tweaks for a perfect layout */
@media (max-width: 768px) {
  .category-page .product-sorting .form-group {
    justify-content: space-between !important;
    /* Push label to the right, dropdown to the left */
  }

  .category-page .product-sorting select.form-control.dropdown-filter {
    width: 65% !important;
    /* Allow it to take up reasonable space on mobile */
  }
}

/* ========================================= */
/* MAIN NAVIGATION MENU DROPDOWNS            */
/* ========================================= */

/* 1. Style the main dropdown box */
.header-menu .navbar-nav > li > .dropdown-menu {
  border: none !important;
  border-radius: 16px !important;
  /* Smooth, rounded corners */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
  /* Soft, wide shadow for a floating effect */
  padding: 12px 0 !important;
  /* Breathing room at the top and bottom */
  background-color: #ffffff !important;
  min-width: 220px !important;
  /* Ensure the menu is wide enough */
  margin-top: 8px !important;
  /* Slight gap below the main menu bar */

  /* Smooth fade and slide animation when it appears */
  animation: menuFadeIn 0.3s ease forwards;
}

@keyframes menuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Style the individual links inside the menu */
.header-menu .navbar-nav > li > .dropdown-menu > li > a {
  padding: 10px 24px !important;
  /* Space around the text */
  color: #4a4a4a !important;
  /* Softer text color */
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: all 0.2s ease-in-out !important;
  /* Smooth transition for hover effects */
  display: block !important;
  background: transparent !important;
}

/* 3. Hover state for the links */
.header-menu .navbar-nav > li > .dropdown-menu > li > a:hover {
  background-color: rgba(212, 94, 124, 0.05) !important;
  /* Very faint brand pink background */
  color: var(--primary-color) !important;
  /* Text turns pink */
  padding-inline-start: 32px !important;
  /* Slight interactive nudge for RTL text */
}

/* 4. Ensure no background color bleeds from the list items */
.header-menu .navbar-nav > li.dropdown > ul.dropdown-menu > li {
  background: transparent !important;
}

/* ========================================= */
/* TOP BAR COLOR MATCH                       */
/* ========================================= */

.header-upper {
  background-color: #e5aaba !important;
  border-bottom: none !important;
}

.sidebar .block.product-filters {
  box-shadow: none !important;
  border: none !important;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
  border: 1px solid #d9d9d9 !important;
  box-shadow: 1px 0px 12px rgb(0 0 0 / 16%) !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background-position: center 0px !important;
}

.owl-carousel .owl-nav button.owl-next:hover,
.owl-carousel .owl-nav button.owl-prev:hover {
  background-color: var(--primary-color) !important;
}

.item-box .product-item .picture a img {
  max-width: 90%;
  max-height: 90%;
}

/*for menu resolve*/
.search_bar_form_control_overrides {
  border-radius: 40px !important;
  padding-inline-start: 20px;
}

.navbar-brand {
  margin-top: 0px !important;
  padding: 10px !important;
}

.quicklinks-topheader {
  justify-content: flex-end !important;
  gap: 20px;
}

.main-menu.goToTop .navbar.navbar-inverse.category-menu,
.header-menu > .container {
  margin: 0 auto;
  width: 1140px !important;
  width: 97vw !important;
  max-width: 1400px !important;
}

.header-menu > .container .col-md-12 {
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
}

@media screen and (max-width: 1300px) and (min-width: 768px) {
  .header-menu .navbar.navbar-inverse .nav.navbar-nav > li::before {
    width: 4px;
  }

  .quicklinks-topheader {
    gap: 15px;
  }

  .navbar-brand {
    margin-top: 9px !important;
  }

  .navbar-brand .logo {
    max-height: 70px;
  }
}

/* 5. Mobile specific tweaks for a perfect layout */

@media screen and (max-width: 600px) {
  .product-details-page .gallery .picture {
    border: none !important;
  }

  .navbar-brand .logo {
    top: 7px !important;
  }

  .container {
    max-width: 90%;
  }

  .products-container .product-grid .item-box.col-xs-12 {
    width: 50% !important;
    padding-inline-start: 5px !important;
    padding-inline-end: 5px !important;
    min-height: 200px !important;
    margin-bottom: 10px !important;
  }

  .products-container .product-grid .item-box.col-xs-12 .thumbnail {
    background: transparent !important;
    min-height: 250px !important;
  }

  .sidebar {
    box-shadow: none !important;
    z-index: 500;
  }

  .side-content {
    padding-inline-start: 5px !important;
    padding-inline-end: 5px !important;
  }

  .pager .pagination > li > a,
  .pager .pagination > li > span,
  .pager ul > li > a,
  .pager ul > li > span {
    width: 40px !important;
    height: 40px !important;
  }
}

/* 5. Mobile specific tweaks for a cartPage to shwo the desktop view on kobile to show the delete button */
@media (max-width: 767px) {
  #shopping-cart-form
    .shopping-cart-small-wrapper.visible-xs.mobile-duplicate
    .remove-addtocart-checkbox {
          position: absolute;
        width: 50px;
        /* background: red; */
        inset-inline-end: 15px;
  }

  #shopping-cart-form
    .shopping-cart-small-wrapper.visible-xs.mobile-duplicate
    .remove-addtocart-checkbox
    .remove-from-cart
    .remove-btn {
          width: 45px;
        height: 45px;
        position: relative;
        border-radius: 4px;
        font-size: 1.1em;
    position: relative;
  }
  #shopping-cart-form
    .shopping-cart-small-wrapper.visible-xs.mobile-duplicate
    .remove-addtocart-checkbox
    .remove-from-cart
    .remove-btn::before {
    content: '\f2ed';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
  }
}