/** Shopify CDN: Minification failed

Line 253:0 Unexpected "<"
Line 322:0 Unexpected "<"
Line 326:10 Expected ":"
Line 327:14 Expected ":"
Line 330:9 Expected identifier but found "addEventListener("

**/
/* =========================================================
   PRODUCT PAGES (NON-BAGELS) — tame huge hero images
   Safe: does NOT affect product.bagels
========================================================= */

/* 1) Constrain the left media column so it can't get massive */
@media (min-width: 990px){
  body.template-product:not([class*="bagels"]) .section-main-product .product{
    /* Dawn is already grid; we just define sane column sizes */
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr) !important;
    column-gap: 56px !important;
    align-items: start !important;
  }

  body.template-product:not([class*="bagels"]) .section-main-product .product__media-wrapper{
    max-width: 520px !important;
    width: 100% !important;
  }
}

/* 2) Cap the media box height so tall images don't dominate */
body.template-product:not([class*="bagels"]) .product-media-container{
  max-height: 520px !important;   /* try 460–600 */
}

/* 3) Make the image fit inside the box (less “in your face”) */
body.template-product:not([class*="bagels"]) .product__media img,
body.template-product:not([class*="bagels"]) .product__media .media img,
body.template-product:not([class*="bagels"]) .product__media-item img{
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}
/* =====================================================
   PRODUCT PAGE IMAGE SCALE (EXCEPT BAGELS)
===================================================== */

@media (min-width: 990px){
  body:not(:has(.cnc-bagels-page)) .section-main-product .product{
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr) !important;
    column-gap: 56px !important;
    align-items: start !important;
  }
}

body:not(:has(.cnc-bagels-page)) .product-media-container{
  max-height: 520px !important;
}

body:not(:has(.cnc-bagels-page)) .product__media img,
body:not(:has(.cnc-bagels-page)) .product__media .media img,
body:not(:has(.cnc-bagels-page)) .product__media-item img{
  object-fit: contain !important;
  object-position: center center !important;
}
/* =========================================================
   PRODUCT PAGE: CENTER + CAP WIDTHS (minimal Dawn-safe)
   Goal: stop "pushed left" + stop overly wide text area
   ========================================================= */

/* 1) Center the whole product section + cap max width */
.section-main-product .page-width{
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2) Make the 2-column layout feel balanced (desktop only) */
@media (min-width: 990px){
  .section-main-product .product{
    /* keep Dawn grid but make columns more intentional */
    grid-template-columns: minmax(0, 640px) minmax(0, 460px) !important;
    column-gap: 56px !important;
    justify-content: center !important; /* THIS stops the “everything left” feel */
    align-items: start !important;
  }

  /* 3) Keep each column centered within its grid cell */
  .section-main-product .product__media-wrapper{
    justify-self: center !important;
    width: 100% !important;
  }

  .section-main-product .product__info-wrapper{
    justify-self: center !important;
    width: 100% !important;
  }
}
/* PRODUCT PAGE: center layout + stop wide runway (Dawn-safe) */
main .product{
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 990px){
  main .product{
    grid-template-columns: minmax(0, 640px) minmax(0, 460px) !important;
    column-gap: 56px !important;
    justify-content: center !important;
    align-items: start !important;
  }

  main .product__media-wrapper,
  main .product__info-wrapper{
    justify-self: center !important;
    width: 100% !important;
  }
}
/* =========================================================
   PRODUCT PAGE: STOP GIANT IMAGES (Dawn-safe)
   - Caps the media column width
   - Caps the image box height
   - Keeps layout centered
   Does NOT affect bagel builder logic
========================================================= */

/* Center the whole product block */
main .product{
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Cap the left media column + right info column */
@media (min-width: 990px){
  main .product{
    grid-template-columns: minmax(0, 560px) minmax(0, 500px) !important;
    column-gap: 56px !important;
    justify-content: center !important;
    align-items: start !important;
  }

  main .product__media-wrapper{
    max-width: 560px !important;
    width: 100% !important;
    justify-self: end !important;
  }

  main .product__info-wrapper{
    max-width: 500px !important;
    width: 100% !important;
    justify-self: start !important;
  }
}

/* Cap the media “frame” so the image can’t grow forever */
main .product__media,
main .product__media-item{
  max-height: 560px !important;
}

/* Keep cutouts looking clean (no weird cropping) */
main .product__media img,
main .product__media-item img{
  object-fit: contain !important;
  object-position: center center !important;
}

/* Mobile: keep it reasonable */
@media (max-width: 989px){
  main .product__media,
  main .product__media-item{
    max-height: 420px !important;
  }
}
/* HERO: Mobile tune-up (kicker size refinement) */
@media (max-width: 749px) {

  .hero-split__kicker {
    font-size: 20px !important;   /* try 18–22px range */
    line-height: 1.1 !important;
    letter-spacing: 0.5px !important;
  }

}
/* ==============================
   MOBILE HEADER LOGO ADJUSTMENT
   ============================== */

@media (max-width: 749px){

  /* Slightly reduce logo size */
  .header__heading-logo,
  .header__heading-logo-wrapper img{
    max-width: 150px !important;  /* try 140–160px */
    height: auto !important;
  }

  /* Force proper centering */
  .header__heading{
    display: flex !important;
    justify-content: center !important;
  }

}
@media (max-width: 749px){

  .header__heading{
    margin-left: auto !important;
    margin-right: auto !important;
  }

}
/* Mobile HOME only: nudge logo slightly right */
@media (max-width: 749px){
  body.template-index .header__heading-link{
    transform: translateX(8px);
  }
}
@media (max-width: 749px){
  body.template-index .header__heading-logo{
    max-width: 150px; /* tweak 140–165 */
    height: auto;
  }
}
/* Mobile: Keep "Where to Find Us" on one line + cleaner scale */
@media (max-width: 749px){

  .where-to-find-us-template--26173589422401__where_to_find_us_FdDzer 
  .where-find-us__heading{
    font-size: 30px !important;   /* adjust 28–32 if needed */
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
  }

}
/* MOBILE: force "Where to Find Us" to stay on one line */
@media (max-width: 749px){
  /* target the whole section (id contains where_to_find_us) */
  [id*="where_to_find_us"] .where-find-us__heading,
  [id*="where_to_find_us"] .where-find-us__heading *{
    white-space: nowrap !important;
  }

  /* make it fit better */
  [id*="where_to_find_us"] .where-find-us__heading{
    font-size: 28px !important;      /* tweak 26–30 */
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }
}
<div id="cnc-announcement-popup" class="cnc-popup">
  <div class="cnc-popup-inner">
    <button class="cnc-popup-close" onclick="closeCncPopup()">×</button>
    <h3>Pickup & Order Cutoff</h3>
    <p>
      Orders must be placed at least <strong>48 hours in advance</strong>.<br>
      Pickup available at 3 locations weekly.
    </p>
    <p style="margin-top:10px;">
      🥯 Fresh bagels baked weekly — reserve yours before they sell out!
    </p>
    <a href="/products/bagels-build-your-own" class="cnc-popup-btn">
      Build Your Order
    </a>
  </div>
</div>

<style>
.cnc-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
}
.cnc-popup.active {
  opacity: 1;
  visibility: visible;
}
.cnc-popup-inner {
  background: #fff;
  max-width: 420px;
  width: 90%;
  padding: 30px 24px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.cnc-popup-inner h3 {
  margin-bottom: 10px;
}
.cnc-popup-btn {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 22px;
  background: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
}
.cnc-popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
}
@media (max-width: 749px){
  .cnc-popup-inner{
    padding: 24px 20px;
  }
}
</style>

<script>
function closeCncPopup(){
  document.getElementById('cnc-announcement-popup').classList.remove('active');
  localStorage.setItem('cncPopupClosed', Date.now());
}

document.addEventListener("DOMContentLoaded", function(){
  const lastClosed = localStorage.getItem('cncPopupClosed');
  const now = Date.now();
  const oneDay = 24 * 60 * 60 * 1000;

  if(!lastClosed || (now - lastClosed) > oneDay){
    setTimeout(function(){
      document.getElementById('cnc-announcement-popup').classList.add('active');
    }, 700);
  }
});
</script>