/* ??????????? ?? ??? ????? ?? index (qeshm-kharid) */

/* ??????? ? ???????? ???? ?? ??? API */
.btn-primary:not(.color-danger) {
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-primary:not(.color-danger):hover {
  background-color: color-mix(in oklab, var(--primary) 85%, black);
  border-color: color-mix(in oklab, var(--primary) 85%, black);
}

.btn-link,
.product-row-carousel .page-title .btn-link,
.page-title.align-right .btn-link {
  color: var(--primary);
}

/* ?????? ?????? */
.page-title.align-right h2,
.product-row-carousel .page-title.align-right h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.page-title.align-right,
.product-row-carousel .page-title,
.product-row-carousel .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.page-title.align-right h2,
.product-row-carousel .page-title h2,
.product-row-carousel .section-header .title h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.product-row-carousel .see-more a {
  color: var(--primary, var(--c-primary, #6d28d9));
  font-size: 0.875rem;
}

/* -------- product-row-carousel (???? ????? / ??????? ???? ???) -------- */
.product-row-carousel .section-inner {
  overflow: visible;
  position: relative;
}
.product-row-carousel .swiper-products {
  position: relative !important;
  height: auto !important;
  overflow: hidden;
}
.product-row-carousel .swiper-products .swiper-wrapper {
  height: auto !important;
  align-items: flex-start;
}
.product-row-carousel .swiper-products .swiper-slide {
  height: auto;
}
.product-rows-container {
  margin-bottom: 0;
}
.product-rows-container .product-row-carousel {
  margin: 20px 0 0;
}
.product-rows-container .product-row-carousel + .product-row-carousel {
  margin-top: 0;
}
.product-rows-container .product-row-carousel:last-child {
  margin-bottom: 20px;
}

@media (max-width: 575px) {
  .product-row-carousel .swiper-button-next,
  .product-row-carousel .swiper-button-prev {
    display: none !important;
  }
}

/* ?????? ????? ? ?????? */
.middle-banner-section.baners-section .baner img,
.footer-banner-section.baners-section .baner img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ????????? ? ???? ??? ???? */
.total-products-list.type-2 .section-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .total-products-list.type-2 .section-inner {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1200px) {
  .total-products-list.type-2 .section-inner {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ????? ???? ???? */
.blogs-home .blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .blogs-home .blog-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ???? ????? ? ???? ????? */
.card-product .percentage {
  background-color: var(--primary);
}

/* ???? ? ???? ????? */
.footer .property {
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
}

/* ???? ????? ?????? */
.navbar-bottom .item.active h3 {
  color: var(--primary);
}

/* ??? ??? ???? / ????? ? ????? ???????? */
.cart-header .logo img {
  max-height: 52px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}

/* ========== Search dropdown: product thumb preview (theme 2/3) ========== */
#search-results,
.navbar .header-search .search-inner .search-results,
.header-search .search-results {
  max-height: min(70vh, 440px) !important;
  overflow-y: auto !important;
  z-index: 1050 !important;
}

#search-results ul li a,
.navbar .header-search .search-inner .search-results ul li a,
.header-search .search-results ul li a {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
}

#search-results ul li a .thumb,
.navbar .header-search .search-inner .search-results ul li a .thumb,
.header-search .search-results ul li a .thumb {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: block !important;
  background: #f3f4f6 !important;
  flex-shrink: 0 !important;
}

#search-results ul li a .thumb img,
.navbar .header-search .search-inner .search-results ul li a .thumb img,
.header-search .search-results ul li a .thumb img {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  object-fit: cover !important;
  display: block !important;
}

#search-results ul li a .icon,
.header-search .search-results ul li a .icon {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#search-results ul li a .name,
.header-search .search-results ul li a .name {
  min-width: 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  white-space: normal !important;
}

#search-results ul li a .price,
.header-search .search-results ul li a .price {
  font-size: 12px !important;
  color: #16a34a !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
}

#search-results .search-loading,
#search-results .search-empty,
.header-search .search-results .search-loading,
.header-search .search-results .search-empty {
  padding: 16px !important;
  text-align: center !important;
  color: #6b7280 !important;
  font-size: 13px !important;
}

#search-results .search-more,
.header-search .search-results .search-more {
  padding: 8px 12px 12px !important;
  text-align: center !important;
  border-top: 1px solid #eee !important;
}

/* Digikala banner ratios */
.home-carousel .swiper-slide img,
.home-carousel .swiper-slide picture {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2880 / 600;
  object-fit: cover;
}

.middle-banner-section .baner img,
.middle-banner-section.baners-section .baner img {
  aspect-ratio: 820 / 328;
  object-fit: cover;
  width: 100%;
  height: auto;
}
/* Mobile header banner */
@media (max-width: 768px) {
  .home-carousel .swiper-slide img,
  .home-carousel .swiper-slide picture {
    aspect-ratio: 960 / 400;
    object-fit: cover;
  }
}

@media (max-width: 768px) {
  .home-carousel .swiper-wrapper,
  .home-carousel .swiper-slide,
  .home-carousel .swiper-slide a,
  .home-carousel .swiper-slide picture,
  .home-carousel .swiper-slide img {
    width: 100% !important;
    max-width: 100% !important;
  }
}