=Added conditional logic. Skeletoned a block to select a particular meta fo...

Jake Vanderwerf

2026-09-06 3e4e3db64b366028845cfd610c5b17f26bd062ee

 src/menu/style.scss

@@ -1,15 +1,20 @@
.info h4 {
   margin: 0;
   font-weight: var(--fw-h);
   font-size: var(--txt-medium);
@media (min-width: 600px) {
   #wpadminbar ~ .wp-site-blocks nav.menu {
      top: calc(var(--btn) + 1rem + 16px);
   }
}

.field.quantity.quantity > label {
   position: absolute;
   left: var(--offScreen);
.scroll-up nav.menu {
   top: -2rem;
}
nav.menu {
   max-width: 100%;
   position: sticky;
   top: calc(var(--btn));
   z-index: 5;
   grid-column: full;
   background-color: rgba(var(--base-50), var(--op-6));
   box-shadow: var(--shdw-down) rgba(var(--base), var(--op-45));

   ul {
      --justify: flex-start;
      li {
@@ -31,41 +36,172 @@
   }
}

   .menu-item.menu-item {
      margin: var(--sp2);
      max-width: none;
      &:target {
         outline: none;
         background: transparent;
         border: 1rem solid rgb(var(--action-0));
         h3 {
            color: rgb(var(--action-0));
         }
.menu-item.menu-item {
   margin: var(--sp2);
   padding-top: var(--sp4);
   max-width: none;
   &:target {
      outline: none;
      background: transparent;
      border: 1rem solid rgb(var(--action-0));
      h3 {
         color: rgb(var(--action-0));
      }
      +.menu-item {
         padding-top: var(--sp4);
         border-top: 1px solid rgb(var(--base-200));
      }
   }

      .header {
         flex-wrap:nowrap;
         figure {
            max-width: 30vw!important;
            aspect-ratio: 1;
            object-fit: cover;
         }
         h3, p {
            margin: 0;
            width: max-content;
         }
      }
   +.menu-item {
      border-top: 1px solid rgb(var(--base-200));
   }

      .gallery figure {
         max-width: 15vw!important;




   .price s {
      font-size: var(--txt-small);
      vertical-align: top;
      display: inline-block;
      padding-right: 1rem;
   }
   .price:has(s) {
      color: rgb(var(--secondary-0));

      s {
         color: rgb(var(--contrast));
      }
   }

   .tags.left {
      left: -1rem;

      .sale, .featured {
         display: flex;
         --gap: .5rem;
         padding: .125rem .5rem;
         text-transform: uppercase;
         font-weight: var(--fw-h-bold);
         width: max-content;
      }
      .sale {
         background-color: rgb(var(--secondary-0));
         color: rgb(var(--secondary-contrast));
      }
      .featured {
         background-color: rgb(var(--action-0));
         color: rgb(var(--action-contrast));
      }
   }

   .header {
      flex-wrap:nowrap;
      figure {
         max-width: 30vw!important;
         aspect-ratio: 1;
         object-fit: cover;
      }
      figcaption {
         display: none;
      h3, p {
         margin: 0;
         width: max-content;
      }
   }

   .gallery figure {
      max-width: min(15vw, 8rem) !important;
      aspect-ratio: 1;
      object-fit: cover;
   }
   figcaption {
      display: none;
   }

   .info {
      --gap: 0.5rem 0;
      h4 {
         margin: 0;
         font-weight: var(--fw-h);
         font-size: var(--txt-medium);
      }
      .row {
         --gap:1rem;

         > a, figure, h4 {
            position: sticky;
            top: calc(var(--btnbtn) + 2.5rem);
            background-color: rgb(var(--base-50));
            z-index: 1;
         }
         >div {
            flex: 1;
         }
         > a {
            white-space: nowrap;
            width: max-content;
         }
         figure {
            max-width: min(10vw, 5rem) !important;
            aspect-ratio: 1;
            object-fit: cover;
            margin: 0;
            margin-inline: 0;
         }
      }

      .sale-until,
      .out-of-stock {
         font-size: var(--txt-x-small);
         font-style: italic;

         i.icon {
            vertical-align: top;
            padding-right: 1rem;
            color: rgb(var(--secondary-0));
         }
      }
   }

   .field.quantity.quantity > label {
      position: absolute;
      left: var(--offScreen);
   }

   @media (max-width: 768px) {
      &:target {
         border: 0;
      }
      .header.row {
         flex-direction:column;

         > figure {
            aspect-ratio: 16/9;
            max-width: 100%!important;
         }
      }
      .info {
         padding-top: 1rem;

         .row {
            --gap: 0;

            &.nowrap.nowrap {
               --wrap: wrap!important;
            }
            + .row {
               border-top: 1px solid rgb(var(--base-200));
               padding-top: .5rem;
            }
            > figure {
               order: 2;
               max-width: min(25vw, 6rem)!important;
            }
            > a {
               order: 3;
            }
         }

      }

      .gallery {
         gap: .25rem;
      }
   }
}