/* ArjangSSR product list — Arjang Gallery look on top of the storefront theme (theme.css).
   Markup stays the "ssr" template's; only colours/layout are overridden here.
   Palette comes from the iransite skin: --primary-main-color #C49E31, --primary-subtle #FFEBC9, page #4a0505. */
.ec-pl.ec-arjang {
    --ec-primary: #C49E31;
    --ec-primary-dark: #8A6738;
    --ec-primary-soft: rgba(196, 158, 49, .18);
    --ec-amazing: #ff6b6b;
    --ec-text: #FFEBC9;
    --ec-text-2: #FFFFFF;
    --ec-muted: rgba(255, 235, 201, .65);
    --ec-border: rgba(255, 235, 201, .28);
    --ec-line: rgba(255, 235, 201, .12);
    --ec-bg: transparent;
    --ec-page: transparent;
    --ec-success: #FFEBC9;
    --ec-radius: 0.85rem;
    --ec-font: inherit;
    color: var(--ec-text);
    padding: 0 1rem;
}

/* breadcrumb/title already come from the skin and the page header module */
.ec-arjang .ec-pl-crumbs, .ec-arjang .ec-pl-title { display: none; }

/* category rail = the old MBD filter chips (glass pills with the category image) */
.ec-arjang .ec-pl-subcats { margin: 0 -1rem 1rem; padding: 0 1rem; }
.ec-arjang .ec-pl-subcats .ec-rail { gap: .6rem; padding: .4rem 0; }
.ec-arjang .ec-subcat { display: inline-flex; flex-direction: row; align-items: center; gap: .5rem; width: auto; min-width: 0; padding: .35rem .9rem .35rem .45rem; border-radius: var(--radius-12, .85rem); border: 1px solid var(--ec-border); background: rgba(217, 217, 217, .12); color: var(--ec-text) !important; font-size: 12px; white-space: nowrap; text-decoration: none; }
.ec-arjang .ec-subcat:hover { border-color: var(--ec-primary); }
.ec-arjang .ec-subcat-img { width: 32px; height: 32px; border-radius: .5rem; overflow: hidden; flex: 0 0 auto; background: rgba(255, 235, 201, .1); display: inline-flex; align-items: center; justify-content: center; }
.ec-arjang .ec-subcat-img img { width: 100%; height: 100%; object-fit: cover; }
.ec-arjang .ec-rail-btn { background: #520000; border-color: var(--ec-border); color: var(--ec-text); }

/* mobile bar (filters + sort) and desktop sort bar */
.ec-arjang .ec-pl-mbar > *, .ec-arjang .ec-pl-ps { background: rgba(217, 217, 217, .12); color: var(--ec-text); border-color: var(--ec-border); border-radius: 3.5rem; }
.ec-arjang .ec-pl-mbar select option, .ec-arjang .ec-pl-ps option { background: #4a0505; color: #FFEBC9; }
.ec-arjang .ec-pl-bar { border-color: var(--ec-line); }
.ec-arjang .ec-sort { color: var(--ec-muted); background: none; }
.ec-arjang .ec-sort.active, .ec-arjang .ec-sort.ec-on, .ec-arjang .ec-sort:hover { color: var(--ec-primary); }
.ec-arjang .ec-view { color: var(--ec-muted); background: none; border-color: var(--ec-border); }

/* filter drawer */
.ec-arjang .ec-pl-side { background: #4a0505; border-color: var(--ec-border); color: var(--ec-text); }
.ec-arjang .ec-pl-side a { color: var(--ec-text); }
.ec-arjang .ec-acc-head { color: var(--ec-text); background: none; border-color: var(--ec-line); }
.ec-arjang .ec-input, .ec-arjang .ec-price-fields input, .ec-arjang .ec-filter-search input { background: rgba(217, 217, 217, .12); color: var(--ec-text); border-color: var(--ec-border); }
.ec-arjang .ec-catnav-on > span, .ec-arjang .ec-catnav-cur > span { color: var(--ec-primary); }

/* cards: two-column masonry like the old MBD list — image, title, price */
.ec-arjang .ec-pl-list { display: block; column-count: 2; column-gap: 1.25rem; }
.ec-arjang .ec-pl-list .ec-card { display: flex; break-inside: avoid; width: auto; margin: 0 0 1.7rem; padding: 0; border: 0; background: none; gap: .45rem; box-shadow: none; }
.ec-arjang .ec-pl-list .ec-card:hover { box-shadow: none; }
.ec-arjang .ec-card-img { aspect-ratio: auto; border-radius: var(--radius-12, .85rem); background: none; }
.ec-arjang .ec-card-img img { height: auto; object-fit: cover; border-radius: var(--radius-12, .85rem); }
.ec-arjang .ec-card-img .ec-img2 { background: #4a0505; height: 100%; }
.ec-arjang .ec-card-title { height: auto; font-size: 13px; line-height: 1.8; color: var(--text-light-4, #fff); -webkit-line-clamp: 1; }
.ec-arjang .ec-card-tag:empty, .ec-arjang .ec-card-meta, .ec-arjang .ec-card-sub, .ec-arjang .ec-card-summary { display: none; }
.ec-arjang .ec-card-tag { position: absolute; top: .5rem; inset-inline-start: .5rem; z-index: 2; min-height: 0; }
.ec-arjang .ec-card-tag > span { background: #520000; color: var(--ec-text); border-radius: 3.5rem; padding: 2px 8px; }
.ec-arjang .ec-card-actions { top: .5rem; inset-inline-end: .5rem; }
.ec-arjang .ec-act { background: rgba(43, 4, 4, .55); border-color: rgba(255, 235, 201, .6); color: var(--ec-text); backdrop-filter: blur(4px); }
.ec-arjang .ec-act:hover, .ec-arjang .ec-act.ec-on, .ec-arjang .ec-act.active { background: var(--ec-primary); border-color: var(--ec-primary); color: #2b0404; }
.ec-arjang .ec-price { margin-top: 0; }
.ec-arjang .ec-amount { color: var(--ec-text); font-size: 13px; }
.ec-arjang .ec-old { color: var(--ec-muted); }
.ec-arjang .ec-off { background: var(--ec-amazing); color: #fff; }
.ec-arjang .ec-unavailable, .ec-arjang .ec-callprice { color: var(--ec-muted); font-size: 12px; }
.ec-arjang .ec-card-off .ec-card-img img { filter: grayscale(.6); opacity: .7; }

/* "show more" = the skin's glass button (not fixed here) */
.ec-arjang .ec-pl-morebox { margin: 1rem 0 2rem; }
.ec-arjang .ec-pl-morebox .eces-loadmore-btn, .ec-arjang .ec-pl-more { width: min(25rem, 100%); height: 48px; border-radius: 3.5rem !important; border: 1px solid rgba(255, 235, 201, .45) !important; background: rgba(217, 217, 217, .2) !important; color: var(--primary-subtle, #FFEBC9) !important; text-shadow: 0 2px 2px rgba(0, 0, 0, 1); box-shadow: 0 0 0 .57rem rgba(71, 71, 71, .4) !important; }
.ec-arjang .ec-pl-morebox .eces-loadmore-btn:hover, .ec-arjang .ec-pl-more:hover { border-color: var(--ec-primary) !important; color: var(--ec-primary) !important; background: rgba(217, 217, 217, .2) !important; }
.ec-arjang .ec-pl-pager-ssr a, .ec-arjang .ec-pl-pager-ssr span { color: var(--ec-text); border-color: var(--ec-border); background: none; }

.ec-arjang .ec-pl-empty { color: var(--ec-muted); }
.ec-arjang .ec-pl-about { color: var(--ec-text); border-color: var(--ec-line); background: none; }

/* the iransite skin keeps a phone-width column at every screen size, so the theme's
   mobile layout (max-width: 991px rules) applies always */
.ec-arjang .ec-pl-layout { grid-template-columns: minmax(0, 1fr); }
.ec-arjang .ec-pl-side { display: none; position: fixed; inset: 0 auto 0 0; width: min(360px, 88vw); overflow: auto; top: 0; border-radius: 0; z-index: 2600; }
.ec-arjang.ec-pl-drawer .ec-pl-side { display: block; }
.ec-arjang.ec-pl-drawer .ec-pl-shade { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 2550; }
.ec-arjang .ec-pl-closefilters { display: inline-flex; }
.ec-arjang .ec-pl-mbar { display: flex; }
.ec-arjang .ec-pl-sorts { display: none; }
.ec-arjang .ec-pl-bar { border: 0; justify-content: space-between; }
/* page size / grid-list switch are pointless with "load more" in a phone-width column */
.ec-arjang .ec-pl-ps, .ec-arjang .ec-view { display: none; }