/*
 * Falcon Shop Boost — storefront styles. Every class is prefixed sb-; colours follow the
 * theme's --primary. The placeholders reuse the shop's .fsx-skel shimmer.
 */

/* ---- Under the price: countdown and "only N left" ------------------------------------------ */
.sb-under-price { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px; }
.sb-under-price:empty { display: none; }

.sb-countdown {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 8px; width: fit-content;
    background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239;
    font-size: 13px; font-weight: 600;
}
.sb-countdown__units { display: inline-flex; gap: 6px; }
.sb-countdown__unit {
    display: inline-flex; flex-direction: column; align-items: center; min-width: 40px;
    padding: 4px 6px; border-radius: 6px; background: #be123c; color: #fff; line-height: 1.1;
}
.sb-countdown__unit[hidden] { display: none; }
.sb-countdown__unit b { font-size: 16px; font-variant-numeric: tabular-nums; }
.sb-countdown__unit small { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.sb-countdown__unit.is-flip b { animation: sb-flip .35s ease; }
.sb-countdown.is-over { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
@keyframes sb-flip {
    0% { transform: rotateX(90deg); opacity: 0; }
    100% { transform: rotateX(0); opacity: 1; }
}

.sb-low-stock { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: #b45309; }
.sb-low-stock[hidden] { display: none; }
.sb-low-stock strong { color: #92400e; }
.sb-low-stock__dot {
    width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, .6); animation: sb-pulse 1.6s ease-out infinite;
}
@keyframes sb-pulse { to { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); } }

/* ---- Back in stock --------------------------------------------------------------------------- */
.sb-stock-alert { margin-top: 14px; padding: 14px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc; max-width: 520px; }
.sb-stock-alert[hidden] { display: none; }
.sb-stock-alert__title { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #0f172a; }
.sb-stock-alert__row { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-stock-alert__input {
    flex: 1 1 200px; min-width: 0; height: 42px; padding: 0 12px;
    border: 1px solid #cbd5e1; border-radius: 4px; font-size: 14px; background: #fff;
}
.sb-stock-alert__input:focus { outline: 2px solid var(--primary, #0091ea); outline-offset: -1px; }
.sb-stock-alert__btn {
    height: 42px; padding: 0 18px; border: 0; border-radius: 4px; cursor: pointer;
    background: var(--primary, #0091ea); color: #fff; font-size: 14px; font-weight: 700;
}
.sb-stock-alert__msg { margin: 8px 0 0; font-size: 13px; min-height: 0; }
.sb-stock-alert__msg:empty { display: none; }
.sb-stock-alert__msg.is-ok { color: #047857; }
.sb-stock-alert__msg.is-error { color: #be123c; }

/* ---- Sticky add to cart (phones) ------------------------------------------------------------- */
.sb-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #e2e8f0; box-shadow: 0 -6px 20px rgba(15, 23, 42, .08);
    animation: sb-rise .25s ease-out;
}
.sb-sticky[hidden] { display: none; }
.sb-sticky__img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #eef1f5; }
.sb-sticky__info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sb-sticky__title { font-size: 13px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-sticky__price { font-size: 14px; font-weight: 700; color: #0f172a; }
.sb-sticky__btn {
    flex-shrink: 0; height: 42px; padding: 0 16px; border: 0; border-radius: 4px; cursor: pointer;
    background: var(--primary, #0091ea); color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase;
}
.sb-sticky__btn:disabled { background: #cbd5e1; cursor: not-allowed; }
html.sb-sticky-on body { padding-bottom: 72px; }
/* The site's back-to-top button moves up out of the bar's way (`translate` adds to its own transform). */
html.sb-sticky-on #fc-to-top { translate: 0 -72px; }
@keyframes sb-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

.sb-was { color: #94a3b8; font-weight: 400; margin-right: 4px; }

/* ---- Quick view ------------------------------------------------------------------------------- */
.sb-qv-btn {
    width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #334155; box-shadow: 0 2px 8px rgba(15, 23, 42, .15);
    transition: transform .15s ease, color .15s ease;
}
.sb-qv-btn:hover, .sb-qv-btn:focus-visible { color: var(--primary, #0091ea); transform: scale(1.08); }

.sb-qv { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sb-qv[hidden] { display: none; }
html.sb-qv-open { overflow: hidden; }
.sb-qv__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); animation: sb-fade .2s ease; }
.sb-qv__dialog {
    position: relative; width: 100%; max-width: 860px; max-height: calc(100vh - 32px); overflow: auto;
    background: #fff; border-radius: 12px; box-shadow: 0 30px 80px rgba(15, 23, 42, .35);
    animation: sb-pop .25s cubic-bezier(.2, .9, .3, 1.2); outline: none;
}
.sb-qv__close {
    position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
    border: 0; background: #f1f5f9; color: #334155; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sb-qv__body { padding: 24px; }
.sb-qv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.sb-qv__media { display: flex; flex-direction: column; gap: 10px; }
.sb-qv__main { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #eef1f5; }
.sb-qv__thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-qv__thumb { width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #eef1f5; }
.sb-qv__thumb.is-on { border-color: var(--primary, #0091ea); }
.sb-qv__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-qv__info { display: flex; flex-direction: column; gap: 14px; padding-right: 24px; }
.sb-qv__title { margin: 0; font-size: 22px; line-height: 1.25; color: #0f172a; }
.sb-qv__price { font-size: 20px; font-weight: 700; color: #0f172a; }
.sb-qv__summary { font-size: 14px; color: #475569; line-height: 1.6; max-height: 9.6em; overflow: hidden; }
.sb-qv__attr { display: flex; flex-direction: column; gap: 8px; }
.sb-qv__attr-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #334155; }
.sb-qv__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-qv__chip {
    min-width: 44px; height: 36px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 6px;
    background: #fff; color: #334155; font-size: 13px; font-weight: 600; cursor: pointer;
}
.sb-qv__chip[aria-pressed="true"] { border-color: var(--primary, #0091ea); background: var(--primary, #0091ea); color: #fff; }
.sb-qv__buy { display: flex; gap: 10px; }
.sb-qv__qty { width: 72px; height: 46px; border: 1px solid #cbd5e1; border-radius: 4px; text-align: center; font-size: 15px; font-weight: 700; }
.sb-qv__add {
    flex: 1; height: 46px; border: 0; border-radius: 4px; cursor: pointer;
    background: var(--primary, #0091ea); color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase;
}
.sb-qv__add:disabled { background: #cbd5e1; cursor: not-allowed; }
.sb-qv__note { margin: -6px 0 0; font-size: 13px; color: #be123c; }
.sb-qv__note:empty { display: none; }
.sb-qv__more { font-size: 14px; font-weight: 600; color: var(--primary, #0091ea); text-decoration: underline; }
.sb-qv__error { margin: 40px 0; text-align: center; color: #475569; }
.sb-qv__loading { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.sb-qv__skel-img { aspect-ratio: 1; border-radius: 8px; }
.sb-qv__skel-lines { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
@keyframes sb-fade { from { opacity: 0; } }
@keyframes sb-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } }

@media (max-width: 640px) {
    .sb-qv { align-items: flex-end; padding: 0; }
    .sb-qv__dialog { max-height: 92vh; border-radius: 16px 16px 0 0; }
    .sb-qv__body { padding: 18px 16px 24px; }
    .sb-qv__grid, .sb-qv__loading { grid-template-columns: 1fr; gap: 16px; }
    .sb-qv__info { padding-right: 0; }
    .sb-qv__main { aspect-ratio: 4 / 3; }
}

/* ---- Order celebration ---------------------------------------------------------------------- */
.sb-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10001; }

/* ---- Reduced motion: everything still shows, nothing moves ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sb-countdown__unit.is-flip b, .sb-low-stock__dot, .sb-sticky, .sb-qv__backdrop, .sb-qv__dialog { animation: none; }
    .sb-qv-btn { transition: none; }
}