/* Phone-first fixes, loaded last on every page (scripts/site_seo.py), so it wins over
   the page-type stylesheets. Desktop is unchanged except the hidden menu button. */

.mnav-toggle, .mnav-panel, .mnav-only { display: none; }
img, video { max-width: 100%; }

@media (max-width: 720px) {
  html, body { overflow-x: clip; }
  body { font-size: 16px; -webkit-text-size-adjust: 100%; }

  /* ---------- header: logo · menu · cart ---------- */
  .site-header__minimum { display: none !important; }          /* shown in the cart instead */
  .site-header { position: sticky; top: 0; z-index: 60; }
  .site-header .site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px !important; flex-wrap: nowrap; }
  .site-header .wordmark { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; flex: 0 1 auto; }
  .site-header .wordmark__text { white-space: nowrap; font-size: 17px !important; letter-spacing: 0.04em !important; }
  .site-header .wordmark__badge { display: none; }
  .site-header .header-actions { display: flex; align-items: center; gap: 8px !important; flex: 0 0 auto; margin: 0 !important; }
  .site-header .header-actions > :not(.mnav-toggle):not(.cart-button):not(#cart-button) { display: none !important; }
  .site-header .header-actions > a.cart-button:not([href*="cart"]):not(.mnav-cart) { display: none !important; } /* "Shop" pills: in the menu now */
  .mnav-only { display: inline-flex; }
  .btn, .btn:hover { text-decoration: none !important; }
  .site-header .cart-button, .site-header #cart-button { display: inline-flex !important; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px !important; margin: 0 !important; font-size: 16px !important; text-decoration: none !important; }
  .mnav-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--line, #e3d8c4); border-radius: 999px; background: #fff; color: var(--ink, #2c2620); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
  .mnav-toggle__bars, .mnav-toggle__bars::before, .mnav-toggle__bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; content: ""; position: relative; }
  .mnav-toggle__bars::before { position: absolute; top: -6px; }
  .mnav-toggle__bars::after { position: absolute; top: 6px; }
  .mnav-open .mnav-toggle__bars { background: transparent; }
  .mnav-open .mnav-toggle__bars::before { top: 0; transform: rotate(45deg); }
  .mnav-open .mnav-toggle__bars::after { top: 0; transform: rotate(-45deg); }
  .mnav-panel:not([hidden]) { display: block; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 70px); overflow-y: auto; padding: 8px 16px 16px; background: var(--cream, #faf6ee); border-bottom: 1px solid var(--line, #e3d8c4); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); }
  .mnav-panel a, .mnav-panel summary { display: flex !important; align-items: center; min-height: 48px; padding: 0 4px !important; border: 0 !important; border-bottom: 1px solid var(--line, #ece3d3) !important; border-radius: 0 !important; background: none !important; color: var(--ink, #2c2620) !important; font-size: 17px !important; font-weight: 600; text-decoration: none; box-shadow: none !important; }
  .mnav-panel a[aria-current="page"] { color: var(--brand, #7a5c2b) !important; }
  .mnav-panel, .mnav-panel * { text-align: left !important; }
  .mnav-panel a, .mnav-panel summary { justify-content: flex-start !important; }
  .mnav-panel .currency-select { display: block !important; width: 100% !important; max-width: none !important; height: 48px !important; min-height: 48px; padding: 0 12px !important; margin: 10px 0 4px; font-size: 16px !important; }
  .mnav-panel .dept-menu { display: block !important; }
  .mnav-panel .dept-menu__panel { position: static !important; display: block; width: auto !important; box-shadow: none !important; border: 0 !important; padding: 0 0 8px 8px !important; }
  .mnav-panel .dept-menu__panel a { min-height: 44px; font-size: 16px !important; border-bottom: 0 !important; }
  .mnav-panel .dept-menu__long { display: inline !important; }
  .mnav-panel .dept-menu__short { display: none !important; }
  .mnav-panel__site { margin-top: 6px; }

  @media (max-width: 380px) {                                    /* smallest phones: icon-only menu button */
    .mnav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .mnav-toggle { padding: 0 13px; }
    .site-header .cart-button, .site-header #cart-button { padding: 0 12px !important; }
  }

  /* ---------- readable text ---------- */
  /* the flip-through diaries keep their own sizes: their pages are a fixed height */
  :is(p, li, dd, td, th, figcaption, blockquote, label, .recipe-note, .recipe-meta):not(.diary-book *) { font-size: max(16px, 1em); }
  input, select, textarea { font-size: 16px !important; }           /* also stops iOS zooming into fields */
  .pack-card__title, .pack-card__meta, .post-card__excerpt, .post-card__more, .province-chip,
  .template-card__desc, .template-card__cta, .diary-book-card__desc, .diary-book-card__cta, .recipe-card__meta,
  .fa-contact-label, .contact-alt, .recipe-diary-link, .dept-tile__desc, .featured-pick__description,
  .aisle-sign__tagline, .hero__free-links, .recipe-crumbs, .pets-crumbs, .studio-crumbs, .breadcrumb,
  .recipe-nutrition td, .recipe-nutrition th, .article-table td, .article-table th, .biz-card p { font-size: 16px !important; }
  .hero--home .hero__copy > p:not(.hero__free-links) { font-size: 16px !important; }
  .diary-switch { font-size: 16px !important; line-height: 1.4; }
  .diary-switch a { display: inline-flex; align-items: center; min-height: 44px; }
  .hero__highlights a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px !important; }
  .pill, .post-card__eyebrow, .aisle-sign__number, .price-sticker, .featured-pick__link { font-size: 13px !important; } /* small labels, still legible */

  /* ---------- 44px tap targets ---------- */
  .btn, button, .cart-button, select, input[type="submit"], input[type="email"], input[type="text"], .fa-contact-input,
  .province-chip, .diary-tab, .diary-recipe__back, .biz-card__btn, .tea-order button { min-height: 44px; }
  .btn, .biz-card__btn { display: inline-flex; align-items: center; justify-content: center; font-size: 16px !important; }
  .site-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
  .site-footer a, .site-footer button, .footer-contact-btn { display: inline-flex !important; align-items: center; min-height: 44px; padding: 0 8px !important; font-size: 16px !important; }
  .recipe-crumbs, .pets-crumbs, .studio-crumbs, .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 0; line-height: 1.2; }
  .recipe-crumbs a, .pets-crumbs a, .studio-crumbs a, .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .recipe-toc a, .diary-spread__page, .pet-back a, .pet-back, .recipe-diary-link a, .terms-check a { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---------- no sideways scrolling ---------- */
  table { max-width: 100%; }
  .article-table, .compare-wrap, .recipe-nutrition { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}