:root {
  --shop-violet:#54418d;
  --shop-soft:#f5f0ff;
  --shop-ink:#30284c;
  --shop-banner-radius:18px;
  --shop-banner-title:23px;
  --shop-heading-size:clamp(32px,4vw,56px);
  --shop-copy-width:650px;
  --shop-art-max:520px;
  --shop-art-min:220px;
  --shop-tag-spacing:1.4px;
  --shop-sidebar-banner-scale:.8;
}
.shop-launch-banner {
  position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between;
  width:100%; aspect-ratio:4/5; overflow:hidden; border-radius:var(--shop-banner-radius);
  padding:var(--space-4); margin-bottom:var(--space-4); background:var(--shop-violet); color:white;
  box-shadow:var(--shadow); transition:transform .18s ease,box-shadow .18s ease;
}
.shop-launch-banner:hover { transform:translateY(-2px); box-shadow:0 10px 26px #54418d28; }
.sidebar .shop-launch-banner { width:calc(100% * var(--shop-sidebar-banner-scale)); margin-inline:auto; padding:calc(var(--space-4) * var(--shop-sidebar-banner-scale)); }
.sidebar .shop-banner-heading { font-size:calc(var(--shop-banner-title) * var(--shop-sidebar-banner-scale)); }
.sidebar .shop-banner-link { gap:4px; font-size:12px; }
.sidebar .shop-banner-link>img { width:20px; height:20px; }
.sidebar .shop-banner-link>span:not(.shop-banner-arrow) { word-break:keep-all; overflow-wrap:normal; }
.shop-banner-art { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.shop-launch-banner::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#30205065,transparent 45%,#302050a6); }
.shop-banner-kicker { align-self:flex-start; font-size:var(--compact-caption-font); font-weight:700; letter-spacing:var(--shop-tag-spacing); padding:4px 8px; border:1px solid #ffffff90; border-radius:20px; background:#30284c40; }
.shop-banner-heading { position:absolute; left:var(--space-4); right:var(--space-4); top:23%; display:block; white-space:pre-line; word-break:keep-all; font-size:var(--shop-banner-title); font-weight:700; line-height:1.25; text-shadow:0 2px 12px #30284c65; }
.shop-banner-link img { width:24px; height:24px; padding:0; border-radius:7px; background:#fff; }
.shop-banner-link { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:var(--font-small); font-weight:650; padding-top:var(--mobile-action-gap); }
.shop-banner-arrow { font-size:22px; line-height:1; }
.shop-opening { background:linear-gradient(140deg,#faf7ff,#fff6eb); border:1px solid #e8dfef; border-radius:var(--sheet-radius); overflow:hidden; }
.shop-opening-copy { position:relative; padding:clamp(28px,5vw,64px) var(--space-5) 0; max-width:var(--shop-copy-width); margin:auto; text-align:center; }
.shop-opening-kicker { display:inline-flex; align-items:center; border:1px solid #d9cceb; border-radius:20px; padding:6px 14px; color:var(--shop-violet); font-size:12px; font-weight:700; letter-spacing:var(--shop-tag-spacing); background:#ffffffb0; }
.shop-opening h2 { font-size:var(--shop-heading-size); color:var(--shop-ink); line-height:1.25; letter-spacing:-1.6px; margin:var(--space-5) 0 var(--space-4); word-break:keep-all; }
.shop-opening-promise { font-size:clamp(18px,2.1vw,25px); line-height:1.5; color:var(--shop-violet); font-weight:600; word-break:keep-all; }
.shop-opening-description { margin-top:var(--space-4); color:var(--muted); font-size:var(--font-small); word-break:keep-all; }
.shop-opening-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--mobile-action-gap); margin-top:var(--space-5); }
.shop-opening-art { margin-top:var(--space-5); overflow:hidden; }
.shop-opening-art img { width:100%; height:auto; max-height:var(--shop-art-max); object-fit:cover; display:block; }
.shop-opening-footer { display:flex; align-items:center; flex-wrap:wrap; gap:var(--mobile-note-gap); padding:var(--space-5); background:#ffffffd9; border-top:1px solid #e8dfef; color:var(--shop-ink); font-size:var(--font-small); }
.shop-opening-status { margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--teal); font-size:var(--mobile-label-font); white-space:nowrap; }
.shop-opening-status::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); }
:root[data-layout="tablet"] .shop-launch-banner { padding:var(--mobile-note-gap); --shop-banner-title:18px; }
:root[data-layout="tablet"] .shop-banner-heading { left:var(--mobile-note-gap); right:var(--mobile-note-gap); }
:root[data-layout="tablet"] .shop-banner-link { font-size:var(--compact-caption-font); gap:4px; white-space:normal; }
:root[data-layout="tablet"] .shop-banner-link img { width:20px; height:20px; }
:root[data-layout="tablet"] .shop-banner-arrow { font-size:16px; }
:root[data-layout="mobile"] .all-menu+.shop-launch-banner { max-width:200px; margin:var(--space-5) auto 0; }
:root[data-layout="mobile"] .shop-opening-copy { padding-inline:var(--space-4); }
:root[data-layout="mobile"] .shop-opening-art img { min-height:var(--shop-art-min); object-fit:cover; }
:root[data-layout="mobile"] .shop-opening-footer { padding:var(--space-4); }
@media(prefers-reduced-motion:reduce) { .shop-launch-banner:hover { transform:none; } }

.shop-banner-link>span:not(.shop-banner-arrow) { min-width:0; overflow-wrap:anywhere; }
.shop-banner-link>img,.shop-banner-arrow { flex-shrink:0; }
