/* info */

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:920px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}

.card{background:var(--paper);border:1px solid  rgba(212, 124, 118, 0.884);border-radius:10px;padding:18px;box-shadow:var(--shadow);
font-family: borel;}
.card-1 {
   border:1px solid  rgba(212, 124, 118, 0.884);border-radius:10px;padding:18px;box-shadow:var(--shadow);
font-family: borel;
}
/* .sign {font-family: borel;} */

 /* Menu */
 .menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px; margin-top: 0.5rem;}
 @media (max-width:980px){.menu-grid{grid-template-columns:repeat(2,1fr)}}
 @media (max-width:620px){.menu-grid{grid-template-columns:1fr}}
 .menu-item{background:var(--paper);border-radius:16px;padding:16px; border:1px solid #eee;box-shadow:var(--shadow)}
 .menu-item header{position:unset;background:none;border:0;backdrop-filter:none}
 .menu-item h3{margin:8px 0 6px;font-size:1.05rem}
 .menu-item p{margin:0;color:var(--muted);font-size:.95rem;
display: flex;
justify-content: space-between;}

 .price{font-weight:600;margin-top:8px}
 .pill{font-size:.8rem;border:1px solid #e8e3dc;padding:2px 8px;border-radius:999px;display:inline-block;color:#7a6349}
 #menu a {
    margin: 0 0.3rem;
    padding: 0.5rem 2rem;    
 }
.footer-1 {
    padding: 1rem;
}
/* Desktop/tablet: show the <img> normally */
.card-photo img{
   display:block;
   width:100%;
   height:auto;
 }

 /* ===== Mobile hero as background (iPhone, etc.) ===== */
@media (max-width: 600px){
   .hero{
     position: relative;
     background: url("./img/T-2.jpg") center / cover no-repeat; /* your hero photo */
     border-radius: 12px;
     overflow: hidden;
     height: 40vh;
     min-height: 320px;
     padding: 0;
   }
 
   /* Layout: single centered block */
   .hero .wrap{
     display:block;
     height:100%;
   }
   .hero .card-photo{ display:none !important; }
 
   /* Center all text over the background */
   .hero .wrap > div:first-child{
     position:absolute; inset:0;
     display:flex;
     flex-direction:column;
     align-items:center;
     justify-content:center;
     padding: 0 18px;
     text-align:center;
     color:#fffefe;
   }
 
   .hero .kicker{
     font-size:.9rem;
     font-weight:900;
     letter-spacing:.5px;
     text-transform:uppercase;
     margin-bottom:10px;
     color:#f0f0f0;
     text-shadow:0 2px 6px rgba(17, 16, 16, 0.4);
   }
 
   .hero h1{
     color:#fff;
     font-weight:600;
     font-size: clamp(28px, 8vw, 44px);
     line-height:1.1;
     margin: 0 0 10px;
     text-shadow: 0 2px 16px rgba(0,0,0,.45);
   }
 
   .hero .lead{
     font-size:1rem;
     max-width:32ch;
     color:#f3eded;
     text-shadow:0 1px 8px rgba(0,0,0,.4);
     margin:0 auto;
   }
 
   /* hide CTAs only */
   /* .hero .cta{ display:none !important; } */
 }
 

/* horizontal scrolling menu */
/* ===== Horizontal scroll for CTA menus ===== */
.cta,
.cta-1 {
  display: flex;
  /* gap: 12px; */
  flex-wrap: nowrap;        /* prevent wrapping */
  overflow-x: auto;         /* enable scroll */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  /* padding-bottom: 6px;       */
  scrollbar-width: none;    /* Firefox: hide scrollbar */
  
}
.cta::-webkit-scrollbar,
.cta-1::-webkit-scrollbar {
  display: none;            /* Chrome/Safari: hide scrollbar */
}

.cta a,
.cta-1 a {
  flex: 0 0 auto;           /* keep buttons from shrinking */
}

/* Fix sticky menu on mobile */
.tabsWrap {
  position: sticky;
  top: 60px;        /* header height */
  z-index: 9999;
}


/* On bigger screens, let them wrap normally if you want */
@media (min-width: 821px){
  .cta,
  .cta-1 {
    overflow: visible;
    flex-wrap: wrap;
    margin: 0 0.1rem;
  }
}





/* gallery horizontal scrolling */
/* ===== Gallery: always horizontal scroll ===== */
/* ===== Gallery: always horizontal scroll ===== */
.gallery {
   display: flex !important;           /* make row */
   gap: 16px;                          /* space between slides */
   overflow-x: auto;                   /* enable horizontal scroll */
   -webkit-overflow-scrolling: touch;  /* smooth on iOS */
   padding-bottom: 8px;
   scroll-snap-type: x mandatory;      /* snap when scrolling */
   scrollbar-width: none;              /* hide Firefox scrollbar */
 }
 .gallery::-webkit-scrollbar {
   display: none;                      /* hide Chrome/Safari scrollbar */
 }
 
 .gallery > div {
    flex: 0 0 100%;                     
   max-width: 30%;
   /* height: 100vh;                      */
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow);
   scroll-snap-align: start;
   background: #eee;                   /* fallback bg while loading */
   display: flex;
 }
 
 .gallery > div img {
   width: 100%;
   height: 100%;
   object-fit: cover;                  
   display: block;
 }
 
 /* ===== Gallery: horizontal + SQUARE on mobile ===== */
@media (max-width: 820px){
   .gallery{
     display:flex !important;
     gap:12px;
     overflow-x:auto;
     -webkit-overflow-scrolling:touch;
     scroll-snap-type:x mandatory;
     padding-bottom:8px;
     scrollbar-width:none;
   }
   .gallery::-webkit-scrollbar{ display:none; }
 
   /* each slide is a square */
   .gallery > div{
     flex: 0 0 70vw;         /* width of each slide (adjust to taste) */
     max-width: 70vw;
     aspect-ratio: 1 / 1;    /* <-- make it square */
     height: auto;           /* ensure no fixed height overrides */
     border-radius:16px;
     overflow:hidden;
     box-shadow:var(--shadow);
     scroll-snap-align:start;
     background:#eee;
   }
 
   .gallery > div img{
     width:100%;
     height:100%;
     object-fit:cover;       /* fills the square nicely */
     display:block;
   }
 }
 
 /* hamburger menu  */
 /* ===== Hamburger button (mobile) ===== */
.burger {
   display: none; /* hidden on desktop */
   background: none;
   border: none;
   padding: 8px;
   cursor: pointer;
 }
 .burger span {
   display: block;
   width: 24px;
   height: 2px;
   background: var(--ink);
   margin: 5px 0;
   transition: 0.3s;
 }
 @media (max-width: 820px){
   .navlinks{ display:none; } /* hide normal menu */
   .burger{ display:inline-flex; flex-direction:column; justify-content:center; }
 }
 
 /* Optional animation when menu is open */
 .burger.open span:nth-child(1){ transform:rotate(45deg) translate(5px,5px);}
 .burger.open span:nth-child(2){ opacity:0;}
 .burger.open span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px);}

 /* logo 976 bairshil */
 @media (max-width: 820px) {
   .nav {
     justify-content: center;      
     position: relative;
   }
 
   /* Keep burger button visible but not pushing brand */
   .burger {
     position: absolute;
     right: 16px;                  
     top: 50%;
     transform: translateY(-50%);
   }
 }


 
 
 /* Base (desktop/tablet): sticky under header */
.tabsWrap{
  position: sticky;
  top: 64px;
  z-index: 70;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* Make the tabs themselves horizontally scrollable */
.tabs{
  display:flex;
  gap:26px;
  align-items:center;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar{ display:none; }


/* ===== Small phones: dock the tabs to the BOTTOM ===== */
@media (max-width: 600px){
  /* leave room for the docked bar so content isn't hidden */
  body{
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));  }

  .tabsWrap{
    top: auto;                  /* disable top stickiness */
    bottom: 0;                  /* stick to bottom */
    position: sticky;
    z-index: 120;               /* above page content */
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,.08);
  }

  .tabs{
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 18px;
  }

  .tab{
    scroll-snap-align: start;
    padding: 10px 0;
    font-size: 0.95rem;
  }
}
/* Mobile: only show the bag icon; hide the "Checkout" text button */
@media (max-width: 600px){
  #checkoutOpen { display: none !important; }
  /* make the bag more prominent (optional) */
  #cartBtn{
    background: var(--brand);
    color:#fff;
    border-color: transparent;
  }
}

/* Force menu tabs to stick everywhere */