.mnl{
    --navy:#0f8576; --blue:#0d8577; --orange:#ff917f; --teal:#208479; --green:#127a5c; --red:#b4453f;
    --ink:#33414f; --slate:#516070; --gray:#5c6976; --muted:#666f79; --faint:#666f79; --line:#d5ede9;
    --page:#f7f9fc; --chip:#f0faf9;
    font-family:'Poppins',system-ui,sans-serif; color:var(--navy);
    /* 🚨 THE SAME CONTAINER AS .mn-explore AND .mn-seo. Was max-width:1280px with 40px of
       padding, which read as a different site beside Explore's 1750. Do not narrow it again. */
    width:min(1750px, calc(100% - 64px)); margin:0 auto; padding:14px 0 56px;
}
.mnl *{ box-sizing:border-box; }
@media (max-width:760px){ .mnl{ width:calc(100% - 32px); } }
.mnl a{ color:inherit; text-decoration:none; }
/* breadcrumb */
.mnl-crumb{ font-size:13px; color:var(--muted); padding:4px 0 12px; }
.mnl-crumb a:hover{ color:var(--blue); }
/* WCAG 2.5.8 wants 24px on a link target; these were 19px. */
.mnl-crumb a, .mnl-rate a{ display:inline-flex; align-items:center; min-height:24px; }
.mnl-crumb .sep{ color:#cdd9e6; margin:0 6px; }
.mnl-crumb .cur{ color:var(--slate); }
/* gallery */
/* 🚨 THE HEADER SITS BESIDE THE PHOTOS, NOT UNDER THEM. Joe's design, 2026-09-20: name, rating,
   hours, address and the actions are the left column of the hero and the photo mosaic is the
   right. A full-width mosaic pushed every fact below the fold. */
/* stretch, not start: the left column fills the row's height so the tiles can sit at its foot. */
.mnl-hero{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:26px; align-items:stretch; margin-bottom:24px; }
/* 🚨 THE TILES ARE PUSHED TO THE BOTTOM. Joe, 2026-09-20: "justify them to the bottom so it lines
   up with the bottom of the images." margin-top:auto in a flex column does it, and it keeps the
   heading block hard against the top where it belongs. */
.mnl-hero-l{ display:flex; flex-direction:column; }
.mnl-hero-l .mnl-tiles{ margin-top:auto; padding-top:20px; }
@media (max-width:980px){ .mnl-hero{ grid-template-columns:minmax(0,1fr); gap:18px; } }
.mnl-gallery{ display:grid; grid-template-columns:2fr 1fr; grid-template-rows:repeat(3, 1fr); gap:10px; border-radius:16px; overflow:hidden; margin-bottom:0; position:relative;
	/* 🚨 A MINIMUM, NOT A FIXED RATIO. aspect-ratio pinned the mosaic's height, so when the left
	   column was taller the photo stopped short and the tiles sat in dead space under it: +84px
	   on a 1400px screen. height:100% lets it grow to the row the other column sets. */
	min-height:300px; height:100%; }
.mnl-gmore{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	background:rgba(11,59,53,.62); color:#fff; font-size:22px; font-weight:700; }
/* An empty photo slot. Flat, quiet, and deliberately not a "add a photo" prompt: on a listing
   nobody has claimed there is nobody being asked. */
/* `.mnl-gallery .g` sets background-color at 0-2-0, so this needs to match it or the slots
   render pale blue and read as images that failed to load. */
.mnl-gallery .g.mnl-gempty{ background:#e6edf1; cursor:default; }
.mnl-memberships{ position:absolute; top:12px; right:12px; z-index:5; display:flex; gap:8px; align-items:flex-start; }
.mnl-memb-logo{ height:58px; width:auto; max-width:130px; border-radius:10px; background:#fff; padding:6px; box-shadow:0 2px 10px rgba(0,0,0,.22); object-fit:contain; }
@media(max-width:600px){ .mnl-memb-logo{ height:44px; } }
.mnl-gallery .g{ border:0; padding:0; background-size:cover; background-position:center; background-color:#dcecf6; cursor:pointer; transition:filter .2s; }
.mnl-gallery .g:hover{ filter:brightness(.93); }
.mnl-gallery .g0{ grid-row:1 / span 3; grid-column:1; }
/* Two tiles beside the lead photo, not four: the mosaic is half the width it used to be. The
   rest of the set is still reachable through "See all photos", which counts them all. */
.mnl-gallery .g{ position:relative; }
.mnl-gallery .g4{ display:none; }
.mnl-gallery.count-2{ grid-template-rows:auto; }
.mnl-gallery.count-2{ grid-template-rows:1fr; }
.mnl-gallery.count-2 .g0{ grid-row:1; }
.mnl-gallery.count-2 .g1{ grid-row:1; grid-column:2; }
.mnl-credit{ font-size:13px; color:#666f79; margin:-16px 0 22px; line-height:1.6; }
.mnl-credit a{ color:#5c6976; text-decoration:underline; }
.mnl-credit a:hover{ color:#0f8576; }
.mnl-gallery.count-1{ grid-template-columns:1fr; grid-template-rows:auto; aspect-ratio:auto; }
.mnl-gallery.count-1 .g0{ grid-row:1; width:100%; aspect-ratio:16 / 9; max-height:560px; }
/* claim placeholder hero */
.mnl-placeholder{ cursor:default; }
.mnl-placeholder:hover{ filter:none; }
/* 🚨 CENTRED AND SCROLL-PROOF, BECAUSE IT OVERFLOWED THE PHOTO ON A PHONE. At 375px the box is
   173px tall and this content was 240px, so the button rendered 67px BELOW the picture, behind
   the first fact tile: invisible, unclickable, and still in the tab order. Measured 2026-09-20.
   justify-content:center plus a padding that shrinks with the box keeps it inside at every size. */
.mnl-claim-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(10px,4%,46px) 18px; /* Darker: measured 2.45:1 for the headline and 1.95:1 for the subline against the pale
	   category artwork. The scrim has to carry the text, because the art behind it varies. */
	background:linear-gradient(180deg,rgba(11,43,39,.82) 0%,rgba(11,43,39,.66) 55%,rgba(11,43,39,.52) 100%); }
.mnl-claim-title{ font-weight:700; font-size:clamp(15px,2.6vw,30px); line-height:1.2; color:#fff; margin:0 0 6px; }
/* Hidden under 520px: on a 173px-tall box the headline and the button are the whole message,
   and this sentence is what pushed the button out of the frame. */
.mnl-claim-sub{ font-size:clamp(12px,1.4vw,15px); color:#f2f7f6; margin:0 0 14px; max-width:520px; }
@media (max-width:520px){ .mnl-claim-sub{ display:none; } }
/* 🚨 #5c1f13, NEVER WHITE. White on this coral is 2.19:1 and fails even the large-text bar, so
   the site's standing rule is a deepened-coral label on a coral button. It was live at 2.19 here,
   on the one button the business side is built around. */
.mnl-claim-btn{ display:inline-block; background:var(--orange); color:#5c1f13 !important; font-weight:700; font-size:13px; padding:12px 26px; min-height:44px; line-height:20px; border-radius:999px; box-shadow:0 6px 18px rgba(255,145,127,.3); }
.mnl-claim-btn:hover{ filter:brightness(1.05); }
.mnl-showall{ position:absolute; right:14px; bottom:14px; min-height:44px; background:rgba(16,60,54,.86); border:0; color:#fff; border-radius:10px; padding:8px 14px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:7px; }
.mnl-showall svg{ width:13px; height:13px; fill:#fff; }
/* body layout */
.mnl-body{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start; }
@media (max-width:980px){ .mnl-body{ grid-template-columns:1fr; } }
.mnl-main{ min-width:0; }
/* header */
.mnl-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.mnl-head-l{ flex:1; min-width:260px; }
.mnl-badges{ display:flex; align-items:center; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.mnl-chip{ font-size:12px; font-weight:600; color:#1e786c; background:#d9f2ee; padding:5px 11px; border-radius:999px; }
/* What the place IS, beside the category: splash pad, wading pool, swimming pool. */
.mnl-chip-feature{ font-size:12px; font-weight:600; color:#0b6b60; background:#eaf5ef; border:1px solid #cfe3dd; padding:4px 10px; border-radius:999px; }
.mnl-ssr-claim{ font-size:14px; line-height:1.55; color:#0f2b27; background:#f0faf9; border:1px dashed #d5ede9; border-radius:12px; padding:11px 14px; margin:10px 0 0; }
.mnl-ssr-claim a{ color:#0d8577; font-weight:600; }
.mnl-chip-claimed{ font-size:12px; font-weight:600; color:#1e786c; background:#d9f2ee; padding:5px 11px; border-radius:999px; }
/* Ink, not teal, and a size that leads the page: the listing H1 read a step smaller and a
   different colour from every other page on the site. */
.mnl-h1{ font-weight:700; font-size:clamp(26px,2.4vw,38px); line-height:1.15; margin:0; color:#0f2b27; max-width:660px; letter-spacing:-.01em; }
.mnl-sub{ font-size:15px; color:var(--muted); margin-top:5px; }
.mnl-rate{ display:flex; align-items:center; gap:7px; margin-top:9px; font-size:13.5px; color:var(--muted); }
.mnl-rate b{ color:#0f2b27; font-size:14.5px; }
.mnl-rate-stars{ display:inline-flex; gap:1px; }
/* #c3ccd6, not #dfe7ef: what a reader has to see is where the filled stars STOP, and that
   edge was 2.74:1 even though each star cleared 3:1 against the background on its own. */
.mnl-star svg{ width:15px; height:15px; fill:#c3ccd6; }
/* #c07c12, not #f0a92e: a rating star is a meaningful graphic and 2.02:1 fails the 3.0 bar. */
.mnl-star.on svg{ fill:#c07c12; }
.mnl-star.half svg{ fill:#c07c12; opacity:.6; }
.mnl-rate.is-empty a{ color:#0b6b60; font-weight:600; text-decoration:underline; }
.mnl-rv-empty{ display:flex; align-items:center; gap:14px; background:var(--page); border-radius:14px; padding:16px 18px; }
.mnl-rv-bubble{ flex:none; width:40px; height:40px; border-radius:12px; background:#fff; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; }
.mnl-rv-bubble svg{ width:19px; height:19px; fill:#5c6976; }
.mnl-rv-empty-t{ flex:1; min-width:0; }
.mnl-rv-empty-t b{ display:block; font-size:14px; color:#0f2b27; }
.mnl-rv-empty-t span{ display:block; font-size:13px; color:var(--muted); margin-top:2px; }
.mnl-rv-empty-btn{ flex:none; }
/* The star input is a radiogroup now, so each star needs a visible focus ring and a real target. */
.mnl-star-input span{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; cursor:pointer; }
.mnl-star-input span:focus-visible{ outline:3px solid #0b6b60; outline-offset:-4px; border-radius:8px; }
@media (max-width:560px){ .mnl-rv-empty{ flex-wrap:wrap; } .mnl-rv-empty-btn{ width:100%; justify-content:center; } }
.mnl-openrow{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13.5px; font-weight:600; }
.mnl-openrow i{ width:9px; height:9px; border-radius:50%; flex:none; }
.mnl-openrow.open{ color:#127a5c; } .mnl-openrow.open i{ background:#127a5c; }
.mnl-openrow.closed{ color:#b4453f; } .mnl-openrow.closed i{ background:#b4453f; }
.mnl-addr svg{ width:15px; height:15px; fill:#0b6b60; flex:none; margin-top:2px; }
/* Phone only: above 980px the sidebar's own button is already in view. */
.mnl-herodir{ display:none; }
/* Sits between the address and the action buttons, sized to its words, not the container. */
.mnl-photoslot:empty{ display:none; }
/* ⚠️ FLEX + WRAP since 2026-09-26. The slot used to hold one button; it now holds "Add a photo"
   and, for the owner only, "Edit this listing". Two inline-flex buttons in a block container sat
   on one line and pushed past the column on a phone. */
.mnl-photoslot{ margin-top:14px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* "Edit this listing". Joe, 2026-09-26: an owner looking at their own page should be able to get
   back to the dashboard from it, rather than navigating there by hand.
   ⚠️ TEAL, NOT THE PEACH OF "Add a photo". They sit side by side and do different jobs: one is
   for any parent, one is only ever seen by the business that owns the page. Same size so the
   row reads as a pair. */
.mnl .mnl-photoslot .mnl-editbtn{ display:inline-flex; align-items:center; justify-content:center;
	gap:8px; width:300px; max-width:100%; min-height:44px; padding:0 20px; border-radius:999px;
	background:#e9f5f3; color:#0b6b60 !important; border:1px solid #cfe8e2;
	font:600 14px/1 'Poppins',sans-serif; text-decoration:none; }
.mnl .mnl-photoslot .mnl-editbtn:hover{ background:#daeeea; }
.mnl .mnl-photoslot .mnl-editbtn svg{ flex:none; }
/* 🚨 ONE DIRECTIONS BUTTON ON A PHONE. Joe, 2026-09-20: delete the sidebar copy. Below 980px the
   hero button sits 0.38 screens down, and a second link with the identical name and the identical
   href was a duplicate for a screen reader and a second tap target for everyone else. */
@media (max-width:980px){ .mnl-side .mnl-btn.primary[data-stat="directions"]{ display:none; } }
.mnl-claimfab{ position:fixed; right:18px; bottom:18px; z-index:9998; display:inline-flex;
	align-items:center; gap:8px; background:#ff917f; color:#5c1f13; border-radius:999px;
	padding:0 20px; min-height:48px; font-size:14px; font-weight:700; text-decoration:none;
	box-shadow:0 6px 18px rgba(16,60,54,.28); }
.mnl-claimfab svg{ width:16px; height:16px; fill:#5c1f13; }
.mnl-claimfab:hover{ filter:brightness(1.04); }
/* 🚨 ONE FIXED WIDTH ON EVERY LISTING. Joe, 2026-09-20: "a little shorter than the address
   field ... and hold that sizing through all the listings." A percentage would grow and shrink
   with the address, which is a different length on every page; 300px is a little under the
   column on a phone and identical everywhere else. */
.mnl .mnl-photoslot .mnp-fab{ width:300px; max-width:100%; justify-content:center;
	background:#fdefe7; color:#a8481f; border:1px solid #f6d9c8; }
.mnl .mnl-photoslot .mnp-fab:hover{ background:#fbe0d5; }
@media (max-width:980px){
	/* 🚨 `.mnl a.mnl-herodir`, NOT `.mnl-herodir`. `.mnl a{ color:inherit }` is 0-1-1 and beat a
	   0-1-0 rule, so the label inherited the teal and painted it on the teal button: 1.41:1,
	   on the primary mobile call to action. The arrow stayed white because it is a fill.
	   Ninth same-page specificity collision. Raise the selector, do not add another rule. */
	.mnl a.mnl-herodir{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
		width:100%; margin-top:14px; min-height:48px; border-radius:999px;
		background:#0b6b60; color:#fff; font-size:15px; font-weight:700; text-decoration:none; }
	.mnl-herodir svg{ width:17px; height:17px; fill:#fff; }
}
.mnl-factline{ display:flex; align-items:center; gap:12px; margin-top:12px; font-size:12px; font-weight:500; color:var(--slate); flex-wrap:wrap; }
/* The four fact tiles under the hero. auto-fit, so two facts make two tiles rather than two
   tiles and two holes; each tile still renders only when its data exists. */
.mnl-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin:20px 0 0; }
/* ⚠️ NO `margin:0` HERE. A later rule with the SAME selector was resetting the margin-top:auto
   set above it, so the tiles floated 44px above the foot of the column instead of sitting on it.
   Eighth same-selector collision on this project: state the fix at the rule that owns it. */
.mnl-hero-l .mnl-tiles{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); margin-top:auto; }
.mnl-tile{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:15px 17px; }
.mnl-tile-ic{ flex:none; width:38px; height:38px; border-radius:11px; background:#eaf5ef; display:inline-flex; align-items:center; justify-content:center; }
.mnl-tile-ic svg{ width:19px; height:19px; fill:#0b6b60; }
.mnl-tile-t{ min-width:0; }
.mnl-tile-t b{ display:block; font-size:14px; font-weight:700; color:#0f2b27; line-height:1.3; }
.mnl-tile-t span{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.mnl-factline .fsep{ color:#dfe7ef; }
/* A separator that ends a wrapped line reads as a rendering error, so it is hidden rather than
   left dangling. The gap between items already separates them at this width. */
@media (max-width:560px){ .mnl-factline .fsep{ display:none; } }
/* 🚨 NOT var(--orange). Coral on white is 2.07:1 and fails the 4.5 bar; this is the same colour
   and the same mistake as the claim button, on the rating in the similar-places cards. It is
   invisible today only because no neighbour has a review yet. #b8541f is 4.6:1 and still warm. */
.mnl-factline .frate{ font-weight:600; color:#b8541f; }
.mnl-factline .fmuted{ color:var(--faint); }
.mnl-factline .fopen{ color:var(--green); font-weight:600; }
.mnl-factline .fclosed{ color:var(--red); font-weight:600; }
/* A link now, so it needs a hover state and its own colour rather than the inherited one. */
.mnl .mnl-addr{ display:flex; align-items:flex-start; gap:8px; font-size:14px; color:var(--muted); margin-top:10px; text-decoration:none; }
.mnl a.mnl-addr:hover span{ color:#0b6b60; text-decoration:underline; }
/* Item 7: contact and opening hours, server-rendered. The JS view overwrites #mnl on load,
   so these styles are what a reader without JS, and a crawler, actually get. */
.mnl-ssr-contact{ display:flex; flex-wrap:wrap; gap:14px; margin:10px 0 4px; font-size:13px; }
.mnl-ssr-contact a{ color:#0f8576; font-weight:600; text-decoration:none; }
.mnl-ssr-contact a:hover{ text-decoration:underline; }
.mnl-ssr-hours .mnl-hours-t{ width:100%; border-collapse:collapse; font-size:13px; }
.mnl-ssr-hours .mnl-hours-t th{ text-align:left; font-weight:600; color:#22302b; padding:5px 0; width:42%; }
.mnl-ssr-hours .mnl-hours-t td{ text-align:right; color:#516070; padding:5px 0; }
.mnl-ssr-hours .mnl-hours-t tr + tr th,
.mnl-ssr-hours .mnl-hours-t tr + tr td{ border-top:1px solid #eef3f7; }
.mnl-ssr-dir{ display:flex; flex-wrap:wrap; gap:9px; margin:12px 0 0; }
.mnl-ssr-dir .mnl-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; border:1px solid #d5ede9; border-radius:999px; font-size:14px; font-weight:600; color:#0b6b60; }
.mnl-ssr-dir .mnl-btn.primary{ background:#0b6b60; border-color:#0b6b60; color:#fff; }
.mnl-ssr-adm{ font-size:13px; font-weight:600; color:#22302b; margin:8px 0 2px; }
.mnl-ssr-adm-src{ font-size:14px; font-weight:400; color:#516070; margin-left:8px; text-decoration:underline; }
.mnl-ssr-adm-src:hover{ color:#0f8576; }
.mnl-hours-note{ font-size:14px; color:#6b7a86; margin:10px 0 0; }
/* 🚨 A FOUR-COLUMN GRID, NOT A WRAPPING FLEX LINE. Joe's design puts four buttons on the first
   row and the rest on the second; a flex line packed as many as fitted, which came out 5 + 1.
   Equal columns also stop "Call" being a third of the width of "We went here". */
.mnl-head-actions{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:9px; margin-top:18px; }
.mnl-head-actions > *{ min-width:0; }
.mnl-head-actions .mnl-abtn{ width:100%; justify-content:center; padding:0 10px; }
.mnl-head-actions .mnl-plan-wrap, .mnl-head-actions .mnl-share-wrap{ position:relative; }
@media (max-width:640px){ .mnl-head-actions{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* 999px, the site's button shape. A 11px rectangle here was the listing page's own invention. */
.mnl-abtn{ display:inline-flex; align-items:center; gap:8px; border:1px solid #d5ede9; background:#fff; border-radius:999px; padding:0 18px; min-height:44px; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; color:#0b6b60; text-decoration:none; transition:border-color .18s, background .18s; }
.mnl-abtn svg{ width:16px; height:16px; fill:currentColor; flex:none; }
.mnl-abtn.primary{ background:#0b6b60; border-color:#0b6b60; color:#fff; }
.mnl-abtn.primary:hover{ background:#0f8576; border-color:#0f8576; }
.mnl-abtn:hover{ border-color:var(--blue); }
.mnl-abtn svg{ width:15px; height:15px; fill:var(--navy); }
.mnl-abtn.faved{ color:#e0245e; border-color:#e0245e; }
.mnl-abtn.faved svg{ fill:#e0245e; }
/* Checked in. Seafoam rather than the favorite red — saving and going are different things. */
.mnl-abtn.been{ color:#0f8576; border-color:#0f8576; background:#d9f2ee; }
.mnl-abtn.been svg{ fill:#0f8576; }
.mnl-help{ display:flex; align-items:center; gap:9px; margin-top:9px; }
.mnl-help-b{ background:none; border:1px solid #d5ede9; border-radius:999px; padding:4px 12px;
  font-size:14px; font-weight:600; color:#5c6976; cursor:pointer; }
.mnl-help-b:hover{ border-color:#0f8576; color:#0f8576; }
.mnl-help-b.on{ background:#d9f2ee; border-color:#0f8576; color:#0f8576; }
.mnl-help-n{ font-size:14px; color:#666f79; font-variant-numeric:tabular-nums; }
/* cards */
.mnl-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin-bottom:16px; }
/* The illustrated section icon sits in the heading, so the icon and the words wrap together. */
/* 🚨 A MID-STEP. The page ran a 38px H1 straight to 15px section headings, with nothing between,
   while Explore and the category pages both have one. 15px headings on a 38px page carry no
   weight at all. */
.mnl-card-h h2{ display:flex; align-items:center; gap:10px; }
.mnl-sec-ic{ flex:none; width:24px; height:24px; object-fit:contain; }
.mnl-tile .mnl-sec-ic{ width:34px; height:34px; }
.mnl-pcard-h .mnl-sec-ic{ width:22px; height:22px; }
.mnl-card-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
/* 🚨 THIS RULE WAS BEATING THE MID-STEP SET FOUR LINES ABOVE IT, same specificity, later in the
   file. Tenth collision of the day. The size lives here now, where the page's card headings are
   actually defined, and the rule above only handles layout. */
.mnl-card h2{ font-weight:700; font-size:21px; margin:0; color:#0f2b27; }
.mnl .mnl-card-link{ font-size:13px; font-weight:600; color:var(--blue); }
.mnl-about{ font-size:12.5px; line-height:1.85; color:var(--slate); margin:0; }
/* Half the catalog runs past 400 characters and 256 listings past 700, which buries everything
   underneath the description. Clamp to 4 lines and let the reader open it. The button is hidden by
   JS when the text is short enough not to need it, so a 2-line description shows no control. */
.mnl-about.mnl-clamp{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
	overflow:hidden; }
.mnl-more{ background:none; border:0; padding:0; margin:0; min-height:44px; cursor:pointer; font:inherit;
	font-size:13px; font-weight:600; color:var(--blue); display:none; }
.mnl-more.on{ display:inline-block; }
.mnl-more:hover{ text-decoration:underline; }
/* good to know */
.mnl-gtk{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; }
.mnl-gtk-l b{ display:block; font-size:13.5px; font-weight:700; color:#0f2b27; line-height:1.3; }
.mnl-gtk-l span{ display:block; font-size:12.5px; color:var(--muted); margin-top:1px; }
.mnl-gtk-i.is-no .mnl-gtk-ic{ background:#f6eeec; }
.mnl-gtk-i.is-no .mnl-gtk-ic svg{ fill:#a8483c; }
.mnl-gtk-i.is-no .mnl-gtk-l b{ color:#5c6976; }
.mnl-gtk-art{ flex:none; width:40px; height:40px; object-fit:contain; }
.mnl-gtk-i.is-no .mnl-gtk-art{ opacity:.38; filter:grayscale(1); }
.mnl-gtk-i .mnl-gtk-l{ flex:1; min-width:0; }
.mnl-gtk-mark{ flex:none; width:20px; height:20px; border-radius:50%; background:#d9f2ee;
	display:inline-flex; align-items:center; justify-content:center; }
.mnl-gtk-mark svg{ width:12px; height:12px; fill:#0b6b60; }
.mnl-gtk-i.is-no .mnl-gtk-mark{ background:#f6eeec; }
.mnl-gtk-i.is-no .mnl-gtk-mark svg{ fill:#a8483c; }
.mnl-why{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; }
.mnl-whyc{ background:var(--page); border-radius:12px; padding:14px 15px; }
.mnl-whyc .mnl-tile-ic{ margin-bottom:9px; }
.mnl-whyc b{ display:block; font-size:13.5px; font-weight:700; color:#0f2b27; }
.mnl-whyc span{ display:block; font-size:12.5px; line-height:1.55; color:var(--muted); margin-top:3px; }
.mnl-adm{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; }
.mnl-adm-r{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--page); border-radius:12px; padding:14px 16px; }
.mnl-adm-r span{ font-size:13px; color:var(--muted); }
.mnl-adm-r b{ font-size:16px; font-weight:700; color:#0f2b27; }
.mnl-adm-fam{ background:#eaf5ef; border-radius:12px; padding:14px 16px; }
.mnl-adm-fam b{ display:block; font-size:16px; font-weight:700; color:#0b6b60; }
.mnl-adm-fam span{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.mnl-adm-note{ font-size:12px; color:var(--muted); margin:12px 0 0; }
.mnl-adm-dash{ color:#8c99a6; font-weight:600; }
.mnl-photorow{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:11px; }
.mnl-photo{ border:0; padding:0; cursor:pointer; aspect-ratio:4 / 3; border-radius:12px; background:#dcecf6 center/cover no-repeat; }
.mnl-photo:hover{ filter:brightness(.93); }
/* 🚨 minmax(0,1fr), NOT 1fr. A bare 1fr track has a min-content floor, so "Outside food allowed"
   and "Wheelchair accessible" pushed their columns to 183px and 188px inside a 257px parent and
   the whole page scrolled sideways: 442px inside a 375px screen. The desktop rule above always
   used minmax(); this mobile override had dropped it. Every listing with amenities was affected. */
@media (max-width:600px){ .mnl-gtk{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.mnl-gtk-i{ display:flex; align-items:center; gap:10px; background:var(--page); border-radius:12px; padding:12px 14px; }
.mnl-gtk-ic{ width:26px; height:26px; border-radius:8px; background:#d9f2ee; display:flex; align-items:center; justify-content:center; flex:none; }
.mnl-gtk-ic svg{ width:14px; height:14px; fill:var(--teal); }
/* #0b6b60, not var(--navy): 4.29:1 on the page ground, under the 4.5 bar. */
.mnl-gtk-l{ font-size:14px; font-weight:500; color:#0b6b60; }
/* from this venue */
.mnl-progs{ background:#fff; border:2px solid #0f8576; border-radius:16px; padding:20px 22px; margin-bottom:16px; }
.mnl-pg-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-bottom:14px; }
.mnl-pg-h h2{ margin:0; font-size:18px; color:#22302b; }
.mnl-pg-sub{ font-size:13px; color:#516070; }
.mnl-pg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:600px){ .mnl-pg-grid{ grid-template-columns:1fr; } }
.mnl-pg-i{ display:flex; align-items:center; gap:10px; border:1px solid #d5ede9; border-radius:12px;
           padding:11px 13px; text-decoration:none; background:#f8fdfc; }
.mnl-pg-i:hover{ border-color:#0f8576; background:#f1faf8; }
.mnl-pg-b{ flex:1; min-width:0; }
.mnl-pg-t{ font-size:14px; font-weight:600; color:#22302b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mnl-pg-x{ font-size:12px; color:#516070; margin-top:2px; }
.mnl-pg-done{ margin-left:8px; color:#8a6d3b; }
.mnl-pg-go{ font-size:13px; font-weight:600; color:#0f8576; flex:none; }
.mnl-fromvenue{ background:#fff; border:2px solid var(--orange); border-radius:16px; padding:20px 22px; margin-bottom:16px; }
.mnl-fv-h{ display:flex; align-items:center; gap:9px; margin-bottom:14px; flex-wrap:wrap; }
.mnl-fv-badge{ background:#fbe0d5; color:#a84a39; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:600; letter-spacing:.06em; }
.mnl-fv-sub{ font-size:13px; color:var(--faint); }
.mnl-fv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:600px){ .mnl-fv-grid{ grid-template-columns:1fr; } }
.mnl-fv-i{ display:flex; gap:12px; align-items:center; border:1px solid var(--line); border-radius:14px; padding:12px; }
.mnl-fv-thumb{ flex:none; width:48px; height:48px; border-radius:11px; background-size:cover; background-position:center; background-color:#d9f2ee; }
.mnl-fv-b{ flex:1; min-width:0; }
.mnl-fv-t{ font-size:12px; font-weight:600; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mnl-fv-x{ font-size:12px; color:var(--muted); text-transform:capitalize; }
.mnl-fv-go{ font-size:13px; font-weight:600; color:var(--blue); white-space:nowrap; }
/* packages */
.mnl-pkg{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.mnl-pkg-hidden{ display:none; }
#mnlPkgs.is-open .mnl-pkg-hidden{ display:block; }
.mnl-pkg-morewrap{ text-align:center; padding-top:14px; }
.mnl-pkg:last-child{ border-bottom:none; }
.mnl-pkg-photo{ width:76px; height:76px; border-radius:12px; background-size:cover; background-position:center; background-color:#eaf1f6; flex:none; }
.mnl-pkg-b{ flex:1; min-width:0; }
.mnl-pkg-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.mnl-pkg-label{ font-weight:600; font-size:13px; color:var(--navy); }
.mnl-pkg-price{ font-weight:600; font-size:12.5px; color:var(--teal); white-space:nowrap; }
.mnl-pkg-desc{ font-size:14px; color:var(--slate); line-height:1.65; margin:4px 0 0; }
.mnl .mnl-pkg-link{ display:inline-flex; align-items:center; min-height:44px;  display:inline-block; margin-top:7px; font-size:13px; font-weight:600; color:var(--blue); }
/* reviews */
.mnl-rv-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.mnl-rv-head-l{ display:flex; align-items:baseline; gap:11px; }
.mnl-rv-avg{ font-weight:600; font-size:12px; color:var(--orange); }
.mnl-rv-count{ font-size:13px; color:var(--faint); }
.mnl .mnl-rv-write{ display:inline-flex; align-items:center; min-height:44px; background:var(--navy); color:#fff; border-radius:999px; padding:0 18px; font-size:13px; font-weight:600; }
.mnl-rv-write:hover{ filter:brightness(1.08); }
.mnl-review{ display:flex; gap:13px; padding:16px 0; border-bottom:1px solid #eef2f6; }
.mnl-review:last-of-type{ border-bottom:none; }
.mnl-review-av{ flex:none; width:38px; height:38px; border-radius:50%; background-size:cover; background-position:center; background:#d9f2ee; color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
.mnl-review-b{ flex:1; min-width:0; }
.mnl-review-top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.mnl-review-name{ font-weight:600; font-size:12.5px; color:var(--navy); }
.mnl-review-date{ font-size:13px; color:var(--faint); }
.mnl-review-text{ font-size:14px; line-height:1.7; color:var(--slate); margin:6px 0 0; }
.mnl-review-cats{ display:flex; flex-wrap:wrap; gap:14px; margin:5px 0 0; }
.mnl-review-cat{ font-size:13px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.mnl-review-reply{ margin:10px 0 0; padding:10px 13px; border-left:3px solid var(--blue);
  background:#f4fbfa; border-radius:0 10px 10px 0; }
.mnl-review-reply-top{ font-size:13px; font-weight:600; color:var(--blue); }
.mnl-review-reply-top span{ font-weight:400; color:var(--faint); }
.mnl-review-reply p{ font-size:14px; line-height:1.7; color:var(--slate); margin:4px 0 0; }
.mnl-review-empty{ color:var(--muted); font-size:12px; padding:4px 0 14px; }
.mnl-stars{ display:inline-flex; gap:1px; }
.mnl-stars span svg{ width:13px; height:13px; fill:#e0e4ea; }
.mnl-stars span.on svg{ fill:var(--orange); }
/* review form */
.mnl-review-form{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.mnl-review-form h3{ font-weight:600; font-size:14px; margin:0 0 14px; color:var(--navy); }
.mnl-star-row{ display:flex; align-items:center; gap:12px; margin-bottom:9px; }
.mnl-star-row-label{ font-size:12px; font-weight:600; min-width:130px; color:var(--slate); }
.mnl-star-input{ display:inline-flex; gap:3px; cursor:pointer; }
.mnl-star-input span svg{ width:21px; height:21px; fill:#e0e4ea; transition:fill .15s; }
.mnl-star-input span.on svg{ fill:var(--orange); }
.mnl-review-textarea{ width:100%; border:1px solid #d6e0eb; border-radius:12px; padding:12px 14px; font-family:inherit; font-size:12.5px; resize:vertical; min-height:88px; margin:8px 0 14px; }
.mnl-review-submit{ background:var(--navy); color:#fff; border:0; border-radius:11px; padding:11px 22px; font-family:inherit; font-weight:600; font-size:12.5px; cursor:pointer; }
.mnl-review-submit:hover{ filter:brightness(1.08); }
.mnl-review-submit:disabled{ opacity:.6; cursor:default; }
.mnl-review-msg{ font-size:12px; margin-top:10px; }
.mnl-review-msg.ok{ color:var(--green); }
.mnl-review-msg.err{ color:var(--red); }
.mnl-review-login{ font-size:12.5px; color:var(--slate); margin:0; }
.mnl-review-login a{ display:inline-flex; align-items:center; min-height:44px; color:var(--blue); font-weight:600; }
/* sidebar */
/* 105px, not 20px: the theme header is position:fixed and 89px tall, so at 20px the "Plan your
   visit" heading and the address sat behind it for the whole scroll. Same fix as .mn-seo-rail. */
.mnl-side{ position:sticky; top:105px; display:flex; flex-direction:column; gap:16px; }
@media (max-width:980px){
	.mnl-side{ position:static; }
	/* 🚨 DIRECTIONS FIRST ON A PHONE. The sidebar came last in the DOM, so "Get directions" sat
	   2.4 screens down on a 6,058px page while it is the single most common thing a parent taps.
	   The grid is one column here, so `order` moves it without touching the desktop layout or
	   the reading order of the source. */
	/* ⚠️ width:100% AND min-width:0 ON BOTH COLUMNS. The grid's minmax(0,1fr) was what stopped a
	   wide child stretching the column; a plain flex column does not do that, and the page grew
	   to 467px inside a 375px screen the moment this rule landed. */
	.mnl-body{ display:flex; flex-direction:column; width:100%; }
	.mnl-main, .mnl-side{ width:100%; min-width:0; max-width:100%; }
	.mnl-side{ order:-1; }
}
.mnl-pcard{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:0 6px 20px rgba(16,60,54,.06); }
.mnl-pcard-top{ display:flex; align-items:baseline; gap:8px; }
.mnl-pcard-price{ font-weight:600; font-size:22px; color:var(--navy); }
.mnl-pcard-unit{ font-size:13px; color:var(--muted); }
.mnl-pcard-open{ font-size:14px; font-weight:600; margin:8px 0 16px; }
.mnl-pcard-open.on{ color:var(--green); }
.mnl-pcard-open.off{ color:var(--red); }
.mnl-btns{ display:flex; flex-direction:column; gap:9px; }
.mnl .mnl-btn{ display:flex; align-items:center; justify-content:center; min-height:44px; text-align:center; border:1px solid #d6e0eb; color:var(--navy); border-radius:12px; padding:12px; font-size:12px; font-weight:600; }
.mnl-btn:hover{ border-color:var(--blue); color:var(--blue); }
.mnl-btn.primary{ background:var(--navy); color:#fff; border-color:var(--navy); }
.mnl-btn.primary:hover{ filter:brightness(1.08); color:#fff; }
/* An <h2> now, for heading navigation. The size is stated here so .mnl-card h2 cannot win. */
.mnl .mnl-pcard-h{ display:flex; align-items:center; gap:9px; font-size:16px; font-weight:700; color:#0f2b27; margin:0 0 10px; }
.mnl-pcard-pin{ flex:none; width:28px; height:28px; border-radius:9px; background:#eaf5ef; display:inline-flex; align-items:center; justify-content:center; }
.mnl-pcard-pin svg{ width:15px; height:15px; fill:#0b6b60; }
.mnl-pcard-addr.top{ margin:0 0 13px; }
.mnl-map{ height:170px; border-radius:14px; overflow:hidden; margin-top:16px; border:1px solid var(--line); }
.mnl-map iframe{ width:100%; height:100%; border:0; }
.mnl-pcard-addr{ font-size:13px; line-height:1.6; color:var(--muted); margin-top:10px; }
.mnl-hcard{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px; }
.mnl-hcard-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.mnl-hcard-h .t{ font-weight:600; font-size:13px; color:var(--navy); }
.mnl-hcard-badge{ border-radius:999px; padding:4px 10px; font-size:12px; font-weight:600; }
.mnl-hcard-badge.open{ background:#e6f6f0; color:var(--green); }
.mnl-hcard-badge.closed{ background:#fbeceb; color:var(--red); }
/* TEMPORARILY CLOSED. A venue shut for a season or for building work is not the same thing as
   "closed right now", and it OVERRIDES every open/closed signal on this page. Showing "OPEN NOW"
   over a shut venue sends a family on a wasted trip, which is the exact failure this site exists
   to prevent, so the override is deliberate and belongs at every call site, not just one. */
.mnl-tempclosed{ display:flex; align-items:flex-start; gap:10px; background:#fbeceb; border:1px solid #f3cfcb;
  border-radius:14px; padding:13px 16px; margin:0 0 14px; }
.mnl-tempclosed-i{ flex:none; width:18px; height:18px; fill:var(--red); margin-top:1px; }
.mnl-tempclosed-t{ font-weight:700; font-size:14.5px; color:#8c2f26; }
.mnl-tempclosed-x{ font-size:13px; line-height:1.55; color:#8c2f26; opacity:.85; margin-top:2px; }
.mnl-hcard.is-tempclosed .mnl-hrow{ opacity:.5; }
.mnl-hcard-badge.tempclosed{ background:#fbeceb; color:var(--red); }
.mnl-ssr-tempclosed{ background:#fbeceb; border:1px solid #f3cfcb; border-radius:14px;
  padding:13px 16px; margin:0 0 14px; font-size:13.5px; line-height:1.55; color:#8c2f26; }
.mnl-hrow{ display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:8px 0; border-bottom:1px solid #eef2f6; color:var(--muted); }
.mnl-hrow:last-child{ border-bottom:none; }
.mnl-hrow.today{ font-weight:600; color:var(--navy); }
.mnl-hrow .cl{ color:var(--red); }
.mnl-claimcard{ background:var(--page); border:1px dashed #cdd9e6; border-radius:16px; padding:18px 20px; }
/* "I'm a member here". Solid rather than dashed like the claim card: this one is aimed at a
   parent and is a normal action, not an "is this yours?" prompt to a business. */
.mnl-membcard{ background:#f0faf9; border:1px solid #d5ede9; border-radius:16px; padding:18px 20px; }
.mnl-membcard-h{ font-weight:700; font-size:15.5px; color:#0b3b35; margin-bottom:5px; }
.mnl-membcard-x{ font-size:13.5px; color:#63757f; line-height:1.55; margin-bottom:12px; }
.mnl-membcard-btn{ width:100%; min-height:44px; border:0; background:#0f8576; color:#fff; border-radius:999px;
  padding:11px 14px; font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; }
.mnl-membcard[data-on="1"] .mnl-membcard-btn{ background:#fff; color:#0f8576; border:1px solid #0f8576; }
.mnl-membcard-btn:disabled{ opacity:.6; cursor:default; }
.mnl-membcard-msg{ font-size:13px; color:#63757f; margin-top:9px; line-height:1.5; }
.mnl-membcard-msg a{ color:#0f8576; font-weight:600; }
.mnl-claimcard-h{ font-weight:600; font-size:12.5px; color:var(--navy); margin-bottom:5px; }
.mnl-claimcard-x{ font-size:13px; line-height:1.6; color:var(--gray); margin-bottom:12px; }
.mnl .mnl-claimcard-btn{ display:inline-flex; align-items:center; min-height:44px; border:1px solid #d6e0eb; background:#fff; border-radius:10px; padding:10px 16px; font-size:13px; font-weight:600; color:var(--navy); }
.mnl-claimcard-btn:hover{ border-color:var(--blue); color:var(--blue); }
.mnl-report{ text-align:center; font-size:13px; color:var(--faint); }
.mnl-reportsec-open{ display:flex; align-items:center; gap:9px; margin:0 auto; border:0; background:none;
	cursor:pointer; font-family:inherit; font-size:13.5px; color:var(--muted); padding:10px 4px; min-height:44px; }
.mnl-reportsec-open b{ color:#0b6b60; font-weight:600; }
.mnl-reportsec-i{ width:17px; height:17px; display:inline-flex; }
/* Matches its own label. A meaningful icon at 2.76:1 fails the 3:1 bar its text already passed. */
.mnl-reportsec-i svg{ width:17px; height:17px; fill:#5c6976; }
.mnl-report a{ color:var(--blue); font-weight:600; }
.mnl-reportsec{ margin:34px auto 0; max-width:820px; background:var(--page); border:1px solid #e3edf3; border-radius:16px; padding:24px 26px; text-align:center; }
.mnl-reportsec-h{ font-size:17px; font-weight:700; color:var(--navy); margin:0 0 8px; }
.mnl-reportsec-note{ font-size:12.5px; line-height:1.7; color:var(--gray); margin:0 auto 18px; max-width:640px; }
.mnl-reportsec-btns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.mnl-rbtn{ min-height:44px; border:1px solid #d6e0eb; background:#fff; color:var(--navy); font-family:inherit; font-weight:600; font-size:12.5px; padding:11px 18px; border-radius:999px; cursor:pointer; transition:all .15s ease; }
.mnl-rbtn:hover{ border-color:var(--orange); color:var(--orange); }
.mnl-rbtn.sel{ background:var(--orange); border-color:var(--orange); color:#fff; }
.mnl-reportform{ margin-top:16px; max-width:520px; margin-left:auto; margin-right:auto; text-align:left; }
.mnl-rnote{ width:100%; border:1px solid #d6e0eb; border-radius:12px; padding:11px 14px; font-family:inherit; font-size:13px; resize:vertical; box-sizing:border-box; }
.mnl-reportform-row{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.mnl-rsubmit{ background:var(--navy); color:#fff; border:none; font-family:inherit; font-weight:600; font-size:13px; padding:11px 22px; border-radius:999px; cursor:pointer; }
.mnl-rsubmit:disabled{ opacity:.6; cursor:default; }
.mnl-rmsg{ font-size:12px; color:var(--orange); font-weight:600; }
.mnl-rdone{ background:#e6f5ef; border:1px solid #bfe3d3; color:#1c6b4f; border-radius:12px; padding:12px 16px; font-size:13px; font-weight:600; text-align:center; }
.mnl-cal{ background:#fff; border:1px solid var(--line,#e3edf3); border-radius:16px; padding:20px 22px; margin-top:26px; }
.mnl-cal h2{ font-size:18px; font-weight:700; color:var(--navy); margin:0 0 4px; }
.mnl-calnote{ font-size:12.5px; color:var(--gray); margin:0 0 14px; }
.mnl-calrow{ display:flex; gap:14px; padding:9px 0; border-top:1px solid #eef2f6; font-size:13.5px; }
.mnl-caldate{ flex:none; width:120px; font-weight:700; color:var(--navy); }
.mnl-caltitle{ color:var(--gray); }
/* similar */
/* 🚨 HIDDEN UNTIL IT FILLS, NOT HIDDEN 2.5 SECONDS LATER. AdSense was rejected on 2026-09-12, so
   it never fills, and an empty 419px box labelled "Advertisement" was showing at the top of every
   listing load on a phone before the timeout removed it. A guaranteed layout shift on every view.
   The script reveals it by adding .is-filled, so a rejected or blocked account shows nothing. */
.mnl-ad{ display:none; margin-top:36px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:10px 12px; text-align:center; overflow:hidden; }
.mnl-ad.is-filled{ display:block; }
.mnl-ad-label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#6f767e; margin-bottom:5px; }
.mnl-ad .adsbygoogle{ min-height:90px; }
.mnl-ad + .mnl-similar-wrap{ margin-top:24px; }
.mnl-similar-wrap{ margin-top:36px; }
.mnl-similar-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.mnl-similar-head h2{ color:#0b6b60; }
.mnl-similar-head h2{ font-weight:600; font-size:19px; color:var(--navy); margin:0; }
/* #0b6b60: var(--blue) is 4.12:1 on the page ground, and this pair sits on the ground, not
   on a white card. Same for the heading beside it. */
.mnl .mnl-similar-all{ display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:600; color:#0b6b60; }
/* auto-fit with a cap: the row is fed three cards, sometimes one, and a fixed 4-track grid left
   whole empty columns. A max of 380px stops a single card stretching across the page. */
/* 1fr, not a 380px cap: capped tracks left 574px of empty ground at 1900px. auto-fit still
   collapses the empty tracks when the row is fed one card. */
.mnl-similar{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }
@media (max-width:980px){ .mnl-similar{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .mnl-similar{ grid-template-columns:1fr; } }
.mnl-scard{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; color:inherit; transition:transform .16s, box-shadow .16s; }
.mnl-scard:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(16,60,54,.1); }
.mnl-scard-img{ height:126px; background-size:cover; background-position:center; background-color:#dcecf6; }
.mnl-scard-body{ padding:13px 15px 15px; }
.mnl-scard-title{ font-weight:600; font-size:12.5px; color:var(--navy); margin:0 0 4px; display:flex; align-items:center; gap:6px; line-height:1.35; }
.mnl-scard-title svg{ width:13px; height:13px; fill:var(--teal); flex:none; }
.mnl-scard-cat{ font-size:13px; color:var(--muted); }
/* lightbox */
.mnl-lb{ display:none; position:fixed; inset:0; background:rgba(10,18,32,.92); z-index:9999; align-items:center; justify-content:center; }
.mnl-lb.open{ display:flex; }
.mnl-lb img{ max-width:90vw; max-height:82vh; border-radius:10px; }
.mnl-lb-close{ border:0; min-width:48px; min-height:48px; display:flex; align-items:center; justify-content:center;  position:absolute; top:20px; right:24px; color:#fff; font-size:34px; cursor:pointer; line-height:1; }
.mnl-lb-nav{ border:0; min-width:48px; min-height:48px; display:flex; align-items:center; justify-content:center;  position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:44px; cursor:pointer; padding:0 22px; user-select:none; }
.mnl-lb-nav.prev{ left:0; } .mnl-lb-nav.next{ right:0; }
/* share sheet */
.mnl-share-wrap{ position:relative; }
.mnl-plan-wrap{ position:relative; }
.mnl-plan-menu{ display:none; position:absolute; right:0; top:50px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 40px rgba(16,60,54,.16); padding:14px; z-index:51; width:262px; }
.mnl-plan-menu.open{ display:block; }
.mnl-plan-h{ font-size:12.5px; font-weight:650; color:var(--ink); margin-bottom:9px; }
.mnl-plan-menu input{ width:100%; font-family:inherit; font-size:13px; padding:9px 11px; border:1px solid var(--line); border-radius:9px; margin-bottom:8px; color:var(--ink); background:#fff; }
.mnl-plan-menu input:focus{ outline:2px solid var(--seafoam,#0f8576); outline-offset:1px; }
.mnl-plan-save{ width:100%; font:inherit; font-size:13px; font-weight:600; border:0; border-radius:10px; padding:10px; background:#ff917f; color:#5c1f13; cursor:pointer; }
.mnl-plan-save:hover{ filter:brightness(1.05); }
.mnl-plan-save:disabled{ opacity:.7; cursor:default; }
.mnl-plan-done{ display:none; font-size:12px; color:#1a8f6a; margin-top:9px; text-align:center; }
.mnl-plan-done.show{ display:block; }
.mnl-plan-done a{ color:#0f8576; font-weight:600; }
.mnl-list-body{ max-height:190px; overflow-y:auto; margin-bottom:10px; }
.mnl-list-row{ display:flex; align-items:center; gap:9px; padding:7px 4px; cursor:pointer; font-size:13px; color:var(--ink); border-radius:8px; }
.mnl-list-row:hover{ background:#f0faf9; }
.mnl-list-row .bx{ width:17px; height:17px; border:1.5px solid var(--line); border-radius:5px; flex:none; display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff; }
.mnl-list-row.on .bx{ background:#0f8576; border-color:#0f8576; }
.mnl-list-row .n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mnl-list-row .c{ font-size:13px; color:#666f79; }
.mnl-list-none{ font-size:12.5px; color:#666f79; padding:6px 4px 10px; }
.mnl-share-menu{ display:none; position:absolute; right:0; top:50px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 40px rgba(16,60,54,.16); padding:8px; z-index:50; min-width:190px; }
.mnl-share-menu.open{ display:block; }
.mnl-share-menu a, .mnl-share-menu button{ display:flex; align-items:center; gap:11px; width:100%; padding:11px 14px; font-family:inherit; font-size:12.5px; font-weight:500; color:var(--navy); background:none; border:none; border-radius:9px; cursor:pointer; text-align:left; }
.mnl-share-menu a:hover, .mnl-share-menu button:hover{ background:#f3f7fa; }
.mnl-share-menu svg{ width:16px; height:16px; fill:var(--muted); }
.mnl-loading{ text-align:center; padding:80px 20px; color:var(--muted); font-size:15px; }
.mnl-recip-lede{ margin:0 0 10px; font-size:13.5px; line-height:1.6; color:var(--muted); }
.mnl-recip-list{ list-style:none; margin:0 0 10px; padding:0; display:grid; gap:9px; }
.mnl-recip-list li{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.mnl-recip-list a{ color:var(--blue); font-weight:600; font-size:13.5px; text-decoration:none; }
.mnl-recip-list a:hover{ text-decoration:underline; }
.mnl-recip-list span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; line-height:1.45; }
.mnl-recip-foot{ margin:0; font-size:12px; color:var(--muted); line-height:1.55; }
.mnl-recip-foot a{ color:var(--blue); font-weight:600; text-decoration:none; }
.mnl-ssr-links{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 22px; }
@media(max-width:600px){ .mnl-ssr-links{ grid-template-columns:1fr; } }
.mnl-ssr-links a{ color:var(--blue); font-weight:600; font-size:12.5px; text-decoration:none; }
.mnl-ssr-links a:hover{ color:var(--navy); }
@media (max-width:640px){
    .mnl{ padding:10px 18px 44px; }
    .mnl-gallery{ grid-template-columns:1fr 1fr; grid-template-rows:110px 110px; }
    .mnl-gallery .g0{ grid-column:1 / span 2; grid-row:1; }
    .mnl-gallery .g3,.mnl-gallery .g4{ display:none; }
    .mnl-h1{ font-size:24px; }
    .mnl-head-actions{ width:100%; }
}