/* Mobile build (design/mobile pass-1 + pass-2, SMALL-PHONE-RULES.md).
   Loaded last on every page. Every rule sits inside a phone media query
   (max-width 720px, or a short landscape viewport for the landing only), so
   desktop layouts at 721px and wider with normal heights are unchanged. */

/* Landing: one vertical column sized to the visible height.
   Phones (720px wide or less) and short landscape screens (540px tall or less). */
@media (max-width: 720px), (max-height: 540px) {
  #landing {
    min-height: 100vh;
    min-height: 100svh;
    justify-content: flex-start;
    align-items: center;
    padding: 0 max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  /* Spacer above the lockup (grows most, so the lockup sits a little above center like the comp). */
  #landing::before {
    content: "";
    flex: 5 1 0;
    min-height: 16px;
    order: 0;
  }
  #landing .lockup {
    order: 1;
    flex: none;
    width: min(340px, 88vw, 46vh);
    width: min(340px, 88vw, 46svh);
    height: auto;
    aspect-ratio: 820 / 540;
    max-height: none;
    margin: 0;
  }
  /* CTA: in flow under the lockup. At least 24px under the W; the slot grows
     and keeps the line at its bottom so it sits nearer the cue, as in the comp. */
  #landing .cta-slot {
    order: 2;
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    flex: 3.5 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    max-width: 340px;
    padding-top: 24px;
  }
  #landing .cta-slot .cta-line { font-size: 14px; letter-spacing: 0.05em; }
  #landing .cta-line .cta-part { white-space: nowrap; }
  /* Spacer between CTA and cue: at least 20px. */
  #landing::after {
    content: "";
    order: 3;
    flex: 1 1 0;
    min-height: 20px;
  }
  #landing .scroll-hint {
    order: 4;
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    flex: none;
  }
}
@media (max-width: 379px) {
  #landing .cta-slot .cta-line { font-size: 13px; letter-spacing: 0.04em; }
}
/* Under 600px visible height: chevron only. html.vh-short is set by nav.js from
   window.innerHeight, which follows Safari's toolbars. */
@media (max-width: 720px) and (max-height: 599px), (max-height: 540px) {
  #landing .scroll-hint span { display: none; }
}
@media (max-width: 720px), (max-height: 540px) {
  html.vh-short #landing .scroll-hint span { display: none; }
}

/* Fixed home chrome: when a tall section is scrolled mid way, content passes
   under the hamburger bar, so the bar gets a soft cream film (nav.js toggles
   .chrome--over-content). At a section top it stays transparent like the comps. */
@media (max-width: 720px), (max-height: 540px) {
  .chrome--fixed {
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
  }
  .chrome--fixed.chrome--over-content {
    background: rgba(244, 241, 235, 0.86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(17, 17, 17, 0.06);
  }
}

/* ==== Phones (portrait up to 720px wide, plus short landscape phones up to
   1100px wide, which would otherwise get the tall desktop tiles) ==== */
@media (max-width: 720px), (max-height: 540px) and (max-width: 1100px) {
  /* Chrome: 44x44 hit areas, icons stay where the comps draw them. */
  .chrome {
    height: 56px;
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  }
  .hamburger {
    width: 44px;
    height: 44px;
    padding: 14px 10px;
    flex: none;
  }
  .chrome-right { gap: 4px; padding-right: 10px; }
  .chrome-right--home { padding-right: 0; }
  .cart-link { width: 44px; height: 44px; }
  .cart-link svg { width: 20px; height: 20px; }
  .cart-count { top: 7px; right: 5px; min-width: 14px; height: 14px; font-size: 8px; padding: 0 3px; }
  .mark { width: 34px; height: 34px; }

  /* Drawer: cream, full width, close button where the hamburger was. */
  .drawer-panel {
    width: 100%;
    padding: 6px max(16px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .drawer-close {
    position: relative;
    align-self: flex-start;
    width: 44px;
    height: 44px;
    margin: 0 0 20px;
    padding: 0;
    font-size: 0;
    color: transparent;
    letter-spacing: 0;
    flex: none;
  }
  .drawer-close::before,
  .drawer-close::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 21px;
    width: 24px;
    height: 1.5px;
    background: #111;
    border-radius: 1px;
    transform: rotate(45deg);
  }
  .drawer-close::after { transform: rotate(-45deg); }
  .drawer-links { padding-left: 8px; gap: 8px; }
  .drawer-links a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 6px 0;
    font-size: 26px;
  }
  .drawer-foot { padding: 24px 0 0 8px; }

  /* Added toast (Design): just below the 56px top bar and the top safe area,
     centered with 16px side margins. cart.js nudges it further down if it
     would ever cover a size button, Add to cart or the cart icon. */
  .toast {
    top: calc(56px + env(safe-area-inset-top, 0px) + 8px);
    bottom: auto;
    left: 16px;
    right: 16px;
    transform: none;
    max-width: none;
    text-align: center;
    white-space: nowrap;
    font-size: 11px;
    padding: 12px 18px;
  }

  /* Breadcrumb links: 44px hit area without moving the text. */
  /* 12px minimum and WCAG AA (4.5:1) on cream. */
  .breadcrumb {
    font-size: 12px;
    letter-spacing: 0.10em;
    margin: 6px 0 10px;
    line-height: 1.2;
  }
  .breadcrumb a,
  .breadcrumb .sep { color: rgba(17,17,17,0.68); }
  .breadcrumb .current { color: rgba(17,17,17,0.86); }
  .breadcrumb .sep { margin: 0 8px; }
  /* The hit area hangs below the text so it stays 8px clear of the
     hamburger and cart buttons above it. */
  .breadcrumb a {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 2px 8px 0;
    margin: -2px -8px -31px;
    vertical-align: top;
  }

  /* ==== Home overlays (Menu / About / Contact on mountains) ==== */
  .home-section--overlay {
    padding: 64px max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left));
  }
  .section-title { font-size: 28px; }
  .section-meta {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
  }
  #home-menu .section-header,
  .cream-page:not(.about-cream):not(.contact-cream) .section-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
    gap: 10px;
    flex-wrap: nowrap;
  }

  /* Menu rows (home overlay and cream /menu). Rows keep the comp's 128px
     height and ~78% jar fill; on short screens the section grows instead. */
  .sauce-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 0 auto;
  }
  .tile {
    flex: 1 0 128px;
    min-height: 128px;
    flex-direction: row;
    align-items: stretch;
  }
  .tile-art,
  .cream-page .tile-art {
    position: relative;
    width: 96px;
    height: auto;
    flex-shrink: 0;
    padding: 4px;
    border-bottom: none;
    border-right: 1px solid rgba(17, 17, 17, 0.06);
  }
  .tile-art .jar-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 78%;
    width: auto;
    max-width: 88%;
  }
  .tile-body {
    padding: 10px 14px;
    justify-content: center;
    gap: 4px;
    min-width: 0;
  }
  .tile-name { font-size: 16px; line-height: 1.2; }
  .tile-name br { display: none; }
  .tile-price { font-size: 12px; }
  .tile-hint { font-size: 9px; margin-top: 2px; padding-top: 0; }
  .footer-note { margin-top: 12px; flex-wrap: nowrap; }
  .footer-note p { font-size: 10px; letter-spacing: 0.10em; }
  .footer-note .pickup-only { font-size: 12px; letter-spacing: 0.12em; white-space: nowrap; }

  /* About overlay */
  #home-about { padding-top: 60px; padding-bottom: 14px; }
  #home-about .section-header { margin-bottom: 10px; padding-bottom: 8px; }
  #home-about .section-title { font-size: 26px; }
  #home-about .about-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 0 auto;
  }
  #home-about .copy-stack { gap: 8px; }
  #home-about .lede { font-size: 13.5px; line-height: 1.32; }
  #home-about .body-block { gap: 6px; }
  #home-about .body-block p { font-size: 11.5px; line-height: 1.34; }
  #home-about .closer-wrap { margin-top: 2px; padding-top: 8px; gap: 0; }
  #home-about .closer { font-size: 12px; line-height: 1.3; }
  #home-about .photo-col { display: flex; flex-direction: column; flex: 1 0 auto; }
  #home-about .hero-frame {
    position: relative;
    flex: 1 0 220px;
    min-height: 220px;
    max-height: none;
    height: auto;
  }
  #home-about .hero-frame img {
    position: absolute;
    inset: 0;
    min-height: 0;
  }
  /* "Full story" keeps its small type; the link box is 44px tall. */
  .full-story {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 88px;
    font-size: 9px;
    margin-bottom: -10px;
  }

  /* Contact overlay */
  #home-contact { padding: 64px max(18px, env(safe-area-inset-right)) 28px max(18px, env(safe-area-inset-left)); }
  #home-contact .section-header,
  .contact-cream .section-header { margin-bottom: 28px; padding-bottom: 14px; }
  .contact-wrap { padding-bottom: 12px; }
  .contact-item { padding: 22px 20px; gap: 8px; }
  .contact-label { font-size: 10px; }
  .contact-value { font-size: 20px; }
  .contact-value.email { font-size: 15px; font-weight: 500; }
  /* Link hints: 12px minimum and WCAG AA (4.5:1) on the contact cards. */
  .contact-hint { font-size: 12px; line-height: normal; letter-spacing: 0.04em; margin-top: 2px; color: rgba(17,17,17,0.72); }
  .contact-list { grid-template-columns: 1fr; }
  .contact-item,
  .contact-item:nth-child(even),
  .contact-item:nth-child(n+3) {
    border-left: none;
    border-bottom: 1px solid rgba(17, 17, 17, 0.10);
  }
  .contact-item:last-child { border-bottom: none; }
  .contact-cream .contact-item:last-child { border-bottom: 1px solid rgba(17, 17, 17, 0.10) !important; }
  .contact-foot { margin-top: 28px; }
  .contact-foot p { font-size: 13px; }

  /* ==== Cream dedicated pages ==== */
  .cream-page .page {
    min-height: 100vh;
    min-height: 100svh;
    padding: 64px max(16px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .contact-cream .page { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .contact-cream .contact-item { padding: 22px 0; }
  .contact-cream .contact-value.email { font-weight: 400; }

  .about-cream .page { padding-top: 60px; }
  .about-cream .section-header { margin-bottom: 8px; padding-bottom: 6px; }
  .about-cream .section-title { font-size: 26px; }
  .about-cream .layout { display: flex; flex-direction: column; gap: 8px; }
  .about-cream .copy-stack { gap: 6px; }
  .about-cream .lede { font-size: 12.5px; line-height: 1.3; }
  .about-cream .body-block { gap: 5px; }
  .about-cream .body-block p { font-size: 10.5px; line-height: 1.32; }
  .about-cream .closer-wrap { margin-top: 2px; padding-top: 6px; }
  .about-cream .closer { font-size: 11px; line-height: 1.28; }
  .photo-stack { gap: 8px; }
  .photo-stack .hero-frame {
    min-height: 0;
    height: auto;
    aspect-ratio: 358 / 272;
  }
  .photo-stack .hero-frame img { min-height: 0; height: 100%; }
  .secondary-strip {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 8px;
    height: clamp(120px, 40vw, 190px);
  }
  .secondary-strip .shot { aspect-ratio: auto; height: 100%; }
  .secondary-strip .shot:first-child img { object-position: center 55%; }
  .secondary-strip .shot:last-child img { object-position: center 40%; }

  /* ==== Sauce pages ==== */
  .sauce-page .page {
    min-height: 100vh;
    min-height: 100svh;
    padding: 56px max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .sauce-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex: none;
  }
  .jar-col {
    height: 210px;
    min-height: 210px;
    padding: 12px;
    margin-bottom: 12px;
  }
  .jar-col img { height: 92%; max-height: none; }
  .info-col { gap: 8px; padding: 0; max-width: none; }
  .product-title { font-size: 24px; }
  .taste-chip { font-size: 9px; letter-spacing: 0.14em; padding: 5px 10px; gap: 6px; }
  .taste-chip .label { letter-spacing: 0.12em; }
  .blurb { font-size: 13px; line-height: 1.35; max-width: none; }
  .ingredients { gap: 3px; max-width: none; }
  .ingredients-label { font-size: 9px; letter-spacing: 0.14em; }
  .ingredients-list { font-size: 10px; line-height: 1.4; }
  .price-row { gap: 10px; margin-top: 2px; }
  .price { font-size: 24px; }
  .price-note { font-size: 11px; letter-spacing: 0.06em; }
  .size-picker { gap: 6px; margin-top: 0; }
  .size-label { font-size: 9px; letter-spacing: 0.14em; }
  .size-options { gap: 8px; }
  .size-btn { padding: 9px 12px; gap: 2px; min-height: 44px; }
  .size-btn .sz { font-size: 12px; }
  .size-btn .detail { font-size: 11px; }
  .size-btn.is-single { flex: 0 1 auto; min-width: 160px; width: auto; }
  .add-btn { height: 44px; width: 100%; min-width: 0; margin-top: 2px; font-size: 12px; }
  .pickup-loud { margin-top: 8px; text-align: center; }

  /* ==== Cart ==== */
  .cart-page .page,
  .checkout-page .page,
  .confirmation-page .page {
    min-height: 100vh;
    min-height: 100svh;
    padding: 56px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .cart-page .page-header {
    margin: 8px 0 14px;
    padding-bottom: 12px;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .cart-page .page-title { font-size: 28px; }
  .item-count { font-size: 10px; }
  .cart-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    flex: 1 0 auto;
  }
  .lines { flex: 1 0 auto; }
  .line {
    grid-template-columns: 72px 1fr auto;
    gap: 12px;
    padding: 14px 0;
  }
  .lines .line-price { grid-column: auto; justify-self: end; font-size: 16px; }
  .thumb { width: 72px; height: 72px; }
  .thumb img { max-height: 62px; max-width: 58px; }
  .line-info { gap: 6px; min-width: 0; }
  .line-name { font-size: 16px; }
  .line-meta { font-size: 11px; }
  .line-controls { gap: 8px; margin-top: 0; flex-wrap: wrap; }
  .qty button { width: 44px; height: 44px; font-size: 16px; }
  .qty span { min-width: 24px; font-size: 13px; }
  .remove { min-height: 44px; padding: 0 8px; font-size: 10px; }
  .aside { padding: 18px 16px; gap: 12px; }
  .aside-title { font-size: 18px; }
  .sub-label { font-size: 11px; }
  .sub-value { font-size: 24px; }
  .aside-note { font-size: 12px; letter-spacing: 0.03em; line-height: 1.4; }
  .checkout-btn { height: 48px; font-size: 12px; }
  .continue {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: -4px 0 -10px;
    font-size: 11px;
  }
  /* Empty cart: live copy, centered in the space under the header. */
  .cart-empty:not([hidden]) {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 0 64px;
  }
  .cart-empty:not([hidden]) ~ .cart-layout { flex: 0 0 auto; }
  .cart-empty p { font-size: 18px; }
  .cart-empty a.btn-primary { height: 48px; min-width: 200px; }

  /* ==== Checkout ==== */
  .checkout-page .breadcrumb { margin: 6px 0 6px; }
  .checkout-page .page-header { margin-bottom: 10px; padding-bottom: 10px; }
  .checkout-page .page-title { font-size: 24px; }
  .pickup-banner { margin-top: 6px; font-size: 10px; letter-spacing: 0.12em; padding: 6px 12px; }
  .checkout-layout { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .form-col { gap: 10px; }
  .section-label { font-size: 9px; letter-spacing: 0.14em; margin: 0 0 2px; }
  .field { gap: 4px; }
  .field label { font-size: 10px; letter-spacing: 0.10em; }
  /* 16px input text keeps iOS Safari from zooming on focus. */
  .field input { font-size: 16px; padding: 10px 12px; min-height: 44px; }
  .field-hint { font-size: 10px; letter-spacing: 0.03em; line-height: 1.35; margin: 0; }
  .field-error { font-size: 12px; line-height: 1.35; }
  .field-row { display: flex; flex-direction: column; gap: 10px; }
  .summary-col { padding: 12px 12px 12px; gap: 8px; }
  .summary-title { font-size: 16px; }
  .line-items { gap: 6px; padding-bottom: 8px; }
  .summary-col .line-name { font-size: 14px; line-height: 1.25; }
  .summary-col .line-meta { font-size: 10px; margin-top: 2px; }
  .summary-col .line-price { font-size: 13px; }
  .subtotal-label { font-size: 10px; }
  .subtotal-value { font-size: 20px; }
  .tax-note { font-size: 10px; letter-spacing: 0.03em; line-height: 1.35; }
  .square-panel { padding: 10px; gap: 8px; }
  .square-label { font-size: 9px; letter-spacing: 0.14em; }
  .square-card-mock { padding: 10px; gap: 6px; min-height: 48px; }
  .square-card-line { height: 9px; }
  .square-card-container { padding: 8px 6px; min-height: 88px; }
  /* No lingering tap flash on the main buttons (their own states show progress). */
  .pay-btn, .add-btn, .checkout-btn { -webkit-tap-highlight-color: transparent; }
  /* Square reserves a 16px message line with 11px margins under the card
     fields; collapse it until Square has a message to show. */
  .square-card-container .sq-card-message { margin: 4px 2px 0; }
  .square-card-container .sq-card-message:empty { display: none; }
  .stub-note { font-size: 11px; }
  #pay-error { font-size: 13px; line-height: 1.4; }
  .pay-btn { height: 48px; font-size: 12px; }
  .pickup-foot { font-size: 10px; letter-spacing: 0.04em; line-height: 1.35; }
  .empty-note { font-size: 14px; }
  .empty-note a { display: inline-flex; align-items: center; min-height: 44px; }

  /* ==== Order confirmation ==== */
  .confirmation-page .page { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .confirm-wrap { gap: 16px; padding-top: 18px; flex: 1 0 auto; justify-content: center; }
  .eyebrow { font-size: 10px; letter-spacing: 0.14em; }
  .confirm-title { font-size: 32px; }
  .confirm-lede { font-size: 15px; line-height: 1.4; }
  .pickup-card { padding: 16px; gap: 8px; }
  .pickup-label { font-size: 10px; letter-spacing: 0.14em; }
  .pickup-body { font-size: 15px; line-height: 1.35; }
  .pickup-note { font-size: 11px; letter-spacing: 0.03em; line-height: 1.4; }
  .confirm-summary { padding-top: 14px; gap: 12px; }
  .confirm-summary .summary-title { font-size: 18px; }
  .confirm-summary .line { padding-bottom: 10px; gap: 12px; }
  .confirm-summary .line-name { font-size: 15px; }
  .confirm-summary .line-price { font-size: 13px; }
  .total-label { font-size: 11px; }
  .total-value { font-size: 24px; }
  .actions { flex-direction: column; gap: 8px; margin-top: 6px; }
  .actions .btn-primary,
  .actions .btn-ghost { height: 44px; width: 100%; font-size: 11px; }
  .stub-banner { font-size: 11px; line-height: 1.4; }
}