/* ==========================================================================
   MENGED · Checkpoint 4 refinement layer (loaded LAST, after fluid-layout.css)
   Scope: (1) Explore MENGED panel redesign, (2) orphan-item alignment in
   two-column grids, (3) Trade product-card overlay clean-up.
   Everything here is namespaced (.sm-*, .tf-sr) or tightly scoped, so it can be
   removed or tuned without touching the older layered rules above.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Explore MENGED panel
   -------------------------------------------------------------------------- */
html body #sites{place-items:center;padding:20px 16px}
html body #sites .sbx.sm-panel{
  width:min(760px,100%);max-width:calc(100vw - 24px);max-height:min(86dvh,780px);
  display:flex;flex-direction:column;overflow:hidden;
  background:#fbfaf6;border:1px solid rgba(24,35,29,.08);border-radius:28px;
  box-shadow:0 44px 110px -28px rgba(6,22,15,.6),0 2px 0 rgba(255,255,255,.7) inset;
  transform:translateY(18px) scale(.98);
}
html body #sites.on .sbx.sm-panel{transform:none}
.sm-panel .sm-grab{display:none}

/* header */
html body #sites .sm-panel .sbh{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:24px 26px 14px;border-bottom:0;background:transparent;
}
.sm-panel .sm-head{min-width:0}
.sm-panel .sm-kicker{
  font:500 clamp(24px,3.2vw,30px)/1.08 var(--dsp,Georgia,serif);letter-spacing:-.01em;color:var(--fg,#18231d);margin:0;
}
.sm-panel .sm-sub{margin:7px 0 0;font:400 14px/1.45 var(--sans,Inter,system-ui,sans-serif);color:var(--mut,#5d6a62)}
html body #sites .sm-panel #sx{
  flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;min-width:42px;padding:0;
  border-radius:50%;border:1px solid rgba(24,35,29,.14);background:#fff;color:var(--fg,#18231d);
  cursor:pointer;transition:background .2s,border-color .2s,transform .2s;
}
html body #sites .sm-panel #sx:hover{background:#f1eee5;border-color:rgba(24,35,29,.28)}
html body #sites .sm-panel #sx:active{transform:scale(.94)}
html body #sites .sm-panel #sx:focus-visible{outline:3px solid rgba(198,155,89,.75);outline-offset:2px}

/* body */
.sm-panel .sm-body{
  display:flex;flex-direction:column;gap:20px;min-height:0;overflow:auto;overscroll-behavior:contain;
  padding:6px 26px 26px;
}

/* shared tile parts */
.sm-panel .sm-ico{
  flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:color-mix(in srgb,var(--c,#1f5e44) 14%,#fff);color:var(--c,#1f5e44);
}
.sm-panel .sm-ico .ic,.sm-panel .sm-ico svg{width:22px;height:22px;display:block;position:static;margin:0;padding:0}
.sm-panel .sm-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.sm-panel .sm-name{font:700 15.5px/1.25 var(--sans,Inter,system-ui,sans-serif);letter-spacing:0;color:inherit}
.sm-panel .sm-desc{font:400 13px/1.45 var(--sans,Inter,system-ui,sans-serif);color:var(--mut,#5d6a62);overflow-wrap:anywhere}
.sm-panel .sm-go{
  flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  color:var(--mut,#5d6a62);transition:transform .25s,background .25s,color .25s;
}
.sm-panel .sm-go .ic,.sm-panel .sm-go svg{width:16px;height:16px;position:static;margin:0;padding:0}
html body #sites .sm-panel .sm-cur{
  margin:0;padding:5px 9px;border-radius:99px;background:rgba(183,129,45,.16);color:#7d5414;
  font:700 10.5px/1 var(--sans,Inter,system-ui,sans-serif);font-style:normal;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}

/* Group row */
html body #sites .sm-panel a.sm-group{
  position:relative;display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:22px;
  background:linear-gradient(135deg,#18432f 0%,#0e2b20 100%);color:#fff;text-decoration:none;border:0;
  box-shadow:0 18px 34px -22px rgba(10,40,28,.8);transition:transform .3s,box-shadow .3s;
}
.sm-panel .sm-group .sm-ico{width:48px;height:48px;background:rgba(255,255,255,.12);color:var(--mg-gold-soft,#e6c98c)}
.sm-panel .sm-group .sm-name{font:600 21px/1.15 var(--dsp,Georgia,serif);letter-spacing:0}
.sm-panel .sm-group .sm-desc{color:rgba(255,255,255,.78)}
.sm-panel .sm-group .sm-go{background:rgba(255,255,255,.14);color:#fff;width:34px;height:34px}
html body #sites .sm-panel .sm-group .sm-cur{background:rgba(255,255,255,.16);color:var(--mg-gold-soft,#e6c98c)}

/* section label: centred, hairlines either side */
.sm-panel .sm-label{
  display:flex;align-items:center;gap:14px;margin:0 0 14px;
  font:700 11px/1 var(--sans,Inter,system-ui,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--mut,#5d6a62);
}
.sm-panel .sm-label::before,.sm-panel .sm-label::after{content:"";flex:1 1 0;height:1px;background:rgba(24,35,29,.12)}

/* tiles: three per row, any incomplete last row is centred */
.sm-panel .sm-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
html body #sites .sm-panel a.sm-tile{
  position:relative;flex:0 1 calc((100% - 24px)/3);min-width:0;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:18px 16px 16px;
  border-radius:20px;background:#fff;border:1px solid rgba(24,35,29,.1);color:var(--fg,#18231d);text-decoration:none;
  transition:transform .3s,border-color .3s,box-shadow .3s,background-color .3s;
}
.sm-panel .sm-tile .sm-go{position:absolute;top:14px;right:12px}
html body #sites .sm-panel .sm-tile .sm-cur{position:absolute;top:16px;right:12px}
@media (hover:hover){
  html body #sites .sm-panel a.sm-tile:hover{
    transform:translateY(-3px);border-color:color-mix(in srgb,var(--c,#1f5e44) 55%,transparent);
    box-shadow:0 16px 30px -18px color-mix(in srgb,var(--c,#1f5e44) 70%,#000);
  }
  html body #sites .sm-panel a.sm-tile:hover .sm-go{background:color-mix(in srgb,var(--c,#1f5e44) 14%,transparent);color:var(--c,#1f5e44);transform:translateX(2px)}
  html body #sites .sm-panel a.sm-group:hover{transform:translateY(-2px);box-shadow:0 22px 38px -20px rgba(10,40,28,.85)}
  html body #sites .sm-panel a.sm-group:hover .sm-go{transform:translateX(3px)}
}
html body #sites .sm-panel a:focus-visible{outline:3px solid rgba(198,155,89,.8);outline-offset:3px}

/* current site: gold edge, badge replaces the arrow */
html body #sites .sm-panel a.sm-tile[aria-current="page"],
html body[data-s=tours] #sites .sm-panel [data-k=tours],html body[data-s=cars] #sites .sm-panel [data-k=cars],
html body[data-s=trade] #sites .sm-panel [data-k=trade],html body[data-s=business] #sites .sm-panel [data-k=business],
html body[data-s=support] #sites .sm-panel [data-k=support]{
  border-color:var(--mg-gold,#b7812d);background:linear-gradient(180deg,rgba(183,129,45,.09),rgba(183,129,45,.03));
}
html body #sites .sm-panel [aria-current="page"] .sm-go,
html body[data-s=tours] #sites .sm-panel [data-k=tours] .sm-go,html body[data-s=cars] #sites .sm-panel [data-k=cars] .sm-go,
html body[data-s=trade] #sites .sm-panel [data-k=trade] .sm-go,html body[data-s=business] #sites .sm-panel [data-k=business] .sm-go,
html body[data-s=support] #sites .sm-panel [data-k=support] .sm-go,html body[data-s=group] #sites .sm-panel [data-k=group] .sm-go{display:none}

/* mid widths: two per row, last one centred */
@media (max-width:760px){
  html body #sites .sm-panel a.sm-tile{flex-basis:calc((100% - 12px)/2)}
  .sm-panel .sm-body{padding:4px 20px 22px;gap:18px}
  html body #sites .sm-panel .sbh{padding:22px 20px 12px}
}

/* phones: bottom sheet, one tile per row (no orphans possible) */
@media (max-width:560px){
  html body #sites{place-items:end center;padding:0}
  html body #sites .sbx.sm-panel{
    width:100%!important;max-width:100%;max-height:92dvh;border-radius:26px 26px 0 0;border-bottom:0;
    transform:translateY(36px);padding-bottom:env(safe-area-inset-bottom);
  }
  html body #sites.on .sbx.sm-panel{transform:none}
  .sm-panel .sm-grab{display:block;width:42px;height:4px;border-radius:4px;background:rgba(24,35,29,.2);margin:10px auto 0;flex:0 0 auto}
  html body #sites .sm-panel .sbh{padding:12px 18px 10px;align-items:center;cursor:default}
  .sm-panel .sm-kicker{font-size:24px}
  .sm-panel .sm-sub{font-size:13px;margin-top:5px}
  html body #sites .sm-panel #sx{width:40px;height:40px;min-width:40px}
  .sm-panel .sm-body{padding:6px 16px 20px;gap:16px}
  html body #sites .sm-panel a.sm-group{padding:14px 16px;gap:14px;border-radius:18px}
  .sm-panel .sm-group .sm-ico{width:44px;height:44px}
  .sm-panel .sm-group .sm-name{font-size:19px}
  .sm-panel .sm-label{margin-bottom:10px}
  .sm-panel .sm-grid{gap:8px}
  html body #sites .sm-panel a.sm-tile{flex:1 1 100%;flex-direction:row;align-items:center;gap:13px;padding:11px 14px 11px 12px;border-radius:16px}
  .sm-panel .sm-tile .sm-ico{width:40px;height:40px;border-radius:12px}
  .sm-panel .sm-tile .sm-go,html body #sites .sm-panel .sm-tile .sm-cur{position:static;margin-left:auto}
  .sm-panel .sm-desc{font-size:12.5px;line-height:1.4}
}
/* while the panel is open, floating helpers step aside so they never sit on top of it */
html body:has(#sites.on) :is(.mgq-bar,#up){opacity:0!important;visibility:hidden!important;pointer-events:none!important}
@media (prefers-reduced-motion:reduce){html body #sites .sbx.sm-panel,html body #sites .sm-panel a{transition:none!important}}

/* --------------------------------------------------------------------------
   2. Orphan alignment: when a two-column grid ends on a single item, centre it
      (cards and chips keep the width of their neighbours; text rows centre their text).
   -------------------------------------------------------------------------- */
/* Home · "Start with what you need" (two columns from 761px up): the odd last row spans the grid with centred text */
@media (min-width:761px){
  html body #main .group-outcome-grid>.group-outcome-row:last-child:nth-child(odd){
    grid-column:1/-1;justify-self:stretch;text-align:center;
  }
  html body #main .group-outcome-grid>.group-outcome-row:last-child:nth-child(odd) p{margin-left:auto;margin-right:auto}
  html body #main .group-outcome-grid>.group-outcome-row:last-child:nth-child(odd):hover{padding-left:0}
}
/* Business · planning tools (two columns between 901px and 1100px) */
@media (min-width:901px) and (max-width:1100px){
  html body #main .tg>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 8px)}
}
html body #main .tg+p{margin-top:22px}
/* Trade · coffee-origin chips (two columns on phones) */
@media (max-width:680px){
  html body #main .origin-grid>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 3.5px)}
}

/* --------------------------------------------------------------------------
   3. Trade product-family cards: photo first, one calm text block at the bottom
   -------------------------------------------------------------------------- */
.tf-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

html body #main .trade-family-grid a.m{
  padding:0;border-radius:20px;justify-content:flex-end;isolation:isolate;background:#16281f;
  min-height:clamp(200px,26vw,290px);
}
/* soft, even scrim: transparent over the photo, deep green under the text only */
html body #main .trade-family-grid a.m::after{
  inset:0;height:auto;
  background:linear-gradient(180deg,rgba(8,20,14,0) 38%,rgba(8,20,14,.5) 66%,rgba(8,20,14,.9) 100%);
}
html body #main .trade-family-grid a.m>h3,
html body #main .trade-family-grid a.m>.mos-desc{margin:0;padding-left:18px;padding-right:18px;text-shadow:0 1px 10px rgba(0,0,0,.45)}
html body #main .trade-family-grid a.m>h3{
  font:500 clamp(19px,2.1vw,24px)/1.14 var(--dsp,Georgia,serif)!important;letter-spacing:0;
  overflow-wrap:break-word;hyphens:manual;text-wrap:balance;
}
html body #main .trade-family-grid a.m>h3 .menu-amp{font-size:.8em;color:var(--mg-gold-soft,#e6c98c)}
html body #main .trade-family-grid a.m>.mos-desc{
  display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  padding-top:5px;padding-bottom:18px;
  font:500 13px/1.4 var(--sans,Inter,system-ui,sans-serif);color:rgba(255,255,255,.9);max-width:none;
}
/* the repeated "Explore options" label becomes a small arrow chip in the corner */
html body #main .trade-family-grid a.m>.mos-explore{
  position:absolute;top:12px;right:12px;margin:0;padding:0;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:rgba(12,28,20,.38);border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .3s,background .3s;
}
html body #main .trade-family-grid a.m>.mos-explore .ic{width:15px;height:15px}
@media (hover:hover){html body #main .trade-family-grid a.m:hover>.mos-explore{background:rgba(198,155,89,.9);transform:translateX(2px)}}
@media (max-width:520px){
  html body #main .trade-family-grid a.m{min-height:188px;border-radius:16px}
  html body #main .trade-family-grid a.m>h3,
  html body #main .trade-family-grid a.m>.mos-desc{padding-left:13px;padding-right:13px}
  html body #main .trade-family-grid a.m>h3{font-size:17px!important}
  html body #main .trade-family-grid a.m>.mos-desc{font-size:12px;padding-bottom:14px;line-height:1.35}
  html body #main .trade-family-grid a.m>.mos-explore{top:9px;right:9px;width:30px;height:30px}
}

/* --------------------------------------------------------------------------
   4. Request form · "Looking for something else?" — a centred lead line, then tidy link pills
      (no dangling separators when the line wraps)
   -------------------------------------------------------------------------- */
html body #main .rq-other-sectors{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 8px;
  margin:22px 0 4px;text-align:center;font-size:13px;line-height:1.4;
}
html body #main .rq-other-sectors .rq-os-lead{flex:0 0 100%;color:var(--mut,#5d6a62);margin-bottom:2px}
html body #main .rq-other-sectors .rq-os{white-space:nowrap}
html body #main .rq-other-sectors .rq-os>span[aria-hidden]{display:none}
html body #main .rq-other-sectors .rq-os a{
  display:inline-block;padding:7px 14px;line-height:1.45;border-radius:99px;
  border:1px solid var(--line,rgba(24,35,29,.14));background:#fff;font-weight:600;text-decoration:none;
  transition:border-color .2s,background-color .2s;
}
@media (hover:hover){html body #main .rq-other-sectors .rq-os a:hover{border-color:var(--acc,#c4501b);background:color-mix(in srgb,var(--acc,#c4501b) 6%,#fff)}}


/* Checkpoint 7 · compact journey options and anchored destination suggestions. */
html body #main .jt-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;
}
html body #main .jt-opt:nth-child(n){grid-column:auto!important;min-width:0!important}
html body #main .jt-opt:nth-child(n) .jt-card{
  display:flex!important;flex-direction:row!important;align-items:center!important;gap:9px!important;
  height:auto!important;min-height:58px!important;padding:8px 30px 8px 10px!important;
  border-radius:12px!important;box-shadow:none!important;
}
html body #main .jt-opt:nth-child(n) .jt-ico{
  display:grid!important;place-items:center!important;flex:0 0 30px!important;width:30px!important;height:30px!important;border-radius:9px!important;
}
html body #main .jt-opt:nth-child(n) .jt-ico .ic,
html body #main .jt-opt:nth-child(n) .jt-ico svg{width:19px!important;height:19px!important}
html body #main .jt-opt:nth-child(n) .jt-txt{flex:1 1 auto!important;min-width:0!important;padding:0!important;gap:2px!important}
html body #main .jt-opt:nth-child(n) .jt-txt b{font-size:12px!important;line-height:1.2!important}
html body #main .jt-opt:nth-child(n) .jt-txt small{font-size:10.5px!important;line-height:1.25!important;text-wrap:initial!important}
html body #main .jt-opt:nth-child(n) .jt-tick{top:50%!important;right:8px!important;width:16px!important;height:16px!important;margin-top:-8px!important}
@media(min-width:900px){html body #main .jt-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

html body #main .has-place-suggestions{position:relative!important;overflow:visible!important;isolation:isolate}
html body #main .has-place-suggestions:focus-within{z-index:240!important}
html body #main .has-place-suggestions:focus-within input{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}
html body #main .has-place-suggestions .place-suggestions{
  position:absolute!important;top:calc(100% - 1px)!important;left:0!important;right:0!important;width:100%!important;
  box-sizing:border-box!important;max-height:min(260px,38vh)!important;overflow-y:auto!important;
  border-radius:0 0 12px 12px!important;z-index:250!important;box-shadow:0 12px 26px rgba(0,0,0,.16)!important;
}
html body #main .has-place-suggestions .place-suggestions[hidden]{display:none!important}
html body #main .qf:has(.has-place-suggestions:focus-within),
html body #main .rq-route-fields:has(.has-place-suggestions:focus-within),
html body #main .rq-field-grid:has(.has-place-suggestions:focus-within){position:relative;z-index:240;overflow:visible!important}

/* Trade hero collage is a desktop/tablet treatment; on phones, prioritise the text and CTAs. */
@media(max-width:700px){
  html body[data-s=trade] #main .rh .stk{display:none!important}
  html body[data-s=trade] #main .rh .rh2{grid-template-columns:minmax(0,1fr)!important}
}

/* Checkpoint 8 · readable source register and expandable asset inventory. */
.mg-credits-dialog details{margin:12px 0;padding:12px 14px;border:1px solid #dfe4da;border-radius:12px;background:rgba(255,255,255,.58)}
.mg-credits-dialog details>summary{cursor:pointer;color:#24513d;font-weight:700;text-underline-offset:3px}
.mg-credits-dialog details[open]>summary{margin-bottom:8px}
.mg-credits-dialog code{font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}
.mg-credits-dialog strong{color:#1b3027}
.mg-credits-dialog p{overflow-wrap:anywhere}