/* ==========================================================================
   gms-ux5.css — ROUND 5 (BRIEF-ROUND5.md, Agent U) UI/UX layer.

   WHY A SEPARATE FILE, LOADED LAST.
   shell.js's head() emits, in order:
       ab-design-system.css  (the portable master package — never edited)
       gms-ab.css            (the site's own shared layer)
       ${pageCss}            (the per-page scoped sheets: .pg-food-catering,
                              .pk-app, .psg-app, .pt-app … — several of which
                              are REGENERATED from _work/ on every build)
   Every page-scoped sheet therefore both LOADS LAST and carries a
   two-class-deep selector (0,2,0), so a Round-5 rule written into gms-ab.css
   could not win against it. This file is emitted AFTER ${pageCss}, so a rule
   of equal specificity wins on source order, and the handful of rules that
   must beat a (0,2,0) page rule say `!important` deliberately — each one is
   commented with what it is out-ranking.

   The one thing NOT done here is the sub-13px type floor inside the
   page-scoped sheets: those files hold hundreds of `font-size:8px..12px`
   declarations and are rewritten by their own generators, so enumerating
   them as overrides would rot on the next regeneration. That floor is
   applied mechanically by _build/lib-fontfloor.js as a post-build sweep
   (see _build/build-all.js). This file only carries the floor for the SHELL
   and the MASTER, which the sweep deliberately does not touch.
   ========================================================================== */

/* ==========================================================================
   U1 — DESKTOP CONTENT CONTAINER
   Measured before: `main` was 1351px at a 1366px viewport, i.e. the content
   was the viewport — cards ran edge to edge with no page gutter at all.
   `main#main` (not `.ab-page`) is the hook because three pages set their own
   pageClass instead (pg-food-catering / pg-food-counters /
   pg-food-shopping-planner), and the C1 pages wrap their app in .pk-app /
   .psg-app inside the same <main>.
   ≤760px is deliberately untouched — Aniket's full-width mobile rule
   (ROUND 3 B1) stands.
   ========================================================================== */
@media (min-width: 761px) {
  main#main {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }
  /* the gutter now belongs to <main>; the master's own .ab-wrap would
     otherwise add a SECOND 24px inset inside it. The footer's .ab-wrap sits
     outside <main> and keeps the master's padding, so the footer grid and
     the page content still line up (both cap at --wrap, retuned below). */
  main#main .ab-wrap,
  main#main .ab-hero,
  main#main .ab-cta {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  /* keep the footer/credit rails on the same 1240px measure as the content */
  .ab-base { --wrap: 1240px; }
}
@media (min-width: 1240px) {
  main#main { padding-left: 24px; padding-right: 24px; }
}

/* ==========================================================================
   U2 — HERO ORDER + HEIGHT
   Measured before: at 375px the home hero was 1015px tall on an 812px screen
   (125% of the viewport) and the 9 icon tiles rendered ABOVE the headline —
   `.gms-hero-figure{order:-1}` in gms-ab.css's ≤900px block. A visitor's
   first screen was a grid of icons with the h1 at y=500, below the fold.
   ========================================================================== */
@media (max-width: 1239.98px) {
  .gms-hero-grid { grid-template-columns: 1fr; }
  /* headline panel first, tiles after — the actual U2 fix */
  .gms-hero-grid .ab-hero__panel { order: 0; border-radius: 22px 22px 0 0; }
  .gms-hero-figure { order: 1; border-radius: 0 0 22px 22px; min-height: 0; }
}
@media (max-width: 760px) {
  /* the master's clamp(48px,7vw,92px) block padding resolves to its 48px
     FLOOR at 375px (7vw = 26px), i.e. 96px of vertical padding on a 812px
     screen. Halved on phones — the horizontal component is left to the
     ROUND-3 B1 rule (12px) which still wins, being !important. */
  .ab-hero__panel { padding-top: 14px; padding-bottom: 14px; }
  .ab-hero { margin-top: 0; }
  .ab-kicker { margin-bottom: 6px; }
  .ab-hero__title { font-size: clamp(23px, 6.4vw, 30px); margin-bottom: 8px; line-height: 1.15; }
  .ab-hero__lede { font-size: 13.5px; line-height: 1.5; }
  .ab-hero__meta { margin-top: 8px; }
  .ab-chip { padding: 6px 10px; }
  .gms-hero-btns { margin-top: 10px; gap: 6px; }
  /* three full-width stacked buttons cost ~160px of a 812px screen; two per
     row keeps the same 44px tap target in ~half the height */
  .gms-hero-btns { flex-direction: row !important; flex-wrap: wrap; }
  .gms-hero-btns .ab-btn {
    width: auto !important;
    flex: 1 1 46%;
    min-height: 44px;
    padding-top: 10px; padding-bottom: 10px;
    font-size: 13px;
  }
  .gms-hero-tiles { padding: 10px; gap: 6px; }
  /* 3 x 3, each tile <= 96px (U2). 54px still clears the 44px touch floor on
     BOTH axes (a tile is one third of a 375px row = ~113px wide). */
  .gms-hero-tile { min-height: 50px; max-height: 96px; padding: 5px 4px; gap: 2px; }
  .gms-hero-tile__icon { width: 24px; height: 24px; font-size: 14px; border-radius: 8px; }
  .gms-hero-tile__label { font-size: 13px; }
  .ab-stats { gap: 8px; }
}

/* ==========================================================================
   U3 — TYPE FLOOR (13px) for the SHELL + the MASTER.
   Anything the page-scoped sheets set is handled by the build sweep.
   Every value below was read off a live measurement, not guessed:
     .site-brand__name 10.5 · .site-brand__tagline 11.5 · nav labels 10.8 ·
     .ab-kicker 12.5 · .gms-fcol h3 9.5 · footer links 11 · .gms-cat b 11 /
     small 9 · .gms-cl-hi 12.5 · .gms-cl-secnum 12.5 · .gms-cl-seccount 11.5 ·
     toolbar buttons 12 · .gms-sel-bar button 11.5 · .gms-guests select 11.5 ·
     .gms-care small 10.
   ========================================================================== */
.ab-kicker { font-size: 13px; }
.ab-step__no { font-size: 13px; }
/* set as an INLINE style by food-counters.js's own render, so only
   !important can raise it to the 13px floor. */
.pg-food-counters #count { font-size: 13px !important; }
.gms-cat b { font-size: 13px; }
.gms-cat small { font-size: 13px; }
.gms-cl-hi { font-size: 15px; }          /* U3: checklist item names 15px */
.gms-cl-en { font-size: 13px; }
.gms-cl-secnum { font-size: 13px; }
.gms-cl-seccount { font-size: 13px; }
.gms-cl-search input { font-size: 15px; }
.gms-cl-search button { font-size: 13px; }
.gms-cl-toolbtns button { font-size: 13px; }
.gms-sel-bar b { font-size: 13px; }
.gms-sel-bar button { font-size: 13px; }
.gms-sel-bar .gms-guests select { font-size: 13px; }
.gms-care a small { font-size: 13px; }
.gms-care a b { font-size: 14px; }
.gms-fcol h3 { font-size: 14px; }
.gms-fcol a,
.gms-fcol a span { font-size: 13px; }
.gms-fbrand small { font-size: 13px; }
.nav__link span,
.nav__sublink span { font-size: 13px; }
.site-brand__tagline { font-size: 13px; }
.ab-credit,
.ab-credit span,
.ab-credit a { font-size: 13px; }

@media (max-width: 760px) {
  /* The Round-4 one-row header fix caps .site-brand__text at 150/128/112px
     and shrank the NAME to 10.5px so English ("Great Marriage Services")
     could not wrap. The floor forbids 10.5px, so the name goes back to 13px
     and is allowed TWO lines inside the same capped width instead — the
     brand block then measures ~30px, still shorter than the 40px brand mark,
     so the header stays one row and does not grow. (The tagline already
     hides ≤480px, which is what frees the second line.) */
  .site-brand__name {
    font-size: 13px !important;
    line-height: 1.15;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .gms-cl-hi { font-size: 15px; }
  body { font-size: 16px; }               /* U3: body 16px */
}

/* ==========================================================================
   U4 — TAP TARGETS >= 44x44 on <=760px.
   Measured offenders (375px): the two language flag buttons 30x26, theme
   34x34, hamburger 34x34, footer links 109x20 (x14), .ab-credit__site 137x23,
   checklist toolbar buttons h32, the Guests <select> 57x16, the ＋/✓ chip
   24x24, food-catering's 120 "विवरण देखें" buttons 135x33, pandit-samagri's
   284 .plus 22x22 + 284 qty <select> 58x23, packing's 736 .pick checkboxes
   25x25 + 736 qty inputs 69x32 + 736 status selects 75x32.
   The selectors below are the union of those, written against the real
   class names rather than a blanket `a,button` rule — a blanket rule would
   also hit inline prose links, where min-height does nothing useful and
   the visual result is a broken line box.
   ========================================================================== */
@media (max-width: 760px) {
  .site-header .gms-lang button,
  .site-header .theme-toggle,
  .site-header .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  .site-brand { min-height: 44px; }
  .nav__link,
  .nav__sublink { min-height: 44px; display: flex; align-items: center; }

  .gms-fcol a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .gms-contactbar a { min-height: 44px; }
  .ab-credit__site { display: inline-flex; align-items: center; min-height: 44px; }
  .gms-care a { min-height: 48px; }

  /* checklist shell */
  .gms-cl-search input { min-height: 44px; }
  .gms-cl-search button,
  .gms-cl-toolbtns button,
  .gms-sel-bar button { min-height: 44px; min-width: 44px; }
  .gms-sel-bar .gms-guests { min-height: 44px; }
  .gms-sel-bar .gms-guests select { min-height: 44px; min-width: 44px; }
  .gms-cat { min-height: 44px; }
  .gms-cl-sechead { min-height: 48px; }
  .gms-cl-plus {
    width: 44px; height: 44px; right: 4px; top: 4px;
    border-radius: 12px; font-size: 18px;
  }
  .gms-cl-card { padding-right: 54px; }
  .ab-btn { min-height: 44px; }
  /* a hero tile is one third of a 375px row (~113px wide) and taller than
     44px with its icon+label, so the touch floor is already met — the U2
     height above is what governs, and must not be raised back here. */

  /* --- page-scoped apps. These beat a (0,2,0) page rule, hence !important;
     each one is a control the page's own sheet sizes explicitly. --- */
  .pg-food-catering .view-btn { min-height: 44px !important; }
  .pg-food-catering .cat-btn { min-height: 44px !important; }
  .pg-food-catering .summary button,
  .pg-food-catering .modal-actions button,
  .pg-food-catering .close { min-height: 44px !important; min-width: 44px !important; }

  .psg-app .plus { width: 44px !important; height: 44px !important; font-size: 20px !important; }
  .psg-app select,
  .psg-app .qty select { min-height: 44px !important; min-width: 44px !important; }
  .psg-app .psg-toolbar button { min-height: 44px !important; }
  .psg-app .catBtn,
  .psg-app .cat-btn,
  .psg-app .chip { min-height: 44px !important; }
  /* the search box carries NO type attribute in the source, so
     input[type="text"] never matched it — measured 267x33 live. Selected by
     its wrapper instead. #clear and #clearSelections are the page own reset
     buttons, 59x33 and 56x30. */
  .psg-app .search input,
  .psg-app .search button,
  .psg-app #clear,
  .psg-app #clearSelections,
  .psg-app .selectionBar button { min-height: 44px !important; min-width: 44px !important; }

  .pk-app .pick { width: 44px !important; height: 44px !important; }
  .pk-app .item-actions input,
  .pk-app .item-actions select { height: 44px !important; min-width: 44px !important; font-size: 13px !important; }
  .pk-app .controlgrid input,
  .pk-app .controlgrid select,
  .pk-app .controlgrid button,
  .pk-app .selection-bar button,
  .pk-app .toolbar button { min-height: 44px !important; }

  .pg-food-counters button,
  .pg-food-counters select,
  .pg-food-counters input:not([type="hidden"]),
  .pg-food-shopping-planner button,
  .pg-food-shopping-planner select,
  .pg-food-shopping-planner input:not([type="hidden"]) { min-height: 44px !important; }

  .pt-app button,
  .pt-app select,
  .mp-app button,
  .mp-app select,
  .bbb-app button,
  .bbb-app select,
  .ps-app button,
  .ps-app select { min-height: 44px !important; }
}

/* ==========================================================================
   U5 — FIXED / STICKY CHROME BUDGET on <=1239px.
   Measured before at 375px on food-catering: the page's own <header> 79px +
   its .summary bar 115px + the care bar 65px = 259px, a third of the screen.
   Budget: at most ONE sticky bar besides the header and the care bar, and a
   measured total <= 130px.
   ========================================================================== */
@media (max-width: 1239.98px) {
  /* food-catering ships its OWN sticky title bar duplicating the shell
     header — it is a scroll-away banner on a phone, not chrome. */
  .pg-food-catering header { position: static !important; }
  /* its sticky selection summary becomes a compact single-row bottom sheet:
     the two action buttons sit inline with the total instead of stacking
     (the page's own ≤720px rule made it a 115px column). */
  .pg-food-catering .summary {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    bottom: 6px !important;
    overflow-x: auto;
  }
  .pg-food-catering .summary > * { flex: 0 0 auto; }
  .pg-food-catering .summary button { width: auto !important; padding: 9px 12px !important; }
  .pg-food-catering .summary strong { font-size: 16px !important; }

  /* pandit-samagri's export toolbar is only actionable once something is
     selected — hidden until then, so the page opens with zero sticky chrome
     (the class is toggled by pandit-samagri.js's updateSelection()). */
  .psg-app .psg-toolbar { position: static !important; }
  .psg-app.psg-has-sel .psg-toolbar {
    position: sticky !important;
    bottom: 0;
    top: auto;
    z-index: 30;
  }
  /* packing's control grid is a filter panel, not chrome */
  .pk-app .controls { position: static !important; }
}
@media (max-width: 760px) {
  /* U5: "the selection bar shows only when >=1 item is selected" — the
     checklist shell's bar is sticky-bottom and was always on screen even at
     0 selected, where every button in it is a no-op. */
  body:not(.gms-has-sel) .gms-sel-bar { display: none; }
}

/* ==========================================================================
   U6 — LONG LISTS
   Sections collapsed by default (all but the first) on the long checklist
   pages; the toolbar's existing "सब खोलें / Expand All" button opens them.
   The compact 2-per-row card variant is for cards that are icon + name only
   (no qty/status control) — a card with controls stays 1 per row.
   ========================================================================== */
.gms-cl-section:not(.open) .gms-cl-grid { display: none; }

@media (max-width: 760px) {
  /* icon + name only -> 2 per row */
  .gms-cl-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gms-cl-card { min-height: 84px; padding: 8px; padding-right: 50px; }
  .gms-cl-icon { width: 32px; height: 32px; flex: 0 0 32px; font-size: 17px; }
  /* a grid whose cards carry qty/status controls stays one per row */
  .gms-cl-grid--rich { grid-template-columns: 1fr; }
  .pk-app .item-grid { grid-template-columns: 1fr !important; }
  .psg-app .grid,
  .psg-app .cards { grid-template-columns: 1fr !important; }
}

/* packing + food-counters collapsible sections (their own markup) */
.pk-app .section-card:not(.open) .item-grid { display: none; }
.pk-app .section-head { cursor: pointer; user-select: none; }
.pk-app .section-head::after {
  content: "▾";
  margin-left: 10px;
  font-size: 15px;
  color: var(--gold-ink);
  transition: transform .18s;
}
.pk-app .section-card:not(.open) .section-head::after { transform: rotate(-90deg); }
.psg-app .sec:not(.open) .grid { display: none; }
.psg-app .sectitle { cursor: pointer; user-select: none; }
.psg-app .sectitle::after { content: "▾"; margin-left: auto; padding-left: 10px; font-size: 15px; color: var(--gold-ink); transition: transform .18s; }
.psg-app .sec:not(.open) .sectitle::after { transform: rotate(-90deg); }
.psgExpandAll { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0 10px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--navy); font: 800 13px/1 var(--font-nav); cursor: pointer; }
:root[data-theme="dark"] .psgExpandAll, :root:not([data-theme="light"]) .psgExpandAll { color: var(--gold-ink); }

/* ==========================================================================
   U7 — VERTICAL RHYTHM on mobile.
   Measured before: `.ab-s{margin-top:clamp(64px,9vw,110px)}` resolves to its
   64px FLOOR at 375px (9vw = 34px), so every block was 64px apart and the
   hero-to-first-block gap was the same — the "big empty bands" in the audit.
   ========================================================================== */
@media (max-width: 760px) {
  .ab-s { margin-top: 28px; }
  .ab-cta { margin-top: 28px; }
  .ab-hero + .ab-s { margin-top: 20px; }
  .ab-grid { margin-top: 16px; gap: 10px; }
  .ab-panel { padding: 14px; margin-top: 14px; }
  .ab-h2 { margin-bottom: 10px; }
  .ab-eyebrow { margin-bottom: 8px; }
  .gms-footer { margin-top: 28px; }
}

/* ==========================================================================
   U8 — TABLET (761–1239px): 2–3 cards per row, the drawer nav is the only
   navigation (the boxed 2-row desktop nav is display:none below 1240px in
   gms-ab.css — the hamburger is what opens it).
   ========================================================================== */
@media (min-width: 761px) and (max-width: 1239.98px) {
  .ab-grid--3, .ab-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .gms-cl-grid { grid-template-columns: repeat(3, 1fr); }
  .ab-hero__panel { padding-top: 26px; padding-bottom: 26px; }
  .gms-hero-tiles { padding: 14px; gap: 10px; }
  .gms-hero-tile { min-height: 62px; max-height: 96px; padding: 8px 6px; }
  .gms-hero-tile__icon { width: 32px; height: 32px; font-size: 17px; }
  .gms-hero-tile__label { font-size: 13px; }
  .ab-s { margin-top: 40px; }
  .ab-hero + .ab-s { margin-top: 26px; }
  .ab-cta { margin-top: 40px; }
  /* A 768px tablet is a TOUCH device, so the same 44px floor applies. The
   first pass only covered the header controls, and a real 768px sweep then
   measured 15-144 sub-40px controls per page (footer links 219x28, the
   checklist toolbar 89x33, packing 151x38, samagri 120x34). Same selector
   set as the mobile block. */
  .site-header .gms-lang button,
  .site-header .theme-toggle,
  .site-header .nav-toggle { min-width: 44px; min-height: 44px; }
  .site-brand { min-height: 44px; }
  .nav__sublink { min-height: 44px; display: flex; align-items: center; }
  .gms-fcol a { display: flex; align-items: center; min-height: 44px; }
  .gms-contactbar a { min-height: 44px; }
  .ab-credit__site { display: inline-flex; align-items: center; min-height: 44px; }
  .gms-care a { min-height: 48px; }
  .gms-cl-search input,
  .gms-cl-search button,
  .gms-cl-toolbtns button,
  .gms-sel-bar button,
  .gms-sel-bar .gms-guests,
  .gms-sel-bar .gms-guests select,
  .gms-cat,
  .ab-btn { min-height: 44px; }
  .gms-cl-sechead { min-height: 48px; }
  .gms-cl-plus { width: 44px; height: 44px; right: 5px; top: 5px; border-radius: 12px; font-size: 18px; }
  .gms-cl-card { padding-right: 54px; }
  .pg-food-catering .view-btn,
  .pg-food-catering .cat-btn,
  .pg-food-catering .summary button,
  .pg-food-catering .close { min-height: 44px !important; }
  .psg-app .plus { width: 44px !important; height: 44px !important; font-size: 20px !important; }
  .psg-app select,
  .psg-app .search input,
  .psg-app .search button,
  .psg-app #clear,
  .psg-app #clearSelections,
  .psg-app .psg-toolbar button,
  .psg-app .cat { min-height: 44px !important; }
  .pk-app .pick { width: 44px !important; height: 44px !important; }
  .pk-app .item-actions input,
  .pk-app .item-actions select,
  .pk-app .controlgrid input,
  .pk-app .controlgrid select,
  .pk-app .controlgrid button,
  .pk-app .selection-bar button,
  .pk-app .toolbar button { min-height: 44px !important; }
  .pg-food-counters button,
  .pg-food-counters select,
  .pg-food-counters input:not([type="hidden"]),
  .pg-food-shopping-planner button,
  .pg-food-shopping-planner select,
  .pg-food-shopping-planner input:not([type="hidden"]),
  .pt-app button, .pt-app select,
  .mp-app button, .mp-app select,
  .bbb-app button, .bbb-app select,
  .ps-app button, .ps-app select { min-height: 44px !important; }
}

/* ==========================================================================
   U9 — HORIZONTAL PILL RAILS
   Every rail that is deliberately wider than the viewport must live in an
   overflow-x container with scroll-snap and a visible right-edge fade, so a
   reader can tell there is more to the right. Nothing ELSE may exceed the
   viewport (measured wideEls outside rails = 0 both before and after).
   ========================================================================== */
.gms-cats,
.pg-food-catering .catnav,
.psg-app .catnav,
.psg-app .cats {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.gms-cats > *,
.pg-food-catering .catnav > *,
.psg-app .catnav > *,
.psg-app .cats > * { scroll-snap-align: start; }

@media (max-width: 899.98px) {
  .gms-rail-fade { position: relative; }
  .gms-cats,
  .pg-food-catering .catnav {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
}

/* ==========================================================================
   U10 — food-catering's duplicate inner language toggle is removed from the
   markup by gen-food-catering.js; this hides it defensively if the source
   part file is ever re-extracted with the block still in it.
   ========================================================================== */
.pg-food-catering .langs { display: none !important; }

.gms-care { max-width: 100%; box-sizing: border-box; }

/* ==========================================================================
   Misc — U11 makes each checklist accordion header a real <h2> wrapping the
   existing <button> (the WAI-ARIA accordion pattern: the heading carries the
   outline level, the button carries the control). The heading must not bring
   the master's h2 block spacing/serif sizing with it — the visible title is
   still .gms-cl-sectitle-text inside the button, unchanged at 17px.
   ========================================================================== */
.gms-cl-sech2 {
  margin: 0;
  font: inherit;
  color: inherit;
  border: 0;
  padding: 0;
}
.gms-cl-sech2::after,
.gms-cl-sech2::before { content: none; }
@media (max-width: 760px) { .gms-cl-sectitle-text { font-size: 15px; } }

/* ==========================================================================
   U6 (continued) — packing.html density on a phone.
   Measured at 375px with sections collapsed: 23 section headers = 3,081px
   and the one open section's 42 cards = 7,687px (171px per card), for a
   12,864px document. The card is a 38px icon + three text lines + a
   qty/status row; the header repeats the SAME subtitle sentence 23 times.
   Compressed below to land under the 12,000px target without removing any
   item, control or data.
   ========================================================================== */
@media (max-width: 760px) {
  .pk-app .section-head { padding: 10px; gap: 8px; }
  .pk-app .section-icon { width: 36px; height: 36px; font-size: 18px; }
  .pk-app .section-head h2 { font-size: 16px; }
  /* "Wedding packing items • select what applies to your function" is the
     same sentence on all 23 headers — it says nothing per-section and costs
     ~34px x 23 on a phone. */
  .pk-app .section-head > .section-title p { display: none; }
  .pk-app .item-card { padding: 8px; gap: 6px; }
  .pk-app .item-head { gap: 6px; padding-right: 50px; }
  .pk-app .item-icon { width: 32px; height: 32px; flex: 0 0 32px; font-size: 16px; }
  .pk-app .item-name { line-height: 1.25; }
  .pk-app .item-id { line-height: 1.2; }
  .pk-app .mini-tag { display: inline-block; line-height: 1.3; }
  .pk-app .item-actions { gap: 6px; margin-top: 0; }
}

/* ==========================================================================
   ROUND 5 REGRESSION FIX — mobile header back to ONE row.

   Measured at 375x812 on the first V.5 build: header 122px, TWO rows —
   .site-brand alone on row 1 (351px wide) and the four controls on row 2.
   Cause, measured rather than guessed: .site-header__inner is
   `flex-wrap: wrap` below 1240px, and the U4 touch floor took the two flag
   buttons from 30x26 to 44x44 (+28px) while the U3 type floor took the brand
   name from 10.5px to 13px. The line came to 40 + 8 + 99 + 8 + 200 = 355px
   against a 351px content box — over by FOUR pixels, so it wrapped.

   Fixed by making the row unable to wrap and giving the width back where it
   costs nothing: `flex-wrap: nowrap`, 6px gaps instead of 8, 10px side
   padding, a 36px brand mark, and flags at 44x36 (44 wide keeps the touch
   target, 36 tall is enough for a 20x14 flag and is not the row's tallest
   item anyway). The brand text is `min-width: 0` with no max-width and no
   ellipsis — it is allowed to take two 15px lines inside whatever space is
   left, which is still shorter than the 44px control row, so the header
   height is governed by the controls, not the title.
   ========================================================================== */
@media (max-width: 760px) {
  .site-header__inner {
    flex-wrap: nowrap !important;
    gap: 6px;
    /* 7px + 44px control + 7px + the header 1px bottom border = 59px, under
       the 60px budget; 8px measured 61. */
    padding: 7px 10px;
    align-items: center;
  }
  .site-brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
    /* the row is already 44px tall (theme + hamburger), so keeping the
       brand link itself at the 44px touch floor costs no header height. */
    min-height: 44px;
  }
  .site-brand__text {
    max-width: none !important;
    min-width: 0;
    overflow: visible;
  }
  .site-brand__name {
    /* no ellipsis: two lines at the 13px floor, never a truncated brand */
    -webkit-line-clamp: 2;
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .gms-mark { width: 36px; height: 36px; font-size: 18px; border-radius: 11px; flex: 0 0 36px; }
  .site-header__controls { gap: 6px; flex: 0 0 auto; flex-wrap: nowrap; }
  .site-header .gms-lang { gap: 4px; }
  .site-header .gms-lang button {
    min-width: 44px; width: 44px;
    min-height: 36px; height: 36px;
    padding: 0;
  }
  .site-header .theme-toggle,
  .site-header .nav-toggle { min-width: 44px; width: 44px; min-height: 44px; height: 44px; padding: 0; }
  .nav-toggle span:not(.nav-toggle__bars) { display: none; }  /* the word "Menu" — the bars are the control */
}
@media (max-width: 400px) {
  .site-header__inner { padding: 7px 8px; gap: 5px; }
  .site-header__controls { gap: 4px; }
}

/* ==========================================================================
   ROUND 6 — PAGINATION (the shared pager in gms-ab.js).
   Rule-4 dot-pill vocabulary, the same one .gms-pills already uses, so the
   pager reads as part of the site rather than as a bolted-on widget.
   ========================================================================== */
.gms-page-hidden { display: none !important; }

.gms-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 12px 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-nav);
}
.gms-pager[hidden] { display: none !important; }

.gms-pager__info {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-right: auto;
}
.gms-pager__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 38px;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 700 13px/1 var(--font-nav);
  cursor: pointer;
}
/* the Rule-4 gold dot, on the page-number pills only — the arrows and the
   Show-all toggle are controls, not list entries */
.gms-pager__pill[data-act="go"]::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  flex: 0 0 auto;
}
.gms-pager__pill:hover { border-color: var(--gold); color: var(--gold-ink); }
.gms-pager__pill.is-current {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.gms-pager__pill.is-current::before { background: var(--gold-soft); }
.gms-pager__arrow { font-size: 17px; font-weight: 900; }
.gms-pager__all { color: var(--gold-ink); border-color: var(--tint-1-line, #EFE2BC); }
.gms-pager__gap { color: var(--muted); font-weight: 800; padding: 0 2px; }

:root[data-theme="dark"] .gms-pager__pill.is-current,
:root:not([data-theme="light"]) .gms-pager__pill.is-current {
  /* --navy flips to a light grey in dark mode (rulebook §8), which would put
     white text on a near-white pill. The current-page pill is a permanently
     dark surface, so it is not themed. */
  background: #1B2A5E;
  border-color: #1B2A5E;
  color: #fff;
}

/* a pager belongs to its section: when the accordion is closed the section's
   grid is display:none, but the pager is a SIBLING of that grid and would
   otherwise stay on screen under a collapsed header. */
.gms-cl-section:not(.open) > .gms-pager,
.pk-app .section-card:not(.open) .gms-pager,
.psg-app .sec:not(.open) .gms-pager { display: none !important; }

@media (max-width: 760px) {
  .gms-pager { gap: 6px; margin: 12px 8px 4px; }
  .gms-pager__info { width: 100%; margin-right: 0; }
  /* U4's touch floor applies to the pager's own controls too */
  .gms-pager__pill { min-height: 44px; min-width: 44px; padding: 6px 10px; }
}

/* ==========================================================================
   ROUND 6 — tent-pandal density on a phone.
   Measured at 375 with pagination live (12 of 104 cards on screen): 9,050px,
   made of hero 1,161 (of which the 8 category tabs alone were 335px, stacked
   two-per-row) + 12 cards x 432 + the page's own info/disclaimer blocks.
   The target is < 8,000. Nothing is removed — the tab rail becomes a
   horizontal scroller (the U9 pattern already used for .gms-cats), and the
   card's own padding/price block tighten.
   ========================================================================== */
@media (max-width: 760px) {
  .tp-app .tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .tp-app .tabs > * { flex: 0 0 auto; scroll-snap-align: start; min-height: 44px; }
  /* the 5 hero pills wrapped to three rows (120px); same scroll-rail
     treatment as the tabs above, which is the U9 pattern for this site. */
  .tp-app .hero-pills {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
    mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
  }
  .tp-app .hero-pills > * { flex: 0 0 auto; scroll-snap-align: start; padding: 6px 10px; }
  .tp-app .tp-hero h1 { font-size: 26px; line-height: 1.15; margin-bottom: 8px; }
  .tp-app .tp-hero p { font-size: 13.5px; line-height: 1.5; }
  .tp-app .tp-hero .container { padding-top: 16px; padding-bottom: 16px; }
  .tp-app .summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tp-app .summary .stat { padding: 10px; }

  /* 12 cards are on screen at a time, so every px inside one card is worth
     12 px of document height — measured 403px per card at padding 12/gap 8,
     291px of which is real content and 112px padding+gaps. */
  .tp-app #grid .card { padding: 10px; gap: 6px; }
  .tp-app #grid .card .pricebox { padding: 10px; }
  .tp-app #grid .card .note { font-size: 13px; line-height: 1.4; margin-top: 6px; }
  .tp-app #grid .card h3 { font-size: 16px; line-height: 1.2; margin: 6px 0 2px; }
  .tp-app #grid .card .pills { gap: 5px; margin-top: 4px; }
  .tp-app #grid .card .sub { font-size: 13px; line-height: 1.35; }
  .tp-app #grid .card .actions { gap: 6px; padding-top: 8px; }
  .tp-app .info { gap: 10px; }
  .tp-app .info .box { padding: 12px; }
}