/* Solution mega menu (megamenu.js): tabs · items · live preview. White / black / grey + brand orange. */
.ymm { position: fixed; left: 50%; top: 88px; z-index: 60; width: min(1220px, calc(100vw - 40px)); padding-top: 10px;
  visibility: hidden; opacity: 0; transform: translate(-50%, 10px); pointer-events: none;
  transition: opacity .3s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1), visibility .3s; }
.ymm-item.open .ymm { visibility: visible; opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ymm-item.open .chev { transform: rotate(180deg); }
.ymm-in { display: grid; grid-template-columns: 240px minmax(0, 1fr) 330px; min-height: 470px; border-radius: 26px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px #ece6de, 0 40px 80px -30px rgba(40,25,10,.35); }
.ymm a { text-decoration: none; color: inherit; }
.ymm ul { list-style: none; margin: 0; padding: 0; }
/* tabs */
.ymm-tabs { display: flex; flex-direction: column; gap: 6px; padding: 22px 16px; background: #faf7f3; border-right: 1px solid #f0e9e1; }
.ymm-tab { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 14px; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; font: inherit; transition: background .25s, box-shadow .25s; }
.ymm-tab b { font-size: 15px; font-weight: 800; color: #6b6b6b; transition: color .25s; }
.ymm-tab span { grid-column: 1; font-size: 12px; font-weight: 500; color: #9a9a9a; }
.ymm-tab em { grid-row: 1 / 3; grid-column: 2; align-self: center; min-width: 26px; padding: 3px 7px; border-radius: 999px; background: #efe8df; font-style: normal; font-size: 11px; font-weight: 800; color: #8a8a8a; text-align: center; transition: background .25s, color .25s; }
.ymm-tab:hover b { color: #111; }
.ymm-tab.on { background: #fff; box-shadow: 0 10px 22px -16px rgba(40,25,10,.4), 0 0 0 1px #ece6de; }
.ymm-tab.on b { color: #111; } .ymm-tab.on em { background: #f7861e; color: #fff; }
.ymm-tab.on::before { content: ""; position: absolute; left: -16px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: #f7861e; }
.ymm-tab:focus-visible { outline: 2px solid #f7861e; outline-offset: 2px; }
.ymm-over { margin-top: auto; display: flex; justify-content: space-between; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 800; color: #111; transition: background .2s; }
.ymm-over:hover { background: #fff; } .ymm-over i { font-style: normal; color: #e56f06; }
.ymm-roi { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 12px; background: #111; color: #fff !important; font-size: 12.5px; font-weight: 700; line-height: 1.3; transition: background .2s; }
.ymm-roi:hover { background: #2a2a2a; } .ymm-roi i { margin-left: auto; font-style: normal; color: #ffb867; }
.ymm-sd { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f7861e; animation: ymm-p 1.8s infinite; }
@keyframes ymm-p { 0% { box-shadow: 0 0 0 0 rgba(247,134,30,.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(247,134,30,0); } }
/* items */
.ymm-list { padding: 22px; }
.ymm-grid { display: none !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
.ymm-grid.on { display: grid !important; animation: ymm-in .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes ymm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ymm-grid a { display: flex; align-items: center; gap: 13px; padding: 10px 12px; border-radius: 14px; transition: background .2s, box-shadow .2s; }
.ymm-grid a:hover, .ymm-grid a.on, .ymm-grid a:focus-visible { background: #fff6ec; box-shadow: inset 0 0 0 1px #fbdcb9; outline: none; }
.ymm-i { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: #fff4e8; transition: background .2s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.ymm-i svg { width: 19px; height: 19px; fill: none; stroke: #e56f06; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.ymm-grid a.on .ymm-i, .ymm-grid a:hover .ymm-i { background: #f7861e; transform: scale(1.06); } .ymm-grid a.on .ymm-i svg, .ymm-grid a:hover .ymm-i svg { stroke: #fff; }
.ymm-tx { display: grid; gap: 2px; min-width: 0; }
.ymm-tx b { font-size: 14.5px; font-weight: 700; color: #111; }
.ymm-tx small { font-size: 12.5px; color: #7a7a7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* live preview */
.ymm-pv { position: relative; display: flex; flex-direction: column; padding: 26px 24px 22px; background: radial-gradient(120% 70% at 100% 0%, #ffe1bf 0%, rgba(255,225,191,0) 60%), #fff7ee; border-left: 1px solid #f3e4d3; }
.ymm-pk { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #e56f06; }
.ymm-pt { margin-top: 8px; font-size: 23px; line-height: 1.12; font-weight: 800; letter-spacing: -.03em; color: #111; }
.ymm-ps { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: #5b5b5b; }
.ymm-stage { position: relative; flex: 1; min-height: 190px; margin: 14px 0 12px; display: grid; place-items: end center; }
.ymm-floor { position: absolute; left: 6%; right: 6%; bottom: 12px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.16); filter: blur(6px); }
.ymm-img { position: relative; max-width: 88%; max-height: 160px; margin-bottom: 18px; filter: drop-shadow(0 10px 10px rgba(0,0,0,.12)); }
.ymm-gw { position: absolute; left: 0; bottom: 18px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: 0 10px 18px -10px rgba(0,0,0,.35); }
.ymm-gw img { width: 38px; height: auto; }
.ymm-gw i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #f7861e; animation: ymm-r 2.2s ease-out infinite; }
@keyframes ymm-r { from { transform: scale(1); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }
.ymm-res { position: absolute; right: 0; top: 6px; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; padding: 9px 14px 9px 11px; border-radius: 14px; background: #111; color: #fff; box-shadow: 0 14px 26px -14px rgba(0,0,0,.5); }
.ymm-res i { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: #f7861e; animation: ymm-p 1.8s infinite; }
.ymm-rl { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffb867; }
.ymm-rv { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.ymm-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; background: #f7861e; color: #fff; font-size: 13.5px; font-weight: 800; box-shadow: 0 12px 24px -12px rgba(247,134,30,.8); }
.ymm-go i { font-style: normal; transition: transform .25s; } .ymm-pv:hover .ymm-go i { transform: translateX(4px); }
.ymm-pv.swap .ymm-pt, .ymm-pv.swap .ymm-ps { animation: ymm-in .4s cubic-bezier(.16,1,.3,1) both; }
.ymm-pv.swap .ymm-img { animation: ymm-im .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes ymm-im { from { opacity: 0; transform: translateX(16px) scale(.96); } to { opacity: 1; transform: none; } }
.ymm-pv.swap .ymm-res { animation: ymm-pop .5s .12s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes ymm-pop { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }

/* ===== responsive ===== */
@media (min-width: 1024px) and (max-width: 1240px) {
  .ymm-in { grid-template-columns: 210px minmax(0, 1fr) 280px; }
  .ymm-list { padding: 18px 14px; } .ymm-grid a { padding: 9px; gap: 10px; }
  .ymm-tx b { font-size: 13.5px; } .ymm-tx small { font-size: 11.5px; }
  .ymm-pt { font-size: 20px; } .ymm-pv { padding: 22px 18px 18px; }
}
@media (max-width: 1023px) { .ymm { display: none !important; } .ymm-item .chev { display: none; } }
/* phone / tablet accordion inside the dark full-screen menu */
.ymm-mli { position: relative; }
.ymm-mt { position: absolute; right: 0; top: 10px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgb(250 250 248 / .08); cursor: pointer; }
.ymm-mt i, .ymm-mt i::after { position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: #f7861e; content: ""; transition: transform .3s; }
.ymm-mt i::after { left: 0; margin: 0; top: 0; transform: rotate(90deg); }
.ymm-mt[aria-expanded="true"] i::after { transform: rotate(0deg) !important; }
.ymm-mli > .row span { margin-right: 56px; visibility: hidden; }
.ymm-mp { padding: 6px 0 14px; }
.ymm-mo { display: flex; justify-content: space-between; padding: 12px 0; font-size: 15px; font-weight: 700; color: #ffb867 !important; }
.ymm-mg { border-top: 1px solid rgb(250 250 248 / .12); }
.ymm-mg summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; list-style: none; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgb(250 250 248 / .75); }
.ymm-mg summary::-webkit-details-marker { display: none; }
.ymm-mg summary i { width: 9px; height: 9px; border-right: 2px solid #f7861e; border-bottom: 2px solid #f7861e; transform: rotate(45deg); transition: transform .3s; }
.ymm-mg[open] summary i { transform: rotate(225deg); }
.ymm-mg ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; padding-bottom: 12px !important; }
.ymm-mg li + li { margin-top: 0 !important; }
.ymm-mg a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: #fafaf8; }
.ymm-mg a:hover { background: rgb(250 250 248 / .07); }
.ymm-mg .ymm-i { width: 34px; height: 34px; background: rgb(247 134 30 / .14); } .ymm-mg .ymm-i svg { stroke: #ffb867; }
.ymm-mg .ymm-tx b { color: #fafaf8; font-size: 15px; } .ymm-mg .ymm-tx small { color: rgb(250 250 248 / .6); white-space: normal; }
.ymm-mstrip { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: rgb(247 134 30 / .14); box-shadow: inset 0 0 0 1px rgb(247 134 30 / .35); color: #fff !important; }
.ymm-mstrip b { font-size: 14px; } .ymm-mstrip i { margin-left: auto; font-style: normal; color: #ffb867; }
@media (prefers-reduced-motion: reduce) { .ymm, .ymm *, .ymm-mp * { transition: none !important; animation: none !important; } }
.ymm-tx small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }