:root{
  --cream:#F4EFE2;
  --cream-deep:#EAE2CE;
  --forest:#2F3B28;
  --forest-deep:#1F2819;
  --olive:#7C8459;
  --terracotta:#BE6A45;
  --gold:#C79A3C;
  --charcoal:#2B2A26;
  --line:#DBD1B4;
  --muted:#6B6455;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  /* Falls back to --cream if no image is found or the path below is wrong */
  background-color:var(--cream);
  background-image:url("./photos/bg.png");
  background-size:cover;
  background-position:top center;
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--charcoal);
  font-family:'Jost',sans-serif;
  font-size:15px;
}
h1,h2,h3{font-family:'Fraunces',serif;margin:0;}
p{margin:0;}
a{color:inherit;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.hidden{display:none !important;}

.eyebrow{
  text-transform:uppercase;letter-spacing:0.2em;font-size:11.5px;
  color:var(--terracotta);font-weight:600;margin:0 0 10px;
}
.eyebrow.center{text-align:center;}
.section-title{font-size:30px;font-weight:600;color:var(--forest-deep);margin-bottom:36px;}
.section-title.center{text-align:center;}

.btn{
  display:inline-block;padding:12px 24px;border-radius:30px;
  font-size:13.5px;font-weight:600;letter-spacing:0.03em;text-decoration:none;
  cursor:pointer;border:1.5px solid transparent;text-align:center;
}
.btn-primary{background:var(--forest-deep);color:var(--cream);}
.btn-primary:hover{background:var(--forest);}
.btn-outline{background:transparent;border-color:var(--forest-deep);color:var(--forest-deep);}
.btn-outline:hover{background:var(--forest-deep);color:var(--cream);}

.photo-placeholder{
  border-radius:12px;background:linear-gradient(155deg,#E4D6B8,#D6C39C);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:#8A7A56;font-size:12.5px;text-align:center;
  overflow:hidden;
}
.photo-placeholder.text-only{padding:14px;}
.photo-placeholder img{
    width:100%;
    height:100%;
    object-fit:cover;      /* fills the frame */
    display:block;
}

/* announcement bar */
.announce-bar{
  background:var(--forest-deep);color:var(--cream);
  text-align:center;font-size:12.5px;padding:8px 16px;letter-spacing:0.02em;
}

/* header */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(244,239,226,0.94);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;}
.brand{
  font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:var(--forest-deep);
  text-decoration:none;letter-spacing:0.01em;
  display:flex;align-items:center;gap:10px;
}
.brand-logo{
  height:32px;width:auto;display:block;object-fit:contain;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(43,42,38,0.18);
}

.main-nav{display:flex;gap:26px;}
.main-nav a{font-size:13.5px;text-decoration:none;color:var(--charcoal);}
.main-nav a:hover{color:var(--terracotta);}
.header-actions{display:flex;align-items:center;gap:14px;}
.whatsapp-quick{
  font-size:12.5px;text-decoration:none;color:var(--forest-deep);
  border:1px solid var(--forest-deep);border-radius:20px;padding:7px 14px;
}
.cart-btn{
  background:var(--forest-deep);color:var(--cream);border:none;border-radius:20px;
  padding:8px 16px;font-size:13px;cursor:pointer;font-family:'Jost',sans-serif;font-weight:500;
}
.cart-badge{background:var(--terracotta);color:#fff;border-radius:50%;padding:1px 6px;font-size:11px;margin-left:5px;}
.mobile-menu-toggle{display:none;background:none;border:none;font-size:20px;cursor:pointer;}

/* hero */
.hero{padding:64px 0;}
.hero-inner{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;}
.hero-text{
  background:rgba(244,239,226,0.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:20px;
  padding:32px;
  box-shadow:0 10px 30px rgba(43,42,38,0.08);
}
.hero h1{font-size:42px;line-height:1.18;font-weight:600;color:var(--forest-deep);}
.hero-copy{margin:20px 0 28px;font-size:15px;line-height:1.7;color:var(--muted);max-width:440px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.hero-photo{aspect-ratio:4/3;}

/* signature strip */
.signature-strip{padding:20px 0 60px;}
.signature-strip .wrap{
  background:rgba(244,239,226,0.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:20px;
  padding:32px 24px;
  box-shadow:0 10px 30px rgba(43,42,38,0.08);
}
.signature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px;}
.signature-card{position:relative;}
.signature-card .photo-placeholder{aspect-ratio:4/3;margin-bottom:12px;}
.signature-card h3{font-size:17px;font-weight:600;color:var(--forest-deep);}
.signature-card p{font-size:14px;color:var(--terracotta);margin-top:3px;font-weight:600;}
.signature-card-action{margin-top:10px;}

/* menu section — translucent so the background photo keeps showing through, same as the hero */
.menu-section{
  padding:60px 0;
  background:rgba(234,226,206,0.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.category-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:16px;}
.tab-btn{
  border:1px solid var(--forest-deep);background:transparent;color:var(--forest-deep);
  padding:8px 18px;border-radius:20px;font-size:13px;cursor:pointer;font-family:'Jost',sans-serif;
}
.tab-btn.active{background:var(--forest-deep);color:var(--cream);}
.filter-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:34px;}


.editorial-note{
  max-width:560px;margin:0 auto 40px;text-align:center;
  font-family:'Fraunces',serif;font-style:italic;font-size:17px;color:var(--forest-deep);
  padding:20px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,249,238,0.5);border-radius:10px;
}

.menu-loading{grid-column:1/-1;text-align:center;color:var(--muted);font-size:14px;padding:30px;}
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.menu-card{
  background:#fff9ee;border:1px solid var(--line);border-radius:14px;
  padding:16px;display:flex;gap:14px;
}
.menu-card .photo-placeholder{width:96px;height:96px;flex-shrink:0;font-size:10.5px;}
.menu-card-body{flex:1;display:flex;flex-direction:column;}
.menu-card-top{display:flex;justify-content:space-between;gap:8px;}
.menu-card-name{font-family:'Fraunces',serif;font-weight:600;font-size:16.5px;color:var(--forest-deep);}
.menu-card-price{font-weight:600;font-size:14px;color:var(--terracotta);white-space:nowrap;}
.menu-card-desc{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5;}
.menu-card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.tag-chip{font-size:10px;text-transform:uppercase;letter-spacing:0.05em;background:var(--cream-deep);color:var(--olive);padding:3px 8px;border-radius:10px;}
.menu-card-footer{display:flex;justify-content:flex-end;margin-top:auto;padding-top:10px;}
.qty-control{display:flex;align-items:center;gap:9px;background:var(--cream-deep);border-radius:20px;padding:4px 6px;}
.qty-control button{
  width:24px;height:24px;border-radius:50%;border:1px solid var(--forest-deep);
  background:transparent;color:var(--forest-deep);font-weight:700;cursor:pointer;font-size:14px;line-height:1;
}
.qty-control span{min-width:14px;text-align:center;font-size:13px;font-weight:600;}
.add-btn{
  border:none;background:var(--forest-deep);color:var(--cream);
  padding:7px 16px;border-radius:20px;font-size:12.5px;cursor:pointer;font-family:'Jost',sans-serif;font-weight:500;
}

.menu-card.sold-out{opacity:0.55;}
.sold-out-chip{background:#E7D6D0 !important;color:#B33F2E !important;}

/* story */
.story{padding:64px 0;}
.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center;}
.about-photo{aspect-ratio:7/5;}
.about-copy{
  background:rgba(244,239,226,0.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:20px;
  padding:28px 30px;
  box-shadow:0 10px 30px rgba(43,42,38,0.08);
}
.about-copy h2{font-size:26px;margin:10px 0 14px;font-weight:600;color:var(--forest-deep);line-height:1.3;}
.about-copy p{font-size:14.5px;line-height:1.75;margin:0 0 12px;color:var(--muted);}

/* delivery info */
.delivery-info{padding:60px 0;background:var(--forest-deep);color:var(--cream);}
.delivery-info .eyebrow{color:var(--gold);}
.delivery-info .section-title{color:var(--cream);}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.info-card{background:rgba(244,239,226,0.06);border:1px solid rgba(244,239,226,0.15);border-radius:12px;padding:22px;}
.info-card h3{font-size:17px;margin-bottom:10px;color:var(--gold);}
.info-card p{font-size:13.5px;line-height:1.6;color:#DCD6C4;}

/* find us */
.find-us{padding:64px 0;}
.find-us-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.find-us-text{
  background:rgba(244,239,226,0.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:20px;
  padding:28px 30px;
  box-shadow:0 10px 30px rgba(43,42,38,0.08);
}
.find-us h2{font-size:26px;font-weight:600;color:var(--forest-deep);margin:8px 0 16px;}
.find-us-line{font-size:14px;color:var(--muted);margin-bottom:6px;}
.map-placeholder{aspect-ratio:4/3;}

/* footer */
.site-footer{background:var(--charcoal);color:var(--cream);padding:48px 0 20px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;}
.footer-col{display:flex;flex-direction:column;gap:8px;font-size:13px;color:#C9C4B6;}
.footer-col strong{color:var(--cream);font-size:14px;margin-bottom:4px;}
.footer-brand{font-family:'Fraunces',serif;font-size:17px !important;}
.footer-link{background:none;border:none;color:#C9C4B6;text-align:left;padding:0;font-size:13px;cursor:pointer;font-family:'Jost',sans-serif;text-decoration:underline;text-underline-offset:2px;}
.footer-link:hover{color:var(--gold);}
.payment-logos{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px;}
.payment-chip{border:1px solid #55503f;border-radius:6px;padding:4px 9px;font-size:11px;color:#C9C4B6;}
.footer-whatsapp{color:var(--gold);text-decoration:none;font-weight:500;font-size:13.5px;}
.footer-bottom{border-top:1px solid #44402F;margin-top:32px;padding-top:16px;font-size:12px;color:#8F8A78;}

/* mobile sticky bar */
.mobile-sticky-bar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:45;
  background:var(--forest-deep);color:var(--cream);
  padding:14px 20px;align-items:center;justify-content:space-between;
  box-shadow:0 -4px 14px rgba(0,0,0,0.2);
}
.mobile-sticky-bar.visible{display:flex;}
.mobile-sticky-bar button{
  background:var(--gold);color:var(--forest-deep);border:none;border-radius:20px;
  padding:9px 16px;font-weight:600;font-size:13px;cursor:pointer;
}

/* drawers (cart + checkout) */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(30,26,18,0.4);z-index:50;
  opacity:0;pointer-events:none;transition:opacity 0.25s ease;
}
.drawer-overlay.visible{opacity:1;pointer-events:auto;}

.cart-drawer,.checkout-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);
  background:var(--cream);z-index:55;
  transform:translateX(100%);transition:transform 0.3s ease;
  display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,0.15);
}
.cart-drawer.open,.checkout-drawer.open{transform:translateX(0);}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border-bottom:1px solid var(--line);
}
.drawer-head h3{font-size:19px;color:var(--forest-deep);}
.drawer-close{background:none;border:none;font-size:16px;cursor:pointer;color:var(--charcoal);}

.cart-items{flex:1;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:14px;}
.cart-empty{text-align:center;color:var(--muted);font-size:13.5px;padding:30px 20px;}
.cart-line{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;}
.cart-line-photo{width:52px;height:52px;border-radius:8px;background:linear-gradient(155deg,#E4D6B8,#D6C39C);background-size:cover;background-position:center;flex-shrink:0;overflow:hidden;}
.cart-line-info{flex:1;min-width:0;}
.cart-line-name{font-weight:600;font-size:14px;color:var(--forest-deep);}
.cart-line-price{font-size:12.5px;color:var(--muted);margin-top:2px;}
.cart-line-qty{flex-shrink:0;}

.cart-totals{padding:16px 22px;border-top:1px solid var(--line);}
.totals-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);padding:4px 0;}
.totals-final{font-weight:700;color:var(--forest-deep);font-size:15px;border-top:1px solid var(--line);margin-top:6px;padding-top:10px;}
.drawer-checkout-btn{margin:0 22px 22px;width:calc(100% - 44px);}

/* checkout form */
.checkout-form{flex:1;overflow-y:auto;padding:18px 22px 30px;display:flex;flex-direction:column;gap:14px;}
.form-summary{
  background:var(--cream-deep);border-radius:10px;padding:12px 14px;
  font-size:12.5px;color:var(--muted);
}
.field{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--forest-deep);font-weight:500;}
.field input{
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font-size:14px;font-family:'Jost',sans-serif;background:#fff9ee;color:var(--charcoal);
}
.field input:focus{outline:2px solid var(--terracotta);outline-offset:1px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field-group{display:flex;flex-direction:column;gap:8px;}
.field-label{font-size:12.5px;color:var(--forest-deep);font-weight:500;}
.toggle-row{display:flex;gap:16px;}
.toggle-option{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--charcoal);}
.address-fields{display:flex;flex-direction:column;gap:14px;border-left:2px solid var(--terracotta);padding-left:14px;}
.terms-row{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--muted);}
.inline-link{background:none;border:none;color:var(--terracotta);text-decoration:underline;cursor:pointer;padding:0;font-size:12.5px;font-family:'Jost',sans-serif;}
.form-error{color:#B33F2E;font-size:12.5px;min-height:16px;}
.checkout-actions{display:flex;gap:10px;flex-wrap:wrap;}
.checkout-actions .btn{flex:1;}
.pay-note{font-size:11.5px;color:var(--muted);line-height:1.5;}

/* policy modal */
.policy-overlay{
  position:fixed;inset:0;background:rgba(30,26,18,0.5);z-index:60;
  display:none;align-items:center;justify-content:center;padding:24px;
}
.policy-overlay.visible{display:flex;}
.policy-modal{
  background:var(--cream);border-radius:14px;max-width:560px;width:100%;
  max-height:80vh;overflow-y:auto;padding:30px 28px;position:relative;
}
.policy-modal h3{font-size:20px;color:var(--forest-deep);margin-bottom:14px;}
.policy-modal p{font-size:13.5px;line-height:1.7;color:var(--muted);margin-bottom:10px;}
.policy-modal .drawer-close{position:absolute;top:16px;right:18px;}

@media(max-width:860px){
  .hero-inner{grid-template-columns:1fr;}
  .hero h1{font-size:32px;}
  .signature-row{grid-template-columns:1fr;}
  .info-grid{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  .find-us-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .menu-grid{grid-template-columns:1fr;}
  .main-nav{display:none;}
  .mobile-menu-toggle{display:block;}
  .mobile-sticky-bar{display:none;}
  .mobile-sticky-bar.visible{display:flex;}
  body{padding-bottom:0;}
}

.bg-video{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    object-fit:cover;
    z-index:-1;
    pointer-events:none;
  }
 
  /* Hides the video on phones to save mobile data — falls back to
     your existing static bg.png image instead. Delete this whole
     block if you want the video to play on mobile too. */
  @media(max-width:860px){
    .bg-video{display:none;}
  }
 
  @media print{
    .bg-video{display:none;}
  }
<style>
.bg-video-overlay{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(31,40,25,0.35) 0%, rgba(31,40,25,0.15) 40%, rgba(31,40,25,0.45) 100%);
}
@media(max-width:860px){
  .bg-video-overlay{display:none;}
}
</style>