/* =========================================================
   CULT INDIA — MOST VIEWED
========================================================= */

.cult-most-viewed {
    --mv-ink: #0A0A0A;
    --mv-charcoal: #161616;
    --mv-ivory: #F3EEE5;
    --mv-paper: #FAF8F3;
    --mv-stone: #B8AA96;
    --mv-stone-dark: #817565;
    --mv-gold: #D7A06D;
    --mv-red: #9D3C2D;
    --mv-indigo: #24384B;
    --mv-green: #5A6B3B;

    --mv-line: rgba(10,10,10,.09);
    --mv-line-strong: rgba(10,10,10,.15);

    background: var(--mv-ivory);
    color: var(--mv-ink);

    min-height: 100vh;
}


/* =========================================================
   CONTAINER
========================================================= */

.cult-mv-container {
    width: min(
        calc(100% - clamp(40px, 10vw, 128px)),
        1440px
    );

    margin-inline: auto;
}
.container:has(.cult-most-viewed) {
    width: auto;
    padding: 0;
    max-width: none;
    justify-content: center;
}

/* =========================================================
   BREADCRUMB
========================================================= */

.cult-mv-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;

    padding-top: 30px;

    color: var(--mv-stone-dark);

    font-family: "Inter", sans-serif;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .07em;
}

.cult-mv-crumb a {
    color: inherit;
    text-decoration: none;
}

.cult-mv-crumb a:hover {
    color: var(--mv-red);
}

.cult-mv-crumb__sep {
    opacity: .45;
}


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

.cult-mv-banner {
    padding:
        clamp(38px, 5vw, 58px)
        0
        clamp(45px, 6vw, 68px);
}

.cult-mv-title {
    margin: 0;

    color: var(--mv-ink);

    font-family: "Fraunces", serif;
    font-size: clamp(54px, 8.3vw, 120px);
    font-weight: 400;
    line-height: .94;

    letter-spacing: -.045em;
}

.cult-mv-title em {
    color: var(--mv-red);

    font-style: italic;
    font-weight: 300;
}


/* HERO BOTTOM */

.cult-mv-banner-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-top: 34px;
    padding-top: 29px;

    border-top: 1px solid var(--mv-line-strong);
}

.cult-mv-intro {
    max-width: 48ch;

    margin: 0;

    color: #3A3630;

    font-family: "Fraunces", serif;
    font-size: clamp(16px, 1.5vw, 20px);
    font-style: italic;
    font-weight: 300;
    line-height: 1.58;
}


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

.cult-mv-meta {
    display: flex;
    align-items: flex-end;

    gap: clamp(22px, 3vw, 42px);

    flex-shrink: 0;
}

.cult-mv-meta__item {
    color: var(--mv-stone-dark);

    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.35;

    letter-spacing: .15em;
    text-transform: uppercase;
}

.cult-mv-meta__item b {
    display: block;

    margin-bottom: 5px;

    color: var(--mv-ink);

    font-family: "Fraunces", serif;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 400;
    line-height: 1;

    letter-spacing: -.01em;
    text-transform: none;
}


/* LIVE */

.cult-mv-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding-bottom: 2px;

    color: var(--mv-green);

    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 600;

    letter-spacing: .15em;
    text-transform: uppercase;
}

.cult-mv-live::before {
    content: "";

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 999px;

    background: var(--mv-green);

    animation: cultMvLivePulse 2s ease-in-out infinite;
}

@keyframes cultMvLivePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(1.2);
    }

}


/* =========================================================
   TIME TABS
========================================================= */

.cult-mv-tabs {
    min-height: 72px;

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

    gap: 28px;

    border-top: 1px solid var(--mv-line-strong);
    border-bottom: 1px solid var(--mv-line-strong);
}

.cult-mv-tabs-left {
    min-width: 0;

    display: flex;
    align-items: stretch;

    overflow-x: auto;

    scrollbar-width: none;
}

.cult-mv-tabs-left::-webkit-scrollbar {
    display: none;
}

.cult-mv-tab {
    position: relative;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;

    min-height: 71px;

    margin-right: 32px;

    color: var(--mv-stone-dark);

    font-family: "Fraunces", serif;
    font-size: 13px;
    font-weight: 400;

    text-decoration: none;

    transition: color .2s ease;
}

.cult-mv-tab:hover {
    color: var(--mv-ink);
}

.cult-mv-tab.is-active {
    color: var(--mv-ink);
    font-weight: 500;
}

.cult-mv-tab.is-active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 1px;

    background: var(--mv-red);
}


/* UPDATED */

.cult-mv-updated {
    flex-shrink: 0;

    color: var(--mv-stone-dark);

    font-family: "Fraunces", serif;
    font-size: 11px;
    font-style: italic;

    white-space: nowrap;
}

.cult-mv-updated b {
    color: var(--mv-ink);

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;

    letter-spacing: .04em;
}


/* =========================================================
   PRODUCT AREA
========================================================= */

.cult-mv-products {
    padding:
        clamp(42px, 5vw, 62px)
        0
        clamp(75px, 8vw, 110px);
}


/*
 * IMPORTANT:
 *
 * .cult-shop__grid comes from your existing Shop CSS.
 * We deliberately DO NOT recreate product-card styles here.
 *
 * This keeps Shop and Most Viewed perfectly consistent.
 */

.cult-mv-grid {
    position: relative;
}


/* =========================================================
   MOST VIEWED ITEM WRAPPER
========================================================= */

.cult-most-viewed-item {
    position: relative;

    min-width: 0;
}


/*
 * The existing product card remains untouched inside.
 */

.cult-most-viewed-item > .cult-product-card,
.cult-most-viewed-item > article {
    width: 100%;
}


/* =========================================================
   RANK NUMBER
========================================================= */

.cult-most-viewed-rank {
    position: absolute;
    top: 16px;
    left: 17px;
    z-index: 2;
    pointer-events: none;
    color: rgba(255,255,255,.68);
    font-family: "Fraunces", serif;
    font-size: 34px;
    font-style: italic;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.035em;
}


/* TOP THREE */

.cult-most-viewed-item.is-top-three
.cult-most-viewed-rank {
    color: var(--mv-gold);
}


/* =========================================================
   WISHLIST POSITION PROTECTION
========================================================= */

/*
 * Keeps existing wishlist clickable above everything.
 */

.cult-most-viewed-item
.cult-card-wishlist {
    z-index: 30;
}


/* =========================================================
   VIEW COUNT
========================================================= */

.cult-most-viewed-count {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 14px;

    margin-top: 13px;
    padding-top: 12px;

    border-top: 1px solid var(--mv-line);

    color: var(--mv-stone-dark);
}

.cult-most-viewed-count__label {
    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 600;

    letter-spacing: .15em;
    text-transform: uppercase;
}

.cult-most-viewed-count__value {
    display: inline-flex;
    align-items: baseline;

    gap: 5px;

    font-family: "Inter", sans-serif;
    font-size: 9px;
}

.cult-most-viewed-count__value b {
    color: var(--mv-ink);

    font-family: "Fraunces", serif;
    font-size: 14px;
    font-weight: 400;
}


/* =========================================================
   LOAD MORE
========================================================= */

.cult-mv-more {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 19px;

    margin-top: clamp(48px, 6vw, 70px);

    text-align: center;
}

.cult-mv-more__info {
    color: var(--mv-stone-dark);

    font-family: "Fraunces", serif;
    font-size: 11px;
    font-style: italic;
}

.cult-mv-more__info b {
    color: var(--mv-ink);

    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 600;
}

.cult-mv-more__button {
    display: inline-block;

    padding-bottom: 4px;

    border-bottom: 1px solid var(--mv-ink);

    color: var(--mv-ink);

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;

    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;

    transition:
        color .2s ease,
        border-color .2s ease;
}

.cult-mv-more__button:hover {
    color: var(--mv-red);
    border-color: currentColor;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.cult-mv-empty {
    max-width: 620px;

    margin: 20px auto;

    padding: clamp(55px, 8vw, 100px) 30px;

    text-align: center;

    border: 1px solid var(--mv-line-strong);

    background: rgba(250,248,243,.5);
}

.cult-mv-empty__eyebrow {
    display: block;

    margin-bottom: 15px;

    color: var(--mv-red);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .18em;
    text-transform: uppercase;
}

.cult-mv-empty h2 {
    margin: 0;

    color: var(--mv-ink);

    font-family: "Fraunces", serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 400;
    line-height: 1.08;

    letter-spacing: -.025em;
}

.cult-mv-empty h2 em {
    color: var(--mv-gold);

    font-weight: 300;
}

.cult-mv-empty p {
    max-width: 44ch;

    margin: 18px auto 24px;

    color: var(--mv-stone-dark);

    font-size: 13px;
    line-height: 1.65;
}

.cult-mv-empty > a {
    display: inline-block;

    padding-bottom: 3px;

    border-bottom: 1px solid;

    color: var(--mv-ink);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .15em;
    text-transform: uppercase;
    text-decoration: none;
}


/* =========================================================
   FALLBACK PRODUCT CARD
========================================================= */

.cult-mv-fallback-card__image {
    display: block;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: var(--mv-stone);
}

.cult-mv-fallback-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.cult-mv-fallback-card h3 {
    margin: 13px 0 0;

    font-family: "Fraunces", serif;
    font-size: 17px;
    font-weight: 400;
}

.cult-mv-fallback-card__price {
    margin-top: 8px;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.cult-mv-foot {
    padding:
        clamp(48px, 6vw, 70px)
        0
        clamp(65px, 8vw, 95px);

    border-top: 1px solid var(--mv-line-strong);
}

.cult-mv-foot-inner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 42px;
}

.cult-mv-foot h3 {
    max-width: 24ch;

    margin: 0;

    color: var(--mv-ink);

    font-family: "Fraunces", serif;
    font-size: clamp(23px, 2.5vw, 31px);
    font-weight: 400;
    line-height: 1.2;

    letter-spacing: -.02em;
}

.cult-mv-foot h3 em {
    color: var(--mv-gold);

    font-style: italic;
    font-weight: 300;
}

.cult-mv-foot-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 28px;
}

.cult-mv-foot-links a {
    padding-bottom: 3px;

    border-bottom: 1px solid var(--mv-ink);

    color: var(--mv-ink);

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;

    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;

    transition:
        color .2s ease,
        border-color .2s ease;
}

.cult-mv-foot-links a:hover {
    color: var(--mv-red);
    border-color: currentColor;
}

.cult-shop__grid.cult-mv-grid {
    margin: 0px;
}
/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .cult-mv-banner-row {
        align-items: flex-start;
        flex-direction: column;

        gap: 28px;
    }

    .cult-mv-meta {
        width: 100%;
    }

}


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

@media (max-width: 767px) {

    .cult-mv-container {
        width: calc(100% - 40px);
    }


    /* HERO */

    .cult-mv-banner {
        padding-top: 35px;
    }

    .cult-mv-banner-row {
        margin-top: 25px;
        padding-top: 23px;
    }


    /* STATS */

    .cult-mv-meta {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));

        gap: 24px 18px;
    }

    .cult-mv-live {
        grid-column: 1 / -1;
    }


    /* TABS */

    .cult-mv-tabs {
        min-height: auto;

        align-items: stretch;
        flex-direction: column;

        gap: 0;
    }

    .cult-mv-tabs-left {
        width: 100%;
    }

    .cult-mv-tab {
        min-height: 58px;

        margin-right: 23px;
    }

    .cult-mv-updated {
        padding: 13px 0;

        border-top: 1px solid var(--mv-line);
    }


    /* RANK */

    .cult-most-viewed-rank {
        top: 11px;
        left: 11px;

        font-size: 36px;
    }


    /* FOOT */

    .cult-mv-foot-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


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

@media (max-width: 480px) {

    .cult-mv-container {
        width: calc(100% - 30px);
    }

    .cult-mv-meta {
        grid-template-columns: 1fr 1fr;
    }

    .cult-mv-foot-links {
        align-items: flex-start;
        flex-direction: column;

        gap: 16px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cult-mv-live::before {
        animation: none;
    }

}