/* ==========================================================================
   Express Shop — full-storefront iframe page
   The Roadster store fills the viewport under the sticky header and scrolls
   internally; the page chrome (header/footer) stays Swift Autos.
   ========================================================================== */

/* Drop the site's own header/footer on this page — the embedded store is
   already Swift-Autos-branded with its own nav + footer. */
.sa-shop-chromeless #masthead,
.sa-shop-chromeless .mob-header,
.sa-shop-chromeless #colophon,
.sa-shop-chromeless .site-footer {
    display: none !important;
}

.sa-shop-chromeless #page,
.sa-shop-chromeless #content,
.sa-shop-chromeless .site-content,
.sa-shop-chromeless .site-main {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

/* tiny utility bar (branding + a way back to the marketing site) */
.shop-topbar {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 30px;
    padding: 0 14px;
    background: #0E1217;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.shop-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none !important;
    color: #C7CEDA !important;
    transition: color .15s ease;
}

.shop-back:hover {
    color: #FF7A1A !important;
}

.shop-back-arrow {
    font-size: 13px;
    line-height: 1;
}

.shop-back-brand {
    font: 800 10.5px/1 'Archivo', sans-serif;
    letter-spacing: .1em;
}

.shop-back-brand b {
    color: #FF7A1A;
    font-weight: 800;
}

.shop-topbar-title {
    font: 600 9.5px/1 'Archivo', sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #76808F;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .1);
}

.shop-topbar-phone {
    margin-left: auto;
    font: 700 11.5px/1 'Archivo', sans-serif;
    color: #fff !important;
    text-decoration: none !important;
    transition: color .15s ease;
}

.shop-topbar-phone:hover {
    color: #FF7A1A !important;
}

.shop-embed {
    position: relative;
    width: 100%;
    height: var(--shop-h, 96vh);
    min-height: 540px;
    background: #0F1319;
    overflow: hidden;
}

/* fill the section completely — absolute positioning prevents the live theme's
   generic iframe rules from shrinking/centering it and exposing the dark bg */
.shop-frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0;
    background: #fff;
}

/* loading overlay */
.shop-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background:
        radial-gradient(700px 360px at 50% 38%, rgba(243, 102, 9, .12), transparent 65%),
        linear-gradient(180deg, #11161D, #0B0E13);
    transition: opacity .4s ease, visibility .4s ease;
}

.shop-loading.shop-hide {
    opacity: 0;
    visibility: hidden;
}

.shop-spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .15);
    border-top-color: #FF7A1A;
    animation: shop-spin .8s linear infinite;
}

@keyframes shop-spin {
    to { transform: rotate(360deg); }
}

.shop-loading-text {
    font: 600 14px/1 'Archivo', sans-serif;
    letter-spacing: .04em;
    color: #B8C0CC;
}

/* JS-off / framing-blocked fallback */
.shop-fallback {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}

.shop-fallback p {
    font: 500 16px/1.6 'Archivo', sans-serif;
    color: #fff;
    max-width: 420px;
}

.shop-fallback a {
    color: #FF7A1A;
    font-weight: 700;
}

@media (max-width: 600px) {
    .shop-embed {
        min-height: 480px;
    }

    .shop-loading-text {
        font-size: 13px;
    }
}

@media (max-width: 768px) { .shop-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 28px; padding: 0 12px; } .shop-embed { margin-top: 28px; } }