<?php
/*
 * BFT GIFTING - WooCommerce Catalogue Website
 */

if (!defined('ABSPATH')) {
    exit;
}

if (!headers_sent()) {
    nocache_headers();
}

$whatsapp_number = '919510565011';

/*
 * HIGH QUALITY LOGO
 */
$logo_url = 'https://bftgifting.com/wp-content/uploads/2026/09/IMG-20260913-WA0291-2.jpg';
$logo_fallback_url = 'https://bftgifting.com/wp-content/uploads/2026/09/cropped-IMG-20260913-WA0291-2.jpg';

$founder_url = 'https://bftgifting.com/wp-content/uploads/2026/09/founder.png';
$packaging_url = 'https://bftgifting.com/wp-content/uploads/2026/09/pk.jpeg';


if (!function_exists('bft_whatsapp_url')) {

    function bft_whatsapp_url($number, $product_name = '') {

        $message = 'Hi BFT Gifting!';

        if (!empty($product_name)) {
            $message .= ' I am interested in "' . $product_name . '".';
        }

        return 'https://wa.me/' .
            preg_replace('/[^0-9]/', '', $number) .
            '?text=' .
            rawurlencode($message);
    }
}


get_header();


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

function bft_product_card($product) {

    if (!$product) {
        return;
    }

    $product_id = $product->get_id();
    $name = $product->get_name();
    $price = $product->get_price();

    $short_description = $product->get_short_description();
    $long_description = $product->get_description();

    if (empty($long_description)) {
        $long_description = $short_description;
    }

    $image = wp_get_attachment_image_url(
        $product->get_image_id(),
        'large'
    );

    if (!$image) {
        $image = wc_placeholder_img_src('large');
    }

    $whatsapp = bft_whatsapp_url(
        '919510565011',
        $name
    );
    ?>

    <article
        class="bft-product-card"
        onclick="bftOpenProduct(this)"
        data-product-id="<?php echo esc_attr($product_id); ?>"
        data-name="<?php echo esc_attr($name); ?>"
        data-price="<?php echo esc_attr($price); ?>"
        data-image="<?php echo esc_url($image); ?>"
        data-description="<?php echo esc_attr(wp_strip_all_tags($long_description)); ?>"
        data-short-description="<?php echo esc_attr(wp_strip_all_tags($short_description)); ?>"
        data-whatsapp="<?php echo esc_url($whatsapp); ?>"
    >

        <div class="bft-product-image-wrap">

            <img
                class="bft-product-image"
                src="<?php echo esc_url($image); ?>"
                alt="<?php echo esc_attr($name); ?>"
                loading="lazy"
            >

        </div>


        <div class="bft-product-content">

            <h3 class="bft-product-name">
                <?php echo esc_html($name); ?>
            </h3>


            <div class="bft-product-description">
                <?php
                if (!empty($short_description)) {
                    echo wp_kses_post(
                        wp_trim_words(
                            $short_description,
                            18
                        )
                    );
                } else {
                    echo '&nbsp;';
                }
                ?>
            </div>


            <?php if ($price !== '') : ?>

                <div class="bft-product-price">
                    ₹<?php echo esc_html(
                        number_format(
                            (float)$price,
                            0
                        )
                    ); ?>
                </div>

            <?php endif; ?>


            <button
                type="button"
                class="bft-whatsapp-button"
                onclick="event.stopPropagation(); window.open('<?php echo esc_url($whatsapp); ?>','_blank');"
            >
                ORDER ON WHATSAPP
            </button>

        </div>

    </article>

    <?php
}


/* =========================================================
   CATALOGUE
========================================================= */

$catalogue_query = new WP_Query([

    'post_type'      => 'product',
    'post_status'    => 'publish',
    'posts_per_page' => -1,
    'orderby'        => 'date',
    'order'          => 'DESC',

]);


/* =========================================================
   BEST SELLERS
========================================================= */

$best_seller_query = new WP_Query([

    'post_type'      => 'product',
    'post_status'    => 'publish',
    'posts_per_page' => 4,
    'meta_key'       => 'total_sales',
    'orderby'        => 'meta_value_num',
    'order'          => 'DESC',

]);

?>

<style>

/* =========================================================
   FONTS + VARIABLES
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {

    --bft-brown: #4b2e20;
    --bft-dark: #2d1a12;
    --bft-medium: #76513c;

    --bft-light: #f7eee5;
    --bft-cream: #fffaf5;

    --bft-border: #eadfd5;

    --bft-text: #2d211b;
    --bft-muted: #76675f;

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0 !important;
    padding: 0 !important;

    background: #fffaf5;

    color: var(--bft-text);

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

}


a,
button {
    font-family: 'Manrope', sans-serif;
}


/* =========================================================
   TOP ANNOUNCEMENT
========================================================= */

.bft-announcement {

    width: 100%;
    height: 34px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background: var(--bft-dark);

    color: #fff;

}


.bft-announcement-track {

    width: max-content;

    display: flex;

    white-space: nowrap;

    animation: bftMarquee 24s linear infinite;

}


.bft-announcement-item {

    padding: 0 30px;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.8px;

}


@keyframes bftMarquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =========================================================
   HEADER
========================================================= */

.bft-header{

    position:sticky;

    top:0;

    z-index:1000;

    width:100%;

    background:rgba(255,250,245,.96);

    border-bottom:
        1px solid rgba(75,46,32,.09);

    backdrop-filter:blur(12px);

}


.bft-header-inner{

    width:min(
        1200px,
        calc(100% - 40px)
    );

    min-height:82px;

    margin:auto;

    display:grid;

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

    align-items:center;

    gap:30px;

}


.bft-logo-link{

    display:inline-flex;

    align-items:center;

    width:max-content;

    text-decoration:none !important;

}


.bft-logo-link img{

    width:52px;

    height:52px;

    display:block;

    object-fit:cover;

    border-radius:12px;

    box-shadow:
        0 7px 20px
        rgba(75,46,32,.10);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.bft-logo-link:hover img{

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(75,46,32,.15);

}


.bft-nav{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:42px;

    background:transparent !important;

    border:0 !important;

    box-shadow:none !important;

}


.bft-nav a{

    position:relative;

    display:inline-flex;

    align-items:center;

    padding:10px 0;

    color:var(--bft-brown) !important;

    background:transparent !important;

    border:0 !important;

    box-shadow:none !important;

    text-decoration:none !important;

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

    font-size:12px;

    font-weight:700;

    letter-spacing:1.4px;

    white-space:nowrap;

}


.bft-nav a::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:2px;

    height:2px;

    background:var(--bft-brown);

    transform:scaleX(0);

    transform-origin:center;

    transition:
        transform .25s ease;

}


.bft-nav a:hover::after,
.bft-nav a.active::after{

    transform:scaleX(1);

}


.bft-header-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}


.bft-menu-toggle{

    width:42px;

    height:42px;

    display:none;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

    padding:8px;

    border:0;

    border-radius:10px;

    background:transparent;

    cursor:pointer;

}


.bft-menu-toggle span{

    width:22px;

    height:2px;

    display:block;

    background:var(--bft-brown);

    border-radius:5px;

    transition:
        transform .25s ease,
        opacity .25s ease;

}


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

.bft-hero{

    position:relative;

    width:100%;

    min-height:470px;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 78% 42%,
            rgba(183,133,91,.20),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #fffaf5 0%,
            #f5e5d6 100%
        );

}


.bft-hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-170px;

    top:-180px;

    border-radius:50%;

    background:
        rgba(255,255,255,.55);

    filter:blur(5px);

    animation:
        bftHeroGlow 7s ease-in-out infinite;

}


.bft-hero::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    left:-100px;

    bottom:-130px;

    border-radius:50%;

    background:
        rgba(196,153,118,.12);

    filter:blur(3px);

    animation:
        bftHeroGlow 8s ease-in-out infinite reverse;

}


@keyframes bftHeroGlow {

    0%,
    100% {

        transform:scale(1);
        opacity:.65;

    }

    50% {

        transform:scale(1.12);
        opacity:1;

    }

}


.bft-hero-inner{

    position:relative;

    z-index:2;

    width:min(
        1200px,
        calc(100% - 40px)
    );

    min-height:470px;

    margin:auto;

    display:grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(320px,.85fr);

    align-items:center;

    gap:45px;

    padding:55px 0;

}


.bft-hero-content{

    max-width:650px;

}


.bft-hero-eyebrow{

    margin-bottom:14px;

    color:var(--bft-medium);

    font-size:10px;

    font-weight:700;

    letter-spacing:3px;

}


.bft-hero-content h1{

    margin:0;

    color:var(--bft-dark);

    font-family:'Cormorant Garamond',serif;

    font-size:
        clamp(48px,5.5vw,76px);

    font-weight:600;

    line-height:.94;

    letter-spacing:-1.5px;

}


.bft-hero-content h1 span{

    color:var(--bft-brown);

}


.bft-hero-text{

    max-width:550px;

    margin:20px 0 0;

    color:var(--bft-muted);

    font-size:14px;

    line-height:1.8;

}


.bft-hero-buttons{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:27px;

}


.bft-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:46px;

    padding:0 22px;

    border-radius:999px;

    text-decoration:none !important;

    font-size:10px;

    font-weight:700;

    letter-spacing:1.2px;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease;

}


.bft-btn:hover{

    transform:translateY(-2px);

}


.bft-btn-primary{

    background:var(--bft-brown);

    color:#fff !important;

    box-shadow:
        0 10px 25px
        rgba(75,46,32,.17);

}


.bft-btn-primary:hover{

    background:var(--bft-dark);

    box-shadow:
        0 14px 30px
        rgba(75,46,32,.22);

}


.bft-btn-outline{

    color:var(--bft-brown) !important;

    background:
        rgba(255,255,255,.45);

    border:
        1px solid rgba(75,46,32,.25);

}


.bft-btn-outline:hover{

    background:#fff;

    border-color:
        var(--bft-brown);

}


/* =========================================================
   HERO 3D VISUAL
========================================================= */

.bft-hero-visual{

    position:relative;

    height:350px;

    display:flex;

    align-items:center;

    justify-content:center;

    perspective:1200px;

}


.bft-hero-visual::after{

    display:none !important;

    content:none !important;

}


.bft-hero-visual::before{

    content:"";

    position:absolute;

    width:260px;

    height:65px;

    left:50%;

    bottom:38px;

    transform:
        translateX(-50%);

    border-radius:50%;

    background:
        rgba(75,46,32,.20);

    filter:blur(20px);

    animation:
        bftShadowFloat 4.8s ease-in-out infinite;

}


@keyframes bftShadowFloat {

    0%,
    100% {

        transform:
            translateX(-50%)
            scale(.92);

        opacity:.55;

    }

    50% {

        transform:
            translateX(-50%)
            scale(1.12);

        opacity:.28;

    }

}


/* HERO CARD */

.bft-hero-card{

    position:relative;

    width:225px;

    height:275px;

    overflow:visible;

    border-radius:24px;

    background:transparent !important;

    border:none !important;

    padding:0 !important;

    transform-style:preserve-3d;

    box-shadow:
        28px 38px 48px
        rgba(45,26,18,.24),

        -8px -8px 22px
        rgba(255,255,255,.80);

    animation:
        bftMagicFloat 5.5s
        ease-in-out
        infinite;

    will-change:
        transform;

}


@keyframes bftMagicFloat {

    0% {

        transform:
            translate3d(0,0,0)
            rotateY(-18deg)
            rotateX(8deg)
            rotateZ(2deg);

    }

    25% {

        transform:
            translate3d(-5px,-10px,18px)
            rotateY(-11deg)
            rotateX(4deg)
            rotateZ(1deg);

    }

    50% {

        transform:
            translate3d(4px,-16px,28px)
            rotateY(-5deg)
            rotateX(1deg)
            rotateZ(-1deg);

    }

    75% {

        transform:
            translate3d(7px,-8px,14px)
            rotateY(-12deg)
            rotateX(5deg)
            rotateZ(1deg);

    }

    100% {

        transform:
            translate3d(0,0,0)
            rotateY(-18deg)
            rotateX(8deg)
            rotateZ(2deg);

    }

}


.bft-hero-card .bft-hero-light{

    position:absolute;

    inset:-20%;

    z-index:4;

    pointer-events:none;

    border-radius:35px;

    background:
        linear-gradient(
            115deg,
            transparent 35%,
            rgba(255,255,255,.48) 48%,
            transparent 60%
        );

    transform:
        translateX(-80%);

    animation:
        bftLightSweep 4.8s
        ease-in-out
        infinite;

}


@keyframes bftLightSweep {

    0% {

        transform:
            translateX(-90%)
            rotate(8deg);

        opacity:0;

    }

    20% {

        opacity:0;

    }

    45% {

        opacity:.9;

    }

    65% {

        opacity:.15;

    }

    100% {

        transform:
            translateX(90%)
            rotate(8deg);

        opacity:0;

    }

}


.bft-hero-card:hover{

    animation-play-state:paused;

    transform:
        translateY(-12px)
        rotateY(-5deg)
        rotateX(3deg)
        rotateZ(0deg)
        scale(1.025);

    box-shadow:
        25px 45px 55px
        rgba(45,26,18,.27),

        -8px -8px 22px
        rgba(255,255,255,.85);

}


.bft-hero-card::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:3;

    border-radius:24px;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.72),
            transparent 42%,
            rgba(75,46,32,.08)
        );

    pointer-events:none;

}


.bft-hero-card::after{

    content:"";

    position:absolute;

    width:90px;

    height:120px;

    right:-55px;

    bottom:34px;

    border-radius:15px;

    background:

        linear-gradient(
            145deg,
            #fff,
            #ead6c4
        );

    box-shadow:
        13px 20px 28px
        rgba(45,26,18,.17);

    transform:
        translateZ(-45px)
        rotateY(-18deg)
        rotateZ(7deg);

}


.bft-hero-card img{

    position:relative;

    z-index:1;

    width:100%;

    height:100%;

    display:block;

    object-fit:contain;

    border-radius:24px !important;

    padding:0 !important;

    margin:0 !important;

    border:none !important;

    background:transparent !important;

}


/* =========================================================
   SECTIONS
========================================================= */

.bft-section {

    padding:82px 30px;

}


.bft-section-inner {

    max-width:1240px;

    margin:auto;

}


.bft-section-heading {

    margin-bottom:38px;

}


.bft-eyebrow {

    margin-bottom:10px;

    color:var(--bft-medium);

    font-size:10px;

    font-weight:700;

    letter-spacing:3px;

}


.bft-section-title {

    margin:0;

    color:var(--bft-dark);

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(38px,4vw,56px);

    font-weight:600;

    line-height:1;

}


.bft-section-subtitle {

    max-width:650px;

    margin:14px 0 0;

    color:var(--bft-muted);

    line-height:1.75;

}


/* =========================================================
   PRODUCT GRID
========================================================= */

.bft-product-grid {

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:20px;

}


.bft-product-card {

    min-width:0;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    background:#fff;

    border:1px solid var(--bft-border);

    border-radius:20px;

    cursor:pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


.bft-product-card:hover {

    transform:translateY(-5px);

    border-color:#d8c6b7;

    box-shadow:
        0 18px 40px
        rgba(66,39,24,.10);

}


.bft-product-image-wrap {

    width:100%;

    aspect-ratio:1/1;

    padding:10px;

    background:#f7f1eb;

    overflow:hidden;

}


.bft-product-image {

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    border-radius:14px;

}


.bft-product-content {

    flex:1;

    padding:16px;

    display:flex;

    flex-direction:column;

}


.bft-product-name {

    margin:0;

    color:var(--bft-dark);

    font-family:'Cormorant Garamond',serif;

    font-size:22px;

    font-weight:600;

    line-height:1.05;

}


.bft-product-description {

    margin-top:9px;

    color:#796b62;

    font-size:12px;

    line-height:1.55;

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;

}


.bft-product-price {

    margin-top:12px;

    color:var(--bft-brown);

    font-size:16px;

    font-weight:700;

}


.bft-whatsapp-button {

    width:100%;
    max-width:100%;
    min-width:0;
    min-height:42px;

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

    white-space:nowrap;

    line-height:1.15;

    margin-top:auto;

    padding:10px 8px;

    border:0;

    border-radius:999px;

    background:var(--bft-brown);

    color:#fff;

    font-size:9px;

    font-weight:700;

    letter-spacing:1.1px;

    cursor:pointer;

    transition:.2s ease;

}


.bft-whatsapp-button:hover {

    background:var(--bft-dark);

}


/* =========================================================
   BEST SELLERS
========================================================= */

.bft-best-sellers {

    background:#f7eee6;

}


/* =========================================================
   CUSTOMIZE
========================================================= */

.bft-customize {

    padding:65px 30px;

    background:
        linear-gradient(
            135deg,
            #f7eee4,
            #fffaf5
        );

    border-top:1px solid var(--bft-border);

    border-bottom:1px solid var(--bft-border);

}


.bft-customize-inner {

    max-width:1050px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;

}


.bft-customize-title {

    margin:0;

    color:var(--bft-dark);

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(34px,4vw,50px);

    font-weight:600;

}


.bft-customize-text {

    margin:12px 0 0;

    color:var(--bft-muted);

    line-height:1.7;

}


/* =========================================================
   OUR STORY
========================================================= */

.bft-story {

    background:#fffaf5;

}


.bft-story-list {

    display:flex;

    flex-direction:column;

    gap:85px;

}


.bft-story-row {

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:75px;

}


.bft-story-row.reverse .bft-story-image {

    order:2;

}


.bft-story-row.reverse .bft-story-content {

    order:1;

}


.bft-story-image {

    position:relative;

    cursor:pointer;

}


.bft-story-image-inner {

    overflow:hidden;

    position:relative;

    border-radius:28px;

    background:#f0e4d9;

    box-shadow:
        0 20px 45px
        rgba(63,39,26,.12);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.bft-story-image-inner img{

    display:block;

    width:100%;

    height:auto;

    image-rendering:auto;

    -webkit-font-smoothing:antialiased;

    filter:none !important;

    opacity:1 !important;

}


.bft-story-row:first-child .bft-story-image img {

    display:block;

    width:100%;

    aspect-ratio:1.15/1;

    object-fit:contain;

    object-position:center;

    padding:28px;

    background:#fff;

}


.bft-story-row:not(:first-child) .bft-story-image img {

    display:block;

    width:100%;

    height:auto;

    aspect-ratio:1.15/1;

    object-fit:contain;

    object-position:center;

    padding:0;

    background:#fff;

    image-rendering:auto;

    filter:none !important;

    opacity:1 !important;

    transform:none;

}


.bft-story-image-inner:hover {

    transform:translateY(-7px) scale(1.01);

    box-shadow:
        0 28px 60px
        rgba(63,39,26,.18);

}


.bft-story-discover {

    position:absolute;

    left:18px;

    bottom:18px;

    padding:9px 13px;

    border-radius:999px;

    background:rgba(255,255,255,.92);

    color:var(--bft-brown);

    font-size:9px;

    font-weight:700;

    letter-spacing:1.4px;

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.08);

}


.bft-story-content h3 {

    margin:0;

    color:var(--bft-dark);

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(36px,3.5vw,54px);

    font-weight:600;

    line-height:1;

}


.bft-story-content p {

    margin:20px 0 0;

    color:var(--bft-muted);

    font-size:14px;

    line-height:1.9;

}


.bft-read-more {

    display:inline-flex;

    margin-top:24px;

    padding-bottom:5px;

    color:var(--bft-brown);

    border-bottom:1px solid var(--bft-brown);

    text-decoration:none;

    font-size:10px;

    font-weight:700;

    letter-spacing:1.5px;

}


/* =========================================================
   MODALS
========================================================= */

.bft-modal {

    position:fixed;

    inset:0;

    z-index:5000;

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(34,20,14,.72);

    backdrop-filter:blur(9px);

}


.bft-modal.active {

    display:flex;

}


.bft-modal-box {

    position:relative;

    width:min(1000px,100%);

    max-height:92vh;

    overflow-y:auto;

    padding:25px;

    background:#fffaf6;

    border-radius:28px;

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.30);

    animation:bftModalIn .35s ease;

}


@keyframes bftModalIn {

    from {

        opacity:0;

        transform:
            translateY(25px)
            scale(.97);

    }

    to {

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


.bft-close {

    position:absolute;

    top:14px;

    right:16px;

    z-index:5;

    width:38px;

    height:38px;

    border:0;

    border-radius:50%;

    background:var(--bft-brown);

    color:#fff;

    font-size:21px;

    cursor:pointer;

}


.bft-product-modal-main {

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:35px;

}


.bft-product-modal-image {

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:20px;

    background:#f1e6dc;

}


.bft-modal-details {

    padding:12px 10px;

}


.bft-modal-details h2 {

    margin:0;

    padding-right:45px;

    color:var(--bft-dark);

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(34px,4vw,52px);

    font-weight:600;

    line-height:1;

}


.bft-modal-price {

    margin-top:15px;

    color:var(--bft-brown);

    font-size:19px;

    font-weight:700;

}


.bft-modal-description {

    margin-top:20px;

    color:#6e6158;

    font-size:14px;

    line-height:1.85;

    white-space:pre-line;

}


.bft-modal-whatsapp {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:47px;

    margin-top:25px;

    padding:0 24px;

    border-radius:999px;

    background:var(--bft-brown);

    color:#fff;

    text-decoration:none;

    font-size:10px;

    font-weight:700;

    letter-spacing:1.3px;

}


.bft-related {

    margin-top:40px;

    padding-top:30px;

    border-top:1px solid var(--bft-border);

}


.bft-related h3 {

    margin:0 0 18px;

    color:var(--bft-dark);

    font-family:'Cormorant Garamond',serif;

    font-size:30px;

    font-weight:600;

}


.bft-related-grid {

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:12px;

}


.bft-related-item {

    min-width:0;

    padding:10px;

    overflow:hidden;

    background:#fff;

    border:1px solid var(--bft-border);

    border-radius:14px;

    cursor:pointer;

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

}


.bft-related-item:hover {

    border-color:#d8c6b7;

    transform:translateY(-2px);

}


.bft-related-image {

    display:block;

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:10px;

    margin-bottom:9px;

    background:#f1e6dc;

    cursor:zoom-in;

}


.bft-related-name {

    color:var(--bft-dark);

    font-size:12px;

    line-height:1.35;

    font-weight:700;

    overflow-wrap:anywhere;

}


.bft-related-description {

    margin-top:5px;

    color:var(--bft-muted);

    font-size:11px;

    line-height:1.45;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

}


/* =========================================================
   STORY MODAL
========================================================= */

.bft-story-modal {

    position:fixed;

    inset:0;

    z-index:6000;

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(35,20,13,.78);

    backdrop-filter:blur(12px);

}


.bft-story-modal.active {

    display:flex;

}


.bft-story-modal-box {

    position:relative;

    width:min(850px,100%);

    max-height:90vh;

    overflow-y:auto;

    padding:45px;

    background:#fffaf5;

    border-radius:28px;

    animation:bftStoryOpen .4s ease;

}


@keyframes bftStoryOpen {

    from {

        opacity:0;

        transform:
            scale(.94)
            translateY(20px);

    }

    to {

        opacity:1;

        transform:
            scale(1)
            translateY(0);

    }

}


.bft-story-modal-box h2 {

    margin:0;

    color:var(--bft-dark);

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(38px,5vw,62px);

    font-weight:600;

    line-height:1;

}


.bft-story-modal-box p {

    margin:20px 0 0;

    color:#6d5d53;

    font-size:15px;

    line-height:1.9;

}


/* =========================================================
   MAGIC IMAGE MODAL
========================================================= */

.bft-magic-modal {

    position:fixed;

    inset:0;

    z-index:7000;

    display:none;

    align-items:center;

    justify-content:center;

    padding:25px;

    background:rgba(25,15,10,.88);

    backdrop-filter:blur(8px);

}


.bft-magic-modal.active {

    display:flex;

}


.bft-magic-image {

    display:block;

    width:auto;

    height:auto;

    max-width:95vw;

    max-height:90vh;

    object-fit:contain;

    object-position:center;

    border-radius:22px;

    background:#fff;

    filter:none !important;

    opacity:1 !important;

    image-rendering:auto;

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.45);

    animation:bftMagicOpen .5s ease;

}


@keyframes bftMagicOpen {

    from {

        opacity:0;

        transform:
            scale(.75)
            rotate(-3deg);

    }

    to {

        opacity:1;

        transform:
            scale(1)
            rotate(0);

    }

}


/* =========================================================
   SPARKS
========================================================= */

.bft-spark {

    position:absolute;

    z-index:8000;

    width:5px;

    height:5px;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 0 12px rgba(255,255,255,.9);

    pointer-events:none;

    animation:bftSparkMove .9s ease-out forwards;

}


@keyframes bftSparkMove {

    from {

        opacity:1;

        transform:
            translate(0,0)
            scale(1);

    }

    to {

        opacity:0;

        transform:
            translate(var(--x),var(--y))
            scale(0);

    }

}


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

.bft-footer {

    background:var(--bft-dark);

    color:#fff;

    padding:65px 30px 25px;

}


.bft-footer-inner {

    max-width:1150px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1.35fr
        .8fr
        1fr
        1fr;

    gap:55px;

    align-items:start;

}


.bft-footer-brand {

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


.bft-footer-logo {

    display:block;

    width:92px;

    height:72px;

    object-fit:contain;

    padding:0 !important;

    background:transparent !important;

    border:none !important;

    border-radius:16px !important;

}


.bft-footer-brand p {

    max-width:300px;

    margin:18px 0 0;

    color:#cdbeb4;

    font-size:12px;

    line-height:1.8;

}


.bft-footer-title {

    margin:3px 0 20px;

    color:#fff;

    font-size:11px;

    font-weight:600;

    letter-spacing:2px;

}


.bft-footer-links {

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

}


.bft-footer-links a {

    position:relative;

    color:#d7c8be;

    text-decoration:none;

    font-size:12px;

    letter-spacing:.5px;

}


.bft-footer-links a::after {

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:100%;

    height:1px;

    background:#fff;

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .25s ease;

}


.bft-footer-links a:hover::after {

    transform:scaleX(1);

}


.bft-footer-info {

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


.bft-footer-item {

    width:100%;

    display:grid;

    grid-template-columns:24px 1fr;

    align-items:start;

    gap:9px;

    margin-bottom:14px;

    color:#d7c8be;

    font-size:12px;

    line-height:1.6;

}


.bft-footer-icon {

    width:24px;

    height:20px;

    display:inline-flex;

    align-items:center;

    justify-content:flex-start;

    color:#fff;

    font-size:15px;

}


.bft-footer-item a {

    color:#d7c8be;

    text-decoration:none;

    transition:color .2s ease;

}


.bft-footer-item a:hover {

    color:#fff;

}


.bft-instagram-icon {

    width:17px;

    height:17px;

}


.bft-footer-bottom {

    max-width:1150px;

    margin:40px auto 0;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.12);

    color:#9e8e83;

    font-size:10px;

    letter-spacing:.8px;

    text-align:center;

}


/* =========================================================
   BACK TO TOP
========================================================= */

.bft-back-top {

    position:fixed;

    right:24px;

    bottom:24px;

    z-index:4000;

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,255,255,.25);

    border-radius:50%;

    background:var(--bft-brown);

    color:#fff;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease,
        background .25s ease;

    box-shadow:
        0 10px 25px
        rgba(45,26,18,.25);

}


.bft-back-top.show {

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


.bft-back-top:hover {

    background:var(--bft-medium);

    transform:
        translateY(-3px);

}


.bft-back-top svg {

    width:19px;

    height:19px;

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .bft-product-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }


    .bft-footer-inner {

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

    }


    .bft-footer-brand {

        grid-column:1 / -1;

    }

}


/* =========================================================
   MOBILE HEADER + HERO
========================================================= */

@media(max-width:850px){

    .bft-header{

        position:sticky;

        top:0;

    }


    .bft-header-inner{

        width:calc(100% - 24px);

        min-height:68px;

        display:flex;

        justify-content:space-between;

        gap:15px;

    }


    .bft-logo-link img{

        width:42px;

        height:42px;

        border-radius:9px;

    }


    .bft-header-right{

        display:flex;

        margin-left:auto;

    }


    .bft-menu-toggle{

        display:flex;

    }


    .bft-nav{

        position:absolute;

        top:68px;

        left:12px;

        right:12px;

        display:none;

        flex-direction:column;

        align-items:stretch;

        justify-content:flex-start;

        gap:0;

        padding:8px 18px;

        background:#fffaf5 !important;

        border:
            1px solid var(--bft-border) !important;

        border-radius:14px;

        box-shadow:
            0 18px 40px
            rgba(45,26,18,.13);

        margin:0;

    }


    .bft-nav.active{

        display:flex;

    }


    .bft-nav a{

        width:100%;

        justify-content:flex-end;

        padding:13px 0;

        font-size:11px;

        letter-spacing:1.5px;

        border-bottom:
            1px solid #eee3da !important;

    }


    .bft-nav a:last-child{

        border-bottom:0 !important;

    }


    .bft-nav a::after{

        bottom:7px;

        height:1.5px;

    }


    /* HERO */

    .bft-hero{

        min-height:0;

        height:auto;

    }


    .bft-hero-inner{

        width:calc(100% - 24px);

        min-height:0;

        grid-template-columns:
            minmax(0,1.15fr)
            minmax(105px,.85fr);

        align-items:center;

        gap:7px;

        padding:
            24px 0
            18px;

    }


    .bft-hero-content{

        max-width:none;

    }


    .bft-hero-eyebrow{

        margin-bottom:9px;

        font-size:8px;

        letter-spacing:2px;

    }


    .bft-hero-content h1{

        font-size:34px;

        line-height:.95;

        letter-spacing:-.6px;

    }


    .bft-hero-text{

        margin-top:10px;

        font-size:10.5px;

        line-height:1.55;

    }


    .bft-hero-buttons{

        gap:7px;

        margin-top:14px;

    }


    .bft-btn{

        min-height:35px;

        padding:0 11px;

        font-size:7.5px;

        letter-spacing:.8px;

    }


    .bft-hero-visual{

        width:100%;

        height:165px;

        min-width:0;

    }


    .bft-hero-visual::before{

        width:120px;

        height:32px;

        bottom:15px;

        filter:blur(10px);

    }


    .bft-hero-visual::after{

        display:none !important;

        content:none !important;

    }


    .bft-hero-card{

        width:108px;

        height:140px;

        border-radius:15px !important;

        padding:0 !important;

        background:transparent !important;

        border:none !important;

        animation:
            bftMagicFloatMobile
            5s
            ease-in-out
            infinite;

        box-shadow:
            14px 20px 26px
            rgba(45,26,18,.22),

            -4px -4px 12px
            rgba(255,255,255,.8);

    }


    @keyframes bftMagicFloatMobile {

        0% {

            transform:
                translate3d(0,0,0)
                rotateY(-16deg)
                rotateX(7deg)
                rotateZ(2deg);

        }

        25% {

            transform:
                translate3d(-3px,-6px,8px)
                rotateY(-10deg)
                rotateX(4deg)
                rotateZ(1deg);

        }

        50% {

            transform:
                translate3d(3px,-10px,14px)
                rotateY(-4deg)
                rotateX(1deg)
                rotateZ(-1deg);

        }

        75% {

            transform:
                translate3d(4px,-5px,7px)
                rotateY(-11deg)
                rotateX(4deg)
                rotateZ(1deg);

        }

        100% {

            transform:
                translate3d(0,0,0)
                rotateY(-16deg)
                rotateX(7deg)
                rotateZ(2deg);

        }

    }


    .bft-hero-card img{

        border-radius:15px !important;

        padding:0 !important;

        margin:0 !important;

        background:transparent !important;

        border:none !important;

    }


    .bft-hero-card::before{

        border-radius:15px;

    }


    .bft-hero-card::after{

        width:42px;

        height:57px;

        right:-24px;

        bottom:18px;

        border-radius:8px;

    }


    #catalogue{

        padding-top:22px !important;

    }


    #catalogue .bft-section-heading{

        margin-bottom:14px !important;

    }


    .bft-section {

        padding:55px 16px;

    }


    .bft-section-heading {

        margin-bottom:25px;

    }


    .bft-section-title {

        font-size:36px;

    }


    .bft-product-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px;

    }


    .bft-product-card {

        border-radius:14px;

    }


    .bft-product-image-wrap {

        padding:6px;

    }


    .bft-product-image {

        border-radius:10px;

    }


    .bft-product-content {

        padding:10px;

        display:flex;

        flex:1;

        flex-direction:column;

        min-width:0;

    }


    .bft-product-name {

        font-size:17px;

        min-height:2.4em;

        display:-webkit-box;

        -webkit-box-orient:vertical;

        -webkit-line-clamp:2;

        overflow:hidden;

    }


    .bft-product-description {

        font-size:10px;

        line-height:1.45;

        min-height:2.9em;

        -webkit-line-clamp:2;

    }


    .bft-product-price {

        margin-top:8px;

        font-size:13px;

    }


    .bft-whatsapp-button {

        width:100%;

        min-width:0;

        min-height:36px;

        margin-top:auto;

        padding:7px 2px;

        font-size:clamp(6.5px,1.8vw,8px);

        letter-spacing:.25px;

        line-height:1.1;

        white-space:nowrap;

    }


    .bft-customize {

        padding:50px 20px;

    }


    .bft-customize-inner {

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }


    .bft-customize-title {

        font-size:36px;

    }


    .bft-story-list {

        gap:55px;

    }


    .bft-story-row,
    .bft-story-row.reverse {

        grid-template-columns:1fr;

        gap:25px;

    }


    .bft-story-row.reverse .bft-story-image,
    .bft-story-row.reverse .bft-story-content {

        order:initial;

    }


    .bft-story-content h3 {

        font-size:36px;

    }


    .bft-story-content p {

        font-size:13px;

        line-height:1.75;

    }


    .bft-story-row:first-child .bft-story-image img {

        aspect-ratio:1/1;

        padding:22px;

        object-fit:contain;

    }


    .bft-story-row:not(:first-child) .bft-story-image img {

        width:100%;

        height:auto;

        aspect-ratio:auto;

        object-fit:contain;

        object-position:center;

        padding:0;

        background:#fff;

        filter:none !important;

        opacity:1 !important;

    }


    .bft-product-modal-main {

        grid-template-columns:1fr;

        gap:18px;

    }


    .bft-modal-box {

        width:100%;

        max-height:92dvh;

        overflow-y:auto;

        overscroll-behavior:contain;

        padding:15px;

        border-radius:20px;

        scroll-behavior:auto;

    }


    #bftModalImage {

        display:block;

        width:100%;

        height:auto;

        max-height:none;

        object-fit:cover;

        scroll-margin-top:0;

    }


    .bft-modal-details {

        padding:5px;

    }


    .bft-modal-details h2 {

        font-size:36px;

    }


    .bft-related-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }


    .bft-magic-modal{

        padding:15px;

    }


    .bft-magic-image{

        max-width:96vw;

        max-height:88vh;

        width:auto;

        height:auto;

        object-fit:contain;

        border-radius:16px;

        filter:none !important;

        opacity:1 !important;

    }


    .bft-story-modal-box {

        padding:30px 22px;

        border-radius:20px;

    }


    .bft-footer {

        padding:50px 20px 20px;

    }


    .bft-footer-inner {

        grid-template-columns:1fr 1fr;

        gap:35px 22px;

    }


    .bft-footer-brand {

        grid-column:1 / -1;

    }


    .bft-footer-logo {

        width:88px;

        height:70px;

        padding:0 !important;

        background:transparent !important;

        border:none !important;

        border-radius:14px !important;

        object-fit:contain !important;

    }


    .bft-back-top {

        right:16px;

        bottom:16px;

        width:43px;

        height:43px;

    }

}


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

@media(max-width:520px){

    .bft-footer-inner {

        grid-template-columns:1fr;

    }


    .bft-footer-brand {

        grid-column:auto;

    }

}


@media(max-width:380px){

    .bft-product-grid {

        gap:7px;

    }


    .bft-product-content {

        padding:8px;

    }


    .bft-product-name {

        font-size:15px;

    }


    .bft-whatsapp-button {

        font-size:6.5px;

        letter-spacing:0;

        padding-left:1px;

        padding-right:1px;

    }


    .bft-hero-inner{

        grid-template-columns:
            minmax(0,1.18fr)
            minmax(92px,.82fr);

        gap:5px;

        padding:
            19px 0
            14px;

    }


    .bft-hero-content h1{

        font-size:29px;

    }


    .bft-hero-text{

        font-size:9.5px;

    }


    .bft-hero-buttons{

        margin-top:11px;

    }


    .bft-btn{

        min-height:32px;

        padding:0 9px;

        font-size:7px;

    }


    .bft-hero-visual{

        height:145px;

    }


    .bft-hero-card{

        width:94px;

        height:122px;

        border-radius:14px !important;

    }


    .bft-hero-card img{

        border-radius:14px !important;

    }

}


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

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

    .bft-hero-card,
    .bft-hero-visual::before,
    .bft-hero-visual::after,
    .bft-hero::before,
    .bft-hero::after,
    .bft-hero-card .bft-hero-light{

        animation:none !important;

    }

}

</style>


<!-- =====================================================
     ANNOUNCEMENT
===================================================== -->

<div class="bft-announcement">

    <div class="bft-announcement-track">

        <span class="bft-announcement-item">
            PAN INDIA DELIVERY
        </span>

        <span class="bft-announcement-item">
            LIMITED STOCK
        </span>

        <span class="bft-announcement-item">
            ORDER ON WHATSAPP
        </span>

        <span class="bft-announcement-item">
            THOUGHTFULLY CURATED • BEAUTIFULLY GIFTED
        </span>

        <span class="bft-announcement-item">
            PAN INDIA DELIVERY
        </span>

        <span class="bft-announcement-item">
            LIMITED STOCK
        </span>

        <span class="bft-announcement-item">
            ORDER ON WHATSAPP
        </span>

        <span class="bft-announcement-item">
            THOUGHTFULLY CURATED • BEAUTIFULLY GIFTED
        </span>

    </div>

</div>


<!-- HEADER -->

<header class="bft-header">

    <div class="bft-header-inner">

        <a href="#home" class="bft-logo-link">

            <img
                src="<?php echo esc_url($logo_url); ?>"
                onerror="this.onerror=null;this.src='<?php echo esc_url($logo_fallback_url); ?>';"
                alt="BFT Gifting"
            >

        </a>


        <nav class="bft-nav" id="bftNav">

            <a href="#home">HOME</a>

            <a href="#catalogue">CATALOGUE</a>

            <a href="#best-sellers">BEST SELLERS</a>

            <a href="#about">ABOUT</a>

        </nav>


        <div class="bft-header-right">

            <button
                type="button"
                class="bft-menu-toggle"
                onclick="bftToggleMenu()"
                aria-label="Open menu"
            >

                <span></span>
                <span></span>
                <span></span>

            </button>

        </div>

    </div>

</header>


<!-- HERO -->

<section class="bft-hero" id="home">

    <div class="bft-hero-inner">

        <div class="bft-hero-content">

            <div class="bft-hero-eyebrow">
                GIFTS THAT FEEL PERSONAL
            </div>


            <h1>
                Thoughtful Gifts.<br>
                <span>Beautifully Given.</span>
            </h1>


            <p class="bft-hero-text">
                Curated gifting hampers made to turn ordinary moments into memorable ones. Choose your favourite and order directly on WhatsApp.
            </p>


            <div class="bft-hero-buttons">

                <a
                    href="#catalogue"
                    class="bft-btn bft-btn-primary"
                >
                    VIEW CATALOGUE
                </a>


                <a
                    href="https://wa.me/919510565011"
                    target="_blank"
                    class="bft-btn bft-btn-outline"
                >
                    GET IN TOUCH
                </a>

            </div>

        </div>


        <div class="bft-hero-visual">

            <div class="bft-hero-card">

                <div class="bft-hero-light"></div>

                <img
                    src="<?php echo esc_url($logo_url); ?>"
                    onerror="this.onerror=null;this.src='<?php echo esc_url($logo_fallback_url); ?>';"
                    alt="BFT Gifting"
                >

            </div>

        </div>

    </div>

</section>


<!-- CATALOGUE -->

<section class="bft-section" id="catalogue">

    <div class="bft-section-inner">

        <div class="bft-section-heading">

            <div class="bft-eyebrow">
                OUR COLLECTION
            </div>

            <h2 class="bft-section-title">
                The Catalogue
            </h2>

            <p class="bft-section-subtitle">
                Thoughtfully selected gifting options for birthdays, celebrations, corporate moments and everything in between.
            </p>

        </div>


        <div class="bft-product-grid">

            <?php

            if ($catalogue_query->have_posts()) :

                while ($catalogue_query->have_posts()) :

                    $catalogue_query->the_post();

                    $product = wc_get_product(get_the_ID());

                    if ($product) {

                        bft_product_card($product);

                    }

                endwhile;

                wp_reset_postdata();

            else :

                ?>

                <p>Products coming soon.</p>

                <?php

            endif;

            ?>

        </div>

    </div>

</section>


<!-- BEST SELLERS -->

<section
    class="bft-section bft-best-sellers"
    id="best-sellers"
>

    <div class="bft-section-inner">

        <div class="bft-section-heading">

            <div class="bft-eyebrow">
                MOST LOVED
            </div>

            <h2 class="bft-section-title">
                Best Sellers
            </h2>

            <p class="bft-section-subtitle">
                Some of the gifting choices our customers keep coming back to.
            </p>

        </div>


        <div class="bft-product-grid">

            <?php

            if ($best_seller_query->have_posts()) :

                while ($best_seller_query->have_posts()) :

                    $best_seller_query->the_post();

                    $product = wc_get_product(get_the_ID());

                    if ($product) {

                        bft_product_card($product);

                    }

                endwhile;

                wp_reset_postdata();

            endif;

            ?>

        </div>

    </div>

</section>


<!-- CUSTOMIZE -->

<section class="bft-customize">

    <div class="bft-customize-inner">

        <div>

            <div class="bft-eyebrow">
                MADE FOR YOUR MOMENT
            </div>

            <h2 class="bft-customize-title">
                Want Something Customized?
            </h2>

            <p class="bft-customize-text">
                Tell us your occasion, budget and gifting idea. We'll help you create something special.
            </p>

        </div>


        <a
            href="https://wa.me/919510565011?text=Hi%20BFT%20Gifting!%20I%20want%20a%20customized%20gift."
            target="_blank"
            class="bft-btn bft-btn-primary"
        >
            CUSTOMIZE ON WHATSAPP
        </a>

    </div>

</section>


<!-- OUR STORY -->

<section
    class="bft-section bft-story"
    id="about"
>

    <div class="bft-section-inner">

        <div class="bft-section-heading">

            <div class="bft-eyebrow">
                OUR STORY
            </div>

            <h2 class="bft-section-title">
                More Than Just A Gift.
            </h2>

            <p class="bft-section-subtitle">
                BFT Gifting is built around the little details that make giving feel personal.
            </p>

        </div>


        <div class="bft-story-list">


            <div class="bft-story-row">

                <div
                    class="bft-story-image"
                    onclick="bftOpenMagic('<?php echo esc_url($logo_url); ?>',true)"
                >

                    <div class="bft-story-image-inner">

                        <img
                            src="<?php echo esc_url($logo_url); ?>"
                            onerror="this.onerror=null;this.src='<?php echo esc_url($logo_fallback_url); ?>';"
                            alt="BFT Gifting story"
                            loading="eager"
                            decoding="async"
                        >

                        <span class="bft-story-discover">
                            CLICK TO DISCOVER
                        </span>

                    </div>

                </div>


                <div class="bft-story-content">

                    <div class="bft-eyebrow">
                        WHERE IT STARTED
                    </div>

                    <h3>
                        A Brand Built Around The Feeling Of Giving.
                    </h3>

                    <p>
                        BFT Gifting was created around a simple thought — gifting should feel personal. From choosing the right products to paying attention to the smallest details, every part of the experience is designed around the feeling you want to give someone.
                    </p>

                </div>

            </div>



            <div class="bft-story-row reverse">

                <div
                    class="bft-story-image"
                    onclick="bftOpenMagic('<?php echo esc_url($founder_url); ?>',true)"
                >

                    <div class="bft-story-image-inner">

                        <img
                            src="<?php echo esc_url($founder_url); ?>"
                            alt="BFT Gifting founders"
                            loading="eager"
                            decoding="async"
                        >

                        <span class="bft-story-discover">
                            CLICK TO DISCOVER
                        </span>

                    </div>

                </div>


                <div class="bft-story-content">

                    <div class="bft-eyebrow">
                        THE PEOPLE BEHIND BFT
                    </div>

                    <h3>
                        Three People. One Gifting Vision.
                    </h3>

                    <p>
                        BFT Gifting was started by three people who shared the same excitement for thoughtful gifting and beautiful experiences. What began as a small startup idea is growing into a brand where the three of us bring different ideas together to create gifts people genuinely enjoy giving.
                    </p>

                </div>

            </div>



            <div class="bft-story-row">

                <div
                    class="bft-story-image"
                    onclick="bftOpenMagic('<?php echo esc_url($packaging_url); ?>',true)"
                >

                    <div class="bft-story-image-inner">

                        <img
                            src="<?php echo esc_url($packaging_url); ?>"
                            alt="BFT Gifting packaging"
                            loading="lazy"
                        >

                        <span class="bft-story-discover">
                            CLICK TO DISCOVER
                        </span>

                    </div>

                </div>


                <div class="bft-story-content">

                    <div class="bft-eyebrow">
                        THE FINAL TOUCH
                    </div>

                    <h3>
                        We Don't Just Pack A Gift. We Present It With Heart.
                    </h3>

                    <p>
                        We believe presentation is part of the gift itself. Every layer, finish and little detail is considered to make the unboxing feel special — because when something is meant for someone important, it should look and feel like it was made specially for them.
                    </p>

                    <a
                        href="#"
                        class="bft-read-more"
                        onclick="event.preventDefault();bftOpenStoryAbout();"
                    >
                        READ MORE →
                    </a>

                </div>

            </div>


        </div>

    </div>

</section>


<!-- PRODUCT MODAL -->

<div
    class="bft-modal"
    id="bftProductModal"
    onclick="bftCloseProduct(event)"
>

    <div class="bft-modal-box">

        <button
            type="button"
            class="bft-close"
            onclick="bftCloseProduct()"
        >
            ×
        </button>


        <div class="bft-product-modal-main">

            <div>

                <img
                    id="bftModalImage"
                    class="bft-product-modal-image"
                    src=""
                    alt=""
                    onclick="event.stopPropagation(); bftOpenMagic(this.src, false);"
                    style="cursor:zoom-in"
                >

            </div>


            <div class="bft-modal-details">

                <h2 id="bftModalName"></h2>

                <div
                    id="bftModalPrice"
                    class="bft-modal-price"
                ></div>

                <div
                    id="bftModalDescription"
                    class="bft-modal-description"
                ></div>

                <a
                    id="bftModalWhatsapp"
                    class="bft-modal-whatsapp"
                    href="#"
                    target="_blank"
                >
                    ORDER ON WHATSAPP
                </a>

            </div>

        </div>


        <div class="bft-related">

            <h3>
                You May Also Like
            </h3>

            <div
                class="bft-related-grid"
                id="bftRelatedGrid"
            ></div>

        </div>

    </div>

</div>


<!-- STORY ABOUT MODAL -->

<div
    class="bft-story-modal"
    id="bftStoryAboutModal"
    onclick="bftCloseStoryAbout(event)"
>

    <div class="bft-story-modal-box">

        <button
            type="button"
            class="bft-close"
            onclick="bftCloseStoryAbout()"
        >
            ×
        </button>


        <div class="bft-eyebrow">
            ABOUT BFT GIFTING
        </div>


        <h2>
            Every Gift Has A Story. We Help You Tell It.
        </h2>


        <p>
            BFT Gifting started with a simple belief — a gift should be more than something placed inside a box. It should carry thought, emotion and a little part of the person giving it.
        </p>


        <p>
            We are a gifting startup built by three people who came together with a shared love for meaningful gifting. We carefully curate products, combinations and presentation so that every hamper feels considered rather than ordinary.
        </p>


        <p>
            From birthdays and anniversaries to festivals, celebrations, corporate gifting and those random moments when you simply want to make someone smile, we want BFT Gifting to make choosing and sending a gift feel easy and personal.
        </p>


        <p>
            Our focus is not only what goes inside the hamper. We care about how it looks, how it arrives and most importantly, how the person receiving it feels when they open it.
        </p>


        <p>
            This is only the beginning of our journey — and every gift we create is another small part of the BFT Gifting story.
        </p>

    </div>

</div>


<!-- MAGIC IMAGE -->

<div
    class="bft-magic-modal"
    id="bftMagicModal"
    onclick="bftCloseMagic(event)"
>

    <button
        type="button"
        class="bft-close"
        onclick="bftCloseMagic()"
    >
        ×
    </button>


    <img
        id="bftMagicImage"
        class="bft-magic-image"
        src=""
        alt=""
        decoding="async"
    >

</div>


<!-- FOOTER -->

<footer class="bft-footer">

    <div class="bft-footer-inner">


        <div class="bft-footer-brand">

            <img
                class="bft-footer-logo"
                src="<?php echo esc_url($logo_url); ?>"
                onerror="this.onerror=null;this.src='<?php echo esc_url($logo_fallback_url); ?>';"
                alt="BFT Gifting"
            >

            <p>
                Thoughtfully curated gifting hampers made to turn ordinary moments into memorable ones.
            </p>

        </div>



        <div class="bft-footer-info">

            <h3 class="bft-footer-title">
                QUICK LINKS
            </h3>


            <div class="bft-footer-links">

                <a href="#home">
                    Home
                </a>

                <a href="#catalogue">
                    Catalogue
                </a>

                <a href="#best-sellers">
                    Best Sellers
                </a>

                <a href="#about">
                    About Us
                </a>

            </div>

        </div>



        <div class="bft-footer-info">

            <h3 class="bft-footer-title">
                CONTACT
            </h3>


            <div class="bft-footer-item">

                <span class="bft-footer-icon">
                    ☎
                </span>

                <a
                    href="https://wa.me/919510565011"
                    target="_blank"
                >
                    9510565011
                </a>

            </div>


            <div class="bft-footer-item">

                <span class="bft-footer-icon">

                    <svg
                        class="bft-instagram-icon"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.8"
                    >

                        <rect
                            x="3"
                            y="3"
                            width="18"
                            height="18"
                            rx="5"
                        />

                        <circle
                            cx="12"
                            cy="12"
                            r="4"
                        />

                        <circle
                            cx="17.5"
                            cy="6.5"
                            r="1"
                            fill="currentColor"
                            stroke="none"
                        />

                    </svg>

                </span>


                <a
                    href="https://www.instagram.com/bft.gifting__/"
                    target="_blank"
                >
                    @bft.gifting__
                </a>

            </div>

        </div>



        <div class="bft-footer-info">

            <h3 class="bft-footer-title">
                FIND US
            </h3>


            <div class="bft-footer-item">

                <span class="bft-footer-icon">
                    📍
                </span>

                <span>
                    Omm Nagar,<br>
                    Surat, Gujarat<br>
                    394210
                </span>

            </div>


            <div class="bft-footer-item">

                <span class="bft-footer-icon">
                    🚚
                </span>

                <span>
                    PAN INDIA DELIVERY
                </span>

            </div>

        </div>


    </div>


    <div class="bft-footer-bottom">

        © <?php echo date('Y'); ?> BFT GIFTING. ALL RIGHTS RESERVED.

    </div>

</footer>


<!-- BACK TO TOP -->

<button
    type="button"
    class="bft-back-top"
    id="bftBackTop"
    aria-label="Back to top"
    onclick="bftScrollTop()"
>

    <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
    >

        <path d="M12 19V5"></path>

        <path d="M6 11l6-6 6 6"></path>

    </svg>

</button>


<script>

(function () {

    'use strict';


    let bftModalHistoryOpen = false;


    function bftPushModalHistory() {

        if (bftModalHistoryOpen) return;

        bftModalHistoryOpen = true;

        try {

            window.history.pushState(
                { bftModal: true },
                '',
                window.location.href
            );

        } catch (e) {

            bftModalHistoryOpen = false;

        }

    }


    function bftReleaseModalHistory() {

        if (!bftModalHistoryOpen) return;

        bftModalHistoryOpen = false;

        try {

            if (
                window.history.state &&
                window.history.state.bftModal
            ) {

                window.history.back();

            }

        } catch (e) {}

    }


    function bftHideAllModals() {

        [
            'bftProductModal',
            'bftStoryAboutModal',
            'bftMagicModal'
        ].forEach(function(id) {

            const modal =
                document.getElementById(id);

            if (modal) {

                modal.classList.remove('active');

            }

        });


        document.body.style.overflow = '';

    }


    window.addEventListener(
        'popstate',
        function() {

            if (bftModalHistoryOpen) {

                bftModalHistoryOpen = false;

                bftHideAllModals();

            }

        }
    );


    window.bftToggleMenu = function () {

        const nav =
            document.getElementById('bftNav');

        if (!nav) return;

        nav.classList.toggle('active');

    };


    document
        .querySelectorAll('.bft-nav a')
        .forEach(function(link) {

            link.addEventListener(
                'click',
                function() {

                    const nav =
                        document.getElementById('bftNav');

                    if (nav) {

                        nav.classList.remove('active');

                    }

                }
            );

        });


    window.bftProducts = [];


    document
        .querySelectorAll('.bft-product-card')
        .forEach(function(card) {

            window.bftProducts.push({

                id: card.dataset.productId,

                name: card.dataset.name || '',

                price: card.dataset.price || '',

                image: card.dataset.image || '',

                description:
                    card.dataset.description || '',

                shortDescription:
                    card.dataset.shortDescription || '',

                whatsapp:
                    card.dataset.whatsapp || ''

            });

        });


    window.bftOpenProduct = function(card) {

        if (!card) return;

        window.bftOpenProductData({

            id:
                card.dataset.productId || '',

            name:
                card.dataset.name || '',

            price:
                card.dataset.price || '',

            image:
                card.dataset.image || '',

            shortDescription:
                card.dataset.shortDescription || '',

            whatsapp:
                card.dataset.whatsapp || ''

        });

    };


    window.bftOpenProductData = function(product) {

        if (!product) return;


        const id =
            String(product.id || '');

        const name =
            product.name || '';

        const price =
            product.price || '';

        const image =
            product.image || '';

        const shortDescription =
            product.shortDescription || '';

        const whatsapp =
            product.whatsapp || '';


        const modalImage =
            document.getElementById('bftModalImage');


        if (modalImage) {

            modalImage.src = image;

            modalImage.alt = name;

        }


        const nameElement =
            document.getElementById('bftModalName');


        if (nameElement) {

            nameElement.textContent = name;

        }


        const priceElement =
            document.getElementById('bftModalPrice');


        if (priceElement) {

            if (price !== '') {

                const numericPrice =
                    parseFloat(
                        String(price)
                            .replace(/[^0-9.]/g, '')
                    );


                priceElement.textContent =
                    !isNaN(numericPrice)

                        ? '₹' +
                          numericPrice.toLocaleString('en-IN')

                        : '₹' + price;

            } else {

                priceElement.textContent = '';

            }

        }


        const descriptionElement =
            document.getElementById(
                'bftModalDescription'
            );


        if (descriptionElement) {

            descriptionElement.textContent =
                shortDescription;

        }


        const whatsappElement =
            document.getElementById(
                'bftModalWhatsapp'
            );


        if (whatsappElement) {

            whatsappElement.href =
                whatsapp || '#';

        }


        window.bftBuildRelated(id);


        const modal =
            document.getElementById(
                'bftProductModal'
            );


        if (modal) {

            const modalBox =
                modal.querySelector(
                    '.bft-modal-box'
                );


            if (modalBox) {

                modalBox.scrollTop = 0;

                modalBox.scrollLeft = 0;

            }


            modal.classList.add('active');


            window.requestAnimationFrame(
                function() {

                    if (modalBox) {

                        modalBox.scrollTop = 0;

                        modalBox.scrollLeft = 0;

                    }

                }
            );

        }


        if (
            typeof bftPushModalHistory ===
            'function'
        ) {

            bftPushModalHistory();

        }


        document.body.style.overflow =
            'hidden';

    };


    window.bftBuildRelated =
        function(currentId) {

            const grid =
                document.getElementById(
                    'bftRelatedGrid'
                );


            if (!grid) return;


            grid.innerHTML = '';


            const uniqueProducts = [];

            const seen = {};


            window.bftProducts.forEach(
                function(product) {

                    if (
                        product.id !== currentId &&
                        !seen[product.id]
                    ) {

                        seen[product.id] = true;

                        uniqueProducts.push(
                            product
                        );

                    }

                }
            );


            uniqueProducts
                .slice(0, 4)
                .forEach(
                    function(product) {

                        const item =
                            document.createElement(
                                'div'
                            );


                        item.className =
                            'bft-related-item';


                        item.innerHTML =

                            '<img class="bft-related-image" src="' +
                            escapeHtml(
                                product.image || ''
                            ) +
                            '" alt="' +
                            escapeHtml(
                                product.name
                            ) +
                            '" loading="lazy">' +

                            '<div class="bft-related-name">' +
                            escapeHtml(
                                product.name
                            ) +
                            '</div>' +

                            '<div class="bft-related-description">' +
                            escapeHtml(
                                product.shortDescription || ''
                            ) +
                            '</div>';


                        const relatedImage =
                            item.querySelector(
                                '.bft-related-image'
                            );


                        if (relatedImage) {

                            relatedImage.addEventListener(
                                'click',
                                function(event) {

                                    event.preventDefault();

                                    event.stopPropagation();

                                    window.bftOpenProductData(
                                        product
                                    );

                                }
                            );

                        }


                        item.addEventListener(
                            'click',
                            function(event) {

                                event.preventDefault();

                                event.stopPropagation();

                                window.bftOpenProductData(
                                    product
                                );

                            }
                        );


                        grid.appendChild(item);

                    }
                );

        };


    window.bftCloseProduct =
        function(event) {

            const modal =
                document.getElementById(
                    'bftProductModal'
                );


            if (!modal) return;


            if (
                !event ||
                event.target === modal
            ) {

                modal.classList.remove(
                    'active'
                );

                document.body.style.overflow =
                    '';

                bftReleaseModalHistory();

            }

        };


    window.bftOpenStoryAbout =
        function() {

            const modal =
                document.getElementById(
                    'bftStoryAboutModal'
                );


            if (!modal) return;


            modal.classList.add('active');

            bftPushModalHistory();

            document.body.style.overflow =
                'hidden';

        };


    window.bftCloseStoryAbout =
        function(event) {

            const modal =
                document.getElementById(
                    'bftStoryAboutModal'
                );


            if (!modal) return;


            if (
                !event ||
                event.target === modal
            ) {

                modal.classList.remove(
                    'active'
                );

                document.body.style.overflow =
                    '';

                bftReleaseModalHistory();

            }

        };


    window.bftOpenMagic =
        function(url, sparkle) {

            const modal =
                document.getElementById(
                    'bftMagicModal'
                );

            const image =
                document.getElementById(
                    'bftMagicImage'
                );


            if (!modal || !image) return;


            image.removeAttribute('src');

            image.src = url;

            image.alt = 'BFT Gifting';


            modal.classList.add('active');

            bftPushModalHistory();

            document.body.style.overflow =
                'hidden';


            if (sparkle) {

                for (
                    let i = 0;
                    i < 22;
                    i++
                ) {

                    const spark =
                        document.createElement(
                            'span'
                        );


                    spark.className =
                        'bft-spark';


                    spark.style.left =
                        (
                            50 +
                            (
                                Math.random() *
                                25 -
                                12.5
                            )
                        ) + '%';


                    spark.style.top =
                        (
                            50 +
                            (
                                Math.random() *
                                25 -
                                12.5
                            )
                        ) + '%';


                    spark.style.setProperty(
                        '--x',
                        (
                            Math.random() *
                            220 -
                            110
                        ) + 'px'
                    );


                    spark.style.setProperty(
                        '--y',
                        (
                            Math.random() *
                            220 -
                            110
                        ) + 'px'
                    );


                    modal.appendChild(
                        spark
                    );


                    setTimeout(
                        function() {

                            spark.remove();

                        },
                        900
                    );

                }

            }

        };


    window.bftCloseMagic =
        function(event) {

            const modal =
                document.getElementById(
                    'bftMagicModal'
                );


            if (!modal) return;


            if (
                !event ||
                event.target === modal
            ) {

                modal.classList.remove(
                    'active'
                );

                document.body.style.overflow =
                    '';

                bftReleaseModalHistory();

            }

        };


    const backTop =
        document.getElementById(
            'bftBackTop'
        );


    function updateBackTop() {

        if (!backTop) return;


        if (window.scrollY > 450) {

            backTop.classList.add('show');

        } else {

            backTop.classList.remove('show');

        }

    }


    window.addEventListener(
        'scroll',
        updateBackTop,
        { passive:true }
    );


    window.bftScrollTop =
        function() {

            window.scrollTo({

                top:0,

                behavior:'smooth'

            });

        };


    updateBackTop();


    document.addEventListener(
        'keydown',
        function(event) {

            if (event.key !== 'Escape')
                return;


            const productModal =
                document.getElementById(
                    'bftProductModal'
                );


            const storyModal =
                document.getElementById(
                    'bftStoryAboutModal'
                );


            const magicModal =
                document.getElementById(
                    'bftMagicModal'
                );


            if (productModal)
                productModal.classList.remove(
                    'active'
                );


            if (storyModal)
                storyModal.classList.remove(
                    'active'
                );


            if (magicModal)
                magicModal.classList.remove(
                    'active'
                );


            document.body.style.overflow =
                '';


            bftReleaseModalHistory();

        }
    );


    function escapeHtml(value) {

        return String(value || '')

            .replace(
                /&/g,
                '&amp;'
            )

            .replace(
                /</g,
                '&lt;'
            )

            .replace(
                />/g,
                '&gt;'
            )

            .replace(
                /"/g,
                '&quot;'
            )

            .replace(
                /'/g,
                '&#039;'
            );

    }

})();

</script>


<?php wp_footer(); ?>

</body>

</html>