/* ==========================================================================
   Dinesh Cake House — Design Tokens
   Palette: Cocoa #3B2417, Frosting Blush #F6DCD2, Warm Sugar #FBF3EA,
            Berry #B23A48, Caramel Gold #C98A2C, Mint Whisper #E7EFE6
   Type: 'Fraunces' (display, warm & bouncy serif) + 'Manrope' (body/UI)
   Signature: rotating layered-cake in Three.js inside the hero, with a
   frosting-drip divider motif reused across sections.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --cocoa:#3B2417;
  --cocoa-soft:#5B3A28;
  --blush:#F6DCD2;
  --sugar:#FBF3EA;
  --berry:#B23A48;
  --berry-dark:#8f2c38;
  --gold:#C98A2C;
  --mint:#E7EFE6;
  --cream-line:#EADFD2;
  --ink:#241511;
  --white:#ffffff;
  --shadow-soft: 0 20px 45px -20px rgba(59,36,23,.35);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope', sans-serif;
  color:var(--ink);
  background:var(--sugar);
  overflow-x:hidden;
}
h1,h2,h3,h4, .display{
  font-family:'Fraunces', serif;
  color:var(--cocoa);
  letter-spacing:-0.01em;
}
.eyebrow{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--berry);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.eyebrow::before{
  content:'';
  width:22px;height:2px;background:var(--gold);display:inline-block;
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--berry); color:#fff;}

/* Scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--sugar);}
::-webkit-scrollbar-thumb{background:var(--blush); border-radius:10px;}

/* Buttons */
.btn-cake{
  background:var(--berry);
  color:#fff;
  border:none;
  padding:.85rem 1.9rem;
  border-radius:100px;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .3s;
  box-shadow:0 12px 28px -10px rgba(178,58,72,.55);
  display:inline-flex;
  align-items:center;
  gap:.55rem;
}
.btn-cake:hover{ background:var(--berry-dark); color:#fff; transform:translateY(-3px); box-shadow:0 18px 34px -12px rgba(178,58,72,.65);}
.btn-outline-cake{
  border:1.5px solid var(--cocoa);
  color:var(--cocoa);
  background:transparent;
  padding:.8rem 1.8rem;
  border-radius:100px;
  font-weight:700;
  font-size:.95rem;
  transition:all .3s;
}
.btn-outline-cake:hover{ background:var(--cocoa); color:#fff;}
.btn-gold{
  background:var(--gold); color:#fff; border:none; border-radius:100px;
  padding:.7rem 1.5rem; font-weight:700; box-shadow:0 10px 22px -10px rgba(201,138,44,.6);
}
.btn-gold:hover{color:#fff; filter:brightness(1.05); transform:translateY(-2px);}

/* ============ Navbar ============ */
.navbar-cake{
  padding:1rem 0;
  transition:all .35s ease;
  background:rgba(251,243,234,.75);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
}
.navbar-cake.scrolled{
  padding:.6rem 0;
  background:rgba(251,243,234,.95);
  border-bottom:1px solid var(--cream-line);
  box-shadow:0 10px 30px -20px rgba(59,36,23,.4);
}
.navbar-brand-cake{
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:1.5rem;
  color:var(--cocoa) !important;
  display:flex; align-items:center; gap:.6rem;
}
.navbar-brand-cake .brand-mark{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(145deg,var(--berry),var(--gold));
  display:flex;align-items:center;justify-content:center;
  color:#fff; font-size:1.15rem; box-shadow:var(--shadow-soft);
}
.navbar-cake .nav-link{
  color:var(--cocoa) !important;
  font-weight:600;
  font-size:.95rem;
  margin:0 .5rem;
  position:relative;
  padding:.4rem .2rem !important;
}
.navbar-cake .nav-link::after{
  content:'';
  position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--berry);
  transition:width .3s ease;
}
.navbar-cake .nav-link:hover::after, .navbar-cake .nav-link.active::after{width:100%;}
.navbar-cake .nav-link.active{color:var(--berry) !important;}
.nav-whatsapp{
  background:#25D366; color:#fff !important; border-radius:100px;
  padding:.55rem 1.2rem !important; font-weight:700; display:flex; align-items:center; gap:.4rem;
}
.nav-whatsapp:hover{filter:brightness(1.05); color:#fff !important;}

/* ============ Hero ============ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:110px;
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(201,138,44,.18), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(178,58,72,.14), transparent 45%),
    var(--sugar);
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--cream-line);
  padding:.5rem 1rem; border-radius:100px; font-size:.8rem; font-weight:700;
  color:var(--cocoa-soft); box-shadow:var(--shadow-soft);
}
.hero h1{
  font-size:clamp(2.6rem, 5.5vw, 4.6rem);
  line-height:1.03;
  font-weight:600;
  margin:1.1rem 0 1.2rem;
}
.hero h1 em{
  font-style:italic; color:var(--berry); font-weight:500;
  position:relative;
}
.hero p.lead{
  font-size:1.1rem; color:var(--cocoa-soft); max-width:480px; margin-bottom:2rem;
}
.hero-stats{ display:flex; gap:2.2rem; margin-top:2.6rem; flex-wrap:wrap;}
.hero-stats .stat-num{ font-family:'Fraunces',serif; font-size:2rem; color:var(--cocoa); font-weight:600;}
.hero-stats .stat-label{ font-size:.78rem; color:var(--cocoa-soft); text-transform:uppercase; letter-spacing:.08em; font-weight:700;}

.hero-canvas-wrap{
  position:relative;
  height:560px;
  display:flex; align-items:center; justify-content:center;
}
#cakeCanvas{ width:100%; height:100%; cursor:grab;}
.hero-canvas-wrap:active #cakeCanvas{cursor:grabbing;}
.hero-orbit-badge{
  position:absolute; bottom:10px; left:0;
  background:#fff; border-radius:var(--radius-md);
  padding:1rem 1.2rem; box-shadow:var(--shadow-soft);
  display:flex; align-items:center; gap:.7rem;
  max-width:230px;
}
.hero-orbit-badge .icon{ font-size:1.6rem;}
.hero-orbit-badge b{ display:block; font-family:'Fraunces',serif; font-size:1.05rem; color:var(--cocoa);}
.hero-orbit-badge span{ font-size:.78rem; color:var(--cocoa-soft);}
.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cocoa-soft); font-weight:700;
}
.scroll-cue .line{ width:1px; height:34px; background:var(--cocoa-soft); position:relative; overflow:hidden;}
.scroll-cue .line::after{
  content:''; position:absolute; top:0; left:0; width:100%; height:12px; background:var(--berry);
  animation:scrollcue 1.8s infinite;
}
@keyframes scrollcue{0%{transform:translateY(-14px);}100%{transform:translateY(34px);}}

/* Frosting divider between sections */
.frosting-divider{
  width:100%; height:60px; position:relative; margin-top:-1px;
}
.frosting-divider svg{ width:100%; height:100%; display:block;}

/* ============ Section shells ============ */
section{ position:relative; padding:110px 0;}
.section-sugar{background:var(--sugar);}
.section-blush{background:var(--blush);}
.section-cocoa{background:var(--cocoa); color:#f3e6da;}
.section-cocoa h2, .section-cocoa .display{color:#fff;}
.section-head{ max-width:640px; margin-bottom:3.2rem;}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{ font-size:clamp(2rem,3.6vw,2.9rem); font-weight:600; margin:.6rem 0 1rem;}
.section-head p{ color:var(--cocoa-soft); font-size:1.05rem;}
.section-cocoa .section-head p{color:#e5d3c2;}

/* ============ About ============ */
.about-img-stack{ position:relative; }
.about-img-stack img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); width:100%; }
.about-img-stack .float-card{
  position:absolute; bottom:-30px; right:-20px; background:#fff;
  padding:1.2rem 1.4rem; border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  max-width:230px;
}
.about-img-stack .float-card .stars{color:var(--gold); font-size:.9rem; margin-bottom:.3rem;}
.feature-row{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.6rem;}
.feature-row .ficon{
  width:52px;height:52px;border-radius:16px; flex:none;
  background:var(--blush); color:var(--berry); display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.feature-row h5{ font-family:'Fraunces',serif; color:var(--cocoa); margin-bottom:.25rem; font-weight:600;}
.feature-row p{ color:var(--cocoa-soft); font-size:.92rem; margin:0;}

/* ============ Category chips (shop) ============ */
.cat-chip{
  border:1.5px solid var(--cream-line); background:#fff; color:var(--cocoa);
  padding:.55rem 1.2rem; border-radius:100px; font-weight:700; font-size:.85rem;
  transition:all .25s; cursor:pointer; white-space:nowrap;
}
.cat-chip.active, .cat-chip:hover{ background:var(--cocoa); color:#fff; border-color:var(--cocoa);}
.type-toggle{ display:inline-flex; background:#fff; border:1.5px solid var(--cream-line); border-radius:100px; padding:4px;}
.type-toggle button{ border:none; background:transparent; padding:.5rem 1.1rem; border-radius:100px; font-weight:700; font-size:.82rem; color:var(--cocoa-soft);}
.type-toggle button.active{ background:var(--berry); color:#fff;}

/* ============ Product cards ============ */
.product-card{
  background:#fff; border-radius:var(--radius-md); overflow:hidden;
  box-shadow:0 12px 30px -18px rgba(59,36,23,.25);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
  height:100%;
  display:flex; flex-direction:column;
}
.product-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-soft);}
.product-card .pc-img{ position:relative; overflow:hidden; aspect-ratio:4/3.2;}
.product-card .pc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.product-card:hover .pc-img img{ transform:scale(1.08);}
.pc-tag{
  position:absolute; top:12px; left:12px; padding:.3rem .7rem; border-radius:100px;
  font-size:.68rem; font-weight:800; letter-spacing:.03em; display:flex; align-items:center; gap:.35rem;
  background:#fff; box-shadow:0 6px 14px -6px rgba(0,0,0,.25);
}
.pc-tag.veg{color:#2e7d32;}
.pc-tag.nonveg{color:#b23a3a;}
.pc-tag i.dot{width:9px;height:9px;border-radius:2px; display:inline-block; border:1.5px solid currentColor; position:relative;}
.pc-tag i.dot::after{content:'';position:absolute;inset:2px;border-radius:1px;background:currentColor;}
.pc-fav{
  position:absolute; top:12px; right:12px; width:36px;height:36px;border-radius:50%;
  background:#fff; display:flex;align-items:center;justify-content:center; color:var(--berry);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.25);
}
.product-card .pc-body{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1;}
.product-card .pc-cat{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); font-weight:800;}
.product-card h5{ font-family:'Fraunces',serif; font-weight:600; margin:.35rem 0 .5rem; color:var(--cocoa);}
.product-card p.desc{ font-size:.85rem; color:var(--cocoa-soft); margin-bottom:1rem; flex:1;}
.pc-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:auto;}
.pc-price{ font-family:'Fraunces',serif; font-weight:700; color:var(--cocoa); font-size:1.2rem;}
.pc-price small{ font-size:.7rem; font-weight:500; color:var(--cocoa-soft);}
.pc-order-btn{
  background:var(--cocoa); color:#fff; border:none; width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center; transition:.3s; font-size:1.05rem;
}
.pc-order-btn:hover{ background:var(--berry); transform:rotate(90deg);}

/* ============ Testimonials / Marquee ============ */
.marquee-wrap{ overflow:hidden; border-top:1px solid var(--cream-line); border-bottom:1px solid var(--cream-line); padding:1.4rem 0; background:#fff;}
.marquee-track{ display:flex; gap:3rem; white-space:nowrap; width:max-content;}
.marquee-track span{ font-family:'Fraunces',serif; font-size:1.4rem; color:var(--cocoa-soft); display:flex; align-items:center; gap:1rem;}
.marquee-track span i{ color:var(--gold);}

.testi-card{ background:#fff; border-radius:var(--radius-md); padding:1.8rem; box-shadow:0 12px 30px -18px rgba(59,36,23,.25); height:100%;}
.testi-card .stars{ color:var(--gold); margin-bottom:.8rem; font-size:.9rem;}
.testi-card p{ color:var(--cocoa-soft); font-size:.95rem;}
.testi-user{ display:flex; align-items:center; gap:.7rem; margin-top:1.2rem;}
.testi-user .av{ width:44px;height:44px; border-radius:50%; background:var(--blush); color:var(--berry); display:flex;align-items:center;justify-content:center; font-weight:800; font-family:'Fraunces',serif;}
.testi-user b{ display:block; font-size:.9rem; color:var(--cocoa);}
.testi-user span{ font-size:.78rem; color:var(--cocoa-soft);}

/* ============ Process steps ============ */
.process-step{ text-align:center; padding:1rem;}
.process-step .num{
  width:64px;height:64px;border-radius:50%; margin:0 auto 1.1rem; display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.25); font-family:'Fraunces',serif; font-size:1.3rem;
}
.section-cocoa .process-step h5{ color:#fff; font-family:'Fraunces',serif;}
.section-cocoa .process-step p{ color:#d9c3ae; font-size:.88rem;}

/* ============ FAQ ============ */
.faq-accordion .accordion-item{
  border:none; margin-bottom:1rem; border-radius:var(--radius-sm) !important; overflow:hidden;
  box-shadow:0 8px 22px -16px rgba(59,36,23,.3);
}
.faq-accordion .accordion-button{
  font-family:'Fraunces',serif; font-weight:600; color:var(--cocoa); font-size:1.05rem; padding:1.2rem 1.4rem;
  background:#fff;
}
.faq-accordion .accordion-button:not(.collapsed){ background:var(--blush); color:var(--berry); box-shadow:none;}
.faq-accordion .accordion-button:focus{ box-shadow:none;}
.faq-accordion .accordion-body{ color:var(--cocoa-soft); background:#fff; font-size:.92rem;}

/* ============ Contact ============ */
.contact-card{ background:#fff; border-radius:var(--radius-md); padding:1.6rem; box-shadow:0 12px 30px -18px rgba(59,36,23,.25); height:100%;}
.contact-card .cicon{ width:52px;height:52px;border-radius:16px; background:var(--blush); color:var(--berry); display:flex;align-items:center;justify-content:center; font-size:1.3rem; margin-bottom:1rem;}
.form-control-cake{
  border:1.5px solid var(--cream-line); border-radius:var(--radius-sm); padding:.8rem 1rem; font-size:.92rem; background:#fff;
}
.form-control-cake:focus{ border-color:var(--berry); box-shadow:0 0 0 3px rgba(178,58,72,.12);}
label.form-label-cake{ font-weight:700; font-size:.82rem; color:var(--cocoa); margin-bottom:.4rem; text-transform:uppercase; letter-spacing:.03em;}

/* ============ Footer ============ */
footer.site-footer{ background:var(--cocoa); color:#e8d8c8; padding-top:80px;}
footer.site-footer h6{ color:#fff; font-family:'Fraunces',serif; font-weight:600; margin-bottom:1.2rem; font-size:1.05rem;}
footer.site-footer a{ color:#d9c3ae; font-size:.9rem;}
footer.site-footer a:hover{ color:#fff;}
footer.site-footer .flinks li{ margin-bottom:.65rem;}
footer.site-footer .fsocial a{
  width:38px;height:38px;border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:inline-flex; align-items:center; justify-content:center; margin-right:.5rem; transition:.3s;
}
footer.site-footer .fsocial a:hover{ background:var(--berry); border-color:var(--berry);}
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:60px; padding:22px 0; font-size:.82rem; color:#c7ac95;}

/* ============ Floating WhatsApp button ============ */
.float-whatsapp{
  position:fixed; bottom:26px; right:26px; z-index:1000;
  width:60px;height:60px;border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.7);
  animation:pulseWa 2.4s infinite;
}
@keyframes pulseWa{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55);}
  70%{ box-shadow:0 0 0 18px rgba(37,211,102,0);}
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);}
}

/* ============ Page header (inner pages) ============ */
.page-header{
  padding:170px 0 90px; text-align:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(201,138,44,.16), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(178,58,72,.14), transparent 40%),
    var(--sugar);
}
.page-header .eyebrow{ justify-content:center;}
.page-header h1{ font-size:clamp(2.2rem,4.2vw,3.4rem); margin-top:.7rem;}
.breadcrumb-cake{ font-size:.85rem; color:var(--cocoa-soft); margin-top:.8rem;}
.breadcrumb-cake a{ color:var(--berry); font-weight:700;}

/* ============ Order Modal ============ */
.order-modal .modal-content{ border:none; border-radius:24px; overflow:hidden;}
.order-modal .modal-header{ background:var(--cocoa); color:#fff; border:none; padding:1.4rem 1.6rem;}
.order-modal .modal-title{ font-family:'Fraunces',serif; font-weight:600;}
.order-modal .btn-close{ filter:invert(1);}
.order-steps{ display:flex; align-items:center; gap:.5rem; padding:1rem 1.6rem 0;}
.order-steps .ostep{ flex:1; text-align:center; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#c9b6a5; position:relative; padding-bottom:.8rem;}
.order-steps .ostep::after{ content:''; position:absolute; bottom:0; left:0; width:100%; height:3px; background:var(--cream-line); border-radius:4px;}
.order-steps .ostep.active{ color:var(--berry);}
.order-steps .ostep.active::after{ background:var(--berry);}
.order-steps .ostep.done::after{ background:var(--gold);}
.opt-tile{
  border:1.5px solid var(--cream-line); border-radius:14px; padding:.85rem 1rem; cursor:pointer;
  transition:.25s; text-align:center; background:#fff;
}
.opt-tile:hover{ border-color:var(--berry);}
.opt-tile.selected{ border-color:var(--berry); background:var(--blush); box-shadow:0 6px 16px -8px rgba(178,58,72,.4);}
.opt-tile .lbl{ font-weight:800; font-size:.88rem; color:var(--cocoa);}
.opt-tile .pr{ font-size:.78rem; color:var(--cocoa-soft);}
.type-pill{
  border:1.5px solid var(--cream-line); border-radius:100px; padding:.7rem 1.2rem; cursor:pointer; font-weight:700; font-size:.88rem;
  display:flex; align-items:center; gap:.5rem; background:#fff;
}
.type-pill.selected.veg{ border-color:#2e7d32; background:#eef7ee; color:#2e7d32;}
.type-pill.selected.nonveg{ border-color:#b23a3a; background:#fbecec; color:#b23a3a;}
.qr-box{ background:var(--sugar); border:1.5px dashed var(--gold); border-radius:16px; padding:1.2rem; text-align:center;}
.qr-box img{ width:180px;height:180px; border-radius:10px; background:#fff; padding:6px;}
.pay-option{
  border:1.5px solid var(--cream-line); border-radius:14px; padding:1rem 1.1rem; cursor:pointer; display:flex; gap:.8rem; align-items:flex-start;
}
.pay-option.selected{ border-color:var(--berry); background:var(--blush);}
.pay-option .picon{ font-size:1.3rem; color:var(--berry);}
.summary-box{ background:var(--sugar); border-radius:14px; padding:1.1rem 1.3rem; font-size:.88rem;}
.summary-box .row-line{ display:flex; justify-content:space-between; padding:.35rem 0; border-bottom:1px dashed var(--cream-line);}
.summary-box .row-line:last-child{ border-bottom:none; font-weight:800; color:var(--cocoa); padding-top:.6rem;}

/* Locate button */
.locate-btn{
  border:1.5px solid var(--gold); color:var(--gold); background:#fff; border-radius:100px; font-size:.78rem; font-weight:800;
  padding:.4rem .9rem; display:inline-flex; align-items:center; gap:.4rem;
}
.locate-btn:hover{ background:var(--gold); color:#fff;}

/* Success screen */
.order-success{ text-align:center; padding:2.4rem 1rem;}
.order-success .tick{
  width:84px;height:84px;border-radius:50%; background:#e8f7ee; color:#2e7d32; font-size:2.4rem;
  display:flex;align-items:center;justify-content:center; margin:0 auto 1.3rem;
}

/* Utility reveal classes (used by GSAP/ScrollReveal) */
.reveal-up{ opacity:0; transform:translateY(40px);}
.reveal-fade{ opacity:0;}

/* Toast */
.cake-toast{
  position:fixed; top:100px; right:24px; z-index:2000; background:#fff; border-radius:14px; box-shadow:var(--shadow-soft);
  padding:1rem 1.3rem; display:flex; align-items:center; gap:.7rem; font-weight:700; color:var(--cocoa); font-size:.88rem;
  transform:translateX(140%); transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.cake-toast.show{ transform:translateX(0);}
.cake-toast i{ color:#2e7d32; font-size:1.3rem;}

@media (max-width:991px){
  .hero{ padding-top:130px; text-align:center;}
  .hero p.lead{ margin-left:auto; margin-right:auto;}
  .hero-stats{ justify-content:center;}
  .hero-canvas-wrap{ height:380px; margin-top:2rem;}
  section{ padding:80px 0;}
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}







/* ============ Cylinder 3D Carousel ============ */
.cylinder-carousel-container {
  position: relative;
  width: 100%;
  height: 520px;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 35em;
  mask-image: linear-gradient(90deg, transparent, #000 15% 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15% 85%, transparent);
}

.cylinder-carousel-track {
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  animation: cylinderRotate 32s linear infinite;
  will-change: transform;
}

.cylinder-carousel-track.paused {
  animation-play-state: paused;
}

.cylinder-carousel-slide {
  grid-area: 1 / 1;
  width: 220px;
  aspect-ratio: 7/10;
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  cursor: pointer;
  position: relative;
}

.cylinder-carousel-slide:hover {
  box-shadow: 0 30px 60px -16px rgba(178, 58, 72, 0.5);
  transform: scale(1.05) translateZ(20px);
  z-index: 10;
}

.cylinder-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.cylinder-carousel-slide .slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.cylinder-carousel-slide:hover .slide-overlay {
  opacity: 1;
  transform: translateY(0);
}

.cylinder-carousel-slide .slide-overlay h4 {
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  margin: 0;
  color: #fff;
  font-weight: 600;
}

.cylinder-carousel-slide .slide-overlay p {
  font-size: 0.75rem;
  margin: 4px 0 0;
  opacity: 0.8;
}

/* Slide badge */
.cylinder-carousel-slide .slide-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(178, 58, 72, 0.9);
  color: #fff;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  z-index: 2;
}

/* Controls overlay */
.cylinder-carousel-controls {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.18);
  z-index: 20;
}

.cylinder-carousel-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--cocoa);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.cylinder-carousel-btn:hover {
  background: rgba(178, 58, 72, 0.1);
  transform: scale(1.1);
}

.cylinder-carousel-btn:active {
  transform: scale(0.9);
}

.cylinder-carousel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}

.cylinder-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--cocoa-soft);
  opacity: 0.25;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
}

.cylinder-carousel-dot.active {
  width: 32px;
  border-radius: 4px;
  opacity: 1;
  background: var(--berry);
}

.cylinder-carousel-dot:hover {
  opacity: 0.6;
}

.cylinder-carousel-dot.active:hover {
  opacity: 1;
}

/* Info Badge */
.cylinder-carousel-badge {
  position: absolute;
  bottom: 90px;
  left: 10px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  padding: 0.8rem 1.1rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 200px;
  z-index: 5;
}

.cylinder-carousel-badge .icon {
  font-size: 1.4rem;
}

.cylinder-carousel-badge b {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  color: var(--cocoa);
}

.cylinder-carousel-badge span {
  font-size: 0.7rem;
  color: var(--cocoa-soft);
}

/* Animation */
@keyframes cylinderRotate {
  to {
    transform: rotateY(1turn);
  }
}

/* Pause on hover */
.cylinder-carousel-container:hover .cylinder-carousel-track {
  animation-play-state: paused;
}

/* Responsive */
@media (max-width: 991px) {
  .cylinder-carousel-container {
    height: 400px;
    margin-top: 1.5rem;
  }
  
  .cylinder-carousel-slide {
    width: 160px;
    border-radius: 12px;
  }
  
  .cylinder-carousel-controls {
    padding: 6px 14px;
    gap: 10px;
    bottom: 15px;
  }
  
  .cylinder-carousel-btn {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
  
  .cylinder-carousel-dot {
    width: 6px;
    height: 6px;
  }
  
  .cylinder-carousel-dot.active {
    width: 24px;
  }
  
  .cylinder-carousel-badge {
    bottom: 70px;
    padding: 0.6rem 0.9rem;
    max-width: 160px;
  }
  
  .cylinder-carousel-badge .icon {
    font-size: 1.1rem;
  }
  
  .cylinder-carousel-badge b {
    font-size: 0.8rem;
  }
  
  .cylinder-carousel-badge span {
    font-size: 0.65rem;
  }
}

@media (max-width: 576px) {
  .cylinder-carousel-container {
    height: 320px;
  }
  
  .cylinder-carousel-slide {
    width: 120px;
    border-radius: 10px;
  }
  
  .cylinder-carousel-slide .slide-overlay h4 {
    font-size: 0.8rem;
  }
  
  .cylinder-carousel-slide .slide-overlay p {
    font-size: 0.65rem;
  }
  
  .cylinder-carousel-controls {
    padding: 4px 10px;
    gap: 6px;
    bottom: 5px;
  }
  
  .cylinder-carousel-btn {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }
  
  .cylinder-carousel-dot {
    width: 5px;
    height: 5px;
  }
  
  .cylinder-carousel-dot.active {
    width: 18px;
  }
  
  .cylinder-carousel-badge {
    display: none;
  }
}




/* ============ Video Section ============ */
.video-section {
  padding: 100px 0;
  background: var(--sugar);
  position: relative;
  overflow: hidden;
}

.video-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(178, 58, 72, 0.04), transparent 70%);
  pointer-events: none;
}

.video-content {
  position: relative;
  z-index: 2;
}

.video-content h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 600;
  margin: 0.8rem 0 1.2rem;
}

.video-content h2 em {
  font-style: italic;
  color: var(--berry);
  font-weight: 500;
}

.video-features {
  margin: 2rem 0 2.5rem;
}

.vf-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.2rem;
}

.vf-item .vf-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--blush);
  color: var(--berry);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.vf-item h5 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  color: var(--cocoa);
  margin-bottom: 0.15rem;
  font-size: 1rem;
}

.vf-item p {
  color: var(--cocoa-soft);
  font-size: 0.88rem;
  margin: 0;
}

.video-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}

.video-cta span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Video Wrapper */
.video-wrapper {
  position: relative;
  z-index: 2;
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 420px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(59, 36, 23, 0.5);
  background: #1a1a1a;
  aspect-ratio: 9/16;
}

.baking-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #1a1a1a;
}

/* Video Play/Pause Button */
.video-play-btn {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(178, 58, 72, 0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 5;
  opacity: 0;
  transform: translateX(-50%) scale(0.8);
}

.video-container:hover .video-play-btn {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.video-play-btn:hover {
  background: var(--berry);
  transform: translateX(-50%) scale(1.1);
  border-color: rgba(255, 255, 255, 0.6);
}

.video-play-btn:active {
  transform: translateX(-50%) scale(0.9);
}

/* Video Progress Bar */
.video-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  z-index: 5;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.video-container:hover .video-progress-bar {
  opacity: 1;
}

.video-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: height 0.2s ease;
}

.video-progress-track:hover {
  height: 6px;
}

.video-progress-fill {
  height: 100%;
  background: var(--berry);
  border-radius: 4px;
  width: 0%;
  transition: width 0.1s linear;
}

.video-time-display {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Video Watermark */
.video-watermark {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  padding: 6px 14px 6px 10px;
  border-radius: 100px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 5;
  letter-spacing: 0.03em;
}

.video-watermark i {
  font-size: 1rem;
  color: var(--gold);
}

/* Video Caption */
.video-caption {
  text-align: center;
  margin-top: 1rem;
  color: var(--cocoa-soft);
  font-size: 0.85rem;
}

.video-caption p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  padding: 0.4rem 1.2rem;
  border-radius: 100px;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.08);
}

/* Video Fallback */
.video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--sugar);
  color: var(--cocoa-soft);
  padding: 2rem;
  text-align: center;
}

.video-fallback p {
  margin-top: 1rem;
  font-size: 0.9rem;
}

.video-fallback a {
  color: var(--berry);
  font-weight: 700;
  text-decoration: underline;
}

/* Video Section Responsive */
@media (max-width: 991px) {
  .video-section {
    padding: 70px 0;
    text-align: center;
  }
  
  .video-content h2 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
  }
  
  .video-content p {
    margin: 0 auto 1.5rem;
  }
  
  .video-features {
    text-align: left;
    max-width: 400px;
    margin: 1.5rem auto;
  }
  
  .video-cta {
    justify-content: center;
  }
  
  .video-container {
    max-width: 320px;
    margin: 0 auto 0.5rem;
  }
  
  .video-play-btn {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  
  .video-progress-bar {
    opacity: 1;
  }
}

@media (max-width: 576px) {
  .video-section {
    padding: 50px 0;
  }
  
  .video-container {
    max-width: 260px;
    border-radius: 18px;
  }
  
  .video-play-btn {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    bottom: 60px;
  }
  
  .video-watermark {
    font-size: 0.65rem;
    padding: 4px 10px 4px 8px;
    top: 10px;
    left: 10px;
  }
  
  .video-watermark i {
    font-size: 0.85rem;
  }
  
  .video-progress-bar {
    padding: 8px 12px 10px;
  }
  
  .video-caption p {
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
  }
}