:root {
        --pays-ink: #172033;
        --pays-muted: #718096;
        --pays-primary: #5b4bdb;
        --pays-primary-dark: #4336b5;
        --pays-soft: #f5f6ff;
        --pays-border: #e8eaf2;
        --pays-card: #ffffff;
        --pays-shadow: 0 18px 45px rgba(27, 32, 54, .08);
        --pays-radius: 22px;
    }

    * {
        box-sizing: border-box
    }

    body {
        background: #f7f8fc;
        color: var(--pays-ink);
        font-family: Arial, Helvetica, sans-serif;
    }

    .pays-page {
        min-height: 70vh
    }

    .pays-hero {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, #161a2c 0%, #29204c 55%, #4c3db7 100%);
        color: #fff;
        padding: 58px 0 54px
    }

    .pays-hero:after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 1px;
        background: rgba(255, 255, 255, .18)
    }

    .pays-hero-inner {
        position: relative;
        z-index: 2;
        max-width: 1120px
    }

    .pays-hero-glow {
        position: absolute;
        border-radius: 50%;
        filter: blur(5px);
        pointer-events: none
    }

    .pays-hero-glow-one {
        width: 300px;
        height: 300px;
        right: -70px;
        top: -120px;
        background: rgba(142, 126, 255, .24)
    }

    .pays-hero-glow-two {
        width: 220px;
        height: 220px;
        left: -100px;
        bottom: -150px;
        background: rgba(255, 255, 255, .09)
    }

    .pays-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 13px;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 999px;
        background: rgba(255, 255, 255, .08);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .12em;
        margin-bottom: 18px
    }

    .pays-hero h1 {
        font-size: clamp(2rem, 4vw, 3.35rem);
        line-height: 1.05;
        letter-spacing: -.045em;
        font-weight: 850;
        max-width: 760px;
        margin: 0 0 15px
    }

    .pays-hero h1 span {
        color: #bdb5ff
    }

    .pays-hero p {
        max-width: 720px;
        color: rgba(255, 255, 255, .76);
        font-size: 1rem;
        line-height: 1.65;
        margin: 0 0 28px
    }

    .pays-search {
        display: flex;
        align-items: center;
        max-width: 800px;
        min-height: 62px;
        background: #fff;
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 17px;
        padding: 6px;
        box-shadow: 0 16px 45px rgba(0, 0, 0, .18)
    }

    .pays-search-icon {
        width: 45px;
        text-align: center;
        font-size: 1.8rem;
        color: #777f91;
        line-height: 1
    }

    .pays-search input {
        border: 0;
        outline: 0;
        flex: 1;
        min-width: 0;
        height: 48px;
        color: #20283a;
        font-size: .95rem;
        background: transparent
    }

    .pays-search input::placeholder {
        color: #9aa1af
    }

    .pays-search button {
        border: 0;
        background: var(--pays-primary);
        color: #fff;
        font-weight: 800;
        border-radius: 12px;
        padding: 14px 22px;
        min-height: 48px
    }

    .pays-search button:hover {
        background: var(--pays-primary-dark)
    }

    .pays-search-reset {
        color: #7d8492;
        text-decoration: none;
        font-size: 1.5rem;
        padding: 8px
    }

    .pays-content {
        padding-top: 38px;
        padding-bottom: 55px
    }

    .country-selector {
        margin-bottom: 34px
    }

    .section-heading,
    .catalog-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 16px
    }

    .section-eyebrow {
        display: block;
        color: var(--pays-primary);
        font-size: .68rem;
        font-weight: 900;
        letter-spacing: .16em;
        margin-bottom: 5px
    }

    .section-heading h2,
    .catalog-heading h2 {
        margin: 0;
        font-size: 1.42rem;
        letter-spacing: -.025em;
        font-weight: 850
    }

    .result-counter,
    .catalog-meta {
        font-size: .82rem;
        color: var(--pays-muted);
        font-weight: 700
    }

    .country-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 10px
    }

    .country-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 15px;
        border: 1px solid var(--pays-border);
        border-radius: 999px;
        background: #fff;
        color: #515b70;
        text-decoration: none;
        font-size: .84rem;
        font-weight: 750;
        transition: .2s ease;
        box-shadow: 0 5px 16px rgba(30, 36, 60, .035)
    }

    .country-chip:hover {
        border-color: #cfc9ff;
        color: var(--pays-primary);
        transform: translateY(-1px)
    }

    .country-chip.active {
        background: var(--pays-primary);
        border-color: var(--pays-primary);
        color: #fff;
        box-shadow: 0 9px 22px rgba(91, 75, 219, .23)
    }

    .chip-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #c5cad6
    }

    .country-chip.active .chip-dot {
        background: #fff
    }

    .active-search {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: -5px 0 25px;
        padding: 11px 14px;
        border: 1px solid #ddd9ff;
        background: #f8f7ff;
        border-radius: 12px;
        color: #626a7d;
        font-size: .83rem
    }

    .active-search strong {
        color: var(--pays-primary)
    }

    .active-search a {
        margin-left: auto;
        color: var(--pays-primary);
        font-weight: 800;
        text-decoration: none
    }

    .catalog-section {
        position: relative
    }

    .country-products {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 15px
    }

    .country-product-card {
        position: relative;
        min-width: 0;
        background: var(--pays-card);
        border: 1px solid var(--pays-border);
        border-radius: var(--pays-radius);
        overflow: hidden;
        box-shadow: var(--pays-shadow);
        transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease
    }

    .country-product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 55px rgba(27, 32, 54, .13);
        border-color: #dddff0
    }

    .product-media {
        position: relative;
        aspect-ratio: 1/1;
        overflow: hidden;
        background: #eef0f6
    }

    .product-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .45s ease
    }

    .country-product-card:hover .product-media img {
        transform: scale(1.045)
    }

    .media-link {
        position: absolute;
        inset: 0;
        z-index: 2
    }

    .image-shade {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(8, 10, 20, .23), transparent 35%, transparent 65%, rgba(8, 10, 20, .08));
        pointer-events: none;
        z-index: 1
    }

    .media-top {
        position: absolute;
        z-index: 4;
        left: 10px;
        right: 10px;
        top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        pointer-events: none
    }

    .type-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(255, 255, 255, .94);
        color: #333b4e;
        border: 1px solid rgba(255, 255, 255, .75);
        border-radius: 999px;
        padding: 6px 9px;
        font-size: .65rem;
        font-weight: 850;
        box-shadow: 0 6px 16px rgba(0, 0, 0, .09);
        white-space: nowrap
    }

    .media-actions {
        pointer-events: auto
    }

    .share-btn {
        width: 34px;
        height: 34px;
        border: 1px solid rgba(255, 255, 255, .7);
        border-radius: 50%;
        background: rgba(255, 255, 255, .94);
        color: #454d61;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        box-shadow: 0 6px 16px rgba(0, 0, 0, .1)
    }

    .share-btn:hover {
        background: #fff;
        color: var(--pays-primary)
    }

    .share-dropdown .dropdown-menu {
        z-index: 20;
        border: 0;
        border-radius: 13px;
        box-shadow: 0 18px 35px rgba(20, 24, 40, .16);
        font-size: .82rem;
        padding: 7px
    }

    .video-btn {
        position: absolute;
        z-index: 5;
        left: 10px;
        bottom: 10px;
        width: 37px;
        height: 37px;
        border: 0;
        border-radius: 50%;
        background: rgba(91, 75, 219, .94);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
        cursor: pointer
    }

    .video-btn:hover {
        background: var(--pays-primary-dark);
        transform: scale(1.04)
    }

    .product-body {
        padding: 14px 14px 15px
    }

    .product-body h3 {
        font-size: .94rem;
        line-height: 1.25;
        font-weight: 600;
        margin: 0 0 7px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #484c51;
    }

    .product-description {
        font-size: 13px;
        line-height: 1.42;
        color: #7a8292;
        margin: 0 0 13px;
        height: 2.85em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }

    .product-bottom {
        display: flex;
        flex-direction: column;
        gap: 6px
    }

    .product-price {
        color: var(--pays-primary);
        font-size: 12px;
        line-height: 1.35;
    }

    .product-location {
        color: #8790a1;
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .load-more-status {
        min-height: 54px;
        margin: 27px auto 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        color: #7d8596;
        font-size: .78rem;
        font-weight: 700
    }

    .load-more-status span:last-child {
        font-size: .78rem
    }

    .loader-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--pays-primary);
        box-shadow: 0 0 0 6px rgba(91, 75, 219, .10);
        animation: pulse-pays 1.2s infinite
    }

    @keyframes pulse-pays {

        0%,
        100% {
            transform: scale(.75);
            opacity: .55
        }

        50% {
            transform: scale(1);
            opacity: 1
        }
    }

    .load-more-status a {
        color: var(--pays-primary);
        text-decoration: none
    }

    .legacy-pagination {
        margin-top: 10px
    }

    .legacy-pagination {
        display: none !important;
    }

    .pagination-hidden {
        display: none !important
    }

    .js-fallback-pagination {
        display: block !important;
    }

    .legacy-pagination .page-link {
        border: 1px solid var(--pays-border);
        color: #60697b;
        border-radius: 9px !important;
        margin: 0 3px;
        font-size: .8rem;
        font-weight: 700
    }

    .legacy-pagination .active .page-link {
        background: var(--pays-primary);
        border-color: var(--pays-primary);
        color: #fff
    }

    .pays-empty {
        background: #fff;
        border: 1px dashed #dfe2eb;
        border-radius: 22px;
        padding: 50px 25px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(25, 31, 52, .04)
    }

    .empty-icon {
        font-size: 2.7rem;
        margin-bottom: 10px
    }

    .pays-empty h3 {
        font-size: 1.05rem;
        font-weight: 850;
        margin-bottom: 7px
    }

    .pays-empty p {
        color: #7a8393;
        font-size: .85rem;
        margin: 0
    }

    .pays-empty-results {
        margin-top: 15px
    }

    .empty-action {
        display: inline-flex;
        margin-top: 18px;
        padding: 10px 15px;
        border-radius: 11px;
        background: var(--pays-primary);
        color: #fff;
        text-decoration: none;
        font-size: .8rem;
        font-weight: 800
    }

    @media (max-width:1399px) {
        .country-products {
            grid-template-columns: repeat(5, minmax(0, 1fr))
        }
    }

    @media (max-width:1199px) {
        .country-products {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }
    }

    @media (max-width:767px) {
        .pays-hero {
            padding: 40px 0 38px
        }

        .pays-hero h1 {
            font-size: 2rem
        }

        .pays-hero p {
            font-size: .9rem
        }

        .pays-search {
            min-height: 56px
        }

        .pays-search-icon {
            width: 35px;
            font-size: 1.55rem
        }

        .pays-search button {
            padding: 11px 13px;
            font-size: .78rem
        }

        .pays-content {
            padding-top: 28px
        }

        .section-heading,
        .catalog-heading {
            align-items: flex-start
        }

        .section-heading h2,
        .catalog-heading h2 {
            font-size: 1.2rem
        }

        .country-products {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px
        }

        .country-product-card {
            border-radius: 16px
        }

        .product-body {
            padding: 11px
        }

        .product-body h3 {
            font-size: .8rem
        }

        .product-description {
            font-size: 12px;
            margin-bottom: 10px
        }

        .product-price {
            font-size: 12px;
        }

        .product-location {
            font-size: 11px;
        }

        .type-badge {
            font-size: .56rem;
            padding: 5px 7px
        }

        .share-btn {
            width: 30px;
            height: 30px;
            font-size: .9rem
        }

        .video-btn {
            width: 32px;
            height: 32px;
            left: 8px;
            bottom: 8px;
            font-size: .75rem
        }
    }

    @media (max-width:420px) {
        .country-products {
            gap: 8px
        }

        .product-body {
            padding: 9px
        }

        .product-description {
            height: 12px;
        }

        .pays-search button {
            padding-left: 10px;
            padding-right: 10px
        }
    }


    
    .product-media {
        position: relative;
    }

    .az-stock-badge {
        position: absolute;
        z-index: 12;
        top: 10px;
        left: 10px;
        display: inline-flex;
        align-items: center;
        max-width: calc(100% - 20px);
        padding: 6px 9px;
        border: 1px solid rgba(255, 255, 255, .45);
        border-radius: 999px;
        background: #dc2626;
        color: #fff;
        font-size: 9px;
        line-height: 1.15;
        font-weight: 850;
        letter-spacing: .025em;
        box-shadow: 0 4px 12px rgba(127, 29, 29, .22);
        white-space: nowrap;
        pointer-events: none;
    }

    .az-stock-badge.reserved {
        background: #b45309;
    }

    .az-stock-badge.occupied {
        background: #991b1b;
    }

    @media (max-width: 767px) {
        .az-stock-badge {
            top: 7px;
            left: 7px;
            padding: 5px 7px;
            font-size: 8px;
        }
    }