/*
 * Product-list cards (_ProductsListDesktop: category, search, classify) styled like the
 * /promotion card (.promo-product in promotion.css), plus the parts only these cards have:
 * discount-amount strip, colour dots, spec icons and the compare action.
 */
/* Grid: 4 / 3 / 2 columns with the promotion page's 14px gap (replaces the Bootstrap cols). */
.plp-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 0; }
.plp-card-grid > .plp-card-col { display: flex; width: auto; max-width: none; margin: 0; padding: 0; }
.plp-card-grid > .no-result-container { grid-column: 1 / -1; }
@media (max-width: 991.98px) { .plp-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 575.98px) { .plp-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } }

/* Page wrapper (search, sub-category, classify): promotion layout — fixed 264px sidebar,
   24px gap, toolbar row with a hairline under it. Scoped to shops that have the sidebar filter. */
@media (min-width: 992px) {
    .shop-product .shop:has(> .row > .filter-container) > .row { display: grid; grid-template-columns: 264px minmax(0,1fr); align-items: start; gap: 24px; margin: 0; }
    .shop-product .shop:has(> .row > .filter-container) > .row > * { width: auto; max-width: none; flex: none; margin: 0; padding: 0; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .shop-product .shop:has(> .row > .filter-container) > .row { grid-template-columns: 234px minmax(0,1fr); gap: 16px; }
}
/* Sort bar → promotion toolbar; sort options use the promotion sort-chip look. */
.shop-product .shop:has(> .row > .filter-container) .shop-content .tabs > .tabs-nav { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-start !important; gap: 8px; margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid #eff0f4; font-size: 12px !important; }
.shop-product .shop:has(> .row > .filter-container) .shop-content .tabs > .tabs-nav .title { display: flex; align-items: center; gap: 6px; width: auto !important; margin: 0 0 0 8px; color: #26354a; font-size: 13px; font-weight: 700; }
.shop-product .shop:has(> .row > .filter-container) .shop-content .tabs > .tabs-nav .title :is(.icon,.text) { float: none; margin: 0; }
.shop-product .shop:has(> .row > .filter-container) .shop-content .tabs > .tabs-nav .title .icon { color: #9299a6; font-size: 15px; }
.shop-product .shop:has(> .row > .filter-container) .shop-content .tabs > .tabs-nav .nav-item { margin: 0; padding: 7px 14px; border: 1px solid #e8eaf0; border-radius: 10px; background: #fff; color: #687386; font-size: 11px; line-height: 1.6; cursor: pointer; transition: background .2s,border-color .2s,color .2s; }
.shop-product .shop:has(> .row > .filter-container) .shop-content .tabs > .tabs-nav .nav-item:hover { border-color: #eea2c4; color: #b80155; }
.shop-product .shop:has(> .row > .filter-container) .shop-content .tabs > .tabs-nav .nav-item.sort-active { border: 1px solid #eea2c4 !important; background: #fff0f6; color: #b80155 !important; font-weight: 700; }

.plp-card { container-type: inline-size; position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; padding: 12px; border: 1px solid #e8eaf0; border-radius: 12px; background: #fff; overflow: hidden; color: #282e43; transition: border-color .2s,box-shadow .2s,transform .2s; }
.plp-card:hover { border-color: #edb6cf; box-shadow: 0 8px 24px #182b4609; transform: translateY(-2px); }

/* "۲۰,۰۰۰ تومان تخفیف" strip across the top. */

.plp-card__media { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 161px; }
.plp-card__media > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.plp-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.plp-card .plp-card__colors { top: 0; right: 0; }

.plp-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; height: 48px; margin: 0 !important; overflow: hidden; color: #282e43; font-size: 12px; font-weight: 500; line-height: 16px; }
.plp-card__title a { color: inherit; text-decoration: none; }
.plp-card__title a:hover { color: #d90268; }

.plp-card__category { margin-top: -4px; color: #969fc0; font-size: 11px; line-height: 16px; }

.plp-card__footer { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1px solid #f4f5f9; }
.plp-card__pricing { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.plp-card__old { display: flex; align-items: center; gap: 2px; }
.plp-card__old del { color: #969fc0; font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.plp-card__percent { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding-inline: 4px; border-radius: 64px; background: #ff6976; color: #fff; font-size: 10px; font-weight: 600; line-height: 15px; }
.plp-card__price { display: flex; align-items: center; gap: 2px; }
.plp-card__price strong { color: #282e43; font-size: 14px; font-weight: 700; line-height: 24px; white-space: nowrap; }
.plp-card__price img { display: block; flex-shrink: 0; border-radius: 0; }
.plp-card__soldout { color: #969fc0; font-size: 12px; font-weight: 600; line-height: 24px; white-space: nowrap; }

.plp-card__actions { display: flex; flex-shrink: 0; gap: 6px; }
.plp-card__action { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #f4f5f9; color: #5c6677; font-size: 14px; text-decoration: none; transition: background .2s,color .2s; }
.plp-card__action:hover { background: #fff0f6; color: #d90268; }
.plp-card__action:focus-visible { outline: 2px solid #d90268; outline-offset: 2px; }
.plp-card__action img { display: block; border-radius: 0; }

/* Carousels (owl): equal-height slides with a gutter, room for the hover lift. */
.owl-carousel .owl-stage:has(.plp-card) { display: flex; }
.owl-carousel .owl-item:has(.plp-card) { display: flex; padding: 6px 6px 10px; }
.owl-carousel .owl-item > .plp-card { width: 100%; }
/* owl.carousel.css sets ".owl-item img { width: 100% }", which stretches the icons. */
.owl-carousel .owl-item .plp-card__price img { width: 14px; height: 14px; }
.owl-carousel .owl-item .plp-card__action img { width: 16px; height: 16px; }
/* Best sellers: two cards stacked per slide. */
.owl-carousel .owl-item > .s-test { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 0; }
.owl-carousel .owl-item > .s-test > .plp-card { flex: 1; }

/* Narrow cards (phones, 3-up tablet grid): price on its own line, buttons under it. */
@container (max-width: 230px) {
    .plp-card__footer { align-items: center; gap: 6px; }
    .plp-card__pricing { align-items: flex-end; }
    .plp-card__actions { justify-content: flex-start; }
}

@media (max-width: 575.98px) {
    .plp-card { gap: 6px; padding: 8px; }
    .plp-card__media { height: 130px; }
    .plp-card__action { width: 28px; height: 28px; }
    .plp-card__price strong { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .plp-card, .plp-card__action { transition: none; }
    .plp-card:hover { transform: none; }
}

/* Category landing (MainCategory): per-brand carousels inside the promotion-style wrapper.
   Each section heading becomes a toolbar row (title, pink "نمایش همه", hairline under it). */
.shop-product .shop:has(> .row > .filter-container) .shop-content .popular-products { margin: 0 0 24px !important; background: transparent; }
.shop-product .shop:has(> .row > .filter-container) .shop-content .popular-products :is(.container,.row,.col-12) { max-width: none; margin: 0; padding: 0; }
.shop-product .shop:has(> .row > .filter-container) .shop-content .popular-products #head-title { margin: 0; padding: 0; }
.shop-product .shop:has(> .row > .filter-container) .shop-content .popular-products #head-title .title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 0 0 14px; border-bottom: 1px solid #eff0f4; }
.shop-product .shop:has(> .row > .filter-container) .shop-content .popular-products #head-title .title::after { content: none; }
.shop-product .shop:has(> .row > .filter-container) .shop-content .popular-products #head-title h2 { margin: 0 !important; padding: 0; border: 0; color: #26354a; font-size: 15px !important; font-weight: 700 !important; line-height: 24px; }
.shop-product .shop:has(> .row > .filter-container) .shop-content .popular-products #head-title h2::after { content: none; }
/* layout.css styles this link as a pink button with !important. */
.shop-product .shop:has(> .row > .filter-container) .shop-content .popular-products #head-title .title a { float: none !important; padding: 0 !important; border: 0; border-radius: 0 !important; background: none !important; color: #d90268 !important; font-size: 12px !important; white-space: nowrap; }
.shop-product .shop:has(> .row > .filter-container) .shop-content .popular-products #head-title .title a:hover { color: #b80155 !important; }