/* =====================================================================
   FESTIVAL THEMES – shared pieces
   Put in /theme/khichdi/css/festival.css
   Only loaded while a festival is running. Colours and decoration come
   from the festival's own file: /theme/khichdi/css/festivals/{key}.css
   Every class here starts with "fx-" so nothing clashes with the normal site.
   ===================================================================== */

/* Defaults – each festival file overrides these inside  .fest-{key} { ... } */
.fest {
    --fx-ink: #330B3F;              /* dark text / buttons            */
    --fx-accent: #ffc107;           /* highlight (code chip, ticket)  */
    --fx-cream: #fff8e1;            /* soft background                */
    --fx-line: #f0c64a;             /* dashed borders                 */
    --fx-bar-bg: linear-gradient(90deg, #2a0835, #4a1559 50%, #2a0835);
    --fx-bar-text: #fff;
    --fx-bar-muted: #e6cdee;
    --fx-hero-bg: radial-gradient(ellipse at 75% 30%, #6a2380 0%, #3a0d48 45%, #1f0627 100%);
    --fx-gift-bg: linear-gradient(120deg, #fff4cc, #ffe08a);
    --fx-edge: none;                /* small pattern along the top of cards / boxes */
    --fx-edge-h: 0px;
    --fx-decor-h: 0px;              /* height of the strip under the header */

    /* Page colours + frame (section 8). A festival file overrides any of these. */
    --fx-head: var(--fx-ink);           /* headings: product name, section titles, article titles */
    --fx-head-line: var(--fx-accent);   /* small bar under section headings */
    --fx-orn: none;                     /* little symbol before section headings, e.g. "\1FA94" (diya) */
    --fx-link: var(--fx-ink);           /* links in text, breadcrumbs, "Read more" */
    --fx-link-hover: var(--fx-ink);
    --fx-link-line: var(--fx-accent);   /* underline colour of text links */
    --fx-banner: var(--fx-hero-bg);     /* purple banners: collection header, blog header */
    --fx-banner-head: #fff;             /* banner heading colour */
    --fx-card-line: var(--ib-line, #eee); /* product card border */
    --fx-glow: 0 10px 26px rgba(0,0,0,.12); /* product card hover shadow */
    --fx-frame: none;                   /* pattern drawn around the browser window */
    --fx-frame-w: 0px;                  /* its thickness (0 = no frame) */
    --fx-select: var(--fx-accent);      /* text highlight colour */
}

/* ---------- 1. Offer bar (every page) ---------- */
.fx-bar {
    background: var(--fx-bar-bg);
    color: var(--fx-bar-text);
    font-size: .9rem;
    font-weight: 700;
    position: relative;
}

    .fx-bar .fx-in {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px 12px;
        padding: 8px 40px;
        text-align: center;
    }

    .fx-bar .fx-code {
        font-family: "Courier New", Courier, monospace;
        letter-spacing: 2px;
        color: var(--fx-ink);
        background: var(--fx-accent);
        border-radius: 6px;
        padding: 1px 9px;
        font-weight: 800;
    }

    .fx-bar .fx-copy {
        background: transparent;
        border: 1px solid rgba(255,255,255,.5);
        color: inherit;
        border-radius: 6px;
        font-weight: 700;
        font-size: .78rem;
        padding: 2px 9px;
        cursor: pointer;
    }

        .fx-bar .fx-copy:hover { background: rgba(255,255,255,.12); }

    .fx-bar .fx-till { color: var(--fx-bar-muted); font-weight: 600; }
    .fx-bar .fx-short { display: none; }

    .fx-bar .fx-x {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: 0;
        color: inherit;
        opacity: .65;
        font-size: 1.3rem;
        line-height: 1;
        padding: 4px 8px;
        cursor: pointer;
    }

        .fx-bar .fx-x:hover { opacity: 1; }

    .fx-bar .fx-preview {
        background: #e23744;
        color: #fff;
        border-radius: 4px;
        font-size: .7rem;
        padding: 1px 6px;
        letter-spacing: .05em;
    }

/* ---------- 2. Decoration strip under the header (drawn by the festival file) ---------- */
.fx-decor {
    height: var(--fx-decor-h);
    position: relative;
    overflow: hidden;
    pointer-events: none;
}

/* ---------- 3. Homepage hero ---------- */
.ib-home .hero.fx-hero {
    position: relative;
    background: var(--fx-hero-bg);
}

    .ib-home .hero.fx-hero > .container {
        position: relative;
        z-index: 1;
        padding-bottom: 84px !important;
    }

/* Layers the festival file can draw on (empty by default) */
.fx-hero .fx-l1, .fx-hero .fx-l2 { position: absolute; inset: 0; pointer-events: none; }
.fx-hero .fx-s { position: absolute; pointer-events: none; }
.fx-hero .fx-row {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: space-around;
    pointer-events: none;
    z-index: 1;
}

.fx-hero .fx-d { position: relative; display: inline-block; }

/* Keyword heading kept as a small label (for Google), big festival line below */
.ib-home .fx-hero h1.fx-seo {
    font-size: .78rem !important;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fx-accent);
    margin: 0 !important;
    line-height: 1.5;
}

.ib-home .fx-hero .fx-title {
    font-size: 3.1rem;
    font-weight: 800;
    line-height: 1.05;
    margin: 10px 0 14px;
}

    .ib-home .fx-hero .fx-title em { font-style: normal; color: var(--fx-accent); }

.ib-home .fx-hero .trio .t0 { border-color: var(--fx-accent); }

.fx-ticket {
    display: inline-flex;
    align-items: stretch;
    background: var(--fx-cream);
    color: var(--fx-ink);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0,0,0,.25);
    margin-bottom: 22px;
    max-width: 100%;
}

    .fx-ticket .fx-l {
        background: var(--fx-accent);
        padding: 10px 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        border-right: 2px dashed var(--fx-ink);
    }

        .fx-ticket .fx-l b { font-size: 1.8rem; line-height: 1; font-weight: 800; }
        .fx-ticket .fx-l small { font-weight: 800; font-size: .7rem; letter-spacing: 1px; }

    .fx-ticket .fx-r {
        padding: 8px 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }

        .fx-ticket .fx-r .fx-c { font-family: "Courier New", Courier, monospace; font-weight: 800; font-size: 1.25rem; letter-spacing: 3px; }
        .fx-ticket .fx-r span { font-size: .78rem; color: #6b5f72; font-weight: 700; }

/* ---------- 4. Product cards ---------- */
.fx-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
    background: var(--fx-cream);
    border: 1px dashed var(--fx-line);
    color: var(--fx-ink);
    border-radius: 8px;
    padding: 3px 8px;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.35;
    align-self: flex-start;
}

    .fx-price b { font-size: .95rem; font-weight: 800; }
    .fx-price code { color: var(--fx-ink); font-weight: 800; font-size: .75rem; background: none; padding: 0; }
    .fx-price .fx-cs { display: none; }

:is(.ib-home, .ib-list) .fx-cards .ib-img::before,
.fx-pdp::before,
.ib-blog .promo.fx-promo::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--fx-edge-h);
    background: var(--fx-edge);
    z-index: 1;
}

/* ---------- 5. Homepage gifting band ---------- */
.fx-gift {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 24px;
    align-items: center;
    background: var(--fx-gift-bg);
    border-radius: 16px;
    padding: 32px 36px;
    color: var(--fx-ink);
}

    .fx-gift h3 { font-size: 2rem; font-weight: 800; line-height: 1.08; margin: 0; }
    .fx-gift p { margin: 10px 0 0; color: #4b3d52; max-width: 520px; }
    .fx-gift .fx-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
        .fx-gift .fx-chips span { background: #fff; border-radius: 30px; padding: 6px 12px; font-weight: 700; font-size: .82rem; }

    .fx-gift .fx-box {
        background: var(--fx-ink);
        color: #fff;
        border-radius: 18px;
        padding: 24px;
        text-align: center;
    }

        .fx-gift .fx-box .fx-bow { font-size: 2.6rem; line-height: 1; }
        .fx-gift .fx-box b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--fx-accent); margin-top: 6px; }
        .fx-gift .fx-box small { color: #e6d6ee; display: block; margin-bottom: 14px; }
        .fx-gift .fx-box .btn { background: var(--fx-accent); color: var(--fx-ink); font-weight: 800; border-radius: 8px; padding: .65rem 1.2rem; }
            .fx-gift .fx-box .btn:hover { background: #fff; }

/* ---------- 6. Product page price box ---------- */
.fx-pdp {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--fx-cream);
    border: 1px dashed var(--fx-line);
    border-radius: 14px;
    padding: 10px 12px;
    margin: 0 0 16px;
    color: var(--fx-ink);
    position: relative;
    overflow: hidden;
}

    .fx-pdp .fx-ic { font-size: 1.7rem; line-height: 1; margin-top: 4px; }
    .fx-pdp .fx-tx { flex: 1; min-width: 0; padding-top: 4px; }
        .fx-pdp .fx-tx b { display: block; font-size: 1.12rem; font-weight: 800; }
            .fx-pdp .fx-tx b s { font-size: .85rem; font-weight: 600; color: #8a7f90; margin-left: 4px; }
        .fx-pdp .fx-tx small { display: block; color: #5b4d63; font-weight: 600; font-size: .82rem; }
        .fx-pdp .fx-tx code { color: var(--fx-ink); font-weight: 800; background: none; padding: 0; letter-spacing: 1px; }

    .fx-pdp .fx-cp {
        flex: none;
        background: var(--fx-ink);
        color: #fff;
        border: 0;
        border-radius: 8px;
        font-weight: 700;
        font-size: .82rem;
        padding: 8px 12px;
        margin-top: 4px;
    }

        .fx-pdp .fx-cp:hover { color: var(--fx-accent); }

/* Product photo: festival frame + tag */
.ib-pdp .main-img.fx-photo {
    box-shadow: inset 0 0 0 3px var(--fx-accent);
    overflow: hidden;
}

    .ib-pdp .main-img.fx-photo::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: var(--fx-edge-h);
        background: var(--fx-edge);
        z-index: 1;
    }

    .ib-pdp .main-img.fx-photo .fx-tag {
        position: absolute;
        right: 12px;
        top: calc(var(--fx-edge-h) + 8px);
        z-index: 2;
        background: var(--fx-ink);
        color: var(--fx-accent);
        font-weight: 800;
        font-size: .78rem;
        padding: 5px 10px;
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(0,0,0,.15);
    }

/* Shift the "Hand-painted" badge below the festival edge */
.ib-pdp .main-img.fx-photo .img-badge { top: calc(var(--fx-edge-h) + 8px); }
.ib-pdp .main-img.fx-photo .badge-oos { top: calc(var(--fx-edge-h) + 42px); }

/* Festive line under the price (when there is no festival price box) */
.fx-note {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--fx-cream);
    border: 1px dashed var(--fx-line);
    color: var(--fx-ink);
    border-radius: 12px;
    padding: 8px 12px;
    margin: 0 0 16px;
    font-weight: 600;
    font-size: .92rem;
}

    .fx-note span { font-size: 1.3rem; line-height: 1; }

/* ---------- 7. Highlights in offer lists, checkout ticket, blog card ---------- */
.ib-pdp .offers .of.fx-of { background: var(--fx-cream); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.ib-cart .ofl .of.fx-of { background: var(--fx-cream); }
.ib-co .tkt.fx-tkt { border-color: var(--fx-accent); }

.ib-blog .promo.fx-promo { background: var(--fx-gift-bg); position: relative; overflow: hidden; }
.ib-feat .fx-price { margin: 0 0 8px; }

/* ---------- 8. Page colours + frame (home, collections, product, blog) ----------
   CSS only: headings, links, banners, cards and a thin frame around the window
   take the festival's colours. Each festival sets the --fx-* values in its own file. */

/* Frame around the browser window (only on the shop & blog pages) */
.fest:has(.ib-home, .ib-list, .ib-pdp, .ib-post, .ib-blog, .ib-coll)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1035;
    pointer-events: none;
    padding: var(--fx-frame-w);
    background: var(--fx-frame);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.fest ::selection { background: var(--fx-select); color: var(--fx-ink); }

/* Headings */
.fest .ib-home .sec h2,
.fest .ib-pdp h1,
.fest .ib-post h1,
.fest .ib-post #article h2,
.fest .ib-post #article h3,
.fest .ib-post .side h4,
.fest .ib-blog .feat h2,
.fest .ib-coll h1 {
    color: var(--fx-head);
}

    /* symbol before + short bar under the section titles */
    .fest .ib-home .sec h2::before,
    .fest .ib-blog .feat h2::before {
        content: var(--fx-orn);
        margin-right: .3em;
        font-size: .85em;
    }

    .fest .ib-home .sec h2::after,
    .fest .ib-post h1::after,
    .fest .ib-pdp h1::after {
        content: "";
        display: block;
        width: 72px;
        height: 4px;
        border-radius: 4px;
        margin-top: 8px;
        background: var(--fx-head-line);
    }

.fest .ib-post #article h2,
.fest .ib-post #article h3 {
    padding-left: 12px;
    border-left: 4px solid var(--fx-accent);
}

.fest .ib-blog .post:hover h3 { color: var(--fx-head); }

/* Links */
.fest .ib-pdp .teaser a,
.fest .ib-post #article a,
.fest .ib-blog .more,
.fest :is(.ib-pdp, .ib-post, .ib-list) .crumb a {
    color: var(--fx-link);
    text-decoration: underline;
    text-decoration-color: var(--fx-link-line);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

    .fest .ib-pdp .teaser a:hover,
    .fest .ib-post #article a:hover,
    .fest .ib-blog .feat:hover .more,
    .fest .ib-blog .post:hover .more,
    .fest :is(.ib-pdp, .ib-post, .ib-list) .crumb a:hover,
    .fest :is(.ib-home, .ib-list) .ib-name:hover,
    .fest .ib-footer a:hover {
        color: var(--fx-link-hover);
    }

.fest .ib-blog .more { text-decoration: none; }
.fest .ib-post #article blockquote { border-left-color: var(--fx-accent); background: var(--fx-cream); }
.fest .ib-footer h6::after { background: var(--fx-head-line); width: 40px; }

/* Banners on collection and blog pages */
.fest .ib-list .ib-hero,
.fest .ib-blog .hero {
    background: var(--fx-banner);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 2px var(--fx-accent);
}

    .fest .ib-list .ib-hero h1,
    .fest .ib-blog .hero h1 { color: var(--fx-banner-head); }

    .fest .ib-list .ib-hero::after,
    .fest .ib-blog .hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--fx-edge-h);
        background: var(--fx-edge);
    }

    .fest .ib-list .ib-hero > *,
    .fest .ib-blog .hero > * { position: relative; z-index: 1; }

/* Product cards */
.fest :is(.ib-home, .ib-list) .ib-card { border-color: var(--fx-card-line); }
.fest :is(.ib-home, .ib-list) .ib-card:hover { box-shadow: var(--fx-glow); }
.fest .ib-blog .post:hover { box-shadow: var(--fx-glow); }

/* Product page: soft festival frame around the buy box column */
.fest .ib-pdp { border-top: 4px solid var(--fx-accent); border-radius: 0 0 var(--ib-r-lg, 16px) var(--ib-r-lg, 16px); }

/* Cult India Collectibles page (needs class "ib-coll" on its container) */
.fest .ib-coll .row > div > a { display: block; }
.fest .ib-coll .row > div img {
    border: 2px solid var(--fx-card-line);
    border-radius: 14px;
    transition: box-shadow .15s, transform .15s;
}
.fest .ib-coll .row > div a:hover img { box-shadow: var(--fx-glow); transform: translateY(-3px); }

/* ---------- Tablets ---------- */
@media (max-width: 991.98px) {
    .ib-home .fx-hero .fx-title { font-size: 2.3rem; }
}

/* ---------- Phones ---------- */
@media (max-width: 575.98px) {
    .fest:has(.ib-home, .ib-list, .ib-pdp, .ib-post, .ib-blog, .ib-coll)::after { padding: calc(var(--fx-frame-w) * .6); }
    .fest .ib-home .sec h2::after, .fest .ib-post h1::after, .fest .ib-pdp h1::after { width: 56px; height: 3px; margin-top: 6px; }
    .fx-bar .fx-long, .fx-bar .fx-till { display: none; }
    .fx-bar .fx-short { display: inline; }
    .fx-bar .fx-in { padding: 7px 34px 7px 10px; gap: 8px; font-size: .82rem; flex-wrap: nowrap; }
    .fx-bar .fx-code { padding: 1px 6px; letter-spacing: 1px; }

    .ib-home .hero.fx-hero > .container { padding-top: 2rem !important; padding-bottom: 70px !important; }
    .ib-home .fx-hero .fx-title { font-size: 2rem; }
    .ib-home .fx-hero p { font-size: 1rem; }
    .ib-home .fx-hero .trio { transform: scale(.66); transform-origin: left top; height: 250px; margin: 6px auto 0; width: 490px; max-width: none; position: relative; left: 50%; margin-left: -162px; }
    .fx-ticket { margin-bottom: 18px; }
    .fx-ticket .fx-r .fx-c { font-size: 1.05rem; letter-spacing: 2px; }
    .fx-hero .fx-d:nth-child(n+5) { display: none; }

    .fx-price { font-size: .74rem; padding: 2px 6px; }
    .fx-price b { font-size: .88rem; }
    .fx-price .fx-cl { display: none; }
    .fx-price .fx-cs { display: inline; }

    .fx-pdp { gap: 10px; padding: 10px; }
    .fx-pdp .fx-tx b { font-size: 1rem; }
    .fx-pdp .fx-cp { padding: 7px 9px; font-size: .76rem; }

    .fx-gift { grid-template-columns: 1fr; padding: 22px 18px; gap: 18px; }
    .fx-gift h3 { font-size: 1.6rem; }
    .fx-gift .fx-chips span { font-size: .78rem; padding: 5px 10px; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .fx-gift { grid-template-columns: 1fr; padding: 24px; }
}

/* Respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
    .fest * { animation: none !important; }
}