/* Layout fixes v29 (manifest "layout_v29", wave Q 2026-11-01): one shared module, linked last in <head> on every
   redesigned page so it wins the cascade over each page's inline <style>. Measured by deploy/layout/overlap-audit.js. */

/* Header (home, guides, docs): labels never wrap, the logo never shrinks, and the nav hides (CTA stays, the menu button below opens it) below the
   width where brand + 5 labels + button fit on one row (~730 px of content; 900 px viewport leaves ~830 px). */
.bar .brand{flex:none}
.bar nav a{white-space:nowrap}
@media (max-width:900px){.bar nav{display:none}.bar .btn{margin-left:auto}}

/* Mobile menu (fix round 2): releases/lib/layout.mjs puts <button class="mnav" aria-controls="site-nav"> right before every redesigned
   header's nav (which gets id="site-nav"); /assets/layout.js toggles aria-expanded. The button shows exactly where each header hides
   its nav (home/guides <= 900, DG <= 960, docs <= 1199) and opens the same links as a dropdown under the header (absolute: no shift).
   Row at 360 px (320 px of content): brand 135 (DG 160) + 8 + menu 36 + 8 + CTA 119 (DG 96) = 306 (308) px; docs: Menu 82 +
   logo 34 + search 40 + view switcher 85 (24 px buttons, the WCAG 2.2 minimum) + menu 36 + 4 x 8 = 309 px. */
.mnav{display:none;flex:none;align-items:center;justify-content:center;width:40px;height:40px;margin-left:auto;padding:0;border:1.5px solid var(--ink);border-radius:var(--r-ctl);background:var(--white);color:var(--ink);cursor:pointer}
.mnav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mnav[aria-expanded="true"]{background:var(--ink);color:var(--white)}
.bar .mnav~.btn,.hdr .mnav~.btn{margin-left:0}
.bar,.hdr .wrap{position:relative}
@media (max-width:900px){.bar .mnav{display:inline-flex}.bar{gap:10px}}
@media (max-width:960px){.hdr .mnav{display:inline-flex}.hdr .wrap{gap:10px}}
@media (max-width:1199px){.docs .bar .mnav{display:inline-flex}}
@media (max-width:768px){.docs .bar .mnav{margin-left:0}}
.mnav[aria-expanded="true"]+nav{display:flex;position:absolute;top:calc(100% + 1px);right:var(--gut);z-index:60;flex-direction:column;gap:0;margin:0;min-width:220px;padding:8px;background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r-ctl);box-shadow:5px 5px 0 var(--ink)}
.mnav[aria-expanded="true"]+nav a{display:block;padding:12px 14px;border-radius:8px;font-size:16px;white-space:nowrap}
.mnav[aria-expanded="true"]+nav a:hover{background:var(--wash)}
@media (max-width:400px){.docs .vs button{width:24px;height:24px}.mnav{width:36px}.bar,.hdr .wrap{gap:8px}.bar .btn,.hdr .btn{padding-left:12px;padding-right:12px}.hdr .brand{gap:8px;font-size:16px}}

/* Home hero H1: the font is tied to its column (container units), so "Discount Genie." (one nowrap unit, 7.16em)
   plus its sparkles (to 7.78em) always fit the 8em line. 12.5cqi = 8em per column; 8em also forces 2 lines.
   :has(.hero-vis) = the home hero only (DG and changelog also use .hero). */
.hero:has(.hero-vis) .wrap>div:first-child{container-type:inline-size}
.hero:has(.hero-vis) h1{max-width:min(100%,8em)}
.hero:has(.hero-vis) h1{padding-bottom:.2em}
@media (min-width:521px){.hero:has(.hero-vis) h1{font-size:min(clamp(48px,6.6vw,96px),12.5cqi)}}

/* Home hero badge. <= 900 px: in normal flow above the product card (was absolute over the card's title), right-aligned,
   with room for its 4deg tilt (about 9 px) and its sparkles.
   >= 901 px (fix round 2): in flow it pushed the right column ~150 px taller, leaving ~230 px of empty wash above the H1. Now its
   bottom edge is pinned 30 px into the card, on the card's empty dot bar (35 px tall); the 4deg tilt drops its right corner <= 9 px,
   so it ends <= 39 px down, above the title (35 px bar + 20 px body padding = 55 px). The column only reserves 72 px for it.
   H1 underline + end sparkle hang up to .04em + .17em (max 15 px) below the H1 box; padding-bottom .2em keeps the lede (20 px
   margin) >= 16 px clear: at 84.5 px font (1280) 16.9 + 20 - 17.7 = 19 px; at 48 px 9.6 + 20 - 10.9 = 19 px. */
@media (max-width:900px){.hero-vis{padding-top:0}.hero-vis .sticker{position:relative;top:auto;right:auto;display:block;margin:14px -6px 22px auto}}
@media (min-width:901px){.hero-vis{padding-top:72px}.hero-vis .sticker{position:absolute;top:auto;right:-6px;bottom:calc(100% - 102px);margin:0}}

/* DG hero caption (the "2/3 Sees 2 saves 10%" sticker the tier cycle rewrites; <= 92 px tall at 3 lines). It sat over the cart's
   "Total" at <= 600 px and over the arch at a vh-dependent height above. > 600 px: inside the tote photo band, which starts at
   8 stage pad + 6 border + 56 arch pad + 30 bar = 100 px and is >= 150 px tall, so top 110 + 92 = 202 < 250; left keeps it on the
   photo's empty left edge (601-960: 60 px outside the 430 px arch). <= 600 px: below the arch in the stage's bottom padding (74 px):
   caption top = 74 + 32 (arch border/padding under "Total") - 10 - 92 = 4 px below the Total line at worst. z-index over sparkles. */
.hero-stage>.caption{top:110px;z-index:5}
@media (min-width:601px) and (max-width:960px){.hero-stage>.caption{left:max(0px,calc(50% - 275px))}}
@media (max-width:600px){.hero-stage{padding-bottom:74px}.hero-stage>.caption{left:-2px;top:auto;bottom:10px}}

/* DG closing band: the third sparkle sits in the band's bottom padding (at least 80 px), never on the text.
   !important beats its inline top. */
.ask>svg.spark:nth-of-type(3){top:auto!important;bottom:clamp(16px,2.5vw,40px)}

/* Fix round 3. DG hero cart (.arch = DG only; home has its own .cart). Row at 360 px = 320 content - 2 x (5 arch border + 12 pad)
   - 2 card border - 2 x 14 body pad = 256 px (390: 286). Amounts never wrap and keep 8 px from the label; only the product name
   ellipsizes (flex: the " · " / " × " text runs become their own items, .28em gap = one space), so the quantity stays visible.
   <= 400 px at 12 px: "Cart · Canvas Weekender Tote × 5" ~196 + 8 + "$120.00" ~48 = 252 <= 256; save row "Volume break · Buy 5+ ·
   −20%" ~176 + 8 + "−$24.00" ~50 = 234 <= 256 once the 30 px pen arrow (+4 gap, decor) hides <= 374 px; at 390: 176 + 8 + 34 + 50
   = 268 <= 286. Tiers at 360: (256 - 23 vb pad/border - 18 gaps) / 4 = 53.7 px, minus 10 = 43.7 px inside; "Buy 5+" 13 px ~45 px
   wrapped, 12 px ~42 px fits on one line. */
.arch .cart div{gap:8px}
.arch .cart div:first-child>span:first-child{display:flex;gap:.28em;min-width:0;white-space:nowrap}
.arch .cart div:first-child>span:first-child>span{flex:none}
.arch .cart div:first-child>span:first-child>span:nth-child(2){flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.arch .cart #c-rule{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arch .cart div>:last-child{flex:none;white-space:nowrap}
@media (max-width:400px){.arch .cart{font-size:12px}.arch .tier b{font-size:12px;white-space:nowrap}}
@media (max-width:374px){.arch .pen-arrow{display:none}}

/* Guides hero, single column (< 960 px, guide.css goes 2-column at 960): the H1 kept its 14ch cap (369 px at 768, 41.5 px Lora),
   so "Best Shopify Discount Apps (2026)" (~640 px) broke into 3 lines beside ~360 px of empty wash. 22ch (~575 px at 768,
   balanced) = 2 lines; <= 520 px the column (<= 480 px) is narrower than 14ch anyway, so phones are unchanged. */
@media (max-width:959px){.guide h1{max-width:22ch}}