@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600&family=Roboto:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    /* ---- colors ---- */
    --ivory: #FDF8FA;
    --surface: #FFFFFF;
    --ink: #211C15;
    --muted: #7A6E5E;
    --hairline: #EAD9E3;
    --gold: #D6336C;
    --gold-deep: #A02458;
    --gold-light: #EC6B9C;
    --rose: #6C4BA6;
    --rose-deep: #4A3278;
    --black: #141210;
    --white:#fff;
    --success: #5C7A5A;
    --font-display: 'Roboto', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --fs-h1: clamp(2.7rem, 3.6vw, 3.4rem); /* page/product title */
    --fs-h2: clamp(2.4rem, 3.2vw, 3.1rem); /* section headlines */
    --fs-h3: clamp(1.55rem, 2vw, 1.9rem); /* card / subsection titles */
    --fs-h4: 1.2rem; /* minor headings */
    --fs-h5: 1.02rem; /* small headings / labels */
    --fs-h6: .92rem; /* micro headings */
    /* ---- body / utility text scale ---- */
    --fs-lead: 1.12rem; /* intro / standfirst paragraphs */
    --fs-body: 1.02rem; /* default paragraph / list text */
    --fs-small: .92rem; /* secondary text, meta */
    --fs-tiny: .8rem; /* captions */
    --fs-badge: .72rem; /* pill badges, tags */
    /* ---- special large numerals (price, rating score) share the
       display font but sit above the heading scale ---- */
    --fs-display-lg: clamp(2.4rem, 4vw, 3.2rem);
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: #FFFFFF;
    font-weight: 400;
    font-size: var(--fs-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .display-font {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: var(--black);
}

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

h4 {
    font-size: var(--fs-h4);
}

h5 {
    font-size: var(--fs-h5);
}

h6 {
    font-size: var(--fs-h6);
    font-weight: 600;
}

.eyebrow {
    font-family: var(--font-body);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: var(--fs-tiny);
    color: var(--gold-deep);
    font-weight: 700;
}

.container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
}

/* ============ TOP UTILITY BAR ============ */
.foil-strip {
    height: 5px;
    background: linear-gradient(90deg, var(--black) 0%, var(--gold) 22%, var(--gold-light) 40%, var(--gold) 55%, var(--rose) 78%, var(--black) 100%);
    background-size: 200% 100%;
    animation: sheen 7s linear infinite;
}

@keyframes sheen {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.top-crumb {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--muted);
    padding: 18px 0;
}

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

    .top-crumb .current {
        color: var(--ink);
        font-weight: 500;
    }

/* ============ GALLERY ============ */
.gallery-wrap {
    position: sticky;
    top: 100px;
}

.gallery-main {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--hairline);
}

.card-mock {
    position: relative;
    aspect-ratio: 16/10.2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--ivory);
    cursor: zoom-in;
}

    .card-mock img,
    .card-mock video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .card-mock .plate {
        width: 82%;
        aspect-ratio: 1.75/1;
        border-radius: 10px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 24px 45px -18px rgba(0,0,0,.45);
    }

        .card-mock .plate::after {
            content: "";
            position: absolute;
            top: 0;
            left: -60%;
            width: 40%;
            height: 100%;
            background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
            transform: skewX(-18deg);
            animation: shimmer 4.5s ease-in-out infinite;
        }

@keyframes shimmer {
    0% {
        left: -60%;
    }

    45% {
        left: 130%;
    }

    100% {
        left: 130%;
    }
}

.plate-ivory {
    background: linear-gradient(135deg,#F4EEE0,#E7DBC2);
}

.plate-black {
    background: linear-gradient(135deg,#211C17,#0B0A08);
}

.plate-rose {
    background: linear-gradient(135deg,#EBD9D5,#D8B7AF);
}

.plate-goldfoil {
    background: linear-gradient(135deg,#3A2E17,#151109);
}

.plate-blush {
    background: linear-gradient(135deg,#F6E3DE,#E9C4BC);
}

.plate .brand-name {
    position: absolute;
    left: 9%;
    top: 16%;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .02em;
    font-size: clamp(14px, 2.6vw, 22px);
}

.plate-ivory .brand-name, .plate-blush .brand-name {
    color: var(--black);
}

.plate-black .brand-name, .plate-goldfoil .brand-name {
    color: var(--gold-light);
}

.plate-rose .brand-name {
    color: #5C2E29;
}

.plate .sub-role {
    position: absolute;
    left: 9%;
    top: 31%;
    font-family: var(--font-body);
    font-size: clamp(8px, 1.1vw, 11px);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.plate-ivory .sub-role, .plate-blush .sub-role {
    color: #6B5F4E;
}

.plate-black .sub-role, .plate-goldfoil .sub-role {
    color: #C9BDA0;
}

.plate-rose .sub-role {
    color: #7C4C46;
}

.plate .qr-block {
    position: absolute;
    right: 8%;
    bottom: 12%;
    width: 26%;
    aspect-ratio: 1/1;
    background: #fff;
    border-radius: 6px;
    padding: 6%;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(5,1fr);
    gap: 3px;
    box-shadow: 0 8px 16px -6px rgba(0,0,0,.35);
}

    .plate .qr-block span {
        background: #181410;
        border-radius: 1px;
    }

        .plate .qr-block span:nth-child(3n) {
            background: transparent;
        }

        .plate .qr-block span:nth-child(7n) {
            background: transparent;
        }

.plate .ring {
    position: absolute;
    left: 8%;
    bottom: 14%;
    width: 34px;
    height: 34px;
    border: 2px solid var(--gold-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--fs-h5);
    color: var(--gold-light);
}

.plate-ivory .ring, .plate-blush .ring {
    border-color: var(--gold-deep);
    color: var(--gold-deep);
}

.plate-rose .ring {
    border-color: #7C4C46;
    color: #7C4C46;
}

.zoom-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(20,18,16,.78);
    color: #F4EEE0;
    border: 1px solid rgba(232,205,138,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 5;
    transition: transform .2s ease, background .2s ease;
}

    .zoom-btn:hover {
        background: var(--black);
        transform: scale(1.08);
        color: var(--gold-light);
    }

.badge-free {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    background: var(--black);
    color: var(--gold-light);
    font-family: var(--font-body);
    font-size: var(--fs-badge);
    font-weight: 700;
    letter-spacing: .15em;
    padding: 6px 14px;
    border-radius: 30px;
    border: 1px solid var(--gold);
    text-transform: uppercase;
}

.gallery-thumbs {
    margin-top: 14px;
}

    .gallery-thumbs .item {
        cursor: pointer;
        border-radius: 9px;
        overflow: hidden;
        border: 2px solid transparent;
        aspect-ratio: 16 / 10.2;
        transition: border-color .2s ease, transform .2s ease;
    }

        .gallery-thumbs .item.active {
            border-color: var(--gold);
        }

        .gallery-thumbs .item:hover {
            transform: translateY(-2px);
        }

    .gallery-thumbs .card-mock {
        aspect-ratio: 16 / 10.2;
        cursor: pointer;
    }

    .gallery-thumbs .plate {
        width: 88%;
    }

.zoom-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,13,10,.92);
    z-index: 99999999;
    align-items: center;
    justify-content: center;
}

    .zoom-modal.show {
        display: flex;
    }

    .zoom-modal .zoom-stage {
        width: min(900px,92vw);
        aspect-ratio: 16/10;
        overflow: hidden;
        border-radius: 10px;
        cursor: zoom-in;
    }

        .zoom-modal .zoom-stage.zoomed {
            cursor: zoom-out;
        }

        .zoom-modal .zoom-stage .plate {
            width: 100%;
            aspect-ratio: auto;
            height: 100%;
            transition: transform .15s ease-out;
            transform-origin: center;
        }

    .zoom-modal .close-zoom {
        position: absolute;
        top: 24px;
        right: 30px;
        color: #F4EEE0;
        font-size: 26px;
        background: none;
        border: none;
    }

/* ============ SECTION 1: PRODUCT OVERVIEW ============ */
.product-sec {
    padding: 20px 0 40px;
}

.product-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 46px;
    align-items: start;
}

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

/* product title = the page's H1-level heading */
.product-title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 1.15;
    color: var(--black);
    margin-top: 12px;
}

.product-tags {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    color: var(--muted);
    margin-top: 10px;
}

.rating {
    display: flex;
    padding-block: 10px;
}

.rating-row {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--muted);
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .rating-row .fa-star {
        color: var(--gold);
        font-size: 1rem;
    }

.divider-hair {
    border: none;
    border-top: 1px solid var(--hairline);
    margin: 22px 0;
}

/* price is a display numeral, sits above the heading scale */
.price-block {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 6px;
}

    .price-block .price-now {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: var(--fs-display-lg);
        color: var(--black);
    }

    .price-block .price-old {
        font-family: var(--font-body);
        color: var(--muted);
        text-decoration: line-through;
        font-size: var(--fs-h3);
    }

    .price-block .price-tag {
        font-family: var(--font-body);
        font-size: var(--fs-badge);
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        background: #EFF5EC;
        color: var(--success);
        padding: 4px 10px;
        border-radius: 20px;
        border: 1px solid #cfe1c9;
    }

/* ---- right-side info panel: why buy / features ---- */
.info-panel {
    background: var(--ivory);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 18px 20px;
    margin-top: 4px;
}

    .info-panel h2 {
        font-family: var(--font-display);
        font-size: var(--fs-h3);
        font-weight: 700;
        color: var(--black);
        margin-bottom: 12px;
    }

    .info-panel ul {
        list-style: none;
    }

    .info-panel li {
        font-family: var(--font-body);
        font-size: var(--fs-body);
        color: #413A2F;
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
        line-height: 1.5;
    }

        .info-panel li:last-child {
            margin-bottom: 0;
        }

    .info-panel i {
        color: var(--gold-deep);
        margin-top: 5px;
    }

/* ---- bundle table: true colspan, stacked full-width sections ---- */
.bundle-block {
    margin-top: 22px;
}

    .bundle-block > .bb-head {
        margin-bottom: 12px;
    }

        .bundle-block > .bb-head h4 {
            font-family: var(--font-display);
            font-size: var(--fs-h4);
            font-weight: 700;
            color: var(--black);
        }

        .bundle-block > .bb-head p {
            font-family: var(--font-body);
            font-size: var(--fs-body);
            color: var(--muted);
            margin-top: 4px;
        }

.bundle-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--hairline);
}

    .bundle-table th[colspan] {
        text-align: left;
        padding: 8px 16px;
        background: var(--ivory);
        border-bottom: 1px solid var(--hairline);
        cursor: pointer;
        user-select: none;
    }

        .bundle-table th[colspan] .bt-head-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .bundle-table th[colspan] .bt-head-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .bundle-table th[colspan] .bt-icon {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--surface);
            border: 1px solid var(--gold-light);
            color: var(--gold-deep);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex: 0 0 auto;
        }

        .bundle-table th[colspan] .bt-title {
            font-family: var(--font-display);
            font-size: var(--fs-h5);
            font-weight: 700;
            color: var(--black);
            line-height: 1.1;
        }

        .bundle-table th[colspan].open .bt-title {
            color: var(--surface) !important;
        }

        .bundle-table th[colspan] .bt-sub {
            display: block;
            font-family: var(--font-body);
            font-size: var(--fs-tiny);
            font-weight: 400;
            color: var(--muted);
            margin-top: 1px;
        }



        .bundle-table th[colspan] .bt-arrow {
            color: var(--gold-deep);
            font-size: 13px;
            flex: 0 0 auto;
            transition: transform .25s ease;
        }

        .bundle-table th[colspan].open {
            background: var(--black);
        }

            .bundle-table th[colspan].open .bt-title, .bundle-table th[colspan].open .bt-sub {
                color: var(--surface) !important;
            }

            .bundle-table th[colspan].open .bt-arrow {
                transform: rotate(180deg);
                color: var(--surface) !important;
            }

    .bundle-table tr.bt-body-row {
        display: none;
    }

        .bundle-table tr.bt-body-row.open {
            display: table-row;
        }

    .bundle-table td[colspan] {
        padding: 18px 18px 22px;
        border-top: none;
    }

    .bundle-table tr + tr th[colspan] {
        border-top: 1px solid var(--hairline);
    }

    .bundle-table .bt-feature-list {
        list-style: none;
        margin-bottom: 16px;
    }

        .bundle-table .bt-feature-list li {
            font-family: var(--font-body);
            font-size: var(--fs-body);
            color: #413A2F;
            display: flex;
            gap: 8px;
            margin-bottom: 9px;
            line-height: 1.4;
        }

        .bundle-table .bt-feature-list i {
            color: var(--success);
            margin-top: 3px;
            flex: 0 0 auto;
        }

/* nested block inside a bundle cell */
.bt-nested {
    background: var(--ivory);
    border: 1px dashed var(--hairline);
    border-radius: 10px;
    padding: 14px 15px;
}

    .bt-nested .bt-nested-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }

        .bt-nested .bt-nested-head i {
            color: var(--gold-deep);
            font-size: .95rem;
        }

        .bt-nested .bt-nested-head span {
            font-family: var(--font-display);
            font-size: var(--fs-h5);
            font-weight: 600;
            color: var(--black);
        }

    .bt-nested ul {
        list-style: none;
    }

    .bt-nested li {
        font-family: var(--font-body);
        font-size: var(--fs-small);
        color: #413A2F;
        display: flex;
        gap: 8px;
        margin-bottom: 7px;
        line-height: 1.4;
    }

        .bt-nested li:last-child {
            margin-bottom: 0;
        }

    .bt-nested i.fa-circle-check {
        color: var(--success);
        margin-top: 3px;
        flex: 0 0 auto;
    }

.plan-tiers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-tier {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 9px 12px;
    justify-content: space-between;
}

    .plan-tier > div {
        display: flex;
        align-items: center;
        gap: 5px;
    }


    .plan-tier .pt-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex: 0 0 auto;
        display: inline-block;
    }

    .plan-tier.tier-bronze .pt-dot {
        background: #B08D57;
    }

    .plan-tier.tier-silver .pt-dot {
        background: #A7A7A7;
    }

    .plan-tier.tier-gold .pt-dot {
        background: var(--gold);
    }

    .plan-tier .pt-name {
        font-family: var(--font-body);
        font-size: var(--fs-small);
        font-weight: 700;
        color: var(--black);
        min-width: 66px;
    }

    .plan-tier .pt-desc {
        font-family: var(--font-body);
        font-size: var(--fs-tiny);
        color: var(--muted);
    }

/* ---- template / design chooser ---- */
.tpl-side {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 8px 16px 4px;
    margin-top: 22px;
}

.tpl-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.tpl-side-title {
    font-family: var(--font-body);
    font-size: var(--fs-h5);
    font-weight: 700;
    color: var(--black);
    line-height: 1.2;
}

    .tpl-side-title span {
        display: block;
        font-size: var(--fs-tiny);
        font-weight: 400;
        color: var(--muted);
        margin-top: 3px;
    }

.tpl-nav {
    display: flex;
    gap: 6px;
}

.tpl-nav-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    background: var(--ivory);
    color: var(--gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
}

    .tpl-nav-btn:hover {
        background: var(--gold-light);
        border-color: var(--gold);
    }

    .tpl-nav-btn:disabled {
        opacity: .35;
        cursor: default;
    }

.tpl-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .tpl-track::-webkit-scrollbar {
        display: none;
    }

.tpl-card {
    flex: 0 0 auto;
    width: 82px;
    scroll-snap-align: start;
    position: relative;
}

.tpl-thumb {
    width: 82px;
    height: 65px;
    border-radius: 5px;
    border: 1px solid var(--hairline);
    background: var(--ivory);
    overflow: hidden;
    position: relative;
}

    .tpl-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

.tpl-card.active .tpl-thumb {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold-light);
}

.tpl-check {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--success);
    color: var(--surface);
    font-size: 9px;
    display: none;
    align-items: center;
    justify-content: center;
}

.tpl-card.active .tpl-check {
    display: flex;
}

.tpl-name {
    display: block;
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: var(--fs-tiny);
    line-height: 1.25;
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tpl-card.active .tpl-name {
    color: var(--rose-deep);
    font-weight: 600;
}

@media (max-width: 640px) {
    .bundle-table, .bundle-table thead, .bundle-table tbody, .bundle-table tr, .bundle-table th, .bundle-table td {
        display: block;
        width: 100%;
    }
}

.button-group-box {
    display: block;
    gap: 5px;
    margin-top: 24px;
    position: sticky;
    bottom: 0px;
    background-color: #fff;
    padding-bottom: 10px;
    padding-top: 5px;
    z-index: 999;
}

@media (max-width: 480px) {
    .button-group-box {
        flex-direction: column;
    }
}

.btn-gold, .btn-outline-dark-lux {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 14px 20px;
    border-radius: 50px;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-gold {
    background: linear-gradient( 135deg, var(--gold-deep), var(--gold), var(--rose) );
    border: none;
    color: var(--white);
    box-shadow: 0 16px 30px -14px rgba(142,108,31,.65);
}

    .btn-gold:hover {
        background: linear-gradient( 250deg, var(--gold-deep), var(--gold), var(--rose) );
    }
    .btn-outline-dark-lux {
        border: 1.5px solid var(--black);
        color: var(--black);
        background: #fff;
    }

.trust-row {
    display: flex;
    gap: 24px;
    margin-top: 20px;
    flex-wrap: wrap;
}

    .trust-row .t-item {
        font-family: var(--font-body);
        font-size: var(--fs-small);
        color: var(--muted);
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .trust-row i {
        color: var(--gold-deep);
    }

/* ============ GENERIC SECTION HEADS ============
   used by Features / Related / FAQ etc. (left-aligned) */
.sec-head {
    margin-bottom: 38px;
}

    .sec-head h2 {
        font-family: var(--font-display);
        font-size: var(--fs-h2);
        font-weight: 700;
        color: var(--black);
        margin-top: 6px;
        line-height: 1.2;
    }

    .sec-head .sub {
        font-family: var(--font-body);
        color: var(--muted);
        font-size: var(--fs-lead);
        max-width: 620px;
        margin-top: 10px;
    }

    .sec-head .eyebrow {
        margin-bottom: 2px;
        display: block;
        line-height: 1.2;
    }

/* ============ FEATURES STRIP ============ */
.features-sec {
    background: var(--black);
    padding: 56px 0;
    margin-top: 70px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 767px) {
    .features-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.feature-item {
    text-align: center;
    color: #EDE6D6;
    padding: 10px 14px;
}

    .feature-item .f-icon {
        width: 66px;
        height: 66px;
        border-radius: 50%;
        border: 1px solid var(--gold);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        font-size: 24px;
        color: var(--gold-light);
        background: rgba(184,145,47,.08);
    }

    .feature-item h6 {
        font-family: var(--font-display);
        font-size: 22px;
        margin-bottom: 8px;
        color: #fff;
        font-weight: 600;
    }

    .feature-item p {
        font-family: var(--font-body);
        font-size: var(--fs-small);
        color: #B7AC94;
        margin: 0;
    }

@media (max-width: 991px) {
    .features-sec {
        margin-top: 50px;
    }

    .video-card video {
        aspect-ratio: 16/10;
    }
}

/* ============ RELATED DESIGNS ============ */
.related-sec {
    padding: 70px 0;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 900px) {
    .related-grid {
        grid-template-columns: 1fr;
    }
}

.rp-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
    height: 100%;
}

    .rp-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 22px 40px -22px rgba(20,18,16,.3);
    }

.rp-thumb {
    position: relative;
}

    .rp-thumb .card-mock {
        aspect-ratio: 16/10.5;
        cursor: default;
    }

.rp-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--gold);
    color: #000;
    font-family: var(--font-body);
    font-size: var(--fs-badge);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 20px;
    z-index: 4;
    line-height: 1.2;
}

.rp-body {
    padding: 20px 20px 24px;
}

    .rp-body h5 {
        font-family: var(--font-display);
        font-size: var(--fs-h4);
        font-weight: 700;
        margin-bottom: 6px;
        line-height: 1.2;
    }

    .rp-body .tags {
        font-family: var(--font-body);
        font-size: var(--fs-small);
        color: var(--muted);
        margin-bottom: 18px;
    }

    .rp-body .price-line {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
    }

        .rp-body .price-line .old {
            font-family: var(--font-body);
            color: var(--muted);
            text-decoration: line-through;
            font-size: var(--fs-small);
            font-weight: 700;
        }

        .rp-body .price-line .free {
            font-family: var(--font-body);
            color: var(--success);
            font-weight: 600;
            font-size: var(--fs-tiny);
            text-transform: uppercase;
            letter-spacing: .04em;
        }

    .rp-body .btn-rp {
        width: 100%;
        border-radius: 50px;
        background: var(--ivory);
        border: 1px solid var(--hairline);
        color: var(--black);
        font-family: var(--font-body);
        font-size: 12px;
        letter-spacing: .05em;
        text-transform: uppercase;
        padding: 6px 10px;
        font-weight: 600;
        display: block;
        text-align: center;
        transition: background .2s ease, color .2s ease;
    }

        .rp-body .btn-rp:hover {
            background: var(--black);
            color: var(--gold-light);
        }

/* ============ VIDEO SECTION ============ */
.video-sec {
    background: linear-gradient(180deg, #FFFFFF, #F8ECF1);
    padding: 70px 0 76px;
    margin-top: 20px;
}

.video-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 20px 40px -22px rgba(20,18,16,.4);
}

    .video-card video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .video-card .v-overlay {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 16px 14px;
        background: linear-gradient(0deg, rgba(0,0,0,.82), transparent);
        color: #fff;
    }

        .video-card .v-overlay h6 {
            font-family: var(--font-display);
            font-size: var(--fs-h5);
            margin-bottom: 2px;
            font-weight: 600;
        }

        .video-card .v-overlay span {
            font-family: var(--font-body);
            font-size: var(--fs-tiny);
            color: #D9CDA9;
        }

    .video-card .mute-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(0,0,0,.55);
        color: #fff;
        border: 1px solid rgba(255,255,255,.35);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

.more-videos-wrap {
    text-align: center;
    margin-top: 40px;
}

.btn-more-videos {
    border: 1.5px solid var(--black);
    border-radius: 30px;
    padding: 13px 34px;
    background: transparent;
    color: var(--black);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: var(--fs-small);
}

    .btn-more-videos:hover {
        background: var(--black);
        color: var(--gold-light);
    }

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--black) !important;
    box-shadow: 0 8px 18px -8px rgba(0,0,0,.35);
    font-size: 16px;
}

.owl-carousel .owl-nav button.owl-prev {
    left: -8px;
}

.owl-carousel .owl-nav button.owl-next {
    right: -8px;
}

.owl-carousel .owl-dots {
    margin-top: 16px;
    text-align: center;
}

.owl-carousel .owl-dot span {
    background: #DCCFA7 !important;
}

.owl-carousel .owl-dot.active span {
    background: var(--gold-deep) !important;
}

/*-----------Grid--------------*/
@media (min-width: 768px) {
    .container {
        max-width: 750px !important;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 970px !important;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1170px !important;
    }
}

@media (min-width: 1400px) {
    .container, .nav-header-container {
        width: 100% !important;
        max-width: 1320px !important;
    }

    .tpl-img-wrap {
        height: 370px;
    }

    #sliderUltra .tpl-img-wrap {
        height: 470px;
    }
}

@media (min-width: 1600px) {
    .container, .nav-header-container {
        width: 100% !important;
        max-width: 1450px !important;
    }
}

@media (min-width: 1800px) {
    .container, .nav-header-container {
        width: 100% !important;
        max-width: 1600px !important;
    }
}

/* ============ RATINGS AND REVIEWS ============ */
.ratings-sec {
    padding: 88px 0 100px;
    background: var(--ivory);
}

    /* scoped override: this section's heading is centered, unlike the
   generic .sec-head used elsewhere — scoping it under .ratings-sec
   stops it from silently overwriting the generic left-aligned one */
    .ratings-sec .sec-head {
        text-align: center;
        max-width: 560px;
        margin: 0 auto 27px;
    }

        .ratings-sec .sec-head h2 {
            font-family: var(--font-display);
            font-size: var(--fs-h2);
            font-weight: 700;
            color: var(--black);
            margin: 0 0 12px;
            letter-spacing: -.01em;
        }

        .ratings-sec .sec-head .sub {
            font-family: var(--font-body);
            color: var(--muted);
            font-size: var(--fs-lead);
            line-height: 1.6;
            margin: 0;
        }

        .ratings-sec .sec-head .eyebrow {
            display: inline-block;
            margin-bottom: 5px;
            line-height: 1.2;
        }

/* ---- Summary banner ---- */
.rating-summary-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    padding: 34px 40px;
    display: flex;
    align-items: center;
    gap: 48px;
    box-shadow: 0 1px 2px rgba(20,18,16,.03);
    margin: auto;
    margin-bottom: 20px;
}

.rs-score-block {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 0 0 auto;
}

.rs-score {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

    .rs-score .num {
        font-family: var(--font-display);
        font-size: var(--fs-display-lg);
        font-weight: 600;
        color: var(--black);
        line-height: 1;
    }

    .rs-score .of5 {
        font-family: var(--font-body);
        font-size: var(--fs-body);
        color: var(--muted);
    }

.rs-score-sub {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rs-stars {
    color: var(--gold-deep);
    font-size: var(--fs-h4);
    letter-spacing: 2px;
}

.rs-count {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--muted);
}

.rs-divider {
    width: 1px;
    align-self: stretch;
    background: var(--hairline);
    flex: 0 0 auto;
}

.rs-bars {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
}

.rs-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--muted);
}

    .rs-bar-row .label {
        width: 42px;
        flex: 0 0 auto;
    }

.rs-bar-track {
    flex: 1;
    height: 7px;
    border-radius: 5px;
    background: var(--hairline);
    overflow: hidden;
}

.rs-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-light), var(--gold));
    border-radius: 5px;
}

.rs-bar-row .pct {
    width: 34px;
    text-align: right;
    flex: 0 0 auto;
}

.rs-write-btn {
    flex: 0 0 auto;
    padding: 15px 30px;
    border-radius: 50px;
    border: 1.5px solid var(--black);
    background: var(--black);
    color: var(--gold-light);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-small);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .18s ease, background .18s ease, color .18s ease;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

    .rs-write-btn:hover {
        background: var(--gold);
        color: var(--black);
        border-color: var(--gold);
        transform: translateY(-1px);
    }

@media (max-width: 780px) {
    .rating-summary-card {
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
        padding: 28px 24px;
    }

    .rs-divider {
        display: none;
    }

    .rs-write-btn {
        justify-content: center;
    }
}

/* ---- Review list ---- */
.review-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.review-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 26px 30px;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    transition: box-shadow .2s ease, border-color .2s ease;
    position: relative;
}

    .review-card:hover {
        box-shadow: 0 8px 24px rgba(20,18,16,.06);
        border-color: #DCCFAE;
    }

.review-avatar {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--black);
    color: var(--gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h4);
}

.review-actions {
    position: absolute;
    bottom: 20px;
    right: 24px;
    display: flex;
    gap: 6px;
}

.review-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    background: var(--ivory);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .82rem;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

    .review-action-btn:hover {
        background: var(--black);
        color: var(--gold-light);
        border-color: var(--black);
    }

    .review-action-btn.delete:hover {
        background: var(--rose-deep);
        border-color: var(--rose-deep);
        color: #fff;
    }

.review-body {
    flex: 1 1 auto;
    min-width: 0;
}

.review-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.review-name {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-h4);
    color: var(--black);
}

.review-role {
    font-family: var(--font-body);
    font-size: var(--fs-tiny);
    color: var(--muted);
    margin-top: 2px;
}

.review-stars {
    color: var(--gold-deep);
    font-size: var(--fs-body);
    letter-spacing: 2px;
    flex: 0 0 auto;
}

.review-text {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: #3A3325;
    margin: 0 0 0;
    line-height: 1.65;
}

.review-quote-mark {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    color: var(--gold-light);
    line-height: 1;
    flex: 0 0 auto;
    margin-top: -6px;
}

@media (max-width: 640px) {
    .review-card {
        padding: 20px;
        gap: 16px;
    }

    .review-quote-mark {
        display: none;
    }
}

.review-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    border: 1px dashed var(--hairline);
    border-radius: 16px;
    background: var(--surface);
}

.wr-delete-confirm {
    position: fixed;
    inset: 0;
    background: rgba(20,18,16,.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

    .wr-delete-confirm.active {
        opacity: 1;
        pointer-events: auto;
    }

.wr-delete-box {
    background: var(--surface);
    border-radius: 16px;
    padding: 28px 30px;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(20,18,16,.22);
    transform: scale(.97);
    transition: transform .2s ease;
}

.wr-delete-confirm.active .wr-delete-box {
    transform: scale(1);
}

.wr-delete-box h6 {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    margin: 0 0 8px;
    color: var(--black);
}

.wr-delete-box p {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--muted);
    margin: 0 0 20px;
    line-height: 1.5;
}

.wr-delete-box .wr-delete-actions {
    display: flex;
    gap: 10px;
}

.wr-delete-box button {
    flex: 1;
    padding: 11px;
    border-radius: 50px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-tiny);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--hairline);
}

.wr-cancel-btn {
    background: var(--surface);
    color: var(--ink);
}

    .wr-cancel-btn:hover {
        background: var(--ivory);
    }

.wr-confirm-delete-btn {
    background: var(--rose-deep);
    color: #fff;
    border-color: var(--rose-deep);
}

    .wr-confirm-delete-btn:hover {
        opacity: .9;
    }



.rating-summary-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    padding: 22px 30px;
    display: flex;
    align-items: center;
    gap: 22px;
    box-shadow: 0 1px 2px rgba(20,18,16,.03);
    margin-bottom: 20px;
    max-width: 520px;
}

.rs-score {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 0 0 auto;
}

    .rs-score .num {
        font-family: var(--font-display);
        font-size: var(--fs-h2);
        font-weight: 600;
        color: var(--black);
        line-height: 1;
    }

    .rs-score .of5 {
        font-family: var(--font-body);
        font-size: var(--fs-small);
        color: var(--muted);
    }

.rs-score-sub {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
}

.rs-stars {
    color: var(--gold-deep);
    font-size: var(--fs-body);
    letter-spacing: 2px;
}

.rs-count {
    font-family: var(--font-body);
    font-size: var(--fs-tiny);
    color: var(--muted);
}

.rs-divider {
    width: 1px;
    align-self: stretch;
    background: var(--hairline);
    flex: 0 0 auto;
}

.rs-write-btn {
    flex: 0 0 auto;
    padding: 11px 22px;
    border-radius: 50px;
    border: 1.5px solid var(--black);
    background: var(--black);
    color: var(--gold-light);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-tiny);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .18s ease, background .18s ease, color .18s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

    .rs-write-btn:hover {
        background: var(--gold);
        color: var(--black);
        border-color: var(--gold);
        transform: translateY(-1px);
    }

@media (max-width: 560px) {
    .rating-summary-card {
        flex-wrap: wrap;
        padding: 20px;
        max-width: 100%;
    }

    .rs-divider {
        display: none;
    }

    .rs-write-btn {
        width: 100%;
        justify-content: center;
        order: 3;
    }
}

/* ============ WRITE-REVIEW MODAL ============ */
.wr-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 16, .55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

    .wr-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

.write-review-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 20px;
    padding: 36px 38px;
    width: 100%;
    max-width: 480px;
    position: relative;
    box-shadow: 0 24px 60px rgba(20,18,16,.22);
    transform: translateY(18px) scale(.97);
    opacity: 0;
    transition: transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s ease;
    max-height: 88vh;
    overflow-y: auto;
}

.wr-overlay.active .write-review-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.wr-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    background: var(--ivory);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .95rem;
    transition: background .15s ease, color .15s ease;
}

    .wr-close:hover {
        background: var(--black);
        color: var(--gold-light);
        border-color: var(--black);
    }

.write-review-card .wr-eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-tiny);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    margin-bottom: 8px;
}

.write-review-card h5 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 600;
    color: var(--black);
    margin: 0 0 6px;
}

.write-review-card .wr-sub {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--muted);
    margin: 0 0 22px;
    line-height: 1.5;
}

.wr-star-input {
    display: flex;
    gap: 8px;
    font-size: 1.7rem;
    color: var(--hairline);
    cursor: pointer;
    margin-bottom: 22px;
}

    .wr-star-input i {
        transition: color .12s ease, transform .12s ease;
    }

        .wr-star-input i:hover {
            transform: scale(1.12);
        }

        .wr-star-input i.active {
            color: var(--gold) !important;
        }

.wr-field {
    margin-bottom: 5px;
}

    .wr-field label {
        display: block;
        font-family: var(--font-body);
        font-size: var(--fs-small);
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 7px;
        width: 100%;
        padding: 0;
    }

    .wr-field input, .wr-field textarea {
        width: 100%;
        border: 1px solid var(--hairline);
        border-radius: 10px;
        padding: 12px 14px;
        font-family: var(--font-body);
        font-size: var(--fs-body);
        color: var(--ink);
        margin-bottom: 0;
        background: var(--ivory);
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        .wr-field input:focus, .wr-field textarea:focus {
            outline: none;
            border-color: var(--gold-deep);
            box-shadow: 0 0 0 3px rgba(250,204,21,.18);
        }

    .wr-field textarea {
        min-height: 100px;
        resize: vertical;
    }

.wr-submit {
    width: 100%;
    padding: 15px 26px;
    border-radius: 50px;
    border: none;
    margin-top: 6px;
    background: var(--black);
    color: var(--gold-light);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    font-size: var(--fs-small);
    transition: background .18s ease, color .18s ease;
}

    .wr-submit:hover {
        background: var(--gold);
        color: var(--black);
    }

/* ============ FAQ ============ */
.faq-sec {
    padding: 70px 0 90px;
}

.faq-list {
    max-width: 820px;
}

.faq-item {
    border-bottom: 1px solid var(--hairline);
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 4px;
    cursor: pointer;
    gap: 16px;
}

    .faq-q h5 {
        font-family: var(--font-display);
        font-size: var(--fs-h3);
        font-weight: 600;
        line-height: 1.3;
    }

    .faq-q i {
        color: var(--gold-deep);
        transition: transform .25s ease;
        flex: 0 0 auto;
    }

.faq-item.open .faq-q i {
    transform: rotate(45deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.faq-item.open .faq-a {
    max-height: 260px;
}

.faq-a p {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    color: var(--muted);
    padding: 0 4px 22px;
    line-height: 1.65;
    margin: 0;
}

/* ============ FEATURE ZIGZAG ("what's included") ============ */
.fz-wrap {
    margin-top: 30px;
    position: relative;
    background: linear-gradient(180deg, var(--ivory) 0%, var(--surface) 30%);
    border: 1px solid var(--hairline);
    border-radius: 28px;
    padding: 48px 44px 20px;
    box-shadow: 0 40px 70px -50px rgba(20,18,16,.35);
}

    .fz-wrap::before {
        content: "";
        position: absolute;
        top: 0;
        left: 44px;
        right: 44px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-deep) 50%, var(--gold) 80%, transparent);
    }

.fz-head {
    max-width: 780px;
    text-align: center;
    margin: auto;
    margin-bottom: 40px;
}

    .fz-head .fz-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-family: var(--font-body);
        font-size: var(--fs-tiny);
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--gold-deep);
        background: #FFF6DE;
        border: 1px solid var(--gold-light);
        padding: 6px 14px 6px 12px;
        border-radius: 20px;
        margin-bottom: 16px;
    }

        .fz-head .fz-eyebrow i {
            font-size: .8rem;
            color: var(--gold-deep);
        }

    .fz-head h4 {
        font-family: var(--font-display);
        font-size: var(--fs-h1);
        font-weight: 700;
        color: var(--black);
        line-height: 1.15;
    }

    .fz-head p {
        font-family: var(--font-body);
        font-size: var(--fs-lead);
        color: var(--muted);
        margin: auto;
        margin-top: 14px;
        line-height: 1.65;
        max-width: 560px;
    }

.fz-list {
    display: flex;
    flex-direction: column;
}

.fz-row {
    position: relative;
    border-top: 1px solid var(--hairline);
    padding: 56px 0;
    overflow: hidden;
}

    .fz-row:first-child {
        border-top: none;
        padding-top: 8px;
    }

    .fz-row:last-child {
        padding-bottom: 8px;
    }

.fz-num {
    position: absolute;
    top: 26px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 9rem;
    line-height: 1;
    color: var(--gold-light);
    opacity: .4;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.fz-row[data-side="text-left"] .fz-num {
    left: -6px;
}

.fz-row[data-side="media-left"] .fz-num {
    right: -6px;
}

.fz-row-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.fz-row[data-side="text-left"] .fz-content {
    order: 1;
}

.fz-row[data-side="text-left"] .fz-media {
    order: 2;
}

.fz-row[data-side="media-left"] .fz-content {
    order: 2;
}

.fz-row[data-side="media-left"] .fz-media {
    order: 1;
}

.fz-content {
    padding-top: 30px;
}

.fz-icon-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.fz-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--gold-light);
    color: var(--gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 4px #FFF6DE, 0 10px 20px -12px rgba(20,18,16,.4);
}

.fz-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fz-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h2);
    color: var(--black);
    line-height: 1.2;
    margin-bottom: 6px;
    position: relative;
    display: inline-block;
}

    .fz-title::after {
        content: "";
        display: block;
        width: 46px;
        height: 3px;
        margin-top: 10px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--gold-deep), var(--gold));
    }

.fz-sub {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--muted);
    line-height: 1.6;
    margin-top: 14px;
    margin-bottom: 20px;
}

.fz-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .fz-feature-list li {
        gap: 10px;
        font-family: var(--font-body);
        font-size: var(--fs-body);
        color: #413A2F;
        line-height: 1.55;
        margin-bottom: 11px;
    }

        .fz-feature-list li:last-child {
            margin-bottom: 0;
        }

    .fz-feature-list i {
        color: var(--success);
        margin-top: 4px;
        flex: 0 0 auto;
        font-size: .85rem;
    }

    .fz-feature-list strong {
        color: var(--black);
    }

/* pill badges — shared size across every badge variant in the page */
.fz-badge, .rp-badge, .badge-free, .price-block .price-tag {
    font-family: var(--font-body);
    font-size: var(--fs-badge);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

    .fz-badge.gold {
        background: #FFF6DE;
        color: var(--gold-deep);
        border: 1px solid var(--gold-light);
    }

    .fz-badge.green {
        background: #EFF5EC;
        color: var(--success);
        border: 1px solid #cfe1c9;
    }

    .fz-badge.blue {
        background: #EAF1FB;
        color: #3A6EA5;
        border: 1px solid #CBDCF0;
    }

    .fz-badge.rose {
        background: #FBEFED;
        color: var(--rose-deep);
        border: 1px solid #EBD3CF;
    }

.fz-media {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: var(--black);
    aspect-ratio: 16/11.5;
    cursor: pointer;
    box-shadow: 0 0 0 6px var(--surface), 0 0 0 7px var(--gold-light), 0 24px 44px -22px rgb(20 18 16 / 14%);
    transition: box-shadow .25s ease;
}

    .fz-media:hover {
        box-shadow: 0 0 0 6px var(--surface), 0 0 0 7px var(--gold), 0 28px 50px -22px rgba(20,18,16,.6);
    }

    .fz-media::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 18px;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
        pointer-events: none;
    }

    .fz-media video, .fz-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .5s ease;
    }

    .fz-media:hover video, .fz-media:hover img {
        transform: scale(1.035);
    }

.fz-media-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,.05) 55%);
}

    .fz-media-overlay i {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: rgba(255,255,255,.95);
        color: var(--black);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        transition: transform .2s ease;
    }

.fz-media:hover .fz-media-overlay i {
    transform: scale(1.08);
}

.fz-media-label {
    position: absolute;
    left: 16px;
    bottom: 16px;
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--fs-tiny);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .fz-media-label i {
        color: var(--gold-light);
        font-size: .8rem;
    }

@media (max-width: 860px) {
    .fz-wrap {
        padding: 34px 24px 12px;
        border-radius: 22px;
    }

        .fz-wrap::before {
            left: 24px;
            right: 24px;
        }

    .fz-num {
        font-size: 5.5rem;
        top: 10px;
    }

    .fz-row {
        padding: 40px 0;
    }

    .fz-row-inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .fz-row[data-side="text-left"] .fz-content,
    .fz-row[data-side="media-left"] .fz-content {
        order: 1;
    }

    .fz-row[data-side="text-left"] .fz-media,
    .fz-row[data-side="media-left"] .fz-media {
        order: 2;
    }

    .fz-content {
        padding-top: 0;
    }

    .fz-row[data-side="text-left"] .fz-num,
    .fz-row[data-side="media-left"] .fz-num {
        left: auto;
        right: 4px;
        top: -6px;
        opacity: .28;
    }
}

@media (max-width: 480px) {
    .fz-wrap {
        padding: 28px 18px 10px;
    }

    .fz-num {
        font-size: 3.4rem;
    }
}

/* ---- fullscreen video modal ---- */
.fz-video-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,13,10,.92);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

    .fz-video-modal.show {
        display: flex;
    }

    .fz-video-modal .modal-stage {
        width: min(760px, 92vw);
        aspect-ratio: 16/10;
        border-radius: 12px;
        overflow: hidden;
        background: #000;
    }

    .fz-video-modal video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #000;
    }

    .fz-video-modal .close-modal {
        position: absolute;
        top: 24px;
        right: 30px;
        color: #F4EEE0;
        font-size: 26px;
        background: none;
        border: none;
        cursor: pointer;
    }

.star {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 24px;
    color: #facc15;
    overflow: hidden;
}

    .star::before {
        content: "★";
        position: absolute;
        left: 0;
        top: 0;
        color: #333;
    }

.star-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    color: #ffc107;
    line-height: 24px;
}



/* ============ TOP TRIGGER BUTTON ============ */
.fz-trigger-wrap {
    display: flex;
    justify-content: center;
    margin: 26px 0;
}

.fz-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--black);
    color: var(--gold-light);
    border: 1px solid var(--gold-deep);
    padding: 15px 30px;
    border-radius: 50px;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 16px 30px -16px rgba(20,18,16,.55);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

    .fz-trigger-btn:hover {
        background: var(--gold);
        color: var(--black);
        border-color: var(--gold);
        transform: translateY(-2px);
    }

    .fz-trigger-btn i {
        font-size: .82rem;
    }

/* small "see full details" link tucked into the section header too */
.fz-head-actions {
    margin-top: 18px;
}

.fz-inline-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold-deep);
    font-weight: 700;
    font-size: .92rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--gold-deep);
    padding: 0 0 2px;
    cursor: pointer;
}

    .fz-inline-link-btn:hover {
        color: var(--black);
        border-color: var(--black);
    }

/* ============ FULL DETAILS MODAL ============ */
.fz-details-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,13,10,.72);
    backdrop-filter: blur(3px);
    z-index: 999998;
    align-items: center;
    justify-content: center;
    padding: 26px 16px;
}

    .fz-details-overlay.show {
        display: flex;
    }

.fz-details-modal {
    background: var(--surface);
    width: min(1040px, 96vw);
    max-height: 90vh;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.55);
}

.fz-details-head {
    position: relative;
    padding: 16px 60px 11px 34px;
    background: linear-gradient(180deg, var(--ivory), var(--surface));
    border-bottom: 1px solid var(--hairline);
    flex: 0 0 auto;
}

    .fz-details-head .fz-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--gold-deep);
        background: #FFF6DE;
        border: 1px solid var(--gold-light);
        padding: 5px 13px;
        border-radius: 20px;
        margin-bottom: 2px;
        line-height: 1.2;
    }

    .fz-details-head h3 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 2.1rem;
        font-weight: 700;
        color: var(--black);
        line-height: 1.2;
    }

    .fz-details-head p {
        font-size: .95rem;
        color: var(--muted);
        margin-top: 8px;
        max-width: 620px;
        line-height: 1.55;
        margin-bottom: 0;
    }

.fz-details-close {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--hairline);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: background .15s ease, color .15s ease;
}

    .fz-details-close:hover {
        background: var(--black);
        color: var(--gold-light);
        border-color: var(--black);
    }

.fz-details-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* ---- left tab list: pill-shaped tabs ---- */

.fz-tab-nav {
    flex: 0 0 240px;
    background: var(--ivory);
    padding: 20px 5px;
    overflow-y: auto;
    border-right: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fz-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 10px 18px;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .12s ease;
}

    .fz-tab-btn:hover {
        border-color: var(--gold-light);
        background: #FFF8E6;
    }

    .fz-tab-btn.active {
        background: var(--gold);
        border-color: var(--gold);
        box-shadow: 0 8px 18px -10px rgba(142,108,31,.55);
    }

.fz-tab-index {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--gold-deep);
    line-height: 1;
    flex: 0 0 auto;
    transition: color .18s ease;
}

.fz-tab-btn.active .fz-tab-index {
    color: var(--black);
}

.fz-tab-title {
    font-size: .86rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    transition: color .18s ease;
}

.fz-tab-btn.active .fz-tab-title {
    color: var(--white);
    font-weight: 700;
}

.fz-tab-arrow {
    margin-left: auto;
    font-size: .7rem;
    color: var(--gold-deep);
    flex: 0 0 auto;
    transition: color .18s ease, transform .18s ease;
}

.fz-tab-btn:hover .fz-tab-arrow {
    transform: translateX(2px);
}

.fz-tab-btn.active .fz-tab-arrow {
    color: var(--black);
}


/* ---- right content panel: one feature at a time, much more room ---- */
.fz-details-body {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 24px 22px 23px;
}

.fz-detail-block {
    display: none;
}

    .fz-detail-block.active {
        display: block;
    }

.fz-detail-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.fz-detail-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--gold-light);
    color: var(--gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 5px #FFF6DE;
}

.fz-detail-titles {
    flex: 1 1 auto;
    min-width: 0;
}

.fz-detail-num {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: block;
    margin-bottom: 2px;
    line-height: 1.2;
}

.fz-detail-titles h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--black);
    line-height: 1.2;
}

.fz-detail-lead {
    font-size: 0.88rem;
    color: #413A2F;
    line-height: 1.7;
    margin-bottom: 22px;
}

.fz-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 640px) {
    .fz-detail-grid {
        grid-template-columns: 1fr;
    }

    .fz-details-head p, .fz-details-foot p {
        display: none;
    }
}

.fz-detail-col-title {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.fz-whats-in ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fz-whats-in li {
    display: block;
    gap: 8px;
    font-size: .92rem;
    color: #413A2F;
    line-height: 1.5;
    margin-bottom: 8px;
}

    .fz-whats-in li:last-child {
        margin-bottom: 0;
    }

.fz-whats-in i {
    color: var(--success);
    margin-top: 4px;
    flex: 0 0 auto;
    font-size: .8rem;
}


.fz-details-modal .fz-media {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: var(--black);
    aspect-ratio: 2 / 0;
    cursor: pointer;
    transition: box-shadow .25s ease;
    aspect-ratio: 2 / 1;
    width: 50%;
    margin-block: 25px;
    box-shadow: none;
}
/* the "why it matters / why buy this" highlight box */
.fz-why-box {
    background: linear-gradient(135deg, #FFF8E6, #FFF1CE);
    border: 1px solid var(--gold-light);
    border-radius: 14px;
    padding: 14px 16px;
}

    .fz-why-box .fz-detail-col-title {
        color: var(--gold-deep);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .fz-why-box p {
        font-size: .92rem;
        color: #5B4A22;
        line-height: 1.55;
        margin: 0;
    }

.fz-blog-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--gold-deep);
    border-bottom: 1px solid var(--gold-light);
    padding-bottom: 1px;
}

    .fz-blog-link:hover {
        color: var(--black);
        border-color: var(--black);
    }

    .fz-blog-link i {
        font-size: .78rem;
    }

.fz-details-foot {
    flex: 0 0 auto;
    padding: 2px 34px;
    border-top: 1px solid var(--hairline);
    background: var(--ivory);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

    .fz-details-foot p {
        font-size: .85rem;
        color: var(--muted);
        margin: 0;
    }

.fz-details-foot-btn {
    background: var(--gold);
    color: var(--black);
    border: none;
    padding: 12px 26px;
    border-radius: 50px;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

    .fz-details-foot-btn:hover {
        background: var(--gold-deep);
        color: #fff;
    }

@media (max-width: 640px) {
    .fz-details-head {
        padding: 26px 50px 20px 22px;
    }

        .fz-details-head h3 {
            font-size: 1.6rem;
        }

    .fz-details-layout {
        flex-direction: column;
    }

    .fz-details-head {
        padding: 4px 50px 20px 22px;
    }

    .fz-tab-nav {
        flex: 0 0 auto;
        flex-direction: column;
        gap: 8px;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--hairline);
        padding: 12px 14px;
    }

    .sepratebtn {
        background: #fffdf7;
        border: 1.5px dashed #ca8a04;
        border-radius: 9px;
        padding: 9px 12px;
        padding-top: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-basis: 68px;
    }

        .sepratebtn .fz-tab-btn {
            width: 44%;
            margin-bottom: 9px;
        }

    .fz-tab-group-label {
        white-space: nowrap;
    }

    .sepratebtn .fz-tab-btn {
        width: 44%;
        margin-bottom: 0px;
    }

    .fz-tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 8px 14px;
    }

    .fz-tab-index {
        font-size: 1rem;
    }

    .fz-tab-title {
        font-size: .8rem;
    }

    .fz-details-body {
        padding: 22px 22px 26px;
    }

    .fz-detail-titles h4 {
        font-size: 1.6rem;
    }

    .fz-details-foot {
        padding: 5px 22px;
        flex-direction: column;
        align-items: stretch;
    }

    .fz-details-foot-btn {
        width: 100%;
        text-align: center;
    }

    .fz-details-modal {
        max-height: 95vh;
    }
}

.fz-video-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,13,10,.92);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

    .fz-video-modal.show {
        display: flex;
    }

    .fz-video-modal .modal-stage {
        width: min(760px, 92vw);
        aspect-ratio: 16/10;
        border-radius: 12px;
        overflow: hidden;
        background: #000;
    }

    .fz-video-modal video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #000;
    }

    .fz-video-modal .close-modal {
        position: absolute;
        top: 24px;
        right: 30px;
        color: #F4EEE0;
        font-size: 26px;
        background: none;
        border: none;
        cursor: pointer;
    }

.gallery-info-btn {
    aspect-ratio: 16 / 10.2;
    border-radius: 9px;
    background: var(--black);
    border: 1px solid var(--black);
    color: var(--gold-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 6px;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .gallery-info-btn:hover {
        background: var(--gold-deep);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px -10px rgba(20,18,16,.5);
    }

    .gallery-info-btn i {
        font-size: 19px;
    }

    .gallery-info-btn span {
        font-size: .66rem;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        text-align: center;
        line-height: 1.25;
    }

.cs2-sec {
    background: linear-gradient(160deg, #171310 0%, #0B0A08 60%);
    border-radius: 26px;
    overflow: hidden;
    margin: 10px auto 40px;
    padding: 54px 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    /* no box-shadow by design — flat, matte, dark */
    margin-top: 55px;
}

/* ---- left: copy ---- */
.cs2-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(232,205,138,.08);
    border: 1px solid rgba(232,205,138,.35);
    color: var(--gold-light);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 9px 18px;
    border-radius: 30px;
    width: fit-content;
}

.cs2-body h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 1.18;
    color: #F4EEE0;
    margin-top: 20px;
}

    .cs2-body h3 em {
        font-style: italic;
        font-weight: 600;
        background: linear-gradient(90deg, var(--rose), var(--gold));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.cs2-body p {
    font-size: 1.02rem;
    color: #B7AC94;
    line-height: 1.7;
    margin-top: 18px;
    max-width: 460px;
}

.cs2-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 15px;
    background: linear-gradient(90deg, var(--rose), var(--gold));
    color: #fff;
    border: none;
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: .86rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    width: fit-content;
    transition: filter .2s ease, transform .2s ease;
}

    .cs2-cta:hover {
        filter: brightness(1.08);
        transform: translateY(-2px);
    }

.cs2-faq-link {
    display: inline-block;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    color: #d6cebc !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .cs2-faq-link i {
        font-size: 12px;
        text-decoration: none;
        transition: transform 0.2s ease;
    }

    .cs2-faq-link:hover i {
        transform: translateX(4px);
    }
/* ---- right: single static image, no slider ---- */
.cs2-img-wrap {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(232,205,138,.18);
    aspect-ratio: 16/11;
    /* no box-shadow here either */
}

    .cs2-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

.cs2-img-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15,13,10,.72);
    border: 1px solid rgba(232,205,138,.3);
    color: var(--gold-light);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 30px;
}

    .cs2-img-tag .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--rose);
    }

.fz-tab-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 5px 4px 4px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    position: absolute;
    top: 4px;
}

    .fz-tab-group-label::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--hairline);
    }

.sepratebtn {
    background: #fffdf7;
    border: 1.5px dashed #ca8a04;
    border-radius: 9px;
    padding: 9px 12px;
    position: relative;
    padding-top: 40px;
}

    .sepratebtn .fz-tab-btn {
        width: 100%;
        margin-bottom: 9px;
    }

/* ---- YouTube video embed, sits inside each tab's content area ---- */
.fz-detail-video {
    position: relative;
    width: 68%;
    padding-top: 38.25%;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    margin-bottom: 22px;
}

    .fz-detail-video iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }


.tpl-like-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: transform 0.15s ease, background 0.2s ease;
    line-height: 1.2;
}

    .tpl-like-btn:hover {
        transform: scale(1.05);
    }

    .tpl-like-btn.liked {
        background: #FEF2F2;
        color: #DC2626;
    }

.tpl-like-icon {
    font-size: 13px;
    transition: transform 0.25s ease;
}

/* Heart pop animation jab like ho */
.tpl-like-btn.liked .tpl-like-icon {
    transform: scale(1.15);
}

    .tpl-like-btn.liked .tpl-like-icon::before {
        font-weight: 900; /* solid heart look ke liye */
    }

/* Short thank-you message — like karte hi dikhta hai, fir fade */
.tpl-like-msg {
    position: absolute;
    top: 29px;
    right: 0;
    background: #16A34A;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform: translateY(4px);
}

.tpl-like-btn.show-msg .tpl-like-msg {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 860px) {
    .cs2-sec {
        grid-template-columns: 1fr;
        padding: 36px 26px;
        gap: 30px;
        border-radius: 20px;
    }

    .cs2-img-wrap {
        aspect-ratio: 16/10;
    }
}

span.rating-number {
    background-color: #fbe9b48c;
    color: #2b2302;
    border-radius: 50px;
    padding-inline: 13px;
    font-weight: 600;
}



.card-feat-list {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
}

    .card-feat-list li {
        display: table-row;
    }

        .card-feat-list li > span,
        .card-feat-list li > div {
            display: table-cell;
            vertical-align: middle;
            padding: 12px 14px;
            border-bottom: 1px solid #eee;
        }

        .card-feat-list li:last-child > span,
        .card-feat-list li:last-child > div {
            border-bottom: 0;
        }

    .card-feat-list .card-feat-link {
        width: 22%;
    }

    .card-feat-list .feat-tip {
        width: 45px;
        text-align: left;
        border-left: 1px solid #eee;
    }

    .card-feat-list .sep-dot {
        display: none;
    }



.promo-box {
    background: linear-gradient(160deg, var(--black) 0%, #2a231a 100%);
    border: 1px solid var(--gold-deep);
    border-radius: 16px;
    padding: 18px 16px;
    color: var(--ivory);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    font-family: var(--font-body);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 10px;
    gap: 10px;
}

    .promo-box::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image: radial-gradient(circle at 90% 10%, rgba(250,204,21,.16) 0, transparent 45%), repeating-linear-gradient(135deg, rgba(232,205,138,.05) 0 2px, transparent 2px 22px);
    }

.promo-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(250,204,21,.12);
    border: 1px solid var(--gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    color: var(--gold);
    margin-bottom: 10px;
    flex-shrink: 0;
}

.promo-eyebrow {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: var(--fs-badge);
    font-weight: 700;
    color: var(--gold-light);
    margin: 0 0 4px;
}

.promo-title {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.28;
    color: var(--ivory);
    margin: 0 0 8px;
}

.promo-desc {
    font-size: var(--fs-tiny);
    line-height: 1.5;
    color: #C9BFA9;
    margin: 0 0 14px;
}


.promo-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    background: #ffffff;
    color: #505050;
    font-weight: 700;
    font-size: var(--fs-tiny);
    padding: 5px 10px;
    border-radius: 50px;
    text-decoration: none;
    transition: background .18s ease;
}

    .promo-link-btn:hover {
        background: var(--gold-light);
        color: var(--black);
    }

    .promo-link-btn .btn-text {
        flex: 1;
        text-align: right;
    }

.play-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--black);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    flex-shrink: 0;
}



/*01-09-2026*/

.lead {
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 18px;
    max-width: 54ch;
}

/* ---- rating row ---- */
.rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.stars {
    display: flex;
    gap: 3px;
    color: var(--gold-deep);
    font-size: 14px;
}

.rating-score {
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--ink);
}

.rating-count {
    font-size: var(--fs-body);
    color: var(--muted);
}

.rating-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--hairline);
}

/* ---- stats bar ---- */
.stats-bar {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 14px 4px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin-bottom: 24px;
}

.stat {
    position: relative;
    text-align: center;
    padding: 0 6px;
}

    .stat + .stat::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 1px;
        background: var(--hairline);
    }

.stat-icon {
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 6px;
}

.stat.is-lead .stat-icon {
    color: var(--gold-deep);
}

.stat-num {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -.01em;
}

.stat.is-lead .stat-num {
    color: var(--gold-deep);
}

.stat-label {
    font-size: .76rem;
    color: var(--muted);
    line-height: 1.25;
    margin-top: 2px;
}

@media (max-width: 620px) {
    .stats-bar {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 16px;
    }

    .stat:nth-child(4)::before, .stat:nth-child(1)::before {
        display: none;
    }

    .stat:nth-child(n+4) {
        padding-top: 12px;
    }

        .stat:nth-child(n+4)::before {
            top: -6px;
            bottom: auto;
            height: 1px;
            width: 60%;
            left: 20%;
        }
}

.bt-app-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.bt-app-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--hairline, #e2ddd0);
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink, #211c15);
    font-size: 13px;
    line-height: 1.2;
}

    .bt-app-btn i {
        font-size: 18px;
    }

    .bt-app-btn small {
        display: block;
        font-size: 10px;
        color: var(--muted, #7a6e5e);
    }

.pt-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    background: none;
    border: none;
    padding: 0;
    font-size: .82rem;
    font-weight: 700;
    color: var(--gold-deep, #8E6C1F);
    cursor: pointer;
    flex-shrink: 0;
}

    .pt-more i {
        font-size: .7rem;
    }

.plan-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 16, 0.55);
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 99999;
}

    .plan-modal-overlay.is-open {
        display: flex;
    }

.plan-modal {
    background: var(--surface, #fff);
    border-radius: 14px;
    padding: 28px 26px;
    max-width: 600px;
    width: 100%;
    position: relative;
}

.plan-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--muted, #7A6E5E);
    cursor: pointer;
}

.plan-modal-tier {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--gold-light, #E8CD8A);
    color: #000000;
    margin-bottom: 10px;
    line-height: 1.2;
}

.plan-modal-title {
    font-family: var(--font-display, 'Roboto', sans-serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink, #211C15);
    margin: 0 0 4px;
}

.plan-modal-price {
    font-size: .88rem;
    color: var(--muted, #7A6E5E);
    margin: 0 0 16px;
}


.plan-modal-list li i {
    color: var(--gold-deep, #8E6C1F);
    font-size: .8rem;
    margin-top: 4px;
}

.plan-modal-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--gold, #facc15);
    color: var(--ink, #211C15) !important;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
    padding: 11px;
    border-radius: 50px;
    width: auto;
}


.plan-modal-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 20px 0 20px 0;
    list-style: none;
}

    .plan-modal-list li {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 12px;
        border-radius: 999px;
        background: #f7f8fa;
        border: 1px solid #e5e7eb;
        color: #374151;
        font-size: 12px;
        line-height: 1.3;
        flex: 0 0 auto;
        font-weight: 600;
    }

        .plan-modal-list li i {
            font-size: 13px;
            color: #22a06b;
            flex-shrink: 0;
        }

        .plan-modal-list li span {
            display: block;
        }


@media (max-width: 576px) {
    .plan-modal {
        max-width: calc(100% - 24px);
        padding: 22px 18px;
    }

    .plan-modal-list {
        gap: 8px;
    }

        .plan-modal-list li {
            font-size: 12px;
            padding: 7px 10px;
        }
}

.customise-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: linear-gradient( 160deg, #fffaf0 0%, #fdf0c9 100% );
    border: 1px solid #d4af55;
    border: 1px solid var(--hairline, #e8dfce);
    border-radius: 14px;
    padding: 14px 18px;
    margin: 20px 0;
    position: relative;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 1;
}

    .customise-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image: radial-gradient(circle at 90% 10%, rgba(250, 204, 21, .16) 0, transparent 45%), repeating-linear-gradient(135deg, rgba(232, 205, 138, .05) 0 2px, transparent 2px 22px);
    }

.customise-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--gold-light, #e8cd8a);
    color: var(--gold-deep, #8e6c1f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.customise-title {
    font-family: var(--font-display, 'Roboto', sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink, #211c15);
    margin: 1px 0 5px;
}

.customise-desc {
    font-size: .85rem;
    line-height: 1.5;
    color: var(--muted, #7a6e5e);
    margin: 0 0 12px;
}

.customise-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    color: #333 !important;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    padding: 9px 14px;
    border-radius: 50px;
    transition: .2s ease;
    border: 1px solid;
}


a.customise-link:hover {
    background: #000 !important;
    color: #fff !important;
}

.customise-link i {
    font-size: .7rem;
}

@media (max-width: 1200px) {
    .product-tags {
        font-size: 1rem !important;
    }
}

    @media (max-width: 520px) {
        .customise-card {
            gap: 12px;
            padding: 16px;
        }

        .customise-icon {
            width: 40px;
            height: 40px;
            flex-basis: 40px;
            font-size: 17px;
        }

        .customise-title {
            font-size: 1rem;
        }

        .customise-desc {
            font-size: .84rem;
        }

       
    }


.gallery-main {
    position: relative;
    min-height: 450px;
}

    .gallery-loading-overlay {
        position: absolute;
        inset: 0;
        z-index: 20;
        background: linear-gradient( 90deg, #eeeeee 25%, #f7f7f7 50%, #eeeeee 75% );
        background-size: 200% 100%;
        animation: galleryShimmer 1.2s linear infinite;
        border-radius: 12px;
        pointer-events: none;
    }

    @keyframes galleryShimmer {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    @keyframes gallerySpin {
        to {
            transform: rotate(360deg);
        }
    }

    span.review-mine-tag {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        background: #f3f4f6;
        color: #6b7280;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        border: 1px solid #e5e7eb;
        white-space: nowrap;
        margin-left: 10px;
    }


    .unique-read-more-link {
        margin-top: 15px;
        display: inline-block;
        color: var(--gold-deep) !important;
        text-decoration: underline;
        font-size: 14px;
        cursor: pointer;
    }

    .bt-plan-more {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        margin-top: 12px;
    }

    .bt-plan-text {
        font-size: 12px;
        color: #7d6b65;
    }

    .bt-plan-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: #fff5f0;
        border: 1px solid #e8c9bb;
        border-radius: 30px;
        color: #c75b32;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.25s ease;
    }

        .bt-plan-link:hover {
            background: #c75b32;
            border-color: #c75b32;
            color: #fff;
        }

        .bt-plan-link i {
            font-size: 10px;
        }


    /* ================================
   STARTER PACKAGE HIGHLIGHT
================================ */

    .tier-starter {
        position: relative;
        padding: 18px 20px;
        margin-bottom: 12px;
        background: linear-gradient( 135deg, #fff8e7 0%, #fffdf7 50%, #fff3cf 100% );
        border: 1px solid #d4a017;
        border-radius: 12px;
        box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        overflow: hidden;
    }

        /* Gold highlighted strip */
        .tier-starter::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient( 180deg, #f1d06a, #c99a24, #f1d06a );
        }

    /* FREE badge */
    .starter-badge {
        position: absolute;
        top: 0;
        right: 0;
        padding: 2px 12px;
        background: #d4a017;
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .7px;
        border-radius: 0 11px 0 10px;
    }

        .starter-badge i {
            margin-right: 4px;
        }

    /* Content */
    .tier-starter .pt-main {
        flex: 1;
        min-width: 0;
    }

    .tier-starter .pt-name {
        color: #8a6410;
        font-weight: 800;
        letter-spacing: .4px;
    }

    .tier-starter .pt-desc {
        display: block;
        margin-top: 6px;
        color: #6f6040;
        font-size: 13px;
        line-height: 1.5;
    }

    /* Dot */
    .tier-starter .pt-dot {
        background: #d4a017;
        box-shadow: 0 0 0 4px rgba(212, 160, 23, .12);
    }

    /* Read More */
    .tier-starter .pt-more {
        color: #9a7418;
        font-weight: 700;
        white-space: nowrap;
    }

        .tier-starter .pt-more:hover {
            color: #6f510b;
        }



    .plan-price {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: 14px;
        padding: 5px 9px;
        background: rgb(255 255 255);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 70px;
        line-height: 1;
    }

        .plan-price del {
            color: #060606;
            font-size: 16px;
            font-weight: 500;
        }

        .plan-price strong {
            color: #000000;
            font-size: 22px;
            font-weight: 800;
        }

        .plan-price small {
            display: inline-flex;
            align-items: center;
            padding: 4px 7px;
            background: #35e07f;
            color: #082b18;
            border-radius: 50px;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: .6px;
            box-shadow: 0 0 10px rgba(53, 224, 127, 0.25);
        }

    /* Common Badge */
    .starter-badge {
        position: absolute;
        top: 0;
        right: 0;
        padding: 4px 13px;
        font-size: 9.5px;
        font-weight: 800;
        letter-spacing: .45px;
        color: #fff;
        border-radius: 0 12px 0 10px;
        white-space: nowrap;
        z-index: 2;
        line-height: 1.2;
    }

        .starter-badge i {
            margin-right: 4px;
            font-size: 9px;
        }






    @import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Inter:wght@400;500;600&display=swap');

    .plan-tiers {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 14px;
        font-family: 'Inter', -apple-system, sans-serif;
    }

    /* ---- Card base ---- */
    .plan-tier {
        position: relative;
        width: 100%;
        min-height: 88px;
        padding: 20px 22px;
        padding-right: 5px;
        display: flex;
        align-items: center;
        gap: 18px;
        background: #ffffff;
        border: 1px solid #e7e5e4;
        border-radius: 14px;
        overflow: hidden;
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        margin-bottom: 0;
    }

        .plan-tier:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 24px -12px rgba(28, 25, 23, 0.18);
            border-color: var(--tier-border-hover, #d6d3d1);
        }

    /* ---- Material swatch (was a tiny dot, now a tactile chip) ---- */
    .pt-dot {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        border-radius: 11px;
        background: var(--tier-swatch, linear-gradient(155deg, #78716c, #a8a29e));
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), inset 0 -6px 10px rgba(0, 0, 0, 0.12);
        transition: transform 0.25s ease;
    }

    .plan-tier:hover .pt-dot {
        transform: scale(1.06) rotate(-3deg);
    }

    /* ---- Main content ---- */
    .pt-main {
        flex: 1;
        min-width: 0;
    }

    .pt-title {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .pt-name {
        font-family: 'Sora', sans-serif;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: #1c1917;
    }

    .pt-desc {
        display: block;
        margin-top: 6px;
        max-width: 46ch;
        font-size: 13.5px;
        line-height: 1.6;
        color: #78716c;
    }

        .pt-desc strong {
            font-weight: 600;
            color: var(--tier-text, #44403c);
        }

    /* ---- "Read more" button ---- */
    .pt-more {
        flex-shrink: 0;
        border: 0;
        background: transparent;
        font-family: 'Inter', sans-serif;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--tier-text, #57534e);
        cursor: pointer;
        white-space: nowrap;
        transition: color 0.2s ease, gap 0.2s ease;
    }

        .pt-more i {
            margin-left: 5px;
            font-size: 10px;
            transition: transform 0.2s ease;
        }

        .pt-more:hover {
            color: #1c1917;
        }

            .pt-more:hover i {
                transform: translateX(2px);
            }

        .pt-more:focus-visible,
        .plan-tier:focus-visible {
            outline: 2px solid var(--tier-text, #1c1917);
            outline-offset: 2px;
        }

    /* ---- Corner tag (was a flush ribbon, now a quieter pill) ---- */
    .starter-badge {
        position: absolute;
        top: 2px;
        right: 4px;
        z-index: 2;
        padding: 5px 12px;
        border-radius: 999px;
        font-family: 'Inter', sans-serif;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.1px;
        line-height: 1;
        white-space: nowrap;
        color: var(--tier-text, #44403c);
        background: var(--tier-tag-bg, #f5f5f4);
        border: 1px solid var(--tier-border, #857065);
    }

        .starter-badge i {
            margin-right: 4px;
            font-size: 9px;
        }

    /* =========================================
   TIER THEMES
   Swatch gradients are loosely modeled on
   each card's real material; text/tag colors
   are pulled from the same family so every
   tier reads as one deliberate palette.
   ========================================= */

    /* STARTER — QR paper/plastic card */
    .tier-starter {
        --tier-border-hover: #bcd0fb;
        --tier-swatch: linear-gradient(155deg, #3b63e0, #7a9bff);
        --tier-text: #2547b8;
        --tier-tag-bg: #eef2ff;
    }

    /* BRONZE — NFC premium card, brushed copper */
    .tier-bronze {
        --tier-border-hover: #e8c19f;
        --tier-swatch: linear-gradient(155deg, #a85c2e, #dd9b5f);
        --tier-text: #8a4a20;
        --tier-tag-bg: #fdf1e7;
    }

    /* SILVER — NFC metal card, brushed steel */
    .tier-silver {
        --tier-border-hover: #c7ccd4;
        --tier-swatch: linear-gradient(155deg, #495164, #8b93a3);
        --tier-text: #454d5e;
        --tier-tag-bg: #f2f3f5;
    }

    /* GOLD — NFC luxury card, champagne gold */
    .tier-gold {
        --tier-border-hover: #e7cd8d;
        --tier-swatch: linear-gradient(155deg, #8a6a1d, #e8c766);
        --tier-text: #8a6a1d;
        --tier-tag-bg: #fbf3df;
    }

        .tier-gold .starter-badge {
            background: linear-gradient(120deg, #fbf3df, #f3e3ba);
        }



    .fz-media {
        position: relative;
        overflow: hidden;
    }

        .fz-media iframe {
            width: 100%;
            height: 100%;
            display: block;
            border: 0;
            pointer-events: none;
        }


    /*08-09-2026*/

    /* ============ MOBILE RESPONSIVE: fz-tab-nav & sepratebtn ============ */
    @media (max-width: 767px) {

        .fz-details-layout {
            flex-direction: column;
        }

        .fz-tab-nav {
            flex: 0 0 auto;
            width: 100%;
            flex-direction: column;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: visible;
            border-right: none;
            border-bottom: 1px solid var(--hairline);
            padding: 12px 10px;
            gap: 8px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }

        .fz-tab-btn {
            flex: 0 0 auto;
            white-space: nowrap;
            padding: 8px 14px;
        }

        .fz-tab-title {
            font-size: .8rem;
        }

        .fz-tab-arrow {
            display: none; /* arrow doesn't make sense in horizontal scroll */
        }

        .fz-tab-group-label {
            flex: 0 0 auto;
            white-space: nowrap;
            display: flex;
            align-items: center;
            padding: 0 6px;
        }

        .sepratebtn {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 8px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

            .sepratebtn .fz-tab-btn {
                width: auto !important;
                margin-top: 6px;
            }
    }



    .specs-table-wrap {
        margin: 16px 0 20px;
        border: 1px solid var(--hairline);
        border-radius: 12px;
        overflow: hidden;
        background: var(--surface);
        display: inline-block;
        width: 100%;
        max-width: 100%;
    }

    .specs-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 18px;
        background: var(--ivory);
        border-bottom: 1px solid var(--hairline);
    }

        .specs-head i {
            color: var(--gold-deep);
            font-size: .92rem;
        }

        .specs-head h5 {
            margin: 0;
            font-family: var(--font-display);
            font-size: var(--fs-h5);
            font-weight: 700;
            color: var(--ink);
            letter-spacing: .01em;
        }

    .specs-table {
        border-collapse: collapse;
        width: 100%;
    }

        .specs-table tr {
            border-bottom: 1px solid var(--hairline);
        }

            .specs-table tr:last-child {
                border-bottom: none;
            }

    .specs-label {
        padding: 6px 18px;
        font-size: var(--fs-small);
        font-weight: 600;
        color: var(--muted);
        white-space: nowrap;
        border-right: 1px solid var(--hairline);
    }

    .specs-value {
        padding: 4px 18px;
        font-size: 1rem;
        color: var(--ink);
        font-weight: 500;
        white-space: nowrap;
    }





    .cardix-sec {
        position: relative;
        background: var(--black);
        border-radius: 20px;
        padding: 36px 30px;
        overflow: hidden;
        margin: 30px 0;
    }

    .cardix-glow {
        position: absolute;
        top: -60px;
        right: -60px;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(250,204,21,.25) 0%, transparent 70%);
        pointer-events: none;
    }

    .cardix-body {
        position: relative;
        z-index: 1;
        max-width: 680px;
    }

    .cardix-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(250,204,21,.12);
        border: 1px solid rgba(250,204,21,.3);
        color: var(--gold);
        font-size: var(--fs-badge);
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding: 6px 14px;
        border-radius: 999px;
        margin-bottom: 14px;
    }

    .cardix-title {
        font-family: var(--font-display);
        font-size: var(--fs-h3);
        font-weight: 700;
        color: #fff;
        margin: 0 0 10px;
        line-height: 1.25;
    }

    .cardix-desc {
        font-size: var(--fs-body);
        color: #C9C4BA;
        line-height: 1.6;
        margin: 0 0 24px;
    }

    /* ---- Cardix feature block (sits inside app section) ---- */
    .cardix-feature {
        display: flex;
        gap: 12px;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 20px;
    }

    .cardix-feature-icon {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--gold-light);
        color: var(--black);
        border-radius: 9px;
        font-size: .85rem;
    }

    .cardix-feature-label {
        display: block;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 2px;
    }

    .cardix-feature-title {
        font-family: var(--font-display);
        font-size: .95rem;
        font-weight: 700;
        color: #fff;
        margin: 0 0 5px;
    }

    .cardix-feature-desc {
        font-size: .8rem;
        color: #C9C4BA;
        line-height: 1.45;
        margin: 0 0 12px;
    }

    .cardix-steps {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .cardix-step {
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 999px;
        padding: 4px 12px 4px 4px;
    }

    .cardix-step-icon {
        width: 21px;
        height: 21px;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--gold-light);
        color: var(--black);
        border-radius: 50%;
        font-size: .62rem;
    }

    .cardix-step span {
        font-size: .7rem;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
    }

    .cardix-arrow {
        color: var(--gold);
        font-size: .65rem;
        opacity: .7;
    }




    .cardix-app-links {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

        .cardix-app-links .bt-app-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #1F1B14;
            border: 1.5px solid rgba(250,204,21,.35);
            border-radius: 12px;
            padding: 11px 20px;
            color: #fff;
            text-decoration: none;
            box-shadow: 0 4px 14px -6px rgba(0,0,0,.5);
            transition: background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
        }

            .cardix-app-links .bt-app-btn:hover {
                background: #2A2416;
                border-color: var(--gold);
                transform: translateY(-2px);
                box-shadow: 0 8px 20px -8px rgba(250,204,21,.35);
            }

            .cardix-app-links .bt-app-btn i {
                font-size: 1.5rem;
                color: var(--gold);
                flex: 0 0 auto;
            }

            .cardix-app-links .bt-app-btn span {
                display: flex;
                flex-direction: column;
                line-height: 1.25;
            }

                .cardix-app-links .bt-app-btn span small {
                    font-size: var(--fs-tiny);
                    color: #A89F8E;
                    font-weight: 400;
                }


    .cardix-inner {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 40px;
    }

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

    .cardix-media {
        flex: 0 0 380px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .cardix-media img {
            width: 100%;
            max-width: 380px;
            height: auto;
            display: block;
            border-radius: 15px;
        }

    /* ---- mobile: image neeche stack ho jayega ---- */
    @media (max-width: 767px) {
        .cardix-inner {
            flex-direction: column;
            gap: 24px;
        }

        .cardix-media {
            flex: 0 0 auto;
        }

            .cardix-media img {
                max-width: 220px;
            }
    }
    /* mobile: stack full width */
    @media (max-width: 767px) {
        .cardix-app-links {
            flex-direction: column;
        }

            .cardix-app-links .bt-app-btn {
                width: 100%;
                justify-content: center;
            }
    }


    /* ---- mobile ---- */
    @media (max-width: 767px) {
        .cardix-sec {
            padding: 26px 18px;
            border-radius: 16px;
        }

        .cardix-title {
            font-size: 1.4rem;
        }

        .cardix-feature {
            flex-direction: column;
            padding: 16px;
        }

        .cardix-steps {
            flex-direction: column;
            align-items: flex-start;
        }

        .cardix-arrow {
            transform: rotate(90deg);
            margin-left: 15px;
        }
    }



    /*09-09-2026 */

    .promo-ebook-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-top: 16px;
        padding: 12px 16px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 12px;
        background: rgba(255,255,255,.04);
    }

    .promo-ebook-text {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
    }

        .promo-ebook-text i {
            color: var(--gold);
            font-size: .9rem;
            margin-top: 2px;
            flex: 0 0 auto;
        }

        .promo-ebook-text span {
            font-size: var(--fs-small);
            color: #C9C4BA;
            line-height: 1.45;
        }

    .promo-ebook-btn {
        display: flex;
        align-items: center;
        gap: 7px;
        flex: 0 0 auto;
        background: var(--gold);
        color: var(--white);
        font-weight: 700;
        font-size: var(--fs-tiny);
        padding: 4px 16px;
        border-radius: 999px;
        text-decoration: none;
        white-space: nowrap;
        transition: background .18s ease, transform .12s ease;
        border: 0;
    }

        .promo-ebook-btn:hover {
            background: var(--gold-deep);
            color: #fff;
            transform: translateY(-1px);
        }

        .promo-ebook-btn i {
            font-size: .85rem;
        }

    .e-book-model {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
        gap: 20px;
        align-items: stretch;
        width: 100%;
        margin-block: 20px;
    }


        .e-book-model .fz-media, .e-book-model .promo-box {
            margin: 0;
        }
        /* Video */
        .e-book-model .fz-media {
            position: relative;
            width: 100%;
            min-height: 220px;
            overflow: hidden;
            border-radius: 16px;
        }
    /* ---- mobile: stack if too tight ---- */
    @media (max-width: 480px) {
        .promo-ebook-row {
            flex-direction: column;
            align-items: flex-start;
        }

        .promo-ebook-btn {
            width: 100%;
            justify-content: center;
        }
    }


    .eb-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(20,18,16,.72);
        z-index: 999999;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

        .eb-overlay.show {
            display: flex;
        }

    .eb-modal {
        width: 100%;
        max-width: 920px;
        height: 95vh;
        background: var(--surface);
        border-radius: 18px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
    }

    .eb-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 20px;
        background: var(--ivory);
        border-bottom: 1px solid var(--hairline);
    }

    .eb-head-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .eb-head-left i {
            color: var(--gold-deep);
            font-size: 1rem;
        }

        .eb-head-left span {
            font-family: var(--font-display);
            font-size: var(--fs-h5);
            font-weight: 700;
            color: var(--ink);
        }

    .eb-close {
        background: var(--surface);
        border: 1px solid var(--hairline);
        color: var(--ink);
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .18s ease, border-color .18s ease;
    }

        .eb-close:hover {
            background: #FFF0F0;
            border-color: #E0A8A0;
        }

    .eb-body {
        position: relative;
        flex: 1 1 auto;
        background: #f4f1ea;
    }

        .eb-body iframe {
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }

    .eb-loader {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: var(--muted);
        font-size: var(--fs-small);
        background: #f4f1ea;
    }

        .eb-loader.hide {
            display: none;
        }

    .eb-foot {
        padding: 14px 20px;
        background: var(--ivory);
        border-top: 1px solid var(--hairline);
        display: flex;
        justify-content: flex-end;
    }

    .eb-download-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--gold);
        color: var(--black);
        font-weight: 700;
        font-size: var(--fs-small);
        padding: 6px 22px;
        border-radius: 999px;
        text-decoration: none;
        transition: background .18s ease, transform .12s ease;
    }

        .eb-download-btn:hover {
            background: var(--gold-deep);
            color: #fff;
            transform: translateY(-1px);
        }

    /* ---- mobile ---- */
    @media (max-width: 767px) {
        .eb-modal {
            height: 90vh;
            border-radius: 14px;
        }

        .eb-head-left span {
            font-size: .9rem;
        }

        .eb-foot {
            justify-content: center;
        }

        .eb-download-btn {
            width: 100%;
            justify-content: center;
        }
    }




    /*--------11-09-2026------*/


    /* ============================================================
   vCard build-mode modal — "Design canvas vs Guided chat"
   Built on your existing :root design tokens.
   ============================================================ */

    /* --------- overlay / backdrop --------- */
    .vcard-mode-overlay {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        z-index: 999999;
        background: rgba(20, 18, 16, 0); /* fades to --black @ 45% when open */
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms ease-out, background 220ms ease-out;
    }

        .vcard-mode-overlay.is-open {
            background: rgba(20, 18, 16, 0.45);
            opacity: 1;
            pointer-events: auto;
        }

    /* --------- modal card --------- */
    .vcard-mode-modal {
        width: 640px;
        max-width: 100%;
        background: var(--surface);
        border: 1px solid var(--hairline);
        border-radius: 16px;
        padding: 1.75rem;
        box-shadow: 0 24px 60px rgba(20, 18, 16, 0.18);
        transform: scale(0.94) translateY(8px);
        opacity: 0;
        transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease-out;
    }

    .vcard-mode-overlay.is-open .vcard-mode-modal {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    .vcard-mode-title {
        font-family: var(--font-display);
        font-size: var(--fs-h3);
        font-weight: 600;
        color: var(--ink);
        margin: 0 0 4px;
    }

    .vcard-mode-subtitle {
        font-family: var(--font-body);
        font-size: var(--fs-body);
        color: var(--muted);
        margin: 0 0 20px;
    }

    /* --------- two-column option grid --------- */
    .vcard-mode-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    @media (max-width: 560px) {
        .vcard-mode-grid {
            grid-template-columns: 1fr;
        }
    }

    /* --------- option card --------- */
    .vcard-mode-card {
        position: relative;
        border: 1px solid var(--hairline);
        border-radius: 12px;
        padding: 1.25rem;
        background: var(--surface);
        transition: border-color 160ms ease, box-shadow 160ms ease;
    }

        .vcard-mode-card:hover {
            border-color: var(--gold-light);
            box-shadow: 0 4px 14px rgba(142, 108, 31, 0.12);
        }

    /* the recommended / highlighted option (currently: Design canvas) */
    .vcard-mode-card--featured {
        border: 2px solid var(--gold);
    }

    .vcard-mode-badge {
        position: absolute;
        top: -12px;
        left: 16px;
        background: var(--gold-light);
        color: #35280c;
        font-family: var(--font-body);
        font-size: var(--fs-small);
        font-weight: 600;
        letter-spacing: 0.02em;
        padding: 4px 12px;
        border-radius: 999px;
        line-height: 1.2;
    }

    .vcard-mode-card-head {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 12px;
    }

    .vcard-mode-icon {
        font-size: 17px;
        color: var(--gold-deep);
    }

    .vcard-mode-card--featured .vcard-mode-icon {
        color: var(--gold-deep);
    }

    .vcard-mode-card:not(.vcard-mode-card--featured) .vcard-mode-icon {
        color: var(--muted);
    }

    .vcard-mode-card-title {
        font-family: var(--font-display);
        font-size: var(--fs-h4);
        font-weight: 600;
        color: var(--ink);
        margin: 0;
    }

    .vcard-mode-card-desc {
        font-family: var(--font-body);
        font-size: var(--fs-body);
        color: var(--muted);
        margin: 0 0 14px;
        line-height: 1.5;
    }

    /* --------- bullet list inside each card --------- */
    .vcard-mode-list {
        list-style: none;
        padding: 0;
        margin: 0 0 18px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .vcard-mode-list li {
            display: flex;
            gap: 8px;
            font-family: var(--font-body);
            font-size: var(--fs-small);
            color: var(--ink);
            line-height: 1.45;
        }

            .vcard-mode-list li i {
                font-size: 18px;
                color: var(--muted);
                margin-top: 1px;
                flex-shrink: 0;
            }

    /* --------- buttons --------- */
    .vcard-mode-btn {
        display: block;
        width: 100%;
        border-radius: 8px;
        padding: 12px 16px;
        font-family: var(--font-body);
        font-size: var(--fs-body);
        font-weight: 600;
        cursor: pointer;
        transition: transform 120ms ease, background 160ms ease, border-color 160ms ease;
        text-align: center;
    }

        .vcard-mode-btn:active {
            transform: scale(0.98);
        }

    /* secondary / outline button (Guided chat) */
    .vcard-mode-btn--secondary {
        background: var(--surface);
        border: 1px solid var(--hairline);
        color: #000 !important;
    }

        .vcard-mode-btn--secondary:hover {
            border-color: var(--gold-deep);
            background: var(--ivory);
        }

    /* primary / filled button (Design canvas) */
    .vcard-mode-btn--primary {
        background: var(--ink);
        border: 1px solid var(--ink);
        color: var(--surface);
    }

        .vcard-mode-btn--primary:hover {
            background: #333;
            color: var(--surface) !important;
        }

    /* --------- footer helper line --------- */
    .vcard-mode-footer {
        font-family: var(--font-body);
        font-size: var(--fs-small);
        color: var(--muted);
        text-align: center;
        margin: 16px 0 0;
    }

    .cardix-feature-heading {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .cardix-feature-title {
        margin: 0;
    }

    .cardix-view-more {
        font-size: 13px;
        color: #fff;
        cursor: pointer;
        white-space: nowrap;
        transition: color 0.2s ease;
        text-decoration: underline;
    }

        .cardix-view-more:hover {
            color: #eee;
            text-decoration: underline;
        }


    .fz-video-loader {
        position: absolute;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 2;
        background: rgba(0,0,0,0.4);
    }

        .fz-video-loader.show {
            display: flex;
        }

    .fz-spinner {
        width: 56px;
        height: 56px;
        border: 4px solid rgba(255,255,255,0.2);
        border-top-color: #fff;
        border-radius: 50%;
        animation: fz-spin 0.9s linear infinite;
    }

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

    /* stage needs relative positioning so the loader overlay sits correctly */
    .modal-stage {
        position: relative;
    }


    /*---------14-0-9-2026--------*/
    /* ===== WHAT'S IN THE BOX (collapsible) ===== */
    .wib-card {
        background: var(--surface);
        border: 1px solid var(--hairline);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 20px;
        font-family: var(--font-body);
    }

    .wib-header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 22px;
        background: var(--ivory);
        border: none;
        border-bottom: 1px solid #fff0;
        cursor: pointer;
        text-align: left;
    }

    .wib-header__left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .wib-header__icon {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: var(--gold);
        color: var(--white);
        font-size: .95rem;
        flex-shrink: 0;
    }

    .wib-header__title {
        font-family: var(--font-display);
        font-size: var(--fs-h4);
        font-weight: 700;
        color: var(--ink);
        margin: 0;
    }

    .wib-header__chevron {
        color: var(--gold-deep);
        font-size: .9rem;
        transition: transform .3s ease;
    }

    .wib-header.open {
        border-bottom: 1px solid var(--hairline);
    }

        .wib-header.open .wib-header__chevron {
            transform: rotate(180deg);
        }

    .wib-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
    }

    .wib-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .wib-item {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 10px 22px;
        border-bottom: 1px solid var(--hairline);
    }

        .wib-item:nth-child(odd) {
            border-right: 1px solid var(--hairline);
        }

        .wib-item:nth-last-child(-n+2) {
            border-bottom: none;
        }

    .wib-item__icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--ivory);
        border: 1px solid var(--gold-light);
        color: var(--gold-deep);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

    .wib-item__text {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .wib-item__name {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: var(--fs-small);
        color: var(--ink);
    }

    .wib-item__qty {
        font-size: var(--fs-tiny);
        color: var(--muted);
        line-height: 1.4;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 640px) {
        .wib-grid {
            grid-template-columns: 1fr;
        }

        .wib-item:nth-child(odd) {
            border-right: none;
        }

        .wib-item:nth-last-child(-n+2) {
            border-bottom: 1px solid var(--hairline);
        }

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

    /* =========================================
   RESPONSIVE
   ========================================= */

    @media (max-width: 767px) {
        .plan-tier {
            min-height: auto;
            padding: 44px 16px 18px;
            display: block;
        }

        .pt-dot {
            position: absolute;
            top: 14px;
            left: 16px;
        }

        .pt-title {
            margin-bottom: 5px;
            padding-left: 54px;
            min-height: 42px;
            align-items: flex-start;
            padding-top: 6px;
        }

        .pt-name {
            font-size: 15.5px;
        }

        .pt-desc {
            font-size: 12.5px;
            max-width: none;
        }

        .pt-more {
            display: inline-block;
            margin-top: 12px;
            padding: 0;
        }

        .starter-badge {
            top: 14px;
            right: 14px;
            font-size: 9.5px;
            padding: 4px 10px;
        }
    }

    @media (max-width: 420px) {
        .plan-tier {
            padding-left: 14px;
            padding-right: 14px;
        }

        .pt-dot {
            left: 14px;
        }

        .pt-title {
            padding-left: 50px;
        }

        .starter-badge {
            position: static;
            display: inline-flex;
            margin-top: 8px;
        }
    }





    @media (max-width: 520px) {
        .plan-tier {
            flex-direction: column;
            align-items: flex-start;
        }

        .tier-starter .pt-main {
            flex-direction: column;
            align-items: baseline;
        }

        .e-book-model {
            grid-template-columns: auto;
        }
    }




    #cw-launcher {
        right: 10px;
        bottom: 135px !important;
    }



    /* ============ E-BOOK SECTION (bilingual) ============ */
    .promo-ebook-row {
        flex-wrap: wrap;
        scroll-margin-top: 140px; /* sticky header ke liye */
    }

    .promo-ebook-actions {
        display: flex;
        gap: 18px;
        flex-wrap: wrap;
        flex: 0 0 auto;
    }

    .eb-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px 14px;
        border: 1px solid rgba(232,205,138,.28);
        border-radius: 10px;
        background: rgba(255,255,255,.03);
    }

    .eb-group__label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: var(--fs-badge);
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--gold-light);
        white-space: nowrap;
    }

        .eb-group__label i {
            font-size: .75rem;
        }

    .eb-group__row {
        display: flex;
        gap: 8px;
    }

    .promo-ebook-btn--alt {
        background: var(--gold-light);
        color: var(--black);
    }

        .promo-ebook-btn--alt:hover {
            background: #fff;
            color: var(--black);
        }

    .promo-ebook-btn--ghost {
        background: transparent;
        border: 1px solid rgba(232,205,138,.55);
        color: var(--gold-light);
    }

        .promo-ebook-btn--ghost:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: var(--black);
        }

    /* ---- #ebook deep-link highlight ---- */
    /* ---- #ebook deep-link highlight: persistent jab tak hash lagi hai ---- */
    .promo-ebook-row.eb-flash {
        border-color: var(--gold) !important;
        background: rgba(250,204,21,.10);
        box-shadow: 0 0 0 3px rgba(250,204,21,.35);
        animation: ebPulse 1.8s ease-in-out infinite;
    }

    @keyframes ebPulse {
        0%, 100% {
            box-shadow: 0 0 0 3px rgba(250,204,21,.35);
        }

        50% {
            box-shadow: 0 0 0 6px rgba(250,204,21,.15);
        }
    }

    @media (max-width:640px) {
        .promo-ebook-actions {
            width: 100%;
            gap: 14px;
        }

        .eb-group {
            width: 100%;
        }

        .eb-group__row {
            width: 100%;
        }

            .eb-group__row .promo-ebook-btn {
                flex: 1 1 0;
                justify-content: center;
            }
    }

    /* ============ E-BOOK MODAL (lang switch + 2 downloads) ============ */
    .eb-head-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .eb-lang-switch {
        display: inline-flex;
        background: var(--surface);
        border: 1px solid var(--hairline);
        border-radius: 999px;
        padding: 3px;
        gap: 3px;
    }

    .eb-lang-btn {
        border: none;
        background: transparent;
        color: var(--muted);
        font-family: var(--font-body);
        font-size: var(--fs-tiny);
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 999px;
        cursor: pointer;
        transition: background .18s ease, color .18s ease;
    }

        .eb-lang-btn:hover {
            color: var(--ink);
        }

        .eb-lang-btn.is-active {
            background: var(--gold);
            color: var(--black);
        }

    .eb-foot {
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .eb-foot-label {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: var(--fs-tiny);
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
    }

        .eb-foot-label i {
            color: var(--gold-deep);
        }

    .eb-foot-btns {
        display: flex;
        gap: 10px;
    }

    .eb-download-btn--alt {
        background: var(--black);
        color: var(--gold-light);
    }

        .eb-download-btn--alt:hover {
            background: var(--gold-deep);
            color: #fff;
        }

    @media (max-width:767px) {
        .eb-foot {
            flex-direction: column;
            align-items: stretch;
            padding: 5px 20px;
            gap: 3px;
        }

        .eb-foot-btns {
            width: 100%;
        }

            .eb-foot-btns .eb-download-btn {
                flex: 1 1 0;
                justify-content: center;
            }

        .eb-lang-btn {
            padding: 6px 11px;
        }

        .eb-head-left span {
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }


    /* ============================================
   PRICE BADGE — top-right corner of its parent
   (parent me position: relative hona chahiye)
============================================ */
    .tpl-price-badge {
        --tpl-price-bg-1: #fff8e1;
        --tpl-price-bg-2: #ffe9a6;
        --tpl-price-border: #f0c95c;
        --tpl-price-ink: #4a3200;
        position: absolute;
        top: 40px;
        right: 9px;
        z-index: 2;
        padding: 4px 14px;
        border-radius: 50px;
        background: linear-gradient(135deg, var(--tpl-price-bg-1), var(--tpl-price-bg-2));
        border: 1px solid var(--tpl-price-border);
        box-shadow: 0 8px 18px -10px rgba(176, 124, 0, .6);
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: .2px;
        color: var(--tpl-price-ink);
        white-space: nowrap;
    }

    #zoomStage img {
        object-fit: contain !important;
    }


    @media (max-width: 1025px) {
        .promo-ebook-actions {
            flex-direction: column;
        }
    }



    @media (max-width: 480px) {
        .tpl-price-badge {
            top: 8px;
            right: 8px;
            padding: 6px 12px;
            font-size: 1rem;
        }
    }