/* ======================================
   CORE.CSS
   Shared site foundation
   Includes:
   - global theme variables
   - header / nav / mobile menu
   - buttons / cards / layout
   - shared hero / footer / utility styles
   - gallery/lightbox shared UI used outside blog/menu
   ====================================== */

:root{
      --bg:#fff6e8;              /* warm bright base */
      --card:#f6e8e8b2;   
      --text: #1a4523;           /* strong readable text */
      --muted:#5a514b;
      --line:rgba(0,0,0,.10);

      --accent:#ff2d2d;          /* chili red (vivid) */
      --accent2:#ffb000;         /* mango */
      --shadow: 0 14px 32px rgba(0,0,0,.10);
      --radius: 18px;
    }

*{box-sizing:border-box}
    html{
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    html,body{height:100%}
    body{
      margin:0;
      overflow-x:hidden;
      color:var(--text);
      /*background:
        radial-gradient(1100px 520px at 8% -12%, rgba(255,45,45,.12), transparent 60%),
        radial-gradient(1000px 620px at 92% 0%, rgba(255,176,0,.14), transparent 60%),
        radial-gradient(900px 600px at 55% 115%, rgba(22,163,74,.10), transparent 62%),
        linear-gradient(180deg, #fff6e8 0%, #fff1d6 100%);*/
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      line-height:1.45;
    }

    a{color:inherit; text-decoration:none}
    .container{width:min(1120px, calc(100% - 12px)); margin:0 auto}

    /* Top bar */
    header{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.59);
      border-bottom:1px solid var(--line);
    }
    .nav{
      min-width:0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:12px 0;
    }
    .brand{
      min-width:0;
      display:flex;
      align-items:center;
      gap:12px;
      min-width: 220px;
    }
    .logo{
      width:40px; height:40px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(255,59,106,.95), rgba(255,183,3,.95));
      box-shadow: 0 10px 30px rgba(255,59,106,.18);
      display:grid; place-items:center;
      font-weight:800;
      letter-spacing:.5px;
      color:#111;
    }
    .brand h1{margin:0; font-size:14px; letter-spacing:.2px}
    .brand p{margin:0; font-size:12px; color:var(--muted)}

    .navlinks{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end}
    .navlinks a{
      font-size:13px;
      color:var(--muted);
      padding:8px 10px;
      border-radius: 12px;
      border:1px solid transparent;
    }
    .navlinks a:hover{color:var(--text); border-color:var(--line); background: rgba(255,255,255,.04)}

    .cta{
      display:flex; gap:10px; align-items:center;
    }
    .btn{
      appearance:none; border:0;
      cursor:pointer;
      padding:10px 14px;
      border-radius: 999px;
      font-weight:650;
      font-size:13px;
      display:inline-flex;
      gap:10px;
      align-items:center;
      justify-content:center;
      transition: transform .08s ease, background .2s ease, border-color .2s ease;
      white-space:nowrap;
    }
    .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}

    .btn:active{transform: translateY(1px)}
    .btn.primary{
      color:#fff;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 12px 26px rgba(255,45,45,.22);
    }
    .btn.secondary{
      color:var(--text);
      background: #fff;
      border: 1px solid var(--line);
    }
    

    /* Hero */
    .hero{
	    padding:2px 0 2px;
	    }
    .heroGrid{
      min-width:0;display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:stretch
  align-items: start;
}

    .card{
      background: var(--card);
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .heroMain{
      min-width: 0;
  padding: 15px;
  border-radius: 10px;}
    .kicker{
      display:inline-flex; gap:10px; align-items:center;
      font-size:12px; color:var(--muted);
      padding:8px 10px;
      border-radius: 999px;
      background: rgba(0,0,0,.03);
      border: 1px solid var(--line);
    }
    .kdot{width:8px;height:8px;border-radius:999px;background:var(--accent2); box-shadow: 0 0 0 6px rgba(255,183,3,.12)}

    .hero h2{margin:14px 0 10px; font-size:40px; line-height:1.05}
    .hero h2 span{background: linear-gradient(135deg, var(--text), rgba(0,0,0,.65)); -webkit-background-clip:text; background-clip:text; color:transparent}
    .hero .sub{margin:0 0 18px; color:var(--muted); font-size:15px}

    .quickRow{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
    .pill{
      min-width:0;
      display:flex; gap:10px; align-items:flex-start;
      padding:12px 12px;
      border-radius: 16px;
  background: rgba(218, 227, 198, 0.38);
        border: 1px solid var(--line);
      min-width: 220px;
      flex:1;
    }
    .icon{
      width:34px;height:34px;border-radius: 14px;
      background: rgba(255,59,106,.12);
      border:1px solid rgba(255,59,106,.25);
      display:grid;place-items:center;
      font-weight:800;
    }
    .pill b{display:block; font-size:12px; color:var(--text)}
    .pill small{display:block; font-size:12px; color:var(--muted); margin-top:2px}

    .heroSide{padding:18px; display:grid; gap:12px;}
    

    /* Hero slideshow */
    .slideshow{
      border-radius: calc(var(--radius) + 2px);
      border:1px solid var(--line);
      background: rgba(0,0,0,.025);
      overflow:hidden;
      position:relative;
      min-height: 220px;
      display:grid;
      place-items:stretch;
    }
    .slideshow img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      filter: saturate(1.05) contrast(1.02);
       object-position:center center;
    }
    .slideOverlay{
      position:absolute;
      inset:auto 12px 12px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:2px 4px;
      border-radius: 16px;
      background: rgba(0,0,0,.35);
      border:1px solid rgba(255,255,255,.09);
      backdrop-filter: blur(3px);
    }
    .slideOverlay b{
	    font-size: 12px;
  color: #fb710f;}
    .slideOverlay span{font-size:12px; color:rgba(255,255,255,.78)}
    .slideDots{display:flex; gap:6px; align-items:center}
    .dotBtn{
      width:8px; height:8px; border-radius:999px;
      border:0; cursor:pointer;
      background: rgba(255,255,255,.28);
    }
    .dotBtn.active{background: var(--accent2); box-shadow: 0 0 0 6px rgba(255,183,3,.12)}

    /* Full-size menu photo section */
    
    .pCard{
      border-radius: 18px;
      border:1px solid var(--line);
      background: rgba(0,0,0,.025);
      overflow:hidden;
      position:relative;
      cursor:pointer;
    }
    .pCard img{width:100%; height:240px; object-fit:cover; display:block}
    .pBadge{
      position:absolute;
      left:10px; top:10px;
      font-size:11px;
      padding:7px 10px;
      border-radius: 999px;
      background: rgba(0,0,0,.35);
      border:1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.88);
      backdrop-filter: blur(10px);
    }
    .pHint{
      position:absolute;
      right:10px; bottom:10px;
      font-size:11px;
      padding:7px 10px;
      border-radius: 999px;
      background: rgba(0,0,0,.35);
      border:1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.75);
      backdrop-filter: blur(10px);
    }

    /* Lightbox */
    .lightbox{
      position:fixed;
      inset:0;
     background: rgba(0,0,0,.72);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index: 999;
    }
    .lightbox.open{display:flex}
    .lightboxInner{
      width:min(1080px, 100%);
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.16);
      /*background: rgba(10,10,14,.65);*/
      overflow:hidden;
      box-shadow: 0 24px 70px rgba(0,0,0,.55);
    }
    .lightboxTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:12px 14px;
      border-bottom:1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.85);
      background-color: #839a7191;
      font-size:14px;
    }
    .lightboxTop button{
      border:1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.04);
      color: rgba(255,255,255,.9);
      padding:8px 10px;
      border-radius: 12px;
      cursor:pointer;
      font-weight:700;
    }
    .lightboxImg{width:100%; height:min(76vh, 760px); object-fit:contain;   background: #3a412266; display:block}

    @media (max-width: 900px){
      .photoGrid{grid-template-columns: repeat(2, minmax(0, 1fr));
      /* About (mobile) */
      #about .galleryStrip{padding:4px 2px}
      #about .gItem{flex-basis: min(82vw, 240px); max-width: min(82vw, 240px)}

    }
      .pCard img{height:190px}
    }
    @media (max-width: 520px){
      .photoGrid{grid-template-columns: 1fr;}
      .pCard img{height:220px}
    }

    
    
    

    
    
    
    

    /* Sections */
    section{padding:22px 0}
    .sectionTitle{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 0 12px; padding: 0 0 0 10px;}
    .sectionTitle h3{margin:0; font-size:18px}
    .sectionTitle p{margin:0; color:var(--muted); font-size:13px}

    .grid2{display:grid; grid-template-columns: 1fr 1fr; gap:16px}

    /* Menu */
    .menuWrap{padding:18px}
    .filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
    .chip{
      background: rgba(0,0,0,.03);
      border: 1px solid var(--line);
      color: var(--muted);
      padding:8px 10px;
      border-radius: 999px;
      cursor:pointer;
      font-size:12px;
      user-select:none;
    }
    .chip.active{color:#111; border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent2))}

    .menuGrid{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px}
    .item{
      min-width:0;
      padding:14px;
      border-radius: 18px;
      background: rgba(0,0,0,.03);
      border:1px solid var(--line);
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:flex-start;
background: linear-gradient( to right, rgba(139, 145, 21, 0.24), rgba(140, 188, 100, 0.31), rgba(221, 50, 50, 0.08) );
    }
    .item .name{font-weight:750}
    .item .desc{margin:6px 0 0; color:var(--muted); font-size:12px}
    .price{
      padding:6px 10px;
      border-radius: 999px;
      background: rgba(255,176,0,.16);
      border:1px solid rgba(255,176,0,.28);
      font-weight:750;
      font-size:12px;
      white-space:nowrap;
    }

    /* Contact */
    .contact{padding:18px}
    .contactGrid{display:grid; grid-template-columns: 1fr 1.25fr; gap:14px}
    .list{display:grid; gap:10px}
    .row{
      min-width:0;
      display:flex; gap:10px; align-items:flex-start;
      padding:12px;
      border-radius: 18px;
  background: rgba(223, 228, 204, 0.46);
        border:1px solid var(--line);
    }
    .row .dot{width:34px;height:34px;border-radius: 14px; display:grid; place-items:center; font-weight:800;
      background: rgba(255,59,106,.12); border:1px solid rgba(255,59,106,.25);
    }
    .row b{display:block; font-size:12px}
    .row span{display:block; margin-top:2px; font-size:12px; color:var(--muted)}

    img, svg, video, canvas{max-width:100%; height:auto}
    iframe{max-width:100%}
    iframe{width:100%; height:340px; border:0; border-radius: 18px; border:1px solid var(--line)}

    /* Gallery strip */
    .galleryStrip{
      display:flex;
      max-width:100%;
      overscroll-behavior-x: contain;
      gap:12px;
      overflow:auto;
      padding:4px;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .galleryStrip::-webkit-scrollbar{height:10px}
    .galleryStrip::-webkit-scrollbar-thumb{background: rgba(255,255,255,.10); border-radius: 999px}
    .gItem{
      flex: 0 0 220px;
      height: 160px;
      border-radius: 18px;
      border:1px solid var(--line);
      background: rgba(0,0,0,.025);
      overflow:hidden;
      scroll-snap-align:start;
      position:relative;
    }
    .gItem img{width:100%; height:100%; object-fit:cover; display:block}
    .gCap{
      position:absolute;
      left:10px; right:10px; bottom:10px;
      font-size:11px;
      color: rgba(255,255,255,.92);
      background: rgba(0,0,0,.35);
      border:1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      padding:6px 10px;
      backdrop-filter: blur(8px);
      white-space:nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }


    /* === About section: Chrome (Android) overflow fix === */
    /* =========================================================
   ABOUT SECTION — CHROME ANDROID (GALAXY S24) FIX
   ---------------------------------------------------------
   This block fixes a Chrome-on-Android rendering bug where
   flex/grid children cause horizontal overflow.

   ⚠️ DO NOT REMOVE OR REPLACE THESE RULES ⚠️

   If you modify the About section layout in the future:
   - Keep min-width: 0 on grid/flex parents and cards
   - Keep explicit max-width / flex-basis on gallery items
   - Keep overflow-x constrained to .galleryStrip only

   NOTE:
   - Firefox on Android does NOT need this
   - Chrome DOES
   Removing this WILL reintroduce the bug.
   ========================================================= */

    /* === About section: Chrome (Android) overflow fix === */
    #about .grid2{min-width:0}
    #about .grid2 > .card{min-width:0; max-width:100%}
    #about .galleryStrip{
      max-width:100%;
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
    }
    #about .gItem{
      min-width:0;
      flex: 0 0 clamp(180px, 72vw, 240px);
      max-width: clamp(180px, 72vw, 240px);
    }


    /* Footer */
    footer{padding:28px 0 38px; color:var(--muted)}
    footer .foot{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}
    .smallLinks{display:flex; gap:10px; flex-wrap:wrap}
    .smallLinks a{padding:8px 10px; border-radius: 12px; border:1px solid var(--line); background: rgba(255,255,255,.04)}
    .smallLinks a:hover{color:var(--text)}
.footer-text.official-site {
  margin-top: 8px;
  font-size: 0.95rem;
}
.footer-text.official-site a {
  font-weight: 800;
  text-decoration: underline;
}

    /* Responsive */
    @media (max-width: 900px){
      .heroGrid{grid-template-columns: 1fr;}
      .menuGrid{grid-template-columns: 1fr;}
      .contactGrid{grid-template-columns: 1fr;}
      .grid2{grid-template-columns: 1fr;}
      .brand{min-width:auto}
      .hero h2{font-size:34px}
    }
  
    /* Mobile hamburger menu */
    .burger{
      display:none;
      width:44px;
      height:44px;
      border-radius:14px;
      border:1px solid var(--line);
      background: rgba(0,0,0,.04);
      cursor:pointer;
      padding:10px;
      align-items:center;
      justify-content:center;
      gap:6px;
    }
    /* Hamburger icon image */
.burger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.burger-icon {
  width: 44px;
  height: 44px;
  display: block;
}

    .burger span{
      display:block;
      height:2px;
      width:100%;
      max-width:20px;
      background: rgba(255,255,255,.92);
      border-radius:999px;
    }
    .backdrop{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(6px);
      z-index: 200;
    }
    .mobileMenu{
  position:fixed;
  top:12px;
  right:12px;
  left:12px;
  z-index: 250;
  border-radius: 22px;

  /* GLASSY GRADIENT BACKGROUND */
  background: linear-gradient(
    to right,
    rgba(143, 145, 99, 0.55),
    rgba(140, 188, 100, 0.35),
    rgba(246, 115, 115, 0.25)
  );

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); /* Safari support */

  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 24px 80px rgba(0,0,0,.40);

  overflow:hidden;
  transform: translateY(-10px);
  opacity:0;
  pointer-events:none;
  transition: opacity .16s ease, transform .16s ease;
}
 /*   .mobileMenu{
      position:fixed;
      top:12px;
      right:12px;
      left:12px;
      z-index: 250;
      border-radius: 22px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(12,13,18,.88);
      box-shadow: 0 24px 80px rgba(0,0,0,.60);
      overflow:hidden;
      transform: translateY(-10px);
      opacity:0;
      pointer-events:none;
      transition: opacity .16s ease, transform .16s ease;
    }
    */
    .mobileMenu.open{
      opacity:1;
      transform: translateY(0);
      pointer-events:auto;
    }
    .mobileTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:14px;
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    .mBrand{display:flex;align-items:center;gap:10px}
    
    .mTitle{font-weight:900;font-size:13px}
    .mSub{color:var(--muted);font-size:12px}
    .closeBtn{
      width:42px;height:42px;border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.04);
      color: rgba(255,255,255,.92);
      font-weight:900;
      cursor:pointer;
    }
    .mobileLinks{
      display:grid;
      padding:10px;
      gap:6px;
    }
    
    .mobileLinks a{
background: rgba(179, 178, 177, 0.94);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 16px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  color: rgba(66, 71, 31, 0.92);
  padding: 10px;
}
/*    .mobileLinks a{
      padding:12px 12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.025);
      color: rgba(255,255,255,.92);
      font-weight:800;
      font-size:14px;
    }
    */
    .mobileLinks a:hover{background: rgba(255,255,255,.07)}
    .mobileActions{
      display:flex;
      gap:10px;
      padding:12px 12px 14px;
    }
    .mobileActions a{flex:1}
    .mobileFoot{
      padding:0 14px 14px;
      color: rgba(255,255,255,.62);
      font-size:12px;
    }

    @media (max-width: 900px){
      .navlinks{display:none}
      .cta{display:none}
      .burger{display:flex}
    }

  
    /* === HERO slider + CWV optimizations === */
    
    
    
    .heroSlide{
      flex: 0 0 100%;
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    
    .heroDot{
      width:8px; height:8px; border-radius:999px;
      border:0;
      background: rgba(255,255,255,.28);
      cursor:pointer;
    }
    .heroDot.active{
      background: var(--accent2);
      box-shadow: 0 0 0 6px rgba(255,183,3,.12);
    }
    .heroBadge{
      position:absolute;
      top:10px; left:10px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:900;
      letter-spacing:.2px;
      background: rgba(0,0,0,.35);
      border:1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(10px);
      color: rgba(255,255,255,.92);
      z-index:2;
    }
    .heroBadge .pillDot{
      width:8px;height:8px;border-radius:999px;
      background: #2ee59d;
      box-shadow: 0 0 0 6px rgba(46,229,157,.14);
    }
    .heroBadge.closed .pillDot{
      background:#ff4d4d;
      box-shadow: 0 0 0 6px rgba(255,77,77,.14);
    }
    @media (prefers-reduced-motion: reduce){
      .heroTrack{transition:none}
    }
    @media (max-width: 900px){
      .heroMedia{padding:12px}
      .heroSlider{aspect-ratio: 16/10}
    }
    @media (max-width: 480px){
      .hero{padding:32px 0}
      .heroSlider{aspect-ratio: 4/3}
    }

/* === Logo Styling === */

@media (max-width: 768px) {
  .site-logo { height: 44px; }
}


/* === Hero Logo Badge === */


@media (max-width: 768px) {
  .hero-logo-badge img { width: 72px; }
}


/* =========================================================
   Logo: responsive sizing + subtle hover glow
   --------------------------------------------------------- */
.logoLink,
.mLogoLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.logoImg{
  width:48px;
  height:48px;
  border-radius:999px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
  transition: transform .18s ease, filter .18s ease;
  will-change: transform, filter;
  background:rgba(255,255,255,.92);
  aspect-ratio:1 / 1;
  flex:0 0 auto;
  max-width:none;
}

.mLogoImg{
  width:44px;
  height:44px;
  border-radius:999px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
  transition: transform .18s ease, filter .18s ease;
  will-change: transform, filter;
  background:rgba(255,255,255,.92);
  aspect-ratio:1 / 1;
  flex:0 0 auto;
  max-width:none;
}

/* Hover / focus glow */
.logoLink:hover .logoImg,
.logoLink:focus-visible .logoImg,
.mLogoLink:hover .mLogoImg,
.mLogoLink:focus-visible .mLogoImg{
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.22)) drop-shadow(0 0 10px rgba(255,80,80,.30));
}

@media (max-width: 900px){
  .logoImg{ width:44px; height:44px; }
}
@media (max-width: 520px){
  .logoImg{ width:40px; height:40px; }
}

/* =========================================================
   Hero badge over slider
   --------------------------------------------------------- */
#heroSlideshow{
  position:relative;
}

.heroBadge{
  position:absolute;
  top:12px;
  left:12px;
  width:64px;
  height:64px;
  border-radius:999px;
  object-fit:contain;
  z-index:4;
  pointer-events:none;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.25));
  opacity:.98;
}

@media (max-width: 520px){
  .heroBadge{
    width:54px;
    height:54px;
    top:10px;
    left:10px;
  }
}


/* === Hero Badge (Top Corner, 1/6 Slide Width) === */


@media (max-width: 768px) {
  .hero-badge {
    width: calc(100% / 5.5);
    max-width: 110px;
  }
}

@media (max-width: 480px) {
  .hero-badge {
    width: calc(100% / 5);
    max-width: 96px;
  }
}

/* Logo rendering fix (Android Chrome) */
.logoImg, .mLogoImg{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.9);
}


/* --- Enhanced Hamburger Visibility --- */
.burger {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.35);
}

.burger span {
  height: 3px;
  background: var(--text);
  box-shadow: 0 0 6px rgba(0,0,0,.20);
}

.burger:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.06);
}

.burger:active {
  transform: scale(0.96);
}

@media (max-width: 768px) {
  .burger {
    background: rgba(255,255,255,.25);
  }
}
@media (min-width: 768px) {
  .burger {
    display: none;
  }
}


/* --- Chili Red Pulse + Mobile MENU Label --- */
:root {
  --chili-red: #ff3b2f;
}

@keyframes burgerPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,59,47,.65); }
  70% { box-shadow: 0 0 0 14px rgba(255,59,47,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,47,0); }
}

.burger.pulse {
  animation: burgerPulse 1s ease-out 2;
}

.burger-label {
  display: none;
  font-size: 12px;
  letter-spacing: .08em;
  margin-left: 8px;
  color: #fff;
  text-shadow: 0 0 6px rgba(255,59,47,.6);
}

@media (max-width: 768px) {
  .burger-wrap {
    display: flex;
    align-items: center;
  }
  .burger-label {
    display: inline-block;
  }
}


/* --- Burger label as chili icon --- */
.burger-label {
  font-size: 16px;
  line-height: 1;
  margin-left: 10px;
  transform: translateY(1px);
  filter: drop-shadow(0 0 6px rgba(255,59,47,.55));
}


/* --- Performance helpers (paint optimization) --- */
.cv {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

img {
  height: auto;
}

/* --- Visible Google rating badge (aligns UI with JSON-LD) --- */
.rating-badge {
  display: flex;
  justify-content: center;
  margin: 14px 0 6px;
}

.rating-badge__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
background: linear-gradient( to right, rgb(255, 67, 37), rgb(255, 124, 17), rgb(255, 146, 10) );
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.rating-badge__stars {
  text-shadow: 0 0 10px rgba(255, 59, 47, 0.65);
}

.rating-badge__text {
  opacity: 0.92;
  font-weight: 600;
}

.rating-badge__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}

.rating-badge__link:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  

}


/* --- Visible Google rating badge (aligns UI with JSON-LD) --- */












.rating-badge__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}

.rating-badge__link:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  

}

/* --- Menu page (Thai/English) --- */
.menu-hero {
  padding: 28px 16px 10px;
}

.menu-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px;
  border-radius: 22px;

  /* Background Image */
  /*background-image: url("../images/menu-banner.png");  adjust path */
 /* background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 40px rgba(190, 118, 118, 0.6);*/
  background-image: var(--isan-art-mortar), var(--isan-art-sticky-rice), radial-gradient(circle at 20% 20%, var(--premium-mango) 0%, transparent 30%), linear-gradient(135deg, var(--premium-cream-1), var(--premium-cream-2));
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 120px 120px, 140px 140px, auto, auto;
background-position: top 18px right 22px, bottom 10px left 30%, center, center;
  /* Overlay glass effect */
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
box-shadow: 0 18px 40px rgba(190, 118, 118, 0.6);
}

/* Soft dark overlay for text readability */
.menu-hero-inner::before {

/*background: linear-gradient( to right, rgba(143, 145, 99, 0.55), rgba(140, 188, 100, 0.35), rgba(246, 115, 115, 0.25) );

  content: "";
  position: absolute;
  inset: 0;
 backdrop-filter: blur(4px);  
 border-left: 4px solid var(--accent2);
*/
  z-index: 0;
  border-radius: 22px;
}

/* Keep content above overlay */
.menu-hero-inner > * {
  position: relative;
  z-index: 1;
}

.menu-hero-title {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 44px);
}

.menu-hero-sub {
  margin: 6px 0 14px;
  opacity: 0.92;
}

.menu-lang-toggle {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
}

.menu-lang-btn {
 appearance: none;
  border: 0;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 999px;
  background: #becdb738;
  color: #37412c;
  font-weight: 800;
  letter-spacing: .02em;
  }

.menu-lang-btn.is-active {
  background: rgba(255,255,255,0.18);
  box-shadow: 0 12px 26px rgba(0,0,0,0.22);
}

.menu-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.menu-page-section {
  max-width: 1100px;
  margin: 18px auto;
  padding: 0 16px;
}

.menu-page-title {
  margin: 16px 0 10px;
  font-size: clamp(18px, 2.4vw, 26px);
}

.menu-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px) {
  .menu-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .menu-page-grid { grid-template-columns: 1fr; }
}
/*
.menu-page-card {
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 16px 34px rgba(0,0,0,0.26);
}

.menu-page-photo img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}*/
/* =========================
   Premium Clickable Menu Cards
========================= */
/* Make whole card clickable */
.menu-page-card {
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.menu-page-card{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;

  position:relative;
  overflow:hidden;
  cursor:pointer;

  box-shadow:0 10px 26px rgba(0,0,0,.06);

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s cubic-bezier(.2,.8,.2,1),
    background .25s ease;
}
.menu-page-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 48px rgba(0,0,0,.14);
}
/* Smooth image zoom */
.menu-page-photo img {
  transition: transform 0.35s ease;
}
.menu-page-photo img{
  filter: saturate(1.12) contrast(1.05) brightness(1.02);
}
.menu-page-card:hover .menu-page-photo img{
  filter: saturate(1.18) contrast(1.08) brightness(1.05);
}
.menu-page-photo{
  position:relative;
}

.menu-page-photo::after{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(
    180deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,0)
  );

  pointer-events:none;
}
/* Desktop hover effect */
.menu-page-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15);
}

.menu-page-card:hover .menu-page-photo img {
  transform: scale(1.08);
}

/* Mobile tap feedback */
.menu-page-card:active {
  transform: scale(0.97);
}

/* Optional: subtle rounded overflow for clean zoom */
.menu-page-photo {
  overflow: hidden;
  border-radius: 14px;
}

.menu-page-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
position: relative;
  cursor: pointer;
  border-radius: 18px;
  overflow: hidden;
  transition: 
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.35s cubic-bezier(.2,.8,.2,1),
    background 0.3s ease;
      margin-inline: auto;
}

/* Smooth image zoom */
.menu-page-photo img {
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}

/* Elegant hover lift */
.menu-page-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.12),
    0 4px 12px rgba(0,0,0,0.08);
}

/* Subtle zoom */
.menu-page-card:hover .menu-page-photo img {
  transform: scale(1.07);
}

/* Soft glass glow overlay */
.menu-page-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top left,
    rgba(255,255,255,0.25),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.menu-page-card:hover::after {
  opacity: 1;
}

.menu-page-card::before{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(
    180deg,
    rgba(255,255,255,.0),
    rgba(0,0,0,.02)
  );

  pointer-events:none;
}

/* Clean image clipping */
.menu-page-photo {
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}

/* Tactile mobile tap */
.menu-page-card:active {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}
@media (max-width: 560px) {
  .menu-page-photo img { height: 200px; }
}

.menu-page-body {
  padding: 12px 12px 14px;
}

.menu-page-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 8px;
}

.menu-page-name {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.menu-page-price {
  font-weight: 900;
  opacity: 0.96;
}

.menu-page-desc {
  margin: 8px 0 0;
  opacity: 0.92;
  line-height: 1.45;
  font-size: 14px;
}

/* Language visibility rules */
html[data-menu-lang="th"] [data-lang="en"] { display: none !important; }
html[data-menu-lang="en"] [data-lang="th"] { display: none !important; }


/* --- Language switch (EN | ไทย) --- */




/* --- Menu card spacing & centering fix --- */
.menu-page-card {
  padding: 14px;
}

.menu-page-photo {
  padding: 6px;
}

.menu-page-photo img{
  width:100%;
  height:auto;
  display:block;

  border-radius:14px;

  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}

.menu-page-body {
  padding: 14px 10px 12px;
}

.menu-page-name,
.menu-page-desc,
.menu-page-price {
  text-align: center;
}

.menu-page-row {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 6px;
}



/* --- About Isan (SEO content) --- */
.about-isan {
  max-width: 1100px;
  margin: 18px auto;
  padding: 0 16px;
}

.about-isan h2 {
  margin: 0 0 10px;
  font-size: clamp(18px, 2.4vw, 26px);
}

.about-isan p {
  margin: 10px 0 0;
  opacity: 0.92;
  line-height: 1.55;
}

/* --- Hero rating badge --- */
.rating-badge--hero {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 14px;
}

@media (max-width: 560px) {
  .rating-badge--hero {
    top: 10px;
    right: 10px;
  }
}

/* Ensure hero container can position badge */
.hero, .hero-section, section#hero, section.hero {
  position: relative;
}

/* --- FAQ --- */
.faq {
  max-width: 1100px;
  margin: 18px auto 26px;
  padding: 0 16px;
}

.faq h2 {
  margin: 0 0 10px;
  font-size: clamp(18px, 2.4vw, 26px);
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 16px 34px rgba(0,0,0,0.22);
  overflow: hidden;
}

.faq-q {
  cursor: pointer;
  padding: 14px 14px;
  font-weight: 800;
  list-style: none;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-a {
  padding: 0 14px 14px;
  opacity: 0.92;
}

/* ===== Menu Gallery ===== */




.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.gallery-item{
  display:block;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transform: translateZ(0);
}

.gallery-item img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
}

@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-item img{ height: 190px; }
}

@media (max-width: 480px){
  .gallery-grid{ grid-template-columns: 1fr; }
  .gallery-item img{ height: 230px; }
}

/* ===== Lightbox ===== */
.lightbox{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 9999;
}
.lightbox.open{ display:block; }

.lightbox-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.75);
}

.lightbox-content{
  position: relative;
  max-width: min(980px, 92vw);
  margin: 6vh auto;
  background: rgba(20,20,20,.9);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.lightbox-img{
  width:100%;
  height: min(72vh, 640px);
  object-fit: contain;
  display:block;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
}

.lightbox-caption{
  margin-top: 10px;
  font-size: 14px;
  opacity: .85;
}

.lightbox-close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
  cursor:pointer;
}

.lightbox-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
  cursor:pointer;
  font-size: 26px;
  line-height: 0;
}
.lightbox-nav.prev{ left: 8px; }
.lightbox-nav.next{ right: 8px; }

@media (max-width: 480px){
  .lightbox-content{ margin: 4vh auto; }
  .lightbox-nav{ width: 38px; height: 38px; font-size: 24px; }
}
html, body { height: 100%; }
/*
body{
  background: radial-gradient(1200px 700px at 20% -10%, rgba(255,120,60,.18), transparent 55%),
              radial-gradient(900px 600px at 90% 10%, rgba(255,200,80,.10), transparent 55%),
              radial-gradient(900px 700px at 50% 120%, rgba(120,200,255,.08), transparent 60%),
              linear-gradient(180deg, #0b0b0f 0%, #07070a 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,0.28) 100%
    );
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(205,93,64,0.08),
      transparent 25%,
      transparent 75%,
      rgba(46,229,157,0.06)
    );
}
*/
:root {
  --weave-shift: 0px;
}
/*
body {
  background-position:
    center calc(50% + var(--weave-shift));
}
*/

/* ===== Isan มัดหมี่-inspired background (homepage corrected for visibility) ===== */
html, body { min-height: 100%; }

:root{
  --weave-x: 0px;
  --weave-y: 0px;
  --weave-opacity: .34;
  --weave-scale: 1.02;
}

body{
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1100px 650px at 16% -10%, rgba(255,45,45,.09), transparent 60%),
    radial-gradient(900px 560px at 88% 6%, rgba(255,176,0,.11), transparent 60%),
    radial-gradient(900px 700px at 55% 120%, rgba(22,163,74,.07), transparent 62%),
    radial-gradient(900px 560px at 70% 18%, rgba(255,107,61,.07), transparent 62%),
    linear-gradient(180deg, #fff6e8 0%, #fff1d6 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
background-image: url("/images/ui/bg-pattern.svg");  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: var(--weave-opacity);
  transform: translate3d(var(--weave-x), var(--weave-y), 0) scale(var(--weave-scale));
  will-change: transform;
  pointer-events: none;
}

header, main, footer{
  position: relative;
  z-index: 1;
}

@media (max-width: 768px){
  :root{
    --weave-opacity: .22;
    --weave-scale: 1.01;
  }
}


/* =========================================================
   v7.3.6 cleanup patch
   - Prevent hero slideshow layout shift (CLS)
   - Make miniGrid single column
   - Align hero columns consistently
========================================================= */

#heroSlideshow{
  aspect-ratio: 16 / 10;
  min-height: 220px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.30);
  border: 2px solid rgba(255,255,255,0.18);
  margin: auto;
}

#heroSlideshow #heroSlideImg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  max-height: none !important; /* overrides inline max-height if present */
}

.grab-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #00B14F;
  text-align: center;
  z-index: 9999;
}

.grab-sticky a {
  display: block;
  padding: 14px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 768px){

  .hero{
    padding: 8px 0 !important;
  }

  .rating-badge--hero{
    margin: -14px 0 0 !important;
  }

  picture{
    margin-bottom: 0 !important;
    display:block;
  }

}

/* ===== FAQ bilingual layout ===== */
.faqGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:12px;
}

.faqCol{
  min-width:0;
}

.faqLangTitle{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  font-size:15px;
  color:var(--muted);
}

.faqFlag{
  font-size:18px;
  line-height:1;
}

@media (min-width: 769px){
  .faqCol:first-child{
    border-right:1px solid var(--line);
    padding-right:14px;
  }

  .faqCol:last-child{
    padding-left:14px;
  }
}

@media (max-width: 768px){
  .faqGrid{
    grid-template-columns:1fr;
  }
}

/* ===== FAQ cards ===== */
.faq-item{
  border:1px solid var(--line, #e7e7e7);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  overflow:hidden;
  margin-bottom:10px;
}

.faq-q{
  position:relative;
  cursor:pointer;
  list-style:none;
  padding:16px 48px 16px 16px;
  margin:0;
  font-weight:700;
  color:var(--text,#111);
  transition:background .2s ease, color .2s ease;
}

.faq-q:hover{
  background:rgba(0,0,0,.025);
}

.faq-q::-webkit-details-marker{
  display:none;
}

.faq-q::after{
  content:"+";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:700;
  color:var(--text,#111);
  background:rgba(0,0,0,.05);
  transition:transform .25s ease, background .25s ease;
}

.faq-item[open] .faq-q::after{
  content:"−";
  transform:translateY(-50%) rotate(180deg);
  background:rgba(255,176,0,.18);
}

/* ===== animated answer ===== */
.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .28s ease;
}

.faq-item[open] .faq-a{
  grid-template-rows:1fr;
}



.faq-item[open] .faq-a-inner{
  padding:0 16px 16px;
}

.faq-a p{
  margin:0;
  line-height:1.75;
  color:var(--muted,#555);
}

.reviewsSection{
  padding-top: 10px;
}



.reviewCard{
  background: rgba(255,255,255,.58);
  border:1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding:18px;
}

.reviewTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.reviewSource{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

.reviewSource-google{
  background: rgba(66,133,244,.12);
  border:1px solid rgba(66,133,244,.22);
  color:#174ea6;
}

.reviewSource-tripadvisor{
  background: rgba(52,168,83,.12);
  border:1px solid rgba(52,168,83,.22);
  color:#1e6b35;
}

.reviewStars{
  font-size:14px;
  font-weight:800;
  color:#f4a100;
  letter-spacing:.08em;
}

.reviewText{
  margin:0 0 12px;
  font-size:15px;
  line-height:1.75;
  color:var(--text);
}

.reviewMeta{
  font-size:12px;
  color:var(--muted);
}

@media (max-width: 768px){
  .reviewsGrid{
    grid-template-columns: 1fr;
  }
}

/* =========================
   REVIEWS SECTION
========================= */

.reviewsSection {
  position: relative;
  overflow: hidden;
  padding: 20px 0;
}

.reviewsSliderWrap {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
}

.reviewsSliderWrap::before,
.reviewsSliderWrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  z-index: 2;
  pointer-events: none;
}

.reviewsSliderWrap::before {
  left: 0;
 /* background: linear-gradient(to right, var(--bg, #fff6e8), transparent);*/
}

.reviewsSliderWrap::after {
  right: 0;
 /* background: linear-gradient(to left, var(--bg, #fff6e8), transparent);*/
}

.reviewsSlider {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px 52px;
  margin: 0;
  box-sizing: border-box;
  scrollbar-width: none;
  cursor: grab;
}

.reviewsSlider::-webkit-scrollbar {
  display: none;
}

.reviewsSlider.is-dragging {
  cursor: grabbing;
}

.reviewCard {
  flex: 0 0 calc(100% - 32px);
  min-width: calc(100% - 32px);
  max-width: calc(100% - 32px);
  min-height: 220px;
  scroll-snap-align: start;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.08));
  overflow: hidden;
  pointer-events: auto;
}

.reviewCard * {
  max-width: 100%;
  box-sizing: border-box;
}

.reviewTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.reviewSource {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.reviewSource-google {
  background: rgba(66, 133, 244, 0.12);
  border: 1px solid rgba(66, 133, 244, 0.22);
  color: #174ea6;
}

.reviewSource-tripadvisor {
  background: rgba(52, 168, 83, 0.12);
  border: 1px solid rgba(52, 168, 83, 0.22);
  color: #1e6b35;
}

.reviewStars {
  font-size: 14px;
  font-weight: 800;
  color: #f4a100;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.reviewText {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  word-break: break-word;
}

.reviewMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.reviewMeta span {
  opacity: 0.9;
}

.reviewsNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reviewsNav.prev {
  left: 4px;
}

.reviewsNav.next {
  right: 4px;
}

.reviewsNav:hover {
  transform: translateY(-50%) scale(1.04);
}

.reviewsNav:disabled {
  opacity: 0.55;
  cursor: default;
}

.reviewsSection.cv {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

@media (min-width: 768px) {
  .reviewCard {
    flex: 0 0 calc(50% - 8px);
    min-width: calc(50% - 8px);
    max-width: calc(50% - 8px);
  }
}

@media (min-width: 1024px) {
  .reviewCard {
    flex: 0 0 calc(33.333% - 11px);
    min-width: calc(33.333% - 11px);
    max-width: calc(33.333% - 11px);
  }
}

@media (max-width: 900px) {
  .reviewsSliderWrap {
    padding: 4px 12px;
  }

  .reviewsSlider {
    padding: 8px 16px;
    gap: 14px;
  }

  .reviewCard {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
  }

  .reviewsNav {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }

  .reviewsSliderWrap::before,
  .reviewsSliderWrap::after {
    width: 12px;
  }
}
/* =========================================================
   Premium surface polish patch
   - CSS only
   - No HTML content changes
   - No spacing/layout changes
========================================================= */
:root{
  --premium-cream-1:#fffaf3;
  --premium-cream-2:#fff4ec;
  --premium-cream-3:#fff7f0;
  --premium-gold-soft:rgba(184, 142, 82, 0.18);
  --premium-gold-line:rgba(191, 152, 97, 0.16);
  --premium-blush:rgba(255, 188, 177, 0.17);
  --premium-mango:rgba(255, 223, 158, 0.15);
  --premium-herb:rgba(201, 226, 187, 0.16);
  --premium-cocoa:rgba(110, 82, 50, 0.08);
  /*--isan-art-mortar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23caa064' stroke-opacity='.34' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 74c3 14 15 24 30 24s27-10 30-24H30Z'/%3E%3Cpath d='M37 74c0-14 10-24 23-24 9 0 16 5 21 15'/%3E%3Cpath d='M69 33l18 18'/%3E%3Cpath d='M62 40l24 24'/%3E%3Cpath d='M44 88h26'/%3E%3C/g%3E%3C/svg%3E");*/
  --isan-art-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23c7a777' stroke-opacity='.3' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M95 25C63 23 37 42 30 74c31 4 56-11 65-49Z'/%3E%3Cpath d='M41 69c17-8 29-19 42-35'/%3E%3Cpath d='M56 54c2 8 2 16 0 24'/%3E%3Cpath d='M68 45c2 6 2 13 0 19'/%3E%3C/g%3E%3C/svg%3E");
  
  --isan-art-chili: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23c98f57' stroke-opacity='.32' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M76 28c10 2 15 9 16 18'/%3E%3Cpath d='M42 77c8 9 20 13 31 9 16-6 26-25 20-41-2-5-6-9-11-11-10-3-22 2-31 12-8 9-15 21-20 31-2 4-1 8 2 11 3 2 6 1 9-1Z'/%3E%3Cpath d='M53 40c-4-8-1-16 8-20'/%3E%3C/g%3E%3C/svg%3E");

  --isan-art-lime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23c7a777' stroke-opacity='.30' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='60' cy='60' r='28'/%3E%3Cpath d='M60 32v56M32 60h56'/%3E%3Cpath d='M40 40l40 40M80 40 40 80'/%3E%3Ccircle cx='60' cy='60' r='20' stroke-opacity='.22'/%3E%3C/g%3E%3C/svg%3E");

  --isan-art-mortar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23caa064' stroke-opacity='.34' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 74c3 14 15 24 30 24s27-10 30-24H30Z'/%3E%3Cpath d='M37 74c0-14 10-24 23-24 9 0 16 5 21 15'/%3E%3Cpath d='M69 33l18 18'/%3E%3Cpath d='M62 40l24 24'/%3E%3Cpath d='M44 88h26'/%3E%3C/g%3E%3C/svg%3E");

  --isan-art-shrimp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23c8956a' stroke-opacity='.30' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M82 51c0-12-9-22-22-22-18 0-33 16-33 34 0 16 12 28 28 28 17 0 30-11 37-24'/%3E%3Cpath d='M74 40c7 1 13 6 16 12'/%3E%3Cpath d='M39 50h28M35 61h25M38 72h22'/%3E%3Cpath d='M79 52c6 3 9 8 10 14'/%3E%3Cpath d='M84 78l10 8'/%3E%3Ccircle cx='73' cy='46' r='1.8' fill='%23c8956a' fill-opacity='.30' stroke='none'/%3E%3C/g%3E%3C/svg%3E");

  --isan-art-papaya: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23c9a06a' stroke-opacity='.30' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M63 24c18 0 31 13 31 31 0 24-18 42-38 42-17 0-29-11-29-27 0-25 16-46 36-46Z'/%3E%3Cpath d='M63 24c-1-7 3-12 10-14'/%3E%3Cpath d='M51 46c5-3 12-5 18-4'/%3E%3Cpath d='M47 58c7-4 16-6 24-5'/%3E%3Cpath d='M45 70c8-4 17-5 25-4'/%3E%3C/g%3E%3C/svg%3E");

  --isan-art-sticky-rice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23c8a577' stroke-opacity='.29' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M33 78c0 10 12 18 27 18s27-8 27-18'/%3E%3Cpath d='M33 78V52c0-8 12-15 27-15s27 7 27 15v26'/%3E%3Cpath d='M43 47c3-10 10-17 17-17s14 7 17 17'/%3E%3Cpath d='M46 60h28M46 69h28'/%3E%3C/g%3E%3C/svg%3E");

  --isan-art-fish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23c7a777' stroke-opacity='.29' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 61c10-16 28-26 48-26v15c8 1 13 5 17 11-4 6-9 10-17 11v15c-20 0-38-10-48-26Z'/%3E%3Cpath d='M43 61h20'/%3E%3Ccircle cx='71' cy='52' r='2' fill='%23c7a777' fill-opacity='.29' stroke='none'/%3E%3C/g%3E%3C/svg%3E");

  --isan-art-grilled-chicken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23ca9862' stroke-opacity='.30' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M46 39c-11 0-20 9-20 20 0 16 12 30 29 30 19 0 39-13 39-32 0-11-9-20-20-20-6 0-10 2-14 6-4-3-8-4-14-4Z'/%3E%3Cpath d='M46 39c-1-6 2-10 7-13'/%3E%3Cpath d='M74 39c1-6-2-10-7-13'/%3E%3Cpath d='M43 57c6 3 11 8 14 14'/%3E%3Cpath d='M77 57c-6 3-11 8-14 14'/%3E%3C/g%3E%3C/svg%3E");

  --isan-art-pla-ra-jar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23b98d61' stroke-opacity='.29' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M42 37h36'/%3E%3Cpath d='M47 37v-7h26v7'/%3E%3Cpath d='M38 45c2 29 6 45 22 45s20-16 22-45H38Z'/%3E%3Cpath d='M46 56h28M48 66h24M50 76h20'/%3E%3C/g%3E%3C/svg%3E");

  --isan-art-long-beans: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23b8a06e' stroke-opacity='.28' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 79c13-9 24-23 30-42'/%3E%3Cpath d='M49 86c13-10 23-26 28-48'/%3E%3Cpath d='M64 91c11-11 19-27 22-47'/%3E%3Cpath d='M58 40c4-2 8-2 12 0'/%3E%3C/g%3E%3C/svg%3E");

  --isan-art-garlic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23cab088' stroke-opacity='.28' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 37c9 0 16 8 16 18 0 15-8 28-16 28s-16-13-16-28c0-10 7-18 16-18Z'/%3E%3Cpath d='M49 49c-6 3-10 10-10 18 0 12 8 22 21 22'/%3E%3Cpath d='M71 49c6 3 10 10 10 18 0 12-8 22-21 22'/%3E%3Cpath d='M60 37v-8'/%3E%3C/g%3E%3C/svg%3E");
  

  --isan2-chili: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none'%3E%3Cg stroke='%23d2a36b' stroke-opacity='.22' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M110 40c10 2 16 10 18 20'/%3E%3Cpath d='M55 110c12 12 30 14 46 7 22-9 33-34 24-54-3-7-9-12-17-14-14-4-30 4-43 17-11 11-19 27-24 40-2 5 1 10 6 11 3 1 6 0 8-3Z'/%3E%3C/g%3E%3C/svg%3E");

  --isan2-lime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none'%3E%3Cg stroke='%23d2a36b' stroke-opacity='.20' stroke-width='2'%3E%3Ccircle cx='80' cy='80' r='36'/%3E%3Cpath d='M80 44v72M44 80h72'/%3E%3Ccircle cx='80' cy='80' r='26' stroke-opacity='.14'/%3E%3C/g%3E%3C/svg%3E");

  --isan2-mortar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none'%3E%3Cg stroke='%23d2a36b' stroke-opacity='.24' stroke-width='2.2'%3E%3Cpath d='M40 100c4 18 20 30 40 30s36-12 40-30H40Z'/%3E%3Cpath d='M50 100c0-18 14-30 30-30 10 0 18 6 24 18'/%3E%3Cpath d='M90 45l26 26'/%3E%3C/g%3E%3C/svg%3E");

  --isan2-papaya: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none'%3E%3Cg stroke='%23d2a36b' stroke-opacity='.20' stroke-width='2'%3E%3Cpath d='M82 32c22 0 38 16 38 38 0 28-22 48-46 48-20 0-34-13-34-32 0-30 18-54 42-54Z'/%3E%3Cpath d='M82 32c-2-10 5-18 14-20'/%3E%3C/g%3E%3C/svg%3E");

  --isan2-shrimp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none'%3E%3Cg stroke='%23d2a36b' stroke-opacity='.22' stroke-width='2'%3E%3Cpath d='M110 70c0-16-12-28-28-28-22 0-40 20-40 42 0 20 14 34 34 34 20 0 36-14 44-30'/%3E%3Cpath d='M60 72h34M56 84h30'/%3E%3Ccircle cx='104' cy='62' r='2' fill='%23d2a36b' fill-opacity='.22'/%3E%3C/g%3E%3C/svg%3E");

  --isan2-sticky-rice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none'%3E%3Cg stroke='%23d2a36b' stroke-opacity='.20' stroke-width='2'%3E%3Cpath d='M44 104c0 12 16 22 36 22s36-10 36-22'/%3E%3Cpath d='M44 104V68c0-10 16-18 36-18s36 8 36 18v36'/%3E%3C/g%3E%3C/svg%3E");

  --isan2-fish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none'%3E%3Cg stroke='%23d2a36b' stroke-opacity='.20' stroke-width='2'%3E%3Cpath d='M40 80c14-20 36-32 60-32v18c10 2 18 8 24 14-6 8-14 12-24 14v18c-24 0-46-12-60-32Z'/%3E%3Ccircle cx='100' cy='66' r='2' fill='%23d2a36b' fill-opacity='.20'/%3E%3C/g%3E%3C/svg%3E");

  --isan2-chicken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none'%3E%3Cg stroke='%23d2a36b' stroke-opacity='.22' stroke-width='2'%3E%3Cpath d='M60 54c-14 0-24 10-24 24 0 20 14 36 34 36 22 0 42-14 42-36 0-14-10-24-24-24-8 0-14 3-18 8-4-5-10-8-18-8Z'/%3E%3C/g%3E%3C/svg%3E");

  --isan2-garlic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none'%3E%3Cg stroke='%23d2a36b' stroke-opacity='.20' stroke-width='2'%3E%3Cpath d='M80 54c12 0 20 10 20 22 0 18-10 34-20 34s-20-16-20-34c0-12 8-22 20-22Z'/%3E%3C/g%3E%3C/svg%3E");


}

header{
  background:
    linear-gradient(180deg, rgba(255,253,248,.82) 0%, rgba(255,248,241,.74) 100%);
  box-shadow:
    0 12px 28px rgba(118, 85, 40, 0.06),
    inset 0 1px 0 rgba(255,255,255,.5);
}

.card,
#location,
.reviewCard,
.menu-page-card{
  position: relative;
  overflow: hidden;
  border-color: var(--premium-gold-line);
  box-shadow:
    0 16px 34px rgba(109, 78, 34, 0.08),
    0 3px 12px rgba(255, 184, 120, 0.04),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(210, 186, 153, 0.08);
	
	background-image:
  var(--isan-art-leaf),
  var(--isan-art-mortar),

  radial-gradient(circle at 14% 18%, rgba(120,160,90,0.18) 0%, transparent 35%),
  radial-gradient(circle at 84% 12%, rgba(255,180,80,0.18) 0%, transparent 35%),
  radial-gradient(circle at 32% 88%, rgba(255,120,140,0.16) 0%, transparent 38%),

  linear-gradient(
    135deg,
    rgba(247,239,227,0.6) 0%,
    rgba(240,231,216,0.55) 52%,
    rgba(232,220,200,0.5) 100%
  ),

  repeating-linear-gradient(45deg, rgba(181,145,96,0.015) 0 1px, transparent 1px 11px),
  repeating-linear-gradient(-45deg, rgba(181,145,96,0.012) 0 1px, transparent 1px 11px);
 /* background-image:
    var(--isan-art-leaf),
    var(--isan-art-mortar),
    radial-gradient(circle at 14% 18%, var(--premium-herb) 0%, transparent 28%),
    radial-gradient(circle at 84% 12%, var(--premium-mango) 0%, transparent 28%),
    radial-gradient(circle at 32% 88%, var(--premium-blush) 0%, transparent 31%),
    linear-gradient(135deg, var(--premium-cream-1) 0%, var(--premium-cream-2) 52%, var(--premium-cream-3) 100%),
    repeating-linear-gradient(45deg, rgba(181, 145, 96, 0.028) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgba(181, 145, 96, 0.022) 0 1px, transparent 1px 11px);*/
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-position:
    12px 10px,
    calc(100% - 12px) calc(100% - 10px),
    0% 0%,
    100% 0%,
    0% 100%,
    0 0,
    0 0,
    0 0;
  background-size:
    42px 42px,
    72px 72px,
    auto,
    auto,
    auto,
    auto,
    22px 22px,
    22px 22px;
  background-blend-mode: normal, normal, normal, normal, normal, normal, soft-light, soft-light;
}

.heroMain{
  background-image:
    var(--isan-art-leaf),
    var(--isan-art-mortar),
    radial-gradient(circle at 14% 18%, var(--premium-herb) 0%, transparent 28%),
    radial-gradient(circle at 84% 12%, var(--premium-mango) 0%, transparent 28%),
    radial-gradient(circle at 32% 88%, var(--premium-blush) 0%, transparent 31%),
    linear-gradient(135deg, var(--premium-cream-1) 0%, var(--premium-cream-2) 52%, var(--premium-cream-3) 100%),
    repeating-linear-gradient(45deg, rgba(181, 145, 96, 0.03) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgba(181, 145, 96, 0.025) 0 1px, transparent 1px 11px) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat !important;
  background-position:
    12px 10px,
    calc(100% - 12px) calc(100% - 10px),
    0% 0%,
    100% 0%,
    0% 100%,
    0 0,
    0 0,
    0 0 !important;
  background-size:
    42px 42px,
    72px 72px,
    auto,
    auto,
    auto,
    auto,
    22px 22px,
    22px 22px !important;
}

.pill{
  border-color: rgba(191, 152, 97, 0.15);
  /*background-image:
    radial-gradient(circle at 12% 18%, rgba(206, 228, 196, 0.26) 0%, transparent 26%),
    radial-gradient(circle at 88% 85%, rgba(255, 196, 182, 0.14) 0%, transparent 28%),
    linear-gradient(135deg, rgba(255,250,243,.94) 0%, rgba(248,245,230,.92) 100%),
    repeating-linear-gradient(45deg, rgba(184, 144, 94, 0.022) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(184, 144, 94, 0.018) 0 1px, transparent 1px 13px);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-size: auto, auto, auto, 24px 24px, 24px 24px;*/
  box-shadow:
    0 10px 22px rgba(110, 82, 50, 0.05),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.kicker{
  border-color: rgba(191, 152, 97, 0.14);
  background:
    radial-gradient(circle at 14% 30%, rgba(255, 214, 167, 0.22) 0%, transparent 32%),
    linear-gradient(135deg, rgba(255,252,248,.82) 0%, rgba(250,245,236,.72) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 6px 16px rgba(110, 82, 50, 0.04);
}

.icon{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.52) 0%, transparent 38%),
    linear-gradient(135deg, rgba(255, 218, 212, 0.92), rgba(255, 240, 212, 0.88));
  border-color: rgba(207, 148, 111, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    0 8px 18px rgba(188, 135, 88, 0.10);
}

.rating-badge__link{
  border-color: rgba(255,255,255,.38);
  background:
    linear-gradient(135deg, rgba(210, 163, 73, 0.96), rgba(225, 148, 32, 0.94) 52%, rgba(201, 122, 25, 0.94) 100%);
  box-shadow:
    0 14px 30px rgba(125, 79, 21, 0.18),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(125,79,21,.12);
}

.slideshow{
  border-color: rgba(191, 152, 97, 0.15);
  box-shadow:
    0 14px 28px rgba(108, 80, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,.52);
}

.slideOverlay{
  background:
    linear-gradient(135deg, rgba(79, 54, 27, 0.60), rgba(56, 39, 20, 0.52));
  border-color: rgba(255,255,255,.14);
}



.reviewCard{
  border-color: rgba(191, 152, 97, 0.16);
}

.reviewsSliderWrap::before {
  /*background: linear-gradient(to right, rgba(255, 246, 232, 0.98), transparent);*/
}

.reviewsSliderWrap::after {
  /*background: linear-gradient(to left, rgba(255, 246, 232, 0.98), transparent);*/
}

.menu-page-card::after{
  opacity: .12;
}

@media (max-width: 768px){
  .card,
  #location,
  .reviewCard,
  .menu-page-card{
    background-size:
      36px 36px,
      62px 62px,
      auto,
      auto,
      auto,
      auto,
      20px 20px,
      20px 20px;
    background-position:
      10px 10px,
      calc(100% - 10px) calc(100% - 8px),
      0% 0%,
      100% 0%,
      0% 100%,
      0 0,
      0 0,
      0 0;
  }

  .heroMain{
    background-size:
      36px 36px,
      62px 62px,
      auto,
      auto,
      auto,
      auto,
      20px 20px,
      20px 20px !important;
  }
}


/* =========================================================
   Premium refinement pass 02
   - CSS only
   - No HTML or spacing changes
   - Refines header glass, buttons, nav, mobile restraint
========================================================= */
:root{
  --premium-header-glass-top: rgba(255, 251, 245, 0.86);
  --premium-header-glass-bottom: rgba(255, 245, 236, 0.72);
  --premium-header-line: rgba(192, 151, 97, 0.15);
  --premium-button-red-1: #ff7a5a;
  --premium-button-red-2: #ff8d33;
  --premium-button-red-3: #e76a1e;
  --premium-button-shadow: rgba(162, 92, 27, 0.18);
  --premium-glass-white: rgba(255,255,255,0.72);
}

header{
  border-bottom-color: var(--premium-header-line);
  background:
    linear-gradient(180deg, var(--premium-header-glass-top) 0%, var(--premium-header-glass-bottom) 100%);
  box-shadow:
    0 14px 34px rgba(115, 82, 40, 0.07),
    0 1px 0 rgba(255,255,255,0.52) inset,
    0 -1px 0 rgba(197, 160, 109, 0.08) inset;
}

header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, rgba(255, 223, 183, 0.14), transparent 24%),
    radial-gradient(circle at 88% 15%, rgba(214, 232, 196, 0.12), transparent 22%),
    linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0));
}

.brand h1{
  letter-spacing:.25px;
  text-shadow: 0 1px 0 rgba(255,255,255,.38);
}

.brand p{
  color: rgba(98, 84, 64, 0.88);
}

.navlinks a{
 position: relative;
  border-color: rgba(191, 152, 97, 0.25);
  background: linear-gradient(135deg, rgba(150, 120, 120, 0.16), rgba(255,255,255,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}

.navlinks a:hover{
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 222, 174, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,0.44), rgba(255,250,242,0.2));
  border-color: rgba(191, 152, 97, 0.18);
  box-shadow:
    0 10px 22px rgba(117, 84, 42, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.58);
}

.btn{
  position:relative;
  border:1px solid transparent;
  overflow:hidden;
}

.btn::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0));
  opacity:.8;
}

.btn.primary{
  border-color: rgba(255,255,255,0.22);
  background:
    linear-gradient(135deg, var(--premium-button-red-1) 0%, var(--premium-button-red-2) 56%, var(--premium-button-red-3) 100%);
  box-shadow:
    0 14px 30px var(--premium-button-shadow),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(133, 69, 20, 0.16);
}

.btn.primary:hover{
  box-shadow:
    0 16px 34px rgba(156, 88, 26, 0.22),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(133, 69, 20, 0.18);
}

.btn.secondary{
  border-color: rgba(191, 152, 97, 0.18);
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 227, 186, 0.14), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,247,239,0.84));
  box-shadow:
    0 10px 22px rgba(116, 85, 45, 0.06),
    inset 0 1px 0 rgba(255,255,255,.86);
}

.btn.secondary:hover{
  border-color: rgba(191, 152, 97, 0.24);
}

.kicker,
.pill,
.contact .row,
.mobileLinks a,
.closeBtn,
.burger{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.burger{
  border:1px solid rgba(191, 152, 97, 0.16);
  border-radius:14px;
  background:
    radial-gradient(circle at 25% 22%, rgba(255, 222, 173, 0.18), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,247,239,0.4));
  box-shadow:
    0 10px 24px rgba(112, 80, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.72);
}

.burger:hover{
  border-color: rgba(191, 152, 97, 0.22);
}

.mobileMenu{
  background:
    radial-gradient(circle at 18% 14%, rgba(214, 232, 196, 0.24), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(255, 215, 166, 0.22), transparent 24%),
    radial-gradient(circle at 24% 86%, rgba(255, 193, 181, 0.18), transparent 26%),
    linear-gradient(135deg, rgba(255,251,246,0.82), rgba(255,244,235,0.74));
  border:1px solid rgba(191,152,97,.18);
  box-shadow:
    0 26px 70px rgba(80, 58, 30, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.48);
}

.mobileTop{
  border-bottom-color: rgba(191,152,97,.12);
}

.mSub,
.mobileFoot{
  color: rgba(95, 78, 58, 0.82);
}

.closeBtn{
  color: rgba(95, 72, 44, 0.9);
  border-color: rgba(191,152,97,.18);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.74), rgba(255,247,240,0.42));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    0 10px 18px rgba(116, 83, 43, 0.05);
}

.mobileLinks a{
  border-color: rgba(191,152,97,.14);
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 227, 186, 0.16), transparent 22%),
    linear-gradient(135deg, rgba(255,255,255,0.84), rgba(251,244,234,0.72));
  color: rgba(76, 66, 48, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 8px 18px rgba(112, 80, 42, 0.05);
}

.mobileLinks a:hover{
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 227, 186, 0.22), transparent 22%),
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(251,244,234,0.80));
}

.heroMain,
.card,
#location,
.reviewCard,
.menu-page-card{
  isolation:isolate;
}

.heroMain::after,
.card::after,
#location::after,
.reviewCard::after,
.menu-page-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 24%),
    linear-gradient(135deg, transparent 65%, rgba(255,255,255,0.08) 100%);
  z-index:0;
}

.heroMain > *,
.card > *,
#location > *,
.reviewCard > *,
.menu-page-card > *{
  position:relative;
  z-index:1;
}

.rating-badge__link{
  letter-spacing:.1px;
}

.rating-badge__stars{
  filter: drop-shadow(0 1px 1px rgba(130,80,18,.18));
}

@media (max-width: 768px){
  .card,
  #location,
  .reviewCard,
  .menu-page-card,
  .heroMain{
    background-size:
      24px 24px,
      42px 42px,
      auto,
      auto,
      auto,
      auto,
      18px 18px,
      18px 18px !important;
  }

  .heroMain,
  .card,
  #location,
  .reviewCard,
  .menu-page-card{
    background-position:
      8px 8px,
      calc(100% - 8px) calc(100% - 6px),
      0% 0%,
      100% 0%,
      0% 100%,
      0 0,
      0 0,
      0 0 !important;
  }

  .heroMain::after,
  .card::after,
  #location::after,
  .reviewCard::after,
  .menu-page-card::after{
    background:
      linear-gradient(180deg, rgba(255,255,255,0.16), transparent 18%),
      linear-gradient(135deg, transparent 80%, rgba(255,255,255,0.04) 100%);
  }

  .mobileMenu{
    background:
      radial-gradient(circle at 18% 14%, rgba(214, 232, 196, 0.18), transparent 24%),
      radial-gradient(circle at 86% 18%, rgba(255, 215, 166, 0.16), transparent 24%),
      linear-gradient(135deg, rgba(255,251,246,0.88), rgba(255,244,235,0.82));
  }
}

.home-blog-section {
  position: relative;
  overflow: hidden;

 /* background:
    radial-gradient(circle at 18% 22%, rgba(255, 196, 196, 0.14), transparent 32%),
    radial-gradient(circle at 78% 18%, rgba(255, 224, 163, 0.12), transparent 28%),
    radial-gradient(circle at 30% 82%, rgba(199, 232, 201, 0.12), transparent 30%),
    linear-gradient(135deg, #fffaf2 0%, #fff4ee 50%, #fff8f2 100%);
*/
  border-top: 1px solid rgba(191, 153, 101, 0.14);
  border-bottom: 1px solid rgba(191, 153, 101, 0.14);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(215,190,158,0.08);
}

.home-blog-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    linear-gradient(45deg, rgba(163,126,84,0.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(163,126,84,0.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(163,126,84,0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(163,126,84,0.035) 75%);

  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;

  opacity: 0.18;
  mix-blend-mode: soft-light;
}

.home-blog-section::after {
  content: "";
  position: absolute;
  right: 40px;
  bottom: 20px;

  width: 90px;
  height: 90px;

  pointer-events: none;
  opacity: 0.07;

  background: url("../images/assets/art/mortar-outline-soft.svg") no-repeat center / contain;
}

.home-blog-section h2 {
  font-weight: 700;
  letter-spacing: 0.2px;

  color: #7a5a37;

  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.home-blog-section p {
  color: #6b5a45;
  opacity: 0.9;
}

.blog-main-link {
  display: inline-block;

  background: linear-gradient(135deg, #fff3e8, #ffe9db);
  border: 1px solid rgba(198, 154, 75, 0.25);

  padding: 12px 22px;
  border-radius: 999px;

  font-weight: 600;
  color: #7a4b1f;

  box-shadow:
    0 6px 16px rgba(121,79,31,0.08),
    inset 0 1px 0 rgba(255,255,255,0.8);

  transition: all 0.25s ease;
}

.blog-main-link:hover {
  transform: translateY(-1px);

  box-shadow:
    0 10px 22px rgba(121,79,31,0.12),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

/* Make CTA buttons match the rating badge */
.btn.primary,
.btn.secondary,
#callBtn,
#directionsBtn,
.mobileActions .btn,
a.btn.primary,
a.btn.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 10px 14px;
  border-radius: 999px;
/*
  background: linear-gradient(
    to right,
    rgb(214, 151, 36),
    rgb(232, 167, 52),
    rgb(221, 143, 27)
  );
  
  */
  background: #1f5c34;
  
  border: 1px solid rgba(255, 255, 255, 0.26);
/*border-color: #1f5c34;*/
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.btn.primary:hover,
.btn.secondary:hover,
#callBtn:hover,
#directionsBtn:hover,
.mobileActions .btn:hover,
a.btn.primary:hover,
a.btn.secondary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

.btn.primary:active,
.btn.secondary:active,
#callBtn:active,
#directionsBtn:active,
.mobileActions .btn:active,
a.btn.primary:active,
a.btn.secondary:active {
  transform: translateY(0);
}

/*final patch for footer and home page*/

	.contact-action-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:10px;
  align-items:stretch;
}

.contact-action-grid > *{
  min-width:0;
}

.contact-action-grid .btn.primary,
.contact-action-grid .rating-badge,
.contact-action-grid .rating-badge__link{
  width:100%;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:999px;
  box-sizing:border-box;
}

.contact-action-grid .rating-badge{
  display:flex;
}

.contact-action-grid .rating-badge__link{
  gap:6px;
  white-space:nowrap;
}

@media (max-width:640px){
  .contact-action-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .contact-action-grid .btn.primary,
  .contact-action-grid .rating-badge__link{
    min-height:60px;
    padding:0 14px;
    font-size:15px;
  }
}
.review-source-buttons{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:center;
}

/* Make buttons identical */
.review-source-buttons .btn.secondary{
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:999px;
  box-sizing:border-box;
}

/* Optional: make them visually match your gold buttons */
.review-source-buttons .btn.secondary{
  background:linear-gradient(135deg,#f5b544,#d89a2b);
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
}

/* Mobile refinement */
@media (max-width:640px){
  .review-source-buttons{
    gap:10px;
  }

  .review-source-buttons .btn.secondary{
    min-height:48px;
    font-size:14px;
  }
}

.home-blog-section .container{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding:28px 20px;
  border-radius:28px;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(205,170,120,.12);
  box-shadow:
    0 14px 30px rgba(132,92,46,.06),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.home-blog-section{
  position:relative;
  overflow:hidden;
  padding:44px 0;
  margin:0;
 /* background:
    radial-gradient(circle at 16% 22%, rgba(255,210,180,.12), transparent 26%),
    radial-gradient(circle at 84% 18%, rgba(255,235,190,.12), transparent 24%),
    linear-gradient(135deg, #fffaf5 0%, #fff6ef 48%, #fffdf9 100%);*/
  border-top:1px solid rgba(205,170,120,.12);
  border-bottom:1px solid rgba(205,170,120,.12);
}

.home-blog-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background-image:
    linear-gradient(45deg, rgba(170,130,84,.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(170,130,84,.035) 25%, transparent 25%);
  background-size:26px 26px;
  mix-blend-mode:soft-light;
}

.home-blog-section .container{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

.home-blog-section h2{
   margin: 0 0 18px;
    margin-bottom: 18px;
  color: #825a2e;
  font-size: clamp(1.6rem,4.6vw,3.25rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
}

.home-blog-section p{
  margin:0;
  max-width:980px;
  color:#7a6a5c;
  font-size:clamp(1.08rem,2.3vw,1.28rem);
  line-height:1.65;
}

.home-blog-section .blog-main-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:28px;
  min-height:68px;
  padding:0 30px;
  border-radius:999px;
  text-decoration:none;
  color:#8a5a25;
  font-weight:800;
  font-size:clamp(1rem,2vw,1.18rem);
  background:
    linear-gradient(135deg, #f8ebe0 0%, #f5e4d6 100%);
  border:1px solid rgba(205,170,120,.24);
  box-shadow:
    0 16px 32px rgba(132,92,46,.10),
    inset 0 1px 0 rgba(255,255,255,.78);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease;
}

.home-blog-section .blog-main-link:hover{
  transform:translateY(-2px);
  color:#7a4c1d;
  background:
    linear-gradient(135deg, #fbefe5 0%, #f7e8db 100%);
  box-shadow:
    0 20px 38px rgba(132,92,46,.14),
    inset 0 1px 0 rgba(255,255,255,.86);
}

.home-blog-section .blog-main-link:active{
  transform:translateY(0);
}

.home-blog-section .container{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding:28px 20px;
  border-radius:28px;
  /*background:rgba(255,255,255,.42);*/
  border:1px solid rgba(205,170,120,.12);
  box-shadow:
    0 14px 30px rgba(132,92,46,.06),
    inset 0 1px 0 rgba(255,255,255,.72);
	background-image: var(--isan-art-leaf), var(--isan-art-mortar), radial-gradient(circle at 14% 18%, rgba(120,160,90,0.18) 0%, transparent 35%), radial-gradient(circle at 84% 12%, rgba(255,180,80,0.18) 0%, transparent 35%), radial-gradient(circle at 32% 88%, rgba(255,120,140,0.16) 0%, transparent 38%), linear-gradient( 135deg, rgba(247,239,227,0.6) 0%, rgba(240,231,216,0.55) 52%, rgba(232,220,200,0.5) 100% ), repeating-linear-gradient(45deg, rgba(181,145,96,0.015) 0 1px, transparent 1px 11px), repeating-linear-gradient(-45deg, rgba(181,145,96,0.012) 0 1px, transparent 1px 11px);
 /* background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;*/
  background-position: 12px 10px, calc(100% - 12px) calc(100% - 10px), 0% 0%, 100% 0%, 0% 100%, 0 0, 0 0, 0 0;
  background-size: 42px 42px, 72px 72px, auto, auto, auto, auto, 22px 22px, 22px 22px;
  background-blend-mode: normal, normal, normal, normal, normal, normal, soft-light, soft-light;
}

@media (max-width:640px){
  .home-blog-section{
    padding:32px 0;
  }

  .home-blog-section .container{
  /*  padding:0 18px;*/
  }

  .home-blog-section h2{
    margin-bottom:14px;
  }

  .home-blog-section .blog-main-link{
    width:100%;
    min-height:60px;
    margin-top:22px;
    padding:0 18px;
    text-align:center;
  }
}



















@media (max-width:640px){
  .home-blog-section{
  /*  padding:30px 18px;
    border-radius:24px;
	*/
  }

  .home-blog-section .blog-main-link{
    width:100%;
  }

  .site-footer__links{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .site-footer__links a{
    min-height:54px;
    border-radius:18px;
    font-size:15px;
  }
}

.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 40px;
  height: 40px;
  opacity: 0.08;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.btn:hover::after {
  opacity: 0.15;
  transform: scale(1.1);
}
/* 🌶 Primary = chili */
.btn.primary::after {
  background-image: url("/images/assets/art/chili.webp");
}

/* 🍋 Secondary = lime */
.btn.secondary::after {
  background-image: url("/images/assets/art/lime.webp");
}

/* 🪨 CTA / strong buttons */
.btn.cta::after {
  background-image: url("/images/assets/art/mortar.webp");
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,80,0,0.08), transparent 60%);
  pointer-events: none;
}






/* Responsive grid for guide cards */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Tablet */
@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}
.grid-3 .card {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 22px rgba(231, 141, 200, 0.42);
  border: 1px solid rgba(32, 39, 25, 0.08);
}
.grid-3 .card {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    background 0.35s ease;

  will-change: transform;
  transform: translateY(0) scale(1);
}

.grid-3 .card:hover {
  transform: translateY(-6px) scale(1.015);

  box-shadow:
    0 18px 40px rgba(17, 24, 39, 0.12),
    0 32px 70px rgba(17, 24, 39, 0.08);

  border-color: rgba(255,255,255,0.35);
}
.grid-3 .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.35) 45%,
    transparent 70%
  );

  opacity: 0;
  transition: opacity 0.4s ease;
}

.grid-3 .card:hover::before {
  opacity: 0.6;
}

.grid-3 .card:active {
  transform: translateY(-2px) scale(0.99);

  box-shadow:
    0 8px 18px rgba(17,24,39,0.12),
    0 14px 28px rgba(17,24,39,0.08);
}

.grid-3 img {
  height: 180px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .grid-3 .card {
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }

  .grid-3 .card:hover {
    transform: translateY(-3px) scale(1.01);
  }
}
/* ======================================
   GALLERY / LIGHTBOX LAYER
   Merged into core because gallery UI is reused across multiple root pages
   ====================================== */

/* ===== Gallery item titles ===== */
.gallery-item{
  text-decoration: none;
  color: inherit;
}
/* ===== Recommended badge ===== */
.gallery-item{
  position: relative;
}

.gallery-item[data-recommended="1"]::before{
  content: "Recommended 🔥";
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ff2d2d;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  z-index: 2;
}

.gallery-title{
  padding: 10px 8px 12px;
  text-align: center;
  line-height: 1.25;
}

.gallery-title .th{
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.gallery-title .en{
  display: block;
  font-size: 13px;
  opacity: .75;
  margin-top: 2px;
}

.gallery-title .spice{
  display: block;
  font-size: 14px;
  margin-top: 4px;
}
/* ===== Shop history hero ===== */
.menu-hero{
  padding: 28px 0 36px;
}

.menu-hero-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.menu-hero-item{
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}

.menu-hero-item img{
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
}

.menu-hero-item figcaption{
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.3;
  background: rgba(0,0,0,.55);
  color: #fff;
}

.menu-hero-item .en{
  display: block;
  font-size: 12px;
  opacity: .8;
  margin-top: 2px;
}

	.menuGalleryImageLightbox{
  position:fixed;
  inset:0;
  z-index:11000;
}

.menuGalleryImageLightbox[hidden]{
  display:none !important;
}

.menuGalleryImageLightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}

.menuGalleryImageLightbox-dialog{
  position:relative;
  z-index:1;
  width:min(94vw, 980px);
  margin:4vh auto;
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.menuGalleryImageLightbox-img{
  display:block;
  width:100%;
  max-height:78vh;
  object-fit:contain;
  background:#111;
}

.menuGalleryImageLightbox-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px 18px;
  flex-wrap:wrap;
}

.menuGalleryImageLightbox-cap{
  font-weight:700;
}

.menuGalleryImageLightbox-open{
  display:inline-flex;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid var(--line, #e7e7e7);
  color:var(--text, #111);
  background:#fff;
  font-weight:700;
}

.menuGalleryImageLightbox-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:42px;
  height:42px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.menuGalleryImageLightbox{
  position:fixed;
  inset:0;
  z-index:11000;
}

.menuGalleryImageLightbox[hidden]{
  display:none !important;
}

.menuGalleryImageLightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}

.menuGalleryImageLightbox-dialog{
  position:relative;
  z-index:1;
  width:min(94vw, 980px);
  margin:4vh auto;
background: #ffffff9c;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.menuGalleryImageLightbox-img{
  display:block;
  width:100%;
  max-height:78vh;
  object-fit:contain;
  background: #a4ab7161;
}

.menuGalleryImageLightbox-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px 18px;
  flex-wrap:wrap;
}

.menuGalleryImageLightbox-cap{
  font-weight:700;
}

.menuGalleryImageLightbox-open{
  display:inline-flex;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid var(--line, #e7e7e7);
  color:var(--text, #111);
  background:#fff;
  font-weight:700;
}

.menuGalleryImageLightbox-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:42px;
  height:42px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  cursor:pointer;
  font-size:22px;
  line-height:1;
}

.menuGalleryImageLightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:46px;
  height:46px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  cursor:pointer;
  font-size:30px;
  line-height:1;
}

.menuGalleryImageLightbox-nav.prev{
  left:12px;
}

.menuGalleryImageLightbox-nav.next{
  right:12px;
}

/* Mobile */
@media (max-width: 768px){
  .menu-hero-grid{
    grid-template-columns: 1fr;
  }
  .menu-hero-item img{
    height: 280px;
  }
}


/* Mobile polish */
@media (max-width: 480px){
  .gallery-title .th{ font-size: 16px; }
  .gallery-title .en{ font-size: 13px; }
}

.sectionTitle{
	/*background: linear-gradient( 135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25) );*/
  
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius: 9px;
  padding: 8px;
  /*
  background-image: var(--isan-art-mortar), var(--isan-art-lime), radial-gradient(circle at 20% 20%, var(--premium-mango) 0%, transparent 30%), linear-gradient(135deg, var(--premium-cream-1), var(--premium-cream-2));
  background-repeat: repeat, repeat, repeat, repeat;
  background-size: 40px 40px, 60px 60px, 100px, 120px;
  background-position: top 18px right 22px, bottom 14px left 18px, center, center;*/
background-image:
  var(--isan2-papaya),
  var(--isan2-chicken),
  var(--isan2-mortar),
  radial-gradient(circle at 20% 20%, var(--premium-mango), transparent 40%),
  linear-gradient(135deg, var(--premium-cream-1), var(--premium-cream-2));
  
 background-size:
  160px 160px,
  120px 120px,
  180px 180px,
  auto,
  auto;

background-position:
  top 5% right 24px,
  bottom 20px left 20px,
  top 50% left 45%,
  center,
  center;

background-repeat: no-repeat;
}

/* ===== Homepage heroMain clarity patch ===== */
.heroMain{
  position: relative;
  overflow: hidden;
  background-image:
    var(--isan-art-leaf),
    var(--isan-art-mortar),
    radial-gradient(circle at 14% 18%, rgba(201,226,187,0.12) 0%, transparent 34%),
    radial-gradient(circle at 84% 12%, rgba(255,223,158,0.10) 0%, transparent 34%),
    radial-gradient(circle at 32% 88%, rgba(255,188,177,0.10) 0%, transparent 38%),
    linear-gradient(135deg, rgba(255,250,243,0.90) 0%, rgba(255,244,236,0.86) 52%, rgba(255,247,240,0.84) 100%),
    repeating-linear-gradient(45deg, rgba(181,145,96,0.016) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-45deg, rgba(181,145,96,0.012) 0 1px, transparent 1px 12px) !important;
  background-repeat: no-repeat !important;
  background-size:
    64px 64px,
    84px 84px,
    auto,
    auto,
    auto,
    auto,
    18px 18px,
    18px 18px !important;
  background-position:
    14px 14px,
    calc(100% - 18px) 18px,
    0% 0%,
    100% 0%,
    0% 100%,
    0 0,
    0 0,
    0 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 768px){
  .heroMain{
    background-size:
      46px 46px,
      60px 60px,
      auto,
      auto,
      auto,
      auto,
      14px 14px,
      14px 14px !important;
    background-position:
      10px 10px,
      calc(100% - 12px) 12px,
      0% 0%,
      100% 0%,
      0% 100%,
      0 0,
      0 0,
      0 0 !important;
  }
}
/*--------*/

.contact .row {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  border-radius: 18px;

  background:
    radial-gradient(circle at 12% 22%, rgba(206, 228, 196, 0.18) 0%, transparent 26%),
    linear-gradient(135deg, rgba(255,250,244,0.82), rgba(253,245,235,0.62));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 8px 20px rgba(17, 24, 39, 0.06);

  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.35s ease;

  will-change: transform;
}

.contact .row::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(circle at 18% 28%, rgba(120,160,90,0.28) 0%, transparent 42%),
    radial-gradient(circle at 82% 20%, rgba(255,180,80,0.24) 0%, transparent 42%),
    radial-gradient(circle at 34% 82%, rgba(255,120,140,0.16) 0%, transparent 48%);

  opacity: 0.9;
  animation: ambientShift 14s ease-in-out infinite alternate;
}

@keyframes ambientShift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-2%, 1%, 0) scale(1.05);
  }
  100% {
    transform: translate3d(2%, -1%, 0) scale(1.06);
  }
}

.contact .row > * {
  position: relative;
  z-index: 1;
}

.contact .row:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 18px 40px rgba(17, 24, 39, 0.10),
    0 32px 70px rgba(17, 24, 39, 0.06);
}

@media (max-width: 768px) {
  .contact .row::after {
    animation-duration: 20s;
    opacity: 0.65;
  }

  .contact .row:hover {
    transform: translateY(-3px) scale(1.005);
  }
}



/*-------*/


.pill {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  display: flex;
  gap: 14px;
  align-items: flex-start;

  padding: 16px 18px;
  border-radius: 16px;

  background:
    radial-gradient(circle at 10% 20%, rgba(206,228,196,0.18) 0%, transparent 28%),
    linear-gradient(135deg, rgba(255,250,244,0.85), rgba(253,245,235,0.65));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 6px 16px rgba(17,24,39,0.06);

  transition:
    transform 0.4s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.4s cubic-bezier(0.16,1,0.3,1),
    background 0.3s ease;

  will-change: transform;
}

.pill::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(circle at 20% 30%, rgba(120,160,90,0.28), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(255,180,80,0.24), transparent 45%),
    radial-gradient(circle at 30% 80%, rgba(255,120,140,0.16), transparent 50%);

  opacity: 0.45;
  animation: ambientShift 16s ease-in-out infinite alternate;
}

.pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.5) 45%,
    transparent 70%
  );

  opacity: 0;
  transition: opacity 0.4s ease;
}

.pill:hover {
  transform: translateY(-5px) scale(1.02);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 14px 30px rgba(17,24,39,0.10),
    0 24px 60px rgba(17,24,39,0.06);
}

.pill:hover::before {
  opacity: 0.6;
}

.pill:hover::after {
  opacity: 1;
  animation-duration: 9s;
}

.pill:active {
  transform: translateY(-2px) scale(0.98);

  box-shadow:
    0 6px 14px rgba(17,24,39,0.08);
}

.pill > * {
  position: relative;
  z-index: 2;
}


/*--------*/

.menuGrid .item {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  border-radius: 18px;

 /* background:
    radial-gradient(circle at 10% 20%, rgba(206,228,196,0.16) 0%, transparent 28%),
    linear-gradient(135deg, rgba(255,250,244,0.82), rgba(253,245,235,0.62));*/

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 6px 16px rgba(17,24,39,0.06);

  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    background 0.35s ease;

  will-change: transform;
}

.menuGrid .item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.45) 45%,
    transparent 70%
  );

  opacity: 0;
  transition: opacity 0.4s ease;
}

.menuGrid .item::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
/*
  background:
    radial-gradient(circle at 20% 30%, rgba(120,160,90,0.22), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(255,180,80,0.20), transparent 45%),
    radial-gradient(circle at 30% 80%, rgba(255,120,140,0.12), transparent 50%);*/

  opacity: 0.78;
  animation: ambientShift 16s ease-in-out infinite alternate;
}

.menuGrid .item > * {
  position: relative;
  z-index: 2;
}

.menuGrid .item:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 14px 30px rgba(17,24,39,0.10),
    0 24px 60px rgba(17,24,39,0.06);
}

.menuGrid .item:hover::before {
  opacity: 0.55;
}

.menuGrid .item:hover::after {
  opacity: 0.95;
  animation-duration: 9s;
}

.menuGrid .item:active {
  transform: translateY(-2px) scale(0.995);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 8px 18px rgba(17,24,39,0.08);
}

.menuGrid .item:focus-visible {
  outline: 2px solid rgba(120,160,90,0.28);
  outline-offset: 2px;
}

.menuGrid .item:hover img {
  transform: scale(1.04);
  border-color: rgba(255,255,255,0.28) !important;
}

.menuGrid .item img {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease;
}

@keyframes ambientShift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-2%, 1%, 0) scale(1.05);
  }
  100% {
    transform: translate3d(2%, -1%, 0) scale(1.06);
  }
}

@media (max-width: 768px) {
  .menuGrid .item:hover {
    transform: translateY(-2px) scale(1.005);
  }

  .menuGrid .item::after {
    animation-duration: 20s;
    opacity: 0.62;
  }
}

/* ===== Reusable premium hero overlay system ===== */
:root{
  --hero-overlay-pattern-url: url("/images/ui/bg-pattern.svg");
  --hero-overlay-pattern-opacity: .16;
  --hero-overlay-glow-opacity: .26;
  --hero-overlay-sheen-opacity: .34;
  --hero-overlay-blur: 10px;
}

@keyframes heroOverlayDrift{
  0%{
    transform: translate3d(0, 0, 0) scale(1);
    opacity: var(--hero-overlay-pattern-opacity);
  }
  50%{
    transform: translate3d(0, -10px, 0) scale(1.025);
    opacity: calc(var(--hero-overlay-pattern-opacity) + .03);
  }
  100%{
    transform: translate3d(-8px, 6px, 0) scale(1.015);
    opacity: var(--hero-overlay-pattern-opacity);
  }
}

@keyframes heroOverlaySheen{
  0%{
    transform: translate3d(-18%, -8%, 0) rotate(0.001deg);
    opacity: .08;
  }
  50%{
    transform: translate3d(10%, 3%, 0) rotate(0.001deg);
    opacity: var(--hero-overlay-sheen-opacity);
  }
  100%{
    transform: translate3d(-8%, 8%, 0) rotate(0.001deg);
    opacity: .12;
  }
}

.heroMain,
.menu-hero-inner{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.heroMain::before,
.menu-hero-inner::before{
  content:"";
  position:absolute;
  inset:-8%;
  z-index:0;
  pointer-events:none;
  border-radius: inherit;
  background-image:
    var(--hero-overlay-pattern-url),
    radial-gradient(circle at 14% 16%, rgba(255,255,255,.48) 0%, transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(255,212,150,.20) 0%, transparent 24%),
    radial-gradient(circle at 32% 82%, rgba(126, 176, 103, .12) 0%, transparent 26%);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
  background-size: cover, 46% 46%, 28% 28%, 30% 30%;
  background-position: center center, left top, right top, left bottom;
  mix-blend-mode: screen;
  filter: blur(var(--hero-overlay-blur));
  opacity: var(--hero-overlay-pattern-opacity);
  transform-origin: center;
  animation: heroOverlayDrift 24s ease-in-out infinite alternate;
}

.heroMain > *,
.menu-hero-inner > *{
  position: relative;
  z-index: 1;
}

.menu-hero-inner::after{
  content:"";
  position:absolute;
  inset:-18% -8%;
  z-index:0;
  pointer-events:none;
  border-radius: inherit;
  background:
    linear-gradient(115deg,
      transparent 14%,
      rgba(255,255,255,.04) 28%,
      rgba(255,255,255,.14) 42%,
      rgba(255,255,255,.04) 58%,
      transparent 72%);
  mix-blend-mode: screen;
  filter: blur(18px);
  opacity: .18;
  animation: heroOverlaySheen 16s ease-in-out infinite alternate;
}

/* Reusable utility class for future hero surfaces */
.hero-overlay-premium{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.hero-overlay-premium::before{
  content:"";
  position:absolute;
  inset:-8%;
  z-index:0;
  pointer-events:none;
  border-radius: inherit;
  background-image:
    var(--hero-overlay-pattern-url),
    radial-gradient(circle at 14% 16%, rgba(255,255,255,.48) 0%, transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(255,212,150,.20) 0%, transparent 24%),
    radial-gradient(circle at 32% 82%, rgba(126,176,103,.12) 0%, transparent 26%);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
  background-size: cover, 46% 46%, 28% 28%, 30% 30%;
  background-position: center center, left top, right top, left bottom;
  mix-blend-mode: screen;
  filter: blur(var(--hero-overlay-blur));
  opacity: var(--hero-overlay-pattern-opacity);
  transform-origin:center;
  animation: heroOverlayDrift 24s ease-in-out infinite alternate;
}

.hero-overlay-premium::after{
  content:"";
  position:absolute;
  inset:-18% -8%;
  z-index:0;
  pointer-events:none;
  border-radius: inherit;
  background:
    linear-gradient(115deg,
      transparent 14%,
      rgba(255,255,255,.04) 28%,
      rgba(255,255,255,.14) 42%,
      rgba(255,255,255,.04) 58%,
      transparent 72%);
  mix-blend-mode: screen;
  filter: blur(18px);
  opacity: .18;
  animation: heroOverlaySheen 16s ease-in-out infinite alternate;
}

.hero-overlay-premium > *{
  position:relative;
  z-index:1;
}

@media (prefers-reduced-motion: reduce){
  .heroMain::before,
  .menu-hero-inner::before,
  .menu-hero-inner::after,
  .hero-overlay-premium::before,
  .hero-overlay-premium::after{
    animation:none !important;
    transform:none !important;
  }
}

@media (max-width: 768px){
  :root{
    --hero-overlay-pattern-opacity: .12;
    --hero-overlay-sheen-opacity: .24;
    --hero-overlay-blur: 8px;
  }

  .heroMain::before,
  .menu-hero-inner::before,
  .hero-overlay-premium::before{
    inset:-4%;
    background-size: cover, 62% 62%, 36% 36%, 40% 40%;
  }

  .menu-hero-inner::after,
  .hero-overlay-premium::after{
    opacity:.12;
    filter: blur(14px);
  }
}