/* Manchester Printed home: loud and organised. One dominant colour per band:
   hero (ink, rainbow honeycomb) -> value strip (yellow) -> shop by product (white) -> launch offers (magenta) ->
   print packs (violet) -> traders (cyan) -> popular picks (white) -> local: town honeycomb (ink) + made in Manchester
   (yellow) -> trust (lime) -> how it works (white) -> questions (stone).
   Every grid ends on a full row at 1440 / 1024 / 390. Motion respects prefers-reduced-motion (mp-home.js too). */

.mp-sec{padding:80px 0;position:relative}
.mp-sec--tight{padding:56px 0}
.mp-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:34px;flex-wrap:wrap}
.mp-sec-head>div{max-width:64ch}
.mp-kicker{display:flex;align-items:center;gap:8px;font:600 .78rem/1 var(--mp-f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--mp-hot-text);margin-bottom:12px!important}
.mp-kicker::before{content:"";width:11px;height:12px;background:currentColor;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mp-sec-head h2{font:800 clamp(2.4rem,1.6rem + 2.4vw,3.8rem)/.95 var(--mp-f-display)!important;text-transform:uppercase}
.mp-sec-head p{margin-top:12px!important;color:var(--mp-muted);font-size:1.04rem}
.mp-front main p{max-width:72ch}
.mp-sample{font-size:.78rem!important;opacity:.85;margin-top:14px!important}
/* coloured bands: text colours follow the band */
.mp-band--ink{background:var(--mp-ink);color:#fff}
.mp-band--ink .mp-sec-head p,.mp-band--violet .mp-sec-head p{color:var(--mp-on-dark-muted)}
.mp-band--ink .mp-kicker{color:var(--mp-yellow)}
.mp-band--yellow{background:var(--mp-yellow);color:var(--mp-ink)}
.mp-band--magenta{background:var(--mp-magenta);color:var(--mp-ink)}
.mp-band--violet{background:var(--mp-violet);color:#fff}
.mp-band--violet .mp-sec-head p{color:#EDE6FF}
.mp-band--violet .mp-kicker{color:var(--mp-yellow)}
.mp-band--cyan{background:var(--mp-cyan);color:var(--mp-ink)}
.mp-band--lime{background:var(--mp-lime);color:var(--mp-ink)}
.mp-band--stone{background:var(--mp-stone)}
.mp-band--yellow .mp-kicker,.mp-band--magenta .mp-kicker,.mp-band--cyan .mp-kicker,.mp-band--lime .mp-kicker{color:var(--mp-ink)}
.mp-band--yellow .mp-sec-head p,.mp-band--magenta .mp-sec-head p,.mp-band--cyan .mp-sec-head p,.mp-band--lime .mp-sec-head p{color:var(--mp-ink)}
.mp-band--magenta .mp-link,.mp-band--cyan .mp-link,.mp-band--lime .mp-link,.mp-band--yellow .mp-link{text-decoration-color:var(--mp-ink)}
.mp-band--ink .mp-link,.mp-band--violet .mp-link{color:#fff;text-decoration-color:var(--mp-yellow)}
.mp-rainbow{height:8px;background:linear-gradient(90deg,var(--mp-magenta) 0 16.66%,var(--mp-tangerine) 0 33.33%,var(--mp-yellow) 0 50%,var(--mp-lime) 0 66.66%,var(--mp-cyan) 0 83.33%,var(--mp-violet) 0)}

/* ---------------------------------------------------------------- hero */
.mp-hero{background:var(--mp-ink);color:#fff;position:relative;overflow:hidden}
.mp-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:44px;align-items:start;padding-block:20px 26px;position:relative;z-index:1}
.mp-hero .mp-kicker{color:var(--mp-cyan)}
.mp-rot{display:grid;margin:0}
.mp-rot-i{grid-area:1/1;margin:0!important;font-family:var(--mp-f-display)!important;font-weight:800!important;font-size:clamp(2.5rem,1.3rem + 3.6vw,4.5rem)!important;line-height:.9!important;text-transform:uppercase;opacity:0;transform:translateY(14px);transition:opacity .45s var(--mp-ease),transform .45s var(--mp-ease);pointer-events:none}
.mp-rot-i.is-on{opacity:1;transform:none;pointer-events:auto}
.mp-rot-i.is-out{opacity:0;transform:translateY(-14px)}
.mp-rot-i em{font-style:normal;display:block}
.mp-rot-i:nth-child(6n+1) em{color:var(--mp-yellow)}
.mp-rot-i:nth-child(6n+2) em{color:var(--mp-magenta)}
.mp-rot-i:nth-child(6n+3) em{color:var(--mp-cyan)}
.mp-rot-i:nth-child(6n+4) em{color:var(--mp-lime)}
.mp-rot-i:nth-child(6n+5) em{color:var(--mp-tangerine)}
.mp-rot-i:nth-child(6n) em{color:var(--mp-violet-light)}
.mp-hero-lede{margin-top:14px!important;font-size:1rem;line-height:1.45;color:var(--mp-on-dark-muted);max-width:60ch}
.mp-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.mp-hero-cta .fp-btn--lg{padding:12px 20px;font-size:.98rem}
.mp-hero-cta .fp-btn--red{border-color:var(--mp-yellow)}
.mp-hero-cta .fp-btn--red:hover{box-shadow:var(--mp-shadow-magenta)}
/* hero category buttons (mp_home_chips): 3 x 4 on desktop, 2 x 6 on phones; colour accent per button from the hive
   palette; live "from" price only when the engine has one. Hover lifts (transform) and lights the border. */
.mp-chips{margin-top:16px}
.mp-chips ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.mp-chip{display:flex;align-items:center;gap:7px;min-height:44px;padding:4px 7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-left:3px solid var(--c);color:#fff;transition:transform .18s var(--mp-ease),border-color .18s,background-color .18s}
.mp-chip:hover,.mp-chip:focus-visible{transform:translateY(-2px);border-color:var(--c);background:rgba(255,255,255,.09)}
.mp-chip:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.mp-chip-i{flex:none;display:grid;place-items:center;width:28px;height:32px;background:var(--c);color:var(--mp-ink);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mp-chip-i .mp-pic{width:21px;height:21px;--acc:#fff}
.mp-chip-i .mp-ui{width:16px;height:16px}
.mp-chip-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.mp-chip-t b{font:600 .78rem/1.1 var(--mp-f-body)}
.mp-chip-t small{font:500 .68rem/1 var(--mp-f-body);color:var(--mp-on-dark-muted);font-variant-numeric:tabular-nums}
.mp-chips-all{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:600 .86rem var(--mp-f-body);color:var(--mp-yellow);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.mp-chips-all .mp-ui{width:16px;height:16px}
/* honeycomb of products: hover / focus / tap flips a cell to its live "from" price */
/* rows of 5/6/5/6 (front-page.php). Pointy-top hexes: row pitch = (cell + gap) x 0.866, so rows overlap by
   0.2887 x cell - 0.866 x gap (as % of the comb width, which is what a % margin resolves against). */
.mp-comb{position:relative;width:100%;justify-self:stretch;margin-top:2px}
.mp-comb-row{display:flex;justify-content:center;gap:1.2%}
.mp-comb-row+.mp-comb-row{margin-top:-3.5%}
.mp-cell{position:relative;flex:0 0 15.6%;aspect-ratio:1/1.1547;perspective:700px;display:block;color:var(--mp-ink)}
.mp-cell-in{position:absolute;inset:0;transition:transform .5s var(--mp-ease);transform-style:preserve-3d}
.mp-cell:hover .mp-cell-in,.mp-cell:focus-visible .mp-cell-in,.mp-cell.is-flipped .mp-cell-in{transform:rotateY(180deg)}
.mp-cell:focus-visible{outline:none}
.mp-cell-f,.mp-cell-b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:14% 6%;text-align:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mp-cell-f{background:var(--c,var(--mp-yellow))}
.mp-cell-f .mp-pic{width:38%;height:auto;--acc:#fff;color:var(--mp-ink)}
.mp-cell-f span{font:800 .78rem/.95 var(--mp-f-display);text-transform:uppercase}
.mp-cell-b{background:#fff;transform:rotateY(180deg);box-shadow:inset 0 0 0 4px var(--c,var(--mp-yellow))}
.mp-cell-b .mp-cell-l{font:600 .6rem/1.05 var(--mp-f-body)}
.mp-cell-b small{font:500 .58rem/1 var(--mp-f-body);color:var(--mp-muted)}
.mp-cell-b b{font:800 1.05rem/1 var(--mp-f-display);font-variant-numeric:tabular-nums}
.mp-cell-b em{font-style:normal;font:600 .58rem/1.1 var(--mp-f-body);text-decoration:underline;text-decoration-color:var(--mp-hot-text);text-decoration-thickness:2px;text-underline-offset:2px}
.mp-cell--ph .mp-cell-f{background:var(--mp-ink-2)}
.mp-cell--ph .mp-cell-f img{width:58%;height:auto}
.mp-comb-hint{margin-top:10px!important;text-align:center;font-size:.82rem;color:var(--mp-on-dark-muted);max-width:none!important}
/* price per piece honeycomb under the hero (front-page.php, figures from the quantity guide cache): heading left, one
   staggered row of hexagons right; a sideways-scrolling row on phones. Hover lifts a cell (transform only). */
.mp-ppc{padding:22px 0 30px;border-bottom:1px solid var(--mp-line)}
.mp-ppc-in{display:grid;grid-template-columns:1fr;gap:10px}
.mp-ppc-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:6px 18px}
.mp-ppc-head .mp-kicker{grid-column:1/-1;margin-bottom:0!important}
.mp-ppc-head h2{grid-column:1;grid-row:2}
.mp-ppc-head p:last-child{grid-column:2;grid-row:2;padding-bottom:3px}
.mp-ppc-head h2{font:800 clamp(1.6rem,1.1rem + 1.2vw,2.2rem)/.95 var(--mp-f-display)!important;text-transform:uppercase}
.mp-ppc-head p:last-child{margin-top:0!important;font-size:.84rem;line-height:1.4;color:var(--mp-ink)}
.mp-ppc-row{display:flex;justify-content:flex-start;gap:8px;padding-bottom:26px!important;padding-right:clamp(0px,calc(146px - (100vw - 1280px) / 2),146px)!important} /* keeps the row ~170px clear of the viewport edge, where the Quote / WhatsApp floats sit */
.mp-ppc-row li{flex:0 1 142px;min-width:0}
.mp-ppc-row li:nth-child(even){transform:translateY(24px)}
.mp-ppc-c{display:block;aspect-ratio:1/1.1547;transition:transform .2s var(--mp-ease)}
.mp-ppc-c:hover,.mp-ppc-c:focus-visible{transform:translateY(-4px)}
.mp-ppc-c:focus-visible{outline:none}
.mp-ppc-c:focus-visible .mp-ppc-f{outline:3px solid var(--mp-ink);outline-offset:-6px}
.mp-ppc-f{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:100%;padding:14% 6%;text-align:center;background:var(--c);color:var(--mp-ink);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mp-ppc-n{font:700 .95rem/1.1 var(--mp-f-body);max-width:92%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-ppc-p{display:flex;align-items:baseline;gap:4px}
.mp-ppc-p b{font:800 2.5rem/.9 var(--mp-f-display);font-variant-numeric:tabular-nums}
.mp-ppc-p small{font:700 .85rem/1 var(--mp-f-body)}
.mp-ppc-q{font:600 .82rem/1 var(--mp-f-body);background:#fff;color:var(--mp-ink);padding:4px 8px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
/* the living hive (mp-home.js adds .is-live while the hero is on screen; nothing moves under reduced motion):
   cells breathe a few px on staggered clocks, a soft light sweeps the comb now and then, a hovered cell buzzes before
   it flips, and the brand bee flies between cells (JS, transform only) and the cell it lands on pulses.
   Only transform / opacity animate, so it stays on the compositor; no box-shadow or layout animation. */
/* motion uses the separate translate / rotate properties on .mp-cell-in, so it composes with the flip (transform) and
   the link box itself never moves (no hover flicker at a cell's edge) */
.mp-comb.is-live .mp-cell-in{animation:mp-breathe 4.6s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -.53s)}
@keyframes mp-breathe{from{translate:0 -1.5px}to{translate:0 2px}}
.mp-comb.is-live .mp-cell:hover .mp-cell-in,.mp-comb.is-live .mp-cell:focus-visible .mp-cell-in{animation:mp-cell-buzz .14s linear 3 forwards}
@keyframes mp-cell-buzz{0%{translate:0 -3px;rotate:0deg}25%{translate:-.8px -3px;rotate:-1.2deg}75%{translate:.8px -3px;rotate:1.2deg}100%{translate:0 -3px;rotate:0deg}}
.mp-comb.is-live .mp-cell:hover .mp-cell-in,.mp-comb.is-live .mp-cell:focus-visible .mp-cell-in{transition-delay:.16s}
.mp-cell.is-landed .mp-cell-f{animation:mp-pulse .7s ease-in-out 2}
@keyframes mp-pulse{50%{transform:scale(1.07)}}
.mp-comb::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.17) 48%,rgba(255,255,255,.05) 54%,transparent 60%) 100% 0/300% 100% no-repeat;-webkit-mask-image:radial-gradient(closest-side,#000 65%,transparent);mask-image:radial-gradient(closest-side,#000 65%,transparent)}
.mp-comb.is-live::after{animation:mp-sheen 9s ease-in-out infinite 2s}
@keyframes mp-sheen{0%{opacity:0;background-position:100% 0}6%{opacity:1}32%{opacity:1;background-position:0 0}36%,100%{opacity:0;background-position:0 0}}
.mp-comb-bee{position:absolute;left:0;top:0;z-index:3;width:26px;height:26px;margin:-13px 0 0 -13px;pointer-events:none;opacity:0;transition:opacity .4s;will-change:transform}
.mp-comb-bee img{width:100%;height:auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.mp-comb.is-live .mp-comb-bee.is-on{opacity:1}
.mp-comb.is-live .mp-comb-bee img{animation:mp-buzz .12s ease-in-out infinite alternate}
/* the bee: a small flight round the hero */
.mp-bee{position:absolute;z-index:2;width:44px;height:44px;top:16%;left:47%;pointer-events:none;animation:mp-fly 22s linear infinite}
.mp-bee img{width:100%;height:auto;animation:mp-buzz .5s ease-in-out infinite alternate}
@keyframes mp-fly{0%{transform:translate(0,0) rotate(8deg)}20%{transform:translate(28vw,8vh) rotate(16deg)}40%{transform:translate(36vw,44vh) rotate(-8deg)}60%{transform:translate(8vw,54vh) rotate(-14deg)}80%{transform:translate(-10vw,22vh) rotate(6deg)}100%{transform:translate(0,0) rotate(8deg)}}
@keyframes mp-buzz{from{transform:translateY(-2px)}to{transform:translateY(2px)}}

/* ---------------------------------------------------------------- value strip on yellow */
.mp-values.mp-values--yellow{background:var(--mp-yellow);border-bottom:0}
.mp-values--yellow li{border-left-color:rgba(18,15,31,.25)}
.mp-values--yellow .mp-ui{color:var(--mp-ink)}
/* the strip sits directly under the header, above the hero: one compact line (~40px); scrolls sideways when narrow */
.mp-values.mp-values--top ul{display:flex;justify-content:space-between;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mp-values.mp-values--top ul::-webkit-scrollbar{display:none}
.mp-values.mp-values--top ul li{flex:0 0 auto;padding:10px 18px;font-size:.84rem;line-height:1.2;white-space:nowrap;border-top:0;border-left:1px solid rgba(18,15,31,.25)}
.mp-values.mp-values--top ul li:first-child{padding-left:0;border-left:0}
.mp-values.mp-values--top ul li:last-child{padding-right:0}
.mp-values.mp-values--top .mp-ui{width:18px;height:18px}

/* ---------------------------------------------------------------- background presets
   .mp-bg--{name} on the hero or a section band; which section gets which preset is set in one place: MP_HOME_BG in
   functions.php. CSS only (gradients + tiny inline SVG patterns), no image requests. Each sets its own text colour so
   headings and body copy keep WCAG AA on it. The ::before layer carries the pattern (behind content via isolation). */
.mp-bg{position:relative;isolation:isolate}
.mp-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.mp-bg--light{color:var(--mp-ink)}
/* 1. ink-grid: deep ink to indigo, thin grid fading out from the comb side, soft magenta / cyan / violet glow (hero) */
.mp-bg--ink-grid{color:#fff;background:radial-gradient(38% 55% at 76% 42%,rgba(255,31,142,.20),transparent 70%),radial-gradient(30% 45% at 94% 8%,rgba(0,194,255,.16),transparent 70%),radial-gradient(40% 60% at 62% 92%,rgba(124,77,255,.24),transparent 70%),linear-gradient(155deg,#120F1F 0%,#17122C 45%,#1E1640 100%)}
.mp-bg--ink-grid::before{background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 44px),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 44px);-webkit-mask-image:radial-gradient(75% 90% at 70% 40%,#000 30%,transparent 100%);mask-image:radial-gradient(75% 90% at 70% 40%,#000 30%,transparent 100%)}
/* 2. pastel-hive: peach / lilac / mint / sky with a faint honeycomb */
.mp-bg--pastel-hive{color:var(--mp-ink);background:linear-gradient(120deg,#FFE4D4 0%,#ECDDFF 36%,#D9F7EB 68%,#D7EDFF 100%)}
.mp-bg--pastel-hive::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66v34M28 0v34L0 50v34l28 16 28-16V50L28 34' fill='none' stroke='%23120F1F' stroke-opacity='.09' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/56px 100px}
/* 3. rainbow-dots: vibrant magenta -> violet -> cyan, darkened enough for white text (AA), tiny dot grid */
.mp-bg--rainbow-dots{color:#fff;background:linear-gradient(115deg,#B5005F 0%,#5B22C9 50%,#00669E 100%)}
.mp-bg--rainbow-dots::before{background:radial-gradient(rgba(255,255,255,.26) 1.1px,transparent 1.6px) 0 0/14px 14px}
/* 4. pastel-hexes: warm pastel with small scattered colourful hexagons */
.mp-bg--pastel-hexes{color:var(--mp-ink);background:linear-gradient(135deg,#FFF3E8 0%,#F6ECFF 55%,#E8F8FF 100%)}
.mp-bg--pastel-hexes::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill-opacity='.55'%3E%3Cpath d='M30 22l7 4v8l-7 4-7-4v-8z' fill='%23FF1F8E'/%3E%3Cpath d='M150 40l9 5v10l-9 5-9-5V45z' fill='%2300C2FF'/%3E%3Cpath d='M205 130l6 3.5v7l-6 3.5-6-3.5v-7z' fill='%23FFD400'/%3E%3Cpath d='M90 150l8 4.6v9.2l-8 4.6-8-4.6v-9.2z' fill='%237CFF3A'/%3E%3Cpath d='M20 200l6 3.5v7l-6 3.5-6-3.5v-7z' fill='%23FF7A00'/%3E%3Cpath d='M175 205l7 4v8l-7 4-7-4v-8z' fill='%23A879FF'/%3E%3C/g%3E%3Cpath d='M110 80l7 4v8l-7 4-7-4v-8z' fill='none' stroke='%23FF1F8E' stroke-opacity='.45' stroke-width='1.5'/%3E%3Cpath d='M60 110l5 2.9v5.8l-5 2.9-5-2.9v-5.8z' fill='none' stroke='%2300C2FF' stroke-opacity='.5' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/240px 240px}
/* 5. gradient-comb: violet to deep teal with a light honeycomb line, white text */
.mp-bg--gradient-comb{color:#fff;background:linear-gradient(135deg,#2B1670 0%,#3A1E8C 40%,#0A4F78 100%)}
.mp-bg--gradient-comb::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66v34M28 0v34L0 50v34l28 16 28-16V50L28 34' fill='none' stroke='%23FFFFFF' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/56px 100px}
/* 6. halftone: paper with offset cyan / magenta / yellow dot screens fading in from the right */
.mp-bg--halftone{color:var(--mp-ink);background:#FFFDF8}
.mp-bg--halftone::before{background:radial-gradient(rgba(0,194,255,.30) 1.4px,transparent 1.9px) 0 0/16px 16px,radial-gradient(rgba(255,31,142,.26) 1.4px,transparent 1.9px) 5px 5px/16px 16px,radial-gradient(rgba(255,180,0,.40) 1.4px,transparent 1.9px) 10px 2px/16px 16px;-webkit-mask-image:linear-gradient(100deg,transparent 45%,#000 100%);mask-image:linear-gradient(100deg,transparent 45%,#000 100%)}
/* 7. rainbow-mesh: soft overlapping colour blobs on cream */
.mp-bg--rainbow-mesh{color:var(--mp-ink);background:radial-gradient(40% 60% at 8% 20%,rgba(255,31,142,.22),transparent 70%),radial-gradient(40% 60% at 35% 95%,rgba(255,212,0,.30),transparent 70%),radial-gradient(40% 60% at 62% 10%,rgba(0,194,255,.24),transparent 70%),radial-gradient(40% 60% at 92% 80%,rgba(124,255,58,.26),transparent 70%),radial-gradient(35% 50% at 80% 35%,rgba(168,121,255,.24),transparent 70%),#FFF9F3}
/* 8. sunset-hive: tangerine into magenta with a white honeycomb, ink text (AA on both ends) */
.mp-bg--sunset-hive{color:var(--mp-ink);background:linear-gradient(120deg,#FFB23F 0%,#FF7A00 45%,#FF4FA3 100%)}
.mp-bg--sunset-hive::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66v34M28 0v34L0 50v34l28 16 28-16V50L28 34' fill='none' stroke='%23FFFFFF' stroke-opacity='.22' stroke-width='1.4'/%3E%3C/svg%3E") 0 0/56px 100px}
/* text follows the preset, not the band it replaces */
:is(.mp-bg--pastel-hive,.mp-bg--pastel-hexes,.mp-bg--halftone,.mp-bg--rainbow-mesh,.mp-bg--sunset-hive) :is(.mp-sec-head p,.mp-kicker){color:var(--mp-ink)}
:is(.mp-bg--pastel-hive,.mp-bg--pastel-hexes,.mp-bg--halftone,.mp-bg--rainbow-mesh,.mp-bg--sunset-hive) .fp-btn--ghost{color:var(--mp-ink);border-color:var(--mp-ink)}
:is(.mp-bg--rainbow-dots,.mp-bg--gradient-comb) .mp-sec-head p{color:#F1ECFF}
:is(.mp-bg--rainbow-dots,.mp-bg--gradient-comb) .mp-kicker{color:var(--mp-yellow)}
.mp-bg--ink-grid .mp-sec-head p{color:var(--mp-on-dark-muted)}
.mp-bg--ink-grid .mp-kicker{color:var(--mp-cyan)}

/* ---------------------------------------------------------------- shop by product: 12 tiles = 4x3 / 3x4 / 2x6 */
.mp-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mp-gap)}
.mp-type{--c:var(--mp-yellow);position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--mp-ink);color:var(--mp-ink);transition:transform var(--mp-dur) var(--mp-ease),box-shadow var(--mp-dur) var(--mp-ease)}
.mp-type:nth-child(6n+2){--c:var(--mp-magenta)}.mp-type:nth-child(6n+3){--c:var(--mp-cyan)}.mp-type:nth-child(6n+4){--c:var(--mp-lime)}.mp-type:nth-child(6n+5){--c:var(--mp-tangerine)}.mp-type:nth-child(6n){--c:var(--mp-violet-light)}
.mp-type:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--c)}
.mp-type-img{position:relative;display:block;aspect-ratio:4/3;background:var(--c);border-bottom:1px solid var(--mp-ink);overflow:hidden}
.mp-type-img img{width:100%;height:100%;object-fit:cover}
.mp-type-img .mp-pic{position:absolute;inset:0;margin:auto;width:40%;height:auto;color:var(--mp-ink);--acc:#fff;transition:transform .3s var(--mp-ease)}
.mp-type:hover .mp-type-img .mp-pic{transform:scale(1.08) rotate(-3deg)}
.mp-type-b{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;flex:1}
.mp-type-b b{font:800 1.55rem/1 var(--mp-f-display)!important;text-transform:uppercase}
.mp-type-b small{font-size:.86rem;color:var(--mp-muted);line-height:1.35}
.mp-type-from{margin-top:auto;padding-top:8px;font:800 1.3rem/1 var(--mp-f-display)}
.mp-type-from small{font:500 .74rem var(--mp-f-body);color:var(--mp-muted);margin-right:4px}

/* ---------------------------------------------------------------- offers slider on magenta */
.mp-slider{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * var(--mp-gap)) / 4);gap:var(--mp-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 6px 6px 0}
.mp-slider::-webkit-scrollbar{display:none}
.mp-offer{scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;color:var(--mp-ink);border:1px solid var(--mp-ink);transition:transform var(--mp-dur) var(--mp-ease),box-shadow var(--mp-dur) var(--mp-ease)}
.mp-offer:hover{transform:translate(-3px,-3px);box-shadow:var(--mp-shadow)}
.mp-offer-img{position:relative;display:block;aspect-ratio:4/3;background:var(--mp-stone);border-bottom:1px solid var(--mp-ink)}
.mp-offer-img .mp-ph{background:var(--mp-yellow-soft)}
.mp-label{position:absolute;left:0;top:0;background:var(--mp-ink);color:var(--mp-yellow);font:600 .72rem/1 var(--mp-f-body);letter-spacing:.12em;text-transform:uppercase;padding:8px 10px}
.mp-offer-b{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.mp-offer-t{font-weight:600;line-height:1.3}
.mp-offer-p{font:800 2.2rem/1 var(--mp-f-display);margin-top:auto}
.mp-offer-m{font-size:.84rem;color:var(--mp-muted)}
.mp-slide-btns{display:flex;gap:8px}
.mp-slide-b{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--mp-ink);background:#fff;color:var(--mp-ink);border-radius:var(--mp-r);cursor:pointer}
.mp-slide-b:first-child .mp-ui{transform:rotate(180deg)}
.mp-slide-b:hover{box-shadow:var(--mp-shadow);transform:translate(-2px,-2px)}
.mp-sec-more{margin-top:28px!important}

/* ---------------------------------------------------------------- print packs on violet: 3 / 3 / 1 */
.mp-packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mp-gap)}
.mp-pack{--c:var(--mp-yellow);display:flex;flex-direction:column;background:#fff;color:var(--mp-ink);border:1px solid var(--mp-ink);box-shadow:6px 6px 0 var(--c);transition:transform var(--mp-dur) var(--mp-ease)}
.mp-pack:nth-child(3n+2){--c:var(--mp-lime)}.mp-pack:nth-child(3n){--c:var(--mp-cyan)}
.mp-pack:hover{transform:translate(-3px,-3px)}
.mp-pack-h{display:flex;flex-direction:column;gap:6px;padding:20px 22px 16px;background:var(--c);border-bottom:1px solid var(--mp-ink)}
.mp-pack-h small{font:600 .72rem/1 var(--mp-f-body);letter-spacing:.14em;text-transform:uppercase}
.mp-pack-h b{font:800 2rem/.95 var(--mp-f-display);text-transform:uppercase}
.mp-pack-h span{font-size:.9rem;line-height:1.4}
.mp-pack ul{padding:14px 22px 6px!important;display:grid;gap:8px}
.mp-pack li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;font-size:.92rem;line-height:1.35}
.mp-pack li::before{content:"";width:12px;height:13px;margin-top:3px;background:var(--mp-ink);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mp-pack-f{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4px 12px;padding:16px 22px 20px;border-top:1px solid var(--mp-line)}
.mp-pack-f span{font-size:.84rem;color:var(--mp-muted)}
.mp-pack-f strong{grid-row:1/3;grid-column:2;font:800 2.5rem/1 var(--mp-f-display);font-variant-numeric:tabular-nums}
.mp-pack-f em{font-style:normal;font-weight:600;font-size:.86rem;color:var(--mp-hot-text)}
.mp-pack-go{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;background:var(--mp-ink);color:#fff;font-weight:600}
.mp-pack-go .mp-ui{color:var(--c)}

/* ---------------------------------------------------------------- traders on cyan: 10 = 5x2 / 5x2 / 2x5 */
.mp-trades{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.mp-trade{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:150px;padding:18px;background:#fff;border:1px solid var(--mp-ink);color:var(--mp-ink);transition:transform var(--mp-dur) var(--mp-ease),box-shadow var(--mp-dur) var(--mp-ease)}
.mp-trade:hover{transform:translate(-3px,-3px);box-shadow:var(--mp-shadow)}
.mp-trade-ic{display:grid;place-items:center;width:52px;height:58px;background:var(--mp-ink);color:var(--mp-cyan);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mp-trade-ic .mp-ui{width:24px;height:24px}
.mp-trade b{font:800 1.45rem/1 var(--mp-f-display);text-transform:uppercase;margin-top:auto}
.mp-trade small{font-size:.82rem;color:var(--mp-muted);line-height:1.3}

/* ---------------------------------------------------------------- popular picks: 4 / 4 / 2 */
.mp-best{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------------------------------------------------------------- local: town honeycomb on ink */
.mp-local{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:center}
.mp-map{width:100%;height:auto;display:block;overflow:visible}
.mp-map a{cursor:pointer;outline:none}
.mp-map polygon{stroke:var(--mp-ink);stroke-width:3;transition:transform .2s var(--mp-ease);transform-box:fill-box;transform-origin:center}
.mp-map text{font:800 14px/1 var(--mp-f-display);text-transform:uppercase;fill:var(--mp-ink);pointer-events:none;text-anchor:middle}
.mp-map a:hover polygon,.mp-map a:focus-visible polygon,.mp-map a.is-on polygon{transform:scale(1.14);stroke:#fff;stroke-width:3.5}
.mp-map .mp-m8 polygon{fill:#fff}
.mp-townpanel{background:var(--mp-ink-2);border:1px solid var(--mp-ink-3);border-top:6px solid var(--mp-yellow);padding:24px}
.mp-townpanel small{display:block;font:600 .74rem/1 var(--mp-f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--mp-cyan);margin-bottom:8px}
.mp-townpanel h3{font:800 2.4rem/.95 var(--mp-f-display)!important;text-transform:uppercase;color:#fff}
.mp-townpanel p{margin-top:12px!important;color:var(--mp-on-dark-muted);font-size:.95rem}
.mp-townpanel dl{margin-top:16px!important;border-top:1px solid var(--mp-ink-3)}
.mp-townpanel dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--mp-ink-3);font-size:.92rem}
.mp-townpanel dt{color:var(--mp-on-dark-muted)}
.mp-townpanel dd{color:#fff;font-weight:500}
.mp-townpanel .fp-btn{margin-top:18px}
.mp-cloud{display:none;flex-wrap:wrap;gap:8px}
.mp-cloud a{padding:8px 12px;border:1px solid var(--mp-ink-3);background:var(--mp-ink-2);color:#fff;font-weight:500;font-size:.9rem;border-radius:var(--mp-r)}
.mp-cloud a.is-on{background:var(--mp-yellow);color:var(--mp-ink);border-color:var(--mp-yellow)}
.mp-made-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:32px;align-items:center;padding-block:44px}
.mp-made-in>img{width:96px;height:auto}
.mp-made h2{font:800 clamp(2.2rem,1.4rem + 2.6vw,4rem)/.92 var(--mp-f-display)!important;text-transform:uppercase}
.mp-made p{margin-top:10px!important;font-size:1.02rem}
.mp-made-hex{display:grid;grid-template-columns:repeat(3,28px);gap:4px}
.mp-made-hex i{width:28px;height:32px;background:var(--mp-ink);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mp-made-hex i:nth-child(2n){background:var(--mp-magenta)}

/* ---------------------------------------------------------------- trust on lime: 5 + company line */
.mp-trust5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--mp-ink);background:#fff}
.mp-trust5 li{display:flex;flex-direction:column;gap:8px;padding:22px 20px;border-left:1px solid var(--mp-ink)}
.mp-trust5 li:first-child{border-left:0}
.mp-trust5 b{font:800 2.2rem/.95 var(--mp-f-display);text-transform:uppercase}
.mp-trust5 span{font-size:.9rem;color:var(--mp-muted);line-height:1.4}
.mp-trust5 .mp-ui{width:26px;height:26px}
.mp-company{margin-top:16px!important;font-size:.88rem}

/* ---------------------------------------------------------------- how it works */
.mp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--mp-ink);counter-reset:s}
.mp-step{--c:var(--mp-yellow);padding:26px 22px 28px;border-left:1px solid var(--mp-ink);counter-increment:s;background:#fff}
.mp-step:nth-child(2){--c:var(--mp-magenta)}.mp-step:nth-child(3){--c:var(--mp-cyan)}.mp-step:nth-child(4){--c:var(--mp-lime)}
.mp-step:first-child{border-left:0}
.mp-step::before{content:counter(s);display:grid;place-items:center;width:48px;height:54px;margin-bottom:16px;background:var(--c);color:var(--mp-ink);font:800 1.6rem/1 var(--mp-f-display);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mp-step h3{font:800 1.6rem/1 var(--mp-f-display)!important;text-transform:uppercase;margin-bottom:8px!important}
.mp-step p{font-size:.93rem;color:var(--mp-muted)}

/* ---------------------------------------------------------------- questions */
.mp-faq-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start}
.mp-faq{border-top:1px solid var(--mp-ink)}
.mp-faq details{border-bottom:1px solid var(--mp-line-strong)}
.mp-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:600;font-size:1.05rem;cursor:pointer;list-style:none}
.mp-faq summary::-webkit-details-marker{display:none}
.mp-faq summary .mp-ui{flex:none;width:20px;height:20px;transition:transform var(--mp-dur)}
.mp-faq details[open] summary .mp-ui{transform:rotate(180deg)}
.mp-faq details p{padding:0 0 20px;color:var(--mp-muted)}
.mp-faq details p a{color:var(--mp-ink);text-decoration:underline;text-decoration-color:var(--mp-hot-text);text-decoration-thickness:2px}
.mp-helpcard{background:var(--mp-violet);color:#fff;padding:28px;position:sticky;top:24px;box-shadow:6px 6px 0 var(--mp-ink)}
.mp-helpcard h2{font:800 2.2rem/.95 var(--mp-f-display)!important;text-transform:uppercase}
.mp-helpcard>p{margin-top:10px!important;color:#fff}
.mp-helplist{margin-top:18px!important;border-top:1px solid rgba(255,255,255,.3)}
.mp-helplist a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.3)}
.mp-helplist .mp-ui{color:var(--mp-yellow);width:22px;height:22px}
.mp-helplist b{display:block;font-weight:600}
.mp-helplist small{display:block;color:#EDE6FF;font-size:.85rem}
.mp-helpcard .fp-btn{margin-top:20px}

/* price per piece band (mu-plugins/ib-qtyguide.php ib_qg_home_strip) */
.ib-ppp{background:var(--mp-ink);color:#fff;padding:40px 0}
.ib-ppp__in{max-width:var(--mp-container);margin:0 auto;padding:0 var(--mp-gutter);display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:center}
.ib-ppp__k{font:600 .74rem/1 var(--mp-f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--mp-cyan);margin:0 0 10px}
.ib-ppp__head h2{font:800 2rem/1 var(--mp-f-display);text-transform:uppercase;margin:0;color:#fff}
.ib-ppp__sub{margin:10px 0 0;font-size:.86rem;color:var(--mp-on-dark-muted)}
.ib-ppp__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--mp-ink-3)}
.ib-ppp__list li{border-left:1px solid var(--mp-ink-3)}
.ib-ppp__list li:first-child{border-left:0}
.ib-ppp__i{display:flex;flex-direction:column;gap:6px;padding:16px;color:#fff;text-decoration:none;height:100%}
.ib-ppp__i:hover{background:var(--mp-ink-2)}
.ib-ppp__n{font-weight:600;font-size:.9rem}
.ib-ppp__p b{font:800 2rem/1 var(--mp-f-display);color:var(--mp-lime)}
.ib-ppp__p small,.ib-ppp__q{font-size:.8rem;color:var(--mp-on-dark-muted)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1279px){
  .mp-ppc-row{flex-wrap:wrap;justify-content:center;row-gap:30px}
  .mp-ppc-row li{flex:0 0 140px}
  .mp-hero-in{gap:32px}
  .mp-chips ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mp-slider{grid-auto-columns:calc((100% - 2 * var(--mp-gap)) / 3)}
  .ib-ppp__in{grid-template-columns:1fr;gap:20px}
  .mp-trust5 b{font-size:1.9rem}
}
@media (max-width:1023px){
  .mp-ppc-in{grid-template-columns:1fr;gap:12px}
  .mp-ppc-row{justify-content:center}
  .mp-sec{padding:60px 0}
  .mp-hero-in{grid-template-columns:1fr;padding-block:20px 26px;gap:24px}
  .mp-comb{justify-self:center;margin-top:0;max-width:560px}
  .mp-values.mp-values--top ul{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .mp-bee{display:none}
  .mp-types{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mp-packs{gap:16px}
  .mp-pack-h b{font-size:1.6rem}
  .mp-pack-f strong{font-size:2rem}
  .mp-best{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-local{grid-template-columns:1fr;gap:28px}
  .mp-trust5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-trust5 li{border-top:1px solid var(--mp-ink)}
  .mp-trust5 li:nth-child(-n+2){border-top:0}
  .mp-trust5 li:nth-child(odd){border-left:0}
  .mp-trust5 li:last-child{grid-column:1/-1}
  .mp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-step:nth-child(3){border-left:0}
  .mp-step:nth-child(n+3){border-top:1px solid var(--mp-ink)}
  .mp-faq-grid{grid-template-columns:1fr}
  .mp-helpcard{position:static}
  .mp-made-in{grid-template-columns:auto minmax(0,1fr)}
  .mp-made-hex{display:none}
}
@media (max-width:759px){
  .mp-ppc-head{grid-template-columns:1fr}
  .mp-ppc-head p:last-child{grid-column:1;grid-row:3}
  .mp-ppc{padding:18px 0 14px}
  .mp-ppc-row{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--mp-gutter))!important;padding-inline:var(--mp-gutter)!important;padding-top:4px!important}
  .mp-ppc-row::-webkit-scrollbar{display:none}
  .mp-ppc-row li{flex:0 0 150px;scroll-snap-align:start}
  .mp-sec,.mp-sec--tight{padding:48px 0}
  .mp-sec-head{margin-bottom:24px}
  .mp-hero-in{padding-block:14px 20px;gap:20px}
  /* compact comb on phones: rows 4/5/4 (drop row four and the last cell of each row; centred rows still interlock) */
  .mp-comb{max-width:340px}
  .mp-comb-row:nth-of-type(n+4),.mp-comb-row>.mp-cell:last-child{display:none}
  .mp-cell{flex-basis:18.7%}
  .mp-comb-row+.mp-comb-row{margin-top:-4%}
  .mp-cell-f span{font-size:.66rem}
  .mp-values.mp-values--top ul li{padding:9px 14px;font-size:.8rem}
  .mp-values.mp-values--top ul li:nth-child(even){padding-left:14px}
  .mp-rot-i{font-size:2.5rem!important}
  .mp-hero-lede{font-size:.95rem}
  .mp-hero-cta .fp-btn--lg{padding:11px 16px}
  .mp-hero-cta .fp-btn{flex:1 1 140px}
  .mp-chips{margin-top:14px}
  .mp-chips ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .mp-chip{min-height:42px;padding:4px 7px;gap:7px}
  .mp-chip-t b{font-size:.8rem}
  .mp-types{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mp-type-b{padding:10px 10px 12px}
  .mp-type-b b{font-size:1.2rem!important}
  .mp-type-b small{font-size:.78rem}
  .mp-type-from{font-size:1.1rem}
  .mp-slider{grid-auto-columns:78%}
  .mp-slide-btns{display:none}
  .mp-packs{grid-template-columns:1fr;gap:20px}
  .mp-trades{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mp-trade{min-height:128px;padding:14px}
  .mp-trade b{font-size:1.2rem}
  .mp-map{display:none}
  .mp-cloud{display:flex}
  .mp-townpanel{padding:18px}
  .mp-townpanel h3{font-size:2rem!important}
  .mp-made-in{grid-template-columns:1fr;gap:16px;padding-block:36px}
  .mp-made-in>img{width:64px}
  .mp-trust5{grid-template-columns:1fr}
  .mp-trust5 li{border-left:0!important;border-top:1px solid var(--mp-ink)}
  .mp-trust5 li:first-child{border-top:0}
  .mp-trust5 li:last-child{grid-column:auto}
  .mp-trust5 b{font-size:1.8rem}
  .ib-ppp__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-steps{grid-template-columns:1fr}
  .mp-step{border-left:0!important;border-top:1px solid var(--mp-ink)}
  .mp-step:first-child{border-top:0}
  .mp-helpcard{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  .mp-ppc-c{transition:none}.mp-ppc-c:hover,.mp-ppc-c:focus-visible{transform:none}
  .mp-bee{animation:none;display:none}
  .mp-rot-i,.mp-cell-in{transition:none}
  .mp-comb .mp-cell-in,.mp-comb::after,.mp-comb .mp-cell-f,.mp-comb-bee img{animation:none!important}
  .mp-comb-bee{display:none}
  .mp-chip{transition:none}.mp-chip:hover,.mp-chip:focus-visible{transform:none}
}
/* Archivo (2026-10-01) is wider than the old condensed face: hive labels go to normal case at a size that clears the
   cell edges, and the price-per-piece figures step down so name, price and quantity stay inside the hexagon */
.mp-cell-f span{font:700 .76rem/1.08 var(--mp-f-display);text-transform:none;letter-spacing:-.005em;max-width:88%}
.mp-cell-b b{font-size:.98rem}
.mp-ppc-f{gap:4px;padding:17% 7%}
.mp-ppc-n{font-size:.88rem;line-height:1.08}
.mp-ppc-p b{font-size:2rem;line-height:.95;letter-spacing:-.02em}
.mp-ppc-p small{font-size:.78rem}
.mp-ppc-q{font-size:.76rem;padding:3px 7px}
@media (max-width:759px){.mp-cell-f span{font-size:.6rem;line-height:1.05}.mp-cell-f .mp-pic{width:32%}}

/* owner 2026-10-01: every solid-colour home band carries a faded hexagon grid (honeycomb outline), fading in from the
   right so the headings stay clean. Ink lines on light bands, white lines on dark ones. Static, decoration only. */
.mp-band--magenta,.mp-band--violet,.mp-band--cyan,.mp-band--ink,.mp-band--yellow,.mp-band--lime,.mp-band--stone{position:relative;isolation:isolate}
:is(.mp-band--magenta,.mp-band--violet,.mp-band--cyan,.mp-band--ink,.mp-band--yellow,.mp-band--lime,.mp-band--stone):not(.mp-bg)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23120F1F' stroke-width='1.6'/%3E%3C/svg%3E") 0 0/84px 150px;
  opacity:.16;-webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.45) 35%,#000 75%);mask-image:linear-gradient(100deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.45) 35%,#000 75%)}
:is(.mp-band--violet,.mp-band--ink):not(.mp-bg)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23FFFFFF' stroke-width='1.6'/%3E%3C/svg%3E");opacity:.14}
.mp-band--stone:not(.mp-bg)::before{opacity:.09}
@media (max-width:759px){:is(.mp-band--magenta,.mp-band--violet,.mp-band--cyan,.mp-band--ink,.mp-band--yellow,.mp-band--lime,.mp-band--stone):not(.mp-bg)::before{background-size:56px 100px}}
/* owner 2026-10-01: town honeycomb labels in normal case (size set per label in inc/towns.php so every name fits) */
.mp-map text{font-weight:700;text-transform:none;letter-spacing:-.01em}
/* owner 2026-10-01: band hexagon grid fainter */
:is(.mp-band--magenta,.mp-band--violet,.mp-band--cyan,.mp-band--ink,.mp-band--yellow,.mp-band--lime,.mp-band--stone):not(.mp-bg)::before{opacity:.09}
:is(.mp-band--violet,.mp-band--ink):not(.mp-bg)::before{opacity:.06}
.mp-band--stone:not(.mp-bg)::before{opacity:.06}