/* Flash Sale look (D-110, client design): 7-colour rotating border, shine sweep, rainbow title, moving offer
   strip, and a glow that pulses while the sale is running. Motion stops for people who ask for less motion. */
.fs-box { position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; padding: 4px; color: #fff; transition: transform .8s ease, box-shadow .8s ease; }
.fs-box::before { content: ""; position: absolute; z-index: -2; inset: -100%; background: conic-gradient(#ff004c, #ff7300, #ffe600, #18ff68, #00d9ff, #4169ff, #c900ff, #ff004c); animation: fs-rotate 4s linear infinite; }
.fs-box::after { content: ""; position: absolute; z-index: -1; inset: 4px; border-radius: 14px; background: radial-gradient(circle at 10% 10%, rgba(0, 217, 255, .14), transparent 28%), radial-gradient(circle at 90% 90%, rgba(255, 0, 120, .14), transparent 28%), #071426; }
.fs-box.is-live { animation: fs-pulse 2.2s ease-in-out infinite; }
.fs-shine { position: absolute; z-index: 1; top: -80%; left: -50%; width: 35%; height: 260%; transform: rotate(25deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); pointer-events: none; animation: fs-shine 3.5s linear infinite; }
.fs-box > *:not(.fs-shine) { position: relative; z-index: 2; }
.fs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 20px 22px 10px; }
.fs-fire { display: inline-block; font-size: 2.2rem; line-height: 1; animation: fs-fire .8s ease-in-out infinite alternate; }
.fs-title { font-size: clamp(1.5rem, 4vw, 2.3rem); font-weight: 900; line-height: 1.1; letter-spacing: .02em; background: linear-gradient(90deg, #ff004c, #ff7300, #ffe600, #18ff68, #00d9ff, #4169ff, #c900ff); background-size: 400%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fs-flow 4s linear infinite; }
.fs-sub { color: #a9c1d7; font-size: .85rem; margin-top: 2px; }
.fs-timer { border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07); padding: 8px 12px; }
.fs-timer [data-cd] { color: #fff; }
.fs-timer .fs-unit { min-width: 3.1rem; border-radius: 10px; background: rgba(0, 0, 0, .35); padding: 6px 4px; text-align: center; }
.fs-offer { margin: 4px 22px 16px; border-radius: 10px; padding: 9px 12px; text-align: center; font-weight: 900; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); background: linear-gradient(90deg, #ff004c, #ff7300, #ffe600, #18ff68, #00d9ff, #4169ff, #c900ff); background-size: 400%; animation: fs-flow 4s linear infinite, fs-glow 1.5s ease-in-out infinite alternate; }
.fs-body { padding: 0 22px 22px; }
.fs-body .mc { color: #172033; }
.fs-more { display: inline-block; border: 1px solid #00d9ff; border-radius: 999px; padding: 9px 20px; color: #00d9ff; font-weight: 700; text-decoration: none; }
.fs-more:hover { background: #00d9ff; color: #071426; }

/* Product card extras while a flash price applies. */
.mc__tag--flash { background: linear-gradient(90deg, #ff004c, #ff7300); color: #fff; }
.mc__flash { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; color: #d50000; }
.mc__flashbar { display: block; height: 6px; margin-top: 4px; overflow: hidden; border-radius: 999px; background: #fde2e2; }
.mc__flashbar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff004c, #ff7300, #ffe600); }

@keyframes fs-rotate { to { transform: rotate(360deg); } }
@keyframes fs-shine { 0% { left: -50%; } 100% { left: 150%; } }
@keyframes fs-flow { to { background-position: 400% 0; } }
@keyframes fs-fire { from { transform: scale(1); } to { transform: scale(1.22) rotate(-5deg); } }
@keyframes fs-glow { from { box-shadow: 0 0 8px rgba(0, 217, 255, .3); } to { box-shadow: 0 0 18px rgba(255, 255, 255, .5), 0 0 30px rgba(0, 217, 255, .35); } }
@keyframes fs-pulse {
    0%, 100% { box-shadow: 0 0 12px #ff004c, 0 0 25px #00d9ff, 0 0 40px #c900ff; }
    50% { box-shadow: 0 0 22px #ff004c, 0 0 45px #ffe600, 0 0 65px #00d9ff, 0 0 85px #c900ff; }
}

@media (max-width: 640px) {
    .fs-head { padding: 16px 12px 8px; }
    .fs-offer { margin: 4px 12px 12px; font-size: .8rem; }
    .fs-body { padding: 0 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .fs-box::before, .fs-box.is-live, .fs-shine, .fs-fire, .fs-title, .fs-offer { animation: none !important; }
    .fs-shine { display: none; }
}

/* Sold bar widths in 10% steps (no inline styles under the CSP). */
.fs-w-0 { width: 2%; }
.fs-w-10 { width: 10%; }
.fs-w-20 { width: 20%; }
.fs-w-30 { width: 30%; }
.fs-w-40 { width: 40%; }
.fs-w-50 { width: 50%; }
.fs-w-60 { width: 60%; }
.fs-w-70 { width: 70%; }
.fs-w-80 { width: 80%; }
.fs-w-90 { width: 90%; }
.fs-w-100 { width: 100%; }