/* ==========================================================================
   Mobile polish
   Loaded last in <head> (after page-level <style> blocks) so it can refine
   the Webflow export without editing the generated stylesheet.
   ========================================================================== */

/* Recipe galleries ship a placeholder video tile with hidden="hidden" and an
   empty <img src>; .recipe-other-image's display rule was overriding it and
   rendering a broken "Video Thumbnail" image. */
.recipe-other-image[hidden] {
  display: none !important;
}

/* Hamburger fallback for pages where the Lottie menu icon never initialises
   (the events pages have no IX2 binding, so the button rendered empty). */
.nav-menu-button-lottie:empty {
  position: relative;
  width: 1.75rem;
  min-width: 26px;
  height: 1.75rem;
  min-height: 26px;
  color: #e7b416;
}

.nav-menu-button-lottie:empty::before,
.nav-menu-button-lottie:empty::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  height: 3px;
  border-radius: 3px;
  background-color: currentColor;
  transition: transform .3s ease, top .3s ease, box-shadow .2s ease;
}

.nav-menu-button-lottie:empty::before {
  top: 22%;
  box-shadow: 0 calc(.28 * max(1.75rem, 26px)) 0 currentColor;
}

.nav-menu-button-lottie:empty::after {
  top: 78%;
  transform: translateY(-100%);
}

.w--open > .nav-menu-button-lottie:empty::before,
.w--open > .nav-menu-button-lottie:empty::after {
  top: 50%;
  box-shadow: none;
}

.w--open > .nav-menu-button-lottie:empty::before {
  transform: translateY(-50%) rotate(45deg);
}

.w--open > .nav-menu-button-lottie:empty::after {
  transform: translateY(-50%) rotate(-45deg);
}

/* ---- Recipe share widget: inline strip instead of a sticky overlay ----
   Webflow floats it over the recipe text at every width up to 991px, so the
   strip has to start at the same breakpoint or tablets keep the overlap. */
@media screen and (max-width: 991px) {
  .share-blog-container {
    position: static;
    inset: auto;
    width: 100%;
    margin-top: 2rem;
    pointer-events: auto;
  }

  .share-blog-wrapper {
    position: static;
    width: 100% !important;
    height: auto !important;
    flex-flow: row wrap;
    justify-content: center;
    gap: .5rem 4px;
    padding: 1rem .75rem;
    overflow: visible;
    cursor: auto;
    opacity: 1 !important;
    box-shadow: none;
  }

  .share-blog-text {
    display: block !important;
    width: 100%;
    font-size: 15px;
  }

  .share-blog-text.share {
    display: none !important;
  }

  .share-blog-link {
    width: 40px;
    height: 40px;
    padding: 9px;
  }
}

@media screen and (max-width: 767px) {
  /* ---- Readable body copy (1rem is ~12.5px at phone widths) ---- */
  .events-heading-wrapper p,
  .event-detail-description p,
  .event-detail-subtitle,
  .bco-intro,
  .bco-sizes-list li {
    font-size: 15px;
    line-height: 1.6;
  }

  .event-card-subtitle,
  .event-detail-back,
  .recipe-subheading {
    font-size: 14px;
  }

  /* ---- Events hero: paragraph was capped at 50% and butted the heading ---- */
  .events-heading-wrapper .heading-style-h1 {
    margin-bottom: .75rem;
  }

  .events-heading-wrapper p {
    max-width: 36rem !important;
  }
}

@media screen and (max-width: 479px) {
  /* ---- "Our Products" grid: two up instead of one narrow column ---- */
  html body .section.is-categories .brands-static-grid {
    margin-top: 1.5rem;
    margin-bottom: 0;
  }

  html body .section.is-categories .brands-static-grid .swiper-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem .75rem;
  }

  html body .section.is-categories .brands-static-grid .product-image-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
  }

  /* Odd count: centre the last card under the others. */
  html body .section.is-categories .brands-static-grid .swiper-slide:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - .375rem);
  }

  /* ---- Products page picker: 3 + 2 tappable tiles, not five slivers ---- */
  .section.is-everyday-video div:has(> .product-link) {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: .75rem !important;
  }

  .section.is-everyday-video .product-link {
    flex: 0 0 calc((100% - 1.5rem) / 3) !important;
    height: auto !important;
    aspect-ratio: 3 / 4;
  }

  /* ---- Recipe cloches: two per row, scaled to fit ---- */
  .recipes-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem .75rem;
  }

  .recipes-list .recipe-link {
    gap: .5rem;
  }

  /* Height drops the headroom reserved for the open lid, which only shows on
     hover. */
  .recipes-list .recipe-cloche-wrapper {
    height: 13rem;
    zoom: .62;
  }

  .recipes-list .recipe-title {
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
  }
}

/* No hover on touch screens: keep cloches closed. recipes.html drives these
   layers with an inline script, but the "Other recipes" lists on detail pages
   don't, so the open lid and food showed through. The food image is the only
   link in the cloche, so it stays as an invisible tap target over the dome. */
@media (hover: none) and (max-width: 767px) {
  .recipes-list .cloche-lid-open,
  .recipes-list .food-smoke {
    display: none;
  }

  .recipes-list .recipe-food {
    z-index: 6;
    opacity: 0;
  }
}