/* ===== CraZiu.com — brand theme, built around the logo's green ===== */
:root {
    --ink: #123D22; /* deep forest green (from the logo's green family) — replaces slate/black everywhere */
    --ink-soft: #4B6B54;
    --gold: #10A53F; /* CraZiu brand green — CTAs, links, hover accents */
    --gold-deep: #0C7F31;
    --green: #17C94C; /* bright green — used in the catnav gradient */
    --green2: #0C7F31;
    --gold-pale: #D9F2E1;
    --cream: #FFFFFF;
    --cream-dim: #F2F2F2;
    --line: #E0E0E0;
    --card: #FFFFFF;
    --success: #10A53F; /* same brand green — ratings, in-stock, positive states */
    --success-bg: #D9F2E1;
    --off: #D9772B; /* warm amber — discount %, kept distinct from the brand green */
    --muted: #8B8F94;
    --link: #123D22;
    --serif: 'Playfair Display',Georgia,serif;
    --sans: 'Inter','Segoe UI',Arial,sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    padding-bottom: 0; /* desktop: footer ke neeche khali/blank patti nahi chahiye */
}

/* Mobile par bottom nav (fixed, ~64px) footer ko dhake nahi, isliye sirf wahan jagah chhodo */
@media (max-width: 760px) {
    body {
        padding-bottom: 90px;
    }
}

html {
    overflow-x: hidden;
    width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---------- util bar ---------- */
.util-bar {
    background: var(--ink);
    color: rgba(255,255,255,.65);
    font-size: 11px;
    letter-spacing: .03em;
}

    .util-bar .wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 32px;
    }

    .util-bar a {
        color: rgba(255,255,255,.65);
    }

        .util-bar a:hover {
            color: var(--gold-pale);
        }

/* ---------- header ---------- */
header {
    background: var(--cream);
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--line);
}

.header-row {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 92px;
}

.logo {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.logo-img {
    height: 64px;
    width: auto;
    display: block;
}

.footer-logo-img {
    height: 52px;
    width: auto;
    display: block;
}

.logo .tag {
    display: block;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .18em;
    color: var(--muted);
    margin-top: 1px;
    text-transform: uppercase;
    font-family: var(--sans);
}

.search-wrap {
    flex: 1;
    display: flex;
    max-width: 600px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    height: 42px;
}

    .search-wrap input {
        flex: 1;
        border: 0;
        background: transparent;
        padding: 0 16px;
        font-size: 13px;
        outline: none;
        color: var(--ink);
        font-family: var(--sans);
    }

    .search-wrap button {
        width: 46px;
        border: 0;
        background: transparent;
        color: var(--ink);
        font-size: 15px;
        cursor: pointer;
    }

.header-actions {
    display: flex;
    align-items: center;
    gap: 26px;
    color: var(--ink);
    font-size: 13px;
}

    .header-actions .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.25;
        white-space: nowrap;
        position: relative;
        gap: 2px;
    }

    .header-actions .icon {
        display: block;
        width: 19px;
        height: 19px;
    }

        .header-actions .icon svg {
            width: 100%;
            height: 100%;
            stroke: #17c94c;
            fill: none;
            stroke-width: 1.4;
        }

    .header-actions .label-top {
        display: none;
    }

    .header-actions .label-main {
        font-size: 10.5px;
        letter-spacing: .03em;
        color: var(--ink-soft);
    }

    .header-actions .item.cart-item {
        flex-direction: column;
    }

.cart-count {
    position: absolute;
    top: -6px;
    right: -10px;
    background: var(--gold-deep);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sell-btn {
    background: var(--ink);
    color: #fff !important;
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: .04em;
    padding: 10px 20px;
    border-radius: 2px;
    white-space: nowrap;
    text-transform: uppercase;
    transition: background .2s;
}

    .sell-btn:hover {
        background: var(--gold-deep);
    }

/* ---------- mobile hamburger + category drawer (hidden on desktop) ---------- */
.menu-toggle {
    display: none;
}

.category-drawer-overlay {
    display: none;
}

.category-drawer {
    display: none;
}

/* category nav strip */
.catnav {
    background: linear-gradient(135deg, var(--green), var(--green2));
    position: relative; /* arrows (catnav-arrow) is ke andar position hote hain */
}

    .catnav .wrap {
        display: flex;
        gap: 0;
        overflow-x: auto;
        scroll-behavior: smooth;
        /* scroll chalta rahe, par scrollbar na dikhe - arrows se scroll hota hai */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .catnav .wrap::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }

    .catnav a {
        padding: 13px 18px;
        font-size: 11.5px;
        font-weight: 500;
        letter-spacing: .04em;
        color: rgba(255,255,255,.72);
        white-space: nowrap;
        text-transform: uppercase;
        border-bottom: 2px solid transparent;
        transition: color .15s,border-color .15s;
    }

        .catnav a:hover {
            color: #fff;
            border-bottom-color: var(--gold);
        }

.crumb {
    max-width: 1240px;
    margin: 14px auto 0;
    padding: 0 16px;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .02em;
}

    .crumb a {
        color: var(--ink-soft);
    }

        .crumb a:hover {
            color: var(--gold-deep);
        }

/* ---------- buttons ---------- */
.btn {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 2px;
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: .05em;
    cursor: pointer;
    border: 1px solid transparent;
    text-align: center;
    text-transform: uppercase;
    transition: background .2s,color .2s,border-color .2s;
}

.btn-cart {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

    .btn-cart:hover {
        background: var(--ink);
        color: #fff;
    }

.btn-buy {
    background: var(--ink);
    color: #fff;
}

    .btn-buy:hover {
        background: var(--gold-deep);
    }

.btn-outline {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
}

    .btn-outline:hover {
        border-color: var(--ink);
    }

.btn-block {
    display: block;
    width: 100%;
}

/* ---------- generic card / section ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--line);
}

.section {
    max-width: 1240px;
    margin: 14px auto 0;
    padding: 0 16px;
}

.panel {
    background: #fff;
    border: 1px solid var(--line);
    padding: 22px 24px;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 6px;
}

    .section-head h2 {
        margin: 0;
        font-size: 22px;
        font-weight: 600;
        font-family: var(--serif);
    }

    .section-head .sub {
        font-size: 11.5px;
        color: var(--muted);
        margin-top: 4px;
        letter-spacing: .02em;
    }

.viewall {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
}

.timer {
    background: var(--ink);
    color: var(--gold-pale);
    font-size: 11.5px;
    font-weight: 500;
    padding: 7px 16px;
    letter-spacing: .1em;
    border-radius: 2px;
}

/* ---------- hero carousel ---------- */
/* ---------- promo banner carousel (3 slides: real campaign banner + 2 brand slides) ---------- */
.promo-carousel {
    position: relative;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(18,61,34,.08);
    aspect-ratio: 2171/724; /* same ratio as the uploaded banner, so mobile shows it whole (no side cropping) */
}

/* Desktop: patla banner (1400 x 300 px ratio) taaki neeche ke category/products
   bina scroll ke dikhein. Admin panel me banner 1400 x 300 px me upload karo
   (1400 x 350 bhi chalega, thoda sa upar-neeche se katega). Mobile par
   upar wala original ratio hi rehta hai. */
@media (min-width:761px) {
    .promo-carousel {
        aspect-ratio: 2171/724;
        height: auto;
        max-width: none; /* full content width, same as category strip below */
        width: 100%;
    }
}

.promo-slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    animation: promo-crossfade 15s infinite;
}

    .promo-slide:nth-child(1) {
        animation-delay: 0s;
    }

    .promo-slide:nth-child(2) {
        animation-delay: 5s;
    }

    .promo-slide:nth-child(3) {
        animation-delay: 10s;
    }

    .promo-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

.promo-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(18,61,34,.88) 0%, rgba(18,61,34,.55) 45%, rgba(18,61,34,.15) 100%);
}

.promo-slide-txt {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 48px;
    max-width: 480px;
    color: #fff;
}

.promo-slide-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--gold-pale);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.promo-slide-txt h2 {
    font-family: var(--serif);
    font-size: 34px;
    line-height: 1.15;
    font-weight: 600;
    margin: 0 0 18px;
}

.promo-slide-cta {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--green);
    padding-bottom: 4px;
    display: inline-block;
    width: fit-content;
}

.promo-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

    .promo-dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255,255,255,.5);
    }

@keyframes promo-crossfade {
    0%,29% {
        opacity: 1;
    }

    33%,96% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.hero {
    position: relative;
    margin-top: 12px;
    overflow: hidden;
    min-height: 340px;
    border: 1px solid var(--line);
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    overflow: hidden;
    animation: crossfade 12s infinite;
}

    .hero-slide::after {
        content: "";
        position: absolute;
        inset: -4%;
        z-index: 0;
        background-size: cover;
        background-position: center;
        animation: kenburns 12s linear infinite;
        filter: grayscale(25%);
    }

    .hero-slide::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(100deg,rgba(18,61,34,.90) 0%,rgba(18,61,34,.68) 45%,rgba(18,61,34,.28) 100%);
    }

    .hero-slide:nth-child(1) {
        animation-delay: 0s;
    }

        .hero-slide:nth-child(1)::after {
            background-image: url('https://picsum.photos/seed/fashionhero1/1400/560');
            animation-delay: 0s;
        }

    .hero-slide:nth-child(2) {
        animation-delay: 4s;
    }

        .hero-slide:nth-child(2)::after {
            background-image: url('https://picsum.photos/seed/fashionhero2/1400/560');
            animation-delay: 4s;
        }

    .hero-slide:nth-child(3) {
        animation-delay: 8s;
    }

        .hero-slide:nth-child(3)::after {
            background-image: url('https://picsum.photos/seed/fashionhero3/1400/560');
            animation-delay: 8s;
        }

    .hero-slide .txt {
        position: relative;
        z-index: 2;
        padding: 48px 52px;
        max-width: 460px;
        color: #fff;
        animation: fadeSlide .8s ease both;
    }

    .hero-slide .kicker {
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: .18em;
        color: var(--gold-pale);
        display: inline-block;
        margin-bottom: 16px;
        text-transform: uppercase;
        border-bottom: 1px solid var(--gold);
        padding-bottom: 6px;
    }

    .hero-slide h1 {
        font-size: 38px;
        line-height: 1.18;
        margin: 0 0 14px;
        font-weight: 600;
        font-family: var(--serif);
    }

    .hero-slide p {
        font-size: 13px;
        opacity: .82;
        margin: 0 0 24px;
        max-width: 360px;
        line-height: 1.6;
    }

.hero-dots {
    position: absolute;
    bottom: 20px;
    left: 52px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

    .hero-dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255,255,255,.4);
    }

        .hero-dots span:first-child {
            background: var(--gold);
            width: 20px;
            border-radius: 3px;
        }

@keyframes crossfade {
    0%,30% {
        opacity: 1;
    }

    33%,97% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes kenburns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ---------- trending chips ---------- */
.trending {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

    .trending a {
        background: #fff;
        border: 1px solid var(--line);
        padding: 8px 18px;
        font-size: 11.5px;
        color: var(--ink-soft);
        letter-spacing: .02em;
        transition: border-color .15s,color .15s;
    }

        .trending a:hover {
            border-color: var(--gold-deep);
            color: var(--ink);
        }

/* ---------- brand strip ---------- */
.brandstrip {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

    .brandstrip a {
        background: #fff;
        padding: 20px 10px;
        text-align: center;
        font-family: var(--serif);
        font-size: 14px;
        color: var(--ink-soft);
        transition: color .2s,background .2s;
    }

        .brandstrip a:hover {
            color: var(--ink);
            background: var(--cream-dim);
        }

/* ---------- category strip ----------
   Auto-float animation hata diya hai. Ab yeh arrows (desktop) ya
   swipe (mobile) se scroll hoti hai. Arrows JS se banti hain. */
.catstrip {
    background: #fff;
    border: 1px solid var(--line);
    padding: 16px 0;
    overflow: hidden;
    position: relative;
}

.catstrip-track {
    display: flex;
    gap: 14px;
    padding: 0 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .catstrip-track::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .catstrip-track a {
        flex: 0 0 auto;
        width: 96px;
        text-align: left;
        font-size: 11.5px;
        font-weight: 500;
        color: var(--ink-soft);
        letter-spacing: .02em;
    }

    .catstrip-track img {
        width: 96px;
        height: 96px;
        border-radius: 8px;
        object-fit: cover;
        margin: 0 0 8px;
        display: block;
        filter: grayscale(8%);
        transition: filter .2s,transform .2s;
    }

    .catstrip-track a:hover img {
        filter: grayscale(0%);
        transform: translateY(-2px);
    }

    .catstrip-track a:hover {
        color: var(--ink);
    }

    .catstrip-track a span.cat-label {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ---------- product grid ---------- */
.pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px,240px));
    gap: 0;
    background: transparent;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

    .pgrid.cols-4 {
        grid-template-columns: repeat(auto-fill,minmax(220px,260px));
    }

.pcard {
    background: #fff;
    padding: 18px 18px 20px;
    position: relative;
    transition: box-shadow .2s;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    min-width: 0;
}

    .pcard:hover {
        box-shadow: 0 8px 24px rgba(18,61,34,.08);
        position: relative;
        z-index: 2;
    }

    .pcard .badge {
        position: absolute;
        top: 14px;
        left: 14px;
        background: var(--ink);
        color: #fff;
        font-size: 9.5px;
        font-weight: 500;
        padding: 4px 9px;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

        .pcard .badge.assured {
            background: var(--gold-deep);
        }

    .pcard .wishlist {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        color: var(--muted);
        z-index: 3;
        transition: color .15s;
        background: #fff;
        border-radius: 50%;
    }

        .pcard .wishlist:hover {
            color: var(--gold-deep);
        }

    .pcard .thumb {
        aspect-ratio: 1/1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 14px;
        overflow: hidden;
        background: var(--cream-dim);
    }

        .pcard .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .4s ease;
        }

    .pcard:hover .thumb img {
        transform: scale(1.04);
    }

    .pcard .brand {
        font-size: 10px;
        color: var(--muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    /* Product name: hamesha ek line, lamba ho toh "..." */
    .pcard .name {
        display: block;
        font-size: 13.5px;
        color: var(--ink);
        margin: 4px 0 8px;
        line-height: 1.4;
        font-family: var(--serif);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pcard .rating {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--success);
        font-size: 11.5px;
        font-weight: 600;
    }

        .pcard .rating::after {
            content: "";
        }

    .pcard .reviews {
        font-size: 11px;
        color: var(--muted);
        margin-left: 6px;
    }

    .pcard .price-row {
        margin-top: 10px;
        display: flex;
        align-items: baseline;
        gap: 8px;
        flex-wrap: wrap;
    }

    .pcard .price {
        font-size: 15.5px;
        font-weight: 600;
        color: var(--ink);
    }

    .pcard .mrp {
        font-size: 11.5px;
        color: var(--muted);
        text-decoration: line-through;
    }

    .pcard .off {
        font-size: 11.5px;
        color: var(--off);
        font-weight: 500;
    }

    .pcard .delivery {
        font-size: 10.5px;
        color: var(--muted);
        margin-top: 6px;
        letter-spacing: .02em;
    }

        .pcard .delivery.free {
            color: var(--success);
            font-weight: 500;
        }

/* ---------- price row (product detail page / anywhere outside .pcard) ---------- */
.price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.off-badge {
    background: var(--success);
    color: #fff;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    letter-spacing: .01em;
}

.mrp {
    color: var(--muted);
    text-decoration: line-through;
}

.price {
    font-weight: 700;
    color: var(--ink);
}

/* ---------- vendor strip ---------- */
.vgrid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.vcard {
    background: #fff;
    overflow: hidden;
}

    .vcard .cover {
        aspect-ratio: 1/1;
        background-size: cover;
        background-position: center;
        position: relative;
        filter: grayscale(10%);
    }

        .vcard .cover::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg,rgba(18,61,34,0),rgba(18,61,34,.55));
        }

        .vcard .cover .ribbon {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(255,255,255,.92);
            color: var(--ink);
            font-size: 9.5px;
            font-weight: 600;
            padding: 3px 9px;
            letter-spacing: .04em;
            text-transform: uppercase;
            z-index: 1;
        }

    .vcard .info {
        padding: 16px 18px;
    }

        .vcard .info .n {
            font-weight: 600;
            font-size: 14.5px;
            font-family: var(--serif);
        }

        .vcard .info .m {
            font-size: 11px;
            color: var(--muted);
            margin-top: 4px;
        }

/* ---------- brand marquee strip ---------- */
.strip-banner {
    background: #fff;
    border: 1px solid var(--line);
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

    .strip-banner .l {
        font-size: 11.5px;
        color: var(--ink-soft);
        letter-spacing: .01em;
    }

        .strip-banner .l b {
            color: var(--ink);
            font-weight: 600;
        }

/* ---------- footer ---------- */
footer {
    background: #EDEDED;
    color: var(--ink);
    margin-top: 40px;
    border-top: 2px solid var(--gold);
}

.footer-grid {
    max-width: 1240px;
    margin: 0 auto;
    padding: 44px 16px 20px;
    display: grid;
    grid-template-columns: 1.4fr repeat(4,1fr);
    gap: 24px;
}

    .footer-grid h4 {
        color: var(--ink);
        font-size: 11px;
        margin: 0 0 16px;
        text-transform: uppercase;
        letter-spacing: .1em;
        font-weight: 600;
    }

    .footer-grid p {
        color: var(--ink-soft);
    }

    .footer-grid ul li {
        margin-bottom: 10px;
        font-size: 12.5px;
    }

        .footer-grid ul li a {
            color: var(--ink-soft);
        }

    .footer-grid a:hover {
        color: var(--gold-deep);
    }

.footer-badges {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

    .footer-badges span {
        border: 1px solid rgba(18,61,34,.25);
        padding: 6px 11px;
        font-size: 10px;
        color: var(--ink-soft);
        letter-spacing: .03em;
    }

.footer-bottom {
    border-top: 1px solid rgba(18,61,34,.15);
    padding: 16px;
    text-align: center;
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: .02em;
}

/* ---------- misc pages: login/checkout/orders/cart ---------- */
.authbox {
    max-width: 400px;
    margin: 48px auto;
    background: #fff;
    border: 1px solid var(--line);
    padding: 36px 38px;
}

    .authbox h1 {
        font-size: 22px;
        margin: 0 0 6px;
        font-weight: 600;
        font-family: var(--serif);
    }

    .authbox .sub {
        font-size: 12px;
        color: var(--muted);
        margin-bottom: 24px;
    }

.field {
    margin-bottom: 16px;
}

    .field label {
        display: block;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--ink-soft);
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .field input, .field select {
        width: 100%;
        padding: 11px 13px;
        border: 1px solid var(--line);
        border-radius: 2px;
        font-size: 13.5px;
        font-family: var(--sans);
        background: var(--cream-dim);
    }

        .field input:focus, .field select:focus {
            outline: none;
            border-color: var(--gold-deep);
            background: #fff;
        }

.row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1px;
    align-items: start;
    background: var(--line);
}

.step-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

    .step-title .num {
        background: var(--ink);
        color: #fff;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        font-size: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--sans);
    }

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 7px 0;
    color: var(--ink-soft);
}

    .summary-row.total {
        border-top: 1px dashed var(--line);
        margin-top: 8px;
        padding-top: 14px;
        font-weight: 600;
        font-size: 15px;
        color: var(--ink);
    }

    .summary-row .g {
        color: var(--success);
    }

.cart-line {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
}

    .cart-line img {
        width: 88px;
        height: 88px;
        object-fit: cover;
    }

    .cart-line .n {
        font-size: 13.5px;
        font-weight: 500;
        margin-bottom: 5px;
        font-family: var(--serif);
    }

    .cart-line .v {
        font-size: 11px;
        color: var(--muted);
    }

.qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    margin-top: 9px;
}

    .qty button {
        width: 26px;
        height: 26px;
        border: 0;
        background: var(--cream-dim);
        font-size: 14px;
        cursor: pointer;
    }

    .qty span {
        width: 30px;
        text-align: center;
        font-size: 12.5px;
        font-weight: 600;
    }

.remove-link {
    font-size: 11px;
    color: var(--off);
    font-weight: 500;
    margin-top: 9px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.order-card {
    display: flex;
    gap: 16px;
    padding: 18px 20px;
    align-items: center;
}

    .order-card img {
        width: 64px;
        height: 64px;
        object-fit: cover;
    }

.order-status {
    font-size: 10px;
    font-weight: 600;
    padding: 4px 11px;
    background: var(--success-bg);
    color: var(--success);
    text-transform: uppercase;
    letter-spacing: .04em;
}

    .order-status.transit {
        background: #F5EEDD;
        color: var(--gold-deep);
    }

    .order-status.cancelled {
        background: #F6E9E4;
        color: var(--off);
    }

.filter-block {
    margin-bottom: 22px;
}

/* ---------- FILTER DRAWER (mobile) — hidden/inactive on desktop ---------- */
.filter-toggle-btn {
    display: none;
}

.filter-overlay {
    display: none;
}

.filter-drawer-head {
    display: none;
}

.filter-apply-btn {
    display: none;
}

.filter-block h4 {
    font-size: 11px;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-soft);
    font-weight: 600;
}

.filter-block label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-bottom: 9px;
}

.swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .swatch-row span {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: inline-block;
        border: 1px solid var(--line);
    }

/* ---------- PRODUCT GALLERY (square main + vertical thumb rail) ---------- */
.gallery {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 14px;
}

.thumb-rail {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .thumb-rail img {
        width: 84px;
        height: 84px;
        object-fit: cover;
        cursor: pointer;
        border: 1px solid var(--line);
        transition: border-color .15s;
    }

        .thumb-rail img.active {
            border-color: var(--gold-deep);
        }

.gallery-main {
    aspect-ratio: 1/1;
    width: 100%;
    overflow: hidden;
    background: var(--cream-dim);
    border: 1px solid var(--line);
}

    .gallery-main img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* ---------- OFFERS BOX ---------- */
.offers-box {
    border: 1px solid var(--line);
    padding: 16px 18px;
    margin: 18px 0;
}

    .offers-box h4 {
        font-size: 11px;
        margin: 0 0 12px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--ink-soft);
        font-weight: 600;
    }

.offer-row {
    display: flex;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-bottom: 10px;
    align-items: flex-start;
}

    .offer-row:last-child {
        margin-bottom: 0;
    }

    .offer-row .tag {
        background: var(--gold-pale);
        color: var(--gold-deep);
        font-weight: 600;
        font-size: 9.5px;
        padding: 3px 8px;
        white-space: nowrap;
        margin-top: 1px;
        letter-spacing: .03em;
    }

/* ---------- RATINGS BREAKDOWN ---------- */
.rating-summary {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 30px;
    align-items: center;
}

.rating-big {
    text-align: center;
}

    .rating-big .num {
        font-size: 42px;
        font-weight: 600;
        line-height: 1;
        font-family: var(--serif);
    }

    .rating-big .stars {
        color: var(--gold);
        font-size: 14px;
        margin-top: 6px;
        letter-spacing: .05em;
    }

    .rating-big .count {
        font-size: 11px;
        color: var(--muted);
        margin-top: 6px;
    }

.rating-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rating-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: var(--muted);
}

    .rating-bar-row .track {
        flex: 1;
        height: 4px;
        background: var(--line);
        overflow: hidden;
    }

    .rating-bar-row .fill {
        height: 100%;
        background: var(--gold);
    }

/* ---------- VARIANT CHIPS (Colour/Size selector on product page) ---------- */
.variant-chip {
    padding: 8px 16px;
    border: 1.5px solid var(--line);
    border-radius: 20px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

    .variant-chip:hover {
        border-color: var(--ink);
    }

    .variant-chip.active {
        border-color: var(--gold-deep);
        background: var(--gold-deep);
        color: #fff;
    }

/* ---------- PINCODE CHECKER ---------- */
.pincode-check {
    display: flex;
    gap: 8px;
    margin: 16px 0;
    max-width: 320px;
}

    .pincode-check input {
        flex: 1;
        padding: 10px 13px;
        border: 1px solid var(--line);
        font-size: 13px;
        background: var(--cream-dim);
    }

    .pincode-check button {
        padding: 10px 18px;
        border: 1px solid var(--ink);
        background: #fff;
        color: var(--ink);
        font-weight: 500;
        font-size: 11.5px;
        cursor: pointer;
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

        .pincode-check button:hover {
            background: var(--ink);
            color: #fff;
        }

/* ---------- PDP DESKTOP LAYOUT (Flipkart-style: narrow gallery + wide info column) ---------- */
.pdp-grid {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 28px;
    align-items: start;
}

.pdp-gallery-col {
    position: sticky;
    top: 110px;
}

.pdp-info-col {
    min-width: 0;
}

/* ---------- PDP GALLERY — vertical thumb rail (left) + big image (right), Amazon-style ---------- */
.pdp-gallery-wrap {
    display: flex;
    gap: 12px;
}

.pdp-hero-row {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
}

    .pdp-hero-row.single {
        grid-template-columns: 1fr;
    }
/* padding-top trick instead of aspect-ratio (older browsers don't support
   aspect-ratio and were collapsing this box to 0 height, hiding the photo) */
.hero-tile {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    background: var(--cream-dim);
    border: 1px solid var(--line);
}

    .hero-tile img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pdp-thumb-strip {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    align-items: center;
    scroll-behavior: smooth;
    max-height: 420px;
    flex: 0 0 auto;
    order: -1;
}

    .pdp-thumb-strip img {
        width: 52px;
        height: 52px;
        object-fit: cover;
        border: 1px solid var(--line);
        cursor: pointer;
        flex: 0 0 auto;
        border-radius: 4px;
        transition: border-color .15s;
    }

        .pdp-thumb-strip img.active {
            border-color: var(--gold-deep);
            border-width: 2px;
        }

.pdp-thumb-next {
    flex: 0 0 auto;
    width: 30px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid var(--line);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 14px;
    transform: rotate(90deg);
}

    .pdp-thumb-next:hover {
        border-color: var(--gold-deep);
        color: var(--gold-deep);
    }

/* ---------- PDP BUY BOX (right column, Amazon-style sticky card) ---------- */
.pdp-buybox-col {
    min-width: 0;
}

.pdp-buybox {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px 20px 20px;
    position: sticky;
    top: 110px;
}

    .pdp-buybox .bb-price-row {
        display: flex;
        align-items: baseline;
        gap: 8px;
        flex-wrap: wrap;
    }

    .pdp-buybox .bb-price {
        font-size: 26px;
        font-weight: 700;
        color: var(--ink);
    }

    .pdp-buybox .bb-mrp {
        font-size: 13px;
        color: var(--muted);
        text-decoration: line-through;
    }

    .pdp-buybox .bb-off {
        font-size: 13px;
        color: var(--success);
        font-weight: 600;
    }

    .pdp-buybox .bb-tax {
        font-size: 11px;
        color: var(--muted);
        margin: 2px 0 12px;
    }

    .pdp-buybox .bb-delivery {
        font-size: 12.5px;
        color: var(--ink-soft);
        line-height: 1.6;
        margin: 10px 0;
    }

        .pdp-buybox .bb-delivery b {
            color: var(--ink);
        }

    .pdp-buybox .bb-stock {
        font-size: 13px;
        color: var(--success);
        font-weight: 600;
        margin: 10px 0 4px;
    }

    .pdp-buybox .pincode-check {
        max-width: none;
        margin: 10px 0;
    }

    .pdp-buybox .addcart-btn,
    .pdp-buybox .buy-now-gold {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 42px;
        border-radius: 22px;
        font-weight: 600;
        font-size: 13.5px;
        font-family: var(--sans);
        margin-top: 10px;
        cursor: pointer;
        border: 1px solid transparent;
        transition: background .15s;
    }

    .pdp-buybox .addcart-btn {
        background: #FFD814;
        border-color: #FCD200;
        color: #0F1111;
    }

        .pdp-buybox .addcart-btn:hover {
            background: #F7CA00;
        }

    .pdp-buybox .buy-now-gold {
        background: #FFA41C;
        border-color: #FF8F00;
        color: #0F1111;
    }

        .pdp-buybox .buy-now-gold:hover {
            background: #FA8900;
        }

    .pdp-buybox .pdp-seller-line {
        border: 0;
        border-top: 1px solid var(--line);
        padding: 12px 0 0;
        margin: 14px 0 0;
        font-size: 12px;
        display: block;
    }

/* ---------- PDP BUY BAR (big Flipkart-style Add to Cart + Buy Now buttons) ----------
   Sits right after the price, so it's visible the moment the page loads (no
   scrolling needed). position:sticky + top makes it stick in place, within
   pdp-info-col's own width, once the user scrolls past it. */
.pdp-buybar {
    display: flex;
    gap: 14px;
    align-items: stretch;
    margin: 4px 0 16px;
    width: 100%;
    position: sticky;
    top: 110px;
    background: #fff;
    z-index: 5;
    padding: 10px 0;
}

    .pdp-buybar .addcart-btn,
    .pdp-buybar .buy-now-gold {
        flex: 1;
        border-radius: 8px;
        min-height: 36px;
        padding: 7px 14px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-weight: 600;
        font-size: 13px;
        letter-spacing: normal;
        text-transform: none;
        font-family: var(--sans);
        transition: background .2s,color .2s;
    }

    .pdp-buybar .addcart-btn {
        border: 1.5px solid var(--ink);
        background: #fff;
        color: var(--ink);
    }

        .pdp-buybar .addcart-btn:hover {
            background: var(--ink);
            color: #fff;
        }

        .pdp-buybar .addcart-btn svg {
            width: 15px;
            height: 15px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.6;
            flex: 0 0 auto;
        }

    .pdp-buybar .buy-now-gold {
        border-radius: 8px;
        background: linear-gradient(90deg, rgb(255, 229, 31), rgb(255, 205, 3));
        color: var(--ink);
        border: 0;
        flex-direction: column;
        gap: 1px;
    }

        .pdp-buybar .buy-now-gold:hover {
            background: linear-gradient(90deg, rgb(255, 222, 10), rgb(240, 195, 0));
        }

        .pdp-buybar .buy-now-gold .bn-line1 {
            font-size: 13px;
            font-weight: 600;
        }

        .pdp-buybar .buy-now-gold .bn-line2 {
            font-size: 12px;
            font-weight: 700;
            opacity: 1;
        }

/* ---------- PDP: dense marketplace layout (Flipkart/Snapdeal style) ---------- */
.pdp-buybox {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

    .pdp-buybox .btn {
        flex: 1;
        padding: 13px 10px;
        font-size: 12px;
    }

.highlights-list {
    margin: 14px 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.9;
}

    .highlights-list li {
        margin-bottom: 2px;
    }

.pdp-seller-line {
    font-size: 12px;
    color: var(--ink-soft);
    margin: 10px 0;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .pdp-seller-line a {
        color: var(--ink);
        font-weight: 600;
        border-bottom: 1px solid var(--gold);
    }

.rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--success);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
}

    .rating-chip svg {
        width: 11px;
        height: 11px;
        fill: #fff;
    }

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

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

        .spec-table tr:last-child {
            border-bottom: 0;
        }

    .spec-table td {
        padding: 12px 10px;
        font-size: 12.5px;
        vertical-align: top;
    }

        .spec-table td:first-child {
            width: 220px;
            color: var(--muted);
            font-weight: 500;
        }

        .spec-table td:last-child {
            color: var(--ink);
        }

.spec-group-title {
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 600;
    margin: 22px 0 8px;
    color: var(--ink);
}

    .spec-group-title:first-child {
        margin-top: 0;
    }

.review-card {
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

    .review-card:last-child {
        border-bottom: 0;
    }

.review-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

    .review-top .rating-chip {
        font-size: 11px;
    }

.review-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 5px;
}

.review-text {
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.7;
    max-width: 640px;
}

.review-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--muted);
}

.verified-tag {
    color: var(--success);
    font-weight: 600;
}


/* ---------- mobile bottom nav (app-style) ---------- */
.mobile-nav {
    display: none;
}

.mobile-buybar {
    display: none;
}

.header-actions .icon {
    display: flex;
}

/* =======================================================
   RESPONSIVE — tablet
   ======================================================= */
@media (max-width:1024px) {
    .hero {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: 230px;
    }

    .hero-slide .txt {
        padding: 28px 26px;
    }

    .hero-slide h1 {
        font-size: 27px;
    }

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

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

/* =======================================================
   RESPONSIVE — mobile / small tablet (≤ 760px)
   ======================================================= */
@media (max-width:760px) {
    .wrap {
        padding: 0 10px;
    }

    .section {
        padding: 0 10px;
    }

    .gallery {
        grid-template-columns: 1fr;
    }

    .thumb-rail {
        flex-direction: row;
        overflow-x: auto;
        order: 2;
    }

    .gallery-main {
        order: 1;
    }

    .thumb-rail img {
        width: 64px;
        height: 64px;
        flex: 0 0 auto;
    }

    .rating-summary {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .spec-table td:first-child {
        width: 130px;
        font-size: 11.5px;
    }

    .spec-table td {
        padding: 9px 6px;
        font-size: 11.5px;
    }

    .util-bar {
        font-size: 10px;
    }

        .util-bar .wrap {
            height: 26px;
        }

        .util-bar span:last-child {
            display: none;
        }

    .header-row {
        height: auto;
        flex-wrap: wrap;
        padding: 10px 0;
        gap: 8px;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: 0;
        color: var(--ink);
        width: 30px;
        height: 30px;
        order: 0;
        padding: 0;
        cursor: pointer;
    }

    .logo-img {
        height: 44px;
    }

    .logo {
        order: 1;
    }

        .logo .tag {
            display: none;
        }

    .sell-btn {
        display: none;
    }

    .header-actions {
        order: 2;
        gap: 16px;
        margin-left: auto;
    }

        .header-actions .label-main {
            display: none;
        }
        /* Account / Orders / Cart already live in the bottom mobile-nav — hide their header duplicates. Wishlist (no href) stays, since it isn't in the bottom nav. */
        .header-actions a[href="login.html"],
        .header-actions a[href="orders.html"],
        .header-actions .cart-item {
            display: none;
        }

    .search-wrap {
        order: 3;
        flex-basis: 100%;
        max-width: 100%;
        height: 38px;
    }

    /* Categories now live behind the hamburger drawer, not this bar */
    .catnav {
        display: none;
    }

    .category-drawer-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 110;
        background: rgba(18,61,34,.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
    }

        .category-drawer-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }

    .category-drawer {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 120;
        width: 82%;
        max-width: 340px;
        background: #fff;
        transform: translateX(-105%);
        transition: transform .3s ease;
        overflow-y: auto;
    }

        .category-drawer.open {
            transform: translateX(0);
        }

    .category-drawer-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 20px;
        border-bottom: 1px solid var(--line);
    }

    .drawer-logo-img {
        height: 30px;
        width: auto;
    }

    .category-drawer-head button {
        background: none;
        border: 0;
        font-size: 18px;
        color: var(--ink-soft);
        cursor: pointer;
    }

    .category-drawer-title {
        padding: 18px 20px 8px;
        font-family: var(--serif);
        font-weight: 600;
        font-size: 17px;
        color: var(--ink);
    }

    .category-drawer-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid var(--line);
        font-size: 14px;
        color: var(--ink);
    }

        .category-drawer-item span {
            color: var(--muted);
            font-size: 19px;
            line-height: 1;
        }

    .crumb {
        display: none;
    }

    .hero {
        gap: 1px;
    }

    .hero {
        min-height: 200px;
    }

    .hero-slide .txt {
        padding: 22px 20px;
        max-width: 100%;
    }

    .hero-slide h1 {
        font-size: 22px;
        line-height: 1.25;
    }

    .hero-slide p {
        font-size: 11.5px;
        max-width: 100%;
    }

    .promo-slide-txt {
        padding: 0 20px;
        max-width: 100%;
    }

        .promo-slide-txt h2 {
            font-size: 20px;
            margin-bottom: 12px;
        }

    .promo-slide-kicker {
        font-size: 9.5px;
        margin-bottom: 8px;
    }

    .promo-slide-cta {
        font-size: 11px;
    }

    .catstrip {
        padding: 12px 0 16px;
    }

    .catstrip-track {
        gap: 10px;
        padding: 0 10px;
    }

        .catstrip-track a {
            width: 78px;
            font-size: 10.5px;
        }

        .catstrip-track img {
            width: 78px;
            height: 78px;
        }

    .section-head {
        padding: 14px 14px 4px;
        flex-wrap: wrap;
        gap: 6px;
    }

        .section-head h2 {
            font-size: 17px;
        }

    .timer {
        font-size: 10.5px;
        padding: 5px 11px;
    }

    .pgrid, .pgrid.cols-4 {
        grid-template-columns: repeat(auto-fill,minmax(130px,160px));
    }

    .pcard {
        padding: 12px 12px 14px;
        min-width: 0;
    }

        .pcard .name {
            font-size: 12.5px;
        }

        .pcard .price {
            font-size: 14px;
        }

    .strip-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        font-size: 11px;
    }

    .vgrid {
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        min-width: 0;
    }

    .vcard .info {
        padding: 10px 12px;
    }

        .vcard .info .n {
            font-size: 13px;
        }

    .footer-grid {
        grid-template-columns: 1fr;
        padding: 28px 14px 90px;
    }

        .footer-grid > div {
            border-bottom: 1px solid rgba(255,255,255,.1);
            padding-bottom: 16px;
        }

            .footer-grid > div:last-child {
                border-bottom: 0;
            }

    .panel[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .pdp-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .pdp-gallery-col {
        position: static !important;
        top: auto !important;
    }

    .pdp-gallery-wrap {
        flex-direction: column-reverse;
    }

    .pdp-thumb-strip {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        order: 0;
    }

    .pdp-thumb-next {
        transform: none;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    .pdp-buybox {
        position: static;
        margin-top: 18px;
    }

    .checkout-grid {
        gap: 1px;
    }

    .row2 {
        grid-template-columns: 1fr;
    }

    .section[style*="grid-template-columns:230px 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .filter-block {
        margin-bottom: 16px;
    }

    /* Filter drawer: off-canvas panel that slides in from the left, triggered by the Filters button */
    .filter-toggle-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        justify-content: center;
        padding: 11px;
        border: 1px solid var(--ink);
        background: #fff;
        color: var(--ink);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .filter-panel {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 70;
        width: 82%;
        max-width: 320px;
        transform: translateX(-105%);
        transition: transform .3s ease;
        overflow-y: auto;
        border: 0;
        border-right: 1px solid var(--line);
        padding-bottom: 90px;
        background: #fff;
    }

        .filter-panel.open {
            transform: translateX(0);
        }

    .filter-drawer-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: var(--serif);
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 14px;
        margin-bottom: 14px;
        border-bottom: 1px solid var(--line);
    }

        .filter-drawer-head button {
            background: none;
            border: 0;
            font-size: 16px;
            cursor: pointer;
            color: var(--ink-soft);
        }

    .filter-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 60;
        background: rgba(18,61,34,.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
    }

        .filter-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }

    .filter-apply-btn {
        display: block;
        margin-top: 6px;
    }

    .cart-line {
        grid-template-columns: 70px 1fr;
    }

        .cart-line > div:last-child {
            grid-column: 1/-1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
        }

    .order-card {
        flex-wrap: wrap;
        padding: 14px;
    }

        .order-card img {
            width: 52px;
            height: 52px;
        }

        .order-card > div {
            min-width: 150px;
        }

    .authbox {
        margin: 26px 14px;
        padding: 26px 22px;
    }

    .mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: #fff;
        border-top: 1px solid var(--line);
        padding: 8px 4px 10px;
    }

    .mnav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        font-size: 9.5px;
        color: var(--muted);
        font-weight: 500;
        position: relative;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

        .mnav-item .mi svg {
            width: 19px;
            height: 19px;
            stroke: #17c94c;
            fill: none;
            stroke-width: 1.4;
        }

        .mnav-item.active {
            color: var(--ink);
        }

            .mnav-item.active .mi svg {
                stroke: var(--ink);
            }

    .mnav-badge {
        position: absolute;
        top: -3px;
        right: 24%;
        background: var(--gold-deep);
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        border-radius: 8px;
        padding: 0 4.5px;
    }

    footer {
        margin-bottom: 58px;
    }

    .mobile-buybar {
        display: flex;
        position: fixed;
        bottom: 58px;
        left: 0;
        right: 0;
        z-index: 49;
        background: #fff;
        border-top: 1px solid var(--line);
        padding: 10px 12px;
        gap: 10px;
        align-items: center;
    }

        .mobile-buybar .mb-price {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
            margin-right: auto;
        }

        .mobile-buybar .price {
            font-size: 15px;
        }

        .mobile-buybar .mrp {
            font-size: 10px;
        }

        .mobile-buybar .btn {
            padding: 10px 16px;
            font-size: 11px;
            white-space: nowrap;
        }
}

@media (max-width:420px) {
    .pgrid, .pgrid.cols-4 {
        grid-template-columns: repeat(auto-fill,minmax(130px,160px));
        gap: 0;
    }

    .header-actions {
        gap: 12px;
    }
}
/* ---------- CHECKOUT PAGE ---------- */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
    margin-top: 10px;
}

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

.checkout-form-col {
    padding: 24px;
}

.chk-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.chk-field {
    margin-bottom: 16px;
}

    .chk-field label {
        display: block;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 6px;
    }

.chk-input {
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    font-family: var(--sans);
    color: var(--ink);
    background: #fff;
}

    .chk-input:focus {
        outline: none;
        border-color: var(--gold-deep);
    }

.chk-err {
    display: block;
    color: #C0392B;
    font-size: 11.5px;
    margin-top: 4px;
}

.checkout-summary-col {
    position: sticky;
    top: 110px;
}

.chk-summary-panel {
    padding: 22px;
}

.chk-summary-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--line);
}

.chk-order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .chk-order-table th {
        text-align: left;
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--muted);
        padding: 0 0 10px;
        border-bottom: 1px solid var(--line);
    }

    .chk-order-table td {
        padding: 10px 0;
        border-bottom: 1px solid var(--line);
        color: var(--ink-soft);
    }

    .chk-order-table tfoot td {
        border-bottom: none;
        padding-top: 12px;
        font-weight: 600;
        color: var(--ink);
    }

    .chk-order-table .chk-total-row td {
        font-size: 17px;
        font-weight: 800;
        color: var(--gold-deep);
        padding-top: 8px;
    }

.chk-giftcard {
    margin: 18px 0;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

    .chk-giftcard label {
        display: block;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 8px;
    }

.chk-apply-btn {
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    border: none;
}

.chk-payment {
    margin-bottom: 18px;
}

.chk-pay-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
    font-weight: 600;
}

.chk-radio {
    accent-color: var(--gold-deep);
    width: 16px;
    height: 16px;
}

.chk-upi-box {
    background: var(--gold-pale);
    border-radius: 10px;
    padding: 14px;
    margin: 10px 0 4px;
    font-size: 12.5px;
    color: var(--ink-soft);
}

    .chk-upi-box label {
        display: block;
        margin: 10px 0 6px;
        font-size: 12.5px;
    }

.chk-place-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px 0;
    border-radius: 10px;
    background: var(--gold-deep);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .02em;
}

    .chk-place-btn:hover {
        background: var(--green2);
    }

.chk-remove-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--cream-dim);
    color: var(--muted);
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
}

    .chk-remove-btn:hover {
        background: #FBE3E3;
        color: #C0392B;
    }

/* ---------- MEGA MENU (category hover dropdown, desktop/laptop only) ---------- */
.catnav .wrap {
    position: relative;
    /* Back to a single scrolling line (original behaviour). The dropdown
       below is position:fixed and positioned by JS on hover instead of
       position:absolute, so it's no longer clipped by this row's
       overflow-x:auto - fixed elements aren't clipped by an ancestor's
       overflow unless that ancestor has a transform/filter, which this
       one doesn't. */
}

.catnav-item {
    position: relative;
    display: inline-block;
}

.mega-panel {
    /* top/left are set inline by showMegaPanel() in StorefrontMaster.master
       on mouseenter, matching the hovered item's real position even
       though the nav row scrolls horizontally. */
    position: fixed;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 2px solid var(--gold-deep);
    box-shadow: 0 16px 32px rgba(18,61,34,.16);
    min-width: 640px;
    max-width: 960px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 60;
}

.catnav-item:hover .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-panel-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 26px 30px;
}

.mega-col {
    min-width: 140px;
}

/* Scoped to .mega-panel (and !important as a safety net) so these don't
   lose to the older, more specific ".catnav a" rule, which was making
   these links render near-white on the panel's white background -
   invisible even once the clipping above was fixed. */
.mega-panel a.mega-col-head {
    display: block;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: var(--ink) !important;
    margin-bottom: 10px;
    font-family: var(--serif);
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 0 !important;
    white-space: normal !important;
    border-bottom: 0 !important;
}

    .mega-panel a.mega-col-head:hover {
        color: var(--gold-deep) !important;
    }

.mega-panel a.mega-col-link {
    display: block;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: var(--ink-soft) !important;
    padding: 5px 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: normal !important;
    border-bottom: 0 !important;
}

    .mega-panel a.mega-col-link:hover {
        color: var(--gold-deep) !important;
    }

/* Hover dropdowns don't work well with touch - keep this to real desktop/
   laptop pointers only, same breakpoint the tablet layout already uses. */
@media (max-width: 1024px) {
    .mega-panel {
        display: none !important;
    }
}

/* ---------- SUBCATEGORY CHIPS (mobile only, Category page) ----------
   Desktop par yeh chhupa rehta hai (wahan left sidebar wali list hai). */
.subcat-chips {
    display: none;
}

@media (max-width:760px) {
    .subcat-chips {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 4px 12px 14px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid var(--line);
    }

        .subcat-chips::-webkit-scrollbar {
            display: none;
        }

    .subcat-chip {
        flex: 0 0 auto;
        padding: 7px 14px;
        border-radius: 999px;
        border: 1.5px solid var(--line);
        background: #fff;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink-soft);
        white-space: nowrap;
    }

        .subcat-chip.active {
            background: var(--gold-deep);
            border-color: var(--gold-deep);
            color: #fff;
        }

        .subcat-chip .count {
            font-weight: 500;
            opacity: .7;
            margin-left: 5px;
        }
}

/* ---------- CATNAV ARROWS (Noon-style, desktop) ----------
   Buttons JS se bante hain (StorefrontMaster.master ka script). */
.catnav-arrow {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 52px !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: none !important;
    align-items: center !important;
    z-index: 5 !important;
}

    .catnav-arrow.show {
        display: flex !important;
    }

    .catnav-arrow svg {
        width: 18px !important;
        height: 18px !important;
        stroke: #fff !important;
        fill: none !important;
        stroke-width: 2.4 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
        transition: transform .15s !important;
    }

    .catnav-arrow:hover svg {
        transform: scale(1.15) !important;
    }

.catnav-arrow-right {
    right: max(0px, calc(50% - 620px)) !important;
    justify-content: flex-end !important;
    padding-right: 10px !important;
    background: linear-gradient(to left, var(--green2) 55%, rgba(12,127,49,0)) !important;
}

.catnav-arrow-left {
    left: max(0px, calc(50% - 620px)) !important;
    justify-content: flex-start !important;
    padding-left: 10px !important;
    background: linear-gradient(to right, var(--green) 55%, rgba(23,201,76,0)) !important;
}

/* ---------- CATSTRIP ARROWS (desktop) ----------
   Safed gol arrows, photo wali category strip ke dono taraf. */
.catstrip-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid var(--line) !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(18,61,34,.18) !important;
    cursor: pointer !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 5 !important;
}

    .catstrip-arrow.show {
        display: flex !important;
    }

    .catstrip-arrow svg {
        width: 16px !important;
        height: 16px !important;
        stroke: var(--ink) !important;
        fill: none !important;
        stroke-width: 2.4 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    .catstrip-arrow:hover {
        border-color: var(--gold-deep) !important;
    }

.catstrip-arrow-left {
    left: 8px !important;
}

.catstrip-arrow-right {
    right: 8px !important;
}

/* Mobile: arrows nahi, swipe se scroll */
@media (max-width:760px) {
    .catnav-arrow,
    .catnav-arrow.show,
    .catstrip-arrow,
    .catstrip-arrow.show {
        display: none !important;
    }
}
/* =====================================================================
   GROUPON-STYLE HEADER (desktop/laptop)
   White header: logo + green-outlined pill search + inline icon links,
   then a white category row with a small icon left of each name and a
   round arrow button on the right. Placed last so it wins over the older
   green-gradient header/nav rules above.
   ===================================================================== */

/* ---- search pill: green outline + round green button ---- */
.search-wrap {
    max-width: 640px;
    background: #fff;
    border: 2px solid var(--gold-deep);
    border-radius: 999px;
    align-items: center;
}

    .search-wrap input {
        padding: 0 18px;
        font-size: 13.5px;
    }

    .search-wrap a {
        flex: 0 0 auto;
        height: calc(100% - 8px);
        aspect-ratio: 1 / 1;
        margin: 4px;
        border-radius: 50%;
        background: var(--gold-deep);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .15s;
    }

        .search-wrap a:hover {
            background: var(--ink);
        }

        .search-wrap a svg {
            stroke: #fff;
        }

@media (min-width: 761px) {

    /* ---- header row: a bit more compact ---- */
    .header-row {
        height: 76px;
    }

    .logo-img {
        height: 54px;
    }

    /* ---- right side: icon + label in one line (not stacked) ---- */
    .header-actions {
        gap: 22px;
    }

        .header-actions .item {
            flex-direction: row;
            gap: 7px;
        }

            .header-actions .item.cart-item {
                flex-direction: row;
            }

        .header-actions .icon {
            width: 20px;
            height: 20px;
        }

            .header-actions .icon svg {
                stroke: var(--ink);
            }

        .header-actions .item:hover .icon svg {
            stroke: var(--gold-deep);
        }

        .header-actions .label-main {
            font-size: 12.5px;
            font-weight: 500;
            letter-spacing: 0;
            color: var(--ink);
        }

        .header-actions .item:hover .label-main {
            color: var(--gold-deep);
        }

    /* cart count badge sits on the cart icon's top-right corner */
    .cart-count {
        top: -9px;
        right: auto;
        left: 12px;
    }

    .sell-btn {
        background: #fff;
        color: var(--ink) !important;
        border: 1.5px solid var(--ink);
        border-radius: 999px;
        padding: 8px 18px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .02em;
        text-transform: none;
    }

        .sell-btn:hover {
            background: var(--ink);
            color: #fff !important;
        }
}

/* ---- category row: white, icon + label ---- */
.catnav {
    background: #fff;
}

    .catnav .wrap > a,
    .catnav .catnav-item > a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: var(--ink);
        white-space: nowrap;
        border-bottom: 2px solid transparent;
    }

        .catnav .wrap > a:hover,
        .catnav .catnav-item:hover > a {
            color: var(--gold-deep);
            border-bottom-color: var(--gold-deep);
        }

    .catnav .catnav-item {
        flex: 0 0 auto;
    }

    .catnav .wrap > a {
        flex: 0 0 auto;
    }

.catnav-ico {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

    .catnav-ico svg {
        width: 100%;
        height: 100%;
    }

/* ---- category row arrows: round white button with soft shadow ---- */
.catnav-arrow {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid var(--line) !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(18,61,34,.18) !important;
    justify-content: center !important;
    padding: 0 !important;
}

    .catnav-arrow svg {
        stroke: var(--ink) !important;
        width: 16px !important;
        height: 16px !important;
    }

.catnav-arrow-right {
    right: max(8px, calc(50% - 612px)) !important;
    background: #fff !important;
}

.catnav-arrow-left {
    left: max(8px, calc(50% - 612px)) !important;
    background: #fff !important;
}

/* ---------- "Become a Seller" inside the mobile category drawer ----------
   The header button is hidden on mobile, so it lives at the bottom of the
   hamburger drawer instead (drawer itself is mobile-only). */
.category-drawer-sell {
    padding: 18px 20px 28px;
}

.category-drawer-sell-btn {
    display: block;
    text-align: center;
    background: var(--gold-deep);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    padding: 13px 16px;
    border-radius: 999px;
}

.category-drawer-sell-link {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--ink-soft);
    text-decoration: underline;
}

/* =====================================================================
   PRODUCT PAGE: bigger image + slider arrows, black selected size,
   blue "Add to cart" button
   ===================================================================== */

/* Bigger gallery on laptops/desktops (mobile layout is handled by the
   existing max-width rules above, which still win with !important). */
@media (min-width: 1100px) {
    .pdp-grid {
        grid-template-columns: 600px 1fr;
    }

    .pdp-thumb-strip {
        max-height: 560px;
    }

        .pdp-thumb-strip img {
            width: 60px;
            height: 60px;
        }
}

.pdp-thumb-strip {
    position: relative;
}

.hero-tile img {
    transition: opacity .2s ease;
}

/* slider arrows + "1 / 4" counter on the big image */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.92);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background .15s, box-shadow .15s;
}

    .hero-nav:hover {
        background: #fff;
        box-shadow: 0 3px 12px rgba(0,0,0,.28);
    }

    .hero-nav svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.hero-prev {
    left: 10px;
}

.hero-next {
    right: 10px;
}

.hero-count {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}

/* one photo only -> no arrows / counter */
.hero-tile.single-img .hero-nav,
.hero-tile.single-img .hero-count {
    display: none;
}

/* Selected size / variant chip: black background */
.variant-chip:hover {
    border-color: #111;
}

.variant-chip.active {
    background: #111;
    border-color: #111;
    color: #fff;
}

/* Add to cart: solid blue, white bold caps */
.pdp-buybar .addcart-btn {
    background: #2D4BD6;
    border: 0;
    color: #fff;
    border-radius: 10px;
    min-height: 42px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

    .pdp-buybar .addcart-btn:hover {
        background: #2039B3;
        color: #fff;
    }

    .pdp-buybar .addcart-btn.aspNetDisabled {
        opacity: .5;
        cursor: not-allowed;
    }

.pdp-buybar .buy-now-gold {
    min-height: 42px;
}

/* Pincode "Check" button: black background, white text */
.pincode-check button {
    background: #111;
    border-color: #111;
    color: #fff;
}

    .pincode-check button:hover {
        background: #333;
        border-color: #333;
        color: #fff;
    }

/* Category strip labels: solid black + bold */
.catstrip-track a,
.catstrip-track a:hover,
.catstrip-track a span.cat-label {
    color: #000 !important;
    font-weight: 700 !important;
}

/* Product card name: solid black + bold */
.pcard .name,
.pcard:hover .name {
    color: #000 !important;
    font-weight: 700 !important;
}

/* Top category nav (Men Fashion, Women Fashion...): black + bold */
.catnav .wrap > a,
.catnav .catnav-item > a,
.catnav .wrap > a span,
.catnav .catnav-item > a span {
    color: #000 !important;
    font-weight: 700 !important;
}

/* Desktop: smaller category strip images (mobile keeps its own 78px) */
@media (min-width:761px) {
    .catstrip-track {
        gap: 12px;
    }

        .catstrip-track a {
            width: 72px;
            font-size: 11px;
        }

        .catstrip-track img {
            width: 72px;
            height: 72px;
            margin-bottom: 6px;
        }
}

/* =====================================================================
   Footer / policy pages (About, Contact, FAQ, Delivery, Return,
   Privacy, Terms)  -  shared styles, prefix .fp-
   ===================================================================== */
.fp-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---- hero ---- */
.fp-hero {
    background: linear-gradient(120deg,#0b3a1d 0%,#0C7F31 60%,#1aa04a 100%);
    color: #fff;
    padding: 26px 0 34px;
    position: relative;
    overflow: hidden;
}

    .fp-hero::after {
        content: "";
        position: absolute;
        right: -80px;
        top: -80px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: rgba(255,255,255,.07);
    }

    .fp-hero::before {
        content: "";
        position: absolute;
        right: 140px;
        bottom: -120px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: rgba(255,255,255,.05);
    }

.fp-crumb {
    font-size: 12.5px;
    opacity: .85;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

    .fp-crumb a {
        color: #fff;
        text-decoration: none;
    }

        .fp-crumb a:hover {
            text-decoration: underline;
        }

    .fp-crumb span {
        margin: 0 8px;
        opacity: .7;
    }

.fp-hero-row {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.fp-hero-badge {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    flex: 0 0 auto;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-hero-ico {
    width: 32px;
    height: 32px;
    color: #fff;
}

.fp-hero h1 {
    margin: 0 0 4px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
    font-family: var(--serif);
}

.fp-hero p {
    margin: 0;
    font-size: 15px;
    opacity: .92;
}

/* ---- layout ---- */
.fp-layout {
    display: grid;
    grid-template-columns: 260px minmax(0,1fr);
    gap: 26px;
    margin-top: -18px;
    padding-bottom: 10px;
    align-items: start;
    position: relative;
    z-index: 2;
}

.fp-side {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 6px 22px rgba(18,61,34,.08);
    position: sticky;
    top: 14px;
}

.fp-side-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #777;
    padding: 8px 10px 10px;
}

.fp-side nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fp-side a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 10px;
    color: #222;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}

    .fp-side a:hover {
        background: #f1f7f3;
        color: #0C7F31;
    }

    .fp-side a.active {
        background: #0C7F31;
        color: #fff;
    }

.fp-side-ico {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.fp-main {
    min-width: 0;
    padding-top: 18px;
}

/* ---- cards ---- */
.fp-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 24px 26px;
    margin-bottom: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,.03);
}

    .fp-card p {
        font-size: 14.5px;
        line-height: 1.75;
        color: #333;
        margin: 0 0 12px;
    }

        .fp-card p:last-child {
            margin-bottom: 0;
        }

.fp-lead {
    border-left: 5px solid #0C7F31;
    background: linear-gradient(90deg,#f3faf5,#fff 40%);
}

    .fp-lead p {
        font-size: 15.5px;
        color: #1f1f1f;
    }

.fp-h2 {
    margin: 0 0 14px;
    font-size: 20px;
    color: #123D22;
    font-weight: 700;
}

.fp-small {
    font-size: 13.5px !important;
    color: #555 !important;
    margin-top: 14px !important;
}

.fp-card a, .fp-cta a:not(.fp-btn), .fp-contact a, .fp-lead a {
    color: #0C7F31;
    font-weight: 600;
}

.fp-cards {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

.fp-cards-3 {
    grid-template-columns: repeat(3, minmax(0,1fr));
}

.fp-mini, .fp-contact {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 22px 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.03);
    transition: transform .18s, box-shadow .18s;
}

    .fp-mini:hover, .fp-contact:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(18,61,34,.12);
    }

.fp-mini-ico {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 14px;
    background: #e8f5ec;
    color: #0C7F31;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-ico {
    width: 26px;
    height: 26px;
}

.fp-mini h3, .fp-contact h3 {
    margin: 0 0 6px;
    font-size: 16px;
    color: #111;
}

.fp-mini p, .fp-contact p {
    margin: 4px 0 0;
    font-size: 13.5px;
    color: #666;
    line-height: 1.55;
}

.fp-contact a {
    display: inline-block;
    font-size: 15px;
    word-break: break-all;
}

.fp-soon {
    display: inline-block;
    background: #fff4d6;
    color: #8a6100;
    font-weight: 700;
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 20px;
}

.fp-addr {
    display: block;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

/* ---- stats ---- */
.fp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.fp-stats-3 {
    grid-template-columns: repeat(3, minmax(0,1fr));
}

.fp-stat {
    background: #123D22;
    color: #fff;
    border-radius: 14px;
    padding: 20px 14px;
    text-align: center;
}

    .fp-stat b {
        display: block;
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 4px;
        color: #fff;
    }

    .fp-stat span {
        font-size: 12.5px;
        opacity: .85;
    }

/* ---- steps ---- */
.fp-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}

.fp-step {
    background: #f6faf7;
    border: 1px solid #e1efe5;
    border-radius: 12px;
    padding: 16px 14px;
}

    .fp-step i {
        display: inline-flex;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #0C7F31;
        color: #fff;
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
    }

    .fp-step p {
        margin: 0 !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

/* ---- notes ---- */
.fp-note {
    background: #fff8e1;
    border: 1px solid #f1deaa;
    border-left: 4px solid #e0a800;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.65;
    color: #5c4400;
    margin: 14px 0 18px;
}

.fp-warn {
    background: #fdecea;
    border: 1px solid #f5c2c0;
    border-left: 4px solid #b3261e;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.65;
    color: #7a1c16;
}

.fp-card .fp-note:last-child {
    margin-bottom: 0;
}

.fp-legal {
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #123D22;
    margin: 6px 0 18px;
}

/* ---- FAQ accordion ---- */
.fp-faq {
    padding: 10px 22px;
}

.fp-qa {
    border-bottom: 1px solid #ececec;
}

    .fp-qa:last-child {
        border-bottom: 0;
    }

    .fp-qa summary {
        list-style: none;
        cursor: pointer;
        padding: 17px 36px 17px 0;
        font-weight: 700;
        font-size: 15.5px;
        color: #111;
        position: relative;
    }

        .fp-qa summary::-webkit-details-marker {
            display: none;
        }

        .fp-qa summary::after {
            content: "+";
            position: absolute;
            right: 2px;
            top: 50%;
            transform: translateY(-50%);
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #e8f5ec;
            color: #0C7F31;
            font-size: 19px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

    .fp-qa[open] summary {
        color: #0C7F31;
    }

        .fp-qa[open] summary::after {
            content: "\2212";
            background: #0C7F31;
            color: #fff;
        }

.fp-qa-a {
    padding: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.75;
    color: #333;
}

    .fp-qa-a p {
        margin: 0 0 10px;
    }

    .fp-qa-a ul, .fp-qa-a ol {
        margin: 0 0 10px;
        padding-left: 22px;
    }

    .fp-qa-a li {
        margin-bottom: 6px;
        list-style: inherit;
    }

    .fp-qa-a ul li {
        list-style: disc;
    }

    .fp-qa-a ol li {
        list-style: decimal;
    }

.fp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .fp-chips span {
        background: #f1f7f3;
        border: 1px solid #d9eadf;
        color: #123D22;
        font-weight: 600;
        font-size: 13px;
        padding: 7px 13px;
        border-radius: 20px;
    }

/* ---- return page ---- */
.fp-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(120deg,#123D22,#0C7F31);
    color: #fff;
    border-radius: 14px;
    padding: 22px 26px;
    margin-bottom: 18px;
}

.fp-banner-big {
    font-size: 34px;
    font-weight: 800;
    background: rgba(255,255,255,.16);
    border-radius: 12px;
    padding: 12px 18px;
    white-space: nowrap;
}

.fp-banner h2 {
    margin: 0 0 3px;
    font-size: 20px;
    color: #fff;
}

.fp-banner p {
    margin: 0;
    opacity: .9;
    font-size: 14px;
}

.fp-timeline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 16px;
}

    .fp-timeline div {
        background: #f6faf7;
        border: 1px solid #e1efe5;
        border-radius: 12px;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .fp-timeline i {
        font-style: normal;
        font-size: 22px;
        font-weight: 800;
        color: #0C7F31;
        white-space: nowrap;
    }

    .fp-timeline span {
        font-size: 13.5px;
        color: #444;
        line-height: 1.4;
    }

.fp-x {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .fp-x li {
        position: relative;
        padding: 11px 0 11px 36px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 14.5px;
        line-height: 1.55;
        color: #333;
    }

        .fp-x li:last-child {
            border-bottom: 0;
        }

        .fp-x li::before {
            content: "\00d7";
            position: absolute;
            left: 0;
            top: 10px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #fdecea;
            color: #b3261e;
            font-weight: 700;
            font-size: 17px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

/* ---- long documents (privacy / terms) ---- */
.fp-toc {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 22px;
}

    .fp-toc b {
        grid-column: 1 / -1;
        font-size: 12px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #777;
    }

    .fp-toc a {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        font-weight: 600;
        color: #222;
        text-decoration: none;
        padding: 6px 0;
    }

        .fp-toc a:hover {
            color: #0C7F31;
        }

    .fp-toc i, .fp-sec h2 i {
        font-style: normal;
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: #e8f5ec;
        color: #0C7F31;
        font-weight: 700;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.fp-doc {
    padding: 8px 28px 22px;
}

.fp-sec {
    padding-top: 22px;
    border-bottom: 1px solid #efefef;
    padding-bottom: 6px;
    scroll-margin-top: 12px;
}

    .fp-sec:last-child {
        border-bottom: 0;
    }

    .fp-sec h2 {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 14px;
        font-size: 18.5px;
        color: #123D22;
    }

    .fp-sec h3 {
        margin: 6px 0 8px;
        font-size: 15.5px;
        color: #111;
    }

    .fp-sec p {
        font-size: 14.5px;
        line-height: 1.8;
        color: #333;
        margin: 0 0 14px;
    }

    .fp-sec ul {
        margin: 0 0 14px;
        padding-left: 22px;
    }

        .fp-sec ul li {
            list-style: disc;
            font-size: 14.5px;
            line-height: 1.7;
            color: #333;
            margin-bottom: 6px;
        }

.fp-clause {
    display: flex;
    gap: 14px;
    margin-bottom: 4px;
}

    .fp-clause > span {
        flex: 0 0 38px;
        font-weight: 700;
        font-size: 13.5px;
        color: #0C7F31;
        padding-top: 2px;
    }

    .fp-clause > div {
        flex: 1;
        min-width: 0;
    }

/* ---- call to action ---- */
.fp-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: #f1f7f3;
    border: 1px solid #d9eadf;
    border-radius: 14px;
    padding: 20px 24px;
    margin: 6px 0 26px;
}

    .fp-cta h3 {
        margin: 0 0 3px;
        font-size: 17px;
        color: #123D22;
    }

    .fp-cta p {
        margin: 0;
        font-size: 13.5px;
        color: #555;
    }

.fp-btn {
    display: inline-block;
    background: #0C7F31;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    transition: background .15s, transform .15s;
}

    .fp-btn:hover {
        background: #096326;
        transform: translateY(-1px);
    }

/* ---- tablet / mobile ---- */
@media (max-width: 900px) {
    .fp-layout {
        grid-template-columns: minmax(0,1fr);
        gap: 0;
        margin-top: -14px;
    }

    .fp-side {
        min-width: 0;
        position: static;
        padding: 8px;
        margin-bottom: 4px;
    }

    .fp-side-title {
        display: none;
    }

    .fp-side nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 6px;
        scrollbar-width: none;
    }

        .fp-side nav::-webkit-scrollbar {
            display: none;
        }

    .fp-side a {
        white-space: nowrap;
        padding: 9px 13px;
        font-size: 13px;
        flex: 0 0 auto;
    }

    .fp-side-ico {
        display: none;
    }

    .fp-main {
        padding-top: 14px;
    }

    .fp-steps, .fp-stats {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 640px) {
    .fp-hero {
        padding: 18px 0 30px;
    }

    .fp-hero-badge {
        width: 50px;
        height: 50px;
        border-radius: 13px;
    }

    .fp-hero-ico {
        width: 26px;
        height: 26px;
    }

    .fp-hero h1 {
        font-size: 23px;
    }

    .fp-hero p {
        font-size: 13.5px;
    }

    .fp-card {
        padding: 18px 16px;
    }

    .fp-lead p {
        font-size: 14.5px;
        line-height: 1.7;
    }

    .fp-doc {
        padding: 4px 16px 16px;
    }

    .fp-cards-3, .fp-stats-3, .fp-toc, .fp-timeline {
        grid-template-columns: 1fr;
    }

    .fp-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .fp-clause {
        flex-direction: column;
        gap: 2px;
    }

        .fp-clause > span {
            flex: none;
        }

    .fp-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .fp-faq {
        padding: 4px 16px;
    }
}

/* Mobile: product grid fills full width (2 equal columns, no empty space on the right) */
@media (max-width:760px) {
    .pgrid, .pgrid.cols-4 {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}

/* Mobile: no white gap below footer (footer grey now runs under the fixed bottom nav)
   + bigger / bolder / darker bottom-nav icons and labels */
@media (max-width: 760px) {
    body {
        padding-bottom: 0 !important;
    }

    footer {
        margin-bottom: 0 !important;
        padding-bottom: 72px;
    }

    .mobile-nav {
        padding: 9px 4px 11px;
        box-shadow: 0 -2px 10px rgba(0,0,0,.08);
    }

    .mnav-item {
        font-size: 11px !important;
        font-weight: 800 !important;
        color: #000 !important;
        gap: 4px;
        letter-spacing: .01em;
    }

        .mnav-item .mi svg {
            width: 24px !important;
            height: 24px !important;
            stroke: #0C7F31 !important;
            stroke-width: 2.1 !important;
        }

        .mnav-item.active {
            color: #0C7F31 !important;
        }

            .mnav-item.active .mi svg {
                stroke: #0C7F31 !important;
            }

    .mnav-badge {
        font-size: 10px;
        font-weight: 800;
        top: -4px;
    }

}

/* ===== PDP gallery - MOBILE: big image on top, thumbnails in one row BELOW (swipe) ===== */
@media (max-width: 760px) {
    .pdp-gallery-wrap {
        flex-direction: column !important;
        gap: 10px;
    }

    .pdp-hero-row {
        order: 1;
        width: 100%;
    }

    .hero-tile {
        padding-top: 100%;
        background: #fff;
    }

        .hero-tile img {
            object-fit: contain;
        }

    .pdp-thumb-strip {
        order: 2 !important;
        flex-direction: row !important;
        justify-content: flex-start;
        align-items: center;
        max-height: none !important;
        width: 100%;
        gap: 8px;
        margin-top: 0;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

        .pdp-thumb-strip::-webkit-scrollbar {
            display: none;
        }

        .pdp-thumb-strip img {
            width: calc((100% - 32px) / 4.5);
            height: auto;
            aspect-ratio: 1 / 1;
            flex: 0 0 auto;
            object-fit: contain;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 0;
            scroll-snap-align: start;
        }

            .pdp-thumb-strip img.active {
                border: 1.5px solid var(--ink);
            }
}