.gs_icon {
    height: 17px;
    width: 17px;
  }
  .accordion {
    max-width: 42rem;
  }

  .acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    text-align: left;
  }

  .acc-title {
    font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: rgba(0,0,0,0.82);
  }

  .acc-arrow {
    display: inline-block;
    width: .75rem;
    line-height: 1;
    transition: transform 120ms ease-out;
    transform-origin: 50% 50%;
    margin: 0 .5rem;
  }

  /* Rotate the left arrow to point down when open */
  .acc-trigger[aria-expanded="true"] .acc-arrow {
    transform: rotate(90deg);
  }

  .acc-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-2px);
    transition:
      max-height 140ms ease-out,
      opacity 120ms ease-out,
      transform 120ms ease-out;
    padding: 0; /* horizontal padding stays consistent */
  }

  .acc-trigger[aria-expanded="true"] + .acc-panel {
    opacity: 1;
    transform: translateY(0);
    padding-top: 0.25rem;
    padding-bottom: 1.5rem;
  }

  /* Small hover/focus polish */
  .acc-trigger:hover {
    border-color: rgba(0,0,0,0.18);
  }
  .acc-trigger:focus-visible {
    outline: 2px solid rgba(0,0,0,0.25);
    outline-offset: 2px;
  }


  .tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-link {
  margin-right: 1rem;
  text-decoration: none;
  cursor: pointer;
  color: #A3B56C;
}

.tab-link.active {
  color: #F29F58;
}

.mudhook-menu-section-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1rem;
}

@media (min-width: 768px) {
    .mudhook-menu-section-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}








.mudhook-menu-image-column {
  width: 40%;
  margin-top: 0;
  padding-bottom: 100px;
  position: relative;
}



@media screen and (min-width: 1440px) {
  .mudhook-menu-image-wrap {
    /* margin-left: 105px; */
    /* top: 22.2vh; */
  }
}

@media screen and (min-width: 1280px) {
  .mudhook-menu-image-wrap {
    /* width: 300px;
    height: 450px; */
    /* margin-left: 67px; */
    /* top: 22.2vh; */
  }
}
.mudhook-menu-image-wrap {
  /* width: 300px;
  height: 450px; */
	width: 100%;
	height: auto;
  margin-top: 60px;
  /* margin-left: 57px; */
  padding: 0 0;
  position: sticky;
  /* top: 22.2vh; */
	top:150px;
  overflow: hidden;
}
.gs_content {
	overflow: unset!important;
}


.mudhook-menu-nav-container {
  display: flex;
  flex-wrap: wrap;
	margin-top: 2rem;
  flex-wrap: nowrap;
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}
.mudhook-menu-text-column {
  width: 60%;
}
.mudhook-menu-nav-food-peek {
  width: 50%;
  position: relative;
  overflow: hidden;
  line-height: 0;
  overflow: clip;      /* or overflow: hidden; */
}

.mudhook-menu-nav-food-peek-dots {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: auto;
	/* z-index: 0; */
}
.mudhook-menu-nav-food-peek-tear {
	position: relative;
	line-height: 0;
	/* z-index: 20; */
}
.mudhook-menu-nav-food-peek-food {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: auto;
	/* z-index: 10; */
}

@media (max-width: 991.98px) {
  .mudhook-menu-image-column {
    display: none;
  }
  .mudhook-menu-text-column {
    width: 100%;
  }
}



/* The reveal area */
.revealWrap{
	position:relative;
	/* min-height:520px; */
	height:auto;
	/* width:50%; */
	aspect-ratio:892/552;
}

/*
	This is the key: the image is fixed (background-attachment: fixed),
	but you only see it through the SVG mask (a small cutout shape).
*/
.reveal{
	position:relative;
	/* height:520px;
	width:min(980px, 100%); */
	height:auto;
	width:100%;
	aspect-ratio:892/552;
	margin-left:auto;
	border-radius:18px;
	isolation:isolate;
}

/* dotted paper behind the cutouts (optional, mirrors your recording) */
.reveal::before{
	content:"";
	position:absolute;
	inset:0;
	/* background:radial-gradient(rgba(0,0,0,.35) 2px, transparent 3px) 0 0/18px 18px; */

	background-image: url("../assets/menu-nav-dots.gif");
	/* opacity:.55; */
	/* border-radius:18px; */
}

/* fixed photo layer (masked) */
.reveal::after{
	content:"";
	position:absolute;
	inset:0;
	background-image: url("../assets/menu-nav-food.png");
	/* background-size:cover; */
	background-size: 50%;
	background-position:center;
	background-attachment:fixed; /* fixed image, scroll reveals different parts behind the cutout */

	/* Mask: 3 cutouts, similar to the recording */
	/* -webkit-mask-image: var(--cutout-mask);
	mask-image: var(--cutout-mask);
	-webkit-mask-repeat:no-repeat;
	mask-repeat:no-repeat;
	-webkit-mask-position:center;
	mask-position:center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;

	filter:saturate(1.05) contrast(1.05);
	border-radius:18px; */
}

/* .tornEdge{
	pointer-events:none;
	position:absolute;
	inset:0;
	z-index:2;
	background:rgba(0,0,0,0);
	-webkit-mask-image: var(--torn-mask);
	mask-image: var(--torn-mask);
	-webkit-mask-repeat:no-repeat;
	mask-repeat:no-repeat;
	-webkit-mask-position:center;
	mask-position:center;
	-webkit-mask-size:100% 100%;
	mask-size:100% 100%;
	background:linear-gradient(#f6f6f3, #ece9e0);
	opacity:.95;
	mix-blend-mode:screen;
} */



/*
	Inline SVG masks as CSS variables (data URIs).
	You can replace these paths with your exact cutout artwork.
*/
:root{
	--cutout-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 520'%3E%3Crect width='900' height='520' fill='black'/%3E%3Cg fill='white'%3E%3Cpath d='M558 74c-76-10-154 26-191 77-36 51-25 111 18 132 44 22 91-10 137-18 60-10 126 20 151 53 20 27 18 60-2 83-35 41-111 51-178 39-109-20-196-88-214-157-21-77 36-171 142-222 86-41 191-46 275-17 63 22 96 62 89 92-6 27-41 43-127 38z'/%3E%3Cpath d='M174 204c39-43 104-59 152-33 46 25 46 74 17 111-28 35-79 43-124 48-41 4-88 16-107 43-16 23-10 52 8 70 26 26 74 27 119 15 78-21 139-78 136-132-3-61-70-114-142-125-52-8-98 5-119 3-18-1-29-8-34-14-7-9-6-22 4-34 15-18 44-22 90 0z'/%3E%3Cpath d='M525 345c-50 2-101 21-131 53-29 31-22 68 12 83 34 15 73-8 108-17 46-12 97 3 122 23 20 16 24 38 9 57-22 27-73 38-120 34-79-7-149-47-163-93-16-52 26-116 96-150 60-29 133-34 193-19 43 11 67 31 66 49-1 19-30 29-92 30z'/%3E%3C/g%3E%3C/svg%3E");

	--torn-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 520'%3E%3Crect width='900' height='520' fill='black'/%3E%3Cg fill='white'%3E%3Cpath d='M166 196c23-27 55-44 91-52 22-5 44-8 66-5 18 2 32 7 45 14 8 4 17 10 21 17 4 7 1 15-5 22-7 8-19 15-31 19-15 5-29 6-44 8-30 4-62 13-85 32-10 9-18 20-19 33-1 14 5 28 16 38 25 23 65 28 100 22 34-6 67-22 91-43 12-10 22-22 27-35 5-12 6-26 1-38-9-20-33-35-58-44-43-16-93-19-138-6-55 16-97 57-100 103-3 44 30 83 73 98 46 16 100 7 147-16 24-12 46-28 62-47 7-9 13-18 16-27l0 0 32 38c-10 18-24 35-41 49-26 22-58 38-92 48-67 21-144 16-198-17-53-33-82-92-58-154 9-24 23-43 40-58z'/%3E%3Cpath d='M522 61c28-8 59-8 89-5 29 3 60 11 83 26 22 14 36 35 26 53-10 18-37 25-62 27-26 2-54 0-79 6-26 6-48 20-56 39-7 18 1 40 17 57 34 35 91 55 145 55 54 1 103-18 120-49 13-25 5-54-15-78-18-22-45-40-77-52-68-25-156-25-222 10-62 33-103 93-85 151 10 33 42 60 80 74 44 16 95 18 141 10 23-4 45-11 63-22l0 0 22 40c-25 14-53 23-82 28-62 10-127 6-185-18-52-22-95-63-101-115-11-88 69-167 178-202z'/%3E%3Cpath d='M520 336c22-6 45-8 67-6 21 2 44 7 60 18 15 10 24 24 18 37-6 12-25 17-44 18-20 1-41 0-59 4-19 4-35 14-41 26-5 12 1 26 12 37 24 22 63 34 100 34 38 0 72-11 84-30 9-15 4-34-10-49-13-14-31-25-53-32-47-15-109-14-153 8-41 21-67 58-56 95 6 21 27 39 53 48 29 10 62 11 94 6 16-3 31-7 44-14l0 0 16 28c-18 9-37 14-58 17-43 6-88 3-128-12-36-14-65-40-69-72-8-54 44-102 123-129z'/%3E%3C/g%3E%3C/svg%3E");
}









/* 
.mudhook-menu-nav-food-peak-bg {
	position: absolute;
  inset: 0;
  background-image: url("../assets/menu-nav-food.png");
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.mudhook-menu-nav-food-peak-content {
  position: relative;
  z-index: 1;
} */


/* .mudhook-menu-nav-tear {
  z-index: 30;
  position: relative;
}
.mudhook-menu-nav-dots {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 10;
} */

/* .mudhook-menu-nav-tear-container  {
	position: relative;
	overflow: hidden;
} */
/* .mudhook-menu-nav-tear-container::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../assets/menu-nav-food.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
} */





.mudhook-menu-nav-food-container {

	position: sticky;
  top: 0;
  height: 100vh;       /* sticks as a viewport-tall panel */
	background-image: url('../assets/menu-nav-food.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.mudhook-menu-nav-food {
	display: none;
  position: sticky;
  top: 0;
  right: 0;
  width: 100%;
  height: auto;
}





.mudhook-menu-section {
  margin-top: 2rem;
}
.mudhook-menu-section-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 2.5rem;
  color: var(--wp--preset--color--secondary, #f29f58);
}

.mudhook-menu-items {
  /* column-count: 2;
  column-gap: 2rem; */
    /* display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 2rem; */
  list-style: none;
  padding: 0;
  margin: 0;
}
.mudhook-menu-items + h3 {
	margin-top: 2rem;
}
.mudhook-menu-item + .mudhook-menu-item {
  margin-top: 1.25rem;
}
.mudhook-menu-items li {
  /* break-inside: avoid; */
}

.mudhook-menu-item-name {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.5rem;
}

.mudhook-menu-item-price {
  color: var(--wp--preset--color--accent-3, #A3B56C);
  font-weight: 700;
}
.mudhook-menu-item-head {
  line-height: 1.2;
}
.mudhook-menu-item-desc {
  line-height: 1.2;
  color: var(--wp--preset--color--accent-3, #A3B56C);
}
.t-panel-container {
  border: none;
}
.mudhook-menu-section-image {
  /* margin-left: -30px;
  margin-right: -30px; */
  line-height: 0;
}
.mudhook-menu-section-image img {
  width: 100%;
  height: auto;
}






.tabs {
	max-width: 1920px;
	margin: 0 auto;
}

/* Tab buttons row */
.tab-list {
	display: flex;
	gap: 1rem;
	align-items: stretch;
	flex-wrap: wrap;
}

.tab {
	appearance: none;
	background-color: var(--wp--preset--color--primary, #a3b56c);
	color: var(--wp--preset--color--contrastcolor, #153e2d);
  border: 0;
	border-radius: 0;
	padding: 0.25em 0.5em;
	cursor: pointer;
  font-size: 2rem;
  text-transform: uppercase;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	user-select: none;
}

.tab:hover {
	background-color: var(--wp--preset--color--secondary, #f29f58);
}

.tab:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 2px;
}

.tab[aria-selected="true"] {
	background-color: var(--wp--preset--color--secondary, #f29f58);
}

/* Full-width content area below */
.tab-panels {
	margin-top: 14px;
	border-radius: 0;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
	min-height: 140px;
}

.tab-panel[hidden] {
	display: none;
}























    :root{
      --max: 1140px;
      --gap: 28px;

      /* Dot matrix background */
      --dot-bg: #0f3a2a;
      --dot: rgba(255,255,255,0.12);
      --dot-size: 14px;

      /* Window sizing */
      --window-h: 420px;

      /* Content travel amount inside the window */
      --scroll-factor: 3.2; /* content is taller than window */
    }

   /* Sticky card */
    .sticky{
      position: sticky;
      top: 150px;
      /* border-radius: 18px; */
      overflow: visible; /* keep visible; mask handles clipping */
      /* border: 1px solid rgba(255,255,255,0.12); */
      /* background:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 1.2px) 0 0 / var(--dot-size) var(--dot-size),
        linear-gradient(var(--dot-bg), var(--dot-bg));
      box-shadow: 0 14px 40px rgba(0,0,0,0.35); */
    }

    .header{
      padding: 14px 14px 10px;
      font-size: 12px;
      opacity: 0.9;
      border-bottom: 1px solid rgba(255,255,255,0.10);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    /* Window area: stays dotted outside the mask */
    .window{
      position: relative;
      height: var(--window-h);
      overflow: hidden; /* ok: only clips internal moving content */
    }

    /*
      Reveal layer covers the whole window but only shows through the mask.
      Outside the mask stays transparent, so the dot matrix shows through.
    */
    .revealLayer::before{
      content:"";
      position:absolute;
      inset:0;
      background-image: url("https://wxbbt22uwt.wpdns.site/wp-content/plugins/mudhook-display-menu/assets/menu-nav-dots.gif");
    }

    .revealLayer{
      position: absolute;
      inset: 0;
      pointer-events: none;

      -webkit-mask-image: var(--mask);
      mask-image: var(--mask);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-position: center;
      mask-position: center;
    }

    .revealLayer{
      -webkit-mask-image: url("../assets/menu-nav-tear-mask.png?v=1");
      mask-image: url("../assets/menu-nav-tear-mask.png?v=1");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-position: center;
      mask-position: center;
    }

    /* Tall content that moves upward with scroll */
    .revealContent{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: calc(var(--window-h) * var(--scroll-factor));
      transform: translate3d(0, 0, 0);
      will-change: transform;

      /* Demo “photos” stacked top to bottom. Replace with your real images. */
      Xbackground:
        /* Top section */
        linear-gradient(140deg, rgba(255,214,165,0.92), rgba(160,196,255,0.92) 55%, rgba(189,178,255,0.92)) 0 0 / 100% 50% no-repeat,
        radial-gradient(circle at 70% 30%, rgba(255,255,255,0.18), transparent 55%) 0 0 / 100% 50% no-repeat,

        /* Bottom section */
        linear-gradient(140deg, rgba(183,255,216,0.88), rgba(125,211,252,0.88) 55%, rgba(196,181,253,0.88)) 0 100% / 100% 50% no-repeat,
        radial-gradient(circle at 30% 70%, rgba(0,0,0,0.20), transparent 60%) 0 100% / 100% 50% no-repeat;
      background-image: url('https://wxbbt22uwt.wpdns.site/wp-content/plugins/mudhook-display-menu/assets/menu-nav-food-big.png');
      background-size: 100%;

      filter: saturate(1.05) contrast(1.05);
    }

    /* Subtle edge inside the mask, no solid fill outside */
    .revealLayer::after{
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
      opacity: 0.9;

      -webkit-mask-image: var(--mask);
      mask-image: var(--mask);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-position: center;
      mask-position: center;
    }