/**
 * Navid home page — tablet (Figma 298:13674, 744px frame)
 * Mobile: max-width 767px | Tablet: 768px–1279px | Desktop: 1280px+
 */

/* Home + product detail related — click flash ring — Figma 433:20459 */
body.navid-home-page-active .home-widgets-stack .navid-products-section .navid-pc,
body.navid-product-page-active .navid-product-related.navid-products-section .navid-pc {
    position: relative;
}

body.navid-home-page-active .home-widgets-stack .navid-products-section .navid-pc.navid-pc--selected::before,
body.navid-product-page-active .navid-product-related.navid-products-section .navid-pc.navid-pc--selected::before {
    content: '';
    position: absolute;
    inset: -16px;
    border: 1.5px solid var(--navid-blue);
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
}

body.navid-home-page-active .home-widgets-stack .navid-products-section .navid-products-carousel,
body.navid-product-page-active .navid-product-related.navid-products-section .navid-products-carousel {
    align-items: center;
}

body.navid-home-page-active .home-widgets-stack .navid-products-section .navid-products-carousel .navid-products-swiper.swiper-container,
body.navid-product-page-active .navid-product-related.navid-products-section .navid-products-carousel .navid-products-swiper.swiper-container {
    align-self: stretch;
    box-sizing: content-box;
    padding-block: 16px;
    margin-block: -16px;
    padding-inline: 16px;
    margin-inline: -16px;
    overflow-clip-margin: 16px;
    -webkit-clip-path: inset(-16px);
    clip-path: inset(-16px);
}

body.navid-home-page-active .home-widgets-stack .navid-products-section .navid-products-carousel .swiper-wrapper,
body.navid-home-page-active .home-widgets-stack .navid-products-section .navid-products-carousel .swiper-slide,
body.navid-product-page-active .navid-product-related.navid-products-section .navid-products-carousel .swiper-wrapper,
body.navid-product-page-active .navid-product-related.navid-products-section .navid-products-carousel .swiper-slide {
    overflow: visible;
}

body.navid-home-page-active .home-widgets-stack .navid-products-section .navid-products-carousel .swiper-slide,
body.navid-product-page-active .navid-product-related.navid-products-section .navid-products-carousel .swiper-slide {
    box-sizing: border-box;
}

@media (max-width: 767px) {
    body.navid-home-page-active .home-widgets-stack .navid-products-section .navid-pc.navid-pc--selected::before,
    body.navid-product-page-active .navid-product-related.navid-products-section .navid-pc.navid-pc--selected::before {
        inset: -8px;
    }

    body.navid-home-page-active .home-widgets-stack .navid-products-section .navid-products-mobile-scroll,
    body.navid-product-page-active .navid-product-related.navid-products-section .navid-products-mobile-scroll {
        box-sizing: border-box;
        padding-block: 8px;
        margin-block: -8px;
    }

    body.navid-home-page-active .home-widgets-stack .navid-products-section .navid-products-mobile-scroll__item,
    body.navid-product-page-active .navid-product-related.navid-products-section .navid-products-mobile-scroll__item {
        box-sizing: border-box;
    }

    body.navid-home-page-active .home-widgets-stack .navid-products-section .navid-products-carousel .navid-products-swiper.swiper-container,
    body.navid-product-page-active .navid-product-related.navid-products-section .navid-products-carousel .navid-products-swiper.swiper-container {
        padding-block: 8px;
        margin-block: -8px;
        padding-inline: 8px;
        margin-inline: -8px;
        overflow-clip-margin: 8px;
        -webkit-clip-path: inset(-8px);
        clip-path: inset(-8px);
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .home-widgets-stack {
        --home-widget-gap: 56px;
    }

    .home-widget-item--fullscreen-slider {
        margin-bottom: 56px;
    }

    .main-content.dt-sl:has(.home-widget-item--fullscreen-slider) {
        margin-bottom: 56px;
    }

    /* Hero — desktop layout, Figma iPad frame height 480px @ 744px (not mobile 390×623) */
    .fullscreen-slider--desktop .carousel-inner,
    .fullscreen-slider--desktop .carousel-item,
    .fullscreen-slider--desktop .carousel-item.active {
        height: clamp(480px, calc(100vw * 480 / 744), 520px);
        min-height: 480px;
        max-height: 520px;
    }

    .fullscreen-slider--desktop .fullscreen-slider__slide {
        height: 100%;
        min-height: 480px;
        max-height: 520px;
    }

    /*
     * Tablet hero diagonal (Figma 298:13674) — width-based cut, not 100cqh.
     * Desktop slope at H=480 shrinks the grey panel; ~25% base / ~72% top matches iPad frame.
     */
    .fullscreen-slider--desktop .fullscreen-slider__slide {
        --fs-tablet-shape-base: 25%;
        --fs-tablet-shape-top: 72%;
    }

    .fullscreen-slider--desktop .fullscreen-slider__image {
        clip-path: polygon(
            0 0,
            var(--fs-tablet-shape-top) 0,
            calc(var(--fs-tablet-shape-base) + var(--fullscreen-slider-seam)) 100%,
            0 calc(100% + var(--fullscreen-slider-seam))
        );
    }

    .fullscreen-slider--desktop .fullscreen-slider__shape-edge {
        clip-path: polygon(
            calc(
                    var(--fs-tablet-shape-base) - var(--fullscreen-slider-edge) -
                        var(--fullscreen-slider-seam)
                )
                calc(100% + var(--fullscreen-slider-seam)),
            calc(var(--fs-tablet-shape-base) + var(--fullscreen-slider-seam))
                calc(100% + var(--fullscreen-slider-seam)),
            calc(var(--fs-tablet-shape-top) + var(--fullscreen-slider-seam)) 0,
            calc(var(--fs-tablet-shape-top) - var(--fullscreen-slider-edge)) 0
        );
    }

    .fullscreen-slider--desktop .fullscreen-slider__shape-fill {
        clip-path: polygon(
            var(--fs-tablet-shape-top) 0,
            calc(100% + var(--fullscreen-slider-seam)) 0,
            calc(100% + var(--fullscreen-slider-seam)) calc(100% + var(--fullscreen-slider-seam)),
            var(--fs-tablet-shape-base) calc(100% + var(--fullscreen-slider-seam))
        );
        background: linear-gradient(180deg, #ededee 42.43%, #fff 100%);
    }

    .fullscreen-slider--desktop .fullscreen-slider__panel {
        clip-path: polygon(
            var(--fs-tablet-shape-top) 0,
            100% 0,
            100% 100%,
            var(--fs-tablet-shape-base) 100%
        );
    }

    /* Home product cards — no add-to-cart row (same as mobile strip) */
    .home-widgets-stack .navid-products-section .navid-pc__actions {
        display: none !important;
    }

    /* ── Product widgets: 4-column row (not mobile strip) ── */
    .navid-products-section--with-tabs,
    .navid-products-section--home-mobile,
    .navid-products-section--discount {
        --navid-product-gap: 24px;
        --navid-carousel-gap: 16px;
        gap: var(--navid-product-gap);
    }

    .navid-products-section--colorful {
        --navid-product-gap: 24px;
        gap: var(--navid-product-gap);
        margin: 0;
    }

    .navid-products-section--with-tabs .navid-product-toolbar {
        display: none !important;
    }

    .navid-products-section--with-tabs .navid-products-header--mobile-only,
    .navid-products-section--home-mobile .navid-products-header,
    .navid-products-section--discount .navid-products-header,
    .navid-products-header--home-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-inline: 0;
        box-sizing: border-box;
    }

    .navid-products-section--with-tabs:not(.navid-products-section--with-icon)
        .navid-products-header--mobile-only
        .widget-products-title__icon {
        display: none;
    }

    .navid-products-section--home-mobile .navid-products-header__title,
    .navid-products-section--with-tabs .navid-products-header--mobile-only .navid-products-header__title,
    .navid-products-section--discount .navid-products-header__title,
    .navid-products-header--home-mobile .navid-products-header__title,
    .navid-products-section--with-icon .navid-products-header__title,
    .navid-products-section--with-icon .widget-products-title__heading {
        font-size: 20px;
        font-weight: 500;
        padding: 4px 0;
    }

    .navid-products-section--with-icon .navid-products-header__title,
    .navid-products-section--with-icon .widget-products-title__heading {
        font-weight: 600;
    }

    .navid-products-section--discount.navid-products-section--with-icon
        .navid-products-header__title,
    .navid-products-section--discount.navid-products-section--with-icon
        .widget-products-title__heading {
        color: var(--navid-error);
    }

    .navid-products-section--home-mobile .navid-products-header__more,
    .navid-products-section--with-tabs .navid-products-header--mobile-only .navid-products-header__more,
    .navid-products-section--discount .navid-products-header__more,
    .navid-products-header--home-mobile .navid-products-header__more {
        gap: 8px;
        min-height: 48px;
        padding: 12px 0;
        font-size: 14px;
    }

    .navid-products-section--discount .navid-products-discount-timer {
        padding-inline: 0;
        font-size: 14px;
    }

    .navid-products-mobile-scroll {
        display: none !important;
    }

    .navid-products-section--with-tabs .navid-products-carousel--desktop,
    .navid-products-section--home-mobile .navid-products-carousel--desktop,
    .navid-products-section--discount .navid-products-carousel--desktop,
    .navid-products-section--colorful .navid-products-carousel--desktop {
        display: flex !important;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .navid-products-carousel .navid-products-swiper.swiper-container {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .navid-products-carousel .swiper-wrapper {
        display: flex;
        align-items: stretch;
    }

    .navid-products-carousel .swiper-slide {
        flex-shrink: 0;
        width: auto;
        height: auto;
        box-sizing: border-box;
    }

    .navid-products-carousel .navid-pc {
        gap: 8px;
    }

    .navid-products-carousel .navid-pc__content {
        gap: 8px;
    }

    .navid-products-carousel .navid-pc__info {
        gap: 16px;
    }

    .navid-products-carousel .navid-pc__title {
        font-size: 12px;
        font-weight: 500;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navid-products-carousel .navid-pc__meta {
        font-size: 10px;
        text-align: right;
    }

    .navid-products-carousel .navid-pc__inline-rating {
        display: none !important;
    }

    .navid-products-carousel .navid-pc__rating-badge {
        left: 4px;
        bottom: 4px;
        height: 24px;
        padding: 4px 6px 4px 4px;
        gap: 2px;
    }

    .navid-products-carousel .navid-pc__rating-badge span {
        font-size: 10px;
    }

    .navid-products-carousel .navid-pc__star {
        font-size: 12px;
    }

    .navid-products-carousel .navid-pc__price-row {
        margin-top: 0;
        padding: 0;
        gap: 4px;
    }

    .navid-products-carousel .navid-pc__currency {
        font-size: 10px;
    }

    .navid-products-carousel .navid-pc__price {
        font-size: 14px;
        font-weight: 600;
    }

    .navid-products-carousel .navid-pc__price-row--sale {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 28px;
        grid-template-rows: auto auto;
        column-gap: 4px;
        row-gap: 0;
        align-items: start;
    }

    .navid-products-carousel .navid-pc__price-row--sale .navid-pc__price-main {
        grid-column: 1;
        grid-row: 1;
    }

    .navid-products-carousel .navid-pc__price-row--sale .navid-pc__discount-group {
        display: contents;
    }

    .navid-products-carousel .navid-pc__price-row--sale .navid-pc__discount-pill {
        grid-column: 2;
        grid-row: 1;
        width: 28px;
        height: 24px;
        font-size: 10px;
    }

    .navid-products-carousel .navid-pc__price-row--sale .navid-pc__old {
        grid-column: 1;
        grid-row: 2;
        font-size: 10px;
    }

    /* ── Blog (مجله نوید) — 3 cards in a row ── */
    .navid-posts-section--home-mobile {
        margin: 0;
        gap: 24px;
    }

    .navid-posts-section--home-mobile .navid-products-header {
        padding-inline: 16px;
    }

    .navid-posts-section--home-mobile .navid-posts-mobile-scroll {
        display: none !important;
    }

    .navid-posts-section--home-mobile .navid-posts-carousel--desktop {
        display: flex !important;
        padding-inline: 16px;
        box-sizing: border-box;
    }

    .navid-posts-section--home-mobile .navid-post-card__media {
        height: 140px;
    }

    /* ── Services — desktop bar (4 columns) ── */
    .navid-services--home-mobile {
        margin: 32px 0;
        padding: 0 48px;
    }

    .navid-services--home-mobile .navid-services__desktop {
        display: block !important;
    }

    .navid-services--home-mobile .navid-services__mobile-grid {
        display: none !important;
    }

    .navid-services--home-mobile .navid-services__inner {
        max-width: 100%;
        padding: 0;
    }

    .navid-services--home-mobile .navid-services__item {
        min-height: 71px;
        padding: 0 40px 16px;
        gap: 8px;
    }

    .navid-services--home-mobile .navid-services__icon {
        min-height: 26px;
        max-height: 26px;
    }

    .navid-services--home-mobile .navid-services__icon img {
        max-height: 26px;
    }

    .navid-services--home-mobile .navid-services__label {
        font-size: 12px;
    }

    /* ── About block (Figma 795:17896, 744×414) ── */
    .navid-about-block-breakout {
        margin-top: 0;
        margin-bottom: 0;
    }

    .navid-about-block {
        --navid-about-h: 414px;
        --navid-about-pad-top: 40px;
        --navid-about-content-w: 358px;
        /* Figma decor group 795:17236 @ 744×414 */
        --navid-about-decor-left: 59.81%;
        --navid-about-decor-top: -22.9%;
        --navid-about-decor-width: 87.63%;
        --navid-about-decor-height: 150.57%;
        min-height: var(--navid-about-h);
    }

    .navid-about-block__decor {
        top: var(--navid-about-decor-top);
        left: var(--navid-about-decor-left);
        right: auto;
        bottom: auto;
        width: var(--navid-about-decor-width);
        height: var(--navid-about-decor-height);
        max-width: none;
    }

    .navid-about-block__decor-img {
        object-fit: contain;
        object-position: left top;
    }

    /* Figma: left 56px, width 358px, padding-top 40px */
    .navid-about-block__inner {
        max-width: none;
        width: 100%;
        margin: 0;
        padding: var(--navid-about-pad-top) 0 0 56px;
        box-sizing: border-box;
    }

    .navid-about-block__copy {
        gap: 8px;
        width: 100%;
        max-width: var(--navid-about-content-w);
    }

    .navid-about-block__title {
        font-size: 24px;
        font-weight: 500;
    }

    .navid-about-block__description {
        font-size: 13px;
        text-align: justify;
    }

    /* Figma: 24px between description and button, button 176×56 left-aligned */
    .navid-about-block__body {
        gap: 24px;
        align-items: flex-start;
    }

    .navid-about-block__link {
        width: auto;
        min-width: 176px;
        max-width: 100%;
        align-self: flex-end;
    }

    /* ── Promo / middle banner ── */
    .navid-promo-block {
        margin: 0;
    }

    .navid-promo-block--has-mobile-banner .navid-promo-block__surface {
        height: 168px;
        min-height: 168px;
        aspect-ratio: auto;
    }

    .navid-promo-block--has-mobile-banner .navid-promo-block__mobile-img {
        height: 100%;
        object-fit: cover;
    }

    .navid-promo-block:not(.navid-promo-block--has-mobile-banner) .navid-promo-block__surface {
        height: 168px;
        min-height: 168px;
        aspect-ratio: auto;
    }

    .navid-promo-block:not(.navid-promo-block--has-mobile-banner) .navid-promo-block__content {
        max-width: 420px;
        padding: 24px;
    }
}