.mg-home-page {overflow-x: clip}
.mg-home-page > .ss-main {padding-top: 0}
.mg-shopping-cloud {
    --ink: #291626;
    --copy: #583e4d;
    --accent: #882551;
    --panel: #fffaf7f5;
    --line-cloud: #d7c1cf;
    --canvas: #fbf5f8;
    --action: #392035;
    --action-ink: #fff3f9;
    position: relative;
    isolation: isolate;
    margin: 0 calc(50% - 50vw);
    color: var(--ink);
    overflow: clip;
}
html[data-theme="dark"] .mg-shopping-cloud {
    --ink: #fff3fa;
    --copy: #e8d5e0;
    --accent: #f7a8cc;
    --panel: #241924f5;
    --line-cloud: #66475c;
    --canvas: #170f18;
    --action: #ff559e;
    --action-ink: #25101c;
}
.mg-shopping-cloud [hidden] {display: none !important}
.mg-shopping-cloud :is(button,a) {font-family: inherit; cursor: pointer}
.mg-shopping-cloud a {text-decoration: none}
.mg-shopping-cloud :is(a,button):focus-visible {outline: 3px solid var(--accent); outline-offset: 2px}
.cloud-intro {padding: clamp(27px,2.4vw,38px) 16px 25px; text-align: center}
.cloud-kicker {display: inline-flex; align-items: center; gap: 9px; font-size: 11px; line-height: 1.3; font-weight: 720; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0}
.cloud-kicker::before,.cloud-kicker::after {content: ""; width: 20px; height: 1px; background: currentColor; opacity: .65}
.mg-shopping-cloud .cloud-intro h1 {display: block; width: 100%; max-width: none; text-align: center; color: var(--ink); font-size: clamp(44px,5vw,78px); font-weight: 700; letter-spacing: -.054em; line-height: 1.06; margin: 10px 0 7px}
.cloud-intro h1 em {color: var(--accent); font-style: normal}
.cloud-description {color: var(--copy); font-size: 17px; line-height: 1.45; margin: 7px auto 17px}
.cloud-actions {display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap}
.cloud-actions .cloud-launch {position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 17px 9px 49px; color: var(--action-ink); background: var(--action); border: 0; border-radius: 30px; font-size: 14px; font-weight: 700; line-height: 1.25; box-shadow: 0 3px 10px #33132a28}
.cloud-launch img {position: absolute; bottom: 0; left: 4px; width: 42px; height: 51px; object-fit: contain}
.cloud-actions a {color: var(--ink); font-size: 14px; font-weight: 650}
.cloud-rail {
    --card-w: clamp(235px,23.4vw,355px);
    --gap: clamp(11px,1.25vw,20px);
    position: relative; display: flex; gap: var(--gap); overflow-x: auto;
    height: clamp(265px,23vw,347px); padding: 5px 0 8px;
}
.mg-shopping-cloud.enhanced .cloud-rail {display: block; overflow: clip; touch-action: pan-y pinch-zoom}
.cloud-card {
    position: relative; flex: 0 0 var(--card-w); width: var(--card-w); display: block;
    padding: 0; overflow: hidden; border-radius: 18px;
    color: var(--ink); border: 1px solid #fffa; background: var(--panel);
    box-shadow: 0 3px 10px #29182725;
}
html[data-theme="dark"] .cloud-card {border-color: #b795a878; box-shadow: 0 4px 18px #13091158}
.enhanced .cloud-card {
    position: absolute; left: 50%; top: 5px; height: calc(100% - 14px);
    transform: translateX(calc(-50% + var(--slot,0) * (var(--card-w) + var(--gap)))) translateY(var(--lift,0px));
    transition: transform .72s cubic-bezier(.22,.7,.25,1);
}
.enhanced .cloud-card.snap {transition: none}
.cloud-photo {display: block; width: 100%; height: 100%; object-fit: cover}
.cloud-card[data-collection=eyewear] .cloud-photo {object-position: 50% 41%}
.cloud-card[data-collection=footwear] .cloud-photo {object-position: 50% 62%}
.cloud-card[data-collection=travel] .cloud-photo {object-position: 50% 58%}
.cloud-card[data-collection=audio] .cloud-photo {object-position: 50% 37%}
.cloud-card[data-collection=beauty] .cloud-photo {object-position: 50% 45%}
.cloud-card[data-collection=accessories] .cloud-photo {object-position: 50% 40%}
.cloud-kind {position: absolute; left: 13px; top: 13px; padding: 5px 9px; border-radius: 30px; background: var(--panel); color: var(--ink); font-size: 10px; font-weight: 720; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase}
.cloud-tag {position: absolute; bottom: 9px; left: 9px; right: 9px; display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; border-radius: 12px; background: var(--panel); color: var(--ink); border: 1px solid #e8d9df45; box-shadow: 0 3px 12px #27121d21}
.cloud-tag img {width: 44px; height: 44px; border-radius: 7px; object-fit: cover}
.cloud-tag small {color: var(--copy); display: block; font-size: 10px; line-height: 1.25}
.cloud-tag strong {display: block; font-size: 16px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2}
.cloud-tag b {width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; margin-left: auto; border-radius: 50%; border: 1px solid var(--line-cloud); color: var(--accent); font: normal 16px/1 Arial,sans-serif}
.cloud-dialog {position: fixed; inset: 0; margin: auto; width: min(440px,90vw); max-height: 85dvh; padding: 26px; background: var(--canvas); color: var(--ink); border: 1px solid var(--line-cloud); border-radius: 18px; box-shadow: 0 18px 70px #130d1655}
.cloud-dialog::backdrop {background: #201322aa}
.cloud-close {float: right; border: 1px solid var(--line-cloud); border-radius: 50%; width: 34px; height: 34px; font-size: 19px; padding: 0; color: var(--ink); background: var(--panel)}
.cloud-detail-image {display: block; border-radius: 12px; object-fit: cover}
.cloud-dialog h2 {margin: 14px 0 8px; font-size: 27px; color: var(--ink); line-height: 1.2}
.cloud-dialog p {line-height: 1.55; margin: 0 0 14px; color: var(--copy)}
.cloud-dialog .cloud-detail-link {color: var(--accent); font-weight: 650}
@media(max-width:850px) {
    .cloud-rail {--card-w: 34vw; height: 300px}
}
@media(max-width:620px) {
    .cloud-rail {--card-w: 72vw; --gap: 10px; height: clamp(260px,80vw,345px)}
    .cloud-intro {padding: 28px 14px 20px}
    .mg-shopping-cloud .cloud-intro h1 {font-size: clamp(35px,9vw,50px)}
    .cloud-description {font-size: 14px; max-width: 330px}
    .cloud-actions {gap: 10px 14px}
    .cloud-actions a {font-size: 13px}
}
@media(prefers-reduced-motion: reduce) {.enhanced .cloud-card {transition: none}}