/* SFN0332_LIVE_SHOWCASES_REFINEMENT
   Public website only. Never load this file in /central/. */

.sfn289{padding:104px 0 110px;background:
 radial-gradient(circle at 8% 8%,rgba(66,223,160,.12),transparent 30%),
 radial-gradient(circle at 92% 90%,rgba(87,133,255,.10),transparent 34%),
 #071e2e}
.sfn289 .sf-wrap{max-width:1180px}
.sfn289-head{align-items:center;margin-bottom:38px}
.sfn289-head>div{max-width:760px}
.sfn289-head h2{font-size:clamp(30px,3.1vw,44px);letter-spacing:-1.2px;text-wrap:balance}
.sfn289-head p{font-size:14px;line-height:2}
.sfn332-live{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 13px;border:1px solid rgba(83,223,169,.28);border-radius:999px;background:rgba(83,223,169,.09);color:#d7fff0;font-size:12px;font-weight:800}
.sfn332-live:before{content:"";width:8px;height:8px;border-radius:50%;background:#54dfa9;box-shadow:0 0 0 5px rgba(84,223,169,.10)}

.sfn289-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sfn289-card{min-height:390px;padding:18px;border-radius:28px;border-color:rgba(255,255,255,.11);box-shadow:0 22px 60px rgba(0,0,0,.15)}
.sfn289-card:hover{transform:translateY(-5px);box-shadow:0 30px 74px rgba(0,0,0,.23)}
.sfn289-preview{height:190px;grid-template-columns:58px 1fr;grid-template-rows:34px 1fr;gap:12px;padding:16px;border-radius:20px;box-shadow:inset 0 0 0 1px rgba(7,30,46,.05)}
.sfn289-preview:before{content:"";position:absolute;right:16px;top:12px;width:32px;height:7px;border-radius:20px;background:rgba(7,30,46,.13);box-shadow:44px 0 0 rgba(7,30,46,.08),88px 0 0 rgba(7,30,46,.05)}
.sfn289-preview i{border-radius:13px}
.sfn289-preview b{width:54%;height:10px}
.sfn289-preview em{border-radius:14px;background:
 linear-gradient(180deg,transparent 0 58%,rgba(7,30,46,.035) 58% 100%),
 linear-gradient(90deg,#e2eaee 0 30%,#fff 30% 64%,#e9eff2 64% 100%)}
.sfn289-info{padding:19px 5px 2px}
.sfn289-info small{font-size:12px}
.sfn289-info h3{font-size:21px;margin:6px 0 7px}
.sfn289-info p{font-size:13px;line-height:2;color:#b8c8d2;max-width:92%}
.sfn289-info strong{display:inline-flex;align-items:center;gap:7px;width:max-content;padding-top:18px;color:#eefaf6;transition:.2s}
.sfn289-card:hover .sfn289-info strong{transform:translateX(-3px);color:var(--tone)}
.sfn332-status{position:absolute;z-index:3;top:30px;left:30px;display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:rgba(7,30,46,.86);backdrop-filter:blur(8px);color:#fff;font-size:10px;font-weight:800;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.sfn332-status:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tone)}
.sfn289-note{margin-top:26px;color:#9fb4c1}

/* Each storefront gets a subtle identity without changing the underlying store. */
.sfn289-card.pastry .sfn289-preview{background:linear-gradient(145deg,#fff9f0,#f6efe6)}
.sfn289-card.beauty .sfn289-preview{background:linear-gradient(145deg,#fff5fb,#f3eef8)}
.sfn289-card.gold .sfn289-preview{background:linear-gradient(145deg,#fffaf0,#f2ede2)}
.sfn289-card.motor .sfn289-preview{background:linear-gradient(145deg,#f4f7f9,#e8eef2)}

@media(max-width:900px){
 .sfn289{padding:82px 0}
 .sfn289-head{align-items:flex-start}
 .sfn289-grid{grid-template-columns:1fr 1fr}
 .sfn289-card{min-height:350px}
 .sfn289-preview{height:155px}
}
@media(max-width:680px){
 .sfn289-head{display:flex;flex-direction:column;gap:16px}
 .sfn289-grid{grid-template-columns:1fr}
 .sfn289-card{min-height:330px}
 .sfn289-preview{height:150px}
 .sfn332-status{top:28px;left:28px}
}