: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}
    .photo{
      border-radius: calc(var(--radius) + 2px);
      border:1px dashed rgba(255,255,255,.22);
      background:
        linear-gradient(135deg, rgba(255,59,106,.10), rgba(255,183,3,.08)),
        rgba(255,255,255,.04);
      min-height: 220px;
      padding:16px;
      position:relative;
      overflow:hidden;
    }

    /* 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);
    }
    .slideOverlay{
      position:absolute;
      inset:auto 12px 12px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border-radius: 16px;
      background: rgba(0,0,0,.35);
      border:1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(10px);
    }
    .slideOverlay b{font-size:12px}
    .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 */
    .photoGrid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap:12px;
    }
    .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}
    }

    .photo h3{margin:0; font-size:13px}
    .photo p{margin:6px 0 0; color:var(--muted); font-size:12px}
    .photo .tag{
      position:absolute; right:14px; top:14px;
      font-size:11px; padding:7px 10px;
      border-radius: 999px;
      background: rgba(0,0,0,.25);
      border:1px solid var(--line);
      color: var(--muted);
    }

    .miniGrid{
display:grid; grid-template-columns: 1fr 1fr; gap:12px
  grid-template-columns: 1fr;
}
    .mini{
      padding:14px;
      border-radius: 18px;
      background: rgba(0,0,0,.03);
      border:1px solid var(--line);
      min-height: 92px;
    }
    .mini b{display:block; font-size:12px}
    .mini p{margin:6px 0 0; font-size:12px; color:var(--muted)}

    /* 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}
    .mLogo{
      width:34px;height:34px;border-radius:14px;
      background:linear-gradient(135deg,var(--accent),var(--accent2));
      display:grid;place-items:center;font-weight:900;color:#111;
    }
    .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 === */
    .heroMedia{padding:14px}
    .heroSlider{
      position:relative;
      border-radius: calc(var(--radius) - 2px);
      overflow:hidden;
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      /* Reserve space to prevent CLS */
      aspect-ratio: 16 / 9;
      min-height: 220px;
      contain: layout paint;
    }
    .heroTrack{
      display:flex;
      height:100%;
      width:100%;
      transform: translate3d(0,0,0);
      transition: transform .35s ease;
      will-change: transform;
      touch-action: pan-y;
    }
    .heroSlide{
      flex: 0 0 100%;
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .heroDots{
      position:absolute;
      left:0; right:0; bottom:10px;
      display:flex;
      justify-content:center;
      gap:8px;
      pointer-events:auto;
    }
    .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 === */
.site-logo {
  height: 56px;
  width: auto;
  transition: filter .3s ease, transform .3s ease;
}
@media (max-width: 768px) {
  .site-logo { height: 44px; }
}
.site-logo:hover {
  filter: drop-shadow(0 0 10px rgba(255,0,0,.55));
  transform: scale(1.05);
}

/* === Hero Logo Badge === */
.hero-logo-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
}
.hero-logo-badge img {
  width: 96px;
}
@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) === */
.hero-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  width: calc(100% / 6);
  max-width: 140px;
  min-width: 72px;
  height: auto;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.25));
}

@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;

  /* Overlay glass effect */
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 40px rgba(0,0,0,0.30);
}

/* 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) );
  ontent: "";
  position: absolute;
  inset: 0;
 /* background: linear-gradient( to right, rgba(255,176,0,.08), rgba(140, 188, 100, 0.35), rgba(177, 165, 165, 0.25) );*/
  backdrop-filter: blur(4px);
  z-index: 0;
  border-radius: 22px;
  border-left: 4px solid var(--accent2);
}

/* 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: transparent;
  color: #fff;
  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 | ไทย) --- */
.nav-lang-switch {
  margin-left: 14px;
  font-weight: 700;
}
.nav-lang-switch a {
  text-decoration: none;
  opacity: .85;
}
.nav-lang-switch a:hover {
  opacity: 1;
}

/* --- 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 ===== */
.menu-gallery { padding: 36px 0; }
.section-title { margin: 0 0 6px; font-size: 26px; }
.section-subtitle { margin: 0 0 18px; opacity: .8; }

.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 (no tiling, brand-matched, parallax-ready) ===== */
html, body { min-height: 100%; }

body{
  /* Brand colors (from your style01.css palette) */
  --bg0: #fff6e8;
  --bg1: #fff1d6;

  /* Reds + green aligned to your site accents */
  --brand-red: #ff2d2d;
  --brand-red2: #ff6b3d;
  --brand-green: #16a34a;
  --brand-gold: #ffb000;

  /* Glow strength (tweak if you want) */
  --glow-red: rgba(255, 45, 45, .14);
  --glow-red2: rgba(255, 107, 61, .10);
  --glow-green: rgba(22, 163, 74, .09);
  --glow-gold: rgba(255, 176, 0, .14);

  /* Parallax variables (JS updates these) */
  --weave-x: 0px;
  --weave-y: 0px;

  /*
    มัดหมี่-style diamond ikat “weave”:
    - dense diagonal diamonds
    - slight irregularity via varied opacity
    - one SVG that scales to cover (NO tiling)
  */
 /* ===== Regional ผ้าขิด motifs (Loei / Kalasin / Khon Kaen) + cloth edge vignette ===== */
--weave-ikat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' viewBox='0 0 1600 1000'%3E%3Cdefs%3E%3ClinearGradient id='fade' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='.08'/%3E%3C/linearGradient%3E%3CradialGradient id='vignette' cx='50%25' cy='50%25' r='75%25'%3E%3Cstop offset='55%25' stop-color='%23000000' stop-opacity='0'/%3E%3Cstop offset='100%25' stop-color='%23000000' stop-opacity='.22'/%3E%3C/radialGradient%3E%3ClinearGradient id='hem' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23000000' stop-opacity='.22'/%3E%3Cstop offset='35%25' stop-color='%23000000' stop-opacity='0'/%3E%3Cstop offset='65%25' stop-color='%23000000' stop-opacity='0'/%3E%3Cstop offset='100%25' stop-color='%23000000' stop-opacity='.22'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='1000' fill='url(%23fade)'/%3E%3C!-- Dense warp/weft threads --%3E%3Cg opacity='.82'%3E%3Cg stroke='%23ffffff' stroke-width='1.25' stroke-opacity='.14'%3E%3Cpath d='M60 0 V1000'/%3E%3Cpath d='M110 0 V1000'/%3E%3Cpath d='M160 0 V1000'/%3E%3Cpath d='M210 0 V1000'/%3E%3Cpath d='M260 0 V1000'/%3E%3Cpath d='M310 0 V1000'/%3E%3Cpath d='M360 0 V1000'/%3E%3Cpath d='M410 0 V1000'/%3E%3Cpath d='M460 0 V1000'/%3E%3Cpath d='M510 0 V1000'/%3E%3Cpath d='M560 0 V1000'/%3E%3Cpath d='M610 0 V1000'/%3E%3Cpath d='M660 0 V1000'/%3E%3Cpath d='M710 0 V1000'/%3E%3Cpath d='M760 0 V1000'/%3E%3Cpath d='M810 0 V1000'/%3E%3Cpath d='M860 0 V1000'/%3E%3Cpath d='M910 0 V1000'/%3E%3Cpath d='M960 0 V1000'/%3E%3Cpath d='M1010 0 V1000'/%3E%3Cpath d='M1060 0 V1000'/%3E%3Cpath d='M1110 0 V1000'/%3E%3Cpath d='M1160 0 V1000'/%3E%3Cpath d='M1210 0 V1000'/%3E%3Cpath d='M1260 0 V1000'/%3E%3Cpath d='M1310 0 V1000'/%3E%3Cpath d='M1360 0 V1000'/%3E%3Cpath d='M1410 0 V1000'/%3E%3Cpath d='M1460 0 V1000'/%3E%3Cpath d='M1510 0 V1000'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-width='1.25' stroke-opacity='.12'%3E%3Cpath d='M0 110 H1600'/%3E%3Cpath d='M0 160 H1600'/%3E%3Cpath d='M0 210 H1600'/%3E%3Cpath d='M0 260 H1600'/%3E%3Cpath d='M0 310 H1600'/%3E%3Cpath d='M0 360 H1600'/%3E%3Cpath d='M0 410 H1600'/%3E%3Cpath d='M0 460 H1600'/%3E%3Cpath d='M0 510 H1600'/%3E%3Cpath d='M0 560 H1600'/%3E%3Cpath d='M0 610 H1600'/%3E%3Cpath d='M0 660 H1600'/%3E%3Cpath d='M0 710 H1600'/%3E%3Cpath d='M0 760 H1600'/%3E%3Cpath d='M0 810 H1600'/%3E%3Cpath d='M0 860 H1600'/%3E%3Cpath d='M0 910 H1600'/%3E%3C/g%3E%3C/g%3E%3C!-- Khid border bands (Khon Kaen-style bold steps) --%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='2'%3E%3Cpath d='M40 70 H1560'/%3E%3Cpath d='M40 930 H1560'/%3E%3Cpath d='M80 95 H1520'/%3E%3Cpath d='M80 905 H1520'/%3E%3C/g%3E%3C!-- Loei-style zigzag mountains (tight, repeated) --%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.18' stroke-width='1.9' opacity='.70'%3E%3Cpath d='M120 180 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30'/%3E%3Cpath d='M120 820 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30 l40 -30 l40 30'/%3E%3C/g%3E%3C!-- Kalasin-style diamond lattice + 'dok' medallions --%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.17' stroke-width='1.8' opacity='.66'%3E%3Cpath d='M260 330 L330 260 L400 330 L330 400 Z'/%3E%3Cpath d='M540 330 L610 260 L680 330 L610 400 Z'/%3E%3Cpath d='M820 330 L890 260 L960 330 L890 400 Z'/%3E%3Cpath d='M1100 330 L1170 260 L1240 330 L1170 400 Z'/%3E%3Cpath d='M400 600 L470 530 L540 600 L470 670 Z'/%3E%3Cpath d='M680 600 L750 530 L820 600 L750 670 Z'/%3E%3Cpath d='M960 600 L1030 530 L1100 600 L1030 670 Z'/%3E%3Cpath d='M1240 600 L1310 530 L1380 600 L1310 670 Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1.6' opacity='.62'%3E%3Cpath d='M330 290 l18 40 l-40 -18 l40 18 l-18 40 l18 -40 l40 18 l-40 -18 l18 -40'/%3E%3Cpath d='M610 290 l18 40 l-40 -18 l40 18 l-18 40 l18 -40 l40 18 l-40 -18 l18 -40'/%3E%3Cpath d='M890 290 l18 40 l-40 -18 l40 18 l-18 40 l18 -40 l40 18 l-40 -18 l18 -40'/%3E%3Cpath d='M1170 290 l18 40 l-40 -18 l40 18 l-18 40 l18 -40 l40 18 l-40 -18 l18 -40'/%3E%3C/g%3E%3C!-- Khon Kaen stepped block motifs (center panel) --%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.18' stroke-width='2' opacity='.80'%3E%3Cpath d='M240 460 h70 v40 h40 v40 h-40 v40 h-70 v-40 h-40 v-40 h40z'/%3E%3Cpath d='M520 460 h70 v40 h40 v40 h-40 v40 h-70 v-40 h-40 v-40 h40z'/%3E%3Cpath d='M800 460 h70 v40 h40 v40 h-40 v40 h-70 v-40 h-40 v-40 h40z'/%3E%3Cpath d='M1080 460 h70 v40 h40 v40 h-40 v40 h-70 v-40 h-40 v-40 h40z'/%3E%3C/g%3E%3C!-- Cloth edge vignette + hem shading (subtle) --%3E%3Crect width='1600' height='1000' fill='url(%23hem)'/%3E%3Crect width='1600' height='1000' fill='url(%23vignette)'/%3E%3C/svg%3E");

   background:
    /* Soft brand glows (reduced slightly so weave shows stronger) */
    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%),

    /* 5️⃣ Ikat weave layer (UNCHANGED — now visually stronger) */
    var(--weave-ikat),

    /* 6️⃣ Very soft paper grain (behind weave) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/feTurbulence%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.035'/%3E%3C/feComponentTransfer%3E%3C/feFilter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),

    /* 7️⃣ Warm base */
    linear-gradient(180deg, #fff6e8 0%, #fff1d6 100% );    /* Ikat weave layer (UNCHANGED, still 5th) */
    var(--weave-ikat),

    /* Warm base */
    linear-gradient(180deg, #a29683 0%, #6e6045 100%);    /* Ikat weave layer (parallax moves this one only) */

  background-repeat: no-repeat;

  /* cover = no tiling + always fills screen */
background-size:
  auto,
  auto,
  auto,
  auto,
  cover,
  600px 600px,
  auto;
  
  /* NOTE: 5th layer is weave. We apply parallax vars there */
  background-position:
    center,
    center,
    center,
    center,
    calc(50% + var(--weave-x)) calc(0% + var(--weave-y)),
    center;

  background-attachment: fixed;
}

/* =========================================================
   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);
}

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