/* Responsive refinements shared by every page. Desktop branding is retained. */
.product-short-description .button { margin-right: 0; max-width: 100%; white-space: normal; }
.header-phone-link { min-height: 44px; }
.social-feed { max-width: 500px; }
.copyright-footer { overflow-wrap: anywhere; }
.site-drawer { height: 100vh; height: 100dvh; max-height: 100dvh; overscroll-behavior: contain; }
.site-drawer .dialog-close, .product-image-dialog .dialog-close { min-width: 44px; min-height: 44px; line-height: 44px; }
.site-drawer .nav > li > a { min-height: 48px; }
.site-drawer .social-icons a.icon { display: inline-flex; width: 44px; height: 44px; margin-right: 0; align-items: center; justify-content: center; }
.product-image-dialog { width: max-content; max-width: min(800px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 44px 16px 16px; }
.product-image-dialog img { max-width: 100%; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); object-fit: contain; }
.booklet-page-links a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

/* Switch to the compact navigation before desktop links start wrapping. */
@media (max-width: 1023px) {
  #header .hide-for-medium { display: none !important; }
  #header .show-for-medium { display: block !important; }
  #masthead { height: 104px; }
  #masthead #logo { width: 140px; flex: 0 0 140px; margin: 0 15px; order: 2; }
  #masthead #logo img { width: auto; height: auto; max-width: 100px; max-height: 100px; margin-top: 0; }
  #masthead .header-inner > .show-for-medium.flex-left { order: 1; flex: 1 1 0; min-width: 0; }
  #masthead .header-inner > .show-for-medium.flex-right { order: 3; flex: 1 1 0; min-width: 0; }
  #masthead .nav-icon > a { display: inline-flex; min-width: 44px; min-height: 44px; padding: 0; align-items: center; justify-content: center; }
  #top-bar .html_topbar_left { font-size: clamp(12px, 2.3vw, 14px); line-height: 1.4; }
  #hero-mobile-wrapper { display: block !important; }
  #hero-desktop-wrapper { display: none !important; }
  #hero-mobile { padding-top: 560px; padding-top: clamp(520px, 70svh, 600px); }
  #hero-mobile-text { width: 90%; max-width: 680px; }
  #hero-mobile-text h2 { font-size: clamp(28px, 5vw, 38px); line-height: 1.2; }
  #hero-mobile-text h1 { font-size: clamp(34px, 8vw, 56px); line-height: 1.1; }
  #hero-mobile-text .col-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
  #hero-mobile-text .button { width: 100%; max-width: 320px !important; min-height: 44px; margin: 5px 0 !important; padding: 10px 16px; font-size: 16px; line-height: 1.4; white-space: normal; }
  #events-mobile-spacer { display: none !important; }
  .booklet-intro { padding-top: 32px; }
}

/* Keep text and photos readable rather than squeezing them into narrow columns. */
@media (max-width: 767px) {
  .home #hours .medium-6, .home #events .medium-6, .home #about .medium-6,
  .events-page #main .medium-6 { max-width: 100%; flex-basis: 100%; }
  .events-page #main .col-inner.dark h3 a { display: block; padding: 10px 12px; line-height: 1.4; }
  .catalog-page .woocommerce-ordering { max-width: 100%; }
  .catalog-page .orderby { min-height: 44px; max-width: 100%; font-size: 16px; }
  .catalog-page .filter-button { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; }
  .catalog-page .meta-location-info { max-width: 100%; font-size: 14px; line-height: 1.4; }
}

@media (max-width: 549px) {
  body { font-size: 112.5%; }
  #masthead { height: 88px; }
  #masthead #logo { width: 112px; flex-basis: 112px; margin: 0 10px; }
  #masthead #logo img { max-width: 86px; max-height: 86px; }
  .mobile-nav .header-phone-link { flex-direction: row; align-items: center; justify-content: flex-end; gap: 0; font-size: clamp(12px, 3.6vw, 14px); white-space: nowrap; }
  .booklet-intro .breadcrumbs { font-size: 14px; }
  .booklet-actions .button { min-height: 44px; font-size: 14px; line-height: 1.4; padding: 12px; }
  .product-short-description .button { min-height: 44px; font-size: 14px; padding: 10px 12px; }
  .product-summary .price { font-size: 1.35em; }
  .events-page #main h1 { font-size: clamp(25px, 7vw, 31px); }
  .events-page #content { padding-top: 10px; }
}