/* ══════════════════════════════════════════════════════════════════
   RönYen mega menu — desktop full-width panels + mobile accordion.
   Replaces only the primary nav region; brand tokens come from brand.css
   (never hardcode hex). Desktop ≥901px: hover/focus mega. ≤900px: the nav
   is hidden and the accordion lives inside the existing #ry-sheet-menu.
   ══════════════════════════════════════════════════════════════════ */

/* anchor the full-width panels to the dark nav row */
.header-main{ position:relative; }

/* ── Desktop nav items (mega triggers) ───────────────────────────── */
.ry-mega-item{ display:inline-flex; align-items:center; gap:6px; }
.ry-mega-item .car{ width:9px; height:9px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; opacity:.55; }
.ry-mega-item .car line{ transition:transform .22s ease, opacity .22s;
  transform-box:fill-box; transform-origin:center; }
/* open / active → brand-blue underline + caret morphs to a minus */
.ry-mega-nav .ry-mega-item:hover,
.ry-mega-nav .ry-mega-item.is-open,
.ry-mega-nav .ry-mega-item.is-active{ border-bottom-color:var(--ice); color:#fff; }
.ry-mega-item.is-open .car{ opacity:1; }
.ry-mega-item.is-open .car .vh{ transform:scaleY(0); }

/* ── Full-width panels ───────────────────────────────────────────── */
.ry-mega-panels{ position:absolute; left:0; right:0; top:100%; z-index:60; }
.ry-mega-panel{
  display:none; position:relative;
  background:var(--surface); color:var(--heading);
  border-top:3px solid var(--peach);
  box-shadow:0 22px 40px -16px rgba(26,31,36,.30);
}
.ry-mega-panel.is-open{ display:block; }
.ry-mega-inner{
  max-width:var(--maxw); margin:0 auto; padding:38px 40px 40px;
  display:flex; flex-wrap:wrap; gap:38px; align-items:flex-start;
}
.ry-mega-inner .mcol{ flex:1 1 0; min-width:0; }

/* shared link primitives */
.mcol-h{ font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px; }
.mlinks{ display:flex; flex-direction:column; }
.mlink{ display:inline-flex; align-items:baseline; gap:8px; width:fit-content;
  color:var(--heading); font-weight:400; font-size:.975rem; padding:8px 0; line-height:1.3;
  transition:color .14s; }
.mlink:hover{ color:var(--ice); }
.mlink.is-plain{ color:var(--muted); cursor:default; }     /* no URL yet → plain text */
.mlink--all{ font-weight:600; color:var(--ice); margin-top:6px; }
.mlink--all .arr{ transition:transform .16s; display:inline-block; }
.mlink--all:hover .arr{ transform:translateX(4px); }

/* featured area — one or two product cards, side by side when the panel has
   room, otherwise wrapping to stacked */
.ry-mega-tiles{ flex:0 1 auto; align-self:flex-start; display:flex; flex-wrap:wrap; gap:16px; }

/* product tile */
.ry-mega-tiles .pcard{ flex:0 0 248px; display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-product); transition:box-shadow .2s, transform .2s; }
a.pcard:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(26,31,36,.14); }
.ry-mega-panel .pcard .pimg{ aspect-ratio:5/4; background:var(--section-alt);
  background-image:repeating-linear-gradient(135deg,transparent 0 12px,rgba(26,31,36,.04) 12px 24px); }
.ry-mega-panel .pcard .pimg.has-img{ background-image:none; }
.ry-mega-panel .pcard .pimg img{ width:100%; height:100%; object-fit:cover; display:block; }
.ry-mega-panel .pcard .pbody{ padding:16px 18px 18px; }
.ry-mega-panel .pcard .k{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sauna); font-weight:600; }
.ry-mega-panel .pcard .t{ font-weight:500; font-size:1.08rem; color:var(--heading); margin-top:7px; letter-spacing:-.01em; }
.ry-mega-panel .pcard .sp{ font-size:.82rem; font-weight:300; color:var(--muted); margin-top:3px; }
.ry-mega-panel .pcard .prow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.ry-mega-panel .pcard .price{ font-weight:600; color:var(--heading); font-size:1rem; }
.ry-mega-panel .pcard .price small{ font-weight:300; color:var(--muted); font-size:.72rem; margin-right:4px; }
.ry-mega-panel .pcard .go{ display:inline-flex; align-items:center; gap:7px; font-size:.85rem; font-weight:600;
  color:#fff; padding:9px 15px; background:var(--cta); border-radius:var(--r-md); transition:background .15s; }
a.pcard:hover .go{ background:var(--cta-hover); }
.ry-mega-panel .pcard .go .arr{ transition:transform .16s; display:inline-block; }
a.pcard:hover .go .arr{ transform:translateX(3px); }

/* peach contact bar — full-width strip flush to the bottom of every mega panel */
.ry-mega-cbar{ background:var(--peach); color:var(--peach-text); }
.ry-mega-cbar .cbar-in{ max-width:var(--maxw); margin:0 auto; padding:12px 40px;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px 24px; font-size:.9rem; }
.ry-mega-cbar .q{ font-weight:600; }
.ry-mega-cbar a{ display:inline-flex; align-items:center; gap:7px;
  color:var(--peach-text); font-weight:500; }
.ry-mega-cbar a:hover{ text-decoration:underline; }
.ry-mega-cbar .lnk{ font-weight:600; }
.ry-mega-cbar svg{ width:15px; height:15px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* simple dropdown (Our Services) — small, left-aligned list */
.ry-mega-panel--simple{ left:auto; }
.ry-mega-simple{ max-width:var(--maxw); margin:0 auto; padding:30px 40px 34px; }

/* Our Services — four service cards (image top, title under) filling the full
   panel width as an even 4-column grid. Card styling matches the product card. */
.ry-svc-cards{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.ry-svc-card{ display:flex; flex-direction:column; color:var(--heading);
  background:var(--bg); border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-product); transition:box-shadow .2s, transform .2s; }
a.ry-svc-card:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(26,31,36,.14); }
.ry-svc-card .svc-img{ aspect-ratio:4/3; background:var(--section-alt);
  background-image:repeating-linear-gradient(135deg,transparent 0 12px,rgba(26,31,36,.04) 12px 24px); }
.ry-svc-card .svc-img.has-img{ background-image:none; }
.ry-svc-card .svc-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ry-svc-card .svc-title{ padding:13px 15px; font-weight:500; font-size:.97rem;
  color:var(--heading); letter-spacing:-.01em; line-height:1.3; }
a.ry-svc-card:hover .svc-title{ color:var(--ice); }

/* hover bridge: keep the OPEN panel reachable from the nav row (only present
   while a panel is shown, so it never intercepts clicks when closed) */
.ry-mega-panel::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }

@media (max-width:1080px){
  .ry-mega-inner{ gap:30px; }
}
@media (max-width:900px){
  .ry-mega-panels{ display:none; }   /* mobile uses the accordion in the sheet */
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — accordion inside #ry-sheet-menu (dark sheet)
   ══════════════════════════════════════════════════════════════════ */
/* peach reassurance strip at the top of the hamburger drawer */
.ry-mm-deliverybar{
  margin:0; padding:9px 24px; text-align:center;
  background:var(--peach); color:var(--peach-text);
  font-size:.82rem; font-weight:600; letter-spacing:.01em;
}

/* hamburger-drawer wrapper for the mega region — inset to match .drawer-* rows
   (the bottom sheet keeps its own edge-to-edge layout, unchanged from #216) */
.drawer-section--mega{ padding:14px 0 8px; border-top:1px solid rgba(255,255,255,.08); }

.ry-mm-shopcta{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:4px 24px 12px; padding:13px 17px; background:var(--cta); color:#fff;
  border-radius:var(--r-lg); font-weight:600; font-size:.94rem; transition:background .15s;
}
.ry-mm-shopcta:hover, .ry-mm-shopcta:active{ background:var(--cta-hover); }
.ry-mm-shopcta svg{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

.ry-mm-acc .acc{ border-bottom:1px solid rgba(255,255,255,.10); }
.ry-mm-acc .acc:first-of-type{ border-top:1px solid rgba(255,255,255,.10); }
.ry-mm-acc .acc-head{ width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; font-size:1rem; font-weight:500; color:#fff; cursor:pointer; text-align:left; }
.ry-mm-acc .acc-head .pm{ width:13px; height:13px; flex:none; fill:none; stroke:var(--nav-muted);
  stroke-width:1.7; stroke-linecap:round; }
.ry-mm-acc .acc-head .pm line{ transition:transform .24s ease, opacity .2s;
  transform-box:fill-box; transform-origin:center; }
.ry-mm-acc .acc.open .acc-head .pm{ stroke:#fff; }
.ry-mm-acc .acc.open .acc-head .pm .vh{ transform:scaleY(0); }
.ry-mm-acc .acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
.ry-mm-acc .acc.open .acc-body{ grid-template-rows:1fr; }
.ry-mm-acc .acc-inner{ overflow:hidden; }
.ry-mm-acc .acc-pad{ padding:2px 24px 14px; }
.ry-mm-acc .acc-sub-h{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--nav-muted); margin:12px 0 5px; }
.ry-mm-acc .acc-link{ display:flex; align-items:center; justify-content:space-between;
  padding:11px 0; font-size:.92rem; font-weight:300; color:#dfe2e6;
  border-bottom:1px solid rgba(255,255,255,.06); transition:color .14s; }
.ry-mm-acc .acc-link:last-child{ border-bottom:0; }
.ry-mm-acc .acc-link:hover, .ry-mm-acc .acc-link:active{ color:#fff; }
.ry-mm-acc .acc-link.is-plain{ color:var(--nav-muted); }   /* no URL yet → plain text */
.ry-mm-acc .acc-link--all{ color:var(--ice); font-weight:500; }
.ry-mm-acc .acc-link .arr{ color:var(--nav-muted); }