/* ============================================================
   Home page redesign (v2)
   Overrides for the homepage. Loaded after style2.css so these
   rules win without editing the legacy base stylesheet.
   ============================================================ */

/* Remap the legacy primary-button background to the v2 green. style2.css uses
   !important here, so the override must too (home-v2 loads later → it wins). */
.main-color-one-bg {
    background-color: var(--zino-green) !important;
}

    .main-color-one-bg:hover {
        background-color: var(--zino-green-hover) !important;
    }

/* --- Main slider layout ----------------------------------------------------
   Banner slider (.slider / #homeSlider) + suggestion column (#suggetMoment)
   and its progress bar. Migrated out of the legacy style2.css. */
.main-slider {
    margin-top: var(--space-6); /* 32px — rounded from Figma 34px to the 4/8 grid */
}

.slider {
    height: 489px; /* Figma slider height; kept in sync with #suggetMoment */
    border-radius: 0px;
}

    .slider .swiper {
        height: 100%;
    }

    .slider .swiper-wrapper {
        height: 100%;
    }

    .slider .swiper-slide {
        height: 100%;
    }

        .slider .swiper-slide img {
            /* border-radius: 10px; */
            height: 100%;
            width: 100%;
            object-fit: contain;
            /*object-fit: cover;*/
        }

    .slider .swiper-button-prev {
        border-radius: 50%;
        padding: 5px 22px;
        background: #fff;
    }

        .slider .swiper-button-prev::after {
            color: #333333 !important;
        }

    .slider .swiper-button-next {
        border-radius: 50%;
        padding: 5px 22px;
        background: #fff;
    }

        .slider .swiper-button-next::after {
            color: #333333 !important;
        }

    .slider .swiper-button-next, .slider .swiper-button-prev {
        top: 50%; /* center on sides so the white nav pill no longer sits under the bottom-left pagination */
        transform: translateY(-50%);
        opacity: 0;
        transition: 0.3s;
    }

    .slider:hover .swiper-button-next {
        opacity: 1;
    }

    .slider:hover .swiper-button-prev {
        opacity: 1;
    }

#suggetMoment {
    height: 489px; /* matches .slider height so the two columns stay aligned */
}

    #suggetMoment .swiper-wrapper {
        height: 100%;
    }

    /* no card outline — the suggestion column sits flush beside the banner */
    #suggetMoment .product-box.pc-card {
        border: none;
    }

/* suggestion column progress bar */
.swiper-progress-bar {
    position: relative;
    top: 17.5%;
    width: 100%;
    display: block;
    z-index: 1;
    height: 2px;
}

    .swiper-progress-bar .slide_progress-bar {
        position: absolute;
        height: 2px;
        background: rgba(199, 199, 199, 0.3);
        width: auto;
        clear: both;
        opacity: 0;
        top: 0;
        left: 0;
        right: 0;
    }

        .swiper-progress-bar .slide_progress-bar:after {
            position: absolute;
            top: 0;
            left: 0;
            background: var(--main-color-one);
            height: 100%;
            width: 0;
            content: "";
        }

    .swiper-progress-bar.active .slide_progress-bar {
        opacity: 1;
    }

    .swiper-progress-bar.animate .slide_progress-bar:after {
        transition: width linear;
        transition-delay: unset;
        width: 100%;
        transition-duration: 3s;
    }

/* --- Main slider pagination ------------------------------------------------
   Vertical dashes inside a white panel pinned to the slider's bottom-left
   corner (Figma). Scoped to #homeSlider so other sliders keep the global
   pagination style. */
#homeSlider .swiper-pagination {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 18px;
    width: auto;
    height: auto;
    top: auto;
    bottom: 0;
    left: 0;
    right: auto;
    transform: none;
    z-index: 5;
    background: #fff;
    border-radius: 0; /* square corners */
    padding: 22px 24px;
}

    #homeSlider .swiper-pagination .swiper-pagination-bullet {
        width: 16px;
        height: 4px;
        margin: 0 !important;
        border-radius: 0px;
        background: #d9d9d9;
        opacity: 1;
        transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
    }

    #homeSlider .swiper-pagination .swiper-pagination-bullet-active {
        width: 27px;
        height: 5px;
        border-radius: 0px;
        background: var(--zino-green, #00ae5e);
    }

/* --- Main slider responsive -------------------------------------------------
   Below lg the columns stack and go full width; drop the fixed 489px height so
   the banner images keep their natural aspect ratio instead of letterboxing. */
@media (max-width: 991.98px) {
    .slider,
    .slider .swiper,
    .slider .swiper-wrapper,
    .slider .swiper-slide {
        height: auto;
    }

        .slider .swiper-slide img,
        .slider .swiper-slide video {
            height: auto;
            width: 100%;
            object-fit: contain;
        }

    #suggetMoment {
        height: auto;
    }

        #suggetMoment .swiper-wrapper {
            height: auto;
        }
}

@media (max-width: 575.98px) {
    /* compact bottom-left pagination panel on small phones */
    #homeSlider .swiper-pagination {
        gap: 8px;
        padding: 8px 10px;
    }

        #homeSlider .swiper-pagination .swiper-pagination-bullet {
            width: 10px;
            height: 3px;
        }

        #homeSlider .swiper-pagination .swiper-pagination-bullet-active {
            width: 18px;
            height: 3px;
        }
}

/* --- Category label type (base lives in style2.css; make it fluid here) ---- */
.category-item .cat-label {
    font-size: clamp(0.75rem, 0.188vw + 0.706rem, 0.875rem); /* 12 → 14px, fluid */
}

/* --- Smart AI suggestions ("پیشنهاد هوشمند زی‌نو") --------------------------
   Clean light section (Figma 611-8141). Replaces the old purple-gradient
   .ai-recommendation-section that used to live inline in Index.cshtml. */
.ai-suggest {
    background: #F0f0f0;
    padding: 50px 68px 72px;
}

/* .ai-suggest-header layout now lives in markup as Bootstrap utilities
   (d-flex justify-content-between align-items-end align-items-sm-start
   gap-2 gap-sm-3 mb-3) */

.ai-suggest-titles {
    min-width: 0;
}

.ai-suggest-title {
    overflow: hidden;
    color: var(--zino-text);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: normal;
}

.ai-suggest-spark {
    width: 32px;
    height: 42px;
    flex-shrink: 0;
}

.ai-suggest-sub {
    overflow: hidden;
    color: #939598;
    text-align: right;
    font-feature-settings: 'ss07' on;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.529rem, 0.238vw + 0.474rem, 0.6875rem); /* 8.47 → 11px, fluid */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.ai-suggest-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: clamp(0.6rem, 0.32vw + 0.525rem, 0.8125rem); /* 9.6 → 13px, fluid */
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .ai-suggest-all:hover {
        color: var(--zino-green, #00ae5e);
    }

    .ai-suggest-all i {
        font-size: 0.875rem;
    }

.ai-product-wrapper {
    height: 100%;
}

/* Real IRANYekan Bold (the file ships with the site but was never registered,
   so bold text fell back to faux-bold of the Regular face). Used for the
   festival card's heavy text so it matches the Figma "Yekan Bakh Bold" weight. */
@font-face {
    font-family: 'yekan-bold';
    src: url('../font/iran-yekan/iranyekanwebboldfanum.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

/* --- Sales festival card ("جشنواره‌های فروش") ------------------------------
   Figma 882-3306 redesign. Replaces the old purple-gradient .promotion-sidebar
   / .promotion-slide-wrapper that lived inline in Index.cshtml. Markup lives in
   Views/Shared/_Promotion.cshtml. */

/* slider shell + nav arrows */
.promotion-section {
    overflow-x: clip; /* contain megaphone bleed without page-wide horizontal scroll */
}

    .promotion-section .col-lg-3 {
        min-width: 0; /* prevent flex column from forcing page-wide overflow */
    }

.festival-slider {
    --festival-bleed: 46px;
    height: 545px;
    width: 100%; /* stay on the column box so the nav arrows land on the real edges */
    overflow: visible;
    min-width: 0;
}

#promotionSlider {
    height: 100%;
    /* only the inner swiper carries the bleed: it stretches left into the
       reserved strip so the megaphone sticks out of the card, while neighbour
       slides stay clipped by overflow:hidden */
    width: calc(100% + var(--festival-bleed));
    margin-left: calc(-1 * var(--festival-bleed));
    overflow: hidden;
}

    #promotionSlider .swiper-wrapper {
        height: 100%;
        align-items: stretch;
    }

    #promotionSlider .swiper-slide {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: stretch;
        flex-shrink: 0;
        padding-left: var(--festival-bleed);
        box-sizing: border-box;
        overflow: visible; /* allow illustration to extend past the white card */
    }

.festival-nav {
    color: #c2c2c2;
}

    .festival-nav::after {
        font-size: 1.25rem;
        font-weight: 700;
        color: #c2c2c2;
    }

    .festival-nav.swiper-button-prev {
        left: -30px;
    }

    .festival-nav.swiper-button-next {
        right: -30px;
    }

/* card */
.festival-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 18px 26px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 0;
    box-shadow: none;
    overflow: visible; /* megaphone must bleed past the left border per Figma */
    text-align: right;
}

/* header (right-aligned; icon is the first inline child of the title so in
   RTL it renders to the right of the text) */
.festival-head {
    text-align: right;
}

.festival-title {
    margin: 0;
    font-size: 1.375rem; /* Figma 882:3317 */
    font-weight: 800;
    line-height: 1.4;
    color: #2b2b2b;
}

.festival-head-icon {
    margin-left: 6px; /* gap to the text, which sits on the icon's left in RTL */
    font-size: 1.5rem;
    vertical-align: -3px;
    color: var(--zino-green, #00ae5e);
}

.festival-subtitle {
    display: block;
    margin: 4px 0 0;
    font-size: 0.875rem; /* Figma 882:3286 */
    color: #9e9e9e;
}

/* decorative megaphone illustration (Figma 882-3331 — horn bleeds past card edge) */
.festival-illustration {
    position: relative;
    margin: 4px 0 10px;
    min-height: 132px;
    overflow: visible;
    pointer-events: none;
}

.festival-mega {
    position: absolute;
    top: 0;
    left: calc(-1 * var(--festival-bleed)); /* fill the reserved bleed area */
    width: 272px;
    max-width: none;
    height: auto;
    margin: 0;
}

/* Compact, self-contained card up to 1500px. The bleeding-megaphone desktop
   layout (base rules) needs a wide column; the col-lg-3 column only gets there
   around 1500px, so below that — whether stacked on mobile or narrow in the
   2-col grid — use this centered, no-bleed form that fits any width. */
@media (max-width: 1499.98px) {
    .festival-slider {
        --festival-bleed: 0px;
        width: min(420px, 100%);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1rem;
    }

    #promotionSlider {
        --festival-bleed: 0px;
        width: 100%;
        margin-left: 0;
    }

    /* compact card: every part scales down on mobile */
    .festival-slider {
        height: 480px;
    }

    .festival-card {
        padding: 16px 14px 20px;
    }

    .festival-title {
        font-size: 1.0625rem;
    }

    .festival-head-icon {
        font-size: 1.1875rem;
        vertical-align: -2px;
    }

    .festival-subtitle {
        font-size: 0.75rem;
    }

    .festival-illustration {
        min-height: 118px;
        margin: 4px 0 8px;
    }

    .festival-mega {
        width: 200px;
    }

    /* nav arrows move inside the card below lg (desktop keeps them outside)
       and shrink to phone size */
    .festival-nav.swiper-button-prev {
        left: 6px;
    }

    .festival-nav.swiper-button-next {
        right: 6px;
    }

    .festival-nav.swiper-button-prev,
    .festival-nav.swiper-button-next {
        width: 24px;
        height: 32px;
        margin-top: -16px;
    }

    .festival-nav::after {
        font-size: 0.875rem;
    }

    /* "با خرید از برندهای:" — plain label, inset from the start edge together
       with the chips below it (mobile Figma) */
    .festival-block {
        margin-right: 12px;
        margin-top: 0px !important;
    }

    .festival-label {
        font-size: 0.75rem;
        margin-bottom: 6px;
    }

    .festival-chip {
        font-size: 0.8125rem;
        padding: 7px 4px;
    }

    .festival-brand-arrow {
        width: 18px;
        height: 18px;
        font-size: 0.8125rem;
    }

    /* condition / reward rows */
    .festival-row {
        min-height: 38px;
        padding: 6px 2px;
        gap: 14px;
    }

    .festival-row-label {
        font-size: 0.8125rem;
    }

    .festival-row-value {
        font-size: 0.9375rem;
    }

    .festival-row-value--accent {
        font-size: 1rem;
    }

    .festival-row-value--big {
        font-size: 1.75rem;
    }

    .festival-rules {
        margin-bottom: 12px;
    }

    /* countdown box */
    .festival-countdown {
        height: 60px;
        padding: 6px 12px 8px;
        border-radius: 10px; /* mobile Figma: soft corners */
    }

    .festival-card .festival-countdown .countdown {
        gap: 10px;
    }

    .festival-card .festival-countdown .countdown-container {
        width: 28px;
    }

        .festival-card .festival-countdown .countdown-container.minutes::before,
        .festival-card .festival-countdown .countdown-container.seconds::before {
            top: 4px;
            left: -8px;
            font-size: 1.125rem;
        }

        .festival-card .festival-countdown .countdown-container.days::before {
            width: 38px;
            height: 26px; /* match digit min-height — taller box covered «روز» */
            top: 0;
            border-radius: 0;
        }

        .festival-card .festival-countdown .countdown-container .countdown-value,
        .festival-card .festival-countdown .countdown-container .seconds-bottom,
        .festival-card .festival-countdown .countdown-container .minutes-bottom,
        .festival-card .festival-countdown .countdown-container .hours-bottom,
        .festival-card .festival-countdown .countdown-container .days-bottom {
            min-width: 26px;
            min-height: 26px;
            font-size: 1.125rem;
            line-height: 26px;
        }

        .festival-card .festival-countdown .countdown-container .countdown-heading {
            position: relative;
            z-index: 2;
            font-size: 0.5625rem;
            margin-top: 2px !important;
        }
}

/* eligible brands / groups */
.festival-block {
    margin-bottom: 12px;
    margin-top: 12px;
}

.festival-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.875rem; /* Figma 882:3297 */
    font-weight: 600;
    color: #6b7280;
}

/* brand pager (Figma arrows flanking the chip grid) */
.festival-brand-nav {
    position: relative;
}

.festival-brand-nav--paged {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .festival-brand-nav--paged .festival-chip-grid {
        flex: 1;
        min-width: 0;
    }

.festival-brand-arrow {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: #c2c2c2;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .festival-brand-arrow:hover:not(:disabled) {
        color: #6b7280;
    }

    .festival-brand-arrow:disabled {
        opacity: 0.35;
        cursor: default;
    }

.festival-chip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 12px;
}

.festival-chip-grid--two-rows .festival-chip:nth-child(n + 4) {
    border-top: 1px solid #e6e6e6;
    padding-top: 12px;
}

.festival-chip--hidden {
    display: none !important;
}

.festival-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    border-radius: 0;
    font-size: 0.9375rem; /* Figma 882:3288 */
    font-weight: 600;
    color: #4b5563;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

    /* thin vertical divider between columns (skip the first column) */
    .festival-chip:not(:nth-child(3n + 1))::before {
        content: "";
        position: absolute;
        inset-block: 3px;
        inset-inline-start: 0;
        width: 1px;
        background: #e6e6e6;
    }

    .festival-chip:hover,
    .festival-chip-grid .festival-chip:only-child {
        background: #f0f0f0;
        color: #2b2b2b;
        width: 90%;
    }

.festival-chip--wide {
    grid-column: 1 / -1;
}

.festival-product-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    border: 1px solid var(--zino-green, #00ae5e);
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--zino-green, #00ae5e);
    text-align: center;
    text-decoration: none;
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

    .festival-product-link:hover {
        background: rgba(0, 174, 94, 0.06);
        color: var(--zino-green, #00ae5e);
    }

/* fallback list for a few individual products */
.festival-product-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.festival-product-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: #f7f7f7;
    border-radius: 0;
}

.festival-product-name {
    min-width: 0;
    font-size: 0.78125rem;
    font-weight: 600;
    color: #4b5563;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .festival-product-name:hover {
        color: var(--zino-green, #00ae5e);
    }

.festival-add-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    background: var(--zino-green, #00ae5e);
    color: #fff;
    font-size: 0.9375rem;
}

.festival-rules {
    width: 100%;
    margin-top: auto; /* push the rules+countdown cluster to the bottom */
    margin-bottom: 18px; /* defined gap between the rules and the countdown */
}

/* condition / reward rows — short pairs stay centered; long text ellipsizes
   on both sides so label/value never paint over each other */
.festival-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 47px;
    padding: 9px 2px;
    box-sizing: border-box;
}

/* separator line between the rows */
.festival-rules .festival-row + .festival-row {
    border-top: 1px solid #ededed;
}

.festival-row-label {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 48%;
    font-size: 0.9375rem; /* Figma 882:3294 / 882:3287 */
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.festival-row-value {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 52%;
    font-size: 1.125rem; /* Figma 882:3298 number is 20px; trimmed for long amounts */
    font-weight: 600;
    color: #575756; /* Figma: value is grey, not near-black */
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.festival-row-value--accent {
    font-size: 1.1875rem;
    font-weight: 800;
    color: var(--zino-green, #00ae5e);
}

/* big green percentage (short text only) — Figma 882:3299 is 40px ExtraBold */
.festival-row-value--big {
    font-family: 'yekan-bold', var(--main-font), sans-serif;
    font-size: 2.375rem;
    line-height: 1.1;
}

/* countdown */
.festival-countdown {
    width: 327px;
    max-width: 100%;
    height: 105px;
    margin: 0 auto; /* sits just below the rules (which are pushed down) */
    padding: 12px 24px 14px; /* top trimmed so the label clears the bottom by ~29px (Figma) */
    box-sizing: border-box;
    background: #05af6b; /* Figma countdown box green */
    border-radius: 0;
}

.festival-card .festival-countdown .countdown {
    display: flex;
    direction: ltr;
    flex-direction: row-reverse; /* visual order: days, hours, minutes, seconds */
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
}

.festival-card .festival-countdown .countdown-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 48px;
    gap: 0;
    margin: 0 !important;
    padding: 0 !important;
}

    .festival-card .festival-countdown .countdown-container::before {
        content: none;
    }

    .festival-card .festival-countdown .countdown-container.minutes::before,
    .festival-card .festival-countdown .countdown-container.seconds::before {
        content: ":";
        position: absolute;
        top: 8px;
        left: -18px;
        color: #fff;
        font-size: 2.125rem;
        font-weight: 800;
        line-height: 1;
    }

    /* days tile sits apart; the highlight is a wide-short pill drawn BEHIND the
       digit (pseudo) so the column height — and therefore the label baseline —
       stays identical to the other units. Figma box is 64x43 (wider than tall). */
    .festival-card .festival-countdown .countdown-container.days {
        position: relative;
        margin-inline-end: 2px !important;
    }

        .festival-card .festival-countdown .countdown-container.days::before {
            content: "";
            position: absolute;
            top: 2px;
            left: 50%;
            width: 64px;
            height: 43px;
            transform: translateX(-50%);
            background: #a3d6b1;
            border-radius: 0px;
            z-index: 0;
        }

    .festival-card .festival-countdown .countdown-container .countdown-value,
    .festival-card .festival-countdown .countdown-container .seconds-bottom,
    .festival-card .festival-countdown .countdown-container .minutes-bottom,
    .festival-card .festival-countdown .countdown-container .hours-bottom,
    .festival-card .festival-countdown .countdown-container .days-bottom {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-width: 44px;
        min-height: 46px;
        padding: 0 !important;
        background: transparent !important;
        font-family: 'yekan-bold', var(--main-font), sans-serif; /* real bold, not faux */
        font-size: 2.0625rem; /* Figma 37.886px, trimmed a touch per request */
        font-weight: 700;
        line-height: 46px;
        color: #fff !important;
        text-align: center;
        border-radius: 0;
        box-shadow: none !important;
    }

    .festival-card .festival-countdown .countdown-container.days .countdown-value,
    .festival-card .festival-countdown .countdown-container.days .days-bottom {
        position: relative; /* above the highlight pill */
        z-index: 1;
        background: transparent !important;
        /* size inherited from the base digit rule → identical to other units */
    }

    .festival-card .festival-countdown .countdown-container .countdown-heading {
        display: block !important;
        position: relative;
        z-index: 2; /* above the days highlight pill */
        width: 100%;
        margin: 4px 0 0 !important;
        font-size: 0.7566875rem; /* Figma countdown labels */
        font-weight: 600;
        line-height: 1.175;
        color: #fff !important;
        text-align: center;
    }

/* --- Promotions listing page (Views/Home/Promotions.cshtml) -----------------
   Title + megaphone sit ABOVE the bordered cards shell (under site header).
   Megaphone bleeds down over the shell top edge — overflow must stay visible. */
.promotions-page {
    overflow: visible;
}

.promotions-page__banner {
    position: relative;
    z-index: 2;
    --festival-bleed: 46px;
    /* room on the left so the megaphone can stick out without being clipped
       by ancestors; title stays top-aligned with the megaphone horn */
    padding-left: var(--festival-bleed);
    padding-bottom: 0;
    overflow: visible;
}

.promotions-page__head {
    position: relative;
    z-index: 2;
    text-align: right;
    flex-shrink: 0;
    padding-top: 0;
    line-height: 1.4;
}

.promotions-page__illustration {
    position: relative;
    flex-shrink: 0;
    width: 220px;
    max-width: 42%;
    margin-bottom: -48px; /* overlap the shell top border */
    margin-left: calc(-1 * var(--festival-bleed));
    pointer-events: none;
    z-index: 3;
    overflow: visible;
}

    .promotions-page__illustration .festival-mega {
        position: static;
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
    }

.promotions-page__shell {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    /* Bootstrap px-5 = 3rem; --inset adds more on wide screens */
    padding-top: 28px;
    padding-bottom: 26px;
    background: #fff;
    border: 1px solid #ececec;
    overflow: visible;
}

@media (min-width: 1200px) {
    .promotions-page__shell--inset {
        padding-left: 4.5rem !important;  /* ~72px */
        padding-right: 4.5rem !important;
    }
}

@media (min-width: 1400px) {
    .promotions-page__shell--inset {
        padding-left: 6rem !important;  /* ~96px */
        padding-right: 6rem !important;
    }
}

.promotions-page__grid {
    position: relative;
    z-index: 2;
}

.festival-card--compact {
    width: 100%;
    height: 100%;
    min-height: 420px;
    padding: 20px 16px 18px;
    text-align: center;
}

.festival-head--card {
    text-align: center;
    margin-bottom: 12px;
}

.festival-subtitle--card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.55;
    color: #2b2b2b;
    text-align: center;
}

/* green-border brand chips (Figma listing card) */
.festival-card--compact .festival-block {
    text-align: right;
    margin-top: 8px;
    margin-bottom: 16px;
}

.festival-card--compact .festival-label {
    margin-bottom: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6b7280;
}

.festival-card--compact .festival-chip-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    grid-template-columns: none;
}

.festival-card--compact .festival-chip {
    flex: 0 0 auto;
    min-width: 5.5rem;
    padding: 8px 18px;
    border: 1px solid var(--zino-green, #00ae5e);
    color: var(--zino-green, #00ae5e);
    font-size: 0.875rem;
    font-weight: 700;
    background: transparent;
    width: auto;
}

    .festival-card--compact .festival-chip::before {
        display: none !important;
    }

    .festival-card--compact .festival-chip:hover,
    .festival-card--compact .festival-chip-grid .festival-chip:only-child {
        background: transparent;
        color: var(--zino-green, #00ae5e);
        width: auto;
    }

/* شرایط / جوایز — green labels, wrapping gray text */
.festival-card--compact .festival-rules--compact {
    margin-top: auto;
    margin-bottom: 14px;
    text-align: right;
}

.festival-card--compact .festival-row--compact {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    padding: 10px 2px;
}

.festival-card--compact .festival-rules .festival-row--compact + .festival-row--compact {
    border-top: 1px solid #ededed;
}

.festival-card--compact .festival-row-label--accent {
    flex: 0 0 auto;
    max-width: none;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--zino-green, #00ae5e);
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
}

.festival-card--compact .festival-row-value--wrap {
    flex: 0 1 auto;
    max-width: 72%;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.7;
    color: #575756;
    text-align: end; /* left side in RTL — opposite the green label */
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.festival-card--compact .festival-reward-line + .festival-reward-line {
    margin-top: 2px;
}

.festival-card--compact .festival-countdown {
    width: 100%;
    height: auto;
    min-height: 72px;
    padding: 8px 12px 10px;
}

.festival-card--compact .festival-countdown .countdown {
    gap: 12px;
}

.festival-card--compact .festival-countdown .countdown-container {
    width: 36px;
}

    .festival-card--compact .festival-countdown .countdown-container.minutes::before,
    .festival-card--compact .festival-countdown .countdown-container.seconds::before {
        content: ":";
        position: absolute;
        top: 4px;
        left: -10px;
        color: #fff;
        font-size: 1.375rem;
        font-weight: 800;
        line-height: 1;
    }

    .festival-card--compact .festival-countdown .countdown-container.days::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 48px;
        height: 34px; /* match compact digit min-height */
        transform: translateX(-50%);
        background: #a3d6b1;
        border-radius: 0;
        z-index: 0;
    }

    .festival-card--compact .festival-countdown .countdown-container .countdown-value,
    .festival-card--compact .festival-countdown .countdown-container .seconds-bottom,
    .festival-card--compact .festival-countdown .countdown-container .minutes-bottom,
    .festival-card--compact .festival-countdown .countdown-container .hours-bottom,
    .festival-card--compact .festival-countdown .countdown-container .days-bottom {
        min-width: 32px;
        min-height: 34px;
        font-size: 1.5rem;
        line-height: 34px;
    }

    .festival-card--compact .festival-countdown .countdown-container .countdown-heading {
        position: relative;
        z-index: 2;
        font-size: 0.625rem;
        margin-top: 4px !important;
    }

@media (max-width: 991.98px) {
    .promotions-page__banner {
        --festival-bleed: 0px;
        padding-left: 0;
        flex-wrap: wrap;
    }

    .promotions-page__illustration {
        width: min(180px, 48%);
        margin-bottom: -32px;
        margin-left: 0;
    }

    .promotions-page__shell {
        padding-top: 24px;
    }
}

@media (max-width: 575.98px) {
    .promotions-page__shell {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .promotions-page__illustration {
        width: min(140px, 44%);
        margin-bottom: -22px;
    }

    .festival-card--compact {
        min-height: 0;
    }

    .festival-card--compact .festival-countdown {
        min-height: 60px;
        padding: 6px 12px 8px;
    }

    .festival-card--compact .festival-countdown .countdown-container {
        width: 28px;
    }

        .festival-card--compact .festival-countdown .countdown-container.days {
            width: auto;
            min-width: 36px;
        }

        .festival-card--compact .festival-countdown .countdown-container.days::before {
            width: 44px;
            height: 26px; /* match mobile digit — was 34px and covered «روز» */
            top: 0;
        }

        .festival-card--compact .festival-countdown .countdown-container .countdown-value,
        .festival-card--compact .festival-countdown .countdown-container .seconds-bottom,
        .festival-card--compact .festival-countdown .countdown-container .minutes-bottom,
        .festival-card--compact .festival-countdown .countdown-container .hours-bottom,
        .festival-card--compact .festival-countdown .countdown-container .days-bottom {
            min-width: 26px;
            min-height: 26px;
            font-size: 1.125rem;
            line-height: 26px;
        }

        .festival-card--compact .festival-countdown .countdown-container .countdown-heading {
            position: relative;
            z-index: 2;
            margin-top: 4px !important;
        }
}

@media (max-width: 575.98px) {
    .ai-suggest {
        padding: 24px 16px 28px;
    }

    .ai-suggest-title {
        font-size: 1.0625rem;
    }
}

/* --- Section header (v2) ----------------------------------------------------
   Icon tile + stacked title/subtitle, matching the Figma "پرفروشترین محصولات"
   header (title #575756, 22px bold). Used on the .header-content card. */
.section-head-v2 .section-head-v2__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-left: 5px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* background: rgba(24, 157, 14, 0.1); */
    color: var(--main-color-three);
}

    .section-head-v2 .section-head-v2__icon i {
        font-size: 1.5rem;
        line-height: 1;
    }

.section-head-v2 .section-head-v2__title {
    color: #575756;
    font-size: clamp(0.916rem, 0.69vw + 0.754rem, 1.2rem); /* 14.65 → 22px, fluid */
    font-weight: 700;
    line-height: 1.5;
}

.section-head-v2 .section-head-v2__sub {
    color: #575756;
    text-align: right;
    font-size: clamp(0.529rem, 0.238vw + 0.474rem, 0.6875rem); /* 8.47 → 11px, fluid */
    font-style: normal;
    font-weight: 400;
    line-height: 2.18;
}

/* جدیدترین محصولات section — tinted (green radiance) background */
.product-slider.newest-products {
    background: linear-gradient(0deg, rgba(163, 214, 177, 0.70) 0%, rgba(163, 214, 177, 0.70) 100%), #F0F0F0;
    padding: 50px; /* gap from top of green background to the header icon */
}

    /* drop the card's top margin/padding so the icon sits exactly 50px from the top */
    .product-slider.newest-products .header-content {
        margin-top: 0;
        padding-top: 0;
    }

/* Product slider nav arrows (v2) — plain side chevrons that sit OUTSIDE the
   slider, like the promotion slider. The buttons live in .container-fluid
   (overflow visible) instead of the overflow:hidden .swiper, so they can
   stick out past the cards into the side whitespace. */
.product-slider .product-slider-swiper {
    padding-bottom: 0; /* no longer reserving room for bottom-centered arrows */
}

.product-slider .parent .container-fluid {
    position: relative; /* positioning context for the side arrows */
}

.product-slider .swiper-button-next,
.product-slider .swiper-button-prev {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    color: #c2c2c2;
}

/* RTL: next on the left, prev on the right.
   Keep arrows inside the container by default — negative offsets only fit
   when the 1470px container leaves side whitespace (see min-width:1470 rule). */
.product-slider .swiper-button-next {
    left: 6px;
    right: auto !important;
}

.product-slider .swiper-button-prev {
    right: 6px !important;
    left: auto;
}

    .product-slider .swiper-button-next::after,
    .product-slider .swiper-button-prev::after {
        font-size: 1.25rem;
        font-weight: 700;
        color: #c2c2c2;
        display: inline-block;
        transform: scaleX(-1); /* keep ‹ left / › right after swapping sides */
    }

/* decorative green mark left of the پربازدیدترین محصولات slider (Figma:
   14x21 shape, 114.75px left of the first card's edge). The card edge sits at
   the container's 12px padding, so left = 12 - (114.75 + 13.77). Vertical
   offset approximated from the design screenshot (no spec given). Only shown
   when the viewport leaves enough whitespace beside the 1470px container. */
.product-slider .mostview-deco {
    display: none;
    position: absolute;
    top: 74px;
    left: -116.5px;
    width: 13.77px;
    height: auto;
    pointer-events: none;
    user-select: none;
}

@media only screen and (min-width: 1720px) {
    .product-slider .mostview-deco {
        display: block;
    }
}

/* on wide screens there is whitespace beside the 1470px container — push the
   arrows fully outside the cards into that space */
@media only screen and (min-width: 1470px) {
    .product-slider .swiper-button-next {
        left: -34px;
    }

    .product-slider .swiper-button-prev {
        right: -34px !important;
    }
}

/* Two-horizontal banner — centered flex pair, each capped at Figma width (543px) */
.banner-two .row {
    justify-content: center;
    --bs-gutter-x: 84px; /* 84px space between the two banners (Figma, wide viewports) */
}

.banner-two .col-6,
.banner-two .col-lg-6 {
    flex: 0 1 543px;
    width: 100%;
    max-width: 543px;
    text-align: center;
}

.banner-two img,
.banner-two video {
    width: 100%;
    max-width: 543px;
}

.banner-two {
    margin-bottom: 95px;
    margin-top: 60px;
    overflow-x: clip; /* row negative margins from a large gutter must not widen the page */
}

/* Below the 1470px capped container, container-fluid is full-bleed with only
   12px side padding — an 84px gutter (-42px margins) overflows by ~30px/side
   and, in RTL, shifts the whole page (gap on the right, hamburger clipped). */
@media (max-width: 1469.98px) {
    .banner-two .row {
        --bs-gutter-x: 24px; /* = 2 × container-fluid padding; no horizontal scroll */
    }
}

/* Three-horizontal banner — centered flex row, each banner capped at 348px,
   50px between banners, 100px top/bottom section spacing */
.banner-three {
    padding-top: 90px;
    padding-bottom: 90px;
    overflow-x: clip; /* the decorative mark bleeds into the side whitespace */
}

    /* decorative green marks floating in the whitespace around the cards */
    .banner-three .banner-three__col--deco {
        position: relative;
    }

    .banner-three .banner-three__deco {
        position: absolute;
        height: auto;
        max-width: none;
        pointer-events: none;
        user-select: none;
    }

    /* up-left of the ظروف غذا card (Figma: 36x21 shape, 140.6px left of the
       card edge, 36.75px above the card top) */
    .banner-three .banner-three__deco--zarf {
        top: -57.5px; /* 36.75 gap + 20.92 shape height */
        left: -176px; /* 140.6 gap + 35.37 shape width */
        width: 35.37px;
    }

    /* right of the کره جغرافیایی card (Figma: 49x15 shape, 172.15px right of
       the card edge, bottom-aligned with the card's bottom) */
    .banner-three .banner-three__deco--kore {
        bottom: 0;
        right: -221.3px; /* 172.15 gap + 49.14 shape width */
        width: 49.14px;
    }

/* below xl the side whitespace disappears — the marks would hang off-canvas */
@media (max-width: 1199.98px) {
    .banner-three .banner-three__deco {
        display: none;
    }
}

.banner-three .row {
    justify-content: center;
    gap: 50px;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.banner-three .col-sm-4 {
    flex: 0 1 348px;
    width: 100%;
    max-width: 348px;
    padding: 0;
    text-align: center;
}

.banner-three img,
.banner-three video {
    width: 100%;
    max-width: 348px;
}

/* Static "category" card (Figma 611-8142): gray panel, RTL text on the left,
   product image overflowing on the right, square green button. */
.geo-card {
    position: relative;
    display: block;
    height: 269px;
    background: #ebebeb;
    overflow: visible; /* let the image pop above/below the gray panel */
    text-decoration: none;
    transition: box-shadow .25s ease;
}

    /* green bar (223 x 19) tucked BEHIND the card; on hover it slides down so
       half of its height pokes out below the card */
    .geo-card::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 223px;
        max-width: 100%;
        height: 19px;
        background: var(--zino-green);
        z-index: -1; /* hidden behind the gray panel until it slides out */
        transition: bottom .25s ease;
    }

    .geo-card:hover {
        box-shadow: 22px 26px 48px rgba(0, 0, 0, 0.22); /* stronger, toward right & bottom */
    }

        .geo-card:hover::after {
            bottom: -9.5px; /* half the 19px height sticks out under the card */
        }

.geo-card__img {
    position: absolute;
    top: 50%;
    right: -40px;
    width: auto !important;
    max-width: 58% !important;
    height: 118%; /* overflow the panel top & bottom like the design */
    object-fit: contain;
    transform: translateY(-50%);
    pointer-events: none;
}

.geo-card__content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 56%;
    padding: 0 22px 24px; /* button sits 24px from the card bottom */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* push text to the right edge (toward center) */
    justify-content: flex-end;
    text-align: right;
}

.geo-card__pre {
    color: #939598;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.6;
}

.geo-card__title {
    margin: 2px 0 6px;
    color: #232323;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.geo-card__sub {
    color: #939598;
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.6;
}

.geo-card__btn {
    margin-top: 16px;
    width: 34.5px;
    height: 22.5px;
    padding: 0;
    background: var(--zino-green); /* same fill before & after hover */
    /* trapezoid shape (slanted left edge) like .fv2-brand-nav */
    clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #FFF;
    text-align: center;
    font-size: 0.580875rem;
    font-weight: 700;
    line-height: normal;
    transition: width .25s ease, height .25s ease;
}

    .geo-card__btn i {
        font-size: 0.580875rem;
        line-height: 1;
        color: #FFF;
    }

/* "مشاهده" label is hidden until hover, then it expands */
.geo-card__btn-text {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: max-width .25s ease, opacity .2s ease;
}

.geo-card:hover .geo-card__btn {
    width: 77px;
    height: 22.5px;
}

.geo-card:hover .geo-card__btn-text {
    max-width: 60px;
    opacity: 1;
}

@media only screen and (max-width: 575.98px) {
    .section-head-v2 .section-head-v2__icon {
        width: 40px;
        height: 40px;
        margin-left: 10px;
    }

        .section-head-v2 .section-head-v2__icon i {
            font-size: 1.25rem;
        }
}

/* decorative green mark right of the همکاران ما header icon (Figma: 36x21
   shape, 110.91px right of the bell icon, vertically centered on it). It lives
   in the whitespace beside the 1470px container, so it only shows on wide
   viewports — same rule as .mostview-deco. */
.partners-section .partners-head-anchor {
    position: relative;
}

.partners-section .partners-head-deco {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -146.28px; /* 110.91 gap + 35.37 shape width */
    width: 35.37px;
    height: auto;
    pointer-events: none;
    user-select: none;
}

@media only screen and (min-width: 1720px) {
    .partners-section .partners-head-deco {
        display: block;
    }
}

/* ===== همکاران ما — partner brand grid =====
   Equal cells separated by thin vertical dividers, grayscale logos that
   light up on hover, and a right inset so the section title reads first. */
.partners-section .partners-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* mobile design: 6 logos per row */
    row-gap: 28px;
    align-items: stretch;
    padding-inline-start: 40px; /* inset from the right (RTL) so the title sits ahead */
}

.partners-section .partners-grid__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px; /* match the 88.38px square cell in Figma */
    padding: 10px;
}

    /* short centered vertical divider on the left of each cell (RTL),
       58px tall to match Figma — not a full-height border */
    .partners-section .partners-grid__item::after {
        content: "";
        position: absolute;
        inset-inline-end: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 58px; /* Figma divider 57.959px */
        background-color: #C3C3C3;
    }

    /* drop the divider on the last cell of each row */
    .partners-section .partners-grid__item:nth-child(6n)::after {
        display: none;
    }

.partners-section .partners-grid__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.partners-section .partners-grid__item img {
    width: 100%;
    height: 100%;
    max-height: 88px; /* 1:1 square logo, matching Figma */
    aspect-ratio: 1 / 1;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.partners-section .partners-grid__item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

@media (min-width: 768px) {
    .partners-section .partners-grid {
        grid-template-columns: repeat(7, 1fr);
    }

    /* reset the mobile (6-col) divider rule, then drop it per 7-col row */
    .partners-section .partners-grid__item:nth-child(6n)::after {
        display: block;
    }

    .partners-section .partners-grid__item:nth-child(7n)::after {
        display: none;
    }
}

@media (min-width: 1200px) {
    .partners-section .partners-grid {
        grid-template-columns: repeat(12, 1fr);
        padding-inline-start: 60px;
    }

    /* reset the 7-col divider rule, then drop it per 12-col row */
    .partners-section .partners-grid__item:nth-child(7n)::after {
        display: block;
    }

    .partners-section .partners-grid__item:nth-child(12n)::after {
        display: none;
    }
}

/* ===== آمار زی‌نو — key stats =====
   Green panel (notched on the left) with three icon stats on the right, and a
   delivery truck riding a green road line on the left. */
.stats-section {
    overflow-x: clip;
    margin-top: 123px; /* gap from the section above */
}

    .stats-section .stats {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 7px; /* distance between the road line and the green box */
    }

    /* green panel; the left corner is cut out as a trapezoidal notch */
    .stats-section .stats__box {
        flex: 0 0 866.966px;
        min-height: 220.445px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 24px 16px;
        background: var(--zino-green);
        clip-path: polygon(45px 0, 100% 0, 100% 100%, 0 100%, 0 94px, 45px 92px);
    }

    .stats-section .stats__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        color: #fff;
        flex: 1 1 0;
        min-width: 0;
    }

    .stats-section .stats__icon {
        font-size: 3rem;
        line-height: 1;
        color: #fff;
    }

    .stats-section .stats__num {
        margin: 0;
        color: #fff;
        font-size: clamp(0.75rem, 0.75vw + 0.574rem, 1.25rem); /* 12 → 20px, fluid */
        font-weight: 800;
        line-height: 44.591px; /* Figma vertical rhythm */
    }

    .stats-section .stats__desc {
        margin: 0;
        max-width: 200px;
        color: #fff;
        text-align: center;
        font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem); /* 9 → 14px, fluid */
        font-weight: 400;
        line-height: normal;
    }

    /* truck on a green road line, filling the space to the left of the panel */
    .stats-section .stats__truck {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .stats-section .stats__truck-img {
        position: relative;
        z-index: 1; /* keep the truck above the road line */
        width: 290px;
        max-width: 70%;
        height: auto;
        display: block;
    }

    /* road pinned to the bottom-right of the truck area, so its bottom edge sits
   exactly on the truck's bottom (lowest point of the car) and its right end is
   7px (the .stats gap) from the green box */
    .stats-section .stats__road {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        max-width: 610px;
        height: auto;
    }

@media (max-width: 991.98px) {
    .stats-section .stats {
        flex-direction: column;
        gap: 32px;
    }

    .stats-section .stats__box {
        flex: 0 0 auto;
        width: 100%;
        max-width: 866.966px;
    }

    .stats-section .stats__truck {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    /* Figma mobile: the three stats stay side by side in the notched green
       panel; the truck/road illustration is dropped entirely */
    .stats-section {
        margin-top: 48px;
    }

        .stats-section .stats {
            gap: 0;
        }

        .stats-section .stats__truck {
            display: none;
        }

        .stats-section .stats__box {
            flex-direction: row;
            align-items: flex-start;
            gap: 8px;
            padding: 28px 10px 24px;
            min-height: 0;
            clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%, 0 58px, 28px 56px);
        }

        .stats-section .stats__icon {
            font-size: 2.125rem;
        }

        .stats-section .stats__item {
            align-items: flex-start;
            text-align: right !important;
        }

        .stats-section .stats__num {
            line-height: 2.2; /* font-size set on the base rule */
        }

        .stats-section .stats__desc {
            max-width: 85px;
            /* the base rule centers the <p> itself, so inheriting from
           .stats__item can never apply — override it directly */
            text-align: right;
        }
}

/* keep the normal full-width container (right edge stays aligned with همکاران ما),
   and only cap the inner content to the Figma frame width (1223.5px). As a normal
   RTL block it stays glued to the right, dropping the extra space on the left. */
.about-section .about-zino,
.testimonials-section .testimonials {
    max-width: 1223.5px;
    margin-inline: auto;
}

/* ===== درباره زی‌نو — brand story =====
   LAYOUT (flex row, wrap, gaps, alignment, the mobile re-flow) is all done with
   Bootstrap grid utilities in the markup — see Index.cshtml. The CSS below only
   carries what utilities can't: fluid type, image/pill sizing, the design
   whitespace, the two decorative SVGs, and the highlighter ribbon. */
.about-section {
    overflow-x: clip; /* marker / curve can bleed; never spawn a horizontal scrollbar */
    margin-top: var(--zino-section-gap); /* 64 → 156px, fluid */
}

    /* the one piece of "design whitespace" worth keeping — a single fluid value
   for the pen↔text gap, instead of the old 107.5/40/22px per-breakpoint set */
    .about-section .about-zino__marker {
        margin-inline-end: clamp(40px, 6vw, 96px);
    }

        .about-section .about-zino__marker img {
            display: block;
            width: clamp(76px, 13vw, 188.87px); /* Figma mobile 76 → desktop 189 */
            height: auto;
        }

    .about-section .about-zino__title {
        color: var(--zino-text);
        font-feature-settings: 'ss07' on;
        font-size: clamp(0.75rem, 0.75vw + 0.574rem, 1.25rem); /* 12 → 20px, fluid */
        font-weight: 600;
        line-height: normal;
    }

    .about-section .about-zino__text {
        color: var(--zino-text);
        font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem); /* 9 → 14px, fluid */
        font-weight: 400;
        line-height: 2; /* airy spacing for Persian */
    }

    .about-section .about-zino__more {
        position: relative; /* anchor for the decorative mark */
    }

        .about-section .about-zino__more .fv2-brand-nav {
            width: clamp(16.435px, 3.1vw, 44.603px); /* mobile → desktop pill */
            height: clamp(10.756px, 2vw, 29.192px);
        }

    .about-section .about-zino__more-text {
        color: var(--zino-text, #5b5b5b);
        font-size: clamp(8.861px, 0.9vw, 13px);
        font-weight: 600;
        white-space: nowrap;
        transition: color 0.2s ease;
    }

    .about-section .about-zino__more:hover .about-zino__more-text {
        color: var(--zino-green, #00ae5e);
    }

/* slanted green "highlighter" ribbon, reusable in flowing text */
.zino-highlight {
    display: inline-block;
    padding: 1px 8px;
    background: var(--zino-green-light, #bfe3c9);
    color: var(--zino-text, #5b5b5b);
    line-height: inherit;
    clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%);
}

/* --- decorative SVGs: the genuine exceptions, hand-placed -------------------
   green mark floating up-left of the pill (desktop only) */
.about-section .about-zino__deco {
    position: absolute;
    top: -27.96px;
    right: calc(50% + 177.27px);
    width: 49.14px;
    height: auto;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 1199.98px) {
    .about-section .about-zino__deco {
        display: none; /* no room left of the pill on narrow screens */
    }
}

/* mobile-only green swoosh (Vector-mobile.svg) sweeping toward the testimonials */
.about-section .about-zino__curve {
    display: none;
}

@media (max-width:550px) {
    .about-section .about-zino__curve {
        display: block;
        position: absolute;
        z-index: 0;
        bottom: -182px;
        inset-inline-start: 72px;
        width: 322px;
        height: auto;
        pointer-events: none;
        user-select: none;
    }
}

@media (max-width: 767.98px) {
    /* clamp the story to ~10 lines; the rest lives behind "ادامه داستان" */
    .about-section .about-zino__text {
        line-height: normal;
        text-align: justify;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 10;
        overflow: hidden;
    }

    /* keep pen + story above the decorative curve */
    .about-section .about-zino__marker,
    .about-section .about-zino__content {
        position: relative;
        z-index: 1;
    }

    .about-section .about-zino__marker {
        opacity: 0.9;
    }

    /* gentler slant + smaller icon for the small mobile pill */
    .about-section .about-zino__more .fv2-brand-nav::before {
        clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%);
    }

    .about-section .about-zino__more .fv2-brand-nav .fv2-brand-nav-icon {
        font-size: 0.4375rem !important;
        margin-left: 0;
    }

    .about-section .about-zino__more-text {
        font-weight: 700;
    }
}

/* ===== از زبان شما — customer testimonials =====
   Grey rounded panel with three video testimonial cards, a floating green
   comment bubble, decorative green swooshes, and a slanted "view all" pill. */

/* clip horizontal bleed (bubble / decorative curve) so they never create a
   horizontal page scrollbar; vertical bleed stays visible (clip, not hidden) */
.testimonials-section {
    overflow-x: clip;
    margin-bottom: 100px; /* gap from the "همکاران ما" section below */
    margin-top: 102px;
}

    .testimonials-section .testimonials {
        position: relative;
        display: flex;
        align-items: center;
        gap: 24px;
    }

    /* decorative green curves sitting behind the panel */
    .testimonials-section .testimonials__deco {
        position: absolute;
        z-index: 0;
        pointer-events: none;
        user-select: none;
    }

    .testimonials-section .testimonials__deco--curve {
        bottom: -59px;
        right: 19%;
        width: 657px;
        height: 465px;
    }



    .testimonials-section .testimonials__deco--marker {
        bottom: -90px;
        inset-inline-start: 18%;
        width: 150px;
        height: auto;
    }

    /* grey panel holding the cards */
    .testimonials-section .testimonials__box {
        position: relative;
        z-index: 1;
        flex: 1 1 auto;
        min-width: 0;
        background: #ebebeb;
        padding: 36px 48px;
    }

    /* green comment bubble floating over the top-right corner of the panel */
    .testimonials-section .testimonials__bubble {
        position: absolute;
        top: -34px;
        left: -32px;
        width: 96px;
        height: auto;
        z-index: 2;
    }

    /* cards row */
    .testimonials-section .testimonials__grid {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .testimonials-section .testimonial-card {
        display: flex;
        align-items: end;
        gap: 21px;
        flex: 1 1 0;
        min-width: 0;
    }

    .testimonials-section .testimonial-card__info {
        text-align: right;
        min-width: 0;
    }

    .testimonials-section .testimonial-card__name {
        color: var(--zino-text, #5b5b5b);
        font-size: clamp(0.75rem, 0.188vw + 0.706rem, 0.875rem); /* 12 → 14px, fluid */
        font-weight: 700;
        line-height: 24px;
    }

    .testimonials-section .testimonial-card__role {
        color: #939598;
        font-size: clamp(0.529rem, 0.238vw + 0.474rem, 0.6875rem); /* 8.47 → 11px, fluid */
        font-weight: 400;
        line-height: 20px;
    }

    .testimonials-section .testimonial-card__media {
        position: relative;
        flex-shrink: 0;
    }

    .testimonials-section .testimonial-card__photo {
        width: 120px;
        height: auto;
        object-fit: cover;
        display: block;
    }

    /* round green play button overlapping the photo toward the text (RTL) */
    .testimonials-section .testimonial-card__play {
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        background: var(--zino-green, #00ae5e);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: background 0.2s ease;
    }

        .testimonials-section .testimonial-card__play:hover {
            background: var(--zino-green-hover, #009952);
        }

        .testimonials-section .testimonial-card__play i {
            font-size: 1.125rem;
            line-height: 1;
        }

    /* "مشاهده همه نظرات" — stacked pill + label on the far left */
    .testimonials-section .testimonials__all {
        z-index: 1;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 8px;
        text-decoration: none;
    }

        .testimonials-section .testimonials__all .fv2-brand-nav {
            width: 44.603px;
            height: 29.192px;
        }

    .testimonials-section .testimonials__all-text {
        color: var(--zino-text, #5b5b5b);
        font-size: clamp(0.6rem, 0.32vw + 0.525rem, 0.8125rem); /* 9.6 → 13px, fluid */
        font-weight: 600;
        white-space: nowrap;
        transition: color 0.2s ease;
    }

    .testimonials-section .testimonials__all:hover .testimonials__all-text {
        color: var(--zino-green, #00ae5e);
    }

/* stack the cards on smaller screens */
@media (max-width: 991.98px) {
    .testimonials-section .testimonials__grid {
        flex-wrap: wrap;
    }

    .testimonials-section .testimonial-card {
        flex-basis: 45%;
    }

    .testimonials-section .testimonials__deco {
        display: none;
    }
}

@media (max-width: 575.98px) {
    /* Figma mobile: three photo-cards side by side, play/name/role stacked
       under each photo, bubble at the bottom-left corner of the panel,
       and "مشاهده همه نظرات" raised up beside the section header */
    .testimonials-section {
        margin-top: 56px;
        margin-bottom: 64px;
    }

        .testimonials-section .testimonials {
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }

        .testimonials-section .testimonials__box {
            width: 356px;
            max-width: 100%;
            height: 227px;
            box-sizing: border-box;
            margin-inline: auto;
            padding: 20px 12px 24px;
        }

        .testimonials-section .testimonials__bubble {
            top: auto;
            bottom: -20px;
            left: -18px;
            width: 46px;
        }

        .testimonials-section .testimonials__grid {
            flex-wrap: nowrap;
            gap: 8px;
            align-items: flex-start;
        }

        .testimonials-section .testimonial-card {
            flex-direction: column;
            align-items: flex-start; /* RTL: flush photo + copy to the right edge */
            gap: 6px;
            flex-basis: 0;
        }

        .testimonials-section .testimonial-card__media {
            width: auto;
        }

        .testimonials-section .testimonial-card__photo {
            width: 93.59px;
            height: 91.812px;
            aspect-ratio: 93.59 / 91.81;
            object-fit: cover;
            object-position: top;
        }

        /* play → name → role, stacked under the photo — all right-aligned (RTL) */
        .testimonials-section .testimonial-card__info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            align-self: stretch;
            text-align: right;
            gap: 4px;
            width: 100%;
        }

        .testimonials-section .testimonial-card__play {
            transform: none;
            width: 22px;
            height: 22px;
            flex-shrink: 0;
            align-self: flex-start;
        }

            .testimonials-section .testimonial-card__play i {
                font-size: 0.8125rem;
            }

        .testimonials-section .testimonial-card__name {
            color: var(--zino-text);
            text-align: right;
            align-self: stretch;
            font-family: 'yekan-bold', var(--main-font), sans-serif;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            background: none;
            padding: 0;
            clip-path: none;
            white-space: nowrap;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .testimonials-section .testimonial-card__role {
            width: 94px;
            height: 41px;
            color: var(--zino-text);
            text-align: right;
            align-self: flex-start;
            font-family: var(--main-font), sans-serif;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            overflow: hidden;
        }

        /* raise the link into the free space left of the section header */
        .testimonials-section .testimonials__all {
            position: absolute;
            top: -52px;
            left: 40px;
            flex-direction: row-reverse;
            align-items: center;
            gap: 6px;
        }

            .testimonials-section .testimonials__all .fv2-brand-nav {
                width: 20px;
                height: 13px;
            }

                .testimonials-section .testimonials__all .fv2-brand-nav::before {
                    clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%);
                }

                .testimonials-section .testimonials__all .fv2-brand-nav .fv2-brand-nav-icon {
                    font-size: 0.5rem !important;
                    margin-left: 0;
                }

        .testimonials-section .testimonials__all-text {
            color: #706f6f;
            text-align: center;
            font-family: 'yekan-bold', var(--main-font), sans-serif;
            font-size: 0.6145625rem;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }
}

/* ============================================================
   Homepage mobile view (Figma 1130-17423 / 1130-17797)
   Page-level responsive overrides for the v2 homepage sections.
   ============================================================ */

/* --- Suggestion card under the slider: horizontal compact layout ----------
   Below lg the suggestion column drops under the banner slider; the design
   shows it as one wide card — image on the right, text/prices on the left,
   CTA row at the bottom-left. */
@media (max-width: 991.98px) {
    /* the slide progress line only reads on the tall desktop column */
    #suggetMoment .swiper-progress-bar {
        display: none;
    }

    /* equal-height slides: every card fills the slide (sized by the tallest),
       with a min-height floor so hidden elements (notes / 2nd price / badges)
       never change the slider height between slides */
    #suggetMoment .swiper-slide > .pc-card {
        flex: 1 1 auto;
    }

    #suggetMoment .product-box.pc-card {
        --pc-card-height: auto;
        height: auto;
        min-height: 192px;
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr); /* col 1 = right in RTL: image */
        grid-template-rows: auto 1fr auto; /* slack goes to the middle; buy band sticks to the bottom */
        column-gap: 14px;
        align-items: start;
        padding: 14px;
    }

    #suggetMoment .pc-card .pc-link {
        display: contents; /* promote link children to the card grid */
    }

    #suggetMoment .pc-card .pc-top {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 0;
    }

    #suggetMoment .pc-card .pc-image {
        grid-column: 1;
        grid-row: 1 / span 3; /* full-height right column */
        align-self: center; /* image vertically centered in it */
        margin: 0;
    }

    #suggetMoment .product-box.pc-card .product-image {
        height: 118px;
    }

    #suggetMoment .pc-card .pc-info {
        grid-column: 2;
        grid-row: 2;
        margin-top: 4px;
        min-height: 0;
    }

    #suggetMoment .pc-card .pc-name {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Bottom band inside the left column: CTA buttons at the far left,
       prices packed right beside them */
    #suggetMoment .pc-card .pc-buy {
        grid-column: 2;
        grid-row: 3;
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        justify-content: space-between; /* RTL: pack the row to the physical left */
        gap: 8px 12px;
        padding-top: 10px;
    }

    #suggetMoment .pc-card .pc-price {
        flex: 0 1 auto;
        min-width: 0;
        min-height: 0;
        margin-bottom: 0;
    }

    #suggetMoment .pc-card .pc-actions {
        flex: 0 0 auto;
        gap: 6px;
    }

    /* price rows: label chip and amount sit adjacent (no space-between scatter) */
    #suggetMoment .pc-card .pc-price-row {
        justify-content: flex-start;
        gap: 6px;
        margin-bottom: 0;
    }

    /* compact prices + buttons so they always share one row */
    #suggetMoment .pc-card .pc-amount {
        font-size: 0.8125rem;
    }

    #suggetMoment .pc-card .pc-price-row--secondary .pc-amount {
        font-size: 0.6875rem;
    }

    #suggetMoment .pc-card .pc-tag {
        font-size: 0.625rem;
        padding: 2px 8px;
    }

    #suggetMoment .pc-card .pc-tag--cash {
        padding-right: 12px;
    }

    #suggetMoment .pc-card .pc-unit {
        font-size: 0.625rem;
        margin-bottom: 2px;
    }

    #suggetMoment .pc-card .pc-cart-btn {
        min-width: 44px;
        min-height: 30px;
        padding: 4px 8px 4px 12px;
    }

    #suggetMoment .pc-card .pc-similar {
        padding: 3px 6px;
    }

    #suggetMoment .pc-card .pc-notes {
        flex-basis: 100%;
        order: 3; /* drop below the price/CTA row */
        min-height: 0;
        margin-bottom: 0;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    /* narrower image column + padding so the price/CTA row fits on 360px phones */
    #suggetMoment .product-box.pc-card {
        grid-template-columns: 96px minmax(0, 1fr);
        padding: 12px;
    }

        #suggetMoment .product-box.pc-card .product-image {
            height: 96px;
        }
}

/* --- AI suggestions: horizontal swipe row instead of stacked cards -------- */
@media (max-width: 767.98px) {
    .ai-suggest-products .row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .ai-suggest-products .row::-webkit-scrollbar {
            display: none;
        }

        .ai-suggest-products .row > [class*="col-"] {
            flex: 0 0 46%;
            max-width: 46%;
            scroll-snap-align: start;
        }

    /* phones: bigger cards (~1.6 per view) so titles and prices breathe */
    @media (max-width: 575.98px) {
        .ai-suggest-products .row > [class*="col-"] {
            flex: 0 0 62%;
            max-width: 62%;
        }
    }

    /* product slider chevrons sit on top of the cards on narrow screens —
       the design relies on touch swiping instead */
    .product-slider .swiper-button-next,
    .product-slider .swiper-button-prev {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .main-slider {
        margin-top: 12px;
    }

    /* category grid: 4 per row with smaller icons and labels */
    .category-item {
        padding: 10px 2px;
    }

        .category-item .cat-icon {
            height: 38px;
            margin-bottom: 8px;
        }

        .category-item .cat-label {
            font-size: 0.75rem;
        }

        .category-item::before {
            top: 10px;
            height: 48px;
        }

    /* two-horizontal banners stack full width */
    .banner-two {
        margin-top: 24px;
        margin-bottom: 40px;
    }

        .banner-two .row {
            --bs-gutter-x: 0;
            --bs-gutter-y: 14px;
        }

        .banner-two .col-6,
        .banner-two .col-lg-6 {
            flex: 0 0 100%;
            max-width: 100%;
        }

    /* جدیدترین محصولات: slimmer green band */
    .product-slider.newest-products {
        padding: 24px 0 28px;
    }

    /* geo cards: three small cards in one row, same arrangement as desktop/Figma
       (image right, right-aligned text on the left, green btn bottom-left) */
    .banner-three {
        padding-top: 32px;
        padding-bottom: 32px;
    }

        .banner-three .row {
            flex-wrap: nowrap;
            gap: 8px;
        }

        .banner-three .col-sm-4 {
            flex: 1 1 0;
            min-width: 0;
        }

        /* mobile Figma: the marks reappear, each above/below the opposite
           card from where their <img> lives, so both cross two cols + two
           8px row gaps. marked2: 27x16, ~12px above the کره جغرافیایی card. */
        .banner-three .banner-three__deco--zarf {
            display: block;
            top: -28px; /* 16px shape + ~12px gap above the card */
            bottom: auto;
            left: calc(225% + 16px);
            right: auto;
            width: 27px;
        }

        /* marked1: 47x14.8, ~25px below the ظروف غذا card, ~17% in from its
           left edge (Figma 60.49px on a full-width card) */
        .banner-three .banner-three__deco--kore {
            display: block;
            top: calc(100% + 25px);
            bottom: auto;
            left: calc(-183% - 16px);
            right: auto;
            width: 47px;
        }

    .geo-card {
        height: 108px;
    }

        .geo-card::after {
            width: 70%;
            height: 12px;
        }

        .geo-card:hover::after {
            bottom: -6px;
        }

    .geo-card__img {
        right: -8px;
        left: auto;
        max-width: 52% !important;
        height: 110%; /* pop slightly past the panel like the desktop design */
    }

    .geo-card__content {
        left: 0;
        right: auto;
        width: 54%; /* no overlap with the 44% image column */
        padding: 10px 6px 8px 8px;
        align-items: flex-start; /* right-aligned text (RTL inline-start) */
        justify-content: flex-start;
    }

    .geo-card__pre {
        font-size: 0.5625rem;
        line-height: 1.4;
    }

    .geo-card__title {
        margin: 1px 0 2px;
        font-size: 0.6875rem;
        line-height: 1.4;
        white-space: normal;
    }

    .geo-card__sub {
        font-size: 0.5rem;
        line-height: 1.5;
    }

    .geo-card__btn {
        margin-top: auto;
        align-self: flex-end; /* bottom-left corner (RTL inline-end) */
        width: 23px;
        height: 15px;
    }

        .geo-card__btn i {
            font-size: 0.5rem;
        }

    /* section headers: slightly smaller, matching the mobile type scale;
       drop the .p-3 padding on phones (utility uses !important, so match it) */
    .header-content.section-head-v2 {
        padding: 0 !important;
    }

    /* small inset — only the lower-page sections (not product sliders) */
    .about-section > .container-fluid:first-child,
    .testimonials-section > .container-fluid:first-child,
    .partners-section > .container-fluid:first-child {
        padding-inline-start: 16px !important;
    }

    /* legacy responsive.css adds a 10px bottom margin to the title on phones;
       extra class keeps this winning regardless of stylesheet order */
    .header-content.section-head-v2 .title {
        margin-bottom: 0;
    }

    .section-head-v2 .section-head-v2__text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .section-head-v2 .section-head-v2__title {
        color: #575756;
        text-align: right;
        font-family: 'yekan-bold', var(--main-font), sans-serif;
        /* font-size set on the base rule */
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .section-head-v2 .section-head-v2__sub {
        color: #575756;
        text-align: right;
        font-family: var(--main-font), sans-serif;
        /* font-size set on the base rule */
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    /* partner logo cells: 6-up needs tighter cells and shorter dividers */
    .partners-section .partners-grid {
        row-gap: 18px;
        padding-inline-start: 0;
    }

    .partners-section .partners-grid__item {
        min-height: 56px;
        padding: 4px;
    }

        .partners-section .partners-grid__item::after {
            height: 32px;
        }

        .partners-section .partners-grid__item img {
            width: 44.019px;
            height: 44.019px;
            max-height: none;
            aspect-ratio: 1 / 1;
        }
}

/* ===== جدیدترین موجودی‌ها — LatestStocks ===== */
.latest-stocks-icon {
    font-size: 2rem; /* 32px */
    line-height: 1;
    color: var(--zino-text); /* #5b5b5b */
}

.latest-stocks-title {
    color: var(--zino-text); /* #575756 ≈ token */
    font-size: clamp(0.916rem, 0.69vw + 0.754rem, 1.2rem); /* 22px (fluid) */
    font-weight: 700;
    line-height: 1.55; /* 34/22 */
}

/* Time group bar — same coral ribbon language as .pc-badge--settle
   (soft body + darker fold strip on the inline-end / right edge) */
.latest-stocks-time-bar {
    position: relative;
    background: var(--zino-warn-bg-soft); /* #fdece7 — settle ribbon body */
    border: 0;
    border-radius: 0;
    padding: var(--space-2) calc(var(--space-4) + 5px) var(--space-2) var(--space-4);
    overflow: hidden;
}

.latest-stocks-time-bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 5px;
    background: var(--zino-warn-border); /* #f9c4b7 — same fold as .pd-vbadge--settle */
}

.latest-stocks-time {
    color: var(--zino-warn); /* #f47a5b */
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    line-height: normal;
}

/* ===== Global Ajax loader (#wait / .hm-spinner in _Layout) — green theme =====
   Overrides the legacy red spinner in style2.css for all Ajax LoadingElementId="wait". */
.hm-spinner {
    border-top-color: var(--zino-green);
    border-bottom-color: var(--zino-green-hover);
}

.hm-spinner::before {
    border-top-color: var(--zino-green-light);
    border-bottom-color: var(--zino-green-chapter);
}

/* ===== Global scrollbar (replaces the old one commented out in style2.css) =====
   Thin green thumb on a transparent track, no arrow buttons — applied site-wide.
   NOTE: in Chromium, setting `scrollbar-width`/`scrollbar-color` DISABLES the
   `::-webkit-scrollbar` pseudo styling. So the Firefox standard properties are
   scoped to Firefox only (browsers without ::-webkit-scrollbar support), leaving
   Chromium free to use the webkit rules below. */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: var(--zino-green) transparent;
    }
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-button { /* hide the up/down arrows */
    display: none;
    width: 0;
    height: 0;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--zino-green);
    border: 0;
    border-radius: 0;
}

/* ===== Products filter v2 (_ProductFilter) ===== */
/* Layout/spacing live in the markup as Bootstrap utilities. Here only the
   genuine exceptions: tokens for type, state/pseudo styling, scrollbars. */
.filter-v2 {
    border: 1px solid var(--zino-border);
}

/* Desktop sidebar — sticky shell; inner body scrolls when content is tall */
@media (min-width: 992px) {
    #filter > .row > .col-lg-3 {
        align-self: flex-start;
    }

    #filter > .row > .col-lg-3 > .filter-v2 {
        position: sticky;
        top: var(--space-4);
    }

    #filter > .row > .col-lg-3 > .filter-v2 > .filter-v2__scroll {
        max-height: calc(100vh - var(--space-8));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile offcanvas — drawer body handles scroll, not the inner panel */
.custom-filter .offcanvas-body > .filter-v2 > .filter-v2__scroll {
    max-height: none;
    overflow: visible;
}

.filter-v2-title {
    color: var(--zino-text);
    font-size: clamp(0.75rem, 0.75vw + 0.574rem, 1.25rem); /* 12 → 20px */
    font-weight: 700;
}

.filter-v2-divider {
    border-top: 1px solid var(--zino-border);
    opacity: 1;
    margin-block: var(--space-4);
}

.filter-v2-head-title,
.filter-v2-check-label {
    color: var(--zino-text);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem); /* 9 → 14px */
}

.filter-v2-head-title {
    font-weight: 700;
}

/* collapsible section header (Bootstrap btn reset, no chrome) */
.filter-v2-head {
    border: 0;
    box-shadow: none;
}

.filter-v2-caret {
    color: var(--zino-text-muted);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.filter-v2-head[aria-expanded="false"] .filter-v2-caret {
    transform: rotate(-90deg);
}

/* checkbox — gray square that reveals a smaller green square when checked
   (design shows an inset green, not a fully-filled box). Inset gray frame is
   drawn with box-shadow so the green centre stays smaller than the box. */
.filter-v2 .form-check-input {
    width: 1.375rem;
    height: 1.375rem;
    border: 0;
    border-radius: 3px;
    background-color: var(--zino-text-placeholder); /* #ddd gray box */
    cursor: pointer;
}

    .filter-v2 .form-check-input:checked {
        background-color: var(--zino-green);
        background-image: none;
        box-shadow: inset 0 0 0 4px var(--zino-text-placeholder);
    }

    .filter-v2 .form-check-input:focus {
        box-shadow: none;
    }

    .filter-v2 .form-check-input:checked:focus {
        box-shadow: inset 0 0 0 4px var(--zino-text-placeholder);
    }

/* scrollable brand/group list — fully self-contained scrollbar (does NOT inherit
   the global one) so it keeps the Figma look: a 1px #c3c3c3 centred track line
   with a 6.588px square green thumb. Native track & thumb share a width, so the
   thin line is faked with a centred gradient. */
.filter-v2-list {
    /* shorter viewport → more content hidden → shorter native thumb.
       Thumb height is data-driven; with more brands it shrinks further. */
    max-height: 150px;
}

    .filter-v2-list::-webkit-scrollbar {
        width: 6.588px;
    }

    .filter-v2-list::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }

    .filter-v2-list::-webkit-scrollbar-track {
        background: linear-gradient(to right, transparent calc(50% - 0.5px), var(--zino-text-muted) calc(50% - 0.5px), var(--zino-text-muted) calc(50% + 0.5px), transparent calc(50% + 0.5px));
    }

    .filter-v2-list::-webkit-scrollbar-thumb {
        background: var(--zino-green);
        border: 0;
        border-radius: 0; /* square thumb per Figma */
    }

.filter-v2-row {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--space-2);
    cursor: pointer;
}

.filter-v2-row-name {
    color: var(--zino-text);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
}

.filter-v2-row-count {
    min-width: 2rem;
    text-align: center;
    color: var(--zino-text-muted);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    padding: 2px 8px;
}

/* hover row turns white against the gray panel */
.filter-v2-row:hover {
    background: #fff;
}

/* selected brand/group — only the count gets a green slanted tag (clip-path
   shape → custom CSS). :has lets the checked checkbox drive it. */
.filter-v2-row:has(.form-check-input:checked) .filter-v2-row-count {
    background: var(--zino-green);
    color: #fff;
    font-weight: 700;
    /* same trapezoid (slanted left edge) as .fv2-brand-nav */
    clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%);
}

/* price inputs */
.filter-v2-price-label {
    color: var(--zino-text);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    font-weight: 700;
}

.filter-v2-price-unit {
    color: var(--zino-text-muted);
    font-size: clamp(0.6rem, 0.32vw + 0.525rem, 0.8125rem);
}

.filter-v2-price-input {
    border: 0;
    border-bottom: 1px solid var(--zino-border);
    border-radius: 0;
    color: var(--zino-text);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    padding: var(--space-1) var(--space-2);
}

    .filter-v2-price-input:focus {
        box-shadow: none;
        border-bottom-color: var(--zino-green);
    }

.filter-v2-price-ends span {
    color: var(--zino-text); /* #5b5b5b */
    text-align: center;
    font-size: clamp(0.5625rem, 0.28vw + 0.4965rem, 0.75rem); /* 9 → 12px (≈10px) */
    font-weight: 700;
}

/* ion.rangeSlider — restyle the flat skin to the Figma design: a thin grey
   track, green fill, two round green handles, and NO tooltips / grid / min-max.
   Plugin theming: a third-party stylesheet has no token hooks, so override. */
.filter-v2 .irs--flat {
    height: 24px;
}

    .filter-v2 .irs--flat .irs-line,
    .filter-v2 .irs--flat .irs-bar {
        top: 10px;
        height: 4px;
        border-radius: 4px;
    }

    .filter-v2 .irs--flat .irs-line {
        background: var(--zino-border);
    }

    .filter-v2 .irs--flat .irs-bar {
        background: var(--zino-green);
    }

    .filter-v2 .irs--flat .irs-handle {
        top: 4px;
        width: 16px;
        height: 16px;
        background: var(--zino-green);
        border: 2px solid #fff;
        border-radius: 50%;
        box-shadow: 0 0 0 1px var(--zino-green);
    }

        .filter-v2 .irs--flat .irs-handle > i:first-child {
            display: none;
        }

    /* hide tooltips, grid numbers and min/max labels — design shows none */
    .filter-v2 .irs--flat .irs-from,
    .filter-v2 .irs--flat .irs-to,
    .filter-v2 .irs--flat .irs-single,
    .filter-v2 .irs--flat .irs-min,
    .filter-v2 .irs--flat .irs-max,
    .filter-v2 .irs--flat .irs-grid {
        display: none;
    }

/* ===== Sort bar v2 (Products Index — ترتیب نمایش / نوع نمایش) ===== */
/* Layout is all Bootstrap utilities in the markup; here only type tokens and
   the hover/active state styling Bootstrap can't express. */

/* Figma has no card around this bar — just a bottom rule. Drop the .content-box
   card look and replace the shadow/border with a single underline. */
.sort-bar-v2 .content-box {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid var(--zino-border);
    padding: 0 0 12px;
}

.sort-bar-v2__label {
    color: var(--zino-text); /* #5b5b5b */
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
}

.sort-bar-v2__link {
    color: var(--zino-text); /* #5b5b5b */
    font-size: 0.875rem; /* 14px */
    font-weight: 400;
    cursor: pointer;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent; /* reserve space so active underline doesn't shift */
}

    /* hover: bold + green underline appears (text stays #5b5b5b per spec) */
    .sort-bar-v2__link:hover {
        font-weight: 700;
        border-bottom-color: var(--zino-green);
    }

    /* active (selected): same green underline, plus green text */
    .sort-bar-v2__link.active {
        color: var(--zino-green);
        font-weight: 700;
        border-bottom-color: var(--zino-green);
    }

.sort-bar-v2__view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--zino-text);
    font-size: 0.875rem; /* 14px */
    font-weight: 400;
    cursor: pointer;
}

    .sort-bar-v2__view i {
        color: var(--zino-text-muted);
    }

    /* active after click → the whole toggle turns green (acts as the NoImage filter) */
    .sort-bar-v2__view.active {
        color: var(--zino-green);
        font-weight: 700;
    }

        .sort-bar-v2__view.active i {
            color: var(--zino-green);
        }

/* ===== Mobile filter FAB (Products Index) ===== */
.filter-fab-v2 {
    z-index: 999;
    bottom: 5rem; /* 80px — .btn-filter-float overrides at ≤992px */
    inset-inline-end: var(--space-3);
    background: var(--zino-green);
    border-radius: 0;
    color: #fff;
    transition: background 0.2s ease;
}

.filter-fab-v2:hover,
.filter-fab-v2:focus {
    background: var(--zino-green-hover);
    color: #fff;
}

.filter-fab-v2__icon {
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    line-height: 1;
}

.filter-fab-v2__label {
    font-size: 0.875rem; /* 14px */
    line-height: 1;
}

/* ===== Load more (Products Index — نمایش بیشتر) ===== */
.products-load-more__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--zino-text);
    font-size: 0.875rem;
    font-weight: 400;
    border: 1px solid var(--zino-border-strong);
    background: transparent;
    padding: var(--space-3) var(--space-6);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.products-load-more__btn:hover,
.products-load-more__btn:focus {
    color: var(--zino-green);
    border-color: var(--zino-green);
}

.products-load-more__btn i {
    font-size: 0.75rem;
}

/* ===== "بدون تصویر" cards (Products Index, NoImage filter only) =====
   The default .pc-card has a FIXED height (486px) and .pc-info reserves the
   image's vertical space (margin-top:49px) so cards stay a consistent size —
   that policy is intentional and untouched. Only when the NoImage filter is on,
   this page adds .pc-card--noimage so the card collapses to its content and
   more rows fit. Scoped class = no impact on the global fixed-size policy. */
.product-box.pc-card--noimage {
    height: auto;
}

.pc-card--noimage .pc-info {
    margin-top: 0;
}

/* ============================================================
   Product detail (v2) — Views/Products/Details.cshtml
   3-column block (RTL): gallery → info → buy-card. Layout/spacing
   is Bootstrap utilities in the markup; this carries type tokens,
   the green theme, the badges/ribbons, and the few exceptions.
   ============================================================ */
.pd-detail {
    color: var(--zino-text);
}

/* --- breadcrumb (sits above the gallery column) --------------------------- */
.pd-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: clamp(0.5625rem, 0.28vw + 0.4965rem, 0.75rem); /* 9 → 12px (Figma 12px) */
    font-weight: 300; /* non-current items: light */
    color: var(--zino-text); /* #5B5B5B */
}

    .pd-breadcrumb a {
        color: var(--zino-text); /* #5B5B5B */
        font-weight: 300;
        transition: color 0.2s ease;
    }

        .pd-breadcrumb a:hover {
            color: var(--zino-green);
        }

    .pd-breadcrumb .pd-breadcrumb__sep {
        color: var(--zino-text);
        font-size: 0.85em;
    }

    .pd-breadcrumb .pd-breadcrumb__current {
        color: var(--zino-text); /* #5B5B5B */
        font-weight: 300; /* Figma: light, same as the path */
    }

@media (max-width: 768px) {
    .pd-breadcrumb__current {
        display: inline-block;
        max-width: 20vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* --- gallery -------------------------------------------------------------- */
.pd-gallery {
    position: relative;
}

/* bordered box around the MAIN image only (thumbnails sit below, outside) */
.pd-gallery__main {
    position: relative;
    border: 1px solid var(--zino-border);
    padding: var(--space-4);
}

/* mobile (Figma): drop the single outer frame and instead give each slide its
   own thin #ddd square border, so the peeking carousel matches the design. */
@media (max-width: 991.98px) {
    .pd-gallery__main {
        border: 0;
        padding: 0;
    }

    .pd-gallery .product-gallery .swiper-slide {
        aspect-ratio: 1; /* square box (Figma 262×262) */
        border: 1px solid var(--zino-text-placeholder); /* #ddd — Figma slide border */
        border-radius: 0;
        padding: var(--space-3); /* even inset instead of the legacy 10/10/60 */
    }
}

.pd-gallery .product-gallery {
    width: 100%;
}

    .pd-gallery .product-gallery .swiper-slide img {
        display: block;
        width: 100%;
        aspect-ratio: 1; /* square image box (Figma) */
        height: auto;
        object-fit: contain;
    }

    /* nav arrows: soft light circle, thin grey chevron (Figma) */
    .pd-gallery .product-gallery .swiper-button-next,
    .pd-gallery .product-gallery .swiper-button-prev {
        width: 32px;
        height: 32px;
        margin: 0;
        border-radius: 50%;
        background: #fff;
        border: 1px solid var(--zino-border);
        box-shadow: none;
        color: var(--zino-text-sub);
        top: 50%;
        transform: translateY(-50%);
    }

        .pd-gallery .product-gallery .swiper-button-next::after,
        .pd-gallery .product-gallery .swiper-button-prev::after {
            font-size: 0.8125rem;
            font-weight: 400;
            color: var(--zino-text-sub);
        }

    /* pagination: 4px grey dots + an 8×4 green bar for the active slide (Figma) */
    .pd-gallery .product-gallery .swiper-pagination {
        bottom: var(--space-4); /* lift the dots off the slide's bottom border */
    }

    .pd-gallery .product-gallery .swiper-pagination-bullet {
        width: 4px;
        height: 4px;
        margin: 0 3px !important;
        border-radius: 0;
        background: var(--zino-text-muted);
        opacity: 1;
        transition: width 0.2s ease, background-color 0.2s ease;
    }

    .pd-gallery .product-gallery .swiper-pagination-bullet-active {
        width: 8px;
        border-radius: 0;
        background: var(--zino-green);
    }

/* thumbnails strip — images sync the main slider; video opens a modal */
.pd-gallery__thumbs,
.pd-gallery__video-triggers {
    margin-top: var(--space-3);
}

.pd-gallery__thumb {
    /* 4-up strip; gap-2 = 0.5rem → three gaps = 1.5rem */
    flex: 0 0 calc((100% - 1.5rem) / 4);
    width: calc((100% - 1.5rem) / 4);
    margin: 0;
    padding: 4px;
    border: 1px solid var(--zino-border);
    border-radius: 0;
    background: #fff;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

    .pd-gallery__thumb img {
        display: block;
        width: 100%;
        height: 64px;
        object-fit: contain;
    }

    .pd-gallery__thumb--active,
    .pd-gallery__thumb:hover {
        opacity: 1;
        border-color: var(--zino-green);
    }

.pd-gallery__thumb--video {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(64px + 8px);
}

    .pd-gallery__thumb--video .bi-play-btn-fill {
        font-size: 2.5rem;
        line-height: 1;
        color: var(--zino-text-muted);
    }

.pd-gallery__modal-video {
    display: block;
    max-height: min(80vh, 720px);
    background: #000;
    object-fit: contain;
}

/* zoom / fullscreen icon — top-right of the image box, bare icon (Figma) */
.pd-gallery__tools {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 6;
    display: flex;
    gap: var(--space-2);
}

.pd-zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--zino-text);
    font-size: 1.25rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .pd-zoom-btn:hover {
        color: var(--zino-green);
    }

/* --- info column ---------------------------------------------------------- */
.pd-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.pd-info__head {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--zino-border);
}

.pd-info__title {
    margin: 0;
    color: var(--zino-text); /* #5B5B5B */
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    line-height: normal;
    text-align: right;
}

.pd-info__code {
    display: block;
    margin-top: var(--space-2);
    color: var(--zino-green); /* #00AE5E */
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    line-height: normal;
    text-align: right;
}

/* Figma mobile frame: title 15px / code 12px (smaller than the desktop 18/15). */
@media (max-width: 575.98px) {
    .pd-info__title {
        font-size: 0.8rem; /* 15px */
    }

    .pd-info__code {
        font-size: 0.75rem; /* 12px */
    }
}

/* meta row: brand · category | favourites · comments — dividers between items */
.pd-meta-row {
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-4);
    padding-bottom: var(--space-4);
    font-size: 0.75rem; /* 12px */
}

    /* the brand/category group and the favourite/comment group */
    .pd-meta-row > span {
        gap: var(--space-5);
    }

.pd-meta-row__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--zino-text);
    white-space: nowrap;
}

    .pd-meta-row__item .pd-meta-row__label {
        color: var(--zino-text-sub); /* #5B5B5B */
        font-weight: 100;
    }

    .pd-meta-row__item a {
        color: var(--zino-text); /* #5B5B5B */
        font-weight: 400;
        transition: color 0.2s ease;
    }

        .pd-meta-row__item a:hover {
            color: var(--zino-green);
        }

    .pd-meta-row__item i {
        font-size: 1.15em;
        color: var(--zino-text-muted);
    }

/* a thin vertical rule that splits brand/category from the icon stats */
.pd-meta-row__sep {
    width: 1px;
    align-self: stretch;
    min-height: 16px;
    background: var(--zino-border);
}

/* likes/comments stats, sitting on the left of the breadcrumb row (Figma) */
.pd-topstats {
    gap: var(--space-3);
}

.pd-topstats__stat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--zino-text-meta); /* #646668 */
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem; /* 12px desktop */
    font-weight: 400;
    line-height: 30px;
    transition: color 0.2s ease;
}

    .pd-topstats__stat i {
        font-size: 0.75rem; /* Figma 12px icons */
    }

    .pd-topstats__stat:hover {
        color: var(--zino-green);
    }

/* mobile: Figma stats are 8px / line-height 30px */
@media (max-width: 991.98px) {
    .pd-topstats__stat {
        font-size: 0.5rem;
    }
}

/* properties bullet list */
.pd-props {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
}

.pd-props__item {
    position: relative;
    padding-right: var(--space-4);
    margin-bottom: var(--space-1);
    font-size: 0.75rem; /* 12px */
    font-weight: 325;
    line-height: 25px;
    color: var(--zino-text); /* #5B5B5B */
    text-align: right;
}

    .pd-props__item::before {
        content: "";
        position: absolute;
        top: 9px; /* vertically centered on the 25px line */
        right: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--zino-text-muted);
    }

    .pd-props__item .pd-props__label {
        color: var(--zino-text);
    }

    .pd-props__item .pd-props__unit {
        color: var(--zino-text-muted);
        font-size: 0.85em;
        margin-right: 4px;
    }

/* packaging count line (تعداد در رگلام …) — rendered as bulleted items right
   under the مشخصات list, sharing the same circle marker as .pd-props__item */
.pd-pack {
    margin-top: var(--space-1);
    color: var(--zino-warn) !important; /* #F47A5B */
    font-size: 0.875rem; /* 14px */
    font-weight: 300; /* label weight */
    text-align: right;
}

    .pd-pack p {
        position: relative;
        margin: 0 0 var(--space-1);
        padding-right: var(--space-4);
        line-height: 25px;
    }

    .pd-pack p::before {
        content: "";
        position: absolute;
        top: 9px; /* vertically centered on the 25px line — matches .pd-props__item */
        right: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--zino-text-muted);
    }

.pd-pack__val {
    font-weight: 600; /* the quantity, e.g. ۳۰ عدد */
}

/* bottom action row: favourite / share / compare */
.pd-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    gap: var(--space-6);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--zino-border);
}

.pd-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    border: none;
    background: none;
    color: var(--zino-text);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .pd-action i {
        font-size: 1.25em;
        color: var(--zino-text-muted);
        transition: color 0.2s ease;
    }

    .pd-action:hover,
    .pd-action:hover i {
        color: var(--zino-green);
    }

.pd-action--fav.is-fav i {
    color: var(--zino-warn);
}

/* mobile: bare favourite/share/compare icons on the left of the meta row (Figma) */
.pd-meta-actions {
    gap: var(--space-4);
}

    .pd-meta-actions .pd-action i {
        font-size: 1.25rem; /* 20px — Figma */
    }

/* --- buy card (gray panel, left column) ----------------------------------- */
.pd-buy {
    background: var(--zino-search-bg); /* #f7f7f7 */
    padding: var(--space-5);
}

/* Figma: the gray price card isn't a full rectangle — a notch is cut from its
   top-right corner so the background steps inward. Decorative, so desktop-only
   (clip-path can't be a utility); mobile keeps a clean rectangle. clip-path
   would chop any content under it, so we first reserve an empty right gutter
   (padding-right) and only notch that gutter — no text sits beneath the cut. */
@media (min-width: 992px) {
    .pd-buy {
        padding-right: 18%;
        clip-path: polygon(0 0, 84% 0, 84% 40%, 100% 40%, 100% 100%, 0 100%);
    }
}

@media (max-width: 768px) {
    .pd-buy {
        padding: var(--space-1);
    }
}

.pd-buy__price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: var(--space-3);
    padding: var(--space-3) 0;
}

    .pd-buy__price-row + .pd-buy__price-row {
        border-top: 1px solid var(--zino-border);
    }

.pd-buy__price-label {
    flex-shrink: 0;
    color: var(--zino-text); /* #5B5B5B */
    font-size: 0.75rem; /* 12px */
    font-weight: 300;
    /*    padding-top: var(--space-3);*/
}

.pd-buy__price-main {
    text-align: left;
    min-width: 0;
}

/* discount ribbon + struck old price above the cash amount */
.pd-buy__discount {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    margin-left:var(--space-3);
}

.pd-buy__old {
    color: var(--zino-text-sub); /* #929497 */
    font-size: 0.8rem; /* 10px */
    font-weight: 400;
    text-align: right;
    text-decoration: line-through;
}

/* green discount badge (Figma: solid green parallelogram, slanted right edge).
   clip-path lives on a ::before background layer so the slant can't clip the
   text — same pattern as .fv2-brand-nav. */
.pd-ribbon {
    isolation: isolate;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 3px 4px 10px;
    color: #fff;
    text-align: center;
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    line-height: normal;
}

    .pd-ribbon::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--zino-green);
        clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
    }

.pd-buy__amount {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--zino-text);
}

.pd-buy__amount-num {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    line-height: 1.2;
}

.pd-buy__amount-unit,
.pd-buy__amount-cur {
    color: var(--zino-text-sub);
    font-size: 0.625rem; /* 10px */
    font-weight: 400;
    margin-left: 10px;
    margin-right: 10px;
}

.pd-buy__price-row--cash .pd-buy__amount-num {
    color: var(--zino-text);
}

.pd-buy__unavailable {
    color: var(--zino-warn);
    font-weight: 700;
    font-size: clamp(0.75rem, 0.75vw + 0.574rem, 1.25rem);
}

/* action buttons row inside the card */
.pd-buy__cta {
    margin-top: var(--space-4);
}

.pd-buy__count {
    margin: var(--space-2) 0 0;
    color: var(--zino-text-muted); /* ≈ #bbb */
    font-size: 0.625rem; /* 10px */
    font-weight: 600;
    text-align: right;
}

/* green filled add-to-cart (slanted left edge, like .pc-cart-btn) */
.pd-cart-btn {
    position: relative;
    isolation: isolate;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 40px;
    padding: 8px 16px;
    border: none;
    color: #fff !important;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
}

    .pd-cart-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--zino-green);
        clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
        transition: background 0.2s ease;
    }

    .pd-cart-btn:hover::before,
    .pd-cart-btn:focus::before {
        background: var(--zino-green-hover);
    }

    .pd-cart-btn i {
        font-size: 1.125rem;
        line-height: 1;
    }

.pd-cart-btn--supply::before {
    background: var(--main-color-two, #275fe0);
}

.pd-cart-btn--reserve::before {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* variant-select button: white, green border + text, chevron at the start */
.pd-variant-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--zino-green);
    background: #fff;
    color: var(--zino-green);
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .pd-variant-btn:hover {
        background: var(--zino-green-light);
    }

    .pd-variant-btn i {
        font-size: 1.125rem;
        line-height: 1;
    }

/* secondary "similar products" link button (delayed-supply state) */
.pd-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 44px;
    margin-top: var(--space-2);
    padding: 8px 16px;
    border: 1px solid var(--zino-border);
    background: #fff;
    color: var(--zino-text);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

    .pd-link-btn:hover {
        border-color: var(--zino-green);
        color: var(--zino-green);
    }

/* stock / price-expiry notices (orange bullets) */
.pd-notes {
    margin-top: var(--space-4);
}

.pd-note {
    position: relative;
    padding-right: var(--space-4);
    margin: 0 0 var(--space-2);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    font-weight: 400; /* normal */
    line-height: 1.6;
    text-align: right;
}

/* emphasised fragments inside a notice */
.pd-note__num {
    font-weight: 800; /* the quantity, e.g. ۲ عدد */
}

.pd-note__date {
    font-weight: 700; /* the date, e.g. ۱۴۰۴/۱۲/۰۹ */
}

.pd-note::before {
    content: "";
    position: absolute;
    top: 0.6em;
    right: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zino-text-muted);
}

.pd-note--danger {
    color: var(--zino-warn);
}

.pd-note__microbtn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--space-1);
    padding: 4px 10px;
    border: none;
    background: var(--zino-green);
    color: #fff;
    font-size: clamp(0.5625rem, 0.28vw + 0.4965rem, 0.75rem);
    cursor: pointer;
}

/* price-history link */
.pd-history-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-4);
    padding: 0;
    border: none;
    background: none;
    color: var(--zino-blue);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    font-weight: 550;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .pd-history-link:hover {
        color: var(--zino-blue);
        opacity: 0.85;
    }

    .pd-history-link i {
        font-size: 1.2em;
    }

@media (max-width: 767.98px) {
    .pd-pack{
        margin-top:0px;
        padding-top:0px;
    }

    .pd-history-link {
        font-size: clamp(0.75rem, 0.75vw + 0.574rem, 1.25rem);
        margin-top: var(--space-2);
    }

    .pd-note {
        font-size: clamp(0.75rem, 0.75vw + 0.574rem, 1.25rem);
    }
}

/* settlement label (تسویه N ماهه) */
.pd-settle {
    display: inline-block;
    margin-top: var(--space-2);
    padding: 4px 10px;
    background: var(--zino-green-light);
    color: var(--zino-text);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    font-weight: 600;
}

/* guarantee line (overrides the legacy .product-meta-garanty flex-end) */
.pd-guarantee {
    justify-content: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-4);
    color: var(--zino-text-muted);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
}

    .pd-guarantee i {
        margin-left: 0;
        color: var(--zino-green);
    }

    .pd-guarantee span {
        color: var(--zino-text-muted);
    }

/* ============================================================
   Variant picker modal (انتخاب نوع محصول)
   2-col grid of variant cards; each card mirrors the .pc-card
   badge / cash-credit price language.
   ============================================================ */
.pd-variant-modal .modal-header {
    border-bottom: 1px solid var(--zino-border);
    padding: var(--space-4) var(--space-5);
}

.pd-variant-modal .modal-title {
    color: var(--zino-text);
    font-size: clamp(0.916rem, 0.69vw + 0.754rem, 1.2rem);
    font-weight: 700;
}

.pd-variant-modal .modal-body {
    padding: var(--space-4) var(--space-5) var(--space-5);
}

/* green strip across the top of the modal (Figma) */
.pd-variant-modal .modal-content {
    border-top: 8px solid var(--zino-green);
}

.pd-variant-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

@media (max-width: 991.98px) {
    .pd-variant-grid {
        grid-template-columns: 1fr;
    }
}

.pd-variant-card {
    position: relative; /* anchor for the top-left corner badge */
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 6rem; /* uniform, airy card (Figma ~116px box) */
    padding: var(--space-4);
    border: 1px solid var(--zino-border-strong);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    text-align: right;
}

    .pd-variant-card:hover {
        border-color: var(--zino-green);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    }

    .pd-variant-card.active {
        border-color: var(--zino-green);
        box-shadow: 0 0 0 1px var(--zino-green) inset;
    }

/* green cart button (slanted), far-left of the card */
.pd-variant-card__cart {
    position: relative;
    isolation: isolate;
    z-index: 0;
    flex-shrink: 0;
    align-self: center;
    width: 52px;
    height: 34px;
    border: none;
    background: transparent; /* don't let the default button gray show through the cut corner */
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .pd-variant-card__cart::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--zino-green);
        clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
        transition: background 0.2s ease;
    }

    .pd-variant-card__cart:hover::before {
        background: var(--zino-green-hover);
    }

    .pd-variant-card__cart.is-reserve::before {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .pd-variant-card__cart i {
        font-size: 1.125rem;
    }

/* ---- mobile-only elements (Figma): stock note, full CTA, similar pill ----
   These render only inside .d-lg-none wrappers, so they never affect desktop. */
.pd-variant-card__stock .pd-vstock {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    text-align: right;
}

.pd-vstock--danger {
    color: var(--zino-warn);
}

.pd-vstock__num {
    font-weight: 700;
}

.pd-variant-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between; /* CTA at the left edge, similar at the right */
    gap: var(--space-3);
}

/* compact green CTA (slanted), text only — no icon (Figma). Sits on the left. */
.pd-variant-card__cta {
    position: relative;
    isolation: isolate;
    z-index: 0;
    order: 2; /* RTL: order 2 lands on the left */
    flex: 0 0 auto;
    width: 86px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: clamp(0.5625rem, 0.28vw + 0.4965rem, 0.75rem);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

    .pd-variant-card__cta::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--zino-green);
        clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
        transition: background 0.2s ease;
    }

    .pd-variant-card__cta:hover::before {
        background: var(--zino-green-hover);
    }

    .pd-variant-card__cta.is-reserve::before {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .pd-variant-card__cta i {
        font-size: 1rem;
    }

/* similar-products pill — compact (count + sparkle); the long label is hidden
   at this small size so it fits ~52px. Mirrors .pc-similar's phone collapse. */
.pd-variant-card__similar {
    order: 1; /* RTL: order 1 lands on the right */
    flex: 0 0 auto;
    width: 52px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 0 4px;
    background: #ebebeb;
    color: var(--zino-text) !important;
    font-size: clamp(0.5625rem, 0.28vw + 0.4965rem, 0.75rem);
    text-decoration: none;
}

.pd-variant-card__similar-text {
    display: none; /* no room for the label in the 52px pill */
}

.pd-variant-card__similar-count {
    font-weight: 700;
    font-size: clamp(0.75rem, 0.188vw + 0.706rem, 0.875rem);
    color: #706f6f;
}

.pd-variant-card__similar-ico {
    width: 16px;
    height: 21px;
}

/* price block (نقدی / اعتباری), left of the body */
.pd-variant-card__prices {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:end;
    gap: var(--space-1);
    text-align: left;
}

.pd-variant-card__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

/* num + تومان stay glued as one unit (so space-between only splits tag vs value) */
.pd-variant-card__price-val {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.pd-variant-card__price-tag {
    flex-shrink: 0;
    padding: 1px 6px;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* نقدی tag — green ribbon (slanted top + darker fold), like .pc-tag--cash */
.pd-variant-card__price-tag--cash {
    position: relative;
    padding-right: 14px;
    background: var(--zino-green-light);
    color: var(--zino-text);
    clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%);
}

    .pd-variant-card__price-tag--cash::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 5px;
        background: var(--zino-green-fold);
    }

.pd-variant-card__price-tag--credit {
    color: var(--zino-text-muted);
}

.pd-variant-card__price-num {
    font-size: clamp(0.75rem, 0.188vw + 0.706rem, 0.875rem);
    font-weight: 800;
    color: var(--zino-green); /* Figma: both نقدی & اعتباری numbers are green */
}

/* cash row (first) is the larger, headline price */
.pd-variant-card__price:first-child .pd-variant-card__price-num {
    font-size: 0.8125rem;
}

.pd-variant-card__price-cur {
    font-size: clamp(0.529rem, 0.238vw + 0.474rem, 0.6875rem);
    color: var(--zino-text-muted);
}

/* center body: badges + name + count */
.pd-variant-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* badges float over the card's top edge: discount at the right corner,
   status/settlement at the left corner (mirrors _Product.cshtml) */
.pd-variant-card__badges {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pd-variant-card__badges--start {
    right: var(--space-4);
}

.pd-variant-card__badges--end {
    left: var(--space-4);
}

.pd-variant-card__name {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--zino-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pd-variant-card__count {
    font-size: 0.8125rem;
    color: var(--zino-text-muted);
}

/* thumbnail, far-right */
.pd-variant-card__thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px; /* product thumbnails are square */
    object-fit: contain;
    align-self: center;
}

/* card badge — ribbon shape (slanted top + darker fold), same design as the
   product-card .pc-badge in _Product.cshtml. coral / green / yellow variants */
.pd-vbadge {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px 2px 14px; /* extra right for the fold strip */
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%);
}

    .pd-vbadge::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 5px;
    }

.pd-vbadge--discount {
    background: var(--zino-green-light);
    color: var(--zino-text);
}

    .pd-vbadge--discount::after {
        background: var(--zino-green-fold);
    }

.pd-vbadge--cash,
.pd-vbadge--settle {
    background: var(--zino-warn-bg-soft);
    color: var(--zino-warn);
}

    .pd-vbadge--cash::after,
    .pd-vbadge--settle::after {
        background: var(--zino-warn-border);
    }

.pd-vbadge--delay {
    background: var(--zino-delay-bg);
    color: var(--zino-delay-text);
}

    .pd-vbadge--delay::after {
        background: var(--zino-delay-fold);
    }

/* ---- vertical card on mobile (Figma): name+count, image right, prices, stock,
   CTA row. Placed AFTER the base .pd-variant-card rules so display:grid wins over
   the base display:flex (media queries add no specificity — source order decides).
   Breakpoint matches the d-lg-* classes (992px) so the card is never half-desktop. */
@media (max-width: 991.98px) {
    .pd-variant-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "thumb body"
            "thumb prices"
            "thumb stock"
            "thumb actions";
        column-gap: var(--space-4);
        row-gap: var(--space-3);
        align-items: start;
    }

    .pd-variant-card__thumb {
        grid-area: thumb;
        align-self: center; /* center against the taller content column */
        width: 100px;
        height: 128px; /* bigger, portrait-friendly box (object-fit: contain, no distortion) */
    }

    .pd-variant-card__body {
        grid-area: body;
    }

    .pd-variant-card__prices {
        grid-area: prices;
        align-self: end;
        align-items: stretch; /* rows fill the column so space-between can split tag vs value */
        text-align: right;
    }

    /* Figma mobile: tag pinned to the right, amount + تومان pinned to the left */
    .pd-variant-card__price {
        justify-content: space-between;
    }

    .pd-variant-card__stock {
        grid-area: stock;
    }

    .pd-variant-card__actions {
        grid-area: actions;
        justify-content: flex-end; /* group CTA + similar together at the left, not spread */
        flex-wrap: nowrap; /* keep both on one line, side by side */
        gap: var(--space-1);
    }

    /* CTA shrinks to share the row with the pill; inner left padding clears the slant */
    .pd-variant-card__cta {
        order: 2; /* similar pill on the left, green CTA to its right */
        flex: 0 1 auto;
        min-width: 0;
        width: auto;
        height: auto;
        min-height: 30px;
        padding: 6px 15px 6px 20px;
        font-size: 0.6rem;
    }

    /* similar pill shows its full label on mobile (hidden at desktop's compact size) */
    .pd-variant-card__similar {
        order: 1;
        flex: 0 0 auto;
        width: auto;
        height: auto;
        min-height: 30px;
        gap: var(--space-1);
        padding: 4px 8px;
    }

    /* label wraps to two lines (محصول / مشابه) so the pill stays narrow next to the CTA */
    .pd-variant-card__similar-text {
        display: block;
        width: 4em;
        line-height: 1.15;
        text-align: center;
    }

    /* mobile type sizes (Figma) */
    .pd-variant-card__name {
        display: block; /* override the 2-line -webkit-box clamp */
        font-size: 0.6875rem;
        font-weight: 700;
        color: var(--zino-text); /* Figma #575756 ≈ #5b5b5b */
        font-feature-settings: "ss07" 1;
        white-space: nowrap; /* single line + ellipsis on mobile */
        text-overflow: ellipsis;
    }

    .pd-variant-card__price-num,
    .pd-variant-card__price:first-child .pd-variant-card__price-num {
        font-size: 0.8125rem;
    }

    .pd-variant-card__price-cur {
        font-size: 0.5rem;
        color: var(--zino-text); /* #5B5B5B */
    }

    .pd-variant-card__count {
        font-size: 0.6875rem;
    }

    .pd-variant-card__price-tag {
        font-size: 0.6875rem;
    }

    .pd-vbadge {
        font-size: 0.6875rem;
        padding: 1px 6px 1px 12px;
    }

    .pd-variant-card__stock .pd-vstock {
        font-size: 0.6875rem;
    }
}

/* v2 has square corners everywhere; keep only genuinely circular controls
   (.pd-icon-btn, gallery nav arrows) rounded. */
.pd-buy,
.pd-gallery__main,
.pd-gallery__thumb,
.pd-cart-btn,
.pd-variant-btn,
.pd-link-btn,
.pd-note__microbtn,
.pd-settle,
.pd-variant-card,
.pd-variant-card__cart,
.pd-variant-card__price-tag,
.pd-variant-modal .modal-content,
.pd-history-link .badge {
    border-radius: 0;
}

/* --- responsive: stack the 3 columns (gallery → info → buy) below lg ------ */
@media (max-width: 991.98px) {
    .pd-buy {
        margin-top: var(--space-4);
    }
}

/* ===== Product description / specs / reviews tabs (Figma rebuild) ========= */
/* Figma shows a flat light-gray panel, not the legacy white shadowed card.
   Drop the .content-box card look inside this section. */
.product-desc .content-box {
    background: var(--zino-surface);
    box-shadow: none;
    border-radius: 0;
}

/* tab bar — inactive gray, active green text + green underline */
.product-desc-tab {
    border-bottom: 1px solid var(--zino-border);
    background: transparent;
}

    .product-desc-tab ul li button {
        color: var(--zino-text-sub);
        font-size: clamp(0.9375rem, 0.09vw + 0.916rem, 1rem);
        font-weight: 400;
    }

.product-desc-tab ul li button.active {
    color: var(--zino-green);
    font-weight: 700;
    border-bottom-color: var(--zino-green);
}

/* green section heading (توضیحات / مشخصات) — Figma: 12px / 700, distinguished
   from the same-size body only by colour + weight. */
.pd-desc__title {
    color: var(--zino-green);
    font-size: clamp(0.529rem, 0.238vw + 0.474rem, 0.6875rem);
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.pd-desc__media {
    width: 100%;
    object-fit: cover;
}

.pd-desc__body {
    color: var(--zino-text);
    font-size: 0.6875rem;
    line-height: 2;
    text-align: justify;
}

/* expert-review callout — soft green box (Figma #bfe3c9) */
.pd-desc__callout {
    background: var(--zino-green-light);
    color: var(--zino-green);
    padding: var(--space-4) var(--space-5);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    line-height: 2;
    text-align: justify;
}

/* specifications table — full width; the value cell fills the space to the left
   of the right-hand key column, so its divider runs wide (left edge → before the
   key), matching the Figma. */
.pd-specs {
    width: 100%;
    border-collapse: collapse;
}

/* divider sits under the value cell only — the right-hand key column has no
   rule under it (matches Figma). Figma stroke: 0.5px #C3C3C3 (= --zino-text-muted). */
.pd-specs tr + tr .pd-specs__val {
    border-top: 0.5px solid var(--zino-text-muted);
}

/* Figma: key and value share #5B5B5B; the key reads lighter via weight 300,
   the value via weight 400. Keys sit right (RTL first cell), values just left. */
.pd-specs__key {
    width: 1%;
    white-space: nowrap;
    color: var(--zino-text);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    font-weight: 300;
    padding: var(--space-3) 0 var(--space-3) var(--space-5);
}

@media (max-width: 768px) {
    .pd-specs__key {
        font-size: 0.6875rem;
    }

    .pd-specs__val {
        font-size: 0.6875rem !important;
        font-weight: 600 !important;
    }

    .product-desc-tab-content table tr th {
        width: 150px;
    }
}

.pd-specs__val {
    color: var(--zino-text);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    font-weight: 500;
    padding: var(--space-3) 0;
}

/* reviews list (نظرات) — person icon + name + خریدار badge + green stars,
   one thin divider between entries (no card) */
.pd-review {
    padding: var(--space-4) 0;
}

.pd-review + .pd-review {
    border-top: 1px solid var(--zino-border);
}

.pd-review__avatar {
    font-size: 1.75rem; /* ~28px silhouette */
    color: var(--zino-text-sub);
    line-height: 1;
}

.pd-review__name {
    color: var(--zino-text);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    font-weight: 700;
}

.pd-review__badge {
    background: var(--zino-border);
    color: var(--zino-text-sub);
    font-size: clamp(0.5625rem, 0.28vw + 0.4965rem, 0.75rem);
    font-weight: 400;
    padding: var(--space-1) var(--space-2);
}

.pd-review__date {
    color: var(--zino-text-muted);
    font-size: clamp(0.5625rem, 0.28vw + 0.4965rem, 0.75rem);
    margin-inline-start: auto; /* push date to the far (left) end of the row */
}

.pd-review__stars {
    margin-top: var(--space-1);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
}

    .pd-review__stars .bi-star-fill {
        color: var(--zino-green);
    }

    .pd-review__stars .bi-star {
        color: var(--zino-text-placeholder);
    }

.pd-review__text {
    margin: var(--space-3) 0 0;
    color: var(--zino-text);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    line-height: 2;
    text-align: justify;
}

.btn-comment {
    padding: 12px 24px;
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    border-radius: 0;
}
/* ===== Related posts (مطالب مرتبط) — Figma rebuild ======================== */
/* flat header: icon + title + a single bottom rule (no white shadowed card) */
.related-posts-head {
    border-bottom: 1px solid var(--zino-border);
    padding-bottom: var(--space-3);
}

.related-posts-head__icon {
    color: var(--zino-text-sub);
    font-size: clamp(0.75rem, 0.75vw + 0.574rem, 1.25rem);
}

.related-posts-head__title {
    color: var(--zino-text);
    font-size: clamp(0.75rem, 0.75vw + 0.574rem, 1.25rem);
    font-weight: 700;
}

/* flat square cards — drop the legacy rounded/shadow/grayscale look. Scoped to
   .related-posts so the Blog listing cards are untouched. */
.related-posts .blog-item {
    position: relative;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border: 1px solid #DDDDDD;
    transition: transform .2s ease;
}

/* hover: card lifts and a green bar grows in *below* it (Figma: 247×10
   #00AE5E). Hover + ::after → custom CSS. */
.related-posts .blog-item:hover {
    transform: translateY(-8px);
}

.related-posts .blog-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px; /* flush under the card (height 10px), not over its content */
    margin-inline: auto;
    width: 247px;
    max-width: 100%;
    height: 10px;
    background: var(--zino-green);
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
}

.related-posts .blog-item:hover::after {
    transform: scaleX(1);
    opacity: 1;
}

/* Swiper clips overflow; pad it so the lift (top) and the bar (bottom) aren't
   cut off, plus a bottom zone for the nav buttons below the cards. */
.related-posts .product-slider-swiper {
    padding-top: var(--space-3);
    padding-bottom: var(--space-8); /* 64px: nav-button zone under the cards */
}

/* anchor nav to that bottom zone — the inherited site-slider `top:90%` scales
   with swiper height, so on tall mobile slides it lands on the cards. */
.related-posts .swiper-button-next,
.related-posts .swiper-button-prev {
    top: auto;
    bottom: 0;
    margin: 0;
}

    .related-posts .blog-item .image img {
        border-radius: 0;
        filter: none;
    }

    .related-posts .blog-item .title {
        padding: var(--space-4);
    }

/*    .related-posts .blog-item .title-item {
        padding: 0;
    }*/

        .related-posts .blog-item .title-item span,
        .related-posts .blog-item .title-item i {
            color: var(--zino-text-sub);
            font-size: clamp(0.6rem, 0.32vw + 0.525rem, 0.8125rem);
            font-weight: 400;
        }

    .related-posts .blog-item h4 {
        margin-top: var(--space-3);
        color: var(--zino-text);
        font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
        font-weight: 700;
    }

/* ===== Comment form (نظرت در مورد این محصول) — mobile sizing ============== */
/* legacy .btn-comment has 150px side padding; on a narrow phone that squeezes
   the label into a wrap and balloons the button. Shrink it on mobile (it's
   already width:100% there). */
@media (max-width: 575.98px) {
    .comment-form .btn-comment {
        padding: 12px 24px;
        font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    }
}

/* ============================================================
   Add-to-cart modal (Figma node 110-16458)
   Green-strip modal; every row is a flex line laid out in the
   markup (d-flex / justify-content-between) — label on the
   right, value on the left. Custom CSS only for: the green top
   strip, the stepper box, borderless value inputs, the total
   highlight and the footer buttons.
   ============================================================ */
.az-cart-modal .modal-content {
    border-top: 8px solid var(--zino-green); /* Figma green strip */
}

.az-cart-modal .modal-header {
    border-bottom: 1px solid var(--zino-border);
    padding: var(--space-4) var(--space-5);
}

.az-cart-modal .modal-body {
    padding: var(--space-4) var(--space-5);
    text-align: right;
}

/* header: product name + code */
.az-cart-modal .azc-title {
    margin: 0;
    color: var(--zino-text);
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    line-height: 1.5;
}

.az-cart-modal .azc-code {
    margin: var(--space-1) 0 0;
    color: var(--zino-green);
    font-size: 0.9375rem; /* 15px */
    font-weight: 600;
}

/* row label (gray; bold key words inherit the colour, not Bootstrap accents) */
.az-cart-modal .azc-label {
    color: var(--zino-text);
    font-size: 0.75rem; /* 12px */
    line-height: 1.6;
}

.az-cart-modal .azc-label b {
    font-weight: 700;
}

/* all disabled (read-only) inputs in this modal align left */
.az-cart-modal input:disabled {
    text-align: left !important;
}

/* read-only values rendered as plain text — strip all input chrome.
   Two value types both left-align (see input:disabled above) but need their
   own left offset to line up: number inputs reserve spin-button space on the
   RTL (left) side, so they get a corrective negative margin; price inputs
   (type=text) sit flush. Tune the two margin-left values to taste. */
.az-cart-modal input.azc-value {
    width: auto;
    max-width: 160px;
    margin-left: 38px; /* number values */
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 1rem; /* 16px */
    font-weight: 600;
    color: var(--zino-text);
}

.az-cart-modal input.azc-value:disabled {
    opacity: 1; /* browsers dim disabled inputs; we want full-strength text */
}

.az-cart-modal input.azc-value--muted {
    color: var(--zino-text-muted);
    font-weight: 400;
}

.az-cart-modal input.azc-value--green {
    color: var(--zino-green);
    font-weight: 700;
}

/* price value group: per-unit micro-label + green figure + "تومان".
   Pushed to the left by the row's justify-between, so "تومان" (the leftmost
   item) aligns on one vertical line and the figures stack just to its right. */
.az-cart-modal .azc-priceval {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* green figure (Figma: 16px SemiBold) */
.az-cart-modal .azc-amount {
    color: var(--zino-green);
    font-size: 1rem; /* 16px */
    font-weight: 700;
}

.az-cart-modal .azc-amount--total {
    font-size: 1.125rem; /* 18px */
}

/* micro-labels — per-unit ("هر عدد") and currency ("تومان"): #000, 10px, 300 */
.az-cart-modal .azc-per,
.az-cart-modal .azc-cur {
    color: var(--zino-ink);
    font-size: 0.625rem; /* 10px */
    font-weight: 300;
    text-align: right;
    white-space: nowrap;
}

/* total row: light gray highlight band + bigger green figure */
.az-cart-modal .azc-total {
    background: var(--zino-surface);
    padding: var(--space-2) var(--space-3);
    margin-inline: calc(-1 * var(--space-3));
}

/* divider — Figma: 1px #DDD, sits under the first price row */
.az-cart-modal .azc-sep {
    margin: var(--space-4) 0;
    border: 0;
    border-top: 1px solid var(--zino-border-strong);
    opacity: 1;
}

/* quantity stepper (Figma): plain gray +/- glyphs, number in a green box.
   Scoped to the modal so the site-wide blue/red stepper is untouched. */
.az-cart-modal .quantity.buttons_added {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.az-cart-modal .quantity.buttons_added .minus,
.az-cart-modal .quantity.buttons_added .plus {
    height: auto;
    padding: 0 var(--space-2);
    border: 0;
    background: transparent;
    border-radius: 0;
    color: var(--zino-text);
    font-size: 1.25rem;
    line-height: 1;
}

.az-cart-modal .quantity.buttons_added .minus:hover,
.az-cart-modal .quantity.buttons_added .plus:hover {
    border: 0;
    background: transparent;
    color: var(--zino-green);
}

.az-cart-modal .quantity .input-text.qty {
    width: 56px;
    height: 36px;
    border: 1px solid var(--zino-green);
    border-radius: 0;
    color: var(--zino-text);
    font-size: 0.875rem;
    font-weight: 700;
}

/* "تعداد بیشتری نیاز داری؟" disclosure link */
.az-cart-modal .azc-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--zino-text);
    font-size: 0.85rem;
    font-weight: 600;
}

.az-cart-modal .azc-more:hover {
    color: var(--zino-green);
}

    .az-cart-modal .azc-more i {
        font-size: 0.95rem;
        font-weight: bolder;
    }

.az-cart-modal .azc-help {
    border-radius: 0;
    border-color: var(--zino-border);
    color: var(--zino-text);
    font-size: 0.6875rem;
    line-height: 2;
    text-align: justify;
}

.az-cart-modal .azc-lastorder {
    border: 1px solid var(--zino-border);
    padding: var(--space-2);
    color: var(--zino-text);
    font-size: 0.75rem;
}

/* footer: flat rectangular buttons — green save, gray cancel (Figma).
   modal-footer is flex-end → in RTL the pair sits at the left edge. */
.az-cart-modal .modal-footer {
    border-top: 0;
    padding: var(--space-4) var(--space-5);
    gap: var(--space-3);
}

.az-cart-modal .azc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 var(--space-5);
    border: 0;
    border-radius: 0;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

/* save: slanted green CTA (cut top-left corner) like .pc-cart-btn. The green
   lives on a ::before layer so the slant can't clip the label. */
.az-cart-modal .azc-btn--save {
    position: relative;
    isolation: isolate;
    z-index: 0;
    min-width: 140px;
    background: transparent;
    overflow: hidden;
}

.az-cart-modal .azc-btn--save::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--zino-green);
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
    transition: background 0.2s ease;
}

.az-cart-modal .azc-btn--save:hover::before {
    background: var(--zino-green-hover);
}

.az-cart-modal .azc-btn--cancel {
    min-width: 72px;
    background: var(--zino-text-sub);
}

.az-cart-modal .azc-btn--cancel:hover {
    background: #7f8285;
}