/* ---------------------------------------------------------------------------
 * rakhi-popup.css — Raksha Bandhan promo popup (seasonal).
 *
 * Self-contained so the whole campaign can be pulled in one go after the
 * festival: remove this file, js/rakhi-popup.js, the #rakhiPopup markup in
 * index.html and the two <link>/<script> tags.
 *
 * Palette follows the site: --primary #AE873E gold on --main #1F1F1F, warmed
 * with a traditional festival maroon.
 * ------------------------------------------------------------------------- */

.rakhi-modal .modal-dialog {
    max-width: 1080px;
}

.rakhi-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: 14px;
    padding: 0;
    background: #230d12;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);

    /* Short viewports (landscape phones, 1366x768 laptops) would otherwise push
       the CTA below the fold with no way to reach it — clip to the viewport and
       let the popup scroll internally instead.

       `vh` is the wrong unit on a phone: it resolves against the LARGEST
       viewport, i.e. with the browser toolbar hidden. While the toolbar is
       showing — which it is when the page first loads — 100vh is taller than
       what you can actually see, so the popup runs off the bottom of the screen
       and the CTA is unreachable. `dvh` tracks the live viewport. The vh line
       stays first as the fallback for browsers without dvh. */
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow: hidden auto;
    overscroll-behavior: contain;
}

.rakhi-modal .modal-content::-webkit-scrollbar {
    width: 6px;
}

.rakhi-modal .modal-content::-webkit-scrollbar-thumb {
    background: rgba(174, 135, 62, .5);
    border-radius: 3px;
}

/* thin gold hairline inside the rounded corners */
.rakhi-modal .modal-content::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 1px solid rgba(174, 135, 62, .55);
    pointer-events: none;
}

.rakhi-popup {
    display: flex;
    flex-wrap: wrap;
    min-height: 460px;
}

/* ------------------------------------------------------------- close ----
 * Scoped to .rakhi-modal on purpose. The theme ships `.modal .icon-close-popup`
 * (styles.css) with `color: var(--black)` plus its own padding/offsets — at
 * specificity (0,2,0) that beats a lone `.rakhi-popup__close` (0,1,0) and the
 * icon renders black-on-maroon, i.e. invisible. Matching (0,2,0) and loading
 * after styles.css is what makes these win.
 */

.rakhi-modal .rakhi-popup__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    background: rgba(0, 0, 0, .42);
    border: 1px solid rgba(255, 255, 255, .35);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.rakhi-modal .rakhi-popup__close:hover,
.rakhi-modal .rakhi-popup__close:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: rotate(90deg);
}

@media (min-width: 576px) {
    .rakhi-modal .rakhi-popup__close {
        top: 14px;
        right: 14px;
    }
}

/* ------------------------------------------------------------ slider ---- */

.rakhi-popup__media {
    position: relative;
    flex: 0 0 50%;
    max-width: 50%;
    /* Breathing room so the product shots read as framed photographs rather
       than bleeding into the panel edges. */
    padding: 24px 20px 24px 24px;
    background: #1a090d;
}

.rakhi-slider .swiper-wrapper,
.rakhi-slider .swiper-slide {
    height: 100%;
}

.rakhi-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* contain, not cover: these are wide styled scenes and cropping them to a tall
   column throws away most of the composition. */
.rakhi-slider .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}

/* The slides carry their own footer line, so dots floated over the artwork
   collided with it. Shorten the slider and drop the dots into the reserved
   strip below it instead. */
.rakhi-slider {
    height: calc(100% - 30px);
}

.rakhi-slider .swiper-pagination {
    bottom: -26px;
}

.rakhi-slider .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: #F3E4C4;
    opacity: .45;
    transition: width .25s ease, opacity .25s ease;
}

.rakhi-slider .swiper-pagination-bullet-active {
    width: 22px;
    border-radius: 4px;
    opacity: 1;
    background: var(--primary);
}

/* ------------------------------------------------------------ content --- */

.rakhi-popup__body {
    /* Must total 100% with .rakhi-popup__media — the container uses flex-wrap,
       so anything over 100% silently stacks the two panels. */
    flex: 0 0 50%;
    max-width: 50%;
    padding: 44px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #F3E4C4;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(174, 135, 62, .22) 0%, rgba(174, 135, 62, 0) 60%),
        #230d12;
}

.rakhi-popup__eyebrow {
    display: inline-block;
    align-self: center;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #230d12;
    background: linear-gradient(100deg, #E8C87A, #AE873E 55%, #E8C87A);
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 18px;
    font-weight: 600;
}

.rakhi-popup__title {
    font-size: 38px;
    line-height: 1.15;
    margin: 0 0 12px;
    color: #fff;
    font-weight: 500;
}

.rakhi-popup__title span {
    display: block;
    background: linear-gradient(100deg, #E8C87A, #AE873E 45%, #F0D9A4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rakhi-popup__text {
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 22px;
    color: rgba(243, 228, 196, .82);
}

/* ------------------------------------------------------------- offer ---- */

.rakhi-popup__offer {
    border: 1px dashed rgba(174, 135, 62, .6);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 22px;
    background: rgba(174, 135, 62, .08);
}

.rakhi-popup__offer-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(243, 228, 196, .7);
    margin-bottom: 8px;
}

.rakhi-popup__deal {
    font-size: 34px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(100deg, #E8C87A, #AE873E 45%, #F0D9A4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rakhi-popup__offer-note {
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: .5px;
    color: rgba(243, 228, 196, .72);
}

.rakhi-countdown__caption {
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(243, 228, 196, .7);
}

/* ----------------------------------------------------------- countdown -- */

.rakhi-countdown {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 26px;
}

.rakhi-countdown__unit {
    min-width: 60px;
    padding: 10px 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(174, 135, 62, .35);
}

.rakhi-countdown__num {
    display: block;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.rakhi-countdown__lbl {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(243, 228, 196, .65);
}

/* --------------------------------------------------------------- cta ---- */

.rakhi-popup__cta {
    display: inline-block;
    width: 100%;
    padding: 15px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #230d12;
    background: linear-gradient(100deg, #E8C87A, #AE873E 55%, #E8C87A);
    background-size: 200% auto;
    transition: background-position .5s ease, transform .25s ease;
}

.rakhi-popup__cta:hover {
    background-position: right center;
    color: #230d12;
    transform: translateY(-2px);
}

.rakhi-popup__dismiss {
    display: inline-block;
    margin-top: 14px;
    font-size: 12px;
    letter-spacing: .5px;
    color: rgba(243, 228, 196, .55);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    background: none;
    border: 0;
}

.rakhi-popup__dismiss:hover {
    color: #F3E4C4;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 991px) {

    /* Arrive as one thing, not two.
       Bootstrap fades the backdrop in over about .15s but slides the panel down
       from -50px over .3s, so the screen goes black first and the popup lands
       afterwards. On a phone, where the page is still settling, that gap reads
       as the popup being slow to load. Dropping the panel transition puts it on
       screen in the first frame, with the backdrop darkening around it.
       Desktop keeps the slide - it is quick enough there not to separate. */
    .rakhi-modal.fade .modal-dialog {
        transform: none;
        transition: none;
    }

    .rakhi-modal .modal-dialog {
        max-width: 560px;
    }

    .rakhi-popup__media,
    .rakhi-popup__body {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .rakhi-popup__media {
        height: 232px;
        padding: 12px 12px 0;
    }

    /* Stacked, the media is a short wide band and the slides are tall posters
       that carry their own headline. `contain` would shrink one to an unreadable
       stamp, so fill the band and anchor near the top — that keeps the poster's
       eyebrow, headline and first product in frame instead of a meaningless
       middle slice. */
    .rakhi-slider .swiper-slide img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
        object-position: center 18%;
    }

    /* The dots sat in a reserved strip under the desktop column; stacked, that
       strip is dead space between the banner and the copy. */
    .rakhi-slider {
        height: 100%;
    }

    .rakhi-slider .swiper-pagination {
        bottom: 8px;
    }

    .rakhi-popup__body {
        padding: 24px 26px 28px;
    }

    .rakhi-popup__title {
        font-size: 30px;
    }
}

@media (max-width: 575px) {
    .rakhi-modal .modal-dialog {
        margin: 12px;
    }

    /* The product shot earns the space here, so the band is the one thing that
       grows; every text block gives up a few pixels to pay for it. The whole
       panel — banner through "Maybe later" — still has to fit inside
       `max-height: calc(100vh - 24px)` or the modal starts scrolling. */
    .rakhi-popup__media {
        height: 215px;
        padding: 10px;
    }

    .rakhi-popup__body {
        padding: 14px 16px 16px;
    }

    .rakhi-popup__deal {
        font-size: 22px;
    }

    .rakhi-popup__offer-label,
    .rakhi-popup__offer-note {
        font-size: 10px;
    }

    .rakhi-popup__offer {
        padding: 9px 12px;
        margin-bottom: 12px;
    }

    .rakhi-countdown {
        margin-bottom: 12px;
    }

    .rakhi-countdown__caption {
        font-size: 10px;
        margin-bottom: 6px;
    }

    .rakhi-popup__cta {
        padding: 11px 16px;
        font-size: 12px;
        letter-spacing: 1px;
    }

    .rakhi-popup__dismiss {
        margin-top: 8px;
        font-size: 11px;
    }

    .rakhi-popup__title {
        font-size: 22px;
    }

    /* The eyebrow carries more words than the pill can hold at 3px tracking
       on a 320px screen — tighten rather than let it wrap to two lines. */
    .rakhi-popup__eyebrow {
        letter-spacing: 1.6px;
        padding: 6px 12px;
    }

    .rakhi-popup__text {
        font-size: 12.5px;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .rakhi-countdown__unit {
        min-width: 46px;
        padding: 6px 4px;
    }

    .rakhi-countdown__num {
        font-size: 17px;
    }

    .rakhi-countdown__lbl {
        font-size: 9px;
        margin-top: 3px;
    }

    .rakhi-popup__eyebrow {
        font-size: 10px;
        margin-bottom: 12px;
    }
}

/* --------------------------------------------------- short viewports ----
 * The stacked layout (<992px) puts the banner above the copy, which gets tall
 * fast. On a short screen that pushes the CTA out of sight, so shrink and then
 * drop the banner. These rules are scoped to the stacked layout on purpose —
 * a 1366x768 laptop is short but still side-by-side, where the banner is a
 * column and must keep its full height.
 */

/* Anything short: kill the min-height and tighten vertical rhythm. Safe at
   every width because it touches no fixed heights. */
@media (max-height: 780px) {
    .rakhi-popup {
        min-height: 0;
    }

    .rakhi-popup__body {
        padding: 30px 34px;
    }

    .rakhi-popup__title {
        font-size: 30px;
    }

    .rakhi-popup__text,
    .rakhi-popup__offer,
    .rakhi-countdown {
        margin-bottom: 16px;
    }
}

/* Stacked + short: the banner has to give up height. */
/* NB this fires on an ordinary 360x740 phone, not just landscape — 740 is under
   780. At 114px the poster was reduced to an unreadable sliver, so the banner
   keeps a usable height here and the space is taken out of the copy instead. */
@media (max-width: 991px) and (max-height: 780px) {
    .rakhi-popup__media {
        height: 176px;
        padding: 10px 10px 0;
    }

    .rakhi-popup__body {
        padding: 18px 22px 22px;
    }

    /* A phone browser with its chrome showing lands around 600-690 CSS px of
       viewport, where the full panel still overflowed by 30-110px and the
       modal fell back to scrolling. Trimming padding alone does not recover
       that much, so the paragraph goes: the banner, the offer, the countdown
       and the CTA are what convert, and all four must be reachable without
       scrolling. The copy is still on the slide and the section below. */
    .rakhi-popup__text {
        display: none;
    }

    .rakhi-popup__eyebrow {
        margin-bottom: 12px;
    }

    .rakhi-popup__title {
        font-size: 26px;
        margin-bottom: 12px;
    }

    .rakhi-popup__offer {
        padding: 10px 12px;
        margin-bottom: 12px;
    }

    .rakhi-popup__deal {
        font-size: 26px;
    }

    .rakhi-countdown__caption {
        margin-bottom: 8px;
    }

    .rakhi-countdown {
        margin-bottom: 12px;
    }

    .rakhi-countdown__unit {
        min-width: 50px;
        padding: 6px 5px;
    }

    .rakhi-countdown__num {
        font-size: 19px;
    }

    .rakhi-popup__cta {
        padding: 12px 20px;
    }

    .rakhi-popup__dismiss {
        margin-top: 8px;
    }
}

/* Stacked + very short (phone held sideways): drop the banner and the body
   copy entirely — the offer, the countdown and the button are what convert,
   and all three must be reachable without scrolling. */
@media (max-width: 991px) and (max-height: 580px) {
    .rakhi-popup__media,
    .rakhi-popup__text {
        display: none;
    }

    .rakhi-popup__body {
        padding: 16px 20px;
    }

    .rakhi-popup__eyebrow {
        margin-bottom: 8px;
    }

    .rakhi-popup__title {
        font-size: 21px;
        margin-bottom: 10px;
    }

    .rakhi-popup__offer {
        padding: 9px 12px;
        margin-bottom: 10px;
    }

    .rakhi-popup__deal {
        font-size: 24px;
    }

    .rakhi-countdown__caption {
        margin-bottom: 6px;
    }

    .rakhi-countdown {
        margin-bottom: 10px;
    }

    .rakhi-countdown__unit {
        min-width: 48px;
        padding: 5px 4px;
    }

    .rakhi-countdown__num {
        font-size: 17px;
    }

    .rakhi-popup__cta {
        padding: 11px 18px;
    }

    .rakhi-popup__dismiss {
        margin-top: 6px;
    }
}

/* Users who prefer reduced motion get no autoplay-driven movement cues. */
@media (prefers-reduced-motion: reduce) {

    .rakhi-popup__cta,
    .rakhi-modal .rakhi-popup__close {
        transition: none;
    }

    .rakhi-modal .rakhi-popup__close:hover {
        transform: none;
    }
}

/* ===========================================================================
 * Raksha Bandhan Special — the home-page section the popup CTA scrolls to.
 * Sits between the hero slider and Best Seller.
 * ========================================================================= */

.rakhi-special {
    position: relative;
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(174, 135, 62, .10) 0%, rgba(174, 135, 62, 0) 70%);
    scroll-margin-top: 90px;
    /* clears the sticky header when the CTA scrolls here */
}

.rakhi-special__head {
    text-align: center;
    margin-bottom: 34px;
}

.rakhi-special__badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #230d12;
    background: linear-gradient(100deg, #E8C87A, #AE873E 55%, #E8C87A);
}

/* ------------------------------------------------ arrows + compact cards --
 * The theme parks .nav-swiper at left/right: 10px, i.e. floating on top of the
 * first and last card, and only moves it clear above 1800px. Instead of
 * chasing viewport gutters (which run out around 1200px and cause a horizontal
 * scrollbar), reserve a fixed lane inside .tf-btn-swiper-item with padding and
 * drop the buttons into it — the slides simply start after the lane, so an
 * overlap is impossible at any width.
 *
 * Hidden below 1200px: there is no lane at those widths, and touch users get
 * swipe plus the pagination dots.
 */

.rakhi-special .rakhi-nav {
    display: none;
}

/* Gated to the 5-up breakpoint. Below 1200px Swiper falls back to 3-up and
   2-up, where the cards are as wide as anywhere else on the page and the
   theme's own sizing is already right. */
@media (min-width: 1200px) {

    .rakhi-special .tf-btn-swiper-item {
        padding-inline: 56px;
    }

    .rakhi-special .rakhi-nav {
        display: flex;
        width: 44px;
        height: 44px;
        /* Roughly the vertical centre of the product image rather than of the
           whole card, which includes the name and price block underneath. */
        top: 38%;
        font-size: 18px;
        color: var(--main);
        background-color: #fff;
        border: 1px solid rgba(174, 135, 62, .45);
        box-shadow: 0 6px 18px rgba(35, 13, 18, .12);
        transition: background-color .25s ease, color .25s ease,
            border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    }

    .rakhi-special .rakhi-nav.nav-prev-swiper {
        left: 0;
        right: auto;
    }

    .rakhi-special .rakhi-nav.nav-next-swiper {
        right: 0;
        left: auto;
    }

    .rakhi-special .rakhi-nav:hover,
    .rakhi-special .rakhi-nav:focus-visible {
        color: #fff;
        border-color: transparent;
        background-image: linear-gradient(100deg, #E8C87A, #AE873E 55%, #E8C87A);
        box-shadow: 0 10px 24px rgba(174, 135, 62, .35);
        transform: translateY(-50%) scale(1.06);
    }

    .rakhi-special .rakhi-nav:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 3px;
    }

    /* Swiper adds this at the first/last page — keep the button in place but
       clearly inert rather than letting it disappear and shift the layout. */
    .rakhi-special .rakhi-nav.swiper-button-disabled {
        opacity: .35;
        box-shadow: none;
    }

    /* Compact cards. The band runs 5-up here, so each card is ~224px instead
       of ~310px. The theme pins the image box to `min-height: 358px` at this
       breakpoint, which at this width would stretch the card into a tall
       sliver — releasing it lets the 0.815 aspect-ratio size it properly. The
       rest scales the type down a step to match the narrower column. Scoped to
       .rakhi-special so Best Seller and the other 4-up bands are untouched;
       each selector carries one extra class to outrank the theme. */
    .rakhi-special .card_product--V01.type-space-35 .card_product-wrapper {
        min-height: 0;
    }

    .rakhi-special .card_product--V01.type-space-35 {
        gap: 12px;
    }

    .rakhi-special .card_product--V01 .card_product-info {
        gap: 3px;
        padding: 0 10px 8px;
    }

    .rakhi-special .card_product--V01 .name-product {
        font-size: 15px;
        line-height: 21px;
    }

    .rakhi-special .card_product--V01 .price-wrap .price-new,
    .rakhi-special .card_product--V01 .price-wrap .price-old {
        font-size: 14px;
    }

    .rakhi-special .card_product--V01 .badge-item {
        font-size: 10px;
        padding: 3px 9px;
    }
}

@media (max-width: 767px) {
    .rakhi-special__head {
        margin-bottom: 24px;
    }
}

/* Must stay last: the arrow hover above lives in a min-width block of equal
   specificity, so only source order can override it. */
@media (prefers-reduced-motion: reduce) {
    .rakhi-special .rakhi-nav {
        transition: none;
    }

    /* Keep the vertical centring, drop only the grow-on-hover. */
    .rakhi-special .rakhi-nav:hover,
    .rakhi-special .rakhi-nav:focus-visible {
        transform: translateY(-50%);
    }
}

/* ------------------------------------------------- rakhi product cards ----
 * Discount badge, alternating tilt and the certificate hover, applied only to
 * cards carrying .rakhi-card (set in productSlide when the product is tagged
 * Rakhi or sits in the Rakhi category).
 */

/* --- discount ---------------------------------------------------------- */

.badge-item.rakhi-off {
    background: linear-gradient(100deg, #E8C87A, #AE873E 55%, #E8C87A);
    color: #230d12;
    font-weight: 700;
    letter-spacing: .6px;
}

/* The "Save N%" chip that used to sit beside the price was removed — the
   corner badge already carries the discount, and two of them read as clutter. */

/* --- alternating tilt --------------------------------------------------
 * A deliberate few degrees, not 90: these are styled scenes with flowers and
 * a puja thali in frame, and standing one on its end turns the whole set
 * dressing on its side. The scale keeps the corners covered while rotated.
 */

.rakhi-card .card_product-wrapper {
    overflow: hidden;
}

.rakhi-card .card_product-wrapper .img-product,
.rakhi-card .card_product-wrapper .img-hover {
    transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .35s ease;
}

.rakhi-card.is-tilt-a .card_product-wrapper .img-product,
.rakhi-card.is-tilt-a .card_product-wrapper .img-hover {
    transform: rotate(-5.5deg) scale(1.16);
}

.rakhi-card.is-tilt-b .card_product-wrapper .img-product,
.rakhi-card.is-tilt-b .card_product-wrapper .img-hover {
    transform: rotate(5.5deg) scale(1.16);
}

/* straighten on hover — the certificate underneath should be readable */
.rakhi-card:hover .card_product-wrapper .img-product,
.rakhi-card:hover .card_product-wrapper .img-hover {
    transform: rotate(0deg) scale(1.02);
}

/* --- certificate hint --------------------------------------------------
 * The theme already cross-fades .img-hover (= image2) on hover, so putting the
 * certificate scan in image2 is all that is needed to show it. This just tells
 * the visitor there is something to hover for.
 */

.rakhi-cert-hint {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 14px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #F3E4C4;
    background: rgba(35, 13, 18, .82);
    border: 1px solid rgba(232, 200, 122, .5);
    backdrop-filter: blur(3px);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}

.rakhi-card:hover .rakhi-cert-hint {
    opacity: 0;
    transform: translateY(6px);
}

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

    .rakhi-card .card_product-wrapper .img-product,
    .rakhi-card .card_product-wrapper .img-hover,
    .rakhi-cert-hint {
        transition: none;
    }
}

/* ===========================================================================
 * Raksha Bandhan hero slide — first slide of the home page banner slider.
 * Remove the .hero-banner-slider--rakhi block from index.html together with
 * this section when the campaign ends.
 * ========================================================================= */

/* 2000x1000 artwork rendered by tools/rakhi-banners/build-hero.js from
   hero.html — a maroon-and-gold festive backdrop with all eight rakhis in a
   labelled card grid on the right, and the left kept dark for the copy.
   Re-run that script after editing hero.html or swapping the p-*.jpg photos. */
.banner-rakhi {
    background-image: url("../images/rakhi/hero-rakhi.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Feathers the photo into the maroon so there is no hard vertical seam, and
   keeps the left half dark enough for white copy to stay legible. */
.hero-banner-slider--rakhi .slider_wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
            rgba(26, 9, 13, .72) 0%,
            rgba(26, 9, 13, .48) 34%,
            rgba(26, 9, 13, .10) 50%,
            rgba(26, 9, 13, 0) 62%);
}

.banner-rakhi__badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #230d12;
    background: linear-gradient(100deg, #E8C87A, #AE873E 55%, #E8C87A);
}

/* The theme's .banner-subtext inherits a dark body colour, which disappears
   against this slide. */
.hero-banner-slider--rakhi .banner-subtext {
    color: rgba(243, 228, 196, .88);
}

.hero-banner-slider--rakhi .title-sld-2 .fst-italic {
    background: linear-gradient(100deg, #F0D9A4, #E8C87A 40%, #AE873E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* A cover crop of the 2:1 landscape artwork on a phone throws away most of the
   product grid, so phones get the portrait render instead: same design, copy
   zone across the top, cards filling the lower half. Do not substitute
   promo-*.jpg here — those are the popup artworks and carry their own baked-in
   headlines, which collide with the slide copy. */
@media (max-width: 767px) {
    .banner-rakhi {
        background-image: url("../images/rakhi/hero-rakhi-portrait.jpg");
        background-position: center top;
        background-size: cover;
    }

    /* The artwork already reserves and darkens the top band, so this only has
       to insure against an unusual crop. */
    .hero-banner-slider--rakhi .slider_wrap::before {
        background: linear-gradient(180deg,
                rgba(26, 9, 13, .58) 0%,
                rgba(26, 9, 13, .34) 30%,
                rgba(26, 9, 13, 0) 46%);
    }

    .banner-rakhi__badge {
        font-size: 11px;
        letter-spacing: 1.5px;
        margin-bottom: 12px;
    }
}

/* ---------------------------------------------------------------- CTA ----
 * The theme's .tf-btn is a transparent button with `border: 1px solid
 * var(--main)` and inherited dark text, and its hover fills with var(--main)
 * too. Over this slide's maroon that is dark-on-dark in both states — the
 * button was effectively invisible. Give the campaign slide a solid gold
 * button using the same gradient as the popup CTA and the offer badge.
 */

.hero-banner-slider--rakhi .tf-btn {
    color: #230d12;
    border-color: transparent;
    background-color: transparent;
    background-image: linear-gradient(100deg, #E8C87A, #AE873E 55%, #E8C87A);
    background-size: 200% auto;
    box-shadow: 0 12px 28px rgba(174, 135, 62, .34);
    font-weight: 700;
    letter-spacing: 1px;
}

.hero-banner-slider--rakhi .tf-btn i,
.hero-banner-slider--rakhi .tf-btn .icon {
    color: #230d12;
}

.hero-banner-slider--rakhi .tf-btn:hover,
.hero-banner-slider--rakhi .tf-btn:focus-visible {
    color: #230d12;
    border-color: transparent;
    background-color: transparent;
    background-position: right center;
    box-shadow: 0 16px 34px rgba(174, 135, 62, .46);
    transform: translateY(-2px);
}

.hero-banner-slider--rakhi .tf-btn:focus-visible {
    outline: 2px solid #F0D9A4;
    outline-offset: 3px;
}

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

    .hero-banner-slider--rakhi .tf-btn:hover,
    .hero-banner-slider--rakhi .tf-btn:focus-visible {
        transform: none;
    }
}

/* ------------------------------------------------------- copy column ----
 * The artwork reserves its left 43% for copy, and `background-size: cover`
 * crops horizontally on tall viewports, sliding the card grid further left.
 * Constrain the text column so the headline can never run into the products —
 * 40% leaves a margin for that crop. The theme's own `padding-right: 50%` on
 * .banner-subtext then has to go, or the paragraph wraps twice over.
 */

@media (min-width: 768px) {
    .hero-banner-slider--rakhi .content-sld {
        max-width: 40%;
    }

    .hero-banner-slider--rakhi .banner-subtext {
        padding: 0 !important;
    }

    .hero-banner-slider--rakhi .title-sld-2 {
        font-size: 52px;
        line-height: 1.08;
    }
}

@media (min-width: 1600px) {
    .hero-banner-slider--rakhi .title-sld-2 {
        font-size: 62px;
    }
}

/* Phones: the portrait artwork reserves its top ~43% for copy, and that band
   is a fixed proportion of the image while the slide height varies with the
   viewport. Pin the copy to the top of the slide rather than centring it, and
   step the type down, so it stays inside the band on short screens too. */
@media (max-width: 767px) {
    .hero-banner-slider--rakhi .sld-content {
        top: 4% !important;
        transform: none;
    }

    .hero-banner-slider--rakhi .title-sld-2 {
        font-size: 30px;
        line-height: 1.12;
        margin-bottom: 10px;
    }

    .hero-banner-slider--rakhi .banner-subtext {
        font-size: 13px;
        line-height: 1.5;
        padding: 0 !important;
    }

    .hero-banner-slider--rakhi .banner-rakhi__badge {
        margin-bottom: 10px;
    }

    .hero-banner-slider--rakhi .tf-btn {
        padding: 11px 24px;
        font-size: 13px;
    }
}

@media (max-width: 575px) {
    .hero-banner-slider--rakhi .title-sld-2 {
        font-size: 26px;
    }
}

/* Safety gutter: the theme's container padding is tight at phone widths and
   the subtext was touching the right edge. */
@media (max-width: 767px) {
    .hero-banner-slider--rakhi .content-sld {
        padding-right: 16px;
    }
}

/* --------------------------------------- certificate: popup only ----
 * The rakhi cards deliberately render ONLY image1 — productSlide() skips the
 * .img-hover element for them, so there is no second image on the card to
 * cross-fade to and no hover swap. The certificate scan lives in image2 and is
 * shown in the product-details popup (#quickAdd renders it as .prd-image2 from
 * the card's data-image2 attribute), which keeps the listing on the product
 * shots and puts the proof where someone is actually evaluating the item.
 *
 * The .rakhi-cert-hint chip stays: it marks the product as certified, which is
 * true regardless of where the scan is displayed.
 *
 * The timed cross-fade that used to live here was removed with that change.
 */