/* Brown Blends overrides on top of the Koppee template (CC BY 4.0, HTML Codex) */
:root{
  --bb-brown:#33211D; --bb-gold:#C2A07A; --bb-gold-dark:#8B6A4B;
  --bb-mocha:#5C3D2E; --bb-mocha-dark:#452A1F; --bb-clay:#7B5540; --bb-clay-dark:#63422F;
  --bb-cream:#FFFBF2; --bb-sand:#F4E9D6;
}
html{scroll-behavior:smooth}
body{font-family:'Lato',sans-serif;color:#5a4a44;font-size:1.05rem}
h1,h2,h3,h4,h5,h6,.display-1,.display-3,.display-4{font-family:'Playfair Display',Georgia,serif;font-weight:600;color:var(--bb-brown)}
.text-white h1,.text-white h2,.text-white h3,.text-white h4,.text-white h5,.text-white h6,
.carousel-caption h1,.carousel-caption h2,.offer h1,.offer h4,.reservation h1,.footer h4,.footer h6{color:#fff}
.text-primary,.carousel-caption .text-primary,.offer .text-primary{color:var(--bb-gold)!important}
.section-title h4{font-family:'Lato',sans-serif;font-weight:700;font-size:.95rem;color:var(--bb-gold-dark)!important}
.btn{font-family:'Lato',sans-serif;letter-spacing:.5px;border-radius:2px}
.btn-primary{background:var(--bb-mocha);border-color:var(--bb-mocha);color:var(--bb-cream)}
.btn-primary:hover{background:var(--bb-mocha-dark);border-color:var(--bb-mocha-dark);color:#fff}

/* Wordmark */
.bb-brand{display:flex;flex-direction:column;line-height:1;text-decoration:none!important}
.bb-brand .bb-name{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:2.1rem;color:#fff}
.bb-brand .bb-name span{color:var(--bb-gold)}
.bb-brand .bb-by{font-size:.68rem;letter-spacing:3px;text-transform:uppercase;color:var(--bb-sand);margin-top:6px}
.bb-brand img.bb-logo{height:96px;width:auto;display:none}
.navbar-dark .navbar-nav .nav-link{font-family:'Lato',sans-serif;text-transform:uppercase;font-size:.85rem;letter-spacing:2px}

/* Hero */
.carousel-caption h1.display-1{font-size:clamp(2.4rem,6vw,5rem);font-style:italic;line-height:1.1;max-width:900px}
.carousel-caption p.lead{color:var(--bb-sand);max-width:620px;font-size:1.2rem}
.carousel-item img{min-height:520px;object-fit:cover}

/* Video hero */
.bb-hero{position:relative;width:100%;height:88vh;min-height:520px;max-height:900px;overflow:hidden;background:var(--bb-brown,#33211D)}
.bb-hero-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover;z-index:0}
.bb-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,15,12,.62) 0%,rgba(28,15,12,.55) 45%,rgba(28,15,12,.78) 100%);z-index:1}
.bb-hero-caption{position:absolute;inset:0;z-index:2;color:#fff;justify-content:flex-end !important;padding-bottom:52px}
.bb-hero-caption h2{text-shadow:0 1px 10px rgba(0,0,0,.6)}
.bb-hero-caption h1.display-1{font-size:clamp(1.9rem,4.2vw,3.4rem);font-style:italic;line-height:1.1;max-width:900px;color:#fff !important;text-shadow:0 2px 24px rgba(0,0,0,.65),0 1px 4px rgba(0,0,0,.5)}
.bb-hero-caption p.lead{color:#f4e9d8;max-width:620px;font-size:1.05rem;margin-bottom:.25rem;text-shadow:0 1px 12px rgba(0,0,0,.6)}


/* Builder */
.bb-step{background:#fff;border:1px solid #eadfcd;padding:26px 26px 14px;margin-bottom:22px;position:relative}
.bb-step h4{font-size:1.3rem;margin-bottom:16px}
.bb-step h4 .bb-num{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--bb-mocha);color:var(--bb-cream);
  align-items:center;justify-content:center;font-family:'Lato',sans-serif;font-weight:700;font-size:.95rem;margin-right:12px}
.bb-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:12px;margin-bottom:14px}
.bb-opt{position:relative}
.bb-opt input{position:absolute;opacity:0;pointer-events:none}
.bb-opt label{display:block;height:100%;margin:0;padding:12px 14px;border:1.5px solid #e5d8c3;background:var(--bb-cream);cursor:pointer;transition:.15s}
.bb-opt label strong{display:block;color:var(--bb-brown);font-family:'Lato',sans-serif}
.bb-opt label small{color:#8a766d}
.bb-opt label:hover{border-color:var(--bb-gold)}
.bb-opt input:checked+label{border-color:var(--bb-brown);background:var(--bb-brown)}
.bb-opt input:checked+label strong{color:var(--bb-gold)}
.bb-opt input:checked+label small{color:var(--bb-sand)}
.bb-opt input:focus-visible+label{outline:3px solid var(--bb-gold);outline-offset:2px}
.bb-summary{background:var(--bb-brown);color:#fff;padding:30px;position:sticky;top:20px}
.bb-summary h3{color:#fff}
.bb-summary dl{margin:0}
.bb-summary dt{font-size:.75rem;letter-spacing:2px;text-transform:uppercase;color:var(--bb-gold);font-weight:700;margin-top:12px}
.bb-summary dd{margin:0;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:8px;color:#fff}
.bb-summary dd.empty{color:rgba(255,255,255,.45)}
.bb-details .form-control{height:48px;border-radius:2px;border:1.5px solid #e5d8c3;background:var(--bb-cream)}
.bb-details textarea.form-control{height:auto}
.bb-details .form-control:focus{border-color:var(--bb-gold);box-shadow:none}
.btn-whatsapp{background:var(--bb-mocha);border-color:var(--bb-mocha);color:var(--bb-cream);font-weight:700}
.btn-whatsapp:hover{background:#1ebe5b;border-color:#1ebe5b;color:#fff}
.bb-error{color:#b3261e;font-size:.9rem;min-height:1.3em}

/* Product cards */
.bb-card{background:#fff;border:1px solid #eadfcd;text-align:center;padding:34px 24px 26px;height:100%;transition:.2s}
.bb-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(51,33,29,.12)}
.bb-ratio{width:92px;height:92px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
  background:var(--bb-brown);color:var(--bb-gold);font-family:'Playfair Display',serif;font-size:1.55rem;border:4px solid var(--bb-gold)}
.bb-card h4{font-size:1.25rem}
.bb-card p{font-size:.95rem;min-height:3.2em}
.bb-card .btn{margin:3px 2px;font-size:.85rem}
.btn-meesho{background:#9f2089;border-color:#9f2089;color:#fff}.btn-meesho:hover{background:#7f196d;color:#fff}
.btn-flipkart{background:#2874f0;border-color:#2874f0;color:#fff}.btn-flipkart:hover{background:#1d5fc4;color:#fff}

/* Features */
.bb-feature{text-align:center;padding:10px 18px}
.bb-feature .service-icon{margin:0 auto 16px;width:64px;height:64px;font-size:24px;border-radius:50%}
.bb-feature h4{font-size:1.2rem}
.bb-light{background:var(--bb-sand);position:relative;overflow:hidden}
.bb-light::before{content:"";position:absolute;inset:0;
  background:url(../img/bg-illustration.jpg) top center repeat;
  background-size:430px auto;
  opacity:.25;pointer-events:none;z-index:0}
@media (max-width:767px){
  .bb-light::before{background-size:300px auto}
}
.bb-light > *{position:relative;z-index:1}
.bb-contact-line{font-size:1.15rem}
.bb-contact-line i{color:var(--bb-gold);width:28px}
@media(max-width:991.98px){.bb-summary{position:static;margin-top:10px}.carousel-item img{min-height:460px}}

@media(max-width:575.98px){.carousel-control-prev,.carousel-control-next{display:none}.bb-step{padding:20px 16px 6px}.bb-opt label{padding:10px 12px}.bb-opt label strong{font-size:.95rem}.carousel-caption p.lead{font-size:1.05rem}}

/* ---- Mobile overrides (kept last so they win) ---- */
@media (max-width:991.98px){
  /* Navbar overlays the video on mobile/tablet, same as desktop */
  .container-fluid.nav-bar,.nav-bar.container-sm,.nav-bar.container-md,.nav-bar.container-lg,.nav-bar.container-xl{
    position:absolute !important;background:transparent !important;width:100%;left:0;top:0;z-index:9}
  .nav-bar .navbar{padding-top:.5rem !important;padding-bottom:.5rem !important}
  .navbar-toggler{border-color:rgba(255,255,255,.5);margin-right:14px}
  /* Collapsed mobile menu needs its own backdrop since the bar is now see-through */
  #navbarCollapse.show,#navbarCollapse.collapsing{background:rgba(28,15,12,.94);border-radius:6px;margin:0 14px}
}

@media (max-width:767px){
  /* Tighter hero: less dead space before the content starts */
  .bb-hero{height:62vh;min-height:380px;max-height:560px}
  .bb-brand img.bb-logo{height:62px;margin-left:4px}
  .bb-hero-caption{padding-bottom:26px}
  .bb-hero-caption h2{font-size:.78rem !important;letter-spacing:2px !important}
  .bb-hero-caption h1.display-1{font-size:1.65rem}
  .bb-hero-caption p.lead{font-size:.92rem;margin-bottom:.1rem}
  .bb-hero-caption .btn{padding:.7rem 1.6rem !important;font-size:.9rem}

  /* Skip the 4 feature icons on mobile: hero -> straight to Custom Order */
  .bb-features{display:none !important}

  /* Build Your Blend: two columns so the page isn't endless */
  .bb-step{padding:18px 16px 8px}
  .bb-step h4{font-size:1.1rem;margin-bottom:12px}
  .bb-options{grid-template-columns:1fr 1fr !important;gap:9px}
  .bb-opt label{padding:10px 11px}
  .bb-opt label strong{font-size:.92rem;line-height:1.25}
  .bb-opt label small{font-size:.72rem;line-height:1.2}
}

/* ---- One-tap preset packs ---- */
.bb-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 14px}
.bb-pack{position:relative;text-align:left;background:#fff;border:1.5px solid #e5d8c3;border-radius:4px;
  padding:20px 18px 16px;cursor:pointer;transition:.15s;font-family:inherit}
.bb-pack:hover{border-color:var(--bb-gold);transform:translateY(-2px);box-shadow:0 8px 22px rgba(51,33,29,.09)}
.bb-pack.is-active{border-color:var(--bb-brown);background:#fffaf2}
.bb-pack strong{display:block;font-family:'Playfair Display',serif;font-size:1.25rem;color:var(--bb-brown);margin-bottom:6px}
.bb-pack small{display:block;color:#8a766d;font-size:.82rem;line-height:1.5;margin-bottom:12px}
.bb-pack-cta{display:inline-block;font-family:'Lato',sans-serif;font-weight:700;font-size:.8rem;
  letter-spacing:1px;text-transform:uppercase;color:var(--bb-gold)}
.bb-pack-tag{position:absolute;top:-10px;right:14px;background:var(--bb-mocha);color:var(--bb-cream);
  font-family:'Lato',sans-serif;font-weight:700;font-size:.66rem;letter-spacing:1px;
  text-transform:uppercase;padding:4px 10px;border-radius:2px}
.bb-packs-or{text-align:center;color:#8a766d;font-size:.9rem;margin:0 0 26px}

/* ---- Sticky mobile order bar ---- */
.bb-sticky-order{position:fixed;left:0;right:0;bottom:0;z-index:40;display:block;text-align:center;
  background:var(--bb-mocha);color:var(--bb-cream) !important;font-family:'Lato',sans-serif;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;font-size:.9rem;padding:15px 10px;
  text-decoration:none !important;box-shadow:0 -3px 14px rgba(0,0,0,.18)}

@media (max-width:767px){
  .bb-prod-group{font-size:1.25rem;margin:24px 0 14px}
  .bb-prod-img img{max-height:120px}
  .bb-prod-img{padding:10px}
  .bb-prod-body{padding:0 11px 12px}
  .bb-prod-body h5{font-size:.9rem}
  .bb-prod-sub{font-size:.72rem;margin-bottom:7px}
  .bb-prod-price{font-size:1rem;margin-bottom:8px}
  .bb-buy{font-size:.75rem;padding:9px 6px}
  .bb-packs{grid-template-columns:1fr !important;gap:11px}
  .bb-pack{padding:15px 15px 13px}
  .bb-pack strong{font-size:1.08rem;margin-bottom:4px}
  .bb-pack small{font-size:.76rem;margin-bottom:8px}
  .bb-pack-tag{top:-9px;right:12px;font-size:.62rem}
  .bb-packs-or{margin-bottom:18px;font-size:.84rem}
  body{padding-bottom:54px}
  .back-to-top{bottom:68px !important}
}

/* ---- Amazon product grid ---- */
.bb-prod-group{font-family:'Playfair Display',serif;color:var(--bb-brown);font-size:1.6rem;
  margin:34px 0 18px;padding-bottom:9px;border-bottom:1px solid #e5d8c3}
.bb-prod{background:#fff;border:1px solid #e9ddc9;border-radius:4px;height:100%;
  display:flex;flex-direction:column;overflow:hidden;transition:.15s}
.bb-prod:hover{box-shadow:0 10px 26px rgba(51,33,29,.10);transform:translateY(-3px)}
.bb-prod-img{background:#fff;padding:14px;text-align:center}
.bb-prod-img img{max-height:180px;width:auto;max-width:100%;object-fit:contain}
.bb-prod-body{padding:0 15px 16px;display:flex;flex-direction:column;flex:1}
.bb-prod-body h5{font-family:'Playfair Display',serif;color:var(--bb-brown);
  font-size:1.02rem;margin:0 0 5px;line-height:1.3}
.bb-prod-sub{color:#8a766d;font-size:.78rem;margin:0 0 10px;line-height:1.4}
.bb-prod-price{font-family:'Lato',sans-serif;font-weight:700;color:var(--bb-brown);
  font-size:1.15rem;margin:auto 0 11px}
.bb-buy{display:block;text-align:center;background:var(--bb-clay);color:var(--bb-cream) !important;
  font-family:'Lato',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.5px;
  padding:10px 8px;border-radius:3px;text-decoration:none !important;transition:.15s}
.bb-buy:hover{background:var(--bb-clay-dark);color:#fff !important}

/* ---- Polish ---- */
.btn{transition:background .18s ease,border-color .18s ease,transform .18s ease}
.btn-primary{letter-spacing:1.2px;text-transform:uppercase;font-size:.85rem;font-weight:700}
.btn-primary:hover{transform:translateY(-1px)}
.bb-buy{letter-spacing:1px;text-transform:uppercase}
.bb-prod{border-color:#ece2d3}
.bb-prod:hover{box-shadow:0 10px 26px rgba(51,33,29,.08)}
.bb-pack-cta{color:var(--bb-clay)}

/* Meesho buy button: lighter brown so the two marketplaces read apart */
.bb-buy-meesho{background:var(--bb-gold-dark)}
.bb-buy-meesho:hover{background:var(--bb-mocha)}

/* ---- Scroll reveal: the empty card sits there, the product drops in ----
   Hidden state only applies once JS adds .bb-reveal-on to <html>, so the page
   stays fully visible if JS fails or is disabled. */
.bb-reveal-on .bb-prod{
  opacity:0;
  transition:opacity .35s ease}
.bb-reveal-on .bb-prod.is-visible{opacity:1}

/* The box must clip the product while it is still above the card */
.bb-prod{overflow:hidden}

/* Product photo starts above the card, falls in, lands with a small bounce */
.bb-reveal-on .bb-prod .bb-prod-img img{
  opacity:0;
  transform:translateY(-190%)}
.bb-reveal-on .bb-prod.is-visible .bb-prod-img img{
  animation:bb-drop .8s cubic-bezier(.33,.1,.35,1) forwards}

/* Straight fall, decelerating into place. No bounce, no squash. */
@keyframes bb-drop{
  0%   {opacity:0; transform:translateY(-190%)}
  14%  {opacity:1}
  100% {opacity:1; transform:translateY(0)}
}

/* Text settles in just after the product lands */
.bb-reveal-on .bb-prod .bb-prod-body{opacity:0;transform:translateY(8px)}
.bb-reveal-on .bb-prod.is-visible .bb-prod-body{
  opacity:1;transform:none;
  transition:opacity .45s ease .42s, transform .45s ease .42s}

/* Headings and preset packs keep the gentler fade-up */
.bb-reveal-on .bb-prod-group,
.bb-reveal-on .bb-pack{
  opacity:0;transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1)}
.bb-reveal-on .bb-prod-group.is-visible,
.bb-reveal-on .bb-pack.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .bb-reveal-on .bb-prod,
  .bb-reveal-on .bb-prod .bb-prod-img img,
  .bb-reveal-on .bb-prod .bb-prod-body,
  .bb-reveal-on .bb-prod-group,
  .bb-reveal-on .bb-pack{
    opacity:1 !important;transform:none !important;animation:none !important;transition:none !important}
}

/* ---- Squarer product cards ----
   The image is pinned inside a fixed-ratio box so it can never dictate the
   card's height (that was making the cards tall). */
.bb-prod-img{position:relative;aspect-ratio:16/9;padding:0;display:block}
.bb-prod-img img{position:absolute;top:9px;left:9px;
  width:calc(100% - 18px);height:calc(100% - 18px);
  max-width:none;max-height:none;object-fit:contain}
.bb-prod-body{padding:0 13px 12px}
.bb-prod-body h5{font-size:.95rem;margin-bottom:3px;line-height:1.25}
.bb-prod-sub{font-size:.74rem;margin-bottom:7px;line-height:1.35}
.bb-prod-price{font-size:1.02rem;margin:auto 0 7px}
.bb-buy{padding:8px 6px;font-size:.76rem}

@media (max-width:767px){
  .bb-prod-img{aspect-ratio:16/10}
  .bb-prod-img img{top:7px;left:7px;width:calc(100% - 14px);height:calc(100% - 14px)}
  .bb-prod-body{padding:0 10px 11px}
  .bb-prod-body h5{font-size:.86rem}
  .bb-prod-sub{font-size:.7rem;margin-bottom:6px}
  .bb-prod-price{font-size:.95rem;margin-bottom:7px}
  .bb-buy{padding:8px 5px;font-size:.72rem}
}

/* ---- Tap a product photo to enlarge ---- */
.bb-prod-img{cursor:zoom-in}
.bb-lightbox{position:fixed;inset:0;z-index:2000;display:none;
  align-items:center;justify-content:center;
  background:rgba(28,15,12,.92);padding:22px;
  opacity:0;transition:opacity .22s ease}
.bb-lightbox.is-open{display:flex}
.bb-lightbox.is-shown{opacity:1}
.bb-lightbox img{max-width:100%;max-height:78vh;object-fit:contain;
  border-radius:4px;background:#fff;
  transform:scale(.92);transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.bb-lightbox.is-shown img{transform:scale(1)}
.bb-lb-cap{position:absolute;left:0;right:0;bottom:26px;text-align:center;
  color:var(--bb-cream);font-family:'Lato',sans-serif;font-size:.95rem;padding:0 20px}
.bb-lb-close{position:absolute;top:14px;right:16px;
  width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;line-height:1;
  cursor:pointer}
.bb-lb-close:hover{background:rgba(255,255,255,.26)}
body.bb-lb-open{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  .bb-lightbox,.bb-lightbox img{transition:none}
}

/* ---- Hero: two buttons side by side ---- */
.bb-hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn-hero-ghost{background:transparent;border:2px solid rgba(255,255,255,.75);
  color:#fff !important;letter-spacing:1.2px;text-transform:uppercase;font-size:.85rem;
  border-radius:2px;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.btn-hero-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;
  color:#fff !important;transform:translateY(-1px)}
@media (max-width:575.98px){
  .bb-hero-cta{gap:10px;width:100%}
  .bb-hero-cta .btn{flex:1 1 100%;padding-left:1rem !important;padding-right:1rem !important;
    padding-top:.8rem !important;padding-bottom:.8rem !important;font-size:.82rem}
}