/* ==== 00-shared.css ==== */
/* Sugar Guilt Bakery, phone layout. Shared rules (nav, footer, type scale,
   spacing, buttons) live here; each page adds its own file scoped to its
   body class. Everything sits inside max-width media queries: the desktop
   design is untouched and tools/desktop-parity.js proves it.

   Nearly every element carries the design's inline style, so a phone rule
   that must beat one carries !important. Shorthands (padding, margin,
   border-radius, transform) are restated whole. */

@media (max-width: 760px) {

  /* ---- 1.1 header: 64px, not sticky. The drawer is an overlay panel. ---- */
  .m-nav { position: relative; }
  .m-nav-bar { padding: 10px 20px !important; gap: 8px !important; }

  /* The seal hangs off the bar on phones too, built the same way as the
     desktop one: a navy disc with a cream disc inside it, where the 4px
     difference IS the ring, starting at the bar's bottom edge so the circle
     breaks the blue rule. The bar stays 64px because the badge and the seal
     are both absolute; only the 120x44 link is in the flow, which is also
     what keeps the tap target legal.

     Geometry, all measured from the link's top-left corner: the bar's bottom
     edge is 54px down (the 44px row plus the bar's own 10px bottom padding).
     Cream radius 56 plus a 4px ring makes the link 120 wide. An inner height
     of 62 puts the semicircle's centre 6px below the bar, and the 88px seal
     is centred on that same point, hence 16/16. It hangs 62px below the rule,
     which is the number .nav-spacer below is derived from.

     z-index 70 beats the drawer's 60 on purpose, so an open drawer slides
     UNDER the seal rather than covering it. */
  .m-nav-logo {
    position: relative !important; display: block !important;
    width: 120px; height: 44px; z-index: 70;
  }
  /* Covers the bar's own 4px rule behind the badge, so the blue line stops at
     the badge's edges instead of running through the cream disc. */
  .m-nav-badge-line {
    position: absolute; left: 4px; right: 4px; top: 51px; height: 10px;
    background: #F2E3C4;
  }
  .m-nav-badge {
    position: absolute; left: 0; right: 0; top: 54px; height: 66px;
    padding: 0 4px 4px; box-sizing: border-box;
    background: #123653; border-radius: 0 0 60px 60px;
  }
  .m-nav-badge > span {
    display: block; width: 100%; height: 100%;
    background: #F2E3C4; border-radius: 0 0 56px 56px;
  }
  .m-nav-logo-img {
    position: absolute !important; left: 16px !important; top: 16px !important;
    width: 88px !important; height: 88px !important;
  }
  /* site.css hides this below 760px, from when the phone had no hanging seal.
     It has one now. A page whose own first section holds the spacer keeps its
     background behind the hang and needs only the shortfall. Measured at 390
     the headings want 20-22px, but about's note has a decorative tape strip
     6px further down, so 36 is the number that clears everything drawn rather
     than only the text. A page with no such section uses the bare one in the
     header and needs the whole hang. */
  .nav-spacer { display: block !important; height: 36px; }
  .nav-spacer-bare { height: 56px; }
  .m-nav-order {
    min-height: 44px; padding: 0 18px !important;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px !important;
  }
  /* #navMenu{display:none} / #navMenu.open{display:flex} stay in site.css;
     this only says where the open panel sits. top is the bar's padding box
     plus its 4px rule, so the panel hangs directly under the blue line, and
     its top padding clears the seal hanging into it. */
  #navMenu.m-nav-drawer {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
    background: #F2E3C4; border-bottom: 4px solid #123653;
    padding: 74px 20px 20px !important;
    box-shadow: 0 24px 48px rgba(59,35,20,.25);
  }
  #navMenu.open { animation: m-drawer .18s ease-out; }
  .m-nav-link {
    display: flex; align-items: center; min-height: 56px;
    padding: 0 6px !important; font-size: 20px !important;
  }
  .m-nav-link:active { background: rgba(59,35,20,.08); }
  /* The fifth row ships hidden (so the desktop never sees it); on phones the
     0,2,0 selector beats site.css's [hidden] at equal !important. */
  .m-only[hidden] { display: flex !important; }
  .m-nav-start {
    min-height: 48px; margin-top: 12px; align-items: center; justify-content: center;
    border-radius: 999px; background: #3B2314; color: #F2E3C4;
    font-size: 16px; font-weight: 800; text-decoration: none;
  }
  .m-nav-start:active { background: #C9903D; color: #3B2314; }
  /* Backdrop: the header is z-index 50, so the bar and panel stay above it.
     cursor:pointer makes body a click target for iOS Safari's delegated
     click, which is how the tap-outside close reaches site.js there. */
  body.nav-open::after {
    content: ""; position: fixed; inset: 0; z-index: 49;
    background: rgba(42,23,13,.45);
  }
  body.nav-open { cursor: pointer; }

  /* ---- 1.2 announcement banner: one 48px row, the whole row is the link ---- */
  .m-banner {
    min-height: 48px; padding: 0 20px !important; gap: 10px !important;
    flex-wrap: nowrap !important; justify-content: flex-start !important;
    font-size: 14px !important;
  }
  .m-banner-label { flex: none; }
  .m-banner-title {
    flex: 1; min-width: 0; font-size: 14px; font-weight: 800 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .m-banner-detail, .m-banner-link { display: none; }
  .m-banner::after { content: "›"; font-weight: 800; font-size: 20px; line-height: 1; flex: none; }

  /* ---- 1.3 footer ---- */
  /* The photo was a 120px band ABOVE the text, which put a portrait photo
     (1542x2048) into a 390x120 letterbox: a 4.3x crop, the hardest on the site,
     and it read as a smear rather than a picture. Full-bleed behind the text
     instead, which is nearer to how the desktop bleeds it beside the text. The
     crop falls to about 2.4x, in line with every other photo here, and losing
     the separate band makes the strip SHORTER rather than taller. */
  .m-next { grid-template-columns: 1fr !important; }
  .m-next-photo {
    position: absolute !important; inset: 0; z-index: 0;
    order: 0; height: auto !important; min-height: 0 !important;
  }
  .m-next-img { -webkit-mask: none !important; mask: none !important; }
  /* Holds the cream type over the photo. Weakest point is the right-hand end,
     which is why the ramp stops at .70 rather than fading out. */
  .m-next-photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(59,35,20,.94) 0%, rgba(59,35,20,.86) 45%, rgba(59,35,20,.70) 100%);
  }
  /* The arrow had a 44px row of its own under the blurb ("-> Take me there"),
     which was a quarter of the strip's height. The whole strip is the link, so
     the arrow moves up beside the eyebrow and title as the "go" mark and its
     words are hidden the screen-reader way, so they stay in the link's
     accessible name. 200px -> ~125. */
  .m-next-text {
    position: relative; z-index: 1; padding: 22px 20px 24px !important;
    display: grid !important; grid-template-columns: minmax(0,1fr) auto;
    gap: 6px 16px !important; align-items: center;
  }
  .m-next-eyebrow { font-size: 12px !important; grid-column: 1; grid-row: 1; }
  .m-next-title { font-size: 28px !important; line-height: 1.05 !important; grid-column: 1; grid-row: 2; }
  .m-next-blurb {
    grid-column: 1 / -1; grid-row: 3;
    font-size: 14px !important; line-height: 1.5 !important; max-width: none !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .m-next-cta { grid-column: 2; grid-row: 1 / 3; min-height: 44px; gap: 0 !important; margin: 0 !important; }
  .m-next-cta-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  /* Rows, not two independent columns. Explore and Say hello each dissolve
     (display:contents) so their labels and links share grid rows: Menu sits
     level with Contact us, Our story with Leave a Google review. That frees the
     bottom of the Explore side, which was 83px of empty space beside the pickup
     note and payment badges, so the badges move into it and the two columns
     end together. Row gaps are margins, so the link rows stay exactly 44px. */
  .m-foot-grid {
    padding: 24px 20px 20px !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1.35fr) !important;
    gap: 0 16px !important;
  }
  .m-foot-explore, .m-foot-hello { display: contents !important; }
  .m-foot-explore > * { grid-column: 1; }
  .m-foot-hello > * { grid-column: 2; }
  .m-foot-col > .m-foot-label { grid-row: 2; }
  .m-foot-col > a:nth-of-type(1) { grid-row: 3; }
  .m-foot-col > a:nth-of-type(2) { grid-row: 4; }
  .m-foot-col > a:nth-of-type(3) { grid-row: 5; }
  .m-foot-col > a:nth-of-type(4) { grid-row: 6; }
  .m-foot-hello > .m-foot-note { grid-row: 7; }
  .m-foot-hello > .m-foot-pay {
    grid-row: 7; grid-column: 1; align-self: center;
    gap: 8px !important; margin: 12px 0 0 !important;
  }
  /* 28px badges: at 32 the three came to 158px against a 142px column. */
  .m-foot-pay > span { height: 28px !important; border-radius: 7px !important; }
  .m-foot-pay > span:first-child { padding: 0 9px !important; font-size: 15px !important; }
  .m-foot-pay > span:not(:first-child) { width: 28px !important; font-size: 17px !important; }
  /* The desktop runs brand | explore | hello as three columns in ONE row, so
     the brand costs it no height at all. On a phone the brand has to be its own
     row, and stacked as seal-then-blurb-then-tagline that row was 139px, which
     is most of why this footer was 912px against the desktop's 640. Seal beside
     the text: 68px, and it reads as a masthead rather than three loose blocks. */
  .m-foot-brand {
    grid-column: 1 / -1; grid-row: 1; margin-bottom: 18px;
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr);
    gap: 6px 14px !important;
    align-items: center;
  }
  .m-foot-lockup { grid-row: 1 / 3; grid-column: 1; height: 44px !important; align-self: center; }
  .m-foot-blurb { grid-column: 2; }
  .m-foot-tag { grid-column: 2; }
  .m-foot-blurb {
    font-size: 14px !important; line-height: 1.5 !important; max-width: none !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .m-foot-tag { font-size: 16px !important; }
  .m-foot-label { font-size: 12px !important; margin: 0 0 2px !important; }
  .m-foot-link { display: flex; align-items: center; min-height: 44px; font-size: 16px !important; }
  .m-foot-link:active { color: #C9903D !important; }
  /* At 14px in a 186px column this ran to three lines with "notice" alone on
     the last one. A wider column and a point smaller makes it two. The top
     margin matches the badges beside it, so align-self centres them on it. */
  .m-foot-note { font-size: 13px !important; margin: 12px 0 0 !important; text-wrap: balance; }
  /* The legal bar's padding, gap and size sit on its inner row (that is where
     the inline values are), the outer .m-foot-legal keeps only its rule. */
  /* Two centred lines, the copyright first and the map credit a step quieter
     under it. They were flush left with ragged right ends, 4px apart, which
     read as two loose lines rather than a sign-off. #A88E73 is 5.5:1 on the
     footer brown, above the 4.5 small text needs. */
  .m-foot-legal-row {
    flex-direction: column; align-items: stretch; justify-content: center !important;
    text-align: center; padding: 16px 20px 18px !important; font-size: 12px !important; gap: 6px !important;
  }
  /* 27px each side is the room the key needs after the text; equal on both
     sides so the centre does not move. One line from 360 up, two balanced
     lines below that. */
  .m-foot-legal-row > span:first-child { text-wrap: balance; padding: 0 27px; }
  .m-foot-credit-short, .m-foot-credit-short a { color: #A88E73 !important; }
  /* "Home bakery · Spring, Texas" is said twice already a few lines up (the
     blurb and the pickup note), and it was what pushed the map credit onto a
     third line. The credit itself stays. A second, shorter copy ships hidden
     rather than a span around the place words: a span inside the desktop line
     splits its text run and moved the anti-aliasing of "data" by a fraction of
     a pixel (30px of difference at 1440). Same 0,2,0-beats-[hidden] rule as
     .m-only above. */
  .m-foot-credit { display: none !important; }
  .m-foot-credit-short[hidden] { display: inline !important; }
  /* The key trails the copyright (a space, 10px, a 14px icon), which pulled
     the centred words 13px left. Absolute with no offsets keeps it exactly
     where it would have sat, after "love.", but out of the line, so the text
     alone is centred and the line keeps its own height. (A -42px right margin
     did the centring but broke the line box in two, 29px tall.) The 44px tap
     area is 15px of padding round the icon, pulled back over it by margin. */
  .m-foot-key { position: absolute !important; padding: 15px !important; margin: -15px 0 0 -5px !important; }
  .m-login-card { padding: 24px 20px !important; border-radius: 20px !important; }
  .m-login-card button { min-height: 48px; }

  /* ---- 1.4 type scale: defaults for the design's clamp() headings. Page
     files restate the exact size per section; these catch every heading a
     page file does not name so nothing renders at desktop size. ---- */
  h1[style*="clamp("] { font-size: 36px !important; line-height: 1.02 !important; }
  h2[style*="clamp("] { font-size: 28px !important; line-height: 1.05 !important; }
  .m-polaroid-cap { font-size: 12px !important; }

  /* ---- 1.5 spacing: section padding and section-level gaps ---- */
  [style*="padding:clamp(64px,9vw,120px)"],
  [style*=" clamp(64px,9vw,120px)"] { padding: 40px 20px !important; }
  [style*="gap:clamp(36px,5vw,64px)"] { gap: 24px !important; }

  /* ---- 1.6 buttons: pressed feedback; hover lifts neutralised on touch ---- */
  a[class^="h-"]:active, a[class*=" h-"]:active, button:active { transform: scale(.97); transition: transform .12s; }
  @media (hover: none) {
    .h-lift6:hover, .h-lift5:hover, .h-lift4:hover, .h-nudge:hover, .h-unrotate:hover {
      transform: none !important; box-shadow: inherit;
    }
  }

  /* ---- 1.7 tilts sit straight on phones; reduced motion stops the ambient
     animations (sg-spin, sg-shimmer, sg-twinkle, sg-glow) ---- */
  .h-unrotate, .h-unrotate:hover { transform: none !important; }
  @media (prefers-reduced-motion: reduce) {
    [style*="animation"] { animation: none !important; }
    #navMenu.open { animation: none; }
    /* site.css sets html{scroll-behavior:smooth} for the whole site, so every
       jump link and every "#" anchor animated the page for about a second
       even here. The menu jump strip, the gallery filters and the order form
       all rely on those. */
    html { scroll-behavior: auto !important; }
  }

  /* ---- 1.8 the carousel primitive. Page workers put .m-carousel on the
     container of a repeated set; the home pop-up's polaroid pile is tpl
     markup, so it is named here and gets the same rules. ---- */
  .m-carousel, .m-pop-polaroids {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    padding: 6px 20px 14px !important;   /* room for the offset shadow */
    margin: 0 -20px !important;          /* bleed to the screen edge */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .m-carousel::-webkit-scrollbar, .m-pop-polaroids::-webkit-scrollbar { display: none; }
  .m-carousel > *, .m-pop-polaroids > * {
    flex: 0 0 var(--m-card, min(300px, calc(100vw - 72px))) !important;
    width: auto !important;
    max-width: none !important;
    scroll-snap-align: start;
    position: static !important;   /* the polaroid piles are absolute */
  }
  .m-pop-polaroids {
    --m-card: 220px;
    aspect-ratio: auto !important; max-width: none !important;
    position: static !important; align-items: flex-start;
    padding-top: 12px !important;        /* the tape hangs 10px above each frame */
  }
  .m-polaroid {
    box-sizing: border-box;           /* 220px is the frame, so the photo is 200 wide */
    margin: 8px 0 0 !important;
    padding: 10px 10px 40px !important;
    box-shadow: 0 10px 24px rgba(59,35,20,.22) !important;
  }
  .m-polaroid-1 { transform: rotate(-3deg) !important; }
  .m-polaroid-2 { transform: rotate(3deg) !important; }
  .m-polaroid-3 { transform: rotate(2deg) !important; }
  .m-polaroid-2 .m-polaroid-tape { top: -10px !important; }

  @media (max-width: 400px) {
    .m-nav-bar { padding: 10px 16px !important; }
    #navMenu.m-nav-drawer { padding: 74px 16px 20px !important; }
    /* Sections lose top padding down here, so the spacer covers more of the
       hang: at 320 the menu and gallery eyebrows ran 6px under the seal. */
    .nav-spacer { height: 48px; }
    .m-banner { padding: 0 16px !important; }
    .m-next-text { padding: 22px 16px 24px !important; }
    .m-foot-grid { padding: 24px 16px 20px !important; }
    .m-foot-legal-row { padding: 16px 16px 18px !important; }
    [style*="padding:clamp(64px,9vw,120px)"],
    [style*=" clamp(64px,9vw,120px)"] { padding: 40px 16px !important; }
    .m-carousel, .m-pop-polaroids {
      scroll-padding-inline: 16px;
      padding-left: 16px !important; padding-right: 16px !important;
      margin-left: -16px !important; margin-right: -16px !important;
    }
  }

  /* "Pickup & delivery, 24-hour notice" is 193px at 13px and the Say hello
     column is 179 at 360 and 188 at 375, so "notice" dropped to a third line
     alone. More of the row goes to that column (Explore's longest link, "Order
     cookies", is 100px), the badges come down to 26px to fit the narrower
     Explore side (116px for all three), and the note is 12px (178px).
     The blurb was clamped mid-sentence at these widths ("Baking for those
     little moments that..."): at 14px it needs four lines here. 13px gets 375
     back to three, and four are allowed so 360 and 320 end the sentence. */
  @media (max-width: 380px) {
    .m-foot-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.6fr) !important; }
    .m-foot-note { font-size: 12px !important; }
    .m-foot-pay { gap: 6px !important; }
    .m-foot-pay > span { height: 26px !important; border-radius: 6px !important; }
    .m-foot-pay > span:first-child { padding: 0 8px !important; font-size: 14px !important; }
    .m-foot-pay > span:not(:first-child) { width: 26px !important; font-size: 16px !important; }
    .m-foot-blurb { font-size: 13px !important; -webkit-line-clamp: 4; }
  }

  /* At 320 the Explore column is 105px, too narrow for even the smaller
     badges, so the note and the badges go back to full-width rows of their
     own (the note fits on two lines at 288). The tagline is 218px at 16px
     against 216, so "tell." wrapped alone. */
  @media (max-width: 340px) {
    .m-foot-hello > .m-foot-note { grid-column: 1 / -1; }
    .m-foot-hello > .m-foot-pay { grid-column: 1 / -1; grid-row: 8; align-self: start; }
    .m-foot-tag { font-size: 15px !important; }
    /* The copyright wraps here, and an out-of-flow key after a line break is
       placed at the start of a third line, on top of the map credit. Back in
       the line it ends "Handcrafted with love." and centres with it. */
    .m-foot-legal-row > span:first-child { padding: 0; }
    .m-foot-key { position: static !important; margin: -15px -15px -15px -5px !important; }
  }
}

@keyframes m-drawer { from { opacity: 0; transform: translateY(-8px); } }

/* ==== 10-home.css ==== */
/* Sugar Guilt Bakery, phone layout: the home page (MOBILE-SPEC.md 3.1).
   Every rule is scoped under .pg-home and sits inside a max-width query, so
   the desktop cannot move. Side padding follows the shared file: 20px above
   400px, 16px at 400 and under (so 390 and 375 both get 16px). */

@media (max-width: 760px) {

  /* ---- shared shapes used by several sections ---- */
  .pg-home .m-eyebrow { font-size: 12px !important; letter-spacing: .14em !important; }
  .pg-home .m-h2 { font-size: 28px !important; line-height: 1.05 !important; }
  .pg-home .m-head-text { gap: 12px !important; max-width: none !important; }
  /* A section header on desktop is a row: text on the left, a button on the
     right. On phones the button belongs after the content, so the row
     dissolves and its two children join the section's own column. */
  .pg-home .m-head { display: contents !important; }
  .pg-home .m-head-cta { order: 3; }
  .pg-home .m-btn-fill, .pg-home .m-btn-line {
    display: flex !important; align-items: center; justify-content: center;
    width: 100%; box-sizing: border-box; min-height: 48px;
    padding: 0 22px !important; font-size: 16px !important; font-weight: 800 !important;
    text-align: center;
  }

  /* ---- 3.1 §3 hero ---- */
  /* 600px was never the content's doing (the content block is 440px), it was
     how far the seal above reached. With the seal at 104 the copy clears at
     162, so 510 holds everything and gives the phone back 90px. */
  .pg-home .m-hero { min-height: 510px !important; }
  /* The hero photo is a 2048x1542 LANDSCAPE tray. Stretched over the whole
     600px-tall phone hero, object-fit:cover kept 100% of its height and only
     49% of its width: two columns of cookies blown up, where the desktop shows
     the whole tray. Anchoring it as a band at the top instead, and letting it
     fade into the hero's own dark ground, shows about 86% of the width. The
     type then sits on the dark part rather than on magnified cookie. */
  .pg-home .m-hero > img {
    bottom: auto !important; height: 340px !important;
    -webkit-mask: linear-gradient(180deg, #000 58%, transparent 100%);
    mask: linear-gradient(180deg, #000 58%, transparent 100%);
  }
  .pg-home .m-hero-inner { padding: 96px 20px 32px !important; gap: 14px !important; }
  /* 104, not 132: at 132 this seal was 34% of a 390 screen where the desktop's
     is 16% of 1440, so it was both the thing furthest from the desktop's
     proportions AND what forced the hero to 600px, since the copy has to start
     below it. One value for every phone width; it clears the hanging nav badge
     by 19px at 320, its worst case. */
  .pg-home .m-badge { width: 104px !important; right: 16px !important; top: 44px !important; }
  .pg-home .m-badge-sub { display: none !important; }
  /* The inner navy circle is overflow:hidden and 24% inset, so on a 104px seal
     it is 54px across. 15px was chosen when the seal was 132 (a 68.6px circle)
     and never re-measured when the seal shrank: its "Shh..." is 58px wide, 108%
     of the circle, and ran into the ring on both sides. At 11px it is 43px
     (79%), with about 5px of navy clear at the corners of the text box. 12px
     (86%) still read as touching at phone size; 10px looked lost. */
  .pg-home .m-badge-shh { font-size: 11px !important; }
  .pg-home .m-hero-eyebrow { font-size: 12px !important; padding: 8px 14px 8px 10px !important; letter-spacing: .14em !important; }
  .pg-home .m-hero-h1 { font-size: 40px !important; line-height: .98 !important; max-width: none !important; }
  /* 2 lines cut this mid-sentence at "for the little...". The sentence is
     three lines on a phone and the hero has the room. */
  .pg-home .m-hero-blurb {
    font-size: 16px !important; line-height: 1.5 !important; max-width: none !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pg-home .m-hero-ctas {
    display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 12px !important; width: 100%; margin-top: 4px !important;
  }
  .pg-home .m-hero-btn { padding: 0 12px !important; white-space: nowrap; }

  /* ---- 3.1 §4 fan favourites: header, a swipe strip, then "Full menu" ---- */
  .pg-home .m-favs-inner { display: flex; flex-direction: column; gap: 24px; }
  .pg-home .m-favs .m-blurb {
    font-size: 14px !important; line-height: 1.5 !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* A flex item's min-width is its min-content width, so anything inside the
     card that cannot wrap (a nowrap description) pushes the card past the
     primitive's 300px basis. min-width:0 makes the basis the width, whatever
     the description does. */
  .pg-home .m-fav { gap: 10px !important; min-width: 0; }
  /* Chrome sizes this box from the photo's intrinsic size however the 4:3 is
     expressed (aspect-ratio, or a 75% padding, both resolved against 400 x
     the photo's own ratio: 225, 244, 326, 382px for the four photos), and the
     strip then stretches every card to the tallest. The primitive makes a
     card 300px at every width from 372px up, so the 4:3 box is 225px, stated
     as such; the photo fills it from out of flow and cover-crops. */
  .pg-home .m-fav-art {
    border-radius: 16px !important; position: relative; flex: 0 0 auto;
    height: 225px !important; min-height: 0; aspect-ratio: auto !important;
  }
  .pg-home .m-fav-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .pg-home .m-fav-row { align-items: center !important; gap: 10px !important; }
  .pg-home .m-fav-name { font-size: 17px !important; line-height: 1.2 !important; }
  .pg-home .m-fav-price { font-size: 13px !important; padding: 5px 10px !important; }
  /* Clamped to one line (spec 3.1 §4). A line clamp wraps normally and
     cuts with an ellipsis, so unlike white-space:nowrap it puts no
     min-content pressure on the card. */
  .pg-home .m-fav-desc {
    font-size: 14px !important; line-height: 1.5 !important;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* ---- 3.1 §5 how ordering works: three statements, a hairline above each
     ---- The desktop grid already falls to one column here (its track floor is
     260px against 358px of room) and carries row-gap 0, so each step keeps its
     own caramel rule and they stack without a gap. Only the padding and the
     type need bringing down. */
  .pg-home .m-how-inner { gap: 24px !important; }
  .pg-home .m-step { padding: 22px 0 0 !important; }
  .pg-home .m-step-title { font-size: 22px !important; line-height: 1.14 !important; }
  .pg-home .m-step-body {
    margin: 12px 0 0 !important; font-size: 15px !important; line-height: 1.55 !important;
    max-width: none !important;
  }

  /* ---- 3.1 §6 pop-up (tpl markup, styled through the shared hooks) ---- */
  .pg-home #popup { scroll-margin-top: 16px !important; }
  .pg-home #popup .m-scallop { height: 24px !important; }
  .pg-home .m-pop-shade { height: 8px !important; }
  .pg-home .m-pop { grid-template-columns: minmax(0,1fr) !important; gap: 24px !important; padding: 24px 20px 40px !important; }
  .pg-home .m-pop-text { gap: 16px !important; }
  .pg-home .m-pop-eyebrow { font-size: 12px !important; letter-spacing: .14em !important; }
  .pg-home .m-pop-h2 { font-size: 28px !important; line-height: 1.05 !important; }
  .pg-home .m-pop-msg {
    font-size: 16px !important; line-height: 1.5 !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pg-home .m-pop-venue { border-radius: 20px !important; }
  .pg-home .m-pop-venue-row { flex-wrap: nowrap !important; }
  /* border-box, or the 96px basis is the content box and the padding makes
     the block 120px wide. */
  .pg-home .m-pop-day { flex: 0 0 96px !important; box-sizing: border-box; padding: 16px 12px !important; gap: 4px !important; }
  .pg-home .m-pop-day-big { font-size: 28px !important; }
  .pg-home .m-pop-day-hours { font-size: 12px !important; white-space: normal !important; text-align: center; line-height: 1.3; }
  .pg-home .m-pop-where { padding: 14px 16px !important; gap: 4px !important; min-width: 0; }
  .pg-home .m-pop-venue-name { font-size: 16px !important; }
  .pg-home .m-pop-address { font-size: 14px !important; }
  .pg-home .m-pop-directions { display: flex; align-items: center; min-height: 44px; margin-top: 0 !important; font-size: 15px !important; }
  .pg-home .m-pop-map { display: none !important; }
  .pg-home .m-pop-chips { gap: 6px !important; }
  .pg-home .m-pop-chip {
    display: inline-flex; align-items: center; min-height: 36px;
    padding: 0 9px !important; font-size: 13px !important; box-sizing: border-box;
  }
  .pg-home .m-pop-closing { font-size: 18px !important; }
  /* Off state: a short centred block with the two actions stacked. */
  .pg-home .m-pop-off { padding: 40px 20px !important; gap: 12px !important; }
  .pg-home .m-pop-off-eyebrow { font-size: 12px !important; letter-spacing: .14em !important; }
  .pg-home .m-pop-off-h2 { font-size: 28px !important; line-height: 1.05 !important; }
  .pg-home .m-pop-off-msg { font-size: 16px !important; line-height: 1.5 !important; }
  .pg-home .m-pop-off-actions { flex-direction: column; width: 100%; gap: 12px !important; margin-top: 4px !important; }
  .pg-home .m-pop-off-btn {
    display: flex !important; align-items: center; justify-content: center;
    width: 100%; box-sizing: border-box; min-height: 48px;
    padding: 0 22px !important; font-size: 16px !important; font-weight: 800 !important;
  }

  /* ---- 3.1 §7 our story: the round photo sits above the heading ---- */
  /* It was floated into the heading, which is the desktop's side-by-side idea
     shrunk down. At 390 that left the column beside it about 250px, so a ten
     word Chango heading broke into six lines of wildly uneven length (118,
     126, 182, 169, then 271 and 252 once the text cleared the photo) and the
     jump back to the left margin mid-heading read as a mistake. Stacked, the
     same heading sets in four even lines (255, 256, 282, 346), and the section
     is 6px shorter for it. */
  .pg-home .m-story-grid { display: block !important; }
  .pg-home .m-story-photo {
    float: none !important; width: 120px !important; height: 120px; aspect-ratio: auto !important;
    margin: 0 0 12px !important;
  }
  .pg-home .m-story-text { display: block !important; }
  .pg-home .m-story-text .m-eyebrow { margin: 0 0 12px !important; }
  .pg-home .m-story-text .m-h2 { margin: 0 0 16px !important; }
  .pg-home .m-story-traits {
    clear: both; display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 8px !important; margin: 0 0 16px !important;
  }
  /* "Mummy of 2 (ADHD/Autism)" is 202px at 14px and a cell is 175px (167.5
     at 375), so the long traits wrap to a second line inside the 44px chip. */
  /* Same numbers as .pg-about .m-trait, which holds the same four strings. */
  .pg-home .m-trait {
    min-height: 44px; padding: 5px 10px !important; box-sizing: border-box;
    border-radius: 12px !important; background: rgba(242,227,196,.08);
    gap: 8px !important; font-size: 14px !important; line-height: 1.15 !important;
  }
  .pg-home .m-story-p {
    font-size: 14px !important; line-height: 1.5 !important; margin: 0 0 16px !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* ---- 3.1 §8 reviews: gold frame kept, cards swipe, buttons after ---- */
  .pg-home .m-gold-ring { padding: 3px !important; }
  .pg-home .m-sparkle-sm { display: none !important; }
  .pg-home .m-reviews-inner { gap: 20px !important; }
  .pg-home .m-reviews-actions { order: 3; align-items: stretch !important; width: 100%; gap: 4px !important; }
  .pg-home .m-reviews-all {
    display: flex; align-items: center; justify-content: center; min-height: 44px;
    font-size: 14px !important; text-align: center;
  }
  /* The strip bleeds to 6px inside the section edge rather than all the way,
     so a card scrolling past the edge is clipped just inside the gold ring
     instead of sliding over it. */
  .pg-home .m-reviews-grid { margin: 0 -14px !important; padding: 6px 14px 14px !important; scroll-padding-inline: 14px; }
  .pg-home .m-review {
    position: relative !important;   /* the primitive makes children static; the quote glyph needs this box */
    box-sizing: border-box;           /* 300px is the card, padding and border included */
    padding: 16px !important; border-radius: 20px !important; gap: 10px !important;
    transform: none !important;
  }
  .pg-home .m-review-blue { box-shadow: 6px 6px 0 #DCE6F7 !important; }
  .pg-home .m-review-tan { box-shadow: 6px 6px 0 #EDD4AC !important; }
  .pg-home .m-review-quote { font-size: 56px !important; right: 16px !important; top: 6px !important; }
  .pg-home .m-review-avatar { width: 40px !important; height: 40px !important; }
  .pg-home .m-review-name { font-size: 15px !important; }
  .pg-home .m-review-headline {
    font-size: 17px !important; line-height: 1.25 !important; padding-right: 40px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pg-home .m-review-body {
    font-size: 14px !important; line-height: 1.5 !important;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pg-home .m-review-foot { padding-top: 6px !important; }
  .pg-home .m-review-on { font-size: 13px !important; }
  .pg-home .m-review-link { display: flex; align-items: center; min-height: 44px; font-size: 14px !important; }

  /* ---- 3.1 §9 craving something? ---- */
  .pg-home .m-cta-inner { gap: 16px !important; }
  .pg-home .m-cta-h2 { font-size: 32px !important; line-height: 1 !important; }
  .pg-home .m-cta-p { font-size: 14px !important; line-height: 1.5 !important; }
  .pg-home .m-cta-actions { flex-direction: column; width: 100%; gap: 12px !important; margin-top: 4px !important; }
  /* Placed as percentages of a 1440px band, these two landed about 8px from
     the "C" of "Craving" and from the "?". Gallery and about both moved theirs
     into the section padding; these use gallery's values. */
  .pg-home .m-cta-crumb-1 { left: 12px !important; top: 14px !important; transform: scale(.6) rotate(-20deg) !important; }
  .pg-home .m-cta-crumb-3 { right: 14px !important; top: 16px !important; transform: scale(.6) rotate(-8deg) !important; }
  /* The desktop puts crumbs 2 and 4 at bottom:16% / 14%, which on a phone is
     inside the stacked buttons. The band's bottom padding is a fixed 40px at
     every phone width, so a crumb 8px off the bottom edge sits in that
     padding, clear of the last button, wherever the copy wraps. */
  .pg-home .m-cta-crumb-2 { transform: scale(.6) rotate(25deg) !important; bottom: 8px !important; }
  .pg-home .m-cta-crumb-4 { transform: scale(.6) rotate(15deg) !important; bottom: 8px !important; }

  /* ---- small phones: 16px sides, matching the shared file's tier ---- */
  /* At 320 the headline runs to FIVE lines where every other phone width gets
     four, which pushes the bottom-aligned copy up into the rotating seal: the
     eyebrow pill overlapped it by 33px. 36px puts it back to four lines and
     clears it, without making 360 and up smaller than they need to be. */
  @media (max-width: 340px) {
    .pg-home .m-hero-h1 { font-size: 36px !important; }
  }

  @media (max-width: 400px) {
    .pg-home .m-hero-inner { padding: 96px 16px 32px !important; }
    .pg-home .m-pop { padding: 24px 16px 40px !important; }
    .pg-home .m-pop-off { padding: 40px 16px !important; }
    .pg-home .m-reviews-grid { margin: 0 -10px !important; padding: 6px 10px 14px !important; scroll-padding-inline: 10px; }
    /* The trait chips stay 14px here: at 375 a cell is 167.5px and every
       chip, "Mummy of 2 (ADHD/Autism)" included, still fits in two lines. */
  }
}

/* ==== 20-menu.css ==== */
/* Menu page, phone layout (MOBILE-SPEC.md 3.2). Scoped under .pg-menu, inside
   the shared max-width queries. Side padding is 20px, 16px at 400 and under,
   matching the shared header/footer tier. */

@media (max-width: 760px) {

  /* ---- 3.2 §2 hero. The spec had the h1 wrapping beside the photo, but
     "Everything" in Chango is 267px at 36px and the column beside a 110px
     photo is 217px at 375, so the h1 runs full width (two lines) and the
     photo sits bottom-right beside the blurb and the facts. It is anchored
     to the bottom of the text block because the photo follows the text in
     the DOM (a float cannot wrap what precedes it) and a bottom anchor holds
     however many lines the h1 takes. ---- */
  .pg-menu .m-hero { padding: 32px 20px 36px !important; }
  .pg-menu .m-hero-grid { display: block !important; }
  .pg-menu .m-hero-photo {
    position: absolute !important; right: 0; bottom: 0;
    width: 110px !important; height: 110px; margin: 0 !important;
  }
  .pg-menu .m-hero-text { display: block !important; }
  .pg-menu .m-hero-eyebrow { font-size: 12px !important; letter-spacing: .14em !important; margin: 0 0 12px !important; }
  .pg-menu .m-hero-h1 { font-size: 36px !important; line-height: 1.02 !important; margin: 0 0 12px !important; }
  .pg-menu .m-hero-blurb {
    font-size: 14px !important; line-height: 1.5 !important; max-width: none !important; margin: 0 126px 16px 0 !important;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pg-menu .m-hero-facts { margin: 0 126px 0 0 !important; gap: 6px 16px !important; min-height: 78px; }
  .pg-menu .m-hero-fact { font-size: 14px !important; }

  /* ---- 3.2 §3 jump strip: sticky at top:0, 48px links, right-edge fade ---- */
  .pg-menu .m-jump-nav { padding: 0 20px !important; gap: 20px !important; }
  .pg-menu .m-jump-link {
    display: flex; align-items: center; min-height: 48px; box-sizing: border-box;
    padding: 0 4px !important; font-size: 15px !important;
  }
  .pg-menu .m-jump-link:active { color: #123653 !important; }
  .pg-menu .menu-jump::after {
    content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40px;
    background: linear-gradient(90deg, rgba(242,227,196,0), rgba(242,227,196,.96));
    pointer-events: none; transition: opacity .15s;
  }
  /* Nothing left to reveal, so nothing should look dimmed. */
  .pg-menu .menu-jump.is-end::after { opacity: 0; }
  /* The matching left fade. Without it a label the strip has scrolled past is
     sliced at x=0 with a hard edge ("okie" for "By the cookie"), which reads
     as a rendering fault rather than as more to scroll back to. It is shown
     only once the strip has actually moved, so nothing dims at rest. */
  .pg-menu .menu-jump::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 40px; z-index: 1;
    background: linear-gradient(270deg, rgba(242,227,196,0), rgba(242,227,196,.96));
    pointer-events: none; opacity: 0; transition: opacity .15s;
  }
  .pg-menu .menu-jump.is-scrolled::before { opacity: 1; }
  .pg-menu .m-section { scroll-margin-top: 60px !important; }

  /* ---- 3.2 §4 product sections: two-column grid, square art ---- */
  .pg-menu .m-main { padding: 32px 20px 40px !important; }
  .pg-menu .m-sections { gap: 40px !important; }
  .pg-menu .m-section { gap: 24px !important; }
  .pg-menu .m-sec-head { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
  .pg-menu .m-sec-text { gap: 8px !important; max-width: none !important; }
  .pg-menu .m-sec-h2 { font-size: 28px !important; line-height: 1.05 !important; }
  .pg-menu .m-sec-blurb {
    font-size: 14px !important; line-height: 1.5 !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pg-menu .m-sec-count { font-size: 12px !important; }

  .pg-menu .m-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 12px !important; }
  .pg-menu .m-menu-card { border-radius: 20px !important; }
  .pg-menu .m-menu-card:hover { transform: none !important; box-shadow: none !important; }
  .pg-menu .m-menu-card:active { transform: scale(.97) !important; transition: transform .12s !important; }
  .pg-menu .m-menu-card-art { aspect-ratio: 1 !important; }
  .pg-menu .m-menu-card-price {
    right: 8px !important; top: 8px !important; padding: 5px 8px !important;
    font-size: 13px !important; border-radius: 10px !important;
  }
  .pg-menu .m-menu-card-body { padding: 10px 12px 12px !important; gap: 0 !important; }
  /* Three lines, not the spec's two: "Double Chocolate Crunch" needs three in
     the market card at 375 and a product name with an ellipsis is worse than
     a taller row. Most names take one or two. */
  .pg-menu .m-menu-card-name {
    font-size: 15px !important; line-height: 1.2 !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pg-menu .m-menu-card-desc, .pg-menu .m-menu-card-foot { display: none !important; }
  /* A tile is about 170px wide at 390 and 134px at 320, so a single long word
     ("Snickerdoodle") can be wider than the tile and was clipped by the card's
     own overflow. Breaking is the lesser evil, and below 360 the name simply
     sets smaller. */
  /* Exactly ONE name on this menu is wider than its tile: "Snickerdoodle",
     by 15px at 390 and 17px at 320. `overflow-wrap: anywhere` was solving that
     one word for all of them and broke it as "Snickerdood / le". Hyphenation
     breaks it as "Snicker-doodle" instead (the page is lang="en"), and
     break-word is only the net for a word that cannot fit a line by itself,
     where `anywhere` will split one that could. */
  .pg-menu .m-tile-name {
    font-size: 17px !important; padding: 12px !important;
    hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
  }
  @media (max-width: 360px) {
    .pg-menu .m-tile-name { font-size: 14px !important; padding: 10px !important; }
  }
  /* 15 of the 30 products have no photograph anywhere and render as a
     brand-coloured tile carrying the name in Chango. On desktop a description
     and a footer sit under it; the phone hides both, which left the name
     printed twice, stacked, on half the menu. The tile keeps the name (a bare
     colour block reads as a photo that failed to load, which is the one thing
     these tiles must not do) and the body goes, so every product is named
     once. A tile card is then art alone against a photo card's art plus name,
     so instead of letting it sit short and leave a hole under it, its art
     grows to the height of the row: every pair lines up, which is what every
     other grid on the site does. */
  .pg-menu .m-grid { align-items: stretch !important; }
  .pg-menu .m-menu-card--tile .m-menu-card-body { display: none !important; }
  .pg-menu .m-menu-card--tile .m-menu-card-art {
    aspect-ratio: auto !important; flex: 1 1 auto !important; min-height: 171px;
  }

  /* the market card */
  .pg-menu .m-market { border-radius: 20px !important; }
  .pg-menu .m-market .m-scallop { height: 20px !important; }
  .pg-menu .m-market-inner { padding: 16px !important; gap: 20px !important; }
  .pg-menu .m-market-link {
    min-height: 44px; padding: 0 20px !important; margin-top: 4px !important;
    font-size: 15px !important; box-sizing: border-box;
  }
  .pg-menu .m-market-link:active { background: #123653 !important; color: #F2E3C4 !important; }

  /* ---- 3.2 §5 item dialog: centred above the 62px hub bar, stacked actions.
     The extra bottom padding keeps the card's bottom edge clear of the bar
     on every viewport height, since align-items:center centres in the padding box. ---- */
  .pg-menu #itemDialog { padding: 16px 16px 78px !important; }
  .pg-menu #itemDialogCard { width: 100% !important; max-height: calc(100vh - 94px) !important; border-radius: 20px !important; }
  .pg-menu #dlgClose { width: 44px !important; height: 44px !important; right: 12px !important; top: 12px !important; }
  .pg-menu #dlgPrice { font-size: 18px !important; }
  .pg-menu .m-dlg-body { padding: 28px 20px 20px !important; gap: 12px !important; }
  .pg-menu #dlgTitle { font-size: 24px !important; line-height: 1.1 !important; }
  .pg-menu #dlgNote { font-size: 15px !important; }
  .pg-menu .m-dlg-actions { flex-direction: column; gap: 10px !important; margin-top: 4px !important; }
  .pg-menu .m-dlg-btn {
    width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 22px !important;
    display: inline-flex !important; align-items: center; justify-content: center; font-size: 16px !important;
  }
  .pg-menu #dlgOrder[hidden] { display: none !important; }
  .pg-menu #dlgKeep:active { background: rgba(59,35,20,.08) !important; }

  /* ---- 3.2 §6 "What's the hold up?": two pills side by side ---- */
  .pg-menu .m-cta { padding: 40px 20px !important; }
  .pg-menu .m-cta-inner { gap: 24px !important; }
  .pg-menu .m-cta-text { gap: 12px !important; max-width: none !important; }
  .pg-menu .m-cta-h2 { font-size: 28px !important; line-height: 1.05 !important; }
  .pg-menu .m-cta-copy { font-size: 14px !important; line-height: 1.5 !important; }
  .pg-menu .m-cta-actions { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px !important; width: 100%; }
  .pg-menu .m-cta-btn {
    min-height: 48px; padding: 0 12px !important; box-sizing: border-box;
    justify-content: center; font-size: 16px !important; white-space: nowrap;
    /* the design's inline weight is 700 here and 800 in the same pair on every
       other page, so the pills read as two different buttons */
    font-weight: 800 !important;
  }
  .pg-menu .m-cta-btn:active { background: #C9903D !important; color: #3B2314 !important; }

  @media (max-width: 400px) {
    .pg-menu .m-hero { padding: 32px 16px 36px !important; }
    /* a 100px photo gives the facts 231px so each stays on one line at 375 */
    .pg-menu .m-hero-photo { width: 100px !important; height: 100px; }
    .pg-menu .m-hero-blurb { margin: 0 112px 16px 0 !important; }
    .pg-menu .m-hero-facts { margin: 0 112px 0 0 !important; }
    .pg-menu .m-jump-nav { padding: 0 16px !important; }
    .pg-menu .m-main { padding: 32px 16px 40px !important; }
    .pg-menu .m-cta { padding: 40px 16px !important; }
  }
}

/* ==== 30-gallery.css ==== */
/* Sugar Guilt Bakery, phone layout: gallery page (MOBILE-SPEC.md 3.3).
   Every rule is scoped under .pg-gallery and sits inside the phone query, so
   the desktop mosaic (six columns, one-column band under 640px in site.css)
   is untouched. Inline styles are beaten with !important, shorthands whole. */

@media (max-width: 760px) {

  /* ---- 3.3 §2 hero: the flex row stacks, the Facebook link becomes a
     full-width outlined pill ---- */
  .pg-gallery .m-gal-hero { padding: 32px 20px 32px !important; }
  .pg-gallery .m-gal-hero-row {
    flex-direction: column; flex-wrap: nowrap !important;
    align-items: stretch !important; gap: 16px !important;
  }
  .pg-gallery .m-gal-hero-text { gap: 12px !important; max-width: none !important; }
  .pg-gallery .m-gal-eyebrow { font-size: 12px !important; letter-spacing: .14em !important; }
  .pg-gallery .m-gal-h1 { font-size: 36px !important; line-height: 1.02 !important; }
  .pg-gallery .m-gal-blurb {
    font-size: 14px !important; line-height: 1.5 !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pg-gallery .m-gal-fb {
    display: flex !important; width: 100%; box-sizing: border-box;
    min-height: 48px; padding: 0 22px !important;
    align-items: center; justify-content: center;
    font-size: 16px !important; font-weight: 800 !important;
  }
  .pg-gallery .m-gal-fb:active { background: rgba(242,227,196,.14); }

  /* ---- 3.3 §3 filter strip: the page's only sticky thing, at top:0 (the
     header is not sticky). The fade is on the wrapper, never on the nav,
     because overflow on the sticky element would kill sticky. ---- */
  .pg-gallery .m-gal-filters { position: sticky; top: 0; z-index: 40; }
  .pg-gallery .m-gal-filters::after {
    content: ""; position: absolute; right: 0; top: 0; bottom: 1px; width: 40px;
    background: linear-gradient(90deg, rgba(242,227,196,0), rgba(242,227,196,.96));
    pointer-events: none;
    transition: opacity .15s;
  }
  /* gallery.js sets .m-gal-end when the strip is scrolled to its end (or
     does not scroll), so the last label is not dimmed with nothing to reveal. */
  .pg-gallery .m-gal-filters.m-gal-end::after { opacity: 0; }
  /* The mirror of the right fade, matching the menu's jump strip: shown only
     once the strip has actually scrolled, so nothing dims at rest. */
  .pg-gallery .m-gal-filters::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 1px; width: 40px; z-index: 1;
    background: linear-gradient(270deg, rgba(242,227,196,0), rgba(242,227,196,.96));
    pointer-events: none; opacity: 0; transition: opacity .15s;
  }
  .pg-gallery .m-gal-filters.m-gal-start::before { opacity: 1; }
  .pg-gallery .m-gal-filter-nav { padding: 0 20px !important; gap: 20px !important; }
  .pg-gallery .m-gal-filter {
    display: flex; align-items: center; min-height: 48px;
    padding: 14px 4px !important; font-size: 15px !important;
  }
  .pg-gallery .m-gal-filter:active { color: #123653 !important; transform: none; }
  .pg-gallery .m-gal-count { font-size: 12px !important; }

  /* ---- 3.3 §4 the mosaic: two columns, the three landscape hero shots
     (tpl marks them data-wide) run full width. .pg-gallery .g-tile (0,2,0)
     beats site.css's bare .g-tile (0,1,0) at equal !important. ---- */
  .pg-gallery .m-gal-main { padding: 24px 20px 40px !important; }
  .pg-gallery #galleryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: dense;
    gap: 12px !important;
  }
  .pg-gallery .g-tile {
    grid-column: span 1 !important; grid-row: span 1 !important;
    min-height: 0 !important; aspect-ratio: 1;
    border-radius: 16px !important; box-shadow: none !important;
    transform: none !important;
  }
  .pg-gallery .g-tile[data-wide] { grid-column: span 2 !important; aspect-ratio: 2; }
  /* A square promoted to a band by gallery.js (the odd square out of a
     filter) is the same shape as the three landscape hero shots; the photo
     is object-fit:cover so it crops to the band rather than stretching. */
  .pg-gallery .g-tile:active { transform: scale(.97) !important; }
  .pg-gallery .m-gal-cap {
    padding: 24px 12px 10px !important; font-size: 13px !important; line-height: 1.3 !important;
  }

  /* ---- 3.3 §5 lightbox: image capped at 66vh, prev/next at the bottom
     corners above the 62px hub bar, nothing fixed to the bottom edge. The
     extra bottom padding keeps the image and counter clear of the buttons. ---- */
  .pg-gallery #lightbox { padding: 20px 16px 110px !important; gap: 14px !important; }
  /* The image is sized from the space that is actually left, not a flat
     66vh: 290px = 20px top padding + the 44px close row + 14px gap + ~40px
     caption and counter + 110px bottom padding, so on a short viewport
     (iPhone SE, or Safari with its toolbars showing) the caption clears the
     prev/next circles and the photo clears the close button. dvh where
     supported, so the toolbars count. */
  .pg-gallery #lbImg {
    max-width: calc(100vw - 32px) !important;
    max-height: min(66vh, calc(100vh - 290px)) !important;
    max-height: min(66dvh, calc(100dvh - 290px)) !important;
    border-radius: 16px !important; box-shadow: 0 20px 48px rgba(0,0,0,.5) !important;
  }
  .pg-gallery #lbPrev, .pg-gallery #lbNext {
    top: auto !important; bottom: 84px !important; margin-top: 0 !important;
    background: rgba(242,227,196,.22) !important;
  }
  .pg-gallery #lbPrev { left: 20px !important; }
  .pg-gallery #lbNext { right: 20px !important; }
  .pg-gallery #lbPrev:active, .pg-gallery #lbNext:active { background: #C9903D !important; color: #3B2314 !important; }
  .pg-gallery #lbClose { right: 16px !important; top: 16px !important; }
  .pg-gallery .m-lb-meta { max-width: calc(100vw - 32px); }
  .pg-gallery #lbCaption { font-size: 15px !important; }
  .pg-gallery #lbCounter { font-size: 12px !important; }

  /* ---- 3.3 §6 Hungry yet? (tan CTA): one full-width 48px pill ---- */
  .pg-gallery .m-gal-cta { padding: 40px 20px !important; }
  .pg-gallery .m-gal-cta-inner { gap: 16px !important; }
  .pg-gallery .m-gal-cta-h2 { font-size: 32px !important; line-height: 1 !important; }
  .pg-gallery .m-gal-cta-copy { font-size: 14px !important; line-height: 1.5 !important; }
  .pg-gallery .m-gal-cta-actions { width: 100%; margin-top: 0 !important; }
  .pg-gallery .m-gal-cta-btn {
    display: flex !important; width: 100%; box-sizing: border-box;
    min-height: 48px; padding: 0 22px !important; justify-content: center;
    font-size: 16px !important;
  }
  /* The four floating crumbs at 60%, moved into the padding zones so none
     sits on the heading or peeks out from under the full-width pill. */
  .pg-gallery .m-gal-cta > span:nth-of-type(1) { left: 12px !important; top: 14px !important; transform: scale(.6) rotate(-20deg) !important; }
  .pg-gallery .m-gal-cta > span:nth-of-type(2) { left: 18px !important; bottom: 8px !important; transform: scale(.6) rotate(25deg) !important; }
  .pg-gallery .m-gal-cta > span:nth-of-type(3) { right: 14px !important; top: 16px !important; transform: scale(.6) rotate(-8deg) !important; }
  .pg-gallery .m-gal-cta > span:nth-of-type(4) { right: 24px !important; bottom: 10px !important; transform: scale(.6) rotate(15deg) !important; }

  @media (max-width: 400px) {
    .pg-gallery .m-gal-hero { padding: 32px 16px 32px !important; }
    .pg-gallery .m-gal-filter-nav { padding: 0 16px !important; }
    .pg-gallery .m-gal-main { padding: 24px 16px 40px !important; }
    .pg-gallery .m-gal-cta { padding: 40px 16px !important; }
  }
}

/* ==== 40-about.css ==== */
/* Sugar Guilt Bakery, phone layout: the about page (MOBILE-SPEC.md 3.4).
   Every rule is scoped under .pg-about and sits inside a max-width query, so
   the desktop cannot move. Side padding follows the shared file: 20px above
   400px, 16px at 400 and under (so 390 and 375 both get 16px). The polaroid
   figures reuse the shared .m-polaroid rules (frame, tilt, tape, caption),
   the review cards mirror the home page's .m-review sizes. */

@media (max-width: 760px) {

  /* The note's tape strip sits below the heading, so about needs more room
     under the hanging seal than the shared spacer gives. One value for every
     width: the shared rule shortens on narrow phones and at 430 that left the
     tape 10px under the seal. */
  .pg-about .nav-spacer { height: 50px; }


  /* ---- shared shapes used by several sections ---- */
  .pg-about .m-eyebrow { font-size: 12px !important; letter-spacing: .14em !important; }
  .pg-about .m-h2 { font-size: 28px !important; line-height: 1.05 !important; }
  .pg-about .m-head-text { gap: 12px !important; max-width: none !important; }
  /* A section header on desktop is a row: text on the left, a button on the
     right. On phones the button belongs after the content, so the row
     dissolves and its two children join the section's own column. */
  .pg-about .m-head { display: contents !important; }
  .pg-about .m-head-cta { order: 3; }
  .pg-about .m-btn-fill, .pg-about .m-btn-line {
    display: flex !important; align-items: center; justify-content: center;
    width: 100%; box-sizing: border-box; min-height: 48px;
    padding: 0 22px !important; font-size: 16px !important; font-weight: 800 !important;
    text-align: center;
  }

  /* ---- 3.4 §2 a note from the baker: the letter, straight, then one polaroid ---- */
  .pg-about .m-note-sec { padding: 32px 20px 40px !important; }
  .pg-about .m-note-grid { gap: 24px !important; }
  .pg-about .m-note {
    transform: none !important; border-radius: 20px !important;
    padding: 24px 20px !important; gap: 14px !important;
    box-shadow: 0 14px 32px rgba(59,35,20,.22) !important;
  }
  .pg-about .m-note-tape { width: 90px !important; margin-left: -45px !important; }
  .pg-about .m-note-h1 { font-size: 36px !important; line-height: 1.02 !important; }
  .pg-about .m-note-p { font-size: 15px !important; line-height: 1.55 !important; }
  /* Every heading on the page balances; without it this line orphans "most." */
  .pg-about .m-note-line { font-size: 18px !important; line-height: 1.2 !important; margin: 2px 0 0 !important; text-wrap: balance; }
  /* The two social links sit side by side when both fit (they do at 390 and
     375: handle 174px + Facebook 109px + 16px gap inside a 303px card at
     375) and wrap to two rows on anything narrower; a 2-up grid clipped the
     handle and ran it into the Facebook icon. */
  .pg-about .m-note-social {
    display: flex !important; flex-wrap: wrap !important;
    gap: 4px 16px !important; padding-top: 12px !important; font-size: 14px !important;
  }
  .pg-about .m-note-soc { min-height: 44px; display: inline-flex !important; gap: 8px !important; white-space: nowrap; }
  .pg-about .m-note-soc:active { color: #123653 !important; }
  .pg-about .m-note-icon { width: 36px !important; height: 36px !important; flex: none; }
  .pg-about .m-note-icon svg { width: 18px; height: 18px; }
  /* The pop-up polaroid: 220px frame (border-box, so the photo is 200x250),
     the 3deg tilt kept, centred under the letter. */
  .pg-about .m-note-pol-wrap { width: 220px !important; padding: 16px 0 20px !important; }
  /* The desktop gives this one an 8px radius while every other polaroid on the
     site is 6px, and the two it sits a screen away from are 6px. */
  .pg-about .m-note-pol {
    box-sizing: border-box; padding: 10px 10px 40px !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 24px rgba(59,35,20,.22) !important;
  }
  .pg-about .m-note-pol-tape { width: 84px !important; height: 22px !important; margin-left: -42px !important; top: -10px !important; }
  .pg-about .m-note-pol-cap { font-size: 12px !important; bottom: 12px !important; }

  /* ---- 3.4 §3 meet the baker: the two polaroids swipe, then chips ---- */
  .pg-about .m-meet-grid { gap: 24px !important; }
  /* The pile is a square box holding two absolute figures on desktop; the
     primitive makes the children static, this neutralises the box itself. */
  .pg-about .m-pile {
    --m-card: 220px;
    aspect-ratio: auto !important; max-width: none !important;
    position: static !important; align-items: flex-start;
    padding-top: 12px !important;        /* the tape hangs 10px above each frame */
  }
  .pg-about .m-meet-text { gap: 12px !important; }
  .pg-about .m-traits {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 8px !important;
    margin-top: 12px !important;
  }
  /* Chips wrap to a second line rather than truncate: a flex li cannot
     ellipsize its own text, and "Mummy of 2 (ADHD/Autism)" cut in half is
     the one line on this page that must not be. Two lines at 1.15 still sit
     inside the 44px row, so they stay at the 14px the home page uses. */
  .pg-about .m-trait {
    min-height: 44px; box-sizing: border-box; padding: 5px 10px !important; gap: 8px !important;
    border-radius: 12px !important; font-size: 14px !important; line-height: 1.15 !important;
    min-width: 0; overflow-wrap: anywhere;
  }
  .pg-about .m-trait > span { width: 14px !important; height: 10px !important; }
  /* Not clamped: at three lines it ended "...a late-night experiment in a
     home kitchen in Spring, and", dropping "only the ones worth staying up
     for make it to the menu" -- the line that says why the recipes are good.
     The page has room for the fourth line. */
  .pg-about .m-meet-p { font-size: 14px !important; line-height: 1.5 !important; }

  /* ---- 3.4 §4 how a cookie happens: four steps in swipe order ---- */
  .pg-about .m-how-inner { gap: 24px !important; }
  .pg-about .m-how { --m-card: 240px; align-items: stretch; }
  .pg-about .m-step {
    position: relative !important; box-sizing: border-box;
    padding: 16px !important; border-radius: 20px !important; gap: 8px !important;
  }
  .pg-about .m-step-big { font-size: 28px !important; }
  .pg-about .m-step-title { font-size: 17px !important; line-height: 1.2 !important; }
  .pg-about .m-step-p { font-size: 14px !important; line-height: 1.5 !important; }

  /* ---- 3.4 §5 good to know: a 2x2 grid of policies, read in full, then the button ---- */
  .pg-about .m-facts-inner { gap: 20px !important; }
  .pg-about .m-facts { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 10px !important; }
  .pg-about .m-fact {
    padding: 14px !important; border-radius: 16px !important; gap: 6px !important; min-width: 0;
  }
  .pg-about .m-fact-label { font-size: 12px !important; letter-spacing: .12em !important; }
  .pg-about .m-fact-big { font-size: 24px !important; }
  .pg-about .m-fact-p { font-size: 14px !important; line-height: 1.45 !important; }

  /* ---- 3.4 §6 reviews: text first, buttons stacked, two cards swipe ---- */
  /* The six crumbs are placed as percentages of a band that was 1440px wide
     and is now 390px, so three of them landed on the headline: one behind the
     "G" of "Guilt", one across the first line, one on the paragraph. The top
     three move into the section's own 40px top padding, where nothing sits,
     and all six scale to 60% so they read as crumbs rather than blobs at this
     width. Percentages are left alone on the bottom three, which pass behind
     the cards. */
  .pg-about .m-rev-crumb { transform: scale(.6) !important; }
  .pg-about .m-rev-crumb-1 { top: 10px !important; left: 6% !important; transform: scale(.6) rotate(-20deg) !important; }
  .pg-about .m-rev-crumb-3 { top: 6px !important; left: 46% !important; transform: scale(.6) rotate(-8deg) !important; }
  .pg-about .m-rev-crumb-4 { top: 12px !important; right: 8% !important; transform: scale(.6) rotate(14deg) !important; }
  .pg-about .m-rev-crumb-2 { transform: scale(.6) rotate(28deg) !important; }
  .pg-about .m-rev-crumb-5 { transform: scale(.6) rotate(-32deg) !important; }
  .pg-about .m-rev-crumb-6 { transform: scale(.6) rotate(24deg) !important; }
  .pg-about .m-rev-grid { gap: 24px !important; }
  .pg-about .m-rev-text { gap: 16px !important; }
  .pg-about .m-rev-p { font-size: 14px !important; line-height: 1.5 !important; }
  .pg-about .m-rev-actions { flex-direction: column; width: 100%; gap: 12px !important; margin-top: 0 !important; }
  .pg-about .m-rev-thanks { font-size: 16px !important; }
  .pg-about .m-rev-strip { flex-direction: row !important; align-items: stretch; }
  .pg-about .m-review {
    position: relative !important;   /* the primitive makes children static; the quote glyph needs this box */
    box-sizing: border-box;           /* 300px is the card, padding and border included */
    padding: 16px !important; border-radius: 20px !important; gap: 10px !important;
    transform: none !important;
  }
  .pg-about .m-review-blue { box-shadow: 6px 6px 0 #DCE6F7 !important; }
  .pg-about .m-review-tan { box-shadow: 6px 6px 0 #EDD4AC !important; }
  .pg-about .m-review-quote { font-size: 56px !important; right: 16px !important; top: 6px !important; }
  .pg-about .m-review-avatar { width: 40px !important; height: 40px !important; }
  .pg-about .m-review-name { font-size: 15px !important; }
  .pg-about .m-review-headline {
    font-size: 17px !important; line-height: 1.25 !important; padding-right: 40px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pg-about .m-review-body {
    font-size: 14px !important; line-height: 1.5 !important;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pg-about .m-review-foot { padding-top: 6px !important; }
  .pg-about .m-review-on { font-size: 13px !important; }
  .pg-about .m-review-link { display: flex; align-items: center; min-height: 44px; font-size: 14px !important; }

  /* ---- small phones: 16px sides, matching the shared file's tier ---- */
  @media (max-width: 400px) {
    .pg-about .m-note-sec { padding: 32px 16px 40px !important; }
    /* At 375 a fact card is 167px and "PICKUP & DELIVERY" wraps at .12em,
       which makes the bottom row 34px taller than the top one. */
    .pg-about .m-fact-label { letter-spacing: .08em !important; }
  }
}

/* ==== 50-order.css ==== */
/* Order page, phone layout (MOBILE-SPEC.md 3.5). Scoped under .pg-order,
   inside the shared max-width queries. Side padding is 20px, 16px at 400 and
   under, matching the shared header/footer tier. The treat groups are folds
   (built by order.js only when the phone query matches); the mini box bar is
   the one sticky thing on the page. */

@media (max-width: 760px) {

  /* ---- 3.5 §2 intro ---- */
  .pg-order .m-or-intro { padding: 24px 20px 12px !important; }
  .pg-order .m-or-intro-inner { gap: 10px !important; }
  .pg-order .m-or-eyebrow { font-size: 12px !important; letter-spacing: .14em !important; }
  .pg-order .m-or-h1 { font-size: 36px !important; line-height: 1.02 !important; }
  /* Not clamped: the hidden third line was exactly the half-dozen policy, so
     the page opened with "Half-dozen minimum per..." and the rule the visitor
     needs before choosing anything was the part that was cut. */
  .pg-order .m-or-blurb { font-size: 14px !important; line-height: 1.5 !important; max-width: none !important; }

  /* ---- 3.5 §3 the mini box bar: sticky 16px down, ~72px, the 3D scene at
     scale .2 (60px) with the lid free to open above the bar. At top:0 the open
     lid ran 5px off the top of the screen and the bar sat hard against the
     edge; now the lid clears the edge by 11px. The inline top is 24px, the
     desktop sidebar's own offset, for the 761-980 widths where the scene is
     .42 and its lid stands 15px taller. ---- */
  .pg-order .m-or-main { padding: 0 20px 40px !important; }
  .pg-order .m-or-layout { gap: 12px !important; }
  .pg-order .order-aside-mini {
    padding: 6px 14px !important; border-radius: 16px !important; gap: 12px !important;
    margin-bottom: 8px; overflow: visible; top: 16px !important;
    box-shadow: 0 10px 24px rgba(59,35,20,.25) !important;
  }
  .pg-order #boxSceneMini { overflow: visible; }
  .pg-order .m-or-mini-text { gap: 3px !important; }
  .pg-order .m-or-mini-title { font-size: 16px !important; }
  .pg-order .m-or-mini-sum { font-size: 13px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pg-order .m-or-mini-total { font-size: 16px !important; }

  /* ---- the form: fieldsets 28 apart, legends 20px with a 28px numeral ---- */
  .pg-order .m-or-form { gap: 28px !important; }
  /* a fieldset defaults to min-width:min-content, and the fold note is nowrap */
  .pg-order .m-or-fs { gap: 16px !important; min-width: 0; }
  /* The caramel numerals are gone; the heading is Chango like every other
     heading on the site, over a caramel hairline that separates the parts. */
  .pg-order .m-or-legend { font-size: 22px !important; margin: 0 !important; }
  .pg-order .m-or-fs { padding-top: 20px !important; gap: 16px !important; }

  /* ---- 3.5 §4 step 1: folds. Each head is a 48px button; the open state
     carries a blue left rule and a turned chevron. ---- */
  .pg-order .m-or-groups { gap: 12px !important; }
  .pg-order .m-or-group { gap: 8px !important; }
  .pg-order .m-or-head-h3 { margin: 0; font-size: 14px; line-height: 1.2; }
  .pg-order .m-or-head {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
    box-sizing: border-box; padding: 6px 14px 6px 11px;
    border: 1px solid rgba(59,35,20,.1); border-left: 3px solid transparent; border-radius: 12px;
    background: #FFF8EC; color: #3B2314; font: inherit; text-align: left; cursor: pointer;
    transition: border-color .15s, background .15s;
  }
  .pg-order .m-or-head:active { background: #F3E6D0; }
  .pg-order .m-or-group.is-open .m-or-head { border-left-color: #123653; }
  .pg-order .m-or-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pg-order .m-or-head-row { display: flex; align-items: baseline; gap: 8px; }
  .pg-order .m-or-head-name { font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8C5A2E; }
  .pg-order .m-or-head-count { font-family: Chango, serif; font-size: 14px; line-height: 1; color: #C9903D; }
  .pg-order .m-or-head-note { font-size: 12px; line-height: 1.3; color: #6F5240; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Closed, the note is a one-line hint beside the fold's name and ellipsis is
     right. Open, it is the group's rule and was cut mid-word ("same flavor per
     half d..."), so it wraps instead. */
  .pg-order .m-or-group.is-open .m-or-head-note { white-space: normal; overflow: visible; }
  .pg-order .m-or-chev {
    flex: none; width: 9px; height: 9px; margin: -5px 4px 0 0;
    border-right: 2.5px solid #3B2314; border-bottom: 2.5px solid #3B2314;
    transform: rotate(45deg); transition: transform .2s, margin .2s;
  }
  .pg-order .m-or-group.is-open .m-or-chev { transform: rotate(225deg); margin: 4px 4px 0 0; }

  /* ---- the rows: 64px, 48px thumb, one-line name, 44px controls ---- */
  .pg-order .m-or-list { grid-template-columns: minmax(0,1fr) !important; gap: 8px !important; }
  .pg-order .m-or-row {
    padding: 8px 10px !important; gap: 10px !important; border-radius: 16px !important;
    /* the stuck bar sits 16px down and is 72px tall, so 104 leaves 16 below it */
    min-height: 64px; box-sizing: border-box; scroll-margin-top: 104px;
  }
  .pg-order .m-or-thumb { width: 48px !important; height: 48px !important; border-radius: 12px !important; }
  .pg-order .m-or-thumb-letter { font-size: 22px !important; }
  .pg-order .m-or-text { gap: 2px !important; }
  /* Two lines rather than the spec's one-line ellipsis: at 375 a single line
     cut "Brown Butter Chocolate Chip" to "Brown Butter Chocola…", which hides
     the word that tells two cookies apart. Only the long names take a second
     line. */
  .pg-order .m-or-name {
    font-size: 15px !important; line-height: 1.2 !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pg-order .m-or-price { font-size: 13px !important; line-height: 1.3; }
  /* "½ dozen in the box" must not drop "BOX" onto a line of its own. */
  .pg-order .m-or-note { font-size: 12px !important; white-space: nowrap; }
  .pg-order .m-or-toss {
    min-height: 44px; min-width: 84px; padding: 0 16px !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .pg-order .m-or-step { padding: 2px !important; gap: 0 !important; }
  .pg-order .m-or-dec, .pg-order .m-or-inc { width: 44px !important; height: 44px !important; }
  .pg-order .m-or-count { min-width: 26px !important; }

  /* ---- 3.5 §5 step 2: two choice cards, seven day chips in one row, a
     full-width "Another date" row, two-column time pills ---- */
  .pg-order .m-or-choice-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 12px !important; }
  .pg-order .m-or-choice { padding: 12px !important; border-radius: 16px !important; gap: 6px !important; }
  .pg-order .m-or-choice-title { font-size: 16px !important; }
  .pg-order .m-or-choice-body { font-size: 14px !important; line-height: 1.45 !important; }
  .pg-order .m-or-address { font-size: 14px !important; }
  .pg-order .m-or-label { font-size: 14px !important; }
  .pg-order .m-or-input { min-height: 48px; padding: 12px 14px !important; border-radius: 14px !important; }
  .pg-order .m-or-date-block, .pg-order .m-or-time-block { gap: 8px !important; }
  .pg-order .m-or-date-wrap { flex-direction: column; flex-wrap: nowrap !important; gap: 8px !important; }
  /* Seven across only while seven still measure 44px. A fixed 7-column grid
     gave 43px chips at 360 and 38px at 320; auto-fit keeps every chip at or
     above 44 and wraps the last one to a second row on a narrow phone. */
  .pg-order #dayChips {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 4px; width: 100%;
  }
  .pg-order .m-or-day {
    min-height: 60px; min-width: 0 !important; padding: 6px 0 !important;
    border-radius: 12px !important; gap: 2px !important; justify-content: center;
  }
  .pg-order .m-or-day-dow { font-size: 12px !important; letter-spacing: .04em !important; }
  .pg-order .m-or-day-num { font-size: 20px !important; }
  .pg-order .m-or-day-mon { font-size: 12px !important; }
  .pg-order .m-or-another {
    width: 100%; box-sizing: border-box; min-height: 48px;
    flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
    gap: 10px !important; padding: 0 14px !important; border-radius: 12px !important; font-size: 14px !important;
  }
  /* Safari sizes an empty date input to its own content, which is 32px wide
     and unusable with a thumb; Chrome happens to render a wide mm/dd/yyyy
     field and hid it. Let the input take the rest of the row in both. */
  .pg-order .m-or-date-input {
    font-size: 16px !important; min-height: 44px; color: #3B2314;
    flex: 1 1 auto; min-width: 0; text-align: right;
  }
  /* An empty date input draws nothing at all in Safari, so the dashed pill
     read as an empty box; Chrome's own "mm/dd/yyyy" hid that. One calendar
     glyph, drawn by us, means the control looks the same and says what it is
     in both. Chrome's native picker button is hidden so there is only ever
     one icon; the whole pill is a label, so tapping anywhere still opens the
     picker. */
  .pg-order .m-or-date-input::-webkit-calendar-picker-indicator {
    opacity: 0; width: 0; padding: 0; margin: 0;
  }
  .pg-order .m-or-another::after {
    content: ""; flex: none; width: 20px; height: 20px; background: #8C5A2E;
    -webkit-mask: var(--m-cal) center / contain no-repeat;
    mask: var(--m-cal) center / contain no-repeat;
  }
  .pg-order .m-or-another {
    --m-cal: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  }
  .pg-order #timePills { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px !important; }
  .pg-order .m-or-time { min-height: 44px; padding: 0 12px !important; font-size: 14px !important; }

  /* ---- 3.5 §6 step 3: fields stacked ---- */
  .pg-order .m-or-details-grid { grid-template-columns: minmax(0,1fr) !important; gap: 12px !important; }
  .pg-order .m-or-field { font-size: 14px !important; }

  /* ---- 3.5 §7 step 4: pay cards stacked ---- */
  .pg-order .m-or-pay-note { font-size: 14px !important; line-height: 1.5 !important; margin: -4px 0 0 !important; max-width: none !important; }
  .pg-order .m-or-pay-grid { grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
  .pg-order .m-or-pay { padding: 12px 14px !important; border-radius: 16px !important; gap: 4px !important; }
  .pg-order .m-or-pay-title { font-size: 16px !important; }
  .pg-order .m-or-pay-body { font-size: 14px !important; }

  /* ---- 3.5 §8 step 5 ---- */
  .pg-order .m-or-notes { min-height: 96px; border-radius: 14px !important; padding: 12px 14px !important; }

  /* The hint wrapped after "at the", leaving "earliest)" alone on line two. */
  .pg-order .m-or-hintnote { display: block; }

  /* ---- 3.5 §9 submit: full width, 52px ---- */
  .pg-order .m-or-submit-wrap { align-items: stretch !important; gap: 10px !important; }
  .pg-order .m-or-submit { width: 100%; min-height: 52px; padding: 0 22px !important; font-size: 17px !important; }
  .pg-order .m-or-hint { font-size: 14px !important; }
  .pg-order .m-or-small {
    font-size: 14px !important; line-height: 1.5 !important; max-width: none !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* ---- 3.5 §11 done screen ---- */
  .pg-order .m-or-done { padding: 40px 20px !important; }
  .pg-order .m-or-done-inner { gap: 20px !important; }
  .pg-order .m-or-done-mark { width: 64px !important; height: 64px !important; }
  .pg-order .m-or-done-h1 { font-size: 36px !important; line-height: 1.02 !important; }
  .pg-order .m-or-done-blurb { font-size: 16px !important; line-height: 1.5 !important; }
  .pg-order .m-or-stripe { padding: 16px !important; border-radius: 16px !important; gap: 12px !important; }
  .pg-order .m-or-stripe-text { flex: 1 1 100% !important; }
  .pg-order .m-or-stripe-btn:not([hidden]) {
    width: 100%; box-sizing: border-box; min-height: 48px; justify-content: center;
    padding: 0 22px !important; font-size: 16px !important;
  }
  .pg-order .m-or-done-card { padding: 20px !important; border-radius: 20px !important; }
  .pg-order .m-or-done-links { flex-direction: column; gap: 10px !important; }
  .pg-order .m-or-done-link {
    width: 100%; box-sizing: border-box; min-height: 48px; justify-content: center;
    padding: 0 22px !important; font-size: 16px !important;
  }

  @media (max-width: 400px) {
    .pg-order .m-or-intro { padding: 24px 16px 12px !important; }
    .pg-order .m-or-main { padding: 0 16px 40px !important; }
    .pg-order .m-or-done { padding: 40px 16px !important; }
  }
}

/* ==== 60-owner.css ==== */
/* Owner panel, phone layout (.pg-owner). A staff tool behind a password:
   the goal is usable at 390 (nothing overflows, every target 44px, every
   input 48px at 16px so iOS does not zoom), not a redesign. Hooks are the
   m-o-* classes emitted by src/page-owner.js and build/js/owner.js; every
   rule sits under .pg-owner inside the phone query so desktop cannot move. */

@media (max-width: 760px) {

  /* ---- lock screen ---- */
  .pg-owner .m-o-lock { padding: 24px 20px !important; border-radius: 20px !important; }
  .pg-owner .m-o-lock input { min-height: 48px; font-size: 16px !important; }
  .pg-owner .m-o-open { min-height: 48px; font-size: 16px !important; }
  .pg-owner .m-o-back {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 12px; font-size: 16px !important;
  }

  /* ---- sticky panel header: brand row, then the tab strip as one scroll row ---- */
  .pg-owner .m-o-bar { padding: 8px 20px 0 !important; gap: 4px 8px !important; }
  .pg-owner .m-o-brand { min-height: 44px; gap: 8px !important; }
  .pg-owner .m-o-brand-name { font-size: 16px !important; white-space: nowrap; }
  .pg-owner .m-o-brand-eyebrow { font-size: 12px !important; letter-spacing: .12em !important; white-space: nowrap; }
  .pg-owner .m-o-bar-actions { gap: 6px !important; }
  .pg-owner .m-o-view, .pg-owner .m-o-logout {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 12px !important; font-size: 14px !important;
    white-space: nowrap;
  }
  .pg-owner .m-o-view-long { display: none; }
  .pg-owner .m-o-view-short[hidden] { display: inline !important; }
  /* site.css already moves .owner-nav to row 2 under 1000px. */
  .pg-owner .owner-nav {
    flex-wrap: nowrap !important; justify-content: flex-start !important;
    gap: 6px !important; overflow-x: auto; overflow-y: hidden;
    margin: 0 -20px; padding: 6px 20px 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scroll-padding-inline: 20px;
  }
  .pg-owner .owner-nav::-webkit-scrollbar { display: none; }
  .pg-owner .m-o-tab {
    flex: none; min-height: 44px; padding: 0 16px !important;
    white-space: nowrap; scroll-snap-align: start;
  }

  /* ---- page header: title, hint, saved line on its own row ---- */
  .pg-owner .m-o-main { padding: 24px 20px 80px !important; gap: 20px !important; }
  .pg-owner .m-o-head { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
  .pg-owner .m-o-head-text { min-width: 0; }
  .pg-owner #tabTitle { font-size: 28px !important; line-height: 1.05 !important; overflow-wrap: anywhere; }
  .pg-owner #tabHint { font-size: 14px !important; }
  .pg-owner .m-o-saved { align-items: flex-start !important; }
  /* inline flow rather than a flex row, so the dot, the status and the note wrap like a sentence */
  .pg-owner .m-o-saved-line { display: block !important; line-height: 1.5; }
  .pg-owner #savedDot { vertical-align: middle; margin: -2px 6px 0 0; }

  /* ---- tab bodies: one column, 48px inputs at 16px, 44px buttons ---- */
  .pg-owner .m-o-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .pg-owner .m-o-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .pg-owner .m-o-kpi { padding: 14px 16px !important; border-radius: 20px !important; gap: 4px !important; }
  .pg-owner .m-o-kpi-num { font-size: 32px !important; }
  .pg-owner .m-o-card { border-radius: 20px !important; }
  .pg-owner #tabBody .m-o-card[style*="padding:22px"] { padding: 16px !important; }
  .pg-owner .m-o-preview { padding: 18px 16px !important; }
  .pg-owner .m-o-preview-h2 { font-size: 24px !important; }
  .pg-owner .m-o-preview-hours { font-size: 12px !important; }
  .pg-owner .m-o-field { font-size: 14px !important; }
  .pg-owner .m-o-bars { gap: 2px !important; }

  .pg-owner #tabBody input[type="text"],
  .pg-owner #tabBody input[type="number"],
  .pg-owner #tabBody textarea {
    min-height: 48px; font-size: 16px !important; padding: 12px 14px !important;
  }
  .pg-owner #tabBody textarea { min-height: 72px; line-height: 1.45 !important; }
  /* the resize handle needs a mouse; owner.js grows these to fit their text
     instead, so the owner can read the whole description they are editing */
  .pg-owner #tabBody textarea { resize: none !important; }
  /* the sticky header is two rows (120px) here, so anything scrolled into view
     -- by owner.js after an add, or by the browser revealing a focused field --
     has to stop below it rather than under it */
  .pg-owner #tabBody input,
  .pg-owner #tabBody textarea,
  .pg-owner #tabBody .m-o-item,
  .pg-owner #tabBody .m-o-photo,
  .pg-owner #tabBody .m-o-card,
  .pg-owner #tabBody [data-ann] { scroll-margin-top: 132px; }
  .pg-owner .m-o-price { min-height: 48px; }
  .pg-owner #tabBody input.m-o-price-input { min-height: 44px; padding: 0 !important; box-sizing: border-box; }   /* same specificity as the generic input rule above, later wins */

  .pg-owner .m-o-pill, .pg-owner .m-o-btn, .pg-owner .m-o-unit, .pg-owner .m-o-del, .pg-owner .m-o-link {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 14px !important; font-size: 14px !important;
    white-space: nowrap;
  }
  .pg-owner .m-o-btn { padding: 0 20px !important; }
  .pg-owner .m-o-del { padding: 0 10px !important; }
  .pg-owner .m-o-link { align-self: flex-start; padding: 0 4px !important; margin-left: -4px; }
  .pg-owner .m-o-move { width: 44px !important; height: 44px !important; flex: none; }

  /* the range switch: buttons on one row, the tracker note under them */
  .pg-owner .m-o-range { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }

  /* announcements: title, then toggles full width */
  .pg-owner .m-o-ann-title { flex-wrap: wrap; }
  .pg-owner .m-o-ann-actions { width: 100%; }
  .pg-owner .m-o-ann-actions .m-o-pill { flex: 1 1 0; }
  .pg-owner .m-o-ann-preview { padding: 10px 14px !important; gap: 4px 12px !important; font-size: 14px !important; border-radius: 12px !important; }

  /* the popup's Day / Hours pair stays two-up: both fields are a few characters */
  .pg-owner .m-o-pair { gap: 10px !important; }

  /* products: 72px thumb, name and price stacked, then two rows of controls
     (stock | visible, then arrows and delete) */
  .pg-owner .m-o-item { padding: 14px !important; }
  .pg-owner .m-o-thumb { width: 72px !important; height: 72px !important; border-radius: 14px !important; }
  .pg-owner .m-o-thumb-cap { font-size: 12px !important; padding: 3px 0 !important; letter-spacing: .04em !important; }
  .pg-owner .m-o-thumb-ph { font-size: 12px !important; padding: 4px !important; }
  .pg-owner .m-o-unit { min-width: 64px; }
  .pg-owner .m-o-actions { flex-wrap: wrap !important; gap: 8px !important; }
  .pg-owner .m-o-half { flex: 1 1 calc(50% - 4px) !important; min-width: 0; }
  .pg-owner .m-o-full { flex: 1 1 100% !important; margin-left: 0 !important; }
  .pg-owner .m-o-spacer { flex: 0 0 100% !important; height: 0; margin: -8px 0 !important; }
  .pg-owner .m-o-actions .m-o-move + .m-o-move { margin-right: auto; }
  .pg-owner .m-o-cat-head { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
  .pg-owner .m-o-cat-head > div { flex: 0 0 auto !important; }   /* its 320px basis would become height in a column */
  .pg-owner .m-o-cat-head .m-o-btn { width: 100%; }

  /* gallery: shorter photos, tag buttons 44px (the long one wraps inside its pill) */
  .pg-owner .m-o-photo-art { aspect-ratio: 3/2 !important; border-radius: 12px !important; }
  /* visible | arrows | delete fit on one row here, so the spacer stays a spacer */
  .pg-owner .m-o-photo .m-o-spacer { flex: 1 1 0 !important; height: auto; margin: 0 !important; }
  .pg-owner .m-o-photo .m-o-move + .m-o-move { margin-right: 0; }
  .pg-owner .m-o-tags { gap: 6px !important; }
  .pg-owner .m-o-tag {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 4px 6px !important; font-size: 12px !important;
    white-space: normal !important; line-height: 1.15;
  }
  .pg-owner .m-o-gal-bar { padding: 12px 14px !important; gap: 8px !important; }
  .pg-owner .m-o-gal-bar .m-o-pill, .pg-owner .m-o-gal-bar .m-o-btn { flex: 1 1 100%; }
  .pg-owner .m-o-gal-bar .m-o-spacer { display: none; }

  /* order requests: text full width, confirm | done, delete on its own line */
  .pg-owner .m-o-order-actions { gap: 8px !important; }
  .pg-owner .m-o-lines { padding: 12px 14px !important; }

  @media (max-width: 400px) {
    .pg-owner .m-o-bar { padding: 8px 16px 0 !important; }
    .pg-owner .owner-nav { margin: 0 -16px; padding: 6px 16px 10px; scroll-padding-inline: 16px; }
    .pg-owner .m-o-main { padding: 24px 16px 80px !important; }
    .pg-owner .m-o-lock { padding: 24px 16px !important; }
  }

  /* Every other page seats its content at 16px from the edge at this width;
     the lock screen's own inline padding is 24px, so its card was 20px
     narrower than every card on the site. */
  .pg-owner #lockScreen { padding: 24px 16px !important; }
}