/* HomeStyle 508 */

@media (max-width: 820px){
    .cooperation-card {
        padding: 15px !important;
    }
    .legal-hero, .cooperation-side, .contact-side {
        width: 100% !important;
        min-width: 100% !important;
    }
    .legal-shell {
        display: block !important;
    }
}

textarea{
    min-height: 125px;
    max-height: 200px;
}
.legal-hero, .cooperation-side, .contact-side {
    width: 30vw !important;
    min-width: 30vw;
}
.shop-profile-link:hover{
    background-color: #f5f5f5;
}
.hero-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 28px;
    position: relative;
}
.hero-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    padding-bottom: 32px;
}
.hero-timeline-item:last-child {
    padding-bottom: 0;
}
.hero-timeline-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.hero-timeline-number svg {
    width: 18px;
    height: 18px;
}
.hero-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 36px;
    right: 17px;
    width: 1px;
    height: calc(100% - 36px);
    border-right: 1px dashed rgba(255, 255, 255, 0.35);
}
.hero-timeline-text h4, .hero-timeline-text span {
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 6px 0;
}
.hero-timeline-text p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}
input[type="password"]::-ms-reveal , input[type="password"]::-ms-clear {
    display: none;
}
.pub-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Hero ===== */
.card {
    height: 200px !important;
    width: 300px !important;
}

.plogo {
    display: flex;
}

.plogo img {
    height: 160px;
    opacity: 0.4;
}

.hero {
    background-image: linear-gradient(135deg, #172a4b 0%, #294477 55%, #31588a 100%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 520px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    background: linear-gradient(180deg, rgba(3, 15, 35, .12), rgba(2, 20, 34, .30));
}

.hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    width: auto;
    height: 150px;
    background: linear-gradient(0deg, rgba(3, 24, 36, .52), transparent);
}

.hero-content {
    position: relative;
    z-index: 1;
    color: white;
    max-width: 600px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}

.hero h1 {
    font-size: 42px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 16px;
}

.hero h1 span {
    color: #9AABC8;
}

.hero p {
    font-size: 15px;
    opacity: 0.8;
    line-height: 1.8;
    margin-bottom: 32px;
}

.hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-primary-pub {
    background: white;
    color: var(--primary);
    padding: 13px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: .2s;
    border: none;
    cursor: pointer;
}

.btn-primary-pub:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.btn-outline-pub {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 13px 28px;
    border-radius: 12px;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: .2s;
    cursor: pointer;
}

.btn-outline-pub:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* ===== آمار ===== */
.stats-bar {
    background: white;
    box-shadow: 0 4px 24px var(--shadow);
    padding: 28px 0;
}

.stats-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stat-item {
    text-align: center;
    padding: 8px;
    border-left: 1px solid var(--border);
}

.stat-item:last-child {
    border-left: none;
}

.stat-item .num {
    font-size: 32px;
    font-weight: bold;
    color: var(--primary);
    display: block;
}

.stat-item .lbl {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 4px;
    display: block;
}

/* ===== محصول ===== */
.section {
    padding: 60px 0;
}

#products {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #F5F7FB;
}

#products::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('../img/products-background-v2.webp') center center / cover no-repeat;
    opacity: .42;
    pointer-events: none;
}

#products::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(247, 249, 252, .48), rgba(243, 246, 251, .38));
    pointer-events: none;
}

#products > .pub-container {
    position: relative;
    z-index: 1;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 28px;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 8px;
}

.section-header p {
    color: var(--text-light);
    font-size: 14px;
}

.section-divider-line {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--menu-active));
    border-radius: 2px;
    margin: 12px auto 0;
}

.product-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px var(--shadow);
    max-width: 500px;
    margin: 0 auto;
    transition: .3s;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(42, 62, 108, 0.15);
}

.product-img {
    background: linear-gradient(135deg, #f0f4ff, #e8eef8);
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    color: var(--primary);
    opacity: 0.3;
}

.product-body {
    padding: 24px;
}

.product-badge {
    display: inline-block;
    background: #EEF2FF;
    color: var(--primary);
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 12px;
}

.product-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--text);
    margin-bottom: 8px;
}

.product-desc {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 20px;
}

.product-specs {
    background: var(--background);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.product-spec-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.product-spec-item:last-child {
    border-bottom: none;
}

.product-spec-item .spec-label {
    color: var(--text-light);
}

.product-actions {
    display: flex;
    gap: 10px;
}

.btn-buy {
    flex: 1;
    background: linear-gradient(135deg, var(--primary), var(--menu-active));
    color: white;
    border: none;
    border-radius: 12px;
    padding: 13px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.btn-buy:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-buy.disabled {
    background: var(--border);
    color: var(--text-light);
    cursor: default;
    pointer-events: none;
}

/* ویترین سه‌بعدی محصولات */
.products-showcase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 980px;
    margin: 0 auto;
    perspective: 1200px;
}

.bundle-showcase {
    grid-template-columns:minmax(0, 1fr);
    max-width: 1240px;
}

.products-showcase .bundle-product-card {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    min-height: 430px;
}

.bundle-products-visual {
    position: relative;
    min-height: 430px;
    padding: 34px 20px 38px;
    display: block;
    background: radial-gradient(circle at 50% 42%, #fff 0 18%, rgba(222, 234, 249, .88) 58%, rgba(190, 214, 241, .7) 100%);
    overflow: hidden;
}

.bundle-products-track {
    width: 100%;
    min-height: 350px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 14px;
    overflow: hidden;
    padding: 4px 6px;
}

.bundle-product-view {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 300px;
    justify-self: center;
}

.bundle-product-view:only-child {
    grid-column: 1/-1;
}

.bundle-product-view .product-360 {
    width: min(100%, 285px);
}

.bundle-product-link {
    display: block;
    width: 100%;
    color: inherit;
}

.bundle-product-view > strong a {
    color: inherit;
}

.bundle-product-details-btn {
    margin-top: 9px;
    padding: 8px 15px;
    border: 1px solid rgba(42, 62, 108, .18);
    border-radius: 9px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, .86);
}

.bundle-product-view > strong {
    color: var(--primary);
    font-size: 14px;
    line-height: 1.65;
    margin-top: 4px;
    text-align: center;
    min-height: 46px;
    display: flex;
    align-items: center;
}

.bundle-product-view .product-volume {
    top: 3px;
    right: 50%;
    transform: translateX(50%);
}

.bundle-product-cover {
    width: min(100%, 235px);
    aspect-ratio: 3/4;
    object-fit: contain;
    border-radius: 16px;
}

.bundle-product-placeholder {
    width: min(100%, 235px);
    aspect-ratio: 3/4;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, .62);
    color: var(--primary);
    font-size: 44px;
}

.product-item-rotate {
    color: var(--text-light);
    font-size: 10px;
    margin-top: 5px;
    margin-bottom: 2px;
}

.product-item-rotate i {
    margin-left: 4px;
}

.bundle-plus {
    position: relative;
    z-index: 6;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: var(--gradient);
    box-shadow: 0 8px 20px rgba(42, 62, 108, .24);
}

.bundle-product-body {
    padding: 28px 26px !important;
}

.bundle-product-body .product-desc {
    min-height: 0;
}

.bundle-includes {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 13px 14px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: #F4F7FB;
    border: 1px solid rgba(42, 62, 108, .08);
}

.bundle-includes span {
    color: var(--text-light);
    font-size: 10px;
}

.bundle-includes strong {
    color: var(--primary);
    font-size: 12px;
    line-height: 1.8;
}

.bundle-order-row {
    display: grid;
    gap: 12px;
}

.bundle-price-panel {
    overflow: hidden;
    border: 1px solid rgba(42, 62, 108, .12);
    border-radius: 14px;
    background: linear-gradient(145deg, #f9fbff, #f1f5fb);
}

.bundle-price-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    border-bottom: 1px solid rgba(42, 62, 108, .08);
}

.bundle-price-line:last-child {
    border-bottom: 0;
}

.bundle-price-line span {
    color: #69758a;
    font-size: 10px;
}

.bundle-price-line strong {
    color: var(--primary);
    font-size: 12px;
    white-space: nowrap;
}

.bundle-price-discount span, .bundle-price-discount strong {
    color: #d26a2e;
}

.bundle-price-final {
    padding: 13px;
    background: linear-gradient(135deg, rgba(21, 149, 104, .08), rgba(21, 149, 104, .03));
}

.bundle-price-final span {
    color: #187a5a;
    font-weight: 700;
}

.bundle-price-final strong {
    color: #159568;
    font-size: 18px;
}

.bundle-required-note {
    display: block;
    margin-top: 11px;
    color: #9A5B13;
    font-size: 9px;
}

.public-product-detail {
    padding: 10vh 0 70px;
    min-height: 80vh;
    background: linear-gradient(145deg, #f6f9fd, #edf4fb);
}

.product-detail-back {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 18px;
    color: var(--primary);
    font-weight: 700;
}

.public-product-detail .pub-container {
    max-width: 1380px
}

.product-detail-card {
    display: grid;
    grid-template-columns: 58% 39%;
    overflow: hidden;
    border: 1px solid rgba(42, 62, 108, .12);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(31, 54, 91, .1);
    align-items: start;
    gap: 1vw;
    justify-content: center;
}
.product-main {
    width: 100%;
    height: fit-content;
    display: grid;
    grid-template-columns: 50% 50%;
    background-color: white;
    border-radius: 1vw;
    padding: 1vw;
}
.product-detail-gallery {
    min-height: 25vw;
    padding: 1vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background: radial-gradient(circle, #fff 15%, #dceaf8 100%); */
}

.product-detail-gallery img, .product-detail-360 {
    width: min(100%, 680px);
    aspect-ratio: 1/1;
    object-fit: contain;
}

.product-image-zoom {
    margin-top: 14px;
    border: 0;
    border-radius: 11px;
    padding: 10px 18px;
    background: #2a4a83;
    color: #fff;
    font-family: inherit;
    cursor: pointer
}

.product-image-zoom i {
    margin-left: 6px
}

.product-360 {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none
}

.product-zoom-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(5, 13, 29, .92)
}

.product-zoom-modal.is-open {
    display: flex
}

.product-zoom-stage {
    width: min(94vw, 1100px);
    height: min(86vh, 900px);
    overflow: auto;
    display: block;
    direction: ltr;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 18px
}

.product-zoom-stage img {
    display: block;
    width: 92%;
    height: auto;
    margin: auto;
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    transform: none;
    transform-origin: center;
    transition: width .18s ease
}

.product-zoom-close {
    position: fixed;
    top: 18px;
    right: 22px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #173568;
    font-size: 34px;
    cursor: pointer
}

.product-zoom-actions {
    position: fixed;
    bottom: 22px;
    display: flex;
    gap: 10px
}

.product-zoom-actions button {
    width: 50px;
    height: 46px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #173568;
    font-size: 27px;
    cursor: pointer
}

.product-detail-gallery span {
    margin-top: 12px;
    color: #788399;
    font-size: 12px;
}

.product-detail-content {
    min-width: 0;
}

.product-detail-content h1 {
    color: var(--primary);
    font-size: 30px;
    line-height: 1.65;
    margin: -3px 0 12px;
}

.product-detail-content p {
    color: #68758a;
    line-height: 2;
    font-size: 13px;
}

.product-detail-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0;
    padding: 16px;
    border-radius: 14px;
    background: #edf8f4;
}

.product-detail-price strong {
    color: #159568;
    font-size: 22px;
}

.product-spec-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
}

.product-spec-grid div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 14px 16px;
    border: 1px solid #e1e8f1;
    border-radius: 12px;
    background: #fbfcfe;
    min-width: 0;
}

.product-spec-grid span {
    color: #7a8495;
    font-size: 12px;
}

.product-spec-grid strong {
    color: var(--primary);
    font-size: 15px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.product-detail-summary {
    padding-bottom: 20px;
    border-bottom: 1px solid #edf0f5
}

.product-detail-trust {
    display: grid;
    gap: 12px;
    margin: 22px 0
}

.product-detail-trust span {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #46546c;
    font-size: 13px
}

.product-detail-trust i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #edf7f3;
    color: #129067
}

.product-detail-buybox {
    margin-top: 26px;
    padding: 20px;
    border: 1px solid #e0e6ef;
    border-radius: 16px;
    background: #f7f9fc;
    box-shadow: 0 8px 22px rgba(32, 54, 91, .06)
}

.product-detail-buybox > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px
}

.product-detail-buybox small {
    color: #778298
}

.product-detail-buybox strong {
    color: #159568;
    font-size: 25px
}

.product-detail-buybox em {
    font-size: 13px;
    font-style: normal
}

.product-detail-buybox a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px;
    border-radius: 11px;
    background: linear-gradient(135deg, #29477e, #4568a8);
    color: #fff;
    font-weight: 800
}

.product-spec-section {
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 32px;
    border: 1px solid rgba(42, 62, 108, .11);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(31, 54, 91, .07);
}

.product-spec-heading {
    margin-bottom: 22px
}

.product-spec-heading span {
    color: #159568;
    font-size: 12px;
    font-weight: 800
}

.product-spec-heading h2 {
    margin: 7px 0 0;
    color: var(--primary);
    font-size: 22px
}

.product-spec-section .product-spec-grid {
    grid-template-columns:repeat(3, minmax(0, 1fr))
}

.product-spec-section .product-spec-grid div {
    background: #f8fafc;
    border-color: #e5eaf1
}

.product-zoom-stage {
    position: relative;
    background: #f7fbff
}

.product-zoom-stage img {
    max-width: 92%;
    max-height: 82%;
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none
}

.product-zoom-hint {
    position: absolute;
    bottom: 16px;
    padding: 8px 14px;
    border-radius: 18px;
    background: rgba(25, 54, 102, .9);
    color: #fff;
    font-size: 12px
}

.product-zoom-actions {
    align-items: center
}

.product-zoom-actions span {
    min-width: 110px;
    text-align: center;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    color: #173568;
    font-size: 12px;
    font-weight: 700
}

@media (max-width: 900px) {
    .product-detail-card {
        grid-template-columns:1fr
    }

    .product-detail-gallery {
        min-height: 480px;
        padding: 18px
    }

    .product-detail-gallery img, .product-detail-360 {
        width: min(100%, 520px)
    }

    .product-detail-content {
        padding: 28px
    }

    .product-spec-grid {
        grid-template-columns:1fr
    }

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

    .bundle-product-view {
        max-width: 180px
    }

    .bundle-product-details-btn {
        padding: 8px 7px;
        font-size: 10px
    }

    .product-zoom-stage {
        width: 100%;
        height: 82vh
    }

    .product-zoom-close {
        top: 10px;
        right: 10px
    }
}

@media (max-width: 520px) {
    .public-product-detail {
        padding-top: 92px
    }

    .product-detail-gallery {
        min-height: 390px;
        padding: 10px
    }

    .product-detail-content {
        padding: 20px 16px
    }

    .product-detail-content h1 {
        font-size: 23px
    }

    .product-detail-price {
        padding: 13px
    }

    .product-detail-price strong {
        font-size: 18px
    }

    .product-spec-grid strong {
        font-size: 14px
    }

    .product-image-zoom {
        font-size: 12px
    }
}

@media (max-width: 900px) {
    .product-spec-section .product-spec-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 520px) {
    .product-spec-section {
        padding: 22px 14px
    }

    .product-spec-section .product-spec-grid {
        grid-template-columns:1fr
    }

    .product-detail-buybox strong {
        font-size: 21px
    }

    .product-zoom-hint {
        max-width: 80%;
        text-align: center;
        font-size: 10px
    }
}

.bundle-required-note i {
    margin-left: 4px;
}

.products-empty {
    padding: 45px 20px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 18px;
    color: var(--text-light);
    background: rgba(255, 255, 255, .75);
}

.products-empty i {
    margin-left: 7px;
    color: var(--primary);
}

.products-showcase .product-card {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(210px, .88fr) minmax(240px, 1.12fr);
    min-height: 365px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(42, 62, 108, .12);
    box-shadow: 0 18px 45px rgba(28, 45, 82, .12);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.products-showcase .product-card:hover {
    transform: translateY(-4px);
    border-color: rgba(65, 95, 161, .28);
    box-shadow: 0 28px 60px rgba(28, 45, 82, .18);
}

.product-visual {
    position: relative;
    min-height: 365px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .98) 0 26%, rgba(218, 231, 248, .82) 58%, rgba(187, 211, 239, .65) 100%);
    transform: translateZ(18px);
}

.product-visual::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(65, 95, 161, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(65, 95, 161, .035), 0 0 0 58px rgba(65, 95, 161, .025);
}

.product-render {
    position: relative;
    z-index: 2;
    display: block;
    width: 92%;
    height: 330px;
    object-fit: contain;
    filter: drop-shadow(0 18px 18px rgba(20, 31, 52, .2));
    transform: translateZ(34px) scale(1.02);
    animation: product-float 4.8s ease-in-out infinite;
    user-select: none;
    -webkit-user-drag: none;
}

.product-360 {
    position: relative;
    z-index: 2;
    width: min(92%, 250px);
    aspect-ratio: 3 / 4;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: drop-shadow(0 16px 16px rgba(20, 31, 52, .18));
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: filter .2s ease;
}

.product-360:hover,
.product-360.is-dragging {
    filter: drop-shadow(0 20px 20px rgba(20, 31, 52, .26));
}

.product-360.is-dragging {
    cursor: grabbing;
}

.product-360-hint {
    position: absolute;
    z-index: 5;
    right: 50%;
    bottom: 9px;
    transform: translateX(50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 18px;
    color: var(--primary);
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(42, 62, 108, .1);
    box-shadow: 0 5px 15px rgba(42, 62, 108, .08);
    font-size: 9px;
    pointer-events: none;
}

.product-visual:has(.product-360:hover) .product-360-hint,
.product-visual:has(.product-360.is-dragging) .product-360-hint {
    opacity: .3;
}

.product-card:nth-child(2) .product-render {
    animation-delay: -.9s;
}

.product-shadow {
    position: absolute;
    z-index: 1;
    bottom: 22px;
    width: 58%;
    height: 18px;
    border-radius: 50%;
    background: rgba(20, 31, 52, .18);
    filter: blur(10px);
}

.product-volume {
    position: absolute;
    z-index: 4;
    top: 16px;
    right: 14px;
    padding: 6px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .86);
    color: var(--primary);
    border: 1px solid rgba(42, 62, 108, .1);
    font-size: 10px;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.products-showcase .product-body {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateZ(10px);
}

.products-showcase .product-title {
    font-size: 19px;
    line-height: 1.65;
    margin-bottom: 7px;
    color: var(--primary);
}

.products-showcase .product-desc {
    min-height: 66px;
    margin-bottom: 14px;
    line-height: 1.9;
}

.products-showcase .bundle-product-body .product-desc {
    min-height: 0;
    margin-bottom: 10px;
}

.products-showcase .bundle-product-body {
    justify-content: flex-start;
}

.product-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.product-highlights strong {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border-radius: 9px;
    background: #F3F6FB;
    color: #364D71;
    font-size: 10px;
}

.product-highlights i {
    color: #159568;
}

.products-showcase .btn-buy {
    flex: none;
    width: 100%;
}

@keyframes product-float {
    0%, 100% {
        transform: translateZ(34px) translateY(0) scale(1.02);
    }
    50% {
        transform: translateZ(38px) translateY(-7px) scale(1.025);
    }
}

/* ===== جستجوی همکار ===== */
.agents-section {
    background: white;
    padding: 60px 0;
}

.search-box {
    background: var(--background);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 40px;
    border: 1px solid var(--border);
}
.search-card {
    /* background: white; */
    border-radius: 20px;
    padding: 32px;
    /* margin-bottom: 40px; */
    /*border: 1px solid var(--border);*/
}

.custom-input {

    height: 50px;

    border-radius: 12px;

    border: 1px solid #ddd;
}

.custom-input:focus {

    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--card-soft);
}
.search-trigger {
    background-color: var(--primary);
    border-radius: 1vw;
    padding: 2vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}
.search-body {
    background-color: white;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 2vw;
    border-radius: 2vw;
    border: 1px solid var(--border);
}
.search-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 16px;
    align-items: end;
}

.search-field label {
    display: block;
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 8px;
    font-weight: bold;
}

.search-field select {
    width: 100%;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0 14px;
    font-family: tahoma;
    font-size: 13px;
    color: var(--text);
    background: white;
    outline: none;
    transition: .2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
}

.search-field select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(42, 62, 108, 0.1);
}

.btn-search-pub {
    background: linear-gradient(135deg, var(--primary), var(--menu-active));
    color: white;
    border: none;
    border-radius: 12px;
    height: 46px;
    padding: 0 28px;
    font-size: 14px;
    font-family: tahoma;
    cursor: pointer;
    transition: .2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-search-pub:hover {
    opacity: 0.9;
}

/* کارت همکار/عامل */
.province-network {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 980px;
    margin: 0 auto;
}

.network-section {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(42, 62, 108, .06);
}

.representative-section {
    order: 1;
    background: linear-gradient(135deg, #F4F7FF 0%, #FFFFFF 72%);
    border-color: rgba(42, 62, 108, .2);
}

.sellers-section {
    order: 2;
}

.network-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--primary);
}

.network-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.network-heading span {
    font-size: 15px;
    font-weight: 700;
}

.network-heading i {
    margin-left: 6px;
}

.network-heading small {
    color: var(--text-light);
    font-size: 11px;
}

.network-step {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px !important;
    box-shadow: 0 4px 10px rgba(42, 62, 108, .18);
}

.network-count {
    background: #F3F4F6;
    border-radius: 20px;
    padding: 6px 11px;
}

.representative-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.agent-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    transition: .2s;
    box-shadow: 0 2px 8px var(--shadow);
}

.representative-card {
    border-right: 4px solid var(--primary);
    padding: 16px 18px;
    min-height: 96px;
    box-shadow: none;
}

.agent-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.agent-profile-image {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    flex-shrink: 0;
}

.agent-code {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 5px;
}

.agent-car {
    width: 100%;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.agent-car-image {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 9px;
}

.agent-plate {
    background: #F5F5F5;
    border-radius: 9px;
    padding: 7px;
    text-align: center;
    font-size: 12px;
    color: #666;
}

.network-empty {
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    text-align: center;
    color: var(--text-light);
    font-size: 12px;
}

.agent-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(42, 62, 108, 0.12);
    transform: translateY(-2px);
}

.agent-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--menu-active));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    flex-shrink: 0;
}

.agent-info {
    flex: 1;
}

.agent-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.agent-name {
    font-size: 14px;
    font-weight: bold;
    color: var(--text);
    margin-bottom: 4px;
    line-height: 1.7;
}

.agent-role {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
}

.agent-role.rep {
    background: #EEF2FF;
    color: var(--primary);
}

.agent-role.seller {
    background: #F0FDF4;
    color: #16A34A;
}

.agent-province {
    font-size: 11px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 4px;
}

.agents-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
}

.agents-empty i {
    font-size: 48px;
    opacity: 0.3;
    display: block;
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 26px;
    }

    .stats-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-row {
        grid-template-columns: 1fr;
    }

    .stat-item {
        border-left: none;
        border-bottom: 1px solid var(--border);
    }

    .stat-item:last-child {
        border-bottom: none;
    }

    .agents-section {
        padding: 40px 0;
    }

    .search-box {
        padding: 18px;
        border-radius: 16px;
        margin-bottom: 24px;
    }

    .network-section {
        padding: 14px;
        border-radius: 16px;
    }

    .network-heading {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 12px;
    }

    .network-title {
        width: 100%;
    }

    .agents-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .agent-card {
        padding: 16px;
    }

    .agent-card-header {
        align-items: flex-start;
        gap: 11px;
    }

    .agent-profile-image, .agent-avatar {
        width: 52px;
        height: 52px;
        border-radius: 13px;
    }

    .agent-card-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .agent-car-image {
        height: 130px;
    }

    #products::before {
        background-position: 44% center;
        opacity: .34;
    }

    .products-showcase {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .products-showcase .bundle-product-card {
        grid-template-columns: 1fr;
    }

    .bundle-products-visual {
        min-height: 390px;
        padding: 30px 10px 24px;
    }

    .bundle-products-track {
        min-height: 330px;
    }

    .bundle-product-view > strong {
        font-size: 10px;
    }

    .bundle-product-body {
        padding: 20px 18px !important;
    }

    .products-showcase .product-card {
        grid-template-columns: 43% 57%;
        min-height: 315px;
    }

    .product-visual {
        min-height: 315px;
    }

    .product-render {
        width: 100%;
        height: 285px;
    }

    .product-360 {
        width: min(94%, 225px);
    }

    .products-showcase .product-body {
        padding: 18px 14px;
    }

    .products-showcase .product-title {
        font-size: 16px;
    }

    .products-showcase .product-desc {
        min-height: 0;
        font-size: 11px;
        line-height: 1.8;
    }

    .product-highlights {
        gap: 5px;
        margin-bottom: 12px;
    }

    .product-highlights strong {
        padding: 6px 7px;
        font-size: 9px;
    }
    .product-main {
        display: block !important;
    }
    .product-spec-grid {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    .product-detail-card{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .left{
        display: contents;
    }
    .product-main{
        order: 1;
    }
    .product-bundle-companions {
        order: 3;
    }
    .product-spec-section {
        order: 2;
    }
    .public-product-detail {
        padding-top: 6vh;
    }
}

@media (max-width: 480px) {
    .products-showcase .product-card {
        grid-template-columns: 1fr;
    }

    .bundle-products-visual {
        min-height: 350px;
    }

    .bundle-products-track {
        min-height: 300px;
    }

    .bundle-product-view {
        width: 100%;
    }

    .bundle-product-view .product-360 {
        width: 100%;
    }

    .product-visual {
        min-height: 300px;
    }

    .product-render {
        height: 285px;
        width: 88%;
    }

    .product-360 {
        width: min(78%, 235px);
    }

    .products-showcase .product-body {
        padding: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-render {
        animation: none;
    }

    .products-showcase .product-card {
        transition: box-shadow .2s ease;
        transform: none !important;
    }
}

.public-checkout {
    padding: 120px 0 70px;
    min-height: 80vh;
    background: linear-gradient(145deg, #f6f9fd, #edf4fb)
}

.checkout-card {
    display: grid;
    grid-template-columns:.8fr 1.2fr;
    max-width: 980px;
    margin: auto;
    overflow: hidden;
    border: 1px solid rgba(42, 62, 108, .12);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(31, 54, 91, .1)
}

.checkout-summary, .checkout-form {
    padding: 38px
}

.checkout-summary {
    background: #f4f8fd
}

.checkout-summary h1, .checkout-form h2 {
    color: var(--primary);
    margin: 12px 0 24px
}

.checkout-form form {
    display: grid;
    gap: 10px
}

.checkout-form label {
    font-size: 12px;
    font-weight: 700;
    color: #4c5870
}

.checkout-form input, .checkout-form select, .checkout-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    padding: 11px;
    background: #fafbfd;
    font-family: inherit
}

.checkout-success, .checkout-error {
    margin-top: 15px;
    padding: 14px;
    border-radius: 10px
}

.checkout-success {
    background: #dff5eb;
    color: #13734f
}

.checkout-error {
    background: #fde7e7;
    color: #a42424
}

@media (max-width: 700px) {
    .checkout-card {
        grid-template-columns:1fr;
        margin: 0 8px
    }

    .checkout-summary, .checkout-form {
        padding: 24px 16px
    }

    .public-checkout {
        padding-top: 95px
    }
}

.plogofooter {
    height: 70px;
}

/*mobile*/
@media (max-width: 768px) {
    .plogo img {
        height: 60px;
    }
}

/*tablet*/
@media (min-width: 768px) and (max-width: 1023px) {
    /** {*/
    /*    margin: 0 auto !important;*/
    /*}*/
}

/*desktop*/
@media (min-width: 1024px) and (max-width: 2560px) {
    .icon-item-m {
        font-size: 1.09em;
    }

    .pub-container {
        margin: 0 auto !important;
    }
}

/* HomeStyle */
/*PublicHeader 660*/
:root {
    --primary: #2A3E6C;
    --secondary: #364D71;
    --menu-active: #415FA1;
    --hover: #2B3648;
    --background: #F3F4F6;
    --card: #FFFFFF;
    --border: #E5E7EB;
    --text: #111827;
    --text-light: #6B7280;
    --shadow: rgba(17, 24, 39, .08);
    --gradient: linear-gradient(135deg, #2A3E6C, #415FA1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: tahoma, sans-serif;
    direction: rtl;
    background: var(--background);
    color: var(--text);
    overflow-x: hidden;
}

/* ===== هدر ===== */

.logo {
    height: 35px;
}

.pub-header {
    background: var(--gradient);
    box-shadow: 0 2px 16px rgba(42, 62, 108, .25);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.pub-header-inner {
    max-width: 100%;
    padding: 0 32px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pub-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.pub-logo-icon {
    width: 75px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
}

.pub-logo-text {
    color: white;
}

.pub-logo-text .brand {
    font-size: 20px;
    font-weight: bold;
    display: block;
    letter-spacing: 1px;
}

.pub-logo-text .slogan {
    font-size: 11px;
    opacity: 0.75;
    display: block;
    margin-top: 1px;
}

.pub-nav {
    width: 94%;
    display: flex;
    justify-content: space-between;
}

.pub-nav-social {
    display: none;
}

/*.pub-nav {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 8px;*/
/*    justify-content: space-between;*/
/*    width: 95%;*/
/*}*/
/*.pub-nav-tab {*/
/*    display: flex;*/
/*    width: 100%;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*}*/

.pub-nav a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    transition: .2s;
}

.pub-nav a:hover {
    background: rgba(255, 255, 255, 0.12);
}

.pub-nav .btn-login {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 9px 20px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    transition: .2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pub-nav .btn-login:hover {
    background: rgba(255, 255, 255, 0.28);
}

.pub-nav-back {
    width: 100%;
}

/* موبایل */
.pub-mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .pub-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        gap: 3px;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
        pointer-events: none;
    }

    .pub-mobile-menu-btn {
        display: block;
    }

    .pub-nav.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* بک‌دراپ: فقط پس‌زمینه‌ی تیره، بدون اسکرول */
    .pub-nav-back {
        display: flex;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: rgba(0, 0, 0, .65);
        backdrop-filter: blur(5px);
        box-sizing: border-box;
    }

    /* پنل واقعی منو: خودش اسکرول عمودی می‌خوره */
    .pub-nav-tab {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;

        width: 75%;
        max-height: calc(100dvh - 8vw);
        margin: 4vw auto 4vw 4vw;

        background: rgba(74, 98, 192, 0.23);
        backdrop-filter: blur(18px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6vw;

        padding: 5vw;
        box-sizing: border-box;

        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        transform: translateX(-100%);
        opacity: 0;
        transition: transform .35s ease, opacity .35s ease;
    }

    /* اسکرول‌بار سفارشی و همیشه‌قابل‌مشاهده، دقیقاً کنار خود منو */
    .pub-nav-tab {
        scrollbar-width: thin;                         /* فایرفاکس */
        scrollbar-color: rgba(255,255,255,.55) transparent;
    }
    .pub-nav-tab::-webkit-scrollbar {
        width: 6px;                                    /* کروم/سافاری اندروید و iOS */
    }
    .pub-nav-tab::-webkit-scrollbar-track {
        background: rgba(255,255,255,.08);
        border-radius: 10px;
    }
    .pub-nav-tab::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.55);
        border-radius: 10px;
    }

    .pub-nav.open .pub-nav-tab {
        transform: translateX(0);
        opacity: 1;
    }

    .pub-nav-main {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: flex-start;
        width: 100%;
    }

    .pub-nav a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        padding: 8px 12px;
        border-radius: 0 !important;
        font-size: 13px;
        transition: .2s;
        border-bottom: 0.01px solid rgba(255, 255, 255, 0.2);
        width: 100%;
        margin-top: 6vh !important;
    }

    .pub-nav-btn {
        flex-direction: column;
        height: fit-content;
        display: flex;
        align-items: center;
        width: 95%;
    }

    .pub-nav .btn-login {
        width: 100%;
        background: rgba(255, 255, 255, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        color: white;
        padding: 20px 30px;
        border-radius: 10px !important;
        font-size: 13px;
        cursor: pointer;
        transition: .2s;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 3vh !important;
    }

    #pubNav.open #pubNavHead {
        display: flex !important;
        justify-content: space-between;
        flex-direction: row-reverse;
    }

    .btn-coop {
        background: linear-gradient(135deg, #4b7cff, #3a60ff) !important;
        border: none !important;
    }

    .pub-nav-social {
        display: flex;
        gap: 7px;
    }

    a.pub-nav-social-icon {
        aspect-ratio: 1 / 1;
        margin-top: 2vh !important;
        border: 1px solid rgba(255, 255, 255, .23);
        border-radius: 15px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.7em;
        padding: 1vw;
        text-decoration: none;
    }
    .insta-icon-back{
        color: white;
        background: linear-gradient(214deg, #833AB4, #C13584, #F77737, #FCAF45);
        font-size: 1.8em !important;
        aspect-ratio: 1 / 1 !important;
    }
    .whatsapp-icon-back{
        color: white;
        background-color: #25D366;
    }
}

/*@media (min-width: 515px) and (max-width: 768px){*/

/*    .pub-nav a {*/
/*        color: rgba(255, 255, 255, 0.85);*/
/*        text-decoration: none;*/
/*        padding: 8px 12px;*/
/*        border-radius: 0 !important;*/
/*        font-size: 13px;*/
/*        transition: .2s;*/
/*        border-bottom: 0.01px solid rgba(255, 255, 255, 0.2);*/
/*        width: 100%;*/
/*        margin-top: 6vh !important;*/
/*    }*/
/*}*/
/*PublicHeader*/
/*PublicFooter 768*/
.pub-footer {
    background: var(--primary);
    color: rgba(255, 255, 255, 0.85);
    /*margin-top: 80px;*/
}
.pub-footer-social {
    display: flex;
    gap: 7px;
}

a.pub-footer-social-icon {
    aspect-ratio: 1 / 1;
    margin-top: 2vh !important;
    border: 1px solid rgba(255, 255, 255, .23);
    border-radius: 7px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.7em;
    text-decoration: none;
}
.insta-icon-back{
    color: white;
    background: linear-gradient(214deg, #833AB4, #C13584, #F77737, #FCAF45);
    padding: 0.9vw !important;
    font-size: 1.8em !important;
    aspect-ratio: 1 / 1 !important;
}
.whatsapp-icon-back{
    color: white;
    background-color: #25D366;
}
.pub-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 38px 20px 24px;
}

.pub-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.pub-footer-brand .brand-name {
    font-size: 22px;
    font-weight: bold;
    color: white;
    display: block;
    margin-bottom: 8px;
}

.pub-footer-brand p {
    font-size: 13px;
    opacity: 0.7;
    line-height: 1.8;
}

.pub-footer-col h4 {
    color: white;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.pub-footer-col ul {
    list-style: none;
}

.pub-footer-col ul li {
    margin-bottom: 8px;
}

.pub-footer-col ul li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 13px;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pub-footer-col ul li a:hover {
    color: white;
}

.pub-footer-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}

.pub-footer-contact-item i {
    width: 20px;
    color: rgba(255, 255, 255, 0.5);
}

.pub-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 20px;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.footer-copyright-text {
    display: block !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    .pub-footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pub-footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .plogofooter {
        height: 70px;
    }

    .pub-nav-tab-head {
        width: 95%;
    }
}
.legal-shell {
    display: flex;
}
.legal-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4vh;
}
.legal-hero p {
    margin: 0;
    color: #dfe9fb;
    border-bottom: 0.3px solid rgba(255, 255, 255, .3);
    width: 100%;
    text-align: right;
    padding-bottom: 1vh;
}
.hero-timeline-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
}
.feature {
    width: 90%;
    text-align: right;
    display: ruby;
}
.feature i {
    border: 0.5px solid lightgray;
    padding: 0.5vw;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    height: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.feature small {
    width: 100%;
    display: block;
}
.legal-content h2 {
    border-bottom: 0.5px solid #CFD2D8;
    line-height: 2;
}
.legal-hero h1 {
    font-size: 2.3em;
    margin: 0 0 10px;
    text-align: center;
    width: 121%;
    line-height: 1.5;
}
.footer-text{
    margin-top: 25px;
    text-align: center;
    font-size: 14px;
    opacity: .9;
}
/*PublicFooter */
a.pub-footer-social-icon i {
    color: white !important;
    text-decoration: none;
}
/* Premium product experience */
.bundle-product-link {
    position: relative;
    perspective: 900px;
    border-radius: 22px;
    isolation: isolate
}

.bundle-product-link:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 14% 8% 2%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(73, 149, 220, .38), rgba(55, 195, 156, .14) 47%, transparent 73%);
    filter: blur(14px);
    transition: transform .35s ease, filter .35s ease
}

.bundle-product-link .product-360, .bundle-product-link .bundle-product-cover {
    position: relative;
    transition: transform .35s ease, filter .35s ease;
    filter: drop-shadow(0 18px 18px rgba(27, 51, 85, .18))
}

.bundle-product-view:hover .bundle-product-link:before {
    transform: scale(1.15);
    filter: blur(18px)
}

.bundle-product-view:hover .bundle-product-link .product-360, .bundle-product-view:hover .bundle-product-link .bundle-product-cover {
    transform: translateY(-6px) scale(1.035);
    filter: drop-shadow(0 27px 24px rgba(27, 51, 85, .27))
}

.public-product-detail {
    position: relative;
    overflow: hidden
}

.public-product-detail:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 84% 17%, rgba(81, 155, 226, .16), transparent 31%), radial-gradient(circle at 13% 65%, rgba(43, 190, 148, .10), transparent 28%)
}

.product-detail-card {
    position: relative;
    border-color: rgba(48, 76, 125, .13) !important;
    box-shadow: 0 30px 85px rgba(27, 49, 84, .14) !important;
    backdrop-filter: blur(10px);
    padding: 1vw;

}

.product-detail-gallery {
    position: relative;
    isolation: isolate;
}

.product-detail-gallery:before {
    content: "";
    position: absolute;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(104, 177, 234, .30), rgba(96, 207, 177, .10) 48%, transparent 70%);
    filter: blur(13px);
    z-index: -1;
}

.product-detail-360 {
    filter: drop-shadow(0 28px 27px rgba(27, 48, 78, .24));
    transition: filter .3s ease, transform .3s ease;
}

.product-detail-360:hover {
    filter: drop-shadow(0 34px 31px rgba(27, 48, 78, .31));
}

.product-detail-content {
    padding: 0.4vw;
    background: linear-gradient(155deg, rgba(255, 255, 255, .99), rgba(249, 252, 255, .97));
}

.product-detail-content .product-badge {
    display: inline-flex;
    width: auto;
    padding: 7px 14px;
    border-radius: 999px;
    color: #1b8065;
    background: linear-gradient(135deg, #eaf8f3, #eef5ff);
    border: 1px solid rgba(31, 151, 113, .13);
    font-weight: 800
}

.product-detail-content h1 {
    font-size: 21px;
    line-height: 1.55;
    letter-spacing: -.35px
}

.product-detail-buybox {
    background: linear-gradient(145deg, #f8fbff, #f2f7fc) !important;
    border-color: rgba(52, 82, 132, .16) !important;
    box-shadow: 0 15px 35px rgba(31, 54, 91, .09) !important
}

.product-detail-buybox a {
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease
}

.product-detail-buybox a:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 25px rgba(42, 72, 127, .24);
    background: linear-gradient(135deg, #223e72, #5275b5)
}

.product-spec-section {
    /*position: relative;*/
    background: linear-gradient(155deg, #fff, #f9fbfe) !important;
    box-shadow: 0 22px 55px rgba(31, 54, 91, .10) !important
}

.product-spec-section .product-spec-grid div {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease
}

.product-spec-section .product-spec-grid div:hover {
    transform: translateY(-3px);
    border-color: rgba(42, 93, 158, .20);
    box-shadow: 0 11px 24px rgba(31, 54, 91, .08)
}

.product-spec-section .product-spec-grid strong {
    font-weight: 800;
    line-height: 1.9
}

.product-spec-section .product-spec-grid strong:empty:after {
    content: "ثبت نشده";
    color: #9aa4b3;
    font-weight: 500
}

@media (max-width: 768px) {
    .product-detail-content h1 {
        font-size: 25px
    }

    .bundle-product-link:before {
        inset: 17% 4% 2%
    }

    .bundle-product-link .product-360, .bundle-product-link .bundle-product-cover {
        filter: drop-shadow(0 15px 16px rgba(27, 51, 85, .20))
    }
}

/* 2026-07-20 public storefront */
.home-agents-section {
    display: none !important
}

.stats-bar, .section#products {
    display: none !important
}

.hero-has-product .hero-content {
    display: none
}

.hero-no-product .pub-container {
    width: 100%
}

.hero-no-product .plogo {
    min-height: 650px;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 2
}

.hero-no-product .hero-content {
    display: block;
    max-width: 510px;
    padding: 34px 38px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(7, 27, 47, .78), rgba(11, 44, 57, .54));
    box-shadow: 0 28px 75px rgba(0, 9, 27, .36);
    backdrop-filter: blur(14px);
    text-align: right
}

.hero-no-product .hero-badge {
    background: rgba(91, 194, 155, .14);
    border-color: rgba(142, 229, 195, .24);
    color: #d8f8eb
}

.hero-no-product h1 {
    font-size: 42px;
    line-height: 1.45;
    margin: 20px 0 12px;
    text-shadow: 0 4px 22px rgba(0, 0, 0, .30)
}

.hero-no-product h1 span {
    color: #8fe0bd
}

.hero-no-product p {
    max-width: 470px;
    color: rgba(255, 255, 255, .82);
    line-height: 2.05;
    font-size: 14px
}

.hero-no-product .hero-btns {
    margin-top: 25px;
    display: flex;
    gap: 12px
}

.hero-no-product .btn-primary-pub {
    background: linear-gradient(135deg, #1b9871, #43b58d);
    box-shadow: 0 12px 27px rgba(21, 143, 103, .28)
}

.hero-no-product .btn-outline-pub {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .30);
    color: #fff
}

.hero-no-product:after {
    height: 190px;
    background: linear-gradient(0deg, rgba(2, 15, 26, .74), transparent)
}

.hero-product-focus {
    position: relative;
    z-index: 1;
    min-height: 610px;
    display: grid;
    grid-template-columns:minmax(0, 1.15fr) minmax(360px, .85fr);
    align-items: center;
    gap: 70px;
    color: #fff;
    direction: ltr
}

.hero-product-visual {
    height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.hero-product-visual:before {
    content: "";
    position: absolute;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107, 189, 241, .36), rgba(93, 139, 218, .08) 58%, transparent 72%);
    filter: blur(7px)
}

.hero-product-visual .product-360, .hero-product-visual img {
    position: relative;
    width: min(100%, 540px);
    height: 520px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: contain;
    filter: drop-shadow(0 36px 30px rgba(5, 18, 46, .43))
}

.hero-product-minimal {
    direction: rtl;
    text-align: right
}

.hero-product-minimal > span {
    display: inline-flex;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: 13px
}

.hero-product-minimal h1 {
    margin: 22px 0 10px;
    color: #fff;
    font-size: 44px;
    line-height: 1.55
}

.hero-product-minimal > strong {
    display: block;
    margin-bottom: 26px;
    color: #d8f6e9;
    font-size: 29px
}

.hero-product-minimal > div {
    display: flex;
    gap: 12px
}

.hero-product-minimal a {
    min-width: 160px;
    text-align: center;
    justify-content: center
}

.checkout-pro-page {
    padding: 35px 0 75px;
    background: #f5f7fb;
    min-height: 75vh
}

.checkout-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: #7c8799;
    font-size: 13px
}

.checkout-breadcrumb a {
    color: #304c83
}

.checkout-pro-card {
    display: grid;
    grid-template-columns:390px minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid #e1e6ef;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(31, 54, 91, .10)
}

.checkout-pro-card .checkout-summary {
    padding: 32px;
    background: linear-gradient(155deg, #f7faff, #eef4fb);
    border-left: 1px solid #e1e7ef
}

.checkout-summary h1 {
    margin: 14px 0 10px;
    color: #243e70;
    font-size: 23px
}

.checkout-secure-note {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #69758b;
    font-size: 12px;
    margin: 0 0 24px
}

.checkout-secure-note i {
    color: #159568
}

.checkout-address-card {
    padding: 34px 38px
}

.checkout-form-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px
}

.checkout-form-title > span {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #edf3ff;
    color: #31518b;
    font-size: 21px
}

.checkout-form-title h2 {
    margin: 0 0 5px;
    color: #203a6b;
    font-size: 22px
}

.checkout-form-title p {
    margin: 0;
    color: #8892a3;
    font-size: 12px
}

.checkout-fields-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 18px
}

.checkout-field {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.checkout-field-full {
    grid-column: 1/-1
}

.checkout-field label {
    color: #33415b;
    font-size: 13px;
    font-weight: 700
}

.checkout-field input, .checkout-field select, .checkout-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dce2ea;
    border-radius: 12px;
    background: #fff;
    padding: 13px 14px;
    color: #23344f;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: .2s
}

.checkout-field input:focus, .checkout-field select:focus, .checkout-field textarea:focus {
    border-color: #5475ad;
    box-shadow: 0 0 0 4px rgba(70, 104, 166, .10)
}

.checkout-field input::placeholder, .checkout-field textarea::placeholder {
    color: #a7afbd
}

.checkout-field select:disabled {
    background: #f4f5f7;
    color: #a1a8b3
}

.checkout-submit {
    width: 100%;
    margin-top: 24px;
    min-height: 52px;
    border: 0
}

.checkout-submit.is-loading {
    opacity: .65;
    cursor: wait
}

.checkout-success, .checkout-error {
    margin-top: 18px;
    padding: 15px;
    border-radius: 11px
}

.checkout-success {
    background: #eaf8f2;
    color: #117a59
}

.checkout-error {
    background: #fff0f0;
    color: #bc3e3e
}

.agents-page-hero {
    padding: 70px 0 62px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #20365f, #4165a5)
}

.agents-page-hero span {
    font-size: 12px;
    color: #d6e3fa
}

.agents-page-hero h1 {
    font-size: 36px;
    margin: 13px 0
}

.agents-page-hero p {
    margin: 0;
    color: #dae4f5
}

.agents-standalone {
    display: block !important;
    padding-top: 48px
}

.product-zoom-stage {
    overflow: auto;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 120px)
}

.product-zoom-stage img {
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    touch-action: pan-x pan-y;
    transform-origin: center center
}

@media (max-width: 900px) {
    .hero-product-focus {
        grid-template-columns:1fr;
        gap: 5px;
        padding: 45px 0;
        text-align: center
    }

    .hero-product-visual {
        height: 390px
    }

    .hero-product-visual .product-360, .hero-product-visual img {
        height: 370px
    }

    .hero-product-minimal {
        text-align: center
    }

    .hero-product-minimal h1 {
        font-size: 31px
    }

    .hero-product-minimal > div {
        justify-content: center
    }

    .checkout-pro-card {
        grid-template-columns:1fr
    }

    .checkout-pro-card .checkout-summary {
        border-left: 0;
        border-bottom: 1px solid #e1e7ef
    }

    .checkout-fields-grid {
        grid-template-columns:1fr
    }

    .checkout-field-full {
        grid-column: auto
    }
}

@media (max-width: 900px) {
    .hero-no-product .plogo {
        justify-content: center;
        padding: 45px 0
    }

    .hero-no-product .hero-content {
        margin-top: 220px;
        max-width: 600px;
        text-align: center
    }

    .hero-no-product .hero-btns {
        justify-content: center
    }

    .hero-no-product p {
        margin-left: auto;
        margin-right: auto
    }
}

@media (max-width: 560px) {
    .hero-product-focus {
        min-height: 650px
    }

    .hero-product-visual {
        height: 340px
    }

    .hero-product-visual .product-360, .hero-product-visual img {
        height: 330px
    }

    .hero-product-minimal h1 {
        font-size: 25px
    }

    .hero-product-minimal > strong {
        font-size: 23px
    }

    .hero-product-minimal > div {
        flex-direction: column
    }

    .hero-product-minimal a {
        width: 100%
    }

    .checkout-pro-page {
        padding-top: 18px
    }

    .checkout-address-card, .checkout-pro-card .checkout-summary {
        padding: 22px 17px
    }

    .checkout-pro-card {
        border-radius: 15px
    }

    .product-zoom-modal {
        box-sizing: border-box;
        padding: 58px 8px 72px;
        overflow: hidden
    }

    .product-zoom-stage {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        height: calc(100dvh - 138px);
        max-height: calc(100dvh - 138px);
        border-radius: 14px
    }

    .product-zoom-stage img {
        width: 92%;
        max-width: 92%;
        max-height: none;
        margin: auto;
        object-fit: contain
    }

    .product-zoom-actions {
        right: 8px;
        bottom: 8px;
        left: 8px;
        justify-content: center
    }

    .product-zoom-close {
        top: 8px;
        right: 8px;
        width: 42px;
        height: 42px;
        z-index: 2
    }

    .product-zoom-hint {
        position: sticky;
        bottom: 8px;
        display: table;
        margin: 8px auto
    }
}

@media (max-width: 560px) {
    .hero {
        background-position: center
    }

    .hero:before {
        background: rgba(3, 18, 34, .12)
    }
}

@media (max-width: 560px) {
    .hero-no-product .plogo {
        min-height: 720px;
        padding: 25px 0
    }

    .hero-no-product .hero-content {
        margin-top: 260px;
        padding: 24px 17px;
        border-radius: 18px
    }

    .hero-no-product h1 {
        font-size: 28px
    }

    .hero-no-product p {
        font-size: 12px;
        line-height: 1.9
    }

    .hero-no-product .hero-btns {
        flex-direction: column
    }

    .hero-no-product .hero-btns a {
        width: 100%;
        justify-content: center
    }
}

.product-bundle-companions {
    padding: 30px;
    border: 1px solid #e1e7ef;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(31, 54, 91, .08);
    width: 100%;
    /*position: absolute;*/
    /*bottom: 9vw;*/
    /*right: 1vw;*/
}

.product-companion-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap: 15px
}

.product-companion-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px;
    border: 1px solid #e5eaf1;
    border-radius: 15px;
    color: #263f70;
    background: #fafcff;
    transition: .2s
}

.product-companion-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(31, 54, 91, .09)
}

.product-companion-card img {
    width: 78px;
    height: 92px;
    object-fit: contain;
    border-radius: 10px;
    background: #edf4fb
}

.product-companion-card div {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.product-companion-card small {
    color: #8691a4
}

.product-bundle-final {
    display: grid;
    grid-template-columns:1fr auto auto;
    align-items: center;
    gap: 20px;
    margin-top: 18px;
    padding: 18px;
    border-radius: 15px;
    background: linear-gradient(135deg, #f0f6ff, #edf9f5)
}

.product-bundle-final span {
    color: #657187
}

.product-bundle-final strong {
    color: #138c65;
    font-size: 23px
}

.product-bundle-final a {
    padding: 12px 18px;
    border-radius: 10px;
    background: #31518b;
    color: #fff;
    font-weight: 800
}

@media (max-width: 650px) {
    .product-bundle-companions {
        padding: 20px 13px
    }

    .product-bundle-final {
        grid-template-columns:1fr;
        text-align: center
    }

    .product-bundle-final a {
        width: 100%
    }
}

/* Minimal fallback hero when no active bundle exists */
.hero-no-product {
    min-height: 540px;
    background: #f5f8fc !important;
    border-bottom: 1px solid #e4eaf2
}

.hero-no-product:before {
    background: radial-gradient(circle at 18% 45%, rgba(48, 91, 155, .10), transparent 28%), radial-gradient(circle at 70% 12%, rgba(31, 160, 117, .07), transparent 22%)
}

.hero-no-product:after {
    height: 1px;
    background: #e4eaf2
}

.hero-no-product .plogo {
    min-height: 540px;
    justify-content: flex-end;
    padding-left: 48%;
    box-sizing: border-box
}

.hero-no-product .plogo:before {
    content: "";
    position: absolute;
    left: 7%;
    top: 50%;
    width: 340px;
    height: 340px;
    transform: translateY(-50%);
    border-radius: 46% 54% 56% 44%;
    background-color: #fff;
    background-image: url('../img/logo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 58%;
    box-shadow: 0 28px 70px rgba(31, 54, 91, .12);
    border: 1px solid rgba(48, 77, 125, .08)
}

.hero-no-product .hero-content {
    max-width: 535px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    color: #20375f
}

.hero-no-product .hero-badge {
    color: #168462;
    background: #e8f6f1;
    border: 1px solid #ceeade
}

.hero-no-product h1 {
    margin: 17px 0 12px;
    color: #1d3766;
    font-size: 42px;
    text-shadow: none
}

.hero-no-product h1 span {
    color: #277f69
}

.hero-no-product p {
    color: #657187;
    font-size: 14px;
    line-height: 2
}

.hero-no-product .btn-primary-pub {
    background: #294c84;
    box-shadow: 0 10px 24px rgba(41, 76, 132, .18)
}

.hero-no-product .btn-outline-pub {
    color: #294c84;
    background: #fff;
    border: 1px solid #cfd9e7
}

.hero-no-product .btn-outline-pub:hover {
    background: #eef3fa
}

@media (max-width: 900px) {
    .hero-no-product .plogo {
        min-height: 600px;
        padding: 250px 0 40px;
        justify-content: center
    }

    .hero-no-product .plogo:before {
        left: 50%;
        top: 35px;
        width: 190px;
        height: 190px;
        transform: translateX(-50%)
    }

    .hero-no-product .hero-content {
        margin: 0;
        max-width: 620px;
        text-align: center
    }

    .hero-no-product .hero-btns {
        justify-content: center
    }
}

@media (max-width: 560px) {
    .hero-no-product {
        min-height: 610px
    }

    .hero-no-product .plogo {
        min-height: 610px;
        padding: 215px 0 28px
    }

    .hero-no-product .plogo:before {
        width: 155px;
        height: 155px
    }

    .hero-no-product .hero-content {
        margin: 0;
        padding: 0 4px;
        background: transparent
    }

    .hero-no-product h1 {
        font-size: 28px
    }

    .hero-no-product p {
        font-size: 12px
    }

    .hero-no-product .hero-btns {
        flex-direction: column
    }

    .hero-no-product .hero-btns a {
        width: 100%
    }
}

/* Clean centered hero: no decorative logo placeholder */
.hero-no-product {
    min-height: 480px
}

.hero-no-product .plogo {
    min-height: 480px;
    padding: 54px 20px;
    justify-content: center;
    text-align: center
}

.hero-no-product .plogo:before {
    display: none
}

.hero-no-product .hero-content {
    max-width: 780px;
    text-align: center
}

.hero-no-product .hero-badge {
    margin: 0 auto
}

.hero-no-product h1 {
    font-size: 46px;
    line-height: 1.45
}

.hero-no-product p {
    max-width: 670px;
    margin: 0 auto;
    color: #68758a;
    font-size: 15px
}

.hero-no-product .hero-btns {
    justify-content: center
}

.hero-no-product .hero-btns .btn-primary-pub {
    display: none
}

.hero-no-product .hero-btns .btn-outline-pub {
    min-width: 220px;
    background: #294c84;
    color: #fff;
    border-color: #294c84;
    box-shadow: 0 10px 24px rgba(41, 76, 132, .18)
}

@media (max-width: 560px) {
    .hero-no-product, .hero-no-product .plogo {
        min-height: 500px
    }

    .hero-no-product .plogo {
        padding: 38px 14px
    }

    .hero-no-product h1 {
        font-size: 31px
    }

    .hero-no-product p {
        font-size: 13px
    }

    .hero-no-product .hero-btns {
        margin-top: 22px
    }

    .hero-no-product .hero-btns .btn-outline-pub {
        width: 100%
    }
}

/* Premium storefront hero */
.hero.hero-has-product {
    min-height: 0;
    padding: 42px 0;
    color: #1d3766;
    background: radial-gradient(circle at 12% 18%, rgba(75, 126, 194, .12), transparent 27%),
    radial-gradient(circle at 88% 82%, rgba(34, 160, 117, .10), transparent 26%),
    linear-gradient(135deg, #f8fbff 0%, #eef5fb 52%, #f7fbf8 100%);
    border-bottom: 1px solid #e1e8f1;
}

.hero.hero-has-product:before, .hero.hero-has-product:after {
    display: none
}

.hero-has-product .plogo {
    min-height: 0
}

.hero-has-product .hero-product-focus {
    min-height: 510px;
    grid-template-columns:minmax(420px, 1fr) minmax(360px, .82fr);
    gap: 56px;
    padding: 38px 54px;
    color: #1d3766;
    border: 1px solid rgba(45, 78, 128, .11);
    border-radius: 32px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 24px 65px rgba(30, 58, 96, .10);
    overflow: hidden;
}

.hero-has-product .hero-product-visual {
    height: 450px;
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 26px;
    background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .95), transparent 45%),
    linear-gradient(145deg, #e7f2fb, #f5f9fc);
    overflow: hidden;
}

.hero-has-product .hero-product-item {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #29436f;
    border: 1px solid rgba(58, 98, 151, .08);
    border-radius: 22px;
    background: rgba(255, 255, 255, .33);
    overflow: hidden;
    transition: transform .22s ease, background .22s ease;
}

.hero-has-product .hero-product-item:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 16px 34px rgba(36, 65, 101, .10)
}

.hero-has-product .hero-product-item small {
    max-width: 95%;
    margin-top: -12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
}

.hero-has-product .hero-product-visual:before {
    width: 330px;
    height: 330px;
    background: radial-gradient(circle, rgba(255, 255, 255, .98), rgba(180, 213, 239, .32) 58%, transparent 74%);
    filter: none;
}

.hero-has-product .hero-product-visual .product-360,
.hero-has-product .hero-product-visual img {
    width: 100%;
    height: 390px;
    border-radius: 20px;
    filter: drop-shadow(0 24px 22px rgba(27, 52, 81, .20));
}

.hero-has-product .hero-product-minimal {
    color: #1d3766
}

.hero-has-product .hero-product-minimal > span {
    color: #17805f;
    background: #eaf7f2;
    border-color: #d1eadf;
    font-weight: 700;
}

.hero-has-product .hero-product-minimal h1 {
    margin: 20px 0 12px;
    color: #1e3969;
    font-size: 38px;
    line-height: 1.55;
}

.hero-has-product .hero-product-minimal > strong {
    margin-bottom: 28px;
    color: #138864;
    font-size: 27px;
}

.hero-has-product .hero-product-minimal > div {
    gap: 12px
}

.hero-has-product .hero-product-minimal a {
    min-width: 145px;
    border-radius: 12px
}

.hero-has-product .hero-product-minimal .btn-primary-pub {
    color: #fff;
    background: linear-gradient(135deg, #294c84, #4169a8);
    box-shadow: 0 12px 25px rgba(41, 76, 132, .18);
}

.hero-has-product .hero-product-minimal .btn-outline-pub {
    color: #294c84;
    background: #fff;
    border: 1px solid #ccd8e8;
}

@media (max-width: 900px) {
    .hero.hero-has-product {
        padding: 24px 0
    }

    .hero-has-product .hero-product-focus {
        grid-template-columns:1fr;
        gap: 22px;
        min-height: 0;
        padding: 26px
    }

    .hero-has-product .hero-product-visual {
        height: 370px;
        order: 0
    }

    .hero-has-product .hero-product-visual .product-360, .hero-has-product .hero-product-visual img {
        height: 320px
    }

    .hero-has-product .hero-product-minimal {
        order: 1;
        text-align: center
    }

    .hero-has-product .hero-product-minimal h1 {
        font-size: 30px
    }

    .hero-has-product .hero-product-minimal > div {
        justify-content: center
    }
}

@media (max-width: 560px) {
    .hero.hero-has-product {
        padding: 12px 0 20px
    }

    .hero-has-product .hero-product-focus {
        padding: 14px;
        border-radius: 20px;
        gap: 18px
    }

    .hero-has-product .hero-product-visual {
        height: 310px;
        border-radius: 17px
    }

    .hero-has-product .hero-product-visual {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        padding: 8px;
        gap: 4px
    }

    .hero-has-product .hero-product-visual .product-360, .hero-has-product .hero-product-visual img {
        height: 265px
    }

    .hero-has-product .hero-product-item small {
        font-size: 10px;
        margin-top: -5px
    }

    .hero-has-product .hero-product-minimal h1 {
        margin: 13px 0 7px;
        font-size: 23px
    }

    .hero-has-product .hero-product-minimal > strong {
        margin-bottom: 17px;
        font-size: 21px
    }

    .hero-has-product .hero-product-minimal > div {
        display: grid;
        grid-template-columns:1fr 1fr
    }

    .hero-has-product .hero-product-minimal a {
        width: auto;
        min-width: 0;
        padding: 12px 7px;
        font-size: 12px
    }
}

/* Bundle is one sellable unit */
.bundle-detail-page {
    padding: 34px 0 75px;
    background: linear-gradient(180deg, #f5f9fd, #fff);
    min-height: 75vh
}

.bundle-detail-hero {
    display: grid;
    grid-template-columns:minmax(0, 1.25fr) minmax(350px, .75fr);
    direction: ltr;
    gap: 34px;
    padding: 28px;
    border: 1px solid #e0e7f0;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 22px 55px rgba(30, 57, 94, .09)
}

.bundle-detail-gallery {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    min-height: 470px;
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(145deg, #eaf4fc, #f6f9fc)
}

.bundle-detail-product {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, .36)
}

.bundle-detail-product .product-360, .bundle-detail-product img {
    width: 100%;
    height: 400px;
    object-fit: contain;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 21px 18px rgba(31, 55, 85, .18));
    touch-action: pan-y
}

.bundle-detail-product strong {
    max-width: 95%;
    margin-top: -5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #29436f;
    font-size: 13px
}

.bundle-detail-summary {
    direction: rtl;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    padding: 18px 10px
}

.bundle-detail-summary h1 {
    margin: 18px 0 9px;
    color: #203b6c;
    font-size: 34px;
    line-height: 1.55
}

.bundle-detail-summary > p {
    margin: 0 0 20px;
    color: #748096;
    line-height: 2
}

.bundle-detail-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 13px;
    color: #705725;
    background: #fff8e8;
    font-size: 12px;
    line-height: 1.9
}

.bundle-detail-note i {
    margin-top: 5px;
    color: #b98720
}

.bundle-detail-price {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 22px 0;
    padding: 17px;
    border-radius: 15px;
    background: #eef8f4
}

.bundle-detail-price small {
    color: #69778b
}

.bundle-detail-price strong {
    color: #118764;
    font-size: 25px
}

.bundle-detail-order {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    border: 0;
    background: linear-gradient(135deg, #294c84, #466caa);
    color: #fff
}

.bundle-all-specifications {
    margin-top: 28px;
    padding: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 17px 45px rgba(30, 57, 94, .07)
}

.bundle-product-spec-card {
    margin-top: 20px;
    padding: 22px;
    border: 1px solid #e3e9f1;
    border-radius: 19px;
    background: linear-gradient(145deg, #fff, #fafcff)
}

.bundle-product-spec-card header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 19px
}

.bundle-product-spec-card header img {
    width: 105px;
    height: 120px;
    object-fit: contain;
    border-radius: 13px;
    background: #edf4fa
}

.bundle-product-spec-card header small {
    color: #178363
}

.bundle-product-spec-card header h3 {
    margin: 5px 0;
    color: #243f70;
    font-size: 21px
}

.bundle-product-spec-card header p {
    margin: 0;
    color: #7a8598;
    line-height: 1.8;
    font-size: 12px;
    text-align: right;
    text-wrap: pretty;
    word-spacing: normal
}

.bundle-product-spec-card .product-spec-grid > div {
    display: grid;
    grid-template-columns: minmax(105px, 30%) minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    min-height: 58px;
    text-align: right
}

.bundle-product-spec-card .product-spec-grid span {
    line-height: 1.9;
    white-space: normal
}

.bundle-product-spec-card .product-spec-grid strong {
    display: block;
    line-height: 1.9;
    text-align: right;
    text-wrap: pretty;
    word-spacing: normal;
    overflow-wrap: break-word
}

/* SHOP carousel: one complete, readable bundle per slide. */
.shop-carousel {
    width: min(100%, 1240px);
    margin: 0 auto;
}

.hero-bundle-title {
    display: block;
    margin: 7px 0 4px;
    color: #63738d;
    font-size: 14px;
    font-weight: 700;
}

.shop-carousel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.shop-carousel-count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 92px;
    padding: 9px 14px;
    border: 1px solid rgba(42, 62, 108, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    color: #78849a;
    font-size: 12px;
}

.shop-carousel-count strong {
    color: var(--primary);
    font-size: 14px;
}

.shop-carousel-actions {
    display: flex;
    gap: 8px;
}

.shop-carousel-actions button {
    width: 43px;
    height: 43px;
    border: 1px solid rgba(42, 62, 108, .14);
    border-radius: 13px;
    background: #fff;
    color: var(--primary);
    font-size: 21px;
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(31, 54, 91, .08);
    transition: .2s ease;
}

.shop-carousel-actions button:hover:not(:disabled) {
    color: #fff;
    background: var(--primary);
    transform: translateY(-2px);
}

.shop-carousel-actions button:disabled {
    opacity: .35;
    cursor: default;
    box-shadow: none;
}

.shop-carousel-viewport {
    width: 100%;
    overflow: hidden;
    border-radius: 28px;
    touch-action: pan-y;
}

.shop-carousel .bundle-showcase {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: none;
    margin: 0;
    perspective: none;
    direction: rtl;
    transition: transform .48s cubic-bezier(.22, .7, .2, 1);
    will-change: transform;
}

.shop-carousel .bundle-showcase.is-dragging {
    transition: none;
}

.shop-carousel .bundle-product-card {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
}

.shop-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 28px;
    margin-top: 13px;
}

.shop-carousel-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #c8d2e1;
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}

.shop-carousel-dots button.active {
    width: 26px;
    background: var(--primary);
}

.shop-carousel.is-single .shop-carousel-toolbar,
.shop-carousel.is-single .shop-carousel-dots {
    display: none;
}

@media (max-width: 768px) {
    .shop-carousel-viewport {
        border-radius: 21px;
    }

    .shop-carousel-toolbar {
        margin-bottom: 10px;
    }

    .shop-carousel-actions button {
        width: 39px;
        height: 39px;
        border-radius: 11px;
    }

    .shop-carousel .bundle-product-card {
        min-width: 100%;
    }
}

.bundle-detail-product .product-360.is-loading-frames {
    cursor: progress
}

.product-bundle-final button {
    border: 0;
    cursor: pointer;
    font: inherit
}

@media (max-width: 900px) {
    .bundle-detail-hero {
        grid-template-columns:1fr
    }

    .bundle-detail-gallery {
        min-height: 390px
    }

    .bundle-detail-product .product-360, .bundle-detail-product img {
        height: 340px
    }

    .bundle-detail-summary {
        text-align: center
    }

    .bundle-detail-note {
        text-align: right
    }

    .bundle-detail-price {
        text-align: center
    }
}

@media (max-width: 560px) {
    .bundle-detail-page {
        padding-top: 15px
    }

    .bundle-detail-hero {
        padding: 12px;
        border-radius: 19px;
        gap: 14px
    }

    .bundle-detail-gallery {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        min-height: 290px;
        padding: 6px;
        gap: 4px
    }

    .bundle-detail-product .product-360, .bundle-detail-product img {
        height: 255px
    }

    .bundle-detail-product strong {
        font-size: 10px
    }
    .bundle-detail-product > div{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .bundle-detail-summary {
        padding: 10px 3px
    }

    .bundle-detail-summary h1 {
        font-size: 24px
    }

    .bundle-all-specifications {
        padding: 19px 12px;
        border-radius: 19px
    }

    .bundle-product-spec-card {
        padding: 14px
    }

    .bundle-product-spec-card header {
        align-items: flex-start
    }

    .bundle-product-spec-card header img {
        width: 75px;
        height: 90px
    }

    .bundle-product-spec-card header h3 {
        font-size: 16px
    }

    .bundle-product-spec-card .product-spec-grid {
        grid-template-columns:1fr
    }

    .bundle-product-spec-card .product-spec-grid > div {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 10px
    }
}
.cooperation-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 45px rgba(42, 62, 108, .12);
    width: 95%;
    margin: 1vw auto;
}

/* Approved unified vertical bundle showcase */
.hero.hero-has-product {
    padding: 30px 0;
    background: linear-gradient(135deg, #f7fbff 0%, #fff 55%, #f3fbf7 100%)
}

.hero-has-product .hero-product-focus {
    grid-template-columns:minmax(560px, 1.12fr) minmax(390px, .88fr);
    min-height: 535px;
    padding: 24px 46px;
    gap: 35px;
    border-radius: 34px;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 22px 60px rgba(31, 57, 91, .11)
}

.hero-has-product .hero-product-visual {
    position: relative;
    display: block;
    height: 500px;
    padding: 0;
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    background: radial-gradient(circle at 48% 40%, rgba(255, 255, 255, .98), transparent 47%), linear-gradient(145deg, #e6f3fb, #f6fbfa)
}

.hero-has-product .hero-product-visual:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    left: 5%;
    right: 5%;
    bottom: 18px;
    width: auto;
    height: 94px;
    border: 1px solid rgba(64, 155, 157, .18);
    border-radius: 50%;
    background: linear-gradient(180deg, #e8fbf8 0%, #c9eeee 46%, #9ed9dd 100%);
    box-shadow: 0 10px 0 rgba(126, 199, 202, .32), 0 28px 34px rgba(31, 91, 101, .22), inset 0 8px 15px rgba(255, 255, 255, .72);
    filter: none;
    transform: perspective(420px) rotateX(58deg)
}

.hero-has-product .hero-product-visual:after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background-image: url('../img/eco-leaves-v1.png'), radial-gradient(circle at 13% 62%, rgba(255, 255, 255, .85) 0 8px, rgba(113, 190, 220, .25) 9px 11px, transparent 12px), radial-gradient(circle at 85% 54%, rgba(255, 255, 255, .8) 0 6px, rgba(113, 190, 220, .22) 7px 9px, transparent 10px);
    background-repeat: no-repeat;
    background-size: 78% auto, auto, auto;
    background-position: center calc(100% - 54px), center, center
}

.hero-has-product .hero-product-item {
    position: absolute;
    top: 6px;
    bottom: 38px;
    width: 58%;
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transition: transform .22s ease
}

.hero-has-product .hero-product-item:before, .hero-has-product .hero-product-item:after {
    display: none
}

.hero-has-product .hero-product-item:nth-child(1) {
    left: 2%;
    z-index: 2;
    transform: translateX(2%)
}

.hero-has-product .hero-product-item:nth-child(2) {
    right: 1%;
    z-index: 3;
    transform: translateX(-2%)
}

.hero-has-product .hero-product-item:nth-child(1):hover {
    transform: translateX(2%) translateY(-4px)
}

.hero-has-product .hero-product-item:nth-child(2):hover {
    transform: translateX(-2%) translateY(-4px)
}

.hero-has-product .hero-product-item:hover {
    background: transparent;
    box-shadow: none
}

.hero-has-product .hero-product-visual .product-360, .hero-has-product .hero-product-visual img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 455px;
    border-radius: 0;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    object-fit: contain;
    filter: drop-shadow(0 22px 17px rgba(20, 43, 66, .24));
    cursor: ew-resize;
    touch-action: pan-y
}

.hero-has-product .hero-product-minimal {
    padding: 15px 0
}

.hero-has-product .hero-product-minimal > span {
    padding: 8px 17px
}

.hero-has-product .hero-product-minimal h1 {
    font-size: 40px
}

.hero-has-product .hero-product-minimal > strong {
    font-size: 29px
}

@media (max-width: 1000px) {
    .hero-has-product .hero-product-focus {
        grid-template-columns:1fr;
        min-height: 0;
        padding: 22px
    }

    .hero-has-product .hero-product-visual {
        height: 480px
    }

    .hero-has-product .hero-product-minimal {
        text-align: center
    }

    .hero-has-product .hero-product-minimal > div {
        justify-content: center
    }
}

@media (max-width: 560px) {
    .hero.hero-has-product {
        padding: 10px 0 20px
    }

    .hero-has-product .hero-product-focus {
        padding: 10px;
        border-radius: 20px
    }

    .hero-has-product .hero-product-visual {
        height: 355px;
        border-radius: 17px
    }

    .hero-has-product .hero-product-visual:before {
        left: 2%;
        right: 2%;
        bottom: 12px;
        height: 65px
    }

    .hero-has-product .hero-product-visual:after {
        background-size: 96% auto, auto, auto;
        background-position: center calc(100% - 40px), center, center
    }

    .hero-has-product .hero-product-item {
        top: 2px;
        bottom: 25px;
        width: 63%
    }

    .hero-has-product .hero-product-item:nth-child(1) {
        left: -4%
    }

    .hero-has-product .hero-product-item:nth-child(2) {
        right: -4%
    }

    .hero-has-product .hero-product-visual .product-360, .hero-has-product .hero-product-visual img {
        height: 325px
    }

    .hero-has-product .hero-product-minimal h1 {
        font-size: 24px
    }

    .hero-has-product .hero-product-minimal > strong {
        font-size: 22px
    }
}

/* Exact approved background plate: dynamic backend products stay above it */
.hero-has-product .plogo {
    display: block;
    width: 100%
}

.hero-has-product .hero-product-focus {
    width: 100%;
    box-sizing: border-box
}

.hero-has-product .hero-product-focus {
    background-color: #fff;
    background-image: url('../img/hero-bundle-stage-v1.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%
}

.hero-has-product .hero-product-visual {
    background: transparent;
    overflow: visible
}

.hero-has-product .hero-product-visual:before, .hero-has-product .hero-product-visual:after {
    display: none
}

@media (max-width: 1000px) {
    .hero-has-product .hero-product-focus {
        padding: 18px;
        background: #fff;
        background-image: none
    }

    .hero-has-product .hero-product-visual {
        height: 470px;
        overflow: hidden;
        background-color: #f5faff;
        background-image: url('../img/hero-bundle-stage-v1.webp');
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: left center
    }

    .hero-has-product .hero-product-minimal {
        padding: 22px 16px;
        border-radius: 18px;
        background: #fff;
        backdrop-filter: none
    }
}

@media (max-width: 560px) {
    .hero-has-product > .pub-container {
        width: 100%;
        max-width: none;
        padding: 0 8px;
        box-sizing: border-box
    }

    .hero-has-product .hero-product-focus {
        padding: 8px;
        gap: 8px;
        border-radius: 20px
    }

    .hero-has-product .hero-product-visual {
        height: 390px;
        border-radius: 16px;
        background-size: auto 100%;
        background-position: 16% center
    }

    .hero-has-product .hero-product-item {
        top: -22px;
        bottom: 2px;
        width: 68%
    }

    .hero-has-product .hero-product-item:nth-child(1) {
        left: -7%
    }

    .hero-has-product .hero-product-item:nth-child(2) {
        right: -7%
    }

    .hero-has-product .hero-product-visual .product-360, .hero-has-product .hero-product-visual img {
        height: 385px
    }

    .hero-has-product .hero-product-minimal {
        padding: 17px 8px 13px;
        background: #fff
    }

    .hero-has-product .hero-product-minimal > span {
        font-size: 11px
    }

    .hero-has-product .hero-product-minimal h1 {
        margin: 12px 0 5px;
        font-size: 23px
    }

    .hero-has-product .hero-product-minimal > strong {
        margin-bottom: 15px;
        font-size: 21px
    }

    .hero-has-product .hero-product-minimal > div {
        gap: 8px
    }

    .hero-has-product .hero-product-minimal a {
        min-height: 44px;
        padding: 10px 5px;
        font-size: 11px
    }
}

.breadcrumb-home-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eef1f8;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
/* ===== Breadcrumb ===== */
.coop-breadcrumb {
    border: 1px solid #d0d0d0;
    border-radius: 2vw;
    align-items: center;
    display: flex;
    justify-content: center;
    width: max-content;
    padding: 0.5vw 3vw;
    margin-right: 0.1vw;
    background-color: #efefef;
    gap: 9px;
    font-size: 13px;
    color: #374151;
    margin-bottom: 18px;
}

.coop-breadcrumb .crumb-current {
}

.coop-breadcrumb .crumb-sep {
    font-size: 11px;
    color: #9ca3af;
}

.coop-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
}

.coop-breadcrumb a:hover {
    color: var(--primary);
}

.breadcrumb-home-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eef1f8;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* ===== کارت اصلی ===== */
.cooperation-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 45px rgba(42, 62, 108, .12);
}

.cooperation-card-main {
    display: flex;
}

/* ===== بخش فرم ===== */
.cooperation-form {
    flex: 1;
    min-width: 0;
    padding: 34px 36px;
}

.cooperation-form h3 {
    color: var(--primary);
    font-size: 19px;
    font-weight: bold;
    margin-bottom: 6px;
    text-align: center;
}

.cooperation-form .subtitle {
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 26px;
    text-align: center;
}

@media (max-width: 820px) {
    .cooperation-page {overflow-x: hidden; }
    .cooperation-page > .cooperation-card { padding: 0 !important; border: 0; box-shadow: none; background: transparent !important; overflow: visible; }
    .cooperation-wrap { width: 100%; max-width: 100%; }
    .coop-breadcrumb { width:100%; margin:0 0 12px; padding:10px 14px; border-radius:12px; justify-content:flex-start; box-sizing:border-box; }
    .cooperation-card-main {
        flex-direction: column;
    }

    .cooperation-side {
        width: 100%;
        box-sizing: border-box;
        padding: 24px 18px;
        border-radius: 18px 18px 0 0;
    }
    .cooperation-steps { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
    .cooperation-steps::before { display:none; }
    .cooperation-step { margin:0;align-items:flex-start; }
    .step-num { width:32px; }
    .cooperation-form { width:100%;box-sizing:border-box; }
}
.cooperation-page {
    min-height: calc(100vh - 70px);
    padding: 30px 20px 20px;
    background: radial-gradient(circle at 12% 10%, rgba(65, 95, 161, .14), transparent 34%),
    linear-gradient(180deg, #f5f7fb 0%, #eef2f7 100%);
}
.cooperation-wrap {
    width: 100%;
    margin: 0 auto;
}

/* Product detail zoom controls: rotation + contained pan on mobile */
.product-zoom-canvas{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:100%;
    min-height:100%;
    box-sizing:border-box
}
.product-zoom-canvas img{
    flex:0 0 auto;
    margin:auto;
    max-height:none;
    touch-action:pan-y
}
@media(max-width:560px){
    .product-zoom-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;box-sizing:border-box;overflow:hidden}
    .product-zoom-stage{width:calc(100vw - 16px);max-width:calc(100vw - 16px);height:calc(100dvh - 138px);max-height:calc(100dvh - 138px);box-sizing:border-box;overflow:auto;overscroll-behavior:contain}
    .product-zoom-canvas{width:100%;min-width:100%;min-height:100%}
    .product-zoom-actions{right:8px;bottom:8px;left:8px;justify-content:center;gap:7px;max-width:calc(100vw - 16px)}
    .product-zoom-actions button{flex:0 0 42px;width:42px;height:42px;font-size:20px}
    .product-zoom-actions span{min-width:74px;padding:9px 5px;font-size:10px}
    .product-zoom-close{top:8px;right:8px;width:42px;height:42px;z-index:2}
}

/* Quick product information in SHOP; hover on desktop, info button on touch devices. */
.product-quick-info {
    position: absolute;
    z-index: 12;
    right: 12px;
    bottom: 79px;
    left: 12px;
    padding: 15px 16px;
    border: 1px solid rgba(42, 62, 108, .11);
    border-radius: 16px;
    background: rgba(255, 255, 255, .97);
    color: #344562;
    text-align: right;
    box-shadow: 0 18px 38px rgba(25, 47, 82, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(9px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.product-quick-info small,
.product-quick-info b,
.product-quick-info span { display: block; }
.product-quick-info small { margin-bottom: 4px; color: #159568; font-size: 10px; }
.product-quick-info b { color: var(--primary); font-size: 13px; line-height: 1.7; }
.product-quick-info p {
    display: -webkit-box;
    margin: 7px 0;
    overflow: hidden;
    color: #59677d;
    font-size: 11px;
    line-height: 1.9;
    text-align: right;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.product-quick-info span { color: #8792a4; font-size: 9px; }
.product-quick-info-toggle {
    position: absolute;
    z-index: 14;
    top: 4px;
    left: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(42, 62, 108, .13);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--primary);
    box-shadow: 0 7px 17px rgba(25, 47, 82, .11);
}
@media (hover: hover) and (pointer: fine) {
    .bundle-product-view:hover .product-quick-info {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}
@media (hover: none), (pointer: coarse) {
    .product-quick-info-toggle { display: inline-flex; }
    .bundle-product-view.quick-info-open .product-quick-info {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}
@media (max-width: 480px) {
    .product-quick-info { right: 5px; bottom: 70px; left: 5px; padding: 12px; }
    .product-quick-info p { -webkit-line-clamp: 3; }
}

/* Hero interaction: default campaign copy, contextual product summary and order below products. */
.hero-product-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
}
.hero-has-product .hero-product-focus {
    display:flex;
    min-height:0;
    flex-direction:column;
    gap:0;
    background:#fff;
    background-image:none;
}
.hero-product-main { display:grid;grid-template-columns:minmax(560px,1.12fr) minmax(390px,.88fr);align-items:stretch;gap:35px;width:100%;min-height:500px;aspect-ratio:1942/818;padding:24px 46px 0;border-radius:28px 28px 0 0;background-color:#fff;background-image:url('../img/hero-bundle-stage-v1.webp');background-repeat:no-repeat;background-position:center;background-size:cover;box-sizing:border-box; }
.hero-product-column { min-width:0; }
.hero-has-product .hero-product-minimal { display:flex;min-width:0;flex-direction:column;align-items:stretch;justify-content:center; }
.hero-has-product .hero-product-column .hero-product-visual {
    width: 100%;
}
.hero-product-order {
    position: relative;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 190px;
    min-height: 48px;
    padding: 10px 21px;
    border-radius: 15px;
    background: var(--primary);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 13px 28px rgba(42, 62, 108, .2);
}
.hero-product-order:hover { color: #fff; transform: translateY(-2px); }
.hero-product-actions {
    display: flex;
    align-items: stretch;
    gap: 13px;
    width:100%;
    margin-top:0;
    padding:16px 22px 4px;
    border-top:1px solid rgba(42,62,108,.11);
    background:rgba(255,255,255,.82);
    border-radius:0 0 20px 20px;
    box-sizing:border-box;
}
.hero-product-price { display:flex;min-width:155px;flex-direction:column;justify-content:center;gap:3px;padding:0 5px;white-space:nowrap;text-align:right; }
.hero-product-price small { color:#7b879a;font-size:11px;font-weight:700; }
.hero-product-price strong { color:#098b65;font-size:22px;font-weight:900; }
.hero-product-price em { font-size:13px;font-style:normal; }
.hero-product-buttons { display:flex;flex:1;align-items:flex-end;gap:9px;justify-content: space-around; }
.hero-has-product .hero-cooperation-link { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:145px;min-height:46px;padding:9px 14px;border:1px solid #cad7e8;border-radius:14px;background:#fff;color:var(--primary);font-size:12px;font-weight:800;text-decoration:none;box-sizing:border-box; }
.hero-has-product .hero-cooperation-link:hover { color:var(--primary);border-color:#8fa8ca;transform:translateY(-2px);text-decoration:none; }
.hero-product-hover-data { display: none !important; }
.hero-default-description {
    max-width: 510px;
    margin: 15px 0 12px;
    color: #63738d;
    font-size: 14px;
    line-height: 2.15;
    text-align: right;
    transition: opacity .18s ease;
}
.hero-product-help {
    display: block;
    max-width: 500px;
    color: #8794a8;
    font-size: 11px;
    line-height: 1.9;
}
.hero-has-product .hero-product-item { cursor: pointer; }
.hero-has-product .hero-product-item:nth-child(1) .hero-product-360,
.hero-has-product .hero-product-item:nth-child(1) > img {
    transform: translateY(27px);
}
.hero-has-product .hero-product-item:focus-visible {
    outline: 3px solid rgba(36, 142, 107, .35);
    outline-offset: 4px;
}
@media (max-width: 1000px) {
    .hero-product-main { grid-template-columns:1fr;gap:8px;min-height:0;aspect-ratio:auto;padding:18px;background:#fff; }
    .hero-default-description, .hero-product-help { margin-right: auto; margin-left: auto; text-align: center; }
    .hero-product-actions { margin:0;padding:15px 12px 6px; }
    .hero-has-product .hero-product-item:nth-child(1) .hero-product-360,
    .hero-has-product .hero-product-item:nth-child(1) > img { transform:translateY(18px); }
}
@media (max-width: 560px) {
    .hero-product-actions { flex-direction:column;align-items:stretch;gap:10px;padding:12px 10px; }
    .hero-product-price { width:100%;min-width:0;flex-direction:row;align-items:center;justify-content:space-between;padding:0 5px;box-sizing:border-box; }
    .hero-product-price strong { font-size:21px; }
    .hero-product-buttons { display:grid;width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px; }
    .hero-product-order,.hero-has-product .hero-cooperation-link { width:100%;min-width:0;min-height:45px;padding:8px 5px;font-size:11px;box-sizing:border-box;white-space:nowrap; }
    .hero-default-description { margin: 10px auto; font-size: 12px; line-height: 2; }
    .hero-product-help { font-size: 10px; }
    .hero-has-product .hero-product-item:nth-child(1) .hero-product-360,
    .hero-has-product .hero-product-item:nth-child(1) > img { transform:translateY(13px); }
}

/* Customer registration and account */
.customer-register-page{min-height:calc(100vh - 150px);padding:55px 18px;background:linear-gradient(145deg,#f5f9ff,#fff 48%,#f1fbf7);direction:rtl}
.customer-register-card{width:min(920px,100%);margin:auto;padding:30px;border:1px solid #e0e8f2;border-radius:28px;background:#fff;box-shadow:0 22px 60px rgba(31,54,91,.1)}
.customer-register-card>header{display:flex;align-items:center;gap:15px;padding-bottom:22px;border-bottom:1px solid #e8edf4}
.customer-register-card>header>span{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;background:#eaf3ff;color:var(--primary);font-size:22px}
.customer-register-card h1,.customer-register-card h2,.customer-register-card p{margin:0}.customer-register-card h1{color:var(--primary);font-size:24px}.customer-register-card header p{margin-top:5px;color:#78859a;font-size:12px}
.customer-register-card section{margin-top:25px;padding:22px;border:1px solid #e5ebf3;border-radius:20px;background:#fbfdff; width: 49%;}.customer-register-card section h2{margin-bottom:17px;color:#253b69;font-size:16px}
.customer-section-help{margin:-9px 0 17px!important;color:#8490a3;font-size:11px;line-height:1.9}
.customer-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.customer-fields label,.customer-code-row label{display:flex;min-width:0;flex-direction:column;gap:8px;color:#40506b;font-size:12px;font-weight:700}
.customer-fields input,.customer-fields select,.customer-code-row input{width:100%;height:50px;padding:0 14px;border:1px solid #dbe3ee;border-radius:13px;background:#fff;color:#243858;font-family:inherit;box-sizing:border-box;outline:0}.customer-fields input:focus,.customer-fields select:focus,.customer-code-row input:focus{border-color:#5275b6;box-shadow:0 0 0 4px rgba(65,95,161,.1)}
.customer-code-row{display:grid;grid-template-columns:1fr 220px;align-items:end;gap:15px}.customer-code-row button{height:50px;border:0;border-radius:13px;background:#eaf1fd;color:var(--primary);font-family:inherit;font-weight:800;cursor:pointer}.customer-code-row button:disabled{opacity:.5;cursor:not-allowed}.customer-verification>small{display:block;margin-top:11px;color:#8490a3;font-size:10px}
.customer-register-submit{display:flex;align-items:center;justify-content:center;gap:9px;width:auto;height:55px;border:0;border-radius:15px;background:var(--primary);color:#fff;font-family:inherit;font-size:15px;font-weight:900;cursor:pointer;box-shadow:0 13px 28px rgba(42,62,108,.18);
    padding: 0 1vw;
    justify-self: center;
    margin-top: 10vw;}
.customer-register-submit:disabled{opacity:.55}
.customer-form-message{display:none;margin-top:18px;padding:12px 15px;border-radius:12px;font-size:12px}.customer-form-message.success{display:block;background:#eaf9f2;color:#087d59}.customer-form-message.error{display:block;background:#fff0f0;color:#c43e49}.customer-login-link{margin-top:18px!important;text-align:center;color:#77859a;font-size:12px}.customer-login-link a{color:var(--primary);font-weight:800}.customer-signout{margin-right:auto;color:#d54b54;font-size:12px;font-weight:800}
.btn-customer-register{background:#fff!important;color:var(--primary)!important}
@media(max-width:650px){.customer-register-page{padding:24px 10px}.customer-register-card{padding:16px;border-radius:20px}.customer-register-card section{padding:16px}.customer-fields,.customer-code-row{grid-template-columns:1fr}.customer-code-row button{width:100%}.customer-register-card h1{font-size:20px}.customer-register-card>header{align-items:flex-start;flex-wrap:wrap}.customer-signout{margin-right:0;margin-left:auto}}

/* Lock every 360 frame to the physical top of the product stand. */
.hero-has-product .hero-product-item {
    top: 8px;
    bottom: 105px;
}
.hero-has-product .hero-product-visual .product-360,
.hero-has-product .hero-product-visual img {
    height: 100%;
    background-position: center bottom;
    object-position: center bottom;
}
.hero-has-product .hero-product-item:nth-child(1) .hero-product-360,
.hero-has-product .hero-product-item:nth-child(1) > img {
    transform: translateY(40px);
}
.hero-has-product .hero-product-item:nth-child(2) .hero-product-360,
.hero-has-product .hero-product-item:nth-child(2) > img {
    transform: translateY(20px);
}
.hero-has-product .hero-product-item:nth-child(1):hover {
    transform: translateX(2%);
}
.hero-has-product .hero-product-item:nth-child(2):hover {
    transform: translateX(-2%);
}
@media (max-width: 1000px) {
    .hero-has-product .hero-product-item { top: 5px; bottom: 105px; }
    .hero-has-product .hero-product-item:nth-child(1) .hero-product-360,
    .hero-has-product .hero-product-item:nth-child(1) > img { transform: translateY(75px); }
    .hero-has-product .hero-product-item:nth-child(2) .hero-product-360,
    .hero-has-product .hero-product-item:nth-child(2) > img { transform: translateY(55px); }
}
@media (max-width: 560px) {
    .hero-has-product .hero-product-item { top: 0; bottom: 88px; }
    .hero-has-product .hero-product-item:nth-child(1) .hero-product-360,
    .hero-has-product .hero-product-item:nth-child(1) > img { transform: translateY(65px); }
    .hero-has-product .hero-product-item:nth-child(2) .hero-product-360,
    .hero-has-product .hero-product-item:nth-child(2) > img { transform: translateY(50px); }
}
/* ===== Idea 6 — سایدبار سمت راست، sticky، نسخه نهایی و پاکسازی‌شده =====
   این بلوک باید کامل جایگزین هر بلوکی با عنوان «Idea 6» یا هر قانونی با
   سلکتور .customer-register-card / .customer-register-sidebar / .sidebar-item
   که قبلاً در فایل وجود داشته بشه. اگر نسخه‌ی قبلی رو نگه دارید، تداخل ایجاد می‌شه. */

.customer-register-card{
    display: flex;
    align-items: stretch;      /* سایدبار دقیقاً هم‌قد دیو کناری (فرم) می‌شود */
    padding: 0;
    overflow: visible;
    box-sizing: border-box;
    gap: 0px;

}

/* ---------- سایدبار: هم‌قد کامل با فرم، محتوا بالا و آیکون ساک ته‌چسب پایین ---------- */
.customer-register-sidebar{
    flex: 0 0 20%;
    width: 20%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 40px 30px;
    border-radius: 24px;
    background: linear-gradient(135deg, #29477e, #4568a8);
    color: #fff;
    box-shadow: 0 18px 45px rgba(42, 62, 108, .22);
    border-top-right-radius: 24px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.customer-register-sidebar-content{
    display: flex;
    flex-direction: column;
    gap: 18px;                 /* فاصله‌ی یکدست بین عنوان و همه‌ی آیتم‌ها */
}

.register-sidebar-title h2{
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.6;
}

.register-sidebar-title p{
    margin: 0;
    font-size: 12.5px;
    line-height: 2;
    opacity: .85;
}

.sidebar-item{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    margin-bottom: 70px;
}

.sidebar-item i{
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    color: #29477e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.sidebar-item span{
    font-size: 13.5px;
    font-weight: 700;
}

.customer-register-sidebar-bag{
    display: block;
    align-self: center;
    margin-top: auto;          /* کل فضای اضافی حاصل از کشیده‌شدن سایدبار را همینجا جمع می‌کند */
    padding-top: 30px;
    font-size: 60px;
    color: rgba(255, 255, 255, .16);
}

/* ---------- بخش فرم (header + form) ---------- */
.customer-register-main{
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #e0e8f2;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(31, 54, 91, .06);
    border-top-right-radius: 0px!important;
    border-bottom-right-radius: 0px!important;
}

.customer-register-main > header{
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 32px 34px 22px;
    border-bottom: 1px solid #e8edf4;
}

.customer-register-main > header > span{
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 17px;
    background: #eaf3ff;
    color: var(--primary);
    font-size: 22px;
}
.customer-register-card {
    display: block;
    align-items: stretch;
    padding: 0;
    overflow: visible;
    box-sizing: border-box;
    gap: 0px;
    width: 99%;
    margin: 0 auto;
    padding: 30px !important;
}
.customer-orders-section {
    margin: 1vw auto;
    background-color: white;
    border: 1px solid var(--border);
    border-radius: 25px;
    width: 99%;
    padding: 1vw;
}
.CPF1 {
    width: 100% !important;
}
.CPF2 {
    float: left;
}
@media (max-width: 768px){
    .CPF2 , .CPF3{
        width: 100% !important;
    }
    #customerProfileForm{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
.customer-register-main > header h1,
.customer-register-main > header p{
    margin: 0;
}

.customer-register-main > header h1{
    color: var(--primary);
    font-size: 24px;
}

.customer-register-main > header p{
    margin-top: 5px;
    color: #78859a;
    font-size: 12px;
}

.customer-register-main > form{
    padding: 0 34px 34px;
}

/* ---------- موبایل: سایدبار بالا، تمام‌عرض، بدون sticky ---------- */
@media (max-width: 820px){
    .customer-register-card{
        border-bottom-right-radius:20px!important;
        border-bottom-left-radius:20px!important;
        flex-direction: column;
        gap: 0px;
    }

    .customer-register-sidebar{
        flex: none;
        width: 100%;
        padding: 26px 20px;
        border-radius: 0px!important;
        border-top-right-radius: 24px !important;
        border-top-left-radius: 24px !important;
    }

    .register-sidebar-title h2,
    .register-sidebar-title p{
        text-align: center;
    }

    .customer-register-sidebar-bag{
        margin-top: 16px;
        font-size: 46px;
    }

    .customer-register-main{
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px !important;
    }

    .customer-register-main > header{
        padding: 24px 18px 0;
    }

    .customer-register-main > form{
        padding: 0 18px 24px;
    }
}

.dropdown-menu-custom {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    width: 200px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    display: none;
    animation: fadeMenu .2s ease;
    z-index: 1100;
    overflow: hidden;
}

.dropdown-menu-custom.show {
    display: block;
}

.dropdown-menu-custom a {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 14px;

    text-decoration: none;

    color:var(--text);

    transition: .2s;
}

.dropdown-menu-custom a:hover {

    background: #f5f5f5;
}

.dropdown-menu-custom a i {

    color: #506B95;

    width: 20px;
}

@keyframes fadeMenu {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    float: left;
    align-items: center;
    justify-content: end;
    width: min-content;
}

.profile-btn {
    aspect-ratio: 1 / 1;
    width: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .15);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.profile-btn i {
    font-size: 22px;
}

.profile-btn:hover {
    background: rgba(255, 255, 255, .25);
}
.pub-nav-btn{
    display: flex;
    gap: 7px;
    align-items: center;
    position: relative;
    flex-wrap: nowrap;
}
.dropdown-menu-custom.show {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
}
.shop-profile-link {
    color: black !important;
}
.pub-nav-btn .btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    min-height: 42px;
    margin: 0;
    white-space: nowrap;
}
.pub-nav .shop-profile-link {
    background: rgba(255, 255, 255, .14);
}
.profile-signout { color: #ee4d4d !important; cursor: pointer; }
.pub-nav .shop-signout {
    background: rgba(238, 77, 77, .16);
    border-color: rgba(255, 210, 210, .42);
    border-radius: 0;
}
.pub-nav .shop-signout:hover { background: rgba(238, 77, 77, .28); }

@media (max-width: 768px) {
    .dropdown-menu-custom {
        position: static;
        width: 100%;
        margin-top: 8px;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
    }
    .pub-nav-btn {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .pub-nav-btn .btn-login {
        width: 100%;
        min-width: 0;
    }
}
.shipping-timeline {
    direction: rtl;
    color: #fff;
    padding: 25px 0;
    width: 100%;
}
.timeline-item p {
    border: none;
}
.hero-timeline-text p {
    border: none;
}
/* عنوان */

.timeline-title {
    text-align: center;
    margin-bottom: 30px;
}

.timeline-title > i {
    font-size: 28px;
    margin-bottom: 10px;
    opacity: .95;
}

.timeline-title h3 {
    margin: 5px 0;
    font-size: 20px;
}

.timeline-title span {
    font-size: 12px;
    opacity: .7;
}


/* خود Timeline */

.timeline {
    position: relative;
}


/* خط وسط */

.timeline::before {
    content: "";

    position: absolute;

    top: 20px;
    bottom: 20px;

    right: 19px;

    width: 2px;

    background: rgba(255,255,255,.25);
}


/* هر مرحله */

.timeline-item {

    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 28px;

    z-index: 1;
}


/* دایره آیکون */

.timeline-icon {

    flex-shrink: 0;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;

    color: #173b9e;

    font-size: 15px;

    box-shadow: 0 3px 10px rgba(0,0,0,.15);
}


/* متن */

.timeline-content {
    text-align: right;
}

.timeline-content h4 {

    margin: 0 0 4px;

    font-size: 14px;

    font-weight: bold;
}

.timeline-content p {

    margin: 0;

    font-size: 11px;

    opacity: .7;
}


/* افکت هاور */

.timeline-item:hover .timeline-icon {

    transform: scale(1.1);

}

.timeline-icon {

    transition: .25s ease;

}
.plan-modal-title{display:flex;gap:13px;align-items:center;border-bottom:1px solid #e5eaf2;padding-bottom:18px;margin-bottom:22px}
.plan-modal-title>i{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:#e9f0ff;color:#29487f;font-size:20px}
.plan-modal-title h4,.reward-builder-head h5{margin:0 0 6px;color:#183568}.plan-modal-title span,.reward-builder-head small{color:#8490a5}
.plan-modal .modal-content{position:relative;max-width:1050px;width:calc(100% - 30px);margin:20px auto;padding:28px;border-radius:22px}
.save-btn {
    display: flex;
    /*margin: 0 auto;*/
    justify-content: center;
    align-items: center;
    width: 150px;
    border: none;
    border-radius: 12px;
    background: var(--primary);
    color:#fff;
    font-size: 15px;
    font-weight: bold;
}

.custom-input {

    height: 50px;

    border-radius: 12px;

    border: 1px solid #ddd;
}

.custom-input:focus {

    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--card-soft);
}
.toggle-pass {
    top: 55%;
    position: absolute;
    left: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: rgb(153, 153, 153);
}
.modal-footer .btn+.btn{
    margin: 0;
}
.modal-footer {
    gap: 5px;
}
.def-btn {
    background-color: var(--menu-active);
    color: white;
    border: 1px solid var(--primary);
    border-radius: 1vw;
    padding: 0.7vw 1vw;
}
.sec-btn {
    border-radius: 1vw;
    padding: 0.7vw 1vw;
    background-color: var(--border);
    color: var(--menu-active);
    border: 1px solid var(--menu-active);
}
.users-card {
    background-color: white;
    padding: 2vw;
    border-radius: 2vw;
    width: 96%;
    margin: 0 auto;
    margin-bottom: 2vh;
    box-shadow: -12px 0 24px -6px rgba(0, 0, 0, 0.12), 12px 0 24px -6px rgba(0, 0, 0, 0.12), 0 12px 24px -100px rgba(0, 0, 0, 0.12);
}
.card-count {
    font-weight: bold;
    color: var(--primary);
    max-width: 6rem;
    height: 4rem;
    border-radius: 1.2rem;
    border: 1px var(--primary) solid;
    background-color: var(--card-soft);
}
@media (max-width: 1023px) {
    .users-header.card-count {
        aspect-ratio: 1 / 1;
        padding: 0 !important;
        min-width: 0.1vw;
        flex: 0.8;
        height: 6vh;
    }
    .users-header {
        flex-wrap: nowrap;
        align-items: center;
    }
    .users-header > :first-child {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .users-header > :first-child .btn-add-user,
    .users-header > :first-child .bulk-discount-btn {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap;
        font-size: 12px;
    }
    .users-header .card-count {
        flex: 0 0 58px;
        width: 58px;
        min-width: 58px;
        height: 50px;
        margin: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .users-header .card-count .card-body {
        width: 100%;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .users-header .card-count .card-title {
        margin: 0 !important;
        line-height: 1;
    }
}
.card-body {
    padding: 35px;
}
.card-body label {
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
    color: black;
}
@media (max-width: 768px) {
    .card-body {
        padding: 20px;
    }
}
@media (max-width: 767px) {
    .card-body {
        padding: 16px !important;
        display: flex;
        justify-content: center;
    }
}
.users-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2vw;
}
.customer-signup-benefits {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.loader {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 28, 55, .45);
    z-index: 20;
    align-items: center;
    justify-content: center
}

.loader i {
    font-size: 42px;
    color: #fff
}

@media (max-width: 768px) {

    .pub-nav-main {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 20px;
        padding: 0;
    }

    .pub-nav-profile-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 14px;
        padding: 14px 16px;
        text-decoration: none;
        width: 100%;
        margin-top: 0 !important;
    }

    .pub-nav-profile-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        text-align: right;
    }

    .pub-nav-profile-name {
        color: #fff;
        font-size: 14px;
        font-weight: 500;
    }

    .pub-nav-profile-sub {
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
    }

    .pub-nav-profile-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #4a545f;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 18px;
        flex-shrink: 0;

    }

    .pub-nav-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .pub-nav-group-title {
        color: rgba(255, 255, 255, 0.5);
        font-size: 12px;
        padding: 0 4px;
    }

    .pub-nav-group-box {
        display: flex;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        overflow: hidden;
    }

    .pub-nav-group-box a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        padding: 13px 14px;
        font-size: 13px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: 0 !important;
        width: 100%;
        border-radius: 0 !important;
    }

    .pub-nav-group-box a:last-child {
        border-bottom: none;
    }

    .pub-nav-group-box a i {
        color: rgba(255, 255, 255, 0.5);
        font-size: 16px;
    }
    .pub-nav-btn{
        display: none;
    }
}
/*.pub-nav-tab {*/
/*    background: rgb(64, 93, 158);*/
/*    backdrop-filter: blur(18px);*/
/*}*/
@media (min-width: 769px) {

    .pub-nav-profile-card {
        display: none;
    }

    .pub-nav-group {
        display: contents;
    }

    .pub-nav-group-title {
        display: none;
    }

    .pub-nav-group-box {
        display: contents;
    }

}
@media (min-width: 769px) {
    /*.pub-nav-tab {*/
    /*    background:none;*/
    /*}*/
    .pub-nav-profile-card {
        display: none;
    }

    .pub-nav-group {
        display: contents;
    }

    .pub-nav-group-title {
        display: none;
    }

    .pub-nav-group-box {
        display: contents;
    }

    .pub-nav-group-account {
        display: none;
    }

}
.pub-nav-tab {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background:none;
    backdrop-filter: blur(18px);
}

@media (max-width: 768px) {
    .pub-nav-tab {
        display: flex;
        width: 75%;
        height: 100%;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        background: rgba(74, 98, 192, 0.23);
        backdrop-filter: blur(18px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6vw;

        margin-top: 4vw;
        margin-left: 4vw;
        padding: 5vw;
        float: left;
    }
}
.breadcrumb-home-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eef1f8;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.side-main-icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .13);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin: 0 auto 18px;
}
.contact-breadcrumb {
    border: 1px solid #d0d0d0;
    border-radius: 2vw;
    align-items: center;
    display: flex;
    justify-content: center;
    width: max-content;
    padding: 0.5vw 3vw;
    margin-right: 0.1vw;
    background-color: #efefef;
    gap: 9px;
    font-size: 13px;
    color: #374151;
    margin-bottom: 18px;
}
.contact-breadcrumb .crumb-sep {
    font-size: 11px;
    color: #9ca3af;
}

.contact-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
}

.contact-breadcrumb a:hover {
    color: var(--primary);
}
.contact-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
}

.contact-breadcrumb a:hover {
    color: var(--primary);
}

.breadcrumb-home-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eef1f8;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.contact-page {
    min-height: calc(100vh - 70px);
    padding: 30px 20px 20px;
    background: radial-gradient(circle at 12% 10%, rgba(65, 95, 161, .14), transparent 34%),
    linear-gradient(180deg, #f5f7fb 0%, #eef2f7 100%);
}
.contact-wrap {
    width: 100%;
    margin: 0 auto;
}
.contact-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 45px rgba(42, 62, 108, .12);
}

.contact-card-main {
    display: flex;
}

.about-intro-icon {
    width: 20px;
    height: 20px;
}

/* ===== پنل کناری آبی ===== */
.contact-side {
    width: 30%;
    flex-shrink: 0;
    background: var(--gradient);
    color: #fff;
    padding: 32px 26px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.contact-side h2 {
    font-size: 16.5px;
    font-weight: bold;
    margin-bottom: 11px;
}

.contact-side .side-desc {
    font-size: 12px;
    line-height: 1.9;
    opacity: .8;
    margin-bottom: 20px;
    text-align: justify;
}

.side-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, .18);
    margin: 0 0 22px;
}

/* مراحل با اتصال نقطه‌چین */
.contact-steps {
    position: relative;
    text-align: right;
}

.contact-steps::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    right: 18px;
    border-right: 1.5px dashed rgba(255, 255, 255, .3);
    z-index: 0;
}

.contact-step {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    margin-bottom: 45px;
}

.contact-step:last-child {
    margin-bottom: 0;
}

.step-num {
    width: 38px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    flex-shrink: 0;
    background: #4a5e89;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12.5px;
    color: #fff;
}

.step-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 2px;
}

.step-title {
    font-size: 13px;
    font-weight: bold;
}

.step-desc {
    font-size: 11.3px;
    opacity: .7;
    line-height: 1.7;
}

/* ===== بخش محتوا (سمت راست تبدیل به فرم‌مانند) ===== */
.contact-form {
    flex: 1;
    min-width: 0;
    padding: 34px 36px;
}

.contact-form h3 {
    color: var(--primary);
    font-size: 19px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

.contact-form .subtitle {
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 26px;
    text-align: center;
}

/* نوار پایینی داخل کارت */
.contact-features {
    border-top: 1px solid var(--border);
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 16px 20px;
    flex-wrap: wrap;
    gap: 14px;
    border-radius: 1vw;
    margin-top: 1vw;
}

.contact-feature-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: #374151;
}

.contact-feature-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eef1f8;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .contact-form {
        padding: 24px 14px;
    }
}

@media (max-width: 820px) {
    .contact-page {
        overflow-x: hidden;
    }

    .contact-page > .contact-card {
        padding: 0 !important;
        border: 0;
        box-shadow: none;
        background: transparent !important;
        overflow: visible;
    }

    .contact-wrap {
        width: 100%;
        max-width: 100%;
    }

    .contact-breadcrumb {
        width: 100%;
        margin: 0 0 12px;
        padding: 10px 14px;
        border-radius: 12px;
        justify-content: flex-start;
        box-sizing: border-box;
    }

    .contact-card-main {
        flex-direction: column;
    }

    .contact-side {
        width: 100%!important;
        box-sizing: border-box;
        padding: 24px 18px;
        border-radius: 18px 18px 0 0;
    }

    .contact-steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .contact-steps::before {
        display: none;
    }

    .contact-step {
        margin: 0;
        align-items: flex-start;
    }

    .step-num {
        width: 32px;
    }

    .contact-form {
        width: 100%;
        box-sizing: border-box;
    }
}
/* ===== دسته‌بندی‌های دراپ‌داون در دسکتاپ ===== */
@media (min-width: 769px) {

    .pub-nav-group-dropdown {
        display: inline-flex !important; /* override display:contents پیش‌فرض */
        position: relative;
    }

    .pub-nav-group-dropdown > .pub-nav-group-title {
        display: flex !important;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        margin: 0;
        border-radius: 10px;
        color: rgba(255, 255, 255, 0.85);
        font-size: 13px;
        cursor: default;
        transition: .2s;
    }

    .pub-nav-group-dropdown:hover > .pub-nav-group-title {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    .pub-nav-group-dropdown > .pub-nav-group-title::after {
        content: '';
        width: 6px;
        height: 6px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        opacity: .7;
        margin-top: -2px;
        transition: transform .2s ease;
    }

    .pub-nav-group-dropdown:hover > .pub-nav-group-title::after {
        transform: rotate(225deg);
        margin-top: 2px;
    }

    .pub-nav-group-dropdown > .pub-nav-group-box {
        display: flex !important; /* override contents پیش‌فرض */
        flex-direction: column;
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        width: 230px;
        padding: 8px;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease;
        z-index: 1100;
    }

    .pub-nav-group-dropdown > .pub-nav-group-box::before {
        content: '';
        position: absolute;
        top: -6px;
        right: 18px;
        width: 12px;
        height: 12px;
        background: #fff;
        transform: rotate(45deg);
    }

    .pub-nav-group-dropdown:hover > .pub-nav-group-box {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .pub-nav-group-dropdown > .pub-nav-group-box a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px;
        border-radius: 10px;
        color: var(--text);
        font-size: 13px;
        text-decoration: none;
        transition: .2s;
    }

    .pub-nav-group-dropdown > .pub-nav-group-box a:hover {
        background: #f5f5f5;
    }

    .pub-nav-group-dropdown > .pub-nav-group-box a i {
        color: #506B95;
        width: 18px;
    }
}