/* =========================================================
   ZOBTY — PREMIUM UPGRADE CSS
   Navbar + Hero + Categories + Products
   ========================================================= */

:root {
    --zobty-green: #123c2b;
    --zobty-green-dark: #09251b;
    --zobty-gold: #c9a24d;
    --zobty-gold-light: #e8cf86;
    --zobty-ivory: #fffaf0;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
    background: rgba(9, 37, 27, 0.96) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(201, 162, 77, 0.28);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.logo {
    color: #ffffff !important;
    font-family: "Playfair Display", serif;
    font-weight: 800;
    letter-spacing: 2px;
}

.logo span {
    color: var(--zobty-gold-light) !important;
}

.nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--zobty-gold-light) !important;
}

.nav-icons .icon-link {
    color: #ffffff !important;
}

.cart-count {
    background: linear-gradient(
        135deg,
        var(--zobty-gold-light),
        var(--zobty-gold)
    ) !important;

    color: var(--zobty-green-dark) !important;
}


/* =========================================================
   HERO
   ========================================================= */

.hero-slider {
    position: relative;
    overflow: hidden;
    background: var(--zobty-green-dark);
}

#hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.95) contrast(1.05);
}

.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(5, 24, 17, 0.94) 0%,
            rgba(9, 37, 27, 0.70) 45%,
            rgba(9, 37, 27, 0.25) 75%,
            rgba(9, 37, 27, 0.05) 100%
        ) !important;
}

.hero-title {
    color: #ffffff !important;
    font-family: "Playfair Display", serif;
    text-shadow: 0 8px 35px rgba(0, 0, 0, 0.35);
}

.hero-title span {
    color: var(--zobty-gold-light) !important;
}

.hero-text {
    color: rgba(255, 255, 255, 0.88) !important;
}

.hero-btns .btn-primary {
    background: linear-gradient(
        135deg,
        var(--zobty-gold-light),
        var(--zobty-gold)
    ) !important;

    color: var(--zobty-green-dark) !important;
    border: none !important;
}

.hero-btns .btn-outline {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}


/* =========================================================
   CATEGORIES — PREMIUM IVORY / GOLD / GREEN
   ========================================================= */

.section:has(.category-grid) {
    background:
        linear-gradient(
            135deg,
            #efe0b9 0%,
            #fff7e4 45%,
            #dcebe1 100%
        ) !important;

    margin: 28px 10px !important;
    padding: 35px 15px !important;

    border-radius: 26px !important;

    box-shadow:
        0 14px 35px rgba(18, 60, 43, 0.13) !important;
}

.section:has(.category-grid) .section-title {
    color: var(--zobty-green) !important;
}

.section:has(.category-grid) .section-subtitle {
    color: #68736d !important;
}

.section:has(.category-grid) .category-card {
    border: 1px solid rgba(201, 162, 77, 0.45) !important;

    box-shadow:
        0 9px 22px rgba(18, 60, 43, 0.14) !important;
}


/* =========================================================
   PRODUCTS — DEEP GREEN PREMIUM AREA
   ========================================================= */

.section:has(#products-container) {
    background:
        linear-gradient(
            135deg,
            #08281c 0%,
            #123c2b 50%,
            #1a563c 100%
        ) !important;

    margin: 30px 10px !important;
    padding: 40px 15px !important;

    border-radius: 26px !important;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.22) !important;
}

.section:has(#products-container) .section-title {
    color: var(--zobty-gold-light) !important;
}

.section:has(#products-container) .section-subtitle {
    color: rgba(255, 255, 255, 0.82) !important;
}


/* =========================================================
   PRODUCT CARDS
   ========================================================= */

#products-container .product-card {
    background: #fffdf8 !important;
    border: 1px solid rgba(201, 162, 77, 0.25) !important;

    border-radius: 18px !important;
    overflow: hidden !important;

    box-shadow:
        0 9px 24px rgba(0, 0, 0, 0.10) !important;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease !important;
}

#products-container .product-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.16) !important;
}

#products-container .product-img-wrapper {
    position: relative;
    overflow: hidden;
}

#products-container .product-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;

    transition: transform 0.45s ease;
}

#products-container .product-card:hover
.product-img-wrapper img {
    transform: scale(1.05);
}

#products-container .product-info h3 {
    color: var(--zobty-green) !important;
}

#products-container .category-name {
    color: #8b6a35 !important;
}

#products-container .product-price {
    color: #9b7225 !important;
    font-weight: 800 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .navbar {
        background: rgba(9, 37, 27, 0.98) !important;
    }

    .nav-menu {
        background:
            linear-gradient(
                160deg,
                #09251b,
                #123c2b
            ) !important;

        border-top: 1px solid rgba(201, 162, 77, 0.25);
    }

    .hero-content {
        text-align: center !important;
    }

    .hero-title {
        line-height: 1.08;
    }

    /* Categories */

    .section:has(.category-grid) {
        margin: 20px 8px !important;
        padding: 28px 10px !important;
    }

    .section:has(.category-grid) .category-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        max-width: 390px;
        margin: 24px auto 0;
    }

    .section:has(.category-grid) .category-card {
        min-height: 205px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    /* Third category centered */

    .section:has(.category-grid)
    .category-card:nth-child(3) {
        grid-column: 1 / -1;
        width: calc(50% - 6px);
        justify-self: center;
    }


    /* Products */

    .section:has(#products-container) {
        margin: 22px 8px !important;
        padding: 30px 10px !important;
    }

    #products-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        max-width: 390px;
        margin: 25px auto 0;
    }

    #products-container .product-card {
        width: 100% !important;
        min-width: 0 !important;
        border-radius: 16px !important;
    }

    #products-container .product-img-wrapper {
        height: 165px !important;
        min-height: 165px !important;
    }

    #products-container .product-info {
        padding: 11px 9px !important;
        text-align: center;
    }

    #products-container .product-info h3 {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }

    #products-container .weight-options {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center;
        gap: 5px !important;
    }

    #products-container .weight-btn {
        padding: 5px 7px !important;
        font-size: 0.62rem !important;
        border-radius: 8px !important;
    }

    #products-container .product-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    #products-container .product-actions button {
        min-height: 37px !important;
        font-size: 0.65rem !important;
        border-radius: 9px !important;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .section:has(.category-grid)
    .category-card {
        min-height: 190px !important;
    }

    #products-container {
        gap: 9px !important;
    }

    #products-container .product-img-wrapper {
        height: 150px !important;
        min-height: 150px !important;
    }

    #products-container .product-info h3 {
        font-size: 0.82rem !important;
    }
}/* =========================================================
   ZOBTY MOBILE MENU BUTTON
   ========================================================= */

@media (max-width: 768px) {

    .nav-icons {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
    }

    .hamburger {
        display: flex !important;
        width: 42px !important;
        height: 42px !important;
        padding: 8px !important;
        margin-left: 4px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        cursor: pointer !important;
        z-index: 10001 !important;
    }

    .hamburger .bar {
        display: block !important;
        width: 24px !important;
        height: 2px !important;
        background: #e8cf86 !important;
        border-radius: 3px !important;
    }
}/* =========================================================
   ZOBTY — PREMIUM MOBILE HEADER
   ========================================================= */

@media (max-width: 768px) {

    /* HEADER */
    .navbar {
        background: #082b1c !important;
        border-bottom: 1px solid rgba(199, 154, 53, 0.35) !important;
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.22) !important;
    }

    .nav-container {
        min-height: 72px !important;
        padding: 10px 14px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* LOGO */
    .logo {
        font-size: 1.45rem !important;
        line-height: 1 !important;
        letter-spacing: 1.5px !important;
        color: #ffffff !important;
        white-space: nowrap !important;
    }

    .logo span {
        display: block !important;
        margin-top: 4px !important;
        font-size: 0.55rem !important;
        letter-spacing: 2px !important;
        color: #e8cf86 !important;
        font-style: normal !important;
    }

    /* RIGHT SIDE ICONS */
    .nav-icons {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-left: auto !important;
    }

    .nav-icons .icon-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        color: #ffffff !important;
        font-size: 1rem !important;
    }

    /* CART NUMBER */
    .cart-count {
        width: 17px !important;
        height: 17px !important;
        top: -3px !important;
        right: -3px !important;
        background: #e8cf86 !important;
        color: #082b1c !important;
        font-size: 0.58rem !important;
    }

    /* MENU BUTTON */
    .hamburger {
        display: flex !important;
        width: 40px !important;
        height: 40px !important;
        padding: 7px !important;
        margin: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 10005 !important;
        border: 1px solid rgba(232, 207, 134, 0.55) !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.06) !important;
    }

    .hamburger .bar {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        margin: 0 !important;
        background: #e8cf86 !important;
        border-radius: 5px !important;
        transition: all 0.3s ease !important;
    }

    /* MOBILE MENU */
    .nav-menu {
        position: fixed !important;
        top: 72px !important;
        left: -100% !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 72px) !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 12px 15px 25px !important;
        background: linear-gradient(
            160deg,
            #082b1c 0%,
            #0d4a2d 100%
        ) !important;
        border-top: 1px solid rgba(199, 154, 53, 0.35) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.30) !important;
        z-index: 10000 !important;
        transition: left 0.35s ease !important;
    }

    .nav-menu.active {
        left: 0 !important;
    }

    .nav-menu li {
        width: 100% !important;
        list-style: none !important;
    }

    .nav-menu .nav-link {
        display: block !important;
        width: 100% !important;
        padding: 15px 12px !important;
        color: #ffffff !important;
        font-size: 0.9rem !important;
        text-align: left !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    .nav-menu .nav-link.active,
    .nav-menu .nav-link:hover {
        color: #e8cf86 !important;
    }
}/* =========================================================
   ZOBTY — PREMIUM MOBILE MENU LINKS
   ========================================================= */

@media (max-width: 768px) {

    .nav-menu .nav-link {
        position: relative !important;
        padding: 17px 16px !important;
        margin: 3px 0 !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        font-size: 0.92rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        transition: all 0.25s ease !important;
    }

    .nav-menu .nav-link:hover,
    .nav-menu .nav-link.active {
        background: rgba(232, 207, 134, 0.10) !important;
        border-color: rgba(232, 207, 134, 0.25) !important;
        color: #e8cf86 !important;
        padding-left: 22px !important;
    }

    .nav-menu .nav-link::after {
        content: "›" !important;
        position: absolute !important;
        right: 16px !important;
        font-size: 1.2rem !important;
        color: rgba(232, 207, 134, 0.7) !important;
        transition: transform 0.25s ease !important;
    }

    .nav-menu .nav-link:hover::after {
        transform: translateX(4px) !important;
        color: #e8cf86 !important;
    }

    .nav-menu {
        padding-top: 16px !important;
        padding-bottom: 28px !important;
    }
}/* =========================================================
   ZOBTY — PREMIUM MOBILE ICONS
   ========================================================= */

@media (max-width: 768px) {

    .nav-icons {
        gap: 7px !important;
    }

    .nav-icons .icon-link {
        width: 36px !important;
        height: 36px !important;
        border: 1px solid rgba(232, 207, 134, 0.25) !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.05) !important;
        color: #ffffff !important;
        font-size: 0.95rem !important;
        transition: all 0.25s ease !important;
    }

    .nav-icons .icon-link:hover {
        color: #e8cf86 !important;
        border-color: rgba(232, 207, 134, 0.7) !important;
        background: rgba(232, 207, 134, 0.10) !important;
        transform: translateY(-1px) !important;
    }

    /* CART */
    .nav-icons .cart-icon {
        position: relative !important;
    }

    .cart-count {
        border: 2px solid #082b1c !important;
        font-weight: 700 !important;
    }

    /* HAMBURGER */
    .hamburger {
        margin-left: 2px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
        transition: all 0.25s ease !important;
    }

    .hamburger:hover {
        border-color: #e8cf86 !important;
        background: rgba(232, 207, 134, 0.12) !important;
        transform: translateY(-1px) !important;
    }
}/* =========================================================
   ZOBTY — PREMIUM MOBILE LOGO
   ========================================================= */

@media (max-width: 768px) {

    .logo {
        font-family: 'Playfair Display', serif !important;
        font-size: 1.55rem !important;
        font-weight: 800 !important;
        letter-spacing: 2px !important;
        color: #ffffff !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
    }

    .logo span {
        font-family: Arial, sans-serif !important;
        font-size: 0.56rem !important;
        font-weight: 600 !important;
        letter-spacing: 3px !important;
        color: #e8cf86 !important;
        margin-top: 5px !important;
    }
}/* =========================================================
   ZOBTY — LUXURY IVORY / SAGE HEADER
   ========================================================= */

:root {
    --zobty-ivory: #F8F5ED;
    --zobty-sage: #71806A;
    --zobty-deep: #263B2D;
    --zobty-champagne: #C6A15B;
    --zobty-text: #252525;
}

/* DESKTOP HEADER */
.navbar {
    background: rgba(248, 245, 237, 0.96) !important;
    border-bottom: 1px solid rgba(198, 161, 91, 0.22) !important;
    box-shadow: 0 4px 24px rgba(38, 59, 45, 0.07) !important;
}

.logo {
    color: var(--zobty-deep) !important;
    letter-spacing: 1px !important;
}

.logo span {
    color: var(--zobty-champagne) !important;
}

.nav-link {
    color: var(--zobty-text) !important;
}

.nav-link:hover,
.nav-link.active {
    color: var(--zobty-sage) !important;
}

.icon-link {
    color: var(--zobty-deep) !important;
}

.icon-link:hover {
    color: var(--zobty-champagne) !important;
}

.cart-count {
    background: var(--zobty-champagne) !important;
    color: #ffffff !important;
}

/* MOBILE HEADER */
@media (max-width: 768px) {

    .navbar {
        background: rgba(248, 245, 237, 0.98) !important;
        border-bottom: 1px solid rgba(198, 161, 91, 0.28) !important;
        box-shadow: 0 5px 22px rgba(38, 59, 45, 0.10) !important;
    }

    .logo {
        color: var(--zobty-deep) !important;
    }

    .logo span {
        color: var(--zobty-champagne) !important;
    }

    .nav-icons .icon-link {
        color: var(--zobty-deep) !important;
        border-color: rgba(113, 128, 106, 0.25) !important;
        background: rgba(113, 128, 106, 0.06) !important;
    }

    .nav-icons .icon-link:hover {
        color: var(--zobty-sage) !important;
        border-color: var(--zobty-champagne) !important;
        background: rgba(198, 161, 91, 0.08) !important;
    }

    .hamburger {
        border-color: rgba(198, 161, 91, 0.45) !important;
        background: rgba(113, 128, 106, 0.07) !important;
    }

    .hamburger .bar {
        background: var(--zobty-deep) !important;
    }

    .nav-menu {
        background: var(--zobty-ivory) !important;
        border-top: 1px solid rgba(198, 161, 91, 0.25) !important;
    }

    .nav-menu .nav-link {
        color: var(--zobty-deep) !important;
        border-bottom-color: rgba(38, 59, 45, 0.08) !important;
    }

    .nav-menu .nav-link:hover,
    .nav-menu .nav-link.active {
        color: var(--zobty-sage) !important;
        background: rgba(113, 128, 106, 0.07) !important;
        border-color: rgba(198, 161, 91, 0.20) !important;
    }
}/* =========================================================
   ZOBTY — HEADER VISIBILITY FIX
   ========================================================= */

.nav-link {
    color: #263B2D !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.nav-link:hover,
.nav-link.active {
    color: #71806A !important;
    opacity: 1 !important;
}

.icon-link {
    color: #263B2D !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* MOBILE MENU */
@media (max-width: 768px) {

    .nav-menu .nav-link {
        color: #263B2D !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
    }

    .nav-menu .nav-link:hover,
    .nav-menu .nav-link.active {
        color: #71806A !important;
        background: rgba(113, 128, 106, 0.08) !important;
    }

    .nav-icons .icon-link {
        color: #263B2D !important;
        opacity: 1 !important;
    }

    .hamburger .bar {
        background: #263B2D !important;
        opacity: 1 !important;
    }
}/* =========================================================
   ZOBTY — PREMIUM DESKTOP HEADER
   ========================================================= */

@media (min-width: 769px) {

    .navbar {
        background: #F8F5ED !important;
        border-bottom: 1px solid rgba(198, 161, 91, 0.25) !important;
        box-shadow: 0 4px 25px rgba(38, 59, 45, 0.08) !important;
    }

    .nav-container {
        min-height: 82px !important;
        padding: 12px 32px !important;
    }

    /* LOGO */
    .logo {
        color: #263B2D !important;
        font-size: 1.8rem !important;
        font-weight: 800 !important;
        letter-spacing: 1.5px !important;
    }

    .logo span {
        color: #C6A15B !important;
        font-size: 0.75rem !important;
        letter-spacing: 2px !important;
    }

    /* MENU */
    .nav-menu {
        gap: 2rem !important;
    }

    .nav-menu .nav-link {
        color: #263B2D !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-weight: 600 !important;
        font-size: 0.84rem !important;
        letter-spacing: 0.7px !important;
        padding: 10px 3px !important;
    }

    .nav-menu .nav-link:hover {
        color: #71806A !important;
    }

    .nav-menu .nav-link.active {
        color: #C6A15B !important;
    }

    /* GOLD UNDERLINE */
    .nav-menu .nav-link::after {
        background: #C6A15B !important;
    }

    /* ICONS */
    .nav-icons {
        gap: 18px !important;
    }

    .nav-icons .icon-link {
        color: #263B2D !important;
        opacity: 1 !important;
        font-size: 1.05rem !important;
    }

    .nav-icons .icon-link:hover {
        color: #C6A15B !important;
    }

    .cart-count {
        background: #C6A15B !important;
        color: #ffffff !important;
    }
}/* =========================================================
   ZOBTY — LUXURY HERO SECTION
   ========================================================= */

.hero {
    position: relative !important;
    min-height: 620px !important;
    overflow: hidden !important;
    background: #263B2D !important;
}

.hero-bg-image {
    filter: saturate(0.82) contrast(1.03) !important;
    transform: scale(1.02) !important;
}

/* Elegant overlay — image بھی نظر آئے گی */
.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(38, 59, 45, 0.88) 0%,
            rgba(38, 59, 45, 0.68) 42%,
            rgba(38, 59, 45, 0.18) 78%,
            rgba(38, 59, 45, 0.05) 100%
        ) !important;
}

/* HERO CONTENT */
.hero-content {
    max-width: 650px !important;
    color: #F8F5ED !important;
}

.hero-content h1,
.hero-title {
    color: #F8F5ED !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.08 !important;
    text-shadow: 0 3px 20px rgba(0,0,0,0.20) !important;
}

.hero-content h1 span,
.hero-title span {
    color: #E2C77D !important;
}

.hero-content p,
.hero-subtitle {
    color: rgba(248,245,237,0.88) !important;
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
}

/* PREMIUM BUTTON */
.hero .btn,
.hero-content .btn {
    background: #C6A15B !important;
    color: #263B2D !important;
    border: 1px solid #C6A15B !important;
    border-radius: 8px !important;
    padding: 13px 28px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.18) !important;
    transition: all 0.3s ease !important;
}

.hero .btn:hover,
.hero-content .btn:hover {
    background: #F0DDA6 !important;
    border-color: #F0DDA6 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.22) !important;
}

/* MOBILE HERO */
@media (max-width: 768px) {

    .hero {
        min-height: 560px !important;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(38,59,45,0.48) 0%,
                rgba(38,59,45,0.72) 55%,
                rgba(38,59,45,0.90) 100%
            ) !important;
    }

    .hero-content {
        max-width: 92% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .hero-content h1,
    .hero-title {
        font-size: 2.25rem !important;
    }

    .hero-content p,
    .hero-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }

    .hero .btn,
    .hero-content .btn {
        padding: 12px 24px !important;
    }
}/* =========================================================
   ZOBTY — MASTER LUXURY BRAND SYSTEM
   Premium Natural Food / Dry Fruits
   ========================================================= */

:root {
    --zobty-ivory: #F7F3EA;
    --zobty-cream: #FCFAF5;
    --zobty-olive: #68735A;
    --zobty-olive-dark: #3F4A39;
    --zobty-espresso: #382A23;
    --zobty-champagne: #B89A61;
    --zobty-champagne-light: #D8C18E;
    --zobty-charcoal: #292725;
    --zobty-white: #FFFFFF;

    --zobty-radius: 16px;
    --zobty-shadow:
        0 12px 35px rgba(56, 42, 35, 0.09);

    --zobty-shadow-hover:
        0 22px 55px rgba(56, 42, 35, 0.16);
}


/* =========================================================
   GLOBAL
   ========================================================= */

body {
    background: var(--zobty-cream) !important;
    color: var(--zobty-charcoal) !important;
    font-family: 'Poppins', sans-serif !important;
}

h1,
h2,
h3,
h4 {
    font-family: 'Playfair Display', serif !important;
}

.section {
    background: var(--zobty-cream) !important;
}

.section-title {
    color: var(--zobty-espresso) !important;
    font-weight: 700 !important;
}

.section-subtitle {
    color: #777067 !important;
}


/* =========================================================
   NAVBAR — LUXURY
   ========================================================= */

.navbar {
    background: rgba(247, 243, 234, 0.97) !important;
    border-bottom: 1px solid rgba(184, 154, 97, 0.20) !important;
    box-shadow: 0 4px 25px rgba(56, 42, 35, 0.07) !important;
}

.nav-container {
    min-height: 82px !important;
}

.logo {
    color: var(--zobty-espresso) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
}

.logo span {
    color: var(--zobty-champagne) !important;
}

.nav-link {
    color: var(--zobty-espresso) !important;
    font-weight: 600 !important;
}

.nav-link:hover,
.nav-link.active {
    color: var(--zobty-olive) !important;
}

.icon-link {
    color: var(--zobty-espresso) !important;
}

.icon-link:hover {
    color: var(--zobty-champagne) !important;
}

.cart-count {
    background: var(--zobty-champagne) !important;
    color: #fff !important;
}


/* =========================================================
   HERO — MAIN BRAND EXPERIENCE
   ========================================================= */

.hero-slider {
    position: relative !important;
    min-height: 650px !important;
    height: 78vh !important;
    max-height: 780px !important;
    overflow: hidden !important;
    background: var(--zobty-espresso) !important;
}

.hero-slider video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: saturate(0.88) contrast(1.03) !important;
}


/* Override old inline black overlay */
.hero-slider .hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(56, 42, 35, 0.88) 0%,
            rgba(56, 42, 35, 0.68) 35%,
            rgba(56, 42, 35, 0.28) 68%,
            rgba(56, 42, 35, 0.08) 100%
        ) !important;
}


/* HERO CONTENT */

.hero-slider .hero-content {
    max-width: 610px !important;
    width: 88% !important;
    z-index: 5 !important;
}

.hero-title {
    color: #FFFDF8 !important;
    font-size: clamp(3rem, 5vw, 5.4rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -1.5px !important;
    font-weight: 800 !important;
    margin-bottom: 24px !important;
    text-shadow: 0 5px 30px rgba(0,0,0,0.22) !important;
}

.hero-title span {
    color: var(--zobty-champagne-light) !important;
}

.hero-text {
    color: rgba(255,255,255,0.91) !important;
    font-size: 1.08rem !important;
    line-height: 1.85 !important;
    max-width: 570px !important;
    margin-bottom: 32px !important;
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.hero-btns .btn {
    min-height: 52px !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    transition: all 0.3s ease !important;
}

.hero-btns .btn-primary {
    background: var(--zobty-champagne) !important;
    border: 1px solid var(--zobty-champagne) !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18) !important;
}

.hero-btns .btn-primary:hover {
    background: var(--zobty-champagne-light) !important;
    border-color: var(--zobty-champagne-light) !important;
    color: var(--zobty-espresso) !important;
    transform: translateY(-3px) !important;
}

.hero-btns .btn-outline {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.65) !important;
    color: #fff !important;
    backdrop-filter: blur(8px) !important;
}

.hero-btns .btn-outline:hover {
    background: rgba(255,255,255,0.94) !important;
    color: var(--zobty-espresso) !important;
    border-color: #fff !important;
    transform: translateY(-3px) !important;
}


/* =========================================================
   CATEGORY SECTION
   ========================================================= */

.category-grid {
    gap: 24px !important;
}

.category-card {
    border-radius: var(--zobty-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--zobty-shadow) !important;
    background: var(--zobty-white) !important;
    border: 1px solid rgba(184,154,97,0.13) !important;
    transition: all 0.4s ease !important;
}

.category-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--zobty-shadow-hover) !important;
}

.category-card img {
    transition: transform 0.7s ease !important;
}

.category-card:hover img {
    transform: scale(1.06) !important;
}

.category-overlay {
    background:
        linear-gradient(
            180deg,
            transparent 20%,
            rgba(56,42,35,0.90) 100%
        ) !important;
}

.category-overlay h3 {
    color: #fff !important;
    letter-spacing: 1.5px !important;
}

.category-overlay p {
    color: rgba(255,255,255,0.84) !important;
}

.category-btn {
    color: var(--zobty-champagne-light) !important;
}


/* =========================================================
   PRODUCTS
   ========================================================= */

#products-container {
    background: transparent !important;
}

.product-card {
    background: #fff !important;
    border: 1px solid rgba(184,154,97,0.14) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 28px rgba(56,42,35,0.07) !important;
    overflow: hidden !important;
    transition: all 0.35s ease !important;
}

.product-card:hover {
    transform: translateY(-7px) !important;
    box-shadow: var(--zobty-shadow-hover) !important;
}

.product-card h3,
.product-card .product-name {
    color: var(--zobty-espresso) !important;
}

.product-card .price,
.product-card .product-price {
    color: var(--zobty-olive-dark) !important;
    font-weight: 700 !important;
}

.product-card button,
.product-card .btn {
    background: var(--zobty-olive-dark) !important;
    border-color: var(--zobty-olive-dark) !important;
    color: #fff !important;
    border-radius: 8px !important;
}

.product-card button:hover,
.product-card .btn:hover {
    background: var(--zobty-champagne) !important;
    border-color: var(--zobty-champagne) !important;
}


/* =========================================================
   WHY ZOBTY
   ========================================================= */

.why-us {
    background:
        linear-gradient(
            180deg,
            #F7F3EA 0%,
            #EFE9DC 100%
        ) !important;
    padding: 90px 0 !important;
}

.feature-card {
    background: rgba(255,255,255,0.82) !important;
    border: 1px solid rgba(184,154,97,0.16) !important;
    border-radius: 18px !important;
    padding: 32px 24px !important;
    box-shadow: 0 8px 28px rgba(56,42,35,0.06) !important;
    transition: all 0.35s ease !important;
}

.feature-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--zobty-shadow-hover) !important;
}

.feature-icon {
    color: var(--zobty-champagne) !important;
}

.feature-card h3 {
    color: var(--zobty-espresso) !important;
}

.feature-card p {
    color: #746D64 !important;
}


/* =========================================================
   DISCOUNT / OFFER
   ========================================================= */

section[style*="2c1810"] {
    background:
        linear-gradient(
            135deg,
            #382A23 0%,
            #59624A 100%
        ) !important;

    border-top: 1px solid rgba(216,193,142,0.25) !important;
    border-bottom: 1px solid rgba(216,193,142,0.25) !important;
}

section[style*="2c1810"] h2 {
    color: #FFFDF8 !important;
}

section[style*="2c1810"] p {
    color: rgba(255,255,255,0.86) !important;
}

section[style*="2c1810"] #promo-code {
    color: var(--zobty-champagne-light) !important;
}

section[style*="2c1810"] button {
    color: var(--zobty-espresso) !important;
}

section[style*="2c1810"] > div > a {
    border-color: rgba(255,255,255,0.75) !important;
}

section[style*="2c1810"] > div > a:hover {
    background: #fff !important;
    color: var(--zobty-espresso) !important;
}


/* =========================================================
   REVIEWS
   ========================================================= */

.reviews-section {
    background: var(--zobty-cream) !important;
}

.review-card-premium {
    background: transparent !important;
}

.review-inner-box {
    background: #fff !important;
    border: 1px solid rgba(184,154,97,0.16) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 30px rgba(56,42,35,0.07) !important;
}

.review-stars {
    color: var(--zobty-champagne) !important;
    letter-spacing: 3px !important;
}

.review-text {
    color: #514A43 !important;
    line-height: 1.8 !important;
}

.reviewer-info h4 {
    color: var(--zobty-espresso) !important;
}

.reviewer-info span {
    color: #8A8278 !important;
}


/* Review navigation */
.reviews-section button {
    background: var(--zobty-olive-dark) !important;
    transition: all 0.3s ease !important;
}

.reviews-section button:hover {
    background: var(--zobty-champagne) !important;
    transform: translateY(-2px) !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    background:
        linear-gradient(
            135deg,
            #382A23 0%,
            #26342A 100%
        ) !important;

    color: #fff !important;
}

.footer h3 {
    color: #fff !important;
}

.footer h3 span {
    color: var(--zobty-champagne-light) !important;
}

.footer h4 {
    color: var(--zobty-champagne-light) !important;
}

.footer a:hover {
    color: var(--zobty-champagne-light) !important;
}

.footer p,
.footer a {
    color: rgba(255,255,255,0.68) !important;
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.whatsapp-float {
    box-shadow: 0 8px 25px rgba(0,0,0,0.18) !important;
    transition: all 0.3s ease !important;
}

.whatsapp-float:hover {
    transform: translateY(-4px) scale(1.04) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .hero-slider {
        min-height: 610px !important;
        height: 78vh !important;
    }

    .hero-slider .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(56,42,35,0.30) 0%,
                rgba(56,42,35,0.68) 55%,
                rgba(56,42,35,0.93) 100%
            ) !important;
    }

    .hero-slider .hero-content {
        top: 54% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 500px !important;
        text-align: center !important;
    }

    .hero-title {
        font-size: 2.55rem !important;
        line-height: 1.08 !important;
        letter-spacing: -0.7px !important;
        margin-bottom: 18px !important;
    }

    .hero-text {
        font-size: 0.93rem !important;
        line-height: 1.7 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-btns {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .hero-btns .btn {
        min-height: 48px !important;
        padding: 12px 20px !important;
        font-size: 0.82rem !important;
    }

    .category-grid {
        gap: 14px !important;
    }

    .feature-card {
        padding: 25px 18px !important;
    }

    section[style*="2c1810"] h2 {
        font-size: 2rem !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hero-slider {
        min-height: 590px !important;
    }

    .hero-title {
        font-size: 2.15rem !important;
    }

    .hero-text {
        font-size: 0.88rem !important;
    }

    .hero-btns .btn {
        width: 100% !important;
    }
}```css
/* =========================================================
   ZOBTY — LUXURY HERO V2
   ========================================================= */

.zobty-luxury-hero {
  position: relative !important;
  min-height: 720px !important;
  height: 88vh !important;
  max-height: 900px !important;
  overflow: hidden !important;
  background: #382A23 !important;
  isolation: isolate;
}

/* VIDEO */

.zobty-hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: -3 !important;
  filter: brightness(.72) saturate(.9) contrast(1.05) !important;
  transform: scale(1.02);
}

/* DARK LUXURY SHADE */

.zobty-hero-shade {
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;

  background:
    linear-gradient(
      90deg,
      rgba(35,28,23,.94) 0%,
      rgba(50,40,31,.78) 34%,
      rgba(50,40,31,.30) 68%,
      rgba(35,28,23,.08) 100%
    ) !important;
}

/* SOFT GOLD LIGHT */

.zobty-hero-glow {
  position: absolute;
  width: 650px;
  height: 650px;
  right: -180px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(216,193,142,.20) 0%,
    rgba(216,193,142,.07) 35%,
    transparent 70%
  );

  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}

/* CONTENT */

.zobty-hero-content {
  position: relative !important;
  z-index: 5 !important;

  width: min(1180px, 90%);
  margin: 0 auto;

  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  padding-top: 35px;
}

/* SMALL TOP LABEL */

.zobty-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;

  color: #D8C18E;

  font-family: 'Poppins', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 4px;

  margin-bottom: 24px;

  animation: zobtyHeroFade .9s ease both;
}

.zobty-hero-eyebrow span {
  display: block;
  width: 32px;
  height: 1px;
  background: #D8C18E;
}

/* MAIN HEADING */

.zobty-hero-content h1 {
  max-width: 720px;

  margin: 0;

  color: #F7F3EA;

  font-family: 'Playfair Display', serif;

  font-size: clamp(3.4rem, 6.5vw, 6.5rem);

  line-height: .98;
  font-weight: 600;
  letter-spacing: -2px;

  animation: zobtyHeroTitle .9s .1s ease both;
}

.zobty-hero-content h1 strong {
  display: block;

  color: #D8C18E;

  font-weight: 600;
}

/* DESCRIPTION */

.zobty-hero-content p {
  max-width: 570px;

  margin: 30px 0 0;

  color: rgba(247,243,234,.84);

  font-family: 'Poppins', sans-serif;

  font-size: 1rem;
  line-height: 1.9;
  font-weight: 300;

  animation: zobtyHeroFade 1s .25s ease both;
}

/* BUTTONS */

.zobty-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-top: 34px;

  animation: zobtyHeroFade 1s .35s ease both;
}

.zobty-hero-primary,
.zobty-hero-secondary {
  min-height: 56px;

  padding: 0 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  text-decoration: none;

  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .5px;

  transition: all .35s ease;
}

.zobty-hero-primary {
  color: #382A23;
  background: #D8C18E;

  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.zobty-hero-primary:hover {
  background: #F0DCA9;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.zobty-hero-primary i {
  transition: transform .3s ease;
}

.zobty-hero-primary:hover i {
  transform: translateX(5px);
}

.zobty-hero-secondary {
  color: #F7F3EA;
  border: 1px solid rgba(247,243,234,.55);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
}

.zobty-hero-secondary:hover {
  background: rgba(255,255,255,.12);
  border-color: #D8C18E;
  transform: translateY(-3px);
}

/* TRUST ROW */

.zobty-hero-trust {
  display: flex;
  align-items: center;
  gap: 30px;

  margin-top: 48px;

  padding-top: 22px;

  border-top: 1px solid rgba(247,243,234,.20);

  animation: zobtyHeroFade 1s .5s ease both;
}

.zobty-hero-trust div {
  display: flex;
  align-items: center;
  gap: 9px;

  color: rgba(247,243,234,.72);

  font-family: 'Poppins', sans-serif;
  font-size: .72rem;
}

.zobty-hero-trust i {
  color: #D8C18E;
  font-size: .85rem;
}

/* SCROLL INDICATOR */

.zobty-hero-scroll {
  position: absolute;
  right: 38px;
  bottom: 35px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;

  color: rgba(247,243,234,.60);

  font-size: .58rem;
  letter-spacing: 3px;

  z-index: 6;
}

.zobty-hero-scroll i {
  color: #D8C18E;
  animation: zobtyScroll 1.8s ease-in-out infinite;
}

/* ANIMATIONS */

@keyframes zobtyHeroFade {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

@keyframes zobtyHeroTitle {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes zobtyScroll {
  0%,100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(7px);
  }
}


/* =========================================================
   MOBILE HERO
   ========================================================= */

@media (max-width: 768px) {

  .zobty-luxury-hero {
    min-height: 680px !important;
    height: 88vh !important;
  }

  .zobty-hero-video {
    object-position: 58% center !important;
  }

  .zobty-hero-shade {
    background:
      linear-gradient(
        180deg,
        rgba(35,28,23,.58) 0%,
        rgba(35,28,23,.70) 42%,
        rgba(35,28,23,.95) 100%
      ) !important;
  }

  .zobty-hero-glow {
    width: 400px;
    height: 400px;
    right: -180px;
    top: 35%;
  }

  .zobty-hero-content {
    width: 88%;
    padding-top: 45px;
  }

  .zobty-hero-eyebrow {
    font-size: .58rem;
    letter-spacing: 2.5px;
    gap: 8px;
    margin-bottom: 18px;
  }

  .zobty-hero-eyebrow span {
    width: 20px;
  }

  .zobty-hero-content h1 {
    font-size: clamp(3rem, 13vw, 4.5rem);
    letter-spacing: -1px;
    line-height: 1;
  }

  .zobty-hero-content p {
    margin-top: 22px;
    font-size: .84rem;
    line-height: 1.7;
    max-width: 390px;
  }

  .zobty-hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 27px;
  }

  .zobty-hero-primary,
  .zobty-hero-secondary {
    width: 100%;
    min-height: 52px;
  }

  .zobty-hero-trust {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
    margin-top: 28px;
    padding-top: 17px;
  }

  .zobty-hero-trust div {
    flex-direction: column;
    gap: 5px;
    text-align: center;
    font-size: .55rem;
  }

  .zobty-hero-trust i {
    font-size: .8rem;
  }

  .zobty-hero-scroll {
    display: none;
  }
}


/* VERY SMALL PHONES */

@media (max-width: 390px) {

  .zobty-luxury-hero {
    min-height: 650px !important;
  }

  .zobty-hero-content h1 {
    font-size: 2.8rem;
  }

  .zobty-hero-content p {
    font-size: .78rem;
  }

  .zobty-hero-trust div {
    font-size: .49rem;
  }
}
```css
/* =========================================================
   ZOBTY HERO — VIDEO + CLEAN NATURAL COLOR FIX
   ========================================================= */

/* اصل ویڈیو کو دوبارہ واضح کریں */
.zobty-luxury-hero {
  background: #68735A !important;
}

.zobty-hero-video {
  opacity: 1 !important;
  filter: brightness(.92) saturate(1.08) contrast(1.02) !important;
  transform: scale(1.01) !important;
}

/* Brown/dark overlay ختم — صرف ہلکی readable layer */
.zobty-hero-shade {
  background:
    linear-gradient(
      90deg,
      rgba(25,32,25,.58) 0%,
      rgba(25,32,25,.32) 38%,
      rgba(25,32,25,.10) 70%,
      rgba(25,32,25,.02) 100%
    ) !important;
}

/* glow بہت subtle */
.zobty-hero-glow {
  background: radial-gradient(
    circle,
    rgba(216,193,142,.12) 0%,
    rgba(216,193,142,.035) 38%,
    transparent 70%
  ) !important;
}


/* MOBILE */
@media (max-width: 768px) {

  .zobty-hero-video {
    opacity: 1 !important;
    filter: brightness(.88) saturate(1.08) contrast(1.02) !important;
  }

  .zobty-hero-shade {
    background:
      linear-gradient(
        180deg,
        rgba(25,32,25,.20) 0%,
        rgba(25,32,25,.38) 48%,
        rgba(25,32,25,.72) 100%
      ) !important;
  }
}


/* ZOBTY HERO VIDEO — FINAL VISIBILITY TEST */

.zobty-luxury-hero {
    position: relative !important;
    background: transparent !important;
    overflow: hidden !important;
}

.zobty-hero-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
}

/* Test کے لیے دونوں decorative layers چھپا دیں */
.zobty-hero-shade,
.zobty-hero-glow {
    display: none !important;
}

.zobty-hero-content {
    position: relative !important;
    z-index: 10 !important;
}

.zobty-hero-scroll {
    z-index: 10 !important;
}/* =========================================================
   ZOBTY — FINAL NATURAL VIDEO OVERLAY
   ========================================================= */

.zobty-hero-shade {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(25, 35, 27, 0.48) 0%,
            rgba(25, 35, 27, 0.25) 38%,
            rgba(25, 35, 27, 0.08) 70%,
            rgba(25, 35, 27, 0.00) 100%
        ) !important;
}

.zobty-hero-glow {
    display: block !important;
    position: absolute !important;
    width: 520px !important;
    height: 520px !important;
    right: -180px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
    pointer-events: none !important;

    background: radial-gradient(
        circle,
        rgba(216, 193, 142, 0.10) 0%,
        rgba(216, 193, 142, 0.03) 40%,
        transparent 70%
    ) !important;
}

.zobty-hero-content {
    position: relative !important;
    z-index: 10 !important;
}

.zobty-hero-scroll {
    z-index: 10 !important;
}


/* MOBILE */

@media (max-width: 768px) {

    .zobty-hero-shade {
        background:
            linear-gradient(
                180deg,
                rgba(25, 35, 27, 0.18) 0%,
                rgba(25, 35, 27, 0.30) 50%,
                rgba(25, 35, 27, 0.62) 100%
            ) !important;
    }

    .zobty-hero-glow {
        width: 350px !important;
        height: 350px !important;
        right: -170px !important;
    }
}```css
/* =========================================================
   ZOBTY — PREMIUM TRUST STRIP
   ========================================================= */

.zobty-trust-strip {
    position: relative;
    z-index: 20;

    width: min(1180px, 92%);
    min-height: 112px;

    margin: -1px auto 0;

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

    padding: 22px 34px;

    background: #FCFAF5;

    border: 1px solid rgba(104, 115, 90, .18);

    box-shadow: 0 18px 45px rgba(56, 42, 35, .10);

    border-radius: 0 0 18px 18px;
}

.zobty-trust-item {
    display: flex;
    align-items: center;
    gap: 14px;

    flex: 1;
}

.zobty-trust-icon {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

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

    border-radius: 50%;

    color: #68735A;

    background: #F2EEE3;

    border: 1px solid rgba(184, 154, 97, .28);

    font-size: 16px;
}

.zobty-trust-item strong {
    display: block;

    color: #3F4A39;

    font-family: 'Poppins', sans-serif;

    font-size: .78rem;
    font-weight: 600;

    letter-spacing: .2px;
}

.zobty-trust-item span {
    display: block;

    margin-top: 4px;

    color: #77736C;

    font-family: 'Poppins', sans-serif;

    font-size: .65rem;
    font-weight: 400;
}

.zobty-trust-divider {
    width: 1px;
    height: 42px;

    margin: 0 25px;

    background: rgba(104, 115, 90, .18);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .zobty-trust-strip {
        width: 92%;
        min-height: auto;

        margin: 0 auto;

        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 0;

        padding: 8px;

        border-radius: 16px;

        box-shadow: 0 12px 30px rgba(56, 42, 35, .09);
    }

    .zobty-trust-item {
        min-height: 72px;

        padding: 10px;

        gap: 9px;
    }

    .zobty-trust-icon {
        width: 36px;
        height: 36px;

        font-size: 12px;
    }

    .zobty-trust-item strong {
        font-size: .61rem;
    }

    .zobty-trust-item span {
        font-size: .52rem;
        margin-top: 2px;
    }

    .zobty-trust-divider {
        display: none;
    }

    .zobty-trust-item:nth-child(3),
    .zobty-trust-item:nth-child(7) {
        border-left: 1px solid rgba(104, 115, 90, .14);
    }

    .zobty-trust-item:nth-child(5),
    .zobty-trust-item:nth-child(7) {
        border-top: 1px solid rgba(104, 115, 90, .14);
    }
}

/* =========================================================
   ZOBTY — PREMIUM CATEGORY SHOWCASE
   ========================================================= */

.zobty-category-showcase {
    position: relative;
    width: min(1240px, 92%);
    margin: 0 auto;
    padding: 105px 0 80px;
}

.zobty-category-heading {
    max-width: 680px;
    margin-bottom: 42px;
}

.zobty-category-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;

    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #68735A;
}

.zobty-category-heading > span::before {
    content: "";
    width: 28px;
    height: 1px;
    background: #B89A61;
}

.zobty-category-heading h2 {
    margin: 0;
    color: #382A23;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -1px;
}

.zobty-category-heading p {
    margin: 16px 0 0;
    max-width: 520px;
    color: #77736C;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.8;
}

/* GRID */

.zobty-category-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: 250px 250px;
    gap: 18px;
}

.zobty-category-card {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 250px;

    border-radius: 20px;
    background: #E9E3D7;

    text-decoration: none;
    box-shadow: 0 14px 35px rgba(56, 42, 35, 0.10);

    isolation: isolate;
}

.zobty-category-large {
    grid-row: 1 / 3;
}

.zobty-category-card img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(.2,.7,.2,1),
        filter 0.8s ease;

    z-index: -2;
}

.zobty-category-card::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(25, 25, 20, 0.02) 20%,
            rgba(25, 25, 20, 0.18) 48%,
            rgba(25, 25, 20, 0.82) 100%
        );

    z-index: -1;
}

.zobty-category-card:hover img {
    transform: scale(1.07);
    filter: saturate(1.08);
}

/* CONTENT */

.zobty-category-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 25px;
    color: #fff;
}

.zobty-category-overlay > span {
    align-self: flex-end;

    width: 34px;
    height: 34px;

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

    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50%;

    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    letter-spacing: 1px;

    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
}

.zobty-category-overlay h3 {
    margin: 0 0 5px;

    font-family: 'Playfair Display', serif;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 700;

    color: #fff;
}

.zobty-category-overlay p {
    margin: 0 0 16px;

    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    letter-spacing: .5px;

    color: rgba(255,255,255,.78);
}

.zobty-category-overlay b {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .5px;

    color: #D8C18E;
}

.zobty-category-overlay b i {
    transition: transform .3s ease;
}

.zobty-category-card:hover .zobty-category-overlay b i {
    transform: translateX(5px);
}

/* BOTTOM LINE */

.zobty-category-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 25px;
    padding-top: 20px;

    border-top: 1px solid rgba(104,115,90,.16);
}

.zobty-category-bottom span {
    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    color: #99948B;
}

.zobty-category-bottom a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #3F4A39;
    text-decoration: none;

    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;

    transition: gap .3s ease;
}

.zobty-category-bottom a:hover {
    gap: 15px;
}

/* MOBILE */

@media (max-width: 768px) {

    .zobty-category-showcase {
        width: 92%;
        padding: 70px 0 55px;
    }

    .zobty-category-heading {
        margin-bottom: 25px;
    }

    .zobty-category-heading h2 {
        font-size: 2.15rem;
    }

    .zobty-category-heading p {
        font-size: 11px;
        line-height: 1.7;
    }

    .zobty-category-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 280px 210px;
        gap: 10px;
    }

    .zobty-category-large {
        grid-column: 1 / 3;
        grid-row: auto;
    }

    .zobty-category-card {
        min-height: 0;
        border-radius: 15px;
    }

    .zobty-category-overlay {
        padding: 16px;
    }

    .zobty-category-overlay > span {
        width: 28px;
        height: 28px;
        font-size: 8px;
    }

    .zobty-category-overlay h3 {
        font-size: 1.45rem;
    }

    .zobty-category-overlay p {
        font-size: 8px;
        margin-bottom: 10px;
    }

    .zobty-category-overlay b {
        font-size: 8px;
    }

    .zobty-category-bottom {
        margin-top: 18px;
        padding-top: 16px;
    }

    .zobty-category-bottom span {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .zobty-category-bottom a {
        font-size: 9px;
    }
}/* =========================================================
   ZOBTY PREMIUM PRODUCTS — STEP 2
   ========================================================= */

.zobty-products-showcase {
    width: min(1240px, 92%);
    margin: 0 auto;
    padding: 95px 0 90px;
}

.zobty-products-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 14px;
}

.zobty-products-heading span {
    display: block;
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #68735A;
}

.zobty-products-heading span::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 1px;
    margin-right: 10px;
    vertical-align: middle;
    background: #B89A61;
}

.zobty-products-heading h2 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.3rem, 4vw, 3.6rem);
    line-height: 1.05;
    color: #382A23;
    letter-spacing: -1px;
}

.zobty-products-intro {
    max-width: 560px;
    margin: 0 0 38px;
    color: #77736C;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.8;
}

.zobty-products-view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(56,42,35,.35);
    color: #382A23;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    transition: all .3s ease;
}

.zobty-products-view-all i {
    transition: transform .3s ease;
}

.zobty-products-view-all:hover {
    color: #68735A;
    border-color: #B89A61;
}

.zobty-products-view-all:hover i {
    transform: translateX(5px);
}


/* Product grid */
.zobty-products-showcase #products-container {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}


/* Product cards */
.zobty-products-showcase #products-container .product-card {
    position: relative;
    overflow: hidden;
    background: #FCFAF5;
    border: 1px solid rgba(56,42,35,.08);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(56,42,35,.07);
    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}

.zobty-products-showcase #products-container .product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(184,154,97,.35);
    box-shadow: 0 22px 50px rgba(56,42,35,.14);
}


/* Product image */
.zobty-products-showcase #products-container .product-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

.zobty-products-showcase #products-container .product-card:hover img {
    transform: scale(1.05);
}


/* Product information */
.zobty-products-showcase #products-container .product-card h3 {
    margin: 18px 18px 6px;
    color: #382A23;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
}

.zobty-products-showcase #products-container .product-card p {
    margin: 0 18px 15px;
    color: #77736C;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    line-height: 1.6;
}


/* Buttons */
.zobty-products-showcase #products-container .product-card button,
.zobty-products-showcase #products-container .product-card .btn {
    margin: 0 18px 20px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}


/* Mobile */
@media (max-width: 900px) {

    .zobty-products-showcase {
        padding: 70px 0 60px;
    }

    .zobty-products-showcase #products-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .zobty-products-showcase #products-container .product-card img {
        height: 210px;
    }
}

@media (max-width: 600px) {

    .zobty-products-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .zobty-products-heading h2 {
        font-size: 2.15rem;
    }

    .zobty-products-intro {
        font-size: 11px;
        margin-bottom: 25px;
    }

    .zobty-products-showcase #products-container {
        gap: 10px;
    }

    .zobty-products-showcase #products-container .product-card {
        border-radius: 14px;
    }

    .zobty-products-showcase #products-container .product-card img {
        height: 175px;
    }

    .zobty-products-showcase #products-container .product-card h3 {
        margin: 13px 12px 5px;
        font-size: 16px;
    }

    .zobty-products-showcase #products-container .product-card p {
        margin: 0 12px 12px;
        font-size: 9px;
    }

    .zobty-products-showcase #products-container .product-card button,
    .zobty-products-showcase #products-container .product-card .btn {
        margin: 0 12px 14px;
        font-size: 10px;
    }
}/* ===== ZOBTY PRODUCT CARDS — LUXURY UPGRADE ===== */

.zobty-products-showcase #products-container .product-card {
    background: linear-gradient(
        145deg,
        #fffdf8 0%,
        #f7f3ea 100%
    ) !important;
    border: 1px solid rgba(184,154,97,.18) !important;
    box-shadow:
        0 8px 25px rgba(56,42,35,.06),
        inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.zobty-products-showcase #products-container .product-card::before {
    content: "ZOBTY";
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    padding: 5px 9px;
    border-radius: 20px;
    background: rgba(252,250,245,.88);
    border: 1px solid rgba(184,154,97,.25);
    color: #68735A;
    font-family: 'Poppins', sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.5px;
    backdrop-filter: blur(8px);
}

.zobty-products-showcase #products-container .product-card img {
    background: #eee8dc;
    transition:
        transform .8s cubic-bezier(.2,.7,.2,1),
        filter .5s ease !important;
}

.zobty-products-showcase #products-container .product-card:hover img {
    transform: scale(1.06) !important;
    filter: saturate(1.05) contrast(1.02);
}

.zobty-products-showcase #products-container .product-card h3 {
    color: #30251f !important;
    letter-spacing: -.2px;
}

.zobty-products-showcase #products-container .product-card:hover {
    border-color: rgba(184,154,97,.45) !important;
    transform: translateY(-10px) !important;
    box-shadow:
        0 25px 55px rgba(56,42,35,.13),
        0 2px 0 rgba(184,154,97,.18) !important;
}

/* Mobile refinement */
@media (max-width: 600px) {
    .zobty-products-showcase #products-container .product-card::before {
        top: 9px;
        left: 9px;
        padding: 4px 7px;
        font-size: 6px;
    }
}/* =========================================================
   ZUBOTI — 3D LUXURY LAYER
   Load order:  ... aap ki purani CSS  →  zuboti-3d-premium.css  →  zuboti-fixes.css (sab se aakhir)
   Optional:    zuboti-tilt.js  (mouse ke sath asli 3D tilt + chamak)
   Kisi class ka naam nahi badla, sirf upar se style add hui hai.
   ========================================================= */

:root {
    --zb-cream: #FCFAF5;
    --zb-ivory: #F7F3EA;
    --zb-olive: #68735A;
    --zb-olive-d: #3F4A39;
    --zb-espresso: #382A23;
    --zb-gold: #B89A61;
    --zb-gold-l: #D8C18E;
    --zb-ease: cubic-bezier(.2, .7, .2, 1);
    --zb-depth: 0 2px 4px rgba(56,42,35,.06), 0 14px 28px rgba(56,42,35,.10), 0 36px 64px -14px rgba(56,42,35,.24);
    --zb-depth-up: 0 4px 8px rgba(56,42,35,.08), 0 24px 44px rgba(56,42,35,.16), 0 56px 90px -16px rgba(56,42,35,.34), 0 0 0 1px rgba(184,154,97,.45);
}

html { scroll-behavior: smooth; }
body {
    background:
        radial-gradient(900px 500px at 8% -5%, rgba(216,193,142,.22), transparent 60%),
        radial-gradient(800px 500px at 100% 30%, rgba(104,115,90,.13), transparent 60%),
        var(--zb-cream) !important;
}

/* =========================================================
   1. HERO — gehraai, chamakta gold, 3D "key" buttons
   ========================================================= */
.zobty-luxury-hero .zobty-hero-video { animation: zbKen 26s ease-in-out infinite alternate; }
@keyframes zbKen { from { transform: scale(1.02); } to { transform: scale(1.11); } }

.zobty-hero-glow { animation: zbFloat 10s ease-in-out infinite; }
@keyframes zbFloat {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50%      { transform: translateY(-56%) translateX(-24px); }
}

.zobty-hero-content { padding-bottom: 72px; }
.zobty-hero-content h1,
.zobty-hero-content p { text-shadow: 0 2px 24px rgba(12,18,12,.55); }

.zobty-hero-content h1 strong {
    background: linear-gradient(100deg, #B89A61 0%, #F6E7B8 38%, #D8C18E 55%, #B89A61 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,.35));
    animation: zbShimmer 7s linear infinite;
}
@keyframes zbShimmer { to { background-position: -240% 0; } }

.zobty-hero-eyebrow {
    padding: 9px 16px; border-radius: 999px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(216,193,142,.35);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* 3D keyboard-key buttons: dabane par asli neeche dabte hain */
.zobty-hero-primary {
    border-radius: 14px;
    background: linear-gradient(180deg, #F3E2B4 0%, #D8C18E 55%, #C2A765 100%);
    box-shadow: 0 6px 0 #9A8045, 0 18px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.65);
}
.zobty-hero-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 0 #9A8045, 0 26px 44px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.7);
}
.zobty-hero-primary:active {
    transform: translateY(5px);
    box-shadow: 0 1px 0 #9A8045, 0 6px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5);
}
.zobty-hero-secondary {
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 18px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.3);
}
.zobty-hero-secondary:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }

.zobty-hero-trust {
    padding: 16px 22px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
}

/* =========================================================
   2. TRUST STRIP — hero ke upar tairta hua glass card
   ========================================================= */
.zobty-trust-strip {
    margin-top: -58px; border-radius: 22px;
    background: linear-gradient(180deg, #FFFFFF, var(--zb-cream));
    border: 1px solid rgba(184,154,97,.28);
    box-shadow: var(--zb-depth);
}
.zobty-trust-icon {
    background: linear-gradient(145deg, #FFFFFF, #EEE7D6);
    box-shadow: 0 8px 16px rgba(56,42,35,.14), inset 0 2px 0 #fff, inset 0 -2px 0 rgba(184,154,97,.3);
    transition: transform .4s var(--zb-ease), box-shadow .4s;
}
.zobty-trust-item:hover .zobty-trust-icon {
    transform: translateY(-4px) rotateY(180deg);
    box-shadow: 0 14px 24px rgba(56,42,35,.2), inset 0 2px 0 #fff;
}

/* =========================================================
   3. CATEGORY SHOWCASE — 3D tilt cards
   ========================================================= */
.zobty-category-showcase, .zobty-products-showcase { isolation: isolate; }
.zobty-category-showcase::before, .zobty-products-showcase::before {
    content: ""; position: absolute; inset: 0 -3%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(520px 320px at 10% 18%, rgba(216,193,142,.28), transparent 70%),
        radial-gradient(520px 360px at 92% 72%, rgba(104,115,90,.18), transparent 70%);
}
.zobty-category-grid { perspective: 1600px; }

.zobty-category-card {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .55s var(--zb-ease), box-shadow .55s var(--zb-ease);
    box-shadow: var(--zb-depth);
    will-change: transform;
}
.zobty-category-card:hover {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-10px) scale(1.015);
    transition: transform .12s ease-out, box-shadow .5s var(--zb-ease);
    box-shadow: var(--zb-depth-up);
}
.zobty-category-card img {
    transform: scale(1.08) translate(calc(var(--px, 0) * -9px), calc(var(--py, 0) * -9px));
    transition: transform .6s var(--zb-ease), filter .6s;
}
.zobty-category-card:hover img { transform: scale(1.14) translate(calc(var(--px, 0) * -9px), calc(var(--py, 0) * -9px)); }

/* andar ka sunehri frame + chamak */
.zobty-category-card::before {
    content: ""; position: absolute; inset: 10px; z-index: 1; pointer-events: none;
    border: 1px solid rgba(216,193,142,0); border-radius: 14px;
    transition: border-color .5s, inset .5s var(--zb-ease);
}
.zobty-category-card:hover::before { border-color: rgba(216,193,142,.7); inset: 14px; }
.zobty-category-overlay::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.28), transparent 60%);
}
.zobty-category-card:hover .zobty-category-overlay::before { opacity: 1; }
.zobty-category-overlay > * { position: relative; z-index: 1; }
.zobty-category-overlay > span { box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.4); }
.zobty-category-overlay h3 { text-shadow: 0 4px 22px rgba(0,0,0,.55); }

/* =========================================================
   4. PRODUCTS — layered 3D cards
   ========================================================= */
.zobty-products-showcase #products-container { perspective: 1600px; }

.zobty-products-showcase #products-container .product-card.product-card {
    --rx: 0deg; --ry: 0deg;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    border-radius: 20px;
    background: linear-gradient(160deg, #FFFFFF 0%, #FBF8F0 55%, #F3EDDF 100%) !important;
    border: 1px solid rgba(184,154,97,.22) !important;
    box-shadow: var(--zb-depth), inset 0 1px 0 #fff !important;
    transition: transform .55s var(--zb-ease), box-shadow .55s var(--zb-ease), border-color .4s !important;
    will-change: transform;
}
.zobty-products-showcase #products-container .product-card.product-card:hover {
    transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-12px) scale(1.02) !important;
    transition: transform .12s ease-out, box-shadow .5s var(--zb-ease), border-color .4s !important;
    box-shadow: var(--zb-depth-up), inset 0 1px 0 #fff !important;
}
/* chamak jo mouse ka peecha kare */
.zobty-products-showcase #products-container .product-card::after {
    content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
    opacity: 0; transition: opacity .35s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.42), transparent 55%);
}
.zobty-products-showcase #products-container .product-card:hover::after { opacity: 1; }

.zobty-products-showcase #products-container .product-card::before { content: var(--zb-badge, "ZOBTY"); box-shadow: 0 6px 14px rgba(56,42,35,.12); }

.zobty-products-showcase #products-container .product-card.product-card:hover img {
    transform: scale(1.1) translate(calc(var(--px, 0) * -8px), calc(var(--py, 0) * -8px)) !important;
}
.zobty-products-showcase #products-container .product-card h3 { text-shadow: 0 1px 0 #fff; }
.zobty-products-showcase #products-container .product-price {
    color: var(--zb-olive-d) !important; font-weight: 800 !important; letter-spacing: -.2px;
}

/* wazan ke pill buttons */
.zobty-products-showcase #products-container .weight-btn {
    border-radius: 999px; background: linear-gradient(180deg, #fff, #F4EFE2);
    border: 1px solid rgba(184,154,97,.35); box-shadow: 0 2px 0 rgba(184,154,97,.25);
    transition: transform .25s var(--zb-ease), box-shadow .25s, background .25s;
}
.zobty-products-showcase #products-container .weight-btn.active {
    background: linear-gradient(180deg, #79866A, #4A5640) !important; color: #fff !important;
    border-color: transparent !important; box-shadow: 0 3px 0 #2E3828, 0 8px 16px rgba(63,74,57,.35) !important;
    transform: translateY(-1px);
}

/* Add to Cart (gehra) / Buy Now (gold) — 3D keys, brand-CSS ke `.product-card button` ko haraate hue */
#products-container .product-card.product-card button.btn-cart,
#products-container .product-card.product-card button.add-to-cart-btn,
#products-container .product-card.product-card button.btn-add-cart {
    background: linear-gradient(180deg, #4A5640, #2E3828) !important; color: #fff !important;
    border: 0 !important; border-radius: 12px !important;
    box-shadow: 0 4px 0 #1E261A, 0 12px 20px rgba(30,38,26,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
#products-container .product-card.product-card button.btn-buy,
#products-container .product-card.product-card button.buy-now-btn {
    background: linear-gradient(180deg, #E2C987, #B89A61) !important; color: #382A23 !important;
    border: 0 !important; border-radius: 12px !important;
    box-shadow: 0 4px 0 #8C7340, 0 12px 20px rgba(140,115,64,.32), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
#products-container .product-card.product-card button.btn-cart:hover,
#products-container .product-card.product-card button.add-to-cart-btn:hover,
#products-container .product-card.product-card button.btn-add-cart:hover,
#products-container .product-card.product-card button.btn-buy:hover,
#products-container .product-card.product-card button.buy-now-btn:hover { filter: brightness(1.1); transform: translateY(-2px) !important; }
#products-container .product-card.product-card button.btn-cart:active,
#products-container .product-card.product-card button.add-to-cart-btn:active,
#products-container .product-card.product-card button.btn-add-cart:active,
#products-container .product-card.product-card button.btn-buy:active,
#products-container .product-card.product-card button.buy-now-btn:active {
    transform: translateY(4px) !important; box-shadow: 0 0 0 transparent, 0 3px 8px rgba(0,0,0,.2) !important;
}

/* =========================================================
   5. WHY US / PROMO / REVIEWS / WHATSAPP
   ========================================================= */
.feature-card {
    box-shadow: var(--zb-depth) !important;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .5s var(--zb-ease), box-shadow .5s !important;
}
.feature-card:hover {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px) !important;
    box-shadow: var(--zb-depth-up) !important;
}
.feature-icon {
    background: linear-gradient(145deg, #F4EAD0, #D8C18E) !important; color: var(--zb-espresso) !important;
    box-shadow: 0 10px 20px rgba(184,154,97,.4), inset 0 2px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(140,115,64,.35) !important;
}

section[style*="2c1810"] { position: relative; overflow: hidden; }
section[style*="2c1810"]::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(600px 300px at 15% 20%, rgba(216,193,142,.22), transparent 70%),
                radial-gradient(500px 300px at 85% 90%, rgba(255,255,255,.10), transparent 70%);
}

.review-inner-box { box-shadow: var(--zb-depth) !important; transition: transform .45s var(--zb-ease), box-shadow .45s; }
.review-card-premium:hover .review-inner-box { transform: translateY(-8px); box-shadow: var(--zb-depth-up) !important; }

.whatsapp-float::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37,211,102,.6);
    animation: zbPing 2.4s ease-out infinite; pointer-events: none;
}
@keyframes zbPing { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }

/* =========================================================
   6. MOBILE — halka 3D (tez chale), bara touch area
   ========================================================= */
@media (max-width: 768px) {
    .zobty-hero-content { padding-bottom: 54px; }
    .zobty-trust-strip { margin-top: -38px; border-radius: 18px; }
    .zobty-hero-trust { padding: 12px 10px; border-radius: 14px; }
    .zobty-hero-primary { box-shadow: 0 5px 0 #9A8045, 0 14px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.6); }
    #products-container .product-card.product-card button.btn-cart,
    #products-container .product-card.product-card button.btn-buy,
    #products-container .product-card.product-card button.add-to-cart-btn,
    #products-container .product-card.product-card button.buy-now-btn { box-shadow: 0 3px 0 rgba(0,0,0,.28), 0 8px 14px rgba(0,0,0,.14) !important; }
}

/* Touch screen: tilt band, sirf narm gehrai wali parchhai */
@media (hover: none) {
    .zobty-category-card:hover,
    .feature-card:hover { transform: none !important; }
    .zobty-products-showcase #products-container .product-card.product-card:hover { transform: none !important; }
    .zobty-category-card:hover img { transform: scale(1.08); }
    .zobty-products-showcase #products-container .product-card.product-card:hover img { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .zobty-luxury-hero .zobty-hero-video, .zobty-hero-glow,
    .zobty-hero-content h1 strong, .whatsapp-float::after { animation: none !important; }
}/* =========================================================
   ZUBOTI — FRESH GREEN THEME (taaza sabz + saaf safaid)
   Sab se AAKHIR mein link karein (zuboti-fixes.css ke bhi baad).
   Sirf rang badalta hai. 3D, layout, menu, buttons ka kaam wahi rehta hai.
   Mood: taaza, saaf, bharosay wala (khandryfruit jaisa taaza sabz ehsaas,
   lekin Zuboti ki apni pehchan: gehra jungle-green + sunehri/amber accent).
   ========================================================= */

:root {
    --zf-green:    #4C9A16;   /* taaza sabz  — buttons, links */
    --zf-green-d:  #2F6F0F;   /* gehra sabz  — hover, price */
    --zf-forest:   #1E4620;   /* jungle sabz — logo, footer, headings */
    --zf-leaf-l:   #EAF5DC;   /* halka sabz  — pills, icons */
    --zf-amber:    #F2B636;   /* amber       — Buy Now, badges, stars */
    --zf-amber-d:  #C98F12;
    --zf-soft:     #F6F9F1;   /* section background */
    --zf-ink:      #1F2A1C;   /* text */

    /* purani CSS ke variables bhi isi rang mein */
    --primary-color: #4C9A16;
    --secondary-color: #1E4620;
    --bg-color: #F6F9F1;
    --gold: #4C9A16;
    --green: #2F6F0F;
    --green-dark: #1E4620;
    --ivory: #F6F9F1;
    --zb-cream: #FFFFFF;
    --zb-ivory: #F6F9F1;
    --zb-olive: #4C9A16;
    --zb-olive-d: #2F6F0F;
    --zb-espresso: #1E4620;
    --zb-gold: #4C9A16;
    --zb-gold-l: #A9D86E;
    --zobty-cream: #FFFFFF;
    --zobty-olive: #4C9A16;
    --zobty-olive-dark: #2F6F0F;
    --zobty-espresso: #1E4620;
    --zobty-champagne: #4C9A16;
    --zobty-champagne-light: #A9D86E;
}

/* ---------- Background ---------- */
body {
    background:
        radial-gradient(900px 500px at 5% -5%, rgba(76,154,22,.10), transparent 60%),
        radial-gradient(800px 500px at 100% 35%, rgba(242,182,54,.10), transparent 60%),
        #FFFFFF !important;
    color: var(--zf-ink) !important;
}
.section, .reviews-section { background: transparent !important; }
.why-us { background: linear-gradient(180deg, #F6F9F1 0%, #EAF3DE 100%) !important; }
.section-title, .zobty-category-heading h2, .zobty-products-heading h2 { color: var(--zf-forest) !important; }
.section-title::after { background: linear-gradient(90deg, var(--zf-green), var(--zf-amber)) !important; }
.zobty-category-heading > span, .zobty-products-heading span { color: var(--zf-green-d) !important; }
.zobty-category-heading > span::before, .zobty-products-heading span::before { background: var(--zf-amber) !important; }
.zobty-category-showcase::before, .zobty-products-showcase::before {
    background:
        radial-gradient(520px 320px at 10% 18%, rgba(76,154,22,.12), transparent 70%),
        radial-gradient(520px 360px at 92% 72%, rgba(242,182,54,.14), transparent 70%) !important;
}

/* ---------- Navbar ---------- */
.navbar {
    background: rgba(255,255,255,.96) !important;
    border-bottom: 2px solid var(--zf-green) !important;
    box-shadow: 0 6px 24px rgba(30,70,32,.10) !important;
}
.logo { color: var(--zf-forest) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.logo span { color: var(--zf-green) !important; -webkit-text-fill-color: currentColor !important; }
.nav-link, .nav-menu .nav-link { color: var(--zf-forest) !important; }
.nav-link:hover, .nav-link.active, .nav-menu .nav-link:hover, .nav-menu .nav-link.active { color: var(--zf-green) !important; }
.nav-link::after, .nav-menu .nav-link::after { background: var(--zf-green) !important; }
.icon-link, .nav-icons .icon-link { color: var(--zf-forest) !important; }
.icon-link:hover, .nav-icons .icon-link:hover { color: var(--zf-green) !important; }
.cart-count { background: var(--zf-green) !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(76,154,22,.25) !important; }
.hamburger .bar { background: var(--zf-forest) !important; }
.hamburger { border-color: rgba(76,154,22,.45) !important; background: var(--zf-leaf-l) !important; }
@media (max-width: 768px) {
    .navbar { background: #fff !important; }
    .nav-menu { background: #fff !important; border-top: 1px solid rgba(76,154,22,.25) !important; }
    .nav-menu .nav-link:hover, .nav-menu .nav-link.active {
        background: var(--zf-leaf-l) !important; border-color: rgba(76,154,22,.25) !important; color: var(--zf-green-d) !important;
    }
    .nav-menu .nav-link::after { color: var(--zf-green) !important; background: none !important; }
    .nav-icons .icon-link { background: var(--zf-leaf-l) !important; border-color: rgba(76,154,22,.28) !important; }
}

/* ---------- Hero ---------- */
.zobty-luxury-hero, .hero-slider { background: var(--zf-forest) !important; }
.zobty-hero-shade {
    background: linear-gradient(90deg, rgba(14,40,16,.62) 0%, rgba(14,40,16,.30) 40%, rgba(14,40,16,.06) 72%, transparent 100%) !important;
}
.zobty-hero-glow { background: radial-gradient(circle, rgba(242,182,54,.16) 0%, rgba(242,182,54,.04) 40%, transparent 70%) !important; }
.zobty-hero-eyebrow { color: #CFEFA2 !important; border-color: rgba(169,216,110,.5) !important; }
.zobty-hero-eyebrow span { background: #CFEFA2 !important; }
.zobty-hero-content h1 strong {
    background: linear-gradient(100deg, #8FCB3F 0%, #E9F7B8 40%, #F2B636 60%, #8FCB3F 100%) !important;
    background-size: 240% 100% !important;
    -webkit-background-clip: text !important; background-clip: text !important;
}
.zobty-hero-trust i { color: #A9D86E !important; }
@media (max-width: 768px) {
    .zobty-hero-shade { background: linear-gradient(180deg, rgba(14,40,16,.28) 0%, rgba(14,40,16,.42) 50%, rgba(14,40,16,.76) 100%) !important; }
}

/* Hero: sab se numaya button taaza sabz 3D key, doosra shaffaf */
.zobty-hero-primary {
    background: linear-gradient(180deg, #7CC63A 0%, #4C9A16 60%, #3E8210 100%) !important; color: #fff !important;
    box-shadow: 0 6px 0 #2A5E0A, 0 18px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.zobty-hero-primary:hover { box-shadow: 0 9px 0 #2A5E0A, 0 26px 44px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.45) !important; }
.zobty-hero-primary:active { box-shadow: 0 1px 0 #2A5E0A, 0 6px 12px rgba(0,0,0,.3) !important; }

/* ---------- Trust strip ---------- */
.zobty-trust-strip { border-color: rgba(76,154,22,.28) !important; background: #fff !important; }
.zobty-trust-icon {
    background: linear-gradient(145deg, #fff, var(--zf-leaf-l)) !important; color: var(--zf-green-d) !important;
    border-color: rgba(76,154,22,.3) !important;
    box-shadow: 0 8px 16px rgba(47,111,15,.16), inset 0 2px 0 #fff, inset 0 -2px 0 rgba(76,154,22,.25) !important;
}
.zobty-trust-item strong { color: var(--zf-forest) !important; }
.zobty-trust-divider { background: rgba(76,154,22,.2) !important; }

/* ---------- Categories ---------- */
.zobty-category-card { background: var(--zf-leaf-l) !important; border: 1px solid rgba(76,154,22,.22) !important; }
.zobty-category-card::after { background: linear-gradient(180deg, rgba(10,30,12,.02) 20%, rgba(10,30,12,.22) 48%, rgba(14,40,16,.86) 100%) !important; }
.zobty-category-card:hover::before { border-color: rgba(169,216,110,.85) !important; }
.zobty-category-overlay b, .category-btn { color: #CFEFA2 !important; }
.zobty-category-bottom a { color: var(--zf-green-d) !important; }
.zobty-category-bottom { border-top-color: rgba(76,154,22,.2) !important; }

/* ---------- Product cards ---------- */
.zobty-products-showcase #products-container .product-card.product-card,
.product-card {
    background: linear-gradient(160deg, #FFFFFF 0%, #FAFCF6 60%, #F1F7E8 100%) !important;
    border: 1px solid rgba(76,154,22,.20) !important;
}
.zobty-products-showcase #products-container .product-card.product-card:hover,
.product-card:hover { border-color: rgba(76,154,22,.55) !important; }
.zobty-products-showcase #products-container .product-card::before,
.product-badge, .best-seller-badge {
    background: var(--zf-green) !important; color: #fff !important; border: 0 !important;
    box-shadow: 0 6px 14px rgba(47,111,15,.28) !important; -webkit-text-fill-color: #fff;
}
.product-info h3, .product-card h3, .product-name,
.zobty-products-showcase #products-container .product-card h3 { color: var(--zf-forest) !important; }
.category-name { color: var(--zf-green-d) !important; }

/* Qeemat: gehra sabz (gradient-text hata diya) */
.product-price, .product-card .product-price, #products-container .product-price,
.detail-price, .summary-price {
    background: none !important; -webkit-text-fill-color: currentColor !important;
    color: var(--zf-green-d) !important; font-weight: 800 !important;
}
/* Purani qeemat kati hui + discount badge (HTML mein class laga dein to nazar aayegi) */
.old-price, .price-old, .product-old-price, .original-price {
    color: #8A9484 !important; text-decoration: line-through; font-weight: 500; font-size: .85em; margin-right: 6px;
    -webkit-text-fill-color: currentColor !important;
}
.discount-badge, .save-badge, .sale-badge {
    display: inline-block; background: var(--zf-amber); color: #3A2A00; font-weight: 800;
    font-size: .68rem; letter-spacing: .4px; padding: 4px 9px; border-radius: 999px;
    box-shadow: 0 4px 10px rgba(201,143,18,.35);
}
.review-stars, .detail-rating, .detail-info .detail-rating, .review-card-premium .review-stars {
    color: var(--zf-amber) !important; -webkit-text-fill-color: currentColor !important; background: none !important;
}

/* Wazan ke pills */
.zobty-products-showcase #products-container .weight-btn,
.weight-btn, .variant-btn { border-color: rgba(76,154,22,.35) !important; color: var(--zf-forest) !important; background: #fff !important; }
.weight-btn:hover, .variant-btn:hover { border-color: var(--zf-green) !important; color: var(--zf-green-d) !important; }
.zobty-products-showcase #products-container .weight-btn.active,
.weight-btn.active, .variant-btn.active {
    background: linear-gradient(180deg, #5FB024, #3E8210) !important; color: #fff !important; border-color: transparent !important;
    box-shadow: 0 3px 0 #2A5E0A, 0 8px 16px rgba(47,111,15,.3) !important;
}

/* ---------- BUTTONS: Add to Cart = sabz, Buy Now = amber ---------- */
#products-container .product-card.product-card button.btn-cart,
#products-container .product-card.product-card button.add-to-cart-btn,
#products-container .product-card.product-card button.btn-add-cart,
.btn-cart, .add-to-cart-btn, .btn-add-cart, .detail-add-btn, .btn-detail-cart, .pd-btn-cart {
    background: linear-gradient(180deg, #5FB024, #3E8210) !important; color: #fff !important; border-color: transparent !important;
    box-shadow: 0 4px 0 #2A5E0A, 0 12px 20px rgba(47,111,15,.28), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
#products-container .product-card.product-card button.btn-buy,
#products-container .product-card.product-card button.buy-now-btn,
.btn-buy, .buy-now-btn, .detail-buy-btn, .btn-detail-buy, .pd-btn-buy {
    background: linear-gradient(180deg, #FFD36B, #F2B636) !important; color: #3A2A00 !important; border-color: transparent !important;
    box-shadow: 0 4px 0 #B8820F, 0 12px 20px rgba(201,143,18,.34), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.place-order-btn, .place-order-premium-btn, .btn-place-order {
    background: linear-gradient(180deg, #5FB024, #3E8210) !important; color: #fff !important;
    box-shadow: 0 5px 0 #2A5E0A, 0 16px 28px rgba(47,111,15,.32), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
@media (hover: hover) {
    .btn-cart:hover, .add-to-cart-btn:hover, .btn-add-cart:hover, .detail-add-btn:hover,
    .btn-detail-cart:hover, .btn-buy:hover, .buy-now-btn:hover, .detail-buy-btn:hover,
    .btn-detail-buy:hover, .place-order-btn:hover, .place-order-premium-btn:hover { filter: brightness(1.07); }
}
.btn-primary, .admin-btn, .category-btn { background: linear-gradient(180deg, #5FB024, #3E8210) !important; color: #fff !important; }

/* ---------- Why us / promo / reviews ---------- */
.feature-card { background: #fff !important; border: 1px solid rgba(76,154,22,.18) !important; }
.feature-card h3 { color: var(--zf-forest) !important; }
.feature-icon {
    background: linear-gradient(145deg, #7CC63A, #3E8210) !important; color: #fff !important;
    box-shadow: 0 10px 20px rgba(47,111,15,.32), inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.18) !important;
}
.feature-card:hover .feature-icon { background: linear-gradient(145deg, #FFD36B, #F2B636) !important; color: #3A2A00 !important; }

.promo-banner, .premium-promo-section, section[style*="2c1810"] {
    background: linear-gradient(135deg, #153819 0%, #2F6F0F 60%, #4C9A16 100%) !important;
    border-color: rgba(169,216,110,.3) !important;
}
.promo-code-box span, section[style*="2c1810"] #promo-code { color: #FFE08A !important; }
.copy-btn { color: var(--zf-green-d) !important; }

.review-inner-box, .review-card-premium { border-color: rgba(76,154,22,.2) !important; }
.reviewer-info img, .review-card-premium .reviewer-info img { border-color: var(--zf-green) !important; }
.review-card-premium::before { color: var(--zf-green) !important; }
.reviews-section button { background: var(--zf-green) !important; }

/* ---------- Checkout / forms ---------- */
.checkout-header, .checkout-progress-container { background: #fff !important; }
.step.active, .secure-badge { color: var(--zf-green-d) !important; }
.step.active i, .step-line.active { background: var(--zf-green) !important; }
.premium-input, .checkout-input, .form-input { background: #fff !important; border-color: rgba(76,154,22,.28) !important; }
.premium-input:focus, .checkout-input:focus, .form-input:focus {
    border-color: var(--zf-green) !important; box-shadow: 0 0 0 4px rgba(76,154,22,.15) !important;
}
.checkout-summary-box { background: var(--zf-soft) !important; border-color: rgba(76,154,22,.2) !important; }
.payment-option.active { border-color: var(--zf-green) !important; background: var(--zf-leaf-l) !important; box-shadow: 0 0 0 3px rgba(76,154,22,.15) !important; }
.delivery-trust-info { border-left-color: var(--zf-green) !important; }
.summary-title, .form-section-title, .summary-total { color: var(--zf-forest) !important; }
.success-icon { background: linear-gradient(135deg, #5FB024, #3E8210) !important; }
.order-number-box { border-color: var(--zf-green) !important; }
.order-number-box h2, .order-number-box h3 { color: var(--zf-green-d) !important; }

/* ---------- Footer / WhatsApp / admin ---------- */
.footer { background: linear-gradient(135deg, #153819 0%, #1E4620 100%) !important; }
.footer::before { background: linear-gradient(90deg, transparent, var(--zf-amber), transparent) !important; }
.footer h4, .footer h3 span, .footer a:hover { color: #CFEFA2 !important; }
.admin-sidebar { background: linear-gradient(180deg, #153819, #1E4620) !important; }
.admin-sidebar h2, .admin-sidebar h2 span { color: #CFEFA2 !important; }
.admin-menu li a.active, .admin-menu li a:hover { border-left-color: var(--zf-amber) !important; background: rgba(255,255,255,.08) !important; }
.stat-card { border-left-color: var(--zf-green) !important; }
.stat-icon { background: linear-gradient(135deg, #7CC63A, #3E8210) !important; }

::selection { background: var(--zf-green); color: #fff; }
::-webkit-scrollbar-thumb { background: var(--zf-green); }
:focus-visible { outline-color: var(--zf-green) !important; }/* =========================================================
   ZUBOTI — CHECKOUT PREMIUM (sabz theme ke sath)
   zuboti-fresh-theme.css ke BAAD, sab se aakhir mein link karein.
   ========================================================= */

.premium-checkout-section, .checkout-section {
    background:
        radial-gradient(700px 360px at 0% 0%, rgba(76,154,22,.10), transparent 65%),
        radial-gradient(600px 360px at 100% 100%, rgba(242,182,54,.10), transparent 65%),
        #F6F9F1 !important;
    padding-top: 28px;
}

/* ---- Upar ka header + progress ---- */
.checkout-header { border-bottom: 1px solid rgba(76,154,22,.2) !important; box-shadow: 0 6px 20px rgba(30,70,32,.07) !important; }
.secure-badge {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
    background: #EAF5DC; border: 1px solid rgba(76,154,22,.3); font-weight: 700; font-size: .78rem;
}
.checkout-progress {
    max-width: 640px; margin: 0 auto; padding: 14px 18px; border-radius: 18px; background: #fff;
    border: 1px solid rgba(76,154,22,.18); box-shadow: 0 10px 28px rgba(30,70,32,.08);
}
.step { color: #8A9484; font-weight: 600; transition: color .3s; }
.step i, .step .step-num {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: #EEF2EA; color: #8A9484; border: 2px solid #DDE5D6;
}
.step.active { color: #2F6F0F !important; }
.step.active i, .step.active .step-num {
    background: linear-gradient(145deg, #7CC63A, #3E8210) !important; color: #fff !important; border-color: transparent;
    box-shadow: 0 6px 14px rgba(47,111,15,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.step-line { height: 3px; border-radius: 3px; background: #DDE5D6; }
.step-line.active { background: linear-gradient(90deg, #4C9A16, #A9D86E) !important; }

/* ---- Form box (3D card) ---- */
.checkout-box, .checkout-form-box {
    background: #fff !important; border-radius: 22px !important; border: 1px solid rgba(76,154,22,.16) !important;
    box-shadow: 0 2px 4px rgba(30,70,32,.05), 0 18px 36px rgba(30,70,32,.10), 0 40px 70px -18px rgba(30,70,32,.18) !important;
}
.form-section-title {
    display: flex; align-items: center; gap: 10px; font-family: 'Playfair Display', serif;
    color: #1E4620 !important; padding-bottom: 12px; margin-bottom: 18px;
    border-bottom: 2px solid #EAF5DC; position: relative;
}
.form-section-title::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 64px; height: 2px; background: #4C9A16; }

.premium-form-group label, .premium-form-group > label { font-weight: 600; font-size: .82rem; color: #1E4620; margin-bottom: 6px; display: block; }
.premium-input, .checkout-input, .premium-form-group input, .premium-form-group select, .premium-form-group textarea {
    width: 100%; min-height: 50px; padding: 13px 16px !important; border-radius: 14px !important;
    border: 1.5px solid #D9E3D0 !important; background: #FAFCF7 !important; color: #1F2A1C !important;
    font-size: 16px !important; transition: border-color .25s, box-shadow .25s, background .25s, transform .25s;
}
.premium-input:hover, .checkout-input:hover { border-color: #A9D86E !important; }
.premium-input:focus, .checkout-input:focus, .premium-form-group input:focus, .premium-form-group select:focus, .premium-form-group textarea:focus {
    outline: 0; background: #fff !important; border-color: #4C9A16 !important;
    box-shadow: 0 0 0 4px rgba(76,154,22,.16), 0 8px 18px rgba(30,70,32,.08) !important; transform: translateY(-1px);
}
.premium-input::placeholder, .checkout-input::placeholder { color: #9AA593; }
.form-grid-2 { gap: 16px !important; }

/* ---- Payment options (radio cards) ---- */
.payment-options { display: grid; gap: 12px; }
.payment-option {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; cursor: pointer;
    background: #fff; border: 1.5px solid #D9E3D0 !important;
    box-shadow: 0 3px 0 #E6EDDF; transition: transform .25s, border-color .25s, box-shadow .25s, background .25s;
}
.payment-option:hover { border-color: #A9D86E !important; transform: translateY(-2px); }
.payment-option.active, .payment-option:has(input:checked) {
    background: linear-gradient(135deg, #F2FAE8, #E4F3D2) !important; border-color: #4C9A16 !important;
    box-shadow: 0 3px 0 #4C9A16, 0 14px 26px rgba(47,111,15,.16) !important;
}
.payment-option input[type=radio] { accent-color: #4C9A16; width: 20px; height: 20px; }

/* ---- Order summary (sticky glass card) ---- */
.checkout-summary-box {
    position: sticky; top: 96px; align-self: start; border-radius: 22px !important; overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #F6F9F1 100%) !important; border: 1px solid rgba(76,154,22,.22) !important;
    box-shadow: 0 2px 4px rgba(30,70,32,.05), 0 18px 36px rgba(30,70,32,.12), 0 44px 80px -20px rgba(30,70,32,.22) !important;
}
.summary-title {
    margin: 0 !important; padding: 18px 22px; font-family: 'Playfair Display', serif; color: #fff !important;
    background: linear-gradient(135deg, #153819, #2F6F0F 70%, #4C9A16);
}
.summary-product { display: flex; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px dashed #D9E3D0; }
.summary-img { width: 64px; height: 64px; border-radius: 14px !important; object-fit: cover; border: 1px solid rgba(76,154,22,.25); box-shadow: 0 6px 14px rgba(30,70,32,.14); }
.summary-weight { color: #6E7A67; font-size: .78rem; }
.summary-price { font-weight: 800; }
.summary-totals { padding: 6px 0; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; color: #4A5744; }
.summary-row.discount, .summary-row .free { color: #2F6F0F; font-weight: 700; }
.summary-total {
    display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 16px 18px;
    border-radius: 16px; background: #EAF5DC; border: 1px solid rgba(76,154,22,.3);
    font-size: 1.2rem; font-weight: 800; color: #1E4620 !important;
}

/* ---- Promo / delivery / trust ---- */
.premium-promo-container { display: flex; gap: 10px; }
.premium-promo-container input { flex: 1; min-height: 48px; border-radius: 14px; border: 1.5px dashed #4C9A16; background: #F6FBEF; padding: 0 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.premium-promo-container button { min-height: 48px; padding: 0 20px; border-radius: 14px; border: 0; color: #fff; font-weight: 700; background: linear-gradient(180deg,#5FB024,#3E8210); box-shadow: 0 4px 0 #2A5E0A; cursor: pointer; }
.premium-promo-container button:active { transform: translateY(3px); box-shadow: 0 1px 0 #2A5E0A; }

.delivery-trust-info {
    padding: 14px 16px; border-radius: 14px; background: #F2FAE8; border: 1px solid rgba(76,154,22,.25);
    border-left: 5px solid #4C9A16 !important; color: #2F6F0F;
}
.checkout-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.checkout-trust-grid > * {
    text-align: center; padding: 12px 6px; border-radius: 14px; background: #fff; border: 1px solid rgba(76,154,22,.2);
    font-size: .72rem; font-weight: 600; color: #1E4620; box-shadow: 0 6px 14px rgba(30,70,32,.07);
}
.checkout-trust-grid i { display: block; font-size: 1.2rem; margin-bottom: 6px; color: #4C9A16; }

/* ---- Place order button ---- */
.place-order-btn, .place-order-premium-btn {
    width: 100%; min-height: 58px; font-size: 1.05rem !important; border-radius: 16px !important;
    background: linear-gradient(180deg, #FFD36B, #F2B636) !important; color: #3A2A00 !important;
    box-shadow: 0 6px 0 #B8820F, 0 18px 30px rgba(201,143,18,.35), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.place-order-btn:active, .place-order-premium-btn:active { transform: translateY(5px) !important; box-shadow: 0 1px 0 #B8820F !important; }

/* ---- Success page ---- */
.success-card { border-radius: 26px !important; box-shadow: 0 30px 70px -20px rgba(30,70,32,.35) !important; border: 1px solid rgba(76,154,22,.25) !important; }
.success-icon { animation: zbPop .7s cubic-bezier(.2,1.4,.4,1) both; box-shadow: 0 0 0 10px rgba(76,154,22,.14), 0 18px 34px rgba(47,111,15,.4) !important; }
@keyframes zbPop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.order-number-box { border-radius: 16px !important; background: #F2FAE8 !important; border: 2px dashed #4C9A16 !important; }

/* ---- Mobile checkout ---- */
@media (max-width: 900px) {
    .checkout-grid { display: flex !important; flex-direction: column-reverse; gap: 18px; }
    .checkout-summary-box { position: static; }
}
@media (max-width: 600px) {
    .form-grid-2 { grid-template-columns: 1fr !important; }
    .checkout-box { border-radius: 18px !important; padding: 18px !important; }
    .checkout-progress { padding: 10px; border-radius: 14px; }
    .step span:not(.step-num) { font-size: .66rem; }
    .place-order-btn, .place-order-premium-btn {
        position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    }
}/* =========================================================
   ZUBOTI — NAYE FEATURES + MOBILE PAR LAPTOP JAISA MENU
   Sab se aakhir mein link karein. JS: zuboti-features.js
   ========================================================= */

/* ---------- 1. MOBILE PAR LAPTOP JAISA MENU (likha hua, hamesha nazar aaye) ----------
   Logo + icons ek line mein, neeche menu ke lafz ek qatar mein (swipe ho sakti hai).
   Hamburger ki zaroorat nahi, isliye chhupa diya. */
@media (max-width: 768px) {
    .hamburger { display: none !important; }
    body.menu-open { overflow: auto !important; }

    .nav-container { flex-wrap: wrap !important; padding: 8px 12px 0 !important; min-height: 0 !important; row-gap: 0; }
    .logo { order: 1; }
    .nav-icons { order: 2; margin-left: auto !important; }

    .nav-menu, .nav-menu.active {
        order: 3; flex: 0 0 100%; width: 100% !important;
        position: static !important; transform: none !important; opacity: 1 !important;
        visibility: visible !important; pointer-events: auto !important; display: flex !important;
        flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 4px !important;
        max-height: none !important; height: auto !important; margin: 6px -12px 0 !important;
        padding: 0 12px !important; width: calc(100% + 24px) !important;
        overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; background: transparent !important; border: 0 !important; box-shadow: none !important;
        border-top: 1px solid rgba(76,154,22,.18) !important; scroll-snap-type: x proximity;
    }
    .nav-menu::-webkit-scrollbar { display: none; }
    .nav-menu li { width: auto !important; flex: 0 0 auto; list-style: none; scroll-snap-align: start; }
    .nav-menu .nav-link, .nav-link {
        display: block !important; width: auto !important; white-space: nowrap; text-align: center !important;
        padding: 12px 13px !important; min-height: 44px; margin: 0 !important; font-size: .82rem !important;
        font-weight: 700 !important; letter-spacing: .3px !important; border: 0 !important; border-radius: 0 !important;
        background: transparent !important; position: relative;
    }
    .nav-menu .nav-link::after, .nav-link::after {
        content: "" !important; display: block !important; position: absolute !important; left: 13px; right: 13px; bottom: 4px;
        height: 3px; border-radius: 3px; background: #4C9A16 !important; transform: scaleX(0); transition: transform .25s;
        font-size: 0 !important; width: auto !important;
    }
    .nav-menu .nav-link.active::after, .nav-menu .nav-link:hover::after { transform: scaleX(1); }
    .nav-menu .nav-link.active, .nav-menu .nav-link:hover { padding-left: 13px !important; background: transparent !important; }
    /* kinare par dhundli patti: yaad dilaye ke menu swipe hota hai */
    .navbar { position: sticky; }
    .nav-menu { -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
}

/* ---------- 2. Announcement bar (sab se upar) ---------- */
.zb-announce {
    background: linear-gradient(90deg, #153819, #2F6F0F, #153819); color: #fff; font-size: .78rem; font-weight: 600;
    text-align: center; padding: 8px 12px; overflow: hidden; white-space: nowrap; position: relative; z-index: 1002;
}
.zb-announce b { color: #FFD36B; }
.zb-announce-track { display: inline-flex; gap: 48px; padding-left: 100%; animation: zbMarq 26s linear infinite; }
.zb-announce:hover .zb-announce-track { animation-play-state: paused; }
@keyframes zbMarq { to { transform: translateX(-100%); } }

/* ---------- 3. REELS (beech mein) ---------- */
.zb-reels { padding: 56px 0 44px; background: linear-gradient(180deg, #fff, #F2F8EA); position: relative; }
.zb-reels-head { width: min(1180px, 92%); margin: 0 auto 22px; display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.zb-reels-head h2 { margin: 0; font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 4vw, 2.5rem); color: #1E4620; }
.zb-reels-head p { margin: 6px 0 0; color: #6E7A67; font-size: .92rem; }
.zb-reels-nav { display: flex; gap: 8px; }
.zb-reels-nav button {
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1rem; color: #fff;
    background: linear-gradient(180deg, #5FB024, #3E8210); box-shadow: 0 4px 0 #2A5E0A;
}
.zb-reels-nav button:active { transform: translateY(3px); box-shadow: 0 1px 0 #2A5E0A; }

.zb-reels-track {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(4%, calc((100vw - 1180px) / 2)) 28px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.zb-reels-track::-webkit-scrollbar { display: none; }
.zb-reel {
    flex: 0 0 clamp(190px, 22vw, 250px); aspect-ratio: 9 / 16; scroll-snap-align: center; position: relative; overflow: hidden;
    border-radius: 22px; background: #153819; cursor: pointer; border: 0; padding: 0;
    box-shadow: 0 4px 8px rgba(30,70,32,.1), 0 24px 44px rgba(30,70,32,.22);
    transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
}
.zb-reel:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 6px 12px rgba(30,70,32,.14), 0 34px 60px rgba(30,70,32,.32); }
.zb-reel video, .zb-reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zb-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 30%, rgba(8,28,10,.88) 100%); pointer-events: none; }
.zb-reel-play {
    position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(255,255,255,.9); color: #2F6F0F; font-size: .8rem;
}
.zb-reel-live { position: absolute; top: 14px; left: 12px; z-index: 2; background: #E5484D; color: #fff; font-size: .62rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; letter-spacing: .5px; }
.zb-reel-info { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; text-align: left; color: #fff; }
.zb-reel-info strong { display: block; font-size: .95rem; line-height: 1.3; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.zb-reel-info span { display: inline-block; margin-top: 6px; background: #F2B636; color: #3A2A00; font-weight: 800; font-size: .78rem; padding: 4px 10px; border-radius: 999px; }

/* Poori screen reel viewer */
.zb-viewer { position: fixed; inset: 0; z-index: 3000; background: rgba(6,18,8,.94); display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.zb-viewer.open { display: flex; }
.zb-viewer-box { position: relative; height: min(88vh, 760px); aspect-ratio: 9 / 16; max-width: 94vw; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 40px 100px rgba(0,0,0,.6); }
.zb-viewer-box video { width: 100%; height: 100%; object-fit: cover; }
.zb-viewer-close { position: absolute; top: 14px; right: 14px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #1E4620; font-size: 1.1rem; cursor: pointer; }
.zb-viewer-cta { position: absolute; left: 14px; right: 14px; bottom: 16px; z-index: 5; display: flex; gap: 10px; }
.zb-viewer-cta a { flex: 1; text-align: center; padding: 14px; border-radius: 14px; font-weight: 800; text-decoration: none; color: #3A2A00; background: linear-gradient(180deg,#FFD36B,#F2B636); box-shadow: 0 4px 0 #B8820F; }
.zb-viewer-cta a.wa { flex: 0 0 56px; background: #25D366; color: #fff; box-shadow: 0 4px 0 #168A44; }
.zb-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 1.1rem; cursor: pointer; z-index: 3001; }
.zb-viewer-nav.prev { left: max(12px, calc(50% - min(88vh, 760px) * 9 / 32 - 70px)); }
.zb-viewer-nav.next { right: max(12px, calc(50% - min(88vh, 760px) * 9 / 32 - 70px)); }
@media (max-width: 768px) { .zb-viewer-nav { display: none; } .zb-viewer-box { height: 100svh; max-width: 100vw; border-radius: 0; } }

/* ---------- 4. Free delivery progress bar ---------- */
.zb-freeship { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: #F2FAE8; border: 1px solid rgba(76,154,22,.25); font-size: .84rem; color: #1E4620; font-weight: 600; }
.zb-freeship-bar { height: 9px; border-radius: 9px; background: #DDE9CF; margin-top: 8px; overflow: hidden; }
.zb-freeship-bar i { display: block; height: 100%; border-radius: 9px; width: 0; background: linear-gradient(90deg, #4C9A16, #A9D86E, #F2B636); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.zb-freeship.done { background: #E4F3D2; }

/* ---------- 5. Mobile neeche ki bar (app jaisa) ---------- */
.zb-bottombar { display: none; }
@media (max-width: 768px) {
    .zb-bottombar {
        display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
        background: rgba(255,255,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid rgba(76,154,22,.25); box-shadow: 0 -10px 30px rgba(30,70,32,.12);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .zb-bottombar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; font-size: .66rem; font-weight: 700; color: #4A5744; text-decoration: none; position: relative; }
    .zb-bottombar a i { font-size: 1.15rem; color: #2F6F0F; }
    .zb-bottombar a.on, .zb-bottombar a:active { color: #2F6F0F; }
    .zb-bottombar a.on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: #4C9A16; }
    .zb-bottombar .zb-bb-count { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #F2B636; color: #3A2A00; font-size: .6rem; font-weight: 800; display: grid; place-items: center; }
    body { padding-bottom: 66px; }
    .whatsapp-float { bottom: 82px !important; }
}

/* ---------- 6. Back-to-top ---------- */
.zb-top { position: fixed; right: 16px; bottom: 90px; z-index: 1190; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: #1E4620; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.25); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .3s; }
.zb-top.show { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 769px) { .zb-top { bottom: 96px; left: 20px; right: auto; } }

/* ---------- 7. Toast ---------- */
.zb-toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); z-index: 4000; background: #1E4620; color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: .85rem; box-shadow: 0 14px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: .35s cubic-bezier(.2,.7,.2,1); max-width: 90vw; text-align: center; }
.zb-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 8. Search bar (nav ke neeche) ---------- */
.zb-search { width: min(720px, 92%); margin: 12px auto 0; position: relative; }
.zb-search input { width: 100%; min-height: 48px; border-radius: 999px; border: 1.5px solid #D9E3D0; background: #fff; padding: 0 20px 0 48px; font-size: 16px; box-shadow: 0 6px 18px rgba(30,70,32,.08); transition: .25s; }
.zb-search input:focus { outline: 0; border-color: #4C9A16; box-shadow: 0 0 0 4px rgba(76,154,22,.16); }
.zb-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #4C9A16; }

/* ---------- 9. Product filter chips (product section ke upar) ---------- */
.zb-chips { display: flex; gap: 8px; overflow-x: auto; justify-content: center; flex-wrap: wrap; padding: 4px 0 18px; scrollbar-width: none; }
.zb-chip { padding: 9px 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: #fff; font-weight: 700; font-size: .8rem; cursor: pointer; transition: .25s; }
.zb-chip.on { background: #F2B636; color: #3A2A00; border-color: #F2B636; box-shadow: 0 4px 0 #B8820F; }
@media (max-width: 768px) { .zb-chips { flex-wrap: nowrap; justify-content: flex-start; } .zb-chip { flex: 0 0 auto; } }

@media (prefers-reduced-motion: reduce) { .zb-announce-track { animation: none; padding-left: 0; } .zb-reel, .zb-reel:hover { transition: none; } }/* =========================================================
   ZUBOTI — NAYE FEATURES + MOBILE PAR LAPTOP JAISA MENU
   Sab se aakhir mein link karein. JS: zuboti-features.js
   ========================================================= */

/* ---------- 1. MOBILE PAR LAPTOP JAISA MENU (likha hua, hamesha nazar aaye) ----------
   Logo + icons ek line mein, neeche menu ke lafz ek qatar mein (swipe ho sakti hai).
   Hamburger ki zaroorat nahi, isliye chhupa diya. */
@media (max-width: 768px) {
    .hamburger { display: none !important; }
    body.menu-open { overflow: auto !important; }

    .nav-container { flex-wrap: wrap !important; padding: 8px 12px 0 !important; min-height: 0 !important; row-gap: 0; }
    .logo { order: 1; }
    .nav-icons { order: 2; margin-left: auto !important; }

    .nav-menu, .nav-menu.active {
        order: 3; flex: 0 0 100%; width: 100% !important;
        position: static !important; transform: none !important; opacity: 1 !important;
        visibility: visible !important; pointer-events: auto !important; display: flex !important;
        flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 4px !important;
        max-height: none !important; height: auto !important; margin: 6px -12px 0 !important;
        padding: 0 12px !important; width: calc(100% + 24px) !important;
        overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; background: transparent !important; border: 0 !important; box-shadow: none !important;
        border-top: 1px solid rgba(76,154,22,.18) !important; scroll-snap-type: x proximity;
    }
    .nav-menu::-webkit-scrollbar { display: none; }
    .nav-menu li { width: auto !important; flex: 0 0 auto; list-style: none; scroll-snap-align: start; }
    .nav-menu .nav-link, .nav-link {
        display: block !important; width: auto !important; white-space: nowrap; text-align: center !important;
        padding: 12px 13px !important; min-height: 44px; margin: 0 !important; font-size: .82rem !important;
        font-weight: 700 !important; letter-spacing: .3px !important; border: 0 !important; border-radius: 0 !important;
        background: transparent !important; position: relative;
    }
    .nav-menu .nav-link::after, .nav-link::after {
        content: "" !important; display: block !important; position: absolute !important; left: 13px; right: 13px; bottom: 4px;
        height: 3px; border-radius: 3px; background: #4C9A16 !important; transform: scaleX(0); transition: transform .25s;
        font-size: 0 !important; width: auto !important;
    }
    .nav-menu .nav-link.active::after, .nav-menu .nav-link:hover::after { transform: scaleX(1); }
    .nav-menu .nav-link.active, .nav-menu .nav-link:hover { padding-left: 13px !important; background: transparent !important; }
    /* kinare par dhundli patti: yaad dilaye ke menu swipe hota hai */
    .navbar { position: sticky; }
    .nav-menu { -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
}

/* ---------- 2. Announcement bar (sab se upar) ---------- */
.zb-announce {
    background: linear-gradient(90deg, #153819, #2F6F0F, #153819); color: #fff; font-size: .78rem; font-weight: 600;
    text-align: center; padding: 8px 12px; overflow: hidden; white-space: nowrap; position: relative; z-index: 1002;
}
.zb-announce b { color: #FFD36B; }
.zb-announce-track { display: inline-flex; gap: 48px; padding-left: 100%; animation: zbMarq 26s linear infinite; }
.zb-announce:hover .zb-announce-track { animation-play-state: paused; }
@keyframes zbMarq { to { transform: translateX(-100%); } }

/* ---------- 3. REELS (beech mein) ---------- */
.zb-reels { padding: 56px 0 44px; background: linear-gradient(180deg, #fff, #F2F8EA); position: relative; }
.zb-reels-head { width: min(1180px, 92%); margin: 0 auto 22px; display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.zb-reels-head h2 { margin: 0; font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 4vw, 2.5rem); color: #1E4620; }
.zb-reels-head p { margin: 6px 0 0; color: #6E7A67; font-size: .92rem; }
.zb-reels-nav { display: flex; gap: 8px; }
.zb-reels-nav button {
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1rem; color: #fff;
    background: linear-gradient(180deg, #5FB024, #3E8210); box-shadow: 0 4px 0 #2A5E0A;
}
.zb-reels-nav button:active { transform: translateY(3px); box-shadow: 0 1px 0 #2A5E0A; }

.zb-reels-track {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(4%, calc((100vw - 1180px) / 2)) 28px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.zb-reels-track::-webkit-scrollbar { display: none; }
.zb-reel {
    flex: 0 0 clamp(190px, 22vw, 250px); aspect-ratio: 9 / 16; scroll-snap-align: center; position: relative; overflow: hidden;
    border-radius: 22px; background: #153819; cursor: pointer; border: 0; padding: 0;
    box-shadow: 0 4px 8px rgba(30,70,32,.1), 0 24px 44px rgba(30,70,32,.22);
    transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
}
.zb-reel:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 6px 12px rgba(30,70,32,.14), 0 34px 60px rgba(30,70,32,.32); }
.zb-reel video, .zb-reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zb-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 30%, rgba(8,28,10,.88) 100%); pointer-events: none; }
.zb-reel-play {
    position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(255,255,255,.9); color: #2F6F0F; font-size: .8rem;
}
.zb-reel-live { position: absolute; top: 14px; left: 12px; z-index: 2; background: #E5484D; color: #fff; font-size: .62rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; letter-spacing: .5px; }
.zb-reel-info { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; text-align: left; color: #fff; }
.zb-reel-info strong { display: block; font-size: .95rem; line-height: 1.3; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.zb-reel-info span { display: inline-block; margin-top: 6px; background: #F2B636; color: #3A2A00; font-weight: 800; font-size: .78rem; padding: 4px 10px; border-radius: 999px; }

/* Poori screen reel viewer */
.zb-viewer { position: fixed; inset: 0; z-index: 3000; background: rgba(6,18,8,.94); display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.zb-viewer.open { display: flex; }
.zb-viewer-box { position: relative; height: min(88vh, 760px); aspect-ratio: 9 / 16; max-width: 94vw; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 40px 100px rgba(0,0,0,.6); }
.zb-viewer-box video { width: 100%; height: 100%; object-fit: cover; }
.zb-viewer-close { position: absolute; top: 14px; right: 14px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #1E4620; font-size: 1.1rem; cursor: pointer; }
.zb-viewer-cta { position: absolute; left: 14px; right: 14px; bottom: 16px; z-index: 5; display: flex; gap: 10px; }
.zb-viewer-cta a { flex: 1; text-align: center; padding: 14px; border-radius: 14px; font-weight: 800; text-decoration: none; color: #3A2A00; background: linear-gradient(180deg,#FFD36B,#F2B636); box-shadow: 0 4px 0 #B8820F; }
.zb-viewer-cta a.wa { flex: 0 0 56px; background: #25D366; color: #fff; box-shadow: 0 4px 0 #168A44; }
.zb-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 1.1rem; cursor: pointer; z-index: 3001; }
.zb-viewer-nav.prev { left: max(12px, calc(50% - min(88vh, 760px) * 9 / 32 - 70px)); }
.zb-viewer-nav.next { right: max(12px, calc(50% - min(88vh, 760px) * 9 / 32 - 70px)); }
@media (max-width: 768px) { .zb-viewer-nav { display: none; } .zb-viewer-box { height: 100svh; max-width: 100vw; border-radius: 0; } }

/* ---------- 4. Free delivery progress bar ---------- */
.zb-freeship { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: #F2FAE8; border: 1px solid rgba(76,154,22,.25); font-size: .84rem; color: #1E4620; font-weight: 600; }
.zb-freeship-bar { height: 9px; border-radius: 9px; background: #DDE9CF; margin-top: 8px; overflow: hidden; }
.zb-freeship-bar i { display: block; height: 100%; border-radius: 9px; width: 0; background: linear-gradient(90deg, #4C9A16, #A9D86E, #F2B636); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.zb-freeship.done { background: #E4F3D2; }

/* ---------- 5. Mobile neeche ki bar (app jaisa) ---------- */
.zb-bottombar { display: none; }
@media (max-width: 768px) {
    .zb-bottombar {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
        background: rgba(255,255,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid rgba(76,154,22,.25); box-shadow: 0 -10px 30px rgba(30,70,32,.12);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .zb-bottombar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; font-size: .66rem; font-weight: 700; color: #4A5744; text-decoration: none; position: relative; }
    .zb-bottombar a i { font-size: 1.15rem; color: #2F6F0F; }
    .zb-bottombar a.on, .zb-bottombar a:active { color: #2F6F0F; }
    .zb-bottombar a.on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: #4C9A16; }
    .zb-bottombar .zb-bb-count { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #F2B636; color: #3A2A00; font-size: .6rem; font-weight: 800; display: grid; place-items: center; }
    body { padding-bottom: 66px; }
    .whatsapp-float { bottom: 82px !important; }
}

/* ---------- 6. Back-to-top ---------- */
.zb-top { position: fixed; right: 16px; bottom: 90px; z-index: 1190; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: #1E4620; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.25); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .3s; }
.zb-top.show { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 769px) { .zb-top { bottom: 96px; left: 20px; right: auto; } }

/* ---------- 7. Toast ---------- */
.zb-toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); z-index: 4000; background: #1E4620; color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: .85rem; box-shadow: 0 14px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: .35s cubic-bezier(.2,.7,.2,1); max-width: 90vw; text-align: center; }
.zb-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 8. Search bar (nav ke neeche) ---------- */
.zb-search { width: min(720px, 92%); margin: 12px auto 0; position: relative; }
.zb-search input { width: 100%; min-height: 48px; border-radius: 999px; border: 1.5px solid #D9E3D0; background: #fff; padding: 0 20px 0 48px; font-size: 16px; box-shadow: 0 6px 18px rgba(30,70,32,.08); transition: .25s; }
.zb-search input:focus { outline: 0; border-color: #4C9A16; box-shadow: 0 0 0 4px rgba(76,154,22,.16); }
.zb-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #4C9A16; }

/* ---------- 9. Product filter chips (product section ke upar) ---------- */
.zb-chips { display: flex; gap: 8px; overflow-x: auto; justify-content: center; flex-wrap: wrap; padding: 4px 0 18px; scrollbar-width: none; }
.zb-chip { padding: 9px 18px; border-radius: 999px; border: 1.5px solid rgba(76,154,22,.45); background: #fff; color: #1E4620; font-weight: 700; font-size: .8rem; cursor: pointer; transition: .25s; }
.zb-chip.on { background: linear-gradient(180deg,#5FB024,#3E8210); color: #fff; border-color: transparent; box-shadow: 0 3px 0 #2A5E0A; }
@media (max-width: 768px) { .zb-chips { flex-wrap: nowrap; justify-content: flex-start; } .zb-chip { flex: 0 0 auto; } }

@media (prefers-reduced-motion: reduce) { .zb-announce-track { animation: none; padding-left: 0; } .zb-reel, .zb-reel:hover { transition: none; } }/* =========================================================
   ZUBOTI — POORE PAGE KE PEECHE VIDEO + 3D GEHRAI
   Sirf tab chalta hai jab <body> par class "zb-video-on" ho
   (zuboti-video-bg.js khud lagata hai). Band karna ho to JS hata dein.
   Sab se AAKHIR mein link karein.
   ========================================================= */

.zb-bgvideo, .zb-bgshade { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.zb-bgvideo {
    z-index: -2; object-fit: cover; background: #153819;
    transform: scale(1.12) translate3d(0, calc(var(--zb-sy, 0) * -0.035px), 0);   /* scroll par halka sa gehrai ka ehsaas */
    will-change: transform; filter: saturate(1.05) contrast(1.03);
}
.zb-bgshade {
    z-index: -1;
    background:
        radial-gradient(1000px 600px at 15% 0%, rgba(124,198,58,.18), transparent 60%),
        radial-gradient(900px 600px at 100% 100%, rgba(242,182,54,.14), transparent 60%),
        linear-gradient(180deg, rgba(10,32,12,.55) 0%, rgba(10,32,12,.38) 45%, rgba(10,32,12,.62) 100%);
}

body.zb-video-on { background: #153819 !important; }

/* Hero ki apni video band — wahi ek video poore page ke peeche chalti hai */
body.zb-video-on .zobty-luxury-hero,
body.zb-video-on .hero-slider { background: transparent !important; }
body.zb-video-on .zobty-hero-video { display: none !important; }
body.zb-video-on .zobty-hero-shade { background: linear-gradient(90deg, rgba(10,32,12,.55), rgba(10,32,12,.15) 70%, transparent) !important; }

/* Sections: sheeshe (glass) ke panel, taake likhai saaf rahe */
body.zb-video-on .zobty-category-showcase,
body.zb-video-on .section,
body.zb-video-on .zobty-products-showcase,
body.zb-video-on .why-us,
body.zb-video-on .reviews-section {
    background: rgba(255,255,255,.84) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    width: min(1240px, 94%); margin: 28px auto !important; border-radius: 30px !important;
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 24px 48px rgba(0,0,0,.22), 0 60px 100px -24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.8);
    padding-left: clamp(14px, 3vw, 40px) !important; padding-right: clamp(14px, 3vw, 40px) !important;
}
body.zb-video-on .why-us { background: rgba(246,249,241,.86) !important; }
body.zb-video-on .zobty-category-showcase::before,
body.zb-video-on .zobty-products-showcase::before { display: none; }

/* Nav aur footer upar rahein, thoda sheesha */
body.zb-video-on .navbar { background: rgba(255,255,255,.88) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
body.zb-video-on .footer { background: rgba(14,40,16,.90) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.zb-video-on .zb-reels { background: rgba(255,255,255,.84); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    width: min(1240px, 94%); margin: 28px auto; border-radius: 30px; box-shadow: 0 24px 48px rgba(0,0,0,.22), 0 60px 100px -24px rgba(0,0,0,.45); }

/* 3D: panel scroll par andar se uthta hua aata hai (sirf ek baar) */
body.zb-video-on .zb-rise { opacity: 0; transform: perspective(1200px) translateY(60px) rotateX(9deg) scale(.97); transform-origin: 50% 100%; }
body.zb-video-on .zb-rise.zb-in {
    opacity: 1; transform: perspective(1200px) none;
    transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}

@media (max-width: 768px) {
    body.zb-video-on .zobty-category-showcase,
    body.zb-video-on .section,
    body.zb-video-on .zobty-products-showcase,
    body.zb-video-on .why-us,
    body.zb-video-on .reviews-section,
    body.zb-video-on .zb-reels { width: 96%; margin: 18px auto !important; border-radius: 22px !important; }
    .zb-bgvideo { transform: scale(1.08); }   /* mobile par parallax band, bijli bachti hai */
}

/* Data-saver / kam harkat: video ki jagah saaf sabz rang */
body.zb-video-off .zb-bgvideo { display: none; }
body.zb-video-off .zb-bgshade { background: linear-gradient(160deg, #153819, #2F6F0F); }
@media (prefers-reduced-motion: reduce) {
    body.zb-video-on .zb-rise { opacity: 1; transform: none; }
}