/* Storefront theme "digikala" (look only): skin, skin objects and the "digikala" module templates share these
   variables and components. Change --ec-primary to recolour the whole storefront. */
/* @font-face {
    font-family: iranyekan;
    font-weight: 300;
    font-display: swap;
    src: url('../assets/fonts/iranyekanweblight.woff2') format('woff2'), url('../assets/fonts/iranyekanweblight.woff') format('woff');
}

@font-face {
    font-family: iranyekan;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/iranyekanwebregular.woff2') format('woff2'), url('../assets/fonts/iranyekanwebregular.woff') format('woff');
}

@font-face {
    font-family: iranyekan;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/iranyekanwebbold.woff2') format('woff2'), url('../assets/fonts/iranyekanwebbold.woff') format('woff');
} */

:root {
    --ec-primary: #ef4056;
    --ec-primary-dark: #d32f45;
    --ec-primary-soft: #fdecef;
    --ec-amazing: #ef394e;
    --ec-text: #23254e;
    --ec-text-2: #3f4064;
    --ec-muted: #81858b;
    --ec-border: #e0e0e2;
    --ec-line: #f0f0f1;
    --ec-bg: #ffffff;
    --ec-page: #f0f0f1;
    --ec-success: #00a049;
    --ec-warning: #f9a825;
    --ec-star: #f9bc00;
    --ec-radius: 8px;
    --ec-radius-lg: 16px;
    --ec-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    --ec-container: 1336px;
    --ec-font:inherit
}

/* ---------- base ---------- */
body.ec-body {
    font-family:inherit;
    color: var(--ec-text);
    background: var(--ec-bg);
    margin: 0;
}

.ec-sf, .ec-sf * {
    box-sizing: border-box;
}

.ec-sf, .ec-sf input, .ec-sf button, .ec-sf select, .ec-sf textarea {
    font-family: var(--ec-font);
}

.ec-sf a {
    color: black;
    text-decoration: none;
    font-weight: 900;
}

.ec-sf img {
    max-width: 100%;
}

.ec-container {
    width: 100%;
    max-width: var(--ec-container);
    margin: 0 auto;
    padding: 0 16px;
}

.ec-num {
    font-feature-settings: "ss01";
}

.ec-hidden {
    display: none !important;
}

/* ---------- header ---------- */
.ec-header {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 1px 0 var(--ec-line);
    transition: transform .2s;
}

.ec-header-top {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 0;
}

.ec-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.ec-logo img {
    max-height: 30px;
    width: auto;
}

.ec-search {
    flex: 1 1 auto;
    max-width: 600px;
    position: relative;
}

.ec-actions {
    margin-inline-start: auto; display: flex;
    align-items: center;
    gap: 12px;
}

.ec-actions .ec-sep {
    width: 1px;
    height: 24px;
    background: var(--ec-border);
}

.ec-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    background: #fff;
    white-space: nowrap;
}

.ec-btn-outline:hover {
    border-color: var(--ec-text-2);
}

.ec-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 22px;
    color: var(--ec-text);
}

.ec-badge {
    position: absolute;
    bottom: 2px;
    inset-inline-start: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    background: var(--ec-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    border: 2px solid #fff;
}

.ec-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 44px;
    font-size: 13px;
    color: var(--ec-text-2);
    position: relative;
}

.ec-nav > a, .ec-nav .ec-nav-item > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    flex: 0 0 auto;
}

.ec-nav > a:hover, .ec-nav .ec-nav-item > a:hover {
    border-bottom-color: var(--ec-primary);
    color: var(--ec-text);
}

.ec-nav .ec-nav-sep {
    width: 1px;
    height: 18px;
    background: var(--ec-border);
}

.ec-nav-cats {
    font-weight: 700;
    color: var(--ec-text);
}

.ec-ship-to {
    margin-inline-start: auto; font-size: 12px;
    color: var(--ec-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 991.98px) {
    .ec-header-top {
        flex-wrap: wrap;
        gap: 12px;
        padding: 10px 0;
    }

    .ec-search {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
    }

    .ec-nav {
        overflow-x: auto;
        scrollbar-width: none;
        gap: 14px;
    }

    .ec-nav::-webkit-scrollbar {
        display: none;
    }

    .ec-ship-to {
        display: none;
    }
}

/* ---------- search box (skin object "digikala") ---------- */
.ec-searchbox {
    position: relative;
}

.ec-searchbox-field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border-radius: var(--ec-radius);
    background: var(--ec-line);
}

.ec-searchbox-field i {
    color: var(--ec-muted);
    font-size: 18px;
}

.ec-searchbox-field input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--ec-text);
    min-width: 0;
}

.ec-searchbox-field select {
    border: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    font-size: 12px;
    color: var(--ec-muted);
    max-width: 9rem;
    height: auto;
    padding: 0 4px;
    outline: 0;
}

.ec-searchbox.ec-open .ec-searchbox-field {
    background: #fff;
    border-radius: var(--ec-radius) var(--ec-radius) 0 0;
    box-shadow: 0 0 0 1px var(--ec-border);
}

.ec-searchbox-result {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 44px;
    background: #fff;
    border-radius: 0 0 var(--ec-radius) var(--ec-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    max-height: 70vh;
    overflow: auto;
    padding: 8px 0;
    z-index: 1040;
}

.ec-searchbox.ec-open .ec-searchbox-result {
    display: block;
}

.ec-sr-title {
    font-size: 12px;
    color: var(--ec-muted);
    padding: 8px 16px;
}

.ec-sr-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    font-size: 13px;
}

.ec-sr-item:hover {
    background: var(--ec-line);
}

.ec-sr-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.ec-sr-empty {
    padding: 16px;
    text-align: center;
    color: var(--ec-muted);
    font-size: 13px;
}

/* ---------- mini cart (skin object "digikala") ---------- */
.ec-minicart {
    position: relative;
}

.ec-minicart-pop {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: 400px;
    max-width: 92vw;
    background: #fff;
    border-radius: var(--ec-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    z-index: 1050;
}

.ec-minicart:hover .ec-minicart-pop, .ec-minicart.ec-hover .ec-minicart-pop, .ec-minicart.ec-open .ec-minicart-pop {
    display: block;
}

/* the gap between the icon and the panel belongs to the panel: the pointer crossing it keeps the panel open */
.ec-minicart-pop::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: -12px;
    height: 12px;
}

.ec-minicart-head {
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 12px;
    color: var(--ec-muted);
    border-bottom: 1px solid var(--ec-line);
}

.ec-minicart-items {
    max-height: 340px;
    overflow: auto;
}

.ec-minicart-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ec-line);
}

.ec-minicart-item img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex: 0 0 72px;
}

.ec-minicart-item .ec-mc-name {
    font-size: 13px;
    line-height: 1.8;
    color: var(--ec-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ec-minicart-item .ec-mc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
}

.ec-minicart-item .ec-mc-del {
    color: var(--ec-muted);
    cursor: pointer;
}

.ec-minicart-item .ec-mc-del:hover {
    color: var(--ec-primary);
}

.ec-minicart-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
}

.ec-minicart-foot .ec-mc-total small {
    display: block;
    font-size: 11px;
    color: var(--ec-muted);
}

.ec-minicart-foot .ec-mc-total b {
    font-size: 15px;
}

.ec-minicart-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--ec-muted);
    font-size: 13px;
}

/* ---------- buttons ---------- */
.ec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    padding: 0 20px;
    border-radius: var(--ec-radius);
    border: 1px solid var(--ec-primary);
    background: var(--ec-primary);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.ec-btn:hover {
    background: var(--ec-primary-dark);
    border-color: var(--ec-primary-dark);
}

.ec-btn-sm {
    height: 36px;
    padding: 0 14px;
    font-size: 12px;
}

.ec-link {
    color: #19bfd3 !important;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---------- section & rail ---------- */
.ec-section {
    margin: 28px 0;
}

.ec-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.ec-section-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ec-section-title .ec-render-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    background: var(--ec-line);
    border-radius: 999px;
    padding: 2px 8px;
}

.ec-box {
    
    /* background: #fff; */
}

.ec-rail-wrap {
    position: relative;
}

.ec-rail {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.ec-rail::-webkit-scrollbar {
    display: none;
}

.ec-rail > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
}

.ec-rail-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--ec-border);
    background: #fff;
    box-shadow: var(--ec-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ec-text-2);
    cursor: pointer;
    z-index: 2;
}

.ec-rail-btn.ec-prev {
    inset-inline-start: -12px;
}

.ec-rail-btn.ec-next {
    inset-inline-end: -12px;
}

.ec-rail-btn[disabled] {
    display: none;
}

/* ---------- product card ---------- */
.ec-card {
    /* width: 295px; */
    padding: 12px 12px 16px;
    border-inline-start: 1px solid var(--ec-line);display: flex;
    flex-direction: column;
    gap: 8px;
    /* background: #fff; */
    position: relative;
    transition: box-shadow .15s;
        border: 1px solid #8B651E;
    border-radius: 16px;
}

.ec-rail > .ec-card:first-child {
    border-inline-start: 0; }

/* .ec-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
    z-index: 1;
} */

.ec-card-img {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
}

.ec-card-img img {
    display: block;
}

.ec-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ec-card-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-amazing);
    min-height: 18px;
}

.ec-card-title {
    font-size: 14px;
    /* line-height: 2; */
    /* color: var(--ec-text-2); */
    height: 48px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 900;
}

.ec-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--ec-muted);
    min-height: 18px;
}

.ec-rate {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--ec-text-2);
    font-size: 12px;
}

.ec-rate i {
    color: var(--ec-star);
    font-size: 11px;
}

.ec-price {
    margin-top: auto;
        border: 1px solid #8B651E;
    display: flex;
    justify-content: center;
    border-radius: 8px;
    width: 284px;
    height: 48px;
    align-items: center;
}

.ec-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.ec-off {
    background: var(--ec-amazing);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 7px;
    line-height: 20px;
}

.ec-amount {
    font-size: 15px;
    font-weight: 700;
    color: #8B651E;
    white-space: nowrap;
}

.ec-amount small {
    font-size: 10px;
    font-weight: 400;
    margin-inline-start: 2px; }

.ec-old {
    text-align: end;
    font-size: 12px;
    color: #c0c2c5;
    text-decoration: line-through;
    min-height: 18px;
}

.ec-unavailable {
    font-size: 13px;
    color: var(--ec-muted);
    font-weight: 700;
}

.ec-sold {
    margin-top: 4px;
}

.ec-sold-bar {
    height: 4px;
    border-radius: 4px;
    background: var(--ec-line);
    overflow: hidden;
}

.ec-sold-bar span {
    display: block;
    height: 100%;
    background: var(--ec-amazing);
    border-radius: 4px;
}

.ec-sold-text {
    font-size: 11px;
    color: var(--ec-muted);
    margin-top: 4px;
}

/* card: whole card is a link (stretched cover link) with small action buttons above it */
.ec-card-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ec-card-img {
    position: relative;
        width: 292px;
    height: 276px;
}

.ec-card-img .ec-img2 {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .2s;
    background: #fff;
}

.ec-card:hover .ec-card-img .ec-img2 {
    opacity: 1;
}

.ec-card-tag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ec-tag-special {
    color: var(--ec-primary);
}

.ec-tag-timed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ec-tag-soon {
    color: #fff;
    background: var(--ec-warning);
    border-radius: 999px;
    padding: 0 8px;
    line-height: 18px;
    font-size: 10px;
}

.ec-tag-pkg {
    color: var(--ec-text-2);
    background: var(--ec-line);
    border-radius: 999px;
    padding: 0 8px;
    line-height: 18px;
    font-size: 10px;
}

.ec-card-actions {
    position: absolute;
    top: 34px;
    inset-inline-end: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transition: opacity .15s;
}

.ec-card:hover .ec-card-actions, .ec-card:focus-within .ec-card-actions {
    opacity: 1;
}

.ec-act {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    box-shadow: var(--ec-shadow);
    padding: 0;
}

.ec-act:hover {
    color: var(--ec-primary);
    border-color: var(--ec-primary);
}

.ec-act.ec-on, .ec-act.active {
    color: #fff;
    background: var(--ec-primary);
    border-color: var(--ec-primary);
}

.ec-wish.ec-on i {
    font-weight: 900;
}

.ec-busy {
    pointer-events: none;
    opacity: .6;
}

.ec-busy i {
    animation: ec-spin 1s linear infinite;
}

@keyframes ec-spin {
    to {
        transform: rotate(360deg);
    }
}

.ec-card-meta {
    gap: 6px;
}

.ec-brand {
    color: var(--ec-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.ec-rate small {
    color: var(--ec-muted);
    font-size: 10px;
}

.ec-card-sub {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
    color: var(--ec-muted);
    min-height: 16px;
}

.ec-seller {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 65%;
}

.ec-models {
    white-space: nowrap;
}

.ec-off-fix {
    font-size: 11px;
}

.ec-free {
    font-size: 15px;
    font-weight: 700;
    color: var(--ec-success);
}

.ec-callprice {
    font-size: 14px;
    font-weight: 700;
    color: #8B651E;
}

.ec-card-off .ec-card-img img {
    filter: grayscale(1);
    opacity: .6;
}

.ec-act.ec-done {
    color: var(--ec-success);
    border-color: var(--ec-success);
}

.ec-act.ec-addcart {
    color: var(--ec-primary);
}

@media (hover: none) {
    .ec-card-actions {
        opacity: 1;
    }

    .ec-act {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

.ec-section-title img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 8px;
}

/* grid of cards (SSR lists) */
.ec-grid {
    display: flex;
    /* grid-template-columns: repeat(auto-fill, minmax(316px, 1fr)); */
   gap: 10px;
}

.ec-grid > .ec-card {
    width: auto;
    /* border-bottom: 1px solid var(--ec-line); */
}

/* ---------- amazing offers band ---------- */
.ec-amazing {
    background: var(--ec-amazing);
    border-radius: var(--ec-radius-lg);
    padding: 20px 4px 20px 0;
}

.ec-amazing .ec-rail {
    gap: 2px;
    padding-inline-end: 8px; }

.ec-amazing .ec-card {
    border: 0;
    border-radius: 6px;
}

.ec-amazing .ec-rail > .ec-card:first-of-type {
    border-start-start-radius: var(--ec-radius);
    border-end-start-radius: var(--ec-radius);
}

.ec-amazing-intro {
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    text-align: center;
    padding: 0 8px;
}

.ec-amazing-intro .ec-amazing-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
}

.ec-amazing-intro .ec-amazing-pct {
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    opacity: .95;
}

.ec-amazing-intro .ec-link {
    color: #fff !important;
}

.ec-amazing-more {
    width: 160px;
    background: #fff;
    border-radius: 0 var(--ec-radius) var(--ec-radius) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--ec-text-2);
    font-size: 13px;
}

.ec-amazing-more i {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #19bfd3;
    color: #19bfd3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* ---------- countdown ---------- */
.ec-timer {
    display: inline-flex;
    direction: ltr;
    gap: 4px;
    align-items: center;
    font-weight: 700;
}

.ec-timer span {
    min-width: 30px;
    height: 30px;
    border-radius: 6px;
    background: #fff;
    color: var(--ec-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.ec-timer b {
    color: #fff;
}

.ec-card .ec-timer span {
    background: transparent;
    min-width: 0;
    height: auto;
    font-size: 13px;
    color: var(--ec-amazing);
}

.ec-card .ec-timer b {
    color: var(--ec-amazing);
}

/* ---------- module container ---------- */
.ec-module {
    margin: 24px 0;
}

.ec-module-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- footer ---------- */
.ec-footer {
    border-top: 1px solid var(--ec-line);
    margin-top: 48px;
    padding: 32px 0 16px;
    font-size: 13px;
    color: var(--ec-muted);
    background: #fff;
}

.ec-footer-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
}

.ec-footer h6 {
    color: var(--ec-text-2);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
}

.ec-footer a {
    display: block;
    padding: 4px 0;
}

.ec-footer a:hover {
    color: var(--ec-text);
}

.ec-footer-bottom {
    border-top: 1px solid var(--ec-line);
    margin-top: 24px;
    padding-top: 16px;
    text-align: center;
    font-size: 12px;
}

.ec-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 16px;
    padding: 16px 0 24px;
    border-bottom: 1px solid var(--ec-line);
    margin-bottom: 24px;
}

.ec-features div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.ec-features i {
    font-size: 32px;
    color: var(--ec-primary);
}

@media (max-width: 575.98px) {
    .ec-card {
        width: 156px;
    }
 .ec-grid {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2rem;
        border-bottom: 1px solid #DBC9B1;
    }

    .ec-grid::-webkit-scrollbar {
        -webkit-appearance: none;
        height: 2px !important;
    }

    .ec-grid::-webkit-scrollbar-track {
        height: 2px !important;
        background: #DBC9B1;
    }

    .ec-grid::-webkit-scrollbar-thumb {
        background: #806A53;
        border-radius: 10px;
    }
    .ec-grid > .ec-card {
        width: auto;
        padding: 10px;
    }

    .ec-box {
        padding: 8px;
    }

    .ec-amazing-intro {
        width: 120px;
    }

    .ec-amazing-intro .ec-amazing-title {
        font-size: 16px;
    }

    .ec-amazing-more {
        width: 120px;
    }

    .ec-rail-btn {
        display: none;
    }
}

/* ---------- toast ---------- */
.ec-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 20px);
    background: var(--ec-text);
    color: #fff;
    font-family: var(--ec-font);
    font-size: 13px;
    padding: 12px 20px;
    border-radius: var(--ec-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    z-index: 3000;
    opacity: 0;
    transition: opacity .25s, transform .25s;
    max-width: 92vw;
}

.ec-toast.ec-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ec-toast-ok {
    background: #0b7a3e;
}

.ec-toast-error {
    background: var(--ec-primary-dark);
}

/* ---------- modal (quick view) ---------- */
body.ec-modal-open {
    overflow: hidden;
}

.ec-modal {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity .2s;
}

.ec-modal.ec-show {
    opacity: 1;
}

.ec-modal-box {
    position: relative;
    background: #fff;
    border-radius: var(--ec-radius-lg);
    width: min(920px, 100%);
    max-height: 92vh;
    overflow: auto;
    padding: 24px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .25);
}

.ec-modal-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: var(--ec-line);
    color: var(--ec-text);
    cursor: pointer;
    font-size: 16px;
    z-index: 1;
}

.ec-qv {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 24px;
}

.ec-qv-main {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-qv-main img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ec-qv-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
}

.ec-qv-thumbs button {
    flex: 0 0 56px;
    height: 56px;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    background: #fff;
    padding: 4px;
    cursor: pointer;
}

.ec-qv-thumbs button.ec-active {
    border-color: var(--ec-primary);
}

.ec-qv-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ec-qv-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.8;
    margin: 0 0 8px;
    padding-inline-end: 40px; }

.ec-qv-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: var(--ec-muted);
    margin-bottom: 12px;
}

.ec-qv-meta b {
    color: #19bfd3;
    font-weight: 700;
}

.ec-qv-summary {
    font-size: 13px;
    line-height: 2;
    color: var(--ec-text-2);
    margin-bottom: 12px;
}

.ec-qv-summary p {
    margin: 0 0 6px;
}

.ec-qv-label {
    font-size: 13px;
    font-weight: 700;
    margin: 8px 0;
}

.ec-qv-models {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.ec-qv-model {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.ec-qv-model input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ec-qv-model span {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    font-size: 12px;
}

.ec-qv-model input:checked + span {
    border-color: #19bfd3;
    box-shadow: 0 0 0 1px #19bfd3;
    color: var(--ec-text);
    font-weight: 700;
}

.ec-qv-model input:focus-visible + span {
    outline: 2px solid #19bfd3;
    outline-offset: 2px;
}

.ec-qv-model.ec-disabled span {
    opacity: .45;
    text-decoration: line-through;
    cursor: not-allowed;
}

.ec-qv-price {
    margin: 8px 0 16px;
    max-width: 280px;
}

.ec-qv-price .ec-amount {
    font-size: 20px;
}

.ec-qv-price .ec-old {
    text-align: start;
}

.ec-qv-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ec-qv-note {
    font-size: 13px;
    color: var(--ec-primary-dark);
}

.ec-btn-ghost {
    background: #fff;
    color: var(--ec-text) !important;
    border-color: var(--ec-border);
}

.ec-btn-ghost:hover {
    background: var(--ec-line);
    border-color: var(--ec-border);
}

.ec-qty {
    display: inline-flex;
    align-items: center;
    height: 44px;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 0 6px;
    background: #fff;
}

.ec-qty button {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--ec-primary);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
}

.ec-qty input {
    width: 44px;
    border: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--ec-primary);
    -moz-appearance: textfield;
    appearance: textfield;
    background: transparent;
    outline: 0;
}

.ec-qty input::-webkit-outer-spin-button, .ec-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (max-width: 767.98px) {
    .ec-modal {
        align-items: flex-end;
        padding: 0;
    }

    .ec-modal-box {
        border-radius: var(--ec-radius-lg) var(--ec-radius-lg) 0 0;
        padding: 20px 16px;
        max-height: 90vh;
    }

    .ec-qv {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ec-qv-main {
        max-height: 240px;
    }
}

/* ---------- mini cart extras ---------- */
.ec-mc-ship {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ec-line);
    font-size: 12px;
    color: var(--ec-text-2);
}

.ec-mc-ship .ec-mc-bar {
    height: 6px;
    border-radius: 6px;
    background: var(--ec-line);
    overflow: hidden;
    margin-top: 8px;
}

.ec-mc-ship .ec-mc-bar span {
    display: block;
    height: 100%;
    background: #19bfd3;
    border-radius: 6px;
    transition: width .3s;
}

.ec-mc-ship.ec-reached {
    color: var(--ec-success);
    font-weight: 700;
}

.ec-mc-ship.ec-reached .ec-mc-bar span {
    background: var(--ec-success);
}

.ec-mc-attrs {
    font-size: 11px;
    color: var(--ec-muted);
    margin-top: 2px;
}

.ec-mc-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.ec-mc-label {
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 0 8px;
    line-height: 18px;
    background: #e7f8f0;
    color: var(--ec-success);
}

.ec-mc-old {
    font-size: 11px;
    color: #c0c2c5;
    text-decoration: line-through;
    font-weight: 400;
}

.ec-mc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.ec-mc-qty {
    height: 32px;
}

.ec-mc-qty button {
    width: 26px;
    height: 26px;
}

.ec-mc-qty input {
    width: 34px;
    font-size: 13px;
}

.ec-mc-qty button[disabled] {
    color: #c0c2c5;
    cursor: not-allowed;
}

.ec-mc-offers {
    padding: 8px 16px;
    border-top: 1px solid var(--ec-line);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ec-mc-offer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--ec-text-2);
    line-height: 1.8;
}

.ec-mc-offer i {
    color: var(--ec-primary);
    margin-top: 4px;
}

.ec-mc-offer b {
    margin-inline-start: auto; white-space: nowrap;
    color: var(--ec-text);
}

.ec-mc-offer.ec-save b {
    color: var(--ec-primary);
}

.ec-mc-offer small {
    display: block;
    color: var(--ec-muted);
}

.ec-mc-msg {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--ec-primary-dark);
}

.ec-minicart.ec-loading .ec-minicart-items {
    opacity: .6;
}

/* ---------- search extras ---------- */
.ec-sr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 16px 12px;
}

.ec-sr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--ec-text-2);
    background: #fff;
    cursor: pointer;
    font-family: var(--ec-font);
}

.ec-sr-chip:hover {
    border-color: var(--ec-text-2);
}

.ec-sr-item .ec-sr-name {
    flex: 1;
    min-width: 0;
}

.ec-sr-item .ec-sr-sub {
    display: block;
    font-size: 11px;
    color: var(--ec-muted);
}

.ec-sr-item .ec-sr-price {
    text-align: end;
    white-space: nowrap;
    font-weight: 700;
    font-size: 13px;
}

.ec-sr-item .ec-sr-price .ec-off {
    font-size: 10px;
    padding: 0 6px;
    line-height: 16px;
    margin-inline-end: 4px; }

.ec-sr-item .ec-sr-price small {
    font-weight: 400;
    font-size: 10px;
}

.ec-sr-item .ec-sr-price del {
    display: block;
    color: #c0c2c5;
    font-weight: 400;
    font-size: 11px;
}

.ec-sr-item .ec-sr-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
}

/* ---------- compare (skin object "digikala") ---------- */
.ec-compare-fab {
    position: fixed;
    bottom: 20px;
    inset-inline-end: 20px;
    z-index: 1500;
    display: none;
}

.ec-compare-fab.ec-has {
    display: block;
}

.ec-compare-fab > button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    border: 0;
    background: var(--ec-text);
    color: #fff;
    font-family: var(--ec-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.ec-compare-fab > button .ec-badge {
    position: static;
    border: 0;
    background: var(--ec-primary);
}

.ec-compare-panel {
    display: none;
    position: absolute;
    bottom: 60px;
    inset-inline-end: 0;
    width: 340px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: var(--ec-radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
    padding: 12px 0;
}

.ec-compare-fab.ec-open .ec-compare-panel {
    display: block;
}

.ec-compare-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px 10px;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 1px solid var(--ec-line);
}

.ec-compare-head button {
    border: 0;
    background: none;
    color: var(--ec-muted);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--ec-font);
}

.ec-compare-items {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 300px;
    overflow: auto;
}

.ec-compare-items li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ec-line);
    font-size: 12px;
}

.ec-compare-items img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.ec-compare-items a {
    flex: 1;
    min-width: 0;
    color: var(--ec-text-2);
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ec-compare-items .ec-compare-del {
    border: 0;
    background: none;
    color: var(--ec-muted);
    cursor: pointer;
    font-size: 14px;
}

.ec-compare-items .ec-compare-del:hover {
    color: var(--ec-primary);
}

.ec-compare-foot {
    padding: 12px 16px 4px;
}

.ec-compare-foot .ec-btn {
    width: 100%;
}

.ec-compare-hint {
    font-size: 11px;
    color: var(--ec-muted);
    text-align: center;
    margin-top: 8px;
}

@media (max-width: 575.98px) {
    .ec-compare-fab {
        bottom: 12px;
        inset-inline-end: 12px;
    }
}

/* ---------- mega menu extras ---------- */
.ec-mega-roots li a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ec-mega-roots li img, .ec-mega-head img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 4px;
}

.ec-mega-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ec-mega-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 260px;
    color: var(--ec-muted);
    font-size: 13px;
    text-align: center;
}

.ec-mega-empty img {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.ec-mega-empty i {
    font-size: 40px;
    color: var(--ec-border);
}

.ec-amazing-pct img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.ec-compare-go.disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ---------- product list page (ProductList templates "digikala" / "digikalassr") ---------- */
.ec-hide {
    display: none !important;
}

.ec-pl {
    font-family: var(--ec-font);
    color: var(--ec-text);
}

.ec-pl-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--ec-muted);
    margin: 8px 0 12px;
    padding: 0;
    list-style: none;
}

.ec-pl-crumb a {
    color: var(--ec-muted);
}

.ec-pl-crumb li + li::before {
    content: "/";
    margin-inline-end: 4px; color: #c0c2c5;
}

.ec-pl-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px;
}

.ec-pl-subcats {
    margin-bottom: 16px;
}

.ec-pl-subcats .ec-rail {
    gap: 12px;
    padding: 4px 0;
}

.ec-subcat {
    width: 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-size: 12px;
    color: var(--ec-text-2) !important;
}

.ec-subcat .ec-subcat-img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--ec-page);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ec-subcat img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.ec-subcat i {
    font-size: 28px;
    color: var(--ec-muted);
}

.ec-pl-layout {
    display: grid;
    grid-template-columns: 284px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.ec-pl-side {
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 16px;
    background: #fff;
    scrollbar-width: thin;
}

.ec-pl-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.ec-pl-side-head .ec-link {
    font-size: 12px;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.ec-pl-closefilters {
    display: none;
    border: 0;
    background: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--ec-text);
}

.ec-pl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.ec-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    background: #fff;
    padding: 2px 10px;
    font-size: 11px;
    color: var(--ec-text-2);
    cursor: pointer;
    font-family: inherit;
    max-width: 100%;
}

.ec-chip span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-chip:hover {
    border-color: var(--ec-primary);
    color: var(--ec-primary);
}

.ec-acc {
    border-top: 1px solid var(--ec-line);
}

.ec-acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 0;
    background: none;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--ec-text);
    cursor: pointer;
    font-family: inherit;
    text-align: start;
}

.ec-acc-head i {
    transition: transform .15s;
    color: var(--ec-muted);
    font-size: 12px;
}

.ec-acc.ec-open .ec-acc-head i {
    transform: rotate(180deg);
}

.ec-acc-body {
    display: none;
    padding-bottom: 14px;
}

.ec-acc.ec-open .ec-acc-body {
    display: block;
}

.ec-acc-body .list-items, .ec-brands {
    max-height: 260px;
    overflow: auto;
    scrollbar-width: thin;
}

.ec-filter-search {
    position: relative;
    margin-bottom: 8px;
}

.ec-filter-search input, .ec-input {
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: var(--ec-radius);
    background: var(--ec-page);
    padding: 0 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ec-text);
    outline: none;
    box-sizing: border-box;
}

.ec-input:focus, .ec-filter-search input:focus {
    box-shadow: 0 0 0 1px var(--ec-primary) inset;
    background: #fff;
}

.ec-qbox {
    display: flex;
    gap: 6px;
}

.ec-qbox button {
    flex: 0 0 40px;
    height: 40px;
    border: 0;
    border-radius: var(--ec-radius);
    background: var(--ec-page);
    color: var(--ec-text-2);
    cursor: pointer;
}

.ec-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
    color: var(--ec-text-2);
}

.ec-check input, .ec-acc-body .form-check-input {
    accent-color: var(--ec-primary);
    width: 16px;
    height: 16px;
    margin: 0;
}

.ec-acc-body .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    margin: 0;
    font-size: 13px;
}

.ec-acc-body select, .ec-acc-body input[type=text], .ec-acc-body input[type=number] {
    width: 100%;
    height: 38px;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 0 10px;
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
}

.ec-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0;
    border-top: 1px solid var(--ec-line);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin: 0;
}

.ec-switch {
    position: relative;
    width: 36px;
    height: 20px;
    flex: 0 0 auto;
}

.ec-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ec-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #c0c2c5;
    transition: background .15s;
}

.ec-switch span::after {
    content: "";
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}

.ec-switch input:checked + span {
    background: #19bfd3;
}

.ec-switch input:checked + span::after {
    transform: translateX(16px);
}

[dir=rtl] .ec-switch input:checked + span::after, .rtl .ec-switch input:checked + span::after {
    transform: translateX(-16px);
}

.ec-switch input:focus-visible + span {
    box-shadow: 0 0 0 2px var(--ec-primary-soft);
}

.ec-price-fields {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px 6px;
    font-size: 12px;
    color: var(--ec-muted);
    margin-bottom: 12px;
}

.ec-price-fields input {
    height: 36px;
    border: 0;
    border-bottom: 1px solid var(--ec-border);
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--ec-text);
    background: none;
    outline: none;
    min-width: 0;
}

.ec-pl-price .irs--round .irs-bar {
    background: var(--ec-primary);
}

.ec-pl-price .irs--round .irs-handle {
    border-color: var(--ec-primary);
}

.ec-pl-price .ec-btn {
    width: 100%;
    margin-top: 12px;
}

.ec-pl-tree .fancytree-container {
    border: 0 !important;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
}

.ec-pl-tree span.fancytree-node {
    padding: 4px 0;
}

.ec-pl-tree span.fancytree-title {
    color: var(--ec-text-2);
    border: 0;
    background: none !important;
}

.ec-pl-tree span.fancytree-active .fancytree-title, .ec-pl-tree span.fancytree-selected .fancytree-title {
    color: var(--ec-primary);
    font-weight: 700;
}

.ec-pl-main {
    min-width: 0;
}

.ec-pl-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--ec-line);
    padding: 0 0 8px;
    margin-bottom: 4px;
}

.ec-pl-sorts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 16px;
    flex: 1;
    font-size: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.ec-pl-sorts > b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.ec-pl-sorts ul {
    display: contents;
}

.ec-pl-sorts li {
    list-style: none;
    display: contents;
}

.ec-sort {
    border: 0;
    background: none;
    padding: 6px 0;
    font-family: inherit;
    font-size: 12px;
    color: var(--ec-muted);
    cursor: pointer;
}

.ec-sort:hover {
    color: var(--ec-text);
}

.ec-sort.ec-active {
    color: var(--ec-primary);
    font-weight: 700;
}

.ec-pl-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ec-muted);
    white-space: nowrap;
}

.ec-pl-tools select {
    height: 30px;
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    padding: 0 6px;
    background: #fff;
}

.ec-view {
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--ec-muted);
    cursor: pointer;
}

.ec-view.ec-active {
    color: var(--ec-primary);
    border-color: var(--ec-border);
}

.ec-pl-mbar {
    display: none;
    gap: 8px;
    margin-bottom: 12px;
}

.ec-pl-mbar > * {
    flex: 1;
    height: 40px;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: var(--ec-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ec-pl-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    transition: opacity .15s;
}

.ec-pl-list > .ec-card {
    width: auto;
    border-inline-start: 0; border-inline-end: 1px solid var(--ec-line); border-bottom: 1px solid var(--ec-line);
    padding: 16px 16px 20px;
}

.ec-pl-busy .ec-pl-list {
    opacity: .45;
    pointer-events: none;
}

.ec-card-summary {
    display: none;
}

.ec-pl-list.ec-pl-rows {
    grid-template-columns: minmax(0, 1fr);
}

.ec-pl-rows > .ec-card {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 200px;
    grid-template-areas: "img title price" "img meta price" "img sub price" "img sum price" "img tag sold";
    column-gap: 20px;
    align-items: start;
    border-inline-end: 0; }

.ec-pl-rows .ec-card-img {
    grid-area: img;
}

.ec-pl-rows .ec-card-title {
    grid-area: title;
    height: auto;
    font-size: 14px;
    font-weight: 700;
}

.ec-pl-rows .ec-card-meta {
    grid-area: meta;
    justify-content: flex-start;
    gap: 16px;
}

.ec-pl-rows .ec-card-sub {
    grid-area: sub;
    justify-content: flex-start;
    gap: 16px;
}

.ec-pl-rows .ec-card-summary {
    grid-area: sum;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    line-height: 2;
    color: var(--ec-muted);
}

.ec-pl-rows .ec-card-summary * {
    font-size: inherit !important;
    margin: 0;
}

.ec-pl-rows .ec-card-tag {
    grid-area: tag;
}

.ec-pl-rows .ec-price {
    grid-area: price;
    margin-top: 0;
}

.ec-pl-rows .ec-sold {
    grid-area: sold;
}

.ec-from {
    font-size: 11px;
    color: var(--ec-muted);
    margin-inline-end: 4px; font-weight: 400;
}

.ec-pl-empty {
    text-align: center;
    padding: 64px 16px;
    color: var(--ec-muted);
}

.ec-pl-empty i {
    font-size: 48px;
    color: var(--ec-border);
    display: block;
    margin-bottom: 16px;
}

.ec-pl-empty b {
    display: block;
    color: var(--ec-text);
    font-size: 15px;
    margin-bottom: 6px;
}

.ec-pl-pager, .ec-pl .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 24px 0 8px;
    padding: 0;
    list-style: none;
}

.ec-page, .ec-pl .pagination .page-link, .ec-pl .pagination a {
    min-width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: none;
    color: var(--ec-text-2);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    text-decoration: none;
}

.ec-page:hover, .ec-pl .pagination a:hover {
    background: var(--ec-page);
}

.ec-page.ec-active, .ec-pl .pagination .active a, .ec-pl .pagination .active .page-link {
    background: var(--ec-primary);
    color: #fff;
}

.ec-page[disabled] {
    opacity: .3;
    cursor: default;
    background: none;
}

.ec-page-gap {
    color: var(--ec-muted);
}

.ec-pl-morebox {
    text-align: center;
    margin: 20px 0;
}

.ec-btn-ghost {
    background: #fff;
    color: var(--ec-primary) !important;
}

.ec-btn-ghost:hover {
    background: var(--ec-primary-soft);
}

.ec-pl-about {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ec-pl-attrs {
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 24px;
    font-size: 13px;
}

.ec-pl-attrs div {
    display: flex;
    gap: 6px;
}

.ec-pl-attrs b {
    color: var(--ec-muted);
    font-weight: 400;
}

.ec-pl-desc {
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 16px;
    font-size: 13px;
    line-height: 2.1;
    color: var(--ec-text-2);
}

.ec-pl-desc h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ec-text);
}

.ec-pl-desc-body {
    max-height: 140px;
    overflow: hidden;
    position: relative;
}

.ec-pl-desc.ec-expanded .ec-pl-desc-body {
    max-height: none;
}

.ec-pl-desc.ec-collapsible:not(.ec-expanded) .ec-pl-desc-body::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 48px;
    background: linear-gradient(transparent, #fff);
}

.ec-pl-desc-toggle {
    display: none;
    border: 0;
    background: none;
    padding: 0;
    margin-top: 8px;
    cursor: pointer;
    font-family: inherit;
}

.ec-pl-desc.ec-collapsible .ec-pl-desc-toggle {
    display: inline-flex;
}

.ec-pl-desc .ec-less, .ec-pl-desc.ec-expanded .ec-more {
    display: none;
}

.ec-pl-desc.ec-expanded .ec-less {
    display: inline;
}

.ec-pl-desc video {
    width: 100%;
    border-radius: var(--ec-radius);
    margin-top: 12px;
}

.ec-pl-vacation {
    border-radius: var(--ec-radius);
    background: #fff4e5;
    color: #8a5a00;
    padding: 12px 16px;
    font-size: 13px;
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.ec-pl-shade {
    display: none;
}

@media (max-width: 1199px) {
    .ec-pl-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .ec-pl-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ec-pl-side {
        display: none;
        position: fixed;
        inset: 0 0 0 auto;
        width: min(360px, 88vw);
        overflow: auto;
        top: 0;
        border-radius: 0;
        z-index: 2600;
    }

    .ec-pl-drawer .ec-pl-side {
        display: block;
    }

    .ec-pl-drawer .ec-pl-shade {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 2550;
    }

    [dir=rtl] .ec-pl-side, .rtl .ec-pl-side {
        inset: 0 auto 0 0;
    }

    .ec-pl-closefilters {
        display: inline-flex;
    }

    .ec-pl-mbar {
        display: flex;
    }

    .ec-pl-sorts {
        display: none;
    }

    .ec-pl-bar {
        border: 0;
        justify-content: space-between;
    }

    .ec-pl-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ec-pl-rows > .ec-card {
        grid-template-columns: 110px minmax(0, 1fr);
        grid-template-areas: "img title" "img meta" "img sub" "img price" "img tag" "img sold";
    }

    .ec-pl-rows .ec-card-summary {
        display: none;
    }
}

@media (max-width: 480px) {
    .ec-pl-list > .ec-card {
        padding: 12px;
    }

    .ec-view {
        display: none;
    }
}

/* load more / infinite scroll: the numbered pager stays in the HTML (crawlers follow it) but is not shown */
.ec-pl[data-pager=loadmore] .ec-pl-pager-ssr, .ec-pl[data-pager=infinite] .ec-pl-pager-ssr {
    display: none;
}

/* active filter group: blue dot next to its title */
.ec-acc-head .ec-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #19bfd3;
    margin-inline-start: 6px; margin-inline-end: auto; flex: 0 0 auto;
}

/* "load more" (SSR: LoadMore.js button with bootstrap classes; CSR: .ec-pl-more) — theme colours in every state,
   a spinner while the next page loads */
.ec-pl-morebox .eces-loadmore-btn, .ec-pl-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 220px;
    height: 44px;
    padding: 0 24px;
    border-radius: var(--ec-radius) !important;
    border: 1px solid var(--ec-border) !important;
    background: #fff !important;
    color: var(--ec-text-2) !important;
    font-family: var(--ec-font);
    font-size: 13px;
    font-weight: 700;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.ec-pl-morebox .eces-loadmore-btn:hover, .ec-pl-morebox .eces-loadmore-btn:focus, .ec-pl-morebox .eces-loadmore-btn:active, .ec-pl-more:hover, .ec-pl-more:focus {
    border-color: var(--ec-primary) !important;
    color: var(--ec-primary) !important;
    background: #fff !important;
    outline: none;
}

.ec-pl-morebox .eces-loadmore-btn:focus-visible, .ec-pl-more:focus-visible {
    box-shadow: 0 0 0 3px var(--ec-primary-soft) !important;
}

.ec-pl-morebox .eces-loadmore-btn::after, .ec-pl-more::after {
    content: "\f078";
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", FontAwesome;
    font-weight: 400;
    font-size: 11px;
}

.ec-pl-morebox .eces-loadmore-btn.eces-loading, .ec-pl-more.ec-busy {
    color: var(--ec-muted) !important;
    pointer-events: none;
    opacity: 1;
}

.ec-pl-morebox .eces-loadmore-btn.eces-loading::after, .ec-pl-more.ec-busy::after {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--ec-primary-soft);
    border-top-color: var(--ec-primary);
    animation: ec-spin .7s linear infinite;
}

/* category navigation of the list (Digikala style: path, current, children, indented by level) */
.ec-catnav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.ec-catnav-list li {
    padding: 6px 0;
    padding-inline-start: calc(var(--ec-lvl, 0) * 12px); line-height: 1.8;
}

.ec-catnav-list a {
    color: var(--ec-text-2) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ec-catnav-list a:hover {
    color: var(--ec-primary) !important;
}

.ec-catnav-up a, .ec-catnav-anc a {
    color: var(--ec-muted) !important;
    font-size: 12px;
}

.ec-catnav-list i {
    font-size: 10px;
}

.ec-catnav-cur span, .ec-catnav-on span {
    font-weight: 700;
    color: var(--ec-text);
}

.ec-catnav-cur {
    position: relative;
}

.ec-catnav-child {
    padding-inline-start: calc(var(--ec-lvl, 0) * 12px + 12px) !important; }

.ec-catnav-on {
    color: var(--ec-primary);
}

.ec-catnav-on span {
    color: var(--ec-primary);
}

/* list page: breadcrumb (Digikala: small, muted, "/" between) and the category / brand content below the list */
.ec-pl-crumbs {
    margin: 8px 0 12px;
}

.ec-pl-crumbs .ec-pl-crumb {
    margin: 0;
}

.ec-pl-crumb [aria-current] span {
    color: var(--ec-text-2);
}

.ec-pl-attrs {
    margin: 0;
}

.ec-pl-attrs dt {
    color: var(--ec-muted);
    font-weight: 400;
    margin: 0;
}

.ec-pl-attrs dt::after {
    content: ":";
}

.ec-pl-attrs dd {
    margin: 0;
    color: var(--ec-text);
    font-weight: 700;
}

.ec-pl-desc-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ec-text);
}

.ec-pl-desc-body h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 12px 0 6px;
    color: var(--ec-text);
}

.ec-pl-desc-body h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 10px 0 4px;
    color: var(--ec-text);
}

.ec-pl-desc-body p {
    margin: 0 0 8px;
}

.ec-pl-desc-toggle i {
    font-size: 10px;
    margin-inline-start: 4px; transition: transform .15s;
}

.ec-pl-desc.ec-expanded .ec-pl-desc-toggle i {
    transform: rotate(180deg);
}

.ec-pl-attrs div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ec-pl-attrs dt {
    white-space: nowrap;
}

/* search box: category picker (select2) blended into the field — a separator, muted text, a small chevron —
   and its list in the theme look */
.ec-searchbox-field .select2-container {
    flex: 0 0 auto;
    max-width: 11rem;
}

.ec-searchbox-field .select2-container .select2-selection--single {
    height: 28px;
    border: 0 !important;
    border-inline-start: 1px solid var(--ec-border) !important; border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    padding-inline-start: 10px; cursor: pointer;
}

.ec-searchbox-field .select2-container .select2-selection__rendered {
    color: var(--ec-text-2) !important;
    font-size: 12px;
    line-height: 28px !important;
    padding: 0 !important;
    padding-inline-end: 16px !important; white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-searchbox-field .select2-container .select2-selection__arrow {
    height: 28px !important;
    width: 14px !important;
    top: 0 !important;
}

.ec-searchbox-field .select2-container .select2-selection__arrow b {
    border-color: var(--ec-muted) transparent transparent transparent !important;
    border-width: 4px 4px 0 4px !important;
}

.ec-searchbox-field .select2-container--open .select2-selection__rendered {
    color: var(--ec-primary) !important;
}

.select2-dropdown.ec-sc-dropdown {
    border: 0 !important;
    border-radius: var(--ec-radius) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    overflow: hidden;
    font-family: var(--ec-font);
    min-width: 220px;
    margin-top: 6px;
}

.ec-sc-dropdown .select2-search--dropdown {
    padding: 8px;
}

.ec-sc-dropdown .select2-search__field {
    border: 0 !important;
    border-radius: var(--ec-radius);
    background: var(--ec-line);
    height: 36px;
    padding: 0 10px;
    font-family: inherit;
    outline: none;
}

.ec-sc-dropdown .select2-results__options {
    max-height: 320px !important;
}

.ec-sc-dropdown .select2-results__option {
    font-size: 13px;
    padding: 8px 14px;
    color: var(--ec-text-2);
}

.ec-sc-dropdown .select2-results__option--highlighted[aria-selected], .ec-sc-dropdown .select2-results__option--highlighted {
    background: var(--ec-page) !important;
    color: var(--ec-text) !important;
}

.ec-sc-dropdown .select2-results__option[aria-selected=true], .ec-sc-dropdown .select2-results__option--selected {
    background: var(--ec-primary-soft) !important;
    color: var(--ec-primary) !important;
    font-weight: 700;
}

@media (max-width: 576px) {
    .ec-searchbox-field .select2-container {
        max-width: 7.5rem;
    }
}

.ec-sc-dropdown .select2-results__option .fw-bold {
    font-weight: 700;
    color: var(--ec-text);
}

/* field filters (formbuilder inputs): native check / radio boxes in the theme colour (the bootstrap look is not on
   storefront pages, it left them invisible) */
.ec-pl .ec-acc-body .form-check-input {
    -webkit-appearance: auto;
    appearance: auto;
    accent-color: var(--ec-primary);
    width: 16px;
    height: 16px;
    position: static;
    margin: 0;
    float: none;
    background: none;
    border: 0;
    flex: 0 0 auto;
}

.ec-pl .ec-acc-body .form-check {
    padding: 5px 0;
    min-height: 0;
}

.ec-pl .ec-acc-body .form-check-label {
    cursor: pointer;
    color: var(--ec-text-2);
}

.ec-pl .ec-acc-body .optionlist-items {
    margin: 0 !important;
}

.ec-pl .technical-range .form-control {
    height: 34px;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    text-align: center;
    font-family: inherit;
}

.ec-pl .technical-range .btn {
    height: 34px;
    border-radius: var(--ec-radius);
    border: 1px solid var(--ec-primary);
    background: #fff;
    color: var(--ec-primary);
    font-family: inherit;
    font-size: 12px;
    padding: 0 12px;
    cursor: pointer;
}

.ec-pl .technical-range .irs--round .irs-bar {
    background: var(--ec-primary);
}

.ec-pl .technical-range .irs--round .irs-handle {
    border-color: var(--ec-primary);
}

.ec-pl .irs--round .irs-from, .ec-pl .irs--round .irs-to, .ec-pl .irs--round .irs-single {
    background: var(--ec-primary);
}

.ec-pl .irs--round .irs-from::before, .ec-pl .irs--round .irs-to::before, .ec-pl .irs--round .irs-single::before {
    border-top-color: var(--ec-primary);
}

.ec-pl .irs--round .irs-min, .ec-pl .irs--round .irs-max {
    display: none;
}

.ec-pl .technical-range a {
    color: #19bfd3;
    font-size: 12px;
}

/* ---------- product detail page (Detail templates "digikala" / "digikalassr") ---------- */
.ec-pd {
    font-family: var(--ec-font);
    color: var(--ec-text);
}

.ec-pd .ec-pl-crumb {
    margin: 8px 0 16px;
}

.ec-pd-top {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

/* gallery */
.ec-pd-gallery {
    position: relative;
    display: flex;
    gap: 12px;
}

.ec-gal-tools {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}

.ec-gal-tools .ec-act {
    width: 36px;
    height: 36px;
    font-size: 16px;
}

.ec-gal-body {
    flex: 1;
    min-width: 0;
}

.ec-gal-main {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
    border-radius: var(--ec-radius);
    overflow: hidden;
    background: #fff;
}

.ec-gal-main img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ec-gal-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.ec-gal-thumbs button {
    width: 64px;
    height: 64px;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    background: #fff;
    padding: 4px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ec-muted);
    font-size: 22px;
}

.ec-gal-thumbs button img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ec-gal-thumbs button.ec-on {
    border-color: var(--ec-primary);
}

.ec-gal-thumbs .ec-gal-more {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text-2);
    background: var(--ec-page);
}

.ec-gal-thumbs [data-video='1']::after {
    content: "\f144";
    font-family: "Font Awesome 6 Pro", FontAwesome;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.ec-pd [data-product-user-photos] {
    margin-top: 12px;
}

/* info */
.ec-pd-brand {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    margin-bottom: 8px;
    color: var(--ec-muted);
}

.ec-pd-brand a {
    color: #19bfd3 !important;
    font-weight: 700;
}

.ec-pd-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.9;
    margin: 0 0 8px;
}

.ec-pd-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    font-size: 12px;
    color: var(--ec-muted);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ec-line);
}

.ec-pd-sub a {
    color: #19bfd3 !important;
}

.ec-pd-sub .ec-dot-sep::before {
    content: "•";
    margin-inline-end: 6px; color: var(--ec-border);
}

.ec-var-group {
    margin: 16px 0;
}

.ec-var-label {
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--ec-text-2);
}

.ec-var-label b {
    color: var(--ec-text);
}

.ec-var-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ec-var {
    min-width: 44px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--ec-text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ec-var:hover {
    border-color: var(--ec-text-2);
}

.ec-var.ec-on {
    border: 2px solid #19bfd3;
    color: var(--ec-text);
    font-weight: 700;
}

.ec-var.ec-off {
    color: #c0c2c5;
    border-style: dashed;
}

.ec-var-color {
    width: 40px;
    min-width: 40px;
    padding: 0;
}

.ec-var-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.ec-var-thumb {
    width: 56px;
    height: 56px;
    padding: 2px;
    border-radius: var(--ec-radius);
}

.ec-var-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ec-models-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ec-model {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    text-align: start;
    padding: 10px 14px;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
}

.ec-model small {
    grid-column: 1;
    color: var(--ec-muted);
    font-size: 11px;
}

.ec-model-name {
    font-size: 13px;
    font-weight: 700;
}

.ec-model-price {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    font-size: 13px;
    font-weight: 700;
}

.ec-model.ec-on {
    border: 2px solid #19bfd3;
}

.ec-model.ec-off {
    opacity: .55;
}

.ec-keyspecs {
    margin-top: 16px;
}

.ec-keyspecs-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}

.ec-keyspecs ul {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.ec-keyspecs li {
    background: var(--ec-page);
    border-radius: var(--ec-radius);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

.ec-keyspecs li span {
    color: var(--ec-muted);
}

.ec-offers {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ec-offers li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ec-success);
    background: #e9f7ef;
    border-radius: var(--ec-radius);
    padding: 8px 12px;
}

.ec-offers li small {
    margin-inline-start: auto; color: var(--ec-muted);
}

.ec-deal {
    background: var(--ec-primary-soft);
    border-radius: var(--ec-radius);
    padding: 10px 12px;
    margin-top: 12px;
}

.ec-deal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ec-amazing);
    font-weight: 700;
    font-size: 13px;
    gap: 8px;
}

.ec-deal-head > span:first-child {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.ec-deal .ec-timer span {
    background: #fff;
    color: var(--ec-amazing);
    min-width: 26px;
    height: 26px;
    font-size: 13px;
}

.ec-deal .ec-timer b {
    color: var(--ec-amazing);
}

.ec-deal .ec-sold {
    margin-top: 8px;
}

/* buy box */
.ec-pd-buy {
    position: sticky;
    top: calc(var(--ec-sticky-top, 0px) + 16px);
    background: var(--ec-page);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ec-buy-seller {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ec-border);
    font-size: 13px;
}

.ec-buy-seller-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.ec-buy-seller-name a {
    color: var(--ec-text) !important;
}

.ec-buy-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ec-text-2);
}

.ec-buy-line i {
    width: 18px;
    text-align: center;
    color: var(--ec-muted);
}

.ec-buy-price {
    text-align: end;
}

.ec-buy-old {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #c0c2c5;
}

.ec-buy-amount {
    font-size: 20px;
    font-weight: 700;
}

.ec-buy-amount small {
    font-size: 12px;
    font-weight: 400;
    margin-inline-start: 4px; }

.ec-buy-tax, .ec-buy-unit, .ec-buy-note {
    font-size: 11px;
    color: var(--ec-muted);
}

.ec-buy-stock {
    font-size: 12px;
    color: var(--ec-amazing);
    font-weight: 700;
}

.ec-buy-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ec-muted);
}

.ec-buy-callprice {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.ec-buy-row {
    display: flex;
    gap: 8px;
}

.ec-buy-row .ec-btn {
    flex: 1;
    height: 44px;
}

.ec-btn-block {
    width: 100%;
}

.ec-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    background: #fff;
    height: 44px;
}

.ec-qty button {
    width: 34px;
    height: 100%;
    border: 0;
    background: none;
    color: var(--ec-primary);
    cursor: pointer;
    font-size: 13px;
}

.ec-qty-input {
    width: 36px;
    border: 0;
    text-align: center;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    background: none;
    outline: none;
}

.ec-buy-open {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

.ec-invalid {
    box-shadow: 0 0 0 1px var(--ec-primary) inset !important;
}

.ec-pd-extra {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ec-pd-extra .ec-link {
    font-size: 12px;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: start;
}

.ec-pd #ecdatafields {
    background: #fff;
    border-radius: var(--ec-radius);
    padding: 10px;
    font-size: 12px;
}

.ec-pd #ecdatafields input, .ec-pd #ecdatafields select, .ec-pd #ecdatafields textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    padding: 6px 8px;
    font-family: inherit;
}

/* sections & tabs */
.ec-pd-section {
    margin: 32px 0;
}

.ec-pd-section > h2 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 8px;
    display: inline-block;
    border-bottom: 2px solid var(--ec-primary);
}

.ec-pd-tabs {
    position: sticky;
    top: var(--ec-sticky-top, 0px);
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--ec-line);
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin-top: 32px;
    scrollbar-width: none;
}

.ec-pd-tabs a {
    padding: 14px 12px;
    font-size: 13px;
    color: var(--ec-muted) !important;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    gap: 6px;
}

.ec-pd-tabs a.ec-on {
    color: var(--ec-primary) !important;
    border-bottom-color: var(--ec-primary);
    font-weight: 700;
}

.ec-pd-tabs a small {
    color: var(--ec-muted);
}

.ec-pd-desc {
    font-size: 14px;
    line-height: 2.2;
    color: var(--ec-text-2);
}

.ec-pd-desc img {
    max-width: 100%;
    height: auto;
}

.ec-spec-group {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0 24px;
    margin-bottom: 20px;
}

.ec-spec-group h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 12px 0;
}

.ec-spec-group dl {
    margin: 0;
}

.ec-spec-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ec-line);
    font-size: 13px;
}

.ec-spec-row dt {
    color: var(--ec-muted);
}

.ec-spec-row dd {
    margin: 0;
    color: var(--ec-text);
}

.ec-docs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ec-docs a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    color: var(--ec-text-2) !important;
    font-size: 13px;
}

.ec-docs a i {
    font-size: 20px;
    color: var(--ec-primary);
}

.ec-cm {
    padding: 16px 0;
    border-bottom: 1px solid var(--ec-line);
}

.ec-cm-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.ec-cm-rate {
    color: #fff;
    border-radius: 4px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
}

.ec-rate-good {
    background: var(--ec-success);
}

.ec-rate-mid {
    background: var(--ec-warning);
}

.ec-rate-bad {
    background: var(--ec-primary);
}

.ec-cm-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--ec-muted);
    margin: 8px 0;
}

.ec-cm-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ec-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
}

.ec-badge-buyer {
    color: var(--ec-success);
    background: #e9f7ef;
    border-radius: 999px;
    padding: 1px 8px;
}

.ec-cm-text {
    font-size: 13px;
    line-height: 2;
    margin: 0;
    white-space: pre-line;
}

.ec-cm-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--ec-muted);
    margin-top: 8px;
}

.ec-cm-like {
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--ec-muted);
    display: inline-flex;
    gap: 4px;
    align-items: center;
    font-family: inherit;
    font-size: 12px;
}

.ec-cm-like.ec-on {
    color: var(--ec-primary);
}

.ec-qa-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ec-qa-askform {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.ec-qa-askform textarea, .ec-qa-form textarea {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    padding: 10px 12px;
    resize: vertical;
}

.ec-qa {
    padding: 16px 0;
    border-bottom: 1px solid var(--ec-line);
}

.ec-qa-q {
    display: flex;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
}

.ec-qa-q i {
    color: #19bfd3;
    margin-top: 6px;
}

.ec-qa-q p {
    margin: 0;
    line-height: 2;
}

.ec-qa-a {
    margin: 10px 0 0;
    padding-inline-start: 24px; font-size: 13px;
    line-height: 2;
    position: relative;
}

.ec-qa-label {
    font-size: 11px;
    color: var(--ec-muted);
}

.ec-qa-a p {
    margin: 0;
}

.ec-qa-a small {
    color: var(--ec-muted);
    margin-inline-end: 8px; }

.ec-qa .ec-link {
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    margin-top: 8px;
    font-size: 12px;
    margin-inline-end: 12px; }

.ec-qa-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.ec-muted {
    color: var(--ec-muted);
    font-size: 13px;
}

.ec-bundle-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.ec-bundle-item {
    width: 150px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--ec-text-2) !important;
    text-align: center;
}

.ec-bundle-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
}

.ec-bundle-plus {
    color: var(--ec-muted);
}

.ec-bundle-sum {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: center;
    font-size: 13px;
}

.ec-bundle-sum del {
    color: #c0c2c5;
    margin-inline-start: 6px; }

.ec-bundle-save {
    color: var(--ec-success);
    font-weight: 700;
}

.ec-compare-table {
    overflow-x: auto;
    border: 1px solid var(--ec-line);
    border-radius: 12px;
}

.ec-compare-table table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 640px;
    font-size: 12px;
}

.ec-compare-table th, .ec-compare-table td {
    border-bottom: 1px solid var(--ec-line);
    padding: 12px 10px;
    text-align: center;
    vertical-align: top;
    font-weight: 400;
}

.ec-compare-table tbody tr:last-child > * {
    border-bottom: 0;
}

.ec-compare-table .ec-cmp-label {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--ec-bg, #fff);
    text-align: start;
    color: var(--ec-muted);
    width: 150px;
    min-width: 120px;
    box-shadow: inset -1px 0 0 var(--ec-line);
}

.ec-compare-table thead th {
    vertical-align: bottom;
}

.ec-compare-table .ec-cmp-self {
    background: #f0fbfd;
}

.ec-compare-table thead .ec-cmp-self {
    box-shadow: inset 0 3px 0 #19bfd3;
}

.ec-cmp-badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #19bfd3;
    color: #fff;
    font-size: 11px;
}

.ec-cmp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--ec-text-2) !important;
}

.ec-cmp-card img {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.ec-cmp-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.8;
    min-height: 3.6em;
}

.ec-cmp-rating {
    display: block;
    min-height: 18px;
    margin: 4px 0;
    color: var(--ec-text-2) !important;
}

.ec-cmp-price {
    margin: 4px 0 8px;
    font-size: 14px;
    font-weight: 700;
}

.ec-cmp-price small {
    font-size: 11px;
    font-weight: 400;
}

.ec-compare-table tr.ec-cmp-group th {
    background: #f5f5f5;
    color: var(--ec-text-2);
    font-weight: 700;
    text-align: start;
    position: static;
}

.ec-compare-table tr.ec-cmp-differs td {
    color: var(--ec-text, #222);
}

.ec-cmp-only-diff tr.ec-cmp-same {
    display: none;
}

.ec-cmp-diff {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    cursor: pointer;
    white-space: normal;
}

/* dialogs, lightbox */
.ec-dialog {
    width: min(520px, 100%);
}

.ec-dialog-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px;
}

.ec-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
}

.ec-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ec-form .ec-input {
    height: 40px;
}

.ec-radio-row {
    display: flex;
    gap: 16px;
}

.ec-radio-row label {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.ec-share {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ec-share-copy, .ec-share-mail {
    display: flex;
    gap: 8px;
}

.ec-share-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ec-share-links a {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    color: var(--ec-text-2) !important;
    font-size: 12px;
}

.ec-chart {
    min-height: 280px;
}

.ec-lb {
    background: rgba(0, 0, 0, .6);
}

.ec-lb-box {
    position: relative;
    width: min(1080px, 100%);
    height: min(88vh, 760px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.ec-lb-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-bottom: 1px solid var(--ec-line);
    flex: 0 0 auto;
}

.ec-lb-tabs {
    display: flex;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
}

.ec-lb-tabs button {
    position: relative;
    border: 0;
    background: none;
    padding: 16px 12px;
    font: inherit;
    font-size: 13px;
    color: var(--ec-muted);
    cursor: pointer;
    white-space: nowrap;
}

.ec-lb-tabs button small {
    font-size: 11px;
}

.ec-lb-tabs button.ec-on {
    color: var(--ec-primary);
    font-weight: 700;
}

.ec-lb-tabs button.ec-on::after {
    content: "";
    position: absolute;
    inset-inline: 8px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--ec-primary);
}

.ec-lb-close {
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    font-size: 20px;
    color: var(--ec-text-2);
    cursor: pointer;
    border-radius: 50%;
}

.ec-lb-close:hover {
    background: var(--ec-page);
}

.ec-lb-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
}

.ec-lb-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 24px 64px;
    user-select: none;
}

.ec-lb-media {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-lb-media img, .ec-lb-media video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ec-lb-prev, .ec-lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--ec-line);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    color: var(--ec-text-2);
    cursor: pointer;
    font-size: 16px;
}

.ec-lb-prev:hover, .ec-lb-next:hover {
    color: var(--ec-primary);
}

.ec-lb-prev {
    inset-inline-start: 12px;
}

.ec-lb-next {
    inset-inline-end: 12px;
}

.ec-lb-count {
    position: absolute;
    bottom: 12px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    padding: 2px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 12px;
}

.ec-lb-strip {
    border-inline-start: 1px solid var(--ec-line); padding: 16px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    align-content: start;
}

.ec-lb-strip button {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    border: 1px solid var(--ec-line);
    background: #fff;
    padding: 3px;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    overflow: hidden;
}

.ec-lb-strip button.ec-on {
    border: 2px solid var(--ec-primary);
}

.ec-lb-strip img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ec-lb-strip button i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
}

@media (max-width: 767px) {
    .ec-lb .ec-lb-box {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .ec-lb-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .ec-lb-stage {
        padding: 12px;
    }

    .ec-lb-prev, .ec-lb-next {
        display: none !important;
    }

    .ec-lb-strip {
        border-inline-start: 0; border-top: 1px solid var(--ec-line);
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 12px;
    }

    .ec-lb-strip button {
        flex: 0 0 60px;
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 1199px) {
    .ec-pd-top {
        grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    }

    .ec-pd-buy {
        grid-column: 1 / -1;
        position: static;
    }
}

@media (max-width: 767px) {
    .ec-pd-top {
        grid-template-columns: minmax(0, 1fr);
    }

    .ec-pd-gallery {
        flex-direction: column-reverse;
    }

    .ec-gal-tools {
        flex-direction: row;
    }

    .ec-spec-group, .ec-spec-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .ec-pd-buy {
        position: static;
    }

    .ec-buy-bar.ec-on {
        display: flex;
    }

    .ec-pd:has(.ec-buy-bar.ec-on) {
        padding-bottom: 76px;
    }

    body:has(.ec-buy-bar.ec-on) .ec-compare-fab {
        bottom: 88px;
    }
}

/* detail: phone buy bar */
.ec-buy-bar {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1400;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--ec-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
}

.ec-buy-bar .ec-pd-addcart {
    flex: 0 1 auto;
    padding-inline: 18px; }

.ec-bar-price {
    text-align: end;
    line-height: 1.6;
}

.ec-bar-price del {
    color: var(--ec-muted);
    font-size: 12px;
}

.ec-bar-price .ec-off {
    margin-inline-start: 6px; }

.ec-bar-price b {
    font-size: 16px;
}

.ec-bar-price small {
    font-size: 11px;
    font-weight: 400;
}

/* detail: in-cart confirmation */
/* detail: review cards (criteria, pros / cons, photos, store reply) */
.ec-cm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto; padding: 2px 8px;
    border-radius: 10px;
    background: #fff4e5;
    color: #c77700;
    font-size: 11px;
}

.ec-cm-criteria {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 6px 0;
    font-size: 11px;
    color: var(--ec-muted);
}

.ec-cm-criteria b {
    color: var(--ec-text-2);
    font-weight: 700;
}

.ec-cm-points {
    list-style: none;
    margin: 6px 0;
    padding: 0;
    font-size: 12px;
    line-height: 2;
}

.ec-cm-points li {
    position: relative;
    padding-inline-start: 18px; }

.ec-cm-points li::before {
    position: absolute;
    inset-inline-start: 0;
    font-weight: 700;
}

.ec-cm-pros li::before {
    content: "+";
    color: #00a049;
}

.ec-cm-cons li::before {
    content: "−";
    color: #ef4056;
}

.ec-cm-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.ec-cm-photos img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--ec-border);
    cursor: zoom-in;
}

.ec-cm-reply {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--ec-page);
    font-size: 12px;
}

.ec-cm-reply p {
    margin: 4px 0 0;
    line-height: 1.9;
}

.ec-cm-reply-who {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--ec-text-2);
}

/* detail: buy box add button / in-cart stepper (Digikala) */
.ec-buy-cart .ec-pd-addcart {
    width: 100%;
}

.ec-incart-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ec-cart-qty {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.ec-cart-qty button {
    width: 34px;
    height: 100%;
    border: 0;
    background: none;
    color: var(--ec-primary);
    cursor: pointer;
    font-size: 14px;
}

.ec-cart-qty button:disabled {
    color: var(--ec-muted);
    cursor: default;
}

.ec-cart-count {
    min-width: 28px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--ec-primary);
}

.ec-incart {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    font-size: 12px;
    color: var(--ec-text-2);
}

.ec-incart a {
    margin: 0;
    color: #19bfd3;
    font-weight: 600;
    font-size: 12px;
}

.ec-buy-bar .ec-incart-row {
    gap: 8px;
}

.ec-buy-bar .ec-incart a {
    display: none;
}

/* detail: reviews / questions with a sticky side box (Digikala) */
.ec-rv {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.ec-rv-side {
    position: sticky;
    top: calc(var(--ec-sticky-top, 0px) + 64px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ec-rv-summary .row {
    display: block;
    margin: 0;
}

.ec-rv-summary .row > * {
    width: 100%;
    max-width: none;
    padding: 0;
    flex: none;
}

.ec-rv-summary .col-lg-8, .ec-rv-summary .col-lg-4 > .mt-3:last-child {
    display: none;
}

.ec-rv-summary .rv-avg {
    font-size: 28px;
}

.ec-rv-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--ec-line);
    border-radius: 12px;
    font-size: 13px;
}

.ec-rv-cta b {
    font-size: 14px;
}

.ec-rv-cta p {
    margin: 0;
    font-size: 12px;
    line-height: 1.9;
}

.ec-rv-cta-icon {
    font-size: 22px;
    color: var(--ec-primary);
}

.ec-rv-main {
    min-width: 0;
}

.ec-rv-photos:not(:empty) {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ec-line);
}

.ec-rv-photos-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
}

.ec-rv-photos-title small {
    color: var(--ec-muted);
    font-weight: 400;
}

.ec-rv-photos-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ec-rv-photos-strip button {
    position: relative;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 1px solid var(--ec-line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: zoom-in;
}

.ec-rv-photos-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ec-rv-photos-strip span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-weight: 700;
}

.ec-rv-sort {
    display: flex;
    align-items: center;
    gap: 4px 16px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ec-line);
    font-size: 12px;
}

.ec-rv-sort button {
    border: 0;
    background: none;
    padding: 4px 0;
    font: inherit;
    color: var(--ec-text-2);
    cursor: pointer;
}

.ec-rv-sort button.ec-on {
    color: var(--ec-primary);
    font-weight: 700;
}

.ec-rv-count {
    margin-inline-start: auto; }

.ec-rv-empty {
    padding: 32px 0;
    text-align: center;
    color: var(--ec-muted);
}

.ec-rv-empty i {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
}

/* forms in dialogs */
.ec-dialog.ec-dialog-wide {
    width: min(640px, 100%);
}

.ec-dialog .ec-dialog-body {
    max-height: 74vh;
    overflow-y: auto;
}

.ec-form-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--ec-line);
}

.ec-form-product img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 8px;
}

.ec-form-product small {
    display: block;
    color: var(--ec-muted);
    font-size: 11px;
}

.ec-form-product b {
    font-size: 13px;
    line-height: 1.8;
}

.ec-rf-field {
    display: block;
    margin-bottom: 14px;
}

.ec-rf-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text-2);
}

.ec-rf-label small {
    font-weight: 400;
}

.ec-rf .ec-input {
    width: 100%;
}

.ec-rf textarea.ec-input {
    resize: vertical;
    min-height: 96px;
}

.ec-rf-rate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

.ec-rf-level {
    min-height: 20px;
    font-size: 12px;
    color: var(--ec-muted);
}

.ec-stars-input {
    display: inline-flex;
    gap: 2px;
    direction: ltr;
}

[dir=rtl] .ec-stars-input, .rtl .ec-stars-input {
    direction: rtl;
}

.ec-stars-input button {
    border: 0;
    background: none;
    padding: 2px;
    font-size: 18px;
    color: #d9d9d9;
    cursor: pointer;
    line-height: 1;
}

.ec-stars-input button.ec-on {
    color: #f9bc00;
}

.ec-stars-input.ec-stars-big button {
    font-size: 32px;
    padding: 2px 4px;
}

.ec-rf-crit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
}

.ec-points-input {
    display: flex;
    gap: 6px;
}

.ec-points-add {
    flex: 0 0 44px;
    height: 44px;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    background: #fff;
    color: var(--ec-primary);
    cursor: pointer;
}

.ec-points-list li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ec-points-del {
    margin-inline-start: auto; border: 0;
    background: none;
    color: var(--ec-muted);
    cursor: pointer;
}

.ec-rf-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ec-rf-photo {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
}

.ec-rf-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ec-rf-photo button {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
}

.ec-rf-add {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--ec-border);
    border-radius: 8px;
    color: var(--ec-muted);
    font-size: 20px;
    cursor: pointer;
    overflow: hidden;
}

.ec-rf-add input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.ec-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 12px;
    cursor: pointer;
}

.ec-rf-msg {
    min-height: 18px;
    margin: 0 0 8px;
    color: var(--ec-danger, #ef4056);
    font-size: 12px;
}

.ec-rf-msg:empty {
    min-height: 0;
}

.ec-rf-note {
    font-size: 11px;
    line-height: 1.9;
}

.ec-rf-counter {
    display: block;
    text-align: end;
    margin-top: 4px;
    font-size: 11px;
}

@media (max-width: 991px) {
    .ec-rv {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .ec-rv-side {
        position: static;
    }
}

/* detail: price chart dialog */
.ec-dialog.ec-dialog-chart {
    width: min(860px, 100%);
}

/* ===================== checkout (EcCheckout, Template/Checkout/digikala*) ===================== */
.ec-co {
    padding: 16px 0 32px;
}

.ec-co-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0 auto 24px;
    padding: 0;
    max-width: 640px;
}

.ec-co-steps li {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--ec-muted);
    font-size: 12px;
    cursor: default;
}

.ec-co-steps li i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ec-page);
    font-size: 15px;
    position: relative;
    z-index: 1;
}

.ec-co-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18px;
    inset-inline-start: calc(50% + 24px);
    width: calc(100% - 48px);
    height: 2px;
    background: var(--ec-line);
}

.ec-co-steps li.ec-on, .ec-co-steps li.ec-done {
    color: var(--ec-primary);
    font-weight: 700;
}

.ec-co-steps li.ec-on i {
    background: var(--ec-primary);
    color: #fff;
}

.ec-co-steps li.ec-done i {
    background: #fde8eb;
    color: var(--ec-primary);
}

.ec-co-steps li.ec-done {
    cursor: pointer;
}

.ec-co-steps li.ec-done::after {
    background: var(--ec-primary);
}

.ec-co-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}

.ec-co-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ec-co-main > section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ec-co-main > section.ec-hide {
    display: none;
}

.ec-co-box {
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 16px 20px;
    background: #fff;
}

.ec-co-box.ec-co-busy {
    opacity: .55;
    pointer-events: none;
}

.ec-co-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 14px;
}

.ec-co-loading {
    padding: 32px;
    text-align: center;
    color: var(--ec-muted);
    font-size: 22px;
}

.ec-co-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--ec-line);
    margin-bottom: -4px;
}

.ec-co-tabs button {
    position: relative;
    border: 0;
    background: none;
    padding: 10px 2px;
    font: inherit;
    font-size: 14px;
    color: var(--ec-muted);
    cursor: pointer;
}

.ec-co-tabs button.ec-on {
    color: var(--ec-primary);
    font-weight: 700;
}

.ec-co-tabs button.ec-on::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--ec-primary);
}

.ec-co-tabs small {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--ec-primary);
    color: #fff;
    font-size: 11px;
}

.ec-co-tabs small:empty {
    display: none;
}

.ec-co-tabs button:not(.ec-on) small {
    background: var(--ec-muted);
}

.ec-co-empty {
    padding: 32px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ec-co-empty > i {
    font-size: 48px;
    color: var(--ec-muted);
}

.ec-co-empty img {
    width: 180px;
}

.ec-co-empty b {
    font-size: 16px;
}

.ec-co-empty p {
    margin: 0;
    font-size: 12px;
}

.ec-co-freeship {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: #f0fbfd;
    font-size: 12px;
}

.ec-co-freeship > i {
    font-size: 20px;
    color: #19bfd3;
}

.ec-co-freeship > div {
    flex: 1;
}

.ec-co-bar {
    height: 4px;
    border-radius: 4px;
    background: #d7f2f6;
    margin-top: 8px;
    overflow: hidden;
}

.ec-co-bar i {
    display: block;
    height: 100%;
    background: #19bfd3;
    border-radius: 4px;
}

.ec-co-freeship.ec-on {
    background: #e8f8ef;
}

.ec-co-freeship.ec-on > i {
    color: #00a049;
}

.ec-co-freeship.ec-on .ec-co-bar i {
    background: #00a049;
}

.ec-co-alert {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: #f0fbfd;
    color: var(--ec-text-2);
    font-size: 12px;
    line-height: 1.9;
}

.ec-co-alert-warn {
    background: #fff4e5;
    color: #8a5300;
}

.ec-co-lines {
    display: flex;
    flex-direction: column;
}

.ec-co-line {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ec-line);
}

.ec-co-line:last-child {
    border-bottom: 0;
}

.ec-co-img {
    flex: 0 0 114px;
    height: 114px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-co-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ec-co-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}

.ec-co-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ec-text) !important;
    line-height: 1.9;
}

.ec-co-model {
    color: var(--ec-muted);
}

.ec-co-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: var(--ec-text-2);
}

.ec-co-attrs:empty {
    display: none;
}

.ec-co-attr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ec-co-attr i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--ec-border);
}

.ec-co-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.ec-co-badge-gift {
    background: #fde8eb;
    color: var(--ec-primary);
}

.ec-co-stock {
    color: var(--ec-primary);
}

.ec-co-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

.ec-co-qty {
    height: 44px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.ec-co-qty button {
    width: 34px;
    height: 100%;
    border: 0;
    background: none;
    color: var(--ec-primary);
    cursor: pointer;
    font-size: 14px;
}

.ec-co-qty button:disabled {
    color: var(--ec-muted);
    cursor: default;
}

.ec-co-n {
    min-width: 28px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--ec-primary);
}

.ec-co-fixedqty {
    color: var(--ec-muted);
}

.ec-co-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.ec-co-price b {
    font-size: 16px;
}

.ec-co-price b small {
    font-size: 11px;
    font-weight: 400;
}

.ec-co-off {
    color: var(--ec-primary);
    font-size: 11px;
}

.ec-co-free {
    color: #00a049;
}

.ec-co-later {
    align-self: flex-start;
    font-size: 12px;
}

.ec-co-gift {
    background: #fffafb;
}

.ec-co-next-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.ec-co-offers {
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 16px 20px;
}

.ec-co-offers h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
}

.ec-co-offer-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.ec-co-offer {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--ec-line);
    border-radius: 8px;
    font-size: 12px;
}

.ec-co-offer a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ec-text-2) !important;
}

.ec-co-offer img {
    width: 100%;
    height: 120px;
    object-fit: contain;
}

.ec-co-offer span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.8;
    min-height: 3.6em;
}

.ec-co-offer-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ec-co-offer-price del {
    color: var(--ec-muted);
    font-size: 11px;
}

.ec-co-aside {
    position: sticky;
    top: calc(var(--ec-sticky-top, 0px) + 16px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ec-co-aside.ec-hide {
    display: none;
}

.ec-co-summary {
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ec-co-sum-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--ec-text-2);
}

.ec-co-sum-row small {
    font-size: 11px;
}

.ec-co-sum-sub {
    display: flex;
    justify-content: space-between;
    padding: 0 12px 4px 0;
    font-size: 11px;
    color: var(--ec-muted);
}

.ec-co-red {
    color: var(--ec-primary);
}

.ec-co-total {
    border-top: 1px solid var(--ec-line);
    margin-top: 6px;
    padding-top: 12px;
    font-weight: 700;
    color: var(--ec-text);
    font-size: 14px;
}

.ec-co-profit {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--ec-primary);
    padding: 2px 0 6px;
}

.ec-co-note {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--ec-page);
    font-size: 11px;
    color: var(--ec-text-2);
    margin: 4px 0;
}

.ec-co-cashback {
    background: #fff8e1;
}

.ec-co-ship-note {
    font-size: 11px;
    line-height: 1.9;
    margin: 4px 0 8px;
}

.ec-co-summary .ec-co-next {
    margin-top: 8px;
}

.ec-co-safe {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 11px;
    margin: 0;
    padding: 0 4px;
}

.ec-co-addr {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ec-co-addr > i {
    font-size: 22px;
    color: var(--ec-text-2);
    margin-top: 4px;
}

.ec-co-addr-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    line-height: 1.9;
}

.ec-co-addr-text small, .ec-co-addr-text span {
    font-size: 12px;
}

.ec-co-addr-change {
    white-space: nowrap;
    font-size: 12px;
}

.ec-co-addr-empty {
    align-items: center;
}

.ec-co-addr-empty > div {
    flex: 1;
}

.ec-co-addr-empty p {
    margin: 4px 0 0;
    font-size: 12px;
}

.ec-co-together {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.ec-co-radio {
    flex: 1 1 220px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}

.ec-co-radio span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ec-co-radio small {
    font-size: 11px;
}

.ec-co-radio:has(input:checked) {
    border-color: var(--ec-primary);
    background: #fffafb;
}

.ec-co-cons {
    border-top: 1px solid var(--ec-line);
    padding-top: 14px;
    margin-top: 14px;
}

.ec-co-cons:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.ec-co-cons header {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    font-size: 13px;
    margin-bottom: 10px;
}

.ec-co-cons header span {
    font-size: 11px;
}

.ec-co-cons-items {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.ec-co-cons-items span {
    position: relative;
    width: 64px;
    height: 64px;
    border: 1px solid var(--ec-line);
    border-radius: 8px;
    padding: 4px;
}

.ec-co-cons-items img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ec-co-cons-items i {
    position: absolute;
    bottom: -6px;
    inset-inline-start: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 10px;
    background: var(--ec-text-2);
    color: #fff;
    font-size: 11px;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-co-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ec-co-method {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}

.ec-co-method.ec-on {
    border-color: var(--ec-primary);
    background: #fffafb;
}

.ec-co-method > img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.ec-co-method > i {
    width: 40px;
    text-align: center;
    font-size: 22px;
    color: var(--ec-text-2);
}

.ec-co-method > span {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ec-co-method small {
    font-size: 11px;
    line-height: 1.8;
}

.ec-co-method em {
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.ec-co-method em small {
    font-weight: 400;
}

.ec-co-green {
    color: #00a049;
}

.ec-co-times {
    margin-top: 12px;
    font-size: 13px;
}

.ec-co-days {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 10px 0;
    padding-bottom: 4px;
}

.ec-co-days button {
    flex: 0 0 auto;
    min-width: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.ec-co-days button small {
    color: var(--ec-muted);
    font-size: 11px;
}

.ec-co-days button.ec-on {
    border-color: var(--ec-primary);
    color: var(--ec-primary);
}

.ec-co-days button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.ec-co-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ec-co-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
}

.ec-co-slot.ec-on {
    border-color: var(--ec-primary);
    background: #fffafb;
}

.ec-co-slot small {
    color: var(--ec-primary);
    font-size: 11px;
}

.ec-co-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin-top: 10px;
}

.ec-co-grid label {
    display: block;
}

.ec-co-grid .ec-input {
    width: 100%;
}

.ec-co-grid .ec-hide {
    display: none;
}

.ec-co-giftmsg {
    margin: -4px 0 12px;
}

.ec-co-giftmsg .ec-input {
    width: 100%;
}

.ec-co-codes {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ec-co-codes .ec-co-title {
    margin-bottom: 0;
}

.ec-co-code-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ec-co-code-row .ec-input {
    flex: 1;
}

.ec-co-code .ec-co-remove {
    display: none;
}

.ec-co-code.ec-on .ec-co-remove {
    display: inline-flex;
}

.ec-co-code.ec-on .ec-co-apply {
    display: none;
}

.ec-co-code.ec-on .ec-input {
    background: #e8f8ef;
}

.ec-co-msg {
    margin: 6px 0 0;
    font-size: 12px;
}

.ec-co-msg:empty {
    display: none;
}

.ec-co-club {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    background: #fff8e1;
    font-size: 12px;
}

.ec-co-club.ec-hide {
    display: none;
}

.ec-co-club > i {
    font-size: 22px;
    color: #c77700;
}

.ec-co-club > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ec-co-bar-m {
    display: none;
}

.ec-co-result {
    max-width: 560px;
    margin: 24px auto;
    padding: 32px 24px;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ec-co-result > i {
    font-size: 56px;
}

.ec-co-result.ec-ok > i {
    color: #00a049;
}

.ec-co-result.ec-fail > i {
    color: var(--ec-primary);
}

.ec-co-result h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.ec-co-result p {
    margin: 0;
    font-size: 13px;
    line-height: 2;
    white-space: pre-line;
}

.ec-co-track {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--ec-page);
    font-size: 13px;
}

.ec-co-track b {
    font-size: 15px;
    letter-spacing: 1px;
    direction: ltr;
}

.ec-co-result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

@media (max-width: 991px) {
    .ec-co-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ec-co-aside {
        position: static;
    }

    .ec-co-summary .ec-co-next {
        display: none;
    }

    .ec-co-bar-m.ec-on {
        display: flex;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1400;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--ec-border);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
    }

    .ec-co-bar-m > div {
        display: flex;
        flex-direction: column;
        font-size: 11px;
        color: var(--ec-muted);
    }

    .ec-co-bar-m b {
        font-size: 16px;
        color: var(--ec-text);
    }

    .ec-co-bar-m b small {
        font-size: 11px;
        font-weight: 400;
    }

    .ec-co:has(.ec-co-bar-m.ec-on) {
        padding-bottom: 84px;
    }

    body:has(.ec-co-bar-m.ec-on) .ec-compare-fab {
        bottom: 88px;
    }
}

@media (max-width: 575px) {
    .ec-co-box {
        padding: 14px;
    }

    .ec-co-img {
        flex-basis: 84px;
        height: 84px;
    }

    .ec-co-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ec-co-steps li span {
        font-size: 11px;
    }
}

/* link-style buttons (no browser button frame) */
button.ec-link {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

button.ec-link:focus-visible {
    outline: 2px solid #19bfd3;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===================== compare page (EcCompare, Template/Comparison/digikala*) ===================== */
.ec-cmp {
    padding: 16px 0 32px;
}

.ec-cmp-head {
    display: flex;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ec-cmp-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    flex: 1 1 auto;
}

.ec-cmp-head .ec-cmp-diff {
    margin: 0;
}

.ec-cmp .ec-compare-table table {
    min-width: 720px;
}

.ec-cmp .ec-compare-table thead th {
    vertical-align: top;
}

.ec-cmp-col {
    position: relative;
    min-width: 200px;
}

.ec-cmp-remove {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--ec-page);
    color: var(--ec-text-2);
    cursor: pointer;
}

.ec-cmp-remove:hover {
    color: var(--ec-primary);
}

.ec-cmp .ec-cmp-card img {
    width: 140px;
    height: 140px;
}

.ec-cmp-old {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ec-muted);
}

.ec-cmp-price b {
    font-size: 15px;
}

.ec-cmp-price small {
    font-size: 11px;
    font-weight: 400;
}

.ec-cmp-price > small {
    display: block;
    margin-bottom: 2px;
}

.ec-cmp-price b {
    white-space: nowrap;
}

.ec-cmp-cart {
    margin-top: 8px;
    display: flex;
    justify-content: center;
}

.ec-cmp-qty {
    height: 40px;
}

.ec-cmp-qty button {
    width: 32px;
    height: 100%;
    border: 0;
    background: none;
    color: var(--ec-primary);
    cursor: pointer;
}

.ec-cmp-qty span {
    min-width: 24px;
    text-align: center;
    font-weight: 700;
    color: var(--ec-primary);
}

.ec-cmp-addcol {
    vertical-align: middle !important;
}

.ec-cmp-addslot {
    width: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px dashed var(--ec-border);
    border-radius: 12px;
    background: none;
    color: var(--ec-muted);
    font: inherit;
    cursor: pointer;
}

.ec-cmp-addslot i {
    font-size: 28px;
}

.ec-cmp-addslot:hover {
    border-color: var(--ec-primary);
    color: var(--ec-primary);
}

.ec-cmp-nospec {
    text-align: center !important;
    padding: 24px !important;
}

.ec-cmp-search {
    position: relative;
    margin-bottom: 12px;
}

.ec-cmp-search i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: 12px;
    color: var(--ec-muted);
}

.ec-cmp-search .ec-input {
    width: 100%;
    padding-inline-start: 36px; }

.ec-cmp-hint {
    font-size: 12px;
    margin: 0 0 10px;
}

.ec-cmp-results {
    display: flex;
    flex-direction: column;
    max-height: 52vh;
    overflow-y: auto;
}

.ec-cmp-hit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ec-line);
}

.ec-cmp-hit img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.ec-cmp-hit div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.ec-cmp-hit small {
    color: var(--ec-muted);
}

.ec-cmp-more {
    margin-top: 10px;
}

.ec-cmp-social {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.ec-share-copy input[dir=ltr] {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
}

.ec-cmp-social a {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    color: var(--ec-text-2) !important;
    font-size: 12px;
}

.ec-cmp-qr {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    background: var(--ec-page);
}

.ec-cmp-qrcode {
    flex: 0 0 auto;
    padding: 8px;
    background: #fff;
    border-radius: 8px;
}

.ec-cmp-qrcode img, .ec-cmp-qrcode canvas {
    display: block;
    width: 168px;
    height: 168px;
}

.ec-cmp-qr p {
    font-size: 12px;
    line-height: 1.9;
    margin: 4px 0 8px;
}

@media (max-width: 575px) {
    .ec-cmp-qr {
        flex-direction: column;
        text-align: center;
    }

    .ec-cmp-col {
        min-width: 160px;
    }

    .ec-cmp .ec-cmp-card img {
        width: 96px;
        height: 96px;
    }
}

/* ===================== my orders (EcOrders, Template/Orders/digikala*) ===================== */
.ec-ord {
    padding: 8px 0 32px;
}

.ec-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

.ec-ord-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ec-ord-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    flex: 1 1 auto;
}

.ec-ord-back {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ec-text);
    cursor: pointer;
    font-size: 18px;
}

.ec-ord-back:hover {
    background: var(--ec-page);
}

.ec-ord-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: var(--ec-radius);
    background: #fff8e1;
    color: var(--ec-text-2);
    font-size: 13px;
}

.ec-ord-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid var(--ec-line);
    margin-bottom: 16px;
    scrollbar-width: none;
}

.ec-ord-tabs::-webkit-scrollbar {
    display: none;
}

.ec-ord-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--ec-muted);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.ec-ord-tab.ec-on {
    color: var(--ec-primary);
    border-bottom-color: var(--ec-primary);
    font-weight: 700;
}

.ec-ord-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--ec-page);
    color: var(--ec-text-2);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ec-ord-tab.ec-on .ec-ord-count {
    background: var(--ec-primary);
    color: #fff;
}

.ec-ord-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ec-ord-card {
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 16px 20px;
    background: #fff;
    cursor: pointer;
    transition: box-shadow .15s;
}

.ec-ord-card:hover {
    box-shadow: var(--ec-shadow);
}

.ec-ord-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ec-ord-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ec-text-2) !important;
    font-size: 13px;
    text-decoration: none !important;
}

.ec-ord-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
}

.ec-ord-status i {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
}

.ec-ord-warn i {
    background: var(--ec-warning);
}

.ec-ord-info i {
    background: #19bfd3;
}

.ec-ord-ok i {
    background: var(--ec-success);
}

.ec-ord-muted i {
    background: var(--ec-muted);
}

.ec-ord-danger i {
    background: var(--ec-primary);
}

.ec-ord-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    color: var(--ec-muted);
    font-size: 13px;
    margin-bottom: 12px;
}

.ec-ord-meta b {
    color: var(--ec-text);
    font-weight: 600;
}

.ec-ord-meta i {
    margin-inline-end: 4px; }

.ec-ord-paybar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: var(--ec-radius);
    background: #fff8e1;
    font-size: 13px;
    color: var(--ec-text-2);
}

.ec-ord-paybar i {
    margin-inline-end: 6px; color: var(--ec-warning);
}

.ec-ord-paybar.ec-ord-expired {
    background: var(--ec-page);
}

.ec-ord-paybar.ec-ord-expired i {
    color: var(--ec-muted);
}

.ec-ord-paybar [data-ec-end] {
    direction: ltr;
    display: inline-flex;
    font-weight: 700;
    color: var(--ec-text);
}

.ec-ord-thumbs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--ec-line);
}

.ec-ord-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ec-muted);
}

.ec-ord-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ec-ord-thumb b {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--ec-page);
    color: var(--ec-text);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-ord-thumb-more {
    border-radius: var(--ec-radius);
    background: var(--ec-page);
    color: var(--ec-text-2);
    font-weight: 700;
}

.ec-ord-more {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.ec-ord-loading {
    display: flex;
    justify-content: center;
    padding: 40px;
    color: var(--ec-muted);
    font-size: 24px;
}

.ec-ord-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 16px;
    color: var(--ec-muted);
    text-align: center;
}

.ec-ord-empty > i {
    font-size: 48px;
    color: var(--ec-border);
}

.ec-ord-box {
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 16px 20px;
    margin-bottom: 16px;
    background: #fff;
}

.ec-ord-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.ec-ord-muted {
    color: var(--ec-muted);
    font-size: 13px;
}

.ec-ord-h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ec-text);
    font-family: inherit;
    text-align: start;
}

.ec-ord-h2 small {
    color: var(--ec-muted);
    font-weight: 400;
    font-size: 12px;
}

.ec-ord-h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px;
}

.ec-ord-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
}

.ec-ord-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ec-line);
    font-size: 13px;
}

.ec-ord-row span {
    color: var(--ec-muted);
}

.ec-ord-row b {
    font-weight: 600;
    text-align: end;
}

.ec-ord-address {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--ec-text-2);
    line-height: 1.9;
}

.ec-ord-address i {
    color: var(--ec-muted);
    margin-top: 5px;
}

.ec-ord-steps {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 16px 0 20px;
}

.ec-ord-steps li {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ec-muted);
    text-align: center;
}

.ec-ord-steps li i {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ec-page);
    color: var(--ec-muted);
}

.ec-ord-steps li::before {
    content: '';
    position: absolute;
    top: 17px;
    inset-inline-end: 50%;
    width: 100%;
    height: 2px;
    background: var(--ec-line);
}

.ec-ord-steps li:first-child::before {
    display: none;
}

.ec-ord-steps li.ec-done, .ec-ord-steps li.ec-on {
    color: var(--ec-text);
}

.ec-ord-steps li.ec-done i {
    background: var(--ec-success);
    color: #fff;
}

.ec-ord-steps li.ec-on i {
    background: #19bfd3;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(25, 191, 211, .2);
}

.ec-ord-steps li.ec-done::before, .ec-ord-steps li.ec-on::before {
    background: var(--ec-success);
}

.ec-ord-items {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}

.ec-ord-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--ec-line);
}

.ec-ord-item-img {
    flex: 0 0 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ec-muted);
    font-size: 28px;
}

.ec-ord-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ec-ord-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.ec-ord-item-name {
    color: var(--ec-text) !important;
    font-weight: 600;
    line-height: 1.8;
    text-decoration: none !important;
}

.ec-ord-item-sub {
    color: var(--ec-muted);
}

.ec-ord-item-sub i {
    margin-inline-end: 4px; }

.ec-ord-attrs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: var(--ec-text-2);
}

.ec-ord-bkres {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ec-ord-bkavatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.ec-ord-item-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ec-ord-item-price del {
    color: var(--ec-muted);
    font-size: 12px;
}

.ec-ord-item-price b {
    font-size: 15px;
}

.ec-ord-item-acts {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.ec-ord-item-acts .ec-link, .ec-ord-again-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #19bfd3 !important;
    font-size: 13px;
    text-decoration: none !important;
}

.ec-ord-again-all {
    margin-top: 8px;
}

.ec-ord-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    white-space: pre-line;
    color: var(--ec-text-2);
}

.ec-ord-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ec-ord-actions .ec-btn i {
    margin-inline-end: 6px; }

.ec-ord-history-toggle {
    margin: 0;
    cursor: pointer;
    justify-content: space-between;
}

.ec-ord-history-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.ec-ord-events {
    margin-top: 12px;
}

.ec-ord-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    border-inline-start: 2px solid var(--ec-success); }

.ec-ord-timeline li {
    position: relative;
    padding: 0 16px 16px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ec-ord-timeline li::before {
    content: '';
    position: absolute;
    top: 5px;
    inset-inline-start: -7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ec-success);
    box-sizing: border-box;
}

.ec-ord-timeline li.ec-on::before {
    background: #19bfd3;
    box-shadow: 0 0 0 4px rgba(25, 191, 211, .2);
}

.ec-ord-timeline li:last-child {
    padding-bottom: 0;
}

.ec-ord-timeline b em {
    font-style: normal;
    font-size: 11px;
    font-weight: 500;
    color: #0e8fa0;
    background: rgba(25, 191, 211, .12);
    border-radius: 10px;
    padding: 1px 8px;
    margin-inline-start: 8px; }

.ec-ord-history-hint {
    font-size: 12px;
    margin: 0 0 12px;
}

.ec-ord-timeline span {
    color: var(--ec-muted);
    font-size: 12px;
}

.ec-ord-timeline p {
    margin: 2px 0 0;
    color: var(--ec-text-2);
}

.ec-ord-dlg {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
}

.ec-ord-dlg-acts {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

.ec-ord-dlg-acts .ec-btn i {
    margin-inline-end: 6px; }

.ec-ord-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ec-ord-field > span {
    font-weight: 600;
}

.ec-ord-field small {
    color: var(--ec-muted);
}

.ec-ord-field .ec-input {
    width: 100%;
}

.ec-ord-qtys {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ec-ord-qty {
    display: grid;
    grid-template-columns: 1fr 88px;
    gap: 4px 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--ec-line);
}

.ec-ord-qty small {
    grid-column: 1;
    color: var(--ec-muted);
}

.ec-ord-qty input {
    grid-row: 1 / span 2;
    grid-column: 2;
}

.ec-ord-msg {
    padding: 12px;
    border-radius: var(--ec-radius);
    background: var(--ec-page);
    margin: 0;
    line-height: 1.9;
}

.ec-ord-rmas {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}

.ec-ord-rmas li {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--ec-line);
}

.ec-ord-rmas li b {
    flex: 1;
}

.ec-ord-inv {
    font-size: 13px;
}

.ec-ord-inv-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ec-text);
    margin-bottom: 12px;
}

.ec-ord-inv-head b {
    font-size: 16px;
}

.ec-ord-inv-party {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    line-height: 1.9;
}

.ec-ord-inv-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}

.ec-ord-inv-table th, .ec-ord-inv-table td {
    border: 1px solid var(--ec-border);
    padding: 6px 8px;
    text-align: center;
}

.ec-ord-inv-table td:nth-child(2) {
    text-align: start;
}

.ec-ord-inv-table th {
    background: var(--ec-page);
}

.ec-ord-inv-sum {
    width: min(360px, 100%);
    margin-inline-start: auto; }

body.ec-ord-printing {
    padding: 24px;
    background: #fff;
}

@media print {
    body.ec-ord-printing {
        padding: 0;
    }
}

@media (max-width: 767px) {
    .ec-ord-card, .ec-ord-box {
        padding: 14px;
    }

    .ec-ord-grid {
        grid-template-columns: 1fr;
    }

    .ec-ord-meta {
        gap: 4px 16px;
    }

    .ec-ord-steps li span {
        font-size: 10px;
    }

    .ec-ord-steps li i {
        width: 30px;
        height: 30px;
    }

    .ec-ord-steps li::before {
        top: 14px;
    }

    .ec-ord-item-img {
        flex-basis: 72px;
        height: 72px;
    }

    .ec-ord-actions .ec-btn {
        flex: 1 1 calc(50% - 8px);
    }

    .ec-ord-inv-table {
        font-size: 11px;
    }
}

/* ===================== customer profile layout (skin DigikalaProfile.ascx: DNN pages + DDRMenu) ===================== */
.ec-prof {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding-top: 20px;
}

.ec-prof-side {
    position: sticky;
    top: calc(var(--ec-sticky-top, 120px) + 12px);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.ec-prof-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--ec-line);
}

.ec-prof-avatar {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 50%;
    background: var(--ec-page);
    color: var(--ec-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 20px;
}

.ec-prof-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ec-prof-name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ec-prof-name b {
    font-size: 14px;
    color: var(--ec-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-prof-name small {
    font-size: 12px;
    color: var(--ec-muted);
    text-align: right;
}

.ec-prof-edit {
    color: #19bfd3;
    font-size: 15px;
    padding: 6px;
}

.ec-prof-links {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.ec-prof-links a, .ec-prof-logout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    color: var(--ec-text-2);
    font-size: 13px;
    text-decoration: none;
    border-inline-start: 3px solid transparent; }

.ec-prof-links a:hover, .ec-prof-logout:hover {
    background: var(--ec-page);
    color: var(--ec-text);
}

.ec-prof-links img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.ec-prof-links a > i:first-child, .ec-prof-logout i {
    width: 20px;
    text-align: center;
    color: var(--ec-muted);
}

.ec-prof-links span {
    flex: 1;
}

.ec-prof-arrow {
    font-size: 11px;
    color: var(--ec-muted);
}

.ec-prof-links li.ec-on a {
    color: var(--ec-text);
    font-weight: 600;
    border-inline-start-color: var(--ec-primary); }

.ec-prof-links li.ec-on a > i: first-child {
    color: var(--ec-primary);
}

.ec-prof-logout {
    border-top: 1px solid var(--ec-line);
}

.ec-prof-content {
    min-width: 0;
}

@media (max-width: 991px) {
    .ec-prof {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding-top: 12px;
    }

    .ec-prof-side {
        position: static;
    }

    .ec-prof-user {
        padding: 12px;
    }

    .ec-prof-menu {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ec-prof-links {
        display: flex;
        padding: 0;
    }

    .ec-prof-links a, .ec-prof-logout {
        white-space: nowrap;
        padding: 12px 14px;
        border-inline-start: 0; border-bottom: 2px solid transparent;
    }

    .ec-prof-links li.ec-on a {
        border-bottom-color: var(--ec-primary);
    }

    .ec-prof-arrow {
        display: none;
    }

    .ec-prof-logout {
        border-top: 0;
    }
}

.ec-co-empty-icon {
    font-size: 56px;
    color: var(--ec-border);
    margin-bottom: 8px;
}


 .article-list::-webkit-scrollbar {
        -webkit-appearance: none;
        height: 2px !important;
    }

    .article-list::-webkit-scrollbar-track {
        height: 2px !important;
        background: #DBC9B1;
    }

    .article-list::-webkit-scrollbar-thumb {
        background: #806A53;
        border-radius: 10px;
    }